diff --git a/.eslintrc.js b/.eslintrc.js
index af1c097..3853d47 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,15 +1,13 @@
 module.exports = {
   root: true,
   env: {
-    node: true
+    node: true,
+    es2022: true, 
   },
   extends: [
     'plugin:vue/essential',
     '@vue/standard'
   ],
-  parserOptions: {
-    parser: '@babel/eslint-parser'
-  },
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
diff --git a/public/index.html b/index.html
similarity index 83%
rename from public/index.html
rename to index.html
index 0abe30a..e47af9d 100644
--- a/public/index.html
+++ b/index.html
@@ -4,9 +4,9 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.png">
-    <link rel="manifest" href="<%= BASE_URL %>manifest.webmanifest">
-    <title><%= htmlWebpackPlugin.options.title %></title>
+    <link rel="icon" href="favicon.png">
+    <link rel="manifest" href="manifest.webmanifest">
+    <title>sqliteviz</title>
     <style>
       #sqliteviz-loading-wrapper {
         position: fixed;
@@ -74,7 +74,7 @@
   </head>
   <body>
     <noscript>
-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+      <strong>We're sorry but this app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
     <div id="app">
       <div id="sqliteviz-loading-wrapper">
@@ -95,8 +95,6 @@
         </svg>
       </div>
     </div>
-    <!-- extention slot start -->
-    <!-- extention slot end -->
-    <!-- built files will be auto injected -->
+    <script type="module" src="/src/main.js"></script>
   </body>
 </html>
diff --git a/src/App.vue b/src/App.vue
index ea0a7f9..144b2e7 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -33,42 +33,42 @@ export default {
 <style>
 @font-face {
   font-family: "Open Sans";
-  src: url("~@/assets/fonts/OpenSans-Regular.woff2");
+  src: url("@/assets/fonts/OpenSans-Regular.woff2");
   font-weight: 400;
   font-style: normal;
 }
 
 @font-face {
   font-family: "Open Sans";
-  src: url("~@/assets/fonts/OpenSans-SemiBold.woff2");
+  src: url("@/assets/fonts/OpenSans-SemiBold.woff2");
   font-weight: 600;
   font-style: normal;
 }
 
 @font-face {
   font-family: "Open Sans";
-  src: url("~@/assets/fonts/OpenSans-Bold.woff2");
+  src: url("@/assets/fonts/OpenSans-Bold.woff2");
   font-weight: 700;
   font-style: normal;
 }
 
 @font-face {
   font-family: "Open Sans";
-  src: url("~@/assets/fonts/OpenSans-Italic.woff2");
+  src: url("@/assets/fonts/OpenSans-Italic.woff2");
   font-weight: 400;
   font-style: italic;
 }
 
 @font-face {
   font-family: "Open Sans";
-  src: url("~@/assets/fonts/OpenSans-SemiBoldItalic.woff2");
+  src: url("@/assets/fonts/OpenSans-SemiBoldItalic.woff2");
   font-weight: 600;
   font-style: italic;
 }
 
 @font-face {
   font-family: "Open Sans";
-  src: url("~@/assets/fonts/OpenSans-BoldItalic.woff2");
+  src: url("@/assets/fonts/OpenSans-BoldItalic.woff2");
   font-weight: 700;
   font-style: italic;
 }
diff --git a/src/assets/styles/dialogs.css b/src/assets/styles/dialogs.css
index 2665bf6..22a396c 100644
--- a/src/assets/styles/dialogs.css
+++ b/src/assets/styles/dialogs.css
@@ -23,7 +23,7 @@
 }
 
 .dialog-body {
-  min-height: 60px;
+  min-height: 56px;
   background-color: var(--color-bg-light);
   padding: 24px;
   border-top: 1px solid var(--color-border-light);
diff --git a/src/assets/styles/multiselect.css b/src/assets/styles/multiselect.css
index 1ce9ef2..db7861a 100644
--- a/src/assets/styles/multiselect.css
+++ b/src/assets/styles/multiselect.css
@@ -62,14 +62,14 @@
   margin: 2px;
 }
 .sqliteviz-select .multiselect__tag-icon:after {
-  content: url('~@/assets/images/delete-tag.svg');
+  content: url('@/assets/images/delete-tag.svg');
   height: 14px;
   width: 14px;
 }
 
 .sqliteviz-select .multiselect__tag-icon:focus:after,
 .sqliteviz-select .multiselect__tag-icon:hover:after {
-  content: url('~@/assets/images/delete-tag-hover.svg');
+  content: url('@/assets/images/delete-tag-hover.svg');
 }
 
 .sqliteviz-select .multiselect__tag-icon:focus,
@@ -102,7 +102,7 @@
 }
 
 .sqliteviz-select .multiselect__select:before {
-  content: url('~@/assets/images/arrow.svg');
+  content: url('@/assets/images/arrow.svg');
   border: none;
   top: 0;
 }
