diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
index 7093afdf5..be098c214 100644
--- a/.pre-commit-config.yaml
+++ b/.pre-commit-config.yaml
@@ -46,5 +46,11 @@ repos:
       - id: deptry
         args: [".", "--per-rule-ignores", "DEP002=python-docs-theme", "--package-module-name-map", "gitpython=git,sphinx-lint=sphinxlint"]
 
+  - repo: https://github.com/djlint/djLint
+    rev: v1.36.4
+    hooks:
+      - id: djlint-reformat-jinja
+      - id: djlint-jinja
+
 ci:
   autoupdate_schedule: quarterly
diff --git a/djlint.toml b/djlint.toml
new file mode 100644
index 000000000..7eab3e9aa
--- /dev/null
+++ b/djlint.toml
@@ -0,0 +1,2 @@
+ignore="J018"
+indent=2
diff --git a/src/style.css b/src/style.css
index 14bd515f5..702ef73a5 100644
--- a/src/style.css
+++ b/src/style.css
@@ -42,6 +42,12 @@ body {
   outline-offset: 8px;
 }
 
+.navbar-brand a span {
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: #4a4a4a;
+}
+
 .nav-link svg {
   vertical-align: middle;
   margin-top: -4.5px;
@@ -102,6 +108,9 @@ ul.links-row li:not(:first-child)::before {
   content: '•';
   margin-right: 0.5ch;
 }
+ul.links-row a {
+  color: #1178cc;
+}
 
 /* ------------------------------ Index ------------------------------------- */
 
diff --git a/templates/base.html.jinja b/templates/base.html.jinja
index e90f7b19e..e2a773ecd 100644
--- a/templates/base.html.jinja
+++ b/templates/base.html.jinja
@@ -1,70 +1,87 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
-
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-  <meta name="description" content="Python Documentation Translation Dashboard">
-
-  <title>Python Docs Translation Dashboard</title>
-
-  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css"
-    rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB"
-    crossorigin="anonymous">
-  <link href="style.css?version=1" rel="stylesheet">
-</head>
-
-<body>
-  <header>
-    <nav class="navbar navbar-expand-md fixed-top">
-      <div class="container-fluid">
-      <div class="navbar-brand">
-        <a href="./">
-          <img src="logo.png" style="height: 2rem;" alt="Python logo">
-          <span style="font-size: 1.25rem; font-weight: 700; color: #4a4a4a">Translation Dashboard</span>
-        </a>
-      </div>
-
-      <div class="navbar-light bg-light">
-        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
-          <span class="navbar-toggler-icon"></span>
-        </button>
-      </div>
-
-      <div class="collapse navbar-collapse" id="navbarNavDropdown">
-        <ul class="navbar-nav mr-auto">
-          <li class="nav-item">
-            <a class="nav-link" href="build-details.html">
-              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-card-text" viewBox="0 0 16 16">
-                <path d="M14.5 3a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2z"></path>
-                <path d="M3 5.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5M3 8a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9A.5.5 0 0 1 3 8m0 2.5a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5"></path>
-              </svg>
-              Build details
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport"
+          content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="description"
+          content="Python Documentation Translation Dashboard">
+    <meta name="keywords" content="python,docs,translations,progress,status">
+    <title>Python Docs Translation Dashboard</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css"
+          rel="stylesheet"
+          integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB"
+          crossorigin="anonymous">
+    <link href="style.css?version=2" rel="stylesheet">
+  </head>
+  <body>
+    <header>
+      <nav class="navbar navbar-expand-md fixed-top">
+        <div class="container-fluid">
+          <div class="navbar-brand">
+            <a href="./">
+              <img src="logo.png" alt="Python logo" width="31.07" height="32">
+              <span>Translation Dashboard</span>
             </a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link" href="https://devguide.python.org/documentation/translations/translating/" target="_blank">
-              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-up-right" viewBox="0 0 16 16">
-                <path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5"></path>
-                <path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0z"></path>
-              </svg>
-              Translating
-            </a>
-          </li>
-        </ul>
-      </div>
-      </div>
-    </nav>
-  </header>
-
-  <main role="main">
-    {% block main %}
-    {% endblock %}
-  </main>
-
-</body>
-
-<script>
+          </div>
+          <div class="navbar-light bg-light">
+            <button class="navbar-toggler"
+                    type="button"
+                    data-bs-toggle="collapse"
+                    data-bs-target="#navbarNavDropdown"
+                    aria-controls="navbarNavDropdown"
+                    aria-expanded="false"
+                    aria-label="Toggle navigation">
+              <span class="navbar-toggler-icon"></span>
+            </button>
+          </div>
+          <div class="collapse navbar-collapse" id="navbarNavDropdown">
+            <ul class="navbar-nav mr-auto">
+              <li class="nav-item">
+                <a class="nav-link" href="build-details.html">
+                  <svg xmlns="http://www.w3.org/2000/svg"
+                       width="16"
+                       height="16"
+                       fill="currentColor"
+                       class="bi bi-card-text"
+                       viewBox="0 0 16 16">
+                    <path d="M14.5 3a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2z">
+                    </path>
+                    <path d="M3 5.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5M3 8a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9A.5.5 0 0 1 3 8m0 2.5a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5">
+                    </path>
+                  </svg>
+                  Build details
+                </a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link"
+                   href="https://devguide.python.org/documentation/translations/translating/"
+                   target="_blank">
+                  <svg xmlns="http://www.w3.org/2000/svg"
+                       width="16"
+                       height="16"
+                       fill="currentColor"
+                       class="bi bi-box-arrow-up-right"
+                       viewBox="0 0 16 16">
+                    <path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5">
+                    </path>
+                    <path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0z">
+                    </path>
+                  </svg>
+                  Translating
+                </a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </nav>
+    </header>
+    <main role="main">
+      {% block main %}
+      {% endblock main %}
+    </main>
+  </body>
+  <script>
   function padnavbar() {
     const navbar = document.querySelector('.navbar.fixed-top');
     if (navbar) {
@@ -73,20 +90,16 @@
   }
   window.addEventListener('load', padnavbar);
   window.addEventListener('resize', padnavbar);
-</script>
-
-<script src="https://code.jquery.com/jquery-4.0.0.slim.min.js"
-  integrity="sha256-8DGpv13HIm+5iDNWw1XqxgFB4mj+yOKFNb+tHBZOowc="
-  crossorigin="anonymous">
-</script>
-<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"
-  integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"
-  crossorigin="anonymous">
-</script>
-
-{# Plausible analytics #}
-<script defer data-domain="translations.python.org" src="https://analytics.python.org/js/script.outbound-links.js"></script>
-<script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
-{% block extrascript %}
-{% endblock %}
+  </script>
+  <script src="https://code.jquery.com/jquery-4.0.0.slim.min.js" integrity="sha256-8DGpv13HIm+5iDNWw1XqxgFB4mj+yOKFNb+tHBZOowc=" crossorigin="anonymous">
+  </script>
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous">
+  </script>
+  {# Plausible analytics #}
+  <script defer
+          data-domain="translations.python.org"
+          src="https://analytics.python.org/js/script.outbound-links.js"></script>
+  <script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
+  {% block extrascript %}
+  {% endblock extrascript %}
 </html>
diff --git a/templates/build-details.html.jinja b/templates/build-details.html.jinja
index 02c7c637a..93e9f6298 100644
--- a/templates/build-details.html.jinja
+++ b/templates/build-details.html.jinja
@@ -1,43 +1,43 @@
 {% extends "base.html.jinja" %}
-
 {% block main %}
-<table>
-  <thead>
-    <tr>
-      <th>language</th>
-      <th>branch</th>
-      <th>last updated</th>
-      <th>build warnings*</th>
-      <th>lint failures</th>
-    </tr>
-  </thead>
-  <tbody>
-    {% for project, metadata in build_details | sort(attribute='0.completion') | reverse %}
-      {% if project.repository %}
-        <tr>
-          <td data-label="language">{{ project.language.name }} ({{ project.language.code }})</td>
-          <td data-label="branch">{{ project.branch }}</td>
-          <td data-label="updated">{{ metadata[2].strftime('%Y/%m/%d %T') if metadata[2] else '' }}</td>
-          <td data-label="warnings">
-            {% if project.completion %}
-              <a href="warnings-{{ project.language.code }}.txt">{{ metadata[0] }}</a>
-            {% else %}
-              {{ metadata[0] }}
-            {% endif %}
-          </td>
-          <td data-label="lint">
-            {% if project.completion %}
-              <a href="warnings-lint-{{ project.language.code }}.txt">{{ metadata[1] }}</a>
-            {% else %}
-              {{ metadata[1] }}
-            {% endif %}
-          </td>
-        </tr>
-      {% endif %}
-    {% endfor %}
-  </tbody>
-</table>
-
-<p>* number of Sphinx build process warnings</p>
-<p>Last updated at {{ generation_time.strftime('%A, %-d %B %Y, %-H:%M:%S %Z') }} (in {{ duration // 60 }}:{{ "{:02}".format(duration % 60) }} minutes).</p>
-{% endblock %}
+  <table>
+    <thead>
+      <tr>
+        <th>language</th>
+        <th>branch</th>
+        <th>last updated</th>
+        <th>build warnings*</th>
+        <th>lint failures</th>
+      </tr>
+    </thead>
+    <tbody>
+      {% for project, metadata in build_details | sort(attribute='0.completion') | reverse %}
+        {% if project.repository %}
+          <tr>
+            <td data-label="language">{{ project.language.name }} ({{ project.language.code }})</td>
+            <td data-label="branch">{{ project.branch }}</td>
+            <td data-label="updated">{{ metadata[2].strftime("%Y/%m/%d %T") if metadata[2] else '' }}</td>
+            <td data-label="warnings">
+              {% if project.completion %}
+                <a href="warnings-{{ project.language.code }}.txt">{{ metadata[0] }}</a>
+              {% else %}
+                {{ metadata[0] }}
+              {% endif %}
+            </td>
+            <td data-label="lint">
+              {% if project.completion %}
+                <a href="warnings-lint-{{ project.language.code }}.txt">{{ metadata[1] }}</a>
+              {% else %}
+                {{ metadata[1] }}
+              {% endif %}
+            </td>
+          </tr>
+        {% endif %}
+      {% endfor %}
+    </tbody>
+  </table>
+  <p>* number of Sphinx build process warnings</p>
+  <p>
+    Last updated at {{ generation_time.strftime("%A, %-d %B %Y, %-H:%M:%S %Z") }} (in {{ duration // 60 }}:{{ "{:02}".format(duration % 60) }} minutes).
+  </p>
+{% endblock main %}
diff --git a/templates/index.html.jinja b/templates/index.html.jinja
index 790318006..cb5ae1bd7 100644
--- a/templates/index.html.jinja
+++ b/templates/index.html.jinja
@@ -1,51 +1,51 @@
 {% extends "base.html.jinja" %}
-
 {% block main %}
-<div>
-  <div class="row">
-    {% for project in completion_progress | sort(attribute='core_completion,completion') | reverse %}
-      <div class="col-12 col-sm-6 col-md-4 d-flex">
-        <div id="{{ project.language.code }}" class="card shadow mb-3 w-100">
-          <div class="card-body">
-            <h3 class="card-title"><a href="#{{ project.language.code }}">{{ project.language.name }}</a></h3>
-            <h5 class="card-subtitle mb-2 text-muted">{{ project.translated_name }}</h5>
-
-            <ul class="links-row">
-              {% if project.built %}
-              <li>
-                <a href="https://docs.python.org/{{ project.language.code }}/3/" aria-label="View {{ project.language.name }} documentation"
-                   style="color: #1178cc;">View</a>
-              </li>
-              {% endif %}
-              <li>
-                <a href="{{ project.contribution_link }}" style="color: #1178cc;" aria-label="Contribute to {{ project.language.name }} translation">
-                  Contribute
-                </a>
-              </li>
-            </ul>
-            {# core progress bar #}
-            {% with width=project.core_completion, change=project.core_change, kind='core' %}
-            {% include 'progress_bar.html.jinja' %}
-            {% endwith %}
-            {# overall progress bar #}
-            {% with width=project.completion, change=project.change, kind='overall', extra_container_class='mt-1' %}
-            {% include 'progress_bar.html.jinja' %}
-            {% endwith %}
+  <div>
+    <div class="row">
+      {% for project in completion_progress | sort(attribute='core_completion,completion') | reverse %}
+        <div class="col-12 col-sm-6 col-md-4 d-flex">
+          <div id="{{ project.language.code }}" class="card shadow mb-3 w-100">
+            <div class="card-body">
+              <h3 class="card-title">
+                <a href="#{{ project.language.code }}">{{ project.language.name }}</a>
+              </h3>
+              <h5 class="card-subtitle mb-2 text-muted">{{ project.translated_name }}</h5>
+              <ul class="links-row">
+                {% if project.built %}
+                  <li>
+                    <a href="https://docs.python.org/{{ project.language.code }}/3/"
+                       aria-label="View {{ project.language.name }} documentation">View</a>
+                  </li>
+                {% endif %}
+                <li>
+                  <a href="{{ project.contribution_link }}"
+                     aria-label="Contribute to {{ project.language.name }} translation">Contribute</a>
+                </li>
+              </ul>
+              {# core progress bar #}
+              {% with width=project.core_completion, change=project.core_change, kind="core" %}
+                {% include "progress_bar.html.jinja" %}
+              {% endwith %}
+              {# overall progress bar #}
+              {% with width=project.completion, change=project.change, kind="overall", extra_container_class="mt-1" %}
+                {% include "progress_bar.html.jinja" %}
+              {% endwith %}
+            </div>
           </div>
         </div>
-      </div>
-    {% endfor %}
+      {% endfor %}
+    </div>
   </div>
-</div>
-
-<p style="text-align: center;">
-  Last updated {{ generation_time.strftime('on %A %-d %B %Y at %-H:%M:%S %Z') }} (in {{ duration // 60 }} minutes and {{ duration % 60 }} seconds).<br/>
-  You can find the scripts used to generate this website <a href="https://github.com/python-docs-translations/dashboard/">on GitHub</a>.<br/>
-  You can download the data on this page in <a href="https://raw.githubusercontent.com/python-docs-translations/dashboard/refs/heads/gh-pages/index.json">JSON format</a>.
-</p>
-{% endblock %}
+  <p class="text-center">
+    Last updated {{ generation_time.strftime("on %A %-d %B %Y at %-H:%M:%S %Z") }} (in {{ duration // 60 }} minutes and {{ duration % 60 }} seconds).
+    <br />
+    You can find the scripts used to generate this website <a href="https://github.com/python-docs-translations/dashboard/">on GitHub</a>.
+    <br />
+    You can download the data on this page in <a href="https://raw.githubusercontent.com/python-docs-translations/dashboard/refs/heads/gh-pages/index.json">JSON format</a>.
+  </p>
+{% endblock main %}
 {% block extrascript %}
-<script>
+  <script>
   function updateProgressBarVisibility() {
     document.querySelectorAll('.main-bar').forEach(progressBar => {
       const barWithOverflowWidth = progressBar.scrollWidth;
@@ -62,5 +62,5 @@
   updateProgressBarVisibility();
 
   window.addEventListener('resize', updateProgressBarVisibility);
-</script>
-{% endblock %}
+  </script>
+{% endblock extrascript %}
diff --git a/templates/progress_bar.html.jinja b/templates/progress_bar.html.jinja
index a24a2e96d..19b94d799 100644
--- a/templates/progress_bar.html.jinja
+++ b/templates/progress_bar.html.jinja
@@ -4,17 +4,20 @@
    - change: numeric change value (same units as width) or falsy
 #}
 <div class="progress {{ extra_container_class }}">
-  <div class="progress-bar main-bar" style="width: {{ width }}%;
-    {% if change and width %}
-      {# compute the relative change percentage safely #}
-      {% set rel = (change * 100 / width) %}
-      background: linear-gradient(to left, #94cf96 {{ rel }}%, #4caf50 {{ rel }}%);
-    {% else %}
-      background-color: #4caf50;
-    {% endif %}">
-    {{ kind }}: {{ '{:.2f}%'.format(width) }} {% if change >= 0.01 %}({{ '{:+.2f}%'.format(change) }}){% endif %}
+  <div class="progress-bar main-bar"
+       style="width: {{ width }}%;
+              {%- if change and width -%} {# compute the relative change percentage safely #} {%- set rel = (change * 100 / width) -%} background: linear-gradient(to left, #94cf96 {{ rel }}%, #4caf50 {{ rel }}%);
+              {%- else -%} background-color: #4caf50;
+              {%- endif -%}">
+    {{ kind }}: {{ '{:.2f}%'.format(width) }}
+    {% if change >= 0.01 %}
+      ({{ '{:+.2f}%'.format(change) }})
+    {% endif %}
   </div>
   <div class="progress-bar outer-label">
-    {{ kind }}: {{ '{:.2f}%'.format(width) }} {% if change >= 0.01 %}({{ '{:+.2f}%'.format(change) }}){% endif %}
+    {{ kind }}: {{ '{:.2f}%'.format(width) }}
+    {% if change >= 0.01 %}
+      ({{ '{:+.2f}%'.format(change) }})
+    {% endif %}
   </div>
 </div>
