diff --git a/.gitignore b/.gitignore
index 81da510..10e691c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -33,3 +33,4 @@ yarn-error.log*
 # vercel
 .vercel
 .claude
+.vscode
diff --git a/components/Header.js b/components/Header.js
index 3ac5013..c95f342 100644
--- a/components/Header.js
+++ b/components/Header.js
@@ -23,7 +23,14 @@ export default function Header() {
     <header className={`header ${scrolled ? 'is-scrolled' : ''} ${open ? 'is-open' : ''}`}>
       <nav className="navbar shell">
         <Link href="/" className="logo" onClick={() => setOpen(false)}>
-          <span className="logo-mark">je</span>
+          <svg className="logo-mark" viewBox="0 0 32 32" aria-hidden="true">
+            <rect width="32" height="32" rx="7" fill="#0c0a09" />
+            <g fill="none" stroke="#fafaf9" strokeWidth="3" strokeLinecap="round">
+              <path d="M11.5 13v9a3.5 3.5 0 0 1-3.5 3.5h-1" />
+              <path d="M15.5 18h10a5 5 0 1 0-1.46 3.54" />
+            </g>
+            <circle cx="11.5" cy="8" r="2" fill="#34d399" />
+          </svg>
           <span className="logo-text">
             jesseinit<span className="logo-dot">.dev</span>
           </span>
diff --git a/styles/globals.scss b/styles/globals.scss
index bff3743..852d3ad 100644
--- a/styles/globals.scss
+++ b/styles/globals.scss
@@ -329,18 +329,17 @@ button {
   font-weight: 600;
 }
 
+// Same artwork as public/icon.svg; the ring keeps the dark tile visible in dark mode.
 .logo-mark {
-  display: grid;
-  place-items: center;
+  display: block;
   width: 32px;
   height: 32px;
-  border-radius: 9px;
-  background: var(--text);
-  color: var(--bg);
-  font-family: var(--font-mono);
-  font-size: 0.8125rem;
-  font-weight: 700;
-  letter-spacing: -0.02em;
+  flex-shrink: 0;
+  border-radius: 7px;
+}
+
+[data-theme='dark'] .logo-mark {
+  box-shadow: 0 0 0 1px var(--border-strong);
 }
 
 .logo-text {