diff --git a/public/carson.webp b/public/carson.webp
new file mode 100644
index 0000000..adf13fa
Binary files /dev/null and b/public/carson.webp differ
diff --git a/src/Assets/Fonts/Poppins-Regular.ttf b/src/Assets/Fonts/Poppins-Regular.ttf
new file mode 100644
index 0000000..9f0c71b
Binary files /dev/null and b/src/Assets/Fonts/Poppins-Regular.ttf differ
diff --git a/src/Components/About/About.scss b/src/Components/About/About.scss
index 8d3f9f0..136adc7 100644
--- a/src/Components/About/About.scss
+++ b/src/Components/About/About.scss
@@ -9,15 +9,18 @@ $font-color: #a2aa94;
 $hover-color: #ced4da;
 $box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
 $border-radius: 8px;
-
 $language-item-tint: darken($list-item-color, 30%);
 $framework-item-tint: darken($list-item-color, 35%);
 $tools-item-tint: darken($list-item-color, 40%);
 
-@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');
+@font-face {
+  font-family: 'Poppins';
+  src: url('../../Assets/Fonts/Poppins-Regular.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+}
 
 .AboutContainer {
-  font-family: 'Poppins', sans-serif;
   width: auto;
   padding: 20px;
 }
@@ -34,18 +37,25 @@ $tools-item-tint: darken($list-item-color, 40%);
   font-size: 1rem;
   line-height: 1.4;
   color: $secondary-color;
-  background-color: #17201bc3;
+  background-color: rgba(darken($background-color, 10%), 0.25);
   border-radius: $border-radius;
   margin-left: 20px;
 }
 
 .AboutText {
+  font-family: 'Poppins', sans-serif;
   font-size: 1.8em;
   font-weight: 400;
   color: lighten($font-color, 30%);
   padding: 0px 40px 0px 30px; /* top, right, bottom, left */
 }
 
+.AboutImage {
+  width: 45%;
+  border-radius: $border-radius;
+  box-shadow: $box-shadow;
+}
+
 @media screen and (max-width: 768px) {
   .AboutContentContainer {
     flex-direction: column;
diff --git a/src/Components/About/About.tsx b/src/Components/About/About.tsx
index 6446609..a31f5fd 100644
--- a/src/Components/About/About.tsx
+++ b/src/Components/About/About.tsx
@@ -72,13 +72,13 @@ const About: React.FC = () => {
           </p>
         </div>
 
-        <div className="AboutImageContainer">
-          <img
-            className="AboutImage"
-            src="https://avatars.githubusercontent.com/u/92652800?v=4"
-            alt="PlaceHolder"
-          />
-        </div>
+          <div className="AboutImageContainer">
+            <img
+              className="AboutImage"
+              src={`${process.env.PUBLIC_URL}/carson.webp`}
+              alt="PlaceHolder"
+            />
+          </div>
         </div>
     </div>
   );