diff --git a/src/index.css b/src/index.css
index fcaf1f8..9ce0c64 100644
--- a/src/index.css
+++ b/src/index.css
@@ -115,14 +115,18 @@ body {
   animation: slideUp 0.25s ease;
   padding-bottom: env(safe-area-inset-bottom, 0);
 }
+.sheet-handle-area {
+  width: 100%;
+  padding: 12px 0;
+  display: flex;
+  justify-content: center;
+  cursor: grab;
+}
 .sheet-handle {
   width: 36px;
   height: 4px;
   background: #444;
   border-radius: 2px;
-  margin: 0 auto;
-  padding: 16px 0;
-  background-clip: content-box;
 }
 @keyframes slideUp {
   from { transform: translateY(100%); }
diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx
index ff9095f..8843675 100644
--- a/src/pages/HomePage.jsx
+++ b/src/pages/HomePage.jsx
@@ -235,7 +235,7 @@ function HomePage() {
               }
             }}
           >
-            <div className="sheet-handle" style={{ cursor: 'grab' }} />
+            <div className="sheet-handle-area"><div className="sheet-handle" /></div>
             <div style={{ padding: '12px 16px', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '12px' }}>
               {cardDetailContent(expandedCard)}
             </div>