diff --git a/web/static/css/app.css b/web/static/css/app.css
index 08cfd28a3..389b1f14a 100644
--- a/web/static/css/app.css
+++ b/web/static/css/app.css
@@ -1,7 +1,69 @@
-@import url("https://fonts.googleapis.com/css?family=Raleway:300,400,600");
+:root {
+  --ct-primary: #304ffe;
+  --ct-primary-hover: #1a2fff;
+  --ct-accent: #fdd835;
+  --ct-bg: #ffffff;
+  --ct-bg-subtle: #f8f9fa;
+  --ct-text: #1a1a1a;
+  --ct-text-muted: #5c636a;
+  --ct-border: rgba(0, 0, 0, 0.08);
+  --ct-border-strong: rgba(0, 0, 0, 0.125);
+  --ct-code-bg: #f6f8fb;
+  --ct-code-border: rgba(0, 0, 0, 0.18);
+  --ct-note-bg: #fffbeb;
+  --ct-note-accent: #a67c00;
+  --ct-note-label: #6b5000;
+  --ct-radius-sm: 0.375rem;
+  --ct-radius: 0.5rem;
+  --ct-radius-lg: 0.75rem;
+  --ct-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.04);
+  --ct-shadow-hover: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.08);
+  --ct-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
+  --ct-font-mono: "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  --jumbotron-padding-y: 3rem;
+}
+
+* {
+  font-family: var(--ct-font-sans);
+}
+
+body {
+  color: var(--ct-text);
+  background-color: var(--ct-bg);
+  line-height: 1.7;
+}
 
 a {
-  color: #304ffe;
+  color: var(--ct-primary);
+  text-decoration: none;
+}
+
+/* Off-screen until focused, so keyboard users can jump the navigation. */
+.skip-link {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1080;
+  padding: 0.75rem 1.25rem;
+  background-color: var(--ct-bg);
+  color: var(--ct-primary);
+  border: 2px solid var(--ct-primary);
+  border-radius: 0 0 var(--ct-radius) 0;
+  font-weight: 600;
+  transform: translateY(-120%);
+}
+
+.skip-link:focus {
+  transform: translateY(0);
+}
+
+#main-content:focus {
+  outline: none;
+}
+
+a:hover {
+  color: var(--ct-primary-hover);
+  text-decoration: underline;
 }
 
 .navbar-nav {
@@ -49,10 +111,11 @@ a {
 }
 
 .jumbotron {
-  padding-top: var(--jumbotron-padding-y);
-  padding-bottom: var(--jumbotron-padding-y);
+  padding-top: calc(var(--jumbotron-padding-y) * 1.5);
+  padding-bottom: calc(var(--jumbotron-padding-y) * 1.5);
   margin-bottom: 0;
-  background-color: #fff;
+  background: radial-gradient(circle at top, #ffffff 0%, #f8f9ff 100%);
+  border-bottom: 1px solid var(--ct-border);
 }
 
 @media (min-width: 767px) {
@@ -63,11 +126,21 @@ a {
 }
 
 .jumbotron .container {
-  max-width: 60rem;
+  max-width: 64rem;
 }
 
 .jumbotron .container h1 {
-  font-size: 3.5rem;
+  font-size: clamp(2.5rem, 5vw, 4rem);
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  line-height: 1.1;
+}
+
+.jumbotron .lead {
+  color: var(--ct-text-muted);
+  font-size: clamp(1.05rem, 2.5vw, 1.25rem);
+  line-height: 1.6;
+  margin-top: 1.25rem;
 }
 
 .jumbotron p:last-child {
@@ -75,12 +148,15 @@ a {
 }
 
 .bg-blue {
-  background-color: #304ffe;
+  background-color: var(--ct-primary);
 }
 
 .card-header {
-  background: #fdd835;
+  background: var(--ct-accent);
   color: #000;
+  border-bottom: 0;
+  font-weight: 600;
+  letter-spacing: -0.01em;
 }
 
 #contribution-alert {
@@ -116,9 +192,65 @@ footer p {
   font-weight: bold;
 }
 
+.album {
+  background-color: var(--ct-bg-subtle);
+}
+
+.nav-tabs {
+  border-bottom: 1px solid var(--ct-border);
+}
+
+.nav-tabs .nav-link {
+  color: var(--ct-text-muted);
+  border: 0;
+  border-bottom: 2px solid transparent;
+  padding: 0.75rem 1rem;
+  font-weight: 500;
+  transition: color 150ms ease, border-color 150ms ease;
+}
+
+.nav-tabs .nav-link:hover {
+  color: var(--ct-text);
+  border-bottom-color: var(--ct-border);
+}
+
+.nav-tabs .nav-link.active {
+  color: var(--ct-primary);
+  border-bottom-color: var(--ct-primary);
+  background-color: transparent;
+}
+
+.category-header {
+  font-weight: 700;
+  letter-spacing: -0.015em;
+  color: var(--ct-text);
+}
+
+.ct-card {
+  border: 1px solid var(--ct-border);
+  border-radius: var(--ct-radius-lg);
+  box-shadow: var(--ct-shadow);
+  transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
+  overflow: hidden;
+}
+
+.ct-card:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--ct-shadow-hover);
+}
+
+.ct-card .card-header {
+  border-radius: 0;
+}
+
+.ct-card .card-body {
+  background-color: #ffffff;
+}
+
 .card-footer {
   border: 0;
-  background-color: #fff;
+  background-color: #ffffff;
+  padding: 1rem 1.5rem 1.5rem;
 }
 
 a.toTop {
@@ -130,10 +262,212 @@ a.toTop {
   color: #304ffe;
 }
 
-#start-of-row {
-  border-top-left-radius: 0.25rem;
-  border-bottom-left-radius: 0.25rem;
-  border: 1px solid rgba(0,0,0,.125);
+.ct-contribute-cell {
+  border-top-left-radius: 0.5rem;
+  border-bottom-left-radius: 0.5rem;
+  border: 1px solid var(--ct-border);
+}
+
+.ct-table-header .card {
+  border: 1px solid var(--ct-border);
+  border-radius: 0;
+  background-color: #ffffff;
+}
+
+.ct-table-header .card:first-child {
+  border-top-left-radius: var(--ct-radius);
+  border-bottom-left-radius: var(--ct-radius);
+}
+
+.ct-table-header .card:last-child {
+  border-top-right-radius: var(--ct-radius);
+  border-bottom-right-radius: var(--ct-radius);
+}
+
+/* h3 for a correct heading outline under the h2 category headers, sized to keep
+   the compact column-header look it had as an h5. */
+.ct-table-header h3 {
+  font-size: 1rem;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+}
+
+.ct-concept-header {
+  background-color: var(--ct-bg-subtle);
+}
+
+.ct-concept-cell {
+  background-color: var(--ct-bg-subtle);
+}
+
+/* The column header only lines up with its column while the cards sit side by side.
+   Narrow screens cannot fit a comparison, so the cards wrap and stack instead. At
+   that size the header row would detach and float above unrelated cards, so it is
+   hidden and every card names its own column in its place. */
+.ct-cell-label {
+  display: none;
+  margin: 0 0 0.55rem;
+  padding-bottom: 0.4rem;
+  border-bottom: 1px solid var(--ct-border);
+  color: var(--ct-text-muted);
+  font-size: 0.75rem;
+  font-weight: 700;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+}
+
+.ct-cell-label-detail {
+  font-weight: 500;
+  letter-spacing: 0.01em;
+  text-transform: none;
+}
+
+@media (max-width: 991.98px) {
+  .ct-table-header {
+    display: none;
+  }
+
+  .ct-cell-label {
+    display: block;
+  }
+}
+
+.card-group .card .card-body .strong {
+  font-weight: 600;
+  line-height: 1.6;
+}
+
+.syntax {
+  font-family: var(--ct-font-mono);
+  font-size: 0.9375rem;
+  line-height: 1.6;
+}
+
+/* Code sample: contained in its own tinted, bordered box so it reads as code
+   rather than as loose text sitting on the card. The `syntax` class must stay on
+   this element for the Pygments token colors in pygments_colorful.css to apply. */
+.ct-code {
+  background-color: var(--ct-code-bg);
+  border: 1px solid var(--ct-code-border);
+  border-radius: var(--ct-radius-sm);
+  padding: 0.75rem 0.9rem;
+  overflow-x: auto;
+}
+
+.ct-code pre {
+  margin: 0;
+  background: transparent;
+  line-height: 1.6;
+}
+
+/* Pygments' stock "colorful" theme renders several token colors below WCAG AA
+   against a light code background. These darken the same hues just far enough to
+   clear 4.5:1. Only tokens that render as text are overridden; the theme's
+   background-only rules (.hll, .s, .w, .si) are left alone. */
+.syntax .vg {
+  color: #ac5c00;
+}
+
+.syntax .gi,
+.syntax .k,
+.syntax .kc,
+.syntax .kd,
+.syntax .kn,
+.syntax .kr {
+  color: #008300;
+}
+
+.syntax .c,
+.syntax .ch,
+.syntax .cm,
+.syntax .cpf,
+.syntax .c1,
+.syntax .go {
+  color: #707070;
+}
+
+.syntax .err,
+.syntax .gr,
+.syntax .ne {
+  color: #e30000;
+}
+
+.syntax .nl {
+  color: #8b6c00;
+}
+
+.syntax .nn {
+  color: #0d78a5;
+}
+
+.syntax .gp {
+  color: #b55508;
+}
+
+.syntax .sd {
+  color: #cb3f1f;
+}
+
+.syntax .ss {
+  color: #a26100;
+}
+
+.syntax .cp {
+  color: #527394;
+}
+
+/* Comment/note: distinguished from code by a shaded background, a left accent
+   bar, a different (sans-serif) font, and a visible label -- so the difference
+   does not rely on color alone. */
+.ct-comment {
+  background-color: var(--ct-note-bg);
+  border-left: 3px solid var(--ct-note-accent);
+  border-radius: var(--ct-radius-sm);
+  padding: 0.7rem 0.9rem;
+  color: var(--ct-text);
+  font-size: 0.9375rem;
+  line-height: 1.65;
+}
+
+.ct-comment-label {
+  display: block;
+  margin-bottom: 0.2rem;
+  color: var(--ct-note-label);
+  font-size: 0.6875rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.ct-comment-body p:last-child {
+  margin-bottom: 0;
+}
+
+.ct-comment-body code {
+  background-color: rgba(0, 0, 0, 0.05);
+  border-radius: 0.25rem;
+  padding: 0.05rem 0.25rem;
+  font-size: 0.9em;
+}
+
+.ct-comment-divider {
+  margin: 0.9rem 0 0.8rem;
+  border-top: 1px solid var(--ct-border-strong);
+}
+
+/* Shown when a concept has no code and no comment, so the reader can tell an
+   intentional gap apart from missing data. */
+.ct-placeholder {
+  margin: 0;
+  display: flex;
+  align-items: baseline;
+  gap: 0.5rem;
+  background-color: var(--ct-bg-subtle);
+  border: 1px dashed var(--ct-border-strong);
+  border-radius: var(--ct-radius-sm);
+  padding: 0.65rem 0.8rem;
+  color: var(--ct-text-muted);
+  font-size: 0.9375rem;
 }
 
 textarea {
diff --git a/web/templates/about.html b/web/templates/about.html
index de92d9531..fdb29dcc5 100644
--- a/web/templates/about.html
+++ b/web/templates/about.html
@@ -4,7 +4,7 @@
 <div class="container">
     <div class="row">
         <div class="col py-5">
-            <h2 class="py-3">About Code Thesaurus</h2>
+            <h1 class="py-3">About Code Thesaurus</h1>
             <p>Code Thesaurus is a system that allows you to compare structures of programming languages side-by-side
                 in an easy to learn way. It's a great method for learning a new programming language after you
                 already know one, or to quickly use as a cheat sheet or a reference tool. It's designed to help
@@ -43,7 +43,7 @@ <h2 class="py-3">Contributors</h2>
         <p>
             <a href="https://github.com/codethesaurus/codethesaur.us/graphs/contributors">
                 <img src="https://contrib.rocks/image?repo=codethesaurus/codethesaur.us&max=100"
-                    alt="An image showing all of the contributors to Code Thesaurus so far"
+                    alt="All contributors to Code Thesaurus so far"
                     class="img-fluid py-3" />
             </a>
             </p>
diff --git a/web/templates/base.html b/web/templates/base.html
index 7949c57ac..631e96444 100644
--- a/web/templates/base.html
+++ b/web/templates/base.html
@@ -1,4 +1,5 @@
 <!doctype html>
+{% load templatetags %}
 <html lang="en">
 <head>
     <meta charset="utf-8">
@@ -13,64 +14,57 @@
     <meta property="og:url" content="{{ request.build_absolute_uri }}" />
     <meta property="og:locale" content="en_US" />
     <meta property="og:image" content="{{request.scheme}}://{{request.META.HTTP_HOST}}/static/images/Logo-Book-Code.png" />
-    
+
     <!-- Twitter, Slack, etc. -->
     <meta name="twitter:card" content="summary_large_image">
     <meta name="twitter:site" content="@CodeThesaurus">
     <meta name="twitter:title" content="Code Thesaurus - {{ title }}">
     <meta name="twitter:description" content="{{ description }}">
     <meta name="twitter:image" content="{{request.scheme}}://{{request.META.HTTP_HOST}}/static/images/Logo-Book-Code.png">
-    <meta name="twitter:image:alt" content="Code Thesarus logo">
+    <meta name="twitter:image:alt" content="Code Thesaurus logo">
     <!-- TODO: make these show number of languages/examples? -->
-    <!--
-    <meta name="twitter:label1" content="">
-    <meta name="twitter:data1" content="">
-    <meta name="twitter:label2" content="">
-    <meta name="twitter:data2" content="">
-    -->
 
     <title>Code Thesaurus - {{ title }}</title>
 
+    <!-- Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+
     <!-- Bootstrap -->
-  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
 
-    <!-- Styles -->
-    <link rel="stylesheet" href="/static/css/app.css" />
+    <!-- Styles: app.css loads after pygments_colorful.css so project overrides win -->
     <link rel="stylesheet" href="/static/css/pygments_colorful.css" />
+    <link rel="stylesheet" href="/static/css/app.css" />
 </head>
-<body>
+<body id="top">
+<a class="skip-link" href="#main-content">Skip to main content</a>
 <header>
-    <nav class="navbar navbar-expand-lg navbar-dark bg-blue">
-        <div class="container-fluid">
+    <nav class="navbar navbar-expand-lg navbar-dark bg-blue" aria-label="Primary">
+        <div class="container">
           <a class="navbar-brand" href="/">Code Thesaurus</a>
           <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
             <span class="navbar-toggler-icon"></span>
           </button>
-          <div class="collapse navbar-collapse flex-grow-0" id="navbarSupportedContent">
-            <ul class="navbar-nav me-auto mb-2 mb-lg-0 text-end">
-              <li class="nav-item">
-                <a class="nav-link active" aria-current="page" href="/">Home</a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link" href="/about">About</a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link" href="/statistics">Statistics</a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link" href="https://docs.codethesaur.us">Docs</a>
-              </li>
+          <div class="collapse navbar-collapse" id="navbarSupportedContent">
+            <ul class="navbar-nav ms-auto mb-2 mb-lg-0 text-end">
+              {% nav_items as items %}
+              {% for item in items %}
               <li class="nav-item">
-                <a class="nav-link" href="https://docs.codethesaur.us/contributing/">Contribute</a>
+                <a class="nav-link{% if item.is_active %} active{% endif %}" href="{{ item.url }}"
+                  {% if item.is_active %}aria-current="page"{% endif %}
+                  {% if item.external %}rel="noopener"{% endif %}>{{ item.label }}</a>
               </li>
+              {% endfor %}
             </ul>
           </div>
         </div>
       </nav>
 </header>
 
-<main role="main">
+<main id="main-content" role="main">
 
 {% block content %}{% endblock %}
 
@@ -81,13 +75,13 @@
     <div class="container">
         <div class="row">
           <div class="col-8 justify-content-start">
-            <p>Made with &#x2764; by Sarah Withee and <a href="https://github.com/codethesaurus/codethesaur.us/graphs/contributors" target="_blank" rel="noreferrer"><span id="contributors"></span> contributors</a>.</p> <!-- x2764 the heart emoji code -->
+            <p>Made with &#x2764; by Sarah Withee and <a href="https://github.com/codethesaurus/codethesaur.us/graphs/contributors" target="_blank" rel="noopener noreferrer"><span id="contributors"></span> contributors</a>.</p> <!-- x2764 the heart emoji code -->
             <p>Last GitHub update: <span id="last-update"></span></p>
             <p>Want to help out? Check the project out on <a href="http://github.com/codethesaurus/" target="_blank" rel="noopener">GitHub</a>.</p>
           </div>
           <div class="col-4 order-sm-2 d-flex justify-content-end align-self-center">
               <div class="flex-column">
-                  <a class="toTop" href="#">
+                  <a class="toTop" href="#top">
                       <span class="d-flex flex-column">
                           <i class="fa fa-angle-up fa-2x align-self-center" aria-hidden="true"></i>
                           Back to top
diff --git a/web/templates/concept_card.html b/web/templates/concept_card.html
index a75726f95..89abc5edd 100644
--- a/web/templates/concept_card.html
+++ b/web/templates/concept_card.html
@@ -1,14 +1,28 @@
 {% load markdownify %}
 
-<div class="card">
+<div class="card ct-entry-card">
     <div class="card-body">
-    {% if code %}
-        <div class="syntax">{{ code | safe }}</div>
-    {% endif %}
-    {% if comment %}
-        <div>
-            {{ comment|markdownify|linebreaksbr }}
+        {% if language %}
+        <p class="ct-cell-label">
+            <span class="ct-cell-label-name">{{ language.name }}</span>
+            <span class="ct-cell-label-detail">(version {{ language.version }})</span>
+        </p>
+        {% endif %}
+        {% if placeholder %}
+        <p class="ct-placeholder">
+            <i class="fa fa-circle-o" aria-hidden="true"></i>
+            <span>{{ placeholder }}</span>
+        </p>
+        {% endif %}
+        {% if code %}
+        <div class="syntax ct-code">{{ code | safe }}</div>
+        {% endif %}
+        {% if comment %}
+        {% if code %}<div class="ct-comment-divider" aria-hidden="true"></div>{% endif %}
+        <div class="ct-comment">
+            <span class="ct-comment-label">Note</span>
+            <div class="ct-comment-body">{{ comment|markdownify|linebreaksbr }}</div>
         </div>
-    {% endif %}
+        {% endif %}
     </div>
 </div>
diff --git a/web/templates/concepts.html b/web/templates/concepts.html
index 62923ffd8..3d0c10ab6 100644
--- a/web/templates/concepts.html
+++ b/web/templates/concepts.html
@@ -8,29 +8,29 @@ <h1 class="col-12">{{ title }}</h1>
             </div>
             <div class="row col-12">
                 <p>
-                    The tables below show the syntactically highlighted
-                    {{ concept_friendly_name }} topic for the
-                    {% if languages|length > 1 %}{{ languages | length }}{% endif %}
-                    language{{ languages | length | pluralize }}.
+                    {% if languages|length > 1 %}
+                    Here you can compare <strong>{{ concept_name }}</strong> across
+                    {% for lang in languages %}{{ lang.name }} (version {{ lang.version }}){% if not forloop.last %} and {% endif %}{% endfor %},
+                    side by side.
+                    {% else %}
+                    Here you can browse <strong>{{ concept_name }}</strong> for
+                    {% for lang in languages %}{{ lang.name }} (version {{ lang.version }}){% endfor %}.
+                    {% endif %}
                 </p>
-                <br />
-                <p>
-                    If you see any incorrect information, please help us improve! Feel free to either
+                <p class="mt-3">
+                    Spot something incorrect? You can
                     <a href="https://github.com/codethesaurus/codethesaur.us/issues/new/choose" rel="noopener">
-                        create an issue
+                        open an issue
                     </a>
-                    or use the link{{ languages | length | pluralize }} at the bottom of
-                    the language column{{ languages | length | pluralize }} to correct any
-                    information.
+                    or use the "Want to add or correct" link{{ languages | length | pluralize }} at the bottom of each column.
                 </p>
                 {% for lang in languages %}
                     {% if lang.is_incomplete %}
-                    <div class="alert alert-link" role="alert">
-                        {{ lang.name }} ({{ lang.version }})'s thesaurus is incomplete. Please help us improve by
+                    <div class="alert alert-warning" role="alert">
+                        {{ lang.name }} ({{ lang.version }}) is missing some entries. Help improve it by
                         <a href="https://github.com/codethesaurus/codethesaur.us/edit/main/web/thesauruses/{{ lang.key }}/{{ lang.version }}/{{ concept }}.json" rel="noopener">
-                            adding or correcting information
-                        </a>
-                        for this language.
+                            editing this file on GitHub
+                        </a>.
                     </div>
                     {% endif %}
                 {% endfor %}
@@ -38,33 +38,35 @@ <h1 class="col-12">{{ title }}</h1>
 
 {% for category in categories %}
             <div class="row">&nbsp;</div>
-            <div class="row"><h2>{{ category.key }}</h2></div>
-            <div class="card-group">
-                <div class="card">
-                    <div class="card-body">
-                        <h3 class="text-center">Concept</h3>
+            <div class="row mb-2 mt-4"><h2 class="category-header">{{ category.key }}</h2></div>
+            <div class="table-responsive">
+                <div class="card-group ct-table-header">
+                    <div class="card ct-concept-header">
+                        <div class="card-body py-3">
+                            <h3 class="text-center mb-0">Concept</h3>
+                        </div>
                     </div>
-                </div>
-                {% for lang in languages %} 
-                <div class="card">
-                    <div class="card-body">
-                        <h3 class="text-center">{{ lang.name }}'s Implementation</h3>
+                    {% for lang in languages %}
+                    <div class="card">
+                        <div class="card-body py-3">
+                            <h3 class="text-center mb-0">{{ lang.name }}'s Implementation</h3>
+                        </div>
                     </div>
+                    {% endfor %}
                 </div>
-                {% endfor %}
-            </div>
 
     {% for concept in category.concepts %}
         <div class="card-group">
-            <div class="card">
+            <div class="card ct-concept-cell">
                 <div class="card-body">
+                    <p class="ct-cell-label">Concept</p>
                     <div class="strong">
                         {{ concept.name | linebreaksbr }}
                     </div>
                 </div>
             </div>
             {% for d in concept.data %}
-            {% concept_card d.code d.comment %}
+            {% concept_card d.code d.comment d.placeholder d.language %}
             {% endfor %}
         </div>
     {% endfor %}
@@ -76,7 +78,7 @@ <h3 class="text-center">{{ lang.name }}'s Implementation</h3>
                     <div class="card-body">&nbsp;</div>
                 </div>
                 {% for lang in languages %}
-                <div class="card" id="start-of-row">
+                <div class="card ct-contribute-cell">
                     <div class="card-body">
                         <a href="https://github.com/codethesaurus/codethesaur.us/edit/main/web/thesauruses/{{ lang.key }}/{{ lang.version }}/{{ concept }}.json">
                             Want to add or correct information for {{ lang.name }}?
@@ -105,20 +107,4 @@ <h3 class="text-center">{{ lang.name }}'s Implementation</h3>
             </div>
 
         </div>
-        <div class="modal fade" id="templateModal" tabindex="-1" aria-labelledby="templateModalLabel" aria-hidden="true">
-            <div class="modal-dialog modal-lg">
-                <div class="modal-content">
-                <div class="modal-header">
-                    <h5 class="modal-title" id="templateModalLabel">{{ concept }}.json</h5>
-                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-                </div>
-                <div class="modal-body">
-                    <textarea class="form-control" rows="20" readonly style="min-width: 100%;max-width: 100%;"></textarea>
-                </div>
-                <div class="modal-footer">
-                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
-                </div>
-                </div>
-            </div>
-        </div>
 {% endblock content %}
diff --git a/web/templates/index.html b/web/templates/index.html
index f4cf766f2..0aa246ccd 100644
--- a/web/templates/index.html
+++ b/web/templates/index.html
@@ -4,116 +4,124 @@
 <section class="jumbotron text-center">
     <div class="container">
         <h1 class="jumbotron-heading">The Polyglot Developer Reference</h1>
-        <p class="lead text-muted">Use this tool to compare language components from languages you know and don't know,
-            or just use it as a language reference cheat sheet.</p>
+        <p class="lead">Compare concepts across languages or databases, or use it as a quick reference sheet.</p>
     </div>
 </section>
 
-<div>{{ structures_keys|linebreaksbr }}</div>
-
-<div class="album py-5 bg-light">
+<div class="album py-5">
     <div class="container">
-        {% for category in languages %}
-        <div class="row">
-            <div class="col-12">
-                <h2 class="category-header pb-3">{{ category.label }}</h2>
-            </div>
-        </div>
-        <div class="card-deck row mb-5">
-            <div class="col-md-6 mb-4">
-                <div class="card">
-                    <form method="get" action="/compare">
-                        <div class="card-block">
-                            <h2 class="card-header p-3">
-                                Compare {{ category.label }}
-                            </h2>
-                            <div class="card-body p-3">
-                                <h3 class="card-subtitle pb-3">
-                                    Compare concepts side-by-side between different {{ category.label|lower }}.
-                                </h3>
-
-                                <div class="card-text">
-                                    <label class="text-muted py-2" for="concept-{{ category.key }}"> Choose a concept:</label>
-                                    <select class="form-select concept-select" id="concept-{{ category.key }}" name="concept" data-category="{{ category.key }}">
-                                        {% for k, v in category.structures.items %}
-                                        <option value="{{ k }}">{{ v }}</option>
-                                        {% endfor %}
-                                    </select>
+        <ul class="nav nav-tabs mb-4" id="categoryTabs" role="tablist">
+            {% for category in languages %}
+            <li class="nav-item" role="presentation">
+                <button class="nav-link {% if forloop.first %}active{% endif %}" id="{{ category.key }}-tab"
+                        data-bs-toggle="tab" data-bs-target="#{{ category.key }}-pane" type="button" role="tab"
+                        aria-controls="{{ category.key }}-pane" aria-selected="{% if forloop.first %}true{% else %}false{% endif %}">
+                    {{ category.label }}
+                </button>
+            </li>
+            {% endfor %}
+        </ul>
+        <div class="tab-content" id="categoryTabsContent">
+            {% for category in languages %}
+            <div class="tab-pane fade {% if forloop.first %}show active{% endif %}" id="{{ category.key }}-pane"
+                 role="tabpanel" aria-labelledby="{{ category.key }}-tab">
+                <div class="card-deck row g-4 mb-4">
+                    <div class="col-md-6">
+                        <div class="card h-100 ct-card">
+                            <form method="get" action="/compare">
+                                <div class="card-block d-flex flex-column h-100">
+                                    <h2 class="card-header p-3">
+                                        Compare {{ category.label }}
+                                    </h2>
+                                    <div class="card-body p-4 d-flex flex-column gap-3">
+                                        <p class="card-subtitle mb-0 text-muted">
+                                            See concepts side by side across two {{ category.label|lower }}.
+                                        </p>
 
+                                        <div class="card-text">
+                                            <label class="form-label text-muted" for="concept-{{ category.key }}">Choose a concept:</label>
+                                            <select class="form-select concept-select" id="concept-{{ category.key }}" name="concept" data-category="{{ category.key }}">
+                                                {% for k, v in category.structures.items %}
+                                                <option value="{{ k }}">{{ v }}</option>
+                                                {% endfor %}
+                                            </select>
+                                        </div>
+                                        <div class="card-text d-flex flex-column gap-2">
+                                            <label class="form-label text-muted mb-0" for="entry1-{{ category.key }}">Pick one you know:</label>
+                                            <select class="form-select entry1-select" id="entry1-{{ category.key }}" name="entry" data-category="{{ category.key }}">
+                                                {% for k, lang in category.entries.items %}
+                                                {% for v in lang %}
+                                                <option class="{{v.availStructs|join:" "}}" value="{{ k }};{{ v.version }}">{{ v.name }} (version {{v.version}})</option>
+                                                {% endfor %}
+                                                {% endfor %}
+                                            </select>
+                                            <label class="form-label text-muted mb-0 mt-2" for="entry2-{{ category.key }}">Pick one to learn:</label>
+                                            <select class="form-select entry2-select" id="entry2-{{ category.key }}" name="entry" data-category="{{ category.key }}">
+                                                {% for k, lang in category.entries.items %}
+                                                {% for v in lang %}
+                                                <option class="{{v.availStructs|join:" "}}" value="{{ k }};{{ v.version }}">{{ v.name }} (version {{v.version}})</option>
+                                                {% endfor %}
+                                                {% endfor %}
+                                            </select>
+                                        </div>
+                                    </div>
+                                    <div class="card-footer mt-auto">
+                                        <button type="submit" class="btn bg-blue text-white btn-lg"
+                                            aria-label="Go compare {{ category.label|lower }}">
+                                            <span class="d-inline">Go <i class="fa fa-arrow-right ms-2"></i></span></button>
+                                    </div>
                                 </div>
-                                <div class="card-text">
-                                    <label class="text-muted py-2" for="entry1-{{ category.key }}">Pick one you know:</label>
-                                    <select class="form-select entry1-select" id="entry1-{{ category.key }}" name="entry" data-category="{{ category.key }}">
-                                        {% for k, lang in category.entries.items %}
-                                        {% for v in lang %}
-                                        <option class="{{v.availStructs|join:" "}}" value="{{ k }};{{ v.version }}">{{ v.name }} (version {{v.version}})</option>
-                                        {% endfor %}
-                                        {% endfor %}
-                                    </select>
-                                    <label class="text-muted py-2" for="entry2-{{ category.key }}">Pick one you
-                                        <strong>don't</strong>
-                                        know:</label>
-                                    <select class="form-select entry2-select" id="entry2-{{ category.key }}" name="entry" data-category="{{ category.key }}">
-                                        {% for k, lang in category.entries.items %}
-                                        {% for v in lang %}
-                                        <option class="{{v.availStructs|join:" "}}" value="{{ k }};{{ v.version }}">{{ v.name }} (version {{v.version}})</option>
-                                        {% endfor %}
-                                        {% endfor %}
-                                    </select>
-                                </div>
-                            </div>
-                            <div class="card-footer">
-                                <button type="submit" class="btn bg-blue text-white btn-lg my-3"
-                                    aria-label="Go compare {{ category.label|lower }}">
-                                    <span class="d-inline">Go <i class="fa fa-arrow-right ml-2"
-                                        ></i></span></button>
-                            </div>
+                            </form>
                         </div>
-                    </form>
-                </div>
-            </div>
-            <div class="col-md-6 mb-4">
-                <div class="card">
-                    <form method="get" action="/reference">
-                        <div class="card-block">
-                            <h2 class="card-header p-3">
-                                See a Reference Sheet
-                            </h2>
-                            <div class="card-body p-3">
-                                <h3 class="card-subtitle pb-3">
-                                    A quick and easy way to remind yourself how to do something in a specific {{ category.key|slice:":-1" }}.
-                                </h3>
-                                <label class="text-muted py-2" for="reference-concept-{{ category.key }}">Choose a concept:</label>
-                                <select class="form-select reference-concept-select" id="reference-concept-{{ category.key }}" name="concept" data-category="{{ category.key }}">
-                                    {% for k, v in category.structures.items %}
-                                    <option value="{{ k }}">{{ v }}</option>
-                                    {% endfor %}
-                                </select>
-                                <label class="text-muted py-2" for="entry-{{ category.key }}">Pick one:</label>
-                                <select class="form-select entry-select" id="entry-{{ category.key }}" name="entry" data-category="{{ category.key }}">
-                                    {% for k, lang in category.entries.items %}
-                                    {% for v in lang %}
-                                    <option class="{{v.availStructs|join:" "}}" value="{{ k }};{{ v.version }}">{{ v.name }} (version {{v.version}})</option>
-                                    {% endfor %}
-                                    {% endfor %}
-                                </select>
-                            </div>
-                            <div class="card-footer">
-                                <button type="submit" class="btn bg-blue text-white btn-lg my-3"
-                                    aria-label="Go to reference sheet"> <span class="d-inline">Go
-                                        <i class="fa fa-arrow-right ml-2"></i></span></button>
-                            </div>
+                    </div>
+                    <div class="col-md-6">
+                        <div class="card h-100 ct-card">
+                            <form method="get" action="/reference">
+                                <div class="card-block d-flex flex-column h-100">
+                                    <h2 class="card-header p-3">
+                                        Reference Sheet
+                                    </h2>
+                                    <div class="card-body p-4 d-flex flex-column gap-3">
+                                        <p class="card-subtitle mb-0 text-muted">
+                                            Quick lookup for how to do something in a specific {{ category.key|slice:":-1" }}.
+                                        </p>
+                                        <div class="card-text">
+                                            <label class="form-label text-muted" for="reference-concept-{{ category.key }}">Choose a concept:</label>
+                                            <select class="form-select reference-concept-select" id="reference-concept-{{ category.key }}" name="concept" data-category="{{ category.key }}">
+                                                {% for k, v in category.structures.items %}
+                                                <option value="{{ k }}">{{ v }}</option>
+                                                {% endfor %}
+                                            </select>
+                                        </div>
+                                        <div class="card-text">
+                                            <label class="form-label text-muted" for="entry-{{ category.key }}">Pick one:</label>
+                                            <select class="form-select entry-select" id="entry-{{ category.key }}" name="entry" data-category="{{ category.key }}">
+                                                {% for k, lang in category.entries.items %}
+                                                {% for v in lang %}
+                                                <option class="{{v.availStructs|join:" "}}" value="{{ k }};{{ v.version }}">{{ v.name }} (version {{v.version}})</option>
+                                                {% endfor %}
+                                                {% endfor %}
+                                            </select>
+                                        </div>
+                                    </div>
+                                    <div class="card-footer mt-auto">
+                                        <button type="submit" class="btn bg-blue text-white btn-lg"
+                                            aria-label="Go to reference sheet"> <span class="d-inline">Go
+                                                <i class="fa fa-arrow-right ms-2"></i></span></button>
+                                    </div>
+                                </div>
+                            </form>
                         </div>
-                    </form>
+                    </div>
                 </div>
             </div>
+            {% endfor %}
         </div>
-        {% endfor %}
     </div>
     <div id="contribution-alert" class="container">
         <div class="alert alert-info" role="alert">
             <p>
-                If there is a language/concept combination you would like to explore but is not available, learn <a href="https://docs.codethesaur.us/contributing/" class="alert-link">how to help out!</a> 
+                Don't see the combination you're looking for? Learn <a href="https://docs.codethesaur.us/contributing/" class="alert-link">how to contribute</a>!
             </p>
         </div>
     </div>
diff --git a/web/templates/statistics.html b/web/templates/statistics.html
index 1afb0a263..d34318488 100644
--- a/web/templates/statistics.html
+++ b/web/templates/statistics.html
@@ -13,27 +13,27 @@ <h1>Site Statistics</h1>
         <div class="col-md-4">
             <div class="card mb-4 shadow-sm h-100">
                 <div class="card-header bg-primary text-white">
-                    <h5 class="mb-0"><i class="fas fa-users"></i> Overall Activity</h5>
+                    <h2 class="h5 mb-0"><i class="fas fa-users" aria-hidden="true"></i> Overall Activity</h2>
                 </div>
                 <div class="card-body">
                     <div class="row text-center mb-3">
                         <div class="col-6">
-                            <h2 class="display-4">{{ total_visits }}</h2>
+                            <p class="display-4 mb-0">{{ total_visits }}</p>
                             <p class="text-muted">Total Visits</p>
                         </div>
                         <div class="col-6">
-                            <h2 class="display-4">{{ total_lookups }}</h2>
+                            <p class="display-4 mb-0">{{ total_lookups }}</p>
                             <p class="text-muted">Total Lookups</p>
                         </div>
                     </div>
                     <hr>
                     <div class="row text-center">
                         <div class="col-6 border-end">
-                            <h4 class="mb-0">{{ unique_comparisons_count }}</h4>
+                            <p class="h4 mb-0">{{ unique_comparisons_count }}</p>
                             <small class="text-muted">Unique Lang Comparisons</small>
                         </div>
                         <div class="col-6">
-                            <h4 class="mb-0">{{ unique_structures_count }}</h4>
+                            <p class="h4 mb-0">{{ unique_structures_count }}</p>
                             <small class="text-muted">Unique Category Lookups</small>
                         </div>
                     </div>
@@ -43,10 +43,35 @@ <h4 class="mb-0">{{ unique_structures_count }}</h4>
         <div class="col-md-8">
             <div class="card mb-4 shadow-sm h-100">
                 <div class="card-header bg-success text-white">
-                    <h5 class="mb-0"><i class="fas fa-chart-bar"></i> Language Popularity</h5>
+                    <h2 class="h5 mb-0"><i class="fas fa-chart-bar" aria-hidden="true"></i> Language Popularity</h2>
                 </div>
                 <div class="card-body">
-                    <canvas id="languagesChart" height="100"></canvas>
+                    <canvas id="languagesChart" height="100" role="img"
+                        aria-label="Bar chart of total lookups per language"></canvas>
+                    <div class="ct-chart-data">
+                        <details>
+                            <summary>View data as a table</summary>
+                            <div class="table-responsive mt-2">
+                                <table class="table table-sm">
+                                    <caption class="visually-hidden">Total lookups per language</caption>
+                                    <thead>
+                                        <tr>
+                                            <th scope="col">Language</th>
+                                            <th scope="col">Lookups</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        {% for item in popular_languages %}
+                                        <tr>
+                                            <td>{{ item.name }}</td>
+                                            <td>{{ item.count }}</td>
+                                        </tr>
+                                        {% endfor %}
+                                    </tbody>
+                                </table>
+                            </div>
+                        </details>
+                    </div>
                 </div>
             </div>
         </div>
@@ -56,11 +81,36 @@ <h5 class="mb-0"><i class="fas fa-chart-bar"></i> Language Popularity</h5>
         <div class="col-12">
             <div class="card mb-4 shadow-sm">
                 <div class="card-header bg-dark text-white">
-                    <h5 class="mb-0"><i class="fas fa-chart-line"></i> Most Popular Specific Concept Lookups</h5>
+                    <h2 class="h5 mb-0"><i class="fas fa-chart-line" aria-hidden="true"></i> Most Popular Specific Concept Lookups</h2>
                 </div>
                 <div class="card-body">
                     <p class="text-muted small">Comparing how often specific concepts are looked up for each language (e.g., "Javascript functions").</p>
-                    <canvas id="conceptLangsChart" height="80"></canvas>
+                    <canvas id="conceptLangsChart" height="80" role="img"
+                        aria-label="Bar chart of the most looked-up language and concept pairs"></canvas>
+                    <div class="ct-chart-data">
+                        <details>
+                            <summary>View data as a table</summary>
+                            <div class="table-responsive mt-2">
+                                <table class="table table-sm">
+                                    <caption class="visually-hidden">Most popular language and concept lookups</caption>
+                                    <thead>
+                                        <tr>
+                                            <th scope="col">Language and concept</th>
+                                            <th scope="col">Lookups</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        {% for item in popular_concept_langs %}
+                                        <tr>
+                                            <td>{{ item.label }}</td>
+                                            <td>{{ item.count }}</td>
+                                        </tr>
+                                        {% endfor %}
+                                    </tbody>
+                                </table>
+                            </div>
+                        </details>
+                    </div>
                 </div>
             </div>
         </div>
@@ -70,17 +120,19 @@ <h5 class="mb-0"><i class="fas fa-chart-line"></i> Most Popular Specific Concept
         <div class="col-12">
             <div class="card mb-4 shadow-sm">
                 <div class="card-header bg-secondary text-white">
-                    <h5 class="mb-0"><i class="fas fa-history"></i> Recent Lookups</h5>
+                    <h2 class="h5 mb-0"><i class="fas fa-history" aria-hidden="true"></i> Recent Lookups</h2>
                 </div>
                 <div class="card-body">
                     {% if recent_lookups %}
+                    <div class="table-responsive">
                     <table class="table table-hover table-sm">
+                        <caption class="visually-hidden">The most recent concept lookups</caption>
                         <thead>
                             <tr>
-                                <th>Time</th>
-                                <th>Language 1</th>
-                                <th>Language 2</th>
-                                <th>Concept</th>
+                                <th scope="col">Time</th>
+                                <th scope="col">Language 1</th>
+                                <th scope="col">Language 2</th>
+                                <th scope="col">Concept</th>
                             </tr>
                         </thead>
                         <tbody>
@@ -94,6 +146,7 @@ <h5 class="mb-0"><i class="fas fa-history"></i> Recent Lookups</h5>
                             {% endfor %}
                         </tbody>
                     </table>
+                    </div>
                     {% else %}
                     <p class="text-center">No recent lookups recorded.</p>
                     {% endif %}
@@ -106,16 +159,18 @@ <h5 class="mb-0"><i class="fas fa-history"></i> Recent Lookups</h5>
         <div class="col-12">
             <div class="card mb-4 shadow-sm">
                 <div class="card-header bg-warning text-dark">
-                    <h5 class="mb-0"><i class="fas fa-exchange-alt"></i> Top Comparisons</h5>
+                    <h2 class="h5 mb-0"><i class="fas fa-exchange-alt" aria-hidden="true"></i> Top Comparisons</h2>
                 </div>
                 <div class="card-body">
                     {% if popular_comparisons %}
+                    <div class="table-responsive">
                     <table class="table table-hover table-sm">
+                        <caption class="visually-hidden">The most frequently compared language pairs</caption>
                         <thead>
                             <tr>
-                                <th>Language 1</th>
-                                <th>Language 2</th>
-                                <th class="text-end">Count</th>
+                                <th scope="col">Language 1</th>
+                                <th scope="col">Language 2</th>
+                                <th scope="col" class="text-end">Count</th>
                             </tr>
                         </thead>
                         <tbody>
@@ -128,6 +183,7 @@ <h5 class="mb-0"><i class="fas fa-exchange-alt"></i> Top Comparisons</h5>
                             {% endfor %}
                         </tbody>
                     </table>
+                    </div>
                     {% else %}
                     <p class="text-center">No comparisons made yet.</p>
                     {% endif %}
@@ -140,16 +196,18 @@ <h5 class="mb-0"><i class="fas fa-exchange-alt"></i> Top Comparisons</h5>
         <div class="col-12">
             <div class="card mb-4 shadow-sm border-danger">
                 <div class="card-header bg-danger text-white">
-                    <h5 class="mb-0"><i class="fas fa-exclamation-triangle"></i> Most Requested Missing Items</h5>
+                    <h2 class="h5 mb-0"><i class="fas fa-exclamation-triangle" aria-hidden="true"></i> Most Requested Missing Items</h2>
                 </div>
                 <div class="card-body">
                     <p class="text-muted small">Tracking languages, structures, or concepts that were requested but are currently missing from the site.</p>
                     {% if missing_items %}
+                    <div class="table-responsive">
                     <table class="table table-hover table-sm">
+                        <caption class="visually-hidden">Items users requested that the site does not have yet</caption>
                         <thead>
                             <tr>
-                                <th>Item</th>
-                                <th class="text-end">Requests</th>
+                                <th scope="col">Item</th>
+                                <th scope="col" class="text-end">Requests</th>
                             </tr>
                         </thead>
                         <tbody>
@@ -159,7 +217,7 @@ <h5 class="mb-0"><i class="fas fa-exclamation-triangle"></i> Most Requested Miss
                                     {% if item.type == 'language' %}
                                     <span class="badge bg-primary">Language</span>
                                     {% elif item.type == 'structure' %}
-                                    <span class="badge bg-info">Structure</span>
+                                    <span class="badge bg-info text-dark">Structure</span>
                                     {% else %}
                                     <span class="badge bg-secondary">Concept</span>
                                     {% endif %}
@@ -170,6 +228,7 @@ <h5 class="mb-0"><i class="fas fa-exclamation-triangle"></i> Most Requested Miss
                             {% endfor %}
                         </tbody>
                     </table>
+                    </div>
                     {% else %}
                     <p class="text-center">No missing items requested yet.</p>
                     {% endif %}
@@ -181,11 +240,36 @@ <h5 class="mb-0"><i class="fas fa-exclamation-triangle"></i> Most Requested Miss
     <div class="row">
         <div class="col-md-6">
             <div class="card mb-4 shadow-sm">
-                <div class="card-header bg-info text-white">
-                    <h5 class="mb-0"><i class="fas fa-chart-pie"></i> Category Popularity</h5>
+                <div class="card-header bg-info text-dark">
+                    <h2 class="h5 mb-0"><i class="fas fa-chart-pie" aria-hidden="true"></i> Category Popularity</h2>
                 </div>
                 <div class="card-body">
-                    <canvas id="structuresChart"></canvas>
+                    <canvas id="structuresChart" role="img"
+                        aria-label="Doughnut chart of lookups per category"></canvas>
+                    <div class="ct-chart-data">
+                        <details>
+                            <summary>View data as a table</summary>
+                            <div class="table-responsive mt-2">
+                                <table class="table table-sm">
+                                    <caption class="visually-hidden">Lookups per category</caption>
+                                    <thead>
+                                        <tr>
+                                            <th scope="col">Category</th>
+                                            <th scope="col">Lookups</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        {% for item in popular_structures %}
+                                        <tr>
+                                            <td>{{ item.name }}</td>
+                                            <td>{{ item.count }}</td>
+                                        </tr>
+                                        {% endfor %}
+                                    </tbody>
+                                </table>
+                            </div>
+                        </details>
+                    </div>
                 </div>
             </div>
         </div>
diff --git a/web/templatetags/templatetags.py b/web/templatetags/templatetags.py
index e1c97c88e..8785ad8d5 100644
--- a/web/templatetags/templatetags.py
+++ b/web/templatetags/templatetags.py
@@ -1,12 +1,41 @@
 """templatetags of codethesaur.us"""
 from django import template
+
 register = template.Library()
 
+NAV_ITEMS = [
+    {"label": "Home", "url": "/"},
+    {"label": "About", "url": "/about/"},
+    {"label": "Statistics", "url": "/statistics/"},
+    {"label": "Docs", "url": "https://docs.codethesaur.us", "external": True},
+    {"label": "Contribute", "url": "https://docs.codethesaur.us/contributing/", "external": True},
+]
+
+
+@register.simple_tag(takes_context=True)
+def nav_items(context):
+    """the primary navigation, with the current page marked
+
+    Deriving `is_active` from the request keeps the highlighted item correct on every
+    page; hardcoding it marked Home as current no matter where you were.
+
+    :param context: the template context, used for the current request path
+    :return: list of nav item dicts, each with label, url, is_active and external
+    """
+    request = context.get('request')
+    current = request.path if request else None
+    return [
+        dict(item, is_active=item['url'] == current)
+        for item in NAV_ITEMS
+    ]
+
 
 @register.inclusion_tag('concept_card.html')
-def concept_card(code, comment):
+def concept_card(code, comment, placeholder=None, language=None):
     """tag for a single concept"""
     return {
         'code': code,
-        'comment': comment
+        'comment': comment,
+        'placeholder': placeholder,
+        'language': language
     }
diff --git a/web/tests/test_templates.py b/web/tests/test_templates.py
index 2d8fff4f6..f045d9e35 100644
--- a/web/tests/test_templates.py
+++ b/web/tests/test_templates.py
@@ -1,121 +1,164 @@
-from django.test import TestCase
+import re
+from pathlib import Path
+
+from django.conf import settings
 from django.template.loader import render_to_string
+from django.test import TestCase
 
 
 class TestTemplates(TestCase):
     """TestCase for templates"""
 
-    def test_concept_card(self):
-        """test the concept_card template"""
-        # no code and no comment
-        rendered_template_1 = render_to_string("concept_card.html", {}).strip()
-        self.assertEqual(
-            rendered_template_1,
-            "<div class=\"card\">\n"
-            "    <div class=\"card-body\">\n"
-            "    \n"
-            "    \n"
-            "    </div>\n"
-            "</div>"
-        )
+    def test_concept_card_no_code_or_comment(self):
+        """an empty card shows the placeholder rather than an empty box"""
+        rendered = render_to_string("concept_card.html", {
+            "placeholder": "Not implemented in this language"
+        })
+
+        self.assertIn("ct-placeholder", rendered)
+        self.assertIn("Not implemented in this language", rendered)
+        self.assertNotIn("ct-code", rendered)
+        self.assertNotIn("ct-comment", rendered)
+
+    def test_concept_card_code_only(self):
+        """code is wrapped in a .ct-code block and keeps the pygments `syntax` class"""
+        rendered = render_to_string("concept_card.html", {
+            "code": "<b>I am bold!</b>"
+        })
+
+        self.assertIn('class="syntax ct-code"', rendered)
+        self.assertIn("<b>I am bold!</b>", rendered)
+        self.assertNotIn("ct-comment", rendered)
+        self.assertNotIn("ct-placeholder", rendered)
 
-        # code (marked as safe), no comment
-        rendered_template_2 = render_to_string(
-            "concept_card.html", {"code": "<b>I am bold!</b>"}
-        ).strip()
-        self.assertEqual(
-            rendered_template_2,
-            "<div class=\"card\">\n"
-            "    <div class=\"card-body\">\n"
-            "    \n"
-            "        <div class=\"syntax\"><b>I am bold!</b></div>\n"
-            "    \n"
-            "    \n"
-            "    </div>\n"
-            "</div>"
+    def test_concept_card_comment_only(self):
+        """a comment is rendered in a labelled note block"""
+        rendered = render_to_string("concept_card.html", {
+            "comment": "I am **bold** and *italic*, `let x = 1`."
+        })
+
+        self.assertIn("ct-comment", rendered)
+        self.assertIn("ct-comment-label", rendered)
+        self.assertIn("Note", rendered)
+        self.assertIn("<strong>bold</strong>", rendered)
+        self.assertIn("<em>italic</em>", rendered)
+        self.assertIn("<code>let x = 1</code>", rendered)
+        self.assertNotIn("ct-code", rendered)
+        # no divider when there is no code above the comment
+        self.assertNotIn("ct-comment-divider", rendered)
+
+    def test_concept_card_code_and_comment_are_separated(self):
+        """code and comment get distinct blocks with a divider between them"""
+        rendered = render_to_string("concept_card.html", {
+            "code": "<b>I am bold!</b>",
+            "comment": "I am **bold** and *italic*, `let x = 1`."
+        })
+
+        self.assertIn('class="syntax ct-code"', rendered)
+        self.assertIn("ct-comment-divider", rendered)
+        self.assertIn("ct-comment", rendered)
+        self.assertNotIn("ct-placeholder", rendered)
+        # the divider sits between the code block and the note block
+        self.assertLess(
+            rendered.index("ct-code"),
+            rendered.index("ct-comment-divider")
         )
+        self.assertLess(
+            rendered.index("ct-comment-divider"),
+            rendered.index("ct-comment-label")
+        )
+
+    def test_concept_card_comment_multiline(self):
+        """multi-line comments keep their line breaks"""
+        rendered = render_to_string("concept_card.html", {
+            "code": "",
+            "comment": "I am a humble\nmulti-line comment in the\nform of a haiku"
+        })
 
-        # no code, comment (with markdown format)
-        rendered_template_3 = render_to_string(
-            "concept_card.html", {"comment": "I am **bold** and *italic*, `let x = 1`."}
-        ).strip()
-        self.assertEqual(
-            rendered_template_3,
-            "<div class=\"card\">\n"
-            "    <div class=\"card-body\">\n"
-            "    \n"
-            "    \n"
-            "        <div>\n"
-            "            I am <strong>bold</strong> and <em>italic</em>, <code>let x = 1</code>.\n"
-            "        </div>\n"
-            "    \n"
-            "    </div>\n"
-            "</div>"
+        self.assertIn(
+            "I am a humble<br>multi-line comment in the<br>form of a haiku",
+            rendered
         )
 
-        # code and comment
-        rendered_template_4 = render_to_string(
-            "concept_card.html",
-            {
-                "code": "<b>I am bold!</b>",
-                "comment": "I am **bold** and *italic*, `let x = 1`."
-            }
-        ).strip()
-        self.assertEqual(
-            rendered_template_4,
-            "<div class=\"card\">\n"
-            "    <div class=\"card-body\">\n"
-            "    \n"
-            "        <div class=\"syntax\"><b>I am bold!</b></div>\n"
-            "    \n"
-            "    \n"
-            "        <div>\n"
-            "            I am <strong>bold</strong> and <em>italic</em>, <code>let x = 1</code>.\n"
-            "        </div>\n"
-            "    \n"
-            "    </div>\n"
-            "</div>"
+    def test_concept_card_comment_markdown_url(self):
+        """markdown links in comments still render"""
+        rendered = render_to_string("concept_card.html", {
+            "comment": "I am a [url](http://url.com), I am not a url.py"
+        })
+
+        self.assertIn('<a href="http://url.com">url</a>', rendered)
+
+    def test_concept_card_divider_is_hidden_from_assistive_tech(self):
+        """the visual divider is decorative and must not be announced"""
+        rendered = render_to_string("concept_card.html", {
+            "code": "<b>code</b>",
+            "comment": "a note"
+        })
+
+        divider = re.search(
+            r'<div class="ct-comment-divider"[^>]*>', rendered
         )
+        self.assertIsNotNone(divider)
+        self.assertIn('aria-hidden="true"', divider.group(0))
+
+    def test_concept_card_labels_the_language(self):
+        """each entry card names its language so stacked mobile cards stay attributable"""
+        rendered = render_to_string("concept_card.html", {
+            "code": "<b>def f(): pass</b>",
+            "language": {"name": "Python", "version": "3"}
+        })
+
+        self.assertIn("ct-cell-label", rendered)
+        self.assertIn("Python", rendered)
+        self.assertIn("3", rendered)
+
+    def test_concept_card_language_label_is_optional(self):
+        """without a language in context (e.g. the bare inclusion tag) no label renders"""
+        rendered = render_to_string("concept_card.html", {
+            "code": "<b>def f(): pass</b>"
+        })
+
+        self.assertNotIn("ct-cell-label", rendered)
 
-        # no code and comment (multiple lines)
-        rendered_template_5 = render_to_string(
-            "concept_card.html",
-            {
-                "code": "",
-                "comment": "I am a humble\nmulti-line comment in the\nform of a haiku"
-            }
-        ).strip()
-        self.assertEqual(
-            rendered_template_5,
-            "<div class=\"card\">\n"
-            "    <div class=\"card-body\">\n"
-            "    \n"
-            "    \n"
-            "        <div>\n"
-            "            I am a humble<br>multi-line comment in the<br>form of a haiku\n"
-            "        </div>\n"
-            "    \n"
-            "    </div>\n"
-            "</div>"
+    def test_concept_card_language_label_works_without_code(self):
+        """a placeholder-only card is still labelled with its language"""
+        rendered = render_to_string("concept_card.html", {
+            "placeholder": "Not implemented in this language",
+            "language": {"name": "Lua", "version": "5"}
+        })
+
+        self.assertIn("ct-cell-label", rendered)
+        self.assertIn("Lua", rendered)
+
+
+class TestConceptsTableCss(TestCase):
+    """the compare layout swaps column headers for per-card labels on narrow screens"""
+
+    @classmethod
+    def setUpClass(cls):
+        super().setUpClass()
+        cls.css = Path(settings.BASE_DIR) / "web" / "static" / "css" / "app.css"
+        cls.text = cls.css.read_text(encoding="utf-8")
+
+    def test_table_header_is_hidden_on_narrow_screens(self):
+        """once cards stack, the column header row detaches and must be hidden"""
+        narrow = re.search(
+            r"@media\s*\(max-width:[^)]+\)\s*\{[^@]*?\.ct-table-header\s*\{[^}]*display:\s*none",
+            self.text,
+            re.DOTALL,
         )
+        self.assertIsNotNone(narrow, "app.css must hide .ct-table-header below the stacking breakpoint")
 
-        # Markdown url in comment
-        rendered_template_6 = render_to_string(
-            "concept_card.html",
-            {
-                "comment": "I am a [url](http://url.com), I am not a url.py"
-            }
-        ).strip()
-        self.assertEqual(
-            rendered_template_6,
-            "<div class=\"card\">\n"
-            "    <div class=\"card-body\">\n"
-            "    \n"
-            "    \n"
-            "        <div>\n"
-            "            I am a <a href=\"http://url.com\">url</a>, I am not a url.py\n"
-            "        </div>\n"
-            "    \n"
-            "    </div>\n"
-            "</div>"
+    def test_cell_label_is_only_shown_on_narrow_screens(self):
+        """the per-card label replaces the hidden header, so it must not double up on desktop"""
+        self.assertRegex(
+            self.text,
+            r"\.ct-cell-label\s*\{[^}]*display:\s*none",
+            "app.css must hide .ct-cell-label by default",
+        )
+        narrow = re.search(
+            r"@media\s*\(max-width:[^)]+\)\s*\{[^@]*?\.ct-cell-label\s*\{[^}]*display:\s*block",
+            self.text,
+            re.DOTALL,
         )
+        self.assertIsNotNone(narrow, "app.css must reveal .ct-cell-label below the stacking breakpoint")
diff --git a/web/tests/test_templatetags.py b/web/tests/test_templatetags.py
index 48578667e..2c6627c3c 100644
--- a/web/tests/test_templatetags.py
+++ b/web/tests/test_templatetags.py
@@ -1,17 +1,37 @@
-from django.test import TestCase
 from django.template import Context, Template
+from django.test import TestCase
+
 
 class TestTemplateTags(TestCase):
     def test_concept_card_tag(self):
         template = Template(
             "{% load templatetags %}"
-            "{% concept_card code comment %}"
+            "{% concept_card code comment placeholder %}"
         )
         context = Context({
             'code': 'print("Hello")',
-            'comment': 'A simple print statement'
+            'comment': 'A simple print statement',
+            'placeholder': ''
         })
         rendered = template.render(context)
         
         self.assertIn('print("Hello")', rendered)
         self.assertIn('A simple print statement', rendered)
+        self.assertIn('ct-code', rendered)
+        self.assertIn('ct-comment', rendered)
+
+    def test_concept_card_tag_with_placeholder(self):
+        """a card with no code and no comment renders the placeholder"""
+        template = Template(
+            "{% load templatetags %}"
+            "{% concept_card code comment placeholder %}"
+        )
+        context = Context({
+            'code': '',
+            'comment': '',
+            'placeholder': 'Not implemented in this language'
+        })
+        rendered = template.render(context)
+
+        self.assertIn('ct-placeholder', rendered)
+        self.assertIn('Not implemented in this language', rendered)
diff --git a/web/tests/test_views_extra.py b/web/tests/test_views_extra.py
index 0231e97ab..db75153c4 100644
--- a/web/tests/test_views_extra.py
+++ b/web/tests/test_views_extra.py
@@ -1,6 +1,11 @@
+import re
+from http import HTTPStatus
+
 from django.test import TestCase
 from django.urls import reverse
-from http import HTTPStatus
+
+from web.models import LookupData, MissingLookup, SiteVisit
+
 
 class TestViewsExtra(TestCase):
     def test_concepts_invalid_structure(self):
@@ -66,3 +71,278 @@ def test_about_view(self):
         response = self.client.get(url)
         self.assertEqual(response.status_code, HTTPStatus.OK)
         self.assertTemplateUsed(response, 'about.html')
+
+    def test_compare_intro_names_the_concept(self):
+        """the intro sentence must name the concept, not render a blank gap"""
+        url = reverse('index') + '?concept=functions&entry=python%3B3&entry=javascript'
+        response = self.client.get(url)
+        self.assertEqual(response.status_code, HTTPStatus.OK)
+        self.assertContains(response, 'Functions, Methods, and Subroutines')
+        self.assertNotContains(response, 'show the  syntax')
+
+    def test_compare_intro_lists_both_entries(self):
+        url = reverse('index') + '?concept=functions&entry=python%3B3&entry=javascript'
+        response = self.client.get(url)
+        self.assertContains(response, 'Python (version 3)')
+        self.assertContains(response, 'JavaScript')
+
+    def test_reference_intro_is_not_broken_grammar(self):
+        """a single-language reference sheet must not say 'side by side'"""
+        url = reverse('index') + '?concept=data_types&entry=python%3B3'
+        response = self.client.get(url)
+        self.assertEqual(response.status_code, HTTPStatus.OK)
+        self.assertContains(response, 'Data Types')
+        self.assertNotContains(response, 'side by side</p>')
+
+    def test_unknown_concept_is_not_rendered_as_code(self):
+        """the literal string 'Unknown' must never be styled as a code sample"""
+        url = reverse('index') + '?concept=functions&entry=python%3B3&entry=javascript'
+        response = self.client.get(url)
+        self.assertNotContains(response, '>Unknown<')
+
+    def test_not_implemented_uses_a_placeholder_block(self):
+        """not-implemented concepts get a styled placeholder, not bare prose"""
+        url = reverse('index') + '?concept=functions&entry=python%3B3&entry=lua;5'
+        response = self.client.get(url)
+        self.assertEqual(response.status_code, HTTPStatus.OK)
+        self.assertNotContains(response, '>Not Implemented<')
+        self.assertContains(response, 'ct-placeholder')
+
+    def test_missing_entries_alert_is_styled(self):
+        """`alert-link` is not a Bootstrap 5 class, so the warning rendered unstyled"""
+        url = reverse('index') + '?concept=functions&entry=python%3B3&entry=lua;5'
+        response = self.client.get(url)
+        self.assertNotContains(response, 'alert alert-link')
+        self.assertContains(response, 'alert alert-warning')
+
+    def test_concepts_page_has_no_duplicate_ids(self):
+        """`start-of-row` was repeated once per column, producing duplicate DOM ids"""
+        url = reverse('index') + '?concept=functions&entry=python%3B3&entry=javascript'
+        response = self.client.get(url)
+        ids = re.findall(r'\sid="([^"]+)"', response.content.decode('utf-8'))
+        duplicates = {i for i in ids if ids.count(i) > 1}
+        self.assertEqual(duplicates, set())
+
+    def test_index_does_not_expose_unused_context(self):
+        """`randomLanguages` is computed in the view but never used by any template"""
+        url = reverse('index')
+        response = self.client.get(url)
+        self.assertNotIn('randomLanguages', response.context)
+
+    def test_compare_cards_label_their_language(self):
+        """stacked mobile cards must each name their language, not rely on a detached header"""
+        url = reverse('index') + '?concept=functions&entry=python%3B3&entry=javascript'
+        response = self.client.get(url)
+        html = response.content.decode('utf-8')
+
+        # every card in a row is labelled: the concept cell plus each implementation
+        cards = html.count(' ct-entry-card"')
+        concept_cells = html.count(' ct-concept-cell"')
+        self.assertGreater(cards, 0)
+        self.assertGreater(concept_cells, 0)
+        self.assertEqual(cards + concept_cells, html.count('class="ct-cell-label"'))
+        # both columns are labelled
+        self.assertIn('ct-cell-label-name">Python</span>', html)
+        self.assertIn('ct-cell-label-name">JavaScript</span>', html)
+
+    def test_reference_cards_label_their_language(self):
+        url = reverse('index') + '?concept=data_types&entry=python%3B3'
+        response = self.client.get(url)
+
+        self.assertContains(response, 'ct-cell-label-name">Python</span>')
+
+
+class TestHeadingOrder(TestCase):
+    """headings must descend one level at a time so screen readers can navigate them"""
+
+    def _levels(self, html):
+        return [int(m) for m in re.findall(r'<h([1-6])\b', html)]
+
+    def _assert_no_skipped_levels(self, url):
+        response = self.client.get(url)
+        self.assertEqual(response.status_code, HTTPStatus.OK)
+        levels = self._levels(response.content.decode('utf-8'))
+        self.assertGreater(len(levels), 0)
+        self.assertEqual(levels[0], 1, "each page must start with a single h1")
+        for index in range(1, len(levels)):
+            self.assertLessEqual(
+                levels[index] - levels[index - 1], 1,
+                f"heading jumps from h{levels[index - 1]} to h{levels[index]}"
+            )
+
+    def test_home_headings_do_not_skip_levels(self):
+        self._assert_no_skipped_levels(reverse('index'))
+
+    def test_about_headings_do_not_skip_levels(self):
+        self._assert_no_skipped_levels(reverse('about'))
+
+    def test_statistics_headings_do_not_skip_levels(self):
+        self._assert_no_skipped_levels(reverse('statistics'))
+
+    def test_concepts_headings_do_not_skip_levels(self):
+        self._assert_no_skipped_levels(
+            reverse('index') + '?concept=functions&entry=python%3B3&entry=javascript'
+        )
+
+
+class TestStatisticsPage(TestCase):
+    """the statistics page needs readable headers and non-visual alternatives to its charts"""
+
+    def _html(self):
+        response = self.client.get(reverse('statistics'))
+        self.assertEqual(response.status_code, HTTPStatus.OK)
+        return response.content.decode('utf-8')
+
+    def test_light_header_never_carries_white_text(self):
+        """white on Bootstrap's cyan `bg-info` is 1.96:1"""
+        html = self._html()
+        self.assertNotIn('bg-info text-white', html)
+
+    def test_charts_expose_a_text_alternative(self):
+        """canvas is invisible to assistive tech, so each needs a name and a data table"""
+        html = self._html()
+
+        for chart_id in ('languagesChart', 'conceptLangsChart', 'structuresChart'):
+            with self.subTest(chart=chart_id):
+                tag = re.search(rf'<canvas[^>]*id="{chart_id}"[^>]*>', html)
+                self.assertIsNotNone(tag, f"{chart_id} must exist")
+                self.assertIn('role="img"', tag.group(0))
+                self.assertIn('aria-label=', tag.group(0))
+
+        # one collapsible data table per chart
+        self.assertEqual(html.count('<details>'), 3)
+        self.assertEqual(html.count('class="ct-chart-data"'), 3)
+        self.assertEqual(html.count('View data as a table'), 3)
+
+    def test_contributors_image_alt_reads_as_a_link_destination(self):
+        """the link wraps only this image, so its alt text is the link's accessible name"""
+        response = self.client.get(reverse('about'))
+        html = response.content.decode('utf-8')
+
+        match = re.search(r'<a href="[^"]*graphs/contributors">\s*<img[^>]*>', html, re.DOTALL)
+        self.assertIsNotNone(match)
+        alt = re.search(r'alt="([^"]*)"', match.group(0)).group(1)
+        with self.subTest(alt=alt):
+            self.assertNotIn('An image', alt)
+            self.assertIn('contributors', alt)
+
+    def test_data_tables_are_wrapped_for_horizontal_overflow(self):
+        """unwrapped wide tables pushed the whole statistics page sideways on phones"""
+        visit = SiteVisit.objects.create(
+            url='https://codethesaur.us/', user_agent='pytest', referer='')
+        LookupData.objects.create(
+            entry1='python', version1='3', entry2='javascript', version2='',
+            structure='functions', site_visit=visit)
+        LookupData.objects.create(
+            entry1='ruby', version1='', entry2='', version2='', structure='functions',
+            site_visit=visit)
+        MissingLookup.objects.create(
+            item_type='language', item_value='cobol', language_context='', site_visit=visit)
+
+        html = self._html()
+
+        tables = re.findall(r'<table class="table table-hover table-sm">', html)
+        self.assertEqual(len(tables), 3)
+        self.assertEqual(html.count('<div class="table-responsive">'), 3)
+
+    def test_chart_data_is_collapsed_so_it_cannot_widen_the_page(self):
+        """a visually-hidden wide table still forced horizontal scrolling on phones"""
+        html = self._html()
+
+        blocks = re.findall(r'<div class="ct-chart-data">(.*?)</details>', html, re.DOTALL)
+        self.assertEqual(len(blocks), 3)
+        for block in blocks:
+            with self.subTest(block=block[:40]):
+                # the table sits inside a collapsed <details>, so it is out of the layout
+                self.assertLess(block.index('<details'), block.index('<table'))
+
+    def test_data_tables_are_rendered_server_side(self):
+        """the fallback tables must not depend on JavaScript to exist"""
+        html = self._html()
+
+        self.assertIn('Language', html)
+        self.assertIn('Concept', html)
+
+    def test_every_column_header_is_scoped(self):
+        """column headers must be programmatically associated with their cells"""
+        html = self._html()
+
+        headers = re.findall(r'<th\b[^>]*>', html)
+        self.assertGreater(len(headers), 0)
+        for header in headers:
+            with self.subTest(header=header):
+                self.assertIn('scope="col"', header)
+
+    def test_decorative_icons_are_hidden_from_assistive_tech(self):
+        """font-awesome glyphs inside headings should not be announced"""
+        html = self._html()
+
+        icons = re.findall(r'<i class="fas fa-[a-z-]+"[^>]*></i>', html)
+        self.assertGreater(len(icons), 0, "sanity check: the page still uses these icons")
+        for icon in icons:
+            with self.subTest(icon=icon):
+                self.assertIn('aria-hidden="true"', icon)
+
+
+class TestSiteChrome(TestCase):
+    """the shared shell: skip link, navigation state, and back-to-top"""
+
+    def _pages(self):
+        """(path, nav href) for each page, built with reverse to keep the trailing slashes"""
+        return [
+            (reverse('index'), reverse('index')),
+            (reverse('about'), reverse('about')),
+            (reverse('statistics'), reverse('statistics')),
+        ]
+
+    def test_skip_link_is_first_and_resolves(self):
+        """keyboard users need a way past the nav, and its target must exist"""
+        for path, _ in self._pages():
+            with self.subTest(path=path):
+                html = self.client.get(path).content.decode('utf-8')
+
+                link = re.search(r'<a[^>]*class="skip-link[^"]*"[^>]*href="#([^"]+)"', html)
+                self.assertIsNotNone(link, f"{path} needs a skip link")
+                target = link.group(1)
+                self.assertLess(
+                    html.index('class="skip-link'), html.index('<nav'),
+                    "the skip link must come before the navigation"
+                )
+                self.assertIn(f'id="{target}"', html, "the skip link target must exist")
+
+    def test_exactly_one_nav_item_marks_the_current_page(self):
+        """`active`/`aria-current` was hardcoded to Home, so it was wrong everywhere else"""
+        for path, expected_href in self._pages():
+            with self.subTest(path=path):
+                html = self.client.get(path).content.decode('utf-8')
+                nav = re.search(r'<nav\b.*?</nav>', html, re.DOTALL)
+                self.assertIsNotNone(nav)
+
+                current = re.findall(r'aria-current="page"', nav.group(0))
+                self.assertEqual(len(current), 1, f"{path} must mark exactly one nav item")
+
+                # the marked link must be the one whose href matches this page
+                marked = re.search(
+                    r'<a[^>]*aria-current="page"[^>]*href="([^"]*)"', nav.group(0)
+                ) or re.search(r'<a[^>]*href="([^"]*)"[^>]*aria-current="page"', nav.group(0))
+                self.assertIsNotNone(marked)
+                self.assertEqual(marked.group(1), expected_href)
+
+    def test_external_nav_links_open_safely(self):
+        html = self.client.get(reverse('index')).content.decode('utf-8')
+        nav = re.search(r'<nav\b.*?</nav>', html, re.DOTALL).group(0)
+
+        for href in ('https://docs.codethesaur.us', 'https://docs.codethesaur.us/contributing/'):
+            with self.subTest(href=href):
+                anchor = re.search(rf'<a[^>]*href="{re.escape(href)}"[^>]*>', nav, re.DOTALL)
+                self.assertIsNotNone(anchor)
+                self.assertIn('rel="noopener"', anchor.group(0))
+
+    def test_back_to_top_points_at_a_real_target(self):
+        """`href="#"` went nowhere"""
+        html = self.client.get(reverse('index')).content.decode('utf-8')
+
+        anchor = re.search(r'<a[^>]*class="toTop"[^>]*href="#([^"]*)"', html, re.DOTALL)
+        self.assertIsNotNone(anchor)
+        self.assertNotEqual(anchor.group(1), '', 'back-to-top must not link to an empty fragment')
+        self.assertIn(f'id="{anchor.group(1)}"', html)
diff --git a/web/views.py b/web/views.py
index 9597e4fa0..946f0b53b 100644
--- a/web/views.py
+++ b/web/views.py
@@ -1,18 +1,17 @@
 """codethesaur.us views"""
 import logging
 import os
-import random
 import re
 
 from django.conf import settings
+from django.db import transaction
+from django.db.models import Count, Q
 from django.http import (
     HttpResponseBadRequest,
     HttpResponseForbidden,
     HttpResponseNotFound,
-    HttpResponseServerError
+    HttpResponseServerError,
 )
-from django.db import transaction
-from django.db.models import Count, Q
 from django.shortcuts import HttpResponse, render
 from django.utils.html import escape, strip_tags
 from django.views.decorators.http import require_http_methods
@@ -23,13 +22,13 @@
 
 from codethesaurus.settings import BASE_DIR
 from web.models import (
-    ThesaurusEntry,
     LookupData,
-    ThesaurusMetaInfo,
     MissingEntryError,
     MissingLookup,
     MissingStructureError,
     SiteVisit,
+    ThesaurusEntry,
+    ThesaurusMetaInfo,
 )
 from web.thesaurus_template_generators import generate_entry_template
 
@@ -155,8 +154,6 @@ def index(request):
             } for version in entry.versions()]
         }
 
-    random_entries = random.sample(list(meta_data_entries.values()), k=min(3, len(meta_data_entries)))
-
     for category in os.listdir(thesauruses_dir):
         category_path = os.path.join(thesauruses_dir, category)
         if category == '_meta' or not os.path.isdir(category_path):
@@ -198,7 +195,6 @@ def index(request):
         'title': 'Welcome',
         'languages': grouped_entries,
         'structures': meta_info.structures,
-        'randomLanguages': random_entries,
         'description': 'Code Thesaurus: A polyglot developer reference tool'
     }
     return render(request, 'index.html', content)
@@ -498,20 +494,22 @@ def render_concepts(request, entries, structure, all_categories):
     else:
         title = f"Comparing {', '.join(entry_name_versions[:-1])} and {entry_name_versions[-1]}"
 
+    languages = [
+        {
+            "key": entry.key,
+            "version": entry.version,
+            "name": entry.name,
+            "is_incomplete": entry._is_incomplete,
+        }
+        for entry in entries
+    ]
+    pair_languages_with_concepts(languages, all_categories)
 
     response = {
         "title": title,
         "concept": structure.key,
         "concept_name": structure.name,
-        "languages": [
-            {
-                "key": entry.key,
-                "version": entry.version,
-                "name": entry.name,
-                "is_incomplete": entry._is_incomplete,
-            }
-            for entry in entries
-        ],
+        "languages": languages,
         "categories": all_categories,
         "description": f"Code Thesaurus: {title}"
     }
@@ -519,6 +517,24 @@ def render_concepts(request, entries, structure, all_categories):
     return render(request, 'concepts.html', response)
 
 
+def pair_languages_with_concepts(languages, all_categories):
+    """
+    Attaches the matching language to every per-entry concept cell.
+
+    `concepts_data` builds one cell per entry in the order they were requested, but
+    knows nothing about the friendly language names the template renders. Pairing
+    them here lets a cell label itself, which matters on narrow screens where the
+    cards stack and the column header no longer sits above them.
+
+    :param languages: list of language dicts, in entry order
+    :param all_categories: category/concept structure, mutated in place
+    """
+    for category in all_categories:
+        for concept in category["concepts"]:
+            for index, data in enumerate(concept["data"]):
+                data["language"] = languages[index]
+
+
 def error_handler_400_bad_request(request, exception):
     """
     Renders the page for a generic client error (HTTP 400)
@@ -595,14 +611,18 @@ def format_code_for_display(concept_key, entry, lexer=None):
     Returns the formatted HTML formatted syntax-highlighted text for a concept key (from a meta
             thesaurus file) and an entry
 
+    Returns None (rather than placeholder text) when there is no code to show, so
+    that the template can render an appropriate placeholder instead of presenting
+    a bare string as though it were a syntax-highlighted example.
+
     :param concept_key: name of the key to format
     :param entry: entry to format it (in meta entry/syntax highlighter format)
     :param lexer: optional pre-fetched lexer
-    :return: string with code with applied HTML formatting
+    :return: string with code with applied HTML formatting, or None
     """
 
     if entry.concept_unknown(concept_key) or entry.concept_code(concept_key) is None:
-        return "Unknown"
+        return None
     if entry.concept_implemented(concept_key):
         if lexer is None:
             lexer = get_highlighter(entry.key)
@@ -614,18 +634,24 @@ def format_code_for_display(concept_key, entry, lexer=None):
     return None
 
 
-def format_comment_for_display(concept_key, entry):
+def format_placeholder_for_display(concept_key, entry):
     """
-    Returns the formatted HTML formatted comment text for a concept key (from a meta thesaurus
-            file) and an entry
+    Returns the placeholder text to show when a concept has neither code nor a comment.
+
+    Returning None keeps the comparison cell empty-free: every cell either shows
+    code, a note, or an explicit placeholder explaining why there is nothing.
 
     :param concept_key: the concept key located in the meta thesaurus JSON file
     :param entry: the entry to fetch concept key from
-    :return: formatted HTML for the comment
+    :return: placeholder text, or None when the concept has real content
     """
-    if not entry.concept_implemented(concept_key) and entry.concept_comment(concept_key) == "":
-        return "Not Implemented"
-    return entry.concept_comment(concept_key)
+    if entry.concept_unknown(concept_key):
+        return "No entry for this concept yet"
+    if not entry.concept_implemented(concept_key):
+        return "Not implemented in this language"
+    if not entry.concept_code(concept_key) and not entry.concept_comment(concept_key):
+        return "No example yet"
+    return None
 
 
 def concepts_data(key, name, entries, lexers=None, visit=None):
@@ -637,7 +663,7 @@ def concepts_data(key, name, entries, lexers=None, visit=None):
     :param entries: list of entries to compare / get a reference for
     :param lexers: optional list of pre-fetched lexers corresponding to entries
     :param visit: optional SiteVisit for logging missing items
-    :return: dict with code and comment for each entry
+    :return: dict with code, comment and placeholder for each entry
     """
     data = []
     for i, entry in enumerate(entries):
@@ -649,7 +675,8 @@ def concepts_data(key, name, entries, lexers=None, visit=None):
             
         data.append({
             "code": format_code_for_display(key, entry, lexer),
-            "comment": format_comment_for_display(key, entry)
+            "comment": entry.concept_comment(key),
+            "placeholder": format_placeholder_for_display(key, entry)
         })
 
     return {