diff --git a/web/app/account/avatar.tsx b/web/app/account/avatar.tsx
index bd9cbec4c4..cd9e582e5f 100644
--- a/web/app/account/avatar.tsx
+++ b/web/app/account/avatar.tsx
@@ -2,13 +2,13 @@
 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'
 import { LogOut01 } from '@/app/components/base/icons/src/vender/line/general'
 
-export interface IAppSelector {
+export type IAppSelector = {
   isMobile: boolean
 }
 
@@ -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 avatar={userProfile.avatar_url} 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 avatar={userProfile.avatar_url} 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/app/create-app-dialog/newAppDialog.tsx b/web/app/components/app/create-app-dialog/newAppDialog.tsx
index 21459773a6..33e7d779f5 100644
--- a/web/app/components/app/create-app-dialog/newAppDialog.tsx
+++ b/web/app/components/app/create-app-dialog/newAppDialog.tsx
@@ -1,6 +1,6 @@
 import { Fragment, useCallback } from 'react'
 import type { ReactNode } from 'react'
-import { Dialog, Transition } from '@headlessui/react'
+import { Dialog, DialogPanel, Transition } from '@headlessui/react'
 import cn from '@/utils/classnames'
 
 type DialogProps = {
@@ -20,7 +20,7 @@ const NewAppDialog = ({
   return (
     <Transition appear show={show} as={Fragment}>
       <Dialog as="div" className="relative z-40" onClose={close}>
-        <Transition.Child
+        {/* <Transition.Child
           as={Fragment}
           enter="ease-out duration-300"
           enterFrom="opacity-0"
@@ -30,11 +30,13 @@ const NewAppDialog = ({
           leaveTo="opacity-0"
         >
           <div className="fixed inset-0 bg-black bg-opacity-25" />
-        </Transition.Child>
+        </Transition.Child> */}
+        {/* TODO: to new Transition */}
+        <div className="fixed inset-0 bg-black bg-opacity-25" />
 
         <div className="fixed inset-0">
           <div className="flex flex-col items-center justify-center min-h-full pt-[56px]">
-            <Transition.Child
+            {/* <Transition.Child
               as={Fragment}
               enter="ease-out duration-300"
               enterFrom="opacity-0 scale-95"
@@ -43,10 +45,14 @@ const NewAppDialog = ({
               leaveFrom="opacity-100 scale-100"
               leaveTo="opacity-0 scale-95"
             >
-              <Dialog.Panel className={cn('grow relative w-full h-[calc(100vh-56px)] p-0 overflow-hidden text-left align-middle transition-all transform bg-white shadow-xl rounded-t-xl', className)}>
+              <DialogPanel className={cn('grow relative w-full h-[calc(100vh-56px)] p-0 overflow-hidden text-left align-middle transition-all transform bg-white shadow-xl rounded-t-xl', className)}>
                 {children}
-              </Dialog.Panel>
-            </Transition.Child>
+              </DialogPanel>
+            </Transition.Child> */}
+            {/* TODO: to new Transition */}
+            <DialogPanel className={cn('grow relative w-full h-[calc(100vh-56px)] p-0 overflow-hidden text-left align-middle transition-all transform bg-white shadow-xl rounded-t-xl', className)}>
+              {children}
+            </DialogPanel>
           </div>
         </div>
       </Dialog>
diff --git a/web/app/components/base/dialog/index.tsx b/web/app/components/base/dialog/index.tsx
index f43906777b..6554ef9009 100644
--- a/web/app/components/base/dialog/index.tsx
+++ b/web/app/components/base/dialog/index.tsx
@@ -1,6 +1,6 @@
 import { Fragment, useCallback } from 'react'
 import type { ElementType, ReactNode } from 'react'
-import { Dialog, Transition } from '@headlessui/react'
+import { Dialog, DialogPanel, DialogTitle, Transition } from '@headlessui/react'
 import classNames from '@/utils/classnames'
 
 // https://headlessui.com/react/dialog
@@ -34,7 +34,7 @@ const CustomDialog = ({
   return (
     <Transition appear show={show} as={Fragment}>
       <Dialog as="div" className="relative z-40" onClose={close}>
-        <Transition.Child
+        {/* <Transition.Child
           as={Fragment}
           enter="ease-out duration-300"
           enterFrom="opacity-0"
@@ -44,11 +44,13 @@ const CustomDialog = ({
           leaveTo="opacity-0"
         >
           <div className="fixed inset-0 bg-black bg-opacity-25" />
-        </Transition.Child>
+        </Transition.Child> */}
+        {/* TODO: to new Transition */}
+        <div className="fixed inset-0 bg-black bg-opacity-25" />
 
         <div className="fixed inset-0 overflow-y-auto">
           <div className="flex items-center justify-center min-h-full">
-            <Transition.Child
+            {/* <Transition.Child
               as={Fragment}
               enter="ease-out duration-300"
               enterFrom="opacity-0 scale-95"
@@ -57,14 +59,14 @@ const CustomDialog = ({
               leaveFrom="opacity-100 scale-100"
               leaveTo="opacity-0 scale-95"
             >
-              <Dialog.Panel className={classNames('w-full max-w-[800px] p-6 overflow-hidden transition-all transform bg-components-panel-bg border-[0.5px] border-components-panel-border shadow-xl rounded-2xl', className)}>
+              <DialogPanel className={classNames('w-full max-w-[800px] p-6 overflow-hidden transition-all transform bg-components-panel-bg border-[0.5px] border-components-panel-border shadow-xl rounded-2xl', className)}>
                 {Boolean(title) && (
-                  <Dialog.Title
+                  <DialogTitle
                     as={titleAs || 'h3'}
                     className={classNames('pr-8 pb-3 title-2xl-semi-bold text-text-primary', titleClassName)}
                   >
                     {title}
-                  </Dialog.Title>
+                  </DialogTitle>
                 )}
                 <div className={classNames(bodyClassName)}>
                   {children}
@@ -74,8 +76,27 @@ const CustomDialog = ({
                     {footer}
                   </div>
                 )}
-              </Dialog.Panel>
-            </Transition.Child>
+              </DialogPanel>
+            </Transition.Child> */}
+            {/* TODO: to new Transition */}
+            <DialogPanel className={classNames('w-full max-w-[800px] p-6 overflow-hidden transition-all transform bg-components-panel-bg border-[0.5px] border-components-panel-border shadow-xl rounded-2xl', className)}>
+              {Boolean(title) && (
+                <DialogTitle
+                  as={titleAs || 'h3'}
+                  className={classNames('pr-8 pb-3 title-2xl-semi-bold text-text-primary', titleClassName)}
+                >
+                  {title}
+                </DialogTitle>
+              )}
+              <div className={classNames(bodyClassName)}>
+                {children}
+              </div>
+              {Boolean(footer) && (
+                <div className={classNames('flex items-center justify-end gap-2 px-6 pb-6 pt-3', footerClassName)}>
+                  {footer}
+                </div>
+              )}
+            </DialogPanel>
           </div>
         </div>
       </Dialog>
diff --git a/web/app/components/base/drawer/index.tsx b/web/app/components/base/drawer/index.tsx
index e34dc7697a..cb6d75b4b8 100644
--- a/web/app/components/base/drawer/index.tsx
+++ b/web/app/components/base/drawer/index.tsx
@@ -1,5 +1,5 @@
 'use client'
-import { Dialog } from '@headlessui/react'
+import { Dialog, DialogBackdrop, DialogTitle } from '@headlessui/react'
 import { useTranslation } from 'react-i18next'
 import { XMarkIcon } from '@heroicons/react/24/outline'
 import Button from '../button'
@@ -48,21 +48,21 @@ export default function Drawer({
     >
       <div className={cn('flex w-screen h-screen justify-end', positionCenter && '!justify-center')}>
         {/* mask */}
-        <Dialog.Overlay
+        <DialogBackdrop
           className={cn('z-40 fixed inset-0', mask && 'bg-black bg-opacity-30')}
         />
         <div className={cn('relative z-50 flex flex-col justify-between bg-components-panel-bg w-full max-w-sm p-6 overflow-hidden text-left align-middle shadow-xl', panelClassname)}>
           <>
-            {title && <Dialog.Title
+            {title && <DialogTitle
               as="h3"
               className="text-lg font-medium leading-6 text-text-primary"
             >
               {title}
-            </Dialog.Title>}
-            {showClose && <Dialog.Title className="flex items-center mb-4" as="div">
+            </DialogTitle>}
+            {showClose && <DialogTitle className="flex items-center mb-4" as="div">
               <XMarkIcon className='w-4 h-4 text-text-tertiary' onClick={onClose} />
-            </Dialog.Title>}
-            {description && <Dialog.Description className='text-text-tertiary text-xs font-normal mt-2'>{description}</Dialog.Description>}
+            </DialogTitle>}
+            {description && <div className='text-text-tertiary text-xs font-normal mt-2'>{description}</div>}
             {children}
           </>
           {footer || (footer === null
diff --git a/web/app/components/base/features/new-feature-panel/dialog-wrapper.tsx b/web/app/components/base/features/new-feature-panel/dialog-wrapper.tsx
index e2b03faad2..c61a325858 100644
--- a/web/app/components/base/features/new-feature-panel/dialog-wrapper.tsx
+++ b/web/app/components/base/features/new-feature-panel/dialog-wrapper.tsx
@@ -1,6 +1,6 @@
 import { Fragment, useCallback } from 'react'
 import type { ReactNode } from 'react'
-import { Dialog, Transition } from '@headlessui/react'
+import { Dialog, DialogPanel, Transition } from '@headlessui/react'
 import cn from '@/utils/classnames'
 
 type DialogProps = {
@@ -22,7 +22,7 @@ const DialogWrapper = ({
   return (
     <Transition appear show={show} as={Fragment}>
       <Dialog as="div" className="relative z-40" onClose={close}>
-        <Transition.Child
+        {/* <Transition.Child
           as={Fragment}
           enter="ease-out duration-300"
           enterFrom="opacity-0"
@@ -32,11 +32,13 @@ const DialogWrapper = ({
           leaveTo="opacity-0"
         >
           <div className="fixed inset-0 bg-black bg-opacity-25" />
-        </Transition.Child>
+        </Transition.Child> */}
+        {/* TODO: to new Transition */}
+        <div className="fixed inset-0 bg-black bg-opacity-25" />
 
         <div className="fixed inset-0">
           <div className={cn('flex flex-col items-end justify-center min-h-full pb-2', inWorkflow ? 'pt-[112px]' : 'pt-[64px] pr-2')}>
-            <Transition.Child
+            {/* <Transition.Child
               as={Fragment}
               enter="ease-out duration-300"
               enterFrom="opacity-0 scale-95"
@@ -45,10 +47,14 @@ const DialogWrapper = ({
               leaveFrom="opacity-100 scale-100"
               leaveTo="opacity-0 scale-95"
             >
-              <Dialog.Panel className={cn('grow flex flex-col relative w-[420px] h-0 p-0 overflow-hidden text-left align-middle transition-all transform bg-components-panel-bg-alt border-components-panel-border shadow-xl', inWorkflow ? 'border-t-[0.5px] border-l-[0.5px] border-b-[0.5px] rounded-l-2xl' : 'border-[0.5px] rounded-2xl', className)}>
+              <DialogPanel className={cn('grow flex flex-col relative w-[420px] h-0 p-0 overflow-hidden text-left align-middle transition-all transform bg-components-panel-bg-alt border-components-panel-border shadow-xl', inWorkflow ? 'border-t-[0.5px] border-l-[0.5px] border-b-[0.5px] rounded-l-2xl' : 'border-[0.5px] rounded-2xl', className)}>
                 {children}
-              </Dialog.Panel>
-            </Transition.Child>
+              </DialogPanel>
+            </Transition.Child> */}
+            {/* TODO: to new Transition */}
+            <DialogPanel className={cn('grow flex flex-col relative w-[420px] h-0 p-0 overflow-hidden text-left align-middle transition-all transform bg-components-panel-bg-alt border-components-panel-border shadow-xl', inWorkflow ? 'border-t-[0.5px] border-l-[0.5px] border-b-[0.5px] rounded-l-2xl' : 'border-[0.5px] rounded-2xl', className)}>
+              {children}
+            </DialogPanel>
           </div>
         </div>
       </Dialog>
diff --git a/web/app/components/base/features/new-feature-panel/text-to-speech/param-config-content.tsx b/web/app/components/base/features/new-feature-panel/text-to-speech/param-config-content.tsx
index 360ea8a72a..94775172c4 100644
--- a/web/app/components/base/features/new-feature-panel/text-to-speech/param-config-content.tsx
+++ b/web/app/components/base/features/new-feature-panel/text-to-speech/param-config-content.tsx
@@ -5,7 +5,7 @@ import React, { Fragment } from 'react'
 import { usePathname } from 'next/navigation'
 import { useTranslation } from 'react-i18next'
 import { RiCloseLine } from '@remixicon/react'
-import { Listbox, Transition } from '@headlessui/react'
+import { Listbox, ListboxButton, ListboxOption, ListboxOptions, Transition } from '@headlessui/react'
 import { CheckIcon, ChevronDownIcon } from '@heroicons/react/20/solid'
 import { useFeatures, useFeaturesStore } from '@/app/components/base/features/hooks'
 import type { Item } from '@/app/components/base/select'
@@ -67,7 +67,7 @@ const VoiceParamConfig = ({
     <>
       <div className='mb-4 flex items-center justify-between'>
         <div className='text-text-primary system-xl-semibold'>{t('appDebug.voice.voiceSettings.title')}</div>
-        <div className='p-1 cursor-pointer' onClick={onClose}><RiCloseLine className='w-4 h-4 text-text-tertiary'/></div>
+        <div className='p-1 cursor-pointer' onClick={onClose}><RiCloseLine className='w-4 h-4 text-text-tertiary' /></div>
       </div>
       <div className='mb-3'>
         <div className='mb-1 py-1 flex items-center text-text-secondary system-sm-semibold'>
@@ -92,7 +92,7 @@ const VoiceParamConfig = ({
           }}
         >
           <div className='relative h-8'>
-            <Listbox.Button
+            <ListboxButton
               className={'w-full h-full rounded-lg border-0 bg-gray-100 py-1.5 pl-3 pr-10 sm:text-sm sm:leading-6 focus-visible:outline-none focus-visible:bg-gray-200 group-hover:bg-gray-200 cursor-pointer'}>
               <span className={classNames('block truncate text-left', !languageItem?.name && 'text-gray-400')}>
                 {languageItem?.name ? t(`common.voice.language.${languageItem?.value.replace('-', '')}`) : localLanguagePlaceholder}
@@ -103,7 +103,7 @@ const VoiceParamConfig = ({
                   aria-hidden="true"
                 />
               </span>
-            </Listbox.Button>
+            </ListboxButton>
             <Transition
               as={Fragment}
               leave="transition ease-in duration-100"
@@ -111,10 +111,10 @@ const VoiceParamConfig = ({
               leaveTo="opacity-0"
             >
 
-              <Listbox.Options
+              <ListboxOptions
                 className="absolute z-10 mt-1 px-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg border-gray-200 border-[0.5px] focus:outline-none sm:text-sm">
                 {languages.map((item: Item) => (
-                  <Listbox.Option
+                  <ListboxOption
                     key={item.value}
                     className={({ active }) =>
                       `relative cursor-pointer select-none py-2 pl-3 pr-9 rounded-lg hover:bg-gray-100 text-gray-700 ${active ? 'bg-gray-100' : ''
@@ -133,14 +133,14 @@ const VoiceParamConfig = ({
                               'absolute inset-y-0 right-0 flex items-center pr-4 text-gray-700',
                             )}
                           >
-                            <CheckIcon className="h-5 w-5" aria-hidden="true"/>
+                            <CheckIcon className="h-5 w-5" aria-hidden="true" />
                           </span>
                         )}
                       </>
                     )}
-                  </Listbox.Option>
+                  </ListboxOption>
                 ))}
-              </Listbox.Options>
+              </ListboxOptions>
             </Transition>
           </div>
         </Listbox>
@@ -160,7 +160,7 @@ const VoiceParamConfig = ({
             }}
           >
             <div className={'grow relative h-8'}>
-              <Listbox.Button
+              <ListboxButton
                 className={'w-full h-full rounded-lg border-0 bg-gray-100 py-1.5 pl-3 pr-10 sm:text-sm sm:leading-6 focus-visible:outline-none focus-visible:bg-gray-200 group-hover:bg-gray-200 cursor-pointer'}>
                 <span
                   className={classNames('block truncate text-left', !voiceItem?.name && 'text-gray-400')}>{voiceItem?.name ?? localVoicePlaceholder}</span>
@@ -170,7 +170,7 @@ const VoiceParamConfig = ({
                     aria-hidden="true"
                   />
                 </span>
-              </Listbox.Button>
+              </ListboxButton>
               <Transition
                 as={Fragment}
                 leave="transition ease-in duration-100"
@@ -178,10 +178,10 @@ const VoiceParamConfig = ({
                 leaveTo="opacity-0"
               >
 
-                <Listbox.Options
+                <ListboxOptions
                   className="absolute z-10 mt-1 px-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg border-gray-200 border-[0.5px] focus:outline-none sm:text-sm">
                   {voiceItems?.map((item: Item) => (
-                    <Listbox.Option
+                    <ListboxOption
                       key={item.value}
                       className={({ active }) =>
                         `relative cursor-pointer select-none py-2 pl-3 pr-9 rounded-lg hover:bg-gray-100 text-gray-700 ${active ? 'bg-gray-100' : ''
@@ -199,14 +199,14 @@ const VoiceParamConfig = ({
                                 'absolute inset-y-0 right-0 flex items-center pr-4 text-gray-700',
                               )}
                             >
-                              <CheckIcon className="h-5 w-5" aria-hidden="true"/>
+                              <CheckIcon className="h-5 w-5" aria-hidden="true" />
                             </span>
                           )}
                         </>
                       )}
-                    </Listbox.Option>
+                    </ListboxOption>
                   ))}
-                </Listbox.Options>
+                </ListboxOptions>
               </Transition>
             </div>
           </Listbox>
diff --git a/web/app/components/base/fullscreen-modal/index.tsx b/web/app/components/base/fullscreen-modal/index.tsx
index 752a91cecc..9a76dfa62b 100644
--- a/web/app/components/base/fullscreen-modal/index.tsx
+++ b/web/app/components/base/fullscreen-modal/index.tsx
@@ -1,4 +1,4 @@
-import { Dialog, Transition } from '@headlessui/react'
+import { Dialog, DialogPanel, Transition } from '@headlessui/react'
 import { Fragment } from 'react'
 import { RiCloseLargeLine } from '@remixicon/react'
 import classNames from '@/utils/classnames'
@@ -27,7 +27,7 @@ export default function FullScreenModal({
   return (
     <Transition show={open} as={Fragment}>
       <Dialog as="div" className={classNames('modal-dialog', wrapperClassName)} onClose={onClose}>
-        <Transition.Child
+        {/* <Transition.Child
           as={Fragment}
           enter="ease-out duration-300"
           enterFrom="opacity-0"
@@ -37,7 +37,9 @@ export default function FullScreenModal({
           leaveTo="opacity-0"
         >
           <div className="fixed inset-0 bg-background-overlay-backdrop backdrop-blur-[6px]" />
-        </Transition.Child>
+        </Transition.Child> */}
+        {/* TODO: to new Transition */}
+        <div className="fixed inset-0 bg-background-overlay-backdrop backdrop-blur-[6px]" />
 
         <div
           className="fixed inset-0 h-screen w-screen p-4"
@@ -47,7 +49,7 @@ export default function FullScreenModal({
           }}
         >
           <div className="w-full h-full bg-background-default-subtle rounded-2xl border border-effects-highlight relative">
-            <Transition.Child
+            {/* <Transition.Child
               as={Fragment}
               enter="ease-out duration-300"
               enterFrom="opacity-0 scale-95"
@@ -56,7 +58,7 @@ export default function FullScreenModal({
               leaveFrom="opacity-100 scale-100"
               leaveTo="opacity-0 scale-95"
             >
-              <Dialog.Panel className={classNames(
+              <DialogPanel className={classNames(
                 'h-full',
                 overflowVisible ? 'overflow-visible' : 'overflow-hidden',
                 className,
@@ -72,8 +74,26 @@ export default function FullScreenModal({
                     <RiCloseLargeLine className='w-3.5 h-3.5 text-components-button-tertiary-text' />
                   </div>}
                 {children}
-              </Dialog.Panel>
-            </Transition.Child>
+              </DialogPanel>
+            </Transition.Child> */}
+            {/* TODO: to new Transition */}
+            <DialogPanel className={classNames(
+              'h-full',
+              overflowVisible ? 'overflow-visible' : 'overflow-hidden',
+              className,
+            )}>
+              {closable
+                && <div
+                  className='absolute z-50 top-3 right-3 w-9 h-9 flex items-center justify-center rounded-[10px]
+                  bg-components-button-tertiary-bg hover:bg-components-button-tertiary-bg-hover cursor-pointer'
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    onClose()
+                  }}>
+                  <RiCloseLargeLine className='w-3.5 h-3.5 text-components-button-tertiary-text' />
+                </div>}
+              {children}
+            </DialogPanel>
           </div>
         </div>
       </Dialog>
diff --git a/web/app/components/base/modal/index.tsx b/web/app/components/base/modal/index.tsx
index a659ccaac7..4d586add57 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-[60]', 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>
diff --git a/web/app/components/base/notion-page-selector/workspace-selector/index.tsx b/web/app/components/base/notion-page-selector/workspace-selector/index.tsx
index 66227d4f4d..39171a02c6 100644
--- a/web/app/components/base/notion-page-selector/workspace-selector/index.tsx
+++ b/web/app/components/base/notion-page-selector/workspace-selector/index.tsx
@@ -1,7 +1,7 @@
 'use client'
 import { useTranslation } from 'react-i18next'
 import { Fragment } from 'react'
-import { Menu, Transition } from '@headlessui/react'
+import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react'
 import NotionIcon from '../../notion-icon'
 import s from './index.module.css'
 import cn from '@/utils/classnames'
@@ -25,7 +25,7 @@ export default function WorkspaceSelector({
       {
         ({ open }) => (
           <>
-            <Menu.Button className={`flex items-center justify-center h-7 rounded-md hover:bg-gray-50 ${open && 'bg-gray-50'} cursor-pointer`}>
+            <MenuButton className={`flex items-center justify-center h-7 rounded-md hover:bg-gray-50 ${open && 'bg-gray-50'} cursor-pointer`}>
               <NotionIcon
                 className='ml-1 mr-2'
                 src={currentWorkspace?.workspace_icon}
@@ -34,7 +34,7 @@ export default function WorkspaceSelector({
               <div className='mr-1 w-[90px] text-left text-sm font-medium text-gray-700 truncate' title={currentWorkspace?.workspace_name}>{currentWorkspace?.workspace_name}</div>
               <div className='mr-1 px-1 h-[18px] bg-primary-50 rounded-lg text-xs font-medium text-primary-600'>{currentWorkspace?.pages.length}</div>
               <div className={cn(s['down-arrow'], 'mr-2 w-3 h-3')} />
-            </Menu.Button>
+            </MenuButton>
             <Transition
               as={Fragment}
               enter="transition ease-out duration-100"
@@ -44,7 +44,7 @@ export default function WorkspaceSelector({
               leaveFrom="transform opacity-100 scale-100"
               leaveTo="transform opacity-0 scale-95"
             >
-              <Menu.Items
+              <MenuItems
                 className={cn(
                   s.popup,
                   `absolute left-0 top-8 w-80
@@ -55,7 +55,7 @@ export default function WorkspaceSelector({
                 <div className="p-1 max-h-50 overflow-auto">
                   {
                     items.map(item => (
-                      <Menu.Item key={item.workspace_id}>
+                      <MenuItem key={item.workspace_id}>
                         <div
                           className='flex items-center px-3 h-9 hover:bg-gray-50 cursor-pointer'
                           onClick={() => onSelect(item.workspace_id)}
@@ -70,11 +70,11 @@ export default function WorkspaceSelector({
                             {item.pages.length} {t('common.dataSource.notion.selector.pageSelected')}
                           </div>
                         </div>
-                      </Menu.Item>
+                      </MenuItem>
                     ))
                   }
                 </div>
-              </Menu.Items>
+              </MenuItems>
             </Transition>
           </>
         )
diff --git a/web/app/components/base/popover/index.tsx b/web/app/components/base/popover/index.tsx
index f510c21642..13090abe0b 100644
--- a/web/app/components/base/popover/index.tsx
+++ b/web/app/components/base/popover/index.tsx
@@ -1,4 +1,4 @@
-import { Popover, Transition } from '@headlessui/react'
+import { Popover, PopoverButton, PopoverPanel, Transition } from '@headlessui/react'
 import { Fragment, cloneElement, useRef } from 'react'
 import cn from '@/utils/classnames'
 
@@ -59,7 +59,7 @@ export default function CustomPopover({
                   onMouseEnter: () => onMouseEnter(open),
                 })}
             >
-              <Popover.Button
+              <PopoverButton
                 ref={buttonRef}
                 disabled={disabled}
                 className={cn(
@@ -70,9 +70,9 @@ export default function CustomPopover({
                 )}
               >
                 {btnElement}
-              </Popover.Button>
+              </PopoverButton>
               <Transition as={Fragment}>
-                <Popover.Panel
+                <PopoverPanel
                   className={cn(
                     'absolute z-10 w-full max-w-sm px-4 mt-1 sm:px-0 lg:max-w-3xl',
                     position === 'bottom' && '-translate-x-1/2 left-1/2',
@@ -109,7 +109,7 @@ export default function CustomPopover({
                       })}
                     </div>
                   )}
-                </Popover.Panel>
+                </PopoverPanel>
               </Transition>
             </div>
           </>
diff --git a/web/app/components/base/select/index.tsx b/web/app/components/base/select/index.tsx
index 9ad964f79d..6a99fd3f76 100644
--- a/web/app/components/base/select/index.tsx
+++ b/web/app/components/base/select/index.tsx
@@ -1,7 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import React, { Fragment, useEffect, useState } from 'react'
-import { Combobox, Listbox, Transition } from '@headlessui/react'
+import { Combobox, ComboboxButton, ComboboxInput, ComboboxOption, ComboboxOptions, Listbox, ListboxButton, ListboxOption, ListboxOptions, Transition } from '@headlessui/react'
 import { ChevronDownIcon, ChevronUpIcon, XMarkIcon } from '@heroicons/react/20/solid'
 import Badge from '../badge/index'
 import { RiCheckLine } from '@remixicon/react'
@@ -101,7 +101,7 @@ const Select: FC<ISelectProps> = ({
       <div className={classNames('relative')}>
         <div className='group text-text-secondary'>
           {allowSearch
-            ? <Combobox.Input
+            ? <ComboboxInput
               className={`w-full rounded-lg border-0 ${bgClassName} py-1.5 pl-3 pr-10 shadow-sm sm:text-sm sm:leading-6 focus-visible:outline-none focus-visible:bg-state-base-hover group-hover:bg-state-base-hover ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}`}
               onChange={(event) => {
                 if (!disabled)
@@ -109,28 +109,28 @@ const Select: FC<ISelectProps> = ({
               }}
               displayValue={(item: Item) => item?.name}
             />
-            : <Combobox.Button onClick={
+            : <ComboboxButton onClick={
               () => {
                 if (!disabled)
                   setOpen(!open)
               }
             } className={classNames(`flex items-center h-9 w-full rounded-lg border-0 ${bgClassName} py-1.5 pl-3 pr-10 shadow-sm sm:text-sm sm:leading-6 focus-visible:outline-none focus-visible:bg-state-base-hover group-hover:bg-state-base-hover`, optionClassName)}>
               <div className='w-0 grow text-left truncate' title={selectedItem?.name}>{selectedItem?.name}</div>
-            </Combobox.Button>}
-          <Combobox.Button className="absolute inset-y-0 right-0 flex items-center rounded-r-md px-2 focus:outline-none" onClick={
+            </ComboboxButton>}
+          <ComboboxButton className="absolute inset-y-0 right-0 flex items-center rounded-r-md px-2 focus:outline-none" onClick={
             () => {
               if (!disabled)
                 setOpen(!open)
             }
           }>
             {open ? <ChevronUpIcon className="h-5 w-5" /> : <ChevronDownIcon className="h-5 w-5" />}
-          </Combobox.Button>
+          </ComboboxButton>
         </div>
 
         {(filteredItems.length > 0 && open) && (
-          <Combobox.Options className={`absolute z-10 mt-1 px-1 max-h-60 w-full overflow-auto rounded-md bg-components-panel-bg-blur backdrop-blur-sm py-1 text-base shadow-lg border-components-panel-border border-[0.5px] focus:outline-none sm:text-sm ${overlayClassName}`}>
+          <ComboboxOptions className={`absolute z-10 mt-1 px-1 max-h-60 w-full overflow-auto rounded-md bg-components-panel-bg-blur backdrop-blur-sm py-1 text-base shadow-lg border-components-panel-border border-[0.5px] focus:outline-none sm:text-sm ${overlayClassName}`}>
             {filteredItems.map((item: Item) => (
-              <Combobox.Option
+              <ComboboxOption
                 key={item.value}
                 value={item}
                 className={({ active }: { active: boolean }) =>
@@ -161,9 +161,9 @@ const Select: FC<ISelectProps> = ({
                       )}
                   </>
                 )}
-              </Combobox.Option>
+              </ComboboxOption>
             ))}
-          </Combobox.Options>
+          </ComboboxOptions>
         )}
       </div>
     </Combobox >
@@ -210,9 +210,9 @@ const SimpleSelect: FC<ISelectProps> = ({
       }}
     >
       <div className={classNames('group/simple-select relative h-9', wrapperClassName)}>
-        {renderTrigger && <Listbox.Button className='w-full'>{renderTrigger(selectedItem)}</Listbox.Button>}
+        {renderTrigger && <ListboxButton className='w-full'>{renderTrigger(selectedItem)}</ListboxButton>}
         {!renderTrigger && (
-          <Listbox.Button className={classNames(`flex items-center w-full h-full rounded-lg border-0 bg-components-input-bg-normal pl-3 pr-10 sm:text-sm sm:leading-6 focus-visible:outline-none focus-visible:bg-state-base-hover-alt group-hover/simple-select:bg-state-base-hover-alt ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}`, className)}>
+          <ListboxButton className={classNames(`flex items-center w-full h-full rounded-lg border-0 bg-components-input-bg-normal pl-3 pr-10 sm:text-sm sm:leading-6 focus-visible:outline-none focus-visible:bg-state-base-hover-alt group-hover/simple-select:bg-state-base-hover-alt ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}`, className)}>
             <span className={classNames('block truncate text-left system-sm-regular text-components-input-text-filled', !selectedItem?.name && 'text-components-input-text-placeholder')}>{selectedItem?.name ?? localPlaceholder}</span>
             <span className="absolute inset-y-0 right-0 flex items-center pr-2">
               {(selectedItem && !notClearable)
@@ -234,7 +234,7 @@ const SimpleSelect: FC<ISelectProps> = ({
                   />
                 )}
             </span>
-          </Listbox.Button>
+          </ListboxButton>
         )}
 
         {!disabled && (
@@ -245,9 +245,9 @@ const SimpleSelect: FC<ISelectProps> = ({
             leaveTo="opacity-0"
           >
 
-            <Listbox.Options className={classNames('absolute z-10 mt-1 px-1 max-h-60 w-full overflow-auto rounded-md bg-components-panel-bg-blur backdrop-blur-sm py-1 text-base shadow-lg border-components-panel-border border-[0.5px] focus:outline-none sm:text-sm', optionWrapClassName)}>
+            <ListboxOptions className={classNames('absolute z-10 mt-1 px-1 max-h-60 w-full overflow-auto rounded-md bg-components-panel-bg-blur backdrop-blur-sm py-1 text-base shadow-lg border-components-panel-border border-[0.5px] focus:outline-none sm:text-sm', optionWrapClassName)}>
               {items.map((item: Item) => (
-                <Listbox.Option
+                <ListboxOption
                   key={item.value}
                   className={({ active }) =>
                     classNames(
@@ -276,9 +276,9 @@ const SimpleSelect: FC<ISelectProps> = ({
                         </>)}
                     </>
                   )}
-                </Listbox.Option>
+                </ListboxOption>
               ))}
-            </Listbox.Options>
+            </ListboxOptions>
           </Transition>
         )}
       </div>
diff --git a/web/app/components/base/select/locale.tsx b/web/app/components/base/select/locale.tsx
index 8b89c66950..b7b2d5cbbf 100644
--- a/web/app/components/base/select/locale.tsx
+++ b/web/app/components/base/select/locale.tsx
@@ -1,7 +1,8 @@
 'use client'
-import { Menu, Transition } from '@headlessui/react'
+import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react'
 import { Fragment } from 'react'
 import { GlobeAltIcon } from '@heroicons/react/24/outline'
+import cn from '@/utils/classnames'
 
 type ISelectProps = {
   items: Array<{ value: string; name: string }>
@@ -21,14 +22,14 @@ export default function Select({
     <div className="w-56 text-right">
       <Menu as="div" className="relative inline-block text-left">
         <div>
-          <Menu.Button className="inline-flex w-full h-[44px]justify-center items-center
+          <MenuButton className="inline-flex w-full h-[44px]justify-center items-center
           rounded-lg px-[10px] py-[6px]
           text-gray-900 text-[13px] font-medium
           border border-gray-200
           hover:bg-gray-100">
             <GlobeAltIcon className="w-5 h-5 mr-1" aria-hidden="true" />
             {item?.name}
-          </Menu.Button>
+          </MenuButton>
         </div>
         <Transition
           as={Fragment}
@@ -39,14 +40,13 @@ export default function Select({
           leaveFrom="transform opacity-100 scale-100"
           leaveTo="transform opacity-0 scale-95"
         >
-          <Menu.Items className="absolute right-0 mt-2 w-[200px] origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none z-10">
+          <MenuItems className="absolute right-0 mt-2 w-[200px] origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none z-10">
             <div className="px-1 py-1 ">
               {items.map((item) => {
-                return <Menu.Item key={item.value}>
+                return <MenuItem key={item.value}>
                   {({ active }) => (
                     <button
-                      className={`${active ? 'bg-gray-100' : ''
-                      } group flex w-full items-center rounded-lg px-3 py-2 text-sm text-gray-700`}
+                      className={cn(active && 'bg-gray-100', 'group flex w-full items-center rounded-lg px-3 py-2 text-sm text-gray-700')}
                       onClick={(evt) => {
                         evt.preventDefault()
                         onChange && onChange(item.value)
@@ -55,12 +55,12 @@ export default function Select({
                       {item.name}
                     </button>
                   )}
-                </Menu.Item>
+                </MenuItem>
               })}
 
             </div>
 
-          </Menu.Items>
+          </MenuItems>
         </Transition>
       </Menu>
     </div>
@@ -77,9 +77,9 @@ export function InputSelect({
     <div className="w-full">
       <Menu as="div" className="w-full">
         <div>
-          <Menu.Button className="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 sm:text-sm h-[38px] text-left">
+          <MenuButton className="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder:text-gray-400 sm:text-sm h-[38px] text-left">
             {item?.name}
-          </Menu.Button>
+          </MenuButton>
         </div>
         <Transition
           as={Fragment}
@@ -90,14 +90,13 @@ export function InputSelect({
           leaveFrom="transform opacity-100 scale-100"
           leaveTo="transform opacity-0 scale-95"
         >
-          <Menu.Items className="absolute right-0 mt-2 w-full origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none z-10">
+          <MenuItems className="absolute right-0 mt-2 w-full origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none z-10">
             <div className="px-1 py-1 ">
               {items.map((item) => {
-                return <Menu.Item key={item.value}>
+                return <MenuItem key={item.value}>
                   {({ active }) => (
                     <button
-                      className={`${active ? 'bg-gray-100' : ''
-                      } group flex w-full items-center rounded-md px-2 py-2 text-sm`}
+                      className={`${active ? 'bg-gray-100' : ''} group flex w-full items-center rounded-md px-2 py-2 text-sm`}
                       onClick={() => {
                         onChange && onChange(item.value)
                       }}
@@ -105,12 +104,12 @@ export function InputSelect({
                       {item.name}
                     </button>
                   )}
-                </Menu.Item>
+                </MenuItem>
               })}
 
             </div>
 
-          </Menu.Items>
+          </MenuItems>
         </Transition>
       </Menu>
     </div>
diff --git a/web/app/components/develop/code.tsx b/web/app/components/develop/code.tsx
index 7716cd4c93..1c9e2b57f3 100644
--- a/web/app/components/develop/code.tsx
+++ b/web/app/components/develop/code.tsx
@@ -7,7 +7,7 @@ import {
   useRef,
   useState,
 } from 'react'
-import { Tab } from '@headlessui/react'
+import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/react'
 import { Tag } from './tag'
 import classNames from '@/utils/classnames'
 import { writeTextToClipboard } from '@/utils/clipboard'
@@ -162,7 +162,7 @@ function CodeGroupHeader({ title, children, selectedIndex }: IChildrenProps) {
         </h3>
       )}
       {hasTabs && (
-        <Tab.List className="flex gap-4 -mb-px text-xs font-medium">
+        <TabList className="flex gap-4 -mb-px text-xs font-medium">
           {Children.map(children, (child, childIndex) => (
             <Tab
               className={classNames(
@@ -175,7 +175,7 @@ function CodeGroupHeader({ title, children, selectedIndex }: IChildrenProps) {
               {getPanelTitle(child.props.children.props)}
             </Tab>
           ))}
-        </Tab.List>
+        </TabList>
       )}
     </div>
   )
@@ -190,13 +190,13 @@ function CodeGroupPanels({ children, targetCode, ...props }: ICodeGroupPanelsPro
 
   if (hasTabs) {
     return (
-      <Tab.Panels>
+      <TabPanels>
         {Children.map(children, child => (
-          <Tab.Panel>
+          <TabPanel>
             <CodePanel {...props}>{child}</CodePanel>
-          </Tab.Panel>
+          </TabPanel>
         ))}
-      </Tab.Panels>
+      </TabPanels>
     )
   }
 
@@ -261,7 +261,7 @@ export function CodeGroup({ children, title, inputs, targetCode, ...props }: ICh
   )
   const tabGroupProps = useTabGroupProps(languages)
   const hasTabs = Children.count(children) > 1
-  const Container = hasTabs ? Tab.Group : 'div'
+  const Container = hasTabs ? TabGroup : 'div'
   const containerProps = hasTabs ? tabGroupProps : {}
   const headerProps = hasTabs
     ? { selectedIndex: tabGroupProps.selectedIndex }
diff --git a/web/app/components/header/account-dropdown/index.tsx b/web/app/components/header/account-dropdown/index.tsx
index f176058332..faa0c8588e 100644
--- a/web/app/components/header/account-dropdown/index.tsx
+++ b/web/app/components/header/account-dropdown/index.tsx
@@ -5,7 +5,7 @@ import { useRouter } from 'next/navigation'
 import { useContext } from 'use-context-selector'
 import { RiArrowDownSLine, RiLogoutBoxRLine } from '@remixicon/react'
 import Link from 'next/link'
-import { Menu, Transition } from '@headlessui/react'
+import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react'
 import Indicator from '../indicator'
 import AccountAbout from '../account-about'
 import { mailToSupport } from '../utils/util'
@@ -58,7 +58,7 @@ export default function AppSelector({ isMobile }: IAppSelector) {
         {
           ({ open }) => (
             <>
-              <Menu.Button
+              <MenuButton
                 className={`
                     inline-flex items-center
                     rounded-[20px] py-1 pr-2.5 pl-1 text-sm
@@ -72,7 +72,7 @@ export default function AppSelector({ isMobile }: IAppSelector) {
                   {userProfile.name}
                   <RiArrowDownSLine className="w-3 h-3 ml-1 text-gray-700" />
                 </>}
-              </Menu.Button>
+              </MenuButton>
               <Transition
                 as={Fragment}
                 enter="transition ease-out duration-100"
@@ -82,14 +82,14 @@ export default function AppSelector({ isMobile }: IAppSelector) {
                 leaveFrom="transform opacity-100 scale-100"
                 leaveTo="transform opacity-0 scale-95"
               >
-                <Menu.Items
+                <MenuItems
                   className="
                     absolute right-0 mt-1.5 w-60 max-w-80
                     divide-y divide-divider-subtle origin-top-right rounded-lg bg-components-panel-bg-blur
                     shadow-lg focus:outline-none
                   "
                 >
-                  <Menu.Item disabled>
+                  <MenuItem disabled>
                     <div className='flex flex-nowrap items-center px-4 py-[13px]'>
                       <Avatar avatar={userProfile.avatar_url} name={userProfile.name} size={36} className='mr-3' />
                       <div className='grow'>
@@ -97,9 +97,9 @@ export default function AppSelector({ isMobile }: IAppSelector) {
                         <div className='system-xs-regular text-text-tertiary break-all'>{userProfile.email}</div>
                       </div>
                     </div>
-                  </Menu.Item>
+                  </MenuItem>
                   <div className="px-1 py-1">
-                    <Menu.Item>
+                    <MenuItem>
                       {({ active }) => <Link
                         className={classNames(itemClassName, 'group justify-between',
                           active && 'bg-state-base-hover',
@@ -109,15 +109,15 @@ export default function AppSelector({ isMobile }: IAppSelector) {
                         <div>{t('common.account.account')}</div>
                         <ArrowUpRight className='hidden w-[14px] h-[14px] text-text-tertiary group-hover:flex' />
                       </Link>}
-                    </Menu.Item>
-                    <Menu.Item>
+                    </MenuItem>
+                    <MenuItem>
                       {({ active }) => <div className={classNames(itemClassName,
                         active && 'bg-state-base-hover',
                       )} onClick={() => setShowAccountSettingModal({ payload: 'members' })}>
                         <div>{t('common.userProfile.settings')}</div>
                       </div>}
-                    </Menu.Item>
-                    {canEmailSupport && <Menu.Item>
+                    </MenuItem>
+                    {canEmailSupport && <MenuItem>
                       {({ active }) => <a
                         className={classNames(itemClassName, 'group justify-between',
                           active && 'bg-state-base-hover',
@@ -127,8 +127,8 @@ export default function AppSelector({ isMobile }: IAppSelector) {
                         <div>{t('common.userProfile.emailSupport')}</div>
                         <ArrowUpRight className='hidden w-[14px] h-[14px] text-text-tertiary group-hover:flex' />
                       </a>}
-                    </Menu.Item>}
-                    <Menu.Item>
+                    </MenuItem>}
+                    <MenuItem>
                       {({ active }) => <Link
                         className={classNames(itemClassName, 'group justify-between',
                           active && 'bg-state-base-hover',
@@ -138,8 +138,8 @@ export default function AppSelector({ isMobile }: IAppSelector) {
                         <div>{t('common.userProfile.communityFeedback')}</div>
                         <ArrowUpRight className='hidden w-[14px] h-[14px] text-text-tertiary group-hover:flex' />
                       </Link>}
-                    </Menu.Item>
-                    <Menu.Item>
+                    </MenuItem>
+                    <MenuItem>
                       {({ active }) => <Link
                         className={classNames(itemClassName, 'group justify-between',
                           active && 'bg-state-base-hover',
@@ -149,8 +149,8 @@ export default function AppSelector({ isMobile }: IAppSelector) {
                         <div>{t('common.userProfile.community')}</div>
                         <ArrowUpRight className='hidden w-[14px] h-[14px] text-text-tertiary group-hover:flex' />
                       </Link>}
-                    </Menu.Item>
-                    <Menu.Item>
+                    </MenuItem>
+                    <MenuItem>
                       {({ active }) => <Link
                         className={classNames(itemClassName, 'group justify-between',
                           active && 'bg-state-base-hover',
@@ -162,8 +162,8 @@ export default function AppSelector({ isMobile }: IAppSelector) {
                         <div>{t('common.userProfile.helpCenter')}</div>
                         <ArrowUpRight className='hidden w-[14px] h-[14px] text-text-tertiary group-hover:flex' />
                       </Link>}
-                    </Menu.Item>
-                    <Menu.Item>
+                    </MenuItem>
+                    <MenuItem>
                       {({ active }) => <Link
                         className={classNames(itemClassName, 'group justify-between',
                           active && 'bg-state-base-hover',
@@ -173,10 +173,10 @@ export default function AppSelector({ isMobile }: IAppSelector) {
                         <div>{t('common.userProfile.roadmap')}</div>
                         <ArrowUpRight className='hidden w-[14px] h-[14px] text-text-tertiary group-hover:flex' />
                       </Link>}
-                    </Menu.Item>
+                    </MenuItem>
                     {
                       document?.body?.getAttribute('data-public-site-about') !== 'hide' && (
-                        <Menu.Item>
+                        <MenuItem>
                           {({ active }) => <div className={classNames(itemClassName, 'justify-between',
                             active && 'bg-state-base-hover',
                           )} onClick={() => setAboutVisible(true)}>
@@ -186,11 +186,11 @@ export default function AppSelector({ isMobile }: IAppSelector) {
                               <Indicator color={langeniusVersionInfo.current_version === langeniusVersionInfo.latest_version ? 'green' : 'orange'} />
                             </div>
                           </div>}
-                        </Menu.Item>
+                        </MenuItem>
                       )
                     }
                   </div>
-                  <Menu.Item>
+                  <MenuItem>
                     {({ active }) => <div className='p-1' onClick={() => handleLogout()}>
                       <div
                         className={
@@ -201,8 +201,8 @@ export default function AppSelector({ isMobile }: IAppSelector) {
                         <RiLogoutBoxRLine className='hidden w-4 h-4 text-text-tertiary group-hover:flex' />
                       </div>
                     </div>}
-                  </Menu.Item>
-                </Menu.Items>
+                  </MenuItem>
+                </MenuItems>
               </Transition>
             </>
           )
diff --git a/web/app/components/header/account-dropdown/workplace-selector/index.tsx b/web/app/components/header/account-dropdown/workplace-selector/index.tsx
index f8bde33d51..750b18957e 100644
--- a/web/app/components/header/account-dropdown/workplace-selector/index.tsx
+++ b/web/app/components/header/account-dropdown/workplace-selector/index.tsx
@@ -1,7 +1,7 @@
 import { Fragment } from 'react'
 import { useContext } from 'use-context-selector'
 import { useTranslation } from 'react-i18next'
-import { Menu, Transition } from '@headlessui/react'
+import { Menu, MenuButton, MenuItems, Transition } from '@headlessui/react'
 import { RiArrowDownSLine } from '@remixicon/react'
 import cn from '@/utils/classnames'
 import { switchWorkspace } from '@/service/common'
@@ -35,7 +35,7 @@ const WorkplaceSelector = () => {
       {
         ({ open }) => (
           <>
-            <Menu.Button className={cn(
+            <MenuButton className={cn(
               `
                 flex items-center p-0.5 gap-1.5 w-full
                 group hover:bg-state-base-hover cursor-pointer ${open && 'bg-state-base-hover'} rounded-[10px]
@@ -46,7 +46,7 @@ const WorkplaceSelector = () => {
                 <div className={'truncate max-w-[80px] text-text-secondary system-sm-medium'}>{currentWorkspace?.name}</div>
                 <RiArrowDownSLine className='w-4 h-4 text-text-secondary' />
               </div>
-            </Menu.Button>
+            </MenuButton>
             <Transition
               as={Fragment}
               enter="transition ease-out duration-100"
@@ -56,7 +56,7 @@ const WorkplaceSelector = () => {
               leaveFrom="transform opacity-100 scale-100"
               leaveTo="transform opacity-0 scale-95"
             >
-              <Menu.Items
+              <MenuItems
                 className={cn(
                   `
                     flex w-[280px] flex-col items-start absolute left-[-15px] mt-1 rounded-xl shadows-shadow-lg
@@ -85,7 +85,7 @@ const WorkplaceSelector = () => {
                     ))
                   }
                 </div>
-              </Menu.Items>
+              </MenuItems>
             </Transition>
           </>
         )
diff --git a/web/app/components/header/account-setting/data-source-page/data-source-notion/operate/index.tsx b/web/app/components/header/account-setting/data-source-page/data-source-notion/operate/index.tsx
index c6c8b9ec39..f4790e52e2 100644
--- a/web/app/components/header/account-setting/data-source-page/data-source-notion/operate/index.tsx
+++ b/web/app/components/header/account-setting/data-source-page/data-source-notion/operate/index.tsx
@@ -8,7 +8,7 @@ import {
   RiMoreFill,
   RiStickyNoteAddLine,
 } from '@remixicon/react'
-import { Menu, Transition } from '@headlessui/react'
+import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react'
 import { syncDataSourceNotion, updateDataSourceNotionAction } from '@/service/common'
 import Toast from '@/app/components/base/toast'
 
@@ -54,9 +54,9 @@ export default function Operate({
       {
         ({ open }) => (
           <>
-            <Menu.Button className={`flex items-center justify-center w-8 h-8 rounded-lg hover:bg-gray-100 ${open && 'bg-gray-100'}`}>
+            <MenuButton className={`flex items-center justify-center w-8 h-8 rounded-lg hover:bg-gray-100 ${open && 'bg-gray-100'}`}>
               <RiMoreFill className='w-4 h-4' />
-            </Menu.Button>
+            </MenuButton>
             <Transition
               as={Fragment}
               enter="transition ease-out duration-100"
@@ -66,7 +66,7 @@ export default function Operate({
               leaveFrom="transform opacity-100 scale-100"
               leaveTo="transform opacity-0 scale-95"
             >
-              <Menu.Items
+              <MenuItems
                 className="
                   absolute right-0 top-9 w-60 max-w-80
                   divide-y divide-gray-100 origin-top-right rounded-lg bg-white
@@ -74,7 +74,7 @@ export default function Operate({
                 "
               >
                 <div className="px-1 py-1">
-                  <Menu.Item>
+                  <MenuItem>
                     <div
                       className={itemClassName}
                       onClick={onAuthAgain}
@@ -87,23 +87,23 @@ export default function Operate({
                         </div>
                       </div>
                     </div>
-                  </Menu.Item>
-                  <Menu.Item>
+                  </MenuItem>
+                  <MenuItem>
                     <div className={itemClassName} onClick={handleSync}>
                       <RiLoopLeftLine className={itemIconClassName} />
                       <div className='leading-5'>{t('common.dataSource.notion.sync')}</div>
                     </div>
-                  </Menu.Item>
+                  </MenuItem>
                 </div>
-                <Menu.Item>
+                <MenuItem>
                   <div className='p-1'>
                     <div className={itemClassName} onClick={handleRemove}>
                       <RiDeleteBinLine className={itemIconClassName} />
                       <div className='leading-5'>{t('common.dataSource.notion.remove')}</div>
                     </div>
                   </div>
-                </Menu.Item>
-              </Menu.Items>
+                </MenuItem>
+              </MenuItems>
             </Transition>
           </>
         )
diff --git a/web/app/components/header/account-setting/members-page/operation/index.tsx b/web/app/components/header/account-setting/members-page/operation/index.tsx
index 82867ec522..232c30776d 100644
--- a/web/app/components/header/account-setting/members-page/operation/index.tsx
+++ b/web/app/components/header/account-setting/members-page/operation/index.tsx
@@ -2,7 +2,7 @@
 import { useTranslation } from 'react-i18next'
 import { Fragment, useMemo } from 'react'
 import { useContext } from 'use-context-selector'
-import { Menu, Transition } from '@headlessui/react'
+import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react'
 import { CheckIcon, ChevronDownIcon } from '@heroicons/react/24/outline'
 import s from './index.module.css'
 import { useProviderContext } from '@/context/provider-context'
@@ -90,7 +90,7 @@ const Operation = ({
       {
         ({ open }) => (
           <>
-            <Menu.Button className={cn(
+            <MenuButton className={cn(
               `
                   group flex items-center justify-between w-full h-full
                   hover:bg-gray-100 cursor-pointer ${open && 'bg-gray-100'}
@@ -99,7 +99,7 @@ const Operation = ({
             )}>
               {RoleMap[member.role] || RoleMap.normal}
               <ChevronDownIcon className={`w-4 h-4 group-hover:block ${open ? 'block' : 'hidden'}`} />
-            </Menu.Button>
+            </MenuButton>
             <Transition
               as={Fragment}
               enter="transition ease-out duration-100"
@@ -109,7 +109,7 @@ const Operation = ({
               leaveFrom="transform opacity-100 scale-100"
               leaveTo="transform opacity-0 scale-95"
             >
-              <Menu.Items
+              <MenuItems
                 className={cn(
                   `
                       absolute right-0 top-[52px] z-10 bg-white border-[0.5px] border-gray-200
@@ -121,7 +121,7 @@ const Operation = ({
                 <div className="px-1 py-1">
                   {
                     roleList.map(role => (
-                      <Menu.Item key={role}>
+                      <MenuItem key={role}>
                         <div className={itemClassName} onClick={() => handleUpdateMemberRole(role)}>
                           {
                             role === member.role
@@ -133,11 +133,11 @@ const Operation = ({
                             <div className={itemDescClassName}>{t(`common.members.${toHump(role)}Tip`)}</div>
                           </div>
                         </div>
-                      </Menu.Item>
+                      </MenuItem>
                     ))
                   }
                 </div>
-                <Menu.Item>
+                <MenuItem>
                   <div className='px-1 py-1'>
                     <div className={itemClassName} onClick={handleDeleteMemberOrCancelInvitation}>
                       <div className={itemIconClassName} />
@@ -147,8 +147,8 @@ const Operation = ({
                       </div>
                     </div>
                   </div>
-                </Menu.Item>
-              </Menu.Items>
+                </MenuItem>
+              </MenuItems>
             </Transition>
           </>
         )
diff --git a/web/app/components/header/account-setting/menu-dialog.tsx b/web/app/components/header/account-setting/menu-dialog.tsx
index 76296b84dd..c6e1fd8ba8 100644
--- a/web/app/components/header/account-setting/menu-dialog.tsx
+++ b/web/app/components/header/account-setting/menu-dialog.tsx
@@ -1,6 +1,6 @@
 import { Fragment, useCallback, useEffect } from 'react'
 import type { ReactNode } from 'react'
-import { Dialog, Transition } from '@headlessui/react'
+import { Dialog, DialogPanel, Transition } from '@headlessui/react'
 import cn from '@/utils/classnames'
 
 type DialogProps = {
@@ -32,10 +32,10 @@ const MenuDialog = ({
 
   return (
     <Transition appear show={show} as={Fragment}>
-      <Dialog as="div" className="relative z-[60]" onClose={() => {}}>
+      <Dialog as="div" className="relative z-[60]" onClose={() => { }}>
         <div className="fixed inset-0">
           <div className="flex flex-col items-center justify-center min-h-full">
-            <Transition.Child
+            {/* <Transition.Child
               as={Fragment}
               enter="ease-out duration-300"
               enterFrom="opacity-0 scale-95"
@@ -44,11 +44,16 @@ const MenuDialog = ({
               leaveFrom="opacity-100 scale-100"
               leaveTo="opacity-0 scale-95"
             >
-              <Dialog.Panel className={cn('grow relative w-full h-full p-0 overflow-hidden text-left align-middle transition-all transform bg-background-sidenav-bg backdrop-blur-md', className)}>
+              <DialogPanel className={cn('grow relative w-full h-full p-0 overflow-hidden text-left align-middle transition-all transform bg-background-sidenav-bg backdrop-blur-md', className)}>
                 <div className='absolute top-0 right-0 h-full w-1/2 bg-components-panel-bg' />
                 {children}
-              </Dialog.Panel>
-            </Transition.Child>
+              </DialogPanel>
+            </Transition.Child> */}
+            {/* TODO: to new Transition */}
+            <DialogPanel className={cn('grow relative w-full h-full p-0 overflow-hidden text-left align-middle transition-all transform bg-background-sidenav-bg backdrop-blur-md', className)}>
+              <div className='absolute top-0 right-0 h-full w-1/2 bg-components-panel-bg' />
+              {children}
+            </DialogPanel>
           </div>
         </div>
       </Dialog>
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/priority-selector.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/priority-selector.tsx
index e93c6636b5..e86b032bb0 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/priority-selector.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/priority-selector.tsx
@@ -1,6 +1,6 @@
 import { Fragment } from 'react'
 import type { FC } from 'react'
-import { Popover, Transition } from '@headlessui/react'
+import { Popover, PopoverButton, PopoverPanel, Transition } from '@headlessui/react'
 import { useTranslation } from 'react-i18next'
 import {
   RiCheckLine,
@@ -32,7 +32,7 @@ const Selector: FC<SelectorProps> = ({
 
   return (
     <Popover className='relative'>
-      <Popover.Button>
+      <PopoverButton>
         {
           ({ open }) => (
             <Button className={cn(
@@ -43,19 +43,19 @@ const Selector: FC<SelectorProps> = ({
             </Button>
           )
         }
-      </Popover.Button>
+      </PopoverButton>
       <Transition
         as={Fragment}
         leave='transition ease-in duration-100'
         leaveFrom='opacity-100'
         leaveTo='opacity-0'
       >
-        <Popover.Panel className='absolute top-7 right-0 w-[144px] bg-components-panel-bg border-[0.5px] border-components-panel-border rounded-lg shadow-lg z-10'>
+        <PopoverPanel className='absolute top-7 right-0 w-[144px] bg-components-panel-bg border-[0.5px] border-components-panel-border rounded-lg shadow-lg z-10'>
           <div className='p-1'>
             <div className='px-3 pt-2 pb-1 text-sm font-medium text-text-secondary'>{t('common.modelProvider.card.priorityUse')}</div>
             {
               options.map(option => (
-                <Popover.Button as={Fragment} key={option.key}>
+                <PopoverButton as={Fragment} key={option.key}>
                   <div
                     className='flex items-center justify-between px-3 h-9 text-sm text-text-secondary rounded-lg cursor-pointer hover:bg-components-panel-on-panel-item-bg-hover'
                     onClick={() => onSelect(option.key)}
@@ -63,11 +63,11 @@ const Selector: FC<SelectorProps> = ({
                     <div className='grow'>{option.text}</div>
                     {value === option.key && <RiCheckLine className='w-4 h-4 text-text-accent' />}
                   </div>
-                </Popover.Button>
+                </PopoverButton>
               ))
             }
           </div>
-        </Popover.Panel>
+        </PopoverPanel>
       </Transition>
     </Popover>
   )
diff --git a/web/app/components/header/app-selector/index.tsx b/web/app/components/header/app-selector/index.tsx
index 38451f2605..9e5e902cde 100644
--- a/web/app/components/header/app-selector/index.tsx
+++ b/web/app/components/header/app-selector/index.tsx
@@ -2,7 +2,7 @@
 import { useTranslation } from 'react-i18next'
 import { Fragment, useState } from 'react'
 import { ChevronDownIcon, PlusIcon } from '@heroicons/react/24/solid'
-import { Menu, Transition } from '@headlessui/react'
+import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react'
 import { useRouter } from 'next/navigation'
 import Indicator from '../indicator'
 import type { AppDetailResponse } from '@/models/app'
@@ -30,7 +30,7 @@ export default function AppSelector({ appItems, curApp }: IAppSelectorProps) {
     <div className="">
       <Menu as="div" className="relative inline-block text-left">
         <div>
-          <Menu.Button
+          <MenuButton
             className="
               inline-flex items-center w-full h-7 justify-center
               rounded-[10px] pl-2 pr-2.5 text-[14px] font-semibold
@@ -42,7 +42,7 @@ export default function AppSelector({ appItems, curApp }: IAppSelectorProps) {
               className="w-3 h-3 ml-1"
               aria-hidden="true"
             />
-          </Menu.Button>
+          </MenuButton>
         </div>
         <Transition
           as={Fragment}
@@ -53,7 +53,7 @@ export default function AppSelector({ appItems, curApp }: IAppSelectorProps) {
           leaveFrom="transform opacity-100 scale-100"
           leaveTo="transform opacity-0 scale-95"
         >
-          <Menu.Items
+          <MenuItems
             className="
               absolute -left-11 right-0 mt-1.5 w-60 max-w-80
               divide-y divide-gray-100 origin-top-right rounded-lg bg-white
@@ -63,7 +63,7 @@ export default function AppSelector({ appItems, curApp }: IAppSelectorProps) {
             {!!appItems.length && (<div className="px-1 py-1 overflow-auto" style={{ maxHeight: '50vh' }}>
               {
                 appItems.map((app: AppDetailResponse) => (
-                  <Menu.Item key={app.id}>
+                  <MenuItem key={app.id}>
                     <div className={itemClassName} onClick={() =>
                       router.push(`/app/${app.id}/${isCurrentWorkspaceEditor ? 'configuration' : 'overview'}`)
                     }>
@@ -75,11 +75,11 @@ export default function AppSelector({ appItems, curApp }: IAppSelectorProps) {
                       </div>
                       {app.name}
                     </div>
-                  </Menu.Item>
+                  </MenuItem>
                 ))
               }
             </div>)}
-            {isCurrentWorkspaceEditor && <Menu.Item>
+            {isCurrentWorkspaceEditor && <MenuItem>
               <div className='p-1' onClick={() => setShowNewAppDialog(true)}>
                 <div
                   className='flex items-center h-12 rounded-lg cursor-pointer hover:bg-gray-100'
@@ -96,15 +96,15 @@ export default function AppSelector({ appItems, curApp }: IAppSelectorProps) {
                   <div className='font-normal text-[14px] text-gray-700'>{t('common.menus.newApp')}</div>
                 </div>
               </div>
-            </Menu.Item>
+            </MenuItem>
             }
-          </Menu.Items>
+          </MenuItems>
         </Transition>
       </Menu>
       <CreateAppDialog
         show={showNewAppDialog}
         onClose={() => setShowNewAppDialog(false)}
-        onSuccess={() => {}}
+        onSuccess={() => { }}
       />
     </div>
   )
diff --git a/web/app/components/header/nav/nav-selector/index.tsx b/web/app/components/header/nav/nav-selector/index.tsx
index ba9c58fadb..a0b97da76b 100644
--- a/web/app/components/header/nav/nav-selector/index.tsx
+++ b/web/app/components/header/nav/nav-selector/index.tsx
@@ -6,7 +6,7 @@ import {
   RiArrowDownSLine,
   RiArrowRightSLine,
 } from '@remixicon/react'
-import { Menu, Transition } from '@headlessui/react'
+import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react'
 import { useRouter } from 'next/navigation'
 import { debounce } from 'lodash-es'
 import cn from '@/utils/classnames'
@@ -57,7 +57,7 @@ const NavSelector = ({ curNav, navs, createText, isApp, onCreate, onLoadmore }:
       <Menu as="div" className="relative inline-block text-left">
         {({ open }) => (
           <>
-            <Menu.Button className={cn(
+            <MenuButton className={cn(
               'group inline-flex items-center w-full h-7 justify-center rounded-[10px] pl-2 pr-2.5 text-[14px] font-semibold text-components-main-nav-nav-button-text-active hover:hover:bg-components-main-nav-nav-button-bg-active-hover',
               open && 'bg-components-main-nav-nav-button-bg-active',
             )}>
@@ -66,8 +66,8 @@ const NavSelector = ({ curNav, navs, createText, isApp, onCreate, onLoadmore }:
                 className={cn('shrink-0 w-3 h-3 ml-1 opacity-50 group-hover:opacity-100', open && '!opacity-100')}
                 aria-hidden="true"
               />
-            </Menu.Button>
-            <Menu.Items
+            </MenuButton>
+            <MenuItems
               className="
                 absolute -left-11 right-0 mt-1.5 w-60 max-w-80
                 divide-y divide-gray-100 origin-top-right rounded-lg bg-white
@@ -77,7 +77,7 @@ const NavSelector = ({ curNav, navs, createText, isApp, onCreate, onLoadmore }:
               <div className="px-1 py-1 overflow-auto" style={{ maxHeight: '50vh' }} onScroll={handleScroll}>
                 {
                   navs.map(nav => (
-                    <Menu.Item key={nav.id}>
+                    <MenuItem key={nav.id}>
                       <div className='flex items-center w-full px-3 py-[6px] text-gray-700 text-[14px] rounded-lg font-normal hover:bg-gray-100 cursor-pointer truncate' onClick={() => {
                         if (curNav?.id === nav.id)
                           return
@@ -85,7 +85,7 @@ const NavSelector = ({ curNav, navs, createText, isApp, onCreate, onLoadmore }:
                         router.push(nav.link)
                       }} title={nav.name}>
                         <div className='relative w-6 h-6 mr-2 rounded-md'>
-                          <AppIcon size='tiny' iconType={nav.icon_type} icon={nav.icon} background={nav.icon_background} imageUrl={nav.icon_url}/>
+                          <AppIcon size='tiny' iconType={nav.icon_type} icon={nav.icon} background={nav.icon_background} imageUrl={nav.icon_url} />
                           {!!nav.mode && (
                             <span className={cn(
                               'absolute w-3.5 h-3.5 -bottom-0.5 -right-0.5 p-0.5 bg-white rounded border-[0.5px] border-[rgba(0,0,0,0.02)] shadow-sm',
@@ -112,12 +112,12 @@ const NavSelector = ({ curNav, navs, createText, isApp, onCreate, onLoadmore }:
                           {nav.name}
                         </div>
                       </div>
-                    </Menu.Item>
+                    </MenuItem>
                   ))
                 }
               </div>
               {!isApp && isCurrentWorkspaceEditor && (
-                <Menu.Button className='p-1 w-full'>
+                <MenuButton className='p-1 w-full'>
                   <div onClick={() => onCreate('')} className={cn(
                     'flex items-center gap-2 px-3 py-[6px] rounded-lg cursor-pointer hover:bg-gray-100',
                   )}>
@@ -126,13 +126,13 @@ const NavSelector = ({ curNav, navs, createText, isApp, onCreate, onLoadmore }:
                     </div>
                     <div className='grow text-left font-normal text-[14px] text-gray-700'>{createText}</div>
                   </div>
-                </Menu.Button>
+                </MenuButton>
               )}
               {isApp && isCurrentWorkspaceEditor && (
                 <Menu as="div" className="relative w-full h-full">
                   {({ open }) => (
                     <>
-                      <Menu.Button className='p-1 w-full'>
+                      <MenuButton className='p-1 w-full'>
                         <div className={cn(
                           'flex items-center gap-2 px-3 py-[6px] rounded-lg cursor-pointer hover:bg-gray-100',
                           open && '!bg-gray-100',
@@ -143,7 +143,7 @@ const NavSelector = ({ curNav, navs, createText, isApp, onCreate, onLoadmore }:
                           <div className='grow text-left font-normal text-[14px] text-gray-700'>{createText}</div>
                           <RiArrowRightSLine className='shrink-0 w-3.5 h-3.5  text-gray-500' />
                         </div>
-                      </Menu.Button>
+                      </MenuButton>
                       <Transition
                         as={Fragment}
                         enter="transition ease-out duration-100"
@@ -153,7 +153,7 @@ const NavSelector = ({ curNav, navs, createText, isApp, onCreate, onLoadmore }:
                         leaveFrom="transform opacity-100 scale-100"
                         leaveTo="transform opacity-0 scale-95"
                       >
-                        <Menu.Items className={cn(
+                        <MenuItems className={cn(
                           'absolute top-[3px] right-[-198px] min-w-[200px] z-10 bg-white border-[0.5px] border-gray-200 rounded-lg shadow-lg',
                         )}>
                           <div className='p-1'>
@@ -172,13 +172,13 @@ const NavSelector = ({ curNav, navs, createText, isApp, onCreate, onLoadmore }:
                               {t('app.importDSL')}
                             </div>
                           </div>
-                        </Menu.Items>
+                        </MenuItems>
                       </Transition>
                     </>
                   )}
                 </Menu>
               )}
-            </Menu.Items>
+            </MenuItems>
           </>
         )}
       </Menu>