diff --git a/src/entities/vat-return/ui/list-detail-bottom-sheet.tsx b/src/entities/vat-return/ui/list-detail-bottom-sheet.tsx
index ab2acd5..fa4a73d 100644
--- a/src/entities/vat-return/ui/list-detail-bottom-sheet.tsx
+++ b/src/entities/vat-return/ui/list-detail-bottom-sheet.tsx
@@ -1,11 +1,13 @@
 import { IMAGE_ROOT } from "@/shared/constants/common";
 import { Breakdown } from "../model/types";
 import moment from "moment";
+import { motion } from 'framer-motion';
 import { NumericFormat } from "react-number-format";
 import { SlideDown } from 'react-slidedown';
 import 'react-slidedown/lib/slidedown.css';
 import { useEffect, useState } from "react";
 import { useTranslation } from 'react-i18next';
+import { BottomSheetMotionDuration, BottomSheetMotionVaiants } from "@/entities/common/model/constant";
 
 export interface VatReturnListDetailBottomSheetProps {
   bottomSheetOn: boolean;
@@ -45,8 +47,19 @@ export const VatReturnListDetailBottomSheet = ({
 
   return (
     <>
-      <div className="bg-dim"></div>
-      <div className="bottomsheet">
+      { bottomSheetOn &&
+        <div 
+          className="bg-dim" 
+          style={{ zIndex: 1030 }}
+        ></div>
+      }
+      <motion.div 
+        className="bottomsheet"
+        initial="hidden"
+        animate={ (bottomSheetOn)? 'visible': 'hidden' }
+        variants={ BottomSheetMotionVaiants }
+        transition={ BottomSheetMotionDuration }
+      >
         <div className="bottomsheet-header">
           <div className="bottomsheet-title">
             <h2>{t('vatReturn.viewDetails')}</h2>
@@ -143,7 +156,7 @@ export const VatReturnListDetailBottomSheet = ({
             }
           </div>
         </div>
-      </div>
+      </motion.div>
     </>
   );
 };
\ No newline at end of file