@@ -116,7 +116,7 @@
 }
 
 .sqliteviz-select .multiselect__select:hover:before {
-  content: url('~@/assets/images/arrow-hover.svg');
+  content: url('@/assets/images/arrow-hover.svg');
 }
 
 .sqliteviz-select.multiselect--active .multiselect__tags {
diff --git a/src/components/CheckBox.vue b/src/components/CheckBox.vue
index 62102ef..e58cde9 100644
--- a/src/components/CheckBox.vue
+++ b/src/components/CheckBox.vue
@@ -7,12 +7,12 @@
     <img
       v-show="checked && !disabled"
       :src="theme === 'light'
-        ? require('@/assets/images/checkbox_checked_light.svg')
-        : require('@/assets/images/checkbox_checked.svg')"
+        ? '~@/assets/images/checkbox_checked_light.svg'
+        : '~@/assets/images/checkbox_checked.svg'"
     />
     <img
       v-show="checked && disabled"
-      :src="require('@/assets/images/checkbox_checked_disabled.svg')"
+      src="~@/assets/images/checkbox_checked_disabled.svg"
     />
     <span v-if="label" class="label">{{ label }}</span>
   </div>
diff --git a/src/components/DbUploader.vue b/src/components/DbUploader.vue
index 21707aa..5e3b27d 100644
--- a/src/components/DbUploader.vue
+++ b/src/components/DbUploader.vue
@@ -16,11 +16,11 @@
       </div>
     </div>
     <div v-if="type === 'illustrated'" id="img-container">
-      <img id="drop-file-top-img" :src="require('@/assets/images/top.svg')" />
+      <img id="drop-file-top-img" src="~@/assets/images/top.svg" />
       <img
         id="left-arm-img"
         :class="{'swing': state === 'dragover'}"
-        :src="require('@/assets/images/leftArm.svg')"
+        src="~@/assets/images/leftArm.svg"
       />
       <img
         id="file-img"
@@ -30,14 +30,14 @@
           'fly': state === 'dropping',
           'hidden': state === 'dropped'
         }"
-        :src="require('@/assets/images/file.png')"
+        src="~@/assets/images/file.png"
       />
-      <img id="drop-file-bottom-img" :src="require('@/assets/images/bottom.svg')" />
-      <img id="body-img" :src="require('@/assets/images/body.svg')" />
+      <img id="drop-file-bottom-img" src="~@/assets/images/bottom.svg" />
+      <img id="body-img" src="~@/assets/images/body.svg" />
       <img
         id="right-arm-img"
         :class="{'swing': state === 'dragover'}"
-        :src="require('@/assets/images/rightArm.svg')"
+        src="~@/assets/images/rightArm.svg"
       />
     </div>
     <div id="error" class="error"></div>
diff --git a/src/components/LoadingDialog.vue b/src/components/LoadingDialog.vue
index e516fae..00d5c83 100644
--- a/src/components/LoadingDialog.vue
+++ b/src/components/LoadingDialog.vue
@@ -14,7 +14,7 @@
         {{ loadingMsg }}
       </div>
       <div v-else class="loading-dialog-body">
-        <img :src="require('@/assets/images/success.svg')" class="success-icon state-icon" />
+        <img src="~@/assets/images/success.svg" class="success-icon state-icon" />
         {{ successMsg }}
       </div>
     </div>
diff --git a/src/components/Logs.vue b/src/components/Logs.vue
index d607ca1..83ae5a7 100644
--- a/src/components/Logs.vue
+++ b/src/components/Logs.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="logs-container" ref="logsContainer">
     <div v-for="(msg, index) in messages" :key="index" class="msg">
