diff --git a/.gitignore b/.gitignore
index 786253e..7a21a8d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -688,7 +688,7 @@ FodyWeavers.xsd
 dist
 
 tools/syncConfig.js
-tools/deploy.js
+tools/parse.js
 tools/v2.js
 tools/clean.js
 package-lock.json
diff --git a/LICENSE b/LICENSE
index 0404ba7..79f09ef 100644
--- a/LICENSE
+++ b/LICENSE
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2022 Jonas Pfalzgraf
+Copyright (c) 2024 Jonas Pfalzgraf
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
diff --git a/package.json b/package.json
index f50e507..e209a58 100644
--- a/package.json
+++ b/package.json
@@ -3,25 +3,21 @@
   "version": "0.0.1",
   "private": true,
   "scripts": {
-    "deploy-v3": "npx rimraf ./dist/ && 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.ts && webpack --config ./webpack.config.settings.ts && webpack --config ./webpack.config.background.ts",
-    "build-css": "sass ./src/sass/:./dist/css/",
+    "deploy-v3": "npx rimraf ./dist/ && npm run build-tooling && npm run sync && npm run build && node ./tools/parse.js",
+    "deploy-v2": "npm run deploy-v3 && node ./tools/v2.js",
+    "build": "vite build",
     "build-tooling": "tsc --project ./tooling.tsconfig.json",
     "watch-ts": "tsc -w -p tsconfig.json",
     "watch-sass": "sass --watch ./src/sass/:./dist/css/",
     "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",
-    "ts-node": "^10.9.1",
-    "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",
+    "vite": "^5.2.12",
+    "vite-tsconfig-paths": "^4.3.2"
   },
   "browserslist": [
     "> 1%",
@@ -45,7 +41,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/public/manifest.json b/public/manifest.json
index 2f57490..42ee42b 100644
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -21,15 +21,6 @@
     "notifications"
   ],
   "background": {
-    "service_worker": "js/background.js"
-  },
-  "commands": {
-    "_execute_browser_action": {
-      "suggested_key": {
-        "default": "Ctrl+Shift+F",
-        "mac": "MacCtrl+Shift+F"
-      },
-      "description": "Opens popup.html"
-    }
+    "service_worker": "background.js"
   }
 }
\ No newline at end of file
diff --git a/public/options.html b/public/options.html
index 161fb1a..9456208 100644
--- a/public/options.html
+++ b/public/options.html
@@ -6,7 +6,6 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="./favicon.ico">
     <title>{{BET}} Options</title>
-    <link rel="stylesheet" href="css/app.css">
   </head>
   <body>
     <noscript>
@@ -20,7 +19,7 @@
       </div>
     </div>
     <footer>
-      <script type="module" src="./js/settings.js"></script>
+      <script type="module" src="./settings.js"></script>
     </footer>
   </body>
 </html>
diff --git a/public/popup.html b/public/popup.html
index e467626..28cdf54 100644
--- a/public/popup.html
+++ b/public/popup.html
@@ -6,7 +6,6 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="./favicon.ico">
     <title>{{BET}}</title>
-    <link rel="stylesheet" href="css/app.css">
   </head>
   <body>
     <noscript>
@@ -20,7 +19,7 @@
       </div>
     </div>
     <footer>
-      <script type="module" src="./js/app.js"></script>
+      <script type="module" src="./app.js"></script>
     </footer>
   </body>
 </html>
diff --git a/src/app.ts b/src/app.ts
index 3dc1fa6..b1d8653 100644
--- a/src/app.ts
+++ b/src/app.ts
@@ -1,4 +1,5 @@
 import { Session } from "./classes/session"
