diff --git a/src/routes/hunter/HuntList.svelte b/src/routes/hunter/HuntList.svelte
index 2f2598f..b11f7de 100644
--- a/src/routes/hunter/HuntList.svelte
+++ b/src/routes/hunter/HuntList.svelte
@@ -1,29 +1,47 @@
 <script lang="ts">
-    import {push} from 'svelte-spa-router'
-    import {auth} from '../../lib/stores/auth.svelte'
-    import {apiGetOngoingHunts, apiGetUnstartedHunts} from '../../lib/api/index'
-    import type {HuntResponse} from '../../lib/api/types'
-    import StatusBadge from '../../lib/components/StatusBadge.svelte'
-    import LoadingSpinner from '../../lib/components/LoadingSpinner.svelte'
+  import {push} from 'svelte-spa-router'
+  import {auth} from '../../lib/stores/auth.svelte'
+  import {
+    apiCreateTeam,
+    apiGetHunterTeam,
+    apiGetOngoingHunts,
+    apiGetUnstartedHunts,
+    apiJoinTeam,
+    apiListTeams,
+  } from '../../lib/api/index'
+  import type {HuntResponse, TeamResponse} from '../../lib/api/types'
+  import StatusBadge from '../../lib/components/StatusBadge.svelte'
+  import LoadingSpinner from '../../lib/components/LoadingSpinner.svelte'
 
