diff --git a/apps/extensions/components/popup/Timer.tsx b/apps/extensions/components/popup/Timer.tsx
index 57341bed9..bd6c08c1e 100644
--- a/apps/extensions/components/popup/Timer.tsx
+++ b/apps/extensions/components/popup/Timer.tsx
@@ -25,7 +25,7 @@ const Timer: React.FC<Props> = ({ port }) => {
 								? new Date(msg.payload.timer * 1000).toISOString().substr(11, 8)
 								: '00:00:00';
 						const totalWorkedTime =
-							msg.payload.totalWorked > 0
+							msg.payload!.totalWorked > 0
 								? new Date(msg.payload.totalWorked * 1000).toISOString().substr(11, 8)
 								: '00:00:00';
 						setTimeString(taskWorkedTime);
diff --git a/apps/web/app/[locale]/auth/passcode/component.tsx b/apps/web/app/[locale]/auth/passcode/component.tsx
index 05e51941a..87676b98d 100644
--- a/apps/web/app/[locale]/auth/passcode/component.tsx
+++ b/apps/web/app/[locale]/auth/passcode/component.tsx
@@ -335,7 +335,7 @@ function WorkSpaceScreen({ form, className }: { form: TAuthenticationPasscode }
 		if (form.workspaces.length === 1 && currentTeams?.length === 1) {
 			setSelectedTeam(currentTeams[0].team_id);
 		} else {
-			const lastSelectedTeam = window.localStorage.getItem(LAST_WORSPACE_AND_TEAM) || currentTeams[0].team_id;
+			const lastSelectedTeam = window.localStorage.getItem(LAST_WORSPACE_AND_TEAM) || currentTeams[0]?.team_id;
 			const lastSelectedWorkspace =
 				form.workspaces.findIndex((workspace) =>
 					workspace.current_teams.find((team) => team.team_id === lastSelectedTeam)
diff --git a/apps/web/app/[locale]/profile/[memberId]/page.tsx b/apps/web/app/[locale]/profile/[memberId]/page.tsx
index 3e3dd3ebf..c44a3d619 100644
--- a/apps/web/app/[locale]/profile/[memberId]/page.tsx
+++ b/apps/web/app/[locale]/profile/[memberId]/page.tsx
@@ -13,7 +13,7 @@ import { TaskFilter, Timer, TimerStatus, UserProfileTask, getTimerStatusValue, u
 import { MainHeader, MainLayout } from 'lib/layout';
 import Link from 'next/link';
 import React, { useCallback, useMemo, useState } from 'react';
-import { useTranslations } from 'next-intl';
+import { useTranslations } from 'next-intl'
 import stc from 'string-to-color';
 
 import { useRecoilValue, useSetRecoilState } from 'recoil';
@@ -126,7 +126,6 @@ const Profile = React.memo(function ProfilePage({ params }: { params: { memberId
 								{/* User Profile Detail */}
 								<div className="flex flex-col items-center justify-between py-5 md:py-10 md:flex-row">
 									<UserProfileDetail member={profile.member} />
-
 									{profileIsAuthUser && isTrackingEnabled && (
 										<Timer
 											className={clsxm(
@@ -142,9 +141,6 @@ const Profile = React.memo(function ProfilePage({ params }: { params: { memberId
 							</MainHeader>
 						</ResizablePanel>
 						<ResizableHandle withHandle />
-
-						{/* Divider */}
-						{/* <div className="h-0.5 bg-[#FFFFFF14]"></div> */}
 						<ResizablePanel defaultSize={53} maxSize={95} className="!overflow-y-scroll custom-scrollbar">
 							{hook.tab == 'worked' && canSeeActivity && (
 								<Container fullWidth={fullWidth} className="py-8">
diff --git a/apps/web/app/api/daily-plan/[id]/remove/route.ts b/apps/web/app/api/daily-plan/[id]/remove/route.ts
new file mode 100644
index 000000000..9d6078491
--- /dev/null
+++ b/apps/web/app/api/daily-plan/[id]/remove/route.ts
@@ -0,0 +1,23 @@
+import { INextParams, IRemoveTaskFromManyPlans } from "@app/interfaces";
+import { authenticatedGuard } from "@app/services/server/guards/authenticated-guard-app";
+import { deleteDailyPlansManyRequest } from "@app/services/server/requests";
+import { NextResponse } from "next/server";
+
+export async function PUT(req: Request, { params }: INextParams) {
+    const res = new NextResponse();
+    const { id } = params;
+    if (!id) {
+        return;
+    }
+    const { $res, user, access_token } = await authenticatedGuard(req, res);
+
+    if (!user) return $res('Unauthorized');
+
+    const body = (await req.json()) as unknown as IRemoveTaskFromManyPlans;
+    const response = await deleteDailyPlansManyRequest({
+        data: body,
+        taskId: id,
+        bearer_token: access_token,
+    });
+    return $res(response.data);
+}
diff --git a/apps/web/app/api/daily-plan/[id]/route.ts b/apps/web/app/api/daily-plan/[id]/route.ts
index e5cb724e2..121c01bae 100644
--- a/apps/web/app/api/daily-plan/[id]/route.ts
+++ b/apps/web/app/api/daily-plan/[id]/route.ts
@@ -29,7 +29,6 @@ export async function PUT(req: Request, { params }: INextParams) {
 	if (!id) {
 		return;
 	}
-
 	const { $res, user, access_token, tenantId } = await authenticatedGuard(req, res);
 
 	if (!user) return $res('Unauthorized');
diff --git a/apps/web/app/constants.ts b/apps/web/app/constants.ts
index cb2e49e5f..f6a52203e 100644
--- a/apps/web/app/constants.ts
+++ b/apps/web/app/constants.ts
@@ -266,6 +266,7 @@ export const languagesFlags = [
 // Local storage keys
 export const LAST_WORSPACE_AND_TEAM = 'last-workspace-and-team';
 export const USER_SAW_OUTSTANDING_NOTIFICATION = 'user-saw-notif';
+export const TODAY_PLAN_ALERT_SHOWN_DATE = 'last-today-plan-alert-date';
 
 // OAuth providers keys
 
diff --git a/apps/web/app/helpers/date.ts b/apps/web/app/helpers/date.ts
index ace5da630..5aa529fd2 100644
--- a/apps/web/app/helpers/date.ts
+++ b/apps/web/app/helpers/date.ts
@@ -150,3 +150,16 @@ export const formatIntegerToHour = (number: number) => {
 
 	return formattedHour;
 };
+
+
+export const isTestDateRange = (itemDate: Date, from?: Date, to?: Date) => {
+	if (from && to) {
+		return itemDate >= from && itemDate <= to;
+	} else if (from) {
+		return itemDate >= from;
+	} else if (to) {
+		return itemDate <= to;
+	} else {
+		return true; // or false, depending on your default logic
+	}
+}
diff --git a/apps/web/app/helpers/drag-and-drop.ts b/apps/web/app/helpers/drag-and-drop.ts
new file mode 100644
index 000000000..c1d3af554
--- /dev/null
+++ b/apps/web/app/helpers/drag-and-drop.ts
@@ -0,0 +1,48 @@
+import { IDailyPlan, ITeamTask } from "@app/interfaces";
+import { DropResult } from "react-beautiful-dnd";
+
+export const handleDragAndDrop = (results: DropResult, plans: IDailyPlan[], setPlans: React.Dispatch<React.SetStateAction<IDailyPlan[]>>) => {
+    const { source, destination } = results;
+
+    if (!destination || (source.droppableId === destination.droppableId && source.index === destination.index)) return;
+
+    const newPlans = [...plans];
+
+    const planSourceIndex = newPlans.findIndex(plan => plan.id === source.droppableId);
+    const planDestinationIndex = newPlans.findIndex(plan => plan.id === destination.droppableId);
+
+    const newSourceTasks = [...newPlans[planSourceIndex].tasks!];
+    const newDestinationTasks = source.droppableId !== destination.droppableId
+        ? [...newPlans[planDestinationIndex].tasks!]
+        : newSourceTasks;
+
+    const [deletedTask] = newSourceTasks.splice(source.index, 1);
+    newDestinationTasks.splice(destination.index, 0, deletedTask);
+
+    newPlans[planSourceIndex] = {
+        ...newPlans[planSourceIndex],
+        tasks: newSourceTasks,
+    };
+    newPlans[planDestinationIndex] = {
+        ...newPlans[planDestinationIndex],
+        tasks: newDestinationTasks,
+    };
+    setPlans(newPlans);
+};
+
+
+export const handleDragAndDropDailyOutstandingAll = (
+    results: DropResult,
+    tasks: ITeamTask[],
+    setTasks: React.Dispatch<React.SetStateAction<ITeamTask[]>>
+) => {
+    const { source, destination } = results;
+
+    if (!destination || (source.droppableId === destination.droppableId && source.index === destination.index)) return;
+
+    const newTasks = [...tasks];
+    const [movedTask] = newTasks.splice(source.index, 1);
+    newTasks.splice(destination.index, 0, movedTask);
+
+    setTasks(newTasks);
+};
diff --git a/apps/web/app/helpers/index.ts b/apps/web/app/helpers/index.ts
index 5ec7a1bb8..de35a0e57 100644
--- a/apps/web/app/helpers/index.ts
+++ b/apps/web/app/helpers/index.ts
@@ -9,3 +9,4 @@ export * from './validations';
 export * from './colors';
 export * from './strings';
 export * from './plan-day-badge';
+export * from './drag-and-drop'
diff --git a/apps/web/app/helpers/plan-day-badge.ts b/apps/web/app/helpers/plan-day-badge.ts
index e5d9322da..70c1f92ed 100644
--- a/apps/web/app/helpers/plan-day-badge.ts
+++ b/apps/web/app/helpers/plan-day-badge.ts
@@ -1,7 +1,11 @@
 import { IDailyPlan, ITeamTask } from '@app/interfaces';
 import { formatDayPlanDate } from './date';
 
-export const planBadgeContent = (plans: IDailyPlan[], taskId: ITeamTask['id']): string | null => {
+export const planBadgeContent = (
+	plans: IDailyPlan[],
+	taskId: ITeamTask['id'],
+	tab?: 'default' | 'unassign' | 'dailyplan'
+): string | null => {
 	// Search a plan that contains a given task
 	const plan = plans.find((plan) => plan.tasks?.some((task) => task.id === taskId));
 
@@ -12,8 +16,8 @@ export const planBadgeContent = (plans: IDailyPlan[], taskId: ITeamTask['id']):
 			(pl) => pl.id !== plan.id && pl.tasks?.some((tsk) => tsk.id === taskId)
 		);
 
-		// If the task exists in other plans, the its planned many days
-		if (otherPlansWithTask.length > 0) {
+		// If the task exists in other plans, then its planned many days
+		if (otherPlansWithTask.length > 0 || tab === 'unassign') {
 			return 'Planned';
 		} else {
 			return `${formatDayPlanDate(plan.date, 'DD MMM YYYY')}`;
diff --git a/apps/web/app/hooks/features/useDailyPlan.ts b/apps/web/app/hooks/features/useDailyPlan.ts
index d60318923..972aba380 100644
--- a/apps/web/app/hooks/features/useDailyPlan.ts
+++ b/apps/web/app/hooks/features/useDailyPlan.ts
@@ -1,16 +1,16 @@
 'use client';
 
-import { useRecoilState } from 'recoil';
-import { useCallback, useEffect } from 'react';
+import { useRecoilState, useRecoilValue } from 'recoil';
+import { useCallback, useEffect, useState } from 'react';
 import { useQuery } from '../useQuery';
 import {
+	activeTeamState,
 	dailyPlanFetchingState,
 	dailyPlanListState,
 	employeePlansListState,
 	myDailyPlanListState,
 	profileDailyPlanListState,
-	taskPlans,
-	userState
+	taskPlans
 } from '@app/stores';
 import {
 	addTaskToPlanAPI,
@@ -20,14 +20,28 @@ import {
 	getDayPlansByEmployeeAPI,
 	getMyDailyPlansAPI,
 	getPlansByTaskAPI,
+	removeManyTaskFromPlansAPI,
 	removeTaskFromPlanAPI,
 	updateDailyPlanAPI
 } from '@app/services/client/api';
-import { ICreateDailyPlan, IDailyPlanTasksUpdate, IUpdateDailyPlan } from '@app/interfaces';
+import { ICreateDailyPlan, IDailyPlanTasksUpdate, IRemoveTaskFromManyPlans, IUpdateDailyPlan } from '@app/interfaces';
 import { useFirstLoad } from '../useFirstLoad';
+import { useAuthenticateUser } from './useAuthenticateUser';
+import { TODAY_PLAN_ALERT_SHOWN_DATE } from '@app/constants';
+
+type TodayPlanNotificationParams = {
+	canBeSeen: boolean;
+	alreadySeen: boolean;
+};
 
 export function useDailyPlan() {
-	const [user] = useRecoilState(userState);
+	const [addTodayPlanTrigger, setAddTodayPlanTrigger] = useState<TodayPlanNotificationParams>({
+		canBeSeen: false,
+		alreadySeen: false
+	});
+
+	const { user } = useAuthenticateUser();
+	const activeTeam = useRecoilValue(activeTeamState);
 
 	const { loading, queryCall } = useQuery(getDayPlansByEmployeeAPI);
 	const { loading: getAllDayPlansLoading, queryCall: getAllQueryCall } = useQuery(getAllDayPlansAPI);
@@ -38,6 +52,8 @@ export function useDailyPlan() {
 	const { loading: addTaskToPlanLoading, queryCall: addTaskToPlanQueryCall } = useQuery(addTaskToPlanAPI);
 	const { loading: removeTaskFromPlanLoading, queryCall: removeTAskFromPlanQueryCall } =
 		useQuery(removeTaskFromPlanAPI);
+	const { loading: removeManyTaskFromPlanLoading, queryCall: removeManyTaskPlanQueryCall } = useQuery(removeManyTaskFromPlansAPI);
+
 	const { loading: deleteDailyPlanLoading, queryCall: deleteDailyPlanQueryCall } = useQuery(deleteDailyPlanAPI);
 
 	const [dailyPlan, setDailyPlan] = useRecoilState(dailyPlanListState);
@@ -148,6 +164,7 @@ export function useDailyPlan() {
 		]
 	);
 
+
 	const removeTaskFromPlan = useCallback(
 		async (data: IDailyPlanTasksUpdate, planId: string) => {
 			const res = await removeTAskFromPlanQueryCall(data, planId);
@@ -168,6 +185,42 @@ export function useDailyPlan() {
 		]
 	);
 
+	const removeManyTaskPlans = useCallback(
+		async (data: IRemoveTaskFromManyPlans, taskId: string) => {
+			const res = await removeManyTaskPlanQueryCall({ taskId, data });
+			const updatedProfileDailyPlans = profileDailyPlans.items
+				.map((plan) => {
+					const updatedTasks = plan.tasks ? plan.tasks.filter((task) => task.id !== taskId) : [];
+					return { ...plan, tasks: updatedTasks };
+				})
+				.filter((plan) => plan.tasks && plan.tasks.length > 0);
+			// Delete plans without tasks
+			const updatedEmployeePlans = employeePlans
+				.map((plan) => {
+					const updatedTasks = plan.tasks ? plan.tasks.filter((task) => task.id !== taskId) : [];
+					return { ...plan, tasks: updatedTasks };
+				})
+				.filter((plan) => plan.tasks && plan.tasks.length > 0);
+
+			setProfileDailyPlans({
+				total: profileDailyPlans.total,
+				items: updatedProfileDailyPlans
+			});
+			setEmployeePlans(updatedEmployeePlans);
+			getMyDailyPlans();
+			return res;
+
+		},
+		[
+			removeManyTaskPlanQueryCall,
+			employeePlans,
+			getMyDailyPlans,
+			profileDailyPlans,
+			setEmployeePlans,
+			setProfileDailyPlans
+		]
+	)
+
 	const deleteDailyPlan = useCallback(
 		async (planId: string) => {
 			const res = await deleteDailyPlanQueryCall(planId);
@@ -241,10 +294,34 @@ export function useDailyPlan() {
 		profileDailyPlans.items &&
 		[...profileDailyPlans.items].sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime());
 
+	const currentUser = activeTeam?.members?.find((member) => member.employee.userId === user?.id);
+
 	useEffect(() => {
 		getMyDailyPlans();
 	}, [getMyDailyPlans]);
 
+	useEffect(() => {
+		const checkAndShowAlert = () => {
+			if (activeTeam && currentUser) {
+				const lastAlertDate = localStorage.getItem(TODAY_PLAN_ALERT_SHOWN_DATE);
+				const today = new Date().toISOString().split('T')[0];
+				const totalMemberWorked = currentUser?.totalTodayTasks.reduce(
+					(previousValue, currentValue) => previousValue + currentValue.duration,
+					0
+				);
+				const showTodayPlanTrigger = todayPlan && todayPlan.length > 0 && totalMemberWorked > 0;
+				if (lastAlertDate === today) {
+					setAddTodayPlanTrigger({ canBeSeen: !!showTodayPlanTrigger, alreadySeen: true });
+				}
+			}
+		};
+
+		checkAndShowAlert();
+		const intervalId = setInterval(checkAndShowAlert, 24 * 60 * 60 * 1000); // One day check and display
+
+		return () => clearInterval(intervalId);
+	}, [activeTeam, currentUser, todayPlan]);
+
 	return {
 		dailyPlan,
 		setDailyPlan,
@@ -285,6 +362,9 @@ export function useDailyPlan() {
 		removeTaskFromPlan,
 		removeTaskFromPlanLoading,
 
+		removeManyTaskPlans,
+		removeManyTaskFromPlanLoading,
+
 		deleteDailyPlan,
 		deleteDailyPlanLoading,
 
@@ -292,6 +372,9 @@ export function useDailyPlan() {
 		pastPlans,
 		outstandingPlans,
 		todayPlan,
-		sortedPlans
+		sortedPlans,
+
+		addTodayPlanTrigger,
+		setAddTodayPlanTrigger
 	};
 }
diff --git a/apps/web/app/hooks/features/useTimer.ts b/apps/web/app/hooks/features/useTimer.ts
index 432a452c1..6f1b28515 100644
--- a/apps/web/app/hooks/features/useTimer.ts
+++ b/apps/web/app/hooks/features/useTimer.ts
@@ -193,6 +193,11 @@ export function useTimer() {
 			plan.tasks?.length > 0
 	);
 
+	const tomorrow = moment().add(1, 'days');
+	const hasPlanForTomorrow = myDailyPlans.items.find(
+		(plan) => moment(plan.date).format('YYYY-MM-DD') === tomorrow.format('YYYY-MM-DD')
+	);
+
 	// Team setting that tells if each member must have a today plan for allowing tracking time
 	const requirePlan = activeTeam?.requirePlanToTrack;
 
@@ -205,11 +210,8 @@ export function useTimer() {
 
 	// If require plan setting is activated,
 	// check if the today plan has working time planned and all the tasks into the plan are estimated
-	let isPlanVerified = true;
-	if (requirePlan) {
-		isPlanVerified =
-			!!hasPlan?.workTimePlanned && !!hasPlan?.tasks?.every((task) => task.estimate && task.estimate > 0);
-	}
+	const isPlanVerified =
+		!!hasPlan?.workTimePlanned && !!hasPlan?.tasks?.every((task) => task.estimate && task.estimate > 0);
 
 	const canRunTimer =
 		user?.isEmailVerified &&
@@ -423,6 +425,7 @@ export function useTimer() {
 		startTimer,
 		stopTimer,
 		hasPlan,
+		hasPlanForTomorrow,
 		canRunTimer,
 		canTrack,
 		isPlanVerified,
@@ -463,6 +466,7 @@ export function useTimerView() {
 		startTimer,
 		stopTimer,
 		hasPlan,
+		hasPlanForTomorrow,
 		canRunTimer,
 		canTrack,
 		isPlanVerified,
@@ -494,6 +498,7 @@ export function useTimerView() {
 		timerStatus,
 		activeTeamTask,
 		hasPlan,
+		hasPlanForTomorrow,
 		disabled: !canRunTimer,
 		canTrack,
 		isPlanVerified,
diff --git a/apps/web/app/hooks/useDateRange.ts b/apps/web/app/hooks/useDateRange.ts
new file mode 100644
index 000000000..38e3cec61
--- /dev/null
+++ b/apps/web/app/hooks/useDateRange.ts
@@ -0,0 +1,17 @@
+import { dateRangeAllPlanState, dateRangeFuturePlanState, dateRangePastPlanState } from "@app/stores";
+import { useRecoilState } from "recoil";
+
+export const useDateRange = (tab: string | any) => {
+    const [dateFuture, setDateFuture] = useRecoilState(dateRangeFuturePlanState);
+    const [dateAllPlan, setDateAllPlan] = useRecoilState(dateRangeAllPlanState);
+    const [datePastPlan, setDatePastPlan] = useRecoilState(dateRangePastPlanState);
+    switch (tab) {
+        case 'Future Tasks':
+            return { date: dateFuture, setDate: setDateFuture };
+        case 'Past Tasks':
+            return { date: datePastPlan, setDate: setDatePastPlan };
+        case 'All Tasks':
+        default:
+            return { date: dateAllPlan, setDate: setDateAllPlan };
+    }
+}
diff --git a/apps/web/app/hooks/useFilterDateRange.ts b/apps/web/app/hooks/useFilterDateRange.ts
new file mode 100644
index 000000000..869d201bf
--- /dev/null
+++ b/apps/web/app/hooks/useFilterDateRange.ts
@@ -0,0 +1,74 @@
+'use client';
+
+import { IDailyPlan } from '@app/interfaces'
+import { dateRangeAllPlanState, dateRangeFuturePlanState, dateRangePastPlanState, filteredAllPlanDataState, filteredFuturePlanDataState, filteredPastPlanDataState, originalAllPlanState, originalFuturePlanState, originalPastPlanDataState } from '@app/stores';
+import { useEffect, useMemo } from 'react';
+import { useRecoilState, useRecoilValue } from 'recoil';
+/**
+ *custom filter the data with date range
+ *
+ * @export
+ * @param {IDailyPlan[]} itemsDailyPlan
+ * @param {('future' | 'past' | 'all')} [typeItems]
+ * @return {*}
+ */
+export function useFilterDateRange(itemsDailyPlan: IDailyPlan[], typeItems?: 'future' | 'past' | 'all') {
+
+    const [dateAllPlan, setDateAllPlan] = useRecoilState(dateRangeAllPlanState);
+    const [datePastPlan, setDatePastPlan] = useRecoilState(dateRangePastPlanState);
+    const [dateFuture, setDateFuture] = useRecoilState(dateRangeFuturePlanState);
+
+    const [originalAllPlanData, setOriginalAllPlanState] = useRecoilState(originalAllPlanState);
+    const [originalPastPlanData, setOriginalPastPlanData] = useRecoilState(originalPastPlanDataState);
+    const [originalFuturePlanData, setOriginalFuturePlanData] = useRecoilState(originalFuturePlanState);
+
+    const filteredAllPlanData = useRecoilValue(filteredAllPlanDataState);
+    const filteredPastPlanData = useRecoilValue(filteredPastPlanDataState);
+    const filteredFuturePlanData = useRecoilValue(filteredFuturePlanDataState);
+
+    // useEffect(() => {
+    //     if (!itemsDailyPlan) return;
+
+    //     if (typeItems === 'future') {
+    //         setOriginalFuturePlanData(itemsDailyPlan);
+    //     } else if (typeItems === 'past') {
+    //         setOriginalPastPlanData(itemsDailyPlan);
+    //     } else if (typeItems === 'all') {
+    //         setOriginalAllPlanState(itemsDailyPlan);
+    //     }
+    // }, [itemsDailyPlan, dateFuture, datePastPlan, dateAllPlan, typeItems, setOriginalAllPlanState, setOriginalFuturePlanData, setOriginalAllPlanState]);
+
+    const updateOriginalPlanData = useMemo(() => (data: IDailyPlan[]) => {
+        switch (typeItems) {
+            case 'future':
+                setOriginalFuturePlanData(data);
+                break;
+            case 'past':
+                setOriginalPastPlanData(data);
+                break;
+            case 'all':
+                setOriginalAllPlanState(data);
+                break;
+            default:
+                break;
+        }
+    }, [typeItems, setOriginalAllPlanState, setOriginalFuturePlanData, setOriginalPastPlanData]);
+
+    useEffect(() => {
+        if (!itemsDailyPlan) return;
+        updateOriginalPlanData(itemsDailyPlan);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [updateOriginalPlanData, dateAllPlan, datePastPlan, dateFuture]);
+
+    return {
+        filteredAllPlanData,
+        filteredPastPlanData,
+        filteredFuturePlanData,
+        originalAllPlanData,
+        originalFuturePlanData,
+        originalPastPlanData,
+        setDateAllPlan,
+        setDateFuture,
+        setDatePastPlan,
+    }
+}
diff --git a/apps/web/app/interfaces/IDailyPlan.ts b/apps/web/app/interfaces/IDailyPlan.ts
index e5003ef02..5d91cd89a 100644
--- a/apps/web/app/interfaces/IDailyPlan.ts
+++ b/apps/web/app/interfaces/IDailyPlan.ts
@@ -1,5 +1,6 @@
 import { IBasePerTenantAndOrganizationEntity } from './IBaseModel';
-import { IRelationnalEmployee } from './IEmployee';
+import { IEmployee, IRelationnalEmployee } from './IEmployee';
+import { IOrganization } from './IOrganization';
 import { ITeamTask } from './ITask';
 
 export interface IDailyPlanBase extends IBasePerTenantAndOrganizationEntity {
@@ -8,6 +9,12 @@ export interface IDailyPlanBase extends IBasePerTenantAndOrganizationEntity {
 	status: DailyPlanStatusEnum;
 }
 
+export interface IRemoveTaskFromManyPlans {
+	employeeId?: IEmployee['id'];
+	plansIds?: IDailyPlan['id'][];
+	organizationId?: IOrganization['id'];
+}
+
 export interface IDailyPlan extends IDailyPlanBase, IRelationnalEmployee {
 	tasks?: ITeamTask[];
 }
diff --git a/apps/web/app/services/client/api/auth/invite-accept.ts b/apps/web/app/services/client/api/auth/invite-accept.ts
index bee527471..75b3be2c7 100644
--- a/apps/web/app/services/client/api/auth/invite-accept.ts
+++ b/apps/web/app/services/client/api/auth/invite-accept.ts
@@ -205,13 +205,24 @@ export function signInWorkspaceAPI(email: string, token: string) {
  * @returns
  */
 export async function signInEmailConfirmGauzy(email: string, code: string) {
-	const loginResponse = await signInEmailCodeConfirmGauzy(email, code);
+	let loginResponse;
+
+	try {
+		loginResponse = await signInEmailCodeConfirmGauzy(email, code);
+	} catch (error) {
+		console.error('Error in signInEmailCodeConfirmation:', error);
+	}
 
 	if (loginResponse) {
 		return loginResponse;
 	}
 
-	return signInEmailConfirmAPI({ email, code });
+	try {
+		const signinResponse = await signInEmailConfirmAPI({ email, code });
+		return signinResponse;
+	} catch (error) {
+		return Promise.reject(error);
+	}
 }
 
 /**
@@ -219,7 +230,12 @@ export async function signInEmailConfirmGauzy(email: string, code: string) {
  */
 export async function signInWorkspaceGauzy(params: { email: string; token: string; teamId: string; code?: string }) {
 	if (params.code) {
-		const loginResponse = await signInEmailCodeConfirmGauzy(params.email, params.code);
+		let loginResponse;
+		try {
+			loginResponse = await signInEmailCodeConfirmGauzy(params.email, params.code);
+		} catch (error) {
+			console.error('Error in signInWorkspaces', error);
+		}
 
 		if (loginResponse) {
 			return loginResponse;
diff --git a/apps/web/app/services/client/api/daily-plan.ts b/apps/web/app/services/client/api/daily-plan.ts
index a99f1596e..7ae9886d7 100644
--- a/apps/web/app/services/client/api/daily-plan.ts
+++ b/apps/web/app/services/client/api/daily-plan.ts
@@ -5,6 +5,7 @@ import {
 	ICreateDailyPlan,
 	IDailyPlan,
 	IDailyPlanTasksUpdate,
+	IRemoveTaskFromManyPlans,
 	IUpdateDailyPlan,
 	PaginationResponse
 } from '@app/interfaces';
@@ -14,7 +15,7 @@ export function getAllDayPlansAPI() {
 	const organizationId = getOrganizationIdCookie();
 	const tenantId = getTenantIdCookie();
 
-	const relations = ['employee', 'tasks', 'employee.user'];
+	const relations = ['employee', 'tasks', 'employee.user', 'tasks.members', 'tasks.members.user'];
 
 	const obj = {
 		'where[organizationId]': organizationId,
@@ -33,7 +34,7 @@ export function getMyDailyPlansAPI() {
 	const organizationId = getOrganizationIdCookie();
 	const tenantId = getTenantIdCookie();
 
-	const relations = ['employee', 'tasks'];
+	const relations = ['employee', 'tasks', 'employee.user', 'tasks.members', 'tasks.members.user'];
 
 	const obj = {
 		'where[organizationId]': organizationId,
@@ -52,7 +53,7 @@ export function getDayPlansByEmployeeAPI(employeeId?: string) {
 	const organizationId = getOrganizationIdCookie();
 	const tenantId = getTenantIdCookie();
 
-	const relations = ['employee', 'tasks'];
+	const relations = ['employee', 'tasks', 'employee.user', 'tasks.members', 'tasks.members.user'];
 
 	const obj = {
 		'where[organizationId]': organizationId,
@@ -105,6 +106,11 @@ export function removeTaskFromPlanAPI(data: IDailyPlanTasksUpdate, planId: strin
 	return put<IDailyPlan>(`/daily-plan/${planId}/task`, { ...data, organizationId }, { tenantId });
 }
 
+export function removeManyTaskFromPlansAPI({ taskId, data }: { taskId: string, data: IRemoveTaskFromManyPlans }) {
+	const organizationId = getOrganizationIdCookie();
+	return put<IDailyPlan[]>(`/daily-plan/${taskId}/remove`, { ...data, organizationId })
+}
+
 export function deleteDailyPlanAPI(planId: string) {
 	return deleteApi<DeleteResponse>(`/daily-plan/${planId}`);
 }
diff --git a/apps/web/app/services/server/requests/daily-plan.ts b/apps/web/app/services/server/requests/daily-plan.ts
index 11f451d4a..cfe4655c7 100644
--- a/apps/web/app/services/server/requests/daily-plan.ts
+++ b/apps/web/app/services/server/requests/daily-plan.ts
@@ -1,5 +1,5 @@
 import qs from 'qs';
-import { ICreateDailyPlan, IDailyPlan, IDailyPlanTasksUpdate, IUpdateDailyPlan } from '@app/interfaces/IDailyPlan';
+import { ICreateDailyPlan, IDailyPlan, IDailyPlanTasksUpdate, IRemoveTaskFromManyPlans, IUpdateDailyPlan } from '@app/interfaces/IDailyPlan';
 import { serverFetch } from '../fetch';
 import { DeleteResponse } from '@app/interfaces';
 
@@ -7,7 +7,7 @@ export function getAllDayPlans({
 	organizationId,
 	tenantId,
 	bearer_token,
-	relations = ['employee', 'tasks']
+	relations = ['employee', 'tasks', 'employee.user', 'tasks.members', 'tasks.members.user']
 }: {
 	organizationId: string;
 	tenantId: string;
@@ -36,7 +36,7 @@ export function getMyDailyPlansRequest({
 	organizationId,
 	tenantId,
 	bearer_token,
-	relations = ['employee', 'tasks']
+	relations = ['employee', 'tasks', 'employee.user', 'tasks.members', 'tasks.members.user']
 }: {
 	organizationId: string;
 	tenantId: string;
@@ -66,7 +66,7 @@ export function getDayPlansByEmployee({
 	organizationId,
 	tenantId,
 	bearer_token,
-	relations = ['employee', 'tasks']
+	relations = ['employee', 'tasks', 'employee.user', 'tasks.members', 'tasks.members.user']
 }: {
 	employeeId: string;
 	organizationId: string;
@@ -202,3 +202,12 @@ export function deleteDailyPlanRequest({ planId, bearer_token }: { planId: strin
 		bearer_token
 	});
 }
+
+export function deleteDailyPlansManyRequest({ bearer_token, taskId, data }: { bearer_token?: string, taskId: string, data: IRemoveTaskFromManyPlans }) {
+	return serverFetch<IDailyPlan[]>({
+		method: 'PUT',
+		path: `/daily-plan/${taskId}/remove`,
+		body: data,
+		bearer_token,
+	});
+}
diff --git a/apps/web/app/stores/daily-plan.ts b/apps/web/app/stores/daily-plan.ts
index ab4b53e8b..e28f6e1df 100644
--- a/apps/web/app/stores/daily-plan.ts
+++ b/apps/web/app/stores/daily-plan.ts
@@ -1,5 +1,12 @@
-import { atom, selector } from 'recoil';
+import { atom, RecoilState, selector } from 'recoil';
 import { IDailyPlan, PaginationResponse } from '@app/interfaces';
+import { addDays } from 'date-fns';
+import { DateRange } from 'react-day-picker';
+import { isTestDateRange } from '@app/helpers';
+
+const today = new Date();
+const oneWeekAgo = new Date();
+oneWeekAgo.setDate(today.getDate() - 7);
 
 export const dailyPlanListState = atom<PaginationResponse<IDailyPlan>>({
 	key: 'dailyPlanListState',
@@ -44,3 +51,63 @@ export const activeDailyPlanState = selector<IDailyPlan | null>({
 		return dailyPlans.items.find((plan) => plan.id === activeId) || dailyPlans.items[0] || null;
 	}
 });
+const createDailyPlanCountFilterAtom = (key: string | any) => atom<number>(
+	{
+		key,
+		default: 0
+	}
+)
+
+const createDailyPlanAtom = (key: string | any) => atom<IDailyPlan[]>({
+	key,
+	default: [],
+});
+
+const createDateRangeAtom = (key: string | any) => atom<DateRange | undefined>({
+	key,
+	default: {
+		from: oneWeekAgo,
+		to: addDays(today, 3),
+	},
+});
+
+const createFilteredDailyPlanDataSelector = (key: string | any, dateRangeState: RecoilState<DateRange | undefined>, originalDataState: RecoilState<IDailyPlan[]>) => selector({
+	key,
+	get: ({ get }) => {
+		const dateRange = get(dateRangeState);
+		const data = get(originalDataState);
+		if (!dateRange || !data.length) return data;
+		const { from, to } = dateRange;
+		return data.filter((plan) => {
+			const itemDate = new Date(plan.date);
+			return isTestDateRange(itemDate, from, to);
+		});
+	},
+});
+
+export const dataDailyPlanCountFilterState = createDailyPlanCountFilterAtom('dataDailyPlanCountFilterState');
+export const dateRangePastPlanState = createDateRangeAtom('dateRangePastPlanState');
+export const dateRangeFuturePlanState = createDateRangeAtom('dateRangeFuturePlanState');
+export const dateRangeAllPlanState = createDateRangeAtom('dateRangeAllPlanState');
+
+export const originalFuturePlanState = createDailyPlanAtom('originalFuturePlanState');
+export const originalAllPlanState = createDailyPlanAtom('originalAllPlanState');
+export const originalPastPlanDataState = createDailyPlanAtom('originalPastPlanDataState');
+
+export const filteredPastPlanDataState = createFilteredDailyPlanDataSelector(
+	'filteredPastPlanDataState',
+	dateRangePastPlanState,
+	originalPastPlanDataState
+);
+
+export const filteredFuturePlanDataState = createFilteredDailyPlanDataSelector(
+	'filteredFuturePlanDataState',
+	dateRangeFuturePlanState,
+	originalFuturePlanState
+);
+
+export const filteredAllPlanDataState = createFilteredDailyPlanDataSelector(
+	'filteredAllPlanDataState',
+	dateRangeAllPlanState,
+	originalAllPlanState
+);
diff --git a/apps/web/components/shared/timer/timer-card.tsx b/apps/web/components/shared/timer/timer-card.tsx
index 3511902db..10f2a9d08 100644
--- a/apps/web/components/shared/timer/timer-card.tsx
+++ b/apps/web/components/shared/timer/timer-card.tsx
@@ -60,6 +60,7 @@ const Timer = () => {
 				open={isOpen}
 				plan={hasPlan}
 				startTimer={startTimer}
+				hasPlan={!!hasPlan}
 			/>
 		</>
 	);
diff --git a/apps/web/lib/components/kanban-card.tsx b/apps/web/lib/components/kanban-card.tsx
index 98b38a2d9..e97005508 100644
--- a/apps/web/lib/components/kanban-card.tsx
+++ b/apps/web/lib/components/kanban-card.tsx
@@ -174,7 +174,13 @@ export default function Item(props: ItemProps) {
 			<div className="w-full justify-between h-fit">
 				<div className="w-full flex justify-between">
 					<span className="!w-64">
-						<TaskAllStatusTypes className="justify-start" task={item} showStatus={false} />
+						<TaskAllStatusTypes
+							className="justify-start"
+							task={item}
+							showStatus={false}
+							tab="default"
+							dayPlanTab="All Tasks"
+						/>
 					</span>
 					<span>
 						<MenuKanbanCard member={currentMember} item={props.item} />
diff --git a/apps/web/lib/components/modal.tsx b/apps/web/lib/components/modal.tsx
index 0742cb2e8..592e7bed1 100644
--- a/apps/web/lib/components/modal.tsx
+++ b/apps/web/lib/components/modal.tsx
@@ -52,9 +52,8 @@ export function Modal({
 						{description && <Dialog.Description>{description}</Dialog.Description>}
 						<div
 							onClick={closeModal}
-							className={`absolute ${
-								alignCloseIcon ? 'right-2 top-3' : 'right-3 top-3'
-							}  md:right-2 md:top-3 cursor-pointer z-50`}
+							className={`absolute ${alignCloseIcon ? 'right-2 top-3' : 'right-3 top-3'
+								}  md:right-2 md:top-3 cursor-pointer z-50`}
 						>
 							<Image
 								src={'/assets/svg/close.svg'}
diff --git a/apps/web/lib/features/all-teams/users-teams-card/user-team-active-task.tsx b/apps/web/lib/features/all-teams/users-teams-card/user-team-active-task.tsx
index ded3e360e..27a75ce65 100644
--- a/apps/web/lib/features/all-teams/users-teams-card/user-team-active-task.tsx
+++ b/apps/web/lib/features/all-teams/users-teams-card/user-team-active-task.tsx
@@ -26,6 +26,7 @@ export default function UserTeamActiveTaskInfo({ member }: { member: OT_Member }
 					memberInfo={memberInfo}
 					className="flex-1 lg:px-4 px-2 overflow-y-hidden"
 					publicTeam={false}
+					tab="default"
 				/>
 			) : (
 				<div className="w-full text-start px-6">--</div>
diff --git a/apps/web/lib/features/daily-plan/create-daily-plan-form-modal.tsx b/apps/web/lib/features/daily-plan/create-daily-plan-form-modal.tsx
index 3264fe250..8491d203a 100644
--- a/apps/web/lib/features/daily-plan/create-daily-plan-form-modal.tsx
+++ b/apps/web/lib/features/daily-plan/create-daily-plan-form-modal.tsx
@@ -2,7 +2,7 @@ import { useCallback, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { DailyPlanStatusEnum, IDailyPlanMode, IOrganizationTeamList, OT_Member } from '@app/interfaces';
 import { useAuthenticateUser, useDailyPlan, useOrganizationTeams } from '@app/hooks';
-import { Avatar, Card, InputField, Modal, Text } from 'lib/components';
+import { Avatar, Card, Modal, Text } from 'lib/components';
 import { imgTitle, tomorrowDate } from '@app/helpers';
 import { Popover, PopoverContent, PopoverTrigger } from '@components/ui/popover';
 import { cn } from 'lib/utils';
@@ -32,10 +32,12 @@ export function CreateDailyPlanFormModal({
 	employeeId?: string;
 	chooseMember?: boolean;
 }) {
-	const { handleSubmit, reset, register } = useForm();
+	const { handleSubmit, reset } = useForm();
 	const { user } = useAuthenticateUser();
 	const { activeTeam, activeTeamManagers } = useOrganizationTeams();
-	const { createDailyPlan, createDailyPlanLoading } = useDailyPlan();
+	const { createDailyPlan, createDailyPlanLoading, profileDailyPlans } = useDailyPlan();
+
+	const existingPlanDates = profileDailyPlans.items.map((plan) => new Date(plan.date));
 
 	const isManagerConnectedUser = activeTeamManagers.find((member) => member.employee?.user?.id == user?.id);
 
@@ -50,7 +52,7 @@ export function CreateDailyPlanFormModal({
 		async (values: any) => {
 			const toDay = new Date();
 			createDailyPlan({
-				workTimePlanned: parseInt(values.workTimePlanned),
+				workTimePlanned: parseInt(values.workTimePlanned) || 0,
 				taskId,
 				date:
 					planMode == 'today'
@@ -104,14 +106,14 @@ export function CreateDailyPlanFormModal({
 								/>
 							)}
 
-							<InputField
+							{/* <InputField
 								type="number"
 								placeholder="Working time to plan"
 								className="mb-0 min-w-[350px]"
 								wrapperClassName="mb-0 rounded-lg"
-								required
+								// required
 								{...register('workTimePlanned')}
-							/>
+							/> */}
 
 							{planMode === 'custom' && (
 								<Popover>
@@ -119,7 +121,7 @@ export function CreateDailyPlanFormModal({
 										<Button
 											variant={'outline'}
 											className={cn(
-												'justify-start text-left font-normal py-6 rounded-lg',
+												'justify-start text-left font-normal py-6 rounded-lg dark:bg-dark--theme-light dark:border-slate-700',
 												!date && 'text-muted-foreground'
 											)}
 										>
@@ -127,13 +129,17 @@ export function CreateDailyPlanFormModal({
 											{date ? moment(date).format('DD.MM.YYYY') : <span>Pick a date</span>}
 										</Button>
 									</PopoverTrigger>
-									<PopoverContent className="w-full p-0 z-[9999]">
+									<PopoverContent className="w-full p-0 z-[9999] dark:!border-slate-700">
 										<Calendar
 											mode="single"
+											className="dark:bg-dark--theme-light"
 											selected={date}
 											onSelect={(day) => setDate(day ? day : new Date(tomorrowDate))}
 											initialFocus
-											disabled={{ from: new Date(1970, 1, 1), to: tomorrowDate }}
+											disabled={[
+												...existingPlanDates,
+												{ from: new Date(1970, 1, 1), to: tomorrowDate }
+											]}
 										/>
 									</PopoverContent>
 								</Popover>
diff --git a/apps/web/lib/features/daily-plan/plans-work-time-and-estimate.tsx b/apps/web/lib/features/daily-plan/plans-work-time-and-estimate.tsx
index 885d0698a..f2c4d1dd0 100644
--- a/apps/web/lib/features/daily-plan/plans-work-time-and-estimate.tsx
+++ b/apps/web/lib/features/daily-plan/plans-work-time-and-estimate.tsx
@@ -1,24 +1,28 @@
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { PiWarningCircleFill } from 'react-icons/pi';
-import { IDailyPlan, ITeamTask } from '@app/interfaces';
+import { DailyPlanStatusEnum, IDailyPlan, ITeamTask } from '@app/interfaces';
 import { Card, InputField, Modal, Text, VerticalSeparator } from 'lib/components';
 import { useTranslations } from 'use-intl';
 import { TaskNameInfoDisplay } from '../task/task-displays';
 import { Button } from '@components/ui/button';
 import { TaskEstimate } from '../task/task-estimate';
-import { useDailyPlan, useTeamTasks } from '@app/hooks';
+import { useAuthenticateUser, useDailyPlan, useTeamTasks } from '@app/hooks';
+import { ReloadIcon } from '@radix-ui/react-icons';
 
 export function AddWorkTimeAndEstimatesToPlan({
 	open,
 	closeModal,
 	plan,
-	startTimer
+	startTimer,
+	hasPlan
 	// employee
 }: {
 	open: boolean;
 	closeModal: () => void;
 	startTimer: () => void;
+	hasPlan: boolean;
 	plan?: IDailyPlan;
+
 	// employee?: OT_Member;
 }) {
 	const t = useTranslations();
@@ -30,15 +34,18 @@ export function AddWorkTimeAndEstimatesToPlan({
 
 	const { updateDailyPlan } = useDailyPlan();
 
-	const { tasks: $tasks } = useTeamTasks();
+	const { tasks: $tasks, activeTeam } = useTeamTasks();
 
 	const tasks = $tasks.filter((task) =>
 		plan?.tasks?.some((t) => task?.id === t.id && typeof task?.estimate === 'number' && task?.estimate <= 0)
 	);
 
 	const handleSubmit = () => {
-		if (workTimePlanned === 0 || typeof workTimePlanned !== 'number') return;
-		if (tasks.some((task) => task.estimate === 0)) return;
+		const requirePlan = activeTeam?.requirePlanToTrack;
+		if (requirePlan) {
+			if (workTimePlanned === 0 || typeof workTimePlanned !== 'number') return;
+			if (tasks.some((task) => task.estimate === 0)) return;
+		}
 
 		updateDailyPlan({ workTimePlanned }, plan?.id ?? '');
 		startTimer();
@@ -47,59 +54,63 @@ export function AddWorkTimeAndEstimatesToPlan({
 
 	return (
 		<Modal isOpen={open} closeModal={closeModal} className="w-[98%] md:w-[530px] relative">
-			<Card className="w-full" shadow="custom">
-				<div className="flex flex-col justify-between">
-					<div className="mb-7">
-						<Text.Heading as="h3" className="mb-3 text-center">
-							{t('timer.todayPlanSettings.TITLE')}
-						</Text.Heading>
-					</div>
-					<div className="mb-7 w-full flex flex-col gap-4">
-						<span className="text-sm">
-							{t('timer.todayPlanSettings.WORK_TIME_PLANNED')} <span className="text-red-600">*</span>
-						</span>
-						<InputField
-							type="number"
-							placeholder={t('timer.todayPlanSettings.WORK_TIME_PLANNED_PLACEHOLDER')}
-							className="mb-0 min-w-[350px]"
-							wrapperClassName="mb-0 rounded-lg"
-							onChange={(e) => setworkTimePlanned(parseFloat(e.target.value))}
-							required
-							defaultValue={plan?.workTimePlanned ?? 0}
-						/>
-					</div>
+			{hasPlan ? (
+				<Card className="w-full" shadow="custom">
+					<div className="flex flex-col justify-between">
+						<div className="mb-7">
+							<Text.Heading as="h3" className="mb-3 text-center">
+								{t('timer.todayPlanSettings.TITLE')}
+							</Text.Heading>
+						</div>
+						<div className="mb-7 w-full flex flex-col gap-4">
+							<span className="text-sm">
+								{t('timer.todayPlanSettings.WORK_TIME_PLANNED')} <span className="text-red-600">*</span>
+							</span>
+							<InputField
+								type="number"
+								placeholder={t('timer.todayPlanSettings.WORK_TIME_PLANNED_PLACEHOLDER')}
+								className="mb-0 min-w-[350px]"
+								wrapperClassName="mb-0 rounded-lg"
+								onChange={(e) => setworkTimePlanned(parseFloat(e.target.value))}
+								required
+								defaultValue={plan?.workTimePlanned ?? 0}
+							/>
+						</div>
 
-					{tasks.length > 0 && (
-						<div className="text-sm flex flex-col gap-3">
-							<UnEstimatedTasks dailyPlan={plan} />
+						{tasks.length > 0 && (
+							<div className="text-sm flex flex-col gap-3">
+								<UnEstimatedTasks dailyPlan={plan} />
 
-							<div className="flex gap-2 items-center text-red-500">
-								<PiWarningCircleFill className="text-2xl" />
-								<p>{t('timer.todayPlanSettings.WARNING_PLAN_ESTIMATION')}</p>
+								<div className="flex gap-2 items-center text-red-500">
+									<PiWarningCircleFill className="text-2xl" />
+									<p>{t('timer.todayPlanSettings.WARNING_PLAN_ESTIMATION')}</p>
+								</div>
 							</div>
+						)}
+
+						<div className="mt-6 flex justify-between items-center">
+							<Button
+								variant="outline"
+								type="submit"
+								className="py-3 px-5 rounded-md font-light text-md dark:text-white dark:bg-slate-700 dark:border-slate-600"
+								onClick={handleSubmit}
+							>
+								{t('common.SKIP_ADD_LATER')}
+							</Button>
+							<Button
+								variant="default"
+								type="submit"
+								className="py-3 px-5 rounded-md font-light text-md dark:text-white"
+								onClick={handleSubmit}
+							>
+								{t('timer.todayPlanSettings.START_WORKING_BUTTON')}
+							</Button>
 						</div>
-					)}
-
-					<div className="mt-6 flex justify-between items-center">
-						<Button
-							variant="outline"
-							type="submit"
-							className="py-3 px-5 rounded-md font-light text-md dark:text-white dark:bg-slate-700 dark:border-slate-600"
-							onClick={closeModal}
-						>
-							{t('common.CANCEL')}
-						</Button>
-						<Button
-							variant="default"
-							type="submit"
-							className="py-3 px-5 rounded-md font-light text-md dark:text-white"
-							onClick={handleSubmit}
-						>
-							{t('timer.todayPlanSettings.START_WORKING_BUTTON')}
-						</Button>
 					</div>
-				</div>
-			</Card>
+				</Card>
+			) : (
+				<CreateTodayPlanPopup closeModal={closeModal} />
+			)}
 		</Modal>
 	);
 }
@@ -146,3 +157,51 @@ export function UnEstimatedTask({ task }: { task: ITeamTask }) {
 		</Card>
 	);
 }
+
+export function CreateTodayPlanPopup({ closeModal }: { closeModal: () => void }) {
+	const { createDailyPlan, createDailyPlanLoading } = useDailyPlan();
+	const { user } = useAuthenticateUser();
+	const { activeTeam } = useTeamTasks();
+	const member = activeTeam?.members.find((member) => member.employee.userId === user?.id);
+	const onSubmit = useCallback(
+		async (values: any) => {
+			const toDay = new Date();
+			createDailyPlan({
+				workTimePlanned: parseInt(values.workTimePlanned) || 0,
+				date: toDay,
+				status: DailyPlanStatusEnum.OPEN,
+				tenantId: user?.tenantId ?? '',
+				employeeId: member?.employeeId,
+				organizationId: member?.organizationId
+			}).then(() => {
+				closeModal();
+			});
+		},
+		[closeModal, createDailyPlan, member?.employeeId, member?.organizationId, user?.tenantId]
+	);
+
+	return (
+		<Card className="w-full" shadow="custom">
+			<div className="flex flex-col items-center justify-between">
+				<div className="mb-7">
+					<Text.Heading as="h3" className="mb-3 text-center">
+						CREATE A PLAN FOR TODAY
+					</Text.Heading>
+
+					<Text className="text-sm text-center text-gray-500">You are creating a new plan for today</Text>
+				</div>
+				<div className="flex flex-col w-full gap-3">
+					<Button
+						variant="default"
+						className="p-7 font-normal rounded-xl text-md"
+						disabled={createDailyPlanLoading}
+						onClick={onSubmit}
+					>
+						{createDailyPlanLoading && <ReloadIcon className="animate-spin mr-2 h-4 w-4" />}
+						OK
+					</Button>
+				</div>
+			</div>
+		</Card>
+	);
+}
diff --git a/apps/web/lib/features/task/daily-plan/future-tasks.tsx b/apps/web/lib/features/task/daily-plan/future-tasks.tsx
index ff4af85e1..d235ca163 100644
--- a/apps/web/lib/features/task/daily-plan/future-tasks.tsx
+++ b/apps/web/lib/features/task/daily-plan/future-tasks.tsx
@@ -1,4 +1,4 @@
-import { formatDayPlanDate, tomorrowDate } from '@app/helpers';
+import { formatDayPlanDate, handleDragAndDrop, tomorrowDate } from '@app/helpers';
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@components/ui/accordion';
 import { EmptyPlans, PlanHeader } from 'lib/features/user-profile-plans';
 import { TaskCard } from '../task-card';
@@ -12,115 +12,160 @@ import { clsxm } from '@app/utils';
 import { HorizontalSeparator } from 'lib/components';
 import { useState } from 'react';
 import { AlertPopup } from 'lib/components';
+import { useFilterDateRange } from '@app/hooks/useFilterDateRange';
+import { IDailyPlan } from '@app/interfaces';
+import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
 
 export function FutureTasks({ profile }: { profile: any }) {
 	const { deleteDailyPlan, deleteDailyPlanLoading, futurePlans } = useDailyPlan();
 	const canSeeActivity = useCanSeeActivityScreen();
 	const [popupOpen, setPopupOpen] = useState(false);
+	const { filteredFuturePlanData: filteredFuturePlanData } = useFilterDateRange(futurePlans, 'future');
+	const [currentDeleteIndex, setCurrentDeleteIndex] = useState(0);
+	const [futureDailyPlanTasks, setFutureDailyPlanTasks] = useState<IDailyPlan[]>(filteredFuturePlanData);
 
 	const view = useRecoilValue(dailyPlanViewHeaderTabs);
 
 	return (
 		<div className="flex flex-col gap-6">
-			{futurePlans.length > 0 ? (
-				<Accordion
-					type="multiple"
-					className="text-sm"
-					defaultValue={[tomorrowDate.toISOString().split('T')[0]]}
+			{futureDailyPlanTasks?.length > 0 ? (
+				<DragDropContext
+					onDragEnd={(result) => handleDragAndDrop(result, futureDailyPlanTasks, setFutureDailyPlanTasks)}
 				>
-					{futurePlans.map((plan) => (
-						<AccordionItem
-							value={plan.date.toString().split('T')[0]}
-							key={plan.id}
-							className="dark:border-slate-600 !border-none"
-						>
-							<AccordionTrigger className="!min-w-full text-start hover:no-underline">
-								<div className="flex items-center justify-between gap-3 w-full">
-									<div className="text-lg min-w-max">
-										{formatDayPlanDate(plan.date.toString())} ({plan.tasks?.length})
+					<Accordion
+						type="multiple"
+						className="text-sm"
+						defaultValue={[tomorrowDate.toISOString().split('T')[0]]}
+					>
+						{futureDailyPlanTasks.map((plan, index) => (
+							<AccordionItem
+								value={plan.date.toString().split('T')[0]}
+								key={plan.id}
+								className="dark:border-slate-600 !border-none"
+							>
+								<AccordionTrigger className="!min-w-full text-start hover:no-underline">
+									<div className="flex items-center justify-between gap-3 w-full">
+										<div className="text-lg min-w-max">
+											{formatDayPlanDate(plan.date.toString())} ({plan.tasks?.length})
+										</div>
+										<HorizontalSeparator />
 									</div>
-									<HorizontalSeparator />
-								</div>
-							</AccordionTrigger>
-							<AccordionContent className="bg-light--theme border-none dark:bg-dark--theme">
-								{/* Plan header */}
-								<PlanHeader plan={plan} planMode="Outstanding" />
-
-								{/* Plan tasks list */}
-								<ul
-									className={clsxm(
-										view === 'CARDS' && 'flex-col',
-										view === 'TABLE' && 'flex-wrap',
-										'flex gap-2 pb-[1.5rem]',
-										view === 'BLOCKS' && 'overflow-x-scroll'
-									)}
-								>
-									{plan.tasks?.map((task) =>
-										view === 'CARDS' ? (
-											<TaskCard
-												key={`${task.id}${plan.id}`}
-												isAuthUser={true}
-												activeAuthTask={true}
-												viewType={'dailyplan'}
-												task={task}
-												profile={profile}
-												type="HORIZONTAL"
-												taskBadgeClassName={`rounded-sm`}
-												taskTitleClassName="mt-[0.0625rem]"
-												plan={plan}
-												planMode="Future Tasks"
-											/>
-										) : (
-											<TaskBlockCard key={task.id} task={task} />
-										)
-									)}
-								</ul>
-
-								{/* Delete Plan */}
-								{canSeeActivity ? (
-									<div className="flex justify-end">
-										<AlertPopup
-											open={popupOpen}
-											buttonOpen={
-												//button open popup
-												<Button
-													onClick={() => setPopupOpen(true)}
-													variant="outline"
-													className="px-4 py-2 text-sm font-medium text-red-600 border border-red-600 rounded-md bg-light--theme-light dark:!bg-dark--theme-light"
-												>
-													Delete this plan
-												</Button>
-											}
-										>
-											{/*button confirm*/}
-											<Button
-												disabled={deleteDailyPlanLoading}
-												onClick={() => deleteDailyPlan(plan.id ?? '')}
-												variant="destructive"
-												className="flex items-center justify-center px-4 py-2 text-sm font-medium text-white bg-red-600 rounded-md hover:bg-red-700 disabled:bg-red-400"
-											>
-												{deleteDailyPlanLoading && (
-													<ReloadIcon className="animate-spin mr-2 h-4 w-4" />
+								</AccordionTrigger>
+								<AccordionContent className="bg-light--theme border-none dark:bg-dark--theme">
+									<PlanHeader plan={plan} planMode="Future Tasks" />
+									<Droppable droppableId={plan.id as string} key={plan.id} type="task">
+										{(provided) => (
+											<ul
+												ref={provided.innerRef}
+												{...provided.droppableProps}
+												className={clsxm(
+													view === 'CARDS' && 'flex-col',
+													view === 'TABLE' && 'flex-wrap',
+													'flex gap-2 pb-[1.5rem]',
+													view === 'BLOCKS' && 'overflow-x-scroll'
 												)}
-												Delete
-											</Button>
-											{/*button cancel*/}
-											<Button
-												onClick={() => setPopupOpen(false)}
-												variant="outline"
-												className="px-4 py-2 text-sm font-medium text-red-600 border border-red-600 rounded-md bg-light--theme-light dark:!bg-dark--theme-light"
 											>
-												Cancel
-											</Button>
-										</AlertPopup>
-									</div>
-								) : (
-									<></>
-								)}
-							</AccordionContent>
-						</AccordionItem>
-					))}
-				</Accordion>
+												{plan.tasks?.map((task, index) =>
+													view === 'CARDS' ? (
+														<Draggable key={task.id} draggableId={task.id} index={index}>
+															{(provided) => (
+																<div
+																	ref={provided.innerRef}
+																	{...provided.draggableProps}
+																	{...provided.dragHandleProps}
+																	style={{
+																		...provided.draggableProps.style,
+																		marginBottom: 8
+																	}}
+																>
+																	<TaskCard
+																		key={`${task.id}${plan.id}`}
+																		isAuthUser={true}
+																		activeAuthTask={true}
+																		viewType={'dailyplan'}
+																		task={task}
+																		profile={profile}
+																		type="HORIZONTAL"
+																		taskBadgeClassName={`rounded-sm`}
+																		taskTitleClassName="mt-[0.0625rem]"
+																		plan={plan}
+																		planMode="Future Tasks"
+																	/>
+																</div>
+															)}
+														</Draggable>
+													) : (
+														<Draggable key={task.id} draggableId={task.id} index={index}>
+															{(provided) => (
+																<div
+																	ref={provided.innerRef}
+																	{...provided.draggableProps}
+																	{...provided.dragHandleProps}
+																	style={{
+																		...provided.draggableProps.style,
+																		marginBottom: 8
+																	}}
+																>
+																	<TaskBlockCard task={task} />
+																</div>
+															)}
+														</Draggable>
+													)
+												)}
+												<>{provided.placeholder}</>
+												{canSeeActivity ? (
+													<div className="flex justify-end">
+														<AlertPopup
+															open={currentDeleteIndex === index && popupOpen}
+															buttonOpen={
+																//button open popup
+																<Button
+																	onClick={() => {
+																		setPopupOpen((prev) => !prev);
+																		setCurrentDeleteIndex(index);
+																	}}
+																	variant="outline"
+																	className="px-4 py-2 text-sm font-medium text-red-600 border border-red-600 rounded-md bg-light--theme-light dark:!bg-dark--theme-light"
+																>
+																	Delete this plan
+																</Button>
+															}
+														>
+															{/*button confirm*/}
+															<Button
+																disabled={deleteDailyPlanLoading}
+																onClick={() => {
+																	deleteDailyPlan(plan.id ?? '');
+																}}
+																variant="destructive"
+																className="flex items-center justify-center px-4 py-2 text-sm font-medium text-white bg-red-600 rounded-md hover:bg-red-700 disabled:bg-red-400"
+															>
+																{deleteDailyPlanLoading && (
+																	<ReloadIcon className="animate-spin mr-2 h-4 w-4" />
+																)}
+																Delete
+															</Button>
+															{/*button cancel*/}
+															<Button
+																onClick={() => setPopupOpen(false)}
+																variant="outline"
+																className="px-4 py-2 text-sm font-medium text-red-600 border border-red-600 rounded-md bg-light--theme-light dark:!bg-dark--theme-light"
+															>
+																Cancel
+															</Button>
+														</AlertPopup>
+													</div>
+												) : (
+													<></>
+												)}
+											</ul>
+										)}
+									</Droppable>
+								</AccordionContent>
+							</AccordionItem>
+						))}
+					</Accordion>
+				</DragDropContext>
 			) : (
 				<EmptyPlans planMode="Past Tasks" />
 			)}
diff --git a/apps/web/lib/features/task/daily-plan/outstanding-all.tsx b/apps/web/lib/features/task/daily-plan/outstanding-all.tsx
index c0ca5b92d..80e56fd96 100644
--- a/apps/web/lib/features/task/daily-plan/outstanding-all.tsx
+++ b/apps/web/lib/features/task/daily-plan/outstanding-all.tsx
@@ -6,6 +6,10 @@ import { useRecoilValue } from 'recoil';
 import { dailyPlanViewHeaderTabs } from '@app/stores/header-tabs';
 import TaskBlockCard from '../task-block-card';
 import { clsxm } from '@app/utils';
+import { DragDropContext, Draggable, Droppable, DroppableProvided, DroppableStateSnapshot } from 'react-beautiful-dnd';
+import { useState } from 'react';
+import { ITeamTask } from '@app/interfaces';
+import { handleDragAndDropDailyOutstandingAll } from '@app/helpers';
 
 interface OutstandingAll {
 	profile: any;
@@ -14,48 +18,91 @@ export function OutstandingAll({ profile }: OutstandingAll) {
 	const { outstandingPlans } = useDailyPlan();
 	const view = useRecoilValue(dailyPlanViewHeaderTabs);
 	const displayedTaskId = new Set();
+
+	const tasks = outstandingPlans.map((plan) => plan.tasks).reduce((red, curr) => red?.concat(curr || []), []);
+	const [task, setTask] = useState<ITeamTask[]>(tasks!);
+
 	return (
 		<div className="flex flex-col gap-6">
 			<TaskEstimatedCount outstandingPlans={outstandingPlans} />
-			{outstandingPlans?.length > 0 ? (
+
+			{tasks && tasks?.length > 0 ? (
 				<>
-					{outstandingPlans?.map((plan) => (
-						<>
-							{/* <PlanHeader plan={plan} planMode="Outstanding" /> */}
-							<ul
-								className={clsxm(
-									view === 'CARDS' && 'flex-col',
-									view === 'TABLE' || (view === 'BLOCKS' && 'flex-wrap'),
-									'flex gap-2 pb-[1.5rem]'
-								)}
-							>
-								{plan?.tasks?.map((task) => {
-									//If the task is already displayed, skip it
-									if (displayedTaskId.has(task.id)) {
-										return null;
-									}
-									// Add the task to the Set to avoid displaying it again
-									displayedTaskId.add(task.id);
-									return view === 'CARDS' ? (
-										<TaskCard
-											key={`${task.id}${plan.id}`}
-											isAuthUser={true}
-											activeAuthTask={true}
-											viewType={'dailyplan'}
-											task={task}
-											profile={profile}
-											type="HORIZONTAL"
-											taskBadgeClassName={`rounded-sm`}
-											taskTitleClassName="mt-[0.0625rem]"
-											planMode="Outstanding"
-										/>
-									) : (
-										<TaskBlockCard key={task.id} task={task} />
-									);
-								})}
-							</ul>
-						</>
-					))}
+					<DragDropContext
+						onDragEnd={(result) => handleDragAndDropDailyOutstandingAll(result, task, setTask)}
+					>
+						{/* <PlanHeader plan={plan} planMode="Outstanding" /> */}
+						<Droppable
+							droppableId="droppableId"
+							type="COLUMN"
+							direction={view === 'CARDS' ? 'vertical' : 'horizontal'}
+						>
+							{(provided: DroppableProvided, snapshot: DroppableStateSnapshot) => (
+								<ul
+									ref={provided.innerRef}
+									{...provided.droppableProps}
+									className={clsxm(
+										view === 'CARDS' && 'flex-col',
+										view === 'TABLE' || (view === 'BLOCKS' && 'flex-wrap'),
+										'flex gap-2 pb-[1.5rem] overflow-x-scroll'
+									)}
+								>
+									{tasks?.map((task, index) => {
+										//If the task is already displayed, skip it
+										if (displayedTaskId.has(task.id)) {
+											return null;
+										}
+										// Add the task to the Set to avoid displaying it again
+										displayedTaskId.add(task.id);
+										return view === 'CARDS' ? (
+											<Draggable key={task.id} draggableId={task.id} index={index}>
+												{(provided) => (
+													<div
+														ref={provided.innerRef}
+														{...provided.draggableProps}
+														{...provided.dragHandleProps}
+														style={{
+															...provided.draggableProps.style,
+															marginBottom: 8
+														}}
+													>
+														<TaskCard
+															key={`${task.id}`}
+															isAuthUser={true}
+															activeAuthTask={true}
+															viewType={'dailyplan'}
+															task={task}
+															profile={profile}
+															type="HORIZONTAL"
+															taskBadgeClassName={`rounded-sm`}
+															taskTitleClassName="mt-[0.0625rem]"
+															planMode="Outstanding"
+														/>
+													</div>
+												)}
+											</Draggable>
+										) : (
+											<Draggable key={task.id} draggableId={task.id} index={index}>
+												{(provided) => (
+													<div
+														ref={provided.innerRef}
+														{...provided.draggableProps}
+														{...provided.dragHandleProps}
+														style={{
+															...provided.draggableProps.style,
+															marginBottom: 8
+														}}
+													>
+														<TaskBlockCard key={task.id} task={task} />
+													</div>
+												)}
+											</Draggable>
+										);
+									})}
+								</ul>
+							)}
+						</Droppable>
+					</DragDropContext>
 				</>
 			) : (
 				<EmptyPlans planMode="Outstanding" />
diff --git a/apps/web/lib/features/task/daily-plan/outstanding-date.tsx b/apps/web/lib/features/task/daily-plan/outstanding-date.tsx
index 9eaa232ac..2623e624b 100644
--- a/apps/web/lib/features/task/daily-plan/outstanding-date.tsx
+++ b/apps/web/lib/features/task/daily-plan/outstanding-date.tsx
@@ -1,4 +1,4 @@
-import { formatDayPlanDate } from '@app/helpers';
+import { formatDayPlanDate, handleDragAndDrop } from '@app/helpers';
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@components/ui/accordion';
 import { EmptyPlans, PlanHeader } from 'lib/features/user-profile-plans';
 import { TaskCard } from '../task-card';
@@ -8,6 +8,9 @@ import TaskBlockCard from '../task-block-card';
 import { clsxm } from '@app/utils';
 import { useRecoilValue } from 'recoil';
 import { dailyPlanViewHeaderTabs } from '@app/stores/header-tabs';
+import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
+import { useState } from 'react';
+import { IDailyPlan } from '@app/interfaces';
 
 interface IOutstandingFilterDate {
 	profile: any;
@@ -15,64 +18,100 @@ interface IOutstandingFilterDate {
 export function OutstandingFilterDate({ profile }: IOutstandingFilterDate) {
 	const { outstandingPlans } = useDailyPlan();
 	const view = useRecoilValue(dailyPlanViewHeaderTabs);
+	const [outstandingTasks, setOutstandingTasks] = useState<IDailyPlan[]>(outstandingPlans)
 	return (
 		<div className="flex flex-col gap-6">
-			{outstandingPlans?.length > 0 ? (
-				<Accordion
-					type="multiple"
-					className="text-sm"
-					defaultValue={outstandingPlans?.map((plan) => new Date(plan.date).toISOString().split('T')[0])}
-				>
-					{outstandingPlans?.map((plan) => (
-						<AccordionItem
-							value={plan.date.toString().split('T')[0]}
-							key={plan.id}
-							className="dark:border-slate-600 !border-none"
-						>
-							<AccordionTrigger className="!min-w-full text-start hover:no-underline">
-								<div className="flex items-center justify-between gap-3 w-full">
-									<div className="text-lg min-w-max">
-										{formatDayPlanDate(plan.date.toString())} ({plan.tasks?.length})
+			{outstandingTasks?.length > 0 ? (
+				<DragDropContext onDragEnd={(result) => handleDragAndDrop(result, outstandingTasks, setOutstandingTasks)}>
+					<Accordion
+						type="multiple"
+						className="text-sm"
+						defaultValue={outstandingTasks?.map((plan) => new Date(plan.date).toISOString().split('T')[0])}>
+						{outstandingTasks?.map((plan) => (
+							<AccordionItem
+								value={plan.date.toString().split('T')[0]}
+								key={plan.id}
+								className="dark:border-slate-600 !border-none">
+								<AccordionTrigger className="!min-w-full text-start hover:no-underline">
+									<div className="flex items-center justify-between gap-3 w-full">
+										<div className="text-lg min-w-max">
+											{formatDayPlanDate(plan.date.toString())} ({plan.tasks?.length})
+										</div>
+										<HorizontalSeparator />
 									</div>
-									<HorizontalSeparator />
-								</div>
-							</AccordionTrigger>
-							<AccordionContent className="bg-light--theme border-none dark:bg-dark--theme pb-12">
-								{/* Plan header */}
-								<PlanHeader plan={plan} planMode="Outstanding" />
+								</AccordionTrigger>
+								<AccordionContent className="bg-light--theme border-none dark:bg-dark--theme pb-12">
+									{/* Plan header */}
+									<PlanHeader plan={plan} planMode="Outstanding" />
+									<Droppable droppableId={plan.id as string} key={plan.id} type="task">
+										{(provided) => (
+											<ul
+												ref={provided.innerRef}
+												{...provided.droppableProps}
+												className={clsxm(
+													view === 'CARDS' && 'flex-col',
+													view === 'TABLE' && 'flex-wrap',
+													'flex gap-2 pb-[1.5rem]',
+													view === 'BLOCKS' && 'overflow-x-scroll'
+												)}
+											>
+												{plan.tasks?.map((task, index) =>
+													view === 'CARDS' ? (
+														<Draggable key={task.id} draggableId={task.id} index={index}>
+															{(provided) => (
+																<div
+																	ref={provided.innerRef}
+																	{...provided.draggableProps}
+																	{...provided.dragHandleProps}
+																	style={{
+																		...provided.draggableProps.style,
+																		marginBottom: 8
+																	}}
+																>
+																	<TaskCard
+																		key={`${task.id}${plan.id}`}
+																		isAuthUser={true}
+																		activeAuthTask={true}
+																		viewType={'dailyplan'}
+																		task={task}
+																		profile={profile}
+																		type="HORIZONTAL"
+																		taskBadgeClassName={`rounded-sm`}
+																		taskTitleClassName="mt-[0.0625rem]"
+																		planMode="Outstanding"
+																	/>
+																</div>
+															)}
 
-								{/* Plan tasks list */}
-								<ul
-									className={clsxm(
-										view === 'CARDS' && 'flex-col',
-										view === 'TABLE' && 'flex-wrap',
-										'flex gap-2 pb-[1.5rem]',
-										view === 'BLOCKS' && 'overflow-x-scroll'
-									)}
-								>
-									{plan.tasks?.map((task) =>
-										view === 'CARDS' ? (
-											<TaskCard
-												key={`${task.id}${plan.id}`}
-												isAuthUser={true}
-												activeAuthTask={true}
-												viewType={'dailyplan'}
-												task={task}
-												profile={profile}
-												type="HORIZONTAL"
-												taskBadgeClassName={`rounded-sm`}
-												taskTitleClassName="mt-[0.0625rem]"
-												planMode="Outstanding"
-											/>
-										) : (
-											<TaskBlockCard key={task.id} task={task} />
-										)
-									)}
-								</ul>
-							</AccordionContent>
-						</AccordionItem>
-					))}
-				</Accordion>
+														</Draggable>
+													) : (
+														<Draggable key={task.id} draggableId={task.id} index={index}>
+															{(provided) => (
+																<div
+																	ref={provided.innerRef}
+																	{...provided.draggableProps}
+																	{...provided.dragHandleProps}
+																	style={{
+																		...provided.draggableProps.style,
+																		marginBottom: 8
+																	}}
+																>
+																	<TaskBlockCard key={task.id} task={task} />
+																</div>
+															)}
+														</Draggable>
+													)
+												)}
+											</ul>
+										)}
+										{/* <>{provided.placeholder}</> */}
+										{/* Plan tasks list */}
+									</Droppable>
+								</AccordionContent>
+							</AccordionItem>
+						))}
+					</Accordion>
+				</DragDropContext>
 			) : (
 				<EmptyPlans planMode="Outstanding" />
 			)}
diff --git a/apps/web/lib/features/task/daily-plan/past-tasks.tsx b/apps/web/lib/features/task/daily-plan/past-tasks.tsx
index 249f3ebdd..412ef7d05 100644
--- a/apps/web/lib/features/task/daily-plan/past-tasks.tsx
+++ b/apps/web/lib/features/task/daily-plan/past-tasks.tsx
@@ -1,6 +1,6 @@
-import { formatDayPlanDate, yesterdayDate } from '@app/helpers';
+import { formatDayPlanDate, handleDragAndDrop, yesterdayDate } from '@app/helpers';
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@components/ui/accordion';
-import { EmptyPlans, PlanHeader } from 'lib/features/user-profile-plans';
+import { EmptyPlans, FilterTabs, PlanHeader } from 'lib/features/user-profile-plans';
 import { TaskCard } from '../task-card';
 import { useDailyPlan } from '@app/hooks';
 import { useRecoilValue } from 'recoil';
@@ -8,68 +8,120 @@ import { dailyPlanViewHeaderTabs } from '@app/stores/header-tabs';
 import { HorizontalSeparator } from 'lib/components';
 import { clsxm } from '@app/utils';
 import TaskBlockCard from '../task-block-card';
+import { useFilterDateRange } from '@app/hooks/useFilterDateRange';
+import { useState } from 'react';
+import { IDailyPlan } from '@app/interfaces';
+import { DragDropContext, Draggable, Droppable, DroppableProvided, DroppableStateSnapshot } from 'react-beautiful-dnd';
 
-export function PastTasks({ profile }: { profile: any }) {
+export function PastTasks({ profile, currentTab = 'Past Tasks' }: { profile: any; currentTab?: FilterTabs }) {
 	const { pastPlans } = useDailyPlan();
 
 	const view = useRecoilValue(dailyPlanViewHeaderTabs);
+	const { filteredPastPlanData: filteredPastPlanData } = useFilterDateRange(pastPlans, 'past');
+	const [pastTasks, setPastTasks] = useState<IDailyPlan[]>(filteredPastPlanData);
+
 	return (
 		<div className="flex flex-col gap-6">
-			{pastPlans?.length > 0 ? (
-				<Accordion
-					type="multiple"
-					className="text-sm"
-					defaultValue={[yesterdayDate.toISOString().split('T')[0]]}
-				>
-					{pastPlans?.map((plan) => (
-						<AccordionItem
-							value={plan.date.toString().split('T')[0]}
-							key={plan.id}
-							className="dark:border-slate-600 !border-none"
-						>
-							<AccordionTrigger className="!min-w-full text-start hover:no-underline">
-								<div className="flex items-center justify-between gap-3 w-full">
-									<div className="text-lg min-w-max">
-										{formatDayPlanDate(plan.date.toString())} ({plan.tasks?.length})
+			{pastTasks?.length > 0 ? (
+				<DragDropContext onDragEnd={(result) => handleDragAndDrop(result, pastPlans, setPastTasks)}>
+					<Accordion
+						type="multiple"
+						className="text-sm"
+						defaultValue={[yesterdayDate.toISOString().split('T')[0]]}
+					>
+						{pastTasks?.map((plan) => (
+							<AccordionItem
+								value={plan.date.toString().split('T')[0]}
+								key={plan.id}
+								className="dark:border-slate-600 !border-none"
+							>
+								<AccordionTrigger className="!min-w-full text-start hover:no-underline">
+									<div className="flex items-center justify-between gap-3 w-full">
+										<div className="text-lg min-w-max">
+											{formatDayPlanDate(plan.date.toString())} ({plan.tasks?.length})
+										</div>
+										<HorizontalSeparator />
 									</div>
-									<HorizontalSeparator />
-								</div>
-							</AccordionTrigger>
-							<AccordionContent className="bg-light--theme border-none dark:bg-dark--theme pb-12">
-								{/* Plan header */}
-								<PlanHeader plan={plan} planMode="Outstanding" />
-
-								{/* Plan tasks list */}
-								<ul
-									className={clsxm(
-										view === 'CARDS' && 'flex-col',
-										view === 'TABLE' && 'flex-wrap',
-										'flex gap-2 pb-[1.5rem]',
-										view === 'BLOCKS' && 'overflow-x-scroll'
-									)}
-								>
-									{plan.tasks?.map((task) =>
-										view === 'CARDS' ? (
-											<TaskCard
-												key={`${task.id}${plan.id}`}
-												isAuthUser={true}
-												activeAuthTask={true}
-												viewType={'dailyplan'}
-												task={task}
-												profile={profile}
-												type="HORIZONTAL"
-												taskBadgeClassName={`rounded-sm`}
-												taskTitleClassName="mt-[0.0625rem]"
-											/>
-										) : (
-											<TaskBlockCard key={task.id} task={task} />
-										)
-									)}
-								</ul>
-							</AccordionContent>
-						</AccordionItem>
-					))}
-				</Accordion>
+								</AccordionTrigger>
+								<AccordionContent className="bg-light--theme border-none dark:bg-dark--theme pb-12">
+									{/* Plan header */}
+									<PlanHeader plan={plan} planMode="Outstanding" />
+									<Droppable
+										droppableId={plan.id as string}
+										key={plan.id}
+										type="task"
+										direction={view === 'CARDS' ? 'vertical' : 'horizontal'}
+									>
+										{(provided: DroppableProvided, snapshot: DroppableStateSnapshot) => (
+											<ul
+												ref={provided.innerRef}
+												{...provided.droppableProps}
+												className={clsxm(
+													view === 'CARDS' && 'flex-col',
+													view === 'TABLE' && 'flex-wrap',
+													'flex gap-2 pb-[1.5rem]',
+													view === 'BLOCKS' && 'overflow-x-scroll',
+													snapshot.isDraggingOver ? 'lightblue' : '#F7F7F8'
+												)}
+											>
+												{plan.tasks?.map((task, index) =>
+													view === 'CARDS' ? (
+														<Draggable key={index} draggableId={task.id} index={index}>
+															{(provided) => (
+																<div
+																	ref={provided.innerRef}
+																	{...provided.draggableProps}
+																	{...provided.dragHandleProps}
+																	style={{
+																		...provided.draggableProps.style,
+																		marginBottom: 8
+																	}}
+																>
+																	<TaskCard
+																		key={`${task.id}${plan.id}`}
+																		isAuthUser={true}
+																		activeAuthTask={true}
+																		viewType={'dailyplan'}
+																		task={task}
+																		profile={profile}
+																		type="HORIZONTAL"
+																		taskBadgeClassName={`rounded-sm`}
+																		taskTitleClassName="mt-[0.0625rem]"
+																		planMode={
+																			currentTab === 'Past Tasks'
+																				? 'Past Tasks'
+																				: undefined
+																		}
+																	/>
+																</div>
+															)}
+														</Draggable>
+													) : (
+														<Draggable key={task.id} draggableId={task.id} index={index}>
+															{(provided) => (
+																<div
+																	ref={provided.innerRef}
+																	{...provided.draggableProps}
+																	{...provided.dragHandleProps}
+																	style={{
+																		...provided.draggableProps.style,
+																		marginBottom: 8
+																	}}
+																>
+																	<TaskBlockCard key={task.id} task={task} />
+																</div>
+															)}
+														</Draggable>
+													)
+												)}
+											</ul>
+										)}
+									</Droppable>
+								</AccordionContent>
+							</AccordionItem>
+						))}
+					</Accordion>
+				</DragDropContext>
 			) : (
 				<EmptyPlans planMode="Past Tasks" />
 			)}
diff --git a/apps/web/lib/features/task/task-all-status-type.tsx b/apps/web/lib/features/task/task-all-status-type.tsx
index ce783a704..f4224ffd2 100644
--- a/apps/web/lib/features/task/task-all-status-type.tsx
+++ b/apps/web/lib/features/task/task-all-status-type.tsx
@@ -14,13 +14,18 @@ import {
 import { clsxm } from '@app/utils';
 import { planBadgeContent } from '@app/helpers';
 import { CalendarIcon } from '@radix-ui/react-icons';
+import { FilterTabs } from '../user-profile-plans';
 
 export function TaskAllStatusTypes({
 	task,
 	showStatus = false,
 	toBlockCard = false,
-	className
+	className,
+	tab,
+	dayPlanTab
 }: {
+	tab?: 'default' | 'unassign' | 'dailyplan';
+	dayPlanTab?: FilterTabs;
 	task?: Nullable<ITeamTask>;
 	showStatus?: boolean;
 	toBlockCard?: boolean;
@@ -94,10 +99,17 @@ export function TaskAllStatusTypes({
 							titleClassName={'text-[0.625rem] font-[500]'}
 						/>
 					)}
-					{planBadgeContent(dailyPlan.items, task?.id ?? '') && (
-						<div className="rounded-md pr-5 pl-4 !py-10 flex items-center gap-2 bg-[#D9EBD7] text-[#4D6194] font-medium">
+					{planBadgeContent(dailyPlan.items, task?.id ?? '', tab) && (
+						<div
+							className={clsxm(
+								dayPlanTab === 'Past Tasks' ? 'bg-red-600 text-white' : 'bg-[#D9EBD7] text-[#4D6194]',
+								'rounded-md pr-5 pl-4 !py-10 flex items-center gap-2 font-medium'
+							)}
+						>
 							<CalendarIcon />
-							<span className="text-[10px]">{planBadgeContent(dailyPlan.items, task?.id ?? '')}</span>
+							<span className="text-[10px]">
+								{planBadgeContent(dailyPlan.items, task?.id ?? '', tab)}
+							</span>
 						</div>
 					)}
 					{tags.map((tag, i) => {
diff --git a/apps/web/lib/features/task/task-block-card.tsx b/apps/web/lib/features/task/task-block-card.tsx
index 3b6c7544b..7ba6f64f3 100644
--- a/apps/web/lib/features/task/task-block-card.tsx
+++ b/apps/web/lib/features/task/task-block-card.tsx
@@ -39,9 +39,9 @@ export default function TaskBlockCard(props: TaskItemProps) {
 
 	const taskAssignee: ImageOverlapperProps[] = task.members?.map((member: any) => {
 		return {
-			id: member.user.id,
-			url: member.user.imageUrl,
-			alt: member.user.firstName
+			id: member.user?.id,
+			url: member.user?.imageUrl,
+			alt: member.user?.firstName
 		};
 	});
 
@@ -63,7 +63,13 @@ export default function TaskBlockCard(props: TaskItemProps) {
 			<div className="w-full justify-between h-fit">
 				<div className="w-full flex justify-between">
 					<span className="!w-64">
-						<TaskAllStatusTypes className="justify-start" task={task} showStatus={false} />
+						<TaskAllStatusTypes
+							className="justify-start"
+							task={task}
+							showStatus={false}
+							tab="default"
+							dayPlanTab="All Tasks"
+						/>
 					</span>
 					<span>
 						<MenuKanbanCard member={currentMember} item={task} />
diff --git a/apps/web/lib/features/task/task-card.tsx b/apps/web/lib/features/task/task-card.tsx
index 192c035fd..64b03790d 100644
--- a/apps/web/lib/features/task/task-card.tsx
+++ b/apps/web/lib/features/task/task-card.tsx
@@ -24,6 +24,7 @@ import {
 	IDailyPlanMode,
 	IDailyPlanTasksUpdate,
 	IOrganizationTeamList,
+	IRemoveTaskFromManyPlans,
 	ITeamTask,
 	Nullable,
 	OT_Member
@@ -132,9 +133,9 @@ export function TaskCard(props: Props) {
 	const taskAssignee: ImageOverlapperProps[] =
 		task?.members?.map((member: any) => {
 			return {
-				id: member.user.id,
-				url: member.user.imageUrl,
-				alt: member.user.firstName
+				id: member.user?.id,
+				url: member.user?.imageUrl,
+				alt: member.user?.firstName
 			};
 		}) || [];
 
@@ -160,6 +161,8 @@ export function TaskCard(props: Props) {
 						className="px-4 w-full"
 						taskBadgeClassName={clsxm(taskBadgeClassName)}
 						taskTitleClassName={clsxm(taskTitleClassName)}
+						dayPlanTab={planMode}
+						tab={viewType}
 					/>
 				</div>
 				<VerticalSeparator />
@@ -248,7 +251,7 @@ export function TaskCard(props: Props) {
 					)} */}
 				</div>
 				<div className="flex flex-wrap items-start justify-between pb-4 border-b">
-					<TaskInfo task={task} className="px-4 mb-4 w-full" />{' '}
+					<TaskInfo task={task} className="px-4 mb-4 w-full" tab={viewType} dayPlanTab={planMode} />{' '}
 					{viewType === 'default' && (
 						<>
 							<div className="flex items-end mx-auto py-4 space-x-2">
@@ -416,6 +419,7 @@ function TimerButtonCall({
 				open={isOpen}
 				plan={hasPlan}
 				startTimer={startTimer}
+				hasPlan={!!hasPlan}
 			/>
 		</>
 	);
@@ -427,8 +431,12 @@ function TaskInfo({
 	className,
 	task,
 	taskBadgeClassName,
-	taskTitleClassName
+	taskTitleClassName,
+	tab,
+	dayPlanTab
 }: IClassName & {
+	tab: 'default' | 'unassign' | 'dailyplan';
+	dayPlanTab?: FilterTabs;
 	task?: Nullable<ITeamTask>;
 	taskBadgeClassName?: string;
 	taskTitleClassName?: string;
@@ -457,7 +465,7 @@ function TaskInfo({
 			)}
 
 			{/* Task status */}
-			{task && <TaskAllStatusTypes task={task} />}
+			{task && <TaskAllStatusTypes task={task} tab={tab} dayPlanTab={dayPlanTab} />}
 			{!task && <div className="self-center py-1 text-center">--</div>}
 		</div>
 	);
@@ -492,6 +500,7 @@ function TaskCardMenu({
 	}, [memberInfo, task, viewType]);
 
 	const canSeeActivity = useCanSeeActivityScreen();
+	const { hasPlan, hasPlanForTomorrow } = useTimerView();
 
 	return (
 		<Popover>
@@ -548,6 +557,7 @@ function TaskCardMenu({
 														planMode="today"
 														taskId={task.id}
 														employeeId={profile?.member?.employeeId ?? ''}
+														hasTodayPlan={hasPlan}
 													/>
 												</li>
 												<li className="mb-2">
@@ -555,6 +565,7 @@ function TaskCardMenu({
 														planMode="tomorow"
 														taskId={task.id}
 														employeeId={profile?.member?.employeeId ?? ''}
+														hasPlanForTomorrow={hasPlanForTomorrow}
 													/>
 												</li>
 												<li className="mb-2">
@@ -591,6 +602,12 @@ function TaskCardMenu({
 																plan={plan}
 															/>
 														</div>
+														<div className="mt-2">
+															<RemoveManyTaskFromPlan
+																task={task}
+																member={profile?.member}
+															/>
+														</div>
 													</div>
 												) : (
 													<></>
@@ -628,12 +645,16 @@ export function PlanTask({
 	planMode,
 	taskId,
 	employeeId,
-	chooseMember
+	chooseMember,
+	hasTodayPlan,
+	hasPlanForTomorrow
 }: {
 	taskId: string;
 	planMode: IDailyPlanMode;
 	employeeId?: string;
 	chooseMember?: boolean;
+	hasTodayPlan?: IDailyPlan;
+	hasPlanForTomorrow?: IDailyPlan;
 }) {
 	const t = useTranslations();
 	const [isPending, startTransition] = useTransition();
@@ -688,7 +709,7 @@ export function PlanTask({
 					employeeId={employeeId}
 					chooseMember={chooseMember}
 				/>
-				{planMode === 'today' && (
+				{planMode === 'today' && !hasTodayPlan && (
 					<span>
 						{isPending ? (
 							<ReloadIcon className="animate-spin mr-2 h-4 w-4" />
@@ -697,7 +718,7 @@ export function PlanTask({
 						)}
 					</span>
 				)}
-				{planMode === 'tomorow' && (
+				{planMode === 'tomorow' && !hasPlanForTomorrow && (
 					<span>
 						{isPending ? (
 							<ReloadIcon className="animate-spin mr-2 h-4 w-4" />
@@ -748,3 +769,23 @@ export function RemoveTaskFromPlan({ task, plan, member }: { task: ITeamTask; me
 		</span>
 	);
 }
+
+export function RemoveManyTaskFromPlan({ task, member }: { task: ITeamTask; member?: OT_Member }) {
+	// const t = useTranslations();
+	const { removeManyTaskPlans } = useDailyPlan();
+	const data: IRemoveTaskFromManyPlans = { plansIds: [], employeeId: member?.employeeId };
+	const onClick = () => {
+		removeManyTaskPlans(data, task.id ?? '');
+	};
+	return (
+		<span
+			className={clsxm(
+				'font-normal whitespace-nowrap transition-all text-red-600',
+				'hover:font-semibold hover:transition-all cursor-pointer'
+			)}
+			onClick={onClick}
+		>
+			Remove from all plans
+		</span>
+	);
+}
diff --git a/apps/web/lib/features/task/task-date-range.tsx b/apps/web/lib/features/task/task-date-range.tsx
new file mode 100644
index 000000000..1f5c5d243
--- /dev/null
+++ b/apps/web/lib/features/task/task-date-range.tsx
@@ -0,0 +1,71 @@
+"use client"
+
+import React from "react"
+import { format } from "date-fns"
+import { Calendar as CalendarIcon } from "lucide-react"
+import { cn } from "lib/utils"
+import { Button } from "@components/ui/button"
+import { Calendar } from "@components/ui/calendar"
+import {
+    Popover,
+    PopoverContent,
+    PopoverTrigger,
+} from "@components/ui/popover"
+import { DateRange } from "react-day-picker"
+import { SetterOrUpdater } from "recoil"
+
+interface ITaskDatePickerWithRange {
+    className?: React.HTMLAttributes<HTMLDivElement>,
+    date?: DateRange;
+    onSelect?: SetterOrUpdater<DateRange | undefined>;
+    label?: string
+}
+
+export function TaskDatePickerWithRange({
+    className,
+    date,
+    onSelect,
+    label
+
+}: ITaskDatePickerWithRange) {
+    return (
+        <div className={cn("grid gap-2", className)}>
+            <Popover>
+                <PopoverTrigger asChild>
+                    <Button
+                        id="date"
+                        variant={"outline"}
+                        className={cn(
+                            "w-[250px] justify-start text-left font-normal",
+                            !date && "text-muted-foreground"
+                        )}
+                    >
+                        <CalendarIcon className="mr-2 h-4 w-4" />
+                        {date?.from ? (
+                            date.to ? (
+                                <>
+                                    {format(date.from, "dd.MM.yyyy")} -{" "}
+                                    {format(date.to, "dd.MM.yyyy")}
+                                </>
+                            ) : (
+                                format(date.from, "dd.MM.yyyy")
+                            )
+                        ) : (
+                            <span>{label}</span>
+                        )}
+                    </Button>
+                </PopoverTrigger>
+                <PopoverContent className="w-auto p-0" align="center">
+                    <Calendar
+                        initialFocus
+                        mode={'range'}
+                        defaultMonth={date?.from}
+                        selected={date}
+                        onSelect={onSelect}
+                        numberOfMonths={2}
+                    />
+                </PopoverContent>
+            </Popover>
+        </div>
+    )
+}
diff --git a/apps/web/lib/features/task/task-filters.tsx b/apps/web/lib/features/task/task-filters.tsx
index 72b3d2c22..f098f23fc 100644
--- a/apps/web/lib/features/task/task-filters.tsx
+++ b/apps/web/lib/features/task/task-filters.tsx
@@ -6,7 +6,9 @@ import {
 	useAuthenticateUser,
 	useDailyPlan,
 	useOrganizationTeams,
-	useOutsideClick
+	useOutsideClick,
+	useModal,
+	useTeamTasks
 } from '@app/hooks';
 import { IClassName, ITeamTask } from '@app/interfaces';
 import { clsxm } from '@app/utils';
@@ -14,14 +16,25 @@ import { Transition } from '@headlessui/react';
 import { Button, InputField, Tooltip, VerticalSeparator } from 'lib/components';
 import { SearchNormalIcon } from 'assets/svg';
 import intersection from 'lodash/intersection';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState, FormEvent } from 'react';
 import { TaskUnOrAssignPopover } from './task-assign-popover';
 import { TaskLabelsDropdown, TaskPropertiesDropdown, TaskSizesDropdown, TaskStatusDropdown } from './task-status';
 import { useTranslations } from 'next-intl';
 import { SettingFilterIcon } from 'assets/svg';
 import { DailyPlanFilter } from './daily-plan/daily-plan-filter';
+import { Modal, Divider } from 'lib/components';
+import api from '@app/services/client/axios';
+import { MdOutlineMoreTime } from "react-icons/md";
+import { IoIosTimer } from "react-icons/io";
+import { FiLoader } from "react-icons/fi";
+import { DatePicker } from '@components/ui/DatePicker';
+import { PencilSquareIcon } from '@heroicons/react/20/solid';
+import { FaRegCalendarAlt } from "react-icons/fa";
+import { useDateRange } from '@app/hooks/useDateRange';
+import { TaskDatePickerWithRange } from './task-date-range';
+
+export type ITab = 'worked' | 'assigned' | 'unassigned' | 'dailyplan';
 
-type ITab = 'worked' | 'assigned' | 'unassigned' | 'dailyplan';
 type ITabs = {
 	tab: ITab;
 	name: string;
@@ -261,7 +274,105 @@ export function TaskFilter({ className, hook, profile }: IClassName & Props) {
 function InputFilters({ hook, profile }: Props) {
 	const t = useTranslations();
 	const [loading, setLoading] = useState(false);
+	const { tasks } = useTeamTasks();
+	const { activeTeam } = useOrganizationTeams();
+	const members = activeTeam?.members;
+
+	const [date, setDate] = useState<string>('');
+	const [isBillable, setIsBillable] = useState<boolean>(false);
+	const [startTime, setStartTime] = useState<string>('');
+	const [endTime, setEndTime] = useState<string>('');
+	const [team, setTeam] = useState<string>('');
+	const [task, setTask] = useState<string>('');
+	const [description, setDescription] = useState<string>('');
+	const [reason, setReason] = useState<string>('');
+	const [timeDifference, setTimeDifference] = useState<string>('');
+	const [errorMsg, setError] = useState<string>('');
+	const [loading1, setLoading1] = useState<boolean>(false);
+
+	const { isOpen, openModal, closeModal } = useModal();
 
+	useEffect(() => {
+		const now = new Date();
+		const currentDate = now.toISOString().slice(0, 10);
+		const currentTime = now.toTimeString().slice(0, 5);
+
+		setDate(currentDate);
+		setStartTime(currentTime);
+		setEndTime(currentTime);
+	}, []);
+
+
+	const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
+		e.preventDefault();
+
+		const timeObject = {
+			date,
+			isBillable,
+			startTime,
+			endTime,
+			team,
+			task,
+			description,
+			reason,
+			timeDifference
+		};
+
+		if (date && startTime && endTime && team && task) {
+			setLoading1(true);
+			setError('');
+			const postData = async () => {
+				try {
+					const response = await api.post('/add_time', timeObject);
+					if (response.data.message) {
+						setLoading1(false);
+						closeModal();
+					}
+
+				} catch (err) {
+					setError('Failed to post data');
+					setLoading1(false);
+				}
+			};
+
+			postData();
+		} else {
+			setError(`Please complete all required fields with a ${"*"}`)
+		}
+	};
+
+	const calculateTimeDifference = () => {
+
+		const [startHours, startMinutes] = startTime.split(':').map(Number);
+		const [endHours, endMinutes] = endTime.split(':').map(Number);
+
+		const startTotalMinutes = startHours * 60 + startMinutes;
+		const endTotalMinutes = endHours * 60 + endMinutes;
+
+		const diffMinutes = endTotalMinutes - startTotalMinutes;
+		if (diffMinutes < 0) {
+			return;
+		}
+
+		const hours = Math.floor(diffMinutes / 60);
+		const minutes = diffMinutes % 60;
+		setTimeDifference(`${hours} Hours ${minutes} Minutes`);
+	};
+
+	useEffect(() => {
+		calculateTimeDifference();
+	}, [endTime, startTime]);
+
+	useEffect(() => {
+		if (task == '') {
+			setTask(tasks[0]?.id);
+		}
+		if (team == '') {
+			members && setTeam(members[0].id);
+		}
+
+	}, [tasks, members]);
+ 
 	const osSpecificAssignTaskTooltipLabel = 'A';
 
 	return (
@@ -293,6 +404,12 @@ function InputFilters({ hook, profile }: Props) {
 				<SettingFilterIcon className="dark:text-white w-3.5" strokeWidth="1.8" />
 				<span>{t('common.FILTER')}</span>
 			</button>
+			<button
+				onClick={() => openModal()}
+				className="p-[10px] text-white rounded-[12px] min-w-[200px] border-[1px] text-[15px] flex items-center bg-[#3826A6]"
+			>
+				<MdOutlineMoreTime size={20} className="mr-[10px]" />{"Add manual time"}
+			</button>
 
 			{/* Assign task combobox */}
 			<TaskUnOrAssignPopover
@@ -312,14 +429,160 @@ function InputFilters({ hook, profile }: Props) {
 						loading={loading}
 						className={clsxm(
 							'dark:bg-gradient-to-tl dark:from-regal-rose dark:to-regal-blue h-full px-4 py-3 rounded-xl text-base',
-							'min-w-[11.25rem] h-[2.75rem]'
+							'min-w-[8.25rem] h-[2.75rem]'
 						)}
 					>
 						{t('common.ASSIGN_TASK')}
 					</Button>
 				</Tooltip>
 			</TaskUnOrAssignPopover>
-		</div>
+			<div>
+				<Modal
+					isOpen={isOpen}
+					closeModal={closeModal}
+					title={'Add time'}
+					className="bg-light--theme-light dark:bg-dark--theme-light py-5 rounded-xl w-full md:min-w-[20vw] md:max-w-fit h-[auto] justify-start"
+					titleClass="text-[16px] font-bold"
+				>
+					<Divider className="mt-4" />
+					<form onSubmit={handleSubmit} className="text-[13px] w-[90%]">
+						<div className="mb-4">
+							<label className="block text-gray-700 mb-1">Date<span className="text-[#de5505e1] ml-1">*</span></label>
+							<div className="w-full p-2 border border-gray-300 rounded-[10px]">
+								<DatePicker
+									buttonVariant={'link'}
+									buttonClassName={'py-3 decoration-transparent h-[0.875rem] w-full flex items-center'}
+									customInput={
+										<div
+											className={clsxm(
+												'not-italic cursor-pointer font-semibold text-[0.625rem] 3xl:text-xs w-full',
+												'leading-[140%] tracking-[-0.02em] text-[#282048] dark:text-white w-full'
+											)}
+										>
+											{
+												date ?
+													<div className="flex items-center w-full">
+														<FaRegCalendarAlt size={20} fill={"#13648fa9"} className="mx-[20px]" />
+														{date}
+													</div>
+													: (
+														<PencilSquareIcon className="dark:text-white text-dark w-4 h-4" />
+													)}
+										</div>
+									}
+									selected={new Date()}
+									onSelect={(dateI) => {
+										dateI && setDate(dateI.toDateString());
+									}}
+									mode={'single'}
+								/>
+							</div>
+						</div>
+
+						<div className="mb-4 flex items-center">
+							<label className="block text-gray-700 mr-2">Billable</label>
+							<div
+								className={`w-12 h-6 flex items-center bg-[#3726a662] rounded-full p-1 cursor-pointer `}
+								onClick={() => setIsBillable(!isBillable)}
+								style={isBillable ? { background: 'linear-gradient(to right, #3726a662, transparent)' } : { background: '#3726a662' }}
+							>
+								<div
+									className={`bg-[#3826A6] w-4 h-4 rounded-full shadow-md transform transition-transform ${isBillable ? 'translate-x-6' : 'translate-x-0'}`}
+								/>
+							</div>
+						</div>
+						<div className='flex items-center'>
+							<div className="mb-4 w-[48%] mr-[4%]">
+								<label className="block text-gray-700 mb-1">Start time<span className="text-[#de5505e1] ml-1">*</span></label>
+								<input
+									type="time"
+									value={startTime}
+									onChange={(e) => setStartTime(e.target.value)}
+									className="w-full p-2 border text-[13px] font-bold border-gray-300 rounded-[10px]"
+									required
+								/>
+							</div>
+
+							<div className="mb-4 w-[48%]"><label className="block text-gray-700 mb-1">End time<span className="text-[#de5505e1] ml-1">*</span></label>
+
+								<input
+									type="time"
+									value={endTime}
+									onChange={(e) => setEndTime(e.target.value)}
+									className="w-full p-2 border text-[13px] font-bold border-gray-300 rounded-[10px]"
+									required
+								/>
+							</div>
+						</div>
+
+						<div className="mb-4 flex items-center">
+							<label className="block text-gray-700 mb-1">Added hours: </label>
+							<div
+								className="ml-[10px] p-[10px] flex items-center font-bold border-[#410a504e] rounded-[10px]"
+								style={{ background: 'linear-gradient(to right, #0085c8a4, #410a504e )' }}
+							>
+								<IoIosTimer size={20} className="mr-[10px]" />
+								{timeDifference}
+							</div>
+						</div>
+
+						<div className="mb-4">
+							<label className="block text-gray-700 mb-1">Team<span className="text-[#de5505e1] ml-1">*</span></label>
+							<select
+								value={team}
+								onChange={(e) => setTeam(e.target.value)}
+								className="w-full p-2 border border-gray-300 rounded-[10px] font-bold"
+							>
+								{members?.map((member) => (
+									<option key={member.id} value={member.id}>{member.employee?.user?.firstName}</option>))
+								}
+							</select>
+						</div>
+
+						<div className="mb-4">
+							<label className="block text-gray-700 mb-1">Task<span className="text-[#de5505e1] ml-1">*</span></label>
+							<select
+								value={task}
+								onChange={(e) => setTask(e.target.value)}
+								className="w-full p-2 border border-gray-300 rounded-[10px] font-bold"
+							>
+								{tasks?.map((task) => (
+									<option key={task.id} value={task.id}>{task.title}</option>
+								))}
+							</select>
+						</div>
+
+						<div className="mb-4">
+							<label className="block text-gray-700 mb-1">Description</label>
+							<textarea
+								value={description}
+								placeholder="What worked on?"
+								onChange={(e) => setDescription(e.target.value)}
+								className="w-full p-2 border border-gray-300 rounded-[10px]"
+							/>
+						</div>
+
+						<div className="mb-4">
+							<label className="block text-gray-700 mb-1">Reason</label>
+							<textarea
+								value={reason}
+								onChange={(e) => setReason(e.target.value)}
+								className="w-full p-2 border border-gray-300 rounded-[10px]"
+							/>
+						</div>
+
+						<div className="flex justify-between items-center">
+							<button type="button" className="text-[#3826A6] font-bold p-[12px] rounded-[10px] border-[1px] bo">View timesheet</button>
+							<button type="submit" className="bg-[#3826A6] font-bold min-w-[110px] flex flex-col items-center text-white p-[12px] rounded-[10px]">
+								{loading1 ? <FiLoader size={20} className="animate-spin" /> : "Add time"}
+							</button>
+						</div>
+						<div className="m-4 text-[#ff6a00de]">{errorMsg}</div>
+
+					</form>
+				</Modal>
+			</div>
+		</div >
 	);
 }
 
@@ -363,7 +626,6 @@ function TabsNav({ hook }: { hook: I_TaskFilter }) {
 		</nav>
 	);
 }
-
 /**
  * It renders a divider, a div with a flexbox layout, and filters buttons
  * @returns A React component
@@ -371,7 +633,12 @@ function TabsNav({ hook }: { hook: I_TaskFilter }) {
 export function TaskStatusFilter({ hook, employeeId }: { hook: I_TaskFilter; employeeId: string }) {
 	const [key, setKey] = useState(0);
 	const t = useTranslations();
+	const [dailyPlanTab, setDailyPlanTab] = useState(window.localStorage.getItem('daily-plan-tab') || 'Future Tasks');
+	const { date, setDate } = useDateRange(dailyPlanTab);
 
+	useEffect(() => {
+		setDailyPlanTab(window.localStorage.getItem('daily-plan-tab') || 'Future Tasks');
+	}, [dailyPlanTab]);
 	return (
 		<div className="flex flex-col items-center mt-4 space-x-2 md:justify-between md:flex-row pt-2">
 			<div className="flex flex-wrap justify-center flex-1 space-x-3 md:justify-start">
@@ -404,7 +671,9 @@ export function TaskStatusFilter({ hook, employeeId }: { hook: I_TaskFilter; emp
 				/>
 
 				{hook.tab === 'dailyplan' && <DailyPlanFilter employeeId={employeeId} />}
-
+				{['Future Tasks', 'Past Tasks', 'All Tasks'].includes(dailyPlanTab) && (
+					<TaskDatePickerWithRange date={date} onSelect={(range) => setDate(range)} label="Planned date" />
+				)}
 				<VerticalSeparator />
 
 				<Button className="py-2 md:px-3 px-2 min-w-[6.25rem] rounded-xl h-9" onClick={hook.applyStatusFilder}>
diff --git a/apps/web/lib/features/team-members-kanban-view.tsx b/apps/web/lib/features/team-members-kanban-view.tsx
index 3433236d7..678966836 100644
--- a/apps/web/lib/features/team-members-kanban-view.tsx
+++ b/apps/web/lib/features/team-members-kanban-view.tsx
@@ -30,7 +30,7 @@ export const KanbanView = ({ kanbanBoardTasks, isLoading }: { kanbanBoardTasks:
 	const [columns, setColumn] = useState<any[]>(
 		Object.keys(kanbanBoardTasks).map((key) => {
 			const columnInfo = kanbanColumns.find((item) => item.name === key);
-			return { id: columnInfo?.id, name: key, icon: columnInfo ? columnInfo.fullIconUrl : '',color: columnInfo?.color };
+			return { id: columnInfo?.id, name: key, icon: columnInfo ? columnInfo.fullIconUrl : '', color: columnInfo?.color };
 		})
 	);
 	const fullWidth = useRecoilValue(fullWidthState);
@@ -198,7 +198,9 @@ export const KanbanView = ({ kanbanBoardTasks, isLoading }: { kanbanBoardTasks:
 		<>
 			<DragDropContext onDragEnd={onDragEnd}>
 				{Array.isArray(columns) && columns.length > 0 && (
-					<Droppable droppableId="droppable" type="COLUMN" direction="horizontal">
+					<Droppable
+						droppableId="droppable"
+						type="COLUMN" direction="horizontal">
 						{(provided: DroppableProvided, snapshot: DroppableStateSnapshot) => (
 							<div className="flex flex-col h-auto justify-between w-full ">
 								<div
diff --git a/apps/web/lib/features/team-members-table-view.tsx b/apps/web/lib/features/team-members-table-view.tsx
index 76b8304ca..af2d3d471 100644
--- a/apps/web/lib/features/team-members-table-view.tsx
+++ b/apps/web/lib/features/team-members-table-view.tsx
@@ -73,15 +73,15 @@ const TeamMembersTableView = ({
 	return (
 		<>
 
-				<DataTable
-					isHeader={false}
-					columns={columns as Column<OT_Member>[]}
-					data={sortedTeamMembers}
-					noResultsMessage={{
-						heading: 'No team members found',
-						content: 'Try adjusting your search or filter to find what you’re looking for.'
-					}}
-				/>
+			<DataTable
+				isHeader={false}
+				columns={columns as Column<OT_Member>[]}
+				data={sortedTeamMembers}
+				noResultsMessage={{
+					heading: 'No team members found',
+					content: 'Try adjusting your search or filter to find what you’re looking for.'
+				}}
+			/>
 			<Invite />
 		</>
 	);
diff --git a/apps/web/lib/features/team/user-team-block/task-info.tsx b/apps/web/lib/features/team/user-team-block/task-info.tsx
index b92fd4543..93ab87cdb 100644
--- a/apps/web/lib/features/team/user-team-block/task-info.tsx
+++ b/apps/web/lib/features/team/user-team-block/task-info.tsx
@@ -1,8 +1,7 @@
-import React from 'react';
 import { I_TeamMemberCardHook, I_TMCardTaskEditHook } from '@app/hooks';
 import { IClassName } from '@app/interfaces';
 import { clsxm } from '@app/utils';
-import { TaskAllStatusTypes, TaskInput, TaskNameInfoDisplay } from 'lib/features';
+import { FilterTabs, TaskAllStatusTypes, TaskInput, TaskNameInfoDisplay } from 'lib/features';
 import { useRouter } from 'next/navigation';
 import { useTranslations } from 'next-intl';
 
@@ -10,33 +9,49 @@ type Props = IClassName & {
 	edition: I_TMCardTaskEditHook;
 	memberInfo: I_TeamMemberCardHook;
 	publicTeam?: boolean;
+	tab?: 'default' | 'unassign' | 'dailyplan';
+	dayPlanTab?: FilterTabs;
 };
 
-export function TaskInfo({ className, memberInfo, edition, publicTeam }: Props) {
+export function TaskInfo({ className, memberInfo, edition, publicTeam, tab, dayPlanTab }: Props) {
 	return (
 		<div className={clsxm('h-full flex flex-col items-start justify-between gap-[1.0625rem]', className)}>
 			{/* task */}
 			<div className={clsxm('w-full h-10', edition.editMode ? [''] : ['overflow-hidden'])}>
 				{edition.task && (
-					<TaskDetailAndEdition memberInfo={memberInfo} edition={edition} publicTeam={publicTeam} />
+					<TaskDetailAndEdition
+						memberInfo={memberInfo}
+						edition={edition}
+						publicTeam={publicTeam}
+						tab={tab}
+						dayPlanTab={dayPlanTab}
+					/>
 				)}
 				{!edition.task && <div className="text-center">--</div>}
 			</div>
 
-			{edition.task && <TaskAllStatusTypes showStatus={true} task={edition.task} />}
+			{edition.task && (
+				<TaskAllStatusTypes showStatus={true} task={edition.task} tab={tab} dayPlanTab={dayPlanTab} />
+			)}
 			{!edition.task && <div className="text-center self-center">--</div>}
 		</div>
 	);
 }
 
-export function TaskBlockInfo({ className, memberInfo, edition, publicTeam }: Props) {
+export function TaskBlockInfo({ className, memberInfo, edition, publicTeam, tab, dayPlanTab }: Props) {
 	const t = useTranslations();
 	return (
 		<div className={clsxm('h-full flex flex-col items-start justify-between gap-[1.0625rem]', className)}>
 			{/* task */}
 			<div className={clsxm('w-full h-12', edition.editMode ? [''] : ['overflow-hidden'])}>
 				{edition.task && (
-					<TaskDetailAndEdition memberInfo={memberInfo} edition={edition} publicTeam={publicTeam} />
+					<TaskDetailAndEdition
+						memberInfo={memberInfo}
+						edition={edition}
+						publicTeam={publicTeam}
+						tab={tab}
+						dayPlanTab={dayPlanTab}
+					/>
 				)}
 				{!edition.task && (
 					<div className="text-center">
@@ -45,7 +60,15 @@ export function TaskBlockInfo({ className, memberInfo, edition, publicTeam }: Pr
 				)}
 			</div>
 
-			{edition.task && <TaskAllStatusTypes showStatus={true} task={edition.task} toBlockCard={true} />}
+			{edition.task && (
+				<TaskAllStatusTypes
+					showStatus={true}
+					task={edition.task}
+					toBlockCard={true}
+					tab={tab}
+					dayPlanTab={dayPlanTab}
+				/>
+			)}
 			{!edition.task && <div className="text-center self-center text-white dark:text-dark">_</div>}
 		</div>
 	);
diff --git a/apps/web/lib/features/team/user-team-card/index.tsx b/apps/web/lib/features/team/user-team-card/index.tsx
index 5dbcb5f38..88bf8b117 100644
--- a/apps/web/lib/features/team/user-team-card/index.tsx
+++ b/apps/web/lib/features/team/user-team-card/index.tsx
@@ -195,13 +195,15 @@ export function UserTeamCard({
 							memberInfo={memberInfo}
 							className="flex-1 lg:px-4 px-2 overflow-y-hidden"
 							publicTeam={publicTeam}
+							tab="default"
 						/>
 
 						{isManagerConnectedUser != 1 ? (
 							<p
 								className="flex cursor-pointer w-8 h-8 border dark:border-gray-800 rounded justify-center items-center text-center"
 								onClick={() => {
-									showActivityFilter('TICKET', memberInfo.member ?? null); setUserDetailAccordion('');
+									showActivityFilter('TICKET', memberInfo.member ?? null);
+									setUserDetailAccordion('');
 								}}
 							>
 								{!showActivity ? (
@@ -254,7 +256,8 @@ export function UserTeamCard({
 					<div className="absolute right-2">{menu}</div>
 				</div>
 				{userDetailAccordion == memberInfo.memberUser?.id &&
-				memberInfo.memberUser.id == profile.userProfile?.id && !showActivity? (
+				memberInfo.memberUser.id == profile.userProfile?.id &&
+				!showActivity ? (
 					<div className="h-96 overflow-y-auto">
 						{canSeeActivity && (
 							<Container fullWidth={fullWidth} className="py-8">
@@ -300,7 +303,13 @@ export function UserTeamCard({
 				</div>
 
 				<div className="flex flex-wrap items-start justify-between pb-4 border-b">
-					<TaskInfo edition={taskEdition} memberInfo={memberInfo} className="px-4" publicTeam={publicTeam} />
+					<TaskInfo
+						edition={taskEdition}
+						memberInfo={memberInfo}
+						className="px-4"
+						publicTeam={publicTeam}
+						tab="default"
+					/>
 				</div>
 
 				<div className="flex justify-between mt-4 mb-4 space-x-5">
diff --git a/apps/web/lib/features/team/user-team-card/task-info.tsx b/apps/web/lib/features/team/user-team-card/task-info.tsx
index b96965fe4..36b291c9d 100644
--- a/apps/web/lib/features/team/user-team-card/task-info.tsx
+++ b/apps/web/lib/features/team/user-team-card/task-info.tsx
@@ -1,16 +1,18 @@
 import { I_TeamMemberCardHook, I_TMCardTaskEditHook } from '@app/hooks';
 import { IClassName } from '@app/interfaces';
 import { clsxm } from '@app/utils';
-import { TaskAllStatusTypes, TaskInput, TaskNameInfoDisplay } from 'lib/features';
+import { FilterTabs, TaskAllStatusTypes, TaskInput, TaskNameInfoDisplay } from 'lib/features';
 import { useRouter } from 'next/navigation';
 
 type Props = IClassName & {
 	edition: I_TMCardTaskEditHook;
 	memberInfo: I_TeamMemberCardHook;
 	publicTeam?: boolean;
+	dayPlanTab?: FilterTabs;
+	tab?: 'default' | 'unassign' | 'dailyplan';
 };
 
-export function TaskInfo({ className, memberInfo, edition, publicTeam }: Props) {
+export function TaskInfo({ className, memberInfo, edition, publicTeam, tab, dayPlanTab }: Props) {
 	return (
 		<>
 			{!edition.task && <div className="w-full  justify-center text-center self-center">--</div>}
@@ -30,11 +32,19 @@ export function TaskInfo({ className, memberInfo, edition, publicTeam }: Props)
 					)}
 				>
 					{edition.task && (
-						<TaskDetailAndEdition memberInfo={memberInfo} edition={edition} publicTeam={publicTeam} />
+						<TaskDetailAndEdition
+							memberInfo={memberInfo}
+							edition={edition}
+							publicTeam={publicTeam}
+							tab={tab}
+							dayPlanTab={dayPlanTab}
+						/>
 					)}
 				</div>
 
-				{edition.task && <TaskAllStatusTypes showStatus={true} task={edition.task} />}
+				{edition.task && (
+					<TaskAllStatusTypes showStatus={true} task={edition.task} tab={tab} dayPlanTab={dayPlanTab} />
+				)}
 			</div>
 			{!edition.task && <div className="w-full justify-center text-center self-center">--</div>}
 		</>
diff --git a/apps/web/lib/features/timer/timer.tsx b/apps/web/lib/features/timer/timer.tsx
index d6245f893..fce5dc2ce 100644
--- a/apps/web/lib/features/timer/timer.tsx
+++ b/apps/web/lib/features/timer/timer.tsx
@@ -154,6 +154,7 @@ export function Timer({ className }: IClassName) {
 					open={isOpen}
 					plan={hasPlan}
 					startTimer={startTimer}
+					hasPlan={!!hasPlan}
 				/>
 			</div>
 		</div>
diff --git a/apps/web/lib/features/user-profile-plans.tsx b/apps/web/lib/features/user-profile-plans.tsx
index 9154e1f8a..6f1c70bf2 100644
--- a/apps/web/lib/features/user-profile-plans.tsx
+++ b/apps/web/lib/features/user-profile-plans.tsx
@@ -1,5 +1,4 @@
 'use client';
-
 import { useEffect, useState } from 'react';
 import { useRecoilValue } from 'recoil';
 import { useCanSeeActivityScreen, useDailyPlan, useUserProfilePage } from '@app/hooks';
@@ -20,8 +19,11 @@ import { IoCalendarOutline } from 'react-icons/io5';
 import ViewsHeaderTabs from './task/daily-plan/views-header-tabs';
 import { dailyPlanViewHeaderTabs } from '@app/stores/header-tabs';
 import TaskBlockCard from './task/task-block-card';
+import { useFilterDateRange } from '@app/hooks/useFilterDateRange';
+import { handleDragAndDrop } from '@app/helpers/drag-and-drop';
+import { DragDropContext, Droppable, Draggable, DroppableProvided, DroppableStateSnapshot } from 'react-beautiful-dnd';
 
-type FilterTabs = 'Today Tasks' | 'Future Tasks' | 'Past Tasks' | 'All Tasks' | 'Outstanding';
+export type FilterTabs = 'Today Tasks' | 'Future Tasks' | 'Past Tasks' | 'All Tasks' | 'Outstanding';
 type FilterOutstanding = 'ALL' | 'DATE';
 
 export function UserProfilePlans() {
@@ -38,10 +40,13 @@ export function UserProfilePlans() {
 	const profile = useUserProfilePage();
 	const { todayPlan, futurePlans, pastPlans, outstandingPlans, sortedPlans, profileDailyPlans } = useDailyPlan();
 	const fullWidth = useRecoilValue(fullWidthState);
-
 	const [currentTab, setCurrentTab] = useState<FilterTabs>(defaultTab || 'Today Tasks');
 	const [currentOutstanding, setCurrentOutstanding] = useState<FilterOutstanding>(defaultOutstanding || 'ALL');
 
+	const { filteredFuturePlanData: filterFuturePlanData } = useFilterDateRange(futurePlans, 'future');
+	const { filteredPastPlanData: filterPastPlanData } = useFilterDateRange(pastPlans, 'past');
+	const { filteredAllPlanData: filterAllPlanData } = useFilterDateRange(sortedPlans, 'all');
+
 	const screenOutstanding = {
 		ALL: <OutstandingAll profile={profile} />,
 		DATE: <OutstandingFilterDate profile={profile} />
@@ -88,9 +93,9 @@ export function UserProfilePlans() {
 													)}
 												>
 													{filter === 'Today Tasks' && todayPlan.length}
-													{filter === 'Future Tasks' && futurePlans.length}
-													{filter === 'Past Tasks' && pastPlans.length}
-													{filter === 'All Tasks' && sortedPlans.length}
+													{filter === 'Future Tasks' && filterFuturePlanData?.length}
+													{filter === 'Past Tasks' && filterPastPlanData?.length}
+													{filter === 'All Tasks' && filterAllPlanData?.length}
 													{filter === 'Outstanding' && outstandingPlans.length}
 												</span>
 											</div>
@@ -132,131 +137,183 @@ export function UserProfilePlans() {
 		</div>
 	);
 }
-
+/**
+ *
+ *
+ * @param {{ profile: any; currentTab?: FilterTabs }} { profile, currentTab = 'All Tasks' }
+ * @return {*}
+ */
 function AllPlans({ profile, currentTab = 'All Tasks' }: { profile: any; currentTab?: FilterTabs }) {
 	// Filter plans
 	let filteredPlans: IDailyPlan[] = [];
 	const { deleteDailyPlan, deleteDailyPlanLoading, sortedPlans, todayPlan } = useDailyPlan();
 	const [popupOpen, setPopupOpen] = useState(false);
+	const [currentDeleteIndex, setCurrentDeleteIndex] = useState(0);
 
 	filteredPlans = sortedPlans;
 	if (currentTab === 'Today Tasks') filteredPlans = todayPlan;
 
 	const canSeeActivity = useCanSeeActivityScreen();
-
+	const { filteredAllPlanData: filterAllPlanData } = useFilterDateRange(filteredPlans, 'all');
+	const filterPlans: IDailyPlan[] = currentTab === 'All Tasks' ? filterAllPlanData : filteredPlans;
 	const view = useRecoilValue(dailyPlanViewHeaderTabs);
+	const [plans, setPlans] = useState<IDailyPlan[]>(filterPlans);
 
 	return (
 		<div className="flex flex-col gap-6">
-			{filteredPlans?.length > 0 ? (
-				<Accordion
-					type="multiple"
-					className="text-sm"
-					defaultValue={
-						currentTab === 'Today Tasks'
-							? [new Date().toISOString().split('T')[0]]
-							: [filteredPlans?.map((plan) => new Date(plan.date).toISOString().split('T')[0])[0]]
-					}
-				>
-					{filteredPlans?.map((plan) => (
-						<AccordionItem
-							value={plan.date.toString().split('T')[0]}
-							key={plan.id}
-							className="dark:border-slate-600 !border-none"
-						>
-							<AccordionTrigger className="!min-w-full text-start hover:no-underline">
-								<div className="flex items-center justify-between gap-3 w-full">
-									<div className="text-lg min-w-max">
-										{formatDayPlanDate(plan.date.toString())} ({plan.tasks?.length})
+			{Array.isArray(plans) && plans?.length > 0 ? (
+				<DragDropContext onDragEnd={(result) => handleDragAndDrop(result, plans, setPlans)}>
+					<Accordion
+						type="multiple"
+						className="text-sm"
+						defaultValue={
+							currentTab === 'Today Tasks'
+								? [new Date().toISOString().split('T')[0]]
+								: [plans?.map((plan) => new Date(plan.date).toISOString().split('T')[0])[0]]
+						}
+					>
+						{plans.map((plan, index) => (
+							<AccordionItem
+								value={plan.date.toString().split('T')[0]}
+								key={plan.id}
+								className="dark:border-slate-600 !border-none"
+							>
+								<AccordionTrigger className="!min-w-full text-start hover:no-underline">
+									<div className="flex items-center justify-between gap-3 w-full">
+										<div className="text-lg min-w-max">
+											{formatDayPlanDate(plan.date.toString())} ({plan.tasks?.length})
+										</div>
+										<HorizontalSeparator />
 									</div>
-									<HorizontalSeparator />
-								</div>
-							</AccordionTrigger>
-							<AccordionContent className="bg-light--theme border-none dark:bg-dark--theme">
-								{/* Plan header */}
-								<PlanHeader plan={plan} planMode={currentTab} />
-
-								{/* Plan tasks list */}
-								<ul
-									className={clsxm(
-										view === 'CARDS' && 'flex-col',
-										view === 'TABLE' && 'flex-wrap',
-										'flex gap-2 pb-[1.5rem]',
-										view === 'BLOCKS' && 'overflow-x-scroll'
-									)}
-								>
-									{plan.tasks?.map((task) =>
-										view === 'CARDS' ? (
-											<TaskCard
-												key={`${task.id}${plan.id}`}
-												isAuthUser={true}
-												activeAuthTask={true}
-												viewType={'dailyplan'}
-												task={task}
-												profile={profile}
-												type="HORIZONTAL"
-												taskBadgeClassName={`rounded-sm`}
-												taskTitleClassName="mt-[0.0625rem]"
-												planMode={currentTab === 'Today Tasks' ? 'Today Tasks' : undefined}
-												plan={plan}
-											/>
-										) : (
-											<TaskBlockCard key={task.id} task={task} />
-										)
-									)}
-								</ul>
-
-								{/* Delete Plan */}
-								{currentTab === 'Today Tasks' && (
-									<>
-										{canSeeActivity ? (
-											<div className="flex justify-end">
-												<AlertPopup
-													open={popupOpen}
-													buttonOpen={
-														//button open popup
-														<Button
-															onClick={() => setPopupOpen(true)}
-															variant="outline"
-															className="px-4 py-2 text-sm font-medium text-red-600 border border-red-600 rounded-md bg-light--theme-light dark:!bg-dark--theme-light"
-														>
-															Delete this plan
-														</Button>
-													}
-												>
-													{/*button confirm*/}
-													<Button
-														disabled={deleteDailyPlanLoading}
-														onClick={() => deleteDailyPlan(plan.id ?? '')}
-														variant="destructive"
-														className="flex items-center justify-center px-4 py-2 text-sm font-medium text-white bg-red-600 rounded-md hover:bg-red-700 disabled:bg-red-400"
-													>
-														{deleteDailyPlanLoading && (
-															<ReloadIcon className="animate-spin mr-2 h-4 w-4" />
+								</AccordionTrigger>
+								<AccordionContent className="bg-light--theme border-none dark:bg-dark--theme">
+									<PlanHeader plan={plan} planMode={currentTab as any} />
+									<Droppable
+										droppableId={plan.id as string}
+										key={plan.id}
+										type="task"
+										direction={view === 'CARDS' ? 'vertical' : 'horizontal'}
+									>
+										{(provided: DroppableProvided, snapshot: DroppableStateSnapshot) => (
+											<ul
+												ref={provided.innerRef}
+												{...provided.droppableProps}
+												className={clsxm(
+													view === 'CARDS' && 'flex-col',
+													view === 'TABLE' && 'flex-wrap',
+													'flex gap-2 pb-[1.5rem]',
+													view === 'BLOCKS' && 'overflow-x-scroll',
+													snapshot.isDraggingOver ? 'lightblue' : '#F7F7F8'
+												)}
+											>
+												{plan.tasks?.map((task, index) =>
+													view === 'CARDS' ? (
+														<Draggable key={task.id} draggableId={task.id} index={index}>
+															{(provided) => (
+																<div
+																	ref={provided.innerRef}
+																	{...provided.draggableProps}
+																	{...provided.dragHandleProps}
+																	style={{
+																		...provided.draggableProps.style,
+																		marginBottom: 8
+																	}}
+																>
+																	<TaskCard
+																		isAuthUser={true}
+																		activeAuthTask={true}
+																		viewType={'dailyplan'}
+																		task={task}
+																		profile={profile}
+																		type="HORIZONTAL"
+																		taskBadgeClassName={`rounded-sm`}
+																		taskTitleClassName="mt-[0.0625rem]"
+																		planMode={
+																			currentTab === 'Today Tasks'
+																				? 'Today Tasks'
+																				: undefined
+																		}
+																		plan={plan}
+																	/>
+																</div>
+															)}
+														</Draggable>
+													) : (
+														<Draggable key={task.id} draggableId={task.id} index={index}>
+															{(provided) => (
+																<div
+																	ref={provided.innerRef}
+																	{...provided.draggableProps}
+																	{...provided.dragHandleProps}
+																	style={{
+																		...provided.draggableProps.style,
+																		marginBottom: 8
+																	}}
+																>
+																	<TaskBlockCard task={task} />
+																</div>
+															)}
+														</Draggable>
+													)
+												)}
+												<>{provided.placeholder}</>
+												{currentTab === 'Today Tasks' && (
+													<>
+														{canSeeActivity ? (
+															<div className="flex justify-end">
+																<AlertPopup
+																	open={currentDeleteIndex === index && popupOpen}
+																	buttonOpen={
+																		//button open popup
+																		<Button
+																			onClick={() => {
+																				setCurrentDeleteIndex(index);
+																				setPopupOpen((prev) => !prev);
+																			}}
+																			variant="outline"
+																			className="px-4 py-2 text-sm font-medium text-red-600 border border-red-600 rounded-md bg-light--theme-light dark:!bg-dark--theme-light"
+																		>
+																			Delete this plan
+																		</Button>
+																	}
+																>
+																	{/*button confirm*/}
+																	<Button
+																		disabled={deleteDailyPlanLoading}
+																		onClick={() => deleteDailyPlan(plan.id ?? '')}
+																		variant="destructive"
+																		className="flex items-center justify-center px-4 py-2 text-sm font-medium text-white bg-red-600 rounded-md hover:bg-red-700 disabled:bg-red-400"
+																	>
+																		{deleteDailyPlanLoading && (
+																			<ReloadIcon className="animate-spin mr-2 h-4 w-4" />
+																		)}
+																		Delete
+																	</Button>
+																	{/*button cancel*/}
+																	<Button
+																		onClick={() => setPopupOpen(false)}
+																		variant="outline"
+																		className="px-4 py-2 text-sm font-medium text-red-600 border border-red-600 rounded-md bg-light--theme-light dark:!bg-dark--theme-light"
+																	>
+																		Cancel
+																	</Button>
+																</AlertPopup>
+															</div>
+														) : (
+															<></>
 														)}
-														Delete
-													</Button>
-													{/*button cancel*/}
-													<Button
-														onClick={() => setPopupOpen(false)}
-														variant="outline"
-														className="px-4 py-2 text-sm font-medium text-red-600 border border-red-600 rounded-md bg-light--theme-light dark:!bg-dark--theme-light"
-													>
-														Cancel
-													</Button>
-												</AlertPopup>
-											</div>
-										) : (
-											<></>
+													</>
+												)}
+											</ul>
 										)}
-									</>
-								)}
-							</AccordionContent>
-						</AccordionItem>
-					))}
-				</Accordion>
+									</Droppable>
+								</AccordionContent>
+							</AccordionItem>
+						))}
+					</Accordion>
+				</DragDropContext>
 			) : (
-				<EmptyPlans planMode={currentTab} />
+				<EmptyPlans planMode="Past Tasks" />
 			)}
 		</div>
 	);
@@ -265,12 +322,11 @@ function AllPlans({ profile, currentTab = 'All Tasks' }: { profile: any; current
 export function PlanHeader({ plan, planMode }: { plan: IDailyPlan; planMode: FilterTabs }) {
 	const [editTime, setEditTime] = useState<boolean>(false);
 	const [time, setTime] = useState<number>(0);
-
 	const { updateDailyPlan, updateDailyPlanLoading } = useDailyPlan();
 
 	// Get all tasks's estimations time
 	const times =
-		plan.tasks?.map((task) => task.estimate).filter((time): time is number => typeof time === 'number') ?? [];
+		plan.tasks?.map((task) => task?.estimate).filter((time): time is number => typeof time === 'number') ?? [];
 
 	let estimatedTime = 0;
 	if (times.length > 0) estimatedTime = times.reduce((acc, cur) => acc + cur, 0) ?? 0;
diff --git a/apps/web/locales/ar.json b/apps/web/locales/ar.json
index 17e85f377..2b7ff1272 100644
--- a/apps/web/locales/ar.json
+++ b/apps/web/locales/ar.json
@@ -197,7 +197,8 @@
 		"NOT_WORKING": "غير عامل",
 		"WORKING": "يعمل",
 		"PAUSED": "متوقف",
-		"ONLINE": "متصل"
+		"ONLINE": "متصل",
+		"SKIP_ADD_LATER": "أضف لاحقًا"
 	},
 	"hotkeys": {
 		"HELP": "مساعدة",
@@ -231,7 +232,7 @@
 			"OUTSTANDING_NOTIFICATIONS": {
 				"SUBJECT": "لديك",
 				"USER_LABEL": "مهام غير مكتملة، يرجى التحقق منها",
-				"OUTSTANDING_VIEW": "عرض المهام المعلقة",
+				"OUTSTANDING_VIEW": "معلق",
 				"VIEW_BUTTON": "عرض"
 			}
 		},
diff --git a/apps/web/locales/bg.json b/apps/web/locales/bg.json
index 3b43adbba..2186a167a 100644
--- a/apps/web/locales/bg.json
+++ b/apps/web/locales/bg.json
@@ -197,7 +197,8 @@
 		"NOT_WORKING": "Не работи",
 		"WORKING": "Работи",
 		"PAUSED": "Пауза",
-		"ONLINE": "Онлайн"
+		"ONLINE": "Онлайн",
+		"SKIP_ADD_LATER": "Добави по-късно"
 	},
 	"hotkeys": {
 		"HELP": "Помощ",
@@ -231,7 +232,7 @@
 			"OUTSTANDING_NOTIFICATIONS": {
 				"SUBJECT": "Имате",
 				"USER_LABEL": "незавършени задачи, моля, проверете",
-				"OUTSTANDING_VIEW": "Преглед на изчакващите задачи",
+				"OUTSTANDING_VIEW": "Изключителен",
 				"VIEW_BUTTON": "Преглед"
 			}
 		},
diff --git a/apps/web/locales/de.json b/apps/web/locales/de.json
index 1ce0d9d1e..ca856b96d 100644
--- a/apps/web/locales/de.json
+++ b/apps/web/locales/de.json
@@ -197,7 +197,8 @@
 		"NOT_WORKING": "Nicht arbeiten",
 		"WORKING": "Arbeiten",
 		"PAUSED": "Pausiert",
-		"ONLINE": "Online"
+		"ONLINE": "Online",
+		"SKIP_ADD_LATER": "Später hinzufügen"
 	},
 	"hotkeys": {
 		"HELP": "Hilfe",
@@ -231,7 +232,7 @@
 			"OUTSTANDING_NOTIFICATIONS": {
 				"SUBJECT": "Sie haben",
 				"USER_LABEL": "unvollständige Aufgaben, bitte überprüfen",
-				"OUTSTANDING_VIEW": "Ausstehende Ansicht",
+				"OUTSTANDING_VIEW": "Hervorragend",
 				"VIEW_BUTTON": "Ansehen"
 			}
 		},
diff --git a/apps/web/locales/en.json b/apps/web/locales/en.json
index 1dc28e54d..07d45d2fb 100644
--- a/apps/web/locales/en.json
+++ b/apps/web/locales/en.json
@@ -197,7 +197,8 @@
 		"NOT_WORKING": "Not Working",
 		"WORKING": "Working",
 		"PAUSED": "Paused",
-		"ONLINE": "Online"
+		"ONLINE": "Online",
+		"SKIP_ADD_LATER": "Add later"
 	},
 	"hotkeys": {
 		"HELP": "Help",
@@ -229,9 +230,9 @@
 			"CONFIRM_ACCEPT_INVITATION": "Are you sure you want to accept the invitation?",
 			"CONFIRM_REJECT_INVITATION": "Are you sure you want to reject the invitation?",
 			"OUTSTANDING_NOTIFICATIONS": {
-				"SUBJECT": "You've",
+				"SUBJECT": "You have",
 				"USER_LABEL": "uncompleted tasks, please check in",
-				"OUTSTANDING_VIEW": "Outstanding View",
+				"OUTSTANDING_VIEW": "Outstanding",
 				"VIEW_BUTTON": "View"
 			}
 		},
diff --git a/apps/web/locales/es.json b/apps/web/locales/es.json
index 257403ef4..818ac74d5 100644
--- a/apps/web/locales/es.json
+++ b/apps/web/locales/es.json
@@ -197,7 +197,8 @@
 		"NOT_WORKING": "No trabajando",
 		"WORKING": "Trabajando",
 		"PAUSED": "Pausado",
-		"ONLINE": "En línea"
+		"ONLINE": "En línea",
+		"SKIP_ADD_LATER": "Agregar más tarde"
 	},
 	"hotkeys": {
 		"HELP": "Ayuda",
@@ -231,7 +232,7 @@
 			"OUTSTANDING_NOTIFICATIONS": {
 				"SUBJECT": "Tienes",
 				"USER_LABEL": "tareas incompletas, por favor revisa",
-				"OUTSTANDING_VIEW": "Vista pendiente",
+				"OUTSTANDING_VIEW": "Pendiente",
 				"VIEW_BUTTON": "Ver"
 			}
 		},
diff --git a/apps/web/locales/fr.json b/apps/web/locales/fr.json
index 27c226ab1..6cd5044e2 100644
--- a/apps/web/locales/fr.json
+++ b/apps/web/locales/fr.json
@@ -197,7 +197,8 @@
 		"NOT_WORKING": "Non actif",
 		"WORKING": "Actif",
 		"PAUSED": "En pause",
-		"ONLINE": "En ligne"
+		"ONLINE": "En ligne",
+		"SKIP_ADD_LATER": "Ajouter plus tard"
 	},
 	"hotkeys": {
 		"HELP": "Aide",
@@ -231,7 +232,7 @@
 			"OUTSTANDING_NOTIFICATIONS": {
 				"SUBJECT": "Vous avez",
 				"USER_LABEL": "des tâches incomplètes, veuillez vérifier",
-				"OUTSTANDING_VIEW": "Vue des tâches en attente",
+				"OUTSTANDING_VIEW": "En attente",
 				"VIEW_BUTTON": "Voir"
 			}
 		},
diff --git a/apps/web/locales/he.json b/apps/web/locales/he.json
index 17de57399..d89cfbb2d 100644
--- a/apps/web/locales/he.json
+++ b/apps/web/locales/he.json
@@ -197,7 +197,8 @@
 		"NOT_WORKING": "לא עובד",
 		"WORKING": "עובד",
 		"PAUSED": "מושהה",
-		"ONLINE": "מחובר"
+		"ONLINE": "מחובר",
+		"SKIP_ADD_LATER": "הוסף מאוחר יותר"
 	},
 	"hotkeys": {
 		"HELP": "עזרה",
@@ -231,7 +232,7 @@
 			"OUTSTANDING_NOTIFICATIONS": {
 				"SUBJECT": "יש לך",
 				"USER_LABEL": "משימות שלא הושלמו, נא לבדוק",
-				"OUTSTANDING_VIEW": "תצוגה ממתינה",
+				"OUTSTANDING_VIEW": "יוצא דופן",
 				"VIEW_BUTTON": "הצג"
 			}
 		},
diff --git a/apps/web/locales/it.json b/apps/web/locales/it.json
index 93262916f..3c7ff1fc9 100644
--- a/apps/web/locales/it.json
+++ b/apps/web/locales/it.json
@@ -197,7 +197,8 @@
 		"NOT_WORKING": "Non Lavora",
 		"WORKING": "Lavora",
 		"PAUSED": "In Pausa",
-		"ONLINE": "Online"
+		"ONLINE": "Online",
+		"SKIP_ADD_LATER": "Aggiungi dopo"
 	},
 	"hotkeys": {
 		"HELP": "Aiuto",
@@ -231,7 +232,7 @@
 			"OUTSTANDING_NOTIFICATIONS": {
 				"SUBJECT": "Hai",
 				"USER_LABEL": "compiti incompleti, controlla per favore",
-				"OUTSTANDING_VIEW": "Vista delle attività in sospeso",
+				"OUTSTANDING_VIEW": "Eccezionale",
 				"VIEW_BUTTON": "Vedi"
 			}
 		},
diff --git a/apps/web/locales/nl.json b/apps/web/locales/nl.json
index fad47a7c3..f6b88f6da 100644
--- a/apps/web/locales/nl.json
+++ b/apps/web/locales/nl.json
@@ -197,7 +197,8 @@
 		"NOT_WORKING": "Niet aan het werk",
 		"WORKING": "Aan het werk",
 		"PAUSED": "Gepauzeerd",
-		"ONLINE": "Online"
+		"ONLINE": "Online",
+		"SKIP_ADD_LATER": "Later toevoegen"
 	},
 	"hotkeys": {
 		"HELP": "Help",
@@ -231,7 +232,7 @@
 			"OUTSTANDING_NOTIFICATIONS": {
 				"SUBJECT": "Je hebt",
 				"USER_LABEL": "onvoltooide taken, controleer alsjeblieft",
-				"OUTSTANDING_VIEW": "Uitzicht op uitstaande taken",
+				"OUTSTANDING_VIEW": "Uitstekend",
 				"VIEW_BUTTON": "Bekijk"
 			}
 		},
diff --git a/apps/web/locales/pl.json b/apps/web/locales/pl.json
index 1ec6b4080..21ec208c2 100644
--- a/apps/web/locales/pl.json
+++ b/apps/web/locales/pl.json
@@ -197,7 +197,8 @@
 		"NOT_WORKING": "Niepracujący",
 		"WORKING": "Pracujący",
 		"PAUSED": "Wstrzymany",
-		"ONLINE": "Online"
+		"ONLINE": "Online",
+		"SKIP_ADD_LATER": "Dodaj później"
 	},
 	"hotkeys": {
 		"HELP": "Pomoc",
@@ -231,7 +232,7 @@
 			"OUTSTANDING_NOTIFICATIONS": {
 				"SUBJECT": "Masz",
 				"USER_LABEL": "niezakończone zadania, proszę sprawdź",
-				"OUTSTANDING_VIEW": "Widok zadań do wykonania",
+				"OUTSTANDING_VIEW": "Wyjątkowy",
 				"VIEW_BUTTON": "Zobacz"
 			}
 		},
diff --git a/apps/web/locales/pt.json b/apps/web/locales/pt.json
index fef612fbe..3df8aeb73 100644
--- a/apps/web/locales/pt.json
+++ b/apps/web/locales/pt.json
@@ -197,7 +197,8 @@
 		"NOT_WORKING": "Não Trabalhando",
 		"WORKING": "Trabalhando",
 		"PAUSED": "Pausado",
-		"ONLINE": "Online"
+		"ONLINE": "Online",
+		"SKIP_ADD_LATER": "Adicionar depois"
 	},
 	"hotkeys": {
 		"HELP": "Ajuda",
@@ -231,7 +232,7 @@
 			"OUTSTANDING_NOTIFICATIONS": {
 				"SUBJECT": "Você tem",
 				"USER_LABEL": "tarefas não concluídas, por favor verifique",
-				"OUTSTANDING_VIEW": "Visualização de pendências",
+				"OUTSTANDING_VIEW": "Pendências",
 				"VIEW_BUTTON": "Ver"
 			}
 		},
diff --git a/apps/web/locales/ru.json b/apps/web/locales/ru.json
index 51c727994..003e3c5fc 100644
--- a/apps/web/locales/ru.json
+++ b/apps/web/locales/ru.json
@@ -197,7 +197,8 @@
 		"NOT_WORKING": "Не работает",
 		"WORKING": "Работает",
 		"PAUSED": "Приостановлено",
-		"ONLINE": "Онлайн"
+		"ONLINE": "Онлайн",
+		"SKIP_ADD_LATER": "Добавить позже"
 	},
 	"hotkeys": {
 		"HELP": "Помощь",
@@ -231,7 +232,7 @@
 			"OUTSTANDING_NOTIFICATIONS": {
 				"SUBJECT": "У вас есть",
 				"USER_LABEL": "незавершенные задачи, пожалуйста, проверьте",
-				"OUTSTANDING_VIEW": "Просмотр незавершенных задач",
+				"OUTSTANDING_VIEW": "Выдающийся",
 				"VIEW_BUTTON": "Просмотр"
 			}
 		},
diff --git a/apps/web/locales/zh.json b/apps/web/locales/zh.json
index 64d4ea750..fe4fd5a16 100644
--- a/apps/web/locales/zh.json
+++ b/apps/web/locales/zh.json
@@ -197,7 +197,8 @@
 		"NOT_WORKING": "不工作",
 		"WORKING": "工作",
 		"PAUSED": "暂停",
-		"ONLINE": "在线"
+		"ONLINE": "在线",
+		"SKIP_ADD_LATER": "稍后添加"
 	},
 	"hotkeys": {
 		"HELP": "帮助",
@@ -231,7 +232,7 @@
 			"OUTSTANDING_NOTIFICATIONS": {
 				"SUBJECT": "您有",
 				"USER_LABEL": "未完成的任务，请检查",
-				"OUTSTANDING_VIEW": "待处理视图",
+				"OUTSTANDING_VIEW": "突出",
 				"VIEW_BUTTON": "查看"
 			}
 		},
diff --git a/apps/web/tsconfig.json b/apps/web/tsconfig.json
index ea316f538..9e750b5ec 100644
--- a/apps/web/tsconfig.json
+++ b/apps/web/tsconfig.json
@@ -2,7 +2,12 @@
 	"extends": "../../tsconfig.base.json",
 	"compilerOptions": {
 		"target": "ES2015",
-		"lib": ["dom", "dom.iterable", "esnext", "es2015"],
+		"lib": [
+			"dom",
+			"dom.iterable",
+			"esnext",
+			"es2015"
+		],
 		"allowJs": true,
 		"skipLibCheck": true,
 		"strict": true,
@@ -16,8 +21,12 @@
 		"jsx": "preserve",
 		"baseUrl": ".",
 		"paths": {
-			"@components/*": ["./components/*"],
-			"@app/*": ["./app/*"]
+			"@components/*": [
+				"./components/*"
+			],
+			"@app/*": [
+				"./app/*"
+			]
 		},
 		"incremental": true,
 		"plugins": [
@@ -26,6 +35,15 @@
 			}
 		]
 	},
-	"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "**/*.js", "**/*.jsx", ".next/types/**/*.ts"],
-	"exclude": ["node_modules"]
+	"include": [
+		"next-env.d.ts",
+		"**/*.ts",
+		"**/*.tsx",
+		"**/*.js",
+		"**/*.jsx",
+		".next/types/**/*.ts"
+	],
+	"exclude": [
+		"node_modules"
+	]
 }