diff --git a/apps/extensions/yarn.lock b/apps/extensions/yarn.lock
index e49a44463..2b8e1f5d3 100644
--- a/apps/extensions/yarn.lock
+++ b/apps/extensions/yarn.lock
@@ -305,35 +305,35 @@
     "@lezer/lr" "^0.15.4"
     json5 "^2.2.1"
 
-"@msgpackr-extract/msgpackr-extract-darwin-arm64@2.2.0":
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/@msgpackr-extract/msgpackr-extract-darwin-arm64/-/msgpackr-extract-darwin-arm64-2.2.0.tgz#901c5937e1441572ea23e631fe6deca68482fe76"
-  integrity sha512-Z9LFPzfoJi4mflGWV+rv7o7ZbMU5oAU9VmzCgL240KnqDW65Y2HFCT3MW06/ITJSnbVLacmcEJA8phywK7JinQ==
+"@msgpackr-extract/msgpackr-extract-darwin-arm64@3.0.2":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@msgpackr-extract/msgpackr-extract-darwin-arm64/-/msgpackr-extract-darwin-arm64-3.0.2.tgz#44d752c1a2dc113f15f781b7cc4f53a307e3fa38"
+  integrity sha512-9bfjwDxIDWmmOKusUcqdS4Rw+SETlp9Dy39Xui9BEGEk19dDwH0jhipwFzEff/pFg95NKymc6TOTbRKcWeRqyQ==
 
-"@msgpackr-extract/msgpackr-extract-darwin-x64@2.2.0":
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/@msgpackr-extract/msgpackr-extract-darwin-x64/-/msgpackr-extract-darwin-x64-2.2.0.tgz#fb877fe6bae3c4d3cea29786737840e2ae689066"
-  integrity sha512-vq0tT8sjZsy4JdSqmadWVw6f66UXqUCabLmUVHZwUFzMgtgoIIQjT4VVRHKvlof3P/dMCkbMJ5hB1oJ9OWHaaw==
+"@msgpackr-extract/msgpackr-extract-darwin-x64@3.0.2":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@msgpackr-extract/msgpackr-extract-darwin-x64/-/msgpackr-extract-darwin-x64-3.0.2.tgz#f954f34355712212a8e06c465bc06c40852c6bb3"
+  integrity sha512-lwriRAHm1Yg4iDf23Oxm9n/t5Zpw1lVnxYU3HnJPTi2lJRkKTrps1KVgvL6m7WvmhYVt/FIsssWay+k45QHeuw==
 
-"@msgpackr-extract/msgpackr-extract-linux-arm64@2.2.0":
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/@msgpackr-extract/msgpackr-extract-linux-arm64/-/msgpackr-extract-linux-arm64-2.2.0.tgz#986179c38b10ac41fbdaf7d036c825cbc72855d9"
-  integrity sha512-hlxxLdRmPyq16QCutUtP8Tm6RDWcyaLsRssaHROatgnkOxdleMTgetf9JsdncL8vLh7FVy/RN9i3XR5dnb9cRA==
+"@msgpackr-extract/msgpackr-extract-linux-arm64@3.0.2":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@msgpackr-extract/msgpackr-extract-linux-arm64/-/msgpackr-extract-linux-arm64-3.0.2.tgz#45c63037f045c2b15c44f80f0393fa24f9655367"
+  integrity sha512-FU20Bo66/f7He9Fp9sP2zaJ1Q8L9uLPZQDub/WlUip78JlPeMbVL8546HbZfcW9LNciEXc8d+tThSJjSC+tmsg==
 
-"@msgpackr-extract/msgpackr-extract-linux-arm@2.2.0":
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/@msgpackr-extract/msgpackr-extract-linux-arm/-/msgpackr-extract-linux-arm-2.2.0.tgz#15f2c6fe9e0adc06c21af7e95f484ff4880d79ce"
-  integrity sha512-SaJ3Qq4lX9Syd2xEo9u3qPxi/OB+5JO/ngJKK97XDpa1C587H9EWYO6KD8995DAjSinWvdHKRrCOXVUC5fvGOg==
+"@msgpackr-extract/msgpackr-extract-linux-arm@3.0.2":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@msgpackr-extract/msgpackr-extract-linux-arm/-/msgpackr-extract-linux-arm-3.0.2.tgz#35707efeafe6d22b3f373caf9e8775e8920d1399"
+  integrity sha512-MOI9Dlfrpi2Cuc7i5dXdxPbFIgbDBGgKR5F2yWEa6FVEtSWncfVNKW5AKjImAQ6CZlBK9tympdsZJ2xThBiWWA==
 
