diff --git a/web/app/components/base/logo/logo-embedded-chat-header.tsx b/web/app/components/base/logo/logo-embedded-chat-header.tsx
index 02dc62c90..831298582 100644
--- a/web/app/components/base/logo/logo-embedded-chat-header.tsx
+++ b/web/app/components/base/logo/logo-embedded-chat-header.tsx
@@ -1,3 +1,4 @@
+import classNames from '@/utils/classnames'
 import type { FC } from 'react'
 
 type LogoEmbeddedChatHeaderProps = {
@@ -7,13 +8,16 @@ type LogoEmbeddedChatHeaderProps = {
 const LogoEmbeddedChatHeader: FC<LogoEmbeddedChatHeaderProps> = ({
   className,
 }) => {
-  return (
+  return <picture>
+    <source media="(resolution: 1x)" srcSet='/logo/logo-embedded-chat-header.png' />
+    <source media="(resolution: 2x)" srcSet='/logo/logo-embedded-chat-header@2x.png' />
+    <source media="(resolution: 3x)" srcSet='/logo/logo-embedded-chat-header@3x.png' />
     <img
       src='/logo/logo-embedded-chat-header.png'
-      className={`block h-6 w-auto ${className}`}
       alt='logo'
+      className={classNames('block h-6 w-auto', className)}
     />
-  )
+  </picture>
 }
 
 export default LogoEmbeddedChatHeader
diff --git a/web/app/components/header/account-dropdown/workplace-selector/index.tsx b/web/app/components/header/account-dropdown/workplace-selector/index.tsx
index 6ab6892a9..387e7bfb2 100644
--- a/web/app/components/header/account-dropdown/workplace-selector/index.tsx
+++ b/web/app/components/header/account-dropdown/workplace-selector/index.tsx
@@ -40,7 +40,9 @@ const WorkplaceSelector = () => {
                 gap-1.5 p-0.5 hover:bg-state-base-hover ${open && 'bg-state-base-hover'} rounded-[10px]
               `,
             )}>
-              <div className='flex h-7 w-7 items-center justify-center rounded-lg bg-[#EFF4FF] text-xs font-medium text-primary-600'>{currentWorkspace?.name[0].toLocaleUpperCase()}</div>
+              <div className='flex h-6 w-6 items-center justify-center rounded-md bg-components-icon-bg-blue-solid text-[13px]'>
+                <span className='bg-gradient-to-r from-components-avatar-shape-fill-stop-0 to-components-avatar-shape-fill-stop-100 bg-clip-text font-semibold uppercase text-shadow-shadow-1 opacity-90'>{currentWorkspace?.name[0]?.toLocaleUpperCase()}</span>
+              </div>
               <div className='flex flex-row'>
                 <div className={'system-sm-medium max-w-[80px] truncate text-text-secondary'}>{currentWorkspace?.name}</div>
                 <RiArrowDownSLine className='h-4 w-4 text-text-secondary' />
@@ -58,18 +60,20 @@ const WorkplaceSelector = () => {
               <MenuItems
                 className={cn(
                   `
-                    shadows-shadow-lg absolute left-[-15px] mt-1 flex w-[280px] flex-col items-start rounded-xl
+                    shadows-shadow-lg absolute left-[-15px] mt-1 flex w-[280px] flex-col items-start rounded-xl bg-components-panel-bg-blur backdrop-blur-[5px]
                   `,
                 )}
               >
-                <div className="flex w-full flex-col items-start self-stretch rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 pb-2 shadow-lg ">
+                <div className="flex w-full flex-col items-start self-stretch rounded-xl border-[0.5px] border-components-panel-border p-1 pb-2 shadow-lg ">
                   <div className='flex items-start self-stretch px-3 pb-0.5 pt-1'>
                     <span className='system-xs-medium-uppercase flex-1 text-text-tertiary'>{t('common.userProfile.workspace')}</span>
                   </div>
                   {
                     workspaces.map(workspace => (
                       <div className='flex items-center gap-2 self-stretch rounded-lg py-1 pl-3 pr-2 hover:bg-state-base-hover' key={workspace.id} onClick={() => handleSwitchWorkspace(workspace.id)}>
-                        <div className='flex h-6 w-6 items-center justify-center rounded-md bg-[#EFF4FF] text-xs font-medium text-primary-600'>{workspace.name[0].toLocaleUpperCase()}</div>
+                        <div className='flex h-6 w-6 items-center justify-center rounded-md bg-components-icon-bg-blue-solid text-[13px]'>
+                          <span className='bg-gradient-to-r from-components-avatar-shape-fill-stop-0 to-components-avatar-shape-fill-stop-100 bg-clip-text font-semibold uppercase text-shadow-shadow-1 opacity-90'>{workspace?.name[0]?.toLocaleUpperCase()}</span>
+                        </div>
                         <div className='system-md-regular line-clamp-1 grow cursor-pointer overflow-hidden text-ellipsis text-text-secondary'>{workspace.name}</div>
                         <PlanBadge plan={workspace.plan as Plan} />
                       </div>
diff --git a/web/app/components/header/account-setting/members-page/index.tsx b/web/app/components/header/account-setting/members-page/index.tsx
index 594a31c0b..f7ed3f10c 100644
--- a/web/app/components/header/account-setting/members-page/index.tsx
+++ b/web/app/components/header/account-setting/members-page/index.tsx
@@ -15,7 +15,6 @@ import I18n from '@/context/i18n'
 import { useAppContext } from '@/context/app-context'
 import Avatar from '@/app/components/base/avatar'
 import type { InvitationResult } from '@/models/common'
-import LogoEmbeddedChatHeader from '@/app/components/base/logo/logo-embedded-chat-header'
 import { useProviderContext } from '@/context/provider-context'
 import { Plan } from '@/app/components/billing/type'
 import Button from '@/app/components/base/button'
@@ -56,7 +55,9 @@ const MembersPage = () => {
     <>
       <div className='flex flex-col'>
         <div className='mb-4 flex items-center gap-3 rounded-xl border-l-[0.5px] border-t-[0.5px] border-divider-subtle bg-gradient-to-r from-background-gradient-bg-fill-chat-bg-2 to-background-gradient-bg-fill-chat-bg-1 p-3 pr-5'>
-          <LogoEmbeddedChatHeader className='!h-12 !w-12' />
+          <div className='flex h-12 w-12 items-center justify-center rounded-xl bg-components-icon-bg-blue-solid text-[20px]'>
+            <span className='bg-gradient-to-r from-components-avatar-shape-fill-stop-0 to-components-avatar-shape-fill-stop-100 bg-clip-text font-semibold uppercase text-shadow-shadow-1 opacity-90'>{currentWorkspace?.name[0]?.toLocaleUpperCase()}</span>
+          </div>
           <div className='grow'>
             <div className='system-md-semibold text-text-secondary'>{currentWorkspace?.name}</div>
             {enableBilling && (
diff --git a/web/public/logo/logo-embedded-chat-header.png b/web/public/logo/logo-embedded-chat-header.png
index 945f824b6..058f7d27e 100644
Binary files a/web/public/logo/logo-embedded-chat-header.png and b/web/public/logo/logo-embedded-chat-header.png differ
diff --git a/web/public/logo/logo-embedded-chat-header@2x.png b/web/public/logo/logo-embedded-chat-header@2x.png
new file mode 100644
index 000000000..9e1194767
Binary files /dev/null and b/web/public/logo/logo-embedded-chat-header@2x.png differ
diff --git a/web/public/logo/logo-embedded-chat-header@3x.png b/web/public/logo/logo-embedded-chat-header@3x.png
new file mode 100644
index 000000000..5285ed6b9
Binary files /dev/null and b/web/public/logo/logo-embedded-chat-header@3x.png differ