diff --git a/public/css/styles.css b/public/css/styles.css
index ffe868f..d57e4fe 100644
--- a/public/css/styles.css
+++ b/public/css/styles.css
@@ -116,6 +116,7 @@
   color: #ecf0f1;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
   position:relative;
+  z-index: 10;
 }
 /* header#site-header .container {
   display: flex;
@@ -174,58 +175,6 @@
 header#site-header .site-title a:hover::after {
   transform: scaleX(1);
 }
-/* Favicon styles */
-#favicon-preview {
-  width: 64px;
-  height: 64px;
-  border-radius: 4px;
-  background-color: #333;
-  display: inline-block;
-  vertical-align: middle;
-}
-.concept {
-  width: 64px;
-  height: 64px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-}
-.icon {
-  width: 64px;
-  height: 64px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 36px;
-  user-select: none;
-}
-/* Deep Dive Lambda */
-.deep-dive {
-  background-color: #0A192F;
-  border-radius: 8px;
-  color: #00CED1;
-  font-weight: 700;
-  box-shadow:
-    0 0 4px #00CED1,
-    0 0 12px #00CED1;
-}
-/* Ghost Lambda */
-.ghost {
-  background-color: #F0F8FFCC;
-  border-radius: 8px;
-  color: #008B8B;
-  font-weight: 800;
-  text-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
-}
-/* Circle of Logic */
-.circle {
-  background-color: #1E90FF;
-  border-radius: 50%;
-  color: #E0FFFF;
-  font-weight: 600;
-}
-/* Pattern 3: Lambda Watermarks */
 .pattern-lambda {
   background-image: 
     repeating-linear-gradient(
@@ -287,12 +236,6 @@
   position: relative;
   z-index: 10;
 }
-nav.site-nav .dropdown {
-  position: relative;
-}
-nav.site-nav .dropdown-content {
-  position: absolute;
-}
 header#site-header nav.site-nav a,
 nav.site-nav .dropdown-content form button {
   text-decoration: none;
@@ -326,12 +269,14 @@
 nav.site-nav .dropdown {
   position: relative;
   display: block;
+  z-index: 11;
 }
 nav.site-nav .dropbtn {
   display: inline-block;
   cursor: pointer;
 }
 nav.site-nav .dropdown-content {
+  z-index: 11;
   display: none;
   position: absolute;
   background-color: white;
@@ -699,3 +644,157 @@
     position: static;
   }
 }
+.icon {
+  width: 64px;
+  height: 64px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 36px;
+  user-select: none;
+}
+.deep-dive-enhanced {
+    background: linear-gradient(135deg, #0A192F 0%, #1a2744 30%, #0f1b36 70%, #0A192F 100%);
+    border-radius: 8px;
+    color: #00CED1;
+    font-weight: 700;
+    position: relative;
+    overflow: hidden;
+    box-shadow:
+        0 0 8px rgba(0, 206, 209, 0.4),
+        0 0 20px rgba(0, 206, 209, 0.15),
+        inset 0 1px 0 rgba(255, 255, 255, 0.1),
+        inset 0 0 20px rgba(0, 206, 209, 0.05);
+    transition: all 0.3s ease;
+    border: 1px solid rgba(0, 206, 209, 0.2);
+}
+.deep-dive-enhanced:hover {
+    transform: translateY(-1px);
+    box-shadow:
+        0 0 12px rgba(0, 206, 209, 0.6),
+        0 0 30px rgba(0, 206, 209, 0.25),
+        0 2px 8px rgba(0, 0, 0, 0.3),
+        inset 0 1px 0 rgba(255, 255, 255, 0.15),
+        inset 0 0 25px rgba(0, 206, 209, 0.08);
+    border-color: rgba(0, 206, 209, 0.4);
+}
+.deep-dive-enhanced::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(45deg, transparent, rgba(236, 240, 241, 0.08), transparent);
+    animation: shimmer 4s;
+}
+.deep-dive-enhanced::after {
+    content: '';
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    right: 2px;
+    bottom: 2px;
+    background: linear-gradient(135deg, rgba(0, 206, 209, 0.03) 0%, transparent 50%, rgba(0, 206, 209, 0.03) 100%);
+    border-radius: 6px;
+    pointer-events: none;
+}
+.icon-text {
+    position: relative;
+    z-index: 2;
+    text-shadow: 0 0 8px rgba(0, 206, 209, 0.5);
+    animation: pulse 4s ease-in-out infinite;
+}
+@keyframes shimmer {
+    0% {
+        left: -100%;
+    }
+    100% {
+        left: 100%;
+    }
+}
+@keyframes pulse {
+    0%, 100% {
+        text-shadow: 0 0 8px rgba(0, 206, 209, 0.5);
+    }
+    50% {
+        text-shadow: 0 0 12px rgba(0, 206, 209, 0.8), 0 0 20px rgba(0, 206, 209, 0.3);
+    }
+}
+/* Floating particles effect */
+.particles {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    overflow: hidden;
+    border-radius: 12px;
+}
+.particle {
+    position: absolute;
+    width: 2px;
+    height: 2px;
+    background: #00CED1;
+    border-radius: 50%;
+    opacity: 0.6;
+    animation: float 6s linear infinite;
+}
+.particle:nth-child(1) {
+    left: 20%;
+    animation-delay: -1s;
+    animation-duration: 5s;
+}
+.particle:nth-child(2) {
+    left: 50%;
+    animation-delay: -2s;
+    animation-duration: 7s;
+}
+.particle:nth-child(3) {
+    left: 80%;
+    animation-delay: -3s;
+    animation-duration: 6s;
+}
+@keyframes float {
+    0% {
+        transform: translateY(70px) scale(0);
+        opacity: 0;
+    }
+    10% {
+        opacity: 0.6;
+    }
+    90% {
+        opacity: 0.6;
+    }
+    100% {
+        transform: translateY(-10px) scale(1);
+        opacity: 0;
+    }
+}
+/* Corner accents */
+.corner-accent {
+    position: absolute;
+    width: 6px;
+    height: 1px;
+    background: rgba(236, 240, 241, 0.3);
+    opacity: 0.8;
+}
+.corner-accent.top-left {
+    top: 4px;
+    left: 4px;
+    transform: rotate(45deg);
+}
+.corner-accent.bottom-right {
+    bottom: 4px;
+    right: 4px;
+    transform: rotate(45deg);
+}
+.corner-accent.top-right {
+    top: 4px;
+    right: 4px;
+    transform: rotate(-45deg);
+}
+.corner-accent.bottom-left {
+    bottom: 4px;
+    left: 4px;
+    transform: rotate(-45deg);
+}
diff --git a/src/css/favicon.css b/src/css/favicon.css
index 2bbe34a..6c988a5 100644
--- a/src/css/favicon.css
+++ b/src/css/favicon.css
@@ -1,21 +1,3 @@
-#favicon-preview {
-  width: 64px;
-  height: 64px;
-  border-radius: 4px;
-  background-color: #333;
-  display: inline-block;
-  vertical-align: middle;
-}
-
-.concept {
-  width: 64px;
-  height: 64px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-}
-
 .icon {
   width: 64px;
   height: 64px;
@@ -26,12 +8,165 @@
   user-select: none;
 }
 
