diff --git a/.gitignore b/.gitignore
index 570ee35..873a5d8 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,3 +5,6 @@ dist
 yarn-error.log
 
 src/package.json
+
+intermediates/
+dist/
\ No newline at end of file
diff --git a/assets/config.json b/assets/config.json
deleted file mode 100644
index 6bcf54c..0000000
--- a/assets/config.json
+++ /dev/null
@@ -1,10 +0,0 @@
-{
-  "bundles": {
-    "app": "ts/app.ts",
-    "layout": "sass/layout.scss",
-    "error": "sass/error.scss",
-    "logo": "img/logo.svg",
-    "logo_png": "img/logox128.png",
-    "logo_png_xxl": "img/logox1024.png"
-  }
-}
\ No newline at end of file
diff --git a/assets/ts/font-awesome.ts b/assets/ts/font-awesome.ts
deleted file mode 100644
index 5ce65ff..0000000
--- a/assets/ts/font-awesome.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import '../../node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss';
-import '../../node_modules/@fortawesome/fontawesome-free/scss/regular.scss';
-import '../../node_modules/@fortawesome/fontawesome-free/scss/solid.scss';
-import '../../node_modules/@fortawesome/fontawesome-free/scss/brands.scss';
diff --git a/package.json b/package.json
index b283146..b74ecdc 100644
--- a/package.json
+++ b/package.json
@@ -10,47 +10,53 @@
     "test": "jest --verbose --runInBand",
     "clean": "node scripts/clean.js",
     "prepare-sources": "node scripts/prepare-sources.js",
-    "compile": "yarn clean && tsc",
-    "build": "yarn prepare-sources && yarn compile && webpack --mode production",
-    "dev": "yarn prepare-sources && concurrently -k -n \"Typescript,Node,Webpack,Maildev\" -p \"[{name}]\" -c \"blue,green,red,yellow\" \"tsc --watch\" \"nodemon\" \"webpack --watch --mode development\" \"maildev\"",
-    "start": "yarn build && node",
-    "lint": "eslint ."
+    "compile": "yarn clean && yarn prepare-sources && tsc --build",
+    "build": "yarn compile && node . pre-compile-views && node scripts/dist.js",
+    "build-production": "NODE_ENV=production yarn build",
+    "dev": "yarn compile && concurrently -k -n \"Maildev,Typescript,ViewPreCompile,Node\" -p \"[{name}]\" -c \"yellow,blue,red,green\" \"maildev\" \"tsc --build --watch --preserveWatchOutput\" \"nodemon -i public -i intermediates -- pre-compile-views --watch\" \"nodemon -i public -i intermediates\"",
+    "lint": "eslint .",
+    "start": "yarn build-production && node ."
   },
   "devDependencies": {
     "@babel/core": "^7.9.0",
     "@babel/preset-env": "^7.9.5",
     "@fortawesome/fontawesome-free": "^5.14.0",
-    "@types/config": "^0.0.38",
+    "@tsconfig/svelte": "^2.0.1",
+    "@types/config": "^0.0.40",
     "@types/express": "^4.17.6",
     "@types/express-session": "^1.17.0",
     "@types/feather-icons": "^4.7.0",
-    "@types/formidable": "^1.0.31",
-    "@types/jest": "^26.0.4",
+    "@types/formidable": "^2.0.0",
+    "@types/jest": "^27.0.3",
     "@types/mysql": "^2.15.15",
-    "@types/node": "^15.0.1",
+    "@types/node": "^16.11.9",
     "@types/nodemailer": "^6.4.0",
     "@types/nunjucks": "^3.1.3",
-    "@types/ws": "^7.2.6",
-    "@typescript-eslint/eslint-plugin": "^4.3.0",
-    "@typescript-eslint/parser": "^4.3.0",
+    "@types/ws": "^8.2.0",
+    "@typescript-eslint/eslint-plugin": "^5.4.0",
+    "@typescript-eslint/parser": "^5.4.0",
     "babel-loader": "^8.1.0",
+    "clear-module": "^4.1.2",
     "concurrently": "^6.0.0",
-    "css-loader": "^5.0.0",
-    "eslint": "^7.10.0",
+    "css-loader": "^6.5.1",
+    "eslint": "^8.2.0",
     "feather-icons": "^4.28.0",
     "file-loader": "^6.0.0",
     "image-minimizer-webpack-plugin": "^2.2.0",
     "imagemin-gifsicle": "^7.0.0",
     "imagemin-mozjpeg": "^9.0.0",
     "imagemin-pngquant": "^9.0.2",
-    "imagemin-svgo": "^9.0.0",
+    "imagemin-svgo": "^10.0.0",
     "imagemin-webp": "^6.0.0",
     "jest": "^27.0.4",
     "maildev": "^1.1.0",
-    "mini-css-extract-plugin": "^1.2.1",
+    "mini-css-extract-plugin": "^2.4.5",
     "nodemon": "^2.0.3",
+    "normalize.css": "^8.0.1",
     "sass": "^1.32.12",
     "sass-loader": "^12.0.0",
+    "svelte": "^3.44.2",
+    "svelte-preprocess": "^4.9.8",
     "svgo": "^2.3.0",
     "terser-webpack-plugin": "^5.0.3",
     "ts-jest": "^27.0.3",
@@ -62,6 +68,6 @@
   "dependencies": {
     "config": "^3.3.1",
     "express": "^4.17.1",
-    "swaf": "^0.23.0"
+    "swaf": "^0.24.4"
   }
 }
