diff --git a/package/share/ahriman/templates/build-status.jinja2 b/package/share/ahriman/templates/build-status.jinja2
index 8885cba7..fe2df761 100644
--- a/package/share/ahriman/templates/build-status.jinja2
+++ b/package/share/ahriman/templates/build-status.jinja2
@@ -15,16 +15,13 @@
         {% include "utils/bootstrap-scripts.jinja2" %}
 
         <div class="container">
-            <h1>ahriman
-                <img id="badge-version" src="https://img.shields.io/badge/version-unknown-informational" alt="unknown">
-                <img id="badge-repository" src="https://img.shields.io/badge/repository-unknown-informational" alt="unknown">
-                <img id="badge-architecture" src="https://img.shields.io/badge/architecture-unknown-informational" alt="unknown">
-                <img id="badge-status" src="https://img.shields.io/badge/service%20status-unknown-inactive" alt="unknown">
-            </h1>
+            <h1 id="badge-repository">ahriman</h1>
         </div>
 
         <div class="container">
             <div id="toolbar" class="dropdown">
+                <a id="badge-status" tabindex="0" role="button" class="btn btn-outline-secondary" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-content="no run data"><i class="bi bi-info-circle"></i></a>
+
                 {% if not auth.enabled or auth.username is not none %}
                     <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                         <i class="bi bi-box"></i> packages
@@ -51,11 +48,13 @@
                             </button>
                         </li>
                     </ul>
-                    <button id="key-import-btn" class="btn btn-info" data-bs-toggle="modal" data-bs-target="#key-import-modal" hidden>
+
+                    <button id="key-import-btn" type="button" class="btn btn-info" data-bs-toggle="modal" data-bs-target="#key-import-modal" hidden>
                         <i class="bi bi-key"></i> import key
                     </button>
                 {% endif %}
-                <button class="btn btn-secondary" onclick="reload()">
+
+                <button type="button" class="btn btn-secondary" onclick="reload()">
                     <i class="bi bi-arrow-clockwise"></i> reload
                 </button>
             </div>
@@ -96,7 +95,7 @@
         <div class="container">
             <footer class="d-flex flex-wrap justify-content-between align-items-center border-top">
                 <ul class="nav">
-                    <li><a class="nav-link" href="https://github.com/arcan1s/ahriman" title="sources"><i class="bi bi-github"></i> ahriman</a></li>
+                    <li><a id="badge-version" class="nav-link" href="https://github.com/arcan1s/ahriman" title="sources"><i class="bi bi-github"></i> ahriman</a></li>
                     <li><a class="nav-link" href="https://github.com/arcan1s/ahriman/releases" title="releases list">releases</a></li>
                     <li><a class="nav-link" href="https://github.com/arcan1s/ahriman/issues" title="issues tracker">report a bug</a></li>
                 </ul>
diff --git a/package/share/ahriman/templates/build-status/key-import-modal.jinja2 b/package/share/ahriman/templates/build-status/key-import-modal.jinja2
index 90188463..706ab994 100644
--- a/package/share/ahriman/templates/build-status/key-import-modal.jinja2
+++ b/package/share/ahriman/templates/build-status/key-import-modal.jinja2
@@ -22,7 +22,7 @@
                     <div class="form-group row">
                         <div class="col-sm-2"></div>
                         <div class="col-sm-10">
-                            <pre class="language-less"><code id="key-body-input" class="pre-scrollable language-less"></code><button id="key-copy-btn" type="button" class="btn language-less" onclick="copyPgpKey()"><i class="bi bi-clipboard"></i> copy</button></pre>
+                            <pre class="language-less"><samp id="key-body-input" class="pre-scrollable language-less"></samp><button id="key-copy-btn" type="button" class="btn language-less" onclick="copyPgpKey()"><i class="bi bi-clipboard"></i> copy</button></pre>
                         </div>
                     </div>
                 </div>
diff --git a/package/share/ahriman/templates/build-status/package-info-modal.jinja2 b/package/share/ahriman/templates/build-status/package-info-modal.jinja2
index d99a9fcc..85f20501 100644
--- a/package/share/ahriman/templates/build-status/package-info-modal.jinja2
+++ b/package/share/ahriman/templates/build-status/package-info-modal.jinja2
@@ -6,7 +6,7 @@
                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="close"></button>
             </div>
             <div class="modal-body">
