diff --git a/src-tauri/Cargo.lock b/src-tauri/Cargo.lock
index 47a9903..9717eb6 100644
--- a/src-tauri/Cargo.lock
+++ b/src-tauri/Cargo.lock
@@ -26,6 +26,12 @@ dependencies = [
  "memchr",
 ]
 
+[[package]]
+name = "aligned-vec"
+version = "0.5.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "4aa90d7ce82d4be67b64039a3d588d38dbcc6736577de4a847025ce5b0c468d1"
+
 [[package]]
 name = "alloc-no-stdlib"
 version = "2.0.4"
@@ -71,6 +77,23 @@ dependencies = [
  "derive_arbitrary",
 ]
 
+[[package]]
+name = "arg_enum_proc_macro"
+version = "0.3.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0ae92a5119aa49cdbcf6b9f893fe4e1d98b04ccbf82ee0584ad948a44a734dea"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.87",
+]
+
+[[package]]
+name = "arrayvec"
+version = "0.7.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7c02d123df017efcdfbd739ef81735b36c5ba83ec3c59c80a9d7ecc718f92e50"
+
 [[package]]
 name = "ashpd"
 version = "0.9.2"
@@ -246,6 +269,29 @@ version = "1.4.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "ace50bade8e6234aa140d9a2f552bbee1db4d353f69b8217bc503490fc1a9f26"
 
+[[package]]
+name = "av1-grain"
+version = "0.2.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6678909d8c5d46a42abcf571271e15fdbc0a225e3646cf23762cd415046c78bf"
+dependencies = [
+ "anyhow",
+ "arrayvec",
+ "log",
+ "nom",
+ "num-rational",
+ "v_frame",
+]
+
+[[package]]
+name = "avif-serialize"
+version = "0.8.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e335041290c43101ca215eed6f43ec437eb5a42125573f600fc3fa42b9bddd62"
+dependencies = [
+ "arrayvec",
+]
+
 [[package]]
 name = "backtrace"
 version = "0.3.74"
@@ -273,6 +319,12 @@ version = "0.22.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "72b3254f16251a8381aa12e40e3c4d2f0199f8c6508fbecb9d91f575e0fbb8c6"
 
+[[package]]
+name = "bit_field"
+version = "0.10.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "dc827186963e592360843fb5ba4b973e145841266c1357f7180c43526f2e5b61"
+
 [[package]]
 name = "bitflags"
 version = "1.3.2"
@@ -288,6 +340,12 @@ dependencies = [
  "serde",
 ]
 
+[[package]]
+name = "bitstream-io"
+version = "2.6.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6099cdc01846bc367c4e7dd630dc5966dccf36b652fae7a74e17b640411a91b2"
+
 [[package]]
 name = "block"
 version = "0.1.6"
@@ -346,6 +404,12 @@ dependencies = [
  "alloc-stdlib",
 ]
 
+[[package]]
+name = "built"
+version = "0.7.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c360505aed52b7ec96a3636c3f039d99103c37d1d9b4f7a8c743d3ea9ffcd03b"
+
 [[package]]
 name = "bumpalo"
 version = "3.16.0"
@@ -364,6 +428,12 @@ version = "1.5.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "1fd0f2584146f6f2ef48085050886acf353beff7305ebd1ae69500e27c67f64b"
 
+[[package]]
+name = "byteorder-lite"
+version = "0.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8f1fe948ff07f4bd06c30984e69f5b4899c516a3ef74f34df92a2df2ab535495"
+
 [[package]]
 name = "bytes"
 version = "1.8.0"
@@ -446,6 +516,8 @@ version = "1.2.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "fd9de9f2205d5ef3fd67e685b0df337994ddd4495e2a28d185500d0e1edfea47"
 dependencies = [
+ "jobserver",
+ "libc",
  "shlex",
 ]
 
@@ -531,6 +603,12 @@ dependencies = [
  "objc",
 ]
 
+[[package]]
+name = "color_quant"
+version = "1.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3d7b894f5411737b7867f4827955924d7c254fc9f4d91a6aad6b097804b1018b"
+
 [[package]]
 name = "combine"
 version = "4.6.7"
@@ -633,12 +711,37 @@ dependencies = [
  "crossbeam-utils",
 ]
 
+[[package]]
+name = "crossbeam-deque"
+version = "0.8.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "613f8cc01fe9cf1a3eb3d7f488fd2fa8388403e97039e2f73692932e291a770d"
+dependencies = [
+ "crossbeam-epoch",
+ "crossbeam-utils",
+]
+
+[[package]]
+name = "crossbeam-epoch"
+version = "0.9.18"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5b82ac4a3c2ca9c3460964f020e1402edd5753411d7737aa39c3714ad1b5420e"
+dependencies = [
+ "crossbeam-utils",
+]
+
 [[package]]
 name = "crossbeam-utils"
 version = "0.8.20"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "22ec99545bb0ed0ea7bb9b8e1e9122ea386ff8a48c0922e43f36d45ab09e0e80"
 
+[[package]]
+name = "crunchy"
+version = "0.2.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7a81dae078cea95a014a339291cec439d2f232ebe854a9d672b796c6afafa9b7"
+
 [[package]]
 name = "crypto-common"
 version = "0.1.6"
@@ -888,6 +991,12 @@ version = "1.0.17"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "0d6ef0072f8a535281e4876be788938b528e9a1d43900b82c2569af7da799125"
 
+[[package]]
+name = "either"
+version = "1.13.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "60b1af1c220855b6ceac025d3f6ecdd2b7c4894bfe9cd9bda4fbb4bc7c0d4cf0"
+
 [[package]]
 name = "embed-resource"
 version = "2.5.1"
