diff --git a/.github/workflows/update.yml b/.github/workflows/update.yml
index dbe47d6f2..302a684ad 100644
--- a/.github/workflows/update.yml
+++ b/.github/workflows/update.yml
@@ -21,7 +21,6 @@ jobs:
       - run: sudo apt-get install -y gettext
       - run: pip install -r requirements.txt
       - run: uv run generate.py  # generates index.html and index.json
-      - run: mkdir -p build && cp index.* style.css build
       - name: Deploy 🚀
         if: github.event_name != 'pull_request'
         uses: JamesIves/github-pages-deploy-action@v4
@@ -55,10 +54,9 @@ jobs:
         if: github.event_name == 'pull_request'
         run: |
           curl -Lo index.html-public https://github.com/python-docs-translations/dashboard/raw/refs/heads/gh-pages/index.html
-          diff --color=always -u index.html-public index.html || :
-          cat index.html
+          diff --color=always -u index.html-public build/index.html || :
+          cat build/index.html
       - run: uv run generate_metadata.py  # generates metadata.html
-      - run: cp metadata.html warnings* build
       - name: Deploy metadata view 🚀
         if: github.event_name != 'pull_request'
         uses: JamesIves/github-pages-deploy-action@v4
diff --git a/build_status.py b/build_status.py
index fdc2323a4..f266b98d3 100644
--- a/build_status.py
+++ b/build_status.py
@@ -1,8 +1,7 @@
 """
-Fetch build status of languages in the https://docs.python.org.
+Fetch translated names of languages.
 
-Yield a tuple of language code and a Boolean indicating
-whether it is in the language switcher.
+Yield a tuple of language code and a string with the translated name.
 """
 
 import tomllib
@@ -11,7 +10,7 @@
 from urllib3 import PoolManager
 
 
-def get_languages(http: PoolManager) -> Iterator[tuple[str, bool]]:
+def get_languages(http: PoolManager) -> Iterator[tuple[str, str]]:
     data = http.request(
         'GET',
         'https://raw.githubusercontent.com/python/docsbuild-scripts/refs/heads/main/config.toml',
@@ -19,18 +18,5 @@ def get_languages(http: PoolManager) -> Iterator[tuple[str, bool]]:
     config = tomllib.loads(data.decode())
     for code, language in config['languages'].items():
         language_code = code.lower().replace('_', '-')
-        in_switcher = language.get('in_prod', config['defaults']['in_prod'])
-        yield language_code, in_switcher
-
-
-def main() -> None:
-    languages = {
-        language: in_switcher for language, in_switcher in get_languages(PoolManager())
-    }
-    print(languages)
-    for code in ('en', 'pl', 'ar', 'zh-cn', 'id'):
-        print(f'{code}: {code in languages} {languages.get(code)}')
-
-
-if __name__ == '__main__':
-    main()
+        translated_name = language.get('translated_name')
+        yield language_code, translated_name
diff --git a/build_warnings.py b/build_warnings.py
index d26a518e4..87761036e 100644
--- a/build_warnings.py
+++ b/build_warnings.py
@@ -33,5 +33,5 @@ def number(clones_dir: str, repo: str, language_code: str) -> int:
             f'./sphinxbuild/{language_code}',  # outputdir
         )
     )
-    copyfile(warning_file, f'warnings-{language_code}.txt')
+    copyfile(warning_file, f'build/warnings-{language_code}.txt')
     return len(findall('ERROR|WARNING', Path(warning_file).read_text()))
diff --git a/generate.py b/generate.py
index 5df32e98a..ed1c2fad5 100644
--- a/generate.py
+++ b/generate.py
@@ -9,7 +9,7 @@
 from pathlib import Path
 
 from git import Repo
-from jinja2 import Template
+from jinja2 import Environment, FileSystemLoader
 from urllib3 import PoolManager
 
 import build_status
@@ -37,7 +37,11 @@ def get_completion_progress() -> Iterator['LanguageProjectData']:
     )
     subprocess.run(['make', '-C', cpython_dir / 'Doc', 'venv'], check=True)
     subprocess.run(['make', '-C', cpython_dir / 'Doc', 'gettext'], check=True)
