diff --git a/ar/index.html b/ar/index.html
index 0f409e53ac..5f2299bdc7 100644
--- a/ar/index.html
+++ b/ar/index.html
@@ -32,8 +32,8 @@
 
 <body>
     <header id="navbar">
-        <a class="logo" href="/"><img src="/img/design_3/logo-light.png" alt="logo" /></a>
-        
+        <a href="/ar" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo" /></a>
+        <a href="/ar" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo" /></a>
 
         <nav id="menu">
             <ul>
@@ -185,7 +185,9 @@
                 <path d="M225.368 385.712C222.968 387.046 219.368 390.112 217.368 392.646L213.768 397.312V426.379C213.768 458.246 213.901 458.779 222.968 465.446C228.168 469.312 240.701 469.312 245.901 465.446C254.834 458.779 255.101 457.979 255.501 428.246C256.034 397.579 255.234 394.379 246.834 387.979C241.101 383.579 231.634 382.512 225.368 385.712Z"/>
                 </svg>
 
-                <img src="/img/new/moon.svg" alt="" srcset="" class="moon hidden">
+                <svg class="moon" width="469" height="469" viewBox="5 5 20 23" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M10.895 7.574c0 7.55 5.179 13.67 11.567 13.67 1.588 0 3.101-0.38 4.479-1.063-1.695 4.46-5.996 7.636-11.051 7.636-6.533 0-11.83-5.297-11.83-11.83 0-4.82 2.888-8.959 7.023-10.803-0.116 0.778-0.188 1.573-0.188 2.39z"></path>
+                </svg>
             </button>
 
             <div class="nav-link flag-container">
@@ -438,7 +440,8 @@
         </div>
     </header>
     <div id="mobile-header">
-        <a class="logo" href="/"><img src="/img/new/logo-symbol-dark.svg" alt="logo" /></a>
+        <a href="/ar" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-symbol-light.svg" alt="" srcset=""></a>
+        <a href="/ar" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-symbol-dark.svg" alt="" srcset=""></a>
 
         <button id="hamburger" class="nav-toggle-btn">
             <svg viewBox="0 0 100 80" width="36" height="36">
@@ -737,6 +740,56 @@
         io.observe(cover);
     })();
 
+
+    // switch theme
+    const sunIcon = document.querySelector('.sun');
+    const moonIcon = document.querySelector('.moon');
+
+    const userTheme = localStorage.getItem('theme');
+    const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    const prismThemeLink = document.getElementById('prism-theme')
+
+    const iconToggle = () => {
+        sunIcon.classList.toggle('hidden');
+        moonIcon.classList.toggle('hidden');
+    }
+
+    const themeCheck = () => {
+        if(userTheme === 'dark' || (!userTheme && systemTheme)){
+            document.documentElement.classList.add('dark');
+            moonIcon.classList.add('hidden');
+            if(prismThemeLink){
+                prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
+            }
+        }
+        else{
+            sunIcon.classList.add('hidden');
+            if(prismThemeLink){
+                prismThemeLink.setAttribute('href','/css/prism-light.min.css')
+            }
+        }
+    }
+    themeCheck();
+
+    const themeSwitch = () => {
+        if(document.documentElement.classList.contains('dark')){
+            document.documentElement.classList.remove('dark');
+            localStorage.setItem('theme','light');
+            if(prismThemeLink){
+                prismThemeLink.setAttribute('href','/css/prism-light.min.css')
+            }
+            iconToggle();
+        }
+        else{
+            document.documentElement.classList.add('dark');
+            localStorage.setItem('theme','dark');
+            if(prismThemeLink){
+                prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
+            }
+            iconToggle();
+        }
+    }
+
     window.addEventListener('click',(e)=>{
         if(e.target.closest('.nav-link')){
             if(e.target.closest('.nav-link').classList.contains('active')){
@@ -756,9 +809,9 @@
                 nav.classList.add('open');
             }
         }
-        // else if(e.target.closest('.theme-switch-btn')){
-        //     themeSwitch();
-        // }
+        else if(e.target.closest('.theme-switch-btn')){
+            themeSwitch();
+        }
     });
     </script>
 </body>
diff --git a/bg/index.html b/bg/index.html
index 8ad1a966d6..b56fd998e0 100644
--- a/bg/index.html
+++ b/bg/index.html
@@ -32,8 +32,8 @@
 
 <body>
     <header id="navbar">
-        <a class="logo" href="/"><img src="/img/design_3/logo-light.png" alt="logo" /></a>
-        
+        <a href="/bg" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo" /></a>
+        <a href="/bg" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo" /></a>
 
         <nav id="menu">
             <ul>
@@ -185,7 +185,9 @@
                 <path d="M225.368 385.712C222.968 387.046 219.368 390.112 217.368 392.646L213.768 397.312V426.379C213.768 458.246 213.901 458.779 222.968 465.446C228.168 469.312 240.701 469.312 245.901 465.446C254.834 458.779 255.101 457.979 255.501 428.246C256.034 397.579 255.234 394.379 246.834 387.979C241.101 383.579 231.634 382.512 225.368 385.712Z"/>
                 </svg>
 
-                <img src="/img/new/moon.svg" alt="" srcset="" class="moon hidden">
+                <svg class="moon" width="469" height="469" viewBox="5 5 20 23" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M10.895 7.574c0 7.55 5.179 13.67 11.567 13.67 1.588 0 3.101-0.38 4.479-1.063-1.695 4.46-5.996 7.636-11.051 7.636-6.533 0-11.83-5.297-11.83-11.83 0-4.82 2.888-8.959 7.023-10.803-0.116 0.778-0.188 1.573-0.188 2.39z"></path>
+                </svg>
             </button>
 
             <div class="nav-link flag-container">
@@ -433,7 +435,8 @@
         </div>
     </header>
     <div id="mobile-header">
-        <a class="logo" href="/"><img src="/img/new/logo-symbol-dark.svg" alt="logo" /></a>
+        <a href="/bg" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-symbol-light.svg" alt="" srcset=""></a>
+        <a href="/bg" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-symbol-dark.svg" alt="" srcset=""></a>
 
         <button id="hamburger" class="nav-toggle-btn">
             <svg viewBox="0 0 100 80" width="36" height="36">
@@ -732,6 +735,56 @@
         io.observe(cover);
     })();
 
+
+    // switch theme
+    const sunIcon = document.querySelector('.sun');
+    const moonIcon = document.querySelector('.moon');
+
+    const userTheme = localStorage.getItem('theme');
+    const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    const prismThemeLink = document.getElementById('prism-theme')
+
+    const iconToggle = () => {
+        sunIcon.classList.toggle('hidden');
+        moonIcon.classList.toggle('hidden');
+    }
+
+    const themeCheck = () => {
+        if(userTheme === 'dark' || (!userTheme && systemTheme)){
+            document.documentElement.classList.add('dark');
+            moonIcon.classList.add('hidden');
+            if(prismThemeLink){
+                prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
+            }
+        }
+        else{
+            sunIcon.classList.add('hidden');
+            if(prismThemeLink){
+                prismThemeLink.setAttribute('href','/css/prism-light.min.css')
+            }
+        }
+    }
+    themeCheck();
+
+    const themeSwitch = () => {
+        if(document.documentElement.classList.contains('dark')){
+            document.documentElement.classList.remove('dark');
+            localStorage.setItem('theme','light');
+            if(prismThemeLink){
+                prismThemeLink.setAttribute('href','/css/prism-light.min.css')
+            }
+            iconToggle();
+        }
+        else{
+            document.documentElement.classList.add('dark');
+            localStorage.setItem('theme','dark');
+            if(prismThemeLink){
+                prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
+            }
+            iconToggle();
+        }
+    }
+
     window.addEventListener('click',(e)=>{
         if(e.target.closest('.nav-link')){
             if(e.target.closest('.nav-link').classList.contains('active')){
@@ -751,9 +804,9 @@
                 nav.classList.add('open');
             }
         }
-        // else if(e.target.closest('.theme-switch-btn')){
-        //     themeSwitch();
-        // }
+        else if(e.target.closest('.theme-switch-btn')){
+            themeSwitch();
+        }
     });
     </script>
 </body>
diff --git a/cs/index.html b/cs/index.html
index 4c517e4df6..84e7e60b96 100644
--- a/cs/index.html
+++ b/cs/index.html
@@ -32,8 +32,8 @@
 
 <body>
     <header id="navbar">
-        <a class="logo" href="/"><img src="/img/design_3/logo-light.png" alt="logo" /></a>
-        
+        <a href="/cs" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo" /></a>
+        <a href="/cs" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo" /></a>
 
         <nav id="menu">
             <ul>
@@ -185,7 +185,9 @@
                 <path d="M225.368 385.712C222.968 387.046 219.368 390.112 217.368 392.646L213.768 397.312V426.379C213.768 458.246 213.901 458.779 222.968 465.446C228.168 469.312 240.701 469.312 245.901 465.446C254.834 458.779 255.101 457.979 255.501 428.246C256.034 397.579 255.234 394.379 246.834 387.979C241.101 383.579 231.634 382.512 225.368 385.712Z"/>
                 </svg>
 
-                <img src="/img/new/moon.svg" alt="" srcset="" class="moon hidden">
+                <svg class="moon" width="469" height="469" viewBox="5 5 20 23" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M10.895 7.574c0 7.55 5.179 13.67 11.567 13.67 1.588 0 3.101-0.38 4.479-1.063-1.695 4.46-5.996 7.636-11.051 7.636-6.533 0-11.83-5.297-11.83-11.83 0-4.82 2.888-8.959 7.023-10.803-0.116 0.778-0.188 1.573-0.188 2.39z"></path>
+                </svg>
             </button>
 
             <div class="nav-link flag-container">
@@ -438,7 +440,8 @@
         </div>
     </header>
     <div id="mobile-header">
-        <a class="logo" href="/"><img src="/img/new/logo-symbol-dark.svg" alt="logo" /></a>
+        <a href="/cs" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-symbol-light.svg" alt="" srcset=""></a>
+        <a href="/cs" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-symbol-dark.svg" alt="" srcset=""></a>
 
         <button id="hamburger" class="nav-toggle-btn">
             <svg viewBox="0 0 100 80" width="36" height="36">
@@ -737,6 +740,56 @@
         io.observe(cover);
     })();
 
+
+    // switch theme
+    const sunIcon = document.querySelector('.sun');
+    const moonIcon = document.querySelector('.moon');
+
+    const userTheme = localStorage.getItem('theme');
+    const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    const prismThemeLink = document.getElementById('prism-theme')
+
+    const iconToggle = () => {
+        sunIcon.classList.toggle('hidden');
+        moonIcon.classList.toggle('hidden');
+    }
+
+    const themeCheck = () => {
+        if(userTheme === 'dark' || (!userTheme && systemTheme)){
+            document.documentElement.classList.add('dark');
+            moonIcon.classList.add('hidden');
+            if(prismThemeLink){
+                prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
+            }
+        }
+        else{
+            sunIcon.classList.add('hidden');
+            if(prismThemeLink){
+                prismThemeLink.setAttribute('href','/css/prism-light.min.css')
+            }
+        }
+    }
+    themeCheck();
+
+    const themeSwitch = () => {
+        if(document.documentElement.classList.contains('dark')){
+            document.documentElement.classList.remove('dark');
+            localStorage.setItem('theme','light');
+            if(prismThemeLink){
+                prismThemeLink.setAttribute('href','/css/prism-light.min.css')
+            }
+            iconToggle();
+        }
+        else{
+            document.documentElement.classList.add('dark');
+            localStorage.setItem('theme','dark');
+            if(prismThemeLink){
+                prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
+            }
+            iconToggle();
+        }
+    }
+
     window.addEventListener('click',(e)=>{
         if(e.target.closest('.nav-link')){
             if(e.target.closest('.nav-link').classList.contains('active')){
@@ -756,9 +809,9 @@
                 nav.classList.add('open');
             }
         }
-        // else if(e.target.closest('.theme-switch-btn')){
-        //     themeSwitch();
-        // }
+        else if(e.target.closest('.theme-switch-btn')){
+            themeSwitch();
+        }
     });
     </script>
 </body>
