diff --git a/content/css/app.css b/content/css/app.css
index 67250d66..e2bc3cee 100644
--- a/content/css/app.css
+++ b/content/css/app.css
@@ -1,27 +1,119 @@
+@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
+
+:root {
+    --bg-primary: #ffffff;
+    --text-primary: #31373d;
+    --text-secondary: #6c757d;
+    --navbar-bg: #343a40;
+    --table-bg: #fafafa;
+    --table-header-bg: #eee;
+    --rule-color: #eee;
+    --bs-code-color: #d66133;
+}
+
+html {
+    scroll-padding-top: 60px;
+}
+
+.navbar-content {
+    max-width: 1000px;
+}
+
 .main-content {
-    max-width: 900px;
+    max-width: 700px;
 }
 
 .toc-container {
-    max-width: 400px;
+    max-width: 300px;
 }
 
 .toc {
     position: sticky;
-    top: 20px;
+    top: 80px;
     overflow-y: auto;
-    padding: 10px;
-    max-height: calc(100vh - 20px);
-    border-color: #eee;
-    border-radius: 10px;
-    border-width: 1px;
-    border-style: solid;
+    max-height: calc(100vh - 80px);
+}
+
+.toc a {
+    text-decoration: none;
+    color: inherit;
+    font-size: 11pt;
+    font-weight: 400;
+    opacity: 50%;
+    line-height: 1.2;
+}
+
+.toc a:hover,
+.toc a.active {
+    opacity: 100%;
 }
 
 .toctitle {
     font-weight: bold;
 }
 
