diff --git a/app/(pages)/(index-page)/_components/Everyone/Everyone.tsx b/app/(pages)/(index-page)/_components/Everyone/Everyone.tsx
index 30690532..deeed4d5 100644
--- a/app/(pages)/(index-page)/_components/Everyone/Everyone.tsx
+++ b/app/(pages)/(index-page)/_components/Everyone/Everyone.tsx
@@ -1,5 +1,6 @@
 import styles from './Everyone.module.scss';
 import React from 'react';
+import AutoImage from '@components/AutoImage/AutoImage';
 
 const Everyone = () => {
   return (
@@ -14,10 +15,13 @@ const Everyone = () => {
         previous experience required.
       </p>
       <div className={styles['cowsit']}>
-        <img src="/index/Everyone/cowsit.png" alt="cowsit" />
+        <AutoImage src="/index/Everyone/cowsit.png" alt="cowsit" />
       </div>
       <div className={styles['top-leaf']}>
-        <img src="/index/Everyone/river_rightside-combined.png" alt="topleaf" />
+        <AutoImage
+          src="/index/Everyone/river_rightside-combined.png"
+          alt="topleaf"
+        />
       </div>
       <div className={styles['bottom-leaf']}></div>
     </div>
diff --git a/app/(pages)/(index-page)/_components/Landing/_components/Form/Form.tsx b/app/(pages)/(index-page)/_components/Landing/_components/Form/Form.tsx
index 677bd77b..39750042 100644
--- a/app/(pages)/(index-page)/_components/Landing/_components/Form/Form.tsx
+++ b/app/(pages)/(index-page)/_components/Landing/_components/Form/Form.tsx
@@ -1,7 +1,7 @@
 import styles from './Form.module.scss';
 import { CiCalendar } from 'react-icons/ci';
 import WordCycle from './_components/WordCycle';
-import Link from 'next/link';
+// import Link from 'next/link';
 
 export default function Form() {
   return (
diff --git a/app/(pages)/_components/AutoImage/AutoImage.tsx b/app/(pages)/_components/AutoImage/AutoImage.tsx
new file mode 100644
index 00000000..0b79a561
--- /dev/null
+++ b/app/(pages)/_components/AutoImage/AutoImage.tsx
@@ -0,0 +1,27 @@
+import Image from 'next/image';
+
+export default function AutoImage({
+  height: _,
+  width: __,
+  src,
+  alt,
+  style,
+  ...rest
+}: {
+  height?: number;
+  width?: number;
+  src: string;
+  alt: string;
+  style?: object;
+}) {
+  return (
+    <Image
+      src={src}
+      height={4000}
+      width={4000}
+      alt={alt}
+      {...rest}
+      style={style ?? { width: '100%', height: 'auto' }}
+    />
+  );
+}
diff --git a/app/(pages)/about-us/_components/About/About.tsx b/app/(pages)/about-us/_components/About/About.tsx
index 06aac630..7bc53cd2 100644
--- a/app/(pages)/about-us/_components/About/About.tsx
+++ b/app/(pages)/about-us/_components/About/About.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import styles from './About.module.scss'; // The name of your CSS module file
+import AutoImage from '@components/AutoImage/AutoImage';
 
 const About = () => {
   return (
@@ -13,7 +14,7 @@ const About = () => {
             grow in an inclusive environment.
           </div>
           <div className={styles.inclusivity_cow}>
-            <img
+            <AutoImage
               src="/about-us-icon/cow.svg"
               alt="Cow"
               style={{
@@ -35,7 +36,7 @@ const About = () => {
             experience and an opportunity to explore a new discipline.
           </div>
           <div className={styles.Handson_froggy}>
-            <img src="/about-us-icon/froggy.svg" alt="Froggy" />
+            <AutoImage src="/about-us-icon/froggy.svg" alt="Froggy" />
           </div>
         </div>
         <div className={styles.Impactful}>
@@ -45,7 +46,7 @@ const About = () => {
             local and global communities.
           </div>
           <div className={styles.Impactful_bunny}>
-            <img src="/about-us-icon/bunny.svg" alt="Bunny" />
+            <AutoImage src="/about-us-icon/bunny.svg" alt="Bunny" />
           </div>
         </div>
       </div>
diff --git a/app/(pages)/about-us/_components/Hello/Hello.tsx b/app/(pages)/about-us/_components/Hello/Hello.tsx
index ae1017c0..b0ccad6b 100644
--- a/app/(pages)/about-us/_components/Hello/Hello.tsx
+++ b/app/(pages)/about-us/_components/Hello/Hello.tsx
@@ -1,5 +1,6 @@
 import styles from './Hello.module.scss';
 import React from 'react';
+import AutoImage from '@components/AutoImage/AutoImage';
 
 const Hello = () => {
   return (
@@ -12,7 +13,7 @@ const Hello = () => {
         </p>
       </header>
       <div className={styles['banner-image']}>
-        <img src="/about-us-icon/Banner image.svg" alt="Banner image" />
+        <AutoImage src="/about-us-icon/Banner image.svg" alt="Banner image" />
       </div>
     </div>
   );
diff --git a/app/(pages)/about-us/_components/Sponsor/Card.tsx b/app/(pages)/about-us/_components/Sponsor/Card.tsx
index b0d21031..c6db5f21 100644
--- a/app/(pages)/about-us/_components/Sponsor/Card.tsx
+++ b/app/(pages)/about-us/_components/Sponsor/Card.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import styles from './Sponsor.module.scss';
+import AutoImage from '@/app/(pages)/_components/AutoImage/AutoImage';
 
 type CardProps = {
   imageUrl: string;
@@ -17,12 +18,12 @@ const Card: React.FC<CardProps> = ({
   return (
     <div className={styles.card}>
       <div className={styles.frame}>
-        <img
+        <AutoImage
           src={frameImageUrl}
           alt="Polaroid frame"
           style={{ position: 'absolute', width: '100%', height: '100%' }}
         />
-        <img
+        <AutoImage
           src={imageUrl}
           alt={title}
           style={{ width: '100%', height: 'auto', position: 'relative' }}
diff --git a/app/(pages)/about-us/_components/Sponsor/Sponsor.tsx b/app/(pages)/about-us/_components/Sponsor/Sponsor.tsx
index 8dcc63db..53e7d912 100644
--- a/app/(pages)/about-us/_components/Sponsor/Sponsor.tsx
+++ b/app/(pages)/about-us/_components/Sponsor/Sponsor.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import styles from './Sponsor.module.scss';
 import Card from './Card';
+import AutoImage from '@components/AutoImage/AutoImage';
 
 const Sponsor = () => {
   const cards = [
@@ -70,7 +71,7 @@ const Sponsor = () => {
         <span className={styles['button-words']}>Sponsor 2024</span>
       </button>
       <div className={styles.cow_duck}>
-        <img
+        <AutoImage
           src="/about-us-icon/cow and duck.svg"
           alt="Cow and duck"
           style={{