diff --git a/package-lock.json b/package-lock.json
index 138b76d..2282df0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -52,6 +52,7 @@
         "tailwindcss": "^3.3.3",
         "typescript": "^5.0.2",
         "vite": "^7.2.0",
+        "vitest": "^4.1.10",
         "webextension-polyfill": "^0.12.0"
       }
     },
@@ -2285,6 +2286,13 @@
         "win32"
       ]
     },
+    "node_modules/@standard-schema/spec": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz",
+      "integrity": "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@tanstack/query-core": {
       "version": "4.32.6",
       "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-4.32.6.tgz",
@@ -2365,6 +2373,17 @@
         "@babel/types": "^7.28.2"
       }
     },
+    "node_modules/@types/chai": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/@types/chai/-/chai-5.2.3.tgz",
+      "integrity": "sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/deep-eql": "*",
+        "assertion-error": "^2.0.1"
+      }
+    },
     "node_modules/@types/chrome": {
       "version": "0.0.243",
       "resolved": "https://registry.npmjs.org/@types/chrome/-/chrome-0.0.243.tgz",
@@ -2374,6 +2393,13 @@
         "@types/har-format": "*"
       }
     },
+    "node_modules/@types/deep-eql": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@types/deep-eql/-/deep-eql-4.0.2.tgz",
+      "integrity": "sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/estree": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
@@ -2677,6 +2703,119 @@
         "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0"
       }
     },
+    "node_modules/@vitest/expect": {
+      "version": "4.1.10",
+      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-4.1.10.tgz",
+      "integrity": "sha512-YsCn+qAk1GWjQOWFEsEcL2gNQ0zmVmQu3T03qP6UyjhtmdtwtbuI+DASn/7iQB3HGTXkdBwGddzxPlmiql5vlA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@standard-schema/spec": "^1.1.0",
+        "@types/chai": "^5.2.2",
+        "@vitest/spy": "4.1.10",
+        "@vitest/utils": "4.1.10",
+        "chai": "^6.2.2",
+        "tinyrainbow": "^3.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/mocker": {
+      "version": "4.1.10",
+      "resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-4.1.10.tgz",
+      "integrity": "sha512-v0xaezt+DKEmKfaxg133ldzADrwLGd7Ze1MfQQTYfvs8OqZIwbxyxaYURivwV7sWy5fqn3rH5uOrSp07bp44Ow==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/spy": "4.1.10",
+        "estree-walker": "^3.0.3",
+        "magic-string": "^0.30.21"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "msw": "^2.4.9",
+        "vite": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "msw": {
+          "optional": true
+        },
+        "vite": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vitest/pretty-format": {
+      "version": "4.1.10",
+      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-4.1.10.tgz",
+      "integrity": "sha512-W1HsjSH4MXQ9YfmmhLAoIYf1HRfekQCGngeIgcei6MP5QQGWUe0gkopdZQaVCFO+JDJMrAJGwa5pRpNpvy4P8Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tinyrainbow": "^3.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/runner": {
+      "version": "4.1.10",
+      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-4.1.10.tgz",
+      "integrity": "sha512-IKI6kpIH+LmpROplyLwBBaCfMgOZOMsygVa6BARD6ahA04VRuJSa6OaVG7kRvSEMD870Vd91rSSw0eegtWyLGg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/utils": "4.1.10",
+        "pathe": "^2.0.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/snapshot": {
+      "version": "4.1.10",
+      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-4.1.10.tgz",
+      "integrity": "sha512-xRkfOT1qpTAi/Ti4Y1LtfRc3kEuqxGw59eN2jN9pRWMtS/XDevekhcFSqvQqjUNGksfjMJu3Y+oJ+4Ypn2OaJw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/pretty-format": "4.1.10",
+        "@vitest/utils": "4.1.10",
+        "magic-string": "^0.30.21",
+        "pathe": "^2.0.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/spy": {
+      "version": "4.1.10",
+      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-4.1.10.tgz",
+      "integrity": "sha512-PLf/Ugvoq5wO/b4rwYCR1h2PSIdXz7wnkQFMiUpLdtM7l6pqVFcQIBEHyT1+l+cj7mNwAfZHzqXqDyjvOuwbDw==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/utils": {
+      "version": "4.1.10",
+      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-4.1.10.tgz",
+      "integrity": "sha512-fy9am/HWxbaGt/Sawrp90vt6Y6jQwf1RX77cz3uwoJwJVMli/e1IEwRPnMNJ7vKfPTwo0diXifkpPvwH9v7nGA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/pretty-format": "4.1.10",
+        "convert-source-map": "^2.0.0",
+        "tinyrainbow": "^3.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
     "node_modules/acorn": {
       "version": "8.10.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.10.0.tgz",
@@ -2771,6 +2910,16 @@
         "node": ">=8"
       }
     },
+    "node_modules/assertion-error": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-2.0.1.tgz",
+      "integrity": "sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
@@ -2951,6 +3100,16 @@
       ],
       "license": "CC-BY-4.0"
     },
+    "node_modules/chai": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/chai/-/chai-6.2.2.tgz",
+      "integrity": "sha512-NUPRluOfOiTKBKvWPtSD4PhFvWCqOi0BGStNWs57X9js7XGTprSmFoz5F0tWhR4WPjNeR9jXqdC7/UpSJTnlRg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/chokidar": {
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
@@ -3440,6 +3599,13 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/es-module-lexer": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-2.3.1.tgz",
+      "integrity": "sha512-shc1dbU90Yl/xq1QrC7QRtfcwURZuVRfPhZbDoldJ1cn1gzDvBaBWlv0eFolj5+0znnPJz5TXLxsN77X/12KTA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/es-object-atoms": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
@@ -3769,6 +3935,16 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/estree-walker": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
+      "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0"
+      }
+    },
     "node_modules/esutils": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
@@ -3778,6 +3954,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/expect-type": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/expect-type/-/expect-type-1.4.0.tgz",
+      "integrity": "sha512-KfYbmpRm0VbLjEvVa9yGwCi9GI34xvi7A/HXYWQO65CSD2u3MczUJSuwXKFIxlGsgBQizV9q5J9NHj4VG0n+pA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -4402,6 +4588,16 @@
         "react": "^16.5.1 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/magic-string": {
+      "version": "0.30.21",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
+      "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.5"
+      }
+    },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
@@ -4550,6 +4746,20 @@
         "node": ">= 6"
       }
     },
