diff --git a/fern/assets/styles.css b/fern/assets/styles.css
index 922a2b4a0..1bfa266ae 100644
--- a/fern/assets/styles.css
+++ b/fern/assets/styles.css
@@ -28,15 +28,84 @@
   margin-right: 10px;
 }
 
+@keyframes header-background-fade {
+  0% {
+    background-color: transparent;
+  }
+  100% {
+    background-color: var(--header-background);
+  }
+}
+
 .fern-header, .fern-header-tabs { 
   backdrop-filter: blur(0.5rem);
   background-color: transparent !important;
+  animation: header-background-fade linear;
+  animation-timeline: scroll();
+  animation-range: normal;
 }
 
 :is(.dark) .fern-header, :is(.dark) .fern-header-tabs {
   background-color: transparent !important;
 }
 
+[data-theme=default] .fern-header {
+  animation: header-background-fade linear;
+  animation-timeline: scroll();
+  animation-range: normal;
+}
+
+.fern-header-tabs a[data-state="active"],
+.fern-header-tabs button[data-state="active"],
+.fern-header-tabs [aria-selected="true"] {
+  background: rgba(255, 255, 255, 0.4) !important;
+  backdrop-filter: blur(10px) !important;
+  border-radius: 0.5rem;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
+  transition: all 0.3s ease;
+}
+
+:is(.dark) .fern-header-tabs a[data-state="active"],
+:is(.dark) .fern-header-tabs button[data-state="active"],
+:is(.dark) .fern-header-tabs [aria-selected="true"] {
+  background: rgba(255, 255, 255, 0.1) !important;
+  backdrop-filter: blur(10px) !important;
+}
+
+.fern-navbar-link[data-state="active"],
+.fern-navbar-link.active,
+button.fern-navbar-link[aria-current="page"] {
+  background: rgba(255, 255, 255, 0.4) !important;
+  backdrop-filter: blur(10px) !important;
+  border-radius: 0.5rem;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
+  transition: all 0.3s ease;
+}
+
+:is(.dark) .fern-navbar-link[data-state="active"],
+:is(.dark) .fern-navbar-link.active,
+:is(.dark) button.fern-navbar-link[aria-current="page"] {
+  background: rgba(255, 255, 255, 0.1) !important;
+  backdrop-filter: blur(10px) !important;
+}
+
+.fern-sidebar-link[data-state="active"],
+.fern-sidebar-link[aria-current="page"],
+a.fern-sidebar-link.active {
+  background: rgba(255, 255, 255, 0.4) !important;
+  backdrop-filter: blur(10px) !important;
+  border-radius: 0.5rem;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
+  transition: all 0.3s ease;
+}
+
+:is(.dark) .fern-sidebar-link[data-state="active"],
+:is(.dark) .fern-sidebar-link[aria-current="page"],
+:is(.dark) a.fern-sidebar-link.active {
+  background: rgba(255, 255, 255, 0.1) !important;
+  backdrop-filter: blur(10px) !important;
+}
+
 .fern-button-text {
   font-weight: 500 !important;
 }
diff --git a/fern/docs.yml b/fern/docs.yml
index 144068b32..6f4290908 100644
--- a/fern/docs.yml
+++ b/fern/docs.yml
@@ -124,13 +124,13 @@ colors:
     light: "#008700"
   background:
     dark: "#111113"
-    light: "#FFFFFF"
+    light: "#E8F4F8"
   border: 
     dark: "#393A40"
     light: "#E0E1E6"
   header-background:
     dark: "#111113"
-    light: "#FFFFFF"
+    light: "rgba(232, 244, 248, 0.8)"
   card-background:
     dark: "#222325"
     light: "#FFFFFF"