diff --git a/index.html b/index.html
index 07accce0..7d53b024 100755
--- a/index.html
+++ b/index.html
@@ -123,12 +123,8 @@ <h1 class="display-3 text-center mb-5">Our Projects</h1>
                                 alt="ScholarX"
                             >
                             <p class="card-text text-darker text-center">ScholarX is an exclusive 6-month mentoring program
-                                aimed
-                                at a
-                                selected
-                                pool of undergraduate students based in Sri Lanka.</p>
-                            <h5 class="display-3 text-center project-stat">
-                                5000+</h5>
+                                aimed at a selected pool of undergraduate students based in Sri Lanka.</p>
+                            <h5 class="display-3 text-center project-stat" id="scholarx-stat">5000+</h5>
                             <p class="text-dark text-center stats">
                                 hours of mentoring provided via our ScholarX program
                             </p>
@@ -139,11 +135,8 @@ <h5 class="display-3 text-center project-stat">
                             <img src="assets/img/projects/irc.png" class="card-img-top project-img img-center" alt="IRC"
                             >
                             <p class="card-text text-darker text-center">The International Research Council (IRC) is a
-                                community
-                                created by
-                                SEF to
-                                showcase the work in various fields of Sri Lankan researchers.</p>
-                            <h5 class="display-3 text-center project-stat">100+</h5>
+                                community created by SEF to showcase the work in various fields of Sri Lankan researchers.</p>
+                            <h5 class="display-3 text-center project-stat" id="irc-stat">100+</h5>
                             <p class="text-dark text-center stats">
                                 researchers of Sri Lankan origin representing the world's top universities
                             </p>
@@ -155,11 +148,9 @@ <h5 class="display-3 text-center project-stat">100+</h5>
                                 class="card-img-top project-img img-center"
                                 alt="OneLive">
                             <p class="card-text text-darker text-center">"OneLive" is an interactive webinar series done
-                                every weekend with the
-                                experts in their fields to expand
-                                the knowledge of Sri Lankan students.
+                                every weekend with the experts in their fields to expand the knowledge of Sri Lankan students.
                             </p>
-                            <h5 class="display-3 text-center project-stat">275 000+</h5>
+                            <h5 class="display-3 text-center project-stat" id="onelive-stat">275 000+</h5>
                             <p class="text-dark text-center stats">
                                 students reached via our Onelive interactive webinar series
                             </p>
@@ -175,11 +166,9 @@ <h5 class="display-3 text-center project-stat">275 000+</h5>
                             <img src="assets/img/projects/academix.png" class="card-img-top project-img img-center"
                                  alt="Academix">
                             <p class="card-text text-darker text-center">AcadeMix aims to curate a collection of free
-                                education resources
-                                for Sri Lankan students to maximise their learning
+                                education resources for Sri Lankan students to maximise their learning
                                 potential from Primary through to Post Graduate education.</p>
-                            <h5 class="display-3 text-center project-stat">
-                                100+</h5>
+                            <h5 class="display-3 text-center project-stat" id="academix-stat">100+</h5>
                             <p class="text-dark text-center stats">
                                 free online resources to learn from home
                             </p>
@@ -193,21 +182,20 @@ <h5 class="display-3 text-center project-stat">
                                 <p class="card-text text-darker text-center project-card-p">A 12 week program aimed at creating a non-competitive safe 
                                     environment to develop English speaking skills for Sri Lankan undergraduates.
                                 </p>
-                            <h5 class="display-3 text-center project-stat">
-                                09</h5>
+                            <h5 class="display-3 text-center project-stat" id="upspeak-stat">09</h5>
                             <p class="text-dark text-center stats">
                                 students improved their English speaking skills</p>
                         </div>
                     </a>
