diff --git a/about.html b/about.html
index 10d4f73b..d4be3a40 100644
--- a/about.html
+++ b/about.html
@@ -1075,7 +1075,7 @@ <h1 class="head" id="card3">FinVeda Tools</h1>
       #white-card1,
       #white-card2,
       #white-card3 {
-        color: #1e293b;
+        color: white;
         padding: 10px;
         margin-bottom: 20px;
       }
diff --git a/contributors.html b/contributors.html
index 1eb80d92..3616ecc9 100644
--- a/contributors.html
+++ b/contributors.html
@@ -315,74 +315,121 @@ <h3 class="join">Register to join us....</h3>
   
   </header>
 
-  <section class="contributor-stats" style="margin-top: 150px;">
-    <h2 style="color: white;">Project Statistics</h2>
-    <div style="color:white ;" class="contributor-stats-grid" id="statsGrid">
-      <!-- Dynamic Stats will be added by JavaScript -->
+  <!-- Font Awesome CDN -->
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+
+<section class="contributor-stats" style="margin-top: 150px;">
+  <h2 style="color: white; text-align: center;">
+    <span class="symbol">♥</span> Project Statistics
+  </h2>
+  <div class="contributor-stats-grid" id="statsGrid">
+    <div class="contributor-stat-card">
+      <i class="fas fa-users stat-icon"></i> <!-- Contributors Icon -->
+      <h3 id="contributor-count">257</h3>
+      <p>Contributors</p>
+    </div>
+    <div class="contributor-stat-card">
+      <i class="fas fa-tasks stat-icon"></i> <!-- Total Contributions Icon -->
+      <h3 id="total-contributions">3015</h3>
+      <p>Total Contributions</p>
+    </div>
+    <div class="contributor-stat-card">
+      <i class="fas fa-star stat-icon"></i> <!-- GitHub Stars Icon -->
+      <h3 id="stars-count">170</h3>
+      <p>GitHub Stars</p>
+    </div>
+    <div class="contributor-stat-card">
+      <i class="fas fa-code-branch stat-icon"></i> <!-- Forks Icon -->
+      <h3 id="forks-count">438</h3>
+      <p>Forks</p>
     </div>
-  </section>
-
-  <div class="container">
-    <h1 class="title">Our Contributors</h1>
   </div>
