diff --git a/src/components/Utilities/UtilityShellPage.tsx b/src/components/Utilities/UtilityShellPage.tsx
index f39f8a7..3cea21a 100644
--- a/src/components/Utilities/UtilityShellPage.tsx
+++ b/src/components/Utilities/UtilityShellPage.tsx
@@ -17,6 +17,11 @@ import {
   shouldReportUtilityUsage,
 } from '@site/src/shared/utility-usage';
 import type {UtilityPageConfig} from '@site/src/data/utilityShellPages';
+// Related tools reuse the catalog card from the home page rather than a
+// look-alike of their own, so a utility is presented the same way wherever it
+// appears — same thumbnail, same tech badge, same localized copy.
+import UtilityCard from '@site/src/components/Home/UtilityCard';
+import homeStyles from '@site/src/pages/index.module.css';
 import UtilityErrorBoundary from './UtilityErrorBoundary';
 import {saveCalculation} from '@site/src/shared/calculation-history';
 import {
@@ -371,13 +376,9 @@ export default function UtilityShellPage({tool, ...config}: UtilityShellPageProp
           {relatedUtilities.length > 0 ? (
             <div className="utility-related">
               <h2 className="utility-related__title">{t('relatedTools.title')}</h2>
-              <div className="utility-related__grid">
+              <div className={homeStyles.utilityGrid}>
                 {relatedUtilities.map((related) => (
-                  <Link key={related.id} to={related.href} className="utility-related__card">
-                    <span className="utility-related__name">{related.name}</span>
-                    <span className="utility-related__desc">{related.description}</span>
-                    <span className="utility-related__meta">{related.standards}</span>
-                  </Link>
+                  <UtilityCard key={related.id} utility={related} />
                 ))}
               </div>
             </div>
diff --git a/src/pages/index.module.css b/src/pages/index.module.css
index 9ba1cd7..5506984 100644
--- a/src/pages/index.module.css
+++ b/src/pages/index.module.css
@@ -732,6 +732,13 @@
   line-height: 1.25;
   position: relative;
   z-index: 3;
+  /* Pinned to the card rather than inherited. Every other line in the card
+     already sets its own colour; the title used to be the one that took
+     whatever the surrounding page happened to be using, which is fine on the
+     home page (its <main> sets a colour per theme) and wrong anywhere else.
+     The utility shell is dark-first and hands down a near-white regardless of
+     theme, so a reused card lost its title on a white background. */
+  color: #f3f6ff;
 }
 
 .titleLink {
@@ -989,6 +996,10 @@
   color: var(--light-text-muted);
 }
 
+:global(html[data-theme='light']) .utilityCard h3 {
+  color: #0f172a;
+}
+
 :global(html[data-theme='light']) .utilityCard {
   border-color: var(--card-border);
   background: #ffffff;
diff --git a/static/utilities/util-shell.css b/static/utilities/util-shell.css
index aabf9f0..dd3a3b2 100644
--- a/static/utilities/util-shell.css
+++ b/static/utilities/util-shell.css
@@ -603,55 +603,12 @@ html[data-theme='light'] body.utility-shell-page {
   margin-bottom: 0.9rem;
 }
 
-.utility-related__grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
-  gap: 0.75rem;
-}
-
-.utility-related__card {
-  display: flex;
-  flex-direction: column;
-  gap: 0.35rem;
-  padding: 0.85rem 1rem;
-  border: 1px solid rgba(255, 255, 255, 0.12);
-  border-radius: 12px;
-  background: rgba(255, 255, 255, 0.04);
-  text-decoration: none;
-  transition: border-color 0.2s ease, background 0.2s ease;
-}
-
-.utility-related__card:hover {
-  border-color: rgba(100, 255, 218, 0.45);
-  background: rgba(100, 255, 218, 0.06);
-  text-decoration: none;
-}
-
-.utility-related__name {
-  font-weight: 600;
-  color: var(--ifm-heading-color, #f5f7ff);
-}
-
-.utility-related__desc {
-  font-size: 0.8rem;
-  opacity: 0.75;
-}
-
-.utility-related__meta {
-  font-size: 0.72rem;
-  font-family: var(--ifm-font-family-monospace);
-  opacity: 0.55;
-}
-
-html[data-theme='light'] .utility-related__card {
-  border-color: rgba(15, 23, 42, 0.12);
-  background: rgba(15, 23, 42, 0.03);
-}
-
-html[data-theme='light'] .utility-related__card:hover {
-  border-color: rgba(15, 118, 110, 0.45);
-  background: rgba(15, 118, 110, 0.05);
-}
+/* The cards themselves are the home-page catalog card (UtilityCard), so the
+   grid and card styling live in src/pages/index.module.css. The bespoke
+   .utility-related__card set that used to live here is gone: its title rule
+   read `color: var(--ifm-heading-color, #f5f7ff)` and the light-theme override
+   only restyled the card, so in light mode the names fell back to near-white
+   on white and were effectively invisible. */
 
 /* Guest notice (issue #112): shown under the tool frame for signed-out
    visitors when the site setting gates exports behind sign-in. */