diff --git a/public/css/styles.css b/public/css/styles.css
index 653c4e8..ffe868f 100644
--- a/public/css/styles.css
+++ b/public/css/styles.css
@@ -12,6 +12,23 @@
   margin: 0 auto;
   padding: 1rem 1.5rem;
 }
+.pattern-dots {
+  position: relative;
+  background-image: radial-gradient(circle, rgba(0,0,0,0.07) 1px, transparent 1px);
+  background-size: 15px 15px;
+  z-index: 0;
+}
+.pattern-dots::after {
+  content: "";
+  pointer-events: none;
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 90%);
+}
+.pattern-dots > * {
+  position: relative;
+  z-index: 1;
+}
 footer {
   background-color: #34495e;
   color: #ecf0f1;
@@ -98,6 +115,7 @@
   background-color: #2c3e50;
   color: #ecf0f1;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+  position:relative;
 }
 /* header#site-header .container {
   display: flex;
@@ -116,13 +134,6 @@
   gap: 0.5rem;
   position: relative;
 }
-/* header#site-header .logo {
-  display: flex;
-  align-items: center;
-  font-size: 1.8rem;
-  font-weight: bolder;
-  position: relative;
-} */
 /* Logo section - positioned above nav */
 header#site-header .logo {
   display: flex;
@@ -133,19 +144,9 @@
   text-decoration: none;
   color: inherit;
   gap: 1rem;
-    margin-left: 10px;
+  margin-left: 10px;
   padding-left: 64px; /* Space for the icon */
 }
-/* .site-title {
-  margin: 0 1rem;
-  white-space: nowrap;
-  flex-shrink: 0;
-  color: inherit;
-  text-decoration: none;
-  font-weight: bolder;
-  font-size: 
-  1.8rem;
-} */
 header#site-header .site-title {
   color: inherit;
   text-decoration: none;
@@ -173,17 +174,6 @@
 header#site-header .site-title a:hover::after {
   transform: scaleX(1);
 }
-/* Logo icon that acts as home link - spans from site title to nav */
-.nav-logo {
-  text-decoration: none;
-  color: inherit;
-  display: flex;
-  align-items: flex-end;
-  position: absolute;
-  left: 1rem;
-  top: 1rem;
-  bottom: 1rem;
-}
 /* Favicon styles */
 #favicon-preview {
   width: 64px;
@@ -207,7 +197,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  font-size: 24px;
+  font-size: 36px;
   user-select: none;
 }
 /* Deep Dive Lambda */
@@ -235,18 +225,31 @@
   color: #E0FFFF;
   font-weight: 600;
 }
