diff --git a/docs/_static/js/header_border.js b/docs/_static/js/header_border.js
index 4ac72337a..a053af2f3 100644
--- a/docs/_static/js/header_border.js
+++ b/docs/_static/js/header_border.js
@@ -1,6 +1,6 @@
 const header_div = document.querySelector(".md-header");
 const navbar_div = document.querySelector(".md-tabs");
-const border_css = "2px solid #bd8526";
+const border_css = "2px solid #14151a";
 
 // Add smooth transition to borders
 if (header_div) {
diff --git a/docs/extra/ragas-modern.css b/docs/extra/ragas-modern.css
index 6fe1f90a3..4d33901bb 100644
--- a/docs/extra/ragas-modern.css
+++ b/docs/extra/ragas-modern.css
@@ -9,6 +9,7 @@
   --md-primary-fg-color--light: #d19a3d;
   --md-primary-fg-color--dark: #a0711e;
   --md-accent-fg-color: #bd8526;
+  --md-default-bg-color: #ffffff;
 }
 
 [data-md-color-scheme="slate"] {
@@ -19,23 +20,33 @@
   --md-default-bg-color: #171717;
 }
 
+/* Header background color for both light and dark modes */
+.md-header {
+  background-color: #14151a !important;
+}
+
+/* Tab navigation background color */
+.md-tabs {
+  background-color: #14151a !important;
+}
+
 /* Only minimal, essential customizations - let Material Design handle the rest */
 
-/* Reduce navigation font size only */
+/* Navigation font size */
 .md-nav {
-  font-size: 0.8rem;
+  font-size: 0.9rem;
 }
 
 .md-nav__link {
-  font-size: 0.8rem;
+  font-size: 0.9rem;
 }
 
 .md-nav__title {
-  font-size: 0.8rem;
+  font-size: 0.9rem;
 }
 
 .md-tabs__link {
-  font-size: 0.8rem;
+  font-size: 0.9rem;
 }
 
 /* Clean repository info*/
@@ -50,6 +61,20 @@
 /* Ensure proper font family application */
 body {
   font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-size: 1.1rem; /* Increased from default */
+}
+
+/* Material Design typography overrides for main content */
+.md-typeset {
+  font-size: 1.01rem !important;
+}
+
+.md-typeset p {
+  font-size: 1.01rem !important;
+}
+
+.md-typeset li {
+  font-size: 1.01rem !important;
 }
 
 code, kbd, samp, pre {