diff --git a/packages/ui-core/src/base/ButtonRow/index.tsx b/packages/ui-core/src/base/ButtonRow/index.tsx
index 11330ae8c8..b0056f4b48 100644
--- a/packages/ui-core/src/base/ButtonRow/index.tsx
+++ b/packages/ui-core/src/base/ButtonRow/index.tsx
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: GPL-3.0-only
 
 import classNames from 'classnames'
-import type { RowProps } from '../../types'
+import type { RowProps } from '../types'
 import classes from './index.module.scss'
 
 /**
diff --git a/packages/ui-core/src/base/PageRow/index.tsx b/packages/ui-core/src/base/PageRow/index.tsx
index c67eb08297..b69b363d1b 100644
--- a/packages/ui-core/src/base/PageRow/index.tsx
+++ b/packages/ui-core/src/base/PageRow/index.tsx
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: GPL-3.0-only
 
 import classNames from 'classnames'
-import type { RowProps } from '../../types'
+import type { RowProps } from '../types'
 import classes from './index.module.scss'
 
 /**
diff --git a/packages/ui-core/src/base/PageTitle/index.tsx b/packages/ui-core/src/base/PageTitle/index.tsx
index 24e43965eb..12df7de915 100644
--- a/packages/ui-core/src/base/PageTitle/index.tsx
+++ b/packages/ui-core/src/base/PageTitle/index.tsx
@@ -6,7 +6,7 @@ import classNames from 'classnames'
 import { useEffect, useRef, useState } from 'react'
 import { ButtonSecondary } from 'ui-buttons'
 import { PageTitleTabs } from 'ui-core/base'
-import type { PageTitleProps } from '../../types'
+import type { PageTitleProps } from '../types'
 import classes from './index.module.scss'
 
 /**
diff --git a/packages/ui-core/src/base/PageTitleTabs/index.tsx b/packages/ui-core/src/base/PageTitleTabs/index.tsx
index 085bd4b646..39b9f1d302 100644
--- a/packages/ui-core/src/base/PageTitleTabs/index.tsx
+++ b/packages/ui-core/src/base/PageTitleTabs/index.tsx
@@ -3,7 +3,7 @@
 
 import classNames from 'classnames'
 import { ButtonTab } from 'ui-buttons'
-import type { PageTitleProps, PageTitleTabProps } from '../../types'
+import type { PageTitleProps, PageTitleTabProps } from '../types'
 import classes from './index.module.scss'
 
 /**
diff --git a/packages/ui-core/src/types.ts b/packages/ui-core/src/base/types.ts
similarity index 63%
rename from packages/ui-core/src/types.ts
rename to packages/ui-core/src/base/types.ts
index b0faa4d977..4887f2d5e1 100644
--- a/packages/ui-core/src/types.ts
+++ b/packages/ui-core/src/base/types.ts
@@ -4,7 +4,6 @@
 import type { ComponentBase } from '@w3ux/types'
 
 export type RowProps = ComponentBase & {
-  // whether there is margin space vertically.
   yMargin?: boolean
 }
 
@@ -20,23 +19,15 @@ export type PageTitleProps = PageTitleTabsProps & {
 }
 
 export interface PageTitleTabsProps {
-  // whether the title stick on the same position.
   sticky?: boolean
-  // an array of tab pages.
   tabs?: PageTitleTabProps[]
 }
 
 export interface PageTitleTabProps {
-  // whether the title stick on the same position.
   sticky?: boolean
-  // title of the tab button.
   title: string
-  // whether it is clicked.
   active: boolean
-  // it leads to the corresponding tab page.
   onClick: () => void
-  // a badge that can have a glance at before visting the tab page.
   badge?: string | number
-  // whether the tab button is disabled.
   disabled?: boolean
 }
diff --git a/packages/ui-core/src/overlay/Backdrop/index.tsx b/packages/ui-core/src/overlay/Backdrop/index.tsx
index c801fad824..23c184795c 100644
--- a/packages/ui-core/src/overlay/Backdrop/index.tsx
+++ b/packages/ui-core/src/overlay/Backdrop/index.tsx
@@ -3,8 +3,8 @@
 
 import classNames from 'classnames'
 import { motion } from 'framer-motion'
-import type { ModalOverlayProps } from '../../../../ui-overlay/src/types'
 import commonClasses from '../common.module.scss'
+import type { ModalOverlayProps } from '../types'
 import classes from './index.module.scss'
 
 export const Backdrop = ({ children, blur, ...rest }: ModalOverlayProps) => {
diff --git a/packages/ui-core/src/overlay/CanvasContainer/index.tsx b/packages/ui-core/src/overlay/CanvasContainer/index.tsx
index d640d4bd64..ea985d6e63 100644
--- a/packages/ui-core/src/overlay/CanvasContainer/index.tsx
+++ b/packages/ui-core/src/overlay/CanvasContainer/index.tsx
@@ -3,8 +3,8 @@
 
 import classNames from 'classnames'
 import { motion } from 'framer-motion'
-import type { ModalAnimationProps } from '../../../../ui-overlay/src/types'
 import commonClasses from '../common.module.scss'
+import type { ModalAnimationProps } from '../types'
 import classes from './index.module.scss'
 
 export const CanvasContainer = ({ children, ...rest }: ModalAnimationProps) => {
diff --git a/packages/ui-core/src/overlay/CanvasScroll/index.tsx b/packages/ui-core/src/overlay/CanvasScroll/index.tsx
index 37dd1d0a32..86b3212562 100644
--- a/packages/ui-core/src/overlay/CanvasScroll/index.tsx
+++ b/packages/ui-core/src/overlay/CanvasScroll/index.tsx
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: GPL-3.0-only
 
 import { motion } from 'framer-motion'
-import type { CanvasScrollProps } from '../../../../ui-overlay/src/types'
+import type { CanvasScrollProps } from '../types'
 import classes from './index.module.scss'
 
 export const CanvasScroll = ({
diff --git a/packages/ui-core/src/overlay/ModalCard/index.tsx b/packages/ui-core/src/overlay/ModalCard/index.tsx
index 5aeafc6515..311ec8209e 100644
--- a/packages/ui-core/src/overlay/ModalCard/index.tsx
+++ b/packages/ui-core/src/overlay/ModalCard/index.tsx
@@ -4,7 +4,7 @@
 import classNames from 'classnames'
 import type { ForwardedRef } from 'react'
 import { forwardRef } from 'react'
-import type { ModalCardProps } from '../../../../ui-overlay/src/types'
+import type { ModalCardProps } from '../types'
 import classes from './index.module.scss'
 
 export const ModalCard = forwardRef(
diff --git a/packages/ui-core/src/overlay/ModalContainer/index.tsx b/packages/ui-core/src/overlay/ModalContainer/index.tsx
index 7eb98c0169..623d9befda 100644
--- a/packages/ui-core/src/overlay/ModalContainer/index.tsx
+++ b/packages/ui-core/src/overlay/ModalContainer/index.tsx
@@ -3,15 +3,15 @@
 
 import classNames from 'classnames'
 import { motion } from 'framer-motion'
-import { useOverlay } from '../../../../ui-overlay/src/Provider'
-import type { ModalAnimationProps } from '../../../../ui-overlay/src/types'
 import commonClasses from '../common.module.scss'
+import type { ModalContainerProps } from '../types'
 import classes from './index.module.scss'
 
-export const ModalContainer = ({ children, ...rest }: ModalAnimationProps) => {
-  const {
-    modal: { setModalStatus },
-  } = useOverlay()
+export const ModalContainer = ({
+  children,
+  onClose,
+  ...rest
+}: ModalContainerProps) => {
   const allClasses = classNames(
     commonClasses.fixedPosition,
     classes.modalContainer
@@ -23,7 +23,7 @@ export const ModalContainer = ({ children, ...rest }: ModalAnimationProps) => {
         <button
           type="button"
           className={classes.close}
-          onClick={() => setModalStatus('closing')}
+          onClick={() => onClose()}
         >
           &nbsp;
         </button>
diff --git a/packages/ui-core/src/overlay/ModalContent/index.tsx b/packages/ui-core/src/overlay/ModalContent/index.tsx
index edad54a20c..94cb698d24 100644
--- a/packages/ui-core/src/overlay/ModalContent/index.tsx
+++ b/packages/ui-core/src/overlay/ModalContent/index.tsx
@@ -3,7 +3,7 @@
 
 import classNames from 'classnames'
 import { motion } from 'framer-motion'
-import type { ModalContentProps } from '../../../../ui-overlay/src/types'
+import type { ModalContentProps } from '../types'
 import classes from './index.module.scss'
 
 export const ModalContent = ({
diff --git a/packages/ui-core/src/overlay/ModalFixedTitle/index.tsx b/packages/ui-core/src/overlay/ModalFixedTitle/index.tsx
index 42c67806ed..426bb0c0bc 100644
--- a/packages/ui-core/src/overlay/ModalFixedTitle/index.tsx
+++ b/packages/ui-core/src/overlay/ModalFixedTitle/index.tsx
@@ -4,7 +4,7 @@
 import classNames from 'classnames'
 import type { ForwardedRef } from 'react'
 import { forwardRef } from 'react'
-import type { ModalFixedTitleProps } from '../../../../ui-overlay/src/types'
+import type { ModalFixedTitleProps } from '../types'
 import classes from './index.module.scss'
 
 export const ModalFixedTitle = forwardRef(
diff --git a/packages/ui-core/src/overlay/ModalMultiThree/index.tsx b/packages/ui-core/src/overlay/ModalMultiThree/index.tsx
index e3d613fd95..30788aca19 100644
--- a/packages/ui-core/src/overlay/ModalMultiThree/index.tsx
+++ b/packages/ui-core/src/overlay/ModalMultiThree/index.tsx
@@ -3,8 +3,8 @@
 
 import classNames from 'classnames'
 import { motion } from 'framer-motion'
-import type { ModalAnimationProps } from '../../../../ui-overlay/src/types'
 import commonClasses from '../common.module.scss'
+import type { ModalAnimationProps } from '../types'
 import classes from './index.module.scss'
 
 export const ModalMultiThree = ({ children, ...rest }: ModalAnimationProps) => {
diff --git a/packages/ui-core/src/overlay/ModalMultiTwo/index.tsx b/packages/ui-core/src/overlay/ModalMultiTwo/index.tsx
index ae214ae7fb..5bfa53b595 100644
--- a/packages/ui-core/src/overlay/ModalMultiTwo/index.tsx
+++ b/packages/ui-core/src/overlay/ModalMultiTwo/index.tsx
@@ -3,8 +3,8 @@
 
 import classNames from 'classnames'
 import { motion } from 'framer-motion'
-import type { ModalAnimationProps } from '../../../../ui-overlay/src/types'
 import commonClasses from '../common.module.scss'
+import type { ModalAnimationProps } from '../types'
 import classes from './index.module.scss'
 
 export const ModalMultiTwo = ({ children, ...rest }: ModalAnimationProps) => {
diff --git a/packages/ui-core/src/overlay/ModalNotes/index.tsx b/packages/ui-core/src/overlay/ModalNotes/index.tsx
index 4abce333ab..2c12a01b83 100644
--- a/packages/ui-core/src/overlay/ModalNotes/index.tsx
+++ b/packages/ui-core/src/overlay/ModalNotes/index.tsx
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: GPL-3.0-only
 
 import classNames from 'classnames'
-import type { ModalNotesProps } from '../../../../ui-overlay/src/types'
+import type { ModalNotesProps } from '../types'
 import classes from './index.module.scss'
 
 export const ModalNotes = ({
diff --git a/packages/ui-core/src/overlay/ModalPadding/index.tsx b/packages/ui-core/src/overlay/ModalPadding/index.tsx
index 2c927cf30a..54fa497ac7 100644
--- a/packages/ui-core/src/overlay/ModalPadding/index.tsx
+++ b/packages/ui-core/src/overlay/ModalPadding/index.tsx
@@ -4,7 +4,7 @@
 import classNames from 'classnames'
 import type { ForwardedRef } from 'react'
 import { forwardRef } from 'react'
-import type { ModalPaddingProps } from '../../../../ui-overlay/src/types'
+import type { ModalPaddingProps } from '../types'
 import classes from './index.module.scss'
 
 export const ModalPadding = forwardRef(
diff --git a/packages/ui-core/src/overlay/ModalScroll/index.tsx b/packages/ui-core/src/overlay/ModalScroll/index.tsx
index b0075137aa..c5b29483f2 100644
--- a/packages/ui-core/src/overlay/ModalScroll/index.tsx
+++ b/packages/ui-core/src/overlay/ModalScroll/index.tsx
@@ -4,8 +4,8 @@
 import classNames from 'classnames'
 import type { ForwardedRef } from 'react'
 import { forwardRef } from 'react'
-import type { ModalScrollProps } from '../../../../ui-overlay/src/types'
 import commonClasses from '../common.module.scss'
+import type { ModalScrollProps } from '../types'
 import classes from './index.module.scss'
 
 export const ModalScroll = forwardRef(
diff --git a/packages/ui-core/src/overlay/ModalSection/index.tsx b/packages/ui-core/src/overlay/ModalSection/index.tsx
index 89795691f3..826140d83b 100644
--- a/packages/ui-core/src/overlay/ModalSection/index.tsx
+++ b/packages/ui-core/src/overlay/ModalSection/index.tsx
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: GPL-3.0-only
 
 import classNames from 'classnames'
-import type { ModalSectionProps } from '../../../../ui-overlay/src/types'
+import type { ModalSectionProps } from '../types'
 import classes from './index.module.scss'
 
 export const ModalSection = ({ children, style, type }: ModalSectionProps) => {
diff --git a/packages/ui-overlay/src/types.ts b/packages/ui-core/src/overlay/types.ts
similarity index 92%
rename from packages/ui-overlay/src/types.ts
rename to packages/ui-core/src/overlay/types.ts
index 0cbecf9558..8ce28bfe91 100644
--- a/packages/ui-overlay/src/types.ts
+++ b/packages/ui-core/src/overlay/types.ts
@@ -41,3 +41,7 @@ export type ModalScrollProps = ComponentBase & {
 export type ModalSectionProps = ComponentBase & {
   type: 'tab' | 'carousel'
 }
+
+export type ModalContainerProps = ModalAnimationProps & {
+  onClose: () => void
+}
diff --git a/packages/ui-overlay/src/Modal.tsx b/packages/ui-overlay/src/Modal.tsx
index c4e0585737..a9202b0d71 100644
--- a/packages/ui-overlay/src/Modal.tsx
+++ b/packages/ui-overlay/src/Modal.tsx
@@ -149,6 +149,7 @@ export const Modal = ({
         },
       }}
       style={{ opacity: status === 'opening' ? 0 : 1 }}
+      onClose={() => setModalStatus('closing')}
     >
       <ModalScroll
         ref={heightRef}