diff --git a/package-lock.json b/package-lock.json
index 84b07a2..7250802 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -24,7 +24,8 @@
         "globals": "^17.4.0",
         "husky": "^9.1.7",
         "vite": "^7.3.1",
-        "vite-plugin-pwa": "^1.2.0"
+        "vite-plugin-pwa": "^1.2.0",
+        "worker-loader": "^3.0.8"
       }
     },
     "node_modules/@apideck/better-ajv-errors": {
@@ -2709,6 +2710,30 @@
       "integrity": "sha512-cMQm7pxu6BxtHyqJ7mQZ2kXWV5SLmugybFdHCBbJ5eHzOo6VhBckEgAT3//rP5FwPHNPeEiq4SmQ5ucBwsOo4Q==",
       "license": "MIT"
     },
+    "node_modules/@types/eslint": {
+      "version": "9.6.1",
+      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-9.6.1.tgz",
+      "integrity": "sha512-FXx2pKgId/WyYo2jXw63kk7/+TY7u7AziEJxJAnSFzHlqTAS3Ync6SvgYAN/k4/PQpnnVuzoMuVnByKK2qp0ag==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@types/estree": "*",
+        "@types/json-schema": "*"
+      }
+    },
+    "node_modules/@types/eslint-scope": {
+      "version": "3.7.7",
+      "resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.7.tgz",
+      "integrity": "sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@types/eslint": "*",
+        "@types/estree": "*"
+      }
+    },
     "node_modules/@types/esrecurse": {
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/@types/esrecurse/-/esrecurse-4.3.1.tgz",
@@ -2730,6 +2755,17 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/node": {
+      "version": "25.3.3",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-25.3.3.tgz",
+      "integrity": "sha512-DpzbrH7wIcBaJibpKo9nnSQL0MTRdnWttGyE5haGwK86xgMOkFLp7vEyfQPGLOJh5wNYiJ3V9PmUMDhV9u8kkQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "undici-types": "~7.18.0"
+      }
+    },
     "node_modules/@types/resolve": {
       "version": "1.20.2",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz",
@@ -2921,6 +2957,198 @@
       "integrity": "sha512-w7SR0A5zyRByL9XUkCfdLs7t9XOHUyJ67qPGQjOou3p6GvBeBW+AVjUUmlxtZ4PIYaRvE+1LmK44O4uajlZwcg==",
       "license": "MIT"
     },
