diff --git a/public/images/hoelee-mark-96.png b/public/images/hoelee-mark-96.png
new file mode 100644
index 0000000..9cccf22
Binary files /dev/null and b/public/images/hoelee-mark-96.png differ
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index 0716b84..101cd29 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -176,11 +176,19 @@ const nav = isZh
   <body>
     <header class="site-header">
       <nav class="nav" aria-label="Main">
-        <a class="brand" href={isZh ? '/zh/' : '/'}>Mr<span class="dot"> Hoelee</span></a>
-        <a href={isZh ? '/zh/posts/' : '/posts/'}>{nav.posts}</a>
-        <a href={isZh ? '/zh/categories/' : '/categories/'}>{nav.categories}</a>
-        <a href={isZh ? '/zh/about/' : '/about/'}>{nav.about}</a>
-        <a href="/rss.xml" title={nav.rss}>{nav.rss}</a>
+        <a class="brand" href={isZh ? '/zh/' : '/'}>
+          <img class="brand-mark" src="/images/hoelee-mark-96.png" alt="" width="26" height="26" decoding="async" />
+          <span class="brand-name">{SITE.author}</span>
+        </a>
+        {/* Section links live in their own list so the mobile header can drop the
+            whole group onto a second row (`flex-basis: 100%`) instead of letting
+            individual links wrap around the search / language / theme controls. */}
+        <ul class="nav-links">
+          <li><a class="nav-link" href={isZh ? '/zh/posts/' : '/posts/'}>{nav.posts}</a></li>
+          <li><a class="nav-link" href={isZh ? '/zh/categories/' : '/categories/'}>{nav.categories}</a></li>
+          <li><a class="nav-link" href={isZh ? '/zh/about/' : '/about/'}>{nav.about}</a></li>
+          <li><a class="nav-link" href="/rss.xml" title={nav.rss}>{nav.rss}</a></li>
+        </ul>
         <button class="search-toggle" id="search-toggle" aria-label={isZh ? '搜索' : 'Search'}>
           ⌕ <span class="search-hint">{isZh ? '搜索' : 'Search'}</span><kbd class="search-key">/</kbd>
         </button>
diff --git a/src/styles/global.css b/src/styles/global.css
index a384ba0..b0084fe 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -107,22 +107,46 @@ body {
   gap: 1rem;
 }
 .nav .brand {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.55rem;
   font-weight: 700;
-  font-size: 1.05rem;
+  font-size: 1.02rem;
   color: var(--ink);
   text-decoration: none;
   margin-right: auto;
   letter-spacing: -0.01em;
   white-space: nowrap;
 }
+/* Brand mark: the three-colour Hoelee mark, rasterised from the vector source
+   with a transparent background (public/images/hoelee-mark-96.png = 96 px, so
+   it stays sharp at 26 CSS px on a 3x screen). It is decorative — the name text
+   next to it is the accessible label. */
+.nav .brand-mark {
+  width: 26px;
+  height: 26px;
+  display: block;
+  flex: none;
+}
+.nav .brand .brand-name { color: var(--ink); }
+.nav .brand:hover .brand-name { color: var(--brand); }
 .nav .brand .dot { color: var(--brand); }
-.nav a:not(.brand) {
+.nav .nav-link {
   color: var(--muted);
   text-decoration: none;
   font-size: 0.92rem;
   font-weight: 500;
+  white-space: nowrap;
+}
+.nav .nav-link:hover { color: var(--brand); }
+.nav-links {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
 }
-.nav a:not(.brand):hover { color: var(--brand); }
 .theme-toggle {
   background: none;
   border: 1px solid var(--border);
@@ -923,7 +947,17 @@ a.category-card:hover .art img {
 /* ---------- Mobile ---------- */
 @media (max-width: 600px) {
   .wrap { padding: 1.5rem 1.25rem 4rem; }
-  .nav { padding: 0.8rem 1.25rem; gap: 0.85rem; }
+  /* Two-row header: brand + search/lang/theme on row 1, the four section links
+     on row 2. Without the grouped list the links wrapped one at a time and
+     pushed the right-hand controls past the viewport edge at 320–390 px. */
+  .nav { padding: 0.7rem 1.25rem; gap: 0.55rem 0.7rem; }
+  .nav .brand { order: 1; font-size: 0.95rem; gap: 0.45rem; }
+  .nav .brand-mark { width: 22px; height: 22px; }
+  .search-toggle, .lang-switch, .theme-toggle { order: 2; }
+  .search-toggle { padding-inline: 0.55rem; }
+  .lang-switch { padding: 0.25rem 0.45rem; }
+  .theme-toggle { padding: 0.25rem 0.5rem; }
+  .nav-links { order: 3; flex: 0 0 100%; gap: 0.9rem; flex-wrap: wrap; row-gap: 0.35rem; }
   h1 { font-size: 1.7rem; }
   h2 { font-size: 1.25rem; }
   /* Related grid: one full-width card per row on phones, first four only. */