diff --git a/apps/web/app/[locale]/page-component.tsx b/apps/web/app/[locale]/page-component.tsx
index 24e9ef2ba..fca662406 100644
--- a/apps/web/app/[locale]/page-component.tsx
+++ b/apps/web/app/[locale]/page-component.tsx
@@ -78,7 +78,7 @@ function MainPage() {
 					<TeamInvitations />
 				</MainHeader>
 
-				<div className={`z-50 bg-white dark:bg-[#191A20] pt-5 ${view !== IssuesView.CARDS ? 'pb-7' : ''}`}>
+				<div className={`z-50 bg-white dark:bg-[#191A20] pt-5 ${view == IssuesView.TABLE ? 'pb-7' : ''}`}>
 					<Container fullWidth={fullWidth}>
 						{isTeamMember ? <TaskTimerSection isTrackingEnabled={isTrackingEnabled} /> : null}
 						{view === IssuesView.CARDS && isTeamMember ? (
diff --git a/apps/web/app/[locale]/settings/personal/page.tsx b/apps/web/app/[locale]/settings/personal/page.tsx
index 4646d5c2f..1bc0a9065 100644
--- a/apps/web/app/[locale]/settings/personal/page.tsx
+++ b/apps/web/app/[locale]/settings/personal/page.tsx
@@ -11,7 +11,7 @@ const Personal = () => {
 	const t = useTranslations();
 
 	return (
-		<>
+		<div className="overflow-auto pb-16">
 			<Link href={'/settings/team'} className="w-full">
 				<button className="w-full lg:hidden hover:bg-white rounded-xl border border-dark text-dark p-4 mt-2">
 					Go to Team settings
@@ -43,7 +43,7 @@ const Personal = () => {
 			>
 				<DangerZone />
 			</Accordian>
-		</>
+		</div>
 	);
 };
 export default withAuthentication(Personal, { displayName: 'Personal' });
diff --git a/apps/web/app/[locale]/settings/team/page.tsx b/apps/web/app/[locale]/settings/team/page.tsx
index f523a31de..f99f5bc3a 100644
--- a/apps/web/app/[locale]/settings/team/page.tsx
+++ b/apps/web/app/[locale]/settings/team/page.tsx
@@ -23,7 +23,7 @@ const Team = () => {
 	const { isTeamMember, activeTeam } = useOrganizationTeams();
 	const { isTeamManager } = useIsMemberManager(user);
 	return (
-		<>
+		<div className="overflow-auto pb-16">
 			{isTeamMember ? (
 				<>
 					<Link href={'/settings/personal'} className="w-full">
@@ -110,7 +110,7 @@ const Team = () => {
 					</Card>
 				</div>
 			)}
-		</>
+		</div>
 	);
 };
 
diff --git a/apps/web/lib/features/task/task-card.tsx b/apps/web/lib/features/task/task-card.tsx
index 2ee7c1650..1d0021a97 100644
--- a/apps/web/lib/features/task/task-card.tsx
+++ b/apps/web/lib/features/task/task-card.tsx
@@ -118,7 +118,7 @@ export function TaskCard(props: Props) {
 					<SixSquareGridIcon className="w-6 h-6 text-[#CCCCCC] dark:text-[#4F5662]" />
 				</div>
 
-				<div className="flex-1 flex flex-row justify-between">
+				<div className="flex-1 max-w-[40%] flex flex-row justify-between">
 					{/* Task information */}
 					<TaskInfo
 						task={task}
diff --git a/apps/web/lib/features/team-member-cell.tsx b/apps/web/lib/features/team-member-cell.tsx
index c7962501f..db84ada65 100644
--- a/apps/web/lib/features/team-member-cell.tsx
+++ b/apps/web/lib/features/team-member-cell.tsx
@@ -17,12 +17,7 @@ export function TaskCell({ row }: { row: any }) {
 	const publicTeam = false;
 
 	return (
-		<TaskInfo
-			edition={taskEdition}
-			memberInfo={memberInfo}
-			className="2xl:w-80 3xl:w-[32rem] !w-full lg:w-1/5 lg:px-4 px-2"
-			publicTeam={publicTeam}
-		/>
+		<TaskInfo edition={taskEdition} memberInfo={memberInfo} className="max-w-[40vw] px-2" publicTeam={publicTeam} />
 	);
 }
 
@@ -32,7 +27,7 @@ export function UserInfoCell({ cell }: { cell: any }) {
 	const publicTeam = get(cell, 'column.columnDef.meta.publicTeam', false);
 	const memberInfo = useTeamMemberCard(member);
 
-	return <UserInfo memberInfo={memberInfo} className="2xl:w-[20.625rem] w-full lg:w-1/4" publicTeam={publicTeam} />;
+	return <UserInfo memberInfo={memberInfo} className="2xl:w-[20rem] w-1/4" publicTeam={publicTeam} />;
 }
 
 export function WorkedOnTaskCell({ row }: { row: any }) {
@@ -45,7 +40,7 @@ export function WorkedOnTaskCell({ row }: { row: any }) {
 			memberInfo={memberInfo}
 			task={memberInfo.memberTask}
 			isAuthUser={memberInfo.isAuthUser}
-			className="2xl:w-32 3xl:w-[8rem] min-w-[15rem] w-52 lg:w-1/5  flex flex-col gap-y-[1.125rem] justify-center"
+			className="2xl:w-48 3xl:w-[12rem] w-1/5 lg:px-4  flex flex-col gap-y-[1.125rem] justify-center"
 		/>
 	);
 }
@@ -60,7 +55,7 @@ export function TaskEstimateInfoCell({ row }: { row: any }) {
 			memberInfo={memberInfo}
 			edition={taskEdition}
 			activeAuthTask={true}
-			className="lg:px-3 2xl:w-52 3xl:w-64  min-w-[15rem] w-52 lg:w-1/5"
+			className="w-1/5 lg:px-3 2xl:w-52 3xl:w-64"
 		/>
 	);
 }
diff --git a/apps/web/lib/features/team-members.tsx b/apps/web/lib/features/team-members.tsx
index 1119ef926..d480926fb 100644
--- a/apps/web/lib/features/team-members.tsx
+++ b/apps/web/lib/features/team-members.tsx
@@ -25,7 +25,11 @@ export function TeamMembers({ publicTeam = false, kanbanView: view = IssuesView.
 	const orderedMembers = [...members].sort((a, b) => (sortByWorkStatus(a, b) ? -1 : 1));
 
 	const blockViewMembers =
-		activeFilter == 'all' ? orderedMembers : orderedMembers.filter((m) => m.timerStatus === activeFilter);
+		activeFilter == 'all'
+			? orderedMembers
+			: activeFilter == 'idle'
+			? orderedMembers.filter((m: OT_Member) => m.timerStatus == undefined || m.timerStatus == 'idle')
+			: orderedMembers.filter((m) => m.timerStatus === activeFilter);
 
 	const currentUser = members.find((m) => m.employee.userId === user?.id);
 	const $members = members
@@ -112,7 +116,8 @@ const sortByWorkStatus = (user_a: OT_Member, user_b: OT_Member) => {
 	return user_a.timerStatus == 'running' ||
 		(user_a.timerStatus == 'online' && user_b.timerStatus != 'running') ||
 		(user_a.timerStatus == 'pause' && user_b.timerStatus !== 'running' && user_b.timerStatus !== 'online') ||
-		(user_a.timerStatus == 'idle' && user_b.timerStatus == 'suspended')
+		(user_a.timerStatus == 'idle' && user_b.timerStatus == 'suspended') ||
+		(user_a.timerStatus === undefined && user_b.timerStatus == 'suspended')
 		? true
 		: false;
 };
diff --git a/apps/web/lib/features/team/invite/user-invite-card.tsx b/apps/web/lib/features/team/invite/user-invite-card.tsx
index 738a19b14..82ea889a8 100644
--- a/apps/web/lib/features/team/invite/user-invite-card.tsx
+++ b/apps/web/lib/features/team/invite/user-invite-card.tsx
@@ -68,18 +68,18 @@ export function InvitedCard({ invitation, className }: Props) {
 				<VerticalSeparator />
 
 				{/* Task information */}
-				<Text className="w-1/5 px-4 text-center opacity-40 2xl:w-80">{t('common.TASK_TITTLE')}</Text>
+				<Text className="flex-1 px-4 text-center opacity-40 ">{t('common.TASK_TITTLE')}</Text>
 				<VerticalSeparator className="ml-2" />
 
 				{/* TaskTime */}
-				<div className="flex items-center w-1/5 px-2 mb-2 space-x-2 font-normal text-center opacity-40 2xl:w-48 lg:px-4">
+				<div className="flex items-center 2xl:w-48 3xl:w-52 px-2 mb-2 space-x-2 font-normal text-center opacity-40  lg:px-4">
 					<span>{t('common.TODAY')}:</span>
 					<Text>0h : 0m</Text>
 				</div>
 				<VerticalSeparator />
 
 				{/* TaskEstimateInfo */}
-				<div className="relative flex items-center justify-center w-1/5 space-x-1 opacity-40 2xl:w-52">
+				<div className="relative flex items-center justify-center 2xl:w-48 3xl:w-64 space-x-1 opacity-40 ">
 					{/* <TimeInputField defaultValue="00" label="h" />
 					<span>:</span>
 					<TimeInputField defaultValue="00" label="m" />
@@ -89,7 +89,7 @@ export function InvitedCard({ invitation, className }: Props) {
 				<VerticalSeparator />
 
 				{/* Card menu */}
-				<div className="flex-1 font-normal text-center opacity-40">
+				<div className="2xl:w-52 3xl:w-64 font-normal text-center opacity-40">
 					<Text>0h : 0m</Text>
 				</div>
 
diff --git a/apps/web/lib/features/team/user-team-block/index.tsx b/apps/web/lib/features/team/user-team-block/index.tsx
index 07ea97078..565173a7b 100644
--- a/apps/web/lib/features/team/user-team-block/index.tsx
+++ b/apps/web/lib/features/team/user-team-block/index.tsx
@@ -83,7 +83,7 @@ export function UserTeamBlock({ className, active, member, publicTeam = false }:
 				shadow="bigger"
 				className={clsxm(
 					'relative items-center py-3 !px-4 dark:bg-[#1E2025] min-h-[7rem]',
-					['dark:border border-t-[6px] ', cardColorType[timerStatusValue]],
+					['dark:border border-t-[6px] dark:border-t-[6px]', cardColorType[timerStatusValue]],
 					className
 				)}
 			>
diff --git a/apps/web/lib/features/team/user-team-block/user-team-block-header.tsx b/apps/web/lib/features/team/user-team-block/user-team-block-header.tsx
index 13b912613..3ad755f58 100644
--- a/apps/web/lib/features/team/user-team-block/user-team-block-header.tsx
+++ b/apps/web/lib/features/team/user-team-block/user-team-block-header.tsx
@@ -41,6 +41,7 @@ export function UserTeamBlockHeader() {
 	members?.map((item) => {
 		// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 		membersStatusNumber[item.timerStatus!]++;
+		if (item.timerStatus === undefined) membersStatusNumber.idle += 1;
 	});
 
 	return (
@@ -128,8 +129,7 @@ export function UserTeamBlockHeader() {
 						<PauseIcon
 							className={clsxm(
 								'w-7 h-7 p-1 text-gray-400 dark:text-white',
-								activeFilter == 'pause' &&
-									'text-primary dark:text-white'
+								activeFilter == 'pause' && 'text-primary dark:text-white'
 							)}
 						/>
 						<p>Paused </p>
@@ -203,30 +203,6 @@ export function UserTeamBlockHeader() {
 					)}
 				</div>
 			</div>
-			{/* <div className="hidden sm:flex w-1/2 row font-normal  justify-end hidde dark:text-[#7B8089]">
-				<Transition
-					show={hook.filterType !== undefined}
-					enter="transition duration-100 ease-out"
-					enterFrom="transform scale-95 opacity-0"
-					enterTo="transform scale-100 opacity-100"
-					leave="transition duration-75 ease-out"
-					leaveFrom="transform scale-100 opacity-100"
-					leaveTo="transform scale-95 opacity-0 ease-out"
-					// className="pb-3"
-					ref={hook.outclickFilterCard.targetEl}
-				>
-					{hook.filterType === 'search' && (
-						<TaskNameFilter
-							fullWidth={true}
-							value={hook.taskName}
-							setValue={hook.setTaskName}
-							close={() => {
-								hook.toggleFilterType('search');
-							}}
-						/>
-					)}
-				</Transition>
-			</div> */}
 			<InviteFormModal open={isOpen && !!user?.isEmailVerified} closeModal={closeModal} />
 		</>
 	);
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 7c2fe52ad..f2eb407c2 100644
--- a/apps/web/lib/features/team/user-team-card/index.tsx
+++ b/apps/web/lib/features/team/user-team-card/index.tsx
@@ -132,7 +132,7 @@ export function UserTeamCard({
 					<VerticalSeparator />
 
 					{/* Task information */}
-					<div className="flex justify-between items-center flex-1">
+					<div className="flex justify-between items-center flex-1 max-w-[40%]">
 						<TaskInfo
 							edition={taskEdition}
 							memberInfo={memberInfo}
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 785027efa..86b23f803 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
@@ -14,7 +14,7 @@ export function TaskInfo({ className, memberInfo, edition, publicTeam }: Props)
 	return (
 		<div
 			className={clsxm(
-				'h-full flex flex-col items-start justify-between gap-[1.0620rem] max-h-full overflow-hidden',
+				'h-full w-full flex flex-col items-start justify-between gap-[1.0620rem] max-h-full overflow-hidden',
 				className
 			)}
 		>
diff --git a/apps/web/lib/features/team/user-team-table/user-team-table-header.tsx b/apps/web/lib/features/team/user-team-table/user-team-table-header.tsx
index 68f815ae4..6c706626e 100644
--- a/apps/web/lib/features/team/user-team-table/user-team-table-header.tsx
+++ b/apps/web/lib/features/team/user-team-table/user-team-table-header.tsx
@@ -3,11 +3,11 @@ import React from 'react';
 function UserTeamTableHeader() {
 	return (
 		<div className="flex overflow-y-auto px-4 text-center items-center pt-4">
-			<p className="min-w-[8rem]  w-1/3 ">Name</p>
-			<p className="min-w-[8rem] w-2/5 ">Task</p>
-			<p className="min-w-[8rem] w-1/12 ">Worked on Task</p>
-			<p className="min-w-[8rem] w-1/4 ">Estimate</p>
-			<p className="min-w-[8rem] w-28 ">Action</p>
+			<p className="min-w-[8rem] 2xl:w-[20.625rem] w-1/4">Name</p>
+			<p className="min-w-[8rem] flex-1 ">Task</p>
+			<p className="min-w-[8rem] w-1/5 2xl:w-48 3xl:w-[12rem]">Worked on Task</p>
+			<p className="min-w-[8rem] w-1/5 2xl:w-52 3xl:w-[14rem] text-center">Estimate</p>
+			<p className="min-w-[8rem] w-28 self-end text-end">Action</p>
 		</div>
 	);
 }
diff --git a/apps/web/lib/features/timer/timer.tsx b/apps/web/lib/features/timer/timer.tsx
index 108a17ec9..861a6eaf3 100644
--- a/apps/web/lib/features/timer/timer.tsx
+++ b/apps/web/lib/features/timer/timer.tsx
@@ -60,7 +60,7 @@ export function Timer({ className }: IClassName) {
 	return (
 		<div
 			className={clsxm(
-				'flex space-x-2 lg:flex-col xl:flex-row justify-center items-center p-2 xl:space-y-0 space-y-5',
+				'flex space-x-2 lg:flex-col xl:flex-row justify-center items-center p-2 xl:space-y-0 space-y-5 min-w-[260px]',
 				className
 			)}
 		>
@@ -69,7 +69,7 @@ export function Timer({ className }: IClassName) {
 					<div className="w-full mx-auto">
 						<Text.Heading
 							as="h3"
-							className={`text-4xl lg:text-center tracking-wide font-normal ${
+							className={`text-4xl w-[200px] lg:text-start tracking-wide font-normal ${
 								timerStatus?.running &&
 								timerStatus?.lastLog?.source &&
 								timerStatus?.lastLog?.source !== TimerSource.TEAMS