diff --git a/css/design3.css b/css/design3.css
index 82b0d1609d..ef50c7ab6d 100644
--- a/css/design3.css
+++ b/css/design3.css
@@ -204,14 +204,13 @@
 }
 
 :root {
-    --bg-grad: linear-gradient(9.2deg,
-            #000000 0%,
-            #131d49 52%,
-            #3f5598 65%,
-            #c3faff 85%,
-            #fff6e0 90%);
+    --bg-grad: linear-gradient(10deg,
+            #e8f3ff 0%,
+            #c0e2ff 40%,
+            #e9ffff 80%,
+            #ffefd6 90%);
 
-    --nav-color: #ffffff;
+    --nav-color: #001796;
 
     /* Compute cover drawn size and inner safe frame (60% of full image on each axis) */
     /* --cover-bg-w: calc(min((3200 / 1920) * 100vw, (3200 / 1080) * 100vh));
@@ -233,6 +232,17 @@
     --sec-vhu-desktop: calc(var(--sec-h) / 100);
 }
 
+:root.dark {
+    --bg-grad: linear-gradient(9.2deg,
+            #000000 0%,
+            #131d49 52%,
+            #3f5598 65%,
+            #c3faff 85%,
+            #fff6e0 90%);
+
+    --nav-color: #ffffff;
+}
+
 @media screen and (max-width: 767px) {
     :root {
         --sec-w: 100vw;
@@ -250,6 +260,11 @@ body.change-nav-color {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
+    border-color: #000;
+}
+
+.dark * {
+    border-color: #fff;
 }
 
 html {
@@ -259,15 +274,32 @@ html {
 
 html,
 body {
+    background: #fff;
+}
+
+.dark html,
+.dark body {
     background: #000;
 }
 
-.hidden {
+@media screen and (min-width: 768px) {
+    html {
+        overscroll-behavior: none;
+    }
+}
+
+/* .hidden {
     display: none !important;
     visibility: hidden !important;
     opacity: 0 !important;
 }
 
+:is(.dark .dark\:hidden) {
+    display: none !important;
+    visibility: hidden !important;
+    opacity: 0 !important;
+} */
+
 .lock-scroll {
     overflow: hidden !important;
 }
@@ -285,6 +317,28 @@ p {
 }
 
 .gradient-text {
+    background: linear-gradient(100deg,
+            #ffb55d 0%,
+            #fff494 50%,
+            #fbffdd 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    color: transparent;
+}
+
+.page .text-container a.gradient-text {
+    background: linear-gradient(90deg,
+            #001aa7 0%,
+            #0095e7 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    color: transparent;
+}
+
+.dark .gradient-text,
+.dark .page .text-container a.gradient-text {
     background: linear-gradient(90deg,
             #019bfe 0%,
             #64fdff 58%,
@@ -348,12 +402,16 @@ section.page .area {
 
 /* --- COVER --- */
 section.cover {
-    background-image: url("/img/design_3/cover.jpg");
+    background-image: url("/img/design_3/cover-light.jpg");
     background-size: var(--cover-bg-w) var(--cover-bg-h);
     background-position: center;
     background-repeat: no-repeat;
 }
 
+.dark section.cover {
+    background-image: url("/img/design_3/cover.jpg");
+}
+
 section.cover div.content {
     display: flex;
     flex-direction: column;
@@ -385,13 +443,17 @@ section.cover div.content h2 {
 
 section.cover div.content p {
     font-family: "Manrope", "GT-Walsheim", sans-serif;
-    font-weight: 200;
+    font-weight: 400;
     font-size: calc(var(--sec-vwu-desktop) * 1.6);
     align-items: center;
     color: #ffffff;
     max-width: calc(var(--sec-vwu-desktop) * 25);
 }
 
+.dark section.cover div.content p {
+    font-weight: 200;
+}
+
 section.cover div.socials {
     position: absolute;
     width: var(--sec-w);
@@ -434,12 +496,18 @@ main .section-bg {
 
     background-image: var(--bg-grad);
     background-position: center;
-    background-size: cover;
+    background-size: 102% 102%;
     background-repeat: no-repeat;
     z-index: -1;
     pointer-events: none;
 }
 
+.chrome-ios main .section-bg,
+.safari-ios main .section-bg {
+    height: 110lvh;
+    margin-bottom: -110lvh;
+}
+
 .page .area>.image:first-child {
     position: absolute;
     inset: 0;
@@ -449,10 +517,18 @@ main .section-bg {
 }
 
 .page-2 .image {
+    background-image: url("/img/design_3/section-2-desktop-light.webp");
+}
+
+.dark .page-2 .image {
     background-image: url("/img/design_3/section-2-desktop.webp");
 }
 
 .page-3 .image {
+    background-image: url("/img/design_3/section-3-desktop-light.webp");
+}
+
+.dark .page-3 .image {
     background-image: url("/img/design_3/section-3-desktop.webp");
 }
 
@@ -470,12 +546,21 @@ main .section-bg {
     }
 
     .page-2 .image {
-        background-image: url("/img/design_3/section-2-mobile.webp");
+        top: -6% !important;
+        background-image: url("/img/design_3/section-2-mobile-light.webp");
         background-size: cover !important;
         height: 75%;
     }
 
+    .dark .page-2 .image {
+        background-image: url("/img/design_3/section-2-mobile.webp");
+    }
+
     .page-3 .image {
+        background-image: url("/img/design_3/section-3-mobile-light.webp");
+    }
+
+    .dark .page-3 .image {
         background-image: url("/img/design_3/section-3-mobile.webp");
     }
 
@@ -510,6 +595,11 @@ main .section-bg {
     letter-spacing: -0.025em;
     line-height: 1.05;
     max-width: calc(var(--sec-vwu-desktop)*26);
+    color: #023789;
+}
+
+.dark .page .text-container h2 {
+    color: #ffffff;
 }
 
 .page .text-container p {
@@ -517,6 +607,11 @@ main .section-bg {
     font-weight: 200;
     font-size: calc(var(--sec-vwu-desktop)*1.62);
     max-width: calc(var(--sec-vwu-desktop)*23);
+    color: #000000;
+}
+
+.dark .page .text-container p {
+    color: #ffffff;
 }
 
 .page .text-container p span {
@@ -583,11 +678,27 @@ main .section-bg {
     max-width: calc(var(--sec-vwu-desktop)*21) !important;
 }
 
-.roadmap>p:first-child {
+.roadmap p:first-of-type {
     font-weight: 500;
+    background: linear-gradient(90deg, #001aa7 0%, #00bdd4 100%);
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    color: transparent;
+    display: inline-block;
+}
+
+.dark .roadmap p:first-of-type,
+.dark .roadmap>p:first-of-type {
+    background: none;
+    -webkit-background-clip: initial;
+    background-clip: initial;
+    -webkit-text-fill-color: #64fdff;
     color: #64fdff;
 }
 
+/* .dark .roadmap>p:first-child {} */
+
 .roadmap>p:nth-child(2) {
     font-weight: 500;
 }
@@ -608,6 +719,11 @@ main .section-bg {
 
     /* --- COVER --- */
     section.cover {
+        background-image: url("/img/design_3/cover-mobile-light.webp");
+        background-size: cover;
+    }
+
+    .dark section.cover {
         background-image: url("/img/design_3/cover-mobile.jpg");
         background-size: cover;
     }
@@ -714,6 +830,19 @@ main .section-bg {
     }
 
     .roadmap p.title {
+        background: linear-gradient(90deg, #001aa7 0%, #00bdd4 100%);
+        -webkit-background-clip: text;
+        background-clip: text;
+        -webkit-text-fill-color: transparent;
+        color: transparent;
+        display: inline-block;
+    }
+
+    .dark .roadmap p.title {
+        background: none;
+        -webkit-background-clip: initial;
+        background-clip: initial;
+        -webkit-text-fill-color: #64fdff;
         color: #64fdff;
     }
 
@@ -1174,7 +1303,7 @@ header#navbar>a.logo {
     position: absolute;
     left: 16px;
     height: 100%;
-    display: flex;
+    /* display: flex; */
     align-items: center;
 }
 
@@ -1188,10 +1317,15 @@ header#navbar nav#menu>ul>hr {
 }
 
 header#navbar nav#menu ul.sub-menu hr {
+    border-top-width: 1px;
     height: 1px;
     width: 100%;
-    background: rgb(255, 255, 255);
-    opacity: 0.1;
+    color: #000;
+    opacity: 0.2;
+}
+
+.dark header#navbar nav#menu ul.sub-menu hr {
+    color: #fff;
 }
 
 header#navbar ul {
@@ -1230,12 +1364,16 @@ header#navbar ul a>span:first-child {
 }
 
 header#navbar ul a span svg {
-    fill: #fff;
+    fill: #001796;
     width: 10px;
     height: auto;
     transition: all 0.5s ease;
 }
 
+.dark header#navbar ul a span svg {
+    fill: #fff;
+}
+
 @media screen and (min-width: 768px) {
     header#navbar nav#menu>ul>li>a {
         color: var(--nav-color);
@@ -1258,7 +1396,7 @@ header#navbar ul.sub-menu {
     gap: 0.5rem;
     max-height: calc(100vh - 70px);
     position: absolute;
-    background: #181e43;
+    background: #fff;
     top: calc(100% + 8px);
     padding: 16px 0;
     min-width: 180px;
@@ -1269,12 +1407,21 @@ header#navbar ul.sub-menu {
     opacity: 0;
 }
 
+.dark header#navbar ul.sub-menu {
+    background: #181e43;
+}
+
 header#navbar ul.sub-menu li a {
     padding: 3px 20px;
     white-space: nowrap;
     display: flex;
     align-items: center;
     gap: 4px;
+    color: #001796;
+}
+
+.dark header#navbar ul.sub-menu li a {
+    color: #ffffff;
 }
 
 header#navbar ul.sub-menu li a img {
@@ -1310,23 +1457,31 @@ header#navbar .nav-link:focus-within .sub-menu {
     align-items: center;
     justify-content: center;
     gap: 4px;
-    color: white;
+    color: #001796;
     text-decoration: none;
 }
 
+.dark .flag-container>a {
+    color: white;
+}
+
 .flag-container>a svg {
-    fill: #fff;
+    fill: #001796;
     width: 10px;
     height: auto;
 }
 
+.dark .flag-container>a svg {
+    fill: white;
+}
+
 @media screen and (min-width: 768px) {
     .flag-container>a {
-        color: var(--nav-color);
+        color: var(--nav-color) !important;
     }
 
     .flag-container>a svg {
-        fill: var(--nav-color);
+        fill: var(--nav-color) !important;
     }
 }
 
@@ -1367,13 +1522,17 @@ header#navbar button.theme-switch-btn svg {
 }
 
 header#navbar button.theme-switch-btn svg path {
-    fill: white;
+    fill: #001796;
     transition: all 0.3s ease;
 }
 
+.dark header#navbar button.theme-switch-btn svg path {
+    fill: white;
+}
+
 @media screen and (min-width: 768px) {
     header#navbar button.theme-switch-btn svg path {
-        fill: var(--nav-color);
+        fill: var(--nav-color) !important;
         transition: all 0.3s ease;
     }
 }
@@ -1396,11 +1555,15 @@ button#cross-btn {
 }
 
 #cross {
-    fill: white;
+    fill: #001796;
     width: 13px;
     height: auto;
 }
 
+.dark #cross {
+    fill: #ffffff;
+}
+
 #mobile-header {
     display: none;
     padding: 0 1rem;
@@ -1444,13 +1607,17 @@ button#cross-btn {
     header#navbar {
         height: 100%;
         width: 100%;
-        background: #0a0f2b;
+        background: #fff;
         visibility: hidden;
         opacity: 0;
         transition: all .3s ease;
         transform: translateX(-100%);
     }
 
+    .dark header#navbar {
+        background: #0a0f2b;
+    }
+
     header#navbar.open {
         visibility: visible;
         opacity: 1;
@@ -1504,6 +1671,11 @@ button#cross-btn {
         gap: 10px;
         padding: 0px;
         padding: 6px 2rem;
+        color: #001796;
+    }
+
+    .dark header#navbar nav#menu .nav-link a {
+        color: #ffffff;
     }
 
     header#navbar nav#menu .nav-link>a {
@@ -1512,7 +1684,6 @@ button#cross-btn {
     }
 
     header#navbar nav#menu ul.sub-menu hr {
-        opacity: 0.2;
         width: 100%;
     }
 
@@ -1545,10 +1716,14 @@ button#cross-btn {
 
     header#navbar nav#menu .sub-menu li a {
         font-family: "Manrope", "GT-Walsheim", sans-serif;
-        font-weight: 200;
+        font-weight: 300;
         width: 100%;
     }
 
+    .dark header#navbar nav#menu .sub-menu li a {
+        font-weight: 200;
+    }
+
     header#navbar nav#menu .active .sub-menu {
         max-height: 1000px;
         transform: translateY(0px);
diff --git a/de/index.html b/de/index.html
index 312a9cae98..a805e7147f 100644
--- a/de/index.html
+++ b/de/index.html
@@ -32,8 +32,8 @@
 
 <body>
     <header id="navbar">
-        <a class="logo" href="/"><img src="/img/design_3/logo-light.png" alt="logo" /></a>
-        
+        <a href="/de" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo" /></a>
+        <a href="/de" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo" /></a>
 
         <nav id="menu">
             <ul>
@@ -185,7 +185,9 @@
                 <path d="M225.368 385.712C222.968 387.046 219.368 390.112 217.368 392.646L213.768 397.312V426.379C213.768 458.246 213.901 458.779 222.968 465.446C228.168 469.312 240.701 469.312 245.901 465.446C254.834 458.779 255.101 457.979 255.501 428.246C256.034 397.579 255.234 394.379 246.834 387.979C241.101 383.579 231.634 382.512 225.368 385.712Z"/>
                 </svg>
 
-                <img src="/img/new/moon.svg" alt="" srcset="" class="moon hidden">
+                <svg class="moon" width="469" height="469" viewBox="5 5 20 23" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M10.895 7.574c0 7.55 5.179 13.67 11.567 13.67 1.588 0 3.101-0.38 4.479-1.063-1.695 4.46-5.996 7.636-11.051 7.636-6.533 0-11.83-5.297-11.83-11.83 0-4.82 2.888-8.959 7.023-10.803-0.116 0.778-0.188 1.573-0.188 2.39z"></path>
+                </svg>
             </button>
 
             <div class="nav-link flag-container">
@@ -438,7 +440,8 @@
         </div>
     </header>
     <div id="mobile-header">
-        <a class="logo" href="/"><img src="/img/new/logo-symbol-dark.svg" alt="logo" /></a>
+        <a href="/de" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-symbol-light.svg" alt="" srcset=""></a>
+        <a href="/de" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-symbol-dark.svg" alt="" srcset=""></a>
 
         <button id="hamburger" class="nav-toggle-btn">
             <svg viewBox="0 0 100 80" width="36" height="36">
@@ -737,6 +740,56 @@
         io.observe(cover);
     })();
 
