diff --git a/frontend/web/src/components/chat/ChatContainer.tsx b/frontend/web/src/components/chat/ChatContainer.tsx
index e81ec29..a99bae4 100644
--- a/frontend/web/src/components/chat/ChatContainer.tsx
+++ b/frontend/web/src/components/chat/ChatContainer.tsx
@@ -40,7 +40,7 @@ export default function ChatContainer() {
         <div className="max-w-2xl mx-auto px-4 py-6">
           {messages.length === 0 ? (
             <div className="flex flex-col items-center justify-center h-full text-center space-y-2 pt-32">
-              <div className="w-16 h-16 rounded-[20px] bg-[var(--mx-primary)] flex items-center justify-center shadow-lg shadow-[var(--mx-primary)]/20 mb-2">
+              <div className="w-16 h-16 rounded-[20px] overflow-hidden shadow-lg mb-2" style={{ boxShadow: '0 0 24px color-mix(in srgb, var(--mx-primary) 20%, transparent)' }}>
                 <img src="/images/cyrene-avatar.png" alt="Cyrene" className="w-full h-full object-cover" />
               </div>
               <p className="text-[var(--mx-text-dim)] text-sm">开始新对话吧~</p>
diff --git a/frontend/web/src/components/chat/MessageList.tsx b/frontend/web/src/components/chat/MessageList.tsx
index 6903dbe..41b7824 100644
--- a/frontend/web/src/components/chat/MessageList.tsx
+++ b/frontend/web/src/components/chat/MessageList.tsx
@@ -38,7 +38,7 @@ function MessageBubble({ message }: { message: Message }) {
     <div className={`flex ${isUser ? 'justify-end' : 'justify-start'}`}>
       {/* Avatar for AI */}
       {!isUser && (
-        <div className="w-8 h-8 rounded-xl bg-[var(--mx-primary)] flex items-center justify-center shrink-0 mr-2 mt-1">
+        <div className="w-8 h-8 rounded-xl overflow-hidden shrink-0 mr-2 mt-1">
           <img src="/images/cyrene-avatar.png" alt="Cyrene" className="w-full h-full object-cover" />
         </div>
       )}
diff --git a/frontend/web/src/components/layout/AppLayout.tsx b/frontend/web/src/components/layout/AppLayout.tsx
index e20a6aa..7538778 100644
--- a/frontend/web/src/components/layout/AppLayout.tsx
+++ b/frontend/web/src/components/layout/AppLayout.tsx
@@ -13,7 +13,7 @@ export default function AppLayout({ children }: { children: ReactNode }) {
       {/* Header */}
       <header className="h-14 shrink-0 flex items-center justify-between px-4 border-b mx-glass" style={{ borderColor: 'var(--mx-divider)', background: 'var(--mx-surface)' }}>
         <Link to="/chat" className="flex items-center gap-2">
-          <div className="w-7 h-7 rounded-lg overflow-hidden flex items-center justify-center" style={{ background: 'var(--mx-primary)' }}>
+          <div className="w-7 h-7 rounded-lg overflow-hidden">
             <img src="/images/cyrene-avatar.png" alt="Cyrene" className="w-full h-full object-cover" />
           </div>
           <span className="font-semibold text-base">Cyrene</span>
diff --git a/frontend/web/src/pages/LoginPage.tsx b/frontend/web/src/pages/LoginPage.tsx
index 385d1c3..022ac83 100644
--- a/frontend/web/src/pages/LoginPage.tsx
+++ b/frontend/web/src/pages/LoginPage.tsx
@@ -29,7 +29,7 @@ export default function LoginPage() {
       <form onSubmit={handleSubmit} className="w-full max-w-sm space-y-5">
         {/* Logo area */}
         <div className="text-center space-y-2 mb-8">
-          <div className="mx-auto w-20 h-20 rounded-[22px] bg-[var(--mx-primary)] flex items-center justify-center shadow-lg shadow-[var(--mx-primary)]/20">
+          <div className="mx-auto w-20 h-20 rounded-[22px] overflow-hidden shadow-lg" style={{ boxShadow: '0 0 24px color-mix(in srgb, var(--mx-primary) 20%, transparent)' }}>
             <img src="/images/cyrene-avatar.png" alt="Cyrene" className="w-full h-full object-cover" />
           </div>
           <h1 className="text-2xl font-semibold text-[var(--mx-text)]">Cyrene</h1>