diff --git a/src/app/zxdb/entries/[id]/EntryDetail.tsx b/src/app/zxdb/entries/[id]/EntryDetail.tsx
index 56bcceb..adab163 100644
--- a/src/app/zxdb/entries/[id]/EntryDetail.tsx
+++ b/src/app/zxdb/entries/[id]/EntryDetail.tsx
@@ -165,650 +165,651 @@ export default function EntryDetailClient({ data }: { data: EntryDetailData | nu
         {data.isXrated ? <span className="badge text-bg-danger">18+</span> : null}
       </div>
 
-      <hr />
-
-      <div className="table-responsive">
-        <table className="table table-striped table-hover align-middle">
-          <thead>
-            <tr>
-              <th style={{ width: 220 }}>Field</th>
-              <th>Value</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td>ID</td>
-              <td>{data.id}</td>
-            </tr>
-            <tr>
-              <td>Title</td>
-              <td>{data.title}</td>
-            </tr>
-            <tr>
-              <td>Machine</td>
-              <td>
-                {data.machinetype.id != null ? (
-                  data.machinetype.name ? (
-                    <Link href={`/zxdb/machinetypes/${data.machinetype.id}`}>{data.machinetype.name}</Link>
-                  ) : (
-                    <span>#{data.machinetype.id}</span>
-                  )
-                ) : (
-                  <span className="text-secondary">-</span>
-                )}
-              </td>
-            </tr>
-            <tr>
-              <td>Language</td>
-              <td>
-                {data.language.id ? (
-                  data.language.name ? (
-                    <Link href={`/zxdb/languages/${data.language.id}`}>{data.language.name}</Link>
-                  ) : (
-                    <span>{data.language.id}</span>
-                  )
-                ) : (
-                  <span className="text-secondary">-</span>
-                )}
-              </td>
-            </tr>
-            <tr>
-              <td>Genre</td>
-              <td>
-                {data.genre.id ? (
-                  data.genre.name ? (
-                    <Link href={`/zxdb/genres/${data.genre.id}`}>{data.genre.name}</Link>
-                  ) : (
-                    <span>#{data.genre.id}</span>
-                  )
-                ) : (
-                  <span className="text-secondary">-</span>
-                )}
-              </td>
-            </tr>
-            {typeof data.maxPlayers !== "undefined" && (
-              <tr>
-                <td>Max Players</td>
-                <td>{data.maxPlayers}</td>
-              </tr>
-            )}
-            {typeof data.availabletypeId !== "undefined" && (
-              <tr>
-                <td>Available Type</td>
-                <td>{data.availabletypeId ?? <span className="text-secondary">-</span>}</td>
-              </tr>
-            )}
-            {typeof data.withoutLoadScreen !== "undefined" && (
-              <tr>
-                <td>Without Load Screen</td>
-                <td>{data.withoutLoadScreen ? "Yes" : "No"}</td>
-              </tr>
-            )}
-            {typeof data.withoutInlay !== "undefined" && (
-              <tr>
-                <td>Without Inlay</td>
-                <td>{data.withoutInlay ? "Yes" : "No"}</td>
-              </tr>
-            )}
-            {typeof data.issueId !== "undefined" && (
-              <tr>
-                <td>Issue</td>
-                <td>{data.issueId ? <span>#{data.issueId}</span> : <span className="text-secondary">-</span>}</td>
-              </tr>
-            )}
-          </tbody>
-        </table>
-      </div>
-
-      <hr />
-
-      {/* Downloads (flat, by entry_id). Render only this flat section; do not render grouped downloads here. */}
-      <div>
-        <h5>Downloads</h5>
-        {(!data.downloadsFlat || data.downloadsFlat.length === 0) && <div className="text-secondary">No downloads</div>}
-        {data.downloadsFlat && data.downloadsFlat.length > 0 && (
-          <div className="table-responsive">
-            <table className="table table-sm table-striped align-middle">
-              <thead>
-                <tr>
-                  <th>Type</th>
-                  <th>Link</th>
-                  <th style={{ width: 120 }} className="text-end">Size</th>
-                  <th style={{ width: 260 }}>MD5</th>
-                  <th>Flags</th>
-                  <th>Details</th>
-                  <th>Comments</th>
-                </tr>
-              </thead>
-              <tbody>
-                {data.downloadsFlat.map((d) => {
-                  const isHttp = d.link.startsWith("http://") || d.link.startsWith("https://");
-                  return (
-                    <tr key={d.id}>
-                      <td><span className="badge text-bg-secondary">{d.type.name}</span></td>
-                      <td>
-                        {isHttp ? (
-                          <a href={d.link} target="_blank" rel="noopener noreferrer">{d.link}</a>
-                        ) : (
-                          <span>{d.link}</span>
-                        )}
-                      </td>
-                      <td className="text-end">{typeof d.size === "number" ? d.size.toLocaleString() : "-"}</td>
-                      <td><code>{d.md5 ?? "-"}</code></td>
-                      <td>
-                        <div className="d-flex gap-1 flex-wrap">
-                          {d.isDemo ? <span className="badge text-bg-warning">Demo</span> : null}
-                          {d.scheme.name ? <span className="badge text-bg-info">{d.scheme.name}</span> : null}
-                          {d.source.name ? <span className="badge text-bg-light border">{d.source.name}</span> : null}
-                          {d.case.name ? <span className="badge text-bg-secondary">{d.case.name}</span> : null}
-                        </div>
-                      </td>
-                      <td>
-                        <div className="d-flex gap-2 flex-wrap align-items-center">
-                          {d.language.name && (
-                            <Link className="badge text-bg-info text-decoration-none" href={`/zxdb/languages/${d.language.id}`}>{d.language.name}</Link>
-                          )}
-                          {d.machinetype.name && (
-                            <Link className="badge text-bg-primary text-decoration-none" href={`/zxdb/machinetypes/${d.machinetype.id}`}>{d.machinetype.name}</Link>
-                          )}
-                          {typeof d.year === "number" ? <span className="badge text-bg-dark">{d.year}</span> : null}
-                          <Link className="badge text-bg-light text-decoration-none" href={`/zxdb/releases/${data.id}/${d.releaseSeq}`}>
-                            rel #{d.releaseSeq}
-                          </Link>
-                        </div>
-                      </td>
-                      <td>{d.comments ?? ""}</td>
+      <div className="row g-3 mt-2">
+        <div className="col-lg-4">
+          <div className="card shadow-sm mb-3">
+            <div className="card-body">
+              <h5 className="card-title">Entry Summary</h5>
+              <div className="table-responsive">
+                <table className="table table-sm table-striped align-middle mb-0">
+                  <tbody>
+                    <tr>
+                      <th style={{ width: 180 }}>ID</th>
+                      <td>{data.id}</td>
                     </tr>
-                  );
-                })}
-              </tbody>
-            </table>
-          </div>
-        )}
-      </div>
-
-      <hr />
-
-      <div className="row g-4">
-        <div className="col-lg-6">
-          <h5>Authors</h5>
-          {data.authors.length === 0 && <div className="text-secondary">Unknown</div>}
-          {data.authors.length > 0 && (
-            <ul className="list-unstyled mb-0">
-              {data.authors.map((a) => (
-                <li key={a.id}>
-                  <Link href={`/zxdb/labels/${a.id}`}>{a.name}</Link>
-                </li>
-              ))}
-            </ul>
-          )}
-        </div>
-        <div className="col-lg-6">
-          <h5>Publishers</h5>
-          {data.publishers.length === 0 && <div className="text-secondary">Unknown</div>}
-          {data.publishers.length > 0 && (
-            <ul className="list-unstyled mb-0">
-              {data.publishers.map((p) => (
-                <li key={p.id}>
-                  <Link href={`/zxdb/labels/${p.id}`}>{p.name}</Link>
-                </li>
-              ))}
-            </ul>
-          )}
-        </div>
-      </div>
-
-      <hr />
-
-      <div>
-        <h5>Releases</h5>
-        {(!data.releases || data.releases.length === 0) && <div className="text-secondary">No releases recorded</div>}
-        {data.releases && data.releases.length > 0 && (
-          <div className="table-responsive">
-            <table className="table table-sm table-striped align-middle">
-              <thead>
-                <tr>
-                  <th style={{ width: 120 }}>Release #</th>
-                  <th style={{ width: 120 }}>Year</th>
-                  <th>Downloads</th>
-                </tr>
-              </thead>
-              <tbody>
-                {data.releases.map((r) => (
-                  <tr key={r.releaseSeq}>
-                    <td>
-                      <Link href={`/zxdb/releases/${data.id}/${r.releaseSeq}`}>#{r.releaseSeq}</Link>
-                    </td>
-                    <td>{r.year ?? <span className="text-secondary">-</span>}</td>
-                    <td>{r.downloads.length}</td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        )}
-      </div>
-
-      <hr />
-
-      <div>
-        <h5>Origins</h5>
-        {(!data.origins || data.origins.length === 0) && <div className="text-secondary">No origins recorded</div>}
-        {data.origins && data.origins.length > 0 && (
-          <div className="table-responsive">
-            <table className="table table-sm table-striped align-middle">
-              <thead>
-                <tr>
-                  <th>Type</th>
-                  <th>Title</th>
-                  <th>Publication</th>
-                  <th style={{ width: 200 }}>Issue</th>
-                  <th style={{ width: 140 }}>Date</th>
-                </tr>
-              </thead>
-              <tbody>
-                {data.origins.map((o, idx) => {
-                  const dateParts = [o.date.year, o.date.month, o.date.day]
-                    .filter((v) => typeof v === "number" && Number.isFinite(v))
-                    .map((v, i) => (i === 0 ? String(v) : String(v).padStart(2, "0")));
-                  const dateText = dateParts.length ? dateParts.join("/") : "-";
-                  return (
-                    <tr key={`${o.type.id}-${idx}`}>
-                      <td>{o.type.name ?? o.type.id}</td>
-                      <td>{o.libraryTitle}</td>
-                      <td>{o.publication ?? <span className="text-secondary">-</span>}</td>
+                    <tr>
+                      <th>Title</th>
+                      <td>{data.title}</td>
+                    </tr>
+                    <tr>
+                      <th>Machine</th>
                       <td>
-                        {o.issue ? (
-                          <div className="d-flex flex-column">
-                            <Link href={`/zxdb/issues/${o.issue.id}`}>Issue #{o.issue.id}</Link>
-                            {o.issue.magazineId != null && (
-                              <Link className="text-secondary small" href={`/zxdb/magazines/${o.issue.magazineId}`}>
-                                {o.issue.magazineTitle ?? `Magazine #${o.issue.magazineId}`}
-                              </Link>
-                            )}
-                          </div>
-                        ) : o.containerId ? (
-                          <span>Container #{o.containerId}</span>
+                        {data.machinetype.id != null ? (
+                          data.machinetype.name ? (
+                            <Link href={`/zxdb/machinetypes/${data.machinetype.id}`}>{data.machinetype.name}</Link>
+                          ) : (
+                            <span>#{data.machinetype.id}</span>
+                          )
                         ) : (
                           <span className="text-secondary">-</span>
                         )}
                       </td>
-                      <td>{dateText}</td>
                     </tr>
-                  );
-                })}
-              </tbody>
-            </table>
-          </div>
-        )}
-      </div>
-
-      <hr />
-
-      <div>
-        <h5>Relations</h5>
-        {(!data.relations || data.relations.length === 0) && <div className="text-secondary">No relations recorded</div>}
-        {data.relations && data.relations.length > 0 && (
-          <div className="table-responsive">
-            <table className="table table-sm table-striped align-middle">
-              <thead>
-                <tr>
-                  <th style={{ width: 90 }}>Direction</th>
-                  <th style={{ width: 160 }}>Type</th>
-                  <th>Entry</th>
-                </tr>
-              </thead>
-              <tbody>
-                {data.relations.map((r, idx) => (
-                  <tr key={`${r.entry.id}-${r.type.id}-${idx}`}>
-                    <td>{r.direction === "from" ? "From" : "To"}</td>
-                    <td>{r.type.name ?? r.type.id}</td>
-                    <td>
-                      <Link href={`/zxdb/entries/${r.entry.id}`}>
-                        {r.entry.title ?? `Entry #${r.entry.id}`}
-                      </Link>
-                    </td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        )}
-      </div>
-
-      <hr />
-
-      <div>
-        <h5>Tags / Members</h5>
-        {(!data.tags || data.tags.length === 0) && <div className="text-secondary">No tags recorded</div>}
-        {data.tags && data.tags.length > 0 && (
-          <div className="table-responsive">
-            <table className="table table-sm table-striped align-middle">
-              <thead>
-                <tr>
-                  <th>Tag</th>
-                  <th style={{ width: 140 }}>Type</th>
-                  <th style={{ width: 140 }}>Category</th>
-                  <th style={{ width: 120 }}>Member Seq</th>
-                  <th>Links</th>
-                </tr>
-              </thead>
-              <tbody>
-                {data.tags.map((t) => (
-                  <tr key={`${t.id}-${t.category.id ?? "none"}`}>
-                    <td>{t.name}</td>
-                    <td>{t.type.name ?? t.type.id}</td>
-                    <td>{t.category.name ?? (t.category.id != null ? `#${t.category.id}` : "-")}</td>
-                    <td>{t.memberSeq ?? <span className="text-secondary">-</span>}</td>
-                    <td>
-                      <div className="d-flex gap-2 flex-wrap">
-                        {t.link && (
-                          <a href={t.link} target="_blank" rel="noreferrer">Link</a>
-                        )}
-                        {t.comments && <span className="text-secondary">{t.comments}</span>}
-                        {!t.link && !t.comments && <span className="text-secondary">-</span>}
-                      </div>
-                    </td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        )}
-      </div>
-
-      <hr />
-
-      <div>
-        <h5>Ports</h5>
-        {(!data.ports || data.ports.length === 0) && <div className="text-secondary">No ports recorded</div>}
-        {data.ports && data.ports.length > 0 && (
-          <div className="table-responsive">
-            <table className="table table-sm table-striped align-middle">
-              <thead>
-                <tr>
-                  <th>Title</th>
-                  <th style={{ width: 160 }}>Platform</th>
-                  <th style={{ width: 120 }}>Official</th>
-                  <th>Link</th>
-                </tr>
-              </thead>
-              <tbody>
-                {data.ports.map((p) => (
-                  <tr key={p.id}>
-                    <td>{p.title ?? <span className="text-secondary">-</span>}</td>
-                    <td>{p.platform.name ?? `#${p.platform.id}`}</td>
-                    <td>{p.isOfficial ? "Yes" : "No"}</td>
-                    <td>
-                      {p.linkSystem ? (
-                        <a href={p.linkSystem} target="_blank" rel="noreferrer">Link</a>
-                      ) : (
-                        <span className="text-secondary">-</span>
-                      )}
-                    </td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        )}
-      </div>
-
-      <hr />
-
-      <div>
-        <h5>Remakes</h5>
-        {(!data.remakes || data.remakes.length === 0) && <div className="text-secondary">No remakes recorded</div>}
-        {data.remakes && data.remakes.length > 0 && (
-          <div className="table-responsive">
-            <table className="table table-sm table-striped align-middle">
-              <thead>
-                <tr>
-                  <th>Title</th>
-                  <th style={{ width: 160 }}>Platforms</th>
-                  <th style={{ width: 140 }}>Years</th>
-                  <th style={{ width: 140 }}>File</th>
-                  <th>Notes</th>
-                </tr>
-              </thead>
-              <tbody>
-                {data.remakes.map((r) => (
-                  <tr key={r.id}>
-                    <td>{r.title}</td>
-                    <td>{r.platforms ?? <span className="text-secondary">-</span>}</td>
-                    <td>{r.remakeYears ?? <span className="text-secondary">-</span>}</td>
-                    <td>
-                      {r.fileLink ? (
-                        <a href={r.fileLink} target="_blank" rel="noreferrer">File</a>
-                      ) : (
-                        <span className="text-secondary">-</span>
-                      )}
-                    </td>
-                    <td>{r.remakeStatus ?? r.authors ?? <span className="text-secondary">-</span>}</td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        )}
-      </div>
-
-      <hr />
-
-      <div>
-        <h5>Scores</h5>
-        {(!data.scores || data.scores.length === 0) && <div className="text-secondary">No scores recorded</div>}
-        {data.scores && data.scores.length > 0 && (
-          <div className="table-responsive">
-            <table className="table table-sm table-striped align-middle">
-              <thead>
-                <tr>
-                  <th>Website</th>
-                  <th style={{ width: 120 }}>Score</th>
-                  <th style={{ width: 120 }}>Votes</th>
-                </tr>
-              </thead>
-              <tbody>
-                {data.scores.map((s, idx) => (
-                  <tr key={`${s.website.id}-${idx}`}>
-                    <td>{s.website.name ?? `#${s.website.id}`}</td>
-                    <td>{s.score}</td>
-                    <td>{s.votes}</td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        )}
-      </div>
-
-      <hr />
-
-      <div>
-        <h5>Notes</h5>
-        {(!data.notes || data.notes.length === 0) && <div className="text-secondary">No notes recorded</div>}
-        {data.notes && data.notes.length > 0 && (
-          <div className="table-responsive">
-            <table className="table table-sm table-striped align-middle">
-              <thead>
-                <tr>
-                  <th style={{ width: 140 }}>Type</th>
-                  <th>Text</th>
-                </tr>
-              </thead>
-              <tbody>
-                {data.notes.map((n) => (
-                  <tr key={n.id}>
-                    <td>{n.type.name ?? n.type.id}</td>
-                    <td>{n.text}</td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        )}
-      </div>
-
-      <hr />
-
-      {/* Aliases (alternative titles) */}
-      <div>
-        <h5>Aliases</h5>
-        {(!data.aliases || data.aliases.length === 0) && <div className="text-secondary">No aliases</div>}
-        {data.aliases && data.aliases.length > 0 && (
-          <div className="table-responsive">
-            <table className="table table-sm table-striped align-middle">
-              <thead>
-                <tr>
-                  <th style={{ width: 90 }}>Release #</th>
-                  <th style={{ width: 120 }}>Language</th>
-                  <th>Title</th>
-                </tr>
-              </thead>
-              <tbody>
-                {data.aliases.map((a, idx) => (
-                  <tr key={`${a.releaseSeq}-${a.languageId}-${idx}`}>
-                    <td>
-                      <Link href={`/zxdb/releases/${data.id}/${a.releaseSeq}`}>#{a.releaseSeq}</Link>
-                    </td>
-                    <td>{a.languageId}</td>
-                    <td>{a.title}</td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        )}
-      </div>
-
-      <hr />
-
-      <div>
-        <h5>Licenses</h5>
-        {(!data.licenses || data.licenses.length === 0) && <div className="text-secondary">No licenses linked</div>}
-        {data.licenses && data.licenses.length > 0 && (
-          <div className="table-responsive">
-            <table className="table table-sm table-striped align-middle">
-              <thead>
-                <tr>
-                  <th>Name</th>
-                  <th style={{ width: 140 }}>Type</th>
-                  <th style={{ width: 120 }}>Official</th>
-                  <th>Links</th>
-                </tr>
-              </thead>
-              <tbody>
-                {data.licenses.map((l) => (
-                  <tr key={l.id}>
-                    <td>{l.name}</td>
-                    <td>{l.type.name ?? l.type.id}</td>
-                    <td>{l.isOfficial ? "Yes" : "No"}</td>
-                    <td>
-                      <div className="d-flex gap-2 flex-wrap">
-                        {l.linkWikipedia && (
-                          <a href={l.linkWikipedia} target="_blank" rel="noreferrer">Wikipedia</a>
-                        )}
-                        {l.linkSite && (
-                          <a href={l.linkSite} target="_blank" rel="noreferrer">Site</a>
-                        )}
-                        {!l.linkWikipedia && !l.linkSite && <span className="text-secondary">-</span>}
-                      </div>
-                    </td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        )}
-      </div>
-
-      <hr />
-
-      {/* Web links (external references) */}
-      <div>
-        <h5>Web links</h5>
-        {(!data.webrefs || data.webrefs.length === 0) && <div className="text-secondary">No web links</div>}
-        {data.webrefs && data.webrefs.length > 0 && (
-          <div className="table-responsive">
-            <table className="table table-sm table-striped align-middle">
-              <thead>
-                <tr>
-                  <th>Website</th>
-                  <th style={{ width: 120 }}>Language</th>
-                  <th>URL</th>
-                </tr>
-              </thead>
-              <tbody>
-                {data.webrefs.map((w, idx) => (
-                  <tr key={`${w.website.id}-${idx}`}>
-                    <td>
-                      {w.website.link ? (
-                        <a href={w.website.link} target="_blank" rel="noopener noreferrer">{w.website.name}</a>
-                      ) : (
-                        <span>{w.website.name}</span>
-                      )}
-                    </td>
-                    <td>{w.languageId}</td>
-                    <td>
-                      <a href={w.link} target="_blank" rel="noopener noreferrer">{w.link}</a>
-                    </td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        )}
-      </div>
-
-      <hr />
-
-      <div>
-        <h5>Files</h5>
-        {(!data.files || data.files.length === 0) && <div className="text-secondary">No files linked</div>}
-        {data.files && data.files.length > 0 && (
-          <div className="table-responsive">
-            <table className="table table-sm table-striped align-middle">
-              <thead>
-                <tr>
-                  <th>Type</th>
-                  <th>Link</th>
-                  <th style={{ width: 120 }} className="text-end">Size</th>
-                  <th style={{ width: 260 }}>MD5</th>
-                  <th>Comments</th>
-                </tr>
-              </thead>
-              <tbody>
-                {data.files.map((f) => {
-                  const isHttp = f.link.startsWith("http://") || f.link.startsWith("https://");
-                  return (
-                    <tr key={f.id}>
-                      <td><span className="badge text-bg-secondary">{f.type.name}</span></td>
+                    <tr>
+                      <th>Language</th>
                       <td>
-                        {isHttp ? (
-                          <a href={f.link} target="_blank" rel="noopener noreferrer">{f.link}</a>
+                        {data.language.id ? (
+                          data.language.name ? (
+                            <Link href={`/zxdb/languages/${data.language.id}`}>{data.language.name}</Link>
+                          ) : (
+                            <span>{data.language.id}</span>
+                          )
                         ) : (
-                          <span>{f.link}</span>
+                          <span className="text-secondary">-</span>
                         )}
                       </td>
-                      <td className="text-end">{f.size != null ? new Intl.NumberFormat().format(f.size) : "-"}</td>
-                      <td><code>{f.md5 ?? "-"}</code></td>
-                      <td>{f.comments ?? ""}</td>
                     </tr>
-                  );
-                })}
-              </tbody>
-            </table>
+                    <tr>
+                      <th>Genre</th>
+                      <td>
+                        {data.genre.id ? (
+                          data.genre.name ? (
+                            <Link href={`/zxdb/genres/${data.genre.id}`}>{data.genre.name}</Link>
+                          ) : (
+                            <span>#{data.genre.id}</span>
+                          )
+                        ) : (
+                          <span className="text-secondary">-</span>
+                        )}
+                      </td>
+                    </tr>
+                    {typeof data.maxPlayers !== "undefined" && (
+                      <tr>
+                        <th>Max Players</th>
+                        <td>{data.maxPlayers}</td>
+                      </tr>
+                    )}
+                    {typeof data.availabletypeId !== "undefined" && (
+                      <tr>
+                        <th>Available Type</th>
+                        <td>{data.availabletypeId ?? <span className="text-secondary">-</span>}</td>
+                      </tr>
+                    )}
+                    {typeof data.withoutLoadScreen !== "undefined" && (
+                      <tr>
+                        <th>Without Load Screen</th>
+                        <td>{data.withoutLoadScreen ? "Yes" : "No"}</td>
+                      </tr>
+                    )}
+                    {typeof data.withoutInlay !== "undefined" && (
+                      <tr>
+                        <th>Without Inlay</th>
+                        <td>{data.withoutInlay ? "Yes" : "No"}</td>
+                      </tr>
+                    )}
+                    {typeof data.issueId !== "undefined" && (
+                      <tr>
+                        <th>Issue</th>
+                        <td>{data.issueId ? <span>#{data.issueId}</span> : <span className="text-secondary">-</span>}</td>
+                      </tr>
+                    )}
+                  </tbody>
+                </table>
+              </div>
+            </div>
           </div>
-        )}
-      </div>
 
-      <hr />
+          <div className="card shadow-sm mb-3">
+            <div className="card-body">
+              <h5 className="card-title">People</h5>
+              <div className="row g-3">
+                <div className="col-12">
+                  <div className="text-secondary small mb-1">Authors</div>
+                  {data.authors.length === 0 && <div className="text-secondary">Unknown</div>}
+                  {data.authors.length > 0 && (
+                    <ul className="list-unstyled mb-0">
+                      {data.authors.map((a) => (
+                        <li key={a.id}>
+                          <Link href={`/zxdb/labels/${a.id}`}>{a.name}</Link>
+                        </li>
+                      ))}
+                    </ul>
+                  )}
+                </div>
+                <div className="col-12">
+                  <div className="text-secondary small mb-1">Publishers</div>
+                  {data.publishers.length === 0 && <div className="text-secondary">Unknown</div>}
+                  {data.publishers.length > 0 && (
+                    <ul className="list-unstyled mb-0">
+                      {data.publishers.map((p) => (
+                        <li key={p.id}>
+                          <Link href={`/zxdb/labels/${p.id}`}>{p.name}</Link>
+                        </li>
+                      ))}
+                    </ul>
+                  )}
+                </div>
+              </div>
+            </div>
+          </div>
 
-      {/* Removed grouped releases/downloads section to avoid duplicate downloads UI. */}
+          <div className="card shadow-sm">
+            <div className="card-body d-flex flex-wrap gap-2">
+              <Link className="btn btn-sm btn-outline-secondary" href={`/zxdb/entries/${data.id}`}>Permalink</Link>
+              <Link className="btn btn-sm btn-outline-primary" href="/zxdb">Back to Explorer</Link>
+            </div>
+          </div>
+        </div>
 
-      <div className="d-flex align-items-center gap-2">
-        <Link className="btn btn-sm btn-outline-secondary" href={`/zxdb/entries/${data.id}`}>Permalink</Link>
-        <Link className="btn btn-sm btn-outline-primary" href="/zxdb">Back to Explorer</Link>
+        <div className="col-lg-8">
+          <div className="card shadow-sm mb-3">
+            <div className="card-body">
+              <h5 className="card-title">Downloads</h5>
+              {(!data.downloadsFlat || data.downloadsFlat.length === 0) && <div className="text-secondary">No downloads</div>}
+              {data.downloadsFlat && data.downloadsFlat.length > 0 && (
+                <div className="table-responsive">
+                  <table className="table table-sm table-striped align-middle">
+                    <thead>
+                      <tr>
+                        <th>Type</th>
+                        <th>Link</th>
+                        <th style={{ width: 120 }} className="text-end">Size</th>
+                        <th style={{ width: 260 }}>MD5</th>
+                        <th>Flags</th>
+                        <th>Details</th>
+                        <th>Comments</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {data.downloadsFlat.map((d) => {
+                        const isHttp = d.link.startsWith("http://") || d.link.startsWith("https://");
+                        return (
+                          <tr key={d.id}>
+                            <td><span className="badge text-bg-secondary">{d.type.name}</span></td>
+                            <td>
+                              {isHttp ? (
+                                <a href={d.link} target="_blank" rel="noopener noreferrer">{d.link}</a>
+                              ) : (
+                                <span>{d.link}</span>
+                              )}
+                            </td>
+                            <td className="text-end">{typeof d.size === "number" ? d.size.toLocaleString() : "-"}</td>
+                            <td><code>{d.md5 ?? "-"}</code></td>
+                            <td>
+                              <div className="d-flex gap-1 flex-wrap">
+                                {d.isDemo ? <span className="badge text-bg-warning">Demo</span> : null}
+                                {d.scheme.name ? <span className="badge text-bg-info">{d.scheme.name}</span> : null}
+                                {d.source.name ? <span className="badge text-bg-light border">{d.source.name}</span> : null}
+                                {d.case.name ? <span className="badge text-bg-secondary">{d.case.name}</span> : null}
+                              </div>
+                            </td>
+                            <td>
+                              <div className="d-flex gap-2 flex-wrap align-items-center">
+                                {d.language.name && (
+                                  <Link className="badge text-bg-info text-decoration-none" href={`/zxdb/languages/${d.language.id}`}>{d.language.name}</Link>
+                                )}
+                                {d.machinetype.name && (
+                                  <Link className="badge text-bg-primary text-decoration-none" href={`/zxdb/machinetypes/${d.machinetype.id}`}>{d.machinetype.name}</Link>
+                                )}
+                                {typeof d.year === "number" ? <span className="badge text-bg-dark">{d.year}</span> : null}
+                                <Link className="badge text-bg-light text-decoration-none" href={`/zxdb/releases/${data.id}/${d.releaseSeq}`}>
+                                  rel #{d.releaseSeq}
+                                </Link>
+                              </div>
+                            </td>
+                            <td>{d.comments ?? ""}</td>
+                          </tr>
+                        );
+                      })}
+                    </tbody>
+                  </table>
+                </div>
+              )}
+            </div>
+          </div>
+
+          <div className="card shadow-sm mb-3">
+            <div className="card-body">
+              <h5 className="card-title">Releases</h5>
+              {(!data.releases || data.releases.length === 0) && <div className="text-secondary">No releases recorded</div>}
+              {data.releases && data.releases.length > 0 && (
+                <div className="table-responsive">
+                  <table className="table table-sm table-striped align-middle">
+                    <thead>
+                      <tr>
+                        <th style={{ width: 120 }}>Release #</th>
+                        <th style={{ width: 120 }}>Year</th>
+                        <th>Downloads</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {data.releases.map((r) => (
+                        <tr key={r.releaseSeq}>
+                          <td>
+                            <Link href={`/zxdb/releases/${data.id}/${r.releaseSeq}`}>#{r.releaseSeq}</Link>
+                          </td>
+                          <td>{r.year ?? <span className="text-secondary">-</span>}</td>
+                          <td>{r.downloads.length}</td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              )}
+            </div>
+          </div>
+
+          <div className="card shadow-sm mb-3">
+            <div className="card-body">
+              <h5 className="card-title">Origins</h5>
+              {(!data.origins || data.origins.length === 0) && <div className="text-secondary">No origins recorded</div>}
+              {data.origins && data.origins.length > 0 && (
+                <div className="table-responsive">
+                  <table className="table table-sm table-striped align-middle">
+                    <thead>
+                      <tr>
+                        <th>Type</th>
+                        <th>Title</th>
+                        <th>Publication</th>
+                        <th style={{ width: 200 }}>Issue</th>
+                        <th style={{ width: 140 }}>Date</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {data.origins.map((o, idx) => {
+                        const dateParts = [o.date.year, o.date.month, o.date.day]
+                          .filter((v) => typeof v === "number" && Number.isFinite(v))
+                          .map((v, i) => (i === 0 ? String(v) : String(v).padStart(2, "0")));
+                        const dateText = dateParts.length ? dateParts.join("/") : "-";
+                        return (
+                          <tr key={`${o.type.id}-${idx}`}>
+                            <td>{o.type.name ?? o.type.id}</td>
+                            <td>{o.libraryTitle}</td>
+                            <td>{o.publication ?? <span className="text-secondary">-</span>}</td>
+                            <td>
+                              {o.issue ? (
+                                <div className="d-flex flex-column">
+                                  <Link href={`/zxdb/issues/${o.issue.id}`}>Issue #{o.issue.id}</Link>
+                                  {o.issue.magazineId != null && (
+                                    <Link className="text-secondary small" href={`/zxdb/magazines/${o.issue.magazineId}`}>
+                                      {o.issue.magazineTitle ?? `Magazine #${o.issue.magazineId}`}
+                                    </Link>
+                                  )}
+                                </div>
+                              ) : o.containerId ? (
+                                <span>Container #{o.containerId}</span>
+                              ) : (
+                                <span className="text-secondary">-</span>
+                              )}
+                            </td>
+                            <td>{dateText}</td>
+                          </tr>
+                        );
+                      })}
+                    </tbody>
+                  </table>
+                </div>
+              )}
+            </div>
+          </div>
+
+          <div className="card shadow-sm mb-3">
+            <div className="card-body">
+              <h5 className="card-title">Relations</h5>
+              {(!data.relations || data.relations.length === 0) && <div className="text-secondary">No relations recorded</div>}
+              {data.relations && data.relations.length > 0 && (
+                <div className="table-responsive">
+                  <table className="table table-sm table-striped align-middle">
+                    <thead>
+                      <tr>
+                        <th style={{ width: 90 }}>Direction</th>
+                        <th style={{ width: 160 }}>Type</th>
+                        <th>Entry</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {data.relations.map((r, idx) => (
+                        <tr key={`${r.entry.id}-${r.type.id}-${idx}`}>
+                          <td>{r.direction === "from" ? "From" : "To"}</td>
+                          <td>{r.type.name ?? r.type.id}</td>
+                          <td>
+                            <Link href={`/zxdb/entries/${r.entry.id}`}>
+                              {r.entry.title ?? `Entry #${r.entry.id}`}
+                            </Link>
+                          </td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              )}
+            </div>
+          </div>
+
+          <div className="card shadow-sm mb-3">
+            <div className="card-body">
+              <h5 className="card-title">Tags / Members</h5>
+              {(!data.tags || data.tags.length === 0) && <div className="text-secondary">No tags recorded</div>}
+              {data.tags && data.tags.length > 0 && (
+                <div className="table-responsive">
+                  <table className="table table-sm table-striped align-middle">
+                    <thead>
+                      <tr>
+                        <th>Tag</th>
+                        <th style={{ width: 140 }}>Type</th>
+                        <th style={{ width: 140 }}>Category</th>
+                        <th style={{ width: 120 }}>Member Seq</th>
+                        <th>Links</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {data.tags.map((t) => (
+                        <tr key={`${t.id}-${t.category.id ?? "none"}`}>
+                          <td>{t.name}</td>
+                          <td>{t.type.name ?? t.type.id}</td>
+                          <td>{t.category.name ?? (t.category.id != null ? `#${t.category.id}` : "-")}</td>
+                          <td>{t.memberSeq ?? <span className="text-secondary">-</span>}</td>
+                          <td>
+                            <div className="d-flex gap-2 flex-wrap">
+                              {t.link && (
+                                <a href={t.link} target="_blank" rel="noreferrer">Link</a>
+                              )}
+                              {t.comments && <span className="text-secondary">{t.comments}</span>}
+                              {!t.link && !t.comments && <span className="text-secondary">-</span>}
+                            </div>
+                          </td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              )}
+            </div>
+          </div>
+
+          <div className="card shadow-sm mb-3">
+            <div className="card-body">
+              <h5 className="card-title">Ports</h5>
+              {(!data.ports || data.ports.length === 0) && <div className="text-secondary">No ports recorded</div>}
+              {data.ports && data.ports.length > 0 && (
+                <div className="table-responsive">
+                  <table className="table table-sm table-striped align-middle">
+                    <thead>
+                      <tr>
+                        <th>Title</th>
+                        <th style={{ width: 160 }}>Platform</th>
+                        <th style={{ width: 120 }}>Official</th>
+                        <th>Link</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {data.ports.map((p) => (
+                        <tr key={p.id}>
+                          <td>{p.title ?? <span className="text-secondary">-</span>}</td>
+                          <td>{p.platform.name ?? `#${p.platform.id}`}</td>
+                          <td>{p.isOfficial ? "Yes" : "No"}</td>
+                          <td>
+                            {p.linkSystem ? (
+                              <a href={p.linkSystem} target="_blank" rel="noreferrer">Link</a>
+                            ) : (
+                              <span className="text-secondary">-</span>
+                            )}
+                          </td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              )}
+            </div>
+          </div>
+
+          <div className="card shadow-sm mb-3">
+            <div className="card-body">
+              <h5 className="card-title">Remakes</h5>
+              {(!data.remakes || data.remakes.length === 0) && <div className="text-secondary">No remakes recorded</div>}
+              {data.remakes && data.remakes.length > 0 && (
+                <div className="table-responsive">
+                  <table className="table table-sm table-striped align-middle">
+                    <thead>
+                      <tr>
+                        <th>Title</th>
+                        <th style={{ width: 160 }}>Platforms</th>
+                        <th style={{ width: 140 }}>Years</th>
+                        <th style={{ width: 140 }}>File</th>
+                        <th>Notes</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {data.remakes.map((r) => (
+                        <tr key={r.id}>
+                          <td>{r.title}</td>
+                          <td>{r.platforms ?? <span className="text-secondary">-</span>}</td>
+                          <td>{r.remakeYears ?? <span className="text-secondary">-</span>}</td>
+                          <td>
+                            {r.fileLink ? (
+                              <a href={r.fileLink} target="_blank" rel="noreferrer">File</a>
+                            ) : (
+                              <span className="text-secondary">-</span>
+                            )}
+                          </td>
+                          <td>{r.remakeStatus ?? r.authors ?? <span className="text-secondary">-</span>}</td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              )}
+            </div>
+          </div>
+
+          <div className="card shadow-sm mb-3">
+            <div className="card-body">
+              <h5 className="card-title">Scores</h5>
+              {(!data.scores || data.scores.length === 0) && <div className="text-secondary">No scores recorded</div>}
+              {data.scores && data.scores.length > 0 && (
+                <div className="table-responsive">
+                  <table className="table table-sm table-striped align-middle">
+                    <thead>
+                      <tr>
+                        <th>Website</th>
+                        <th style={{ width: 120 }}>Score</th>
+                        <th style={{ width: 120 }}>Votes</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {data.scores.map((s, idx) => (
+                        <tr key={`${s.website.id}-${idx}`}>
+                          <td>{s.website.name ?? `#${s.website.id}`}</td>
+                          <td>{s.score}</td>
+                          <td>{s.votes}</td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              )}
+            </div>
+          </div>
+
+          <div className="card shadow-sm mb-3">
+            <div className="card-body">
+              <h5 className="card-title">Notes</h5>
+              {(!data.notes || data.notes.length === 0) && <div className="text-secondary">No notes recorded</div>}
+              {data.notes && data.notes.length > 0 && (
+                <div className="table-responsive">
+                  <table className="table table-sm table-striped align-middle">
+                    <thead>
+                      <tr>
+                        <th style={{ width: 140 }}>Type</th>
+                        <th>Text</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {data.notes.map((n) => (
+                        <tr key={n.id}>
+                          <td>{n.type.name ?? n.type.id}</td>
+                          <td>{n.text}</td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              )}
+            </div>
+          </div>
+
+          <div className="card shadow-sm mb-3">
+            <div className="card-body">
+              <h5 className="card-title">Aliases</h5>
+              {(!data.aliases || data.aliases.length === 0) && <div className="text-secondary">No aliases</div>}
+              {data.aliases && data.aliases.length > 0 && (
+                <div className="table-responsive">
+                  <table className="table table-sm table-striped align-middle">
+                    <thead>
+                      <tr>
+                        <th style={{ width: 90 }}>Release #</th>
+                        <th style={{ width: 120 }}>Language</th>
+                        <th>Title</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {data.aliases.map((a, idx) => (
+                        <tr key={`${a.releaseSeq}-${a.languageId}-${idx}`}>
+                          <td>
+                            <Link href={`/zxdb/releases/${data.id}/${a.releaseSeq}`}>#{a.releaseSeq}</Link>
+                          </td>
+                          <td>{a.languageId}</td>
+                          <td>{a.title}</td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              )}
+            </div>
+          </div>
+
+          <div className="card shadow-sm mb-3">
+            <div className="card-body">
+              <h5 className="card-title">Licenses</h5>
+              {(!data.licenses || data.licenses.length === 0) && <div className="text-secondary">No licenses linked</div>}
+              {data.licenses && data.licenses.length > 0 && (
+                <div className="table-responsive">
+                  <table className="table table-sm table-striped align-middle">
+                    <thead>
+                      <tr>
+                        <th>Name</th>
+                        <th style={{ width: 140 }}>Type</th>
+                        <th style={{ width: 120 }}>Official</th>
+                        <th>Links</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {data.licenses.map((l) => (
+                        <tr key={l.id}>
+                          <td>{l.name}</td>
+                          <td>{l.type.name ?? l.type.id}</td>
+                          <td>{l.isOfficial ? "Yes" : "No"}</td>
+                          <td>
+                            <div className="d-flex gap-2 flex-wrap">
+                              {l.linkWikipedia && (
+                                <a href={l.linkWikipedia} target="_blank" rel="noreferrer">Wikipedia</a>
+                              )}
+                              {l.linkSite && (
+                                <a href={l.linkSite} target="_blank" rel="noreferrer">Site</a>
+                              )}
+                              {!l.linkWikipedia && !l.linkSite && <span className="text-secondary">-</span>}
+                            </div>
+                          </td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              )}
+            </div>
+          </div>
+
+          <div className="card shadow-sm mb-3">
+            <div className="card-body">
+              <h5 className="card-title">Web links</h5>
+              {(!data.webrefs || data.webrefs.length === 0) && <div className="text-secondary">No web links</div>}
+              {data.webrefs && data.webrefs.length > 0 && (
+                <div className="table-responsive">
+                  <table className="table table-sm table-striped align-middle">
+                    <thead>
+                      <tr>
+                        <th>Website</th>
+                        <th style={{ width: 120 }}>Language</th>
+                        <th>URL</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {data.webrefs.map((w, idx) => (
+                        <tr key={`${w.website.id}-${idx}`}>
+                          <td>
+                            {w.website.link ? (
+                              <a href={w.website.link} target="_blank" rel="noopener noreferrer">{w.website.name}</a>
+                            ) : (
+                              <span>{w.website.name}</span>
+                            )}
+                          </td>
+                          <td>{w.languageId}</td>
+                          <td>
+                            <a href={w.link} target="_blank" rel="noopener noreferrer">{w.link}</a>
+                          </td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              )}
+            </div>
+          </div>
+
+          <div className="card shadow-sm">
+            <div className="card-body">
+              <h5 className="card-title">Files</h5>
+              {(!data.files || data.files.length === 0) && <div className="text-secondary">No files linked</div>}
+              {data.files && data.files.length > 0 && (
+                <div className="table-responsive">
+                  <table className="table table-sm table-striped align-middle">
+                    <thead>
+                      <tr>
+                        <th>Type</th>
+                        <th>Link</th>
+                        <th style={{ width: 120 }} className="text-end">Size</th>
+                        <th style={{ width: 260 }}>MD5</th>
+                        <th>Comments</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {data.files.map((f) => {
+                        const isHttp = f.link.startsWith("http://") || f.link.startsWith("https://");
+                        return (
+                          <tr key={f.id}>
+                            <td><span className="badge text-bg-secondary">{f.type.name}</span></td>
+                            <td>
+                              {isHttp ? (
+                                <a href={f.link} target="_blank" rel="noopener noreferrer">{f.link}</a>
+                              ) : (
+                                <span>{f.link}</span>
+                              )}
+                            </td>
+                            <td className="text-end">{f.size != null ? new Intl.NumberFormat().format(f.size) : "-"}</td>
+                            <td><code>{f.md5 ?? "-"}</code></td>
+                            <td>{f.comments ?? ""}</td>
+                          </tr>
+                        );
+                      })}
+                    </tbody>
+                  </table>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   );