+
+    // switch theme
+    const sunIcon = document.querySelector('.sun');
+    const moonIcon = document.querySelector('.moon');
+
+    const userTheme = localStorage.getItem('theme');
+    const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    const prismThemeLink = document.getElementById('prism-theme')
+
+    const iconToggle = () => {
+        sunIcon.classList.toggle('hidden');
+        moonIcon.classList.toggle('hidden');
+    }
+
+    const themeCheck = () => {
+        if(userTheme === 'dark' || (!userTheme && systemTheme)){
+            document.documentElement.classList.add('dark');
+            moonIcon.classList.add('hidden');
+            if(prismThemeLink){
+                prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
+            }
+        }
+        else{
+            sunIcon.classList.add('hidden');
+            if(prismThemeLink){
+                prismThemeLink.setAttribute('href','/css/prism-light.min.css')
+            }
+        }
+    }
+    themeCheck();
+
+    const themeSwitch = () => {
+        if(document.documentElement.classList.contains('dark')){
+            document.documentElement.classList.remove('dark');
+            localStorage.setItem('theme','light');
+            if(prismThemeLink){
+                prismThemeLink.setAttribute('href','/css/prism-light.min.css')
+            }
+            iconToggle();
+        }
+        else{
+            document.documentElement.classList.add('dark');
+            localStorage.setItem('theme','dark');
+            if(prismThemeLink){
+                prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
+            }
+            iconToggle();
+        }
+    }
+
     window.addEventListener('click',(e)=>{
         if(e.target.closest('.nav-link')){
             if(e.target.closest('.nav-link').classList.contains('active')){
@@ -756,9 +809,9 @@
                 nav.classList.add('open');
             }
         }
-        // else if(e.target.closest('.theme-switch-btn')){
-        //     themeSwitch();
-        // }
+        else if(e.target.closest('.theme-switch-btn')){
+            themeSwitch();
+        }
     });
     </script>
 </body>
diff --git a/en/index.html b/en/index.html
index 3ae4e3d679..887d3df05b 100644
--- a/en/index.html
+++ b/en/index.html
@@ -32,8 +32,8 @@
 
 <body>
     <header id="navbar">
-        <a class="logo" href="/"><img src="/img/design_3/logo-light.png" alt="logo" /></a>
-        
+        <a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo" /></a>
+        <a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo" /></a>
 
         <nav id="menu">
             <ul>
@@ -185,7 +185,9 @@
                 <path d="M225.368 385.712C222.968 387.046 219.368 390.112 217.368 392.646L213.768 397.312V426.379C213.768 458.246 213.901 458.779 222.968 465.446C228.168 469.312 240.701 469.312 245.901 465.446C254.834 458.779 255.101 457.979 255.501 428.246C256.034 397.579 255.234 394.379 246.834 387.979C241.101 383.579 231.634 382.512 225.368 385.712Z"/>
                 </svg>
 
-                <img src="/img/new/moon.svg" alt="" srcset="" class="moon hidden">
+                <svg class="moon" width="469" height="469" viewBox="5 5 20 23" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M10.895 7.574c0 7.55 5.179 13.67 11.567 13.67 1.588 0 3.101-0.38 4.479-1.063-1.695 4.46-5.996 7.636-11.051 7.636-6.533 0-11.83-5.297-11.83-11.83 0-4.82 2.888-8.959 7.023-10.803-0.116 0.778-0.188 1.573-0.188 2.39z"></path>
+                </svg>
             </button>
 
             <div class="nav-link flag-container">
@@ -438,7 +440,8 @@
         </div>
     </header>
     <div id="mobile-header">
-        <a class="logo" href="/"><img src="/img/new/logo-symbol-dark.svg" alt="logo" /></a>
+        <a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-symbol-light.svg" alt="" srcset=""></a>
+        <a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-symbol-dark.svg" alt="" srcset=""></a>
 
         <button id="hamburger" class="nav-toggle-btn">
             <svg viewBox="0 0 100 80" width="36" height="36">
@@ -737,6 +740,56 @@
         io.observe(cover);
     })();
 
+
+    // switch theme
+    const sunIcon = document.querySelector('.sun');
+    const moonIcon = document.querySelector('.moon');
+
+    const userTheme = localStorage.getItem('theme');
+    const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    const prismThemeLink = document.getElementById('prism-theme')
+
+    const iconToggle = () => {
+        sunIcon.classList.toggle('hidden');
+        moonIcon.classList.toggle('hidden');
+    }
+
+    const themeCheck = () => {
+        if(userTheme === 'dark' || (!userTheme && systemTheme)){
+            document.documentElement.classList.add('dark');
+            moonIcon.classList.add('hidden');
+            if(prismThemeLink){
+                prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
+            }
+        }
+        else{
+            sunIcon.classList.add('hidden');
+            if(prismThemeLink){
+                prismThemeLink.setAttribute('href','/css/prism-light.min.css')
+            }
+        }
+    }
+    themeCheck();
+
+    const themeSwitch = () => {
+        if(document.documentElement.classList.contains('dark')){
+            document.documentElement.classList.remove('dark');
+            localStorage.setItem('theme','light');
+            if(prismThemeLink){
+                prismThemeLink.setAttribute('href','/css/prism-light.min.css')
+            }
+            iconToggle();
+        }
+        else{
+            document.documentElement.classList.add('dark');
+            localStorage.setItem('theme','dark');
+            if(prismThemeLink){
+                prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
+            }
+            iconToggle();
+        }
+    }
+
     window.addEventListener('click',(e)=>{
         if(e.target.closest('.nav-link')){
             if(e.target.closest('.nav-link').classList.contains('active')){
@@ -756,9 +809,9 @@
                 nav.classList.add('open');
             }
         }
-        // else if(e.target.closest('.theme-switch-btn')){
-        //     themeSwitch();
-        // }
+        else if(e.target.closest('.theme-switch-btn')){
+            themeSwitch();
+        }
     });
     </script>
 </body>
diff --git a/es/index.html b/es/index.html
index f0593c0dfb..d3081b6218 100644
--- a/es/index.html
+++ b/es/index.html
@@ -32,8 +32,8 @@
 
 <body>
     <header id="navbar">
-        <a class="logo" href="/"><img src="/img/design_3/logo-light.png" alt="logo" /></a>
-        
+        <a href="/es" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo" /></a>
+        <a href="/es" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo" /></a>
 
         <nav id="menu">
             <ul>
@@ -185,7 +185,9 @@
                 <path d="M225.368 385.712C222.968 387.046 219.368 390.112 217.368 392.646L213.768 397.312V426.379C213.768 458.246 213.901 458.779 222.968 465.446C228.168 469.312 240.701 469.312 245.901 465.446C254.834 458.779 255.101 457.979 255.501 428.246C256.034 397.579 255.234 394.379 246.834 387.979C241.101 383.579 231.634 382.512 225.368 385.712Z"/>
                 </svg>
 
-                <img src="/img/new/moon.svg" alt="" srcset="" class="moon hidden">
+                <svg class="moon" width="469" height="469" viewBox="5 5 20 23" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M10.895 7.574c0 7.55 5.179 13.67 11.567 13.67 1.588 0 3.101-0.38 4.479-1.063-1.695 4.46-5.996 7.636-11.051 7.636-6.533 0-11.83-5.297-11.83-11.83 0-4.82 2.888-8.959 7.023-10.803-0.116 0.778-0.188 1.573-0.188 2.39z"></path>
+                </svg>
             </button>
 
             <div class="nav-link flag-container">
@@ -438,7 +440,8 @@
         </div>
     </header>
     <div id="mobile-header">
-        <a class="logo" href="/"><img src="/img/new/logo-symbol-dark.svg" alt="logo" /></a>
+        <a href="/es" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-symbol-light.svg" alt="" srcset=""></a>
+        <a href="/es" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-symbol-dark.svg" alt="" srcset=""></a>
 
         <button id="hamburger" class="nav-toggle-btn">
             <svg viewBox="0 0 100 80" width="36" height="36">
@@ -737,6 +740,56 @@
         io.observe(cover);
     })();
 
+
+    // switch theme
+    const sunIcon = document.querySelector('.sun');
+    const moonIcon = document.querySelector('.moon');
+
+    const userTheme = localStorage.getItem('theme');
+    const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    const prismThemeLink = document.getElementById('prism-theme')
+
+    const iconToggle = () => {
+        sunIcon.classList.toggle('hidden');
+        moonIcon.classList.toggle('hidden');
+    }
+
+    const themeCheck = () => {
+        if(userTheme === 'dark' || (!userTheme && systemTheme)){
+            document.documentElement.classList.add('dark');
+            moonIcon.classList.add('hidden');
+            if(prismThemeLink){
+                prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
+            }
+        }
+        else{
+            sunIcon.classList.add('hidden');
+            if(prismThemeLink){
+                prismThemeLink.setAttribute('href','/css/prism-light.min.css')
+            }
+        }
+    }
+    themeCheck();
+
+    const themeSwitch = () => {
+        if(document.documentElement.classList.contains('dark')){
+            document.documentElement.classList.remove('dark');
+            localStorage.setItem('theme','light');
+            if(prismThemeLink){
+                prismThemeLink.setAttribute('href','/css/prism-light.min.css')
+            }
+            iconToggle();
+        }
+        else{
+            document.documentElement.classList.add('dark');
+            localStorage.setItem('theme','dark');
+            if(prismThemeLink){
+                prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
+            }
+            iconToggle();
+        }
+    }
+
     window.addEventListener('click',(e)=>{
         if(e.target.closest('.nav-link')){
             if(e.target.closest('.nav-link').classList.contains('active')){
@@ -756,9 +809,9 @@
                 nav.classList.add('open');
             }
         }
-        // else if(e.target.closest('.theme-switch-btn')){
-        //     themeSwitch();
-        // }
+        else if(e.target.closest('.theme-switch-btn')){
+            themeSwitch();
+        }
     });
     </script>
 </body>
diff --git a/fa/index.html b/fa/index.html
index cf47586c70..0703f9ad74 100644
--- a/fa/index.html
+++ b/fa/index.html
@@ -32,8 +32,8 @@
 
 <body>
     <header id="navbar">
-        <a class="logo" href="/"><img src="/img/design_3/logo-light.png" alt="logo" /></a>
-        
+        <a href="/fa" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo" /></a>
+        <a href="/fa" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo" /></a>
 
         <nav id="menu">
             <ul>
@@ -185,7 +185,9 @@
                 <path d="M225.368 385.712C222.968 387.046 219.368 390.112 217.368 392.646L213.768 397.312V426.379C213.768 458.246 213.901 458.779 222.968 465.446C228.168 469.312 240.701 469.312 245.901 465.446C254.834 458.779 255.101 457.979 255.501 428.246C256.034 397.579 255.234 394.379 246.834 387.979C241.101 383.579 231.634 382.512 225.368 385.712Z"/>
                 </svg>
 
-                <img src="/img/new/moon.svg" alt="" srcset="" class="moon hidden">
+                <svg class="moon" width="469" height="469" viewBox="5 5 20 23" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M10.895 7.574c0 7.55 5.179 13.67 11.567 13.67 1.588 0 3.101-0.38 4.479-1.063-1.695 4.46-5.996 7.636-11.051 7.636-6.533 0-11.83-5.297-11.83-11.83 0-4.82 2.888-8.959 7.023-10.803-0.116 0.778-0.188 1.573-0.188 2.39z"></path>
+                </svg>
             </button>
 
             <div class="nav-link flag-container">
@@ -433,7 +435,8 @@
         </div>
     </header>
     <div id="mobile-header">
-        <a class="logo" href="/"><img src="/img/new/logo-symbol-dark.svg" alt="logo" /></a>
+        <a href="/fa" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-symbol-light.svg" alt="" srcset=""></a>
+        <a href="/fa" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-symbol-dark.svg" alt="" srcset=""></a>
 
         <button id="hamburger" class="nav-toggle-btn">
             <svg viewBox="0 0 100 80" width="36" height="36">
@@ -732,6 +735,56 @@
         io.observe(cover);
     })();
 
+
+    // switch theme
+    const sunIcon = document.querySelector('.sun');
+    const moonIcon = document.querySelector('.moon');
+
+    const userTheme = localStorage.getItem('theme');
+    const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    const prismThemeLink = document.getElementById('prism-theme')
+
+    const iconToggle = () => {
+        sunIcon.classList.toggle('hidden');
+        moonIcon.classList.toggle('hidden');
+    }
+
+    const themeCheck = () => {
+        if(userTheme === 'dark' || (!userTheme && systemTheme)){
+            document.documentElement.classList.add('dark');
+            moonIcon.classList.add('hidden');
+            if(prismThemeLink){
+                prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
+            }
+        }
+        else{
+            sunIcon.classList.add('hidden');
+            if(prismThemeLink){
+                prismThemeLink.setAttribute('href','/css/prism-light.min.css')
+            }
+        }
+    }
+    themeCheck();
+
+    const themeSwitch = () => {
+        if(document.documentElement.classList.contains('dark')){
+            document.documentElement.classList.remove('dark');
+            localStorage.setItem('theme','light');
+            if(prismThemeLink){
+                prismThemeLink.setAttribute('href','/css/prism-light.min.css')
+            }
+            iconToggle();
+        }
+        else{
+            document.documentElement.classList.add('dark');
+            localStorage.setItem('theme','dark');
+            if(prismThemeLink){
+                prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
+            }
+            iconToggle();
+        }
+    }
+
     window.addEventListener('click',(e)=>{
         if(e.target.closest('.nav-link')){
             if(e.target.closest('.nav-link').classList.contains('active')){
@@ -751,9 +804,9 @@
                 nav.classList.add('open');
             }
         }
-        // else if(e.target.closest('.theme-switch-btn')){
-        //     themeSwitch();
-        // }
+        else if(e.target.closest('.theme-switch-btn')){
+            themeSwitch();
+        }
     });
     </script>
 </body>
diff --git a/fi/index.html b/fi/index.html
index d75b29ef62..2ddfc35a0e 100644
--- a/fi/index.html
+++ b/fi/index.html
@@ -32,8 +32,8 @@
 
 <body>
     <header id="navbar">
-        <a class="logo" href="/"><img src="/img/design_3/logo-light.png" alt="logo" /></a>
-        
+        <a href="/fi" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo" /></a>
+        <a href="/fi" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo" /></a>
 
         <nav id="menu">
             <ul>