-div.concept {
-  display: none;
+/* Pattern 3: Lambda Watermarks */
+.pattern-lambda {
+  background-image: 
+    repeating-linear-gradient(
+      45deg,
+      transparent,
+      transparent 50px,
+      rgba(236, 240, 241, 0.08) 50px,
+      rgba(236, 240, 241, 0.08) 52px
+    );
+  position: relative;
 }
-div.concept#favicon1 {
-  display: inline-block;
-}
-.layout {
-  display: flex;
-  max-width: 1200px;
-  margin: 2rem auto;
-  padding: 0 1.5rem;
-  gap: 2rem;
+.pattern-lambda::before {
+  content: '</> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </>';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  font-size: 2rem;
+  color: rgba(236, 240, 241, 0.05);
+  letter-spacing: 2rem;
+  line-height: 3rem;
+  overflow: hidden;
+  pointer-events: none;
 }
 /* Main content */
 main.container {
@@ -281,6 +284,14 @@
 header#site-header nav.site-nav {
   display: flex;
   gap: 1rem;
+  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 {
@@ -325,7 +336,6 @@
   position: absolute;
   background-color: white;
   min-width: 160px;
-  z-index: 1;
   box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
 }
 nav.site-nav .dropdown-content a {
diff --git a/src/css/base.css b/src/css/base.css
index c892667..8b25fe3 100644
--- a/src/css/base.css
+++ b/src/css/base.css
@@ -14,3 +14,22 @@
   padding: 1rem 1.5rem;
 }
 
+.pattern-dots {
+  position: relative;
+  background-image: radial-gradient(circle, rgba(0,0,0,0.07) 1px, transparent 1px);
+  background-size: 15px 15px;
+  z-index: 0;
+}
+
+.pattern-dots::after {
+  content: "";
+  pointer-events: none;
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 90%);
+}
+
+.pattern-dots > * {
+  position: relative;
+  z-index: 1;
+}
diff --git a/src/css/favicon.css b/src/css/favicon.css
new file mode 100644
index 0000000..2bbe34a
--- /dev/null
+++ b/src/css/favicon.css
@@ -0,0 +1,37 @@
+#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 {
+  background-color: #0A192F;
+  border-radius: 8px;
+  color: #00CED1;
+  font-weight: 700;
+  box-shadow:
+    0 0 4px #00CED1,
+    0 0 12px #00CED1;
+}
diff --git a/src/css/header.css b/src/css/header.css
index b0cd3b6..3f5c233 100644
--- a/src/css/header.css
+++ b/src/css/header.css
@@ -3,6 +3,7 @@
   background-color: #2c3e50;
   color: #ecf0f1;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+  position:relative;
 }
 
 /* header#site-header .container {
@@ -23,13 +24,6 @@
   position: relative;
 }
 
-/* header#site-header .logo {
-  display: flex;
-  align-items: center;
-  font-size: 1.8rem;
-  font-weight: bolder;
-  position: relative;
-} */
 /* Logo section - positioned above nav */
 header#site-header .logo {
   display: flex;
@@ -44,17 +38,6 @@
   padding-left: 64px; /* Space for the icon */
 }
 
-
-/* .site-title {
-  margin: 0 1rem;
-  white-space: nowrap;
-  flex-shrink: 0;
-  color: inherit;
-  text-decoration: none;
-  font-weight: bolder;
-  font-size: 
-  1.8rem;
-} */
 header#site-header .site-title {
   color: inherit;
   text-decoration: none;
@@ -87,68 +70,30 @@
 }
 
 
-
-/* Favicon styles */
-#favicon-preview {
-  width: 64px;
-  height: 64px;
-  border-radius: 4px;
-  background-color: #333;
-  display: inline-block;
-  vertical-align: middle;
+/* Pattern 3: Lambda Watermarks */
+.pattern-lambda {
+  background-image: 
+    repeating-linear-gradient(
+      45deg,
+      transparent,
+      transparent 50px,
+      rgba(236, 240, 241, 0.08) 50px,
+      rgba(236, 240, 241, 0.08) 52px
+    );
+  position: relative;
 }
 
-.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: 24px;
-  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;
-}
-
-div.concept {
-  display: none;
-}
-
-div.concept#favicon1 {
-  display: inline-block;
+.pattern-lambda::before {
+  content: '</> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </>';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  font-size: 2rem;
+  color: rgba(236, 240, 241, 0.05);
+  letter-spacing: 2rem;
+  line-height: 3rem;
+  overflow: hidden;
+  pointer-events: none;
 }
diff --git a/src/css/layout.css b/src/css/layout.css
deleted file mode 100644
index c8794ec..0000000
--- a/src/css/layout.css
+++ /dev/null
@@ -1,7 +0,0 @@
-.layout {
-  display: flex;
-  max-width: 1200px;
-  margin: 2rem auto;
-  padding: 0 1.5rem;
-  gap: 2rem;
-}
diff --git a/src/css/nav.css b/src/css/nav.css
index 1e2c034..3c1fea8 100644
--- a/src/css/nav.css
+++ b/src/css/nav.css
@@ -1,8 +1,15 @@
 header#site-header nav.site-nav {
   display: flex;
   gap: 1rem;
+  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;
@@ -52,7 +59,6 @@
   position: absolute;
   background-color: white;
   min-width: 160px;
-  z-index: 1;
   box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
 }
 
