diff --git a/frontend/src/About.tsx b/frontend/src/About.tsx
index 84123b5..9354846 100644
--- a/frontend/src/About.tsx
+++ b/frontend/src/About.tsx
@@ -6,7 +6,10 @@ export default function About() {
     //Parent div for all content shown through App.tsx routing needs to have this styling. Might change when state management is updated.
     <div className="mx-5 grid min-h-screen md:mx-36">
       <article className=" place-items-left mx-auto my-auto flex w-full max-w-6xl flex-col gap-6 rounded-lg bg-gray-100 p-6 text-jet lg:p-10 xl:p-16">
-        <p className="text-3xl">About DocsGPT 🦖</p>
+        <div className="flex items-center">
+          <p className="mr-2 text-3xl">About DocsGPT</p>
+          <p className="text-[21px]">🦖</p>
+        </div>
         <p className="mt-4">
           Find the information in your documentation through AI-powered
           <a
diff --git a/frontend/src/Hero.tsx b/frontend/src/Hero.tsx
index 63840b9..b187e0a 100644
--- a/frontend/src/Hero.tsx
+++ b/frontend/src/Hero.tsx
@@ -1,9 +1,10 @@
 export default function Hero({ className = '' }: { className?: string }) {
   return (
     <div className={`flex flex-col ${className}`}>
-      <p className="mb-10 text-center text-4xl font-semibold">
-        DocsGPT <span className="text-3xl">🦖</span>
-      </p>
+      <div className="mb-10 flex items-center justify-center">
+        <p className="mr-2 text-4xl font-semibold">DocsGPT</p>
+        <p className="text-[27px]">🦖</p>
+      </div>
       <p className="mb-3 text-center leading-6 text-black-1000">
         Welcome to DocsGPT, your technical documentation assistant!
       </p>