+    "node_modules/obug": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/obug/-/obug-2.1.4.tgz",
+      "integrity": "sha512-4a+OsYv9UktOJKE+l1A4OufDgdRF9PifWj+tJnHURo/P+WOxpG4GzUFL9qCalmWauao6ogiG+QvnCovwPoyAWA==",
+      "dev": true,
+      "funding": [
+        "https://github.com/sponsors/sxzz",
+        "https://opencollective.com/debug"
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20.0"
+      }
+    },
     "node_modules/once": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
@@ -4657,6 +4867,13 @@
         "node": ">=8"
       }
     },
+    "node_modules/pathe": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz",
+      "integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -5182,6 +5399,13 @@
         "node": ">=8"
       }
     },
+    "node_modules/siginfo": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/siginfo/-/siginfo-2.0.0.tgz",
+      "integrity": "sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/slash": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
@@ -5211,6 +5435,20 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/stackback": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz",
+      "integrity": "sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/std-env": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/std-env/-/std-env-4.2.0.tgz",
+      "integrity": "sha512-oCUKSupKTHX53EyjDtuZQ64pjLJ6yYCtpmEw0goYxtjG9KpbRe8KAsl2tBUGU9DyMcJ0RwJ8GqJAFzMXcXW1Rw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/strip-ansi": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
@@ -5373,6 +5611,23 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/tinybench": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.9.0.tgz",
+      "integrity": "sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tinyexec": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-1.2.4.tgz",
+      "integrity": "sha512-SHf/r48b7vOrjve9PxJo3MN5v5yuyjHvdUcrQffT3WXMUfnGmHDVbC4k3sHJaJTgZCwpUplIaAo5ANtMyp3YHg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/tinyglobby": {
       "version": "0.2.15",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
@@ -5421,6 +5676,16 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/tinyrainbow": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/tinyrainbow/-/tinyrainbow-3.1.0.tgz",
+      "integrity": "sha512-Bf+ILmBgretUrdJxzXM0SgXLZ3XfiaUuOj/IKQHuTXip+05Xn+uyEYdVg0kYDipTBcLrCVyUzAPz7QmArb0mmw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -5699,6 +5964,109 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/vitest": {
+      "version": "4.1.10",
+      "resolved": "https://registry.npmjs.org/vitest/-/vitest-4.1.10.tgz",
+      "integrity": "sha512-R9jUTe5S4Qb0HCd4TNqpC7oGcrMssMRGXLW80ubjWsW9VH5GF8y1Y0SFLY9AbqSk6nt0PnOx4H4WNJYZ13GUPw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/expect": "4.1.10",
+        "@vitest/mocker": "4.1.10",
+        "@vitest/pretty-format": "4.1.10",
+        "@vitest/runner": "4.1.10",
+        "@vitest/snapshot": "4.1.10",
+        "@vitest/spy": "4.1.10",
+        "@vitest/utils": "4.1.10",
+        "es-module-lexer": "^2.0.0",
+        "expect-type": "^1.3.0",
+        "magic-string": "^0.30.21",
+        "obug": "^2.1.1",
+        "pathe": "^2.0.3",
+        "picomatch": "^4.0.3",
+        "std-env": "^4.0.0-rc.1",
+        "tinybench": "^2.9.0",
+        "tinyexec": "^1.0.2",
+        "tinyglobby": "^0.2.15",
+        "tinyrainbow": "^3.1.0",
+        "vite": "^6.0.0 || ^7.0.0 || ^8.0.0",
+        "why-is-node-running": "^2.3.0"
+      },
+      "bin": {
+        "vitest": "vitest.mjs"
+      },
+      "engines": {
+        "node": "^20.0.0 || ^22.0.0 || >=24.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "@edge-runtime/vm": "*",
+        "@opentelemetry/api": "^1.9.0",
+        "@types/node": "^20.0.0 || ^22.0.0 || >=24.0.0",
+        "@vitest/browser-playwright": "4.1.10",
+        "@vitest/browser-preview": "4.1.10",
+        "@vitest/browser-webdriverio": "4.1.10",
+        "@vitest/coverage-istanbul": "4.1.10",
+        "@vitest/coverage-v8": "4.1.10",
+        "@vitest/ui": "4.1.10",
+        "happy-dom": "*",
+        "jsdom": "*",
+        "vite": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@edge-runtime/vm": {
+          "optional": true
+        },
+        "@opentelemetry/api": {
+          "optional": true
+        },
+        "@types/node": {
+          "optional": true
+        },
+        "@vitest/browser-playwright": {
+          "optional": true
+        },
+        "@vitest/browser-preview": {
+          "optional": true
+        },
+        "@vitest/browser-webdriverio": {
+          "optional": true
+        },
+        "@vitest/coverage-istanbul": {
+          "optional": true
+        },
+        "@vitest/coverage-v8": {
+          "optional": true
+        },
+        "@vitest/ui": {
+          "optional": true
+        },
+        "happy-dom": {
+          "optional": true
+        },
+        "jsdom": {
+          "optional": true
+        },
+        "vite": {
+          "optional": false
+        }
+      }
+    },
+    "node_modules/vitest/node_modules/picomatch": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.5.tgz",
+      "integrity": "sha512-RvwwcruNjI1ncT5xRakeyS9Lf8lcItv34KD+aif+VH9kduAyfYBipGh12274xtenIPZ119/R9BdTBa8gAwSh0A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
     "node_modules/webextension-polyfill": {
       "version": "0.12.0",
       "resolved": "https://registry.npmjs.org/webextension-polyfill/-/webextension-polyfill-0.12.0.tgz",
@@ -5721,6 +6089,23 @@
         "node": ">= 8"
       }
     },
