diff --git a/src/lib/components/CatalogItem.svelte b/src/lib/components/CatalogItem.svelte
index e52f0d3..9cb2fb1 100644
--- a/src/lib/components/CatalogItem.svelte
+++ b/src/lib/components/CatalogItem.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
   import { catalog } from '$lib/catalog';
-  import { P } from 'flowbite-svelte';
 
   export let id: string;
 
diff --git a/src/lib/util/index.ts b/src/lib/util/index.ts
index e2b68eb..768a78e 100644
--- a/src/lib/util/index.ts
+++ b/src/lib/util/index.ts
@@ -2,3 +2,4 @@ export * from './snackbar';
 export * from './upload';
 export * from './misc';
 export * from './modals';
+export * from './zip'
\ No newline at end of file
diff --git a/src/lib/util/zip.ts b/src/lib/util/zip.ts
new file mode 100644
index 0000000..0a9ae54
--- /dev/null
+++ b/src/lib/util/zip.ts
@@ -0,0 +1,56 @@
+import type { Volume } from "$lib/types";
+import {
+  BlobReader,
+  BlobWriter,
+  TextReader,
+  ZipWriter,
+} from "@zip.js/zip.js";
+
+async function zipVolumes(manga: Volume[]) {
+  const volumeZips = []
+
+  for (const volume of manga) {
+    const files = Object.values(volume.files);
+    const zipWriter = new ZipWriter(new BlobWriter("application/zip"));
+
+    const promises = files.map((file) => {
+      return zipWriter.add(file.name, new BlobReader(file))
+    })
+
+
+    await Promise.all(promises);
+
+
+    volumeZips.push({
+      zipName: volume.volumeName,
+      zipBlob: await zipWriter.close(),
+      mokuroData: JSON.stringify(volume.mokuroData)
+    });
+  }
+
+  return volumeZips;
+}
+
+export async function zipManga(manga: Volume[]) {
+  const volumeZips = await zipVolumes(manga)
+  const zipWriter = new ZipWriter(new BlobWriter("application/zip"));
+
+
+  const promises = volumeZips.map((volumeZip) => {
+    return [
+      zipWriter.add(`${volumeZip.zipName}.mokuro`, new TextReader(volumeZip.mokuroData)),
+      zipWriter.add(`${volumeZip.zipName}.zip`, new BlobReader(volumeZip.zipBlob))
+    ]
+  })
+
+  await Promise.all(promises);
+
+  const zipFileBlob = await zipWriter.close();
+
+  const link = document.createElement('a');
+  link.href = URL.createObjectURL(zipFileBlob);
+  link.download = `${manga[0].mokuroData.title}.zip`;
+  link.click();
+
+  return false
+}
\ No newline at end of file
diff --git a/src/routes/[manga]/+page.svelte b/src/routes/[manga]/+page.svelte
index 1297a9c..33d2996 100644
--- a/src/routes/[manga]/+page.svelte
+++ b/src/routes/[manga]/+page.svelte
@@ -2,9 +2,9 @@
   import { catalog } from '$lib/catalog';
   import { goto } from '$app/navigation';
   import VolumeItem from '$lib/components/VolumeItem.svelte';
-  import { Button, Listgroup } from 'flowbite-svelte';
+  import { Button, Listgroup, Progressbar, Spinner } from 'flowbite-svelte';
   import { db } from '$lib/catalog/db';
-  import { promptConfirmation } from '$lib/util';
+  import { promptConfirmation, zipManga } from '$lib/util';
   import { page } from '$app/stores';
   import type { Volume } from '$lib/types';
   import { deleteVolume, volumes } from '$lib/settings';
@@ -38,6 +38,8 @@
       { timeReadInMinutes: 0, chars: 0, completed: 0 }
     );
 
+  $: loading = false;
+
   async function confirmDelete() {
     const title = manga?.[0].mokuroData.title_uuid;
     manga?.forEach((vol) => {
@@ -52,6 +54,13 @@
   function onDelete() {
     promptConfirmation('Are you sure you want to delete this manga?', confirmDelete);
   }
+
+  async function onExtract() {
+    if (manga) {
+      loading = true;
+      loading = await zipManga(manga);
+    }
+  }
 </script>
 
 <svelte:head>
@@ -70,6 +79,9 @@
       </div>
       <div>
         <Button color="alternative" on:click={onDelete}>Remove manga</Button>
+        <Button color="light" on:click={onExtract} disabled={loading}>
+          {loading ? 'Extracting...' : 'Extract manga'}
+        </Button>
       </div>
     </div>
     <Listgroup items={manga} let:item active class="flex-1 h-full w-full">