diff --git a/content/footer/_index.md b/content/footer/_index.md
index b4fb670..59a8088 100644
--- a/content/footer/_index.md
+++ b/content/footer/_index.md
@@ -10,7 +10,7 @@ extra:
 
 {% row(style="lean") %}
 
-##### <span class="text-black">TAKE ACTIONS</span>
+##### <span class="">TAKE ACTIONS</span>
 
 <br>
 
@@ -24,7 +24,7 @@ extra:
 
 |||
 
-##### <span class="text-black">ABOUT US</span>
+##### <span class="">ABOUT US</span>
 
 <br>
 
diff --git a/templates/partials/footer.html b/templates/partials/footer.html
index 5a18399..6738d07 100644
--- a/templates/partials/footer.html
+++ b/templates/partials/footer.html
@@ -9,7 +9,15 @@
             <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6">
                 <div class="grid max-w-xl grid-cols-1 gap-x-8 gap-y-16 lg:max-w-none lg:grid-cols-2">
                     <div class="grid-cols-4 space-y-8 lg:max-w-sm xl:max-w-sm lg:mr-8 lg:mb-8 xl:col-span-1">
-                        <img class="w-36 h-auto" src="{{ get_url(path=logoPath)}}" alt="MYCELIUM Logo" />
+                        {# <img class="w-36 h-auto" src="images/mycelium_white.png" alt="MYCELIUM Logo" /> #}
+                        <a href="/" class="flex">
+
+                            <img id="lightLogo" src="images/mycelium_white.png" alt="Light Logo" class="logo light w-36 h-auto" style="max-width: none;">
+                            <img id="darkLogo" src="images/mycelium_dark.png" alt="Dark Logo" class="logo dark w-36 h-auto" style="max-width: none;">
+
+                            
+                          </a>
+
                         <p class="text-gray-200 text-base font-light leading-6">
                             {{section.description}}
                         </p>
@@ -30,6 +38,34 @@
                     </p>
                 </div>
             </div>
+            
+            
         </footer>
     </body>
 </html>
+
+
+<style>
+
+
+/* logo image */
+
+.dark {
+  
+  display: block; /* Show dark logo by default */
+}
+.light {
+   
+  display: none; /* Hide light logo by default */
+}
+
+.dark-mode .dark {
+  
+  display: none; /* Hide dark logo in light mode */
+}
+.dark-mode .light{
+
+  display: block;/* Show light logo in light mode */
+}
+
+</style>
\ No newline at end of file
diff --git a/templates/shortcodes/accordion.html b/templates/shortcodes/accordion.html
index 0f69ef8..1744f02 100644
--- a/templates/shortcodes/accordion.html
+++ b/templates/shortcodes/accordion.html
@@ -12,20 +12,12 @@
             },
         };
     </script>
-    <!-- <main class="fade-in relative flex flex-col justify-center overflow-hidden bg-white"> -->
-        <!-- <div class="w-full mx-auto px-4 md:px-6 py-12 border-t-2"> -->
-
-            <!-- <h1 class="text-3xl lg:text-4xl font-normal tracking-tight text-black pt-12">Frequently Asked Questions</h1> -->
-
-            <!-- Accordion component -->
-            <!-- <div class="divide-y divide-white/50 my-10"> -->
-                <!-- Accordion item -->
                 <div x-data="{ expanded: false }" class="py-2">
                     <h2>
                         <button
                             id="faqs-title-01"
                             type="button"
-                            class="flex items-center justify-between w-full text-left font-semibold py-2 px-4 border rounded-lg"
+                            class="flex items-center justify-between w-full text-left font-semibold py-2 px-4 border-1 border-gray-50 rounded-lg"
                             @click="expanded = !expanded"
                             :aria-expanded="expanded"
                             aria-controls="faqs-text-01"