-		    <a href="student-ambassador.html" class="card col-lg-4 shadow project-card">
+                    <!-- student-ambassador goes here -->
+                    <a href="student-ambassador.html" class="card col-lg-4 shadow project-card">
                         <div class="card-body">
                             <img src="assets/img/projects/sa.png" class="card-img-top project-img img-center"
                                  alt="Student Ambassador">
                             <p class="card-text text-darker text-center">Student Ambassadors (SA) of the Sustainable
                                 Education Foundation (SEF) will act as a liaison for SEF while also acting as an
-                                Evangelist for the Sustainable
-                                Education Foundation.</p>
-                            <h5 class="display-3 text-center project-stat">100+</h5>
+                                Evangelist for the Sustainable Education Foundation.</p>
+                            <h5 class="display-3 text-center project-stat" id="sa-stat">100+</h5>
                             <p class="text-dark text-center stats">
                                 students trained with soft skills required for the industry
                             </p>
@@ -538,4 +526,68 @@ <h5 class="name">Sanmugathasan Prasanthan</h5>
         )
     })
 </script>
+
+<script>
+    document.addEventListener("DOMContentLoaded", () => {
+        const counters = [
+            { id: "scholarx-stat", start: 0, end: 5000, duration: 2000 },
+            { id: "irc-stat", start: 0, end: 100, duration: 2000 },
+            { id: "onelive-stat", start: 0, end: 275000, duration: 2000 },
+            { id: "academix-stat", start: 0, end: 100, duration: 2000 },
+            { id: "upspeak-stat", start: 0, end: 9, duration: 2000 },
+            { id: "sa-stat", start: 0, end: 100, duration: 2000 }
+        ];
+
+        let observerOptions = {
+            root: null,
+            rootMargin: "0px",
+            threshold: 0.1
+        };
+
+        let observer = new IntersectionObserver((entries, observer) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    animateCounters();
+                    observer.unobserve(entry.target);
+                }
+            });
+        }, observerOptions);
+
+        observer.observe(document.getElementById("projects"));
+
+        function animateCounters() {
+            counters.forEach(counter => {
+                animateCounter(counter.id, counter.start, counter.end, counter.duration);
+            });
+        }
+
+        function animateCounter(id, start, end, duration) {
+            const element = document.getElementById(id);
+            let startTimestamp = null;
+
+            const step = (timestamp) => {
+                if (!startTimestamp) startTimestamp = timestamp;
+                const progress = Math.min((timestamp - startTimestamp) / duration, 1);
+                let value = Math.floor(progress * (end - start) + start);
+                if (id === 'upspeak-stat') {
+                    element.textContent = value.toString().padStart(2, '0');
+                } 
+                
+                else {
+                    element.textContent = value.toLocaleString();
+                    if (progress === 1) {
+                        element.textContent += "+";
+                    }
+                }
+                
+                if (progress < 1) {
+                    window.requestAnimationFrame(step);
+                }
+            };
+
+            window.requestAnimationFrame(step);
+        }
+    });
+</script>
+
 </html>
diff --git a/scholarx/past-programs/index.html b/scholarx/past-programs/index.html
index 2e04a74c..be25a77b 100644
--- a/scholarx/past-programs/index.html
+++ b/scholarx/past-programs/index.html
@@ -88,9 +88,8 @@ <h1 class="mb-0 text-onelive">Take a look at our past</h1>
                 <p class="display-3 text-onelive font-weight-bolder">ScholarX</p>
             </div>
         </div>
-        <div class="card-deck">
-            <div class="row">
-              <a href="2022" class="card col-md-4 shadow archive-card">
+        <div class="scholarx-card-deck">
+              <a href="2022" class="scholarx-card">
                 <img src="images/card-image.jpg" class="card-img card-template rounded-top25px" alt="2020">
                 <div class="card-body">
                   <h5 class="card-title">ScholarX 2022</h5>
@@ -98,7 +97,7 @@ <h5 class="card-title">ScholarX 2022</h5>
                     We’re thrilled to have made a positive impact on so many individuals and look forward to continuing our mission.</p>
                 </div>
               </a>
