diff --git a/services/web-ui/public/screens-projects.jsx b/services/web-ui/public/screens-projects.jsx
index 2128a89..e0bdab3 100644
--- a/services/web-ui/public/screens-projects.jsx
+++ b/services/web-ui/public/screens-projects.jsx
@@ -1,10 +1,9 @@
-// screens-projects.jsx — projects browse + project detail
-
-const { PROJECTS: ALL_PROJECTS, ASSETS } = window.ZAMPP_DATA;
+// screens-projects.jsx
 
 function Projects({ onOpenProject, navigate }) {
-  const [search, setSearch] = React.useState("");
-  const [view, setView] = React.useState("grid");
+  const { PROJECTS: ALL_PROJECTS, ASSETS } = window.ZAMPP_DATA;
+  const [search, setSearch] = React.useState('');
+  const [view, setView] = React.useState('grid');
   let projects = ALL_PROJECTS;
   if (search) projects = projects.filter(p => p.name.toLowerCase().includes(search.toLowerCase()));
 
@@ -19,40 +18,32 @@ function Projects({ onOpenProject, navigate }) {
           <input value={search} onChange={e => setSearch(e.target.value)} placeholder="Search projects…" />
         </div>
         <div className="tab-group">
-          <button className={view === "grid" ? "active" : ""} onClick={() => setView("grid")}><Icon name="grid" size={12} /></button>
-          <button className={view === "list" ? "active" : ""} onClick={() => setView("list")}><Icon name="list" size={12} /></button>
+          <button className={view === 'grid' ? 'active' : ''} onClick={() => setView('grid')}><Icon name="grid" size={12} /></button>
+          <button className={view === 'list' ? 'active' : ''} onClick={() => setView('list')}><Icon name="list" size={12} /></button>
         </div>
         <button className="btn primary"><Icon name="plus" />New project</button>
       </div>
       <div className="page-body">
-        {view === "grid" ? (
+        {projects.length === 0 ? (
+          <div style={{ padding: 40, textAlign: 'center', color: 'var(--text-3)' }}>No projects yet. Create one to get started.</div>
+        ) : view === 'grid' ? (
           <div className="projects-grid">
-            {projects.map(p => <ProjectCard key={p.id} project={p} onOpen={() => onOpenProject(p)} />)}
+            {projects.map(p => <ProjectCard key={p.id} project={p} assets={ASSETS} onOpen={() => onOpenProject(p)} />)}
           </div>
         ) : (
           <div className="panel">
-            <div className="list-row head" style={{ padding: "12px 16px", gridTemplateColumns: "1fr 100px 120px 120px 100px 80px" }}>
-              <div>Project</div>
-              <div>Assets</div>
-              <div>Storage</div>
-              <div>Updated</div>
-              <div>Members</div>
-              <div></div>
+            <div className="list-row head" style={{ padding: '12px 16px', gridTemplateColumns: '1fr 100px 120px 120px 80px' }}>
+              <div>Project</div><div>Assets</div><div>Storage</div><div>Updated</div><div></div>
             </div>
             {projects.map(p => (
-              <div key={p.id} className="list-row" style={{ padding: "12px 16px", gridTemplateColumns: "1fr 100px 120px 120px 100px 80px", borderBottom: "1px solid var(--border)" }} onClick={() => onOpenProject(p)}>
-                <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
+              <div key={p.id} className="list-row" style={{ padding: '12px 16px', gridTemplateColumns: '1fr 100px 120px 120px 80px', borderBottom: '1px solid var(--border)', cursor: 'pointer' }} onClick={() => onOpenProject(p)}>
+                <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                   <div style={{ width: 8, height: 32, borderRadius: 2, background: p.color }} />
-                  <div className="name">{p.name}</div>
+                  <div>{p.name}</div>
                 </div>
                 <div className="col-sub">{p.assets}</div>
-                <div className="col-sub">{(p.assets * 1.8).toFixed(1)} GB</div>
+                <div className="col-sub">—</div>
                 <div className="col-sub">{p.updated}</div>
-                <div style={{ display: "flex" }}>
-                  {["KM", "ZG", "JT"].slice(0, 3).map((a, i) => (
-                    <div key={i} className="avatar" style={{ width: 22, height: 22, fontSize: 10, marginLeft: i > 0 ? -6 : 0, background: avatarColor(a), border: "2px solid var(--bg-1)" }}>{a}</div>
-                  ))}
-                </div>
                 <button className="icon-btn" onClick={e => e.stopPropagation()}><Icon name="more" /></button>
               </div>
             ))}
@@ -63,19 +54,21 @@ function Projects({ onOpenProject, navigate }) {
   );
 }
 
-function ProjectCard({ project, onOpen }) {
-  const thumbs = ASSETS.slice(0, project.thumbs || 4);
+function ProjectCard({ project, assets, onOpen }) {
+  const thumbAssets = assets.filter(a => a.project_id === project.id).slice(0, 4);
   return (
     <div className="project-card" onClick={onOpen}>
       <div className="project-thumb-grid">
-        {thumbs.map((a, i) => (
+        {Array.from({ length: 4 }).map((_, i) => (
           <div key={i} className="project-thumb-cell">
-            <FauxFrame seed={(a.seed + i) % 6} />
+            {thumbAssets[i]
+              ? <AssetThumb asset={thumbAssets[i]} />
+              : <FauxFrame />}
           </div>
         ))}
       </div>
       <div className="project-card-body">
-        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
           <span style={{ width: 10, height: 10, borderRadius: 2, background: project.color }} />
           <span style={{ fontWeight: 600, fontSize: 14 }}>{project.name}</span>
         </div>
@@ -85,9 +78,8 @@ function ProjectCard({ project, onOpen }) {
           <span>updated {project.updated}</span>
         </div>
         <div className="project-bar">
-          <div className="project-segment" style={{ width: "60%", background: "#5B7CFA" }} />
-          <div className="project-segment" style={{ width: "25%", background: "#2DD4A8" }} />
-          <div className="project-segment" style={{ width: "10%", background: "#FF3B30" }} />
+          <div className="project-segment" style={{ width: '70%', background: project.color }} />
+          <div className="project-segment" style={{ width: '20%', background: 'var(--bg-4)' }} />
         </div>
       </div>
     </div>