diff --git a/src/components/PostList.tsx b/src/components/PostList.tsx
new file mode 100644
index 0000000..be8e7ab
--- /dev/null
+++ b/src/components/PostList.tsx
@@ -0,0 +1,24 @@
+import type { Post } from '@/payload-types'
+import { PostPreview } from './PostPreview'
+
+interface PostListProps {
+  posts: Post[]
+  numbers?: number[]
+  startNumber?: number
+}
+
+function numberFor(index: number, posts: Post[], numbers?: number[], startNumber?: number): number {
+  if (numbers && numbers[index] !== undefined) return numbers[index]
+  if (startNumber !== undefined) return startNumber - index
+  return posts.length - index
+}
+
+export function PostList({ posts, numbers, startNumber }: PostListProps) {
+  return (
+    <ul className="m-0 list-none p-0">
+      {posts.map((post, i) => (
+        <PostPreview key={post.id} post={post} number={numberFor(i, posts, numbers, startNumber)} />
+      ))}
+    </ul>
+  )
+}
diff --git a/src/components/PostPreview.tsx b/src/components/PostPreview.tsx
new file mode 100644
index 0000000..1e83378
--- /dev/null
+++ b/src/components/PostPreview.tsx
@@ -0,0 +1,72 @@
+import Link from 'next/link'
+import type { Post, Tag } from '@/payload-types'
+
+interface PostPreviewProps {
+  post: Post
+  number: number
+  className?: string
+}
+
+function formatDate(dateStr: string): string {
+  const date = new Date(dateStr)
+  const y = date.getFullYear()
+  const m = String(date.getMonth() + 1).padStart(2, '0')
+  const d = String(date.getDate()).padStart(2, '0')
+  return `${y}.${m}.${d}`
+}
+
+export function PostPreview({ post, number, className }: PostPreviewProps) {
+  const { title, slug, publishDate, excerpt, tags } = post
+  const paddedNumber = String(number).padStart(3, '0')
+  const formattedDate = publishDate ? formatDate(publishDate) : ''
+
+  // Only show tags when depth=1 returns Tag objects (not bare IDs)
+  const resolvedTags: Tag[] = Array.isArray(tags)
+    ? tags.filter((t): t is Tag => typeof t === 'object' && t !== null)
+    : []
+  const topTags = resolvedTags.slice(0, 3)
+
+  return (
+    <li className={`border-hair group list-none border-b ${className ?? ''}`}>
+      <Link
+        href={`/blog/${slug}/`}
+        className="text-ink grid grid-cols-1 items-start gap-2 py-6 transition-[padding] duration-200 ease-out hover:pl-3 sm:grid-cols-[200px_1fr_auto] sm:gap-8 sm:py-7"
+      >
+        <div className="text-ink-3 hidden flex-col gap-1.5 font-mono text-[11px] tracking-wider sm:flex">
+          <span className="text-ink font-serif text-[48px] leading-[0.9] font-normal tracking-[-0.02em]">
+            {paddedNumber}
+          </span>
+          <span className="text-ink-3 tabular-nums">{formattedDate}</span>
+        </div>
+
+        <div className="max-w-[60ch]">
+          <div className="text-ink-3 mb-2.5 font-mono text-[11px] tracking-wider tabular-nums sm:hidden">
+            {formattedDate}
+          </div>
+          <h2 className="text-ink group-hover:decoration-ink-4 m-0 mb-2.5 font-serif text-[24px] leading-tight font-normal tracking-[-0.015em] group-hover:underline group-hover:underline-offset-4 sm:text-[32px]">
+            {title}
+          </h2>
+          {excerpt && (
+            <p className="text-ink-2 m-0 text-[15px] leading-[1.55] text-pretty">{excerpt}</p>
+          )}
+          {topTags.length > 0 && (
+            <div className="text-ink-3 mt-3 flex flex-wrap gap-2 font-mono text-[10px] tracking-[0.1em] uppercase">
+              {topTags.map((tag, i) => (
+                <span key={tag.id}>
+                  {i > 0 && <span className="text-ink-4 mr-2">·</span>}
+                  {tag.name}
+                </span>
+              ))}
+            </div>
+          )}
+        </div>
+
+        <div className="tracking-mono text-ink-3 mt-2 text-left font-mono text-[11px] uppercase sm:mt-0 sm:min-w-[100px] sm:text-right">
+          <span className="text-ink ml-1.5 opacity-0 transition-opacity group-hover:opacity-100">
+            →
+          </span>
+        </div>
+      </Link>
+    </li>
+  )
+}