@@ -185,7 +185,9 @@
                 <path d="M225.368 385.712C222.968 387.046 219.368 390.112 217.368 392.646L213.768 397.312V426.379C213.768 458.246 213.901 458.779 222.968 465.446C228.168 469.312 240.701 469.312 245.901 465.446C254.834 458.779 255.101 457.979 255.501 428.246C256.034 397.579 255.234 394.379 246.834 387.979C241.101 383.579 231.634 382.512 225.368 385.712Z"/>
                 </svg>
 
-                <img src="/img/new/moon.svg" alt="" srcset="" class="moon hidden">
+                <svg class="moon" width="469" height="469" viewBox="5 5 20 23" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M10.895 7.574c0 7.55 5.179 13.67 11.567 13.67 1.588 0 3.101-0.38 4.479-1.063-1.695 4.46-5.996 7.636-11.051 7.636-6.533 0-11.83-5.297-11.83-11.83 0-4.82 2.888-8.959 7.023-10.803-0.116 0.778-0.188 1.573-0.188 2.39z"></path>
+                </svg>
             </button>
 
             <div class="nav-link flag-container">
@@ -438,7 +440,8 @@
         </div>
     </header>
     <div id="mobile-header">
-        <a class="logo" href="/"><img src="/img/new/logo-symbol-dark.svg" alt="logo" /></a>
+        <a href="/fi" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-symbol-light.svg" alt="" srcset=""></a>
+        <a href="/fi" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-symbol-dark.svg" alt="" srcset=""></a>
 
         <button id="hamburger" class="nav-toggle-btn">
             <svg viewBox="0 0 100 80" width="36" height="36">
@@ -737,6 +740,56 @@
         io.observe(cover);
     })();
 
+
+    // switch theme
+    const sunIcon = document.querySelector('.sun');
+    const moonIcon = document.querySelector('.moon');
+
+    const userTheme = localStorage.getItem('theme');
+    const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    const prismThemeLink = document.getElementById('prism-theme')
+
+    const iconToggle = () => {
+        sunIcon.classList.toggle('hidden');
+        moonIcon.classList.toggle('hidden');
+    }
+
+    const themeCheck = () => {
+        if(userTheme === 'dark' || (!userTheme && systemTheme)){
+            document.documentElement.classList.add('dark');
+            moonIcon.classList.add('hidden');
+            if(prismThemeLink){
+                prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
+            }
+        }
+        else{
+            sunIcon.classList.add('hidden');
+            if(prismThemeLink){
+                prismThemeLink.setAttribute('href','/css/prism-light.min.css')
+            }
+        }
+    }
+    themeCheck();
+
+    const themeSwitch = () => {
+        if(document.documentElement.classList.contains('dark')){
+            document.documentElement.classList.remove('dark');
+            localStorage.setItem('theme','light');
+            if(prismThemeLink){
+                prismThemeLink.setAttribute('href','/css/prism-light.min.css')
+            }
+            iconToggle();
+        }
+        else{
+            document.documentElement.classList.add('dark');
+            localStorage.setItem('theme','dark');
+            if(prismThemeLink){
+                prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
+            }
+            iconToggle();
+        }
+    }
+
     window.addEventListener('click',(e)=>{
         if(e.target.closest('.nav-link')){
             if(e.target.closest('.nav-link').classList.contains('active')){
@@ -756,9 +809,9 @@
                 nav.classList.add('open');
             }
         }
-        // else if(e.target.closest('.theme-switch-btn')){
-        //     themeSwitch();
-        // }
+        else if(e.target.closest('.theme-switch-btn')){
+            themeSwitch();
+        }
     });
     </script>
 </body>
diff --git a/fr/index.html b/fr/index.html
index f2c8340b59..1ba0d34863 100644
--- a/fr/index.html
+++ b/fr/index.html
@@ -32,8 +32,8 @@
 
 <body>
     <header id="navbar">
-        <a class="logo" href="/"><img src="/img/design_3/logo-light.png" alt="logo" /></a>
-        
+        <a href="/fr" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo" /></a>
+        <a href="/fr" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo" /></a>
 
         <nav id="menu">
             <ul>
@@ -185,7 +185,9 @@
                 <path d="M225.368 385.712C222.968 387.046 219.368 390.112 217.368 392.646L213.768 397.312V426.379C213.768 458.246 213.901 458.779 222.968 465.446C228.168 469.312 240.701 469.312 245.901 465.446C254.834 458.779 255.101 457.979 255.501 428.246C256.034 397.579 255.234 394.379 246.834 387.979C241.101 383.579 231.634 382.512 225.368 385.712Z"/>
                 </svg>
 
-                <img src="/img/new/moon.svg" alt="" srcset="" class="moon hidden">
+                <svg class="moon" width="469" height="469" viewBox="5 5 20 23" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M10.895 7.574c0 7.55 5.179 13.67 11.567 13.67 1.588 0 3.101-0.38 4.479-1.063-1.695 4.46-5.996 7.636-11.051 7.636-6.533 0-11.83-5.297-11.83-11.83 0-4.82 2.888-8.959 7.023-10.803-0.116 0.778-0.188 1.573-0.188 2.39z"></path>
+                </svg>
             </button>
 
             <div class="nav-link flag-container">
@@ -438,7 +440,8 @@
         </div>
     </header>
     <div id="mobile-header">
-        <a class="logo" href="/"><img src="/img/new/logo-symbol-dark.svg" alt="logo" /></a>
+        <a href="/fr" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-symbol-light.svg" alt="" srcset=""></a>
+        <a href="/fr" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-symbol-dark.svg" alt="" srcset=""></a>
 
         <button id="hamburger" class="nav-toggle-btn">
             <svg viewBox="0 0 100 80" width="36" height="36">
@@ -737,6 +740,56 @@
         io.observe(cover);
     })();
 
+
+    // switch theme
+    const sunIcon = document.querySelector('.sun');
+    const moonIcon = document.querySelector('.moon');
+
+    const userTheme = localStorage.getItem('theme');
+    const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    const prismThemeLink = document.getElementById('prism-theme')
+
+    const iconToggle = () => {
+        sunIcon.classList.toggle('hidden');
+        moonIcon.classList.toggle('hidden');
+    }
+
+    const themeCheck = () => {
+        if(userTheme === 'dark' || (!userTheme && systemTheme)){
+            document.documentElement.classList.add('dark');
+            moonIcon.classList.add('hidden');
+            if(prismThemeLink){
+                prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
+            }
+        }
+        else{
+            sunIcon.classList.add('hidden');
+            if(prismThemeLink){
+                prismThemeLink.setAttribute('href','/css/prism-light.min.css')
+            }
+        }
+    }
+    themeCheck();
+
+    const themeSwitch = () => {
+        if(document.documentElement.classList.contains('dark')){
+            document.documentElement.classList.remove('dark');
+            localStorage.setItem('theme','light');
+            if(prismThemeLink){
+                prismThemeLink.setAttribute('href','/css/prism-light.min.css')
+            }
+            iconToggle();
+        }
+        else{
+            document.documentElement.classList.add('dark');
+            localStorage.setItem('theme','dark');
+            if(prismThemeLink){
+                prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
+            }
+            iconToggle();
+        }
+    }
+
     window.addEventListener('click',(e)=>{
         if(e.target.closest('.nav-link')){
             if(e.target.closest('.nav-link').classList.contains('active')){
@@ -756,9 +809,9 @@
                 nav.classList.add('open');
             }
         }
-        // else if(e.target.closest('.theme-switch-btn')){
-        //     themeSwitch();
-        // }
+        else if(e.target.closest('.theme-switch-btn')){
+            themeSwitch();
+        }
     });
     </script>
 </body>
diff --git a/he/index.html b/he/index.html
index 85e93920b9..322d3367bc 100644
--- a/he/index.html
+++ b/he/index.html
@@ -32,8 +32,8 @@
 
 <body>
     <header id="navbar">
-        <a class="logo" href="/"><img src="/img/design_3/logo-light.png" alt="logo" /></a>
-        
+        <a href="/he" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo" /></a>
+        <a href="/he" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo" /></a>
 
         <nav id="menu">
             <ul>
@@ -185,7 +185,9 @@
                 <path d="M225.368 385.712C222.968 387.046 219.368 390.112 217.368 392.646L213.768 397.312V426.379C213.768 458.246 213.901 458.779 222.968 465.446C228.168 469.312 240.701 469.312 245.901 465.446C254.834 458.779 255.101 457.979 255.501 428.246C256.034 397.579 255.234 394.379 246.834 387.979C241.101 383.579 231.634 382.512 225.368 385.712Z"/>
                 </svg>
 
-                <img src="/img/new/moon.svg" alt="" srcset="" class="moon hidden">
+                <svg class="moon" width="469" height="469" viewBox="5 5 20 23" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M10.895 7.574c0 7.55 5.179 13.67 11.567 13.67 1.588 0 3.101-0.38 4.479-1.063-1.695 4.46-5.996 7.636-11.051 7.636-6.533 0-11.83-5.297-11.83-11.83 0-4.82 2.888-8.959 7.023-10.803-0.116 0.778-0.188 1.573-0.188 2.39z"></path>
+                </svg>
             </button>
 
             <div class="nav-link flag-container">
@@ -438,7 +440,8 @@
         </div>
     </header>
     <div id="mobile-header">
-        <a class="logo" href="/"><img src="/img/new/logo-symbol-dark.svg" alt="logo" /></a>
+        <a href="/he" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-symbol-light.svg" alt="" srcset=""></a>
+        <a href="/he" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-symbol-dark.svg" alt="" srcset=""></a>
 
         <button id="hamburger" class="nav-toggle-btn">
             <svg viewBox="0 0 100 80" width="36" height="36">
@@ -737,6 +740,56 @@
         io.observe(cover);
     })();
 
+
+    // switch theme
+    const sunIcon = document.querySelector('.sun');
+    const moonIcon = document.querySelector('.moon');
+
+    const userTheme = localStorage.getItem('theme');
+    const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    const prismThemeLink = document.getElementById('prism-theme')
+
+    const iconToggle = () => {
+        sunIcon.classList.toggle('hidden');
+        moonIcon.classList.toggle('hidden');
+    }
+
+    const themeCheck = () => {
+        if(userTheme === 'dark' || (!userTheme && systemTheme)){
+            document.documentElement.classList.add('dark');
+            moonIcon.classList.add('hidden');
+            if(prismThemeLink){
+                prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
+            }
+        }
+        else{
+            sunIcon.classList.add('hidden');
+            if(prismThemeLink){
+                prismThemeLink.setAttribute('href','/css/prism-light.min.css')
+            }
+        }
+    }
+    themeCheck();
+
+    const themeSwitch = () => {
+        if(document.documentElement.classList.contains('dark')){
+            document.documentElement.classList.remove('dark');
+            localStorage.setItem('theme','light');
+            if(prismThemeLink){
+                prismThemeLink.setAttribute('href','/css/prism-light.min.css')
+            }
+            iconToggle();
+        }
+        else{
+            document.documentElement.classList.add('dark');
+            localStorage.setItem('theme','dark');
+            if(prismThemeLink){
+                prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
+            }
+            iconToggle();
+        }
+    }
+
     window.addEventListener('click',(e)=>{
         if(e.target.closest('.nav-link')){
             if(e.target.closest('.nav-link').classList.contains('active')){
@@ -756,9 +809,9 @@
                 nav.classList.add('open');
             }
         }
-        // else if(e.target.closest('.theme-switch-btn')){
-        //     themeSwitch();
-        // }
+        else if(e.target.closest('.theme-switch-btn')){
+            themeSwitch();
+        }
     });
     </script>
 </body>
diff --git a/hu/index.html b/hu/index.html
index 953c7b3d2e..79c69ebc02 100644
--- a/hu/index.html
+++ b/hu/index.html
@@ -32,8 +32,8 @@
 
 <body>
     <header id="navbar">
-        <a class="logo" href="/"><img src="/img/design_3/logo-light.png" alt="logo" /></a>
-        
+        <a href="/hu" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo" /></a>
+        <a href="/hu" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo" /></a>
 
         <nav id="menu">
             <ul>
@@ -185,7 +185,9 @@
                 <path d="M225.368 385.712C222.968 387.046 219.368 390.112 217.368 392.646L213.768 397.312V426.379C213.768 458.246 213.901 458.779 222.968 465.446C228.168 469.312 240.701 469.312 245.901 465.446C254.834 458.779 255.101 457.979 255.501 428.246C256.034 397.579 255.234 394.379 246.834 387.979C241.101 383.579 231.634 382.512 225.368 385.712Z"/>
                 </svg>
 
-                <img src="/img/new/moon.svg" alt="" srcset="" class="moon hidden">
+                <svg class="moon" width="469" height="469" viewBox="5 5 20 23" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M10.895 7.574c0 7.55 5.179 13.67 11.567 13.67 1.588 0 3.101-0.38 4.479-1.063-1.695 4.46-5.996 7.636-11.051 7.636-6.533 0-11.83-5.297-11.83-11.83 0-4.82 2.888-8.959 7.023-10.803-0.116 0.778-0.188 1.573-0.188 2.39z"></path>
+                </svg>
             </button>
 
             <div class="nav-link flag-container">
@@ -438,7 +440,8 @@
         </div>
     </header>
     <div id="mobile-header">
-        <a class="logo" href="/"><img src="/img/new/logo-symbol-dark.svg" alt="logo" /></a>
+        <a href="/hu" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-symbol-light.svg" alt="" srcset=""></a>
+        <a href="/hu" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-symbol-dark.svg" alt="" srcset=""></a>
 
         <button id="hamburger" class="nav-toggle-btn">
             <svg viewBox="0 0 100 80" width="36" height="36">
@@ -737,6 +740,56 @@
         io.observe(cover);
     })();
 