@@ -991,6 +1100,21 @@ dependencies = [
  "pin-project-lite",
 ]
 
+[[package]]
+name = "exr"
+version = "1.73.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f83197f59927b46c04a183a619b7c29df34e63e63c7869320862268c0ef687e0"
+dependencies = [
+ "bit_field",
+ "half",
+ "lebe",
+ "miniz_oxide",
+ "rayon-core",
+ "smallvec",
+ "zune-inflate",
+]
+
 [[package]]
 name = "fastrand"
 version = "2.2.0"
@@ -1317,6 +1441,16 @@ dependencies = [
  "wasm-bindgen",
 ]
 
+[[package]]
+name = "gif"
+version = "0.13.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3fb2d69b19215e18bb912fa30f7ce15846e301408695e44e0ef719f1da9e19f2"
+dependencies = [
+ "color_quant",
+ "weezl",
+]
+
 [[package]]
 name = "gimli"
 version = "0.31.1"
@@ -1471,6 +1605,16 @@ dependencies = [
  "syn 2.0.87",
 ]
 
+[[package]]
+name = "half"
+version = "2.4.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6dd08c532ae367adf81c312a4580bc67f1d0fe8bc9c460520283f4c0ff277888"
+dependencies = [
+ "cfg-if",
+ "crunchy",
+]
+
 [[package]]
 name = "hashbrown"
 version = "0.12.3"
@@ -1801,6 +1945,45 @@ dependencies = [
  "icu_properties",
 ]
 
+[[package]]
+name = "image"
+version = "0.25.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "cd6f44aed642f18953a158afeb30206f4d50da59fbc66ecb53c66488de73563b"
+dependencies = [
+ "bytemuck",
+ "byteorder-lite",
+ "color_quant",
+ "exr",
+ "gif",
+ "image-webp",
+ "num-traits",
+ "png",
+ "qoi",
+ "ravif",
+ "rayon",
+ "rgb",
+ "tiff",
+ "zune-core",
+ "zune-jpeg",
+]
+
+[[package]]
+name = "image-webp"
+version = "0.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e031e8e3d94711a9ccb5d6ea357439ef3dcbed361798bd4071dc4d9793fbe22f"
+dependencies = [
+ "byteorder-lite",
+ "quick-error",
+]
+
+[[package]]
+name = "imgref"
+version = "1.11.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d0263a3d970d5c054ed9312c0057b4f3bde9c0b33836d3637361d4a9e6e7a408"
+
 [[package]]
 name = "indexmap"
 version = "1.9.3"
@@ -1841,6 +2024,17 @@ dependencies = [
  "cfg-if",
 ]
 
+[[package]]
+name = "interpolate_name"
+version = "0.2.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c34819042dc3d3971c46c2190835914dfbe0c3c13f61449b2997f4e9722dfa60"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.87",
+]
+
 [[package]]
 name = "ipnet"
 version = "2.10.1"
@@ -1866,6 +2060,15 @@ dependencies = [
  "once_cell",
 ]
 
+[[package]]
+name = "itertools"
+version = "0.12.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ba291022dbbd398a455acf126c1e341954079855bc60dfdda641363bd6922569"
+dependencies = [
+ "either",
+]
+
 [[package]]
 name = "itoa"
 version = "0.4.8"
@@ -1923,6 +2126,21 @@ version = "0.3.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "8eaf4bc02d17cbdd7ff4c7438cafcdf7fb9a4613313ad11b4f8fefe7d3fa0130"
 
+[[package]]
+name = "jobserver"
+version = "0.1.32"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "48d1dbcbbeb6a7fec7e059840aa538bd62aaccf972c7346c4d9d2059312853d0"
+dependencies = [
+ "libc",
+]
+
+[[package]]
+name = "jpeg-decoder"
+version = "0.3.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f5d4a7da358eff58addd2877a45865158f0d78c911d43a5784ceb7bbf52833b0"
+
 [[package]]
 name = "js-sys"
 version = "0.3.72"
@@ -1984,6 +2202,12 @@ version = "1.5.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "bbd2bcb4c963f2ddae06a2efc7e9f3591312473c50c6685e1f298068316e66fe"
 
+[[package]]
+name = "lebe"
+version = "0.5.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "03087c2bad5e1034e8cace5926dec053fb3790248370865f5117a7d0213354c8"
+
 [[package]]
 name = "libappindicator"
 version = "0.9.0"
@@ -2014,6 +2238,16 @@ version = "0.2.162"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "18d287de67fe55fd7e1581fe933d965a5a9477b38e949cfa9f8574ef01506398"
 
+[[package]]
+name = "libfuzzer-sys"
+version = "0.4.8"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9b9569d2f74e257076d8c6bfa73fb505b46b851e51ddaecc825944aa3bed17fa"
+dependencies = [
+ "arbitrary",
+ "cc",
+]
+
 [[package]]
 name = "libloading"
 version = "0.7.4"
@@ -2063,6 +2297,15 @@ version = "0.4.22"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "a7a70ba024b9dc04c27ea2f0c0548feb474ec5c54bba33a7f72f873a39d07b24"
 
+[[package]]
+name = "loop9"
+version = "0.1.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0fae87c125b03c1d2c0150c90365d7d6bcc53fb73a9acaef207d2d065860f062"
+dependencies = [
+ "imgref",
+]
+
 [[package]]
 name = "mac"
 version = "0.1.1"
@@ -2098,6 +2341,16 @@ version = "0.1.10"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "2532096657941c2fea9c289d370a250971c689d4f143798ff67113ec042024a5"
 
