diff --git a/examples/task-list/src/components/task.tsx b/examples/task-list/src/components/task.tsx
index 7d02e17..6273a20 100644
--- a/examples/task-list/src/components/task.tsx
+++ b/examples/task-list/src/components/task.tsx
@@ -11,7 +11,7 @@ export const Task = memo(({ task }: TaskProps) => {
   const { updateTask, removeTask } = useTaskActions();
 
   return (
-    <li className="block p-4 space-y-2 border-t first:rounded-t-md border-x last:border-b last:rounded-b-md dark:border-slate-700">
+    <li className="block p-4 space-y-2 border-t first:rounded-t-md border-x last:border-b last:rounded-b-md dark:border-slate-700 border-slate-300">
       <header className="flex flex-row items-center gap-4">
         <label htmlFor={`toggle-${task.id}`} className="sr-only">
           Mark Task as {task.completed ? 'Incomplete' : 'Complete'}
@@ -31,7 +31,7 @@ export const Task = memo(({ task }: TaskProps) => {
           ❌
         </button>
       </header>
-      <label className="text-xs grid grid-cols-[1.25rem_1fr] gap-1 cursor-pointer rounded-md bg-primary-50 dark:bg-primary-950 border-2 border-primary-100 dark:border-primary-900 p-2">
+      <label className="text-xs grid grid-cols-[1.25rem_1fr] gap-1 cursor-pointer rounded-md bg-primary-50 dark:bg-slate-800 border-2 border-primary-100 dark:border-slate-900 p-2">
         <input type="checkbox" className="sr-only peer" />
         <ChevronRightCircle className="block w-4 h-4 transition-transform peer-checked:rotate-90" />
         <h3 className="select-none">Metadata</h3>