diff --git a/frontend/index.html b/frontend/index.html
index 5cbc595..932cfe1 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -11,11 +11,11 @@
 
 <header>
   <div class="breadcrumb" onclick="navigate('library')">
-    <div class="crumb-main">
-      <img src="frontend/logo.svg" class="header-logo" alt="">
+    <img src="frontend/logo.svg" class="header-logo" alt="">
+    <div class="crumb-text">
       <span><span class="prompt">$</span> protocol-droid</span>
+      <span class="crumb-path" id="crumbPath"></span>
     </div>
-    <span class="crumb-path" id="crumbPath"></span>
   </div>
   <nav id="navBar">
     <a href="#library" class="active" data-view="library">PROTOCOLS</a>
diff --git a/frontend/style.css b/frontend/style.css
index db886ef..0d04e70 100644
--- a/frontend/style.css
+++ b/frontend/style.css
@@ -59,8 +59,8 @@ header .breadcrumb {
   font-size: 14px;
   letter-spacing: 0.5px;
   display: flex;
-  flex-direction: column;
-  gap: 0;
+  align-items: center;
+  gap: 8px;
   color: var(--accent-bright);
   cursor: pointer;
   flex-shrink: 1;
@@ -68,15 +68,15 @@ header .breadcrumb {
   overflow: hidden;
   line-height: 1.2;
 }
-header .breadcrumb .crumb-main {
+.header-logo { width: 32px; height: 32px; flex-shrink: 0; display: block; }
+header .breadcrumb .crumb-text {
   display: flex;
-  align-items: center;
-  gap: 6px;
-  white-space: nowrap;
+  flex-direction: column;
+  min-width: 0;
+  overflow: hidden;
 }
 header .breadcrumb .prompt { color: var(--green-bright); font-weight: normal; }
 header .breadcrumb:hover { text-decoration: none; }
-.header-logo { width: 24px; height: 24px; flex-shrink: 0; display: block; }
 header .crumb-path {
   font-size: 11px;
   color: var(--ink-dim);
@@ -84,8 +84,6 @@ header .crumb-path {
   text-overflow: ellipsis;
   max-width: 100%;
   cursor: pointer;
-  display: block;
-  width: 100%;
 }
 
 /* Desktop nav — inline */