diff --git a/apps/web/lib/features/task/task-assign-button.tsx b/apps/web/lib/features/task/task-assign-button.tsx
index 95a5dc7de..f13f11414 100644
--- a/apps/web/lib/features/task/task-assign-button.tsx
+++ b/apps/web/lib/features/task/task-assign-button.tsx
@@ -7,9 +7,10 @@ import { MouseEventHandler } from 'react';
 type Props = {
 	onClick?: MouseEventHandler<HTMLButtonElement>;
 	disabled: boolean;
+	iconClassName?: string
 } & IClassName;
 
-export function TaskAssignButton({ onClick, disabled, className }: Props) {
+export function TaskAssignButton({ onClick, disabled, className, iconClassName }: Props) {
 	return (
 		<Button
 			onClick={onClick}
@@ -22,7 +23,7 @@ export function TaskAssignButton({ onClick, disabled, className }: Props) {
 				className
 			)}
 		>
-			<ArrowRightIcon className="w-[60%] h-[60%]"/>
+			<ArrowRightIcon className={clsxm("w-[60%] h-[60%]", iconClassName)} />
 		</Button>
 	);
 }
diff --git a/apps/web/lib/features/task/task-card.tsx b/apps/web/lib/features/task/task-card.tsx
index c8f7106e1..a5d0b9282 100644
--- a/apps/web/lib/features/task/task-card.tsx
+++ b/apps/web/lib/features/task/task-card.tsx
@@ -35,7 +35,6 @@ import {
 	Text,
 	VerticalSeparator
 } from 'lib/components';
-import ImageComponent, { ImageOverlapperProps } from 'lib/components/image-overlapper';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 import { useCallback, useState } from 'react';
@@ -123,14 +122,6 @@ export function TaskCard(props: Props) {
 
 	const memberInfo = useTeamMemberCard(currentMember || undefined);
 	const taskEdition = useTMCardTaskEdit(task);
-	const taskAssignee: ImageOverlapperProps[] =
-		task?.members?.map((member: any) => {
-			return {
-				id: member.user.id,
-				url: member.user.imageUrl,
-				alt: member.user.firstName
-			};
-		}) || [];
 
 	return (
 		<>
@@ -169,7 +160,6 @@ export function TaskCard(props: Props) {
 				{viewType === 'unassign' && (
 					<div className="w-[20%] flex justify-around">
 						<UsersTaskAssigned task={task} />
-						<ImageComponent radius={30} images={taskAssignee} item={task} />
 					</div>
 				)}
 				<VerticalSeparator />
@@ -197,6 +187,7 @@ export function TaskCard(props: Props) {
 							task={task}
 							assignTask={memberInfo.assignTask}
 							className="w-11 h-11 border border-[#0000001A] dark:border-[0.125rem] dark:border-[#28292F]"
+							iconClassName='text-primary dark:text-white'
 						/>
 					)}
 				</div>
@@ -385,11 +376,13 @@ function TimerButtonCall({
 function AssignTaskButtonCall({
 	task,
 	assignTask,
-	className
+	className,
+	iconClassName
 }: {
 	task: ITeamTask;
 	assignTask: (task: ITeamTask) => Promise<void>;
 	className?: string;
+	iconClassName?: string;
 }) {
 	const {
 		disabled,
@@ -407,6 +400,7 @@ function AssignTaskButtonCall({
 			}}
 			disabled={activeTaskStatus ? disabled : task.status === 'closed'}
 			className={clsxm('h-9 w-9', className)}
+			iconClassName={iconClassName}
 		/>
 	);
 }