diff --git a/src/pages/agent-office/components/SidePanel.jsx b/src/pages/agent-office/components/SidePanel.jsx
index ffbc7e5..e8ddaa5 100644
--- a/src/pages/agent-office/components/SidePanel.jsx
+++ b/src/pages/agent-office/components/SidePanel.jsx
@@ -1,18 +1,11 @@
 // src/pages/agent-office/components/SidePanel.jsx
 import { useState } from 'react';
+import { AGENT_META } from '../constants.js';
 import CommandTab from './CommandTab.jsx';
 import TaskTab from './TaskTab.jsx';
 import TokenTab from './TokenTab.jsx';
 import LogTab from './LogTab.jsx';
 
-const AGENT_META = {
-  stock:      { displayName: '주식 트레이더', emoji: '📈', color: '#4488cc' },
-  music:      { displayName: '음악 프로듀서', emoji: '🎵', color: '#44aa88' },
-  blog:       { displayName: '블로그 마케터', emoji: '✍️', color: '#d97706' },
-  realestate: { displayName: '청약 애널리스트', emoji: '🏢', color: '#c026d3' },
-  lotto:      { displayName: '로또 큐레이터', emoji: '🎱', color: '#ef4444' }
-};
-
 const TABS = ['Commands', 'Tasks', 'Tokens', 'Logs'];
 
 export default function SidePanel({ agentId, agentState, pendingTask, onClose, refreshTrigger }) {
@@ -26,11 +19,10 @@ export default function SidePanel({ agentId, agentState, pendingTask, onClose, r
 
   return (
     <div className="ao-sidepanel">
-      {/* Header */}
       <div className="ao-sidepanel-header">
         <div className="ao-sidepanel-agent">
-          <div className="ao-sidepanel-icon" style={{ background: meta.color }}>
-            {meta.emoji}
+          <div className="ao-sidepanel-icon" style={{ borderColor: meta.color }}>
+            <img src={meta.image} alt={meta.displayName} />
           </div>
           <div className="ao-sidepanel-info">
             <div className="ao-sidepanel-name">{meta.displayName}</div>
@@ -40,7 +32,6 @@ export default function SidePanel({ agentId, agentState, pendingTask, onClose, r
         <button className="ao-sidepanel-close" onClick={onClose}>×</button>
       </div>
 
-      {/* Tabs */}
       <div className="ao-sidepanel-tabs">
         {TABS.map(tab => (
           <button
@@ -53,7 +44,6 @@ export default function SidePanel({ agentId, agentState, pendingTask, onClose, r
         ))}
       </div>
 
-      {/* Tab Content */}
       <div className="ao-sidepanel-content">
         {activeTab === 'Commands' && (
           <CommandTab agentId={agentId} agentState={agentState?.state} pendingTask={pendingTask} />