+
+    // switch theme
+    const sunIcon = document.querySelector('.sun');
+    const moonIcon = document.querySelector('.moon');
+
+    const userTheme = localStorage.getItem('theme');
+    const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    const prismThemeLink = document.getElementById('prism-theme')
+
+    const iconToggle = () => {
+        sunIcon.classList.toggle('hidden');
+        moonIcon.classList.toggle('hidden');
+    }
+
+    const themeCheck = () => {
+        if(userTheme === 'dark' || (!userTheme && systemTheme)){
+            document.documentElement.classList.add('dark');
+            moonIcon.classList.add('hidden');
+            if(prismThemeLink){
+                prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
+            }
+        }
+        else{
+            sunIcon.classList.add('hidden');
+            if(prismThemeLink){
+                prismThemeLink.setAttribute('href','/css/prism-light.min.css')
+            }
+        }
+    }
+    themeCheck();
+
+    const themeSwitch = () => {
+        if(document.documentElement.classList.contains('dark')){
+            document.documentElement.classList.remove('dark');
+            localStorage.setItem('theme','light');
+            if(prismThemeLink){
+                prismThemeLink.setAttribute('href','/css/prism-light.min.css')
+            }
+            iconToggle();
+        }
+        else{
+            document.documentElement.classList.add('dark');
+            localStorage.setItem('theme','dark');
+            if(prismThemeLink){
+                prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
+            }
+            iconToggle();
+        }
+    }
+
     window.addEventListener('click',(e)=>{
         if(e.target.closest('.nav-link')){
             if(e.target.closest('.nav-link').classList.contains('active')){
@@ -756,9 +809,9 @@
                 nav.classList.add('open');
             }
         }
-        // else if(e.target.closest('.theme-switch-btn')){
-        //     themeSwitch();
-        // }
+        else if(e.target.closest('.theme-switch-btn')){
+            themeSwitch();
+        }
     });
     </script>
 </body>
diff --git a/id/index.html b/id/index.html
index 0e9dedd271..41ebb8bd55 100644
--- a/id/index.html
+++ b/id/index.html
@@ -32,8 +32,8 @@
 
 <body>
     <header id="navbar">
-        <a class="logo" href="/"><img src="/img/design_3/logo-light.png" alt="logo" /></a>
-        
+        <a href="/id" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo" /></a>
+        <a href="/id" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo" /></a>
 
         <nav id="menu">
             <ul>
@@ -185,7 +185,9 @@
                 <path d="M225.368 385.712C222.968 387.046 219.368 390.112 217.368 392.646L213.768 397.312V426.379C213.768 458.246 213.901 458.779 222.968 465.446C228.168 469.312 240.701 469.312 245.901 465.446C254.834 458.779 255.101 457.979 255.501 428.246C256.034 397.579 255.234 394.379 246.834 387.979C241.101 383.579 231.634 382.512 225.368 385.712Z"/>
                 </svg>
 
-                <img src="/img/new/moon.svg" alt="" srcset="" class="moon hidden">
+                <svg class="moon" width="469" height="469" viewBox="5 5 20 23" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M10.895 7.574c0 7.55 5.179 13.67 11.567 13.67 1.588 0 3.101-0.38 4.479-1.063-1.695 4.46-5.996 7.636-11.051 7.636-6.533 0-11.83-5.297-11.83-11.83 0-4.82 2.888-8.959 7.023-10.803-0.116 0.778-0.188 1.573-0.188 2.39z"></path>
+                </svg>
             </button>
 
             <div class="nav-link flag-container">
@@ -433,7 +435,8 @@
         </div>
     </header>
     <div id="mobile-header">
-        <a class="logo" href="/"><img src="/img/new/logo-symbol-dark.svg" alt="logo" /></a>
+        <a href="/id" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-symbol-light.svg" alt="" srcset=""></a>
+        <a href="/id" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-symbol-dark.svg" alt="" srcset=""></a>
 
         <button id="hamburger" class="nav-toggle-btn">
             <svg viewBox="0 0 100 80" width="36" height="36">
@@ -732,6 +735,56 @@
         io.observe(cover);
     })();
 
+
+    // switch theme
+    const sunIcon = document.querySelector('.sun');
+    const moonIcon = document.querySelector('.moon');
+
+    const userTheme = localStorage.getItem('theme');
+    const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    const prismThemeLink = document.getElementById('prism-theme')
+
+    const iconToggle = () => {
+        sunIcon.classList.toggle('hidden');
+        moonIcon.classList.toggle('hidden');
+    }
+
+    const themeCheck = () => {
+        if(userTheme === 'dark' || (!userTheme && systemTheme)){
+            document.documentElement.classList.add('dark');
+            moonIcon.classList.add('hidden');
+            if(prismThemeLink){
+                prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
+            }
+        }
+        else{
+            sunIcon.classList.add('hidden');
+            if(prismThemeLink){
+                prismThemeLink.setAttribute('href','/css/prism-light.min.css')
+            }
+        }
+    }
+    themeCheck();
+
+    const themeSwitch = () => {
+        if(document.documentElement.classList.contains('dark')){
+            document.documentElement.classList.remove('dark');
+            localStorage.setItem('theme','light');
+            if(prismThemeLink){
+                prismThemeLink.setAttribute('href','/css/prism-light.min.css')
+            }
+            iconToggle();
+        }
+        else{
+            document.documentElement.classList.add('dark');
+            localStorage.setItem('theme','dark');
+            if(prismThemeLink){
+                prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
+            }
+            iconToggle();
+        }
+    }
+
     window.addEventListener('click',(e)=>{
         if(e.target.closest('.nav-link')){
             if(e.target.closest('.nav-link').classList.contains('active')){
@@ -751,9 +804,9 @@
                 nav.classList.add('open');
             }
         }
-        // else if(e.target.closest('.theme-switch-btn')){
-        //     themeSwitch();
-        // }
+        else if(e.target.closest('.theme-switch-btn')){
+            themeSwitch();
+        }
     });
     </script>
 </body>
diff --git a/img/design_3/cover-light.jpg b/img/design_3/cover-light.jpg
new file mode 100644
index 0000000000..5964d065f5
Binary files /dev/null and b/img/design_3/cover-light.jpg differ
diff --git a/img/design_3/cover-mobile-light.webp b/img/design_3/cover-mobile-light.webp
new file mode 100644
index 0000000000..51c8b69e8b
Binary files /dev/null and b/img/design_3/cover-mobile-light.webp differ
diff --git a/img/design_3/section-2-desktop-light.webp b/img/design_3/section-2-desktop-light.webp
new file mode 100644
index 0000000000..b4cdfdd302
Binary files /dev/null and b/img/design_3/section-2-desktop-light.webp differ
diff --git a/img/design_3/section-2-mobile-light.webp b/img/design_3/section-2-mobile-light.webp
new file mode 100644
index 0000000000..ee91ba96ef
Binary files /dev/null and b/img/design_3/section-2-mobile-light.webp differ
diff --git a/img/design_3/section-3-desktop-light.webp b/img/design_3/section-3-desktop-light.webp
new file mode 100644
index 0000000000..dc02b3a158
Binary files /dev/null and b/img/design_3/section-3-desktop-light.webp differ
diff --git a/img/design_3/section-3-mobile-light.webp b/img/design_3/section-3-mobile-light.webp
new file mode 100644
index 0000000000..61e79838cd
Binary files /dev/null and b/img/design_3/section-3-mobile-light.webp differ
diff --git a/index.html b/index.html
index cf2fa743eb..32f3d63bae 100644
--- a/index.html
+++ b/index.html
@@ -32,8 +32,8 @@
 
 <body>
     <header id="navbar">
-        <a class="logo" href="/"><img src="/img/design_3/logo-light.png" alt="logo" /></a>
-        
+        <a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo" /></a>
+        <a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo" /></a>
 
         <nav id="menu">
             <ul>
@@ -185,7 +185,9 @@
                 <path d="M225.368 385.712C222.968 387.046 219.368 390.112 217.368 392.646L213.768 397.312V426.379C213.768 458.246 213.901 458.779 222.968 465.446C228.168 469.312 240.701 469.312 245.901 465.446C254.834 458.779 255.101 457.979 255.501 428.246C256.034 397.579 255.234 394.379 246.834 387.979C241.101 383.579 231.634 382.512 225.368 385.712Z"/>
                 </svg>
 
-                <img src="/img/new/moon.svg" alt="" srcset="" class="moon hidden">
+                <svg class="moon" width="469" height="469" viewBox="5 5 20 23" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M10.895 7.574c0 7.55 5.179 13.67 11.567 13.67 1.588 0 3.101-0.38 4.479-1.063-1.695 4.46-5.996 7.636-11.051 7.636-6.533 0-11.83-5.297-11.83-11.83 0-4.82 2.888-8.959 7.023-10.803-0.116 0.778-0.188 1.573-0.188 2.39z"></path>
+                </svg>
             </button>
 
             <div class="nav-link flag-container">
@@ -438,7 +440,8 @@
         </div>
     </header>
     <div id="mobile-header">
-        <a class="logo" href="/"><img src="/img/new/logo-symbol-dark.svg" alt="logo" /></a>
+        <a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-symbol-light.svg" alt="" srcset=""></a>
+        <a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-symbol-dark.svg" alt="" srcset=""></a>
 
         <button id="hamburger" class="nav-toggle-btn">
             <svg viewBox="0 0 100 80" width="36" height="36">
@@ -737,6 +740,56 @@
         io.observe(cover);
     })();
 
+
+    // switch theme
+    const sunIcon = document.querySelector('.sun');
+    const moonIcon = document.querySelector('.moon');
+
+    const userTheme = localStorage.getItem('theme');
+    const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    const prismThemeLink = document.getElementById('prism-theme')
+
+    const iconToggle = () => {
+        sunIcon.classList.toggle('hidden');
+        moonIcon.classList.toggle('hidden');
+    }
+
+    const themeCheck = () => {
+        if(userTheme === 'dark' || (!userTheme && systemTheme)){
+            document.documentElement.classList.add('dark');
+            moonIcon.classList.add('hidden');
+            if(prismThemeLink){
+                prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
+            }
+        }
+        else{
+            sunIcon.classList.add('hidden');
+            if(prismThemeLink){
+                prismThemeLink.setAttribute('href','/css/prism-light.min.css')
+            }
+        }
+    }
+    themeCheck();
+
+    const themeSwitch = () => {
+        if(document.documentElement.classList.contains('dark')){
+            document.documentElement.classList.remove('dark');
+            localStorage.setItem('theme','light');
+            if(prismThemeLink){
+                prismThemeLink.setAttribute('href','/css/prism-light.min.css')
+            }
+            iconToggle();
+        }
+        else{
+            document.documentElement.classList.add('dark');
+            localStorage.setItem('theme','dark');
+            if(prismThemeLink){
+                prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
+            }
+            iconToggle();
+        }
+    }
+
     window.addEventListener('click',(e)=>{
         if(e.target.closest('.nav-link')){
             if(e.target.closest('.nav-link').classList.contains('active')){
@@ -756,9 +809,9 @@
                 nav.classList.add('open');
             }
         }
-        // else if(e.target.closest('.theme-switch-btn')){
-        //     themeSwitch();
-        // }
+        else if(e.target.closest('.theme-switch-btn')){
+            themeSwitch();
+        }
     });
     </script>
 </body>
diff --git a/it/index.html b/it/index.html
index d8525edb27..fbf8e65886 100644
--- a/it/index.html
+++ b/it/index.html
@@ -32,8 +32,8 @@
 
 <body>
     <header id="navbar">
-        <a class="logo" href="/"><img src="/img/design_3/logo-light.png" alt="logo" /></a>
-        
+        <a href="/it" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo" /></a>
+        <a href="/it" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo" /></a>
 
         <nav id="menu">
             <ul>
@@ -185,7 +185,9 @@
                 <path d="M225.368 385.712C222.968 387.046 219.368 390.112 217.368 392.646L213.768 397.312V426.379C213.768 458.246 213.901 458.779 222.968 465.446C228.168 469.312 240.701 469.312 245.901 465.446C254.834 458.779 255.101 457.979 255.501 428.246C256.034 397.579 255.234 394.379 246.834 387.979C241.101 383.579 231.634 382.512 225.368 385.712Z"/>
                 </svg>
 
-                <img src="/img/new/moon.svg" alt="" srcset="" class="moon hidden">
+                <svg class="moon" width="469" height="469" viewBox="5 5 20 23" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M10.895 7.574c0 7.55 5.179 13.67 11.567 13.67 1.588 0 3.101-0.38 4.479-1.063-1.695 4.46-5.996 7.636-11.051 7.636-6.533 0-11.83-5.297-11.83-11.83 0-4.82 2.888-8.959 7.023-10.803-0.116 0.778-0.188 1.573-0.188 2.39z"></path>
+                </svg>
             </button>
 
             <div class="nav-link flag-container">
@@ -438,7 +440,8 @@
         </div>
     </header>
     <div id="mobile-header">
-        <a class="logo" href="/"><img src="/img/new/logo-symbol-dark.svg" alt="logo" /></a>
+        <a href="/it" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-symbol-light.svg" alt="" srcset=""></a>
+        <a href="/it" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-symbol-dark.svg" alt="" srcset=""></a>
 
         <button id="hamburger" class="nav-toggle-btn">
             <svg viewBox="0 0 100 80" width="36" height="36">
@@ -737,6 +740,56 @@
         io.observe(cover);
     })();
 