+[[package]]
+name = "maybe-rayon"
+version = "0.1.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8ea1f30cedd69f0a2954655f7188c6a834246d2bcf1e315e2ac40c4b24dc9519"
+dependencies = [
+ "cfg-if",
+ "rayon",
+]
+
 [[package]]
 name = "memchr"
 version = "2.7.4"
@@ -2119,6 +2372,12 @@ version = "0.3.17"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "6877bb514081ee2a7ff5ef9de3281f14a4dd4bceac4c09388074a6b5df8a139a"
 
+[[package]]
+name = "minimal-lexical"
+version = "0.2.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "68354c5c6bd36d73ff3feceb05efa59b6acb7626617f4962be322a825e61f79a"
+
 [[package]]
 name = "minisign-verify"
 version = "0.2.2"
@@ -2221,12 +2480,69 @@ version = "0.1.14"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "72ef4a56884ca558e5ddb05a1d1e7e1bfd9a68d9ed024c21704cc98872dae1bb"
 
+[[package]]
+name = "nom"
+version = "7.1.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d273983c5a657a70a3e8f2a01329822f3b8c8172b73826411a55751e404a0a4a"
+dependencies = [
+ "memchr",
+ "minimal-lexical",
+]
+
+[[package]]
+name = "noop_proc_macro"
+version = "0.3.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0676bb32a98c1a483ce53e500a81ad9c3d5b3f7c920c28c24e9cb0980d0b5bc8"
+
+[[package]]
+name = "num-bigint"
+version = "0.4.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a5e44f723f1133c9deac646763579fdb3ac745e418f2a7af9cd0c431da1f20b9"
+dependencies = [
+ "num-integer",
+ "num-traits",
+]
+
 [[package]]
 name = "num-conv"
 version = "0.1.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "51d515d32fb182ee37cda2ccdcb92950d6a3c2893aa280e540671c2cd0f3b1d9"
 
+[[package]]
+name = "num-derive"
+version = "0.4.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ed3955f1a9c7c0c15e092f9c887db08b1fc683305fdf6eb6684f22555355e202"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.87",
+]
+
+[[package]]
+name = "num-integer"
+version = "0.1.46"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7969661fd2958a5cb096e56c8e1ad0444ac2bbcd0061bd28660485a44879858f"
+dependencies = [
+ "num-traits",
+]
+
+[[package]]
+name = "num-rational"
+version = "0.4.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f83d14da390562dca69fc84082e73e548e1ad308d24accdedd2720017cb37824"
+dependencies = [
+ "num-bigint",
+ "num-integer",
+ "num-traits",
+]
+
 [[package]]
 name = "num-traits"
 version = "0.2.19"
@@ -2591,6 +2907,12 @@ dependencies = [
  "windows-targets 0.52.6",
 ]
 
+[[package]]
+name = "paste"
+version = "1.0.15"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "57c0d7b74b563b49d38dae00a0c37d4d6de9b432382b2892f0574ddcae73fd0a"
+
 [[package]]
 name = "pathdiff"
 version = "0.2.2"
@@ -2887,6 +3209,40 @@ dependencies = [
  "unicode-ident",
 ]
 
+[[package]]
+name = "profiling"
+version = "1.0.16"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "afbdc74edc00b6f6a218ca6a5364d6226a259d4b8ea1af4a0ea063f27e179f4d"
+dependencies = [
+ "profiling-procmacros",
+]
+
+[[package]]
+name = "profiling-procmacros"
+version = "1.0.16"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a65f2e60fbf1063868558d69c6beacf412dc755f9fc020f514b7955fc914fe30"
+dependencies = [
+ "quote",
+ "syn 2.0.87",
+]
+
+[[package]]
+name = "qoi"
+version = "0.4.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7f6d64c71eb498fe9eae14ce4ec935c555749aef511cca85b5568910d6e48001"
+dependencies = [
+ "bytemuck",
+]
+
+[[package]]
+name = "quick-error"
+version = "2.0.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a993555f31e5a609f617c12db6250dedcac1b0a85076912c436e6fc9b2c8e6a3"
+
 [[package]]
 name = "quick-xml"
 version = "0.32.0"
