diff --git a/apps/desktop/package.json b/apps/desktop/package.json
index 0e08219b08..e531c84c0f 100644
--- a/apps/desktop/package.json
+++ b/apps/desktop/package.json
@@ -18,28 +18,10 @@
 	},
 	"devDependencies": {
 		"@anthropic-ai/sdk": "^0.27.3",
-		"@codemirror/lang-cpp": "^6.0.2",
-		"@codemirror/lang-css": "^6.2.1",
-		"@codemirror/lang-html": "^6.4.9",
-		"@codemirror/lang-java": "^6.0.1",
-		"@codemirror/lang-javascript": "^6.2.2",
-		"@codemirror/lang-json": "^6.0.1",
-		"@codemirror/lang-markdown": "^6.2.5",
-		"@codemirror/lang-php": "^6.0.1",
-		"@codemirror/lang-python": "^6.1.6",
-		"@codemirror/lang-rust": "^6.0.1",
-		"@codemirror/lang-vue": "^0.1.3",
-		"@codemirror/lang-wast": "^6.0.2",
-		"@codemirror/lang-xml": "^6.1.0",
-		"@codemirror/language": "^6.10.2",
-		"@codemirror/legacy-modes": "^6.4.0",
 		"@gitbutler/shared": "workspace:*",
 		"@gitbutler/ui": "workspace:*",
-		"@lezer/common": "^1.2.1",
-		"@lezer/highlight": "^1.2.0",
 		"@octokit/rest": "^20.1.1",
 		"@reduxjs/toolkit": "catalog:redux",
-		"@replit/codemirror-lang-svelte": "^6.0.0",
 		"@sentry/sveltekit": "catalog:svelte",
 		"@sveltejs/adapter-static": "catalog:svelte",
 		"@sveltejs/kit": "catalog:svelte",
diff --git a/apps/desktop/src/components/HunkDiff.svelte b/apps/desktop/src/components/HunkDiff.svelte
index 694b9f6791..2364967602 100644
--- a/apps/desktop/src/components/HunkDiff.svelte
+++ b/apps/desktop/src/components/HunkDiff.svelte
@@ -2,13 +2,13 @@
 	import ScrollableContainer from '$components/ScrollableContainer.svelte';
 	import { SelectedOwnership } from '$lib/branches/ownership';
 	import { type Hunk } from '$lib/hunks/hunk';
-	import { create } from '$lib/utils/codeHighlight';
 	import {
 		type ContentSection,
 		SectionType,
 		type Line,
 		CountColumnSide
 	} from '$lib/utils/fileSections';
+	import { create } from '@gitbutler/shared/codeHighlight';
 	import { maybeGetContextStore } from '@gitbutler/shared/context';
 	import Checkbox from '@gitbutler/ui/Checkbox.svelte';
 	import Icon from '@gitbutler/ui/Icon.svelte';
diff --git a/apps/desktop/tsconfig.json b/apps/desktop/tsconfig.json
index d4c4e321ff..5f62df7dc3 100644
--- a/apps/desktop/tsconfig.json
+++ b/apps/desktop/tsconfig.json
@@ -36,6 +36,8 @@
 		"src/**/*.svelte",
 		"e2e/tests/**/*.js",
 		"e2e/tests/**/*.ts",
-		"e2e/tests/**/*.svelte"
+		"e2e/tests/**/*.svelte",
+		"../../packages/shared/src/lib/codeHighlight.ts",
+		"../../packages/shared/src/lib/codeHighlight.ts"
 	]
 }
diff --git a/apps/web/package.json b/apps/web/package.json
index f261b4513e..ec882f9701 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -26,7 +26,9 @@
 		"svelte": "catalog:svelte",
 		"svelte-check": "catalog:svelte",
 		"svelte-french-toast": "^1.2.0",