-"@msgpackr-extract/msgpackr-extract-linux-x64@2.2.0":
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/@msgpackr-extract/msgpackr-extract-linux-x64/-/msgpackr-extract-linux-x64-2.2.0.tgz#30cae5c9a202f3e1fa1deb3191b18ffcb2f239a2"
-  integrity sha512-94y5PJrSOqUNcFKmOl7z319FelCLAE0rz/jPCWS+UtdMZvpa4jrQd+cJPQCLp2Fes1yAW/YUQj/Di6YVT3c3Iw==
+"@msgpackr-extract/msgpackr-extract-linux-x64@3.0.2":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@msgpackr-extract/msgpackr-extract-linux-x64/-/msgpackr-extract-linux-x64-3.0.2.tgz#091b1218b66c341f532611477ef89e83f25fae4f"
+  integrity sha512-gsWNDCklNy7Ajk0vBBf9jEx04RUxuDQfBse918Ww+Qb9HCPoGzS+XJTLe96iN3BVK7grnLiYghP/M4L8VsaHeA==
 
-"@msgpackr-extract/msgpackr-extract-win32-x64@2.2.0":
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/@msgpackr-extract/msgpackr-extract-win32-x64/-/msgpackr-extract-win32-x64-2.2.0.tgz#016d855b6bc459fd908095811f6826e45dd4ba64"
-  integrity sha512-XrC0JzsqQSvOyM3t04FMLO6z5gCuhPE6k4FXuLK5xf52ZbdvcFe1yBmo7meCew9B8G2f0T9iu9t3kfTYRYROgA==
+"@msgpackr-extract/msgpackr-extract-win32-x64@3.0.2":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@msgpackr-extract/msgpackr-extract-win32-x64/-/msgpackr-extract-win32-x64-3.0.2.tgz#0f164b726869f71da3c594171df5ebc1c4b0a407"
+  integrity sha512-O+6Gs8UeDbyFpbSh2CPEz/UOrrdWPTBYNblZK5CxxLisYt4kGX3Sc+czffFonyjiGSq3jWLwJS/CCJc7tBr4sQ==
 
 "@nodelib/fs.scandir@2.1.5":
   version "2.1.5"
@@ -3069,26 +3069,26 @@ ms@^2.1.1:
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
   integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
 
-msgpackr-extract@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/msgpackr-extract/-/msgpackr-extract-2.2.0.tgz#4bb749b58d9764cfdc0d91c7977a007b08e8f262"
-  integrity sha512-0YcvWSv7ZOGl9Od6Y5iJ3XnPww8O7WLcpYMDwX+PAA/uXLDtyw94PJv9GLQV/nnp3cWlDhMoyKZIQLrx33sWog==
+msgpackr-extract@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/msgpackr-extract/-/msgpackr-extract-3.0.2.tgz#e05ec1bb4453ddf020551bcd5daaf0092a2c279d"
+  integrity sha512-SdzXp4kD/Qf8agZ9+iTu6eql0m3kWm1A2y1hkpTeVNENutaB0BwHlSvAIaMxwntmRUAUjon2V4L8Z/njd0Ct8A==
   dependencies:
-    node-gyp-build-optional-packages "5.0.3"
+    node-gyp-build-optional-packages "5.0.7"
   optionalDependencies:
