diff --git a/src/pages/WorkspacePage.tsx b/src/pages/WorkspacePage.tsx
index e10d2e6..1a22c2c 100644
--- a/src/pages/WorkspacePage.tsx
+++ b/src/pages/WorkspacePage.tsx
@@ -1,3 +1,39 @@
-export default function WorkspacePage() {
-  return <div>Workspaces</div>;
+import { useState, useEffect } from "react";
+import { invoke } from "@tauri-apps/api/core";
+import { useNavigate } from "react-router-dom";
+
+interface Workspace {
+  id: string;
+  name: string;
+  slug: string;
+}
+
+export default function WorkspacePage() {
+  const [workspaces, setWorkspaces] = useState<Workspace[]>([]);
+  const [error, setError] = useState<string | null>(null);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    invoke<Workspace[]>("list_workspaces")
+      .then(setWorkspaces)
+      .catch((e) => setError(String(e)));
+  }, []);
+
+  return (
+    <div style={{ maxWidth: 600, margin: "60px auto", padding: 24 }}>
+      <h1>Workspaces</h1>
+      {error && <p style={{ color: "red" }}>{error}</p>}
+      {workspaces.map((ws) => (
+        <div
+          key={ws.id}
+          onClick={() => navigate(`/workspaces/${ws.id}`)}
+          style={{ padding: 16, border: "1px solid #ccc", marginBottom: 8, cursor: "pointer", borderRadius: 4 }}
+        >
+          <strong>{ws.name}</strong>
+          <span style={{ marginLeft: 8, color: "#888" }}>/{ws.slug}</span>
+        </div>
+      ))}
+      {workspaces.length === 0 && !error && <p>No workspaces found.</p>}
+    </div>
+  );
 }