diff --git a/web/app/components/app/switch-app-modal/index.tsx b/web/app/components/app/switch-app-modal/index.tsx
index 1cc4cb3118..c0b744da31 100644
--- a/web/app/components/app/switch-app-modal/index.tsx
+++ b/web/app/components/app/switch-app-modal/index.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { useRouter } from 'next/navigation'
 import { useContext } from 'use-context-selector'
 import { useTranslation } from 'react-i18next'
@@ -8,6 +8,7 @@ import cn from 'classnames'
 import s from './style.module.css'
 import Button from '@/app/components/base/button'
 import Modal from '@/app/components/base/modal'
+import Confirm from '@/app/components/base/confirm'
 import { ToastContext } from '@/app/components/base/toast'
 import { deleteApp, switchApp } from '@/service/apps'
 import { useAppContext } from '@/context/app-context'
@@ -44,10 +45,16 @@ const SwitchAppModal = ({ show, appDetail, inAppDetail = false, onSuccess, onClo
   const [showEmojiPicker, setShowEmojiPicker] = useState(false)
   const [name, setName] = useState(`${appDetail.name}(copy)`)
   const [removeOriginal, setRemoveOriginal] = useState<boolean>(false)
+  const [showConfirmDelete, setShowConfirmDelete] = useState(false)
 
   const goStart = async () => {
     try {
-      const { new_app_id: newAppID } = await switchApp(appDetail.id)
+      const { new_app_id: newAppID } = await switchApp({
+        appID: appDetail.id,
+        name,
+        icon: emoji.icon,
+        icon_background: emoji.icon_background,
+      })
       if (onSuccess)
         onSuccess()
       if (onClose)
@@ -72,59 +79,82 @@ const SwitchAppModal = ({ show, appDetail, inAppDetail = false, onSuccess, onClo
     }
   }
 
+  useEffect(() => {
+    if (removeOriginal)
+      setShowConfirmDelete(true)
+  }, [removeOriginal])
+
   return (
-    <Modal
-      wrapperClassName='z-20'
-      className={cn('p-8 max-w-[600px] w-[600px]', s.bg)}
-      isShow={show}
-      onClose={() => {}}
-    >
-      <div className='absolute right-4 top-4 p-2 cursor-pointer' onClick={onClose}>
-        <XClose className='w-4 h-4 text-gray-500' />
-      </div>
-      <div className='w-12 h-12 p-3 bg-white rounded-xl border-[0.5px] border-gray-100 shadow-xl'>
-        <AlertTriangle className='w-6 h-6 text-[rgb(247,144,9)]' />
-      </div>
-      <div className='relative mt-3 text-xl font-semibold leading-[30px] text-gray-900'>{t('app.switch')}</div>
-      <div className='my-1 text-gray-500 text-sm leading-5'>
-        <span>{t('app.switchTipStart')}</span>
-        <span className='text-gray-700 font-medium'>{t('app.switchTip')}</span>
-        <span>{t('app.switchTipEnd')}</span>
-      </div>
-      <div className='pb-4'>
-        <div className='py-2 text-sm font-medium leading-[20px] text-gray-900'>{t('app.switchLabel')}</div>
-        <div className='flex items-center justify-between space-x-2'>
-          <AppIcon size='large' onClick={() => { setShowEmojiPicker(true) }} className='cursor-pointer' icon={emoji.icon} background={emoji.icon_background} />
-          <input
-            value={name}
-            onChange={e => setName(e.target.value)}
-            placeholder={t('app.newApp.appNamePlaceholder') || ''}
-            className='grow h-10 px-3 text-sm font-normal bg-gray-100 rounded-lg border border-transparent outline-none appearance-none caret-primary-600 placeholder:text-gray-400 hover:bg-gray-50 hover:border hover:border-gray-300 focus:bg-gray-50 focus:border focus:border-gray-300 focus:shadow-xs'
-          />
+    <>
+      <Modal
+        wrapperClassName='z-20'
+        className={cn('p-8 max-w-[600px] w-[600px]', s.bg)}
+        isShow={show}
+        onClose={() => {}}
+      >
+        <div className='absolute right-4 top-4 p-2 cursor-pointer' onClick={onClose}>
+          <XClose className='w-4 h-4 text-gray-500' />
         </div>
-        {showEmojiPicker && <EmojiPicker
-          onSelect={(icon, icon_background) => {
-            setEmoji({ icon, icon_background })
-            setShowEmojiPicker(false)
+        <div className='w-12 h-12 p-3 bg-white rounded-xl border-[0.5px] border-gray-100 shadow-xl'>
+          <AlertTriangle className='w-6 h-6 text-[rgb(247,144,9)]' />
+        </div>
+        <div className='relative mt-3 text-xl font-semibold leading-[30px] text-gray-900'>{t('app.switch')}</div>
+        <div className='my-1 text-gray-500 text-sm leading-5'>
+          <span>{t('app.switchTipStart')}</span>
+          <span className='text-gray-700 font-medium'>{t('app.switchTip')}</span>
+          <span>{t('app.switchTipEnd')}</span>
+        </div>
+        <div className='pb-4'>
+          <div className='py-2 text-sm font-medium leading-[20px] text-gray-900'>{t('app.switchLabel')}</div>
+          <div className='flex items-center justify-between space-x-2'>
+            <AppIcon size='large' onClick={() => { setShowEmojiPicker(true) }} className='cursor-pointer' icon={emoji.icon} background={emoji.icon_background} />
+            <input
+              value={name}
+              onChange={e => setName(e.target.value)}
+              placeholder={t('app.newApp.appNamePlaceholder') || ''}
+              className='grow h-10 px-3 text-sm font-normal bg-gray-100 rounded-lg border border-transparent outline-none appearance-none caret-primary-600 placeholder:text-gray-400 hover:bg-gray-50 hover:border hover:border-gray-300 focus:bg-gray-50 focus:border focus:border-gray-300 focus:shadow-xs'
+            />
+          </div>
+          {showEmojiPicker && <EmojiPicker
+            onSelect={(icon, icon_background) => {
+              setEmoji({ icon, icon_background })
+              setShowEmojiPicker(false)
+            }}
+            onClose={() => {
+              setEmoji({ icon: appDetail.icon, icon_background: appDetail.icon_background })
+              setShowEmojiPicker(false)
+            }}
+          />}
+        </div>
+        {isAppsFull && <AppsFull loc='app-switch' />}
+        <div className='pt-6 flex justify-between items-center'>
+          <div className='flex items-center'>
+            <input id="removeOriginal" type="checkbox" checked={removeOriginal} onChange={() => setRemoveOriginal(!removeOriginal)} className="w-4 h-4 rounded border-gray-300 text-blue-700 cursor-pointer focus:ring-blue-700" />
+            <label htmlFor="removeOriginal" className="ml-2 text-sm leading-5 text-gray-700 cursor-pointer">{t('app.removeOriginal')}</label>
+          </div>
+          <div className='flex items-center'>
+            <Button className='mr-2 text-gray-700 text-sm font-medium' onClick={onClose}>{t('app.newApp.Cancel')}</Button>
+            <Button className='text-sm font-medium border-red-700 border-[0.5px]' disabled={isAppsFull || !name} type="warning" onClick={goStart}>{t('app.switchStart')}</Button>
+          </div>
+        </div>
+      </Modal>
+      {showConfirmDelete && (
+        <Confirm
+          title={t('app.deleteAppConfirmTitle')}
+          content={t('app.deleteAppConfirmContent')}
+          isShow={showConfirmDelete}
+          onConfirm={() => setShowConfirmDelete(false)}
+          onCancel={() => {
+            setShowConfirmDelete(false)
+            setRemoveOriginal(false)
           }}
           onClose={() => {
-            setEmoji({ icon: appDetail.icon, icon_background: appDetail.icon_background })
-            setShowEmojiPicker(false)
+            setShowConfirmDelete(false)
+            setRemoveOriginal(false)
           }}
-        />}
-      </div>
-      {isAppsFull && <AppsFull loc='app-switch' />}
-      <div className='pt-6 flex justify-between items-center'>
-        <div className='flex items-center'>
-          <input id="removeOriginal" type="checkbox" checked={removeOriginal} onChange={() => setRemoveOriginal(!removeOriginal)} className="w-4 h-4 rounded border-gray-300 text-blue-700 cursor-pointer focus:ring-blue-700" />
-          <label htmlFor="removeOriginal" className="ml-2 text-sm leading-5 text-gray-700 cursor-pointer">{t('app.removeOriginal')}</label>
-        </div>
-        <div className='flex items-center'>
-          <Button className='mr-2 text-gray-700 text-sm font-medium' onClick={onClose}>{t('app.newApp.Cancel')}</Button>
-          <Button className='text-sm font-medium border-red-700 border-[0.5px]' disabled={isAppsFull || !name} type="warning" onClick={goStart}>{t('app.switchStart')}</Button>
-        </div>
-      </div>
-    </Modal>
+        />
+      )}
+    </>
   )
 }
 
diff --git a/web/service/apps.ts b/web/service/apps.ts
index 5c4995c485..b20739898e 100644
--- a/web/service/apps.ts
+++ b/web/service/apps.ts
@@ -36,8 +36,8 @@ export const importApp: Fetcher<AppDetailResponse, { data: string; name?: string
   return post<AppDetailResponse>('apps/import', { body: { data, name, description, icon, icon_background } })
 }
 
-export const switchApp: Fetcher<{ new_app_id: string }, string> = (appID) => {
-  return post<{ new_app_id: string }>(`apps/${appID}/convert-to-workflow`)
+export const switchApp: Fetcher<{ new_app_id: string }, { appID: string; name: string; icon: string; icon_background: string }> = ({ appID, name, icon, icon_background }) => {
+  return post<{ new_app_id: string }>(`apps/${appID}/convert-to-workflow`, { body: { name, icon, icon_background } })
 }
 
 export const deleteApp: Fetcher<CommonResponse, string> = (appID) => {