diff --git a/web/src/lib/components/operations/OperationsDiffTab.svelte b/web/src/lib/components/operations/OperationsDiffTab.svelte
index f110c07..11653bc 100644
--- a/web/src/lib/components/operations/OperationsDiffTab.svelte
+++ b/web/src/lib/components/operations/OperationsDiffTab.svelte
@@ -2,7 +2,7 @@
 	import type { RevisionDiff, RevisionPrefix, RevisionRow } from '$lib/api/types.js';
 	import { Button } from '$lib/components/ui/button/index.js';
 	import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '$lib/components/ui/card/index.js';
-	import { ScrollArea } from '$lib/components/ui/scroll-area/index.js';
+	import { sortRevisionDiffItems } from '$lib/sort-prefixes.js';
 
 	type Props = {
 		revisions: RevisionRow[];
@@ -29,27 +29,52 @@
 	}: Props = $props();
 
 	/** Бэкенд отдаёт `prefixes.added` / `prefixes.removed`; верхний уровень added/removed — опционально. */
-	function diffAdded(d: RevisionDiff | null): (string | RevisionPrefix)[] {
+	function diffAddedRaw(d: RevisionDiff | null): (string | RevisionPrefix)[] {
 		if (!d) return [];
 		if (d.prefixes && Array.isArray(d.prefixes.added)) return d.prefixes.added;
 		if (Array.isArray(d.added)) return d.added;
 		return [];
 	}
 
-	function diffRemoved(d: RevisionDiff | null): (string | RevisionPrefix)[] {
+	function diffRemovedRaw(d: RevisionDiff | null): (string | RevisionPrefix)[] {
 		if (!d) return [];
 		if (d.prefixes && Array.isArray(d.prefixes.removed)) return d.prefixes.removed;
 		if (Array.isArray(d.removed)) return d.removed;
 		return [];
 	}
+
+	let addedSorted = $derived(diffData ? sortRevisionDiffItems(diffAddedRaw(diffData)) : []);
+	let removedSorted = $derived(diffData ? sortRevisionDiffItems(diffRemovedRaw(diffData)) : []);
+
+	let scrollAddedEl: HTMLDivElement | null = $state(null);
+	let scrollRemovedEl: HTMLDivElement | null = $state(null);
+	let syncScrollLock = false;
+
+	function syncFromAdded() {
+		if (syncScrollLock || !scrollAddedEl || !scrollRemovedEl) return;
+		syncScrollLock = true;
+		scrollRemovedEl.scrollTop = scrollAddedEl.scrollTop;
+		queueMicrotask(() => {
+			syncScrollLock = false;
+		});
+	}
+
+	function syncFromRemoved() {
+		if (syncScrollLock || !scrollAddedEl || !scrollRemovedEl) return;
+		syncScrollLock = true;
+		scrollAddedEl.scrollTop = scrollRemovedEl.scrollTop;
+		queueMicrotask(() => {
+			syncScrollLock = false;
+		});
+	}
 </script>
 
-<Card>
+<Card class="min-h-0">
 	<CardHeader>
 		<CardTitle class="text-base">Сравнение ревизий</CardTitle>
 		<CardDescription>Выберите ID двух ревизий для сравнения</CardDescription>
 	</CardHeader>
-	<CardContent class="space-y-4">
+	<CardContent class="min-h-0 space-y-4">
 		<div class="flex flex-col gap-2 sm:flex-row">
 			<select
 				value={diffRevA}
@@ -77,26 +102,84 @@
 		</div>
 
 		{#if diffData}
-			<div class="grid gap-3 sm:grid-cols-2">
-				<div>
-					<p class="mb-2 text-sm font-medium text-green-600">+ Добавлено ({diffAdded(diffData).length})</p>
-					<ScrollArea class="max-h-64 rounded border p-2">
-						{#each diffAdded(diffData) as p, idx (`added-${idx}-${typeof p === 'string' ? p : (p as { prefix?: string }).prefix ?? 'item'}`)}
-							<p class="font-mono text-xs break-all">{typeof p === 'string' ? p : (p as { prefix?: string }).prefix ?? JSON.stringify(p)}</p>
+			<div
+				class="border-border grid min-h-0 grid-cols-1 overflow-hidden rounded-md border sm:grid-cols-2"
+				style="scrollbar-gutter: stable;"
+			>
+				<!-- + Добавлено -->
+				<div class="border-border flex min-h-0 min-w-0 flex-col border-b sm:border-r sm:border-b-0">
+					<div
+						class="border-border bg-muted/60 flex shrink-0 items-center border-b px-3 py-2 font-mono text-xs font-semibold text-green-600 dark:text-green-400"
+					>
+						<span class="text-muted-foreground mr-2 w-10 shrink-0 select-none text-right">+</span>
+						<span>Добавлено ({addedSorted.length})</span>
+					</div>
+					<div
+						bind:this={scrollAddedEl}
+						class="bg-background/50 max-h-[min(28rem,70vh)] min-h-0 overflow-x-auto overflow-y-scroll overscroll-contain"
+						onscroll={syncFromAdded}
+					>
+						{#if addedSorted.length === 0}
+							<p class="text-muted-foreground p-3 font-mono text-xs">Нет изменений</p>
 						{:else}
-							<p class="text-muted-foreground text-xs">Нет изменений</p>
-						{/each}
-					</ScrollArea>
+							<table class="w-full border-collapse font-mono text-xs">
+								<tbody>
+									{#each addedSorted as line, i (`a-${i}-${line}`)}
+										<tr
+											class="border-border/50 hover:bg-muted/30 border-b border-l-2 border-l-green-500/80 bg-green-500/[0.08] dark:bg-green-500/15"
+										>
+											<td
+												class="text-muted-foreground w-10 shrink-0 border-r border-transparent py-0.5 pr-1 pl-2 text-right align-top text-[11px] tabular-nums select-none"
+											>
+												{i + 1}
+											</td>
+											<td class="text-foreground max-w-0 break-all py-0.5 pr-3 pl-1 whitespace-pre-wrap">
+												{line}
+											</td>
+										</tr>
+									{/each}
+								</tbody>
+							</table>
+						{/if}
+					</div>
 				</div>
-				<div>
-					<p class="mb-2 text-sm font-medium text-red-600">- Удалено ({diffRemoved(diffData).length})</p>
-					<ScrollArea class="max-h-64 rounded border p-2">
-						{#each diffRemoved(diffData) as p, idx (`removed-${idx}-${typeof p === 'string' ? p : (p as { prefix?: string }).prefix ?? 'item'}`)}
-							<p class="font-mono text-xs break-all">{typeof p === 'string' ? p : (p as { prefix?: string }).prefix ?? JSON.stringify(p)}</p>
+
+				<!-- − Удалено -->
+				<div class="flex min-h-0 min-w-0 flex-col">
+					<div
+						class="border-border bg-muted/60 flex shrink-0 items-center border-b px-3 py-2 font-mono text-xs font-semibold text-red-600 dark:text-red-400"
+					>
+						<span class="text-muted-foreground mr-2 w-10 shrink-0 select-none text-right">−</span>
+						<span>Удалено ({removedSorted.length})</span>
+					</div>
+					<div
+						bind:this={scrollRemovedEl}
+						class="bg-background/50 max-h-[min(28rem,70vh)] min-h-0 overflow-x-auto overflow-y-scroll overscroll-contain"
+						onscroll={syncFromRemoved}
+					>
+						{#if removedSorted.length === 0}
+							<p class="text-muted-foreground p-3 font-mono text-xs">Нет изменений</p>
 						{:else}
-							<p class="text-muted-foreground text-xs">Нет изменений</p>
-						{/each}
-					</ScrollArea>
+							<table class="w-full border-collapse font-mono text-xs">
+								<tbody>
+									{#each removedSorted as line, i (`r-${i}-${line}`)}
+										<tr
+											class="border-border/50 hover:bg-muted/30 border-b border-l-2 border-l-red-500/80 bg-red-500/[0.08] dark:bg-red-500/15"
+										>
+											<td
+												class="text-muted-foreground w-10 shrink-0 border-r border-transparent py-0.5 pr-1 pl-2 text-right align-top text-[11px] tabular-nums select-none"
+											>
+												{i + 1}
+											</td>
+											<td class="text-foreground max-w-0 break-all py-0.5 pr-3 pl-1 whitespace-pre-wrap">
+												{line}
+											</td>
+										</tr>
+									{/each}
+								</tbody>
+							</table>
+						{/if}
+					</div>
 				</div>
 			</div>
 		{/if}
diff --git a/web/src/lib/sort-prefixes.ts b/web/src/lib/sort-prefixes.ts
new file mode 100644
index 0000000..3520710
--- /dev/null
+++ b/web/src/lib/sort-prefixes.ts
@@ -0,0 +1,112 @@
+import type { RevisionPrefix } from '$lib/api/types.js';
+
+export function prefixStringFromItem(p: string | RevisionPrefix): string {
+	if (typeof p === 'string') return p;
+	return p.prefix ?? '';
+}
+
+function parseIPv4Octets(addr: string): [number, number, number, number] | null {
+	const m = /^(\d{1,3})\.(\d{1,3})\.(\d{1,3})\.(\d{1,3})$/.exec(addr);
+	if (!m) return null;
+	const o = [m[1], m[2], m[3], m[4]].map((x) => parseInt(x, 10));
+	if (o.some((n) => !Number.isFinite(n) || n < 0 || n > 255)) return null;
+	return [o[0], o[1], o[2], o[3]];
+}
+
+/** 8 групп по 16 бит + длина префикса (или null, если не распознали). */
+function parseIPv6(addrPart: string): { words: number[]; pl: number } | null {
+	if (!addrPart.includes(':')) return null;
+	const zone = addrPart.indexOf('%');
+	if (zone >= 0) addrPart = addrPart.slice(0, zone);
+	const parts = addrPart.split('::');
+	if (parts.length > 2) return null;
+
+	const parseGroup = (h: string) => parseInt(h, 16);
+
+	if (parts.length === 1) {
+		const g = parts[0].split(':').filter(Boolean);
+		if (g.length === 8) {
+			return { words: g.map(parseGroup), pl: 128 };
+		}
+		// IPv4-хвост: x:x:x:x:x:x:a.b.c.d (6 групп + IPv4)
+		if (g.length === 7 && g[6].includes('.')) {
+			const o = parseIPv4Octets(g[6]);
+			if (!o) return null;
+			const w = g.slice(0, 6).map(parseGroup);
+			w.push((o[0] << 8) | o[1], (o[2] << 8) | o[3]);
+			return { words: w, pl: 128 };
+		}
+		return null;
+	}
+
+	const left = parts[0] ? parts[0].split(':').filter(Boolean) : [];
+	const right = parts[1] ? parts[1].split(':').filter(Boolean) : [];
+	const lastR = right[right.length - 1];
+	if (lastR && lastR.includes('.')) {
+		const o = parseIPv4Octets(lastR);
+		if (!o) return null;
+		const rWords = right.slice(0, -1).map(parseGroup);
+		rWords.push((o[0] << 8) | o[1], (o[2] << 8) | o[3]);
+		const missing = 8 - left.length - rWords.length;
+		if (missing < 0) return null;
+		return { words: [...left.map(parseGroup), ...Array(missing).fill(0), ...rWords], pl: 128 };
+	}
+	const missing = 8 - left.length - right.length;
+	if (missing < 0) return null;
+	return { words: [...left.map(parseGroup), ...Array(missing).fill(0), ...right.map(parseGroup)], pl: 128 };
+}
+
+type SortKey =
+	| { t: 0; v4: [number, number, number, number]; pl: number }
+	| { t: 1; v6: number[]; pl: number }
+	| { t: 2; s: string };
+
+function sortKeyForCidr(s: string): SortKey {
+	const slash = s.indexOf('/');
+	const addr = slash >= 0 ? s.slice(0, slash) : s;
+	const plStr = slash >= 0 ? s.slice(slash + 1) : '';
+	const plNum = plStr ? parseInt(plStr, 10) : NaN;
+
+	const v4 = parseIPv4Octets(addr);
+	if (v4 && !addr.includes(':')) {
+		const pl = Number.isFinite(plNum) ? plNum : 32;
+		return { t: 0, v4, pl };
+	}
+
+	const v6 = parseIPv6(addr);
+	if (v6) {
+		const pl = Number.isFinite(plNum) ? plNum : v6.pl;
+		return { t: 1, v6: v6.words, pl };
+	}
+
+	return { t: 2, s: s.toLowerCase() };
+}
+
+function compareKeys(a: SortKey, b: SortKey): number {
+	if (a.t !== b.t) return a.t - b.t;
+	if (a.t === 2 && b.t === 2) {
+		return a.s.localeCompare(b.s, 'en', { numeric: true, sensitivity: 'base' });
+	}
+	if (a.t === 0 && b.t === 0) {
+		for (let i = 0; i < 4; i++) {
+			if (a.v4[i] !== b.v4[i]) return a.v4[i] - b.v4[i];
+		}
+		return a.pl - b.pl;
+	}
+	if (a.t === 1 && b.t === 1) {
+		for (let i = 0; i < 8; i++) {
+			if (a.v6[i] !== b.v6[i]) return a.v6[i] - b.v6[i];
+		}
+		return a.pl - b.pl;
+	}
+	return 0;
+}
+
+/** Сортировка CIDR и прочих строк префиксов (as:, домены и т.д.) для отображения. */
+export function sortPrefixStrings(strings: string[]): string[] {
+	return [...strings].sort((a, b) => compareKeys(sortKeyForCidr(a), sortKeyForCidr(b)));
+}
+
+export function sortRevisionDiffItems(items: (string | RevisionPrefix)[]): string[] {
+	return sortPrefixStrings(items.map(prefixStringFromItem));
+}