diff --git a/README.md b/README.md
index 944fde7..056e073 100644
--- a/README.md
+++ b/README.md
@@ -6,7 +6,7 @@
 
 - React
 - TypeScript
-- SCSS + CSS Modules
+- Vanilla Extract CSS (best of CSS-in-JS and css modules combined)
 
 ### Bundling
 
diff --git a/package.json b/package.json
index 3d692cc..abbfc83 100644
--- a/package.json
+++ b/package.json
@@ -50,10 +50,8 @@
     "eslint-plugin-storybook": "^0.8.0",
     "prettier": "3.2.5",
     "prettier-plugin-css-order": "2.0.1",
-    "sass": "1.67.0",
     "storybook": "^8.0.4",
     "typescript": "^5.0.2",
-    "typescript-plugin-css-modules": "5.1.0",
     "vite": "^5.2.4"
   },
   "readme": "ERROR: No README data found!",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 569cc5d..a8bfed6 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -78,7 +78,7 @@ devDependencies:
     version: 7.3.1(eslint@8.57.0)(typescript@5.2.2)
   '@vanilla-extract/vite-plugin':
     specifier: ~4.0.6
-    version: 4.0.6(@types/node@20.8.4)(sass@1.67.0)(vite@5.2.4)
+    version: 4.0.6(@types/node@20.8.4)(vite@5.2.4)
   '@vitejs/plugin-react-swc':
     specifier: ^3.6.0
     version: 3.6.0(vite@5.2.4)
@@ -106,21 +106,15 @@ devDependencies:
   prettier-plugin-css-order:
     specifier: 2.0.1
     version: 2.0.1(postcss@8.4.38)(prettier@3.2.5)
-  sass:
-    specifier: 1.67.0
-    version: 1.67.0
   storybook:
     specifier: ^8.0.4
     version: 8.0.4(react-dom@18.2.0)(react@18.2.0)
   typescript:
     specifier: ^5.0.2
     version: 5.2.2
-  typescript-plugin-css-modules:
-    specifier: 5.1.0
-    version: 5.1.0(typescript@5.2.2)
   vite:
     specifier: ^5.2.4
-    version: 5.2.4(@types/node@20.8.4)(sass@1.67.0)
+    version: 5.2.4(@types/node@20.8.4)
 
 packages:
 
@@ -129,10 +123,6 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
-  /@adobe/css-tools@4.3.1:
-    resolution: {integrity: sha512-/62yikz7NLScCGAAST5SHdnjaDJQBDq0M2muyRTpf2VQhw6StBg2ALiu73zSJQ4fMVLA+0uBhBHAle7Wg+2kSg==}
-    dev: true
-
   /@adobe/css-tools@4.3.3:
     resolution: {integrity: sha512-rE0Pygv0sEZ4vBWHlAgJLGDU7Pm8xoO6p3wsEceb7GYAjScrOHpEo8KK/eVkAcnSM+slAEtXjA2JpdjLp4fJQQ==}
     dev: true
@@ -2254,7 +2244,7 @@ packages:
       magic-string: 0.27.0
       react-docgen-typescript: 2.2.2(typescript@5.2.2)
       typescript: 5.2.2
-      vite: 5.2.4(@types/node@20.8.4)(sass@1.67.0)
+      vite: 5.2.4(@types/node@20.8.4)
     dev: true
 
   /@jridgewell/gen-mapping@0.3.3:
@@ -2796,7 +2786,7 @@ packages:
       magic-string: 0.30.8
       ts-dedent: 2.2.0
       typescript: 5.2.2
-      vite: 5.2.4(@types/node@20.8.4)(sass@1.67.0)
+      vite: 5.2.4(@types/node@20.8.4)
     transitivePeerDependencies:
       - encoding
       - supports-color
@@ -3175,7 +3165,7 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
       resolve: 1.22.8
       tsconfig-paths: 4.2.0
-      vite: 5.2.4(@types/node@20.8.4)(sass@1.67.0)
+      vite: 5.2.4(@types/node@20.8.4)
     transitivePeerDependencies:
       - '@preact/preset-vite'
       - encoding
@@ -3769,18 +3759,6 @@ packages:
     resolution: {integrity: sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==}
     dev: true
 
