diff --git a/frontend/src/About.tsx b/frontend/src/About.tsx
index 85f654c..eaffafd 100644
--- a/frontend/src/About.tsx
+++ b/frontend/src/About.tsx
@@ -8,7 +8,7 @@ export default function About() {
       <article className="place-items-left mx-auto my-auto flex w-full max-w-6xl flex-col gap-4 rounded-3xl bg-gray-100 p-6 text-jet lg:p-6 xl:p-10">
         <div className="flex items-center">
           <p className="mr-2 text-3xl">About DocsGPT</p>
-          <img src={DocsGPT3} alt="DocsGPT" />
+          <img className="h14 mb-2" src={DocsGPT3} alt="DocsGPT" />
         </div>
         <p className="mt-4">
           Find the information in your documentation through AI-powered
diff --git a/frontend/src/Hero.tsx b/frontend/src/Hero.tsx
index b814de1..b62823a 100644
--- a/frontend/src/Hero.tsx
+++ b/frontend/src/Hero.tsx
@@ -5,7 +5,7 @@ export default function Hero({ className = '' }: { className?: string }) {
     <div className={`mt-14 mb-12 flex flex-col `}>
       <div className="mb-10 flex items-center justify-center ">
         <p className="mr-2 text-4xl font-semibold">DocsGPT</p>
-        <img src={DocsGPT3} alt="DocsGPT" />
+        <img className="mb-2 h-14" src={DocsGPT3} alt="DocsGPT" />
       </div>
       <p className="mb-3 text-center leading-6 text-black-1000">
         Welcome to DocsGPT, your technical documentation assistant!
diff --git a/frontend/src/Navigation.tsx b/frontend/src/Navigation.tsx
index 7b54399..328b9eb 100644
--- a/frontend/src/Navigation.tsx
+++ b/frontend/src/Navigation.tsx
@@ -191,11 +191,13 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
         ref={navRef}
         className={`${
           !navOpen && '-ml-96 md:-ml-[18rem]'
-        } duration-20 bg-light-gray-3000 fixed top-0 z-20 flex h-full w-72 flex-col border-r-2 transition-all`}
+        } duration-20 fixed top-0 z-20 flex h-full w-72 flex-col border-r-2 bg-white transition-all`}
       >
-        <div className={'visible flex h-16 w-full justify-between md:h-12'}>
+        <div
+          className={'visible mt-2 flex h-16 w-full justify-between md:h-12'}
+        >
           <div className="my-auto mx-4 flex cursor-pointer gap-1.5">
-            <img src={DocsGPT3} alt="" />
+            <img className="mb-2 h-10" src={DocsGPT3} alt="" />
             <p className="my-auto text-2xl font-semibold">DocsGPT</p>
           </div>
           <button
@@ -240,7 +242,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
         </NavLink>
         {conversations && (
           <div className="conversations-container max-h-[25rem] overflow-y-auto">
-            <p className="text-sm-eerie-black ml-6 mt-3 font-semibold">Chats</p>
+            <p className="ml-6 mt-3 text-sm font-semibold">Chats</p>
             {conversations?.map((conversation) => (
               <ConversationTile
                 key={conversation.id}
@@ -318,9 +320,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
               </div>
             )}
           </div>
-          <p className="ml-6 mt-3 text-sm font-semibold text-eerie-black">
-            Source Docs
-          </p>
+          <p className="ml-6 mt-3 text-sm font-semibold">Source Docs</p>
         </div>
         <div className="flex flex-col gap-2 border-b-2 py-2">
           <div
diff --git a/frontend/src/Avatar.tsx b/frontend/src/components/Avatar.tsx
similarity index 58%
rename from frontend/src/Avatar.tsx
rename to frontend/src/components/Avatar.tsx
index ef733ff..202be20 100644
--- a/frontend/src/Avatar.tsx
+++ b/frontend/src/components/Avatar.tsx
@@ -9,12 +9,5 @@ export default function Avatar({
   size?: 'SMALL' | 'MEDIUM' | 'LARGE';
   className: string;
 }) {
-  const styles = {
-    transform: 'scale(-1, 1)',
-  };
-  return (
-    <div style={styles} className={className}>
-      {avatar}
-    </div>
-  );
+  return <div className={`${className} flex-shrink-0`}>{avatar}</div>;
 }
diff --git a/frontend/src/conversation/ConversationBubble.tsx b/frontend/src/conversation/ConversationBubble.tsx
index 6460d66..8c0ab8e 100644
--- a/frontend/src/conversation/ConversationBubble.tsx
+++ b/frontend/src/conversation/ConversationBubble.tsx
@@ -1,5 +1,5 @@
 import { forwardRef, useState } from 'react';
-import Avatar from '../Avatar';
+import Avatar from '../components/Avatar';
 import { FEEDBACK, MESSAGE_TYPE } from './conversationModels';
 import classes from './ConversationBubble.module.css';
 import Alert from './../assets/alert.svg';
@@ -66,7 +66,17 @@ const ConversationBubble = forwardRef<
         className={`flex self-start ${className} group flex-col pr-20`}
       >
         <div className="flex self-start">
-          <img src={DocsGPT3} alt="DocsGPT" />
+          <Avatar
+            className="mt-2 h-12 w-12 text-2xl"
+            avatar={
+              <img
+                src={DocsGPT3}
+                alt="DocsGPT"
+                className="h-full w-full object-cover"
+              />
+            }
+          />
+
           <div
             className={`ml-2 mr-5 flex rounded-3xl bg-gray-1000 p-3.5 ${
               type === 'ERROR'