-      <img v-if="msg.type === 'error'" :src="require('@/assets/images/error.svg')">
-      <img v-if="msg.type === 'info'" :src="require('@/assets/images/info.svg')" width="20px">
-      <img v-if="msg.type === 'success'" :src="require('@/assets/images/success.svg')">
+      <img v-if="msg.type === 'error'" src="~@/assets/images/error.svg">
+      <img v-if="msg.type === 'info'" src="~@/assets/images/info.svg" width="20px">
+      <img v-if="msg.type === 'success'" src="~@/assets/images/success.svg">
       <loading-indicator v-if="msg.type === 'loading'" :progress="msg.progress" />
       <span class="msg-text">{{ serializeMessage(msg) }}</span>
     </div>
diff --git a/src/components/Splitpanes/index.vue b/src/components/Splitpanes/index.vue
index c3686ab..0fb5983 100644
--- a/src/components/Splitpanes/index.vue
+++ b/src/components/Splitpanes/index.vue
@@ -39,7 +39,7 @@
         >
           <img
             class="direction-icon"
-            :src="require('@/assets/images/chevron.svg')"
+            src="~@/assets/images/chevron.svg"
             :style="directionBeforeIconStyle"
           >
         </div>
@@ -50,7 +50,7 @@
         >
           <img
             class="direction-icon"
-            :src="require('@/assets/images/chevron.svg')"
+            src="~@/assets/images/chevron.svg"
             :style="directionAfterIconStyle"
           >
         </div>
diff --git a/src/lib/database/_sql.js b/src/lib/database/_sql.js
index ee7aaec..d3a881d 100644
--- a/src/lib/database/_sql.js
+++ b/src/lib/database/_sql.js
@@ -1,8 +1,11 @@
 import initSqlJs from 'sql.js/dist/sql-wasm.js'
 import dbUtils from './_statements'
+import wasmUrl from 'sql.js/dist/sql-wasm.wasm?url'
 
 let SQL = null
