diff --git a/web/app/account/avatar.tsx b/web/app/account/avatar.tsx
index 8fdecc07bf..31434e6976 100644
--- a/web/app/account/avatar.tsx
+++ b/web/app/account/avatar.tsx
@@ -2,7 +2,7 @@
 import { useTranslation } from 'react-i18next'
 import { Fragment } from 'react'
 import { useRouter } from 'next/navigation'
-import { Menu, Transition } from '@headlessui/react'
+import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react'
 import Avatar from '@/app/components/base/avatar'
 import { logout } from '@/service/common'
 import { useAppContext } from '@/context/app-context'
@@ -36,7 +36,7 @@ export default function AppSelector() {
         ({ open }) => (
           <>
             <div>
-              <Menu.Button
+              <MenuButton
                 className={`
                     inline-flex items-center
                     rounded-[20px] p-1x text-sm
@@ -46,7 +46,7 @@ export default function AppSelector() {
                   `}
               >
                 <Avatar name={userProfile.name} size={32} />
-              </Menu.Button>
+              </MenuButton>
             </div>
             <Transition
               as={Fragment}
@@ -57,14 +57,14 @@ export default function AppSelector() {
               leaveFrom="transform opacity-100 scale-100"
               leaveTo="transform opacity-0 scale-95"
             >
-              <Menu.Items
+              <MenuItems
                 className="
                     absolute -right-2 -top-1 w-60 max-w-80
                     divide-y divide-divider-subtle origin-top-right rounded-lg bg-components-panel-bg-blur
                     shadow-lg
                   "
               >
-                <Menu.Item>
+                <MenuItem>
                   <div className='p-1'>
                     <div className='flex flex-nowrap items-center px-3 py-2'>
                       <div className='grow'>
@@ -74,8 +74,8 @@ export default function AppSelector() {
                       <Avatar name={userProfile.name} size={32} />
                     </div>
                   </div>
-                </Menu.Item>
-                <Menu.Item>
+                </MenuItem>
+                <MenuItem>
                   <div className='p-1' onClick={() => handleLogout()}>
                     <div
                       className='flex items-center justify-start h-9 px-3 rounded-lg cursor-pointer group hover:bg-state-base-hover'
@@ -84,8 +84,8 @@ export default function AppSelector() {
                       <div className='font-normal text-[14px] text-text-secondary'>{t('common.userProfile.logout')}</div>
                     </div>
                   </div>
-                </Menu.Item>
-              </Menu.Items>
+                </MenuItem>
+              </MenuItems>
             </Transition>
           </>
         )
diff --git a/web/app/components/app/annotation/header-opts/index.tsx b/web/app/components/app/annotation/header-opts/index.tsx
index 649d6501c3..d57bc74e7d 100644
--- a/web/app/components/app/annotation/header-opts/index.tsx
+++ b/web/app/components/app/annotation/header-opts/index.tsx
@@ -10,7 +10,7 @@ import { useContext } from 'use-context-selector'
 import {
   useCSVDownloader,
 } from 'react-papaparse'
-import { Menu, Transition } from '@headlessui/react'
+import { Menu, MenuButton, MenuItems, Transition } from '@headlessui/react'
 import Button from '../../../base/button'
 import AddAnnotationModal from '../add-annotation-modal'
 import type { AnnotationItemBasic } from '../type'
@@ -87,11 +87,11 @@ const HeaderOptions: FC<Props> = ({
           <span className='grow text-text-secondary system-sm-regular text-left'>{t('appAnnotation.table.header.bulkImport')}</span>
         </button>
         <Menu as="div" className="relative w-full h-full">
-          <Menu.Button className='h-9 py-2 px-3 mx-1 flex items-center space-x-2 hover:bg-components-panel-on-panel-item-bg-hover rounded-lg cursor-pointer disabled:opacity-50 w-[calc(100%_-_8px)]'>
+          <MenuButton className='h-9 py-2 px-3 mx-1 flex items-center space-x-2 hover:bg-components-panel-on-panel-item-bg-hover rounded-lg cursor-pointer disabled:opacity-50 w-[calc(100%_-_8px)]'>
             <FileDownload02 className='w-4 h-4 text-text-tertiary' />
             <span className='grow text-text-secondary system-sm-regular text-left'>{t('appAnnotation.table.header.bulkExport')}</span>
             <ChevronRight className='shrink-0 w-[14px] h-[14px] text-text-tertiary' />
-          </Menu.Button>
+          </MenuButton>
           <Transition
             as={Fragment}
             enter="transition ease-out duration-100"
@@ -101,7 +101,7 @@ const HeaderOptions: FC<Props> = ({
             leaveFrom="transform opacity-100 scale-100"
             leaveTo="transform opacity-0 scale-95"
           >
-            <Menu.Items
+            <MenuItems
               className={cn(
                 'absolute top-[1px] left-1 -translate-x-full py-1 min-w-[100px] z-10 bg-components-panel-bg border-[0.5px] border-components-panel-on-panel-item-bg origin-top-right rounded-xl shadow-xs',
               )}
@@ -122,7 +122,7 @@ const HeaderOptions: FC<Props> = ({
               <button disabled={annotationUnavailable} className={cn('h-9 py-2 px-3 mx-1 flex items-center space-x-2 hover:bg-components-panel-on-panel-item-bg-hover rounded-lg cursor-pointer disabled:opacity-50 w-[calc(100%_-_8px)]', '!border-0')} onClick={JSONLOutput}>
                 <span className='grow text-text-secondary system-sm-regular text-left'>JSONL</span>
               </button>
-            </Menu.Items>
+            </MenuItems>
           </Transition>
         </Menu>
       </div>
diff --git a/web/app/components/base/modal/index.tsx b/web/app/components/base/modal/index.tsx
index 26cde5fce3..74e4e2f25e 100644
--- a/web/app/components/base/modal/index.tsx
+++ b/web/app/components/base/modal/index.tsx
@@ -1,4 +1,4 @@
-import { Dialog, Transition } from '@headlessui/react'
+import { Dialog, DialogPanel, DialogTitle, Transition } from '@headlessui/react'
 import { Fragment } from 'react'
 import { RiCloseLine } from '@remixicon/react'
 import classNames from '@/utils/classnames'
@@ -30,7 +30,7 @@ export default function Modal({
   return (
     <Transition appear show={isShow} as={Fragment}>
       <Dialog as="div" className={classNames('relative z-50', wrapperClassName)} onClose={onClose}>
-        <Transition.Child
+        {/* <Transition.Child
           as={Fragment}
           enter="ease-out duration-300"
           enterFrom="opacity-0"
@@ -40,7 +40,9 @@ export default function Modal({
           leaveTo="opacity-0"
         >
           <div className="fixed inset-0 bg-background-overlay" />
-        </Transition.Child>
+        </Transition.Child> */}
+        {/* TODO: to new Transition */}
+        <div className="fixed inset-0 bg-background-overlay" />
 
         <div
           className="fixed inset-0 overflow-y-auto"
@@ -50,7 +52,7 @@ export default function Modal({
           }}
         >
           <div className="flex min-h-full items-center justify-center p-4 text-center">
-            <Transition.Child
+            {/* <Transition.Child
               as={Fragment}
               enter="ease-out duration-300"
               enterFrom="opacity-0 scale-95"
@@ -59,20 +61,20 @@ export default function Modal({
               leaveFrom="opacity-100 scale-100"
               leaveTo="opacity-0 scale-95"
             >
-              <Dialog.Panel className={classNames(
+              <DialogPanel className={classNames(
                 'w-full max-w-[480px] transform rounded-2xl bg-components-panel-bg p-6 text-left align-middle shadow-xl transition-all',
                 overflowVisible ? 'overflow-visible' : 'overflow-hidden',
                 className,
               )}>
-                {title && <Dialog.Title
+                {title && <DialogTitle
                   as="h3"
                   className="title-2xl-semi-bold text-text-primary"
                 >
                   {title}
-                </Dialog.Title>}
-                {description && <Dialog.Description className='text-text-secondary body-md-regular mt-2'>
+                </DialogTitle>}
+                {description && <div className='text-text-secondary body-md-regular mt-2'>
                   {description}
-                </Dialog.Description>}
+                </div>}
                 {closable
                   && <div className='absolute z-10 top-6 right-6 w-5 h-5 rounded-2xl flex items-center justify-center hover:cursor-pointer hover:bg-state-base-hover'>
                     <RiCloseLine className='w-4 h-4 text-text-tertiary' onClick={
@@ -83,8 +85,34 @@ export default function Modal({
                     } />
                   </div>}
                 {children}
-              </Dialog.Panel>
-            </Transition.Child>
+              </DialogPanel>
+            </Transition.Child> */}
+            {/* TODO: to new Transition */}
+            <DialogPanel className={classNames(
+              'w-full max-w-[480px] transform rounded-2xl bg-components-panel-bg p-6 text-left align-middle shadow-xl transition-all',
+              overflowVisible ? 'overflow-visible' : 'overflow-hidden',
+              className,
+            )}>
+              {title && <DialogTitle
+                as="h3"
+                className="title-2xl-semi-bold text-text-primary"
+              >
+                {title}
+              </DialogTitle>}
+              {description && <div className='text-text-secondary body-md-regular mt-2'>
+                {description}
+              </div>}
+              {closable
+                && <div className='absolute z-10 top-6 right-6 w-5 h-5 rounded-2xl flex items-center justify-center hover:cursor-pointer hover:bg-state-base-hover'>
+                  <RiCloseLine className='w-4 h-4 text-text-tertiary' onClick={
+                    (e) => {
+                      e.stopPropagation()
+                      onClose()
+                    }
+                  } />
+                </div>}
+              {children}
+            </DialogPanel>
           </div>
         </div>
       </Dialog>