diff --git a/src/lib/catalog/db.ts b/src/lib/catalog/db.ts
index 57add25..88ee936 100644
--- a/src/lib/catalog/db.ts
+++ b/src/lib/catalog/db.ts
@@ -1,8 +1,8 @@
-import type { Volume } from '$lib/upload';
+import type { Volume } from '$lib/types';
 import Dexie, { type Table } from 'dexie';
 
 export interface Catalog {
-  id?: number;
+  id: string;
   manga: Volume[];
 }
 
@@ -12,7 +12,7 @@ export class CatalogDexie extends Dexie {
   constructor() {
     super('mokuro');
     this.version(1).stores({
-      catalog: '++id, manga'
+      catalog: 'id, manga'
     });
   }
 }
diff --git a/src/lib/catalog/index.ts b/src/lib/catalog/index.ts
index b9d86bf..455ad2a 100644
--- a/src/lib/catalog/index.ts
+++ b/src/lib/catalog/index.ts
@@ -1,5 +1,8 @@
-import type { Volume } from "$lib/upload";
+import type { Volume } from "$lib/types";
 import { writable } from "svelte/store";
+import { db } from "$lib/catalog/db";
+import { liveQuery } from "dexie";
 
 export const currentManga = writable<Volume[] | undefined>(undefined);
 export const currentVolume = writable<Volume | undefined>(undefined);
+export const catalog = liveQuery(() => db.catalog.toArray());
\ No newline at end of file
diff --git a/src/lib/catalog/test.ts b/src/lib/catalog/test.ts
deleted file mode 100644
index 30c5035..0000000
--- a/src/lib/catalog/test.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { writable } from "svelte/store";
-import { db } from "$lib/catalog/db";
-import type { Volume } from "$lib/upload";
-import { liveQuery } from "dexie";
-
-
-
-
-export const catalog = liveQuery(() => db.catalog.toArray());
diff --git a/src/lib/components/Catalog.svelte b/src/lib/components/Catalog.svelte
index 61b7777..c9bbef1 100644
--- a/src/lib/components/Catalog.svelte
+++ b/src/lib/components/Catalog.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { catalog } from '$lib/catalog/test';
+	import { catalog } from '$lib/catalog';
 	import CatalogItem from './CatalogItem.svelte';
 </script>
 
diff --git a/src/lib/components/CatalogItem.svelte b/src/lib/components/CatalogItem.svelte
index c5d8497..3f3814b 100644
--- a/src/lib/components/CatalogItem.svelte
+++ b/src/lib/components/CatalogItem.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { currentManga } from '$lib/catalog';
-	import type { Volume } from '$lib/upload';
+	import type { Volume } from '$lib/types';
 	export let manga: Volume[];
 	const { volumeName, files, mokuroData } = manga[0];
 
diff --git a/src/lib/components/Reader/MangaPage.svelte b/src/lib/components/Reader/MangaPage.svelte
index d695de7..ced7d5c 100644
--- a/src/lib/components/Reader/MangaPage.svelte
+++ b/src/lib/components/Reader/MangaPage.svelte
@@ -1,18 +1,5 @@
 <script lang="ts">
-	type Block = {
-		box: number[];
-		vertical: boolean;
-		fontSize: number;
-		lines: string[];
-	};
-
-	type Page = {
-		version?: string;
-		img_width: number;
-		img_height: number;
-		blocks: Block[];
-		imgPath: string;
-	};
+	import type { Page } from '$lib/types';
 
 	export let page: Page;
 
