diff --git a/packages/cubby/src/components/Projects.tsx b/packages/cubby/src/components/Projects.tsx
index b5eecce..ac8bec0 100644
--- a/packages/cubby/src/components/Projects.tsx
+++ b/packages/cubby/src/components/Projects.tsx
@@ -1,11 +1,7 @@
-interface ProjectData {
-    name: string
-    mtime: Date
-    status: "recent" | "active" | "inactive"
-}
+import type { ProjectMetadata } from "../server"
 
 interface ProjectsProps {
-    projects: ProjectData[]
+    projects: ProjectMetadata[]
 }
 
 export function Projects({ projects }: ProjectsProps) {
@@ -19,19 +15,88 @@ export function Projects({ projects }: ProjectsProps) {
 
     return (
         <div>
+            <style>
+                {`
+                .project-grid {
+                    display: flex;
+                    flex-wrap: wrap;
+                    gap: 20px;
+                    list-style: none;
+                    padding: 0;
+                }
+                .project-card {
+                    border: 1px solid #ccc;
+                    padding: 15px;
+                    border-radius: 4px;
+                    width: 250px;
+                    position: relative;
+                    padding-bottom: 40px;
+                }
+                .status-icon {
+                    font-size: 12px;
+                    border-bottom: none;
+                    cursor: default;
+                    position: absolute;
+                    top: 15px;
+                    right: 15px;
+                }
+                .project-title {
+                    margin: 0 0 10px 0;
+                    font-size: 16px;
+                    padding-right: 25px;
+                }
+                .project-meta {
+                    font-size: 12px;
+                    margin: 10px 0 0 0;
+                    list-style: none;
+                    padding: 0;
+                }
+                .project-meta li {
+                    margin: 5px 0;
+                }
+                li {
+                    list-style: none !important;
+                }
+                abbr {
+                    border-bottom: none !important;
+                    cursor: default !important;
+                }
+                .last-modified {
+                    color: #666;
+                    font-size: 11px;
+                    position: absolute;
+                    bottom: 15px;
+                    left: 15px;
+                    right: 15px;
+                }
+                `}
+            </style>
             <h1>Projects</h1>
-            <ul>
-                {projects.map(project => <li key={project.name}>
-                    <abbr style={{ fontSize: "12px", borderBottom: "none", cursor: "default" }} title={statusText(project.status)}>
-                        {project.status === "recent" ? "🟢" : project.status === "active" ? "🟡" : "🔴"}
-                    </abbr>&nbsp;
-                    <a
-                        href={`/p/${project.name}`}
-                        title={`Last modified ${project.mtime.toLocaleString()}`}
-                    >
-                        {project.name}
-                    </a>
-                </li>)}
+            <ul className="project-grid">
+                {projects.map(project => (
+                    <li key={project.name} className="project-card">
+                        <h2 className="project-title">
+                            <a
+                                href={`/p/${project.name}`}
+                                title={`Last modified ${project.mtime.toLocaleString()}`}
+                            >
+                                {project.name}
+                            </a>
+                            <abbr className="status-icon" title={statusText(project.status)}>
+                                {project.status === "recent" ? "🟢" : project.status === "active" ? "🟡" : "🔴"}
+                            </abbr>
+                        </h2>
+                        <ul className="project-meta">
+                            <li><a href={project.github}>GitHub</a></li>
+                            {project.url && (
+                                <li><a href={project.url}>{project.url.replace(`https://${project.name}.`, "")}</a></li>
+                            )}
+                        </ul>
+                        <div className="last-modified">
+                            {project.mtime.toLocaleString()}
+                        </div>
+                    </li>
+                ))}
             </ul>
         </div>
     )
diff --git a/packages/cubby/src/server.tsx b/packages/cubby/src/server.tsx
index db27ffc..d561228 100644
--- a/packages/cubby/src/server.tsx
+++ b/packages/cubby/src/server.tsx
@@ -55,7 +55,7 @@ api.get('/projects', async c => {
 // ----------------------------------------------------------------------------
 
 app.get("/", async (c) => {
-    const projects = await projectsWithDates()
+    const projects = await projectsWithMetadata()
     return c.html(tsx(<Projects projects={projects} />))
 })