diff --git a/src/app/features/tasks/task-item.ts b/src/app/features/tasks/task-item.ts
index 68bf7b9..cf16832 100644
--- a/src/app/features/tasks/task-item.ts
+++ b/src/app/features/tasks/task-item.ts
@@ -6,11 +6,30 @@ import { RouterLink } from '@angular/router';
   selector: 'ksk-crm-task-item',
   imports: [RouterLink],
   template: `
-    <p>{{ task().name }}</p>
-    <p>{{ task().city }}, {{ task().streetAddress }}</p>
-    <p><a [routerLink]="['/details', task().id]">Подробнее...</a></p>
+    <a [routerLink]="['/details', task().id]">
+      <p>{{ task().name }}</p>
+      <p>{{ task().city }}, {{ task().streetAddress }}</p>
+    </a>
+  `,
+  styles: `
+    :host {
+      display: block;
+      padding: 1rem;
+      cursor: pointer;
+      transition: all 0.2s;
+
+      &:hover {
+        background: color-mix(in oklch, var(--color-primary) 25%, transparent);
+      }
+      &:active {
+        background: color-mix(in oklch, var(--color-primary) 25%, transparent);
+      }
+    }
+
+    a {
+      color: var(--color-gray);
+    }
   `,
-  styles: ``,
 })
 export class TaskItem {
   task = input.required<Task>();