diff --git a/package.json b/package.json
index a383aac..47f41da 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,7 @@
   "scripts": {
     "deploy-v3": "npm run build-tooling && node ./tools/deploy.js && npm run sync && npm run build-js && npm run build-css && node ./tools/clean.js",
     "deploy-v2": "npm run deploy-v3 && node ./tools/v2.js",
-    "build-js": "webpack --config ./webpack.config.cjs && webpack --config ./webpack.config.settings.cjs && webpack --config ./webpack.config.background.cjs",
+    "build-js": "vite build --config ./vite.config.js && vite build --config ./vite.config.settings.js && vite build --config ./vite.config.background.js",
     "build-css": "sass ./src/sass/:./dist/css/",
     "build-tooling": "tsc --project ./tooling.tsconfig.json",
     "watch-ts": "tsc -w -p tsconfig.json",
@@ -14,14 +14,14 @@
     "sync": "npm run build-tooling && node ./tools/syncConfig.js"
   },
   "devDependencies": {
-    "@types/chrome": "^0.0.206",
-    "@types/node": "^18.11.18",
-    "@webcomponents/webcomponentsjs": "^2.7.0",
-    "sass": "^1.39.0",
-    "ts-loader": "^9.4.2",
-    "typescript": "^4.2.4",
-    "webpack": "^5.75.0",
-    "webpack-cli": "^5.0.1"
+    "@types/chrome": "^0.0.268",
+    "@types/node": "^20.13.0",
+    "@webcomponents/webcomponentsjs": "^2.8.0",
+    "sass": "^1.77.4",
+    "ts-loader": "^9.5.1",
+    "typescript": "^5.4.5",
+    "vite": "^5.2.12",
+    "vite-tsconfig-paths": "^4.3.2"
   },
   "browserslist": [
     "> 1%",
@@ -45,7 +45,7 @@
     "url": "https://github.com/JosunLP/BrowserExtensionTemplate/issues"
   },
   "dependencies": {
-    "@webcomponents/custom-elements": "^1.5.1",
-    "bootstrap": "^5.2.3"
+    "@webcomponents/custom-elements": "^1.6.0",
+    "bootstrap": "^5.3.3"
   }
 }
