diff --git a/pages/product/[id].vue b/pages/product/[id].vue
index 429f518..6f3dbaf 100644
--- a/pages/product/[id].vue
+++ b/pages/product/[id].vue
@@ -36,8 +36,31 @@
         body: 'flex-1 overflow-y-auto',
       }"
     >
-      <template #body>
-        <ProductDescription />
+      <template #content>
+        <!--        <div ref="targetDrawer" class="flex flex-col gap-10" style="overflow-y: auto;"> -->
+        <!--          <h1>BABAB</h1> -->
+        <!--          <h1>BABAB</h1> -->
+        <!--          <h1>BABAB</h1> -->
+        <!--          <h1>BABAB</h1> -->
+        <!--          <h1>BABAB</h1> -->
+        <!--          <h1>BABAB</h1> -->
+        <!--          <h1>BABAB</h1> -->
+        <!--          <h1>BABAB</h1> -->
+        <!--          <h1>BABAB</h1> -->
+        <!--          <h1>BABAB</h1> -->
+        <!--          <h1>BABAB</h1> -->
+        <!--          <h1>BABAB</h1> -->
+        <!--          <h1>BABAB</h1> -->
+        <!--          <h1>BABAB</h1> -->
+        <!--          <h1>BABAB</h1> -->
+        <!--          <h1>BABAB</h1> -->
+        <!--          <h1>BABAB</h1> -->
+        <!--          <h1>BABAB</h1> -->
+        <!--          <h1>BABAB</h1> -->
+        <!--          <h1>BABAB</h1> -->
+        <!--        </div> -->
+
+        <ProductDescription ref="targetDrawer" style="overflow-y: auto;" />
       </template>
     </UDrawer>
 
@@ -48,38 +71,49 @@
 
 <script setup lang="ts">
 import type { UseSwipeDirection } from '@vueuse/core'
-import { useMediaQuery, useSwipe } from '@vueuse/core'
+import { useMediaQuery, useScroll, useSwipe } from '@vueuse/core'
 import { computed, shallowRef } from 'vue'
 import ProductPrice from '~/components/ProductPrice.vue'
 import { useCurrentProduct, useProduct } from '~/composables'
 
 const { productsData } = useProduct()
+const { currentVariant } = useCurrentProduct()
 const isMobile = useMediaQuery('(max-width: 1280px)')
 const open = ref(false)
 const target = shallowRef<HTMLElement | null>(null)
 const targetHeight = computed(() => target.value?.offsetHeight)
+const targetDrawer = shallowRef<HTMLElement | null>(null)
+const targetDrawerHeight = computed(() => targetDrawer.value?.offsetHeight)
+const { y } = useScroll(targetDrawer)
 
 const { lengthY } = useSwipe(
   target,
   {
     passive: false,
-    onSwipe(e: TouchEvent) {
-      if (targetHeight.value) {
-        if (lengthY.value > 100) {
-          open.value = true
-        }
-      }
-    },
     onSwipeEnd(e: TouchEvent, direction: UseSwipeDirection) {
-      console.log('lengthY.value', lengthY.value)
-      if (lengthY.value > 100 && targetHeight.value && (Math.abs(lengthY.value) / targetHeight.value) >= 0.5) {
+      if (lengthY.value > 50 && targetHeight.value && (Math.abs(lengthY.value) / targetHeight.value) >= 0.25) {
         open.value = true
       }
     },
   },
 )
 
-const { currentVariant } = useCurrentProduct()
+const { lengthY: drawerLengthY } = useSwipe(
+  targetDrawer,
+  {
+    passive: false,
+    onSwipeEnd(e: TouchEvent, direction: UseSwipeDirection) {
+      console.log('drawerLengthY.value', drawerLengthY.value)
+      console.log('y', y.value)
+      console.log('targetDrawerHeight.value', targetDrawerHeight.value)
+      console.log('Math.abs(drawerLengthY.value)', Math.abs(drawerLengthY.value))
+      console.log('Math.abs(drawerLengthY.value) / targetDrawerHeight.value', Math.abs(drawerLengthY.value) / targetDrawerHeight.value)
+      if (drawerLengthY.value < 0 && y.value === 0 && targetDrawerHeight.value && (Math.abs(drawerLengthY.value) / targetDrawerHeight.value) >= 0.2) {
+        open.value = false
+      }
+    },
+  },
+)
 </script>
 
 <style scoped lang="scss">