-  /@types/postcss-modules-local-by-default@4.0.2:
-    resolution: {integrity: sha512-CtYCcD+L+trB3reJPny+bKWKMzPfxEyQpKIwit7kErnOexf5/faaGpkFy4I5AwbV4hp1sk7/aTg0tt0B67VkLQ==}
-    dependencies:
-      postcss: 8.4.38
-    dev: true
-
-  /@types/postcss-modules-scope@3.0.4:
-    resolution: {integrity: sha512-//ygSisVq9kVI0sqx3UPLzWIMCmtSVrzdljtuaAEJtGoGnpjBikZ2sXO5MpH9SnWX9HRfXxHifDAXcQjupWnIQ==}
-    dependencies:
-      postcss: 8.4.38
-    dev: true
-
   /@types/pretty-hrtime@1.0.3:
     resolution: {integrity: sha512-nj39q0wAIdhwn7DGUyT9irmsKK1tV0bd5WFEhgpqNTMFZ8cE+jieuTphCW0tfdm47S2zVT5mr09B28b1chmQMA==}
     dev: true
@@ -4091,7 +4069,7 @@ packages:
       modern-ahocorasick: 1.0.1
       outdent: 0.8.0
 
-  /@vanilla-extract/integration@7.1.1(@types/node@20.8.4)(sass@1.67.0):
+  /@vanilla-extract/integration@7.1.1(@types/node@20.8.4):
     resolution: {integrity: sha512-2JjDKL2HDTazis4oTkUFsQFUyw61k8oym9r0NOLSJC0JB0W25W1ryVZvDx74d3deIyB5AWbCselyzl3gja30kQ==}
     dependencies:
       '@babel/core': 7.24.3
@@ -4105,8 +4083,8 @@ packages:
       lodash: 4.17.21
       mlly: 1.6.1
       outdent: 0.8.0
-      vite: 5.2.4(@types/node@20.8.4)(sass@1.67.0)
-      vite-node: 1.4.0(@types/node@20.8.4)(sass@1.67.0)
+      vite: 5.2.4(@types/node@20.8.4)
+      vite-node: 1.4.0(@types/node@20.8.4)
     transitivePeerDependencies:
       - '@types/node'
       - less
@@ -4121,13 +4099,13 @@ packages:
   /@vanilla-extract/private@1.0.3:
     resolution: {integrity: sha512-17kVyLq3ePTKOkveHxXuIJZtGYs+cSoev7BlP+Lf4916qfDhk/HBjvlYDe8egrea7LNPHKwSZJK/bzZC+Q6AwQ==}
 
-  /@vanilla-extract/vite-plugin@4.0.6(@types/node@20.8.4)(sass@1.67.0)(vite@5.2.4):
+  /@vanilla-extract/vite-plugin@4.0.6(@types/node@20.8.4)(vite@5.2.4):
     resolution: {integrity: sha512-uT2AhzxEC8qdn7SFxD/MHF7pxyFMb2e7HY3+isyPDzkTyIdiA/ZXk7qwWhcigFMNCJ6YuyxFQJmiDhP9U9oOmg==}
     peerDependencies:
       vite: ^4.0.3 || ^5.0.0
     dependencies:
-      '@vanilla-extract/integration': 7.1.1(@types/node@20.8.4)(sass@1.67.0)
-      vite: 5.2.4(@types/node@20.8.4)(sass@1.67.0)
+      '@vanilla-extract/integration': 7.1.1(@types/node@20.8.4)
+      vite: 5.2.4(@types/node@20.8.4)
     transitivePeerDependencies:
       - '@types/node'
       - less
@@ -4145,7 +4123,7 @@ packages:
       vite: ^4 || ^5
     dependencies:
       '@swc/core': 1.4.8
-      vite: 5.2.4(@types/node@20.8.4)(sass@1.67.0)
+      vite: 5.2.4(@types/node@20.8.4)
     transitivePeerDependencies:
       - '@swc/helpers'
     dev: true
@@ -4786,21 +4764,6 @@ packages:
       get-func-name: 2.0.2
     dev: true
 
-  /chokidar@3.5.3:
-    resolution: {integrity: sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==}
-    engines: {node: '>= 8.10.0'}
-    dependencies:
-      anymatch: 3.1.3
-      braces: 3.0.2
-      glob-parent: 5.1.2
-      is-binary-path: 2.1.0
-      is-glob: 4.0.3
-      normalize-path: 3.0.0
-      readdirp: 3.6.0
-    optionalDependencies:
-      fsevents: 2.3.3
-    dev: true
-
   /chokidar@3.6.0:
     resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
     engines: {node: '>= 8.10.0'}
@@ -5028,12 +4991,6 @@ packages:
     engines: {node: '>= 0.6'}
     dev: true
 
-  /copy-anything@2.0.6:
-    resolution: {integrity: sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==}
-    dependencies:
-      is-what: 3.14.1
-    dev: true
-
   /core-js-compat@3.36.1:
     resolution: {integrity: sha512-Dk997v9ZCt3X/npqzyGdTlq6t7lDBhZwGvV94PKzDArjp7BTRm7WlDAXYd/OWdeFHO8OChQYRJNJvUCqCbrtKA==}
     dependencies:
@@ -5377,11 +5334,6 @@ packages:
     engines: {node: '>=12'}
     dev: true
 
-  /dotenv@16.4.5:
-    resolution: {integrity: sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg==}
-    engines: {node: '>=12'}
-    dev: true
-
   /duplexify@3.7.1:
     resolution: {integrity: sha512-07z8uv2wMyS51kKhD1KsdXJg5WQ6t93RneqRxUHnskXVtlYYkLqM0gqStQZ3pj073g687jPCHrqNfCzawLYh5g==}
     dependencies:
@@ -5449,15 +5401,6 @@ packages:
     hasBin: true
     dev: true
 
-  /errno@0.1.8:
-    resolution: {integrity: sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==}
-    hasBin: true
-    requiresBuild: true
-    dependencies:
-      prr: 1.0.1
-    dev: true
-    optional: true
-
   /error-ex@1.3.2:
     resolution: {integrity: sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==}
     dependencies:
@@ -6530,24 +6473,6 @@ packages:
       safer-buffer: 2.1.2
     dev: true
 
-  /iconv-lite@0.6.3:
-    resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==}
-    engines: {node: '>=0.10.0'}
-    requiresBuild: true
-    dependencies:
-      safer-buffer: 2.1.2
-    dev: true
-    optional: true
-
-  /icss-utils@5.1.0(postcss@8.4.38):
-    resolution: {integrity: sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==}
-    engines: {node: ^10 || ^12 || >= 14}
-    peerDependencies:
-      postcss: ^8.1.0
-    dependencies:
-      postcss: 8.4.38
-    dev: true
-
   /ieee754@1.2.1:
     resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
     dev: true
