diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx
index 8843675..f43c754 100644
--- a/src/pages/HomePage.jsx
+++ b/src/pages/HomePage.jsx
@@ -39,6 +39,8 @@ function HomePage() {
   const { expandedCardId, setExpandedCardId, cardImages, setCardImage, ownedAmounts } = useContext(CardContext);
   const [artworkIndex, setArtworkIndex] = useState(0);
   const isMobile = useMediaQuery('(max-width: 768px)');
+  const sheetRef = React.useRef(null);
+  const dragStartY = React.useRef(null);
   const debouncedSearch = useDebounce(searchTerm, 250);
 
   const loadCards = useCallback(() => fetchCards().then(setCards), []);
@@ -220,18 +222,21 @@ function HomePage() {
         <>
           <div className="sheet-backdrop" onClick={() => setExpandedCardId(null)} />
           <div
+            ref={sheetRef}
             className="bottom-sheet"
-            onTouchStart={e => { e._sheetStartY = e.touches[0].clientY; }}
+            onTouchStart={e => { dragStartY.current = e.touches[0].clientY; }}
             onTouchMove={e => {
-              const dy = e.touches[0].clientY - e._sheetStartY;
-              if (dy > 0) e.currentTarget.style.transform = `translateY(${dy}px)`;
+              const dy = e.touches[0].clientY - dragStartY.current;
+              if (dy > 0 && sheetRef.current) sheetRef.current.style.transform = `translateY(${dy}px)`;
             }}
             onTouchEnd={e => {
-              const dy = e.changedTouches[0].clientY - e._sheetStartY;
+              const dy = e.changedTouches[0].clientY - dragStartY.current;
               if (dy > 80) {
                 setExpandedCardId(null);
-              } else {
-                e.currentTarget.style.transform = '';
+              } else if (sheetRef.current) {
+                sheetRef.current.style.transition = 'transform 0.2s ease';
+                sheetRef.current.style.transform = '';
+                setTimeout(() => { if (sheetRef.current) sheetRef.current.style.transition = ''; }, 200);
               }
             }}
           >