diff --git a/frontend/src/Avatar.tsx b/frontend/src/Avatar.tsx
index 805b4e5b..99ee7118 100644
--- a/frontend/src/Avatar.tsx
+++ b/frontend/src/Avatar.tsx
@@ -1,9 +1,11 @@
 export default function Avatar({
   avatar,
   size,
+  className,
 }: {
   avatar: string;
   size?: 'SMALL' | 'MEDIUM' | 'LARGE';
+  className: string;
 }) {
-  return <div className={'mt-4 text-2xl'}>{avatar}</div>;
+  return <div className={className}>{avatar}</div>;
 }
diff --git a/frontend/src/conversation/ConversationBubble.tsx b/frontend/src/conversation/ConversationBubble.tsx
index 8a26fb64..18b97557 100644
--- a/frontend/src/conversation/ConversationBubble.tsx
+++ b/frontend/src/conversation/ConversationBubble.tsx
@@ -22,7 +22,10 @@ const ConversationBubble = forwardRef<
           : 'flex-row-reverse self-end '
       }  ${className}`}
     >
-      <Avatar avatar={type === 'QUESTION' ? '🧑‍💻' : '🦖'}></Avatar>
+      <Avatar
+        className="mt-4 text-2xl"
+        avatar={type === 'QUESTION' ? '🧑‍💻' : '🦖'}
+      ></Avatar>
       <div
         className={`${
           type === 'QUESTION'