diff --git a/web/app/components/explore/app-card/index.tsx b/web/app/components/explore/app-card/index.tsx
index 1f09575db3..0363fce32c 100644
--- a/web/app/components/explore/app-card/index.tsx
+++ b/web/app/components/explore/app-card/index.tsx
@@ -32,9 +32,9 @@ const AppCard = ({
   const setShowTryAppPanel = useContextSelector(ExploreContext, ctx => ctx.setShowTryAppPanel)
   const showTryAPPPanel = useCallback((appId: string) => {
     return () => {
-      setShowTryAppPanel?.(true, { appId })
+      setShowTryAppPanel?.(true, { appId, category: app.category })
     }
-  }, [setShowTryAppPanel])
+  }, [setShowTryAppPanel, app.category])
 
   return (
     <div className={cn('group relative col-span-1 flex cursor-pointer flex-col overflow-hidden rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg pb-2 shadow-sm transition-all duration-200 ease-in-out hover:bg-components-panel-on-panel-item-bg-hover hover:shadow-lg')}>
diff --git a/web/app/components/explore/app-list/index.tsx b/web/app/components/explore/app-list/index.tsx
index 6292bc6aca..02b3ae085d 100644
--- a/web/app/components/explore/app-list/index.tsx
+++ b/web/app/components/explore/app-list/index.tsx
@@ -148,7 +148,7 @@ const Apps = ({
   const hideTryAppPanel = useCallback(() => {
     setShowTryAppPanel(false)
   }, [setShowTryAppPanel])
-  const appId = useContextSelector(ExploreContext, ctx => ctx.currentApp?.appId) as string
+  const appParams = useContextSelector(ExploreContext, ctx => ctx.currentApp)
   if (!categories || categories.length === 0) {
     return (
       <div className="flex h-full items-center">
@@ -244,7 +244,12 @@ const Apps = ({
         )
       }
 
-      {isShowTryAppPanel && <TryApp appId={appId} onClose={hideTryAppPanel} />}
+      {isShowTryAppPanel && (
+        <TryApp appId={appParams?.appId || ''}
+          category={appParams?.category}
+          onClose={hideTryAppPanel}
+        />
+      )}
     </div>
   )
 }
diff --git a/web/app/components/explore/try-app/app-info/index.tsx b/web/app/components/explore/try-app/app-info/index.tsx
index 9e26e687d4..4d17575466 100644
--- a/web/app/components/explore/try-app/app-info/index.tsx
+++ b/web/app/components/explore/try-app/app-info/index.tsx
@@ -11,6 +11,7 @@ import { RiAddLine } from '@remixicon/react'
 
 type Props = {
   appDetail: TryAppInfo
+  category?: string
   className?: string
 }
 
@@ -18,6 +19,7 @@ const headerClassName = 'system-sm-semibold-uppercase text-text-secondary mb-3'
 
 const AppInfo: FC<Props> = ({
   className,
+  category,
   appDetail,
 }) => {
   const { t } = useTranslation()
@@ -50,18 +52,20 @@ const AppInfo: FC<Props> = ({
           </div>
         </div>
       </div>
-      <div className='system-sm-regular mt-[14px] shrink-0 text-text-secondary' >
-        A workflow designed to translate a full book up to 15000 tokens per run. Uses Code node to separate text into chunks
-      </div>
+      {appDetail.description && (
+        <div className='system-sm-regular mt-[14px] shrink-0 text-text-secondary'>{appDetail.description}</div>
+      )}
       <Button variant='primary' className='mt-3 flex w-full max-w-full'>
         <RiAddLine className='mr-1 size-4 shrink-0' />
         <span className='truncate'>Create from this sample app</span>
       </Button>
 
-      <div className='mt-6 shrink-0'>
-        <div className={headerClassName}>Category</div>
-        <div className='system-md-regular text-text-secondary'>AI Coding</div>
-      </div>
+      {category && (
+        <div className='mt-6 shrink-0'>
+          <div className={headerClassName}>Category</div>
+          <div className='system-md-regular text-text-secondary'>{category}</div>
+        </div>
+      )}
 
       <div className='mt-5 grow overflow-y-auto'>
         <div className={headerClassName}>Requirements</div>
diff --git a/web/app/components/explore/try-app/index.tsx b/web/app/components/explore/try-app/index.tsx
index e5dfd0ca76..15102facdb 100644
--- a/web/app/components/explore/try-app/index.tsx
+++ b/web/app/components/explore/try-app/index.tsx
@@ -13,11 +13,13 @@ import Loading from '@/app/components/base/loading'
 
 type Props = {
   appId: string
+  category?: string
   onClose: () => void
 }
 
 const TryApp: FC<Props> = ({
   appId,
+  category,
   onClose,
 }) => {
   const [type, setType] = useState<TypeEnum>(TypeEnum.TRY)
@@ -50,7 +52,7 @@ const TryApp: FC<Props> = ({
           {/* Main content */}
           <div className='mt-2 flex h-0 grow justify-between space-x-2'>
             {type === TypeEnum.TRY ? <App appId={appId} appDetail={appDetail!} /> : <Preview appId={appId} appDetail={appDetail!} />}
-            <AppInfo className='w-[360px] shrink-0' appDetail={appDetail!} />
+            <AppInfo className='w-[360px] shrink-0' appDetail={appDetail!} category={category} />
           </div>
         </div>
       )}
diff --git a/web/context/explore-context.ts b/web/context/explore-context.ts
index b7e1f9e0cd..20ce516323 100644
--- a/web/context/explore-context.ts
+++ b/web/context/explore-context.ts
@@ -4,6 +4,7 @@ import { noop } from 'lodash-es'
 
 export type CurrentTryAppParams = {
   appId: string
+  category?: string
 }
 
 type IExplore = {
diff --git a/web/service/try-app.ts b/web/service/try-app.ts
index de00e0a6d7..17624c7a1c 100644
--- a/web/service/try-app.ts
+++ b/web/service/try-app.ts
@@ -13,6 +13,7 @@ import type { Viewport } from 'reactflow'
 
 export type TryAppInfo = {
   name: string
+  description: string
   mode: AppMode
   site: SiteInfo
   model_config: ModelConfig