diff --git a/package-lock.json b/package-lock.json
index 034e59a..5b12966 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,6 +23,7 @@
         "@types/react-dom": "^18.3.1",
         "@vitejs/plugin-react": "^4.3.4",
         "@vitest/eslint-plugin": "^1.1.18",
+        "@vitest/ui": "^2.1.8",
         "autoprefixer": "^10.4.20",
         "eslint": "^9.17.0",
         "eslint-config-prettier": "^9.1.0",
@@ -1709,6 +1710,12 @@
         "url": "https://opencollective.com/unts"
       }
     },
+    "node_modules/@polka/url": {
+      "version": "1.0.0-next.28",
+      "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.28.tgz",
+      "integrity": "sha512-8LduaNlMZGwdZ6qWrKlfa+2M4gahzFkprZiAt2TF8uS0qQgBizKXpXURqvTJ4WtmupWxaLqjRb2UCTe72mu+Aw==",
+      "dev": true
+    },
     "node_modules/@protobufjs/aspromise": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@protobufjs/aspromise/-/aspromise-1.1.2.tgz",
@@ -2787,6 +2794,27 @@
         "url": "https://opencollective.com/vitest"
       }
     },
+    "node_modules/@vitest/ui": {
+      "version": "2.1.8",
+      "resolved": "https://registry.npmjs.org/@vitest/ui/-/ui-2.1.8.tgz",
+      "integrity": "sha512-5zPJ1fs0ixSVSs5+5V2XJjXLmNzjugHRyV11RqxYVR+oMcogZ9qTuSfKW+OcTV0JeFNznI83BNylzH6SSNJ1+w==",
+      "dev": true,
+      "dependencies": {
+        "@vitest/utils": "2.1.8",
+        "fflate": "^0.8.2",
+        "flatted": "^3.3.1",
+        "pathe": "^1.1.2",
+        "sirv": "^3.0.0",
+        "tinyglobby": "^0.2.10",
+        "tinyrainbow": "^1.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "vitest": "2.1.8"
+      }
+    },
     "node_modules/@vitest/utils": {
       "version": "2.1.8",
       "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-2.1.8.tgz",
@@ -4070,6 +4098,12 @@
         "node": ">=0.8.0"
       }
     },
+    "node_modules/fflate": {
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz",
+      "integrity": "sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==",
+      "dev": true
+    },
     "node_modules/file-entry-cache": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
@@ -4875,6 +4909,15 @@
         "node": ">=16 || 14 >=14.17"
       }
     },
+    "node_modules/mrmime": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.0.tgz",
+      "integrity": "sha512-eu38+hdgojoyq63s+yTpN4XMBdt5l8HhMhc4VKLO9KM5caLIBvUm4thi7fFaxyTmCKeNnXZ5pAlBwCUnhA09uw==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -5828,6 +5871,20 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/sirv": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/sirv/-/sirv-3.0.0.tgz",
+      "integrity": "sha512-BPwJGUeDaDCHihkORDchNyyTvWFhcusy1XMmhEVTQTwGeybFbp8YEmB+njbPnth1FibULBSBVwCQni25XlCUDg==",
+      "dev": true,
+      "dependencies": {
+        "@polka/url": "^1.0.0-next.24",
+        "mrmime": "^2.0.0",
+        "totalist": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/slash": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
@@ -6126,6 +6183,45 @@
       "integrity": "sha512-WiCJLEECkO18gwqIp6+hJg0//p23HXp4S+gGtAKu3mI2F2/sXC4FvHvXvB0zJVVaTPhx1/tOwdbRsa1sOBIKqQ==",
       "dev": true
     },
+    "node_modules/tinyglobby": {
+      "version": "0.2.10",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.10.tgz",
+      "integrity": "sha512-Zc+8eJlFMvgatPZTl6A9L/yht8QqdmUNtURHaKZLmKBE12hNPSrqNkUp2cs3M/UKmNVVAMFQYSjYIVHDjW5zew==",
+      "dev": true,
+      "dependencies": {
+        "fdir": "^6.4.2",
+        "picomatch": "^4.0.2"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/tinyglobby/node_modules/fdir": {
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.2.tgz",
+      "integrity": "sha512-KnhMXsKSPZlAhp7+IjUkRZKPb4fUyccpDrdFXbi4QL1qkmFh9kVY09Yox+n4MaOb3lHZ1Tv829C3oaaXoMYPDQ==",
+      "dev": true,
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/tinyglobby/node_modules/picomatch": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
+      "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
     "node_modules/tinypool": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/tinypool/-/tinypool-1.0.2.tgz",
@@ -6183,6 +6279,15 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/totalist": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/totalist/-/totalist-3.0.1.tgz",
+      "integrity": "sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/tough-cookie": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-5.0.0.tgz",
diff --git a/package.json b/package.json
index ba3823a..b3e5e7f 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
     "dev": "vite",
     "build": "tsc -b && vite build",
     "test": "vitest",
+    "test:ui": "vitest --ui",
     "format": "prettier --write .",
     "lint": "eslint .",
     "preview": "vite preview",
@@ -30,6 +31,7 @@
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^4.3.4",
     "@vitest/eslint-plugin": "^1.1.18",
+    "@vitest/ui": "^2.1.8",
     "autoprefixer": "^10.4.20",
     "eslint": "^9.17.0",
     "eslint-config-prettier": "^9.1.0",
diff --git a/src/components/UI/FormInput.test.tsx b/src/components/UI/FormInput.test.tsx
index e657c62..0056fa6 100644
--- a/src/components/UI/FormInput.test.tsx
+++ b/src/components/UI/FormInput.test.tsx
@@ -10,7 +10,7 @@ test("should render with the correct label", () => {
 });
 
 test("should apply shrink classes when input has value", () => {
-  render(<FormInput label="Username" value="test" />);
+  render(<FormInput label="Username" value="test" onChange={vi.fn()} />);
   const labelElement = screen.getByText("Username");
   expect(labelElement).toHaveClass("-top-5 text-xs text-black");
 });