+import "./sass/app.sass"
 
 class App {
 
diff --git a/src/background.ts b/src/background.ts
index 197f02f..4941b1c 100644
--- a/src/background.ts
+++ b/src/background.ts
@@ -1,12 +1,9 @@
 class Background {
+	constructor() {
+		this.main();
+	}
 
-    constructor() {
-        this.main();
-    }
-
-    async main(): Promise<void> {
-
-    }
+	async main(): Promise<void> {}
 }
 
-new Background();
\ No newline at end of file
+new Background();
diff --git a/src/settings.ts b/src/settings.ts
index 24d6bb8..10065b7 100644
--- a/src/settings.ts
+++ b/src/settings.ts
@@ -1,5 +1,6 @@
 import { Session } from "./classes/session";
 import { BasicButton } from "./components/button";
+import "./sass/app.sass";
 
 class Settings {
 
diff --git a/tooling.tsconfig.json b/tooling.tsconfig.json
index 84ac8bc..72730da 100644
--- a/tooling.tsconfig.json
+++ b/tooling.tsconfig.json
@@ -1,6 +1,9 @@
 {
     "compilerOptions": {
         "target": "ESNext",
+        "lib": [
+            "ESNext"
+        ],
         "module": "ESNext",
         "outDir": "./tools/",
         "rootDir": "./tools/",
diff --git a/tools/clean.ts b/tools/clean.ts
deleted file mode 100644
index 2ed412e..0000000
--- a/tools/clean.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-// @ts-ignore
-const fs = require("fs");
-
-function removeExport(file: string) {
-	let content = fs.readFileSync(file, "utf8");
-	content = content.replace("export {};", "");
-	fs.writeFileSync(file, content);
-}
-
-removeExport("./dist/js/background.js");
diff --git a/tools/deploy.ts b/tools/deploy.ts
deleted file mode 100644
index 7308509..0000000
--- a/tools/deploy.ts
+++ /dev/null
@@ -1,86 +0,0 @@
-const path = require('path');
-// @ts-ignore
-const fs = require('fs');
-
-const appConfigJson = JSON.parse(fs.readFileSync('./app.config.json', 'utf8'));
-const DEPLOY_ENTRY = "./public/";
-const DEPLOY_TARGET = "./dist/";
-
-function deleteFolderRecursive(path: string) {
-  if (fs.existsSync(path)) {
-    fs.readdirSync(path).forEach(function (file: string) {
-      const curPath = path + "/" + file;
-      if (fs.lstatSync(curPath).isDirectory()) {
-        deleteFolderRecursive(curPath);
-      } else {
-        fs.unlinkSync(curPath);
-      }
-    });
-    fs.rmdirSync(path);
-  }
-}
-
-function findHtmlFilesRecursive(source: string): string[] {
-  let files: string[] = [];
-  const dir = fs.readdirSync(source);
-  dir.forEach(function (file: string) {
-    const sourceFile = path.join(source, file);
-    const stat = fs.lstatSync(sourceFile);
-    if (stat.isDirectory()) {
-      files = files.concat(findHtmlFilesRecursive(sourceFile));
-    } else {
-      if (path.extname(sourceFile) == '.html') {
-        files.push(sourceFile);
-      }
-    }
-  });
-  return files;
-}
-
-function replaceKeywordsInHtmlFile(file: string) {
-  let content = fs.readFileSync(file, 'utf8');
-  const pairs = appConfigJson.htmlTemplatePairs;
-  pairs.forEach(function (pair: object) {
-    // @ts-ignore
-    content = content.replaceAll(pair.key, pair.value);
-  });
-  file = file.replace("public\\", DEPLOY_TARGET);
-  fs.writeFileSync(file, content);
-}
-
-function buildHtmlFiles(source: string) {
-  const files = findHtmlFilesRecursive(source);
-  files.forEach(function (file: string) {
-    replaceKeywordsInHtmlFile(file);
-  });
-}
-
-function mkdirSync(path: string) {
-  try {
-    fs.mkdirSync(path);
-  } catch (e: any) {
-    if (e.code != 'EEXIST') throw e;
-  }
-}
-
-function copyFiles(source: string, target: string) {
-  const files = fs.readdirSync(source);
-  files.forEach(function (file: string) {
-    const sourceFile = path.join(source, file);
-    const targetFile = path.join(target, file);
-    const stat = fs.lstatSync(sourceFile);
-    if (stat.isDirectory()) {
-      mkdirSync(targetFile);
-      copyFiles(sourceFile, targetFile);
-    } else {
-      fs.writeFileSync(targetFile, fs.readFileSync(sourceFile));
-    }
-  });
-}
-
-deleteFolderRecursive(DEPLOY_TARGET);
-mkdirSync(DEPLOY_TARGET);
-copyFiles(DEPLOY_ENTRY, DEPLOY_TARGET);
-buildHtmlFiles(DEPLOY_ENTRY);
-
-console.log("Deployed to " + DEPLOY_TARGET);
diff --git a/tools/parse.ts b/tools/parse.ts
new file mode 100644
index 0000000..f717693
--- /dev/null
+++ b/tools/parse.ts
@@ -0,0 +1,72 @@
+import * as fs from "fs";
+import * as path from "path";
+const appConfig = JSON.parse(fs.readFileSync("./app.config.json", "utf8"));
+const DEPLOY_TARGET = "./dist/";
+
+function findCssFileNames(source: string): string[] {
+	let files: string[] = [];
+	const dir = fs.readdirSync(source);
+	dir.forEach(function (file: string) {
+		const sourceFile = path.join(source, file);
+		const stat = fs.lstatSync(sourceFile);
+		if (stat.isDirectory()) {
+			files = files.concat(findCssFileNames(sourceFile));
+		} else {
+			if (path.extname(sourceFile) == ".css") {
+				files.push(file);
+			}
+		}
+	});
+	return files;
+}
+
+function findHtmlFilesRecursive(source: string): string[] {
+	let files: string[] = [];
+	const dir = fs.readdirSync(source);
+	dir.forEach(function (file: string) {
+		const sourceFile = path.join(source, file);
+		const stat = fs.lstatSync(sourceFile);
+		if (stat.isDirectory()) {
+			files = files.concat(findHtmlFilesRecursive(sourceFile));
+		} else {
+			if (path.extname(sourceFile) == ".html") {
+				files.push(sourceFile);
+			}
+		}
+	});
+	return files;
+}
+
+function replaceKeywordsInHtmlFile(file: string) {
+	let content = fs.readFileSync(file, "utf8");
+	const pairs: { key: string; value: string }[] = appConfig.htmlTemplatePairs;
+	pairs.forEach(function (pair: { key: string; value: string }) {
+		//@ts-ignore
+		content = content.replaceAll(pair.key, pair.value);
+	});
+	file = file.replace("public\\", DEPLOY_TARGET);
+	fs.writeFileSync(file, content);
+}
+
+function buildHtmlFiles(source: string) {
+	const files = findHtmlFilesRecursive(source);
+	files.forEach(function (file: string) {
+		replaceKeywordsInHtmlFile(file);
+	});
+}
+
+findCssFileNames(DEPLOY_TARGET).forEach((file: string) => {
+	const files = findHtmlFilesRecursive(DEPLOY_TARGET);
+	files.forEach(function (htmlFile: string) {
+		let content = fs.readFileSync(htmlFile, "utf8");
+		content = content.replace(
+			"</head>",
+			`<link rel="stylesheet" href="./assets/${file}">\n</head>`
+		);
+		fs.writeFileSync(htmlFile, content);
+	});
+});
+
+buildHtmlFiles(DEPLOY_TARGET);
+
+console.log("Parsed Files: ", findHtmlFilesRecursive(DEPLOY_TARGET));
diff --git a/tsconfig.json b/tsconfig.json
index 3e8038b..a691321 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -6,7 +6,7 @@
         // "incremental": true,                         /* Enable incremental compilation */
         "target": "ESNext" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', 'ES2021', or 'ESNEXT'. */,
         "module": "ESNext" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
-        // "lib": ["ESNext"],                                   /* Specify library files to be included in the compilation. */
+        "lib": ["ESNext", "DOM"],                                   /* Specify library files to be included in the compilation. */
         // "allowJs": true,                             /* Allow javascript files to be compiled. */
         // "checkJs": true,                             /* Report errors in .js files. */
         // "jsx": "preserve",                           /* Specify JSX code generation: 'preserve', 'react-native', 'react', 'react-jsx' or 'react-jsxdev'. */
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100644
index 0000000..afb89cb
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,28 @@
+import { defineConfig } from "vite";
+import { resolve } from "path";
+import tsconfigPaths from "vite-tsconfig-paths";
+
+export default defineConfig({
+	build: {
+		rollupOptions: {
+			input: {
+				app: resolve(__dirname, "src/app.ts"),
+				settings: resolve(__dirname, "src/settings.ts"),
+				background: resolve(__dirname, "src/background.ts"),
+			},
+			output: {
+				entryFileNames: "[name].js",
+				dir: resolve(__dirname, "dist"),
+			},
+		},
+		sourcemap: true,
+	},
+	plugins: [tsconfigPaths()],
+	resolve: {
+		extensions: [".tsx", ".ts", ".scss", ".sass"],
+	},
+	esbuild: {
+		include: /.*\.tsx?$/,
+		exclude: [/node_modules/, /dist/],
+	},
+});
diff --git a/webpack.config.background.ts b/webpack.config.background.ts
deleted file mode 100644
index 7102629..0000000
--- a/webpack.config.background.ts
+++ /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.settings.ts b/webpack.config.settings.ts
deleted file mode 100644
index e8e1821..0000000
--- a/webpack.config.settings.ts
+++ /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'),
-	},
-};
diff --git a/webpack.config.ts b/webpack.config.ts
deleted file mode 100644
index b7bf57e..0000000
--- a/webpack.config.ts
+++ /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'),
-	},
-};
