diff --git a/services/web-ui/public/app.jsx b/services/web-ui/public/app.jsx
index 09a861b..d1af2db 100644
--- a/services/web-ui/public/app.jsx
+++ b/services/web-ui/public/app.jsx
@@ -24,6 +24,7 @@ function App() {
   }, []);
 
   const navigate = (id) => { setOpenAsset(null); setRoute(id); };
+  const openProjectFromAnywhere = (p) => { setOpenAsset(null); setOpenProject(p); setRoute('library'); };
 
   const crumbs = React.useMemo(() => {
     if (openAsset) return [
@@ -67,7 +68,7 @@ function App() {
     switch (route) {
       case 'home':       content = <Home navigate={navigate} />; break;
       case 'library':   content = <Library navigate={navigate} onOpenAsset={setOpenAsset} openProject={openProject} />; break;
-      case 'projects':  content = <Projects navigate={navigate} onOpenProject={(p) => { setOpenProject(p); setRoute('library'); }} />; 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;
       case 'schedule':  content = <Schedule navigate={navigate} />; break;
@@ -88,7 +89,14 @@ function App() {
     <div className="app" data-density="comfortable" data-grid-size="md" data-sidebar="expanded">
       <Sidebar active={openAsset ? 'library' : route} onNavigate={navigate} />
       <div className="main">
-        {!openAsset && <Topbar crumbs={crumbs} onNavigate={navigate} />}
+        {!openAsset && (
+          <Topbar
+            crumbs={crumbs}
+            onNavigate={navigate}
+            onOpenAsset={setOpenAsset}
+            onOpenProject={openProjectFromAnywhere}
+          />
+        )}
         {content}
       </div>
       {showNewRecorder && <NewRecorderModal open={showNewRecorder} onClose={() => setShowNewRecorder(false)} />}