-    "@msgpackr-extract/msgpackr-extract-darwin-arm64" "2.2.0"
-    "@msgpackr-extract/msgpackr-extract-darwin-x64" "2.2.0"
-    "@msgpackr-extract/msgpackr-extract-linux-arm" "2.2.0"
-    "@msgpackr-extract/msgpackr-extract-linux-arm64" "2.2.0"
-    "@msgpackr-extract/msgpackr-extract-linux-x64" "2.2.0"
-    "@msgpackr-extract/msgpackr-extract-win32-x64" "2.2.0"
+    "@msgpackr-extract/msgpackr-extract-darwin-arm64" "3.0.2"
+    "@msgpackr-extract/msgpackr-extract-darwin-x64" "3.0.2"
+    "@msgpackr-extract/msgpackr-extract-linux-arm" "3.0.2"
+    "@msgpackr-extract/msgpackr-extract-linux-arm64" "3.0.2"
+    "@msgpackr-extract/msgpackr-extract-linux-x64" "3.0.2"
+    "@msgpackr-extract/msgpackr-extract-win32-x64" "3.0.2"
 
 msgpackr@^1.5.4:
-  version "1.8.0"
-  resolved "https://registry.yarnpkg.com/msgpackr/-/msgpackr-1.8.0.tgz#6cf213e88f04c5a358c61085a42a4dbe5542de44"
-  integrity sha512-1Cos3r86XACdjLVY4CN8r72Cgs5lUzxSON6yb81sNZP9vC9nnBrEbu1/ldBhuR9BKejtoYV5C9UhmYUvZFJSNQ==
+  version "1.10.1"
+  resolved "https://registry.yarnpkg.com/msgpackr/-/msgpackr-1.10.1.tgz#51953bb4ce4f3494f0c4af3f484f01cfbb306555"
+  integrity sha512-r5VRLv9qouXuLiIBrLpl2d5ZvPt8svdQTl5/vMvE4nzDMyEX4sgW5yWhuBBj5UmgwOTWj8CIdSXn5sAfsHAWIQ==
   optionalDependencies:
-    msgpackr-extract "^2.2.0"
+    msgpackr-extract "^3.0.2"
 
 mute-stream@0.0.8:
   version "0.0.8"
@@ -3158,6 +3158,11 @@ node-gyp-build-optional-packages@5.0.3:
   resolved "https://registry.yarnpkg.com/node-gyp-build-optional-packages/-/node-gyp-build-optional-packages-5.0.3.tgz#92a89d400352c44ad3975010368072b41ad66c17"
   integrity sha512-k75jcVzk5wnnc/FMxsf4udAoTEUv2jY3ycfdSd3yWu6Cnd1oee6/CfZJApyscA4FJOmdoixWwiwOyf16RzD5JA==
 
+node-gyp-build-optional-packages@5.0.7:
+  version "5.0.7"
+  resolved "https://registry.yarnpkg.com/node-gyp-build-optional-packages/-/node-gyp-build-optional-packages-5.0.7.tgz#5d2632bbde0ab2f6e22f1bbac2199b07244ae0b3"
+  integrity sha512-YlCCc6Wffkx0kHkmam79GKvDQ6x+QZkMjFGrIMxgFNILFvGSbCp2fCBC55pGTT9gVaz8Na5CLmxt/urtzRv36w==
+
 node-gyp-build@^4.3.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/node-gyp-build/-/node-gyp-build-4.5.0.tgz#7a64eefa0b21112f89f58379da128ac177f20e40"
diff --git a/apps/web/lib/components/kanban-card.tsx b/apps/web/lib/components/kanban-card.tsx
index ff327dd46..608563f4d 100644
--- a/apps/web/lib/components/kanban-card.tsx
+++ b/apps/web/lib/components/kanban-card.tsx
@@ -1,247 +1,208 @@
 import Image from 'next/image';
-import VerticalThreeDot from "@components/ui/svgs/vertical-three-dot";
-import { DraggableProvided } from "react-beautiful-dnd";
-import CircularProgress from "@components/ui/svgs/circular-progress";
-import PriorityIcon from "@components/ui/svgs/priority-icon";
-import { Tag } from "@app/interfaces";
-import { useTimerView } from "@app/hooks";
-import { pad } from "@app/helpers";
-import { TaskStatus } from "@app/constants";
-import { useEffect } from "react";
-import { TaskIssueStatus } from "lib/features";
+import VerticalThreeDot from '@components/ui/svgs/vertical-three-dot';
+import { DraggableProvided } from 'react-beautiful-dnd';
+import CircularProgress from '@components/ui/svgs/circular-progress';
+import PriorityIcon from '@components/ui/svgs/priority-icon';
+import { Tag } from '@app/interfaces';
+import { useTimerView } from '@app/hooks';
+import { pad } from '@app/helpers';
+import { TaskStatus } from '@app/constants';
+import { TaskIssueStatus } from 'lib/features';
 
 function getStyle(provided: DraggableProvided, style: any) {
-    if (!style) {
-      return provided.draggableProps.style;
-    }
-  
-    return {
-      ...provided.draggableProps.style,
-      ...style,
-    };
+	if (!style) {
+		return provided.draggableProps.style;
+	}
+
+	return {
+		...provided.draggableProps.style,
+		...style
+	};
 }
 
