diff --git a/src/lib/components/ui/file-card/file-card.svelte b/src/lib/components/ui/file-card/file-card.svelte
new file mode 100644
index 0000000..53c02e3
--- /dev/null
+++ b/src/lib/components/ui/file-card/file-card.svelte
@@ -0,0 +1,154 @@
+<script lang="ts">
+	import type { trpc } from "$lib/trpc/client";
+
+	import * as Card from "@/ui/card";
+	import * as Tooltip from "@/ui/tooltip";
+	import { Button } from "@/ui/button";
+
+	import { filesize } from "filesize";
+	import { AnimatedLoading } from "$lib/icons";
+	import { Download, X } from "lucide-svelte";
+
+	import { import_private_key } from "$lib/client/key_management";
+	import {
+		unwrap_symmetrical_key,
+		decrypt_blob,
+	} from "$lib/client/encryption";
+
+	interface File {
+		name: string;
+		size: number;
+		id: string;
+		owner: boolean;
+		iv: string;
+	}
+
+	const {
+		file,
+		rpc,
+	}: {
+		file: File;
+		rpc: ReturnType<typeof trpc>;
+	} = $props();
+
+	// screw it, we'll just download ALL OF THEM EVERY TIME
+	const symkeyQuery = rpc.blobManagement.downloadSymmeticKey.createQuery({
+		kid: file.id,
+	});
+
+	let isBusy = $state(false);
+	let isLoading = $derived(
+		isBusy || $symkeyQuery.isLoading || $symkeyQuery.isError,
+	);
+
+	const decodeB64Blob = (b64: string): Uint8Array => {
+		const binaryString = atob(b64);
+		let bytes = new Uint8Array(binaryString.length);
+		for (let i = 0; i < binaryString.length; i++) {
+			bytes[i] = binaryString.charCodeAt(i);
+		}
+		return bytes;
+	};
+
+	const downloadFile = async () => {
+		try {
+			isBusy = true;
+			console.group("Downloading File");
+
+			const key_data = $symkeyQuery.data;
+			if (!key_data) return;
+
+			const { key_b64, pubkey } = key_data;
+
+			console.log("Got past we have key check");
+
+			const wrapped_key = decodeB64Blob(key_b64 as string);
+			const unwraping_key = await import_private_key(pubkey);
+
+			console.log("unwrapping symmetrical key");
+
+			const unwrapped_key = await unwrap_symmetrical_key(
+				unwraping_key,
+				wrapped_key,
+			);
+
+			console.log("fetching encrypted blob");
+
+			const response = await fetch(`/api/blobs/${file.id}`);
+			const response_blob = await response.arrayBuffer();
+
+			console.log("decrypting blob");
+
+			const iv = decodeB64Blob(file.iv);
+			const decrypted_blob = await decrypt_blob(
+				unwrapped_key,
+				iv,
+				response_blob,
+			);
+
+			console.log("downloading blob");
+
+			const file_blob = new Blob([decrypted_blob]);
+			const url = window.URL.createObjectURL(file_blob);
+
+			const anchor = document.createElement("a");
+			anchor.style.display = "none";
+			anchor.setAttribute("href", url);
+			anchor.setAttribute("download", file.name);
+
+			document.body.appendChild(anchor);
+
+			anchor.click();
+
+			document.body.removeChild(anchor);
+
+			console.info("Done");
+		} catch (e) {
+			console.info("Failed");
+			console.error(e);
+		}
+
+		console.groupEnd();
+
+		isBusy = false;
+	};
+</script>
+
+<Card.Root class="w-72">
+	<Card.Header>
+		<Tooltip.Root>
+			<Tooltip.Trigger>
+				{#snippet child({ props })}
+					<div
+						class="overflow-hidden text-ellipsis text-nowrap"
+						{...props}
+					>
+						{file.name}
+					</div>
+				{/snippet}
+			</Tooltip.Trigger>
+			<Tooltip.Content>
+				<p>{file.name}</p>
+			</Tooltip.Content>
+		</Tooltip.Root>
+	</Card.Header>
+	<Card.Content>
+		{filesize(file.size)}
+	</Card.Content>
+	<Card.Footer>
+		<Button
+			size="icon"
+			variant="ghost"
+			disabled={isLoading}
+			onmouseup={downloadFile}
+		>
+			{#if isLoading}
+				<AnimatedLoading />
+			{:else if $symkeyQuery.isError}
+				<X class="text-destructive-foreground" />
+			{:else}
+				<Download />
+			{/if}
+		</Button>
+	</Card.Footer>
+</Card.Root>
diff --git a/src/lib/components/ui/file-card/index.ts b/src/lib/components/ui/file-card/index.ts
new file mode 100644
index 0000000..f578e2c
--- /dev/null
+++ b/src/lib/components/ui/file-card/index.ts
@@ -0,0 +1,3 @@
+import FileCard from "./file-card.svelte";
+
+export { FileCard };
diff --git a/src/lib/server/trpc/router/blob_management.ts b/src/lib/server/trpc/router/blob_management.ts
new file mode 100644
index 0000000..17909b0
--- /dev/null
+++ b/src/lib/server/trpc/router/blob_management.ts
@@ -0,0 +1,114 @@
+import { DB } from "$lib/server/db";
+import { authMiddleware } from "../middleware";
+import { trpcInstance } from "./init";
+
+import {
+	publicKeyTable,
+	encryptedBlobTable,
+	symmetricKeyTable,
+} from "$lib/drizzle";
+import { and, eq } from "drizzle-orm";
+
+import z from "zod";
+import { TRPCError } from "@trpc/server";
+import { monotonic_ulid } from "$lib/utils";
+
+export const blobManagementRouter = trpcInstance.router({
+	// #region Symmetric Key Upload
+	uploadSymmetricKeyAndCreateEmptyBlob: trpcInstance.procedure
+		.use(authMiddleware)
+		.input(
+			z.object({
+				key_b64: z.string().base64(),
+				pubkey: z.string().ulid(),
+				file_name: z.string().min(3).max(100),
+				iv_b64: z.string().base64(),
+			}),
+		)
+		.mutation(async ({ ctx, input }) => {
+			return await DB.transaction(async (tx_db) => {
+				const keyCount = (
+					await tx_db
+						.selectDistinct({ kid: publicKeyTable.kid })
+						.from(publicKeyTable)
+						.where(
+							and(
+								eq(publicKeyTable.kid, input.pubkey),
+								eq(publicKeyTable.keyOwner, ctx.user.id),
+							),
+						)
+				).length;
+
+				if (keyCount == 0) {
+					throw new TRPCError({
+						code: "BAD_REQUEST",
+						message: "No public key uploaded",
+					});
+				} else if (keyCount > 1) {
+					throw new TRPCError({
+						code: "CONFLICT",
+						message:
+							"Multiple keys uploaded with KID, don't know what to do.",
+					});
+				} else {
+					const [{ kid }] = await tx_db
+						.insert(symmetricKeyTable)
+						.values({
+							key: input.key_b64,
+							publicKey: input.pubkey,
+							kid: monotonic_ulid(),
+						})
+						.returning();
+
+					await tx_db.insert(encryptedBlobTable).values({
+						kid: kid,
+						name: input.file_name,
+						state: "fresh",
+						owner: ctx.user.id,
+						iv: input.iv_b64,
+					});
+
+					return kid;
+				}
+			});
+		}),
+	// #endregion
+	// #region Symmetric Key Download
+	downloadSymmeticKey: trpcInstance.procedure
+		.use(authMiddleware)
+		.input(
+			z.object({
+				kid: z.string().ulid(),
+			}),
+		)
+		.query(async (opts) => {
+			const keys = await DB.select({
+				key_b64: symmetricKeyTable.key,
+				pubkey: symmetricKeyTable.publicKey,
+			})
+				.from(symmetricKeyTable)
+				.leftJoin(
+					publicKeyTable,
+					eq(symmetricKeyTable.publicKey, publicKeyTable.kid),
+				)
+				.where(
+					and(
+						eq(publicKeyTable.keyOwner, opts.ctx.user.id),
+						eq(symmetricKeyTable.kid, opts.input.kid),
+					),
+				);
+
+			if (keys.length != 1) {
+				throw new TRPCError({
+					code: "NOT_FOUND",
+					message: "No key found",
+				});
+			} else {
+				return {
+					...keys[0],
+					key_b64: keys[0].key_b64 as string,
+				};
+			}
+		}),
+	// #endregion
+});
diff --git a/src/lib/server/trpc/router/index.ts b/src/lib/server/trpc/router/index.ts
index 1c65484..a2f5a20 100644
--- a/src/lib/server/trpc/router/index.ts
+++ b/src/lib/server/trpc/router/index.ts
@@ -8,12 +8,14 @@ import { greeterRouter } from "./greeter";
 import { healthRouter } from "./health";
 import { userRouter } from "./user";
 import { keyManagementRouter } from "./key_management";
+import { blobManagementRouter } from "./blob_management";
 
 export const router = trpcInstance.router({
 	greeter: greeterRouter,
 	health: healthRouter,
 	user: userRouter,
 	keyManagement: keyManagementRouter,
+	blobManagement: blobManagementRouter,
 });
 
 export type Router = typeof router;
diff --git a/src/lib/server/trpc/router/key_management.ts b/src/lib/server/trpc/router/key_management.ts
index 6c3062c..541eaa0 100644
--- a/src/lib/server/trpc/router/key_management.ts
+++ b/src/lib/server/trpc/router/key_management.ts
@@ -5,12 +5,7 @@ import { authMiddleware } from "../middleware";
 import { TRPCError } from "@trpc/server";
 
 import { DB } from "$lib/server/db";
-import {
-	encryptedBlobTable,
-	publicKeyTable,
-	reservedKIDTable,
-	symmetricKeyTable,
-} from "$lib/drizzle";
+import { publicKeyTable, reservedKIDTable } from "$lib/drizzle";
 import { eq, and } from "drizzle-orm";
 
 import { monotonic_ulid } from "$lib/utils";
@@ -287,63 +282,4 @@ export const keyManagementRouter = trpcInstance.router({
 			});
 		}),
 	// #endregion