diff --git a/scripts/_functions.js b/scripts/_functions.js
new file mode 100644
index 0000000..0fea1c4
--- /dev/null
+++ b/scripts/_functions.js
@@ -0,0 +1,22 @@
+const fs = require('fs');
+const path = require('path');
+
+function copyRecursively(file, destination) {
+    const target = path.join(destination, path.basename(file));
+    if (fs.statSync(file).isDirectory()) {
+        console.log('mkdir', target);
+
+        fs.mkdirSync(target, {recursive: true});
+        fs.readdirSync(file).forEach(f => {
+            copyRecursively(path.join(file, f), target);
+        });
+    } else {
+        console.log('> cp ', target);
+
+        fs.copyFileSync(file, target);
+    }
+}
+
+module.exports = {
+    copyRecursively,
+};
\ No newline at end of file
diff --git a/scripts/clean.js b/scripts/clean.js
index d5ef093..32ebb24 100644
--- a/scripts/clean.js
+++ b/scripts/clean.js
@@ -1,7 +1,9 @@
 const fs = require('fs');
 
 [
+    'intermediates',
     'dist',
+    'public',
 ].forEach(file => {
     if (fs.existsSync(file)) {
         console.log('Cleaning', file, '...');
diff --git a/scripts/dist.js b/scripts/dist.js
new file mode 100644
index 0000000..a0ead2a
--- /dev/null
+++ b/scripts/dist.js
@@ -0,0 +1,22 @@
+const fs = require('fs');
+const path = require('path');
+const {copyRecursively} = require('./_functions.js');
+
+
+[
+    'yarn.lock',
+    'README.md',
+    'config/',
+].forEach(file => {
+    copyRecursively(file, 'dist');
+});
+
+fs.mkdirSync('dist/types', {recursive: true});
+
+fs.readdirSync('src/types').forEach(file => {
+    copyRecursively(path.join('src/types', file), 'dist/types');
+});
+
+fs.readdirSync('src/assets').forEach(file => {
+    copyRecursively(path.join('src/assets', file), 'dist/assets');
+});
diff --git a/scripts/prepare-sources.js b/scripts/prepare-sources.js
index a78c2f3..c8ee7b9 100644
--- a/scripts/prepare-sources.js
+++ b/scripts/prepare-sources.js
@@ -1,4 +1,28 @@
 const fs = require('fs');
 const path = require('path');
 
-fs.copyFileSync('package.json', path.join('src', 'package.json'));
+// These folders must exist for nodemon not to loop indefinitely.
+[
+    'public',
+    'dist',
+    'intermediates',
+    'intermediates/assets',
+].forEach(dir => {
+    if (!fs.existsSync(dir)) fs.mkdirSync(dir);
+});
+
+// Symlink to build/common
+const commonLocalSymlink = path.resolve('intermediates/common-local');
+if (!fs.existsSync(commonLocalSymlink)) {
+    const target = path.resolve('dist/common-local');
+    fs.symlinkSync(target, commonLocalSymlink);
+}
+
+const commonSymlink = path.resolve('intermediates/common');
+if (!fs.existsSync(commonSymlink)) {
+    const target = path.resolve('node_modules/swaf/common');
+    fs.symlinkSync(target, commonSymlink);
+}
+
+// Copy package.json
+fs.copyFileSync('package.json', 'dist/package.json');
diff --git a/src/App.ts b/src/App.ts
index 6272da0..768d322 100644
--- a/src/App.ts
+++ b/src/App.ts
@@ -2,7 +2,6 @@ import Application from "swaf/Application";
 import Migration, {MigrationType} from "swaf/db/Migration";
 import CreateMigrationsTable from "swaf/migrations/CreateMigrationsTable";
 import ExpressAppComponent from "swaf/components/ExpressAppComponent";
-import NunjucksComponent from "swaf/components/NunjucksComponent";
 import MysqlComponent from "swaf/components/MysqlComponent";
 import LogRequestsComponent from "swaf/components/LogRequestsComponent";
 import RedisComponent from "swaf/components/RedisComponent";
@@ -18,14 +17,22 @@ import AutoUpdateComponent from "swaf/components/AutoUpdateComponent";
 import DummyMigration from "swaf/migrations/DummyMigration";
 import DropLegacyLogsTable from "swaf/migrations/DropLegacyLogsTable";
 import PreviousUrlComponent from "swaf/components/PreviousUrlComponent";
-import packageJson = require('./package.json');
+import MailViewEngine from "swaf/frontend/MailViewEngine";
+import AssetCompiler from "swaf/frontend/AssetCompiler";
+import FrontendToolsComponent from "swaf/components/FrontendToolsComponent";
+import CopyAssetPreCompiler from "swaf/frontend/CopyAssetPreCompiler";
+import ScssAssetPreCompiler from "swaf/frontend/ScssAssetPreCompiler";
+import TypeScriptPreCompiler from "swaf/frontend/TypeScriptPreCompiler";
+import SvelteViewEngine from "swaf/frontend/SvelteViewEngine";
+import NunjucksViewEngine from "swaf/frontend/NunjucksViewEngine";
 
 export default class App extends Application {
     public constructor(
+        version: string,
         private readonly addr: string,
         private readonly port: number,
     ) {
-        super(packageJson.version);
+        super(version);
     }
 
     protected getMigrations(): MigrationType<Migration>[] {
@@ -52,18 +59,27 @@ export default class App extends Application {
         this.use(new ServeStaticDirectoryComponent('node_modules/feather-icons/dist', '/icons'));
 
         // Dynamic views and routes
-        this.use(new NunjucksComponent());
+        const intermediateDirectory = 'intermediates/assets';
+        const assetCompiler = new AssetCompiler(intermediateDirectory, 'public');
+        const additionalViewPaths = ['test/assets'];
+        this.use(new FrontendToolsComponent(
+            assetCompiler,
+            new CopyAssetPreCompiler(intermediateDirectory, '', 'json', additionalViewPaths, false),
+            new ScssAssetPreCompiler(intermediateDirectory, assetCompiler.targetDir, 'scss', additionalViewPaths),
+            new CopyAssetPreCompiler(intermediateDirectory, 'img', 'svg', additionalViewPaths, true),
+            new TypeScriptPreCompiler(intermediateDirectory, additionalViewPaths),
+            new SvelteViewEngine(intermediateDirectory, ...additionalViewPaths),
+            new NunjucksViewEngine(intermediateDirectory, ...additionalViewPaths),
+        ));
         this.use(new PreviousUrlComponent());
 
         // Maintenance
-        this.use(new MaintenanceComponent(this, () => {
-            return this.as(RedisComponent).canServe() && this.as(MysqlComponent).canServe();
-        }));
+        this.use(new MaintenanceComponent());
         this.use(new AutoUpdateComponent());
 
         // Services
         this.use(new MysqlComponent());
-        this.use(new MailComponent());
+        this.use(new MailComponent(new MailViewEngine(intermediateDirectory, ...additionalViewPaths)));
 
         // Session
         this.use(new RedisComponent());
@@ -76,7 +92,7 @@ export default class App extends Application {
         this.use(new CsrfProtectionComponent());
 
         // WebSocket server
-        this.use(new WebSocketServerComponent(this, this.as(ExpressAppComponent), this.as(RedisComponent)));
+        this.use(new WebSocketServerComponent());
     }
 
     private registerWebSocketListeners() {
diff --git a/assets/img/logo.svg b/src/assets/img/logo.svg
similarity index 100%
rename from assets/img/logo.svg
rename to src/assets/img/logo.svg
diff --git a/assets/img/logox1024.png b/src/assets/img/logox1024.png
similarity index 100%
rename from assets/img/logox1024.png
rename to src/assets/img/logox1024.png
diff --git a/assets/img/logox128.png b/src/assets/img/logox128.png
similarity index 100%
rename from assets/img/logox128.png
rename to src/assets/img/logox128.png
diff --git a/src/assets/package.json b/src/assets/package.json
new file mode 100644
index 0000000..1cd945a
--- /dev/null
+++ b/src/assets/package.json
@@ -0,0 +1,3 @@
+{
+    "type": "commonjs"
+}
diff --git a/assets/sass/_fonts.scss b/src/assets/sass/_fonts.scss
similarity index 100%
rename from assets/sass/_fonts.scss
rename to src/assets/sass/_fonts.scss
diff --git a/assets/sass/_vars.scss b/src/assets/sass/_vars.scss
similarity index 100%
rename from assets/sass/_vars.scss
rename to src/assets/sass/_vars.scss
diff --git a/assets/sass/app.scss b/src/assets/sass/app.scss
similarity index 100%
rename from assets/sass/app.scss
rename to src/assets/sass/app.scss
diff --git a/assets/sass/error.scss b/src/assets/sass/error.scss
similarity index 100%
rename from assets/sass/error.scss
rename to src/assets/sass/error.scss
diff --git a/assets/sass/layout.scss b/src/assets/sass/layout.scss
similarity index 89%
rename from assets/sass/layout.scss
rename to src/assets/sass/layout.scss
index 3d791fd..cf1f7c1 100644
--- a/assets/sass/layout.scss
+++ b/src/assets/sass/layout.scss
@@ -682,33 +682,6 @@ td.actions {
 	}
 }
 
-.data-table {
-	width: 100%;
-	text-align: left;
-	border-collapse: collapse;
-
-	th, td {
-		padding: 8px;
-	}
-
-	th {
-		border-bottom: 1px solid #39434a;
-		white-space: nowrap;
-	}
-
-	tr:nth-child(even) {
-		background-color: rgba(255, 255, 255, 0.03);
-	}
-
-	tr:hover {
-		background-color: rgba(255, 255, 255, 0.09);
-	}
-
-	thead tr:hover {
-		background-color: transparent;
-	}
-}
-
 
 // ---
 // --- Breadcrumb widget
@@ -766,82 +739,9 @@ td.actions {
 }
 
 
-// ---
-// --- Feather
-// ---
-.feather {
-	display: inline-flex;
-	justify-content: center;
-	align-items: center;
-
-	flex-shrink: 0;
-	width: var(--icon-size);
-	height: var(--icon-size);
-
-	--icon-size: 16px;
-	font-size: var(--icon-size);
-	stroke: currentColor;
-	stroke-width: 2;
-	stroke-linecap: square;
-	stroke-linejoin: miter;
-	fill: none;
-	vertical-align: middle;
-
-	h1 > &, h2 > &, h3 > & {
-		--icon-size: 24px;
-	}
-}
-
 // ---
 // --- Helper classes
 // ---
-.message {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-
-	padding: 8px 16px;
-
-	border-radius: 5px;
-
-	.feather {
-		--icon-size: 24px;
-		margin-right: 8px;
-	}
-
-	&:not(&-discreet) {
-		background-color: rgba(255, 255, 255, 0.33);
-
-		&[data-type=info], &[data-type=question] {
-			background-color: $infoColor;
-		}
-
-		&[data-type=success] {
-			background-color: $successColor;
-		}
-
-		&[data-type=warning] {
-			background-color: $warningColor;
-		}
-
-		&[data-type=error] {
-			background-color: $errorColor;
-		}
-	}
-
-	&-discreet {
-		color: mix($panelBackground, #fff, 35%);
-
-		.feather {
-			--icon-size: 20px;
-		}
-	}
-}
-
-.messages .message:not(:last-child) {
-	margin-bottom: 8px;
-}
-
 .container > .messages:first-child {
 	margin-top: 16px;
 }
diff --git a/assets/sass/responsivity_tools.scss b/src/assets/sass/responsivity_tools.scss
similarity index 100%
rename from assets/sass/responsivity_tools.scss
rename to src/assets/sass/responsivity_tools.scss
diff --git a/assets/ts/PersistentWebSocket.ts b/src/assets/ts/PersistentWebSocket.ts
similarity index 100%
rename from assets/ts/PersistentWebSocket.ts
rename to src/assets/ts/PersistentWebSocket.ts
diff --git a/assets/ts/app.ts b/src/assets/ts/app.ts
similarity index 100%
rename from assets/ts/app.ts
rename to src/assets/ts/app.ts
diff --git a/assets/ts/copyable_text.ts b/src/assets/ts/copyable_text.ts
similarity index 100%
rename from assets/ts/copyable_text.ts
rename to src/assets/ts/copyable_text.ts
diff --git a/assets/ts/external_links.ts b/src/assets/ts/external_links.ts
similarity index 100%
rename from assets/ts/external_links.ts
rename to src/assets/ts/external_links.ts
diff --git a/src/assets/ts/font-awesome.ts b/src/assets/ts/font-awesome.ts
new file mode 100644
index 0000000..0409cfe
--- /dev/null
+++ b/src/assets/ts/font-awesome.ts
@@ -0,0 +1,4 @@
+import '@fortawesome/fontawesome-free/scss/fontawesome.scss';
+import '@fortawesome/fontawesome-free/scss/regular.scss';
+import '@fortawesome/fontawesome-free/scss/solid.scss';
+import '@fortawesome/fontawesome-free/scss/brands.scss';
diff --git a/assets/ts/forms.ts b/src/assets/ts/forms.ts
similarity index 100%
rename from assets/ts/forms.ts
rename to src/assets/ts/forms.ts
diff --git a/assets/ts/main_menu.ts b/src/assets/ts/main_menu.ts
similarity index 100%
rename from assets/ts/main_menu.ts
rename to src/assets/ts/main_menu.ts
diff --git a/assets/ts/message_icons.ts b/src/assets/ts/message_icons.ts
similarity index 100%
rename from assets/ts/message_icons.ts
rename to src/assets/ts/message_icons.ts
diff --git a/assets/ts/tooltips-and-dropdowns.ts b/src/assets/ts/tooltips-and-dropdowns.ts
similarity index 100%
rename from assets/ts/tooltips-and-dropdowns.ts
rename to src/assets/ts/tooltips-and-dropdowns.ts
diff --git a/src/assets/ts/tsconfig.eslint.json b/src/assets/ts/tsconfig.eslint.json
new file mode 100644
index 0000000..a12ab8a
--- /dev/null
+++ b/src/assets/ts/tsconfig.eslint.json
@@ -0,0 +1,6 @@
+{
+    "extends": "./tsconfig.json",
+    "include": [
+        "./**/*"
+    ]
+}
diff --git a/src/assets/ts/tsconfig.json b/src/assets/ts/tsconfig.json
new file mode 100644
index 0000000..a9dfc8d
--- /dev/null
+++ b/src/assets/ts/tsconfig.json
@@ -0,0 +1,27 @@
+{
+    "extends": "../../../tsconfig.json",
+    "compilerOptions": {
+        "target": "ESNext",
+        "module": "CommonJS",
+        "baseUrl": "../../../intermediates/assets",
+        "rootDir": "../../../intermediates/assets/ts-source",
+        "sourceRoot": "../../../intermediates/assets/ts-source",
+        "outDir": "../../../intermediates/assets/ts",
+        "declaration": false,
+
+        "typeRoots": [],
+        "resolveJsonModule": false,
+        "lib": [
+            "es2020",
+            "DOM"
+        ]
+    },
+    "include": [
+        "../../../intermediates/assets/ts-source/**/*"
+    ],
+    "references": [
+        {
+            "path": "../../common"
+        }
+    ]
+}
diff --git a/views/about.njk b/src/assets/views/about.njk
similarity index 100%
rename from views/about.njk
rename to src/assets/views/about.njk
diff --git a/views/home.njk b/src/assets/views/home.njk
similarity index 100%
rename from views/home.njk
rename to src/assets/views/home.njk
diff --git a/views/layouts/base.njk b/src/assets/views/layouts/base.njk
similarity index 100%
rename from views/layouts/base.njk
rename to src/assets/views/layouts/base.njk
diff --git a/src/assets/views/tsconfig.json b/src/assets/views/tsconfig.json
new file mode 100644
index 0000000..bc808e8
--- /dev/null
+++ b/src/assets/views/tsconfig.json
@@ -0,0 +1,15 @@
+{
+    "extends": "@tsconfig/svelte/tsconfig.json",
+    "compilerOptions": {
+        "outDir": "public/js",
+        "rootDir": "../../../intermediates/assets",
+    },
+    "include": [
+        "src/assets/ts/**/*"
+    ],
+    "references": [
+        {
+            "path": "../../common"
+        }
+    ]
+}
diff --git a/src/common/dummy.ts b/src/common/dummy.ts
new file mode 100644
index 0000000..c58f5a5
--- /dev/null
+++ b/src/common/dummy.ts
@@ -0,0 +1 @@
+console.log('common code between back and front');
\ No newline at end of file
diff --git a/src/common/package.json b/src/common/package.json
new file mode 100644
index 0000000..1cd945a
--- /dev/null
+++ b/src/common/package.json
@@ -0,0 +1,3 @@
+{
+    "type": "commonjs"
+}
diff --git a/src/common/tsconfig.json b/src/common/tsconfig.json
new file mode 100644
index 0000000..60705a9
--- /dev/null
+++ b/src/common/tsconfig.json
@@ -0,0 +1,20 @@
+{
+    "extends": "../../tsconfig.json",
+    "compilerOptions": {
+        "composite": true,
+
+        "module": "CommonJS",
+
+        "baseUrl": "../../dist/common-local",
+        "rootDir": "./",
+        "sourceRoot": "./",
+        "outDir": "../../dist/common-local",
+
+        "typeRoots": [
+            "src/types"
+        ],
+    },
+    "include": [
+        "./**/*"
+    ]
+}
diff --git a/src/controllers/HomeController.ts b/src/controllers/HomeController.ts
index b5e1740..027d83d 100644
--- a/src/controllers/HomeController.ts
+++ b/src/controllers/HomeController.ts
@@ -1,5 +1,6 @@
 import Controller from "swaf/Controller";
 import {Request, Response} from "express";
+import {route} from "swaf/common/Routing";
 
 export default class HomeController extends Controller {
     public routes(): void {
@@ -20,6 +21,6 @@ export default class HomeController extends Controller {
      * This is to test and assert that swaf extended types are available
      */
     protected async goBack(req: Request, res: Response): Promise<void> {
-        res.redirect(req.getPreviousUrl() || Controller.route('home'));
+        res.redirect(req.getPreviousUrl() || route('home'));
     }
 }
diff --git a/src/main.ts b/src/main.ts
index babc7df..ff2f443 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -9,11 +9,18 @@ process.env['NODE_CONFIG_DIR'] =
 import {logger} from "swaf/Logger";
 import App from "./App";
 import config from "config";
+import {promises as fs} from "fs";
 
 (async () => {
     logger.debug('Config path:', process.env['NODE_CONFIG_DIR']);
 
-    const app = new App(config.get<string>('listen_addr'), config.get<number>('port'));
+    const packageJson = JSON.parse((await fs.readFile('package.json')).toString());
+
+    const app = new App(
+        packageJson.version,
+        config.get<string>('app.listen_addr'),
+        config.get<number>('app.port'),
+    );
     await app.start();
 })().catch(err => {
     logger.error(err);
diff --git a/src/tsconfig.json b/src/tsconfig.json
new file mode 100644
index 0000000..890991d
--- /dev/null
+++ b/src/tsconfig.json
@@ -0,0 +1,30 @@
+{
+    "extends": "../tsconfig.json",
+    "compilerOptions": {
+        "composite": true,
+
+        "module": "CommonJS",
+
+        "baseUrl": "../dist",
+        "rootDir": "./",
+        "sourceRoot": "./",
+        "outDir": "../dist",
+
+        "typeRoots": [
+            "src/types"
+        ]
+    },
+    "include": [
+        "./**/*",
+        "../node_modules/swaf/types"
+    ],
+    "exclude": [
+        "./assets/**/*",
+        "./common/**/*"
+    ],
+    "references": [
+        {
+            "path": "./common"
+        }
+    ]
+}
diff --git a/public/.gitkeep b/src/types/.gitkeep
similarity index 100%
rename from public/.gitkeep
rename to src/types/.gitkeep
diff --git a/tsconfig.frontend.json b/tsconfig.frontend.json
deleted file mode 100644
index ad74720..0000000
--- a/tsconfig.frontend.json
+++ /dev/null
@@ -1,19 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "public/js",
-    "rootDir": "./assets",
-    "target": "ES6",
-    "strict": true,
-    "lib": [
-      "es2020",
-      "DOM"
-    ],
-    "typeRoots": [
-      "./node_modules/@types"
-    ]
-  },
-  "include": [
-    "assets/ts/**/*"
-  ]
-}
diff --git a/tsconfig.json b/tsconfig.json
index 12eec0a..6a82f14 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,22 +1,43 @@
 {
   "compilerOptions": {
-    "module": "CommonJS",
-    "esModuleInterop": true,
-    "outDir": "dist",
-    "rootDir": "./src",
-    "target": "ES6",
+    "target": "ESNext",
+    "module": "ESNext",
+    "declaration": true,
+    "stripInternal": true,
+
     "strict": true,
+    "allowSyntheticDefaultImports": true,
+    "strictNullChecks": true,
+
+    "moduleResolution": "Node",
+    "esModuleInterop": true,
+    "baseUrl": "dist",
+    "inlineSourceMap": true,
+    "inlineSources": true,
+    "outDir": "dist",
+
+    "typeRoots": [
+      "node_modules/@types",
+      "src/types"
+    ],
     "lib": [
       "es2020",
-      "DOM"
+      "dom"
     ],
-    "typeRoots": [
-      "./node_modules/@types"
-    ],
-    "resolveJsonModule": true
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "allowJs": true
   },
-  "include": [
-    "src/**/*",
-    "node_modules/swaf/types"
+  "include": [],
+  "references": [
+    {
+      "path": "src",
+    },
+    {
+      "path": "src/assets/ts",
+    },
+    {
+      "path": "src/assets/views",
+    }
   ]
 }
diff --git a/tsconfig.test.json b/tsconfig.test.json
index 897a6b4..fce2399 100644
--- a/tsconfig.test.json
+++ b/tsconfig.test.json
@@ -11,4 +11,4 @@
     "src/types/**/*",
     "test/**/*"
   ]
-}
\ No newline at end of file
+}
diff --git a/webpack.config.js b/webpack.config.js
deleted file mode 100644
index b624595..0000000
--- a/webpack.config.js
+++ /dev/null
@@ -1,121 +0,0 @@
-const path = require('path');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
-const {extendDefaultPlugins} = require("svgo");
-const TerserPlugin = require('terser-webpack-plugin');
-
-const dev = process.env.NODE_ENV === 'development';
-
-const userConfig = require('./assets/config.json');
-for (const b in userConfig.bundles) {
-    if (userConfig.bundles.hasOwnProperty(b)) {
-        userConfig.bundles[b] = `./assets/${userConfig.bundles[b]}`;
-    }
-}
-
-const config = {
-    entry: userConfig.bundles,
-    output: {
-        path: path.resolve(__dirname, 'public/js'),
-        filename: '[name].js'
-    },
-    devtool: dev ? 'eval-source-map' : undefined,
-    module: {
-        rules: [
-            {
-                test: /\.js$/i,
-                use: [
-                    {
-                        loader: 'babel-loader',
-                        options: {
-                            presets: ['@babel/preset-env'],
-                        }
-                    }
-                ]
-            },
-            {
-                test: /\.s[ac]ss$/i,
-                use: [
-                    {
-                        loader: MiniCssExtractPlugin.loader,
-                        options: {
-                            publicPath: '/',
-                        }
-                    },
-                    'css-loader',
-                    'sass-loader',
-                ]
-            },
-            {
-                test: /\.(woff2?|eot|ttf|otf)$/i,
-                use: 'file-loader?name=../fonts/[name].[ext]',
-            },
-            {
-                test: /\.tsx?$/i,
-                use: {
-                    loader: 'ts-loader',
-                    options: {
-                        configFile: 'tsconfig.frontend.json',
-                    }
-                },
-                exclude: '/node_modules/'
-            },
-            {
-                test: /\.(png|jpe?g|gif|svg)$/i,
-                use: [
-                    'file-loader?name=../img/[name].[ext]',
-                ],
-                type: 'asset',
-            }
-        ],
-    },
-    resolve: {
-        extensions: ['.tsx', '.ts', '.js'],
-    },
-    plugins: [
-        new MiniCssExtractPlugin({
-            filename: '../css/[name].css',
-        }),
-        new ImageMinimizerPlugin({
-            minimizerOptions: {
-                // Lossless optimization with custom option
-                // Feel free to experiment with options for better result for you
-                plugins: [
-                    ["gifsicle", {}],
-                    ["mozjpeg", {}],
-                    ["pngquant", {}],
-                    ["webp", {quality: 90}],
-                    // Svgo configuration here https://github.com/svg/svgo#configuration
-                    [
-                        "svgo",
-                        {
-                            plugins: extendDefaultPlugins([
-                                {
-                                    name: "removeViewBox",
-                                    active: false,
-                                },
-                                {
-                                    name: "addAttributesToSVGElement",
-                                    params: {
-                                        attributes: [{xmlns: "http://www.w3.org/2000/svg"}],
-                                    },
-                                },
-                            ]),
-                        },
-                    ],
-                ],
-            },
-        }),
-    ]
-};
-
-if (!dev) {
-    config.optimization = {
-        minimize: true,
-        minimizer: [
-            new TerserPlugin(),
-        ]
-    };
-}
-
-module.exports = config;