diff --git a/frontend/src/Avatar.tsx b/frontend/src/Avatar.tsx
index 04819e7e..ef733ff2 100644
--- a/frontend/src/Avatar.tsx
+++ b/frontend/src/Avatar.tsx
@@ -1,9 +1,11 @@
+import { ReactNode } from 'react';
+
 export default function Avatar({
   avatar,
   size,
   className,
 }: {
-  avatar: string;
+  avatar: string | ReactNode;
   size?: 'SMALL' | 'MEDIUM' | 'LARGE';
   className: string;
 }) {
diff --git a/frontend/src/conversation/ConversationBubble.tsx b/frontend/src/conversation/ConversationBubble.tsx
index b429e2ee..85b80286 100644
--- a/frontend/src/conversation/ConversationBubble.tsx
+++ b/frontend/src/conversation/ConversationBubble.tsx
@@ -11,6 +11,7 @@ import ReactMarkdown from 'react-markdown';
 import copy from 'copy-to-clipboard';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/prism';
+import DocsGPT3 from '../assets/cute_docsgpt3.svg';
 
 const DisableSourceFE = import.meta.env.VITE_DISABLE_SOURCE_FE || false;
 
@@ -65,7 +66,10 @@ const ConversationBubble = forwardRef<
         className={`flex self-start ${className} group flex-col pr-20`}
       >
         <div className="flex self-start">
-          <Avatar className="mt-2 text-2xl" avatar="🦖"></Avatar>
+          <Avatar
+            className="mt-2"
+            avatar={<img src={DocsGPT3} alt="DocsGPT" />}
+          ></Avatar>
           <div
             className={`ml-2 mr-5 flex rounded-3xl bg-gray-1000 p-3.5 ${
               type === 'ERROR'