diff --git a/.gitignore b/.gitignore
index 1e40815..29b3249 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,6 @@
 /node_modules
 /public/hot
+/public/build
 /public/storage
 /public/css
 /public/js
diff --git a/package.json b/package.json
index da26689..46352ac 100644
--- a/package.json
+++ b/package.json
@@ -1,13 +1,8 @@
 {
     "private": true,
     "scripts": {
-        "dev": "npm run development",
-        "development": "mix",
-        "watch": "mix watch",
-        "watch-poll": "mix watch -- --watch-options-poll=1000",
-        "hot": "mix watch --hot",
-        "prod": "npm run production",
-        "production": "mix --production"
+        "dev": "vite",
+        "build": "vite build"
     },
     "devDependencies": {
         "@tailwindcss/forms": "^0.4.0",
@@ -17,9 +12,8 @@
         "lodash": "^4.17.19",
         "postcss": "^8.4.6",
         "postcss-import": "^14.0.2",
-        "tailwindcss": "^3.0.18"
-    },
-    "dependencies": {
-        "laravel-mix": "^6.0.49"
+        "tailwindcss": "^3.0.18",
+        "vite": "^3.0.2",
+        "laravel-vite-plugin": "^0.6.0"
     }
 }
diff --git a/postcss.config.js b/postcss.config.js
new file mode 100644
index 0000000..fef1b22
--- /dev/null
+++ b/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {},
+    },
+}
diff --git a/resources/js/app.js b/resources/js/app.js
index 40c55f6..e59d6a0 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -1 +1 @@
-require('./bootstrap');
+import './bootstrap';
diff --git a/resources/js/bootstrap.js b/resources/js/bootstrap.js
index 6922577..0f3a0a1 100644
--- a/resources/js/bootstrap.js
+++ b/resources/js/bootstrap.js
@@ -1,4 +1,5 @@
-window._ = require('lodash');
+import _ from 'lodash';
+window._ = _;
 
 /**
  * We'll load the axios HTTP library which allows us to easily issue requests
@@ -6,7 +7,8 @@ window._ = require('lodash');
  * CSRF token as a header based on the value of the "XSRF" token cookie.
  */
 
-window.axios = require('axios');
+import axios from 'axios';
+window.axios = axios;
 
 window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
 
@@ -22,7 +24,7 @@ window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
 
 // window.Echo = new Echo({
 //     broadcaster: 'pusher',
-//     key: process.env.MIX_PUSHER_APP_KEY,
-//     cluster: process.env.MIX_PUSHER_APP_CLUSTER,
+//     key: import.meta.env.VITE_PUSHER_APP_KEY,
+//     cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER,
 //     forceTLS: true
 // });
diff --git a/vite.config.js b/vite.config.js
new file mode 100644
index 0000000..89f26f5
--- /dev/null
+++ b/vite.config.js
@@ -0,0 +1,14 @@
+import { defineConfig } from 'vite';
+import laravel from 'laravel-vite-plugin';
+
+export default defineConfig({
+    plugins: [
+        laravel({
+            input: [
+                'resources/css/app.css',
+                'resources/js/app.js',
+            ],
+            refresh: true,
+        }),
+    ],
+});
diff --git a/webpack.mix.js b/webpack.mix.js
deleted file mode 100644
index c0e99dd..0000000
--- a/webpack.mix.js
+++ /dev/null
@@ -1,18 +0,0 @@
-const mix = require('laravel-mix');
-
-/*
- |--------------------------------------------------------------------------
- | Mix Asset Management
- |--------------------------------------------------------------------------
- |
- | Mix provides a clean, fluent API for defining some Webpack build steps
- | for your Laravel applications. By default, we are compiling the CSS
- | file for the application as well as bundling up all the JS files.
- |
- */
-
-mix.js('resources/js/app.js', 'public/js').postCss('resources/css/app.css', 'public/css', [
-    require('postcss-import'),
-    require('tailwindcss'),
-    require('autoprefixer'),
-]);