diff --git a/ondeck/src/app/(dashboard)/tasks/page-client.tsx b/ondeck/src/app/(dashboard)/tasks/page-client.tsx
index fdcba83..15ceb90 100644
--- a/ondeck/src/app/(dashboard)/tasks/page-client.tsx
+++ b/ondeck/src/app/(dashboard)/tasks/page-client.tsx
@@ -22,6 +22,7 @@ import {
 } from '@/components/ui/select'
 import { UserSelectContent } from '@/components/ui/user-select-content'
 import { CheckSquare, Clock, AlertCircle, MessageSquare, CheckCircle2, RotateCcw, Eye, CalendarRange, ArrowRightLeft, Search, X, Building2, Plus, Ban, ArrowUpDown, ArrowUp, ArrowDown, Filter, Pencil } from 'lucide-react'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
 import { Input } from '@/components/ui/input'
 import { formatDate, formatRenewalDate } from '@/lib/utils'
 import { AdditionalServiceModal } from '@/components/tasks/additional-service-modal'
@@ -229,11 +230,11 @@ function TaskCard({ task: initial }: { task: Task }) {
   const dueBg = isCompleted
     ? 'bg-muted/50'
     : daysUntilDue < 0
-    ? 'bg-red-600/25 dark:bg-red-500/30'
+    ? 'bg-red-500/30 dark:bg-red-500/40'
     : daysUntilDue <= 7
-    ? 'bg-red-500/20 dark:bg-red-500/25'
+    ? 'bg-red-500/25 dark:bg-red-500/35'
     : daysUntilDue <= 14
-    ? 'bg-orange-500/20 dark:bg-orange-400/25'
+    ? 'bg-orange-400/25 dark:bg-orange-400/35'
     : 'bg-muted/40'
 
   return (
@@ -276,17 +277,23 @@ function TaskCard({ task: initial }: { task: Task }) {
           <div className={`px-3 py-1.5 border-b border-border flex items-center whitespace-nowrap ${dueBg}`}>
             <span className="font-bold" suppressHydrationWarning>{formatDate(task.dueDate)}</span>
           </div>
-          <button
-            onClick={handleToggleStatus}
-            disabled={toggling}
-            className="border-b border-l border-border flex items-center justify-center hover:bg-muted transition-colors disabled:opacity-50"
-            title={isCompleted ? 'Reopen' : 'Complete'}
-          >
-            {isCompleted
-              ? <RotateCcw className="h-5 w-5" />
-              : <CheckCircle2 className="h-5 w-5" />
-            }
-          </button>
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <button
+                  onClick={handleToggleStatus}
+                  disabled={toggling}
+                  className="border-b border-l border-border flex items-center justify-center hover:bg-muted transition-colors disabled:opacity-50"
+                >
+                  {isCompleted
+                    ? <RotateCcw className="h-5 w-5" />
+                    : <CheckCircle2 className="h-5 w-5" />
+                  }
+                </button>
+              </TooltipTrigger>
+              <TooltipContent side="left"><p>{isCompleted ? 'Reopen task' : 'Mark complete'}</p></TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
           {/* Row 2: Status | N/A */}
           <div className="px-3 py-1.5 border-b border-border flex items-center">
             <Select value={task.status} onValueChange={handleQuickStatus} disabled={statusUpdating}>
@@ -303,13 +310,19 @@ function TaskCard({ task: initial }: { task: Task }) {
             </Select>
           </div>
           {task.status !== 'COMPLETED' && task.status !== 'NA' && task.status !== 'CANCELLED' ? (
-            <button
-              onClick={() => setNaDialogOpen(true)}
-              className="border-b border-l border-border flex items-center justify-center text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
-              title="Mark as N/A"
-            >
-              <Ban className="h-5 w-5" />
-            </button>
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <button
+                    onClick={() => setNaDialogOpen(true)}
+                    className="border-b border-l border-border flex items-center justify-center text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
+                  >
+                    <Ban className="h-5 w-5" />
+                  </button>
+                </TooltipTrigger>
+                <TooltipContent side="left"><p>Mark as N/A</p></TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
           ) : (
             <div className="border-b border-l border-border" />
           )}
@@ -317,13 +330,19 @@ function TaskCard({ task: initial }: { task: Task }) {
           <div className="px-3 py-1.5 border-b border-border flex items-center text-muted-foreground">
             {levelLabel}
           </div>
-          <button
-            onClick={() => setEditOpen(true)}
-            className="border-b border-l border-border flex items-center justify-center text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
-            title="Edit task"
-          >
-            <Pencil className="h-5 w-5" />
-          </button>
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <button
+                  onClick={() => setEditOpen(true)}
+                  className="border-b border-l border-border flex items-center justify-center text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
+                >
+                  <Pencil className="h-5 w-5" />
+                </button>
+              </TooltipTrigger>
+              <TooltipContent side="left"><p>Edit task</p></TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
           {/* Row 4: Notes spanning both cols */}
           <button
             onClick={() => setNoteOpen((o) => !o)}