diff --git a/faq/Expand-less-dark.svg b/faq/Expand-less-dark.svg
new file mode 100644
index 0000000..9c3e1d8
--- /dev/null
+++ b/faq/Expand-less-dark.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="m296-345-56-56 240-240 240 240-56 56-184-184-184 184Z" fill='white' /></svg>
\ No newline at end of file
diff --git a/faq/Expand-more-dark.svg b/faq/Expand-more-dark.svg
new file mode 100644
index 0000000..c30c283
--- /dev/null
+++ b/faq/Expand-more-dark.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z" fill='white' /></svg>
\ No newline at end of file
diff --git a/faqpage.html b/faqpage.html
index f2c6d42..42920b3 100644
--- a/faqpage.html
+++ b/faqpage.html
@@ -25,6 +25,11 @@
       <h3>AgriLearnNetwork</h3>
     </a>
 
+    <div class="theme-toggle">
+      <i class="fas fa-sun"></i>
+      <i class="fas fa-moon"></i>
+    </div>
+
     <i class="bx bx-menu" id="menu-icon"></i>
     <nav class="navbar">
       <a href="index.html#home"><i class="fa-solid fa-house"></i> Home</a>
@@ -53,7 +58,7 @@ <h3>AgriLearnNetwork</h3>
           <!-- Question-1 -->
           <div class="accordion">
             <div class="accordion-header" onclick="toggleAccordion(this)">
-              <span><img src="./faq/Expand-more.svg" alt="Expand"></span>
+              <span><img src="./faq/Expand-more.svg" alt="Expand" data-light-icon="./faq/Expand-more.svg" data-dark-icon="./faq/Expand-more-dark.svg"></span>
               <h3>What is AgriLearnNetwork?</h3>
             </div>
             <div class="accordion-body">
@@ -66,7 +71,7 @@ <h3>What is AgriLearnNetwork?</h3>
           <!-- Question-2 -->
           <div class="accordion">
             <div class="accordion-header" onclick="toggleAccordion(this)">
-              <span><img src="./faq/Expand-more.svg" alt="Expand"></span>
+              <span><img src="./faq/Expand-more.svg" alt="Expand" data-light-icon="./faq/Expand-more.svg" data-dark-icon="./faq/Expand-more-dark.svg"></span>
               <h3>Who can benefit from AgriLearnNetwork?</h3>
             </div>
             <div class="accordion-body">
@@ -79,7 +84,7 @@ <h3>Who can benefit from AgriLearnNetwork?</h3>
           <!--Question-3-->
           <div class="accordion">
             <div class="accordion-header" onclick="toggleAccordion(this)">
-              <span><img src="./faq/Expand-more.svg" alt="Expand"></span>
+              <span><img src="./faq/Expand-more.svg" alt="Expand" data-light-icon="./faq/Expand-more.svg" data-dark-icon="./faq/Expand-more-dark.svg"></span>
               <h3>What features does AgriLearnNetwork offer?</h3>
             </div>
             <div class="accordion-body">
@@ -97,7 +102,7 @@ <h3>What features does AgriLearnNetwork offer?</h3>
           <!--Question-6-->
           <div class="accordion">
             <div class="accordion-header" onclick="toggleAccordion(this)">
-              <span><img src="./faq/Expand-more.svg" alt="Expand"></span>
+              <span><img src="./faq/Expand-more.svg" alt="Expand" data-light-icon="./faq/Expand-more.svg" data-dark-icon="./faq/Expand-more-dark.svg"></span>
               <h3>What types of farming does AgriLearnNetwork support?</h3>
             </div>
             <div class="accordion-body">
@@ -109,7 +114,7 @@ <h3>What types of farming does AgriLearnNetwork support?</h3>
           <!--Question-7-->
           <div class="accordion">
             <div class="accordion-header" onclick="toggleAccordion(this)">
-              <span><img src="./faq/Expand-more.svg" alt="Expand"></span>
+              <span><img src="./faq/Expand-more.svg" alt="Expand" data-light-icon="./faq/Expand-more.svg" data-dark-icon="./faq/Expand-more-dark.svg"></span>
               <h3>Is AgriLearnNetwork free to use?</h3>
             </div>
             <div class="accordion-body">
