diff --git a/index.html b/index.html
index 0586c5e..e8482cf 100644
--- a/index.html
+++ b/index.html
@@ -70,7 +70,7 @@ <h2>Efficient Waste Management</h2>
                     <img src="./assets/rb_2148298503.png" alt="Upload Preview">
                 </div>
                 <div class="upload-text">
-                    <h2>Upload Your Files</h2>
+                    <h2 class="darkmodetext">Upload Your Files</h2>
                     <label for="image-input" class="custom-file-upload">
                         <input type="file" id="image-input" accept="image/*" hidden />
                         <span>Select Image</span>
@@ -86,17 +86,17 @@ <h2>Upload Your Files</h2>
     </div>
     </section>
     <section class="classification">
-        <h2>Waste Classification</h2>
+        <h2 class="darkmodetext">Waste Classification</h2>
         <p id="classification-result">Your classification result will appear here.</p>
     </section>
     <!-- part 2 start-->
 
     <section class="disposal">
-        <h2>Disposal Information</h2>
+        <h2 class="darkmodetext">Disposal Information</h2>
         <p id="disposal-information">Disposal information will be displayed here.</p>
     </section>
     <div class="Categories">
-        <h2>Waste Categories</h2>
+        <h2 class="darkmodetext">Waste Categories</h2>
         <div class="card-container">
             <div class="card">
                 <div class="card-inner">
@@ -453,7 +453,7 @@ <h3>Our Commitment to Sustainability</h3>
     </div>
     </div>
     <section class="features" id="features">
-        <h2>Discover Our Features</h2>
+        <h2 class="darkmodetext">Discover Our Features</h2>
         <div class="features-container">
             <div class="feature-card" id="eco-friendly">
                 <div class="icon"></div>
@@ -492,7 +492,7 @@ <h3>Community Engagement</h3>
     <section class="faqisection">
         <section class="faqs" id="faqs">
             <div>
-                <h2>Frequently Asked Questions (FAQs)</h2>
+                <h2 class="darkmodetext">Frequently Asked Questions (FAQs)</h2>
                 <div class="faq-item">
                     <h3>
                         What is the difference between biodegradable and
@@ -561,21 +561,22 @@ <h3>Why is it important to sort waste?</h3>
         </section>
     </section>
     <section class="feedback" id="feedback">
-        <h2>Your Feedback</h2>
+        <h2 class="darkmodetext">Your Feedback</h2>
         <form id="feedback-form" name="feedback-form">
-            <input type="text" placeholder="Your Name" required="" />
-            <textarea placeholder="Your Feedback" required=""></textarea>
+            <input type="text" placeholder="Your Name" required />
+            <textarea placeholder="Your Feedback" required></textarea>
             <button type="submit">Submit</button>
         </form>
     </section>
+    
 
 
     <section class="about-container">
         <div class="about-heading">
-            <h2>About Us</h2>
+            <h2 class="darkmodetext">About Us</h2>
         </div>
         <div class="about-text">
-            <p>
+            <p class="darkmodetext">
                 <strong>At Waste Management</strong>, we are passionate
                 about creating a sustainable future through effective
                 waste disposal solutions. Our goal is to not only reduce
@@ -583,7 +584,7 @@ <h2>About Us</h2>
                 <strong>educate communities</strong> and empower
                 individuals with sustainable waste practices.
             </p>
-            <p>
+            <p class="darkmodetext">
                 By leveraging our
                 <strong>state-of-the-art waste classification system</strong>
                 and encouraging community engagement, we aim to inspire
@@ -598,8 +599,8 @@ <h2>About Us</h2>
         </div>
     </section>
     <section>
-        <div class="mission-container">
-            <h3>Our Mission</h3>
+        <div class="mission-container darkmodetext">
+            <h2 class="darkmodetext">Our Mission</h2>
             <div class="mission-box">
                 <div class="mission-item">
                     <img src="./assets/recycling-bin_532768.png" alt="Reduce Waste" />
@@ -634,8 +635,8 @@ <h4>Build a Cleaner Future</h4>
         </div>
     </section>
     <section>
-        <div class="values-container">
-            <h3>Our Core Values</h3>
+        <div class="values-container darkmodetext">
+            <h2 class="darkmodetext">Our Core Values</h2>
             <div class="values-cards">
                 <div class="value-card">
                     <h4>Innovation</h4>
@@ -762,6 +763,7 @@ <h3>Our Commitment to Sustainability</h3>
     </script>
     <script src="https://www.chatbase.co/embed.min.js" chatbotId="wQJs3fix9gu515zxNshBF" domain="www.chatbase.co" defer>
     </script>