@@ -28,7 +15,7 @@
 
 	$: textBoxes = page.blocks.map((block) => {
 		const { img_height, img_width } = page;
-		const { box, fontSize, lines, vertical } = block;
+		const { box, font_size, lines, vertical } = block;
 
 		let [_xmin, _ymin, _xmax, _ymax] = box;
 
@@ -46,7 +33,7 @@
 			top: `${ymin}px`,
 			width: `${width}px`,
 			height: `${height}px`,
-			fontSize: `${fontSize}px`,
+			fontSize: `${font_size}px`,
 			writingMode: vertical ? 'vertical-rl' : 'horizontal-tb',
 			lines
 		};
diff --git a/src/lib/components/VolumeItem.svelte b/src/lib/components/VolumeItem.svelte
index 20fc67a..2a776ac 100644
--- a/src/lib/components/VolumeItem.svelte
+++ b/src/lib/components/VolumeItem.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { page } from '$app/stores';
 	import { currentVolume } from '$lib/catalog';
-	import type { Volume } from '$lib/upload';
+	import type { Volume } from '$lib/types';
 
 	export let volume: Volume;
 	const { volumeName, files } = volume;
diff --git a/src/lib/types/index.ts b/src/lib/types/index.ts
new file mode 100644
index 0000000..52f7042
--- /dev/null
+++ b/src/lib/types/index.ts
@@ -0,0 +1,29 @@
+export type Block = {
+  box: number[];
+  vertical: boolean;
+  font_size: number;
+  lines: string[];
+};
+
+export type Page = {
+  version: string;
+  img_width: number;
+  img_height: number;
+  blocks: Block[];
+  imgPath: string;
+};
+
+export type MokuroData = {
+  version: string;
+  title: string;
+  title_uuid: string;
+  volume: string;
+  volume_uuid: string;
+  pages: Page[];
+}
+
+export type Volume = {
+  mokuroData: MokuroData;
+  volumeName: string;
+  files: Record<string, File>;
+}
\ No newline at end of file
diff --git a/src/lib/upload/index.ts b/src/lib/upload/index.ts
index 0382a57..10c9164 100644
--- a/src/lib/upload/index.ts
+++ b/src/lib/upload/index.ts
@@ -1,19 +1,29 @@
 import { db } from "$lib/catalog/db";
+import type { Volume } from "$lib/types";
+import { showSnackbar } from "$lib/util/snackbar";
 import { requestPersistentStorage } from "$lib/util/upload";
-import { BlobReader, ZipReader } from "@zip.js/zip.js";
-
-export type Volume = {
-  mokuroData: any;
-  volumeName: string;
-  archiveFile?: File | undefined;
-  files?: Record<string, File>;
-}
+import { BlobReader, ZipReader, BlobWriter, getMimeType } from "@zip.js/zip.js";
 
 export async function unzipManga(file: File) {
   const zipFileReader = new BlobReader(file);
   const zipReader = new ZipReader(zipFileReader);
 
-  return await zipReader.getEntries()
+  const entries = await zipReader.getEntries()
+  const unzippedFiles: Record<string, File> = {};
+
+
+  for (const entry of entries) {
+    const mime = getMimeType(entry.filename);
+    if (mime === 'image/jpeg' || mime === 'image/png') {
+      const blob = await entry.getData?.(new BlobWriter(mime))
+      if (blob) {
+        const file = new File([blob], entry.filename, { type: mime })
+        unzippedFiles[entry.filename] = file
+      }
+    }
+  }
+
+  return unzippedFiles;
 }
 
 function getDetails(file: File) {
@@ -26,11 +36,13 @@ function getDetails(file: File) {
 }
 
 
-export function processVolumes(volumes: Volume[]) {
-  volumes.map(({ mokuroData, volumeName, archiveFile, files }) => {
-    console.log(mokuroData, volumeName, archiveFile, files);
-  })
-}
+// export async function processVolumes(volumes: Volume[]) {
+//   for (const { mokuroData, volumeName, archiveFile, files } of volumes) {
+//     const { title_uuid } = mokuroData
+//   }
+
+
+// }
 
 export async function processFiles(fileList: FileList) {
   const files = [...fileList]
@@ -71,10 +83,13 @@ export async function processFiles(fileList: FileList) {
     }
 
     if (zipTypes.includes(ext)) {
+      const unzippedFiles = await unzipManga(file)
+
       volumes[filename] = {
         ...volumes[filename],
-        archiveFile: file
+        files: unzippedFiles
       }
+
       continue;
     }
   }
@@ -82,8 +97,25 @@ export async function processFiles(fileList: FileList) {
   const vols = Object.values(volumes);
 
   if (vols.length > 0) {
-    await requestPersistentStorage();
-    await processVolumes(vols)
-    await db.catalog.put({ manga: vols })
+    const valid = vols.map((vol) => {
+      const { files, mokuroData, volumeName } = vol
+      if (!mokuroData || !volumeName) {
+        showSnackbar('Missing .mokuro file')
+        return false;
+      }
+
+      if (!files) {
+        showSnackbar('Missing image files')
+        return false;
+      }
+
+      return true
+    })
+
+    if (!valid.includes(false)) {
+      await requestPersistentStorage();
+      await db.catalog.put({ id: vols[0].mokuroData.title_uuid, manga: vols })
+      showSnackbar('Catalog updated successfully')
+    }
   }
 }
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 3fe6c62..7802e77 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
 	import { db } from '$lib/catalog/db';
-	import { catalog } from '$lib/catalog/test';
 	import Button from '$lib/components/Button.svelte';
 	import Catalog from '$lib/components/Catalog.svelte';
 	import Modal from '$lib/components/Modal.svelte';
diff --git a/src/routes/upload/+page.svelte b/src/routes/upload/+page.svelte
index 21a1578..60f3478 100644
--- a/src/routes/upload/+page.svelte
+++ b/src/routes/upload/+page.svelte
@@ -1,6 +1,4 @@
 <script lang="ts">
-	import { db } from '$lib/catalog/db';
-	import Button from '$lib/components/Button.svelte';
 	import Catalog from '$lib/components/Catalog.svelte';
 	import FileUpload from '$lib/components/FileUpload.svelte';
 	import { processFiles } from '$lib/upload';