diff --git a/components/tasks-client.tsx b/components/tasks-client.tsx
index f9ea9e8..b1151c0 100644
--- a/components/tasks-client.tsx
+++ b/components/tasks-client.tsx
@@ -89,12 +89,11 @@ export function TasksClient({
           <Badge variant="outline">{tasks.length} total tasks</Badge>
         </div>
 
-        <div className="overflow-x-auto pb-3">
-          <div className="flex min-w-max gap-4">
+        <div className="grid gap-4 xl:grid-cols-5">
         {COLUMNS.map((column) => {
           const columnTasks = tasks.filter((task) => task.status === column);
           return (
-            <Card className="flex min-h-[560px] w-[340px] shrink-0 flex-col border-white/10 bg-slate-950/35 xl:w-[360px]" key={column}>
+            <Card className="flex min-h-[560px] min-w-0 flex-col border-white/10 bg-slate-950/35" key={column}>
               <CardHeader className="pb-4">
                 <CardTitle className="flex items-center justify-between text-base">
                   <span>{column}</span>
@@ -165,7 +164,6 @@ export function TasksClient({
             </Card>
           );
         })}
-          </div>
         </div>
       </div>