diff --git a/src/components/todolist/TaskItem.jsx b/src/components/todolist/TaskItem.jsx
index 2a4adcb50cdf43330d5732a9030b927b49ade754..b125174152efd9dbf727b68679bac01806069d5b 100644
--- a/src/components/todolist/TaskItem.jsx
+++ b/src/components/todolist/TaskItem.jsx
@@ -9,7 +9,7 @@ export default function TaskItem({ task }) {
     const onChange = (event) => {
         const nextTasks = [...tasks]
         const nextTask = nextTasks.find(
-            a => a.id === task.id 
+            a => a.id === task.id
         )
         nextTask["isCompleted"] = event.target.checked
         setTasks(nextTasks)
@@ -17,28 +17,40 @@ export default function TaskItem({ task }) {
 
     const onDelete = (id) => {
         setTasks(tasks.filter(task => task.id !== id));
-      };
+    };
+
+    const formattedDate = task.dueDate
+        ? new Date(task.dueDate).toLocaleDateString()
+        : "No due date";
 
     return (
         <li className="flex items-center space-x-4">
-                <input 
-                    type="checkbox" 
-                    id={task.id} 
-                    checked={task.isCompleted} 
-                    onChange={onChange} 
-                    className="w-5 h-5 text-blue-500 border-gray-300 rounded focus:ring-blue-500"
-                />
-                <label 
-                    htmlFor={task.id} 
-                    className={`text-lg ${task.isCompleted ? 'line-through text-gray-400' : ''}`}>
+            <div className="flex items-start p-4 border rounded-lg shadow-sm bg-white my-2 hover:shadow-md transition-shadow">
+                <div className="flex-shrink-0 pt-1">
+                    <input
+                        id={task.id}
+                        type="checkbox"
+                        className="h-5 w-5 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+                        checked={task.isCompleted}
+                        onChange={onChange}
+                    />
+                </div>
+
+                <div className="ml-3 flex-1">
+                    <h3 className={`text-base font-medium ${task.isCompleted ? 'text-gray-400 line-through' : 'text-gray-900'}`}>
                         {task.name}
-                </label>
+                    </h3>
+                    <p className={`text-sm mt-1 ${task.isCompleted ? 'text-gray-400' : 'text-gray-500'}`}>
+                        Due: {formattedDate}
+                    </p>
+                </div>
                 <button
                     onClick={() => onDelete(task.id)}
                     className="ml-auto p-1 rounded-full hover:bg-gray-200 focus:outline-none"
-                    >
-                        <TrashIcon className="w-5 h-5 text-red-500 hover:text-red-700" />
+                >
+                    <TrashIcon className="w-5 h-5 text-red-500 hover:text-red-700" />
                 </button>
+            </div>
         </li>
     )
 }
\ No newline at end of file