diff --git a/apps/web/lib/components/Kanban.tsx b/apps/web/lib/components/Kanban.tsx
index cd36fea9c..14255bc60 100644
--- a/apps/web/lib/components/Kanban.tsx
+++ b/apps/web/lib/components/Kanban.tsx
@@ -67,6 +67,8 @@ function InnerItemList({ items, title }: { title: string; items: ITeamTask[]; dr
 					<Draggable key={item.id} draggableId={item.id} index={index}>
 						{(dragProvided: DraggableProvided, dragSnapshot: DraggableStateSnapshot) => (
 							<Item
+								isClone={false}
+								index={index}
 								key={item.id}
 								item={item}
 								isDragging={dragSnapshot.isDragging}
diff --git a/apps/web/lib/components/kanban-card.tsx b/apps/web/lib/components/kanban-card.tsx
index f97d6cc83..da534aa4f 100644
--- a/apps/web/lib/components/kanban-card.tsx
+++ b/apps/web/lib/components/kanban-card.tsx
@@ -1,14 +1,22 @@
-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 { ITeamTask, Tag } from '@app/interfaces';
+import {
+	useAuthenticateUser,
+	useCollaborative,
+	useOrganizationTeams,
+	useTMCardTaskEdit,
+	useTeamMemberCard,
+	useTimerView
+} from '@app/hooks';
+import ImageComponent, { ImageOverlapperProps } from './image-overlapper';
+import { TaskInput, TaskIssueStatus } from 'lib/features';
+import Link from 'next/link';
+import CircularProgress from '@components/ui/svgs/circular-progress';
+import { HorizontalSeparator } from './separator';
 import { pad } from '@app/helpers';
 import { TaskStatus } from '@app/constants';
-import { TaskIssueStatus } from 'lib/features';
-import Link from 'next/link';
-import ImageComponent, { ImageOverlapperProps } from './image-overlapper';
+import { UserTeamCardMenu } from 'lib/features/team/user-team-card/user-team-card-menu';
 
 function getStyle(provided: DraggableProvided, style: any) {
 	if (!style) {
@@ -86,45 +94,46 @@ function Priority({ level }: { level: number }) {
 		</>
 	);
 }
-
+type ItemProps = {
+	item: ITeamTask;
+	isDragging: boolean;
+	isGroupedOver: boolean;
+	provided: DraggableProvided;
+	style: any;
+	isClone: boolean;
+	index: number;
+};
 /**
  * card that represent each task
  * @param props
  * @returns
  */
-export default function Item(props: any) {
-	const { item, isDragging, isGroupedOver, provided, style, isClone, index } = props;
+export default function Item(props: ItemProps) {
+	const { item, isDragging, provided, style, index } = props;
 
 	const { hours, minutes, seconds } = useTimerView();
+	const { activeTeam } = useOrganizationTeams();
+	const { user } = useAuthenticateUser();
 
-	const taskAssignee: ImageOverlapperProps[] = [];
+	const members = activeTeam?.members || [];
+	const currentUser = members.find((m) => m.employee.userId === user?.id);
 
-	item.members.map((member: any) => {
-		taskAssignee.push({
+	const memberInfo = useTeamMemberCard(currentUser);
+	const taskEdition = useTMCardTaskEdit(memberInfo.memberTask);
+	const taskAssignee: ImageOverlapperProps[] = item.members.map((member: any) => {
+		return {
 			id: member.user.id,
 			url: member.user.imageUrl,
 			alt: member.user.firstName
-		});
+		};
 	});
+	const { collaborativeSelect } = useCollaborative(memberInfo.memberUser);
 
-	// const handleTime = () => {
-	// 	if (item.status === TaskStatus.INPROGRESS) {
-	// 		startTimer();
-	// 	} else {
-	// 		stopTimer();
-	// 	}
-	// };
-
-	// useEffect(() => {
-	// 	handleTime();
-	// }, [timerStatus?.running]);
+	const menu = <>{!collaborativeSelect && <UserTeamCardMenu memberInfo={memberInfo} edition={taskEdition} />}</>;
 
 	return (
-		<section
-			href={``}
-			isDragging={isDragging}
-			isGroupedOver={isGroupedOver}
-			isClone={isClone}
+		<div
+			draggable={isDragging}
 			ref={provided.innerRef}
 			{...provided.draggableProps}
 			{...provided.dragHandleProps}
@@ -133,62 +142,84 @@ export default function Item(props: any) {
 			data-is-dragging={isDragging}
 			data-testid={item.id}
 			data-index={index}
-			aria-label={`${item.status.name} ${item.content}`}
+			aria-label={item.label}
 		>
-			<div className="grid grid-cols-4 w-full justify-between border-b border-b-gray-200 pb-4">
-				<div className="col-span-3 flex flex-col gap-5 grow w-full">
-					{item.tags && <TagList tags={item.tags} />}
-
-					<div className="flex flex-row flex-wrap text-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>
-						<Link
-							href={`/task/${item.id}`}
-							className="text-black dark:text-white text-normal capitalize mr-2 bg-blue line-clamp-2"
-						>
-							{item.title}
-						</Link>
-						<Priority level={1} />
-					</div>
+			<div className=" w-full justify-between h-40">
+				<div className="w-full flex justify-between">
+					<span>{<TagList tags={[]} />}</span>
+					{menu}
 				</div>
-				<div className="flex flex-col justify-between items-end">
-					<VerticalThreeDot />
-
+				<div className="w-full flex justify-between my-3">
+					<div className="flex items-center ">
+						{!taskEdition.editMode ? (
+							<>
+								<TaskIssueStatus
+									showIssueLabels={false}
+									task={item}
+									className="rounded-sm mr-1 h-6 w-6"
+								/>
+								<span className="text-grey text-normal mr-1">#{item.number}</span>
+								<Link
+									href={`/task/${item.id}`}
+									className="text-black dark:text-white text-normal capitalize mr-2 bg-blue line-clamp-2"
+								>
+									{item.title}
+								</Link>
+								<Priority level={1} />
+							</>
+						) : (
+							<div className="w-56">
+								<TaskInput
+									task={taskEdition.task}
+									initEditMode={true}
+									keepOpen={true}
+									showCombobox={false}
+									autoFocus={true}
+									autoInputSelectText={true}
+									onTaskClick={(e) => {
+										console.log(e);
+									}}
+									onEnterKey={() => {
+										taskEdition.setEditMode(false);
+									}}
+								/>
+							</div>
+						)}
+					</div>
 					<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 className="my-2">
+					<HorizontalSeparator />
+				</div>
+				<div className="w-full flex items-center justify-between">
+					<div className="mt-1">
+						{item.status === TaskStatus.INPROGRESS ? (
+							<div className="flex 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 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>
-				)}
-				<ImageComponent images={taskAssignee} />
-			</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>
+					<ImageComponent images={taskAssignee} />
+					{item.issueType && (
+						<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.issueType as any)}
+							></div>
+						</div>
+					)}
 				</div>
-			)}
-		</section>
+			</div>
+		</div>
 	);
 }