diff --git a/assets/js/hooks/bottom_sheet.js b/assets/js/hooks/bottom_sheet.js
index 7a0ab2415..c657728d7 100644
--- a/assets/js/hooks/bottom_sheet.js
+++ b/assets/js/hooks/bottom_sheet.js
@@ -30,7 +30,7 @@ export default {
 
     mounted() {
         Animation.mounted.bind(this)();
-        this.dragHandle = this.el.querySelector(".moon-drag-handle");
+        this.dragHandle = this.el.querySelector(" & > .moon-panel > .bottom_sheet_header > .moon-drag-handle")
     },
 
     updated() {
diff --git a/lib/moon/design/bottom_sheet/header.ex b/lib/moon/design/bottom_sheet/header.ex
index 6147036f8..47367d348 100644
--- a/lib/moon/design/bottom_sheet/header.ex
+++ b/lib/moon/design/bottom_sheet/header.ex
@@ -24,7 +24,7 @@ defmodule Moon.Design.BottomSheet.Header do
       {=@id}
       class={merge([
         [
-          "sticky top-0 z-10 bg-goku pt-1",
+          "sticky top-0 z-10 bg-goku pt-1 bottom_sheet_header",
           "min-h-[48px]": slot_assigned?(:drag_handle)
         ],
         @class
diff --git a/lib/moon_web/examples/design/bottom_sheet_example/double.ex b/lib/moon_web/examples/design/bottom_sheet_example/double.ex
index 70120a758..44bcdd05f 100644
--- a/lib/moon_web/examples/design/bottom_sheet_example/double.ex
+++ b/lib/moon_web/examples/design/bottom_sheet_example/double.ex
@@ -23,6 +23,9 @@ defmodule MoonWeb.Examples.Design.BottomSheetExample.Double do
           </Button>
           <BottomSheet id="default_bottom_sheet2">
             <BottomSheet.Panel>
+              <BottomSheet.Header class="border-b-2 border-beerus">
+                <BottomSheet.DragHandle />
+              </BottomSheet.Header>
               <div class="flex grow items-center justify-center bg-jiren text-piccolo">
                 Bottom Sheet content2
               </div>