diff --git a/apps/web/lib/features/task/activity/user-task-activity.tsx b/apps/web/lib/features/task/activity/user-task-activity.tsx
index 97cf47f23..f572b9a01 100644
--- a/apps/web/lib/features/task/activity/user-task-activity.tsx
+++ b/apps/web/lib/features/task/activity/user-task-activity.tsx
@@ -1,44 +1,101 @@
+import React from 'react';
 import { clsxm } from '@app/utils';
 import { Tab } from '@headlessui/react';
 import { ActivityFilters } from '@app/constants';
+import { ITaskTimesheet } from '@app/interfaces';
+import { ChevronDownIcon, ChevronUpIcon } from 'lib/components/svgs';
+import { Tooltip } from 'lib/components';
+import ScreenshotItem from 'lib/features/activity/components/screenshot-item';
 
-export const UserTaskActivity = () => {
-	// get slots related to Task Id
-	// get apps visited related to Task Id
-	// get visited Sites related to Task Id
+export const UserTaskActivity = ({ timesheet }: { timesheet: ITaskTimesheet }) => {
+	const [hidden, setHidden] = React.useState(true);
+	// TODO: fetch Apps et Sites Visited
 	return (
 		<div className="shadow-md rounded-md  p-4 my-4 bg-[#00000014] dark:bg-[#26272C]">
-			<div className="flex items-center gap-2 my-2">
-				<h4 className="text-lg">{'Cedric medium'}</h4>
-				<span>{'05:30'}</span>
+			<div className="flex justify-between items-center gap-5 py-2 border-b border-b-[#00000014] dark:border-b-[#7B8089]">
+				<div className="flex items-center gap-2 my-2">
+					<h4 className="text-base">{timesheet.employee?.fullName}</h4>
+					<span>{timesheet.duration}</span>
+				</div>
+
+				<div className="flex items-center justify-end gap-2.5">
+					<button onClick={() => setHidden((e) => !e)}>
+						{hidden ? (
+							<ChevronDownIcon className="h-4 w-4 stroke-[#293241] dark:stroke-white cursor-pointer" />
+						) : (
+							<ChevronUpIcon className="h-4 w-4 stroke-[#293241] dark:stroke-white cursor-pointer" />
+						)}
+					</button>
+				</div>
+			</div>
+			<div className={clsxm('flex flex-col max-h-80 gap-3', hidden && ['hidden'])}>
+				<Tab.Group>
+					<Tab.List className="w-full flex rounded-xl bg-gray-200 dark:bg-[#FFFFFF14] p-2">
+						{Object.values(ActivityFilters)
+							.filter((filter) => filter !== 'Tasks')
+							.map((filter: string) => (
+								<Tab
+									key={filter}
+									className={({ selected }) =>
+										clsxm(
+											'w-full rounded-lg py-2.5 text-sm font-medium leading-5',
+											' focus:outline-none focus:ring-2',
+											selected
+												? 'bg-white dark:bg-dark text-blue-700 shadow'
+												: ' hover:bg-white/[0.50]'
+										)
+									}
+								>
+									{filter}
+								</Tab>
+							))}
+					</Tab.List>
+					<Tab.Panels>
+						<Tab.Panel className="w-full mx-4 py-4">
+							<div className="my-2 flex w-full overflow-x-auto">
+								{timesheet.timeSlot?.screenshots?.map((screenshot, i) => (
+									<div key={i} className="w-1/3 min-w-[20rem] p-2">
+										<Tooltip
+											label={screenshot.description}
+											placement="left-start"
+											type="VERTICAL"
+											labelContainerClassName="w-full"
+										>
+											<ScreenshotItem
+												idSlot={timesheet.timeSlot?.id ?? ''}
+												endTime={timesheet.timeSlot?.stoppedAt ?? ''}
+												startTime={screenshot.recordedAt}
+												imageUrl={screenshot.thumbUrl}
+												percent={timesheet.timeSlot?.percentage ?? 0}
+												showProgress={false}
+												onShow={() => null}
+											/>
+										</Tooltip>
+										<div className="bg-gray-100 dark:dark:bg-[#26272C] rounded-b-lg p-2">
+											<h5>Source</h5>
+											<div className="my-1 flex gap-1 flex-wrap">
+												<span className="rounded-lg px-1 mb-1 text-white bg-blue-600">
+													{timesheet.source}
+												</span>
+												{screenshot.apps?.map((app, i) => (
+													<span
+														key={i}
+														className="rounded-lg px-1 mb-1 text-white bg-blue-600"
+													>
+														{app}
+													</span>
+												))}
+											</div>
+										</div>
+									</div>
+								))}
+							</div>
+						</Tab.Panel>
+						<Tab.Panel className="w-full mx-4 py-4">{'Apps Tab'}</Tab.Panel>
+						<Tab.Panel className="w-full mx-4 py-4">{'VisitedSites Tab'}</Tab.Panel>
+					</Tab.Panels>
+				</Tab.Group>
 			</div>
-			<Tab.Group>
-				<Tab.List className="w-full flex rounded-xl bg-gray-200 dark:bg-[#FFFFFF14] p-2">
-					{Object.values(ActivityFilters)
-						.filter((filter) => filter !== 'Tasks')
-						.map((filter: string) => (
-							<Tab
-								key={filter}
-								className={({ selected }) =>
-									clsxm(
-										'w-full rounded-lg py-2.5 text-sm font-medium leading-5',
-										' focus:outline-none focus:ring-2',
-										selected
-											? 'bg-white dark:bg-dark text-blue-700 shadow'
-											: ' hover:bg-white/[0.50]'
-									)
-								}
-							>
-								{filter}
-							</Tab>
-						))}
-				</Tab.List>
-				<Tab.Panels>
-					<Tab.Panel className="w-full mx-4 py-4">{'Screenshoot Team Tab'}</Tab.Panel>
-					<Tab.Panel className="w-full mx-4 py-4">{'Apps Tab'}</Tab.Panel>
-					<Tab.Panel className="w-full mx-4 py-4">{'VisitedSites Tab'}</Tab.Panel>
-				</Tab.Panels>
-			</Tab.Group>
 		</div>
 	);
 };
diff --git a/apps/web/lib/features/task/task-activity.tsx b/apps/web/lib/features/task/task-activity.tsx
index a325be303..31be7b103 100644
--- a/apps/web/lib/features/task/task-activity.tsx
+++ b/apps/web/lib/features/task/task-activity.tsx
@@ -7,12 +7,15 @@ import { ITeamTask } from '@app/interfaces';
 import { useTaskTimeSheets } from '@app/hooks/features/useTaskActivity';
 import { groupByTime } from '@app/helpers/array-data';
 
+import { clsxm } from '@app/utils';
+import { ChevronDownIcon, ChevronUpIcon } from 'lib/components/svgs';
+
 export function TaskActivity({ task }: { task: ITeamTask }) {
-	// get users tasks
 	const { getTaskTimesheets, taskTimesheets } = useTaskTimeSheets(task?.id);
+	const [hidden, setHidden] = React.useState(true);
+
 	// order activity arr by Time
 	const groupedData = groupByTime(taskTimesheets);
-	console.log(groupedData);
 
 	React.useEffect(() => {
 		getTaskTimesheets();
@@ -22,33 +25,34 @@ export function TaskActivity({ task }: { task: ITeamTask }) {
 			className="w-full p-4 md:px-4 dark:bg-[#25272D] flex flex-col gap-6 border border-[#00000014] dark:border-[#26272C]"
 			shadow="bigger"
 		>
-			{/* TO DELETE: start */}
-			<div className="shadow-lg rounded-lg p-4 bg-light dark:bg-dark border border-[#00000014] dark:border-[#26272C]">
-				<h3 className="text-xl font-semibold py-2">{'05.01.2024'}</h3>
-				<UserTaskActivity />
-				<UserTaskActivity />
-			</div>
-			{/* TO DELETE: end */}
-			{groupedData.map((timesheet, i) => (
-				<div
-					key={i}
-					className="shadow-lg rounded-lg p-4 bg-light dark:bg-dark border border-[#00000014] dark:border-[#26272C]"
-				>
-					<h3 className="text-xl font-semibold py-2">{timesheet.date}</h3>
-					{timesheet.items.map((item) => (
-						<UserTaskActivity key={item.id} />
-					))}
+			<div className="flex justify-between items-center gap-5 py-2 border-b border-b-[#00000014] dark:border-b-[#7B8089]">
+				<div className="flex items-center gap-2 my-2">
+					<h4 className="text-base">{'Timesheet'}</h4>
 				</div>
-			))}
 
-			{/* TO DELETE: start */}
-			<div className="shadow-lg rounded-lg p-4 bg-light dark:bg-dark border border-[#00000014] dark:border-[#26272C]">
-				<h3 className="text-xl font-semibold py-2">{'03.01.2024'}</h3>
-				<UserTaskActivity />
-				<UserTaskActivity />
-				<UserTaskActivity />
+				<div className="flex items-center justify-end gap-2.5">
+					<button onClick={() => setHidden((e) => !e)}>
+						{hidden ? (
+							<ChevronDownIcon className="h-4 w-4 stroke-[#293241] dark:stroke-white cursor-pointer" />
+						) : (
+							<ChevronUpIcon className="h-4 w-4 stroke-[#293241] dark:stroke-white cursor-pointer" />
+						)}
+					</button>
+				</div>
+			</div>
+			<div className={clsxm('flex flex-col max-h-80 gap-3', hidden && ['hidden'])}>
+				{groupedData.map((timesheet, i) => (
+					<div
+						key={i}
+						className="shadow-lg rounded-lg p-4 bg-light dark:bg-dark border border-[#00000014] dark:border-[#26272C]"
+					>
+						<h3 className="text-base font-semibold py-2">{timesheet.date}</h3>
+						{timesheet.items.map((item) => (
+							<UserTaskActivity key={item.id} timesheet={item} />
+						))}
+					</div>
+				))}
 			</div>
-			{/* TO DELETE: end */}
 		</Card>
 	);
 }
diff --git a/apps/web/lib/settings/JitsuRoot.tsx b/apps/web/lib/settings/JitsuRoot.tsx
index de7f8e5c5..006c8b026 100644
--- a/apps/web/lib/settings/JitsuRoot.tsx
+++ b/apps/web/lib/settings/JitsuRoot.tsx
@@ -27,7 +27,6 @@ export function JitsuRoot({ pageProps, children }: MyAppProps) {
 	const isJitsuEnvs: boolean = jitsuConf.host !== '' && jitsuConf.writeKey !== '';
 	console.log(`Jitsu Enabled: ${isJitsuEnvs}`);
 	console.log(`Jitsu Configuration: ${JSON.stringify(jitsuConf)}`);
-	console.log(`Jitsu: ${pageProps}`);
 
 	return (
 		<JitsuProvider
diff --git a/apps/web/package.json b/apps/web/package.json
index d1af861b1..68aac4517 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -110,7 +110,7 @@
 		"@types/react-dom": "18.0.6",
 		"@types/react-google-recaptcha": "^2.1.5",
 		"eslint": "^8.28.0",
-		"eslint-config-next": "^13.1.6",
+		"eslint-config-next": "^14.0.4",
 		"typescript": "^4.9.4"
 	},
 	"prettier": {