@@ -120,7 +125,7 @@ <h3>Is AgriLearnNetwork free to use?</h3>
           <!--Question-8-->
           <div class="accordion">
             <div class="accordion-header" onclick="toggleAccordion(this)">
-              <span><img src="./faq/Expand-more.svg" alt="Expand"></span>
+              <span><img src="./faq/Expand-more.svg" alt="Expand" data-light-icon="./faq/Expand-more.svg" data-dark-icon="./faq/Expand-more-dark.svg"></span>
               <h3>Can I get personalized advice from experts on Agrilearn Network?</h3>
             </div>
             <div class="accordion-body">
@@ -131,7 +136,7 @@ <h3>Can I get personalized advice from experts on Agrilearn Network?</h3>
           <!--Question-9-->
           <div class="accordion">
             <div class="accordion-header" onclick="toggleAccordion(this)">
-              <span><img src="./faq/Expand-more.svg" alt="Expand"></span>
+              <span><img src="./faq/Expand-more.svg" alt="Expand" data-light-icon="./faq/Expand-more.svg" data-dark-icon="./faq/Expand-more-dark.svg"></span>
               <h3>How can I stay updated with the latest agricultural trends and news?</h3>
             </div>
             <div class="accordion-body">
@@ -143,7 +148,7 @@ <h3>How can I stay updated with the latest agricultural trends and news?</h3>
           <!--Question-10-->
           <div class="accordion">
             <div class="accordion-header" onclick="toggleAccordion(this)">
-              <span><img src="./faq/Expand-more.svg" alt="Expand"></span>
+              <span><img src="./faq/Expand-more.svg" alt="Expand" data-light-icon="./faq/Expand-more.svg" data-dark-icon="./faq/Expand-more-dark.svg"></span>
               <h3>Does AgriLearnNetwork offer any training programs or courses?</h3>
             </div>
             <div class="accordion-body">
@@ -154,7 +159,7 @@ <h3>Does AgriLearnNetwork offer any training programs or courses?</h3>
           <!--Question-11-->
           <div class="accordion">
             <div class="accordion-header" onclick="toggleAccordion(this)">
-              <span><img src="./faq/Expand-more.svg" alt="Expand"></span>
+              <span><img src="./faq/Expand-more.svg" alt="Expand" data-light-icon="./faq/Expand-more.svg" data-dark-icon="./faq/Expand-more-dark.svg"></span>
               <h3>How do I participate in community forums on AgriLearnNetwork?</h3>
             </div>
             <div class="accordion-body">
@@ -243,6 +248,68 @@ <h2>Quick Links</h2>
   <script src="script.js"></script>
 
 
+  <script>
+document.addEventListener('DOMContentLoaded', function () {
+  const themeToggle = document.querySelector('.theme-toggle');
+  const body = document.body;
+  const accordions = document.querySelectorAll('.accordion-header img');
+  
+  // Check for saved user preference, if any, on load of the website
+  const currentTheme = localStorage.getItem('theme');
+  if (currentTheme) {
+    body.classList.add(currentTheme);
+
+    if (currentTheme === 'dark-theme') {
+      themeToggle.querySelector('.fa-sun').style.display = 'none';
+      themeToggle.querySelector('.fa-moon').style.display = 'inline';
+      toggleIcons(true);
+    }
+  }
+
+  themeToggle.addEventListener('click', function () {
+    const isDarkMode = body.classList.toggle('dark-theme');
+
+    if (isDarkMode) {
+      themeToggle.querySelector('.fa-sun').style.display = 'none';
+      themeToggle.querySelector('.fa-moon').style.display = 'inline';
+      localStorage.setItem('theme', 'dark-theme');
+    } else {
+      themeToggle.querySelector('.fa-sun').style.display = 'inline';
+      themeToggle.querySelector('.fa-moon').style.display = 'none';
+      localStorage.setItem('theme', 'light-theme');
+    }
+
+    toggleIcons(isDarkMode);
+  });
+
+  function toggleAccordion(header) {
+    const accordionBody = header.nextElementSibling;
+    const icon = header.querySelector('img');
+    const isOpen = accordionBody.style.display === "block";
+
+    accordionBody.style.display = isOpen ? "none" : "block";
+
+    if (isOpen) {
+      icon.src = icon.getAttribute('data-light-icon');
+    } else {
+      icon.src = icon.getAttribute('data-dark-icon');
+    }
+  }
+
+  function toggleIcons(isDarkMode) {
+    accordions.forEach(icon => {
+      icon.src = isDarkMode ? icon.getAttribute('data-dark-icon') : icon.getAttribute('data-light-icon');
+    });
+  }
+
+  // Initialize the icons based on the current theme
+  toggleIcons(body.classList.contains('dark-theme'));
+});
+
+  </script>
+  
+  
+
   <script src="https://unpkg.com/scrollreveal"></script>
   <script src="https://unpkg.com/typed.js@2.0.16/dist/typed.umd.js"></script>
 