+    "node_modules/@webassemblyjs/ast": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.14.1.tgz",
+      "integrity": "sha512-nuBEDgQfm1ccRp/8bCQrx1frohyufl4JlbMMZ4P1wpeOfDhF6FQkxZJ1b/e+PLwr6X1Nhw6OLme5usuBWYBvuQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@webassemblyjs/helper-numbers": "1.13.2",
+        "@webassemblyjs/helper-wasm-bytecode": "1.13.2"
+      }
+    },
+    "node_modules/@webassemblyjs/floating-point-hex-parser": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.13.2.tgz",
+      "integrity": "sha512-6oXyTOzbKxGH4steLbLNOu71Oj+C8Lg34n6CqRvqfS2O71BxY6ByfMDRhBytzknj9yGUPVJ1qIKhRlAwO1AovA==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/@webassemblyjs/helper-api-error": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.13.2.tgz",
+      "integrity": "sha512-U56GMYxy4ZQCbDZd6JuvvNV/WFildOjsaWD3Tzzvmw/mas3cXzRJPMjP83JqEsgSbyrmaGjBfDtV7KDXV9UzFQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/@webassemblyjs/helper-buffer": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.14.1.tgz",
+      "integrity": "sha512-jyH7wtcHiKssDtFPRB+iQdxlDf96m0E39yb0k5uJVhFGleZFoNw1c4aeIcVUPPbXUVJ94wwnMOAqUHyzoEPVMA==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/@webassemblyjs/helper-numbers": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-numbers/-/helper-numbers-1.13.2.tgz",
+      "integrity": "sha512-FE8aCmS5Q6eQYcV3gI35O4J789wlQA+7JrqTTpJqn5emA4U2hvwJmvFRC0HODS+3Ye6WioDklgd6scJ3+PLnEA==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@webassemblyjs/floating-point-hex-parser": "1.13.2",
+        "@webassemblyjs/helper-api-error": "1.13.2",
+        "@xtuc/long": "4.2.2"
+      }
+    },
+    "node_modules/@webassemblyjs/helper-wasm-bytecode": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.13.2.tgz",
+      "integrity": "sha512-3QbLKy93F0EAIXLh0ogEVR6rOubA9AoZ+WRYhNbFyuB70j3dRdwH9g+qXhLAO0kiYGlg3TxDV+I4rQTr/YNXkA==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/@webassemblyjs/helper-wasm-section": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.14.1.tgz",
+      "integrity": "sha512-ds5mXEqTJ6oxRoqjhWDU83OgzAYjwsCV8Lo/N+oRsNDmx/ZDpqalmrtgOMkHwxsG0iI//3BwWAErYRHtgn0dZw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@webassemblyjs/ast": "1.14.1",
+        "@webassemblyjs/helper-buffer": "1.14.1",
+        "@webassemblyjs/helper-wasm-bytecode": "1.13.2",
+        "@webassemblyjs/wasm-gen": "1.14.1"
+      }
+    },
+    "node_modules/@webassemblyjs/ieee754": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.13.2.tgz",
+      "integrity": "sha512-4LtOzh58S/5lX4ITKxnAK2USuNEvpdVV9AlgGQb8rJDHaLeHciwG4zlGr0j/SNWlr7x3vO1lDEsuePvtcDNCkw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@xtuc/ieee754": "^1.2.0"
+      }
+    },
+    "node_modules/@webassemblyjs/leb128": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.13.2.tgz",
+      "integrity": "sha512-Lde1oNoIdzVzdkNEAWZ1dZ5orIbff80YPdHx20mrHwHrVNNTjNr8E3xz9BdpcGqRQbAEa+fkrCb+fRFTl/6sQw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "peer": true,
+      "dependencies": {
+        "@xtuc/long": "4.2.2"
+      }
+    },
+    "node_modules/@webassemblyjs/utf8": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.13.2.tgz",
+      "integrity": "sha512-3NQWGjKTASY1xV5m7Hr0iPeXD9+RDobLll3T9d2AO+g3my8xy5peVyjSag4I50mR1bBSN/Ct12lo+R9tJk0NZQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/@webassemblyjs/wasm-edit": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.14.1.tgz",
+      "integrity": "sha512-RNJUIQH/J8iA/1NzlE4N7KtyZNHi3w7at7hDjvRNm5rcUXa00z1vRz3glZoULfJ5mpvYhLybmVcwcjGrC1pRrQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@webassemblyjs/ast": "1.14.1",
+        "@webassemblyjs/helper-buffer": "1.14.1",
+        "@webassemblyjs/helper-wasm-bytecode": "1.13.2",
+        "@webassemblyjs/helper-wasm-section": "1.14.1",
+        "@webassemblyjs/wasm-gen": "1.14.1",
+        "@webassemblyjs/wasm-opt": "1.14.1",
+        "@webassemblyjs/wasm-parser": "1.14.1",
+        "@webassemblyjs/wast-printer": "1.14.1"
+      }
+    },
+    "node_modules/@webassemblyjs/wasm-gen": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.14.1.tgz",
+      "integrity": "sha512-AmomSIjP8ZbfGQhumkNvgC33AY7qtMCXnN6bL2u2Js4gVCg8fp735aEiMSBbDR7UQIj90n4wKAFUSEd0QN2Ukg==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@webassemblyjs/ast": "1.14.1",
+        "@webassemblyjs/helper-wasm-bytecode": "1.13.2",
+        "@webassemblyjs/ieee754": "1.13.2",
+        "@webassemblyjs/leb128": "1.13.2",
+        "@webassemblyjs/utf8": "1.13.2"
+      }
+    },
+    "node_modules/@webassemblyjs/wasm-opt": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.14.1.tgz",
+      "integrity": "sha512-PTcKLUNvBqnY2U6E5bdOQcSM+oVP/PmrDY9NzowJjislEjwP/C4an2303MCVS2Mg9d3AJpIGdUFIQQWbPds0Sw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@webassemblyjs/ast": "1.14.1",
+        "@webassemblyjs/helper-buffer": "1.14.1",
+        "@webassemblyjs/wasm-gen": "1.14.1",
+        "@webassemblyjs/wasm-parser": "1.14.1"
+      }
+    },
+    "node_modules/@webassemblyjs/wasm-parser": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.14.1.tgz",
+      "integrity": "sha512-JLBl+KZ0R5qB7mCnud/yyX08jWFw5MsoalJ1pQ4EdFlgj9VdXKGuENGsiCIjegI1W7p91rUlcB/LB5yRJKNTcQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@webassemblyjs/ast": "1.14.1",
+        "@webassemblyjs/helper-api-error": "1.13.2",
+        "@webassemblyjs/helper-wasm-bytecode": "1.13.2",
+        "@webassemblyjs/ieee754": "1.13.2",
+        "@webassemblyjs/leb128": "1.13.2",
+        "@webassemblyjs/utf8": "1.13.2"
+      }
+    },
+    "node_modules/@webassemblyjs/wast-printer": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.14.1.tgz",
+      "integrity": "sha512-kPSSXE6De1XOR820C90RIo2ogvZG+c3KiHzqUoO/F34Y2shGzesfqv7o57xrxovZJH/MetF5UjroJ/R/3isoiw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@webassemblyjs/ast": "1.14.1",
+        "@xtuc/long": "4.2.2"
+      }
+    },
+    "node_modules/@xtuc/ieee754": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
+      "integrity": "sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "peer": true
+    },
+    "node_modules/@xtuc/long": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz",
+      "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "peer": true
+    },
     "node_modules/acorn": {
       "version": "8.16.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.16.0.tgz",
@@ -2933,6 +3161,20 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/acorn-import-phases": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/acorn-import-phases/-/acorn-import-phases-1.0.4.tgz",
+      "integrity": "sha512-wKmbr/DDiIXzEOiWrTTUcDm24kQ2vGfZQvM2fwg2vXqR5uW6aapr7ObPtj1th32b9u90/Pf4AItvdTh42fBmVQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=10.13.0"
+      },
+      "peerDependencies": {
+        "acorn": "^8.14.0"
+      }
+    },
     "node_modules/acorn-jsx": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
@@ -2960,6 +3202,39 @@
         "url": "https://github.com/sponsors/epoberezkin"
       }
     },
+    "node_modules/ajv-formats": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz",
+      "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "ajv": "^8.0.0"
+      },
+      "peerDependencies": {
+        "ajv": "^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "ajv": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/ajv-keywords": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
+      "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3"
+      },
+      "peerDependencies": {
+        "ajv": "^8.8.2"
+      }
+    },
     "node_modules/ansi-regex": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
@@ -3172,6 +3447,16 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/big.js": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
+      "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/birpc": {
       "version": "2.9.0",
       "resolved": "https://registry.npmjs.org/birpc/-/birpc-2.9.0.tgz",
@@ -3337,6 +3622,17 @@
         "url": "https://paulmillr.com/funding/"
       }
     },
+    "node_modules/chrome-trace-event": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.4.tgz",
+      "integrity": "sha512-rNjApaLzuwaOTjCiT8lSDdGN1APCiqkChLMJxJPWLunPAt5fy8xgU9/jNOchV84wfIxrA0lRQB7oCT8jrn/wrQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=6.0"
+      }
+    },
     "node_modules/cliui": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
@@ -3653,6 +3949,31 @@
       "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
       "license": "MIT"
     },
+    "node_modules/emojis-list": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
+      "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/enhanced-resolve": {
+      "version": "5.20.0",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.20.0.tgz",
+      "integrity": "sha512-/ce7+jQ1PQ6rVXwe+jKEg5hW5ciicHwIQUagZkp6IufBoY3YDgdTTY1azVs0qoRgVmvsNB+rbjLJxDAeHHtwsQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "graceful-fs": "^4.2.4",
+        "tapable": "^2.3.0"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/entities": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/entities/-/entities-7.0.1.tgz",
@@ -3754,6 +4075,14 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/es-module-lexer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-2.0.0.tgz",
+      "integrity": "sha512-5POEcUuZybH7IdmGsD8wlf0AI55wMecM9rVBTI/qEAy2c1kTOm3DjFYjrBdI2K3BaJjJYfYFeRtM0t9ssnRuxw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/es-object-atoms": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
@@ -4158,6 +4487,17 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/events": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
+      "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=0.8.x"
+      }
+    },
     "node_modules/exsolve": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/exsolve/-/exsolve-1.0.8.tgz",
