diff --git a/app/posts/page.tsx b/app/posts/page.tsx
index 9523f55..7d04b71 100644
--- a/app/posts/page.tsx
+++ b/app/posts/page.tsx
@@ -1,5 +1,5 @@
 import { getPosts } from '@/lib/posts'
-import { PostCard } from '@/components/blog/PostCard'
+import { PostSearch } from '@/components/blog/PostSearch'
 import Template from '../template'
 
 export const metadata = { title: 'Posts' }
@@ -13,14 +13,7 @@ export default async function PostsPage() {
       <h1 className="heading-xl text-ink mt-0 mb-12">
         Posts
       </h1>
-      <div className="space-y-12">
-        {posts.map((post) => (
-          <PostCard key={post.slug} {...post} />
-        ))}
-        {posts.length === 0 && (
-          <p className="text-ink-soft">No posts yet.</p>
-        )}
-      </div>
+      <PostSearch posts={posts} />
     </main>
     </Template>
   )
diff --git a/components/blog/PostSearch.tsx b/components/blog/PostSearch.tsx
new file mode 100644
index 0000000..0ddf554
--- /dev/null
+++ b/components/blog/PostSearch.tsx
@@ -0,0 +1,237 @@
+'use client'
+
+import { useMemo, useState } from 'react'
+import { PostCard } from './PostCard'
+
+type SearchPost = {
+  slug: string
+  title: string
+  date: string
+  excerpt: string
+  tags: string[]
+  author: string | null
+  coverImage: string | null
+  readingTime: number
+}
+
+type TagFilter = {
+  slug: string
+  label: string
+  count: number
+}
+
+type ScoredPost = {
+  post: SearchPost
+  score: number
+  index: number
+}
+
+interface PostSearchProps {
+  posts: SearchPost[]
+}
+
+const normalizeSearchText = (value: string): string =>
+  value
+    .normalize('NFKD')
+    .replace(/[\u0300-\u036f]/g, '')
+    .toLowerCase()
+    .trim()
+
+const tagToClientSlug = (tag: string): string =>
+  normalizeSearchText(tag)
+    .replace(/\+/g, ' plus ')
+    .replace(/#/g, ' sharp ')
+    .replace(/[\\/]+/g, ' ')
+    .replace(/[^\p{L}\p{N}]+/gu, '-')
+    .replace(/-{2,}/g, '-')
+    .replace(/^-|-$/g, '')
+
+const getOrderedCharacterScore = (field: string, query: string): number => {
+  if (!query) return 0
+
+  let queryIndex = 0
+  let gaps = 0
+  let lastMatchIndex = -1
+
+  for (let fieldIndex = 0; fieldIndex < field.length && queryIndex < query.length; fieldIndex += 1) {
+    if (field[fieldIndex] !== query[queryIndex]) continue
+
+    if (lastMatchIndex >= 0) gaps += fieldIndex - lastMatchIndex - 1
+    lastMatchIndex = fieldIndex
+    queryIndex += 1
+  }
+
+  if (queryIndex !== query.length) return 0
+
+  return Math.max(1, 80 - gaps - Math.max(0, field.length - query.length) * 0.05)
+}
+
+const scoreField = (field: string, query: string, weight: number): number => {
+  if (!field || !query) return 0
+
+  if (field === query) return 1000 * weight
+  if (field.startsWith(query)) return 700 * weight + query.length
+  if (field.includes(query)) return 500 * weight + query.length
+
+  return getOrderedCharacterScore(field, query) * weight
+}
+
+const scorePost = (post: SearchPost, query: string): number => {
+  if (!query) return 0
+
+  const fields = [
+    [post.title, 1.4],
+    [post.slug, 1.1],
+    [post.excerpt, 0.8],
+    [post.author ?? '', 0.75],
+    [post.tags.join(' '), 1],
+  ] as const
+
+  return fields.reduce(
+    (score, [field, weight]) => score + scoreField(normalizeSearchText(field), query, weight),
+    0
+  )
+}
+
+const getTagFilters = (posts: SearchPost[]): TagFilter[] => {
+  const tags = new Map<string, TagFilter>()
+
+  posts.forEach((post) => {
+    const postTags = new Set<string>()
+
+    post.tags.forEach((tag) => {
+      const slug = tagToClientSlug(tag)
+      if (!slug || postTags.has(slug)) return
+
+      postTags.add(slug)
+      const existing = tags.get(slug)
+
+      if (existing) {
+        existing.count += 1
+        if (tag.localeCompare(existing.label) < 0) existing.label = tag
+        return
+      }
+
+      tags.set(slug, { slug, label: tag, count: 1 })
+    })
+  })
+
+  return Array.from(tags.values()).sort(
+    (a, b) => a.label.localeCompare(b.label) || a.slug.localeCompare(b.slug)
+  )
+}
+
+export function PostSearch({ posts }: PostSearchProps) {
+  const [query, setQuery] = useState('')
+  const [selectedTag, setSelectedTag] = useState<string | null>(null)
+
+  const tagFilters = useMemo(() => getTagFilters(posts), [posts])
+  const normalizedQuery = normalizeSearchText(query)
+
+  const results = useMemo(() => {
+    const scoredPosts = posts.reduce<ScoredPost[]>((matches, post, index) => {
+      if (selectedTag && !post.tags.some((tag) => tagToClientSlug(tag) === selectedTag)) {
+        return matches
+      }
+
+      const score = scorePost(post, normalizedQuery)
+      if (normalizedQuery && score <= 0) return matches
+
+      matches.push({ post, score, index })
+      return matches
+    }, [])
+
+    return scoredPosts
+      .sort((a, b) => b.score - a.score || a.index - b.index)
+      .map(({ post }) => post)
+  }, [normalizedQuery, posts, selectedTag])
+
+  if (posts.length === 0) {
+    return <p className="text-ink-soft">No posts yet.</p>
+  }
+
+  const hasFilters = Boolean(normalizedQuery || selectedTag)
+  const selectedTagLabel = tagFilters.find((tag) => tag.slug === selectedTag)?.label
+
+  return (
+    <section aria-labelledby="posts-search-heading" className="space-y-8">
+      <div className="space-y-5 rounded-xl border border-border bg-surface/30 p-4 sm:p-5">
+        <div className="space-y-2">
+          <label id="posts-search-heading" htmlFor="post-search" className="block text-sm font-medium text-ink">
+            Search posts
+          </label>
+          <div className="flex flex-col gap-2 sm:flex-row">
+            <input
+              id="post-search"
+              type="search"
+              value={query}
+              onChange={(event) => setQuery(event.target.value)}
+              placeholder="Search title, excerpt, tag, author, or slug"
+              className="min-w-0 flex-1 rounded-lg border border-border bg-canvas px-3 py-2 text-sm text-ink outline-none transition-colors placeholder:text-ink-soft/70 focus:border-accent focus:ring-2 focus:ring-accent/20"
+            />
+            <button
+              type="button"
+              onClick={() => setQuery('')}
+              disabled={!query}
+              className="rounded-lg border border-border px-3 py-2 text-sm text-ink-soft transition-colors hover:border-accent/50 hover:text-accent focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent disabled:cursor-not-allowed disabled:opacity-50"
+            >
+              Clear search
+            </button>
+          </div>
+        </div>
+
+        {tagFilters.length > 0 && (
+          <div className="space-y-2" aria-label="Filter posts by tag">
+            <p className="text-sm font-medium text-ink">Filter by tag</p>
+            <div className="flex flex-wrap gap-2">
+              {tagFilters.map((tag) => {
+                const isSelected = selectedTag === tag.slug
+
+                return (
+                  <button
+                    key={tag.slug}
+                    type="button"
+                    aria-pressed={isSelected}
+                    onClick={() => setSelectedTag(isSelected ? null : tag.slug)}
+                    className="rounded-full border border-border bg-canvas px-3 py-1 text-xs text-ink-soft transition-colors hover:border-accent/50 hover:text-accent focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent aria-pressed:border-accent aria-pressed:bg-accent/10 aria-pressed:text-accent"
+                  >
+                    {tag.label} <span className="font-mono text-ink-soft/70">{tag.count}</span>
+                  </button>
+                )
+              })}
+            </div>
+          </div>
+        )}
+
+        <div className="flex flex-col gap-2 text-sm text-ink-soft sm:flex-row sm:items-center sm:justify-between">
+          <p aria-live="polite">
+            {results.length} {results.length === 1 ? 'post' : 'posts'} found
+            {selectedTagLabel ? ` in ${selectedTagLabel}` : ''}
+          </p>
+          {hasFilters && (
+            <button
+              type="button"
+              onClick={() => {
+                setQuery('')
+                setSelectedTag(null)
+              }}
+              className="self-start rounded-lg border border-border px-3 py-1.5 text-sm text-ink-soft transition-colors hover:border-accent/50 hover:text-accent focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent sm:self-auto"
+            >
+              Clear filters
+            </button>
+          )}
+        </div>
+      </div>
+
+      {results.length > 0 ? (
+        <div className="space-y-12">
+          {results.map((post, index) => (
+            <PostCard key={post.slug} {...post} index={index} />
+          ))}
+        </div>
+      ) : (
+        <p className="text-ink-soft">No posts match your search.</p>
+      )}
+    </section>
+  )
+}