@@ -337,6 +404,9 @@ <h2>Quick Links</h2>
       cursor.style.cssText = cursor2.style.cssText = "left: " + e.clientX + "px; top: " + e.clientY + "px;";
     });
   </script>
+
+
+  
 </body>
 
 </html>
diff --git a/faqpagestyle.css b/faqpagestyle.css
index 1bbef01..9373aa6 100644
--- a/faqpagestyle.css
+++ b/faqpagestyle.css
@@ -805,3 +805,118 @@ font-size: 36px;
     box-shadow: 0 0 1rem var(--main-color);
   }
   
+
+/* Theme Toggle Button */
+.theme-toggle {
+  position: fixed;
+  top: 26px;
+  right: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  background-color: yellow;
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  transition: background-color 0.3s, box-shadow 0.3s;
+  z-index: 1000;
+}
+
+.theme-toggle i {
+  font-size: 20px;
+  color: rgb(3, 3, 38);
+}
+
+.theme-toggle .fa-moon {
+  display: none;
+}
+
+/* Dark Mode Styles */
+
+body.dark-mode .header {
+  background-color: #1e1e1e;
+}
+
+body.dark-mode .theme-toggle {
+  background-color: #ffffff;
+}
+
+body.dark-mode .theme-toggle .fa-sun {
+  display: none;
+}
+
+body.dark-mode .theme-toggle .fa-moon {
+  display: inline;
+}
+
+body.dark-theme {
+  background-color: #121212;
+  color: #ffffff;
+}
+
+body.dark-theme .header,
+body.dark-theme .footer,
+body.dark-theme .navbar {
+  background-color: black;
+}
+
+body.dark-theme .theme-toggle {
+  background-color: rgb(3, 3, 38);
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
+}
+
+body.dark-theme .theme-toggle .fa-sun {
+  display: none;
+}
+
+body.dark-theme .theme-toggle .fa-moon {
+  display: inline;
+  color: #f1c40f;
+}
+
+body.dark-theme .navbar a {
+  color: #f1c40f !important; /* Ensure the color is applied */
+}
+
+
+
+@media screen and (max-width: 1216px) {
+  .theme-toggle {
+    margin-top: 10rem; /* Ensure theme toggle is below the menu icon */
+  }
+}
+
+body.dark-theme .faq .accordion-container {
+  background-color: #1e1e1e;
+  border: 1px solid #444;
+  box-shadow: rgba(0, 0, 0, 0.7) 0px 5px 15px;
+}
+
+body.dark-theme .faq .accordion {
+  border: 1px solid #444;
+}
+
+body.dark-theme .faq .accordion-header {
+  background-color: #333;
+  color: white;
+}
+
+body.dark-theme .faq .accordion-header:hover {
+  background-color: #444;
+}
+
+body.dark-theme .faq .accordion-header h3 {
+  color: white;
+}
+
+body.dark-theme .logo {
+  color: #B19222;
+}
+
+body.dark-theme .faq .accordion-body {
+  background-color: #1e1e1e;
+  color: #ccc;
+}
+