diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
index 6ec95d00..172022ec 100644
--- a/.pre-commit-config.yaml
+++ b/.pre-commit-config.yaml
@@ -42,6 +42,9 @@ repos:
       - id: djlint-reformat-jinja
         files: ".*templates/.*.html"
         types_or: ["html"]
+      - id: djlint-jinja
+        files: ".*templates/.*.html"
+        types_or: ["html"]
 
   # Autoformat and linting, misc. details
   - repo: https://github.com/pre-commit/pre-commit-hooks
diff --git a/docs/source/_templates/redoc.html b/docs/source/_templates/redoc.html
index bf764d11..6e457719 100644
--- a/docs/source/_templates/redoc.html
+++ b/docs/source/_templates/redoc.html
@@ -19,14 +19,18 @@
 {%- block content %}
   <redoc id="redoc-spec"></redoc>
   <script>
-  if (location.protocol === "file:") {
-    document.body.innerText = "Rendered API specification doesn't work with file: protocol. Use sphinx-autobuild to do local builds of the docs, served over HTTP."
-  } else {
-    Redoc.init(
-      "{{ pathto('_static/rest-api.yml', 1) }}",
-      {{ meta.redoc_options | default({}) }},
-      document.getElementById("redoc-spec"),
-    );
-  }
+    if (location.protocol === "file:") {
+      document.body.innerText = "Rendered API specification doesn't work with file: protocol. Use sphinx-autobuild to do local builds of the docs, served over HTTP."
+    } else {
+      Redoc.init(
+        "{{ pathto('_static/rest-api.yml', 1) }}", {
+          {
+            meta.redoc_options |
+              default ({})
+          }
+        },
+        document.getElementById("redoc-spec"),
+      );
+    }
   </script>
 {%- endblock content %}
diff --git a/examples/service-announcement/templates/page.html b/examples/service-announcement/templates/page.html
index de980f51..23c544ab 100644
--- a/examples/service-announcement/templates/page.html
+++ b/examples/service-announcement/templates/page.html
@@ -1,10 +1,12 @@
 {% extends "templates/page.html" %}
-{% block announcement %}<div class="container text-center announcement"></div>{% endblock %}
+{% block announcement %}
+  <div class="container text-center announcement"></div>
+{% endblock announcement %}
 {% block script %}
   {{ super() }}
   <script>
-  $.get("/services/announcement/", function (data) {
-    $(".announcement").html(data["announcement"]);
-  });
+    $.get("/services/announcement/", function(data) {
+      $(".announcement").html(data["announcement"]);
+    });
   </script>
-{% endblock %}
+{% endblock script %}
diff --git a/jupyterhub/singleuser/templates/page.html b/jupyterhub/singleuser/templates/page.html
index 6dd57ca3..2243f36b 100644
--- a/jupyterhub/singleuser/templates/page.html
+++ b/jupyterhub/singleuser/templates/page.html
@@ -17,38 +17,38 @@ It makes the following modifications:
        style="margin-right: 4px;
               margin-left: 2px">Control Panel</a>
   </span>
-{% endblock %}
+{% endblock header_buttons %}
 {% block logo %}
   <img src="{{ logo_url }}" alt="Jupyter Notebook" />
 {% endblock logo %}
 {% block script %}
   {{ super() }}
   <script type="text/javascript">
