diff --git a/src/App.jsx b/src/App.jsx
index e633c27..30c215c 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -25,6 +25,9 @@ import { Donationfront } from './pages/user/Donation/Donationfront/Donationfront
 import requestPermission from './utils/Functions/notifyService';
 import TeamPage from './pages/shared/team';
 import NotFound from './Components/shared/PageNotfound';
+import RecoveredsPage from './pages/user/RecoveredsPage/RecoveredsPage';
+import HappyRecoveriesPage from './pages/user/RecoveredsPage/HappyRecoveriesPage';
+
 /**
  * The main component of the application.
  * @returns {JSX.Element} The rendered App component.
@@ -65,6 +68,8 @@ function App() {
               <Route path="/ngoProfile" element={<NgoProfile />} />
               <Route path="/donationfront" element={<Donationfront />} />
               <Route path="/team" element={<TeamPage />} />
+              <Route path="/recovereds-page" element={<RecoveredsPage />} />
+              <Route path="/happy-recoveries" element={<HappyRecoveriesPage />} />
             </Routes>
           </NgoProvider>
         </UserProvider>
diff --git a/src/pages/user/RecoveredsPage/HappyRecoveriesPage.css b/src/pages/user/RecoveredsPage/HappyRecoveriesPage.css
new file mode 100644
index 0000000..2278894
--- /dev/null
+++ b/src/pages/user/RecoveredsPage/HappyRecoveriesPage.css
@@ -0,0 +1,134 @@
+.happy-recoveries-page {
+  background: url('../RecoveredsPage/images/bg2.png') no-repeat center center fixed;
+  background-size: cover;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  flex-direction: column;
+  padding: 20px;
+}
+
+.this-title {
+  font-size: 2.8rem;
+  font-weight: bold;
+  color: #0056AF;
+  margin: 40px 0 20px 0;
+  text-align: center;
+  overflow: hidden;
+  white-space: nowrap;
+  animation: typing 3s steps(40, end);
+}
+
+@keyframes typing {
+  from {
+    width: 0;
+  }
+  to {
+    width: 100%;
+  }
+}
+
+.cards {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+}
+
+.card {
+  margin-right: 80px;
+  margin-top: 50px;
+  margin-left: 80px;
+  width: 300px;
+  height: 350px;
+  border-radius: 10px;
+  box-shadow: 0 40px 60px -16px rgb(98, 98, 98);
+  overflow: hidden;
+  position: relative;
+}
+
+.card-title {
+  display: block;
+  text-align: center;
+  color: #fff;
+  background-color: #4582be;
+  padding: 2%;
+  border-top-right-radius: 4px;
+  border-top-left-radius: 4px;
+  background-image: linear-gradient(#37d9f2, #5fa1f2);
+  border: 0;
+  border-radius: 4px;
+  box-shadow: rgba(0, 0, 0, .3) 0 5px 15px;
+  box-sizing: border-box;
+  color: #fff;
+  cursor: pointer;
+  font-family: Montserrat,sans-serif;
+  font-size: 1.1em;
+  margin: 5px;
+  margin-bottom: 10px;
+  padding: 5px 5px;
+  text-align: center;
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: manipulation;
+}
+
+.card img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+  position: relative;
+  border-radius: 10px;
+}
+
+.card-desc {
+  display: block;
+  font-size: 1rem;
+  position: absolute;
+  height: 0;
+  top: 0;
+  opacity: 0;
+  padding: 18px 8%;
+  background-color: white;
+  overflow-y: scroll;
+  transition: 0.8s ease;
+}
+
+.card:hover .card-desc {
+  opacity: 1;
+  height: 100%;
+}
+
+.rescuer-info {
+  display: flex;
+  align-items: center;
+  margin-top: 10px;
+}
+
+.rescuer-info .rescuer-photo {
+  width: 50px; 
+  height: 50px;
+  border-radius: 50%;
+  margin-right: 10px;
+}
+
+.rescuer-info .rescuer-name {
+  font-size: 1rem;
+}
+
+.read-more-link {
+  text-align: center;
+  margin-top: 20px;
+}
+
+.read-more-link a {
+  color: #3498db;
+  text-decoration: none;
+  font-size: 1.1em;
+}
+
+.read-more-link a:hover {
+  text-decoration: underline;
+}
diff --git a/src/pages/user/RecoveredsPage/HappyRecoveriesPage.jsx b/src/pages/user/RecoveredsPage/HappyRecoveriesPage.jsx
new file mode 100644
index 0000000..023a16b
--- /dev/null
+++ b/src/pages/user/RecoveredsPage/HappyRecoveriesPage.jsx
@@ -0,0 +1,88 @@
+import React from 'react';
+import './HappyRecoveriesPage.css';
+
+const HappyRecoveriesPage = () => {
+  const recoveredAnimals = [
+    {
+      name: 'Buddy',
+      recoveryDetails: 'Buddy, the dog, was rescued by one of our dedicated rescuers. After being saved from a difficult situation, he found a loving family who adopted him and gave him a new life full of care and happiness.',
+      imageUrl: './src/pages/user/RecoveredsPage/images/buddy.PNG',
+      rescuer: {
+        name: 'Ms. Lobo',
+        photoUrl: './src/pages/user/RecoveredsPage/images/rescuer1.PNG',
+      },
+    },
+    {
+      name: 'Ash',
+      recoveryDetails: 'Ash, the cat rescued from a high-rise building by one of our dedicated rescuers and treated by Dr. Carol, now thrives in a loving foster home. Her journey from peril to safety is a testament to compassion and the promise of a brighter future for every rescued animal.',
+      imageUrl: './src/pages/user/RecoveredsPage/images/ash.PNG',
+      rescuer: {
+        name: 'Mr. Smith',
+        photoUrl: './src/pages/user/RecoveredsPage/images/rescuer2.PNG',
+      },
+    },
+    {
+      name: 'Kau',
+      recoveryDetails: 'Kau, a cow rescued by one of our rescuers, was found abandoned near a slaughterhouse. Nursed back to health with care and compassion, she was eventually adopted by a kind couple involved in agriculture, who provided her with a loving home on their farm.',
+      imageUrl: './src/pages/user/RecoveredsPage/images/kau.PNG',
+      rescuer: {
+        name: 'Dr. Carol',
+        photoUrl: './src/pages/user/RecoveredsPage/images/rescuer3.jpg',
+      },
+    },
+    {
+      name: 'Cherry',
+      recoveryDetails: 'Cherry, the horse, was found injured and in need of help by one of our rescuers. Thanks to the dedicated care of Dr. Carol, Cherry was nursed back to health. She found a new home with a compassionate family involved in agriculture, where she now thrives and enjoys a life filled with care and comfort.',
+      imageUrl: './src/pages/user/RecoveredsPage/images/cherry.PNG',
+      rescuer: {
+        name: 'Ms. Lobo',
+        photoUrl: './src/pages/user/RecoveredsPage/images/rescuer1.PNG',
+      },
+    },
+    {
+      name: 'Luna',
+      recoveryDetails: 'Luna, a dog abandoned and abused by her previous owners, was rescued by one of our dedicated rescuers. She received compassionate care and rehabilitation, thanks to the efforts of our brave hearts. Now, Luna has found a loving forever home where she is cherished and cared for, embodying the resilience and joy that come with a second chance at life.',
+      imageUrl: './src/pages/user/RecoveredsPage/images/luna.PNG',
+      rescuer: {
+        name: 'Mr. Smith',
+        photoUrl: './src/pages/user/RecoveredsPage/images/rescuer2.PNG',
+      },
+    },
+    {
+      name: 'Cotton',
+      recoveryDetails: 'Cotton, a rabbit needing care, was rescued by a dedicated rescuer. Found in a situation requiring attention, Cotton received compassionate care and nurturing. Now, in a safe and loving home, Cotton hops freely, embodying resilience and joy after receiving a second chance at life..',
+      imageUrl: './src/pages/user/RecoveredsPage/images/cotton.PNG',
+      rescuer: {
+        name: 'Dr. Carol',
+        photoUrl: './src/pages/user/RecoveredsPage/images/rescuer3.jpg',
+      },
+    },
+  ];
+
+  return (
+    <div className="happy-recoveries-page">
+      <h1 className="this-title">Happy Recoveries</h1>
+      <div className="cards">
+        {recoveredAnimals.map((animal, index) => (
+          <div key={index} className="card">
+            <img src={animal.imageUrl} alt={animal.name} />
+            <div className="card-desc">
+              <h2 className="card-title">{animal.name}</h2>
+              <p>{animal.species}</p>
+              <p>{animal.recoveryDetails}</p>
+              <div className="rescuer-info">
+                <img src={animal.rescuer.photoUrl} alt={animal.rescuer.name} className="rescuer-photo" />
+                <p className="rescuer-name">Rescued by: {animal.rescuer.name}</p>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+      <p className="read-more-link">
+        <a href="/recovereds-page">Our Rescuers</a>
+      </p>
+    </div>
+  );
+};
+
+export default HappyRecoveriesPage;
diff --git a/src/pages/user/RecoveredsPage/RecoveredsPage.css b/src/pages/user/RecoveredsPage/RecoveredsPage.css
new file mode 100644
index 0000000..ba0a5c0
--- /dev/null
+++ b/src/pages/user/RecoveredsPage/RecoveredsPage.css
@@ -0,0 +1,103 @@
+.recovereds-page {
+    background: url('../RecoveredsPage/images/background.png') no-repeat center center fixed;
+    background-size: cover;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  
+  .recovereds-container {
+    text-align: center;
+    width: 100%;
+    min-height: 100vh;
+    box-sizing: border-box;
+    margin-left: 300px;
+    margin-top: 100px;
+  }
+  
+  .title {
+    font-size: 3.5rem;
+    margin-bottom: 40px;
+    color: #0056AF;
+    font-weight: bold;
+    margin-left: 300px;
+    
+  }
+  
+  .rescuers {
+    display: flex;
+    justify-content: flex-end; 
+    flex-wrap: wrap;
+    gap: 150px;
+    margin-bottom: 40px;
+    margin-right: 50px;
+  }
+
+  .rescuer {
+    text-align: center;
+  }
+  
+  .rescuer-image {
+    width: 150px;
+    height: 150px;
+    border-radius: 20px;
+    border-right: 7px solid #0056AF;
+    border-bottom: 7px solid #0056AF;
+    object-fit: cover;
+    margin-bottom: 10px;
+    transition: all 0.2s ease-in-out;
+    cursor: pointer;
+  }
+
+  .rescuer-image:hover {
+    width: 150px;
+    height: 150px;
+    border-radius: 20px;
+    border-right: 7px solid #0056AF;
+    border-bottom: 7px solid #0056AF;
+    object-fit: cover;
+    margin-bottom: 10px;
+    transform: scale(1.07);
+  }
+  
+  .rescuer-details h2 {
+    font-size: 1.5rem;
+    margin-right: 30px;
+    color: #0056AF;
+  }
+  
+  .rescuer-details p {
+        font-size: 1.0rem;
+        color: #434343;
+        overflow: hidden; 
+        white-space: nowrap;
+        animation: typing 1s steps(20, end) forwards; 
+      }
+      
+      @keyframes typing {
+        from {
+          width: 0; 
+        }
+        to {
+          width: 100%;
+        }
+      }
+
+  .read-stories-link {
+    margin-top: 90px;
+    font-size: 1.0rem;
+    color: #434343;
+    margin-left: 300px;
+  }
+  
+  .read-stories-link a {
+    color: #007bff;
+    text-decoration: none;
+    
+  }
+  
+  .read-stories-link a:hover {
+    color: #0056b3;
+    text-decoration: underline;
+  }
+  
\ No newline at end of file
diff --git a/src/pages/user/RecoveredsPage/RecoveredsPage.jsx b/src/pages/user/RecoveredsPage/RecoveredsPage.jsx
new file mode 100644
index 0000000..0ab7596
--- /dev/null
+++ b/src/pages/user/RecoveredsPage/RecoveredsPage.jsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import './RecoveredsPage.css';
+
+const RecoveredsPage = () => {
+  // Define the data for rescuers
+  const rescuers = [
+    {
+      name: 'Ms. Lobo',
+      profileImage: 'src/pages/user/RecoveredsPage/images/rescuer1.PNG',
+      details: 'Saved 20+ lives',
+    },
+    {
+      name: 'Mr. Smith',
+      profileImage: 'src/pages/user/RecoveredsPage/images/rescuer2.PNG',
+      details: 'Rescued 10+ wilds',
+    },
+    {
+      name: 'Dr. Carol',
+      profileImage: 'src/pages/user/RecoveredsPage/images/rescuer3.jpg',
+      details: 'Healed several injureds',
+    },
+  ];
+
+  return (
+    <div className="recovereds-page">
+        <div className="recovereds-container">
+      <h1 className="title">Brave Hearts!</h1>
+      <div className="rescuers">
+        {rescuers.map((rescuer, index) => (
+          <div key={index} className="rescuer">
+            <img src={rescuer.profileImage} alt={rescuer.name} className="rescuer-image" />
+            <div className="rescuer-details">
+              <h2>{rescuer.name}</h2>
+              <p>{rescuer.details}</p>
+            </div>
+          </div>
+        ))}
+      </div>
+      <p className="read-stories-link">
+        Read <a href="/happy-recoveries">Happy Recovery Stories</a>
+      </p>
+    </div>
+    </div>
+  );
+};
+
+export default RecoveredsPage;
diff --git a/src/pages/user/RecoveredsPage/images/ash.PNG b/src/pages/user/RecoveredsPage/images/ash.PNG
new file mode 100644
index 0000000..b0c8ce4
Binary files /dev/null and b/src/pages/user/RecoveredsPage/images/ash.PNG differ
diff --git a/src/pages/user/RecoveredsPage/images/background.png b/src/pages/user/RecoveredsPage/images/background.png
new file mode 100644
index 0000000..d864961
Binary files /dev/null and b/src/pages/user/RecoveredsPage/images/background.png differ
diff --git a/src/pages/user/RecoveredsPage/images/bg2.png b/src/pages/user/RecoveredsPage/images/bg2.png
new file mode 100644
index 0000000..aee820f
Binary files /dev/null and b/src/pages/user/RecoveredsPage/images/bg2.png differ
diff --git a/src/pages/user/RecoveredsPage/images/buddy.PNG b/src/pages/user/RecoveredsPage/images/buddy.PNG
new file mode 100644
index 0000000..5726809
Binary files /dev/null and b/src/pages/user/RecoveredsPage/images/buddy.PNG differ
diff --git a/src/pages/user/RecoveredsPage/images/cherry.PNG b/src/pages/user/RecoveredsPage/images/cherry.PNG
new file mode 100644
index 0000000..c0e12b2
Binary files /dev/null and b/src/pages/user/RecoveredsPage/images/cherry.PNG differ
diff --git a/src/pages/user/RecoveredsPage/images/chloe.PNG b/src/pages/user/RecoveredsPage/images/chloe.PNG
new file mode 100644
index 0000000..964b496
Binary files /dev/null and b/src/pages/user/RecoveredsPage/images/chloe.PNG differ
diff --git a/src/pages/user/RecoveredsPage/images/cotton.PNG b/src/pages/user/RecoveredsPage/images/cotton.PNG
new file mode 100644
index 0000000..574944d
Binary files /dev/null and b/src/pages/user/RecoveredsPage/images/cotton.PNG differ
diff --git a/src/pages/user/RecoveredsPage/images/kau.PNG b/src/pages/user/RecoveredsPage/images/kau.PNG
new file mode 100644
index 0000000..53fc552
Binary files /dev/null and b/src/pages/user/RecoveredsPage/images/kau.PNG differ
diff --git a/src/pages/user/RecoveredsPage/images/luna.PNG b/src/pages/user/RecoveredsPage/images/luna.PNG
new file mode 100644
index 0000000..543c9a6
Binary files /dev/null and b/src/pages/user/RecoveredsPage/images/luna.PNG differ
diff --git a/src/pages/user/RecoveredsPage/images/rescuer1.PNG b/src/pages/user/RecoveredsPage/images/rescuer1.PNG
new file mode 100644
index 0000000..847ca45
Binary files /dev/null and b/src/pages/user/RecoveredsPage/images/rescuer1.PNG differ
diff --git a/src/pages/user/RecoveredsPage/images/rescuer2.PNG b/src/pages/user/RecoveredsPage/images/rescuer2.PNG
new file mode 100644
index 0000000..1fdf114
Binary files /dev/null and b/src/pages/user/RecoveredsPage/images/rescuer2.PNG differ
diff --git a/src/pages/user/RecoveredsPage/images/rescuer3.jpg b/src/pages/user/RecoveredsPage/images/rescuer3.jpg
new file mode 100644
index 0000000..3ef6476
Binary files /dev/null and b/src/pages/user/RecoveredsPage/images/rescuer3.jpg differ
diff --git a/src/pages/user/RecoveredsPage/images/ruby.PNG b/src/pages/user/RecoveredsPage/images/ruby.PNG
new file mode 100644
index 0000000..1715e0d
Binary files /dev/null and b/src/pages/user/RecoveredsPage/images/ruby.PNG differ