diff --git a/frontend/src/About.tsx b/frontend/src/About.tsx
index 53a87bc8..4f388e37 100644
--- a/frontend/src/About.tsx
+++ b/frontend/src/About.tsx
@@ -1,5 +1,6 @@
 //TODO - Add hyperlinks to text
 //TODO - Styling
+import DocsGPT3 from './assets/cute_docsgpt3.svg';
 
 export default function About() {
   return (
@@ -7,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>
-          <p className="text-[21px]">🦖</p>
+          <img src={DocsGPT3} width="41px" height="41px" 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 34347c09..dd2f60a2 100644
--- a/frontend/src/Hero.tsx
+++ b/frontend/src/Hero.tsx
@@ -1,9 +1,11 @@
+import DocsGPT3 from './assets/cute_docsgpt3.svg';
+
 export default function Hero({ className = '' }: { className?: string }) {
   return (
     <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>
-        <p className="text-[27px]">🦖</p>
+        <img src={DocsGPT3} width="41px" height="41px" alt="DocsGPT" />
       </div>
       <p className="mb-3 text-center leading-6 text-black-1000">
         Welcome to DocsGPT, your technical documentation assistant!