+    <script src="styles.js"></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/script.js b/script.js
index c42022e..4bd02ea 100644
--- a/script.js
+++ b/script.js
@@ -565,12 +565,5 @@ document.addEventListener('DOMContentLoaded', () => {
     window.addEventListener('load', updateSlider);
     
     
-    const themeToggle = document.getElementById('theme-toggle');
-    const body = document.body;
-    
-    themeToggle.addEventListener('click', () => {
-        body.classList.toggle('dark-mode');
-    });
     
     
- 
diff --git a/styles.css b/styles.css
index 24d0f89..c1c9ee2 100644
--- a/styles.css
+++ b/styles.css
@@ -71,11 +71,13 @@ nav .btn-nav {
 }
 
 .button {
-  background-color: #4caf50;
+  background-color: transparent;
   border: none;
   padding: 0.5rem 1rem;
   border-radius: 4px;
   transition: background-color 0.3s ease;
+  font-weight: 500;
+  font-size: 1rem;
 }
 
 .button a {
@@ -142,10 +144,10 @@ nav .btn-nav {
 
 /* Upload Section */
 .upload {
-  background-color: #ffffff;
   padding: 2rem;
   margin: 2rem 0;
   text-align: center;
+  border: 2px solid gray;
   border-radius: 8px;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }
@@ -198,8 +200,8 @@ nav .btn-nav {
 .classification {
   padding: 2rem;
   text-align: center;
-  background-color: #f9f9f9;
   margin-top: 2rem;
+  border: 2px solid gray;
   border-top: 3px solid #4caf50;
 }
 
@@ -238,8 +240,8 @@ nav .btn-nav {
 section {
   padding: 20px;
   margin: 20px 0;
-  background-color: #f8f8f8;
   border-radius: 8px;
+  border: 2px solid gray;
 }
 
 h2, h3, h4 {
@@ -254,7 +256,7 @@ h2, h3, h4 {
 
 /* Disposal Information Section */
 .disposal {
-  background-color: #e3f2fd;
+  border: 2px solid gray;
   border-left: 5px solid #2196f3;
   padding-left: 20px;
 }
@@ -310,9 +312,6 @@ h2, h3, h4 {
 }
 
 /* Features Section */
-.features {
-  background-color: #f1f1f1;
-}
 .features h2{
   text-align: center;
   font-size: 2.3rem;
@@ -335,8 +334,11 @@ h2, h3, h4 {
   border-radius: 8px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   padding: 15px;
+  transition: transform 0.3s ease;
+}
+.feature-card:hover {
+  transform: scale(1.05);
 }
-
 blockquote {
   font-style: italic;
   color: #777;
@@ -401,9 +403,6 @@ blockquote {
 }
 
 /* Feedback Section */
-.feedback {
-  background-color: #fafafa;
-}
 
 #feedback-form input,
 #feedback-form textarea {
@@ -427,6 +426,7 @@ blockquote {
   background-color: #1976d2;
 }
 
+
 /* About Us Section */
 .about-container {
   display: flex;
@@ -450,7 +450,9 @@ blockquote {
   flex: 1;
   padding: 15px;
 }
-
+.mission-container h3{
+  color: #333;
+}
 .mission-box {
   display: flex;
   flex-wrap: wrap;
@@ -464,18 +466,20 @@ blockquote {
   border-radius: 8px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   text-align: center;
+  transition: transform 0.3s ease;
+}
+.mission-item:hover {
+  transform: scale(1.05);
 }
-
 .mission-item img {
   width: 50px;
   margin-bottom: 10px;
 }
 
 /* Values Section */
-.values-container {
-  background-color: #f8f8f8;
+.values-container h3{
+  color: #333;
 }
-
 .values-cards {
   display: flex;
   flex-wrap: wrap;
@@ -488,8 +492,11 @@ blockquote {
   padding: 15px;
   border-radius: 8px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  transition: transform 0.3s ease;
+}
+.value-card:hover{
+  transform: scale(1.05);
 }
-
 .value-card h4 {
   margin-bottom: 10px;
 }
@@ -589,7 +596,6 @@ blockquote {
 /* FAQ Section */
 .faqisection {
   padding: 50px 0;
-  background-color: #f9f9f9;
   color: #333;
 }
 
@@ -597,6 +603,7 @@ blockquote {
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 20px;
+  border: 0;
 }
 
 .faqs h2 {
@@ -622,7 +629,7 @@ blockquote {
 /* Feedback Section */
 .feedback {
   padding: 50px 20px;
-  background-color: #eef4f7;
+  border: 2px solid gray;
   color: #333;
   text-align: center;
 }
@@ -666,7 +673,6 @@ blockquote {
   padding: 50px 20px;
   justify-content: space-between;
   align-items: center;
-  background-color: #f1f1f1;
 }
 
 .about-text {
@@ -695,11 +701,10 @@ blockquote {
 /* Mission Section */
 .mission-container {
   padding: 50px 20px;
-  background-color: #f9f9f9;
   text-align: center;
 }
 
-.mission-container h3 {
+.mission-container h2 {
   font-size: 32px;
   margin-bottom: 30px;
 }
@@ -738,10 +743,9 @@ blockquote {
 /* Values Section */
 .values-container {
   padding: 50px 20px;
-  background-color: #eef4f7;
 }
 
-.values-container h3 {
+.values-container h2 {
   font-size: 32px;
   text-align: center;
   margin-bottom: 30px;
@@ -778,7 +782,8 @@ blockquote {
   justify-content: center;
   align-items: center;
   padding: 50px 20px;
-  background-color: #f9f9f9;
+  border: 2px solid gray;
+  margin-bottom: 5rem;
 }
 
 .form_area {
@@ -938,3 +943,13 @@ blockquote {
   margin: 0;
 }
 
+.dark-mode{
+  background-color: black;
+}
+.dark-mode2{
+  background-color: #2a2a2a;
+  color: white;
+}
+.dark-mode3{
+  color: #ffffff;
+}
\ No newline at end of file
diff --git a/styles.js b/styles.js
index 9d245f9..a807ed7 100644
--- a/styles.js
+++ b/styles.js
@@ -15,4 +15,17 @@ function showForm(formNumber) {
             button.classList.remove('button-active');
         }
     });
-}
\ No newline at end of file
+}
+
+const themeToggle = document.getElementById('theme-toggle');
+const body = document.body;
+const whitetext = document.querySelectorAll(".darkmodetext");
+
+themeToggle.addEventListener('click', () => {
+    body.classList.toggle('dark-mode');
+    
+    // Loop through each element with the .whitetext class and toggle .dark-mode3
+    whitetext.forEach(element => {
+        element.classList.toggle("dark-mode3");
+    });
+});