diff --git a/improved_deserialize_user.sql b/improved_deserialize_user.sql
new file mode 100644
index 000000000..d46951f2e
--- /dev/null
+++ b/improved_deserialize_user.sql
@@ -0,0 +1,92 @@
+CREATE OR REPLACE FUNCTION deserialize_user(_id uuid) RETURNS json
+    LANGUAGE plpgsql
+AS
+$$
+DECLARE
+    _result JSON;
+BEGIN
+    -- Optimized version using CTEs for better performance and maintainability
+    WITH user_team_data AS (
+        SELECT 
+            u.id,
+            u.name,
+            u.email,
+            u.timezone_id AS timezone,
+            u.avatar_url,
+            u.user_no,
+            u.socket_id,
+            u.created_at AS joined_date,
+            u.updated_at AS last_updated,
+            u.setup_completed AS my_setup_completed,
+            (is_null_or_empty(u.google_id) IS FALSE) AS is_google,
+            COALESCE(u.active_team, (SELECT id FROM teams WHERE user_id = u.id LIMIT 1)) AS team_id,
+            u.active_team
+        FROM users u
+        WHERE u.id = _id
+    ),
+    team_org_data AS (
+        SELECT 
+            utd.*,
+            t.name AS team_name,
+            t.user_id AS owner_id,
+            o.subscription_status,
+            o.license_type_id,
+            o.trial_expire_date
+        FROM user_team_data utd
+        INNER JOIN teams t ON t.id = utd.team_id
+        LEFT JOIN organizations o ON o.user_id = t.user_id
+    ),
+    notification_data AS (
+        SELECT 
+            tod.*,
+            COALESCE(ns.email_notifications_enabled, TRUE) AS email_notifications_enabled
+        FROM team_org_data tod
+        LEFT JOIN notification_settings ns ON (ns.user_id = tod.id AND ns.team_id = tod.team_id)
+    ),
+    alerts_data AS (
+        SELECT COALESCE(ARRAY_TO_JSON(ARRAY_AGG(ROW_TO_JSON(alert_rec))), '[]'::JSON) AS alerts
+        FROM (SELECT description, type FROM worklenz_alerts WHERE active IS TRUE) alert_rec
+    ),
+    complete_user_data AS (
+        SELECT 
+            nd.*,
+            tz.name AS timezone_name,
+            slt.key AS subscription_type,
+            tm.id AS team_member_id,
+            ad.alerts,
+            CASE
+                WHEN nd.subscription_status = 'trialing' THEN nd.trial_expire_date::DATE
+                WHEN EXISTS(SELECT 1 FROM licensing_custom_subs WHERE user_id = nd.owner_id) 
+                    THEN (SELECT end_date FROM licensing_custom_subs WHERE user_id = nd.owner_id LIMIT 1)::DATE
+                WHEN EXISTS(SELECT 1 FROM licensing_user_subscriptions WHERE user_id = nd.owner_id AND active IS TRUE)
+                    THEN (SELECT (next_bill_date)::DATE - INTERVAL '1 day' 
+                          FROM licensing_user_subscriptions 
+                          WHERE user_id = nd.owner_id AND active IS TRUE 
+                          LIMIT 1)::DATE
+                ELSE NULL
+            END AS valid_till_date,
+            CASE
+                WHEN is_owner(nd.id, nd.active_team) THEN nd.my_setup_completed
+                ELSE TRUE 
+            END AS setup_completed,
+            is_owner(nd.id, nd.active_team) AS owner,
+            is_admin(nd.id, nd.active_team) AS is_admin
+        FROM notification_data nd
+        CROSS JOIN alerts_data ad
+        LEFT JOIN timezones tz ON tz.id = nd.timezone
+        LEFT JOIN sys_license_types slt ON slt.id = nd.license_type_id
+        LEFT JOIN team_members tm ON (tm.user_id = nd.id AND tm.team_id = nd.team_id AND tm.active IS TRUE)
+    )
+    SELECT ROW_TO_JSON(complete_user_data.*) INTO _result FROM complete_user_data;
+
+    -- Ensure notification settings exist using INSERT...ON CONFLICT for better concurrency
+    INSERT INTO notification_settings (user_id, team_id, email_notifications_enabled, popup_notifications_enabled, show_unread_items_count)
+    SELECT _id, 
+           COALESCE((SELECT active_team FROM users WHERE id = _id), 
+                   (SELECT id FROM teams WHERE user_id = _id LIMIT 1)),
+           TRUE, TRUE, TRUE
+    ON CONFLICT (user_id, team_id) DO NOTHING;
+
+    RETURN _result;
+END
+$$;
\ No newline at end of file
diff --git a/test_sort_fix.sql b/test_sort_fix.sql
deleted file mode 100644
index ceb0b0a09..000000000
--- a/test_sort_fix.sql
+++ /dev/null
@@ -1,41 +0,0 @@
--- Test script to verify the sort order constraint fix
-
--- Test the helper function
-SELECT get_sort_column_name('status');    -- Should return 'status_sort_order'
-SELECT get_sort_column_name('priority');  -- Should return 'priority_sort_order'
-SELECT get_sort_column_name('phase');     -- Should return 'phase_sort_order'
-SELECT get_sort_column_name('members');   -- Should return 'member_sort_order'
-SELECT get_sort_column_name('unknown');   -- Should return 'status_sort_order' (default)
-
--- Test bulk update function (example - would need real project_id and task_ids)
-/*
-SELECT update_task_sort_orders_bulk(
-    '[
-        {"task_id": "example-uuid", "sort_order": 1, "status_id": "status-uuid"},
-        {"task_id": "example-uuid-2", "sort_order": 2, "status_id": "status-uuid"}
-    ]'::json,
-    'status'
-);
-*/
-
--- Verify that sort_order constraint still exists and works
-SELECT 
-    tc.constraint_name,
-    tc.table_name,
-    kcu.column_name
-FROM information_schema.table_constraints tc
-JOIN information_schema.key_column_usage kcu 
-    ON tc.constraint_name = kcu.constraint_name
-WHERE tc.constraint_name = 'tasks_sort_order_unique';
-
--- Check that new sort order columns don't have unique constraints (which is correct)
-SELECT 
-    tc.constraint_name,
-    tc.table_name,
-    kcu.column_name
-FROM information_schema.table_constraints tc
-JOIN information_schema.key_column_usage kcu 
-    ON tc.constraint_name = kcu.constraint_name
-WHERE kcu.table_name = 'tasks'
-  AND kcu.column_name IN ('status_sort_order', 'priority_sort_order', 'phase_sort_order', 'member_sort_order')
-  AND tc.constraint_type = 'UNIQUE';
\ No newline at end of file
diff --git a/test_sort_orders.sql b/test_sort_orders.sql
deleted file mode 100644
index 6a45de846..000000000
--- a/test_sort_orders.sql
+++ /dev/null
@@ -1,30 +0,0 @@
--- Test script to validate the separate sort order implementation
-
--- Check if new columns exist
-SELECT column_name, data_type, is_nullable, column_default
-FROM information_schema.columns 
-WHERE table_name = 'tasks' 
-  AND column_name IN ('status_sort_order', 'priority_sort_order', 'phase_sort_order', 'member_sort_order')
-ORDER BY column_name;
-
--- Check if helper function exists
-SELECT routine_name, routine_type
-FROM information_schema.routines 
-WHERE routine_name IN ('get_sort_column_name', 'update_task_sort_orders_bulk', 'handle_task_list_sort_order_change');
-
--- Sample test data to verify different sort orders work
--- (This would be run after the migrations)
-/*
--- Test: Tasks should have different orders for different groupings
-SELECT 
-  id, 
-  name, 
-  sort_order, 
-  status_sort_order, 
-  priority_sort_order, 
-  phase_sort_order, 
-  member_sort_order
-FROM tasks 
-WHERE project_id = '<test-project-id>'
-ORDER BY status_sort_order;
-*/
\ No newline at end of file
diff --git a/worklenz-backend/.env.template b/worklenz-backend/.env.template
index fdd8fe447..c8fca30cf 100644
--- a/worklenz-backend/.env.template
+++ b/worklenz-backend/.env.template
@@ -38,6 +38,9 @@ HOSTNAME=localhost:5000
 SLACK_WEBHOOK=your_slack_webhook_url
 USE_PG_NATIVE=false
 
+# Teams Support Webhook
+TEAMS_SUPPORT_WEBHOOK=your_teams_webhook_url
+
 # JWT SECRET
 JWT_SECRET=your_jwt_secret
 
diff --git a/worklenz-backend/database/migrations/release-v2.1.4/20250724000000-add-survey-tables.sql b/worklenz-backend/database/migrations/release-v2.1.4/20250724000000-add-survey-tables.sql
new file mode 100644
index 000000000..ad779ae34
--- /dev/null
+++ b/worklenz-backend/database/migrations/release-v2.1.4/20250724000000-add-survey-tables.sql
@@ -0,0 +1,93 @@
+-- Migration: Add survey tables for account setup questionnaire
+-- Date: 2025-07-24
+-- Description: Creates tables to store survey questions and user responses for account setup flow
+
+BEGIN;
+
+-- Create surveys table to define different types of surveys
+CREATE TABLE IF NOT EXISTS surveys (
+    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+    name VARCHAR(255) NOT NULL,
+    description TEXT,
+    survey_type VARCHAR(50) DEFAULT 'account_setup' NOT NULL, -- 'account_setup', 'onboarding', 'feedback'
+    is_active BOOLEAN DEFAULT TRUE NOT NULL,
+    created_at TIMESTAMP DEFAULT now() NOT NULL,
+    updated_at TIMESTAMP DEFAULT now() NOT NULL
+);
+
+-- Create survey_questions table to store individual questions
+CREATE TABLE IF NOT EXISTS survey_questions (
+    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+    survey_id UUID REFERENCES surveys(id) ON DELETE CASCADE NOT NULL,
+    question_key VARCHAR(100) NOT NULL, -- Used for localization keys
+    question_type VARCHAR(50) NOT NULL, -- 'single_choice', 'multiple_choice', 'text'
+    is_required BOOLEAN DEFAULT FALSE NOT NULL,
+    sort_order INTEGER DEFAULT 0 NOT NULL,
+    options JSONB, -- For choice questions, store options as JSON array
+    created_at TIMESTAMP DEFAULT now() NOT NULL,
+    updated_at TIMESTAMP DEFAULT now() NOT NULL
+);
+
+-- Create survey_responses table to track user responses to surveys
+CREATE TABLE IF NOT EXISTS survey_responses (
+    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+    survey_id UUID REFERENCES surveys(id) ON DELETE CASCADE NOT NULL,
+    user_id UUID REFERENCES users(id) ON DELETE CASCADE NOT NULL,
+    is_completed BOOLEAN DEFAULT FALSE NOT NULL,
+    started_at TIMESTAMP DEFAULT now() NOT NULL,
+    completed_at TIMESTAMP,
+    created_at TIMESTAMP DEFAULT now() NOT NULL,
+    updated_at TIMESTAMP DEFAULT now() NOT NULL
+);
+
+-- Create survey_answers table to store individual question answers
+CREATE TABLE IF NOT EXISTS survey_answers (
+    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+    response_id UUID REFERENCES survey_responses(id) ON DELETE CASCADE NOT NULL,
+    question_id UUID REFERENCES survey_questions(id) ON DELETE CASCADE NOT NULL,
+    answer_text TEXT,
+    answer_json JSONB, -- For multiple choice answers stored as array
+    created_at TIMESTAMP DEFAULT now() NOT NULL,
+    updated_at TIMESTAMP DEFAULT now() NOT NULL
+);
+
+-- Add performance indexes
+CREATE INDEX IF NOT EXISTS idx_surveys_type_active ON surveys(survey_type, is_active);
+CREATE INDEX IF NOT EXISTS idx_survey_questions_survey_order ON survey_questions(survey_id, sort_order);
+CREATE INDEX IF NOT EXISTS idx_survey_responses_user_survey ON survey_responses(user_id, survey_id);
+CREATE INDEX IF NOT EXISTS idx_survey_responses_completed ON survey_responses(survey_id, is_completed);
+CREATE INDEX IF NOT EXISTS idx_survey_answers_response ON survey_answers(response_id);
+
+-- Add constraints
+ALTER TABLE survey_questions ADD CONSTRAINT survey_questions_sort_order_check CHECK (sort_order >= 0);
+ALTER TABLE survey_questions ADD CONSTRAINT survey_questions_type_check CHECK (question_type IN ('single_choice', 'multiple_choice', 'text'));
+
+-- Add unique constraint to prevent duplicate responses per user per survey
+ALTER TABLE survey_responses ADD CONSTRAINT unique_user_survey_response UNIQUE (user_id, survey_id);
+
+-- Add unique constraint to prevent duplicate answers per question per response
+ALTER TABLE survey_answers ADD CONSTRAINT unique_response_question_answer UNIQUE (response_id, question_id);
+
+-- Insert the default account setup survey
+INSERT INTO surveys (name, description, survey_type, is_active) VALUES 
+('Account Setup Survey', 'Initial questionnaire during account setup to understand user needs', 'account_setup', true)
+ON CONFLICT DO NOTHING;
+
+-- Get the survey ID for inserting questions
+DO $$
+DECLARE
+    survey_uuid UUID;
+BEGIN
+    SELECT id INTO survey_uuid FROM surveys WHERE survey_type = 'account_setup' AND name = 'Account Setup Survey' LIMIT 1;
+    
+    -- Insert survey questions
+    INSERT INTO survey_questions (survey_id, question_key, question_type, is_required, sort_order, options) VALUES
+    (survey_uuid, 'organization_type', 'single_choice', true, 1, '["freelancer", "startup", "small_medium_business", "agency", "enterprise", "other"]'),
+    (survey_uuid, 'user_role', 'single_choice', true, 2, '["founder_ceo", "project_manager", "software_developer", "designer", "operations", "other"]'),
+    (survey_uuid, 'main_use_cases', 'multiple_choice', true, 3, '["task_management", "team_collaboration", "resource_planning", "client_communication", "time_tracking", "other"]'),
+    (survey_uuid, 'previous_tools', 'text', false, 4, null),
+    (survey_uuid, 'how_heard_about', 'single_choice', false, 5, '["google_search", "twitter", "linkedin", "friend_colleague", "blog_article", "other"]')
+    ON CONFLICT DO NOTHING;
+END $$;
+
+COMMIT;
\ No newline at end of file
diff --git a/worklenz-backend/database/migrations/user_deletion_logs.sql b/worklenz-backend/database/migrations/user_deletion_logs.sql
new file mode 100644
index 000000000..5d5f9f275
--- /dev/null
+++ b/worklenz-backend/database/migrations/user_deletion_logs.sql
@@ -0,0 +1,29 @@
+-- Create table for tracking user deletion requests
+CREATE TABLE IF NOT EXISTS user_deletion_logs (
+    id UUID DEFAULT uuid_generate_v4() NOT NULL,
+    user_id UUID NOT NULL,
+    email TEXT NOT NULL,
+    name TEXT NOT NULL,
+    requested_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP NOT NULL,
+    scheduled_deletion_date TIMESTAMP WITH TIME ZONE NOT NULL,
+    deleted_at TIMESTAMP WITH TIME ZONE,
+    deletion_completed BOOLEAN DEFAULT FALSE NOT NULL,
+    created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP NOT NULL
+);
+
+ALTER TABLE user_deletion_logs
+    ADD CONSTRAINT user_deletion_logs_pk
+        PRIMARY KEY (id);
+
+ALTER TABLE user_deletion_logs
+    ADD CONSTRAINT user_deletion_logs_user_id_fk
+        FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE;
+
+-- Create index for faster queries
+CREATE INDEX IF NOT EXISTS idx_user_deletion_logs_user_id ON user_deletion_logs(user_id);
+CREATE INDEX IF NOT EXISTS idx_user_deletion_logs_scheduled_deletion ON user_deletion_logs(scheduled_deletion_date) WHERE NOT deletion_completed;
+
+-- Add comment for documentation
+COMMENT ON TABLE user_deletion_logs IS 'Tracks user account deletion requests and their scheduled deletion dates';
+COMMENT ON COLUMN user_deletion_logs.scheduled_deletion_date IS 'Date when the user data should be permanently deleted (30 days after request)';
+COMMENT ON COLUMN user_deletion_logs.deletion_completed IS 'Flag to indicate if the deletion process has been completed';
\ No newline at end of file
diff --git a/worklenz-backend/database/sql/1_tables.sql b/worklenz-backend/database/sql/1_tables.sql
index 2ab000773..7b0e3f3ce 100644
--- a/worklenz-backend/database/sql/1_tables.sql
+++ b/worklenz-backend/database/sql/1_tables.sql
@@ -2297,3 +2297,60 @@ ALTER TABLE organization_working_days
 ALTER TABLE organization_working_days
     ADD CONSTRAINT org_organization_id_fk
         FOREIGN KEY (organization_id) REFERENCES organizations;
+
+-- Survey tables for account setup questionnaire
+CREATE TABLE IF NOT EXISTS surveys (
+    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+    name VARCHAR(255) NOT NULL,
+    description TEXT,
+    survey_type VARCHAR(50) DEFAULT 'account_setup' NOT NULL,
+    is_active BOOLEAN DEFAULT TRUE NOT NULL,
+    created_at TIMESTAMP DEFAULT now() NOT NULL,
+    updated_at TIMESTAMP DEFAULT now() NOT NULL
+);
+
+CREATE TABLE IF NOT EXISTS survey_questions (
+    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+    survey_id UUID REFERENCES surveys(id) ON DELETE CASCADE NOT NULL,
+    question_key VARCHAR(100) NOT NULL,
+    question_type VARCHAR(50) NOT NULL,
+    is_required BOOLEAN DEFAULT FALSE NOT NULL,
+    sort_order INTEGER DEFAULT 0 NOT NULL,
+    options JSONB,
+    created_at TIMESTAMP DEFAULT now() NOT NULL,
+    updated_at TIMESTAMP DEFAULT now() NOT NULL
+);
+
+CREATE TABLE IF NOT EXISTS survey_responses (
+    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+    survey_id UUID REFERENCES surveys(id) ON DELETE CASCADE NOT NULL,
+    user_id UUID REFERENCES users(id) ON DELETE CASCADE NOT NULL,
+    is_completed BOOLEAN DEFAULT FALSE NOT NULL,
+    started_at TIMESTAMP DEFAULT now() NOT NULL,
+    completed_at TIMESTAMP,
+    created_at TIMESTAMP DEFAULT now() NOT NULL,
+    updated_at TIMESTAMP DEFAULT now() NOT NULL
+);
+
+CREATE TABLE IF NOT EXISTS survey_answers (
+    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+    response_id UUID REFERENCES survey_responses(id) ON DELETE CASCADE NOT NULL,
+    question_id UUID REFERENCES survey_questions(id) ON DELETE CASCADE NOT NULL,
+    answer_text TEXT,
+    answer_json JSONB,
+    created_at TIMESTAMP DEFAULT now() NOT NULL,
+    updated_at TIMESTAMP DEFAULT now() NOT NULL
+);
+
+-- Survey table indexes
+CREATE INDEX IF NOT EXISTS idx_surveys_type_active ON surveys(survey_type, is_active);
+CREATE INDEX IF NOT EXISTS idx_survey_questions_survey_order ON survey_questions(survey_id, sort_order);
+CREATE INDEX IF NOT EXISTS idx_survey_responses_user_survey ON survey_responses(user_id, survey_id);
+CREATE INDEX IF NOT EXISTS idx_survey_responses_completed ON survey_responses(survey_id, is_completed);
+CREATE INDEX IF NOT EXISTS idx_survey_answers_response ON survey_answers(response_id);
+
+-- Survey table constraints
+ALTER TABLE survey_questions ADD CONSTRAINT survey_questions_sort_order_check CHECK (sort_order >= 0);
+ALTER TABLE survey_questions ADD CONSTRAINT survey_questions_type_check CHECK (question_type IN ('single_choice', 'multiple_choice', 'text'));
+ALTER TABLE survey_responses ADD CONSTRAINT unique_user_survey_response UNIQUE (user_id, survey_id);
+ALTER TABLE survey_answers ADD CONSTRAINT unique_response_question_answer UNIQUE (response_id, question_id);
diff --git a/worklenz-backend/database/sql/2_dml.sql b/worklenz-backend/database/sql/2_dml.sql
index 1fd8074f4..5902b495d 100644
--- a/worklenz-backend/database/sql/2_dml.sql
+++ b/worklenz-backend/database/sql/2_dml.sql
@@ -142,3 +142,25 @@ DROP FUNCTION sys_insert_license_types();
 INSERT INTO timezones (name, abbrev, utc_offset)
 SELECT name, abbrev, utc_offset
 FROM pg_timezone_names;
+
+-- Insert default account setup survey
+INSERT INTO surveys (name, description, survey_type, is_active) VALUES 
+('Account Setup Survey', 'Initial questionnaire during account setup to understand user needs', 'account_setup', true)
+ON CONFLICT DO NOTHING;
+
+-- Insert survey questions for account setup survey
+DO $$
+DECLARE
+    survey_uuid UUID;
+BEGIN
+    SELECT id INTO survey_uuid FROM surveys WHERE survey_type = 'account_setup' AND name = 'Account Setup Survey' LIMIT 1;
+    
+    -- Insert survey questions
+    INSERT INTO survey_questions (survey_id, question_key, question_type, is_required, sort_order, options) VALUES
+    (survey_uuid, 'organization_type', 'single_choice', true, 1, '["freelancer", "startup", "small_medium_business", "agency", "enterprise", "other"]'),
+    (survey_uuid, 'user_role', 'single_choice', true, 2, '["founder_ceo", "project_manager", "software_developer", "designer", "operations", "other"]'),
+    (survey_uuid, 'main_use_cases', 'multiple_choice', true, 3, '["task_management", "team_collaboration", "resource_planning", "client_communication", "time_tracking", "other"]'),
+    (survey_uuid, 'previous_tools', 'text', false, 4, null),
+    (survey_uuid, 'how_heard_about', 'single_choice', false, 5, '["google_search", "twitter", "linkedin", "friend_colleague", "blog_article", "other"]')
+    ON CONFLICT DO NOTHING;
+END $$;
diff --git a/worklenz-backend/database/sql/4_functions.sql b/worklenz-backend/database/sql/4_functions.sql
index d2c752d23..22bc663b7 100644
--- a/worklenz-backend/database/sql/4_functions.sql
+++ b/worklenz-backend/database/sql/4_functions.sql
@@ -1279,71 +1279,89 @@ CREATE OR REPLACE FUNCTION deserialize_user(_id uuid) RETURNS json
 AS
 $$
 DECLARE
-    _result  JSON;
-    _team_id UUID;
+    _result JSON;
 BEGIN
-
-    SELECT active_team FROM users WHERE id = _id INTO _team_id;
-    IF NOT EXISTS(SELECT 1 FROM notification_settings WHERE team_id = _team_id AND user_id = _id)
-    THEN
-        INSERT INTO notification_settings (popup_notifications_enabled, show_unread_items_count, user_id, team_id)
-        VALUES (TRUE, TRUE, _id, _team_id);
-    END IF;
-
-    SELECT ROW_TO_JSON(rec)
-    INTO _result
-    FROM (SELECT users.id,
-                 users.name,
-                 users.email,
-                 users.timezone_id AS timezone,
-                 (SELECT name FROM timezones WHERE id = users.timezone_id) AS timezone_name,
-                 users.avatar_url,
-                 users.user_no,
-                 users.socket_id,
-                 users.created_at AS joined_date,
-                 users.updated_at AS last_updated,
-
-                 (SELECT COALESCE(ARRAY_TO_JSON(ARRAY_AGG(ROW_TO_JSON(rec))), '[]'::JSON)
-                  FROM (SELECT description, type FROM worklenz_alerts WHERE active is TRUE) rec) AS alerts,
-
-                 (SELECT email_notifications_enabled
-                  FROM notification_settings
-                  WHERE user_id = users.id
-                    AND team_id = t.id) AS email_notifications_enabled,
-                 (CASE
-                      WHEN is_owner(users.id, users.active_team) THEN users.setup_completed
-                      ELSE TRUE END) AS setup_completed,
-                 users.setup_completed AS my_setup_completed,
-                 (is_null_or_empty(users.google_id) IS FALSE) AS is_google,
-                 t.name AS team_name,
-                 t.id AS team_id,
-                 (SELECT id
-                  FROM team_members
-                  WHERE team_members.user_id = _id
-                    AND team_id = users.active_team
-                    AND active IS TRUE) AS team_member_id,
-                 is_owner(users.id, users.active_team) AS owner,
-                 is_admin(users.id, users.active_team) AS is_admin,
-                 t.user_id AS owner_id,
-                 ud.subscription_status,
-                 (SELECT CASE
-                             WHEN (ud.subscription_status) = 'trialing'
-                                 THEN (trial_expire_date)::DATE
-                             WHEN (EXISTS(SELECT id FROM licensing_custom_subs WHERE user_id = t.user_id))
-                                 THEN (SELECT end_date FROM licensing_custom_subs lcs WHERE lcs.user_id = t.user_id)::DATE
-                             WHEN EXISTS (SELECT 1
-                                          FROM licensing_user_subscriptions
-                                          WHERE user_id = t.user_id AND active IS TRUE)
-                                 THEN (SELECT (next_bill_date)::DATE - INTERVAL '1 day'
-                                       FROM licensing_user_subscriptions
-                                       WHERE user_id = t.user_id)::DATE
-                             END) AS valid_till_date
-          FROM users
-                   INNER JOIN teams t
-                              ON t.id = COALESCE(users.active_team,
-                                                 (SELECT id FROM teams WHERE teams.user_id = users.id LIMIT 1))
-                   LEFT JOIN organizations ud ON ud.user_id = t.user_id
-          WHERE users.id = _id) rec;
+    -- Optimized version using CTEs for better performance and maintainability
+    WITH user_team_data AS (
+        SELECT
+            u.id,
+            u.name,
+            u.email,
+            u.timezone_id AS timezone,
+            u.avatar_url,
+            u.user_no,
+            u.socket_id,
+            u.created_at AS joined_date,
+            u.updated_at AS last_updated,
+            u.setup_completed AS my_setup_completed,
+            (is_null_or_empty(u.google_id) IS FALSE) AS is_google,
+            COALESCE(u.active_team, (SELECT id FROM teams WHERE user_id = u.id LIMIT 1)) AS team_id,
+            u.active_team
+        FROM users u
+        WHERE u.id = _id
+    ),
+    team_org_data AS (
+        SELECT
+            utd.*,
+            t.name AS team_name,
+            t.user_id AS owner_id,
+            o.subscription_status,
+            o.license_type_id,
+            o.trial_expire_date
+        FROM user_team_data utd
+        INNER JOIN teams t ON t.id = utd.team_id
+        LEFT JOIN organizations o ON o.user_id = t.user_id
+    ),
+    notification_data AS (
+        SELECT
+            tod.*,
+            COALESCE(ns.email_notifications_enabled, TRUE) AS email_notifications_enabled
+        FROM team_org_data tod
+        LEFT JOIN notification_settings ns ON (ns.user_id = tod.id AND ns.team_id = tod.team_id)
+    ),
+    alerts_data AS (
+        SELECT COALESCE(ARRAY_TO_JSON(ARRAY_AGG(ROW_TO_JSON(alert_rec))), '[]'::JSON) AS alerts
+        FROM (SELECT description, type FROM worklenz_alerts WHERE active IS TRUE) alert_rec
+    ),
+    complete_user_data AS (
+        SELECT
+            nd.*,
+            tz.name AS timezone_name,
+            slt.key AS subscription_type,
+            tm.id AS team_member_id,
+            ad.alerts,
+            CASE
+                WHEN nd.subscription_status = 'trialing' THEN nd.trial_expire_date::DATE
+                WHEN EXISTS(SELECT 1 FROM licensing_custom_subs WHERE user_id = nd.owner_id)
+                    THEN (SELECT end_date FROM licensing_custom_subs WHERE user_id = nd.owner_id LIMIT 1)::DATE
+                WHEN EXISTS(SELECT 1 FROM licensing_user_subscriptions WHERE user_id = nd.owner_id AND active IS TRUE)
+                    THEN (SELECT (next_bill_date)::DATE - INTERVAL '1 day'
+                          FROM licensing_user_subscriptions
+                          WHERE user_id = nd.owner_id AND active IS TRUE
+                          LIMIT 1)::DATE
+                ELSE NULL
+            END AS valid_till_date,
+            CASE
+                WHEN is_owner(nd.id, nd.active_team) THEN nd.my_setup_completed
+                ELSE TRUE
+            END AS setup_completed,
+            is_owner(nd.id, nd.active_team) AS owner,
+            is_admin(nd.id, nd.active_team) AS is_admin
+        FROM notification_data nd
+        CROSS JOIN alerts_data ad
+        LEFT JOIN timezones tz ON tz.id = nd.timezone
+        LEFT JOIN sys_license_types slt ON slt.id = nd.license_type_id
+        LEFT JOIN team_members tm ON (tm.user_id = nd.id AND tm.team_id = nd.team_id AND tm.active IS TRUE)
+    )
+    SELECT ROW_TO_JSON(complete_user_data.*) INTO _result FROM complete_user_data;
+
+    -- Ensure notification settings exist using INSERT...ON CONFLICT for better concurrency
+    INSERT INTO notification_settings (user_id, team_id, email_notifications_enabled, popup_notifications_enabled, show_unread_items_count)
+    SELECT _id,
+           COALESCE((SELECT active_team FROM users WHERE id = _id),
+                   (SELECT id FROM teams WHERE user_id = _id LIMIT 1)),
+           TRUE, TRUE, TRUE
+    ON CONFLICT (user_id, team_id) DO NOTHING;
 
     RETURN _result;
 END
diff --git a/worklenz-backend/package-lock.json b/worklenz-backend/package-lock.json
index 1a0f78d3f..4fffff201 100644
--- a/worklenz-backend/package-lock.json
+++ b/worklenz-backend/package-lock.json
@@ -33,7 +33,6 @@
         "express-rate-limit": "^6.8.0",
         "express-session": "^1.17.3",
         "express-validator": "^6.15.0",
-        "grunt-cli": "^1.5.0",
         "helmet": "^6.2.0",
         "hpp": "^0.2.3",
         "http-errors": "^2.0.0",
@@ -46,6 +45,7 @@
         "morgan": "^1.10.0",
         "nanoid": "^3.3.6",
         "passport": "^0.7.0",
+        "passport-custom": "^1.1.1",
         "passport-google-oauth2": "^0.2.0",
         "passport-google-oauth20": "^2.0.0",
         "passport-local": "^1.0.0",
@@ -73,6 +73,7 @@
         "@types/compression": "^1.7.2",
         "@types/connect-flash": "^0.0.37",
         "@types/cookie-parser": "^1.4.3",
+        "@types/cookie-signature": "^1.1.2",
         "@types/cron": "^2.0.1",
         "@types/crypto-js": "^4.2.2",
         "@types/csurf": "^1.11.2",
@@ -126,7 +127,7 @@
         "typescript": "^4.9.5"
       },
       "engines": {
-        "node": ">=16.13.0",
+        "node": ">=20.0.0",
         "npm": ">=8.11.0",
         "yarn": "WARNING: Please use npm package manager instead of yarn"
       }
@@ -5445,6 +5446,16 @@
         "@types/express": "*"
       }
     },
+    "node_modules/@types/cookie-signature": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@types/cookie-signature/-/cookie-signature-1.1.2.tgz",
+      "integrity": "sha512-2OhrZV2LVnUAXklUFwuYUTokalh/dUb8rqt70OW6ByMSxYpauPZ+kfNLknX3aJyjY5iu8i3cUyoLZP9Fn37tTg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/cors": {
       "version": "2.8.19",
       "resolved": "https://registry.npmjs.org/@types/cors/-/cors-2.8.19.tgz",
@@ -6455,30 +6466,12 @@
       "dev": true,
       "license": "Python-2.0"
     },
-    "node_modules/array-each": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/array-each/-/array-each-1.0.1.tgz",
-      "integrity": "sha512-zHjL5SZa68hkKHBFBK6DJCTtr9sfTCPCaph/L7tMSLcTFgy+zX7E+6q5UArbtOtMBCtxdICpfTCspRse+ywyXA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/array-flatten": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
       "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==",
       "license": "MIT"
     },
-    "node_modules/array-slice": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/array-slice/-/array-slice-1.1.0.tgz",
-      "integrity": "sha512-B1qMD3RBP7O8o0H2KbrXDyB0IccejMF15+87Lvlor12ONPRHP6gTjXMNkt/d3ZuOGbAe66hFmaCfECI24Ufp6w==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/array-union": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
@@ -6951,6 +6944,7 @@
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
       "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "fill-range": "^7.1.1"
@@ -8056,15 +8050,6 @@
         "npm": "1.2.8000 || >= 1.4.16"
       }
     },
-    "node_modules/detect-file": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/detect-file/-/detect-file-1.0.0.tgz",
-      "integrity": "sha512-DtCOLG98P007x7wiiOmfI0fi3eIKyWiLTGJ2MDnVi/E04lWGbf+JzrRHMm0rgIIZJGtHpKpbVgLWHrv8xXpc3Q==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/detect-libc": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.4.tgz",
@@ -8924,18 +8909,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/expand-tilde": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/expand-tilde/-/expand-tilde-2.0.2.tgz",
-      "integrity": "sha512-A5EmesHW6rfnZ9ysHQjPdJRni0SRar0tjtG5MNtm9n5TUvsYU8oozprtRD4AqHxcZWWlVuAmQo2nWKfN9oyjTw==",
-      "license": "MIT",
-      "dependencies": {
-        "homedir-polyfill": "^1.0.1"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/expect": {
       "version": "28.1.3",
       "resolved": "https://registry.npmjs.org/expect/-/expect-28.1.3.tgz",
@@ -9088,12 +9061,6 @@
       "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
       "license": "MIT"
     },
-    "node_modules/extend": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
-      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
-      "license": "MIT"
-    },
     "node_modules/fast-csv": {
       "version": "4.3.6",
       "resolved": "https://registry.npmjs.org/fast-csv/-/fast-csv-4.3.6.tgz",
@@ -9222,6 +9189,7 @@
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
       "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "to-regex-range": "^5.0.1"
@@ -9287,46 +9255,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/findup-sync": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/findup-sync/-/findup-sync-4.0.0.tgz",
-      "integrity": "sha512-6jvvn/12IC4quLBL1KNokxC7wWTvYncaVUYSoxWw7YykPLuRrnv4qdHcSOywOI5RpkOVGeQRtWM8/q+G6W6qfQ==",
-      "license": "MIT",
-      "dependencies": {
-        "detect-file": "^1.0.0",
-        "is-glob": "^4.0.0",
-        "micromatch": "^4.0.2",
-        "resolve-dir": "^1.0.1"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/fined": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/fined/-/fined-1.2.0.tgz",
-      "integrity": "sha512-ZYDqPLGxDkDhDZBjZBb+oD1+j0rA4E0pXY50eplAAOPg2N/gUBSSk5IM1/QhPfyVo19lJ+CvXpqfvk+b2p/8Ng==",
-      "license": "MIT",
-      "dependencies": {
-        "expand-tilde": "^2.0.2",
-        "is-plain-object": "^2.0.3",
-        "object.defaults": "^1.1.0",
-        "object.pick": "^1.2.0",
-        "parse-filepath": "^1.0.1"
-      },
-      "engines": {
-        "node": ">= 0.10"
-      }
-    },
-    "node_modules/flagged-respawn": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/flagged-respawn/-/flagged-respawn-1.0.1.tgz",
-      "integrity": "sha512-lNaHNVymajmk0OJMBn8fVUAU1BtDeKIqKoVhk4xAALB57aALg6b4W0MfJ/cUE0g9YBXy5XhSlPIpYIJ7HaY/3Q==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.10"
-      }
-    },
     "node_modules/flat-cache": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.2.0.tgz",
@@ -9427,27 +9355,6 @@
         }
       }
     },
-    "node_modules/for-in": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
-      "integrity": "sha512-7EwmXrOjyL+ChxMhmG5lnW9MPt1aIeZEwKhQzoBUdTV0N3zuwWDZYVJatDvZ2OyzPUvdIAZDsCetk3coyMfcnQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/for-own": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/for-own/-/for-own-1.0.0.tgz",
-      "integrity": "sha512-0OABksIGrxKK8K4kynWkQ7y1zounQxP+CWnyclVwj81KW3vlLlGUx57DKGcP/LH216GzqnstnPocF16Nxs0Ycg==",
-      "license": "MIT",
-      "dependencies": {
-        "for-in": "^1.0.1"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/foreground-child": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.1.tgz",
@@ -9845,48 +9752,6 @@
         "node": ">= 0.10"
       }
     },
-    "node_modules/global-modules": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/global-modules/-/global-modules-1.0.0.tgz",
-      "integrity": "sha512-sKzpEkf11GpOFuw0Zzjzmt4B4UZwjOcG757PPvrfhxcLFbq0wpsgpOqxpxtxFiCG4DtG93M6XRVbF2oGdev7bg==",
-      "license": "MIT",
-      "dependencies": {
-        "global-prefix": "^1.0.1",
-        "is-windows": "^1.0.1",
-        "resolve-dir": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/global-prefix": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/global-prefix/-/global-prefix-1.0.2.tgz",
-      "integrity": "sha512-5lsx1NUDHtSjfg0eHlmYvZKv8/nVqX4ckFbM+FrGcQ+04KWcWFo9P5MxPZYSzUvyzmdTbI7Eix8Q4IbELDqzKg==",
-      "license": "MIT",
-      "dependencies": {
-        "expand-tilde": "^2.0.2",
-        "homedir-polyfill": "^1.0.1",
-        "ini": "^1.3.4",
-        "is-windows": "^1.0.1",
-        "which": "^1.2.14"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/global-prefix/node_modules/which": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
-      "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
-      "license": "ISC",
-      "dependencies": {
-        "isexe": "^2.0.0"
-      },
-      "bin": {
-        "which": "bin/which"
-      }
-    },
     "node_modules/globals": {
       "version": "11.12.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
@@ -9943,34 +9808,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/grunt-cli": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/grunt-cli/-/grunt-cli-1.5.0.tgz",
-      "integrity": "sha512-rILKAFoU0dzlf22SUfDtq2R1fosChXXlJM5j7wI6uoW8gwmXDXzbUvirlKZSYCdXl3LXFbR+8xyS+WFo+b6vlA==",
-      "license": "MIT",
-      "dependencies": {
-        "grunt-known-options": "~2.0.0",
-        "interpret": "~1.1.0",
-        "liftup": "~3.0.1",
-        "nopt": "~5.0.0",
-        "v8flags": "^4.0.1"
-      },
-      "bin": {
-        "grunt": "bin/grunt"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/grunt-known-options": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/grunt-known-options/-/grunt-known-options-2.0.0.tgz",
-      "integrity": "sha512-GD7cTz0I4SAede1/+pAbmJRG44zFLPipVtdL9o3vqx9IEyb7b4/Y3s7r6ofI3CchR5GvYJ+8buCSioDv5dQLiA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/has-flag": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
@@ -10042,18 +9879,6 @@
       "dev": true,
       "license": "https://www.highcharts.com/license"
     },
-    "node_modules/homedir-polyfill": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/homedir-polyfill/-/homedir-polyfill-1.0.3.tgz",
-      "integrity": "sha512-eSmmWE5bZTK2Nou4g0AI3zZ9rswp7GRKoKXS1BLUkvPviOqs4YTN1djQIqrXy9k5gEtdLPy86JjRwsNM9tnDcA==",
-      "license": "MIT",
-      "dependencies": {
-        "parse-passwd": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/hpp": {
       "version": "0.2.3",
       "resolved": "https://registry.npmjs.org/hpp/-/hpp-0.2.3.tgz",
@@ -10263,12 +10088,6 @@
       "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
       "license": "ISC"
     },
-    "node_modules/interpret": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/interpret/-/interpret-1.1.0.tgz",
-      "integrity": "sha512-CLM8SNMDu7C5psFCn6Wg/tgpj/bKAg7hc2gWqcuR9OD5Ft9PhBpIu8PLicPeis+xDd6YX2ncI8MCA64I9tftIA==",
-      "license": "MIT"
-    },
     "node_modules/ipaddr.js": {
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
@@ -10278,19 +10097,6 @@
         "node": ">= 0.10"
       }
     },
-    "node_modules/is-absolute": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/is-absolute/-/is-absolute-1.0.0.tgz",
-      "integrity": "sha512-dOWoqflvcydARa360Gvv18DZ/gRuHKi2NU/wU5X1ZFzdYfH29nkiNZsF3mp4OJ3H4yo9Mx8A/uAGNzpzPN3yBA==",
-      "license": "MIT",
-      "dependencies": {
-        "is-relative": "^1.0.0",
-        "is-windows": "^1.0.1"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/is-arrayish": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
@@ -10352,6 +10158,7 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
       "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -10380,6 +10187,7 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
       "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "is-extglob": "^2.1.1"
@@ -10392,6 +10200,7 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.12.0"
@@ -10407,18 +10216,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/is-plain-object": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
-      "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==",
-      "license": "MIT",
-      "dependencies": {
-        "isobject": "^3.0.1"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/is-promise": {
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.2.2.tgz",
@@ -10443,18 +10240,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/is-relative": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/is-relative/-/is-relative-1.0.0.tgz",
-      "integrity": "sha512-Kw/ReK0iqwKeu0MITLFuj0jbPAmEiOsIwyIXvvbfa6QfmN9pkD1M+8pdk7Rl/dTKbH34/XBFMbgD4iMJhLQbGA==",
-      "license": "MIT",
-      "dependencies": {
-        "is-unc-path": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/is-stream": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
@@ -10467,27 +10252,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/is-unc-path": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/is-unc-path/-/is-unc-path-1.0.0.tgz",
-      "integrity": "sha512-mrGpVd0fs7WWLfVsStvgF6iEJnbjDFZh9/emhRDcGWTduTfNHd9CHeUwH3gYIjdbwo4On6hunkztwOaAw0yllQ==",
-      "license": "MIT",
-      "dependencies": {
-        "unc-path-regex": "^0.1.2"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/is-windows": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/is-windows/-/is-windows-1.0.2.tgz",
-      "integrity": "sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/isarray": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
@@ -10498,17 +10262,9 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
       "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+      "dev": true,
       "license": "ISC"
     },
-    "node_modules/isobject": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
-      "integrity": "sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/istanbul-lib-coverage": {
       "version": "3.2.2",
       "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.2.tgz",
@@ -11526,15 +11282,6 @@
         "json-buffer": "3.0.1"
       }
     },
-    "node_modules/kind-of": {
-      "version": "6.0.3",
-      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
-      "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/kleur": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/kleur/-/kleur-3.0.3.tgz",
@@ -11626,25 +11373,6 @@
         "immediate": "~3.0.5"
       }
     },
-    "node_modules/liftup": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/liftup/-/liftup-3.0.1.tgz",
-      "integrity": "sha512-yRHaiQDizWSzoXk3APcA71eOI/UuhEkNN9DiW2Tt44mhYzX4joFoCZlxsSOF7RyeLlfqzFLQI1ngFq3ggMPhOw==",
-      "license": "MIT",
-      "dependencies": {
-        "extend": "^3.0.2",
-        "findup-sync": "^4.0.0",
-        "fined": "^1.2.0",
-        "flagged-respawn": "^1.0.1",
-        "is-plain-object": "^2.0.4",
-        "object.map": "^1.0.1",
-        "rechoir": "^0.7.0",
-        "resolve": "^1.19.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/lines-and-columns": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
@@ -11883,18 +11611,6 @@
       "dev": true,
       "license": "ISC"
     },
-    "node_modules/make-iterator": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/make-iterator/-/make-iterator-1.0.1.tgz",
-      "integrity": "sha512-pxiuXh0iVEq7VM7KMIhs5gxsfxCux2URptUQaXo4iZZJxBAzTPOLE2BumO5dbfVYq/hBJFBR/a1mFDmOx5AGmw==",
-      "license": "MIT",
-      "dependencies": {
-        "kind-of": "^6.0.2"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/makeerror": {
       "version": "1.0.12",
       "resolved": "https://registry.npmjs.org/makeerror/-/makeerror-1.0.12.tgz",
@@ -11905,15 +11621,6 @@
         "tmpl": "1.0.5"
       }
     },
-    "node_modules/map-cache": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/map-cache/-/map-cache-0.2.2.tgz",
-      "integrity": "sha512-8y/eV9QQZCiyn1SprXSrCmqJN0yNRATe+PO8ztwqrvrbdRLA3eYJF0yaR0YayLWkMbsQSKWS9N2gPcGEc4UsZg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
@@ -11971,6 +11678,7 @@
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
       "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "braces": "^3.0.3",
@@ -12418,46 +12126,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/object.defaults": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/object.defaults/-/object.defaults-1.1.0.tgz",
-      "integrity": "sha512-c/K0mw/F11k4dEUBMW8naXUuBuhxRCfG7W+yFy8EcijU/rSmazOUd1XAEEe6bC0OuXY4HUKjTJv7xbxIMqdxrA==",
-      "license": "MIT",
-      "dependencies": {
-        "array-each": "^1.0.1",
-        "array-slice": "^1.0.0",
-        "for-own": "^1.0.0",
-        "isobject": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/object.map": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/object.map/-/object.map-1.0.1.tgz",
-      "integrity": "sha512-3+mAJu2PLfnSVGHwIWubpOFLscJANBKuB/6A4CxBstc4aqwQY0FWcsppuy4jU5GSB95yES5JHSI+33AWuS4k6w==",
-      "license": "MIT",
-      "dependencies": {
-        "for-own": "^1.0.0",
-        "make-iterator": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/object.pick": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/object.pick/-/object.pick-1.3.0.tgz",
-      "integrity": "sha512-tqa/UMy/CCoYmj+H5qc07qvSL9dqcs/WZENZ1JbtWBlATP+iVOe778gE6MSijnyCnORzDuX6hU+LA4SZ09YjFQ==",
-      "license": "MIT",
-      "dependencies": {
-        "isobject": "^3.0.1"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/on-finished": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
@@ -12620,20 +12288,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/parse-filepath": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/parse-filepath/-/parse-filepath-1.0.2.tgz",
-      "integrity": "sha512-FwdRXKCohSVeXqwtYonZTXtbGJKrn+HNyWDYVcp5yuJlesTwNH4rsmRZ+GrKAPJ5bLpRxESMeS+Rl0VCHRvB2Q==",
-      "license": "MIT",
-      "dependencies": {
-        "is-absolute": "^1.0.0",
-        "map-cache": "^0.2.0",
-        "path-root": "^0.1.1"
-      },
-      "engines": {
-        "node": ">=0.8"
-      }
-    },
     "node_modules/parse-json": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
@@ -12653,15 +12307,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/parse-passwd": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/parse-passwd/-/parse-passwd-1.0.0.tgz",
-      "integrity": "sha512-1Y1A//QUXEZK7YKz+rD9WydcE1+EuPr6ZBgKecAB8tmoW6UFv0NREVJe1p+jRxtThkcbbKkfwIbWJe/IeE6m2Q==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/parse-srcset": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/parse-srcset/-/parse-srcset-1.0.2.tgz",
@@ -12695,6 +12340,18 @@
         "url": "https://github.com/sponsors/jaredhanson"
       }
     },
+    "node_modules/passport-custom": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/passport-custom/-/passport-custom-1.1.1.tgz",
+      "integrity": "sha512-/2m7jUGxmCYvoqenLB9UrmkCgPt64h8ZtV+UtuQklZ/Tn1NpKBeOorCYkB/8lMRoiZ5hUrCoMmDtxCS/d38mlg==",
+      "license": "MIT",
+      "dependencies": {
+        "passport-strategy": "1.x.x"
+      },
+      "engines": {
+        "node": ">= 0.10.0"
+      }
+    },
     "node_modules/passport-google-oauth2": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/passport-google-oauth2/-/passport-google-oauth2-0.2.0.tgz",
@@ -12800,27 +12457,6 @@
       "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
       "license": "MIT"
     },
-    "node_modules/path-root": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/path-root/-/path-root-0.1.1.tgz",
-      "integrity": "sha512-QLcPegTHF11axjfojBIoDygmS2E3Lf+8+jI6wOVmNVenrKSo3mFdSGiIgdSHenczw3wPtlVMQaFVwGmM7BJdtg==",
-      "license": "MIT",
-      "dependencies": {
-        "path-root-regex": "^0.1.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/path-root-regex": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/path-root-regex/-/path-root-regex-0.1.2.tgz",
-      "integrity": "sha512-4GlJ6rZDhQZFE0DPVKh0e9jmZ5egZfxTkp7bcRDuPlJXbAwhxcl2dINPUAsjLdejqaLsCeg8axcLjIbvBjN4pQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/path-scurry": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-2.0.0.tgz",
@@ -12968,6 +12604,7 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8.6"
@@ -13563,18 +13200,6 @@
         "node": ">=8.10.0"
       }
     },
-    "node_modules/rechoir": {
-      "version": "0.7.1",
-      "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.7.1.tgz",
-      "integrity": "sha512-/njmZ8s1wVeR6pjTZ+0nCnv8SpZNRMT2D1RLOJQESlYFDBvwpTA4KWJpZ+sBJ4+vhjILRcK7JIFdGCdxEAAitg==",
-      "license": "MIT",
-      "dependencies": {
-        "resolve": "^1.9.0"
-      },
-      "engines": {
-        "node": ">= 0.10"
-      }
-    },
     "node_modules/redis": {
       "version": "4.7.1",
       "resolved": "https://registry.npmjs.org/redis/-/redis-4.7.1.tgz",
@@ -13726,19 +13351,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/resolve-dir": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/resolve-dir/-/resolve-dir-1.0.1.tgz",
-      "integrity": "sha512-R7uiTjECzvOsWSfdM0QKFNBVFcK27aHOUwdvK53BcW8zqnGdYp0Fbj82cy54+2A4P2tFM22J5kRfe1R+lM/1yg==",
-      "license": "MIT",
-      "dependencies": {
-        "expand-tilde": "^2.0.0",
-        "global-modules": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/resolve-from": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
@@ -14974,6 +14586,7 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
       "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "is-number": "^7.0.0"
@@ -15494,15 +15107,6 @@
       "integrity": "sha512-IevTus0SbGwQzYh3+fRsAMTVVPOoIVufzacXcHPmdlle1jUpq7BRL+mw3dgeLanvGZdwwbWhRV6XrcFNdBmjWA==",
       "license": "MIT"
     },
-    "node_modules/unc-path-regex": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/unc-path-regex/-/unc-path-regex-0.1.2.tgz",
-      "integrity": "sha512-eXL4nmJT7oCpkZsHZUOJo8hcX3GbsiDOa0Qu9F646fi8dT3XuSVopVqAcEiVzSKKH7UoDti23wNX3qGFxcW5Qg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/undici-types": {
       "version": "5.26.5",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
@@ -15732,15 +15336,6 @@
         "node": ">=10.12.0"
       }
     },
-    "node_modules/v8flags": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/v8flags/-/v8flags-4.0.1.tgz",
-      "integrity": "sha512-fcRLaS4H/hrZk9hYwbdRM35D0U8IYMfEClhXxCivOojl+yTRAZH3Zy2sSy6qVCiGbV9YAtPssP6jaChqC9vPCg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 10.13.0"
-      }
-    },
     "node_modules/validator": {
       "version": "13.15.15",
       "resolved": "https://registry.npmjs.org/validator/-/validator-13.15.15.tgz",
diff --git a/worklenz-backend/package.json b/worklenz-backend/package.json
index d4e07de2e..1b8d140ff 100644
--- a/worklenz-backend/package.json
+++ b/worklenz-backend/package.json
@@ -80,6 +80,7 @@
     "morgan": "^1.10.0",
     "nanoid": "^3.3.6",
     "passport": "^0.7.0",
+    "passport-custom": "^1.1.1",
     "passport-google-oauth2": "^0.2.0",
     "passport-google-oauth20": "^2.0.0",
     "passport-local": "^1.0.0",
@@ -107,6 +108,7 @@
     "@types/compression": "^1.7.2",
     "@types/connect-flash": "^0.0.37",
     "@types/cookie-parser": "^1.4.3",
+    "@types/cookie-signature": "^1.1.2",
     "@types/cron": "^2.0.1",
     "@types/crypto-js": "^4.2.2",
     "@types/csurf": "^1.11.2",
diff --git a/worklenz-backend/src/controllers/account-deletion-controller.ts b/worklenz-backend/src/controllers/account-deletion-controller.ts
new file mode 100644
index 000000000..826fe3bab
--- /dev/null
+++ b/worklenz-backend/src/controllers/account-deletion-controller.ts
@@ -0,0 +1,221 @@
+import { IWorkLenzRequest } from "../interfaces/worklenz-request";
+import { IWorkLenzResponse } from "../interfaces/worklenz-response";
+import { ServerResponse } from "../models/server-response";
+import WorklenzControllerBase from "./worklenz-controller-base";
+import HandleExceptions from "../decorators/handle-exceptions";
+import axios from "axios";
+import { log_error } from "../shared/utils";
+import db from "../config/db";
+
+export default class AccountDeletionController extends WorklenzControllerBase {
+
+  @HandleExceptions()
+  public static async requestDeletion(req: IWorkLenzRequest, res: IWorkLenzResponse): Promise<IWorkLenzResponse> {
+    try {
+      const { user } = req;
+      if (!user) {
+        return res.status(401).send(new ServerResponse(false, "Unauthorized"));
+      }
+
+      const { userId, userEmail, userName } = req.body;
+      
+      // Verify the user is requesting their own deletion
+      if (userId !== user.id) {
+        return res.status(403).send(new ServerResponse(false, "Forbidden: You can only delete your own account"));
+      }
+
+      // Get organization and team information
+      let organizationName = "Unknown";
+      let teamName = "Unknown";
+      try {
+        const orgQuery = `
+          SELECT t.name as team_name, o.organization_name 
+          FROM users u
+          LEFT JOIN teams t ON t.id = u.active_team 
+          LEFT JOIN organizations o ON o.user_id = t.user_id
+          WHERE u.id = $1
+        `;
+        const orgResult = await db.query(orgQuery, [user.id]);
+        if (orgResult.rows.length > 0) {
+          organizationName = orgResult.rows[0].organization_name || "Unknown";
+          teamName = orgResult.rows[0].team_name || "Unknown";
+        }
+      } catch (error) {
+        log_error("Error fetching organization info:", error);
+      }
+
+      // Update user record with deletion flags
+      const deletionDate = new Date();
+      const updateQuery = `
+        UPDATE users 
+        SET is_deleted = true, 
+            deleted_at = $2
+        WHERE id = $1
+        RETURNING id, email, name
+      `;
+      
+      const result = await db.query(updateQuery, [userId, deletionDate]);
+      
+      if (result.rows.length === 0) {
+        return res.status(404).send(new ServerResponse(false, "User not found"));
+      }
+
+      // Send Teams webhook notification
+      const teamsWebhookUrl = process.env.TEAMS_SUPPORT_WEBHOOK;
+      
+      if (!teamsWebhookUrl) {
+        log_error("Teams webhook URL not configured");
+        // Continue with deletion even if webhook fails
+      } else {
+        const teamsMessage = {
+          "type": "message",
+          "attachments": [
+            {
+              "contentType": "application/vnd.microsoft.card.adaptive",
+              "content": {
+                "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
+                "type": "AdaptiveCard",
+                "version": "1.4",
+                "body": [
+                  {
+                    "type": "TextBlock",
+                    "text": "⚠️ Account Deletion Request",
+                    "weight": "Bolder",
+                    "size": "Large",
+                    "color": "Warning"
+                  },
+                  {
+                    "type": "TextBlock",
+                    "text": "A user has requested to delete their account.",
+                    "wrap": true,
+                    "spacing": "Medium",
+                    "color": "Default"
+                  },
+                  {
+                    "type": "FactSet",
+                    "facts": [
+                      {
+                        "title": "User Name:",
+                        "value": userName || "Unknown"
+                      },
+                      {
+                        "title": "Email:",
+                        "value": userEmail || "Unknown"
+                      },
+                      {
+                        "title": "Organization:",
+                        "value": organizationName
+                      },
+                      {
+                        "title": "Team:",
+                        "value": teamName
+                      },
+                      {
+                        "title": "User ID:",
+                        "value": userId
+                      },
+                      {
+                        "title": "Deletion Date:",
+                        "value": deletionDate.toISOString()
+                      },
+                      {
+                        "title": "Data Removal:",
+                        "value": "Within 30 days"
+                      }
+                    ],
+                    "spacing": "Medium"
+                  },
+                  {
+                    "type": "TextBlock",
+                    "text": "⏰ Action Required",
+                    "weight": "Bolder",
+                    "size": "Medium",
+                    "color": "Accent",
+                    "spacing": "Large"
+                  },
+                  {
+                    "type": "TextBlock",
+                    "text": "Please ensure all user data is properly archived and deleted within 30 days as per data retention policy.",
+                    "wrap": true,
+                    "color": "Default"
+                  }
+                ]
+              }
+            }
+          ]
+        };
+
+        try {
+          await axios.post(teamsWebhookUrl, teamsMessage, {
+            headers: {
+              "Content-Type": "application/json"
+            },
+            timeout: 10000 // 10 seconds timeout
+          });
+        } catch (webhookError: any) {
+          log_error("Teams webhook error:", webhookError?.response?.data || webhookError.message);
+          // Continue with deletion even if webhook fails
+        }
+      }
+
+      // Log the deletion request
+      const logQuery = `
+        INSERT INTO user_deletion_logs (user_id, email, name, requested_at, scheduled_deletion_date)
+        VALUES ($1, $2, $3, $4, $5)
+      `;
+      
+      const scheduledDeletionDate = new Date(deletionDate);
+      scheduledDeletionDate.setDate(scheduledDeletionDate.getDate() + 30);
+      
+      try {
+        await db.query(logQuery, [
+          userId,
+          userEmail,
+          userName,
+          deletionDate,
+          scheduledDeletionDate
+        ]);
+      } catch (logError) {
+        log_error("Error logging deletion request:", logError);
+        // Continue even if logging fails
+      }
+
+      return res.status(200).send(new ServerResponse(true, "Account deletion request submitted successfully"));
+
+    } catch (error) {
+      log_error("Account deletion controller error:", error);
+      return res.status(500).send(new ServerResponse(false, "Internal server error"));
+    }
+  }
+
+  @HandleExceptions()
+  public static async cancelDeletion(req: IWorkLenzRequest, res: IWorkLenzResponse): Promise<IWorkLenzResponse> {
+    try {
+      const { user } = req;
+      if (!user) {
+        return res.status(401).send(new ServerResponse(false, "Unauthorized"));
+      }
+
+      // Cancel deletion by updating flags
+      const updateQuery = `
+        UPDATE users 
+        SET is_deleted = false, 
+            deleted_at = NULL
+        WHERE id = $1 AND is_deleted = true
+        RETURNING id, email, name
+      `;
+      
+      const result = await db.query(updateQuery, [user.id]);
+      
+      if (result.rows.length === 0) {
+        return res.status(404).send(new ServerResponse(false, "No deletion request found"));
+      }
+
+      return res.status(200).send(new ServerResponse(true, "Account deletion cancelled successfully"));
+
+    } catch (error) {
+      log_error("Cancel deletion controller error:", error);
+      return res.status(500).send(new ServerResponse(false, "Internal server error"));
+    }
+  }
+}
\ No newline at end of file
diff --git a/worklenz-backend/src/controllers/auth-controller.ts b/worklenz-backend/src/controllers/auth-controller.ts
index 4fea4f591..8ad790710 100644
--- a/worklenz-backend/src/controllers/auth-controller.ts
+++ b/worklenz-backend/src/controllers/auth-controller.ts
@@ -1,4 +1,6 @@
 import bcrypt from "bcrypt";
+import passport from "passport";
+import {NextFunction} from "express";
 
 import {sendResetEmail, sendResetSuccessEmail} from "../shared/email-templates";
 
@@ -181,4 +183,162 @@ export default class AuthController extends WorklenzControllerBase {
       res.status(500).send(new ServerResponse(false, null, DEFAULT_ERROR_MESSAGE));
     }
   }
+
+  public static googleMobileAuthPassport(req: IWorkLenzRequest, res: IWorkLenzResponse, next: NextFunction) {
+    
+    const mobileOptions = {
+      session: true,
+      failureFlash: true,
+      failWithError: false
+    };
+
+    passport.authenticate("google-mobile", mobileOptions, (err: any, user: any, info: any) => {
+      if (err) {
+        return res.status(500).send({
+          done: false,
+          message: "Authentication failed",
+          body: null
+        });
+      }
+      
+      if (!user) {
+        return res.status(400).send({
+          done: false,
+          message: info?.message || "Authentication failed",
+          body: null
+        });
+      }
+      // Log the user in (create session)
+      req.login(user, (loginErr) => {
+        if (loginErr) {
+          return res.status(500).send({
+            done: false,
+            message: "Session creation failed",
+            body: null
+          });
+        }
+        
+        // Add build version
+        user.build_v = FileConstants.getRelease();
+        
+        // Ensure session is saved and cookie is set
+        req.session.save((saveErr) => {
+          if (saveErr) {
+            return res.status(500).send({
+              done: false,
+              message: "Session save failed",
+              body: null
+            });
+          }
+          
+          // Get session cookie details
+          const sessionName = process.env.SESSION_NAME || 'connect.sid';
+          
+          // Return response with session info for mobile app to handle
+          res.setHeader('X-Session-ID', req.sessionID);
+          res.setHeader('X-Session-Name', sessionName);
+          
+          return res.status(200).send({
+            done: true,
+            message: "Login successful",
+            user,
+            authenticated: true,
+            sessionId: req.sessionID,
+            sessionName: sessionName,
+            newSessionId: req.sessionID
+          });
+        });
+      }); // Close login callback
+    })(req, res, next);
+  }
+
+  @HandleExceptions({logWithError: "body"})
+  public static async googleMobileAuth(req: IWorkLenzRequest, res: IWorkLenzResponse) {
+    const {idToken} = req.body;
+    
+    if (!idToken) {
+      return res.status(400).send(new ServerResponse(false, null, "ID token is required"));
+    }
+
+    try {
+      const response = await axios.get(`https://oauth2.googleapis.com/tokeninfo?id_token=${idToken}`);
+      const profile = response.data;
+
+      // Validate token audience (client ID) - accept web, Android, and iOS client IDs
+      const allowedClientIds = [
+        process.env.GOOGLE_CLIENT_ID, // Web client ID
+        process.env.GOOGLE_ANDROID_CLIENT_ID, // Android client ID
+        process.env.GOOGLE_IOS_CLIENT_ID, // iOS client ID
+      ].filter(Boolean); // Remove undefined values
+      
+      console.log("Token audience (aud):", profile.aud);
+      console.log("Allowed client IDs:", allowedClientIds);
+      console.log("Environment variables check:");
+      console.log("- GOOGLE_CLIENT_ID:", process.env.GOOGLE_CLIENT_ID ? "Set" : "Not set");
+      console.log("- GOOGLE_ANDROID_CLIENT_ID:", process.env.GOOGLE_ANDROID_CLIENT_ID ? "Set" : "Not set");
+      console.log("- GOOGLE_IOS_CLIENT_ID:", process.env.GOOGLE_IOS_CLIENT_ID ? "Set" : "Not set");
+      
+      if (!allowedClientIds.includes(profile.aud)) {
+        return res.status(400).send(new ServerResponse(false, null, "Invalid token audience"));
+      }
+
+      // Validate token issuer
+      if (!["https://accounts.google.com", "accounts.google.com"].includes(profile.iss)) {
+        return res.status(400).send(new ServerResponse(false, null, "Invalid token issuer"));
+      }
+
+      // Check token expiry
+      if (Date.now() >= profile.exp * 1000) {
+        return res.status(400).send(new ServerResponse(false, null, "Token expired"));
+      }
+
+      if (!profile.email_verified) {
+        return res.status(400).send(new ServerResponse(false, null, "Email not verified"));
+      }
+
+      // Check for existing local account
+      const localAccountResult = await db.query("SELECT 1 FROM users WHERE email = $1 AND password IS NOT NULL AND is_deleted IS FALSE;", [profile.email]);
+      if (localAccountResult.rowCount) {
+        return res.status(400).send(new ServerResponse(false, null, `No Google account exists for email ${profile.email}.`));
+      }
+
+      // Check if user exists
+      const userResult = await db.query(
+        "SELECT id, google_id, name, email, active_team FROM users WHERE google_id = $1 OR email = $2;",
+        [profile.sub, profile.email]
+      );
+
+      let user: any;
+      if (userResult.rowCount) {
+        // Existing user - login
+        user = userResult.rows[0];
+      } else {
+        // New user - register
+        const googleUserData = {
+          id: profile.sub,
+          displayName: profile.name,
+          email: profile.email,
+          picture: profile.picture
+        };
+
+        const registerResult = await db.query("SELECT register_google_user($1) AS user;", [JSON.stringify(googleUserData)]);
+        user = registerResult.rows[0].user;
+      }
+
+      // Create session
+      req.login(user, (err) => {
+        if (err) {
+          log_error(err);
+          return res.status(500).send(new ServerResponse(false, null, "Authentication failed"));
+        }
+        
+        user.build_v = FileConstants.getRelease();
+        return res.status(200).send(new AuthResponse("Login Successful!", true, user, null, "User successfully logged in"));
+      });
+
+    } catch (error) {
+      log_error(error);
+      return res.status(400).send(new ServerResponse(false, null, "Invalid ID token"));
+    }
+  }
 }
diff --git a/worklenz-backend/src/controllers/labels-controller.ts b/worklenz-backend/src/controllers/labels-controller.ts
index 414c31d3a..87d282fc3 100644
--- a/worklenz-backend/src/controllers/labels-controller.ts
+++ b/worklenz-backend/src/controllers/labels-controller.ts
@@ -5,7 +5,7 @@ import db from "../config/db";
 import {ServerResponse} from "../models/server-response";
 import WorklenzControllerBase from "./worklenz-controller-base";
 import HandleExceptions from "../decorators/handle-exceptions";
-import {TASK_PRIORITY_COLOR_ALPHA, WorklenzColorCodes} from "../shared/constants";
+import {TASK_PRIORITY_COLOR_ALPHA, WorklenzColorCodes, WorklenzColorShades} from "../shared/constants";
 
 export default class LabelsController extends WorklenzControllerBase {
   @HandleExceptions()
@@ -73,13 +73,44 @@ export default class LabelsController extends WorklenzControllerBase {
                WHERE id = $1
                  AND team_id = $2;`;
 
-    if (!WorklenzColorCodes.includes(req.body.color))
+    if (!Object.values(WorklenzColorShades).flat().includes(req.body.color))
       return res.status(400).send(new ServerResponse(false, null));
 
     const result = await db.query(q, [req.params.id, req.user?.team_id, req.body.color]);
     return res.status(200).send(new ServerResponse(true, result.rows));
   }
 
+  @HandleExceptions()
+  public static async updateLabel(req: IWorkLenzRequest, res: IWorkLenzResponse): Promise<IWorkLenzResponse> {
+    const updates = [];
+    const values = [req.params.id, req.user?.team_id];
+    let paramIndex = 3;
+
+    if (req.body.name) {
+      updates.push(`name = $${paramIndex++}`);
+      values.push(req.body.name);
+    }
+
+    if (req.body.color) {
+      if (!Object.values(WorklenzColorShades).flat().includes(req.body.color))
+        return res.status(400).send(new ServerResponse(false, null));
+      updates.push(`color_code = $${paramIndex++}`);
+      values.push(req.body.color);
+    }
+
+    if (updates.length === 0) {
+      return res.status(400).send(new ServerResponse(false, "No valid fields to update"));
+    }
+
+    const q = `UPDATE team_labels
+               SET ${updates.join(', ')}
+               WHERE id = $1
+                 AND team_id = $2;`;
+
+    const result = await db.query(q, values);
+    return res.status(200).send(new ServerResponse(true, result.rows));
+  }
+
   @HandleExceptions()
   public static async deleteById(req: IWorkLenzRequest, res: IWorkLenzResponse): Promise<IWorkLenzResponse> {
     const q = `DELETE
diff --git a/worklenz-backend/src/controllers/project-members-controller.ts b/worklenz-backend/src/controllers/project-members-controller.ts
index 4f20d1240..ccbeb4888 100644
--- a/worklenz-backend/src/controllers/project-members-controller.ts
+++ b/worklenz-backend/src/controllers/project-members-controller.ts
@@ -9,7 +9,7 @@ import {getColor} from "../shared/utils";
 import TeamMembersController from "./team-members-controller";
 import {checkTeamSubscriptionStatus} from "../shared/paddle-utils";
 import {updateUsers} from "../shared/paddle-requests";
-import {statusExclude} from "../shared/constants";
+import {statusExclude, TRIAL_MEMBER_LIMIT} from "../shared/constants";
 import {NotificationsService} from "../services/notifications/notifications.service";
 
 export default class ProjectMembersController extends WorklenzControllerBase {
@@ -118,6 +118,17 @@ export default class ProjectMembersController extends WorklenzControllerBase {
       return res.status(200).send(new ServerResponse(false, null, "Maximum number of life time users reached."));
     }
 
+    /**
+   * Checks trial user team member limit
+   */
+    if (subscriptionData.subscription_status === "trialing") {
+      const currentTrialMembers = parseInt(subscriptionData.current_count) || 0;
+      
+      if (currentTrialMembers + 1 > TRIAL_MEMBER_LIMIT) {
+        return res.status(200).send(new ServerResponse(false, null, `Trial users cannot exceed ${TRIAL_MEMBER_LIMIT} team members. Please upgrade to add more members.`));
+      }
+    }
+
     // if (subscriptionData.status === "trialing") break;
     if (!userExists && !subscriptionData.is_credit && !subscriptionData.is_custom && subscriptionData.subscription_status !== "trialing") {
       // if (subscriptionData.subscription_status === "active") {
diff --git a/worklenz-backend/src/controllers/projects-controller.ts b/worklenz-backend/src/controllers/projects-controller.ts
index a350675e2..da2048325 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-backend/src/controllers/reporting/reporting-allocation-controller-updated.ts b/worklenz-backend/src/controllers/reporting/reporting-allocation-controller-updated.ts
new file mode 100644
index 000000000..9d23c03d4
--- /dev/null
+++ b/worklenz-backend/src/controllers/reporting/reporting-allocation-controller-updated.ts
@@ -0,0 +1,179 @@
+// Example of updated getMemberTimeSheets method with timezone support
+// This shows the key changes needed to handle timezones properly
+
+import moment from "moment-timezone";
+import db from "../../config/db";
+import { IWorkLenzRequest } from "../../interfaces/worklenz-request";
+import { IWorkLenzResponse } from "../../interfaces/worklenz-response";
+import { ServerResponse } from "../../models/server-response";
+import { DATE_RANGES } from "../../shared/constants";
+
+export async function getMemberTimeSheets(req: IWorkLenzRequest, res: IWorkLenzResponse): Promise<IWorkLenzResponse> {
+  const archived = req.query.archived === "true";
+  const teams = (req.body.teams || []) as string[];
+  const teamIds = teams.map(id => `'${id}'`).join(",");
+  const projects = (req.body.projects || []) as string[];
+  const projectIds = projects.map(p => `'${p}'`).join(",");
+  const {billable} = req.body;
+  
+  // Get user timezone from request or database
+  const userTimezone = req.body.timezone || await getUserTimezone(req.user?.id || "");
+  
+  if (!teamIds || !projectIds.length)
+    return res.status(200).send(new ServerResponse(true, { users: [], projects: [] }));
+    
+  const { duration, date_range } = req.body;
+  
+  // Calculate date range with timezone support
+  let startDate: moment.Moment;
+  let endDate: moment.Moment;
+  
+  if (date_range && date_range.length === 2) {
+    // Convert user's local dates to their timezone's start/end of day
+    startDate = moment.tz(date_range[0], userTimezone).startOf("day");
+    endDate = moment.tz(date_range[1], userTimezone).endOf("day");
+  } else if (duration === DATE_RANGES.ALL_TIME) {
+    const minDateQuery = `SELECT MIN(COALESCE(start_date, created_at)) as min_date FROM projects WHERE id IN (${projectIds})`;
+    const minDateResult = await db.query(minDateQuery, []);
+    const minDate = minDateResult.rows[0]?.min_date;
+    startDate = minDate ? moment.tz(minDate, userTimezone) : moment.tz("2000-01-01", userTimezone);
+    endDate = moment.tz(userTimezone);
+  } else {
+    // Calculate ranges based on user's timezone
+    const now = moment.tz(userTimezone);
+    
+    switch (duration) {
+      case DATE_RANGES.YESTERDAY:
+        startDate = now.clone().subtract(1, "day").startOf("day");
+        endDate = now.clone().subtract(1, "day").endOf("day");
+        break;
+      case DATE_RANGES.LAST_WEEK:
+        startDate = now.clone().subtract(1, "week").startOf("isoWeek");
+        endDate = now.clone().subtract(1, "week").endOf("isoWeek");
+        break;
+      case DATE_RANGES.LAST_MONTH:
+        startDate = now.clone().subtract(1, "month").startOf("month");
+        endDate = now.clone().subtract(1, "month").endOf("month");
+        break;
+      case DATE_RANGES.LAST_QUARTER:
+        startDate = now.clone().subtract(3, "months").startOf("day");
+        endDate = now.clone().endOf("day");
+        break;
+      default:
+        startDate = now.clone().startOf("day");
+        endDate = now.clone().endOf("day");
+    }
+  }
+  
+  // Convert to UTC for database queries
+  const startUtc = startDate.utc().format("YYYY-MM-DD HH:mm:ss");
+  const endUtc = endDate.utc().format("YYYY-MM-DD HH:mm:ss");
+  
+  // Calculate working days in user's timezone
+  const totalDays = endDate.diff(startDate, "days") + 1;
+  let workingDays = 0;
+  
+  const current = startDate.clone();
+  while (current.isSameOrBefore(endDate, "day")) {
+    if (current.isoWeekday() >= 1 && current.isoWeekday() <= 5) {
+      workingDays++;
+    }
+    current.add(1, "day");
+  }
+  
+  // Updated SQL query with proper timezone handling
+  const billableQuery = buildBillableQuery(billable);
+  const archivedClause = archived ? "" : `AND projects.id NOT IN (SELECT project_id FROM archived_projects WHERE project_id = projects.id AND user_id = '${req.user?.id}')`;
+  
+  const q = `
+    WITH project_hours AS (
+      SELECT 
+        id,
+        COALESCE(hours_per_day, 8) as hours_per_day
+      FROM projects
+      WHERE id IN (${projectIds})
+    ),
+    total_working_hours AS (
+      SELECT 
+        SUM(hours_per_day) * ${workingDays} as total_hours
+      FROM project_hours
+    )
+    SELECT 
+      u.id,
+      u.email,
+      tm.name,
+      tm.color_code,
+      COALESCE(SUM(twl.time_spent), 0) as logged_time,
+      COALESCE(SUM(twl.time_spent), 0) / 3600.0 as value,
+      (SELECT total_hours FROM total_working_hours) as total_working_hours,
+      CASE 
+        WHEN (SELECT total_hours FROM total_working_hours) > 0 
+        THEN ROUND((COALESCE(SUM(twl.time_spent), 0) / 3600.0) / (SELECT total_hours FROM total_working_hours) * 100, 2)
+        ELSE 0 
+      END as utilization_percent,
+      ROUND(COALESCE(SUM(twl.time_spent), 0) / 3600.0, 2) as utilized_hours,
+      ROUND(COALESCE(SUM(twl.time_spent), 0) / 3600.0 - (SELECT total_hours FROM total_working_hours), 2) as over_under_utilized_hours,
+      '${userTimezone}' as user_timezone,
+      '${startDate.format("YYYY-MM-DD")}' as report_start_date,
+      '${endDate.format("YYYY-MM-DD")}' as report_end_date
+    FROM team_members tm
+      LEFT JOIN users u ON tm.user_id = u.id
+      LEFT JOIN task_work_log twl ON twl.user_id = u.id
+      LEFT JOIN tasks t ON twl.task_id = t.id ${billableQuery}
+      LEFT JOIN projects p ON t.project_id = p.id
+    WHERE tm.team_id IN (${teamIds})
+      AND (
+        twl.id IS NULL 
+        OR (
+          p.id IN (${projectIds})
+          AND twl.created_at >= '${startUtc}'::TIMESTAMP 
+          AND twl.created_at <= '${endUtc}'::TIMESTAMP
+          ${archivedClause}
+        )
+      )
+    GROUP BY u.id, u.email, tm.name, tm.color_code
+    ORDER BY logged_time DESC`;
+    
+  const result = await db.query(q, []);
+  
+  // Add timezone context to response
+  const response = {
+    data: result.rows,
+    timezone_info: {
+      user_timezone: userTimezone,
+      report_period: {
+        start: startDate.format("YYYY-MM-DD HH:mm:ss z"),
+        end: endDate.format("YYYY-MM-DD HH:mm:ss z"),
+        working_days: workingDays,
+        total_days: totalDays
+      }
+    }
+  };
+  
+  return res.status(200).send(new ServerResponse(true, response));
+}
+
+async function getUserTimezone(userId: string): Promise<string> {
+  const q = `SELECT tz.name as timezone 
+             FROM users u 
+             JOIN timezones tz ON u.timezone_id = tz.id 
+             WHERE u.id = $1`;
+  const result = await db.query(q, [userId]);
+  return result.rows[0]?.timezone || "UTC";
+}
+
+function buildBillableQuery(billable: { billable: boolean; nonBillable: boolean }): string {
+  if (!billable) return "";
+  
+  const { billable: isBillable, nonBillable } = billable;
+  
+  if (isBillable && nonBillable) {
+    return "";
+  } else if (isBillable) {
+    return " AND tasks.billable IS TRUE";
+  } else if (nonBillable) {
+    return " AND tasks.billable IS FALSE";
+  }
+  
+  return "";
+}
\ No newline at end of file
diff --git a/worklenz-backend/src/controllers/reporting/reporting-controller-base-with-timezone.ts b/worklenz-backend/src/controllers/reporting/reporting-controller-base-with-timezone.ts
new file mode 100644
index 000000000..1dae91476
--- /dev/null
+++ b/worklenz-backend/src/controllers/reporting/reporting-controller-base-with-timezone.ts
@@ -0,0 +1,140 @@
+import WorklenzControllerBase from "../worklenz-controller-base";
+import { IWorkLenzRequest } from "../../interfaces/worklenz-request";
+import db from "../../config/db";
+import moment from "moment-timezone";
+import { DATE_RANGES } from "../../shared/constants";
+
+export default abstract class ReportingControllerBaseWithTimezone extends WorklenzControllerBase {
+  
+  /**
+   * Get the user's timezone from the database or request
+   * @param userId - The user ID
+   * @returns The user's timezone or 'UTC' as default
+   */
+  protected static async getUserTimezone(userId: string): Promise<string> {
+    const q = `SELECT tz.name as timezone 
+               FROM users u 
+               JOIN timezones tz ON u.timezone_id = tz.id 
+               WHERE u.id = $1`;
+    const result = await db.query(q, [userId]);
+    return result.rows[0]?.timezone || "UTC";
+  }
+
+  /**
+   * Generate date range clause with timezone support
+   * @param key - Date range key (e.g., YESTERDAY, LAST_WEEK)
+   * @param dateRange - Array of date strings
+   * @param userTimezone - User's timezone (e.g., 'America/New_York')
+   * @returns SQL clause for date filtering
+   */
+  protected static getDateRangeClauseWithTimezone(key: string, dateRange: string[], userTimezone: string) {
+    // For custom date ranges
+    if (dateRange.length === 2) {
+      try {
+        // Handle different date formats that might come from frontend
+        let startDate, endDate;
+        
+        // Try to parse the date - it might be a full JS Date string or ISO string
+        if (dateRange[0].includes("GMT") || dateRange[0].includes("(")) {
+          // Parse JavaScript Date toString() format
+          startDate = moment(new Date(dateRange[0]));
+          endDate = moment(new Date(dateRange[1]));
+        } else {
+          // Parse ISO format or other formats
+          startDate = moment(dateRange[0]);
+          endDate = moment(dateRange[1]);
+        }
+        
+        // Convert to user's timezone and get start/end of day
+        const start = startDate.tz(userTimezone).startOf("day");
+        const end = endDate.tz(userTimezone).endOf("day");
+        
+        // Convert to UTC for database comparison
+        const startUtc = start.utc().format("YYYY-MM-DD HH:mm:ss");
+        const endUtc = end.utc().format("YYYY-MM-DD HH:mm:ss");
+        
+        if (start.isSame(end, "day")) {
+          // Single day selection
+          return `AND twl.created_at >= '${startUtc}'::TIMESTAMP AND twl.created_at <= '${endUtc}'::TIMESTAMP`;
+        }
+        
+        return `AND twl.created_at >= '${startUtc}'::TIMESTAMP AND twl.created_at <= '${endUtc}'::TIMESTAMP`;
+      } catch (error) {
+        console.error("Error parsing date range:", error, { dateRange, userTimezone });
+        // Fallback to current date if parsing fails
+        const now = moment.tz(userTimezone);
+        const startUtc = now.clone().startOf("day").utc().format("YYYY-MM-DD HH:mm:ss");
+        const endUtc = now.clone().endOf("day").utc().format("YYYY-MM-DD HH:mm:ss");
+        return `AND twl.created_at >= '${startUtc}'::TIMESTAMP AND twl.created_at <= '${endUtc}'::TIMESTAMP`;
+      }
+    }
+
+    // For predefined ranges, calculate based on user's timezone
+    const now = moment.tz(userTimezone);
+    let startDate, endDate;
+
+    switch (key) {
+      case DATE_RANGES.YESTERDAY:
+        startDate = now.clone().subtract(1, "day").startOf("day");
+        endDate = now.clone().subtract(1, "day").endOf("day");
+        break;
+      case DATE_RANGES.LAST_WEEK:
+        startDate = now.clone().subtract(1, "week").startOf("week");
+        endDate = now.clone().subtract(1, "week").endOf("week");
+        break;
+      case DATE_RANGES.LAST_MONTH:
+        startDate = now.clone().subtract(1, "month").startOf("month");
+        endDate = now.clone().subtract(1, "month").endOf("month");
+        break;
+      case DATE_RANGES.LAST_QUARTER:
+        startDate = now.clone().subtract(3, "months").startOf("day");
+        endDate = now.clone().endOf("day");
+        break;
+      default:
+        return "";
+    }
+
+    if (startDate && endDate) {
+      const startUtc = startDate.utc().format("YYYY-MM-DD HH:mm:ss");
+      const endUtc = endDate.utc().format("YYYY-MM-DD HH:mm:ss");
+      return `AND twl.created_at >= '${startUtc}'::TIMESTAMP AND twl.created_at <= '${endUtc}'::TIMESTAMP`;
+    }
+
+    return "";
+  }
+
+  /**
+   * Format dates for display in user's timezone
+   * @param date - Date to format
+   * @param userTimezone - User's timezone
+   * @param format - Moment format string
+   * @returns Formatted date string
+   */
+  protected static formatDateInTimezone(date: string | Date, userTimezone: string, format = "YYYY-MM-DD HH:mm:ss") {
+    return moment.tz(date, userTimezone).format(format);
+  }
+
+  /**
+   * Get working days count between two dates in user's timezone
+   * @param startDate - Start date
+   * @param endDate - End date
+   * @param userTimezone - User's timezone
+   * @returns Number of working days
+   */
+  protected static getWorkingDaysInTimezone(startDate: string, endDate: string, userTimezone: string): number {
+    const start = moment.tz(startDate, userTimezone);
+    const end = moment.tz(endDate, userTimezone);
+    let workingDays = 0;
+    
+    const current = start.clone();
+    while (current.isSameOrBefore(end, "day")) {
+      // Monday = 1, Friday = 5
+      if (current.isoWeekday() >= 1 && current.isoWeekday() <= 5) {
+        workingDays++;
+      }
+      current.add(1, "day");
+    }
+    
+    return workingDays;
+  }
+}
\ No newline at end of file
diff --git a/worklenz-backend/src/controllers/reporting/reporting-members-controller.ts b/worklenz-backend/src/controllers/reporting/reporting-members-controller.ts
index 975004372..60a3da765 100644
--- a/worklenz-backend/src/controllers/reporting/reporting-members-controller.ts
+++ b/worklenz-backend/src/controllers/reporting/reporting-members-controller.ts
@@ -6,10 +6,69 @@ import { IWorkLenzResponse } from "../../interfaces/worklenz-response";
 import { ServerResponse } from "../../models/server-response";
 import { DATE_RANGES, TASK_PRIORITY_COLOR_ALPHA } from "../../shared/constants";
 import { formatDuration, getColor, int } from "../../shared/utils";
-import ReportingControllerBase from "./reporting-controller-base";
+import ReportingControllerBaseWithTimezone from "./reporting-controller-base-with-timezone";
 import Excel from "exceljs";
 
-export default class ReportingMembersController extends ReportingControllerBase {
+export default class ReportingMembersController extends ReportingControllerBaseWithTimezone {
+
+  protected static getPercentage(n: number, total: number) {
+    return +(n ? (n / total) * 100 : 0).toFixed();
+  }
+
+  protected static getCurrentTeamId(req: IWorkLenzRequest): string | null {
+    return req.user?.team_id ?? null;
+  }
+
+  public static convertMinutesToHoursAndMinutes(totalMinutes: number) {
+    const hours = Math.floor(totalMinutes / 60);
+    const minutes = totalMinutes % 60;
+    return `${hours}h ${minutes}m`;
+  }
+
+  public static convertSecondsToHoursAndMinutes(seconds: number) {
+    const hours = Math.floor(seconds / 3600);
+    const minutes = Math.floor((seconds % 3600) / 60);
+    return `${hours}h ${minutes}m`;
+  }
+
+  protected static formatEndDate(endDate: string) {
+    const end = moment(endDate).format("YYYY-MM-DD");
+    const fEndDate = moment(end);
+    return fEndDate;
+  }
+
+  protected static formatCurrentDate() {
+    const current = moment().format("YYYY-MM-DD");
+    const fCurrentDate = moment(current);
+    return fCurrentDate;
+  }
+
+  protected static getDaysLeft(endDate: string): number | null {
+    if (!endDate) return null;
+
+    const fCurrentDate = this.formatCurrentDate();
+    const fEndDate = this.formatEndDate(endDate);
+
+    return fEndDate.diff(fCurrentDate, "days");
+  }
+
+  protected static isOverdue(endDate: string): boolean {
+    if (!endDate) return false;
+
+    const fCurrentDate = this.formatCurrentDate();
+    const fEndDate = this.formatEndDate(endDate);
+
+    return fEndDate.isBefore(fCurrentDate);
+  }
+
+  protected static isToday(endDate: string): boolean {
+    if (!endDate) return false;
+
+    const fCurrentDate = this.formatCurrentDate();
+    const fEndDate = this.formatEndDate(endDate);
+
+    return fEndDate.isSame(fCurrentDate);
+  }
 
   private static async getMembers(
     teamId: string, searchQuery = "",
@@ -265,8 +324,8 @@ export default class ReportingMembersController extends ReportingControllerBase
                     (SELECT color_code FROM project_phases WHERE id = (SELECT phase_id FROM task_phase WHERE task_id = t.id)) AS phase_color,
 
                     (total_minutes * 60) AS total_minutes,
-                    (SELECT SUM(time_spent) FROM task_work_log WHERE task_id = t.id AND ta.team_member_id = $1) AS time_logged,
-                    ((SELECT SUM(time_spent) FROM task_work_log WHERE task_id = t.id AND ta.team_member_id = $1) - (total_minutes * 60)) AS overlogged_time`;
+                    (SELECT SUM(time_spent) FROM task_work_log twl WHERE twl.task_id = t.id AND twl.user_id = (SELECT user_id FROM team_members WHERE id = $1)) AS time_logged,
+                    ((SELECT SUM(time_spent) FROM task_work_log twl WHERE twl.task_id = t.id AND twl.user_id = (SELECT user_id FROM team_members WHERE id = $1)) - (total_minutes * 60)) AS overlogged_time`;
   }
 
   protected static getActivityLogsOverdue(key: string, dateRange: string[]) {
@@ -487,7 +546,9 @@ export default class ReportingMembersController extends ReportingControllerBase
       dateRange = date_range.split(",");
     }
 
-    const durationClause = ReportingMembersController.getDateRangeClauseMembers(duration as string || DATE_RANGES.LAST_WEEK, dateRange, "twl");
+    // Get user timezone for proper date filtering
+    const userTimezone = await this.getUserTimezone(req.user?.id as string);
+    const durationClause = this.getDateRangeClauseWithTimezone(duration as string || DATE_RANGES.LAST_WEEK, dateRange, userTimezone);
     const minMaxDateClause = this.getMinMaxDates(duration as string || DATE_RANGES.LAST_WEEK, dateRange, "task_work_log");
     const memberName = (req.query.member_name as string)?.trim() || null;
 
@@ -1038,7 +1099,9 @@ export default class ReportingMembersController extends ReportingControllerBase
   public static async getMemberTimelogs(req: IWorkLenzRequest, res: IWorkLenzResponse): Promise<IWorkLenzResponse> {
     const { team_member_id, team_id, duration, date_range, archived, billable } = req.body;
 
-    const durationClause = ReportingMembersController.getDateRangeClauseMembers(duration || DATE_RANGES.LAST_WEEK, date_range, "twl");
+    // Get user timezone for proper date filtering
+    const userTimezone = await this.getUserTimezone(req.user?.id as string);
+    const durationClause = this.getDateRangeClauseWithTimezone(duration || DATE_RANGES.LAST_WEEK, date_range, userTimezone);
     const minMaxDateClause = this.getMinMaxDates(duration || DATE_RANGES.LAST_WEEK, date_range, "task_work_log");
 
     const billableQuery = this.buildBillableQuery(billable);
@@ -1230,8 +1293,8 @@ public static async getSingleMemberProjects(req: IWorkLenzRequest, res: IWorkLen
     row.actual_time = int(row.actual_time);
     row.estimated_time_string = this.convertMinutesToHoursAndMinutes(int(row.estimated_time));
     row.actual_time_string = this.convertSecondsToHoursAndMinutes(int(row.actual_time));
-    row.days_left = ReportingControllerBase.getDaysLeft(row.end_date);
-    row.is_overdue = ReportingControllerBase.isOverdue(row.end_date);
+    row.days_left = this.getDaysLeft(row.end_date);
+    row.is_overdue = this.isOverdue(row.end_date);
     if (row.days_left && row.is_overdue) {
       row.days_left = row.days_left.toString().replace(/-/g, "");
     }
diff --git a/worklenz-backend/src/controllers/support-controller.ts b/worklenz-backend/src/controllers/support-controller.ts
new file mode 100644
index 000000000..8651edd33
--- /dev/null
+++ b/worklenz-backend/src/controllers/support-controller.ts
@@ -0,0 +1,123 @@
+import { IWorkLenzRequest } from "../interfaces/worklenz-request";
+import { IWorkLenzResponse } from "../interfaces/worklenz-response";
+import { ServerResponse } from "../models/server-response";
+import WorklenzControllerBase from "./worklenz-controller-base";
+import HandleExceptions from "../decorators/handle-exceptions";
+import axios from "axios";
+import { log_error } from "../shared/utils";
+import db from "../config/db";
+
+export default class SupportController extends WorklenzControllerBase {
+
+  @HandleExceptions()
+  public static async contactSupport(req: IWorkLenzRequest, res: IWorkLenzResponse): Promise<IWorkLenzResponse> {
+    try {
+      const {user} = req;
+      if (!user) {
+        return res.status(401).send(new ServerResponse(false, "Unauthorized"));
+      }
+
+      const { reason } = req.body;
+      
+      // Get user's current session data
+      const userEmail = user.email;
+      const userName = user.name;
+      const subscriptionType = req.body.subscription_type || "Unknown";
+      
+      // Get organization name from teams table
+      let organizationName = "Unknown";
+      try {
+        const orgQuery = `
+          SELECT t.name as team_name, o.organization_name 
+          FROM users u
+          LEFT JOIN teams t ON t.id = u.active_team 
+          LEFT JOIN organizations o ON o.user_id = t.user_id
+          WHERE u.id = $1
+        `;
+        const orgResult = await db.query(orgQuery, [user.id]);
+        if (orgResult.rows.length > 0) {
+          organizationName = orgResult.rows[0].organization_name || orgResult.rows[0].team_name || "Unknown";
+        }
+      } catch (error) {
+        log_error("Error fetching organization info:", error);
+      }
+
+      // Send Teams webhook notification
+      const teamsWebhookUrl = process.env.TEAMS_SUPPORT_WEBHOOK;
+      
+      if (!teamsWebhookUrl) {
+        log_error("Teams webhook URL not configured");
+        return res.status(500).send(new ServerResponse(false, "Support notification not configured"));
+      }
+
+      const teamsMessage = {
+        "type": "message",
+        "attachments": [
+          {
+            "contentType": "application/vnd.microsoft.card.adaptive",
+            "content": {
+              "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
+              "type": "AdaptiveCard",
+              "version": "1.4",
+              "body": [
+                {
+                  "type": "TextBlock",
+                  "text": "🔔 Custom Plan Support Request",
+                  "weight": "Bolder",
+                  "size": "Medium",
+                  "color": "Accent"
+                },
+                {
+                  "type": "TextBlock",
+                  "text": "A user with a custom plan has requested support assistance.",
+                  "wrap": true,
+                  "spacing": "Medium"
+                },
+                {
+                  "type": "FactSet",
+                  "facts": [
+                    {
+                      "title": "Name:",
+                      "value": userName
+                    },
+                    {
+                      "title": "Email:",
+                      "value": userEmail
+                    },
+                    {
+                      "title": "Organization:",
+                      "value": organizationName
+                    },
+                    {
+                      "title": "Reason:",
+                      "value": reason || "Custom plan renewal/support"
+                    }
+                  ],
+                  "spacing": "Medium"
+                }
+              ]
+            }
+          }
+        ]
+      };
+
+      try {
+        await axios.post(teamsWebhookUrl, teamsMessage, {
+          headers: {
+            "Content-Type": "application/json"
+          },
+          timeout: 10000 // 10 seconds timeout
+        });
+
+        return res.status(200).send(new ServerResponse(true, "Support request sent successfully"));
+      } catch (webhookError: any) {
+        log_error("Teams webhook error:", webhookError?.response?.data || webhookError.message);
+        return res.status(500).send(new ServerResponse(false, "Failed to send support notification"));
+      }
+
+    } catch (error) {
+      log_error("Support controller error:", error);
+      return res.status(500).send(new ServerResponse(false, "Internal server error"));
+    }
+  }
+}
\ No newline at end of file
diff --git a/worklenz-backend/src/controllers/survey-controller.ts b/worklenz-backend/src/controllers/survey-controller.ts
new file mode 100644
index 000000000..cd66f97a0
--- /dev/null
+++ b/worklenz-backend/src/controllers/survey-controller.ts
@@ -0,0 +1,201 @@
+import { IWorkLenzRequest } from "../interfaces/worklenz-request";
+import { IWorkLenzResponse } from "../interfaces/worklenz-response";
+import { ServerResponse } from "../models/server-response";
+import WorklenzControllerBase from "./worklenz-controller-base";
+import HandleExceptions from "../decorators/handle-exceptions";
+import { ISurveySubmissionRequest } from "../interfaces/survey";
+import db from "../config/db";
+
+export default class SurveyController extends WorklenzControllerBase {
+  @HandleExceptions()
+  public static async getAccountSetupSurvey(req: IWorkLenzRequest, res: IWorkLenzResponse): Promise<IWorkLenzResponse> {
+    const q = `
+      SELECT 
+        s.id,
+        s.name,
+        s.description,
+        s.survey_type,
+        s.is_active,
+        COALESCE(
+          json_agg(
+            json_build_object(
+              'id', sq.id,
+              'survey_id', sq.survey_id,
+              'question_key', sq.question_key,
+              'question_type', sq.question_type,
+              'is_required', sq.is_required,
+              'sort_order', sq.sort_order,
+              'options', sq.options
+            ) ORDER BY sq.sort_order
+          ) FILTER (WHERE sq.id IS NOT NULL), 
+          '[]'
+        ) AS questions
+      FROM surveys s
+      LEFT JOIN survey_questions sq ON s.id = sq.survey_id
+      WHERE s.survey_type = 'account_setup' AND s.is_active = true
+      GROUP BY s.id, s.name, s.description, s.survey_type, s.is_active
+      LIMIT 1;
+    `;
+
+    const result = await db.query(q);
+    const [survey] = result.rows;
+
+    if (!survey) {
+      return res.status(200).send(new ServerResponse(false, null, "Account setup survey not found"));
+    }
+
+    return res.status(200).send(new ServerResponse(true, survey));
+  }
+
+  @HandleExceptions()
+  public static async submitSurveyResponse(req: IWorkLenzRequest, res: IWorkLenzResponse): Promise<IWorkLenzResponse> {
+    const userId = req.user?.id;
+    const body = req.body as ISurveySubmissionRequest;
+
+    if (!userId) {
+      return res.status(200).send(new ServerResponse(false, null, "User not authenticated"));
+    }
+
+    if (!body.survey_id || !body.answers || !Array.isArray(body.answers)) {
+      return res.status(200).send(new ServerResponse(false, null, "Invalid survey submission data"));
+    }
+
+    // Check if user has already submitted a response for this survey
+    const existingResponseQuery = `
+      SELECT id FROM survey_responses 
+      WHERE user_id = $1 AND survey_id = $2;
+    `;
+    const existingResult = await db.query(existingResponseQuery, [userId, body.survey_id]);
+
+    let responseId: string;
+
+    if (existingResult.rows.length > 0) {
+      // Update existing response
+      responseId = existingResult.rows[0].id;
+      
+      const updateResponseQuery = `
+        UPDATE survey_responses 
+        SET is_completed = true, completed_at = NOW(), updated_at = NOW()
+        WHERE id = $1;
+      `;
+      await db.query(updateResponseQuery, [responseId]);
+
+      // Delete existing answers
+      const deleteAnswersQuery = `DELETE FROM survey_answers WHERE response_id = $1;`;
+      await db.query(deleteAnswersQuery, [responseId]);
+    } else {
+      // Create new response
+      const createResponseQuery = `
+        INSERT INTO survey_responses (survey_id, user_id, is_completed, completed_at)
+        VALUES ($1, $2, true, NOW())
+        RETURNING id;
+      `;
+      const responseResult = await db.query(createResponseQuery, [body.survey_id, userId]);
+      responseId = responseResult.rows[0].id;
+    }
+
+    // Insert new answers
+    if (body.answers.length > 0) {
+      const answerValues: string[] = [];
+      const params: any[] = [];
+      
+      body.answers.forEach((answer, index) => {
+        const baseIndex = index * 4;
+        answerValues.push(`($${baseIndex + 1}, $${baseIndex + 2}, $${baseIndex + 3}, $${baseIndex + 4})`);
+        
+        params.push(
+          responseId,
+          answer.question_id,
+          answer.answer_text || null,
+          answer.answer_json ? JSON.stringify(answer.answer_json) : null
+        );
+      });
+
+      const insertAnswersQuery = `
+        INSERT INTO survey_answers (response_id, question_id, answer_text, answer_json)
+        VALUES ${answerValues.join(', ')};
+      `;
+
+      await db.query(insertAnswersQuery, params);
+    }
+
+    return res.status(200).send(new ServerResponse(true, { response_id: responseId }));
+  }
+
+  @HandleExceptions()
+  public static async getUserSurveyResponse(req: IWorkLenzRequest, res: IWorkLenzResponse): Promise<IWorkLenzResponse> {
+    const userId = req.user?.id;
+    const surveyId = req.params.survey_id;
+
+    if (!userId) {
+      return res.status(200).send(new ServerResponse(false, null, "User not authenticated"));
+    }
+
+    const q = `
+      SELECT 
+        sr.id,
+        sr.survey_id,
+        sr.user_id,
+        sr.is_completed,
+        sr.started_at,
+        sr.completed_at,
+        COALESCE(
+          json_agg(
+            json_build_object(
+              'question_id', sa.question_id,
+              'answer_text', sa.answer_text,
+              'answer_json', sa.answer_json
+            )
+          ) FILTER (WHERE sa.id IS NOT NULL),
+          '[]'
+        ) AS answers
+      FROM survey_responses sr
+      LEFT JOIN survey_answers sa ON sr.id = sa.response_id
+      WHERE sr.user_id = $1 AND sr.survey_id = $2
+      GROUP BY sr.id, sr.survey_id, sr.user_id, sr.is_completed, sr.started_at, sr.completed_at;
+    `;
+
+    const result = await db.query(q, [userId, surveyId]);
+    const [response] = result.rows;
+
+    if (!response) {
+      return res.status(200).send(new ServerResponse(false, null, "Survey response not found"));
+    }
+
+    return res.status(200).send(new ServerResponse(true, response));
+  }
+
+  @HandleExceptions()
+  public static async checkAccountSetupSurveyStatus(req: IWorkLenzRequest, res: IWorkLenzResponse): Promise<IWorkLenzResponse> {
+    const userId = req.user?.id;
+
+    if (!userId) {
+      return res.status(200).send(new ServerResponse(false, null, "User not authenticated"));
+    }
+
+    const q = `
+      SELECT EXISTS(
+        SELECT 1 
+        FROM survey_responses sr
+        INNER JOIN surveys s ON sr.survey_id = s.id
+        WHERE sr.user_id = $1 
+        AND s.survey_type = 'account_setup'
+        AND sr.is_completed = true
+      ) as is_completed,
+      (
+        SELECT sr.completed_at
+        FROM survey_responses sr
+        INNER JOIN surveys s ON sr.survey_id = s.id
+        WHERE sr.user_id = $1 
+        AND s.survey_type = 'account_setup'
+        AND sr.is_completed = true
+        LIMIT 1
+      ) as completed_at;
+    `;
+
+    const result = await db.query(q, [userId]);
+    const status = result.rows[0] || { is_completed: false, completed_at: null };
+
+    return res.status(200).send(new ServerResponse(true, status));
+  }
+}
\ No newline at end of file
diff --git a/worklenz-backend/src/controllers/task-comments-controller.ts b/worklenz-backend/src/controllers/task-comments-controller.ts
index 2eb210a7d..1430db552 100644
--- a/worklenz-backend/src/controllers/task-comments-controller.ts
+++ b/worklenz-backend/src/controllers/task-comments-controller.ts
@@ -124,7 +124,7 @@ export default class TaskCommentsController extends WorklenzControllerBase {
         const q = `
       INSERT INTO task_comment_attachments (name, type, size, task_id, comment_id, team_id, project_id)
       VALUES ($1, $2, $3, $4, $5, $6, $7)
-      RETURNING id, name, type, task_id, comment_id, created_at, 
+      RETURNING id, name, type, task_id, comment_id, created_at,
       CONCAT($8::TEXT, '/', team_id, '/', project_id, '/', task_id, '/', comment_id, '/', id, '.', type) AS url;
     `;
 
@@ -217,7 +217,49 @@ export default class TaskCommentsController extends WorklenzControllerBase {
       }
     }
 
-    return res.status(200).send(new ServerResponse(true, data.comment));
+    // Get user avatar URL from database
+    const avatarQuery = `SELECT avatar_url FROM users WHERE id = $1`;
+    const avatarResult = await db.query(avatarQuery, [req.user?.id]);
+    const avatarUrl = avatarResult.rows[0]?.avatar_url || "";
+
+    // Get comment details including created_at
+    const commentQuery = `SELECT created_at FROM task_comments WHERE id = $1`;
+    const commentResult = await db.query(commentQuery, [response.id]);
+    const commentData = commentResult.rows[0];
+
+    // Get attachments if any
+    const attachmentsQuery = `SELECT id, name, type, size FROM task_comment_attachments WHERE comment_id = $1`;
+    const attachmentsResult = await db.query(attachmentsQuery, [response.id]);
+    const commentAttachments = attachmentsResult.rows.map(att => ({
+      id: att.id,
+      name: att.name,
+      type: att.type,
+      size: att.size
+    }));
+
+
+    const commentdata = {
+      attachments: commentAttachments,
+      avatar_url: avatarUrl,
+      content: req.body.content,
+      created_at: commentData?.created_at || new Date().toISOString(),
+      edit: false,
+      id: response.id,
+      member_name: req.user?.name || "",
+      mentions: mentions || [],
+      rawContent: req.body.content,
+      reactions: {
+        likes: {
+          count: 0,
+          liked_members: [],
+          liked_member_ids: []
+        }
+      },
+      team_member_id: req.user?.team_member_id || "",
+      user_id: req.user?.id || ""
+    };
+
+    return res.status(200).send(new ServerResponse(true, commentdata));
   }
 
   @HandleExceptions()
@@ -530,17 +572,17 @@ export default class TaskCommentsController extends WorklenzControllerBase {
     for (const attachment of attachments) {
       if (req.user?.subscription_status === "free" && req.user?.owner_id) {
         const limits = await getFreePlanSettings();
-    
+
         const usedStorage = await getUsedStorage(req.user?.owner_id);
         if ((parseInt(usedStorage) + attachment.size) > megabytesToBytes(parseInt(limits.free_tier_storage))) {
           return res.status(200).send(new ServerResponse(false, [], `Sorry, the free plan cannot exceed ${limits.free_tier_storage}MB of storage.`));
         }
       }
-      
+
       const q = `
         INSERT INTO task_comment_attachments (name, type, size, task_id, comment_id, team_id, project_id)
         VALUES ($1, $2, $3, $4, $5, $6, $7)
-        RETURNING id, name, type, task_id, comment_id, created_at, 
+        RETURNING id, name, type, task_id, comment_id, created_at,
         CONCAT($8::TEXT, '/', team_id, '/', project_id, '/', task_id, '/', comment_id, '/', id, '.', type) AS url;
       `;
 
diff --git a/worklenz-backend/src/controllers/team-members-controller.ts b/worklenz-backend/src/controllers/team-members-controller.ts
index 33bde00d0..a338cc73a 100644
--- a/worklenz-backend/src/controllers/team-members-controller.ts
+++ b/worklenz-backend/src/controllers/team-members-controller.ts
@@ -13,7 +13,7 @@ import { SocketEvents } from "../socket.io/events";
 import WorklenzControllerBase from "./worklenz-controller-base";
 import HandleExceptions from "../decorators/handle-exceptions";
 import { formatDuration, getColor } from "../shared/utils";
-import { statusExclude, TEAM_MEMBER_TREE_MAP_COLOR_ALPHA } from "../shared/constants";
+import { statusExclude, TEAM_MEMBER_TREE_MAP_COLOR_ALPHA, TRIAL_MEMBER_LIMIT } from "../shared/constants";
 import { checkTeamSubscriptionStatus } from "../shared/paddle-utils";
 import { updateUsers } from "../shared/paddle-requests";
 import { NotificationsService } from "../services/notifications/notifications.service";
@@ -141,6 +141,17 @@ export default class TeamMembersController extends WorklenzControllerBase {
       return res.status(200).send(new ServerResponse(false, null, "Cannot exceed the maximum number of life time users."));
     }
 
+    /**
+   * Checks trial user team member limit
+   */
+    if (subscriptionData.subscription_status === "trialing") {
+      const currentTrialMembers = parseInt(subscriptionData.current_count) || 0;
+      
+      if (currentTrialMembers + incrementBy > TRIAL_MEMBER_LIMIT) {
+        return res.status(200).send(new ServerResponse(false, null, `Trial users cannot exceed ${TRIAL_MEMBER_LIMIT} team members. Please upgrade to add more members.`));
+      }
+    }
+
     /**
    * Checks subscription details and updates the user count if applicable.
    * Sends a response if there is an issue with the subscription.
@@ -1081,6 +1092,18 @@ export default class TeamMembersController extends WorklenzControllerBase {
       return res.status(200).send(new ServerResponse(false, "Please check your subscription status."));
     }
 
+    /**
+   * Checks trial user team member limit
+   */
+    if (subscriptionData.subscription_status === "trialing") {
+      const currentTrialMembers = parseInt(subscriptionData.current_count) || 0;
+      const emailsToAdd = req.body.emails?.length || 1;
+      
+      if (currentTrialMembers + emailsToAdd > TRIAL_MEMBER_LIMIT) {
+        return res.status(200).send(new ServerResponse(false, null, `Trial users cannot exceed ${TRIAL_MEMBER_LIMIT} team members. Please upgrade to add more members.`));
+      }
+    }
+
     // if (subscriptionData.status === "trialing") break;
     if (!subscriptionData.is_credit && !subscriptionData.is_custom) {
       if (subscriptionData.subscription_status === "active") {
diff --git a/worklenz-backend/src/controllers/user-activity-logs-controller.ts b/worklenz-backend/src/controllers/user-activity-logs-controller.ts
new file mode 100644
index 000000000..eeacb4b46
--- /dev/null
+++ b/worklenz-backend/src/controllers/user-activity-logs-controller.ts
@@ -0,0 +1,117 @@
+import moment from "moment";
+import { IWorkLenzRequest } from "../interfaces/worklenz-request";
+import { IWorkLenzResponse } from "../interfaces/worklenz-response";
+
+import db from "../config/db";
+
+import { ServerResponse } from "../models/server-response";
+import WorklenzControllerBase from "./worklenz-controller-base";
+import HandleExceptions from "../decorators/handle-exceptions";
+import { formatDuration, formatLogText, getColor } from "../shared/utils";
+
+interface IUserRecentTask {
+    task_id: string;
+    task_name: string;
+    project_id: string;
+    project_name: string;
+    last_activity_at: string;
+    activity_count: number;
+    project_color?: string;
+    task_status?: string;
+    status_color?: string;
+}
+
+interface IUserTimeLoggedTask {
+    task_id: string;
+    task_name: string;
+    project_id: string;
+    project_name: string;
+    total_time_logged: number;
+    total_time_logged_string: string;
+    last_logged_at: string;
+    logged_by_timer: boolean;
+    project_color?: string;
+    task_status?: string;
+    status_color?: string;
+    log_entries_count?: number;
+    estimated_time?: number;
+}
+
+export default class UserActivityLogsController extends WorklenzControllerBase {
+    @HandleExceptions()
+    public static async getRecentTasks(req: IWorkLenzRequest, res: IWorkLenzResponse): Promise<IWorkLenzResponse> {
+        if (!req.user) {
+            return res.status(401).send(new ServerResponse(false, null, "Unauthorized"));
+        }
+
+        const { id: userId, team_id: teamId } = req.user;
+        const { offset = 0, limit = 10 } = req.query;
+
+        // Optimized query with better performance and team filtering
+        const q = `
+        SELECT DISTINCT tal.task_id, t.name AS task_name, tal.project_id, p.name AS project_name,
+               MAX(tal.created_at) AS last_activity_at,
+               COUNT(DISTINCT tal.id) AS activity_count,
+               p.color_code AS project_color,
+               (SELECT name FROM task_statuses WHERE id = t.status_id) AS task_status,
+               (SELECT color_code 
+                FROM sys_task_status_categories 
+                WHERE id = (SELECT category_id FROM task_statuses WHERE id = t.status_id)) AS status_color
+        FROM task_activity_logs tal
+        INNER JOIN tasks t ON tal.task_id = t.id AND t.archived = FALSE
+        INNER JOIN projects p ON tal.project_id = p.id AND p.team_id = $1
+        WHERE tal.user_id = $2
+          AND tal.created_at >= NOW() - INTERVAL '30 days'
+        GROUP BY tal.task_id, t.name, tal.project_id, p.name, p.color_code, t.status_id
+        ORDER BY MAX(tal.created_at) DESC
+        LIMIT $3 OFFSET $4;
+        `;
+
+        const result = await db.query(q, [teamId, userId, limit, offset]);
+        const tasks: IUserRecentTask[] = result.rows;
+
+        return res.status(200).send(new ServerResponse(true, tasks));
+    }
+
+    @HandleExceptions()
+    public static async getTimeLoggedTasks(req: IWorkLenzRequest, res: IWorkLenzResponse): Promise<IWorkLenzResponse> {
+        if (!req.user) {
+            return res.status(401).send(new ServerResponse(false, null, "Unauthorized"));
+        }
+
+        const { id: userId, team_id: teamId } = req.user;
+        const { offset = 0, limit = 10 } = req.query;
+
+        // Optimized query with better performance, team filtering, and useful additional data
+        const q = `
+        SELECT twl.task_id, t.name AS task_name, t.project_id, p.name AS project_name,
+               SUM(twl.time_spent) AS total_time_logged,
+               MAX(twl.created_at) AS last_logged_at,
+               MAX(twl.logged_by_timer::int)::boolean AS logged_by_timer,
+               p.color_code AS project_color,
+               (SELECT name FROM task_statuses WHERE id = t.status_id) AS task_status,
+               (SELECT color_code 
+                FROM sys_task_status_categories 
+                WHERE id = (SELECT category_id FROM task_statuses WHERE id = t.status_id)) AS status_color,
+               COUNT(DISTINCT twl.id) AS log_entries_count,
+               (t.total_minutes * 60) AS estimated_time
+        FROM task_work_log twl
+        INNER JOIN tasks t ON twl.task_id = t.id AND t.archived = FALSE
+        INNER JOIN projects p ON t.project_id = p.id AND p.team_id = $1
+        WHERE twl.user_id = $2
+          AND twl.created_at >= NOW() - INTERVAL '90 days'
+        GROUP BY twl.task_id, t.name, t.project_id, p.name, p.color_code, t.status_id, t.total_minutes
+        HAVING SUM(twl.time_spent) > 0
+        ORDER BY MAX(twl.created_at) DESC
+        LIMIT $3 OFFSET $4;
+        `;
+
+        const result = await db.query(q, [teamId, userId, limit, offset]);
+        const tasks: IUserTimeLoggedTask[] = result.rows.map(task => ({
+            ...task,
+            total_time_logged_string: formatDuration(moment.duration(task.total_time_logged, "seconds")),
+        }));
+
+        return res.status(200).send(new ServerResponse(true, tasks));
+    }
+}
diff --git a/worklenz-backend/src/interfaces/survey.ts b/worklenz-backend/src/interfaces/survey.ts
new file mode 100644
index 000000000..8cb3f5a95
--- /dev/null
+++ b/worklenz-backend/src/interfaces/survey.ts
@@ -0,0 +1,37 @@
+export interface ISurveyQuestion {
+  id: string;
+  survey_id: string;
+  question_key: string;
+  question_type: 'single_choice' | 'multiple_choice' | 'text';
+  is_required: boolean;
+  sort_order: number;
+  options?: string[];
+}
+
+export interface ISurvey {
+  id: string;
+  name: string;
+  description?: string;
+  survey_type: 'account_setup' | 'onboarding' | 'feedback';
+  is_active: boolean;
+  questions?: ISurveyQuestion[];
+}
+
+export interface ISurveyAnswer {
+  question_id: string;
+  answer_text?: string;
+  answer_json?: string[];
+}
+
+export interface ISurveyResponse {
+  id?: string;
+  survey_id: string;
+  user_id?: string;
+  is_completed: boolean;
+  answers: ISurveyAnswer[];
+}
+
+export interface ISurveySubmissionRequest {
+  survey_id: string;
+  answers: ISurveyAnswer[];
+}
\ No newline at end of file
diff --git a/worklenz-backend/src/middlewares/session-middleware.ts b/worklenz-backend/src/middlewares/session-middleware.ts
index cb6cd624a..d4394cb77 100644
--- a/worklenz-backend/src/middlewares/session-middleware.ts
+++ b/worklenz-backend/src/middlewares/session-middleware.ts
@@ -1,11 +1,13 @@
 import session from "express-session";
 import db from "../config/db";
 import { isProduction } from "../shared/utils";
+import * as cookieSignature from "cookie-signature";
+import { randomBytes } from "crypto";
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const pgSession = require("connect-pg-simple")(session);
 
-export default session({
+const sessionConfig = {
   name: process.env.SESSION_NAME,
   secret: process.env.SESSION_SECRET || "development-secret-key",
   proxy: false,
@@ -18,10 +20,56 @@ export default session({
   }),
   cookie: {
     path: "/",
-    // secure: isProduction(),
-    // httpOnly: isProduction(),
-    // sameSite: "none",
-    // domain: isProduction() ? ".worklenz.com" : undefined,
+    httpOnly: true,
+    // For mobile app support in production, use "none", for local development use "lax"
+    sameSite: "lax" as const,
+    // Secure only in production (HTTPS required for sameSite: "none")
+    secure: false,
+    domain: undefined,
     maxAge: 30 * 24 * 60 * 60 * 1000 // 30 days
+  },
+  // Custom session ID handling for mobile apps
+  genid: () => {
+    return randomBytes(24).toString("base64url");
   }
-});
\ No newline at end of file
+};
+
+const sessionMiddleware = session(sessionConfig);
+
+// Enhanced session middleware that supports both cookies and headers for mobile apps
+export default (req: any, res: any, next: any) => {
+  // Check if mobile app is sending session ID via header (fallback for cookie issues)
+  const headerSessionId = req.headers["x-session-id"];
+  const headerSessionName = req.headers["x-session-name"];
+  
+  // Only process headers if they exist AND there's no existing valid session cookie
+  if (headerSessionId && headerSessionName) {
+    const secret = process.env.SESSION_SECRET || "development-secret-key";
+    
+    try {
+      // Create a signed cookie using the session secret
+      const signedSessionId = `s:${cookieSignature.sign(headerSessionId, secret)}`;
+      const encodedSignedId = encodeURIComponent(signedSessionId);
+      const sessionCookie = `${headerSessionName}=${encodedSignedId}`;
+      
+      if (req.headers.cookie) {
+        // Replace existing session cookie while keeping other cookies
+        req.headers.cookie = req.headers.cookie
+          .split(";")
+          .filter((cookie: string) => !cookie.trim().startsWith(headerSessionName))
+          .concat(sessionCookie)
+          .join(";");
+      } else {
+        // Set the session cookie from header
+        req.headers.cookie = sessionCookie;
+      }
+    } catch (error) {
+      // Fallback to the old method
+      const sessionCookie = `${headerSessionName}=s%3A${headerSessionId}`;
+      req.headers.cookie = sessionCookie;
+    }
+  }
+  
+  // Always call the original session middleware (handles both cookie and header-converted cases)
+  sessionMiddleware(req, res, next);
+};
\ No newline at end of file
diff --git a/worklenz-backend/src/middlewares/validators/password-validator.ts b/worklenz-backend/src/middlewares/validators/password-validator.ts
index cef9c49fa..52ef7722f 100644
--- a/worklenz-backend/src/middlewares/validators/password-validator.ts
+++ b/worklenz-backend/src/middlewares/validators/password-validator.ts
@@ -8,7 +8,7 @@ import {PASSWORD_POLICY} from "../../shared/constants";
 function isStrongPassword(password: string) {
   if (!isProduction()) return true;
   const strength = PasswordStrengthChecker.validate(password);
-  return strength.value >= 2 && strength.length < 32;
+  return strength.value >= 2 && strength.length <= 32;
 }
 
 export default function (req: Request, res: Response, next: NextFunction) {
diff --git a/worklenz-backend/src/middlewares/validators/survey-submission-validator.ts b/worklenz-backend/src/middlewares/validators/survey-submission-validator.ts
new file mode 100644
index 000000000..bbeefcee4
--- /dev/null
+++ b/worklenz-backend/src/middlewares/validators/survey-submission-validator.ts
@@ -0,0 +1,53 @@
+import { NextFunction } from "express";
+import { IWorkLenzRequest } from "../../interfaces/worklenz-request";
+import { IWorkLenzResponse } from "../../interfaces/worklenz-response";
+import { ServerResponse } from "../../models/server-response";
+import { ISurveySubmissionRequest } from "../../interfaces/survey";
+
+export default function surveySubmissionValidator(req: IWorkLenzRequest, res: IWorkLenzResponse, next: NextFunction): IWorkLenzResponse | void {
+  const body = req.body as ISurveySubmissionRequest;
+
+  if (!body) {
+    return res.status(200).send(new ServerResponse(false, null, "Request body is required"));
+  }
+
+  if (!body.survey_id || typeof body.survey_id !== 'string') {
+    return res.status(200).send(new ServerResponse(false, null, "Survey ID is required and must be a string"));
+  }
+
+  if (!body.answers || !Array.isArray(body.answers)) {
+    return res.status(200).send(new ServerResponse(false, null, "Answers are required and must be an array"));
+  }
+
+  // Validate each answer
+  for (let i = 0; i < body.answers.length; i++) {
+    const answer = body.answers[i];
+    
+    if (!answer.question_id || typeof answer.question_id !== 'string') {
+      return res.status(200).send(new ServerResponse(false, null, `Answer ${i + 1}: Question ID is required and must be a string`));
+    }
+
+    // answer_text and answer_json are both optional - users can submit empty answers
+
+    // Validate answer_text if provided
+    if (answer.answer_text && typeof answer.answer_text !== 'string') {
+      return res.status(200).send(new ServerResponse(false, null, `Answer ${i + 1}: answer_text must be a string`));
+    }
+
+    // Validate answer_json if provided
+    if (answer.answer_json && !Array.isArray(answer.answer_json)) {
+      return res.status(200).send(new ServerResponse(false, null, `Answer ${i + 1}: answer_json must be an array`));
+    }
+
+    // Validate answer_json items are strings
+    if (answer.answer_json) {
+      for (let j = 0; j < answer.answer_json.length; j++) {
+        if (typeof answer.answer_json[j] !== 'string') {
+          return res.status(200).send(new ServerResponse(false, null, `Answer ${i + 1}: answer_json items must be strings`));
+        }
+      }
+    }
+  }
+
+  return next();
+}
\ No newline at end of file
diff --git a/worklenz-backend/src/passport/index.ts b/worklenz-backend/src/passport/index.ts
index 6c3575ae2..f41a66df5 100644
--- a/worklenz-backend/src/passport/index.ts
+++ b/worklenz-backend/src/passport/index.ts
@@ -4,6 +4,7 @@ import {deserialize} from "./deserialize";
 import {serialize} from "./serialize";
 
 import GoogleLogin from "./passport-strategies/passport-google";
+import GoogleMobileLogin from "./passport-strategies/passport-google-mobile";
 import LocalLogin from "./passport-strategies/passport-local-login";
 import LocalSignup from "./passport-strategies/passport-local-signup";
 
@@ -15,6 +16,7 @@ export default (passport: PassportStatic) => {
   passport.use("local-login", LocalLogin);
   passport.use("local-signup", LocalSignup);
   passport.use(GoogleLogin);
+  passport.use("google-mobile", GoogleMobileLogin);
   passport.serializeUser(serialize);
   passport.deserializeUser(deserialize);
 };
diff --git a/worklenz-backend/src/passport/passport-strategies/passport-google-mobile.ts b/worklenz-backend/src/passport/passport-strategies/passport-google-mobile.ts
new file mode 100644
index 000000000..236334727
--- /dev/null
+++ b/worklenz-backend/src/passport/passport-strategies/passport-google-mobile.ts
@@ -0,0 +1,110 @@
+import { Strategy as CustomStrategy } from "passport-custom";
+import axios from "axios";
+import { Request } from "express";
+import db from "../../config/db";
+import { log_error } from "../../shared/utils";
+import { ERROR_KEY } from "./passport-constants";
+
+interface GoogleTokenProfile {
+  sub: string;
+  email: string;
+  name: string;
+  picture: string;
+  email_verified: boolean;
+  aud: string;
+  iss: string;
+  exp: number;
+}
+
+async function handleMobileGoogleAuth(req: Request, done: any) {
+  try {
+    const { idToken } = req.body;
+
+    if (!idToken) {
+      return done(null, false, { message: "ID token is required" });
+    }
+
+    // Verify Google ID token
+    const response = await axios.get(
+      `https://oauth2.googleapis.com/tokeninfo?id_token=${idToken}`
+    );
+    const profile: GoogleTokenProfile = response.data;
+
+    // Validate token audience (client ID)
+    const allowedClientIds = [
+      process.env.GOOGLE_CLIENT_ID,
+      process.env.GOOGLE_ANDROID_CLIENT_ID,
+      process.env.GOOGLE_IOS_CLIENT_ID,
+    ].filter(Boolean);
+
+    if (!allowedClientIds.includes(profile.aud)) {
+      return done(null, false, { message: "Invalid token audience" });
+    }
+
+    // Validate token issuer
+    if (
+      !["https://accounts.google.com", "accounts.google.com"].includes(
+        profile.iss
+      )
+    ) {
+      return done(null, false, { message: "Invalid token issuer" });
+    }
+
+    // Check token expiry
+    if (Date.now() >= profile.exp * 1000) {
+      return done(null, false, { message: "Token expired" });
+    }
+
+    if (!profile.email_verified) {
+      return done(null, false, { message: "Email not verified" });
+    }
+
+    // Check for existing local account
+    const localAccountResult = await db.query(
+      "SELECT 1 FROM users WHERE email = $1 AND password IS NOT NULL AND is_deleted IS FALSE;",
+      [profile.email]
+    );
+
+    if (localAccountResult.rowCount) {
+      const message = `No Google account exists for email ${profile.email}.`;
+      return done(null, false, { message });
+    }
+
+    // Check if user exists
+    const userResult = await db.query(
+      "SELECT id, google_id, name, email, active_team FROM users WHERE google_id = $1 OR email = $2;",
+      [profile.sub, profile.email]
+    );
+
+    if (userResult.rowCount) {
+      // Existing user - login
+      const user = userResult.rows[0];
+      return done(null, user, { message: "User successfully logged in" });
+    }
+    // New user - register
+    const googleUserData = {
+      id: profile.sub,
+      displayName: profile.name,
+      email: profile.email,
+      picture: profile.picture,
+    };
+
+    const registerResult = await db.query(
+      "SELECT register_google_user($1) AS user;",
+      [JSON.stringify(googleUserData)]
+    );
+    const { user } = registerResult.rows[0];
+
+    return done(null, user, {
+      message: "User successfully registered and logged in",
+    });
+  } catch (error: any) {
+    log_error(error);
+    if (error.response?.status === 400) {
+      return done(null, false, { message: "Invalid ID token" });
+    }
+    return done(error);
+  }
+}
+
+export default new CustomStrategy(handleMobileGoogleAuth);
diff --git a/worklenz-backend/src/passport/passport-strategies/passport-local-signup.ts b/worklenz-backend/src/passport/passport-strategies/passport-local-signup.ts
index 563950667..fddad7f55 100644
--- a/worklenz-backend/src/passport/passport-strategies/passport-local-signup.ts
+++ b/worklenz-backend/src/passport/passport-strategies/passport-local-signup.ts
@@ -20,6 +20,17 @@ async function isGoogleAccountFound(email: string) {
   return !!result.rowCount;
 }
 
+async function isAccountDeactivated(email: string) {
+  const q = `
+    SELECT 1
+    FROM users
+    WHERE email = $1
+      AND is_deleted = TRUE;
+  `;
+  const result = await db.query(q, [email]);
+  return !!result.rowCount;
+}
+
 async function registerUser(password: string, team_id: string, name: string, team_name: string, email: string, timezone: string, team_member_id: string) {
   const salt = bcrypt.genSaltSync(10);
   const encryptedPassword = bcrypt.hashSync(password, salt);
@@ -53,6 +64,10 @@ async function handleSignUp(req: Request, email: string, password: string, done:
   if (googleAccountFound)
     return done(null, null, req.flash(ERROR_KEY, `${req.body.email} is already linked with a Google account.`));
 
+  const accountDeactivated = await isAccountDeactivated(email);
+  if (accountDeactivated)
+    return done(null, null, req.flash(ERROR_KEY, `Account for email ${email} has been deactivated. Please contact support to reactivate your account.`));
+
   try {
     const user = await registerUser(password, team_id, name, team_name, email, timezone, team_member_id);
     sendWelcomeEmail(email, name);
@@ -70,6 +85,7 @@ async function handleSignUp(req: Request, email: string, password: string, done:
       return done(null, null, req.flash(ERROR_KEY, `Worklenz account already exists for email ${value}.`));
     }
 
+
     if (message.includes("TEAM_NAME_EXISTS_ERROR")) {
       const [, value] = error.message.split(":");
       return done(null, null, req.flash(ERROR_KEY, `Team name "${value}" already exists. Please choose a different team name.`));
diff --git a/worklenz-backend/src/public/locales/alb/task-list-filters.json b/worklenz-backend/src/public/locales/alb/task-list-filters.json
index c31564982..595801b1c 100644
--- a/worklenz-backend/src/public/locales/alb/task-list-filters.json
+++ b/worklenz-backend/src/public/locales/alb/task-list-filters.json
@@ -81,5 +81,12 @@
   "delete": "Fshi",
   "enterStatusName": "Shkruani emrin e statusit",
   "selectCategory": "Zgjidh kategorinë",
-  "close": "Mbyll"
+  "close": "Mbyll",
+  "clearSort": "Pastro Renditjen",
+  "sortAscending": "Rendit në Rritje",
+  "sortDescending": "Rendit në Zbritje",
+  "sortByField": "Rendit sipas {{field}}",
+  "ascendingOrder": "Rritës",
+  "descendingOrder": "Zbritës",
+  "currentSort": "Renditja aktuale: {{field}} {{order}}"
 }
diff --git a/worklenz-backend/src/public/locales/de/task-list-filters.json b/worklenz-backend/src/public/locales/de/task-list-filters.json
index 0854c34ff..b298139c4 100644
--- a/worklenz-backend/src/public/locales/de/task-list-filters.json
+++ b/worklenz-backend/src/public/locales/de/task-list-filters.json
@@ -81,5 +81,12 @@
   "delete": "Löschen",
   "enterStatusName": "Statusnamen eingeben",
   "selectCategory": "Kategorie auswählen",
-  "close": "Schließen"
+  "close": "Schließen",
+  "clearSort": "Sortierung löschen",
+  "sortAscending": "Aufsteigend sortieren",
+  "sortDescending": "Absteigend sortieren",
+  "sortByField": "Sortieren nach {{field}}",
+  "ascendingOrder": "Aufsteigend",
+  "descendingOrder": "Absteigend",
+  "currentSort": "Aktuelle Sortierung: {{field}} {{order}}"
 }
diff --git a/worklenz-backend/src/public/locales/en/account-setup.json b/worklenz-backend/src/public/locales/en/account-setup.json
index 5e71ca40b..4310e0c69 100644
--- a/worklenz-backend/src/public/locales/en/account-setup.json
+++ b/worklenz-backend/src/public/locales/en/account-setup.json
@@ -1,7 +1,7 @@
 {
   "continue": "Continue",
 
-  "setupYourAccount": "Setup Your Worklenz Account.",
+  "setupYourAccount": "Setup Your Account.",
   "organizationStepTitle": "Name Your Organization",
   "organizationStepLabel": "Pick a name for your Worklenz account.",
 
diff --git a/worklenz-backend/src/public/locales/en/task-list-filters.json b/worklenz-backend/src/public/locales/en/task-list-filters.json
index a38356c6a..6fa2ce3c4 100644
--- a/worklenz-backend/src/public/locales/en/task-list-filters.json
+++ b/worklenz-backend/src/public/locales/en/task-list-filters.json
@@ -81,5 +81,12 @@
   "delete": "Delete",
   "enterStatusName": "Enter status name",
   "selectCategory": "Select category",
-  "close": "Close"
+  "close": "Close",
+  "clearSort": "Clear Sort",
+  "sortAscending": "Sort Ascending",
+  "sortDescending": "Sort Descending",
+  "sortByField": "Sort by {{field}}",
+  "ascendingOrder": "Ascending",
+  "descendingOrder": "Descending",
+  "currentSort": "Current sort: {{field}} {{order}}"
 }
diff --git a/worklenz-backend/src/public/locales/es/task-list-filters.json b/worklenz-backend/src/public/locales/es/task-list-filters.json
index 465368f05..8ee72c45f 100644
--- a/worklenz-backend/src/public/locales/es/task-list-filters.json
+++ b/worklenz-backend/src/public/locales/es/task-list-filters.json
@@ -77,5 +77,12 @@
   "delete": "Eliminar",
   "enterStatusName": "Introducir nombre del estado",
   "selectCategory": "Seleccionar categoría",
-  "close": "Cerrar"
+  "close": "Cerrar",
+  "clearSort": "Limpiar Ordenamiento",
+  "sortAscending": "Ordenar Ascendente",
+  "sortDescending": "Ordenar Descendente",
+  "sortByField": "Ordenar por {{field}}",
+  "ascendingOrder": "Ascendente",
+  "descendingOrder": "Descendente",
+  "currentSort": "Ordenamiento actual: {{field}} {{order}}"
 }
diff --git a/worklenz-backend/src/public/locales/pt/task-list-filters.json b/worklenz-backend/src/public/locales/pt/task-list-filters.json
index 21e8806b5..4464c2c12 100644
--- a/worklenz-backend/src/public/locales/pt/task-list-filters.json
+++ b/worklenz-backend/src/public/locales/pt/task-list-filters.json
@@ -78,5 +78,12 @@
   "delete": "Excluir",
   "enterStatusName": "Digite o nome do status",
   "selectCategory": "Selecionar categoria",
-  "close": "Fechar"
+  "close": "Fechar",
+  "clearSort": "Limpar Ordenação",
+  "sortAscending": "Ordenar Crescente",
+  "sortDescending": "Ordenar Decrescente",
+  "sortByField": "Ordenar por {{field}}",
+  "ascendingOrder": "Crescente",
+  "descendingOrder": "Decrescente",
+  "currentSort": "Ordenação atual: {{field}} {{order}}"
 }
diff --git a/worklenz-backend/src/public/locales/zh/task-list-filters.json b/worklenz-backend/src/public/locales/zh/task-list-filters.json
index 84387509e..95a4f1660 100644
--- a/worklenz-backend/src/public/locales/zh/task-list-filters.json
+++ b/worklenz-backend/src/public/locales/zh/task-list-filters.json
@@ -75,5 +75,12 @@
   "delete": "删除",
   "enterStatusName": "输入状态名称",
   "selectCategory": "选择类别",
-  "close": "关闭"
+  "close": "关闭",
+  "clearSort": "清除排序",
+  "sortAscending": "升序排列",
+  "sortDescending": "降序排列",
+  "sortByField": "按{{field}}排序",
+  "ascendingOrder": "升序",
+  "descendingOrder": "降序",
+  "currentSort": "当前排序：{{field}} {{order}}"
 }
\ No newline at end of file
diff --git a/worklenz-backend/src/routes/apis/account-api-router.ts b/worklenz-backend/src/routes/apis/account-api-router.ts
new file mode 100644
index 000000000..4144d7874
--- /dev/null
+++ b/worklenz-backend/src/routes/apis/account-api-router.ts
@@ -0,0 +1,9 @@
+import express from "express";
+import AccountDeletionController from "../../controllers/account-deletion-controller";
+
+const accountApiRouter = express.Router();
+
+accountApiRouter.post("/deletion-request", AccountDeletionController.requestDeletion);
+accountApiRouter.post("/cancel-deletion", AccountDeletionController.cancelDeletion);
+
+export default accountApiRouter;
\ No newline at end of file
diff --git a/worklenz-backend/src/routes/apis/index.ts b/worklenz-backend/src/routes/apis/index.ts
index 5a2019c86..bb55d41fc 100644
--- a/worklenz-backend/src/routes/apis/index.ts
+++ b/worklenz-backend/src/routes/apis/index.ts
@@ -1,120 +1,129 @@
-import express from "express";
-
-import AccessControlsController from "../../controllers/access-controls-controller";
-import AuthController from "../../controllers/auth-controller";
-import LogsController from "../../controllers/logs-controller";
-import OverviewController from "../../controllers/overview-controller";
-import TaskPrioritiesController from "../../controllers/task-priorities-controller";
-
-import attachmentsApiRouter from "./attachments-api-router";
-import clientsApiRouter from "./clients-api-router";
-import jobTitlesApiRouter from "./job-titles-api-router";
-import notificationsApiRouter from "./notifications-api-router";
-import personalOverviewApiRouter from "./personal-overview-api-router";
-import projectMembersApiRouter from "./project-members-api-router";
-import projectsApiRouter from "./projects-api-router";
-import settingsApiRouter from "./settings-api-router";
-import statusesApiRouter from "./statuses-api-router";
-import subTasksApiRouter from "./sub-tasks-api-router";
-import taskCommentsApiRouter from "./task-comments-api-router";
-import taskWorkLogApiRouter from "./task-work-log-api-router";
-import tasksApiRouter from "./tasks-api-router";
-import teamMembersApiRouter from "./team-members-api-router";
-import teamsApiRouter from "./teams-api-router";
-import timezonesApiRouter from "./timezones-api-router";
-import todoListApiRouter from "./todo-list-api-router";
-import projectStatusesApiRouter from "./project-statuses-api-router";
-import labelsApiRouter from "./labels-api-router";
-import sharedProjectsApiRouter from "./shared-projects-api-router";
-import resourceAllocationApiRouter from "./resource-allocation-api-router";
-import taskTemplatesApiRouter from "./task-templates-api-router";
-import projectInsightsApiRouter from "./project-insights-api-router";
-import passwordValidator from "../../middlewares/validators/password-validator";
-import adminCenterApiRouter from "./admin-center-api-router";
-import reportingApiRouter from "./reporting-api-router";
-import activityLogsApiRouter from "./activity-logs-api-router";
-import safeControllerFunction from "../../shared/safe-controller-function";
-import projectFoldersApiRouter from "./project-folders-api-router";
-import taskPhasesApiRouter from "./task-phases-api-router";
-import projectCategoriesApiRouter from "./project-categories-api-router";
-import homePageApiRouter from "./home-page-api-router";
-import ganttApiRouter from "./gantt-api-router";
-import projectCommentsApiRouter from "./project-comments-api-router";
-import reportingExportApiRouter from "./reporting-export-api-router";
-import projectHealthsApiRouter from "./project-healths-api-router";
-import ptTasksApiRouter from "./pt-tasks-api-router";
-import projectTemplatesApiRouter from "./project-templates-api";
-import ptTaskPhasesApiRouter from "./pt_task-phases-api-router";
-import ptStatusesApiRouter from "./pt-statuses-api-router";
-import workloadApiRouter from "./gannt-apis/workload-api-router";
-import roadmapApiRouter from "./gannt-apis/roadmap-api-router";
-import scheduleApiRouter from "./gannt-apis/schedule-api-router";
-import scheduleApiV2Router from "./gannt-apis/schedule-api-v2-router";
-import projectManagerApiRouter from "./project-managers-api-router";
-
-import billingApiRouter from "./billing-api-router";
-import taskDependenciesApiRouter from "./task-dependencies-api-router";
-
-import taskRecurringApiRouter from "./task-recurring-api-router";
-
import customColumnsApiRouter from "./custom-columns-api-router";
+import express from "express";
+
+import AccessControlsController from "../../controllers/access-controls-controller";
+import AuthController from "../../controllers/auth-controller";
+import LogsController from "../../controllers/logs-controller";
+import OverviewController from "../../controllers/overview-controller";
+import TaskPrioritiesController from "../../controllers/task-priorities-controller";
+
+import attachmentsApiRouter from "./attachments-api-router";
+import clientsApiRouter from "./clients-api-router";
+import jobTitlesApiRouter from "./job-titles-api-router";
+import notificationsApiRouter from "./notifications-api-router";
+import personalOverviewApiRouter from "./personal-overview-api-router";
+import projectMembersApiRouter from "./project-members-api-router";
+import projectsApiRouter from "./projects-api-router";
+import settingsApiRouter from "./settings-api-router";
+import statusesApiRouter from "./statuses-api-router";
+import subTasksApiRouter from "./sub-tasks-api-router";
+import taskCommentsApiRouter from "./task-comments-api-router";
+import taskWorkLogApiRouter from "./task-work-log-api-router";
+import tasksApiRouter from "./tasks-api-router";
+import teamMembersApiRouter from "./team-members-api-router";
+import teamsApiRouter from "./teams-api-router";
+import timezonesApiRouter from "./timezones-api-router";
+import todoListApiRouter from "./todo-list-api-router";
+import projectStatusesApiRouter from "./project-statuses-api-router";
+import labelsApiRouter from "./labels-api-router";
+import sharedProjectsApiRouter from "./shared-projects-api-router";
+import resourceAllocationApiRouter from "./resource-allocation-api-router";
+import taskTemplatesApiRouter from "./task-templates-api-router";
+import projectInsightsApiRouter from "./project-insights-api-router";
+import passwordValidator from "../../middlewares/validators/password-validator";
+import adminCenterApiRouter from "./admin-center-api-router";
+import reportingApiRouter from "./reporting-api-router";
+import activityLogsApiRouter from "./activity-logs-api-router";
+import safeControllerFunction from "../../shared/safe-controller-function";
+import projectFoldersApiRouter from "./project-folders-api-router";
+import taskPhasesApiRouter from "./task-phases-api-router";
+import projectCategoriesApiRouter from "./project-categories-api-router";
+import homePageApiRouter from "./home-page-api-router";
+import ganttApiRouter from "./gantt-api-router";
+import projectCommentsApiRouter from "./project-comments-api-router";
+import reportingExportApiRouter from "./reporting-export-api-router";
+import projectHealthsApiRouter from "./project-healths-api-router";
+import ptTasksApiRouter from "./pt-tasks-api-router";
+import projectTemplatesApiRouter from "./project-templates-api";
+import ptTaskPhasesApiRouter from "./pt_task-phases-api-router";
+import ptStatusesApiRouter from "./pt-statuses-api-router";
+import workloadApiRouter from "./gannt-apis/workload-api-router";
+import roadmapApiRouter from "./gannt-apis/roadmap-api-router";
+import scheduleApiRouter from "./gannt-apis/schedule-api-router";
+import scheduleApiV2Router from "./gannt-apis/schedule-api-v2-router";
+import projectManagerApiRouter from "./project-managers-api-router";
+import surveyApiRouter from "./survey-api-router";
+
+import billingApiRouter from "./billing-api-router";
+import taskDependenciesApiRouter from "./task-dependencies-api-router";
+
+import taskRecurringApiRouter from "./task-recurring-api-router";
+
+import customColumnsApiRouter from "./custom-columns-api-router";
+import userActivityLogsApiRouter from "./user-activity-logs-api-router";
+import supportApiRouter from "./support-api-router";
+import accountApiRouter from "./account-api-router";
+
+const api = express.Router();
+
+api.use("/projects", projectsApiRouter);
+api.use("/team-members", teamMembersApiRouter);
+api.use("/job-titles", jobTitlesApiRouter);
+api.use("/clients", clientsApiRouter);
+api.use("/teams", teamsApiRouter);
+api.use("/tasks", tasksApiRouter);
+api.use("/settings", settingsApiRouter);
+api.use("/personal-overview", personalOverviewApiRouter);
+api.use("/statuses", statusesApiRouter);
+api.use("/todo-list", todoListApiRouter);
+api.use("/notifications", notificationsApiRouter);
+api.use("/attachments", attachmentsApiRouter);
+api.use("/sub-tasks", subTasksApiRouter);
+api.use("/project-members", projectMembersApiRouter);
+api.use("/task-time-log", taskWorkLogApiRouter);
+api.use("/task-comments", taskCommentsApiRouter);
+api.use("/timezones", timezonesApiRouter);
+api.use("/project-statuses", projectStatusesApiRouter);
+api.use("/labels", labelsApiRouter);
+api.use("/resource-allocation", resourceAllocationApiRouter);
+api.use("/shared/projects", sharedProjectsApiRouter);
+api.use("/task-templates", taskTemplatesApiRouter);
+api.use("/project-insights", projectInsightsApiRouter);
+api.use("/admin-center", adminCenterApiRouter);
+api.use("/reporting", reportingApiRouter);
+api.use("/activity-logs", activityLogsApiRouter);
+api.use("/projects-folders", projectFoldersApiRouter);
+api.use("/task-phases", taskPhasesApiRouter);
+api.use("/project-categories", projectCategoriesApiRouter);
+api.use("/home", homePageApiRouter);
+api.use("/gantt", ganttApiRouter);
+api.use("/project-comments", projectCommentsApiRouter);
+api.use("/reporting-export", reportingExportApiRouter);
+api.use("/project-healths", projectHealthsApiRouter);
+api.use("/project-templates", projectTemplatesApiRouter);
+api.use("/pt-tasks", ptTasksApiRouter);
+api.use("/pt-task-phases", ptTaskPhasesApiRouter);
+api.use("/pt-statuses", ptStatusesApiRouter);
+api.use("/workload-gannt", workloadApiRouter);
+api.use("/roadmap-gannt", roadmapApiRouter);
+api.use("/schedule-gannt", scheduleApiRouter);
+api.use("/schedule-gannt-v2", scheduleApiV2Router);
+api.use("/project-managers", projectManagerApiRouter);
+api.use("/surveys", surveyApiRouter);
+
+api.get("/overview/:id", safeControllerFunction(OverviewController.getById));
+api.get("/task-priorities", safeControllerFunction(TaskPrioritiesController.get));
+api.post("/change-password", passwordValidator, safeControllerFunction(AuthController.changePassword));
+api.get("/access-controls/roles", safeControllerFunction(AccessControlsController.getRoles));
+api.get("/logs/my-dashboard", safeControllerFunction(LogsController.getActivityLog));
+
+api.use("/billing", billingApiRouter);
+api.use("/task-dependencies", taskDependenciesApiRouter);
+
+api.use("/task-recurring", taskRecurringApiRouter);
 
-const api = express.Router();
-
-api.use("/projects", projectsApiRouter);
-api.use("/team-members", teamMembersApiRouter);
-api.use("/job-titles", jobTitlesApiRouter);
-api.use("/clients", clientsApiRouter);
-api.use("/teams", teamsApiRouter);
-api.use("/tasks", tasksApiRouter);
-api.use("/settings", settingsApiRouter);
-api.use("/personal-overview", personalOverviewApiRouter);
-api.use("/statuses", statusesApiRouter);
-api.use("/todo-list", todoListApiRouter);
-api.use("/notifications", notificationsApiRouter);
-api.use("/attachments", attachmentsApiRouter);
-api.use("/sub-tasks", subTasksApiRouter);
-api.use("/project-members", projectMembersApiRouter);
-api.use("/task-time-log", taskWorkLogApiRouter);
-api.use("/task-comments", taskCommentsApiRouter);
-api.use("/timezones", timezonesApiRouter);
-api.use("/project-statuses", projectStatusesApiRouter);
-api.use("/labels", labelsApiRouter);
-api.use("/resource-allocation", resourceAllocationApiRouter);
-api.use("/shared/projects", sharedProjectsApiRouter);
-api.use("/task-templates", taskTemplatesApiRouter);
-api.use("/project-insights", projectInsightsApiRouter);
-api.use("/admin-center", adminCenterApiRouter);
-api.use("/reporting", reportingApiRouter);
-api.use("/activity-logs", activityLogsApiRouter);
-api.use("/projects-folders", projectFoldersApiRouter);
-api.use("/task-phases", taskPhasesApiRouter);
-api.use("/project-categories", projectCategoriesApiRouter);
-api.use("/home", homePageApiRouter);
-api.use("/gantt", ganttApiRouter);
-api.use("/project-comments", projectCommentsApiRouter);
-api.use("/reporting-export", reportingExportApiRouter);
-api.use("/project-healths", projectHealthsApiRouter);
-api.use("/project-templates", projectTemplatesApiRouter);
-api.use("/pt-tasks", ptTasksApiRouter);
-api.use("/pt-task-phases", ptTaskPhasesApiRouter);
-api.use("/pt-statuses", ptStatusesApiRouter);
-api.use("/workload-gannt", workloadApiRouter);
-api.use("/roadmap-gannt", roadmapApiRouter);
-api.use("/schedule-gannt", scheduleApiRouter);
-api.use("/schedule-gannt-v2", scheduleApiV2Router);
-api.use("/project-managers", projectManagerApiRouter);
-
-api.get("/overview/:id", safeControllerFunction(OverviewController.getById));
-api.get("/task-priorities", safeControllerFunction(TaskPrioritiesController.get));
-api.post("/change-password", passwordValidator, safeControllerFunction(AuthController.changePassword));
-api.get("/access-controls/roles", safeControllerFunction(AccessControlsController.getRoles));
-api.get("/logs/my-dashboard", safeControllerFunction(LogsController.getActivityLog));
-
-api.use("/billing", billingApiRouter);
-api.use("/task-dependencies", taskDependenciesApiRouter);
-
-api.use("/task-recurring", taskRecurringApiRouter);
-
 api.use("/custom-columns", customColumnsApiRouter);
+api.use("/support", supportApiRouter);
+api.use("/account", accountApiRouter);
 
-export default api;
+api.use("/logs", userActivityLogsApiRouter);
+export default api;
diff --git a/worklenz-backend/src/routes/apis/labels-api-router.ts b/worklenz-backend/src/routes/apis/labels-api-router.ts
index 8f6930c22..57b395f72 100644
--- a/worklenz-backend/src/routes/apis/labels-api-router.ts
+++ b/worklenz-backend/src/routes/apis/labels-api-router.ts
@@ -11,6 +11,7 @@ labelsApiRouter.get("/", safeControllerFunction(LabelsController.get));
 labelsApiRouter.get("/tasks/:id", idParamValidator, safeControllerFunction(LabelsController.getByTask));
 labelsApiRouter.get("/project/:id", idParamValidator, safeControllerFunction(LabelsController.getByProject));
 labelsApiRouter.put("/tasks/:id", idParamValidator, teamOwnerOrAdminValidator, safeControllerFunction(LabelsController.updateColor));
+labelsApiRouter.put("/team/:id", idParamValidator, teamOwnerOrAdminValidator, safeControllerFunction(LabelsController.updateLabel));
 labelsApiRouter.delete("/team/:id", idParamValidator, teamOwnerOrAdminValidator, safeControllerFunction(LabelsController.deleteById));
 
 export default labelsApiRouter;
diff --git a/worklenz-backend/src/routes/apis/support-api-router.ts b/worklenz-backend/src/routes/apis/support-api-router.ts
new file mode 100644
index 000000000..50931ce6b
--- /dev/null
+++ b/worklenz-backend/src/routes/apis/support-api-router.ts
@@ -0,0 +1,8 @@
+import express from "express";
+import SupportController from "../../controllers/support-controller";
+
+const supportApiRouter = express.Router();
+
+supportApiRouter.post("/contact", SupportController.contactSupport);
+
+export default supportApiRouter;
\ No newline at end of file
diff --git a/worklenz-backend/src/routes/apis/survey-api-router.ts b/worklenz-backend/src/routes/apis/survey-api-router.ts
new file mode 100644
index 000000000..b068294b4
--- /dev/null
+++ b/worklenz-backend/src/routes/apis/survey-api-router.ts
@@ -0,0 +1,20 @@
+import express from "express";
+import SurveyController from "../../controllers/survey-controller";
+import surveySubmissionValidator from "../../middlewares/validators/survey-submission-validator";
+import safeControllerFunction from "../../shared/safe-controller-function";
+
+const surveyApiRouter = express.Router();
+
+// Get account setup survey with questions
+surveyApiRouter.get("/account-setup", safeControllerFunction(SurveyController.getAccountSetupSurvey));
+
+// Check if user has completed account setup survey
+surveyApiRouter.get("/account-setup/status", safeControllerFunction(SurveyController.checkAccountSetupSurveyStatus));
+
+// Submit survey response
+surveyApiRouter.post("/responses", surveySubmissionValidator, safeControllerFunction(SurveyController.submitSurveyResponse));
+
+// Get user's survey response for a specific survey
+surveyApiRouter.get("/responses/:survey_id", safeControllerFunction(SurveyController.getUserSurveyResponse));
+
+export default surveyApiRouter;
\ No newline at end of file
diff --git a/worklenz-backend/src/routes/apis/user-activity-logs-api-router.ts b/worklenz-backend/src/routes/apis/user-activity-logs-api-router.ts
new file mode 100644
index 000000000..b6f079308
--- /dev/null
+++ b/worklenz-backend/src/routes/apis/user-activity-logs-api-router.ts
@@ -0,0 +1,11 @@
+import express from 'express';
+
+import UserActivityLogsController from '../../controllers/user-activity-logs-controller';
+import safeControllerFunction from "../../shared/safe-controller-function";
+
+const userActivityLogsApiRouter = express.Router();
+
+userActivityLogsApiRouter.get('/user-recent-tasks', safeControllerFunction(UserActivityLogsController.getRecentTasks));
+userActivityLogsApiRouter.get('/user-time-logged-tasks', safeControllerFunction(UserActivityLogsController.getTimeLoggedTasks));
+
+export default userActivityLogsApiRouter;
\ No newline at end of file
diff --git a/worklenz-backend/src/routes/auth/index.ts b/worklenz-backend/src/routes/auth/index.ts
index 1d34fb274..818e5f27b 100644
--- a/worklenz-backend/src/routes/auth/index.ts
+++ b/worklenz-backend/src/routes/auth/index.ts
@@ -8,6 +8,7 @@ import resetEmailValidator from "../../middlewares/validators/reset-email-valida
 import updatePasswordValidator from "../../middlewares/validators/update-password-validator";
 import passwordValidator from "../../middlewares/validators/password-validator";
 import safeControllerFunction from "../../shared/safe-controller-function";
+import FileConstants from "../../shared/file-constants";
 
 const authRouter = express.Router();
 
@@ -55,6 +56,9 @@ authRouter.get("/google/verify", (req, res) => {
   })(req, res);
 });
 
+// Mobile Google Sign-In using Passport strategy
+authRouter.post("/google/mobile", AuthController.googleMobileAuthPassport);
+
 // Passport logout
 authRouter.get("/logout", AuthController.logout);
 
diff --git a/worklenz-backend/src/shared/constants.ts b/worklenz-backend/src/shared/constants.ts
index ffda9e671..61166a2e7 100644
--- a/worklenz-backend/src/shared/constants.ts
+++ b/worklenz-backend/src/shared/constants.ts
@@ -6,7 +6,7 @@ export const DEFAULT_ERROR_MESSAGE = "Unknown error has occurred.";
 export const SessionsStatus = {
   IDLE: "IDLE",
   STARTED: "STARTED",
-  ENDED: "ENDED"
+  ENDED: "ENDED",
 };
 
 export const LOG_DESCRIPTIONS = {
@@ -18,6 +18,33 @@ export const LOG_DESCRIPTIONS = {
   PROJECT_MEMBER_REMOVED: "was removed from the project by",
 };
 
+export const WorklenzColorShades = {
+  "#154c9b": ["#0D2A50", "#112E54", "#153258", "#19365C", "#1D3A60", "#213E64", "#254268", "#29466C", "#2D4A70", "#314E74"],
+  "#3b7ad4": ["#224884", "#26528A", "#2A5C90", "#2E6696", "#32709C", "#367AA2", "#3A84A8", "#3E8EAE", "#4298B4", "#46A2BA"],
+  "#70a6f3": ["#3D5D8A", "#46679E", "#5071B2", "#597BC6", "#6385DA", "#6C8FEE", "#7699F2", "#7FA3F6", "#89ADFA", "#92B7FE"],
+  "#7781ca": ["#42486F", "#4C5283", "#565C97", "#6066AB", "#6A70BF", "#747AD3", "#7E84E7", "#888EFB", "#9298FF", "#9CA2FF"],
+  "#9877ca": ["#542D70", "#6E3A8A", "#8847A4", "#A254BE", "#BC61D8", "#D66EF2", "#E07BFC", "#EA88FF", "#F495FF", "#FEA2FF"],
+  "#c178c9": ["#6A2E6F", "#843B89", "#9E48A3", "#B855BD", "#D262D7", "#EC6FF1", "#F67CFB", "#FF89FF", "#FF96FF", "#FFA3FF"],
+  "#ee87c5": ["#832C6A", "#9D3984", "#B7469E", "#D153B8", "#EB60D2", "#FF6DEC", "#FF7AF6", "#FF87FF", "#FF94FF", "#FFA1FF"],
+  "#ca7881": ["#6F2C3E", "#893958", "#A34672", "#BD538C", "#D760A6", "#F16DC0", "#FB7ADA", "#FF87F4", "#FF94FF", "#FFA1FF"],
+  "#75c9c0": ["#3F6B66", "#497E7A", "#53918E", "#5DA4A2", "#67B7B6", "#71CBCA", "#7BDEDE", "#85F2F2", "#8FFFFF", "#99FFFF"],
+  "#75c997": ["#3F6B54", "#497E6A", "#53917F", "#5DA495", "#67B7AA", "#71CBBF", "#7BDED4", "#85F2E9", "#8FFFFF", "#99FFFF"],
+  "#80ca79": ["#456F3E", "#5A804D", "#6F935C", "#84A66B", "#99B97A", "#AECC89", "#C3DF98", "#D8F2A7", "#EDFFB6", "#FFFFC5"],
+  "#aacb78": ["#5F6F3E", "#7A804D", "#94935C", "#AFA66B", "#CAB97A", "#E5CC89", "#FFDF98", "#FFF2A7", "#FFFFB6", "#FFFFC5"],
+  "#cbbc78": ["#6F5D3E", "#8A704D", "#A4835C", "#BF966B", "#DAA97A", "#F5BC89", "#FFCF98", "#FFE2A7", "#FFF5B6", "#FFFFC5"],
+  "#cb9878": ["#704D3E", "#8B604D", "#A6735C", "#C1866B", "#DC997A", "#F7AC89", "#FFBF98", "#FFD2A7", "#FFE5B6", "#FFF8C5"],
+  "#bb774c": ["#653D27", "#80502C", "#9B6331", "#B67636", "#D1893B", "#EC9C40", "#FFAF45", "#FFC24A", "#FFD54F", "#FFE854"],
+  "#905b39": ["#4D2F1A", "#623C23", "#774A2C", "#8C5735", "#A1643E", "#B67147", "#CB7E50", "#E08B59", "#F59862", "#FFA56B"],
+  "#903737": ["#4D1A1A", "#622323", "#772C2C", "#8C3535", "#A13E3E", "#B64747", "#CB5050", "#E05959", "#F56262", "#FF6B6B"],
+  "#bf4949": ["#661212", "#801B1B", "#992424", "#B32D2D", "#CC3636", "#E63F3F", "#FF4848", "#FF5151", "#FF5A5A", "#FF6363"],
+  "#f37070": ["#853A3A", "#A04D4D", "#BA6060", "#D47373", "#EF8686", "#FF9999", "#FFA3A3", "#FFACAC", "#FFB6B6", "#FFBFBF"],
+  "#ff9c3c": ["#8F5614", "#AA6F1F", "#C48829", "#DFA233", "#F9BB3D", "#FFC04E", "#FFC75F", "#FFCE70", "#FFD581", "#FFDB92"],
+  "#fbc84c": ["#8F6D14", "#AA862F", "#C4A029", "#DFB933", "#F9D23D", "#FFD74E", "#FFDC5F", "#FFE170", "#FFE681", "#FFEB92"],
+  "#cbc8a1": ["#6F6D58", "#8A886F", "#A4A286", "#BFBC9D", "#DAD6B4", "#F5F0CB", "#FFFEDE", "#FFFFF2", "#FFFFCD", "#FFFFCD"],
+  "#a9a9a9": ["#5D5D5D", "#757575", "#8D8D8D", "#A5A5A5", "#BDBDBD", "#D5D5D5", "#EDEDED", "#F5F5F5", "#FFFFFF", "#FFFFFF"],
+  "#767676": ["#404040", "#4D4D4D", "#5A5A5A", "#676767", "#747474", "#818181", "#8E8E8E", "#9B9B9B", "#A8A8A8", "#B5B5B5"]
+} as const;
+
 export const WorklenzColorCodes = [
   "#154c9b",
   "#3b7ad4",
@@ -46,33 +73,33 @@ export const WorklenzColorCodes = [
 ];
 
 export const AvatarNamesMap: { [x: string]: string } = {
-  "A": "#154c9b",
-  "B": "#3b7ad4",
-  "C": "#70a6f3",
-  "D": "#7781ca",
-  "E": "#9877ca",
-  "F": "#c178c9",
-  "G": "#ee87c5",
-  "H": "#ca7881",
-  "I": "#75c9c0",
-  "J": "#75c997",
-  "K": "#80ca79",
-  "L": "#aacb78",
-  "M": "#cbbc78",
-  "N": "#cb9878",
-  "O": "#bb774c",
-  "P": "#905b39",
-  "Q": "#903737",
-  "R": "#bf4949",
-  "S": "#f37070",
-  "T": "#ff9c3c",
-  "U": "#fbc84c",
-  "V": "#cbc8a1",
-  "W": "#a9a9a9",
-  "X": "#767676",
-  "Y": "#cb9878",
-  "Z": "#903737",
-  "+": "#9e9e9e"
+  A: "#154c9b",
+  B: "#3b7ad4",
+  C: "#70a6f3",
+  D: "#7781ca",
+  E: "#9877ca",
+  F: "#c178c9",
+  G: "#ee87c5",
+  H: "#ca7881",
+  I: "#75c9c0",
+  J: "#75c997",
+  K: "#80ca79",
+  L: "#aacb78",
+  M: "#cbbc78",
+  N: "#cb9878",
+  O: "#bb774c",
+  P: "#905b39",
+  Q: "#903737",
+  R: "#bf4949",
+  S: "#f37070",
+  T: "#ff9c3c",
+  U: "#fbc84c",
+  V: "#cbc8a1",
+  W: "#a9a9a9",
+  X: "#767676",
+  Y: "#cb9878",
+  Z: "#903737",
+  "+": "#9e9e9e",
 };
 
 export const NumbersColorMap: { [x: string]: string } = {
@@ -85,19 +112,19 @@ export const NumbersColorMap: { [x: string]: string } = {
   "6": "#ee87c5",
   "7": "#ca7881",
   "8": "#75c9c0",
-  "9": "#75c997"
+  "9": "#75c997",
 };
 
-export const PriorityColorCodes: { [x: number]: string; } = {
+export const PriorityColorCodes: { [x: number]: string } = {
   0: "#2E8B57",
   1: "#DAA520",
-  2: "#CD5C5C"
+  2: "#CD5C5C",
 };
 
-export const PriorityColorCodesDark: { [x: number]: string; } = {
+export const PriorityColorCodesDark: { [x: number]: string } = {
   0: "#3CB371",
   1: "#B8860B",
-  2: "#F08080"
+  2: "#F08080",
 };
 
 export const TASK_STATUS_TODO_COLOR = "#a9a9a9";
@@ -113,7 +140,6 @@ export const TASK_DUE_UPCOMING_COLOR = "#70a6f3";
 export const TASK_DUE_OVERDUE_COLOR = "#f37070";
 export const TASK_DUE_NO_DUE_COLOR = "#a9a9a9";
 
-
 export const DEFAULT_PAGE_SIZE = 20;
 
 // S3 Credentials
@@ -125,7 +151,8 @@ export const S3_SECRET_ACCESS_KEY = process.env.S3_SECRET_ACCESS_KEY || "";
 
 // Azure Blob Storage Credentials
 export const STORAGE_PROVIDER = process.env.STORAGE_PROVIDER || "s3";
-export const AZURE_STORAGE_ACCOUNT_NAME = process.env.AZURE_STORAGE_ACCOUNT_NAME;
+export const AZURE_STORAGE_ACCOUNT_NAME =
+  process.env.AZURE_STORAGE_ACCOUNT_NAME;
 export const AZURE_STORAGE_CONTAINER = process.env.AZURE_STORAGE_CONTAINER;
 export const AZURE_STORAGE_ACCOUNT_KEY = process.env.AZURE_STORAGE_ACCOUNT_KEY;
 export const AZURE_STORAGE_URL = process.env.AZURE_STORAGE_URL;
@@ -136,7 +163,7 @@ export function getStorageUrl() {
       console.warn("AZURE_STORAGE_URL is not defined, falling back to S3_URL");
       return S3_URL;
     }
-    
+
     // Return just the base Azure Blob Storage URL
     // AZURE_STORAGE_URL should be in the format: https://storageaccountname.blob.core.windows.net
     return `${AZURE_STORAGE_URL}/${AZURE_STORAGE_CONTAINER}`;
@@ -150,16 +177,23 @@ export const TEAM_MEMBER_TREE_MAP_COLOR_ALPHA = "40";
 
 // LICENSING SERVER URLS
 export const LOCAL_URL = "http://localhost:3001";
-export const UAT_SERVER_URL = process.env.UAT_SERVER_URL || "https://your-uat-server-url";
-export const DEV_SERVER_URL = process.env.DEV_SERVER_URL || "https://your-dev-server-url";
-export const PRODUCTION_SERVER_URL = process.env.PRODUCTION_SERVER_URL || "https://your-production-server-url";
+export const UAT_SERVER_URL =
+  process.env.UAT_SERVER_URL || "https://your-uat-server-url";
+export const DEV_SERVER_URL =
+  process.env.DEV_SERVER_URL || "https://your-dev-server-url";
+export const PRODUCTION_SERVER_URL =
+  process.env.PRODUCTION_SERVER_URL || "https://your-production-server-url";
 
 // *Sync with the client
-export const PASSWORD_POLICY = "Minimum of 8 characters, with upper and lowercase and a number and a symbol.";
+export const PASSWORD_POLICY =
+  "Minimum of 8 characters, with upper and lowercase and a number and a symbol.";
 
 // paddle status to exclude
 export const statusExclude = ["past_due", "paused", "deleted"];
 
+// Trial user team member limit
+export const TRIAL_MEMBER_LIMIT = 10;
+
 export const HTML_TAG_REGEXP = /<\/?[^>]+>/gi;
 
 export const UNMAPPED = "Unmapped";
@@ -169,5 +203,5 @@ export const DATE_RANGES = {
   LAST_WEEK: "LAST_WEEK",
   LAST_MONTH: "LAST_MONTH",
   LAST_QUARTER: "LAST_QUARTER",
-  ALL_TIME: "ALL_TIME"
+  ALL_TIME: "ALL_TIME",
 };
diff --git a/worklenz-backend/src/socket.io/commands/on-quick-assign-or-remove.ts b/worklenz-backend/src/socket.io/commands/on-quick-assign-or-remove.ts
index 4551bd721..6c6415306 100644
--- a/worklenz-backend/src/socket.io/commands/on-quick-assign-or-remove.ts
+++ b/worklenz-backend/src/socket.io/commands/on-quick-assign-or-remove.ts
@@ -75,7 +75,7 @@ export async function on_quick_assign_or_remove(_io: Server, socket: Socket, dat
       assign_type: type
     });
 
-    if (userId !== assignment.user_id) {
+    if (assignment && userId !== assignment.user_id) {
       NotificationsService.createTaskUpdate(
         type,
         userId as string,
@@ -109,6 +109,11 @@ export async function assignMemberIfNot(taskId: string, userId: string, teamId:
     const result = await db.query(q, [taskId, userId, teamId]);
     const [data] = result.rows;
 
+    if (!data) {
+      log_error(new Error(`No team member found for userId: ${userId}, teamId: ${teamId}`));
+      return;
+    }
+
     const body = {
       team_member_id: data.team_member_id,
       project_id: data.project_id,
diff --git a/worklenz-frontend/.env.development b/worklenz-frontend/.env.development
index 21605cdfc..fce709527 100644
--- a/worklenz-frontend/.env.development
+++ b/worklenz-frontend/.env.development
@@ -15,4 +15,8 @@ VITE_RECAPTCHA_SITE_KEY=recaptcha-site-key
 VITE_WORKLENZ_SESSION_ID=worklenz-session-id
 
 # Google Login
-VITE_ENABLE_GOOGLE_LOGIN=false
\ No newline at end of file
+VITE_ENABLE_GOOGLE_LOGIN=false
+
+# Survey Modal Configuration
+# Set to true to enable the survey modal, false to disable it
+VITE_ENABLE_SURVEY_MODAL=false
\ No newline at end of file
diff --git a/worklenz-frontend/.env.example b/worklenz-frontend/.env.example
new file mode 100644
index 000000000..fce709527
--- /dev/null
+++ b/worklenz-frontend/.env.example
@@ -0,0 +1,22 @@
+VITE_API_URL=http://localhost:3000
+VITE_SOCKET_URL=ws://localhost:3000
+
+VITE_APP_TITLE=Worklenz
+VITE_APP_ENV=development
+
+# Mixpanel
+VITE_MIXPANEL_TOKEN=mixpanel-token
+
+# Recaptcha
+VITE_ENABLE_RECAPTCHA=false
+VITE_RECAPTCHA_SITE_KEY=recaptcha-site-key
+
+# Session ID
+VITE_WORKLENZ_SESSION_ID=worklenz-session-id
+
+# Google Login
+VITE_ENABLE_GOOGLE_LOGIN=false
+
+# Survey Modal Configuration
+# Set to true to enable the survey modal, false to disable it
+VITE_ENABLE_SURVEY_MODAL=false
\ No newline at end of file
diff --git a/worklenz-frontend/package-lock.json b/worklenz-frontend/package-lock.json
index 721124f09..bf437005e 100644
--- a/worklenz-frontend/package-lock.json
+++ b/worklenz-frontend/package-lock.json
@@ -73,7 +73,10 @@
         "@types/react-dom": "19.0.0",
         "@types/react-window": "^1.8.8",
         "@vitejs/plugin-react": "^4.3.4",
+        "@vitest/coverage-v8": "^3.2.4",
+        "@vitest/ui": "^3.2.4",
         "autoprefixer": "^10.4.21",
+        "jsdom": "^26.1.0",
         "postcss": "^8.5.2",
         "prettier-plugin-tailwindcss": "^0.6.13",
         "rollup": "^4.40.2",
@@ -729,8 +732,6 @@
       "integrity": "sha512-K1A6z8tS3XsmCMM86xoWdn7Fkdn9m6RSVtocUrJYIwZnFVkng/PvkEoWtOWmP+Scc6saYWHWZYbndEEXxl24jw==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
-      "peer": true,
       "dependencies": {
         "@csstools/css-calc": "^2.1.3",
         "@csstools/css-color-parser": "^3.0.9",
@@ -744,9 +745,7 @@
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
       "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
       "dev": true,
-      "license": "ISC",
-      "optional": true,
-      "peer": true
+      "license": "ISC"
     },
     "node_modules/@babel/code-frame": {
       "version": "7.27.1",
@@ -1027,6 +1026,16 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@bcoe/v8-coverage": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-1.0.2.tgz",
+      "integrity": "sha512-6zABk/ECA/QYSCQ1NGiVwwbQerUCZ+TQbp64Q3AgmfNvurHH0j8TtXa1qbShXA6qqkpAj4V5W8pP6mLe1mcMqA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/@chenshuai2144/sketch-color": {
       "version": "1.0.9",
       "resolved": "https://registry.npmjs.org/@chenshuai2144/sketch-color/-/sketch-color-1.0.9.tgz",
@@ -1056,8 +1065,6 @@
         }
       ],
       "license": "MIT-0",
-      "optional": true,
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -1078,8 +1085,6 @@
         }
       ],
       "license": "MIT",
-      "optional": true,
-      "peer": true,
       "engines": {
         "node": ">=18"
       },
@@ -1104,8 +1109,6 @@
         }
       ],
       "license": "MIT",
-      "optional": true,
-      "peer": true,
       "dependencies": {
         "@csstools/color-helpers": "^5.0.2",
         "@csstools/css-calc": "^2.1.4"
@@ -1134,8 +1137,6 @@
         }
       ],
       "license": "MIT",
-      "optional": true,
-      "peer": true,
       "engines": {
         "node": ">=18"
       },
@@ -1159,8 +1160,6 @@
         }
       ],
       "license": "MIT",
-      "optional": true,
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -1836,6 +1835,16 @@
         "node": ">=12"
       }
     },
+    "node_modules/@istanbuljs/schema": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@istanbuljs/schema/-/schema-0.1.3.tgz",
+      "integrity": "sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.8",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz",
@@ -1952,6 +1961,13 @@
         "node": ">=14"
       }
     },
+    "node_modules/@polka/url": {
+      "version": "1.0.0-next.29",
+      "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.29.tgz",
+      "integrity": "sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@rc-component/async-validator": {
       "version": "5.0.4",
       "resolved": "https://registry.npmjs.org/@rc-component/async-validator/-/async-validator-5.0.4.tgz",
@@ -2697,6 +2713,16 @@
         "@babel/types": "^7.20.7"
       }
     },
+    "node_modules/@types/chai": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/@types/chai/-/chai-5.2.2.tgz",
+      "integrity": "sha512-8kB30R7Hwqf40JPiKhVzodJs2Qc1ZJ5zuT3uzw5Hq/dhNCl3G3l83jfpdI1e20BP348+fV7VIL/+FxaXkqBmWg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/deep-eql": "*"
+      }
+    },
     "node_modules/@types/chart.js": {
       "version": "2.9.41",
       "resolved": "https://registry.npmjs.org/@types/chart.js/-/chart.js-2.9.41.tgz",
@@ -2713,6 +2739,13 @@
       "integrity": "sha512-nl09VhutdjINdWyXxHWN/w9zlNCfr60JUqJbd24YXUuCwgeL0TpFSdElCwb6cxfB6ybE19Gjj4g0jsgkXxKv1Q==",
       "license": "MIT"
     },
+    "node_modules/@types/deep-eql": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@types/deep-eql/-/deep-eql-4.0.2.tgz",
+      "integrity": "sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/dompurify": {
       "version": "3.0.5",
       "resolved": "https://registry.npmjs.org/@types/dompurify/-/dompurify-3.0.5.tgz",
@@ -2865,15 +2898,50 @@
         "vite": "^4.2.0 || ^5.0.0 || ^6.0.0"
       }
     },
+    "node_modules/@vitest/coverage-v8": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/@vitest/coverage-v8/-/coverage-v8-3.2.4.tgz",
+      "integrity": "sha512-EyF9SXU6kS5Ku/U82E259WSnvg6c8KTjppUncuNdm5QHpe17mwREHnjDzozC8x9MZ0xfBUFSaLkRv4TMA75ALQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@ampproject/remapping": "^2.3.0",
+        "@bcoe/v8-coverage": "^1.0.2",
+        "ast-v8-to-istanbul": "^0.3.3",
+        "debug": "^4.4.1",
+        "istanbul-lib-coverage": "^3.2.2",
+        "istanbul-lib-report": "^3.0.1",
+        "istanbul-lib-source-maps": "^5.0.6",
+        "istanbul-reports": "^3.1.7",
+        "magic-string": "^0.30.17",
+        "magicast": "^0.3.5",
+        "std-env": "^3.9.0",
+        "test-exclude": "^7.0.1",
+        "tinyrainbow": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "@vitest/browser": "3.2.4",
+        "vitest": "3.2.4"
+      },
+      "peerDependenciesMeta": {
+        "@vitest/browser": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@vitest/expect": {
-      "version": "3.1.4",
-      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-3.1.4.tgz",
-      "integrity": "sha512-xkD/ljeliyaClDYqHPNCiJ0plY5YIcM0OlRiZizLhlPmpXWpxnGMyTZXOHFhFeG7w9P5PBeL4IdtJ/HeQwTbQA==",
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-3.2.4.tgz",
+      "integrity": "sha512-Io0yyORnB6sikFlt8QW5K7slY4OjqNX9jmJQ02QDda8lyM6B5oNgVWoSoKPac8/kgnCUzuHQKrSLtu/uOqqrig==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vitest/spy": "3.1.4",
-        "@vitest/utils": "3.1.4",
+        "@types/chai": "^5.2.2",
+        "@vitest/spy": "3.2.4",
+        "@vitest/utils": "3.2.4",
         "chai": "^5.2.0",
         "tinyrainbow": "^2.0.0"
       },
@@ -2882,13 +2950,13 @@
       }
     },
     "node_modules/@vitest/mocker": {
-      "version": "3.1.4",
-      "resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-3.1.4.tgz",
-      "integrity": "sha512-8IJ3CvwtSw/EFXqWFL8aCMu+YyYXG2WUSrQbViOZkWTKTVicVwZ/YiEZDSqD00kX+v/+W+OnxhNWoeVKorHygA==",
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-3.2.4.tgz",
+      "integrity": "sha512-46ryTE9RZO/rfDd7pEqFl7etuyzekzEhUbTW3BvmeO/BcCMEgq59BKhek3dXDWgAj4oMK6OZi+vRr1wPW6qjEQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vitest/spy": "3.1.4",
+        "@vitest/spy": "3.2.4",
         "estree-walker": "^3.0.3",
         "magic-string": "^0.30.17"
       },
@@ -2897,7 +2965,7 @@
       },
       "peerDependencies": {
         "msw": "^2.4.9",
-        "vite": "^5.0.0 || ^6.0.0"
+        "vite": "^5.0.0 || ^6.0.0 || ^7.0.0-0"
       },
       "peerDependenciesMeta": {
         "msw": {
@@ -2909,9 +2977,9 @@
       }
     },
     "node_modules/@vitest/pretty-format": {
-      "version": "3.1.4",
-      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-3.1.4.tgz",
-      "integrity": "sha512-cqv9H9GvAEoTaoq+cYqUTCGscUjKqlJZC7PRwY5FMySVj5J+xOm1KQcCiYHJOEzOKRUhLH4R2pTwvFlWCEScsg==",
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-3.2.4.tgz",
+      "integrity": "sha512-IVNZik8IVRJRTr9fxlitMKeJeXFFFN0JaB9PHPGQ8NKQbGpfjlTx9zO4RefN8gp7eqjNy8nyK3NZmBzOPeIxtA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -2922,27 +2990,28 @@
       }
     },
     "node_modules/@vitest/runner": {
-      "version": "3.1.4",
-      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-3.1.4.tgz",
-      "integrity": "sha512-djTeF1/vt985I/wpKVFBMWUlk/I7mb5hmD5oP8K9ACRmVXgKTae3TUOtXAEBfslNKPzUQvnKhNd34nnRSYgLNQ==",
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-3.2.4.tgz",
+      "integrity": "sha512-oukfKT9Mk41LreEW09vt45f8wx7DordoWUZMYdY/cyAk7w5TWkTRCNZYF7sX7n2wB7jyGAl74OxgwhPgKaqDMQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vitest/utils": "3.1.4",
-        "pathe": "^2.0.3"
+        "@vitest/utils": "3.2.4",
+        "pathe": "^2.0.3",
+        "strip-literal": "^3.0.0"
       },
       "funding": {
         "url": "https://opencollective.com/vitest"
       }
     },
     "node_modules/@vitest/snapshot": {
-      "version": "3.1.4",
-      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-3.1.4.tgz",
-      "integrity": "sha512-JPHf68DvuO7vilmvwdPr9TS0SuuIzHvxeaCkxYcCD4jTk67XwL45ZhEHFKIuCm8CYstgI6LZ4XbwD6ANrwMpFg==",
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-3.2.4.tgz",
+      "integrity": "sha512-dEYtS7qQP2CjU27QBC5oUOxLE/v5eLkGqPE0ZKEIDGMs4vKWe7IjgLOeauHsR0D5YuuycGRO5oSRXnwnmA78fQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vitest/pretty-format": "3.1.4",
+        "@vitest/pretty-format": "3.2.4",
         "magic-string": "^0.30.17",
         "pathe": "^2.0.3"
       },
@@ -2951,27 +3020,49 @@
       }
     },
     "node_modules/@vitest/spy": {
-      "version": "3.1.4",
-      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-3.1.4.tgz",
-      "integrity": "sha512-Xg1bXhu+vtPXIodYN369M86K8shGLouNjoVI78g8iAq2rFoHFdajNvJJ5A/9bPMFcfQqdaCpOgWKEoMQg/s0Yg==",
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-3.2.4.tgz",
+      "integrity": "sha512-vAfasCOe6AIK70iP5UD11Ac4siNUNJ9i/9PZ3NKx07sG6sUxeag1LWdNrMWeKKYBLlzuK+Gn65Yd5nyL6ds+nw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tinyspy": "^4.0.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/ui": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/@vitest/ui/-/ui-3.2.4.tgz",
+      "integrity": "sha512-hGISOaP18plkzbWEcP/QvtRW1xDXF2+96HbEX6byqQhAUbiS5oH6/9JwW+QsQCIYON2bI6QZBF+2PvOmrRZ9wA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "tinyspy": "^3.0.2"
+        "@vitest/utils": "3.2.4",
+        "fflate": "^0.8.2",
+        "flatted": "^3.3.3",
+        "pathe": "^2.0.3",
+        "sirv": "^3.0.1",
+        "tinyglobby": "^0.2.14",
+        "tinyrainbow": "^2.0.0"
       },
       "funding": {
         "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "vitest": "3.2.4"
       }
     },
     "node_modules/@vitest/utils": {
-      "version": "3.1.4",
-      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-3.1.4.tgz",
-      "integrity": "sha512-yriMuO1cfFhmiGc8ataN51+9ooHRuURdfAZfwFd3usWynjzpLslZdYnRegTv32qdgtJTsj15FoeZe2g15fY1gg==",
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-3.2.4.tgz",
+      "integrity": "sha512-fB2V0JFrQSMsCo9HiSq3Ezpdv4iYaXRG1Sx8edX3MwxfyNn83mKiGzOcH+Fkxt4MHxr3y42fQi1oeAInqgX2QA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vitest/pretty-format": "3.1.4",
-        "loupe": "^3.1.3",
+        "@vitest/pretty-format": "3.2.4",
+        "loupe": "^3.1.4",
         "tinyrainbow": "^2.0.0"
       },
       "funding": {
@@ -3012,8 +3103,6 @@
       "integrity": "sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
-      "peer": true,
       "engines": {
         "node": ">= 14"
       }
@@ -3172,6 +3261,25 @@
         "node": ">=12"
       }
     },
+    "node_modules/ast-v8-to-istanbul": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/ast-v8-to-istanbul/-/ast-v8-to-istanbul-0.3.3.tgz",
+      "integrity": "sha512-MuXMrSLVVoA6sYN/6Hke18vMzrT4TZNbZIj/hvh0fnYFpO+/kFXcLIaiPwXXWaQUPg4yJD8fj+lfJ7/1EBconw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/trace-mapping": "^0.3.25",
+        "estree-walker": "^3.0.3",
+        "js-tokens": "^9.0.1"
+      }
+    },
+    "node_modules/ast-v8-to-istanbul/node_modules/js-tokens": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-9.0.1.tgz",
+      "integrity": "sha512-mxa9E9ITFOt0ban3j6L5MpjwegGz6lBQmM1IJkWeBZGcMxto50+eWdjC/52xDbS2vy0k7vIMK0Fe2wfL9OQSpQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/async-validator": {
       "version": "1.11.5",
       "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-1.11.5.tgz",
@@ -3466,9 +3574,9 @@
       }
     },
     "node_modules/chai": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/chai/-/chai-5.2.0.tgz",
-      "integrity": "sha512-mCuXncKXk5iCLhfhwTc0izo0gtEmpz5CtG2y8GiOINBlMVS6v8TMRc5TaLWKS6692m9+dVVfzgeVxR5UxWHTYw==",
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/chai/-/chai-5.2.1.tgz",
+      "integrity": "sha512-5nFxhUrX0PqtyogoYOA8IPswy5sZFTOsBFl/9bNsmDLgsxYTzSZQJDPppDnZPTQbzSEm0hqGjWPzRemQCYbD6A==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -3479,7 +3587,7 @@
         "pathval": "^2.0.0"
       },
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
     "node_modules/chalk": {
@@ -3755,8 +3863,6 @@
       "integrity": "sha512-2z+rWdzbbSZv6/rhtvzvqeZQHrBaqgogqt85sqFNbabZOuFbCVFb8kPeEtZjiKkbrm395irpNKiYeFeLiQnFPg==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
-      "peer": true,
       "dependencies": {
         "@asamuzakjp/css-color": "^3.2.0",
         "rrweb-cssom": "^0.8.0"
@@ -3777,8 +3883,6 @@
       "integrity": "sha512-ZYP5VBHshaDAiVZxjbRVcFJpc+4xGgT0bK3vzy1HLN8jTO975HEbuYzZJcHoQEY5K1a0z8YayJkyVETa08eNTg==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
-      "peer": true,
       "dependencies": {
         "whatwg-mimetype": "^4.0.0",
         "whatwg-url": "^14.0.0"
@@ -3793,8 +3897,6 @@
       "integrity": "sha512-hdF5ZgjTqgAntKkklYw0R03MG2x/bSzTtkxmIRw/sTNV8YXsCJ1tfLAX23lhxhHJlEf3CRCOCGGWw3vI3GaSPw==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
-      "peer": true,
       "dependencies": {
         "punycode": "^2.3.1"
       },
@@ -3808,8 +3910,6 @@
       "integrity": "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==",
       "dev": true,
       "license": "BSD-2-Clause",
-      "optional": true,
-      "peer": true,
       "engines": {
         "node": ">=12"
       }
@@ -3820,8 +3920,6 @@
       "integrity": "sha512-De72GdQZzNTUBBChsXueQUnPKDkg/5A5zp7pFDuQAj5UFoENpiACU0wlCvzpAGnTkj++ihpKwKyYewn/XNUbKw==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
-      "peer": true,
       "dependencies": {
         "tr46": "^5.1.0",
         "webidl-conversions": "^7.0.0"
@@ -3868,9 +3966,7 @@
       "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.6.0.tgz",
       "integrity": "sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==",
       "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/deep-eql": {
       "version": "5.0.2",
@@ -4045,8 +4141,6 @@
       "integrity": "sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==",
       "dev": true,
       "license": "BSD-2-Clause",
-      "optional": true,
-      "peer": true,
       "engines": {
         "node": ">=0.12"
       },
@@ -4259,6 +4353,13 @@
       "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==",
       "license": "MIT"
     },
+    "node_modules/flatted": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.3.tgz",
+      "integrity": "sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/follow-redirects": {
       "version": "1.15.9",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz",
@@ -4530,8 +4631,6 @@
       "integrity": "sha512-Y22oTqIU4uuPgEemfz7NDJz6OeKf12Lsu+QC+s3BVpda64lTiMYCyGwg5ki4vFxkMwQdeZDl2adZoqUgdFuTgQ==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
-      "peer": true,
       "dependencies": {
         "whatwg-encoding": "^3.1.1"
       },
@@ -4539,6 +4638,13 @@
         "node": ">=18"
       }
     },
+    "node_modules/html-escaper": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz",
+      "integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/html-parse-stringify": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz",
@@ -4567,8 +4673,6 @@
       "integrity": "sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
-      "peer": true,
       "dependencies": {
         "agent-base": "^7.1.0",
         "debug": "^4.3.4"
@@ -4583,8 +4687,6 @@
       "integrity": "sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
-      "peer": true,
       "dependencies": {
         "agent-base": "^7.1.2",
         "debug": "4"
@@ -4655,8 +4757,6 @@
       "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
-      "peer": true,
       "dependencies": {
         "safer-buffer": ">= 2.1.2 < 3.0.0"
       },
@@ -4777,9 +4877,7 @@
       "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
       "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==",
       "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/isexe": {
       "version": "2.0.0",
@@ -4787,6 +4885,60 @@
       "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
       "license": "ISC"
     },
+    "node_modules/istanbul-lib-coverage": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.2.tgz",
+      "integrity": "sha512-O8dpsF+r0WV/8MNRKfnmrtCWhuKjxrq2w+jpzBL5UZKTi2LeVWnWOmWRxFlesJONmc+wLAGvKQZEOanko0LFTg==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/istanbul-lib-report": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-report/-/istanbul-lib-report-3.0.1.tgz",
+      "integrity": "sha512-GCfE1mtsHGOELCU8e/Z7YWzpmybrx/+dSTfLrvY8qRmaY6zXTKWn6WQIjaAFw069icm6GVMNkgu0NzI4iPZUNw==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "istanbul-lib-coverage": "^3.0.0",
+        "make-dir": "^4.0.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/istanbul-lib-source-maps": {
+      "version": "5.0.6",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-source-maps/-/istanbul-lib-source-maps-5.0.6.tgz",
+      "integrity": "sha512-yg2d+Em4KizZC5niWhQaIomgf5WlL4vOOjZ5xGCmF8SnPE/mDWWXgvRExdcpCgh9lLRRa1/fSYp2ymmbJ1pI+A==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@jridgewell/trace-mapping": "^0.3.23",
+        "debug": "^4.1.1",
+        "istanbul-lib-coverage": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/istanbul-reports": {
+      "version": "3.1.7",
+      "resolved": "https://registry.npmjs.org/istanbul-reports/-/istanbul-reports-3.1.7.tgz",
+      "integrity": "sha512-BewmUXImeuRk2YY0PVbxgKAysvhRPUQE0h5QRM++nVWyubKGV0l8qQ5op8+B2DOmwSe63Jivj0BjkPQVf8fP5g==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "html-escaper": "^2.0.0",
+        "istanbul-lib-report": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/jackspeak": {
       "version": "3.4.3",
       "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
@@ -4868,8 +5020,6 @@
       "integrity": "sha512-Cvc9WUhxSMEo4McES3P7oK3QaXldCfNWp7pl2NNeiIFlCoLr3kfq9kb1fxftiwk1FLV7CvpvDfonxtzUDeSOPg==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
-      "peer": true,
       "dependencies": {
         "cssstyle": "^4.2.1",
         "data-urls": "^5.0.0",
@@ -4910,8 +5060,6 @@
       "integrity": "sha512-hdF5ZgjTqgAntKkklYw0R03MG2x/bSzTtkxmIRw/sTNV8YXsCJ1tfLAX23lhxhHJlEf3CRCOCGGWw3vI3GaSPw==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
-      "peer": true,
       "dependencies": {
         "punycode": "^2.3.1"
       },
@@ -4925,8 +5073,6 @@
       "integrity": "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==",
       "dev": true,
       "license": "BSD-2-Clause",
-      "optional": true,
-      "peer": true,
       "engines": {
         "node": ">=12"
       }
@@ -4937,8 +5083,6 @@
       "integrity": "sha512-De72GdQZzNTUBBChsXueQUnPKDkg/5A5zp7pFDuQAj5UFoENpiACU0wlCvzpAGnTkj++ihpKwKyYewn/XNUbKw==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
-      "peer": true,
       "dependencies": {
         "tr46": "^5.1.0",
         "webidl-conversions": "^7.0.0"
@@ -4953,8 +5097,6 @@
       "integrity": "sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
-      "peer": true,
       "engines": {
         "node": ">=10.0.0"
       },
@@ -5335,9 +5477,9 @@
       }
     },
     "node_modules/loupe": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/loupe/-/loupe-3.1.3.tgz",
-      "integrity": "sha512-kkIp7XSkP78ZxJEsSxW3712C6teJVoeHHwgo9zJ380de7IYyJ2ISlxojcH2pC5OFLewESmnRi/+XCDIEEVyoug==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/loupe/-/loupe-3.2.0.tgz",
+      "integrity": "sha512-2NCfZcT5VGVNX9mSZIxLRkEAegDGBpuQZBy13desuHeVORmBDyAET4TkJr4SjqQy3A8JDofMN6LpkK8Xcm/dlw==",
       "dev": true,
       "license": "MIT"
     },
@@ -5372,6 +5514,47 @@
         "@jridgewell/sourcemap-codec": "^1.5.0"
       }
     },
+    "node_modules/magicast": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/magicast/-/magicast-0.3.5.tgz",
+      "integrity": "sha512-L0WhttDl+2BOsybvEOLK7fW3UA0OQ0IQ2d6Zl2x/a6vVRs3bAY0ECOSHHeL5jD+SbOpOCUEi0y1DgHEn9Qn1AQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.25.4",
+        "@babel/types": "^7.25.4",
+        "source-map-js": "^1.2.0"
+      }
+    },
+    "node_modules/make-dir": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-4.0.0.tgz",
+      "integrity": "sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "semver": "^7.5.3"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/make-dir/node_modules/semver": {
+      "version": "7.7.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
+      "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/matchmediaquery": {
       "version": "0.4.2",
       "resolved": "https://registry.npmjs.org/matchmediaquery/-/matchmediaquery-0.4.2.tgz",
@@ -5507,6 +5690,16 @@
         "node": "*"
       }
     },
+    "node_modules/mrmime": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.1.tgz",
+      "integrity": "sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -5593,9 +5786,7 @@
       "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.20.tgz",
       "integrity": "sha512-/ieB+mDe4MrrKMT8z+mQL8klXydZWGR5Dowt4RAGKbJ3kIGEx3X4ljUo+6V73IXtUPWgfOlU5B9MlGxFO5T+cA==",
       "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/object-assign": {
       "version": "4.1.1",
@@ -5657,8 +5848,6 @@
       "integrity": "sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
-      "peer": true,
       "dependencies": {
         "entities": "^6.0.0"
       },
@@ -5729,9 +5918,9 @@
       "license": "MIT"
     },
     "node_modules/pathval": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/pathval/-/pathval-2.0.0.tgz",
-      "integrity": "sha512-vE7JKRyES09KiunauX7nd2Q9/L7lhok4smP9RZTDeD4MVs72Dp2qNFVz39Nz5a0FVEW0BJR6C0DYrq6unoziZA==",
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/pathval/-/pathval-2.0.1.tgz",
+      "integrity": "sha512-//nshmD55c46FuFw26xV/xFAaB5HF9Xdap7HJBBnrKdAd6/GxDBaNA1870O79+9ueg61cZLSVc+OaFlfmObYVQ==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -6124,8 +6313,6 @@
       "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
-      "peer": true,
       "engines": {
         "node": ">=6"
       }
@@ -7271,9 +7458,7 @@
       "resolved": "https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.8.0.tgz",
       "integrity": "sha512-guoltQEx+9aMf2gDZ0s62EcV8lsXR+0w8915TC3ITdn2YueuNjdAYh/levpU9nFaoChh9RUS5ZdQMrKfVEN9tw==",
       "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/rrweb-snapshot": {
       "version": "2.0.0-alpha.18",
@@ -7321,9 +7506,7 @@
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/saxes": {
       "version": "6.0.0",
@@ -7331,8 +7514,6 @@
       "integrity": "sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==",
       "dev": true,
       "license": "ISC",
-      "optional": true,
-      "peer": true,
       "dependencies": {
         "xmlchars": "^2.2.0"
       },
@@ -7420,6 +7601,21 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/sirv": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/sirv/-/sirv-3.0.1.tgz",
+      "integrity": "sha512-FoqMu0NCGBLCcAkS1qA+XJIQTR6/JHfQXl+uGteNCQ76T91DMUjPa9xfmeqMY3z80nLSg9yQmNjK0Px6RWsH/A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@polka/url": "^1.0.0-next.24",
+        "mrmime": "^2.0.0",
+        "totalist": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/socket.io-client": {
       "version": "4.8.1",
       "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.8.1.tgz",
@@ -7654,6 +7850,26 @@
         "node": ">=8"
       }
     },
+    "node_modules/strip-literal": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/strip-literal/-/strip-literal-3.0.0.tgz",
+      "integrity": "sha512-TcccoMhJOM3OebGhSBEmp3UZ2SfDMZUEBdRA/9ynfLi8yYajyWX3JiXArcJt4Umh4vISpspkQIY8ZZoCqjbviA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "js-tokens": "^9.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/strip-literal/node_modules/js-tokens": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-9.0.1.tgz",
+      "integrity": "sha512-mxa9E9ITFOt0ban3j6L5MpjwegGz6lBQmM1IJkWeBZGcMxto50+eWdjC/52xDbS2vy0k7vIMK0Fe2wfL9OQSpQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/stylis": {
       "version": "4.3.6",
       "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.6.tgz",
@@ -7735,9 +7951,7 @@
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
       "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
       "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/tailwindcss": {
       "version": "3.4.17",
@@ -7811,6 +8025,21 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/test-exclude": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/test-exclude/-/test-exclude-7.0.1.tgz",
+      "integrity": "sha512-pFYqmTw68LXVjeWJMST4+borgQP2AyMNbg1BpZh9LbyhUeNkeaPF9gzfPGUAnSMV3qPYdWUwDIjjCLiSDOl7vg==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "@istanbuljs/schema": "^0.1.2",
+        "glob": "^10.4.1",
+        "minimatch": "^9.0.4"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/text-segmentation": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
@@ -7922,9 +8151,9 @@
       "license": "GPL-2.0-or-later"
     },
     "node_modules/tinypool": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/tinypool/-/tinypool-1.0.2.tgz",
-      "integrity": "sha512-al6n+QEANGFOMf/dmUMsuS5/r9B06uwlyNjZZql/zv8J7ybHCgoihBNORZCY2mzUuAnomQa2JdhyHKzZxPCrFA==",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/tinypool/-/tinypool-1.1.1.tgz",
+      "integrity": "sha512-Zba82s87IFq9A9XmjiX5uZA/ARWDrB03OHlq+Vw1fSdt0I+4/Kutwy8BP4Y/y/aORMo61FQ0vIb5j44vSo5Pkg==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -7942,9 +8171,9 @@
       }
     },
     "node_modules/tinyspy": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/tinyspy/-/tinyspy-3.0.2.tgz",
-      "integrity": "sha512-n1cw8k1k0x4pgA2+9XrOkFydTerNcJ1zWCO5Nn9scWHTD+5tp8dghT2x1uduQePZTZgd3Tupf+x9BxJjeJi77Q==",
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/tinyspy/-/tinyspy-4.0.3.tgz",
+      "integrity": "sha512-t2T/WLB2WRgZ9EpE4jgPJ9w+i66UZfDc8wHh0xrwiRNN+UwH98GIJkTeZqX9rg0i0ptwzqW+uYeIF0T4F8LR7A==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -7957,8 +8186,6 @@
       "integrity": "sha512-WMi/OQ2axVTf/ykqCQgXiIct+mSQDFdH2fkwhPwgEwvJ1kSzZRiinb0zF2Xb8u4+OqPChmyI6MEu4EezNJz+FQ==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
-      "peer": true,
       "dependencies": {
         "tldts-core": "^6.1.86"
       },
@@ -7971,9 +8198,7 @@
       "resolved": "https://registry.npmjs.org/tldts-core/-/tldts-core-6.1.86.tgz",
       "integrity": "sha512-Je6p7pkk+KMzMv2XXKmAE3McmolOQFdxkKw0R8EYNr7sELW46JqnNeTX8ybPiQgvg1ymCoF8LXs5fzFaZvJPTA==",
       "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
@@ -7993,14 +8218,22 @@
       "integrity": "sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ==",
       "license": "MIT"
     },
+    "node_modules/totalist": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/totalist/-/totalist-3.0.1.tgz",
+      "integrity": "sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/tough-cookie": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-5.1.2.tgz",
       "integrity": "sha512-FVDYdxtnj0G6Qm/DhNPSb8Ju59ULcup3tuJxkFb5K8Bv2pUXILbf0xZWU8PX8Ov19OXljbUyveOFwRMwkXzO+A==",
       "dev": true,
       "license": "BSD-3-Clause",
-      "optional": true,
-      "peer": true,
       "dependencies": {
         "tldts": "^6.1.32"
       },
@@ -8208,17 +8441,17 @@
       }
     },
     "node_modules/vite-node": {
-      "version": "3.1.4",
-      "resolved": "https://registry.npmjs.org/vite-node/-/vite-node-3.1.4.tgz",
-      "integrity": "sha512-6enNwYnpyDo4hEgytbmc6mYWHXDHYEn0D1/rw4Q+tnHUGtKTJsn8T1YkX6Q18wI5LCrS8CTYlBaiCqxOy2kvUA==",
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/vite-node/-/vite-node-3.2.4.tgz",
+      "integrity": "sha512-EbKSKh+bh1E1IFxeO0pg1n4dvoOTt0UDiXMd/qn++r98+jPO1xtJilvXldeuQ8giIB5IkpjCgMleHMNEsGH6pg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "cac": "^6.7.14",
-        "debug": "^4.4.0",
+        "debug": "^4.4.1",
         "es-module-lexer": "^1.7.0",
         "pathe": "^2.0.3",
-        "vite": "^5.0.0 || ^6.0.0"
+        "vite": "^5.0.0 || ^6.0.0 || ^7.0.0-0"
       },
       "bin": {
         "vite-node": "vite-node.mjs"
@@ -8279,32 +8512,34 @@
       }
     },
     "node_modules/vitest": {
-      "version": "3.1.4",
-      "resolved": "https://registry.npmjs.org/vitest/-/vitest-3.1.4.tgz",
-      "integrity": "sha512-Ta56rT7uWxCSJXlBtKgIlApJnT6e6IGmTYxYcmxjJ4ujuZDI59GUQgVDObXXJujOmPDBYXHK1qmaGtneu6TNIQ==",
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/vitest/-/vitest-3.2.4.tgz",
+      "integrity": "sha512-LUCP5ev3GURDysTWiP47wRRUpLKMOfPh+yKTx3kVIEiu5KOMeqzpnYNsKyOoVrULivR8tLcks4+lga33Whn90A==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vitest/expect": "3.1.4",
-        "@vitest/mocker": "3.1.4",
-        "@vitest/pretty-format": "^3.1.4",
-        "@vitest/runner": "3.1.4",
-        "@vitest/snapshot": "3.1.4",
-        "@vitest/spy": "3.1.4",
-        "@vitest/utils": "3.1.4",
+        "@types/chai": "^5.2.2",
+        "@vitest/expect": "3.2.4",
+        "@vitest/mocker": "3.2.4",
+        "@vitest/pretty-format": "^3.2.4",
+        "@vitest/runner": "3.2.4",
+        "@vitest/snapshot": "3.2.4",
+        "@vitest/spy": "3.2.4",
+        "@vitest/utils": "3.2.4",
         "chai": "^5.2.0",
-        "debug": "^4.4.0",
+        "debug": "^4.4.1",
         "expect-type": "^1.2.1",
         "magic-string": "^0.30.17",
         "pathe": "^2.0.3",
+        "picomatch": "^4.0.2",
         "std-env": "^3.9.0",
         "tinybench": "^2.9.0",
         "tinyexec": "^0.3.2",
-        "tinyglobby": "^0.2.13",
-        "tinypool": "^1.0.2",
+        "tinyglobby": "^0.2.14",
+        "tinypool": "^1.1.1",
         "tinyrainbow": "^2.0.0",
-        "vite": "^5.0.0 || ^6.0.0",
-        "vite-node": "3.1.4",
+        "vite": "^5.0.0 || ^6.0.0 || ^7.0.0-0",
+        "vite-node": "3.2.4",
         "why-is-node-running": "^2.3.0"
       },
       "bin": {
@@ -8320,8 +8555,8 @@
         "@edge-runtime/vm": "*",
         "@types/debug": "^4.1.12",
         "@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0",
-        "@vitest/browser": "3.1.4",
-        "@vitest/ui": "3.1.4",
+        "@vitest/browser": "3.2.4",
+        "@vitest/ui": "3.2.4",
         "happy-dom": "*",
         "jsdom": "*"
       },
@@ -8349,6 +8584,19 @@
         }
       }
     },
+    "node_modules/vitest/node_modules/picomatch": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
+      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
     "node_modules/void-elements": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
@@ -8364,8 +8612,6 @@
       "integrity": "sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
-      "peer": true,
       "dependencies": {
         "xml-name-validator": "^5.0.0"
       },
@@ -8400,8 +8646,6 @@
       "integrity": "sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
-      "peer": true,
       "dependencies": {
         "iconv-lite": "0.6.3"
       },
@@ -8415,8 +8659,6 @@
       "integrity": "sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -8573,8 +8815,6 @@
       "integrity": "sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==",
       "dev": true,
       "license": "Apache-2.0",
-      "optional": true,
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -8584,9 +8824,7 @@
       "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
       "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==",
       "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/xmlhttprequest-ssl": {
       "version": "2.1.2",
diff --git a/worklenz-frontend/package.json b/worklenz-frontend/package.json
index 7e25181c1..bc90b52a0 100644
--- a/worklenz-frontend/package.json
+++ b/worklenz-frontend/package.json
@@ -9,7 +9,11 @@
     "build": "vite build",
     "dev-build": "vite build",
     "serve": "vite preview",
-    "format": "prettier --write ."
+    "format": "prettier --write .",
+    "test": "vitest",
+    "test:run": "vitest run",
+    "test:coverage": "vitest run --coverage",
+    "test:ui": "vitest --ui"
   },
   "dependencies": {
     "@ant-design/colors": "^7.1.0",
@@ -77,7 +81,10 @@
     "@types/react-dom": "19.0.0",
     "@types/react-window": "^1.8.8",
     "@vitejs/plugin-react": "^4.3.4",
+    "@vitest/coverage-v8": "^3.2.4",
+    "@vitest/ui": "^3.2.4",
     "autoprefixer": "^10.4.21",
+    "jsdom": "^26.1.0",
     "postcss": "^8.5.2",
     "prettier-plugin-tailwindcss": "^0.6.13",
     "rollup": "^4.40.2",
diff --git a/worklenz-frontend/public/js/hubspot.js b/worklenz-frontend/public/js/hubspot.js
index d1a3afee3..9fab6c94b 100644
--- a/worklenz-frontend/public/js/hubspot.js
+++ b/worklenz-frontend/public/js/hubspot.js
@@ -52,6 +52,7 @@ class HubSpotManager {
         existingStyle.remove();
       }
       
+      // Apply dark mode CSS if dark theme is active
       if (isDark) {
         this.injectDarkModeCSS();
       }
@@ -76,40 +77,27 @@ class HubSpotManager {
     style.id = this.styleId;
     style.textContent = `
       /* HubSpot Chat Widget Dark Mode Override */
+      /*
+        Note: We can only style the container backgrounds, not the widget UI inside the iframe.
+        HubSpot does not currently support external dark mode theming for the chat UI itself.
+      */
       #hubspot-conversations-inline-parent,
-      #hubspot-conversations-iframe-container,
-      .shadow-2xl.widget-align-right.widget-align-bottom,
-      [data-test-id="chat-widget"],
-      [class*="VizExCollapsedChat"],
-      [class*="VizExExpandedChat"],
-      iframe[src*="hubspot"] {
-        filter: invert(1) hue-rotate(180deg) !important;
-        background: transparent !important;
+      #hubspot-conversations-iframe-container {
+        background: #141414 !important;
       }
-      
       /* Target HubSpot widget container backgrounds */
       #hubspot-conversations-inline-parent div,
       #hubspot-conversations-iframe-container div,
       [data-test-id="chat-widget"] div {
         background-color: transparent !important;
       }
-      
-      /* Prevent double inversion of images, avatars, and icons */
-      #hubspot-conversations-iframe-container img,
-      #hubspot-conversations-iframe-container [style*="background-image"],
-      #hubspot-conversations-iframe-container svg,
-      iframe[src*="hubspot"] img,
-      iframe[src*="hubspot"] svg,
-      [data-test-id="chat-widget"] img,
-      [data-test-id="chat-widget"] svg {
-        filter: invert(1) hue-rotate(180deg) !important;
-      }
-      
-      /* Additional targeting for widget launcher and chat bubble */
-      div[class*="shadow-2xl"],
-      div[class*="widget-align"],
-      div[style*="position: fixed"] {
-        filter: invert(1) hue-rotate(180deg) !important;
+      /* Ensure Worklenz app elements are not affected by HubSpot styles */
+      .ant-menu,
+      .ant-menu *,
+      [class*="settings"],
+      [class*="sidebar"],
+      .worklenz-app *:not([id*="hubspot"]):not([class*="widget"]) {
+        filter: none !important;
       }
     `;
     document.head.appendChild(style);
@@ -134,4 +122,11 @@ document.addEventListener('DOMContentLoaded', () => {
   
   // Make available globally for potential cleanup
   window.HubSpotManager = hubspot;
-});
\ No newline at end of file
+});
+
+// Add this style to ensure the chat widget uses the light color scheme
+(function() {
+  var style = document.createElement('style');
+  style.innerHTML = '#hubspot-messages-iframe-container { color-scheme: light !important; }';
+  document.head.appendChild(style);
+})();
\ No newline at end of file
diff --git a/worklenz-frontend/public/locales/alb/account-setup.json b/worklenz-frontend/public/locales/alb/account-setup.json
index d5f624b3d..3d2e785b6 100644
--- a/worklenz-frontend/public/locales/alb/account-setup.json
+++ b/worklenz-frontend/public/locales/alb/account-setup.json
@@ -1,31 +1,194 @@
 {
   "continue": "Vazhdo",
 
-  "setupYourAccount": "Konfiguro Llogarinë Tënde në Worklenz.",
-  "organizationStepTitle": "Emërtoni Organizatën Tuaj",
-  "organizationStepLabel": "Zgjidhni një emër për llogarinë tuaj në Worklenz.",
-
-  "projectStepTitle": "Krijoni projektin tuaj të parë",
-  "projectStepLabel": "Në cilin projekt po punoni aktualisht?",
+  "setupYourAccount": "Konfiguro llogarinë tënde.",
+  "organizationStepTitle": "Emërto organizatën tënde",
+  "organizationStepLabel": "Zgjidh një emër për llogarinë tënde në Worklenz.",
+  "organizationStepWelcome": "Konfiguro llogarinë tënde në Worklenz.",
+  "organizationStepDescription": "Le të fillojmë duke konfiguruar organizatën tënde. Kjo do të jetë hapësira kryesore e punës për ekipin tënd.",
+  "organizationStepTooltip": "Ky emër do të shfaqet në hapësirën tënde të punës dhe mund të ndryshohet më vonë në cilësime.",
+  "organizationStepNeedIdeas": "Keni nevojë për ide?",
+  "organizationStepUseDetected": "Përdorimi i zbuluar:",
+  "organizationStepCharacters": "karaktere",
+  "organizationStepGoodLength": "Gjatësi e mirë",
+  "organizationStepTooShort": "Shumë i shkurtër",
+  "organizationStepNamingTips": "Këshilla për emërtimin",
+  "organizationStepTip1": "Mbaje të thjeshtë dhe të lehtë për t'u mbajtur mend",
+  "organizationStepTip2": "Përfaqëso industrinë ose vlerat e tua",
+  "organizationStepTip3": "Mendo për rritjen në të ardhmen",
+  "organizationStepTip4": "Bëje unik dhe të përshtatshëm për markë",
+  "organizationStepSuggestionsTitle": "Sugjerime për emra",
+  "organizationStepCategory1": "Kompani Teknologjie",
+  "organizationStepCategory2": "Agjenci Kreative",
+  "organizationStepCategory3": "Konsulencë",
+  "organizationStepCategory4": "Startupe",
+  "organizationStepSuggestionsNote": "Këto janë vetëm shembuj për të të ndihmuar të fillosh. Zgjidh diçka që përfaqëson organizatën tënde.",
+  "organizationStepPrivacyNote": "Emri i organizatës tënde është privat dhe i dukshëm vetëm për anëtarët e ekipit.",
+  "projectStepTitle": "Krijo projektin tënd të parë",
+  "projectStepLabel": "Në cilin projekt po punon tani?",
   "projectStepPlaceholder": "p.sh. Plani i Marketingut",
-
-  "tasksStepTitle": "Krijoni detyrat tuaja të para",
-  "tasksStepLabel": "Shkruani disa detyra që do të kryeni në",
+  "tasksStepTitle": "Krijo detyrat e tua të para",
+  "tasksStepLabel": "Shkruaj disa detyra që do të kryesh në",
   "tasksStepAddAnother": "Shto një tjetër",
-
-  "emailPlaceholder": "Adresa email",
-  "invalidEmail": "Ju lutemi vendosni një adresë email të vlefshme",
+  "emailPlaceholder": "Adresa e emailit",
+  "invalidEmail": "Ju lutem vendosni një adresë emaili të vlefshme",
   "or": "ose",
   "templateButton": "Importo nga shablloni",
-  "goBack": "Kthehu Mbrapa",
+  "goBack": "Kthehu mbrapa",
   "cancel": "Anulo",
   "create": "Krijo",
   "templateDrawerTitle": "Zgjidh nga shabllonet",
   "step3InputLabel": "Fto me email",
   "addAnother": "Shto një tjetër",
-  "skipForNow": "Kalo tani për tani",
-  "formTitle": "Krijoni detyrën tuaj të parë.",
-  "step3Title": "Fto ekipin tënd të punojë me",
+  "skipForNow": "Kalo për tani",
+  "skipping": "Duke kaluar...",
+  "formTitle": "Krijo detyrën tënde të parë.",
+  "step3Title": "Fto ekipin tënd për të punuar së bashku",
   "maxMembers": " (Mund të ftoni deri në 5 anëtarë)",
-  "maxTasks": " (Mund të krijoni deri në 5 detyra)"
+  "maxTasks": " (Mund të krijoni deri në 5 detyra)",
+  "membersStepTitle": "Fto ekipin tënd",
+  "membersStepDescription": "Shto anëtarë ekipi në \"{{organizationName}}\" dhe filloni bashkëpunimin",
+  "memberPlaceholder": "Anëtari i ekipit {{index}} - Shkruani adresën e emailit",
+  "validEmailAddress": "Adresë emaili e vlefshme",
+  "addAnotherTeamMember": "Shto një anëtar tjetër të ekipit ({{current}}/{{max}})",
+  "canInviteLater": "Gjithmonë mund të ftoni anëtarë të ekipit më vonë",
+  "skipStepDescription": "Nuk i keni adresat e emailit gati? Asnjë problem! Mund ta kaloni këtë hap dhe të ftoni anëtarë nga paneli i projektit më vonë.",
+  "orgCategoryTech": "Kompani Teknologjie",
+  "orgCategoryCreative": "Agjenci Kreative",
+  "orgCategoryConsulting": "Konsulencë",
+  "orgCategoryStartups": "Startupe",
+  "namingTip1": "Mbaje të thjeshtë dhe të lehtë për t'u mbajtur mend",
+  "namingTip2": "Përfaqëso industrinë ose vlerat e tua",
+  "namingTip3": "Mendo për rritjen në të ardhmen",
+  "namingTip4": "Bëje unik dhe të përshtatshëm për markë",
+  "aboutYouTitle": "Na trego për veten tënde",
+  "aboutYouDescription": "Na ndihmo të personalizojmë përvojën tënde",
+  "orgTypeQuestion": "Cila përshkruan më mirë organizatën tënde?",
+  "userRoleQuestion": "Cili është roli yt?",
+  "yourNeedsTitle": "Cilat janë nevojat e tua kryesore?",
+  "yourNeedsDescription": "Zgjidh të gjitha që aplikohen për të na ndihmuar të konfigurojmë hapësirën tënde të punës",
+  "yourNeedsQuestion": "Si do ta përdorësh kryesisht Worklenz?",
+  "useCaseTaskOrg": "Organizo dhe ndiq detyrat",
+  "useCaseTeamCollab": "Puno së bashku pa pengesa",
+  "useCaseResourceMgmt": "Menaxho kohën dhe burimet",
+  "useCaseClientComm": "Qëndro i lidhur me klientët",
+  "useCaseTimeTrack": "Monitoro orët e projektit",
+  "useCaseOther": "Diçka tjetër",
+  "selectedText": "zgjedhur",
+  "previousToolsQuestion": "Çfarë mjetesh ke përdorur më parë? (Opsionale)",
+  "discoveryTitle": "Edhe një gjë e fundit...",
+  "discoveryDescription": "Na ndihmo të kuptojmë si e zbulove Worklenz",
+  "discoveryQuestion": "Si dëgjove për ne?",
+  "allSetTitle": "Çdo gjë gati!",
+  "allSetDescription": "Le të krijojmë projektin tënd të parë dhe të fillojmë me Worklenz",
+  "surveyCompleteTitle": "Faleminderit!",
+  "surveyCompleteDescription": "Përgjigjet tuaja na ndihmojnë të përmirësojmë Worklenz për të gjithë",
+  "aboutYouStepName": "Rreth teje",
+  "yourNeedsStepName": "Nevojat e tua",
+  "discoveryStepName": "Zbulimi",
+  "stepProgress": "Hapi {step} nga 3: {title}",
+  "projectStepHeader": "Le të krijojmë projektin tënd të parë",
+  "projectStepSubheader": "Fillo nga e para ose përdor një shabllon për të filluar më shpejt",
+  "startFromScratch": "Fillo nga e para",
+  "templateSelected": "Shablloni i zgjedhur më poshtë",
+  "quickSuggestions": "Sugjerime të shpejta:",
+  "orText": "OSE",
+  "startWithTemplate": "Fillo me një shabllon",
+  "clearToSelectTemplate": "Pastro emrin e projektit më sipër për të zgjedhur një shabllon",
+  "templateHeadStart": "Fillo më shpejt me struktura të gatshme projekti",
+  "browseAllTemplates": "Shfleto të gjitha shabllonet",
+  "templatesAvailable": "15+ shabllone të specializuara sipas industrisë në dispozicion",
+  "chooseTemplate": "Zgjidh një shabllon që i përshtatet llojit të projektit tënd",
+  "createProject": "Krijo projekt",
+  "templateSoftwareDev": "Zhvillim Softueri",
+  "templateSoftwareDesc": "Sprint-e agile, ndjekje gabimesh, lëshime",
+  "templateMarketing": "Fushatë Marketingu",
+  "templateMarketingDesc": "Planifikim fushate, kalendar përmbajtjesh",
+  "templateConstruction": "Projekt Ndërtimi",
+  "templateConstructionDesc": "Faza, leje, kontraktorë",
+  "templateStartup": "Lansim Startup-i",
+  "templateStartupDesc": "Zhvillim MVP, financim, rritje",
+  "tasksStepDescription": "Ndaji \"{{projectName}}\" në detyra të veprueshme për të filluar",
+  "taskPlaceholder": "Detyra {{index}} - p.sh., Çfarë duhet bërë?",
+  "addAnotherTask": "Shto një detyrë tjetër ({{current}}/{{max}})",
+  "surveyStepTitle": "Na trego për veten tënde",
+  "surveyStepLabel": "Na ndihmo të personalizojmë përvojën tënde në Worklenz duke iu përgjigjur disa pyetjeve.",
+  "organizationType": "Cila përshkruan më mirë organizatën tënde?",
+  "organizationTypeFreelancer": "Freelancer",
+  "organizationTypeStartup": "Startup",
+  "organizationTypeSmallMediumBusiness": "Biznes i Vogël ose i Mesëm",
+  "organizationTypeAgency": "Agjenci",
+  "organizationTypeEnterprise": "Ndërmarrje",
+  "organizationTypeOther": "Tjetër",
+  "userRole": "Cili është roli yt?",
+  "userRoleFounderCeo": "Themelues / CEO",
+  "userRoleProjectManager": "Menaxher Projekti",
+  "userRoleSoftwareDeveloper": "Zhvillues Softueri",
+  "userRoleDesigner": "Dizajner",
+  "userRoleOperations": "Operacionet",
+  "userRoleOther": "Tjetër",
+  "mainUseCases": "Për çfarë do ta përdorësh kryesisht Worklenz?",
+  "mainUseCasesTaskManagement": "Menaxhim detyrash",
+  "mainUseCasesTeamCollaboration": "Bashkëpunim ekipi",
+  "mainUseCasesResourcePlanning": "Planifikim burimesh",
+  "mainUseCasesClientCommunication": "Komunikim & raportim me klientët",
+  "mainUseCasesTimeTracking": "Ndjekje kohe",
+  "mainUseCasesOther": "Tjetër",
+  "previousTools": "Çfarë mjetesh ke përdorur para Worklenz?",
+  "previousToolsPlaceholder": "p.sh. Trello, Asana, Monday.com",
+  "howHeardAbout": "Si dëgjove për Worklenz?",
+  "howHeardAboutGoogleSearch": "Kërkim në Google",
+  "howHeardAboutTwitter": "Twitter",
+  "howHeardAboutLinkedin": "LinkedIn",
+  "howHeardAboutFriendColleague": "Një mik ose koleg",
+  "howHeardAboutBlogArticle": "Një blog ose artikull",
+  "howHeardAboutOther": "Tjetër",
+
+  "aboutYouStepTitle": "Na trego për veten",
+  "aboutYouStepDescription": "Na ndihmo të personalizojmë përvojën tënde",
+  "yourNeedsStepTitle": "Cilat janë nevojat e tua kryesore?",
+  "yourNeedsStepDescription": "Zgjidh të gjitha që aplikohen për të na ndihmuar të konfigurojmë hapësirën tënde të punës",
+  "selected": "zgjedhur",
+  "previousToolsLabel": "Çfarë mjetesh ke përdorur më parë? (Opsionale)",
+
+  "roleSuggestions": {
+    "designer": "UI/UX, Grafikë, Kreativ",
+    "developer": "Frontend, Backend, Full-stack",
+    "projectManager": "Planifikim, Koordinim",
+    "marketing": "Përmbajtje, Media Sociale, Rritje",
+    "sales": "Zhvillim Biznesi, Marrëdhënie me Klientë",
+    "operations": "Administratë, HR, Financa"
+  },
+
+  "languages": {
+    "en": "Anglisht",
+    "es": "Spanjisht",
+    "pt": "Portugalisht",
+    "de": "Gjermanisht",
+    "alb": "Shqip",
+    "zh": "Kinezçe"
+  },
+
+  "orgSuggestions": {
+    "tech": ["TechCorp", "DevStudio", "CodeCraft", "PixelForge"],
+    "creative": ["Creative Hub", "Design Studio", "Brand Works", "Visual Arts"],
+    "consulting": ["Strategy Group", "Business Solutions", "Expert Advisors", "Growth Partners"],
+    "startup": ["Innovation Labs", "Future Works", "Venture Co", "Next Gen"]
+  },
+
+  "projectSuggestions": {
+    "freelancer": ["Projekti i Klientit", "Përditësim Portfolio", "Markë Personale"],
+    "startup": ["Zhvillim MVP", "Lansim Produkti", "Kërkim Tregu"],
+    "agency": ["Fushatë Klienti", "Strategji Markë", "Ridizajnim Website"],
+    "enterprise": ["Migrim Sistemi", "Optimizim Procesesh", "Trajnim Ekipi"]
+  },
+
+  "useCaseDescriptions": {
+    "taskManagement": "Organizoj dhe ndjek detyrat",
+    "teamCollaboration": "Punojmë së bashku pa probleme",
+    "resourcePlanning": "Menaxhoj kohën dhe burimet",
+    "clientCommunication": "Qëndroj i lidhur me klientët",
+    "timeTracking": "Monitoroj orët e projektit",
+    "other": "Diçka tjetër"
+  }
 }
diff --git a/worklenz-frontend/public/locales/alb/admin-center/current-bill.json b/worklenz-frontend/public/locales/alb/admin-center/current-bill.json
index 1f76f32b1..f5e74aaf4 100644
--- a/worklenz-frontend/public/locales/alb/admin-center/current-bill.json
+++ b/worklenz-frontend/public/locales/alb/admin-center/current-bill.json
@@ -106,6 +106,7 @@
 
   "expirestoday": "sot",
   "expirestomorrow": "nesër",
+  "expiredDayAgo": "{{days}} ditë më parë",
   "expiredDaysAgo": "{{days}} ditë më parë",
 
   "continueWith": "Vazhdo me {{plan}}",
diff --git a/worklenz-frontend/public/locales/alb/common.json b/worklenz-frontend/public/locales/alb/common.json
index 5af25f694..f6d934771 100644
--- a/worklenz-frontend/public/locales/alb/common.json
+++ b/worklenz-frontend/public/locales/alb/common.json
@@ -5,5 +5,40 @@
   "signup-failed": "Regjistrimi dështoi. Ju lutemi sigurohuni që të gjitha fushat e nevojshme janë plotësuar dhe provoni përsëri.",
   "reconnecting": "Jeni shkëputur nga serveri.",
   "connection-lost": "Lidhja me serverin dështoi. Ju lutemi kontrolloni lidhjen tuaj me internet.",
-  "connection-restored": "U lidhët me serverin me sukses"
+  "connection-restored": "U lidhët me serverin me sukses",
+  "cancel": "Anulo",
+  "update-available": "Worklenz u përditesua!",
+  "update-description": "Një version i ri i Worklenz është i disponueshëm me karakteristikat dhe përmirësimet më të fundit.",
+  "update-instruction": "Për eksperiencën më të mirë, ju lutemi rifreskoni faqen për të aplikuar ndryshimet e reja.",
+  "update-whats-new": "💡 <1>Çfarë ka të re:</1> Përmirësim i performancës, rregullime të gabimeve dhe eksperiencön e përmirësuar e përdoruesit",
+  "update-now": "Përditeso tani",
+  "update-later": "Më vonë",
+  "updating": "Duke u përditesuar...",
+  "license-expired-title": "Periudhja e provës ka skaduar",
+  "license-expired-subtitle": "Periudhja juaj e provës në Worklenz ka përfunduar. Ju lutemi përditesohuni për të vazhduar të shijoni të gjitha veçoritë.",
+  "license-expired-features": "Përditesohuni tani për të shkyçur:",
+  "license-expired-feature-1": "✓ Projekte dhe detyra të pakufizuara",
+  "license-expired-feature-2": "✓ Raportim dhe analitika të avancuara",
+  "license-expired-feature-3": "✓ Veçori bashkëpunimi në grup",
+  "license-expired-feature-4": "✓ Mbështetje me prioritet",
+  "license-expired-upgrade": "Përditeso tani",
+  "license-expired-days-remaining": "{{days}} ditë të mbetura në periudhën tuaj të provës",
+  "trial-expiring-soon": "Periudhja juaj e provës skadon në {{days}} ditë",
+  "trial-expiring-soon_plural": "Periudhja juaj e provës skadon në {{days}} ditë",
+  "trial-expiring-today": "Periudhja juaj e provës skadon sot!",
+  "trial-expiring-upgrade": "Përditesohuni tani për të mbajtur të gjitha të dhënat tuaja dhe vazhdoni pa ndërprerje",
+  "trial-badge-days": "{{days}} ditë të mbetura",
+  "trial-badge-today": "Dita e fundit!",
+  "trial-badge-hours": "{{hours}} orë të mbetura",
+  "trial-alert-admin-note": "Ju mund të aksesoni ende Qendrën e Administrimit për të menaxhuar abonimin tuaj",
+  "trial-alert-dismiss": "Hidhe për sot",
+  "license-expiring-soon": "Licenca juaj skadon në {{days}} ditë",
+  "license-expiring-soon_plural": "Licenca juaj skadon në {{days}} ditë",
+  "license-expiring-today": "Licenca juaj skadon sot!",
+  "license-expired-grace-period": "Licenca juaj ka skaduar. {{days}} ditë periudhë tolerance e mbetur",
+  "license-expired-grace-period_plural": "Licenca juaj ka skaduar. {{days}} ditë periudhë tolerance të mbetura",
+  "license-expiring-upgrade": "Rinovoni tani për të mbajtur të gjitha të dhënat tuaja dhe vazhdoni pa ndërprerje",
+  "license-badge-days": "{{days}} ditë të mbetura",
+  "license-badge-today": "Dita e fundit!",
+  "license-badge-hours": "{{hours}} orë të mbetura"
 }
diff --git a/worklenz-frontend/public/locales/alb/home.json b/worklenz-frontend/public/locales/alb/home.json
index 58d26e0b1..818210624 100644
--- a/worklenz-frontend/public/locales/alb/home.json
+++ b/worklenz-frontend/public/locales/alb/home.json
@@ -41,6 +41,22 @@
     "list": "Listë",
     "calendar": "Kalendar",
     "tasks": "Detyrat",
-    "refresh": "Rifresko"
+    "refresh": "Rifresko",
+    "recentActivity": "Aktiviteti i Fundit",
+    "recentTasks": "Detyrat e Fundit",
+    "recentTasksSegment": "Detyrat e Fundit",
+    "timeLogged": "Koha e Regjistruar",
+    "timeLoggedSegment": "Koha e Regjistruar",
+    "noRecentTasks": "Asnjë detyrë e fundit",
+    "noTimeLoggedTasks": "Asnjë detyrë me kohë të regjistruar",
+    "activityTag": "Aktiviteti",
+    "timeLogTag": "Regjistrim Kohe",
+    "timerTag": "Kohëmatës",
+    "activitySingular": "aktivitet",
+    "activityPlural": "aktivitete",
+    "recentTaskAriaLabel": "Detyrë e fundit:",
+    "timeLoggedTaskAriaLabel": "Detyrë me kohë të regjistruar:",
+    "errorLoadingRecentTasks": "Gabim në ngarkimin e detyrave të fundit",
+    "errorLoadingTimeLoggedTasks": "Gabim në ngarkimin e detyrave me kohë të regjistruar"
   }
 }
diff --git a/worklenz-frontend/public/locales/alb/kanban-board.json b/worklenz-frontend/public/locales/alb/kanban-board.json
index def705aa1..50835235a 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/navbar.json b/worklenz-frontend/public/locales/alb/navbar.json
index 88c53de46..5821dc26a 100644
--- a/worklenz-frontend/public/locales/alb/navbar.json
+++ b/worklenz-frontend/public/locales/alb/navbar.json
@@ -18,6 +18,7 @@
   "profileTooltip": "Shiko profilin",
   "adminCenter": "Qendra Administrative",
   "settings": "Cilësimet",
+  "deleteAccount": "Fshij Llogarinë",
   "logOut": "Dil",
   "notificationsDrawer": {
     "read": "Lexuara e njoftimet ",
diff --git a/worklenz-frontend/public/locales/alb/project-view-members.json b/worklenz-frontend/public/locales/alb/project-view-members.json
index 239b77e95..b64063446 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 aa6637e17..03c891c00 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/labels.json b/worklenz-frontend/public/locales/alb/settings/labels.json
index 40e6361b0..fe8cb40a1 100644
--- a/worklenz-frontend/public/locales/alb/settings/labels.json
+++ b/worklenz-frontend/public/locales/alb/settings/labels.json
@@ -7,5 +7,9 @@
   "searchPlaceholder": "Kërko sipas emrit",
   "emptyText": "Etiketat mund të krijohen gjatë përditësimit ose krijimit të detyrave.",
   "pinTooltip": "Klikoni për ta fiksuar në menynë kryesore",
-  "colorChangeTooltip": "Klikoni për të ndryshuar ngjyrën"
+  "colorChangeTooltip": "Klikoni për të ndryshuar ngjyrën",
+  "pageTitle": "Menaxho Etiketat",
+  "deleteConfirmTitle": "Jeni i sigurt që dëshironi ta fshini këtë?",
+  "deleteButton": "Fshi",
+  "cancelButton": "Anulo"
 }
diff --git a/worklenz-frontend/public/locales/alb/settings/team-members.json b/worklenz-frontend/public/locales/alb/settings/team-members.json
index 955954dc9..935d5a0f3 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/alb/survey.json b/worklenz-frontend/public/locales/alb/survey.json
new file mode 100644
index 000000000..65713542e
--- /dev/null
+++ b/worklenz-frontend/public/locales/alb/survey.json
@@ -0,0 +1,14 @@
+{
+  "modalTitle": "Ndihmoni të përmirësojmë përvojën tuaj",
+  "skip": "Kalo për tani",
+  "previous": "Prapa",
+  "next": "Tjetra",
+  "completeSurvey": "Përfundo Anketën",
+  "submitting": "Duke dërguar përgjigjet tuaja...",
+  "submitSuccessTitle": "Faleminderit!",
+  "submitSuccessSubtitle": "Feedback-u juaj na ndihmon të përmirësojmë Worklenz për të gjithë.",
+  "submitSuccessMessage": "Faleminderit që plotësuat anketën!",
+  "submitErrorMessage": "Dështoi dërgimi i anketës. Ju lutemi provoni përsëri.",
+  "submitErrorLog": "Dështoi dërgimi i anketës",
+  "fetchErrorLog": "Dështoi marrja e anketës"
+} 
\ No newline at end of file
diff --git a/worklenz-frontend/public/locales/alb/task-list-filters.json b/worklenz-frontend/public/locales/alb/task-list-filters.json
index 4fc4dbdf7..27806a768 100644
--- a/worklenz-frontend/public/locales/alb/task-list-filters.json
+++ b/worklenz-frontend/public/locales/alb/task-list-filters.json
@@ -84,5 +84,12 @@
   "close": "Mbyll",
   "cannotMoveStatus": "Nuk mund të lëvizet statusi",
   "cannotMoveStatusMessage": "Nuk mund të lëvizet ky status sepse do të linte kategorinë '{{categoryName}}' bosh. Çdo kategori duhet të ketë të paktën një status.",
-  "ok": "OK"
+  "ok": "OK",
+  "clearSort": "Pastro Renditjen",
+  "sortAscending": "Rendit në Rritje",
+  "sortDescending": "Rendit në Zbritje",
+  "sortByField": "Rendit sipas {{field}}",
+  "ascendingOrder": "Rritës",
+  "descendingOrder": "Zbritës",
+  "currentSort": "Renditja aktuale: {{field}} {{order}}"
 }
diff --git a/worklenz-frontend/public/locales/alb/task-list-table.json b/worklenz-frontend/public/locales/alb/task-list-table.json
index c009e734d..5d7756eb3 100644
--- a/worklenz-frontend/public/locales/alb/task-list-table.json
+++ b/worklenz-frontend/public/locales/alb/task-list-table.json
@@ -57,6 +57,9 @@
 
   "contextMenu": {
     "assignToMe": "Cakto mua",
+    "copyLink": "Kopjo lidhjen e detyrës",
+    "linkCopied": "Lidhja u kopjua në clipboard",
+    "linkCopyFailed": "Dështoi kopjimi i lidhjes",
     "moveTo": "Zhvendos në",
     "unarchive": "Ç'arkivizo",
     "archive": "Arkivizo",
@@ -133,5 +136,11 @@
       "dependencies": "Detyra ka varësi",
       "recurring": "Detyrë përsëritëse"
     }
+  },
+
+  "timer": {
+    "conflictTitle": "Kronómetr Tashë Në Ecuri",
+    "conflictMessage": "Ju keni një kronómetr në ecuri për \"{{taskName}}\" në projektin \"{{projectName}}\". Dëshironi ta ndaloni atë kronómetr dhe të filloni një të ri për këtë detyrë?",
+    "stopAndStart": "Ndalo & Fillo Kronómetr të Ri"
   }
 }
diff --git a/worklenz-frontend/public/locales/de/account-setup.json b/worklenz-frontend/public/locales/de/account-setup.json
index ddfb7b80a..d496d75c2 100644
--- a/worklenz-frontend/public/locales/de/account-setup.json
+++ b/worklenz-frontend/public/locales/de/account-setup.json
@@ -3,7 +3,28 @@
 
   "setupYourAccount": "Richten Sie Ihr Worklenz-Konto ein.",
   "organizationStepTitle": "Organisation benennen",
-  "organizationStepLabel": "Wählen Sie einen Namen für Ihr Worklenz-Konto.",
+  "organizationStepWelcome": "Willkommen bei Worklenz!",
+  "organizationStepDescription": "Beginnen wir mit der Einrichtung Ihrer Organisation. Dies wird der Hauptarbeitsplatz für Ihr Team.",
+  "organizationStepLabel": "Organisationsname",
+  "organizationStepPlaceholder": "z.B. Acme Corporation",
+  "organizationStepTooltip": "Dieser Name wird in Ihrem Arbeitsbereich angezeigt und kann später in den Einstellungen geändert werden.",
+  "organizationStepNeedIdeas": "Brauchen Sie Ideen?",
+  "organizationStepUseDetected": "Erkannt verwenden:",
+  "organizationStepCharacters": "Zeichen",
+  "organizationStepGoodLength": "Gute Länge",
+  "organizationStepTooShort": "Zu kurz",
+  "organizationStepNamingTips": "Namensgebungstipps",
+  "organizationStepTip1": "Halten Sie es einfach und einprägsam",
+  "organizationStepTip2": "Spiegeln Sie Ihre Branche oder Werte wider",
+  "organizationStepTip3": "Denken Sie an zukünftiges Wachstum",
+  "organizationStepTip4": "Machen Sie es einzigartig und markenfähig",
+  "organizationStepSuggestionsTitle": "Namensvorschläge",
+  "organizationStepCategory1": "Tech-Unternehmen",
+  "organizationStepCategory2": "Kreativagenturen",
+  "organizationStepCategory3": "Beratung",
+  "organizationStepCategory4": "Startups",
+  "organizationStepSuggestionsNote": "Dies sind nur Beispiele für den Einstieg. Wählen Sie etwas, das Ihre Organisation repräsentiert.",
+  "organizationStepPrivacyNote": "Ihr Organisationsname ist privat und nur für Ihre Teammitglieder sichtbar.",
 
   "projectStepTitle": "Erstellen Sie Ihr erstes Projekt",
   "projectStepLabel": "An welchem Projekt arbeiten Sie gerade?",
@@ -24,8 +45,170 @@
   "step3InputLabel": "Per E-Mail einladen",
   "addAnother": "Weitere hinzufügen",
   "skipForNow": "Jetzt überspringen",
+  "skipping": "Überspringen...",
   "formTitle": "Erstellen Sie Ihre erste Aufgabe.",
   "step3Title": "Laden Sie Ihr Team zur Zusammenarbeit ein",
   "maxMembers": " (Sie können bis zu 5 Mitglieder einladen)",
-  "maxTasks": " (Sie können bis zu 5 Aufgaben erstellen)"
+  "maxTasks": " (Sie können bis zu 5 Aufgaben erstellen)",
+
+  "membersStepTitle": "Laden Sie Ihr Team ein",
+  "membersStepDescription": "Teammitglieder zu \"{{organizationName}}\" hinzufügen und mit der Zusammenarbeit beginnen",
+  "memberPlaceholder": "Teammitglied {{index}} - E-Mail-Adresse eingeben",
+  "validEmailAddress": "Gültige E-Mail-Adresse",
+  "addAnotherTeamMember": "Weiteres Teammitglied hinzufügen ({{current}}/{{max}})",
+  "canInviteLater": "Sie können Teammitglieder jederzeit später einladen",
+  "skipStepDescription": "Haben Sie keine E-Mail-Adressen bereit? Kein Problem! Sie können diesen Schritt überspringen und Teammitglieder später über Ihr Projekt-Dashboard einladen.",
+
+  "orgCategoryTech": "Technologieunternehmen",
+  "orgCategoryCreative": "Kreativagenturen", 
+  "orgCategoryConsulting": "Beratung",
+  "orgCategoryStartups": "Startups",
+  "namingTip1": "Halten Sie es einfach und einprägsam",
+  "namingTip2": "Spiegeln Sie Ihre Branche oder Werte wider",
+  "namingTip3": "Denken Sie an zukünftiges Wachstum",
+  "namingTip4": "Machen Sie es einzigartig und markenfähig",
+
+  "aboutYouTitle": "Erzählen Sie uns von sich",
+  "aboutYouDescription": "Helfen Sie uns, Ihre Erfahrung zu personalisieren",
+  "orgTypeQuestion": "Was beschreibt Ihre Organisation am besten?",
+  "userRoleQuestion": "Was ist Ihre Rolle?",
+  
+  "yourNeedsTitle": "Was sind Ihre Hauptbedürfnisse?",
+  "yourNeedsDescription": "Wählen Sie alle zutreffenden aus, um uns bei der Einrichtung Ihres Arbeitsbereichs zu helfen",
+  "yourNeedsQuestion": "Wie werden Sie Worklenz hauptsächlich nutzen?",
+  "useCaseTaskOrg": "Aufgaben organisieren und verfolgen",
+  "useCaseTeamCollab": "Nahtlos zusammenarbeiten", 
+  "useCaseResourceMgmt": "Zeit und Ressourcen verwalten",
+  "useCaseClientComm": "Mit Kunden in Verbindung bleiben",
+  "useCaseTimeTrack": "Projektstunden überwachen",
+  "useCaseOther": "Etwas anderes",
+  "selectedText": "ausgewählt",
+  "previousToolsQuestion": "Welche Tools haben Sie zuvor verwendet? (Optional)",
+  "previousToolsPlaceholder": "z.B. Asana, Trello, Jira, Monday.com, etc.",
+  
+  "discoveryTitle": "Eine letzte Sache...",
+  "discoveryDescription": "Helfen Sie uns zu verstehen, wie Sie Worklenz entdeckt haben",
+  "discoveryQuestion": "Wie haben Sie von uns erfahren?",
+  "allSetTitle": "Sie sind bereit!",
+  "allSetDescription": "Lassen Sie uns Ihr erstes Projekt erstellen und mit Worklenz beginnen",
+  "surveyCompleteTitle": "Vielen Dank!",
+  "surveyCompleteDescription": "Ihr Feedback hilft uns, Worklenz für alle zu verbessern",
+  "aboutYouStepName": "Über Sie",
+  "yourNeedsStepName": "Ihre Bedürfnisse", 
+  "discoveryStepName": "Entdeckung",
+  "stepProgress": "Schritt {step} von 3: {title}",
+
+  "projectStepHeader": "Lassen Sie uns Ihr erstes Projekt erstellen",
+  "projectStepSubheader": "Von Grund auf beginnen oder eine Vorlage verwenden, um schneller voranzukommen",
+  "startFromScratch": "Von Grund auf beginnen",
+  "templateSelected": "Vorlage unten ausgewählt",
+  "quickSuggestions": "Schnelle Vorschläge:",
+  "orText": "ODER",
+  "startWithTemplate": "Mit einer Vorlage beginnen",
+  "clearToSelectTemplate": "Projektname oben löschen, um eine Vorlage auszuwählen",
+  "templateHeadStart": "Verschaffen Sie sich einen Vorsprung mit vorgefertigten Projektstrukturen",
+  "browseAllTemplates": "Alle Vorlagen durchsuchen",
+  "templatesAvailable": "15+ branchenspezifische Vorlagen verfügbar",
+  "chooseTemplate": "Wählen Sie eine Vorlage, die zu Ihrem Projekttyp passt",
+  "createProject": "Projekt erstellen",
+
+  "templateSoftwareDev": "Softwareentwicklung",
+  "templateSoftwareDesc": "Agile Sprints, Fehlerverfolgung, Releases",
+  "templateMarketing": "Marketing-Kampagne", 
+  "templateMarketingDesc": "Kampagnenplanung, Content-Kalender",
+  "templateConstruction": "Bauprojekt",
+  "templateConstructionDesc": "Phasen, Genehmigungen, Auftragnehmer",
+  "templateStartup": "Startup-Launch",
+  "templateStartupDesc": "MVP-Entwicklung, Finanzierung, Wachstum",
+
+  "tasksStepTitle": "Fügen Sie Ihre ersten Aufgaben hinzu",
+  "tasksStepDescription": "Unterteilen Sie \"{{projectName}}\" in umsetzbare Aufgaben, um zu beginnen",
+  "taskPlaceholder": "Aufgabe {{index}} - z.B., Was muss getan werden?",
+  "addAnotherTask": "Weitere Aufgabe hinzufügen ({{current}}/{{max}})",
+
+  "surveyStepTitle": "Erzählen Sie uns von sich",
+  "surveyStepLabel": "Helfen Sie uns, Ihre Worklenz-Erfahrung zu personalisieren, indem Sie ein paar Fragen beantworten.",
+  
+  "organizationType": "Was beschreibt Ihre Organisation am besten?",
+  "organizationTypeFreelancer": "Freelancer",
+  "organizationTypeStartup": "Startup",
+  "organizationTypeSmallMediumBusiness": "Kleines oder mittleres Unternehmen",
+  "organizationTypeAgency": "Agentur",
+  "organizationTypeEnterprise": "Unternehmen",
+  "organizationTypeOther": "Andere",
+  
+  "userRole": "Was ist Ihre Rolle?",
+  "userRoleFounderCeo": "Gründer / CEO",
+  "userRoleProjectManager": "Projektmanager",
+  "userRoleSoftwareDeveloper": "Software-Entwickler",
+  "userRoleDesigner": "Designer",
+  "userRoleOperations": "Betrieb",
+  "userRoleOther": "Andere",
+  
+  "mainUseCases": "Wofür werden Sie Worklenz hauptsächlich verwenden?",
+  "mainUseCasesTaskManagement": "Aufgabenverwaltung",
+  "mainUseCasesTeamCollaboration": "Teamzusammenarbeit",
+  "mainUseCasesResourcePlanning": "Ressourcenplanung",
+  "mainUseCasesClientCommunication": "Kundenkommunikation & Berichterstattung",
+  "mainUseCasesTimeTracking": "Zeiterfassung",
+  "mainUseCasesOther": "Andere",
+  
+  "previousTools": "Welche Tools haben Sie vor Worklenz verwendet?",
+  "previousToolsPlaceholder": "z.B. Trello, Asana, Monday.com",
+  
+  "howHeardAbout": "Wie haben Sie von Worklenz erfahren?",
+  "howHeardAboutGoogleSearch": "Google-Suche",
+  "howHeardAboutTwitter": "Twitter",
+  "howHeardAboutLinkedin": "LinkedIn",
+  "howHeardAboutFriendColleague": "Ein Freund oder Kollege",
+  "howHeardAboutBlogArticle": "Ein Blog oder Artikel",
+  "howHeardAboutOther": "Andere",
+  
+  "aboutYouStepTitle": "Erzählen Sie uns von sich",
+  "aboutYouStepDescription": "Helfen Sie uns, Ihre Erfahrung zu personalisieren",
+  "yourNeedsStepTitle": "Was sind Ihre Hauptbedürfnisse?",
+  "yourNeedsStepDescription": "Wählen Sie alle zutreffenden aus, um uns bei der Einrichtung Ihres Arbeitsbereichs zu helfen",
+  "selected": "ausgewählt",
+  "previousToolsLabel": "Welche Tools haben Sie zuvor verwendet? (Optional)",
+  
+  "roleSuggestions": {
+    "designer": "UI/UX, Grafiken, Kreativ",
+    "developer": "Frontend, Backend, Full-stack", 
+    "projectManager": "Planung, Koordination",
+    "marketing": "Inhalt, Social Media, Wachstum",
+    "sales": "Geschäftsentwicklung, Kundenbeziehungen",
+    "operations": "Admin, HR, Finanzen"
+  },
+  
+  "languages": {
+    "en": "English",
+    "es": "Español", 
+    "pt": "Português",
+    "de": "Deutsch",
+    "alb": "Shqip",
+    "zh": "简体中文"
+  },
+  
+  "orgSuggestions": {
+    "tech": ["TechCorp", "DevStudio", "CodeCraft", "PixelForge"],
+    "creative": ["Creative Hub", "Design Studio", "Brand Works", "Visual Arts"],
+    "consulting": ["Strategy Group", "Business Solutions", "Expert Advisors", "Growth Partners"],
+    "startup": ["Innovation Labs", "Future Works", "Venture Co", "Next Gen"]
+  },
+  
+  "projectSuggestions": {
+    "freelancer": ["Kundenprojekt", "Portfolio-Update", "Persönliche Marke"],
+    "startup": ["MVP-Entwicklung", "Produktlaunch", "Marktforschung"],
+    "agency": ["Kundenkampagne", "Markenstrategie", "Website-Redesign"],
+    "enterprise": ["Systemumstellung", "Prozessoptimierung", "Teamschulung"]
+  },
+  
+  "useCaseDescriptions": {
+    "taskManagement": "Aufgaben organisieren und verfolgen",
+    "teamCollaboration": "Nahtlos zusammenarbeiten",
+    "resourcePlanning": "Zeit und Ressourcen verwalten", 
+    "clientCommunication": "Mit Kunden in Verbindung bleiben",
+    "timeTracking": "Projektstunden überwachen",
+    "other": "Etwas anderes"
+  }
 }
diff --git a/worklenz-frontend/public/locales/de/admin-center/configuration.json b/worklenz-frontend/public/locales/de/admin-center/configuration.json
new file mode 100644
index 000000000..79d33f278
--- /dev/null
+++ b/worklenz-frontend/public/locales/de/admin-center/configuration.json
@@ -0,0 +1,26 @@
+{
+  "billingDetails": "Abrechnungsdetails",
+  "name": "Name",
+  "namePlaceholder": "Name",
+  "emailAddress": "E-Mail-Adresse",
+  "emailPlaceholder": "E-Mail-Adresse",
+  "contactNumber": "Telefonnummer",
+  "phoneNumberPlaceholder": "Telefonnummer",
+  "phoneValidationError": "Telefonnummer muss genau 10 Ziffern haben",
+  "companyDetails": "Firmendetails",
+  "companyName": "Firmenname",
+  "companyNamePlaceholder": "Firmenname",
+  "addressLine01": "Adresszeile 01",
+  "addressLine01Placeholder": "Adresszeile 01",
+  "addressLine02": "Adresszeile 02",
+  "addressLine02Placeholder": "Adresszeile 02",
+  "country": "Land",
+  "countryPlaceholder": "Land",
+  "city": "Stadt",
+  "cityPlaceholder": "Stadt",
+  "state": "Bundesland",
+  "statePlaceholder": "Bundesland",
+  "postalCode": "Postleitzahl",
+  "postalCodePlaceholder": "Postleitzahl",
+  "save": "Speichern"
+}
\ No newline at end of file
diff --git a/worklenz-frontend/public/locales/de/admin-center/current-bill.json b/worklenz-frontend/public/locales/de/admin-center/current-bill.json
index fcf2c636e..b08056ea7 100644
--- a/worklenz-frontend/public/locales/de/admin-center/current-bill.json
+++ b/worklenz-frontend/public/locales/de/admin-center/current-bill.json
@@ -106,6 +106,7 @@
 
   "expirestoday": "heute",
   "expirestomorrow": "morgen",
+  "expiredDayAgo": "vor {{days}} Tag",
   "expiredDaysAgo": "vor {{days}} Tagen",
 
   "continueWith": "Fortfahren mit {{plan}}",
diff --git a/worklenz-frontend/public/locales/de/auth/signup.json b/worklenz-frontend/public/locales/de/auth/signup.json
index 8eb7e5a3e..885b81474 100644
--- a/worklenz-frontend/public/locales/de/auth/signup.json
+++ b/worklenz-frontend/public/locales/de/auth/signup.json
@@ -7,12 +7,12 @@
   "emailLabel": "E-Mail",
   "emailPlaceholder": "Ihre E-Mail-Adresse eingeben",
   "emailRequired": "Bitte geben Sie Ihre E-Mail-Adresse ein!",
-  "passwordLabel": "Password",
-  "passwordGuideline": "Password must be at least 8 characters, include uppercase and lowercase letters, a number, and a special character.",
-  "passwordPlaceholder": "Enter your password",
+  "passwordLabel": "Passwort",
+  "passwordGuideline": "Das Passwort muss mindestens 8 Zeichen lang sein und Groß- und Kleinbuchstaben, eine Zahl und ein Sonderzeichen enthalten.",
+  "passwordPlaceholder": "Geben Sie Ihr Passwort ein",
   "passwordRequired": "Bitte geben Sie Ihr Passwort ein!",
   "passwordMinCharacterRequired": "Das Passwort muss mindestens 8 Zeichen lang sein!",
-  "passwordMaxCharacterRequired": "Password must be at most 32 characters!",
+  "passwordMaxCharacterRequired": "Das Passwort darf maximal 32 Zeichen lang sein!",
   "passwordPatternRequired": "Das Passwort entspricht nicht den Anforderungen!",
   "strongPasswordPlaceholder": "Ein stärkeres Passwort eingeben",
   "passwordValidationAltText": "Das Passwort muss mindestens 8 Zeichen enthalten, mit Groß- und Kleinbuchstaben, einer Zahl und einem Sonderzeichen.",
diff --git a/worklenz-frontend/public/locales/de/common.json b/worklenz-frontend/public/locales/de/common.json
index 937ad4a9e..aaa8c93fa 100644
--- a/worklenz-frontend/public/locales/de/common.json
+++ b/worklenz-frontend/public/locales/de/common.json
@@ -5,5 +5,50 @@
   "signup-failed": "Registrierung fehlgeschlagen. Bitte füllen Sie alle erforderlichen Felder aus und versuchen Sie es erneut.",
   "reconnecting": "Vom Server getrennt.",
   "connection-lost": "Verbindung zum Server fehlgeschlagen. Bitte überprüfen Sie Ihre Internetverbindung.",
-  "connection-restored": "Erfolgreich mit dem Server verbunden"
+  "connection-restored": "Erfolgreich mit dem Server verbunden",
+  "cancel": "Abbrechen",
+  "update-available": "Worklenz aktualisiert!",
+  "update-description": "Eine neue Version von Worklenz ist verfügbar mit den neuesten Funktionen und Verbesserungen.",
+  "update-instruction": "Für die beste Erfahrung laden Sie bitte die Seite neu, um die neuen Änderungen zu übernehmen.",
+  "update-whats-new": "💡 <1>Was ist neu:</1> Verbesserte Leistung, Fehlerbehebungen und verbesserte Benutzererfahrung",
+  "update-now": "Jetzt aktualisieren",
+  "update-later": "Später",
+  "updating": "Wird aktualisiert...",
+  "license-expired-title": "Abonnement abgelaufen",
+  "license-expired-subtitle": "Ihr Worklenz-Abonnement ist beendet. Bitte erneuern Sie es, um alle Funktionen weiterhin zu nutzen.",
+  "license-expired-trial-title": "Testversion abgelaufen",
+  "license-expired-trial-subtitle": "Ihre Worklenz-Testversion ist beendet. Bitte upgraden Sie, um alle Funktionen weiter zu nutzen.",
+  "license-expired-custom-title": "Benutzerdefinierter Plan abgelaufen",
+  "license-expired-custom-subtitle": "Ihr benutzerdefinierter Plan ist abgelaufen. Bitte kontaktieren Sie den Support oder erneuern Sie ihn.",
+  "license-expired-features": "Jetzt erneuern und weiterhin genießen:",
+  "license-expired-trial-features": "Jetzt upgraden und freischalten:",
+  "license-expired-custom-features": "Support kontaktieren, um fortzufahren mit:",
+  "license-expired-feature-1": "✓ Unbegrenzte Projekte und Aufgaben",
+  "license-expired-feature-2": "✓ Erweiterte Berichte und Analysen",
+  "license-expired-feature-3": "✓ Team-Zusammenarbeitsfunktionen",
+  "license-expired-feature-4": "✓ Priority-Support",
+  "license-expired-upgrade": "Jetzt erneuern",
+  "license-expired-trial-upgrade": "Jetzt upgraden",
+  "license-expired-custom-upgrade": "Support kontaktieren",
+  "license-expired-contacting-support": "Support wird kontaktiert...",
+  "license-expired-message-sent": "Nachricht gesendet ✓",
+  "license-expired-days-remaining": "{{days}} Tage verbleiben in Ihrer Testversion",
+  "trial-expiring-soon": "Ihre Testversion läuft in {{days}} Tag ab",
+  "trial-expiring-soon_plural": "Ihre Testversion läuft in {{days}} Tagen ab",
+  "trial-expiring-today": "Ihre Testversion läuft heute ab!",
+  "trial-expiring-upgrade": "Upgraden Sie jetzt, um alle Ihre Daten zu behalten und ohne Unterbrechung fortzufahren",
+  "trial-badge-days": "{{days}}T übrig",
+  "trial-badge-today": "Letzter Tag!",
+  "trial-badge-hours": "{{hours}}h übrig",
+  "trial-alert-admin-note": "Sie können weiterhin auf das Admin Center zugreifen, um Ihr Abonnement zu verwalten",
+  "trial-alert-dismiss": "Für heute ausblenden",
+  "license-expiring-soon": "Ihre Lizenz läuft in {{days}} Tag ab",
+  "license-expiring-soon_plural": "Ihre Lizenz läuft in {{days}} Tagen ab",
+  "license-expiring-today": "Ihre Lizenz läuft heute ab!",
+  "license-expired-grace-period": "Ihre Lizenz ist abgelaufen. {{days}} Tag Gnadenfrist verbleibend",
+  "license-expired-grace-period_plural": "Ihre Lizenz ist abgelaufen. {{days}} Tage Gnadenfrist verbleibend",
+  "license-expiring-upgrade": "Erneuern Sie jetzt, um alle Ihre Daten zu behalten und ohne Unterbrechung fortzufahren",
+  "license-badge-days": "{{days}}T übrig",
+  "license-badge-today": "Letzter Tag!",
+  "license-badge-hours": "{{hours}}h übrig"
 }
diff --git a/worklenz-frontend/public/locales/de/home.json b/worklenz-frontend/public/locales/de/home.json
index cc8689521..bc9ff9acf 100644
--- a/worklenz-frontend/public/locales/de/home.json
+++ b/worklenz-frontend/public/locales/de/home.json
@@ -41,6 +41,22 @@
     "list": "Liste",
     "calendar": "Kalender",
     "tasks": "Aufgaben",
-    "refresh": "Aktualisieren"
+    "refresh": "Aktualisieren",
+    "recentActivity": "Aktuelle Aktivitäten",
+    "recentTasks": "Aktuelle Aufgaben",
+    "recentTasksSegment": "Aktuelle Aufgaben",
+    "timeLogged": "Erfasste Zeit",
+    "timeLoggedSegment": "Erfasste Zeit",
+    "noRecentTasks": "Keine aktuellen Aufgaben",
+    "noTimeLoggedTasks": "Keine Aufgaben mit erfasster Zeit",
+    "activityTag": "Aktivität",
+    "timeLogTag": "Zeiterfassung",
+    "timerTag": "Timer",
+    "activitySingular": "Aktivität",
+    "activityPlural": "Aktivitäten",
+    "recentTaskAriaLabel": "Aktuelle Aufgabe:",
+    "timeLoggedTaskAriaLabel": "Aufgabe mit erfasster Zeit:",
+    "errorLoadingRecentTasks": "Fehler beim Laden aktueller Aufgaben",
+    "errorLoadingTimeLoggedTasks": "Fehler beim Laden der Zeiterfassung"
   }
 }
diff --git a/worklenz-frontend/public/locales/de/kanban-board.json b/worklenz-frontend/public/locales/de/kanban-board.json
index 70e1f6cab..10b58b95b 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/navbar.json b/worklenz-frontend/public/locales/de/navbar.json
index c84912e42..95ebe690b 100644
--- a/worklenz-frontend/public/locales/de/navbar.json
+++ b/worklenz-frontend/public/locales/de/navbar.json
@@ -18,6 +18,7 @@
   "profileTooltip": "Profil anzeigen",
   "adminCenter": "Admin-Center",
   "settings": "Einstellungen",
+  "deleteAccount": "Account Löschen",
   "logOut": "Abmelden",
   "notificationsDrawer": {
     "read": "Gelesene Benachrichtigungen",
diff --git a/worklenz-frontend/public/locales/de/project-view-members.json b/worklenz-frontend/public/locales/de/project-view-members.json
index eee5d0a1c..4e40f7576 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 cb391b2cb..b92056e87 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/labels.json b/worklenz-frontend/public/locales/de/settings/labels.json
index 18b6a0218..8514b5cd5 100644
--- a/worklenz-frontend/public/locales/de/settings/labels.json
+++ b/worklenz-frontend/public/locales/de/settings/labels.json
@@ -7,5 +7,9 @@
   "searchPlaceholder": "Nach Name suchen",
   "emptyText": "Labels können beim Aktualisieren oder Erstellen von Aufgaben erstellt werden.",
   "pinTooltip": "Zum Anheften an das Hauptmenü klicken",
-  "colorChangeTooltip": "Zum Ändern der Farbe klicken"
+  "colorChangeTooltip": "Zum Ändern der Farbe klicken",
+  "pageTitle": "Labels verwalten",
+  "deleteConfirmTitle": "Sind Sie sicher, dass Sie dies löschen möchten?",
+  "deleteButton": "Löschen",
+  "cancelButton": "Abbrechen"
 }
diff --git a/worklenz-frontend/public/locales/de/settings/team-members.json b/worklenz-frontend/public/locales/de/settings/team-members.json
index d223f08ea..55c017131 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/de/survey.json b/worklenz-frontend/public/locales/de/survey.json
new file mode 100644
index 000000000..92b7c8ceb
--- /dev/null
+++ b/worklenz-frontend/public/locales/de/survey.json
@@ -0,0 +1,14 @@
+{
+  "modalTitle": "Helfen Sie uns, Ihre Erfahrung zu verbessern",
+  "skip": "Für jetzt überspringen",
+  "previous": "Zurück",
+  "next": "Weiter",
+  "completeSurvey": "Umfrage abschließen",
+  "submitting": "Ihre Antworten werden übermittelt...",
+  "submitSuccessTitle": "Danke!",
+  "submitSuccessSubtitle": "Ihr Feedback hilft uns, Worklenz für alle zu verbessern.",
+  "submitSuccessMessage": "Danke, dass Sie die Umfrage abgeschlossen haben!",
+  "submitErrorMessage": "Umfrage konnte nicht übermittelt werden. Bitte versuchen Sie es erneut.",
+  "submitErrorLog": "Umfrageübermittlung fehlgeschlagen",
+  "fetchErrorLog": "Umfrageabruf fehlgeschlagen"
+} 
\ No newline at end of file
diff --git a/worklenz-frontend/public/locales/de/task-list-filters.json b/worklenz-frontend/public/locales/de/task-list-filters.json
index 18d50b6c0..19280036e 100644
--- a/worklenz-frontend/public/locales/de/task-list-filters.json
+++ b/worklenz-frontend/public/locales/de/task-list-filters.json
@@ -84,5 +84,12 @@
   "close": "Schließen",
   "cannotMoveStatus": "Status kann nicht verschoben werden",
   "cannotMoveStatusMessage": "Dieser Status kann nicht verschoben werden, da die Kategorie '{{categoryName}}' leer bleiben würde. Jede Kategorie muss mindestens einen Status haben.",
-  "ok": "OK"
+  "ok": "OK",
+  "clearSort": "Sortierung löschen",
+  "sortAscending": "Aufsteigend sortieren",
+  "sortDescending": "Absteigend sortieren",
+  "sortByField": "Sortieren nach {{field}}",
+  "ascendingOrder": "Aufsteigend",
+  "descendingOrder": "Absteigend",
+  "currentSort": "Aktuelle Sortierung: {{field}} {{order}}"
 }
diff --git a/worklenz-frontend/public/locales/de/task-list-table.json b/worklenz-frontend/public/locales/de/task-list-table.json
index 23439a1b8..4adfd5f7a 100644
--- a/worklenz-frontend/public/locales/de/task-list-table.json
+++ b/worklenz-frontend/public/locales/de/task-list-table.json
@@ -57,6 +57,9 @@
 
   "contextMenu": {
     "assignToMe": "Mir zuweisen",
+    "copyLink": "Link zur Aufgabe kopieren",
+    "linkCopied": "Link in die Zwischenablage kopiert",
+    "linkCopyFailed": "Fehler beim Kopieren des Links",
     "moveTo": "Verschieben nach",
     "unarchive": "Dearchivieren",
     "archive": "Archivieren",
@@ -133,5 +136,11 @@
       "dependencies": "Aufgabe hat Abhängigkeiten",
       "recurring": "Wiederkehrende Aufgabe"
     }
+  },
+
+  "timer": {
+    "conflictTitle": "Timer läuft bereits",
+    "conflictMessage": "Sie haben einen Timer für \"{{taskName}}\" im Projekt \"{{projectName}}\" laufen. Möchten Sie diesen Timer stoppen und einen neuen für diese Aufgabe starten?",
+    "stopAndStart": "Stoppen & Neuen Timer starten"
   }
 }
diff --git a/worklenz-frontend/public/locales/en/account-setup.json b/worklenz-frontend/public/locales/en/account-setup.json
index 5e71ca40b..1d960237f 100644
--- a/worklenz-frontend/public/locales/en/account-setup.json
+++ b/worklenz-frontend/public/locales/en/account-setup.json
@@ -1,15 +1,35 @@
 {
   "continue": "Continue",
 
-  "setupYourAccount": "Setup Your Worklenz Account.",
+  "setupYourAccount": "Setup Your Account.",
   "organizationStepTitle": "Name Your Organization",
-  "organizationStepLabel": "Pick a name for your Worklenz account.",
+  "organizationStepWelcome": "Welcome to Worklenz!",
+  "organizationStepDescription": "Let's start by setting up your organization. This will be the main workspace for your team.",
+  "organizationStepLabel": "Organization name",
+  "organizationStepPlaceholder": "e.g. Acme Corporation",
+  "organizationStepTooltip": "This name will appear in your workspace and can be changed later in settings.",
+  "organizationStepNeedIdeas": "Need ideas?",
+  "organizationStepUseDetected": "Use detected:",
+  "organizationStepCharacters": "characters",
+  "organizationStepGoodLength": "Good length",
+  "organizationStepTooShort": "Too short",
+  "organizationStepNamingTips": "Naming Tips",
+  "organizationStepTip1": "Keep it simple and memorable",
+  "organizationStepTip2": "Reflect your industry or values", 
+  "organizationStepTip3": "Think about future growth",
+  "organizationStepTip4": "Make it unique and brandable",
+  "organizationStepSuggestionsTitle": "Name Suggestions",
+  "organizationStepCategory1": "Tech Companies",
+  "organizationStepCategory2": "Creative Agencies", 
+  "organizationStepCategory3": "Consulting",
+  "organizationStepCategory4": "Startups",
+  "organizationStepSuggestionsNote": "These are just examples to get you started. Choose something that represents your organization.",
+  "organizationStepPrivacyNote": "Your organization name is private and only visible to your team members.",
 
   "projectStepTitle": "Create your first project",
   "projectStepLabel": "What project are you working on right now?",
   "projectStepPlaceholder": "e.g. Marketing Plan",
 
-  "tasksStepTitle": "Create your first tasks",
   "tasksStepLabel": "Type a few tasks that you are going to do in",
   "tasksStepAddAnother": "Add another",
 
@@ -24,8 +44,169 @@
   "step3InputLabel": "Invite with email",
   "addAnother": "Add another",
   "skipForNow": "Skip for now",
+  "skipping": "Skipping...",
   "formTitle": "Create your first task.",
   "step3Title": "Invite your team to work with",
   "maxMembers": " (You can invite up to 5 members)",
-  "maxTasks": " (You can create up to 5 tasks)"
+  "maxTasks": " (You can create up to 5 tasks)",
+
+  "membersStepTitle": "Invite your team",
+  "membersStepDescription": "Add team members to \"{{organizationName}}\" and start collaborating",
+  "memberPlaceholder": "Team member {{index}} - Enter email address",
+  "validEmailAddress": "Valid email address",
+  "addAnotherTeamMember": "Add another team member ({{current}}/{{max}})",
+  "canInviteLater": "You can always invite team members later",
+  "skipStepDescription": "Don't have email addresses ready? No problem! You can skip this step and invite team members from your project dashboard later.",
+
+  "orgCategoryTech": "Tech Companies",
+  "orgCategoryCreative": "Creative Agencies", 
+  "orgCategoryConsulting": "Consulting",
+  "orgCategoryStartups": "Startups",
+  "namingTip1": "Keep it simple and memorable",
+  "namingTip2": "Reflect your industry or values",
+  "namingTip3": "Think about future growth",
+  "namingTip4": "Make it unique and brandable",
+
+  "aboutYouTitle": "Tell us about yourself",
+  "aboutYouDescription": "Help us personalize your experience",
+  "orgTypeQuestion": "What best describes your organization?",
+  "userRoleQuestion": "What's your role?",
+  
+  "yourNeedsTitle": "What are your main needs?",
+  "yourNeedsDescription": "Select all that apply to help us set up your workspace",
+  "yourNeedsQuestion": "How will you primarily use Worklenz?",
+  "useCaseTaskOrg": "Organize and track tasks",
+  "useCaseTeamCollab": "Work together seamlessly", 
+  "useCaseResourceMgmt": "Manage time and resources",
+  "useCaseClientComm": "Stay connected with clients",
+  "useCaseTimeTrack": "Monitor project hours",
+  "useCaseOther": "Something else",
+  "selectedText": "selected",
+  "previousToolsQuestion": "What tools have you used before? (Optional)",
+  
+  "discoveryTitle": "One last thing...",
+  "discoveryDescription": "Help us understand how you discovered Worklenz",
+  "discoveryQuestion": "How did you hear about us?",
+  "allSetTitle": "You're all set!",
+  "allSetDescription": "Let's create your first project and get started with Worklenz",
+  "surveyCompleteTitle": "Thank you!",
+  "surveyCompleteDescription": "Your feedback helps us improve Worklenz for everyone",
+  "aboutYouStepName": "About You",
+  "yourNeedsStepName": "Your Needs", 
+  "discoveryStepName": "Discovery",
+  "stepProgress": "Step {step} of 3: {title}",
+
+  "projectStepHeader": "Let's create your first project",
+  "projectStepSubheader": "Start from scratch or use a template to get going faster",
+  "startFromScratch": "Start from scratch",
+  "templateSelected": "Template selected below",
+  "quickSuggestions": "Quick suggestions:",
+  "orText": "OR",
+  "startWithTemplate": "Start with a template",
+  "clearToSelectTemplate": "Clear project name above to select a template",
+  "templateHeadStart": "Get a head start with pre-built project structures",
+  "browseAllTemplates": "Browse All Templates",
+  "templatesAvailable": "15+ industry-specific templates available",
+  "chooseTemplate": "Choose a template that matches your project type",
+  "createProject": "Create Project",
+
+  "templateSoftwareDev": "Software Development",
+  "templateSoftwareDesc": "Agile sprints, bug tracking, releases",
+  "templateMarketing": "Marketing Campaign", 
+  "templateMarketingDesc": "Campaign planning, content calendar",
+  "templateConstruction": "Construction Project",
+  "templateConstructionDesc": "Phases, permits, contractors",
+  "templateStartup": "Startup Launch",
+  "templateStartupDesc": "MVP development, funding, growth",
+
+  "tasksStepTitle": "Add your first tasks",
+  "tasksStepDescription": "Break down \"{{projectName}}\" into actionable tasks to get started",
+  "taskPlaceholder": "Task {{index}} - e.g., What needs to be done?",
+  "addAnotherTask": "Add another task ({{current}}/{{max}})",
+
+  "surveyStepTitle": "Tell us about yourself",
+  "surveyStepLabel": "Help us personalize your Worklenz experience by answering a few questions.",
+  
+  "organizationType": "What best describes your organization?",
+  "organizationTypeFreelancer": "Freelancer",
+  "organizationTypeStartup": "Startup",
+  "organizationTypeSmallMediumBusiness": "Small or Medium Business",
+  "organizationTypeAgency": "Agency",
+  "organizationTypeEnterprise": "Enterprise",
+  "organizationTypeOther": "Other",
+  
+  "userRole": "What is your role?",
+  "userRoleFounderCeo": "Founder / CEO",
+  "userRoleProjectManager": "Project Manager",
+  "userRoleSoftwareDeveloper": "Software Developer",
+  "userRoleDesigner": "Designer",
+  "userRoleOperations": "Operations",
+  "userRoleOther": "Other",
+  
+  "mainUseCases": "What will you mainly use Worklenz for?",
+  "mainUseCasesTaskManagement": "Task management",
+  "mainUseCasesTeamCollaboration": "Team collaboration",
+  "mainUseCasesResourcePlanning": "Resource planning",
+  "mainUseCasesClientCommunication": "Client communication & reporting",
+  "mainUseCasesTimeTracking": "Time tracking",
+  "mainUseCasesOther": "Other",
+  
+  "previousTools": "What tool(s) were you using before Worklenz?",
+  "previousToolsPlaceholder": "e.g. Trello, Asana, Monday.com",
+  
+  "howHeardAbout": "How did you hear about Worklenz?",
+  "howHeardAboutGoogleSearch": "Google Search",
+  "howHeardAboutTwitter": "Twitter",
+  "howHeardAboutLinkedin": "LinkedIn",
+  "howHeardAboutFriendColleague": "A friend or colleague",
+  "howHeardAboutBlogArticle": "A blog or article",
+  "howHeardAboutOther": "Other",
+  
+  "aboutYouStepTitle": "Tell us about yourself",
+  "aboutYouStepDescription": "Help us personalize your experience",
+  "yourNeedsStepTitle": "What are your main needs?",
+  "yourNeedsStepDescription": "Select all that apply to help us set up your workspace",
+  "selected": "selected",
+  "previousToolsLabel": "What tools have you used before? (Optional)",
+  
+  "roleSuggestions": {
+    "designer": "UI/UX, Graphics, Creative",
+    "developer": "Frontend, Backend, Full-stack", 
+    "projectManager": "Planning, Coordination",
+    "marketing": "Content, Social Media, Growth",
+    "sales": "Business Development, Client Relations",
+    "operations": "Admin, HR, Finance"
+  },
+  
+  "languages": {
+    "en": "English",
+    "es": "Español", 
+    "pt": "Português",
+    "de": "Deutsch",
+    "alb": "Shqip",
+    "zh": "简体中文"
+  },
+  
+  "orgSuggestions": {
+    "tech": ["TechCorp", "DevStudio", "CodeCraft", "PixelForge"],
+    "creative": ["Creative Hub", "Design Studio", "Brand Works", "Visual Arts"],
+    "consulting": ["Strategy Group", "Business Solutions", "Expert Advisors", "Growth Partners"],
+    "startup": ["Innovation Labs", "Future Works", "Venture Co", "Next Gen"]
+  },
+  
+  "projectSuggestions": {
+    "freelancer": ["Client Project", "Portfolio Update", "Personal Brand"],
+    "startup": ["MVP Development", "Product Launch", "Market Research"],
+    "agency": ["Client Campaign", "Brand Strategy", "Website Redesign"],
+    "enterprise": ["System Migration", "Process Optimization", "Team Training"]
+  },
+  
+  "useCaseDescriptions": {
+    "taskManagement": "Organize and track tasks",
+    "teamCollaboration": "Work together seamlessly",
+    "resourcePlanning": "Manage time and resources", 
+    "clientCommunication": "Stay connected with clients",
+    "timeTracking": "Monitor project hours",
+    "other": "Something else"
+  }
 }
diff --git a/worklenz-frontend/public/locales/en/admin-center/configuration.json b/worklenz-frontend/public/locales/en/admin-center/configuration.json
new file mode 100644
index 000000000..782932390
--- /dev/null
+++ b/worklenz-frontend/public/locales/en/admin-center/configuration.json
@@ -0,0 +1,26 @@
+{
+  "billingDetails": "Billing Details",
+  "name": "Name",
+  "namePlaceholder": "Name",
+  "emailAddress": "Email Address",
+  "emailPlaceholder": "Email Address",
+  "contactNumber": "Contact Number",
+  "phoneNumberPlaceholder": "Phone Number",
+  "phoneValidationError": "Phone number must be exactly 10 digits",
+  "companyDetails": "Company Details",
+  "companyName": "Company Name",
+  "companyNamePlaceholder": "Company Name",
+  "addressLine01": "Address Line 01",
+  "addressLine01Placeholder": "Address Line 01",
+  "addressLine02": "Address Line 02",
+  "addressLine02Placeholder": "Address Line 02",
+  "country": "Country",
+  "countryPlaceholder": "Country",
+  "city": "City",
+  "cityPlaceholder": "City",
+  "state": "State",
+  "statePlaceholder": "State",
+  "postalCode": "Postal Code",
+  "postalCodePlaceholder": "Postal Code",
+  "save": "Save"
+}
\ No newline at end of file
diff --git a/worklenz-frontend/public/locales/en/admin-center/current-bill.json b/worklenz-frontend/public/locales/en/admin-center/current-bill.json
index fe840789c..b47141c7e 100644
--- a/worklenz-frontend/public/locales/en/admin-center/current-bill.json
+++ b/worklenz-frontend/public/locales/en/admin-center/current-bill.json
@@ -106,6 +106,7 @@
 
   "expirestoday": "today",
   "expirestomorrow": "tomorrow",
+  "expiredDayAgo": "{{days}} day ago",
   "expiredDaysAgo": "{{days}} days ago",
 
   "continueWith": "Continue with {{plan}}",
@@ -117,5 +118,26 @@
   "currentSeatsText": "You currently have {{seats}} seats available.",
   "selectSeatsText": "Please select the number of additional seats to purchase.",
   "purchase": "Purchase",
-  "contactSales": "Contact sales"
+  "contactSales": "Contact sales",
+  "submitSuccess": "Code redeemed successfully!",
+  "submitSuccessDescription": "Your account has been updated with the new credits.",
+  "percentUsed": "% Used",
+  "sizeUnits": {
+    "bytes": "Bytes",
+    "kb": "KB", 
+    "mb": "MB",
+    "gb": "GB",
+    "tb": "TB"
+  },
+  "seatPerMonth": "seat / month",
+  "totalPrice": "Total $",
+  "tryForFree": "Try for free",
+  "subscriptionUpdateSuccess": "Subscription updated successfully!",
+  "paymentProcessorError": "Failed to load payment processor",
+  "seatsLabel": "Seats:",
+  "requiredField": "*",
+  "purchaseSeatsTextSingle": "To continue, you'll need to purchase an additional seat.",
+  "singleUserNote": "You currently have 1 seat available.",
+  "selectSeatsTextSingle": "Please select the number of additional seats to purchase.",
+  "phoneNumberPattern": "07xxxxxxxx"
 }
diff --git a/worklenz-frontend/public/locales/en/admin-center/overview.json b/worklenz-frontend/public/locales/en/admin-center/overview.json
index efc42855f..3ec4329b3 100644
--- a/worklenz-frontend/public/locales/en/admin-center/overview.json
+++ b/worklenz-frontend/public/locales/en/admin-center/overview.json
@@ -4,5 +4,8 @@
   "owner": "Organization Owner",
   "admins": "Organization Admins",
   "contactNumber": "Add Contact Number",
-  "edit": "Edit"
+  "edit": "Edit",
+  "emailAddress": "Email Address",
+  "enterOrganizationName": "Enter organization name",
+  "ownerSuffix": " (Owner)"
 }
diff --git a/worklenz-frontend/public/locales/en/admin-center/users.json b/worklenz-frontend/public/locales/en/admin-center/users.json
index 7e462ef6f..db2641a43 100644
--- a/worklenz-frontend/public/locales/en/admin-center/users.json
+++ b/worklenz-frontend/public/locales/en/admin-center/users.json
@@ -5,5 +5,6 @@
   "user": "User",
   "email": "Email",
   "lastActivity": "Last Activity",
-  "refresh": "Refresh users"
+  "refresh": "Refresh users",
+  "name": "Name"
 }
diff --git a/worklenz-frontend/public/locales/en/common.json b/worklenz-frontend/public/locales/en/common.json
index 815560beb..22b224847 100644
--- a/worklenz-frontend/public/locales/en/common.json
+++ b/worklenz-frontend/public/locales/en/common.json
@@ -5,5 +5,50 @@
   "signup-failed": "Signup failed. Please ensure all required fields are filled and try again.",
   "reconnecting": "Disconnected from server.",
   "connection-lost": "Failed to connect to server. Please check your internet connection.",
-  "connection-restored": "Connected to server successfully"
+  "connection-restored": "Connected to server successfully",
+  "cancel": "Cancel",
+  "update-available": "Worklenz Updated!",
+  "update-description": "A new version of Worklenz is available with the latest features and improvements.",
+  "update-instruction": "To get the best experience, please reload the page to apply the new changes.",
+  "update-whats-new": "💡 <1>What's new:</1> Enhanced performance, bug fixes, and improved user experience",
+  "update-now": "Update Now",
+  "update-later": "Later",
+  "updating": "Updating...",
+  "license-expired-title": "Subscription Expired",
+  "license-expired-subtitle": "Your Worklenz subscription has ended. Please renew to continue enjoying all features.",
+  "license-expired-trial-title": "Trial Period Expired", 
+  "license-expired-trial-subtitle": "Your Worklenz trial has ended. Please upgrade to continue enjoying all features.",
+  "license-expired-custom-title": "Custom Plan Expired",
+  "license-expired-custom-subtitle": "Your custom plan has expired. Please contact support or renew to continue.",
+  "license-expired-features": "Renew now to continue enjoying:",
+  "license-expired-trial-features": "Upgrade now to unlock:",
+  "license-expired-custom-features": "Contact support to continue with:",
+  "license-expired-feature-1": "✓ Unlimited projects and tasks",
+  "license-expired-feature-2": "✓ Advanced reporting and analytics",
+  "license-expired-feature-3": "✓ Team collaboration features",
+  "license-expired-feature-4": "✓ Priority support",
+  "license-expired-upgrade": "Renew Now",
+  "license-expired-trial-upgrade": "Upgrade Now",
+  "license-expired-custom-upgrade": "Contact Support",
+  "license-expired-contacting-support": "Contacting Support...",
+  "license-expired-message-sent": "Message Sent ✓",
+  "license-expired-days-remaining": "{{days}} days remaining in your trial",
+  "trial-expiring-soon": "Your trial expires in {{days}} day",
+  "trial-expiring-soon_plural": "Your trial expires in {{days}} days",
+  "trial-expiring-today": "Your trial expires today!",
+  "trial-expiring-upgrade": "Upgrade now to keep all your data and continue without interruption",
+  "trial-badge-days": "{{days}}d left",
+  "trial-badge-today": "Last day!",
+  "trial-badge-hours": "{{hours}}h left",
+  "trial-alert-admin-note": "You can still access the Admin Center to manage your subscription",
+  "trial-alert-dismiss": "Dismiss for today",
+  "license-expiring-soon": "Your license expires in {{days}} day",
+  "license-expiring-soon_plural": "Your license expires in {{days}} days",
+  "license-expiring-today": "Your license expires today!",
+  "license-expired-grace-period": "Your license has expired. {{days}} day grace period remaining",
+  "license-expired-grace-period_plural": "Your license has expired. {{days}} days grace period remaining",
+  "license-expiring-upgrade": "Renew now to keep all your data and continue without interruption",
+  "license-badge-days": "{{days}}d left",
+  "license-badge-today": "Last day!",
+  "license-badge-hours": "{{hours}}h left"
 }
diff --git a/worklenz-frontend/public/locales/en/home.json b/worklenz-frontend/public/locales/en/home.json
index ccf40936e..cfd513107 100644
--- a/worklenz-frontend/public/locales/en/home.json
+++ b/worklenz-frontend/public/locales/en/home.json
@@ -41,6 +41,22 @@
     "list": "List",
     "calendar": "Calendar",
     "tasks": "Tasks",
-    "refresh": "Refresh"
+    "refresh": "Refresh",
+    "recentActivity": "Recent Activity",
+    "recentTasks": "Recent Tasks",
+    "recentTasksSegment": "Recent Tasks",
+    "timeLogged": "Time Logged",
+    "timeLoggedSegment": "Time Logged",
+    "noRecentTasks": "No recent tasks",
+    "noTimeLoggedTasks": "No time logged tasks",
+    "activityTag": "Activity",
+    "timeLogTag": "Time Log", 
+    "timerTag": "Timer",
+    "activitySingular": "activity",
+    "activityPlural": "activities",
+    "recentTaskAriaLabel": "Recent task:",
+    "timeLoggedTaskAriaLabel": "Time logged task:",
+    "errorLoadingRecentTasks": "Error loading recent tasks",
+    "errorLoadingTimeLoggedTasks": "Error loading time logged tasks"
   }
 }
diff --git a/worklenz-frontend/public/locales/en/kanban-board.json b/worklenz-frontend/public/locales/en/kanban-board.json
index e295a6c68..776591522 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/navbar.json b/worklenz-frontend/public/locales/en/navbar.json
index e7e22cb30..a63de500b 100644
--- a/worklenz-frontend/public/locales/en/navbar.json
+++ b/worklenz-frontend/public/locales/en/navbar.json
@@ -18,6 +18,7 @@
   "profileTooltip": "View profile",
   "adminCenter": "Admin Center",
   "settings": "Settings",
+  "deleteAccount": "Delete Account",
   "logOut": "Log Out",
   "notificationsDrawer": {
     "read": "Read notifications",
diff --git a/worklenz-frontend/public/locales/en/project-view-members.json b/worklenz-frontend/public/locales/en/project-view-members.json
index 6ed8ddf0c..fd15ca71b 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 ad2d60c8c..29262250b 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/account-deletion.json b/worklenz-frontend/public/locales/en/settings/account-deletion.json
new file mode 100644
index 000000000..13a2e80b7
--- /dev/null
+++ b/worklenz-frontend/public/locales/en/settings/account-deletion.json
@@ -0,0 +1,29 @@
+{
+  "title": "Account Deletion",
+  "dangerZone": "Danger Zone",
+  "warningTitle": "Warning: This action cannot be undone",
+  "warningDescription1": "Deleting your account will:",
+  "warningPoint1": "Permanently delete all your personal data",
+  "warningPoint2": "Remove you from all teams and projects",
+  "warningPoint3": "Delete all your created content and contributions",
+  "warningPoint4": "Cancel any active subscriptions",
+  "warningDescription2": "Your data will be permanently deleted within 30 days of your request.",
+  "beforeDeletion": "Before deleting your account, please:",
+  "exportData": "Export any important data you wish to keep",
+  "cancelSubscription": "Ensure all subscriptions are cancelled",
+  "informTeam": "Inform your team members about your departure",
+  "deleteAccountButton": "Delete My Account",
+  "confirmDeletionTitle": "Confirm Account Deletion",
+  "finalWarning": "This action is permanent and cannot be reversed!",
+  "confirmationInstructions": "To confirm deletion, please type the word below exactly as shown:",
+  "typeDeleteToConfirm": "Type DELETE to confirm",
+  "confirmDelete": "Yes, Delete My Account",
+  "cancel": "Cancel",
+  "invalidConfirmation": "Please type DELETE to confirm",
+  "deletionRequestSuccess": "Account deletion request submitted successfully",
+  "requestSubmitted": "Request Submitted",
+  "deletionConfirmationMessage": "Your account deletion request has been received. Your account and all associated data will be permanently deleted within 30 days. You will now be logged out.",
+  "deletionRequestFailed": "Failed to submit deletion request. Please try again.",
+  "dataRetentionNotice": "Data Retention Notice",
+  "dataRetentionDescription": "As per our data retention policy, your account and all associated data will be permanently deleted within 30 days. This process cannot be reversed once initiated."
+}
\ No newline at end of file
diff --git a/worklenz-frontend/public/locales/en/settings/labels.json b/worklenz-frontend/public/locales/en/settings/labels.json
index 5c3d24799..4e1e173c1 100644
--- a/worklenz-frontend/public/locales/en/settings/labels.json
+++ b/worklenz-frontend/public/locales/en/settings/labels.json
@@ -7,5 +7,9 @@
   "searchPlaceholder": "Search by name",
   "emptyText": "Labels can be created while updating or creating tasks.",
   "pinTooltip": "Click to pin this into the main menu",
-  "colorChangeTooltip": "Click to change color"
+  "colorChangeTooltip": "Click to change color",
+  "pageTitle": "Manage Labels",
+  "deleteConfirmTitle": "Are you sure you want to delete this?",
+  "deleteButton": "Delete",
+  "cancelButton": "Cancel"
 }
diff --git a/worklenz-frontend/public/locales/en/settings/sidebar.json b/worklenz-frontend/public/locales/en/settings/sidebar.json
index d0b648299..5ab7b3ada 100644
--- a/worklenz-frontend/public/locales/en/settings/sidebar.json
+++ b/worklenz-frontend/public/locales/en/settings/sidebar.json
@@ -11,5 +11,6 @@
   "teams": "Teams",
   "change-password": "Change Password",
   "language-and-region": "Language and Region",
-  "appearance": "Appearance"
+  "appearance": "Appearance",
+  "account-deletion": "Delete Account"
 }
diff --git a/worklenz-frontend/public/locales/en/settings/team-members.json b/worklenz-frontend/public/locales/en/settings/team-members.json
index 36918b90a..d59f2cf21 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/en/survey.json b/worklenz-frontend/public/locales/en/survey.json
new file mode 100644
index 000000000..d6b13b3f2
--- /dev/null
+++ b/worklenz-frontend/public/locales/en/survey.json
@@ -0,0 +1,14 @@
+{
+  "modalTitle": "Help Us Improve Your Experience",
+  "skip": "Skip for now",
+  "previous": "Previous",
+  "next": "Next",
+  "completeSurvey": "Complete Survey",
+  "submitting": "Submitting your responses...",
+  "submitSuccessTitle": "Thank you!",
+  "submitSuccessSubtitle": "Your feedback helps us improve Worklenz for everyone.",
+  "submitSuccessMessage": "Thank you for completing the survey!",
+  "submitErrorMessage": "Failed to submit survey. Please try again.",
+  "submitErrorLog": "Failed to submit survey",
+  "fetchErrorLog": "Failed to fetch survey"
+} 
\ No newline at end of file
diff --git a/worklenz-frontend/public/locales/en/task-list-filters.json b/worklenz-frontend/public/locales/en/task-list-filters.json
index 118ac4ce1..b104052c0 100644
--- a/worklenz-frontend/public/locales/en/task-list-filters.json
+++ b/worklenz-frontend/public/locales/en/task-list-filters.json
@@ -84,5 +84,12 @@
   "close": "Close",
   "cannotMoveStatus": "Cannot Move Status",
   "cannotMoveStatusMessage": "Cannot move this status because it would leave the '{{categoryName}}' category empty. Each category must have at least one status.",
-  "ok": "OK"
+  "ok": "OK",
+  "clearSort": "Clear Sort",
+  "sortAscending": "Sort Ascending",
+  "sortDescending": "Sort Descending",
+  "sortByField": "Sort by {{field}}",
+  "ascendingOrder": "Ascending",
+  "descendingOrder": "Descending",
+  "currentSort": "Current sort: {{field}} {{order}}"
 }
diff --git a/worklenz-frontend/public/locales/en/task-list-table.json b/worklenz-frontend/public/locales/en/task-list-table.json
index abd97ca5e..f20fdadc0 100644
--- a/worklenz-frontend/public/locales/en/task-list-table.json
+++ b/worklenz-frontend/public/locales/en/task-list-table.json
@@ -57,6 +57,9 @@
 
   "contextMenu": {
     "assignToMe": "Assign to me",
+    "copyLink": "Copy link to task",
+    "linkCopied": "Link copied to clipboard",
+    "linkCopyFailed": "Failed to copy link",
     "moveTo": "Move to",
     "unarchive": "Unarchive",
     "archive": "Archive",
@@ -133,5 +136,11 @@
       "dependencies": "Task has dependencies",
       "recurring": "Recurring task"
     }
+  },
+
+  "timer": {
+    "conflictTitle": "Timer Already Running",
+    "conflictMessage": "You have a timer running for \"{{taskName}}\" in project \"{{projectName}}\". Would you like to stop that timer and start a new one for this task?",
+    "stopAndStart": "Stop & Start New Timer"
   }
 }
diff --git a/worklenz-frontend/public/locales/es/account-setup.json b/worklenz-frontend/public/locales/es/account-setup.json
index 3f7b013ee..98694ba3d 100644
--- a/worklenz-frontend/public/locales/es/account-setup.json
+++ b/worklenz-frontend/public/locales/es/account-setup.json
@@ -3,7 +3,28 @@
 
   "setupYourAccount": "Configura tu cuenta.",
   "organizationStepTitle": "Nombra tu organización",
-  "organizationStepLabel": "Elige un nombre para tu cuenta de Worklenz.",
+  "organizationStepWelcome": "¡Bienvenido a Worklenz!",
+  "organizationStepDescription": "Comencemos configurando tu organización. Este será el espacio de trabajo principal para tu equipo.",
+  "organizationStepLabel": "Nombre de la organización",
+  "organizationStepPlaceholder": "ej. Corporación Acme",
+  "organizationStepTooltip": "Este nombre aparecerá en tu espacio de trabajo y se puede cambiar más tarde en la configuración.",
+  "organizationStepNeedIdeas": "¿Necesitas ideas?",
+  "organizationStepUseDetected": "Usar detectado:",
+  "organizationStepCharacters": "caracteres",
+  "organizationStepGoodLength": "Buena longitud",
+  "organizationStepTooShort": "Demasiado corto",
+  "organizationStepNamingTips": "Consejos para nombrar",
+  "organizationStepTip1": "Manténlo simple y memorable",
+  "organizationStepTip2": "Refleja tu industria o valores",
+  "organizationStepTip3": "Piensa en el crecimiento futuro",
+  "organizationStepTip4": "Hazlo único y reconocible",
+  "organizationStepSuggestionsTitle": "Sugerencias de nombres",
+  "organizationStepCategory1": "Empresas tecnológicas",
+  "organizationStepCategory2": "Agencias creativas",
+  "organizationStepCategory3": "Consultoría",
+  "organizationStepCategory4": "Startups",
+  "organizationStepSuggestionsNote": "Estos son solo ejemplos para empezar. Elige algo que represente a tu organización.",
+  "organizationStepPrivacyNote": "El nombre de tu organización es privado y solo visible para los miembros de tu equipo.",
 
   "projectStepTitle": "Crea tu primer proyecto",
   "projectStepLabel": "¿En qué proyecto estás trabajando ahora?",
@@ -24,9 +45,171 @@
   "step3InputLabel": "Invitar por correo electrónico",
   "addAnother": "Agregar otro",
   "skipForNow": "Omitir por ahora",
+  "skipping": "Omitiendo...",
   "formTitle": "Crea tu primera tarea.",
   "step3Title": "Invita a tu equipo a trabajar",
 
   "maxMembers": " (Puedes invitar hasta 5 miembros)",
-  "maxTasks": " (Puedes crear hasta 5 tareas)"
+  "maxTasks": " (Puedes crear hasta 5 tareas)",
+
+  "membersStepTitle": "Invita a tu equipo",
+  "membersStepDescription": "Añade miembros del equipo a \"{{organizationName}}\" y comienza a colaborar",
+  "memberPlaceholder": "Miembro del equipo {{index}} - Ingresa dirección de correo",
+  "validEmailAddress": "Dirección de correo válida",
+  "addAnotherTeamMember": "Añadir otro miembro del equipo ({{current}}/{{max}})",
+  "canInviteLater": "Siempre puedes invitar miembros del equipo más tarde",
+  "skipStepDescription": "¿No tienes direcciones de correo listas? ¡No hay problema! Puedes omitir este paso e invitar miembros del equipo desde tu panel de proyecto más tarde.",
+
+  "orgCategoryTech": "Empresas Tecnológicas",
+  "orgCategoryCreative": "Agencias Creativas", 
+  "orgCategoryConsulting": "Consultoría",
+  "orgCategoryStartups": "Startups",
+  "namingTip1": "Manténlo simple y memorable",
+  "namingTip2": "Refleja tu industria o valores",
+  "namingTip3": "Piensa en el crecimiento futuro",
+  "namingTip4": "Hazlo único y reconocible",
+
+  "aboutYouTitle": "Cuéntanos sobre ti",
+  "aboutYouDescription": "Ayúdanos a personalizar tu experiencia",
+  "orgTypeQuestion": "¿Qué describe mejor tu organización?",
+  "userRoleQuestion": "¿Cuál es tu rol?",
+  
+  "yourNeedsTitle": "¿Cuáles son tus principales necesidades?",
+  "yourNeedsDescription": "Selecciona todas las que apliquen para ayudarnos a configurar tu espacio de trabajo",
+  "yourNeedsQuestion": "¿Cómo usarás principalmente Worklenz?",
+  "useCaseTaskOrg": "Organizar y hacer seguimiento de tareas",
+  "useCaseTeamCollab": "Trabajar juntos sin problemas", 
+  "useCaseResourceMgmt": "Gestionar tiempo y recursos",
+  "useCaseClientComm": "Mantenerse conectado con clientes",
+  "useCaseTimeTrack": "Monitorear horas de proyecto",
+  "useCaseOther": "Algo más",
+  "selectedText": "seleccionado",
+  "previousToolsQuestion": "¿Qué herramientas has usado antes? (Opcional)",
+  "previousToolsPlaceholder": "ej., Asana, Trello, Jira, Monday.com, etc.",
+  
+  "discoveryTitle": "Una última cosa...",
+  "discoveryDescription": "Ayúdanos a entender cómo descubriste Worklenz",
+  "discoveryQuestion": "¿Cómo te enteraste de nosotros?",
+  "allSetTitle": "¡Ya estás listo!",
+  "allSetDescription": "Vamos a crear tu primer proyecto y comenzar con Worklenz",
+  "surveyCompleteTitle": "¡Gracias!",
+  "surveyCompleteDescription": "Tu retroalimentación nos ayuda a mejorar Worklenz para todos",
+  "aboutYouStepName": "Sobre ti",
+  "yourNeedsStepName": "Tus necesidades", 
+  "discoveryStepName": "Descubrimiento",
+  "stepProgress": "Paso {step} de 3: {title}",
+
+  "projectStepHeader": "Vamos a crear tu primer proyecto",
+  "projectStepSubheader": "Empieza desde cero o usa una plantilla para ir más rápido",
+  "startFromScratch": "Empezar desde cero",
+  "templateSelected": "Plantilla seleccionada abajo",
+  "quickSuggestions": "Sugerencias rápidas:",
+  "orText": "O",
+  "startWithTemplate": "Comenzar con una plantilla",
+  "clearToSelectTemplate": "Borra el nombre del proyecto arriba para seleccionar una plantilla",
+  "templateHeadStart": "Obtén una ventaja inicial con estructuras de proyecto pre-construidas",
+  "browseAllTemplates": "Explorar todas las plantillas",
+  "templatesAvailable": "15+ plantillas específicas de industria disponibles",
+  "chooseTemplate": "Elige una plantilla que coincida con tu tipo de proyecto",
+  "createProject": "Crear proyecto",
+
+  "templateSoftwareDev": "Desarrollo de Software",
+  "templateSoftwareDesc": "Sprints ágiles, seguimiento de errores, lanzamientos",
+  "templateMarketing": "Campaña de Marketing", 
+  "templateMarketingDesc": "Planificación de campaña, calendario de contenido",
+  "templateConstruction": "Proyecto de Construcción",
+  "templateConstructionDesc": "Fases, permisos, contratistas",
+  "templateStartup": "Lanzamiento de Startup",
+  "templateStartupDesc": "Desarrollo MVP, financiación, crecimiento",
+
+  "tasksStepTitle": "Añade tus primeras tareas",
+  "tasksStepDescription": "Desglosa \"{{projectName}}\" en tareas accionables para comenzar",
+  "taskPlaceholder": "Tarea {{index}} - ej., ¿Qué necesita hacerse?",
+  "addAnotherTask": "Añadir otra tarea ({{current}}/{{max}})",
+
+  "surveyStepTitle": "Cuéntanos sobre ti",
+  "surveyStepLabel": "Ayúdanos a personalizar tu experiencia de Worklenz respondiendo algunas preguntas.",
+  
+  "organizationType": "¿Qué describe mejor tu organización?",
+  "organizationTypeFreelancer": "Freelancer",
+  "organizationTypeStartup": "Startup",
+  "organizationTypeSmallMediumBusiness": "Pequeña o Mediana Empresa",
+  "organizationTypeAgency": "Agencia",
+  "organizationTypeEnterprise": "Empresa",
+  "organizationTypeOther": "Otro",
+  
+  "userRole": "¿Cuál es tu rol?",
+  "userRoleFounderCeo": "Fundador / CEO",
+  "userRoleProjectManager": "Gerente de Proyecto",
+  "userRoleSoftwareDeveloper": "Desarrollador de Software",
+  "userRoleDesigner": "Diseñador",
+  "userRoleOperations": "Operaciones",
+  "userRoleOther": "Otro",
+  
+  "mainUseCases": "¿Para qué usarás principalmente Worklenz?",
+  "mainUseCasesTaskManagement": "Gestión de tareas",
+  "mainUseCasesTeamCollaboration": "Colaboración de equipo",
+  "mainUseCasesResourcePlanning": "Planificación de recursos",
+  "mainUseCasesClientCommunication": "Comunicación con clientes e informes",
+  "mainUseCasesTimeTracking": "Seguimiento de tiempo",
+  "mainUseCasesOther": "Otro",
+  
+  "previousTools": "¿Qué herramienta(s) usabas antes de Worklenz?",
+  "previousToolsPlaceholder": "ej. Trello, Asana, Monday.com",
+  
+  "howHeardAbout": "¿Cómo conociste Worklenz?",
+  "howHeardAboutGoogleSearch": "Búsqueda de Google",
+  "howHeardAboutTwitter": "Twitter",
+  "howHeardAboutLinkedin": "LinkedIn",
+  "howHeardAboutFriendColleague": "Un amigo o colega",
+  "howHeardAboutBlogArticle": "Un blog o artículo",
+  "howHeardAboutOther": "Otro",
+  
+  "aboutYouStepTitle": "Cuéntanos sobre ti",
+  "aboutYouStepDescription": "Ayúdanos a personalizar tu experiencia",
+  "yourNeedsStepTitle": "¿Cuáles son tus principales necesidades?",
+  "yourNeedsStepDescription": "Selecciona todas las que apliquen para ayudarnos a configurar tu espacio de trabajo",
+  "selected": "seleccionado",
+  "previousToolsLabel": "¿Qué herramientas has usado antes? (Opcional)",
+  
+  "roleSuggestions": {
+    "designer": "UI/UX, Gráficos, Creativo",
+    "developer": "Frontend, Backend, Full-stack", 
+    "projectManager": "Planificación, Coordinación",
+    "marketing": "Contenido, Redes Sociales, Crecimiento",
+    "sales": "Desarrollo de Negocios, Relaciones con Clientes",
+    "operations": "Administración, RRHH, Finanzas"
+  },
+  
+  "languages": {
+    "en": "English",
+    "es": "Español", 
+    "pt": "Português",
+    "de": "Deutsch",
+    "alb": "Shqip",
+    "zh": "简体中文"
+  },
+  
+  "orgSuggestions": {
+    "tech": ["TechCorp", "DevStudio", "CodeCraft", "PixelForge"],
+    "creative": ["Creative Hub", "Design Studio", "Brand Works", "Visual Arts"],
+    "consulting": ["Strategy Group", "Business Solutions", "Expert Advisors", "Growth Partners"],
+    "startup": ["Innovation Labs", "Future Works", "Venture Co", "Next Gen"]
+  },
+  
+  "projectSuggestions": {
+    "freelancer": ["Proyecto Cliente", "Actualización Portfolio", "Marca Personal"],
+    "startup": ["Desarrollo MVP", "Lanzamiento Producto", "Investigación Mercado"],
+    "agency": ["Campaña Cliente", "Estrategia Marca", "Rediseño Website"],
+    "enterprise": ["Migración Sistema", "Optimización Procesos", "Capacitación Equipo"]
+  },
+  
+  "useCaseDescriptions": {
+    "taskManagement": "Organizar y rastrear tareas",
+    "teamCollaboration": "Trabajar juntos sin problemas",
+    "resourcePlanning": "Gestionar tiempo y recursos", 
+    "clientCommunication": "Mantenerse conectado con clientes",
+    "timeTracking": "Monitorear horas de proyecto",
+    "other": "Algo más"
+  }
 }
diff --git a/worklenz-frontend/public/locales/es/admin-center/current-bill.json b/worklenz-frontend/public/locales/es/admin-center/current-bill.json
index 52a4bdbba..ae332a769 100644
--- a/worklenz-frontend/public/locales/es/admin-center/current-bill.json
+++ b/worklenz-frontend/public/locales/es/admin-center/current-bill.json
@@ -101,6 +101,7 @@
 
   "expirestoday": "hoy",
   "expirestomorrow": "mañana",
+  "expiredDayAgo": "hace {{days}} día",
   "expiredDaysAgo": "hace {{days}} días",
   "creditPlan": "Plan de Crédito",
   "customPlan": "Plan Personalizado",
diff --git a/worklenz-frontend/public/locales/es/auth/signup.json b/worklenz-frontend/public/locales/es/auth/signup.json
index 2dbd01884..768a3952c 100644
--- a/worklenz-frontend/public/locales/es/auth/signup.json
+++ b/worklenz-frontend/public/locales/es/auth/signup.json
@@ -7,12 +7,12 @@
   "emailLabel": "Correo electrónico",
   "emailPlaceholder": "Ingresa tu correo electrónico",
   "emailRequired": "¡Por favor ingresa tu correo electrónico!",
-  "passwordLabel": "Password",
-  "passwordGuideline": "Password must be at least 8 characters, include uppercase and lowercase letters, a number, and a special character.",
-  "passwordPlaceholder": "Enter your password",
+  "passwordLabel": "Contraseña",
+  "passwordGuideline": "La contraseña debe tener al menos 8 caracteres, incluir letras mayúsculas y minúsculas, un número y un carácter especial.",
+  "passwordPlaceholder": "Ingresa tu contraseña",
   "passwordRequired": "¡Por favor ingresa tu contraseña!",
   "passwordMinCharacterRequired": "¡La contraseña debe tener al menos 8 caracteres!",
-  "passwordMaxCharacterRequired": "Password must be at most 32 characters!",
+  "passwordMaxCharacterRequired": "¡La contraseña debe tener como máximo 32 caracteres!",
   "passwordPatternRequired": "¡La contraseña no cumple con los requisitos!",
   "strongPasswordPlaceholder": "Ingresa una contraseña más segura",
   "passwordValidationAltText": "La contraseña debe incluir al menos 8 caracteres con letras mayúsculas y minúsculas, un número y un símbolo.",
diff --git a/worklenz-frontend/public/locales/es/common.json b/worklenz-frontend/public/locales/es/common.json
index 583e86709..d9b65732b 100644
--- a/worklenz-frontend/public/locales/es/common.json
+++ b/worklenz-frontend/public/locales/es/common.json
@@ -5,5 +5,50 @@
   "signup-failed": "Error al registrarse. Por favor asegúrate de llenar todos los campos requeridos e intenta nuevamente.",
   "reconnecting": "Reconectando al servidor...",
   "connection-lost": "Conexión perdida. Intentando reconectarse...",
-  "connection-restored": "Conexión restaurada. Reconectando al servidor..."
+  "connection-restored": "Conexión restaurada. Reconectando al servidor...",
+  "cancel": "Cancelar",
+  "update-available": "¡Worklenz actualizado!",
+  "update-description": "Una nueva versión de Worklenz está disponible con las últimas funciones y mejoras.",
+  "update-instruction": "Para obtener la mejor experiencia, por favor recarga la página para aplicar los nuevos cambios.",
+  "update-whats-new": "💡 <1>Qué hay de nuevo:</1> Rendimiento mejorado, correcciones de errores y experiencia de usuario mejorada",
+  "update-now": "Actualizar ahora",
+  "update-later": "Más tarde",
+  "updating": "Actualizando...",
+  "license-expired-title": "Suscripción expirada",
+  "license-expired-subtitle": "Su suscripción de Worklenz ha terminado. Por favor renueve para continuar disfrutando de todas las funciones.",
+  "license-expired-trial-title": "Período de prueba expirado",
+  "license-expired-trial-subtitle": "Su período de prueba de Worklenz ha terminado. Por favor actualice para continuar disfrutando de todas las funciones.",
+  "license-expired-custom-title": "Plan personalizado expirado",
+  "license-expired-custom-subtitle": "Su plan personalizado ha expirado. Por favor contacte soporte o renueve para continuar.",
+  "license-expired-features": "Renueve ahora para continuar disfrutando:",
+  "license-expired-trial-features": "Actualice ahora para desbloquear:",
+  "license-expired-custom-features": "Contacte soporte para continuar con:",
+  "license-expired-feature-1": "✓ Proyectos y tareas ilimitados",
+  "license-expired-feature-2": "✓ Informes y análisis avanzados",
+  "license-expired-feature-3": "✓ Funciones de colaboración en equipo",
+  "license-expired-feature-4": "✓ Soporte prioritario",
+  "license-expired-upgrade": "Renovar ahora",
+  "license-expired-trial-upgrade": "Actualizar ahora",
+  "license-expired-custom-upgrade": "Contactar soporte",
+  "license-expired-contacting-support": "Contactando soporte...",
+  "license-expired-message-sent": "Mensaje enviado ✓",
+  "license-expired-days-remaining": "{{days}} días restantes en su período de prueba",
+  "trial-expiring-soon": "Su período de prueba expira en {{days}} día",
+  "trial-expiring-soon_plural": "Su período de prueba expira en {{days}} días",
+  "trial-expiring-today": "¡Su período de prueba expira hoy!",
+  "trial-expiring-upgrade": "Actualice ahora para conservar todos sus datos y continuar sin interrupciones",
+  "trial-badge-days": "{{days}}d restantes",
+  "trial-badge-today": "¡Último día!",
+  "trial-badge-hours": "{{hours}}h restantes",
+  "trial-alert-admin-note": "Aún puede acceder al Centro de administración para gestionar su suscripción",
+  "trial-alert-dismiss": "Descartar por hoy",
+  "license-expiring-soon": "Su licencia expira en {{days}} día",
+  "license-expiring-soon_plural": "Su licencia expira en {{days}} días",
+  "license-expiring-today": "¡Su licencia expira hoy!",
+  "license-expired-grace-period": "Su licencia ha expirado. {{days}} día de período de gracia restante",
+  "license-expired-grace-period_plural": "Su licencia ha expirado. {{days}} días de período de gracia restantes",
+  "license-expiring-upgrade": "Renueve ahora para conservar todos sus datos y continuar sin interrupciones",
+  "license-badge-days": "{{days}}d restantes",
+  "license-badge-today": "¡Último día!",
+  "license-badge-hours": "{{hours}}h restantes"
 }
diff --git a/worklenz-frontend/public/locales/es/home.json b/worklenz-frontend/public/locales/es/home.json
index cfd238f94..c22061480 100644
--- a/worklenz-frontend/public/locales/es/home.json
+++ b/worklenz-frontend/public/locales/es/home.json
@@ -40,6 +40,22 @@
     "list": "Lista",
     "calendar": "Calendario",
     "tasks": "Tareas",
-    "refresh": "Actualizar"
+    "refresh": "Actualizar",
+    "recentActivity": "Actividad Reciente",
+    "recentTasks": "Tareas Recientes",
+    "recentTasksSegment": "Tareas Recientes",
+    "timeLogged": "Tiempo Registrado",
+    "timeLoggedSegment": "Tiempo Registrado",
+    "noRecentTasks": "No hay tareas recientes",
+    "noTimeLoggedTasks": "No hay tareas con tiempo registrado",
+    "activityTag": "Actividad",
+    "timeLogTag": "Registro de Tiempo",
+    "timerTag": "Temporizador",
+    "activitySingular": "actividad",
+    "activityPlural": "actividades",
+    "recentTaskAriaLabel": "Tarea reciente:",
+    "timeLoggedTaskAriaLabel": "Tarea con tiempo registrado:",
+    "errorLoadingRecentTasks": "Error al cargar tareas recientes",
+    "errorLoadingTimeLoggedTasks": "Error al cargar tareas con tiempo registrado"
   }
 }
diff --git a/worklenz-frontend/public/locales/es/kanban-board.json b/worklenz-frontend/public/locales/es/kanban-board.json
index 6e8d59756..df4f2b1ea 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/navbar.json b/worklenz-frontend/public/locales/es/navbar.json
index 97c79d509..e7d2e5ec9 100644
--- a/worklenz-frontend/public/locales/es/navbar.json
+++ b/worklenz-frontend/public/locales/es/navbar.json
@@ -18,6 +18,7 @@
   "profileTooltip": "Ver perfil",
   "adminCenter": "Centro de administración",
   "settings": "Configuración",
+  "deleteAccount": "Eliminar Cuenta",
   "logOut": "Cerrar sesión",
   "notificationsDrawer": {
     "read": "Notificaciones leídas",
diff --git a/worklenz-frontend/public/locales/es/project-view-members.json b/worklenz-frontend/public/locales/es/project-view-members.json
index 95a8d9430..46f26b3f9 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 ab7570fd9..2ade994ef 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/labels.json b/worklenz-frontend/public/locales/es/settings/labels.json
index 22cd95329..fa0f3364f 100644
--- a/worklenz-frontend/public/locales/es/settings/labels.json
+++ b/worklenz-frontend/public/locales/es/settings/labels.json
@@ -7,5 +7,9 @@
   "searchPlaceholder": "Buscar por nombre",
   "emptyText": "Las etiquetas se pueden crear al actualizar o crear tareas.",
   "pinTooltip": "Haz clic para fijar esto en el menú principal",
-  "colorChangeTooltip": "Haz clic para cambiar el color"
+  "colorChangeTooltip": "Haz clic para cambiar el color",
+  "pageTitle": "Administrar Etiquetas",
+  "deleteConfirmTitle": "¿Estás seguro de que quieres eliminar esto?",
+  "deleteButton": "Eliminar",
+  "cancelButton": "Cancelar"
 }
diff --git a/worklenz-frontend/public/locales/es/settings/team-members.json b/worklenz-frontend/public/locales/es/settings/team-members.json
index 1000bf98c..7f317fab6 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/es/survey.json b/worklenz-frontend/public/locales/es/survey.json
new file mode 100644
index 000000000..be30d7555
--- /dev/null
+++ b/worklenz-frontend/public/locales/es/survey.json
@@ -0,0 +1,14 @@
+{
+  "modalTitle": "Ayúdanos a mejorar tu experiencia",
+  "skip": "Omitir por ahora",
+  "previous": "Anterior",
+  "next": "Siguiente",
+  "completeSurvey": "Completar encuesta",
+  "submitting": "Enviando tus respuestas...",
+  "submitSuccessTitle": "¡Gracias!",
+  "submitSuccessSubtitle": "Tus comentarios nos ayudan a mejorar Worklenz para todos.",
+  "submitSuccessMessage": "¡Gracias por completar la encuesta!",
+  "submitErrorMessage": "No se pudo enviar la encuesta. Por favor, inténtalo de nuevo.",
+  "submitErrorLog": "Error al enviar la encuesta",
+  "fetchErrorLog": "Error al obtener la encuesta"
+} 
\ No newline at end of file
diff --git a/worklenz-frontend/public/locales/es/task-list-filters.json b/worklenz-frontend/public/locales/es/task-list-filters.json
index 00c27f169..6aa9a8a1a 100644
--- a/worklenz-frontend/public/locales/es/task-list-filters.json
+++ b/worklenz-frontend/public/locales/es/task-list-filters.json
@@ -84,5 +84,12 @@
   "close": "Cerrar",
   "cannotMoveStatus": "No se puede mover el estado",
   "cannotMoveStatusMessage": "No se puede mover este estado porque dejaría vacía la categoría '{{categoryName}}'. Cada categoría debe tener al menos un estado.",
-  "ok": "OK"
+  "ok": "OK",
+  "clearSort": "Limpiar Ordenamiento",
+  "sortAscending": "Ordenar Ascendente",
+  "sortDescending": "Ordenar Descendente",
+  "sortByField": "Ordenar por {{field}}",
+  "ascendingOrder": "Ascendente",
+  "descendingOrder": "Descendente",
+  "currentSort": "Ordenamiento actual: {{field}} {{order}}"
 }
diff --git a/worklenz-frontend/public/locales/es/task-list-table.json b/worklenz-frontend/public/locales/es/task-list-table.json
index 779c76ede..53d99bb88 100644
--- a/worklenz-frontend/public/locales/es/task-list-table.json
+++ b/worklenz-frontend/public/locales/es/task-list-table.json
@@ -57,6 +57,9 @@
 
   "contextMenu": {
     "assignToMe": "Asignar a mí",
+    "copyLink": "Copiar enlace a la tarea",
+    "linkCopied": "Enlace copiado al portapapeles",
+    "linkCopyFailed": "Error al copiar el enlace",
     "moveTo": "Mover a",
     "unarchive": "Desarchivar",
     "archive": "Archivar",
@@ -133,5 +136,11 @@
       "dependencies": "La tarea tiene dependencias",
       "recurring": "Tarea recurrente"
     }
+  },
+
+  "timer": {
+    "conflictTitle": "Temporizador Ya En Ejecución",
+    "conflictMessage": "Tiene un temporizador ejecutándose para \"{{taskName}}\" en el proyecto \"{{projectName}}\". ¿Le gustaría detener ese temporizador e iniciar uno nuevo para esta tarea?",
+    "stopAndStart": "Detener e Iniciar Nuevo Temporizador"
   }
 }
diff --git a/worklenz-frontend/public/locales/pt/account-setup.json b/worklenz-frontend/public/locales/pt/account-setup.json
index 1d8a8cba4..24e7cbe6f 100644
--- a/worklenz-frontend/public/locales/pt/account-setup.json
+++ b/worklenz-frontend/public/locales/pt/account-setup.json
@@ -3,7 +3,28 @@
 
   "setupYourAccount": "Configure sua conta.",
   "organizationStepTitle": "Nomeie sua organização",
-  "organizationStepLabel": "Escolha um nome para sua conta Worklenz.",
+  "organizationStepWelcome": "Bem-vindo ao Worklenz!",
+  "organizationStepDescription": "Vamos começar configurando sua organização. Este será o espaço de trabalho principal para sua equipe.",
+  "organizationStepLabel": "Nome da organização",
+  "organizationStepPlaceholder": "ex. Corporação Acme",
+  "organizationStepTooltip": "Este nome aparecerá em seu espaço de trabalho e pode ser alterado posteriormente nas configurações.",
+  "organizationStepNeedIdeas": "Precisa de ideias?",
+  "organizationStepUseDetected": "Usar detectado:",
+  "organizationStepCharacters": "caracteres",
+  "organizationStepGoodLength": "Bom comprimento",
+  "organizationStepTooShort": "Muito curto",
+  "organizationStepNamingTips": "Dicas de nomenclatura",
+  "organizationStepTip1": "Mantenha simples e memorável",
+  "organizationStepTip2": "Reflita sua indústria ou valores",
+  "organizationStepTip3": "Pense no crescimento futuro",
+  "organizationStepTip4": "Torne único e marcante",
+  "organizationStepSuggestionsTitle": "Sugestões de nomes",
+  "organizationStepCategory1": "Empresas de tecnologia",
+  "organizationStepCategory2": "Agências criativas",
+  "organizationStepCategory3": "Consultoria",
+  "organizationStepCategory4": "Startups",
+  "organizationStepSuggestionsNote": "Estes são apenas exemplos para começar. Escolha algo que represente sua organização.",
+  "organizationStepPrivacyNote": "O nome da sua organização é privado e visível apenas para os membros da sua equipe.",
 
   "projectStepTitle": "Crie seu primeiro projeto",
   "projectStepLabel": "Em qual projeto você está trabalhando agora?",
@@ -24,9 +45,171 @@
   "step3InputLabel": "Convidar por email",
   "addAnother": "Adicionar outro",
   "skipForNow": "Pular por enquanto",
+  "skipping": "Pulando...",
   "formTitle": "Crie sua primeira tarefa.",
   "step3Title": "Convide sua equipe para trabalhar",
 
   "maxMembers": " (Você pode convidar até 5 membros)",
-  "maxTasks": " (Você pode criar até 5 tarefas)"
+  "maxTasks": " (Você pode criar até 5 tarefas)",
+
+  "membersStepTitle": "Convide sua equipe",
+  "membersStepDescription": "Adicione membros da equipe ao \"{{organizationName}}\" e comece a colaborar",
+  "memberPlaceholder": "Membro da equipe {{index}} - Digite o endereço de email",
+  "validEmailAddress": "Endereço de email válido",
+  "addAnotherTeamMember": "Adicionar outro membro da equipe ({{current}}/{{max}})",
+  "canInviteLater": "Você sempre pode convidar membros da equipe mais tarde",
+  "skipStepDescription": "Não tem endereços de email prontos? Sem problema! Você pode pular esta etapa e convidar membros da equipe do seu painel de projeto mais tarde.",
+
+  "orgCategoryTech": "Empresas de Tecnologia",
+  "orgCategoryCreative": "Agências Criativas", 
+  "orgCategoryConsulting": "Consultoria",
+  "orgCategoryStartups": "Startups",
+  "namingTip1": "Mantenha simples e memorável",
+  "namingTip2": "Reflita sua indústria ou valores",
+  "namingTip3": "Pense no crescimento futuro",
+  "namingTip4": "Torne único e marcante",
+
+  "aboutYouTitle": "Conte-nos sobre você",
+  "aboutYouDescription": "Ajude-nos a personalizar sua experiência",
+  "orgTypeQuestion": "O que melhor descreve sua organização?",
+  "userRoleQuestion": "Qual é seu papel?",
+  
+  "yourNeedsTitle": "Quais são suas principais necessidades?",
+  "yourNeedsDescription": "Selecione todas que se aplicam para nos ajudar a configurar seu espaço de trabalho",
+  "yourNeedsQuestion": "Como você usará principalmente o Worklenz?",
+  "useCaseTaskOrg": "Organizar e acompanhar tarefas",
+  "useCaseTeamCollab": "Trabalhar juntos perfeitamente", 
+  "useCaseResourceMgmt": "Gerenciar tempo e recursos",
+  "useCaseClientComm": "Manter-se conectado com clientes",
+  "useCaseTimeTrack": "Monitorar horas do projeto",
+  "useCaseOther": "Algo mais",
+  "selectedText": "selecionado",
+  "previousToolsQuestion": "Que ferramentas você usou antes? (Opcional)",
+  "previousToolsPlaceholder": "ex., Asana, Trello, Jira, Monday.com, etc.",
+  
+  "discoveryTitle": "Uma última coisa...",
+  "discoveryDescription": "Ajude-nos a entender como você descobriu o Worklenz",
+  "discoveryQuestion": "Como você soube sobre nós?",
+  "allSetTitle": "Você está pronto!",
+  "allSetDescription": "Vamos criar seu primeiro projeto e começar com o Worklenz",
+  "surveyCompleteTitle": "Obrigado!",
+  "surveyCompleteDescription": "Seu feedback nos ajuda a melhorar o Worklenz para todos",
+  "aboutYouStepName": "Sobre você",
+  "yourNeedsStepName": "Suas necessidades", 
+  "discoveryStepName": "Descoberta",
+  "stepProgress": "Passo {step} de 3: {title}",
+
+  "projectStepHeader": "Vamos criar seu primeiro projeto",
+  "projectStepSubheader": "Comece do zero ou use um modelo para ir mais rápido",
+  "startFromScratch": "Começar do zero",
+  "templateSelected": "Modelo selecionado abaixo",
+  "quickSuggestions": "Sugestões rápidas:",
+  "orText": "OU",
+  "startWithTemplate": "Começar com um modelo",
+  "clearToSelectTemplate": "Limpe o nome do projeto acima para selecionar um modelo",
+  "templateHeadStart": "Obtenha uma vantagem inicial com estruturas de projeto pré-construídas",
+  "browseAllTemplates": "Navegar por todos os modelos",
+  "templatesAvailable": "15+ modelos específicos da indústria disponíveis",
+  "chooseTemplate": "Escolha um modelo que corresponda ao seu tipo de projeto",
+  "createProject": "Criar projeto",
+
+  "templateSoftwareDev": "Desenvolvimento de Software",
+  "templateSoftwareDesc": "Sprints ágeis, rastreamento de bugs, lançamentos",
+  "templateMarketing": "Campanha de Marketing", 
+  "templateMarketingDesc": "Planejamento de campanha, calendário de conteúdo",
+  "templateConstruction": "Projeto de Construção",
+  "templateConstructionDesc": "Fases, licenças, empreiteiros",
+  "templateStartup": "Lançamento de Startup",
+  "templateStartupDesc": "Desenvolvimento MVP, financiamento, crescimento",
+
+  "tasksStepTitle": "Adicione suas primeiras tarefas",
+  "tasksStepDescription": "Divida \"{{projectName}}\" em tarefas acionáveis para começar",
+  "taskPlaceholder": "Tarefa {{index}} - ex., O que precisa ser feito?",
+  "addAnotherTask": "Adicionar outra tarefa ({{current}}/{{max}})",
+
+  "surveyStepTitle": "Conte-nos sobre você",
+  "surveyStepLabel": "Ajude-nos a personalizar sua experiência no Worklenz respondendo algumas perguntas.",
+  
+  "organizationType": "O que melhor descreve sua organização?",
+  "organizationTypeFreelancer": "Freelancer",
+  "organizationTypeStartup": "Startup",
+  "organizationTypeSmallMediumBusiness": "Pequena ou Média Empresa",
+  "organizationTypeAgency": "Agência",
+  "organizationTypeEnterprise": "Empresa",
+  "organizationTypeOther": "Outro",
+  
+  "userRole": "Qual é o seu papel?",
+  "userRoleFounderCeo": "Fundador / CEO",
+  "userRoleProjectManager": "Gerente de Projeto",
+  "userRoleSoftwareDeveloper": "Desenvolvedor de Software",
+  "userRoleDesigner": "Designer",
+  "userRoleOperations": "Operações",
+  "userRoleOther": "Outro",
+  
+  "mainUseCases": "Para que você usará principalmente o Worklenz?",
+  "mainUseCasesTaskManagement": "Gerenciamento de tarefas",
+  "mainUseCasesTeamCollaboration": "Colaboração em equipe",
+  "mainUseCasesResourcePlanning": "Planejamento de recursos",
+  "mainUseCasesClientCommunication": "Comunicação com clientes e relatórios",
+  "mainUseCasesTimeTracking": "Controle de tempo",
+  "mainUseCasesOther": "Outro",
+  
+  "previousTools": "Que ferramenta(s) você usava antes do Worklenz?",
+  "previousToolsPlaceholder": "ex. Trello, Asana, Monday.com",
+  
+  "howHeardAbout": "Como você soube do Worklenz?",
+  "howHeardAboutGoogleSearch": "Busca no Google",
+  "howHeardAboutTwitter": "Twitter",
+  "howHeardAboutLinkedin": "LinkedIn",
+  "howHeardAboutFriendColleague": "Um amigo ou colega",
+  "howHeardAboutBlogArticle": "Um blog ou artigo",
+  "howHeardAboutOther": "Outro",
+  
+  "aboutYouStepTitle": "Conte-nos sobre você",
+  "aboutYouStepDescription": "Ajude-nos a personalizar sua experiência",
+  "yourNeedsStepTitle": "Quais são suas principais necessidades?",
+  "yourNeedsStepDescription": "Selecione todas que se aplicam para nos ajudar a configurar seu espaço de trabalho",
+  "selected": "selecionado",
+  "previousToolsLabel": "Que ferramentas você usou antes? (Opcional)",
+  
+  "roleSuggestions": {
+    "designer": "UI/UX, Gráficos, Criativo",
+    "developer": "Frontend, Backend, Full-stack", 
+    "projectManager": "Planejamento, Coordenação",
+    "marketing": "Conteúdo, Mídias Sociais, Crescimento",
+    "sales": "Desenvolvimento de Negócios, Relacionamento com Clientes",
+    "operations": "Administração, RH, Finanças"
+  },
+  
+  "languages": {
+    "en": "English",
+    "es": "Español", 
+    "pt": "Português",
+    "de": "Deutsch",
+    "alb": "Shqip",
+    "zh": "简体中文"
+  },
+  
+  "orgSuggestions": {
+    "tech": ["TechCorp", "DevStudio", "CodeCraft", "PixelForge"],
+    "creative": ["Creative Hub", "Design Studio", "Brand Works", "Visual Arts"],
+    "consulting": ["Strategy Group", "Business Solutions", "Expert Advisors", "Growth Partners"],
+    "startup": ["Innovation Labs", "Future Works", "Venture Co", "Next Gen"]
+  },
+  
+  "projectSuggestions": {
+    "freelancer": ["Projeto Cliente", "Atualização Portfolio", "Marca Pessoal"],
+    "startup": ["Desenvolvimento MVP", "Lançamento Produto", "Pesquisa Mercado"],
+    "agency": ["Campanha Cliente", "Estratégia Marca", "Redesign Website"],
+    "enterprise": ["Migração Sistema", "Otimização Processos", "Treinamento Equipe"]
+  },
+  
+  "useCaseDescriptions": {
+    "taskManagement": "Organizar e rastrear tarefas",
+    "teamCollaboration": "Trabalhar juntos perfeitamente",
+    "resourcePlanning": "Gerenciar tempo e recursos", 
+    "clientCommunication": "Manter-se conectado com clientes",
+    "timeTracking": "Monitorar horas do projeto",
+    "other": "Algo mais"
+  }
 }
diff --git a/worklenz-frontend/public/locales/pt/admin-center/current-bill.json b/worklenz-frontend/public/locales/pt/admin-center/current-bill.json
index 2e4b41d74..c5b99acbb 100644
--- a/worklenz-frontend/public/locales/pt/admin-center/current-bill.json
+++ b/worklenz-frontend/public/locales/pt/admin-center/current-bill.json
@@ -101,6 +101,7 @@
 
   "expirestoday": "hoje",
   "expirestomorrow": "amanhã",
+  "expiredDayAgo": "há {{days}} dia",
   "expiredDaysAgo": "há {{days}} dias",
   "creditPlan": "Plano de Crédito",
   "customPlan": "Plano Personalizado",
diff --git a/worklenz-frontend/public/locales/pt/common.json b/worklenz-frontend/public/locales/pt/common.json
index ce540a28d..d98fdaab7 100644
--- a/worklenz-frontend/public/locales/pt/common.json
+++ b/worklenz-frontend/public/locales/pt/common.json
@@ -5,5 +5,40 @@
   "signup-failed": "Falha no cadastro. Por favor, certifique-se de que todos os campos obrigatórios estão preenchidos e tente novamente.",
   "reconnecting": "Reconectando ao servidor...",
   "connection-lost": "Conexão perdida. Tentando reconectar...",
-  "connection-restored": "Conexão restaurada. Reconectando ao servidor..."
+  "connection-restored": "Conexão restaurada. Reconectando ao servidor...",
+  "cancel": "Cancelar",
+  "update-available": "Worklenz atualizado!",
+  "update-description": "Uma nova versão do Worklenz está disponível com os recursos e melhorias mais recentes.",
+  "update-instruction": "Para obter a melhor experiência, por favor recarregue a página para aplicar as novas mudanças.",
+  "update-whats-new": "💡 <1>O que há de novo:</1> Performance aprimorada, correções de bugs e experiência do usuário melhorada",
+  "update-now": "Atualizar agora",
+  "update-later": "Mais tarde",
+  "updating": "Atualizando...",
+  "license-expired-title": "Período de teste expirado",
+  "license-expired-subtitle": "Seu período de teste do Worklenz terminou. Por favor, atualize para continuar aproveitando todos os recursos.",
+  "license-expired-features": "Atualize agora para desbloquear:",
+  "license-expired-feature-1": "✓ Projetos e tarefas ilimitados",
+  "license-expired-feature-2": "✓ Relatórios e análises avançadas",
+  "license-expired-feature-3": "✓ Recursos de colaboração em equipe",
+  "license-expired-feature-4": "✓ Suporte prioritário",
+  "license-expired-upgrade": "Atualizar agora",
+  "license-expired-days-remaining": "{{days}} dias restantes no seu período de teste",
+  "trial-expiring-soon": "Seu período de teste expira em {{days}} dia",
+  "trial-expiring-soon_plural": "Seu período de teste expira em {{days}} dias",
+  "trial-expiring-today": "Seu período de teste expira hoje!",
+  "trial-expiring-upgrade": "Atualize agora para manter todos os seus dados e continuar sem interrupções",
+  "trial-badge-days": "{{days}}d restantes",
+  "trial-badge-today": "Último dia!",
+  "trial-badge-hours": "{{hours}}h restantes",
+  "trial-alert-admin-note": "Você ainda pode acessar o Centro de administração para gerenciar sua assinatura",
+  "trial-alert-dismiss": "Dispensar por hoje",
+  "license-expiring-soon": "Sua licença expira em {{days}} dia",
+  "license-expiring-soon_plural": "Sua licença expira em {{days}} dias",
+  "license-expiring-today": "Sua licença expira hoje!",
+  "license-expired-grace-period": "Sua licença expirou. {{days}} dia de período de carência restante",
+  "license-expired-grace-period_plural": "Sua licença expirou. {{days}} dias de período de carência restantes",
+  "license-expiring-upgrade": "Renove agora para manter todos os seus dados e continuar sem interrupções",
+  "license-badge-days": "{{days}}d restantes",
+  "license-badge-today": "Último dia!",
+  "license-badge-hours": "{{hours}}h restantes"
 }
diff --git a/worklenz-frontend/public/locales/pt/home.json b/worklenz-frontend/public/locales/pt/home.json
index b19ece5f0..398f16c72 100644
--- a/worklenz-frontend/public/locales/pt/home.json
+++ b/worklenz-frontend/public/locales/pt/home.json
@@ -40,6 +40,22 @@
     "list": "Lista",
     "calendar": "Calendário",
     "tasks": "Tarefas",
-    "refresh": "Atualizar"
+    "refresh": "Atualizar",
+    "recentActivity": "Atividade Recente",
+    "recentTasks": "Tarefas Recentes",
+    "recentTasksSegment": "Tarefas Recentes",
+    "timeLogged": "Tempo Registrado",
+    "timeLoggedSegment": "Tempo Registrado",
+    "noRecentTasks": "Nenhuma tarefa recente",
+    "noTimeLoggedTasks": "Nenhuma tarefa com tempo registrado",
+    "activityTag": "Atividade",
+    "timeLogTag": "Registro de Tempo",
+    "timerTag": "Cronômetro",
+    "activitySingular": "atividade",
+    "activityPlural": "atividades",
+    "recentTaskAriaLabel": "Tarefa recente:",
+    "timeLoggedTaskAriaLabel": "Tarefa com tempo registrado:",
+    "errorLoadingRecentTasks": "Erro ao carregar tarefas recentes",
+    "errorLoadingTimeLoggedTasks": "Erro ao carregar tarefas com tempo registrado"
   }
 }
diff --git a/worklenz-frontend/public/locales/pt/kanban-board.json b/worklenz-frontend/public/locales/pt/kanban-board.json
index a2034daac..5bac3adb0 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/navbar.json b/worklenz-frontend/public/locales/pt/navbar.json
index be0f3a630..f462a4fc1 100644
--- a/worklenz-frontend/public/locales/pt/navbar.json
+++ b/worklenz-frontend/public/locales/pt/navbar.json
@@ -18,6 +18,7 @@
   "profileTooltip": "Ver perfil",
   "adminCenter": "Centro de administração",
   "settings": "Configurações",
+  "deleteAccount": "Excluir Conta",
   "logOut": "Sair",
   "notificationsDrawer": {
     "read": "Notificações lidas",
diff --git a/worklenz-frontend/public/locales/pt/project-view-members.json b/worklenz-frontend/public/locales/pt/project-view-members.json
index 725248071..df6eded07 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 0afe3d87d..0c5c7b1a8 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/labels.json b/worklenz-frontend/public/locales/pt/settings/labels.json
index 737dccef6..20c5dc6b7 100644
--- a/worklenz-frontend/public/locales/pt/settings/labels.json
+++ b/worklenz-frontend/public/locales/pt/settings/labels.json
@@ -7,5 +7,9 @@
   "searchPlaceholder": "Pesquisar por nome",
   "emptyText": "Os rótulos podem ser criados ao atualizar ou criar tarefas.",
   "pinTooltip": "Clique para fixar isso no menu principal",
-  "colorChangeTooltip": "Clique para mudar a cor"
+  "colorChangeTooltip": "Clique para mudar a cor",
+  "pageTitle": "Gerenciar Rótulos",
+  "deleteConfirmTitle": "Tem certeza de que deseja excluir isto?",
+  "deleteButton": "Excluir",
+  "cancelButton": "Cancelar"
 }
diff --git a/worklenz-frontend/public/locales/pt/settings/team-members.json b/worklenz-frontend/public/locales/pt/settings/team-members.json
index 9ace17644..9bb38de39 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/pt/survey.json b/worklenz-frontend/public/locales/pt/survey.json
new file mode 100644
index 000000000..250eaf900
--- /dev/null
+++ b/worklenz-frontend/public/locales/pt/survey.json
@@ -0,0 +1,14 @@
+{
+  "modalTitle": "Ajude-nos a melhorar sua experiência",
+  "skip": "Pular por enquanto",
+  "previous": "Anterior",
+  "next": "Próximo",
+  "completeSurvey": "Concluir Pesquisa",
+  "submitting": "Enviando suas respostas...",
+  "submitSuccessTitle": "Obrigado!",
+  "submitSuccessSubtitle": "Seu feedback nos ajuda a melhorar o Worklenz para todos.",
+  "submitSuccessMessage": "Obrigado por completar a pesquisa!",
+  "submitErrorMessage": "Falha ao enviar a pesquisa. Por favor, tente novamente.",
+  "submitErrorLog": "Falha ao enviar a pesquisa",
+  "fetchErrorLog": "Falha ao buscar a pesquisa"
+} 
\ No newline at end of file
diff --git a/worklenz-frontend/public/locales/pt/task-list-filters.json b/worklenz-frontend/public/locales/pt/task-list-filters.json
index 3674a29a1..a6abcf224 100644
--- a/worklenz-frontend/public/locales/pt/task-list-filters.json
+++ b/worklenz-frontend/public/locales/pt/task-list-filters.json
@@ -84,5 +84,12 @@
   "close": "Fechar",
   "cannotMoveStatus": "Não é possível mover o status",
   "cannotMoveStatusMessage": "Não é possível mover este status porque deixaria a categoria '{{categoryName}}' vazia. Cada categoria deve ter pelo menos um status.",
-  "ok": "OK"
+  "ok": "OK",
+  "clearSort": "Limpar Ordenação",
+  "sortAscending": "Ordenar Crescente",
+  "sortDescending": "Ordenar Decrescente",
+  "sortByField": "Ordenar por {{field}}",
+  "ascendingOrder": "Crescente",
+  "descendingOrder": "Decrescente",
+  "currentSort": "Ordenação atual: {{field}} {{order}}"
 }
diff --git a/worklenz-frontend/public/locales/pt/task-list-table.json b/worklenz-frontend/public/locales/pt/task-list-table.json
index 54fd2a333..d519ec8f7 100644
--- a/worklenz-frontend/public/locales/pt/task-list-table.json
+++ b/worklenz-frontend/public/locales/pt/task-list-table.json
@@ -57,6 +57,9 @@
 
   "contextMenu": {
     "assignToMe": "Atribuir a mim",
+    "copyLink": "Copiar link da tarefa",
+    "linkCopied": "Link copiado para a área de transferência",
+    "linkCopyFailed": "Falha ao copiar o link",
     "moveTo": "Mover para",
     "unarchive": "Desarquivar",
     "archive": "Arquivar",
@@ -133,5 +136,11 @@
       "dependencies": "A tarefa tem dependências",
       "recurring": "Tarefa recorrente"
     }
+  },
+
+  "timer": {
+    "conflictTitle": "Temporizador Já Em Execução",
+    "conflictMessage": "Você tem um temporizador executando para \"{{taskName}}\" no projeto \"{{projectName}}\". Gostaria de parar esse temporizador e iniciar um novo para esta tarefa?",
+    "stopAndStart": "Parar e Iniciar Novo Temporizador"
   }
 }
diff --git a/worklenz-frontend/public/locales/zh/account-setup.json b/worklenz-frontend/public/locales/zh/account-setup.json
index 51cac1eb6..b9a0e46ed 100644
--- a/worklenz-frontend/public/locales/zh/account-setup.json
+++ b/worklenz-frontend/public/locales/zh/account-setup.json
@@ -1,14 +1,38 @@
 {
   "continue": "继续",
-  "setupYourAccount": "设置您的Worklenz账户。",
+  "setupYourAccount": "设置您的 Worklenz 账户。",
   "organizationStepTitle": "命名您的组织",
-  "organizationStepLabel": "为您的Worklenz账户选择一个名称。",
+  "organizationStepWelcome": "欢迎使用 Worklenz！",
+  "organizationStepDescription": "让我们从设置您的组织开始。这将是您团队的主要工作空间。",
+  "organizationStepLabel": "组织名称",
+  "organizationStepPlaceholder": "例如：Acme 公司",
+  "organizationStepTooltip": "此名称将显示在您的工作区，并可在设置中更改。",
+  "organizationStepNeedIdeas": "需要灵感？",
+  "organizationStepUseDetected": "检测到使用：",
+  "organizationStepCharacters": "字符",
+  "organizationStepGoodLength": "长度合适",
+  "organizationStepTooShort": "太短",
+  "organizationStepNamingTips": "命名建议",
+  "organizationStepTip1": "保持简单且易记",
+  "organizationStepTip2": "体现您的行业或价值观",
+  "organizationStepTip3": "考虑未来发展",
+  "organizationStepTip4": "使其独特且有品牌感",
+  "organizationStepSuggestionsTitle": "名称建议",
+  "organizationStepCategory1": "科技公司",
+  "organizationStepCategory2": "创意机构",
+  "organizationStepCategory3": "咨询公司",
+  "organizationStepCategory4": "初创企业",
+  "organizationStepSuggestionsNote": "这些只是帮助您入门的示例。请选择能代表您组织的名称。",
+  "organizationStepPrivacyNote": "您的组织名称是私有的，仅团队成员可见。",
+
   "projectStepTitle": "创建您的第一个项目",
   "projectStepLabel": "您现在正在做什么项目？",
   "projectStepPlaceholder": "例如：营销计划",
+
   "tasksStepTitle": "创建您的第一个任务",
   "tasksStepLabel": "输入您将在其中完成的几个任务",
   "tasksStepAddAnother": "添加另一个",
+
   "emailPlaceholder": "电子邮件地址",
   "invalidEmail": "请输入有效的电子邮件地址",
   "or": "或",
@@ -20,8 +44,170 @@
   "step3InputLabel": "通过电子邮件邀请",
   "addAnother": "添加另一个",
   "skipForNow": "暂时跳过",
+  "skipping": "跳过中...",
   "formTitle": "创建您的第一个任务。",
   "step3Title": "邀请您的团队一起工作",
-  "maxMembers": "（您最多可以邀请5名成员）",
-  "maxTasks": "（您最多可以创建5个任务）"
-}
\ No newline at end of file
+  "maxMembers": "（您最多可以邀请 5 名成员）",
+  "maxTasks": "（您最多可以创建 5 个任务）",
+
+  "membersStepTitle": "邀请您的团队",
+  "membersStepDescription": "将团队成员添加到 \"{{organizationName}}\" 并开始协作",
+  "memberPlaceholder": "团队成员 {{index}} - 输入电子邮件地址",
+  "validEmailAddress": "有效的电子邮件地址",
+  "addAnotherTeamMember": "添加另一个团队成员 ({{current}}/{{max}})",
+  "canInviteLater": "您可以稍后邀请团队成员",
+  "skipStepDescription": "没有准备好电子邮件地址？没关系！您可以跳过此步骤，稍后从项目面板邀请团队成员。",
+
+  "orgCategoryTech": "科技公司",
+  "orgCategoryCreative": "创意机构",
+  "orgCategoryConsulting": "咨询公司",
+  "orgCategoryStartups": "初创企业",
+  "namingTip1": "保持简单且易记",
+  "namingTip2": "体现您的行业或价值观",
+  "namingTip3": "考虑未来发展",
+  "namingTip4": "使其独特且有品牌感",
+
+  "aboutYouTitle": "告诉我们关于您的信息",
+  "aboutYouDescription": "帮助我们个性化您的体验",
+  "orgTypeQuestion": "哪项最能描述您的组织？",
+  "userRoleQuestion": "您的角色是什么？",
+
+  "yourNeedsTitle": "您的主要需求是什么？",
+  "yourNeedsDescription": "请选择所有适用项，帮助我们设置您的工作区",
+  "yourNeedsQuestion": "您主要如何使用 Worklenz？",
+  "useCaseTaskOrg": "组织和跟踪任务",
+  "useCaseTeamCollab": "团队协作",
+  "useCaseResourceMgmt": "管理时间和资源",
+  "useCaseClientComm": "与客户保持联系",
+  "useCaseTimeTrack": "监控项目工时",
+  "useCaseOther": "其他",
+  "selectedText": "已选择",
+  "previousToolsQuestion": "您之前用过哪些工具？（可选）",
+  "previousToolsPlaceholder": "例如：Asana、Trello、Jira、Monday.com 等",
+
+  "discoveryTitle": "最后一个问题……",
+  "discoveryDescription": "帮助我们了解您是如何发现 Worklenz 的",
+  "discoveryQuestion": "您是如何听说我们的？",
+  "allSetTitle": "一切就绪！",
+  "allSetDescription": "让我们创建您的第一个项目并开始使用 Worklenz 吧",
+  "surveyCompleteTitle": "谢谢！",
+  "surveyCompleteDescription": "您的反馈有助于我们为所有人改进 Worklenz",
+  "aboutYouStepName": "关于您",
+  "yourNeedsStepName": "您的需求",
+  "discoveryStepName": "发现",
+  "stepProgress": "第 {step} 步，共 3 步：{title}",
+
+  "projectStepHeader": "让我们创建您的第一个项目",
+  "projectStepSubheader": "从头开始或使用模板更快上手",
+  "startFromScratch": "从头开始",
+  "templateSelected": "已选择模板如下",
+  "quickSuggestions": "快速建议：",
+  "orText": "或",
+  "startWithTemplate": "从模板开始",
+  "clearToSelectTemplate": "请先清空上方项目名称以选择模板",
+  "templateHeadStart": "使用预设项目结构快速开始",
+  "browseAllTemplates": "浏览所有模板",
+  "templatesAvailable": "15+ 行业专用模板可用",
+  "chooseTemplate": "选择与您的项目类型匹配的模板",
+  "createProject": "创建项目",
+
+  "templateSoftwareDev": "软件开发",
+  "templateSoftwareDesc": "敏捷冲刺、缺陷跟踪、版本发布",
+  "templateMarketing": "市场营销活动",
+  "templateMarketingDesc": "活动策划、内容日历",
+  "templateConstruction": "建设项目",
+  "templateConstructionDesc": "阶段、许可、承包商",
+  "templateStartup": "初创启动",
+  "templateStartupDesc": "MVP 开发、融资、增长",
+
+  "tasksStepTitle": "添加您的第一个任务",
+  "tasksStepDescription": "将 \"{{projectName}}\" 拆分为可执行任务以开始",
+  "taskPlaceholder": "任务 {{index}} - 例如：需要做什么？",
+  "addAnotherTask": "添加另一个任务 ({{current}}/{{max}})",
+
+  "surveyStepTitle": "告诉我们关于您的信息",
+  "surveyStepLabel": "通过回答几个问题帮助我们个性化您的 Worklenz 体验。",
+
+  "organizationType": "哪项最能描述您的组织？",
+  "organizationTypeFreelancer": "自由职业者",
+  "organizationTypeStartup": "初创公司",
+  "organizationTypeSmallMediumBusiness": "中小企业",
+  "organizationTypeAgency": "代理机构",
+  "organizationTypeEnterprise": "企业",
+  "organizationTypeOther": "其他",
+
+  "userRole": "您的角色是什么？",
+  "userRoleFounderCeo": "创始人 / CEO",
+  "userRoleProjectManager": "项目经理",
+  "userRoleSoftwareDeveloper": "软件开发者",
+  "userRoleDesigner": "设计师",
+  "userRoleOperations": "运营",
+  "userRoleOther": "其他",
+
+  "mainUseCases": "您主要将 Worklenz 用于什么？",
+  "mainUseCasesTaskManagement": "任务管理",
+  "mainUseCasesTeamCollaboration": "团队协作",
+  "mainUseCasesResourcePlanning": "资源规划",
+  "mainUseCasesClientCommunication": "客户沟通与报告",
+  "mainUseCasesTimeTracking": "时间跟踪",
+  "mainUseCasesOther": "其他",
+
+  "previousTools": "在使用 Worklenz 之前您用过哪些工具？",
+  "previousToolsPlaceholder": "例如：Trello、Asana、Monday.com",
+
+  "howHeardAbout": "您是如何了解 Worklenz 的？",
+  "howHeardAboutGoogleSearch": "Google 搜索",
+  "howHeardAboutTwitter": "Twitter",
+  "howHeardAboutLinkedin": "LinkedIn",
+  "howHeardAboutFriendColleague": "朋友或同事",
+  "howHeardAboutBlogArticle": "博客或文章",
+  "howHeardAboutOther": "其他",
+  
+  "aboutYouStepTitle": "告诉我们关于您的信息",
+  "aboutYouStepDescription": "帮助我们个性化您的体验",
+  "yourNeedsStepTitle": "您的主要需求是什么？",
+  "yourNeedsStepDescription": "选择所有适用的选项，帮助我们设置您的工作空间",
+  "selected": "已选择",
+  "previousToolsLabel": "您之前使用过哪些工具？（可选）",
+  
+  "roleSuggestions": {
+    "designer": "UI/UX、图形、创意",
+    "developer": "前端、后端、全栈", 
+    "projectManager": "规划、协调",
+    "marketing": "内容、社交媒体、增长",
+    "sales": "业务发展、客户关系",
+    "operations": "行政、人力资源、财务"
+  },
+  
+  "languages": {
+    "en": "English",
+    "es": "Español", 
+    "pt": "Português",
+    "de": "Deutsch",
+    "alb": "Shqip",
+    "zh": "简体中文"
+  },
+  
+  "orgSuggestions": {
+    "tech": ["TechCorp", "DevStudio", "CodeCraft", "PixelForge"],
+    "creative": ["Creative Hub", "Design Studio", "Brand Works", "Visual Arts"],
+    "consulting": ["Strategy Group", "Business Solutions", "Expert Advisors", "Growth Partners"],
+    "startup": ["Innovation Labs", "Future Works", "Venture Co", "Next Gen"]
+  },
+  
+  "projectSuggestions": {
+    "freelancer": ["客户项目", "作品集更新", "个人品牌"],
+    "startup": ["MVP开发", "产品发布", "市场调研"],
+    "agency": ["客户活动", "品牌策略", "网站重设计"],
+    "enterprise": ["系统迁移", "流程优化", "团队培训"]
+  },
+  
+  "useCaseDescriptions": {
+    "taskManagement": "组织和跟踪任务",
+    "teamCollaboration": "无缝协作",
+    "resourcePlanning": "管理时间和资源", 
+    "clientCommunication": "与客户保持联系",
+    "timeTracking": "监控项目时间",
+    "other": "其他"
+  }
+}
diff --git a/worklenz-frontend/public/locales/zh/admin-center/current-bill.json b/worklenz-frontend/public/locales/zh/admin-center/current-bill.json
index e18e8761b..e5333ff71 100644
--- a/worklenz-frontend/public/locales/zh/admin-center/current-bill.json
+++ b/worklenz-frontend/public/locales/zh/admin-center/current-bill.json
@@ -90,6 +90,7 @@
   "switchToFreePlan": "切换到免费计划",
   "expirestoday": "今天",
   "expirestomorrow": "明天",
+  "expiredDayAgo": "{{days}}天前",
   "expiredDaysAgo": "{{days}}天前",
   "continueWith": "继续使用{{plan}}",
   "changeToPlan": "更改为{{plan}}"
diff --git a/worklenz-frontend/public/locales/zh/common.json b/worklenz-frontend/public/locales/zh/common.json
index 520ee5e21..7fa13278b 100644
--- a/worklenz-frontend/public/locales/zh/common.json
+++ b/worklenz-frontend/public/locales/zh/common.json
@@ -5,5 +5,40 @@
   "signup-failed": "注册失败。请确保填写所有必填字段并重试。",
   "reconnecting": "与服务器断开连接。",
   "connection-lost": "无法连接到服务器。请检查您的互联网连接。",
-  "connection-restored": "成功连接到服务器"
+  "connection-restored": "成功连接到服务器",
+  "cancel": "取消",
+  "update-available": "Worklenz 已更新！",
+  "update-description": "Worklenz 的新版本已可用，具有最新的功能和改进。",
+  "update-instruction": "为了获得最佳体验，请刷新页面以应用新更改。",
+  "update-whats-new": "💡 <1>新增内容：</1>性能增强、错误修复和用户体验改善",
+  "update-now": "立即更新",
+  "update-later": "稍后",
+  "updating": "正在更新...",
+  "license-expired-title": "试用期已过",
+  "license-expired-subtitle": "您的 Worklenz 试用期已结束。请升级以继续享受所有功能。",
+  "license-expired-features": "立即升级解锁：",
+  "license-expired-feature-1": "✓ 无限项目和任务",
+  "license-expired-feature-2": "✓ 高级报告和分析",
+  "license-expired-feature-3": "✓ 团队协作功能",
+  "license-expired-feature-4": "✓ 优先支持",
+  "license-expired-upgrade": "立即升级",
+  "license-expired-days-remaining": "试用期剩余 {{days}} 天",
+  "trial-expiring-soon": "您的试用期还有 {{days}} 天到期",
+  "trial-expiring-soon_plural": "您的试用期还有 {{days}} 天到期",
+  "trial-expiring-today": "您的试用期今天到期！",
+  "trial-expiring-upgrade": "立即升级以保留所有数据并继续使用",
+  "trial-badge-days": "剩余{{days}}天",
+  "trial-badge-today": "最后一天！",
+  "trial-badge-hours": "剩余{{hours}}小时",
+  "trial-alert-admin-note": "您仍可以访问管理中心管理您的订阅",
+  "trial-alert-dismiss": "今日暂不提醒",
+  "license-expiring-soon": "您的许可证还有 {{days}} 天到期",
+  "license-expiring-soon_plural": "您的许可证还有 {{days}} 天到期",
+  "license-expiring-today": "您的许可证今天到期！",
+  "license-expired-grace-period": "您的许可证已过期。剩余 {{days}} 天宽限期",
+  "license-expired-grace-period_plural": "您的许可证已过期。剩余 {{days}} 天宽限期",
+  "license-expiring-upgrade": "立即续费以保留所有数据并继续使用",
+  "license-badge-days": "剩余{{days}}天",
+  "license-badge-today": "最后一天！",
+  "license-badge-hours": "剩余{{hours}}小时"
 }
\ No newline at end of file
diff --git a/worklenz-frontend/public/locales/zh/home.json b/worklenz-frontend/public/locales/zh/home.json
index 184b4f1ab..638e14f8c 100644
--- a/worklenz-frontend/public/locales/zh/home.json
+++ b/worklenz-frontend/public/locales/zh/home.json
@@ -41,6 +41,22 @@
     "list": "列表",
     "calendar": "日历",
     "tasks": "任务",
-    "refresh": "刷新"
+    "refresh": "刷新",
+    "recentActivity": "最近活动",
+    "recentTasks": "最近任务",
+    "recentTasksSegment": "最近任务",
+    "timeLogged": "时间记录",
+    "timeLoggedSegment": "时间记录",
+    "noRecentTasks": "没有最近任务",
+    "noTimeLoggedTasks": "没有时间记录任务",
+    "activityTag": "活动",
+    "timeLogTag": "时间记录",
+    "timerTag": "计时器",
+    "activitySingular": "活动",
+    "activityPlural": "活动",
+    "recentTaskAriaLabel": "最近任务：",
+    "timeLoggedTaskAriaLabel": "时间记录任务：",
+    "errorLoadingRecentTasks": "加载最近任务时出错",
+    "errorLoadingTimeLoggedTasks": "加载时间记录任务时出错"
   }
 }
\ No newline at end of file
diff --git a/worklenz-frontend/public/locales/zh/kanban-board.json b/worklenz-frontend/public/locales/zh/kanban-board.json
index 7b72c5d50..20c7cb087 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/navbar.json b/worklenz-frontend/public/locales/zh/navbar.json
index c4ed67abb..02e1abfc3 100644
--- a/worklenz-frontend/public/locales/zh/navbar.json
+++ b/worklenz-frontend/public/locales/zh/navbar.json
@@ -18,6 +18,7 @@
   "profileTooltip": "查看个人资料",
   "adminCenter": "管理中心",
   "settings": "设置",
+  "deleteAccount": "删除账户",
   "logOut": "登出",
   "notificationsDrawer": {
     "read": "已读通知",
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 f412f22bf..512ab0d0e 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/labels.json b/worklenz-frontend/public/locales/zh/settings/labels.json
index ab0d01cd7..af3310b7b 100644
--- a/worklenz-frontend/public/locales/zh/settings/labels.json
+++ b/worklenz-frontend/public/locales/zh/settings/labels.json
@@ -7,5 +7,9 @@
   "searchPlaceholder": "按名称搜索",
   "emptyText": "标签可以在更新或创建任务时创建。",
   "pinTooltip": "点击将其固定到主菜单",
-  "colorChangeTooltip": "点击更改颜色"
+  "colorChangeTooltip": "点击更改颜色",
+  "pageTitle": "管理标签",
+  "deleteConfirmTitle": "您确定要删除这个吗？",
+  "deleteButton": "删除",
+  "cancelButton": "取消"
 }
\ 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 8b39483c4..8e9bcfb05 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/public/locales/zh/survey.json b/worklenz-frontend/public/locales/zh/survey.json
new file mode 100644
index 000000000..b472db9c6
--- /dev/null
+++ b/worklenz-frontend/public/locales/zh/survey.json
@@ -0,0 +1,14 @@
+{
+  "modalTitle": "帮助我们提升您的体验",
+  "skip": "暂时跳过",
+  "previous": "上一步",
+  "next": "下一步",
+  "completeSurvey": "完成调查",
+  "submitting": "正在提交您的回答...",
+  "submitSuccessTitle": "谢谢！",
+  "submitSuccessSubtitle": "您的反馈帮助我们改进 Worklenz。",
+  "submitSuccessMessage": "感谢您完成调查！",
+  "submitErrorMessage": "提交调查失败。请重试。",
+  "submitErrorLog": "提交调查失败",
+  "fetchErrorLog": "获取调查失败"
+} 
\ No newline at end of file
diff --git a/worklenz-frontend/public/locales/zh/task-list-filters.json b/worklenz-frontend/public/locales/zh/task-list-filters.json
index 4d1d6b432..f5617aac7 100644
--- a/worklenz-frontend/public/locales/zh/task-list-filters.json
+++ b/worklenz-frontend/public/locales/zh/task-list-filters.json
@@ -79,5 +79,12 @@
   "close": "关闭",
   "cannotMoveStatus": "无法移动状态",
   "cannotMoveStatusMessage": "无法移动此状态，因为这会使\"{{categoryName}}\"类别为空。每个类别必须至少有一个状态。",
-  "ok": "确定"
+  "ok": "确定",
+  "clearSort": "清除排序",
+  "sortAscending": "升序排列",
+  "sortDescending": "降序排列",
+  "sortByField": "按{{field}}排序",
+  "ascendingOrder": "升序",
+  "descendingOrder": "降序",
+  "currentSort": "当前排序：{{field}} {{order}}"
 }
\ No newline at end of file
diff --git a/worklenz-frontend/public/locales/zh/task-list-table.json b/worklenz-frontend/public/locales/zh/task-list-table.json
index 63718830d..e61fe4039 100644
--- a/worklenz-frontend/public/locales/zh/task-list-table.json
+++ b/worklenz-frontend/public/locales/zh/task-list-table.json
@@ -50,6 +50,9 @@
   "pendingInvitation": "待处理邀请",
   "contextMenu": {
     "assignToMe": "分配给我",
+    "copyLink": "复制任务链接",
+    "linkCopied": "链接已复制到剪贴板",
+    "linkCopyFailed": "复制链接失败",
     "moveTo": "移动到",
     "unarchive": "取消归档",
     "archive": "归档",
@@ -126,5 +129,11 @@
       "dependencies": "任务有依赖项",
       "recurring": "重复任务"
     }
+  },
+
+  "timer": {
+    "conflictTitle": "计时器已在运行",
+    "conflictMessage": "您在项目\"{{projectName}}\"中的\"{{taskName}}\"任务正在运行计时器。您是否要停止该计时器并为此任务启动新的计时器？",
+    "stopAndStart": "停止并启动新计时器"
   }
 }
\ No newline at end of file
diff --git a/worklenz-frontend/public/sw.js b/worklenz-frontend/public/sw.js
index 15dbef76d..2e299274b 100644
--- a/worklenz-frontend/public/sw.js
+++ b/worklenz-frontend/public/sw.js
@@ -325,6 +325,12 @@ self.addEventListener('message', event => {
       event.ports[0].postMessage({ version: CACHE_VERSION });
       break;
       
+    case 'CHECK_FOR_UPDATES':
+      checkForUpdates().then((hasUpdates) => {
+        event.ports[0].postMessage({ hasUpdates });
+      });
+      break;
+      
     case 'CLEAR_CACHE':
       clearAllCaches().then(() => {
         event.ports[0].postMessage({ success: true });
@@ -349,6 +355,44 @@ async function clearAllCaches() {
   console.log('Service Worker: All caches cleared');
 }
 
+async function checkForUpdates() {
+  try {
+    // Check if there's a new service worker available
+    const registration = await self.registration.update();
+    const hasNewWorker = registration.installing || registration.waiting;
+    
+    if (hasNewWorker) {
+      console.log('Service Worker: New version detected');
+      return true;
+    }
+    
+    // Also check if the main app files have been updated by trying to fetch index.html
+    // and comparing it with the cached version
+    try {
+      const cache = await caches.open(CACHE_NAMES.STATIC);
+      const cachedResponse = await cache.match('/');
+      const networkResponse = await fetch('/', { cache: 'no-cache' });
+      
+      if (cachedResponse && networkResponse.ok) {
+        const cachedContent = await cachedResponse.text();
+        const networkContent = await networkResponse.text();
+        
+        if (cachedContent !== networkContent) {
+          console.log('Service Worker: App content has changed');
+          return true;
+        }
+      }
+    } catch (error) {
+      console.log('Service Worker: Could not check for content updates', error);
+    }
+    
+    return false;
+  } catch (error) {
+    console.error('Service Worker: Error checking for updates', error);
+    return false;
+  }
+}
+
 async function handleLogout() {
   try {
     // Clear all caches
diff --git a/worklenz-frontend/src/App.tsx b/worklenz-frontend/src/App.tsx
index 0f29cdcd3..92beecd6a 100644
--- a/worklenz-frontend/src/App.tsx
+++ b/worklenz-frontend/src/App.tsx
@@ -6,6 +6,7 @@ import i18next from 'i18next';
 // Components
 import ThemeWrapper from './features/theme/ThemeWrapper';
 import ModuleErrorBoundary from './components/ModuleErrorBoundary';
+import { UpdateNotificationProvider } from './components/update-notification';
 
 // Routes
 import router from './app/routes';
@@ -202,14 +203,16 @@ const App: React.FC = memo(() => {
   return (
     <Suspense fallback={<SuspenseFallback />}>
       <ThemeWrapper>
-        <ModuleErrorBoundary>
-          <RouterProvider
-            router={router}
-            future={{
-              v7_startTransition: true,
-            }}
-          />
-        </ModuleErrorBoundary>
+        <UpdateNotificationProvider>
+          <ModuleErrorBoundary>
+            <RouterProvider
+              router={router}
+              future={{
+                v7_startTransition: true,
+              }}
+            />
+          </ModuleErrorBoundary>
+        </UpdateNotificationProvider>
       </ThemeWrapper>
     </Suspense>
   );
diff --git a/worklenz-frontend/src/api/account/account.api.service.ts b/worklenz-frontend/src/api/account/account.api.service.ts
new file mode 100644
index 000000000..ed30387df
--- /dev/null
+++ b/worklenz-frontend/src/api/account/account.api.service.ts
@@ -0,0 +1,23 @@
+import apiClient from '../api-client';
+import { API_BASE_URL } from '@/shared/constants';
+import { IServerResponse } from '@/types/common.types';
+
+export interface AccountDeletionRequest {
+  userId: string;
+  userEmail: string;
+  userName: string;
+}
+
+const rootUrl = `${API_BASE_URL}/account`;
+
+export const accountApiService = {
+  requestDeletion: async (request: AccountDeletionRequest): Promise<IServerResponse<any>> => {
+    const response = await apiClient.post<IServerResponse<any>>(`${rootUrl}/deletion-request`, request);
+    return response.data;
+  },
+
+  cancelDeletion: async (): Promise<IServerResponse<any>> => {
+    const response = await apiClient.post<IServerResponse<any>>(`${rootUrl}/cancel-deletion`);
+    return response.data;
+  },
+};
\ No newline at end of file
diff --git a/worklenz-frontend/src/api/home-page/user-activity.api.service.ts b/worklenz-frontend/src/api/home-page/user-activity.api.service.ts
new file mode 100644
index 000000000..f37da22a9
--- /dev/null
+++ b/worklenz-frontend/src/api/home-page/user-activity.api.service.ts
@@ -0,0 +1,46 @@
+import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
+import { API_BASE_URL } from '@/shared/constants';
+import { getCsrfToken } from '../api-client';
+import { IUserRecentTask, IUserTimeLoggedTask } from '@/types/home/user-activity.types';
+import config from '@/config/env';
+
+const rootUrl = '/logs';
+
+export const userActivityApiService = createApi({
+    reducerPath: 'userActivityApi',
+    baseQuery: fetchBaseQuery({
+        baseUrl: `${config.apiUrl}${API_BASE_URL}`,
+        prepareHeaders: (headers) => {
+            headers.set('X-CSRF-Token', getCsrfToken() || '');
+            headers.set('Content-Type', 'application/json');
+            return headers;
+        },
+        credentials: 'include',
+    }),
+    tagTypes: ['UserRecentTasks', 'UserTimeLoggedTasks'],
+    endpoints: (builder) => ({
+        getUserRecentTasks: builder.query<IUserRecentTask[], { limit?: number; offset?: number }>({
+            query: ({ limit = 10, offset = 0 }) => ({
+                url: `${rootUrl}/user-recent-tasks`,
+                params: { limit, offset },
+                method: 'GET',
+            }),
+            providesTags: ['UserRecentTasks'],
+        }),
+        getUserTimeLoggedTasks: builder.query<IUserTimeLoggedTask[], { limit?: number; offset?: number }>({
+            query: ({ limit = 10, offset = 0 }) => ({
+                url: `${rootUrl}/user-time-logged-tasks`,
+                params: { limit, offset },
+                method: 'GET',
+            }),
+            providesTags: ['UserTimeLoggedTasks'],
+        }),
+    }),
+});
+
+export const {
+    useGetUserRecentTasksQuery,
+    useGetUserTimeLoggedTasksQuery,
+} = userActivityApiService;
+
+
diff --git a/worklenz-frontend/src/api/reporting/reporting.timesheet.api.service.updated.ts b/worklenz-frontend/src/api/reporting/reporting.timesheet.api.service.updated.ts
new file mode 100644
index 000000000..a02b5ca2a
--- /dev/null
+++ b/worklenz-frontend/src/api/reporting/reporting.timesheet.api.service.updated.ts
@@ -0,0 +1,92 @@
+import { API_BASE_URL } from '@/shared/constants';
+import { toQueryString } from '@/utils/toQueryString';
+import apiClient from '../api-client';
+import { IServerResponse } from '@/types/common.types';
+import { IAllocationViewModel } from '@/types/reporting/reporting-allocation.types';
+import {
+  IProjectLogsBreakdown,
+  IRPTTimeMember,
+  IRPTTimeProject,
+  ITimeLogBreakdownReq,
+} from '@/types/reporting/reporting.types';
+
+const rootUrl = `${API_BASE_URL}/reporting`;
+
+// Helper function to get user's timezone
+const getUserTimezone = () => {
+  return Intl.DateTimeFormat().resolvedOptions().timeZone;
+};
+
+export const reportingTimesheetApiService = {
+  getTimeSheetData: async (
+    body = {},
+    archived = false
+  ): Promise<IServerResponse<IAllocationViewModel>> => {
+    const q = toQueryString({ archived });
+    const bodyWithTimezone = {
+      ...body,
+      timezone: getUserTimezone()
+    };
+    const response = await apiClient.post(`${rootUrl}/allocation/${q}`, bodyWithTimezone);
+    return response.data;
+  },
+
+  getAllocationProjects: async (body = {}) => {
+    const bodyWithTimezone = {
+      ...body,
+      timezone: getUserTimezone()
+    };
+    const response = await apiClient.post(`${rootUrl}/allocation/allocation-projects`, bodyWithTimezone);
+    return response.data;
+  },
+
+  getProjectTimeSheets: async (
+    body = {},
+    archived = false
+  ): Promise<IServerResponse<IRPTTimeProject[]>> => {
+    const q = toQueryString({ archived });
+    const bodyWithTimezone = {
+      ...body,
+      timezone: getUserTimezone()
+    };
+    const response = await apiClient.post(`${rootUrl}/time-reports/projects/${q}`, bodyWithTimezone);
+    return response.data;
+  },
+
+  getMemberTimeSheets: async (
+    body = {},
+    archived = false
+  ): Promise<IServerResponse<IRPTTimeMember[]>> => {
+    const q = toQueryString({ archived });
+    const bodyWithTimezone = {
+      ...body,
+      timezone: getUserTimezone()
+    };
+    const response = await apiClient.post(`${rootUrl}/time-reports/members/${q}`, bodyWithTimezone);
+    return response.data;
+  },
+
+  getProjectTimeLogs: async (
+    body: ITimeLogBreakdownReq
+  ): Promise<IServerResponse<IProjectLogsBreakdown[]>> => {
+    const bodyWithTimezone = {
+      ...body,
+      timezone: getUserTimezone()
+    };
+    const response = await apiClient.post(`${rootUrl}/project-timelogs`, bodyWithTimezone);
+    return response.data;
+  },
+
+  getProjectEstimatedVsActual: async (
+    body = {},
+    archived = false
+  ): Promise<IServerResponse<IRPTTimeProject[]>> => {
+    const q = toQueryString({ archived });
+    const bodyWithTimezone = {
+      ...body,
+      timezone: getUserTimezone()
+    };
+    const response = await apiClient.post(`${rootUrl}/time-reports/estimated-vs-actual${q}`, bodyWithTimezone);
+    return response.data;
+  },
+};
\ No newline at end of file
diff --git a/worklenz-frontend/src/api/support/support.api.service.ts b/worklenz-frontend/src/api/support/support.api.service.ts
new file mode 100644
index 000000000..57c0f4dbc
--- /dev/null
+++ b/worklenz-frontend/src/api/support/support.api.service.ts
@@ -0,0 +1,17 @@
+import apiClient from '../api-client';
+import { API_BASE_URL } from '@/shared/constants';
+import { IServerResponse } from '@/types/common.types';
+
+export interface ContactSupportRequest {
+  subscription_type?: string;
+  reason?: string;
+}
+
+const rootUrl = `${API_BASE_URL}/support`;
+
+export const supportApiService = {
+  contactSupport: async (request: ContactSupportRequest): Promise<IServerResponse<any>> => {
+    const response = await apiClient.post<IServerResponse<any>>(`${rootUrl}/contact`, request);
+    return response.data;
+  },
+};
\ No newline at end of file
diff --git a/worklenz-frontend/src/api/survey/survey.api.service.ts b/worklenz-frontend/src/api/survey/survey.api.service.ts
new file mode 100644
index 000000000..a236bf511
--- /dev/null
+++ b/worklenz-frontend/src/api/survey/survey.api.service.ts
@@ -0,0 +1,27 @@
+import { IServerResponse } from '@/types/common.types';
+import { ISurvey, ISurveySubmissionRequest, ISurveyResponse } from '@/types/account-setup/survey.types';
+import apiClient from '../api-client';
+
+const API_BASE_URL = '/api/v1';
+
+export const surveyApiService = {
+  async getAccountSetupSurvey(): Promise<IServerResponse<ISurvey>> {
+    const response = await apiClient.get<IServerResponse<ISurvey>>(`${API_BASE_URL}/surveys/account-setup`);
+    return response.data;
+  },
+
+  async submitSurveyResponse(data: ISurveySubmissionRequest): Promise<IServerResponse<{ response_id: string }>> {
+    const response = await apiClient.post<IServerResponse<{ response_id: string }>>(`${API_BASE_URL}/surveys/responses`, data);
+    return response.data;
+  },
+
+  async getUserSurveyResponse(surveyId: string): Promise<IServerResponse<ISurveyResponse>> {
+    const response = await apiClient.get<IServerResponse<ISurveyResponse>>(`${API_BASE_URL}/surveys/responses/${surveyId}`);
+    return response.data;
+  },
+
+  async checkAccountSetupSurveyStatus(): Promise<IServerResponse<{ is_completed: boolean; completed_at?: string }>> {
+    const response = await apiClient.get<IServerResponse<{ is_completed: boolean; completed_at?: string }>>(`${API_BASE_URL}/surveys/account-setup/status`);
+    return response.data;
+  }
+};
\ No newline at end of file
diff --git a/worklenz-frontend/src/api/taskAttributes/labels/labels.api.service.ts b/worklenz-frontend/src/api/taskAttributes/labels/labels.api.service.ts
index c9e36ff41..fd9a9259d 100644
--- a/worklenz-frontend/src/api/taskAttributes/labels/labels.api.service.ts
+++ b/worklenz-frontend/src/api/taskAttributes/labels/labels.api.service.ts
@@ -27,12 +27,17 @@ export const labelsApiService = {
 
   updateColor: async (labelId: string, color: string): Promise<IServerResponse<ITaskLabel>> => {
     const response = await apiClient.put<IServerResponse<ITaskLabel>>(
-      `${rootUrl}/tasks/${labelId}/color`,
+      `${rootUrl}/tasks/${labelId}`,
       { color }
     );
     return response.data;
   },
 
+  updateLabel: async (labelId: string, data: { name?: string; color?: string }): Promise<IServerResponse<ITaskLabel>> => {
+    const response = await apiClient.put<IServerResponse<ITaskLabel>>(`${rootUrl}/team/${labelId}`, data);
+    return response.data;
+  },
+
   deleteById: async (labelId: string): Promise<IServerResponse<void>> => {
     const response = await apiClient.delete<IServerResponse<void>>(`${rootUrl}/team/${labelId}`);
     return response.data;
diff --git a/worklenz-frontend/src/api/tasks/task-time-logs.api.service.ts b/worklenz-frontend/src/api/tasks/task-time-logs.api.service.ts
index 1a9191eef..038b85844 100644
--- a/worklenz-frontend/src/api/tasks/task-time-logs.api.service.ts
+++ b/worklenz-frontend/src/api/tasks/task-time-logs.api.service.ts
@@ -2,6 +2,7 @@ import { API_BASE_URL } from '@/shared/constants';
 import apiClient from '../api-client';
 import { IServerResponse } from '@/types/common.types';
 import { ITaskLogViewModel } from '@/types/tasks/task-log-view.types';
+import { getUserSession } from '@/utils/session-helper';
 
 const rootUrl = `${API_BASE_URL}/task-time-log`;
 
@@ -17,7 +18,11 @@ export interface IRunningTimer {
 
 export const taskTimeLogsApiService = {
   getByTask: async (id: string): Promise<IServerResponse<ITaskLogViewModel[]>> => {
-    const response = await apiClient.get(`${rootUrl}/task/${id}`);
+    const session = getUserSession();
+    const timezone = session?.timezone_name || 'UTC';
+    const response = await apiClient.get(`${rootUrl}/task/${id}`, {
+      params: { time_zone_name: timezone }
+    });
     return response.data;
   },
 
diff --git a/worklenz-frontend/src/app/routes/index.tsx b/worklenz-frontend/src/app/routes/index.tsx
index 722fcd48c..669c58310 100644
--- a/worklenz-frontend/src/app/routes/index.tsx
+++ b/worklenz-frontend/src/app/routes/index.tsx
@@ -2,7 +2,7 @@ import { createBrowserRouter, Navigate, RouteObject, useLocation } from 'react-r
 import { lazy, Suspense, memo, useMemo } from 'react';
 import rootRoutes from './root-routes';
 import authRoutes from './auth-routes';
-import mainRoutes, { licenseExpiredRoute } from './main-routes';
+import mainRoutes from './main-routes';
 import notFoundRoute from './not-found-route';
 import accountSetupRoute from './account-setup-routes';
 import reportingRoutes from './reporting-routes';
@@ -11,6 +11,7 @@ import { AuthenticatedLayout } from '@/layouts/AuthenticatedLayout';
 import ErrorBoundary from '@/components/ErrorBoundary';
 import { SuspenseFallback } from '@/components/suspense-fallback/suspense-fallback';
 import { ISUBSCRIPTION_TYPE } from '@/shared/constants';
+import { LicenseExpiredModal } from '@/components/LicenseExpiredModal/LicenseExpiredModal';
 
 // Lazy load the NotFoundPage component for better code splitting
 const NotFoundPage = lazy(() => import('@/pages/404-page/404-page'));
@@ -61,12 +62,34 @@ AdminGuard.displayName = 'AdminGuard';
 
 export const LicenseExpiryGuard = memo(({ children }: GuardProps) => {
   const { isLicenseExpired, location } = useAuthStatus();
+  const authService = useAuthService();
 
   const isAdminCenterRoute = location.pathname.includes('/worklenz/admin-center');
-  const isLicenseExpiredRoute = location.pathname === '/worklenz/license-expired';
-
-  if (isLicenseExpired && !isAdminCenterRoute && !isLicenseExpiredRoute) {
-    return <Navigate to="/worklenz/license-expired" replace />;
+  const isAccountDeletionRoute = location.pathname.includes('/worklenz/settings/account-deletion');
+
+  // Show modal instead of redirecting, but not on admin center routes or account deletion
+  const showModal = isLicenseExpired && !isAdminCenterRoute && !isAccountDeletionRoute;
+
+  // Get the user's subscription type
+  const currentSession = authService?.getCurrentSession();
+  const subscriptionType = currentSession?.subscription_type as ISUBSCRIPTION_TYPE;
+
+  // If license is expired and not on admin center, block the content entirely
+  if (showModal) {
+    return (
+      <div style={{ position: 'relative', height: '100vh', overflow: 'hidden' }}>
+        <div style={{ 
+          position: 'absolute', 
+          inset: 0, 
+          pointerEvents: 'none', 
+          opacity: 0.3,
+          filter: 'blur(2px)'
+        }}>
+          {children}
+        </div>
+        <LicenseExpiredModal open={true} subscriptionType={subscriptionType} />
+      </div>
+    );
   }
 
   return <>{children}</>;
@@ -194,7 +217,7 @@ const adminRoutes = wrapRoutes(reportingRoutes, AdminGuard);
 // Setup route should be accessible without setup completion, only requires authentication
 const setupRoutes = wrapRoutes([accountSetupRoute], AuthGuard);
 
-// License expiry check function
+// License expiry check function - only wrap top-level routes, not children
 const withLicenseExpiryCheck = (routes: RouteObject[]): RouteObject[] => {
   return routes.map(route => {
     const wrappedRoute = {
@@ -206,8 +229,9 @@ const withLicenseExpiryCheck = (routes: RouteObject[]): RouteObject[] => {
       ),
     };
 
+    // Don't wrap children - they'll inherit the guard from parent
     if (route.children) {
-      wrappedRoute.children = withLicenseExpiryCheck(route.children);
+      wrappedRoute.children = route.children;
     }
 
     return wrappedRoute;
@@ -215,6 +239,7 @@ const withLicenseExpiryCheck = (routes: RouteObject[]): RouteObject[] => {
 };
 
 const licenseCheckedMainRoutes = withLicenseExpiryCheck(protectedMainRoutes);
+const licenseCheckedAdminRoutes = withLicenseExpiryCheck(adminRoutes);
 
 // Create optimized router with future flags for better performance
 const router = createBrowserRouter(
@@ -232,7 +257,7 @@ const router = createBrowserRouter(
           </Suspense>
         </ErrorBoundary>
       ),
-      children: [...licenseCheckedMainRoutes, ...adminRoutes, ...setupRoutes, licenseExpiredRoute],
+      children: [...licenseCheckedMainRoutes, ...licenseCheckedAdminRoutes, ...setupRoutes],
     },
     ...publicRoutes,
   ],
diff --git a/worklenz-frontend/src/app/routes/main-routes.tsx b/worklenz-frontend/src/app/routes/main-routes.tsx
index 8ec8cb9a2..32772cd6b 100644
--- a/worklenz-frontend/src/app/routes/main-routes.tsx
+++ b/worklenz-frontend/src/app/routes/main-routes.tsx
@@ -11,12 +11,10 @@ import { SuspenseFallback } from '@/components/suspense-fallback/suspense-fallba
 const HomePage = lazy(() => import('@/pages/home/home-page'));
 const ProjectList = lazy(() => import('@/pages/projects/project-list'));
 const Schedule = lazy(() => import('@/pages/schedule/schedule'));
-const ProjectTemplateEditView = lazy(
-  () => import('@/pages/settings/project-templates/projectTemplateEditView/ProjectTemplateEditView')
-);
-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 }) => {
@@ -91,18 +89,18 @@ const mainRoutes: RouteObject[] = [
         ),
       },
       {
-        path: `settings/project-templates/edit/:templateId/:templateName`,
+        path: 'unauthorized',
         element: (
           <Suspense fallback={<SuspenseFallback />}>
-            <ProjectTemplateEditView />
+            <Unauthorized />
           </Suspense>
         ),
       },
       {
-        path: 'unauthorized',
+        path: 'gantt-demo',
         element: (
           <Suspense fallback={<SuspenseFallback />}>
-            <Unauthorized />
+            <GanttDemoPage />
           </Suspense>
         ),
       },
@@ -112,20 +110,4 @@ const mainRoutes: RouteObject[] = [
   },
 ];
 
-// License expired route should be separate to avoid being wrapped in LicenseExpiryGuard
-export const licenseExpiredRoute: RouteObject = {
-  path: '/worklenz',
-  element: <MainLayout />,
-  children: [
-    {
-      path: 'license-expired',
-      element: (
-        <Suspense fallback={<SuspenseFallback />}>
-          <LicenseExpired />
-        </Suspense>
-      ),
-    },
-  ],
-};
-
 export default mainRoutes;
diff --git a/worklenz-frontend/src/app/store.ts b/worklenz-frontend/src/app/store.ts
index 63c738a02..4190f3a9d 100644
--- a/worklenz-frontend/src/app/store.ts
+++ b/worklenz-frontend/src/app/store.ts
@@ -7,6 +7,7 @@ import userReducer from '@features/user/userSlice';
 
 // Home Page
 import homePageReducer from '@features/home-page/home-page.slice';
+import userActivityReducer from '@features/home-page/user-activity.slice';
 
 // Account Setup
 import accountSetupReducer from '@features/account-setup/account-setup.slice';
@@ -82,6 +83,7 @@ import groupingReducer from '@/features/task-management/grouping.slice';
 import selectionReducer from '@/features/task-management/selection.slice';
 import homePageApiService from '@/api/home-page/home-page.api.service';
 import { projectsApi } from '@/api/projects/projects.v1.api.service';
+import { userActivityApiService } from '@/api/home-page/user-activity.api.service';
 
 import projectViewReducer from '@features/project/project-view-slice';
 import taskManagementFieldsReducer from '@features/task-management/taskListFields.slice';
@@ -90,7 +92,7 @@ export const store = configureStore({
   middleware: getDefaultMiddleware =>
     getDefaultMiddleware({
       serializableCheck: false,
-    }).concat(homePageApiService.middleware, projectsApi.middleware),
+    }).concat(homePageApiService.middleware, projectsApi.middleware, userActivityApiService.middleware),
   reducer: {
     // Auth & User
     auth: authReducer,
@@ -103,6 +105,9 @@ export const store = configureStore({
     homePageReducer: homePageReducer,
     [homePageApiService.reducerPath]: homePageApiService.reducer,
     [projectsApi.reducerPath]: projectsApi.reducer,
+    userActivityReducer: userActivityReducer,
+    [userActivityApiService.reducerPath]: userActivityApiService.reducer,
+
     // Core UI
     themeReducer: themeReducer,
     localesReducer: localesReducer,
diff --git a/worklenz-frontend/src/components/AssigneeSelector.tsx b/worklenz-frontend/src/components/AssigneeSelector.tsx
index 7a489885d..28126441f 100644
--- a/worklenz-frontend/src/components/AssigneeSelector.tsx
+++ b/worklenz-frontend/src/components/AssigneeSelector.tsx
@@ -11,8 +11,10 @@ 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';
+import useIsProjectManager from '@/hooks/useIsProjectManager';
+import { useAuthStatus } from '@/hooks/useAuthStatus';
 
 interface AssigneeSelectorProps {
   task: IProjectTask;
@@ -21,9 +23,9 @@ interface AssigneeSelectorProps {
   kanbanMode?: boolean;
 }
 
-const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({ 
-  task, 
-  groupId = null, 
+const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({
+  task,
+  groupId = null,
   isDarkMode = false,
   kanbanMode = false
 }) => {
@@ -42,6 +44,8 @@ const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({
   const currentSession = useAuthService().getCurrentSession();
   const { socket } = useSocket();
   const dispatch = useAppDispatch();
+  const { isAdmin } = useAuthStatus();
+  const isProjectManager = useIsProjectManager();
 
   const filteredMembers = useMemo(() => {
     return teamMembers?.data?.filter(member =>
@@ -64,7 +68,7 @@ const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node) &&
-          buttonRef.current && !buttonRef.current.contains(event.target as Node)) {
+        buttonRef.current && !buttonRef.current.contains(event.target as Node)) {
         setIsOpen(false);
       }
     };
@@ -74,10 +78,10 @@ const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({
         // Check if the button is still visible in the viewport
         if (buttonRef.current) {
           const rect = buttonRef.current.getBoundingClientRect();
-          const isVisible = rect.top >= 0 && rect.left >= 0 && 
-                           rect.bottom <= window.innerHeight && 
-                           rect.right <= window.innerWidth;
-          
+          const isVisible = rect.top >= 0 && rect.left >= 0 &&
+            rect.bottom <= window.innerHeight &&
+            rect.right <= window.innerWidth;
+
           if (isVisible) {
             updateDropdownPosition();
           } else {
@@ -98,7 +102,7 @@ const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({
       document.addEventListener('mousedown', handleClickOutside);
       window.addEventListener('scroll', handleScroll, true);
       window.addEventListener('resize', handleResize);
-      
+
       return () => {
         document.removeEventListener('mousedown', handleClickOutside);
         window.removeEventListener('scroll', handleScroll, true);
@@ -113,10 +117,10 @@ const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({
   const handleDropdownToggle = (e: React.MouseEvent) => {
     e.preventDefault();
     e.stopPropagation();
-    
+
     if (!isOpen) {
       updateDropdownPosition();
-      
+
       // Prepare team members data when opening
       const assignees = task?.assignees?.map(assignee => assignee.team_member_id);
       const membersData = (members?.data || []).map(member => ({
@@ -125,7 +129,7 @@ const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({
       }));
       const sortedMembers = sortTeamMembers(membersData);
       setTeamMembers({ data: sortedMembers });
-      
+
       setIsOpen(true);
       // Focus search input after opening
       setTimeout(() => {
@@ -160,8 +164,8 @@ const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({
     // Update local team members state for dropdown UI
     setTeamMembers(prev => ({
       ...prev,
-      data: (prev.data || []).map(member => 
-        member.id === memberId 
+      data: (prev.data || []).map(member =>
+        member.id === memberId
           ? { ...member, selected: checked }
           : member
       )
@@ -198,14 +202,15 @@ const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({
   const checkMemberSelected = (memberId: string) => {
     if (!memberId) return false;
     // Use optimistic assignees if available, otherwise fall back to task assignees
-    const assignees = optimisticAssignees.length > 0 
-      ? optimisticAssignees 
+    const assignees = optimisticAssignees.length > 0
+      ? optimisticAssignees
       : task?.assignees?.map(assignee => assignee.team_member_id) || [];
     return assignees.includes(memberId);
   };
 
   const handleInviteProjectMemberDrawer = () => {
     setIsOpen(false); // Close the assignee dropdown first
+    dispatch(setIsFromAssigner(true));
     dispatch(toggleProjectMemberDrawer()); // Then open the invite drawer
   };
 
@@ -217,12 +222,12 @@ const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({
         className={`
           w-5 h-5 rounded-full border border-dashed flex items-center justify-center
           transition-colors duration-200
-          ${isOpen 
-            ? isDarkMode 
-              ? 'border-blue-500 bg-blue-900/20 text-blue-400' 
+          ${isOpen
+            ? isDarkMode
+              ? 'border-blue-500 bg-blue-900/20 text-blue-400'
               : 'border-blue-500 bg-blue-50 text-blue-600'
-            : isDarkMode 
-              ? 'border-gray-600 hover:border-gray-500 hover:bg-gray-800 text-gray-400' 
+            : isDarkMode
+              ? 'border-gray-600 hover:border-gray-500 hover:bg-gray-800 text-gray-400'
               : 'border-gray-300 hover:border-gray-400 hover:bg-gray-100 text-gray-600'
           }
         `}
@@ -236,8 +241,8 @@ const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({
           onClick={e => e.stopPropagation()}
           className={`
             fixed z-[99999] w-72 rounded-md shadow-lg border
-            ${isDarkMode 
-              ? 'bg-gray-800 border-gray-600' 
+            ${isDarkMode
+              ? 'bg-gray-800 border-gray-600'
               : 'bg-white border-gray-200'
             }
           `}
@@ -273,10 +278,10 @@ const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({
                   key={member.id}
                   className={`
                     flex items-center gap-2 p-2 cursor-pointer transition-colors
-                    ${member.pending_invitation 
-                      ? 'opacity-50 cursor-not-allowed' 
-                      : isDarkMode 
-                        ? 'hover:bg-gray-700' 
+                    ${member.pending_invitation
+                      ? 'opacity-50 cursor-not-allowed'
+                      : isDarkMode
+                        ? 'hover:bg-gray-700'
                         : 'hover:bg-gray-50'
                     }
                   `}
@@ -301,23 +306,21 @@ const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({
                       />
                     </span>
                     {pendingChanges.has(member.id || '') && (
-                      <div className={`absolute inset-0 flex items-center justify-center ${
-                        isDarkMode ? 'bg-gray-800/50' : 'bg-white/50'
-                      }`}>
-                        <div className={`w-3 h-3 border border-t-transparent rounded-full animate-spin ${
-                          isDarkMode ? 'border-blue-400' : 'border-blue-600'
-                        }`} />
+                      <div className={`absolute inset-0 flex items-center justify-center ${isDarkMode ? 'bg-gray-800/50' : 'bg-white/50'
+                        }`}>
+                        <div className={`w-3 h-3 border border-t-transparent rounded-full animate-spin ${isDarkMode ? 'border-blue-400' : 'border-blue-600'
+                          }`} />
                       </div>
                     )}
                   </div>
-                  
+
                   <Avatar
                     src={member.avatar_url}
                     name={member.name || ''}
                     size={24}
                     isDarkMode={isDarkMode}
                   />
-                  
+
                   <div className="flex-1 min-w-0">
                     <div className={`text-xs font-medium truncate ${isDarkMode ? 'text-gray-100' : 'text-gray-900'}`}>
                       {member.name}
@@ -339,22 +342,26 @@ const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({
           </div>
 
           {/* Footer */}
-          <div className={`p-2 border-t ${isDarkMode ? 'border-gray-600' : 'border-gray-200'}`}>
-            <button
-              className={`
-                w-full flex items-center justify-center gap-1 px-2 py-1 text-xs rounded
-                transition-colors
-                ${isDarkMode
-                  ? 'text-blue-400 hover:bg-gray-700'
-                  : 'text-blue-600 hover:bg-blue-50'
-                }
-              `}
-              onClick={handleInviteProjectMemberDrawer}
-            >
-              <UserAddOutlined />
-              Invite member
-            </button>
-          </div>
+
+          {(isAdmin || isProjectManager) && (
+            <div className={`p-2 border-t ${isDarkMode ? 'border-gray-600' : 'border-gray-200'}`}>
+              <button
+                className={`
+                  w-full flex items-center justify-center gap-1 px-2 py-1 text-xs rounded
+                  transition-colors
+                  ${isDarkMode
+                    ? 'text-blue-400 hover:bg-gray-700'
+                    : 'text-blue-600 hover:bg-blue-50'
+                  }
+                `}
+                onClick={handleInviteProjectMemberDrawer}
+              >
+                <UserAddOutlined />
+                Invite member
+              </button>
+            </div>
+          )}
+
         </div>,
         document.body
       )}
diff --git a/worklenz-frontend/src/components/LicenseExpiredModal/LicenseExpiredModal.tsx b/worklenz-frontend/src/components/LicenseExpiredModal/LicenseExpiredModal.tsx
new file mode 100644
index 000000000..304b8a423
--- /dev/null
+++ b/worklenz-frontend/src/components/LicenseExpiredModal/LicenseExpiredModal.tsx
@@ -0,0 +1,237 @@
+import { Modal, Button, Typography, Space, Card, Tag } from '@/shared/antd-imports';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+import { useEffect, useState } from 'react';
+import { ClockCircleOutlined, CrownOutlined, CustomerServiceOutlined } from '@ant-design/icons';
+import { ISUBSCRIPTION_TYPE } from '@/shared/constants';
+import { supportApiService } from '@/api/support/support.api.service';
+import { useAuthService } from '@/hooks/useAuth';
+
+const { Title, Text, Paragraph } = Typography;
+
+interface LicenseExpiredModalProps {
+  open: boolean;
+  subscriptionType?: ISUBSCRIPTION_TYPE;
+}
+
+export const LicenseExpiredModal = ({ open, subscriptionType = ISUBSCRIPTION_TYPE.TRIAL }: LicenseExpiredModalProps) => {
+  const navigate = useNavigate();
+  const { t } = useTranslation('common');
+  const authService = useAuthService();
+  const [visible, setVisible] = useState(open);
+  const [isContactingSupport, setIsContactingSupport] = useState(false);
+  const [messageSent, setMessageSent] = useState(false);
+
+  useEffect(() => {
+    setVisible(open);
+    // Prevent scrolling when modal is open and add custom backdrop
+    if (open) {
+      document.body.style.overflow = 'hidden';
+      
+      // Create custom backdrop that excludes navbar
+      const backdrop = document.createElement('div');
+      backdrop.id = 'license-modal-backdrop';
+      backdrop.style.cssText = `
+        position: fixed;
+        top: 64px;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: rgba(0, 0, 0, 0.85);
+        backdrop-filter: blur(4px);
+        z-index: 999;
+        pointer-events: none;
+      `;
+      document.body.appendChild(backdrop);
+    }
+    
+    return () => {
+      document.body.style.overflow = 'unset';
+      const backdrop = document.getElementById('license-modal-backdrop');
+      if (backdrop) {
+        document.body.removeChild(backdrop);
+      }
+    };
+  }, [open]);
+
+  const handleUpgrade = async () => {
+    if (subscriptionType === ISUBSCRIPTION_TYPE.CUSTOM) {
+      if (messageSent) return; // Prevent multiple clicks after message is sent
+      
+      try {
+        setIsContactingSupport(true);
+        
+        // Get current session data
+        const currentSession = authService?.getCurrentSession();
+        
+        await supportApiService.contactSupport({
+          subscription_type: subscriptionType,
+          reason: 'Custom plan renewal/support request'
+        });
+
+        setMessageSent(true);
+        // Success message is handled by the API client interceptor
+      } catch (error) {
+        console.error('Failed to contact support:', error);
+        // Error message is handled by the API client interceptor
+      } finally {
+        setIsContactingSupport(false);
+      }
+    } else {
+      navigate('/worklenz/admin-center/billing');
+    }
+  };
+
+  // Get subscription-specific translations
+  const getTitle = () => {
+    switch (subscriptionType) {
+      case ISUBSCRIPTION_TYPE.TRIAL:
+        return t('license-expired-trial-title');
+      case ISUBSCRIPTION_TYPE.CUSTOM:
+        return t('license-expired-custom-title');
+      default:
+        return t('license-expired-title');
+    }
+  };
+
+  const getSubtitle = () => {
+    switch (subscriptionType) {
+      case ISUBSCRIPTION_TYPE.TRIAL:
+        return t('license-expired-trial-subtitle');
+      case ISUBSCRIPTION_TYPE.CUSTOM:
+        return t('license-expired-custom-subtitle');
+      default:
+        return t('license-expired-subtitle');
+    }
+  };
+
+  const getFeaturesTitle = () => {
+    switch (subscriptionType) {
+      case ISUBSCRIPTION_TYPE.TRIAL:
+        return t('license-expired-trial-features');
+      case ISUBSCRIPTION_TYPE.CUSTOM:
+        return t('license-expired-custom-features');
+      default:
+        return t('license-expired-features');
+    }
+  };
+
+  const getUpgradeText = () => {
+    switch (subscriptionType) {
+      case ISUBSCRIPTION_TYPE.TRIAL:
+        return t('license-expired-trial-upgrade');
+      case ISUBSCRIPTION_TYPE.CUSTOM:
+        return t('license-expired-custom-upgrade');
+      default:
+        return t('license-expired-upgrade');
+    }
+  };
+
+  const getUpgradeIcon = () => {
+    switch (subscriptionType) {
+      case ISUBSCRIPTION_TYPE.CUSTOM:
+        return <CustomerServiceOutlined />;
+      default:
+        return <CrownOutlined />;
+    }
+  };
+
+  const features = [
+    t('license-expired-feature-1'),
+    t('license-expired-feature-2'),
+    t('license-expired-feature-3'),
+    t('license-expired-feature-4'),
+  ];
+
+  return (
+    <Modal
+      open={visible}
+      closable={false}
+      footer={null}
+      centered
+      width={600}
+      maskClosable={false}
+      keyboard={false}
+      mask={false}
+      style={{ 
+        zIndex: 1000
+      }}
+      wrapClassName="license-expired-modal-wrap"
+    >
+      <div style={{ padding: '20px 0' }}>
+        <Space direction="vertical" size="large" style={{ width: '100%', textAlign: 'center' }}>
+          {/* Icon and Title */}
+          <div>
+            <ClockCircleOutlined style={{ fontSize: 64, color: '#1890ff', marginBottom: 16 }} />
+            <Title level={2} style={{ margin: 0, marginBottom: 8 }}>
+              {getTitle()}
+            </Title>
+            <Paragraph type="secondary" style={{ fontSize: 16, marginBottom: 0 }}>
+              {getSubtitle()}
+            </Paragraph>
+          </div>
+
+          {/* Features Card */}
+          <Card 
+            style={{ 
+              backgroundColor: '#e6f7ff', 
+              border: '1px solid #91d5ff',
+              marginTop: 24 
+            }}
+            bodyStyle={{ padding: '20px' }}
+          >
+            <Space direction="vertical" size="small" style={{ width: '100%' }}>
+              <Text strong style={{ fontSize: 16, color: '#1890ff' }}>
+                {getFeaturesTitle()}
+              </Text>
+              <Space direction="vertical" size="small" align="start" style={{ width: '100%', marginTop: 12 }}>
+                {features.map((feature, index) => (
+                  <Text key={index} style={{ fontSize: 14 }}>
+                    {feature}
+                  </Text>
+                ))}
+              </Space>
+            </Space>
+          </Card>
+
+          {/* Upgrade Button */}
+          <Button
+            type="primary"
+            size="large"
+            onClick={handleUpgrade}
+            loading={isContactingSupport && subscriptionType === ISUBSCRIPTION_TYPE.CUSTOM}
+            icon={!isContactingSupport ? getUpgradeIcon() : undefined}
+            style={{ 
+              minWidth: 200, 
+              height: 48,
+              fontSize: 16,
+              marginTop: 8,
+              background: subscriptionType === ISUBSCRIPTION_TYPE.CUSTOM 
+                ? 'linear-gradient(135deg, #1890ff 0%, #096dd9 100%)'
+                : 'linear-gradient(135deg, #1890ff 0%, #40a9ff 100%)',
+              border: 'none',
+              boxShadow: '0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08)'
+            }}
+          >
+            {subscriptionType === ISUBSCRIPTION_TYPE.CUSTOM 
+              ? (messageSent 
+                  ? t('license-expired-message-sent') 
+                  : (isContactingSupport 
+                      ? t('license-expired-contacting-support') 
+                      : getUpgradeText()
+                    )
+                )
+              : getUpgradeText()
+            }
+          </Button>
+
+          {/* Note */}
+          <Text type="secondary" style={{ fontSize: 12, marginTop: 8 }}>
+            <Tag color="blue" style={{ marginRight: 4 }}>Note</Tag>
+            {t('trial-alert-admin-note')}
+          </Text>
+        </Space>
+      </div>
+    </Modal>
+  );
+};
\ No newline at end of file
diff --git a/worklenz-frontend/src/components/TrialExpirationAlert/TrialExpirationAlert.tsx b/worklenz-frontend/src/components/TrialExpirationAlert/TrialExpirationAlert.tsx
new file mode 100644
index 000000000..69633c449
--- /dev/null
+++ b/worklenz-frontend/src/components/TrialExpirationAlert/TrialExpirationAlert.tsx
@@ -0,0 +1,150 @@
+import { Alert, Button, Space } from '@/shared/antd-imports';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+import { useState, useEffect } from 'react';
+import { CloseOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
+import { useAuthService } from '@/hooks/useAuth';
+import { ISUBSCRIPTION_TYPE } from '@/shared/constants';
+
+export const TrialExpirationAlert = () => {
+  const { t } = useTranslation('common');
+  const navigate = useNavigate();
+  const authService = useAuthService();
+  const [visible, setVisible] = useState(true);
+  const [daysRemaining, setDaysRemaining] = useState<number | null>(null);
+  
+  const currentSession = authService.getCurrentSession();
+
+  useEffect(() => {
+    // Check if user has already dismissed this alert today
+    const dismissedDate = localStorage.getItem('license-alert-dismissed');
+    const today = new Date().toDateString();
+    
+    if (dismissedDate === today) {
+      setVisible(false);
+      return;
+    }
+
+    // Calculate days remaining for expirable subscription types
+    const expirableTypes = [
+      ISUBSCRIPTION_TYPE.TRIAL,
+      ISUBSCRIPTION_TYPE.LIFE_TIME_DEAL,
+      ISUBSCRIPTION_TYPE.PADDLE,
+      ISUBSCRIPTION_TYPE.CUSTOM
+    ];
+
+    if (
+      expirableTypes.includes(currentSession?.subscription_type as ISUBSCRIPTION_TYPE) &&
+      (currentSession.valid_till_date || currentSession.trial_expire_date)
+    ) {
+      const today = new Date();
+      const expireDateStr = currentSession.valid_till_date || currentSession.trial_expire_date;
+      const expiryDate = new Date(expireDateStr);
+      const diffTime = expiryDate.getTime() - today.getTime();
+      const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+      
+      // Show alert if:
+      // 1. 3 days or less remaining before expiry (diffDays <= 3 && diffDays >= 0)
+      // 2. Within 7 days grace period after expiry (diffDays < 0 && diffDays >= -7)
+      if ((diffDays <= 3 && diffDays >= 0) || (diffDays < 0 && diffDays >= -7)) {
+        setDaysRemaining(diffDays);
+        setVisible(true);
+      } else {
+        setVisible(false);
+      }
+    } else {
+      setVisible(false);
+    }
+  }, [currentSession]);
+
+  const handleClose = () => {
+    setVisible(false);
+    // Remember dismissal for today only
+    localStorage.setItem('license-alert-dismissed', new Date().toDateString());
+  };
+
+  const handleUpgrade = () => {
+    navigate('/worklenz/admin-center/billing');
+  };
+
+  if (!visible || daysRemaining === null) {
+    return null;
+  }
+
+  const getAlertType = () => {
+    if (daysRemaining !== null && daysRemaining < 0) return 'error'; // Already expired
+    if (daysRemaining === 0) return 'error';
+    if (daysRemaining === 1) return 'warning';
+    return 'info';
+  };
+
+  const getMessage = () => {
+    if (daysRemaining !== null && daysRemaining < 0) {
+      const daysExpired = Math.abs(daysRemaining);
+      const remainingGraceDays = 7 - daysExpired;
+      return t('license-expired-grace-period', { 
+        days: remainingGraceDays, 
+        count: remainingGraceDays 
+      });
+    }
+    if (daysRemaining === 0) {
+      return t('license-expiring-today');
+    }
+    return t('license-expiring-soon', { days: daysRemaining, count: daysRemaining });
+  };
+
+  return (
+    <div style={{ 
+      width: '100%',
+      padding: '8px 48px',
+      background: 'linear-gradient(90deg, rgba(250,173,20,0.1) 0%, rgba(245,34,45,0.1) 100%)',
+      borderBottom: '1px solid rgba(250,173,20,0.3)',
+      backdropFilter: 'blur(10px)'
+    }}>
+      <Alert
+        message={
+          <Space size="large" style={{ width: '100%', justifyContent: 'space-between' }}>
+            <Space>
+              <ExclamationCircleOutlined />
+              <span style={{ fontWeight: 500 }}>{getMessage()}</span>
+              <span style={{ opacity: 0.8, fontSize: 13 }}>
+                {t('license-expiring-upgrade')}
+              </span>
+            </Space>
+            <Space>
+              <Button 
+                type="primary" 
+                size="small"
+                onClick={handleUpgrade}
+                style={{
+                  background: daysRemaining === 0 
+                    ? 'linear-gradient(135deg, #f5222d 0%, #ff4d4f 100%)'
+                    : 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+                  border: 'none'
+                }}
+              >
+                {t('license-expired-upgrade')}
+              </Button>
+              <Button
+                type="text"
+                size="small"
+                icon={<CloseOutlined />}
+                onClick={handleClose}
+                style={{ color: '#595959' }}
+                title={t('trial-alert-dismiss')}
+              />
+            </Space>
+          </Space>
+        }
+        type={getAlertType()}
+        showIcon={false}
+        closable={false}
+        style={{ 
+          border: 'none',
+          background: 'transparent',
+          padding: '4px 0'
+        }}
+      />
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/worklenz-frontend/src/components/account-setup/admin-center-common.css b/worklenz-frontend/src/components/account-setup/admin-center-common.css
deleted file mode 100644
index f4c9c4215..000000000
--- a/worklenz-frontend/src/components/account-setup/admin-center-common.css
+++ /dev/null
@@ -1,19 +0,0 @@
-@media (max-width: 1000px) {
-  .step-content,
-  .step-form,
-  .create-first-task-form,
-  .setup-action-buttons,
-  .invite-members-form {
-    width: 400px !important;
-  }
-}
-
-@media (max-width: 500px) {
-  .step-content,
-  .step-form,
-  .create-first-task-form,
-  .setup-action-buttons,
-  .invite-members-form {
-    width: 200px !important;
-  }
-}
diff --git a/worklenz-frontend/src/components/account-setup/members-step.tsx b/worklenz-frontend/src/components/account-setup/members-step.tsx
index d3feedc1b..a9759f335 100644
--- a/worklenz-frontend/src/components/account-setup/members-step.tsx
+++ b/worklenz-frontend/src/components/account-setup/members-step.tsx
@@ -1,16 +1,15 @@
-import React, { useEffect, useRef } from 'react';
-import { Form, Input, Button, List, Alert, message, InputRef } from '@/shared/antd-imports';
-import { CloseCircleOutlined, MailOutlined, PlusOutlined } from '@/shared/antd-imports';
+import React, { useEffect, useRef, useState } from 'react';
+import { Form, Input, Button, Typography, Card, Avatar, Tag, Alert, Space, Dropdown, MenuProps } from '@/shared/antd-imports';
+import { CloseCircleOutlined, MailOutlined, PlusOutlined, UserOutlined, CheckCircleOutlined, ExclamationCircleOutlined, GlobalOutlined } from '@/shared/antd-imports';
 import { useTranslation } from 'react-i18next';
-import { Typography } from '@/shared/antd-imports';
-import { setTeamMembers, setTasks } from '@/features/account-setup/account-setup.slice';
+import { setTeamMembers } from '@/features/account-setup/account-setup.slice';
 import { useDispatch, useSelector } from 'react-redux';
 import { RootState } from '@/app/store';
 import { validateEmail } from '@/utils/validateEmail';
 import { sanitizeInput } from '@/utils/sanitizeInput';
-import { Rule } from 'antd/es/form';
+import { setLanguage } from '@/features/i18n/localesSlice';
 
-const { Title } = Typography;
+const { Title, Paragraph, Text } = Typography;
 
 interface Email {
   id: number;
@@ -20,163 +19,233 @@ interface Email {
 interface MembersStepProps {
   isDarkMode: boolean;
   styles: any;
+  token?: any;
 }
 
-const MembersStep: React.FC<MembersStepProps> = ({ isDarkMode, styles }) => {
-  const { t } = useTranslation('account-setup');
+const getEmailSuggestions = (orgName?: string) => {
+  if (!orgName) return [];
+  const cleanOrgName = orgName.toLowerCase().replace(/[^a-z0-9]/g, '');
+  return [`info@${cleanOrgName}.com`, `team@${cleanOrgName}.com`, `hello@${cleanOrgName}.com`, `contact@${cleanOrgName}.com`];
+};
+
+const getRoleSuggestions = (t: any) => [
+  { role: 'Designer', icon: '🎨', description: t('roleSuggestions.designer') },
+  { role: 'Developer', icon: '💻', description: t('roleSuggestions.developer') },
+  { role: 'Project Manager', icon: '📊', description: t('roleSuggestions.projectManager') },
+  { role: 'Marketing', icon: '📢', description: t('roleSuggestions.marketing') },
+  { role: 'Sales', icon: '💼', description: t('roleSuggestions.sales') },
+  { role: 'Operations', icon: '⚙️', description: t('roleSuggestions.operations') }
+];
+
+const MembersStep: React.FC<MembersStepProps> = ({ isDarkMode, styles, token }) => {
+  const { t, i18n } = useTranslation('account-setup');
   const { teamMembers, organizationName } = useSelector(
     (state: RootState) => state.accountSetupReducer
   );
-  const inputRefs = useRef<(InputRef | null)[]>([]);
+  const { language } = useSelector((state: RootState) => state.localesReducer);
+  const inputRefs = useRef<(HTMLInputElement | null)[]>([]);
   const dispatch = useDispatch();
-  const [form] = Form.useForm();
+  const [focusedIndex, setFocusedIndex] = useState<number | null>(null);
+  const [showSuggestions, setShowSuggestions] = useState(false);
+  const [validatedEmails, setValidatedEmails] = useState<Set<number>>(new Set());
 
-  const addEmail = () => {
-    if (teamMembers.length == 5) return;
+  const emailSuggestions = getEmailSuggestions(organizationName);
 
+  const addEmail = () => {
+    if (teamMembers.length >= 5) return;
     const newId = teamMembers.length > 0 ? Math.max(...teamMembers.map(t => t.id)) + 1 : 0;
     dispatch(setTeamMembers([...teamMembers, { id: newId, value: '' }]));
-    setTimeout(() => {
-      inputRefs.current[newId]?.focus();
-    }, 0);
+    setTimeout(() => inputRefs.current[teamMembers.length]?.focus(), 100);
   };
 
   const removeEmail = (id: number) => {
-    if (teamMembers.length > 1) {
-      dispatch(setTeamMembers(teamMembers.filter(teamMember => teamMember.id !== id)));
-    }
+    if (teamMembers.length > 1) dispatch(setTeamMembers(teamMembers.filter(teamMember => teamMember.id !== id)));
   };
 
   const updateEmail = (id: number, value: string) => {
     const sanitizedValue = sanitizeInput(value);
-    dispatch(
-      setTeamMembers(
-        teamMembers.map(teamMember =>
-          teamMember.id === id ? { ...teamMember, value: sanitizedValue } : teamMember
-        )
-      )
-    );
+    dispatch(setTeamMembers(teamMembers.map(teamMember => teamMember.id === id ? { ...teamMember, value: sanitizedValue } : teamMember)));
   };
 
-  const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    const input = e.currentTarget as HTMLInputElement;
-    if (!input.value.trim()) return;
-    e.preventDefault();
-    addEmail();
+  const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>, index: number) => {
+    if (e.key === 'Enter') {
+      const input = e.currentTarget as HTMLInputElement;
+      if (input.value.trim() && validateEmail(input.value.trim())) {
+        e.preventDefault();
+        if (index === teamMembers.length - 1 && teamMembers.length < 5) addEmail();
+        else if (index < teamMembers.length - 1) inputRefs.current[index + 1]?.focus();
+      }
+    }
   };
 
-  // Function to set ref that doesn't return anything (void)
-  const setInputRef = (index: number) => (el: InputRef | null) => {
-    inputRefs.current[index] = el;
+  const handleSuggestionClick = (suggestion: string) => {
+    const emptyEmailIndex = teamMembers.findIndex(member => !member.value.trim());
+    if (emptyEmailIndex !== -1) {
+      updateEmail(teamMembers[emptyEmailIndex].id, suggestion);
+    } else if (teamMembers.length < 5) {
+      const newId = teamMembers.length > 0 ? Math.max(...teamMembers.map(t => t.id)) + 1 : 0;
+      dispatch(setTeamMembers([...teamMembers, { id: newId, value: suggestion }]));
+    }
+    setShowSuggestions(false);
   };
 
   useEffect(() => {
-    setTimeout(() => {
-      inputRefs.current[teamMembers.length - 1]?.focus();
-      // Set initial form values
-      const initialValues: Record<string, string> = {};
-      teamMembers.forEach(teamMember => {
-        initialValues[`email-${teamMember.id}`] = teamMember.value;
-      });
-      form.setFieldsValue(initialValues);
-    }, 200);
+    setTimeout(() => inputRefs.current[0]?.focus(), 200);
   }, []);
 
-  const formRules = {
-    email: [
-      {
-        validator: async (_: any, value: string) => {
-          if (!value) return;
-          if (!validateEmail(value)) {
-            throw new Error(t('invalidEmail'));
-          }
-        },
-      },
-    ],
+  const getEmailStatus = (email: string, memberId: number) => {
+    if (!email.trim()) return 'empty';
+    if (!validatedEmails.has(memberId)) return 'empty';
+    return validateEmail(email) ? 'valid' : 'invalid';
+  };
+
+  const handleBlur = (memberId: number, email: string) => {
+    setFocusedIndex(null);
+    if (email.trim()) setValidatedEmails(prev => new Set(prev).add(memberId));
   };
 
+  const languages = [
+    { key: 'en', label: t('languages.en'), flag: '🇺🇸' },
+    { key: 'es', label: t('languages.es'), flag: '🇪🇸' },
+    { key: 'pt', label: t('languages.pt'), flag: '🇵🇹' },
+    { key: 'de', label: t('languages.de'), flag: '🇩🇪' },
+    { key: 'alb', label: t('languages.alb'), flag: '🇦🇱' },
+    { key: 'zh', label: t('languages.zh'), flag: '🇨🇳' }
+  ];
+
+  const handleLanguageChange = (languageKey: string) => {
+    dispatch(setLanguage(languageKey));
+    i18n.changeLanguage(languageKey);
+  };
+
+  const currentLanguage = languages.find(lang => lang.key === language) || languages[0];
+  const languageMenuItems: MenuProps['items'] = languages.map(lang => ({ key: lang.key, label: <div className="flex items-center space-x-2"><span>{lang.flag}</span><span>{lang.label}</span></div>, onClick: () => handleLanguageChange(lang.key) }));
+
   return (
-    <Form
-      form={form}
-      className="invite-members-form"
-      style={{
-        minHeight: '300px',
-        width: '600px',
-        paddingBottom: '1rem',
-        marginBottom: '3rem',
-        marginTop: '3rem',
-        display: 'flex',
-        flexDirection: 'column',
-      }}
-    >
-      <Form.Item>
-        <Title level={2} style={{ marginBottom: '1rem' }}>
-          {t('step3Title')} "<mark>{organizationName}</mark>".
+    <div className="w-full members-step">
+      {/* Header */}
+      <div className="text-center mb-8">
+        <Title level={3} className="mb-2" style={{ color: token?.colorText }}>
+          {t('membersStepTitle')}
         </Title>
-      </Form.Item>
-      <Form.Item
-        layout="vertical"
-        rules={[{ required: true }]}
-        label={
-          <span className="font-medium">
-            {t('step3InputLabel')}&nbsp; <MailOutlined /> {t('maxMembers')}
-          </span>
-        }
-      >
-        <List
-          dataSource={teamMembers}
-          bordered={false}
-          itemLayout="vertical"
-          renderItem={(teamMember, index) => (
-            <List.Item key={teamMember.id}>
-              <div className="invite-members-form" style={{ display: 'flex', width: '600px' }}>
-                <Form.Item
-                  rules={formRules.email as Rule[]}
-                  className="w-full"
-                  validateTrigger={['onChange', 'onBlur']}
-                  name={`email-${teamMember.id}`}
-                >
+        <Paragraph className="text-base" style={{ color: token?.colorTextSecondary }}>
+          {t('membersStepDescription', { organizationName })}
+        </Paragraph>
+      </div>
+
+      {/* Team Members List */}
+      <div className="mb-6">
+        <div className="space-y-3">
+          {teamMembers.map((teamMember, index) => {
+            const emailStatus = getEmailStatus(teamMember.value, teamMember.id);
+            return (
+              <div 
+                key={teamMember.id}
+                className={`flex items-center space-x-3 p-3 rounded-lg border transition-all duration-200 ${
+                  focusedIndex === index ? 'border-2' : ''
+                }`}
+                style={{ 
+                  borderColor: focusedIndex === index ? token?.colorPrimary : 
+                               emailStatus === 'invalid' ? token?.colorError : token?.colorBorder,
+                  backgroundColor: token?.colorBgContainer 
+                }}
+              >
+                <Avatar 
+                  size={32}
+                  style={{ 
+                    backgroundColor: emailStatus === 'valid' ? token?.colorSuccess : 
+                                    emailStatus === 'invalid' ? token?.colorError : token?.colorBorderSecondary,
+                    color: '#fff'
+                  }}
+                  icon={
+                    emailStatus === 'valid' ? <CheckCircleOutlined /> :
+                    emailStatus === 'invalid' ? <ExclamationCircleOutlined /> :
+                    <UserOutlined />
+                  }
+                />
+                
+                <div className="flex-1">
                   <Input
-                    placeholder={t('emailPlaceholder')}
+                    placeholder={t('memberPlaceholder', { index: index + 1 })}
                     value={teamMember.value}
                     onChange={e => updateEmail(teamMember.id, e.target.value)}
-                    onPressEnter={handleKeyPress}
-                    ref={setInputRef(index)}
-                    status={teamMember.value && !validateEmail(teamMember.value) ? 'error' : ''}
-                    id={`member-${index}`}
+                    onKeyPress={e => handleKeyPress(e, index)}
+                    onFocus={() => setFocusedIndex(index)}
+                    onBlur={() => handleBlur(teamMember.id, teamMember.value)}
+                    ref={el => inputRefs.current[index] = el}
+                    className="border-0 shadow-none"
+                    style={{
+                      backgroundColor: 'transparent',
+                      color: token?.colorText
+                    }}
+                    prefix={<MailOutlined style={{ color: token?.colorTextTertiary }} />}
+                    status={emailStatus === 'invalid' ? 'error' : undefined}
+                    suffix={
+                      emailStatus === 'valid' ? (
+                        <CheckCircleOutlined style={{ color: token?.colorSuccess }} />
+                      ) : emailStatus === 'invalid' ? (
+                        <ExclamationCircleOutlined style={{ color: token?.colorError }} />
+                      ) : null
+                    }
                   />
-                </Form.Item>
-                <Button
-                  className="custom-close-button"
-                  style={{ marginLeft: '48px' }}
-                  type="text"
-                  icon={<CloseCircleOutlined />}
-                  disabled={teamMembers.length === 1}
-                  onClick={() => removeEmail(teamMember.id)}
-                />
+                  {emailStatus === 'invalid' && (
+                    <Text type="danger" className="text-xs mt-1 block">
+                      {t('invalidEmail')}
+                    </Text>
+                  )}
+                  {emailStatus === 'valid' && (
+                    <Text type="success" className="text-xs mt-1 block">
+                      {t('validEmailAddress')}
+                    </Text>
+                  )}
+                </div>
+
+                {teamMembers.length > 1 && (
+                  <Button
+                    type="text"
+                    size="small"
+                    icon={<CloseCircleOutlined />}
+                    onClick={() => removeEmail(teamMember.id)}
+                    style={{ color: token?.colorTextTertiary }}
+                  />
+                )}
               </div>
-            </List.Item>
-          )}
-        />
-        <Button
-          type="dashed"
-          icon={<PlusOutlined />}
-          onClick={addEmail}
-          style={{ marginTop: '16px' }}
-          disabled={teamMembers.length == 5}
-        >
-          {t('tasksStepAddAnother')}
-        </Button>
-        <div
+            );
+          })}
+        </div>
+
+        {/* Add Member Button */}
+        {teamMembers.length < 5 && (
+          <Button
+            type="dashed"
+            icon={<PlusOutlined />}
+            onClick={addEmail}
+            className="w-full mt-4 h-12 text-base"
+            style={{ 
+              borderColor: token?.colorBorder,
+              color: token?.colorTextSecondary 
+            }}
+          >
+            {t('addAnotherTeamMember', { current: teamMembers.length, max: 5 })}
+          </Button>
+        )}
+      </div>
+
+      {/* Skip Option */}
+      <div className="mb-6">
+        <Alert
+          message={t('canInviteLater')}
+          description={t('skipStepDescription')}
+          type="info"
+          showIcon
           style={{
-            marginTop: '24px',
-            display: 'flex',
-            justifyContent: 'space-between',
+            backgroundColor: token?.colorInfoBg,
+            borderColor: token?.colorInfoBorder
           }}
-        ></div>
-      </Form.Item>
-    </Form>
+        />
+      </div>
+    </div>
   );
 };
 
-export default MembersStep;
+export default MembersStep;
\ No newline at end of file
diff --git a/worklenz-frontend/src/components/account-setup/organization-step.tsx b/worklenz-frontend/src/components/account-setup/organization-step.tsx
index ec69b9996..87e4ab9a6 100644
--- a/worklenz-frontend/src/components/account-setup/organization-step.tsx
+++ b/worklenz-frontend/src/components/account-setup/organization-step.tsx
@@ -1,31 +1,40 @@
-import React, { useEffect, useRef } from 'react';
-import { Form, Input, InputRef, Typography } from '@/shared/antd-imports';
+import React, { useEffect, useRef, useState } from 'react';
+import { Form, Input, InputRef, Typography, Card, Tooltip } from '@/shared/antd-imports';
 import { useDispatch, useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';
 import { setOrganizationName } from '@/features/account-setup/account-setup.slice';
 import { RootState } from '@/app/store';
 import { sanitizeInput } from '@/utils/sanitizeInput';
-import './admin-center-common.css';
 
-const { Title } = Typography;
+const { Title, Paragraph, Text } = Typography;
 
 interface Props {
   onEnter: () => void;
   styles: any;
   organizationNamePlaceholder: string;
+  organizationNameInitialValue?: string;
+  isDarkMode: boolean;
+  token?: any;
 }
 
 export const OrganizationStep: React.FC<Props> = ({
   onEnter,
   styles,
   organizationNamePlaceholder,
+  organizationNameInitialValue,
+  isDarkMode,
+  token,
 }) => {
   const { t } = useTranslation('account-setup');
   const dispatch = useDispatch();
   const { organizationName } = useSelector((state: RootState) => state.accountSetupReducer);
   const inputRef = useRef<InputRef>(null);
 
+  // Autofill organization name if not already set
   useEffect(() => {
+    if (!organizationName && organizationNameInitialValue) {
+      dispatch(setOrganizationName(organizationNameInitialValue));
+    }
     setTimeout(() => inputRef.current?.focus(), 300);
   }, []);
 
@@ -40,25 +49,85 @@ export const OrganizationStep: React.FC<Props> = ({
   };
 
   return (
-    <Form className="step-form" style={styles.form}>
-      <Form.Item>
-        <Title level={2} style={{ marginBottom: '1rem' }}>
-          {t('organizationStepTitle')}
+    <div className="w-full organization-step">
+      {/* Header */}
+      <div className="text-center mb-8">
+        <Title level={3} className="mb-2" style={{ color: token?.colorText }}>
+          {t('organizationStepWelcome')}
         </Title>
-      </Form.Item>
-      <Form.Item
-        layout="vertical"
-        rules={[{ required: true }]}
-        label={<span style={styles.label}>{t('organizationStepLabel')}</span>}
+        <Paragraph className="text-base" style={{ color: token?.colorTextSecondary }}>
+          {t('organizationStepDescription')}
+        </Paragraph>
+      </div>
+
+      {/* Main Form Card */}
+      <div className="mb-6">
+        <Card 
+          className="border-2 hover:shadow-md transition-all duration-200"
+          style={{ 
+            borderColor: token?.colorPrimary,
+            backgroundColor: token?.colorBgContainer 
+          }}
+        >
+          <Form.Item 
+            className="mb-4"
+            label={
+              <div className="flex items-center space-x-2">
+                <span className="font-medium text-base" style={{ color: token?.colorText }}>
+                  {t('organizationStepLabel')}
+                </span>
+                <Tooltip title={t('organizationStepTooltip')}>
+                  <span 
+                    className="text-sm cursor-help"
+                    style={{ color: token?.colorTextTertiary }}
+                  >
+                    ⓘ
+                  </span>
+                </Tooltip>
+              </div>
+            }
+          >
+            <Input
+              placeholder={organizationNamePlaceholder || t('organizationStepPlaceholder')}
+              value={organizationName}
+              onChange={handleOrgNameChange}
+              onPressEnter={onPressEnter}
+              ref={inputRef}
+              className="text-base"
+            />
+          </Form.Item>
+
+          {/* Character Count and Validation */}
+          <div className="flex justify-between items-center text-sm">
+            <Text type="secondary">
+              {organizationName.length}/50 {t('organizationStepCharacters')}
+            </Text>
+            {organizationName.length > 0 && (
+              <div className="flex items-center space-x-1">
+                {organizationName.length >= 2 ? (
+                  <span style={{ color: token?.colorSuccess }}>✓ {t('organizationStepGoodLength')}</span>
+                ) : (
+                  <span style={{ color: token?.colorWarning }}>⚠ {t('organizationStepTooShort')}</span>
+                )}
+              </div>
+            )}
+          </div>
+        </Card>
+      </div>
+
+      {/* Footer Note */}
+      <div 
+        className="text-center p-4 rounded-lg"
+        style={{ 
+          backgroundColor: token?.colorInfoBg,
+          borderColor: token?.colorInfoBorder,
+          border: '1px solid'
+        }}
       >
-        <Input
-          placeholder={organizationNamePlaceholder}
-          value={organizationName}
-          onChange={handleOrgNameChange}
-          onPressEnter={onPressEnter}
-          ref={inputRef}
-        />
-      </Form.Item>
-    </Form>
+        <Text type="secondary" className="text-sm">
+          🔒 {t('organizationStepPrivacyNote')}
+        </Text>
+      </div>
+    </div>
   );
-};
+};
\ No newline at end of file
diff --git a/worklenz-frontend/src/components/account-setup/project-step.tsx b/worklenz-frontend/src/components/account-setup/project-step.tsx
index 1447bfd83..4810859b2 100644
--- a/worklenz-frontend/src/components/account-setup/project-step.tsx
+++ b/worklenz-frontend/src/components/account-setup/project-step.tsx
@@ -3,7 +3,7 @@ import { useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 
-import { Button, Drawer, Form, Input, InputRef, Select, Typography } from '@/shared/antd-imports';
+import { Button, Drawer, Form, Input, InputRef, Typography, Card, Row, Col, Tag, Tooltip, Spin, Alert } from '@/shared/antd-imports';
 import TemplateDrawer from '../common/template-drawer/template-drawer';
 
 import { RootState } from '@/app/store';
@@ -13,7 +13,7 @@ import { sanitizeInput } from '@/utils/sanitizeInput';
 import { projectTemplatesApiService } from '@/api/project-templates/project-templates.api.service';
 import logger from '@/utils/errorLogger';
 
-import { IAccountSetupRequest } from '@/types/project-templates/project-templates.types';
+import { IAccountSetupRequest, IWorklenzTemplate, IProjectTemplate } from '@/types/project-templates/project-templates.types';
 
 import { evt_account_setup_template_complete } from '@/shared/worklenz-analytics-events';
 import { useMixpanelTracking } from '@/hooks/useMixpanelTracking';
@@ -24,15 +24,43 @@ import { setUser } from '@/features/user/userSlice';
 import { setSession } from '@/utils/session-helper';
 import { IAuthorizeResponse } from '@/types/auth/login.types';
 
-const { Title } = Typography;
+const { Title, Paragraph, Text } = Typography;
 
 interface Props {
   onEnter: () => void;
   styles: any;
   isDarkMode: boolean;
+  token?: any;
 }
 
-export const ProjectStep: React.FC<Props> = ({ onEnter, styles, isDarkMode = false }) => {
+// Default icon mapping for templates (fallback if no image_url)
+const getTemplateIcon = (name?: string) => {
+  if (!name) return '📁';
+  const lowercaseName = name.toLowerCase();
+  if (lowercaseName.includes('software') || lowercaseName.includes('development')) return '💻';
+  if (lowercaseName.includes('marketing') || lowercaseName.includes('campaign')) return '📢';
+  if (lowercaseName.includes('construction') || lowercaseName.includes('building')) return '🏗️';
+  if (lowercaseName.includes('startup') || lowercaseName.includes('launch')) return '🚀';
+  if (lowercaseName.includes('design') || lowercaseName.includes('creative')) return '🎨';
+  if (lowercaseName.includes('education') || lowercaseName.includes('learning')) return '📚';
+  if (lowercaseName.includes('event') || lowercaseName.includes('planning')) return '📅';
+  if (lowercaseName.includes('retail') || lowercaseName.includes('sales')) return '🛍️';
+  return '📁';
+};
+
+const getProjectSuggestions = (orgType?: string) => {
+  const suggestions: Record<string, string[]> = {
+    'freelancer': ['Client Website', 'Logo Design', 'Content Writing', 'App Development'],
+    'startup': ['MVP Development', 'Product Launch', 'Marketing Campaign', 'Investor Pitch'],
+    'small_medium_business': ['Q1 Sales Initiative', 'Website Redesign', 'Process Improvement', 'Team Training'],
+    'agency': ['Client Campaign', 'Brand Strategy', 'Website Project', 'Creative Brief'],
+    'enterprise': ['Digital Transformation', 'System Migration', 'Annual Planning', 'Department Initiative'],
+    'other': ['New Project', 'Team Initiative', 'Q1 Goals', 'Special Project']
+  };
+  return suggestions[orgType || 'other'] || suggestions['other'];
+};
+
+export const ProjectStep: React.FC<Props> = ({ onEnter, styles, isDarkMode = false, token }) => {
   const { t } = useTranslation('account-setup');
   const dispatch = useAppDispatch();
   const navigate = useNavigate();
@@ -42,13 +70,58 @@ export const ProjectStep: React.FC<Props> = ({ onEnter, styles, isDarkMode = fal
 
   useEffect(() => {
     setTimeout(() => inputRef.current?.focus(), 200);
+    fetchTemplates();
   }, []);
 
-  const { projectName, templateId, organizationName } = useSelector(
+  const fetchTemplates = async () => {
+    try {
+      setLoadingTemplates(true);
+      setTemplateError(null);
+      
+      // Fetch list of available templates
+      const templatesResponse = await projectTemplatesApiService.getWorklenzTemplates();
+      
+      if (templatesResponse.done && templatesResponse.body) {
+        // Fetch detailed information for first 4 templates for preview
+        const templateDetails = await Promise.all(
+          templatesResponse.body.slice(0, 4).map(async (template) => {
+            if (template.id) {
+              try {
+                const detailResponse = await projectTemplatesApiService.getByTemplateId(template.id);
+                return detailResponse.done ? detailResponse.body : null;
+              } catch (error) {
+                logger.error(`Failed to fetch template details for ${template.id}`, error);
+                return null;
+              }
+            }
+            return null;
+          })
+        );
+        
+        // Filter out null results and set templates
+        const validTemplates = templateDetails.filter((template): template is IProjectTemplate => template !== null);
+        setTemplates(validTemplates);
+      }
+    } catch (error) {
+      logger.error('Failed to fetch templates', error);
+      setTemplateError('Failed to load templates');
+    } finally {
+      setLoadingTemplates(false);
+    }
+  };
+
+
+  const { projectName, templateId, organizationName, surveyData } = useSelector(
     (state: RootState) => state.accountSetupReducer
   );
   const [open, setOpen] = useState(false);
   const [creatingFromTemplate, setCreatingFromTemplate] = useState(false);
+  const [selectedTemplate, setSelectedTemplate] = useState<string | null>(templateId || null);
+  const [templates, setTemplates] = useState<IProjectTemplate[]>([]);
+  const [loadingTemplates, setLoadingTemplates] = useState(true);
+  const [templateError, setTemplateError] = useState<string | null>(null);
+
+  const projectSuggestions = getProjectSuggestions(surveyData.organization_type);
 
   const handleTemplateSelected = (templateId: string) => {
     if (!templateId) return;
@@ -74,8 +147,6 @@ export const ProjectStep: React.FC<Props> = ({ onEnter, styles, isDarkMode = fal
       if (res.done && res.body.id) {
         toggleTemplateSelector(false);
         trackMixpanelEvent(evt_account_setup_template_complete);
-        
-        // Refresh user session to update setup_completed status
         try {
           const authResponse = await dispatch(verifyAuthentication()).unwrap() as IAuthorizeResponse;
           if (authResponse?.authenticated && authResponse?.user) {
@@ -85,7 +156,6 @@ export const ProjectStep: React.FC<Props> = ({ onEnter, styles, isDarkMode = fal
         } catch (error) {
           logger.error('Failed to refresh user session after template setup completion', error);
         }
-        
         navigate(`/worklenz/projects/${res.body.id}?tab=tasks-list&pinned_tab=tasks-list`);
       }
     } catch (error) {
@@ -94,8 +164,7 @@ export const ProjectStep: React.FC<Props> = ({ onEnter, styles, isDarkMode = fal
   };
 
   const onPressEnter = () => {
-    if (!projectName.trim()) return;
-    onEnter();
+    if (projectName.trim()) onEnter();
   };
 
   const handleProjectNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -103,43 +172,205 @@ export const ProjectStep: React.FC<Props> = ({ onEnter, styles, isDarkMode = fal
     dispatch(setProjectName(sanitizedValue));
   };
 
+  const handleProjectNameFocus = () => {
+    if (templateId) {
+      dispatch(setTemplateId(null));
+      setSelectedTemplate(null);
+    }
+  };
+
+  const handleSuggestionClick = (suggestion: string) => {
+    dispatch(setProjectName(suggestion));
+    inputRef.current?.focus();
+  };
+
   return (
-    <div>
-      <Form className="step-form" style={styles.form}>
-        <Form.Item>
-          <Title level={2} style={{ marginBottom: '1rem' }}>
-            {t('projectStepTitle')}
-          </Title>
-        </Form.Item>
-        <Form.Item
-          layout="vertical"
-          rules={[{ required: true }]}
-          label={<span style={styles.label}>{t('projectStepLabel')}</span>}
-        >
-          <Input
-            placeholder={t('projectStepPlaceholder')}
-            value={projectName}
-            onChange={handleProjectNameChange}
-            onPressEnter={onPressEnter}
-            ref={inputRef}
-          />
-        </Form.Item>
-      </Form>
-      <div style={{ position: 'relative' }}>
-        <Title level={4} className={isDarkMode ? 'vert-text-dark' : 'vert-text'}>
-          {t('or')}
+    <div className="w-full project-step">
+      {/* Header */}
+      <div className="text-center mb-8">
+        <Title level={3} className="mb-2" style={{ color: token?.colorText }}>
+          {t('projectStepHeader')}
         </Title>
-        <div className={isDarkMode ? 'vert-line-dark' : 'vert-line'} />
+        <Paragraph className="text-base" style={{ color: token?.colorTextSecondary }}>
+          {t('projectStepSubheader')}
+        </Paragraph>
+      </div>
+
+      {/* Project Name Section */}
+      <div className="mb-8">
+        <Card 
+          className={`border-2 hover:shadow-md transition-all duration-200 ${
+            templateId ? 'opacity-50' : ''
+          }`}
+          style={{ 
+            borderColor: templateId ? token?.colorBorder : token?.colorPrimary,
+            backgroundColor: token?.colorBgContainer 
+          }}
+        >
+          <div className="mb-4">
+            <div className="flex items-center justify-between">
+              <Text strong className="text-lg" style={{ color: token?.colorText }}>
+                {t('startFromScratch')}
+              </Text>
+              {templateId && (
+                <Text type="secondary" className="text-sm">
+                  {t('templateSelected')}
+                </Text>
+              )}
+            </div>
+          </div>
+          
+          <Form.Item 
+            className="mb-4"
+            label={<span className="font-medium" style={{ color: token?.colorText }}>{t('projectStepLabel')}</span>}
+          >
+            <Input
+              size="large"
+              placeholder={projectSuggestions[0] || t('projectStepPlaceholder')}
+              value={projectName}
+              onChange={handleProjectNameChange}
+              onPressEnter={onPressEnter}
+              onFocus={handleProjectNameFocus}
+              ref={inputRef}
+              className="text-base"
+              style={{ backgroundColor: token?.colorBgContainer, borderColor: token?.colorBorder, color: token?.colorText }}
+            />
+          </Form.Item>
+
+          <div>
+            <Text type="secondary" className="text-sm">{t('quickSuggestions')}</Text>
+            <div className="mt-2 flex flex-wrap gap-2">
+              {projectSuggestions.map((suggestion, index) => (
+                <button key={index} onClick={() => handleSuggestionClick(suggestion)} className="px-3 py-1 rounded-full text-sm border project-suggestion-button" style={{ backgroundColor: token?.colorBgContainer, borderColor: token?.colorBorder, color: token?.colorTextSecondary }}>
+                  {suggestion}
+                </button>
+              ))}
+            </div>
+          </div>
+        </Card>
       </div>
 
-      <div className="flex justify-center">
-        <Button onClick={() => toggleTemplateSelector(true)} type="primary">
-          {t('templateButton')}
-        </Button>
+      <div className="relative my-8">
+        <div className="absolute inset-0 flex items-center" style={{ color: token?.colorTextQuaternary }}>
+          <div className="w-full border-t" style={{ borderColor: token?.colorBorder }}></div>
+        </div>
+        <div className="relative flex justify-center">
+          <span className="px-4 text-sm font-medium" style={{ backgroundColor: token?.colorBgLayout, color: token?.colorTextSecondary }}>{t('orText')}</span>
+        </div>
       </div>
+
+      <div>
+        <div className="text-center mb-6">
+          <Title level={4} className="mb-2" style={{ color: token?.colorText }}>{t('startWithTemplate')}</Title>
+          <Text type="secondary">
+            {t('templateHeadStart')}
+          </Text>
+        </div>
+
+        {/* Template Preview Cards */}
+        <div className="mb-6">
+          {loadingTemplates ? (
+            <div className="text-center py-12">
+              <Spin size="large" />
+              <div className="mt-4">
+                <Text type="secondary">Loading templates...</Text>
+              </div>
+            </div>
+          ) : templateError ? (
+            <Alert
+              message="Failed to load templates"
+              description={templateError}
+              type="error"
+              showIcon
+              action={
+                <Button size="small" onClick={fetchTemplates}>
+                  Retry
+                </Button>
+              }
+            />
+          ) : (
+            <Row gutter={[16, 16]}>
+              {templates.map((template) => (
+                <Col xs={24} sm={12} key={template.id}>
+                  <Card
+                    hoverable
+                    className={`h-full template-preview-card ${
+                      selectedTemplate === template.id ? 'selected border-2' : ''
+                    }`}
+                    style={{ 
+                      borderColor: selectedTemplate === template.id ? token?.colorPrimary : token?.colorBorder,
+                      backgroundColor: token?.colorBgContainer
+                    }}
+                    onClick={() => {
+                      setSelectedTemplate(template.id || null);
+                      dispatch(setTemplateId(template.id || ''));
+                    }}
+                  >
+                    <div className="flex items-start space-x-3">
+                      {template.image_url ? (
+                        <img 
+                          src={template.image_url} 
+                          alt={template.name} 
+                          className="w-12 h-12 object-cover rounded"
+                          onError={(e) => {
+                            // Fallback to icon if image fails to load
+                            e.currentTarget.style.display = 'none';
+                            if (e.currentTarget.nextSibling) {
+                              (e.currentTarget.nextSibling as HTMLElement).style.display = 'block';
+                            }
+                          }}
+                        />
+                      ) : null}
+                      <span 
+                        className="text-3xl" 
+                        style={{ display: template.image_url ? 'none' : 'block' }}
+                      >
+                        {getTemplateIcon(template.name)}
+                      </span>
+                      <div className="flex-1">
+                        <Text strong className="block mb-2" style={{ color: token?.colorText }}>
+                          {template.name || 'Untitled Template'}
+                        </Text>
+                        <div className="flex flex-wrap gap-1">
+                          {template.phases?.slice(0, 3).map((phase, index) => (
+                            <Tag key={index} color={phase.color_code || 'blue'} className="text-xs">
+                              {phase.name}
+                            </Tag>
+                          ))}
+                          {(template.phases?.length || 0) > 3 && (
+                            <Tag className="text-xs">+{(template.phases?.length || 0) - 3} more</Tag>
+                          )}
+                        </div>
+                      </div>
+                    </div>
+                  </Card>
+                </Col>
+              ))}
+            </Row>
+          )}
+        </div>
+
+        <div className="text-center">
+          <Button type="primary" size="large" icon={<span className="mr-2">🎨</span>} onClick={() => toggleTemplateSelector(true)} className="min-w-[200px]">{t('browseAllTemplates')}</Button>
+          <div className="mt-2">
+            <Text type="secondary" className="text-sm">{t('templatesAvailable')}</Text>
+          </div>
+        </div>
+      </div>
+
+      {/* Template Drawer */}
       {createPortal(
         <Drawer
-          title={t('templateDrawerTitle')}
+          title={
+            <div>
+              <Title level={4} style={{ marginBottom: 0 }}>
+                {t('templateDrawerTitle')}
+              </Title>
+              <Text type="secondary">
+                {t('chooseTemplate')}
+              </Text>
+            </div>
+          }
           width={1000}
           onClose={() => toggleTemplateSelector(false)}
           open={open}
@@ -152,11 +383,13 @@ export const ProjectStep: React.FC<Props> = ({ onEnter, styles, isDarkMode = fal
                 type="primary"
                 onClick={() => createFromTemplate()}
                 loading={creatingFromTemplate}
+                disabled={!templateId}
               >
-                {t('create')}
+{t('createProject')}
               </Button>
             </div>
           }
+          style={{ backgroundColor: token?.colorBgLayout }}
         >
           <TemplateDrawer
             showBothTabs={false}
@@ -169,4 +402,4 @@ export const ProjectStep: React.FC<Props> = ({ onEnter, styles, isDarkMode = fal
       )}
     </div>
   );
-};
+};
\ No newline at end of file
diff --git a/worklenz-frontend/src/components/account-setup/survey-step.tsx b/worklenz-frontend/src/components/account-setup/survey-step.tsx
new file mode 100644
index 000000000..17efc3d22
--- /dev/null
+++ b/worklenz-frontend/src/components/account-setup/survey-step.tsx
@@ -0,0 +1,374 @@
+import React from 'react';
+import { Form, Input, Typography, Button, Progress, Space } from '@/shared/antd-imports';
+import { useDispatch, useSelector } from 'react-redux';
+import { useTranslation } from 'react-i18next';
+import { setSurveyData, setSurveySubStep } from '@/features/account-setup/account-setup.slice';
+import { RootState } from '@/app/store';
+import { 
+  OrganizationType, 
+  UserRole, 
+  UseCase, 
+  HowHeardAbout,
+  IAccountSetupSurveyData 
+} from '@/types/account-setup/survey.types';
+
+const { Title, Paragraph } = Typography;
+const { TextArea } = Input;
+
+interface Props {
+  onEnter: () => void;
+  styles: any;
+  isDarkMode: boolean;
+  token?: any;
+  isModal?: boolean; // New prop to indicate if used in modal context
+}
+
+interface SurveyPageProps {
+  styles: any;
+  isDarkMode: boolean;
+  token?: any;
+  surveyData: IAccountSetupSurveyData;
+  handleSurveyDataChange: (field: keyof IAccountSetupSurveyData, value: any) => void;
+  handleUseCaseToggle?: (value: UseCase) => void;
+  isModal?: boolean;
+}
+
+// Page 1: About You
+const AboutYouPage: React.FC<SurveyPageProps> = ({ styles, token, surveyData, handleSurveyDataChange }) => {
+  const { t } = useTranslation('account-setup');
+  
+  const organizationTypeOptions: { value: OrganizationType; label: string; icon?: string }[] = [
+    { value: 'freelancer', label: t('organizationTypeFreelancer'), icon: '👤' },
+    { value: 'startup', label: t('organizationTypeStartup'), icon: '🚀' },
+    { value: 'small_medium_business', label: t('organizationTypeSmallMediumBusiness'), icon: '🏢' },
+    { value: 'agency', label: t('organizationTypeAgency'), icon: '🎯' },
+    { value: 'enterprise', label: t('organizationTypeEnterprise'), icon: '🏛️' },
+    { value: 'other', label: t('organizationTypeOther'), icon: '📋' },
+  ];
+
+  const userRoleOptions: { value: UserRole; label: string; icon?: string }[] = [
+    { value: 'founder_ceo', label: t('userRoleFounderCeo'), icon: '👔' },
+    { value: 'project_manager', label: t('userRoleProjectManager'), icon: '📊' },
+    { value: 'software_developer', label: t('userRoleSoftwareDeveloper'), icon: '💻' },
+    { value: 'designer', label: t('userRoleDesigner'), icon: '🎨' },
+    { value: 'operations', label: t('userRoleOperations'), icon: '⚙️' },
+    { value: 'other', label: t('userRoleOther'), icon: '✋' },
+  ];
+
+  return (
+    <div className="w-full">
+      <div className="text-center mb-8">
+        <Title level={3} className="mb-2" style={{ color: token?.colorText }}>
+          {t('aboutYouStepTitle')}
+        </Title>
+        <Paragraph className="text-base" style={{ color: token?.colorTextSecondary }}>
+          {t('aboutYouStepDescription')}
+        </Paragraph>
+      </div>
+
+      {/* Organization Type */}
+      <Form.Item className="mb-8">
+        <label className="block font-medium text-base mb-4" style={{ color: token?.colorText }}>
+          {t('orgTypeQuestion')}
+        </label>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-1">
+          {organizationTypeOptions.map((option) => {
+            const isSelected = surveyData.organization_type === option.value;
+            return (
+              <button
+                key={option.value}
+                onClick={() => handleSurveyDataChange('organization_type', option.value)}
+                className={`p-2 rounded border transition-all duration-200 text-left hover:shadow-sm ${isSelected ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20' : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'}`}
+                style={{
+                  backgroundColor: isSelected ? undefined : token?.colorBgContainer,
+                  borderColor: isSelected ? undefined : token?.colorBorder,
+                }}
+              >
+                <div className="flex items-center space-x-2">
+                  <div className={`w-3 h-3 rounded-full border flex items-center justify-center ${isSelected ? 'border-blue-500 bg-blue-500' : 'border-gray-300 dark:border-gray-600'}`}>
+                    {isSelected && <div className="w-1.5 h-1.5 bg-white rounded-full"></div>}
+                  </div>
+                  <span className="text-base">{option.icon}</span>
+                  <span 
+                    className={`font-medium text-xs ${isSelected ? 'text-blue-600 dark:text-blue-400' : ''}`}
+                    style={{ color: isSelected ? undefined : token?.colorText }}
+                  >
+                    {option.label}
+                  </span>
+                </div>
+              </button>
+            );
+          })}
+        </div>
+      </Form.Item>
+
+      {/* User Role */}
+      <Form.Item className="mb-4">
+        <label className="block font-medium text-base mb-4" style={{ color: token?.colorText }}>
+          {t('userRoleQuestion')}
+        </label>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-1">
+          {userRoleOptions.map((option) => {
+            const isSelected = surveyData.user_role === option.value;
+            return (
+              <button
+                key={option.value}
+                onClick={() => handleSurveyDataChange('user_role', option.value)}
+                className={`p-2 rounded border transition-all duration-200 text-left hover:shadow-sm ${isSelected ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20' : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'}`}
+                style={{
+                  backgroundColor: isSelected ? undefined : token?.colorBgContainer,
+                  borderColor: isSelected ? undefined : token?.colorBorder,
+                }}
+              >
+                <div className="flex items-center space-x-2">
+                  <div className={`w-3 h-3 rounded-full border flex items-center justify-center ${isSelected ? 'border-blue-500 bg-blue-500' : 'border-gray-300 dark:border-gray-600'}`}>
+                    {isSelected && <div className="w-1.5 h-1.5 bg-white rounded-full"></div>}
+                  </div>
+                  <span className="text-base">{option.icon}</span>
+                  <span 
+                    className={`font-medium text-xs ${isSelected ? 'text-blue-600 dark:text-blue-400' : ''}`}
+                    style={{ color: isSelected ? undefined : token?.colorText }}
+                  >
+                    {option.label}
+                  </span>
+                </div>
+              </button>
+            );
+          })}
+        </div>
+      </Form.Item>
+    </div>
+  );
+};
+
+// Page 2: Your Needs
+const YourNeedsPage: React.FC<SurveyPageProps> = ({ styles, token, surveyData, handleSurveyDataChange, handleUseCaseToggle }) => {
+  const { t } = useTranslation('account-setup');
+  
+  const useCaseOptions: { value: UseCase; label: string; description: string }[] = [
+    { value: 'task_management', label: t('mainUseCasesTaskManagement'), description: 'Organize and track tasks' },
+    { value: 'team_collaboration', label: t('mainUseCasesTeamCollaboration'), description: 'Work together seamlessly' },
+    { value: 'resource_planning', label: t('mainUseCasesResourcePlanning'), description: 'Manage time and resources' },
+    { value: 'client_communication', label: t('mainUseCasesClientCommunication'), description: 'Stay connected with clients' },
+    { value: 'time_tracking', label: t('mainUseCasesTimeTracking'), description: 'Monitor project hours' },
+    { value: 'other', label: t('mainUseCasesOther'), description: 'Something else' },
+  ];
+
+  const onUseCaseClick = (value: UseCase) => {
+    if (handleUseCaseToggle) {
+      handleUseCaseToggle(value);
+    } else {
+      const currentUseCases = surveyData.main_use_cases || [];
+      const isSelected = currentUseCases.includes(value);
+      const newUseCases = isSelected ? currentUseCases.filter(useCase => useCase !== value) : [...currentUseCases, value];
+      handleSurveyDataChange('main_use_cases', newUseCases);
+    }
+  };
+
+  return (
+    <div className="w-full">
+      <div className="text-center mb-8">
+        <Title level={3} className="mb-2" style={{ color: token?.colorText }}>
+          {t('yourNeedsStepTitle')}
+        </Title>
+        <Paragraph className="text-base" style={{ color: token?.colorTextSecondary }}>
+          {t('yourNeedsStepDescription')}
+        </Paragraph>
+      </div>
+
+      {/* Main Use Cases */}
+      <Form.Item className="mb-8">
+        <label className="block font-medium text-base mb-4" style={{ color: token?.colorText }}>
+          {t('yourNeedsQuestion')}
+        </label>
+        <div className="grid grid-cols-1 gap-1">
+          {useCaseOptions.map((option) => {
+            const isSelected = (surveyData.main_use_cases || []).includes(option.value);
+            return (
+              <button
+                key={option.value}
+                onClick={() => onUseCaseClick(option.value)}
+                className={`p-2 rounded border transition-all duration-200 text-left hover:shadow-sm ${isSelected ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20' : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'}`}
+                style={{
+                  backgroundColor: isSelected ? undefined : token?.colorBgContainer,
+                  borderColor: isSelected ? undefined : token?.colorBorder,
+                }}
+              >
+                <div className="flex items-center space-x-2">
+                  <div className={`w-3 h-3 rounded border flex items-center justify-center ${isSelected ? 'border-blue-500 bg-blue-500' : 'border-gray-300 dark:border-gray-600'}`}>
+                    {isSelected && (
+                      <svg width="10" height="10" fill="white" viewBox="0 0 20 20">
+                        <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
+                      </svg>
+                    )}
+                  </div>
+                  <div className="flex-1">
+                    <span className={`font-medium text-xs ${isSelected ? 'text-blue-600 dark:text-blue-400' : ''}`} style={{ color: isSelected ? undefined : token?.colorText }}>{option.label}</span>
+                    <span className="text-xs ml-2" style={{ color: token?.colorTextSecondary }}>- {option.description}</span>
+                  </div>
+                </div>
+              </button>
+            );
+          })}
+        </div>
+        {surveyData.main_use_cases && surveyData.main_use_cases.length > 0 && (
+          <p className="mt-3 text-sm" style={{ color: token?.colorTextSecondary }}>
+            {surveyData.main_use_cases.length} {t('selected')}
+          </p>
+        )}
+      </Form.Item>
+
+      {/* Previous Tools */}
+      <Form.Item className="mb-4">
+        <label className="block font-medium text-base mb-2" style={{ color: token?.colorText }}>
+          {t('previousToolsLabel')}
+        </label>
+        <TextArea
+          placeholder="e.g., Asana, Trello, Jira, Monday.com, etc."
+          value={surveyData.previous_tools || ''}
+          onChange={(e) => handleSurveyDataChange('previous_tools', e.target.value)}
+          autoSize={{ minRows: 3, maxRows: 5 }}
+          className="text-base"
+          style={{ backgroundColor: token?.colorBgContainer, borderColor: token?.colorBorder, color: token?.colorText }}
+        />
+      </Form.Item>
+    </div>
+  );
+};
+
+// Page 3: Discovery
+const DiscoveryPage: React.FC<SurveyPageProps> = ({ styles, token, surveyData, handleSurveyDataChange, isModal }) => {
+  const { t } = useTranslation('account-setup');
+  
+  const howHeardAboutOptions: { value: HowHeardAbout; label: string; icon: string }[] = [
+    { value: 'google_search', label: t('howHeardAboutGoogleSearch'), icon: '🔍' },
+    { value: 'twitter', label: t('howHeardAboutTwitter'), icon: '🐦' },
+    { value: 'linkedin', label: t('howHeardAboutLinkedin'), icon: '💼' },
+    { value: 'friend_colleague', label: t('howHeardAboutFriendColleague'), icon: '👥' },
+    { value: 'blog_article', label: t('howHeardAboutBlogArticle'), icon: '📰' },
+    { value: 'other', label: t('howHeardAboutOther'), icon: '💡' },
+  ];
+
+  return (
+    <div className="w-full">
+      <div className="text-center mb-8">
+        <Title level={3} className="mb-2" style={{ color: token?.colorText }}>
+          {t('discoveryTitle')}
+        </Title>
+        <Paragraph className="text-base" style={{ color: token?.colorTextSecondary }}>
+          {t('discoveryDescription')}
+        </Paragraph>
+      </div>
+
+      {/* How Heard About */}
+      <Form.Item className="mb-8">
+        <label className="block font-medium text-base mb-4" style={{ color: token?.colorText }}>
+          {t('discoveryQuestion')}
+        </label>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-1">
+          {howHeardAboutOptions.map((option) => {
+            const isSelected = surveyData.how_heard_about === option.value;
+            return (
+              <button
+                key={option.value}
+                onClick={() => handleSurveyDataChange('how_heard_about', option.value)}
+                className={`p-2 rounded border transition-all duration-200 hover:shadow-sm ${isSelected ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20' : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'}`}
+                style={{
+                  backgroundColor: isSelected ? undefined : token?.colorBgContainer,
+                  borderColor: isSelected ? undefined : token?.colorBorder,
+                }}
+              >
+                <div className="flex items-center space-x-2">
+                  <div className={`w-3 h-3 rounded-full border flex items-center justify-center ${isSelected ? 'border-blue-500 bg-blue-500' : 'border-gray-300 dark:border-gray-600'}`}>
+                    {isSelected && <div className="w-1.5 h-1.5 bg-white rounded-full"></div>}
+                  </div>
+                  <span className="text-base">{option.icon}</span>
+                  <span className={`font-medium text-xs ${isSelected ? 'text-blue-600 dark:text-blue-400' : ''}`} style={{ color: isSelected ? undefined : token?.colorText }}>{option.label}</span>
+                </div>
+              </button>
+            );
+          })}
+        </div>
+      </Form.Item>
+
+      <div className="mt-12 p-1.5 rounded-lg text-center" style={{ backgroundColor: token?.colorSuccessBg, borderColor: token?.colorSuccessBorder, border: '1px solid' }}>
+        <div className="text-4xl mb-3">🎉</div>
+        <Title level={4} style={{ color: token?.colorText, marginBottom: 8 }}>
+          {isModal ? t('surveyCompleteTitle') : t('allSetTitle')}
+        </Title>
+        <Paragraph style={{ color: token?.colorTextSecondary, marginBottom: 0 }}>
+          {isModal ? t('surveyCompleteDescription') : t('allSetDescription')}
+        </Paragraph>
+      </div>
+    </div>
+  );
+};
+
+export const SurveyStep: React.FC<Props> = ({ onEnter, styles, isDarkMode, token, isModal = false }) => {
+  const { t } = useTranslation('account-setup');
+  const dispatch = useDispatch();
+  const { surveyData, surveySubStep } = useSelector((state: RootState) => state.accountSetupReducer);
+
+  const handleSurveyDataChange = (field: keyof IAccountSetupSurveyData, value: any) => {
+    dispatch(setSurveyData({ [field]: value }));
+  };
+
+  React.useEffect(() => {
+    const handleKeyPress = (e: KeyboardEvent) => {
+      if (e.key === 'Enter') {
+        const isValid = (surveySubStep === 0 && surveyData.organization_type && surveyData.user_role) || (surveySubStep === 1 && surveyData.main_use_cases && surveyData.main_use_cases.length > 0) || (surveySubStep === 2 && surveyData.how_heard_about);
+        if (isValid && surveySubStep < 2) {
+          dispatch(setSurveySubStep(surveySubStep + 1));
+        } else if (isValid && surveySubStep === 2) {
+          onEnter();
+        }
+      }
+    };
+    window.addEventListener('keypress', handleKeyPress);
+    return () => window.removeEventListener('keypress', handleKeyPress);
+  }, [surveySubStep, surveyData, dispatch, onEnter]);
+
+  const handleUseCaseToggle = (value: UseCase) => {
+    const currentUseCases = surveyData.main_use_cases || [];
+    const isSelected = currentUseCases.includes(value);
+    const newUseCases = isSelected ? currentUseCases.filter(useCase => useCase !== value) : [...currentUseCases, value];
+    handleSurveyDataChange('main_use_cases', newUseCases);
+  };
+
+  const getSubStepTitle = () => {
+    switch (surveySubStep) {
+      case 0: return t('aboutYouStepName');
+      case 1: return t('yourNeedsStepName');
+      case 2: return t('discoveryStepName');
+      default: return '';
+    }
+  };
+
+  const surveyPages = [
+    <AboutYouPage key="about-you" styles={styles} isDarkMode={isDarkMode} token={token} surveyData={surveyData} handleSurveyDataChange={handleSurveyDataChange} isModal={isModal} />,
+    <YourNeedsPage key="your-needs" styles={styles} isDarkMode={isDarkMode} token={token} surveyData={surveyData} handleSurveyDataChange={handleSurveyDataChange} handleUseCaseToggle={handleUseCaseToggle} isModal={isModal} />,
+    <DiscoveryPage key="discovery" styles={styles} isDarkMode={isDarkMode} token={token} surveyData={surveyData} handleSurveyDataChange={handleSurveyDataChange} isModal={isModal} />
+  ];
+
+  React.useEffect(() => {
+    dispatch(setSurveySubStep(0));
+  }, []);
+
+  return (
+    <div className="w-full">
+      {/* Progress Indicator */}
+      <div className="mb-8">
+        <div className="flex items-center justify-between mb-2">
+          <span className="text-sm font-medium" style={{ color: token?.colorTextSecondary }}>Step {surveySubStep + 1} of 3: {getSubStepTitle()}</span>
+          <span className="text-sm" style={{ color: token?.colorTextSecondary }}>{Math.round(((surveySubStep + 1) / 3) * 100)}%</span>
+        </div>
+        <Progress percent={Math.round(((surveySubStep + 1) / 3) * 100)} showInfo={false} strokeColor={token?.colorPrimary} className="mb-0" />
+      </div>
+
+      {/* Current Page Content */}
+      <div className="min-h-[400px] flex flex-col survey-page-transition" key={surveySubStep}>
+        {surveyPages[surveySubStep]}
+      </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/worklenz-frontend/src/components/account-setup/tasks-step.tsx b/worklenz-frontend/src/components/account-setup/tasks-step.tsx
index 5feb3552a..9381d83f1 100644
--- a/worklenz-frontend/src/components/account-setup/tasks-step.tsx
+++ b/worklenz-frontend/src/components/account-setup/tasks-step.tsx
@@ -1,134 +1,130 @@
-import React, { useEffect, useRef } from 'react';
-import { Form, Input, Button, Typography, List, InputRef } from '@/shared/antd-imports';
-import { PlusOutlined, DeleteOutlined, CloseCircleOutlined } from '@/shared/antd-imports';
+import React, { useEffect, useRef, useState } from 'react';
+import { Input, Button, Typography, Card } from '@/shared/antd-imports';
+import { PlusOutlined, DeleteOutlined, CloseCircleOutlined, CheckCircleOutlined } from '@/shared/antd-imports';
 import { useDispatch, useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';
 import { RootState } from '@/app/store';
 import { setTasks } from '@/features/account-setup/account-setup.slice';
 import { sanitizeInput } from '@/utils/sanitizeInput';
 
-const { Title } = Typography;
+const { Title, Paragraph, Text } = Typography;
 
 interface Props {
   onEnter: () => void;
   styles: any;
   isDarkMode: boolean;
+  token?: any;
 }
 
-export const TasksStep: React.FC<Props> = ({ onEnter, styles, isDarkMode }) => {
+
+export const TasksStep: React.FC<Props> = ({ onEnter, styles, isDarkMode, token }) => {
   const { t } = useTranslation('account-setup');
   const dispatch = useDispatch();
-  const { tasks, projectName } = useSelector((state: RootState) => state.accountSetupReducer);
-  const inputRefs = useRef<(InputRef | null)[]>([]);
+  const { tasks, projectName, surveyData } = useSelector((state: RootState) => state.accountSetupReducer);
+  const inputRefs = useRef<(HTMLInputElement | null)[]>([]);
+  const [showSuggestions, setShowSuggestions] = useState(false);
+  const [focusedIndex, setFocusedIndex] = useState<number | null>(null);
 
   const addTask = () => {
-    if (tasks.length == 5) return;
-
+    if (tasks.length >= 5) return;
     const newId = tasks.length > 0 ? Math.max(...tasks.map(t => t.id)) + 1 : 0;
     dispatch(setTasks([...tasks, { id: newId, value: '' }]));
-    setTimeout(() => {
-      inputRefs.current[newId]?.focus();
-    }, 0);
+    setTimeout(() => inputRefs.current[tasks.length]?.focus(), 100);
   };
 
   const removeTask = (id: number) => {
-    if (tasks.length > 1) {
-      dispatch(setTasks(tasks.filter(task => task.id !== id)));
-    }
+    if (tasks.length > 1) dispatch(setTasks(tasks.filter(task => task.id !== id)));
   };
 
   const updateTask = (id: number, value: string) => {
     const sanitizedValue = sanitizeInput(value);
-    dispatch(
-      setTasks(tasks.map(task => (task.id === id ? { ...task, value: sanitizedValue } : task)))
-    );
+    dispatch(setTasks(tasks.map(task => (task.id === id ? { ...task, value: sanitizedValue } : task))));
   };
 
-  const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    const input = e.currentTarget as HTMLInputElement;
-    if (!input.value.trim()) return;
-    e.preventDefault();
-    addTask();
+  const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>, index: number) => {
+    if (e.key === 'Enter') {
+      const input = e.currentTarget as HTMLInputElement;
+      if (input.value.trim()) {
+        e.preventDefault();
+        if (index === tasks.length - 1 && tasks.length < 5) addTask();
+        else if (index < tasks.length - 1) inputRefs.current[index + 1]?.focus();
+      }
+    }
+  };
+
+  const handleSuggestionClick = (suggestion: string) => {
+    const emptyTaskIndex = tasks.findIndex(task => !task.value.trim());
+    if (emptyTaskIndex !== -1) {
+      updateTask(tasks[emptyTaskIndex].id, suggestion);
+    } else if (tasks.length < 5) {
+      const newId = tasks.length > 0 ? Math.max(...tasks.map(t => t.id)) + 1 : 0;
+      dispatch(setTasks([...tasks, { id: newId, value: suggestion }]));
+    }
+    setShowSuggestions(false);
   };
 
   useEffect(() => {
     setTimeout(() => inputRefs.current[0]?.focus(), 200);
   }, []);
 
-  // Function to set ref that doesn't return anything (void)
-  const setInputRef = (index: number) => (el: InputRef | null) => {
-    inputRefs.current[index] = el;
-  };
 
   return (
-    <Form
-      className="create-first-task-form"
-      style={{
-        minHeight: '300px',
-        width: '600px',
-        paddingBottom: '1rem',
-        marginBottom: '3rem',
-        marginTop: '3rem',
-        display: 'flex',
-        flexDirection: 'column',
-      }}
-    >
-      <Form.Item>
-        <Title level={2} style={{ marginBottom: '1rem' }}>
+    <div className="w-full tasks-step">
+      {/* Header */}
+      <div className="text-center mb-8">
+        <Title level={3} className="mb-2" style={{ color: token?.colorText }}>
           {t('tasksStepTitle')}
         </Title>
-      </Form.Item>
-      <Form.Item
-        layout="vertical"
-        rules={[{ required: true }]}
-        label={
-          <span className="font-medium">
-            {t('tasksStepLabel')} "<mark>{projectName}</mark>". {t('maxTasks')}
-          </span>
-        }
-      >
-        <List
-          dataSource={tasks}
-          bordered={false}
-          renderItem={(task, index) => (
-            <List.Item key={task.id}>
-              <div style={{ display: 'flex', width: '600px' }}>
-                <Input
-                  placeholder="Your Task"
-                  value={task.value}
-                  onChange={e => updateTask(task.id, e.target.value)}
-                  onPressEnter={handleKeyPress}
-                  ref={setInputRef(index)}
-                />
-                <Button
-                  className="custom-close-button"
-                  style={{ marginLeft: '48px' }}
-                  type="text"
-                  icon={<CloseCircleOutlined />}
-                  disabled={tasks.length === 1}
-                  onClick={() => removeTask(task.id)}
-                />
+        <Paragraph className="text-base" style={{ color: token?.colorTextSecondary }}>
+          {t('tasksStepDescription', { projectName })}
+        </Paragraph>
+      </div>
+
+
+      {/* Tasks List */}
+      <div className="mb-6">
+        <div className="space-y-4">
+          {tasks.map((task, index) => (
+            <Card 
+              key={task.id}
+              className={`task-item-card transition-all duration-200 ${
+                focusedIndex === index ? 'border-2' : ''
+              }`}
+              style={{ 
+                borderColor: focusedIndex === index ? token?.colorPrimary : token?.colorBorder,
+                backgroundColor: token?.colorBgContainer 
+              }}
+            >
+              <div className="flex items-center space-x-3">
+                <div className="flex items-center justify-center w-8 h-8 rounded-full text-sm font-medium" style={{ backgroundColor: task.value.trim() ? token?.colorSuccess : token?.colorBorderSecondary, color: task.value.trim() ? '#fff' : token?.colorTextSecondary }}>
+                  {task.value.trim() ? <CheckCircleOutlined /> : index + 1}
+                </div>
+                
+                <div className="flex-1">
+                  <Input
+                    placeholder={t('taskPlaceholder', { index: index + 1 })}
+                    value={task.value}
+                    onChange={e => updateTask(task.id, e.target.value)}
+                    onKeyPress={e => handleKeyPress(e, index)}
+                    onFocus={() => setFocusedIndex(index)}
+                    onBlur={() => setFocusedIndex(null)}
+                    ref={(el) => { inputRefs.current[index] = el as any; }}
+                    className="text-base border-0 shadow-none task-input"
+                    style={{ backgroundColor: 'transparent', color: token?.colorText }}
+                  />
+                </div>
+
+                {tasks.length > 1 && <Button type="text" icon={<CloseCircleOutlined />} onClick={() => removeTask(task.id)} className="text-gray-400 hover:text-red-500" style={{ color: token?.colorTextTertiary }} />}
               </div>
-            </List.Item>
-          )}
-        />
-        <Button
-          type="dashed"
-          icon={<PlusOutlined />}
-          onClick={addTask}
-          disabled={tasks.length == 5}
-          style={{ marginTop: '16px' }}
-        >
-          {t('tasksStepAddAnother')}
-        </Button>
-        <div
-          style={{
-            marginTop: '24px',
-            display: 'flex',
-            justifyContent: 'space-between',
-          }}
-        ></div>
-      </Form.Item>
-    </Form>
+            </Card>
+          ))}
+        </div>
+
+        {tasks.length < 5 && (
+          <Button type="dashed" icon={<PlusOutlined />} onClick={addTask} className="w-full mt-4 h-12 text-base" style={{ borderColor: token?.colorBorder, color: token?.colorTextSecondary }}>{t('addAnotherTask', { current: tasks.length, max: 5 })}</Button>
+        )}
+      </div>
+
+    </div>
   );
-};
+};
\ No newline at end of file
diff --git a/worklenz-frontend/src/components/admin-center/billing/current-plan-details/current-plan-details.tsx b/worklenz-frontend/src/components/admin-center/billing/current-plan-details/current-plan-details.tsx
index 28ec12ced..8d2a3ce2a 100644
--- a/worklenz-frontend/src/components/admin-center/billing/current-plan-details/current-plan-details.tsx
+++ b/worklenz-frontend/src/components/admin-center/billing/current-plan-details/current-plan-details.tsx
@@ -278,6 +278,9 @@ const CurrentPlanDetails = () => {
     } else if (expDate < today) {
       const diffTime = Math.abs(today.getTime() - expDate.getTime());
       const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+      if (diffDays === 1) {
+        return t('expiredDayAgo', '{{days}} day ago', { days: diffDays });
+      }
       return t('expiredDaysAgo', '{{days}} days ago', { days: diffDays });
     } else {
       return calculateTimeGap(expireDate);
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 000000000..b1858c92a
--- /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 000000000..64b10de82
--- /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 000000000..f8d930ca9
--- /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 000000000..0d5aaed5c
--- /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 000000000..4dd3a9ad6
--- /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 000000000..0e855bc3b
--- /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 000000000..7d27b5bcd
--- /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 da36593d2..ab4ff36a2 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/common/template-drawer/template-drawer.tsx b/worklenz-frontend/src/components/common/template-drawer/template-drawer.tsx
index 2250b869b..9f2e6031b 100644
--- a/worklenz-frontend/src/components/common/template-drawer/template-drawer.tsx
+++ b/worklenz-frontend/src/components/common/template-drawer/template-drawer.tsx
@@ -10,6 +10,7 @@ import {
   Image,
   Input,
   Flex,
+  theme,
 } from '@/shared/antd-imports';
 import React, { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
@@ -37,13 +38,12 @@ const TemplateDrawer: React.FC<TemplateDrawerProps> = ({
   showBothTabs = false,
   templateSelected = (templateId: string) => {
     if (!templateId) return;
-    templateId;
   },
   selectedTemplateType = (type: 'worklenz' | 'custom') => {
-    type;
   },
 }) => {
   const themeMode = useSelector((state: RootState) => state.themeReducer.mode);
+  const { token } = theme.useToken();
   const { t } = useTranslation('template-drawer');
 
   const [searchQuery, setSearchQuery] = useState('');
@@ -149,7 +149,12 @@ const TemplateDrawer: React.FC<TemplateDrawerProps> = ({
                 <Tag
                   key={phase.name}
                   color={phase.color_code}
-                  style={{ color: 'black', marginBottom: '8px' }}
+                  style={{ 
+                    color: token.colorText, 
+                    marginBottom: '8px',
+                    backgroundColor: phase.color_code ? undefined : token.colorBgContainer,
+                    borderColor: phase.color_code ? undefined : token.colorBorder
+                  }}
                 >
                   {phase.name}
                 </Tag>
@@ -171,7 +176,12 @@ const TemplateDrawer: React.FC<TemplateDrawerProps> = ({
                 <Tag
                   key={status.name}
                   color={status.color_code}
-                  style={{ color: 'black', marginBottom: '8px' }}
+                  style={{ 
+                    color: token.colorText, 
+                    marginBottom: '8px',
+                    backgroundColor: status.color_code ? undefined : token.colorBgContainer,
+                    borderColor: status.color_code ? undefined : token.colorBorder
+                  }}
                 >
                   {status.name}
                 </Tag>
@@ -193,7 +203,12 @@ const TemplateDrawer: React.FC<TemplateDrawerProps> = ({
                 <Tag
                   key={priority.name}
                   color={priority.color_code}
-                  style={{ color: 'black', marginBottom: '8px' }}
+                  style={{ 
+                    color: token.colorText, 
+                    marginBottom: '8px',
+                    backgroundColor: priority.color_code ? undefined : token.colorBgContainer,
+                    borderColor: priority.color_code ? undefined : token.colorBorder
+                  }}
                 >
                   {priority.name}
                 </Tag>
@@ -215,7 +230,12 @@ const TemplateDrawer: React.FC<TemplateDrawerProps> = ({
                 <Tag
                   key={label.name}
                   color={label.color_code}
-                  style={{ color: 'black', marginBottom: '8px' }}
+                  style={{ 
+                    color: token.colorText, 
+                    marginBottom: '8px',
+                    backgroundColor: label.color_code ? undefined : token.colorBgContainer,
+                    borderColor: label.color_code ? undefined : token.colorBorder
+                  }}
                 >
                   {label.name}
                 </Tag>
@@ -251,14 +271,24 @@ const TemplateDrawer: React.FC<TemplateDrawerProps> = ({
   };
 
   const menuContent = (
-    <div style={{ display: 'flex' }}>
+    <div style={{ display: 'flex', backgroundColor: token.colorBgContainer }}>
       {/* Menu Area */}
-      <div style={{ minWidth: '250px', overflowY: 'auto', height: '100%' }}>
+      <div style={{ 
+        minWidth: '250px', 
+        overflowY: 'auto', 
+        height: '100%',
+        backgroundColor: token.colorBgContainer,
+        borderRight: `1px solid ${token.colorBorder}`
+      }}>
         <Skeleton loading={loadingTemplates} active>
           <Menu
             className="template-menu"
             onClick={({ key }) => handleMenuClick(key)}
-            style={{ width: 256 }}
+            style={{ 
+              width: 256,
+              backgroundColor: token.colorBgContainer,
+              borderColor: token.colorBorder
+            }}
             defaultSelectedKeys={[templates[0]?.id || '']}
             mode="inline"
             items={menuItems}
@@ -272,9 +302,11 @@ const TemplateDrawer: React.FC<TemplateDrawerProps> = ({
           flex: 1,
           maxHeight: 'calc(100vh - 200px)',
           padding: '16px',
+          backgroundColor: token.colorBgContainer,
+          color: token.colorText
         }}
       >
-        <Title level={4}>Details</Title>
+        <Title level={4} style={{ color: token.colorText }}>Details</Title>
         <Skeleton loading={loadingSelectedTemplate} active>
           {selectedTemplate?.image_url && (
             <Image preview={false} src={selectedTemplate.image_url} alt={selectedTemplate.name} />
@@ -297,12 +329,17 @@ const TemplateDrawer: React.FC<TemplateDrawerProps> = ({
   };
 
   const customTemplatesContent = (
-    <div>
+    <div style={{ backgroundColor: token.colorBgContainer, padding: '16px' }}>
       <Flex justify="space-between" align="center">
         <Input
           placeholder={t('searchTemplates')}
-          suffix={<SearchOutlined />}
-          style={{ maxWidth: '300px' }}
+          suffix={<SearchOutlined style={{ color: token.colorTextTertiary }} />}
+          style={{ 
+            maxWidth: '300px',
+            backgroundColor: token.colorBgContainer,
+            borderColor: token.colorBorder,
+            color: token.colorText
+          }}
           onChange={e => setSearchQuery(e.target.value)}
         />
       </Flex>
@@ -312,10 +349,20 @@ const TemplateDrawer: React.FC<TemplateDrawerProps> = ({
         bordered
         dataSource={filteredCustomTemplates}
         loading={loadingCustomTemplates}
+        style={{
+          backgroundColor: token.colorBgContainer,
+          borderColor: token.colorBorder
+        }}
         renderItem={item => (
           <List.Item
             key={item.id}
             onClick={() => handleCustomTemplateClick(item.id || '')}
+            style={{
+              backgroundColor: item.selected ? token.colorPrimaryBg : token.colorBgContainer,
+              borderColor: item.selected ? token.colorPrimary : token.colorBorder,
+              color: token.colorText,
+              cursor: 'pointer'
+            }}
             className={
               item.selected && themeMode === 'dark'
                 ? 'selected-custom-template-dark'
@@ -324,7 +371,7 @@ const TemplateDrawer: React.FC<TemplateDrawerProps> = ({
                   : ''
             }
           >
-            {item.name}
+            <span style={{ color: token.colorText }}>{item.name}</span>
           </List.Item>
         )}
       />
@@ -355,18 +402,31 @@ const TemplateDrawer: React.FC<TemplateDrawerProps> = ({
   };
 
   return (
-    <div style={{ height: '100vh', overflow: 'hidden' }}>
+    <div style={{ 
+      height: '100vh', 
+      overflow: 'hidden',
+      backgroundColor: token.colorBgLayout 
+    }}>
       <div
         style={{
           position: 'sticky',
           top: 0,
           zIndex: 100,
-          backgroundColor: themeMode === 'dark' ? '' : '#fff',
+          backgroundColor: token.colorBgContainer,
           overflow: 'hidden',
+          borderBottom: `1px solid ${token.colorBorder}`
         }}
       >
         {showBothTabs ? (
-          <Tabs type="card" items={tabs} onChange={handleTabChange} destroyInactiveTabPane />
+          <Tabs 
+            type="card" 
+            items={tabs} 
+            onChange={handleTabChange} 
+            destroyInactiveTabPane
+            style={{
+              backgroundColor: token.colorBgContainer
+            }}
+          />
         ) : (
           menuContent
         )}
diff --git a/worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD/EnhancedKanbanBoardNativeDnD.tsx b/worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD/EnhancedKanbanBoardNativeDnD.tsx
index ae1e3c350..ef5879232 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 f5e443d25..9338b48bf 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 bf499a125..daa8793c5 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/index.ts b/worklenz-frontend/src/components/index.ts
index 57cd8bcde..65c4efa94 100644
--- a/worklenz-frontend/src/components/index.ts
+++ b/worklenz-frontend/src/components/index.ts
@@ -10,3 +10,6 @@ export { default as LabelsSelector } from './LabelsSelector';
 export { default as Progress } from './Progress';
 export { default as Tag } from './Tag';
 export { default as Tooltip } from './Tooltip';
+
+// Update Notification Components
+export * from './update-notification';
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 000000000..c921d2f64
--- /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 000000000..be640bc3a
--- /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 000000000..7d5d31e39
--- /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 000000000..86b854289
--- /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 000000000..05cd18863
--- /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 000000000..f3c7b91f4
--- /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 92f05b502..01f423e8a 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);
@@ -33,6 +33,12 @@ const ProjectMemberDrawer = () => {
   const [members, setMembers] = useState<ITeamMembersViewModel>({ data: [], total: 0 });
   const [teamMembersLoading, setTeamMembersLoading] = useState(false);
 
+  // Filter out members already in the project
+  const currentProjectMemberIds = (currentMembersList || []).map(m => m.team_member_id).filter(Boolean);
+  const availableMembers = (members?.data || []).filter(
+    member => member.id && !currentProjectMemberIds.includes(member.id)
+  );
+
   const fetchProjectMembers = async () => {
     if (!projectId) return;
     dispatch(getAllProjectMembers(projectId));
@@ -175,8 +181,9 @@ const ProjectMemberDrawer = () => {
   );
 
   const renderNotFoundContent = () => (
-    <Flex>
+    <Flex style={{ display: 'block'}}>
       <Button
+        className='mb-2'
         block
         type="primary"
         onClick={sendInviteToProject}
@@ -188,60 +195,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={availableMembers.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/components/settings/update-member-drawer.tsx b/worklenz-frontend/src/components/settings/update-member-drawer.tsx
index 5be63897e..27050dc33 100644
--- a/worklenz-frontend/src/components/settings/update-member-drawer.tsx
+++ b/worklenz-frontend/src/components/settings/update-member-drawer.tsx
@@ -94,7 +94,7 @@ const UpdateMemberDrawer = ({ selectedMemberId, onRoleUpdate }: UpdateMemberDraw
 
     try {
       const body: ITeamMemberCreateRequest = {
-        job_title: selectedJobTitle,
+        job_title: form.getFieldValue('jobTitle'),
         emails: [teamMember.email],
         is_admin: values.access === 'admin',
       };
diff --git a/worklenz-frontend/src/components/survey/SurveyPromptModal.tsx b/worklenz-frontend/src/components/survey/SurveyPromptModal.tsx
new file mode 100644
index 000000000..b09a57a92
--- /dev/null
+++ b/worklenz-frontend/src/components/survey/SurveyPromptModal.tsx
@@ -0,0 +1,269 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { Modal, Button, Result, Spin, Flex } from '@/shared/antd-imports';
+import { SurveyStep } from '@/components/account-setup/survey-step';
+import { useSurveyStatus } from '@/hooks/useSurveyStatus';
+import { useTranslation } from 'react-i18next';
+import { useAppSelector } from '@/hooks/useAppSelector';
+import { useAppDispatch } from '@/hooks/useAppDispatch';
+import { surveyApiService } from '@/api/survey/survey.api.service';
+import { appMessage } from '@/shared/antd-imports';
+import { ISurveySubmissionRequest } from '@/types/account-setup/survey.types';
+import logger from '@/utils/errorLogger';
+import { resetSurveyData, setSurveySubStep } from '@/features/account-setup/account-setup.slice';
+
+interface SurveyPromptModalProps {
+  forceShow?: boolean;
+  onClose?: () => void;
+}
+
+export const SurveyPromptModal: React.FC<SurveyPromptModalProps> = ({ forceShow = false, onClose }) => {
+  const { t } = useTranslation('survey');
+  const dispatch = useAppDispatch();
+  const [visible, setVisible] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
+  const [surveyCompleted, setSurveyCompleted] = useState(false);
+  const [surveyInfo, setSurveyInfo] = useState<{ id: string; questions: any[] } | null>(null);
+  const { hasCompletedSurvey, loading, refetch } = useSurveyStatus();
+  const themeMode = useAppSelector(state => state.themeReducer.mode);
+  const surveyData = useAppSelector(state => state.accountSetupReducer.surveyData);
+  const surveySubStep = useAppSelector(state => state.accountSetupReducer.surveySubStep);
+  const isDarkMode = themeMode === 'dark';
+
+  useEffect(() => {
+    // Check if survey modal is disabled via environment variable
+    if (import.meta.env.VITE_ENABLE_SURVEY_MODAL !== 'true' && !forceShow) {
+      return; // Don't show modal if disabled in environment
+    }
+
+    // Check if survey was skipped recently (within 7 days)
+    const skippedAt = localStorage.getItem('survey_skipped_at');
+    if (!forceShow && skippedAt) {
+      const skippedDate = new Date(skippedAt);
+      const now = new Date();
+      const diffDays = (now.getTime() - skippedDate.getTime()) / (1000 * 60 * 60 * 24);
+      if (diffDays < 3) {
+        return; // Don't show modal if skipped within 7 days
+      }
+    }
+
+    if (forceShow) {
+      setVisible(true);
+      dispatch(resetSurveyData());
+      dispatch(setSurveySubStep(0));
+      // Fetch survey info
+      const fetchSurvey = async () => {
+        try {
+          const response = await surveyApiService.getAccountSetupSurvey();
+          if (response.done && response.body) {
+            setSurveyInfo({
+              id: response.body.id,
+              questions: response.body.questions || []
+            });
+          }
+        } catch (error) {
+          logger.error(t('survey:fetchErrorLog'), error);
+        }
+      };
+      fetchSurvey();
+    } else if (!loading && hasCompletedSurvey === false) {
+      dispatch(resetSurveyData());
+      dispatch(setSurveySubStep(0));
+      // Fetch survey info
+      const fetchSurvey = async () => {
+        try {
+          const response = await surveyApiService.getAccountSetupSurvey();
+          if (response.done && response.body) {
+            setSurveyInfo({
+              id: response.body.id,
+              questions: response.body.questions || []
+            });
+          }
+        } catch (error) {
+          logger.error(t('survey:fetchErrorLog'), error);
+        }
+      };
+      fetchSurvey();
+      // Show modal after a 5 second delay to not interrupt user immediately
+      const timer = setTimeout(() => {
+        setVisible(true);
+      }, 5000);
+      return () => clearTimeout(timer);
+    }
+  }, [loading, hasCompletedSurvey, dispatch, forceShow, t]);
+
+  const handleComplete = async () => {
+    try {
+      setSubmitting(true);
+      
+      if (!surveyData || !surveyInfo) {
+        throw new Error('Survey data not found');
+      }
+
+      // Create a map of question keys to IDs
+      const questionMap = surveyInfo.questions.reduce((acc, q) => {
+        acc[q.question_key] = q.id;
+        return acc;
+      }, {} as Record<string, string>);
+
+      // Prepare submission data with actual question IDs - only include answered questions
+      const answers: any[] = [];
+      
+      if (surveyData.organization_type && questionMap['organization_type']) {
+        answers.push({
+          question_id: questionMap['organization_type'],
+          answer_text: surveyData.organization_type
+        });
+      }
+      
+      if (surveyData.user_role && questionMap['user_role']) {
+        answers.push({
+          question_id: questionMap['user_role'],
+          answer_text: surveyData.user_role
+        });
+      }
+      
+      if (surveyData.main_use_cases && surveyData.main_use_cases.length > 0 && questionMap['main_use_cases']) {
+        answers.push({
+          question_id: questionMap['main_use_cases'],
+          answer_json: surveyData.main_use_cases
+        });
+      }
+      
+      if (surveyData.previous_tools && questionMap['previous_tools']) {
+        answers.push({
+          question_id: questionMap['previous_tools'],
+          answer_text: surveyData.previous_tools
+        });
+      }
+      
+      if (surveyData.how_heard_about && questionMap['how_heard_about']) {
+        answers.push({
+          question_id: questionMap['how_heard_about'],
+          answer_text: surveyData.how_heard_about
+        });
+      }
+
+      const submissionData: ISurveySubmissionRequest = {
+        survey_id: surveyInfo.id,
+        answers
+      };
+
+      const response = await surveyApiService.submitSurveyResponse(submissionData);
+      
+      if (response.done) {
+        setSurveyCompleted(true);
+        appMessage.success(t('survey:submitSuccessMessage'));
+        
+        // Wait a moment before closing
+        setTimeout(() => {
+          setVisible(false);
+          refetch(); // Update the survey status
+        }, 2000);
+      } else {
+        throw new Error(response.message || t('survey:submitErrorMessage'));
+      }
+    } catch (error) {
+      logger.error(t('survey:submitErrorLog'), error);
+      appMessage.error(t('survey:submitErrorMessage'));
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const handleSkip = () => {
+    setVisible(false);
+    // Optionally, you can set a flag in localStorage to not show again for some time
+    localStorage.setItem('survey_skipped_at', new Date().toISOString());
+    onClose?.();
+  };
+
+  const isCurrentStepValid = () => {
+    switch (surveySubStep) {
+      case 0:
+        return surveyData.organization_type && surveyData.user_role;
+      case 1:
+        return surveyData.main_use_cases && surveyData.main_use_cases.length > 0;
+      case 2:
+        return surveyData.how_heard_about;
+      default:
+        return false;
+    }
+  };
+
+  const handleNext = () => {
+    if (surveySubStep < 2) {
+      dispatch(setSurveySubStep(surveySubStep + 1));
+    } else {
+      handleComplete();
+    }
+  };
+
+  const handlePrevious = () => {
+    if (surveySubStep > 0) {
+      dispatch(setSurveySubStep(surveySubStep - 1));
+    }
+  };
+
+  if (loading) {
+    return null;
+  }
+
+  return (
+    <Modal
+      open={visible}
+      title={surveyCompleted ? null : t('survey:modalTitle')}
+      onCancel={handleSkip}
+      footer={
+        surveyCompleted ? null : (
+          <Flex justify="space-between" align="center">
+            <div>
+              <Button onClick={handleSkip}>
+                {t('survey:skip')}
+              </Button>
+            </div>
+            <Flex gap={8}>
+              {surveySubStep > 0 && (
+                <Button onClick={handlePrevious}>
+                  {t('survey:previous')}
+                </Button>
+              )}
+              <Button 
+                type="primary" 
+                onClick={handleNext}
+                disabled={!isCurrentStepValid()}
+                loading={submitting && surveySubStep === 2}
+              >
+                {surveySubStep === 2 ? t('survey:completeSurvey') : t('survey:next')}
+              </Button>
+            </Flex>
+          </Flex>
+        )
+      }
+      width={800}
+      maskClosable={false}
+      centered
+    >
+      {submitting ? (
+        <div style={{ textAlign: 'center', padding: '40px' }}>
+          <Spin size="large" />
+          <p style={{ marginTop: 16 }}>{t('survey:submitting')}</p>
+        </div>
+      ) : surveyCompleted ? (
+        <Result
+          status="success"
+          title={t('survey:submitSuccessTitle')}
+          subTitle={t('survey:submitSuccessSubtitle')}
+        />
+      ) : (
+        <div style={{ maxHeight: '70vh', overflowY: 'auto' }}>
+          <SurveyStep 
+            onEnter={() => {}} // Empty function since we handle navigation via buttons
+            styles={{}}
+            isDarkMode={isDarkMode}
+            isModal={true} // Pass true to indicate modal context
+          />
+        </div>
+      )}
+    </Modal>
+  );
+};
\ No newline at end of file
diff --git a/worklenz-frontend/src/components/survey/SurveySettingsCard.tsx b/worklenz-frontend/src/components/survey/SurveySettingsCard.tsx
new file mode 100644
index 000000000..eec3aa2c1
--- /dev/null
+++ b/worklenz-frontend/src/components/survey/SurveySettingsCard.tsx
@@ -0,0 +1,73 @@
+import React, { useState } from 'react';
+import { Card, Button, Result, Alert } from '@/shared/antd-imports';
+import { CheckCircleOutlined, FormOutlined } from '@/shared/antd-imports';
+import { useSurveyStatus } from '@/hooks/useSurveyStatus';
+import { SurveyPromptModal } from './SurveyPromptModal';
+import { useTranslation } from 'react-i18next';
+
+export const SurveySettingsCard: React.FC = () => {
+  const { t } = useTranslation('settings');
+  const [showModal, setShowModal] = useState(false);
+  const { hasCompletedSurvey, loading } = useSurveyStatus();
+
+  if (loading) {
+    return (
+      <Card loading={true} />
+    );
+  }
+
+  return (
+    <>
+      <Card
+        title={
+          <span>
+            <FormOutlined style={{ marginRight: 8 }} />
+            Personalization Survey
+          </span>
+        }
+        extra={
+          hasCompletedSurvey && (
+            <Button type="link" onClick={() => setShowModal(true)}>
+              Update Responses
+            </Button>
+          )
+        }
+      >
+        {hasCompletedSurvey ? (
+          <Result
+            icon={<CheckCircleOutlined style={{ color: '#52c41a' }} />}
+            title="Survey Completed"
+            subTitle="Thank you for completing the personalization survey. Your responses help us improve Worklenz."
+            extra={
+              <Button onClick={() => setShowModal(true)}>
+                Update Your Responses
+              </Button>
+            }
+          />
+        ) : (
+          <>
+            <Alert
+              message="Help us personalize your experience"
+              description="Take a quick survey to tell us about your organization and how you use Worklenz."
+              type="info"
+              showIcon
+              style={{ marginBottom: 16 }}
+            />
+            <div style={{ textAlign: 'center' }}>
+              <Button type="primary" size="large" onClick={() => setShowModal(true)}>
+                Take Survey Now
+              </Button>
+            </div>
+          </>
+        )}
+      </Card>
+
+      {showModal && (
+        <SurveyPromptModal 
+          forceShow={true} 
+          onClose={() => setShowModal(false)} 
+        />
+      )}
+    </>
+  );
+};
\ No newline at end of file
diff --git a/worklenz-frontend/src/components/survey/index.ts b/worklenz-frontend/src/components/survey/index.ts
new file mode 100644
index 000000000..b0e2d39f2
--- /dev/null
+++ b/worklenz-frontend/src/components/survey/index.ts
@@ -0,0 +1,2 @@
+export { SurveyPromptModal } from './SurveyPromptModal';
+export { SurveySettingsCard } from './SurveySettingsCard';
\ No newline at end of file
diff --git a/worklenz-frontend/src/components/task-drawer/shared/time-log/task-drawer-time-log.tsx b/worklenz-frontend/src/components/task-drawer/shared/time-log/task-drawer-time-log.tsx
index 61f245cf2..c4ff27f97 100644
--- a/worklenz-frontend/src/components/task-drawer/shared/time-log/task-drawer-time-log.tsx
+++ b/worklenz-frontend/src/components/task-drawer/shared/time-log/task-drawer-time-log.tsx
@@ -12,7 +12,7 @@ import TimeLogList from './time-log-list';
 import { taskTimeLogsApiService } from '@/api/tasks/task-time-logs.api.service';
 import { ITaskLogViewModel } from '@/types/tasks/task-log-view.types';
 import TaskTimer from '@/components/taskListCommon/task-timer/task-timer';
-import { useTaskTimer } from '@/hooks/useTaskTimer';
+import { useTaskTimerWithConflictCheck } from '@/hooks/useTaskTimerWithConflictCheck';
 import logger from '@/utils/errorLogger';
 
 interface TaskDrawerTimeLogProps {
@@ -31,7 +31,7 @@ const TaskDrawerTimeLog = ({ t, refreshTrigger = 0 }: TaskDrawerTimeLogProps) =>
     state => state.taskDrawerReducer
   );
 
-  const { started, timeString, handleStartTimer, handleStopTimer } = useTaskTimer(
+  const { started, timeString, handleStartTimer, handleStopTimer } = useTaskTimerWithConflictCheck(
     selectedTaskId || '',
     taskFormViewModel?.task?.timer_start_time || null
   );
diff --git a/worklenz-frontend/src/components/task-drawer/shared/time-log/time-log-item.tsx b/worklenz-frontend/src/components/task-drawer/shared/time-log/time-log-item.tsx
index 8e1fcbe95..e97129d23 100644
--- a/worklenz-frontend/src/components/task-drawer/shared/time-log/time-log-item.tsx
+++ b/worklenz-frontend/src/components/task-drawer/shared/time-log/time-log-item.tsx
@@ -3,7 +3,7 @@ import { Button, Divider, Flex, Popconfirm, Typography, Space } from '@/shared/a
 import { colors } from '@/styles/colors';
 import { ITaskLogViewModel } from '@/types/tasks/task-log-view.types';
 import SingleAvatar from '@/components/common/single-avatar/single-avatar';
-import { formatDateTimeWithLocale } from '@/utils/format-date-time-with-locale';
+import { formatDateTimeWithUserTimezone } from '@/utils/format-date-time-with-user-timezone';
 import { calculateTimeGap } from '@/utils/calculate-time-gap';
 import './time-log-item.css';
 import { taskTimeLogsApiService } from '@/api/tasks/task-time-logs.api.service';
@@ -101,7 +101,7 @@ const TimeLogItem = ({ log, onDelete }: TimeLogItemProps) => {
                   {renderLoggedByTimer()} {calculateTimeGap(created_at || '')}
                 </Typography.Text>
                 <Typography.Text type="secondary" style={{ fontSize: 12 }}>
-                  {formatDateTimeWithLocale(created_at || '')}
+                  {formatDateTimeWithUserTimezone(created_at || '', currentSession?.timezone_name)}
                 </Typography.Text>
               </Flex>
               {renderActionButtons()}
diff --git a/worklenz-frontend/src/components/task-list-common/labelsSelector/custom-color-label.tsx b/worklenz-frontend/src/components/task-list-common/labelsSelector/custom-color-label.tsx
index aff1f4c4d..c7773de20 100644
--- a/worklenz-frontend/src/components/task-list-common/labelsSelector/custom-color-label.tsx
+++ b/worklenz-frontend/src/components/task-list-common/labelsSelector/custom-color-label.tsx
@@ -2,8 +2,10 @@ import { Tag, Typography } from '@/shared/antd-imports';
 import { colors } from '@/styles/colors';
 import { ITaskLabel } from '@/types/tasks/taskLabel.types';
 import { ALPHA_CHANNEL } from '@/shared/constants';
+import { useAppSelector } from '@/hooks/useAppSelector';
 
 const CustomColorLabel = ({ label }: { label: ITaskLabel | null }) => {
+  const themeMode = useAppSelector(state => state.themeReducer.mode);
   return (
     <Tag
       key={label?.id}
@@ -17,7 +19,7 @@ const CustomColorLabel = ({ label }: { label: ITaskLabel | null }) => {
         fontSize: 11,
       }}
     >
-      <Typography.Text style={{ fontSize: 11, color: colors.darkGray }}>
+      <Typography.Text style={{ fontSize: 11, color: themeMode === 'dark' ? 'rgba(255, 255, 255, 0.85)' : colors.darkGray }}>
         {label?.name}
       </Typography.Text>
     </Tag>
diff --git a/worklenz-frontend/src/components/task-list-v2/TaskGroupHeader.tsx b/worklenz-frontend/src/components/task-list-v2/TaskGroupHeader.tsx
index 32a19dd40..580660687 100644
--- a/worklenz-frontend/src/components/task-list-v2/TaskGroupHeader.tsx
+++ b/worklenz-frontend/src/components/task-list-v2/TaskGroupHeader.tsx
@@ -1,5 +1,4 @@
 import React, { useMemo, useCallback, useState } from 'react';
-import { useDroppable } from '@dnd-kit/core';
 // @ts-ignore: Heroicons module types
 import {
   ChevronDownIcon,
@@ -382,24 +381,12 @@ const TaskGroupHeader: React.FC<TaskGroupHeaderProps> = ({
     t,
   ]);
 
-  // Make the group header droppable
-  const { isOver, setNodeRef } = useDroppable({
-    id: group.id,
-    data: {
-      type: 'group',
-      group,
-    },
-  });
-
   return (
     <div className="relative flex items-center">
       <div
-        ref={setNodeRef}
-        className={`inline-flex w-max items-center px-1 cursor-pointer hover:opacity-80 transition-opacity duration-200 ease-in-out border-t border-b border-gray-200 dark:border-gray-700 rounded-t-md pr-2 ${
-          isOver ? 'ring-2 ring-blue-400 ring-opacity-50' : ''
-        }`}
+        className="inline-flex w-max items-center px-1 cursor-pointer hover:opacity-80 transition-opacity duration-200 ease-in-out border-t border-b border-gray-200 dark:border-gray-700 rounded-t-md pr-2"
         style={{
-          backgroundColor: isOver ? `${headerBackgroundColor}dd` : headerBackgroundColor,
+          backgroundColor: headerBackgroundColor,
           color: headerTextColor,
           position: 'sticky',
           top: 0,
diff --git a/worklenz-frontend/src/components/task-list-v2/TaskListV2Table.tsx b/worklenz-frontend/src/components/task-list-v2/TaskListV2Table.tsx
index 933a525c3..95262a28d 100644
--- a/worklenz-frontend/src/components/task-list-v2/TaskListV2Table.tsx
+++ b/worklenz-frontend/src/components/task-list-v2/TaskListV2Table.tsx
@@ -9,8 +9,9 @@ import {
   KeyboardSensor,
   TouchSensor,
   closestCenter,
-  useDroppable,
+  Modifier,
 } from '@dnd-kit/core';
+import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
 import {
   SortableContext,
   verticalListSortingStrategy,
@@ -67,106 +68,132 @@ import TaskListSkeleton from './components/TaskListSkeleton';
 import ConvertToSubtaskDrawer from '@/components/task-list-common/convert-to-subtask-drawer/convert-to-subtask-drawer';
 import EmptyListPlaceholder from '@/components/EmptyListPlaceholder';
 
-// Empty Group Drop Zone Component
-const EmptyGroupDropZone: React.FC<{
-  groupId: string;
-  visibleColumns: any[];
-  t: (key: string) => string;
-}> = ({ groupId, visibleColumns, t }) => {
-  const { setNodeRef, isOver, active } = useDroppable({
-    id: `empty-group-${groupId}`,
-    data: {
-      type: 'group',
-      groupId: groupId,
-      isEmpty: true,
-    },
-  });
-
+// Drop Spacer Component - creates space between tasks when dragging
+const DropSpacer: React.FC<{ isVisible: boolean; visibleColumns: any[]; isDarkMode?: boolean }> = ({ 
+  isVisible, 
+  visibleColumns, 
+  isDarkMode = false 
+}) => {
+  if (!isVisible) return null;
+  
   return (
     <div 
-      ref={setNodeRef}
-      className={`relative w-full transition-colors duration-200 ${
-        isOver && active ? 'bg-blue-50 dark:bg-blue-900/20' : ''
-      }`}
+      className="flex items-center min-w-max px-1 border-2 border-dashed border-blue-400 dark:border-blue-500 bg-blue-50 dark:bg-blue-900/20 transition-all duration-200 ease-in-out"
+      style={{ 
+        height: isVisible ? '40px' : '0px',
+        opacity: isVisible ? 1 : 0,
+        marginTop: isVisible ? '2px' : '0px',
+        marginBottom: isVisible ? '2px' : '0px',
+        overflow: 'hidden',
+      }}
     >
-      <div className="flex items-center min-w-max px-1 border-t border-b border-gray-200 dark:border-gray-700" style={{ height: '40px' }}>
-        {visibleColumns.map((column, index) => {
-          const emptyColumnStyle = {
-            width: column.width,
-            flexShrink: 0,
-          };
-          
-          // Show text in the title column
-          if (column.id === 'title') {
-            return (
-              <div
-                key={`empty-${column.id}`}
-                className="flex items-center pl-1"
-                style={emptyColumnStyle}
-              >
-                <span className="text-sm text-gray-500 dark:text-gray-400">
-                  No tasks in this group
-                </span>
-              </div>
-            );
+      {visibleColumns.map((column, index) => {
+        // Calculate left position for sticky columns
+        let leftPosition = 0;
+        if (column.isSticky) {
+          for (let i = 0; i < index; i++) {
+            const prevColumn = visibleColumns[i];
+            if (prevColumn.isSticky) {
+              leftPosition += parseInt(prevColumn.width.replace('px', ''));
+            }
           }
-          
+        }
+
+        const columnStyle = {
+          width: column.width,
+          flexShrink: 0,
+          ...(column.isSticky && {
+            position: 'sticky' as const,
+            left: leftPosition,
+            zIndex: 10,
+            backgroundColor: 'inherit', // Inherit from parent spacer
+          }),
+        };
+        
+        if (column.id === 'title') {
           return (
             <div
-              key={`empty-${column.id}`}
-              className="border-r border-gray-200 dark:border-gray-700"
-              style={emptyColumnStyle}
-            />
+              key={`spacer-${column.id}`}
+              className="flex items-center pl-1 border-r border-blue-300 dark:border-blue-600"
+              style={columnStyle}
+            >
+              <span className="text-xs text-blue-600 dark:text-blue-400 font-medium">
+                Drop here
+              </span>
+            </div>
           );
-        })}
-      </div>
-      {isOver && active && (
-        <div className="absolute inset-0 border-2 border-dashed border-blue-400 dark:border-blue-500 rounded-md pointer-events-none" />
-      )}
+        }
+        
+        return (
+          <div
+            key={`spacer-${column.id}`}
+            className="border-r border-blue-300 dark:border-blue-600"
+            style={columnStyle}
+          />
+        );
+      })}
     </div>
   );
 };
 
-// Placeholder Drop Indicator Component
-const PlaceholderDropIndicator: React.FC<{
-  isVisible: boolean;
-  visibleColumns: any[];
-}> = ({ isVisible, visibleColumns }) => {
-  if (!isVisible) return null;
-  
+// Empty Group Message Component
+const EmptyGroupMessage: React.FC<{ visibleColumns: any[]; isDarkMode?: boolean }> = ({ 
+  visibleColumns, 
+  isDarkMode = false 
+}) => {
   return (
-    <div 
-      className="flex items-center min-w-max px-1 border-2 border-dashed border-blue-400 dark:border-blue-500 bg-blue-50 dark:bg-blue-900/20 rounded-md mx-1 my-1 transition-all duration-200 ease-in-out"
-      style={{ minWidth: 'max-content', height: '40px' }}
-    >
+    <div className="flex items-center min-w-max px-1 border-b border-gray-200 dark:border-gray-700" style={{ height: '40px' }}>
       {visibleColumns.map((column, index) => {
-        const columnStyle = {
+        // Calculate left position for sticky columns
+        let leftPosition = 0;
+        if (column.isSticky) {
+          for (let i = 0; i < index; i++) {
+            const prevColumn = visibleColumns[i];
+            if (prevColumn.isSticky) {
+              leftPosition += parseInt(prevColumn.width.replace('px', ''));
+            }
+          }
+        }
+
+        const emptyColumnStyle = {
           width: column.width,
           flexShrink: 0,
+          ...(column.isSticky && {
+            position: 'sticky' as const,
+            left: leftPosition,
+            zIndex: 10,
+            backgroundColor: 'inherit', // Inherit from parent container
+          }),
         };
+        
+        // Show text in the title column
+        if (column.id === 'title') {
+          return (
+            <div
+              key={`empty-${column.id}`}
+              className="flex items-center pl-1 border-r border-gray-200 dark:border-gray-700"
+              style={emptyColumnStyle}
+            >
+              <span className="text-sm text-gray-500 dark:text-gray-400 italic">
+                No tasks in this group
+              </span>
+            </div>
+          );
+        }
+        
         return (
           <div
-            key={`placeholder-${column.id}`}
-            className="flex items-center justify-center h-full"
-            style={columnStyle}
-          >
-            {/* Show "Drop task here" message in the title column */}
-            {column.id === 'title' && (
-              <div className="text-xs text-blue-600 dark:text-blue-400 font-medium opacity-75">
-                Drop task here
-              </div>
-            )}
-            {/* Show subtle placeholder content in other columns */}
-            {column.id !== 'title' && column.id !== 'dragHandle' && (
-              <div className="w-full h-4 mx-1 bg-white dark:bg-gray-700 rounded opacity-50" />
-            )}
-          </div>
+            key={`empty-${column.id}`}
+            className="border-r border-gray-200 dark:border-gray-700"
+            style={emptyColumnStyle}
+          />
         );
       })}
     </div>
   );
 };
 
+
 // Hooks and utilities
 import { useTaskSocketHandlers } from '@/hooks/useTaskSocketHandlers';
 import { useSocket } from '@/socket/socketContext';
@@ -229,7 +256,7 @@ const TaskListV2Section: React.FC = () => {
   );
 
   // Custom hooks
-  const { activeId, overId, handleDragStart, handleDragOver, handleDragEnd } = useDragAndDrop(
+  const { activeId, overId, dropPosition, handleDragStart, handleDragOver, handleDragEnd } = useDragAndDrop(
     allTasks,
     groups
   );
@@ -564,16 +591,12 @@ const TaskListV2Section: React.FC = () => {
             projectId={urlProjectId || ''}
           />
           {isGroupEmpty && !isGroupCollapsed && (
-            <EmptyGroupDropZone 
-              groupId={group.id}
-              visibleColumns={visibleColumns}
-              t={t}
-            />
+            <EmptyGroupMessage visibleColumns={visibleColumns} isDarkMode={isDarkMode} />
           )}
         </div>
       );
     },
-    [virtuosoGroups, collapsedGroups, handleGroupCollapse, visibleColumns, t]
+    [virtuosoGroups, collapsedGroups, handleGroupCollapse, visibleColumns, t, isDarkMode]
   );
 
   const renderTask = useCallback(
@@ -614,19 +637,40 @@ const TaskListV2Section: React.FC = () => {
   const renderColumnHeaders = useCallback(
     () => (
       <div
-        className="bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700"
-        style={{ width: '100%', minWidth: 'max-content' }}
+        className="border-b border-gray-200 dark:border-gray-700"
+        style={{ 
+          width: '100%', 
+          minWidth: 'max-content',
+          backgroundColor: isDarkMode ? '#141414' : '#f9fafb' 
+        }}
       >
         <div
           className="flex items-center px-1 py-3 w-full"
           style={{ minWidth: 'max-content', height: '44px' }}
         >
           {visibleColumns.map((column, index) => {
+            // Calculate left position for sticky columns
+            let leftPosition = 0;
+            if (column.isSticky) {
+              for (let i = 0; i < index; i++) {
+                const prevColumn = visibleColumns[i];
+                if (prevColumn.isSticky) {
+                  leftPosition += parseInt(prevColumn.width.replace('px', ''));
+                }
+              }
+            }
+
             const columnStyle: ColumnStyle = {
               width: column.width,
               flexShrink: 0,
               ...((column as any).minWidth && { minWidth: (column as any).minWidth }),
               ...((column as any).maxWidth && { maxWidth: (column as any).maxWidth }),
+              ...(column.isSticky && {
+                position: 'sticky' as const,
+                left: leftPosition,
+                zIndex: 15,
+                backgroundColor: isDarkMode ? '#141414' : '#f9fafb', // custom dark header : bg-gray-50
+              }),
             };
 
             return (
@@ -791,13 +835,25 @@ const TaskListV2Section: React.FC = () => {
   }
 
   return (
-    <DndContext
-      sensors={sensors}
-      collisionDetection={closestCenter}
-      onDragStart={handleDragStart}
-      onDragOver={handleDragOver}
-      onDragEnd={handleDragEnd}
-    >
+    <>
+      {/* CSS for sticky column hover effects */}
+      <style>
+        {`
+          .hover\\:bg-gray-50:hover .sticky-column-hover,
+          .dark .hover\\:bg-gray-800:hover .sticky-column-hover {
+            background-color: var(--hover-bg) !important;
+          }
+        `}
+      </style>
+      
+      <DndContext
+        sensors={sensors}
+        collisionDetection={closestCenter}
+        onDragStart={handleDragStart}
+        onDragOver={handleDragOver}
+        onDragEnd={handleDragEnd}
+        modifiers={[restrictToVerticalAxis]}
+      >
       <div className="flex flex-col bg-white dark:bg-gray-900 h-full overflow-hidden">
         {/* Table Container */}
         <div
@@ -850,41 +906,21 @@ const TaskListV2Section: React.FC = () => {
 
                         // Check if this is the first actual task in the group (not AddTaskRow)
                         const isFirstTaskInGroup = taskIndex === 0 && !('isAddTaskRow' in task);
-
-                        // Check if we should show drop indicators
-                        const isTaskBeingDraggedOver = overId === task.id;
-                        const isGroupBeingDraggedOver = overId === group.id;
-                        const isFirstTaskInGroupBeingDraggedOver = isFirstTaskInGroup && isTaskBeingDraggedOver;
+                        
+                        // Check if we should show drop spacer
+                        const isOverThisTask = activeId && overId === task.id && !('isAddTaskRow' in task);
+                        const showDropSpacerBefore = isOverThisTask && dropPosition === 'before';
+                        const showDropSpacerAfter = isOverThisTask && dropPosition === 'after';
 
                         return (
                           <div key={task.id || `add-task-${group.id}-${taskIndex}`}>
-                            {/* Placeholder drop indicator before first task in group */}
-                            {isFirstTaskInGroupBeingDraggedOver && (
-                              <PlaceholderDropIndicator isVisible={true} visibleColumns={visibleColumns} />
-                            )}
-                            
-                            {/* Placeholder drop indicator between tasks */}
-                            {isTaskBeingDraggedOver && !isFirstTaskInGroup && (
-                              <PlaceholderDropIndicator isVisible={true} visibleColumns={visibleColumns} />
-                            )}
-                            
+                            {showDropSpacerBefore && <DropSpacer isVisible={true} visibleColumns={visibleColumns} isDarkMode={isDarkMode} />}
                             {renderTask(globalTaskIndex, isFirstTaskInGroup)}
-                            
-                            {/* Placeholder drop indicator at end of group when dragging over group */}
-                            {isGroupBeingDraggedOver && taskIndex === group.tasks.length - 1 && (
-                              <PlaceholderDropIndicator isVisible={true} visibleColumns={visibleColumns} />
-                            )}
+                            {showDropSpacerAfter && <DropSpacer isVisible={true} visibleColumns={visibleColumns} isDarkMode={isDarkMode} />}
                           </div>
                         );
                       })
-                      ) : (
-                        // Handle empty groups with placeholder drop indicator
-                        overId === group.id && (
-                          <div style={{ minWidth: 'max-content' }}>
-                            <PlaceholderDropIndicator isVisible={true} visibleColumns={visibleColumns} />
-                          </div>
-                        )
-                      )
+                      ) : null
                     )}
                   </div>
                 ))}
@@ -894,15 +930,15 @@ const TaskListV2Section: React.FC = () => {
         </div>
 
         {/* Drag Overlay */}
-        <DragOverlay dropAnimation={{ duration: 200, easing: 'ease-in-out' }}>
+        <DragOverlay dropAnimation={{ duration: 200, easing: 'cubic-bezier(0.18, 0.67, 0.6, 1.22)' }}>
           {activeId ? (
             <div 
-              className="bg-white dark:bg-gray-800 shadow-lg rounded-md border border-blue-400 dark:border-blue-500 opacity-90"
+              className="bg-white dark:bg-gray-800 shadow-2xl rounded-lg border-2 border-blue-500 dark:border-blue-400 opacity-95"
               style={{ width: visibleColumns.find(col => col.id === 'title')?.width || '300px' }}
             >
-              <div className="px-3 py-2">
-                <div className="flex items-center gap-2">
-                  <HolderOutlined className="text-gray-400 dark:text-gray-500 text-xs" />
+              <div className="px-4 py-3">
+                <div className="flex items-center gap-3">
+                  <HolderOutlined className="text-blue-500 dark:text-blue-400 text-sm" />
                   <div className="text-sm font-medium text-gray-900 dark:text-white truncate flex-1">
                     {allTasks.find(task => task.id === activeId)?.name ||
                       allTasks.find(task => task.id === activeId)?.title ||
@@ -954,6 +990,7 @@ const TaskListV2Section: React.FC = () => {
         {createPortal(<ConvertToSubtaskDrawer />, document.body, 'convert-to-subtask-drawer')}
       </div>
     </DndContext>
+    </>
   );
 };
 
diff --git a/worklenz-frontend/src/components/task-list-v2/TaskRow.tsx b/worklenz-frontend/src/components/task-list-v2/TaskRow.tsx
index d03082ef7..be2cec2c1 100644
--- a/worklenz-frontend/src/components/task-list-v2/TaskRow.tsx
+++ b/worklenz-frontend/src/components/task-list-v2/TaskRow.tsx
@@ -75,7 +75,7 @@ const TaskRow: React.FC<TaskRowProps> = memo(({
   });
 
   // Drag and drop functionality - only enable for parent tasks
-  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging, isOver } = useSortable({
     id: task.id,
     data: {
       type: 'task',
@@ -116,24 +116,41 @@ const TaskRow: React.FC<TaskRowProps> = memo(({
   const style = useMemo(() => ({
     transform: CSS.Transform.toString(transform),
     transition,
-    opacity: isDragging ? 0 : 1, // Completely hide the original task while dragging
+    opacity: isDragging ? 0.3 : 1, // Make original task slightly transparent while dragging
   }), [transform, transition, isDragging]);
 
   return (
     <div
       ref={setNodeRef}
       style={{ ...style, height: '40px' }}
-      className={`flex items-center min-w-max px-1 border-b border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800 ${
+      className={`flex items-center min-w-max px-1 border-b border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors ${
         isFirstInGroup ? 'border-t border-gray-200 dark:border-gray-700' : ''
       } ${
-        isDragging ? 'shadow-lg border border-blue-300' : ''
+        isDragging ? 'opacity-50' : ''
+      } ${
+        isOver && !isDragging ? 'bg-blue-50 dark:bg-blue-900/20' : ''
       }`}
     >
-      {visibleColumns.map((column, index) => (
-        <React.Fragment key={column.id}>
-          {renderColumn(column.id, column.width, column.isSticky, index)}
-        </React.Fragment>
-      ))}
+      {visibleColumns.map((column, index) => {
+        // Calculate background state for sticky columns - custom dark mode colors
+        const rowBackgrounds = {
+          normal: isDarkMode ? '#1e1e1e' : '#ffffff', // custom dark : bg-white
+          hover: isDarkMode ? '#1f2937' : '#f9fafb', // slightly lighter dark : bg-gray-50  
+          dragOver: isDarkMode ? '#1e3a8a33' : '#dbeafe', // bg-blue-900/20 : bg-blue-50
+        };
+        
+        let currentBg = rowBackgrounds.normal;
+        if (isOver && !isDragging) {
+          currentBg = rowBackgrounds.dragOver;
+        }
+        // Note: hover state is handled by CSS, so we'll use a CSS custom property
+        
+        return (
+          <React.Fragment key={column.id}>
+            {renderColumn(column.id, column.width, column.isSticky, index, currentBg, rowBackgrounds)}
+          </React.Fragment>
+        );
+      })}
     </div>
   );
 });
diff --git a/worklenz-frontend/src/components/task-list-v2/TaskTimeTracking.tsx b/worklenz-frontend/src/components/task-list-v2/TaskTimeTracking.tsx
index 3bb44f574..77094d670 100644
--- a/worklenz-frontend/src/components/task-list-v2/TaskTimeTracking.tsx
+++ b/worklenz-frontend/src/components/task-list-v2/TaskTimeTracking.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import TaskTimer from '@/components/taskListCommon/task-timer/task-timer';
-import { useTaskTimer } from '@/hooks/useTaskTimer';
+import { useTaskTimerWithConflictCheck } from '@/hooks/useTaskTimerWithConflictCheck';
 
 interface TaskTimeTrackingProps {
   taskId: string;
@@ -8,7 +8,7 @@ interface TaskTimeTrackingProps {
 }
 
 const TaskTimeTracking: React.FC<TaskTimeTrackingProps> = React.memo(({ taskId, isDarkMode }) => {
-  const { started, timeString, handleStartTimer, handleStopTimer } = useTaskTimer(
+  const { started, timeString, handleStartTimer, handleStopTimer } = useTaskTimerWithConflictCheck(
     taskId,
     null // The hook will get the timer start time from Redux
   );
diff --git a/worklenz-frontend/src/components/task-list-v2/components/TaskContextMenu.tsx b/worklenz-frontend/src/components/task-list-v2/components/TaskContextMenu.tsx
index 3509f6c9d..90019757a 100644
--- a/worklenz-frontend/src/components/task-list-v2/components/TaskContextMenu.tsx
+++ b/worklenz-frontend/src/components/task-list-v2/components/TaskContextMenu.tsx
@@ -32,6 +32,8 @@ import {
   RetweetOutlined,
   UserAddOutlined,
   LoadingOutlined,
+  CopyOutlined,
+  message,
 } from '@/shared/antd-imports';
 
 interface TaskContextMenuProps {
@@ -325,6 +327,21 @@ const TaskContextMenu: React.FC<TaskContextMenuProps> = ({
     }
   }, [task?.id, projectId, dispatch, onClose]);
 
+  const handleCopyLink = useCallback(async () => {
+    if (!projectId || !task.id) return;
+
+    try {
+      const taskLink = `${window.location.origin}/worklenz/projects/${projectId}?tab=tasks-list&pinned_tab=tasks-list&task=${task.id}`;
+      await navigator.clipboard.writeText(taskLink);
+      message.success(t('contextMenu.linkCopied'));
+    } catch (error) {
+      logger.error('Error copying link:', error);
+      message.error(t('contextMenu.linkCopyFailed'));
+    } finally {
+      onClose();
+    }
+  }, [projectId, task.id, onClose, t]);
+
   const menuItems = useMemo(() => {
     const items = [
       {
@@ -344,6 +361,18 @@ const TaskContextMenu: React.FC<TaskContextMenuProps> = ({
           </button>
         ),
       },
+      {
+        key: 'copyLink',
+        label: (
+          <button
+            onClick={handleCopyLink}
+            className="flex items-center gap-2 px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 w-full text-left"
+          >
+            <CopyOutlined className="text-gray-500 dark:text-gray-400" />
+            <span>{t('contextMenu.copyLink')}</span>
+          </button>
+        ),
+      },
     ];
 
     // Add Move To submenu if there are options
@@ -500,6 +529,7 @@ const TaskContextMenu: React.FC<TaskContextMenuProps> = ({
     handleArchive,
     handleDelete,
     handleConvertToTask,
+    handleCopyLink,
     getMoveToOptions,
     dispatch,
     t,
diff --git a/worklenz-frontend/src/components/task-list-v2/components/TaskRowColumns.tsx b/worklenz-frontend/src/components/task-list-v2/components/TaskRowColumns.tsx
index c5fdadd11..3681140e5 100644
--- a/worklenz-frontend/src/components/task-list-v2/components/TaskRowColumns.tsx
+++ b/worklenz-frontend/src/components/task-list-v2/components/TaskRowColumns.tsx
@@ -364,7 +364,7 @@ interface ReporterColumnProps {
 export const ReporterColumn: React.FC<ReporterColumnProps> = memo(({ width, reporter }) => (
   <div className="flex items-center justify-center px-2 border-r border-gray-200 dark:border-gray-700" style={{ width }}>
     {reporter ? (
-      <span className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">{reporter}</span>
+      <span className="text-sm text-gray-500 dark:text-gray-400 truncate" title={reporter}>{reporter}</span>
     ) : (
       <span className="text-sm text-gray-400 dark:text-gray-500 whitespace-nowrap">-</span>
     )}
diff --git a/worklenz-frontend/src/components/task-list-v2/hooks/useDragAndDrop.ts b/worklenz-frontend/src/components/task-list-v2/hooks/useDragAndDrop.ts
index 4a5b8848b..f451931c0 100644
--- a/worklenz-frontend/src/components/task-list-v2/hooks/useDragAndDrop.ts
+++ b/worklenz-frontend/src/components/task-list-v2/hooks/useDragAndDrop.ts
@@ -19,10 +19,11 @@ export const useDragAndDrop = (allTasks: Task[], groups: TaskGroup[]) => {
   const currentSession = useAuthService().getCurrentSession();
   const [activeId, setActiveId] = useState<string | null>(null);
   const [overId, setOverId] = useState<string | null>(null);
+  const [dropPosition, setDropPosition] = useState<'before' | 'after' | null>(null);
 
-  // Helper function to emit socket event for persistence
+  // Helper function to emit socket event for persistence (within-group only)
   const emitTaskSortChange = useCallback(
-    (taskId: string, sourceGroup: TaskGroup, targetGroup: TaskGroup, insertIndex: number) => {
+    (taskId: string, group: TaskGroup, insertIndex: number) => {
       if (!socket || !connected || !projectId) {
         logger.warning('Socket not connected or missing project ID');
         return;
@@ -40,54 +41,30 @@ export const useDragAndDrop = (allTasks: Task[], groups: TaskGroup[]) => {
       // Use new bulk update approach - recalculate ALL task orders to prevent duplicates
       const taskUpdates: any[] = [];
       
-      // Create a copy of all groups and perform the move operation
-      const updatedGroups = groups.map(group => ({
-        ...group,
-        taskIds: [...group.taskIds]
+      // Create a copy of all groups
+      const updatedGroups = groups.map(g => ({
+        ...g,
+        taskIds: [...g.taskIds]
       }));
       
-      // Find the source and target groups in our copy
-      const sourceGroupCopy = updatedGroups.find(g => g.id === sourceGroup.id)!;
-      const targetGroupCopy = updatedGroups.find(g => g.id === targetGroup.id)!;
+      // Find the group in our copy
+      const groupCopy = updatedGroups.find(g => g.id === group.id)!;
       
-      if (sourceGroup.id === targetGroup.id) {
-        // Same group - reorder within the group
-        const sourceIndex = sourceGroupCopy.taskIds.indexOf(taskId);
-        // Remove task from old position
-        sourceGroupCopy.taskIds.splice(sourceIndex, 1);
-        // Insert at new position
-        sourceGroupCopy.taskIds.splice(insertIndex, 0, taskId);
-      } else {
-        // Different groups - move task between groups
-        // Remove from source group
-        const sourceIndex = sourceGroupCopy.taskIds.indexOf(taskId);
-        sourceGroupCopy.taskIds.splice(sourceIndex, 1);
-        
-        // Add to target group
-        targetGroupCopy.taskIds.splice(insertIndex, 0, taskId);
-      }
+      // Reorder within the group
+      const sourceIndex = groupCopy.taskIds.indexOf(taskId);
+      // Remove task from old position
+      groupCopy.taskIds.splice(sourceIndex, 1);
+      // Insert at new position
+      groupCopy.taskIds.splice(insertIndex, 0, taskId);
       
       // Now assign sequential sort orders to ALL tasks across ALL groups
       let currentSortOrder = 0;
-      updatedGroups.forEach(group => {
-        group.taskIds.forEach(id => {
-          const update: any = {
+      updatedGroups.forEach(grp => {
+        grp.taskIds.forEach(id => {
+          taskUpdates.push({
             task_id: id,
             sort_order: currentSortOrder
-          };
-          
-          // Add group-specific fields for the moved task if it changed groups
-          if (id === taskId && sourceGroup.id !== targetGroup.id) {
-            if (currentGrouping === 'status') {
-              update.status_id = targetGroup.id;
-            } else if (currentGrouping === 'priority') {
-              update.priority_id = targetGroup.id;
-            } else if (currentGrouping === 'phase') {
-              update.phase_id = targetGroup.id;
-            }
-          }
-          
-          taskUpdates.push(update);
+          });
           currentSortOrder++;
         });
       });
@@ -96,8 +73,8 @@ export const useDragAndDrop = (allTasks: Task[], groups: TaskGroup[]) => {
         project_id: projectId,
         group_by: currentGrouping || 'status',
         task_updates: taskUpdates,
-        from_group: sourceGroup.id,
-        to_group: targetGroup.id,
+        from_group: group.id,
+        to_group: group.id,
         task: {
           id: task.id,
           project_id: projectId,
@@ -108,32 +85,6 @@ export const useDragAndDrop = (allTasks: Task[], groups: TaskGroup[]) => {
       };
 
       socket.emit(SocketEvents.TASK_SORT_ORDER_CHANGE.toString(), socketData);
-
-      // Also emit the specific grouping field change event for the moved task
-      if (sourceGroup.id !== targetGroup.id) {
-        if (currentGrouping === 'phase') {
-          // Emit phase change event
-          socket.emit(SocketEvents.TASK_PHASE_CHANGE.toString(), {
-            task_id: taskId,
-            phase_id: targetGroup.id,
-            parent_task: task.parent_task_id || null,
-          });
-        } else if (currentGrouping === 'priority') {
-          // Emit priority change event
-          socket.emit(SocketEvents.TASK_PRIORITY_CHANGE.toString(), JSON.stringify({
-            task_id: taskId,
-            priority_id: targetGroup.id,
-            team_id: teamId,
-          }));
-        } else if (currentGrouping === 'status') {
-          // Emit status change event
-          socket.emit(SocketEvents.TASK_STATUS_CHANGE.toString(), JSON.stringify({
-            task_id: taskId,
-            status_id: targetGroup.id,
-            team_id: teamId,
-          }));
-        }
-      }
     },
     [socket, connected, projectId, allTasks, groups, currentGrouping, currentSession]
   );
@@ -148,32 +99,38 @@ export const useDragAndDrop = (allTasks: Task[], groups: TaskGroup[]) => {
 
       if (!over) {
         setOverId(null);
+        setDropPosition(null);
         return;
       }
 
-      const activeId = active.id;
-      const overId = over.id;
-
-      // Set the overId for drop indicators
-      setOverId(overId as string);
-
-      // Find the active task and the item being dragged over
-      const activeTask = allTasks.find(task => task.id === activeId);
-      if (!activeTask) return;
-
-      // Check if we're dragging over a task or a group
-      const overTask = allTasks.find(task => task.id === overId);
-      const overGroup = groups.find(group => group.id === overId);
-
-      // Find the groups
-      const activeGroup = groups.find(group => group.taskIds.includes(activeTask.id));
-      let targetGroup = overGroup;
-
-      if (overTask) {
-        targetGroup = groups.find(group => group.taskIds.includes(overTask.id));
+      const activeTask = allTasks.find(task => task.id === active.id);
+      const overTask = allTasks.find(task => task.id === over.id);
+      
+      if (activeTask && overTask) {
+        const activeGroup = groups.find(group => group.taskIds.includes(activeTask.id));
+        const overGroup = groups.find(group => group.taskIds.includes(overTask.id));
+        
+        // Only set overId if both tasks are in the same group
+        if (activeGroup && overGroup && activeGroup.id === overGroup.id) {
+          setOverId(over.id as string);
+          
+          // Calculate drop position based on task indices
+          const activeIndex = activeGroup.taskIds.indexOf(activeTask.id);
+          const overIndex = activeGroup.taskIds.indexOf(overTask.id);
+          
+          if (activeIndex < overIndex) {
+            setDropPosition('after');
+          } else {
+            setDropPosition('before');
+          }
+        } else {
+          setOverId(null);
+          setDropPosition(null);
+        }
+      } else {
+        setOverId(null);
+        setDropPosition(null);
       }
-
-      if (!activeGroup || !targetGroup) return;
     },
     [allTasks, groups]
   );
@@ -183,6 +140,7 @@ export const useDragAndDrop = (allTasks: Task[], groups: TaskGroup[]) => {
       const { active, over } = event;
       setActiveId(null);
       setOverId(null);
+      setDropPosition(null);
 
       if (!over || active.id === over.id) {
         return;
@@ -198,86 +156,50 @@ export const useDragAndDrop = (allTasks: Task[], groups: TaskGroup[]) => {
         return;
       }
 
-      // Find the groups
+      // Find the active task's group
       const activeGroup = groups.find(group => group.taskIds.includes(activeTask.id));
       if (!activeGroup) {
         logger.error('Could not find active group for task:', activeId);
         return;
       }
 
-      // Check if we're dropping on a task, group, or empty group
+      // Only allow dropping on tasks in the same group
       const overTask = allTasks.find(task => task.id === overId);
-      const overGroup = groups.find(group => group.id === overId);
-      
-      // Check if dropping on empty group drop zone
-      const isEmptyGroupDrop = typeof overId === 'string' && overId.startsWith('empty-group-');
-      const emptyGroupId = isEmptyGroupDrop ? overId.replace('empty-group-', '') : null;
-      const emptyGroup = emptyGroupId ? groups.find(group => group.id === emptyGroupId) : null;
-
-      let targetGroup = overGroup || emptyGroup;
-      let insertIndex = 0;
-
-      if (overTask) {
-        // Dropping on a task
-        targetGroup = groups.find(group => group.taskIds.includes(overTask.id));
-        if (targetGroup) {
-          insertIndex = targetGroup.taskIds.indexOf(overTask.id);
-        }
-      } else if (overGroup) {
-        // Dropping on a group (at the end)
-        targetGroup = overGroup;
-        insertIndex = targetGroup.taskIds.length;
-      } else if (emptyGroup) {
-        // Dropping on an empty group
-        targetGroup = emptyGroup;
-        insertIndex = 0; // First position in empty group
+      if (!overTask) {
+        return;
       }
 
-      if (!targetGroup) {
-        logger.error('Could not find target group');
+      const overGroup = groups.find(group => group.taskIds.includes(overTask.id));
+      if (!overGroup || overGroup.id !== activeGroup.id) {
         return;
       }
 
-      const isCrossGroup = activeGroup.id !== targetGroup.id;
       const activeIndex = activeGroup.taskIds.indexOf(activeTask.id);
+      const overIndex = activeGroup.taskIds.indexOf(overTask.id);
 
-      if (isCrossGroup) {
-        // Moving task between groups
-        console.log('Moving task between groups:', {
-          task: activeTask.name || activeTask.title,
-          from: activeGroup.title,
-          to: targetGroup.title,
-          newPosition: insertIndex,
-        });
-
-        // reorderTasksInGroup handles both same-group and cross-group moves
-        // No need for separate moveTaskBetweenGroups call
+      if (activeIndex !== overIndex) {
+        // Reorder task within same group
         dispatch(
           reorderTasksInGroup({
             sourceTaskId: activeId as string,
-            destinationTaskId: over.id as string,
+            destinationTaskId: overId as string,
             sourceGroupId: activeGroup.id,
-            destinationGroupId: targetGroup.id,
+            destinationGroupId: activeGroup.id,
           })
         );
 
-        // Emit socket event for persistence
-        emitTaskSortChange(activeId as string, activeGroup, targetGroup, insertIndex);
-      } else {
-        if (activeIndex !== insertIndex) {
-          // Reorder task within same group at drop position
-          dispatch(
-            reorderTasksInGroup({
-              sourceTaskId: activeId as string,
-              destinationTaskId: over.id as string,
-              sourceGroupId: activeGroup.id,
-              destinationGroupId: activeGroup.id,
-            })
-          );
-
-          // Emit socket event for persistence
-          emitTaskSortChange(activeId as string, activeGroup, targetGroup, insertIndex);
+        // Calculate the final index after reordering for socket emission
+        let finalIndex = overIndex;
+        if (activeIndex < overIndex) {
+          // When dragging down, the task ends up just after the destination
+          finalIndex = overIndex;
+        } else {
+          // When dragging up, the task ends up at the destination position
+          finalIndex = overIndex;
         }
+
+        // Emit socket event for persistence
+        emitTaskSortChange(activeId as string, activeGroup, finalIndex);
       }
     },
     [allTasks, groups, dispatch, emitTaskSortChange]
@@ -286,6 +208,7 @@ export const useDragAndDrop = (allTasks: Task[], groups: TaskGroup[]) => {
   return {
     activeId,
     overId,
+    dropPosition,
     handleDragStart,
     handleDragOver,
     handleDragEnd,
diff --git a/worklenz-frontend/src/components/task-list-v2/hooks/useTaskRowColumns.tsx b/worklenz-frontend/src/components/task-list-v2/hooks/useTaskRowColumns.tsx
index 6359deb3f..38e61c192 100644
--- a/worklenz-frontend/src/components/task-list-v2/hooks/useTaskRowColumns.tsx
+++ b/worklenz-frontend/src/components/task-list-v2/hooks/useTaskRowColumns.tsx
@@ -90,17 +90,39 @@ export const useTaskRowColumns = ({
   depth = 0,
 }: UseTaskRowColumnsProps) => {
   
-  const renderColumn = useCallback((columnId: string, width: string, isSticky?: boolean, index?: number) => {
-    switch (columnId) {
-      case 'dragHandle':
-        return (
-          <DragHandleColumn
-            width={width}
-            isSubtask={isSubtask}
-            attributes={attributes}
-            listeners={listeners}
-          />
-        );
+  const renderColumn = useCallback((columnId: string, width: string, isSticky?: boolean, index?: number, currentBg?: string, rowBackgrounds?: any) => {
+    // Calculate left position for sticky columns
+    let leftPosition = 0;
+    if (isSticky && typeof index === 'number') {
+      for (let i = 0; i < index; i++) {
+        const prevColumn = visibleColumns[i];
+        if (prevColumn.isSticky) {
+          leftPosition += parseInt(prevColumn.width.replace('px', ''));
+        }
+      }
+    }
+
+    // Create wrapper style for sticky positioning
+    const wrapperStyle = isSticky ? {
+      position: 'sticky' as const,
+      left: leftPosition,
+      zIndex: 5, // Lower than header but above regular content
+      backgroundColor: currentBg || (isDarkMode ? '#1e1e1e' : '#ffffff'), // Use dynamic background or fallback
+      overflow: 'hidden', // Prevent content from spilling over
+      width: width, // Ensure the wrapper respects column width
+    } : {};
+
+    const renderColumnContent = () => {
+      switch (columnId) {
+        case 'dragHandle':
+          return (
+            <DragHandleColumn
+              width={width}
+              isSubtask={isSubtask}
+              attributes={attributes}
+              listeners={listeners}
+            />
+          );
 
       case 'checkbox':
         return (
@@ -294,7 +316,27 @@ export const useTaskRowColumns = ({
           );
         }
         return null;
+      }
+    };
+
+    // Wrap content with sticky positioning if needed
+    const content = renderColumnContent();
+    if (isSticky) {
+      const hoverBg = rowBackgrounds?.hover || (isDarkMode ? '#2a2a2a' : '#f9fafb');
+      return (
+        <div 
+          style={{
+            ...wrapperStyle,
+            '--hover-bg': hoverBg,
+          } as React.CSSProperties}
+          className="border-r border-gray-200 dark:border-gray-700 overflow-hidden sticky-column-hover hover:bg-[var(--hover-bg)]"
+        >
+          {content}
+        </div>
+      );
     }
+    
+    return content;
   }, [
     task,
     projectId,
@@ -319,6 +361,7 @@ export const useTaskRowColumns = ({
     handleTaskNameEdit,
     attributes,
     listeners,
+    depth,
   ]);
 
   return { renderColumn };
diff --git a/worklenz-frontend/src/components/task-management/improved-task-filters.tsx b/worklenz-frontend/src/components/task-management/improved-task-filters.tsx
index bde1aee6c..80e2d91c4 100644
--- a/worklenz-frontend/src/components/task-management/improved-task-filters.tsx
+++ b/worklenz-frontend/src/components/task-management/improved-task-filters.tsx
@@ -14,6 +14,8 @@ import {
   EyeOutlined,
   InboxOutlined,
   CheckOutlined,
+  SortAscendingOutlined,
+  SortDescendingOutlined,
 } from '@/shared/antd-imports';
 import { RootState } from '@/app/store';
 import { useAppSelector } from '@/hooks/useAppSelector';
@@ -30,6 +32,12 @@ import {
   setArchived as setTaskManagementArchived,
   toggleArchived as toggleTaskManagementArchived,
   selectArchived,
+  setSort,
+  setSortField,
+  setSortOrder,
+  selectSort,
+  selectSortField,
+  selectSortOrder,
 } from '@/features/task-management/task-management.slice';
 import {
   setCurrentGrouping,
@@ -44,11 +52,13 @@ import {
   setLabels,
   setSearch,
   setPriorities,
+  setFields,
 } from '@/features/tasks/tasks.slice';
 import { getTeamMembers } from '@/features/team-members/team-members.slice';
 import { ITaskPriority } from '@/types/tasks/taskPriority.types';
 import { ITaskListColumn } from '@/types/tasks/taskList.types';
 import { IGroupBy } from '@/features/tasks/tasks.slice';
+import { ITaskListSortableColumn } from '@/types/tasks/taskListFilters.types';
 // --- Enhanced Kanban imports ---
 import {
   setGroupBy as setKanbanGroupBy,
@@ -84,6 +94,12 @@ const FILTER_DEBOUNCE_DELAY = 300; // ms
 const SEARCH_DEBOUNCE_DELAY = 500; // ms
 const MAX_FILTER_OPTIONS = 100;
 
+// Sort order enum
+enum SORT_ORDER {
+  ASCEND = 'ascend',
+  DESCEND = 'descend',
+}
+
  // Limit options to prevent UI lag
 
 // Optimized selectors with proper transformation logic
@@ -740,6 +756,192 @@ const SearchFilter: React.FC<{
   );
 };
 
+// Sort Dropdown Component - Simplified version using task-management slice
+const SortDropdown: React.FC<{ themeClasses: any; isDarkMode: boolean }> = ({
+  themeClasses,
+  isDarkMode,
+}) => {
+  const { t } = useTranslation('task-list-filters');
+  const dispatch = useAppDispatch();
+  const { projectId } = useAppSelector(state => state.projectReducer);
+  
+  // Get current sort state from task-management slice
+  const currentSortField = useAppSelector(selectSortField);
+  const currentSortOrder = useAppSelector(selectSortOrder);
+
+  const [open, setOpen] = React.useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  // Close dropdown on outside click
+  React.useEffect(() => {
+    if (!open) return;
+    const handleClick = (e: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClick);
+    return () => document.removeEventListener('mousedown', handleClick);
+  }, [open]);
+
+  const sortFieldsList = [
+    { label: t('taskText'), key: 'name' },
+    { label: t('statusText'), key: 'status' },
+    { label: t('priorityText'), key: 'priority' },
+    { label: t('startDateText'), key: 'start_date' },
+    { label: t('endDateText'), key: 'end_date' },
+    { label: t('completedDateText'), key: 'completed_at' },
+    { label: t('createdDateText'), key: 'created_at' },
+    { label: t('lastUpdatedText'), key: 'updated_at' },
+  ];
+
+  const handleSortFieldChange = (fieldKey: string) => {
+    // If clicking the same field, toggle order, otherwise set new field with ASC
+    if (currentSortField === fieldKey) {
+      const newOrder = currentSortOrder === 'ASC' ? 'DESC' : 'ASC';
+      dispatch(setSort({ field: fieldKey, order: newOrder }));
+    } else {
+      dispatch(setSort({ field: fieldKey, order: 'ASC' }));
+    }
+    
+    // Fetch updated tasks
+    if (projectId) {
+      dispatch(fetchTasksV3(projectId));
+    }
+    
+    setOpen(false);
+  };
+
+  const clearSort = () => {
+    dispatch(setSort({ field: '', order: 'ASC' }));
+    if (projectId) {
+      dispatch(fetchTasksV3(projectId));
+    }
+  };
+
+  const isActive = currentSortField !== '';
+  const currentFieldLabel = sortFieldsList.find(f => f.key === currentSortField)?.label;
+  const orderText = currentSortOrder === 'ASC' ? t('ascendingOrder') : t('descendingOrder');
+
+  return (
+    <div className="relative" ref={dropdownRef}>
+      {/* Trigger Button - matching FilterDropdown style */}
+      <button
+        onClick={() => setOpen(!open)}
+        title={
+          isActive
+            ? t('currentSort', { field: currentFieldLabel, order: orderText })
+            : t('sortText')
+        }
+        className={`
+          inline-flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium rounded-md
+          border transition-all duration-200 ease-in-out
+          ${
+            isActive
+              ? isDarkMode
+                ? 'bg-gray-600 text-white border-gray-500'
+                : 'bg-gray-200 text-gray-800 border-gray-300 font-semibold'
+              : `${themeClasses.buttonBg} ${themeClasses.buttonBorder} ${themeClasses.buttonText}`
+          }
+          hover:shadow-sm focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2
+          ${isDarkMode ? 'focus:ring-offset-gray-900' : 'focus:ring-offset-white'}
+        `}
+        aria-expanded={open}
+        aria-haspopup="true"
+      >
+        {currentSortOrder === 'ASC' ? (
+          <SortAscendingOutlined className="w-3.5 h-3.5" />
+        ) : (
+          <SortDescendingOutlined className="w-3.5 h-3.5" />
+        )}
+        <span className="hidden sm:inline">{t('sortText')}</span>
+        {isActive && currentFieldLabel && (
+          <span className={`text-xs ${isDarkMode ? 'text-gray-300' : 'text-gray-600'} max-w-16 truncate hidden md:inline`}>
+            {currentFieldLabel}
+          </span>
+        )}
+        <DownOutlined
+          className={`w-3.5 h-3.5 transition-transform duration-200 ${open ? 'rotate-180' : ''}`}
+        />
+      </button>
+
+      {/* Dropdown Panel - matching FilterDropdown style */}
+      {open && (
+        <div
+          className={`absolute top-full left-0 z-50 mt-1 w-64 ${themeClasses.dropdownBg} rounded-md shadow-sm border ${themeClasses.dropdownBorder}`}
+        >
+          {/* Clear Sort Option */}
+          {isActive && (
+            <div className={`p-2 border-b ${themeClasses.dividerBorder}`}>
+              <button
+                onClick={clearSort}
+                className={`w-full text-left px-2 py-1.5 text-xs rounded transition-colors duration-150 ${themeClasses.optionText} ${themeClasses.optionHover}`}
+              >
+                {t('clearSort')}
+              </button>
+            </div>
+          )}
+          
+          {/* Options List */}
+          <div className="max-h-48 overflow-y-auto">
+            <div className="p-0.5">
+              {sortFieldsList.map(sortField => {
+                const isSelected = currentSortField === sortField.key;
+
+                return (
+                  <button
+                    key={sortField.key}
+                    onClick={() => handleSortFieldChange(sortField.key)}
+                    className={`
+                      w-full flex items-center justify-between gap-2 px-2 py-1.5 text-xs rounded
+                      transition-colors duration-150 text-left
+                      ${
+                        isSelected
+                          ? isDarkMode
+                            ? 'bg-gray-600 text-white'
+                            : 'bg-gray-200 text-gray-800 font-semibold'
+                          : `${themeClasses.optionText} ${themeClasses.optionHover}`
+                      }
+                    `}
+                    title={
+                      isSelected 
+                        ? t('currentSort', { 
+                            field: sortField.label, 
+                            order: orderText 
+                          }) + ` - ${t('sortDescending')}`
+                        : t('sortByField', { field: sortField.label }) + ` - ${t('sortAscending')}`
+                    }
+                  >
+                    <div className="flex items-center gap-2">
+                      <span className="truncate">{sortField.label}</span>
+                      {isSelected && (
+                        <span className={`text-xs ${isDarkMode ? 'text-gray-300' : 'text-gray-600'}`}>
+                          ({orderText})
+                        </span>
+                      )}
+                    </div>
+                    <div className="flex items-center gap-1">
+                      {isSelected ? (
+                        currentSortOrder === 'ASC' ? (
+                          <SortAscendingOutlined className="w-3.5 h-3.5" />
+                        ) : (
+                          <SortDescendingOutlined className="w-3.5 h-3.5" />
+                        )
+                      ) : (
+                        <SortAscendingOutlined className="w-3.5 h-3.5 opacity-50" />
+                      )}
+                    </div>
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
 const LOCAL_STORAGE_KEY = 'worklenz.taskManagement.fields';
 
 const FieldsDropdown: React.FC<{ themeClasses: any; isDarkMode: boolean }> = ({
@@ -1050,14 +1252,20 @@ const ImprovedTaskFilters: React.FC<ImprovedTaskFiltersProps> = ({ position, cla
     };
   }, [dispatch, projectView]);
 
+  // Get sort fields for active count calculation
+  const sortFields = useAppSelector(state => state.taskReducer.fields);
+  const taskManagementSortField = useAppSelector(selectSortField);
+
   // Calculate active filters count - memoized to prevent unnecessary recalculations
   const calculatedActiveFiltersCount = useMemo(() => {
     const count = filterSections.reduce(
       (acc, section) => (section.id === 'groupBy' ? acc : acc + section.selectedValues.length),
       0
     );
-    return count + (searchValue ? 1 : 0);
-  }, [filterSections, searchValue]);
+    const sortFieldsCount = position === 'list' ? sortFields.length : 0;
+    const taskManagementSortCount = position === 'list' && taskManagementSortField ? 1 : 0;
+    return count + (searchValue ? 1 : 0) + sortFieldsCount + taskManagementSortCount;
+  }, [filterSections, searchValue, sortFields, taskManagementSortField, position]);
 
   useEffect(() => {
     if (activeFiltersCount !== calculatedActiveFiltersCount) {
@@ -1231,6 +1439,12 @@ const ImprovedTaskFilters: React.FC<ImprovedTaskFiltersProps> = ({ position, cla
         // Clear priority filters
         dispatch(setPriorities([]));
 
+        // Clear sort fields
+        dispatch(setFields([]));
+
+        // Clear sort from task-management slice
+        dispatch(setSort({ field: '', order: 'ASC' }));
+
         // Clear archived state based on position
         if (position === 'list') {
           dispatch(setTaskManagementArchived(false));
@@ -1276,9 +1490,9 @@ const ImprovedTaskFilters: React.FC<ImprovedTaskFiltersProps> = ({ position, cla
     <div
       className={`${themeClasses.containerBg} border ${themeClasses.containerBorder} rounded-md p-1.5 shadow-sm ${className}`}
     >
-      <div className="flex flex-wrap items-center gap-2">
+      <div className="flex flex-wrap items-center justify-between gap-2 min-h-[36px]">
         {/* Left Section - Main Filters */}
-        <div className="flex flex-wrap items-center gap-2">
+        <div className="flex flex-wrap items-center gap-2 flex-1 min-w-0">
           {/* Search */}
           <SearchFilter
             value={searchValue}
@@ -1287,6 +1501,11 @@ const ImprovedTaskFilters: React.FC<ImprovedTaskFiltersProps> = ({ position, cla
             themeClasses={themeClasses}
           />
 
+          {/* Sort Filter Button (for list view) - appears after search */}
+          {position === 'list' && (
+            <SortDropdown themeClasses={themeClasses} isDarkMode={isDarkMode} />
+          )}
+
           {/* Filter Dropdowns - Only render when data is loaded */}
           {isDataLoaded ? (
             filterSectionsData.map(section => (
@@ -1316,7 +1535,7 @@ const ImprovedTaskFilters: React.FC<ImprovedTaskFiltersProps> = ({ position, cla
         </div>
 
         {/* Right Section - Additional Controls */}
-        <div className="flex items-center gap-2 ml-auto">
+        <div className="flex flex-wrap items-center gap-2 ml-auto min-w-0 shrink-0">
           {/* Active Filters Indicator */}
           {activeFiltersCount > 0 && (
             <div className="flex items-center gap-1.5">
diff --git a/worklenz-frontend/src/components/task-management/task-status-dropdown.tsx b/worklenz-frontend/src/components/task-management/task-status-dropdown.tsx
index 302367c06..bf298154b 100644
--- a/worklenz-frontend/src/components/task-management/task-status-dropdown.tsx
+++ b/worklenz-frontend/src/components/task-management/task-status-dropdown.tsx
@@ -8,6 +8,8 @@ import { Task } from '@/types/task-management.types';
 import {
   updateTask,
   selectCurrentGroupingV3,
+  selectGroups,
+  moveTaskBetweenGroups,
 } from '@/features/task-management/task-management.slice';
 
 interface TaskStatusDropdownProps {
@@ -30,6 +32,7 @@ const TaskStatusDropdown: React.FC<TaskStatusDropdownProps> = ({
 
   const statusList = useAppSelector(state => state.taskStatusReducer.status);
   const currentGroupingV3 = useAppSelector(selectCurrentGroupingV3);
+  const groups = useAppSelector(selectGroups);
 
   // Find current status details
   const currentStatus = useMemo(() => {
@@ -44,21 +47,53 @@ const TaskStatusDropdown: React.FC<TaskStatusDropdownProps> = ({
     (statusId: string, statusName: string) => {
       if (!task.id || !statusId || !connected) return;
 
-      console.log('🎯 Status change initiated:', { taskId: task.id, statusId, statusName });
+      // Optimistic update: immediately update the task status in Redux for instant feedback
+      const updatedTask = {
+        ...task,
+        status: statusId,
+        updatedAt: new Date().toISOString(),
+      };
+      dispatch(updateTask(updatedTask));
 
+      // Handle group movement if grouping by status
+      if (currentGroupingV3 === 'status' && groups && groups.length > 0) {
+        // Find current group containing the task
+        const currentGroup = groups.find(group => group.taskIds.includes(task.id));
+        
+        // Find target group based on the new status ID
+        let targetGroup = groups.find(group => group.id === statusId);
+        
+        // If not found by status ID, try matching with group value
+        if (!targetGroup) {
+          targetGroup = groups.find(group => group.groupValue === statusId);
+        }
+
+        if (currentGroup && targetGroup && currentGroup.id !== targetGroup.id) {
+          // Move task between groups immediately for instant feedback
+          dispatch(
+            moveTaskBetweenGroups({
+              taskId: task.id,
+              sourceGroupId: currentGroup.id,
+              targetGroupId: targetGroup.id,
+            })
+          );
+        }
+      }
+
+      // Emit socket event for server-side update and real-time sync
       socket?.emit(
         SocketEvents.TASK_STATUS_CHANGE.toString(),
         JSON.stringify({
           task_id: task.id,
           status_id: statusId,
-          parent_task: null, // Assuming top-level tasks for now
-          team_id: projectId, // Using projectId as teamId
+          parent_task: task.parent_task_id || null,
+          team_id: projectId,
         })
       );
       socket?.emit(SocketEvents.GET_TASK_PROGRESS.toString(), task.id);
       setIsOpen(false);
     },
-    [task.id, connected, socket, projectId]
+    [task, connected, socket, projectId, dispatch, currentGroupingV3, groups]
   );
 
   // Calculate dropdown position and handle outside clicks
diff --git a/worklenz-frontend/src/components/update-notification/UpdateNotification.tsx b/worklenz-frontend/src/components/update-notification/UpdateNotification.tsx
new file mode 100644
index 000000000..8c3772231
--- /dev/null
+++ b/worklenz-frontend/src/components/update-notification/UpdateNotification.tsx
@@ -0,0 +1,121 @@
+// Update Notification Component
+// Shows a notification when new build is available and provides update options
+
+import React from 'react';
+import { Modal, Button, Space, Typography } from '@/shared/antd-imports';
+import { ReloadOutlined, CloseOutlined, DownloadOutlined } from '@/shared/antd-imports';
+import { useTranslation } from 'react-i18next';
+import { useServiceWorker } from '../../utils/serviceWorkerRegistration';
+
+const { Text, Title } = Typography;
+
+interface UpdateNotificationProps {
+  visible: boolean;
+  onClose: () => void;
+  onUpdate: () => void;
+}
+
+const UpdateNotification: React.FC<UpdateNotificationProps> = ({
+  visible,
+  onClose,
+  onUpdate
+}) => {
+  const { t } = useTranslation('common');
+  const [isUpdating, setIsUpdating] = React.useState(false);
+  const { hardReload } = useServiceWorker();
+
+  const handleUpdate = async () => {
+    setIsUpdating(true);
+    try {
+      if (hardReload) {
+        await hardReload();
+      } else {
+        // Fallback to regular reload
+        window.location.reload();
+      }
+      onUpdate();
+    } catch (error) {
+      console.error('Error during update:', error);
+      // Fallback to regular reload
+      window.location.reload();
+    }
+  };
+
+  const handleLater = () => {
+    onClose();
+  };
+
+  return (
+    <Modal
+      title={
+        <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+          <DownloadOutlined style={{ color: '#1890ff' }} />
+          <Title level={4} style={{ margin: 0, color: '#1890ff' }}>
+            {t('update-available')}
+          </Title>
+        </div>
+      }
+      open={visible}
+      onCancel={handleLater}
+      footer={null}
+      centered
+      closable={false}
+      maskClosable={false}
+      width={460}
+      styles={{
+        body: { padding: '20px 24px' }
+      }}
+    >
+      <div style={{ marginBottom: '20px' }}>
+        <Text style={{ fontSize: '16px', lineHeight: '1.6' }}>
+          {t('update-description')}
+        </Text>
+        <br />
+        <br />
+        <Text style={{ fontSize: '14px', color: '#8c8c8c' }}>
+          {t('update-instruction')}
+        </Text>
+      </div>
+
+      <div style={{ 
+        background: '#f6ffed', 
+        border: '1px solid #b7eb8f', 
+        borderRadius: '6px', 
+        padding: '12px',
+        marginBottom: '20px'
+      }}>
+        <Text style={{ fontSize: '13px', color: '#389e0d' }}>
+          {t('update-whats-new', { 
+            interpolation: { escapeValue: false } 
+          })}
+        </Text>
+      </div>
+
+      <Space 
+        style={{ 
+          width: '100%', 
+          justifyContent: 'flex-end' 
+        }} 
+        size="middle"
+      >
+        <Button
+          icon={<CloseOutlined />}
+          onClick={handleLater}
+          disabled={isUpdating}
+        >
+          {t('update-later')}
+        </Button>
+        <Button
+          type="primary"
+          icon={<ReloadOutlined />}
+          loading={isUpdating}
+          onClick={handleUpdate}
+        >
+          {isUpdating ? t('updating') : t('update-now')}
+        </Button>
+      </Space>
+    </Modal>
+  );
+};
+
+export default UpdateNotification;
\ No newline at end of file
diff --git a/worklenz-frontend/src/components/update-notification/UpdateNotificationProvider.tsx b/worklenz-frontend/src/components/update-notification/UpdateNotificationProvider.tsx
new file mode 100644
index 000000000..180286c9d
--- /dev/null
+++ b/worklenz-frontend/src/components/update-notification/UpdateNotificationProvider.tsx
@@ -0,0 +1,50 @@
+// Update Notification Provider
+// Provides global update notification management
+
+import React from 'react';
+import { useUpdateChecker } from '../../hooks/useUpdateChecker';
+import UpdateNotification from './UpdateNotification';
+
+interface UpdateNotificationProviderProps {
+  children: React.ReactNode;
+  checkInterval?: number;
+  enableAutoCheck?: boolean;
+}
+
+const UpdateNotificationProvider: React.FC<UpdateNotificationProviderProps> = ({
+  children,
+  checkInterval = 5 * 60 * 1000, // 5 minutes
+  enableAutoCheck = true
+}) => {
+  const {
+    showUpdateNotification,
+    setShowUpdateNotification,
+    dismissUpdate
+  } = useUpdateChecker({
+    checkInterval,
+    enableAutoCheck,
+    showNotificationOnUpdate: true
+  });
+
+  const handleClose = () => {
+    dismissUpdate();
+  };
+
+  const handleUpdate = () => {
+    // The hardReload function in UpdateNotification will handle the actual update
+    setShowUpdateNotification(false);
+  };
+
+  return (
+    <>
+      {children}
+      <UpdateNotification
+        visible={showUpdateNotification}
+        onClose={handleClose}
+        onUpdate={handleUpdate}
+      />
+    </>
+  );
+};
+
+export default UpdateNotificationProvider;
\ No newline at end of file
diff --git a/worklenz-frontend/src/components/update-notification/index.ts b/worklenz-frontend/src/components/update-notification/index.ts
new file mode 100644
index 000000000..47ec8d9b9
--- /dev/null
+++ b/worklenz-frontend/src/components/update-notification/index.ts
@@ -0,0 +1,2 @@
+export { default as UpdateNotification } from './UpdateNotification';
+export { default as UpdateNotificationProvider } from './UpdateNotificationProvider';
\ No newline at end of file
diff --git a/worklenz-frontend/src/features/account-setup/account-setup.slice.ts b/worklenz-frontend/src/features/account-setup/account-setup.slice.ts
index 2b79d8475..bf3d17c35 100644
--- a/worklenz-frontend/src/features/account-setup/account-setup.slice.ts
+++ b/worklenz-frontend/src/features/account-setup/account-setup.slice.ts
@@ -1,4 +1,5 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { IAccountSetupSurveyData } from '@/types/account-setup/survey.types';
 
 interface Task {
   id: number;
@@ -17,6 +18,8 @@ interface AccountSetupState {
   tasks: Task[];
   teamMembers: Email[];
   currentStep: number;
+  surveyData: IAccountSetupSurveyData;
+  surveySubStep: number;
 }
 
 const initialState: AccountSetupState = {
@@ -26,6 +29,8 @@ const initialState: AccountSetupState = {
   tasks: [{ id: 0, value: '' }],
   teamMembers: [{ id: 0, value: '' }],
   currentStep: 0,
+  surveyData: {},
+  surveySubStep: 0,
 };
 
 const accountSetupSlice = createSlice({
@@ -50,6 +55,16 @@ const accountSetupSlice = createSlice({
     setCurrentStep: (state, action: PayloadAction<number>) => {
       state.currentStep = action.payload;
     },
+    setSurveyData: (state, action: PayloadAction<Partial<IAccountSetupSurveyData>>) => {
+      state.surveyData = { ...state.surveyData, ...action.payload };
+    },
+    setSurveySubStep: (state, action: PayloadAction<number>) => {
+      state.surveySubStep = action.payload;
+    },
+    resetSurveyData: (state) => {
+      state.surveyData = {};
+      state.surveySubStep = 0;
+    },
     resetAccountSetup: () => initialState,
   },
 });
@@ -61,6 +76,9 @@ export const {
   setTasks,
   setTeamMembers,
   setCurrentStep,
+  setSurveyData,
+  setSurveySubStep,
+  resetSurveyData,
   resetAccountSetup,
 } = accountSetupSlice.actions;
 
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 3ccac5d22..9bbf56940 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/home-page/user-activity.slice.ts b/worklenz-frontend/src/features/home-page/user-activity.slice.ts
new file mode 100644
index 000000000..21bf58764
--- /dev/null
+++ b/worklenz-frontend/src/features/home-page/user-activity.slice.ts
@@ -0,0 +1,59 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { ActivityFeedType } from '@/types/home/user-activity.types';
+
+interface ActivityItem {
+    id: string;
+    type: string;
+    description: string;
+    timestamp: string;
+}
+
+interface UserActivityState {
+    activeTab: ActivityFeedType;
+    activities: ActivityItem[];
+    loading: boolean;
+    error: string | null;
+}
+
+const initialState: UserActivityState = {
+    activeTab: ActivityFeedType.TIME_LOGGED_TASKS,
+    activities: [],
+    loading: false,
+    error: null,
+};
+
+const userActivitySlice = createSlice({
+    name: 'userActivity',
+    initialState,
+    reducers: {
+        setActiveTab(state, action: PayloadAction<ActivityFeedType>) {
+            state.activeTab = action.payload;
+        },
+        fetchActivitiesStart(state) {
+            state.loading = true;
+            state.error = null;
+        },
+        fetchActivitiesSuccess(state, action: PayloadAction<ActivityItem[]>) {
+            state.activities = action.payload;
+            state.loading = false;
+            state.error = null;
+        },
+        fetchActivitiesFailure(state, action: PayloadAction<string>) {
+            state.loading = false;
+            state.error = action.payload;
+        },
+        clearActivities(state) {
+            state.activities = [];
+        },
+    },
+});
+
+export const {
+    setActiveTab,
+    fetchActivitiesStart,
+    fetchActivitiesSuccess,
+    fetchActivitiesFailure,
+    clearActivities,
+} = userActivitySlice.actions;
+
+export default userActivitySlice.reducer;
\ No newline at end of file
diff --git a/worklenz-frontend/src/features/i18n/language-selector.tsx b/worklenz-frontend/src/features/i18n/LanguageSelector.tsx
similarity index 100%
rename from worklenz-frontend/src/features/i18n/language-selector.tsx
rename to worklenz-frontend/src/features/i18n/LanguageSelector.tsx
diff --git a/worklenz-frontend/src/features/navbar/navbar-logo.tsx b/worklenz-frontend/src/features/navbar/NavbarLogo.tsx
similarity index 100%
rename from worklenz-frontend/src/features/navbar/navbar-logo.tsx
rename to worklenz-frontend/src/features/navbar/NavbarLogo.tsx
diff --git a/worklenz-frontend/src/features/navbar/mobileMenu/MobileMenuButton.tsx b/worklenz-frontend/src/features/navbar/mobile-menu/MobileMenuButton.tsx
similarity index 97%
rename from worklenz-frontend/src/features/navbar/mobileMenu/MobileMenuButton.tsx
rename to worklenz-frontend/src/features/navbar/mobile-menu/MobileMenuButton.tsx
index 4b6c382d8..cb1047392 100644
--- a/worklenz-frontend/src/features/navbar/mobileMenu/MobileMenuButton.tsx
+++ b/worklenz-frontend/src/features/navbar/mobile-menu/MobileMenuButton.tsx
@@ -12,7 +12,7 @@ import { useTranslation } from 'react-i18next';
 import { colors } from '../../../styles/colors';
 import { NavLink } from 'react-router-dom';
 import InviteButton from '../invite/InviteButton';
-import SwitchTeamButton from '../switchTeam/SwitchTeamButton';
+import SwitchTeamButton from '../switch-team/SwitchTeamButton';
 // custom css
 import './mobileMenu.css';
 
diff --git a/worklenz-frontend/src/features/navbar/mobileMenu/mobileMenu.css b/worklenz-frontend/src/features/navbar/mobile-menu/mobileMenu.css
similarity index 100%
rename from worklenz-frontend/src/features/navbar/mobileMenu/mobileMenu.css
rename to worklenz-frontend/src/features/navbar/mobile-menu/mobileMenu.css
diff --git a/worklenz-frontend/src/features/navbar/navbar.tsx b/worklenz-frontend/src/features/navbar/navbar.tsx
index 1630c25eb..f663e772b 100644
--- a/worklenz-frontend/src/features/navbar/navbar.tsx
+++ b/worklenz-frontend/src/features/navbar/navbar.tsx
@@ -1,17 +1,17 @@
-import React, { useEffect, useState, useMemo } from 'react';
+import { useEffect, useState, useMemo } from 'react';
 import { Link, useLocation } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { Col, ConfigProvider, Flex, Menu, MenuProps, Alert } from '@/shared/antd-imports';
+import { Col, ConfigProvider, Flex, Menu } from '@/shared/antd-imports';
 import { createPortal } from 'react-dom';
 
 import InviteTeamMembers from '../../components/common/invite-team-members/invite-team-members';
 import InviteButton from './invite/InviteButton';
-import MobileMenuButton from './mobileMenu/MobileMenuButton';
-import NavbarLogo from './navbar-logo';
+import MobileMenuButton from './mobile-menu/MobileMenuButton';
+import NavbarLogo from './NavbarLogo';
 import NotificationButton from '../../components/navbar/notifications/notifications-drawer/notification/notification-button';
-import ProfileButton from './user-profile/profile-button';
-import SwitchTeamButton from './switchTeam/SwitchTeamButton';
-import UpgradePlanButton from './upgradePlan/UpgradePlanButton';
+import ProfileButton from './user-profile/ProfileButton';
+import SwitchTeamButton from './switch-team/SwitchTeamButton';
+import UpgradePlanButton from './upgrade-plan/UpgradePlanButton';
 import NotificationDrawer from '../../components/navbar/notifications/notifications-drawer/notification/notfication-drawer';
 
 import { useResponsive } from '@/hooks/useResponsive';
@@ -21,8 +21,7 @@ import { useAuthService } from '@/hooks/useAuth';
 import { authApiService } from '@/api/auth/auth.api.service';
 import { ISUBSCRIPTION_TYPE } from '@/shared/constants';
 import logger from '@/utils/errorLogger';
-import TimerButton from './timers/timer-button';
-import HelpButton from './help/HelpButton';
+import TimerButton from './timers/TimerButton';
 
 const Navbar = () => {
   const [current, setCurrent] = useState<string>('home');
@@ -35,7 +34,12 @@ const Navbar = () => {
   const authService = useAuthService();
   const [navRoutesList, setNavRoutesList] = useState<NavRoutesType[]>(navRoutes);
   const [isOwnerOrAdmin, setIsOwnerOrAdmin] = useState<boolean>(authService.isOwnerOrAdmin());
-  const showUpgradeTypes = [ISUBSCRIPTION_TYPE.TRIAL];
+  const showUpgradeTypes = [
+    ISUBSCRIPTION_TYPE.TRIAL,
+    ISUBSCRIPTION_TYPE.LIFE_TIME_DEAL,
+    ISUBSCRIPTION_TYPE.PADDLE,
+    ISUBSCRIPTION_TYPE.CUSTOM
+  ];
 
   useEffect(() => {
     authApiService
@@ -153,8 +157,8 @@ const Navbar = () => {
                   <Flex align="center">
                     <SwitchTeamButton />
                     <NotificationButton />
-                    {/* <TimerButton /> */}
-                    <HelpButton />
+                    <TimerButton />
+                    {/* <HelpButton /> */}
                     <ProfileButton isOwnerOrAdmin={isOwnerOrAdmin} />
                   </Flex>
                 </Flex>
diff --git a/worklenz-frontend/src/features/navbar/switchTeam/SwitchTeamButton.tsx b/worklenz-frontend/src/features/navbar/switch-team/SwitchTeamButton.tsx
similarity index 100%
rename from worklenz-frontend/src/features/navbar/switchTeam/SwitchTeamButton.tsx
rename to worklenz-frontend/src/features/navbar/switch-team/SwitchTeamButton.tsx
diff --git a/worklenz-frontend/src/features/navbar/switchTeam/switchTeam.css b/worklenz-frontend/src/features/navbar/switch-team/switchTeam.css
similarity index 100%
rename from worklenz-frontend/src/features/navbar/switchTeam/switchTeam.css
rename to worklenz-frontend/src/features/navbar/switch-team/switchTeam.css
diff --git a/worklenz-frontend/src/features/navbar/timers/timer-button.tsx b/worklenz-frontend/src/features/navbar/timers/TimerButton.tsx
similarity index 95%
rename from worklenz-frontend/src/features/navbar/timers/timer-button.tsx
rename to worklenz-frontend/src/features/navbar/timers/TimerButton.tsx
index 2735c34a9..3a4ea12ba 100644
--- a/worklenz-frontend/src/features/navbar/timers/timer-button.tsx
+++ b/worklenz-frontend/src/features/navbar/timers/TimerButton.tsx
@@ -7,7 +7,7 @@ import { useAppDispatch } from '@/hooks/useAppDispatch';
 import { useSocket } from '@/socket/socketContext';
 import { SocketEvents } from '@/shared/socket-events';
 import { updateTaskTimeTracking } from '@/features/tasks/tasks.slice';
-import moment from 'moment';
+import { format, differenceInSeconds, isValid, parseISO } from 'date-fns';
 
 const { Text } = Typography;
 const { useToken } = theme;
@@ -60,17 +60,17 @@ const TimerButton = () => {
         try {
           if (!timer || !timer.task_id || !timer.start_time) return;
 
-          const startTime = moment(timer.start_time);
-          if (!startTime.isValid()) {
+          const startTime = parseISO(timer.start_time);
+          if (!isValid(startTime)) {
             logError(`Invalid start time for timer ${timer.task_id}: ${timer.start_time}`);
             return;
           }
 
-          const now = moment();
-          const duration = moment.duration(now.diff(startTime));
-          const hours = Math.floor(duration.asHours());
-          const minutes = duration.minutes();
-          const seconds = duration.seconds();
+          const now = new Date();
+          const totalSeconds = differenceInSeconds(now, startTime);
+          const hours = Math.floor(totalSeconds / 3600);
+          const minutes = Math.floor((totalSeconds % 3600) / 60);
+          const seconds = totalSeconds % 60;
           newTimes[timer.task_id] =
             `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
         } catch (error) {
@@ -86,12 +86,7 @@ const TimerButton = () => {
   useEffect(() => {
     fetchRunningTimers();
 
-    // Set up polling to refresh timers every 30 seconds
-    const pollInterval = setInterval(() => {
-      fetchRunningTimers();
-    }, 30000);
-
-    return () => clearInterval(pollInterval);
+    // Removed periodic polling - rely on socket events for real-time updates
   }, [fetchRunningTimers]);
 
   useEffect(() => {
@@ -273,7 +268,7 @@ const TimerButton = () => {
                               <Text type="secondary" style={{ fontSize: 11 }}>
                                 Started:{' '}
                                 {timer.start_time
-                                  ? moment(timer.start_time).format('HH:mm')
+                                  ? format(parseISO(timer.start_time), 'HH:mm')
                                   : '--:--'}
                               </Text>
                               <Text
diff --git a/worklenz-frontend/src/features/navbar/upgrade-plan/UpgradePlanButton.tsx b/worklenz-frontend/src/features/navbar/upgrade-plan/UpgradePlanButton.tsx
new file mode 100644
index 000000000..804d9a9c3
--- /dev/null
+++ b/worklenz-frontend/src/features/navbar/upgrade-plan/UpgradePlanButton.tsx
@@ -0,0 +1,214 @@
+import { Button, Tooltip, Badge } from '@/shared/antd-imports';
+import React, { useEffect, useState } from 'react';
+import { colors } from '../../../styles/colors';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+import { useAppSelector } from '@/hooks/useAppSelector';
+import { useAuthService } from '@/hooks/useAuth';
+import { ISUBSCRIPTION_TYPE } from '@/shared/constants';
+import { CrownOutlined, ClockCircleOutlined, ThunderboltOutlined } from '@ant-design/icons';
+
+const UpgradePlanButton = () => {
+  // localization
+  const { t } = useTranslation('navbar');
+  const { t: tCommon } = useTranslation('common');
+  const navigate = useNavigate();
+  const authService = useAuthService();
+  const [daysRemaining, setDaysRemaining] = useState<number | null>(null);
+
+  const themeMode = useAppSelector(state => state.themeReducer.mode);
+  const currentSession = authService.getCurrentSession();
+
+  useEffect(() => {
+    // Calculate days remaining for expirable subscription types
+    const expirableTypes = [
+      ISUBSCRIPTION_TYPE.TRIAL,
+      ISUBSCRIPTION_TYPE.LIFE_TIME_DEAL,
+      ISUBSCRIPTION_TYPE.PADDLE,
+      ISUBSCRIPTION_TYPE.CUSTOM
+    ];
+
+    if (
+      expirableTypes.includes(currentSession?.subscription_type as ISUBSCRIPTION_TYPE) &&
+      (currentSession?.valid_till_date || currentSession?.trial_expire_date)
+    ) {
+      const today = new Date();
+      const expireDateStr = currentSession.valid_till_date || currentSession.trial_expire_date;
+      const expiryDate = new Date(expireDateStr!);
+      const diffTime = expiryDate.getTime() - today.getTime();
+      const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+      
+      // Show badge if 7 days or less remaining
+      if (diffDays <= 7 && diffDays >= 0) {
+        setDaysRemaining(diffDays);
+      } else {
+        setDaysRemaining(null);
+      }
+    }
+  }, [currentSession]);
+
+  const getBadgeColor = () => {
+    if (daysRemaining === null) return undefined;
+    if (daysRemaining === 0) return '#ff4d4f';
+    if (daysRemaining <= 3) return '#faad14';
+    return '#52c41a';
+  };
+
+  const getBadgeText = () => {
+    if (daysRemaining === null) return '';
+    if (daysRemaining === 0) return tCommon('license-badge-today');
+    return tCommon('license-badge-days', { days: daysRemaining });
+  };
+
+  const getButtonIcon = () => {
+    if (daysRemaining === 0) return <ThunderboltOutlined />;
+    if (daysRemaining !== null && daysRemaining <= 3) return <ClockCircleOutlined />;
+    return <CrownOutlined />;
+  };
+
+  const getButtonStyles = () => {
+    const isDark = themeMode === 'dark';
+    const baseStyles = {
+      padding: '5px 16px',
+      height: '32px',
+      borderRadius: '6px',
+      fontWeight: 500,
+      fontSize: '13px',
+      display: 'flex',
+      alignItems: 'center',
+      gap: '6px',
+      transition: 'all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)',
+      border: 'none',
+      boxShadow: isDark ? '0 2px 4px rgba(0,0,0,0.2)' : '0 2px 4px rgba(0,0,0,0.05)',
+    };
+
+    if (daysRemaining === 0) {
+      return {
+        ...baseStyles,
+        background: 'linear-gradient(135deg, #ff6b6b 0%, #ff4d4f 100%)',
+        color: '#fff',
+      };
+    }
+    
+    if (daysRemaining !== null && daysRemaining <= 3) {
+      return {
+        ...baseStyles,
+        background: 'linear-gradient(135deg, #ffc53d 0%, #faad14 100%)',
+        color: '#fff',
+      };
+    }
+
+    return {
+      ...baseStyles,
+      background: isDark 
+        ? 'linear-gradient(135deg, #d4a574 0%, #b38750 100%)' 
+        : 'linear-gradient(135deg, #fef3d7 0%, #fde8b5 100%)',
+      color: isDark ? '#fff' : '#8b6914',
+    };
+  };
+
+  const button = (
+    <Button
+      style={getButtonStyles()}
+      size="small"
+      type="primary"
+      icon={getButtonIcon()}
+      onClick={() => navigate('/worklenz/admin-center/billing')}
+      onMouseEnter={(e) => {
+        e.currentTarget.style.transform = 'translateY(-2px)';
+        e.currentTarget.style.boxShadow = themeMode === 'dark' 
+          ? '0 4px 8px rgba(0,0,0,0.3)' 
+          : '0 4px 8px rgba(0,0,0,0.1)';
+      }}
+      onMouseLeave={(e) => {
+        e.currentTarget.style.transform = 'translateY(0)';
+        e.currentTarget.style.boxShadow = themeMode === 'dark' 
+          ? '0 2px 4px rgba(0,0,0,0.2)' 
+          : '0 2px 4px rgba(0,0,0,0.05)';
+      }}
+    >
+      {t('upgradePlan')}
+    </Button>
+  );
+
+  const getTooltipContent = () => {
+    if (daysRemaining === 0) {
+      return (
+        <div style={{ textAlign: 'center' }}>
+          <ThunderboltOutlined style={{ fontSize: '16px', marginBottom: '4px' }} />
+          <div>{tCommon('license-badge-today')}</div>
+          <div style={{ fontSize: '11px', opacity: 0.8, marginTop: '2px' }}>
+            {t('upgradePlanTooltip')}
+          </div>
+        </div>
+      );
+    }
+    
+    if (daysRemaining !== null && daysRemaining <= 7) {
+      return (
+        <div style={{ textAlign: 'center' }}>
+          <ClockCircleOutlined style={{ fontSize: '16px', marginBottom: '4px' }} />
+          <div>{getBadgeText()}</div>
+          <div style={{ fontSize: '11px', opacity: 0.8, marginTop: '2px' }}>
+            {t('upgradePlanTooltip')}
+          </div>
+        </div>
+      );
+    }
+    
+    return t('upgradePlanTooltip');
+  };
+
+  if (daysRemaining !== null) {
+    return (
+      <Tooltip 
+        title={getTooltipContent()}
+        placement="bottom"
+        overlayStyle={{ maxWidth: '280px' }}
+      >
+        <Badge 
+          count={getBadgeText()} 
+          style={{ 
+            backgroundColor: getBadgeColor(),
+            fontSize: '11px',
+            height: '20px',
+            lineHeight: '20px',
+            padding: '0 8px',
+            borderRadius: '10px',
+            fontWeight: 600,
+            boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
+            animation: daysRemaining === 0 ? 'pulse 2s infinite' : undefined,
+          }}
+        >
+          <style>
+            {`
+              @keyframes pulse {
+                0% {
+                  box-shadow: 0 0 0 0 rgba(255, 77, 79, 0.7);
+                }
+                70% {
+                  box-shadow: 0 0 0 10px rgba(255, 77, 79, 0);
+                }
+                100% {
+                  box-shadow: 0 0 0 0 rgba(255, 77, 79, 0);
+                }
+              }
+            `}
+          </style>
+          {button}
+        </Badge>
+      </Tooltip>
+    );
+  }
+
+  return (
+    <Tooltip 
+      title={getTooltipContent()}
+      placement="bottom"
+    >
+      {button}
+    </Tooltip>
+  );
+};
+
+export default UpgradePlanButton;
diff --git a/worklenz-frontend/src/features/navbar/upgradePlan/UpgradePlanButton.tsx b/worklenz-frontend/src/features/navbar/upgradePlan/UpgradePlanButton.tsx
deleted file mode 100644
index 16c1332c2..000000000
--- a/worklenz-frontend/src/features/navbar/upgradePlan/UpgradePlanButton.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { Button, Tooltip } from '@/shared/antd-imports';
-import React from 'react';
-import { colors } from '../../../styles/colors';
-import { useTranslation } from 'react-i18next';
-import { useNavigate } from 'react-router-dom';
-import { useAppSelector } from '@/hooks/useAppSelector';
-
-const UpgradePlanButton = () => {
-  // localization
-  const { t } = useTranslation('navbar');
-  const navigate = useNavigate();
-
-  const themeMode = useAppSelector(state => state.themeReducer.mode);
-
-  return (
-    <Tooltip title={t('upgradePlanTooltip')}>
-      <Button
-        style={{
-          backgroundColor: themeMode === 'dark' ? '#b38750' : colors.lightBeige,
-          color: '#000000d9',
-          padding: '4px 11px',
-        }}
-        size="small"
-        type="text"
-        onClick={() => navigate('/worklenz/admin-center/billing')}
-      >
-        {t('upgradePlan')}
-      </Button>
-    </Tooltip>
-  );
-};
-
-export default UpgradePlanButton;
diff --git a/worklenz-frontend/src/features/navbar/user-profile/profile-button.tsx b/worklenz-frontend/src/features/navbar/user-profile/ProfileButton.tsx
similarity index 87%
rename from worklenz-frontend/src/features/navbar/user-profile/profile-button.tsx
rename to worklenz-frontend/src/features/navbar/user-profile/ProfileButton.tsx
index 3908d385f..33efc46be 100644
--- a/worklenz-frontend/src/features/navbar/user-profile/profile-button.tsx
+++ b/worklenz-frontend/src/features/navbar/user-profile/ProfileButton.tsx
@@ -13,6 +13,7 @@ import './profile-dropdown.css';
 import './profile-button.css';
 import SingleAvatar from '@/components/common/single-avatar/single-avatar';
 import { useAuthService } from '@/hooks/useAuth';
+import { useAuthStatus } from '@/hooks/useAuthStatus';
 import { useEffect, useState } from 'react';
 
 interface ProfileButtonProps {
@@ -23,6 +24,7 @@ const ProfileButton = ({ isOwnerOrAdmin }: ProfileButtonProps) => {
   const { t } = useTranslation('navbar');
   const authService = useAuthService();
   const currentSession = useAppSelector((state: RootState) => state.userReducer);
+  const { isLicenseExpired } = useAuthStatus();
 
   const role = getRole();
   const themeMode = useAppSelector((state: RootState) => state.themeReducer.mode);
@@ -31,6 +33,10 @@ const ProfileButton = ({ isOwnerOrAdmin }: ProfileButtonProps) => {
     color: themeMode === 'dark' ? '#ffffffd9' : '#181818',
   });
 
+  const getDangerLinkStyle = () => ({
+    color: '#ff4d4f',
+  });
+
   const profile: MenuProps['items'] = [
     {
       key: '1',
@@ -80,14 +86,21 @@ const ProfileButton = ({ isOwnerOrAdmin }: ProfileButtonProps) => {
           variant="borderless"
           style={{ width: 230 }}
         >
-          {isOwnerOrAdmin && (
+          {isOwnerOrAdmin && !isLicenseExpired && (
             <Link to="/worklenz/admin-center/overview" style={getLinkStyle()}>
               {t('adminCenter')}
             </Link>
           )}
-          <Link to="/worklenz/settings/profile" style={getLinkStyle()}>
-            {t('settings')}
-          </Link>
+          {!isLicenseExpired && (
+            <Link to="/worklenz/settings/profile" style={getLinkStyle()}>
+              {t('settings')}
+            </Link>
+          )}
+          {isLicenseExpired && (
+            <Link to="/worklenz/settings/account-deletion" style={getDangerLinkStyle()}>
+              {t('deleteAccount')}
+            </Link>
+          )}
           <Link to="/auth/logging-out" style={getLinkStyle()}>
             {t('logOut')}
           </Link>
diff --git a/worklenz-frontend/src/features/projects/singleProject/members/projectMembersSlice.ts b/worklenz-frontend/src/features/projects/singleProject/members/projectMembersSlice.ts
index 26a4ab12f..fb6ed6b45 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/features/reporting/projectReports/projectReportsDrawer/ProjectReportsDrawer.tsx b/worklenz-frontend/src/features/reporting/projectReports/projectReportsDrawer/ProjectReportsDrawer.tsx
index 2355dd5e1..3ab86ee2e 100644
--- a/worklenz-frontend/src/features/reporting/projectReports/projectReportsDrawer/ProjectReportsDrawer.tsx
+++ b/worklenz-frontend/src/features/reporting/projectReports/projectReportsDrawer/ProjectReportsDrawer.tsx
@@ -1,5 +1,5 @@
 import { Drawer, Typography, Flex, Button, Dropdown } from '@/shared/antd-imports';
-import React, { useState } from 'react';
+import React, { useState, useCallback } from 'react';
 import { useAppSelector } from '../../../../hooks/useAppSelector';
 import { useAppDispatch } from '../../../../hooks/useAppDispatch';
 import { setSelectedProject, toggleProjectReportsDrawer } from '../project-reports-slice';
@@ -8,6 +8,8 @@ import ProjectReportsDrawerTabs from './ProjectReportsDrawerTabs';
 import { colors } from '../../../../styles/colors';
 import { useTranslation } from 'react-i18next';
 import { IRPTProject } from '@/types/reporting/reporting.types';
+import { useAuthService } from '../../../../hooks/useAuth';
+import { reportingExportApiService } from '@/api/reporting/reporting-export.api.service';
 
 type ProjectReportsDrawerProps = {
   selectedProject: IRPTProject | null;
@@ -17,6 +19,8 @@ const ProjectReportsDrawer = ({ selectedProject }: ProjectReportsDrawerProps) =>
   const { t } = useTranslation('reporting-projects-drawer');
 
   const dispatch = useAppDispatch();
+  const currentSession = useAuthService().getCurrentSession();
+  const [exporting, setExporting] = useState<boolean>(false);
 
   // get drawer open state and project list from the reducer
   const isDrawerOpen = useAppSelector(
@@ -35,6 +39,54 @@ const ProjectReportsDrawer = ({ selectedProject }: ProjectReportsDrawerProps) =>
     }
   };
 
+  // Export handlers
+  const handleExportMembers = useCallback(() => {
+    if (!selectedProject?.id) return;
+    try {
+      setExporting(true);
+      const teamName = currentSession?.team_name || 'Team';
+      reportingExportApiService.exportProjectMembers(
+        selectedProject.id,
+        selectedProject.name,
+        teamName
+      );
+    } catch (error) {
+      console.error('Error exporting project members:', error);
+    } finally {
+      setExporting(false);
+    }
+  }, [selectedProject, currentSession?.team_name]);
+
+  const handleExportTasks = useCallback(() => {
+    if (!selectedProject?.id) return;
+    try {
+      setExporting(true);
+      const teamName = currentSession?.team_name || 'Team';
+      reportingExportApiService.exportProjectTasks(
+        selectedProject.id,
+        selectedProject.name,
+        teamName
+      );
+    } catch (error) {
+      console.error('Error exporting project tasks:', error);
+    } finally {
+      setExporting(false);
+    }
+  }, [selectedProject, currentSession?.team_name]);
+
+  const handleExportClick = useCallback((key: string) => {
+    switch (key) {
+      case '1':
+        handleExportMembers();
+        break;
+      case '2':
+        handleExportTasks();
+        break;
+      default:
+        break;
+    }
+  }, [handleExportMembers, handleExportTasks]);
+
   return (
     <Drawer
       open={isDrawerOpen}
@@ -56,9 +108,15 @@ const ProjectReportsDrawer = ({ selectedProject }: ProjectReportsDrawerProps) =>
                 { key: '1', label: t('membersButton') },
                 { key: '2', label: t('tasksButton') },
               ],
+              onClick: ({ key }) => handleExportClick(key),
             }}
           >
-            <Button type="primary" icon={<DownOutlined />} iconPosition="end">
+            <Button 
+              type="primary" 
+              loading={exporting}
+              icon={<DownOutlined />} 
+              iconPosition="end"
+            >
               {t('exportButton')}
             </Button>
           </Dropdown>
diff --git a/worklenz-frontend/src/features/task-management/task-management.slice.ts b/worklenz-frontend/src/features/task-management/task-management.slice.ts
index b28da652c..1db46e4c5 100644
--- a/worklenz-frontend/src/features/task-management/task-management.slice.ts
+++ b/worklenz-frontend/src/features/task-management/task-management.slice.ts
@@ -64,6 +64,9 @@ const initialState: TaskManagementState = {
   loadingColumns: false,
   columns: [],
   customColumns: [],
+  // Add sort-related state
+  sortField: '',
+  sortOrder: 'ASC',
 };
 
 // Async thunk to fetch tasks from API
@@ -233,12 +236,16 @@ export const fetchTasksV3 = createAsyncThunk(
       // Get archived state from task management slice
       const archivedState = state.taskManagement.archived;
 
+      // Get sort state from task management slice
+      const sortField = state.taskManagement.sortField;
+      const sortOrder = state.taskManagement.sortOrder;
+
       const config: ITaskListConfigV2 = {
         id: projectId,
         archived: archivedState,
         group: currentGrouping || '',
-        field: '',
-        order: '',
+        field: sortField,
+        order: sortOrder,
         search: searchValue,
         statuses: '',
         members: selectedAssignees,
@@ -673,8 +680,23 @@ const taskManagementSlice = createSlice({
         const group = state.groups.find(g => g.id === sourceGroupId);
         if (group) {
           const newTasks = Array.from(group.taskIds);
-          const [removed] = newTasks.splice(newTasks.indexOf(sourceTaskId), 1);
-          newTasks.splice(newTasks.indexOf(destinationTaskId), 0, removed);
+          const sourceIndex = newTasks.indexOf(sourceTaskId);
+          const destinationIndex = newTasks.indexOf(destinationTaskId);
+          
+          // Remove the task from its current position
+          const [removed] = newTasks.splice(sourceIndex, 1);
+          
+          // Calculate the insertion index
+          let insertIndex = destinationIndex;
+          if (sourceIndex < destinationIndex) {
+            // When dragging down, we need to insert after the destination
+            insertIndex = destinationIndex;
+          } else {
+            // When dragging up, we insert before the destination
+            insertIndex = destinationIndex;
+          }
+          
+          newTasks.splice(insertIndex, 0, removed);
           group.taskIds = newTasks;
 
           // Update order for affected tasks using the appropriate sort field
@@ -737,6 +759,16 @@ const taskManagementSlice = createSlice({
     toggleArchived: (state) => {
       state.archived = !state.archived;
     },
+    setSortField: (state, action: PayloadAction<string>) => {
+      state.sortField = action.payload;
+    },
+    setSortOrder: (state, action: PayloadAction<'ASC' | 'DESC'>) => {
+      state.sortOrder = action.payload;
+    },
+    setSort: (state, action: PayloadAction<{ field: string; order: 'ASC' | 'DESC' }>) => {
+      state.sortField = action.payload.field;
+      state.sortOrder = action.payload.order;
+    },
     resetTaskManagement: state => {
       state.loading = false;
       state.error = null;
@@ -745,6 +777,8 @@ const taskManagementSlice = createSlice({
       state.selectedPriorities = [];
       state.search = '';
       state.archived = false;
+      state.sortField = '';
+      state.sortOrder = 'ASC';
       state.ids = [];
       state.entities = {};
     },
@@ -1129,6 +1163,9 @@ export const {
   setSearch,
   setArchived,
   toggleArchived,
+  setSortField,
+  setSortOrder,
+  setSort,
   resetTaskManagement,
   toggleTaskExpansion,
   addSubtaskToParent,
@@ -1160,6 +1197,9 @@ export const selectLoading = (state: RootState) => state.taskManagement.loading;
 export const selectError = (state: RootState) => state.taskManagement.error;
 export const selectSelectedPriorities = (state: RootState) => state.taskManagement.selectedPriorities;
 export const selectSearch = (state: RootState) => state.taskManagement.search;
+export const selectSortField = (state: RootState) => state.taskManagement.sortField;
+export const selectSortOrder = (state: RootState) => state.taskManagement.sortOrder;
+export const selectSort = (state: RootState) => ({ field: state.taskManagement.sortField, order: state.taskManagement.sortOrder });
 export const selectSubtaskLoading = (state: RootState, taskId: string) => state.taskManagement.loadingSubtasks[taskId] || false;
 
 // Memoized selectors to prevent unnecessary re-renders
diff --git a/worklenz-frontend/src/hooks/useAuthStatus.ts b/worklenz-frontend/src/hooks/useAuthStatus.ts
index 2158d5fe2..6c3c9e867 100644
--- a/worklenz-frontend/src/hooks/useAuthStatus.ts
+++ b/worklenz-frontend/src/hooks/useAuthStatus.ts
@@ -27,14 +27,27 @@ export const useAuthStatus = () => {
         if (!currentSession) return false;
         if (currentSession.is_expired) return true;
 
+        // Check using valid_till_date for subscription types that can expire
+        const expirableTypes = [
+          ISUBSCRIPTION_TYPE.TRIAL,
+          ISUBSCRIPTION_TYPE.LIFE_TIME_DEAL,
+          ISUBSCRIPTION_TYPE.PADDLE,
+          ISUBSCRIPTION_TYPE.CUSTOM
+        ];
+        
         if (
-          currentSession.subscription_type === ISUBSCRIPTION_TYPE.TRIAL &&
-          currentSession.trial_expire_date
+          expirableTypes.includes(currentSession.subscription_type as ISUBSCRIPTION_TYPE) &&
+          (currentSession.valid_till_date || currentSession.trial_expire_date)
         ) {
           const today = new Date();
-          const expiryDate = new Date(currentSession.trial_expire_date);
+          // Use valid_till_date first, fallback to trial_expire_date
+          const expireDateStr = currentSession.valid_till_date || currentSession.trial_expire_date;
+          const expiryDate = new Date(expireDateStr);
           const diffTime = today.getTime() - expiryDate.getTime();
           const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+          
+          // License is considered fully expired after 7 days grace period
+          // This will trigger the LicenseExpiredModal
           return diffDays > 7;
         }
 
diff --git a/worklenz-frontend/src/hooks/useSurveyStatus.ts b/worklenz-frontend/src/hooks/useSurveyStatus.ts
new file mode 100644
index 000000000..06663e0cc
--- /dev/null
+++ b/worklenz-frontend/src/hooks/useSurveyStatus.ts
@@ -0,0 +1,49 @@
+import { useState, useEffect } from 'react';
+import { surveyApiService } from '@/api/survey/survey.api.service';
+import logger from '@/utils/errorLogger';
+
+export interface UseSurveyStatusResult {
+  hasCompletedSurvey: boolean | null;
+  loading: boolean;
+  error: Error | null;
+  refetch: () => Promise<void>;
+}
+
+export const useSurveyStatus = (): UseSurveyStatusResult => {
+  const [hasCompletedSurvey, setHasCompletedSurvey] = useState<boolean | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+
+  const checkSurveyStatus = async () => {
+    try {
+      setLoading(true);
+      setError(null);
+      
+      const response = await surveyApiService.checkAccountSetupSurveyStatus();
+      
+      if (response.done) {
+        setHasCompletedSurvey(response.body.is_completed);
+      } else {
+        setHasCompletedSurvey(false);
+      }
+    } catch (err) {
+      logger.error('Failed to check survey status', err);
+      setError(err as Error);
+      // Assume not completed if there's an error
+      setHasCompletedSurvey(false);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    checkSurveyStatus();
+  }, []);
+
+  return {
+    hasCompletedSurvey,
+    loading,
+    error,
+    refetch: checkSurveyStatus
+  };
+};
\ No newline at end of file
diff --git a/worklenz-frontend/src/hooks/useTaskSocketHandlers.ts b/worklenz-frontend/src/hooks/useTaskSocketHandlers.ts
index 0c70e38d2..72a1f71a5 100644
--- a/worklenz-frontend/src/hooks/useTaskSocketHandlers.ts
+++ b/worklenz-frontend/src/hooks/useTaskSocketHandlers.ts
@@ -244,64 +244,22 @@ export const useTaskSocketHandlers = () => {
           // Find current group containing the task
           const currentGroup = groups.find(group => group.taskIds.includes(response.id));
 
-          // Find target group based on new status value with multiple matching strategies
-          let targetGroup = groups.find(group => group.groupValue === newStatusValue);
+          // Find target group based on the actual status ID from response
+          let targetGroup = groups.find(group => group.id === response.status_id);
           
-          // If not found, try case-insensitive matching
+          // If not found by status ID, try matching with group value
           if (!targetGroup) {
-            targetGroup = groups.find(group => 
-              group.groupValue?.toLowerCase() === newStatusValue.toLowerCase()
-            );
+            targetGroup = groups.find(group => group.groupValue === response.status_id);
           }
           
-          // If still not found, try matching with title
-          if (!targetGroup) {
-            targetGroup = groups.find(group => 
-              group.title?.toLowerCase() === newStatusValue.toLowerCase()
-            );
-          }
-          
-          // If still not found, try matching common status patterns
-          if (!targetGroup && newStatusValue === 'todo') {
-            targetGroup = groups.find(group => 
-              group.title?.toLowerCase().includes('todo') || 
-              group.title?.toLowerCase().includes('to do') ||
-              group.title?.toLowerCase().includes('pending') ||
-              group.groupValue?.toLowerCase().includes('todo')
-            );
-          } else if (!targetGroup && newStatusValue === 'doing') {
+          // If still not found, try matching by status name (fallback)
+          if (!targetGroup && response.status) {
             targetGroup = groups.find(group => 
-              group.title?.toLowerCase().includes('doing') || 
-              group.title?.toLowerCase().includes('progress') ||
-              group.title?.toLowerCase().includes('active') ||
-              group.groupValue?.toLowerCase().includes('doing')
-            );
-          } else if (!targetGroup && newStatusValue === 'done') {
-            targetGroup = groups.find(group => 
-              group.title?.toLowerCase().includes('done') || 
-              group.title?.toLowerCase().includes('complete') ||
-              group.title?.toLowerCase().includes('finish') ||
-              group.groupValue?.toLowerCase().includes('done')
+              group.title?.toLowerCase() === response.status.toLowerCase()
             );
           }
 
-          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({
@@ -311,14 +269,11 @@ export const useTaskSocketHandlers = () => {
               })
             );
           } else if (!targetGroup) {
-            console.log('❌ Target group not found for status:', newStatusValue);
-          } else if (!currentGroup) {
-            console.log('❌ Current group not found for task:', response.id);
-          } else {
-            console.log('🔧 No group movement needed - task already in correct group');
+            // Fallback: refetch tasks to ensure consistency
+            if (projectId) {
+              dispatch(fetchTasksV3(projectId));
+            }
           }
-        } else {
-          console.log('🔧 Not grouped by status, skipping group movement');
         }
       }
     },
@@ -448,12 +403,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 +552,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 +869,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 +934,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/hooks/useTaskTimerWithConflictCheck.ts b/worklenz-frontend/src/hooks/useTaskTimerWithConflictCheck.ts
new file mode 100644
index 000000000..5939779d7
--- /dev/null
+++ b/worklenz-frontend/src/hooks/useTaskTimerWithConflictCheck.ts
@@ -0,0 +1,94 @@
+import { useState, useEffect, useCallback } from 'react';
+import { Modal } from 'antd';
+import { useTranslation } from 'react-i18next';
+import { useSocket } from '@/socket/socketContext';
+import { SocketEvents } from '@/shared/socket-events';
+import { taskTimeLogsApiService } from '@/api/tasks/task-time-logs.api.service';
+import { useTaskTimer } from './useTaskTimer';
+
+interface ConflictingTimer {
+  task_id: string;
+  task_name: string;
+  project_name: string;
+}
+
+export const useTaskTimerWithConflictCheck = (taskId: string, timerStartTime: string | null) => {
+  const { socket } = useSocket();
+  const { t: tTable } = useTranslation('task-list-table');
+  const { t: tCommon } = useTranslation('common');
+
+  // Ensure timerStartTime is a number or null, as required by useTaskTimer
+  const parsedTimerStartTime = typeof timerStartTime === 'string' && timerStartTime !== null
+    ? Number(timerStartTime)
+    : timerStartTime;
+
+  const originalHook = useTaskTimer(taskId, parsedTimerStartTime as number | null);
+  const [isCheckingConflict, setIsCheckingConflict] = useState(false);
+
+  const checkForConflictingTimers = useCallback(async () => {
+    try {
+      const response = await taskTimeLogsApiService.getRunningTimers();
+      const runningTimers = response.body || [];
+      
+      // Find conflicting timer (running timer for a different task)
+      const conflictingTimer = runningTimers.find((timer: ConflictingTimer) => 
+        timer.task_id !== taskId
+      );
+      
+      return conflictingTimer;
+    } catch (error) {
+      console.error('Error checking for conflicting timers:', error);
+      return null;
+    }
+  }, [taskId]);
+
+  const handleStartTimerWithConflictCheck = useCallback(async () => {
+    if (isCheckingConflict) return;
+    
+    setIsCheckingConflict(true);
+    
+    try {
+      const conflictingTimer = await checkForConflictingTimers();
+      
+      if (conflictingTimer) {
+        Modal.confirm({
+          title: tTable('timer.conflictTitle'),
+          content: tTable('timer.conflictMessage', { 
+            taskName: conflictingTimer.task_name,
+            projectName: conflictingTimer.project_name 
+          }),
+          okText: tTable('timer.stopAndStart'),
+          cancelText: tCommon('cancel'),
+          onOk: () => {
+            // Stop the conflicting timer
+            if (socket) {
+              socket.emit(SocketEvents.TASK_TIMER_STOP.toString(), JSON.stringify({ 
+                task_id: conflictingTimer.task_id 
+              }));
+            }
+            
+            // Start the new timer after a short delay
+            setTimeout(() => {
+              originalHook.handleStartTimer();
+            }, 100);
+          },
+        });
+      } else {
+        // No conflict, start timer directly
+        originalHook.handleStartTimer();
+      }
+    } catch (error) {
+      console.error('Error handling timer start with conflict check:', error);
+      // Fallback to original behavior
+      originalHook.handleStartTimer();
+    } finally {
+      setIsCheckingConflict(false);
+    }
+  }, [isCheckingConflict, checkForConflictingTimers, tTable, tCommon, socket, originalHook]);
+
+  return {
+    ...originalHook,
+    handleStartTimer: handleStartTimerWithConflictCheck,
+    isCheckingConflict,
+  };
+};
\ No newline at end of file
diff --git a/worklenz-frontend/src/hooks/useUpdateChecker.ts b/worklenz-frontend/src/hooks/useUpdateChecker.ts
new file mode 100644
index 000000000..2ecaf1ce8
--- /dev/null
+++ b/worklenz-frontend/src/hooks/useUpdateChecker.ts
@@ -0,0 +1,141 @@
+// Update Checker Hook
+// Periodically checks for app updates and manages update notifications
+
+import React from 'react';
+import { useServiceWorker } from '../utils/serviceWorkerRegistration';
+
+interface UseUpdateCheckerOptions {
+  checkInterval?: number; // Check interval in milliseconds (default: 5 minutes)
+  enableAutoCheck?: boolean; // Enable automatic checking (default: true)
+  showNotificationOnUpdate?: boolean; // Show notification when update is found (default: true)
+}
+
+interface UseUpdateCheckerReturn {
+  hasUpdate: boolean;
+  isChecking: boolean;
+  lastChecked: Date | null;
+  checkForUpdates: () => Promise<void>;
+  dismissUpdate: () => void;
+  showUpdateNotification: boolean;
+  setShowUpdateNotification: (show: boolean) => void;
+}
+
+export function useUpdateChecker(options: UseUpdateCheckerOptions = {}): UseUpdateCheckerReturn {
+  const {
+    checkInterval = 5 * 60 * 1000, // 5 minutes
+    enableAutoCheck = true,
+    showNotificationOnUpdate = true
+  } = options;
+
+  const { checkForUpdates: serviceWorkerCheckUpdates, swManager } = useServiceWorker();
+  
+  const [hasUpdate, setHasUpdate] = React.useState(false);
+  const [isChecking, setIsChecking] = React.useState(false);
+  const [lastChecked, setLastChecked] = React.useState<Date | null>(null);
+  const [showUpdateNotification, setShowUpdateNotification] = React.useState(false);
+  const [updateDismissed, setUpdateDismissed] = React.useState(false);
+
+  // Check for updates function
+  const checkForUpdates = React.useCallback(async () => {
+    if (!serviceWorkerCheckUpdates || isChecking) return;
+
+    setIsChecking(true);
+    try {
+      const hasUpdates = await serviceWorkerCheckUpdates();
+      setHasUpdate(hasUpdates);
+      setLastChecked(new Date());
+      
+      // Show notification if update found and user hasn't dismissed it
+      if (hasUpdates && showNotificationOnUpdate && !updateDismissed) {
+        setShowUpdateNotification(true);
+      }
+      
+      console.log('Update check completed:', { hasUpdates });
+    } catch (error) {
+      console.error('Error checking for updates:', error);
+    } finally {
+      setIsChecking(false);
+    }
+  }, [serviceWorkerCheckUpdates, isChecking, showNotificationOnUpdate, updateDismissed]);
+
+  // Dismiss update notification
+  const dismissUpdate = React.useCallback(() => {
+    setUpdateDismissed(true);
+    setShowUpdateNotification(false);
+  }, []);
+
+  // Set up automatic checking interval
+  React.useEffect(() => {
+    if (!enableAutoCheck || !swManager) return;
+
+    // Initial check after a short delay
+    const initialTimeout = setTimeout(() => {
+      checkForUpdates();
+    }, 10000); // 10 seconds after component mount
+
+    // Set up interval for periodic checks
+    const intervalId = setInterval(() => {
+      checkForUpdates();
+    }, checkInterval);
+
+    return () => {
+      clearTimeout(initialTimeout);
+      clearInterval(intervalId);
+    };
+  }, [enableAutoCheck, swManager, checkInterval, checkForUpdates]);
+
+  // Listen for visibility change to check for updates when user returns to tab
+  React.useEffect(() => {
+    if (!enableAutoCheck) return;
+
+    const handleVisibilityChange = () => {
+      if (!document.hidden && swManager) {
+        // Check for updates when user returns to the tab
+        setTimeout(() => {
+          checkForUpdates();
+        }, 2000); // 2 second delay
+      }
+    };
+
+    document.addEventListener('visibilitychange', handleVisibilityChange);
+    return () => {
+      document.removeEventListener('visibilitychange', handleVisibilityChange);
+    };
+  }, [enableAutoCheck, swManager, checkForUpdates]);
+
+  // Listen for focus events to check for updates
+  React.useEffect(() => {
+    if (!enableAutoCheck) return;
+
+    const handleFocus = () => {
+      if (swManager && !isChecking) {
+        // Check for updates when window regains focus
+        setTimeout(() => {
+          checkForUpdates();
+        }, 1000); // 1 second delay
+      }
+    };
+
+    window.addEventListener('focus', handleFocus);
+    return () => {
+      window.removeEventListener('focus', handleFocus);
+    };
+  }, [enableAutoCheck, swManager, isChecking, checkForUpdates]);
+
+  // Reset dismissed state when new update is found
+  React.useEffect(() => {
+    if (hasUpdate && updateDismissed) {
+      setUpdateDismissed(false);
+    }
+  }, [hasUpdate, updateDismissed]);
+
+  return {
+    hasUpdate,
+    isChecking,
+    lastChecked,
+    checkForUpdates,
+    dismissUpdate,
+    showUpdateNotification,
+    setShowUpdateNotification
+  };
+}
\ No newline at end of file
diff --git a/worklenz-frontend/src/hooks/useUserTimezone.ts b/worklenz-frontend/src/hooks/useUserTimezone.ts
new file mode 100644
index 000000000..5d665a377
--- /dev/null
+++ b/worklenz-frontend/src/hooks/useUserTimezone.ts
@@ -0,0 +1,70 @@
+import { useState, useEffect } from 'react';
+
+/**
+ * Custom hook to get and manage user's timezone
+ * @returns {Object} Object containing timezone and related utilities
+ */
+export const useUserTimezone = () => {
+  const [timezone, setTimezone] = useState<string>('UTC');
+  const [timezoneOffset, setTimezoneOffset] = useState<string>('+00:00');
+
+  useEffect(() => {
+    // Get browser's timezone
+    const browserTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+    setTimezone(browserTimezone);
+
+    // Calculate timezone offset
+    const date = new Date();
+    const offset = -date.getTimezoneOffset();
+    const hours = Math.floor(Math.abs(offset) / 60);
+    const minutes = Math.abs(offset) % 60;
+    const sign = offset >= 0 ? '+' : '-';
+    const formattedOffset = `${sign}${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;
+    setTimezoneOffset(formattedOffset);
+  }, []);
+
+  /**
+   * Format a date in the user's timezone
+   * @param date - Date to format
+   * @param format - Format options
+   * @returns Formatted date string
+   */
+  const formatInUserTimezone = (date: Date | string, format?: Intl.DateTimeFormatOptions) => {
+    const dateObj = typeof date === 'string' ? new Date(date) : date;
+    return dateObj.toLocaleString('en-US', {
+      timeZone: timezone,
+      ...format
+    });
+  };
+
+  /**
+   * Get the start of day in user's timezone
+   * @param date - Date to get start of day for
+   * @returns Date object representing start of day
+   */
+  const getStartOfDayInTimezone = (date: Date = new Date()) => {
+    const localDate = new Date(date.toLocaleString('en-US', { timeZone: timezone }));
+    localDate.setHours(0, 0, 0, 0);
+    return localDate;
+  };
+
+  /**
+   * Get the end of day in user's timezone
+   * @param date - Date to get end of day for
+   * @returns Date object representing end of day
+   */
+  const getEndOfDayInTimezone = (date: Date = new Date()) => {
+    const localDate = new Date(date.toLocaleString('en-US', { timeZone: timezone }));
+    localDate.setHours(23, 59, 59, 999);
+    return localDate;
+  };
+
+  return {
+    timezone,
+    timezoneOffset,
+    formatInUserTimezone,
+    getStartOfDayInTimezone,
+    getEndOfDayInTimezone,
+    setTimezone
+  };
+};
\ No newline at end of file
diff --git a/worklenz-frontend/src/layouts/AdminCenterLayout.tsx b/worklenz-frontend/src/layouts/AdminCenterLayout.tsx
index d46595b94..a07fc01c8 100644
--- a/worklenz-frontend/src/layouts/AdminCenterLayout.tsx
+++ b/worklenz-frontend/src/layouts/AdminCenterLayout.tsx
@@ -4,40 +4,25 @@ import { Outlet } from 'react-router-dom';
 import { useMediaQuery } from 'react-responsive';
 import AdminCenterSidebar from '@/pages/admin-center/sidebar/sidebar';
 import { useTranslation } from 'react-i18next';
-import { useAppDispatch } from '@/hooks/useAppDispatch';
 
 const AdminCenterLayout: React.FC = () => {
-  const dispatch = useAppDispatch();
   const isTablet = useMediaQuery({ query: '(min-width:768px)' });
-  const isMarginAvailable = useMediaQuery({ query: '(min-width: 1000px)' });
   const { t } = useTranslation('admin-center/sidebar');
 
-  
-
   return (
-    <div
-      style={{
-        marginBlock: 96,
-        minHeight: '90vh',
-        marginLeft: `${isMarginAvailable ? '5%' : ''}`,
-        marginRight: `${isMarginAvailable ? '5%' : ''}`,
-      }}
-    >
+    <div className="my-6">
       <Typography.Title level={4}>{t('adminCenter')}</Typography.Title>
 
       {isTablet ? (
         <Flex
           gap={24}
           align="flex-start"
-          style={{
-            width: '100%',
-            marginBlockStart: 24,
-          }}
+          className="w-full mt-6"
         >
-          <Flex style={{ width: '100%', maxWidth: 240 }}>
+          <Flex className="w-full max-w-60">
             <AdminCenterSidebar />
           </Flex>
-          <Flex style={{ width: '100%' }}>
+          <Flex className="w-full">
             <Outlet />
           </Flex>
         </Flex>
@@ -45,9 +30,7 @@ const AdminCenterLayout: React.FC = () => {
         <Flex
           vertical
           gap={24}
-          style={{
-            marginBlockStart: 24,
-          }}
+          className="mt-6"
         >
           <AdminCenterSidebar />
           <Outlet />
diff --git a/worklenz-frontend/src/layouts/MainLayout.tsx b/worklenz-frontend/src/layouts/MainLayout.tsx
index b1c6a7d3c..189ed0eff 100644
--- a/worklenz-frontend/src/layouts/MainLayout.tsx
+++ b/worklenz-frontend/src/layouts/MainLayout.tsx
@@ -1,62 +1,19 @@
-import { Col, ConfigProvider, Layout } from '@/shared/antd-imports';
-import { Outlet } from 'react-router-dom';
-import { memo, useMemo, useEffect, useRef } from 'react';
-import { useMediaQuery } from 'react-responsive';
+import { ConfigProvider, Layout } from '@/shared/antd-imports';
+import { Outlet, useLocation } from 'react-router-dom';
+import { memo, useMemo } from 'react';
 
-import Navbar from '../features/navbar/navbar';
+import Navbar from '@/features/navbar/navbar';
 import { useAppSelector } from '../hooks/useAppSelector';
 import { colors } from '../styles/colors';
-
-import { useRenderPerformance } from '@/utils/performance';
-import { DynamicCSSLoader, LayoutStabilizer } from '@/utils/css-optimizations';
+import { TrialExpirationAlert } from '@/components/TrialExpirationAlert/TrialExpirationAlert';
 
 const MainLayout = memo(() => {
   const themeMode = useAppSelector(state => state.themeReducer.mode);
-  const isDesktop = useMediaQuery({ query: '(min-width: 1024px)' });
-  const layoutRef = useRef<HTMLDivElement>(null);
-
-  // Performance monitoring in development
-  useRenderPerformance('MainLayout');
-
-  // Apply layout optimizations
-  useEffect(() => {
-    if (layoutRef.current) {
-      // Prevent layout shifts in main content area
-      LayoutStabilizer.applyContainment(layoutRef.current, 'layout');
-      
-      // Load non-critical CSS dynamically
-      DynamicCSSLoader.loadCSS('/styles/non-critical.css', {
-        priority: 'low',
-        media: 'all'
-      });
-    }
-  }, []);
-
+  const location = useLocation();
   
+  const isProjectView = location.pathname.includes('/projects/') && 
+                       !location.pathname.endsWith('/projects');
 
-  // Memoize styles to prevent object recreation on every render
-  const headerStyles = useMemo(
-    () => ({
-      zIndex: 999,
-      position: 'fixed' as const,
-      width: '100%',
-      display: 'flex',
-      alignItems: 'center',
-      padding: 0,
-      borderBottom: themeMode === 'dark' ? '1px solid #303030' : 'none',
-    }),
-    [themeMode]
-  );
-
-  const contentStyles = useMemo(
-    () => ({
-      paddingInline: isDesktop ? 64 : 24,
-      overflowX: 'hidden' as const,
-    }),
-    [isDesktop]
-  );
-
-  // Memoize theme configuration
   const themeConfig = useMemo(
     () => ({
       components: {
@@ -69,23 +26,22 @@ const MainLayout = memo(() => {
     [themeMode]
   );
 
-  // Memoize header className
-  const headerClassName = useMemo(
-    () => `shadow-md ${themeMode === 'dark' ? '' : 'shadow-[#18181811]'}`,
-    [themeMode]
-  );
-
   return (
     <ConfigProvider theme={themeConfig}>
-      <Layout ref={layoutRef} style={{ minHeight: '100vh' }} className="prevent-layout-shift">
-        <Layout.Header className={`${headerClassName} gpu-accelerated`} style={headerStyles}>
+      <Layout className="min-h-screen">
+        {/* Trial expiration alert banner */}
+        <TrialExpirationAlert />
+
+        <Layout.Header 
+          className={`sticky top-0 z-[999] flex items-center p-0 shadow-md ${
+            themeMode === 'dark' ? 'border-b border-[#303030]' : 'shadow-[#18181811]'
+          }`}
+        >
           <Navbar />
         </Layout.Header>
 
-        <Layout.Content className="layout-contained">
-          <Col xxl={{ span: 18, offset: 3, flex: '100%' }} style={contentStyles} className="task-content-container">
-            <Outlet />
-          </Col>
+        <Layout.Content className={`px-4 sm:px-8 lg:px-12 xl:px-16 ${!isProjectView ? 'overflow-x-hidden max-w-[1400px]' : ''} mx-auto w-full`}>
+          <Outlet />
         </Layout.Content>
       </Layout>
     </ConfigProvider>
diff --git a/worklenz-frontend/src/layouts/ReportingLayout.tsx b/worklenz-frontend/src/layouts/ReportingLayout.tsx
index c95383903..53935a56c 100644
--- a/worklenz-frontend/src/layouts/ReportingLayout.tsx
+++ b/worklenz-frontend/src/layouts/ReportingLayout.tsx
@@ -1,6 +1,6 @@
 import { Col, ConfigProvider, Layout } from '@/shared/antd-imports';
 import { useEffect, useState } from 'react';
-import Navbar from '../features/navbar/navbar';
+import Navbar from '@/features/navbar/navbar';
 import { useAppSelector } from '../hooks/useAppSelector';
 import { colors } from '../styles/colors';
 import { themeWiseColor } from '../utils/themeWiseColor';
diff --git a/worklenz-frontend/src/layouts/SettingsLayout.tsx b/worklenz-frontend/src/layouts/SettingsLayout.tsx
index 84e050f68..924bba656 100644
--- a/worklenz-frontend/src/layouts/SettingsLayout.tsx
+++ b/worklenz-frontend/src/layouts/SettingsLayout.tsx
@@ -1,35 +1,25 @@
 import { Flex, Typography } from '@/shared/antd-imports';
 import SettingsSidebar from '../pages/settings/sidebar/settings-sidebar';
-import { Outlet, useNavigate } from 'react-router-dom';
+import { Outlet } from 'react-router-dom';
 import { useMediaQuery } from 'react-responsive';
-import { useEffect } from 'react';
-import { useAuthService } from '@/hooks/useAuth';
 
 const SettingsLayout = () => {
   const isTablet = useMediaQuery({ query: '(min-width: 768px)' });
-  const { getCurrentSession } = useAuthService();
-  const currentSession = getCurrentSession();
-  const navigate = useNavigate();
-
-  
 
   return (
-    <div style={{ marginBlock: 96, minHeight: '90vh' }}>
+    <div className="my-6 min-h-[90vh]">
       <Typography.Title level={4}>Settings</Typography.Title>
 
       {isTablet ? (
         <Flex
           gap={24}
           align="flex-start"
-          style={{
-            width: '100%',
-            marginBlockStart: 24,
-          }}
+          className="w-full mt-6"
         >
-          <Flex style={{ width: '100%', maxWidth: 240 }}>
+          <Flex className="w-full max-w-60">
             <SettingsSidebar />
           </Flex>
-          <Flex style={{ width: '100%' }}>
+          <Flex className="w-full">
             <Outlet />
           </Flex>
         </Flex>
@@ -37,9 +27,7 @@ const SettingsLayout = () => {
         <Flex
           vertical
           gap={24}
-          style={{
-            marginBlockStart: 24,
-          }}
+          className="mt-6"
         >
           <SettingsSidebar />
           <Outlet />
diff --git a/worklenz-frontend/src/lib/settings/settings-constants.ts b/worklenz-frontend/src/lib/settings/settings-constants.ts
index 04305a8ec..5fda19d49 100644
--- a/worklenz-frontend/src/lib/settings/settings-constants.ts
+++ b/worklenz-frontend/src/lib/settings/settings-constants.ts
@@ -12,13 +12,14 @@ import {
   UserOutlined,
   UserSwitchOutlined,
   BulbOutlined,
+  DeleteOutlined,
 } from '@/shared/antd-imports';
 import React, { ReactNode, lazy } from 'react';
 const ProfileSettings = lazy(() => import('../../pages/settings/profile/profile-settings'));
 const NotificationsSettings = lazy(() => import('../../pages/settings/notifications/notifications-settings'));
 const ClientsSettings = lazy(() => import('../../pages/settings/clients/clients-settings'));
 const JobTitlesSettings = lazy(() => import('@/pages/settings/job-titles/job-titles-settings'));
-const LabelsSettings = lazy(() => import('../../pages/settings/labels/labels-settings'));
+const LabelsSettings = lazy(() => import('../../pages/settings/labels/LabelsSettings'));
 const CategoriesSettings = lazy(() => import('../../pages/settings/categories/categories-settings'));
 const ProjectTemplatesSettings = lazy(() => import('@/pages/settings/project-templates/project-templates-settings'));
 const TaskTemplatesSettings = lazy(() => import('@/pages/settings/task-templates/task-templates-settings'));
@@ -27,6 +28,7 @@ const TeamsSettings = lazy(() => import('../../pages/settings/teams/teams-settin
 const ChangePassword = lazy(() => import('@/pages/settings/change-password/change-password'));
 const LanguageAndRegionSettings = lazy(() => import('@/pages/settings/language-and-region/language-and-region-settings'));
 const AppearanceSettings = lazy(() => import('@/pages/settings/appearance/appearance-settings'));
+const AccountDeletion = lazy(() => import('@/pages/settings/account-deletion/AccountDeletion'));
 
 // type of menu item in settings sidebar
 type SettingMenuItems = {
@@ -36,6 +38,7 @@ type SettingMenuItems = {
   icon: ReactNode;
   element: ReactNode;
   adminOnly?: boolean;
+  isDangerous?: boolean;
 };
 // settings all element items use for sidebar and routes
 export const settingsItems: SettingMenuItems[] = [
@@ -140,6 +143,15 @@ export const settingsItems: SettingMenuItems[] = [
     element: React.createElement(TeamsSettings),
     adminOnly: true,
   },
+  // Danger zone - always at the bottom
+  {
+    key: 'account-deletion',
+    name: 'account-deletion',
+    endpoint: 'account-deletion',
+    icon: React.createElement(DeleteOutlined),
+    element: React.createElement(AccountDeletion),
+    isDangerous: true,
+  },
 ];
 
 export const getAccessibleSettings = (isAdmin: boolean) => {
diff --git a/worklenz-frontend/src/pages/GanttDemoPage.tsx b/worklenz-frontend/src/pages/GanttDemoPage.tsx
new file mode 100644
index 000000000..28cadf705
--- /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/account-setup/account-setup.css b/worklenz-frontend/src/pages/account-setup/account-setup.css
index 323bd4151..bee32a961 100644
--- a/worklenz-frontend/src/pages/account-setup/account-setup.css
+++ b/worklenz-frontend/src/pages/account-setup/account-setup.css
@@ -1,5 +1,9 @@
+/* Account Setup Page Styles */
+
+/* Steps styling - using Ant Design theme tokens */
 .ant-steps-item-finish .ant-steps-item-icon {
-  border-color: #1890ff !important;
+  border-color: var(--ant-color-primary) !important;
+  background-color: var(--ant-color-primary) !important;
 }
 
 .ant-steps-item-icon {
@@ -9,37 +13,53 @@
   font-size: 16px !important;
   line-height: 32px !important;
   text-align: center !important;
-  border: 1px solid rgba(0, 0, 0, 0.25) !important;
+  border: 1px solid var(--ant-color-border) !important;
   border-radius: 32px !important;
-  transition:
-    background-color 0.3s,
-    border-color 0.3s !important;
+  transition: all 0.3s !important;
+  background-color: var(--ant-color-bg-container) !important;
+  color: var(--ant-color-text) !important;
 }
 
 .ant-steps-item-wait .ant-steps-item-icon {
   cursor: not-allowed;
+  opacity: 0.6;
 }
 
-.dark-mode .ant-steps-item-wait .ant-steps-item-icon {
-  cursor: not-allowed;
+.ant-steps-item-process .ant-steps-item-icon {
+  border-color: var(--ant-color-primary) !important;
+  background-color: var(--ant-color-primary) !important;
+  color: var(--ant-color-white) !important;
 }
 
 .progress-steps .ant-steps-item.ant-steps-item-process .ant-steps-item-title::after {
-  background-color: #1677ff !important;
+  background-color: var(--ant-color-primary) !important;
   width: 60px !important;
 }
 
-@media (max-width: 1000px) {
-  .progress-steps {
-    width: 400px !important;
-  }
+.ant-steps-item-title {
+  color: var(--ant-color-text) !important;
+}
 
-  .step {
-    width: 400px !important;
+.ant-steps-item-description {
+  color: var(--ant-color-text-secondary) !important;
+}
+
+/* Responsive layout */
+@media (max-width: 1000px) {
+  .progress-steps,
+  .step,
+  .step-content {
+    width: 90% !important;
+    max-width: 500px !important;
   }
+}
 
+@media (max-width: 768px) {
+  .progress-steps,
+  .step,
   .step-content {
-    width: 400px !important;
+    width: 95% !important;
+    max-width: 400px !important;
   }
 }
 
@@ -53,98 +73,93 @@
   }
 
   .step-content {
-    width: 200px !important;
+    width: 100% !important;
+    max-width: 300px !important;
+    padding: 0 1rem !important;
   }
 }
 
-@media (max-width: 1000px) {
-  .organization-name-form {
-    width: 400px !important;
-  }
+/* Tasks step specific styles */
+.tasks-step .task-item-card {
+  transition: all 0.3s ease;
 }
 
-@media (max-width: 500px) {
-  .organization-name-form {
-    width: 200px !important;
-  }
+.tasks-step .task-item-card:hover {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
 }
 
-.vert-text {
-  max-width: 40px;
-  background-color: #fff;
-  position: relative;
-  z-index: 99;
-  margin-left: auto;
-  margin-right: auto;
-  text-align: center;
-  justify-content: center;
-  margin-top: 2rem;
-}
-
-.vert-text-dark {
-  max-width: 40px;
-  background-color: #141414;
-  position: relative;
-  z-index: 99;
-  margin-left: auto;
-  margin-right: auto;
-  text-align: center;
-  justify-content: center;
-  margin-top: 2rem;
-}
-
-.vert-line {
-  position: absolute;
-  left: 0;
-  right: 0;
-  width: 100%;
-  content: "";
-  height: 2px;
-  background-color: #00000047;
-  bottom: 0;
-  top: 0;
-  margin-bottom: auto;
-  margin-top: auto;
-}
-
-.vert-line-dark {
-  position: absolute;
-  left: 0;
-  right: 0;
-  width: 100%;
-  content: "";
-  height: 2px;
-  background-color: white;
-  bottom: 0;
-  top: 0;
-  margin-bottom: auto;
-  margin-top: auto;
+.tasks-step .task-input {
+  font-size: 16px;
 }
 
-@media (max-width: 1000px) {
-  .first-project-form {
-    width: 400px !important;
-  }
+.tasks-step .task-input:focus {
+  box-shadow: none !important;
 }
 
-@media (max-width: 500px) {
-  .first-project-form {
-    width: 200px !important;
-  }
+/* Project step specific styles */
+.project-step .ant-input-affix-wrapper {
+  transition: all 0.3s ease;
 }
 
-.custom-close-button:hover {
-  background-color: transparent !important;
+.project-step .ant-input-affix-wrapper:focus-within {
+  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
 }
 
-@media (max-width: 1000px) {
-  .create-first-task-form {
-    width: 400px !important;
-  }
+.project-suggestion-button {
+  transition: all 0.2s ease;
+  cursor: pointer;
 }
 
-@media (max-width: 500px) {
-  .create-first-task-form {
-    width: 200px !important;
+.project-suggestion-button:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.project-suggestion-button:active {
+  transform: translateY(0);
+}
+
+/* Organization step specific styles */
+.organization-step .ant-input-affix-wrapper {
+  transition: all 0.3s ease;
+}
+
+.organization-step .ant-input-affix-wrapper:focus-within {
+  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
+  border-color: #1890ff;
+}
+
+.organization-suggestion-button {
+  transition: all 0.2s ease;
+  cursor: pointer;
+}
+
+.organization-suggestion-button:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.organization-suggestion-button:active {
+  transform: translateY(0);
+}
+
+/* Survey step animations */
+.survey-page-transition {
+  animation: fadeInUp 0.4s ease-out;
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
   }
 }
+
+/* Theme transitions */
+* {
+  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
+}
\ No newline at end of file
diff --git a/worklenz-frontend/src/pages/account-setup/account-setup.tsx b/worklenz-frontend/src/pages/account-setup/account-setup.tsx
index b9138c80b..3c189b574 100644
--- a/worklenz-frontend/src/pages/account-setup/account-setup.tsx
+++ b/worklenz-frontend/src/pages/account-setup/account-setup.tsx
@@ -2,13 +2,15 @@ import React, { useEffect } from 'react';
 import { useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
-import { Space, Steps, Button, Typography } from 'antd/es';
+import { Space, Steps, Button, Typography, theme, Dropdown, MenuProps } from '@/shared/antd-imports';
+import { GlobalOutlined, MoonOutlined, SunOutlined } from '@/shared/antd-imports';
 
 import logger from '@/utils/errorLogger';
-import { setCurrentStep } from '@/features/account-setup/account-setup.slice';
+import { setCurrentStep, setSurveySubStep } from '@/features/account-setup/account-setup.slice';
 import { OrganizationStep } from '@/components/account-setup/organization-step';
 import { ProjectStep } from '@/components/account-setup/project-step';
 import { TasksStep } from '@/components/account-setup/tasks-step';
+import { SurveyStep } from '@/components/account-setup/survey-step';
 import MembersStep from '@/components/account-setup/members-step';
 import {
   evt_account_setup_complete,
@@ -31,23 +33,110 @@ import { useAppDispatch } from '@/hooks/useAppDispatch';
 import './account-setup.css';
 import { IAccountSetupRequest } from '@/types/project-templates/project-templates.types';
 import { profileSettingsApiService } from '@/api/settings/profile/profile-settings.api.service';
+import { projectTemplatesApiService } from '@/api/project-templates/project-templates.api.service';
+import { surveyApiService } from '@/api/survey/survey.api.service';
+import { ISurveySubmissionRequest, ISurveyAnswer } from '@/types/account-setup/survey.types';
+import { setLanguage } from '@/features/i18n/localesSlice';
+import { ILanguageType, Language } from '@/features/i18n/localesSlice';
+import { toggleTheme } from '@/features/theme/themeSlice';
 
 const { Title } = Typography;
 
+// Simplified styles for form components using Ant Design theme tokens
+const getAccountSetupStyles = (token: any) => ({
+  form: {
+    width: '100%',
+    maxWidth: '600px',
+  },
+  label: {
+    color: token.colorText,
+    fontWeight: 500,
+  },
+  buttonContainer: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginTop: '1rem',
+  },
+  drawerFooter: {
+    display: 'flex',
+    justifyContent: 'right',
+    padding: '10px 16px',
+  },
+});
+
 const AccountSetup: React.FC = () => {
   const dispatch = useAppDispatch();
-  const { t } = useTranslation('account-setup');
+  const { t, i18n } = useTranslation('account-setup');
   useDocumentTitle(t('setupYourAccount', 'Account Setup'));
   const navigate = useNavigate();
   const { trackMixpanelEvent } = useMixpanelTracking();
+  const { token } = theme.useToken();
 
-  const { currentStep, organizationName, projectName, templateId, tasks, teamMembers } =
+  const { currentStep, organizationName, projectName, templateId, tasks, teamMembers, surveyData, surveySubStep } =
     useSelector((state: RootState) => state.accountSetupReducer);
+  const lng = useSelector((state: RootState) => state.localesReducer.lng);
   const userDetails = getUserSession();
   const themeMode = useSelector((state: RootState) => state.themeReducer.mode);
+  
+  const [surveyId, setSurveyId] = React.useState<string | null>(null);
+  const [isSkipping, setIsSkipping] = React.useState(false);
 
   const isDarkMode = themeMode === 'dark';
-  const organizationNamePlaceholder = userDetails?.name ? `e.g. ${userDetails?.name}'s Team` : '';
+  // Helper to extract organization name from email or fallback to user name
+  function getOrganizationNamePlaceholder(userDetails: { email?: string; name?: string } | null): string {
+    if (!userDetails) return '';
+    const email = userDetails.email || '';
+    const name = userDetails.name || '';
+    if (email) {
+      const match = email.match(/^([^@]+)@([^@]+)$/);
+      if (match) {
+        const domain = match[2].toLowerCase();
+        // List of common public email providers
+        const publicProviders = [
+          'gmail.com', 'yahoo.com', 'outlook.com', 'hotmail.com', 'icloud.com', 'aol.com', 'protonmail.com', 'zoho.com', 'gmx.com', 'mail.com', 'yandex.com', 'msn.com', 'live.com', 'me.com', 'comcast.net', 'rediffmail.com', 'ymail.com', 'rocketmail.com', 'inbox.com', 'mail.ru', 'qq.com', 'naver.com', '163.com', '126.com', 'sina.com', 'yeah.net', 'googlemail.com', 'fastmail.com', 'hushmail.com', 'tutanota.com', 'pm.me', 'mailbox.org', 'proton.me'
+        ];
+        if (!publicProviders.includes(domain)) {
+          // Use the first part of the domain (before the first dot)
+          const org = domain.split('.')[0];
+          if (org && org.length > 1) {
+            return `e.g. ${org.charAt(0).toUpperCase() + org.slice(1)} Team`;
+          }
+        }
+      }
+    }
+    // Fallback to user name
+    return name ? `e.g. ${name}'s Team` : '';
+  }
+
+  const organizationNamePlaceholder = getOrganizationNamePlaceholder(userDetails);
+
+  // Helper to extract organization name from email or fallback to user name
+  function getOrganizationNameInitialValue(userDetails: { email?: string; name?: string } | null): string {
+    if (!userDetails) return '';
+    const email = userDetails.email || '';
+    const name = userDetails.name || '';
+    if (email) {
+      const match = email.match(/^([^@]+)@([^@]+)$/);
+      if (match) {
+        const domain = match[2].toLowerCase();
+        const publicProviders = [
+          'gmail.com', 'yahoo.com', 'outlook.com', 'hotmail.com', 'icloud.com', 'aol.com', 'protonmail.com', 'zoho.com', 'gmx.com', 'mail.com', 'yandex.com', 'msn.com', 'live.com', 'me.com', 'comcast.net', 'rediffmail.com', 'ymail.com', 'rocketmail.com', 'inbox.com', 'mail.ru', 'qq.com', 'naver.com', '163.com', '126.com', 'sina.com', 'yeah.net', 'googlemail.com', 'fastmail.com', 'hushmail.com', 'tutanota.com', 'pm.me', 'mailbox.org', 'proton.me'
+        ];
+        if (!publicProviders.includes(domain)) {
+          const org = domain.split('.')[0];
+          if (org && org.length > 1) {
+            return org.charAt(0).toUpperCase() + org.slice(1);
+          }
+        }
+      }
+    }
+    return name || '';
+  }
+
+  const organizationNameInitialValue = getOrganizationNameInitialValue(userDetails);
+
+  const styles = getAccountSetupStyles(token);
 
   useEffect(() => {
     trackMixpanelEvent(evt_account_setup_visit);
@@ -65,88 +154,25 @@ const AccountSetup: React.FC = () => {
         logger.error('Failed to verify authentication status', error);
       }
     };
+    
+    const loadSurvey = async () => {
+      try {
+        const response = await surveyApiService.getAccountSetupSurvey();
+        if (response.done && response.body) {
+          setSurveyId(response.body.id);
+        } else {
+          logger.error('Survey not found or inactive (warn replaced with error)');
+        }
+      } catch (error) {
+        logger.error('Failed to load survey', error);
+        // Continue without survey - don't block account setup
+      }
+    };
+    
     void verifyAuthStatus();
+    void loadSurvey();
   }, [dispatch, navigate, trackMixpanelEvent]);
 
-  const calculateHeight = () => {
-    if (currentStep === 2) {
-      return tasks.length * 105;
-    }
-
-    if (currentStep === 3) {
-      return teamMembers.length * 105;
-    }
-    return 'min-content';
-  };
-
-  const styles = {
-    form: {
-      width: '600px',
-      paddingBottom: '1rem',
-      marginTop: '3rem',
-      height: '100%',
-      overflow: 'hidden',
-    },
-    label: {
-      color: isDarkMode ? '' : '#00000073',
-      fontWeight: 500,
-    },
-    buttonContainer: {
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      marginTop: '1rem',
-    },
-    drawerFooter: {
-      display: 'flex',
-      justifyContent: 'right',
-      padding: '10px 16px',
-    },
-    container: {
-      height: '100vh',
-      width: '100vw',
-      display: 'flex',
-      flexDirection: 'column' as const,
-      alignItems: 'center',
-      padding: '3rem 0',
-      backgroundColor: isDarkMode ? 'black' : '#FAFAFA',
-    },
-    contentContainer: {
-      backgroundColor: isDarkMode ? '#141414' : 'white',
-      marginTop: '1.5rem',
-      paddingTop: '3rem',
-      margin: '1.5rem auto 0',
-      width: '100%',
-      maxWidth: '66.66667%',
-      minHeight: 'fit-content',
-      display: 'flex',
-      flexDirection: 'column' as const,
-    },
-    space: {
-      display: 'flex',
-      flexDirection: 'column' as const,
-      alignItems: 'center',
-      gap: '0',
-      flexGrow: 1,
-      width: '100%',
-      minHeight: 'fit-content',
-    },
-    steps: {
-      margin: '1rem 0',
-      width: '600px',
-    },
-    stepContent: {
-      flexGrow: 1,
-      width: '600px',
-      minHeight: calculateHeight(),
-      overflow: 'visible',
-    },
-    actionButtons: {
-      flexGrow: 1,
-      width: '600px',
-      marginBottom: '1rem',
-    },
-  };
 
   const completeAccountSetup = async (skip = false) => {
     try {
@@ -159,6 +185,13 @@ const AccountSetup: React.FC = () => {
           : teamMembers
               .map(teamMember => sanitizeInput(teamMember.value.trim()))
               .filter(email => validateEmail(email)),
+        survey_data: {
+          organization_type: surveyData.organization_type,
+          user_role: surveyData.user_role,
+          main_use_cases: surveyData.main_use_cases,
+          previous_tools: surveyData.previous_tools,
+          how_heard_about: surveyData.how_heard_about,
+        },
       };
       const res = await profileSettingsApiService.setupAccount(model);
       if (res.done && res.body.id) {
@@ -182,6 +215,59 @@ const AccountSetup: React.FC = () => {
     }
   };
 
+  const handleSkipMembers = async () => {
+    try {
+      setIsSkipping(true);
+      // Bypass all validation and complete setup without team members
+      await completeAccountSetup(true);
+    } catch (error) {
+      logger.error('Failed to skip members and complete setup', error);
+    } finally {
+      setIsSkipping(false);
+    }
+  };
+
+  const completeAccountSetupWithTemplate = async () => {
+    try {
+      await saveSurveyData(); // Save survey data first
+      
+      const model: IAccountSetupRequest = {
+        team_name: sanitizeInput(organizationName),
+        project_name: null, // No project name when using template
+        template_id: templateId,
+        tasks: [],
+        team_members: [],
+        survey_data: {
+          organization_type: surveyData.organization_type,
+          user_role: surveyData.user_role,
+          main_use_cases: surveyData.main_use_cases,
+          previous_tools: surveyData.previous_tools,
+          how_heard_about: surveyData.how_heard_about,
+        },
+      };
+      
+      const res = await projectTemplatesApiService.setupAccount(model);
+      if (res.done && res.body.id) {
+        trackMixpanelEvent(evt_account_setup_complete);
+        
+        // Refresh user session to update setup_completed status
+        try {
+          const authResponse = await dispatch(verifyAuthentication()).unwrap() as IAuthorizeResponse;
+          if (authResponse?.authenticated && authResponse?.user) {
+            setSession(authResponse.user);
+            dispatch(setUser(authResponse.user));
+          }
+        } catch (error) {
+          logger.error('Failed to refresh user session after template setup completion', error);
+        }
+        
+        navigate(`/worklenz/projects/${res.body.id}?tab=tasks-list&pinned_tab=tasks-list`);
+      }
+    } catch (error) {
+      logger.error('completeAccountSetupWithTemplate', error);
+    }
+  };
+
   const steps = [
     {
       title: '',
@@ -190,6 +276,20 @@ const AccountSetup: React.FC = () => {
           onEnter={() => dispatch(setCurrentStep(currentStep + 1))}
           styles={styles}
           organizationNamePlaceholder={organizationNamePlaceholder}
+          organizationNameInitialValue={organizationNameInitialValue}
+          isDarkMode={isDarkMode}
+          token={token}
+        />
+      ),
+    },
+    {
+      title: '',
+      content: (
+        <SurveyStep
+          onEnter={() => dispatch(setCurrentStep(currentStep + 1))}
+          styles={styles}
+          isDarkMode={isDarkMode}
+          token={token}
         />
       ),
     },
@@ -200,6 +300,7 @@ const AccountSetup: React.FC = () => {
           onEnter={() => dispatch(setCurrentStep(currentStep + 1))}
           styles={styles}
           isDarkMode={isDarkMode}
+          token={token}
         />
       ),
     },
@@ -210,12 +311,13 @@ const AccountSetup: React.FC = () => {
           onEnter={() => dispatch(setCurrentStep(currentStep + 1))}
           styles={styles}
           isDarkMode={isDarkMode}
+          token={token}
         />
       ),
     },
     {
       title: '',
-      content: <MembersStep isDarkMode={isDarkMode} styles={styles} />,
+      content: <MembersStep isDarkMode={isDarkMode} styles={styles} token={token} />,
     },
   ];
 
@@ -224,10 +326,21 @@ const AccountSetup: React.FC = () => {
       case 0:
         return !organizationName?.trim();
       case 1:
-        return !projectName?.trim() && !templateId;
+        // Survey step - check current sub-step requirements
+        if (surveySubStep === 0) {
+          return !(surveyData.organization_type && surveyData.user_role);
+        } else if (surveySubStep === 1) {
+          return !(surveyData.main_use_cases && surveyData.main_use_cases.length > 0);
+        } else if (surveySubStep === 2) {
+          return !surveyData.how_heard_about;
+        }
+        return false;
       case 2:
-        return tasks.length === 0 || tasks.every(task => !task.value?.trim());
+        // Project step - either project name OR template must be provided
+        return !projectName?.trim() && !templateId;
       case 3:
+        return tasks.length === 0 || tasks.every(task => !task.value?.trim());
+      case 4:
         return (
           teamMembers.length > 0 && !teamMembers.some(member => validateEmail(member.value?.trim()))
         );
@@ -236,58 +349,267 @@ const AccountSetup: React.FC = () => {
     }
   };
 
-  const nextStep = () => {
-    if (currentStep === 3) {
+  const saveSurveyData = async () => {
+    if (!surveyId || !surveyData) {
+      logger.error('Skipping survey save - no survey ID or data (info replaced with error)');
+      return;
+    }
+
+    try {
+      const answers: ISurveyAnswer[] = [];
+      
+      // Get the survey questions to map data properly
+      const surveyResponse = await surveyApiService.getAccountSetupSurvey();
+      if (!surveyResponse.done || !surveyResponse.body?.questions) {
+        logger.error('Could not retrieve survey questions for data mapping (warn replaced with error)');
+        return;
+      }
+
+      const questions = surveyResponse.body.questions;
+
+      // Map survey data to answers based on question keys
+      questions.forEach(question => {
+        switch (question.question_key) {
+          case 'organization_type':
+            if (surveyData.organization_type) {
+              answers.push({
+                question_id: question.id,
+                answer_text: surveyData.organization_type
+              });
+            }
+            break;
+          case 'user_role':
+            if (surveyData.user_role) {
+              answers.push({
+                question_id: question.id,
+                answer_text: surveyData.user_role
+              });
+            }
+            break;
+          case 'main_use_cases':
+            if (surveyData.main_use_cases && surveyData.main_use_cases.length > 0) {
+              answers.push({
+                question_id: question.id,
+                answer_json: surveyData.main_use_cases
+              });
+            }
+            break;
+          case 'previous_tools':
+            if (surveyData.previous_tools) {
+              answers.push({
+                question_id: question.id,
+                answer_text: surveyData.previous_tools
+              });
+            }
+            break;
+          case 'how_heard_about':
+            if (surveyData.how_heard_about) {
+              answers.push({
+                question_id: question.id,
+                answer_text: surveyData.how_heard_about
+              });
+            }
+            break;
+        }
+      });
+
+      if (answers.length > 0) {
+        const submissionData: ISurveySubmissionRequest = {
+          survey_id: surveyId,
+          answers
+        };
+        
+        const result = await surveyApiService.submitSurveyResponse(submissionData);
+        if (result.done) {
+          logger.error('Survey data saved successfully (info replaced with error)');
+        } else {
+          logger.error('Survey submission returned unsuccessful response (warn replaced with error)');
+        }
+      } else {
+        logger.error('No survey answers to save (info replaced with error)');
+      }
+    } catch (error) {
+      logger.error('Failed to save survey data', error);
+      // Don't block account setup flow if survey fails
+    }
+  };
+
+  const nextStep = async () => {
+    if (currentStep === 1) {
+      // Handle survey sub-step navigation
+      if (surveySubStep < 2) {
+        // Move to next survey sub-step
+        dispatch(setSurveySubStep(surveySubStep + 1));
+      } else {
+        // Survey completed, save data and move to next main step
+        await saveSurveyData();
+        dispatch(setCurrentStep(currentStep + 1));
+        dispatch(setSurveySubStep(0)); // Reset for next time
+      }
+    } else if (currentStep === 2) {
+      // Project step - check if template is selected
+      if (templateId) {
+        // Template selected, complete account setup with template
+        await completeAccountSetupWithTemplate();
+      } else {
+        // No template, proceed to tasks step
+        dispatch(setCurrentStep(currentStep + 1));
+      }
+    } else if (currentStep === 4) {
+      // Complete setup after members step
       completeAccountSetup();
     } else {
       dispatch(setCurrentStep(currentStep + 1));
     }
   };
 
+  // Language switcher functionality
+  const languages = [
+    { key: Language.EN, label: 'English', flag: '🇺🇸' },
+    { key: Language.ES, label: 'Español', flag: '🇪🇸' },
+    { key: Language.PT, label: 'Português', flag: '🇵🇹' },
+    { key: Language.DE, label: 'Deutsch', flag: '🇩🇪' },
+    { key: Language.ALB, label: 'Shqip', flag: '🇦🇱' },
+    { key: Language.ZH_CN, label: '简体中文', flag: '🇨🇳' }
+  ];
+
+  const handleLanguageChange = (languageKey: ILanguageType) => {
+    dispatch(setLanguage(languageKey));
+    i18n.changeLanguage(languageKey);
+  };
+
+  const handleThemeToggle = () => {
+    dispatch(toggleTheme());
+  };
+
+  const languageMenuItems: MenuProps['items'] = languages.map(lang => ({
+    key: lang.key,
+    label: (
+      <div className="flex items-center space-x-2">
+        <span>{lang.flag}</span>
+        <span>{lang.label}</span>
+      </div>
+    ),
+    onClick: () => handleLanguageChange(lang.key as ILanguageType)
+  }));
+
+  const currentLanguage = languages.find(lang => lang.key === lng) || languages[0];
+
   return (
-    <div style={styles.container}>
-      <div>
+    <div 
+      className="account-setup-container min-h-screen w-full flex flex-col items-center py-8 px-4 relative"
+      style={{ backgroundColor: token.colorBgLayout }}
+    >
+      {/* Controls - Top Right */}
+      <div className="absolute top-6 right-6 flex items-center space-x-3">
+        {/* Theme Switcher */}
+        <Button
+          type="text"
+          size="small"
+          icon={isDarkMode ? <SunOutlined /> : <MoonOutlined />}
+          onClick={handleThemeToggle}
+          className="flex items-center"
+          style={{ color: token?.colorTextTertiary }}
+          title={isDarkMode ? 'Switch to light mode' : 'Switch to dark mode'}
+        />
+        
+        {/* Language Switcher */}
+        <Dropdown
+          menu={{ items: languageMenuItems }}
+          placement="bottomRight"
+          trigger={['click']}
+        >
+          <Button
+            type="text"
+            size="small"
+            icon={<GlobalOutlined />}
+            className="flex items-center space-x-2"
+            style={{ color: token?.colorTextTertiary }}
+          >
+            <span>{currentLanguage.flag}</span>
+            <span>{currentLanguage.label}</span>
+          </Button>
+        </Dropdown>
+      </div>
+
+      {/* Logo */}
+      <div className="mb-4">
         <img src={isDarkMode ? logoDark : logo} alt="Logo" width={235} height={50} />
       </div>
-      <Title level={5} style={{ textAlign: 'center', margin: '4px 0 24px' }}>
+      
+      {/* Title */}
+      <Title 
+        level={3} 
+        className="text-center mb-6 font-semibold"
+        style={{ color: token.colorText }}
+      >
         {t('setupYourAccount')}
       </Title>
-      <div style={styles.contentContainer}>
-        <Space className={isDarkMode ? 'dark-mode' : ''} style={styles.space} direction="vertical">
-          <Steps
-            className={isContinueDisabled() ? 'step' : 'progress-steps'}
-            current={currentStep}
-            items={steps}
-            style={styles.steps}
-          />
-          <div className="step-content" style={styles.stepContent}>
-            {steps[currentStep].content}
+      
+      {/* Content Container */}
+      <div 
+        className="w-full max-w-4xl rounded-lg shadow-lg mt-6 p-8"
+        style={{
+          backgroundColor: token.colorBgContainer,
+          borderColor: token.colorBorder,
+          border: `1px solid ${token.colorBorder}`,
+          boxShadow: token.boxShadowTertiary
+        }}
+      >
+        <div className="flex flex-col items-center space-y-6 w-full">
+          {/* Steps */}
+          <div className="w-full max-w-2xl">
+            <Steps
+              className={`${isContinueDisabled() ? 'step' : 'progress-steps'} ${isDarkMode ? 'dark-mode' : 'light-mode'}`}
+              current={currentStep}
+              items={steps}
+            />
+          </div>
+          
+          {/* Step Content */}
+          <div className="w-full max-w-2xl flex flex-col items-center min-h-fit">
+            <div className="step-content w-full">
+              {steps[currentStep].content}
+            </div>
           </div>
-          <div style={styles.actionButtons} className="setup-action-buttons">
-            <div
-              style={{
-                display: 'flex',
-                justifyContent: currentStep !== 0 ? 'space-between' : 'flex-end',
-              }}
-            >
+          
+          {/* Action Buttons */}
+          <div className="w-full max-w-2xl mt-8">
+            <div className={`flex ${
+              currentStep !== 0 ? 'justify-between' : 'justify-end'
+            } items-center`}>
               {currentStep !== 0 && (
-                <div>
+                <div className="flex flex-col space-y-2">
                   <Button
-                    style={{ padding: 0 }}
                     type="link"
-                    className="my-7"
-                    onClick={() => dispatch(setCurrentStep(currentStep - 1))}
+                    className="p-0 font-medium"
+                    style={{ color: token.colorTextSecondary }}
+                    onClick={() => {
+                      if (currentStep === 1 && surveySubStep > 0) {
+                        // Go back within survey sub-steps
+                        dispatch(setSurveySubStep(surveySubStep - 1));
+                      } else {
+                        // Go back to previous main step
+                        dispatch(setCurrentStep(currentStep - 1));
+                        if (currentStep === 2) {
+                          // When going back to survey from next step, go to last sub-step
+                          dispatch(setSurveySubStep(2));
+                        }
+                      }
+                    }}
                   >
                     {t('goBack')}
                   </Button>
-                  {currentStep === 3 && (
+                  {currentStep === 4 && (
                     <Button
-                      style={{ color: isDarkMode ? '' : '#00000073', fontWeight: 500 }}
                       type="link"
-                      className="my-7"
-                      onClick={() => completeAccountSetup(true)}
+                      className="p-0 font-medium"
+                      style={{ color: token.colorTextTertiary }}
+                      onClick={handleSkipMembers}
+                      loading={isSkipping}
+                      disabled={isSkipping}
                     >
-                      {t('skipForNow')}
+                      {isSkipping ? t('skipping') : t('skipForNow')}
                     </Button>
                   )}
                 </div>
@@ -296,14 +618,13 @@ const AccountSetup: React.FC = () => {
                 type="primary"
                 htmlType="submit"
                 disabled={isContinueDisabled()}
-                className="mt-7 mb-7"
                 onClick={nextStep}
               >
                 {t('continue')}
               </Button>
             </div>
           </div>
-        </Space>
+        </div>
       </div>
     </div>
   );
diff --git a/worklenz-frontend/src/pages/auth/__tests__/AuthenticatingPage.test.tsx b/worklenz-frontend/src/pages/auth/__tests__/AuthenticatingPage.test.tsx
new file mode 100644
index 000000000..3414f33e8
--- /dev/null
+++ b/worklenz-frontend/src/pages/auth/__tests__/AuthenticatingPage.test.tsx
@@ -0,0 +1,228 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import { BrowserRouter } from 'react-router-dom';
+import { Provider } from 'react-redux';
+import { configureStore } from '@reduxjs/toolkit';
+import { vi, describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { I18nextProvider } from 'react-i18next';
+import i18n from 'i18next';
+
+import AuthenticatingPage from '../AuthenticatingPage';
+import { verifyAuthentication } from '@/features/auth/authSlice';
+import { setUser } from '@/features/user/userSlice';
+import { setSession } from '@/utils/session-helper';
+
+// Mock dependencies
+vi.mock('@/features/auth/authSlice', () => ({
+  verifyAuthentication: vi.fn(),
+}));
+
+vi.mock('@/features/user/userSlice', () => ({
+  setUser: vi.fn(),
+}));
+
+vi.mock('@/utils/session-helper', () => ({
+  setSession: vi.fn(),
+}));
+
+vi.mock('@/utils/errorLogger', () => ({
+  default: {
+    error: vi.fn(),
+  },
+}));
+
+vi.mock('@/shared/constants', () => ({
+  WORKLENZ_REDIRECT_PROJ_KEY: 'worklenz_redirect_proj',
+}));
+
+// Mock navigation
+const mockNavigate = vi.fn();
+vi.mock('react-router-dom', async () => {
+  const actual = await vi.importActual('react-router-dom');
+  return {
+    ...actual,
+    useNavigate: () => mockNavigate,
+  };
+});
+
+// Mock dispatch
+const mockDispatch = vi.fn();
+vi.mock('@/hooks/useAppDispatch', () => ({
+  useAppDispatch: () => mockDispatch,
+}));
+
+// Setup i18n for testing
+i18n.init({
+  lng: 'en',
+  resources: {
+    en: {
+      'auth/auth-common': {
+        authenticating: 'Authenticating...',
+        gettingThingsReady: 'Getting things ready for you...',
+      },
+    },
+  },
+});
+
+// Create test store
+const createTestStore = () => {
+  return configureStore({
+    reducer: {
+      auth: (state = {}) => state,
+      user: (state = {}) => state,
+    },
+  });
+};
+
+const renderWithProviders = (component: React.ReactElement) => {
+  const store = createTestStore();
+  return render(
+    <Provider store={store}>
+      <BrowserRouter>
+        <I18nextProvider i18n={i18n}>
+          {component}
+        </I18nextProvider>
+      </BrowserRouter>
+    </Provider>
+  );
+};
+
+describe('AuthenticatingPage', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.useFakeTimers();
+    localStorage.clear();
+    // Mock window.location
+    Object.defineProperty(window, 'location', {
+      value: { href: '' },
+      writable: true,
+    });
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it('renders loading state correctly', () => {
+    renderWithProviders(<AuthenticatingPage />);
+    
+    expect(screen.getByText('Authenticating...')).toBeInTheDocument();
+    expect(screen.getByText('Getting things ready for you...')).toBeInTheDocument();
+    expect(screen.getByRole('generic', { busy: true })).toBeInTheDocument();
+  });
+
+  it('redirects to login when authentication fails', async () => {
+    mockDispatch.mockReturnValue({
+      unwrap: vi.fn().mockResolvedValue({ authenticated: false }),
+    });
+
+    renderWithProviders(<AuthenticatingPage />);
+
+    // Run all pending timers
+    await vi.runAllTimersAsync();
+
+    expect(mockNavigate).toHaveBeenCalledWith('/auth/login');
+  });
+
+  it('redirects to setup when user setup is not completed', async () => {
+    const mockUser = {
+      id: '1',
+      email: 'test@example.com',
+      setup_completed: false,
+    };
+
+    mockDispatch.mockReturnValue({
+      unwrap: vi.fn().mockResolvedValue({
+        authenticated: true,
+        user: mockUser,
+      }),
+    });
+
+    renderWithProviders(<AuthenticatingPage />);
+
+    // Run all pending timers
+    await vi.runAllTimersAsync();
+
+    expect(setSession).toHaveBeenCalledWith(mockUser);
+    expect(setUser).toHaveBeenCalledWith(mockUser);
+    expect(mockNavigate).toHaveBeenCalledWith('/worklenz/setup');
+  });
+
+  it('redirects to home after successful authentication', async () => {
+    const mockUser = {
+      id: '1',
+      email: 'test@example.com',
+      setup_completed: true,
+    };
+
+    mockDispatch.mockReturnValue({
+      unwrap: vi.fn().mockResolvedValue({
+        authenticated: true,
+        user: mockUser,
+      }),
+    });
+
+    renderWithProviders(<AuthenticatingPage />);
+
+    // Run all pending timers
+    await vi.runAllTimersAsync();
+
+    expect(setSession).toHaveBeenCalledWith(mockUser);
+    expect(setUser).toHaveBeenCalledWith(mockUser);
+    expect(mockNavigate).toHaveBeenCalledWith('/worklenz/home');
+  });
+
+  it('redirects to project when redirect key is present in localStorage', async () => {
+    const projectId = 'test-project-123';
+    localStorage.setItem('worklenz_redirect_proj', projectId);
+
+    const mockUser = {
+      id: '1',
+      email: 'test@example.com',
+      setup_completed: true,
+    };
+
+    mockDispatch.mockReturnValue({
+      unwrap: vi.fn().mockResolvedValue({
+        authenticated: true,
+        user: mockUser,
+      }),
+    });
+
+    // Mock window.location with a proper setter
+    let hrefValue = '';
+    Object.defineProperty(window, 'location', {
+      value: {
+        get href() {
+          return hrefValue;
+        },
+        set href(value) {
+          hrefValue = value;
+        },
+      },
+      writable: true,
+    });
+
+    renderWithProviders(<AuthenticatingPage />);
+
+    // Run all pending timers
+    await vi.runAllTimersAsync();
+
+    expect(setSession).toHaveBeenCalledWith(mockUser);
+    expect(setUser).toHaveBeenCalledWith(mockUser);
+    expect(hrefValue).toBe(`/worklenz/projects/${projectId}?tab=tasks-list`);
+    expect(localStorage.getItem('worklenz_redirect_proj')).toBeNull();
+  });
+
+  it('handles authentication errors and redirects to login', async () => {
+    mockDispatch.mockReturnValue({
+      unwrap: vi.fn().mockRejectedValue(new Error('Authentication failed')),
+    });
+
+    renderWithProviders(<AuthenticatingPage />);
+
+    // Run all pending timers
+    await vi.runAllTimersAsync();
+
+    expect(mockNavigate).toHaveBeenCalledWith('/auth/login');
+  });
+});
\ No newline at end of file
diff --git a/worklenz-frontend/src/pages/auth/__tests__/ForgotPasswordPage.test.tsx b/worklenz-frontend/src/pages/auth/__tests__/ForgotPasswordPage.test.tsx
new file mode 100644
index 000000000..b8101e9ef
--- /dev/null
+++ b/worklenz-frontend/src/pages/auth/__tests__/ForgotPasswordPage.test.tsx
@@ -0,0 +1,286 @@
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { BrowserRouter } from 'react-router-dom';
+import { Provider } from 'react-redux';
+import { configureStore } from '@reduxjs/toolkit';
+import { vi, describe, it, expect, beforeEach } from 'vitest';
+import { I18nextProvider } from 'react-i18next';
+import i18n from 'i18next';
+
+import ForgotPasswordPage from '../ForgotPasswordPage';
+import { resetPassword, verifyAuthentication } from '@/features/auth/authSlice';
+
+// Mock dependencies
+vi.mock('@/features/auth/authSlice', () => ({
+  resetPassword: vi.fn(),
+  verifyAuthentication: vi.fn(),
+}));
+
+vi.mock('@/features/user/userSlice', () => ({
+  setUser: vi.fn(),
+}));
+
+vi.mock('@/utils/session-helper', () => ({
+  setSession: vi.fn(),
+}));
+
+vi.mock('@/utils/errorLogger', () => ({
+  default: {
+    error: vi.fn(),
+  },
+}));
+
+vi.mock('@/hooks/useMixpanelTracking', () => ({
+  useMixpanelTracking: () => ({
+    trackMixpanelEvent: vi.fn(),
+  }),
+}));
+
+vi.mock('@/hooks/useDoumentTItle', () => ({
+  useDocumentTitle: vi.fn(),
+}));
+
+vi.mock('react-responsive', () => ({
+  useMediaQuery: () => false,
+}));
+
+// Mock navigation
+const mockNavigate = vi.fn();
+vi.mock('react-router-dom', async () => {
+  const actual = await vi.importActual('react-router-dom');
+  return {
+    ...actual,
+    useNavigate: () => mockNavigate,
+  };
+});
+
+// Mock dispatch
+const mockDispatch = vi.fn();
+vi.mock('@/hooks/useAppDispatch', () => ({
+  useAppDispatch: () => mockDispatch,
+}));
+
+// Setup i18n for testing
+i18n.init({
+  lng: 'en',
+  resources: {
+    en: {
+      'auth/forgot-password': {
+        headerDescription: 'Enter your email to reset your password',
+        emailRequired: 'Please input your email!',
+        emailPlaceholder: 'Enter your email',
+        resetPasswordButton: 'Reset Password',
+        returnToLoginButton: 'Return to Login',
+        orText: 'or',
+        successTitle: 'Password Reset Email Sent',
+        successMessage: 'Please check your email for instructions to reset your password.',
+      },
+    },
+  },
+});
+
+// Create test store
+const createTestStore = () => {
+  return configureStore({
+    reducer: {
+      auth: (state = {}) => state,
+      user: (state = {}) => state,
+    },
+  });
+};
+
+const renderWithProviders = (component: React.ReactElement) => {
+  const store = createTestStore();
+  return render(
+    <Provider store={store}>
+      <BrowserRouter>
+        <I18nextProvider i18n={i18n}>
+          {component}
+        </I18nextProvider>
+      </BrowserRouter>
+    </Provider>
+  );
+};
+
+describe('ForgotPasswordPage', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    // Mock URL search params
+    Object.defineProperty(window, 'location', {
+      value: { search: '' },
+      writable: true,
+    });
+  });
+
+  it('renders forgot password form correctly', () => {
+    renderWithProviders(<ForgotPasswordPage />);
+    
+    expect(screen.getByText('Enter your email to reset your password')).toBeInTheDocument();
+    expect(screen.getByPlaceholderText('Enter your email')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Reset Password' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Return to Login' })).toBeInTheDocument();
+    expect(screen.getByText('or')).toBeInTheDocument();
+  });
+
+  it('validates required email field', async () => {
+    const user = userEvent.setup();
+    renderWithProviders(<ForgotPasswordPage />);
+    
+    const submitButton = screen.getByRole('button', { name: 'Reset Password' });
+    await user.click(submitButton);
+    
+    await waitFor(() => {
+      expect(screen.getByText('Please input your email!')).toBeInTheDocument();
+    });
+  });
+
+  it('validates email format', async () => {
+    const user = userEvent.setup();
+    renderWithProviders(<ForgotPasswordPage />);
+    
+    const emailInput = screen.getByPlaceholderText('Enter your email');
+    await user.type(emailInput, 'invalid-email');
+    
+    const submitButton = screen.getByRole('button', { name: 'Reset Password' });
+    await user.click(submitButton);
+    
+    await waitFor(() => {
+      expect(screen.getByText('Please input your email!')).toBeInTheDocument();
+    });
+  });
+
+  it('submits form with valid email', async () => {
+    const user = userEvent.setup();
+    mockDispatch.mockReturnValue({
+      unwrap: vi.fn().mockResolvedValue({ done: true }),
+    });
+
+    renderWithProviders(<ForgotPasswordPage />);
+    
+    const emailInput = screen.getByPlaceholderText('Enter your email');
+    await user.type(emailInput, 'test@example.com');
+    
+    const submitButton = screen.getByRole('button', { name: 'Reset Password' });
+    await user.click(submitButton);
+    
+    await waitFor(() => {
+      expect(resetPassword).toHaveBeenCalledWith('test@example.com');
+    });
+  });
+
+  it('shows success message after successful submission', async () => {
+    const user = userEvent.setup();
+    mockDispatch.mockReturnValue({
+      unwrap: vi.fn().mockResolvedValue({ done: true }),
+    });
+
+    renderWithProviders(<ForgotPasswordPage />);
+    
+    const emailInput = screen.getByPlaceholderText('Enter your email');
+    await user.type(emailInput, 'test@example.com');
+    
+    const submitButton = screen.getByRole('button', { name: 'Reset Password' });
+    await user.click(submitButton);
+    
+    await waitFor(() => {
+      expect(screen.getByText('Password Reset Email Sent')).toBeInTheDocument();
+      expect(screen.getByText('Please check your email for instructions to reset your password.')).toBeInTheDocument();
+    });
+  });
+
+  it('shows loading state during submission', async () => {
+    const user = userEvent.setup();
+    mockDispatch.mockReturnValue({
+      unwrap: vi.fn().mockImplementation(() => new Promise(() => {})), // Never resolves
+    });
+
+    renderWithProviders(<ForgotPasswordPage />);
+    
+    const emailInput = screen.getByPlaceholderText('Enter your email');
+    await user.type(emailInput, 'test@example.com');
+    
+    const submitButton = screen.getByRole('button', { name: 'Reset Password' });
+    await user.click(submitButton);
+    
+    await waitFor(() => {
+      expect(screen.getByRole('img', { name: /loading/i })).toBeInTheDocument();
+    });
+  });
+
+  it('handles submission errors gracefully', async () => {
+    const user = userEvent.setup();
+    mockDispatch.mockReturnValue({
+      unwrap: vi.fn().mockRejectedValue(new Error('Reset failed')),
+    });
+
+    renderWithProviders(<ForgotPasswordPage />);
+    
+    const emailInput = screen.getByPlaceholderText('Enter your email');
+    await user.type(emailInput, 'test@example.com');
+    
+    const submitButton = screen.getByRole('button', { name: 'Reset Password' });
+    await user.click(submitButton);
+    
+    await waitFor(() => {
+      // Should not show success message
+      expect(screen.queryByText('Password Reset Email Sent')).not.toBeInTheDocument();
+      // Should still show the form
+      expect(screen.getByPlaceholderText('Enter your email')).toBeInTheDocument();
+    });
+  });
+
+  it('navigates to login page when return button is clicked', async () => {
+    const user = userEvent.setup();
+    renderWithProviders(<ForgotPasswordPage />);
+    
+    const returnButton = screen.getByRole('button', { name: 'Return to Login' });
+    await user.click(returnButton);
+    
+    expect(returnButton.closest('a')).toHaveAttribute('href', '/auth/login');
+  });
+
+  it('handles team parameter from URL', () => {
+    Object.defineProperty(window, 'location', {
+      value: { search: '?team=test-team-id' },
+      writable: true,
+    });
+
+    renderWithProviders(<ForgotPasswordPage />);
+    
+    // Component should render normally even with team parameter
+    expect(screen.getByText('Enter your email to reset your password')).toBeInTheDocument();
+  });
+
+  it('redirects authenticated users to home', async () => {
+    mockDispatch.mockReturnValue({
+      unwrap: vi.fn().mockResolvedValue({
+        authenticated: true,
+        user: { id: '1', email: 'test@example.com' },
+      }),
+    });
+
+    renderWithProviders(<ForgotPasswordPage />);
+
+    await waitFor(() => {
+      expect(mockNavigate).toHaveBeenCalledWith('/worklenz/home');
+    });
+  });
+
+  it('does not submit with empty email after trimming', async () => {
+    const user = userEvent.setup();
+    mockDispatch.mockReturnValue({
+      unwrap: vi.fn().mockResolvedValue({ done: true }),
+    });
+
+    renderWithProviders(<ForgotPasswordPage />);
+    
+    const emailInput = screen.getByPlaceholderText('Enter your email');
+    await user.type(emailInput, '   '); // Only whitespace
+    
+    const submitButton = screen.getByRole('button', { name: 'Reset Password' });
+    await user.click(submitButton);
+    
+    // Should not call resetPassword with empty string
+    expect(resetPassword).not.toHaveBeenCalled();
+  });
+});
\ No newline at end of file
diff --git a/worklenz-frontend/src/pages/auth/__tests__/LoggingOutPage.test.tsx b/worklenz-frontend/src/pages/auth/__tests__/LoggingOutPage.test.tsx
new file mode 100644
index 000000000..6d809ccb2
--- /dev/null
+++ b/worklenz-frontend/src/pages/auth/__tests__/LoggingOutPage.test.tsx
@@ -0,0 +1,241 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import { BrowserRouter } from 'react-router-dom';
+import { vi, describe, it, expect, beforeEach } from 'vitest';
+import { I18nextProvider } from 'react-i18next';
+import i18n from 'i18next';
+
+import LoggingOutPage from '../LoggingOutPage';
+import { authApiService } from '@/api/auth/auth.api.service';
+import CacheCleanup from '@/utils/cache-cleanup';
+
+// Mock dependencies
+const mockAuthService = {
+  signOut: vi.fn(),
+};
+
+vi.mock('@/hooks/useAuth', () => ({
+  useAuthService: () => mockAuthService,
+}));
+
+vi.mock('@/api/auth/auth.api.service', () => ({
+  authApiService: {
+    logout: vi.fn(),
+  },
+}));
+
+vi.mock('@/utils/cache-cleanup', () => ({
+  default: {
+    clearAllCaches: vi.fn(),
+    forceReload: vi.fn(),
+  },
+}));
+
+vi.mock('react-responsive', () => ({
+  useMediaQuery: () => false,
+}));
+
+// Mock navigation
+const mockNavigate = vi.fn();
+vi.mock('react-router-dom', async () => {
+  const actual = await vi.importActual('react-router-dom');
+  return {
+    ...actual,
+    useNavigate: () => mockNavigate,
+  };
+});
+
+// Setup i18n for testing
+i18n.init({
+  lng: 'en',
+  resources: {
+    en: {
+      'auth/auth-common': {
+        loggingOut: 'Logging Out...',
+      },
+    },
+  },
+});
+
+const renderWithProviders = (component: React.ReactElement) => {
+  return render(
+    <BrowserRouter>
+      <I18nextProvider i18n={i18n}>
+        {component}
+      </I18nextProvider>
+    </BrowserRouter>
+  );
+};
+
+describe('LoggingOutPage', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.useFakeTimers();
+    
+    // Mock console.error to avoid noise in tests
+    vi.spyOn(console, 'error').mockImplementation(() => {});
+    
+    vi.mock('@/hooks/useAuth', () => ({
+      useAuthService: () => mockAuthService,
+    }));
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+    vi.restoreAllMocks();
+  });
+
+  it('renders loading state correctly', () => {
+    renderWithProviders(<LoggingOutPage />);
+    
+    expect(screen.getByText('Logging Out...')).toBeInTheDocument();
+    expect(screen.getByRole('img', { name: /loading/i })).toBeInTheDocument();
+  });
+
+  it('performs complete logout sequence successfully', async () => {
+    mockAuthService.signOut.mockResolvedValue(undefined);
+    (authApiService.logout as any).mockResolvedValue(undefined);
+    (CacheCleanup.clearAllCaches as any).mockResolvedValue(undefined);
+
+    renderWithProviders(<LoggingOutPage />);
+
+    await waitFor(() => {
+      expect(mockAuthService.signOut).toHaveBeenCalled();
+    });
+
+    await waitFor(() => {
+      expect(authApiService.logout).toHaveBeenCalled();
+    });
+
+    await waitFor(() => {
+      expect(CacheCleanup.clearAllCaches).toHaveBeenCalled();
+    });
+
+    // Fast-forward time to trigger the setTimeout
+    vi.advanceTimersByTime(1000);
+
+    await waitFor(() => {
+      expect(CacheCleanup.forceReload).toHaveBeenCalledWith('/auth/login');
+    });
+  });
+
+  it('handles auth service signOut failure', async () => {
+    mockAuthService.signOut.mockRejectedValue(new Error('SignOut failed'));
+    (authApiService.logout as any).mockResolvedValue(undefined);
+    (CacheCleanup.clearAllCaches as any).mockResolvedValue(undefined);
+
+    renderWithProviders(<LoggingOutPage />);
+
+    await waitFor(() => {
+      expect(mockAuthService.signOut).toHaveBeenCalled();
+    });
+
+    await waitFor(() => {
+      expect(console.error).toHaveBeenCalledWith('Logout error:', expect.any(Error));
+      expect(CacheCleanup.forceReload).toHaveBeenCalledWith('/auth/login');
+    });
+  });
+
+  it('handles backend logout failure', async () => {
+    mockAuthService.signOut.mockResolvedValue(undefined);
+    (authApiService.logout as any).mockRejectedValue(new Error('Backend logout failed'));
+    (CacheCleanup.clearAllCaches as any).mockResolvedValue(undefined);
+
+    renderWithProviders(<LoggingOutPage />);
+
+    await waitFor(() => {
+      expect(mockAuthService.signOut).toHaveBeenCalled();
+    });
+
+    await waitFor(() => {
+      expect(authApiService.logout).toHaveBeenCalled();
+    });
+
+    await waitFor(() => {
+      expect(console.error).toHaveBeenCalledWith('Logout error:', expect.any(Error));
+      expect(CacheCleanup.forceReload).toHaveBeenCalledWith('/auth/login');
+    });
+  });
+
+  it('handles cache cleanup failure', async () => {
+    mockAuthService.signOut.mockResolvedValue(undefined);
+    (authApiService.logout as any).mockResolvedValue(undefined);
+    (CacheCleanup.clearAllCaches as any).mockRejectedValue(new Error('Cache cleanup failed'));
+
+    renderWithProviders(<LoggingOutPage />);
+
+    await waitFor(() => {
+      expect(mockAuthService.signOut).toHaveBeenCalled();
+    });
+
+    await waitFor(() => {
+      expect(authApiService.logout).toHaveBeenCalled();
+    });
+
+    await waitFor(() => {
+      expect(CacheCleanup.clearAllCaches).toHaveBeenCalled();
+    });
+
+    await waitFor(() => {
+      expect(console.error).toHaveBeenCalledWith('Logout error:', expect.any(Error));
+      expect(CacheCleanup.forceReload).toHaveBeenCalledWith('/auth/login');
+    });
+  });
+
+  it('triggers logout sequence immediately on mount', () => {
+    renderWithProviders(<LoggingOutPage />);
+
+    expect(mockAuthService.signOut).toHaveBeenCalled();
+  });
+
+  it('shows consistent loading UI throughout logout process', async () => {
+    mockAuthService.signOut.mockImplementation(() => new Promise(resolve => setTimeout(resolve, 100)));
+    (authApiService.logout as any).mockImplementation(() => new Promise(resolve => setTimeout(resolve, 100)));
+    (CacheCleanup.clearAllCaches as any).mockImplementation(() => new Promise(resolve => setTimeout(resolve, 100)));
+
+    renderWithProviders(<LoggingOutPage />);
+
+    // Should show loading state immediately
+    expect(screen.getByText('Logging Out...')).toBeInTheDocument();
+    expect(screen.getByRole('img', { name: /loading/i })).toBeInTheDocument();
+
+    // Should continue showing loading state during the process
+    vi.advanceTimersByTime(50);
+    
+    expect(screen.getByText('Logging Out...')).toBeInTheDocument();
+    expect(screen.getByRole('img', { name: /loading/i })).toBeInTheDocument();
+  });
+
+  it('calls forceReload with correct path after timeout', async () => {
+    mockAuthService.signOut.mockResolvedValue(undefined);
+    (authApiService.logout as any).mockResolvedValue(undefined);
+    (CacheCleanup.clearAllCaches as any).mockResolvedValue(undefined);
+
+    renderWithProviders(<LoggingOutPage />);
+
+    // Wait for all async operations to complete
+    await waitFor(() => {
+      expect(CacheCleanup.clearAllCaches).toHaveBeenCalled();
+    });
+
+    // Fast-forward exactly 1000ms
+    vi.advanceTimersByTime(1000);
+
+    await waitFor(() => {
+      expect(CacheCleanup.forceReload).toHaveBeenCalledWith('/auth/login');
+      expect(CacheCleanup.forceReload).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  it('handles complete failure of all logout steps', async () => {
+    mockAuthService.signOut.mockRejectedValue(new Error('SignOut failed'));
+    (authApiService.logout as any).mockRejectedValue(new Error('Backend logout failed'));
+    (CacheCleanup.clearAllCaches as any).mockRejectedValue(new Error('Cache cleanup failed'));
+
+    renderWithProviders(<LoggingOutPage />);
+
+    await waitFor(() => {
+      expect(console.error).toHaveBeenCalledWith('Logout error:', expect.any(Error));
+      expect(CacheCleanup.forceReload).toHaveBeenCalledWith('/auth/login');
+    });
+  });
+});
\ No newline at end of file
diff --git a/worklenz-frontend/src/pages/auth/__tests__/LoginPage.test.tsx b/worklenz-frontend/src/pages/auth/__tests__/LoginPage.test.tsx
new file mode 100644
index 000000000..ee93c5ef5
--- /dev/null
+++ b/worklenz-frontend/src/pages/auth/__tests__/LoginPage.test.tsx
@@ -0,0 +1,317 @@
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { BrowserRouter } from 'react-router-dom';
+import { Provider } from 'react-redux';
+import { configureStore } from '@reduxjs/toolkit';
+import { vi, describe, it, expect, beforeEach } from 'vitest';
+import { I18nextProvider } from 'react-i18next';
+import i18n from 'i18next';
+
+import LoginPage from '../LoginPage';
+import { login, verifyAuthentication } from '@/features/auth/authSlice';
+
+// Mock dependencies
+vi.mock('@/features/auth/authSlice', () => ({
+  login: vi.fn(),
+  verifyAuthentication: vi.fn(),
+}));
+
+vi.mock('@/features/user/userSlice', () => ({
+  setUser: vi.fn(),
+}));
+
+vi.mock('@/utils/session-helper', () => ({
+  setSession: vi.fn(),
+}));
+
+vi.mock('@/utils/errorLogger', () => ({
+  default: {
+    error: vi.fn(),
+  },
+}));
+
+vi.mock('@/hooks/useMixpanelTracking', () => ({
+  useMixpanelTracking: () => ({
+    trackMixpanelEvent: vi.fn(),
+  }),
+}));
+
+vi.mock('@/hooks/useDoumentTItle', () => ({
+  useDocumentTitle: vi.fn(),
+}));
+
+vi.mock('@/hooks/useAuth', () => ({
+  useAuthService: () => ({
+    getCurrentSession: () => null,
+  }),
+}));
+
+vi.mock('@/services/alerts/alertService', () => ({
+  default: {
+    error: vi.fn(),
+  },
+}));
+
+vi.mock('react-responsive', () => ({
+  useMediaQuery: () => false,
+}));
+
+// Mock navigation
+const mockNavigate = vi.fn();
+vi.mock('react-router-dom', async () => {
+  const actual = await vi.importActual('react-router-dom');
+  return {
+    ...actual,
+    useNavigate: () => mockNavigate,
+  };
+});
+
+// Mock dispatch
+const mockDispatch = vi.fn();
+vi.mock('@/hooks/useAppDispatch', () => ({
+  useAppDispatch: () => mockDispatch,
+}));
+
+// Setup i18n for testing
+i18n.init({
+  lng: 'en',
+  resources: {
+    en: {
+      'auth/login': {
+        headerDescription: 'Sign in to your account',
+        emailRequired: 'Please input your email!',
+        passwordRequired: 'Please input your password!',
+        emailPlaceholder: 'Email',
+        passwordPlaceholder: 'Password',
+        loginButton: 'Sign In',
+        rememberMe: 'Remember me',
+        forgotPasswordButton: 'Forgot password?',
+        signInWithGoogleButton: 'Sign in with Google',
+        orText: 'or',
+        dontHaveAccountText: "Don't have an account?",
+        signupButton: 'Sign up',
+        successMessage: 'Login successful!',
+        'validationMessages.email': 'Please enter a valid email!',
+        'validationMessages.password': 'Password must be at least 8 characters!',
+        'errorMessages.loginErrorTitle': 'Login Failed',
+        'errorMessages.loginErrorMessage': 'Invalid email or password',
+      },
+    },
+  },
+});
+
+// Create test store
+const createTestStore = (initialState: any = {}) => {
+  return configureStore({
+    reducer: {
+      auth: (state = { isLoading: false, ...initialState.auth }) => state,
+      user: (state = {}) => state,
+    },
+  });
+};
+
+const renderWithProviders = (component: React.ReactElement, initialState: any = {}) => {
+  const store = createTestStore(initialState);
+  return render(
+    <Provider store={store}>
+      <BrowserRouter>
+        <I18nextProvider i18n={i18n}>
+          {component}
+        </I18nextProvider>
+      </BrowserRouter>
+    </Provider>
+  );
+};
+
+describe('LoginPage', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    // Mock environment variables
+    vi.stubEnv('VITE_ENABLE_GOOGLE_LOGIN', 'true');
+    vi.stubEnv('VITE_API_URL', 'http://localhost:3000');
+  });
+
+  it('renders login form correctly', () => {
+    renderWithProviders(<LoginPage />);
+    
+    expect(screen.getByText('Sign in to your account')).toBeInTheDocument();
+    expect(screen.getByPlaceholderText('Email')).toBeInTheDocument();
+    expect(screen.getByPlaceholderText('Password')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Sign In' })).toBeInTheDocument();
+    expect(screen.getByText('Remember me')).toBeInTheDocument();
+    expect(screen.getByText('Forgot password?')).toBeInTheDocument();
+  });
+
+  it('shows Google login button when enabled', () => {
+    renderWithProviders(<LoginPage />);
+    
+    expect(screen.getByText('Sign in with Google')).toBeInTheDocument();
+  });
+
+  it('validates required fields', async () => {
+    const user = userEvent.setup();
+    renderWithProviders(<LoginPage />);
+    
+    const submitButton = screen.getByRole('button', { name: 'Sign In' });
+    await user.click(submitButton);
+    
+    await waitFor(() => {
+      expect(screen.getByText('Please input your email!')).toBeInTheDocument();
+      expect(screen.getByText('Please input your password!')).toBeInTheDocument();
+    });
+  });
+
+  it('validates email format', async () => {
+    const user = userEvent.setup();
+    renderWithProviders(<LoginPage />);
+    
+    const emailInput = screen.getByPlaceholderText('Email');
+    await user.type(emailInput, 'invalid-email');
+    
+    const submitButton = screen.getByRole('button', { name: 'Sign In' });
+    await user.click(submitButton);
+    
+    await waitFor(() => {
+      expect(screen.getByText('Please enter a valid email!')).toBeInTheDocument();
+    });
+  });
+
+  it('validates password minimum length', async () => {
+    const user = userEvent.setup();
+    renderWithProviders(<LoginPage />);
+    
+    const emailInput = screen.getByPlaceholderText('Email');
+    const passwordInput = screen.getByPlaceholderText('Password');
+    
+    await user.type(emailInput, 'test@example.com');
+    await user.type(passwordInput, '123');
+    
+    const submitButton = screen.getByRole('button', { name: 'Sign In' });
+    await user.click(submitButton);
+    
+    await waitFor(() => {
+      expect(screen.getByText('Password must be at least 8 characters!')).toBeInTheDocument();
+    });
+  });
+
+  it('submits form with valid credentials', async () => {
+    const user = userEvent.setup();
+    mockDispatch.mockReturnValue({
+      unwrap: vi.fn().mockResolvedValue({
+        authenticated: true,
+        user: { id: '1', email: 'test@example.com' },
+      }),
+    });
+
+    renderWithProviders(<LoginPage />);
+    
+    const emailInput = screen.getByPlaceholderText('Email');
+    const passwordInput = screen.getByPlaceholderText('Password');
+    
+    await user.type(emailInput, 'test@example.com');
+    await user.type(passwordInput, 'password123');
+    
+    const submitButton = screen.getByRole('button', { name: 'Sign In' });
+    await user.click(submitButton);
+    
+    await waitFor(() => {
+      expect(login).toHaveBeenCalledWith({
+        email: 'test@example.com',
+        password: 'password123',
+        remember: true,
+      });
+    });
+  });
+
+  it('shows loading state during login', async () => {
+    const user = userEvent.setup();
+    renderWithProviders(<LoginPage />, { auth: { isLoading: true } });
+    
+    const submitButton = screen.getByRole('button', { name: 'Sign In' });
+    expect(submitButton).toBeDisabled();
+    expect(screen.getByRole('img', { name: /loading/i })).toBeInTheDocument();
+  });
+
+  it('handles Google login click', async () => {
+    const user = userEvent.setup();
+    renderWithProviders(<LoginPage />);
+    
+    // Mock window.location
+    Object.defineProperty(window, 'location', {
+      value: { href: '' },
+      writable: true,
+    });
+    
+    const googleButton = screen.getByText('Sign in with Google');
+    await user.click(googleButton);
+    
+    expect(window.location.href).toBe('http://localhost:3000/secure/google');
+  });
+
+  it('navigates to signup page', async () => {
+    const user = userEvent.setup();
+    renderWithProviders(<LoginPage />);
+    
+    const signupLink = screen.getByText('Sign up');
+    await user.click(signupLink);
+    
+    // Link navigation is handled by React Router, so we just check the element exists
+    expect(signupLink.closest('a')).toHaveAttribute('href', '/auth/signup');
+  });
+
+  it('navigates to forgot password page', async () => {
+    const user = userEvent.setup();
+    renderWithProviders(<LoginPage />);
+    
+    const forgotPasswordLink = screen.getByText('Forgot password?');
+    await user.click(forgotPasswordLink);
+    
+    expect(forgotPasswordLink.closest('a')).toHaveAttribute('href', '/auth/forgot-password');
+  });
+
+  it('toggles remember me checkbox', async () => {
+    const user = userEvent.setup();
+    renderWithProviders(<LoginPage />);
+    
+    const rememberMeCheckbox = screen.getByRole('checkbox', { name: 'Remember me' });
+    expect(rememberMeCheckbox).toBeChecked(); // Default is true
+    
+    await user.click(rememberMeCheckbox);
+    expect(rememberMeCheckbox).not.toBeChecked();
+  });
+
+  it('redirects already authenticated users', async () => {
+    mockDispatch.mockReturnValue({
+      unwrap: vi.fn().mockResolvedValue({
+        authenticated: true,
+        user: { id: '1', email: 'test@example.com', setup_completed: true },
+      }),
+    });
+
+    renderWithProviders(<LoginPage />);
+
+    await waitFor(() => {
+      expect(mockNavigate).toHaveBeenCalledWith('/worklenz/home');
+    });
+  });
+
+  it('redirects to setup for users with incomplete setup', async () => {
+    const mockCurrentSession = {
+      id: '1',
+      email: 'test@example.com',
+      setup_completed: false,
+    };
+
+    vi.mock('@/hooks/useAuth', () => ({
+      useAuthService: () => ({
+        getCurrentSession: () => mockCurrentSession,
+      }),
+    }));
+
+    renderWithProviders(<LoginPage />);
+
+    await waitFor(() => {
+      expect(mockNavigate).toHaveBeenCalledWith('/worklenz/setup');
+    });
+  });
+});
\ No newline at end of file
diff --git a/worklenz-frontend/src/pages/auth/__tests__/SignupPage.test.tsx b/worklenz-frontend/src/pages/auth/__tests__/SignupPage.test.tsx
new file mode 100644
index 000000000..12a9a79e2
--- /dev/null
+++ b/worklenz-frontend/src/pages/auth/__tests__/SignupPage.test.tsx
@@ -0,0 +1,359 @@
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { BrowserRouter } from 'react-router-dom';
+import { Provider } from 'react-redux';
+import { configureStore } from '@reduxjs/toolkit';
+import { vi, describe, it, expect, beforeEach } from 'vitest';
+import { I18nextProvider } from 'react-i18next';
+import i18n from 'i18next';
+
+import SignupPage from '../SignupPage';
+import { signUp } from '@/features/auth/authSlice';
+import { authApiService } from '@/api/auth/auth.api.service';
+
+// Mock dependencies
+vi.mock('@/features/auth/authSlice', () => ({
+  signUp: vi.fn(),
+}));
+
+vi.mock('@/api/auth/auth.api.service', () => ({
+  authApiService: {
+    signUpCheck: vi.fn(),
+    verifyRecaptchaToken: vi.fn(),
+  },
+}));
+
+vi.mock('@/hooks/useMixpanelTracking', () => ({
+  useMixpanelTracking: () => ({
+    trackMixpanelEvent: vi.fn(),
+  }),
+}));
+
+vi.mock('@/hooks/useDoumentTItle', () => ({
+  useDocumentTitle: vi.fn(),
+}));
+
+vi.mock('@/utils/errorLogger', () => ({
+  default: {
+    error: vi.fn(),
+  },
+}));
+
+vi.mock('@/services/alerts/alertService', () => ({
+  default: {
+    error: vi.fn(),
+  },
+}));
+
+vi.mock('react-responsive', () => ({
+  useMediaQuery: () => false,
+}));
+
+// Mock navigation
+const mockNavigate = vi.fn();
+vi.mock('react-router-dom', async () => {
+  const actual = await vi.importActual('react-router-dom');
+  return {
+    ...actual,
+    useNavigate: () => mockNavigate,
+  };
+});
+
+// Mock dispatch
+const mockDispatch = vi.fn();
+vi.mock('@/hooks/useAppDispatch', () => ({
+  useAppDispatch: () => mockDispatch,
+}));
+
+// Setup i18n for testing
+i18n.init({
+  lng: 'en',
+  resources: {
+    en: {
+      'auth/signup': {
+        headerDescription: 'Sign up to get started',
+        nameLabel: 'Full Name',
+        emailLabel: 'Email',
+        passwordLabel: 'Password',
+        nameRequired: 'Please input your name!',
+        emailRequired: 'Please input your email!',
+        passwordRequired: 'Please input your password!',
+        nameMinCharacterRequired: 'Name must be at least 4 characters!',
+        passwordMinCharacterRequired: 'Password must be at least 8 characters!',
+        passwordMaxCharacterRequired: 'Password must be no more than 32 characters!',
+        passwordPatternRequired: 'Password must contain uppercase, lowercase, number and special character!',
+        namePlaceholder: 'Enter your full name',
+        emailPlaceholder: 'Enter your email',
+        strongPasswordPlaceholder: 'Enter a strong password',
+        passwordGuideline: 'Password must be at least 8 characters, include uppercase and lowercase letters, a number, and a special character.',
+        signupButton: 'Sign Up',
+        signInWithGoogleButton: 'Sign up with Google',
+        orText: 'or',
+        alreadyHaveAccountText: 'Already have an account?',
+        loginButton: 'Log in',
+        bySigningUpText: 'By signing up, you agree to our',
+        privacyPolicyLink: 'Privacy Policy',
+        andText: 'and',
+        termsOfUseLink: 'Terms of Use',
+        reCAPTCHAVerificationError: 'reCAPTCHA Verification Failed',
+        reCAPTCHAVerificationErrorMessage: 'Please try again',
+        'passwordChecklist.minLength': 'At least 8 characters',
+        'passwordChecklist.uppercase': 'One uppercase letter',
+        'passwordChecklist.lowercase': 'One lowercase letter',
+        'passwordChecklist.number': 'One number',
+        'passwordChecklist.special': 'One special character',
+      },
+    },
+  },
+});
+
+// Create test store
+const createTestStore = () => {
+  return configureStore({
+    reducer: {
+      themeReducer: (state = { mode: 'light' }) => state,
+    },
+  });
+};
+
+const renderWithProviders = (component: React.ReactElement) => {
+  const store = createTestStore();
+  return render(
+    <Provider store={store}>
+      <BrowserRouter>
+        <I18nextProvider i18n={i18n}>
+          {component}
+        </I18nextProvider>
+      </BrowserRouter>
+    </Provider>
+  );
+};
+
+describe('SignupPage', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    localStorage.clear();
+    // Mock environment variables
+    vi.stubEnv('VITE_ENABLE_GOOGLE_LOGIN', 'true');
+    vi.stubEnv('VITE_ENABLE_RECAPTCHA', 'false');
+    vi.stubEnv('VITE_API_URL', 'http://localhost:3000');
+    
+    // Mock URL search params
+    Object.defineProperty(window, 'location', {
+      value: { search: '' },
+      writable: true,
+    });
+  });
+
+  it('renders signup form correctly', () => {
+    renderWithProviders(<SignupPage />);
+    
+    expect(screen.getByText('Sign up to get started')).toBeInTheDocument();
+    expect(screen.getByPlaceholderText('Enter your full name')).toBeInTheDocument();
+    expect(screen.getByPlaceholderText('Enter your email')).toBeInTheDocument();
+    expect(screen.getByPlaceholderText('Enter a strong password')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Sign Up' })).toBeInTheDocument();
+  });
+
+  it('shows Google signup button when enabled', () => {
+    renderWithProviders(<SignupPage />);
+    
+    expect(screen.getByText('Sign up with Google')).toBeInTheDocument();
+  });
+
+  it('validates required fields', async () => {
+    const user = userEvent.setup();
+    renderWithProviders(<SignupPage />);
+    
+    const submitButton = screen.getByRole('button', { name: 'Sign Up' });
+    await user.click(submitButton);
+    
+    await waitFor(() => {
+      expect(screen.getByText('Please input your name!')).toBeInTheDocument();
+      expect(screen.getByText('Please input your email!')).toBeInTheDocument();
+      expect(screen.getByText('Please input your password!')).toBeInTheDocument();
+    });
+  });
+
+  it('validates name minimum length', async () => {
+    const user = userEvent.setup();
+    renderWithProviders(<SignupPage />);
+    
+    const nameInput = screen.getByPlaceholderText('Enter your full name');
+    await user.type(nameInput, 'Jo');
+    
+    const submitButton = screen.getByRole('button', { name: 'Sign Up' });
+    await user.click(submitButton);
+    
+    await waitFor(() => {
+      expect(screen.getByText('Name must be at least 4 characters!')).toBeInTheDocument();
+    });
+  });
+
+  it('validates email format', async () => {
+    const user = userEvent.setup();
+    renderWithProviders(<SignupPage />);
+    
+    const emailInput = screen.getByPlaceholderText('Enter your email');
+    await user.type(emailInput, 'invalid-email');
+    
+    const submitButton = screen.getByRole('button', { name: 'Sign Up' });
+    await user.click(submitButton);
+    
+    await waitFor(() => {
+      expect(screen.getByText('Please input your email!')).toBeInTheDocument();
+    });
+  });
+
+  it('validates password requirements', async () => {
+    const user = userEvent.setup();
+    renderWithProviders(<SignupPage />);
+    
+    const passwordInput = screen.getByPlaceholderText('Enter a strong password');
+    await user.type(passwordInput, 'weak');
+    
+    const submitButton = screen.getByRole('button', { name: 'Sign Up' });
+    await user.click(submitButton);
+    
+    await waitFor(() => {
+      expect(screen.getByText('Password must be at least 8 characters!')).toBeInTheDocument();
+    });
+  });
+
+  it('shows password checklist when password field is focused', async () => {
+    const user = userEvent.setup();
+    renderWithProviders(<SignupPage />);
+    
+    const passwordInput = screen.getByPlaceholderText('Enter a strong password');
+    await user.click(passwordInput);
+    
+    await waitFor(() => {
+      expect(screen.getByText('At least 8 characters')).toBeInTheDocument();
+      expect(screen.getByText('One uppercase letter')).toBeInTheDocument();
+      expect(screen.getByText('One lowercase letter')).toBeInTheDocument();
+      expect(screen.getByText('One number')).toBeInTheDocument();
+      expect(screen.getByText('One special character')).toBeInTheDocument();
+    });
+  });
+
+  it('updates password checklist based on input', async () => {
+    const user = userEvent.setup();
+    renderWithProviders(<SignupPage />);
+    
+    const passwordInput = screen.getByPlaceholderText('Enter a strong password');
+    await user.click(passwordInput);
+    await user.type(passwordInput, 'Password123!');
+    
+    await waitFor(() => {
+      // All checklist items should be visible and some should be checked
+      expect(screen.getByText('At least 8 characters')).toBeInTheDocument();
+      expect(screen.getByText('One uppercase letter')).toBeInTheDocument();
+      expect(screen.getByText('One lowercase letter')).toBeInTheDocument();
+      expect(screen.getByText('One number')).toBeInTheDocument();
+      expect(screen.getByText('One special character')).toBeInTheDocument();
+    });
+  });
+
+  it('submits form with valid data', async () => {
+    const user = userEvent.setup();
+    (authApiService.signUpCheck as any).mockResolvedValue({ done: true });
+
+    renderWithProviders(<SignupPage />);
+    
+    const nameInput = screen.getByPlaceholderText('Enter your full name');
+    const emailInput = screen.getByPlaceholderText('Enter your email');
+    const passwordInput = screen.getByPlaceholderText('Enter a strong password');
+    
+    await user.type(nameInput, 'John Doe');
+    await user.type(emailInput, 'john@example.com');
+    await user.type(passwordInput, 'Password123!');
+    
+    const submitButton = screen.getByRole('button', { name: 'Sign Up' });
+    await user.click(submitButton);
+    
+    await waitFor(() => {
+      expect(authApiService.signUpCheck).toHaveBeenCalledWith({
+        name: 'John Doe',
+        email: 'john@example.com',
+        password: 'Password123!',
+      });
+    });
+  });
+
+  it('handles Google signup click', async () => {
+    const user = userEvent.setup();
+    renderWithProviders(<SignupPage />);
+    
+    // Mock window.location
+    Object.defineProperty(window, 'location', {
+      value: { href: '' },
+      writable: true,
+    });
+    
+    const googleButton = screen.getByText('Sign up with Google');
+    await user.click(googleButton);
+    
+    expect(window.location.href).toBe('http://localhost:3000/secure/google?');
+  });
+
+  it('pre-fills form from URL parameters', () => {
+    // Mock URLSearchParams
+    Object.defineProperty(window, 'location', {
+      value: { search: '?email=test@example.com&name=Test User' },
+      writable: true,
+    });
+
+    renderWithProviders(<SignupPage />);
+    
+    const nameInput = screen.getByPlaceholderText('Enter your full name') as HTMLInputElement;
+    const emailInput = screen.getByPlaceholderText('Enter your email') as HTMLInputElement;
+    
+    expect(nameInput.value).toBe('Test User');
+    expect(emailInput.value).toBe('test@example.com');
+  });
+
+  it('shows terms of use and privacy policy links', () => {
+    renderWithProviders(<SignupPage />);
+    
+    expect(screen.getByText('Privacy Policy')).toBeInTheDocument();
+    expect(screen.getByText('Terms of Use')).toBeInTheDocument();
+    
+    const privacyLink = screen.getByText('Privacy Policy').closest('a');
+    const termsLink = screen.getByText('Terms of Use').closest('a');
+    
+    expect(privacyLink).toHaveAttribute('href', 'https://worklenz.com/privacy/');
+    expect(termsLink).toHaveAttribute('href', 'https://worklenz.com/terms/');
+  });
+
+  it('navigates to login page', async () => {
+    const user = userEvent.setup();
+    renderWithProviders(<SignupPage />);
+    
+    const loginLink = screen.getByText('Log in');
+    await user.click(loginLink);
+    
+    expect(loginLink.closest('a')).toHaveAttribute('href', '/auth/login');
+  });
+
+  it('shows loading state during signup', async () => {
+    const user = userEvent.setup();
+    (authApiService.signUpCheck as any).mockResolvedValue({ done: true });
+
+    renderWithProviders(<SignupPage />);
+    
+    const nameInput = screen.getByPlaceholderText('Enter your full name');
+    const emailInput = screen.getByPlaceholderText('Enter your email');
+    const passwordInput = screen.getByPlaceholderText('Enter a strong password');
+    
+    await user.type(nameInput, 'John Doe');
+    await user.type(emailInput, 'john@example.com');
+    await user.type(passwordInput, 'Password123!');
+    
+    const submitButton = screen.getByRole('button', { name: 'Sign Up' });
+    await user.click(submitButton);
+    
+    await waitFor(() => {
+      expect(screen.getByRole('img', { name: /loading/i })).toBeInTheDocument();
+    });
+  });
+});
\ No newline at end of file
diff --git a/worklenz-frontend/src/pages/auth/__tests__/VerifyResetEmailPage.test.tsx b/worklenz-frontend/src/pages/auth/__tests__/VerifyResetEmailPage.test.tsx
new file mode 100644
index 000000000..99b47d7e2
--- /dev/null
+++ b/worklenz-frontend/src/pages/auth/__tests__/VerifyResetEmailPage.test.tsx
@@ -0,0 +1,337 @@
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { BrowserRouter, MemoryRouter } from 'react-router-dom';
+import { Provider } from 'react-redux';
+import { configureStore } from '@reduxjs/toolkit';
+import { vi, describe, it, expect, beforeEach } from 'vitest';
+import { I18nextProvider } from 'react-i18next';
+import i18n from 'i18next';
+
+import VerifyResetEmailPage from '../VerifyResetEmailPage';
+import { updatePassword } from '@/features/auth/authSlice';
+
+// Mock dependencies
+vi.mock('@/features/auth/authSlice', () => ({
+  updatePassword: vi.fn(),
+}));
+
+vi.mock('@/utils/errorLogger', () => ({
+  default: {
+    error: vi.fn(),
+  },
+}));
+
+vi.mock('@/hooks/useMixpanelTracking', () => ({
+  useMixpanelTracking: () => ({
+    trackMixpanelEvent: vi.fn(),
+  }),
+}));
+
+vi.mock('@/hooks/useDoumentTItle', () => ({
+  useDocumentTitle: vi.fn(),
+}));
+
+vi.mock('react-responsive', () => ({
+  useMediaQuery: () => false,
+}));
+
+// Mock navigation
+const mockNavigate = vi.fn();
+vi.mock('react-router-dom', async () => {
+  const actual = await vi.importActual('react-router-dom');
+  return {
+    ...actual,
+    useNavigate: () => mockNavigate,
+  };
+});
+
+// Mock dispatch
+const mockDispatch = vi.fn();
+vi.mock('@/hooks/useAppDispatch', () => ({
+  useAppDispatch: () => mockDispatch,
+}));
+
+// Setup i18n for testing
+i18n.init({
+  lng: 'en',
+  resources: {
+    en: {
+      'auth/verify-reset-email': {
+        description: 'Enter your new password',
+        passwordRequired: 'Please input your password!',
+        confirmPasswordRequired: 'Please confirm your password!',
+        placeholder: 'Enter new password',
+        confirmPasswordPlaceholder: 'Confirm new password',
+        resetPasswordButton: 'Reset Password',
+        resendResetEmail: 'Resend Reset Email',
+        orText: 'or',
+        passwordMismatch: 'The two passwords do not match!',
+        successTitle: 'Password Reset Successful',
+        successMessage: 'Your password has been reset successfully.',
+        'passwordChecklist.minLength': 'At least 8 characters',
+        'passwordChecklist.uppercase': 'One uppercase letter',
+        'passwordChecklist.lowercase': 'One lowercase letter',
+        'passwordChecklist.number': 'One number',
+        'passwordChecklist.special': 'One special character',
+      },
+    },
+  },
+});
+
+// Create test store
+const createTestStore = () => {
+  return configureStore({
+    reducer: {
+      themeReducer: (state = { mode: 'light' }) => state,
+    },
+  });
+};
+
+const renderWithProviders = (component: React.ReactElement, route = '/verify-reset/test-hash/test-user') => {
+  const store = createTestStore();
+  return render(
+    <Provider store={store}>
+      <MemoryRouter initialEntries={[route]}>
+        <I18nextProvider i18n={i18n}>
+          {component}
+        </I18nextProvider>
+      </MemoryRouter>
+    </Provider>
+  );
+};
+
+describe('VerifyResetEmailPage', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.spyOn(console, 'log').mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('renders password reset form correctly', () => {
+    renderWithProviders(<VerifyResetEmailPage />);
+    
+    expect(screen.getByText('Enter your new password')).toBeInTheDocument();
+    expect(screen.getByPlaceholderText('Enter new password')).toBeInTheDocument();
+    expect(screen.getByPlaceholderText('Confirm new password')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Reset Password' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Resend Reset Email' })).toBeInTheDocument();
+  });
+
+  it('shows password checklist immediately', () => {
+    renderWithProviders(<VerifyResetEmailPage />);
+    
+    expect(screen.getByText('At least 8 characters')).toBeInTheDocument();
+    expect(screen.getByText('One uppercase letter')).toBeInTheDocument();
+    expect(screen.getByText('One lowercase letter')).toBeInTheDocument();
+    expect(screen.getByText('One number')).toBeInTheDocument();
+    expect(screen.getByText('One special character')).toBeInTheDocument();
+  });
+
+  it('validates required password fields', async () => {
+    const user = userEvent.setup();
+    renderWithProviders(<VerifyResetEmailPage />);
+    
+    const submitButton = screen.getByRole('button', { name: 'Reset Password' });
+    await user.click(submitButton);
+    
+    await waitFor(() => {
+      expect(screen.getByText('Please input your password!')).toBeInTheDocument();
+      expect(screen.getByText('Please confirm your password!')).toBeInTheDocument();
+    });
+  });
+
+  it('validates password confirmation match', async () => {
+    const user = userEvent.setup();
+    renderWithProviders(<VerifyResetEmailPage />);
+    
+    const passwordInput = screen.getByPlaceholderText('Enter new password');
+    const confirmPasswordInput = screen.getByPlaceholderText('Confirm new password');
+    
+    await user.type(passwordInput, 'Password123!');
+    await user.type(confirmPasswordInput, 'DifferentPassword123!');
+    
+    const submitButton = screen.getByRole('button', { name: 'Reset Password' });
+    await user.click(submitButton);
+    
+    await waitFor(() => {
+      expect(screen.getByText('The two passwords do not match!')).toBeInTheDocument();
+    });
+  });
+
+  it('updates password checklist based on input', async () => {
+    const user = userEvent.setup();
+    renderWithProviders(<VerifyResetEmailPage />);
+    
+    const passwordInput = screen.getByPlaceholderText('Enter new password');
+    await user.type(passwordInput, 'Password123!');
+    
+    // All checklist items should be visible (this component shows them by default)
+    expect(screen.getByText('At least 8 characters')).toBeInTheDocument();
+    expect(screen.getByText('One uppercase letter')).toBeInTheDocument();
+    expect(screen.getByText('One lowercase letter')).toBeInTheDocument();
+    expect(screen.getByText('One number')).toBeInTheDocument();
+    expect(screen.getByText('One special character')).toBeInTheDocument();
+  });
+
+  it('submits form with valid matching passwords', async () => {
+    const user = userEvent.setup();
+    mockDispatch.mockReturnValue({
+      unwrap: vi.fn().mockResolvedValue({ done: true }),
+    });
+
+    renderWithProviders(<VerifyResetEmailPage />);
+    
+    const passwordInput = screen.getByPlaceholderText('Enter new password');
+    const confirmPasswordInput = screen.getByPlaceholderText('Confirm new password');
+    
+    await user.type(passwordInput, 'Password123!');
+    await user.type(confirmPasswordInput, 'Password123!');
+    
+    const submitButton = screen.getByRole('button', { name: 'Reset Password' });
+    await user.click(submitButton);
+    
+    await waitFor(() => {
+      expect(updatePassword).toHaveBeenCalledWith({
+        hash: 'test-hash',
+        user: 'test-user',
+        password: 'Password123!',
+        confirmPassword: 'Password123!',
+      });
+    });
+  });
+
+  it('shows success message after successful password reset', async () => {
+    const user = userEvent.setup();
+    mockDispatch.mockReturnValue({
+      unwrap: vi.fn().mockResolvedValue({ done: true }),
+    });
+
+    renderWithProviders(<VerifyResetEmailPage />);
+    
+    const passwordInput = screen.getByPlaceholderText('Enter new password');
+    const confirmPasswordInput = screen.getByPlaceholderText('Confirm new password');
+    
+    await user.type(passwordInput, 'Password123!');
+    await user.type(confirmPasswordInput, 'Password123!');
+    
+    const submitButton = screen.getByRole('button', { name: 'Reset Password' });
+    await user.click(submitButton);
+    
+    await waitFor(() => {
+      expect(screen.getByText('Password Reset Successful')).toBeInTheDocument();
+      expect(screen.getByText('Your password has been reset successfully.')).toBeInTheDocument();
+    });
+
+    await waitFor(() => {
+      expect(mockNavigate).toHaveBeenCalledWith('/auth/login');
+    });
+  });
+
+  it('shows loading state during submission', async () => {
+    const user = userEvent.setup();
+    mockDispatch.mockReturnValue({
+      unwrap: vi.fn().mockImplementation(() => new Promise(() => {})), // Never resolves
+    });
+
+    renderWithProviders(<VerifyResetEmailPage />);
+    
+    const passwordInput = screen.getByPlaceholderText('Enter new password');
+    const confirmPasswordInput = screen.getByPlaceholderText('Confirm new password');
+    
+    await user.type(passwordInput, 'Password123!');
+    await user.type(confirmPasswordInput, 'Password123!');
+    
+    const submitButton = screen.getByRole('button', { name: 'Reset Password' });
+    await user.click(submitButton);
+    
+    await waitFor(() => {
+      expect(screen.getByRole('img', { name: /loading/i })).toBeInTheDocument();
+    });
+  });
+
+  it('handles submission errors gracefully', async () => {
+    const user = userEvent.setup();
+    mockDispatch.mockReturnValue({
+      unwrap: vi.fn().mockRejectedValue(new Error('Reset failed')),
+    });
+
+    renderWithProviders(<VerifyResetEmailPage />);
+    
+    const passwordInput = screen.getByPlaceholderText('Enter new password');
+    const confirmPasswordInput = screen.getByPlaceholderText('Confirm new password');
+    
+    await user.type(passwordInput, 'Password123!');
+    await user.type(confirmPasswordInput, 'Password123!');
+    
+    const submitButton = screen.getByRole('button', { name: 'Reset Password' });
+    await user.click(submitButton);
+    
+    await waitFor(() => {
+      // Should not show success message
+      expect(screen.queryByText('Password Reset Successful')).not.toBeInTheDocument();
+      // Should still show the form
+      expect(screen.getByPlaceholderText('Enter new password')).toBeInTheDocument();
+    });
+  });
+
+  it('navigates to forgot password page when resend button is clicked', async () => {
+    const user = userEvent.setup();
+    renderWithProviders(<VerifyResetEmailPage />);
+    
+    const resendButton = screen.getByRole('button', { name: 'Resend Reset Email' });
+    await user.click(resendButton);
+    
+    expect(resendButton.closest('a')).toHaveAttribute('href', '/auth/forgot-password');
+  });
+
+  it('prevents pasting in confirm password field', async () => {
+    const user = userEvent.setup();
+    renderWithProviders(<VerifyResetEmailPage />);
+    
+    const confirmPasswordInput = screen.getByPlaceholderText('Confirm new password');
+    
+    await user.click(confirmPasswordInput);
+    
+    // Try to paste - should be prevented
+    const pasteEvent = new ClipboardEvent('paste', {
+      clipboardData: new DataTransfer(),
+    });
+    
+    fireEvent(confirmPasswordInput, pasteEvent);
+    
+    // The preventDefault should be called (we can't easily test this directly,
+    // but we can ensure the input behavior remains consistent)
+    expect(confirmPasswordInput).toBeInTheDocument();
+  });
+
+  it('does not submit with empty passwords after trimming', async () => {
+    const user = userEvent.setup();
+    mockDispatch.mockReturnValue({
+      unwrap: vi.fn().mockResolvedValue({ done: true }),
+    });
+
+    renderWithProviders(<VerifyResetEmailPage />);
+    
+    const passwordInput = screen.getByPlaceholderText('Enter new password');
+    const confirmPasswordInput = screen.getByPlaceholderText('Confirm new password');
+    
+    await user.type(passwordInput, '   '); // Only whitespace
+    await user.type(confirmPasswordInput, '   '); // Only whitespace
+    
+    const submitButton = screen.getByRole('button', { name: 'Reset Password' });
+    await user.click(submitButton);
+    
+    // Should not call updatePassword with empty strings
+    expect(updatePassword).not.toHaveBeenCalled();
+  });
+
+  it('extracts hash and user from URL params', () => {
+    renderWithProviders(<VerifyResetEmailPage />, '/verify-reset/my-hash/my-user');
+    
+    // Component should render normally, indicating it received the params
+    expect(screen.getByText('Enter your new password')).toBeInTheDocument();
+  });
+});
\ No newline at end of file
diff --git a/worklenz-frontend/src/pages/home/home-page.tsx b/worklenz-frontend/src/pages/home/home-page.tsx
index 72d06bf65..37b6b618c 100644
--- a/worklenz-frontend/src/pages/home/home-page.tsx
+++ b/worklenz-frontend/src/pages/home/home-page.tsx
@@ -1,14 +1,16 @@
-import { useEffect, memo, useMemo, useCallback } from 'react';
+import React, { useEffect, memo, useMemo, useCallback } from 'react';
 import { useMediaQuery } from 'react-responsive';
 import Col from 'antd/es/col';
 import Flex from 'antd/es/flex';
+import Row from 'antd/es/row';
+import Card from 'antd/es/card';
 
 import GreetingWithTime from './greeting-with-time';
 import TasksList from '@/pages/home/task-list/tasks-list';
-import TodoList from '@/pages/home/todo-list/todo-list';
 import ProjectDrawer from '@/components/projects/project-drawer/project-drawer';
 import CreateProjectButton from '@/components/projects/project-create-button/project-create-button';
 import RecentAndFavouriteProjectList from '@/pages/home/recent-and-favourite-project-list/recent-and-favourite-project-list';
+import TodoList from './todo-list/todo-list';
 
 import { useDocumentTitle } from '@/hooks/useDoumentTItle';
 import { useAppDispatch } from '@/hooks/useAppDispatch';
@@ -19,7 +21,7 @@ import { fetchProjectCategories } from '@/features/projects/lookups/projectCateg
 import { fetchProjectHealth } from '@/features/projects/lookups/projectHealth/projectHealthSlice';
 import { fetchProjects } from '@/features/home-page/home-page.slice';
 import { createPortal } from 'react-dom';
-import React, { Suspense } from 'react';
+import UserActivityFeed from './user-activity-feed/user-activity-feed';
 
 const DESKTOP_MIN_WIDTH = 1024;
 const TASK_LIST_MIN_WIDTH = 500;
@@ -27,6 +29,9 @@ const SIDEBAR_MAX_WIDTH = 400;
 
 // Lazy load heavy components
 const TaskDrawer = React.lazy(() => import('@/components/task-drawer/task-drawer'));
+const SurveyPromptModal = React.lazy(() =>
+  import('@/components/survey/SurveyPromptModal').then(m => ({ default: m.SurveyPromptModal }))
+);
 
 const HomePage = memo(() => {
   const dispatch = useAppDispatch();
@@ -44,7 +49,7 @@ const HomePage = memo(() => {
         console.warn('Failed to preload TaskDrawer:', error);
       }
     };
-    
+
     preloadTaskDrawer();
   }, []);
 
@@ -97,51 +102,33 @@ const HomePage = memo(() => {
     );
   }, [isDesktop, isOwnerOrAdmin]);
 
-  const MainContent = useMemo(() => {
-    return isDesktop ? (
-      <Flex gap={24} align="flex-start" className="w-full mt-12">
-        <Flex style={desktopFlexStyle}>
-          <TasksList />
-        </Flex>
-        <Flex vertical gap={24} style={sidebarFlexStyle}>
-          <TodoList />
-          <RecentAndFavouriteProjectList />
-        </Flex>
-      </Flex>
-    ) : (
-      <Flex vertical gap={24} className="mt-6">
-        <TasksList />
-        <TodoList />
-        <RecentAndFavouriteProjectList />
-      </Flex>
-    );
-  }, [isDesktop, desktopFlexStyle, sidebarFlexStyle]);
-
   return (
-    <div className="my-24 min-h-[90vh]">
+    <div className="my-8 min-h-[90vh]">
       <Col className="flex flex-col gap-6">
         <GreetingWithTime />
         {CreateProjectButtonComponent}
       </Col>
 
-      {MainContent}
-
-      {/* Use Suspense for lazy-loaded components with error boundary */}
-      <Suspense fallback={<div>Loading...</div>}>
-        {createPortal(
-          <React.Suspense fallback={null}>
-            <TaskDrawer />
-          </React.Suspense>, 
-          document.body, 
-          'home-task-drawer'
-        )}
-      </Suspense>
-
-      {createPortal(
-        <ProjectDrawer onClose={handleProjectDrawerClose} />,
-        document.body,
-        'project-drawer'
-      )}
+      <Row gutter={[24, 24]} className="mt-12">
+        <Col xs={24} lg={16}>
+          <Flex vertical gap={24}>
+            <TasksList />
+          </Flex>
+        </Col>
+
+        <Col xs={24} lg={8}>
+          <Flex vertical gap={24}>
+            <TodoList />
+            
+            <UserActivityFeed />
+
+            <RecentAndFavouriteProjectList />
+          </Flex>
+        </Col>
+      </Row>
+
+      {createPortal(<TaskDrawer />, document.body, 'home-task-drawer')}
+      {createPortal(<ProjectDrawer onClose={() => {}} />, document.body, 'project-drawer')}
     </div>
   );
 });
diff --git a/worklenz-frontend/src/pages/home/todo-list/todo-list.tsx b/worklenz-frontend/src/pages/home/todo-list/todo-list.tsx
index 280546673..147b02081 100644
--- a/worklenz-frontend/src/pages/home/todo-list/todo-list.tsx
+++ b/worklenz-frontend/src/pages/home/todo-list/todo-list.tsx
@@ -1,9 +1,10 @@
-import { CheckCircleOutlined, SyncOutlined } from '@/shared/antd-imports';
+import { CheckCircleOutlined, SyncOutlined, DownOutlined, RightOutlined } from '@/shared/antd-imports';
 import { useRef, useState } from 'react';
 import Form from 'antd/es/form';
 import Input, { InputRef } from 'antd/es/input';
 import Flex from 'antd/es/flex';
 import Card from 'antd/es/card';
+import Collapse from 'antd/es/collapse';
 import ConfigProvider from 'antd/es/config-provider';
 import Table, { TableProps } from 'antd/es/table';
 import Tooltip from 'antd/es/tooltip';
@@ -23,6 +24,7 @@ import { useCreatePersonalTaskMutation } from '@/api/home-page/home-page.api.ser
 
 const TodoList = () => {
   const [isAlertShowing, setIsAlertShowing] = useState(false);
+  const [isCollapsed, setIsCollapsed] = useState(true);
   const [form] = Form.useForm();
   const { t } = useTranslation('home');
 
@@ -97,73 +99,109 @@ const TodoList = () => {
   ];
 
   return (
-    <Card
-      title={
-        <Typography.Title level={5} style={{ marginBlockEnd: 0 }}>
-          {t('home:todoList.title')} ({data?.body.length})
-        </Typography.Title>
-      }
-      extra={
-        <Tooltip title={t('home:todoList.refreshTasks')}>
-          <Button shape="circle" icon={<SyncOutlined spin={isFetching} />} onClick={refetch} />
-        </Tooltip>
-      }
-      style={{ width: '100%' }}
-    >
-      <div>
-        <Form form={form} onFinish={handleTodoSubmit}>
-          <Form.Item name="name">
-            <Flex vertical>
-              <Input
-                ref={todoInputRef}
-                placeholder={t('home:todoList.addTask')}
-                onChange={e => {
-                  const inputValue = e.currentTarget.value;
+    <Card style={{ width: '100%' }} bodyStyle={{ padding: 0 }}>
+      <style>{`
+        .todo-collapse .ant-collapse-header {
+          display: flex !important;
+          align-items: center !important;
+          padding: 12px 16px !important;
+        }
+        .todo-collapse .ant-collapse-expand-icon {
+          margin-right: 8px !important;
+          display: flex !important;
+          align-items: center !important;
+        }
+      `}</style>
+      <Collapse
+        defaultActiveKey={[]}
+        ghost
+        size="small"
+        className="todo-collapse"
+        expandIcon={({ isActive }) => 
+          isActive ? <DownOutlined /> : <RightOutlined />
+        }
+        onChange={(keys) => {
+          setIsCollapsed(keys.length === 0);
+        }}
+        items={[
+          {
+            key: '1',
+            label: (
+              <Flex style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%' }}>
+                <Typography.Title level={5} style={{ margin: 0 }}>
+                  {t('home:todoList.title')} ({data?.body.length})
+                </Typography.Title>
+                <Tooltip title={t('home:todoList.refreshTasks')}>
+                  <Button 
+                    shape="circle" 
+                    icon={<SyncOutlined spin={isFetching} />} 
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      refetch();
+                    }} 
+                  />
+                </Tooltip>
+              </Flex>
+            ),
+            children: (
+              <div style={{ padding: '0 16px 16px 16px' }}>
+                <Form form={form} onFinish={handleTodoSubmit}>
+                  <Form.Item name="name">
+                    <Flex vertical>
+                      <Input
+                        ref={todoInputRef}
+                        placeholder={t('home:todoList.addTask')}
+                        onChange={e => {
+                          const inputValue = e.currentTarget.value;
 
-                  if (inputValue.length >= 1) setIsAlertShowing(true);
-                  else if (inputValue === '') setIsAlertShowing(false);
-                }}
-              />
-              {isAlertShowing && (
-                <Alert
-                  message={
-                    <Typography.Text style={{ fontSize: 11 }}>
-                      {t('home:todoList.pressEnter')} <strong>Enter</strong>{' '}
-                      {t('home:todoList.toCreate')}
-                    </Typography.Text>
-                  }
-                  type="info"
-                  style={{
-                    width: 'fit-content',
-                    borderRadius: 2,
-                    padding: '0 6px',
-                  }}
-                />
-              )}
-            </Flex>
-          </Form.Item>
-        </Form>
+                          if (inputValue.length >= 1) setIsAlertShowing(true);
+                          else if (inputValue === '') setIsAlertShowing(false);
+                        }}
+                      />
+                      {isAlertShowing && (
+                        <Alert
+                          message={
+                            <Typography.Text style={{ fontSize: 11 }}>
+                              {t('home:todoList.pressEnter')} <strong>Enter</strong>{' '}
+                              {t('home:todoList.toCreate')}
+                            </Typography.Text>
+                          }
+                          type="info"
+                          style={{
+                            width: 'fit-content',
+                            borderRadius: 2,
+                            padding: '0 6px',
+                          }}
+                        />
+                      )}
+                    </Flex>
+                  </Form.Item>
+                </Form>
 
-        <div style={{ maxHeight: 420, overflow: 'auto' }}>
-          {data?.body.length === 0 ? (
-            <EmptyListPlaceholder
-              imageSrc="https://s3.us-west-2.amazonaws.com/worklenz.com/assets/empty-box.webp"
-              text={t('home:todoList.noTasks')}
-            />
-          ) : (
-            <Table
-              className="custom-two-colors-row-table"
-              rowKey={record => record.id || ''}
-              dataSource={data?.body}
-              columns={columns}
-              showHeader={false}
-              pagination={false}
-              size="small"
-              loading={isFetching}
-            />
-          )}
-        </div>
-      </div>
+                <div style={{ maxHeight: 300, overflow: 'auto' }}>
+                  {data?.body.length === 0 ? (
+                    <EmptyListPlaceholder
+                      imageSrc="https://s3.us-west-2.amazonaws.com/worklenz.com/assets/empty-box.webp"
+                      text={t('home:todoList.noTasks')}
+                    />
+                  ) : (
+                    <Table
+                      className="custom-two-colors-row-table"
+                      rowKey={record => record.id || ''}
+                      dataSource={data?.body}
+                      columns={columns}
+                      showHeader={false}
+                      pagination={false}
+                      size="small"
+                      loading={isFetching}
+                    />
+                  )}
+                </div>
+              </div>
+            ),
+          },
+        ]}
+      />
     </Card>
   );
 };
diff --git a/worklenz-frontend/src/pages/home/user-activity-feed/task-activity-list.tsx b/worklenz-frontend/src/pages/home/user-activity-feed/task-activity-list.tsx
new file mode 100644
index 000000000..664edd436
--- /dev/null
+++ b/worklenz-frontend/src/pages/home/user-activity-feed/task-activity-list.tsx
@@ -0,0 +1,95 @@
+import React, { useCallback } from 'react';
+import { Table, Typography, Tooltip, theme } from 'antd';
+import { FileTextOutlined } from '@ant-design/icons';
+import { useTranslation } from 'react-i18next';
+import { useAppDispatch } from '@/hooks/useAppDispatch';
+import { fromNow, formatDate } from '@/utils/dateUtils';
+import {
+  setSelectedTaskId,
+  setShowTaskDrawer,
+  fetchTask,
+} from '@/features/task-drawer/task-drawer.slice';
+import { IUserRecentTask } from '@/types/home/user-activity.types';
+
+const { Text } = Typography;
+
+interface TaskActivityListProps {
+  tasks: IUserRecentTask[];
+}
+
+const TaskActivityList: React.FC<TaskActivityListProps> = React.memo(({ tasks }) => {
+  const { t } = useTranslation('home');
+  const dispatch = useAppDispatch();
+  const { token } = theme.useToken();
+
+  const handleTaskClick = useCallback(
+    (taskId: string, projectId: string) => {
+      dispatch(setSelectedTaskId(taskId));
+      dispatch(setShowTaskDrawer(true));
+      dispatch(fetchTask({ taskId, projectId }));
+    },
+    [dispatch]
+  );
+
+  const columns = [
+    {
+      key: 'task',
+      render: (record: IUserRecentTask) => (
+        <div 
+          style={{ 
+            display: 'flex', 
+            alignItems: 'flex-start', 
+            gap: 12, 
+            width: '100%',
+            cursor: 'pointer',
+            padding: '8px 0'
+          }}
+          onClick={() => handleTaskClick(record.task_id, record.project_id)}
+          aria-label={`${t('tasks.recentTaskAriaLabel')} ${record.task_name}`}
+        >
+          <div style={{ 
+            marginTop: 2,
+            color: token.colorPrimary,
+            fontSize: 16
+          }}>
+            <FileTextOutlined />
+          </div>
+          <div style={{ flex: 1, minWidth: 0 }}>
+            <div style={{ marginBottom: 4 }}>
+              <Text strong style={{ fontSize: 14 }}>
+                {record.task_name}
+              </Text>
+            </div>
+            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+              <Text type="secondary" style={{ fontSize: 12 }}>
+                {record.project_name}
+              </Text>
+              <Tooltip 
+                title={formatDate(record.last_activity_at, 'MMMM Do YYYY, h:mm:ss a')}
+                placement="topRight"
+              >
+                <Text type="secondary" style={{ fontSize: 12 }}>
+                  {fromNow(record.last_activity_at)}
+                </Text>
+              </Tooltip>
+            </div>
+          </div>
+        </div>
+      ),
+    },
+  ];
+
+  return (
+    <Table
+      className="custom-two-colors-row-table"
+      dataSource={tasks}
+      columns={columns}
+      rowKey="task_id"
+      showHeader={false}
+      pagination={false}
+      size="small"
+    />
+  );
+});
+
+export default TaskActivityList;
diff --git a/worklenz-frontend/src/pages/home/user-activity-feed/time-logged-task-list.tsx b/worklenz-frontend/src/pages/home/user-activity-feed/time-logged-task-list.tsx
new file mode 100644
index 000000000..b436b72bc
--- /dev/null
+++ b/worklenz-frontend/src/pages/home/user-activity-feed/time-logged-task-list.tsx
@@ -0,0 +1,166 @@
+import React, { useCallback } from 'react';
+import { Table, Typography, Tag, Tooltip, Space, theme } from '@/shared/antd-imports';
+import { ClockCircleOutlined } from '@/shared/antd-imports';
+import { useTranslation } from 'react-i18next';
+import { useAppDispatch } from '@/hooks/useAppDispatch';
+import { fromNow, formatDate } from '@/utils/dateUtils';
+import {
+  setSelectedTaskId,
+  setShowTaskDrawer,
+  fetchTask,
+} from '@/features/task-drawer/task-drawer.slice';
+import { IUserTimeLoggedTask } from '@/types/home/user-activity.types';
+
+const { Text } = Typography;
+
+interface TimeLoggedTaskListProps {
+  tasks: IUserTimeLoggedTask[];
+}
+
+const TimeLoggedTaskList: React.FC<TimeLoggedTaskListProps> = React.memo(({ tasks }) => {
+  const { t } = useTranslation('home');
+  const dispatch = useAppDispatch();
+  const { token } = theme.useToken();
+
+  const handleTaskClick = useCallback(
+    (taskId: string, projectId: string) => {
+      dispatch(setSelectedTaskId(taskId));
+      dispatch(setShowTaskDrawer(true));
+      dispatch(fetchTask({ taskId, projectId }));
+    },
+    [dispatch]
+  );
+
+  const columns = [
+    {
+      key: 'task',
+      render: (record: IUserTimeLoggedTask) => (
+        <div 
+          style={{ 
+            display: 'flex', 
+            alignItems: 'center', 
+            gap: 10, 
+            width: '100%',
+            cursor: 'pointer',
+            padding: '8px 0'
+          }}
+          onClick={() => handleTaskClick(record.task_id, record.project_id)}
+          aria-label={`${t('tasks.timeLoggedTaskAriaLabel')} ${record.task_name}`}
+        >
+          {/* Clock Icon */}
+          <div style={{ 
+            color: token.colorSuccess,
+            fontSize: 14,
+            flexShrink: 0
+          }}>
+            <ClockCircleOutlined />
+          </div>
+          
+          {/* Main Content */}
+          <div style={{ flex: 1, minWidth: 0 }}>
+            {/* Task Name */}
+            <div style={{ marginBottom: 2 }}>
+              <Text 
+                strong 
+                style={{ 
+                  fontSize: 13,
+                  lineHeight: 1.4,
+                  color: token.colorText
+                }}
+                ellipsis={{ tooltip: record.task_name }}
+              >
+                {record.task_name}
+              </Text>
+            </div>
+            
+            {/* Project Name */}
+            <Text 
+              type="secondary" 
+              style={{ 
+                fontSize: 11,
+                lineHeight: 1.2,
+                display: 'block',
+                marginBottom: 4
+              }}
+              ellipsis={{ tooltip: record.project_name }}
+            >
+              {record.project_name}
+            </Text>
+          </div>
+          
+          {/* Right Side - Time and Status */}
+          <div style={{ 
+            display: 'flex', 
+            flexDirection: 'column', 
+            alignItems: 'flex-end',
+            gap: 3,
+            flexShrink: 0
+          }}>
+            {/* Time Logged */}
+            <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
+              <Tag 
+                color="success" 
+                style={{ 
+                  margin: 0,
+                  fontSize: 11,
+                  padding: '0 6px',
+                  height: 18,
+                  lineHeight: '16px',
+                  borderRadius: 3
+                }}
+              >
+                {record.total_time_logged_string}
+              </Tag>
+              {record.logged_by_timer && (
+                <Tag 
+                  color="processing" 
+                  style={{ 
+                    margin: 0,
+                    fontSize: 10,
+                    padding: '0 4px',
+                    height: 16,
+                    lineHeight: '14px',
+                    borderRadius: 2
+                  }}
+                >
+                  {t('tasks.timerTag')}
+                </Tag>
+              )}
+            </div>
+            
+            {/* Time Ago */}
+            <Tooltip 
+              title={formatDate(record.last_logged_at, 'MMMM Do YYYY, h:mm:ss a')}
+              placement="topRight"
+            >
+              <Text 
+                type="secondary" 
+                style={{ 
+                  fontSize: 10,
+                  lineHeight: 1,
+                  color: token.colorTextTertiary
+                }}
+              >
+                {fromNow(record.last_logged_at)}
+              </Text>
+            </Tooltip>
+          </div>
+        </div>
+      ),
+    },
+  ];
+
+  return (
+    <Table
+      className="custom-two-colors-row-table"
+      dataSource={tasks}
+      columns={columns}
+      rowKey="task_id"
+      showHeader={false}
+      pagination={false}
+      size="small"
+    />
+  );
+});
+
+export default TimeLoggedTaskList;
diff --git a/worklenz-frontend/src/pages/home/user-activity-feed/user-activity-feed.css b/worklenz-frontend/src/pages/home/user-activity-feed/user-activity-feed.css
new file mode 100644
index 000000000..98faae797
--- /dev/null
+++ b/worklenz-frontend/src/pages/home/user-activity-feed/user-activity-feed.css
@@ -0,0 +1,19 @@
+.activity-feed-item:hover {
+  background-color: var(--activity-hover, #fafafa);
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.activity-feed-item:active {
+  transform: translateY(0);
+  background-color: var(--activity-active, #f0f0f0);
+}
+
+/* Dark theme support */
+[data-theme="dark"] .activity-feed-item:hover {
+  background-color: var(--activity-hover, #262626);
+}
+
+[data-theme="dark"] .activity-feed-item:active {
+  background-color: var(--activity-active, #1f1f1f);
+}
diff --git a/worklenz-frontend/src/pages/home/user-activity-feed/user-activity-feed.tsx b/worklenz-frontend/src/pages/home/user-activity-feed/user-activity-feed.tsx
new file mode 100644
index 000000000..b0b57deda
--- /dev/null
+++ b/worklenz-frontend/src/pages/home/user-activity-feed/user-activity-feed.tsx
@@ -0,0 +1,203 @@
+import React, { useMemo, useCallback, useEffect } from 'react';
+import { Card, Segmented, Skeleton, Empty, Typography, Alert, Button, Tooltip } from '@/shared/antd-imports';
+import { ClockCircleOutlined, UnorderedListOutlined, SyncOutlined } from '@/shared/antd-imports';
+import { useTranslation } from 'react-i18next';
+import { useAppSelector } from '@/hooks/useAppSelector';
+import { useAppDispatch } from '@/hooks/useAppDispatch';
+import { ActivityFeedType } from '@/types/home/user-activity.types';
+import { setActiveTab } from '@/features/home-page/user-activity.slice';
+import {
+  useGetUserRecentTasksQuery,
+  useGetUserTimeLoggedTasksQuery,
+} from '@/api/home-page/user-activity.api.service';
+import TaskActivityList from './task-activity-list';
+import TimeLoggedTaskList from './time-logged-task-list';
+
+const { Title } = Typography;
+
+const UserActivityFeed: React.FC = () => {
+  const { t } = useTranslation('home');
+  const dispatch = useAppDispatch();
+  const { activeTab } = useAppSelector(state => state.userActivityReducer);
+
+  const {
+    data: recentTasksData,
+    isLoading: loadingRecentTasks,
+    error: recentTasksError,
+    refetch: refetchRecentTasks,
+  } = useGetUserRecentTasksQuery(
+    { limit: 10 },
+    { 
+      skip: false,
+      refetchOnMountOrArgChange: true
+    }
+  );
+
+  const {
+    data: timeLoggedTasksData,
+    isLoading: loadingTimeLoggedTasks,
+    error: timeLoggedTasksError,
+    refetch: refetchTimeLoggedTasks,
+  } = useGetUserTimeLoggedTasksQuery(
+    { limit: 10 },
+    { 
+      skip: false,
+      refetchOnMountOrArgChange: true
+    }
+  );
+
+  const recentTasks = useMemo(() => {
+    if (!recentTasksData) return [];
+    // Handle both array and object responses from the API
+    if (Array.isArray(recentTasksData)) {
+      return recentTasksData;
+    }
+    // If it's an object with a data property (common API pattern)
+    if (recentTasksData && typeof recentTasksData === 'object' && 'data' in recentTasksData) {
+      const data = (recentTasksData as any).data;
+      return Array.isArray(data) ? data : [];
+    }
+    // If it's a different object structure, try to extract tasks
+    if (recentTasksData && typeof recentTasksData === 'object') {
+      const possibleArrays = Object.values(recentTasksData as any).filter(Array.isArray);
+      return possibleArrays.length > 0 ? possibleArrays[0] : [];
+    }
+    return [];
+  }, [recentTasksData]);
+
+  const timeLoggedTasks = useMemo(() => {
+    if (!timeLoggedTasksData) return [];
+    // Handle both array and object responses from the API
+    if (Array.isArray(timeLoggedTasksData)) {
+      return timeLoggedTasksData;
+    }
+    // If it's an object with a data property (common API pattern)
+    if (timeLoggedTasksData && typeof timeLoggedTasksData === 'object' && 'data' in timeLoggedTasksData) {
+      const data = (timeLoggedTasksData as any).data;
+      return Array.isArray(data) ? data : [];
+    }
+    // If it's a different object structure, try to extract tasks
+    if (timeLoggedTasksData && typeof timeLoggedTasksData === 'object') {
+      const possibleArrays = Object.values(timeLoggedTasksData as any).filter(Array.isArray);
+      return possibleArrays.length > 0 ? possibleArrays[0] : [];
+    }
+    return [];
+  }, [timeLoggedTasksData]);
+
+  const segmentOptions = useMemo(
+    () => [
+      {
+        value: ActivityFeedType.TIME_LOGGED_TASKS,
+        label: (
+          <span style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
+            <ClockCircleOutlined style={{ fontSize: 14 }} />
+            {t('tasks.timeLoggedSegment')}
+          </span>
+        ),
+      },
+      {
+        value: ActivityFeedType.RECENT_TASKS,
+        label: (
+          <span style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
+            <UnorderedListOutlined style={{ fontSize: 14 }} />
+            {t('tasks.recentTasksSegment')}
+          </span>
+        ),
+      },
+    ],
+    [t]
+  );
+
+  const handleTabChange = useCallback(
+    (value: ActivityFeedType) => {
+      dispatch(setActiveTab(value));
+    },
+    [dispatch]
+  );
+
+  // Refetch data when the active tab changes
+  useEffect(() => {
+    if (activeTab === ActivityFeedType.RECENT_TASKS) {
+      refetchRecentTasks();
+    } else if (activeTab === ActivityFeedType.TIME_LOGGED_TASKS) {
+      refetchTimeLoggedTasks();
+    }
+  }, [activeTab, refetchRecentTasks, refetchTimeLoggedTasks]);
+
+  const handleRefresh = useCallback(() => {
+    if (activeTab === ActivityFeedType.TIME_LOGGED_TASKS) {
+      refetchTimeLoggedTasks();
+    } else {
+      refetchRecentTasks();
+    }
+  }, [activeTab, refetchRecentTasks, refetchTimeLoggedTasks]);
+
+  const isLoading = activeTab === ActivityFeedType.TIME_LOGGED_TASKS ? loadingTimeLoggedTasks : loadingRecentTasks;
+  const currentCount = activeTab === ActivityFeedType.TIME_LOGGED_TASKS ? timeLoggedTasks.length : recentTasks.length;
+
+  const renderContent = () => {
+    if (activeTab === ActivityFeedType.TIME_LOGGED_TASKS) {
+      if (loadingTimeLoggedTasks) {
+        return <Skeleton active />;
+      }
+      if (timeLoggedTasksError) {
+        return <Alert message={t('tasks.errorLoadingTimeLoggedTasks')} type="error" showIcon />;
+      }
+      if (timeLoggedTasks.length === 0) {
+        return <Empty description={t('tasks.noTimeLoggedTasks')} />;
+      }
+      return (
+        <div style={{ maxHeight: 450, overflow: 'auto' }}>
+          <TimeLoggedTaskList tasks={timeLoggedTasks} />
+        </div>
+      );
+    } else if (activeTab === ActivityFeedType.RECENT_TASKS) {
+      if (loadingRecentTasks) {
+        return <Skeleton active />;
+      }
+      if (recentTasksError) {
+        return <Alert message={t('tasks.errorLoadingRecentTasks')} type="error" showIcon />;
+      }
+      if (recentTasks.length === 0) {
+        return <Empty description={t('tasks.noRecentTasks')} />;
+      }
+      return (
+        <div style={{ maxHeight: 450, overflow: 'auto' }}>
+          <TaskActivityList tasks={recentTasks} />
+        </div>
+      );
+    }
+    return null;
+  };
+
+  return (
+    <Card 
+      title={
+        <Typography.Title level={5} style={{ marginBlockEnd: 0 }}>
+          {t('tasks.recentActivity')} ({currentCount})
+        </Typography.Title>
+      }
+      extra={
+        <Tooltip title={t('tasks.refresh')}>
+          <Button 
+            shape="circle" 
+            icon={<SyncOutlined spin={isLoading} />} 
+            onClick={handleRefresh}
+          />
+        </Tooltip>
+      }
+      style={{ width: '100%' }}
+    >
+      <Segmented
+        options={segmentOptions}
+        value={activeTab}
+        onChange={handleTabChange}
+        style={{ marginBottom: 16, width: '100%' }}
+        block
+      />
+      {renderContent()}
+    </Card>
+  );
+};
+
+export default React.memo(UserActivityFeed);
diff --git a/worklenz-frontend/src/pages/projects/ProjectGanttView.tsx b/worklenz-frontend/src/pages/projects/ProjectGanttView.tsx
new file mode 100644
index 000000000..0835c2f97
--- /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/project-list.tsx b/worklenz-frontend/src/pages/projects/project-list.tsx
index b82688dc0..82c4b58e5 100644
--- a/worklenz-frontend/src/pages/projects/project-list.tsx
+++ b/worklenz-frontend/src/pages/projects/project-list.tsx
@@ -802,7 +802,7 @@ const ProjectList: React.FC = () => {
   }, [loadingProjects, isFetchingProjects, viewMode, groupedProjects.loading, isLoading]);
 
   return (
-    <div style={{ marginBlock: 65, minHeight: '90vh' }}>
+    <div style={{ minHeight: '90vh' }}>
       <PageHeader
         className="site-page-header"
         title={`${projectCount} ${t('projects')}`}
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 000000000..4bea53db0
--- /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 e66ec582f..2208ab24d 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/pages/projects/projectView/project-view.tsx b/worklenz-frontend/src/pages/projects/projectView/project-view.tsx
index 7361fd50c..43439c884 100644
--- a/worklenz-frontend/src/pages/projects/projectView/project-view.tsx
+++ b/worklenz-frontend/src/pages/projects/projectView/project-view.tsx
@@ -360,14 +360,14 @@ const ProjectView = React.memo(() => {
   // Show loading state while project is being fetched or translations are loading
   if (projectLoading || !isInitialized || !translationsReady) {
     return (
-      <div style={{ marginBlockStart: 70, marginBlockEnd: 12, minHeight: '80vh' }}>
+      <div style={{ marginBlockEnd: 12, minHeight: '80vh' }}>
         <SuspenseFallback />
       </div>
     );
   }
 
   return (
-    <div style={{ marginBlockStart: 70, marginBlockEnd: 12, minHeight: '80vh' }}>
+    <div style={{ marginBlockEnd: 12, minHeight: '80vh' }}>
       <ProjectViewHeader />
 
       <Tabs
diff --git a/worklenz-frontend/src/pages/reporting/projects-reports/projects-reports.tsx b/worklenz-frontend/src/pages/reporting/projects-reports/projects-reports.tsx
index acc0541bd..028e7bc1b 100644
--- a/worklenz-frontend/src/pages/reporting/projects-reports/projects-reports.tsx
+++ b/worklenz-frontend/src/pages/reporting/projects-reports/projects-reports.tsx
@@ -28,9 +28,8 @@ const ProjectsReports = () => {
 
   // Memoize the Excel export handler to prevent recreation on every render
   const handleExcelExport = useCallback(() => {
-    if (currentSession?.team_name) {
-      reportingExportApiService.exportProjects(currentSession.team_name);
-    }
+    const teamName = currentSession?.team_name || 'Team';
+    reportingExportApiService.exportProjects(teamName);
   }, [currentSession?.team_name]);
 
   // Memoize the archived checkbox handler to prevent recreation on every render
diff --git a/worklenz-frontend/src/pages/reporting/timeReports/members-time-reports-updated.tsx b/worklenz-frontend/src/pages/reporting/timeReports/members-time-reports-updated.tsx
new file mode 100644
index 000000000..7eb4e5d6b
--- /dev/null
+++ b/worklenz-frontend/src/pages/reporting/timeReports/members-time-reports-updated.tsx
@@ -0,0 +1,67 @@
+import { Card, Flex, Typography, Tooltip } from '@/shared/antd-imports';
+import TimeReportPageHeader from '@/pages/reporting/timeReports/page-header/time-report-page-header';
+import MembersTimeSheet, {
+  MembersTimeSheetRef,
+} from '@/pages/reporting/time-reports/members-time-sheet/members-time-sheet';
+import TimeReportingRightHeader from './timeReportingRightHeader/TimeReportingRightHeader';
+import { useTranslation } from 'react-i18next';
+import { useDocumentTitle } from '@/hooks/useDoumentTItle';
+import { useRef } from 'react';
+import { useUserTimezone } from '@/hooks/useUserTimezone';
+import { InfoCircleOutlined } from '@ant-design/icons';
+
+const { Text } = Typography;
+
+const MembersTimeReports = () => {
+  const { t } = useTranslation('time-report');
+  const chartRef = useRef<MembersTimeSheetRef>(null);
+  const { timezone, timezoneOffset } = useUserTimezone();
+
+  useDocumentTitle('Reporting - Allocation');
+
+  const handleExport = (type: string) => {
+    if (type === 'png') {
+      chartRef.current?.exportChart();
+    }
+  };
+
+  return (
+    <Flex vertical>
+      <TimeReportingRightHeader
+        title={t('Members Time Sheet')}
+        exportType={[{ key: 'png', label: 'PNG' }]}
+        export={handleExport}
+      />
+
+      <Card
+        style={{ borderRadius: '4px' }}
+        title={
+          <div style={{ padding: '16px 0' }}>
+            <Flex justify="space-between" align="center">
+              <TimeReportPageHeader />
+              <Tooltip 
+                title={`All time logs are displayed in your local timezone. Times were logged by users in their respective timezones and converted for your viewing.`}
+              >
+                <Text type="secondary" style={{ fontSize: 12 }}>
+                  <InfoCircleOutlined style={{ marginRight: 4 }} />
+                  Timezone: {timezone} ({timezoneOffset})
+                </Text>
+              </Tooltip>
+            </Flex>
+          </div>
+        }
+        styles={{
+          body: {
+            maxHeight: 'calc(100vh - 300px)',
+            overflowY: 'auto',
+            padding: '16px',
+          },
+        }}
+      >
+        <MembersTimeSheet ref={chartRef} />
+      </Card>
+    </Flex>
+  );
+};
+
+export default MembersTimeReports;
\ No newline at end of file
diff --git a/worklenz-frontend/src/pages/schedule/schedule.tsx b/worklenz-frontend/src/pages/schedule/schedule.tsx
index ba51d28ce..aefe321ea 100644
--- a/worklenz-frontend/src/pages/schedule/schedule.tsx
+++ b/worklenz-frontend/src/pages/schedule/schedule.tsx
@@ -54,7 +54,7 @@ const Schedule: React.FC = () => {
   };
 
   return (
-    <div style={{ marginBlockStart: 65, minHeight: '90vh' }}>
+    <div style={{ minHeight: '90vh' }}>
       <Flex align="center" justify="space-between">
         <Flex
           gap={16}
diff --git a/worklenz-frontend/src/pages/settings/account-deletion/AccountDeletion.tsx b/worklenz-frontend/src/pages/settings/account-deletion/AccountDeletion.tsx
new file mode 100644
index 000000000..974333412
--- /dev/null
+++ b/worklenz-frontend/src/pages/settings/account-deletion/AccountDeletion.tsx
@@ -0,0 +1,190 @@
+import React, { useState } from 'react';
+import { Button, Card, Modal, Typography, Space, Alert, Input, message } from '@/shared/antd-imports';
+import { ExclamationCircleOutlined, DeleteOutlined } from '@/shared/antd-imports';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+import { useAuthService } from '@/hooks/useAuth';
+import { accountApiService } from '@/api/account/account.api.service';
+import { authApiService } from '@/api/auth/auth.api.service';
+import CacheCleanup from '@/utils/cache-cleanup';
+import logger from '@/utils/errorLogger';
+
+const { Title, Text, Paragraph } = Typography;
+
+const AccountDeletion: React.FC = () => {
+  const { t } = useTranslation('settings/account-deletion');
+  const [isModalVisible, setIsModalVisible] = useState(false);
+  const [confirmText, setConfirmText] = useState('');
+  const [loading, setLoading] = useState(false);
+  const navigate = useNavigate();
+  const authService = useAuthService();
+  const currentSession = authService.getCurrentSession();
+
+  const showModal = () => {
+    setIsModalVisible(true);
+  };
+
+  const handleCancel = () => {
+    setIsModalVisible(false);
+    setConfirmText('');
+  };
+
+  const handleDelete = async () => {
+    if (confirmText !== 'DELETE') {
+      message.error(t('invalidConfirmation'));
+      return;
+    }
+
+    if (!currentSession?.id) {
+      message.error('User session not found');
+      return;
+    }
+
+    setLoading(true);
+    try {
+      const response = await accountApiService.requestDeletion({
+        userId: currentSession.id,
+        userEmail: currentSession.email,
+        userName: currentSession.name
+      });
+
+      if (response.done) {
+        message.success(t('deletionRequestSuccess'));
+        Modal.success({
+          title: t('requestSubmitted'),
+          content: t('deletionConfirmationMessage'),
+          onOk: async () => {
+            // Custom logout flow for account deletion - redirect to signup instead of login
+            try {
+              // Clear local session
+              await authService.signOut();
+              
+              // Call backend logout
+              await authApiService.logout();
+              
+              // Clear all caches using the utility
+              await CacheCleanup.clearAllCaches();
+              
+              // Force a hard reload to signup page
+              CacheCleanup.forceReload('/auth/signup');
+              
+            } catch (error) {
+              console.error('Logout error after account deletion:', error);
+              // Fallback: force reload to signup page
+              CacheCleanup.forceReload('/auth/signup');
+            }
+          },
+        });
+      } else {
+        message.error(t('deletionRequestFailed'));
+      }
+    } catch (error) {
+      logger.error('Account deletion request failed:', error);
+      message.error(t('deletionRequestFailed'));
+    } finally {
+      setLoading(false);
+      handleCancel();
+    }
+  };
+
+  return (
+    <div className="p-6">
+      <Title level={3}>{t('title')}</Title>
+      
+      <Card className="mt-4">
+        <Space direction="vertical" size="large" style={{ width: '100%' }}>
+          <div>
+            <Title level={4}>{t('dangerZone')}</Title>
+            <Alert
+              message={t('warningTitle')}
+              description={
+                <div>
+                  <Paragraph>{t('warningDescription1')}</Paragraph>
+                  <ul>
+                    <li>{t('warningPoint1')}</li>
+                    <li>{t('warningPoint2')}</li>
+                    <li>{t('warningPoint3')}</li>
+                    <li>{t('warningPoint4')}</li>
+                  </ul>
+                  <Paragraph strong>{t('warningDescription2')}</Paragraph>
+                </div>
+              }
+              type="warning"
+              showIcon
+              icon={<ExclamationCircleOutlined />}
+              className="mb-4"
+            />
+          </div>
+
+          <div>
+            <Paragraph>{t('beforeDeletion')}</Paragraph>
+            <ul>
+              <li>{t('exportData')}</li>
+              <li>{t('cancelSubscription')}</li>
+              <li>{t('informTeam')}</li>
+            </ul>
+          </div>
+
+          <Button 
+            danger 
+            type="primary" 
+            icon={<DeleteOutlined />}
+            onClick={showModal}
+            size="large"
+          >
+            {t('deleteAccountButton')}
+          </Button>
+        </Space>
+      </Card>
+
+      <Modal
+        title={
+          <Space>
+            <ExclamationCircleOutlined style={{ color: '#ff4d4f' }} />
+            <span>{t('confirmDeletionTitle')}</span>
+          </Space>
+        }
+        open={isModalVisible}
+        onOk={handleDelete}
+        onCancel={handleCancel}
+        okText={t('confirmDelete')}
+        cancelText={t('cancel')}
+        okButtonProps={{ 
+          danger: true, 
+          disabled: confirmText !== 'DELETE',
+          loading: loading 
+        }}
+        width={600}
+      >
+        <Space direction="vertical" size="large" style={{ width: '100%' }}>
+          <Alert
+            message={t('finalWarning')}
+            type="error"
+            showIcon
+          />
+          
+          <div>
+            <Text strong>{t('confirmationInstructions')}</Text>
+            <Paragraph>{t('typeDeleteToConfirm')}</Paragraph>
+            <Input
+              placeholder="DELETE"
+              value={confirmText}
+              onChange={(e) => setConfirmText(e.target.value)}
+              size="large"
+              style={{ marginTop: 8 }}
+            />
+          </div>
+
+          <Alert
+            message={t('dataRetentionNotice')}
+            description={t('dataRetentionDescription')}
+            type="info"
+            showIcon
+          />
+        </Space>
+      </Modal>
+    </div>
+  );
+};
+
+export default AccountDeletion;
\ No newline at end of file
diff --git a/worklenz-frontend/src/pages/settings/labels/labels-settings.tsx b/worklenz-frontend/src/pages/settings/labels/LabelsSettings.tsx
similarity index 57%
rename from worklenz-frontend/src/pages/settings/labels/labels-settings.tsx
rename to worklenz-frontend/src/pages/settings/labels/LabelsSettings.tsx
index dffc7eaae..f35113c22 100644
--- a/worklenz-frontend/src/pages/settings/labels/labels-settings.tsx
+++ b/worklenz-frontend/src/pages/settings/labels/LabelsSettings.tsx
@@ -8,22 +8,28 @@ import {
   TableProps,
   Tooltip,
   Typography,
+  DeleteOutlined,
+  ExclamationCircleFilled,
+  SearchOutlined,
+  EditOutlined,
 } from '@/shared/antd-imports';
 import { useEffect, useMemo, useState } from 'react';
 
-import PinRouteToNavbarButton from '../../../components/PinRouteToNavbarButton';
+import PinRouteToNavbarButton from '@/components/PinRouteToNavbarButton';
 import { useTranslation } from 'react-i18next';
-import { DeleteOutlined, ExclamationCircleFilled, SearchOutlined } from '@/shared/antd-imports';
 import { ITaskLabel } from '@/types/label.type';
 import { labelsApiService } from '@/api/taskAttributes/labels/labels.api.service';
 import CustomColorLabel from '@components/task-list-common/labelsSelector/custom-color-label';
 import { useDocumentTitle } from '@/hooks/useDoumentTItle';
 import logger from '@/utils/errorLogger';
+import LabelsDrawer from './labels-drawer';
 
 const LabelsSettings = () => {
   const { t } = useTranslation('settings/labels');
-  useDocumentTitle('Manage Labels');
+  useDocumentTitle(t('pageTitle', 'Manage Labels'));
 
+  const [selectedLabelId, setSelectedLabelId] = useState<string | null>(null);
+  const [showDrawer, setShowDrawer] = useState(false);
   const [searchQuery, setSearchQuery] = useState('');
   const [labels, setLabels] = useState<ITaskLabel[]>([]);
   const [loading, setLoading] = useState(false);
@@ -64,32 +70,62 @@ const LabelsSettings = () => {
     }
   };
 
+  const handleEditClick = (id: string) => {
+    setSelectedLabelId(id);
+    setShowDrawer(true);
+  };
+
+  const handleDrawerClose = () => {
+    setSelectedLabelId(null);
+    setShowDrawer(false);
+    getLabels();
+  };
+
+
   // table columns
   const columns: TableProps['columns'] = [
     {
       key: 'label',
-      title: t('labelColumn'),
+      title: t('labelColumn', 'Label'),
+      onCell: record => ({
+        onClick: () => handleEditClick(record.id!),
+      }),
       render: (record: ITaskLabel) => <CustomColorLabel label={record} />,
     },
     {
       key: 'associatedTask',
-      title: t('associatedTaskColumn'),
+      title: t('associatedTaskColumn', 'Associated Task Count'),
       render: (record: ITaskLabel) => <Typography.Text>{record.usage}</Typography.Text>,
     },
     {
       key: 'actionBtns',
-      width: 60,
+      width: 100,
       render: (record: ITaskLabel) => (
         <div className="action-button opacity-0 transition-opacity duration-200">
-          <Popconfirm
-            title="Are you sure you want to delete this?"
-            icon={<ExclamationCircleFilled style={{ color: '#ff9800' }} />}
-            okText="Delete"
-            cancelText="Cancel"
-            onConfirm={() => deleteLabel(record.id!)}
-          >
-            <Button shape="default" icon={<DeleteOutlined />} size="small" />
-          </Popconfirm>
+          <Flex gap={4}>
+            <Tooltip title={t('editTooltip', 'Edit')}>
+              <Button
+                shape="default"
+                icon={<EditOutlined />}
+                size="small"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  handleEditClick(record.id!);
+                }}
+              />
+            </Tooltip>
+            <Popconfirm
+              title={t('deleteConfirmTitle', 'Are you sure you want to delete this?')}
+              icon={<ExclamationCircleFilled style={{ color: '#ff9800' }} />}
+              okText={t('deleteButton', 'Delete')}
+              cancelText={t('cancelButton', 'Cancel')}
+              onConfirm={() => deleteLabel(record.id!)}
+            >
+              <Tooltip title={t('deleteTooltip', 'Delete')}>
+                <Button shape="default" icon={<DeleteOutlined />} size="small" />
+              </Tooltip>
+            </Popconfirm>
+          </Flex>
         </div>
       ),
     },
@@ -104,12 +140,12 @@ const LabelsSettings = () => {
             <Input
               value={searchQuery}
               onChange={e => setSearchQuery(e.target.value)}
-              placeholder={t('searchPlaceholder')}
+              placeholder={t('searchPlaceholder', 'Search by name')}
               style={{ maxWidth: 232 }}
               suffix={<SearchOutlined />}
             />
 
-            <Tooltip title={t('pinTooltip')} trigger={'hover'}>
+            <Tooltip title={t('pinTooltip', 'Click to pin this into the main menu')} trigger={'hover'}>
               {/* this button pin this route to navbar  */}
               <PinRouteToNavbarButton name="labels" path="/worklenz/settings/labels" />
             </Tooltip>
@@ -119,13 +155,17 @@ const LabelsSettings = () => {
     >
       <Table
         locale={{
-          emptyText: <Typography.Text>{t('emptyText')}</Typography.Text>,
+          emptyText: <Typography.Text>{t('emptyText', 'Labels can be created while updating or creating tasks.')}</Typography.Text>,
         }}
         loading={loading}
         className="custom-two-colors-row-table"
         dataSource={filteredData}
         columns={columns}
         rowKey={record => record.id!}
+        onRow={(record) => ({
+          style: { cursor: 'pointer' },
+          onClick: () => handleEditClick(record.id!),
+        })}
         pagination={{
           showSizeChanger: true,
           defaultPageSize: 20,
@@ -133,6 +173,12 @@ const LabelsSettings = () => {
           size: 'small',
         }}
       />
+
+      <LabelsDrawer
+        drawerOpen={showDrawer}
+        labelId={selectedLabelId}
+        drawerClosed={handleDrawerClose}
+      />
     </Card>
   );
 };
diff --git a/worklenz-frontend/src/pages/settings/labels/labels-drawer.tsx b/worklenz-frontend/src/pages/settings/labels/labels-drawer.tsx
new file mode 100644
index 000000000..2320b1d5e
--- /dev/null
+++ b/worklenz-frontend/src/pages/settings/labels/labels-drawer.tsx
@@ -0,0 +1,228 @@
+import { Button, Drawer, Form, Input, message, Typography, Flex, Dropdown } from '@/shared/antd-imports';
+import { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { theme } from 'antd';
+import { labelsApiService } from '@/api/taskAttributes/labels/labels.api.service';
+
+const WorklenzColorShades = {
+  "#154c9b": ["#0D2A50", "#112E54", "#153258", "#19365C", "#1D3A60", "#213E64", "#254268", "#29466C", "#2D4A70", "#314E74"],
+  "#3b7ad4": ["#224884", "#26528A", "#2A5C90", "#2E6696", "#32709C", "#367AA2", "#3A84A8", "#3E8EAE", "#4298B4", "#46A2BA"],
+  "#70a6f3": ["#3D5D8A", "#46679E", "#5071B2", "#597BC6", "#6385DA", "#6C8FEE", "#7699F2", "#7FA3F6", "#89ADFA", "#92B7FE"],
+  "#7781ca": ["#42486F", "#4C5283", "#565C97", "#6066AB", "#6A70BF", "#747AD3", "#7E84E7", "#888EFB", "#9298FF", "#9CA2FF"],
+  "#9877ca": ["#542D70", "#6E3A8A", "#8847A4", "#A254BE", "#BC61D8", "#D66EF2", "#E07BFC", "#EA88FF", "#F495FF", "#FEA2FF"],
+  "#c178c9": ["#6A2E6F", "#843B89", "#9E48A3", "#B855BD", "#D262D7", "#EC6FF1", "#F67CFB", "#FF89FF", "#FF96FF", "#FFA3FF"],
+  "#ee87c5": ["#832C6A", "#9D3984", "#B7469E", "#D153B8", "#EB60D2", "#FF6DEC", "#FF7AF6", "#FF87FF", "#FF94FF", "#FFA1FF"],
+  "#ca7881": ["#6F2C3E", "#893958", "#A34672", "#BD538C", "#D760A6", "#F16DC0", "#FB7ADA", "#FF87F4", "#FF94FF", "#FFA1FF"],
+  "#75c9c0": ["#3F6B66", "#497E7A", "#53918E", "#5DA4A2", "#67B7B6", "#71CBCA", "#7BDEDE", "#85F2F2", "#8FFFFF", "#99FFFF"],
+  "#75c997": ["#3F6B54", "#497E6A", "#53917F", "#5DA495", "#67B7AA", "#71CBBF", "#7BDED4", "#85F2E9", "#8FFFFF", "#99FFFF"],
+  "#80ca79": ["#456F3E", "#5A804D", "#6F935C", "#84A66B", "#99B97A", "#AECC89", "#C3DF98", "#D8F2A7", "#EDFFB6", "#FFFFC5"],
+  "#aacb78": ["#5F6F3E", "#7A804D", "#94935C", "#AFA66B", "#CAB97A", "#E5CC89", "#FFDF98", "#FFF2A7", "#FFFFB6", "#FFFFC5"],
+  "#cbbc78": ["#6F5D3E", "#8A704D", "#A4835C", "#BF966B", "#DAA97A", "#F5BC89", "#FFCF98", "#FFE2A7", "#FFF5B6", "#FFFFC5"],
+  "#cb9878": ["#704D3E", "#8B604D", "#A6735C", "#C1866B", "#DC997A", "#F7AC89", "#FFBF98", "#FFD2A7", "#FFE5B6", "#FFF8C5"],
+  "#bb774c": ["#653D27", "#80502C", "#9B6331", "#B67636", "#D1893B", "#EC9C40", "#FFAF45", "#FFC24A", "#FFD54F", "#FFE854"],
+  "#905b39": ["#4D2F1A", "#623C23", "#774A2C", "#8C5735", "#A1643E", "#B67147", "#CB7E50", "#E08B59", "#F59862", "#FFA56B"],
+  "#903737": ["#4D1A1A", "#622323", "#772C2C", "#8C3535", "#A13E3E", "#B64747", "#CB5050", "#E05959", "#F56262", "#FF6B6B"],
+  "#bf4949": ["#661212", "#801B1B", "#992424", "#B32D2D", "#CC3636", "#E63F3F", "#FF4848", "#FF5151", "#FF5A5A", "#FF6363"],
+  "#f37070": ["#853A3A", "#A04D4D", "#BA6060", "#D47373", "#EF8686", "#FF9999", "#FFA3A3", "#FFACAC", "#FFB6B6", "#FFBFBF"],
+  "#ff9c3c": ["#8F5614", "#AA6F1F", "#C48829", "#DFA233", "#F9BB3D", "#FFC04E", "#FFC75F", "#FFCE70", "#FFD581", "#FFDB92"],
+  "#fbc84c": ["#8F6D14", "#AA862F", "#C4A029", "#DFB933", "#F9D23D", "#FFD74E", "#FFDC5F", "#FFE170", "#FFE681", "#FFEB92"],
+  "#cbc8a1": ["#6F6D58", "#8A886F", "#A4A286", "#BFBC9D", "#DAD6B4", "#F5F0CB", "#FFFEDE", "#FFFFF2", "#FFFFCD", "#FFFFCD"],
+  "#a9a9a9": ["#5D5D5D", "#757575", "#8D8D8D", "#A5A5A5", "#BDBDBD", "#D5D5D5", "#EDEDED", "#F5F5F5", "#FFFFFF", "#FFFFFF"],
+  "#767676": ["#404040", "#4D4D4D", "#5A5A5A", "#676767", "#747474", "#818181", "#8E8E8E", "#9B9B9B", "#A8A8A8", "#B5B5B5"]
+} as const;
+
+// Flatten the color shades into a single array for the color picker
+const WorklenzColorCodes = Object.values(WorklenzColorShades).flat();
+
+type LabelsDrawerProps = {
+  drawerOpen: boolean;
+  labelId: string | null;
+  drawerClosed: () => void;
+};
+
+const LabelsDrawer = ({
+  drawerOpen = false,
+  labelId = null,
+  drawerClosed,
+}: LabelsDrawerProps) => {
+  const { t } = useTranslation('settings/labels');
+  const { token } = theme.useToken();
+  const [form] = Form.useForm();
+
+  useEffect(() => {
+    if (labelId) {
+      getLabelById(labelId);
+    } else {
+      form.resetFields();
+      form.setFieldsValue({ color_code: Object.keys(WorklenzColorShades)[0] }); // Set default color
+    }
+  }, [labelId, form]);
+
+  const getLabelById = async (id: string) => {
+    try {
+      const response = await labelsApiService.getLabels();
+      if (response.done) {
+        const label = response.body.find((l: any) => l.id === id);
+        if (label) {
+          form.setFieldsValue({ 
+            name: label.name,
+            color_code: label.color_code 
+          });
+        }
+      }
+    } catch (error) {
+      message.error(t('fetchLabelErrorMessage', 'Failed to fetch label'));
+    }
+  };
+
+  const handleFormSubmit = async (values: { name: string; color_code: string }) => {
+    try {
+      if (labelId) {
+        const response = await labelsApiService.updateLabel(labelId, {
+          name: values.name,
+          color: values.color_code,
+        });
+        if (response.done) {
+          message.success(t('updateLabelSuccessMessage', 'Label updated successfully'));
+          drawerClosed();
+        }
+      } else {
+        // For creating new labels, we'd need a create API endpoint
+        message.info(t('createNotSupported', 'Creating new labels is done through tasks'));
+        drawerClosed();
+      }
+    } catch (error) {
+      message.error(labelId ? t('updateLabelErrorMessage', 'Failed to update label') : t('createLabelErrorMessage', 'Failed to create label'));
+    }
+  };
+
+  const handleClose = () => {
+    form.resetFields();
+    drawerClosed();
+  };
+
+  const ColorPicker = ({ value, onChange }: { value?: string; onChange?: (color: string) => void }) => (
+    <Dropdown
+      dropdownRender={() => (
+        <div style={{ 
+          padding: 16, 
+          backgroundColor: token.colorBgElevated, 
+          borderRadius: token.borderRadius,
+          boxShadow: token.boxShadowSecondary,
+          border: `1px solid ${token.colorBorder}`,
+          width: 400,
+          maxHeight: 500,
+          overflowY: 'auto'
+        }}>
+          <div style={{ 
+            display: 'grid', 
+            gridTemplateColumns: 'repeat(10, 1fr)', 
+            gap: 6,
+            justifyItems: 'center'
+          }}>
+            {WorklenzColorCodes.map((color) => (
+              <div
+                key={color}
+                style={{
+                  width: 18,
+                  height: 18,
+                  backgroundColor: color,
+                  borderRadius: 2,
+                  border: value === color ? `2px solid ${token.colorPrimary}` : `1px solid ${token.colorBorder}`,
+                  cursor: 'pointer',
+                  transition: 'all 0.2s ease',
+                  flexShrink: 0
+                }}
+                onClick={() => onChange?.(color)}
+                onMouseEnter={(e) => {
+                  if (value !== color) {
+                    e.currentTarget.style.transform = 'scale(1.2)';
+                    e.currentTarget.style.boxShadow = token.boxShadow;
+                    e.currentTarget.style.zIndex = '10';
+                  }
+                }}
+                onMouseLeave={(e) => {
+                  e.currentTarget.style.transform = 'scale(1)';
+                  e.currentTarget.style.boxShadow = 'none';
+                  e.currentTarget.style.zIndex = '1';
+                }}
+              />
+            ))}
+          </div>
+        </div>
+      )}
+      trigger={['click']}
+    >
+      <div
+        style={{
+          width: 40,
+          height: 40,
+          backgroundColor: value || Object.keys(WorklenzColorShades)[0],
+          borderRadius: 4,
+          border: `1px solid ${token.colorBorder}`,
+          cursor: 'pointer',
+          transition: 'all 0.2s ease',
+        }}
+        onMouseEnter={(e) => {
+          e.currentTarget.style.boxShadow = token.boxShadow;
+        }}
+        onMouseLeave={(e) => {
+          e.currentTarget.style.boxShadow = 'none';
+        }}
+      />
+    </Dropdown>
+  );
+
+  return (
+    <Drawer
+      title={
+        <Typography.Text style={{ fontWeight: 500, fontSize: 16 }}>
+          {labelId ? t('updateLabelDrawerTitle', 'Edit Label') : t('createLabelDrawerTitle', 'Create Label')}
+        </Typography.Text>
+      }
+      open={drawerOpen}
+      onClose={handleClose}
+      destroyOnClose
+      width={400}
+    >
+      <Form form={form} layout="vertical" onFinish={handleFormSubmit}>
+        <Form.Item
+          name="name"
+          label={t('nameLabel', 'Name')}
+          rules={[
+            {
+              required: true,
+              message: t('nameRequiredMessage', 'Please enter a label name'),
+            },
+          ]}
+        >
+          <Input placeholder={t('namePlaceholder', 'Enter label name')} />
+        </Form.Item>
+
+        <Form.Item
+          name="color_code"
+          label={t('colorLabel', 'Color')}
+          rules={[
+            {
+              required: true,
+              message: t('colorRequiredMessage', 'Please select a color'),
+            },
+          ]}
+        >
+          <ColorPicker />
+        </Form.Item>
+
+        <Flex justify="end" gap={8}>
+          <Button onClick={handleClose}>
+            {t('cancelButton', 'Cancel')}
+          </Button>
+          <Button type="primary" htmlType="submit">
+            {labelId ? t('updateButton', 'Update') : t('createButton', 'Create')}
+          </Button>
+        </Flex>
+      </Form>
+    </Drawer>
+  );
+};
+
+export default LabelsDrawer;
\ No newline at end of file
diff --git a/worklenz-frontend/src/pages/settings/language-and-region/language-and-region-settings.test.ts b/worklenz-frontend/src/pages/settings/language-and-region/language-and-region-settings.test.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/worklenz-frontend/src/pages/settings/sidebar/settings-sidebar.tsx b/worklenz-frontend/src/pages/settings/sidebar/settings-sidebar.tsx
index f39bc8d53..9f21a143d 100644
--- a/worklenz-frontend/src/pages/settings/sidebar/settings-sidebar.tsx
+++ b/worklenz-frontend/src/pages/settings/sidebar/settings-sidebar.tsx
@@ -26,17 +26,24 @@ const SettingSidebar: React.FC = () => {
       if (currentSession?.is_google && item.key === 'change-password') {
         return null;
       }
+      const isDangerous = item.isDangerous;
       return {
         key: item.key,
         label: (
           <Flex gap={8} justify="space-between" align="center">
             <Flex gap={8} align="center">
               {item.icon}
-              <Link to={`/worklenz/settings/${item.endpoint}`}>{t(item.name)}</Link>
+              <Link 
+                to={`/worklenz/settings/${item.endpoint}`}
+                style={{ color: isDangerous ? '#ff4d4f' : undefined }}
+              >
+                {t(item.name)}
+              </Link>
             </Flex>
             <RightOutlined style={{ fontSize: 12 }} />
           </Flex>
         ),
+        style: undefined,
       };
     })
     .filter((item): item is NonNullable<typeof item> => item !== null);
diff --git a/worklenz-frontend/src/shared/antd-imports.ts b/worklenz-frontend/src/shared/antd-imports.ts
index 9f532aa25..e9f312d91 100644
--- a/worklenz-frontend/src/shared/antd-imports.ts
+++ b/worklenz-frontend/src/shared/antd-imports.ts
@@ -65,6 +65,7 @@ import {
   Timeline,
   Mentions,
   Radio,
+  Steps
 } from 'antd/es';
 
 // Icons - Import commonly used ones
@@ -181,7 +182,8 @@ export {
   InfoCircleOutlined,
   WarningTwoTone,
   ShareAltOutlined,
-  CloudDownloadOutlined
+  CloudDownloadOutlined,
+  CopyOutlined
 } from '@ant-design/icons';
 
 // Re-export all components with React
@@ -240,6 +242,7 @@ export {
   Timeline,
   Mentions,
   Radio,
+  Steps
 };
 
 // TypeScript Types - Import commonly used ones
diff --git a/worklenz-frontend/src/shared/constants.ts b/worklenz-frontend/src/shared/constants.ts
index a4a5bd6ed..8e57a2ca2 100644
--- a/worklenz-frontend/src/shared/constants.ts
+++ b/worklenz-frontend/src/shared/constants.ts
@@ -313,3 +313,293 @@ export const durations: IRPTDuration[] = [
     dates: '',
   },
 ];
+
+export const WorklenzColorCodes = [
+  // Row 1: Slate/Gray spectrum
+  '#0f172a',
+  '#1e293b',
+  '#334155',
+  '#475569',
+  '#64748b',
+  '#94a3b8',
+  '#cbd5e1',
+  '#e2e8f0',
+  '#f1f5f9',
+  '#f8fafc',
+  '#ffffff',
+  '#000000',
+  '#1a1a1a',
+  '#2d2d30',
+  '#3e3e42',
+  '#525252',
+
+  // Row 2: Blue spectrum - dark to light
+  '#0c4a6e',
+  '#075985',
+  '#0369a1',
+  '#0284c7',
+  '#0ea5e9',
+  '#38bdf8',
+  '#7dd3fc',
+  '#bae6fd',
+  '#e0f2fe',
+  '#f0f9ff',
+  '#1e3a8a',
+  '#1d4ed8',
+  '#2563eb',
+  '#3b82f6',
+  '#60a5fa',
+  '#93c5fd',
+
+  // Row 3: Indigo/Violet spectrum
+  '#312e81',
+  '#3730a3',
+  '#4338ca',
+  '#4f46e5',
+  '#6366f1',
+  '#818cf8',
+  '#a5b4fc',
+  '#c7d2fe',
+  '#e0e7ff',
+  '#eef2ff',
+  '#581c87',
+  '#6b21a8',
+  '#7c3aed',
+  '#8b5cf6',
+  '#a78bfa',
+  '#c4b5fd',
+
+  // Row 4: Purple/Fuchsia spectrum
+  '#701a75',
+  '#86198f',
+  '#a21caf',
+  '#c026d3',
+  '#d946ef',
+  '#e879f9',
+  '#f0abfc',
+  '#f3e8ff',
+  '#faf5ff',
+  '#fdf4ff',
+  '#831843',
+  '#be185d',
+  '#e11d48',
+  '#f43f5e',
+  '#fb7185',
+  '#fda4af',
+
+  // Row 5: Pink/Rose spectrum
+  '#9f1239',
+  '#be123c',
+  '#e11d48',
+  '#f43f5e',
+  '#fb7185',
+  '#fda4af',
+  '#fecdd3',
+  '#fed7d7',
+  '#fef2f2',
+  '#fff1f2',
+  '#450a0a',
+  '#7f1d1d',
+  '#991b1b',
+  '#dc2626',
+  '#ef4444',
+  '#f87171',
+
+  // Row 6: Red spectrum
+  '#7f1d1d',
+  '#991b1b',
+  '#dc2626',
+  '#ef4444',
+  '#f87171',
+  '#fca5a5',
+  '#fecaca',
+  '#fef2f2',
+  '#fffbeb',
+  '#fefce8',
+  '#92400e',
+  '#a16207',
+  '#ca8a04',
+  '#eab308',
+  '#facc15',
+  '#fef08a',
+
+  // Row 7: Orange spectrum
+  '#9a3412',
+  '#c2410c',
+  '#ea580c',
+  '#f97316',
+  '#fb923c',
+  '#fdba74',
+  '#fed7aa',
+  '#ffedd5',
+  '#fff7ed',
+  '#fffbeb',
+  '#78350f',
+  '#92400e',
+  '#c2410c',
+  '#ea580c',
+  '#f97316',
+  '#fb923c',
+
+  // Row 8: Amber/Yellow spectrum
+  '#451a03',
+  '#78350f',
+  '#92400e',
+  '#a16207',
+  '#ca8a04',
+  '#eab308',
+  '#facc15',
+  '#fef08a',
+  '#fefce8',
+  '#fffbeb',
+  '#365314',
+  '#4d7c0f',
+  '#65a30d',
+  '#84cc16',
+  '#a3e635',
+  '#bef264',
+
+  // Row 9: Lime/Green spectrum
+  '#1a2e05',
+  '#365314',
+  '#4d7c0f',
+  '#65a30d',
+  '#84cc16',
+  '#a3e635',
+  '#bef264',
+  '#d9f99d',
+  '#ecfccb',
+  '#f7fee7',
+  '#14532d',
+  '#166534',
+  '#15803d',
+  '#16a34a',
+  '#22c55e',
+  '#4ade80',
+
+  // Row 10: Emerald spectrum
+  '#064e3b',
+  '#065f46',
+  '#047857',
+  '#059669',
+  '#10b981',
+  '#34d399',
+  '#6ee7b7',
+  '#a7f3d0',
+  '#d1fae5',
+  '#ecfdf5',
+  '#0f766e',
+  '#0d9488',
+  '#14b8a6',
+  '#2dd4bf',
+  '#5eead4',
+  '#99f6e4',
+
+  // Row 11: Teal/Cyan spectrum
+  '#134e4a',
+  '#155e75',
+  '#0891b2',
+  '#0e7490',
+  '#0284c7',
+  '#0ea5e9',
+  '#22d3ee',
+  '#67e8f9',
+  '#a5f3fc',
+  '#cffafe',
+  '#164e63',
+  '#0c4a6e',
+  '#075985',
+  '#0369a1',
+  '#0284c7',
+  '#0ea5e9',
+
+  // Row 12: Sky spectrum
+  '#0c4a6e',
+  '#075985',
+  '#0369a1',
+  '#0284c7',
+  '#0ea5e9',
+  '#38bdf8',
+  '#7dd3fc',
+  '#bae6fd',
+  '#e0f2fe',
+  '#f0f9ff',
+  '#1e40af',
+  '#1d4ed8',
+  '#2563eb',
+  '#3b82f6',
+  '#60a5fa',
+  '#93c5fd',
+
+  // Row 13: Warm grays and browns
+  '#292524',
+  '#44403c',
+  '#57534e',
+  '#78716c',
+  '#a8a29e',
+  '#d6d3d1',
+  '#e7e5e4',
+  '#f5f5f4',
+  '#fafaf9',
+  '#ffffff',
+  '#7c2d12',
+  '#9a3412',
+  '#c2410c',
+  '#ea580c',
+  '#f97316',
+  '#fb923c',
+
+  // Row 14: Cool grays
+  '#111827',
+  '#1f2937',
+  '#374151',
+  '#4b5563',
+  '#6b7280',
+  '#9ca3af',
+  '#d1d5db',
+  '#e5e7eb',
+  '#f3f4f6',
+  '#f9fafb',
+  '#030712',
+  '#0c0a09',
+  '#1c1917',
+  '#292524',
+  '#44403c',
+  '#57534e',
+
+  // Row 15: Neutral spectrum
+  '#171717',
+  '#262626',
+  '#404040',
+  '#525252',
+  '#737373',
+  '#a3a3a3',
+  '#d4d4d4',
+  '#e5e5e5',
+  '#f5f5f5',
+  '#fafafa',
+  '#09090b',
+  '#18181b',
+  '#27272a',
+  '#3f3f46',
+  '#52525b',
+  '#71717a',
+
+  // Row 16: Extended colors
+  '#a1a1aa',
+  '#d4d4d8',
+  '#e4e4e7',
+  '#f4f4f5',
+  '#fafafa',
+  '#27272a',
+  '#3f3f46',
+  '#52525b',
+  '#71717a',
+  '#a1a1aa',
+  '#d4d4d8',
+  '#e4e4e7',
+  '#f4f4f5',
+  '#fafafa',
+  '#ffffff',
+  '#000000',
+];
diff --git a/worklenz-frontend/src/styles/customOverrides.css b/worklenz-frontend/src/styles/customOverrides.css
index b2f9586e2..0a6b4869b 100644
--- a/worklenz-frontend/src/styles/customOverrides.css
+++ b/worklenz-frontend/src/styles/customOverrides.css
@@ -179,43 +179,4 @@ body.dark .overview-stat-card .ant-card-body,
 
 .ql-snow .ql-stroke {
   stroke: #6c757d !important;
-}
-
-/* HubSpot Widget Dark Mode Fixes */
-html.dark #hubspot-messages-iframe-container {
-  background-color: transparent !important;
-}
-
-html.dark #hubspot-messages-iframe-container iframe {
-  background-color: transparent !important;
-}
-
-/* Target the HubSpot widget container */
-html.dark .hs-messages-widget-open {
-  background-color: transparent !important;
-}
-
-/* Remove white background from HubSpot elements */
-html.dark #hs-messages-iframe-container,
-html.dark .hs-messages-iframe-container {
-  background: transparent !important;
-  background-color: transparent !important;
-}
-
-/* Ensure the iframe wrapper has no background */
-html.dark iframe#hs-messages-iframe {
-  background: transparent !important;
-}
-
-/* Target the widget launcher button area */
-html.dark .hs-messages-widget,
-html.dark .hs-messages-widget-container {
-  background: transparent !important;
-  background-color: transparent !important;
-}
-
-/* Remove any box shadow that might appear white */
-html.dark #hubspot-messages-iframe-container,
-html.dark .hs-messages-widget {
-  box-shadow: none !important;
-}
+}
\ No newline at end of file
diff --git a/worklenz-frontend/src/test/setup.ts b/worklenz-frontend/src/test/setup.ts
new file mode 100644
index 000000000..5746881e6
--- /dev/null
+++ b/worklenz-frontend/src/test/setup.ts
@@ -0,0 +1,83 @@
+import '@testing-library/jest-dom';
+import { vi } from 'vitest';
+
+// Mock environment variables
+Object.defineProperty(process, 'env', {
+  value: {
+    NODE_ENV: 'test',
+    VITE_API_URL: 'http://localhost:3000',
+    VITE_ENABLE_GOOGLE_LOGIN: 'true',
+    VITE_ENABLE_RECAPTCHA: 'false',
+    VITE_RECAPTCHA_SITE_KEY: 'test-site-key',
+  },
+});
+
+// Mock window.matchMedia
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: vi.fn().mockImplementation(query => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: vi.fn(), // deprecated
+    removeListener: vi.fn(), // deprecated
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn(),
+  })),
+});
+
+// Mock IntersectionObserver
+global.IntersectionObserver = vi.fn().mockImplementation(() => ({
+  observe: vi.fn(),
+  unobserve: vi.fn(),
+  disconnect: vi.fn(),
+}));
+
+// Mock ResizeObserver
+global.ResizeObserver = vi.fn().mockImplementation(() => ({
+  observe: vi.fn(),
+  unobserve: vi.fn(),
+  disconnect: vi.fn(),
+}));
+
+// Mock window.getSelection
+Object.defineProperty(window, 'getSelection', {
+  writable: true,
+  value: vi.fn().mockImplementation(() => ({
+    rangeCount: 0,
+    getRangeAt: vi.fn(),
+    removeAllRanges: vi.fn(),
+  })),
+});
+
+// Mock localStorage
+const localStorageMock = {
+  getItem: vi.fn(),
+  setItem: vi.fn(),
+  removeItem: vi.fn(),
+  clear: vi.fn(),
+};
+vi.stubGlobal('localStorage', localStorageMock);
+
+// Mock sessionStorage
+const sessionStorageMock = {
+  getItem: vi.fn(),
+  setItem: vi.fn(),
+  removeItem: vi.fn(),
+  clear: vi.fn(),
+};
+vi.stubGlobal('sessionStorage', sessionStorageMock);
+
+// Suppress console warnings during tests
+const originalConsoleWarn = console.warn;
+console.warn = (...args) => {
+  // Suppress specific warnings that are not relevant for tests
+  if (
+    args[0]?.includes?.('React Router Future Flag Warning') ||
+    args[0]?.includes?.('validateDOMNesting')
+  ) {
+    return;
+  }
+  originalConsoleWarn(...args);
+};
\ No newline at end of file
diff --git a/worklenz-frontend/src/types/account-setup/survey.types.ts b/worklenz-frontend/src/types/account-setup/survey.types.ts
new file mode 100644
index 000000000..4b560b668
--- /dev/null
+++ b/worklenz-frontend/src/types/account-setup/survey.types.ts
@@ -0,0 +1,51 @@
+export interface ISurveyQuestion {
+  id: string;
+  survey_id: string;
+  question_key: string;
+  question_type: 'single_choice' | 'multiple_choice' | 'text';
+  is_required: boolean;
+  sort_order: number;
+  options?: string[];
+}
+
+export interface ISurvey {
+  id: string;
+  name: string;
+  description?: string;
+  survey_type: 'account_setup' | 'onboarding' | 'feedback';
+  is_active: boolean;
+  questions?: ISurveyQuestion[];
+}
+
+export interface ISurveyAnswer {
+  question_id: string;
+  answer_text?: string;
+  answer_json?: string[];
+}
+
+export interface ISurveyResponse {
+  id?: string;
+  survey_id: string;
+  user_id?: string;
+  is_completed: boolean;
+  answers: ISurveyAnswer[];
+}
+
+export interface ISurveySubmissionRequest {
+  survey_id: string;
+  answers: ISurveyAnswer[];
+}
+
+// Account setup survey specific types
+export type OrganizationType = 'freelancer' | 'startup' | 'small_medium_business' | 'agency' | 'enterprise' | 'other';
+export type UserRole = 'founder_ceo' | 'project_manager' | 'software_developer' | 'designer' | 'operations' | 'other';
+export type UseCase = 'task_management' | 'team_collaboration' | 'resource_planning' | 'client_communication' | 'time_tracking' | 'other';
+export type HowHeardAbout = 'google_search' | 'twitter' | 'linkedin' | 'friend_colleague' | 'blog_article' | 'other';
+
+export interface IAccountSetupSurveyData {
+  organization_type?: OrganizationType;
+  user_role?: UserRole;
+  main_use_cases?: UseCase[];
+  previous_tools?: string;
+  how_heard_about?: HowHeardAbout;
+}
\ No newline at end of file
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 000000000..e080df408
--- /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/auth/local-session.types.ts b/worklenz-frontend/src/types/auth/local-session.types.ts
index 8bd61a15f..5fe562308 100644
--- a/worklenz-frontend/src/types/auth/local-session.types.ts
+++ b/worklenz-frontend/src/types/auth/local-session.types.ts
@@ -28,4 +28,5 @@ export interface ILocalSession extends IUserType {
   subscription_status?: string;
   subscription_type?: string;
   trial_expire_date?: string;
+  valid_till_date?: string;
 }
diff --git a/worklenz-frontend/src/types/home/user-activity.types.ts b/worklenz-frontend/src/types/home/user-activity.types.ts
new file mode 100644
index 000000000..35fc382fc
--- /dev/null
+++ b/worklenz-frontend/src/types/home/user-activity.types.ts
@@ -0,0 +1,32 @@
+export interface IUserRecentTask {
+    task_id: string;
+    task_name: string;
+    project_id: string;
+    project_name: string;
+    last_activity_at: string;
+    activity_count: number;
+    project_color?: string;
+    task_status?: string;
+    status_color?: string;
+}
+
+export interface IUserTimeLoggedTask {
+    task_id: string;
+    task_name: string;
+    project_id: string;
+    project_name: string;
+    total_time_logged: number;
+    total_time_logged_string: string;
+    last_logged_at: string;
+    logged_by_timer: boolean;
+    project_color?: string;
+    task_status?: string;
+    status_color?: string;
+    log_entries_count?: number;
+    estimated_time?: number;
+}
+
+export enum ActivityFeedType {
+    RECENT_TASKS = 'recent-tasks',
+    TIME_LOGGED_TASKS = 'time-logged-tasks'
+}
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 000000000..a444942b1
--- /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/types/project-templates/project-templates.types.ts b/worklenz-frontend/src/types/project-templates/project-templates.types.ts
index ccdb9acb6..c877844d0 100644
--- a/worklenz-frontend/src/types/project-templates/project-templates.types.ts
+++ b/worklenz-frontend/src/types/project-templates/project-templates.types.ts
@@ -52,6 +52,13 @@ export interface IAccountSetupRequest {
   tasks: string[];
   team_members: string[];
   template_id?: string | null;
+  survey_data?: {
+    organization_type?: string;
+    user_role?: string;
+    main_use_cases?: string[];
+    previous_tools?: string;
+    how_heard_about?: string;
+  };
 }
 
 export interface IAccountSetupResponse {
diff --git a/worklenz-frontend/src/types/task-management.types.ts b/worklenz-frontend/src/types/task-management.types.ts
index d6942d0b0..cd944a506 100644
--- a/worklenz-frontend/src/types/task-management.types.ts
+++ b/worklenz-frontend/src/types/task-management.types.ts
@@ -114,6 +114,9 @@ export interface TaskManagementState {
   loadingColumns: boolean;
   columns: ITaskListColumn[];
   customColumns: ITaskListColumn[];
+  // Add sort-related state
+  sortField: string;
+  sortOrder: 'ASC' | 'DESC';
 }
 
 export interface TaskGroupsState {
diff --git a/worklenz-frontend/src/utils/dateUtils.ts b/worklenz-frontend/src/utils/dateUtils.ts
index 4acddc4d6..ad22c9114 100644
--- a/worklenz-frontend/src/utils/dateUtils.ts
+++ b/worklenz-frontend/src/utils/dateUtils.ts
@@ -1,32 +1,59 @@
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
+import localizedFormat from 'dayjs/plugin/localizedFormat';
+import 'dayjs/locale/de';
+import 'dayjs/locale/es';
+import 'dayjs/locale/pt';
+import 'dayjs/locale/zh-cn';
+import { getLanguageFromLocalStorage } from './language-utils';
 
-// Initialize the relativeTime plugin
+// Initialize plugins
 dayjs.extend(relativeTime);
+dayjs.extend(localizedFormat);
+
+// Map application languages to dayjs locales
+const getLocaleFromLanguage = (language: string): string => {
+  const localeMap: Record<string, string> = {
+    'en': 'en',
+    'de': 'de',
+    'es': 'es',
+    'pt': 'pt',
+    'alb': 'en', // Albanian not supported by dayjs, fallback to English
+    'zh': 'zh-cn'
+  };
+  return localeMap[language] || 'en';
+};
 
 /**
  * Formats a date to a relative time string (e.g., "2 hours ago", "a day ago")
- * This mimics the Angular fromNow pipe functionality
+ * This mimics the Angular fromNow pipe functionality with locale support
  *
  * @param date - The date to format (string, Date, or dayjs object)
+ * @param language - Optional language override (defaults to stored language)
  * @returns A string representing the relative time
  */
-export const fromNow = (date: string | Date | dayjs.Dayjs): string => {
+export const fromNow = (date: string | Date | dayjs.Dayjs, language?: string): string => {
   if (!date) return '';
-  return dayjs(date).fromNow();
+  const currentLanguage = language || getLanguageFromLocalStorage();
+  const locale = getLocaleFromLanguage(currentLanguage);
+  return dayjs(date).locale(locale).fromNow();
 };
 
 /**
- * Formats a date to a specific format
+ * Formats a date to a specific format with locale support
  *
  * @param date - The date to format (string, Date, or dayjs object)
  * @param format - The format string (default: 'YYYY-MM-DD')
+ * @param language - Optional language override (defaults to stored language)
  * @returns A formatted date string
  */
 export const formatDate = (
   date: string | Date | dayjs.Dayjs,
-  format: string = 'YYYY-MM-DD'
+  format: string = 'YYYY-MM-DD',
+  language?: string
 ): string => {
   if (!date) return '';
-  return dayjs(date).format(format);
+  const currentLanguage = language || getLanguageFromLocalStorage();
+  const locale = getLocaleFromLanguage(currentLanguage);
+  return dayjs(date).locale(locale).format(format);
 };
diff --git a/worklenz-frontend/src/utils/enhanced-performance-monitoring.ts b/worklenz-frontend/src/utils/enhanced-performance-monitoring.ts
index 9e50424e1..c30d189fd 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/format-date-time-with-user-timezone.ts b/worklenz-frontend/src/utils/format-date-time-with-user-timezone.ts
new file mode 100644
index 000000000..876dbf94a
--- /dev/null
+++ b/worklenz-frontend/src/utils/format-date-time-with-user-timezone.ts
@@ -0,0 +1,94 @@
+import { format } from 'date-fns';
+import { enUS, es, pt } from 'date-fns/locale';
+import { getLanguageFromLocalStorage } from './language-utils';
+
+/**
+ * Formats a date/time string using the user's profile timezone
+ * This ensures consistency between time logs display and reporting filters
+ * 
+ * @param dateString - The date string to format (typically in UTC)
+ * @param userTimezone - The user's timezone from their profile (e.g., 'America/New_York')
+ * @returns Formatted date string in user's timezone
+ */
+export const formatDateTimeWithUserTimezone = (
+  dateString: string,
+  userTimezone?: string | null
+): string => {
+  if (!dateString) return '';
+
+  try {
+    const date = new Date(dateString);
+    
+    // If timezone is provided, use it for formatting
+    if (userTimezone && userTimezone !== 'UTC') {
+      // Use the browser's toLocaleString with timezone option
+      const options: Intl.DateTimeFormatOptions = {
+        timeZone: userTimezone,
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+        hour: 'numeric',
+        minute: '2-digit',
+        second: '2-digit',
+        hour12: true
+      };
+      
+      // Get the appropriate locale
+      const localeString = getLanguageFromLocalStorage();
+      const localeMap = {
+        'en': 'en-US',
+        'es': 'es-ES',
+        'pt': 'pt-PT'
+      };
+      const locale = localeMap[localeString as keyof typeof localeMap] || 'en-US';
+      
+      return date.toLocaleString(locale, options);
+    }
+    
+    // Fallback to date-fns formatting for UTC or when no timezone
+    const localeString = getLanguageFromLocalStorage();
+    const locale = localeString === 'en' ? enUS : localeString === 'es' ? es : pt;
+    return format(date, 'MMM d, yyyy, h:mm:ss a', { locale });
+  } catch (error) {
+    console.error('Error formatting date with user timezone:', error);
+    // Fallback to original date string if formatting fails
+    return dateString;
+  }
+};
+
+/**
+ * Checks if a date is "yesterday" in the user's timezone
+ * This is used to ensure consistency with reporting filters
+ * 
+ * @param dateString - The date string to check
+ * @param userTimezone - The user's timezone from their profile
+ * @returns true if the date is yesterday in user's timezone
+ */
+export const isYesterdayInUserTimezone = (dateString: string, userTimezone?: string | null): boolean => {
+  if (!dateString || !userTimezone) return false;
+
+  try {
+    const date = new Date(dateString);
+    
+    // Get current date in user's timezone
+    const nowInTimezone = new Date().toLocaleString('en-US', { timeZone: userTimezone });
+    const now = new Date(nowInTimezone);
+    
+    // Get yesterday in user's timezone
+    const yesterday = new Date(now);
+    yesterday.setDate(yesterday.getDate() - 1);
+    
+    // Convert the input date to user's timezone
+    const dateInTimezone = new Date(date.toLocaleString('en-US', { timeZone: userTimezone }));
+    
+    // Compare dates (ignoring time)
+    return (
+      dateInTimezone.getFullYear() === yesterday.getFullYear() &&
+      dateInTimezone.getMonth() === yesterday.getMonth() &&
+      dateInTimezone.getDate() === yesterday.getDate()
+    );
+  } catch (error) {
+    console.error('Error checking if date is yesterday:', error);
+    return false;
+  }
+};
\ No newline at end of file
diff --git a/worklenz-frontend/src/utils/gantt-performance.ts b/worklenz-frontend/src/utils/gantt-performance.ts
new file mode 100644
index 000000000..5116c1866
--- /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
diff --git a/worklenz-frontend/src/utils/serviceWorkerRegistration.ts b/worklenz-frontend/src/utils/serviceWorkerRegistration.ts
index 1f70f7855..e89f82307 100644
--- a/worklenz-frontend/src/utils/serviceWorkerRegistration.ts
+++ b/worklenz-frontend/src/utils/serviceWorkerRegistration.ts
@@ -198,6 +198,17 @@ export class ServiceWorkerManager {
     }
   }
 
+  // Check for updates
+  async checkForUpdates(): Promise<boolean> {
+    try {
+      const response = await this.sendMessage('CHECK_FOR_UPDATES');
+      return response.hasUpdates;
+    } catch (error) {
+      console.error('Failed to check for updates:', error);
+      return false;
+    }
+  }
+
   // Force update service worker
   async forceUpdate(): Promise<void> {
     if (!this.registration) return;
@@ -212,6 +223,27 @@ export class ServiceWorkerManager {
     }
   }
 
+  // Perform hard reload (clear cache and reload)
+  async hardReload(): Promise<void> {
+    try {
+      // Clear all caches first
+      await this.clearCache();
+      
+      // Force update the service worker
+      if (this.registration) {
+        await this.registration.update();
+        await this.sendMessage('SKIP_WAITING');
+      }
+      
+      // Perform hard reload by clearing browser cache
+      window.location.reload();
+    } catch (error) {
+      console.error('Failed to perform hard reload:', error);
+      // Fallback to regular reload
+      window.location.reload();
+    }
+  }
+
   // Check if app is running offline
   isOffline(): boolean {
     return !navigator.onLine;
@@ -268,6 +300,8 @@ export function useServiceWorker() {
     swManager,
     clearCache: () => swManager?.clearCache(),
     forceUpdate: () => swManager?.forceUpdate(),
+    hardReload: () => swManager?.hardReload(),
+    checkForUpdates: () => swManager?.checkForUpdates(),
     getVersion: () => swManager?.getVersion(),
   };
 } 
\ No newline at end of file
diff --git a/worklenz-frontend/vitest.config.ts b/worklenz-frontend/vitest.config.ts
new file mode 100644
index 000000000..43e4e0a39
--- /dev/null
+++ b/worklenz-frontend/vitest.config.ts
@@ -0,0 +1,38 @@
+/// <reference types="vitest" />
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: ['./src/test/setup.ts'],
+    css: true,
+    reporters: ['verbose'],
+    coverage: {
+      reporter: ['text', 'json', 'html'],
+      exclude: [
+        'node_modules/',
+        'src/test/',
+      ],
+    },
+  },
+  resolve: {
+    alias: [
+      { find: '@', replacement: path.resolve(__dirname, './src') },
+      { find: '@components', replacement: path.resolve(__dirname, './src/components') },
+      { find: '@features', replacement: path.resolve(__dirname, './src/features') },
+      { find: '@assets', replacement: path.resolve(__dirname, './src/assets') },
+      { find: '@utils', replacement: path.resolve(__dirname, './src/utils') },
+      { find: '@hooks', replacement: path.resolve(__dirname, './src/hooks') },
+      { find: '@pages', replacement: path.resolve(__dirname, './src/pages') },
+      { find: '@api', replacement: path.resolve(__dirname, './src/api') },
+      { find: '@types', replacement: path.resolve(__dirname, './src/types') },
+      { find: '@shared', replacement: path.resolve(__dirname, './src/shared') },
+      { find: '@layouts', replacement: path.resolve(__dirname, './src/layouts') },
+      { find: '@services', replacement: path.resolve(__dirname, './src/services') },
+    ],
+  },
+});
\ No newline at end of file