diff --git a/site/src/routes/repl/[id]/_components/AppControls/UserMenu.svelte b/site/src/routes/repl/[id]/_components/AppControls/UserMenu.svelte
index 1404c1d5fc..245ea70eae 100644
--- a/site/src/routes/repl/[id]/_components/AppControls/UserMenu.svelte
+++ b/site/src/routes/repl/[id]/_components/AppControls/UserMenu.svelte
@@ -1,6 +1,8 @@
 <script>
 	import { user, logout } from '../../../../../user.js';
 
+	export let load;
+
 	let showMenu = false;
 	let name;
 
@@ -13,6 +15,7 @@
 
 	{#if showMenu}
 		<div class="menu">
+			<button on:click={load}>Archive</button>
 			<button on:click={logout}>Log out</button>
 		</div>
 	{/if}
@@ -72,6 +75,8 @@
 		z-index: 99;
 		text-align: left;
 		border-radius: 0.4rem;
+		display: flex;
+		flex-direction: column;
 	}
 
 	.menu button {
@@ -79,6 +84,7 @@
 		font-family: var(--font);
 		font-size: 1.6rem;
 		/* opacity: 0.7; */
+		padding: 0.4rem 0;
 	}
 
 	.menu button:hover {
diff --git a/site/src/routes/repl/[id]/_components/AppControls/index.svelte b/site/src/routes/repl/[id]/_components/AppControls/index.svelte
index 7770972474..71e79074d5 100644
--- a/site/src/routes/repl/[id]/_components/AppControls/index.svelte
+++ b/site/src/routes/repl/[id]/_components/AppControls/index.svelte
@@ -142,6 +142,58 @@
 		saving = false;
 	}
 
+	async function load() {
+		const periodFormatter = new Intl.DateTimeFormat(undefined, {
+			year: "numeric",
+			month: "long",
+		});
+
+		function sections(gists) {
+			const grouped = gists.reduce((agg, gist) => {
+				const key = periodFormatter.format(new Date(gist.updated_at));
+				if (!agg.hasOwnProperty(key)) {
+					agg[key] = [];
+				}
+				agg[key].push(gist);
+				return agg;
+			}, {});
+			return Object.entries(grouped).map(([title, archive]) => {
+				return {
+					title,
+					archive,
+				};
+			});
+		}
+
+		try {
+			const r = await fetch(`../repl/archive.json`, {
+				method: 'GET',
+				headers: { Authorization },
+			});
+
+			if (r.status < 200 || r.status >= 300) {
+				const { error } = await r.json();
+				throw new Error(`Received an HTTP ${r.status} response: ${error}`);
+			}
+
+			const gists = await r.json();
+			for (const section of sections(gists)) {
+				console.log(section.title);
+				for (const repl of section.archive) {
+					console.log("  " + repl.name);
+					console.log("  " + location.origin + "/repl/" + repl.uid);
+				}
+			}
+
+		} catch (err) {
+			if (navigator.onLine) {
+				alert(err.message);
+			} else {
+				alert(`It looks like you're offline! Find the internet and try again`);
+			}
+		}
+	}
+
 	async function download() {
 		downloading = true;
 
@@ -216,7 +268,7 @@ export default app;` });
 		</button>
 
 		{#if $user}
-			<UserMenu />
+			<UserMenu {load} />
 		{:else}
 			<button class="icon" on:click={login}>
 				<Icon name="log-in" />
diff --git a/site/src/routes/repl/archive.json.js b/site/src/routes/repl/archive.json.js
new file mode 100644
index 0000000000..7c64b345cb
--- /dev/null
+++ b/site/src/routes/repl/archive.json.js
@@ -0,0 +1,20 @@
+import send from '@polka/send';
+import { query } from '../../utils/db';
+import { isUser } from '../../backend/auth';
+
+export async function get(req, res) {
+	const user = await isUser(req, res);
+	if (!user) return; // response already sent
+
+	const offset = req.params.offset || 0;
+	const rows = await query(`
+		select g.uid, g.name, coalesce(g.updated_at, g.created_at) as updated_at
+		from gists g
+		where g.user_id = $1
+		order by g.updated_at desc, g.created_at desc
+		limit 100
+		offset $2
+	`, [user.id, offset]);
+
+	send(res, 200, rows);
+}