diff --git a/frontend/src/components/ChatWindow.jsx b/frontend/src/components/ChatWindow.jsx
index 38a4240..75d7dce 100644
--- a/frontend/src/components/ChatWindow.jsx
+++ b/frontend/src/components/ChatWindow.jsx
@@ -39,13 +39,15 @@ function GroupAvatarCompositeSm({ memberPreviews }) {
   const positions = COMPOSITE_LAYOUTS_SM[members.length];
   if (!positions) return null;
   return (
-    <div className="group-icon-sm" style={{ background: '#1a1a2e', position: 'relative', padding: 0, overflow: 'hidden' }}>
+    <div className="group-icon-sm" style={{ background: 'transparent', position: 'relative', padding: 0, overflow: 'visible' }}>
       {members.map((m, i) => {
         const pos = positions[i];
         const base = {
           position: 'absolute',
           width: pos.size, height: pos.size,
           borderRadius: '50%',
+          boxSizing: 'border-box',
+          border: '2px solid var(--surface)',
           ...(pos.top    !== undefined ? { top:    pos.top    } : {}),
           ...(pos.bottom !== undefined ? { bottom: pos.bottom } : {}),
           ...(pos.left   !== undefined ? { left:   pos.left   } : {}),
diff --git a/frontend/src/components/Sidebar.jsx b/frontend/src/components/Sidebar.jsx
index b074585..a61d76e 100644
--- a/frontend/src/components/Sidebar.jsx
+++ b/frontend/src/components/Sidebar.jsx
@@ -47,7 +47,7 @@ function GroupAvatarComposite({ memberPreviews }) {
   }
 
   return (
-    <div className="group-icon" style={{ background: '#1a1a2e', position: 'relative', padding: 0, overflow: 'hidden' }}>
+    <div className="group-icon" style={{ background: 'transparent', position: 'relative', padding: 0, overflow: 'visible' }}>
       {members.map((m, i) => {
         const pos = positions[i];
         const base = {
@@ -55,6 +55,8 @@ function GroupAvatarComposite({ memberPreviews }) {
           width: pos.size,
           height: pos.size,
           borderRadius: '50%',
+          boxSizing: 'border-box',
+          border: '2px solid var(--surface)',
           ...(pos.top    !== undefined ? { top:    pos.top    } : {}),
           ...(pos.bottom !== undefined ? { bottom: pos.bottom } : {}),
           ...(pos.left   !== undefined ? { left:   pos.left   } : {}),