diff --git a/web/app/(commonLayout)/apps/AppCard.tsx b/web/app/(commonLayout)/apps/AppCard.tsx
index d77fb8b8e3..9f895573b8 100644
--- a/web/app/(commonLayout)/apps/AppCard.tsx
+++ b/web/app/(commonLayout)/apps/AppCard.tsx
@@ -24,6 +24,7 @@ import { AiText, ChatBot, CuteRobote } from '@/app/components/base/icons/src/ven
 import { Route } from '@/app/components/base/icons/src/vender/line/mapsAndTravel'
 import type { CreateAppModalProps } from '@/app/components/explore/create-app-modal'
 import EditAppModal from '@/app/components/explore/create-app-modal'
+import SwitchAppModal from '@/app/components/app/switch-app-modal'
 
 export type AppCardProps = {
   app: App
@@ -44,6 +45,7 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
 
   const [showEditModal, setShowEditModal] = useState(false)
   const [showDuplicateModal, setShowDuplicateModal] = useState(false)
+  const [showSwitchModal, setShowSwitchModal] = useState<boolean>(false)
   const [showConfirmDelete, setShowConfirmDelete] = useState(false)
 
   const onConfirmDelete = useCallback(async () => {
@@ -132,6 +134,13 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
     }
   }
 
+  const onSwitch = () => {
+    if (onRefresh)
+      onRefresh()
+    mutateApps()
+    setShowSwitchModal(false)
+  }
+
   const Operations = (props: HtmlContentProps) => {
     const onClickSettings = async (e: React.MouseEvent<HTMLButtonElement>) => {
       e.stopPropagation()
@@ -151,6 +160,12 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
       e.preventDefault()
       onExport()
     }
+    const onClickSwitch = async (e: React.MouseEvent<HTMLDivElement>) => {
+      e.stopPropagation()
+      props.onClick?.()
+      e.preventDefault()
+      setShowSwitchModal(true)
+    }
     const onClickDelete = async (e: React.MouseEvent<HTMLDivElement>) => {
       e.stopPropagation()
       props.onClick?.()
@@ -158,7 +173,7 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
       setShowConfirmDelete(true)
     }
     return (
-      <div className="w-full py-1">
+      <div className="relative w-full py-1">
         <button className={s.actionItem} onClick={onClickSettings}>
           <span className={s.actionName}>{t('app.editApp')}</span>
         </button>
@@ -169,6 +184,17 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
         <button className={s.actionItem} onClick={onClickExport}>
           <span className={s.actionName}>{t('app.export')}</span>
         </button>
+        {(app.mode === 'completion' || app.mode === 'chat') && (
+          <>
+            <Divider className="!my-1" />
+            <div
+              className='h-9 py-2 px-3 mx-1 flex items-center hover:bg-gray-50 rounded-lg cursor-pointer'
+              onClick={onClickSwitch}
+            >
+              <span className='text-gray-700 text-sm leading-5'>{t('app.switch')}</span>
+            </div>
+          </>
+        )}
         <Divider className="!my-1" />
         <div
           className={cn(s.actionItem, s.deleteActionItem, 'group')}
@@ -250,6 +276,11 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
               )
             }
             className={'!w-[128px] h-fit !z-20'}
+            popupClassName={
+              (app.mode === 'completion' || app.mode === 'chat')
+                ? '!w-[238px] translate-x-[-110px]'
+                : ''
+            }
             manualClose
           />}
         </div>
@@ -276,6 +307,14 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
             onHide={() => setShowDuplicateModal(false)}
           />
         )}
+        {showSwitchModal && (
+          <SwitchAppModal
+            show={showSwitchModal}
+            appDetail={app}
+            onClose={() => setShowSwitchModal(false)}
+            onSuccess={onSwitch}
+          />
+        )}
         {showConfirmDelete && (
           <Confirm
             title={t('app.deleteAppConfirmTitle')}
diff --git a/web/app/(commonLayout)/apps/style.module.css b/web/app/(commonLayout)/apps/style.module.css
index edc2bf3d35..880382ec39 100644
--- a/web/app/(commonLayout)/apps/style.module.css
+++ b/web/app/(commonLayout)/apps/style.module.css
@@ -19,3 +19,11 @@
 .actionName {
   @apply text-gray-700 text-sm;
 }
+
+/* .completionPic {
+  background-image: url(~@/app/components/app-sidebar/completion.png)
+}
+    
+.expertPic {
+  background-image: url(~@/app/components/app-sidebar/expert.png)
+} */
diff --git a/web/app/components/app/create-app-dialog/index.tsx b/web/app/components/app/create-app-dialog/index.tsx
index 08fb957fbb..0c9932dd04 100644
--- a/web/app/components/app/create-app-dialog/index.tsx
+++ b/web/app/components/app/create-app-dialog/index.tsx
@@ -63,7 +63,7 @@ const CreateAppDialog = ({ show, onSuccess, onClose }: CreateAppDialogProps) =>
           </>
         )}
       </div>
-      <div className='absolute top-6 left-[464px] w-8 h-8 p-1 bg-white border-2 border-gray-200 rounded-2xl text-xs leading-[20px] font-medium text-gray-500 cursor-default z-20'>OR</div>
+      <div className='absolute top-6 left-[505px] w-8 h-8 p-1 bg-white border-2 border-gray-200 rounded-2xl text-xs leading-[20px] font-medium text-gray-500 cursor-default z-20'>OR</div>
       <div className='absolute right-6 top-6 p-2 cursor-pointer z-20' onClick={onClose}>
         <XClose className='w-4 h-4 text-gray-500' />
       </div>
diff --git a/web/service/apps.ts b/web/service/apps.ts
index 75f6792346..66d848d8c4 100644
--- a/web/service/apps.ts
+++ b/web/service/apps.ts
@@ -29,7 +29,7 @@ export const copyApp: Fetcher<AppDetailResponse, { appID: string; name: string;
 }
 
 export const exportAppConfig: Fetcher<{ data: string }, string> = (appID) => {
-  return post<{ data: string }>(`apps/${appID}/export`)
+  return get<{ data: string }>(`apps/${appID}/export`)
 }
 
 export const importApp: Fetcher<AppDetailResponse, { data: string; name?: string; description?: string; icon?: string; icon_background?: string }> = ({ name, description, icon, icon_background }) => {