diff --git a/package-lock.json b/package-lock.json
index eeea927..ad1943d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -30,7 +30,8 @@
         "dayjs": "^1.11.7",
         "dotenv": "^16.0.3",
         "dotenv-webpack": "^8.0.1",
-        "embla-carousel-react": "^7.1.0",
+        "embla-carousel-react": "^7.0.9",
+        "firebase": "^9.17.2",
         "google-map-react": "^2.2.0",
         "mapbox-gl": "^2.13.0",
         "react": "^18.2.0",
diff --git a/src/components/HomeOurValues/OurValues1.tsx b/src/components/HomeOurValues/OurValues1.tsx
index 1a21fc7..c523a66 100644
--- a/src/components/HomeOurValues/OurValues1.tsx
+++ b/src/components/HomeOurValues/OurValues1.tsx
@@ -7,14 +7,14 @@ function OurValues1() {
         <h1 className="values-heading">OUR VALUES</h1>
         <hr />
         <div className="values-box-1">
-          <div className="values-content">
+          <div className="values-content fade-in-image">
             <h1>Empowerment</h1>
             <hr />
             <p>
             We prioritize empowering individuals and communities to take control of their own lives and work towards positive change.
             </p>
           </div>
-          <div className="values-content">
+          <div className="values-content fade-in-image">
             <h1>Collaboration</h1>
             <hr />
             <p>
@@ -22,7 +22,7 @@ function OurValues1() {
             </p>
           </div>
 
-          <div className="values-content">
+          <div className="values-content fade-in-image">
             <h1>Growth</h1>
             <hr />
             <p>
diff --git a/src/components/HomeOurValues/Values.css b/src/components/HomeOurValues/Values.css
index 3aee0b5..e6a899f 100644
--- a/src/components/HomeOurValues/Values.css
+++ b/src/components/HomeOurValues/Values.css
@@ -75,3 +75,16 @@
     margin-left: 0rem;
   }
 }
+
+@keyframes fadeIn {
+  0% {
+      opacity: 0;
+  }
+  100% {
+      opacity: 1;
+   }
+}
+
+.fade-in-image{
+  animation: fadeIn 2s;
+}