diff --git a/apps/web/app/[locale]/timesheet/[memberId]/components/CalendarView.tsx b/apps/web/app/[locale]/timesheet/[memberId]/components/CalendarView.tsx
index b7a4fd146..724bb0e9c 100644
--- a/apps/web/app/[locale]/timesheet/[memberId]/components/CalendarView.tsx
+++ b/apps/web/app/[locale]/timesheet/[memberId]/components/CalendarView.tsx
@@ -1,8 +1,7 @@
-import React from 'react'
 
 export function CalendarView() {
     return (
-        <div className='grow h-full w-full bg-[#FFFFFF]'>
+        <div className='grow h-full w-full bg-[#FFFFFF] dark:bg-dark--theme'>
 
         </div>
     )
diff --git a/apps/web/app/[locale]/timesheet/[memberId]/components/FilterWithStatus.tsx b/apps/web/app/[locale]/timesheet/[memberId]/components/FilterWithStatus.tsx
index 14d66eb2c..0aeb5f5a4 100644
--- a/apps/web/app/[locale]/timesheet/[memberId]/components/FilterWithStatus.tsx
+++ b/apps/web/app/[locale]/timesheet/[memberId]/components/FilterWithStatus.tsx
@@ -20,18 +20,21 @@ export function FilterWithStatus({
     ];
 
     return (
-        <div className={clsxm('flex flex-nowrap h-[2.2rem] items-center bg-[#e2e8f0aa] rounded-xl w-[520px]', className)}>
+        <div className={clsxm('flex flex-nowrap h-[2.2rem] items-center bg-[#e2e8f0aa] dark:bg-gray-800 rounded-xl ', className)}>
             {buttonData.map(({ label, count, icon }, index) => (
                 <Button
                     key={index}
                     className={clsxm(
                         'group flex items-center justify-start h-[2.2rem] rounded-xl w-full',
-                        'dark:bg-dark--theme-light dark:border-gray-700 bg-transparent text-[#71717A] w-[80px]',
-                        activeStatus === label && 'text-primary bg-white shadow-lg font-bold border'
+                        'dark:bg-gray-800 dark:border-primary-light bg-transparent text-[#71717A] w-[80px]',
+                        activeStatus === label && 'text-primary bg-white shadow-2xl dark:text-primary-light font-bold  border'
                     )}
                     onClick={() => onToggle(label)}>
-                    <span className={clsxm('font-medium ml-1 text-[#7E7991]', `${activeStatus === label ? "text-primary" : ""}`)}>{label}</span>
-                    <span className='font-medium ml-1 text-[#71717A]'>{count}</span>
+                    <span className={clsxm(
+                        'font-medium ml-1 text-gray-500 dark:text-gray-200',
+                        activeStatus === label && 'text-primary font-bold dark:text-primary-light'
+                    )}>{label}</span>
+                    <span className='font-medium ml-1 text-gray-500 dark:text-gray-400'>{count}</span>
                 </Button>
             ))}
         </div>
diff --git a/apps/web/app/[locale]/timesheet/[memberId]/components/FrequencySelect.tsx b/apps/web/app/[locale]/timesheet/[memberId]/components/FrequencySelect.tsx
index df8b3054c..ef2f316d1 100644
--- a/apps/web/app/[locale]/timesheet/[memberId]/components/FrequencySelect.tsx
+++ b/apps/web/app/[locale]/timesheet/[memberId]/components/FrequencySelect.tsx
@@ -39,7 +39,7 @@ export function FrequencySelect() {
         <Select
             value={selectedValue}
             onValueChange={handleSelectChange}>
-            <SelectTrigger className="w-auto overflow-hidden text-clip border border-gray-200 dark:border-gray-700 bg-white dark:bg-dark--theme-light focus:ring-2 focus:ring-transparent">
+            <SelectTrigger className="w-36 overflow-hidden  h-[2.2rem]  text-clip border border-gray-200 dark:border-gray-700 bg-white dark:bg-dark--theme-light focus:ring-2 focus:ring-transparent">
                 <SelectValue placeholder="Select a daily" />
             </SelectTrigger>
             <SelectContent>
diff --git a/apps/web/app/[locale]/timesheet/[memberId]/components/TimeSheetFilterPopover.tsx b/apps/web/app/[locale]/timesheet/[memberId]/components/TimeSheetFilterPopover.tsx
index 73796b315..99217f2a2 100644
--- a/apps/web/app/[locale]/timesheet/[memberId]/components/TimeSheetFilterPopover.tsx
+++ b/apps/web/app/[locale]/timesheet/[memberId]/components/TimeSheetFilterPopover.tsx
@@ -19,7 +19,7 @@ export function TimeSheetFilterPopover() {
             <Popover>
                 <PopoverTrigger asChild>
                     <Button variant="outline"
-                        className='flex items-center justify-center h-10 rounded-lg bg-white dark:bg-dark--theme-light border dark:border-gray-700 hover:bg-white p-3 gap-2'>
+                        className='flex items-center justify-center  h-[2.2rem] rounded-lg bg-white dark:bg-dark--theme-light border dark:border-gray-700 hover:bg-white p-3 gap-2'>
                         <SettingFilterIcon className="text-gray-700 dark:text-white w-3.5" strokeWidth="1.8" />
                         <span className="text-gray-700 dark:text-white">Filter</span>
                     </Button>
diff --git a/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetAction.tsx b/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetAction.tsx
index b556f3431..8e35378fc 100644
--- a/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetAction.tsx
+++ b/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetAction.tsx
@@ -30,17 +30,17 @@ export const getTimesheetButtons = (status: StatusType, t: TranslationHooks) =>
 
     const buttonsConfig: Record<StatusType, { icon: JSX.Element; title: string }[]> = {
         Pending: [
-            { icon: <FaClipboardCheck className="!text-[#2932417c] rounded" />, title: t('pages.timesheet.TIMESHEET_ACTION_APPROVE_SELECTED') },
-            { icon: <IoClose className="!bg-[#2932417c] rounded" />, title: t('pages.timesheet.TIMESHEET_ACTION_REJECT_SELECTED') },
-            { icon: <RiDeleteBin6Fill className="!text-[#2932417c] rounded" />, title: t('pages.timesheet.TIMESHEET_ACTION_DELETE_SELECTED') }
+            { icon: <FaClipboardCheck className="!text-[#2932417c] dark:!text-gray-400 rounded" />, title: t('pages.timesheet.TIMESHEET_ACTION_APPROVE_SELECTED') },
+            { icon: <IoClose className="!bg-[#2932417c] dark:!bg-gray-400 rounded" />, title: t('pages.timesheet.TIMESHEET_ACTION_REJECT_SELECTED') },
+            { icon: <RiDeleteBin6Fill className="!text-[#2932417c] dark:!text-gray-400 rounded" />, title: t('pages.timesheet.TIMESHEET_ACTION_DELETE_SELECTED') }
         ],
         Approved: [
-            { icon: <IoClose className="!bg-[#2932417c] rounded" />, title: t('pages.timesheet.TIMESHEET_ACTION_REJECT_SELECTED') },
-            { icon: <RiDeleteBin6Fill className="!text-[#2932417c] rounded" />, title: t('pages.timesheet.TIMESHEET_ACTION_DELETE_SELECTED') }
+            { icon: <IoClose className="!bg-[#2932417c] rounded dark:!bg-gray-400" />, title: t('pages.timesheet.TIMESHEET_ACTION_REJECT_SELECTED') },
+            { icon: <RiDeleteBin6Fill className="!text-[#2932417c] rounded dark:!text-gray-400" />, title: t('pages.timesheet.TIMESHEET_ACTION_DELETE_SELECTED') }
         ],
         Rejected: [
-            { icon: <FaClipboardCheck className="!text-[#2932417c] rounded" />, title: t('pages.timesheet.TIMESHEET_ACTION_APPROVE_SELECTED') },
-            { icon: <RiDeleteBin6Fill className="!text-[#2932417c] rounded" />, title: t('pages.timesheet.TIMESHEET_ACTION_DELETE_SELECTED') }
+            { icon: <FaClipboardCheck className="!text-[#2932417c] rounded dark:!text-gray-400" />, title: t('pages.timesheet.TIMESHEET_ACTION_APPROVE_SELECTED') },
+            { icon: <RiDeleteBin6Fill className="!text-[#2932417c] rounded dark:!text-gray-400" />, title: t('pages.timesheet.TIMESHEET_ACTION_DELETE_SELECTED') }
         ]
     };
 
diff --git a/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetCard.tsx b/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetCard.tsx
index ded2ddaf6..8c6039ec3 100644
--- a/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetCard.tsx
+++ b/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetCard.tsx
@@ -25,21 +25,21 @@ export function TimesheetCard({ ...props }: ITimesheetCard) {
         <Card
             aria-label={`Timesheet card for ${title}`}
             shadow='custom'
-            className='w-full h-[175px] rounded-md border border-gray-200 flex  gap-8 shadow shadow-gray-100 p-3'>
+            className='w-full h-[175px] rounded-md border border-gray-200 dark:border-gray-600 flex  gap-8 shadow shadow-gray-100 dark:shadow-transparent p-3'>
             <div className='!gap-8 w-full space-y-4 '>
                 <div className='flex flex-col gap-1 justify-start items-start'>
                     <h1 className='text-2xl md:text-[25px] font-bold truncate w-full'>{hours ?? count}</h1>
-                    <h2 className='text-base md:text-[16px] font-medium text-[#282048] truncate w-full'>{title}</h2>
-                    <span className='text-sm md:text-[14px] text-[#3D5A80] truncate w-full'>{date ?? description}</span>
+                    <h2 className='text-base md:text-[16px] font-medium text-[#282048] dark:text-gray-400 truncate w-full'>{title}</h2>
+                    <span className='text-sm md:text-[14px] text-[#3D5A80] dark:text-gray-400 truncate w-full'>{date ?? description}</span>
                 </div>
                 <Button
                     variant='outline'
                     className={clsxm(
                         'h-9 px-3 py-2',
-                        'border border-gray-200',
+                        'border border-gray-200 ',
                         'text-[#282048] text-sm',
                         'flex items-center',
-                        'hover:bg-gray-50 focus:ring-2 focus:ring-offset-2 focus:ring-gray-200'
+                        'hover:bg-gray-50 focus:ring-2 focus:ring-offset-2 focus:ring-gray-200 dark:border-gray-600'
                     )}
                     aria-label="View timesheet details"
                     onClick={onClick}>
@@ -55,7 +55,7 @@ export function TimesheetCard({ ...props }: ITimesheetCard) {
                     'h-16 w-16 rounded-lg p-5',
                     'flex items-center justify-center',
                     'text-white font-bold text-sm',
-                    'shadow-lg',
+                    'shadow-lg dark:shadow-gray-800',
                     classNameIcon
                 )}
                 aria-hidden="true">
diff --git a/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetFilter.tsx b/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetFilter.tsx
index 1d96b1aa5..1c4418ea1 100644
--- a/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetFilter.tsx
+++ b/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetFilter.tsx
@@ -17,30 +17,29 @@ export function TimesheetFilter({ closeModal, isOpen, openModal }: ITimesheetFil
                     params="AddManuelTime"
                     timeSheetStatus="ManagerTimesheet"
                 />}
-            <div className="grid grid-cols-3 w-full">
-                <div className="col-span-1">
+            <div className="flex w-full justify-between items-center">
+                <div>
                     <FilterWithStatus
                         activeStatus="Rejected"
                         onToggle={(label) => {
-                            console.log(label)
+                            // If logging is needed, use proper logging service
                         }}
                     />
                 </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 className="flex gap-2">
+                    <FrequencySelect />
+                    <TimesheetFilterDate />
+                    <TimeSheetFilterPopover />
+                    <Button
+                        onClick={openModal}
+                        variant="outline"
+                        className="bg-primary/5 dark:bg-primary-light dark:border-transparent  !h-[2.2rem] font-medium">
+                        Add Time
+                    </Button>
                 </div>
             </div>
+
         </>
     )
 }
diff --git a/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetFilterDate.tsx b/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetFilterDate.tsx
index cfbf481c9..5996a55cc 100644
--- a/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetFilterDate.tsx
+++ b/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetFilterDate.tsx
@@ -82,6 +82,7 @@ export function TimesheetFilterDate({
         }
     };
 
+    const actionButtonClass = "h-4 border-none dark:bg-dark-theme-light text-primary hover:bg-transparent hover:underline"
 
     return (<>
         <Popover>
@@ -92,7 +93,7 @@ export function TimesheetFilterDate({
                     aria-label="Select date range"
                     aria-expanded="false"
                     className={cn(
-                        "w-[240px] justify-start text-left font-normal overflow-hidden text-clip",
+                        "w-44 justify-start dark:bg-dark-theme h-[2.2rem] items-center gap-x-2 text-left font-normal overflow-hidden text-clip dark:bg-dark-theme-light",
                         !dateRange.from && "text-muted-foreground"
                     )}>
                     <CalendarIcon />
@@ -109,7 +110,7 @@ export function TimesheetFilterDate({
                     )}
                 </Button>
             </PopoverTrigger>
-            <PopoverContent className="w-auto p-0 flex">
+            <PopoverContent className="w-auto p-0 flex dark:bg-dark-theme-light">
                 {isVisible && (
                     <div className="flex flex-col p-2 gap-2 translate-x-0 justify-between">
                         <div className="flex flex-col gap-2">
@@ -126,19 +127,19 @@ export function TimesheetFilterDate({
                             />
                         </div>
                         <div className="flex w-full justify-end items-end">
-                            <Button variant={'outline'} className="h-4 border-none text-primary hover:bg-transparent hover:text-primary hover:underline">Cancel</Button>
-                            <Button variant={'outline'} className="h-4 border-none text-primary hover:bg-transparent hover:text-primary hover:underline">Apply</Button>
+                            <Button variant={'outline'} className={`${actionButtonClass} hover:text-gray-500`}>Cancel</Button>
+                            <Button variant={'outline'} className={`${actionButtonClass} hover:text-primary-dark`}>Apply</Button>
                         </div>
                     </div>
                 )
                 }
-                <div className="border border-slate-100 my-1"></div>
+                <div className="border border-slate-100 dark:border-gray-800 my-1"></div>
                 <div className="flex flex-col p-2">
                     {["Today", "Last 7 days", "Last 30 days", `This year (${new Date().getFullYear()})`, "Custom Date Range"].map((label, index) => (
                         <Button
                             key={index}
                             variant="outline"
-                            className="h-7 flex items-center justify-between border-none text-[12px] text-gray-700"
+                            className="h-7 flex items-center justify-between border-none text-[12px] text-gray-700 dark:dark:bg-dark--theme-light"
                             onClick={() => {
                                 label === 'Custom Date Range' && setIsVisible((prev) => !prev)
                                 handlePresetClick(label)
@@ -194,8 +195,8 @@ export function DatePickerFilter({
         <div>
             <DatePicker
                 buttonVariant={'link'}
-                className="dark:bg-dark--theme-light rounded-lg bg-white"
-                buttonClassName={'decoration-transparent flex items-center w-full bg-white dark:bg-dark--theme-light border-gray-300 justify-start text-left font-normal text-black h-10 border dark:border-slate-600 rounded-md'}
+                className="dark:bg-dark--theme-light rounded-lg bg-white dark:text-gray-200"
+                buttonClassName={'decoration-transparent flex items-center w-full h-[2.2em] bg-white dark:text-gray-200 dark:bg-dark--theme-light border-gray-300 justify-start text-left font-normal text-black  h-[2.2rem] border dark:border-slate-600 rounded-md'}
                 customInput={<DatePickerInput date={date} label={label} />}
                 mode="single"
                 numberOfMonths={1}
diff --git a/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetView.tsx b/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetView.tsx
index 736ded7b6..cdd35dfa2 100644
--- a/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetView.tsx
+++ b/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetView.tsx
@@ -5,7 +5,7 @@ import { useTranslations } from 'next-intl';
 export function TimesheetView({ data }: { data?: IDailyPlan[] }) {
     const t = useTranslations();
     return (
-        <div className='grow h-full w-full bg-[#FFFFFF]'>
+        <div className='grow h-full w-full bg-[#FFFFFF] dark:bg-dark--theme'>
             {data ? (
                 data.length > 0 ? (
                     <DataTableTimeSheet data={data} />
diff --git a/apps/web/app/[locale]/timesheet/[memberId]/page.tsx b/apps/web/app/[locale]/timesheet/[memberId]/page.tsx
index 4f8f26126..52325331a 100644
--- a/apps/web/app/[locale]/timesheet/[memberId]/page.tsx
+++ b/apps/web/app/[locale]/timesheet/[memberId]/page.tsx
@@ -3,8 +3,8 @@ import React, { useMemo } from 'react';
 import { useParams } from 'next/navigation';
 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 { Breadcrumb, Container } from 'lib/components';
+import { MainLayout } from 'lib/layout';
 import { useAuthenticateUser, useDailyPlan, useLocalStorageState, useModal, useOrganizationTeams } from '@app/hooks';
 import { clsxm } from '@app/utils';
 import { fullWidthState } from '@app/stores/fullWidth';
@@ -27,10 +27,6 @@ type ViewToggleButtonProps = {
     t: TranslationHooks
 };
 
-interface FooterTimeSheetProps {
-    fullWidth: boolean;
-}
-
 const TimeSheet = React.memo(function TimeSheetPage({ params }: { params: { memberId: string } }) {
     const t = useTranslations();
     const { user } = useAuthenticateUser();
@@ -62,9 +58,10 @@ const TimeSheet = React.memo(function TimeSheetPage({ params }: { params: { memb
         < >
             <MainLayout
                 showTimer={isTrackingEnabled}
-                footerClassName="hidden"
-                className="h-[calc(100vh-_22px)]">
-                <div className="top-14 fixed flex flex-col border-b-[1px] dark:border-gray-800 z-10 mx-0 w-full bg-white dark:bg-dark-high shadow-2xl shadow-transparent dark:shadow-gray-800 ">
+                className="items-start pb-1 !overflow-hidden w-full"
+                childrenClassName="h-[calc(100vh-_300px)] !overflow-hidden w-full"
+            >
+                <div className="top-14 fixed flex flex-col border-b-[1px] dark:border-gray-800 z-10 mx-0 w-full bg-white dark:bg-dark-high shadow-2xl shadow-transparent dark:shadow-transparent ">
                     <Container fullWidth={fullWidth}>
                         <div className="flex flex-row items-start justify-between mt-12 bg-white  dark:bg-dark-high">
                             <div className="flex items-center justify-center h-10 gap-8">
@@ -78,8 +75,8 @@ const TimeSheet = React.memo(function TimeSheetPage({ params }: { params: { memb
                     <Container fullWidth={fullWidth} className='h-full pt-14'>
                         <div className='py-5'>
                             <div className='flex flex-col justify-start items-start gap-y-2'>
-                                <h1 className='!text-[23px] font-bold text-[#282048]'>{getGreeting(t)}, {username} !</h1>
-                                <span className='text-[16px] text-[#3D5A80]'>{t('pages.timesheet.HEADING_DESCRIPTION')}</span>
+                                <h1 className='!text-[23px] font-bold text-[#282048] dark:text-white'>{getGreeting(t)}, {username} !</h1>
+                                <span className='text-[16px] text-[#3D5A80] dark:text-gray-500'>{t('pages.timesheet.HEADING_DESCRIPTION')}</span>
                             </div>
                             <div className='flex items-center w-full justify-between gap-6 pt-4'>
                                 <TimesheetCard
@@ -105,7 +102,7 @@ const TimeSheet = React.memo(function TimeSheetPage({ params }: { params: { memb
                                 />
                             </div>
                         </div>
-                        <div className='border-b-2 border-b-[#E2E8F0] w-full  flex justify-between pt-2'>
+                        <div className='border-b-2 border-b-[#E2E8F0] dark:border-b-gray-700 w-full  flex justify-between pt-2 overflow-hidden'>
                             <div className='w-full flex'>
                                 <ViewToggleButton
                                     icon={<GrTask className='text-sm' />}
@@ -122,7 +119,7 @@ const TimeSheet = React.memo(function TimeSheetPage({ params }: { params: { memb
                                     t={t}
                                 />
                             </div>
-                            <div className='flex items-center h-9 w-[700px] bg-white gap-x-2 px-2 border border-gray-200 rounded-sm mb-2'>
+                            <div className='flex items-center !h-[2.2rem] w-[700px] bg-white dark:bg-dark--theme-light gap-x-2 px-2 border border-gray-200 dark:border-gray-700 rounded-sm mb-2'>
                                 <GoSearch className='text-[#7E7991]' />
                                 <input
                                     role="searchbox"
@@ -130,18 +127,18 @@ const TimeSheet = React.memo(function TimeSheetPage({ params }: { params: { memb
                                     type="search"
                                     name="timesheet-search"
                                     id="timesheet-search"
-                                    className="h-10 w-full bg-transparent focus:border-transparent focus:ring-2 focus:ring-transparent placeholder-gray-500 placeholder:font-medium shadow-sm outline-none"
+                                    className="!h-[2.2rem] w-full bg-transparent focus:border-transparent focus:ring-2 focus:ring-transparent placeholder-gray-500 placeholder:font-medium shadow-sm outline-none"
                                     placeholder="Search.." />
                             </div>
                         </div>
                         {/* <DropdownMenuDemo /> */}
-                        <div className='flex flex-col min-h-screen w-full border-1 rounded-lg bg-[#FFFFFF]  p-4 mt-4'>
+                        <div className='flex flex-col overflow-y-auto  w-full border-1 rounded-lg bg-[#FFFFFF]  dark:bg-dark--theme p-4 mt-4'>
                             <TimesheetFilter
                                 closeModal={closeManualTimeModal}
                                 openModal={openManualTimeModal}
                                 isOpen={isManualTimeModalOpen}
                             />
-                            <div className='pt-4'>
+                            <div className='h-[calc(100vh-_291px)] mt-3 p-10 overflow-y-auto'>
                                 {timesheetNavigator === 'ListView' ?
                                     <TimesheetView data={sortedPlans} />
                                     : <CalendarView />
@@ -151,25 +148,12 @@ const TimeSheet = React.memo(function TimeSheetPage({ params }: { params: { memb
                     </Container>
                 </div>
             </MainLayout>
-            <FooterTimeSheet fullWidth={fullWidth} />
         </>
     )
 })
 
 export default withAuthentication(TimeSheet, { displayName: 'TimeSheet' });
 
-const FooterTimeSheet: React.FC<FooterTimeSheetProps> = ({ fullWidth }) => {
-    return (
-        <div className="bg-white dark:bg-[#1e2025] w-screen z-[5000] fixed bottom-0">
-            <Divider />
-            <Footer
-                className={clsxm(
-                    'justify-between w-full px-0 mx-auto',
-                    fullWidth ? 'px-8' : 'x-container'
-                )} />
-        </div>
-    )
-}
 
 const ViewToggleButton: React.FC<ViewToggleButtonProps> = ({
     mode,
@@ -181,8 +165,8 @@ const ViewToggleButton: React.FC<ViewToggleButtonProps> = ({
     <button
         onClick={onClick}
         className={clsxm(
-            'text-[#7E7991]  font-medium w-[191px] h-[40px] flex items-center gap-x-4 text-[14px]',
-            active && 'border-b-primary text-primary border-b-2 bg-[#F1F5F9]'
+            'text-[#7E7991]  font-medium w-[191px] h-[40px] flex items-center gap-x-4 text-[14px] px-2 rounded',
+            active && 'border-b-primary text-primary border-b-2 dark:text-primary-light dark:border-b-primary-light bg-[#F1F5F9] dark:bg-gray-800 font-bold'
         )}>
         {icon}
         <span>{mode === 'ListView' ? t('pages.timesheet.VIEWS.LIST') : t('pages.timesheet.VIEWS.CALENDAR')}</span>
diff --git a/apps/web/app/api/timer/timesheet/daily/route.ts b/apps/web/app/api/timer/timesheet/daily/route.ts
new file mode 100644
index 000000000..dc84bf6aa
--- /dev/null
+++ b/apps/web/app/api/timer/timesheet/daily/route.ts
@@ -0,0 +1,44 @@
+import { getTaskTimesheetRequest } from '@/app/services/server/requests';
+import { authenticatedGuard } from '@app/services/server/guards/authenticated-guard-app';
+import { NextResponse } from "next/server";
+
+export async function GET(req: Request) {
+    const res = new NextResponse();
+    const { searchParams } = new URL(req.url);
+
+    const startDate = searchParams.get('startDate');
+    const endDate = searchParams.get('endDate');
+    if (!startDate || !endDate) {
+        return NextResponse.json(
+            { error: 'startDate and endDate are required' },
+            { status: 400 }
+        );
+    }
+    const { $res, user, tenantId, organizationId, access_token } = await authenticatedGuard(req, res);
+    if (!user) return $res('Unauthorized');
+    try {
+        const { data } = await getTaskTimesheetRequest({
+            tenantId,
+            organizationId,
+            employeeIds: [],
+            startDate,
+            endDate
+        }, access_token);
+
+        if (!data) {
+            return NextResponse.json(
+                { error: 'No data found' },
+                { status: 404 }
+            );
+        }
+
+        return NextResponse.json(data);
+    } catch (error) {
+        console.error('Error fetching timesheet:', error);
+        return NextResponse.json(
+            { error: 'Failed to fetch timesheet data' },
+            { status: 500 }
+        );
+    }
+
+}
diff --git a/apps/web/app/interfaces/index.ts b/apps/web/app/interfaces/index.ts
index 7f0e71466..3417fd9a1 100644
--- a/apps/web/app/interfaces/index.ts
+++ b/apps/web/app/interfaces/index.ts
@@ -41,3 +41,4 @@ export * from './integrations/IGithubMetadata';
 export * from './integrations/IIntegrationTenant';
 export * from './integrations/IIntegrationType';
 export * from './integrations/IIntegration';
+export * from './timer'
diff --git a/apps/web/app/interfaces/timer/ITimerLog.ts b/apps/web/app/interfaces/timer/ITimerLog.ts
new file mode 100644
index 000000000..dd48ad243
--- /dev/null
+++ b/apps/web/app/interfaces/timer/ITimerLog.ts
@@ -0,0 +1,72 @@
+interface Project {
+    id: string;
+    name: string;
+    imageUrl: string;
+    membersCount: number;
+    image: string | null;
+}
+
+interface Task {
+    id: string;
+    title: string;
+    estimate: number | null;
+    taskNumber: string;
+}
+
+interface OrganizationContact {
+    id: string;
+    name: string;
+    imageUrl: string;
+    image: string | null;
+}
+
+interface User {
+    id: string;
+    firstName: string;
+    lastName: string;
+    imageUrl: string;
+    image: string | null;
+    name: string;
+}
+
+interface Employee {
+    id: string;
+    isOnline: boolean;
+    isAway: boolean;
+    user: User;
+    fullName: string;
+}
+
+export interface ITimeSheet {
+    deletedAt: string | null;
+    id: string;
+    createdAt: string;
+    updatedAt: string;
+    isActive: boolean;
+    isArchived: boolean;
+    archivedAt: string | null;
+    tenantId: string;
+    organizationId: string;
+    startedAt: string;
+    stoppedAt: string;
+    editedAt: string | null;
+    logType: string;
+    source: string;
+    description: string;
+    reason: string | null;
+    isBillable: boolean;
+    isRunning: boolean;
+    version: number | null;
+    employeeId: string;
+    timesheetId: string;
+    projectId: string;
+    taskId: string;
+    organizationContactId: string;
+    organizationTeamId: string | null;
+    project: Project;
+    task: Task;
+    organizationContact: OrganizationContact;
+    employee: Employee;
+    duration: number;
+    isEdited: boolean;
+}
diff --git a/apps/web/app/interfaces/timer/index.ts b/apps/web/app/interfaces/timer/index.ts
new file mode 100644
index 000000000..ed7a7b7df
--- /dev/null
+++ b/apps/web/app/interfaces/timer/index.ts
@@ -0,0 +1,4 @@
+export * from './IManualTimeReasons';
+export * from './ITimerApp';
+export * from './ITimerSlot';
+export * from './ITimerLog';
diff --git a/apps/web/app/services/server/requests/timesheet.ts b/apps/web/app/services/server/requests/timesheet.ts
index dcb1f296c..be7662ec1 100644
--- a/apps/web/app/services/server/requests/timesheet.ts
+++ b/apps/web/app/services/server/requests/timesheet.ts
@@ -1,6 +1,7 @@
 import { ITasksTimesheet } from '@app/interfaces/ITimer';
 import { serverFetch } from '../fetch';
 import qs from 'qs';
+import { ITimeSheet } from '@/app/interfaces/timer/ITimerLog';
 
 export type TTasksTimesheetStatisticsParams = {
 	tenantId: string;
@@ -52,3 +53,14 @@ export function taskActivityRequest(params: TTaskActivityParams, bearer_token: s
 		tenantId: params.tenantId
 	});
 }
+
+
+export function getTaskTimesheetRequest(params: TTasksTimesheetStatisticsParams, bearer_token: string) {
+	const queries = qs.stringify(params);
+	return serverFetch<ITimeSheet[]>({
+		path: `/timesheet/time-log/report/daily?${queries.toString()}`,
+		method: 'GET',
+		bearer_token,
+		tenantId: params.tenantId
+	})
+}
diff --git a/apps/web/components/shared/tasks/assigned-tasks.tsx b/apps/web/components/shared/tasks/assigned-tasks.tsx
index eb0320bed..a4eb5b147 100644
--- a/apps/web/components/shared/tasks/assigned-tasks.tsx
+++ b/apps/web/components/shared/tasks/assigned-tasks.tsx
@@ -46,17 +46,15 @@ const AssignedTask = ({ now = false, task }: ITaskDetailCard) => {
   const { m: tm, h: th } = secondsToTime((taskStat && taskStat.duration) || 0);
   return (
     <div
-      className={`w-full rounded-[10px] drop-shadow-[0px_3px_15px_#3E1DAD1A] border relative  ${
-        now === true
-          ? '  border-primary dark:border-gray-100'
-          : ' hover:border hover:border-primary dark:border-[#202023]'
-      } bg-[#FFFFFF] my-[15px] dark:bg-[#202023] justify-between dark:hover:border-gray-100 font-bold px-[24px] dark:text-[#FFFFFF] py-[10px]`}
+      className={`w-full rounded-[10px] drop-shadow-[0px_3px_15px_#3E1DAD1A] border relative  ${now === true
+        ? '  border-primary dark:border-gray-100'
+        : ' hover:border hover:border-primary dark:border-[#202023]'
+        } bg-[#FFFFFF] my-[15px] dark:bg-[#202023] justify-between dark:hover:border-gray-100 font-bold px-[24px] dark:text-[#FFFFFF] py-[10px]`}
     >
       <div className="flex items-center justify-between ">
         <div
-          className={`text-black dark:text-[#FFFFFF] text-[14px] ${
-            now == true ? 'font-semibold' : 'font-normal'
-          } w-[413px]`}
+          className={`text-black dark:text-[#FFFFFF] text-[14px] ${now == true ? 'font-semibold' : 'font-normal'
+            } w-[413px]`}
         >
           {`#${task && task.taskNumber} `} {task && task.title}
         </div>
diff --git a/apps/web/components/shared/tasks/task-input.tsx b/apps/web/components/shared/tasks/task-input.tsx
index 2880fe4e6..20220a8d0 100644
--- a/apps/web/components/shared/tasks/task-input.tsx
+++ b/apps/web/components/shared/tasks/task-input.tsx
@@ -140,10 +140,9 @@ export function TasksList({ onClickTask }: { onClickTask?: (task: ITeamTask) =>
 											<Combobox.Option
 												key={task.id}
 												className={({ active }) =>
-													`relative text-[14px] cursor-pointer select-none pl-10 pr-4 text-primary ${
-														active
-															? 'bg-[#F9FAFB] text-opacity-80 dark:text-white dark:bg-[#202023] cursor-pointer'
-															: ' dark:text-white text-opacity-100'
+													`relative text-[14px] cursor-pointer select-none pl-10 pr-4 text-primary ${active
+														? 'bg-[#F9FAFB] text-opacity-80 dark:text-white dark:bg-[#202023] cursor-pointer'
+														: ' dark:text-white text-opacity-100'
 													}`
 												}
 												value={task}
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 fb206d6e9..282c692aa 100644
--- a/apps/web/lib/features/integrations/calendar/table-time-sheet.tsx
+++ b/apps/web/lib/features/integrations/calendar/table-time-sheet.tsx
@@ -5,13 +5,11 @@ import {
     ColumnDef,
     ColumnFiltersState,
     SortingState,
-    VisibilityState,
-    flexRender,
-    getCoreRowModel,
+    VisibilityState, getCoreRowModel,
     getFilteredRowModel,
     getPaginationRowModel,
     getSortedRowModel,
-    useReactTable,
+    useReactTable
 } from "@tanstack/react-table"
 import { ArrowUpDownIcon, MoreHorizontal } from "lucide-react"
 import { Button } from "@components/ui/button"
@@ -28,8 +26,7 @@ import {
 } from "@components/ui/dropdown-menu"
 import {
     Table,
-    TableBody,
-    TableCell, TableRow
+    TableBody
 } from "@components/ui/table"
 import {
     Select,
@@ -62,6 +59,7 @@ import { IDailyPlan } from "@/app/interfaces"
 import { StatusType, getTimesheetButtons } from "@/app/[locale]/timesheet/[memberId]/components"
 import { useTranslations } from "next-intl"
 import { formatDate } from "@/app/helpers"
+import { TaskNameInfoDisplay } from "../../task/task-displays"
 
 
 
@@ -209,27 +207,17 @@ export function DataTableTimeSheet({ data }: { data?: IDailyPlan[] }) {
 
 
     return (
-        <div className="w-full">
+        <div className="w-full dark:bg-dark--theme">
             <div className="rounded-md">
-                <Table className="border rounded-md">
-                    {/* <TableHeader>
-                        {table.getHeaderGroups().map((headerGroup) => (
-                            <TableRow key={headerGroup.id}>
-                                {headerGroup.headers.map((header) => (
-                                    <TableHead key={header.id}>
-                                        {header.isPlaceholder ? null : flexRender(header.column.````columnDef.header, header.getContext())}
-                                    </TableHead>
-                                ))}
-                            </TableRow>
-                        ))}
-                    </TableHeader> */}
-                    <TableBody className="w-full rounded-md">
+                <Table className="order rounded-md dark:bg-dark--theme-light">
+                    <TableBody className="w-full rounded-md h-[400px] overflow-y-auto dark:bg-dark--theme">
                         {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">
+                                <div className="h-10 flex justify-between items-center w-full bg-[#eeeef1cc] dark:bg-dark--theme 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">
@@ -250,9 +238,9 @@ export function DataTableTimeSheet({ data }: { data?: IDailyPlan[] }) {
                                                             </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 variant={'outline'} className="flex items-center gap-x-2 rounded-md bg-[#E4E4E7] dark:bg-gray-800">
+                                                            <span className="text-[#5f5f61]">Total</span>
+                                                            <span className="text-[#868688]">24:30h</span>
                                                         </Badge>
                                                     </div>
                                                     <div className="flex items-center gap-2 p-x-1">
@@ -261,29 +249,37 @@ export function DataTableTimeSheet({ data }: { data?: IDailyPlan[] }) {
                                                 </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>
-                                                )}
+                                                {plan.tasks?.map((task) => (
+                                                    <div
+                                                        key={task.id}
+                                                        style={{ backgroundColor: statusColor(status).bgOpacity }}
+                                                        className="flex items-center border-b border-b-gray-200 dark:border-b-gray-600 space-x-4 p-1"
+                                                    >
+                                                        <Checkbox className="h-5 w-5" />
+                                                        <div className="flex-[2]">
+                                                            <TaskNameInfoDisplay
+                                                                task={task}
+                                                                className={clsxm('shadow-[0px_0px_15px_0px_#e2e8f0] dark:shadow-transparent')}
+                                                                taskTitleClassName={clsxm('text-sm')}
+                                                                showSize={true}
+                                                                dash
+                                                                taskNumberClassName="text-sm"
+                                                            />
+                                                        </div>
+                                                        <span className="flex-1">{task.status}</span>
+                                                        <span className="flex-1">{plan.employee?.fullName}</span>
+                                                        <span className="flex-1">
+                                                            {task.estimateHours}h, {task.estimateDays}j, {task.estimateMinutes}m
+                                                        </span>
+                                                        <TaskActionMenu idTasks={task.id} />
+                                                    </div>
+                                                ))}
                                             </AccordionContent>
                                         </AccordionItem>
                                     ))}
                                 </Accordion>
                             </div>
                         ))}
-
                     </TableBody>
                 </Table>
             </div>
@@ -299,31 +295,36 @@ export function DataTableTimeSheet({ data }: { data?: IDailyPlan[] }) {
                     <Button
                         variant={'outline'}
                         onClick={() => table.setPageIndex(0)}
-                        disabled={!table.getCanPreviousPage()}>
+                        disabled={!table.getCanPreviousPage()}
+                    >
                         <MdKeyboardDoubleArrowLeft />
                     </Button>
                     <Button
                         variant={'outline'}
                         onClick={() => table.previousPage()}
-                        disabled={!table.getCanPreviousPage()}>
+                        disabled={!table.getCanPreviousPage()}
+                    >
                         <MdKeyboardArrowLeft />
                     </Button>
                     <Button
                         variant={'outline'}
                         onClick={() => table.nextPage()}
-                        disabled={!table.getCanNextPage()}>
+                        disabled={!table.getCanNextPage()}
+                    >
                         <MdKeyboardArrowRight />
                     </Button>
                     <Button
                         variant={'outline'}
                         onClick={() => table.setPageIndex(table.getPageCount() - 1)}
-                        disabled={!table.getCanNextPage()}>
+                        disabled={!table.getCanNextPage()}
+                    >
                         <MdKeyboardDoubleArrowRight />
                     </Button>
                 </div>
             </div>
         </div>
 
+
     )
 }
 
@@ -459,7 +460,7 @@ export const StatusTask = () => {
                 </DropdownMenuSubTrigger>
                 <DropdownMenuPortal>
                     <DropdownMenuSubContent>
-                        <DropdownMenuItem textValue={'Oui'} className="cursor-pointer">
+                        <DropdownMenuItem textValue={'Yes'} className="cursor-pointer">
                             <div className="flex items-center gap-3">
                                 <span>{t('pages.timesheet.BILLABLE.YES')}</span>
                             </div>