-.toc ul li {
-  margin-bottom: 5px;
+.toc ul {
+    padding-left: 20px;
+}
+
+body {
+    font-family: "Roboto", sans-serif;
+}
+
+h1 {
+    font-weight: 900;
+}
+
+h2, h3, h4 {
+    font-weight: 800;
+}
+
+h2 {
+    border-top: 1px solid var(--rule-color);
+    padding-top: 30px;
+    margin-bottom: 20px;
+    margin-top: 30px;
+}
+
+h3 {
+    margin-top: 30px;
+    margin-bottom: 20px;
+}
+
+code {
+    font-family: "JetBrains Mono", monospace;
+}
+
+a {
+    color: inherit;
+}
+
+table {
+    background-color: var(--table-bg);
+}
+
+table th {
+    background-color: var(--table-header-bg);
+}
+
+.table {
+    --bs-table-bg: var(--table-bg);
+    --bs-table-color: var(--text-primary);
+}
+
+.table th {
+    --bs-table-bg: var(--table-header-bg);
+}
+
+.hljs-deletion,
+.hljs-number,
+.hljs-quote,
+.hljs-selector-class,
+.hljs-selector-id,
+.hljs-string,
+.hljs-template-tag,
+.hljs-type,
+.hljs-section,
+.hljs-title {
+    color: var(--bs-code-color);
 }
diff --git a/content/css/blog_index.css b/content/css/blog_index.css
index 546a4e52..af1190c2 100644
--- a/content/css/blog_index.css
+++ b/content/css/blog_index.css
@@ -1,20 +1,20 @@
-/*
-These adjustments override bootstrap.min.css to give smaller headers in the blog index page.
-Otherwise the headers appear too large.
-*/
+/* Applied to the blog index page */
 
-h1 {
-    font-size: calc(1.3rem + .6vw); /* Article title */
+.post {
+    margin-bottom: 20px;
+    padding: 20px 20px;
+    border: 1px solid var(--rule-color);
+    border-radius: 10px;
 }
 
-h2 {
-    font-size: calc(1.275rem + .3vw); /* Main headers within article */
+.title h1 {
+    font-size: 1.5em;
 }
 
-h3 {
-    font-size: calc(1.25rem);
+h1 {
+    font-size: 2em;
 }
 
-h4 {
-    font-size: calc(1rem);
+.actions, .stats {
+    margin-bottom: 0;
 }
diff --git a/content/css/dark-mode.css b/content/css/dark-mode.css
index 95b21569..a83de55d 100644
--- a/content/css/dark-mode.css
+++ b/content/css/dark-mode.css
@@ -1,18 +1,14 @@
 /* Dark Mode Styles */
-:root {
-    --bg-primary: #ffffff;
-    --text-primary: #212529;
-    --text-secondary: #6c757d;
-    --navbar-bg: #343a40;
-    --code-bg: #f8f9fa;
-}
-
 [data-theme="dark"] {
-    --bg-primary: #0d1117;
-    --text-primary: #e6edf3;
+    --bg-primary: #191d24;
+    --text-primary: #d2d7dd;
     --text-secondary: #8b949e;
     --navbar-bg: #0d1117;
-    --code-bg: #161b22;
+    --code-bg: #222933;
+    --table-bg: #161b22;
+    --table-header-bg: #21262d;
+    --table-border-color: #34383e;
+    --rule-color: #252c34;
 }
 
 body {
@@ -25,14 +21,6 @@ body {
     color: var(--text-primary) !important;
 }
 
-[data-theme="dark"] a {
-    color: #58a6ff !important;
-}
-
-[data-theme="dark"] a:hover {
-    color: #79c0ff !important;
-}
-
 [data-theme="dark"] .navbar-dark {
     background-color: var(--navbar-bg) !important;
 }
@@ -42,6 +30,20 @@ body {
     border-radius: 6px;
 }
 
+[data-theme="dark"] tr,
+[data-theme="dark"] th,
+[data-theme="dark"] td {
+    border-color: var(--table-border-color);
+}
+
+[data-theme="dark"] .table {
+    --bs-table-color: var(--text-primary);
+    --bs-table-striped-color: var(--text-primary);
+    --bs-table-striped-bg: rgba(255, 255, 255, 0.03);
+    --bs-table-hover-color: var(--text-primary);
+    --bs-table-hover-bg: rgba(255, 255, 255, 0.05);
+}
+
 .dark-mode-toggle {
     background: none;
     border: none;
diff --git a/content/js/toc-highlight.js b/content/js/toc-highlight.js
new file mode 100644
index 00000000..7fd116ce
--- /dev/null
+++ b/content/js/toc-highlight.js
@@ -0,0 +1,18 @@
+/* Highlights the current section in the table of contents */
+
+const tocLinks = document.querySelectorAll(".toc a");
+
+function highlightToc() {
+  let current;
+  for (const link of tocLinks) {
+    const heading = document.getElementById(link.hash.slice(1));
+    if (heading && heading.getBoundingClientRect().top <= 70)
+      current = link.hash;
+  }
+  tocLinks.forEach((link) =>
+    link.classList.toggle("active", link.hash === current),
+  );
+}
+
+window.addEventListener("scroll", highlightToc, { passive: true });
+highlightToc();
diff --git a/content/theme/templates/blogindex.html b/content/theme/templates/blogindex.html
index b5f1fc3f..d779d8e4 100644
--- a/content/theme/templates/blogindex.html
+++ b/content/theme/templates/blogindex.html
@@ -2,7 +2,7 @@
     <div class="bg-white p-4 p-md-5 rounded">
         <div class="col-md-10 col-lg-8 mx-auto main-content">
 
-            <h3>Welcome to the Apache DataFusion Blog!</h3>
+            <h1>Welcome to the Apache DataFusion Blog!</h1>
             <p><i>Here you can find the latest updates from DataFusion and related projects.</i></p>
 
 
@@ -14,18 +14,20 @@ <h3>Welcome to the Apache DataFusion Blog!</h3>
                 <header>
                     <div class="title">
                         <h1><a href="/blog/{{ article.date.strftime('%Y/%m/%d') }}/{{ article.metadata.filename }}">{{ article.title }}</a></h1>
-                        <p>Posted on: {{ article.locale_date }} by {{ article.author }}</p>
-                        <p>{{ article.summary }}</p>
-                        <footer>
-                            <ul class="actions">
-                                <div style="text-align: right"><a href="/blog/{{ article.date.strftime('%Y/%m/%d') }}/{{ article.metadata.filename }}" class="button medium">Continue Reading</a></div>
-                            </ul>
-                            <ul class="stats">
-                                {% for tag in article.tags %}
-                                    <li><a href="#">{{ tag.name }}</a></li>
-                                {% endfor %}
-                            </ul>
-                        </footer>
+                        <p><i>{{ article.locale_date }} | {{ article.author }}</i></p>
+                    </div>
+                </header>
+                <p>{{ article.summary | strip_style | striptags | truncate(350) }}</p>
+                <footer>
+                    <div class="actions" style="text-align: right">
+                        <a href="/blog/{{ article.date.strftime('%Y/%m/%d') }}/{{ article.metadata.filename }}" class="button medium">Continue Reading</a>
+                    </div>
+                    <ul class="stats">
+                        {% for tag in article.tags %}
+                            <li><a href="#">{{ tag.name }}</a></li>
+                        {% endfor %}
+                    </ul>
+                </footer>
             </article>
         </div>
     </div>
diff --git a/content/theme/templates/generic.html b/content/theme/templates/generic.html
index 49d1616f..aba78eb1 100644
--- a/content/theme/templates/generic.html
+++ b/content/theme/templates/generic.html
@@ -6,7 +6,7 @@
         <h1>
           {{ article.title }}
         </h1>
-        <p>Posted on: {{ article.locale_date }} by {{ article.author }}</p>
+        <p><i>Posted on: {{ article.locale_date }} by {{ article.author }}</i></p>
 
         {% if article.toc %}
         <aside class="toc-container d-md-none mb-2">
@@ -22,6 +22,7 @@ <h1>
       <aside class="toc-container d-none d-md-block col-md-4 col-xl-3 ms-xl-2">
         {{ article.toc }}
       </aside>
+      <script src="/blog/js/toc-highlight.js" defer></script>
       {% endif %}
     </div>
   </div>
diff --git a/content/theme/templates/menu.html b/content/theme/templates/menu.html
index c8abbd38..2167e332 100644
--- a/content/theme/templates/menu.html
+++ b/content/theme/templates/menu.html
@@ -1,6 +1,6 @@
 <!-- nav bar -->
-<nav class="navbar navbar-expand-lg navbar-dark bg-dark" aria-label="Fifth navbar example">
-    <div class="container-fluid">
+<nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top" aria-label="Fifth navbar example">
+    <div class="container-fluid navbar-content">
         <a class="navbar-brand" href="/blog/"><img src="/blog/images/logo_original4x.png" style="height: 32px;"/> Apache DataFusion Blog</a>
         <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarADP" aria-controls="navbarADP" aria-expanded="false" aria-label="Toggle navigation">
             <span class="navbar-toggler-icon"></span>
diff --git a/pelicanconf.py b/pelicanconf.py
index e5433cb8..1467d8cd 100644
--- a/pelicanconf.py
+++ b/pelicanconf.py
@@ -1,4 +1,5 @@
 import datetime
+import re
 # Basic information about the site.
 SITENAME = 'Apache DataFusion Blog'
 SITEDESC = 'The official new and blog for the Apache DataFusion project'
@@ -73,3 +74,8 @@
     },
     'output_format': 'html5',
 }
+
+def strip_style(html):
+    return re.sub(r'<style.*?</style>', '', html, flags=re.S | re.I)
+
+JINJA_FILTERS = { 'strip_style': strip_style, }