@@ -2909,6 +3265,7 @@ dependencies = [
 name = "quilter"
 version = "0.1.0"
 dependencies = [
+ "image",
  "serde",
  "serde_json",
  "tauri",
@@ -3061,12 +3418,82 @@ dependencies = [
  "rand_core 0.5.1",
 ]
 
+[[package]]
+name = "rav1e"
+version = "0.7.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "cd87ce80a7665b1cce111f8a16c1f3929f6547ce91ade6addf4ec86a8dda5ce9"
+dependencies = [
+ "arbitrary",
+ "arg_enum_proc_macro",
+ "arrayvec",
+ "av1-grain",
+ "bitstream-io",
+ "built",
+ "cfg-if",
+ "interpolate_name",
+ "itertools",
+ "libc",
+ "libfuzzer-sys",
+ "log",
+ "maybe-rayon",
+ "new_debug_unreachable",
+ "noop_proc_macro",
+ "num-derive",
+ "num-traits",
+ "once_cell",
+ "paste",
+ "profiling",
+ "rand 0.8.5",
+ "rand_chacha 0.3.1",
+ "simd_helpers",
+ "system-deps",
+ "thiserror 1.0.69",
+ "v_frame",
+ "wasm-bindgen",
+]
+
+[[package]]
+name = "ravif"
+version = "0.11.11"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2413fd96bd0ea5cdeeb37eaf446a22e6ed7b981d792828721e74ded1980a45c6"
+dependencies = [
+ "avif-serialize",
+ "imgref",
+ "loop9",
+ "quick-error",
+ "rav1e",
+ "rayon",
+ "rgb",
+]
+
 [[package]]
 name = "raw-window-handle"
 version = "0.6.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "20675572f6f24e9e76ef639bc5552774ed45f1c30e2951e1e99c59888861c539"
 
+[[package]]
+name = "rayon"
+version = "1.10.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b418a60154510ca1a002a752ca9714984e21e4241e804d32555251faf8b78ffa"
+dependencies = [
+ "either",
+ "rayon-core",
+]
+
+[[package]]
+name = "rayon-core"
+version = "1.12.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1465873a3dfdaa8ae7cb14b4383657caab0b3e8a0aa9ae8e04b044854c8dfce2"
+dependencies = [
+ "crossbeam-deque",
+ "crossbeam-utils",
+]
+
 [[package]]
 name = "redox_syscall"
 version = "0.5.7"
@@ -3183,6 +3610,12 @@ dependencies = [
  "windows-sys 0.48.0",
 ]
 
+[[package]]
+name = "rgb"
+version = "0.8.50"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "57397d16646700483b67d2dd6511d79318f9d057fdbd21a4066aeac8b41d310a"
+
 [[package]]
 name = "ring"
 version = "0.17.8"
@@ -3559,6 +3992,15 @@ version = "0.3.7"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "d66dc143e6b11c1eddc06d5c423cfc97062865baf299914ab64caa38182078fe"
 
+[[package]]
+name = "simd_helpers"
+version = "0.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "95890f873bec569a0362c235787f3aca6e1e887302ba4840839bcc6459c42da6"
+dependencies = [
+ "quote",
+]
+
 [[package]]
 name = "siphasher"
 version = "0.3.11"
@@ -4219,6 +4661,17 @@ dependencies = [
  "syn 2.0.87",
 ]
 
+[[package]]
+name = "tiff"
+version = "0.9.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ba1310fcea54c6a9a4fd1aad794ecc02c31682f6bfbecdf460bf19533eed1e3e"
+dependencies = [
+ "flate2",
+ "jpeg-decoder",
+ "weezl",
+]
+
 [[package]]
 name = "time"
 version = "0.3.36"
@@ -4573,6 +5026,17 @@ dependencies = [
  "serde",
 ]
 
+[[package]]
+name = "v_frame"
+version = "0.3.8"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d6f32aaa24bacd11e488aa9ba66369c7cd514885742c9fe08cfe85884db3e92b"
+dependencies = [
+ "aligned-vec",
+ "num-traits",
+ "wasm-bindgen",
+]
+
 [[package]]
 name = "version-compare"
 version = "0.2.0"
@@ -4885,6 +5349,12 @@ dependencies = [
  "windows-core 0.58.0",
 ]
 
+[[package]]
+name = "weezl"
+version = "0.1.8"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "53a85b86a771b1c87058196170769dd264f66c0782acf1ae6cc51bfd64b39082"
+
 [[package]]
 name = "winapi"
 version = "0.3.9"
@@ -5521,6 +5991,30 @@ dependencies = [
  "thiserror 1.0.69",
 ]
 
+[[package]]
+name = "zune-core"
+version = "0.4.12"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3f423a2c17029964870cfaabb1f13dfab7d092a62a29a89264f4d36990ca414a"
+
+[[package]]
+name = "zune-inflate"
+version = "0.2.54"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "73ab332fe2f6680068f3582b16a24f90ad7096d5d39b974d1c0aff0125116f02"
+dependencies = [
+ "simd-adler32",
+]
+
+[[package]]
+name = "zune-jpeg"
+version = "0.4.13"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "16099418600b4d8f028622f73ff6e3deaabdff330fb9a2a131dea781ee8b0768"
+dependencies = [
+ "zune-core",
+]
+
 [[package]]
 name = "zvariant"
 version = "4.0.0"
diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
index 18b8187..1ec321b 100644
--- a/src-tauri/Cargo.toml
+++ b/src-tauri/Cargo.toml
@@ -24,6 +24,7 @@ serde = { version = "1", features = ["derive"] }
 serde_json = "1"
 tauri-plugin-dialog = "2"
 tauri-plugin-process = "2"
+image = "0.25.5"
 
 [target.'cfg(not(any(target_os = "android", target_os = "ios")))'.dependencies]
 tauri-plugin-updater = "2"
diff --git a/src-tauri/src/commands.rs b/src-tauri/src/commands.rs
index 14652f6..a569d6f 100644
--- a/src-tauri/src/commands.rs
+++ b/src-tauri/src/commands.rs
@@ -1,5 +1,6 @@
+use image::{GenericImageView, ImageBuffer};
 use serde::Serialize;
-use std::fs;
+use std::{fs, path::Path};
 
 #[derive(Serialize)]
 pub struct FilesMap {
@@ -63,35 +64,106 @@ pub fn delete_move_files_in_folder(folder: String, files: Vec<String>, delete: b
 
 #[tauri::command]
 pub fn sort_files(frame_folders: Vec<String>, final_folder: String, views: usize) {
+    println!("Folders: {:?}", frame_folders);
     let no_of_folders: usize = frame_folders.len();
-    for i in 0..no_of_folders {
-        for folder in &frame_folders {
-            let files = fs::read_dir(folder.clone()).unwrap();
-            for file in files {
-                let filename = file.unwrap().file_name();
-                let current_view = filename
-                    .to_str()
-                    .unwrap()
-                    .split("_v")
-                    .collect::<Vec<&str>>()[1];
-                let current_view = current_view.split(".").collect::<Vec<&str>>()[0];
-                let current_view = match current_view.parse::<usize>() {
-                    Ok(view) => view,
-                    Err(_) => {
-                        println!("Failed to parse view: {}", current_view);
-                        continue;
+    for (i, folder) in frame_folders.iter().enumerate() {
+        println!("Sorting folder: {}", folder);
+        let files = fs::read_dir(folder).unwrap();
+        for file in files {
+            let filename = file.unwrap().file_name();
+            let current_view = filename
+                .to_str()
+                .unwrap()
+                .split("_v")
+                .collect::<Vec<&str>>()[1];
+            let current_view = current_view.split(".").collect::<Vec<&str>>()[0];
+            let current_view = match current_view.parse::<usize>() {
+                Ok(view) => view,
+                Err(_) => {
+                    println!("Failed to parse view: {}", current_view);
+                    continue;
+                }
+            };
+            if current_view < (views / no_of_folders) * (i + 1)
+                && current_view >= (views / no_of_folders) * i
+            {
+                let original_file = Path::new(&folder).join(&filename);
+                let original_file = original_file.to_str().unwrap();
+                let path = Path::new(&final_folder).join(&filename);
+                let path = path.to_str().unwrap();
+                fs::copy(original_file, path).unwrap();
+            }
+        }
+    }
+}
+
+#[tauri::command]
+pub fn make_quilt(sorted_folder: String, output_folder: String, columns: usize, rows: usize) {
+    let quilt_size = columns * rows;
+
+    let mut quilt_layout: Vec<Vec<String>> = vec![vec!['-'.to_string(); columns]; rows];
+    let mut current_row = 0;
+    let mut current_column = 0;
+
+    let mut dir: Vec<_> = fs::read_dir(sorted_folder)
+        .unwrap()
+        .map(|entry| entry.unwrap().path())
+        .collect();
+    dir.sort_by(|a, b| a.file_name().unwrap().cmp(b.file_name().unwrap()));
+    let no_of_quilts = dir.len() / quilt_size;
+
+    for quilt_i in 0..no_of_quilts {
+        for i in 0..quilt_size {
+            let filename = dir[i + quilt_size * quilt_i].to_str().unwrap().to_string();
+            if filename.contains("_v") {
+                quilt_layout[current_row][current_column] = filename;
+                current_column += 1;
+                if current_column == columns {
+                    current_column = 0;
+                    current_row += 1;
+                }
+            } else {
+                println!("INVALID FILE FOUND '_v': {}", filename);
+            }
+        }
+        current_row = 0;
+
+        let first_img_path = &quilt_layout[0][0];
+        let first_img = image::open(first_img_path).unwrap();
+        let (img_width, img_height) = first_img.dimensions();
+
+        let quilt_width = img_width * columns as u32;
+        let quilt_height = img_height * rows as u32;
+
+        let mut quilt = ImageBuffer::new(quilt_width, quilt_height);
+        let mut current_width: u32;
+        let mut current_height: u32 = 0;
+        for row in 0..rows {
+            current_width = 0;
+            for column in 0..columns {
+                let current_img_path = &quilt_layout[row][column];
+                let current_img = image::open(current_img_path).unwrap();
+                let current_img_map = current_img.to_rgba8();
+
+                for x in 0..img_width {
+                    for y in 0..img_height {
+                        let pixel = current_img_map.get_pixel(x, y);
+                        quilt.put_pixel(
+                            current_width + x,
+                            quilt_height - 1 - (current_height + y),
+                            *pixel,
+                        );
                     }
-                };
-                if current_view < (views / no_of_folders) * (i + 1)
-                    && current_view >= (views / no_of_folders) * i
-                {
-                    let original_file = std::path::Path::new(&folder).join(&filename);
-                    let original_file = original_file.to_str().unwrap();
-                    let path = std::path::Path::new(&final_folder).join(&filename);
-                    let path = path.to_str().unwrap();
-                    fs::copy(original_file, path).unwrap();
                 }
+                current_width += img_width;
             }
+            current_height += img_height;
         }
+
+        let output_path =
+            std::path::Path::new(&output_folder).join(format!("quilt_{}.png", quilt_i));
+        // flip the quilt vertically
+        let quilt = image::imageops::flip_vertical(&quilt);
+        quilt.save(&output_path).unwrap();
     }
 }
diff --git a/src-tauri/src/lib.rs b/src-tauri/src/lib.rs
index 3df970e..8b08f52 100644
--- a/src-tauri/src/lib.rs
+++ b/src-tauri/src/lib.rs
@@ -14,7 +14,8 @@ pub fn run() {
             commands::delete_file,
             commands::move_file,
             commands::delete_move_files_in_folder,
-            commands::sort_files
+            commands::sort_files,
+            commands::make_quilt
         ])
         .run(tauri::generate_context!())
         .expect("error while running tauri application");
diff --git a/src/components/button.svelte b/src/components/button.svelte
new file mode 100644
index 0000000..92fa675
--- /dev/null
+++ b/src/components/button.svelte
@@ -0,0 +1,40 @@
+<script lang="ts">
+  export let disabled: boolean = false;
+  export let onClick: () => void;
+  export let type: "button" | "submit" | "reset" = "button";
+  export let ariaLabel: string;
+  export let close: boolean = false;
+</script>
+
+<button {type} {disabled} aria-label={ariaLabel} onclick={onClick} class:close>
+  <slot></slot>
+</button>
+
+<style>
+  button {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    padding: 5px;
+    margin: 5px;
+    border: 1px solid #646cff;
+    border-radius: 5px;
+    background-color: #646cff;
+    color: white;
+  }
+
+  button {
+    cursor: pointer;
+  }
+
+  button[disabled] {
+    background-color: #646cff40;
+    color: #646cff80;
+    cursor: not-allowed;
+  }
+
+  button.close {
+    background-color: #ff3e00;
+    border-color: #ff3e00;
+  }
+</style>
diff --git a/src/components/folderInput.svelte b/src/components/folderInput.svelte
new file mode 100644
index 0000000..2440280
--- /dev/null
+++ b/src/components/folderInput.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+  import { open } from "@tauri-apps/plugin-dialog";
+
+  const openFolder = async () => {
+    const result = await open({
+      directory: true,
+      multiple: multiple,
+    });
+    if (result) {
+      callback(result);
+    }
+  };
+  export let multiple: boolean = false;
+  export let callback: (path: string) => void;
+</script>
+
+<button on:click={openFolder}>
+  <slot></slot>
+</button>
+
+<style>
+  button {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    padding: 5px;
+    margin: 5px;
+    border: 1px solid #646cff;
+    border-radius: 5px;
+    background-color: #646cff;
+    color: white;
+  }
+
+  button {
+    cursor: pointer;
+  }
+</style>
diff --git a/src/routes/create-quilt/+page.svelte b/src/routes/create-quilt/+page.svelte
index 39407f9..25a3094 100644
--- a/src/routes/create-quilt/+page.svelte
+++ b/src/routes/create-quilt/+page.svelte
@@ -1,13 +1,201 @@
+<script lang="ts">
+  import { invoke } from "@tauri-apps/api/core";
+  import { DISPLAYS, type DisplayInfo } from "../../utils";
+  import Dropdown from "../../components/dropdown.svelte";
+  import FolderInput from "../../components/folderInput.svelte";
+  import Button from "../../components/button.svelte";
+
+  type Folder =
+    | { path: string; status: "checking" | "ok"; unwantedFiles?: never }
+    | { path: string; status: "error"; unwantedFiles: string[] };
+
+  type FilesMap = {
+    files: string[];
+    folder: string;
+  };
+
+  let quiltStatus: "unstarted" | "making" | "made" = $state("unstarted");
+
+  let sortedFolder: Folder = $state({
+    path: "",
+    status: "checking",
+  });
+  let quiltFolder: string = $state("");
+
+  let views: DisplayInfo = $state(DISPLAYS[0]);
+  let dropdownOptions = $state(
+    DISPLAYS.map((display: DisplayInfo) => ({
+      value: display,
+      display: display.name,
+    })),
+  );
+
+  const checkFolder = (path: string) => {
+    invoke("check_folder", { path }).then((res: unknown) => {
+      const filesMap = res as FilesMap;
+      if (filesMap.files.length > 0) {
+        sortedFolder = {
+          status: "error",
+          path: filesMap.folder,
+          unwantedFiles: filesMap.files,
+        };
+      } else {
+        sortedFolder.status = "ok";
+      }
+    });
+  };
+
+  const sortedFolderCallback = async (result: string) => {
+    sortedFolder.path = result;
+    checkFolder(result);
+  };
+
+  const quiltFolderCallback = async (result: string) => {
+    quiltFolder = result;
+  };
+
+  const deleteFile = (folder: string, file: string) => {
+    invoke("delete_file", { folder, filename: file }).then((res: unknown) => {
+      checkFolder(folder);
+    });
+  };
+
+  const deleteOrMoveAllUnwantedFiles = (
+    folder: Folder,
+    shouldDelete: boolean,
+  ) => {
+    invoke("delete_move_files_in_folder", {
+      folder: folder.path,
+      files: folder.unwantedFiles,
+      delete: shouldDelete,
+    }).then((res: unknown) => {
+      checkFolder(folder.path);
+    });
+  };
+
+  const makeQuilt = () => {
+    quiltStatus = "making";
+    invoke("make_quilt", {
+      sortedFolder: sortedFolder.path,
+      outputFolder: quiltFolder,
+      columns: views.layout[0],
+      rows: views.layout[1],
+    }).then((res: unknown) => {
+      quiltStatus = "made";
+    });
+  };
+</script>
+
+<a href="/" class="home" aria-label="Home">
+  <svg>
+    <use xlink:href="home.svg#home"></use>
+  </svg>
+</a>
 <main class="container">
   <h1>Create Quilt</h1>
-  <p>This page is not implemented yet</p>
-  <div class="row">
-    <a href="/">
-      <svg class="logo home">
-        <use xlink:href="home.svg#home"></use>
-      </svg>
-      <h4>Go Home</h4>
-    </a>
+  <div class="column">
+    <div class="column form-input">
+      <h4>Sorted Folder</h4>
+      <small>
+        This should be the sorted folder that has all your frames in that you
+        want combining into quilts.
+      </small>
+      <FolderInput callback={sortedFolderCallback}>Select Folder</FolderInput>
+      {#if sortedFolder.status === "checking"}
+        <li class="row">
+          <div class="loader"></div>
+          <small>
+            <code>{sortedFolder.path}</code>
+          </small>
+        </li>
+      {:else if sortedFolder.status === "ok"}
+        <li class="row bg-success">
+          <svg class="icon">
+            <use xlink:href="check.svg#check"></use>
+          </svg>
+          <small>
+            <code>{sortedFolder.path}</code>
+          </small>
+        </li>
+      {:else if sortedFolder.status === "error"}
+        <li class="bg-error">
+          <div class="row">
+            <svg class="icon">
+              <use xlink:href="cancel.svg#cancel"></use>
+            </svg>
+            <small>
+              <code>{sortedFolder.path}</code>
+            </small>
+          </div>
+          <div class="column">
+            <small>These files need to be deleted first</small>
+            <div class="row">
+              <Button
+                ariaLabel="Move all unwanted files"
+                onClick={() =>
+                  deleteOrMoveAllUnwantedFiles(sortedFolder, false)}
+              >
+                Move All
+              </Button>
+              <Button
+                ariaLabel="Delete all unwanted files"
+                onClick={() => deleteOrMoveAllUnwantedFiles(sortedFolder, true)}
+              >
+                Delete All
+              </Button>
+            </div>
+            <ul>
+              {#each sortedFolder.unwantedFiles as file (file)}
+                <li class="elevated row">
+                  <small><code>{file}</code></small>
+                  <Button
+                    close
+                    onClick={() => deleteFile(sortedFolder.path, file)}
+                    ariaLabel="Delete file"
+                  >
+                    <svg class="icon">
+                      <use xlink:href="trash.svg#trash"></use>
+                    </svg>
+                  </Button>
+                </li>
+              {/each}
+            </ul>
+          </div>
+        </li>
+      {/if}
+    </div>
+    <div class="column form-input">
+      <h4>What device?</h4>
+      <Dropdown bind:options={dropdownOptions} bind:selected={views} />
+    </div>
+    <div class="column form-input">
+      <h4>Quilt Folder</h4>
+      <small>Where should the final quilt(s) be saved</small>
+      <FolderInput callback={quiltFolderCallback}>Select Folder</FolderInput>
+      {#if quiltFolder}
+        <small><code>{quiltFolder}</code></small>
+      {/if}
+    </div>
+    <div class="column form-input">
+      <Button
+        type="submit"
+        disabled={sortedFolder.status !== "ok" ||
+          !quiltFolder ||
+          !views ||
+          quiltStatus !== "unstarted"}
+        onClick={makeQuilt}
+        ariaLabel="Sort Files"
+      >
+        {#if quiltStatus === "unstarted"}
+          <strong>Sort Files</strong>
+        {:else if quiltStatus === "making"}
+          <div class="loader"></div>
+          <strong>Sorting Files</strong>
+        {:else if quiltStatus === "made"}
+          <strong>Files Sorted</strong>
+        {/if}
+      </Button>
+    </div>
   </div>
 </main>
 
@@ -28,44 +216,123 @@
     -webkit-text-size-adjust: 100%;
   }
 
+  .home svg {
+    width: 25px;
+    aspect-ratio: 1;
+    height: 25px;
+    position: fixed;
+  }
+
   .container {
     margin: 0;
     padding-top: 10vh;
     display: flex;
     flex-direction: column;
     justify-content: center;
-    text-align: center;
+    padding: 10vw;
+  }
+
+  .column {
+    display: flex;
+    flex-direction: column;
+    flex: 50%;
+    padding: 10px;
+  }
+
+  .loader {
+    width: 25px;
+    aspect-ratio: 1;
+    border-radius: 50%;
+    padding: 3px;
+    background:
+      radial-gradient(farthest-side, gray 95%, #0000) 50% 0/12px 12px no-repeat,
+      radial-gradient(
+          farthest-side,
+          #0000 calc(100% - 5px),
+          gray calc(100% - 4px)
+        )
+        content-box;
+    animation: l6 2s infinite;
+  }
+
+  @keyframes l6 {
+    to {
+      transform: rotate(1turn);
+    }
+  }
+
+  .column.form-input {
+    gap: 5px;
+    h4 {
+      margin: 0;
+    }
+  }
+
+  ul {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  li {
+    border: 1px solid #646cff;
+    border-radius: 5px;
+    margin: 5px 0;
+    overflow: scroll;
+  }
+
+  li svg {
+    width: 25px;
+    height: 25px;
   }
 
   .row {
     display: flex;
     justify-content: center;
+    align-items: center;
+    gap: 10px;
+    padding: 5px;
+  }
+
+  .bg-error {
+    background-color: #ff400040;
+    /* icon should be at the right */
+  }
+
+  .bg-error .elevated {
+    background-color: #ff400040;
+    color: white;
+    padding: 0px;
+    margin: 5px;
+    border-radius: 5px;
+    justify-content: space-between;
   }
 
-  a {
-    font-weight: 500;
-    color: #646cff;
-    text-decoration: inherit;
+  small {
+    font-size: 0.8em;
+    margin: 5px;
   }
 
-  a:hover {
-    color: #535bf2;
+  .bg-success {
+    background-color: #00ff0040;
   }
 
   h1 {
     text-align: center;
   }
 
+  svg {
+    fill: #0f0f0f;
+    width: 16px;
+    height: 16px;
+  }
+
   @media (prefers-color-scheme: dark) {
     :root {
       color: #f6f6f6;
       background-color: #2f2f2f;
     }
 
-    a:hover {
-      color: #24c8db;
-    }
-
     svg {
       fill: #f6f6f6;
     }
diff --git a/src/routes/sort-files/+page.svelte b/src/routes/sort-files/+page.svelte
index b941d2b..04b3027 100644
--- a/src/routes/sort-files/+page.svelte
+++ b/src/routes/sort-files/+page.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
   import { invoke } from "@tauri-apps/api/core";
-  import { open } from "@tauri-apps/plugin-dialog";
   import { DISPLAYS, type DisplayInfo } from "../../utils";
   import Dropdown from "../../components/dropdown.svelte";
+  import FolderInput from "../../components/folderInput.svelte";
+  import Button from "../../components/button.svelte";
 
   type Folder =
     | { path: string; status: "checking" | "ok"; unwantedFiles?: never }
@@ -25,17 +26,12 @@
     })),
   );
 
-  const openFolderSelect = async () => {
-    const result = await open({
-      directory: true,
+  const frameFolderCallback = async (result: string) => {
+    folders.push({
+      path: result,
+      status: "checking",
     });
-    if (result) {
-      folders.push({
-        path: result,
-        status: "checking",
-      });
-      checkFolder(result);
-    }
+    checkFolder(result);
   };
 
   const checkFolder = (path: string) => {
@@ -56,13 +52,8 @@
     });
   };
 
-  const openFinalFolderSelect = async () => {
-    const result = await open({
-      directory: true,
-    });
-    if (result) {
-      finalFolder = result;
-    }
+  const finalFolderCallback = async (result: string) => {
+    finalFolder = result;
   };
 
   const removeFolder = (folder: string) => {
@@ -113,9 +104,7 @@
       <small
         >These should be selected in the order you want the animation built in</small
       >
-      <button onclick={openFolderSelect} id="folders" name="folders"
-        >Select Folder</button
-      >
+      <FolderInput callback={frameFolderCallback}>Select Folder</FolderInput>
       {#if folders.length > 0}
         <ul>
           {#each folders as folder (folder)}
@@ -134,15 +123,15 @@
                 <small>
                   <code>{folder.path}</code>
                 </small>
-                <button
-                  class="close"
-                  onclick={() => removeFolder(folder.path)}
-                  aria-label="Remove folder"
+                <Button
+                  close
+                  onClick={() => removeFolder(folder.path)}
+                  ariaLabel="Remove folder"
                 >
                   <svg class="icon close">
                     <use xlink:href="trash.svg#trash"></use>
                   </svg>
-                </button>
+                </Button>
               </li>
             {:else if folder.status === "error"}
               <li class="bg-error">
@@ -153,44 +142,46 @@
                   <small>
                     <code>{folder.path}</code>
                   </small>
-                  <button
-                    class="close"
-                    onclick={() => removeFolder(folder.path)}
-                    aria-label="Delete all unwanted items in folder"
+                  <Button
+                    close
+                    onClick={() => removeFolder(folder.path)}
+                    ariaLabel="Delete all unwanted items in folder"
                   >
                     <svg class="icon close">
                       <use xlink:href="trash.svg#trash"></use>
                     </svg>
-                  </button>
+                  </Button>
                 </div>
                 <div class="column">
                   <div class="row">
                     <small>These files need to be deleted first</small>
-                    <button
-                      onclick={() =>
+                    <Button
+                      ariaLabel="Move all unwanted files"
+                      onClick={() =>
                         deleteOrMoveAllUnwantedFiles(folder, false)}
                     >
                       Move All
-                    </button>
-                    <button
-                      onclick={() => deleteOrMoveAllUnwantedFiles(folder, true)}
+                    </Button>
+                    <Button
+                      ariaLabel="Delete all unwanted files"
+                      onClick={() => deleteOrMoveAllUnwantedFiles(folder, true)}
                     >
                       Delete All
-                    </button>
+                    </Button>
                   </div>
                   <ul>
                     {#each folder.unwantedFiles as file (file)}
                       <li class="elevated row">
                         <small><code>{file}</code></small>
-                        <button
-                          class="close"
-                          onclick={() => deleteFile(folder.path, file)}
-                          aria-label="Delete file"
+                        <Button
+                          close
+                          onClick={() => deleteFile(folder.path, file)}
+                          ariaLabel="Delete file"
                         >
                           <svg class="icon">
                             <use xlink:href="trash.svg#trash"></use>
                           </svg>
-                        </button>
+                        </Button>
                       </li>
                     {/each}
                   </ul>
@@ -208,31 +199,21 @@
     <div class="column form-input">
       <h4>Final Frame Folder</h4>
       <small>Where should the final frame sequence be saved</small>
-      <button onclick={openFinalFolderSelect} id="final" name="final"
-        >Select Folder</button
-      >
+      <FolderInput callback={finalFolderCallback}>Select Folder</FolderInput>
       {#if finalFolder}
         <small><code>{finalFolder}</code></small>
       {/if}
     </div>
     <div class="column form-input">
-      <button
+      <Button
         type="submit"
-        class={`row ${
-          folders.length === 0 ||
-          folders.some((folder) => folder.status !== "ok") ||
-          !finalFolder ||
-          !views ||
-          sortStatus !== "unsorted"
-            ? "disabled"
-            : ""
-        }`}
         disabled={folders.length === 0 ||
           folders.some((folder) => folder.status !== "ok") ||
           !finalFolder ||
           !views ||
           sortStatus !== "unsorted"}
-        onclick={sortFiles}
+        onClick={sortFiles}
+        ariaLabel="Sort Files"
       >
         {#if sortStatus === "unsorted"}
           <strong>Sort Files</strong>
@@ -242,7 +223,7 @@
         {:else if sortStatus === "sorted"}
           <strong>Files Sorted</strong>
         {/if}
-      </button>
+      </Button>
     </div>
   </div>
 </main>
@@ -365,33 +346,6 @@
     background-color: #00ff0040;
   }
 
-  button {
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-    padding: 5px;
-    margin: 5px;
-    border: 1px solid #646cff;
-    border-radius: 5px;
-    background-color: #646cff;
-    color: white;
-  }
-
-  button {
-    cursor: pointer;
-  }
-
-  button.disabled {
-    background-color: #646cff40;
-    color: #646cff80;
-    cursor: not-allowed;
-  }
-
-  button.close {
-    background-color: #ff3e00;
-    border-color: #ff3e00;
-  }
-
   .icon.close {
     display: inline;
     width: 16px;