diff --git a/web/app/components/explore/app-list/index.tsx b/web/app/components/explore/app-list/index.tsx
index ae9e93a50d..5fba971d59 100644
--- a/web/app/components/explore/app-list/index.tsx
+++ b/web/app/components/explore/app-list/index.tsx
@@ -6,7 +6,8 @@ import ExploreContext from '@/context/explore-context'
 import { App } from '@/models/explore'
 import Category from '@/app/components/explore/category'
 import AppCard from '@/app/components/explore/app-card'
-import { fetchAppList, installApp } from '@/service/explore'
+import { fetchAppList, installApp, fetchAppDetail } from '@/service/explore'
+import { createApp } from '@/service/apps'
 import CreateAppModal from '@/app/components/explore/create-app-modal'
 import Loading from '@/app/components/base/loading'
 
@@ -43,10 +44,23 @@ const Apps: FC = ({ }) => {
     setControlUpdateInstalledApps(Date.now())
   }
 
-  const [currApp, setCurrApp] = React.useState<any>(null)
+  const [currApp, setCurrApp] = React.useState<App | null>(null)
   const [isShowCreateModal, setIsShowCreateModal] = React.useState(false)
-  const onCreate = ({name}: any) => {
-    console.log({id: currApp.id, name})
+  const onCreate = async ({name}: any) => {
+    const { app_model_config: model_config } = await fetchAppDetail(currApp?.app.id as string)
+    
+    createApp({
+      name,
+      icon: '', // TODO
+      icon_background: '', // TODO
+      mode: currApp?.app.mode as any,
+      config: model_config,
+    })
+    Toast.notify({
+      type: 'success',
+      message: t('common.api.success'),
+    })
+    setIsShowCreateModal(false)
   }
 
   if(!isLoaded) {
@@ -93,7 +107,7 @@ const Apps: FC = ({ }) => {
 
       {isShowCreateModal && (
           <CreateAppModal
-            appName={currApp.name}
+            appName={currApp?.app.name || ''}
             show={isShowCreateModal}
             onConfirm={onCreate}
             onHide={() => setIsShowCreateModal(false)}
diff --git a/web/service/apps.ts b/web/service/apps.ts
index 7bb49d4a28..2e0bfd101d 100644
--- a/web/service/apps.ts
+++ b/web/service/apps.ts
@@ -16,8 +16,8 @@ export const fetchAppTemplates: Fetcher<AppTemplatesResponse, { url: string }> =
   return get(url) as Promise<AppTemplatesResponse>
 }
 
-export const createApp: Fetcher<AppDetailResponse, { name: string; mode: AppMode; config?: ModelConfig }> = ({ name, mode, config }) => {
-  return post('apps', { body: { name, mode, model_config: config } }) as Promise<AppDetailResponse>
+export const createApp: Fetcher<AppDetailResponse, { name: string; mode: AppMode; icon?: string, icon_background?: string, config?: ModelConfig }> = ({ name, icon, icon_background, mode, config }) => {
+  return post('apps', { body: { name, mode, icon, icon_background, model_config: config } }) as Promise<AppDetailResponse>
 }
 
 export const deleteApp: Fetcher<CommonResponse, string> = (appID) => {
diff --git a/web/service/explore.ts b/web/service/explore.ts
index 39be48fbc9..69db63d346 100644
--- a/web/service/explore.ts
+++ b/web/service/explore.ts
@@ -4,6 +4,10 @@ export const fetchAppList = () => {
   return get('/explore/apps')
 }
 
+export const fetchAppDetail = (id: string) : Promise<any> => {
+  return get(`/explore/apps/${id}`)
+}
+
 export const fetchInstalledAppList = () => {
   return get('/installed-apps')
 }