+    "node_modules/why-is-node-running": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/why-is-node-running/-/why-is-node-running-2.3.0.tgz",
+      "integrity": "sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "siginfo": "^2.0.0",
+        "stackback": "0.0.2"
+      },
+      "bin": {
+        "why-is-node-running": "cli.js"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
diff --git a/package.json b/package.json
index a96356d..2c79e34 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "build:safari": "tsc && vite build --outDir dist-safari && cp ./manifest.safari.json dist-safari/manifest.json && cp public/*.png dist-safari/",
     "convert:safari": "xcrun safari-web-extension-converter dist-safari/ --project-location safari/ --app-name Linkwarden --bundle-identifier app.linkwarden.safari-extension --swift --macos-only --no-prompt --no-open",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "test": "vitest run",
     "preview": "vite preview"
   },
   "dependencies": {
@@ -58,6 +59,7 @@
     "tailwindcss": "^3.3.3",
     "typescript": "^5.0.2",
     "vite": "^7.2.0",
+    "vitest": "^4.1.10",
     "webextension-polyfill": "^0.12.0"
   }
 }
diff --git a/src/@/components/BookmarkForm.tsx b/src/@/components/BookmarkForm.tsx
index 89760a0..5d56cb0 100644
--- a/src/@/components/BookmarkForm.tsx
+++ b/src/@/components/BookmarkForm.tsx
@@ -38,6 +38,7 @@ import {
 } from './ui/Command.tsx';
 import { Checkbox } from './ui/CheckBox.tsx';
 import { Label } from './ui/Label.tsx';
+import { dedupeTags } from '../lib/tag-utils.ts';
 
 const BookmarkForm = () => {
   const [openOptions, setOpenOptions] = useState<boolean>(false);
@@ -45,6 +46,7 @@ const BookmarkForm = () => {
   const [uploadImage, setUploadImage] = useState<boolean>(false);
   const [state, setState] = useState<'capturing' | 'uploading' | null>(null);
   const [tagSearch, setTagSearch] = useState<string>('');
+  const [debouncedTagSearch, setDebouncedTagSearch] = useState<string>('');
 
   const [isConfigured, setIsConfigured] = useState(false);
   const [isDuplicate, setIsDuplicate] = useState(false);
@@ -152,10 +154,18 @@ const BookmarkForm = () => {
     };
 
     setTabInformation();
-  }, []);
+  }, [form]);
 
   const { handleSubmit, control } = form;
 
+  useEffect(() => {
+    const timeoutId = window.setTimeout(() => {
+      setDebouncedTagSearch(tagSearch.trim());
+    }, 200);
+
+    return () => window.clearTimeout(timeoutId);
+  }, [tagSearch]);
+
   // useEffect(() => {
   //   const syncBookmarks = async () => {
   //     try {
@@ -203,11 +213,12 @@ const BookmarkForm = () => {
         config?.baseUrl as string,
         config?.apiKey as string
       ),
-    enabled: isConfigured && openOptions,
+    enabled: isConfigured,
   });
