diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 31eb007..1eadbd8 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -9,6 +9,7 @@
       "version": "1.0.1",
       "license": "MIT",
       "dependencies": {
+        "@alpinejs/mask": "^3.14.1",
         "@babel/core": "^7.16.7",
         "@babel/eslint-parser": "^7.16.5",
         "@babel/plugin-proposal-class-properties": "^7.16.7",
@@ -31,7 +32,6 @@
         "htmx.org": "^2.0.1",
         "hyperscript.org": "^0.9.12",
         "jquery": "^3.7.1",
-        "jquery-mask-plugin": "^1.14.16",
         "mini-css-extract-plugin": "^2.5.1",
         "postcss-loader": "^6.2.1",
         "postcss-preset-env": "^7.2.3",
@@ -65,6 +65,11 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@alpinejs/mask": {
+      "version": "3.14.1",
+      "resolved": "https://registry.npmjs.org/@alpinejs/mask/-/mask-3.14.1.tgz",
+      "integrity": "sha512-xW5uyn9lFMpvdzA4RfSE3lj+HjA7BjtEk+QJXU7jB5Wxpe0Jk5qFOrCydTDl+bFkRwOk/fMe2PG7IWeWEnn4BA=="
+    },
     "node_modules/@ampproject/remapping": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
@@ -5522,11 +5527,6 @@
       "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz",
       "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg=="
     },
-    "node_modules/jquery-mask-plugin": {
-      "version": "1.14.16",
-      "resolved": "https://registry.npmjs.org/jquery-mask-plugin/-/jquery-mask-plugin-1.14.16.tgz",
-      "integrity": "sha512-reywdHlYEkPbzWjTpcc1fk9XQ3PLvO5dzEAVqy8zI7NTF22tB1HbeU3iboZTLdkBEPaWAqeI2HtEjsGQ4roZKw=="
-    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 2b37a88..18481cb 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -22,6 +22,7 @@
     "url": "https://github.com/AccordBox/python-webpack-boilerplate/issues"
   },
   "dependencies": {
+    "@alpinejs/mask": "^3.14.1",
     "@babel/core": "^7.16.7",
     "@babel/eslint-parser": "^7.16.5",
     "@babel/plugin-proposal-class-properties": "^7.16.7",
@@ -44,7 +45,6 @@
     "htmx.org": "^2.0.1",
     "hyperscript.org": "^0.9.12",
     "jquery": "^3.7.1",
-    "jquery-mask-plugin": "^1.14.16",
     "mini-css-extract-plugin": "^2.5.1",
     "postcss-loader": "^6.2.1",
     "postcss-preset-env": "^7.2.3",
diff --git a/frontend/src/application/htmx.js b/frontend/src/application/htmx.js
index 069194e..7571652 100644
--- a/frontend/src/application/htmx.js
+++ b/frontend/src/application/htmx.js
@@ -1,6 +1,11 @@
 import htmx from "htmx.org";
 import _hyperscript from 'hyperscript.org/dist/_hyperscript.min';
+import Alpine from "alpinejs";
+import mask from '@alpinejs/mask';
+window.Alpine = Alpine;
 
+Alpine.start();
+Alpine.plugin(mask);
 _hyperscript.browserInit();
 
 let modalEle = document.getElementById("modal");
diff --git a/frontend/src/application/jquery.js b/frontend/src/application/jquery.js
index 58d947d..b482036 100644
--- a/frontend/src/application/jquery.js
+++ b/frontend/src/application/jquery.js
@@ -1,3 +1,3 @@
 const $ = require('jquery');
 window.jQuery = $;
-window.$ = $;
\ No newline at end of file
+window.$ = $;
diff --git a/frontend/src/application/jquery_mask.js b/frontend/src/application/jquery_mask.js
deleted file mode 100644
index 82f9b70..0000000
--- a/frontend/src/application/jquery_mask.js
+++ /dev/null
@@ -1 +0,0 @@
-import 'jquery-mask-plugin/dist/jquery.mask.min';