@@ -4542,6 +4882,14 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/glob-to-regexp": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
+      "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "peer": true
+    },
     "node_modules/globals": {
       "version": "17.4.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-17.4.0.tgz",
@@ -4605,6 +4953,17 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/has-property-descriptors": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
@@ -5231,6 +5590,22 @@
         "node": ">=10"
       }
     },
+    "node_modules/jest-worker": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.5.1.tgz",
+      "integrity": "sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@types/node": "*",
+        "merge-stream": "^2.0.0",
+        "supports-color": "^8.0.0"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      }
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -5257,6 +5632,14 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/json-parse-even-better-errors": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/json-schema": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.4.0.tgz",
@@ -5347,6 +5730,36 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/loader-runner": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.1.tgz",
+      "integrity": "sha512-IWqP2SCPhyVFTBtRcgMHdzlf9ul25NwaFx4wCEH/KjAXuuHY4yNjvPXsBokp8jCB936PyWRaPKUNh8NvylLp2Q==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=6.11.5"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
+    "node_modules/loader-utils": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
+      "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "big.js": "^5.2.2",
+        "emojis-list": "^3.0.0",
+        "json5": "^2.1.2"
+      },
+      "engines": {
+        "node": ">=8.9.0"
+      }
+    },
     "node_modules/local-pkg": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-1.1.2.tgz",
@@ -5462,6 +5875,39 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/merge-stream": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
+      "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/minimatch": {
       "version": "10.2.4",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.4.tgz",
@@ -5561,6 +6007,14 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/neo-async": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
+      "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/node-releases": {
       "version": "2.0.27",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.27.tgz",
@@ -6223,6 +6677,27 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/schema-utils": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.3.3.tgz",
+      "integrity": "sha512-eflK8wEtyOE6+hsaRVPxvUKYCpRgzLqDTb8krvAsRIwOGlHoSgYLgBXoubGgLd2fT41/OUYdb48v4k4WWHQurA==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@types/json-schema": "^7.0.9",
+        "ajv": "^8.9.0",
+        "ajv-formats": "^2.1.1",
+        "ajv-keywords": "^5.1.0"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
     "node_modules/scule": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/scule/-/scule-1.3.0.tgz",
@@ -6651,6 +7126,23 @@
         "node": ">=16"
       }
     },
+    "node_modules/supports-color": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
+      "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/supports-color?sponsor=1"
+      }
+    },
     "node_modules/supports-preserve-symlinks-flag": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
@@ -6676,6 +7168,21 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/tapable": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.0.tgz",
+      "integrity": "sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
     "node_modules/temp-dir": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/temp-dir/-/temp-dir-2.0.0.tgz",
@@ -6724,6 +7231,41 @@
         "node": ">=10"
       }
     },
+    "node_modules/terser-webpack-plugin": {
+      "version": "5.3.17",
+      "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.17.tgz",
+      "integrity": "sha512-YR7PtUp6GMU91BgSJmlaX/rS2lGDbAF7D+Wtq7hRO+MiljNmodYvqslzCFiYVAgW+Qoaaia/QUIP4lGXufjdZw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@jridgewell/trace-mapping": "^0.3.25",
+        "jest-worker": "^27.4.5",
+        "schema-utils": "^4.3.0",
+        "terser": "^5.31.1"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^5.1.0"
+      },
+      "peerDependenciesMeta": {
+        "@swc/core": {
+          "optional": true
+        },
+        "esbuild": {
+          "optional": true
+        },
+        "uglify-js": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/tinyglobby": {
       "version": "0.2.15",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
@@ -6879,6 +7421,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/undici-types": {
+      "version": "7.18.2",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.18.2.tgz",
+      "integrity": "sha512-AsuCzffGHJybSaRrmr5eHr81mwJU3kjw6M+uprWvCXiNeN9SOGwQ3Jn8jb8m3Z6izVgknn1R0FTCEAP2QrLY/w==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/unicode-canonical-property-names-ecmascript": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.1.tgz",
@@ -7246,6 +7796,21 @@
         }
       }
     },
+    "node_modules/watchpack": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.5.1.tgz",
+      "integrity": "sha512-Zn5uXdcFNIA1+1Ei5McRd+iRzfhENPCe7LeABkJtNulSxjma+l7ltNx55BWZkRlwRnpOgHqxnjyaDgJnNXnqzg==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "glob-to-regexp": "^0.4.1",
+        "graceful-fs": "^4.1.2"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/webidl-conversions": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-4.0.2.tgz",
@@ -7253,12 +7818,99 @@
       "dev": true,
       "license": "BSD-2-Clause"
     },
+    "node_modules/webpack": {
+      "version": "5.105.4",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.105.4.tgz",
+      "integrity": "sha512-jTywjboN9aHxFlToqb0K0Zs9SbBoW4zRUlGzI2tYNxVYcEi/IPpn+Xi4ye5jTLvX2YeLuic/IvxNot+Q1jMoOw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@types/eslint-scope": "^3.7.7",
+        "@types/estree": "^1.0.8",
+        "@types/json-schema": "^7.0.15",
+        "@webassemblyjs/ast": "^1.14.1",
+        "@webassemblyjs/wasm-edit": "^1.14.1",
+        "@webassemblyjs/wasm-parser": "^1.14.1",
+        "acorn": "^8.16.0",
+        "acorn-import-phases": "^1.0.3",
+        "browserslist": "^4.28.1",
+        "chrome-trace-event": "^1.0.2",
+        "enhanced-resolve": "^5.20.0",
+        "es-module-lexer": "^2.0.0",
+        "eslint-scope": "5.1.1",
+        "events": "^3.2.0",
+        "glob-to-regexp": "^0.4.1",
+        "graceful-fs": "^4.2.11",
+        "json-parse-even-better-errors": "^2.3.1",
+        "loader-runner": "^4.3.1",
+        "mime-types": "^2.1.27",
+        "neo-async": "^2.6.2",
+        "schema-utils": "^4.3.3",
+        "tapable": "^2.3.0",
+        "terser-webpack-plugin": "^5.3.17",
+        "watchpack": "^2.5.1",
+        "webpack-sources": "^3.3.4"
+      },
+      "bin": {
+        "webpack": "bin/webpack.js"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependenciesMeta": {
+        "webpack-cli": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/webpack-sources": {
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.3.4.tgz",
+      "integrity": "sha512-7tP1PdV4vF+lYPnkMR0jMY5/la2ub5Fc/8VQrrU+lXkiM6C4TjVfGw7iKfyhnTQOsD+6Q/iKw0eFciziRgD58Q==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/webpack-virtual-modules": {
       "version": "0.6.2",
       "resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.6.2.tgz",
       "integrity": "sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==",
       "license": "MIT"
     },
+    "node_modules/webpack/node_modules/eslint-scope": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
+      "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "peer": true,
+      "dependencies": {
+        "esrecurse": "^4.3.0",
+        "estraverse": "^4.1.1"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/webpack/node_modules/estraverse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
+      "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "peer": true,
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
     "node_modules/whatwg-url": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-7.1.0.tgz",
@@ -7721,6 +8373,80 @@
         "workbox-core": "7.4.0"
       }
     },
