diff --git a/lib/putzplan_web/live/task_live/index.ex b/lib/putzplan_web/live/task_live/index.ex
index 6ea1d09..418a1f1 100644
--- a/lib/putzplan_web/live/task_live/index.ex
+++ b/lib/putzplan_web/live/task_live/index.ex
@@ -13,77 +13,92 @@ defmodule PutzplanWeb.TaskLive.Index do
       </:actions>
     </.header>
 
-    <.table
-      id="tasks"
-      rows={@streams.tasks}
-      row_click={fn {_id, task} -> JS.navigate(~p"/tasks/#{task}") end}
-    >
-      <:col :let={{id, task}}>
-          <.link phx-click={JS.push("complete", value: %{id: task.id})}>
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke-width="1.5"
-              stroke="currentColor"
-              class="size-6"
-            >
-              <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
-            </svg>
-          </.link>
-      </:col>
+    <div id="tasks" class="grid grid-cols-1 gap-4 sm:grid-cols-1 lg:grid-cols-2" phx-update="stream">
+      <%= for {id, task} <- @streams.tasks do %>
+        <div
+          id={"task-#{id}"}
+          class="flex flex-col p-4 bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-200 cursor-pointer"
+          phx-click={JS.navigate(~p"/tasks/#{task}")}
+        >
+          <div class="flex justify-between items-center mb-3">
+            <div class="font-medium text-gray-800 text-lg">{task.description}</div>
+            <div class="flex space-x-2">
+              <.link
+                phx-click={JS.push("complete", value: %{id: task.id})}
+                class="text-green-600 hover:text-green-800 p-1 rounded-full hover:bg-green-100"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke-width="1.5"
+                  stroke="currentColor"
+                  class="w-6 h-6"
+                >
+                  <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+                </svg>
+              </.link>
+            </div>
+          </div>
 
-      <:col :let={{_id, task}} label="Description">{task.description}</:col>
+          <div class="mb-3">
+            <div class="text-sm text-gray-500">Due</div>
+            <div class="text-gray-700">{format_date(task.due)}</div>
+          </div>
 
-      <:col :let={{_id, task}} label="Due">{format_date(task.due)}</:col>
+          <div class="mt-auto pt-3 border-t border-gray-100 flex justify-between items-center">
+            <div class="sr-only">
+              <.link navigate={~p"/tasks/#{task}"}>Show</.link>
+            </div>
 
-      <:action :let={{_id, task}}>
-        <div class="sr-only">
-          <.link navigate={~p"/tasks/#{task}"}>Show</.link>
+            <div class="flex space-x-2">
+              <.link
+                patch={~p"/tasks/#{task}/edit"}
+                class="text-blue-600 hover:text-blue-800 p-1 rounded-full hover:bg-blue-100"
+                phx-click-stop-propagation="true"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke-width="1.5"
+                  stroke="currentColor"
+                  class="w-6 h-6"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10"
+                  />
+                </svg>
+              </.link>
+
+              <.link
+                phx-click={JS.push("delete", value: %{id: task.id}) |> hide("#task-#{id}")}
+                data-confirm="Are you sure?"
+                class="text-red-600 hover:text-red-800 p-1 rounded-full hover:bg-red-100"
+                phx-click-stop-propagation="true"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke-width="1.5"
+                  stroke="currentColor"
+                  class="w-6 h-6"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"
+                  />
+                </svg>
+              </.link>
+            </div>
+          </div>
         </div>
-      </:action>
-
-      <:col :let={{id, task}}>
-          <.link patch={~p"/tasks/#{task}/edit"}>
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke-width="1.5"
-              stroke="currentColor"
-              class="size-6"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10"
-              />
-            </svg>
-          </.link>
-      </:col>
-
-      <:col :let={{id, task}}>
-          <.link
-            phx-click={JS.push("delete", value: %{id: task.id}) |> hide("##{id}")}
-            data-confirm="Are you sure?"
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke-width="1.5"
-              stroke="currentColor"
-              class="size-6"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"
-              />
-            </svg>
-          </.link>
-      </:col>
-    </.table>
+      <% end %>
+    </div>
 
     <.modal :if={@live_action in [:new, :edit]} id="task-modal" show on_cancel={JS.patch(~p"/tasks")}>
       <.live_component