diff --git a/src/app/(frontend)/projects/[slug]/page.tsx b/src/app/(frontend)/projects/[slug]/page.tsx
new file mode 100644
index 0000000..5c32ab8
--- /dev/null
+++ b/src/app/(frontend)/projects/[slug]/page.tsx
@@ -0,0 +1,23 @@
+import { notFound } from 'next/navigation'
+import { getProjectBySlug, listAllProjectSlugs } from '@/lib/projects'
+import { Render } from '@/components/lexical/Render'
+
+export const revalidate = 60
+
+export async function generateStaticParams() {
+  return (await listAllProjectSlugs()).map((slug) => ({ slug }))
+}
+
+export default async function ProjectPage({ params }: { params: Promise<{ slug: string }> }) {
+  const { slug } = await params
+  const project = await getProjectBySlug(slug)
+  if (!project) notFound()
+  return (
+    <article className="max-w-article mx-auto px-5 py-10 md:px-10">
+      <h1 className="font-serif text-[clamp(40px,6vw,72px)]">{project.title}</h1>
+      <div className="prose-editorial">
+        <Render value={project.body} />
+      </div>
+    </article>
+  )
+}
diff --git a/src/app/(frontend)/projects/page.tsx b/src/app/(frontend)/projects/page.tsx
new file mode 100644
index 0000000..eed241d
--- /dev/null
+++ b/src/app/(frontend)/projects/page.tsx
@@ -0,0 +1,20 @@
+import { listProjects } from '@/lib/projects'
+import { ProjectPreview } from '@/components/ProjectPreview'
+
+export const revalidate = 60
+
+export default async function ProjectsIndex() {
+  const r = await listProjects()
+  return (
+    <div className="max-w-shell mx-auto px-5 py-10 md:px-10">
+      <h1 className="text-ink font-serif text-[40px] mb-8">Projects</h1>
+      <ul className="grid gap-8 m-0 list-none p-0">
+        {r.docs.map((p) => (
+          <li key={p.id}>
+            <ProjectPreview project={p} />
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}
diff --git a/src/components/ProjectPreview.tsx b/src/components/ProjectPreview.tsx
new file mode 100644
index 0000000..5941554
--- /dev/null
+++ b/src/components/ProjectPreview.tsx
@@ -0,0 +1,40 @@
+import Link from 'next/link'
+import type { Project } from '@/payload-types'
+
+interface ProjectPreviewProps {
+  project: Project
+  className?: string
+  headingLevel?: 'h2' | 'h3'
+}
+
+export function ProjectPreview({
+  project,
+  className,
+  headingLevel: TitleTag = 'h2',
+}: ProjectPreviewProps) {
+  const { title, slug, description } = project
+
+  return (
+    <Link
+      href={`/projects/${slug}/`}
+      className={[
+        'group border-hair text-ink grid grid-cols-[1fr_auto] gap-8 border-b py-7 no-underline transition-[padding] duration-200 ease-out hover:pl-3',
+        className ?? '',
+      ]
+        .join(' ')
+        .trim()}
+    >
+      <div>
+        <TitleTag className="group-hover:decoration-ink-4 m-0 mb-2.5 font-serif text-[28px] leading-tight font-normal tracking-[-0.015em] group-hover:underline group-hover:underline-offset-4">
+          {title}
+        </TitleTag>
+        {description && (
+          <p className="text-ink-2 m-0 text-[15px] leading-[1.55]">{description}</p>
+        )}
+      </div>
+      <span className="text-ink-3 self-center font-mono text-base opacity-0 transition-opacity group-hover:opacity-100">
+        →
+      </span>
+    </Link>
+  )
+}
diff --git a/src/lib/projects.ts b/src/lib/projects.ts
new file mode 100644
index 0000000..49537a3
--- /dev/null
+++ b/src/lib/projects.ts
@@ -0,0 +1,30 @@
+import { getPayloadInstance } from './payload'
+import type { Project } from '@/payload-types'
+
+export async function listProjects() {
+  const payload = await getPayloadInstance()
+  return payload.find({
+    collection: 'projects',
+    where: { _status: { equals: 'published' } },
+    sort: '-publishDate',
+    limit: 0,
+    pagination: false,
+    depth: 1,
+  })
+}
+
+export async function getProjectBySlug(slug: string): Promise<Project | undefined> {
+  const payload = await getPayloadInstance()
+  const r = await payload.find({
+    collection: 'projects',
+    where: { slug: { equals: slug } },
+    depth: 2,
+    limit: 1,
+  })
+  return r.docs[0]
+}
+
+export async function listAllProjectSlugs(): Promise<string[]> {
+  const r = await listProjects()
+  return r.docs.map((d) => d.slug)
+}