-                <pre class="language-logs"><code id="package-info-logs-input" class="pre-scrollable language-logs"></code><button id="logs-copy-btn" type="button" class="btn language-logs" onclick="copyLogs()"><i class="bi bi-clipboard"></i> copy</button></pre>
+                <pre class="language-logs"><samp id="package-info-logs-input" class="pre-scrollable language-logs"></samp><button id="logs-copy-btn" type="button" class="btn language-logs" onclick="copyLogs()"><i class="bi bi-clipboard"></i> copy</button></pre>
             </div>
             <div class="modal-footer">
                 <button type="button" class="btn btn-secondary" onclick="showLogs()"><i class="bi bi-arrow-clockwise"></i> reload</button>
diff --git a/package/share/ahriman/templates/build-status/table.jinja2 b/package/share/ahriman/templates/build-status/table.jinja2
index 662e9b46..8582a410 100644
--- a/package/share/ahriman/templates/build-status/table.jinja2
+++ b/package/share/ahriman/templates/build-status/table.jinja2
@@ -16,7 +16,6 @@
         } else showLogs(data.id);
     });
 
-    const architectureBadge = $("#badge-architecture");
     const repositoryBadge = $("#badge-repository");
     const statusBadge = $("#badge-status");
     const versionBadge = $("#badge-version");
@@ -66,6 +65,14 @@
     function reload() {
         table.bootstrapTable("showLoading");
 
+        const badgeClass = status => {
+            if (status === "pending") return "btn-outline-warning";
+            if (status === "building") return "btn-outline-warning";
+            if (status === "failed") return "btn-outline-danger";
+            if (status === "success") return "btn-outline-success";
+            return "btn-outline-secondary";
+        };
+
         $.ajax({
             url: "/api/v1/packages",
             type: "GET",
@@ -123,27 +130,16 @@
             type: "GET",
             dataType: "json",
             success: response => {
-                const badgeColor = status => {
-                    if (status === "pending") return "yellow";
-                    if (status === "building") return "yellow";
-                    if (status === "failed") return "critical";
-                    if (status === "success") return "success";
-                    return "inactive";
-                };
+                repositoryBadge.text(`${response.repository} ${response.architecture}`);
+                versionBadge.html(`<i class="bi bi-github"></i> ahriman ${safe(response.version)}`);
 
-                architectureBadge
-                    .attr("src", `https://img.shields.io/badge/architecture-${response.architecture}-informational`)
-                    .attr("alt", response.architecture);
-                repositoryBadge
-                    .attr("src", `https://img.shields.io/badge/repository-${response.repository.replace(/-/g, "--")}-informational`)
-                    .attr("alt", response.repository);
                 statusBadge
-                    .attr("src", `https://img.shields.io/badge/service%20status-${response.status.status}-${badgeColor(response.status.status)}`)
-                    .attr("alt", response.status.status)
-                    .attr("title", `at ${new Date(1000 * response.status.timestamp).toISOString()}`);
-                versionBadge
-                    .attr("src", `https://img.shields.io/badge/version-${response.version}-informational`)
-                    .attr("alt", response.version);
+                    .popover("dispose")
+                    .attr("data-bs-content", `${response.status.status} at ${new Date(1000 * response.status.timestamp).toISOString()}`)
+                    .popover();
+                statusBadge.removeClass();
+                statusBadge.addClass("btn");
+                statusBadge.addClass(badgeClass(response.status.status));
             },
         });
     }
@@ -169,6 +165,7 @@
 
     $(() => {
         table.bootstrapTable({});
+        $("#status-popover").popover();
         reload();
     });
 </script>
\ No newline at end of file
diff --git a/package/share/ahriman/templates/utils/style.jinja2 b/package/share/ahriman/templates/utils/style.jinja2
index 8a25cc84..c7ec3970 100644
--- a/package/share/ahriman/templates/utils/style.jinja2
+++ b/package/share/ahriman/templates/utils/style.jinja2
@@ -3,7 +3,9 @@
 
 <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.21.1/dist/bootstrap-table.min.css" type="text/css">
 
-<link href="https://unpkg.com/jquery-resizable-columns@0.2.3/dist/jquery.resizableColumns.css" rel="stylesheet">
+<link rel="stylesheet" href="https://unpkg.com/jquery-resizable-columns@0.2.3/dist/jquery.resizableColumns.css" type="text/css">
+
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootswatch@5.2.2/dist/cosmo/bootstrap.min.css" integrity="sha256-5t++JZpgVLzo9vF7snO5Qw0y3fA5/NkoJENWB7kpg0E=" crossorigin="anonymous" type="text/css">
 
 <style>
     .pre-scrollable {