diff --git a/web/app/components/base/alert.tsx b/web/app/components/base/alert.tsx
index 53cb842567..43e0b1d42e 100644
--- a/web/app/components/base/alert.tsx
+++ b/web/app/components/base/alert.tsx
@@ -31,7 +31,7 @@ const Alert: React.FC<Props> = ({
   className,
 }) => {
   return (
-    <div className={cn('pointer-events-none flex w-full', className)}>
+    <div className={cn('pointer-events-none w-full', className)}>
       <div
         className='relative flex space-x-1 overflow-hidden rounded-xl border border-components-panel-border bg-components-panel-bg-blur p-3 shadow-lg'
       >
diff --git a/web/app/components/base/chat/chat/index.tsx b/web/app/components/base/chat/chat/index.tsx
index 2e004c1145..df94d61d3d 100644
--- a/web/app/components/base/chat/chat/index.tsx
+++ b/web/app/components/base/chat/chat/index.tsx
@@ -36,6 +36,7 @@ import { useStore as useAppStore } from '@/app/components/app/store'
 import type { AppData } from '@/models/share'
 
 export type ChatProps = {
+  isTryApp?: boolean
   readonly?: boolean
   appData?: AppData
   chatList: ChatItem[]
@@ -78,6 +79,7 @@ export type ChatProps = {
 }
 
 const Chat: FC<ChatProps> = ({
+  isTryApp,
   readonly = false,
   appData,
   config,
@@ -241,7 +243,7 @@ const Chat: FC<ChatProps> = ({
       <div className='relative h-full'>
         <div
           ref={chatContainerRef}
-          className={cn('relative h-full overflow-y-auto overflow-x-hidden', chatContainerClassName)}
+          className={cn('relative h-full overflow-y-auto overflow-x-hidden', isTryApp && 'grow', chatContainerClassName)}
         >
           {chatNode}
           <div
diff --git a/web/app/components/base/chat/embedded-chatbot/chat-wrapper.tsx b/web/app/components/base/chat/embedded-chatbot/chat-wrapper.tsx
index 3157e08de8..0f2c4627e2 100644
--- a/web/app/components/base/chat/embedded-chatbot/chat-wrapper.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/chat-wrapper.tsx
@@ -240,6 +240,7 @@ const ChatWrapper = () => {
 
   return (
     <Chat
+      isTryApp={appSourceType === AppSourceType.tryApp}
       appData={appData || undefined}
       config={appConfig}
       chatList={messageList}
diff --git a/web/app/components/base/chat/embedded-chatbot/hooks.tsx b/web/app/components/base/chat/embedded-chatbot/hooks.tsx
index 3d1a77eaec..c3bb0a013c 100644
--- a/web/app/components/base/chat/embedded-chatbot/hooks.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/hooks.tsx
@@ -78,7 +78,7 @@ export const useEmbeddedChatbot = (appSourceType: AppSourceType, tryAppId?: stri
   const [userId, setUserId] = useState<string>()
   const [conversationId, setConversationId] = useState<string>()
   useEffect(() => {
-    if(isTryApp) return
+    if (isTryApp) return
     getProcessedSystemVariablesFromUrlParams().then(({ user_id, conversation_id }) => {
       setUserId(user_id)
       setConversationId(conversation_id)
@@ -86,7 +86,7 @@ export const useEmbeddedChatbot = (appSourceType: AppSourceType, tryAppId?: stri
   }, [])
 
   useEffect(() => {
-    if(isTryApp) return
+    if (isTryApp) return
     const setLanguageFromParams = async () => {
       // Check URL parameters for language override
       const urlParams = new URLSearchParams(window.location.search)
@@ -251,7 +251,7 @@ export const useEmbeddedChatbot = (appSourceType: AppSourceType, tryAppId?: stri
   useEffect(() => {
     // init inputs from url params
     (async () => {
-      if(isTryApp)
+      if (isTryApp)
         return
       const inputs = await getProcessedInputsFromUrlParams()
       const userVariables = await getProcessedUserVariablesFromUrlParams()
diff --git a/web/app/components/explore/try-app/app/chat.tsx b/web/app/components/explore/try-app/app/chat.tsx
index 2a12d9d8e4..9d5cead2dc 100644
--- a/web/app/components/explore/try-app/app/chat.tsx
+++ b/web/app/components/explore/try-app/app/chat.tsx
@@ -12,20 +12,31 @@ import {
 } from '@/app/components/base/chat/embedded-chatbot/hooks'
 import cn from '@/utils/classnames'
 import { AppSourceType } from '@/service/share'
+import Alert from '@/app/components/base/alert'
+import { useTranslation } from 'react-i18next'
+import { useBoolean } from 'ahooks'
+import type { TryAppInfo } from '@/service/try-app'
+import AppIcon from '@/app/components/base/app-icon'
 
 type Props = {
   appId: string
+  appDetail: TryAppInfo
   className: string
 }
 
 const TryApp: FC<Props> = ({
   appId,
+  appDetail,
   className,
 }) => {
+  const { t } = useTranslation()
   const media = useBreakpoints()
   const isMobile = media === MediaType.mobile
   const themeBuilder = useThemeContext()
   const chatData = useEmbeddedChatbot(AppSourceType.tryApp, appId)
+  const [isHideTryNotice, {
+    setTrue: hideTryNotice,
+  }] = useBoolean(false)
   return (
     <EmbeddedChatbotContext.Provider value={{
       ...chatData,
@@ -33,8 +44,25 @@ const TryApp: FC<Props> = ({
       isMobile,
       themeBuilder,
     } as any}>
-      <div className={cn('bg-background-section-burn', className)}>
-        <ChatWrapper />
+      <div className={cn('flex h-full flex-col rounded-2xl bg-background-section-burn', className)}>
+        <div className='flex shrink-0 justify-between p-3'>
+          <div className='flex grow items-center space-x-2'>
+            <AppIcon
+              size='large'
+              iconType={appDetail.site.icon_type}
+              icon={appDetail.site.icon}
+              background={appDetail.site.icon_background}
+              imageUrl={appDetail.site.icon_url}
+            />
+            <div className='system-md-semibold grow truncate text-text-primary' title={appDetail.name}>{appDetail.name}</div>
+          </div>
+        </div>
+        <div className='mx-auto mt-4 flex w-[769px] grow flex-col'>
+          {!isHideTryNotice && (
+            <Alert className='mb-4 shrink-0' message={t('explore.tryApp.tryInfo')} onHide={hideTryNotice} />
+          )}
+          <ChatWrapper />
+        </div>
       </div>
     </EmbeddedChatbotContext.Provider>
   )
diff --git a/web/app/components/explore/try-app/app/index.tsx b/web/app/components/explore/try-app/app/index.tsx
index 5569715c64..db8c5cd764 100644
--- a/web/app/components/explore/try-app/app/index.tsx
+++ b/web/app/components/explore/try-app/app/index.tsx
@@ -24,7 +24,7 @@ const TryApp: FC<Props> = ({
   return (
     <div className='flex h-full w-full'>
       {isChat && (
-        <Chat appId={appId} className='h-full grow' />
+        <Chat appId={appId} appDetail={appDetail} className='h-full grow' />
       )}
       {isCompletion && (
         <TextGeneration