diff --git a/src/components/BottomSheet.vue b/src/components/BottomSheet.vue
index 20e83ba..f622116 100644
--- a/src/components/BottomSheet.vue
+++ b/src/components/BottomSheet.vue
@@ -17,6 +17,16 @@
       ref="pan"
       :style="{ top: `${isMove ? y : calcY()}px` }"
     >
+      <v-btn
+        fab
+        x-small
+        elevation="0"
+        color="black"
+        @click.stop="onBackgroundClick"
+        class="bottom-sheet-close"
+      >
+        <v-icon color="white" >cancel</v-icon>
+      </v-btn>
       <div class="bottom-sheet-handle"><div class="bottom-sheet-handle-decoration" /></div>
       <div ref="sheetContent" class="sheetContent">
         <slot></slot>
@@ -203,6 +213,13 @@ export default {
   background-color: white;
   overflow: hidden;
 
+  .bottom-sheet-close {
+    position: absolute;
+    right: 0;
+    top: 0;
+    z-index: 1;
+  }
+
   @media #{map-get($display-breakpoints, 'lg-and-up')} {
     margin: 0 auto;
     width: $dialog-desktop-width;
diff --git a/src/components/RoomInfoBottomSheet.vue b/src/components/RoomInfoBottomSheet.vue
index 20adc80..bd09691 100644
--- a/src/components/RoomInfoBottomSheet.vue
+++ b/src/components/RoomInfoBottomSheet.vue
@@ -1,6 +1,7 @@
 <template>
   <BottomSheet
     class="room-info-bottom-sheet"
+    :halfY="0.12"
     ref="sheet"
   >
     <div class="room-info-sheet" ref="roomInfoSheetContent">