diff --git a/src/components/hand.ts b/src/components/hand.ts
index b700cc0..a2bffa6 100644
--- a/src/components/hand.ts
+++ b/src/components/hand.ts
@@ -1,23 +1,29 @@
 import { html } from 'lit-html'
 import { repeat } from 'lit-html/directives/repeat.js'
+import { computed } from 'nanostores'
 
+import { watch } from '#core/lit-nanostores/watch.ts'
 import type { GameCard } from '#lobo/card.ts'
+import { toAtom, type MaybeAtom } from '#types/atom.ts'
 
 import { Card } from './card'
 
-export function Hand(cards: GameCard[], handOwner: 'player' | 'wolf' = 'wolf') {
+export function Hand(cards: MaybeAtom<GameCard[]>, handOwner: 'player' | 'wolf' = 'wolf') {
+  const renderedCards = computed(
+    [toAtom(cards)],
+    (cardList) =>
+      html`<ul class="card-list">
+        ${repeat(
+          cardList,
+          (c) => c.id,
+          (c) => html`<li>${Card(c, false)}</li>`,
+        )}
+      </ul>`,
+  )
   return html`
     <div>
       <h3>${handOwner} cards</h3>
-      <div class=${`hand hand--${handOwner}`}>
-        <ul class="card-list">
-          ${repeat(
-            cards,
-            (c) => c.id,
-            (c) => html`<li>${Card(c)}</li>`,
-          )}
-        </ul>
-      </div>
+      <div class=${`hand hand--${handOwner}`}>${watch(renderedCards)}</div>
     </div>
   `
 }