@@ -6557,18 +6482,6 @@ packages:
     engines: {node: '>= 4'}
     dev: true
 
-  /image-size@0.5.5:
-    resolution: {integrity: sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==}
-    engines: {node: '>=0.10.0'}
-    hasBin: true
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /immutable@4.3.4:
-    resolution: {integrity: sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==}
-    dev: true
-
   /import-fresh@3.3.0:
     resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==}
     engines: {node: '>=6'}
@@ -6857,10 +6770,6 @@ packages:
       get-intrinsic: 1.2.4
     dev: true
 
-  /is-what@3.14.1:
-    resolution: {integrity: sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==}
-    dev: true
-
   /is-windows@0.2.0:
     resolution: {integrity: sha512-n67eJYmXbniZB7RF4I/FTjK1s6RPOCTxhYrVYLRaCt3lF0mpWZPKr3T2LSZAqyjQsxR2qMmGYXXzK0YWwcPM1Q==}
     engines: {node: '>=0.10.0'}
@@ -7628,24 +7537,6 @@ packages:
       dotenv-expand: 10.0.0
     dev: true
 
-  /less@4.2.0:
-    resolution: {integrity: sha512-P3b3HJDBtSzsXUl0im2L7gTO5Ubg8mEN6G8qoTS77iXxXX4Hvu4Qj540PZDvQ8V6DmX6iXo98k7Md0Cm1PrLaA==}
-    engines: {node: '>=6'}
-    hasBin: true
-    dependencies:
-      copy-anything: 2.0.6
-      parse-node-version: 1.0.1
-      tslib: 2.6.2
-    optionalDependencies:
-      errno: 0.1.8
-      graceful-fs: 4.2.11
-      image-size: 0.5.5
-      make-dir: 2.1.0
-      mime: 1.6.0
-      needle: 3.3.1
-      source-map: 0.6.1
-    dev: true
-
   /leven@3.1.0:
     resolution: {integrity: sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==}
     engines: {node: '>=6'}
