diff --git a/docs/templates/example.html b/docs/templates/example.html
index 5996ec03..d26e12ce 100644
--- a/docs/templates/example.html
+++ b/docs/templates/example.html
@@ -1,32 +1,29 @@
-{% from 'macros/example-navbar.html' import example_navbar %}
-{% extends 'base.html' %}
-{% block header %}
-  {{ example_navbar() }}
-{% endblock %}
+{% from "macros/example-navbar.html" import example_navbar %}
+{% extends "base.html" %}
+{% block header %}{{ example_navbar() }}{% endblock %}
 {% block body %}
-  <main class="dbcd-main mb-5 mx-2 mx-md-4 my-4">
-    {% block size_warning %}
-
-    {% endblock %}
-    <div data-bs-theme="light" style="transform:translateZ(0);box-shadow:0 0 10px 5px #9c9c9c;min-height:calc(700px);">
-      {% block content %}
-
-      {% endblock %}
-    </div>
-    <div>
-      <h2>Source Code</h2>
-      <div id="sourceCode" class="position-relative" style="visibility:hidden;top:-110px"></div>
-      <p>
-        This code is available
-        <a href="{{ example_link }}">in the examples directory</a> of our GitHub repository.
-      </p>
-      <pre class="mt-3">
-        <code class="language-python">
-          {% block code %}
-
-          {% endblock %}
-        </code>
-      </pre>
-    </div>
-  </main>
+<main class="dbcd-main mb-5 mx-2 mx-md-4 my-4">
+  {% block size_warning %}{% endblock %}
+  <div
+    style="transform:translateZ(0);box-shadow:0 0 10px 5px #9c9c9c;min-height:calc(700px);"
+  >
+    {% block content %}{% endblock %}
+  </div>
+  <div>
+    <h2>Source Code</h2>
+    <div
+      id="sourceCode"
+      class="position-relative"
+      style="visibility:hidden;top:-110px"
+    ></div>
+    <p>
+      This code is available
+      <a href="{{ example_link }}">in the examples directory</a> of our GitHub
+      repository.
+    </p>
+    <pre
+      class="mt-3"
+    ><code class="language-python">{% block code %}{% endblock %}</code></pre>
+  </div>
+</main>
 {% endblock %}
diff --git a/docs/templates/examples-index.html b/docs/templates/examples-index.html
index 3e2c439e..749cf64d 100644
--- a/docs/templates/examples-index.html
+++ b/docs/templates/examples-index.html
@@ -1,50 +1,69 @@
-{% from 'macros/sidenav.html' import sidenav %}
-{% from 'macros/navbar.html' import navbar %}
-{% extends 'base.html' %}
-{% block title %}
-  <title>Examples - dbc docs</title>
-{% endblock %}
-{% block header %}
-  {{ navbar('examples', False) }}
-{% endblock %}
+{% from "macros/sidenav.html" import sidenav %}
+{% from "macros/navbar.html" import navbar %}
+{% extends "base.html" %}
+{% block title %}<title>Examples - dbc docs</title>{% endblock %}
+{% block header %}{{ navbar("examples", False) }}{% endblock %}
 {% block body %}
-  <div class="container">
-    <main class="dbcd-main mb-5">
-      <h1>Examples</h1>
-      <p class="lead">
-        This page contains example apps built with dash-bootstrap-components. Check out our
-        <a href="/facultyai/dash-bootstrap-components/tree/main/examples">GitHub page</a>
-        for more.
-      </p>
-      <div class="row">
-        <div class="col-12 col-md-4">
-          <h2>Iris</h2>
-          <div class="card">
-            <a href="/examples/iris"><img src="/static/images/examples/iris.png" alt="Iris example screenshot" class="card-img-top card-img-bottom" /></a>
-          </div>
-          <p>
-            Interactively cluster the Iris dataset. Based on
-            <a href="https://shiny.rstudio.com/gallery/kmeans-example.html">this RShiny example</a>.
-          </p>
+<div class="container">
+  <main class="dbcd-main mb-5">
+    <h1>Examples</h1>
+    <p class="lead">
+      This page contains example apps built with dash-bootstrap-components.
+      Check out our
+      <a
+        href="/facultyai/dash-bootstrap-components/tree/main/examples"
+        >GitHub page</a
+      >
+      for more.
+    </p>
+    <div class="row">
+      <div class="col-12 col-md-4">
+        <h2>Iris</h2>
+        <div class="card">
+          <a href="/examples/iris">
+            <img
+              src="/static/images/examples/iris.png"
+              alt="Iris example screenshot"
+              class="card-img-top card-img-bottom"
+          /></a>
         </div>
