diff --git a/src/pages/AgentEditor/components/AvatarSelector.tsx b/src/pages/AgentEditor/components/AvatarSelector.tsx
index 2010a7f..2cc384f 100644
--- a/src/pages/AgentEditor/components/AvatarSelector.tsx
+++ b/src/pages/AgentEditor/components/AvatarSelector.tsx
@@ -33,7 +33,7 @@ export default function AvatarSelector({
             </Button>
           </Upload>
         </div>
-        <div className="grid grid-cols-6 gap-3 bg-gray-50 p-4 rounded-2xl max-h-[400px] overflow-y-auto monica-scrollbar">
+        <div className="grid grid-cols-5 gap-4 bg-gray-50 p-4 rounded-2xl max-h-[400px] overflow-y-auto monica-scrollbar">
           {[DEFAULT_AVATAR, ...PRESET_AVATARS].map((url) => (
             <div
               key={url}
@@ -43,8 +43,8 @@ export default function AvatarSelector({
                 onCancel();
                 await onAvatarChange();
               }}
-              className={`relative aspect-square rounded-full cursor-pointer transition-all duration-300 overflow-hidden border-2 ${agent?.avatar === url ? 'scale-110 shadow-lg z-10' : 'border-transparent opacity-70 hover:opacity-100 hover:scale-105'}`}
-              style={{ borderColor: agent?.avatar === url ? 'var(--color-brand)' : 'transparent' }}
+              className={`relative rounded-full cursor-pointer transition-all duration-300 overflow-hidden border-2 flex-shrink-0 ${agent?.avatar === url ? 'scale-110 shadow-lg z-10' : 'border-transparent opacity-70 hover:opacity-100 hover:scale-105'}`}
+              style={{ width: 80, height: 80, borderColor: agent?.avatar === url ? 'var(--color-brand)' : 'transparent' }}
             >
               <img src={url} className="w-full h-full object-cover" alt="preset" />
               {agent?.avatar === url && (
diff --git a/src/pages/AgentEditor/components/InitModal.tsx b/src/pages/AgentEditor/components/InitModal.tsx
index ead6b62..5d1c99e 100644
--- a/src/pages/AgentEditor/components/InitModal.tsx
+++ b/src/pages/AgentEditor/components/InitModal.tsx
@@ -202,13 +202,13 @@ export default function InitModal({
               </Button>
             </Upload>
           </div>
-          <div className="agent-editor-avatar-grid monica-scrollbar">
+          <div className="grid grid-cols-6 gap-3 agent-editor-avatar-grid monica-scrollbar">
             {[DEFAULT_AVATAR, ...PRESET_AVATARS].map((url) => (
               <div
                 key={url}
                 onClick={() => setSelectedAvatar(url)}
-                className={`relative aspect-square rounded-full cursor-pointer transition-all duration-300 overflow-hidden border-2 ${selectedAvatar === url ? 'scale-110 shadow-lg z-10' : 'border-transparent opacity-70 hover:opacity-100 hover:scale-105'}`}
-                style={{ borderColor: selectedAvatar === url ? 'var(--color-brand)' : 'transparent' }}
+                className={`relative rounded-full cursor-pointer transition-all duration-300 overflow-hidden border-2 flex-shrink-0 ${selectedAvatar === url ? 'scale-110 shadow-lg z-10' : 'border-transparent opacity-70 hover:opacity-100 hover:scale-105'}`}
+                style={{ width: 80, height: 80, borderColor: selectedAvatar === url ? 'var(--color-brand)' : 'transparent' }}
               >
                 <img src={url} className="w-full h-full object-cover" alt="preset" />
                 {selectedAvatar === url && (