diff --git a/web/app/components/app/create-app-dialog/app-list/index.tsx b/web/app/components/app/create-app-dialog/app-list/index.tsx
index f158f21d99..fe5204e9bc 100644
--- a/web/app/components/app/create-app-dialog/app-list/index.tsx
+++ b/web/app/components/app/create-app-dialog/app-list/index.tsx
@@ -186,15 +186,17 @@ const Apps = ({
         <div className='w-[180px] h-8'></div>
       </div>
       <div className='relative flex flex-1 overflow-y-auto'>
-        {!searchKeywords && <div className='w-[200px] h-full p-4'>
-          <Sidebar current={currCategory as AppCategories} onClick={(category) => { setCurrCategory(category) }} onCreateFromBlank={onCreateFromBlank} />
+        {!searchKeywords && <div className='h-full w-[200px] p-4'>
+          <Sidebar current={currCategory as AppCategories} categories={categories} onClick={(category) => { setCurrCategory(category) }} onCreateFromBlank={onCreateFromBlank} />
         </div>}
         <div className='flex-1 h-full overflow-auto shrink-0 grow p-6 pt-2 border-l border-divider-burn'>
           {searchFilteredList && searchFilteredList.length > 0 && <>
             <div className='pt-4 pb-1'>
               {searchKeywords
                 ? <p className='title-md-semi-bold text-text-tertiary'>{searchFilteredList.length > 1 ? t('app.newApp.foundResults', { count: searchFilteredList.length }) : t('app.newApp.foundResult', { count: searchFilteredList.length })}</p>
-                : <AppCategoryLabel category={currCategory as AppCategories} className='title-md-semi-bold text-text-primary' />}
+                : <div className='flex h-[22px] items-center'>
+                  <AppCategoryLabel category={currCategory as AppCategories} className='title-md-semi-bold text-text-primary' />
+                </div>}
             </div>
             <div
               className={cn(
diff --git a/web/app/components/app/create-app-dialog/app-list/sidebar.tsx b/web/app/components/app/create-app-dialog/app-list/sidebar.tsx
index 73b34c7d02..a896ff84ff 100644
--- a/web/app/components/app/create-app-dialog/app-list/sidebar.tsx
+++ b/web/app/components/app/create-app-dialog/app-list/sidebar.tsx
@@ -1,39 +1,29 @@
 'use client'
-import { RiAppsFill, RiChatSmileAiFill, RiExchange2Fill, RiPassPendingFill, RiQuillPenAiFill, RiSpeakAiFill, RiStickyNoteAddLine, RiTerminalBoxFill, RiThumbUpFill } from '@remixicon/react'
+import { RiStickyNoteAddLine, RiThumbUpLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import classNames from '@/utils/classnames'
 import Divider from '@/app/components/base/divider'
 
 export enum AppCategories {
   RECOMMENDED = 'Recommended',
-  ASSISTANT = 'Assistant',
-  AGENT = 'Agent',
-  HR = 'HR',
-  PROGRAMMING = 'Programming',
-  WORKFLOW = 'Workflow',
-  WRITING = 'Writing',
 }
 
 type SidebarProps = {
-  current: AppCategories
-  onClick?: (category: AppCategories) => void
+  current: AppCategories | string
+  categories: string[]
+  onClick?: (category: AppCategories | string) => void
   onCreateFromBlank?: () => void
 }
 
-export default function Sidebar({ current, onClick, onCreateFromBlank }: SidebarProps) {
+export default function Sidebar({ current, categories, onClick, onCreateFromBlank }: SidebarProps) {
   const { t } = useTranslation()
-  return <div className="w-full h-full flex flex-col">
-    <ul>
+  return <div className="flex h-full w-full flex-col">
+    <ul className='pt-0.5'>
       <CategoryItem category={AppCategories.RECOMMENDED} active={current === AppCategories.RECOMMENDED} onClick={onClick} />
     </ul>
-    <div className='px-3 pt-2 pb-1 system-xs-medium-uppercase text-text-tertiary'>{t('app.newAppFromTemplate.byCategories')}</div>
-    <ul className='flex-grow flex flex-col gap-0.5'>
-      <CategoryItem category={AppCategories.ASSISTANT} active={current === AppCategories.ASSISTANT} onClick={onClick} />
-      <CategoryItem category={AppCategories.AGENT} active={current === AppCategories.AGENT} onClick={onClick} />
-      <CategoryItem category={AppCategories.HR} active={current === AppCategories.HR} onClick={onClick} />
-      <CategoryItem category={AppCategories.PROGRAMMING} active={current === AppCategories.PROGRAMMING} onClick={onClick} />
-      <CategoryItem category={AppCategories.WORKFLOW} active={current === AppCategories.WORKFLOW} onClick={onClick} />
-      <CategoryItem category={AppCategories.WRITING} active={current === AppCategories.WRITING} onClick={onClick} />
+    <div className='system-xs-medium-uppercase mb-0.5 mt-3 px-3 pb-1 pt-2 text-text-tertiary'>{t('app.newAppFromTemplate.byCategories')}</div>
+    <ul className='flex grow flex-col gap-0.5'>
+      {categories.map(category => (<CategoryItem key={category} category={category} active={current === category} onClick={onClick} />))}
     </ul>
     <Divider bgStyle='gradient' />
     <div className='px-3 py-1 flex items-center gap-1 text-text-tertiary cursor-pointer' onClick={onCreateFromBlank}>
@@ -45,47 +35,26 @@ export default function Sidebar({ current, onClick, onCreateFromBlank }: Sidebar
 
 type CategoryItemProps = {
   active: boolean
-  category: AppCategories
-  onClick?: (category: AppCategories) => void
+  category: AppCategories | string
+  onClick?: (category: AppCategories | string) => void
 }
 function CategoryItem({ category, active, onClick }: CategoryItemProps) {
   return <li
-    className={classNames('p-1 pl-3 rounded-lg flex items-center gap-2 group cursor-pointer hover:bg-state-base-hover [&.active]:bg-state-base-active', active && 'active')}
+    className={classNames('p-1 pl-3 h-8 rounded-lg flex items-center gap-2 group cursor-pointer hover:bg-state-base-hover [&.active]:bg-state-base-active', active && 'active')}
     onClick={() => { onClick?.(category) }}>
-    <div className='w-5 h-5 inline-flex items-center justify-center rounded-md border border-divider-regular bg-components-icon-bg-midnight-solid group-[.active]:bg-components-icon-bg-blue-solid'>
-      <AppCategoryIcon category={category} />
-    </div>
+    {category === AppCategories.RECOMMENDED && <div className='inline-flex h-5 w-5 items-center justify-center rounded-md'>
+      <RiThumbUpLine className='h-4 w-4 text-components-menu-item-text group-[.active]:text-components-menu-item-text-active' />
+    </div>}
     <AppCategoryLabel category={category}
       className={classNames('system-sm-medium text-components-menu-item-text group-[.active]:text-components-menu-item-text-active group-hover:text-components-menu-item-text-hover', active && 'system-sm-semibold')} />
   </li >
 }
 
 type AppCategoryLabelProps = {
-  category: AppCategories
+  category: AppCategories | string
   className?: string
 }
 export function AppCategoryLabel({ category, className }: AppCategoryLabelProps) {
   const { t } = useTranslation()
-  return <span className={className}>{t(`app.newAppFromTemplate.sidebar.${category}`)}</span>
-}
-
-type AppCategoryIconProps = {
-  category: AppCategories
-}
-function AppCategoryIcon({ category }: AppCategoryIconProps) {
-  if (category === AppCategories.AGENT)
-    return <RiSpeakAiFill className='w-3.5 h-3.5 text-components-avatar-shape-fill-stop-100' />
-  if (category === AppCategories.ASSISTANT)
-    return <RiChatSmileAiFill className='w-3.5 h-3.5 text-components-avatar-shape-fill-stop-100' />
-  if (category === AppCategories.HR)
-    return <RiPassPendingFill className='w-3.5 h-3.5 text-components-avatar-shape-fill-stop-100' />
-  if (category === AppCategories.PROGRAMMING)
-    return <RiTerminalBoxFill className='w-3.5 h-3.5 text-components-avatar-shape-fill-stop-100' />
-  if (category === AppCategories.RECOMMENDED)
-    return <RiThumbUpFill className='w-3.5 h-3.5 text-components-avatar-shape-fill-stop-100' />
-  if (category === AppCategories.WRITING)
-    return <RiQuillPenAiFill className='w-3.5 h-3.5 text-components-avatar-shape-fill-stop-100' />
-  if (category === AppCategories.WORKFLOW)
-    return <RiExchange2Fill className='w-3.5 h-3.5 text-components-avatar-shape-fill-stop-100' />
-  return <RiAppsFill className='w-3.5 h-3.5 text-components-avatar-shape-fill-stop-100' />
+  return <span className={className}>{category === AppCategories.RECOMMENDED ? t('app.newAppFromTemplate.sidebar.Recommended') : category}</span>
 }