diff --git a/frontend/src/App.css b/frontend/src/App.css
index 69d9525..4cff9ce 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -2334,6 +2334,8 @@ a.app-footer__repo:hover {
   max-width: 56rem;
   margin: 0 auto;
   padding: 1rem 0;
+  border-left: 4px solid transparent;
+  padding-left: 1.25rem;
 }
 
 .subtopic-page__title {
@@ -2347,6 +2349,13 @@ a.app-footer__repo:hover {
   font-size: 0.95rem;
   color: var(--color-text-secondary);
   margin: 0 0 2rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.subtopic-page__subtitle-sep {
+  color: var(--color-text-muted);
 }
 
 .subtopic-groups {
diff --git a/frontend/src/pages/SearchResults.tsx b/frontend/src/pages/SearchResults.tsx
index 916ae64..f609099 100644
--- a/frontend/src/pages/SearchResults.tsx
+++ b/frontend/src/pages/SearchResults.tsx
@@ -9,6 +9,7 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { Link, useSearchParams, useNavigate } from "react-router-dom";
 import { searchApi, type SearchResultItem } from "../api/public-client";
+import { catSlug } from "../utils/catSlug";
 
 export default function SearchResults() {
   const [searchParams] = useSearchParams();
@@ -167,7 +168,7 @@ function SearchResultCard({ item }: { item: SearchResultItem }) {
         {item.topic_category && (
           <>
             <span className="queue-card__separator">·</span>
-            <span>{item.topic_category}</span>
+            <span className={`badge badge--cat-${catSlug(item.topic_category)}`}>{item.topic_category}</span>
           </>
         )}
         {item.topic_tags.length > 0 && (
diff --git a/frontend/src/pages/SubTopicPage.tsx b/frontend/src/pages/SubTopicPage.tsx
index ebc53e2..09923f6 100644
--- a/frontend/src/pages/SubTopicPage.tsx
+++ b/frontend/src/pages/SubTopicPage.tsx
@@ -11,6 +11,7 @@ import {
   fetchSubTopicTechniques,
   type TechniqueListItem,
 } from "../api/public-client";
+import { catSlug } from "../utils/catSlug";
 
 /** Convert a URL slug to a display name: replace hyphens with spaces, title-case. */
 function slugToDisplayName(slug: string): string {
@@ -91,9 +92,13 @@ export default function SubTopicPage() {
   }
 
   const groups = groupByCreator(techniques);
+  const slug = category ? catSlug(categoryDisplay) : "";
 
   return (
-    <div className="subtopic-page">
+    <div
+      className="subtopic-page"
+      style={slug ? { borderLeftColor: `var(--color-badge-cat-${slug}-text)` } : undefined}
+    >
       {/* Breadcrumbs */}
       <nav className="breadcrumbs" aria-label="Breadcrumb">
         <Link to="/topics" className="breadcrumbs__link">Topics</Link>
@@ -105,7 +110,9 @@ export default function SubTopicPage() {
 
       <h2 className="subtopic-page__title">{subtopicDisplay}</h2>
       <p className="subtopic-page__subtitle">
-        {techniques.length} technique{techniques.length !== 1 ? "s" : ""} in {categoryDisplay}
+        <span className={`badge badge--cat-${slug}`}>{categoryDisplay}</span>
+        <span className="subtopic-page__subtitle-sep">·</span>
+        {techniques.length} technique{techniques.length !== 1 ? "s" : ""}
       </p>
 
       {techniques.length === 0 ? (
diff --git a/frontend/src/pages/TopicsBrowse.tsx b/frontend/src/pages/TopicsBrowse.tsx
index 1a3876b..9e8f892 100644
--- a/frontend/src/pages/TopicsBrowse.tsx
+++ b/frontend/src/pages/TopicsBrowse.tsx
@@ -13,11 +13,7 @@ import { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
 import { fetchTopics, type TopicCategory } from "../api/public-client";
 import { CATEGORY_ICON } from "../components/CategoryIcons";
-
-/** Derive the badge CSS slug from a category name. */
-function catSlug(name: string): string {
-  return name.toLowerCase().replace(/\s+/g, "-");
-}
+import { catSlug } from "../utils/catSlug";
 
 
 
diff --git a/frontend/src/utils/catSlug.ts b/frontend/src/utils/catSlug.ts
new file mode 100644
index 0000000..f967f2a
--- /dev/null
+++ b/frontend/src/utils/catSlug.ts
@@ -0,0 +1,4 @@
+/** Derive the badge CSS slug from a category name. */
+export function catSlug(name: string): string {
+  return name.toLowerCase().replace(/\s+/g, "-");
+}
diff --git a/frontend/tsconfig.app.tsbuildinfo b/frontend/tsconfig.app.tsbuildinfo
index 38b7d02..86738dc 100644
--- a/frontend/tsconfig.app.tsbuildinfo
+++ b/frontend/tsconfig.app.tsbuildinfo
@@ -1 +1 @@
-{"root":["./src/App.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/api/public-client.ts","./src/components/AdminDropdown.tsx","./src/components/AppFooter.tsx","./src/components/CategoryIcons.tsx","./src/components/CopyLinkButton.tsx","./src/components/CreatorAvatar.tsx","./src/components/ReportIssueModal.tsx","./src/pages/About.tsx","./src/pages/AdminPipeline.tsx","./src/pages/AdminReports.tsx","./src/pages/CreatorDetail.tsx","./src/pages/CreatorsBrowse.tsx","./src/pages/Home.tsx","./src/pages/SearchResults.tsx","./src/pages/SubTopicPage.tsx","./src/pages/TechniquePage.tsx","./src/pages/TopicsBrowse.tsx"],"version":"5.6.3"}
\ No newline at end of file
+{"root":["./src/App.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/api/public-client.ts","./src/components/AdminDropdown.tsx","./src/components/AppFooter.tsx","./src/components/CategoryIcons.tsx","./src/components/CopyLinkButton.tsx","./src/components/CreatorAvatar.tsx","./src/components/ReportIssueModal.tsx","./src/pages/About.tsx","./src/pages/AdminPipeline.tsx","./src/pages/AdminReports.tsx","./src/pages/CreatorDetail.tsx","./src/pages/CreatorsBrowse.tsx","./src/pages/Home.tsx","./src/pages/SearchResults.tsx","./src/pages/SubTopicPage.tsx","./src/pages/TechniquePage.tsx","./src/pages/TopicsBrowse.tsx","./src/utils/catSlug.ts"],"version":"5.6.3"}
\ No newline at end of file