diff --git a/services/web-ui/public/app.jsx b/services/web-ui/public/app.jsx
index fe67838..f5b05a2 100644
--- a/services/web-ui/public/app.jsx
+++ b/services/web-ui/public/app.jsx
@@ -123,7 +123,7 @@ function App() {
     switch (effectiveRoute) {
       case 'home':       content = <Home navigate={navigate} />; break;
       case 'dashboard':  content = <Dashboard navigate={navigate} />; break;
-      case 'library':   content = <Library navigate={navigate} onOpenAsset={setOpenAsset} openProject={openProject} onClearProject={() => setOpenProject(null)} />; break;
+      case 'library':   content = <Library navigate={navigate} onOpenAsset={setOpenAsset} openProject={openProject} onClearProject={() => setOpenProject(null)} onOpenProject={openProjectFromAnywhere} />; break;
       case 'projects':  content = <Projects navigate={navigate} onOpenProject={openProjectFromAnywhere} />; break;
       case 'upload':    content = <Upload navigate={navigate} />; break;
       case 'recorders': content = <Recorders navigate={navigate} onNew={() => setShowNewRecorder(true)} />; break;
diff --git a/services/web-ui/public/screens-library.jsx b/services/web-ui/public/screens-library.jsx
index d56737c..a747c69 100644
--- a/services/web-ui/public/screens-library.jsx
+++ b/services/web-ui/public/screens-library.jsx
@@ -3,7 +3,7 @@
 
 function buildBinTree(f){const m={};f.forEach(b=>{m[b.id]={...b,children:[]};});const r=[];f.forEach(b=>{if(b.parent_id&&m[b.parent_id])m[b.parent_id].children.push(m[b.id]);else r.push(m[b.id]);});return r;}
 function collectDescendantIds(id,f){const s=new Set([id]);let c=true;while(c){c=false;f.forEach(b=>{if(b.parent_id&&s.has(b.parent_id)&&!s.has(b.id)){s.add(b.id);c=true;}});}return s;}
-function Library({ navigate, onOpenAsset, openProject, onClearProject }) {
+function Library({ navigate, onOpenAsset, openProject, onClearProject, onOpenProject }) {
   const PROJECTS = window.ZAMPP_DATA?.PROJECTS || [];
   const [bins, setBins] = React.useState(window.ZAMPP_DATA?.BINS || []);
   const BINS = bins; // legacy local name; keep so the rest of the function reads unchanged
@@ -327,7 +327,7 @@ function Library({ navigate, onOpenAsset, openProject, onClearProject }) {
             {PROJECTS.slice(0, 8).map(function(p) {
               return (
                 <div key={p.id} className={`rail-item ${openProject && openProject.id === p.id ? 'active' : ''}`} style={{ cursor: 'pointer' }}
-                  onClick={function() { navigate('projects'); }}
+                  onClick={function() { if (onOpenProject) onOpenProject(p); }}
                   onContextMenu={function(e) { openProjectCtx(p, e); }}>
                   <span className="rail-color-dot" style={{ background: p.color }} />
                   <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{p.name}</span>