+
+    // switch theme
+    const sunIcon = document.querySelector('.sun');
+    const moonIcon = document.querySelector('.moon');
+
+    const userTheme = localStorage.getItem('theme');
+    const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    const prismThemeLink = document.getElementById('prism-theme')
+
+    const iconToggle = () => {
+        sunIcon.classList.toggle('hidden');
+        moonIcon.classList.toggle('hidden');
+    }
+
+    const themeCheck = () => {
+        if(userTheme === 'dark' || (!userTheme && systemTheme)){
+            document.documentElement.classList.add('dark');
+            moonIcon.classList.add('hidden');
+            if(prismThemeLink){
+                prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
+            }
+        }
+        else{
+            sunIcon.classList.add('hidden');
+            if(prismThemeLink){
+                prismThemeLink.setAttribute('href','/css/prism-light.min.css')
+            }
+        }
+    }
+    themeCheck();
+
+    const themeSwitch = () => {
+        if(document.documentElement.classList.contains('dark')){
+            document.documentElement.classList.remove('dark');
+            localStorage.setItem('theme','light');
+            if(prismThemeLink){
+                prismThemeLink.setAttribute('href','/css/prism-light.min.css')
+            }
+            iconToggle();
+        }
+        else{
+            document.documentElement.classList.add('dark');
+            localStorage.setItem('theme','dark');
+            if(prismThemeLink){
+                prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
+            }
+            iconToggle();
+        }
+    }
+
     window.addEventListener('click',(e)=>{
         if(e.target.closest('.nav-link')){
             if(e.target.closest('.nav-link').classList.contains('active')){
@@ -756,9 +809,9 @@
                 nav.classList.add('open');
             }
         }
-        // else if(e.target.closest('.theme-switch-btn')){
-        //     themeSwitch();
-        // }
+        else if(e.target.closest('.theme-switch-btn')){
+            themeSwitch();
+        }
     });
     </script>
 </body>
diff --git a/ja/index.html b/ja/index.html
index 2cdd9d3ed8..e0cf5c399d 100644
--- a/ja/index.html
+++ b/ja/index.html
@@ -32,8 +32,8 @@
 
 <body>
     <header id="navbar">
-        <a class="logo" href="/"><img src="/img/design_3/logo-light.png" alt="logo" /></a>
-        
+        <a href="/ja" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo" /></a>
+        <a href="/ja" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo" /></a>
 
         <nav id="menu">
             <ul>
@@ -185,7 +185,9 @@
                 <path d="M225.368 385.712C222.968 387.046 219.368 390.112 217.368 392.646L213.768 397.312V426.379C213.768 458.246 213.901 458.779 222.968 465.446C228.168 469.312 240.701 469.312 245.901 465.446C254.834 458.779 255.101 457.979 255.501 428.246C256.034 397.579 255.234 394.379 246.834 387.979C241.101 383.579 231.634 382.512 225.368 385.712Z"/>
                 </svg>
 
-                <img src="/img/new/moon.svg" alt="" srcset="" class="moon hidden">
+                <svg class="moon" width="469" height="469" viewBox="5 5 20 23" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M10.895 7.574c0 7.55 5.179 13.67 11.567 13.67 1.588 0 3.101-0.38 4.479-1.063-1.695 4.46-5.996 7.636-11.051 7.636-6.533 0-11.83-5.297-11.83-11.83 0-4.82 2.888-8.959 7.023-10.803-0.116 0.778-0.188 1.573-0.188 2.39z"></path>
+                </svg>
             </button>
 
             <div class="nav-link flag-container">
@@ -438,7 +440,8 @@
         </div>
     </header>
     <div id="mobile-header">
-        <a class="logo" href="/"><img src="/img/new/logo-symbol-dark.svg" alt="logo" /></a>
+        <a href="/ja" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-symbol-light.svg" alt="" srcset=""></a>
+        <a href="/ja" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-symbol-dark.svg" alt="" srcset=""></a>
 
         <button id="hamburger" class="nav-toggle-btn">
             <svg viewBox="0 0 100 80" width="36" height="36">
@@ -737,6 +740,56 @@
         io.observe(cover);
     })();
 
+
+    // switch theme
+    const sunIcon = document.querySelector('.sun');
+    const moonIcon = document.querySelector('.moon');
+
+    const userTheme = localStorage.getItem('theme');
+    const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    const prismThemeLink = document.getElementById('prism-theme')
+
+    const iconToggle = () => {
+        sunIcon.classList.toggle('hidden');
+        moonIcon.classList.toggle('hidden');
+    }
+
+    const themeCheck = () => {
+        if(userTheme === 'dark' || (!userTheme && systemTheme)){
+            document.documentElement.classList.add('dark');
+            moonIcon.classList.add('hidden');
+            if(prismThemeLink){
+                prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
+            }
+        }
+        else{
+            sunIcon.classList.add('hidden');
+            if(prismThemeLink){
+                prismThemeLink.setAttribute('href','/css/prism-light.min.css')
+            }
+        }
+    }
+    themeCheck();
+
+    const themeSwitch = () => {
+        if(document.documentElement.classList.contains('dark')){
+            document.documentElement.classList.remove('dark');
+            localStorage.setItem('theme','light');
+            if(prismThemeLink){
+                prismThemeLink.setAttribute('href','/css/prism-light.min.css')
+            }
+            iconToggle();
+        }
+        else{
+            document.documentElement.classList.add('dark');
+            localStorage.setItem('theme','dark');
+            if(prismThemeLink){
+                prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
+            }
+            iconToggle();
+        }
+    }
+
     window.addEventListener('click',(e)=>{
         if(e.target.closest('.nav-link')){
             if(e.target.closest('.nav-link').classList.contains('active')){
@@ -756,9 +809,9 @@
                 nav.classList.add('open');
             }
         }
-        // else if(e.target.closest('.theme-switch-btn')){
-        //     themeSwitch();
-        // }
+        else if(e.target.closest('.theme-switch-btn')){
+            themeSwitch();
+        }
     });
     </script>
 </body>
diff --git a/nl/index.html b/nl/index.html
index 6f6321901a..87d7971806 100644
--- a/nl/index.html
+++ b/nl/index.html
@@ -32,8 +32,8 @@
 
 <body>
     <header id="navbar">
-        <a class="logo" href="/"><img src="/img/design_3/logo-light.png" alt="logo" /></a>
-        
+        <a href="/nl" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo" /></a>
+        <a href="/nl" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo" /></a>
 
         <nav id="menu">
             <ul>
@@ -185,7 +185,9 @@
                 <path d="M225.368 385.712C222.968 387.046 219.368 390.112 217.368 392.646L213.768 397.312V426.379C213.768 458.246 213.901 458.779 222.968 465.446C228.168 469.312 240.701 469.312 245.901 465.446C254.834 458.779 255.101 457.979 255.501 428.246C256.034 397.579 255.234 394.379 246.834 387.979C241.101 383.579 231.634 382.512 225.368 385.712Z"/>
                 </svg>
 
-                <img src="/img/new/moon.svg" alt="" srcset="" class="moon hidden">
+                <svg class="moon" width="469" height="469" viewBox="5 5 20 23" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M10.895 7.574c0 7.55 5.179 13.67 11.567 13.67 1.588 0 3.101-0.38 4.479-1.063-1.695 4.46-5.996 7.636-11.051 7.636-6.533 0-11.83-5.297-11.83-11.83 0-4.82 2.888-8.959 7.023-10.803-0.116 0.778-0.188 1.573-0.188 2.39z"></path>
+                </svg>
             </button>
 
             <div class="nav-link flag-container">
@@ -438,7 +440,8 @@
         </div>
     </header>
     <div id="mobile-header">
-        <a class="logo" href="/"><img src="/img/new/logo-symbol-dark.svg" alt="logo" /></a>
+        <a href="/nl" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-symbol-light.svg" alt="" srcset=""></a>
+        <a href="/nl" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-symbol-dark.svg" alt="" srcset=""></a>
 
         <button id="hamburger" class="nav-toggle-btn">
             <svg viewBox="0 0 100 80" width="36" height="36">
@@ -737,6 +740,56 @@
         io.observe(cover);
     })();
 
+
+    // switch theme
+    const sunIcon = document.querySelector('.sun');
+    const moonIcon = document.querySelector('.moon');
+
+    const userTheme = localStorage.getItem('theme');
+    const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    const prismThemeLink = document.getElementById('prism-theme')
+
+    const iconToggle = () => {
+        sunIcon.classList.toggle('hidden');
+        moonIcon.classList.toggle('hidden');
+    }
+
+    const themeCheck = () => {
+        if(userTheme === 'dark' || (!userTheme && systemTheme)){
+            document.documentElement.classList.add('dark');
+            moonIcon.classList.add('hidden');
+            if(prismThemeLink){
+                prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
+            }
+        }
+        else{
+            sunIcon.classList.add('hidden');
+            if(prismThemeLink){
+                prismThemeLink.setAttribute('href','/css/prism-light.min.css')
+            }
+        }
+    }
+    themeCheck();
+
+    const themeSwitch = () => {
+        if(document.documentElement.classList.contains('dark')){
+            document.documentElement.classList.remove('dark');
+            localStorage.setItem('theme','light');
+            if(prismThemeLink){
+                prismThemeLink.setAttribute('href','/css/prism-light.min.css')
+            }
+            iconToggle();
+        }
+        else{
+            document.documentElement.classList.add('dark');
+            localStorage.setItem('theme','dark');
+            if(prismThemeLink){
+                prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
+            }
+            iconToggle();
+        }
+    }
+
     window.addEventListener('click',(e)=>{
         if(e.target.closest('.nav-link')){
             if(e.target.closest('.nav-link').classList.contains('active')){
@@ -756,9 +809,9 @@
                 nav.classList.add('open');
             }
         }
-        // else if(e.target.closest('.theme-switch-btn')){
-        //     themeSwitch();
-        // }
+        else if(e.target.closest('.theme-switch-btn')){
+            themeSwitch();
+        }
     });
     </script>
 </body>
diff --git a/pl/index.html b/pl/index.html
index 3442e6a625..0a03dc5c4d 100644
--- a/pl/index.html
+++ b/pl/index.html
@@ -32,8 +32,8 @@
 
 <body>
     <header id="navbar">
-        <a class="logo" href="/"><img src="/img/design_3/logo-light.png" alt="logo" /></a>
-        
+        <a href="/pl" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo" /></a>
+        <a href="/pl" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo" /></a>
 
         <nav id="menu">
             <ul>
@@ -185,7 +185,9 @@
                 <path d="M225.368 385.712C222.968 387.046 219.368 390.112 217.368 392.646L213.768 397.312V426.379C213.768 458.246 213.901 458.779 222.968 465.446C228.168 469.312 240.701 469.312 245.901 465.446C254.834 458.779 255.101 457.979 255.501 428.246C256.034 397.579 255.234 394.379 246.834 387.979C241.101 383.579 231.634 382.512 225.368 385.712Z"/>
                 </svg>
 
-                <img src="/img/new/moon.svg" alt="" srcset="" class="moon hidden">
+                <svg class="moon" width="469" height="469" viewBox="5 5 20 23" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M10.895 7.574c0 7.55 5.179 13.67 11.567 13.67 1.588 0 3.101-0.38 4.479-1.063-1.695 4.46-5.996 7.636-11.051 7.636-6.533 0-11.83-5.297-11.83-11.83 0-4.82 2.888-8.959 7.023-10.803-0.116 0.778-0.188 1.573-0.188 2.39z"></path>
+                </svg>
             </button>
 
             <div class="nav-link flag-container">
@@ -438,7 +440,8 @@
         </div>
     </header>
     <div id="mobile-header">
-        <a class="logo" href="/"><img src="/img/new/logo-symbol-dark.svg" alt="logo" /></a>
+        <a href="/pl" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-symbol-light.svg" alt="" srcset=""></a>
+        <a href="/pl" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-symbol-dark.svg" alt="" srcset=""></a>
 
         <button id="hamburger" class="nav-toggle-btn">
             <svg viewBox="0 0 100 80" width="36" height="36">
@@ -737,6 +740,56 @@
         io.observe(cover);
     })();
 
+
+    // switch theme
+    const sunIcon = document.querySelector('.sun');
+    const moonIcon = document.querySelector('.moon');
+
+    const userTheme = localStorage.getItem('theme');
+    const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    const prismThemeLink = document.getElementById('prism-theme')
+
+    const iconToggle = () => {
+        sunIcon.classList.toggle('hidden');
+        moonIcon.classList.toggle('hidden');
+    }
+
+    const themeCheck = () => {
+        if(userTheme === 'dark' || (!userTheme && systemTheme)){
+            document.documentElement.classList.add('dark');
+            moonIcon.classList.add('hidden');
+            if(prismThemeLink){
+                prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
+            }
+        }
+        else{
+            sunIcon.classList.add('hidden');
+            if(prismThemeLink){
+                prismThemeLink.setAttribute('href','/css/prism-light.min.css')
+            }
+        }
+    }
+    themeCheck();
+
+    const themeSwitch = () => {
+        if(document.documentElement.classList.contains('dark')){
+            document.documentElement.classList.remove('dark');
+            localStorage.setItem('theme','light');
+            if(prismThemeLink){
+                prismThemeLink.setAttribute('href','/css/prism-light.min.css')
+            }
+            iconToggle();
+        }
+        else{
+            document.documentElement.classList.add('dark');
+            localStorage.setItem('theme','dark');
+            if(prismThemeLink){
+                prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
+            }
+            iconToggle();
+        }
+    }
+
     window.addEventListener('click',(e)=>{
         if(e.target.closest('.nav-link')){
             if(e.target.closest('.nav-link').classList.contains('active')){
@@ -756,9 +809,9 @@
                 nav.classList.add('open');
             }
         }
-        // else if(e.target.closest('.theme-switch-btn')){
-        //     themeSwitch();
-        // }
+        else if(e.target.closest('.theme-switch-btn')){
+            themeSwitch();
+        }
     });
     </script>
 </body>
diff --git a/pt_BR/index.html b/pt_BR/index.html
index 0f1cf8e2f2..50682b8234 100644
--- a/pt_BR/index.html
+++ b/pt_BR/index.html
@@ -32,8 +32,8 @@
 
 <body>
     <header id="navbar">
-        <a class="logo" href="/"><img src="/img/design_3/logo-light.png" alt="logo" /></a>
-        
+        <a href="/pt_BR" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo" /></a>
+        <a href="/pt_BR" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo" /></a>
 
         <nav id="menu">
             <ul>