@@ -7659,11 +7550,6 @@ packages:
       type-check: 0.4.0
     dev: true
 
-  /lilconfig@2.1.0:
-    resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==}
-    engines: {node: '>=10'}
-    dev: true
-
   /lines-and-columns@1.2.4:
     resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
     dev: true
@@ -7690,10 +7576,6 @@ packages:
       p-locate: 5.0.0
     dev: true
 
-  /lodash.camelcase@4.3.0:
-    resolution: {integrity: sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==}
-    dev: true
-
   /lodash.debounce@4.0.8:
     resolution: {integrity: sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==}
     dev: true
@@ -7981,17 +7863,6 @@ packages:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
     dev: true
 
-  /needle@3.3.1:
-    resolution: {integrity: sha512-6k0YULvhpw+RoLNiQCRKOl09Rv1dPLr8hHnVjHqdolKwDrdNyk+Hmrthi4lIGPPz3r39dLx0hsF5s40sZ3Us4Q==}
-    engines: {node: '>= 4.4.x'}
-    hasBin: true
-    requiresBuild: true
-    dependencies:
-      iconv-lite: 0.6.3
-      sax: 1.3.0
-    dev: true
-    optional: true
-
   /negotiator@0.6.3:
     resolution: {integrity: sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==}
     engines: {node: '>= 0.6'}
@@ -8316,11 +8187,6 @@ packages:
       lines-and-columns: 1.2.4
     dev: true
 
