diff --git a/src/Pages/Home/Home.css b/src/Pages/Home/Home.css
index 7138d4c0a..ba0731805 100644
--- a/src/Pages/Home/Home.css
+++ b/src/Pages/Home/Home.css
@@ -79,3 +79,11 @@
     transform: scale(1.05) rotate(6deg) translateY(1.5rem);
   }
 }
+
+.hover-grow {
+  transition: transform 0.15s ease;
+}
+
+.hover-grow:hover {
+  transform: scale(1.05);
+}
diff --git a/src/Pages/Home/Home.js b/src/Pages/Home/Home.js
index a26bc10c8..9f9223f30 100755
--- a/src/Pages/Home/Home.js
+++ b/src/Pages/Home/Home.js
@@ -46,38 +46,43 @@ const Home = () => {
             href={part}
             target="_blank"
             rel="noopener noreferrer"
-            className="text-blue-400 underline"
+            className="text-blue-400 underline hover-grow"
           >
             {part}
           </a>
         );
       }
-
       return <span key={index}>{part}</span>;
     });
   }
 
   return (
-    <div className='flex flex-col min-h-[calc(100vh-86px)] z-[-200] bg-gradient-to-r from-gray-800 to-gray-600'>
+    <div className="flex flex-col min-h-[calc(100vh-86px)] z-[-200] bg-gradient-to-r from-gray-800 to-gray-600">
       <div className="flex flex-col flex-wrap items-center justify-center flex-1 h-full py-4 md:flex-row xl:my-0">
         <div className="flex flex-col items-center justify-center w-full p-4 overflow-y-hidden xl:w-2/5">
           <div className="flex flex-col mb-8 xl:ml-10">
             <h1
-              className={`slide-in-top my-4 text-3xl font-bold text-center text-white opacity-75 md:text-5xl xl:text-left${showAll ? ' show' : ''}`}>
+              className={`slide-in-top hover-grow my-4 text-3xl font-bold text-center text-white opacity-75 md:text-5xl xl:text-left${showAll ? ' show' : ''}`}>
               The Software and Computer Engineering Society
             </h1>
+
             <h3
-              className={`slide-in-right text-base text-gray-400 text-center xl:text-left md:text-2xl${showAll ? ' show' : ''}`}>
+              className={`slide-in-right hover-grow text-base text-gray-400 text-center xl:text-left md:text-2xl${showAll ? ' show' : ''}`}>
               SJSU's Largest Engineering Club
             </h3>
           </div>
-          <div
-            className={`slide-in-bottom flex justify-center space-x-3 slide-in-bottom${showAll ? ' show' : ''}`}>
+
+          <div className={`slide-in-bottom flex justify-center space-x-3${showAll ? ' show' : ''}`}>
             <a href="/about" rel="nofollow noreferrer" target="_blank">
-              <button className="btn btn-outline text-lg text-blue-400 hover:bg-blue-700 hover:!text-white">Learn More</button>
+              <button className="btn btn-outline text-lg text-blue-400 hover:bg-blue-700 hover:!text-white hover-grow">
+                Learn More
+              </button>
             </a>
+
             <a href="/register">
-              <button className="btn btn-outline text-lg btn-accent hover:!text-white">Join Us!</button>
+              <button className="btn btn-outline text-lg btn-accent hover:!text-white hover-grow">
+                Join Us!
+              </button>
             </a>
           </div>
         </div>
@@ -86,7 +91,7 @@ const Home = () => {
         <div className={`fade-in-img w-full h-full p-6 md:p-12 overflow-visible xl:w-3/5${showAll ? ' show' : ''}`}>
           <div className="relative max-w-max mx-auto">
             <img
-              className="w-full mx-auto transform md:w-4/5 rounded-xl shadow-2xl"
+              className="w-full mx-auto transform md:w-4/5 rounded-xl shadow-2xl hover-grow"
               src="https://raw.githubusercontent.com/thebeninator/Clark/refs/heads/add_comp_homepage/public/images/compressed2.jpg"
             />
             <div className={`absolute -top-2 -right-2 md:right-10 md:top-0 z-10 fade-scale-in${showMessage ? ' show' : ''}`}>
diff --git a/test/frontend/AboutPage.test.js b/test/frontend/AboutPage.test.js
index 7572b147a..28e2f2966 100644
--- a/test/frontend/AboutPage.test.js
+++ b/test/frontend/AboutPage.test.js
@@ -10,10 +10,10 @@ Enzyme.configure({ adapter: new Adapter() });
 
 describe('<AboutPage />', () => {
   global.IntersectionObserver = class IntersectionObserver {
-  constructor(callback) {
-    this.callback = callback;
-  }
-};
+    constructor(callback) {
+      this.callback = callback;
+    }
+  };
   const wrapper = mount(<AboutPage />);
 
   it('Should render the main heading', () => {