-	// #region Symmetric Key Upload
-	uploadSymmetricKeyAndCreateEmptyBlob: trpcInstance.procedure
-		.use(authMiddleware)
-		.input(
-			z.object({
-				key_b64: z.string().base64(),
-				pubkey: z.string().ulid(),
-				file_name: z.string().min(3).max(100),
-				iv_b64: z.string().base64(),
-			}),
-		)
-		.mutation(async ({ ctx, input }) => {
-			return await DB.transaction(async (tx_db) => {
-				const keyCount = (
-					await tx_db
-						.selectDistinct({ kid: publicKeyTable.kid })
-						.from(publicKeyTable)
-						.where(
-							and(
-								eq(publicKeyTable.kid, input.pubkey),
-								eq(publicKeyTable.keyOwner, ctx.user.id),
-							),
-						)
-				).length;
-
-				if (keyCount == 0) {
-					throw new TRPCError({
-						code: "BAD_REQUEST",
-						message: "No public key uploaded",
-					});
-				} else if (keyCount > 1) {
-					throw new TRPCError({
-						code: "CONFLICT",
-						message:
-							"Multiple keys uploaded with KID, don't know what to do.",
-					});
-				} else {
-					const [{ kid }] = await tx_db
-						.insert(symmetricKeyTable)
-						.values({
-							key: input.key_b64,
-							publicKey: input.pubkey,
-							kid: monotonic_ulid(),
-						})
-						.returning();
-
-					await tx_db.insert(encryptedBlobTable).values({
-						kid: kid,
-						name: input.file_name,
-						state: "fresh",
-						owner: ctx.user.id,
-						iv: input.iv_b64,
-					});
-
-					return kid;
-				}
-			});
-		}),
-	// #endregion
 });