+    "node_modules/worker-loader": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/worker-loader/-/worker-loader-3.0.8.tgz",
+      "integrity": "sha512-XQyQkIFeRVC7f7uRhFdNMe/iJOdO6zxAaR3EWbDp45v3mDhrTi+++oswKNxShUNjPC/1xUp5DB29YKLhFo129g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "loader-utils": "^2.0.0",
+        "schema-utils": "^3.0.0"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^4.0.0 || ^5.0.0"
+      }
+    },
+    "node_modules/worker-loader/node_modules/ajv": {
+      "version": "6.14.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.14.0.tgz",
+      "integrity": "sha512-IWrosm/yrn43eiKqkfkHis7QioDleaXQHdDVPKg0FSwwd/DuvyX79TZnFOnYpB7dcsFAMmtFztZuXPDvSePkFw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/worker-loader/node_modules/ajv-keywords": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "ajv": "^6.9.1"
+      }
+    },
+    "node_modules/worker-loader/node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/worker-loader/node_modules/schema-utils": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz",
+      "integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/json-schema": "^7.0.8",
+        "ajv": "^6.12.5",
+        "ajv-keywords": "^3.5.2"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
     "node_modules/wrap-ansi": {
       "version": "6.2.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
diff --git a/package.json b/package.json
index 134e4bc..f222a7b 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
     "globals": "^17.4.0",
     "husky": "^9.1.7",
     "vite": "^7.3.1",
-    "vite-plugin-pwa": "^1.2.0"
+    "vite-plugin-pwa": "^1.2.0",
+    "worker-loader": "^3.0.8"
   }
 }
diff --git a/src/components/InstallPrompt.vue b/src/components/InstallPrompt.vue
index 1e6e1a7..3e93717 100644
--- a/src/components/InstallPrompt.vue
+++ b/src/components/InstallPrompt.vue
@@ -3,8 +3,8 @@
     <div class="prompt-content">
       <span class="prompt-text">Install app for faster access</span>
       <div class="prompt-actions">
-        <button @click="installPWA" class="install-btn">Install</button>
-        <button @click="dismissPrompt" class="dismiss-btn">✕</button>
+        <button @click="installPWA" class="install-btn" v-ripple>Install</button>
+        <button @click="dismissPrompt" class="dismiss-btn" v-ripple>✕</button>
       </div>
     </div>
   </div>