-    languages_built = dict(build_status.get_languages(PoolManager()))
+
+    languages_built: dict[str, str] = {
+        language: translated_name
+        for language, translated_name in build_status.get_languages(PoolManager())
+    }
 
     with concurrent.futures.ThreadPoolExecutor() as executor:
         return executor.map(
@@ -51,7 +55,7 @@ def get_completion_progress() -> Iterator['LanguageProjectData']:
 def get_project_data(
     language: Language,
     repo: str | None,
-    languages_built: dict[str, bool],
+    languages_built: dict[str, str],
     clones_dir: str,
 ) -> 'LanguageProjectData':
     built = language.code in languages_built
@@ -62,6 +66,7 @@ def get_project_data(
         translators_data = TranslatorsData(0, False)
         change = 0.0
         branch = ''
+
     return LanguageProjectData(
         language,
         repo,
@@ -70,7 +75,7 @@ def get_project_data(
         change,
         translators_data,
         built,
-        in_switcher=languages_built.get(language.code),
+        translated_name=languages_built.get(language.code, ''),
         uses_platform=language.code in contribute.pulling_from_transifex,
         contribution_link=contribute.get_contrib_link(language.code, repo),
     )
@@ -85,7 +90,7 @@ class LanguageProjectData:
     change: float
     translators: TranslatorsData
     built: bool
-    in_switcher: bool | None
+    translated_name: str
     uses_platform: bool
     contribution_link: str | None
 
@@ -93,16 +98,22 @@ class LanguageProjectData:
 if __name__ == '__main__':
     logging.basicConfig(level=logging.INFO)
     logging.info(f'starting at {generation_time}')
-    template = Template(Path('template.html.jinja').read_text())
+    Path('build').mkdir(parents=True, exist_ok=True)
 
-    output = template.render(
-        completion_progress=(completion_progress := list(get_completion_progress())),
+    completion_progress = list(get_completion_progress())
+    counts = get_counts(Path('clones', 'cpython', 'Doc', 'build', 'gettext'))
+
+    env = Environment(loader=FileSystemLoader('templates'))
+    index = env.get_template('index.html.jinja').render(
+        completion_progress=completion_progress,
         generation_time=generation_time,
         duration=(datetime.now(timezone.utc) - generation_time).seconds,
-        counts=get_counts(Path('clones', 'cpython', 'Doc', 'build', 'gettext')),
     )
 
-    Path('index.html').write_text(output)
-    Path('index.json').write_text(
-        json.dumps(completion_progress, indent=2, default=asdict)
+    Path('build/style.css').write_bytes(Path('src/style.css').read_bytes())
+    Path('build/logo.png').write_bytes(Path('src/logo.png').read_bytes())
+    Path('build/index.html').write_text(index)
+
+    Path('build/index.json').write_text(
+        json.dumps([asdict(project) for project in completion_progress], indent=2)
     )
diff --git a/generate_metadata.py b/generate_metadata.py
index 1c0f534a8..dbceee294 100644
--- a/generate_metadata.py
+++ b/generate_metadata.py
@@ -9,7 +9,7 @@
 
 import dacite
 from git import Repo
-from jinja2 import Template
+from jinja2 import Environment, FileSystemLoader
 from urllib3 import request
 
 import build_warnings
@@ -55,9 +55,9 @@ def get_language_repo_and_completion(
 if __name__ == '__main__':
     logging.basicConfig(level=logging.INFO)
     logging.info(f'starting at {generation_time}')
-    template = Template(Path('metadata.html.jinja').read_text())
-    if (index_path := Path('index.json')).exists():
-        index_json = loads(Path('index.json').read_text())
+    env = Environment(loader=FileSystemLoader('templates'))
+    if (index_path := Path('build/index.json')).exists():
+        index_json = loads(Path('build/index.json').read_text())
     else:
         index_json = request('GET', argv[1]).json()
 
@@ -65,10 +65,10 @@ def get_language_repo_and_completion(
         dacite.from_dict(LanguageProjectData, project) for project in index_json
     ]
 
-    output = template.render(
+    output = env.get_template('metadata.html.jinja').render(
         metadata=zip(completion_progress, get_projects_metadata(completion_progress)),
         generation_time=generation_time,
         duration=(datetime.now(timezone.utc) - generation_time).seconds,
     )
 
-    Path('metadata.html').write_text(output)
+    Path('build/metadata.html').write_text(output)
diff --git a/src/logo.png b/src/logo.png
new file mode 100644
index 000000000..cc4111478
Binary files /dev/null and b/src/logo.png differ
diff --git a/src/style.css b/src/style.css
new file mode 100644
index 000000000..dc642e2f6
--- /dev/null
+++ b/src/style.css
@@ -0,0 +1,121 @@
+/* ---------------------------- Global Styles ------------------------------- */
+
+body {
+  padding-top: 4.5rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-bottom: 3rem;
+  color: #5a5a5a;
+  background-color: rgb(245, 245, 245);
+}
+
+a {
+  color: #0d0d0d;
+}
+
+a:hover {
+  color: #1595fe;
+}
+
+/* -------------------------------- navbar ---------------------------------- */
+
+.navbar {
+  background-color: rgb(245, 245, 245, 0.6);
+  backdrop-filter: blur(10px);
+  border-bottom: 0.25px solid #999;
+  -webkit-backdrop-filter: blur(10px);
+}
+
+.navbar li {
+  transition: 0.3s background-color;
+  text-align: center;
+  background-color: transparent;
+  padding: 0rem 1rem;
+  text-decoration: none;
+  border-radius: 0.3rem;
+}
+
+.navbar li:hover {
+  background-color: #d0cccd;
+}
+
+.navbar li .nav-link {
+  color: #0d0d0d;
+}
+
+/* ----------------------- Cards and card columns --------------------------- */
+
+.row > [class^="col-"] {
+  display: flex;
+}
+
+.card {
+  flex: 1;
+}
+
+/* ------------------------------ Index ------------------------------------- */
+
+.progress-bar-container {
+  border-radius: 4px;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  height: 20px;
+  overflow: hidden;
+  position: relative;
+}
+
+.progress-bar-index {
+  display: inline-block;
+  color: white;
+  height: 100%;
+  line-height: 20px;
+  border-top-left-radius: 3px;
+  border-bottom-left-radius: 3px;
+}
+
+/* ------------------------------ Metadata ---------------------------------- */
+
+table {
+  border-collapse: collapse;
+}
+th, td {
+  border: 1px solid #ddd;
+  padding: 8px 12px;
+  text-align: left;
+  white-space: nowrap;
+}
+th {
+  background-color: #d6d6d6;
+}
+hr {
+  color: #f4f4f4;
+}
+td[data-label="warnings"], td[data-label="lint"] {
+  text-align: right;
+}
+
+@media screen and (max-width: 600px) {
+  table, thead, tbody, th, td, tr {
+    display: block;
+  }
+  th {
+    position: absolute;
+    top: -9999px;
+    left: -9999px;
+  }
+  tr {
+    border: 1px solid #ccc;
+    margin-bottom: 5px;
+  }
+  td {
+    border: none;
+    border-bottom: 1px solid #eee;
+    padding-left: 50%;
+    position: relative;
+  }
+  td:before {
+    content: attr(data-label);
+    font-weight: bold;
+    left: 10px;
+    position: absolute;
+  }
+}
diff --git a/style.css b/style.css
deleted file mode 100644
index 866b7454d..000000000
--- a/style.css
+++ /dev/null
@@ -1,94 +0,0 @@
-body {
-  font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
-}
-table {
-  border-collapse: collapse;
-}
-th, td {
-  border: 1px solid #ddd;
-  padding: 8px 12px;
-  text-align: left;
-  white-space: nowrap;
-}
-th {
-  background-color: #f4f4f4;
-}
-hr {
-  color: #f4f4f4;
-}
-.progress-bar {
-  display: inline-block;
-  color: white;
-  height: 20px;
-  line-height: 20px;
-  text-align: center;
-  overflow: hidden;
-  white-space: nowrap;
-  box-sizing: border-box;
-}
-.progress-bar-outer-label {
-  display: none;
-  padding-left: .5em;
-  height: 20px;
-  line-height: 20px;
-  overflow: hidden;
-}
-.progress-bar.low {
-  color: transparent;
-  user-select: none;
-}
-.progress-bar.low + .progress-bar-outer-label {
-  display: inline-block;
-}
-td[data-label="translators"], td[data-label="warnings"], td[data-label="lint"] {
-  text-align: right;
-}
-td[data-label="completion"] {
-  width: 100%;
-  line-height: 0;
-}
-.switchpages{
-    position: absolute;
-    top: 10px;
-    right: 10px;
- }
-
-@media screen and (max-width: 675px) {
-  .switchpages{
-    all: unset;
- }
-}
-
-@media screen and (max-width: 600px) {
-  table, thead, tbody, th, td, tr {
-    display: block;
-  }
-  th {
-    position: absolute;
-    top: -9999px;
-    left: -9999px;
-  }
-  tr {
-    border: 1px solid #ccc;
-    margin-bottom: 5px;
-  }
-  td {
-    border: none;
-    border-bottom: 1px solid #eee;
-    padding-left: 50%;
-    position: relative;
-  }
-  td:before {
-    content: attr(data-label);
-    font-weight: bold;
-    left: 10px;
-    position: absolute;
-  }
-  td[data-label="completion"] {
-    width: inherit;
-  }
-  .progress-bar {
-    min-width: 0;
-    width: 100% !important;
-  }
-}
diff --git a/template.html.jinja b/template.html.jinja
deleted file mode 100644
index f19b4e166..000000000
--- a/template.html.jinja
+++ /dev/null
@@ -1,88 +0,0 @@
-<html lang="en">
-<head>
-  <title>Python Docs Translation Dashboard</title>
-  <link rel="stylesheet" href="style.css">
-  <meta charset="UTF-8">
-  <meta name="description" content="Python Docs Translation Dashboard">
-  <base target="_blank">
-</head>
-<body>
-<h1>Python Docs Translation Dashboard</h1>
-<nav class="switchpages">
-main | <a href="metadata.html" target="_self">meta</a>
-</nav>
-<table>
-<thead>
-<tr>
-  <th>language</th>
-  <th>switcher</th>
-  <th>translators</th>
-  <th>completion*</th>
-</tr>
-</thead>
-<tbody>
-{% for project in completion_progress | sort(attribute='completion,translators.number') | reverse %}
-<tr>
-  <td data-label="language">
-    {% if project.contribution_link %}
-      <a href="{{ project.contribution_link }}">{{ project.language.name }} ({{ project.language.code }})</a>
-    {% else %}
-      {{ project.language.name }} ({{ project.language.code }})
-    {% endif %}
-  </td>
-  <td data-label="build">
-    {% if project.in_switcher %}
-      <a href="https://docs.python.org/{{ project.language.code }}/">✓</a>
-    {% elif project.built %}
-      <a href="https://docs.python.org/{{ project.language.code }}/">✗</a>
-    {% endif %}
-  </td>
-  <td data-label="translators">
-    {% if project.translators.link %}<a href="{{ project.translators.link }}">{% endif %}
-    {{ project.translators.number }}
-    {% if project.translators.link %}</a>{% endif %}
-  </td>
-  <td data-label="completion">
-    <div class="progress-bar"
-         style="width: {{ project.completion }}%;{% if project.change %}background: linear-gradient(to left, #94cf96 {{ project.change * 100 / project.completion }}%, #4caf50 {{ project.change * 100 / project.completion }}%);{% else %}background-color: #4caf50;{% endif %}"
-    >
-        {{ '{:.2f}%'.format(project.completion) }} {% if project.change >= 0.01 %}({{ '{:+.2f}%'.format(project.change) }}){% endif %}
-    </div>
-    <div class="progress-bar-outer-label">
-        {{ '{:.2f}%'.format(project.completion) }} {% if project.change >= 0.01 %}({{ '{:+.2f}%'.format(project.change) }}){% endif %}
-    </div>
-  </td>
-</tr>
-{% endfor %}
-</tbody>
-</table>
-<p>* the number in parentheses shows change in the last 30 days, included in the total completion</p>
-<p>
-Currently being translated into {{ completion_progress|length }} languages.
-The documentation has a total string count of {{ '{:,}'.format(counts[0]) }} ({{ '{:,}'.format(counts[1]) }} words).
-For more information about translations, see the <a href="https://devguide.python.org/documentation/translating/">Python Developer’s Guide</a>.
-</p>
-<hr>
-<p>You can download the data on this page in <a href="https://github.com/python-docs-translations/dashboard/blob/gh-pages/index.json">JSON format</a>.</p>
-<p>You can also find the scripts used to generate these pages <a href="https://github.com/python-docs-translations/dashboard">here</a>.</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>
-</body>
-<script>
-  function updateProgressBarVisibility() {
-    document.querySelectorAll('.progress-bar').forEach(progressBar => {
-      const barWithOverflowWidth = progressBar.scrollWidth;
-      const barWidth = progressBar.clientWidth;
-
-      if (barWidth < barWithOverflowWidth) {
-        progressBar.classList.add('low');
-      } else {
-        progressBar.classList.remove('low');
-      }
-    });
-  }
-
-  updateProgressBarVisibility();
-
-  window.addEventListener('resize', updateProgressBarVisibility);
-</script>
-</html>
diff --git a/templates/base.html.jinja b/templates/base.html.jinja
new file mode 100644
index 000000000..538fc19c3
--- /dev/null
+++ b/templates/base.html.jinja
@@ -0,0 +1,69 @@
+<!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://maxcdn.bootstrapcdn.com/bootstrap/4.2.0/css/bootstrap.min.css" rel="stylesheet">
+  <link href="style.css" rel="stylesheet">
+</head>
+
+<body>
+  <header>
+    <nav class="navbar navbar-expand-md fixed-top">
+
+      <div class="navbar-brand">
+        <a href="./" style="all: unset; cursor: pointer;">
+          <img src="logo.png" style="height: 2rem;" alt="">
+          <span style="font-size: 1.25rem; font-weight: bold;">Translation Dashboard</span>
+        </a>
+      </div>
+
+      <div class="navbar-light bg-light">
+        <button class="navbar-toggler" type="button" data-toggle="collapse" data-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="metadata.html">Metadata</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="https://devguide.python.org/documentation/translations/translating/">🔗 Translating</a>
+          </li>
+        </ul>
+      </div>
+    </nav>
+  </header>
+
+  <main role="main">
+    {% block main %}
+    {% endblock %}
+  </main>
+
+</body>
+
+<script>
+  function padnavbar() {
+    const navbar = document.querySelector('.navbar.fixed-top');
+    if (navbar) {
+      document.body.style.paddingTop = (navbar.offsetHeight + 10) + 'px';
+    }
+  }
+  window.addEventListener('load', padnavbar);
+  window.addEventListener('resize', padnavbar);
+</script>
+
+<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
+  integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
+  crossorigin="anonymous">
+</script>
+<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
+
+</html>
diff --git a/templates/index.html.jinja b/templates/index.html.jinja
new file mode 100644
index 000000000..24c2840a1
--- /dev/null
+++ b/templates/index.html.jinja
@@ -0,0 +1,48 @@
+{% extends "base.html.jinja" %}
+
+{% block main %}
+    <div>
+      <div class="row">
+        {% for project in completion_progress | sort(attribute='completion,translators.number') | reverse %}
+          <div class="col-12 col-sm-6 col-md-4 d-flex">
+            <div class="card shadow mb-3 w-100">
+              <div class="card-body">
+                <h4 class="card-title">{{ project.language.name }}</h4>
+                <h5 class="card-subtitle text-muted">{{ project.translated_name }}</h5>
+                <p class="card-subtitle mb-2">Completion: <strong>{{ '{:.2f}%'.format(project.completion) }}</strong></p>
+                <p class="card-subtitle mb-2 text-muted">30 days progress: {{ '{:.2f}%'.format(project.change) }}</p>
+                <p style="text-align: center;">
+                  {% if project.built %}
+                    <a href="https://docs.python.org/{{ project.language.code }}/3/" style="color: #1595fe;">View</a>
+                    •
+                  {% endif %}
+                  {% if project.contribution_link %}
+                    <a href="{{ project.contribution_link }}" style="color: #1595fe;">Contribute</a>
+                  {% elif project.uses_platform %}
+                    <a href="https://app.transifex.com/join/?o=python-doc&p=python-newest&t=opensource" style="color: #1595fe;">Contribute</a>
+                  {% else %}
+                    <a href="https://devguide.python.org/documentation/translations/translating/" style="color: #1595fe;">Contribute</a>
+                  {% endif %}
+                </p>
+                <div class="progress-bar-container">
+                  <div class="progress-bar-index" style="width: {{ project.completion }}%;
+                    {% if project.change %}
+                      background: linear-gradient(to left, #94cf96 {{ project.change * 100 / project.completion }}%, #4caf50 {{ project.change * 100 / project.completion }}%);
+                    {% else %}
+                      background-color: #4caf50;
+                    {% endif %}">
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        {% endfor %}
+      </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 %}
diff --git a/metadata.html.jinja b/templates/metadata.html.jinja
similarity index 77%
rename from metadata.html.jinja
rename to templates/metadata.html.jinja
index a23b40f86..9633586ec 100644
--- a/metadata.html.jinja
+++ b/templates/metadata.html.jinja
@@ -1,15 +1,6 @@
-<html lang="en">
-<head>
-  <title>Python Docs Translation Dashboard</title>
-  <link rel="stylesheet" href="style.css">
-  <meta charset="UTF-8">
-  <base target="_blank">
-</head>
-<body>
-<h1>Python Docs Translation Dashboard</h1>
-<nav class="switchpages">
-<a href="index.html" target="_self">main</a> | meta
-</nav>
+{% extends "base.html.jinja" %}
+
+{% block main %}
 <table>
 <thead>
 <tr>
@@ -38,5 +29,4 @@
 </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>
-</body>
-</html>
+{% endblock %}