diff --git a/src/components/about/Avatar.tsx b/src/components/about/Avatar.tsx
index 933b4ca30..4d94c9053 100644
--- a/src/components/about/Avatar.tsx
+++ b/src/components/about/Avatar.tsx
@@ -12,6 +12,8 @@ export default function Avatar({ person }) {
           "working at QuantStack as a " +
           person.position
         }
+        width={"300px"}
+        height={"300px"}
       />
       </div>
     );
diff --git a/src/components/about/LargePortraitCard.tsx b/src/components/about/LargePortraitCard.tsx
index 0079d5a4f..ec471323e 100644
--- a/src/components/about/LargePortraitCard.tsx
+++ b/src/components/about/LargePortraitCard.tsx
@@ -5,8 +5,6 @@ import Link from "@docusaurus/Link";
 import React from "react";
 import Avatar from "./Avatar";
 
-
-
 export function Distinction({ person }) {
   if (person.distinctionTitle.length !== 0) {
     return (
@@ -33,10 +31,20 @@ export default function LargePortraitCard({ person }) {
       <div className={"container"}>
         <div className={"row padding-none"}>
           <div className="col col--12 col--offset-1">
-            <div className={styles.large_card_complete_name}>
+            <div
+              className={
+                styles.large_card_complete_name
+              }
+            >
               {person.completeName}
             </div>
-            <div className={styles.large_card_position}>{person.position}</div>
+            <div
+              className={
+                styles.large_card_position
+              }
+            >
+              {person.position}
+            </div>
           </div>
         </div>
         <div className="row">
diff --git a/src/components/about/styles.module.css b/src/components/about/styles.module.css
index 67ea87837..73371c7ea 100644
--- a/src/components/about/styles.module.css
+++ b/src/components/about/styles.module.css
@@ -27,7 +27,7 @@ div .row {
 
 .bio_container {
   font-family: var(--ifm-font-family-roboto);
-  font-size: 16px;
+  font-size: 14px;
   font-style: normal;
   font-weight: 400;
   line-height: 24px;
@@ -59,14 +59,15 @@ div .row {
 
 .large_card_complete_name {
   font-family: var(--ifm-font-family-roboto);
-  font-size: 32px;
+  font-size: 28px;
   color: var(---ifm-text-color);
   font-style: normal;
   font-weight: 400;
   line-height: 40px;
   color: var(--ifm-color-primary-p2);
-}
-s .large_card_position {
+}cg
+
+.large_card_position {
   font-size: var(--ifm--font-size-normal);
   font-family: var(--ifm-font-family-roboto);
   color: var(--ifm-color-primary-p2);
@@ -76,6 +77,9 @@ s .large_card_position {
   letter-spacing: 0.5px;
 }
 
+
+
+
 a {
   color: var(--ifm-color-primary-p2);
 }
@@ -160,6 +164,14 @@ div .join_the_team_text {
     line-height: 150%;
     text-align: center;
   }
+
+  .large_card_complete_name {
+    text-align: center;
+  }
+
+  .large_card_position {
+    text-align: center;
+  }
 }
 
 @media only screen and (min-width: 996px) {
diff --git a/src/components/home/Hero/index.tsx b/src/components/home/Hero/index.tsx
index ffcf95301..fd68534b0 100644
--- a/src/components/home/Hero/index.tsx
+++ b/src/components/home/Hero/index.tsx
@@ -28,9 +28,11 @@ export function Hero() {
                 styles.astronaut_column
               }
             >
-              <div className={styles.astronaut_container}>
-                <Astronaut alt={"Astronaut mascot of QuantStack"} />
-              </div>
+              <Astronaut
+                alt={"Astronaut mascot of QuantStack"}
+                width={"300px"}
+                height={"300px"}
+              />
             </div>
           </div>
         </div>