-              <a href="2021" class="card col-md-4 shadow archive-card">
+              <a href="2021" class="scholarx-card">
                 <img src="images/card-image.jpg" class="card-img card-template rounded-top25px" alt="2020">
                 <div class="card-body">
                   <h5 class="card-title">ScholarX 2021</h5>
@@ -106,7 +105,7 @@ <h5 class="card-title">ScholarX 2021</h5>
                     touching every corner of the country and many other countries</p>
                 </div>
               </a>
-              <a href="2020" class="card col-md-4 shadow archive-card">
+              <a href="2020" class="scholarx-card">
                 <img src="images/card-image.jpg" class="card-img card-template rounded-top25px" alt="2020">
                 <div class="card-body">
                   <h5 class="card-title">ScholarX 2020</h5>
@@ -115,9 +114,7 @@ <h5 class="card-title">ScholarX 2020</h5>
                   </p>
                 </div>
               </a>
-            </div>
-            <div class="row mt-md-4">
-              <a href="2019" class="card col-md-4 shadow archive-card">
+              <a href="2019" class="scholarx-card">
                 <img src="images/card-image.jpg" class="card-img card-template rounded-top25px" alt="2019">
                 <div class="card-body">
                   <h5 class="card-title">ScholarX 2019</h5>
@@ -126,9 +123,6 @@ <h5 class="card-title">ScholarX 2019</h5>
                   </p>
                 </div>
               </a>
-              <div class="col-md-4"></div>
-              <div class="col-md-4"></div>
-            </div>
         </div>
     </div>
 </section>
diff --git a/scholarx/past-programs/style.css b/scholarx/past-programs/style.css
index eb2581ba..3484563a 100644
--- a/scholarx/past-programs/style.css
+++ b/scholarx/past-programs/style.css
@@ -2,3 +2,74 @@
     height: 140px;
     object-fit: cover;
 }
+
+.scholarx-card-deck{
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    gap: 15px;
+}
+.scholarx-card-deck .scholarx-card{
+    width: calc(100%/3 - 10px) !important;
+    display: flex;
+    flex-direction: column;
+    box-shadow: 0 15px 35px rgba(50, 50, 93, .1), 0 5px 15px rgba(0, 0, 0, .07) !important;
+    border-radius: 25px;
+    min-height: 325px;
+}
+
+.scholarx-card-deck .scholarx-card .card-img{
+    border-top-left-radius: 25px;
+    border-top-right-radius: 25px;
+    height: 100px;
+    object-fit: cover;
+    width: 100%;
+    border-bottom: 1px solid #f1f1f1;
+}
+
+.scholarx-card-deck .scholarx-card .card-body{
+    padding: 0 !important;
+    display: flex;
+    flex-direction: column;
+    padding: 20px !important;
+    gap: 10px;
+
+}
+
+.scholarx-card-deck .scholarx-card .card-body .card-title{
+    font-size: 1.3rem;
+    font-weight: 600;
+    color: #333;
+    margin-bottom: 0;
+}
+
+.scholarx-card-deck .scholarx-card .card-body .card-text{
+    font-size: 0.9rem;
+    color: #666;
+    margin-bottom: 0;
+}
+
+@media (max-width: 768px) {
+    .scholarx-card-deck .scholarx-card{
+        width: calc(100%/2 - 15px/2) !important;
+        gap: 0;
+    }
+
+    .scholarx-card-deck .scholarx-card .card-img{
+        height: 100px;
+    }
+
+    .scholarx-card-deck .scholarx-card .card-body .card-title{
+        font-size: 1.2rem;
+    }
+
+    .scholarx-card-deck .scholarx-card .card-body .card-text{
+        font-size: 0.85rem;
+    }
+}
+
+@media (max-width: 494px) {
+    .scholarx-card-deck .scholarx-card{
+        width: 100% !important;
+    }
+}