diff --git a/src/css/styles.css b/src/css/styles.css
index 190f3cb..776da9b 100644
--- a/src/css/styles.css
+++ b/src/css/styles.css
@@ -1,7 +1,6 @@
 @import url('base.css');
 @import url('footer.css');
 @import url('header.css');
-@import url('layout.css');
 @import url('main.css');
 @import url('nav.css');
 @import url('reset.css');
diff --git a/src/views/layouts/main.handlebars b/src/views/layouts/main.handlebars
index 0f3d434..0e05e0a 100644
--- a/src/views/layouts/main.handlebars
+++ b/src/views/layouts/main.handlebars
@@ -13,7 +13,7 @@
   <title>{{title}}</title>
 </head>
 
-<body>
+<body class="pattern-dots">
   {{> headers}}
   <div class="layout">
     {{#if showSidebar}}
diff --git a/src/views/partials/favicon.handlebars b/src/views/partials/favicon.handlebars
index f6ded27..c875186 100644
--- a/src/views/partials/favicon.handlebars
+++ b/src/views/partials/favicon.handlebars
@@ -1,93 +1,17 @@
-<style>
-    #favicon-preview {
-        width: 24px;
-        height: 24px;
-        border-radius: 4px;
-        background-color: #333;
-        display: inline-block;
-        vertical-align: middle;
-        margin-left: 8px;
-    }
-
-    .concept {
-        width: 64px;
-        height: 64px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        flex-direction: column;
-        /*gap: 16px;*/
-    }
-
-    .icon {
-        width: 64px;
-        height: 64px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        font-size: 48px;
-        user-select: none;
-    }
-
-    /* 1. 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;
-    }
-
-    /* 2. Ghost Lambda */
-    .ghost {
-        background-color: #F0F8FFCC;
-        /* semi-transparent AliceBlue */
-        border-radius: 8px;
-        color: #008B8B;
-        font-weight: 800;
-        text-shadow:
-            0 0 1px rgba(0, 0, 0, 0.2);
-    }
-
-    /* 3. Circle of Logic */
-    .circle {
-        background-color: #1E90FF;
-        border-radius: 50%;
-        color: #E0FFFF;
-        font-weight: 600;
-    }
-
-    .label {
-        font-size: 0.875rem;
-        text-align: center;
-        max-width: 128px;
-        line-height: 1.2;
-        user-select: none;
-    }
-
-    div.concept {
-        display: none;
-    }
-
-    div.concept#favicon1 {
-        display: inline-block;
-    }
-</style>
 <section id="favicon-preview">
-    <div class="concept" id="favicon1">
+    <div class="concept" id="favicon">
         <div class="icon deep-dive">λ</div>
-        <!-- div class="label">Deep Dive Lambda<br><small>Dark navy background, glowing cyan λ</small></div -->
-    </div>
-
-    <div class="concept" id="favicon2">
-        <div class="icon ghost">λ</div>
-        <!-- div class="label">Ghost Lambda<br><small>Light transparent background, solid cyan λ</small></div -->
-    </div>
-
-    <div class="concept" id="favicon3">
-        <div class="icon circle">λ</div>
-        <!-- div class="label">Circle of Logic<br><small>Blue circle, white/light cyan λ</small></div -->
     </div>
 </section>
+<div class="icon deep-dive-enhanced">
+    <div class="particles">
+        <div class="particle"></div>
+        <div class="particle"></div>
+        <div class="particle"></div>
+    </div>
+    <div class="corner-accent top-left"></div>
+    <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>
+</div>
diff --git a/src/views/partials/headers.handlebars b/src/views/partials/headers.handlebars
index 3936273..86b0eeb 100644
--- a/src/views/partials/headers.handlebars
+++ b/src/views/partials/headers.handlebars
@@ -1,7 +1,10 @@
-<header id="site-header" class=" pattern-lambda">
+<header id="site-header" class="pattern-lambda">
   <div class="container ">
     <div class="nav-logo">
-      {{> favicon}}
+
+      <a href="{{baseUrl}}">
+        {{> favicon}}
+      </a>
     </div>
 
     <a href="{{baseUrl}}" class="logo">