diff --git a/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetFilter.tsx b/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetFilter.tsx
index 35af8d5ec..1d96b1aa5 100644
--- a/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetFilter.tsx
+++ b/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetFilter.tsx
@@ -1,33 +1,46 @@
 import { FilterWithStatus } from './FilterWithStatus';
 import { FrequencySelect, TimeSheetFilterPopover, TimesheetFilterDate } from '.';
 import { Button } from 'lib/components';
-
-export function TimesheetFilter() {
+import { AddManualTimeModal } from '@/lib/features/manual-time/add-manual-time-modal';
+interface ITimesheetFilter {
+    isOpen: boolean,
+    openModal: () => void,
+    closeModal: () => void
+}
+export function TimesheetFilter({ closeModal, isOpen, openModal }: ITimesheetFilter) {
     return (
-        <div className="grid grid-cols-3 w-full">
-            <div className="col-span-1">
-                <FilterWithStatus
-                    activeStatus="Rejected"
-                    onToggle={(label) => {
-                        console.log(label)
-                    }}
-                />
-            </div>
-            <div className="col-span-1"></div>
-            <div className="col-span-1">
-                <div className='flex gap-2'>
-                    <FrequencySelect />
-                    <TimesheetFilterDate />
-                    <TimeSheetFilterPopover />
-                    <Button
-                        onClick={() => null}
-                        variant='outline'
-                        className='bg-primary/5 dark:bg-primary-light h-10 font-medium'>
-                        Add Time
-                    </Button>
+        <>
+            {
+                isOpen && <AddManualTimeModal
+                    closeModal={closeModal}
+                    isOpen={isOpen}
+                    params="AddManuelTime"
+                    timeSheetStatus="ManagerTimesheet"
+                />}
+            <div className="grid grid-cols-3 w-full">
+                <div className="col-span-1">
+                    <FilterWithStatus
+                        activeStatus="Rejected"
+                        onToggle={(label) => {
+                            console.log(label)
+                        }}
+                    />
+                </div>
+                <div className="col-span-1"></div>
+                <div className="col-span-1">
+                    <div className='flex gap-2'>
+                        <FrequencySelect />
+                        <TimesheetFilterDate />
+                        <TimeSheetFilterPopover />
+                        <Button
+                            onClick={openModal}
+                            variant='outline'
+                            className='bg-primary/5 dark:bg-primary-light h-10 font-medium'>
+                            Add Time
+                        </Button>
+                    </div>
                 </div>
             </div>
-        </div>
-
+        </>
     )
 }
diff --git a/apps/web/app/[locale]/timesheet/[memberId]/page.tsx b/apps/web/app/[locale]/timesheet/[memberId]/page.tsx
index f8ce5238b..4f8f26126 100644
--- a/apps/web/app/[locale]/timesheet/[memberId]/page.tsx
+++ b/apps/web/app/[locale]/timesheet/[memberId]/page.tsx
@@ -5,7 +5,7 @@ import { useTranslations } from 'next-intl';
 import { withAuthentication } from 'lib/app/authenticator';
 import { Breadcrumb, Container, Divider } from 'lib/components';
 import { Footer, MainLayout } from 'lib/layout';
-import { useAuthenticateUser, useDailyPlan, useLocalStorageState, useOrganizationTeams } from '@app/hooks';
+import { useAuthenticateUser, useDailyPlan, useLocalStorageState, useModal, useOrganizationTeams } from '@app/hooks';
 import { clsxm } from '@app/utils';
 import { fullWidthState } from '@app/stores/fullWidth';
 import { useAtomValue } from 'jotai';
@@ -36,7 +36,11 @@ const TimeSheet = React.memo(function TimeSheetPage({ params }: { params: { memb
     const { user } = useAuthenticateUser();
 
     const { sortedPlans } = useDailyPlan();
-
+    const {
+        isOpen: isManualTimeModalOpen,
+        openModal: openManualTimeModal,
+        closeModal: closeManualTimeModal
+    } = useModal();
     const username = user?.name || user?.firstName || user?.lastName || user?.username;
 
     const [timesheetNavigator, setTimesheetNavigator] = useLocalStorageState<TimesheetViewMode>('timesheet-viewMode', 'ListView');
@@ -132,7 +136,11 @@ const TimeSheet = React.memo(function TimeSheetPage({ params }: { params: { memb
                         </div>
                         {/* <DropdownMenuDemo /> */}
                         <div className='flex flex-col min-h-screen w-full border-1 rounded-lg bg-[#FFFFFF]  p-4 mt-4'>
-                            <TimesheetFilter />
+                            <TimesheetFilter
+                                closeModal={closeManualTimeModal}
+                                openModal={openManualTimeModal}
+                                isOpen={isManualTimeModalOpen}
+                            />
                             <div className='pt-4'>
                                 {timesheetNavigator === 'ListView' ?
                                     <TimesheetView data={sortedPlans} />
diff --git a/apps/web/app/helpers/date.ts b/apps/web/app/helpers/date.ts
index 3a0783f31..436b6c5c4 100644
--- a/apps/web/app/helpers/date.ts
+++ b/apps/web/app/helpers/date.ts
@@ -216,3 +216,12 @@ export const getGreeting = (t: TranslationHooks) => {
 		return t('pages.timesheet.GREETINGS.GOOD_EVENING');
 	}
 }
+
+export const formatDate = (dateStr: string | Date): string => {
+	try {
+		return moment(dateStr).format('ddd DD MMM YYYY');
+	} catch (error) {
+		console.error('Invalid date format:', error);
+		return '';
+	}
+}
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 5b6048ddf..fb206d6e9 100644
--- a/apps/web/lib/features/integrations/calendar/table-time-sheet.tsx
+++ b/apps/web/lib/features/integrations/calendar/table-time-sheet.tsx
@@ -61,6 +61,7 @@ import { Badge } from '@components/ui/badge'
 import { IDailyPlan } from "@/app/interfaces"
 import { StatusType, getTimesheetButtons } from "@/app/[locale]/timesheet/[memberId]/components"
 import { useTranslations } from "next-intl"
+import { formatDate } from "@/app/helpers"
 
 
 
@@ -223,57 +224,66 @@ export function DataTableTimeSheet({ data }: { data?: IDailyPlan[] }) {
                         ))}
                     </TableHeader> */}
                     <TableBody className="w-full rounded-md">
-                        <Accordion type="single" collapsible>
-                            {Object.entries(groupedRows).map(([status, rows]) => (
-                                <AccordionItem key={status} value={status} className="p-1 rounded">
-                                    <AccordionTrigger
-                                        style={{ backgroundColor: statusColor(status).bgOpacity }}
-                                        type="button"
-                                        className={clsxm(
-                                            "flex flex-row-reverse justify-end items-center w-full h-9 rounded-sm gap-x-2 hover:no-underline px-2",
-                                            statusColor(status).text,
-                                        )}
-                                    >
-                                        <div className="flex items-center space-x-1 justify-between w-full">
-                                            <div className="flex items-center space-x-1">
-                                                <div className={clsxm("p-2 rounded", statusColor(status).bg)}></div>
-                                                <div className="flex items-center gap-x-1">
-                                                    <span className="text-base font-normal uppercase text-gray-400">
-                                                        {status}
-                                                    </span>
-                                                    <span className="text-gray-400 text-[14px]">({rows.length})</span>
+                        {data?.map((plan, index) => (
+                            <div key={index}>
+                                <div className="h-10 flex justify-between items-center w-full bg-[#eeeef1cc] rounded-md border-1 border-gray-400 px-5 text-[#71717A] font-medium">
+                                    <span>{formatDate(plan?.date)}</span>
+                                    <span>64:30h</span>
+                                </div>
+                                <Accordion type="single" collapsible>
+                                    {Object.entries(groupedRows).map(([status, rows]) => (
+                                        <AccordionItem key={status} value={status} className="p-1 rounded">
+                                            <AccordionTrigger
+                                                style={{ backgroundColor: statusColor(status).bgOpacity }}
+                                                type="button"
+                                                className={clsxm(
+                                                    "flex flex-row-reverse justify-end items-center w-full h-9 rounded-sm gap-x-2 hover:no-underline px-2",
+                                                    statusColor(status).text,
+                                                )}
+                                            >
+                                                <div className="flex items-center space-x-1 justify-between w-full">
+                                                    <div className="flex items-center space-x-1">
+                                                        <div className={clsxm("p-2 rounded", statusColor(status).bg)}></div>
+                                                        <div className="flex items-center gap-x-1">
+                                                            <span className="text-base font-normal uppercase text-gray-400">
+                                                                {status}
+                                                            </span>
+                                                            <span className="text-gray-400 text-[14px]">({rows.length})</span>
+                                                        </div>
+                                                        <Badge variant={'outline'} className="flex items-center gap-x-2 rounded-md bg-[#E4E4E7]">
+                                                            <span className="text-[#71717A]">Total</span>
+                                                            <span>24:30h</span>
+                                                        </Badge>
+                                                    </div>
+                                                    <div className="flex items-center gap-2 p-x-1">
+                                                        {getTimesheetButtons(status as StatusType, t)}
+                                                    </div>
                                                 </div>
-                                                <Badge variant={'outline'} className="flex items-center gap-x-2 rounded-md bg-[#E4E4E7]">
-                                                    <span className="text-[#71717A]">Total</span>
-                                                    <span>24:30h</span>
-                                                </Badge>
-                                            </div>
-                                            <div className="flex items-center gap-2 p-x-1">
-                                                {getTimesheetButtons(status as StatusType, t)}
-                                            </div>
-                                        </div>
-                                    </AccordionTrigger>
-                                    <AccordionContent className="flex flex-col w-full">
-                                        {rows.length ? (
-                                            rows.map((row) => (
-                                                <TableRow style={{ backgroundColor: statusColor(status).bgOpacity }}
-                                                    key={row.id} className="min-w-full w-auto">
-                                                    {row.getVisibleCells().map((cell) => (
-                                                        <TableCell key={cell.id} className="w-full">
-                                                            {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                                                        </TableCell>
-                                                    ))}
-                                                </TableRow>
-                                            ))
-                                        ) : (
-                                            <TableRow>
-                                                <TableCell colSpan={columns.length} className="text-center">No results.</TableCell>
-                                            </TableRow>
-                                        )}
-                                    </AccordionContent>
-                                </AccordionItem>
-                            ))}
-                        </Accordion>
+                                            </AccordionTrigger>
+                                            <AccordionContent className="flex flex-col w-full">
+                                                {rows.length ? (
+                                                    rows.map((row) => (
+                                                        <TableRow style={{ backgroundColor: statusColor(status).bgOpacity }}
+                                                            key={row.id} className="min-w-full w-auto">
+                                                            {row.getVisibleCells().map((cell) => (
+                                                                <TableCell key={cell.id} className="w-full">
+                                                                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                                                                </TableCell>
+                                                            ))}
+                                                        </TableRow>
+                                                    ))
+                                                ) : (
+                                                    <TableRow>
+                                                        <TableCell colSpan={columns.length} className="text-center">No results.</TableCell>
+                                                    </TableRow>
+                                                )}
+                                            </AccordionContent>
+                                        </AccordionItem>
+                                    ))}
+                                </Accordion>
+                            </div>
+                        ))}
+
                     </TableBody>
                 </Table>
             </div>