diff --git a/.gitignore b/.gitignore
index afd4780b..b7f29a01 100644
--- a/.gitignore
+++ b/.gitignore
@@ -15,4 +15,5 @@ yarn-debug.log*
 yarn-error.log*
 yarn.lock
 vercel.json
-package-lock.json
\ No newline at end of file
+package-lock.json
+bun.lock
\ No newline at end of file
diff --git a/app/docs/components/modal/variant/DefaultModal.tsx b/app/docs/components/modal/variant/DefaultModal.tsx
index 32c36919..72cf3d3a 100644
--- a/app/docs/components/modal/variant/DefaultModal.tsx
+++ b/app/docs/components/modal/variant/DefaultModal.tsx
@@ -9,6 +9,7 @@ import {
   ModalFooter,
   ModalHeader,
   ModalTitle,
+  ModalClose,
 } from '../../../../src'
 
 const DefaultModal = () => {
@@ -31,7 +32,9 @@ const DefaultModal = () => {
             </div>
           </ModalHeader>
           <ModalFooter>
-            <Button variant="outline">Cancel</Button>
+            <ModalClose asChild>
+              <Button variant="outline">Cancel</Button>
+            </ModalClose>
             <Button>Confirm</Button>
           </ModalFooter>
         </ModalContent>
diff --git a/app/src/components/Modal/index.tsx b/app/src/components/Modal/index.tsx
index 0104da69..809f649a 100644
--- a/app/src/components/Modal/index.tsx
+++ b/app/src/components/Modal/index.tsx
@@ -1,5 +1,5 @@
 'use client'
-import { Portal, Trigger } from '@radix-ui/react-dialog'
+import { Portal, Trigger, Close } from '@radix-ui/react-dialog'
 import type { ModalProps } from './Modal'
 import { Modal } from './Modal'
 import { ModalContent } from './ModalContent'
@@ -11,6 +11,7 @@ import { ModalTitle } from './ModalTitle'
 
 const ModalAction = Trigger
 const ModalPortal = Portal
+const ModalClose = Close
 
 export {
   Modal,
@@ -23,4 +24,5 @@ export {
   ModalPortal,
   ModalProps,
   ModalTitle,
+  ModalClose,
 }