diff --git a/.gitignore b/.gitignore
index a306bb164..d75774f37 100644
--- a/.gitignore
+++ b/.gitignore
@@ -22,4 +22,5 @@ libpathod
 
 node_modules
 bower_components
+*.compiled.js
 *.map
\ No newline at end of file
diff --git a/web/.jshintrc b/web/.jshintrc
new file mode 100644
index 000000000..acdf04d33
--- /dev/null
+++ b/web/.jshintrc
@@ -0,0 +1,4 @@
+{
+    "loopfunc": true,
+    "esnext": true
+}
\ No newline at end of file
diff --git a/web/Gruntfile.js b/web/Gruntfile.js
index b737e1ff3..5fe5a4026 100644
--- a/web/Gruntfile.js
+++ b/web/Gruntfile.js
@@ -1,16 +1,20 @@
 var cssfiles = {
-    "../libmproxy/web/static/mitmproxy.css": "src/css/mitmproxy.less",
+    "../libmproxy/web/static/css/app.css": "src/css/app.less",
+    "../libmproxy/web/static/css/vendor.css": "src/css/vendor.less",
 };
 var jsfiles = {
-    "../libmproxy/web/static/mitmproxy.js": [
+    "../libmproxy/web/static/js/vendor.js": [
         'src/vendor/jquery/jquery.js',
-        'src/vendor/lodash/dist/lodash.js',
+        'src/vendor/lodash/lodash.js',
         'src/vendor/react/react-with-addons.js',
-        'src/vendor/react-router/dist/react-router.js',
-        'src/vendor/bootstrap-customized.js',
-        'src/js/router_jsx.js',
-        'src/js/certinstall_jsx.js',
-        'src/js/mitmproxy.js',
+        'src/vendor/react-router/react-router.js',
+        'src/vendor/react-bootstrap/react-bootstrap.js',
+    ],
+    "../libmproxy/web/static/js/app.js": [
+        'src/js/datastructures.compiled.js',
+        'src/js/footer.compiled.js',
+        'src/js/header.compiled.js',
+        'src/js/mitmproxy.compiled.js',
     ],
 };
 
@@ -24,7 +28,7 @@ module.exports = function (grunt) {
                     {
                         expand: true,
                         flatten: true,
-                        src: ['src/vendor/fontawesome/fonts/*'],
+                        src: ['src/vendor/fontawesome/fontawesome-webfont.*'],
                         dest: '../libmproxy/web/static/fonts'
                     }
                 ],
@@ -52,10 +56,13 @@ module.exports = function (grunt) {
                 files: [{
                     expand: true,
                     cwd: 'src/js',
-                    src: ['*.jsx'],
+                    src: ['*.react.js','*.es6.js'],
                     dest: 'src/js',
-                    ext: '_jsx.js'
+                    ext: '.compiled.js'
                 }]
+            },
+            options: {
+                harmony: true
             }
         },
         uglify: {
@@ -63,6 +70,7 @@ module.exports = function (grunt) {
                 options: {
                     mangle: false,
                     compress: false,
+                    beautify: true,
                     sourceMap: true,
                     sourceMapIncludeSources: true,
                 },
@@ -78,9 +86,9 @@ module.exports = function (grunt) {
         },
         jshint: {
             options: {
-              loopfunc: true,
+                jshintrc: ".jshintrc",
             },
-            all: ['src/js/*.js'],
+            all: ['src/js/*.js','!src/js/*.react.js'],
             gruntfile: ['Gruntfile.js']
         },
         qunit: {
@@ -88,14 +96,14 @@ module.exports = function (grunt) {
         },
         watch: {
             less: {
-                files: ['src/css/*.less', 'src/css/*.css'],
+                files: ['src/css/**'],
                 tasks: ['less:dev'],
                 options: {
                     livereload: true,
                 }
             },
             jsx: {
-                files: ['src/js/*.jsx'],
+                files: ['src/js/*.react.js','src/js/*.es6.js'],
                 tasks: ['react:all'],
             },
             js: {
diff --git a/web/gulpfile.js b/web/gulpfile.js
index afc4834a7..55a99b154 100644
--- a/web/gulpfile.js
+++ b/web/gulpfile.js
@@ -23,7 +23,7 @@ var path = {
             'vendor/react-bootstrap/react-bootstrap.js'
         ],
         app: [
-            'js/datastructures.js',
+            'js/datastructures.es6.js',
             'js/footer.react.js',
             'js/header.react.js',
             'js/mitmproxy.react.js',
diff --git a/web/src/css/footer.less b/web/src/css/footer.less
index 1aa758275..52512b60c 100644
--- a/web/src/css/footer.less
+++ b/web/src/css/footer.less
@@ -1,3 +1,4 @@
 footer {
   padding: 0 10px;
+  text-align: center;
 }
\ No newline at end of file
diff --git a/web/src/js/datastructures.js b/web/src/js/datastructures.es6.js
similarity index 97%
rename from web/src/js/datastructures.js
rename to web/src/js/datastructures.es6.js
index 59f64e661..4bc781b22 100644
--- a/web/src/js/datastructures.js
+++ b/web/src/js/datastructures.es6.js
@@ -64,7 +64,7 @@ class DummyFlowStore extends FlowStore {
 }
 
 
-SETTINGS_CHANGED = "settings.change";
+var SETTINGS_CHANGED = "settings.change";
 
 class Settings extends EventEmitter {
     constructor(){
diff --git a/web/src/js/footer.react.js b/web/src/js/footer.react.js
index 96506e851..9b36d8414 100644
--- a/web/src/js/footer.react.js
+++ b/web/src/js/footer.react.js
@@ -2,9 +2,6 @@
 
 var Footer = React.createClass({
     render : function(){
-        var style = {
-            textAlign: "center"
-        };
         return (<footer>
             <span className="label label-success">transparent mode</span>
             </footer>);
diff --git a/web/src/test.html b/web/src/test.html
index 9de604e41..bba1e44fb 100644
--- a/web/src/test.html
+++ b/web/src/test.html
@@ -8,7 +8,7 @@
   <script src="vendor/jquery/jquery.js"></script>
   <script src="vendor/underscore/underscore.js"></script>
   <script src="vendor/lodash/dist/lodash.js"></script>
-  <script src="js/datastructures.js"></script>
+  <script src="js/datastructures.es6.js"></script>
   <script src="js/scurve.js"></script>
   <script src="js/entropy.js"></script>
   <script src="js/orders.js"></script>