diff --git a/devboard/client/src/components/Board/TaskCard.jsx b/devboard/client/src/components/Board/TaskCard.jsx
index 022ff27..85b0103 100644
--- a/devboard/client/src/components/Board/TaskCard.jsx
+++ b/devboard/client/src/components/Board/TaskCard.jsx
@@ -11,6 +11,20 @@ const PRIORITY_COLORS = {
   low: "🟢 bg-green-500/20 text-green-400",
 };
 
+// Avatar color palette for unique user backgrounds (#109)
+const AVATAR_COLORS = [
+  "bg-purple-700",
+  "bg-blue-600",
+  "bg-green-600",
+  "bg-rose-600",
+  "bg-amber-600",
+];
+
+const getAvatarColor = (name) => {
+  if (!name) return AVATAR_COLORS[0];
+  const colorIndex = name.charCodeAt(0) % AVATAR_COLORS.length;
+  return AVATAR_COLORS[colorIndex];
+};
 const GLOW = {
   high: "hover:shadow-red-500/20",
   medium: "hover:shadow-yellow-500/20",
@@ -347,6 +361,10 @@ const TaskCard = ({ task, index, onSelect }) => {
              </button>
 
             {task.assignee?.name && (
+              <div 
+                title={task.assignee.name} 
+                className={`w-5 h-5 rounded-full ${getAvatarColor(task.assignee.name)} flex items-center justify-center text-[9px] font-bold text-white cursor-pointer`}
+              >
               <div title={task.assignee.name} className="w-5 h-5 rounded-full bg-purple-700 flex items-center justify-center text-[9px] font-bold text-white">
                 {task.assignee.name[0].toUpperCase()}
               </div>