diff --git a/src/components/ReloadPrompt.vue b/src/components/ReloadPrompt.vue
index 56c331b..25ca3b9 100644
--- a/src/components/ReloadPrompt.vue
+++ b/src/components/ReloadPrompt.vue
@@ -50,7 +50,7 @@ onMounted(() => {
     <div class="message">
       New content available, click on reload button to update.
     </div>
-    <button @click="updateServiceWorker()">
+    <button @click="updateServiceWorker()" class="btn-neon" v-ripple>
       Reload
     </button>
   </div>
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index 03c0590..18c1151 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -27,7 +27,7 @@ defineProps({
   left: 0;
   bottom: 0;
   width: 250px;
-  background-color: var(--panel-bg);
+  background-color: var(--glass-bg);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   overflow-x: hidden;
diff --git a/src/components/tools/Passwords.vue b/src/components/tools/Passwords.vue
index bf781db..e25e342 100644
--- a/src/components/tools/Passwords.vue
+++ b/src/components/tools/Passwords.vue
@@ -115,17 +115,17 @@ const generatePasswords = () => {
           <div class="input-wrapper">
             <label>Length</label>
             <div class="number-control">
-              <button class="control-btn" @click="length > 4 ? length-- : null">-</button>
+              <button class="control-btn" @click="length > 4 ? length-- : null" v-ripple>-</button>
               <input type="number" v-model="length" min="4" max="128" class="number-input">
-              <button class="control-btn" @click="length < 128 ? length++ : null">+</button>
+              <button class="control-btn" @click="length < 128 ? length++ : null" v-ripple>+</button>
             </div>
           </div>
           <div class="input-wrapper">
             <label>Count</label>
             <div class="number-control">
-              <button class="control-btn" @click="count > 1 ? count-- : null">-</button>
+              <button class="control-btn" @click="count > 1 ? count-- : null" v-ripple>-</button>
               <input type="number" v-model="count" min="1" max="1000" class="number-input">
-              <button class="control-btn" @click="count < 1000 ? count++ : null">+</button>
+              <button class="control-btn" @click="count < 1000 ? count++ : null" v-ripple>+</button>
             </div>
           </div>
         </div>
@@ -149,12 +149,6 @@ const generatePasswords = () => {
 </template>
 
 <style scoped>
-.tool-container {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-}
-
 .options-grid {
   display: flex;
   flex-wrap: wrap;
diff --git a/src/components/tools/QrCode.vue b/src/components/tools/QrCode.vue
index 13cd329..e3c6537 100644
--- a/src/components/tools/QrCode.vue
+++ b/src/components/tools/QrCode.vue
@@ -14,36 +14,59 @@ const previewRef = ref(null)
 
 const { height: previewHeight } = useFillHeight(previewRef, 40) // 40px extra margin
 
-const generateQR = async () => {
+let worker = null
+let latestJobId = 0
+
+const generateQR = () => {
   if (!text.value) {
     svgContent.value = ''
     return
   }
-  try {
-    // Generate SVG for preview (always sharp)
-    svgContent.value = await QRCode.toString(text.value, {
-      type: 'svg',
-      errorCorrectionLevel: ecc.value,
-      margin: 1,
-      // No fixed width, allow scaling via CSS
-    })
-  } catch (err) {
-    console.error('QR Generation failed', err)
-    svgContent.value = ''
+
+  // Create worker if not exists
+  if (!worker) {
+    worker = new Worker(new URL('../../workers/qrcode.worker.js', import.meta.url), { type: 'module' })
+    worker.onmessage = (e) => {
+      const { id, svgContent: newSvg, error } = e.data
+
+      // Only process the result of the most recently requested job
+      // to avoid race conditions overriding newer results with older ones
+      if (id !== latestJobId) return
+
+      if (error) {
+        console.error('QR Generation worker failed', error)
+        svgContent.value = ''
+      } else {
+        svgContent.value = newSvg
+      }
+    }
   }
+
+  // Increment ID for each new Generation request
+  latestJobId++
+  worker.postMessage({
+    id: latestJobId,
+    text: text.value,
+    ecc: ecc.value
+  })
 }
 
-// Debounce generation slightly to avoid lag on typing
-let timeout
-watch([text, ecc], () => { // size is not relevant for preview
-  clearTimeout(timeout)
-  timeout = setTimeout(generateQR, 300)
+watch([text, ecc], () => {
+  generateQR()
 })
 
 onMounted(() => {
   if (text.value) generateQR()
 })
 
+import { onUnmounted } from 'vue'
+
+onUnmounted(() => {
+  if (worker) {
+    worker.terminate()
+  }
+})
+
 const downloadFile = async () => {
   if (!text.value) return
 
@@ -131,11 +154,11 @@ const triggerDownload = (blob, filename) => {
           <div class="control-group">
             <label>Size (px)</label>
             <div class="number-control size-control">
-              <button class="control-btn" @click="size = Math.max(10, size - 100)" title="-100">-100</button>
-              <button class="control-btn" @click="size = Math.max(10, size - 10)" title="-10">-10</button>
+              <button class="control-btn" @click="size = Math.max(10, size - 100)" title="-100" v-ripple>-100</button>
+              <button class="control-btn" @click="size = Math.max(10, size - 10)" title="-10" v-ripple>-10</button>
               <input type="number" v-model.number="size" class="number-input" />
-              <button class="control-btn" @click="size += 10" title="+10">+10</button>
-              <button class="control-btn" @click="size += 100" title="+100">+100</button>
+              <button class="control-btn" @click="size += 10" title="+10" v-ripple>+10</button>
+              <button class="control-btn" @click="size += 100" title="+100" v-ripple>+100</button>
             </div>
           </div>
 
@@ -149,7 +172,7 @@ const triggerDownload = (blob, filename) => {
             </select>
           </div>
 
-          <button class="action-btn download-btn" @click="downloadFile">
+          <button class="btn-neon primary" @click="downloadFile" v-ripple>
             <Download size="18" />
             Download
           </button>
@@ -160,12 +183,6 @@ const triggerDownload = (blob, filename) => {
 </template>
 
 <style scoped>
-.tool-container.full-width {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-}
-
 .tool-panel {
   padding: 1rem;
   display: flex;
@@ -261,31 +278,21 @@ const triggerDownload = (blob, filename) => {
 }
 
 .size-control {
-  min-width: 280px;
+  width: 100%;
+}
+
+@media (max-width: 480px) {
+  .size-control {
+    border-radius: 8px;
+  }
+  .size-control .control-btn {
+    flex: 1;
+  }
 }
 
 .format-select {
   min-width: 100px !important;
 }
 
-.download-btn {
-  height: 40px;
-  padding: 0 1.5rem;
-  background: var(--primary-accent);
-  color: #000;
-  border: none;
-  border-radius: 8px;
-  font-weight: 600;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.download-btn:hover {
-  opacity: 0.9;
-  transform: translateY(-1px);
-}
 </style>
 
diff --git a/src/components/tools/QrScanner.vue b/src/components/tools/QrScanner.vue
index f833000..9bb13b0 100644
--- a/src/components/tools/QrScanner.vue
+++ b/src/components/tools/QrScanner.vue
@@ -307,7 +307,7 @@ const isUrl = (string) => {
 
             <div v-if="error" class="error-overlay">
               <p>{{ error }}</p>
-              <button @click="startScan" class="retry-btn">Retry</button>
+              <button @click="startScan" class="retry-btn" v-ripple>Retry</button>
             </div>
 
             <button
@@ -315,6 +315,7 @@ const isUrl = (string) => {
               class="switch-camera-btn"
               @click.stop="switchCamera"
               title="Switch Camera"
+              v-ripple
             >
               <SwitchCamera size="24" />
             </button>
@@ -324,13 +325,13 @@ const isUrl = (string) => {
             <div class="results-header">
               <h3>Scanned Codes ({{ scannedCodes.length }})</h3>
               <div v-if="scannedCodes.length > 0" class="header-actions">
-                <button class="icon-btn" @click="copyAll" title="Copy All">
+                <button class="icon-btn" @click="copyAll" title="Copy All" v-ripple>
                   <Copy size="18" />
                 </button>
-                <button class="icon-btn" @click="downloadJson" title="Download JSON">
+                <button class="icon-btn" @click="downloadJson" title="Download JSON" v-ripple>
                   <Download size="18" />
                 </button>
-                <button class="icon-btn delete-btn" @click="clearHistory" title="Clear All">
+                <button class="icon-btn delete-btn" @click="clearHistory" title="Clear All" v-ripple>
                   <Trash2 size="18" />
                 </button>
               </div>
@@ -349,10 +350,10 @@ const isUrl = (string) => {
                   </div>
                 </div>
                 <div class="item-actions">
-                  <button class="icon-btn" @click="copyToClipboard(code.value)" title="Copy">
+                  <button class="icon-btn" @click="copyToClipboard(code.value)" title="Copy" v-ripple>
                     <Copy size="18" />
                   </button>
-                  <button class="icon-btn delete-btn" @click="removeCode(code.id)" title="Remove">
+                  <button class="icon-btn delete-btn" @click="removeCode(code.id)" title="Remove" v-ripple>
                     <Trash2 size="18" />
                   </button>
                 </div>
@@ -369,12 +370,6 @@ const isUrl = (string) => {
 </template>
 
 <style scoped>
-.tool-container.full-width {
-  max-width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-}
 
 .scanner-content {
   display: flex;
diff --git a/src/components/tools/UrlCleaner.vue b/src/components/tools/UrlCleaner.vue
index 42c3549..d9a7708 100644
--- a/src/components/tools/UrlCleaner.vue
+++ b/src/components/tools/UrlCleaner.vue
@@ -110,7 +110,7 @@ onUnmounted(() => {
       <div class="panel-header">
         <h2 class="tool-title">URL Cleaner</h2>
         <div class="header-actions">
-          <button class="icon-btn settings-btn" @click="showExceptionsModal = true" title="Cleaning Exceptions">
+          <button class="icon-btn settings-btn" @click="showExceptionsModal = true" title="Cleaning Exceptions" v-ripple>
             <Settings size="20" />
           </button>
           <ExtensionStatus :isReady="isExtensionReady" />
@@ -129,7 +129,7 @@ onUnmounted(() => {
         </div>
 
         <div class="watch-toggle">
-          <button class="btn-neon" @click="handleClean">
+          <button class="btn-neon" @click="handleClean" v-ripple>
             Clean
           </button>
           <button
@@ -138,6 +138,7 @@ onUnmounted(() => {
             @click="toggleWatch"
             :disabled="!isExtensionReady"
             :title="!isExtensionReady ? 'Extension required for auto-watch' : 'Automatically clean URLs from clipboard'"
+            v-ripple
           >
             <Power size="18" />
             <span>Watch Clipboard</span>
@@ -150,13 +151,13 @@ onUnmounted(() => {
         <div class="history-header">
           <h3>Cleaned URLs ({{ cleanedHistory.length }})</h3>
           <div class="history-actions">
-            <button class="icon-btn" @click="copyAllUrls" title="Copy all URLs">
+            <button class="icon-btn" @click="copyAllUrls" title="Copy all URLs" v-ripple>
               <Copy size="18" />
             </button>
-            <button class="icon-btn" @click="downloadJson" title="Download JSON">
+            <button class="icon-btn" @click="downloadJson" title="Download JSON" v-ripple>
               <Download size="18" />
             </button>
-            <button class="icon-btn delete-btn" @click="clearHistory" title="Clear History">
+            <button class="icon-btn delete-btn" @click="clearHistory" title="Clear History" v-ripple>
               <Trash2 size="18" />
             </button>
           </div>
@@ -175,13 +176,13 @@ onUnmounted(() => {
               </div>
             </div>
             <div class="item-actions">
-              <button class="icon-btn" @click="copyToClipboard(item.cleaned)" title="Copy">
+              <button class="icon-btn" @click="copyToClipboard(item.cleaned)" title="Copy" v-ripple>
                 <Copy size="18" />
               </button>
               <a :href="item.cleaned" target="_blank" class="icon-btn" title="Open">
                 <ExternalLink size="18" />
               </a>
-              <button class="icon-btn delete-btn" @click="removeEntry(item.id)" title="Remove">
+              <button class="icon-btn delete-btn" @click="removeEntry(item.id)" title="Remove" v-ripple>
                 <X size="18" />
               </button>
             </div>
@@ -205,13 +206,6 @@ onUnmounted(() => {
 </template>
 
 <style scoped>
-.tool-container.full-width {
-  max-width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-}
-
 .input-section {
   display: flex;
   flex-direction: column;
diff --git a/src/components/tools/UrlCleanerExceptionsModal.vue b/src/components/tools/UrlCleanerExceptionsModal.vue
index ecb11e3..93384e0 100644
--- a/src/components/tools/UrlCleanerExceptionsModal.vue
+++ b/src/components/tools/UrlCleanerExceptionsModal.vue
@@ -30,7 +30,7 @@ onUnmounted(() => {
 
 const newRule = ref({
   domainPattern: '',
-  keepParams: '',
+  keepParams: [],
   keepHash: false,
   keepAllParams: false
 })
@@ -43,10 +43,12 @@ const localExceptions = computed({
 const addRule = () => {
   if (!newRule.value.domainPattern) return
 
-  const params = newRule.value.keepParams
-    .split(',')
-    .map(p => p.trim())
-    .filter(p => p)
+  // Flush any pending text in the param input before adding rule
+  if (pendingParamInput.value.trim()) {
+    addPendingParam(pendingParamInput.value)
+  }
+
+  const params = [...newRule.value.keepParams]
 
   const existingRuleIndex = localExceptions.value.findIndex(
     r => r.domainPattern === newRule.value.domainPattern
@@ -92,19 +94,48 @@ const addRule = () => {
   // Reset form
   newRule.value = {
     domainPattern: '',
-    keepParams: '',
+    keepParams: [],
     keepHash: false,
     keepAllParams: false
   }
+  pendingParamInput.value = ''
+}
+
+const pendingParamInput = ref('')
+
+const handleParamInputKeydown = (e) => {
+  if (e.key === 'Enter' || e.key === ',' || e.key === ' ') {
+    e.preventDefault()
+    addPendingParam(pendingParamInput.value)
+  } else if (e.key === 'Backspace' && pendingParamInput.value === '') {
+    // Remove last param if backspace is pressed on empty input
+    if (newRule.value.keepParams.length > 0) {
+      newRule.value.keepParams.pop()
+    }
+  }
+}
+
+const addPendingParam = (val) => {
+  const cleanVals = val.split(/[\s,]+/).map(v => v.trim()).filter(Boolean)
+  if (cleanVals.length > 0) {
+    const updatedParams = [...new Set([...newRule.value.keepParams, ...cleanVals])]
+    newRule.value.keepParams = updatedParams
+  }
+  pendingParamInput.value = ''
+}
+
+const removeNewRuleParam = (paramToRemove) => {
+  newRule.value.keepParams = newRule.value.keepParams.filter(p => p !== paramToRemove)
 }
 
 const editRule = (rule) => {
   newRule.value = {
     domainPattern: rule.domainPattern,
-    keepParams: Array.isArray(rule.keepParams) ? rule.keepParams.join(', ') : '',
+    keepParams: Array.isArray(rule.keepParams) ? [...rule.keepParams] : [],
     keepHash: !!rule.keepHash,
     keepAllParams: !!rule.keepAllParams
   }
+  pendingParamInput.value = ''
 }
 
 const removeRule = (id) => {
@@ -172,7 +203,7 @@ const resetToDefault = (ruleId) => {
 <template>
   <Teleport to="body">
     <div v-if="isOpen" class="modal-overlay" @click.self="$emit('close')">
-      <div class="modal-content">
+      <div class="modal-content glass-panel">
         <div class="modal-header">
           <h3>URL Cleaning Exceptions</h3>
           <button class="close-btn" @click="$emit('close')">
@@ -195,25 +226,35 @@ const resetToDefault = (ruleId) => {
                 class="input-field"
                 @keyup.enter="addRule"
               >
-              <input
-                v-model="newRule.keepParams"
-                placeholder="Keep params (comma separated, e.g. v, id)"
-                class="input-field"
-                @keyup.enter="addRule"
-              >
+              <div class="token-input-field input-field" @click="$refs.paramInput?.focus()">
+                <span v-for="param in newRule.keepParams" :key="param" class="token-badge">
+                  {{ param }}
+                  <button class="remove-token-btn" @click.stop="removeNewRuleParam(param)">
+                    <X size="12" />
+                  </button>
+                </span>
+                <input
+                  ref="paramInput"
+                  v-model="pendingParamInput"
+                  placeholder="Params (Space, Comma or Enter to add)"
+                  class="token-raw-input"
+                  @keydown="handleParamInputKeydown"
+                  @blur="addPendingParam(pendingParamInput)"
+                >
+              </div>
             </div>
             <div class="form-row checkbox-row">
               <div class="checkbox-group">
-                <label class="checkbox-label">
+                <label class="checkbox-label" v-ripple>
                   <input type="checkbox" v-model="newRule.keepHash">
                   Keep Anchor (#)
                 </label>
-                <label class="checkbox-label">
+                <label class="checkbox-label" v-ripple>
                   <input type="checkbox" v-model="newRule.keepAllParams">
                   Keep all params
                 </label>
               </div>
-              <button class="btn-neon small" @click="addRule" :disabled="!newRule.domainPattern">
+              <button class="btn-neon small" @click="addRule" :disabled="!newRule.domainPattern" v-ripple>
                 <Plus size="16" /> Add Rule
               </button>
             </div>
@@ -262,6 +303,7 @@ const resetToDefault = (ruleId) => {
                   class="icon-btn"
                   @click="toggleRule(rule.id)"
                   :title="rule.isEnabled ? 'Disable rule' : 'Enable rule'"
+                  v-ripple
                 >
                   <div class="toggle-switch" :class="{ active: rule.isEnabled }"></div>
                 </button>
@@ -271,10 +313,11 @@ const resetToDefault = (ruleId) => {
                   class="icon-btn delete-btn"
                   @click="removeRule(rule.id)"
                   title="Remove rule"
+                  v-ripple
                 >
                   <Trash2 size="18" />
                 </button>
-                <button v-else class="btn-neon small default-reset" @click="resetToDefault(rule.id)" title="Restore default rule">
+                <button v-else class="btn-neon small default-reset" @click="resetToDefault(rule.id)" title="Restore default rule" v-ripple>
                   <RotateCcw size="16" /> Default
                 </button>
               </div>
@@ -303,10 +346,6 @@ const resetToDefault = (ruleId) => {
 }
 
 .modal-content {
-  background: var(--glass-bg);
-  backdrop-filter: blur(16px);
-  -webkit-backdrop-filter: blur(16px);
-  border: 1px solid var(--glass-border);
   border-radius: 16px;
   padding: 0;
   max-width: 800px;
@@ -314,7 +353,6 @@ const resetToDefault = (ruleId) => {
   max-height: 85vh;
   display: flex;
   flex-direction: column;
-  box-shadow: var(--glass-shadow);
   color: var(--text-color);
 }
 
@@ -439,10 +477,63 @@ const resetToDefault = (ruleId) => {
   outline: none;
 }
 
-.input-field:focus {
+.input-field:focus, .token-input-field:focus-within {
   border-color: var(--primary-accent);
 }
 
+.token-input-field {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.4rem;
+  align-items: center;
+  padding: 0.4rem 0.6rem;
+  cursor: text;
+}
+
+.token-raw-input {
+  flex: 1;
+  min-width: 150px;
+  background: none;
+  border: none;
+  color: var(--text-color);
+  outline: none;
+  font-size: 0.95rem;
+  padding: 0.2rem 0;
+}
+
+.token-raw-input:focus {
+  border: none !important;
+  box-shadow: none !important;
+}
+
+.token-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  background: rgba(var(--primary-accent-rgb), 0.15);
+  border: 1px solid rgba(var(--primary-accent-rgb), 0.3);
+  color: var(--primary-accent);
+  padding: 0.15rem 0.4rem;
+  border-radius: 4px;
+  font-size: 0.85rem;
+}
+
+.remove-token-btn {
+  background: none;
+  border: none;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  color: inherit;
+  cursor: pointer;
+  opacity: 0.7;
+  transition: opacity 0.2s;
+}
+
+.remove-token-btn:hover {
+  opacity: 1;
+}
+
 .checkbox-label {
   display: flex;
   align-items: center;
@@ -450,6 +541,31 @@ const resetToDefault = (ruleId) => {
   color: var(--text-secondary);
   font-size: 0.9rem;
   cursor: pointer;
+  padding: 0.4rem 0.8rem;
+  background: var(--toggle-bg);
+  border: 1px solid var(--toggle-border);
+  border-radius: 6px;
+  transition: all 0.2s ease;
+  user-select: none;
+}
+
+.checkbox-label:hover {
+  border-color: var(--toggle-hover-border);
+  color: var(--text-color);
+}
+
+.checkbox-label:has(input:checked) {
+  background: rgba(var(--primary-accent-rgb), 0.2);
+  border-color: var(--primary-accent);
+  color: var(--primary-accent);
+}
+
+.checkbox-label input {
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+  height: 0;
+  width: 0;
 }
 
 .btn-neon.small {
@@ -505,16 +621,7 @@ const resetToDefault = (ruleId) => {
   flex-wrap: wrap;
 }
 
-.detail-tag {
-  font-size: 0.8rem;
-  background: rgba(255, 255, 255, 0.1);
-  padding: 0.2rem 0.5rem;
-  border-radius: 4px;
-  color: var(--text-secondary);
-  display: flex;
-  align-items: center;
-  gap: 0.4rem;
-}
+
 
 .remove-param-btn {
   background: none;
diff --git a/src/components/tools/common/ExtensionStatus.vue b/src/components/tools/common/ExtensionStatus.vue
index 4ea2474..6054d37 100644
--- a/src/components/tools/common/ExtensionStatus.vue
+++ b/src/components/tools/common/ExtensionStatus.vue
@@ -76,7 +76,7 @@ onUnmounted(() => {
             The extension is active and ready to process your clipboard in the background.
           </p>
           <div class="modal-actions">
-            <button class="btn-neon" @click="showModal = false">Got it!</button>
+            <button class="btn-neon" @click="showModal = false" v-ripple>Got it!</button>
           </div>
         </div>
       </div>
@@ -132,16 +132,11 @@ onUnmounted(() => {
 }
 
 .modal-content {
-  background: var(--glass-bg);
-  backdrop-filter: blur(16px);
-  -webkit-backdrop-filter: blur(16px);
-  border: 1px solid var(--glass-border);
   border-radius: 16px;
   padding: 2.5rem;
   max-width: 500px;
   width: 90%;
   position: relative;
-  box-shadow: var(--glass-shadow);
   text-align: center;
   color: var(--text-color);
 }
diff --git a/src/style.css b/src/style.css
index 544733e..ffc7151 100644
--- a/src/style.css
+++ b/src/style.css
@@ -47,12 +47,6 @@
   --list-border: rgba(255, 255, 255, 0.12);
   --header-bg: rgba(0, 0, 0, 0.6);
 
-  color: var(--text-color);
-  background-color: #242424;
-  /* Fallback */
-  background: var(--bg-gradient);
-  background-attachment: fixed;
-
   font-synthesis: none;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
@@ -60,9 +54,9 @@
 }
 
 :root[data-theme="light"] {
-  --bg-gradient: radial-gradient(circle at center, #f8fafc 0%, #e2e8f0 100%);
-  --glass-bg: rgba(255, 255, 255, 0.85);
-  --glass-border: rgba(15, 23, 42, 0.12);
+  --bg-gradient: radial-gradient(circle at center, #ffffff 0%, #ddd 100%);
+  --glass-bg: rgba(255, 255, 255, 0.45);
+  --glass-border: rgba(15, 23, 42, 0.2);
   --glass-shadow: 0 8px 32px 0 rgba(30, 41, 59, 0.15);
   --text-color: #0f172a;
   --text-strong: #020617;
@@ -102,6 +96,12 @@ body {
   overflow-x: hidden;
   user-select: none;
   -webkit-user-select: none;
+
+  color: var(--text-color);
+  background-color: var(--bg-gradient);
+  /* fallback but works if variable contains simple color */
+  background: var(--bg-gradient);
+  background-attachment: fixed;
 }
 
 .selectable {
@@ -143,6 +143,10 @@ body {
   padding: 0.5rem;
 }
 
+.tool-container.full-width {
+  flex-direction: column;
+}
+
 .tool-panel {
   width: 100%;
   padding: 1rem;
@@ -302,6 +306,24 @@ button:focus {
   border-color: var(--accent-cyan);
 }
 
+.btn-neon.primary {
+  background: var(--primary-accent);
+  color: #000;
+  border-color: var(--primary-accent);
+  font-weight: 600;
+}
+
+.btn-neon.primary:hover {
+  background: var(--primary-accent);
+  opacity: 0.9;
+  box-shadow: 0 0 20px rgba(0, 242, 255, 0.4);
+}
+
+:root[data-theme="light"] .btn-neon.primary:hover {
+  box-shadow: 0 0 18px rgba(14, 165, 233, 0.4);
+}
+
+
 .btn-neon:active {
   transform: translateY(1px);
   box-shadow: var(--button-active-shadow);
@@ -360,12 +382,20 @@ button:focus {
   outline: none;
 }
 
+button:focus-visible,
+a:focus-visible {
+  outline: 2px solid var(--primary-accent);
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+
 input:focus,
 select:focus,
 textarea:focus,
 .number-control:focus-within {
   border-color: var(--primary-accent) !important;
   box-shadow: 0 0 0 1px var(--primary-accent) !important;
+  transition: border-color 0.2s, box-shadow 0.2s;
 }
 
 /* --- Global Checkbox Styles --- */
@@ -505,6 +535,19 @@ textarea:focus,
   border: 1px solid rgba(0, 0, 0, 0.06);
 }
 
+.detail-tag {
+  font-size: 0.8rem;
+  background: var(--list-hover-bg);
+  border: 1px solid var(--list-border);
+  padding: 0.2rem 0.5rem;
+  border-radius: 4px;
+  color: var(--text-secondary);
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  transition: all 0.2s ease;
+}
+
 /* --- Global Number Control Styles --- */
 .number-control {
   display: flex;
@@ -513,7 +556,10 @@ textarea:focus,
   border: 1px solid var(--toggle-border);
   border-radius: 8px;
   overflow: hidden;
-  height: 40px;
+  height: auto;
+  min-height: 40px;
+  flex-wrap: wrap;
+  /* allow wrapping on very small screens */
 }
 
 .control-btn {
@@ -541,11 +587,12 @@ textarea:focus,
   border: none;
   color: var(--text-color);
   flex: 1;
-  min-width: 60px;
+  min-width: 40px;
   text-align: center;
   font-size: 1rem;
   font-weight: 400;
   appearance: textfield;
+  padding: 0.2rem;
 }
 
 .number-input::-webkit-outer-spin-button,
diff --git a/src/workers/qrcode.worker.js b/src/workers/qrcode.worker.js
new file mode 100644
index 0000000..f08b696
--- /dev/null
+++ b/src/workers/qrcode.worker.js
@@ -0,0 +1,22 @@
+import QRCode from 'qrcode'
+
+self.onmessage = async (e) => {
+    const { id, text, ecc } = e.data
+
+    if (!text) {
+        self.postMessage({ id, svgContent: '' })
+        return
+    }
+
+    try {
+        const svgContent = await QRCode.toString(text, {
+            type: 'svg',
+            errorCorrectionLevel: ecc,
+            margin: 1,
+        })
+
+        self.postMessage({ id, svgContent })
+    } catch (err) {
+        self.postMessage({ id, error: err.message })
+    }
+}