diff --git a/frontend/index.html b/frontend/index.html
index 5af1721b3..30faadc95 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -5,7 +5,7 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0,viewport-fit=cover" />
   <meta name="apple-mobile-web-app-capable" content="yes">
-  <title>DocsGPT 🦖</title>
+  <title>DocsGPT</title>
   <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
 </head>
 
diff --git a/frontend/src/assets/UserIcon.png b/frontend/src/assets/UserIcon.png
new file mode 100644
index 000000000..15d8e0f61
Binary files /dev/null and b/frontend/src/assets/UserIcon.png differ
diff --git a/frontend/src/conversation/Conversation.tsx b/frontend/src/conversation/Conversation.tsx
index a8326da71..5379a9949 100644
--- a/frontend/src/conversation/Conversation.tsx
+++ b/frontend/src/conversation/Conversation.tsx
@@ -214,7 +214,7 @@ export default function Conversation() {
     };
   }, []);
   return (
-    <div className="flex flex-col gap-1 h-full justify-end ">
+    <div className="flex flex-col gap-1 h-full justify-end sm:mx-4 md:mx-4 mx-4">
       {conversationId && queries.length > 0 && (
         <div className="absolute top-4 right-20 z-20 ">
           {' '}
@@ -263,7 +263,7 @@ export default function Conversation() {
         ref={conversationRef}
         onWheel={handleUserInterruption}
         onTouchMove={handleUserInterruption}
-        className="flex justify-center w-full overflow-y-auto h-screen sm:mt-12"
+        className="flex justify-center w-full overflow-y-auto h-screen sm:mt-12 "
       >
         {queries.length > 0 && !hasScrolledToLast && (
           <button
diff --git a/frontend/src/conversation/ConversationBubble.tsx b/frontend/src/conversation/ConversationBubble.tsx
index a9a05168b..85f91fbf7 100644
--- a/frontend/src/conversation/ConversationBubble.tsx
+++ b/frontend/src/conversation/ConversationBubble.tsx
@@ -8,6 +8,7 @@ import remarkMath from 'remark-math';
 import rehypeKatex from 'rehype-katex';
 import 'katex/dist/katex.min.css';
 import DocsGPT3 from '../assets/cute_docsgpt3.svg';
+import usericon from '../assets/UserIcon.png';
 import Dislike from '../assets/dislike.svg?react';
 import Document from '../assets/document.svg';
 import Like from '../assets/like.svg?react';
@@ -55,14 +56,26 @@ const ConversationBubble = forwardRef<
     bubble = (
       <div
         ref={ref}
-        className={`flex flex-row-reverse self-end flex-wrap ${className}`}
+        className={`flex flex-col my-4 md:my-2 items-end ${className}`}
       >
-        <Avatar className="mt-2 text-2xl" avatar="🧑‍💻"></Avatar>
+        <div className="flex flex-row items-center justify-center gap-3 my-2 -ml-3">
+          <p className="text-base font-semibold text-white">Prompt</p>
+          <Avatar
+            className="h-7 w-7 text-2xl"
+            avatar={
+              <img
+                src={usericon}
+                alt="user"
+                className="h-full w-full object-cover"
+              />
+            }
+          />
+        </div>
         <div
           style={{
             wordBreak: 'break-word',
           }}
-          className="ml-10 mr-2 flex items-center rounded-[28px] bg-purple-30 py-[14px] px-[19px] text-white max-w-full whitespace-pre-wrap leading-normal"
+          className="ml-10 mr-2 flex items-center rounded-[28px] bg-purple-30 py-6 md:py-[14px] px-[19px] text-white max-w-full whitespace-pre-wrap leading-normal"
         >
           {message}
         </div>
@@ -87,7 +100,7 @@ const ConversationBubble = forwardRef<
     bubble = (
       <div
         ref={ref}
-        className={`flex flex-wrap self-start ${className} group flex-col  dark:text-bright-gray`}
+        className={`flex flex-wrap self-start my-4 md:my-2 ${className} group flex-col dark:text-bright-gray`}
       >
         {DisableSourceFE ||
         type === 'ERROR' ||
@@ -231,9 +244,9 @@ const ConversationBubble = forwardRef<
             <p className="text-base font-semibold">Answer</p>
           </div>
           <div
-            className={`ml-2 mr-5 flex max-w-[90vw] rounded-[28px] bg-gray-1000 py-[14px] px-7 dark:bg-gun-metal md:max-w-[70vw] lg:max-w-[50vw] ${
+            className={`ml-2 mr-5 flex max-w-[90vw] rounded-[28px] bg-gray-1000 py-6 md:py-[14px] px-7 dark:bg-gun-metal md:max-w-[70vw] lg:max-w-[50vw] ${
               type === 'ERROR'
-                ? 'relative flex-row items-center rounded-full border border-transparent bg-[#FFE7E7] p-2 py-5 text-sm font-normal text-red-3000  dark:border-red-2000 dark:text-white'
+                ? 'relative flex-row items-center rounded-full border border-transparent bg-[#FFE7E7] p-2 py-5 text-sm font-normal text-red-3000 dark:border-red-2000 dark:text-white'
                 : 'flex-col rounded-3xl'
             }`}
           >