@@ -185,7 +185,9 @@
                 <path d="M225.368 385.712C222.968 387.046 219.368 390.112 217.368 392.646L213.768 397.312V426.379C213.768 458.246 213.901 458.779 222.968 465.446C228.168 469.312 240.701 469.312 245.901 465.446C254.834 458.779 255.101 457.979 255.501 428.246C256.034 397.579 255.234 394.379 246.834 387.979C241.101 383.579 231.634 382.512 225.368 385.712Z"/>
                 </svg>
 
-                <img src="/img/new/moon.svg" alt="" srcset="" class="moon hidden">
+                <svg class="moon" width="469" height="469" viewBox="5 5 20 23" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M10.895 7.574c0 7.55 5.179 13.67 11.567 13.67 1.588 0 3.101-0.38 4.479-1.063-1.695 4.46-5.996 7.636-11.051 7.636-6.533 0-11.83-5.297-11.83-11.83 0-4.82 2.888-8.959 7.023-10.803-0.116 0.778-0.188 1.573-0.188 2.39z"></path>
+                </svg>
             </button>
 
             <div class="nav-link flag-container">
@@ -438,7 +440,8 @@
         </div>
     </header>
     <div id="mobile-header">
-        <a class="logo" href="/"><img src="/img/new/logo-symbol-dark.svg" alt="logo" /></a>
+        <a href="/pt_BR" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-symbol-light.svg" alt="" srcset=""></a>
+        <a href="/pt_BR" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-symbol-dark.svg" alt="" srcset=""></a>
 
         <button id="hamburger" class="nav-toggle-btn">
             <svg viewBox="0 0 100 80" width="36" height="36">
@@ -737,6 +740,56 @@
         io.observe(cover);
     })();
 
+
+    // switch theme
+    const sunIcon = document.querySelector('.sun');
+    const moonIcon = document.querySelector('.moon');
+
+    const userTheme = localStorage.getItem('theme');
+    const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    const prismThemeLink = document.getElementById('prism-theme')
+
+    const iconToggle = () => {
+        sunIcon.classList.toggle('hidden');
+        moonIcon.classList.toggle('hidden');
+    }
+
+    const themeCheck = () => {
+        if(userTheme === 'dark' || (!userTheme && systemTheme)){
+            document.documentElement.classList.add('dark');
+            moonIcon.classList.add('hidden');
+            if(prismThemeLink){
+                prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
+            }
+        }
+        else{
+            sunIcon.classList.add('hidden');
+            if(prismThemeLink){
+                prismThemeLink.setAttribute('href','/css/prism-light.min.css')
+            }
+        }
+    }
+    themeCheck();
+
+    const themeSwitch = () => {
+        if(document.documentElement.classList.contains('dark')){
+            document.documentElement.classList.remove('dark');
+            localStorage.setItem('theme','light');
+            if(prismThemeLink){
+                prismThemeLink.setAttribute('href','/css/prism-light.min.css')
+            }
+            iconToggle();
+        }
+        else{
+            document.documentElement.classList.add('dark');
+            localStorage.setItem('theme','dark');
+            if(prismThemeLink){
+                prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
+            }
+            iconToggle();
+        }
+    }
+
     window.addEventListener('click',(e)=>{
         if(e.target.closest('.nav-link')){
             if(e.target.closest('.nav-link').classList.contains('active')){
@@ -756,9 +809,9 @@
                 nav.classList.add('open');
             }
         }
-        // else if(e.target.closest('.theme-switch-btn')){
-        //     themeSwitch();
-        // }
+        else if(e.target.closest('.theme-switch-btn')){
+            themeSwitch();
+        }
     });
     </script>
 </body>
diff --git a/ro/index.html b/ro/index.html
index c160cf4ded..a2e5693f6e 100644
--- a/ro/index.html
+++ b/ro/index.html
@@ -32,8 +32,8 @@
 
 <body>
     <header id="navbar">
-        <a class="logo" href="/"><img src="/img/design_3/logo-light.png" alt="logo" /></a>
-        
+        <a href="/ro" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo" /></a>
+        <a href="/ro" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo" /></a>
 
         <nav id="menu">
             <ul>
@@ -185,7 +185,9 @@
                 <path d="M225.368 385.712C222.968 387.046 219.368 390.112 217.368 392.646L213.768 397.312V426.379C213.768 458.246 213.901 458.779 222.968 465.446C228.168 469.312 240.701 469.312 245.901 465.446C254.834 458.779 255.101 457.979 255.501 428.246C256.034 397.579 255.234 394.379 246.834 387.979C241.101 383.579 231.634 382.512 225.368 385.712Z"/>
                 </svg>
 
-                <img src="/img/new/moon.svg" alt="" srcset="" class="moon hidden">
+                <svg class="moon" width="469" height="469" viewBox="5 5 20 23" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M10.895 7.574c0 7.55 5.179 13.67 11.567 13.67 1.588 0 3.101-0.38 4.479-1.063-1.695 4.46-5.996 7.636-11.051 7.636-6.533 0-11.83-5.297-11.83-11.83 0-4.82 2.888-8.959 7.023-10.803-0.116 0.778-0.188 1.573-0.188 2.39z"></path>
+                </svg>
             </button>
 
             <div class="nav-link flag-container">
@@ -433,7 +435,8 @@
         </div>
     </header>
     <div id="mobile-header">
-        <a class="logo" href="/"><img src="/img/new/logo-symbol-dark.svg" alt="logo" /></a>
+        <a href="/ro" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-symbol-light.svg" alt="" srcset=""></a>
+        <a href="/ro" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-symbol-dark.svg" alt="" srcset=""></a>
 
         <button id="hamburger" class="nav-toggle-btn">
             <svg viewBox="0 0 100 80" width="36" height="36">
@@ -732,6 +735,56 @@
         io.observe(cover);
     })();
 
+
+    // switch theme
+    const sunIcon = document.querySelector('.sun');
+    const moonIcon = document.querySelector('.moon');
+
+    const userTheme = localStorage.getItem('theme');
+    const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    const prismThemeLink = document.getElementById('prism-theme')
+
+    const iconToggle = () => {
+        sunIcon.classList.toggle('hidden');
+        moonIcon.classList.toggle('hidden');
+    }
+
+    const themeCheck = () => {
+        if(userTheme === 'dark' || (!userTheme && systemTheme)){
+            document.documentElement.classList.add('dark');
+            moonIcon.classList.add('hidden');
+            if(prismThemeLink){
+                prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
+            }
+        }
+        else{
+            sunIcon.classList.add('hidden');
+            if(prismThemeLink){
+                prismThemeLink.setAttribute('href','/css/prism-light.min.css')
+            }
+        }
+    }
+    themeCheck();
+
+    const themeSwitch = () => {
+        if(document.documentElement.classList.contains('dark')){
+            document.documentElement.classList.remove('dark');
+            localStorage.setItem('theme','light');
+            if(prismThemeLink){
+                prismThemeLink.setAttribute('href','/css/prism-light.min.css')
+            }
+            iconToggle();
+        }
+        else{
+            document.documentElement.classList.add('dark');
+            localStorage.setItem('theme','dark');
+            if(prismThemeLink){
+                prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
+            }
+            iconToggle();
+        }
+    }
+
     window.addEventListener('click',(e)=>{
         if(e.target.closest('.nav-link')){
             if(e.target.closest('.nav-link').classList.contains('active')){
@@ -751,9 +804,9 @@
                 nav.classList.add('open');
             }
         }
-        // else if(e.target.closest('.theme-switch-btn')){
-        //     themeSwitch();
-        // }
+        else if(e.target.closest('.theme-switch-btn')){
+            themeSwitch();
+        }
     });
     </script>
 </body>
diff --git a/ru/index.html b/ru/index.html
index 80af665acd..4a9edab62d 100644
--- a/ru/index.html
+++ b/ru/index.html
@@ -32,8 +32,8 @@
 
 <body>
     <header id="navbar">
-        <a class="logo" href="/"><img src="/img/design_3/logo-light.png" alt="logo" /></a>
-        
+        <a href="/ru" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo" /></a>
+        <a href="/ru" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo" /></a>
 
         <nav id="menu">
             <ul>
@@ -185,7 +185,9 @@
                 <path d="M225.368 385.712C222.968 387.046 219.368 390.112 217.368 392.646L213.768 397.312V426.379C213.768 458.246 213.901 458.779 222.968 465.446C228.168 469.312 240.701 469.312 245.901 465.446C254.834 458.779 255.101 457.979 255.501 428.246C256.034 397.579 255.234 394.379 246.834 387.979C241.101 383.579 231.634 382.512 225.368 385.712Z"/>
                 </svg>
 
-                <img src="/img/new/moon.svg" alt="" srcset="" class="moon hidden">
+                <svg class="moon" width="469" height="469" viewBox="5 5 20 23" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M10.895 7.574c0 7.55 5.179 13.67 11.567 13.67 1.588 0 3.101-0.38 4.479-1.063-1.695 4.46-5.996 7.636-11.051 7.636-6.533 0-11.83-5.297-11.83-11.83 0-4.82 2.888-8.959 7.023-10.803-0.116 0.778-0.188 1.573-0.188 2.39z"></path>
+                </svg>
             </button>
 
             <div class="nav-link flag-container">
@@ -438,7 +440,8 @@
         </div>
     </header>
     <div id="mobile-header">
-        <a class="logo" href="/"><img src="/img/new/logo-symbol-dark.svg" alt="logo" /></a>
+        <a href="/ru" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-symbol-light.svg" alt="" srcset=""></a>
+        <a href="/ru" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-symbol-dark.svg" alt="" srcset=""></a>
 
         <button id="hamburger" class="nav-toggle-btn">
             <svg viewBox="0 0 100 80" width="36" height="36">
@@ -737,6 +740,56 @@
         io.observe(cover);
     })();
 
+
+    // switch theme
+    const sunIcon = document.querySelector('.sun');
+    const moonIcon = document.querySelector('.moon');
+
+    const userTheme = localStorage.getItem('theme');
+    const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    const prismThemeLink = document.getElementById('prism-theme')
+
+    const iconToggle = () => {
+        sunIcon.classList.toggle('hidden');
+        moonIcon.classList.toggle('hidden');
+    }
+
+    const themeCheck = () => {
+        if(userTheme === 'dark' || (!userTheme && systemTheme)){
+            document.documentElement.classList.add('dark');
+            moonIcon.classList.add('hidden');
+            if(prismThemeLink){
+                prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
+            }
+        }
+        else{
+            sunIcon.classList.add('hidden');
+            if(prismThemeLink){
+                prismThemeLink.setAttribute('href','/css/prism-light.min.css')
+            }
+        }
+    }
+    themeCheck();
+
+    const themeSwitch = () => {
+        if(document.documentElement.classList.contains('dark')){
+            document.documentElement.classList.remove('dark');
+            localStorage.setItem('theme','light');
+            if(prismThemeLink){
+                prismThemeLink.setAttribute('href','/css/prism-light.min.css')
+            }
+            iconToggle();
+        }
+        else{
+            document.documentElement.classList.add('dark');
+            localStorage.setItem('theme','dark');
+            if(prismThemeLink){
+                prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
+            }
+            iconToggle();
+        }
+    }
+
     window.addEventListener('click',(e)=>{
         if(e.target.closest('.nav-link')){
             if(e.target.closest('.nav-link').classList.contains('active')){
@@ -756,9 +809,9 @@
                 nav.classList.add('open');
             }
         }
-        // else if(e.target.closest('.theme-switch-btn')){
-        //     themeSwitch();
-        // }
+        else if(e.target.closest('.theme-switch-btn')){
+            themeSwitch();
+        }
     });
     </script>
 </body>
diff --git a/tr/index.html b/tr/index.html
index 380d17b5d9..7e4ce254fd 100644
--- a/tr/index.html
+++ b/tr/index.html
@@ -32,8 +32,8 @@
 
 <body>
     <header id="navbar">
-        <a class="logo" href="/"><img src="/img/design_3/logo-light.png" alt="logo" /></a>
-        
+        <a href="/tr" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo" /></a>
+        <a href="/tr" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo" /></a>
 
         <nav id="menu">
             <ul>
@@ -185,7 +185,9 @@
                 <path d="M225.368 385.712C222.968 387.046 219.368 390.112 217.368 392.646L213.768 397.312V426.379C213.768 458.246 213.901 458.779 222.968 465.446C228.168 469.312 240.701 469.312 245.901 465.446C254.834 458.779 255.101 457.979 255.501 428.246C256.034 397.579 255.234 394.379 246.834 387.979C241.101 383.579 231.634 382.512 225.368 385.712Z"/>
                 </svg>
 
-                <img src="/img/new/moon.svg" alt="" srcset="" class="moon hidden">
+                <svg class="moon" width="469" height="469" viewBox="5 5 20 23" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M10.895 7.574c0 7.55 5.179 13.67 11.567 13.67 1.588 0 3.101-0.38 4.479-1.063-1.695 4.46-5.996 7.636-11.051 7.636-6.533 0-11.83-5.297-11.83-11.83 0-4.82 2.888-8.959 7.023-10.803-0.116 0.778-0.188 1.573-0.188 2.39z"></path>
+                </svg>
             </button>
 
             <div class="nav-link flag-container">
@@ -433,7 +435,8 @@
         </div>
     </header>
     <div id="mobile-header">
-        <a class="logo" href="/"><img src="/img/new/logo-symbol-dark.svg" alt="logo" /></a>
+        <a href="/tr" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-symbol-light.svg" alt="" srcset=""></a>
+        <a href="/tr" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-symbol-dark.svg" alt="" srcset=""></a>
 
         <button id="hamburger" class="nav-toggle-btn">
             <svg viewBox="0 0 100 80" width="36" height="36">
@@ -732,6 +735,56 @@
         io.observe(cover);
     })();
 