-		"vite": "catalog:"
+		"vite": "catalog:",
+		"diff-match-patch": "^1.0.5",
+		"@types/diff-match-patch": "^1.0.36"
 	},
 	"dependencies": {
 		"@ethercorps/sveltekit-og": "^3.0.0",
diff --git a/apps/web/src/lib/components/HunkDiff.svelte b/apps/web/src/lib/components/HunkDiff.svelte
new file mode 100644
index 0000000000..5ef8f343ea
--- /dev/null
+++ b/apps/web/src/lib/components/HunkDiff.svelte
@@ -0,0 +1,600 @@
+<script lang="ts">
+	import { CountColumnSide, SectionType, type ContentSection, type Line } from '$lib/diffParsing';
+	import { create } from '@gitbutler/shared/codeHighlight';
+	import diff_match_patch from 'diff-match-patch';
+
+	interface Props {
+		filePath: string;
+		subsections: ContentSection[];
+		tabSize?: number;
+		wrapText?: boolean;
+		diffFont?: string;
+		diffLigatures?: boolean;
+		inlineUnifiedDiffs?: boolean;
+		diffContrast?: 'light' | 'medium' | 'strong';
+	}
+
+	const {
+		filePath,
+		subsections,
+		tabSize = 4,
+		wrapText = true,
+		diffFont,
+		diffLigatures = true,
+		diffContrast = 'medium',
+		inlineUnifiedDiffs = false
+	}: Props = $props();
+
+	const WHITESPACE_REGEX = /\s/;
+	const BORDER_WIDTH = 1;
+
+	let tableWidth = $state<number>(0);
+	let tableHeight = $state<number>(0);
+	let numberHeaderWidth = $state<number>(0);
+
+	function charDiff(text1: string, text2: string): { 0: number; 1: string }[] {
+		const differ = new diff_match_patch();
+		const diff = differ.diff_main(text1, text2);
+		differ.diff_cleanupSemantic(diff);
+		return diff;
+	}
+
+	function isLineEmpty(lines: Line[]) {
+		const whitespaceRegex = new RegExp(WHITESPACE_REGEX);
+		if (!lines[0]?.content.match(whitespaceRegex)) {
+			return true;
+		}
+
+		return false;
+	}
+
+	function createRowData(section: ContentSection): Row[] {
+		return section.lines.map((line) => {
+			// if (line.content === '') {
+			// 	// Add extra \n for empty lines for correct copy/pasting output
+			// 	line.content = '\n';
+			// }
+
+			return {
+				beforeLineNumber: line.beforeLineNumber,
+				afterLineNumber: line.afterLineNumber,
+				tokens: toTokens(line.content),
+				type: section.sectionType,
+				size: line.content.length,
+				isLast: false
+			};
+		});
+	}
+
+	function sanitize(text: string) {
+		const element = document.createElement('div');
+		element.innerText = text;
+		return element.innerHTML;
+	}
+
+	function toTokens(inputLine: string): string[] {
+		let highlighter = create(inputLine, filePath);
+		let tokens: string[] = [];
+		highlighter.highlight((text, classNames) => {
+			const token = classNames
+				? `<span data-no-drag class=${classNames}>${sanitize(text)}</span>`
+				: sanitize(text);
+
+			tokens.push(token);
+		});
+
+		return tokens;
+	}
+
+	function computeWordDiff(prevSection: ContentSection, nextSection: ContentSection): DiffRows {
+		const numberOfLines = nextSection.lines.length;
+		const returnRows: DiffRows = {
+			prevRows: [],
+			nextRows: []
+		};
+
+		// Loop through every line in the section
+		// We're only bothered with prev/next sections with equal # of lines changes
+		for (let i = 0; i < numberOfLines; i++) {
+			const oldLine = prevSection.lines[i] as Line;
+			const newLine = nextSection.lines[i] as Line;
+			const prevSectionRow = {
+				beforeLineNumber: oldLine.beforeLineNumber,
+				afterLineNumber: oldLine.afterLineNumber,
+				tokens: [] as string[],
+				type: prevSection.sectionType,
+				size: oldLine.content.length,
+				isLast: false
+			};
+			const nextSectionRow = {
+				beforeLineNumber: newLine.beforeLineNumber,
+				afterLineNumber: newLine.afterLineNumber,
+				tokens: [] as string[],
+				type: nextSection.sectionType,
+				size: newLine.content.length,
+				isLast: false
+			};
+
+			const diff = charDiff(oldLine.content, newLine.content);
+
+			for (const token of diff) {
+				const text = token[1];
+				const type = token[0];
+
+				if (type === Operation.Equal) {
+					prevSectionRow.tokens.push(...toTokens(text));
+					nextSectionRow.tokens.push(...toTokens(text));
+				} else if (type === Operation.Insert) {
+					nextSectionRow.tokens.push(
+						`<span data-no-drag class="token-inserted">${sanitize(text)}</span>`
+					);
+				} else if (type === Operation.Delete) {
+					prevSectionRow.tokens.push(
+						`<span data-no-drag class="token-deleted">${sanitize(text)}</span>`
+					);
+				}
+			}
+			returnRows.nextRows.push(nextSectionRow);
+			returnRows.prevRows.push(prevSectionRow);
+		}
+
+		return returnRows;
+	}
+
+	function computeInlineWordDiff(prevSection: ContentSection, nextSection: ContentSection): Row[] {
+		const numberOfLines = nextSection.lines.length;
+
+		const rows = [];
+
+		// Loop through every line in the section
+		// We're only bothered with prev/next sections with equal # of lines changes
+		for (let i = 0; i < numberOfLines; i++) {
+			const oldLine = prevSection.lines[i] as Line;
+			const newLine = nextSection.lines[i] as Line;
+
+			const sectionRow = {
+				beforeLineNumber: newLine.beforeLineNumber,
+				afterLineNumber: newLine.afterLineNumber,
+				tokens: [] as string[],
+				type: nextSection.sectionType,
+				size: newLine.content.length,
+				isLast: false
+			};
+
+			const diff = charDiff(oldLine.content, newLine.content);
+
+			for (const token of diff) {
+				const text = token[1];
+				const type = token[0];
+
+				if (type === Operation.Equal) {
+					sectionRow.tokens.push(...toTokens(text));
+				} else if (type === Operation.Insert) {
+					sectionRow.tokens.push(
+						`<span data-no-drag class="token-inserted">${sanitize(text)}</span>`
+					);
+				} else if (type === Operation.Delete) {
+					sectionRow.tokens.push(
+						`<span data-no-drag class="token-deleted token-strikethrough">${sanitize(text)}</span>`
+					);
+				}
+			}
+			rows.push(sectionRow);
+		}
+
+		return rows;
+	}
+
+	function generateRows(subsections: ContentSection[]) {
+		const rows = subsections.reduce((acc, nextSection, i) => {
+			const prevSection = subsections[i - 1];
+
+			// Filter out section for which we don't need to compute word diffs
+			if (!prevSection || nextSection.sectionType === SectionType.Context) {
+				acc.push(...createRowData(nextSection));
+				return acc;
+			}
+
+			if (prevSection.sectionType === SectionType.Context) {
+				acc.push(...createRowData(nextSection));
+				return acc;
+			}
+
+			if (prevSection.lines.length !== nextSection.lines.length) {
+				acc.push(...createRowData(nextSection));
+				return acc;
+			}
+
+			if (isLineEmpty(prevSection.lines)) {
+				acc.push(...createRowData(nextSection));
+				return acc;
+			}
+
+			if (inlineUnifiedDiffs) {
+				const rows = computeInlineWordDiff(prevSection, nextSection);
+
+				acc.splice(-prevSection.lines.length);
+
+				acc.push(...rows);
+				return acc;
+			} else {
+				const { prevRows, nextRows } = computeWordDiff(prevSection, nextSection);
+
+				// Insert returned row datastructures into the correct place
+				// Find and replace previous rows with tokenized version
+				prevRows.forEach((row, previousRowIndex) => {
+					acc[acc.length - (prevRows.length - previousRowIndex)] = row;
+				});
+
+				acc.push(...nextRows);
+
+				return acc;
+			}
+		}, [] as Row[]);
+
+		const last = rows.at(-1);
+		if (last) {
+			last.isLast = true;
+		}
+
+		return rows;
+	}
+
+	const renderRows = $derived(generateRows(subsections));
+
+	interface DiffHunkLineInfo {
+		beforLineStart: number;
+		beforeLineCount: number;
+		afterLineStart: number;
+		afterLineCount: number;
+	}
+
+	function getHunkLineInfo(subsections: ContentSection[]): DiffHunkLineInfo {
+		const firstSection = subsections[0];
+		const lastSection = subsections.at(-1);
+
+		const beforLineStart = firstSection?.lines[0]?.beforeLineNumber ?? 0;
+		const beforeLineEnd = lastSection?.lines?.at(-1)?.beforeLineNumber ?? 0;
+		const beforeLineCount = beforeLineEnd - beforLineStart + 1;
+
+		const afterLineStart = firstSection?.lines[0]?.afterLineNumber ?? 0;
+		const afterLineEnd = lastSection?.lines?.at(-1)?.afterLineNumber ?? 0;
+		const afterLineCount = afterLineEnd - afterLineStart + 1;
+
+		return {
+			beforLineStart,
+			beforeLineCount,
+			afterLineStart,
+			afterLineCount
+		};
+	}
+
+	const hunkLineInfo = $derived(getHunkLineInfo(subsections));
+
+	interface Row {
+		beforeLineNumber?: number;
+		afterLineNumber?: number;
+		tokens: string[];
+		type: SectionType;
+		size: number;
+		isLast: boolean;
+	}
+
+	enum Operation {
+		Equal = 0,
+		Insert = 1,
+		Delete = -1,
+		Edit = 2
+	}
+
+	type DiffRows = { prevRows: Row[]; nextRows: Row[] };
+</script>
+
+{#snippet countColumn(row: Row, side: CountColumnSide)}
+	<td
+		class="table__numberColumn"
+		data-no-drag
+		class:diff-line-deletion={row.type === SectionType.RemovedLines}
+		class:diff-line-addition={row.type === SectionType.AddedLines}
+		align="center"
+		class:is-last={row.isLast}
+		class:is-before={side === CountColumnSide.Before}
+	>
+		{side === CountColumnSide.Before ? row.beforeLineNumber : row.afterLineNumber}
+	</td>
+{/snippet}
+
+<div
+	bind:clientWidth={tableWidth}
+	bind:clientHeight={tableHeight}
+	class="table__wrapper hide-native-scrollbar contrast-{diffContrast}"
+	style="--tab-size: {tabSize}; --diff-font: {diffFont};"
+	style:font-variant-ligatures={diffLigatures ? 'common-ligatures' : 'none'}
+>
+	<table class="table__section">
+		<thead class="table__title">
+			<tr>
+				<th
+					bind:clientWidth={numberHeaderWidth}
+					class="table__checkbox-container"
+					style="--border-width: {BORDER_WIDTH}px;"
+					colspan={2}
+				>
+					<div
+						class="table__title-content"
+						style="--number-col-width: {numberHeaderWidth}px; --table-width: {tableWidth}px; --border-width: {BORDER_WIDTH}px; --top: -{BORDER_WIDTH}px"
+					>
+						<span>
+							{`@@ -${hunkLineInfo.beforLineStart},${hunkLineInfo.beforeLineCount} +${hunkLineInfo.afterLineStart},${hunkLineInfo.afterLineCount} @@`}
+						</span>
+					</div>
+				</th>
+			</tr>
+		</thead>
+
+		<tbody>
+			{#each renderRows as row}
+				<tr data-no-drag>
+					{@render countColumn(row, CountColumnSide.Before)}
+					{@render countColumn(row, CountColumnSide.After)}
+					<td
+						class="table__textContent"
+						style="--tab-size: {tabSize}; --wrap: {wrapText ? 'wrap' : 'nowrap'}"
+						class:readonly={true}
+						data-no-drag
+						class:diff-line-deletion={row.type === SectionType.RemovedLines}
+						class:diff-line-addition={row.type === SectionType.AddedLines}
+						class:is-last={row.isLast}
+					>
+						{@html row.tokens.join('')}
+					</td>
+				</tr>
+			{/each}
+		</tbody>
+	</table>
+</div>
+
+<style lang="postcss">
+	.table__wrapper {
+		border-radius: var(--radius-s);
+		background-color: var(--clr-diff-line-bg);
+		border: 1px solid var(--clr-border-2);
+		overflow-x: auto;
+		width: 100%;
+	}
+
+	table,
+	.table__section {
+		width: 100%;
+		font-family: var(--diff-font);
+		border-collapse: separate;
+		border-spacing: 0;
+	}
+
+	thead {
+		width: 100%;
+		padding: 0;
+	}
+
+	tbody {
+		z-index: var(--z-lifted);
+	}
+
+	th,
+	td,
+	tr {
+		padding: 0;
+		margin: 0;
+	}
+
+	table thead th {
+		top: 0;
+		left: 0;
+		position: sticky;
+		height: 28px;
+	}
+
+	.table__checkbox-container {
+		z-index: var(--z-lifted);
+
+		border-right: 1px solid var(--clr-border-2);
+		border-bottom: 1px solid var(--clr-border-2);
+		background-color: var(--clr-diff-count-bg);
+		border-top-left-radius: var(--radius-s);
+		box-sizing: border-box;
+
+		&.selected {
+			background-color: var(--clr-diff-selected-count-bg);
+			border-color: var(--clr-diff-selected-count-border);
+		}
+	}
+
+	.table__checkbox {
+		padding: 4px 6px;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+	}
+
+	.table__title {
+		user-select: none;
+	}
+
+	.draggable {
+		cursor: grab;
+	}
+
+	.table__drag-handle {
+		position: fixed;
+		right: 6px;
+		top: 6px;
+		box-sizing: border-box;
+		background-color: var(--clr-bg-1);
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		border-radius: var(--radius-s);
+		opacity: 0;
+		transform: scale(0.9);
+		transform-origin: top right;
+		pointer-events: none;
+		color: var(--clr-text-2);
+		transition:
+			opacity 0.2s,
+			transform 0.2s;
+	}
+
+	.table__lock {
+		position: fixed;
+		right: 6px;
+		top: 6px;
+		box-sizing: border-box;
+		background-color: var(--clr-theme-warn-soft);
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		border-radius: var(--radius-s);
+		pointer-events: none;
+		color: var(--clr-text-2);
+		transition: transform var(--transition-medium);
+	}
+
+	.table__title-content {
+		position: absolute;
+		top: var(--top);
+		left: var(--number-col-width);
+		width: calc(var(--table-width) - var(--number-col-width));
+		height: calc(100% + var(--border-width) * 2);
+		box-sizing: border-box;
+		font-weight: 400;
+		font-size: 12px;
+		padding: 4px 6px;
+		text-wrap: nowrap;
+		color: var(--clr-text-2);
+		display: flex;
+		align-items: center;
+		border-bottom: 1px solid var(--clr-border-2);
+		border-top-right-radius: var(--radius-m);
+	}
+
+	.table__numberColumn {
+		color: var(--clr-diff-count-text);
+		border-color: var(--clr-diff-count-border);
+		background-color: var(--clr-diff-count-bg);
+		font-size: 11px;
+		text-align: center;
+		padding: 0 4px;
+		text-align: right;
+		vertical-align: top;
+		user-select: none;
+
+		position: sticky;
+		left: calc(var(--number-col-width));
+		width: var(--number-col-width);
+		min-width: var(--number-col-width);
+
+		&.diff-line-addition {
+			background-color: var(--clr-diff-addition-count-bg);
+			color: var(--clr-diff-addition-count-text);
+			border-color: var(--clr-diff-addition-count-border);
+		}
+
+		&.diff-line-deletion {
+			background-color: var(--clr-diff-deletion-count-bg);
+			color: var(--clr-diff-deletion-count-text);
+			border-color: var(--clr-diff-deletion-count-border);
+		}
+
+		&.selected {
+			background-color: var(--clr-diff-selected-count-bg);
+			color: var(--clr-diff-selected-count-text);
+			border-color: var(--clr-diff-selected-count-border);
+		}
+
+		&.is-before.is-last {
+			border-bottom-left-radius: var(--radius-s);
+		}
+	}
+
+	.table__numberColumn:first-of-type {
+		width: var(--number-col-width);
+		min-width: var(--number-col-width);
+		left: 0px;
+	}
+
+	.table__textContent {
+		z-index: var(--z-lifted);
+		width: 100%;
+		font-size: 12px;
+		padding-left: 4px;
+		line-height: 1.25;
+		tab-size: var(--tab-size);
+		white-space: pre;
+		user-select: text;
+		cursor: text;
+		text-wrap: var(--wrap);
+		border-left: 1px solid var(--clr-border-2);
+	}
+
+	/* DIFF LINE */
+	.diff-line-marker-addition,
+	.diff-line-addition {
+		background-color: var(--clr-diff-addition-line-bg);
+	}
+
+	.diff-line-marker-deletion,
+	.diff-line-deletion {
+		background-color: var(--clr-diff-deletion-line-bg);
+	}
+
+	/* CONTRAST MODIFIERS */
+	.table__wrapper {
+		&.contrast-light {
+			--clr-diff-count-text: var('--', var(--clr-diff-count-text));
+			/* deletion */
+			--clr-diff-deletion-line-bg: var('--', var(--clr-diff-deletion-line-bg));
+			--clr-diff-deletion-line-highlight: var('--', var(--clr-diff-deletion-line-highlight));
+			--clr-diff-deletion-count-bg: var('--', var(--clr-diff-deletion-count-bg));
+			--clr-diff-deletion-count-text: var('--', var(--clr-diff-deletion-count-text));
+			--clr-diff-deletion-count-border: var('--', var(--clr-diff-deletion-count-border));
+			/* addition */
+			--ctx-diff-addition-line-bg: var('--', var(--clr-diff-addition-line-bg));
+			--clr-diff-addition-line-highlight: var('--', var(--clr-diff-addition-line-highlight));
+			--clr-diff-addition-count-bg: var('--', var(--clr-diff-addition-count-bg));
+			--clr-diff-addition-count-text: var('--', var(--clr-diff-addition-count-text));
+			--clr-diff-addition-count-border: var('--', var(--clr-diff-addition-count-border));
+		}
+
+		&.contrast-medium {
+			--clr-diff-count-text: var(--clr-diff-count-text-contrast-2);
+			/* deletion */
+			--clr-diff-deletion-line-bg: var(--clr-diff-deletion-contrast-2-line-bg);
+			--clr-diff-deletion-line-highlight: var(--clr-diff-deletion-contrast-2-line-highlight);
+			--clr-diff-deletion-count-bg: var(--clr-diff-deletion-contrast-2-count-bg);
+			--clr-diff-deletion-count-text: var(--clr-diff-deletion-contrast-2-count-text);
+			--clr-diff-deletion-count-border: var(--clr-diff-deletion-contrast-2-count-border);
+			/* addition */
+			--clr-diff-addition-line-bg: var(--clr-diff-addition-contrast-2-line-bg);
+			--clr-diff-addition-line-highlight: var(--clr-diff-addition-contrast-2-line-highlight);
+			--clr-diff-addition-count-bg: var(--clr-diff-addition-contrast-2-count-bg);
+			--clr-diff-addition-count-text: var(--clr-diff-addition-contrast-2-count-text);
+			--clr-diff-addition-count-border: var(--clr-diff-addition-contrast-2-count-border);
+		}
+
+		&.contrast-strong {
+			--clr-diff-count-text: var(--clr-diff-count-text-contrast-3);
+			/* deletion */
+			--clr-diff-deletion-line-bg: var(--clr-diff-deletion-contrast-3-line-bg);
+			--clr-diff-deletion-line-highlight: var(--clr-diff-deletion-contrast-3-line-highlight);
+			--clr-diff-deletion-count-bg: var(--clr-diff-deletion-contrast-3-count-bg);
+			--clr-diff-deletion-count-text: var(--clr-diff-deletion-contrast-3-count-text);
+			--clr-diff-deletion-count-border: var(--clr-diff-deletion-contrast-3-count-border);
+			/* addition */
+			--clr-diff-addition-line-bg: var(--clr-diff-addition-contrast-3-line-bg);
+			--clr-diff-addition-line-highlight: var(--clr-diff-addition-contrast-3-line-highlight);
+			--clr-diff-addition-count-bg: var(--clr-diff-addition-contrast-3-count-bg);
+			--clr-diff-addition-count-text: var(--clr-diff-addition-contrast-3-count-text);
+			--clr-diff-addition-count-border: var(--clr-diff-addition-contrast-3-count-border);
+		}
+	}
+</style>
diff --git a/apps/web/src/lib/components/review/DiffSection.svelte b/apps/web/src/lib/components/review/DiffSection.svelte
index 3d72cf5f3a..08b1b54224 100644
--- a/apps/web/src/lib/components/review/DiffSection.svelte
+++ b/apps/web/src/lib/components/review/DiffSection.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { parseDiff, type DiffLineType } from '$lib/diff/parser';
+	import HunkDiff from '$lib/components/HunkDiff.svelte';
+	import { parsePatch } from '$lib/diffParsing';
 	import type { DiffSection } from '@gitbutler/shared/branches/types';
 
 	interface Props {
@@ -8,41 +9,13 @@
 
 	const { section }: Props = $props();
 
-	const parsedHunks = $derived(parseDiff(section.diffPatch));
-
-	function lineTypeToClass(lineType: DiffLineType): string {
-		switch (lineType) {
-			case 'add':
-				return 'diff-line-added';
-			case 'remove':
-				return 'diff-line-removed';
-			case 'context':
-				return 'diff-line-unchanged';
-		}
-	}
+	const hunks = $derived(section.diffPatch ? parsePatch(section.diffPatch) : []);
 </script>
 
 <div class="diff-section">
 	<p class="file-name">{section.newPath}</p>
-
-	{#each parsedHunks as hunk}
-		<div class="diff">
-			<div class="diff-header">
-				<p class="diff-header-text">
-					@@ -{hunk.header.oldStart},{hunk.header.oldLength} +{hunk.header.newStart},{hunk.header
-						.newLength} @@
-				</p>
-			</div>
-			<div class="diff-content-wrapper">
-				<div class="diff-content">
-					{#each hunk.lines as line}
-						<div class={lineTypeToClass(line.type)}>
-							<pre><code>{line.line}</code></pre>
-						</div>
-					{/each}
-				</div>
-			</div>
-		</div>
+	{#each hunks as hunk}
+		<HunkDiff filePath={section.newPath || 'unknown'} subsections={hunk.contentSections}></HunkDiff>
 	{/each}
 </div>
 
@@ -66,80 +39,4 @@
 		font-weight: var(--weight-regular, 400);
 		line-height: 160%; /* 19.2px */
 	}
-
-	.diff {
-		display: flex;
-		flex-direction: column;
-		align-items: flex-start;
-		align-self: stretch;
-
-		border-radius: var(--m, 6px);
-		border: 1px solid var(--diff-count-border, #d4d0ce);
-
-		& pre {
-			color: var(--text-1, #1a1614);
-			font-family: 'Geist Mono';
-			font-size: 12px;
-			font-style: normal;
-			font-weight: 400;
-			line-height: 120%; /* 14.4px */
-			padding: 2px 6px;
-
-			width: fit-content;
-			background: none;
-		}
-	}
-
-	.diff-header {
-		display: flex;
-		padding: 4px 6px;
-		align-items: center;
-		gap: 10px;
-		flex: 1 0 0;
-		align-self: stretch;
-		background: var(--bg-1, #fff);
-	}
-
-	.diff-header-text {
-		color: var(--text-2, #867e79);
-		font-family: 'Geist Mono';
-		font-size: 12px;
-		font-style: normal;
-		font-weight: 400;
-		line-height: 120%; /* 14.4px */
-	}
-
-	.diff-content-wrapper {
-		display: flex;
-		flex-direction: column;
-		align-items: flex-start;
-		align-self: stretch;
-
-		width: 100%;
-		overflow-x: scroll;
-
-		scrollbar-width: none;
-		&::-webkit-scrollbar {
-			display: none;
-		}
-	}
-
-	.diff-content {
-		min-width: 100%;
-		border-top: 1px solid var(--diff-count-border, #d4d0ce);
-	}
-
-	.diff-line-added {
-		width: 100%;
-		background: var(--clr-diff-addition-count-bg);
-	}
-
-	.diff-line-removed {
-		width: 100%;
-		background: var(--clr-diff-deletion-count-bg);
-	}
-
-	.diff-line-unchanged {
-		width: 100%;
-	}
 </style>
diff --git a/apps/web/src/lib/diff/parser.ts b/apps/web/src/lib/diff/parser.ts
deleted file mode 100644
index c1140a0126..0000000000
--- a/apps/web/src/lib/diff/parser.ts
+++ /dev/null
@@ -1,129 +0,0 @@
-interface DiffChunk {
-	header: string;
-	lines: string[];
-}
-
-function getDiffChunks(diff: string): DiffChunk[] {
-	const lines = diff.split('\n');
-	const chunks: DiffChunk[] = [];
-	let chunk: DiffChunk | null = null;
-	let line: string | null = null;
-
-	for (let i = 0; i < lines.length; i++) {
-		line = lines[i];
-
-		if (line.startsWith('diff')) {
-			if (chunk) {
-				chunks.push(chunk);
-			}
-
-			chunk = {
-				header: line,
-				lines: []
-			};
-
-			continue;
-		}
-
-		if (line.startsWith('@@')) {
-			if (chunk) {
-				chunks.push(chunk);
-			}
-
-			chunk = {
-				header: line,
-				lines: []
-			};
-
-			continue;
-		}
-
-		if (line.startsWith('---') || line.startsWith('+++')) {
-			// Ignore
-			continue;
-		}
-
-		if (line.startsWith('index')) {
-			// Ignore
-			continue;
-		}
-
-		if (chunk) {
-			chunk.lines.push(line);
-		}
-	}
-
-	if (chunk) {
-		chunks.push(chunk);
-	}
-
-	return chunks;
-}
-
-interface ParsedDiffHeader {
-	oldStart: number;
-	oldLength: number;
-	newStart: number;
-	newLength: number;
-}
-
-function parseHeader(rawHeader: string): ParsedDiffHeader {
-	const parts = rawHeader.split(' ');
-	const oldStart = parts[0].split(',')[0].slice(1);
-	const oldLength = parts[0].split(',')[1];
-	const newStart = parts[1].split(',')[0];
-	const newLength = parts[1].split(',')[1];
-
-	return {
-		oldStart: parseInt(oldStart, 10),
-		oldLength: parseInt(oldLength, 10),
-		newStart: parseInt(newStart, 10),
-		newLength: parseInt(newLength, 10)
-	};
-}
-
-export type DiffLineType = 'add' | 'remove' | 'context';
-
-interface ParsedDiffLine {
-	type: DiffLineType;
-	line: string;
-}
-
-interface ParsedDiffHunk {
-	header: ParsedDiffHeader;
-	lines: ParsedDiffLine[];
-}
-export function parseDiff(diff: string | undefined): ParsedDiffHunk[] {
-	if (!diff) {
-		return [];
-	}
-
-	const chunks = getDiffChunks(diff);
-	const parsedChunks: ParsedDiffHunk[] = [];
-	for (const chunk of chunks) {
-		if (!chunk.header.startsWith('@@')) {
-			continue;
-		}
-
-		const rawHeader = chunk.header.split('@@')[1].trim();
-		const parsedHeader = parseHeader(rawHeader);
-		const lines: ParsedDiffLine[] = [];
-
-		for (const rawLine of chunk.lines) {
-			const type = rawLine[0];
-			const line = rawLine.slice(1);
-
-			lines.push({
-				type: type === '+' ? 'add' : type === '-' ? 'remove' : 'context',
-				line
-			});
-		}
-
-		parsedChunks.push({
-			header: parsedHeader,
-			lines
-		});
-	}
-
-	return parsedChunks;
-}
diff --git a/apps/web/src/lib/diffParsing.ts b/apps/web/src/lib/diffParsing.ts
new file mode 100644
index 0000000000..564922b91f
--- /dev/null
+++ b/apps/web/src/lib/diffParsing.ts
@@ -0,0 +1,109 @@
+export enum SectionType {
+	AddedLines,
+	RemovedLines,
+	Context
+}
+
+export enum CountColumnSide {
+	Before,
+	After
+}
+
+export type Line = {
+	readonly beforeLineNumber?: number;
+	readonly afterLineNumber?: number;
+	readonly content: string;
+};
+
+export type ContentSection = {
+	readonly lines: Line[];
+	readonly sectionType: SectionType;
+};
+
+export type Hunk = {
+	readonly oldStart: number;
+	readonly newStart: number;
+	readonly contentSections: ContentSection[];
+};
+
+const headerRegex =
+	/@@ -(?<beforeStart>\d+),?(?<beforeCount>\d+)? \+(?<afterStart>\d+),?(?<afterCount>\d+) @@(?<comment>.+)?/;
+function parseHeader(header: string): { oldStart: number; newStart: number } {
+	const result = headerRegex.exec(header);
+	if (!result?.groups) {
+		throw new Error('Failed to parse diff header');
+	}
+	return {
+		oldStart: parseInt(result.groups['beforeStart']),
+		newStart: parseInt(result.groups['afterStart'])
+	};
+}
+
+function lineType(line: string): SectionType {
+	if (line.startsWith('+')) {
+		return SectionType.AddedLines;
+	} else if (line.startsWith('-')) {
+		return SectionType.RemovedLines;
+	} else {
+		return SectionType.Context;
+	}
+}
+
+export function parsePatch(patch: string) {
+	const lines = patch.trim().split('\n');
+	console.log(lines);
+
+	const hunks = [];
+	let currentHunk: Hunk | undefined;
+	// These zero values will never get used in practice.
+	let lastBefore = 0;
+	let lastAfter = 0;
+
+	for (const line of lines) {
+		if (line.startsWith('@@')) {
+			currentHunk = {
+				...parseHeader(line),
+				contentSections: []
+			};
+			hunks.push(currentHunk);
+			lastBefore = currentHunk.oldStart;
+			lastAfter = currentHunk.newStart;
+			continue;
+		}
+		if (!currentHunk) {
+			continue;
+		}
+
+		const type = lineType(line);
+		let lastSection = currentHunk.contentSections.at(-1);
+		if (!lastSection) {
+			lastSection = { lines: [], sectionType: type };
+			currentHunk.contentSections.push(lastSection);
+		}
+
+		// If the type has changed, we want to start a new section
+		if (lastSection.sectionType !== type) {
+			lastSection = { lines: [], sectionType: type };
+			currentHunk.contentSections.push(lastSection);
+		}
+
+		if (type === SectionType.AddedLines) {
+			lastAfter += 1;
+			lastSection.lines.push({ afterLineNumber: lastAfter, content: line.slice(1) });
+		} else if (type === SectionType.RemovedLines) {
+			lastBefore += 1;
+			lastSection.lines.push({ beforeLineNumber: lastBefore, content: line.slice(1) });
+		} else {
+			lastAfter += 1;
+			lastBefore += 1;
+			lastSection.lines.push({
+				afterLineNumber: lastAfter,
+				beforeLineNumber: lastBefore,
+				content: line.slice(1)
+			});
+		}
+	}
+
+	console.log(hunks);
+	return hunks;
+}
diff --git a/apps/web/svelte.config.js b/apps/web/svelte.config.js
index bbbd031873..26f1fcab1d 100644
--- a/apps/web/svelte.config.js
+++ b/apps/web/svelte.config.js
@@ -3,7 +3,7 @@ import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
-	preprocess: vitePreprocess(),
+	preprocess: vitePreprocess({ script: true }),
 	kit: {
 		adapter: adapter(),
 		alias: {
diff --git a/apps/web/tsconfig.json b/apps/web/tsconfig.json
index 97f245c2f0..726e6432c2 100644
--- a/apps/web/tsconfig.json
+++ b/apps/web/tsconfig.json
@@ -1,7 +1,7 @@
 {
 	"extends": "./.svelte-kit/tsconfig.json",
 	"compilerOptions": {
-		"target": "es6",
+		"target": "ES2018",
 		"lib": ["dom", "dom.iterable", "ES2021"],
 		"allowJs": true,
 		"checkJs": true,
diff --git a/packages/shared/package.json b/packages/shared/package.json
index ae3702afa1..204a07accf 100644
--- a/packages/shared/package.json
+++ b/packages/shared/package.json
@@ -60,7 +60,25 @@
 		"svelte-check": "catalog:svelte",
 		"vite": "catalog:",
 		"vitest": "^2.0.5",
-		"@reduxjs/toolkit": "catalog:redux"
+		"@reduxjs/toolkit": "catalog:redux",
+		"@codemirror/lang-cpp": "^6.0.2",
+		"@codemirror/lang-css": "^6.2.1",
+		"@codemirror/lang-html": "^6.4.9",
+		"@codemirror/lang-java": "^6.0.1",
+		"@codemirror/lang-javascript": "^6.2.2",
+		"@codemirror/lang-json": "^6.0.1",
+		"@codemirror/lang-markdown": "^6.2.5",
+		"@codemirror/lang-php": "^6.0.1",
+		"@codemirror/lang-python": "^6.1.6",
+		"@codemirror/lang-rust": "^6.0.1",
+		"@codemirror/lang-vue": "^0.1.3",
+		"@codemirror/lang-wast": "^6.0.2",
+		"@codemirror/lang-xml": "^6.1.0",
+		"@codemirror/language": "^6.10.2",
+		"@codemirror/legacy-modes": "^6.4.0",
+		"@lezer/common": "^1.2.1",
+		"@lezer/highlight": "^1.2.0",
+		"@replit/codemirror-lang-svelte": "^6.0.0"
 	},
 	"type": "module",
 	"dependencies": {
diff --git a/apps/desktop/src/lib/utils/codeHighlight.ts b/packages/shared/src/lib/codeHighlight.ts
similarity index 100%
rename from apps/desktop/src/lib/utils/codeHighlight.ts
rename to packages/shared/src/lib/codeHighlight.ts
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 293eb13091..c4d0fc312e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -110,72 +110,18 @@ importers:
       '@anthropic-ai/sdk':
         specifier: ^0.27.3
         version: 0.27.3
-      '@codemirror/lang-cpp':
-        specifier: ^6.0.2
-        version: 6.0.2
-      '@codemirror/lang-css':
-        specifier: ^6.2.1
-        version: 6.2.1(@codemirror/view@6.26.3)
-      '@codemirror/lang-html':
-        specifier: ^6.4.9
-        version: 6.4.9
-      '@codemirror/lang-java':
-        specifier: ^6.0.1
-        version: 6.0.1
-      '@codemirror/lang-javascript':
-        specifier: ^6.2.2
-        version: 6.2.2
-      '@codemirror/lang-json':
-        specifier: ^6.0.1
-        version: 6.0.1
-      '@codemirror/lang-markdown':
-        specifier: ^6.2.5
-        version: 6.2.5
-      '@codemirror/lang-php':
-        specifier: ^6.0.1
-        version: 6.0.1
-      '@codemirror/lang-python':
-        specifier: ^6.1.6
-        version: 6.1.6(@codemirror/view@6.26.3)
-      '@codemirror/lang-rust':
-        specifier: ^6.0.1
-        version: 6.0.1
-      '@codemirror/lang-vue':
-        specifier: ^0.1.3
-        version: 0.1.3
-      '@codemirror/lang-wast':
-        specifier: ^6.0.2
-        version: 6.0.2
-      '@codemirror/lang-xml':
-        specifier: ^6.1.0
-        version: 6.1.0
-      '@codemirror/language':
-        specifier: ^6.10.2
-        version: 6.10.2
-      '@codemirror/legacy-modes':
-        specifier: ^6.4.0
-        version: 6.4.0
       '@gitbutler/shared':
         specifier: workspace:*
         version: link:../../packages/shared
       '@gitbutler/ui':
         specifier: workspace:*
         version: link:../../packages/ui
-      '@lezer/common':
-        specifier: ^1.2.1
-        version: 1.2.1
-      '@lezer/highlight':
-        specifier: ^1.2.0
-        version: 1.2.0
       '@octokit/rest':
         specifier: ^20.1.1
         version: 20.1.1
       '@reduxjs/toolkit':
         specifier: catalog:redux
         version: 2.5.0(react@18.3.1)
-      '@replit/codemirror-lang-svelte':
-        specifier: ^6.0.0
-        version: 6.0.0(@codemirror/autocomplete@6.16.2(@codemirror/language@6.10.2)(@codemirror/state@6.4.1)(@codemirror/view@6.26.3)(@lezer/common@1.2.1))(@codemirror/lang-css@6.2.1(@codemirror/view@6.26.3))(@codemirror/lang-html@6.4.9)(@codemirror/lang-javascript@6.2.2)(@codemirror/language@6.10.2)(@codemirror/state@6.4.1)(@codemirror/view@6.26.3)(@lezer/common@1.2.1)(@lezer/highlight@1.2.0)(@lezer/javascript@1.4.16)(@lezer/lr@1.4.1)
       '@sentry/sveltekit':
         specifier: catalog:svelte
         version: 8.51.0(@opentelemetry/api@1.9.0)(@opentelemetry/core@1.30.0(@opentelemetry/api@1.9.0))(@opentelemetry/instrumentation@0.56.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@1.30.0(@opentelemetry/api@1.9.0))(@opentelemetry/semantic-conventions@1.28.0)(@sveltejs/kit@2.16.1(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.19.2)(vite@5.4.14(@types/node@22.3.0)(sass-embedded@1.82.0)))(svelte@5.19.2)(vite@5.4.14(@types/node@22.3.0)(sass-embedded@1.82.0)))(svelte@5.19.2)(vite@5.4.14(@types/node@22.3.0)(sass-embedded@1.82.0))
@@ -396,9 +342,15 @@ importers:
       '@sveltejs/vite-plugin-svelte':
         specifier: catalog:svelte
         version: 4.0.4(svelte@5.19.2)(vite@5.4.14(@types/node@22.3.0)(sass-embedded@1.82.0))
+      '@types/diff-match-patch':
+        specifier: ^1.0.36
+        version: 1.0.36
       '@types/node':
         specifier: ^22.3.0
         version: 22.3.0
+      diff-match-patch:
+        specifier: ^1.0.5
+        version: 1.0.5
       svelte:
         specifier: catalog:svelte
         version: 5.19.2
@@ -418,15 +370,69 @@ importers:
         specifier: ^1.3.2
         version: 1.3.2
     devDependencies:
+      '@codemirror/lang-cpp':
+        specifier: ^6.0.2
+        version: 6.0.2
+      '@codemirror/lang-css':
+        specifier: ^6.2.1
+        version: 6.2.1(@codemirror/view@6.26.3)
+      '@codemirror/lang-html':
+        specifier: ^6.4.9
+        version: 6.4.9
+      '@codemirror/lang-java':
+        specifier: ^6.0.1
+        version: 6.0.1
+      '@codemirror/lang-javascript':
+        specifier: ^6.2.2
+        version: 6.2.2
+      '@codemirror/lang-json':
+        specifier: ^6.0.1
+        version: 6.0.1
+      '@codemirror/lang-markdown':
+        specifier: ^6.2.5
+        version: 6.2.5
+      '@codemirror/lang-php':
+        specifier: ^6.0.1
+        version: 6.0.1
+      '@codemirror/lang-python':
+        specifier: ^6.1.6
+        version: 6.1.6(@codemirror/view@6.26.3)
+      '@codemirror/lang-rust':
+        specifier: ^6.0.1
+        version: 6.0.1
+      '@codemirror/lang-vue':
+        specifier: ^0.1.3
+        version: 0.1.3
+      '@codemirror/lang-wast':
+        specifier: ^6.0.2
+        version: 6.0.2
+      '@codemirror/lang-xml':
+        specifier: ^6.1.0
+        version: 6.1.0
+      '@codemirror/language':
+        specifier: ^6.10.2
+        version: 6.10.2
+      '@codemirror/legacy-modes':
+        specifier: ^6.4.0
+        version: 6.4.0
       '@csstools/postcss-bundler':
         specifier: ^1.0.15
         version: 1.0.15(postcss@8.4.39)
       '@gitbutler/ui':
         specifier: workspace:*
         version: link:../ui
+      '@lezer/common':
+        specifier: ^1.2.1
+        version: 1.2.1
+      '@lezer/highlight':
+        specifier: ^1.2.0
+        version: 1.2.0
       '@reduxjs/toolkit':
         specifier: catalog:redux
         version: 2.5.0(react@18.3.1)
+      '@replit/codemirror-lang-svelte':
+        specifier: ^6.0.0
+        version: 6.0.0(@codemirror/autocomplete@6.16.2(@codemirror/language@6.10.2)(@codemirror/state@6.4.1)(@codemirror/view@6.26.3)(@lezer/common@1.2.1))(@codemirror/lang-css@6.2.1(@codemirror/view@6.26.3))(@codemirror/lang-html@6.4.9)(@codemirror/lang-javascript@6.2.2)(@codemirror/language@6.10.2)(@codemirror/state@6.4.1)(@codemirror/view@6.26.3)(@lezer/common@1.2.1)(@lezer/highlight@1.2.0)(@lezer/javascript@1.4.16)(@lezer/lr@1.4.1)
       '@sveltejs/adapter-static':
         specifier: catalog:svelte
         version: 3.0.8(@sveltejs/kit@2.16.1(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.19.2)(vite@5.4.14(@types/node@22.3.0)(sass-embedded@1.82.0)))(svelte@5.19.2)(vite@5.4.14(@types/node@22.3.0)(sass-embedded@1.82.0)))