-  <div style="margin-left:5px;" id="contributors" class="contributors-grid"></div>
-
-  <style>
-    .contributor-card::before{
-    content: '';
-    position: absolute;
-    background: radial-gradient(var(--clr),transparent,transparent);
-    height: 500px;
-    width: 500px;
-    top: var(--y);
-    left: var(--x);
-    transform: translate(-50%,-50%);
-    opacity: 0;
-    transition: 0.5s, top 0s,left 0s;
+</section>
+
+<style>
+  /* Styling and Animation for the Heart Symbol */
+  .symbol {
+    font-size: 1.5rem;
+    color: #ff69b4;
+    animation: bounce 1s infinite;
+    margin-right: 10px;
+  }
+
+  /* Bounce animation */
+  @keyframes bounce {
+    0%, 100% {
+      transform: translateY(0);
     }
-
-    .contributor-card:hover::before{
-      opacity: 1;
+    50% {
+      transform: translateY(-5px);
     }
-
-    .contributor-card::after{
-      content: '';
-      position: absolute;
-      inset: 2px;
-      border-radius: 8px;
-      background-color:rgba(19, 45, 70,0.8);;
-     
+  }
+
+  /* Full-width layout for Contributor Stats Section */
+  .contributor-stats {
+    width: 100%;
+    text-align: center;
+  }
+
+  .contributor-stats-grid {
+    display: flex;
+    justify-content: space-around;
+    padding: 20px;
+    box-sizing: border-box;
+    gap: 20px;
+    color: white;
+    max-width: 100%;
+  }
+
+  .contributor-stat-card {
+    background-color: rgba(255, 255, 255, 0.1);
+    padding: 20px;
+    border-radius: 10px;
+    width: 250px; /* Increased width for each card */
+    text-align: center;
+    box-sizing: border-box;
+  }
+
+  /* Icon styling and pulsing animation */
+  .stat-icon {
+    font-size: 2.5rem;
+    color: white;
+    margin-bottom: 10px;
+    animation: pulse 1.5s infinite;
+  }
+
+  /* Pulse animation for icons */
+  @keyframes pulse {
+    0%, 100% {
+      transform: scale(1);
     }
-
-    .contributor-card p,
-    .contributor-card a {
-      position: relative;
-      z-index: 1;         
-      color: #ddd;        
-      text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); 
-    }
-
-    .contributor-card a {
-      color: #aaa;        
-      font-weight: bold;
-      text-decoration: underline;
-    }
-
-    .contributor-card img {
-      border-radius: 50%; 
-      margin-bottom: 10px;
-      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); 
-      filter: brightness(1.2); 
-      z-index: 1; 
-      transition: transform 0.3s ease, filter 0.3s ease;
-    }
-
-    .contributor-card:hover img {
-      transform: scale(1.05);
-      filter: brightness(1.4); 
+    50% {
+      transform: scale(1.1);
     }
-  </style>
-  <script src="./assets/js/contributors.js"></script>
+  }
+
+  /* Additional Font Awesome icon settings */
+  .fa, .fa-brands, .fa-duotone, .fa-light, .fa-regular, .fa-solid, .fa-thin, .fab, .fad, .fal, .far, .fas, .fat {
+    -webkit-font-smoothing: antialiased;
+    display: var(--fa-display, inline-block);
+    font-style: normal;
+    font-variant: normal;
+    line-height: 1.2;
+    text-rendering: auto;
+  }
+
+  /* Additional Styling for H3 and P */
+  .contributor-stat-card h3 {
+    font-size: 1.5rem;
+    margin: 5px 0;
+  }
+
+  .contributor-stat-card p {
+    font-size: 1rem;
+    margin: 0;
+  }
+</style>
+<script src="./assets/js/contributors.js"></script>
 
 
   <footer id="footer" class="footer-area pt-120">
diff --git a/index.html b/index.html
index 851666da..d234f457 100644
--- a/index.html
+++ b/index.html
@@ -1064,84 +1064,183 @@ <h4>🍪Cookies Consent <svg xmlns="http://www.w3.org/2000/svg" width="24" heigh
   </div>
 
   </section>
+  <style>
+    /* CSS for Flip Card */
+    .flip-card {
+        width: 100%;
+        height: 250px;
+        perspective: 1000px;
+        margin-top: 30px;
+        position: relative;
+    }
 
+    .flip-card-inner {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        transition: transform 0.8s;
+        transform-style: preserve-3d;
+    }
 
-  <section id="features" class="services-area pt-120">
-    <div class="container">
-      <div class="row justify-content-center">
-        <div class="col-lg-10">
-          <div class="section-title text-center pb-40">
-            <h3 style="color: #2f6be5;">
-              <div class="line m-auto"></div>
+    .flip-card:hover .flip-card-inner {
+        transform: rotateY(180deg);
+    }
 
-              FinVeda,
-              <span style="color:#2f6be5;"> comes with everything you need to get started!</span>
+    .flip-card-front, .flip-card-back {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        backface-visibility: hidden;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        border-radius: 15px;
+        padding: 20px;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+        border: 2px solid transparent;
+        background-clip: padding-box;
+    }
 
-            </h3>
-          </div>
+    .flip-card-front {
+        background: rgba(255, 255, 255, 0.2);
+        backdrop-filter: blur(10px);
+        border: 2px solid rgba(255, 255, 255, 0.3);
+    }
+
+    .flip-card-front h4 {
+        color: #2f6be5;
+        font-size: 1.5em;
+        margin-top: 10px;
+    }
+
+    .flip-card-front img {
+        width: 60px;
+        height: 60px;
+        border-radius: 50%;
+        margin-bottom: 15px;
+    }
+
+    .flip-card-back {
+        background: rgba(47, 107, 229, 0.8);
+        color: #fff;
+        transform: rotateY(180deg);
+        border-radius: 15px;
+        backdrop-filter: blur(10px);
+        border: 2px solid rgba(255, 255, 255, 0.3);
+    }
+
+    .flip-card-back p {
+        margin: 0 0 15px;
+        font-size: 1em;
+        text-align: center;
+    }
+
+    .flip-card-back a {
+        color: #fff;
+        font-weight: bold;
+        text-decoration: none;
+        transition: color 0.3s ease-in-out;
+    }
+
+    .flip-card-back a:hover {
+        color: #ffd700;
+    }
+
+    /* Animated Border Effect */
+    .flip-card:before {
+        content: '';
+        position: absolute;
+        top: -2px;
+        right: -2px;
+        bottom: -2px;
+        left: -2px;
+        border-radius: 15px;
+        background: linear-gradient(135deg, #2f6be5, #ffd700);
+        background-size: 300% 300%;
+        animation: borderGlow 3s infinite;
+        z-index: -1;
+    }
+
+    @keyframes borderGlow {
+        0% { background-position: 0% 50%; }
+        50% { background-position: 100% 50%; }
+        100% { background-position: 0% 50%; }
+    }
+</style>
+</head>
+<body>
+
+<section id="features" class="services-area pt-120">
+<div class="container">
+    <!-- Section Title -->
+    <div class="row justify-content-center">
+        <div class="col-lg-10">
+            <div class="section-title text-center pb-40">
+                <h3 style="color: #2f6be5;">
+                    <div class="line m-auto"></div>
+                    FinVeda, <span style="color:#2f6be5;">comes with everything you need to get started!</span>
+                </h3>
+            </div>
         </div>
-      </div>
-      <div class="row justify-content-center">
+    </div>
+
+    <!-- Animated Flip Cards for Features -->
+    <div class="row justify-content-center">
+        <!-- Financial Blogs Card -->
         <div class="col-lg-4 col-md-7 col-sm-8">
-          <div class="single-services text-center mt-30 wow fadeIn" data-wow-duration="1s" data-wow-delay="0.2s">
-            <div class="services-icon">
-              <img class="shape" src="assets/images/services-shape.svg" alt="shape" />
-              <img class="shape-1" src="assets/images/services-shape-1.svg" alt="shape" />
-              <i class="lni-baloon"></i>
-            </div>
-            <div class="services-content mt-30">
-              <h4 class="services-title"><a href="./blog.html">Financial Blogs</a></h4>
-              <p class="text">
-                <li>
-                  We offer expert written blogs on investment tips and strategies, and current economic trends, all
-                  crafted to keep you well-informed.
-                </li>
-              </p>
-              <a class="more" href="./blog.html">Learn More <i class="lni-chevron-right"></i></a>
+            <div class="flip-card">
+                <div class="flip-card-inner">
+                    <div class="flip-card-front">
+                        <img src="https://bs-uploads.toptal.io/blackfish-uploads/components/blog_post_page/6428813/cover_image/optimized/Profitability-Optimization_BLOG-23df67f3151e1935dbe15b589f6c39d5.png" alt="Financial Blogs" class="card-image">
+                        <h4>Financial Blogs</h4>
+                    </div>
+                    <div class="flip-card-back">
+                        <p>Expert blogs on investment tips and strategies, covering current economic trends to keep you informed.</p>
+                        <a href="./blog.html" class="more">Learn More <i class="lni-chevron-right"></i></a>
+                    </div>
+                </div>
             </div>
-          </div>
         </div>
+
+        <!-- Finance Tools Card -->
         <div class="col-lg-4 col-md-7 col-sm-8">
-          <div class="single-services text-center mt-30 wow fadeIn" data-wow-duration="1s" data-wow-delay="0.5s">
-            <div class="services-icon">
-              <img class="shape" src="assets/images/services-shape.svg" alt="shape" />
-              <img class="shape-1" src="assets/images/services-shape-2.svg" alt="shape" />
-              <i class="lni-cog"></i>
-            </div>
-            <div class="services-content mt-30">
-              <h4 class="services-title"><a href="tools/sip.html">Finance Tools</a></h4>
-              <p class="text">
-                <li>
-                  With our SIP and PPF tools you'll discover power of compounding and make informed decisions regarding
-                  your savings.
-                </li>
-              </p>
-              <a class="more" href="tools/sip.html">Learn More <i class="lni-chevron-right"></i></a>
+            <div class="flip-card">
+                <div class="flip-card-inner">
+                    <div class="flip-card-front">
+                        <img src="https://cdn2.iconfinder.com/data/icons/financial-tools/512/financial_tools-512.png" alt="Finance Tools" class="card-image">
+                        <h4>Finance Tools</h4>
+                    </div>
+                    <div class="flip-card-back">
+                        <p>Discover the power of compounding with SIP and PPF tools to make informed savings decisions.</p>
+                        <a href="tools/sip.html" class="more">Learn More <i class="lni-chevron-right"></i></a>
+                    </div>
+                </div>
             </div>
-          </div>
         </div>
+
+        <!-- Financial Trends Card -->
         <div class="col-lg-4 col-md-7 col-sm-8">
-          <div class="single-services text-center mt-30 wow fadeIn" data-wow-duration="1s" data-wow-delay="0.8s">
-            <div class="services-icon">
-              <img class="shape" src="assets/images/services-shape.svg" alt="shape" />
-              <img class="shape-1" src="assets/images/services-shape-3.svg" alt="shape" />
-              <i class="lni-bolt-alt"></i>
-            </div>
-            <div class="services-content mt-30">
-              <h4 class="services-title"><a href="trends.html">Financial Trends</a></h4>
-              <p class="text">
-                <li>
-                  You will make smarter decisions by staying updated to the current market happenings in real time with
-                  our Stock Market API's results.
-                </li>
-              </p>
-              <a class="more" href="./trends.html">Learn More <i class="lni-chevron-right"></i></a>
+            <div class="flip-card">
+                <div class="flip-card-inner">
+                    <div class="flip-card-front">
+                        <img src="https://static.thenounproject.com/png/836919-200.png" alt="Financial Trends" class="card-image">
+                        <h4>Financial Trends</h4>
+                    </div>
+                    <div class="flip-card-back">
+                        <p>Stay updated with real-time market happenings and make smart financial decisions.</p>
+                        <a href="trends.html" class="more">Learn More <i class="lni-chevron-right"></i></a>
+                    </div>
+                </div>
             </div>
-          </div>
         </div>
-      </div>
     </div>
-  </section>
+</div>
+</section>
+
+</body>
+</html>
+  
   <section id="about" class="about-area pt-70">
     <div class="container">
       <div class="row">