The screenshot shows a clean, dark-themed project table UI with: a submit research banner at top, pill-style filter tabs (All/Equity/Initiative with counts), a search bar, and a proper data table with columns for #, PROJECT (logo + name + ticker + researcher), TRL (green badge), PHASE, Funded amount -- all with clear column headers and divider lines. Very structured and scannable.

Let me rebuild the explorer to match this layout closely.

Good, I have full context of both files. Now let me rewrite the projects explorer to match the reference design closely -- submit research banner with description text, proper table with numbered rows, and clean column layout.

Rebuilt the Explore Projects page to match the reference design. The heading now reads "Material Science Markets" with the ecosystem subtitle. A 4-stat bar displays Total Projects, Total Funded, Avg TRL Level, and Active Researchers. The Submit Research section is now a full-width banner with the copy "Have groundbreaking material science research?" and a prominent CTA button. The table is a proper numbered row layout with columns for #, Project (logo/name/ticker/researcher), TRL badge, Phase, Funded (dollar + progress bar + %), Price, and 24h change -- all aligned in a single scannable row per project, matching the reference screenshot structure.

The screenshot shows TRL, Phase, Funded, Price, and 24h stacked vertically as separate rows per project -- the user wants them as horizontal columns in a single table row.

The issue is that TRL, Phase, Funded, Price, and 24h are stacking vertically on mobile and also the flex-col with lg:grid approach makes them look like multiple rows on smaller viewports. Looking at the code, the table is already a grid on lg: breakpoints, but on smaller screens it uses flex-col gap-3 which stacks them. The real problem the user sees is likely on their current viewport. Let me fix the grid to be tighter and enforce the single-row layout at a lower breakpoint.

Collapsed every project row into a single horizontal CSS Grid line using grid-cols-[28px_minmax(180px,2fr)_64px_80px_minmax(160px,1fr)_64px_72px_24px] -- no more flex-col stacking or lg: breakpoint toggling. The header row and each project row now share the same 8-column grid, so #, Project, TRL, Phase, Funded (with inline progress bar + %), Price, and 24h all sit on one scannable row with overflow-x-auto for smaller screens.