diff --git a/static/css/main.css b/static/css/main.css
index 7dcc62e..f2fd8db 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -18,10 +18,10 @@ html {
  /* Light mode (default) */
         body {
             background-color: #f3f4f6;
-            color: #1f2937;
+            color: #303030;
         }
         header nav {
-            background-color: #1f2937;
+            background-color: #303030;
             color: #f9fafb;
         }
         footer {
@@ -37,10 +37,10 @@ html {
             color: #f9fafb !important;
         }
         html.dark header nav {
-            background-color: #1f2937 !important;
+            background-color: #303030 !important;
         }
         html.dark footer {
-            background-color: #1f2937 !important;
+            background-color: #303030 !important;
         }
         html.dark footer p {
             color: #9ca3af !important;
@@ -52,10 +52,10 @@ html {
             color: #93c5fd !important;
         }
         html.dark .bg-gray-100 {
-            background-color: #111827 !important;
+            background-color: #303030 !important;
         }
         html.dark .bg-white {
-            background-color: #1f2937 !important;
+            background-color: #303030 !important;
         }
         html.dark .text-gray-900 {
             color: #f9fafb !important;
@@ -131,7 +131,7 @@ hr {
  */
 
 pre {
-  font-family: monospace, monospace; /* 1 */
+  font-family: 'Inter', sans-serif; /* 1 */
   font-size: 1em; /* 2 */
 }
 
@@ -175,7 +175,7 @@ strong {
 code,
 kbd,
 samp {
-  font-family: monospace, monospace; /* 1 */
+  font-family: 'Inter', sans-serif; /* 1 */
   font-size: 1em; /* 2 */
 }
 
@@ -483,7 +483,7 @@ ul {
  */
 
 html {
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 1 */
+  font-family: 'Inter', sans-serif;
   line-height: 1.5; /* 2 */
 }
 
@@ -619,7 +619,7 @@ pre,
 code,
 kbd,
 samp {
-  font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-family: 'Inter', sans-serif;
 }
 
 /**
@@ -12520,15 +12520,15 @@ video {
 }
 
 .font-sans {
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-family: 'Inter', sans-serif;
 }
 
 .font-serif {
-  font-family: Georgia, Cambria, "Times New Roman", Times, serif;
+  font-family: 'Inter', sans-serif;
 }
 
 .font-mono {
-  font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-family: 'Inter', sans-serif;
 }
 
 .font-hairline {
@@ -33575,15 +33575,15 @@ video {
   }
 
   .sm\:font-sans {
-    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    font-family: 'Inter', sans-serif;
   }
 
   .sm\:font-serif {
-    font-family: Georgia, Cambria, "Times New Roman", Times, serif;
+    font-family: 'Inter', sans-serif;
   }
 
   .sm\:font-mono {
-    font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    font-family: 'Inter', sans-serif;
   }
 
   .sm\:font-hairline {
@@ -54563,15 +54563,15 @@ video {
   }
 
   .md\:font-sans {
-    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    font-family: 'Inter', sans-serif;
   }
 
   .md\:font-serif {
-    font-family: Georgia, Cambria, "Times New Roman", Times, serif;
+    font-family: 'Inter', sans-serif;
   }
 
   .md\:font-mono {
-    font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    font-family: 'Inter', sans-serif;
   }
 
   .md\:font-hairline {
@@ -75551,15 +75551,15 @@ video {
   }
 
   .lg\:font-sans {
-    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    font-family: 'Inter', sans-serif; Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   }
 
   .lg\:font-serif {
-    font-family: Georgia, Cambria, "Times New Roman", Times, serif;
+    font-family: 'Inter', sans-serif;
   }
 
   .lg\:font-mono {
-    font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    font-family: 'Inter', sans-serif;
   }
 
   .lg\:font-hairline {
@@ -96539,15 +96539,15 @@ video {
   }
 
   .xl\:font-sans {
-    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    font-family: 'Inter', sans-serif;
   }
 
   .xl\:font-serif {
-    font-family: Georgia, Cambria, "Times New Roman", Times, serif;
+    font-family: 'Inter', sans-serif;
   }
 
   .xl\:font-mono {
-    font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    font-family: 'Inter', sans-serif;
   }
 
   .xl\:font-hairline {
diff --git a/static/js/main.js b/static/js/main.js
index 730d624..593b148 100644
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -76,6 +76,10 @@ document.addEventListener('DOMContentLoaded', function() {
   
   console.log("Initial dark mode state:", isDarkMode);
 
+  // Get logo elements
+  const logoLight = document.getElementById('logo-light');
+  const logoDark = document.getElementById('logo-dark');
+
   // Set initial theme
   if (isDarkMode) {
     document.documentElement.classList.add('dark');
@@ -83,12 +87,22 @@ document.addEventListener('DOMContentLoaded', function() {
       themeToggleLightIcon.classList.remove('hidden');
       themeToggleDarkIcon.classList.add('hidden');
     }
+    // Show dark logo, hide light logo
+    if (logoLight && logoDark) {
+      logoLight.classList.add('hidden');
+      logoDark.classList.remove('hidden');
+    }
   } else {
     document.documentElement.classList.remove('dark');
     if (themeToggleLightIcon && themeToggleDarkIcon) {
       themeToggleLightIcon.classList.add('hidden');
       themeToggleDarkIcon.classList.remove('hidden');
     }
+    // Show light logo, hide dark logo
+    if (logoLight && logoDark) {
+      logoLight.classList.remove('hidden');
+      logoDark.classList.add('hidden');
+    }
   }
 
   // Toggle theme function
@@ -102,6 +116,10 @@ document.addEventListener('DOMContentLoaded', function() {
     const isDark = document.documentElement.classList.contains('dark');
     console.log("Current dark mode:", isDark);
     
+    // Get logo elements
+    const logoLight = document.getElementById('logo-light');
+    const logoDark = document.getElementById('logo-dark');
+    
     if (isDark) {
       document.documentElement.classList.remove('dark');
       localStorage.setItem('color-theme', 'light');
@@ -109,6 +127,11 @@ document.addEventListener('DOMContentLoaded', function() {
         themeToggleLightIcon.classList.add('hidden');
         themeToggleDarkIcon.classList.remove('hidden');
       }
+      // Show light logo, hide dark logo
+      if (logoLight && logoDark) {
+        logoLight.classList.remove('hidden');
+        logoDark.classList.add('hidden');
+      }
       console.log("Switched to light mode");
     } else {
       document.documentElement.classList.add('dark');
@@ -117,6 +140,11 @@ document.addEventListener('DOMContentLoaded', function() {
         themeToggleLightIcon.classList.remove('hidden');
         themeToggleDarkIcon.classList.add('hidden');
       }
+      // Show dark logo, hide light logo
+      if (logoLight && logoDark) {
+        logoLight.classList.add('hidden');
+        logoDark.classList.remove('hidden');
+      }
       console.log("Switched to dark mode");
     }
     
diff --git a/tailwind.config.js b/tailwind.config.js
index c748d80..977128c 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,4 +1,7 @@
 module.exports = {
+  fontFamily: {
+    sans: ['Inter', 'sans-serif'],
+  },
   future: {
     // removeDeprecatedGapUtilities: true,
     // purgeLayersByDefault: true,
diff --git a/templates/base.html b/templates/base.html
index 2d29a6d..160cd2a 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -6,6 +6,8 @@
     <title>{% block title %}Zola with Tailwind CSS{% endblock %}</title>
     <link rel="stylesheet" href="{{ get_url(path='css/main.css') }}">
     <link rel="stylesheet" href="{{ get_url(path='css/dropdown.css') }}">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+
 
     <script src="{{ get_url(path='js/main.js') }}" defer></script>
     {% block head %}{% endblock %}
@@ -15,8 +17,8 @@
         {% include "partials/navigation.html" %}
     </header>
     <main>
-        <div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
-            <div class="px-4 py-6 sm:px-0">
+        <div class="">
+            <div class="px-4 sm:px-0">
                 {% block content %}{% endblock %}
             </div>
         </div>
diff --git a/templates/partials/navigation.html b/templates/partials/navigation.html
index 0ecd87c..5a87b95 100644
--- a/templates/partials/navigation.html
+++ b/templates/partials/navigation.html
@@ -1,9 +1,18 @@
-<nav class="bg-white dark:bg-gray-800 transition-colors duration-200">
+<nav class=" container mx-auto bg-white dark:bg-gray-800 transition-colors duration-200">
   <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
     <div class="flex items-center justify-between h-16">
       <div class="flex items-center">
         <div class="flex-shrink-0">
-          <a href="{{ config.base_url }}" class="text-gray-800 dark:text-white font-bold text-xl">{{ config.title }}</a>
+          <a href="{{ config.base_url }}" class="text-gray-800 dark:text-white font-bold text-xl">
+            <!-- Light mode logo -->
+            <img id="logo-light" src="/images/mycelium_dark.png" 
+              alt="Mycelium logo" 
+              class="w-40 h-full object-cover object-center" />
+            <!-- Dark mode logo -->
+            <img id="logo-dark" src="/images/mycelium_white.png" 
+              alt="Mycelium logo" 
+              class="w-40 h-full object-cover object-center hidden" />
+          </a>
         </div>
         <div class="hidden md:block">
           <div class="ml-10 flex items-baseline space-x-4">
diff --git a/templates/shortcodes/hero_img.html b/templates/shortcodes/hero_img.html
index bf32977..50b58a7 100644
--- a/templates/shortcodes/hero_img.html
+++ b/templates/shortcodes/hero_img.html
@@ -1,4 +1,4 @@
-<div class="flex flex-col lg:flex-row-reverse items-center overflow-hidden bg-white pt-10">
+<div class="flex flex-col lg:flex-row-reverse items-center overflow-hidden bg-white h-screen">
 
   <!-- Image first on mobile, right on desktop -->
   <div class="w-full lg:w-1/2 h-80 lg:h-full">
@@ -8,12 +8,12 @@
   </div>
 
   <!-- Text Content -->
-  <div class="w-full lg:w-1/2 px-6 py-12 lg:px-16 lg:py-32">
-    <div class="max-w-2xl mx-auto">
+  <div class="w-full lg:w-1/2 max-w-3xl max-auto px-6 py-12 lg:px-16 lg:py-10">
+    <div>
       <h1 class="text-4xl font-semibold tracking-tight lg:text-6xl">
         MYCELIUM
       </h1>
-      <h2 class="fade-in text-3xl lg:text-4xl font-normal tracking-tight mt-4">
+      <h2 class="fade-in text-3xl lg:text-4xl font-normal tracking-tight mt-4 leading-9">
         Unleashing the Power of<br> Decentralized Networks
       </h2>
       <p class="mt-8 text-lg lg:text-xl font-light">