diff --git a/src/material/BottomSheet.module.css b/src/material/BottomSheet.css
similarity index 81%
rename from src/material/BottomSheet.module.css
rename to src/material/BottomSheet.css
index 6eca0ca..1d5a937 100644
--- a/src/material/BottomSheet.module.css
+++ b/src/material/BottomSheet.css
@@ -1,7 +1,4 @@
-.bottomSheet {
-  composes: surface from "./material.module.css";
-  composes: cardGutSkip from "./cards.module.css";
-  composes: cardNoPad from "./cards.module.css";
+.BottomSheet {
   border: none;
   position: fixed;
   left: 50%;
@@ -16,7 +13,7 @@
   max-height: 100dvh;
   height: 95%;
   contain: strict;
-  contain-intrinsic-size: 100% 95%;
+  contain-intrinsic-size: auto 560px auto 95vh;
 
 
   &::backdrop {
@@ -25,8 +22,8 @@
 
   box-shadow: var(--tutu-shadow-e16);
 
-  :global(.MuiToolbar-root) {
-    > :global(.MuiButtonBase-root) {
+  .MuiToolbar-root {
+    >.MuiButtonBase-root {
 
       &:first-child {
         margin-left: -0.5em;
@@ -81,4 +78,4 @@
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/src/material/BottomSheet.tsx b/src/material/BottomSheet.tsx
index 4e00868..cd38df7 100644
--- a/src/material/BottomSheet.tsx
+++ b/src/material/BottomSheet.tsx
@@ -7,8 +7,9 @@ import {
   type ParentComponent,
   type ResolvedChildren,
 } from "solid-js";
-import styles from "./BottomSheet.module.css";
+import "./BottomSheet.css";
 import { useHeroSignal } from "../platform/anim";
+import material from "./material.module.css";
 
 export type BottomSheetProps = {
   open?: boolean;
@@ -97,7 +98,7 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
     const srcElement = hero();
     const startRect = srcElement?.getBoundingClientRect();
     if (!startRect) {
-      console.debug("no source element")
+      console.debug("no source element");
     }
     if (startRect) {
       srcElement!.style.visibility = "hidden";
@@ -113,7 +114,7 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
   const animateSlideInFromRight = (element: HTMLElement, reserve?: boolean) => {
     const rect = element.getBoundingClientRect();
     const easing = "cubic-bezier(0.4, 0, 0.2, 1)";
-    element.classList.add(styles.animated);
+    element.classList.add("animated");
     const oldOverflow = document.body.style.overflow;
     document.body.style.overflow = "hidden";
     const distance = Math.abs(rect.left - window.innerWidth);
@@ -128,7 +129,7 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
       { easing, duration },
     );
     const onAnimationEnd = () => {
-      element.classList.remove(styles.animated);
+      element.classList.remove("animated");
       document.body.style.overflow = oldOverflow;
       animation = undefined;
     };
@@ -143,7 +144,7 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
   ) => {
     const rect = element.getBoundingClientRect();
     const easing = "cubic-bezier(0.4, 0, 0.2, 1)";
-    element.classList.add(styles.animated);
+    element.classList.add("animated");
     const oldOverflow = document.body.style.overflow;
     document.body.style.overflow = "hidden";
     const distance = Math.abs(rect.top - window.innerHeight);
@@ -158,7 +159,7 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
       { easing, duration },
     );
     const onAnimationEnd = () => {
-      element.classList.remove(styles.animated);
+      element.classList.remove("animated");
       document.body.style.overflow = oldOverflow;
       animation = undefined;
     };
@@ -174,7 +175,7 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
     reserve?: boolean,
   ) => {
     const easing = "cubic-bezier(0.4, 0, 0.2, 1)";
-    element.classList.add(styles.animated);
+    element.classList.add("animated");
     const distance = Math.sqrt(
       Math.pow(Math.abs(startRect.top - endRect.top), 2) +
         Math.pow(Math.abs(startRect.left - startRect.top), 2),
@@ -188,7 +189,7 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
       { easing, duration },
     );
     const onAnimationEnd = () => {
-      element.classList.remove(styles.animated);
+      element.classList.remove("animated");
       animation = undefined;
     };
     animation.addEventListener("finish", onAnimationEnd);
@@ -218,9 +219,11 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
 
   return (
     <dialog
+      class={`BottomSheet ${material.surface}`}
       classList={{
-        [styles.bottomSheet]: true,
-        [styles.bottom]: props.bottomUp,
+        ["BottomSheet"]: true,
+        [material.surface]: true,
+        ["bottom"]: props.bottomUp,
       }}
       onClick={onDialogClick}
       ref={element!}