diff --git a/config.toml b/config.toml
index 39b5ecd..991a9ce 100644
--- a/config.toml
+++ b/config.toml
@@ -1,5 +1,5 @@
 # The URL the site will be built for
-base_url = "https://www2.mycelium.threefold.io/"
+base_url = "https://www3.mycelium.threefold.io/"
 # Change this to your own URL! Please note this variable **must** be uncommented .
 
 title = "Mycelium"
diff --git a/content/download/index.md b/content/download/index.md
index a78ba99..3caa200 100644
--- a/content/download/index.md
+++ b/content/download/index.md
@@ -20,7 +20,7 @@ extra:
 ) }}
 
 <div class="lg:max-w-7xl container mx-auto lg:pb-24 pb-12">
-<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 my-12">
+<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 m mt-10 y-12">
 {{ 
     feature_card(
         title="Download for iOS & MacOS", 
@@ -79,43 +79,51 @@ extra:
 <br>
 
 {{ accordion(
+    id_accordion="accordion1"
     question="What is Mycelium?",
     description="Mycelium is an end-to-end encrypted IPv6 overlay network written in Rust. Each node joining the network receives an IP in the 400::/7 range, facilitating secure and private communications."
 ) }}
 
 {{ accordion(
+    id_accordion="accordion2"
     question="Is mycelium ready to scale to the world?",
     description="No, Mycelium is not yet fully scalable to a global level. Currently, each network can support around 100,000 users, but multiple networks can be deployed to expand capacity. We anticipate resolving these scalability challenges by 2025."
 ) }}
 
 {{ accordion(
+    id_accordion="accordion3"
     question="How do I install Mycelium?",
-    description="The Mycelium app supports iOS, macOS, Android and Windows. For Linux, a binary is available. Installation guides are available for both local machines and virtual machines running on the TFGrid. Note that Windows users need to have wintun.dll in the same directory as the Mycelium executable. Click here for more info."
+    description="The Mycelium app supports iOS, macOS, Android and Windows. For Linux, a binary is available. Installation guides are available for both local machines and virtual machines running on the TFGrid. Note that Windows users need to have wintun.dll in the same directory as the Mycelium executable."
 ) }}
 
 {{ accordion(
+    id_accordion="accordion4"
     question="How can I find and use my Mycelium address?",
     description="Upon using the Mycelium app, you're assigned a unique Mycelium address. To copy this address, click the button located to the right of the displayed address in the app interface."
 ) }}
 
 {{ accordion(
+    id_accordion="accordion5"
     question="Can I deploy workloads on the TFGrid using Mycelium?",
     description="Yes, after installing Mycelium, you can deploy workloads on the TFGrid and connect to them using the Mycelium network. Detailed deployment guides are available in the documentation."
 ) }}
 
 {{ accordion(
+    id_accordion="accordion6"
     question="Is there an API available for Mycelium?",
     description="Yes, Mycelium offers an API for administrative operations, peer management, and message subsystem operations. Comprehensive API documentation can be found in the official Mycelium GitHub repository"
     )
     }}
 
 {{ accordion(
+    id_accordion="accordion7"
     question="What should I do if I encounter issues during installation or usage?",
     description="If you face any challenges, refer to the troubleshooting section in the Mycelium documentation. Additionally, ensure that all prerequisites are met, such as having wintun.dll in the correct directory for Windows installations."
     )
     }}
 
 {{ accordion(
+    id_accordion="accordion8"
     question="How does Mycelium handle routing within its network?",
     description="Mycelium incorporates core principles of the Babel routing protocol, enabling efficient and dynamic routing within its encrypted IPv6 overlay network."
     )
diff --git a/content/footer/_index.md b/content/footer/_index.md
index b4fb670..2b77400 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>
+##### ABOUT US
 
 <br>
 
diff --git a/content/home/index.md b/content/home/index.md
index a69b9ec..ed3959e 100644
--- a/content/home/index.md
+++ b/content/home/index.md
@@ -28,7 +28,7 @@ extra:
     image_src="/images/mycel2.png",
     image_alt="Discover Mycelium",
     title="Discover Mycelium",
-    subtitle_1="ABOUT",
+    subheader="ABOUT",
     description="Mycelium is an unbreakable network, always finding the shortest path and providing 100% secure, peer-to-peer communication. But this is just the beginning.",
     description_2="Our mission is to create a sustainable digital ecosystem where communication is seamless, data is secure, and scalability knows no bounds.",
     button_text="Learn more",
@@ -67,11 +67,11 @@ extra:
 
 <div class="lg:max-w-7xl container mx-auto py-12 lg:pb-24 px-4">
 <div class="mx-auto grid grid-cols-1 gap-x-6 gap-y-10 text-base sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-2 lg:gap-x-8 lg:gap-y-8">
-<div class="relative ">
+<div class="relative my-4 ">
 
 ######  **PRODUCTIVITY & COMMUNICATION**
 
-<div class="mt-2">
+<div class="mt-1">
 
 - Secure remote work collaboration.
 - Private file sharing between trusted nodes.
@@ -82,11 +82,11 @@ extra:
 </div>
 </div>
 
-<div class="relative ">
+<div class="relative my-4 ">
 
 ######  **INFRASTRUCTURE**
 
-<div class="mt-2">
+<div class="mt-1">
 
 - Private cloud computing resources.
 - Secure IoT device networks.
@@ -97,11 +97,11 @@ extra:
 </div>
 </div>
 
-<div class="relative ">
+<div class="relative my-4 ">
 
 ######  **SERVICES**
 
-<div class="mt-2">
+<div class="mt-1">
 
 - Self-hosted web services.
 - Private file sharing between trusted nodes.
@@ -112,11 +112,11 @@ extra:
 </div>
 </div>
 
-<div class="relative ">
+<div class="relative my-4">
 
 ###### **MEDIA & CONTENT**
 
-<div class="mt-2">
+<div class="mt-1">
 
 - Private media streaming.
 - Personal cloud storage.
@@ -134,7 +134,7 @@ extra:
 ---------------------------------------------
 
 <div class="mx-auto mt-10 px-6 lg:px-0 lg:max-w-6xl">
-      <a href="/download" class=" rounded-2xl bg-black px-6 py-2 text-sm font-semibold text-white shadow-xs hover:bg-gray-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-200">Get Started</a>
+      <a href="/download" class=" rounded-2xl bg-black border border-gray-50 px-6 py-2 text-sm font-semibold text-white shadow-xs hover:bg-gray-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-200">Get Started</a>
 </div>
 
 
@@ -154,7 +154,7 @@ extra:
 ) }}
 
 <div class="lg:max-w-7xl container mx-auto lg:pb-24 pb-12">
-<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 my-12">
+<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mt-10 my-12">
 
 {{ 
    feature_card(
@@ -201,7 +201,7 @@ extra:
 ) }}
 
 <div class="lg:max-w-7xl container mx-auto lg:pb-24 pb-12">
-<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 my-12">
+<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mt-10 my-12">
 {{ 
     feature_card(
         title="Decentralization", 
@@ -250,43 +250,51 @@ extra:
 <br>
 
 {{ accordion(
+    id_accordion="accordion1"
     question="What is Mycelium?",
     description="Mycelium is an end-to-end encrypted IPv6 overlay network written in Rust. Each node joining the network receives an IP in the 400::/7 range, facilitating secure and private communications."
 ) }}
 
 {{ accordion(
+    id_accordion="accordion2"
     question="Is mycelium ready to scale to the world?",
     description="No, Mycelium is not yet fully scalable to a global level. Currently, each network can support around 100,000 users, but multiple networks can be deployed to expand capacity. We anticipate resolving these scalability challenges by 2025."
 ) }}
 
 {{ accordion(
+    id_accordion="accordion3"
     question="How do I install Mycelium?",
-    description="The Mycelium app supports iOS, macOS, Android and Windows. For Linux, a binary is available. Installation guides are available for both local machines and virtual machines running on the TFGrid. Note that Windows users need to have wintun.dll in the same directory as the Mycelium executable. Click here for more info."
+    description="The Mycelium app supports iOS, macOS, Android and Windows. For Linux, a binary is available. Installation guides are available for both local machines and virtual machines running on the TFGrid. Note that Windows users need to have wintun.dll in the same directory as the Mycelium executable."
 ) }}
 
 {{ accordion(
+    id_accordion="accordion4"
     question="How can I find and use my Mycelium address?",
     description="Upon using the Mycelium app, you're assigned a unique Mycelium address. To copy this address, click the button located to the right of the displayed address in the app interface."
 ) }}
 
 {{ accordion(
+    id_accordion="accordion5"
     question="Can I deploy workloads on the TFGrid using Mycelium?",
     description="Yes, after installing Mycelium, you can deploy workloads on the TFGrid and connect to them using the Mycelium network. Detailed deployment guides are available in the documentation."
 ) }}
 
 {{ accordion(
+    id_accordion="accordion6"
     question="Is there an API available for Mycelium?",
     description="Yes, Mycelium offers an API for administrative operations, peer management, and message subsystem operations. Comprehensive API documentation can be found in the official Mycelium GitHub repository"
     )
     }}
 
 {{ accordion(
+    id_accordion="accordion7"
     question="What should I do if I encounter issues during installation or usage?",
     description="If you face any challenges, refer to the troubleshooting section in the Mycelium documentation. Additionally, ensure that all prerequisites are met, such as having wintun.dll in the correct directory for Windows installations."
     )
     }}
 
 {{ accordion(
+    id_accordion="accordion8"
     question="How does Mycelium handle routing within its network?",
     description="Mycelium incorporates core principles of the Babel routing protocol, enabling efficient and dynamic routing within its encrypted IPv6 overlay network."
     )
diff --git a/css/code.css b/css/code.css
deleted file mode 100644
index 60120a3..0000000
--- a/css/code.css
+++ /dev/null
@@ -1,94 +0,0 @@
-code.language-html,
-code.language-css,
-code.language-md,
-code.language-cmd,
-code.language-bash,
-code.language-text,
-code.language-js,
-span.o,
-span.nx {
-  color: rgb(255, 255, 255);
-  line-height: 1.4;
-}
-span.c {
-  color: hsl(120, 100%, 20%);
-}
-
-.active {
-  color: #2E83FF;
-}
-
-span.p,
-span.s1,
-span.s2,
-span.nt {
-  color: hsl(40, 100%, 30%);
-}
-
-span.gs,
-span.gh,
-span.ge {
-  color: hsl(208, 100%, 50%);
-}
-
-span.gs {
-  font-weight: bold;
-}
-
-span.ge {
-  font-style: italic;
-}
-
-pre,
-code {
-  @apply font-mono;
-}
-
-code {
-  background-color: hsl(0, 0%, 98%);
-  border-radius: 3px;
-  color: hsl(120, 100%, 20%);
-  font-size: 85%;
-}
-
-pre {
-  margin: 0;
-  margin: 0;
-  padding: 1rem;
-  overflow: scroll;
-}
-
-pre code {
-  background-color: transparent;
-  color: inherit;
-  font-size: 100%;
-  padding: 0;
-}
-
-.highlight {
-  background-color: transparent;
-  border-radius: 3px;
-  margin: 0 0 0.5rem;
-  padding: 0;
-
-  & pre {
-    margin-bottom: 0;
-    overflow-x: auto;
-  }
-
-  & .lineno {
-    color: hsla(0, 0%, 67%, 0.72);
-    display: inline-block; /* Ensures the null space also isn't selectable */
-    padding: 0 0.75rem 0 0.25rem;
-    /* Make sure numbers aren't selectable */
-  }
-}
-
-/* TODO: dark theme for future
-@media (prefers-color-scheme: dark) {
-  code {
-    color: #fff;
-    background: hsl(200, 63%, 15%);
-  }
-}
-*/
diff --git a/css/index.css b/css/index.css
index 123496a..1c2336e 100644
--- a/css/index.css
+++ b/css/index.css
@@ -1,7 +1,4 @@
-/*! purgecss start ignore */
-/* @import "nav.css"; */
-@import "code.css";
-/*! purgecss end ignore */
+
 
 @import "tailwindcss/base";
 @import "layout.css";
@@ -13,71 +10,79 @@
 @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
 
 /* Defaul lightMode */
-body.light-mode {
+body {
   background-color: #ffffff;
   color: #000000;
 }
 
-body.light-mode .semigray {
-  
-  color: #424242 !important;
-}
-
-body.light-mode .semigray2 {
-  
-  color: #424242 !important;
-}
-
-body.light-mode .dropdown a{
-  @apply
-  px-0
-  text-black
-}
-
-body.light-mode .dropdown{
-  background-color: rgb(255 255 255 / 100%);
-  color: #121212;
-}
-
-body.light-mode .d_menu {
-  background-color: #e5e5e5;
-}
-
-body.light-mode .icon {
-  
-  fill: #424242 !important;
-}
-
-/* Dark Mode */
-body {
-  background-color: #121212;
-  color: #ffffff;
-}
-
 body .semigray {
-  color: #e5e7eb !important;
+  
+  color: #424242 !important;
 }
 
 body .semigray2 {
-  color: #d1d5db !important;
+  
+  color: #424242 !important;
 }
 
-body .icon {
-  fill: #ffffff !important;
+body .nav a {
+  color: #333333 !important;
 }
 
 body .dropdown a{
   @apply
   px-0
-  text-white
+  text-black
 }
 
 body .dropdown{
+  background-color: rgb(255 255 255 / 100%);
+  color: #121212;
+}
+
+body .d_menu {
+  background-color: #e5e5e5;
+}
+
+body .icon {
+  
+  fill: #424242 !important;
+}
+
+/* Dark Mode */
+body.dark-mode {
+  background-color: #121212;
+  color: #ffffff;
+}
+
+body.dark-mode .nav a {
+  color: #ffffff !important;
+}
+
+body.dark-mode .semigray {
+  color: #e5e7eb !important;
+}
+
+body.dark-mode .semigray2 {
+  color: #d1d5db !important;
+}
+
+body.dark-mode .icon {
+  fill: #ffffff !important;
+}
+
+body.dark-mode .dropdown a{
+  @apply
+  px-0
+  text-white
+}
+
+body.dark-mode .dropdown{
   background-color: rgb(0 0 0 / 50%);
   color: #fff;
 }
 
-body .d_menu {
+body.dark-mode .d_menu {
   background-color: rgba(34 34 34);
 }
 
@@ -267,10 +272,6 @@ background-color:#5596f5 !important;
 }
 
 
-.blue{
-  color:#2E83FF
-}
-
 .nav p > a {
   display: flex;
   width: 100%;
diff --git a/css/index.css.bak b/css/index.css.bak
new file mode 100644
index 0000000..1c2336e
--- /dev/null
+++ b/css/index.css.bak
@@ -0,0 +1,743 @@
+
+
+@import "tailwindcss/base";
+@import "layout.css";
+@import "tailwindcss/components";
+@import "admonition.css";
+@import "tailwindcss/utilities";
+@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
+
+@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
+
+/* Defaul lightMode */
+body {
+  background-color: #ffffff;
+  color: #000000;
+}
+
+body .semigray {
+  
+  color: #424242 !important;
+}
+
+body .semigray2 {
+  
+  color: #424242 !important;
+}
+
+body .nav a {
+  color: #333333 !important;
+}
+
+body .dropdown a{
+  @apply
+  px-0
+  text-black
+}
+
+body .dropdown{
+  background-color: rgb(255 255 255 / 100%);
+  color: #121212;
+}
+
+body .d_menu {
+  background-color: #e5e5e5;
+}
+
+body .icon {
+  
+  fill: #424242 !important;
+}
+
+/* Dark Mode */
+body.dark-mode {
+  background-color: #121212;
+  color: #ffffff;
+}
+
+body.dark-mode .nav a {
+  color: #ffffff !important;
+}
+
+body.dark-mode .semigray {
+  color: #e5e7eb !important;
+}
+
+body.dark-mode .semigray2 {
+  color: #d1d5db !important;
+}
+
+body.dark-mode .icon {
+  fill: #ffffff !important;
+}
+
+body.dark-mode .dropdown a{
+  @apply
+  px-0
+  text-white
+}
+
+body.dark-mode .dropdown{
+  background-color: rgb(0 0 0 / 50%);
+  color: #fff;
+}
+
+body.dark-mode .d_menu {
+  background-color: rgba(34 34 34);
+}
+
+
+
+
+
+/* Custom CSS for header partial */
+.backdrop-blur {
+  -webkit-backdrop-filter: blur(40px);
+}
+
+* {
+  font-family: "Inter", sans-serif;
+}
+
+.bg-semi-white {
+  background-color: rgba(255, 255, 255, 0.75);
+}
+
+.bg-dark-gradient {
+  background: rgba(16,16,16,1);
+  background: radial-gradient(circle, rgba(16,16,16,1) 0%, rgb(24, 24, 24) 50%, rgba(16,16,16,1) 100%);
+}
+
+.bg-black1 {
+  background-color: rgba(16,16,16,1);
+}
+
+.bg-transparent {
+  background-color: transparent;
+}
+
+
+
+/* Custom css allowing image styling in markdown */
+img[src*="#mx-auto"] {
+  margin: auto;
+}
+
+img[src*="#small"] {
+  width: 68px;
+}
+
+img[src*="#medium"] {
+  width: 400px;
+  margin: auto;
+}
+
+img[src*="#logo"] {
+  max-width: min(250px, 100%);
+  margin: auto;
+}
+
+img[src*="#icon"] {
+  width: 200px;
+  margin: auto;
+}
+
+img[src*="#social"] {
+  width: 60px;
+  margin: auto;
+}
+
+img[src*="#semilarge"] {
+  width: 500px;
+  margin: auto;
+}
+
+img[src*="#large"] {
+  width: 700px;
+  margin: auto;
+}
+
+img[src*="#tft_img"] {
+  width: 100px;
+  margin: auto;
+}
+
+img[src*="#absolute"] {
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+
+a img:hover{
+  opacity: 0.5 !important;
+  cursor: pointer;
+}
+
+/* new theme */
+
+.dropdown { 
+
+  background-color: rgb(0 0 0 / 50%);
+  @apply
+  lg:text-lg
+  px-6
+  py-1
+  lg:mr-5
+  my-3
+  shadow
+  border-black
+  capitalize 
+  leading-6 
+  border-transparent 
+  flex 
+  flex-col
+  border-2 
+  w-full 
+  items-start
+  rounded 
+  transition  
+  hover:border-stone-700 
+  /* hover:bg-stone-100  */
+  p-2 
+  text-left
+  text-white
+}
+
+.dropdown a{
+  @apply
+  px-0
+  text-white
+}
+
+.subtitle {
+  background-color:#58CF77 !important;
+  color: #fff !important;
+  text-transform: uppercase;
+  /* font-weight: 600 !important;  */
+}
+
+.green{
+
+  background-color:#58CF77 !important;
+  color: #fff !important;
+
+}
+
+.green:hover {
+background-color:#7ad993 !important;
+}
+.green a{
+   color: #fff !important;
+}
+
+.green:hover {
+background-color:#7ad993 !important;
+}
+
+.green_text{
+color: #58CF77 ;
+}
+
+
+  .blue_b{
+
+  background-color:#2E83FF !important;
+  color: #fff !important;
+
+}
+.blue_b a{
+   color: #fff !important;
+}
+
+.blue_b:hover {
+background-color:#5596f5 !important;
+}
+
+
+.footer-cust a{
+  color: #999; 
+  cursor: pointer;
+}
+
+.footer-cust a:hover {
+  color: #c7c7c7; 
+}
+
+.footer-cust h6{
+  margin-bottom: 15px;
+}
+
+.logo_size{
+  width:200px
+}
+
+
+.nav p > a {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  align-items: flex-start;
+  text-align: left;
+  line-height: 1.5rem;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+  border-radius: 0.25rem;
+  border-width: 2px;
+  border-color: transparent;
+  padding: 0.5rem;
+  margin-top: 0.75rem;
+  margin-bottom: 0.75rem;
+  display: inline-block;
+  border-width: 2px;
+  border-color: rgb(0 0 0 / var(--tw-border-opacity));
+  padding-left: 3rem;
+  padding-right: 3rem;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  text-transform: capitalize;
+  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+}
+
+.nav p > a:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(231 229 228 / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgb(245 245 244 / var(--tw-bg-opacity));
+}
+
+.big_header{
+  font-size: 6rem !important;
+  font-weight: 500 !important;
+}
+
+.mycard{
+  height: 300px !important;
+}
+
+
+.mypartners{
+  height: 300px !important;
+
+}
+
+.key_card{
+
+  height: 250px;
+
+}
+
+
+@layer components {
+  h1 {
+    @apply text-4xl lg:text-6xl font-normal;
+    font-family: "Inter", sans-serif !important;
+  }
+  h2 {
+    @apply text-3xl lg:text-4xl my-4 font-normal leading-none;
+    font-family: "Inter", sans-serif !important;
+  }
+  h2 strong {
+    @apply font-semibold;
+  }
+  h3 {
+    @apply text-2xl lg:text-3xl my-4 font-extralight;
+    font-family: "Inter", sans-serif !important;
+  }
+  h3 strong {
+    @apply font-normal;
+  }
+  h4 {
+    @apply text-xl lg:text-2xl font-normal tracking-wider;
+    font-family: "Inter", sans-serif !important;
+    
+  }
+  h5 {
+    @apply text-lg my-1 tracking-normal font-medium;
+    font-family: "Inter", sans-serif !important;
+   
+  }
+  h6 {
+    @apply text-md not-italic font-normal my-1;
+    font-family: "Inter", sans-serif !important;
+  }
+  p {
+    @apply text-lg;
+   
+    font-family: "Inter", sans-serif !important;
+  }
+  blockquote {
+    @apply border-l-4 border-gray-400 mx-2 my-2 p-2;
+  }
+  li {
+    @apply text-base lg:text-base font-normal;
+  }
+  li li {
+    @apply text-sm lg:text-sm font-light;
+  }
+  button {
+    @apply 
+    inline-block
+    md:text-md
+    text-sm
+    lg:mr-3
+    py-1
+    my-2
+    border
+    rounded
+    shadow
+    border-gray-400
+    capitalize
+    bg-gray-200
+  }
+  .my-header h4{
+    color:#9f9f9f;
+
+  }
+
+  h3 a{
+    color:#ffffff;
+
+  }
+
+  h3 a:hover{
+    color:#b6b6b6;
+
+  }
+  
+ 
+ 
+
+
+  .article h2{
+    font-size: 2.25rem;
+    font-family: "Inter", sans-serif;
+    line-height: 1.5;
+    font-weight: 700;
+    color:#e2e2e2;
+  }
+  
+  .article h1{
+    font-family: "Inter", sans-serif;
+  }
+
+  }
+  .article p{
+    font-size: 1.125rem;
+    font-family: "Inter", sans-serif;
+    line-height: 1.7;
+    color:#e2e2e2
+  }
+  
+  .post-content-text a, .article a{
+    color: #a5a5a5;
+  }
+  
+  .post-content-text a:hover, .article a:hover{
+    color: #c6c9c8;
+  }
+
+  .article li{
+    font-size: 1.125rem;
+    font-family: "Inter", sans-serif;
+    line-height: 1.7;
+    color:#e2e2e2
+  }
+
+  .article h3{
+    font-weight: 400;
+   
+  }
+
+  .article h4{
+    color: #fff !important;
+   
+  }
+
+  .main-title {
+    font-family: "Inter", sans-serif;
+  }
+
+
+/* button:hover :is(:where(a)) {
+  color: #5e5e5e;
+} */
+
+button :is(:where(p)) {
+  color: #ddd;
+  font-weight: 400;
+}
+
+button a {
+  line-height: 1.3;
+  @apply
+  text-black
+  px-8
+}
+
+.long-text a{
+  padding-left: 2rem;
+  padding-right: 2rem;
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity));
+}
+
+a {
+  border-width: 0px;
+}
+
+header {
+  font-family: "Inter", sans-serif;
+}
+
+.nav_btn {
+  margin: 0 !important;
+  border: none !important;
+  box-shadow: none !important;
+}
+
+.quicklinks {
+  box-sizing: border-box;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: auto;
+  margin: 0 auto;
+  border-radius: 10px;
+  margin-top: 30px;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-bottom: 20px;
+}
+.quicklinks img {
+  height: auto;
+  max-width: 200px;
+  display: inline-block;
+  padding: 10px;
+  -webkit-filter: grayscale(100%);
+  filter: grayscale(100%);
+  position: relative;
+  
+  -webkit-transition: all 0.2s ease;
+  transition: all 0.2s ease;
+  opacity: 0.5;
+}
+
+.quicklinks img:hover {
+  opacity: 1;
+  -webkit-transition: all 0.2s ease;
+  transition: all 0.2s ease;
+  -webkit-filter: grayscale(0%);
+  filter: grayscale(0%);
+}
+
+
+.banner {
+  width: 100%;
+  margin: 0;
+  padding: 120px 0;
+  text-align: center;
+  position: relative;
+  display: block;
+  color: #fff !important;
+  letter-spacing: 0.5px;
+  overflow: hidden;
+  background: #00838d;
+  transition: 1.5s;
+}
+
+.header {
+  height: auto;
+  background: none;
+  padding: 200px 0;
+}
+
+.banner h2,
+.header h1 {
+  margin: auto;
+  color: #fff;
+  position: relative;
+  transition: 0.3s;
+  z-index: 1;
+  white-space: nowrap;
+}
+
+.header h1 {
+  color: #000;
+  transition: none;
+}
+
+.banner h2 svg {
+  font-size: 40px;
+  margin-left: 15px;
+  position: absolute;
+  top: 55%;
+  transform: translateY(-50%) scale(0.5);
+  opacity: 0;
+  transition: 0.3s;
+}
+
+.banner .back {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-position: center;
+  background-size: cover;
+  filter: grayscale(1) contrast(1.4);
+  opacity: 0.25;
+  transition: 1.5s;
+}
+
+.header .back {
+  filter: none;
+  opacity: 1;
+  background-position: center;
+
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+
+.banner:hover {
+  background: #4b3a92;
+}
+
+.header:hover {
+  background: none;
+}
+
+.banner:hover h2 svg {
+  transform: translateY(-50%) scale(1);
+  opacity: 1;
+}
+
+.banner:hover h2 {
+  padding-right: 40px;
+}
+
+.header:hover h1 {
+  padding-right: 0;
+}
+
+.banner:hover .back {
+  transform: scale(1.03);
+}
+
+.header:hover .back {
+  transform: none;
+}
+
+.my-test{
+  font-family: "Inter", sans-serif;
+} 
+.post-content-text .my-test  {
+  font-family: "Inter", sans-serif;
+  line-height: 1.7;
+}
+
+.post-content-text h2 {
+  font-family: "Inter", sans-serif;
+  line-height: 1.5;
+  font-size: 2.25rem;
+  font-weight: 700;
+}
+.container-fluid {
+  width: 100%;
+  /* padding-right: 15px;
+  padding-left: 15px; */
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.zola-anchor {
+  display: none;
+}
+@media (min-width: 1024px){
+  h2 {
+    font-size: 3.5rem;
+  } 
+  
+}
+
+@media (max-width: 1024px) {
+
+  .mycard{
+    height: auto !important;
+  }
+
+}
+
+@media (max-width: 640px) {
+  .banner h2 {
+    font: 600 7vw/10vw;
+  }
+
+  .header h1 {
+    font-size: 35px;
+  }
+
+  .banner h2 svg {
+    font-size: 30px;
+  }
+  .arrow img{
+    -moz-transform:rotate(90deg);
+   -webkit-transform:rotate(90deg);
+   -ms-transform:rotate(90deg);
+   transform: rotate(90deg);   
+   }
+
+   .mycard{
+    height: auto !important;
+  }
+}
+
+@media (max-width: 480px) {
+  .banner,
+  .header {
+    padding: 80px 0;
+  }
+
+  .article h2{
+    font-size: 1.5rem;
+  }
+
+  img[src*="#medium"] {
+    width: 250px;
+    margin: auto;
+  }
+
+  img[src*="#sm_none"] {
+    display: none;
+  }
+
+  .big_header{
+    font-size: 4rem !important;
+   
+  }
+
+  .mytest{
+    height: auto;
+  }
+
+  .card_h {
+         height: auto !important;
+  }
+
+  .mycard{
+    height: auto !important;
+  }
+
+  .key_card{
+    height: auto;
+  }
+
+  .mypartners{
+    height: auto;
+  
+  }
+  
+}
+
diff --git a/static/images/404_1.png b/static/images/404_1.png
new file mode 100644
index 0000000..0fc94a7
Binary files /dev/null and b/static/images/404_1.png differ
diff --git a/static/images/about1.jpg b/static/images/about1.jpg
deleted file mode 100644
index 353bb22..0000000
Binary files a/static/images/about1.jpg and /dev/null differ
diff --git a/static/images/about2.jpg b/static/images/about2.jpg
deleted file mode 100644
index b368cda..0000000
Binary files a/static/images/about2.jpg and /dev/null differ
diff --git a/static/images/about3.jpg b/static/images/about3.jpg
deleted file mode 100644
index e0e2c6b..0000000
Binary files a/static/images/about3.jpg and /dev/null differ
diff --git a/static/images/about4.jpg b/static/images/about4.jpg
deleted file mode 100644
index d22d664..0000000
Binary files a/static/images/about4.jpg and /dev/null differ
diff --git a/static/images/ai.jpg b/static/images/ai.jpg
deleted file mode 100644
index 9a28c24..0000000
Binary files a/static/images/ai.jpg and /dev/null differ
diff --git a/static/images/asset.jpg b/static/images/asset.jpg
deleted file mode 100644
index 30c353b..0000000
Binary files a/static/images/asset.jpg and /dev/null differ
diff --git a/static/images/bot2.jpg b/static/images/bot2.jpg
deleted file mode 100644
index 8062d49..0000000
Binary files a/static/images/bot2.jpg and /dev/null differ
diff --git a/static/images/datacenter.jpg b/static/images/datacenter.jpg
deleted file mode 100644
index db61937..0000000
Binary files a/static/images/datacenter.jpg and /dev/null differ
diff --git a/static/images/dc.jpg b/static/images/dc.jpg
deleted file mode 100644
index 6c22071..0000000
Binary files a/static/images/dc.jpg and /dev/null differ
diff --git a/static/images/dc2.jpg b/static/images/dc2.jpg
deleted file mode 100644
index 554cf5f..0000000
Binary files a/static/images/dc2.jpg and /dev/null differ
diff --git a/static/images/decent.png b/static/images/decent.png
deleted file mode 100644
index 273b03f..0000000
Binary files a/static/images/decent.png and /dev/null differ
diff --git a/static/images/digital.jpg b/static/images/digital.jpg
deleted file mode 100644
index d041bef..0000000
Binary files a/static/images/digital.jpg and /dev/null differ
diff --git a/static/images/eco.jpg b/static/images/eco.jpg
deleted file mode 100644
index 237a008..0000000
Binary files a/static/images/eco.jpg and /dev/null differ
diff --git a/static/images/eco2.jpg b/static/images/eco2.jpg
deleted file mode 100644
index 5325c4d..0000000
Binary files a/static/images/eco2.jpg and /dev/null differ
diff --git a/static/images/eco3.jpg b/static/images/eco3.jpg
deleted file mode 100644
index 37feefe..0000000
Binary files a/static/images/eco3.jpg and /dev/null differ
diff --git a/static/images/effic.png b/static/images/effic.png
deleted file mode 100644
index 71ebf4e..0000000
Binary files a/static/images/effic.png and /dev/null differ
diff --git a/static/images/feature6.png b/static/images/feature6.png
deleted file mode 100644
index 6f5b953..0000000
Binary files a/static/images/feature6.png and /dev/null differ
diff --git a/static/images/freezone.jpg b/static/images/freezone.jpg
deleted file mode 100644
index 7d78c69..0000000
Binary files a/static/images/freezone.jpg and /dev/null differ
diff --git a/static/images/freezone2.jpg b/static/images/freezone2.jpg
deleted file mode 100644
index c17c5b1..0000000
Binary files a/static/images/freezone2.jpg and /dev/null differ
diff --git a/static/images/fumba.jpg b/static/images/fumba.jpg
deleted file mode 100644
index 2b5c4a6..0000000
Binary files a/static/images/fumba.jpg and /dev/null differ
diff --git a/static/images/fumba.webp b/static/images/fumba.webp
deleted file mode 100644
index 2e93a08..0000000
Binary files a/static/images/fumba.webp and /dev/null differ
diff --git a/static/images/hero.png b/static/images/hero.png
deleted file mode 100644
index 8eee350..0000000
Binary files a/static/images/hero.png and /dev/null differ
diff --git a/static/images/hero2.png b/static/images/hero2.png
deleted file mode 100644
index 5fb7d1f..0000000
Binary files a/static/images/hero2.png and /dev/null differ
diff --git a/static/images/hero3.png b/static/images/hero3.png
deleted file mode 100644
index 473fd09..0000000
Binary files a/static/images/hero3.png and /dev/null differ
diff --git a/static/images/hero4.png b/static/images/hero4.png
deleted file mode 100644
index 1ed321e..0000000
Binary files a/static/images/hero4.png and /dev/null differ
diff --git a/static/images/hero5.png b/static/images/hero5.png
deleted file mode 100644
index 96b0e93..0000000
Binary files a/static/images/hero5.png and /dev/null differ
diff --git a/static/images/home.jpg b/static/images/home.jpg
deleted file mode 100644
index 803ca3b..0000000
Binary files a/static/images/home.jpg and /dev/null differ
diff --git a/static/images/home1.jpg b/static/images/home1.jpg
deleted file mode 100644
index 0dd178e..0000000
Binary files a/static/images/home1.jpg and /dev/null differ
diff --git a/static/images/mycel5.png b/static/images/mycel5.png
deleted file mode 100644
index b6455a6..0000000
Binary files a/static/images/mycel5.png and /dev/null differ
diff --git a/static/images/mycel_1.png b/static/images/mycel_1.png
index 33876c2..fb2f4fd 100644
Binary files a/static/images/mycel_1.png and b/static/images/mycel_1.png differ
diff --git a/static/images/new_logo_tft.png b/static/images/new_logo_tft.png
deleted file mode 100644
index 0696f4c..0000000
Binary files a/static/images/new_logo_tft.png and /dev/null differ
diff --git a/static/images/people_1.jpg b/static/images/people_1.jpg
deleted file mode 100644
index 6660d0e..0000000
Binary files a/static/images/people_1.jpg and /dev/null differ
diff --git a/static/images/people_2.jpg b/static/images/people_2.jpg
deleted file mode 100644
index 3621795..0000000
Binary files a/static/images/people_2.jpg and /dev/null differ
diff --git a/static/images/people_3.jpg b/static/images/people_3.jpg
deleted file mode 100644
index 015e8d5..0000000
Binary files a/static/images/people_3.jpg and /dev/null differ
diff --git a/static/images/people_4.jpg b/static/images/people_4.jpg
deleted file mode 100644
index 54d8537..0000000
Binary files a/static/images/people_4.jpg and /dev/null differ
diff --git a/static/images/people_5.jpg b/static/images/people_5.jpg
deleted file mode 100644
index d40346a..0000000
Binary files a/static/images/people_5.jpg and /dev/null differ
diff --git a/static/images/resil.png b/static/images/resil.png
deleted file mode 100644
index 3c6e1ab..0000000
Binary files a/static/images/resil.png and /dev/null differ
diff --git a/static/images/startup.jpg b/static/images/startup.jpg
deleted file mode 100644
index ab13696..0000000
Binary files a/static/images/startup.jpg and /dev/null differ
diff --git a/static/images/startup1.jpg b/static/images/startup1.jpg
deleted file mode 100644
index f68ef6d..0000000
Binary files a/static/images/startup1.jpg and /dev/null differ
diff --git a/static/images/twin.jpg b/static/images/twin.jpg
deleted file mode 100644
index 4d263b7..0000000
Binary files a/static/images/twin.jpg and /dev/null differ
diff --git a/static/images/znz.jpg b/static/images/znz.jpg
deleted file mode 100644
index f163243..0000000
Binary files a/static/images/znz.jpg and /dev/null differ
diff --git a/static/images/zone.jpg b/static/images/zone.jpg
deleted file mode 100644
index 1283d7b..0000000
Binary files a/static/images/zone.jpg and /dev/null differ
diff --git a/static/images/zone1.jpg b/static/images/zone1.jpg
deleted file mode 100644
index a79d938..0000000
Binary files a/static/images/zone1.jpg and /dev/null differ
diff --git a/static/images/zone2.jpg b/static/images/zone2.jpg
deleted file mode 100644
index f543b89..0000000
Binary files a/static/images/zone2.jpg and /dev/null differ
diff --git a/static/js/custom.js b/static/js/custom.js
index f22048e..e879bee 100644
--- a/static/js/custom.js
+++ b/static/js/custom.js
@@ -164,33 +164,33 @@ function readingTime() {
   }
 }
 
-async function getStats() {
-  try {
-    const stats = await fetch(
-      "https://stats.grid.tf/api/stats-summary"
-    ).then((res) => res.json());
-    return formatStatsData(stats);
-  } catch (error) {
-    throw new Error(
-      `Failed to retrieve data from network statistics: ${error}`
-    );
-  }
-}
+// async function getStats() {
+//   try {
+//     const stats = await fetch(
+//       "https://stats.grid.tf/api/stats-summary"
+//     ).then((res) => res.json());
+//     return formatStatsData(stats);
+//   } catch (error) {
+//     throw new Error(
+//       `Failed to retrieve data from network statistics: ${error}`
+//     );
+//   }
+// }
 
-function formatStatsData(stats) {
-  let items = document.querySelector(".items");
-  items.classList.remove("animate-pulse");
-  document.getElementById("ssd").innerHTML = stats.ssd;
-  document.getElementById("nodes").innerHTML = stats.nodes;
-  document.getElementById("countries").innerHTML = stats.countries;
-  document.getElementById("cores").innerHTML = stats.cores
-    .toString()
-    .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
-}
+// function formatStatsData(stats) {
+//   let items = document.querySelector(".items");
+//   items.classList.remove("animate-pulse");
+//   document.getElementById("ssd").innerHTML = stats.ssd;
+//   document.getElementById("nodes").innerHTML = stats.nodes;
+//   document.getElementById("countries").innerHTML = stats.countries;
+//   document.getElementById("cores").innerHTML = stats.cores
+//     .toString()
+//     .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+// }
 
-readingTime();
-getStats();
-document.getElementById("year").innerHTML = new Date().getFullYear();
+// readingTime();
+// getStats();
+// document.getElementById("year").innerHTML = new Date().getFullYear();
 
 
 // Get elements
@@ -201,11 +201,11 @@ const body = document.body;
 document.addEventListener('DOMContentLoaded', () => {
     const savedTheme = localStorage.getItem('theme') || 'light'; // Default is light mode
 
-    if (savedTheme === 'light') {
-        body.classList.add('light-mode');
+    if (savedTheme === 'dark') {
+        body.classList.add('dark-mode');
         toggleSwitch.checked = true;
     } else {
-        body.classList.remove('light-mode');
+        body.classList.remove('dark-mode');
         toggleSwitch.checked = false;
     }
 });
@@ -213,12 +213,11 @@ document.addEventListener('DOMContentLoaded', () => {
 // Toggle between light and dark mode
 toggleSwitch.addEventListener('change', () => {
     if (toggleSwitch.checked) {
-        body.classList.add('light-mode');
-        localStorage.setItem('theme', 'light');
-    } else {
-        body.classList.remove('light-mode');
+        body.classList.add('dark-mode');
         localStorage.setItem('theme', 'dark');
+    } else {
+        body.classList.remove('dark-mode');
+        localStorage.setItem('theme', 'light');
     }
 });
 
-
diff --git a/tailwind.config.js b/tailwind.config.js
index 1c659e7..eb65f68 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,30 +1,15 @@
 const colors = require('tailwindcss/colors')
 
 module.exports = {
+  darkMode: 'class',
   content: [
       './templates/**/*.html'
   ],
   safelist: [
-    {
-      pattern: /(-|)(ml|mr)-(4|8|12|16|20|24|28)/,
-      variants: [
-        'sm', 'md', 'lg', 
-        'first', 'first:sm', 'first:md', 'first:lg', 
-        'last', 'last:sm', 'last:md', 'last:lg'
-      ],
-    },
-    {
-      pattern: /(pt|pb)-(0)/,
-      variants: [
-        '!', 'lg', 
-        'first', 'first:sm', 'first:md', 'first:lg', 
-        'last', 'last:sm', 'last:md', 'last:lg'
-      ],
-    },
-    {
-      pattern: /bg-teal-(50|100|200|300|400|500|600|700|800|900)/,  // Added teal color safelist
-    }
-  ],
+    'lg:grid-cols-3',
+  'md:grid-cols-2',
+  'grid-cols-1',
+],
  
   important: true,
   theme: {
diff --git a/templates/404.html b/templates/404.html
index 671202a..f3a4f44 100644
--- a/templates/404.html
+++ b/templates/404.html
@@ -10,7 +10,7 @@
     </div>
     <div class="max-w-5xl mx-auto">
      <h3 class="text-2xl md:text-4xl font-semibold">You seem to have ended up on a missing page!</h3>
-     <p class="font-normal text-gray-500">This could mean that you’ve entered the wrong URL or you’ve clicked on content which has moved locations or is no longer live. If you need assistance, click on the blue chat icon at the bottom of the screen to speak with real humans on our support team. Or go back to <a class="text-gray-50" href="/">home</a>.</p>
+     <p class="font-normal text-gray-500">This could mean that you’ve entered the wrong URL or you’ve clicked on content which has moved locations or is no longer live. If you need assistance, click on the blue chat icon at the bottom of the screen to speak with real humans on our support team. Or go back to <a class="font-bold" href="/">home</a>.</p>
     </div>
   
 </div>
diff --git a/templates/partials/footer.html b/templates/partials/footer.html
index 5a18399..cdee99c 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>
@@ -22,14 +30,42 @@
 
                 </div>
                 <div class="mt-6 mx-auto border-t border-gray-700 pt-8">
-                    <p data-v-14efe4a7="" class="text-base leading-6 text-gray-400 text-center">
+                    <p data-v-14efe4a7="" class="text-base leading-6  text-center">
                         © <span id="year"></span> Mycelium - All rights reserved.
-                        <a target="_blank" href="https://docs.threefold.io/docs/legal/terms_and_conditions" class="leading-6 text-gray-500 hover:text-green">Terms &amp; Conditions |</a>
-                        <a target="_blank" href="https://docs.threefold.io/docs/legal/privacy_policy" class="leading-6 text-gray-500 hover:text-green">Privacy Policy</a>
+                        <a target="_blank" href="https://docs.threefold.io/docs/legal/terms_and_conditions" class="leading-6 ">Terms &amp; Conditions |</a>
+                        <a target="_blank" href="https://docs.threefold.io/docs/legal/privacy_policy" class="leading-6 ">Privacy Policy</a>
 
                     </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/partials/head.html b/templates/partials/head.html
index 14cefe9..6097b2c 100644
--- a/templates/partials/head.html
+++ b/templates/partials/head.html
@@ -5,6 +5,13 @@
 {% set zolaVer = '0.13.0' %}
 <head>
     <link rel="icon" type="image/x-icon" href="{{ get_url(path='images/icons/favicon.png')}}">
+    <!-- Primary CSS link with Zola URL function -->
+    <link rel="stylesheet" href="{{ get_url(path='css/index.css', trailing_slash=false, cachebust=true) | safe }}">
+    
+    <!-- Fallback CSS links in case the Zola URL function doesn't work in production -->
+    <link rel="stylesheet" href="/css/index.css">
+    <link rel="stylesheet" href="https://www3.mycelium.threefold.io/css/index.css">
+    <link rel="stylesheet" href="/index.css">
     {% block title %}
     <title>{{ config.title }}</title>
     <meta property="og:type" content="website">
@@ -99,7 +106,7 @@
     <!-- Windows 8.1 and up, IE 11 -->
     <!-- **** CONCLUSION, favicons **** -->
     <!-- CSS/SCSS -->
-    <link rel="stylesheet" href="{{ get_url(path='css/index.css', trailing_slash=false, cachebust=true) | safe }}">
+    
     <style>
     .space-x-10>:not([hidden])~:not([hidden]){
       margin-left: calc(1.5rem*calc(1 - var(--tw-space-x-reverse)))!important;
@@ -127,27 +134,5 @@
   }
     </style>
     <script type="text/javascript" src="https://platform-api.sharethis.com/js/sharethis.js#property=62556aac80366d0019fc1af2&product=sop" async="async"></script>
-    <!-- MailerLite Universal -->
-    <script>
-    (function (m, a, i, l, e, r) {
-      m['MailerLiteObject'] = e; function f() {
-        var c = { a: arguments, q: [] }; var r = this.push(c); return "number" != typeof r ? r : f.bind(c.q);
-      }
-      f.q = f.q || []; m[e] = m[e] || f.bind(f.q); m[e].q = m[e].q || f.q; r = a.createElement(i);
-      var _ = a.getElementsByTagName(i)[0]; r.async = 1; r.src = l + '?v' + (~~(new Date().getTime() / 1000000));
-      _.parentNode.insertBefore(r, _);
-    })(window, document, 'script', 'https://static.mailerlite.com/js/universal.js', 'ml');
 
-    var ml_account = ml('accounts', '1778010', 'x2d3d9f8n1', 'load');
-  </script>
-  <!-- End MailerLite Universal -->
-  <!-- RSS feed -->
-  {% block rss %}
-  <link
-      rel="alternate"
-      type="application/rss+xml"
-      title="RSS"
-      href="{{ get_url(path='atom.xml', trailing_slash=false) }}"
-  >
-  {% endblock %}
 </head>
diff --git a/templates/partials/header.html b/templates/partials/header.html
index c1ebf9b..80d5dfc 100644
--- a/templates/partials/header.html
+++ b/templates/partials/header.html
@@ -2,7 +2,7 @@
 {% set header_items = section.content | safe | split(pat="<li>") %}
 
 <header id="header-container">
-    <div class="z-20 fixed top-0 left-0 right-0  lg:absolute w-full">
+    <div class="nav_header z-20 fixed top-0 left-0 right-0  lg:absolute w-full">
         <div class="relative z-50">
         <div class="mx-auto container flex z-50 justify-between items-center px-6 sm:px-4 md:px-6 py-4 lg:px-5 lg:justify-start space-x-10 sm:space-x-4 ">
             {# <div>
@@ -15,6 +15,14 @@
               <img id="lightLogo" src="{{ get_url(path=section.extra.logoPathLight) }}" alt="Light Logo" class="logo light w-36 h-auto" style="max-width: none;">
               <img id="darkLogo" src="{{ get_url(path=section.extra.logoPathDark) }}" alt="Dark Logo" class="logo dark w-36 h-auto" style="max-width: none;">
             </a>
+            <div class="theme-toggle mx-4 lg:hidden">
+              <label for="lightModeSwitch" class="switch">
+                  <i class="fa-solid fa-sun" id="lightIcon"></i>
+                  <input type="checkbox" id="lightModeSwitch">
+                  <span class="slider"></span>
+                  <i class="fas fa-moon" id="darkIcon"></i>
+              </label>
+          </div>
             <div class="-mr-2 -my-2 lg:hidden">
                 <button id="hamburger-btn" type="button" class="bg-white inline-flex items-center justify-center p-2 border border-gray-900 rounded-md transition duration-200 ease-in-out">
                     <!-- Heroicon name: menu -->
@@ -166,9 +174,10 @@
             From: "opacity-100 scale-100"
             To: "opacity-0 scale-95"
         -->
+     
     <div id="hamburger" class="hidden fixed mt-14 z-20 top-0 inset-x-0 transition transform origin-top-right lg:hidden">
         <div>
-            <div style="background-color: rgb(255, 255, 255);" class="shadow-xs h-screen divide-y-2 divide-gray-50">
+            <div class="nav_header shadow-xs h-screen divide-y-2 divide-gray-50">
                 <div class="pb-6 sm:px-12 md:px-16 mt-0 lg:px-20 space-y-6 sm:space-y-8 sm:pb-8 max-h-screen overflow-y-auto">
 
                     <nav class="flex flex-col justify-around pb-12">
@@ -236,12 +245,21 @@
 
 <style>
 
+  body .nav a {
+    color: #333333 !important;
+  }
+
+
+  body.dark-mode .nav a {
+    color: #ffffff !important;
+  }
+
   nav a:hover{
   color: #c7c7c7 !important;
 }
 
 .active{
-  color: #000000 !important;
+  color: rgb(100, 100, 100) !important;
 }
 .nav_btn:hover {
   color: #c7c7c7 !important;
@@ -254,20 +272,20 @@
 
 /* logo image */
 
-.light {
+.dark {
   
   display: block; /* Show dark logo by default */
 }
-.dark {
+.light {
    
   display: none; /* Hide light logo by default */
 }
 
-.light-mode .light {
+.dark-mode .dark {
   
   display: none; /* Hide dark logo in light mode */
 }
-.light-mode .dark {
+.dark-mode .light{
 
   display: block;/* Show light logo in light mode */
 }
@@ -317,18 +335,27 @@
 }
 
 /* When light mode is active */
-.light-mode .switch {
-  background: #111; /* Dark background in light mode */
+.dark-mode .switch {
+  background: #808080; /* Dark background in dark mode */
 }
-.light-mode .slider {
+.dark-mode .slider {
   transform: translateX(25px); /* Move slider to the right */
 }
-.light-mode #lightIcon {
+.dark-mode #darkIcon {
   display: inline-block;
   color: white;
 }
-.light-mode #darkIcon {
+.dark-mode #darkIcon {
   display: none;
 }
 
+
+body .nav_header {
+  background-color: rgba(255, 255, 255) !important;
+}
+
+body.dark-mode .nav_header {
+  background-color: #121212 !important;
+}
+
 </style>
\ No newline at end of file
diff --git a/templates/shortcodes/accordion.html b/templates/shortcodes/accordion.html
index 0f69ef8..baaafb0 100644
--- a/templates/shortcodes/accordion.html
+++ b/templates/shortcodes/accordion.html
@@ -1,64 +1,43 @@
-
-<script src="https://cdn.tailwindcss.com"></script>
-    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
-    <script>
-        tailwind.config = {
-            theme: {
-                extend: {
-                    fontFamily: {
-                        inter: ['Inter', 'sans-serif'],
-                    },
-                },
-            },
-        };
-    </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"
-                            @click="expanded = !expanded"
-                            :aria-expanded="expanded"
-                            aria-controls="faqs-text-01"
-                        >
-                            <span class="">{{ question }}</span>
-                            <svg class="shrink-0 ml-8"  fill="gray" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
-                                <rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
-                                <rect y="7" width="16" height="2" rx="1" class="transform origin-center rotate-90 transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
-                            </svg>
-                        </button>
-                    </h2>
-                    <div
-                        id="faqs-text-01"
-                        role="region"
-                        aria-labelledby="faqs-title-01"
-                        class="grid text-sm overflow-hidden transition-all duration-300 ease-in-out"
-                        :class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
-                        >
-                        <div class="overflow-hidden">
-                            {% if description %} 
-                            <p class="py-3 px-4 text-base font-light">
-                                {{ description }} 
-                            </p>
-                            {% endif %}
-                        </div>
-                    </div>
+<div class="rounded-lg shadow-lg overflow-hidden my-2 border border-gray-200">
+            <input type="checkbox" id="{{ id_accordion }}" class="peer hidden">
+            <label for="{{ id_accordion }}" class="accordion flex items-center justify-between p-4 cursor-pointer transition-colors">
+                <span class="text-lg font-semibold">{{ question }}</span>
+                <svg class="w-6 h-6 transition-transform peer-checked:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+                </svg>
+            </label>
+            <div class="max-h-0 overflow-hidden transition-all duration-300 peer-checked:max-h-screen">
+                <div class="p-4">
+                    {% if description %} 
+                    <p class="semigray font-normal leading-relaxed">{{ description }} </p>
+                    {% endif %}
                 </div>
-            <!-- </div>                                                                                              
-    </div> -->
-            <!-- End: Accordion component -->
+            </div>
+        </div>
+
+        <style>
+
+            body .accordion:hover {
+                background-color: rgb(240, 240, 240) !important;
+             }
+
+            body.dark-mode .accordion:hover {
+               background-color: #2e2e2e !important;
+            }
+        </style>
+
+        
+
+   
+
+     
+
+     
+
+
+     
+   
 
-        <!-- </div>
-    </main> -->
 
 
 
diff --git a/templates/shortcodes/cta.html b/templates/shortcodes/cta.html
index ea386d5..9e7dfba 100644
--- a/templates/shortcodes/cta.html
+++ b/templates/shortcodes/cta.html
@@ -12,7 +12,7 @@
   <div class="mx-auto max-w-7xl py-12 sm:px-6  lg:px-8">
     <div class="relative isolate overflow-hidden bg-black px-6 pt-16 shadow-2xl sm:rounded-3xl sm:px-16 md:pt-24 lg:flex lg:gap-x-20 lg:px-24 lg:pt-0">
       <div class="mx-auto max-w-md text-center lg:mx-0 lg:flex-auto lg:py-32 lg:text-left">
-        <h2 class="text-4xl font-normal tracking-tight text-balance text-white lg:text-5xl">{{ title }}</h2>
+        <h2 class=" text-white">{{ title }}</h2>
         <p class="mt-6 text-lg lg:text-xl text-pretty font-light text-gray-300">{{ description }}</p>
         <div class="mt-10 flex items-center justify-center gap-x-6 lg:justify-start">
           <a href="{{ button_link }}" class="rounded-2xl bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-xs hover:bg-gray-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">{{ button_text }}</a>
diff --git a/templates/shortcodes/desciption_blockquote.html b/templates/shortcodes/desciption_blockquote.html
index 935a80d..fb566cc 100644
--- a/templates/shortcodes/desciption_blockquote.html
+++ b/templates/shortcodes/desciption_blockquote.html
@@ -9,7 +9,7 @@
 <div class="lg:py-24 py-12 relative  isolate overflow-hidden">
     <div class="mx-auto container lg:max-w-7xl px-4">
         <div>
-            <h2 class="fade-in lg:text-5xl text-4xl font-medium tracking-tight l">{{ title }}
+            <h2 class="fade-in my-2">{{ title }}
             </h2>
         </div>
         <div class="relative grid lg:grid-cols-12 lg:gap-8">
diff --git a/templates/shortcodes/feature_card.html b/templates/shortcodes/feature_card.html
index a912ea0..7a8b30e 100644
--- a/templates/shortcodes/feature_card.html
+++ b/templates/shortcodes/feature_card.html
@@ -6,7 +6,7 @@
 {% set hover_color = hover_color | default(value="hover:bg-gray-50") %}
 
 
-<div class="relative shadow rounded-lg p-4 transition-all duration-300">
+<div class="card relative shadow rounded-lg p-4 transition-all duration-300">
   {% if icon %}
   <div class="flex items-center justify-center h-12 w-12 rounded-md mb-4">
     <img src="{{ icon | safe }}" class="">
@@ -31,4 +31,8 @@
   p{
     font-weight: 200;
   }
+
+  body.dark-mode .card {
+    background-color: rgba(82, 82, 82, 50%) !important;
+  }
 </style>
diff --git a/templates/shortcodes/hero.html b/templates/shortcodes/hero.html
index c959d0e..daea42a 100644
--- a/templates/shortcodes/hero.html
+++ b/templates/shortcodes/hero.html
@@ -13,16 +13,15 @@
   <div class="mx-auto max-w-7xl lg:grid lg:grid-cols-12 lg:gap-x-8 lg:px-8">
     <div class="px-6 lg:col-span-7 lg:px-0 xl:col-span-6">
       <div class="mx-auto max-w-2xl lg:mx-0 lg:flex-auto">
-        <h1 class="text-4xl font-semibold tracking-tight lg:text-6xl">
+        <h1>
           {{ title }}
         </h1>
-        <h2 class="fade-in text-balance lg:text-4xl text-3xl font-normal tracking-tight ">{{ subtitle }}
-                  </h2>
+        <h2 class="fade-in font-normal">{{ subtitle }}</h2>
         <p class="mt-8 text-pretty lg:text-xl text-lg  font-light lgl:text-xl">
           {{ description }} <br><br> <b>{{ highlight }}</b>
         </p>
         <div class="mt-10 flex items-center gap-x-6">
-            <a href="{{ button_link }}" class="rounded-2xl bg-black px-3.5 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-gray-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-200">
+            <a href="{{ button_link }}" class="rounded-2xl bg-black border border-gray-50 px-3.5 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-gray-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-200">
               {{ button_text }}
             </a>
         </div>
diff --git a/templates/shortcodes/hero_bottom_img.html b/templates/shortcodes/hero_bottom_img.html
index 7b90adf..b225fe7 100644
--- a/templates/shortcodes/hero_bottom_img.html
+++ b/templates/shortcodes/hero_bottom_img.html
@@ -2,7 +2,7 @@
     <div class="mx-auto max-w-7xl">
       <div class="mx-auto max-w-4xl text-left lg:text-center">
         <p class="text-base/7 font-light  tracking-wide">{{ subtitle }}</p>
-        <h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight "> {{ title }}</h2>
+        <h2 class="fade-in my-2"> {{ title }}</h2>
         <p class="mt-6 text-lg font-light lg:text-xl">{{ description }}</p>
       </div>
     </div>
@@ -11,51 +11,6 @@
         <img src="{{ image_src }}" alt="{{ image_alt }}"  width="900">
       </div>
     </div>
-    <!-- <div class="mx-auto mt-10 max-w-7xl px-6  lg:px-8">
-      <dl class="mx-auto grid max-w-2xl grid-cols-1 gap-x-6 gap-y-4 text-base/7  sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-3 lg:gap-x-8 lg:gap-y-10">
-        <div class="relative lg:pl-9">
-          <dt class="inline font-semibold ">
-
-            ✓  Quantum Safe Storage Functionality
-          </dt>
-          <dd class="font-light">Mycelium’s quantum safe storage enables flexible, scalable, and efficient data distribution across a decentralized network, ensuring redundancy and security.</dd>
-        </div>
-        <div class="relative lg:pl-9">
-          <dt class="inline font-semibold ">
- 
-            ✓  Entry and Exit Points for AI Workloads
-          </dt>
-          <dd class="font-light">Seamlessly connect AI applications to Mycelium, providing optimized nd secured data pipelines for training, inference, and real-time processing.</dd>
-        </div>
-        <div class="relative lg:pl-9">
-          <dt class="inline font-semibold ">
-   
-            ✓  Data Storage and Retrieval Mechanisms
-          </dt>
-          <dd class="font-light">Users can choose between storing data locally for quick access or utilizing the distributed grid for enhanced scalability and resilience.</dd>
-        </div>
-        <div class="relative lg:pl-9">
-          <dt class="inline font-semibold ">
-
-            ✓  Integrated Name Services (DNS)
-          </dt>
-          <dd class="font-light">The Integrated DNS system efficiently finds the shortest path between users and websites, automatically balancing loads and identifying alternative routes in case of internet issues.</dd>
-        </div>
-        <div class="relative lg:pl-9">
-          <dt class="inline font-semibold ">
-
-            ✓  Frontend/Backend Integration
-          </dt>
-          <dd class="font-light"> Mycelium provides seamless integration with existing applications, enabling developers to leverage decentralized storage across both frontend and backend architectures.</dd>
-        </div>
-        <div class="relative lg:pl-9">
-          <dt class="inline font-semibold ">
- 
-            ✓  CDN (Content Delivery Network)
-          </dt>
-          <dd class="font-light">Mycelium accelerates data distribution by acting as a decentralized CDN, ensuring fast, secure, and efficient content delivery across global nodes with minimal latency.</dd>
-        </div>
-      </dl>
-    </div> -->
+  
   </div>
   
\ No newline at end of file
diff --git a/templates/shortcodes/hero_features.html b/templates/shortcodes/hero_features.html
index 13be63a..1057ac8 100644
--- a/templates/shortcodes/hero_features.html
+++ b/templates/shortcodes/hero_features.html
@@ -2,7 +2,7 @@
     <div class="lg:py-24 py-12 relative isolate">
         <div class="px-4 lg:px-8 lg:pb-24">
             <p class="text-base font-light tracking-wide">{{ subtitle_1 }}</p>
-            <h2 class="fade-in lg:text-5xl text-4xl font-normal tracking-tight">{{ title }}</h2>
+            <h2 class="fade-in my-2">{{ title }}</h2>
                 <p class="text-left mt-4 text-pretty lg:text-lg text-md font-light fade-in max-w-3xl">
                     {{ description }}
                 </p>
diff --git a/templates/shortcodes/hero_right_img.html b/templates/shortcodes/hero_right_img.html
index 09deb76..3757a82 100644
--- a/templates/shortcodes/hero_right_img.html
+++ b/templates/shortcodes/hero_right_img.html
@@ -15,10 +15,10 @@
                   alt="{{ image_alt }}">
           </div>
           <div class="mx-auto max-w-xl lg:mx-0 lg:flex-auto lg:order-1">
-              <h1 class="mt-2 text-4xl font-semibold tracking-tight lg:text-6xl">
+              <h1 class="mt-2">
                 {{ title }}
               </h1>
-              <h2 class="text-balance lg:text-4xl text-3xl font-normal tracking-tight">{{ subtitle }}</h2>
+              <h3 class="">{{ subtitle }}</h3>
               <p class="mt-6 text-md font-light semigray lg:text-lg">
                 {{ description_1 }} 
               <p class="mt-2 text-md font-light semigray lg:text-lg">
diff --git a/templates/shortcodes/left_header.html b/templates/shortcodes/left_header.html
index 1f72ea4..3a97963 100644
--- a/templates/shortcodes/left_header.html
+++ b/templates/shortcodes/left_header.html
@@ -11,8 +11,8 @@
   <div class="mx-auto">
     <div class="mx-auto">
       <p class="text-base font-light tracking-wide">{{ subtitle }}</p>
-      <h2 class="fade-in lg:text-5xl text-4xl font-medium tracking-tight">{{ title }}</h2>
-      <h3 class="mx-auto fade-in text-left lg:text-3xl text-2xl leading-snug font-light tracking-tight ">{{ subtitle_2 }}</h2>
+      <h2 class="fade-in my-4">{{ title }}</h2>
+      <h3 class="mx-auto fade-in">{{ subtitle_2 }}</h2>
       <p class="mt-6 max-w-3xl text-lg font-light">{{ description }}</p>
       {% if description2 %}
       <p class="mt-6 text-lg font-light">{{ description2 }}</p>
diff --git a/templates/shortcodes/text_center.html b/templates/shortcodes/text_center.html
index 1e555d0..1d95139 100644
--- a/templates/shortcodes/text_center.html
+++ b/templates/shortcodes/text_center.html
@@ -8,8 +8,8 @@
     <div class="relative isolate px-4 lg:px-8">
       <div class="mx-auto max-w-4xl">
         <div class="text-left lg:text-center">
-          <h2 class="fade-in text-balance lg:text-5xl text-4xl font-medium tracking-tight ">{{ title }}</h2>
-          <h3 class="fade-in text-balance lg:text-3xl text-2xl font-normal tracking-tight ">{{ subtitle }}</h3>
+          <h2 class="fade-in my-4">{{ title }}</h2>
+          <h3 class="fade-in">{{ subtitle }}</h3>
           <p class="mt-8 lg:text-lg font-light  sm:text-xl/8">{{ description }}</p>
         </div>
     </div>
diff --git a/templates/shortcodes/text_left_img.html b/templates/shortcodes/text_left_img.html
index 5de557f..6b905e8 100644
--- a/templates/shortcodes/text_left_img.html
+++ b/templates/shortcodes/text_left_img.html
@@ -17,7 +17,7 @@
             </div>
             <div class="mx-auto max-w-xl lg:mx-6 lg:flex-auto">
                 <p class="text-base mt-4 font-light tracking-wide">{{ subheader }}</p>
-                <h2 class="fade-in lg:text-5xl text-4xl font-medium tracking-tight ">{{ title }}</h2>
+                <h2 class="fade-in my-4">{{ title }}</h2>
                 <h3 class="font-light lg:text-3xl text-xl">
                     {{ subtitle }}
                 </h3>
diff --git a/templates/shortcodes/text_right_img.html b/templates/shortcodes/text_right_img.html
index 14f9307..dd59f30 100644
--- a/templates/shortcodes/text_right_img.html
+++ b/templates/shortcodes/text_right_img.html
@@ -18,7 +18,7 @@
             </div>
             <div class="mx-auto max-w-xl lg:mx-6 lg:flex-auto">
                 <p class="text-base font-light tracking-wide mt-4">{{ subheader }}</p>
-                <h2 class="fade-in lg:text-5xl text-4xl font-medium tracking-tight ">{{ title }}</h2>
+                <h2 class="fade-in my-4">{{ title }}</h2>
                 <h3 class="font-light lg:text-3xl text-xl">
                     {{ subtitle }}
                 </h3>