diff --git a/gulpfile.js b/gulpfile.js
new file mode 100644
index 0000000..32be33c
--- /dev/null
+++ b/gulpfile.js
@@ -0,0 +1,98 @@
+var htmlreplace      = require('gulp-html-replace');
+var gulp             = require("gulp");
+var gutil            = require("gulp-util");
+var karma            = require("karma");
+var minimist         = require('minimist');
+var path             = require('path');
+var rev              = require('gulp-rev');
+var shell            = require('gulp-shell');
+var sprintf          = require('sprintf');
+var webpack          = require("webpack");
+var webpackConfig    = require("./webpack.config.js");
+var WebpackDevServer = require("webpack-dev-server");
+
+var knownOptions = {
+  string: 'env',
+  string: 'region',
+  string: 'bucket',
+  string: 'cloudfront',
+  string: 'colors',
+  default: { bucket: null, cloudfront: null, colors: true, env: null, region: null }
+};
+var options = minimist(process.argv.slice(2), knownOptions);
+if(options.env && options.env !== 'production' && options.env !== 'development') {
+  throw new Error('Unknown environment config: ' + options.env);
+}
+
+if(options.colors === true || options.colors == 'true' || options.colors == 'yes') {
+  options.colors = true;
+} else {
+  options.colors = false;
+}
+
+gulp.task('build', ['clean', 'build:webpack']);
+gulp.task('clean', shell.task(['rm -rf build']));
+gulp.task('default', ['webpack-dev-server']);
+gulp.task('publish', ['clean', 'build', 'publish:assets', 'publish:assets:index', 'publish:index']);
+
+gulp.task("build:webpack", ['clean'], function(callback) {
+  var config = Object.create(webpackConfig);
+  var SaveAssetsJson = require('assets-webpack-plugin');
+
+  config.output = {
+    filename  : "bundle.js",
+    path      : path.join(__dirname, 'build'),
+    publicPath: "./"
+  };
+
+  config.plugins = (config.plugins || []).concat(
+    new webpack.DefinePlugin({
+      "process.env": {
+        "NODE_ENV": JSON.stringify(options.env)
+      }
+    }),
+    new webpack.optimize.DedupePlugin(),
+    new webpack.optimize.UglifyJsPlugin(),
+    new SaveAssetsJson()
+  );
+
+  webpack(config, function(err, stats) {
+    if(err) throw new gutil.PluginError("webpack:build", err);
+    gutil.log("[webpack:build]", stats.toString({
+      colors: options.colors
+    }));
+    callback();
+  });
+});
+
+gulp.task("webpack-dev-server", function(callback) {
+  var host = process.env.HOST || "localhost";
+  var port = parseInt(process.env.PORT, 10) || 8080;
+  var config = Object.create(webpackConfig);
+  config.devtool = "eval";
+  config.debug = true;
+
+  new WebpackDevServer(webpack(config), {
+    stats: {
+      colors: true
+    }
+  }).listen(port, host, function(err) {
+    if(err) throw new gutil.PluginError("webpack-dev-server", err);
+    gutil.log("[webpack-dev-server]", sprintf("http://%s:%d/webpack-dev-server/index.html", host, port));
+  });
+});
+
+gulp.task("test", function(done) {
+  var server = new karma.Server({
+    configFile: __dirname + "/karma.conf.js",
+    singleRun: true,
+  }, done);
+  server.start();
+});
+
+gulp.task("tdd", function(done) {
+  var server = new karma.Server({
+    configFile: __dirname + "/karma.conf.js",
+  }, done);
+  server.start();
+});
diff --git a/package.json b/package.json
index 980fa64..6b75eaf 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,8 @@
   "description": "For tracking expenses",
   "main": "main.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "babel lib -d build"
   },
   "repository": {
     "type": "git",
@@ -22,10 +23,31 @@
   "homepage": "https://github.com/EliRibble/vanth#readme",
   "dependencies": {
     "react": "^15.0.2",
+    "react-bootstrap": "^0.29.4",
+    "react-dom": "^15.0.2",
     "react-redux": "^4.4.5",
-    "redux": "^3.5.2"
+    "redux": "^3.5.2",
+    "redux-logger": "^2.6.1",
+    "redux-thunk": "^2.1.0",
+    "urllite": "^0.5.0"
   },
   "directories": {
     "test": "tests"
+  },
+  "devDependencies": {
+    "assets-webpack-plugin": "^3.4.0",
+    "babel-cli": "^6.8.0",
+    "babel-loader": "^6.2.4",
+    "babel-preset-es2015": "^6.6.0",
+    "babel-preset-react": "^6.5.0",
+    "gulp": "^3.9.1",
+    "gulp-html-replace": "^1.5.5",
+    "gulp-rev": "^7.0.0",
+    "gulp-shell": "^0.5.2",
+    "karma": "^0.13.22",
+    "rollup": "^0.26.3",
+    "sprintf": "^0.1.5",
+    "webpack": "^1.13.0",
+    "webpack-dev-server": "^1.14.1"
   }
 }
