diff --git a/public/aboutImage.webp b/public/aboutImage.webp
new file mode 100644
index 0000000..b6219a1
Binary files /dev/null and b/public/aboutImage.webp differ
diff --git a/public/carson.webp b/public/carson.webp
deleted file mode 100644
index adf13fa..0000000
Binary files a/public/carson.webp and /dev/null differ
diff --git a/src/Components/About/About.scss b/src/Components/About/About.scss
index 136adc7..b4d8f5d 100644
--- a/src/Components/About/About.scss
+++ b/src/Components/About/About.scss
@@ -22,7 +22,8 @@ $tools-item-tint: darken($list-item-color, 40%);
 
 .AboutContainer {
   width: auto;
-  padding: 20px;
+  padding: 40px;
+  margin-top: 20px;
 }
 
 .AboutContentContainer {
@@ -39,7 +40,6 @@ $tools-item-tint: darken($list-item-color, 40%);
   color: $secondary-color;
   background-color: rgba(darken($background-color, 10%), 0.25);
   border-radius: $border-radius;
-  margin-left: 20px;
 }
 
 .AboutText {
@@ -50,12 +50,6 @@ $tools-item-tint: darken($list-item-color, 40%);
   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;
@@ -74,9 +68,6 @@ $tools-item-tint: darken($list-item-color, 40%);
     padding-right: 20px;
     text-align: center;
   }
-  .AboutContainer {
-    margin-right: 20px;
-  }
 }
 
 .hoverLink {
@@ -110,3 +101,26 @@ $tools-item-tint: darken($list-item-color, 40%);
   -webkit-text-fill-color: transparent;
   animation: gradientAnimation 5s ease infinite;
 }
+
+.AboutImageContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  margin: 0 auto;
+}
+
+.AboutImage {
+  width: 90%;
+  border-radius: $border-radius;
+  box-shadow: $box-shadow;
+}
+
+@media screen and (max-width: 768px) {
+  .AboutImage {
+    width: 100%;
+  }
+  .AboutImageContainer {
+    width: 90%;
+  }
+}
\ No newline at end of file
diff --git a/src/Components/About/About.tsx b/src/Components/About/About.tsx
index ea974b1..40795f8 100644
--- a/src/Components/About/About.tsx
+++ b/src/Components/About/About.tsx
@@ -72,13 +72,10 @@ const About: React.FC = () => {
           </p>
         </div>
 
-        {/*<div className="AboutImageContainer">
-          <img
-            className="AboutImage"
-            src={`${process.env.PUBLIC_URL}/carson.webp`}
-            alt="Carson"
-          />
-        </div>*/}
+        <div className='AboutImageContainer'>
+          <img className='AboutImage' 
+            src={`${process.env.PUBLIC_URL}/aboutImage.webp`} alt='At JACHacks' />
+        </div>
       </div>
     </div>
   );
diff --git a/src/Components/Experience/ExperienceTimeline.scss b/src/Components/Experience/ExperienceTimeline.scss
index 6cbdf40..2cb4073 100644
--- a/src/Components/Experience/ExperienceTimeline.scss
+++ b/src/Components/Experience/ExperienceTimeline.scss
@@ -20,6 +20,7 @@ $tools-item-tint: darken($list-item-color, 40%);
   padding: 2rem;
   max-width: 1900px;
   margin: 0 auto;
+  width: 90%;
   align-items: start;
 
   .category-containers {
@@ -68,9 +69,20 @@ $tools-item-tint: darken($list-item-color, 40%);
         }
 
         li:hover {
-          background-color: darken($background-color, 8%);
-          transform: scale(1.05);
+          cursor: default;
+          background: linear-gradient(
+            120deg,
+            $secondary-color,
+            darken($tertiary-color, 10%),
+            darken($list-item-color, 10%)
+          );
+          
+          background-size: 300% 300%;
+          animation: gradientAnimation 4s ease-in-out infinite;
+          transform: scale(1.04);
+          transition:  transform 0.3s ease-in-out;
         }
+        
       }
 
       @media (max-width: 768px) {
@@ -90,6 +102,18 @@ $tools-item-tint: darken($list-item-color, 40%);
   }
 }
 
+@keyframes gradientAnimation {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
 @media (max-width: 768px) {
   .experience-grid {
     grid-template-columns: 1fr;
diff --git a/src/Components/Projects/Projects.scss b/src/Components/Projects/Projects.scss
index 94abd0f..d324e35 100644
--- a/src/Components/Projects/Projects.scss
+++ b/src/Components/Projects/Projects.scss
@@ -10,16 +10,18 @@ a {
   text-decoration: none;
   color: $primary-color;
 }
-
 .ProjectsContainer {
   padding: 0px 20px;
   color: $text-color;
   display: grid;
   grid-template-columns: 1fr;
-  gap: 20px;
+  gap: 15px 55px;
   align-items: center;
   justify-content: center;
   min-height: 100vh;
+  width: 90%;
+  margin: 0 auto;
+  margin-bottom: 30px;
 
   @media (min-width: 768px) {
     grid-template-columns: repeat(2, 1fr);