diff --git a/web/components/Layout.tsx b/web/components/Layout.tsx
index cbf6fd0..be3e3ec 100644
--- a/web/components/Layout.tsx
+++ b/web/components/Layout.tsx
@@ -1,4 +1,5 @@
 import Head from "next/head";
+import Image from "next/image";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { ReactNode } from "react";
@@ -53,9 +54,15 @@ export default function Layout({
       </a>
       <header className="ul-shell__header">
         <Link href="/" className="ul-shell__brand" aria-label="UlHub jobs home">
-          <span className="ul-shell__brand-mark" aria-hidden="true">
-            UL
-          </span>
+          <Image
+            className="ul-shell__brand-mark"
+            src="/um-trace-mark.png"
+            alt=""
+            width={40}
+            height={40}
+            priority
+            unoptimized
+          />
           <span>UlHub</span>
         </Link>
         {user && (
diff --git a/web/public/um-trace-mark.png b/web/public/um-trace-mark.png
new file mode 100644
index 0000000..3807f20
Binary files /dev/null and b/web/public/um-trace-mark.png differ
diff --git a/web/styles/global.css b/web/styles/global.css
index 55e153b..9a5a7b2 100644
--- a/web/styles/global.css
+++ b/web/styles/global.css
@@ -131,16 +131,15 @@ textarea {
 }
 
 .ul-shell__brand-mark {
-  display: inline-grid;
+  display: block;
+  box-sizing: border-box;
   width: 2.5rem;
   height: 2.5rem;
-  place-items: center;
+  object-fit: contain;
+  padding: 0.375rem;
   border-radius: var(--portal-radius-sm);
-  background: var(--portal-primary);
-  color: var(--portal-on-primary);
-  font-family: var(--portal-font-mono);
-  font-size: 0.875rem;
-  letter-spacing: 0.04em;
+  border: 1px solid var(--portal-border);
+  background: var(--portal-surface);
 }
 
 .ul-shell__nav {
diff --git a/web/tests/s3-portal.test.mjs b/web/tests/s3-portal.test.mjs
index 6888e78..ea17164 100644
--- a/web/tests/s3-portal.test.mjs
+++ b/web/tests/s3-portal.test.mjs
@@ -58,6 +58,17 @@ test("the authenticated shell keeps organization and navigation context accessib
   assert.match(layout, /aria-current=/);
   assert.match(layout, /Skip to main content/);
   assert.match(layout, /aria-label="Primary navigation"/);
+  assert.match(layout, /src="\/um-trace-mark\.png"/);
+  assert.doesNotMatch(layout, />\s*UL\s*</);
+});
+
+test("the portal uses the cropped UM foreground without nested icon padding", () => {
+  const layout = read("components/Layout.tsx");
+  const css = read("styles/global.css");
+  assert.match(layout, /src="\/um-trace-mark\.png"/);
+  assert.doesNotMatch(layout, /um-trace-icon\.svg/);
+  assert.match(css, /\.ul-shell__brand-mark\s*\{[^}]*object-fit:\s*contain;/s);
+  assert.match(css, /\.ul-shell__brand-mark\s*\{[^}]*padding:\s*0\.375rem;/s);
 });
 
 test("status presentation always combines a readable label with an icon", () => {