diff --git a/scripts/check-notes.mjs b/scripts/check-notes.mjs
index 8f7bc89..bc42eeb 100644
--- a/scripts/check-notes.mjs
+++ b/scripts/check-notes.mjs
@@ -132,6 +132,14 @@ if (!notesDirectoryViewSource.includes('/notes/post/${note.slug}/')) {
   throw new Error('Note detail links must use /notes/post/[slug]/')
 }
 
+if (!notesDirectoryViewSource.includes('window.history.pushState')) {
+  throw new Error('Note category tabs must update URLs without a route refresh')
+}
+
+if (!notesDirectoryViewSource.includes('popstate')) {
+  throw new Error('Note category tabs must support browser back and forward navigation')
+}
+
 const noteFiles = readdirSync(notesDirectory)
   .filter((fileName) => fileName.endsWith('.md'))
   .sort()
diff --git a/src/app/notes/NotesDirectoryView.tsx b/src/app/notes/NotesDirectoryView.tsx
index fa92977..9852ad4 100644
--- a/src/app/notes/NotesDirectoryView.tsx
+++ b/src/app/notes/NotesDirectoryView.tsx
@@ -1,11 +1,16 @@
+'use client'
+
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import type { MouseEvent } from 'react'
 import Link from 'next/link'
 import {
     allNotesCategory,
+    getNoteCategoryById,
     getNotesForCategory,
     noteFilterCategories,
     type NoteCategory,
-    type PublicNote,
-} from '@/lib/notes'
+} from '@/lib/note-categories'
+import type { PublicNote } from '@/lib/notes'
 
 interface NotesDirectoryViewProps {
     activeCategory: NoteCategory
@@ -28,15 +33,79 @@ const getCategoryHref = (category: NoteCategory) => {
     return `/notes/${category.id}/`
 }
 
+const getCategoryFromPathname = (pathname: string) => {
+    const normalizedPathname = pathname.replace(/\/+$/, '')
+
+    if (normalizedPathname === '/notes') {
+        return allNotesCategory
+    }
+
+    const categoryMatch = normalizedPathname.match(/^\/notes\/([^/]+)$/)
+
+    if (!categoryMatch) {
+        return undefined
+    }
+
+    return getNoteCategoryById(decodeURIComponent(categoryMatch[1]))
+}
+
 export default function NotesDirectoryView({ activeCategory, notes }: NotesDirectoryViewProps) {
-    const activeNotes = getNotesForCategory(notes, activeCategory)
-    const categoryTabs = noteFilterCategories.map((category) => ({
-        ...category,
-        count: getNotesForCategory(notes, category).length,
-    }))
-    const title = activeCategory.id === allNotesCategory.id
+    const [activeCategoryId, setActiveCategoryId] = useState(activeCategory.id)
+    const currentCategory = useMemo(() => (
+        noteFilterCategories.find((category) => category.id === activeCategoryId) ?? activeCategory
+    ), [activeCategory, activeCategoryId])
+    const activeNotes = useMemo(() => (
+        getNotesForCategory(notes, currentCategory)
+    ), [currentCategory, notes])
+    const categoryTabs = useMemo(() => (
+        noteFilterCategories.map((category) => ({
+            ...category,
+            count: getNotesForCategory(notes, category).length,
+        }))
+    ), [notes])
+    const title = currentCategory.id === allNotesCategory.id
         ? 'All Notes'
-        : `${activeCategory.title} Notes`
+        : `${currentCategory.title} Notes`
+
+    useEffect(() => {
+        setActiveCategoryId(activeCategory.id)
+    }, [activeCategory.id])
+
+    useEffect(() => {
+        const handlePopState = () => {
+            const nextCategory = getCategoryFromPathname(window.location.pathname)
+
+            if (nextCategory) {
+                setActiveCategoryId(nextCategory.id)
+            }
+        }
+
+        window.addEventListener('popstate', handlePopState)
+
+        return () => window.removeEventListener('popstate', handlePopState)
+    }, [])
+
+    useEffect(() => {
+        document.title = currentCategory.id === allNotesCategory.id
+            ? 'Notes | dd3ok'
+            : `${currentCategory.title} Notes | dd3ok`
+    }, [currentCategory])
+
+    const handleCategoryClick = useCallback((
+        event: MouseEvent<HTMLAnchorElement>,
+        category: NoteCategory
+    ) => {
+        event.preventDefault()
+
+        const nextHref = getCategoryHref(category)
+
+        if (window.location.pathname === nextHref) {
+            return
+        }
+
+        setActiveCategoryId(category.id)
+        window.history.pushState({ notesCategory: category.id }, '', nextHref)
+    }, [])
 
     return (
         <section className="section-padding pt-28 md:pt-32">
@@ -57,13 +126,15 @@ export default function NotesDirectoryView({ activeCategory, notes }: NotesDirec
 
                 <nav className="mt-6 flex flex-wrap gap-2" aria-label="노트 카테고리">
                     {categoryTabs.map((category) => {
-                        const isActiveCategory = category.id === activeCategory.id
+                        const isActiveCategory = category.id === currentCategory.id
 
                         return (
                             <Link
                                 key={category.id}
                                 href={getCategoryHref(category)}
+                                scroll={false}
                                 aria-current={isActiveCategory ? 'page' : undefined}
+                                onClick={(event) => handleCategoryClick(event, category)}
                                 className={`inline-flex items-center gap-2 rounded-full border px-3 py-1.5 text-sm font-bold transition-colors ${
                                     isActiveCategory
                                         ? 'border-[var(--accent-color)] bg-[var(--accent-color)] text-white'
diff --git a/src/lib/note-categories.ts b/src/lib/note-categories.ts
new file mode 100644
index 0000000..e900e92
--- /dev/null
+++ b/src/lib/note-categories.ts
@@ -0,0 +1,93 @@
+export interface NoteCategory {
+    id: string
+    title: string
+    aliases?: string[]
+}
+
+export interface NoteCategoryMatch {
+    category: string
+    type?: string
+    domain?: string
+    tags: string[]
+}
+
+export const noteCategories: NoteCategory[] = [
+    {
+        id: 'ai-tools',
+        title: 'AI & Tools',
+        aliases: ['ai', 'tools', 'ai-workflow', 'agent', 'agents'],
+    },
+    {
+        id: 'tech',
+        title: 'Tech',
+    },
+    {
+        id: 'business',
+        title: 'Business',
+    },
+    {
+        id: 'finance',
+        title: 'Finance',
+    },
+    {
+        id: 'learning',
+        title: 'Learning',
+    },
+    {
+        id: 'life',
+        title: 'Life',
+    },
+    {
+        id: 'health',
+        title: 'Health',
+        aliases: ['health-longevity', 'longevity', 'exercise'],
+    },
+    {
+        id: 'insights',
+        title: 'Insights',
+        aliases: ['insight', 'research-notes', 'notes'],
+    },
+    {
+        id: 'other',
+        title: 'Other',
+    },
+]
+
+export const allNotesCategory: NoteCategory = {
+    id: 'all',
+    title: 'All',
+}
+
+export const noteFilterCategories: NoteCategory[] = [
+    allNotesCategory,
+    ...noteCategories,
+]
+
+export const getNotesForCategory = <TNote extends NoteCategoryMatch>(
+    notes: TNote[],
+    category: NoteCategory
+) => {
+    if (category.id === allNotesCategory.id) {
+        return notes
+    }
+
+    const categoryKeys = new Set([
+        category.id,
+        ...(category.aliases ?? []),
+    ])
+
+    return notes.filter((note) => (
+        categoryKeys.has(note.category) ||
+        Boolean(note.domain && categoryKeys.has(note.domain)) ||
+        Boolean(note.type && categoryKeys.has(note.type)) ||
+        note.tags.some((tag) => categoryKeys.has(tag))
+    ))
+}
+
+export const getNoteCategoryById = (id: string) => {
+    return noteCategories.find((category) => category.id === id)
+}
+
+export const getStaticNoteCategorySlugs = () => {
+    return noteCategories.map((category) => category.id)
+}
diff --git a/src/lib/notes.ts b/src/lib/notes.ts
index 225449c..1a0482f 100644
--- a/src/lib/notes.ts
+++ b/src/lib/notes.ts
@@ -1,13 +1,18 @@
 import { existsSync, readdirSync, readFileSync } from 'node:fs'
 import { join, resolve } from 'node:path'
+import { noteCategories } from './note-categories'
 
-export type PublicNoteStatus = 'draft' | 'reviewed' | 'evergreen' | 'archived'
+export {
+    allNotesCategory,
+    getNoteCategoryById,
+    getNotesForCategory,
+    getStaticNoteCategorySlugs,
+    noteCategories,
+    noteFilterCategories,
+    type NoteCategory,
+} from './note-categories'
 
-export interface NoteCategory {
-    id: string
-    title: string
-    aliases?: string[]
-}
+export type PublicNoteStatus = 'draft' | 'reviewed' | 'evergreen' | 'archived'
 
 export interface PublicNote {
     slug: string
@@ -38,58 +43,6 @@ const allowedStatuses = new Set<PublicNoteStatus>([
     'archived',
 ])
 
-export const noteCategories: NoteCategory[] = [
-    {
-        id: 'ai-tools',
-        title: 'AI & Tools',
-        aliases: ['ai', 'tools', 'ai-workflow', 'agent', 'agents'],
-    },
-    {
-        id: 'tech',
-        title: 'Tech',
-    },
-    {
-        id: 'business',
-        title: 'Business',
-    },
-    {
-        id: 'finance',
-        title: 'Finance',
-    },
-    {
-        id: 'learning',
-        title: 'Learning',
-    },
-    {
-        id: 'life',
-        title: 'Life',
-    },
-    {
-        id: 'health',
-        title: 'Health',
-        aliases: ['health-longevity', 'longevity', 'exercise'],
-    },
-    {
-        id: 'insights',
-        title: 'Insights',
-        aliases: ['insight', 'research-notes', 'notes'],
-    },
-    {
-        id: 'other',
-        title: 'Other',
-    },
-]
-
-export const allNotesCategory: NoteCategory = {
-    id: 'all',
-    title: 'All',
-}
-
-export const noteFilterCategories: NoteCategory[] = [
-    allNotesCategory,
-    ...noteCategories,
-]
-
 const stripQuotes = (value: string) => value.replace(/^['"]|['"]$/g, '')
 
 const parseInlineArray = (value: string) => {
@@ -282,32 +235,6 @@ export const getPublicNoteSlugs = () => {
     return getPublicNotes().map((note) => note.slug)
 }
 
-export const getNotesForCategory = (notes: PublicNote[], category: NoteCategory) => {
-    if (category.id === allNotesCategory.id) {
-        return notes
-    }
-
-    const categoryKeys = new Set([
-        category.id,
-        ...(category.aliases ?? []),
-    ])
-
-    return notes.filter((note) => (
-        categoryKeys.has(note.category) ||
-        Boolean(note.domain && categoryKeys.has(note.domain)) ||
-        Boolean(note.type && categoryKeys.has(note.type)) ||
-        note.tags.some((tag) => categoryKeys.has(tag))
-    ))
-}
-
-export const getNoteCategoryById = (id: string) => {
-    return noteCategories.find((category) => category.id === id)
-}
-
-export const getStaticNoteCategorySlugs = () => {
-    return noteCategories.map((category) => category.id)
-}
-
 export const getStaticNotePostSlugs = () => {
     return getPublicNoteSlugs()
 }