-  /parse-node-version@1.0.1:
-    resolution: {integrity: sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==}
-    engines: {node: '>= 0.10'}
-    dev: true
-
   /parse-passwd@1.0.0:
     resolution: {integrity: sha512-1Y1A//QUXEZK7YKz+rD9WydcE1+EuPr6ZBgKecAB8tmoW6UFv0NREVJe1p+jRxtThkcbbKkfwIbWJe/IeE6m2Q==}
     engines: {node: '>=0.10.0'}
@@ -8494,54 +8360,6 @@ packages:
       postcss: 8.4.38
     dev: true
 
-  /postcss-load-config@3.1.4(postcss@8.4.38):
-    resolution: {integrity: sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==}
-    engines: {node: '>= 10'}
-    peerDependencies:
-      postcss: '>=8.0.9'
-      ts-node: '>=9.0.0'
-    peerDependenciesMeta:
-      postcss:
-        optional: true
-      ts-node:
-        optional: true
-    dependencies:
-      lilconfig: 2.1.0
-      postcss: 8.4.38
-      yaml: 1.10.2
-    dev: true
-
-  /postcss-modules-extract-imports@3.0.0(postcss@8.4.38):
-    resolution: {integrity: sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==}
-    engines: {node: ^10 || ^12 || >= 14}
-    peerDependencies:
-      postcss: ^8.1.0
-    dependencies:
-      postcss: 8.4.38
-    dev: true
-
-  /postcss-modules-local-by-default@4.0.4(postcss@8.4.38):
-    resolution: {integrity: sha512-L4QzMnOdVwRm1Qb8m4x8jsZzKAaPAgrUF1r/hjDR2Xj7R+8Zsf97jAlSQzWtKx5YNiNGN8QxmPFIc/sh+RQl+Q==}
-    engines: {node: ^10 || ^12 || >= 14}
-    peerDependencies:
-      postcss: ^8.1.0
-    dependencies:
-      icss-utils: 5.1.0(postcss@8.4.38)
-      postcss: 8.4.38
-      postcss-selector-parser: 6.0.13
-      postcss-value-parser: 4.2.0
-    dev: true
-
-  /postcss-modules-scope@3.1.1(postcss@8.4.38):
-    resolution: {integrity: sha512-uZgqzdTleelWjzJY+Fhti6F3C9iF1JR/dODLs/JDefozYcKTBCdD8BIl6nNPbTbcLnGrk56hzwZC2DaGNvYjzA==}
-    engines: {node: ^10 || ^12 || >= 14}
-    peerDependencies:
-      postcss: ^8.1.0
-    dependencies:
-      postcss: 8.4.38
-      postcss-selector-parser: 6.0.13
-    dev: true
-
   /postcss-scss@4.0.9(postcss@8.4.38):
     resolution: {integrity: sha512-AjKOeiwAitL/MXxQW2DliT28EKukvvbEWx3LBmJIRN8KfBGZbRTxNYW0kSqi1COiTZ57nZ9NW06S6ux//N1c9A==}
     engines: {node: '>=12.0'}
@@ -8551,18 +8369,6 @@ packages:
       postcss: 8.4.38
     dev: true
 
-  /postcss-selector-parser@6.0.13:
-    resolution: {integrity: sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==}
-    engines: {node: '>=4'}
-    dependencies:
-      cssesc: 3.0.0
-      util-deprecate: 1.0.2
-    dev: true
-
-  /postcss-value-parser@4.2.0:
-    resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
-    dev: true
-
   /postcss@8.4.38:
     resolution: {integrity: sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==}
     engines: {node: ^10 || ^12 || >=14}
@@ -8664,12 +8470,6 @@ packages:
     resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
     dev: true
 
-  /prr@1.0.1:
-    resolution: {integrity: sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==}
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /pump@2.0.1:
     resolution: {integrity: sha512-ruPMNRkN3MHP1cWJc9OWr+T/xDP0jhXYCLfJcBuX54hhfIBnaQmAUMfDcG4DM5UMWByBbJY69QSphm3jtDKIkA==}
     dependencies:
@@ -8988,10 +8788,6 @@ packages:
     engines: {node: '>=0.10.5'}
     dev: true
 
-  /reserved-words@0.1.2:
-    resolution: {integrity: sha512-0S5SrIUJ9LfpbVl4Yzij6VipUdafHrOTzvmfazSw/jeZrZtQK303OPZW+obtkaw7jQlTQppy0UvZWm9872PbRw==}
-    dev: true
-
   /resolve-cwd@3.0.0:
     resolution: {integrity: sha512-OrZaX2Mb+rJCpH/6CpSqt9xFVpN++x01XnN2ie9g6P5/3xelLAkXWVADpdz1IHD/KFfEXyE6V0U01OQ3UO2rEg==}
     engines: {node: '>=8'}
@@ -9105,31 +8901,6 @@ packages:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
     dev: true
 
-  /sass@1.67.0:
-    resolution: {integrity: sha512-SVrO9ZeX/QQyEGtuZYCVxoeAL5vGlYjJ9p4i4HFuekWl8y/LtJ7tJc10Z+ck1c8xOuoBm2MYzcLfTAffD0pl/A==}
-    engines: {node: '>=14.0.0'}
-    hasBin: true
-    dependencies:
-      chokidar: 3.5.3
-      immutable: 4.3.4
-      source-map-js: 1.0.2
-    dev: true
-
-  /sass@1.72.0:
-    resolution: {integrity: sha512-Gpczt3WA56Ly0Mn8Sl21Vj94s1axi9hDIzDFn9Ph9x3C3p4nNyvsqJoQyVXKou6cBlfFWEgRW4rT8Tb4i3XnVA==}
-    engines: {node: '>=14.0.0'}
-    hasBin: true
-    dependencies:
-      chokidar: 3.5.3
-      immutable: 4.3.4
-      source-map-js: 1.0.2
-    dev: true
-
-  /sax@1.3.0:
-    resolution: {integrity: sha512-0s+oAmw9zLl1V1cS9BtZN7JAd0cW5e0QH4W3LWEK6a4LaLEA2OTpGYWDY+6XasBLtz6wkm3u1xRw95mRuJ59WA==}
-    requiresBuild: true
-    dev: true
-
   /scheduler@0.23.0:
     resolution: {integrity: sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==}
     dependencies:
@@ -9283,11 +9054,6 @@ packages:
     engines: {node: '>=14.16'}
     dev: true
 
-  /source-map-js@1.0.2:
-    resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
-    engines: {node: '>=0.10.0'}
-    dev: true
-
   /source-map-js@1.2.0:
     resolution: {integrity: sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==}
     engines: {node: '>=0.10.0'}
@@ -9312,11 +9078,6 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
-  /source-map@0.7.4:
-    resolution: {integrity: sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==}
-    engines: {node: '>= 8'}
-    dev: true
-
   /space-separated-tokens@2.0.2:
     resolution: {integrity: sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==}
     dev: true
@@ -9511,19 +9272,6 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
-  /stylus@0.62.0:
-    resolution: {integrity: sha512-v3YCf31atbwJQIMtPNX8hcQ+okD4NQaTuKGUWfII8eaqn+3otrbttGL1zSMZAAtiPsBztQnujVBugg/cXFUpyg==}
-    hasBin: true
-    dependencies:
-      '@adobe/css-tools': 4.3.1
-      debug: 4.3.4
-      glob: 7.2.3
-      sax: 1.3.0
-      source-map: 0.7.4
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
   /supports-color@5.5.0:
     resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==}
     engines: {node: '>=4'}
@@ -9777,33 +9525,6 @@ packages:
       is-typedarray: 1.0.0
     dev: true
 
-  /typescript-plugin-css-modules@5.1.0(typescript@5.2.2):
-    resolution: {integrity: sha512-6h+sLBa4l+XYSTn/31vZHd/1c3SvAbLpobY6FxDiUOHJQG1eD9Gh3eCs12+Eqc+TCOAdxcO+zAPvUq0jBfdciw==}
-    peerDependencies:
-      typescript: '>=4.0.0'
-    dependencies:
-      '@types/postcss-modules-local-by-default': 4.0.2
-      '@types/postcss-modules-scope': 3.0.4
-      dotenv: 16.4.5
-      icss-utils: 5.1.0(postcss@8.4.38)
-      less: 4.2.0
-      lodash.camelcase: 4.3.0
-      postcss: 8.4.38
-      postcss-load-config: 3.1.4(postcss@8.4.38)
-      postcss-modules-extract-imports: 3.0.0(postcss@8.4.38)
-      postcss-modules-local-by-default: 4.0.4(postcss@8.4.38)
-      postcss-modules-scope: 3.1.1(postcss@8.4.38)
-      reserved-words: 0.1.2
-      sass: 1.72.0
-      source-map-js: 1.0.2
-      stylus: 0.62.0
-      tsconfig-paths: 4.2.0
-      typescript: 5.2.2
-    transitivePeerDependencies:
-      - supports-color
-      - ts-node
-    dev: true
-
   /typescript@5.2.2:
     resolution: {integrity: sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==}
     engines: {node: '>=14.17'}
@@ -9986,7 +9707,7 @@ packages:
     engines: {node: '>= 0.8'}
     dev: true
 
-  /vite-node@1.4.0(@types/node@20.8.4)(sass@1.67.0):
+  /vite-node@1.4.0(@types/node@20.8.4):
     resolution: {integrity: sha512-VZDAseqjrHgNd4Kh8icYHWzTKSCZMhia7GyHfhtzLW33fZlG9SwsB6CEhgyVOWkJfJ2pFLrp/Gj1FSfAiqH9Lw==}
     engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
@@ -9995,7 +9716,7 @@ packages:
       debug: 4.3.4
       pathe: 1.1.1
       picocolors: 1.0.0
-      vite: 5.2.4(@types/node@20.8.4)(sass@1.67.0)
+      vite: 5.2.4(@types/node@20.8.4)
     transitivePeerDependencies:
       - '@types/node'
       - less
@@ -10007,7 +9728,7 @@ packages:
       - terser
     dev: true
 
-  /vite@5.2.4(@types/node@20.8.4)(sass@1.67.0):
+  /vite@5.2.4(@types/node@20.8.4):
     resolution: {integrity: sha512-vjFghvHWidBTinu5TCymJk/lRHlR5ljqB83yugr0HA1xspUPdOZHqbqDLnZ8f9/jINrtFHTCYYyIUi+o+Q5iyg==}
     engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
@@ -10039,7 +9760,6 @@ packages:
       esbuild: 0.20.2
       postcss: 8.4.38
       rollup: 4.13.0
-      sass: 1.67.0
     optionalDependencies:
       fsevents: 2.3.3
     dev: true
@@ -10263,11 +9983,6 @@ packages:
     resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
     dev: true
 
-  /yaml@1.10.2:
-    resolution: {integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==}
-    engines: {node: '>= 6'}
-    dev: true
-
   /yargs-parser@18.1.3:
     resolution: {integrity: sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==}
     engines: {node: '>=6'}
diff --git a/src/components/form/Form.tsx b/src/components/form/Form.tsx
index 699a4dc..8cc9efb 100644
--- a/src/components/form/Form.tsx
+++ b/src/components/form/Form.tsx
@@ -1,6 +1,6 @@
-import { PropsWithChildren } from 'react';
+import type { PropsWithChildren } from 'react';
 import { cn } from '@/utils/index.ts';
-import layout from '@/components/layout/index.module.scss';
+import { container } from '@/components/layout/index.css.ts';
 import { form } from './form.css.ts';
 
 interface FormProps {
@@ -8,7 +8,7 @@ interface FormProps {
 }
 
 export const Form = ({ onSubmit, children }: PropsWithChildren<FormProps>) => (
-  <form onSubmit={onSubmit} className={cn(form, layout.container)}>
+  <form onSubmit={onSubmit} className={cn(form, container)}>
     {children}
   </form>
 );
diff --git a/src/components/input/Input.tsx b/src/components/input/Input.tsx
index 9616a59..8f6255b 100644
--- a/src/components/input/Input.tsx
+++ b/src/components/input/Input.tsx
@@ -1,6 +1,6 @@
 import type { HTMLInputTypeAttribute } from 'react';
-import input from './input.module.scss';
-import { getCssNameBySize } from '@/utils/index';
+import * as s from './input.css.ts';
+import { cn } from '@/utils/index';
 
 interface InputProps {
   type?: HTMLInputTypeAttribute;
@@ -10,7 +10,7 @@ interface InputProps {
   autoFocus?: boolean;
   placeholder?: string;
   className?: string;
-  size?: 'sm' | 'md' | 'lg';
+  size?: keyof typeof s.inputSize;
   validationMessage?: string;
 }
 
@@ -25,30 +25,24 @@ export const Input = ({
   size = 'md',
   validationMessage,
 }: InputProps) => {
-  const $size = getCssNameBySize(size);
   return (
     <>
-      <label
-        htmlFor={id}
-        className={[input.label, input[$size], className].join(' ')}
-      >
-        <span className={[input.label_txt, input[$size]].join(' ')}>
-          {label}
-        </span>
+      <label htmlFor={id} className={cn(s.label, s.inputSize[size], className)}>
+        <span className={cn(s.labelTxt, s.inputSize[size])}>{label}</span>
         <input
           id={id}
           autoFocus={autoFocus}
           minLength={minLength}
           placeholder={placeholder}
-          className={[
-            input.default,
-            validationMessage && input.m_invalid,
-            input[$size],
-          ].join(' ')}
+          className={cn(
+            s.inputBase,
+            validationMessage && s.invalid,
+            s.inputSize[size],
+          )}
           type={type}
         />
         {validationMessage && (
-          <span className={input.invalid_txt}>{validationMessage}</span>
+          <span className={s.invalidTxt}>{validationMessage}</span>
         )}
       </label>
     </>
diff --git a/src/components/input/input.css.ts b/src/components/input/input.css.ts
new file mode 100644
index 0000000..a6f6d28
--- /dev/null
+++ b/src/components/input/input.css.ts
@@ -0,0 +1,79 @@
+import { style, styleVariants } from '@vanilla-extract/css';
+
+export const inputBase = style({
+  transition: 'border 0.3s',
+  boxSizing: 'border-box',
+  outline: 'none',
+  border: '1px solid #e1e7ea',
+  borderRadius: '30px',
+  padding: '17px 24px',
+  width: '100%',
+  fontSize: '1rem',
+  ':focus': {
+    border: '1px solid #9ba1a5',
+  },
+});
+
+export const invalidTxt = style({
+  padding: '3px 10px 0 25px',
+  color: 'red',
+});
+
+export const kraken = style({
+  backgroundColor: 'green',
+});
+
+export const label = style({
+  transition: 'color 0.3s',
+  boxSizing: 'border-box',
+  width: '100%',
+  color: 'rgba(178,176,183,0.8)',
+  ':focus-within': {
+    color: '#9ba1a5',
+  },
+});
+
+export const labelTxt = style({
+  position: 'relative',
+  bottom: '-0.4rem',
+  background: '#fff',
+  padding: '0 10px 0 25px',
+  fontSize: '0.9rem',
+});
+
+export const invalid = style({
+  border: '1px solid #ff7c7c',
+  ':focus': {
+    border: '1px solid red',
+  },
+});
+
+export const inputSize = styleVariants({
+  sm: {
+    padding: '12px 18px',
+    selectors: {
+      [`${labelTxt} &`]: {
+        bottom: '-0.4rem',
+        padding: '0 10px 0 19px',
+      },
+    },
+  },
+  md: {
+    padding: '17px 24px',
+    selectors: {
+      [`${labelTxt} &`]: {
+        bottom: '-0.4rem',
+        padding: '0 10px 0 25px',
+      },
+    },
+  },
+  lg: {
+    padding: '23px 32px',
+    selectors: {
+      [`${labelTxt} &`]: {
+        bottom: '-0.4rem',
+        padding: '0 10px 0 33px',
+      },
+    },
+  },
+});
diff --git a/src/components/input/input.module.scss b/src/components/input/input.module.scss
deleted file mode 100644
index 07589b8..0000000
--- a/src/components/input/input.module.scss
+++ /dev/null
@@ -1,73 +0,0 @@
-.default {
-  transition: border 0.3s;
-  box-sizing: border-box;
-  outline: none;
-  border: 1px solid rgb(225, 231, 234);
-  border-radius: 30px;
-  padding: 17px 24px;
-  width: 100%;
-  font-size: 1rem;
-
-  &:focus {
-    border: 1px solid rgb(155, 161, 165);
-  }
-}
-
-.kraken {
-  background-color: green;
-}
-
-.m_invalid {
-  border: 1px solid rgb(255, 124, 124);
-
-  &:focus {
-    border: 1px solid rgb(255, 0, 0);
-  }
-}
-
-.--small {
-  padding: 12px 18px;
-}
-.--medium {
-  padding: 17px 24px;
-}
-.--large {
-  padding: 23px 32px;
-}
-
-.label {
-  transition: color 0.3s;
-  box-sizing: border-box;
-  width: 100%;
-  color: rgba(178, 176, 183, 0.8);
-
-  &:focus-within {
-    color: rgb(155, 161, 165);
-  }
-
-  &_txt {
-    position: relative;
-    bottom: -0.4rem;
-    background: #fff;
-    padding: 0 10px 0 (24+1px);
-    font-size: 0.9rem;
-
-    & .--small {
-      bottom: -0.4rem;
-      padding: 0 10px 0 (18+1px);
-    }
-    & .--medium {
-      bottom: -0.4rem;
-      padding: 0 10px 0 (24+1px);
-    }
-    & .--large {
-      bottom: -0.4rem;
-      padding: 0 10px 0 (32+1px);
-    }
-  }
-}
-
-.invalid_txt {
-  padding: 3px 10px 0 (24+1px);
-  color: red;
-}
diff --git a/src/components/layout/index.css.ts b/src/components/layout/index.css.ts
new file mode 100644
index 0000000..1f19778
--- /dev/null
+++ b/src/components/layout/index.css.ts
@@ -0,0 +1,6 @@
+import { style } from '@vanilla-extract/css';
+
+export const container = style({
+  paddingRight: 'max(env(safe-area-inset-right, 1rem), 1rem)',
+  paddingLeft: 'max(env(safe-area-inset-left, 1rem), 1rem)',
+});
diff --git a/src/components/layout/index.module.scss b/src/components/layout/index.module.scss
deleted file mode 100644
index b9298cb..0000000
--- a/src/components/layout/index.module.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.container {
-  padding-right: max(env(safe-area-inset-right, 1rem), 1rem);
-  padding-left: max(env(safe-area-inset-left, 1rem), 1rem);
-}
diff --git a/tsconfig.node.json b/tsconfig.node.json
index 42872c5..a402f0d 100644
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@@ -1,10 +1,12 @@
 {
   "compilerOptions": {
+    "strict": true,
     "composite": true,
     "skipLibCheck": true,
     "module": "ESNext",
     "moduleResolution": "bundler",
-    "allowSyntheticDefaultImports": true
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true
   },
   "include": ["vite.config.ts"]
 }