-  function _remove_redirects_param() {
-    // remove ?redirects= param from URL so that
-    // successful page loads don't increment the redirect loop counter
-    if (window.location.search.length <= 1) {
-      return;
-    }
-    var search_parameters = window.location.search.slice(1).split("&");
-    for (var i = 0; i < search_parameters.length; i++) {
-      if (search_parameters[i].split("=")[0] === "redirects") {
-        // remote token from search parameters
-        search_parameters.splice(i, 1);
-        var new_search = "";
-        if (search_parameters.length) {
-          new_search = "?" + search_parameters.join("&");
-        }
-        var new_url =
-          window.location.origin +
-          window.location.pathname +
-          new_search +
-          window.location.hash;
-        window.history.replaceState({}, "", new_url);
+    function _remove_redirects_param() {
+      // remove ?redirects= param from URL so that
+      // successful page loads don't increment the redirect loop counter
+      if (window.location.search.length <= 1) {
         return;
       }
+      var search_parameters = window.location.search.slice(1).split("&");
+      for (var i = 0; i < search_parameters.length; i++) {
+        if (search_parameters[i].split("=")[0] === "redirects") {
+          // remote token from search parameters
+          search_parameters.splice(i, 1);
+          var new_search = "";
+          if (search_parameters.length) {
+            new_search = "?" + search_parameters.join("&");
+          }
+          var new_url =
+            window.location.origin +
+            window.location.pathname +
+            new_search +
+            window.location.hash;
+          window.history.replaceState({}, "", new_url);
+          return;
+        }
+      }
     }
-  }
-  _remove_redirects_param();
+    _remove_redirects_param();
   </script>
 {% endblock script %}
diff --git a/pyproject.toml b/pyproject.toml
index e5c8c5f4..8edb94b0 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -124,6 +124,18 @@ select = [
 # https://djlint.com/docs/configuration/
 [tool.djlint]
 indent = 2
+# ignore often-incorrect lint
+# H006: image height/width attributes
+# ignore style lint that formatter doesn't catch
+# H008: double-quotes
+# H029: form method case
+ignore = "H006,H008,H021,H029"
+use_gitignore = true
+
+format_js = true
+
+[tool.djlint.js]
+indent_size = 2
 
 # tbump is used to simplify and standardize the release process when updating
 # the version, making a git commit and tag, and pushing changes.
diff --git a/share/jupyterhub/templates/404.html b/share/jupyterhub/templates/404.html
index 2fc227aa..04c74942 100644
--- a/share/jupyterhub/templates/404.html
+++ b/share/jupyterhub/templates/404.html
@@ -1,2 +1,4 @@
 {% extends "error.html" %}
-{% block error_detail %}<p>Jupyter has lots of moons, but this is not one...</p>{% endblock %}
+{% block error_detail %}
+  <p>Jupyter has lots of moons, but this is not one...</p>
+{% endblock error_detail %}
diff --git a/share/jupyterhub/templates/accept-share.html b/share/jupyterhub/templates/accept-share.html
index fd8d8d69..450795e1 100644
--- a/share/jupyterhub/templates/accept-share.html
+++ b/share/jupyterhub/templates/accept-share.html
@@ -1,5 +1,6 @@
 {% extends "page.html" %}
-{% block login_widget %}{% endblock %}
+{% block login_widget %}
+{% endblock login_widget %}
 {% block main %}
   <div class="container">
     <div class="row justify-content-center">
@@ -16,7 +17,7 @@
             to start the server before you can access it.
           </p>
         {% endif %}
-        <form method="POST" action="">
+        <form method="post" action="">
           <div class="card">
             <div class="card-header">
               By accepting the invitation, you will be granted the following permissions,
@@ -48,4 +49,4 @@
       </div>
     </div>
   </div>
-{% endblock %}
+{% endblock main %}
diff --git a/share/jupyterhub/templates/admin.html b/share/jupyterhub/templates/admin.html
index c5936c7c..572003d9 100644
--- a/share/jupyterhub/templates/admin.html
+++ b/share/jupyterhub/templates/admin.html
@@ -2,12 +2,12 @@
 {% block main %}
   <div id="react-admin-hook">
     <script id="jupyterhub-admin-config">
-    window.api_page_limit = parseInt("{{ api_page_limit|safe }}")
-    window.base_url = "{{ base_url|safe }}"
+      window.api_page_limit = parseInt("{{ api_page_limit|safe }}")
+      window.base_url = "{{ base_url|safe }}"
     </script>
     <script src={{ static_url("js/admin-react.js") }}></script>
   </div>
-{% endblock %}
+{% endblock main %}
 {% block footer %}
   <div class="py-2 px-4 bg-body-tertiary small version_footer">JupyterHub {{ server_version }}</div>
-{% endblock %}
+{% endblock footer %}
diff --git a/share/jupyterhub/templates/error.html b/share/jupyterhub/templates/error.html
index 1a63fe04..b7e8d9c0 100644
--- a/share/jupyterhub/templates/error.html
+++ b/share/jupyterhub/templates/error.html
@@ -1,5 +1,6 @@
 {% extends "page.html" %}
-{% block login_widget %}{% endblock %}
+{% block login_widget %}
+{% endblock login_widget %}
 {% block main %}
   <div class="error">
     {% block h1_error %}
@@ -11,7 +12,7 @@
       {% if extra_error_html %}<p>{{ extra_error_html | safe }}</p>{% endif %}
     {% endblock error_detail %}
   </div>
-{% endblock %}
+{% endblock main %}
 {% block script %}
   {{ super() }}
   <script type="text/javascript">
@@ -29,9 +30,9 @@
             new_search = '?' + search_parameters.join('&');
           }
           var new_url = window.location.origin +
-                        window.location.pathname +
-                        new_search +
-                        window.location.hash;
+            window.location.pathname +
+            new_search +
+            window.location.hash;
           window.history.replaceState({}, "", new_url);
           return;
         }
@@ -40,4 +41,4 @@
 
     _remove_redirects_from_url();
   </script>
-{% endblock %}
+{% endblock script %}
diff --git a/share/jupyterhub/templates/home.html b/share/jupyterhub/templates/home.html
index 0ccc4308..17565ed4 100644
--- a/share/jupyterhub/templates/home.html
+++ b/share/jupyterhub/templates/home.html
@@ -86,5 +86,7 @@
 {% endblock main %}
 {% block script %}
   {{ super() }}
-  <script type="text/javascript">require(["home"]);</script>
-{% endblock %}
+  <script type="text/javascript">
+    require(["home"]);
+  </script>
+{% endblock script %}
diff --git a/share/jupyterhub/templates/login.html b/share/jupyterhub/templates/login.html
index 03ad65b5..8c8e83bd 100644
--- a/share/jupyterhub/templates/login.html
+++ b/share/jupyterhub/templates/login.html
@@ -2,7 +2,8 @@
 {% if announcement_login is string %}
   {% set announcement = announcement_login %}
 {% endif %}
-{% block login_widget %}{% endblock %}
+{% block login_widget %}
+{% endblock login_widget %}
 {% block main %}
   {% block login %}
     <div id="login-main" class="container">
@@ -86,21 +87,21 @@
       {% endblock login_container %}
     </div>
   {% endblock login %}
-{% endblock %}
+{% endblock main %}
 {% block script %}
   {{ super() }}
   <script>
-if (window.location.protocol === "http:") {
-  // unhide http warning
-  var warning = document.getElementById('insecure-login-warning');
-  warning.className = warning.className.replace(/\bhidden\b/, '');
-}
-// setup onSubmit feedback
-$('form').submit((e) => {
-  var form = $(e.target);
-  form.find('.feedback-container>input').attr('disabled', true);
-  form.find('.feedback-container>*').toggleClass('hidden');
-  form.find('.feedback-widget>*').toggleClass('fa-pulse');
-});
+    if (window.location.protocol === "http:") {
+      // unhide http warning
+      var warning = document.getElementById('insecure-login-warning');
+      warning.className = warning.className.replace(/\bhidden\b/, '');
+    }
+    // setup onSubmit feedback
+    $('form').submit((e) => {
+      var form = $(e.target);
+      form.find('.feedback-container>input').attr('disabled', true);
+      form.find('.feedback-container>*').toggleClass('hidden');
+      form.find('.feedback-widget>*').toggleClass('fa-pulse');
+    });
   </script>
-{% endblock %}
+{% endblock script %}
diff --git a/share/jupyterhub/templates/logout.html b/share/jupyterhub/templates/logout.html
index 910c580f..994e7769 100644
--- a/share/jupyterhub/templates/logout.html
+++ b/share/jupyterhub/templates/logout.html
@@ -6,4 +6,4 @@
   <div id="logout-main" class="container">
     <p>Successfully logged out.</p>
   </div>
-{% endblock %}
+{% endblock main %}
diff --git a/share/jupyterhub/templates/not_running.html b/share/jupyterhub/templates/not_running.html
index 52d56c77..49fb2025 100644
--- a/share/jupyterhub/templates/not_running.html
+++ b/share/jupyterhub/templates/not_running.html
@@ -11,7 +11,7 @@
               Server not running
             {% endif %}
           </h1>
-        {% endblock %}
+        {% endblock heading %}
         {% block message %}
           <p>
             {% if failed %}
@@ -35,7 +35,7 @@
               {% endif %}
             {% endif %}
           </p>
-        {% endblock %}
+        {% endblock message %}
         {% block start_button %}
           <a id="start"
              role="button"
@@ -48,24 +48,30 @@
             {% endif %}
             Server {{ server_name }}
           </a>
-        {% endblock %}
+        {% endblock start_button %}
       </div>
     </div>
   </div>
-{% endblock %}
+{% endblock main %}
 {% block script %}
   {{ super () }}
   {% if implicit_spawn_seconds %}
     <script type="text/javascript">
-  var spawn_url = "{{ spawn_url }}";
-  var implicit_spawn_seconds = {{ implicit_spawn_seconds }};
-  setTimeout(function () {
-      console.log("redirecting to spawn at", spawn_url);
-      window.location = spawn_url;
-    },
-    1000 * implicit_spawn_seconds
-  );
+      var spawn_url = "{{ spawn_url }}";
+      var implicit_spawn_seconds = {
+        {
+          implicit_spawn_seconds
+        }
+      };
+      setTimeout(function() {
+          console.log("redirecting to spawn at", spawn_url);
+          window.location = spawn_url;
+        },
+        1000 * implicit_spawn_seconds
+      );
     </script>
   {% endif %}
-  <script type="text/javascript">require(["not_running"]);</script>
+  <script type="text/javascript">
+    require(["not_running"]);
+  </script>
 {% endblock script %}
diff --git a/share/jupyterhub/templates/oauth.html b/share/jupyterhub/templates/oauth.html
index 4756312f..edb11bc7 100644
--- a/share/jupyterhub/templates/oauth.html
+++ b/share/jupyterhub/templates/oauth.html
@@ -1,5 +1,6 @@
 {% extends "page.html" %}
-{% block login_widget %}{% endblock %}
+{% block login_widget %}
+{% endblock login_widget %}
 {% block main %}
   <div class="container">
     <div class="row justify-content-center">
@@ -14,7 +15,7 @@
             your behalf.
           {% endif %}
         </p>
-        <form method="POST" action="">
+        <form method="post" action="">
           <div class="card">
             <div class="card-header">
               <p class="h5">This will grant the application permission to:</p>
@@ -26,22 +27,26 @@
               {% for scope_info in scope_descriptions %}
                 <div class="checkbox input-group">
                   <label>
-                    <input type="checkbox" name="raw-scopes" checked="true" title="This authorization is required"
-                      disabled="disabled"
-                      {# disabled because it's required #} />
-                      <span>
-                        {{ scope_info['description'] }}
-                        {% if scope_info['filter'] %}Applies to {{ scope_info['filter'] }}.{% endif %}
-                      </span>
-                    </label>
-                  </div>
-                {% endfor %}
-              </div>
-              <div class="card-footer">
-                <button type="submit" class="form-control btn btn-jupyter mt-2">Authorize</button>
-              </div>
+                    {# disabled because it's required #}
+                    <input type="checkbox"
+                           name="raw-scopes"
+                           checked="true"
+                           title="This authorization is required"
+                           disabled="disabled" />
+                    <span>
+                      {{ scope_info['description'] }}
+                      {% if scope_info['filter'] %}Applies to {{ scope_info['filter'] }}.{% endif %}
+                    </span>
+                  </label>
+                </div>
+              {% endfor %}
             </div>
-          </form>
-        </div>
+            <div class="card-footer">
+              <button type="submit" class="form-control btn btn-jupyter mt-2">Authorize</button>
+            </div>
+          </div>
+        </form>
       </div>
-    {% endblock %}
+    </div>
+  </div>
+{% endblock main %}
diff --git a/share/jupyterhub/templates/page.html b/share/jupyterhub/templates/page.html
index 533e8311..7583473b 100644
--- a/share/jupyterhub/templates/page.html
+++ b/share/jupyterhub/templates/page.html
@@ -10,9 +10,7 @@
     <div class="modal-dialog">
       <div class="modal-content">
         <div class="modal-header">
-          <h2 class="modal-title" id="{{ key }}-label">
-            {{ title }}
-          </h1>
+          <h2 class="modal-title" id="{{ key }}-label">{{ title }}</h2>
           <button type="button"
                   class="btn-close"
                   data-bs-dismiss="modal"
@@ -34,40 +32,45 @@
   <head>
     <meta charset="utf-8">
     <title>
-      {% block title %}JupyterHub{% endblock %}
+      {%- block title -%}
+        JupyterHub
+      {%- endblock title -%}
     </title>
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     {% block stylesheet %}
       <link rel="stylesheet" href="{{ static_url("css/style.min.css") }}" type="text/css" />
-    {% endblock %}
-    {% block favicon %}<link rel="icon" href="{{ static_url("favicon.ico") }}" type="image/x-icon">{% endblock %}
+    {% endblock stylesheet %}
+    {% block favicon %}
+      <link rel="icon" href="{{ static_url("favicon.ico") }}" type="image/x-icon">
+    {% endblock favicon %}
     {% block scripts %}
       <script src="{{static_url("components/bootstrap/dist/js/bootstrap.bundle.min.js") }}" type="text/javascript" charset="utf-8"></script>
       <script src="{{static_url("components/requirejs/require.js") }}" type="text/javascript" charset="utf-8"></script>
       <script src="{{static_url("components/jquery/dist/jquery.min.js") }}" type="text/javascript" charset="utf-8"></script>
-    {% endblock %}
-    <script>
-      require.config({
-          {% if version_hash %}urlArgs: "v={{version_hash}}",{% endif %}
-          baseUrl: '{{static_url("js", include_version=False)}}',
-          paths: {
-            components: '../components',
-            jquery: '../components/jquery/dist/jquery.min',
-            moment: "../components/moment/moment",
-          },
-      });
-    </script>
+    {% endblock scripts %}
+    {# djlint js formatting doesn't handle template blocks in js #}
+    {# djlint: off #}
     <script type="text/javascript">
+      require.config({
+        {% if version_hash %}
+        urlArgs: "v={{version_hash}}",
+        {% endif %}
+        baseUrl: '{{static_url("js", include_version=False)}}',
+        paths: {
+          components: '../components',
+          jquery: '../components/jquery/dist/jquery.min',
+          moment: "../components/moment/moment",
+        },
+      });
+
       window.jhdata = {
         base_url: "{{base_url}}",
         prefix: "{{prefix}}",
         {% if user %}
-        {#
-          Autoescaping in templates is turned on in JupyterHub,
-          need `| safe` to prevent escaping
-          https://github.com/pallets/markupsafe/blob/2.1.4/src/markupsafe/_native.py#L6
-        #}
+        {#- Autoescaping in templates is turned on in JupyterHub, #}
+        {#-  need `| safe` to prevent escaping #}
+        {#- `https://github.com/pallets/markupsafe/blob/2.1.4/src/markupsafe/_native.py#L6` #}
         user: "{{ user.json_escaped_name | safe }}",
         {% endif %}
         {% if admin_access %}
@@ -81,97 +84,124 @@
         options_form: false,
         {% endif %}
         xsrf_token: "{{ xsrf_token }}",
-      }
+      };
+
 </script>
-{% block meta %}
-{% endblock %}
-</head>
-<body>
-<noscript>
-<div id='noscript'>
-JupyterHub requires JavaScript.
-<br>
-Please enable it to proceed.
-</div>
-</noscript>
-{% block nav_bar %}
-<nav class="navbar navbar-expand-sm bg-body-tertiary mb-4">
-<div class="container-fluid">
-{% block logo %}
-<span id="jupyterhub-logo" class="navbar-brand">
-<a href="{{ logo_url or base_url }}">
-<img src='{{ base_url }}logo' alt='JupyterHub logo' class='jpy-logo' title='Home' />
-</a>
-</span>
-{% endblock %}
-{% if user %}
-<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#thenavbar" aria-controls="thenavbar" aria-expanded="false" aria-label="Toggle navigation">
-<span class="navbar-toggler-icon"></span>
-</button>
-{% endif %}
-<div class="collapse navbar-collapse" id="thenavbar">
-{% if user %}
-<ul class="navbar-nav me-auto mb-0">
-{% block nav_bar_left_items %}
-<li class="nav-item">
-<a class="nav-link" href="{{ base_url }}home">Home</a>
-</li>
-<li class="nav-item">
-<a class="nav-link" href="{{ base_url }}token">Token</a>
-</li>
-{% if 'admin-ui' in parsed_scopes %}
-<li class="nav-item">
-<a class="nav-link" href="{{ base_url }}admin">Admin</a>
-</li>
-{% endif %}
-{% if services %}
-<li class="nav-item dropdown">
-<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-expanded="false">Services</a>
-<ul class="dropdown-menu">
-{% for service in services %}
-{% block service scoped %}
-<li>
-<a class="dropdown-item" href="{{ service.href }}">{{ service.name }}</a>
-</li>
-{% endblock %}
-{% endfor %}
-</ul>
-</li>
-{% endif %}
-{% endblock %}
-</ul>
-{% endif %}
-<ul class="nav navbar-nav me-2">
-{% block nav_bar_right_items %}
-<li class="nav-item">
-{% block login_widget %}
-<span id="login_widget">
-{% if user %}
-<span class="navbar-text">{{ user.name }}</span>
-<a id="logout" role="button" class="btn btn-sm btn-outline-dark" href="{{ logout_url }}"> <i aria-hidden="true" class="fa fa-sign-out"></i> Logout</a>
-{% else %}
-<a id="login" role="button" class="btn btn-sm btn-outline-dark" href="{{ login_url }}">Login</a>
-{% endif %}
-</span>
-{% endblock %}
-</li>
-{% endblock %}
-</ul>
-</div>
-{% block header %}{% endblock %}
-</div>
-</nav>
-{% endblock %}
-{% block announcement %}
-{% if announcement %}
-<div class="container text-center announcement alert alert-warning">{{ announcement | safe }}</div>
-{% endif %}
-{% endblock %}
-{% block main %}{% endblock %}
-{% block footer %}{% endblock %}
-{% call modal('Error', btn_label='OK') %}
-<div class="ajax-error alert-danger">The error</div>
-{% endcall %}
-{% block script %}{% endblock %}
-</body>
+    {# djlint: on #}
+    {% block meta %}
+      <meta name="description" content="JupyterHub">
+      <meta name="keywords" content="Jupyter, JupyterHub">
+    {% endblock meta %}
+  </head>
+  <body>
+    <noscript>
+      <div id='noscript'>
+        JupyterHub requires JavaScript.
+        <br>
+        Please enable it to proceed.
+      </div>
+    </noscript>
+    {% block nav_bar %}
+      <nav class="navbar navbar-expand-sm bg-body-tertiary mb-4">
+        <div class="container-fluid">
+          {% block logo %}
+            <span id="jupyterhub-logo" class="navbar-brand">
+              <a href="{{ logo_url or base_url }}">
+                <img src='{{ base_url }}logo'
+                     alt='JupyterHub logo'
+                     class='jpy-logo'
+                     title='Home' />
+              </a>
+            </span>
+          {% endblock logo %}
+          {% if user %}
+            <button class="navbar-toggler"
+                    type="button"
+                    data-bs-toggle="collapse"
+                    data-bs-target="#thenavbar"
+                    aria-controls="thenavbar"
+                    aria-expanded="false"
+                    aria-label="Toggle navigation">
+              <span class="navbar-toggler-icon"></span>
+            </button>
+          {% endif %}
+          <div class="collapse navbar-collapse" id="thenavbar">
+            {% if user %}
+              <ul class="navbar-nav me-auto mb-0">
+                {% block nav_bar_left_items %}
+                  <li class="nav-item">
+                    <a class="nav-link" href="{{ base_url }}home">Home</a>
+                  </li>
+                  <li class="nav-item">
+                    <a class="nav-link" href="{{ base_url }}token">Token</a>
+                  </li>
+                  {% if 'admin-ui' in parsed_scopes %}
+                    <li class="nav-item">
+                      <a class="nav-link" href="{{ base_url }}admin">Admin</a>
+                    </li>
+                  {% endif %}
+                  {% if services %}
+                    <li class="nav-item dropdown">
+                      <a href="#"
+                         class="nav-link dropdown-toggle"
+                         data-bs-toggle="dropdown"
+                         role="button"
+                         aria-expanded="false">Services</a>
+                      <ul class="dropdown-menu">
+                        {% for service in services %}
+                          {% block service scoped %}
+                            <li>
+                              <a class="dropdown-item" href="{{ service.href }}">{{ service.name }}</a>
+                            </li>
+                          {% endblock service %}
+                        {% endfor %}
+                      </ul>
+                    </li>
+                  {% endif %}
+                {% endblock nav_bar_left_items %}
+              </ul>
+            {% endif %}
+            <ul class="nav navbar-nav me-2">
+              {% block nav_bar_right_items %}
+                <li class="nav-item">
+                  {% block login_widget %}
+                    <span id="login_widget">
+                      {% if user %}
+                        <span class="navbar-text">{{ user.name }}</span>
+                        <a id="logout"
+                           role="button"
+                           class="btn btn-sm btn-outline-dark"
+                           href="{{ logout_url }}"> <i aria-hidden="true" class="fa fa-sign-out"></i> Logout</a>
+                      {% else %}
+                        <a id="login"
+                           role="button"
+                           class="btn btn-sm btn-outline-dark"
+                           href="{{ login_url }}">Login</a>
+                      {% endif %}
+                    </span>
+                  {% endblock login_widget %}
+                </li>
+              {% endblock nav_bar_right_items %}
+            </ul>
+          </div>
+          {% block header %}
+          {% endblock header %}
+        </div>
+      </nav>
+    {% endblock nav_bar %}
+    {% block announcement %}
+      {% if announcement %}
+        <div class="container text-center announcement alert alert-warning">{{ announcement | safe }}</div>
+      {% endif %}
+    {% endblock announcement %}
+    {% block main %}
+    {% endblock main %}
+    {% block footer %}
+    {% endblock footer %}
+    {% call modal('Error', btn_label='OK') %}
+      <div class="ajax-error alert-danger">The error</div>
+    {% endcall %}
+    {% block script %}
+    {% endblock script %}
+  </body>
 </html>
diff --git a/share/jupyterhub/templates/spawn.html b/share/jupyterhub/templates/spawn.html
index 209c7e42..b55018c9 100644
--- a/share/jupyterhub/templates/spawn.html
+++ b/share/jupyterhub/templates/spawn.html
@@ -8,7 +8,7 @@
       <div class="row text-center">
         <h1>Server Options</h1>
       </div>
-    {% endblock %}
+    {% endblock heading %}
     <div class="row justify-content-center">
       <div class="col-md-8">
         {% if for_user and user.name != for_user.name -%}
@@ -31,16 +31,17 @@
         </form>
       </div>
     </div>
-  {% endblock %}
-  {% block script %}
-    {{ super() }}
-    <script>
-// setup onSubmit feedback
-$('form').submit((e) => {
-  var form = $(e.target);
-  form.find('.feedback-container>input').attr('disabled', true);
-  form.find('.feedback-container>*').toggleClass('hidden');
-  form.find('.feedback-widget>*').toggleClass('fa-pulse');
-});
-    </script>
-  {% endblock %}
+  </div>
+{% endblock main %}
+{% block script %}
+  {{ super() }}
+  <script>
+    // setup onSubmit feedback
+    $('form').submit((e) => {
+      var form = $(e.target);
+      form.find('.feedback-container>input').attr('disabled', true);
+      form.find('.feedback-container>*').toggleClass('hidden');
+      form.find('.feedback-widget>*').toggleClass('fa-pulse');
+    });
+  </script>
+{% endblock script %}
diff --git a/share/jupyterhub/templates/spawn_pending.html b/share/jupyterhub/templates/spawn_pending.html
index 536d15ec..792778e9 100644
--- a/share/jupyterhub/templates/spawn_pending.html
+++ b/share/jupyterhub/templates/spawn_pending.html
@@ -6,15 +6,14 @@
         {% block message %}
           <p>Your server is starting up.</p>
           <p>You will be redirected automatically when it's ready for you.</p>
-        {% endblock %}
+        {% endblock message %}
         <div class="progress">
           <div id="progress-bar"
                class="progress-bar"
                role="progressbar"
                aria-valuenow="0"
                aria-valuemin="0"
-               aria-valuemax="100"
-               style="width: 0%">
+               aria-valuemax="100">
             <span class="sr-only"><span id="sr-progress">0%</span> Complete</span>
           </div>
         </div>
@@ -30,67 +29,67 @@
       </div>
     </div>
   </div>
-{% endblock %}
+{% endblock main %}
 {% block script %}
   {{ super() }}
   <script type="text/javascript">
-require(["jquery"], function ($) {
-  $("#refresh").click(function () {
-    window.location.reload();
-  });
+    require(["jquery"], function($) {
+      $("#refresh").click(function() {
+        window.location.reload();
+      });
 
-  // hook up event-stream for progress
-  var evtSource = new EventSource("{{ progress_url }}");
-  var progressMessage = $("#progress-message");
-  var progressBar = $("#progress-bar");
-  var srProgress = $("#sr-progress");
-  var progressLog = $("#progress-log");
+      // hook up event-stream for progress
+      var evtSource = new EventSource("{{ progress_url }}");
+      var progressMessage = $("#progress-message");
+      var progressBar = $("#progress-bar");
+      var srProgress = $("#sr-progress");
+      var progressLog = $("#progress-log");
 
-  evtSource.onmessage = function(e) {
-    var evt = JSON.parse(e.data);
-    console.log(evt);
-    if (evt.progress !== undefined) {
-      // update progress
-      var progText = evt.progress.toString();
-      progressBar.attr('aria-valuenow', progText);
-      srProgress.text(progText + '%');
-      progressBar.css('width', progText + '%');
-    }
-    // update message
-    var html_message;
-    if (evt.html_message !== undefined) {
-      progressMessage.html(evt.html_message);
-      html_message = evt.html_message;
-    } else if (evt.message !== undefined) {
-      progressMessage.text(evt.message);
-      html_message = progressMessage.html();
-    }
-    if (html_message) {
-      progressLog.append(
-        $("<div>")
-          .addClass('progress-log-event')
-          .html(html_message)
-      );
-    }
+      evtSource.onmessage = function(e) {
+        var evt = JSON.parse(e.data);
+        console.log(evt);
+        if (evt.progress !== undefined) {
+          // update progress
+          var progText = evt.progress.toString();
+          progressBar.attr('aria-valuenow', progText);
+          srProgress.text(progText + '%');
+          progressBar.css('width', progText + '%');
+        }
+        // update message
+        var html_message;
+        if (evt.html_message !== undefined) {
+          progressMessage.html(evt.html_message);
+          html_message = evt.html_message;
+        } else if (evt.message !== undefined) {
+          progressMessage.text(evt.message);
+          html_message = progressMessage.html();
+        }
+        if (html_message) {
+          progressLog.append(
+            $("<div>")
+            .addClass('progress-log-event')
+            .html(html_message)
+          );
+        }
 
-    if (evt.ready) {
-      evtSource.close();
-      // reload the current page
-      // which should result in a redirect to the running server
-      window.location.reload();
-    }
+        if (evt.ready) {
+          evtSource.close();
+          // reload the current page
+          // which should result in a redirect to the running server
+          window.location.reload();
+        }
 
-    if (evt.failed) {
-      evtSource.close();
-      // turn progress bar red
-      progressBar.addClass('progress-bar-danger');
-      // open event log for debugging
-      $('#progress-details').prop('open', true);
-    }
-  };
+        if (evt.failed) {
+          evtSource.close();
+          // turn progress bar red
+          progressBar.addClass('progress-bar-danger');
+          // open event log for debugging
+          $('#progress-details').prop('open', true);
+        }
+      };
 
-  // signal that page has finished loading (mostly for tests)
-  window._jupyterhub_page_loaded = true;
-});
+      // signal that page has finished loading (mostly for tests)
+      window._jupyterhub_page_loaded = true;
+    });
   </script>
-{% endblock %}
+{% endblock script %}
diff --git a/share/jupyterhub/templates/stop_pending.html b/share/jupyterhub/templates/stop_pending.html
index 390f6429..cbad48b6 100644
--- a/share/jupyterhub/templates/stop_pending.html
+++ b/share/jupyterhub/templates/stop_pending.html
@@ -14,17 +14,17 @@
       </div>
     </div>
   </div>
-{% endblock %}
+{% endblock main %}
 {% block script %}
   {{ super() }}
   <script type="text/javascript">
-require(["jquery"], function ($) {
-  $("#refresh").click(function () {
-    window.location.reload();
-  });
-  setTimeout(function () {
-    window.location.reload();
-  }, 5000);
-});
+    require(["jquery"], function($) {
+      $("#refresh").click(function() {
+        window.location.reload();
+      });
+      setTimeout(function() {
+        window.location.reload();
+      }, 5000);
+    });
   </script>
-{% endblock %}
+{% endblock script %}
diff --git a/share/jupyterhub/templates/token.html b/share/jupyterhub/templates/token.html
index 347088cd..b74c41fa 100644
--- a/share/jupyterhub/templates/token.html
+++ b/share/jupyterhub/templates/token.html
@@ -166,16 +166,19 @@
                   </td>
                   <td class="col-sm-1 text-center">
                     <button class="revoke-token-btn btn btn-xs btn-danger">revoke</button>
-                  {% endblock client_row %}
-                </tr>
-              {% endfor %}
-            </tbody>
-          </table>
-        </div>
-      {% endif %}
-    </div>
-  {% endblock main %}
-  {% block script %}
-    {{ super() }}
-    <script type="text/javascript">require(["token"]);</script>
-  {% endblock script %}
+                  </td>
+                {% endblock client_row %}
+              </tr>
+            {% endfor %}
+          </tbody>
+        </table>
+      </div>
+    {% endif %}
+  </div>
+{% endblock main %}
+{% block script %}
+  {{ super() }}
+  <script type="text/javascript">
+    require(["token"]);
+  </script>
+{% endblock script %}