diff --git a/src/lib/server/trpc/router/user.ts b/src/lib/server/trpc/router/user.ts
index 31c5972..431baa2 100644
--- a/src/lib/server/trpc/router/user.ts
+++ b/src/lib/server/trpc/router/user.ts
@@ -2,14 +2,66 @@
 import { trpcInstance } from "./init";
 import { authMiddleware } from "../middleware";
 
+import { DB } from "$lib/server/db";
+import {
+	encryptedBlobTable,
+	publicKeyTable,
+	symmetricKeyTable,
+} from "$lib/drizzle";
+import { eq, and, sql, inArray } from "drizzle-orm";
+import { z } from "zod";
+
 export const userRouter = trpcInstance.router({
 	getUploadedFiles: trpcInstance.procedure
 		.use(authMiddleware)
-		.query(async () => {
-			await new Promise((res) => setTimeout(res, 1000));
+		.query(async (opts) => {
+			DB.select({
+				kid: encryptedBlobTable.name,
+			})
+				.from(encryptedBlobTable)
+				.where(eq(encryptedBlobTable.owner, opts.ctx.user.id));
+		}),
 
-			return {
-				uploadedFiles: Math.floor(Math.random() * 100),
-			};
+	fetchUploadedFileMetadata: trpcInstance.procedure
+		.use(authMiddleware)
+		.input(
+			z.object({
+				kids: z.array(z.string().ulid()),
+			}),
+		)
+		.query(async (opts) => {
+			return (
+				await DB.select({
+					name: encryptedBlobTable.name,
+					size: sql<number>`length(${encryptedBlobTable.blob})`,
+					id: encryptedBlobTable.kid,
+					owner: encryptedBlobTable.owner,
+					iv: encryptedBlobTable.iv,
+				})
+					.from(encryptedBlobTable)
+					.leftJoin(
+						symmetricKeyTable,
+						eq(symmetricKeyTable.kid, encryptedBlobTable.kid),
+					)
+					.leftJoin(
+						publicKeyTable,
+						eq(symmetricKeyTable.publicKey, publicKeyTable.kid),
+					)
+					.where(
+						and(
+							and(
+								eq(publicKeyTable.keyOwner, opts.ctx.user.id),
+								inArray(publicKeyTable.kid, opts.input.kids),
+							),
+							eq(encryptedBlobTable.state, "up"),
+						),
+					)
+			).map((value) => {
+				return {
+					...value,
+					owner: value.owner === opts.ctx.user.id,
+					iv: value.iv as string,
+				};
+			});
 		}),
 });
diff --git a/src/routes/(app)/app/+page.svelte b/src/routes/(app)/app/+page.svelte
index 72b0967..29f35ae 100644
--- a/src/routes/(app)/app/+page.svelte
+++ b/src/routes/(app)/app/+page.svelte
@@ -1,105 +1,53 @@
 <script lang="ts">
 	import Main from "@/main.svelte";
 
-	import { Button } from "$lib/components/ui/button";
-
-	import { toast } from "svelte-sonner";
-
-	import {
-		encrypt_blob,
-		generate_symmetrical_key,
-		unwrap_symmetrical_key,
-		wrap_symmetrical_key,
-	} from "$lib/client/encryption";
-	import {
-		import_key_meta,
-		import_private_key,
-		import_public_key,
-		list_public_keys,
-	} from "$lib/client/key_management";
-	import { arraysEqual } from "$lib/utils";
-
-	const aaaa = () => {
-		toast.promise(new Promise((res) => setTimeout(res, 5_000)), {
-			loading: "Loading",
-			important: true,
-			finally: () => {
-				toast.success("Done.");
-			},
-		});
-	};
-
-	const do_key_stuff = async () => {
-		const sym_key = await generate_symmetrical_key();
-		console.log("sym key", sym_key);
-
-		const test_iv = window.crypto.getRandomValues(new Uint8Array(96));
-		const test_value = window.crypto.getRandomValues(new Uint8Array(256));
-
-		const original_enc_blob = await encrypt_blob(
-			sym_key,
-			test_iv,
-			test_value,
-		);
-
-		const key = list_public_keys()[0];
-		const pubkey = await import_public_key(key);
-		const privkey = await import_private_key(key);
-		const pubkey_meta = import_key_meta("public", key);
-		console.log("using key", key, pubkey_meta.name);
-
-		const wrapped_key = await wrap_symmetrical_key(pubkey, sym_key);
-
-		console.log("wrapped key", wrapped_key);
-
-		const unwrapped_key = await unwrap_symmetrical_key(
-			privkey,
-			wrapped_key,
-		);
-
-		const unwrapped_enc_blob = await encrypt_blob(
-			unwrapped_key,
-			test_iv,
-			test_value,
-		);
-
-		console.log("unwrapped key", unwrapped_key);
-
-		console.log(
-			"original = unwrapped?",
-			arraysEqual(original_enc_blob, unwrapped_enc_blob),
-			{
-				original: original_enc_blob,
-				unwrapped: unwrapped_enc_blob,
-			},
-		);
-	};
+	import { trpc } from "$lib/trpc/client";
+	import { page } from "$app/stores";
+	import { derived, writable, type Writable } from "svelte/store";
+	import { onMount } from "svelte";
+	import { list_private_keys } from "$lib/client/key_management";
+
+	import AnimatedLoading from "$lib/icons/AnimatedLoading.svelte";
+	import { X } from "lucide-svelte";
+
+	import { FileCard } from "@/ui/file-card";
+
+	const rpc = trpc($page);
+
+	let userBlobsParams: Writable<{ kids: string[] }> = writable({
+		kids: [],
+	});
+	const userBlobsQuery = rpc.user.fetchUploadedFileMetadata.createQuery(
+		userBlobsParams,
+		derived(userBlobsParams, ($userBlobsParams) => {
+			return {
+				enabled: $userBlobsParams.kids.length > 0,
+			};
+		}),
+	);
+
+	onMount(() => {
+		$userBlobsParams.kids = list_private_keys();
+	});
 </script>
 
 <!--Home Page Test-->
 
 <Main class="min-h-app-main max-w-screen-lg">
-	<div>
-		<h1 class="text-3xl font-bold">Folders</h1>
-		<div>
-			<!-- Div to store each folder / folder button in-->
-			<Button variant="folder">Work</Button>
-			<Button variant="destructive">Personal</Button>
-			<Button variant="destructive">Photos</Button>
-			<Button variant="destructive">Bills</Button>
+	{#if $userBlobsQuery.isLoading}
+		<div class="mt-24 grid h-24 w-full place-items-center">
+			<AnimatedLoading class="size-12" />
+		</div>
+	{:else if $userBlobsQuery.isError}
+		<div class="mt-24 grid h-24 w-full place-items-center">
+			<X class="size-12 text-destructive-foreground" />
+			Failed to Load
 		</div>
-	</div>
-
-	<Button onclick={do_key_stuff}>Do key stuff</Button>
-
-	<!-- {#if $greeter.isLoading}
-	loading
-	{:else if $greeter.isError}
-	is Error
 	{:else}
-	{$greeter.data}
-	{/if} -->
-
-	<Button onclick={aaaa} variant="default">Button</Button>
-	<Button variant="destructive">AAAAAAAA</Button>
+		<div class="flex flex-row flex-wrap gap-4">
+			{#each $userBlobsQuery.data! as file (file.id)}
+				<FileCard {file} {rpc} />
+			{/each}
+		</div>
+	{/if}
 </Main>
diff --git a/src/routes/(app)/uploadFileFAB.svelte b/src/routes/(app)/uploadFileFAB.svelte
index dd7f1ff..6911fb6 100644
--- a/src/routes/(app)/uploadFileFAB.svelte
+++ b/src/routes/(app)/uploadFileFAB.svelte
@@ -30,6 +30,7 @@
 	import { filesize } from "filesize";
 
 	const rpc = trpc($page);
+	const utils = rpc.createUtils();
 
 	let dialogOpen = $state(false);
 
@@ -47,10 +48,12 @@
 		if (file_element) file_element.value = "";
 		keyToUse = "";
 		isUploading = false;
+
+		utils.user.fetchUploadedFileMetadata.refetch();
 	};
 
 	const startEverythingMutation =
-		rpc.keyManagement.uploadSymmetricKeyAndCreateEmptyBlob.createMutation();
+		rpc.blobManagement.uploadSymmetricKeyAndCreateEmptyBlob.createMutation();
 
 	let keyList: ReturnType<typeof import_key_meta>[] = $state([]);
 
@@ -59,39 +62,48 @@
 
 		isUploading = true;
 
-		console.group("Uploading Blob");
-		console.log("generating key");
-
-		const generated_key = await generate_symmetrical_key();
-		const wrapping_key = await import_public_key(keyToUse);
-
-		const wrapped_key = await wrap_symmetrical_key(
-			wrapping_key,
-			generated_key,
-		);
-		const iv = window.crypto.getRandomValues(new Uint8Array(96));
-
-		console.log("uploading sym key");
-
-		const file_id = await $startEverythingMutation.mutateAsync({
-			file_name: file.name,
-			key_b64: btoa(String.fromCharCode(...new Uint8Array(wrapped_key))),
-			iv_b64: btoa(String.fromCharCode(...new Uint8Array(iv))),
-			pubkey: keyToUse,
-		});
-
-		console.log("encrypting and uploading call");
-
-		const encryped_size = await encryptAndUpload(
-			iv,
-			generated_key,
-			file_id,
-		);
+		try {
+			console.group("Uploading Blob");
+			console.log("generating key");
+
+			const generated_key = await generate_symmetrical_key();
+			const wrapping_key = await import_public_key(keyToUse);
+
+			const wrapped_key = await wrap_symmetrical_key(
+				wrapping_key,
+				generated_key,
+			);
+			const iv = window.crypto.getRandomValues(new Uint8Array(96));
+
+			console.log("uploading sym key");
+
+			const file_id = await $startEverythingMutation.mutateAsync({
+				file_name: file.name,
+				key_b64: btoa(
+					String.fromCharCode(...new Uint8Array(wrapped_key)),
+				),
+				iv_b64: btoa(String.fromCharCode(...new Uint8Array(iv))),
+				pubkey: keyToUse,
+			});
+
+			console.log("encrypting and uploading call");
+
+			const encryped_size = await encryptAndUpload(
+				iv,
+				generated_key,
+				file_id,
+			);
+
+			toast.success(
+				`Uploaded file ${file.name} (${filesize(encryped_size)})`,
+			);
+			closeAndReset();
+		} catch (e) {
+			console.error(e);
+			toast.error("failed to upload file");
+		}
 
-		toast.success(
-			`Uploaded file ${file.name} (${filesize(encryped_size)})`,
-		);
-		closeAndReset();
+		console.groupEnd();
 	};
 
 	const encryptAndUpload = async (
@@ -137,8 +149,6 @@
 			console.info("uploaded success");
 		}
 
-		console.groupEnd();
-
 		return encrypted_size;
 	};
 
diff --git a/src/routes/api/blobs/[blob_id]/+server.ts b/src/routes/api/blobs/[blob_id]/+server.ts
index 9a758a5..04ab413 100644
--- a/src/routes/api/blobs/[blob_id]/+server.ts
+++ b/src/routes/api/blobs/[blob_id]/+server.ts
@@ -76,3 +76,40 @@ export const POST = (async ({ params, locals, request }: RequestEvent) => {
 		});
 	}
 }) satisfies RequestHandler;
+
+/**
+ * Since the blobs are encrypted, we don't really care about trying to protect them
+ *
+ * So we'll just make sure the user is logged in
+ */
+export const GET = (async ({ params, locals }: RequestEvent) => {
+	const { blob_id } = params;
+
+	if (!ULID_SCHEMA.safeParse(blob_id).success) {
+		return new Response(null, {
+			status: 400,
+		});
+	}
+
+	if (!(locals.session && locals.user)) {
+		return new Response(null, {
+			status: 401,
+		});
+	}
+
+	const result = await DB.select({
+		blob: encryptedBlobTable.blob,
+	})
+		.from(encryptedBlobTable)
+		.where(eq(encryptedBlobTable.kid, blob_id));
+
+	if (result.length === 1) {
+		return new Response(result[0].blob as Blob, {
+			status: 200,
+		});
+	} else {
+		return new Response(null, {
+			status: 404,
+		});
+	}
+}) satisfies RequestHandler;