diff --git a/web/src/lib/components/diff/ImageDiff.svelte b/web/src/lib/components/diff/ImageDiff.svelte
index 9f75217..86b6208 100644
--- a/web/src/lib/components/diff/ImageDiff.svelte
+++ b/web/src/lib/components/diff/ImageDiff.svelte
@@ -102,14 +102,14 @@
     {#snippet modeButton(forMode: Mode, iconClass: string)}
         <button
             type="button"
-            class="flex items-center justify-center rounded-sm btn-ghost p-1.5 text-primary data-[active=true]:btn-ghost-visible"
+            class="flex items-center justify-center rounded-sm btn-ghost px-2 py-1 text-primary data-[active=true]:btn-ghost-visible"
             onclick={() => (mode = forMode)}
             data-active={mode === forMode}
         >
             <span class="iconify {iconClass} me-1 size-4" aria-hidden="true"></span>{forMode}
         </button>
     {/snippet}
-    <div class="mb-4 flex flex-row gap-2 rounded-lg bg-neutral p-2 shadow-sm">
+    <div class="mb-4 flex flex-row gap-1 rounded-lg bg-neutral p-1.5 shadow-sm">
         {@render modeButton("slide", "octicon--image-16")}
         {@render modeButton("side-by-side", "octicon--columns-16")}
         {@render modeButton("fade", "octicon--image-16")}
@@ -171,10 +171,12 @@
         </div>
         <AddedOrRemovedImageLabel mode="add" dims={dims.b} />
     </div>
-    <div class="mt-4 flex w-full max-w-[280px] items-center">
+    <div class="mt-4 flex w-full max-w-[280px] items-center rounded-lg bg-neutral p-2.5 shadow-sm">
         <Slider.Root type="single" bind:value={fadePercent} class="relative flex w-full touch-none items-center select-none">
-            <span class="relative h-0.5 w-full grow cursor-pointer overflow-hidden rounded-full bg-primary"> </span>
-            <Slider.Thumb index={0} class="block size-4 cursor-pointer rounded-full bg-neutral shadow-sm transition-colors hover:border active:scale-[0.98]" />
+            <span class="relative h-0.5 w-full grow cursor-pointer overflow-hidden rounded-full bg-em-disabled">
+                <Slider.Range class="absolute h-full bg-primary" />
+            </span>
+            <Slider.Thumb index={0} class="block size-4 cursor-pointer rounded-full border bg-neutral shadow-sm transition-colors" />
         </Slider.Root>
     </div>
 {/snippet}
diff --git a/web/src/lib/components/files/DirectoryInput.svelte b/web/src/lib/components/files/DirectoryInput.svelte
new file mode 100644
index 0000000..556e32d
--- /dev/null
+++ b/web/src/lib/components/files/DirectoryInput.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+    import { type RestProps } from "$lib/types";
+    import { type Snippet } from "svelte";
+    import { Button, mergeProps } from "bits-ui";
+    import { type DirectoryEntry, pickDirectory } from "$lib/components/files/index.svelte";
+
+    type Props = {
+        children?: Snippet<[{ directory?: DirectoryEntry }]>;
+        directory?: DirectoryEntry;
+    } & RestProps;
+
+    let { children, directory = $bindable<DirectoryEntry | undefined>(undefined), ...restProps }: Props = $props();
+
+    async function onclick() {
+        try {
+            directory = await pickDirectory();
+        } catch (e) {
+            if (e instanceof Error && e.name === "AbortError") {
+                return;
+            } else {
+                console.error("Failed to pick directory", e);
+            }
+        }
+    }
+
+    const mergedProps = mergeProps({ onclick }, restProps);
+</script>
+
+<Button.Root {...mergedProps}>
+    {@render children?.({ directory })}
+</Button.Root>
diff --git a/web/src/lib/components/files/DirectorySelect.svelte b/web/src/lib/components/files/DirectorySelect.svelte
new file mode 100644
index 0000000..8d94bb0
--- /dev/null
+++ b/web/src/lib/components/files/DirectorySelect.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+    import DirectoryInput from "$lib/components/files/DirectoryInput.svelte";
+    import { type DirectoryEntry } from "$lib/components/files/index.svelte";
+
+    interface Props {
+        placeholder: string;
+        directory?: DirectoryEntry;
+    }
+
+    let { placeholder = "Select Directory", directory = $bindable<DirectoryEntry | undefined>(undefined) }: Props = $props();
+</script>
+
+<DirectoryInput class="flex items-center gap-2 rounded-md border btn-ghost px-2 py-1" bind:directory>
+    {#snippet children({ directory })}
+        <span class="iconify size-4 shrink-0 text-em-disabled octicon--file-directory-16"></span>
+        {#if directory}
+            {directory.fileName}
+        {:else}
+            {placeholder}
+        {/if}
+        <span class="iconify size-4 shrink-0 text-em-disabled octicon--triangle-down-16"></span>
+    {/snippet}
+</DirectoryInput>
diff --git a/web/src/lib/components/FileInput.svelte b/web/src/lib/components/files/FileInput.svelte
similarity index 100%
rename from web/src/lib/components/FileInput.svelte
rename to web/src/lib/components/files/FileInput.svelte
diff --git a/web/src/lib/components/SingleFileSelect.svelte b/web/src/lib/components/files/SingleFileSelect.svelte
similarity index 89%
rename from web/src/lib/components/SingleFileSelect.svelte
rename to web/src/lib/components/files/SingleFileSelect.svelte
index 7e893f6..baa4fff 100644
--- a/web/src/lib/components/SingleFileSelect.svelte
+++ b/web/src/lib/components/files/SingleFileSelect.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import FileInput from "$lib/components/FileInput.svelte";
+    import FileInput from "$lib/components/files/FileInput.svelte";
 
     interface Props {
         placeholder: string;
diff --git a/web/src/lib/components/files/index.svelte.ts b/web/src/lib/components/files/index.svelte.ts
new file mode 100644
index 0000000..de9f40d
--- /dev/null
+++ b/web/src/lib/components/files/index.svelte.ts
@@ -0,0 +1,134 @@
+export interface FileSystemEntry {
+    fileName: string;
+}
+
+export class DirectoryEntry implements FileSystemEntry {
+    fileName: string;
+    children: FileSystemEntry[];
+
+    constructor(fileName: string, children: FileSystemEntry[]) {
+        this.fileName = fileName;
+        this.children = children;
+    }
+}
+
+export class FileEntry implements FileSystemEntry {
+    fileName: string;
+    file: File;
+
+    constructor(fileName: string, file: File) {
+        this.fileName = fileName;
+        this.file = file;
+    }
+}
+
+export async function pickDirectory(): Promise<DirectoryEntry> {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    if (!(window as any).showDirectoryPicker) {
+        return await pickDirectoryLegacy();
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const directoryHandle: FileSystemDirectoryHandle = await (window as any).showDirectoryPicker();
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    if (!(directoryHandle as any).entries) {
+        return await pickDirectoryLegacy();
+    }
+
+    return await handleToDirectoryEntry(directoryHandle);
+}
+
+async function handleToDirectoryEntry(directoryHandle: FileSystemDirectoryHandle): Promise<DirectoryEntry> {
+    const root = new DirectoryEntry(directoryHandle.name, []);
+
+    type StackEntry = [FileSystemDirectoryHandle, DirectoryEntry];
+    const stack: StackEntry[] = [[directoryHandle, root]];
+
+    while (stack.length > 0) {
+        const [dirHandle, dirEntry] = stack.shift()!;
+
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any,@typescript-eslint/no-unused-vars
+        for await (const [name, handle] of (dirHandle as any).entries()) {
+            if (handle.kind === "directory") {
+                const subDir = new DirectoryEntry(handle.name, []);
+                dirEntry.children.push(subDir);
+                stack.push([handle, subDir]);
+            } else if (handle.kind === "file") {
+                dirEntry.children.push(await handleToFileEntry(handle));
+            }
+        }
+    }
+
+    return root;
+}
+
+async function handleToFileEntry(fileHandle: FileSystemFileHandle): Promise<FileEntry> {
+    const file = await fileHandle.getFile();
+    return new FileEntry(fileHandle.name, file);
+}
+
+async function pickDirectoryLegacy(): Promise<DirectoryEntry> {
+    const input = document.createElement("input");
+    input.type = "file";
+    input.webkitdirectory = true;
+    input.multiple = true;
+
+    return new Promise((resolve, reject) => {
+        input.addEventListener("change", (event) => {
+            const files = (event.target as HTMLInputElement).files;
+            if (!files) {
+                reject(new Error("No files selected"));
+                return;
+            }
+
+            resolve(filesToDirectory(files));
+        });
+
+        input.click();
+    });
+}
+
+function filesToDirectory(files: FileList): DirectoryEntry {
+    let ret: DirectoryEntry | null = null;
+
+    for (const file of files) {
+        const parts = file.webkitRelativePath.split("/");
+
+        if (parts.length === 1) {
+            throw Error("File has no path");
+        }
+
+        let current: DirectoryEntry | null = null;
+
+        for (let i = 0; i < parts.length; i++) {
+            const part = parts[i];
+
+            if (current === null) {
+                current = ret;
+                if (current === null) {
+                    current = new DirectoryEntry(part, []);
+                    ret = current;
+                }
+                continue;
+            }
+
+            if (i === parts.length - 1) {
+                current.children.push(new FileEntry(part, file));
+            } else {
+                let dirEntry = current.children.find((entry) => entry.fileName === part) as DirectoryEntry;
+                if (!dirEntry) {
+                    dirEntry = new DirectoryEntry(part, []);
+                    current.children.push(dirEntry);
+                }
+                current = dirEntry;
+            }
+        }
+    }
+
+    if (ret === null) {
+        throw Error("Selected empty directory");
+    }
+
+    return ret;
+}
diff --git a/web/src/lib/diff-viewer-multi-file.svelte.ts b/web/src/lib/diff-viewer-multi-file.svelte.ts
index 03cff56..4ee3027 100644
--- a/web/src/lib/diff-viewer-multi-file.svelte.ts
+++ b/web/src/lib/diff-viewer-multi-file.svelte.ts
@@ -135,9 +135,51 @@ export type FileDetails = {
     content: string;
     fromFile: string;
     toFile: string;
+    fromBlob?: Blob;
+    toBlob?: Blob;
     status: FileStatus;
 };
 
+// Sort such that when displayed as a file tree, directories come before files and each level is sorted by name
+function compareFileDetails(a: FileDetails, b: FileDetails): number {
+    const aName = a.toFile;
+    const bName = b.toFile;
+
+    // Split paths into components
+    const aParts = aName.split("/");
+    const bParts = bName.split("/");
+
+    // Compare component by component
+    const minLength = Math.min(aParts.length, bParts.length);
+
+    for (let i = 0; i < minLength; i++) {
+        // If we're not at the last component of both paths
+        if (i < aParts.length - 1 && i < bParts.length - 1) {
+            const comparison = aParts[i].localeCompare(bParts[i]);
+            if (comparison !== 0) {
+                return comparison;
+            }
+            continue;
+        }
+
+        // If one path is longer at this position (has subdirectories)
+        if (i === bParts.length - 1 && i < aParts.length - 1) {
+            // a has subdirectories, so it should come first
+            return -1;
+        }
+        if (i === aParts.length - 1 && i < bParts.length - 1) {
+            // b has subdirectories, so it should come first
+            return 1;
+        }
+
+        // Both are at their final component, compare them
+        return aParts[i].localeCompare(bParts[i]);
+    }
+
+    // If one path is a prefix of the other, shorter path comes first
+    return aParts.length - bParts.length;
+}
+
 export type FileStatusProps = {
     iconClasses: string;
     title: string;
@@ -406,17 +448,18 @@ export class MultiFileDiffViewerState {
             this.diffMetadata = null;
         }
 
+        patches.sort(compareFileDetails);
+
         // Load new state
         for (let i = 0; i < patches.length; i++) {
             const patch = patches[i];
 
-            if (meta.githubDetails && isImageFile(patch.fromFile) && isImageFile(patch.toFile)) {
+            const isImageDiff = isImageFile(patch.fromFile) && isImageFile(patch.toFile);
+            if (isImageDiff && meta.githubDetails) {
                 const githubDetailsCopy = meta.githubDetails;
 
-                let fileA: LazyPromise<string> | null;
-                if (patch.status === "added") {
-                    fileA = null;
-                } else {
+                let fileA: LazyPromise<string> | null = null;
+                if (patch.status !== "added") {
                     fileA = lazyPromise(async () =>
                         URL.createObjectURL(
                             await fetchGithubFile(getGithubToken(), githubDetailsCopy.owner, githubDetailsCopy.repo, patch.fromFile, githubDetailsCopy.base),
@@ -424,10 +467,8 @@ export class MultiFileDiffViewerState {
                     );
                 }
 
-                let fileB: LazyPromise<string> | null;
-                if (patch.status === "removed") {
-                    fileB = null;
-                } else {
+                let fileB: LazyPromise<string> | null = null;
+                if (patch.status !== "removed") {
                     fileB = lazyPromise(async () =>
                         URL.createObjectURL(
                             await fetchGithubFile(getGithubToken(), githubDetailsCopy.owner, githubDetailsCopy.repo, patch.toFile, githubDetailsCopy.head),
@@ -438,6 +479,22 @@ export class MultiFileDiffViewerState {
                 this.images[i] = { fileA, fileB, load: false };
                 continue;
             }
+            const fromBlob = patch.fromBlob;
+            const toBlob = patch.toBlob;
+            if (isImageDiff && fromBlob && toBlob) {
+                let fileA: LazyPromise<string> | null = null;
+                if (patch.status !== "added") {
+                    fileA = lazyPromise(async () => URL.createObjectURL(fromBlob));
+                }
+
+                let fileB: LazyPromise<string> | null = null;
+                if (patch.status !== "removed") {
+                    fileB = lazyPromise(async () => URL.createObjectURL(toBlob));
+                }
+
+                this.images[i] = { fileA, fileB, load: false };
+                continue;
+            }
 
             this.diffText[i] = patch.content;
             this.diffs[i] = (async () => {
@@ -449,6 +506,7 @@ export class MultiFileDiffViewerState {
         this.fileDetails.push(...patches);
     }
 
+    // TODO fails for initial commit?
     // handle matched github url
     async loadFromGithubApi(match: Array<string>): Promise<boolean> {
         const [url, owner, repo, type, id] = match;
diff --git a/web/src/lib/util.ts b/web/src/lib/util.ts
index 697660c..8226c05 100644
--- a/web/src/lib/util.ts
+++ b/web/src/lib/util.ts
@@ -23,6 +23,58 @@ export function trimCommitHash(hash: string): string {
     return hash;
 }
 
+export async function isBinaryFile(file: File): Promise<boolean> {
+    const sampleSize = Math.min(file.size, 1024);
+    const buffer = await file.slice(0, sampleSize).arrayBuffer();
+    const decoder = new TextDecoder("utf-8", { fatal: true });
+    try {
+        decoder.decode(buffer);
+        return false; // Valid UTF-8, likely text
+    } catch {
+        return true; // Invalid UTF-8, likely binary
+    }
+}
+
+export async function bytesEqual(a: File, b: File): Promise<Boolean> {
+    if (a.size !== b.size) {
+        return false;
+    }
+    if (a.size === 0) {
+        return true;
+    }
+    const [bytesA, bytesB] = await Promise.all([a.arrayBuffer(), b.arrayBuffer()]);
+    if (bytesA.byteLength === bytesB.byteLength) {
+        const viewA = new Uint8Array(bytesA);
+        const viewB = new Uint8Array(bytesB);
+        if (viewA.every((byte, index) => byte === viewB[index])) {
+            // Files are identical
+            return true;
+        }
+    }
+    return false;
+}
+
+export function binaryFileDummyDetails(fromFile: string, toFile: string, status: FileStatus): FileDetails {
+    let fakeContent: string;
+    switch (status) {
+        case "added":
+            fakeContent = `diff --git /dev/null b/${toFile}\n--- /dev/null\n+++ b/${toFile}\n@@ -0,0 +1,1 @@\n+Cannot show binary file`;
+            break;
+        case "removed":
+            fakeContent = `diff --git a/${fromFile} /dev/null\n--- a/${fromFile}\n+++ /dev/null\n@@ -1,1 +0,0 @@\n-Cannot show binary file`;
+            break;
+        default:
+            fakeContent = `diff --git a/${fromFile} b/${toFile}\n--- a/${fromFile}\n+++ b/${toFile}\n@@ -1,1 +1,1 @@\n-Cannot show binary file\n+Cannot show binary file`;
+            break;
+    }
+    return {
+        content: fakeContent,
+        fromFile: fromFile,
+        toFile: toFile,
+        status,
+    };
+}
+
 const fileRegex = /diff --git a\/(\S+) b\/(\S+)\r?\n(?:.+\r?\n)*?(?=diff --git|$)/g;
 
 export function splitMultiFilePatch(patchContent: string): FileDetails[] {
@@ -56,8 +108,7 @@ export function splitMultiFilePatch(patchContent: string): FileDetails[] {
                 if (thirdNewlineIndex !== -1) {
                     const line3 = fullFileMatch.substring(secondNewlineIndex + 1, thirdNewlineIndex);
                     if (line3.match(/^Binary/)) {
-                        const fakeContent = `diff --git a/${fromFile} b/${toFile}\n--- a/${fromFile}\n+++ b/${toFile}\n@@ -1,1 +1,1 @@\n-Cannot show binary file\n+Cannot show binary file`;
-                        patches.push({ content: fakeContent, fromFile: fromFile, toFile: toFile, status });
+                        patches.push(binaryFileDummyDetails(fromFile, toFile, status));
                         continue;
                     }
                 }
diff --git a/web/src/routes/diff/LoadDiffDialog.svelte b/web/src/routes/diff/LoadDiffDialog.svelte
index df18356..087d26d 100644
--- a/web/src/routes/diff/LoadDiffDialog.svelte
+++ b/web/src/routes/diff/LoadDiffDialog.svelte
@@ -5,11 +5,13 @@
     import { page } from "$app/state";
     import { goto } from "$app/navigation";
     import { type FileDetails, MultiFileDiffViewerState } from "$lib/diff-viewer-multi-file.svelte";
-    import { splitMultiFilePatch } from "$lib/util";
+    import { binaryFileDummyDetails, bytesEqual, isBinaryFile, isImageFile, splitMultiFilePatch } from "$lib/util";
     import { onMount } from "svelte";
-    import FileInput from "$lib/components/FileInput.svelte";
-    import SingleFileSelect from "$lib/components/SingleFileSelect.svelte";
+    import FileInput from "$lib/components/files/FileInput.svelte";
+    import SingleFileSelect from "$lib/components/files/SingleFileSelect.svelte";
     import { createTwoFilesPatch } from "diff";
+    import DirectorySelect from "$lib/components/files/DirectorySelect.svelte";
+    import { DirectoryEntry, FileEntry } from "$lib/components/files/index.svelte";
 
     const viewer = MultiFileDiffViewerState.get();
 
@@ -19,6 +21,8 @@
 
     let fileA = $state<File | undefined>(undefined);
     let fileB = $state<File | undefined>(undefined);
+    let dirA = $state<DirectoryEntry | undefined>(undefined);
+    let dirB = $state<DirectoryEntry | undefined>(undefined);
 
     onMount(async () => {
         const url = page.url.searchParams.get(GITHUB_URL_PARAM);
@@ -36,30 +40,199 @@
             return;
         }
 
-        const [textA, textB] = await Promise.all([fileA.text(), fileB.text()]);
-        if (textA === textB) {
-            alert("The files are identical.");
+        const isImageDiff = isImageFile(fileA.name) && isImageFile(fileB.name);
+        const [aBinary, bBinary] = await Promise.all([isBinaryFile(fileA), isBinaryFile(fileB)]);
+        if (aBinary || bBinary) {
+            if (!isImageDiff) {
+                alert("Cannot compare binary files.");
+                return;
+            }
+        }
+
+        const fileDetails: FileDetails[] = [];
+
+        if (isImageDiff) {
+            if (await bytesEqual(fileA, fileB)) {
+                alert("The files are identical.");
+                return;
+            }
+
+            let status: FileStatus = "modified";
+            if (fileA.name !== fileB.name) {
+                status = "renamed_modified";
+            }
+
+            fileDetails.push({
+                content: "",
+                fromFile: fileA.name,
+                toFile: fileB.name,
+                fromBlob: fileA,
+                toBlob: fileB,
+                status,
+            });
+        } else {
+            const [textA, textB] = await Promise.all([fileA.text(), fileB.text()]);
+            if (textA === textB) {
+                alert("The files are identical.");
+                return;
+            }
+
+            const diff = createTwoFilesPatch(fileA.name, fileB.name, textA, textB);
+            let status: FileStatus = "modified";
+            if (fileA.name !== fileB.name) {
+                status = "renamed_modified";
+            }
+
+            fileDetails.push({
+                content: diff,
+                fromFile: fileA.name,
+                toFile: fileB.name,
+                status,
+            });
+        }
+
+        viewer.loadPatches(fileDetails, { fileName: `${fileA.name}...${fileB.name}.patch` });
+        await updateUrlParams();
+        modalOpen = false;
+    }
+
+    type ProtoFileDetails = {
+        path: string;
+        file: File;
+    };
+
+    // TODO: option to respect gitignore?
+    async function compareDirs() {
+        if (!dirA || !dirB) {
+            alert("Both directories must be selected to compare.");
             return;
         }
 
-        const diff = createTwoFilesPatch(fileA.name, fileB.name, textA, textB);
-        let status: FileStatus = "modified";
-        if (fileA.name !== fileB.name) {
-            status = "renamed_modified";
+        const entriesA: ProtoFileDetails[] = flatten(dirA);
+        const entriesB: ProtoFileDetails[] = flatten(dirB);
+
+        const fileDetails: FileDetails[] = [];
+
+        for (const entry of entriesA) {
+            const entryB = entriesB.find((e) => e.path === entry.path);
+            if (entryB) {
+                // File exists in both directories
+                const [aBinary, bBinary] = await Promise.all([isBinaryFile(entry.file), isBinaryFile(entryB.file)]);
+
+                if (aBinary || bBinary) {
+                    if (await bytesEqual(entry.file, entryB.file)) {
+                        // Files are identical
+                        continue;
+                    }
+                    if (isImageFile(entry.file.name) && isImageFile(entryB.file.name)) {
+                        fileDetails.push({
+                            content: "",
+                            fromFile: entry.path,
+                            toFile: entryB.path,
+                            fromBlob: entry.file,
+                            toBlob: entryB.file,
+                            status: "modified",
+                        });
+                    } else {
+                        fileDetails.push(binaryFileDummyDetails(entry.path, entryB.path, "modified"));
+                    }
+                } else {
+                    const [textA, textB] = await Promise.all([entry.file.text(), entryB.file.text()]);
+                    if (textA === textB) {
+                        // Files are identical
+                        continue;
+                    }
+                    fileDetails.push({
+                        content: createTwoFilesPatch(entry.path, entryB.path, textA, textB),
+                        fromFile: entry.path,
+                        toFile: entryB.path,
+                        status: "modified",
+                    });
+                }
+            } else if (isImageFile(entry.file.name)) {
+                // Image file removed
+                fileDetails.push({
+                    content: "",
+                    fromFile: entry.path,
+                    toFile: entry.path,
+                    fromBlob: entry.file,
+                    toBlob: entry.file,
+                    status: "removed",
+                });
+            } else if (await isBinaryFile(entry.file)) {
+                // Binary file removed
+                fileDetails.push(binaryFileDummyDetails(entry.path, entry.path, "removed"));
+            } else {
+                // Text file removed
+                fileDetails.push({
+                    content: createTwoFilesPatch(entry.path, "", await entry.file.text(), ""),
+                    fromFile: entry.path,
+                    toFile: entry.path,
+                    status: "removed",
+                });
+            }
         }
 
-        const fileDetails: FileDetails = {
-            content: diff,
-            fromFile: fileA.name,
-            toFile: fileB.name,
-            status,
-        };
+        // Check for added files
+        for (const entry of entriesB) {
+            const entryA = entriesA.find((e) => e.path === entry.path);
+            if (!entryA) {
+                if (isImageFile(entry.file.name)) {
+                    fileDetails.push({
+                        content: "",
+                        fromFile: entry.path,
+                        toFile: entry.path,
+                        fromBlob: entry.file,
+                        toBlob: entry.file,
+                        status: "added",
+                    });
+                } else if (await isBinaryFile(entry.file)) {
+                    fileDetails.push(binaryFileDummyDetails(entry.path, entry.path, "added"));
+                } else {
+                    fileDetails.push({
+                        content: createTwoFilesPatch("", entry.path, "", await entry.file.text()),
+                        fromFile: entry.path,
+                        toFile: entry.path,
+                        status: "added",
+                    });
+                }
+            }
+        }
 
-        viewer.loadPatches([fileDetails], { fileName: `${fileA.name}...${fileB.name}.patch` });
+        viewer.loadPatches(fileDetails, { fileName: `${dirA.fileName}...${dirB.fileName}.patch` });
         await updateUrlParams();
         modalOpen = false;
     }
 
+    function flatten(dir: DirectoryEntry): ProtoFileDetails[] {
+        type StackEntry = {
+            directory: DirectoryEntry;
+            prefix: string;
+        };
+        const into: ProtoFileDetails[] = [];
+        const stack: StackEntry[] = [{ directory: dir, prefix: "" }];
+
+        while (stack.length > 0) {
+            const { directory, prefix: currentPrefix } = stack.pop()!;
+
+            for (const entry of directory.children) {
+                if (entry instanceof DirectoryEntry) {
+                    stack.push({
+                        directory: entry,
+                        prefix: currentPrefix + entry.fileName + "/",
+                    });
+                } else if (entry instanceof FileEntry) {
+                    into.push({
+                        path: currentPrefix + entry.fileName,
+                        file: entry.file,
+                    });
+                }
+            }
+        }
+
+        return into;
+    }
+
     async function loadFromPatchFile(fileName: string, patchContent: string) {
         const files = splitMultiFilePatch(patchContent);
         if (files.length === 0) {
@@ -229,7 +402,7 @@
                     Load Patch File
                 </FileInput>
 
-                <section>
+                <section class="mb-2">
                     <h4 class="mb-2 font-semibold">Compare Files</h4>
                     <div class="flex flex-row items-center gap-1">
                         <SingleFileSelect bind:file={fileA} placeholder="File A" />
@@ -238,6 +411,21 @@
                         <Button.Root onclick={compareFiles} class="rounded-md btn-primary px-2 py-1">Go</Button.Root>
                     </div>
                 </section>
+
+                <section>
+                    <h4 class="mb-2 font-semibold">Compare Directories</h4>
+                    <div class="flex flex-row items-center gap-1">
+                        <DirectorySelect bind:directory={dirA} placeholder="Directory A" />
+                        <span class="iconify size-4 shrink-0 octicon--arrow-right-16"></span>
+                        <DirectorySelect bind:directory={dirB} placeholder="Directory B" />
+                        <Button.Root onclick={compareDirs} class="rounded-md btn-primary px-2 py-1">Go</Button.Root>
+                        <InfoPopup>
+                            Compares the entire contents of the directories, including subdirectories. Does not attempt to detect renames. When possible,
+                            preparing a unified diff (<code class="rounded-sm bg-neutral-2 px-1 py-0.5">.patch</code> file) using Git or another tool, and loading
+                            it with the above button should be preferred.
+                        </InfoPopup>
+                    </div>
+                </section>
             </section>
         </Dialog.Content>
     </Dialog.Portal>
diff --git a/web/src/routes/diff/single-file/+page.svelte b/web/src/routes/diff/single-file/+page.svelte
index 3e04e52..fe8a5e6 100644
--- a/web/src/routes/diff/single-file/+page.svelte
+++ b/web/src/routes/diff/single-file/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import ConciseDiffView from "$lib/components/diff/ConciseDiffView.svelte";
-    import FileInput from "$lib/components/FileInput.svelte";
+    import FileInput from "$lib/components/files/FileInput.svelte";
 
     let data: { value: string } = $state({ value: "" });
     let fileName: string = $state("No File Selected");