-        <div class="col-12 col-md-4">
-          <h2>Graphs in <code>Tabs</code></h2>
-          <div class="card">
-            <a href="/examples/graphs-in-tabs"><img src="/static/images/examples/git.png" alt="Graphs in tabs example screehshot" class="card-img-top card-img-bottom" /></a>
-          </div>
-          <p>
-            An example app showing how to ensure <code>dash_core_components.Graph</code>
-            components are sized correctly when used with <code>dbc.Tabs</code>.
-          </p>
+        <p>
+          Interactively cluster the Iris dataset. Based on
+          <a href="https://shiny.rstudio.com/gallery/kmeans-example.html"
+            >this RShiny example</a
+          >.
+        </p>
+      </div>
+      <div class="col-12 col-md-4">
+        <h2>Graphs in <code>Tabs</code></h2>
+        <div class="card">
+          <a href="/examples/graphs-in-tabs"
+            ><img
+              src="/static/images/examples/git.png"
+              alt="Graphs in tabs example screehshot"
+              class="card-img-top card-img-bottom"
+          /></a>
         </div>
-        <div class="col-12 col-md-4">
-          <h2>Simple sidebar</h2>
-          <div class="card">
-            <a href="/examples/simple-sidebar"><img src="/static/images/examples/ss.png" alt="Simple sidebar example screenshot" class="card-img-top card-img-bottom" /></a>
-          </div>
-          <p>An example multipage app with sidebar and active navigation links.</p>
+        <p>
+          An example app showing how to ensure <code>dash_core_components.Graph</code>
+          components are sized correctly when used with <code>dbc.Tabs</code>.
+        </p>
+      </div>
+      <div class="col-12 col-md-4">
+        <h2>Simple sidebar</h2>
+        <div class="card">
+          <a href="/examples/simple-sidebar"
+            ><img
+              src="/static/images/examples/ss.png"
+              alt="Simple sidebar example screenshot"
+              class="card-img-top card-img-bottom"
+          /></a>
         </div>
+        <p>
+          An example multipage app with sidebar and active navigation links.
+        </p>
       </div>
-    </main>
-  </div>
+    </div>
+  </main>
+</div>
 {% endblock %}
diff --git a/docs/templates/macros/example-navbar.html b/docs/templates/macros/example-navbar.html
index 4cd414e9..3f9c80fe 100644
--- a/docs/templates/macros/example-navbar.html
+++ b/docs/templates/macros/example-navbar.html
@@ -1,15 +1,20 @@
 {% macro example_navbar() -%}
-  <nav class="navbar sticky-top navbar-expand navbar-dark bg-dark">
-    <div class="container-fluid">
-      <span class="me-2 bg-white" style="padding:2px;border-radius:4px"><img src="/static/images/dbciconblack128.png" width="36" height="36" alt="dbc logo thumbnail" /></span>
-      <ul class="navbar-nav me-auto">
-        <li class="nav-item">
-          <a class="nav-link" href="/examples">Back to examples</a>
-        </li>
-        <li class="nav-item">
-          <a href="#sourceCode" class="nav-link">Jump to source</a>
-        </li>
-      </ul>
-    </div>
-  </nav>
+<nav class="navbar sticky-top navbar-expand navbar-dark bg-dark">
+  <div class="container-fluid">
+    <span class="me-2 bg-white" style="padding:2px;border-radius:4px">
+      <img
+      src="/static/images/dbciconblack128.png"
+      width="36"
+      height="36"
+      alt="dbc logo thumbnail"
+      />
+    </span>
+    <ul class="navbar-nav me-auto">
+      <li class="nav-item">
+        <a class="nav-link" href="/examples">Back to examples</a>
+      </li>
+      <li class="nav-item"><a href="#sourceCode" class="nav-link">Jump to source</a></li>
+    </ul>
+  </div>
+</nav>
 {%- endmacro %}