-    $effect(() => {
+  $effect(() => {
     if (!auth.isLoggedIn) push('/login')
     else if (auth.isAdmin) push('/admin')
   })
 
-  let ongoing = $state<HuntResponse[]>([])
+  let ongoing  = $state<HuntResponse[]>([])
   let upcoming = $state<HuntResponse[]>([])
-  let loading = $state(true)
-  let error = $state('')
-  let tab = $state<'active' | 'upcoming'>('active')
+  let loading  = $state(true)
+  let error    = $state('')
+  let tab      = $state<'active' | 'upcoming'>('active')
+
+  // huntId → team the hunter has joined (null = not joined)
+  let upcomingTeams = $state<Record<string, TeamResponse | null>>({})
 
   $effect(() => {
     Promise.all([
       apiGetOngoingHunts(),
       apiGetUnstartedHunts(),
-    ]).then(([o, u]) => {
-      ongoing = o
+    ]).then(async ([o, u]) => {
+      ongoing  = o
       upcoming = u
+      const teamEntries = await Promise.all(
+        u.map(hunt =>
+          apiGetHunterTeam(hunt.id)
+            .then(t  => [hunt.id, t] as const)
+            .catch(() => [hunt.id, null] as const)
+        )
+      )
+      upcomingTeams = Object.fromEntries(teamEntries)
     }).catch(e => {
       error = e instanceof Error ? e.message : 'Failed to load hunts'
     }).finally(() => {
@@ -31,13 +49,78 @@
     })
   })
 
+  // ── Upcoming hunt sheet ──────────────────────────────────────────────────────
+
+  let sheetHunt       = $state<HuntResponse | null>(null)
+  let sheetTeams      = $state<TeamResponse[]>([])
+  let sheetLoading    = $state(false)
+  let newTeamName     = $state('')
+  let creatingTeam    = $state(false)
+  let joiningTeamId   = $state<string | null>(null)
+  let sheetError      = $state('')
+
+  async function openSheet(hunt: HuntResponse) {
+    sheetHunt    = hunt
+    sheetError   = ''
+    newTeamName  = ''
+    sheetLoading = true
+    try {
+      sheetTeams = await apiListTeams(hunt.id)
+    } catch (e: unknown) {
+      sheetError = e instanceof Error ? e.message : 'Failed to load teams'
+    } finally {
+      sheetLoading = false
+    }
+  }
+
+  function closeSheet() {
+    sheetHunt = null
+    sheetTeams = []
+  }
+
+  async function createTeam() {
+    if (!sheetHunt || !newTeamName.trim()) return
+    creatingTeam = true
+    sheetError   = ''
+    try {
+      await apiCreateTeam(sheetHunt.id, newTeamName.trim())
+      sheetTeams = await apiListTeams(sheetHunt.id)
+      const created = sheetTeams.find(t => t.name === newTeamName.trim())
+      if (created) await joinTeam(created.id)
+      else newTeamName = ''
+    } catch (e: unknown) {
+      sheetError = e instanceof Error ? e.message : 'Failed to create team'
+    } finally {
+      creatingTeam = false
+    }
+  }
+
+  async function joinTeam(teamId: string) {
+    if (!sheetHunt) return
+    joiningTeamId = teamId
+    sheetError    = ''
+    try {
+      await apiJoinTeam(sheetHunt.id, teamId)
+      const team = sheetTeams.find(t => t.id === teamId) ?? null
+      upcomingTeams = { ...upcomingTeams, [sheetHunt.id]: team }
+      newTeamName   = ''
+      closeSheet()
+    } catch (e: unknown) {
+      sheetError = e instanceof Error ? e.message : 'Failed to join team'
+    } finally {
+      joiningTeamId = null
+    }
+  }
+
+  // ── Helpers ──────────────────────────────────────────────────────────────────
+
   function huntStatus(hunt: HuntResponse): 'ONGOING' | 'UNSTARTED' | 'CLOSED' {
     if (hunt.isTerminated) return 'CLOSED'
-    const now = Date.now()
+    const now   = Date.now()
     const start = new Date(hunt.startDateTime).getTime()
-    const end = new Date(hunt.endDateTime).getTime()
+    const end   = new Date(hunt.endDateTime).getTime()
     if (now < start) return 'UNSTARTED'
-    if (now > end) return 'CLOSED'
+    if (now > end)   return 'CLOSED'
     return 'ONGOING'
   }
 
@@ -69,31 +152,134 @@
   {:else if error}
     <div class="alert alert-error">{error}</div>
   {:else}
-    {@const hunts = tab === 'active' ? ongoing : upcoming}
-    {#if hunts.length === 0}
-      <div class="text-center py-16 text-base-content/50">
-        <p class="text-4xl mb-3">🔍</p>
-        <p class="font-medium">{tab === 'active' ? 'No active hunts right now' : 'No upcoming hunts'}</p>
-      </div>
-    {:else}
-      <div class="flex flex-col gap-3">
-        {#each hunts as hunt}
-          <button
-            class="card bg-base-100 shadow-sm border border-base-200 text-left w-full hover:border-primary hover:shadow-md transition-all"
-            onclick={() => push(`/hunt/${hunt.id}`)}
-          >
-            <div class="card-body p-4 gap-2">
-              <div class="flex items-start justify-between gap-2">
-                <h2 class="card-title text-base">{hunt.title}</h2>
-                <StatusBadge status={huntStatus(hunt)} />
+    {#if tab === 'active'}
+      {#if ongoing.length === 0}
+        <div class="text-center py-16 text-base-content/50">
+          <p class="text-4xl mb-3">🔍</p>
+          <p class="font-medium">No active hunts right now</p>
+        </div>
+      {:else}
+        <div class="flex flex-col gap-3">
+          {#each ongoing as hunt}
+            <button
+              class="card bg-base-100 shadow-sm border border-base-200 text-left w-full hover:border-primary hover:shadow-md transition-all"
+              onclick={() => push(`/hunt/${hunt.id}`)}
+            >
+              <div class="card-body p-4 gap-2">
+                <div class="flex items-start justify-between gap-2">
+                  <h2 class="card-title text-base">{hunt.title}</h2>
+                  <StatusBadge status={huntStatus(hunt)} />
+                </div>
+                <p class="text-xs text-base-content/50">
+                  {formatDate(hunt.startDateTime)} – {formatDate(hunt.endDateTime)}
+                </p>
               </div>
-              <p class="text-xs text-base-content/50">
-                {formatDate(hunt.startDateTime)} – {formatDate(hunt.endDateTime)}
-              </p>
-            </div>
-          </button>
-        {/each}
-      </div>
+            </button>
+          {/each}
+        </div>
+      {/if}
+
+    {:else}
+      {#if upcoming.length === 0}
+        <div class="text-center py-16 text-base-content/50">
+          <p class="text-4xl mb-3">🔍</p>
+          <p class="font-medium">No upcoming hunts</p>
+        </div>
+      {:else}
+        <div class="flex flex-col gap-3">
+          {#each upcoming as hunt}
+            {@const myTeam = upcomingTeams[hunt.id]}
+            <button
+              class="card bg-base-100 shadow-sm border border-base-200 text-left w-full hover:border-primary hover:shadow-md transition-all"
+              onclick={() => openSheet(hunt)}
+            >
+              <div class="card-body p-4 gap-2">
+                <div class="flex items-start justify-between gap-2">
+                  <h2 class="card-title text-base">{hunt.title}</h2>
+                  <StatusBadge status={huntStatus(hunt)} />
+                </div>
+                <p class="text-xs text-base-content/50">
+                  {formatDate(hunt.startDateTime)} – {formatDate(hunt.endDateTime)}
+                </p>
+                {#if myTeam}
+                  <p class="text-sm font-medium text-primary">Team: {myTeam.name}</p>
+                {:else}
+                  <p class="text-sm font-medium text-secondary">Join a team →</p>
+                {/if}
+              </div>
+            </button>
+          {/each}
+        </div>
+      {/if}
     {/if}
   {/if}
 </div>
+
+<!-- Upcoming hunt sheet -->
+{#if sheetHunt}
+  {@const myTeam = upcomingTeams[sheetHunt.id]}
+  <div class="fixed inset-0 z-40" onclick={closeSheet} role="presentation"></div>
+  <div class="fixed bottom-0 left-0 right-0 z-50 bg-base-100 rounded-t-2xl shadow-2xl max-h-[80vh] overflow-y-auto">
+    <div class="p-4 border-b border-base-200 flex items-center justify-between sticky top-0 bg-base-100">
+      <div>
+        <h3 class="font-bold text-lg">{sheetHunt.title}</h3>
+        <p class="text-xs text-base-content/50">{formatDate(sheetHunt.startDateTime)} – {formatDate(sheetHunt.endDateTime)}</p>
+      </div>
+      <button class="btn btn-ghost btn-sm btn-circle" onclick={closeSheet}>✕</button>
+    </div>
+
+    <div class="p-4 flex flex-col gap-4">
+      {#if sheetError}
+        <div class="alert alert-error text-sm">{sheetError}</div>
+      {/if}
+
+      {#if sheetLoading}
+        <LoadingSpinner />
+      {:else if myTeam}
+        <!-- Already on a team -->
+        <div class="rounded-xl border border-base-200 p-4">
+          <p class="text-xs font-semibold uppercase tracking-wide text-base-content/40 mb-1">Your Team</p>
+          <p class="text-lg font-bold">{myTeam.name}</p>
+          <!-- Team member list will be available once the backend exposes a members endpoint -->
+        </div>
+      {:else}
+        <!-- Join or create -->
+        <form onsubmit={(e) => { e.preventDefault(); createTeam() }} class="flex gap-2">
+          <input
+            type="text"
+            placeholder="New team name"
+            class="input input-bordered input-sm flex-1"
+            bind:value={newTeamName}
+            disabled={creatingTeam}
+          />
+          <button type="submit" class="btn btn-secondary btn-sm" disabled={creatingTeam || !newTeamName.trim()}>
+            {#if creatingTeam}<span class="loading loading-spinner loading-xs"></span>{/if}
+            Create
+          </button>
+        </form>
+
+        {#if sheetTeams.length > 0}
+          <div>
+            <p class="text-xs font-semibold uppercase tracking-wide text-base-content/40 mb-2">Or join an existing team</p>
+            <div class="flex flex-col gap-2">
+              {#each sheetTeams as team}
+                <button
+                  class="card bg-base-100 shadow-sm border border-base-200 text-left w-full hover:border-primary transition-colors"
+                  onclick={() => joinTeam(team.id)}
+                  disabled={joiningTeamId !== null}
+                >
+                  <div class="card-body p-4 flex-row items-center justify-between">
+                    <p class="font-semibold">{team.name}</p>
+                    {#if joiningTeamId === team.id}
+                      <span class="loading loading-spinner loading-xs"></span>
+                    {/if}
+                  </div>
+                </button>
+              {/each}
+            </div>
+          </div>
+        {/if}
+      {/if}
+    </div>
+  </div>
+{/if}