diff --git a/apps/web/app/[locale]/timesheet/[memberId]/components/AddTaskModal.tsx b/apps/web/app/[locale]/timesheet/[memberId]/components/AddTaskModal.tsx
index 3893337aa..7b9159c14 100644
--- a/apps/web/app/[locale]/timesheet/[memberId]/components/AddTaskModal.tsx
+++ b/apps/web/app/[locale]/timesheet/[memberId]/components/AddTaskModal.tsx
@@ -12,6 +12,7 @@ import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@c
 import { DatePickerFilter } from './TimesheetFilterDate';
 import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@components/ui/select';
 import { useTimesheet } from '@/app/hooks/features/useTimesheet';
+import { toUTC } from '@/app/helpers';
 export interface IAddTaskModalProps {
     isOpen: boolean;
     closeModal: () => void;
@@ -22,6 +23,18 @@ interface Shift {
     totalHours: string;
     dateFrom: Date | string,
 }
+interface FormState {
+    isBillable: boolean;
+    notes: string;
+    projectId: string;
+    taskId: string;
+    employeeId: string;
+    shifts: {
+        dateFrom: Date;
+        startTime: string;
+        endTime: string;
+    }[];
+}
 
 export function AddTaskModal({ closeModal, isOpen }: IAddTaskModalProps) {
     const { tasks } = useTeamTasks();
@@ -32,6 +45,7 @@ export function AddTaskModal({ closeModal, isOpen }: IAddTaskModalProps) {
 
     const timeOptions = generateTimeOptions(5);
     const t = useTranslations();
+
     const [formState, setFormState] = React.useState({
         notes: '',
         isBillable: true,
@@ -77,7 +91,12 @@ export function AddTaskModal({ closeModal, isOpen }: IAddTaskModalProps) {
         },
     ];
 
-    const handleAddTimesheet = async () => {
+    const createUtcDate = (baseDate: Date, time: string): Date => {
+        const [hours, minutes] = time.split(':').map(Number);
+        return new Date(Date.UTC(baseDate.getFullYear(), baseDate.getMonth(), baseDate.getDate(), hours, minutes));
+    };
+
+    const handleAddTimesheet = async (formState: FormState) => {
         const payload = {
             isBillable: formState.isBillable,
             description: formState.notes,
@@ -85,29 +104,40 @@ export function AddTaskModal({ closeModal, isOpen }: IAddTaskModalProps) {
             logType: TimeLogType.MANUAL as any,
             source: TimerSource.BROWSER as any,
             taskId: formState.taskId,
-            employeeId: formState.employeeId
-        }
-        const createUtcDate = (baseDate: Date, time: string): Date => {
-            const [hours, minutes] = time.split(':').map(Number);
-            return new Date(Date.UTC(baseDate.getFullYear(), baseDate.getMonth(), baseDate.getDate(), hours, minutes));
+            employeeId: formState.employeeId,
+            organizationContactId: null || "",
+            organizationTeamId: null,
         };
-
         try {
-            await Promise.all(formState.shifts.map(async (shift) => {
-                const baseDate = shift.dateFrom instanceof Date ? shift.dateFrom : new Date(shift.dateFrom ?? new Date());
-                const startedAt = createUtcDate(baseDate, shift.startTime.toString().slice(0, 5));
-                const stoppedAt = createUtcDate(baseDate, shift.endTime.toString().slice(0, 5));
-                await createTimesheet({
-                    ...payload,
-                    startedAt,
-                    stoppedAt,
-                });
-            }));
-            closeModal();
+            if (!formState.shifts || formState.shifts.length === 0) {
+                throw new Error('No shifts provided.');
+            }
+            await Promise.all(
+                formState.shifts.map(async (shift) => {
+                    if (!shift.dateFrom || !shift.startTime || !shift.endTime) {
+                        throw new Error('Incomplete shift data.');
+                    }
+
+                    const baseDate = shift.dateFrom instanceof Date ? shift.dateFrom : new Date(shift.dateFrom);
+                    const start = createUtcDate(baseDate, shift.startTime);
+                    const end = createUtcDate(baseDate, shift.endTime);
+                    const startedAt = toUTC(start).toISOString();
+                    const stoppedAt = toUTC(end).toISOString();
+                    if (stoppedAt <= startedAt) {
+                        throw new Error('End time must be after start time.');
+                    }
+                    await createTimesheet({
+                        ...payload,
+                        startedAt,
+                        stoppedAt,
+                    });
+                })
+            );
+            console.log('Timesheets successfully created.');
         } catch (error) {
             console.error('Failed to create timesheet:', error);
         }
-    }
+    };
 
     return (
         <Modal
@@ -152,13 +182,14 @@ export function AddTaskModal({ closeModal, isOpen }: IAddTaskModalProps) {
                         <span className="text-[#de5505e1] ml-1">*</span>:
                     </label>
                     <CustomSelect
-                        classNameGroup='max-h-[40vh] '
+                        classNameGroup='max-h-[40vh] !text-white '
                         ariaLabel='Task issues'
-                        className='w-full font-medium'
+                        className='w-full font-medium text-white'
                         options={activeTeam?.members as any}
                         onChange={(value: any) => updateFormState('employeeId', value.id)}
                         renderOption={(option: any) => (
                             <div className="flex items-center gap-x-2">
+                                <img className='h-6 w-6 rounded-full' src={option.employee.user.imageUrl} />
                                 <span>{option.employee.fullName}</span>
                             </div>
                         )}
@@ -235,7 +266,7 @@ export function AddTaskModal({ closeModal, isOpen }: IAddTaskModalProps) {
                     </button>
                     <button
                         disabled={loadingCreateTimesheet}
-                        onClick={handleAddTimesheet}
+                        onClick={() => handleAddTimesheet(formState as any)}
                         type="submit"
                         className={clsxm(
                             'bg-primary dark:bg-primary-light h-[2.3rem] w-[5.5rem] justify-center font-normal flex items-center text-white px-2 rounded-lg',
@@ -321,7 +352,7 @@ const OptimizedAccordion = ({ setShifts, shifts, timeOptions, t }: {
 
     const handleAddShift = () => {
         setShifts([...shifts,
-        { startTime: '', endTime: '', totalHours: '00:00h', dateFrom: new Date() },]);
+        { startTime: '', endTime: '', totalHours: '00:00:00 h', dateFrom: new Date() },]);
     };
 
     const handleRemoveShift = (index: number) => {
@@ -329,13 +360,7 @@ const OptimizedAccordion = ({ setShifts, shifts, timeOptions, t }: {
         setShifts(updatedShifts);
     };
 
-    const convertMinutesToTime = (minutes: number): string => {
-        const hours = Math.floor(minutes / 60);
-        const mins = minutes % 60;
-        const period = hours >= 12 ? 'PM' : 'AM';
-        const formattedHours = hours % 12 || 12;
-        return `${String(formattedHours).padStart(2, '0')}:${String(mins).padStart(2, '0')} ${period}`;
-    };
+
 
     const handleShiftChange = (index: number, field: keyof Shift, value: string) => {
         const updatedShifts = [...shifts];
@@ -346,11 +371,7 @@ const OptimizedAccordion = ({ setShifts, shifts, timeOptions, t }: {
 
             if (!startTime || !endTime) return;
 
-            if (startTime === endTime) {
-                const startMinutes = convertToMinutesHour(startTime);
-                updatedShifts[index].endTime = convertMinutesToTime(startMinutes + 5);
-                return;
-            }
+
             if (convertToMinutesHour(startTime) >= convertToMinutesHour(endTime)) {
                 return;
             }
@@ -445,7 +466,7 @@ const ShiftManagement = (
                     <ShiftTimingSelect
                         label="Start"
                         timeOptions={timeOptions}
-                        placeholder="00:00"
+                        placeholder="00:00:00"
                         className="bg-[#30B3661A]"
                         value={value.startTime}
                         onChange={(value) => onChange(index, 'startTime', value)}
@@ -453,7 +474,7 @@ const ShiftManagement = (
                     <ShiftTimingSelect
                         label="End"
                         timeOptions={timeOptions}
-                        placeholder="00:00"
+                        placeholder="00:00:00"
                         className="bg-[#DA27271A]"
                         value={value.endTime}
                         onChange={(value) => onChange(index, 'endTime', value)}
diff --git a/apps/web/app/helpers/date.ts b/apps/web/app/helpers/date.ts
index 436b6c5c4..c384f5fd9 100644
--- a/apps/web/app/helpers/date.ts
+++ b/apps/web/app/helpers/date.ts
@@ -225,3 +225,16 @@ export const formatDate = (dateStr: string | Date): string => {
 		return '';
 	}
 }
+
+
+export function toLocal(date: string | Date | moment.Moment): moment.Moment {
+	const localDate = moment(date);
+	if (!localDate.isValid()) {
+		throw new Error('Invalid date provided to toUTC');
+	}
+	return localDate.utc();
+}
+
+export function toUTC(date: string | Date | moment.Moment): moment.Moment {
+	return moment(date).utc();
+}
diff --git a/apps/web/app/hooks/features/useTimelogFilterOptions.ts b/apps/web/app/hooks/features/useTimelogFilterOptions.ts
index d717d0ebb..995992ea4 100644
--- a/apps/web/app/hooks/features/useTimelogFilterOptions.ts
+++ b/apps/web/app/hooks/features/useTimelogFilterOptions.ts
@@ -36,7 +36,7 @@ export function useTimelogFilterOptions() {
             const hour12 = hour24 % 12 || 12; // Convert to 12-hour format
             const minutes = (totalMinutes % 60).toString().padStart(2, '0');
             const period = hour24 < 12 ? 'AM' : 'PM'; // Determine AM/PM
-            return `${hour12.toString().padStart(2, '0')}:${minutes} ${period}`;
+            return `${hour12.toString().padStart(2, '0')}:${minutes}:00 ${period}`;
         });
     };
 
diff --git a/apps/web/lib/features/integrations/calendar/table-time-sheet.tsx b/apps/web/lib/features/integrations/calendar/table-time-sheet.tsx
index 7a9c662ec..58a046f88 100644
--- a/apps/web/lib/features/integrations/calendar/table-time-sheet.tsx
+++ b/apps/web/lib/features/integrations/calendar/table-time-sheet.tsx
@@ -1,18 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import {
-	ColumnDef,
-	ColumnFiltersState,
-	SortingState,
-	VisibilityState,
-	getCoreRowModel,
-	getFilteredRowModel,
-	getPaginationRowModel,
-	getSortedRowModel,
-	useReactTable
-} from '@tanstack/react-table';
-import { ArrowUpDownIcon, MoreHorizontal } from 'lucide-react';
+import { MoreHorizontal } from 'lucide-react';
 import { Button } from '@components/ui/button';
 import {
 	DropdownMenu,
@@ -35,14 +24,10 @@ import {
 	SelectValue
 } from '@components/ui/select';
 import {
-	MdKeyboardDoubleArrowLeft,
-	MdKeyboardDoubleArrowRight,
-	MdKeyboardArrowLeft,
-	MdKeyboardArrowRight,
 	MdKeyboardArrowUp,
 	MdKeyboardArrowDown
 } from 'react-icons/md';
-import { ConfirmStatusChange, StatusBadge, statusOptions, dataSourceTimeSheet, TimeSheet } from '.';
+import { ConfirmStatusChange, statusOptions } from '.';
 import { useModal, useTimelogFilterOptions } from '@app/hooks';
 import { Checkbox } from '@components/ui/checkbox';
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@components/ui/accordion';
@@ -67,94 +52,6 @@ import { IUser, TimesheetLog, TimesheetStatus } from '@/app/interfaces';
 import { toast } from '@components/ui/use-toast';
 import { ToastAction } from '@components/ui/toast';
 
-export const columns: ColumnDef<TimeSheet>[] = [
-	{
-		enableHiding: false,
-		id: 'select',
-		size: 50,
-		header: ({ table }) => (
-			<div className="flex items-center gap-x-4">
-				<Checkbox
-					checked={table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate')}
-					onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
-					aria-label="Select all"
-				/>
-				<span>Task</span>
-			</div>
-		),
-		cell: ({ row }) => (
-			<div className="flex items-center gap-x-4 w-full max-w-[640px]">
-				<Checkbox
-					checked={row.getIsSelected()}
-					onCheckedChange={(value) => row.toggleSelected(!!value)}
-					aria-label="Select row"
-				/>
-				<span className="capitalize !text-sm break-words whitespace-break-spaces sm:text-base !truncate !overflow-hidden">
-					{row.original.task}
-				</span>
-			</div>
-		)
-	},
-	{
-		accessorKey: 'name',
-		header: ({ column }) => (
-			<Button
-				variant="ghost"
-				onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
-				className="w-full text-sm text-center sm:text-base"
-			>
-				Project
-				<ArrowUpDownIcon className="w-4 h-4 ml-2" />
-			</Button>
-		),
-		cell: ({ row }) => <TaskDetails description={row.original.description} name={row.original.name} />
-	},
-	{
-		accessorKey: 'employee',
-		header: ({ column }) => (
-			<Button
-				variant="ghost"
-				onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
-				className="flex items-center justify-center w-full text-sm font-medium text-center sm:w-96 sm:text-base"
-			>
-				<span>Employee</span>
-				<ArrowUpDownIcon className="w-4 h-4 ml-2" />
-			</Button>
-		),
-		cell: ({ row }) => (
-			<div className="w-full text-sm font-medium text-center sm:w-96 sm:text-base">
-				<span> {row.original.employee}</span>
-			</div>
-		)
-	},
-	{
-		accessorKey: 'status',
-		header: ({ column }) => (
-			<Button
-				variant="ghost"
-				onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
-				className="flex items-center justify-center w-full text-sm text-center  sm:w-auto sm:text-base"
-			>
-				<span>Status</span>
-				<ArrowUpDownIcon className="w-4 h-4 ml-2" />
-			</Button>
-		),
-		cell: ({ row }) => {
-			return <StatusBadge selectedStatus={row.original.status} />;
-		}
-	},
-	{
-		accessorKey: 'time',
-		header: () => <div className="w-full text-sm text-center sm:text-base">Time</div>,
-		cell: ({ row }) => (
-			<div
-				className={`text-center font-sans w-full text-sm sm:text-base ${statusColor(row.original.status).text}`}
-			>
-				{row.original.time}
-			</div>
-		)
-	}
-];
 
 export function DataTableTimeSheet({ data, user }: { data?: GroupedTimesheet[], user?: IUser | undefined }) {
 	const modal = useModal();
@@ -183,28 +80,7 @@ export function DataTableTimeSheet({ data, user }: { data?: GroupedTimesheet[],
 	};
 
 	const t = useTranslations();
-	const [sorting, setSorting] = React.useState<SortingState>([]);
-	const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
-	const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
-	const [rowSelection, setRowSelection] = React.useState({});
-	const table = useReactTable({
-		data: dataSourceTimeSheet,
-		columns,
-		onSortingChange: setSorting,
-		onColumnFiltersChange: setColumnFilters,
-		getCoreRowModel: getCoreRowModel(),
-		getPaginationRowModel: getPaginationRowModel(),
-		getSortedRowModel: getSortedRowModel(),
-		getFilteredRowModel: getFilteredRowModel(),
-		onColumnVisibilityChange: setColumnVisibility,
-		onRowSelectionChange: setRowSelection,
-		state: {
-			sorting,
-			columnFilters,
-			columnVisibility,
-			rowSelection
-		}
-	});
+
 	const handleSort = (key: string, order: SortOrder) => {
 		console.log(`Sorting ${key} in ${order} order`);
 	};
@@ -277,6 +153,7 @@ export function DataTableTimeSheet({ data, user }: { data?: GroupedTimesheet[],
 									className={clsxm("p-1 rounded")}
 								>
 									<AccordionTrigger
+										key={plan.date}
 										style={{ backgroundColor: statusColor(status).bgOpacity }}
 										type="button"
 										className={clsxm(
@@ -381,41 +258,6 @@ export function DataTableTimeSheet({ data, user }: { data?: GroupedTimesheet[],
 				}
 				)}
 			</div>
-			<div className="flex items-center justify-end p-4 space-x-2">
-				<div className="flex-1 text-sm text-muted-foreground">
-					{table.getFilteredSelectedRowModel().rows.length} of {table.getFilteredRowModel().rows.length}{' '}
-					row(s) selected.
-				</div>
-				<div className="flex items-center gap-x-3">
-					<span className="text-sm font-medium">
-						Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount()}
-					</span>
-					<Button
-						variant={'outline'}
-						onClick={() => table.setPageIndex(0)}
-						disabled={!table.getCanPreviousPage()}
-					>
-						<MdKeyboardDoubleArrowLeft />
-					</Button>
-					<Button
-						variant={'outline'}
-						onClick={() => table.previousPage()}
-						disabled={!table.getCanPreviousPage()}
-					>
-						<MdKeyboardArrowLeft />
-					</Button>
-					<Button variant={'outline'} onClick={() => table.nextPage()} disabled={!table.getCanNextPage()}>
-						<MdKeyboardArrowRight />
-					</Button>
-					<Button
-						variant={'outline'}
-						onClick={() => table.setPageIndex(table.getPageCount() - 1)}
-						disabled={!table.getCanNextPage()}
-					>
-						<MdKeyboardDoubleArrowRight />
-					</Button>
-				</div>
-			</div>
 		</div >
 	);
 }
@@ -544,19 +386,7 @@ const TaskActionMenu = ({ dataTimesheet, isManage, user }: { dataTimesheet: Time
 };
 
 
-const TaskDetails = ({ description, name }: { description: string; name: string }) => {
-	return (
-		<div className="flex items-center w-40 gap-x-2 ">
-			<div className="flex items-center justify-center w-8 h-8 p-2 text-white rounded-lg shadow bg-primary dark:bg-primary-light">
-				<span className="lowercase font-medium text-[10px]">ever</span>
-			</div>
-			<span className="capitalize font-medium !text-sm sm:text-base text-gray-800 dark:text-white leading-4 whitespace-nowrap">
-				{name}
-			</span>
-			<div style={{ display: 'none' }}>{description}</div>
-		</div>
-	);
-};
+
 
 export const StatusTask = ({ timesheet }: { timesheet: TimesheetLog }) => {
 	const t = useTranslations();
diff --git a/apps/web/lib/features/multiple-select/index.tsx b/apps/web/lib/features/multiple-select/index.tsx
index 94149c225..5ec9af5da 100644
--- a/apps/web/lib/features/multiple-select/index.tsx
+++ b/apps/web/lib/features/multiple-select/index.tsx
@@ -158,8 +158,8 @@ export function CustomSelect({
             </SelectTrigger>
             <SelectContent className='z-[10000] dark:bg-dark--theme-light w-auto'>
                 <SelectGroup className={clsxm('overflow-y-auto', classNameGroup)}>
-                    {options.map((value) => (
-                        <SelectItem key={value} value={value}>
+                    {options.map((value, index) => (
+                        <SelectItem key={index} value={value}>
                             {renderOption ? renderOption(value) : value.charAt(0).toUpperCase() + value.slice(1)}
                         </SelectItem>
                     ))}