diff --git a/templates/index.html b/templates/index.html
index 956f36f..18aacdc 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,5 +1,6 @@
 <html>
 <body>
+	<div id="container"/>
 {% if current_user and current_user.is_authenticated %}
 	<h1>Hello {{ current_user.name }} from Vanth</h1>
 	<form action="/logout/" method="POST">
@@ -13,5 +14,6 @@
 		<input type="submit">Log in</input>
 	</form>
 {% endif %}
+	<script src="build/bundle.js"></script>
 </body>
 </html>
diff --git a/webpack-assets.json b/webpack-assets.json
new file mode 100644
index 0000000..2077191
--- /dev/null
+++ b/webpack-assets.json
@@ -0,0 +1 @@
+{"main":{"js":"./bundle.js"}}
\ No newline at end of file
diff --git a/webpack.config.js b/webpack.config.js
new file mode 100644
index 0000000..5008455
--- /dev/null
+++ b/webpack.config.js
@@ -0,0 +1,52 @@
+var path    = require('path');
+var webpack = require('webpack');
+
+module.exports = {
+  devtool: 'inline-source-map',
+  entry: './lib/app.js',
+  output: {
+    path: __dirname,
+    filename: 'bundle.js'
+  },
+  module: {
+    loaders: [{
+      test: /^((?!\.config\.).)*\.(js|jsx)$/,
+      loader: 'babel',
+      exclude: /(node_modules|bower_components)/,
+      query: {
+        cacheDirectory: true,
+        presets: ['es2015', 'react'],
+      }
+    },
+      { test: /bootstrap\/js\//,                loader: 'imports?jQuery=jquery' },
+      { test: /\.less$/,                        loader: "style-loader!css-loader!less-loader" },
+      { test: /\.(png|jpg)$/,                   loader: "url-loader?prefix=images/&limit=5000" },
+      { test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,    loader: "url?limit=10000&minetype=application/font-woff" },
+      { test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,   loader: "url?limit=10000&minetype=application/font-woff" },
+      { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,     loader: "url?limit=10000&minetype=application/octet-stream" },
+      { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,     loader: "file" },
+      { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,     loader: "url?limit=10000&minetype=image/svg+xml" },
+      { test: /\.otf$/,                         loader: "file-loader?prefix=font/" },
+    ]
+  },
+  externals: {
+  },
+  resolve: {
+    alias: {
+      styles: __dirname + '/styles',
+      images: __dirname + '/images',
+      vanth : __dirname + '/lib',
+      widget: __dirname + '/lib/widget',
+      tests : __dirname + '/tests',
+    },
+    extensions: ['', '.js', '.jsx', '.less', '.png', '.jpg']
+  },
+  plugins: [
+    new webpack.ProvidePlugin({
+      $: "jquery",
+      jQuery: "jquery",
+      "window.jQuery": "jquery",
+      "root.jQuery": "jquery",
+    })
+  ]
+};