diff --git a/web/app/(commonLayout)/apps/AppCard.tsx b/web/app/(commonLayout)/apps/AppCard.tsx
index eb62cd8899..aec4d6ab6e 100644
--- a/web/app/(commonLayout)/apps/AppCard.tsx
+++ b/web/app/(commonLayout)/apps/AppCard.tsx
@@ -47,7 +47,7 @@ const AppCard = ({
     <>
       <Link href={`/app/${app.id}/overview`} className={style.listItem}>
         <div className={style.listItemTitle}>
-          <AppIcon size='small' />
+          <AppIcon size='small' icon={app.icon} background={app.icon_background}/>
           <div className={style.listItemHeading}>
             <div className={style.listItemHeadingContent}>{app.name}</div>
           </div>
diff --git a/web/app/(commonLayout)/apps/NewAppDialog.tsx b/web/app/(commonLayout)/apps/NewAppDialog.tsx
index 39f6c519bf..17bde9538d 100644
--- a/web/app/(commonLayout)/apps/NewAppDialog.tsx
+++ b/web/app/(commonLayout)/apps/NewAppDialog.tsx
@@ -18,6 +18,7 @@ import AppIcon from '@/app/components/base/app-icon'
 import AppsContext from '@/context/app-context'
 
 import EmojiPicker from '@/app/components/base/emoji-picker'
+import { set } from 'immer/dist/internal'
 
 type NewAppDialogProps = {
   show: boolean
@@ -33,7 +34,11 @@ const NewAppDialog = ({ show, onClose }: NewAppDialogProps) => {
   const [newAppMode, setNewAppMode] = useState<AppMode>()
   const [isWithTemplate, setIsWithTemplate] = useState(false)
   const [selectedTemplateIndex, setSelectedTemplateIndex] = useState<number>(-1)
+
+  // Emoji Picker
   const [showEmojiPicker, setShowEmojiPicker] = useState(false)
+  const [emoji, setEmoji] = useState({icon: '', icon_background: ''})
+
   const mutateApps = useContextSelector(AppsContext, state => state.mutateApps)
 
   const { data: templates, mutate } = useSWR({ url: '/app-templates' }, fetchAppTemplates)
@@ -70,6 +75,8 @@ const NewAppDialog = ({ show, onClose }: NewAppDialogProps) => {
     try {
       const app = await createApp({
         name,
+        icon: emoji.icon,
+        icon_background: emoji.icon_background,
         mode: isWithTemplate ? templates.data[selectedTemplateIndex].mode : newAppMode!,
         config: isWithTemplate ? templates.data[selectedTemplateIndex].model_config : undefined,
       })
@@ -83,15 +90,19 @@ const NewAppDialog = ({ show, onClose }: NewAppDialogProps) => {
       notify({ type: 'error', message: t('app.newApp.appCreateFailed') })
     }
     isCreatingRef.current = false
-  }, [isWithTemplate, newAppMode, notify, router, templates, selectedTemplateIndex])
+  }, [isWithTemplate, newAppMode, notify, router, templates, selectedTemplateIndex, emoji])
 
   return <>
     {showEmojiPicker && <EmojiPicker
-      onSelect={(emoji, background) => {
-        console.log(emoji, background)
+      onSelect={(icon, icon_background) => {
+        console.log(icon, icon_background)
+        setEmoji({icon, icon_background})
+        setShowEmojiPicker(false)
+      }}
+      onClose={() => {
+        setEmoji({icon: '', icon_background: ''})
         setShowEmojiPicker(false)
       }}
-      onClose={() => setShowEmojiPicker(false)}
     />}
     <Dialog
       show={show}
diff --git a/web/app/components/base/app-icon/index.tsx b/web/app/components/base/app-icon/index.tsx
index cc2f7a193f..16a16c7f87 100644
--- a/web/app/components/base/app-icon/index.tsx
+++ b/web/app/components/base/app-icon/index.tsx
@@ -15,6 +15,7 @@ export type AppIconProps = {
 const AppIcon: FC<AppIconProps> = ({
   size = 'medium',
   rounded = false,
+  icon,
   background,
   className,
   innerIcon,
@@ -33,7 +34,7 @@ const AppIcon: FC<AppIconProps> = ({
       }}
       onClick={onClick}
     >
-      {innerIcon ? innerIcon : <>🤖</>}
+      {innerIcon ? innerIcon : <em-emoji id={icon} />}
     </span>
   )
 }
diff --git a/web/app/components/base/emoji-picker/index.tsx b/web/app/components/base/emoji-picker/index.tsx
index 116b912ffd..7994449383 100644
--- a/web/app/components/base/emoji-picker/index.tsx
+++ b/web/app/components/base/emoji-picker/index.tsx
@@ -163,9 +163,9 @@ const EmojiPicker: FC<IEmojiPickerProps> = ({
             className={
               cn(
                 'cursor-pointer',
-                `ring-[${color}] hover:ring-1 ring-offset-1`,
+                `hover:ring-1 ring-offset-1`,
                 'inline-flex w-10 h-10 rounded-lg items-center justify-center',
-                color === selectedBackground ? `ring-1 ` : '',
+                color === selectedBackground ? `ring-1 ring-gray-300` : '',
               )}
             onClick={() => {
               setSelectedBackground(color)
diff --git a/web/service/apps.ts b/web/service/apps.ts
index 7bb49d4a28..e9f619787e 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; icon: string, icon_background: string, mode: AppMode; config?: ModelConfig }> = ({ name, icon, icon_background, mode, config }) => {
+  return post('apps', { body: { name, icon, icon_background, mode, model_config: config } }) as Promise<AppDetailResponse>
 }
 
 export const deleteApp: Fetcher<CommonResponse, string> = (appID) => {