diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index e7fdae6..36a2358 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -19,6 +19,7 @@
         "leaflet": "^1.9.4",
         "lucide-react": "^0.453.0",
         "react": "^18.3.1",
+        "react-countup": "^6.5.3",
         "react-datepicker": "^7.4.0",
         "react-dom": "^18.3.1",
         "react-helmet": "^6.1.0",
@@ -26,6 +27,7 @@
         "react-leaflet": "^4.2.1",
         "react-responsive": "^10.0.0",
         "react-router-dom": "^6.26.2",
+        "react-visibility-sensor": "^5.1.1",
         "shadcn-ui": "^0.2.3",
         "sitemap": "^8.0.0",
         "socket.io-client": "^4.8.0",
@@ -3373,6 +3375,12 @@
         }
       }
     },
+    "node_modules/countup.js": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/countup.js/-/countup.js-2.8.0.tgz",
+      "integrity": "sha512-f7xEhX0awl4NOElHulrl4XRfKoNH3rB+qfNSZZyjSZhaAoUk6elvhH+MNxMmlmuUJ2/QNTWPSA7U4mNtIAKljQ==",
+      "license": "MIT"
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -6676,6 +6684,18 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-countup": {
+      "version": "6.5.3",
+      "resolved": "https://registry.npmjs.org/react-countup/-/react-countup-6.5.3.tgz",
+      "integrity": "sha512-udnqVQitxC7QWADSPDOxVWULkLvKUWrDapn5i53HE4DPRVgs+Y5rr4bo25qEl8jSh+0l2cToJgGMx+clxPM3+w==",
+      "license": "MIT",
+      "dependencies": {
+        "countup.js": "^2.8.0"
+      },
+      "peerDependencies": {
+        "react": ">= 16.3.0"
+      }
+    },
     "node_modules/react-datepicker": {
       "version": "7.5.0",
       "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-7.5.0.tgz",
@@ -6848,6 +6868,19 @@
         "react": "^16.3.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/react-visibility-sensor": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/react-visibility-sensor/-/react-visibility-sensor-5.1.1.tgz",
+      "integrity": "sha512-cTUHqIK+zDYpeK19rzW6zF9YfT4486TIgizZW53wEZ+/GPBbK7cNS0EHyJVyHYacwFEvvHLEKfgJndbemWhB/w==",
+      "license": "MIT",
+      "dependencies": {
+        "prop-types": "^15.7.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.0.0",
+        "react-dom": ">=16.0.0"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index e61c06d..808019b 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -22,6 +22,7 @@
     "leaflet": "^1.9.4",
     "lucide-react": "^0.453.0",
     "react": "^18.3.1",
+    "react-countup": "^6.5.3",
     "react-datepicker": "^7.4.0",
     "react-dom": "^18.3.1",
     "react-helmet": "^6.1.0",
@@ -29,6 +30,7 @@
     "react-leaflet": "^4.2.1",
     "react-responsive": "^10.0.0",
     "react-router-dom": "^6.26.2",
+    "react-visibility-sensor": "^5.1.1",
     "shadcn-ui": "^0.2.3",
     "sitemap": "^8.0.0",
     "socket.io-client": "^4.8.0",
diff --git a/frontend/src/Pages/AboutUs.jsx b/frontend/src/Pages/AboutUs.jsx
index 521f558..ff8d56a 100644
--- a/frontend/src/Pages/AboutUs.jsx
+++ b/frontend/src/Pages/AboutUs.jsx
@@ -2,6 +2,7 @@ import React from 'react'; // Importing React
 import { useNavigate } from 'react-router-dom'; // Importing navigation function
 import backicon from '../assets/svg/backicon.svg'; // Importing back icon asset
 import TeamSection from '../components/TeamSection';
+import Stats from '../components/Stats';
 // About component
 const AboutUs = () => {
   // UseNavigate hook for navigation
@@ -112,6 +113,10 @@ const AboutUs = () => {
 </div>
 
 
+<div className="bg-white p-4 rounded-lg shadow-md max-w-5xl mx-auto mb-12">
+<h2 className="text-center text-3xl font-bold text-blue-600 mb-4">Our Stats</h2>
+<Stats/>
+</div>
       {/* Meet the Team Section */}
       <section className="text-center mb-12 max-w-5xl mx-auto">
         
diff --git a/frontend/src/components/Stats.css b/frontend/src/components/Stats.css
new file mode 100644
index 0000000..7ddecf0
--- /dev/null
+++ b/frontend/src/components/Stats.css
@@ -0,0 +1,40 @@
+
+
+.stats-section {
+    display: flex; /* Keep items in a single row */
+    justify-content: space-between; /* Space items evenly */
+    padding: 20px;
+}
+
+.stat-item {
+    text-align: center; /* Center content within each item */
+    flex: 1 1 45%; /* Allow items to take 45% of the row space */
+    margin: 10px; /* Add margin for spacing */
+}
+
+.stat-number {
+    font-size: 2rem; /* Default size for numbers */
+    font-weight: 600;
+}
+
+.stat-title {
+    margin-top: 10px;
+    font-size: 1rem; /* Default size for titles */
+    color: #555;
+}
+
+/* Responsive styles */
+@media (max-width: 768px) {
+    .stat-number {
+        font-size: 1rem; /* Reduced size for numbers on smaller screens */
+    }
+
+    .stat-title {
+        font-size: 0.75rem; /* Reduced size for titles on smaller screens */
+    }
+
+    .stats-section {
+        padding: 0px;
+    }
+    
+}
\ No newline at end of file
diff --git a/frontend/src/components/Stats.jsx b/frontend/src/components/Stats.jsx
new file mode 100644
index 0000000..8ccd15d
--- /dev/null
+++ b/frontend/src/components/Stats.jsx
@@ -0,0 +1,48 @@
+import React, { useState } from 'react';
+import CountUp from 'react-countup';
+import VisibilitySensor from 'react-visibility-sensor';
+import './Stats.css';
+
+const Stats = () => {
+    const [viewed, setViewed] = useState({
+        stationsCovered: false,
+        activeUsers: false,
+        totalBookings: false,
+        feedbackRatings: false,
+    });
+
+    return (
+        <div className='stats-section'>
+            <StatItem title="Stations Covered" end={200} viewed={viewed.stationsCovered} setViewed={() => setViewed(prev => ({ ...prev, stationsCovered: true }))} />
+            <StatItem title="Active Users" end={1500} viewed={viewed.activeUsers} setViewed={() => setViewed(prev => ({ ...prev, activeUsers: true }))} />
+            <StatItem title="Total Bookings" end={5000} viewed={viewed.totalBookings} setViewed={() => setViewed(prev => setViewed(prev => ({ ...prev, totalBookings: true })))} />
+            <StatItem title="Feedback Ratings" end={4.8} viewed={viewed.feedbackRatings} setViewed={() => setViewed(prev => ({ ...prev, feedbackRatings: true }))} />
+        </div>
+    );
+};
+
+const StatItem = ({ title, end, viewed, setViewed }) => (
+    <div className='stat-item'>
+        <VisibilitySensor partialVisibility offset={{ bottom: 200 }} onChange={isVisible => isVisible && setViewed()}>
+            {({ isVisible }) => (
+                <div className='stat-number'>
+                    {viewed || isVisible ? (
+                        // Use CountUp with a formatted decimal display
+                        <CountUp 
+                            start={0} 
+                            end={typeof end === 'number' && end % 1 !== 0 ? end : Math.floor(end)} 
+                            duration={3} 
+                            decimals={typeof end === 'number' && end % 1 !== 0 ? 1 : 0} 
+                            suffix={typeof end === 'number' && end % 1 !== 0 ? "" : "+"} 
+                        />
+                    ) : (
+                        end
+                    )}
+                </div>
+            )}
+        </VisibilitySensor>
+        <div className='stat-title '>{title}</div>
+    </div>
+);
+
+export default Stats;