diff --git a/index.html b/index.html
index 1951551d..9306ae0a 100644
--- a/index.html
+++ b/index.html
@@ -2,8 +2,13 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link id="dynamic" rel="icon" type="image/svg+xml" href="favicons/favicon1.svg" />
-    <link href="./src/styles/globals.css" rel="stylesheet">
+    <link
+      id="dynamic"
+      rel="icon"
+      type="image/svg+xml"
+      href="favicons/favicon1.svg"
+    />
+    <link href="./src/styles/globals.css" rel="stylesheet" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>SugarLabs</title>
     <script src="./Randomfavicon.js" crossorigin="anonymous"></script>
diff --git a/src/components/Info.tsx b/src/components/Info.tsx
index afe04d2d..19bbab02 100644
--- a/src/components/Info.tsx
+++ b/src/components/Info.tsx
@@ -12,19 +12,22 @@ const Info: React.FC = () => {
     <div
       key={key}
       className="group relative rounded-3xl overflow-hidden shadow-lg hover:shadow-2xl 
-                 transition-all duration-500 bg-white"
+			transition-all duration-500 bg-white"
     >
       <img
         src={image.src}
         alt={image.alt}
         className="w-full max-h-80 md:h-96 object-cover transform group-hover:scale-105 
-                   transition-all duration-700 ease-out"
+				transition-all duration-700 ease-out"
         loading="lazy"
+        width={800}
+        height={600}
+        decoding="async"
       />
       {image.caption && (
         <div
           className="absolute bottom-0 inset-x-0 bg-gradient-to-t from-black/90 
-                       to-transparent p-4 md:p-8"
+											 to-transparent p-4 md:p-8"
         >
           <p className="text-white font-medium text-lg md:text-xl">
             {image.caption}
@@ -41,11 +44,14 @@ const Info: React.FC = () => {
         alt={image.alt}
         className="w-full h-64 object-cover"
         loading="lazy"
+        width={800}
+        height={600}
+        decoding="async"
       />
       {image.caption && (
         <div
           className="absolute bottom-0 inset-x-0 bg-gradient-to-t from-black/90 
-                       to-transparent p-4"
+												to-transparent p-4"
         >
           <p className="text-white font-normal text-base">{image.caption}</p>
         </div>
@@ -61,31 +67,35 @@ const Info: React.FC = () => {
           <section className="container mx-auto px-4 py-8 max-w-7xl">
             <div
               className="relative mb-8 rounded-3xl overflow-hidden shadow-2xl 
-                         transform hover:scale-[1.01] transition-all duration-500 
-                         ease-out bg-white"
+													transform hover:scale-[1.01] transition-all duration-500 
+													ease-out bg-white"
             >
               <img
                 src={images.main.src}
                 alt={images.main.alt}
                 className="w-full h-[500px] md:h-[700px] object-cover"
+                width={1920}
+                height={700}
+                loading="eager"
+                fetchPriority="high"
               />
               <div
                 className="absolute inset-0 bg-gradient-to-r from-black/70 
-                           via-black/50 to-transparent"
+														via-black/50 to-transparent"
               />
               <div
                 className="absolute top-1/2 left-2 md:left-12 transform -translate-y-1/2 
-                           text-white max-w-2xl"
+														text-white max-w-2xl"
               >
                 <h1
                   className="text-5xl md:text-7xl lg:text-8xl font-black mb-6 md:mb-8 
-                           leading-tight tracking-tight animate-fade-in font-display"
+														leading-tight tracking-tight animate-fade-in font-display"
                 >
                   {heroContent.title}
                 </h1>
                 <p
                   className="text-lg md:text-xl lg:text-2xl leading-relaxed opacity-90 
-                           animate-fade-in-delayed font-light"
+														animate-fade-in-delayed font-light"
                 >
                   {heroContent.description}
                 </p>
@@ -125,18 +135,18 @@ const Info: React.FC = () => {
             <div className="space-y-8 md:space-y-10">
               <div
                 className="inline-block px-4 md:px-6 py-2 md:py-3 bg-gradient-to-r 
-                           from-red-500/10 to-orange-500/10 rounded-full"
+														from-red-500/10 to-orange-500/10 rounded-full"
               >
                 <span
                   className="text-4xs md:text-sm font-bold text-red-600 tracking-wider 
-                             uppercase"
+															uppercase"
                 >
                   Empowering Young Learners
                 </span>
               </div>
               <h2
                 className="text-4xl md:text-5xl lg:text-6xl font-black space-y-2 
-                           font-display tracking-tight"
+														font-display tracking-tight"
               >
                 <span className=" font-bold tracking-wider font-Caveat text-8xl">
                   Our Mission?
@@ -144,7 +154,7 @@ const Info: React.FC = () => {
                 <div>
                   <div
                     className="text-transparent bg-clip-text bg-gradient-to-r 
-                                from-red-500 to-orange-500 font-Caveat text-8xl"
+																from-red-500 to-orange-500 font-Caveat text-8xl"
                   >
                     Authentic
                   </div>
@@ -168,10 +178,10 @@ const Info: React.FC = () => {
               <div className="  bg-auto rounded-2xl overflow-hidden shadow-xl">
                 {/* Card on Top Left */}
                 <div
-                  className="absolute top-2 left-2 md:top-2 md:left-2 bg-auto
-                      backdrop-blur-sm rounded-xl p-4 md:p-6 shadow-lg 
-                      max-w-xs md:max-w-sm transform hover:scale-105 
-                      transition-all duration-300 ease-out z-10 border-2 border-white"
+                  className="absolute top-2 left-2 md:top-2 md:left-2 bg-auto 
+															backdrop-blur-sm rounded-xl p-4 md:p-6 shadow-lg
+															max-w-xs md:max-w-sm transform hover:scale-105 
+															transition-all duration-300 ease-out z-10 border-2 border-white"
                 >
                   <h3 className="text-lg md:text-xl font-bold mb-1 md:mb-2n text-gray-900 font-AnonymousPro">
                     Project Based Learning
@@ -188,16 +198,19 @@ const Info: React.FC = () => {
                   src={mission.learnImage}
                   alt="Students learning"
                   className="w-full rounded-2xl transform hover:scale-105 
-                   transition-all duration-500 ease-out"
+										transition-all duration-500"
                   loading="lazy"
+                  width={800}
+                  height={600}
+                  //decoding="async"
                 />
 
                 {/* Card on Bottom Right */}
                 <div
-                  className="absolute bottom-4 right-4 md:bottom-2 md:right-2 bg-auto
-                      backdrop-blur-sm rounded-xl p-4 md:p-6 shadow-lg 
-                      max-w-xs md:max-w-sm transform hover:scale-105 
-                      transition-all duration-300 ease-out z-10 border-2 border-white"
+                  className="absolute bottom-4 right-4 md:bottom-2 md:right-2 bg-auto 
+												backdrop-blur-sm rounded-xl p-4 md:p-6 shadow-lg 
+												max-w-xs md:max-w-sm transform hover:scale-105 
+												transition-all duration-300 ease-out z-10 border-2 border-white"
                 >
                   <h3 className="text-md md:text-lg font-bold mb-1 md:mb-2 text-amber-100 font-AnonymousPro">
                     Challenge and Fun: It's hard fun.
diff --git a/src/components/Stats.tsx b/src/components/Stats.tsx
index 2c4451d1..0ef79ce1 100644
--- a/src/components/Stats.tsx
+++ b/src/components/Stats.tsx
@@ -42,6 +42,9 @@ const Stats = () => {
                 src={stats.kidlaptop}
                 alt="Student with laptop"
                 className="w-full h-48 md:h-64 object-cover rounded-lg"
+                width={800}
+                height={600}
+                decoding="async"
               />
             </div>
 
@@ -61,6 +64,10 @@ const Stats = () => {
                 src={stats.studentsCollaborating}
                 alt="Students collaborating"
                 className="w h-36 object-cover rounded-lg"
+                loading="lazy"
+                width={400}
+                height={300}
+                decoding="async"
               />
             </div>
 
@@ -78,6 +85,10 @@ const Stats = () => {
                 src={stats.studentMobile}
                 alt="Student with mobile device"
                 className="w h-36 object-cover rounded-lg"
+                loading="lazy"
+                width={400}
+                height={300}
+                decoding="async"
               />
             </div>
 
diff --git a/src/components/TryCard.tsx b/src/components/TryCard.tsx
index ad575dc5..dd6fc2a8 100644
--- a/src/components/TryCard.tsx
+++ b/src/components/TryCard.tsx
@@ -27,7 +27,15 @@ export const ActivityCard: React.FC<ActivityCardProps> = ({
   href,
 }) => (
   <div className="bg-white rounded-3xl p-8 flex flex-col items-center text-center shadow-lg transition-transform hover:scale-105">
-    <img src={icon} alt={title} className="w-24 h-24 mb-4" />
+    <img
+      src={icon}
+      alt={title}
+      className="w-24 h-24 mb-4"
+      width={96}
+      height={96}
+      loading="lazy"
+      decoding="async"
+    />
     <h3 className="text-3xl font-bold mb-2">{title}</h3>
     <p className="text-gray-600 mb-6">{description}</p>
     <a href={href} className="w-full">
@@ -66,24 +74,24 @@ export const TryCard: React.FC<TryCardProps> = ({
         <div className="space-y-2.5 flex flex-col items-center pt-3">
           <a
             href={tryNowHref}
-            className={`w-full text-white font-bold px-5 py-3 rounded-2xl 
-                       transition-all duration-500 hover:scale-[1.02] hover:shadow-lg 
-                       active:scale-95 text-sm backdrop-blur-sm relative overflow-hidden
-                       ${gradientClass || 'bg-gradient-to-br from-blue-600 via-blue-700 to-blue-800'}
-                       before:absolute before:inset-0 before:bg-white/20 before:translate-x-[-150%] before:skew-x-[45deg]
-                       hover:before:translate-x-[150%] before:transition-transform before:duration-700
-                       `}
+            className={`w-full text-white font-bold px-5 py-3 rounded-2xl
+              transition-all duration-500 hover:scale-[1.02] hover:shadow-lg 
+              active:scale-95 text-sm backdrop-blur-sm relative overflow-hidden 
+              ${gradientClass || 'bg-gradient-to-br from-blue-600 via-blue-700 to-blue-800'} 
+              before:absolute before:inset-0 before:bg-white/20 before:translate-x-[-150%] before:skew-x-[45deg] 
+              hover:before:translate-x-[150%] before:transition-transform before:duration-700
+              `}
           >
             {tryNowText}
           </a>
           <a
             href={learnMoreHref}
             className="w-full bg-gray-50/80 backdrop-blur-sm border-[1.5px] border-gray-100 rounded-2xl px-5 py-3 
-                     font-bold transition-all duration-500 hover:scale-[1.02] 
-                     hover:bg-gray-100/80 hover:border-gray-200 text-gray-700 text-sm
-                     active:scale-95 relative overflow-hidden
-                     before:absolute before:inset-0 before:bg-gray-400/20 before:translate-x-[-150%] before:skew-x-[45deg]
-                     hover:before:translate-x-[150%] before:transition-transform before:duration-700"
+            font-bold transition-all duration-500 hover:scale-[1.02] 
+            hover:bg-gray-100/80 hover:border-gray-200 text-gray-700 text-sm
+            active:scale-95 relative overflow-hidden
+            before:absolute before:inset-0 before:bg-gray-400/20 before:translate-x-[-150%] before:skew-x-[45deg]
+            hover:before:translate-x-[150%] before:transition-transform before:duration-700"
           >
             {learnMoreText}
           </a>
@@ -91,13 +99,17 @@ export const TryCard: React.FC<TryCardProps> = ({
       </div>
 
       {/* Image Section */}
-      <div className="-mx-6 -mb-6 mt-6 relative overflow-hidden">
+      <div className="mx-auto mb-4 mt-6 relative overflow-hidden aspect-video">
         <div className="absolute inset-0 bg-gradient-to-b from-white via-white/50 to-transparent h-12 z-10" />
         <img
           src={imagePath}
           alt={title}
-          className="w-full h-48 object-cover transform transition-all duration-700 
-                     group-hover:scale-110 group-hover:rotate-1"
+          className="w-full h-full object-cover transform transition-all duration-700 
+          group-hover:scale-110 group-hover:rotate-1 !opacity-100"
+          width={800}
+          height={600}
+          loading="lazy"
+          decoding="async"
         />
         <div className="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent" />
       </div>
diff --git a/src/sections/Header.tsx b/src/sections/Header.tsx
index 7339d793..2293211e 100644
--- a/src/sections/Header.tsx
+++ b/src/sections/Header.tsx
@@ -59,6 +59,10 @@ const Header: React.FC = () => {
                 src={logo}
                 alt="Sugar Labs"
                 className="h-12 w-auto transition-transform hover:scale-105"
+                width={128}
+                height={48}
+                loading="eager"
+                fetchPriority="high"
               />
             </Link>
 