-.deep-dive {
-  background-color: #0A192F;
-  border-radius: 8px;
-  color: #00CED1;
-  font-weight: 700;
-  box-shadow:
-    0 0 4px #00CED1,
-    0 0 12px #00CED1;
+.deep-dive-enhanced {
+    background: linear-gradient(135deg, #0A192F 0%, #1a2744 30%, #0f1b36 70%, #0A192F 100%);
+    border-radius: 8px;
+    color: #00CED1;
+    font-weight: 700;
+    position: relative;
+    overflow: hidden;
+    box-shadow:
+        0 0 8px rgba(0, 206, 209, 0.4),
+        0 0 20px rgba(0, 206, 209, 0.15),
+        inset 0 1px 0 rgba(255, 255, 255, 0.1),
+        inset 0 0 20px rgba(0, 206, 209, 0.05);
+    transition: all 0.3s ease;
+    border: 1px solid rgba(0, 206, 209, 0.2);
+}
+
+.deep-dive-enhanced:hover {
+    transform: translateY(-1px);
+    box-shadow:
+        0 0 12px rgba(0, 206, 209, 0.6),
+        0 0 30px rgba(0, 206, 209, 0.25),
+        0 2px 8px rgba(0, 0, 0, 0.3),
+        inset 0 1px 0 rgba(255, 255, 255, 0.15),
+        inset 0 0 25px rgba(0, 206, 209, 0.08);
+    border-color: rgba(0, 206, 209, 0.4);
+}
+
+.deep-dive-enhanced::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(45deg, transparent, rgba(236, 240, 241, 0.08), transparent);
+    animation: shimmer 4s;
+}
+
+.deep-dive-enhanced::after {
+    content: '';
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    right: 2px;
+    bottom: 2px;
+    background: linear-gradient(135deg, rgba(0, 206, 209, 0.03) 0%, transparent 50%, rgba(0, 206, 209, 0.03) 100%);
+    border-radius: 6px;
+    pointer-events: none;
+}
+
+.icon-text {
+    position: relative;
+    z-index: 2;
+    text-shadow: 0 0 8px rgba(0, 206, 209, 0.5);
+    animation: pulse 4s ease-in-out infinite;
+}
+
+@keyframes shimmer {
+    0% {
+        left: -100%;
+    }
+    100% {
+        left: 100%;
+    }
+}
+
+@keyframes pulse {
+    0%, 100% {
+        text-shadow: 0 0 8px rgba(0, 206, 209, 0.5);
+    }
+    50% {
+        text-shadow: 0 0 12px rgba(0, 206, 209, 0.8), 0 0 20px rgba(0, 206, 209, 0.3);
+    }
+}
+
+/* Floating particles effect */
+.particles {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    overflow: hidden;
+    border-radius: 12px;
+}
+
+.particle {
+    position: absolute;
+    width: 2px;
+    height: 2px;
+    background: #00CED1;
+    border-radius: 50%;
+    opacity: 0.6;
+    animation: float 6s linear infinite;
+}
+
+.particle:nth-child(1) {
+    left: 20%;
+    animation-delay: -1s;
+    animation-duration: 5s;
+}
+
+.particle:nth-child(2) {
+    left: 50%;
+    animation-delay: -2s;
+    animation-duration: 7s;
+}
+
+.particle:nth-child(3) {
+    left: 80%;
+    animation-delay: -3s;
+    animation-duration: 6s;
+}
+
+@keyframes float {
+    0% {
+        transform: translateY(70px) scale(0);
+        opacity: 0;
+    }
+    10% {
+        opacity: 0.6;
+    }
+    90% {
+        opacity: 0.6;
+    }
+    100% {
+        transform: translateY(-10px) scale(1);
+        opacity: 0;
+    }
+}
+
+/* Corner accents */
+.corner-accent {
+    position: absolute;
+    width: 6px;
+    height: 1px;
+    background: rgba(236, 240, 241, 0.3);
+    opacity: 0.8;
+}
+
+.corner-accent.top-left {
+    top: 4px;
+    left: 4px;
+    transform: rotate(45deg);
+}
+
+.corner-accent.bottom-right {
+    bottom: 4px;
+    right: 4px;
+    transform: rotate(45deg);
+}
+
+.corner-accent.top-right {
+    top: 4px;
+    right: 4px;
+    transform: rotate(-45deg);
+}
+
+.corner-accent.bottom-left {
+    bottom: 4px;
+    left: 4px;
+    transform: rotate(-45deg);
 }
diff --git a/src/css/header.css b/src/css/header.css
index 3f5c233..a6ec8b0 100644
--- a/src/css/header.css
+++ b/src/css/header.css
@@ -4,6 +4,7 @@
   color: #ecf0f1;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
   position:relative;
+  z-index: 10;
 }
 
 /* header#site-header .container {
@@ -69,8 +70,6 @@
   transform: scaleX(1);
 }
 
-
-/* Pattern 3: Lambda Watermarks */
 .pattern-lambda {
   background-image: 
     repeating-linear-gradient(
diff --git a/src/css/nav.css b/src/css/nav.css
index 3c1fea8..86ebc26 100644
--- a/src/css/nav.css
+++ b/src/css/nav.css
@@ -4,12 +4,6 @@
   position: relative;
   z-index: 10;
 }
-nav.site-nav .dropdown {
-  position: relative;
-}
-nav.site-nav .dropdown-content {
-  position: absolute;
-}
 header#site-header nav.site-nav a,
 nav.site-nav .dropdown-content form button {
   text-decoration: none;
@@ -47,6 +41,7 @@
 nav.site-nav .dropdown {
   position: relative;
   display: block;
+  z-index: 11;
 }
 
 nav.site-nav .dropbtn {
@@ -55,6 +50,7 @@
 }
 
 nav.site-nav .dropdown-content {
+  z-index: 11;
   display: none;
   position: absolute;
   background-color: white;
diff --git a/src/css/styles.css b/src/css/styles.css
index 776da9b..863852d 100644
--- a/src/css/styles.css
+++ b/src/css/styles.css
@@ -7,3 +7,4 @@
 @import url('sidebar.css');
 @import url('toc.css');
 @import url('responsive.css');
+@import url('favicon.css');
diff --git a/src/views/partials/favicon.handlebars b/src/views/partials/favicon.handlebars
index c875186..06998b5 100644
--- a/src/views/partials/favicon.handlebars
+++ b/src/views/partials/favicon.handlebars
@@ -1,8 +1,3 @@
-<section id="favicon-preview">
-    <div class="concept" id="favicon">
-        <div class="icon deep-dive">λ</div>
-    </div>
-</section>
 <div class="icon deep-dive-enhanced">
     <div class="particles">
         <div class="particle"></div>
@@ -13,5 +8,5 @@
     <div class="corner-accent top-right"></div>
     <div class="corner-accent bottom-left"></div>
     <div class="corner-accent bottom-right"></div>
-    <span class="icon-text">D</span>
+    <span class="icon-text">λ</span>
 </div>
diff --git a/src/views/partials/headers.handlebars b/src/views/partials/headers.handlebars
index 86b0eeb..defba3f 100644
--- a/src/views/partials/headers.handlebars
+++ b/src/views/partials/headers.handlebars
@@ -2,7 +2,7 @@
   <div class="container ">
     <div class="nav-logo">
 
-      <a href="{{baseUrl}}">
+      <a href="{{baseUrl}}" class="favicon">
         {{> favicon}}
       </a>
     </div>