-  const effectiveTagSearch = shouldUseTagSearch ? tagSearch : '';
+  const effectiveTagSearch = shouldUseTagSearch ? debouncedTagSearch : '';
   const {
     isLoading: loadingTags,
+    isFetching: fetchingTags,
     data: tagsData,
     error: tagsError,
     hasNextPage,
@@ -215,28 +226,35 @@ const BookmarkForm = () => {
     fetchNextPage,
   } = useInfiniteQuery(
     ['tags', config?.baseUrl, config?.apiKey, effectiveTagSearch],
-    async ({ pageParam = 0 }) => {
+    async ({ pageParam = 0, signal }) => {
       return await getTags(
         config?.baseUrl as string,
         config?.apiKey as string,
         pageParam,
-        effectiveTagSearch
+        effectiveTagSearch,
+        signal
       );
     },
     {
       getNextPageParam: (lastPage) => lastPage.nextCursor ?? undefined,
-      enabled: isConfigured && openOptions,
+      enabled: isConfigured,
     }
   );
 
   const tags = useMemo(() => {
-    return (
-      tagsData?.pages
-        .flatMap((page) => page.tags)
-        .sort((a, b) => a.name.localeCompare(b.name)) ?? []
+    const loadedTags = tagsData?.pages.flatMap((page) => page.tags) ?? [];
+
+    return dedupeTags(loadedTags).sort((a, b) =>
+      a.name.localeCompare(b.name, undefined, { sensitivity: 'base' })
     );
   }, [tagsData]);
 
+  const normalizedTagSearch = tagSearch.trim();
+  const isSearchingTags =
+    shouldUseTagSearch &&
+    Boolean(normalizedTagSearch) &&
+    (normalizedTagSearch !== effectiveTagSearch || fetchingTags);
+
   return (
     <div>
       <Form {...form}>
@@ -426,6 +444,36 @@ const BookmarkForm = () => {
             )}
           />
 
+          <FormField
+            control={control}
+            name="tags"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Tags</FormLabel>
+                <TagInput
+                  onChange={field.onChange}
+                  value={field.value ?? []}
+                  tags={tags}
+                  hasNextPage={hasNextPage}
+                  isFetchingNextPage={isFetchingNextPage}
+                  isLoading={loadingTags}
+                  isSearching={isSearchingTags}
+                  errorMessage={
+                    tagsError
+                      ? 'Tags could not be loaded. Check your Linkwarden connection.'
+                      : undefined
+                  }
+                  onSearchChange={setTagSearch}
+                  onReachEnd={() => {
+                    if (!hasNextPage || isFetchingNextPage) return;
+                    void fetchNextPage();
+                  }}
+                />
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
           {!openOptions && (
             <Label className="flex items-center gap-2 w-fit cursor-pointer">
               <Checkbox
@@ -438,47 +486,6 @@ const BookmarkForm = () => {
 
           {openOptions && (
             <>
-              {tagsError ? <p>There was an error...</p> : null}
-              <FormField
-                control={control}
-                name="tags"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Tags</FormLabel>
-                    {loadingTags ? (
-                      <TagInput
-                        onChange={field.onChange}
-                        value={[{ name: 'Loading tags...' }]}
-                        tags={[{ id: 1, name: 'Loading tags...' }]}
-                        hasNextPage={false}
-                        isFetchingNextPage={false}
-                      />
-                    ) : tagsError ? (
-                      <TagInput
-                        onChange={field.onChange}
-                        value={[{ name: 'Not found' }]}
-                        tags={[{ id: 1, name: 'Not found' }]}
-                        hasNextPage={false}
-                        isFetchingNextPage={false}
-                      />
-                    ) : (
-                      <TagInput
-                        onChange={field.onChange}
-                        value={field.value ?? []}
-                        tags={tags}
-                        hasNextPage={hasNextPage}
-                        isFetchingNextPage={isFetchingNextPage}
-                        onSearchChange={setTagSearch}
-                        onReachEnd={() => {
-                          if (!hasNextPage || isFetchingNextPage) return;
-                          void fetchNextPage();
-                        }}
-                      />
-                    )}
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
               <FormField
                 control={control}
                 name="name"
diff --git a/src/@/components/TagInput.tsx b/src/@/components/TagInput.tsx
index b32a5d8..00d0dab 100644
--- a/src/@/components/TagInput.tsx
+++ b/src/@/components/TagInput.tsx
@@ -1,10 +1,15 @@
-import { FC, UIEvent, useMemo, useState } from 'react';
+import {
+  FC,
+  KeyboardEvent,
+  UIEvent,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import { Button } from './ui/Button.tsx';
-import { Popover, PopoverContent, PopoverTrigger } from './ui/Popover.tsx';
-import { Check, ChevronsUpDown } from 'lucide-react';
+import { Check, ChevronsUpDown, Loader2, Plus, X } from 'lucide-react';
 import {
   Command,
-  CommandEmpty,
   CommandGroup,
   CommandInput,
   CommandItem,
@@ -12,13 +17,27 @@ import {
 } from './ui/Command.tsx';
 import { cn } from '../lib/utils.ts';
 import { ResponseTags } from '../lib/actions/tags.ts';
+import {
+  addPendingTagSelection,
+  filterAndSortTags,
+  findExactTag,
+  getCreatableTagName,
+  isSameTagName,
+  normalizeTagName,
+  removeTagSelection,
+  TagOption,
+  toggleTagSelection,
+} from '../lib/tag-utils.ts';
 
 interface TagInputProps {
-  onChange: (tags: { name: string }[]) => void;
-  value: { name: string; id?: number }[];
+  onChange: (tags: TagOption[]) => void;
+  value: TagOption[];
   tags: Pick<ResponseTags, 'id' | 'name'>[] | undefined;
   hasNextPage?: boolean;
   isFetchingNextPage?: boolean;
+  isLoading?: boolean;
+  isSearching?: boolean;
+  errorMessage?: string;
   onReachEnd?: () => void;
   onSearchChange?: (value: string) => void;
 }
@@ -29,163 +48,326 @@ export const TagInput: FC<TagInputProps> = ({
   tags,
   hasNextPage,
   isFetchingNextPage,
+  isLoading,
+  isSearching,
+  errorMessage,
   onReachEnd,
   onSearchChange,
 }) => {
   const [open, setOpen] = useState<boolean>(false);
   const [inputValue, setInputValue] = useState<string>('');
-  const filteredTags = useMemo(() => {
-    if (!Array.isArray(tags)) return [];
+  const listRef = useRef<HTMLDivElement>(null);
+  const listScrollTopRef = useRef(0);
+  const selectingWithEnterRef = useRef(false);
 
-    const normalizedInputValue = inputValue.trim().toLowerCase();
+  const availableTags = useMemo(
+    () => (Array.isArray(tags) ? tags : []),
+    [tags]
+  );
+  const filteredTags = useMemo(
+    () => filterAndSortTags(availableTags, inputValue),
+    [availableTags, inputValue]
+  );
+  const exactTag = useMemo(
+    () => findExactTag(availableTags, inputValue),
+    [availableTags, inputValue]
+  );
+  const creatableTagName = useMemo(() => {
+    if (isLoading || isSearching || errorMessage) return null;
+    return getCreatableTagName(inputValue, availableTags, value);
+  }, [
+    availableTags,
+    errorMessage,
+    inputValue,
+    isLoading,
+    isSearching,
+    value,
+  ]);
 
-    if (!normalizedInputValue) return tags;
+  const updateSearch = (search: string) => {
+    setInputValue(search);
+    onSearchChange?.(search);
+  };
 
-    return tags.filter((tag) =>
-      tag.name.toLowerCase().includes(normalizedInputValue)
-    );
-  }, [inputValue, tags]);
+  const handleOpenChange = (nextOpen: boolean) => {
+    setOpen(nextOpen);
+    if (!nextOpen) updateSearch('');
+  };
 
   const handleListScroll = (event: UIEvent<HTMLDivElement>) => {
     if (!hasNextPage || isFetchingNextPage || !onReachEnd) return;
 
     const target = event.currentTarget;
+    listScrollTopRef.current = target.scrollTop;
     const reachedBottom =
       target.scrollTop + target.clientHeight >= target.scrollHeight - 16;
 
     if (reachedBottom) onReachEnd();
   };
 
-  function handleAddTag() {
-    if (inputValue && value.some((tagObj) => tagObj.name === inputValue))
+  const handleCreateTag = () => {
+    const nextValue = addPendingTagSelection(
+      value,
+      availableTags,
+      inputValue
+    );
+
+    if (nextValue === value) return;
+
+    onChange(nextValue);
+    updateSearch('');
+  };
+
+  const handleSelectTag = (tag: TagOption) => {
+    const shouldResetSearch = selectingWithEnterRef.current;
+    selectingWithEnterRef.current = false;
+
+    onChange(toggleTagSelection(value, tag));
+
+    if (shouldResetSearch) {
+      listScrollTopRef.current = 0;
+      updateSearch('');
+    }
+
+    requestAnimationFrame(() => {
+      if (listRef.current) {
+        listRef.current.scrollTop = shouldResetSearch
+          ? 0
+          : listScrollTopRef.current;
+      }
+    });
+  };
+
+  const handleRemoveTag = (tagName: string) => {
+    onChange(removeTagSelection(value, tagName));
+  };
+
+  const handleSearchKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+    if (event.nativeEvent.isComposing) return;
+
+    if (event.key === 'Escape') {
+      event.preventDefault();
+      handleOpenChange(false);
+      return;
+    }
+
+    if (event.key === 'Enter') {
+      selectingWithEnterRef.current = true;
+      requestAnimationFrame(() => {
+        selectingWithEnterRef.current = false;
+      });
+      return;
+    }
+
+    if (event.key !== ',') return;
+
+    event.preventDefault();
+
+    if (exactTag) {
+      const isAlreadySelected = value.some((tag) =>
+        isSameTagName(tag.name, exactTag.name)
+      );
+
+      if (!isAlreadySelected) onChange([...value, exactTag]);
+      updateSearch('');
       return;
-    if (inputValue) {
-      const newTags = [...value, { name: inputValue }];
-      setInputValue('');
-      onSearchChange?.('');
-      onChange(newTags);
     }
-  }
 
-  function handleRemoveTag(tagName: string) {
-    const newTags = value.filter((tagObj) => tagObj.name !== tagName);
-    onChange(newTags);
-  }
+    handleCreateTag();
+  };
+
+  const handleDialogKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    if (event.key !== 'Escape') return;
+
+    event.preventDefault();
+    handleOpenChange(false);
+  };
+
+  const normalizedInputValue = normalizeTagName(inputValue);
+  const showNoResults =
+    !isLoading &&
+    !isSearching &&
+    !errorMessage &&
+    filteredTags.length === 0 &&
+    !creatableTagName;
+  const selectedTagsLabel = value.map((tag) => tag.name).join(', ');
 
   return (
-    <div className="min-w-full inset-x-0">
-      <Popover open={open} onOpenChange={setOpen}>
-        <PopoverTrigger asChild>
-          <Button
-            variant="outline"
-            role="combobox"
-            aria-expanded={open}
-            className="w-full justify-between bg-neutral-100 dark:bg-neutral-900"
-          >
-            {Array.isArray(value) && value.length > 0
-              ? value.map((tag) => tag.name).join(', ')
-              : 'Select tags...'}
-            <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-          </Button>
-        </PopoverTrigger>
-        <div className="min-w-full inset-x-0">
-          <PopoverContent className="min-w-full p-0">
-            <Command className="flex-grow min-w-full" shouldFilter={false}>
-              <CommandInput
-                className="min-w-[280px]"
-                placeholder="Search tag or add tag (Enter)"
-                value={inputValue}
-                onValueChange={(value) => {
-                  setInputValue(value);
-                  onSearchChange?.(value);
-                }}
-                onKeyDown={(e) => {
-                  if (e.key === 'Enter') {
-                    handleAddTag();
-                  }
-                }}
-              />
-              <CommandList
-                className="max-h-[200px]"
-                onScroll={handleListScroll}
+    <div className={cn('min-w-full space-y-2', open && 'h-[600px]')}>
+      <Button
+        type="button"
+        variant="outline"
+        role="combobox"
+        aria-haspopup="dialog"
+        aria-label={
+          selectedTagsLabel
+            ? `Selected tags: ${selectedTagsLabel}`
+            : 'Select tags'
+        }
+        aria-expanded={open}
+        title={selectedTagsLabel || undefined}
+        className="w-full justify-between bg-neutral-100 dark:bg-neutral-900"
+        onClick={() => handleOpenChange(true)}
+      >
+        <span className="truncate">
+          {selectedTagsLabel || 'Select tags...'}
+        </span>
+        <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+      </Button>
+
+      {open ? (
+        <div
+          role="dialog"
+          aria-modal="true"
+          aria-label="Select tags"
+          className="fixed inset-0 z-50 flex h-full w-full flex-col bg-background text-foreground"
+          onKeyDown={handleDialogKeyDown}
+        >
+          <div className="flex shrink-0 items-center justify-between border-b px-4 py-3">
+            <div className="min-w-0 flex-1 pr-3">
+              <h2 className="text-base font-semibold">Tags</h2>
+              <p
+                className="truncate text-xs text-muted-foreground"
+                aria-live="polite"
+                title={selectedTagsLabel || undefined}
               >
-                <CommandEmpty>No tag found.</CommandEmpty>
-                {Array.isArray(tags) && (
-                  <CommandGroup className="w-full">
-                    {filteredTags.map((tag: { name: string }) => (
-                      <CommandItem
-                        className="w-full"
-                        key={tag.name}
-                        value={tag.name}
-                        onSelect={() => {
-                          if (Array.isArray(value)) {
-                            if (value.some((v) => v.name === tag.name)) {
-                              handleRemoveTag(tag.name);
-                            } else {
-                              onChange([...value, tag]);
-                            }
-                          }
-                          setOpen(false);
-                        }}
-                      >
-                        <Check
-                          className={cn(
-                            'mr-2 h-4 w-4',
-                            Array.isArray(value) &&
-                              value.some((v) => v.name === tag.name)
-                              ? 'opacity-100'
-                              : 'opacity-0'
-                          )}
-                        />
-                        {tag.name}
-                      </CommandItem>
-                    ))}
-                    {isFetchingNextPage ? (
+                {value.length > 0
+                  ? `${value.length} selected: ${selectedTagsLabel}`
+                  : 'No tags selected'}
+              </p>
+            </div>
+            <Button
+              type="button"
+              variant="outline"
+              className="h-9"
+              onClick={() => handleOpenChange(false)}
+            >
+              Done
+            </Button>
+          </div>
+
+          <Command
+            className="min-h-0 flex-1 rounded-none"
+            shouldFilter={false}
+          >
+            <CommandInput
+              autoFocus
+              className="min-w-[280px]"
+              placeholder="Search or create a tag..."
+              value={inputValue}
+              onValueChange={updateSearch}
+              onKeyDown={handleSearchKeyDown}
+            />
+
+            <CommandList
+              ref={listRef}
+              className="min-h-0 max-h-none flex-1"
+              onScroll={handleListScroll}
+            >
+              {isLoading ? (
+                <div className="flex items-center justify-center gap-2 py-6 text-sm text-muted-foreground">
+                  <Loader2 className="h-4 w-4 animate-spin" />
+                  Loading tags...
+                </div>
+              ) : errorMessage ? (
+                <p className="px-3 py-6 text-center text-sm text-destructive">
+                  {errorMessage}
+                </p>
+              ) : (
+                <>
+                  {creatableTagName ? (
+                    <CommandGroup heading="Create">
                       <CommandItem
-                        className="w-full"
-                        value="Loading more tags..."
-                        disabled
+                        className="w-full cursor-pointer"
+                        value={`create ${creatableTagName}`}
+                        onSelect={handleCreateTag}
                       >
-                        Loading more tags...
+                        <Plus className="mr-2 h-4 w-4" />
+                        <span className="truncate">
+                          Create tag “{creatableTagName}”
+                        </span>
                       </CommandItem>
-                    ) : null}
-                  </CommandGroup>
-                )}
-              </CommandList>
-            </Command>
-          </PopoverContent>
-        </div>
-      </Popover>
-    </div>
-  );
+                    </CommandGroup>
+                  ) : null}
 
-  /*
-    return (
-      <div>
-        <div className='flex space-x-2'>
-          <Input value={inputValue} onChange={e => setInputValue(e.target.value)} />
-          <Button type='button' onClick={handleAddTag} onKeyDown={handleAddTag}>Add</Button>
+                  {filteredTags.length > 0 ? (
+                    <CommandGroup heading="Matching tags">
+                      {filteredTags.map((tag) => {
+                        const isSelected = value.some((selectedTag) =>
+                          isSameTagName(selectedTag.name, tag.name)
+                        );
+
+                        return (
+                          <CommandItem
+                            className="w-full cursor-pointer"
+                            key={tag.id ?? tag.name}
+                            value={tag.name}
+                            onSelect={() => handleSelectTag(tag)}
+                          >
+                            <Check
+                              className={cn(
+                                'mr-2 h-4 w-4',
+                                isSelected ? 'opacity-100' : 'opacity-0'
+                              )}
+                            />
+                            <span className="truncate">{tag.name}</span>
+                          </CommandItem>
+                        );
+                      })}
+                    </CommandGroup>
+                  ) : null}
+
+                  {isSearching ? (
+                    <div className="flex items-center justify-center gap-2 py-3 text-sm text-muted-foreground">
+                      <Loader2 className="h-4 w-4 animate-spin" />
+                      Searching all tags...
+                    </div>
+                  ) : null}
+
+                  {showNoResults ? (
+                    <p className="px-3 py-6 text-center text-sm text-muted-foreground">
+                      {normalizedInputValue
+                        ? 'No matching tag found.'
+                        : 'No tags available.'}
+                    </p>
+                  ) : null}
+
+                  {isFetchingNextPage ? (
+                    <div className="flex items-center justify-center gap-2 py-3 text-sm text-muted-foreground">
+                      <Loader2 className="h-4 w-4 animate-spin" />
+                      Loading more tags...
+                    </div>
+                  ) : null}
+                </>
+              )}
+            </CommandList>
+          </Command>
         </div>
-        <div className='flex flex-wrap mt-2'>
-          {tags.map(tagObj => (
+      ) : null}
+
+      {value.length > 0 ? (
+        <div
+          className="flex max-h-24 flex-wrap gap-1.5 overflow-y-auto"
+          aria-label="Selected tags"
+        >
+          {value.map((tag) => (
             <span
-              key={tagObj.name}
-              className='inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 mr-2 mb-2'
+              key={tag.id ?? tag.name}
+              className="inline-flex max-w-full items-center gap-1 rounded-full bg-secondary px-2 py-1 text-xs text-secondary-foreground"
             >
-              {tagObj.name}
+              <span className="truncate">{tag.name}</span>
               <button
-                type='button'
-                className='flex-shrink-0 ml-1.5 h-4 w-4 rounded-full inline-flex items-center justify-center text-blue-400 hover:bg-blue-200 hover:text-blue-500 focus:outline-none focus:bg-blue-500 focus:text-white'
-                onClick={() => handleRemoveTag(tagObj.name)}
+                type="button"
+                className="rounded-full p-0.5 hover:bg-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                aria-label={`Remove tag ${tag.name}`}
+                onClick={() => handleRemoveTag(tag.name)}
               >
-                <span className='sr-only'>Remove tag</span>
-                <svg className='h-2 w-2' stroke='currentColor' fill='none' viewBox='0 0 8 8'>
-                  <path strokeLinecap='round' strokeWidth='1.5' d='M1 1l6 6m0-6L1 7' />
-                </svg>
+                <X className="h-3 w-3" />
               </button>
             </span>
           ))}
         </div>
-      </div>
-    );*/
+      ) : null}
+    </div>
+  );
 };
diff --git a/src/@/lib/actions/tags.ts b/src/@/lib/actions/tags.ts
index b126a20..c570b82 100644
--- a/src/@/lib/actions/tags.ts
+++ b/src/@/lib/actions/tags.ts
@@ -164,7 +164,8 @@ export async function getTags(
   baseUrl: string,
   apiKey: string,
   cursor = 0,
-  search = ''
+  search = '',
+  signal?: AbortSignal
 ): Promise<TagsPage> {
   const { shouldUsePagination, shouldUseSearch } = await getTagFeatures(
     baseUrl,
@@ -191,6 +192,7 @@ export async function getTags(
     LegacyTagsResponse | PaginatedTagsResponse
   >(`${baseUrl}/api/v1/tags?${searchParams.toString()}`, {
     headers,
+    signal,
   });
 
   const payload = extractTagsPayload(initialResponse.data);
diff --git a/src/@/lib/tag-utils.ts b/src/@/lib/tag-utils.ts
new file mode 100644
index 0000000..eabd592
--- /dev/null
+++ b/src/@/lib/tag-utils.ts
@@ -0,0 +1,121 @@
+export type TagOption = {
+  id?: number;
+  name: string;
+};
+
+export const normalizeTagName = (name: string) =>
+  name.trim().replace(/\s+/g, ' ');
+
+export const getTagIdentity = (name: string) =>
+  normalizeTagName(name).toLocaleLowerCase();
+
+export const isSameTagName = (left: string, right: string) =>
+  getTagIdentity(left) === getTagIdentity(right);
+
+export const dedupeTags = <T extends TagOption>(tags: T[]) => {
+  const uniqueTags = new Map<string, T>();
+
+  for (const tag of tags) {
+    const identity = getTagIdentity(tag.name);
+    if (identity && !uniqueTags.has(identity)) uniqueTags.set(identity, tag);
+  }
+
+  return [...uniqueTags.values()];
+};
+
+const getMatchScore = (tagName: string, query: string) => {
+  const normalizedTagName = getTagIdentity(tagName);
+  const normalizedQuery = getTagIdentity(query);
+
+  if (normalizedTagName === normalizedQuery) return 0;
+  if (normalizedTagName.startsWith(normalizedQuery)) return 1;
+
+  const words = normalizedTagName.split(/\s+/);
+  if (words.some((word) => word.startsWith(normalizedQuery))) return 2;
+
+  return 3;
+};
+
+export const filterAndSortTags = <T extends TagOption>(
+  tags: T[],
+  query: string
+) => {
+  const normalizedQuery = getTagIdentity(query);
+  const uniqueTags = dedupeTags(tags);
+
+  const matchingTags = normalizedQuery
+    ? uniqueTags.filter((tag) =>
+        getTagIdentity(tag.name).includes(normalizedQuery)
+      )
+    : uniqueTags;
+
+  return matchingTags.sort((left, right) => {
+    if (normalizedQuery) {
+      const scoreDifference =
+        getMatchScore(left.name, normalizedQuery) -
+        getMatchScore(right.name, normalizedQuery);
+
+      if (scoreDifference !== 0) return scoreDifference;
+    }
+
+    return left.name.localeCompare(right.name, undefined, {
+      sensitivity: 'base',
+    });
+  });
+};
+
+export const findExactTag = <T extends TagOption>(
+  tags: T[],
+  query: string
+) => tags.find((tag) => isSameTagName(tag.name, query));
+
+export const getCreatableTagName = (
+  query: string,
+  availableTags: TagOption[],
+  selectedTags: TagOption[]
+) => {
+  const normalizedName = normalizeTagName(query);
+
+  if (!normalizedName) return null;
+  if (findExactTag([...availableTags, ...selectedTags], normalizedName))
+    return null;
+
+  return normalizedName;
+};
+
+export const addPendingTagSelection = (
+  selectedTags: TagOption[],
+  availableTags: TagOption[],
+  query: string
+) => {
+  const name = getCreatableTagName(query, availableTags, selectedTags);
+
+  if (!name) return selectedTags;
+
+  return [...selectedTags, { name }];
+};
+
+export const toggleTagSelection = <T extends TagOption>(
+  selectedTags: T[],
+  tag: T
+) => {
+  const isSelected = selectedTags.some((selectedTag) =>
+    isSameTagName(selectedTag.name, tag.name)
+  );
+
+  if (isSelected) {
+    return selectedTags.filter(
+      (selectedTag) => !isSameTagName(selectedTag.name, tag.name)
+    );
+  }
+
+  return [...selectedTags, tag];
+};
+
+export const removeTagSelection = <T extends TagOption>(
+  selectedTags: T[],
+  tagName: string
+) =>
+  selectedTags.filter(
+    (selectedTag) => !isSameTagName(selectedTag.name, tagName)
+  );
diff --git a/tests/tag-utils.test.ts b/tests/tag-utils.test.ts
new file mode 100644
index 0000000..7302520
--- /dev/null
+++ b/tests/tag-utils.test.ts
@@ -0,0 +1,101 @@
+import { describe, expect, it } from 'vitest';
+import {
+  addPendingTagSelection,
+  dedupeTags,
+  filterAndSortTags,
+  getCreatableTagName,
+  normalizeTagName,
+  toggleTagSelection,
+} from '../src/@/lib/tag-utils.ts';
+
+const tags = [
+  { id: 1, name: 'Inteligencia artificial' },
+  { id: 2, name: 'Arte artificial' },
+  { id: 3, name: 'Artificial' },
+  { id: 4, name: 'IA académica' },
+];
+
+describe('tag search', () => {
+  it('keeps every partial match and ranks the exact match first', () => {
+    expect(
+      filterAndSortTags(tags, 'artificial').map((tag) => tag.name)
+    ).toEqual(['Artificial', 'Arte artificial', 'Inteligencia artificial']);
+  });
+
+  it('allows a new tag even when other tags partially match', () => {
+    expect(getCreatableTagName('inteligencia', tags, [])).toBe('inteligencia');
+  });
+
+  it('does not offer a duplicate when the exact tag already exists', () => {
+    expect(getCreatableTagName('  INTELIGENCIA   ARTIFICIAL ', tags, [])).toBe(
+      null
+    );
+  });
+
+  it('recovers all matches after correcting a typo', () => {
+    expect(filterAndSortTags(tags, 'artifical')).toEqual([]);
+    expect(
+      filterAndSortTags(tags, 'artificial').map((tag) => tag.name)
+    ).toEqual(['Artificial', 'Arte artificial', 'Inteligencia artificial']);
+  });
+});
+
+describe('tag selection', () => {
+  it('keeps distinct tags whose names overlap', () => {
+    const firstSelection = toggleTagSelection([], tags[0]);
+    const secondSelection = toggleTagSelection(firstSelection, tags[2]);
+
+    expect(secondSelection.map((tag) => tag.name)).toEqual([
+      'Inteligencia artificial',
+      'Artificial',
+    ]);
+  });
+
+  it('toggles only the exact normalized tag', () => {
+    const selected = [tags[0], tags[2]];
+    const remaining = toggleTagSelection(selected, {
+      id: 99,
+      name: ' inteligencia   ARTIFICIAL ',
+    });
+
+    expect(remaining).toEqual([tags[2]]);
+  });
+
+  it('keeps a new tag pending and blocks a normalized selected duplicate', () => {
+    const pendingSelection = addPendingTagSelection(
+      [],
+      tags,
+      '  Investigación   abierta '
+    );
+
+    expect(pendingSelection).toEqual([{ name: 'Investigación abierta' }]);
+    expect(pendingSelection[0]).not.toHaveProperty('id');
+    expect(
+      addPendingTagSelection(
+        pendingSelection,
+        tags,
+        'investigación abierta'
+      )
+    ).toBe(pendingSelection);
+  });
+});
+
+describe('tag normalization', () => {
+  it('trims and collapses whitespace', () => {
+    expect(normalizeTagName('  IA    académica  ')).toBe('IA académica');
+  });
+
+  it('deduplicates only exact normalized names, not partial matches', () => {
+    expect(
+      dedupeTags([
+        ...tags,
+        { id: 5, name: '  inteligencia artificial ' },
+      ]).map((tag) => tag.name)
+    ).toEqual([
+      'Inteligencia artificial',
+      'Arte artificial',
+      'Artificial',
+      'IA académica',
+    ]);
+  });
+});