diff --git a/js/radar.js b/js/radar.js
new file mode 100644
index 0000000..b377ef5
--- /dev/null
+++ b/js/radar.js
@@ -0,0 +1,5 @@
+import '../styles/main.css';
+
+const add = (x, y) => x + y;
+
+add(1, 2);
diff --git a/package.json b/package.json
index 1d10b67..de077a9 100644
--- a/package.json
+++ b/package.json
@@ -4,8 +4,10 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "build": "npm run clean && babel-node ./scripts/build.js",
-    "clean": "babel-node ./scripts/clean.js",
+    "build": "npm run clean && npm run build:radar && npm run build:webpack",
+    "build:radar": "babel-node ./tasks/build.js",
+    "build:webpack": "webpack --config webpack.config.js",
+    "clean": "babel-node ./tasks/clean.js",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "author": "Tom Raithel <t.raithel@googlemail.com> (http://www.tomraithel.de)",
@@ -13,12 +15,16 @@
   "dependencies": {
     "async": "2.1.4",
     "babel-cli": "6.22.2",
+    "babel-loader": "6.2.10",
     "babel-preset-latest": "6.22.0",
     "babel-preset-stage-0": "6.22.0",
+    "css-loader": "0.26.1",
+    "extract-text-webpack-plugin": "2.0.0-beta.5",
     "front-matter": "2.1.1",
     "fs-extra": "2.0.0",
     "marked": "0.3.6",
     "pug": "2.0.0-beta8",
-    "walk": "2.3.9"
+    "walk": "2.3.9",
+    "webpack": "2.2.0"
   }
 }
diff --git a/styles/main.css b/styles/main.css
new file mode 100644
index 0000000..67ce83e
--- /dev/null
+++ b/styles/main.css
@@ -0,0 +1,3 @@
+body {
+  background: red;
+}
diff --git a/scripts/build.js b/tasks/build.js
similarity index 100%
rename from scripts/build.js
rename to tasks/build.js
diff --git a/scripts/clean.js b/tasks/clean.js
similarity index 100%
rename from scripts/clean.js
rename to tasks/clean.js
diff --git a/scripts/file.js b/tasks/file.js
similarity index 100%
rename from scripts/file.js
rename to tasks/file.js
diff --git a/scripts/radar.js b/tasks/radar.js
similarity index 100%
rename from scripts/radar.js
rename to tasks/radar.js
diff --git a/scripts/static.js b/tasks/static.js
similarity index 100%
rename from scripts/static.js
rename to tasks/static.js
diff --git a/scripts/template.js b/tasks/template.js
similarity index 100%
rename from scripts/template.js
rename to tasks/template.js
diff --git a/templates/layout.pug b/templates/layout.pug
index c79281d..8cc86a7 100644
--- a/templates/layout.pug
+++ b/templates/layout.pug
@@ -2,8 +2,7 @@ block vars
 html
   head
     title #{title} - AOE Tech Radar
-    block scripts
-      script(src='/jquery.js')
+    link(rel='stylesheet', href='/styles.css')
 
   h3
     a(href='/') AOE Tech Radar
@@ -12,3 +11,5 @@ html
 
   body
     block content
+    block scripts
+      script(src='/bundle.js')
diff --git a/webpack.config.js b/webpack.config.js
new file mode 100644
index 0000000..9ddb030
--- /dev/null
+++ b/webpack.config.js
@@ -0,0 +1,38 @@
+var path = require('path');
+var ExtractTextPlugin = require("extract-text-webpack-plugin");
+
+const cssLoader = ExtractTextPlugin.extract({
+  loader: "css-loader"
+});
+
+module.exports = {
+  entry: {
+    bundle: './js/radar.js',
+  },
+  output: {
+    path: path.join(__dirname, 'dist'),
+    filename: '[name].js',
+  },
+  module: {
+    rules: [
+      {
+         test: /\.js?$/,
+         include: [
+           path.resolve(__dirname, "js")
+         ],
+
+         loader: "babel-loader",
+       },
+       {
+         test: /\.css?$/,
+         include: [
+           path.resolve(__dirname, "styles")
+         ],
+         loader: cssLoader,
+       },
+    ],
+  },
+  plugins: [
+    new ExtractTextPlugin("styles.css")
+  ],
+}