-function setCommentIconColor(commentType: "tagged" | "untagged") {
-
-    let style;
-
-    if(commentType === "tagged"){
-        style = {
-            backgroundColor: '#D95F5F'
-        }
-    }else if(commentType === "untagged"){
-        style = {
-            backgroundColor: '#27AE60'
-        }
-    } else {
-        style = {
-
-        }
-    }
-
-    return style
+function setCommentIconColor(commentType: 'tagged' | 'untagged') {
+	let style;
+
+	if (commentType === 'tagged') {
+		style = {
+			backgroundColor: '#D95F5F'
+		};
+	} else if (commentType === 'untagged') {
+		style = {
+			backgroundColor: '#27AE60'
+		};
+	} else {
+		style = {};
+	}
+
+	return style;
 }
 
-function TagCard({title, backgroundColor, color}: {
-    title: string,
-    backgroundColor: string,
-    color: string
-}) {
-
-    return (
-        <>
-            <div 
-                className="flex flex-row gap-2 items-center py-1 px-2.5 rounded-[10px]"
-                style={{
-                    backgroundColor: `${backgroundColor}`
-                }}
-            >
-               
-                <p 
-                    className={`text-xs `}
-                    style={{
-                        color: `${color}`
-                    }}
-                >{title}</p>
-            </div>
-        </>
-    )
+function TagCard({ title, backgroundColor, color }: { title: string; backgroundColor: string; color: string }) {
+	return (
+		<>
+			<div
+				className="flex flex-row gap-2 items-center py-1 px-2.5 rounded-[10px]"
+				style={{
+					backgroundColor: `${backgroundColor}`
+				}}
+			>
+				<p
+					className={`text-xs `}
+					style={{
+						color: `${color}`
+					}}
+				>
+					{title}
+				</p>
+			</div>
+		</>
+	);
 }
 
-function TagList({tags}: {
-    tags: Tag[]
-}){
-    return (
-        <>
-            <div className="flex flex-wrap gap-1 items-center">
-                {tags.map((tag: Tag, index: number)=> {
-                    return (
-                        <TagCard 
-                            key={index}
-                            title={tag.name} 
-                            backgroundColor={tag.color} 
-                            color={"#FFFFFF"}
-                        />
-                    )
-                })}
-            </div>
-        </>
-    )
+function TagList({ tags }: { tags: Tag[] }) {
+	return (
+		<>
+			<div className="flex flex-wrap gap-1 items-center">
+				{tags.map((tag: Tag, index: number) => {
+					return <TagCard key={index} title={tag.name} backgroundColor={tag.color} color={'#FFFFFF'} />;
+				})}
+			</div>
+		</>
+	);
 }
 
-
 export const stackImages = (index: number, length: number) => {
-    const imageRadius = 20;
-    
-    const total_length = ((length+1) * imageRadius);
-   
-    return {
-        zIndex: (index+1).toString(),
-        right:  `calc(${total_length -(imageRadius * (index + 2))}px)`
-    }
-}
-
-function Priority({
-    level
-}: {
-    level: number
-}) {
-
-    const numberArray = Array.from({ length: level }, (_, index) => index + 1);
-
-    return(
-        <>
-            <div className="flex flex-col">
-                {numberArray.map((item: any, index: number)=> {
-                    return (
-                        <PriorityIcon key={index}/>
-                    )
-                })}
-            </div>
-        </>
-    )
+	const imageRadius = 20;
+
+	const total_length = (length + 1) * imageRadius;
+
+	return {
+		zIndex: (index + 1).toString(),
+		right: `calc(${total_length - imageRadius * (index + 2)}px)`
+	};
+};
+
+function Priority({ level }: { level: number }) {
+	const numberArray = Array.from({ length: level }, (_, index) => index + 1);
+
+	return (
+		<>
+			<div className="flex flex-col">
+				{numberArray.map((item: any, index: number) => {
+					return <PriorityIcon key={index} />;
+				})}
+			</div>
+		</>
+	);
 }
 
 /**
  * card that represent each task
- * @param props 
- * @returns 
+ * @param props
+ * @returns
  */
-export default function Item(props: any) {   
-
-    const {
-      item,
-      isDragging,
-      isGroupedOver,
-      provided,
-      style,
-      isClone,
-      index,
-    } = props;
-
-    const {
-        hours,
-		minutes,
-		seconds,
-        startTimer,
-		stopTimer,
-        timerStatus
-    } = useTimerView();
-
-    const handleTime = ()=>{
-        if(item.status === TaskStatus.INPROGRESS){
-            startTimer()
-        } else {
-            stopTimer()
-        }
-        
-    }
-
-    useEffect(()=>{
-        handleTime()
-    },[timerStatus?.running])
-   
-    return (
-      <section
-        href={``}
-        isDragging={isDragging}
-        isGroupedOver={isGroupedOver}
-        isClone={isClone}
-        ref={provided.innerRef}
-        {...provided.draggableProps}
-        {...provided.dragHandleProps}
-        style={getStyle(provided, style)}
-        className="flex flex-col rounded-2xl bg-white dark:bg-dark--theme-light p-4 relative"
-        data-is-dragging={isDragging}
-        data-testid={item.id}
-        data-index={index}
-        aria-label={`${item.status.name} ${item.content}`}
-      >
-        <div className="flex gap-1.5 border-b border-b-gray-200 pb-4">
-            <div className="flex flex-col gap-5 grow">
-                {item.tags && (
-                    <TagList tags={item.tags}/>
-                )}
-               
-                <div className="flex flex-row flex-wrap items-center text-sm not-italic font-semibold">
-                    <TaskIssueStatus showIssueLabels={false} task={item} className={`${
-						item.issueType === 'Bug' ? '!px-[0.3312rem] py-[0.2875rem]' : '!px-[0.375rem] py-[0.375rem]'
-					} rounded-sm mr-1`}/>
-                    
-                    <span className="text-grey text-normal mr-1">#{item.number}</span>
-                    <span className="text-black dark:text-white text-normal capitalize mr-2 bg-blue line-clamp-2">
-                        {item.title}
-                    </span>
-                    <Priority level={1}/>
-                </div>
-            </div>
-            <div className="flex flex-col w-[48px] justify-between items-end">
-                <VerticalThreeDot/>
-
-                <CircularProgress percentage={10}/>
-            </div>
-        </div>
-        <div className="flex flex-row justify-between items-center pt-4 h-fit">
-
-            {item.status === TaskStatus.INPROGRESS ? (
-                <div className="flex flex-row items-center gap-2">
-                    <small className="text-grey text-xs text-normal">Live:</small>
-                    <p className="text-[#219653] font-medium text-sm">{pad(hours)}:{pad(minutes)}:{pad(seconds)} </p>
-                </div>
-            ): (
-                <div className="flex flex-row items-center gap-2">
-                    <small className="text-grey text-xs text-normal">Worked:</small>
-                    <p className="text-black dark:text-white font-medium text-sm">{pad(hours)}:{pad(minutes)}:{pad(seconds)} </p>
-                </div>
-            )}
-            
-            <div className="relative ">
-                <div className="w-10 flex h-fit flex-row justify-end items-center relative">
-                {item.members.map((option: any, index: number)=> {
-                    return (
-                        <div className="relative w-[40px] h-[40px]" key={index}>
-                        <Image 
-                            src={option.user.imageUrl} 
-                            alt={`${option.user.firstName} avatar`} 
-                            fill={true}
-                            className="absolute rounded-full border-2 border-white"
-                            style={stackImages(index, item.members.length)}
-                        />
-                        </div>
-                    )
-                })}
-               </div>
-            </div>
-        </div>
-        {item.hasComment &&
-            (<div className="flex flex-row items-center justify-center rounded-full w-5 h-5 z-10 bg-[#e5e7eb] dark:bg-[#181920] absolute top-0 right-0">
-                <div 
-                    className="w-3.5 h-3.5 rounded-full"
-                    style={setCommentIconColor(item.hasComment)}
-                >
-                </div>
-            </div>)
-        }
-      </section>
-    );
-}
\ No newline at end of file
+export default function Item(props: any) {
+	const { item, isDragging, isGroupedOver, provided, style, isClone, index } = props;
+
+	const { hours, minutes, seconds } = useTimerView();
+
+	// const handleTime = () => {
+	// 	if (item.status === TaskStatus.INPROGRESS) {
+	// 		startTimer();
+	// 	} else {
+	// 		stopTimer();
+	// 	}
+	// };
+
+	// useEffect(() => {
+	// 	handleTime();
+	// }, [timerStatus?.running]);
+
+	return (
+		<section
+			href={``}
+			isDragging={isDragging}
+			isGroupedOver={isGroupedOver}
+			isClone={isClone}
+			ref={provided.innerRef}
+			{...provided.draggableProps}
+			{...provided.dragHandleProps}
+			style={getStyle(provided, style)}
+			className="flex flex-col rounded-2xl bg-white dark:bg-dark--theme-light p-4 relative"
+			data-is-dragging={isDragging}
+			data-testid={item.id}
+			data-index={index}
+			aria-label={`${item.status.name} ${item.content}`}
+		>
+			<div className="flex gap-1.5 border-b border-b-gray-200 pb-4">
+				<div className="flex flex-col gap-5 grow">
+					{item.tags && <TagList tags={item.tags} />}
+
+					<div className="flex flex-row flex-wrap items-center text-sm not-italic font-semibold">
+						<TaskIssueStatus
+							showIssueLabels={false}
+							task={item}
+							className={`${
+								item.issueType === 'Bug'
+									? '!px-[0.3312rem] py-[0.2875rem]'
+									: '!px-[0.375rem] py-[0.375rem]'
+							} rounded-sm mr-1`}
+						/>
+
+						<span className="text-grey text-normal mr-1">#{item.number}</span>
+						<span className="text-black dark:text-white text-normal capitalize mr-2 bg-blue line-clamp-2">
+							{item.title}
+						</span>
+						<Priority level={1} />
+					</div>
+				</div>
+				<div className="flex flex-col w-[48px] justify-between items-end">
+					<VerticalThreeDot />
+
+					<CircularProgress percentage={10} />
+				</div>
+			</div>
+			<div className="flex flex-row justify-between items-center pt-4 h-fit">
+				{item.status === TaskStatus.INPROGRESS ? (
+					<div className="flex flex-row items-center gap-2">
+						<small className="text-grey text-xs text-normal">Live:</small>
+						<p className="text-[#219653] font-medium text-sm">
+							{pad(hours)}:{pad(minutes)}:{pad(seconds)}{' '}
+						</p>
+					</div>
+				) : (
+					<div className="flex flex-row items-center gap-2">
+						<small className="text-grey text-xs text-normal">Worked:</small>
+						<p className="text-black dark:text-white font-medium text-sm">
+							{pad(hours)}:{pad(minutes)}:{pad(seconds)}{' '}
+						</p>
+					</div>
+				)}
+
+				<div className="relative ">
+					<div className="w-10 flex h-fit flex-row justify-end items-center relative">
+						{item.members.map((option: any, index: number) => {
+							return (
+								<div className="relative w-[40px] h-[40px]" key={index}>
+									<Image
+										src={option.user.imageUrl}
+										alt={`${option.user.firstName} avatar`}
+										fill={true}
+										className="absolute rounded-full border-2 border-white"
+										style={stackImages(index, item.members.length)}
+									/>
+								</div>
+							);
+						})}
+					</div>
+				</div>
+			</div>
+			{item.hasComment && (
+				<div className="flex flex-row items-center justify-center rounded-full w-5 h-5 z-10 bg-[#e5e7eb] dark:bg-[#181920] absolute top-0 right-0">
+					<div className="w-3.5 h-3.5 rounded-full" style={setCommentIconColor(item.hasComment)}></div>
+				</div>
+			)}
+		</section>
+	);
+}
diff --git a/apps/web/lib/components/tooltip.tsx b/apps/web/lib/components/tooltip.tsx
index 7c1a08e80..5e478bc7a 100644
--- a/apps/web/lib/components/tooltip.tsx
+++ b/apps/web/lib/components/tooltip.tsx
@@ -47,14 +47,7 @@ export function Tooltip({
 						{...getTooltipProps()}
 						className={clsx('tooltip-container w-1/3 md:w-fit', labelContainerClassName)}
 					>
-						<span
-							className={clsx(labelClassName, 'text-xs font-poppins')}
-							// style={{
-							// 	fontFamily: 'poppins'
-							// }}
-						>
-							{label}
-						</span>
+						<span className={clsx(labelClassName, 'text-xs font-poppins')}>{label}</span>
 						<div {...getArrowProps()} className="tooltip-arrow" />
 					</Transition>
 				</>
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 99f629688..d59b1c7c4 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
@@ -52,18 +52,17 @@ export function UserTeamBlockHeader() {
 	return (
 		<>
 			<div className="hidden sm:flex row font-normal pt-4 justify-between hidde dark:text-[#7B8089]">
-				<div className="flex items-center w-5/6">
+				<div className="flex items-center w-9/12">
 					<div
 						className={clsxm(
-							'w-1/6 text-center flex items-center justify-center gap-2 py-4 cursor-pointer',
-							activeFilter == 'all' &&
-								'border-b-4 border-primary dark:border-white  text-primary dark:text-white'
+							'w-1/6 text-center flex items-center justify-center gap-2 py-4 cursor-pointer text-sm border-b-4 border-transparent',
+							activeFilter == 'all' && 'border-primary dark:border-white  text-primary dark:text-white'
 						)}
 						onClick={() => setActiveFilter('all')}
 					>
 						<StopCircleIcon
 							className={clsxm(
-								'w-8 h-8 p-1 !text-gray-300 !fill-gray-400 dark:!text-white',
+								'w-7 h-7 p-1 !text-gray-300 !fill-gray-400 dark:!text-white',
 								activeFilter == 'all' &&
 									'!text-primary !fill-primary  dark:!text-white dark:!fill-white'
 							)}
@@ -80,15 +79,14 @@ export function UserTeamBlockHeader() {
 					</div>
 					<div
 						className={clsxm(
-							'w-1/6 text-center flex items-center justify-center gap-2 py-4 cursor-pointer',
-							activeFilter == 'idle' &&
-								'border-b-4 border-primary dark:border-white  text-primary dark:text-white'
+							'w-1/6 text-center flex items-center justify-center gap-2 py-4 cursor-pointer text-sm border-b-4 border-transparent',
+							activeFilter == 'idle' && 'border-primary dark:border-white  text-primary dark:text-white'
 						)}
 						onClick={() => setActiveFilter('idle')}
 					>
 						<NotWorkingIcon
 							className={clsxm(
-								'w-8 h-8 p-1 !text-gray-300  dark:!text-white',
+								'w-7 h-7 p-1 !text-gray-300  dark:!text-white',
 								activeFilter == 'idle' && '!text-primary !fill-white  dark:!text-white dark:!fill-white'
 							)}
 						/>
@@ -104,15 +102,15 @@ export function UserTeamBlockHeader() {
 					</div>
 					<div
 						className={clsxm(
-							'w-1/6 text-center flex items-center justify-center gap-2 py-4 cursor-pointer',
+							'w-1/6 text-center flex items-center justify-center gap-2 py-4 cursor-pointer text-sm border-b-4 border-transparent',
 							activeFilter == 'running' &&
-								'border-b-4 border-primary dark:border-white  text-primary dark:text-white'
+								'border-primary dark:border-white  text-primary dark:text-white'
 						)}
 						onClick={() => setActiveFilter('running')}
 					>
 						<TimerPlayIcon
 							className={clsxm(
-								'w-8 h-8 p-1 !text-gray-300 !fill-gray-400 dark:!text-white',
+								'w-7 h-7 p-1 !text-gray-300 !fill-gray-400 dark:!text-white',
 								activeFilter == 'running' &&
 									'!text-primary !fill-primary  dark:!text-white dark:!fill-white'
 							)}
@@ -129,15 +127,14 @@ export function UserTeamBlockHeader() {
 					</div>
 					<div
 						className={clsxm(
-							'w-1/6 text-center flex items-center justify-center gap-2 py-4 cursor-pointer',
-							activeFilter == 'pause' &&
-								'border-b-4 border-primary dark:border-white  text-primary dark:text-white'
+							'w-1/6 text-center flex items-center justify-center gap-2 py-4 cursor-pointer text-sm border-b-4 border-transparent',
+							activeFilter == 'pause' && 'border-primary dark:border-white  text-primary dark:text-white'
 						)}
 						onClick={() => setActiveFilter('pause')}
 					>
 						<PauseIcon
 							className={clsxm(
-								'w-8 h-8 p-1 !text-gray-300 !fill-gray-400 dark:!text-white',
+								'w-7 h-7 p-1 !text-gray-300 !fill-gray-400 dark:!text-white',
 								activeFilter == 'pause' &&
 									'!text-primary !fill-primary  dark:!text-white dark:!fill-white'
 							)}
@@ -154,15 +151,14 @@ export function UserTeamBlockHeader() {
 					</div>
 					<div
 						className={clsxm(
-							'w-1/6 text-center flex items-center justify-center gap-2 py-4 cursor-pointer',
-							activeFilter == 'online' &&
-								'border-b-4 border-primary dark:border-white  text-primary dark:text-white'
+							'w-1/6 text-center flex items-center justify-center gap-2 py-4 cursor-pointer text-sm border-b-4 border-transparent',
+							activeFilter == 'online' && 'border-primary dark:border-white  text-primary dark:text-white'
 						)}
 						onClick={() => setActiveFilter('online')}
 					>
 						<OnlineIcon
 							className={clsxm(
-								'w-8 h-8 p-1 !text-gray-400  dark:!text-white',
+								'w-7 h-7 p-1 !text-gray-400  dark:!text-white',
 								activeFilter == 'online' &&
 									'!text-primary !fill-white  dark:!text-primary dark:!fill-white'
 							)}
@@ -179,7 +175,7 @@ export function UserTeamBlockHeader() {
 					</div>
 				</div>
 
-				<div className="1/6 flex justify-end gap-2 items-center">
+				<div className="3/12 flex justify-end gap-2 items-center">
 					{/* <Invite /> */}
 					{hook.filterType === 'search' ? (
 						<TaskNameFilter
@@ -191,7 +187,7 @@ export function UserTeamBlockHeader() {
 							}}
 						/>
 					) : (
-						<>
+						<div className="flex gap-6">
 							<button
 								ref={hook.outclickFilterCard.ignoreElementRef}
 								className={clsxm('outline-none')}
@@ -204,12 +200,13 @@ export function UserTeamBlockHeader() {
 									)}
 								/>
 							</button>
+
 							<VerticalSeparator />
 
-							<Button className="py-3.5 px-4 gap-3 rounded-xl outline-none" onClick={openModal}>
+							<Button className="py-3.5 px-4 gap-3 rounded-xl outline-none w-44" onClick={openModal}>
 								Invite
 							</Button>
-						</>
+						</div>
 					)}
 				</div>
 			</div>
diff --git a/apps/web/lib/features/timer/timer-status.tsx b/apps/web/lib/features/timer/timer-status.tsx
index 402316c4f..39a22da21 100644
--- a/apps/web/lib/features/timer/timer-status.tsx
+++ b/apps/web/lib/features/timer/timer-status.tsx
@@ -66,9 +66,8 @@ export function getTimerStatusValue(
 		  moment().diff(moment(timerStatus?.lastLog?.startedAt), 'hours') < 24 &&
 		  timerStatus?.lastLog?.source !== 'TEAMS'
 		? 'pause'
-		: member?.employee?.isOnline
-		? //  && member?.timerStatus !== 'running'
-		  'online'
+		: member?.employee?.isOnline && member?.timerStatus === 'running'
+		? 'online'
 		: !member?.totalTodayTasks?.length
 		? 'idle'
 		: member?.timerStatus || 'idle';