diff --git a/src/Sections/Card.css b/src/Sections/Card.css
index d32d59aeff..c23f67032a 100644
--- a/src/Sections/Card.css
+++ b/src/Sections/Card.css
@@ -1,34 +1,113 @@
 .card {
-    width: 300px;
-    height: 200px;
-    background-color:white;
-    border-radius: 10px;
-    border-color: beige;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
-    padding: 20px;
-    text-align: center;
+  width: 200px; /* Default width */
+  height: 200px; /* Default height */
+  background-color: white;
+  border-radius: 10px;
+  border-color: beige;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  padding: 20px;
+  text-align: center;
+  transition: opacity 0.5s ease;
+  opacity: 0;
+}
+
+.card h2 {
+  margin-top: 0;
+  color: #333333;
+}
+
+.card p {
+  color: #666666;
+}
+
+.card:hover {
+  transform: scale(1.05);
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
+}
+
+.img {
+  width: 100%;
+  height: auto;
+  display: block;
+}
+
+
+
+  @media (max-width: 640px) {
+    .sm\:grid-cols-2 {
+      grid-template-columns: 1fr;
+    }
+  }
+  .card {
+    transition: opacity 0.5s ease;
+    opacity: 0;
   }
   
-  .card h2 {
-    margin-top: 0;
-    color: #333333;
+  .appear {
+    opacity: 1;
   }
   
-  .card p {
-    color: #666666;
+  
+
+
+@media screen and (max-width: 640px) {
+  .card {
+    width: 50%;
+    height:100px;
+    max-height: 100%;
+    padding:3px;
   }
-  .img {
+
+.card img {
     width: 100%;
     height: auto;
-    display: block;
+    max-height: 100%;
+    object-fit: contain;
+    padding-top: 12px;
   }
-  .card:hover {
-    transform: scale(1.05); 
-    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); 
+
+
+ .grid-container {
+  display: grid;
+  grid-template-columns: repeat(2, 3fr);
+  grid-gap:5px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
   }
-  @media (max-width: 640px) {
-    .sm\:grid-cols-1 {
-      grid-template-columns: 1fr;
-    }
+}
+@media screen and (max-width:440px) {
+  .card {
+    width: 100%;
+    height:50px;
+    max-height: 100%;
+    padding:3px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+.card img {
+    width: 100%;
+    height: auto;
+    max-height: 100%;
+    object-fit: contain;
+    padding-top:1px;
   }
+  .grid-container {
+    display: grid;
+    grid-template-columns: repeat(2,1fr);
+    grid-gap:1px;
   
+    }
+
+}
+@media screen and (min-width:650px) and (max-width:750px) {
+  .card img {
+    width: 100%;
+    height: auto;
+    object-fit: contain;
+    padding-top:8vh;
+  }
+}
\ No newline at end of file
diff --git a/src/Sections/Sponsors.tsx b/src/Sections/Sponsors.tsx
index ddb7bdd9b3..191fc8f686 100644
--- a/src/Sections/Sponsors.tsx
+++ b/src/Sections/Sponsors.tsx
@@ -1,31 +1,47 @@
-import "./Card.css";
-import devtron from "../images/devtron.png";
-import microsoft from "../images/microsoft.png";
-import tata from "../images/tata 1 mg.png";
-import epam from "../images/epam.png";
+import { useEffect, useRef, useState } from 'react';
+import './Card.css'; 
+import devtron from '../images/devtron.png';
+import microsoft from '../images/microsoft.png';
+import tata from'../images/tata 1 mg.png';
+import epam from '../images/epam.png';
+
 export const Sponsors = () => {
+  const [isVisible, setIsVisible] = useState(false);
+  const sponsorRef = useRef(null);
+
+  useEffect(() => {
+    const options = {
+      root: null,
+      rootMargin: '0px',
+      threshold: 0.5,
+    };
+
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        setIsVisible(entry.isIntersecting);
+      });
+    }, options);
+
+    if (sponsorRef.current) {
+      observer.observe(sponsorRef.current);
+    }
+
+    return () => {
+      if (sponsorRef.current) {
+        observer.unobserve(sponsorRef.current);
+      }
+    };
+  }, []);
+
   return (
     <div className="flex flex-col items-center justify-center bg-black w-screen">
       <div className="">
-        <h2
-          className="text-white text-3xl font-bold mb-20 text-center mt-[150px]"
-          id="sponsors"
-        >
-          Our Sponsors
-        </h2>
-        <div className="p-4 rounded-lg shadow-lg grid sm:grid-cols-1 md:grid-cols-2 gap-20">
-          <div className="card ease-in-out ">
-            <img src={devtron} className="img pt-8"></img>
-          </div>
-          <div className="card ease-in-out ">
-            <img src={microsoft} className="img pt-8"></img>
-          </div>
-          <div className="card ease-in-out ">
-            <img src={tata} className="img"></img>
-          </div>
-          <div className="card ease-in-out ">
-            <img src={epam} className="img h-36"></img>
-          </div>
+        <h2 className="text-white text-3xl font-bold mb-20 text-center mt-20" id="sponsors">Our Sponsors</h2>
+        <div className="p-4 rounded-lg shadow-lg grid sm:grid-cols-2 md:grid-cols-4 gap-20 grid-container" ref={sponsorRef}>
+          <div className={`card ease-in-out ${isVisible ? 'appear' : ''}`}><img src={devtron} className='img md:pt-12'></img></div>
+          <div className={`card ease-in-out ${isVisible ? 'appear' : ''}`}><img src={microsoft} className='img md:pt-12'></img></div>
+          <div className={`card ease-in-out ${isVisible ? 'appear' : ''}`}><img src={tata} className='img h-36 md:pt-4'></img></div>
+          <div className={`card ease-in-out ${isVisible ? 'appear' : ''}`}><img src={epam}  className='img h-36 md:pt-2'></img></div>
         </div>
       </div>
     </div>