diff --git a/_data.yml b/_data.yml
index e8a227e..3613673 100644
--- a/_data.yml
+++ b/_data.yml
@@ -1,6 +1,8 @@
 lang: en
 
-logo: deca-logo.png
+logo_dark: /img/deca-logo-dark.png
+
+logo_light: /img/deca-logo-light.png
 
 home:
   welcome: DECA PROTOCOL
diff --git a/_includes/css/navbar.css b/_includes/css/navbar.css
index 0e67889..414733e 100644
--- a/_includes/css/navbar.css
+++ b/_includes/css/navbar.css
@@ -43,8 +43,8 @@
 
   & img {
     margin-bottom: 10px;
-    width:175px;
-    height:58px;
+    width:100px;
+    height:100px;
   }
 
   & span {
diff --git a/_includes/layouts/base.vto b/_includes/layouts/base.vto
index fb34eb7..429a7de 100644
--- a/_includes/layouts/base.vto
+++ b/_includes/layouts/base.vto
@@ -6,10 +6,12 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{{ it.title || metas.title }} - {{ metas.site }}</title>
 
+    <!-- Color Scheme Meta Tags -->
     <meta name="supported-color-schemes" content="light dark">
     <meta name="theme-color" content="hsl(220, 20%, 100%)" media="(prefers-color-scheme: light)">
     <meta name="theme-color" content="hsl(220, 20%, 10%)" media="(prefers-color-scheme: dark)">
-    
+
+    <!-- External Stylesheets and Scripts -->
     <link rel="stylesheet" href="/styles.css">
     <link rel="alternate" href="/feed.xml" type="application/atom+xml" title="{{ metas.site }}">
     <link rel="alternate" href="/feed.json" type="application/json" title="{{ metas.site }}">
@@ -21,11 +23,7 @@
   <body>
     <nav class="navbar">
       <a href="/" class="navbar-home">
-        {{ if it.logo }}
-          <img src="/img/{{ it.logo }}" alt="{{ metas.site }}">
-        {{ else }}
-          <strong>{{ metas.site }}</strong>
-        {{ /if }}
+        <img id="theme-logo" alt="{{ metas.site }}">
       </a>
 
       <ul class="navbar-links">
@@ -45,14 +43,25 @@
       {{ /for }}
       <li>
         <script>
+          //const lightLogo = "{{ it.logo-light }}";
+          //const darkLogo = "{{ it.logo-dark }}";
+          const lightLogo = "/img/deca-logo-light.png";
+          const darkLogo = "/img/deca-logo-dark.png";
+          
+          // Set initial theme and logo
           let theme = localStorage.getItem("theme") || (window.matchMedia("(prefers-color-scheme: dark)").matches
             ? "dark"
             : "light");
           document.documentElement.dataset.theme = theme;
+          document.getElementById("theme-logo").src = theme === "dark" ? darkLogo : lightLogo;
+          console.log("lightLogo:", ligthLogo, "darkLogo:", darkLogo);
+
           function changeTheme() {
             theme = theme === "dark" ? "light" : "dark";
             localStorage.setItem("theme", theme);
             document.documentElement.dataset.theme = theme;
+            document.getElementById("theme-logo").src = theme === "dark" ? darkLogo : lightLogo;
+            console.log("lightLogo:", ligthLogo, "darkLogo:", darkLogo);
           }
         </script>
         <button class="button" onclick="changeTheme()">
diff --git a/img/deca-logo-dark.png b/img/deca-logo-dark.png
new file mode 100644
index 0000000..78e4a41
Binary files /dev/null and b/img/deca-logo-dark.png differ
diff --git a/img/deca-logo-light.png b/img/deca-logo-light.png
new file mode 100644
index 0000000..acfedc1
Binary files /dev/null and b/img/deca-logo-light.png differ
diff --git a/img/deca-logo.png b/img/deca-logo.png
deleted file mode 100644
index bb95c98..0000000
Binary files a/img/deca-logo.png and /dev/null differ
diff --git a/img/favicon.png b/img/favicon.png
index ef859b8..57bf805 100644
Binary files a/img/favicon.png and b/img/favicon.png differ
