some avatar stuff but will continue this part later

packages/desktop/src/components/NirvanaAvatar.tsx

@@ -0,0 +1,29 @@
+import { Avatar, AvatarGroup, SxProps } from '@mui/material';
+import React from 'react';
+
+/**
+ *
+ * for multiple avatars, will render all in a folder
+ * takes into account size as well
+ */
+export default function NirvanaAvatar({
+  avatars,
+  size = 'default',
+}: {
+  size?: 'large' | 'small' | 'default';
+  avatars: { src: string; alt: string }[];
+}) {
+  const sx: SxProps = size === 'small' ? { height: 25, width: 25 } : {};
+
+  if (avatars?.length === 1) {
+    return <Avatar alt={avatars[0].alt} src={avatars[0].src} sx={sx} />;
+  }
+
+  return (
+    <AvatarGroup>
+      {avatars.map((avatar, index) => (
+        <Avatar key={`${avatar.alt}-${index}`} alt={avatar.alt} sx={sx} src={avatar.src} />
+      ))}
+    </AvatarGroup>
+  );
+}

packages/desktop/src/components/Terminal.tsx

@@ -22,6 +22,7 @@ import { FiActivity, FiInbox, FiSearch } from 'react-icons/fi';
 import KeyboardShortcutLabel from './KeyboardShortcutLabel';
 import { useSnackbar } from 'notistack';
 import { useKey } from 'react-use';
+import NirvanaAvatar from './NirvanaAvatar';
 
 export default function Terminal() {
   const { enqueueSnackbar } = useSnackbar();
@@ -120,7 +121,11 @@ export default function Terminal() {
 
             <ListItem>
               <ListItemAvatar>
-                <Avatar alt={'Arjun Patel'} src="https://mui.com/static/images/avatar/3.jpg" />
+                <NirvanaAvatar
+                  avatars={[
+                    { alt: 'Arjun Patel', src: 'https://mui.com/static/images/avatar/3.jpg' },
+                  ]}
+                />
               </ListItemAvatar>
 
               <ListItemText