diff --git a/index.html b/index.html
index ac9b5be0..f350c8d0 100644
--- a/index.html
+++ b/index.html
@@ -52,21 +52,6 @@
 
     <script defer type="module" src="/src/main.js"></script>
 
-    <link
-      rel="preload"
-      as="image"
-      href="/assets/images/hero/hero-resized.png"
-      type="image/png"
-      fetchpriority="high"
-    />
-
-    <link
-      rel="preload"
-      as="image"
-      href="/assets/images/hero/hero-illustration.png"
-      type="image/png"
-    />
-
     <!-- JSON-LD structured data -->
     <script type="application/ld+json">
       {
diff --git a/public/assets/images/hero/hero-illustration.png b/public/assets/images/hero/hero-illustration.png
deleted file mode 100644
index 3b7739df..00000000
Binary files a/public/assets/images/hero/hero-illustration.png and /dev/null differ
diff --git a/src/components/AccountPages/Banner.vue b/src/components/AccountPages/Banner.vue
index 2c044cea..484d9c91 100644
--- a/src/components/AccountPages/Banner.vue
+++ b/src/components/AccountPages/Banner.vue
@@ -62,7 +62,7 @@ const props = defineProps({
       <img
         :src="OrangeStar"
         class="absolute z-10"
-        alt="orange star"
+        alt=""
         :class="[
           isDesktop ? 'w-[70px] right-[8%] top-[23%]' : '',
           isTablet ? 'w-[60px] right-[8%] top-[25%]' : '',
@@ -73,7 +73,7 @@ const props = defineProps({
       <img
         :src="YellowStar"
         class="absolute z-10"
-        alt="yellow star"
+        alt=""
         :class="[
           isDesktop ? 'w-[65px] right-[40%] top-[15%]' : '',
           isTablet ? 'w-[60px] left-[75%] top-[20%]' : '',
@@ -84,7 +84,7 @@ const props = defineProps({
       <img
         :src="BlueStar"
         class="w-[65px] absolute z-10"
-        alt="blue star"
+        alt=""
         :class="[
           isDesktop ? 'w-[70px] left-[8%] top-[22%]' : '',
           isTablet ? 'left-[21%] top-[20%]' : '',
@@ -95,7 +95,7 @@ const props = defineProps({
       <img
         :src="Book"
         class="absolute z-10 rotate-[330deg]"
-        alt="book"
+        alt=""
         :class="[
           isDesktop ? 'left-[40%] top-[75%] rotate-[360deg]' : '',
           !isPageShort && isDesktop ? 'w-[60px]' : '',
@@ -109,7 +109,7 @@ const props = defineProps({
         :src="CarlImgPath"
         ref="imgRef"
         class="object-contain absolute left-[50%] translate-x-[-50%] top-[50%] translate-y-[-50%] z-10"
-        alt="Carl icon"
+        alt=""
         :class="[
           isDesktop
             ? 'top-[40%] max-h-[80vw] max-w-[80vw/3]'
@@ -127,7 +127,7 @@ const props = defineProps({
       <img
         :src="Bulb"
         class="absolute z-10 rotate-[20deg]"
-        alt="lightbulb"
+        alt=""
         :class="[
           isDesktop ? 'right-[10%] top-[70%]' : '',
           !isPageShort && isDesktop ? 'w-[55px]' : '',
@@ -140,7 +140,7 @@ const props = defineProps({
       <img
         :src="Glasses"
         class="absolute z-10"
-        alt="glasses"
+        alt=""
         :class="[
           isDesktop ? 'left-[13%] top-[68%]' : '',
           !isPageShort && isDesktop ? 'w-[60px]' : '',
diff --git a/src/pages/Home/Hero/Hero.vue b/src/pages/Home/Hero/Hero.vue
index f4659596..0016d54d 100644
--- a/src/pages/Home/Hero/Hero.vue
+++ b/src/pages/Home/Hero/Hero.vue
@@ -67,4 +67,26 @@ import YellowStar from '/assets/images/testimonials/star.svg';
 import Glasses from '/assets/images/impact/glasses.svg';
 import Book from '/assets/images/SignUpImg/books.png';
 import Bulb from '/assets/images/about-us/bulb.png';
+
+import { onMounted, onUnmounted } from 'vue';
+
+// Preload Hero image for Home Page only
+// To improve performance sitewide (vs always preloading assets in index.html)
+onMounted(() => {
+  const link = document.createElement('link');
+  link.id = 'hero-preload';
+  link.rel = 'preload';
+  link.as = 'image';
+  link.type = 'image/png';
+  link.href = '/assets/images/hero/hero-resized.png';
+  link.fetchPriority = 'high';
+  document.head.appendChild(link);
+});
+
+onUnmounted(() => {
+  const link = document.getElementById('hero-preload');
+  if (link) {
+    document.head.removeChild(link);
+  }
+});
 </script>
diff --git a/src/pages/OurProjects/Hero/Hero.vue b/src/pages/OurProjects/Hero/Hero.vue
deleted file mode 100644
index 2f0973b4..00000000
--- a/src/pages/OurProjects/Hero/Hero.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<script setup></script>
-
-<template>
-  <div class="flex justify-center my-40">
-    <div class="max-w-[85%] w-full overflow-hidden">
-      <div
-        class="w-full h-full flex justify-start mobile:flex-col mobile:items-center"
-      >
-        <div
-          class="flex flex-col justify-around items-center max-w-[510px] h-full gap-8 pb-5"
-        >
-          <h2
-            class="text-start font-poppins text-4.5xl tablet:text-[32px] mobile:text-[24px] mobile:text-center font-[400]"
-          >
-            Discover how we make education accessible
-          </h2>
-          <h4
-            class="text-left text-body-text-color font-poppins text-[20px] tablet:text-[16px] mobile:text-center font-[400]"
-          >
-            Our innovative technologies and educational initiatives provide fun
-            learning for blind and visually impaired individuals.
-          </h4>
-          <div class="flex justify-start w-full mobile:justify-center">
-            <a
-              href="#div_events"
-              class="font-poppins font-semibold px-9 py-4 border-[1.5px] border-[#0C0D0D] rounded-[8px] bg-primary-color hover:bg-[#0C587D] duration-300 text-base text-center text-[#fff] shadow-[3px_4px_0px_#0C0D0D]"
-            >
-              Explore our initiatives
-            </a>
-          </div>
-        </div>
-        <img
-          src="/assets/images/our-projects/header/banner.svg"
-          alt="Banner"
-          class="absolute -right-8 -z-10 w-[50rem] h-auto mobile:relative mobile:top-0 mobile:right-auto mobile:w-full mobile:h-auto"
-        />
-      </div>
-    </div>
-  </div>
-</template>
diff --git a/src/pages/OurProjects/OurProjects.vue b/src/pages/OurProjects/OurProjects.vue
index ef2a2d33..45279dfb 100644
--- a/src/pages/OurProjects/OurProjects.vue
+++ b/src/pages/OurProjects/OurProjects.vue
@@ -3,7 +3,6 @@
 import Header from '../../components/Header/Header.vue';
 import ScrollUpButton from '../../components/ScrollUpButton/ScrollUpButton.vue';
 import ProjectsInAction from './ProjectsInAction/ProjectsInAction.vue';
-import Hero from './Hero/Hero.vue';
 import ResearchTech from './ResearchTech/ResearchTech.vue';
 import HaveYouHeard from './Events/HaveYouHeard/HaveYouHeard.vue';
 import KatyYouthHacks from './Events/KatyYouthHacks/KatyYouthHacks.vue';
diff --git a/src/pages/OurProjects/ResearchTech/ResearchTech.vue b/src/pages/OurProjects/ResearchTech/ResearchTech.vue
index d00806f1..e680510d 100644
--- a/src/pages/OurProjects/ResearchTech/ResearchTech.vue
+++ b/src/pages/OurProjects/ResearchTech/ResearchTech.vue
@@ -66,17 +66,7 @@ const items2 = [
           id="div_about_us"
           class="flex flex-wrap justify-center gap-6 mt-[40px] tablet:mt-[72px] mb-[32px] w-full transition-all duration-500 ease-in-out"
         >
-          <div
-            v-for="(item, index) in items2"
-            :key="index"
-            class="flex transition-all duration-300 ease-in-out"
-            :class="{
-              'opacity-0 translate-y-4':
-                (smallScreen ? index >= 4 : index >= 8) && !showAll,
-              'opacity-100 translate-y-0':
-                showAll || (smallScreen ? index < 4 : index < 8),
-            }"
-          >
+          <div v-for="(item, index) in items2" :key="index" class="flex">
             <div class="flex flex-col w-full my-3">
               <div class="flex justify-center w-full">
                 <div class="px-4">