diff --git a/gulpfile.js b/gulpfile.js
index 96aae41..9619418 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -1,5 +1,6 @@
 const gulp = require('gulp');
-const minify = require("gulp-babel-minify");
+const babel = require('gulp-babel');
+const minify = require('gulp-babel-minify');
 const minifyCss = require('gulp-minify-css');
 const less = require('gulp-less');
 
@@ -21,8 +22,16 @@ gulp.task('copy-fontawesome', () => {
 
 gulp.task('copy-js', gulp.series('copy-uikit-js', 'copy-fontawesome'));
 
-gulp.task('minify-js', () => {
-	return gulp.src('public/js/*.js')
+gulp.task('babel', () => {
+	return gulp.src(['public/js/*.js'])
+		.pipe(babel({
+			presets: [
+				['@babel/preset-env', {
+					debug: true,
+					targets: '>0.25%, not dead, ios>=9'
+				}]
+			],
+		}))
 		.pipe(minify({
 			removeConsole: true,
 			builtIns: false
@@ -58,7 +67,7 @@ gulp.task('copy-files', () => {
 });
 
 gulp.task('default', gulp.parallel(
-	gulp.series('copy-js', 'minify-js'),
+	gulp.series('copy-js', 'babel'),
 	gulp.series('less', 'minify-css'),
 	gulp.series('copy-uikit-icons', 'img'),
 	'copy-files'
diff --git a/package.json b/package.json
index 39bdcb5..45cf183 100644
--- a/package.json
+++ b/package.json
@@ -1,22 +1,24 @@
 {
-  "name": "mango",
-  "version": "1.0.0",
-  "main": "index.js",
-  "repository": "https://github.com/hkalexling/Mango.git",
-  "author": "Alex Ling <hkalexling@gmail.com>",
-  "license": "MIT",
-  "devDependencies": {
-    "gulp": "^4.0.2",
-    "gulp-babel-minify": "^0.5.1",
-    "gulp-less": "^4.0.1",
-    "gulp-minify-css": "^1.2.4",
-    "less": "^3.11.3"
-  },
-  "scripts": {
-    "uglify": "gulp"
-  },
-  "dependencies": {
-    "@fortawesome/fontawesome-free": "^5.14.0",
-    "uikit": "^3.5.4"
-  }
+	"name": "mango",
+	"version": "1.0.0",
+	"main": "index.js",
+	"repository": "https://github.com/hkalexling/Mango.git",
+	"author": "Alex Ling <hkalexling@gmail.com>",
+	"license": "MIT",
+	"devDependencies": {
+		"@babel/preset-env": "^7.11.5",
+		"gulp": "^4.0.2",
+		"gulp-babel": "^8.0.0",
+		"gulp-babel-minify": "^0.5.1",
+		"gulp-less": "^4.0.1",
+		"gulp-minify-css": "^1.2.4",
+		"less": "^3.11.3"
+	},
+	"scripts": {
+		"uglify": "gulp"
+	},
+	"dependencies": {
+		"@fortawesome/fontawesome-free": "^5.14.0",
+		"uikit": "^3.5.4"
+	}
 }
diff --git a/src/views/components/head.html.ecr b/src/views/components/head.html.ecr
index 1107a2e..d2421d0 100644
--- a/src/views/components/head.html.ecr
+++ b/src/views/components/head.html.ecr
@@ -7,9 +7,12 @@
   <link rel="stylesheet" href="<%= base_url %>css/uikit.css" />
   <link rel="stylesheet" href="<%= base_url %>css/mango.css" />
   <link rel="icon" href="<%= base_url %>favicon.ico">
+
+  <script src="https://polyfill.io/v3/polyfill.min.js?features=matchMedia%2Cdefault&flags=gated"></script>
   <script defer src="<%= base_url %>js/fontawesome.min.js"></script>
   <script defer src="<%= base_url %>js/solid.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
-  <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.5.0/dist/alpine.min.js" defer></script>
+  <script type="module" src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.5.0/dist/alpine.min.js"></script>
+  <script nomodule src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.5.0/dist/alpine-ie11.min.js" defer></script>
   <script src="<%= base_url %>js/theme.js"></script>
 </head>