diff --git a/assets/js/App.svelte b/assets/js/App.svelte
new file mode 100644
index 0000000..221cde6
--- /dev/null
+++ b/assets/js/App.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let name;
+</script>
+
+<h1>Myapp {name}!</h1>
diff --git a/assets/js/app.js b/assets/js/app.js
index 3f8fc87..42a86c8 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -14,3 +14,5 @@ import "phoenix_html"
 //
 // Local files can be imported directly using relative paths, for example:
 // import socket from "./socket"
+//
+import './svelte.js';
diff --git a/assets/js/svelte.js b/assets/js/svelte.js
new file mode 100644
index 0000000..ddfc215
--- /dev/null
+++ b/assets/js/svelte.js
@@ -0,0 +1,9 @@
+import App from './App.svelte'
+
+const app = new App({
+	target: document.querySelector('.container'),
+	props: {
+		name: 'myapp'
+	}
+})
+export default app
diff --git a/assets/package.json b/assets/package.json
index e18310b..450fdb1 100644
--- a/assets/package.json
+++ b/assets/package.json
@@ -14,6 +14,7 @@
     "@babel/core": "^7.0.0",
     "@babel/preset-env": "^7.0.0",
     "@dkuku/tailwind-color-palette": "^1.0.1",
+    "autoprefixer": "^9.6.1",
     "babel-loader": "^8.0.0",
     "copy-webpack-plugin": "^4.5.0",
     "css-loader": "^3.2.0",
@@ -23,8 +24,10 @@
     "optimize-css-assets-webpack-plugin": "^5.0.3",
     "postcss-loader": "^3.0.0",
     "sass-loader": "^7.3.1",
+    "svelte": "^3.12.1",
+    "svelte-loader": "^2.13.6",
     "tailwindcss": "^1.1.2",
-    "uglifyjs-webpack-plugin": "^1.2.4",
+    "terser-webpack-plugin": "^2.1.1",
     "webpack": "4.4.0",
     "webpack-cli": "^3.3.9"
   }
diff --git a/assets/webpack.config.js b/assets/webpack.config.js
index 4464f61..e63da4c 100644
--- a/assets/webpack.config.js
+++ b/assets/webpack.config.js
@@ -1,19 +1,27 @@
 const path = require('path');
 const glob = require('glob');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
+const TerserPlugin = require('terser-webpack-plugin');
 const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 module.exports = (env, options) => ({
   optimization: {
     minimizer: [
-      new UglifyJsPlugin({ cache: true, parallel: true, sourceMap: false }),
+      new TerserPlugin(),
       new OptimizeCSSAssetsPlugin({})
     ]
   },
   entry: {
     './js/app.js': ['./js/app.js']
   },
+  resolve: {
+    alias: {
+      svelte: path.resolve('node_modules', 'svelte')
+    },
+    extensions: ['.mjs', '.js', '.svelte'],
+    mainFields: ['svelte', 'browser', 'module', 'main'],
+    modules: ['node_modules']
+  },
   output: {
     filename: 'app.js',
     path: path.resolve(__dirname, '../priv/static/js')
@@ -43,6 +51,21 @@ module.exports = (env, options) => ({
         exclude: /node_modules/,
         use: {
           loader: 'babel-loader'
+        },
+      },
+      {
+        test: /\.mjs$/,
+        include: /node_modules/,
+        type: "javascript/auto",
+      },
+      {
+        test: /\.(html|svelte)$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'svelte-loader',
+          options: {
+            hotReload: true
+          }
         }
       }
     ]