diff --git a/assets/css/dark-mode-style.css b/assets/css/dark-mode-style.css
index 8442607..b26ba60 100644
--- a/assets/css/dark-mode-style.css
+++ b/assets/css/dark-mode-style.css
@@ -1,5 +1,5 @@
 .dark-mode {
-  background-color: black;
+  background-color: #121212;
   color: white;
 }
 body {
@@ -11,3 +11,16 @@ body {
   border: none;
   background: none;
 }
+.dark-card {
+  background-color: #181818 !important;
+  color: white !important;
+}
+.dark-card h3, p {
+  color: white !important;
+}
+.section-bg {
+  background-color: #2d405f !important;
+}
+.section-bg h2 {
+  color: #fff !important;
+}
diff --git a/assets/css/style.css b/assets/css/style.css
index 51f73a1..47b7b45 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -238,7 +238,7 @@ h6 {
 }
 .navbar .getstarted:hover,
 .navbar .getstarted:focus:hover {
-  /* color: #fff;*/
+  color: #fff;
   background: #3b4ef8;
 }
 .navbar .dropdown ul {
diff --git a/index.html b/index.html
index 0c607d5..8f95c51 100644
--- a/index.html
+++ b/index.html
@@ -423,7 +423,7 @@ <h2>Our Initiatives</h2>
         <div class="row">
           <div class="col-md-6 col-lg-3 d-flex align-items-stretch mb-5 mb-lg-0" data-aos="fade-up"
             data-aos-delay="100">
-            <div class="icon-box">
+            <div class="icon-box dark">
               <div class="icon"><i class="bx bxl-dribbble"></i></div>
               <h4 class="title"><a href="">Internship opportunity</a></h4>
               <p class="description">
@@ -438,7 +438,7 @@ <h4 class="title"><a href="">Internship opportunity</a></h4>
 
           <div class="col-md-6 col-lg-3 d-flex align-items-stretch mb-5 mb-lg-0" data-aos="fade-up"
             data-aos-delay="200">
-            <div class="icon-box">
+            <div class="icon-box dark">
               <div class="icon"><i class="bx bx-file"></i></div>
               <h4 class="title"><a href="https://eduhubcommunity.tech/Campus-Leader-Page/">Campus Leaders</a></h4>
               <p class="description">
@@ -454,7 +454,7 @@ <h4 class="title"><a href="https://eduhubcommunity.tech/Campus-Leader-Page/">Cam
 
           <div class="col-md-6 col-lg-3 d-flex align-items-stretch mb-5 mb-lg-0" data-aos="fade-up"
             data-aos-delay="300">
-            <div class="icon-box">
+            <div class="icon-box dark">
               <div class="icon"><i class="bx bx-tachometer"></i></div>
               <h4 class="title"><a href="">Hackathons/Workshops</a></h4>
               <p class="description">
@@ -468,7 +468,7 @@ <h4 class="title"><a href="">Hackathons/Workshops</a></h4>
 
           <div class="col-md-6 col-lg-3 d-flex align-items-stretch mb-5 mb-lg-0" data-aos="fade-up"
             data-aos-delay="400">
-            <div class="icon-box">
+            <div class="icon-box dark">
               <div class="icon"><i class="bx bx-layer"></i></div>
               <h4 class="title"><a href="https://eduhubcommunity.tech/Campus-Leader-Page/">Chapter Lead</a></h4>
               <p class="description">
@@ -946,7 +946,7 @@ <h2> WHAT DOES THE COMMUNITY SAY ABOUT US ?</h2>
         <div class="testimonials-slider swiper" data-aos="fade-up" data-aos-delay="100">
           <div class="swiper-wrapper">
             <div class="swiper-slide">
-              <div class="testimonial-item">
+              <div class="testimonial-item dark">
                 <p>
                   <i class="bx bxs-quote-alt-left quote-icon-left"></i>
                   Eduhub Community is a child for me building this community helps me a lot to grow in my community
@@ -961,7 +961,7 @@ <h4>Co-Founder</h4>
             <!-- End testimonial item -->
 
             <div class="swiper-slide">
-              <div class="testimonial-item">
+              <div class="testimonial-item dark">
                 <p>
                   <i class="bx bxs-quote-alt-left quote-icon-left"></i>
                   I have learn a lot in the journey, i develop my communication skill as well as my management skill,
@@ -976,7 +976,7 @@ <h4>Founder</h4>
             <!-- End testimonial item -->
 
             <div class="swiper-slide">
-              <div class="testimonial-item">
+              <div class="testimonial-item dark">
                 <p>
                   <i class="bx bxs-quote-alt-left quote-icon-left"></i>
                   "Eduhub Community" is FILLING THE GAP which was meant to be filled by the professors of the same
@@ -991,7 +991,7 @@ <h4>Community Manager</h4>
             <!-- End testimonial item -->
 
             <div class="swiper-slide">
-              <div class="testimonial-item">
+              <div class="testimonial-item dark">
                 <p>
                   <i class="bx bxs-quote-alt-left quote-icon-left"></i>
                   It was an amazing experience with Eduhub they will clear your each and every doubt, and the content
@@ -1267,14 +1267,14 @@ <h2>Contact</h2>
           <div class="col-lg-6">
             <div class="row">
               <div class="col-md-12">
-                <div class="info-box">
+                <div class="info-box dark">
                   <i class="bx bx-map"></i>
                   <h3>Our Address</h3>
                   <p>Chomu Udaipuria Mod, Jaipur, Rajasthan</p>
                 </div>
               </div>
               <div class="col-md-12">
-                <div class="info-box mt-4">
+                <div class="info-box dark mt-4">
                   <i class="bx bx-envelope"></i>
                   <h3>Email Us</h3>
                   <p>
@@ -1293,7 +1293,7 @@ <h3>Call Us</h3>
           </div>
 
           <div class="col-lg-6 mt-4 mt-md-0">
-            <form action="javaScript:SendMail()" role="form" class="javascript-email-form" name="contact-form">
+            <form action="javaScript:SendMail()" role="form" class="javascript-email-form dark" name="contact-form">
               <div class="row">
                 <div class="col-md-6 form-group">
                   <input type="text" name="name" class="form-control" id="name" placeholder="Your Name" required />
@@ -1437,7 +1437,11 @@ <h4>Subscribe</h4>
 <script>
   function myFunction() {
     var element = document.body;
+    let cards = document.querySelectorAll(".dark");
     element.classList.toggle("dark-mode");
+    cards.forEach(card=>{
+      card.classList.toggle('dark-card')
+     })
   }
 </script>