diff --git a/src/routes/hunter/HuntList.svelte b/src/routes/hunter/HuntList.svelte
index a7f01e6..d1baacc 100644
--- a/src/routes/hunter/HuntList.svelte
+++ b/src/routes/hunter/HuntList.svelte
@@ -242,8 +242,8 @@
   {@const hunt = sheetHunt}
   {@const myTeam = sheetIsActive ? ongoingTeams[hunt.id] : upcomingTeams[hunt.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 class="fixed bottom-0 left-0 right-0 z-50 bg-base-200 rounded-t-2xl shadow-2xl max-h-[80vh] overflow-y-auto">
+    <div class="p-4 border-b border-base-300 flex items-center justify-between sticky top-0 bg-base-200">
       <div>
         <h3 class="font-bold text-lg">{hunt.title}</h3>
         <p class="text-xs text-base-content/50">{formatDateTime(hunt.startDateTime)} – {formatDateTime(hunt.endDateTime)}</p>
@@ -260,7 +260,7 @@
         <LoadingSpinner />
       {:else if myTeam}
         <!-- Already on a team -->
-        <div class="rounded-xl border border-base-200 p-4 flex flex-col gap-3">
+        <div class="rounded-xl bg-base-100 border border-base-300 p-4 flex flex-col gap-3">
           <div>
             <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>
diff --git a/src/routes/hunter/HuntLobby.svelte b/src/routes/hunter/HuntLobby.svelte
index 45f3dba..3bfd755 100644
--- a/src/routes/hunter/HuntLobby.svelte
+++ b/src/routes/hunter/HuntLobby.svelte
@@ -376,7 +376,7 @@
 {#if teamMembersOpen && myTeam}
   {@const team = myTeam}
   <div class="fixed inset-0 z-50 flex items-center justify-center p-6" role="presentation" onclick={() => teamMembersOpen = false}>
-    <div class="bg-base-100 rounded-2xl shadow-2xl w-full max-w-sm p-5" role="dialog" aria-modal="true" onclick={(e) => e.stopPropagation()}>
+    <div class="bg-base-200 rounded-2xl shadow-2xl w-full max-w-sm p-5" role="dialog" aria-modal="true" onclick={(e) => e.stopPropagation()}>
       <div class="flex items-center justify-between mb-4">
         <div>
           <p class="text-xs font-semibold uppercase tracking-wide text-base-content/40">Team</p>
@@ -435,13 +435,13 @@
 <!-- Item detail bottom sheet -->
 {#if selectedItem}
   <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 class="fixed bottom-0 left-0 right-0 z-50 bg-base-200 rounded-t-2xl shadow-2xl max-h-[80vh] overflow-y-auto">
+    <div class="p-4 border-b border-base-300 flex items-center justify-between sticky top-0 bg-base-200">
       <div>
         <h3 class="font-bold text-lg">{selectedItem.name}</h3>
         <p class="text-xs text-base-content/50">{selectedItem.points} points</p>
       </div>
-      <button class="btn btn-ghost btn-sm btn-circle" onclick={closeSheet}>✕</button>
+      <button class="btn btn-outline btn-sm" onclick={closeSheet}>Done</button>
     </div>
     <div class="p-4 flex flex-col gap-4">
       {#if submitting}
@@ -494,9 +494,9 @@
       {:else if itemPhotos.filter(p => p.photoStatus !== 'REMOVED').length > 0}
         <div class="flex flex-col gap-3">
           {#each itemPhotos.filter(p => p.photoStatus !== 'REMOVED') as photo (photo.id)}
-            <div class="card bg-base-200 overflow-hidden">
+            <div class="card bg-base-100 overflow-hidden">
               <button class="w-full cursor-zoom-in" onclick={() => expandedPhoto = photo}>
-                <AuthImage photoId={photo.id} version="SMALL" alt={photo.hunterName} class="w-full h-48 object-cover" />
+                <AuthImage photoId={photo.id} version="SMALL" alt={photo.hunterName} class="w-full max-h-64 object-contain bg-base-300" />
               </button>
               <div class="p-3 flex items-center justify-between">
                 <div>
@@ -513,6 +513,7 @@
       {:else}
         <p class="text-center text-base-content/50 py-4 text-sm">No photos submitted yet</p>
       {/if}
+
     </div>
   </div>
 {/if}