diff --git a/src/components/repo.tsx b/src/components/repo.tsx
index 1ec2d0f..0470ac5 100644
--- a/src/components/repo.tsx
+++ b/src/components/repo.tsx
@@ -10,7 +10,6 @@ import {
 	FileText,
 	FoldVertical,
 	Folder,
-	Minimize2,
 	PanelLeftClose,
 	PanelLeftOpen,
 	PanelRightClose,
@@ -420,20 +419,32 @@ export const OverviewFileRow: Component<{
 	href: string;
 	icon: JSX.Element;
 	lastCommit?: TreeEntry['last_commit'];
+	lastCommitHref?: string;
 	class?: string;
 	onMouseEnter?: JSX.EventHandlerUnion<HTMLAnchorElement, MouseEvent>;
 	onMouseLeave?: JSX.EventHandlerUnion<HTMLAnchorElement, MouseEvent>;
 	onClick?: JSX.EventHandlerUnion<HTMLAnchorElement, MouseEvent>;
 }> = (props) => (
-	<A href={props.href} class={clsx('untangled-file-row hover:underline', props.class)} onClick={props.onClick} onMouseEnter={props.onMouseEnter} onMouseLeave={props.onMouseLeave}>
-		<div class="flex min-w-0 items-center gap-2">
+	<div class={clsx('untangled-file-row', props.class)}>
+		<A href={props.href} class="flex min-w-0 items-center gap-2 no-underline hover:underline dark:text-white" onClick={props.onClick} onMouseEnter={props.onMouseEnter} onMouseLeave={props.onMouseLeave}>
 			{props.icon}
 			<span class="truncate">{props.name}</span>
-		</div>
-		<span class="untangled-file-row-time text-sm text-gray-500 dark:text-gray-400">
-			{props.lastCommit?.when ? formatRelativeTime(props.lastCommit.when) : ''}
-		</span>
-	</A>
+		</A>
+		<Show when={props.lastCommit?.when}>
+			{(when) => (
+				<Show
+					when={props.lastCommitHref}
+					fallback={<span class="untangled-file-row-time text-sm text-gray-500 dark:text-gray-400">{formatRelativeTime(when())}</span>}
+				>
+					{(href) => (
+						<A href={href()} class="untangled-file-row-time text-sm text-gray-500 no-underline hover:underline dark:text-gray-400">
+							{formatRelativeTime(when())}
+						</A>
+					)}
+				</Show>
+			)}
+		</Show>
+	</div>
 );
 
 export const FileRow: Component<{
@@ -441,6 +452,7 @@ export const FileRow: Component<{
 	href: string;
 	icon: JSX.Element;
 	lastCommit?: TreeEntry['last_commit'];
+	lastCommitHref?: string;
 	commitMessage?: string;
 }> = (props) => (
 	<div class="grid grid-cols-12 gap-4 items-center py-1">
@@ -460,7 +472,17 @@ export const FileRow: Component<{
 			</Show>
 		</div>
 		<div class="col-span-4 md:col-span-2 text-sm text-right text-gray-500 dark:text-gray-400">
-			{props.lastCommit ? formatRelativeTime(props.lastCommit.when) : ''}
+			<Show when={props.lastCommit?.when}>
+				{(when) => (
+					<Show when={props.lastCommitHref} fallback={<span>{formatRelativeTime(when())}</span>}>
+						{(href) => (
+							<A href={href()} class="text-gray-500 no-underline hover:underline dark:text-gray-400">
+								{formatRelativeTime(when())}
+							</A>
+						)}
+					</Show>
+				)}
+			</Show>
 		</div>
 	</div>
 );
@@ -788,31 +810,64 @@ const parseDiffFiles = (patch: string): DiffFile[] => {
 	return files;
 };
 
-export const DiffView: Component<{ patch: string; maxHeight?: string; wrap?: boolean }> = (props) => {
+const changedFilesLabel = (count: number) => `${count} changed file${count === 1 ? '' : 's'}`;
+
+const DiffToolbarStats: Component<{ additions: number; deletions: number; fileCount: number; class?: string }> = (props) => (
+	<>
+		<DiffStatPill additions={props.additions} deletions={props.deletions} />
+		<span class={props.class ?? 'text-xs text-gray-600 dark:text-gray-300'}>{changedFilesLabel(props.fileCount)}</span>
+	</>
+);
+
+const DiffCollapseButton: Component<{ expanded: boolean; onToggle: () => void }> = (props) => (
+	<button type="button" class="untangled-diff-tool-button" onClick={props.onToggle}>
+		<Show when={props.expanded} fallback={<UnfoldVertical class="size-4" />}>
+			<FoldVertical class="size-4" />
+		</Show>
+		<span>{props.expanded ? 'collapse all' : 'expand all'}</span>
+	</button>
+);
+
+export const DiffView: Component<{
+	patch: string;
+	maxHeight?: string;
+	wrap?: boolean;
+	defaultExpanded?: boolean;
+	showFileTree?: boolean;
+	variant?: 'default' | 'commit';
+}> = (props) => {
 	const files = createMemo(() => parseDiffFiles(props.patch));
 	const stats = createMemo(() => totalDiffStats(files()));
-	const [expanded, setExpanded] = createSignal(false);
+	const [expanded, setExpanded] = createSignal(props.defaultExpanded ?? false);
+	const [filesVisible, setFilesVisible] = createSignal(true);
 	const previewLimit = 5;
-	const visibleFiles = createMemo(() => files().slice(0, previewLimit));
-	const hiddenFiles = createMemo(() => files().slice(previewLimit));
+	const showFileTree = createMemo(() => Boolean(props.showFileTree && files().length > 0));
+	const tree = createMemo(() => diffFileTree(files()));
+	const visibleFiles = createMemo(() => (showFileTree() ? files() : files().slice(0, previewLimit)));
+	const hiddenFiles = createMemo(() => (showFileTree() ? [] : files().slice(previewLimit)));
 
 	return (
-		<div class="untangled-diff-view">
+		<div class={clsx('untangled-diff-view', props.variant === 'commit' && 'untangled-diff-view-commit')}>
 			<div class="untangled-diff-panel">
 				<div class="untangled-diff-toolbar">
 					<div class="flex min-w-0 items-center gap-2">
-						<DiffStatPill additions={stats().additions} deletions={stats().deletions} />
-						<span class="text-xs text-gray-600 dark:text-gray-300">
-							{files().length} changed file{files().length === 1 ? '' : 's'}
-						</span>
+						<Show when={showFileTree()}>
+							<button
+								type="button"
+								class="untangled-diff-sidebar-toggle"
+								aria-label={filesVisible() ? 'collapse changed files sidebar' : 'expand changed files sidebar'}
+								aria-pressed={filesVisible()}
+								onClick={() => setFilesVisible(!filesVisible())}
+							>
+								<Show when={filesVisible()} fallback={<PanelLeftOpen class="size-4" />}>
+									<PanelLeftClose class="size-4" />
+								</Show>
+							</button>
+						</Show>
+						<DiffToolbarStats additions={stats().additions} deletions={stats().deletions} fileCount={files().length} />
 					</div>
 					<div class="flex items-center gap-2">
-						<button type="button" class="untangled-diff-tool-button" onClick={() => setExpanded(!expanded())}>
-							<Show when={expanded()} fallback={<UnfoldVertical class="w-4 h-4" />}>
-								<FoldVertical class="w-4 h-4" />
-							</Show>
-							{expanded() ? 'Collapse all' : 'Expand all'}
-						</button>
+						<DiffCollapseButton expanded={expanded()} onToggle={() => setExpanded(!expanded())} />
 						<div class="untangled-diff-mode-group">
 							<button type="button" class="untangled-diff-mode-button untangled-diff-mode-button-active">
 								<FileText class="w-4 h-4" />
@@ -825,54 +880,62 @@ export const DiffView: Component<{ patch: string; maxHeight?: string; wrap?: boo
 						</div>
 					</div>
 				</div>
-				<div class="untangled-diff-panel-body">
-					<For each={visibleFiles()}>
-						{(file) => (
-							<details class="untangled-diff-file" open={expanded()}>
-								<summary class="untangled-diff-file-header">
-									<div class="flex min-w-0 items-center gap-2">
+				<div class={clsx('untangled-diff-panel-body', showFileTree() && filesVisible() && 'untangled-diff-panel-body-with-tree')}>
+					<Show when={showFileTree() && filesVisible()}>
+						<aside class="untangled-pr-file-tree" aria-label="changed files">
+							<DiffFileTreeNodes nodes={tree()} />
+						</aside>
+					</Show>
+
+					<div class={showFileTree() ? 'untangled-pr-diff-files' : 'untangled-diff-files'}>
+						<For each={visibleFiles()}>
+							{(file) => (
+								<details id={diffFileElementId(file.path)} class="untangled-diff-file" open={expanded()}>
+									<summary class="untangled-diff-file-header">
+										<div class="flex min-w-0 items-center gap-2">
+											<ChevronRight class="untangled-diff-chevron size-4 shrink-0" />
+											<DiffStatPill additions={file.additions} deletions={file.deletions} />
+											<span class="truncate font-mono text-sm text-gray-900 dark:text-gray-100">{file.path}</span>
+										</div>
+									</summary>
+									<CodeView text={file.text} wrap={props.wrap} maxHeight={props.maxHeight} diff path={file.path} />
+								</details>
+							)}
+						</For>
+						<Show when={hiddenFiles().length > 0}>
+							<details class="untangled-diff-show-more">
+								<summary class="untangled-diff-show-more-summary">
+									<span class="untangled-diff-show-more-closed">
 										<ChevronRight class="untangled-diff-chevron size-4 shrink-0" />
-										<DiffStatPill additions={file.additions} deletions={file.deletions} />
-										<span class="truncate font-mono text-sm text-gray-900 dark:text-gray-100">{file.path}</span>
-									</div>
+										Show {hiddenFiles().length} more file{hiddenFiles().length === 1 ? '' : 's'}
+									</span>
+									<span class="untangled-diff-show-more-open">
+										<ChevronRight class="untangled-diff-chevron size-4 shrink-0" />
+										Hide {hiddenFiles().length} file{hiddenFiles().length === 1 ? '' : 's'}
+									</span>
 								</summary>
-								<CodeView text={file.text} wrap={props.wrap} maxHeight={props.maxHeight} diff path={file.path} />
+								<div class="untangled-diff-show-more-files">
+									<For each={hiddenFiles()}>
+										{(file) => (
+											<details id={diffFileElementId(file.path)} class="untangled-diff-file" open={expanded()}>
+												<summary class="untangled-diff-file-header">
+													<div class="flex min-w-0 items-center gap-2">
+														<ChevronRight class="untangled-diff-chevron size-4 shrink-0" />
+														<DiffStatPill additions={file.additions} deletions={file.deletions} />
+														<span class="truncate font-mono text-sm text-gray-900 dark:text-gray-100">{file.path}</span>
+													</div>
+												</summary>
+												<CodeView text={file.text} wrap={props.wrap} maxHeight={props.maxHeight} diff path={file.path} />
+											</details>
+										)}
+									</For>
+								</div>
 							</details>
-						)}
-					</For>
-					<Show when={hiddenFiles().length > 0}>
-						<details class="untangled-diff-show-more">
-							<summary class="untangled-diff-show-more-summary">
-								<span class="untangled-diff-show-more-closed">
-									<ChevronRight class="untangled-diff-chevron size-4 shrink-0" />
-									Show {hiddenFiles().length} more file{hiddenFiles().length === 1 ? '' : 's'}
-								</span>
-								<span class="untangled-diff-show-more-open">
-									<ChevronRight class="untangled-diff-chevron size-4 shrink-0" />
-									Hide {hiddenFiles().length} file{hiddenFiles().length === 1 ? '' : 's'}
-								</span>
-							</summary>
-							<div class="untangled-diff-show-more-files">
-								<For each={hiddenFiles()}>
-									{(file) => (
-										<details class="untangled-diff-file" open={expanded()}>
-											<summary class="untangled-diff-file-header">
-												<div class="flex min-w-0 items-center gap-2">
-													<ChevronRight class="untangled-diff-chevron size-4 shrink-0" />
-													<DiffStatPill additions={file.additions} deletions={file.deletions} />
-													<span class="truncate font-mono text-sm text-gray-900 dark:text-gray-100">{file.path}</span>
-												</div>
-											</summary>
-											<CodeView text={file.text} wrap={props.wrap} maxHeight={props.maxHeight} diff path={file.path} />
-										</details>
-									)}
-								</For>
-							</div>
-						</details>
-					</Show>
-					<Show when={files().length === 0}>
-						<div class="px-4 py-8 text-center text-sm text-gray-400">No differences found.</div>
-					</Show>
+						</Show>
+						<Show when={files().length === 0}>
+							<div class="px-4 py-8 text-center text-sm text-gray-400">No differences found.</div>
+						</Show>
+					</div>
 				</div>
 			</div>
 		</div>
@@ -1031,8 +1094,7 @@ export const PullDiffView: Component<{ patch: string; roundLabel: string; histor
 							<PanelLeftClose class="size-4" />
 						</Show>
 					</button>
-					<DiffStatPill additions={stats().additions} deletions={stats().deletions} />
-					<span>{files().length} changed files</span>
+					<DiffToolbarStats additions={stats().additions} deletions={stats().deletions} fileCount={files().length} class="text-xs text-gray-600 dark:text-gray-400" />
 					<span class="hidden h-5 w-px bg-gray-300 dark:bg-gray-700 sm:inline-block" />
 					<span class="uppercase tracking-wide">diff</span>
 					<span class="rounded border border-gray-300 px-2 py-0.5 font-mono text-xs text-gray-700 dark:border-gray-600 dark:text-gray-200">
@@ -1040,10 +1102,7 @@ export const PullDiffView: Component<{ patch: string; roundLabel: string; histor
 					</span>
 				</div>
 				<div class="untangled-pr-diff-toolbar-actions">
-					<button type="button" class="untangled-pr-tool-button" onClick={() => setExpanded(!expanded())}>
-						<Minimize2 class="size-4" />
-						<span>{expanded() ? 'collapse all' : 'expand all'}</span>
-					</button>
+					<DiffCollapseButton expanded={expanded()} onToggle={() => setExpanded(!expanded())} />
 				</div>
 				<div class="untangled-pr-diff-toolbar-history">
 					<button
diff --git a/src/index.css b/src/index.css
index 7024a4c..9b58721 100644
--- a/src/index.css
+++ b/src/index.css
@@ -158,7 +158,7 @@
 	gap: 1rem;
 	align-items: center;
 	padding: 0.5rem;
-	background: rgb(249 250 251);
+	background: rgb(241 245 249);
 }
 
 .untangled-pr-diff-toolbar-sidebar-collapsed {
@@ -209,7 +209,6 @@
 	grid-column: 2;
 }
 
-.untangled-pr-tool-button,
 .untangled-pr-sidebar-toggle {
 	display: inline-flex;
 	min-height: 2.125rem;
@@ -298,9 +297,9 @@
 }
 
 .untangled-pr-file-tree-children {
-	margin-left: 1rem;
+	margin-left: 0.25rem;
 	border-left: 1px solid rgb(209 213 219);
-	padding-left: 0.75rem;
+	padding-left: 0.5rem;
 }
 
 .untangled-pr-file-tree-entry {
@@ -311,9 +310,9 @@
 	min-height: 1.5rem;
 	border-radius: 0.25rem;
 	padding-top: 0.125rem;
-	padding-right: 0.5rem;
+	padding-right: 0.25rem;
 	padding-bottom: 0.125rem;
-	padding-left: 0.25rem;
+	padding-left: 0;
 	color: rgb(55 65 81);
 	font-size: 0.875rem;
 	text-decoration: none;
@@ -334,13 +333,16 @@
 
 .untangled-pr-diff-file {
 	scroll-margin-top: 4rem;
-	overflow: hidden;
+	overflow: visible;
 	border: 1px solid rgb(209 213 219);
 	border-radius: 0.25rem;
 	background: rgb(255 255 255);
 }
 
 .untangled-pr-diff-file-header {
+	position: sticky;
+	top: 3rem;
+	z-index: 20;
 	display: flex;
 	min-height: 2.75rem;
 	cursor: pointer;
@@ -460,7 +462,6 @@
 
 @media (prefers-color-scheme: dark) {
 	.untangled-pr-summary-card,
-	.untangled-pr-tool-button,
 	.untangled-pr-sidebar-toggle,
 	.untangled-pr-file-tree,
 	.untangled-pr-diff-file,
@@ -493,7 +494,6 @@
 		color: rgb(156 163 175);
 	}
 
-	.untangled-pr-tool-button,
 	.untangled-pr-sidebar-toggle,
 	.untangled-pr-diff-file,
 	.untangled-pr-history-card {
@@ -574,6 +574,7 @@
 	.untangled-pr-file-tree {
 		display: none;
 	}
+
 }
 
 @media (max-width: 767px) {
@@ -670,6 +671,15 @@ pre {
 	padding-bottom: max(2rem, calc(1.5rem + env(safe-area-inset-bottom)));
 }
 
+.untangled-repo-frame-full {
+	box-sizing: border-box;
+	margin-left: calc(50% - 50vw);
+	margin-right: calc(50% - 50vw);
+	padding-left: 0.25rem;
+	padding-right: 0.25rem;
+	width: 100vw;
+}
+
 .untangled-skeleton {
 	background: rgb(229 231 235);
 	position: relative;
@@ -1541,6 +1551,9 @@ details[open] > .untangled-language-bar {
 	width: 1%;
 	padding: 0 0.75rem 0 0.5rem;
 	color: var(--untangled-code-muted);
+	overflow-wrap: normal;
+	white-space: nowrap;
+	word-break: normal;
 	text-align: right;
 	text-decoration: none;
 	user-select: none;
@@ -1689,6 +1702,12 @@ details[open] > .untangled-language-bar {
 	gap: 0;
 }
 
+.untangled-commit-view,
+.untangled-commit-diff,
+.untangled-diff-view-commit {
+	width: 100%;
+}
+
 .untangled-diff-panel {
 	overflow: hidden;
 	border: 1px solid rgb(229 231 235);
@@ -1706,6 +1725,51 @@ details[open] > .untangled-language-bar {
 	padding: 0.5rem 0.75rem;
 }
 
+.untangled-diff-sidebar-toggle {
+	display: inline-flex;
+	width: 2rem;
+	min-height: 2rem;
+	align-items: center;
+	justify-content: center;
+	border: 1px solid rgb(209 213 219);
+	border-radius: 0.25rem;
+	background: rgb(255 255 255);
+	color: rgb(31 41 55);
+}
+
+.untangled-diff-view-commit .untangled-diff-toolbar {
+	background: rgb(241 245 249);
+}
+
+.untangled-diff-view-commit .untangled-diff-panel {
+	overflow: visible;
+	border: 0;
+	border-radius: 0;
+	background: transparent;
+}
+
+.untangled-diff-view-commit .untangled-diff-toolbar {
+	border-bottom: 0;
+	position: sticky;
+	top: 0;
+	z-index: 30;
+	min-height: 3rem;
+	padding: 0.5rem 0;
+}
+
+.untangled-diff-view-commit .untangled-diff-panel-body {
+	padding-top: 0;
+	padding-left: 0;
+	padding-right: 0;
+}
+
+.untangled-diff-files {
+	display: flex;
+	min-width: 0;
+	flex-direction: column;
+	gap: 0.5rem;
+}
+
 .untangled-diff-tool-button,
 .untangled-diff-mode-button {
 	display: inline-flex;
@@ -1758,6 +1822,32 @@ details[open] > .untangled-language-bar {
 	padding: 0.5rem;
 }
 
+.untangled-diff-panel-body.untangled-diff-panel-body-with-tree {
+	display: grid;
+	grid-template-columns: 15.5rem minmax(0, 1fr);
+	align-items: start;
+	gap: 1rem;
+}
+
+.untangled-diff-view-commit .untangled-diff-panel-body.untangled-diff-panel-body-with-tree {
+	padding-top: 0;
+}
+
+.untangled-diff-view-commit .untangled-pr-file-tree {
+	top: 3rem;
+	max-height: calc(100vh - 3rem);
+	min-height: calc(100vh - 3rem);
+	border-top: 1px solid rgb(229 231 235);
+	border-radius: 0.25rem;
+}
+
+@media (max-width: 1023px) {
+	.untangled-diff-panel-body.untangled-diff-panel-body-with-tree {
+		display: flex;
+		grid-template-columns: none;
+	}
+}
+
 .untangled-diff-file {
 	overflow: hidden;
 	border: 1px solid rgb(229 231 235);
@@ -1765,6 +1855,11 @@ details[open] > .untangled-language-bar {
 	background: rgb(255 255 255);
 }
 
+.untangled-diff-view-commit .untangled-diff-file {
+	scroll-margin-top: 4rem;
+	overflow: visible;
+}
+
 .untangled-diff-file-header {
 	display: flex;
 	align-items: center;
@@ -1777,6 +1872,12 @@ details[open] > .untangled-language-bar {
 	list-style: none;
 }
 
+.untangled-diff-view-commit .untangled-diff-file-header {
+	position: sticky;
+	top: 3rem;
+	z-index: 20;
+}
+
 .untangled-diff-file-header::-webkit-details-marker {
 	display: none;
 }
@@ -1857,8 +1958,22 @@ details[open] > .untangled-language-bar {
 		background: rgb(55 65 81 / 0.5);
 	}
 
+	.untangled-diff-view-commit .untangled-diff-toolbar {
+		background: rgb(17 24 39);
+	}
+
+	.untangled-diff-view-commit .untangled-diff-panel {
+		border: 0;
+		background: transparent;
+	}
+
+	.untangled-diff-view-commit .untangled-pr-file-tree {
+		border-top-color: rgb(55 65 81);
+	}
+
 	.untangled-diff-tool-button,
-	.untangled-diff-mode-button {
+	.untangled-diff-mode-button,
+	.untangled-diff-sidebar-toggle {
 		border-color: rgb(55 65 81);
 		background: rgb(17 24 39 / 0.35);
 		color: rgb(229 231 235);
@@ -1888,6 +2003,10 @@ details[open] > .untangled-language-bar {
 		background: rgb(17 24 39 / 0.35);
 	}
 
+	.untangled-diff-view-commit .untangled-diff-file-header {
+		background: rgb(31 41 55);
+	}
+
 	.untangled-diff-show-more-summary {
 		color: rgb(209 213 219);
 	}
diff --git a/src/lib/api.ts b/src/lib/api.ts
index cdae8c0..ebf7b81 100644
--- a/src/lib/api.ts
+++ b/src/lib/api.ts
@@ -21,6 +21,7 @@ export {
 	buildBlobDataUrl,
 	compareBranches,
 	decodeBlobText,
+	getRepoCommit,
 	getRepo,
 	getRepoBlob,
 	getRepoBranches,
@@ -73,12 +74,21 @@ export type {
 	BranchEntry,
 	BranchResponse,
 	CommitHeadline,
+	CommitEntry,
 	ComparePatch,
 	CompareResponse,
 	DefaultBranchResponse,
+	DiffTextFragment,
+	DiffTextLine,
+	GitHashValue,
 	LanguageResponse,
 	LogResponse,
+	RepoCommitResponse,
 	RepoContext,
+	RepoDiff,
+	RepoDiffFile,
+	RepoDiffStat,
+	RepoLogOptions,
 	RepoRecord,
 	TagResponse,
 	TreeEntry,
diff --git a/src/lib/api/repos.ts b/src/lib/api/repos.ts
index 496c3eb..42a0270 100644
--- a/src/lib/api/repos.ts
+++ b/src/lib/api/repos.ts
@@ -130,29 +130,87 @@ export interface LanguageResponse {
 	}>;
 }
 
+export type GitHashValue =
+	| string
+	| number[]
+	| {
+			String?: string;
+			string?: string;
+	  };
+
+export interface CommitSignature {
+	Name: string;
+	Email: string;
+	When: string;
+}
+
+export interface CommitEntry {
+	hash?: GitHashValue;
+	this: string;
+	message: string;
+	tree?: string;
+	author?: CommitSignature;
+	committer?: CommitSignature;
+	pgp_signature?: string;
+	parent?: string;
+	parent_hashes?: GitHashValue[];
+}
+
 export interface LogResponse {
 	ref: string;
 	total: number;
 	page: number;
 	per_page: number;
 	log: boolean;
-	commits: Array<{
-		this: string;
-		message: string;
-		author?: {
-			Name: string;
-			Email: string;
-			When: string;
-		};
-		committer?: {
-			Name: string;
-			Email: string;
-			When: string;
-		};
-		pgp_signature?: string;
-		parent?: string;
-		parent_hashes?: number[][];
-	}>;
+	commits: CommitEntry[];
+}
+
+export interface DiffTextLine {
+	Op: 0 | 1 | 2 | ' ' | '-' | '+';
+	Line: string;
+}
+
+export interface DiffTextFragment {
+	Comment?: string;
+	OldPosition: number;
+	OldLines: number;
+	NewPosition: number;
+	NewLines: number;
+	LinesAdded: number;
+	LinesDeleted: number;
+	LeadingContext?: number;
+	TrailingContext?: number;
+	Lines: DiffTextLine[];
+}
+
+export interface RepoDiffFile {
+	name: {
+		old: string;
+		new: string;
+	};
+	text_fragments: DiffTextFragment[];
+	is_binary: boolean;
+	is_new: boolean;
+	is_delete: boolean;
+	is_copy: boolean;
+	is_rename: boolean;
+}
+
+export interface RepoDiffStat {
+	insertions: number;
+	deletions: number;
+	files_changed: number;
+}
+
+export interface RepoDiff {
+	commit: CommitEntry;
+	stat: RepoDiffStat;
+	diff: RepoDiffFile[];
+}
+
+export interface RepoCommitResponse {
+	ref: string;
+	diff?: RepoDiff;
 }
 
 export interface BlobResponse {
@@ -384,18 +442,44 @@ const getRepoLanguagesFromKnot = async (repo: RepoContext, ref: string): Promise
 		}),
 	)) as LanguageResponse;
 
-const getRepoLogFromKnot = async (repo: RepoContext, ref: string): Promise<LogResponse> =>
+export interface RepoLogOptions {
+	limit?: number;
+	cursor?: string;
+	path?: string;
+}
+
+const getRepoLogFromKnot = async (
+	repo: RepoContext,
+	ref: string,
+	options: RepoLogOptions = {},
+): Promise<LogResponse> =>
 	(await ok(
 		getRpc(repo.knot).get('sh.tangled.repo.log', {
 			params: {
 				repo: repo.repoDid,
 				ref,
-				limit: 8,
+				limit: options.limit ?? 8,
+				...(options.cursor ? { cursor: options.cursor } : {}),
+				...(options.path ? { path: options.path } : {}),
 			},
 			as: 'json',
 		}),
 	)) as LogResponse;
 
+const getRepoCommitFromKnot = async (
+	repo: RepoContext,
+	ref: string,
+): Promise<RepoCommitResponse> =>
+	(await ok(
+		getRpc(repo.knot).get('sh.tangled.repo.diff', {
+			params: {
+				repo: repo.repoDid,
+				ref,
+			},
+			as: 'json',
+		}),
+	)) as RepoCommitResponse;
+
 const getRepoBlobFromKnot = async (
 	repo: RepoContext,
 	ref: string,
@@ -461,10 +545,23 @@ export const getRepoLanguages = async (repo: RepoContext, ref: string): Promise<
 		() => getRepoLanguagesFromKnot(repo, ref),
 	);
 
-export const getRepoLog = async (repo: RepoContext, ref: string): Promise<LogResponse> =>
+export const getRepoLog = async (
+	repo: RepoContext,
+	ref: string,
+	options: RepoLogOptions = {},
+): Promise<LogResponse> =>
+	appviewOptionalKnotRequest(
+		() => getRepoViaAppview<LogResponse>('sh.tangled.repo.log', repo, { ref, ...options, limit: options.limit ?? 8 }),
+		() => getRepoLogFromKnot(repo, ref, options),
+	);
+
+export const getRepoCommit = async (
+	repo: RepoContext,
+	ref: string,
+): Promise<RepoCommitResponse> =>
 	appviewOptionalKnotRequest(
-		() => getRepoViaAppview<LogResponse>('sh.tangled.repo.log', repo, { ref, limit: 8 }),
-		() => getRepoLogFromKnot(repo, ref),
+		() => getRepoViaAppview<RepoCommitResponse>('sh.tangled.repo.diff', repo, { ref }),
+		() => getRepoCommitFromKnot(repo, ref),
 	);
 
 export const getRepoBlob = async (
diff --git a/src/lib/repo-utils.ts b/src/lib/repo-utils.ts
index a2ac481..a20f180 100644
--- a/src/lib/repo-utils.ts
+++ b/src/lib/repo-utils.ts
@@ -91,6 +91,12 @@ export const treeHref = (repo: RepoContext, ref: string, path = ''): string =>
 export const blobHref = (repo: RepoContext, ref: string, path: string): string =>
 	`/${repo.owner.handle}/${repo.slug}/blob/${encodeURIComponent(ref)}/${encodePath(path)}`;
 
+export const commitsHref = (repo: RepoContext, ref: string): string =>
+	`/${repo.owner.handle}/${repo.slug}/commits/${encodeURIComponent(ref)}`;
+
+export const commitHref = (repo: RepoContext, ref: string): string =>
+	`/${repo.owner.handle}/${repo.slug}/commit/${encodeURIComponent(ref)}`;
+
 const encodeRouteParam = (value: string | number): string => encodeURIComponent(String(value));
 
 export const issueHref = (repo: RepoContext, issueRef: string | number): string =>
diff --git a/src/pages/repo.tsx b/src/pages/repo.tsx
index ef6364d..5f16460 100644
--- a/src/pages/repo.tsx
+++ b/src/pages/repo.tsx
@@ -1,3 +1,4 @@
 export { BlobPage, RepoCodePage } from './repo/code';
+export { CommitPage, CommitsPage } from './repo/commits';
 export { IssuePage, IssuesPage, NewIssuePage } from './repo/issues';
 export { NewPullPage, PullPage, PullsPage } from './repo/pulls';
diff --git a/src/pages/repo/code.tsx b/src/pages/repo/code.tsx
index b05de06..8056b5d 100644
--- a/src/pages/repo/code.tsx
+++ b/src/pages/repo/code.tsx
@@ -7,7 +7,7 @@ import { buildBlobDataUrl, decodeBlobText, getRepoBlob, getRepoBranches, getRepo
 import { Avatar, ErrorState, PlaceholderAvatar, buttonStyles, cardStyles } from '../../components/common';
 import { CodeView, FileRow, MarkdownBlock, OverviewFileRow, ReadmeCard, RepoTreeSkeleton } from '../../components/repo';
 import { RepoFrame, useRepoQuery } from './shared';
-import { blobHref, countLines, decodeRoutePath, formatBytes, formatLanguagePercent, formatRelativeTime, getErrorMessage, getParentPath, imageLike, isDirectory, joinPath, languageColor, markdownLike, safeDecode, sortedTreeEntries, svgLike, treeHref, videoLike } from '../../lib/repo-utils';
+import { blobHref, commitHref, commitsHref, countLines, decodeRoutePath, formatBytes, formatLanguagePercent, formatRelativeTime, getErrorMessage, getParentPath, imageLike, isDirectory, joinPath, languageColor, markdownLike, safeDecode, sortedTreeEntries, svgLike, treeHref, videoLike } from '../../lib/repo-utils';
 import { LOADING_DELAY_MS, hasNamedRef, normalizeLanguages, resolveDefaultBranchName, resolveRouteRefAndPath, shouldAnimateNavigation, useDelayedLoading } from './code-helpers';
 
 const PathBreadcrumbs: Component<{
@@ -393,6 +393,7 @@ const RepoCodePageLegacy: Component = () => {
 															)
 														}
 														lastCommit={entry.last_commit}
+														lastCommitHref={entry.last_commit ? commitHref(repo, entry.last_commit.hash) : undefined}
 														commitMessage={entry.last_commit?.message}
 													/>
 												)}
@@ -712,6 +713,7 @@ export const RepoCodePage: Component = () => {
 																		)
 																	}
 																	lastCommit={entry.last_commit}
+																	lastCommitHref={entry.last_commit ? commitHref(repo, entry.last_commit.hash) : undefined}
 																	class={pendingTreeHref() === href ? 'untangled-file-row-loading' : undefined}
 																	onMouseEnter={handleMouseEnter}
 																	onMouseLeave={handleMouseLeave}
@@ -735,13 +737,13 @@ export const RepoCodePage: Component = () => {
 
 											<Show when={!isNestedTreePath}>
 												<div class="min-w-0 md:pt-0 md:pl-6 border-gray-100 dark:border-gray-700 md:border-t-0 md:border-l">
-													<div class="flex items-center gap-2 pb-3 font-bold">
+													<A href={commitsHref(repo, activeRef)} class="flex items-center gap-2 pb-3 font-bold no-underline hover:underline dark:text-white">
 														<List class="size-4" />
 														<span>commits</span>
 														<span class="rounded bg-gray-200 px-1 py-0.5 text-sm font-normal dark:bg-gray-700">
 															{logQuery.data?.total ?? commits.length}
 														</span>
-													</div>
+													</A>
 													<div class="space-y-6">
 														<For each={commits.slice(0, 6)}>
 															{(commit) => (
diff --git a/src/pages/repo/commits.tsx b/src/pages/repo/commits.tsx
new file mode 100644
index 0000000..d36d850
--- /dev/null
+++ b/src/pages/repo/commits.tsx
@@ -0,0 +1,741 @@
+import clsx from 'clsx';
+import {
+	ArrowLeft,
+	Copy,
+	CopyCheck,
+	Ellipsis,
+	FolderCode,
+} from 'lucide-solid';
+import { A, useParams, useSearchParams } from '@solidjs/router';
+import { createQuery } from '@tanstack/solid-query';
+import { For, Match, Show, Switch, createMemo, createSignal, type Component } from 'solid-js';
+import {
+	getRepoBranches,
+	getRepoCommit,
+	getRepoLog,
+	getRepoTags,
+	type CommitEntry,
+	type CommitSignature,
+	type DiffTextLine,
+	type GitHashValue,
+	type RepoContext,
+	type RepoDiff,
+	type RepoDiffFile,
+	type TagResponse,
+} from '../../lib/api/repos';
+import { Avatar, ErrorState, PaginationControls, PlaceholderAvatar, SkeletonBlock, cardStyles } from '../../components/common';
+import { DiffView } from '../../components/repo';
+import { RepoFrame, useRepoQuery } from './shared';
+import {
+	commitHref,
+	commitsHref,
+	formatRelativeTime,
+	getErrorMessage,
+	parseIntegerSearchParam,
+	safeDecode,
+	treeHref,
+} from '../../lib/repo-utils';
+
+const COMMITS_PAGE_LIMIT = 60;
+const commitListSkeletonRows = Array.from({ length: COMMITS_PAGE_LIMIT });
+const commitDiffSkeletonFiles = Array.from({ length: 2 });
+const commitDiffSkeletonTreeRows = Array.from({ length: 8 });
+const commitDiffSkeletonLines = Array.from({ length: 9 });
+
+const hashBytesToHex = (value: number[]): string =>
+	value.map((byte) => byte.toString(16).padStart(2, '0')).join('');
+
+const normalizeHashValue = (value?: GitHashValue): string => {
+	if (!value) return '';
+	if (typeof value === 'string') return value;
+	if (Array.isArray(value)) return hashBytesToHex(value);
+	return value.String ?? value.string ?? '';
+};
+
+const commitHash = (commit: CommitEntry): string => commit.this || normalizeHashValue(commit.hash);
+
+const primaryParentHash = (commit: CommitEntry): string =>
+	commit.parent || commit.parent_hashes?.map(normalizeHashValue).find(Boolean) || '';
+
+const splitCommitMessage = (message: string) => {
+	const trimmed = message.trimEnd();
+	const [subject, ...bodyParts] = trimmed.split(/\n\n/);
+	return {
+		subject: subject?.trim() || 'no commit message',
+		body: bodyParts.join('\n\n').trim(),
+	};
+};
+
+const commitTime = (commit: CommitEntry): string =>
+	commit.committer?.When || commit.author?.When || '';
+
+const commitAuthor = (commit: CommitEntry): CommitSignature | undefined =>
+	commit.author ?? commit.committer;
+
+const personLabel = (person?: CommitSignature): string =>
+	person?.Name || person?.Email || 'unknown author';
+
+const personDid = (person?: CommitSignature): string | undefined =>
+	person?.Email?.startsWith('did:') ? person.Email : undefined;
+
+const formatFullTime = (value?: string): string => {
+	if (!value) return 'unknown time';
+	const date = new Date(value);
+	if (Number.isNaN(date.getTime())) return value;
+	return new Intl.DateTimeFormat(undefined, {
+		dateStyle: 'medium',
+		timeStyle: 'short',
+	}).format(date);
+};
+
+const commitListPageHref = (repo: RepoContext, ref: string, page: number): string =>
+	page <= 1 ? commitsHref(repo, ref) : `${commitsHref(repo, ref)}?page=${page}`;
+
+const addRefLabel = (map: Map<string, string[]>, hash: string | undefined, label: string | undefined) => {
+	if (!hash || !label) return;
+	const existing = map.get(hash) ?? [];
+	if (!existing.includes(label)) {
+		map.set(hash, [...existing, label]);
+	}
+};
+
+const tagTargetHash = (tag: TagResponse['tags'][number]): string => {
+	const fullTag = tag.tag as (TagResponse['tags'][number]['tag'] & {
+		Target?: GitHashValue;
+		target?: GitHashValue;
+	}) | undefined;
+	return normalizeHashValue(fullTag?.Target ?? fullTag?.target) || tag.hash;
+};
+
+const formatRange = (start: number, count: number): string =>
+	count === 1 ? String(start) : `${start},${count}`;
+
+const diffLinePrefix = (line: DiffTextLine): ' ' | '-' | '+' => {
+	if (line.Op === 1 || line.Op === '-') return '-';
+	if (line.Op === 2 || line.Op === '+') return '+';
+	return ' ';
+};
+
+const renderFragment = (fragment: RepoDiffFile['text_fragments'][number]): string => {
+	let text = `@@ -${formatRange(fragment.OldPosition, fragment.OldLines)} +${formatRange(fragment.NewPosition, fragment.NewLines)} @@`;
+	if (fragment.Comment) {
+		text += ` ${fragment.Comment}`;
+	}
+	text += '\n';
+
+	for (const line of fragment.Lines ?? []) {
+		const rendered = `${diffLinePrefix(line)}${line.Line ?? ''}`;
+		text += rendered.endsWith('\n') ? rendered : `${rendered}\n`;
+	}
+
+	return text;
+};
+
+const renderDiffFile = (file: RepoDiffFile): string => {
+	let oldName = file.name.old;
+	let newName = file.name.new;
+	if (!oldName) oldName = newName;
+	if (!newName) newName = oldName;
+
+	let text = `diff --git a/${oldName} b/${newName}\n`;
+	if (file.is_new) {
+		text += 'new file mode 100644\n';
+		text += '--- /dev/null\n';
+		text += `+++ b/${newName}\n`;
+	} else if (file.is_delete) {
+		text += 'deleted file mode 100644\n';
+		text += `--- a/${oldName}\n`;
+		text += '+++ /dev/null\n';
+	} else if (file.is_rename) {
+		text += `rename from ${oldName}\n`;
+		text += `rename to ${newName}\n`;
+		text += `--- a/${oldName}\n`;
+		text += `+++ b/${newName}\n`;
+	} else {
+		text += `--- a/${oldName}\n`;
+		text += `+++ b/${newName}\n`;
+	}
+
+	if (file.is_binary) {
+		text += `Binary files a/${oldName} and b/${newName} differ\n`;
+		return text;
+	}
+
+	for (const fragment of file.text_fragments ?? []) {
+		text += renderFragment(fragment);
+	}
+
+	return text;
+};
+
+const renderUnifiedDiff = (diff?: RepoDiff): string =>
+	diff?.diff.map(renderDiffFile).join('') ?? '';
+
+const CommitIdentity: Component<{ person?: CommitSignature; size?: string }> = (props) => (
+	<span class="flex items-center gap-1 min-w-0">
+		<Show
+			when={personDid(props.person)}
+			fallback={<PlaceholderAvatar size={props.size ?? 'size-6'} iconSize="size-4" />}
+		>
+			{(did) => <Avatar did={did()} size={props.size ?? 'size-6'} />}
+		</Show>
+		<span class="truncate">{personLabel(props.person)}</span>
+	</span>
+);
+
+const CopyShaButton: Component<{ hash: string }> = (props) => {
+	const [copied, setCopied] = createSignal(false);
+
+	const copy = () => {
+		void navigator.clipboard?.writeText(props.hash);
+		setCopied(true);
+		window.setTimeout(() => setCopied(false), 1500);
+	};
+
+	return (
+		<button
+			type="button"
+			class="p-1 mx-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded"
+			title="Copy SHA"
+			aria-label="Copy SHA"
+			onClick={copy}
+		>
+			<Show when={copied()} fallback={<Copy class="w-4 h-4" />}>
+				<CopyCheck class="w-4 h-4" />
+			</Show>
+		</button>
+	);
+};
+
+const CommitHashLink: Component<{ repo: RepoContext; hash: string }> = (props) => (
+	<A
+		href={commitHref(props.repo, props.hash)}
+	class="no-underline hover:underline text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-900 px-2 py-1 rounded flex items-center gap-2"
+>
+	{props.hash.slice(0, 8)}
+</A>
+);
+
+const RefLabels: Component<{ labels: string[] }> = (props) => (
+	<For each={props.labels}>
+		{(label) => (
+			<span class="ml-2 text-xs rounded bg-gray-100 dark:bg-gray-700 text-black dark:text-white font-mono px-2 inline-flex items-center">
+				{label}
+			</span>
+		)}
+	</For>
+);
+
+const CommitMessageCell: Component<{
+	repo: RepoContext;
+	commit: CommitEntry;
+	hash: string;
+	labels: string[];
+}> = (props) => {
+	const [expanded, setExpanded] = createSignal(false);
+	const message = createMemo(() => splitCommitMessage(props.commit.message));
+
+	return (
+		<div>
+			<A href={commitHref(props.repo, props.hash)} class="dark:text-white no-underline hover:underline">
+				{message().subject}
+			</A>
+			<Show when={message().body}>
+				<button
+					type="button"
+					class="ml-1 py-0.5 px-1 bg-gray-200 hover:bg-gray-400 dark:bg-gray-700 dark:hover:bg-gray-600 rounded"
+					aria-label={expanded() ? 'Hide commit message body' : 'Show commit message body'}
+					onClick={() => setExpanded(!expanded())}
+				>
+					<Ellipsis class="w-3 h-3" />
+				</button>
+			</Show>
+			<RefLabels labels={props.labels} />
+			<Show when={expanded() && message().body}>
+				<p class="mt-1 text-sm text-gray-600 dark:text-gray-400 whitespace-pre-wrap">{message().body}</p>
+			</Show>
+		</div>
+	);
+};
+
+const CommitDesktopRow: Component<{
+	repo: RepoContext;
+	commit: CommitEntry;
+	labels: string[];
+}> = (props) => {
+	const hash = createMemo(() => commitHash(props.commit));
+	const when = createMemo(() => commitTime(props.commit));
+
+	return (
+		<div class="grid grid-cols-14 gap-4 py-3">
+			<div class="align-top col-span-3">
+				<CommitIdentity person={commitAuthor(props.commit)} />
+			</div>
+			<div class="align-top font-mono flex items-start col-span-3">
+				<CommitHashLink repo={props.repo} hash={hash()} />
+				<div class="inline-flex ml-1">
+					<CopyShaButton hash={hash()} />
+					<A
+						href={treeHref(props.repo, hash())}
+						class="p-1 mx-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded"
+						title="Browse repository at this commit"
+						aria-label="Browse repository at this commit"
+					>
+						<FolderCode class="w-4 h-4" />
+					</A>
+				</div>
+			</div>
+			<div class="align-top col-span-6">
+				<CommitMessageCell repo={props.repo} commit={props.commit} hash={hash()} labels={props.labels} />
+			</div>
+			<div class="align-top justify-self-end text-gray-500 dark:text-gray-400 col-span-2">
+				<time datetime={when()} title={formatFullTime(when())}>
+					{formatRelativeTime(when())}
+				</time>
+			</div>
+		</div>
+	);
+};
+
+const CommitMobileRow: Component<{
+	repo: RepoContext;
+	commit: CommitEntry;
+	labels: string[];
+	last: boolean;
+}> = (props) => {
+	const hash = createMemo(() => commitHash(props.commit));
+	const when = createMemo(() => commitTime(props.commit));
+
+	return (
+		<div
+			class={clsx(
+				'relative p-2 mb-2',
+				!props.last && 'border-b border-gray-200 dark:border-gray-700',
+			)}
+		>
+			<div class="text-base">
+				<div class="flex items-center justify-between gap-2">
+					<div class="flex-1 min-w-0">
+						<CommitMessageCell repo={props.repo} commit={props.commit} hash={hash()} labels={props.labels} />
+					</div>
+					<A
+						href={treeHref(props.repo, hash())}
+						class="p-1 mr-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded"
+						title="Browse repository at this commit"
+						aria-label="Browse repository at this commit"
+					>
+						<FolderCode class="w-4 h-4" />
+					</A>
+				</div>
+			</div>
+
+			<div class="text-xs mt-2 text-gray-500 dark:text-gray-400 flex items-center flex-wrap gap-y-2">
+				<span class="font-mono">
+					<CommitHashLink repo={props.repo} hash={hash()} />
+				</span>
+				<span class="mx-1 before:content-['·'] before:select-none" />
+				<CommitIdentity person={commitAuthor(props.commit)} />
+				<div class="inline-block px-1 select-none after:content-['·']" />
+				<time datetime={when()} title={formatFullTime(when())}>
+					{formatRelativeTime(when())}
+				</time>
+			</div>
+		</div>
+	);
+};
+
+const CommitListSkeleton: Component = () => (
+	<>
+		<div class="hidden md:flex md:flex-col divide-y divide-gray-200 dark:divide-gray-700">
+			<div class="grid grid-cols-14 gap-4">
+				<div class="py-2 text-sm text-left text-gray-700 dark:text-gray-300 uppercase font-bold col-span-3">Author</div>
+				<div class="py-2 text-sm text-left text-gray-700 dark:text-gray-300 uppercase font-bold col-span-3">Commit</div>
+				<div class="py-2 text-sm text-left text-gray-700 dark:text-gray-300 uppercase font-bold col-span-6">Message</div>
+				<div class="py-2 text-sm text-left text-gray-700 dark:text-gray-300 uppercase font-bold col-span-2 justify-self-end">Date</div>
+			</div>
+			<For each={commitListSkeletonRows}>
+				{(_, index) => (
+					<div class="grid grid-cols-14 gap-4 py-3">
+						<div class="col-span-3 flex min-w-0 items-center gap-2">
+							<SkeletonBlock class="size-6 rounded-full" />
+							<SkeletonBlock class={index() % 3 === 0 ? 'h-4 w-24' : 'h-4 w-32'} />
+						</div>
+						<div class="col-span-3 flex items-center gap-2">
+							<SkeletonBlock class="h-8 w-24" />
+							<SkeletonBlock class="size-6" />
+							<SkeletonBlock class="size-6" />
+						</div>
+						<div class="col-span-6 flex min-w-0 items-center gap-2">
+							<SkeletonBlock class={index() % 2 === 0 ? 'h-5 w-3/4' : 'h-5 w-1/2'} />
+							<Show when={index() % 4 === 0}>
+								<SkeletonBlock class="h-5 w-14" />
+							</Show>
+						</div>
+						<div class="col-span-2 justify-self-end">
+							<SkeletonBlock class="h-4 w-16" />
+						</div>
+					</div>
+				)}
+			</For>
+		</div>
+
+		<div class="md:hidden">
+			<For each={commitListSkeletonRows}>
+				{(_, index) => (
+					<div class={clsx('relative p-2 mb-2', index() < commitListSkeletonRows.length - 1 && 'border-b border-gray-200 dark:border-gray-700')}>
+						<div class="flex items-center justify-between gap-2">
+							<SkeletonBlock class={index() % 2 === 0 ? 'h-5 w-2/3' : 'h-5 w-1/2'} />
+							<SkeletonBlock class="size-6" />
+						</div>
+						<div class="mt-3 flex flex-wrap items-center gap-2">
+							<SkeletonBlock class="h-7 w-24" />
+							<SkeletonBlock class="size-6 rounded-full" />
+							<SkeletonBlock class="h-4 w-24" />
+							<SkeletonBlock class="h-4 w-16" />
+						</div>
+					</div>
+				)}
+			</For>
+		</div>
+	</>
+);
+
+const CommitListContent: Component<{
+	repo: RepoContext;
+	commits: CommitEntry[];
+	labelsByHash: Map<string, string[]>;
+}> = (props) => (
+	<Show
+		when={props.commits.length > 0}
+		fallback={<p class="text-sm text-gray-500 dark:text-gray-400">No commits found.</p>}
+	>
+		<div class="hidden md:flex md:flex-col divide-y divide-gray-200 dark:divide-gray-700">
+			<div class="grid grid-cols-14 gap-4">
+				<div class="py-2 text-sm text-left text-gray-700 dark:text-gray-300 uppercase font-bold col-span-3">Author</div>
+				<div class="py-2 text-sm text-left text-gray-700 dark:text-gray-300 uppercase font-bold col-span-3">Commit</div>
+				<div class="py-2 text-sm text-left text-gray-700 dark:text-gray-300 uppercase font-bold col-span-6">Message</div>
+				<div class="py-2 text-sm text-left text-gray-700 dark:text-gray-300 uppercase font-bold col-span-2 justify-self-end">Date</div>
+			</div>
+			<For each={props.commits}>
+				{(commit) => (
+					<CommitDesktopRow
+						repo={props.repo}
+						commit={commit}
+						labels={props.labelsByHash.get(commitHash(commit)) ?? []}
+					/>
+				)}
+			</For>
+		</div>
+
+		<div class="md:hidden">
+			<For each={props.commits}>
+				{(commit, index) => (
+					<CommitMobileRow
+						repo={props.repo}
+						commit={commit}
+						labels={props.labelsByHash.get(commitHash(commit)) ?? []}
+						last={index() === props.commits.length - 1}
+					/>
+				)}
+			</For>
+		</div>
+	</Show>
+);
+
+export const CommitsPage: Component = () => {
+	const params = useParams();
+	const [searchParams] = useSearchParams();
+	const repoQuery = useRepoQuery();
+	const ref = createMemo(() => safeDecode(params.ref ?? 'HEAD'));
+	const page = createMemo(() => parseIntegerSearchParam(searchParams.page, 1, 1));
+	const pageOffset = createMemo(() => (page() - 1) * COMMITS_PAGE_LIMIT);
+	const cursor = createMemo(() => String(pageOffset()));
+
+	const logQuery = createQuery(() => {
+		const repo = repoQuery.data;
+		return {
+			queryKey: ['repo-commits', repo?.repoDid, ref(), page()],
+			enabled: Boolean(repo),
+			queryFn: async () => getRepoLog(repo!, ref(), {
+				limit: COMMITS_PAGE_LIMIT,
+				cursor: page() > 1 ? cursor() : undefined,
+			}),
+		};
+	});
+	const branchesQuery = createQuery(() => {
+		const repo = repoQuery.data;
+		return {
+			queryKey: ['repo-branches', repo?.repoDid],
+			enabled: Boolean(repo),
+			queryFn: async () => getRepoBranches(repo!),
+		};
+	});
+	const tagsQuery = createQuery(() => {
+		const repo = repoQuery.data;
+		return {
+			queryKey: ['repo-tags', repo?.repoDid],
+			enabled: Boolean(repo),
+			queryFn: async () => getRepoTags(repo!),
+		};
+	});
+	const labelsByHash = createMemo(() => {
+		const map = new Map<string, string[]>();
+		for (const branch of branchesQuery.data?.branches ?? []) {
+			addRefLabel(map, branch.reference.hash, branch.reference.name);
+		}
+		for (const tag of tagsQuery.data?.tags ?? []) {
+			addRefLabel(map, tagTargetHash(tag), tag.name);
+		}
+		return map;
+	});
+	const commits = createMemo(() => logQuery.data?.commits ?? []);
+	const totalCount = createMemo(() => {
+		const total = logQuery.data?.total;
+		return total && total > 0 ? total : undefined;
+	});
+	const hasNextPage = createMemo(() => {
+		const data = logQuery.data;
+		if (!data) return false;
+		if (totalCount()) {
+			return pageOffset() + COMMITS_PAGE_LIMIT < totalCount()!;
+		}
+		return data.commits.length === COMMITS_PAGE_LIMIT;
+	});
+
+	return (
+		<RepoFrame active="code">
+			<section id="commit-table" class="bg-white dark:bg-gray-800 px-6 py-4 rounded relative w-full mx-auto dark:text-white overflow-x-auto">
+				<h2 class="font-bold text-sm mb-4 uppercase dark:text-white">commits</h2>
+				<Switch>
+					<Match when={logQuery.isLoading && !logQuery.data}>
+						<CommitListSkeleton />
+					</Match>
+					<Match when={logQuery.error}>
+						<ErrorState message={getErrorMessage(logQuery.error)} />
+					</Match>
+					<Match when={logQuery.data && repoQuery.data}>
+						<CommitListContent repo={repoQuery.data!} commits={commits()} labelsByHash={labelsByHash()} />
+					</Match>
+				</Switch>
+			</section>
+			<Show when={repoQuery.data && logQuery.data}>
+				<PaginationControls
+					offset={pageOffset()}
+					limit={COMMITS_PAGE_LIMIT}
+					totalCount={totalCount()}
+					hasNext={hasNextPage()}
+					hrefForOffset={(offset) =>
+						commitListPageHref(repoQuery.data!, ref(), Math.floor(Math.max(0, offset) / COMMITS_PAGE_LIMIT) + 1)
+					}
+				/>
+			</Show>
+		</RepoFrame>
+	);
+};
+
+const CommitAttribution: Component<{ commit: CommitEntry }> = (props) => {
+	const showCommitter = createMemo(
+		() => props.commit.author?.Email && props.commit.committer?.Email && props.commit.author.Email !== props.commit.committer.Email,
+	);
+
+	return (
+		<Show
+			when={showCommitter()}
+			fallback={<CommitIdentity person={commitAuthor(props.commit)} />}
+		>
+			<span class="inline-flex flex-wrap items-center gap-1">
+				<span>authored by</span>
+				<CommitIdentity person={props.commit.author} />
+				<span>and committed by</span>
+				<CommitIdentity person={props.commit.committer} />
+			</span>
+		</Show>
+	);
+};
+
+const CommitDiffSkeleton: Component = () => (
+	<section class="untangled-commit-diff mt-2 w-full">
+		<div class="untangled-diff-view untangled-diff-view-commit">
+			<div class="untangled-diff-panel">
+				<div class="untangled-diff-toolbar">
+					<div class="flex min-w-0 items-center gap-2">
+						<SkeletonBlock class="h-8 w-8" />
+						<SkeletonBlock class="h-7 w-20" />
+						<SkeletonBlock class="h-4 w-28" />
+					</div>
+					<div class="flex items-center gap-2">
+						<SkeletonBlock class="h-8 w-28" />
+						<SkeletonBlock class="h-8 w-32" />
+					</div>
+				</div>
+				<div class="untangled-diff-panel-body untangled-diff-panel-body-with-tree">
+					<aside class="untangled-pr-file-tree" aria-label="changed files loading">
+						<div class="untangled-pr-file-tree-list">
+							<For each={commitDiffSkeletonTreeRows}>
+								{(_, index) => (
+									<div class="untangled-pr-file-tree-entry">
+										<SkeletonBlock class="size-4 shrink-0 rounded-sm" />
+										<SkeletonBlock class={index() % 3 === 0 ? 'h-4 w-20' : 'h-4 w-32'} />
+									</div>
+								)}
+							</For>
+						</div>
+					</aside>
+					<div class="untangled-pr-diff-files">
+						<For each={commitDiffSkeletonFiles}>
+							{(_, fileIndex) => (
+								<div class="untangled-diff-file">
+									<div class="untangled-diff-file-header">
+										<div class="flex min-w-0 items-center gap-2">
+											<SkeletonBlock class="size-4 shrink-0" />
+											<SkeletonBlock class="h-7 w-20" />
+											<SkeletonBlock class={fileIndex() === 0 ? 'h-5 w-2/3' : 'h-5 w-1/2'} />
+										</div>
+									</div>
+									<div class="space-y-2 bg-white p-4 dark:bg-gray-900">
+										<For each={commitDiffSkeletonLines}>
+											{(_, index) => (
+												<div class="untangled-skeleton-code-line">
+													<SkeletonBlock class="h-4 w-8" />
+													<SkeletonBlock class={index() % 4 === 0 ? 'h-4 w-1/2' : index() % 3 === 0 ? 'h-4 w-2/3' : 'h-4 w-11/12'} />
+												</div>
+											)}
+										</For>
+									</div>
+								</div>
+							)}
+						</For>
+					</div>
+				</div>
+			</div>
+		</div>
+	</section>
+);
+
+const CommitDetailSkeleton: Component = () => (
+	<div class="untangled-commit-view w-full">
+		<section class="untangled-commit-detail bg-white dark:bg-gray-800 px-6 py-4 rounded relative w-full mx-auto dark:text-white">
+			<SkeletonBlock class="h-6 w-2/3" />
+			<div class="mt-3 space-y-2">
+				<SkeletonBlock class="h-4 w-5/6" />
+				<SkeletonBlock class="h-4 w-1/2" />
+			</div>
+			<div class="mt-4 flex flex-wrap items-center gap-2">
+				<SkeletonBlock class="size-6 rounded-full" />
+				<SkeletonBlock class="h-4 w-28" />
+				<SkeletonBlock class="h-4 w-32" />
+				<SkeletonBlock class="h-4 w-16" />
+				<SkeletonBlock class="h-4 w-16" />
+			</div>
+		</section>
+		<CommitDiffSkeleton />
+	</div>
+);
+
+const CommitDetailContent: Component<{
+	repo: RepoContext;
+	commit: CommitEntry;
+	hash: string;
+	parentHash: string;
+	message: ReturnType<typeof splitCommitMessage>;
+	patch: string;
+}> = (props) => {
+	const when = createMemo(() => commitTime(props.commit));
+
+	return (
+		<div class="untangled-commit-view w-full">
+			<section class="untangled-commit-detail bg-white dark:bg-gray-800 px-6 py-4 rounded relative w-full mx-auto dark:text-white">
+				<div id="commit-message">
+					<p class="pb-2">{props.message.subject}</p>
+					<Show when={props.message.body}>
+						<p class="mt-1 cursor-text pb-2 text-sm whitespace-pre-wrap">{props.message.body}</p>
+					</Show>
+				</div>
+
+				<div class="flex flex-wrap items-center gap-2 text-sm">
+					<p class="flex flex-wrap items-center gap-1 text-gray-500 dark:text-gray-300">
+						<CommitAttribution commit={props.commit} />
+						<span class="px-1 select-none before:content-['·']" />
+						<time datetime={when()} title={formatFullTime(when())}>
+							{formatFullTime(when())}
+						</time>
+						<span class="px-1 select-none before:content-['·']" />
+						<A
+							href={commitHref(props.repo, props.hash)}
+							class="no-underline hover:underline text-gray-500 dark:text-gray-300"
+						>
+							{props.hash.slice(0, 8)}
+						</A>
+						<Show when={props.parentHash}>
+							{(parent) => (
+								<>
+									<ArrowLeft class="w-3 h-3 mx-1" />
+									<A
+										href={commitHref(props.repo, parent())}
+										class="no-underline hover:underline text-gray-500 dark:text-gray-300"
+									>
+										{parent().slice(0, 8)}
+									</A>
+								</>
+							)}
+						</Show>
+					</p>
+				</div>
+			</section>
+
+			<section class="untangled-commit-diff mt-2 w-full">
+				<DiffView patch={props.patch} wrap defaultExpanded showFileTree variant="commit" />
+			</section>
+		</div>
+	);
+};
+
+export const CommitPage: Component = () => {
+	const params = useParams();
+	const repoQuery = useRepoQuery();
+	const ref = createMemo(() => safeDecode(params.ref ?? ''));
+	const commitQuery = createQuery(() => {
+		const repo = repoQuery.data;
+		return {
+			queryKey: ['repo-commit', repo?.repoDid, ref()],
+			enabled: Boolean(repo && ref()),
+			queryFn: async () => getRepoCommit(repo!, ref()),
+		};
+	});
+	const commit = createMemo(() => commitQuery.data?.diff?.commit);
+	const hash = createMemo(() => {
+		const current = commit();
+		return current ? commitHash(current) : ref();
+	});
+	const parentHash = createMemo(() => {
+		const current = commit();
+		return current ? primaryParentHash(current) : '';
+	});
+	const message = createMemo(() => splitCommitMessage(commit()?.message ?? ''));
+	const patch = createMemo(() => renderUnifiedDiff(commitQuery.data?.diff));
+
+	return (
+		<RepoFrame active="code" fullWidth>
+			<Switch>
+				<Match when={commitQuery.isLoading}>
+					<CommitDetailSkeleton />
+				</Match>
+				<Match when={commitQuery.error}>
+					<div class={cardStyles('p-6')}>
+						<ErrorState message={getErrorMessage(commitQuery.error)} />
+					</div>
+				</Match>
+				<Match when={commit() && repoQuery.data}>
+					<CommitDetailContent
+						repo={repoQuery.data!}
+						commit={commit()!}
+						hash={hash()}
+						parentHash={parentHash()}
+						message={message()}
+						patch={patch()}
+					/>
+				</Match>
+			</Switch>
+		</RepoFrame>
+	);
+};
diff --git a/src/pages/repo/shared.tsx b/src/pages/repo/shared.tsx
index f159986..dff224e 100644
--- a/src/pages/repo/shared.tsx
+++ b/src/pages/repo/shared.tsx
@@ -54,6 +54,7 @@ export const useRepoQuery = () => {
 export const RepoFrame: Component<{
 	active: 'code' | 'issues' | 'pulls';
 	children: JSX.Element;
+	fullWidth?: boolean;
 }> = (props) => {
 	const auth = useAuth();
 	const live = useLiveEvents();
@@ -195,7 +196,9 @@ export const RepoFrame: Component<{
 	return (
 		<Switch>
 			<Match when={repoQuery.isLoading}>
-				<RepoFrameSkeleton active={props.active} />
+				<div class={props.fullWidth ? 'untangled-repo-frame-full' : undefined}>
+					<RepoFrameSkeleton active={props.active} />
+				</div>
 			</Match>
 			<Match when={repoQuery.error}>
 				<div class={cardStyles('p-6')}>
@@ -204,7 +207,7 @@ export const RepoFrame: Component<{
 			</Match>
 			<Match when={repoQuery.data}>
 				{(repo) => (
-					<>
+					<div class={props.fullWidth ? 'untangled-repo-frame-full' : undefined}>
 						<section id="repo-header" class="mb-2 py-2 px-4">
 							<div class="flex flex-col sm:flex-row items-start gap-4 justify-between mb-2">
 								<div class="flex gap-2">
@@ -368,7 +371,7 @@ export const RepoFrame: Component<{
 
 							{props.children}
 						</section>
-					</>
+					</div>
 				)}
 			</Match>
 		</Switch>
diff --git a/src/routes.tsx b/src/routes.tsx
index cdcd9e3..cb069c7 100644
--- a/src/routes.tsx
+++ b/src/routes.tsx
@@ -4,6 +4,8 @@ import type { Component } from 'solid-js';
 import { RootShell } from './layout';
 import {
 	BlobPage,
+	CommitPage,
+	CommitsPage,
 	IssuePage,
 	IssuesPage,
 	NewIssuePage,
@@ -31,6 +33,9 @@ export const AppRoutes: Component = () => (
 			<Route path="/pulls/new" component={NewPullPage} />
 			<Route path="/pulls/:pullRef" component={PullPage} />
 			<Route path="/pulls" component={PullsPage} />
+			<Route path="/commits" component={CommitsPage} />
+			<Route path="/commits/:ref" component={CommitsPage} />
+			<Route path="/commit/:ref" component={CommitPage} />
 			<Route path="/blob/:ref/*path" component={BlobPage} />
 			<Route path="/tree/:ref/*path" component={RepoCodePage} />
 		</Route>