-const sqlModuleReady = initSqlJs().then(sqlModule => { SQL = sqlModule })
+const sqlModuleReady = initSqlJs({
+  locateFile: () => wasmUrl
+ }).then(sqlModule => { SQL = sqlModule })
 
 function _getDataSourcesFromSqlResult (sqlResult) {
   if (!sqlResult) {
diff --git a/src/lib/database/index.js b/src/lib/database/index.js
index 4232ed1..fd9ffd1 100644
--- a/src/lib/database/index.js
+++ b/src/lib/database/index.js
@@ -1,7 +1,4 @@
 import fu from '@/lib/utils/fileIo'
-// We can import workers like so because of worker-loader:
-// https://webpack.js.org/loaders/worker-loader/
-import Worker from './_worker.js'
 
 // Use promise-worker in order to turn worker into the promise based one:
 // https://github.com/nolanlawson/promise-worker
@@ -10,7 +7,10 @@ import PromiseWorker from 'promise-worker'
 import events from '@/lib/utils/events'
 
 function getNewDatabase () {
-  const worker = new Worker()
+  const worker = new Worker(
+    new URL('./_worker.js', import.meta.url), 
+    { type: 'module' }
+  )
   return new Database(worker)
 }
 
diff --git a/src/views/Main/AppDiagnosticInfo.vue b/src/views/Main/AppDiagnosticInfo.vue
index a3ee1a7..2cebf83 100644
--- a/src/views/Main/AppDiagnosticInfo.vue
+++ b/src/views/Main/AppDiagnosticInfo.vue
@@ -2,7 +2,7 @@
   <div id="app-info-container">
     <img
       id="app-info-icon"
-      :src="require('@/assets/images/info.svg')"
+      src="~@/assets/images/info.svg"
       @click="$modal.show('app-info')"
     />
     <modal
@@ -31,6 +31,7 @@
 
 <script>
 import CloseIcon from '@/components/svg/close'
+import { version } from '../../../package.json'
 
 export default {
   name: 'AppDiagnosticInfo',
@@ -40,7 +41,7 @@ export default {
       info: [
         {
           name: 'sqliteviz version',
-          info: [require('../../../package.json').version]
+          info: [version]
         }
       ]
     }
diff --git a/src/views/Main/Inquiries/index.vue b/src/views/Main/Inquiries/index.vue
index 8f2de7b..f43d1cc 100644
--- a/src/views/Main/Inquiries/index.vue
+++ b/src/views/Main/Inquiries/index.vue
@@ -119,7 +119,7 @@
   </div>
 
   <!--Rename Inquiry dialog  -->
-  <modal modal-id="rename" class="dialog">
+  <modal modal-id="rename" class="dialog" content-style="width: 560px;">
     <div class="dialog-header">
       Rename inquiry
       <close-icon @click="$modal.hide('rename')"/>
@@ -139,7 +139,7 @@
   </modal>
 
   <!--Delete Inquiry dialog  -->
-  <modal modal-id="delete" class="dialog">
+  <modal modal-id="delete" class="dialog" content-style="width: 480px;">
     <div class="dialog-header">
       Delete {{ deleteGroup ? 'inquiries' : 'inquiry' }}
       <close-icon @click="$modal.hide('delete')"/>
@@ -147,7 +147,7 @@
     <div class="dialog-body">
       {{ deleteDialogMsg }}
       <div v-show="selectedInquiriesCount > selectedNotPredefinedCount" id="note">
-        <img :src="require('@/assets/images/info.svg')">
+        <img src="~@/assets/images/info.svg">
         Note: Predefined inquiries you've selected won't be deleted
       </div>
     </div>
diff --git a/src/views/Main/MainMenu.vue b/src/views/Main/MainMenu.vue
index 310cfe7..3d0d03c 100644
--- a/src/views/Main/MainMenu.vue
+++ b/src/views/Main/MainMenu.vue
@@ -2,7 +2,7 @@
   <nav>
     <div id="nav-links">
       <a href="https://sqliteviz.com">
-        <img :src="require('@/assets/images/logo_simple.svg')">
+        <img src="~@/assets/images/logo_simple.svg">
       </a>
       <router-link to="/workspace">Workspace</router-link>
       <router-link to="/inquiries">Inquiries</router-link>
@@ -29,14 +29,14 @@
     </div>
 
     <!--Save Inquiry dialog  -->
-    <modal modal-id="save" class="dialog">
+    <modal modal-id="save" class="dialog" content-style="width: 560px;">
       <div class="dialog-header">
         Save inquiry
         <close-icon @click="cancelSave"/>
       </div>
       <div class="dialog-body">
         <div v-show="isPredefined" id="save-note">
-          <img :src="require('@/assets/images/info.svg')">
+          <img src="~@/assets/images/info.svg">
           Note: Predefined inquiries can't be edited.
           That's why your modifications will be saved as a new inquiry. Enter the name for it.
         </div>
diff --git a/src/views/Main/Workspace/Tabs/index.vue b/src/views/Main/Workspace/Tabs/index.vue
index e904037..47e06b0 100644
--- a/src/views/Main/Workspace/Tabs/index.vue
+++ b/src/views/Main/Workspace/Tabs/index.vue
@@ -29,7 +29,7 @@
     </div>
 
     <!--Close tab warning dialog  -->
-    <modal modal-id="close-warn" class="dialog">
+    <modal modal-id="close-warn" class="dialog" content-style="width: 560px;">
       <div class="dialog-header">
         Close tab {{
           closingTab !== null
@@ -49,7 +49,7 @@
         <button class="secondary" @click="closeTab(closingTab)">
           Close without saving
         </button>
-        <button class="secondary" @click="$modal.hide('close-warn')">Cancel</button>
+        <button class="secondary" @click="$modal.hide('close-warn')">Don't close</button>
         <button class="primary" @click="saveAndClose(closingTab)">Save and close</button>
       </div>
     </modal>
diff --git a/vite.config.js b/vite.config.js
new file mode 100644
index 0000000..4eadd63
--- /dev/null
+++ b/vite.config.js
@@ -0,0 +1,40 @@
+import { fileURLToPath, URL } from 'node:url'
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import { nodePolyfills } from 'vite-plugin-node-polyfills'
+import { viteStaticCopy } from 'vite-plugin-static-copy'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  base: '',
+  plugins: [
+    vue(),
+    nodePolyfills({
+        include: ['process', 'util', 'stream', 'buffer'],
+        globals: { global: true, process: true },
+      }),
+    viteStaticCopy({
+        targets: [
+          {
+            src: 'LICENSE',
+            dest: './'
+          }
+        ]
+      })
+],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
+    },
+    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
+},
+optimizeDeps: {
+    include:['sql.js/dist/sql-wasm.js'],
+    esbuildOptions: {
+      define: {
+        global: 'globalThis'
+      }
+    }
+  }
+})
+