\ No newline at end of file
diff --git a/vite.config.background.js b/vite.config.background.js
new file mode 100644
index 0000000..3f0daf4
--- /dev/null
+++ b/vite.config.background.js
@@ -0,0 +1,24 @@
+import { defineConfig } from "vite";
+import { resolve } from "path";
+import tsconfigPaths from "vite-tsconfig-paths";
+
+export default defineConfig({
+	build: {
+		rollupOptions: {
+			input: resolve(__dirname, "src/background.ts"),
+			output: {
+				entryFileNames: "background.js",
+				dir: resolve(__dirname, "dist/js"),
+			},
+		},
+		sourcemap: true,
+	},
+	plugins: [tsconfigPaths()],
+	resolve: {
+		extensions: [".tsx", ".ts"],
+	},
+	esbuild: {
+		include: /.*\.tsx?$/,
+		exclude: [/node_modules/, /dist/, /src\/app\.ts/, /src\/settings\.ts/],
+	},
+});
diff --git a/vite.config.js b/vite.config.js
new file mode 100644
index 0000000..44d2f87
--- /dev/null
+++ b/vite.config.js
@@ -0,0 +1,29 @@
+import { defineConfig } from "vite";
+import { resolve } from "path";
+import tsconfigPaths from "vite-tsconfig-paths";
+
+export default defineConfig({
+	build: {
+		rollupOptions: {
+			input: resolve(__dirname, "src/app.ts"),
+			output: {
+				entryFileNames: "app.js",
+				dir: resolve(__dirname, "dist/js"),
+			},
+		},
+		sourcemap: true,
+	},
+	plugins: [tsconfigPaths()],
+	resolve: {
+		extensions: [".tsx", ".ts"],
+	},
+	esbuild: {
+		include: /.*\.tsx?$/,
+		exclude: [
+			/node_modules/,
+			/dist/,
+			/src\/background\.ts/,
+			/src\/settings\.ts/,
+		],
+	},
+});
diff --git a/vite.config.settings.js b/vite.config.settings.js
new file mode 100644
index 0000000..0508763
--- /dev/null
+++ b/vite.config.settings.js
@@ -0,0 +1,29 @@
+import { defineConfig } from "vite";
+import { resolve } from "path";
+import tsconfigPaths from "vite-tsconfig-paths";
+
+export default defineConfig({
+	build: {
+		rollupOptions: {
+			input: resolve(__dirname, "src/settings.ts"),
+			output: {
+				entryFileNames: "settings.js",
+				dir: resolve(__dirname, "dist/js"),
+			},
+		},
+		sourcemap: true,
+	},
+	plugins: [tsconfigPaths()],
+	resolve: {
+		extensions: [".tsx", ".ts"],
+	},
+	esbuild: {
+		include: /.*\.tsx?$/,
+		exclude: [
+			/node_modules/,
+			/dist/,
+			/src\/background\.ts/,
+			/src\/app\.ts/,
+		],
+	},
+});
diff --git a/webpack.config.background.cjs b/webpack.config.background.cjs
deleted file mode 100644
index 7102629..0000000
--- a/webpack.config.background.cjs
+++ /dev/null
@@ -1,28 +0,0 @@
-const path = require('path');
-
-module.exports = {
-	entry: './src/background.ts',
-	mode: 'production',
-	devtool: 'source-map',
-	module: {
-		rules: [
-			{
-				test: /\.tsx?$/,
-				use: 'ts-loader',
-				exclude: [
-					"/node_modules/",
-					"/dist/",
-					"/src/app.ts",
-					"/src/settings.ts"
-				],
-			},
-		],
-	},
-	resolve: {
-		extensions: ['.tsx', '.ts'],
-	},
-	output: {
-		filename: 'background.js',
-		path: path.resolve(__dirname, 'dist/js'),
-	},
-};
diff --git a/webpack.config.cjs b/webpack.config.cjs
deleted file mode 100644
index b7bf57e..0000000
--- a/webpack.config.cjs
+++ /dev/null
@@ -1,28 +0,0 @@
-const path = require('path');
-
-module.exports = {
-	entry: './src/app.ts',
-	mode: 'production',
-	devtool: 'source-map',
-	module: {
-		rules: [
-			{
-				test: /\.tsx?$/,
-				use: 'ts-loader',
-				exclude: [
-					"/node_modules/",
-					"/dist/",
-					"/src/background.ts",
-					"/src/settings.ts"
-				],
-			},
-		],
-	},
-	resolve: {
-		extensions: ['.tsx', '.ts'],
-	},
-	output: {
-		filename: 'app.js',
-		path: path.resolve(__dirname, 'dist/js'),
-	},
-};
diff --git a/webpack.config.settings.cjs b/webpack.config.settings.cjs
deleted file mode 100644
index e8e1821..0000000
--- a/webpack.config.settings.cjs
+++ /dev/null
@@ -1,28 +0,0 @@
-const path = require('path');
-
-module.exports = {
-	entry: './src/settings.ts',
-	mode: 'production',
-	devtool: 'source-map',
-	module: {
-		rules: [
-			{
-				test: /\.tsx?$/,
-				use: 'ts-loader',
-				exclude: [
-					"/node_modules/",
-					"/dist/",
-					"/src/background.ts",
-					"/src/app.ts"
-				],
-			},
-		],
-	},
-	resolve: {
-		extensions: ['.tsx', '.ts'],
-	},
-	output: {
-		filename: 'settings.js',
-		path: path.resolve(__dirname, 'dist/js'),
-	},
-};