+
+    // switch theme
+    const sunIcon = document.querySelector('.sun');
+    const moonIcon = document.querySelector('.moon');
+
+    const userTheme = localStorage.getItem('theme');
+    const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    const prismThemeLink = document.getElementById('prism-theme')
+
+    const iconToggle = () => {
+        sunIcon.classList.toggle('hidden');
+        moonIcon.classList.toggle('hidden');
+    }
+
+    const themeCheck = () => {
+        if(userTheme === 'dark' || (!userTheme && systemTheme)){
+            document.documentElement.classList.add('dark');
+            moonIcon.classList.add('hidden');
+            if(prismThemeLink){
+                prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
+            }
+        }
+        else{
+            sunIcon.classList.add('hidden');
+            if(prismThemeLink){
+                prismThemeLink.setAttribute('href','/css/prism-light.min.css')
+            }
+        }
+    }
+    themeCheck();
+
+    const themeSwitch = () => {
+        if(document.documentElement.classList.contains('dark')){
+            document.documentElement.classList.remove('dark');
+            localStorage.setItem('theme','light');
+            if(prismThemeLink){
+                prismThemeLink.setAttribute('href','/css/prism-light.min.css')
+            }
+            iconToggle();
+        }
+        else{
+            document.documentElement.classList.add('dark');
+            localStorage.setItem('theme','dark');
+            if(prismThemeLink){
+                prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
+            }
+            iconToggle();
+        }
+    }
+
     window.addEventListener('click',(e)=>{
         if(e.target.closest('.nav-link')){
             if(e.target.closest('.nav-link').classList.contains('active')){
@@ -751,9 +804,9 @@
                 nav.classList.add('open');
             }
         }
-        // else if(e.target.closest('.theme-switch-btn')){
-        //     themeSwitch();
-        // }
+        else if(e.target.closest('.theme-switch-btn')){
+            themeSwitch();
+        }
     });
     </script>
 </body>
diff --git a/uk/index.html b/uk/index.html
index 7d9d44468e..827dca76e0 100644
--- a/uk/index.html
+++ b/uk/index.html
@@ -32,8 +32,8 @@
 
 <body>
     <header id="navbar">
-        <a class="logo" href="/"><img src="/img/design_3/logo-light.png" alt="logo" /></a>
-        
+        <a href="/uk" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo" /></a>
+        <a href="/uk" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo" /></a>
 
         <nav id="menu">
             <ul>
@@ -185,7 +185,9 @@
                 <path d="M225.368 385.712C222.968 387.046 219.368 390.112 217.368 392.646L213.768 397.312V426.379C213.768 458.246 213.901 458.779 222.968 465.446C228.168 469.312 240.701 469.312 245.901 465.446C254.834 458.779 255.101 457.979 255.501 428.246C256.034 397.579 255.234 394.379 246.834 387.979C241.101 383.579 231.634 382.512 225.368 385.712Z"/>
                 </svg>
 
-                <img src="/img/new/moon.svg" alt="" srcset="" class="moon hidden">
+                <svg class="moon" width="469" height="469" viewBox="5 5 20 23" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M10.895 7.574c0 7.55 5.179 13.67 11.567 13.67 1.588 0 3.101-0.38 4.479-1.063-1.695 4.46-5.996 7.636-11.051 7.636-6.533 0-11.83-5.297-11.83-11.83 0-4.82 2.888-8.959 7.023-10.803-0.116 0.778-0.188 1.573-0.188 2.39z"></path>
+                </svg>
             </button>
 
             <div class="nav-link flag-container">
@@ -438,7 +440,8 @@
         </div>
     </header>
     <div id="mobile-header">
-        <a class="logo" href="/"><img src="/img/new/logo-symbol-dark.svg" alt="logo" /></a>
+        <a href="/uk" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-symbol-light.svg" alt="" srcset=""></a>
+        <a href="/uk" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-symbol-dark.svg" alt="" srcset=""></a>
 
         <button id="hamburger" class="nav-toggle-btn">
             <svg viewBox="0 0 100 80" width="36" height="36">
@@ -737,6 +740,56 @@
         io.observe(cover);
     })();
 
+
+    // switch theme
+    const sunIcon = document.querySelector('.sun');
+    const moonIcon = document.querySelector('.moon');
+
+    const userTheme = localStorage.getItem('theme');
+    const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    const prismThemeLink = document.getElementById('prism-theme')
+
+    const iconToggle = () => {
+        sunIcon.classList.toggle('hidden');
+        moonIcon.classList.toggle('hidden');
+    }
+
+    const themeCheck = () => {
+        if(userTheme === 'dark' || (!userTheme && systemTheme)){
+            document.documentElement.classList.add('dark');
+            moonIcon.classList.add('hidden');
+            if(prismThemeLink){
+                prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
+            }
+        }
+        else{
+            sunIcon.classList.add('hidden');
+            if(prismThemeLink){
+                prismThemeLink.setAttribute('href','/css/prism-light.min.css')
+            }
+        }
+    }
+    themeCheck();
+
+    const themeSwitch = () => {
+        if(document.documentElement.classList.contains('dark')){
+            document.documentElement.classList.remove('dark');
+            localStorage.setItem('theme','light');
+            if(prismThemeLink){
+                prismThemeLink.setAttribute('href','/css/prism-light.min.css')
+            }
+            iconToggle();
+        }
+        else{
+            document.documentElement.classList.add('dark');
+            localStorage.setItem('theme','dark');
+            if(prismThemeLink){
+                prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
+            }
+            iconToggle();
+        }
+    }
+
     window.addEventListener('click',(e)=>{
         if(e.target.closest('.nav-link')){
             if(e.target.closest('.nav-link').classList.contains('active')){
@@ -756,9 +809,9 @@
                 nav.classList.add('open');
             }
         }
-        // else if(e.target.closest('.theme-switch-btn')){
-        //     themeSwitch();
-        // }
+        else if(e.target.closest('.theme-switch-btn')){
+            themeSwitch();
+        }
     });
     </script>
 </body>
diff --git a/zh_Hans/index.html b/zh_Hans/index.html
index d7fde8c7f0..f5ad5f0974 100644
--- a/zh_Hans/index.html
+++ b/zh_Hans/index.html
@@ -32,8 +32,8 @@
 
 <body>
     <header id="navbar">
-        <a class="logo" href="/"><img src="/img/design_3/logo-light.png" alt="logo" /></a>
-        
+        <a href="/zh_Hans" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo" /></a>
+        <a href="/zh_Hans" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo" /></a>
 
         <nav id="menu">
             <ul>
@@ -185,7 +185,9 @@
                 <path d="M225.368 385.712C222.968 387.046 219.368 390.112 217.368 392.646L213.768 397.312V426.379C213.768 458.246 213.901 458.779 222.968 465.446C228.168 469.312 240.701 469.312 245.901 465.446C254.834 458.779 255.101 457.979 255.501 428.246C256.034 397.579 255.234 394.379 246.834 387.979C241.101 383.579 231.634 382.512 225.368 385.712Z"/>
                 </svg>
 
-                <img src="/img/new/moon.svg" alt="" srcset="" class="moon hidden">
+                <svg class="moon" width="469" height="469" viewBox="5 5 20 23" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M10.895 7.574c0 7.55 5.179 13.67 11.567 13.67 1.588 0 3.101-0.38 4.479-1.063-1.695 4.46-5.996 7.636-11.051 7.636-6.533 0-11.83-5.297-11.83-11.83 0-4.82 2.888-8.959 7.023-10.803-0.116 0.778-0.188 1.573-0.188 2.39z"></path>
+                </svg>
             </button>
 
             <div class="nav-link flag-container">
@@ -438,7 +440,8 @@
         </div>
     </header>
     <div id="mobile-header">
-        <a class="logo" href="/"><img src="/img/new/logo-symbol-dark.svg" alt="logo" /></a>
+        <a href="/zh_Hans" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-symbol-light.svg" alt="" srcset=""></a>
+        <a href="/zh_Hans" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-symbol-dark.svg" alt="" srcset=""></a>
 
         <button id="hamburger" class="nav-toggle-btn">
             <svg viewBox="0 0 100 80" width="36" height="36">
@@ -737,6 +740,56 @@
         io.observe(cover);
     })();
 
+
+    // switch theme
+    const sunIcon = document.querySelector('.sun');
+    const moonIcon = document.querySelector('.moon');
+
+    const userTheme = localStorage.getItem('theme');
+    const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    const prismThemeLink = document.getElementById('prism-theme')
+
+    const iconToggle = () => {
+        sunIcon.classList.toggle('hidden');
+        moonIcon.classList.toggle('hidden');
+    }
+
+    const themeCheck = () => {
+        if(userTheme === 'dark' || (!userTheme && systemTheme)){
+            document.documentElement.classList.add('dark');
+            moonIcon.classList.add('hidden');
+            if(prismThemeLink){
+                prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
+            }
+        }
+        else{
+            sunIcon.classList.add('hidden');
+            if(prismThemeLink){
+                prismThemeLink.setAttribute('href','/css/prism-light.min.css')
+            }
+        }
+    }
+    themeCheck();
+
+    const themeSwitch = () => {
+        if(document.documentElement.classList.contains('dark')){
+            document.documentElement.classList.remove('dark');
+            localStorage.setItem('theme','light');
+            if(prismThemeLink){
+                prismThemeLink.setAttribute('href','/css/prism-light.min.css')
+            }
+            iconToggle();
+        }
+        else{
+            document.documentElement.classList.add('dark');
+            localStorage.setItem('theme','dark');
+            if(prismThemeLink){
+                prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
+            }
+            iconToggle();
+        }
+    }
+
     window.addEventListener('click',(e)=>{
         if(e.target.closest('.nav-link')){
             if(e.target.closest('.nav-link').classList.contains('active')){
@@ -756,9 +809,9 @@
                 nav.classList.add('open');
             }
         }
-        // else if(e.target.closest('.theme-switch-btn')){
-        //     themeSwitch();
-        // }
+        else if(e.target.closest('.theme-switch-btn')){
+            themeSwitch();
+        }
     });
     </script>
 </body>
diff --git a/zh_Hant/index.html b/zh_Hant/index.html
index 18173cadf5..4ec36c7c60 100644
--- a/zh_Hant/index.html
+++ b/zh_Hant/index.html
@@ -32,8 +32,8 @@
 
 <body>
     <header id="navbar">
-        <a class="logo" href="/"><img src="/img/design_3/logo-light.png" alt="logo" /></a>
-        
+        <a href="/zh_Hant" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo" /></a>
+        <a href="/zh_Hant" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo" /></a>
 
         <nav id="menu">
             <ul>
@@ -185,7 +185,9 @@
                 <path d="M225.368 385.712C222.968 387.046 219.368 390.112 217.368 392.646L213.768 397.312V426.379C213.768 458.246 213.901 458.779 222.968 465.446C228.168 469.312 240.701 469.312 245.901 465.446C254.834 458.779 255.101 457.979 255.501 428.246C256.034 397.579 255.234 394.379 246.834 387.979C241.101 383.579 231.634 382.512 225.368 385.712Z"/>
                 </svg>
 
-                <img src="/img/new/moon.svg" alt="" srcset="" class="moon hidden">
+                <svg class="moon" width="469" height="469" viewBox="5 5 20 23" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M10.895 7.574c0 7.55 5.179 13.67 11.567 13.67 1.588 0 3.101-0.38 4.479-1.063-1.695 4.46-5.996 7.636-11.051 7.636-6.533 0-11.83-5.297-11.83-11.83 0-4.82 2.888-8.959 7.023-10.803-0.116 0.778-0.188 1.573-0.188 2.39z"></path>
+                </svg>
             </button>
 
             <div class="nav-link flag-container">
@@ -433,7 +435,8 @@
         </div>
     </header>
     <div id="mobile-header">
-        <a class="logo" href="/"><img src="/img/new/logo-symbol-dark.svg" alt="logo" /></a>
+        <a href="/zh_Hant" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-symbol-light.svg" alt="" srcset=""></a>
+        <a href="/zh_Hant" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-symbol-dark.svg" alt="" srcset=""></a>
 
         <button id="hamburger" class="nav-toggle-btn">
             <svg viewBox="0 0 100 80" width="36" height="36">
@@ -732,6 +735,56 @@
         io.observe(cover);
     })();
 
+
+    // switch theme
+    const sunIcon = document.querySelector('.sun');
+    const moonIcon = document.querySelector('.moon');
+
+    const userTheme = localStorage.getItem('theme');
+    const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    const prismThemeLink = document.getElementById('prism-theme')
+
+    const iconToggle = () => {
+        sunIcon.classList.toggle('hidden');
+        moonIcon.classList.toggle('hidden');
+    }
+
+    const themeCheck = () => {
+        if(userTheme === 'dark' || (!userTheme && systemTheme)){
+            document.documentElement.classList.add('dark');
+            moonIcon.classList.add('hidden');
+            if(prismThemeLink){
+                prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
+            }
+        }
+        else{
+            sunIcon.classList.add('hidden');
+            if(prismThemeLink){
+                prismThemeLink.setAttribute('href','/css/prism-light.min.css')
+            }
+        }
+    }
+    themeCheck();
+
+    const themeSwitch = () => {
+        if(document.documentElement.classList.contains('dark')){
+            document.documentElement.classList.remove('dark');
+            localStorage.setItem('theme','light');
+            if(prismThemeLink){
+                prismThemeLink.setAttribute('href','/css/prism-light.min.css')
+            }
+            iconToggle();
+        }
+        else{
+            document.documentElement.classList.add('dark');
+            localStorage.setItem('theme','dark');
+            if(prismThemeLink){
+                prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
+            }
+            iconToggle();
+        }
+    }
+
     window.addEventListener('click',(e)=>{
         if(e.target.closest('.nav-link')){
             if(e.target.closest('.nav-link').classList.contains('active')){
@@ -751,9 +804,9 @@
                 nav.classList.add('open');
             }
         }
-        // else if(e.target.closest('.theme-switch-btn')){
-        //     themeSwitch();
-        // }
+        else if(e.target.closest('.theme-switch-btn')){
+            themeSwitch();
+        }
     });
     </script>
 </body>
