diff --git a/demo/main.css b/demo/main.css
index 5161f63..f150f2c 100644
--- a/demo/main.css
+++ b/demo/main.css
@@ -1,3 +1,10 @@
+body {
+    color: #626262;
+    font-family: "Segoe UI",Arial,sans-serif;
+    font-size: 14px;
+    font-weight: normal;
+    letter-spacing: 0.01em;
+}
 .validation-valid {
     color: #0074D9;
 }
@@ -23,6 +30,10 @@
     opacity: 1;
 }
 
+.m-l-10 {
+    margin-left: 10px;
+}
+
 pre, pre code {
     font-size: 13px;
 }
@@ -53,6 +64,10 @@ pre {
     background: none;
 }
 
+.container > nav {
+    margin: 0px 40px;
+}
+
 .navbar-default .navbar-brand {
     color: #0A7C71;
 }
@@ -83,14 +98,7 @@ pre {
     color: #fff;
     text-align: center;
     background-color: #0A7C71;
-    background-image: -webkit-gradient(linear,left top,left bottom,from(#0A7C71),to(#10CFBD));
-    background-image: -webkit-linear-gradient(top,#0A7C71
- 0,#10CFBD 100%);
-    background-image: -o-linear-gradient(top,#0A7C71
- 0,#10CFBD 100%);
-    background-image: linear-gradient(to bottom,#0A7C71
- 0,#10CFBD 100%);
-    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0A7C71', endColorstr='#10CFBD', GradientType=0);
+    background-image: linear-gradient(to bottom,#0A7C78 0,#0A7C75 100%);
     background-repeat: repeat-x;
 }
 
@@ -98,6 +106,10 @@ pre {
     text-align: left;
 }
 
+.bs-docs-header .container > p {
+    color: #ccc;
+}
+
 .bs-docs-decs {
     font-size: 16px;
     padding: 10px;
diff --git a/dist/bundle.js b/dist/bundle.js
new file mode 100644
index 0000000..5ea9060
--- /dev/null
+++ b/dist/bundle.js
@@ -0,0 +1,61 @@
+/******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId])
+/******/ 			return installedModules[moduleId].exports;
+
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			exports: {},
+/******/ 			id: moduleId,
+/******/ 			loaded: false
+/******/ 		};
+
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+
+/******/ 		// Flag the module as loaded
+/******/ 		module.loaded = true;
+
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+
+
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(0);
+/******/ })
+/************************************************************************/
+/******/ ([
+/* 0 */
+/***/ function(module, exports, __webpack_require__) {
+
+	module.exports = __webpack_require__(1);
+
+
+/***/ },
+/* 1 */
+/***/ function(module, exports) {
+
+	'use strict';
+
+	angular.module('validation', ['validation.provider', 'validation.directive']);
+	angular.module('validation.provider', []);
+	angular.module('validation.directive', ['validation.provider']);
+
+/***/ }
+/******/ ]);
\ No newline at end of file
diff --git a/index.html b/index.html
index be1a401..8581fcd 100644
--- a/index.html
+++ b/index.html
@@ -30,21 +30,21 @@
 
     <title>Angular Validation</title>
     <!-- Bootstrap core CSS -->
-    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css"/>
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css"/>
     <!-- Bootstrap theme -->
-    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap-theme.min.css"/>
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap-theme.min.css"/>
     <!-- AngularJs ui-select CSS-->
-    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.13.2/select.min.css"/>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.13.2/select.min.css"/>
 
     <!-- Highlight CSS-->
-    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.5/styles/color-brewer.min.css"/>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.5/styles/color-brewer.min.css"/>
 
     <link rel="stylesheet" href="demo/main.css"/>
 
 </head>
 
   <body role="document" ng-controller="index">
-
+    <div class="container" style="padding-bottom: 20px;">
      <!-- Fixed navbar -->
     <nav class="navbar navbar-default navbar-fixed-top">
       <div class="container">
@@ -67,34 +67,27 @@
          <div class="hidden-xs" style="height: 40px;"></div>
           <div class="container">
             <h1>Angular Validation</h1>
-            <div class="bs-docs-decs">
-                <p> Client-side Validation should be simple and clean. </p>
-                <p>Don't let Client-side Validation dirty your controller. </p>
-
-                <p>Setup your Validation on config phase by using some rules (example) <p>
-                <p>If you prefer schema over html attributes , try angular-validation-schema (Demo)
-                    And add Validation in your view only.
-                </p>
-             </div>
+            <p> Client-side Validation should be simple and clean. </p>
         </div>
       </header>
     <div class="container theme-showcase" role="main">
       <section id="getting_started">
         <div class="hidden-xs" style="height: 40px;"></div>
         <div class="page-header">
-            <h1>Getting Started</h1>
+            <h2>Getting Started</h2>
         </div>
         <h3>Requirements</h3>
         <br/>
         <p><strong> AngularJS 1.2.x </strong>(for angular-validation 1.2.x)</p>
         <p><strong> AngularJS 1.3.x </strong>(for angular-validation 1.3.x)</p>
-
         <h3>Installation</h3>
         <br/>
+        <div>
         <p>Install with npm</p>
         <pre><code>npm install angular-validation </code></pre>
         <p>Or with Bower</p>
         <pre><code>bower install angular-validation </code></pre>
+        </div>
         <br/>
         <h3>Files to download</h3>
         <br/>
@@ -133,7 +126,7 @@ <h3>Writing your first code</h3>
     <section id="style_guide">
         <div class="hidden-xs" style="height: 40px;"></div>
         <div class="page-header">
-            <h1>Style Guide</h1>
+            <h2>Style Guide</h2>
         </div>
         <p>You can style different states of your form elements using the following selectors</p>
         <span class="label label-danger" style="margin-left: 2px;">Invalid Selectors</span>
@@ -165,7 +158,7 @@ <h1>Style Guide</h1>
     <section id="examples">
       <div class="hidden-xs" style="height: 40px;"></div>
        <div class="page-header">
-            <h1>Examples</h1>
+            <h2>Examples</h2>
         </div>
        <!--- Form1 -->
       <div class="page-header">
@@ -444,17 +437,18 @@ <h1>Examples</h1>
 
     </section>
  </div>
+ </div>
 
 <a href="https://github.com/huei90/angular-validation" target="_blank"><img src="demo/iconmonstr-github-10-icon-128.png" id="github-link" alt="Fork me on Github"/></a>
-<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
-<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.5/highlight.min.js"></script>
-<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
-<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
-<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-sanitize.min.js"></script>
-<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.min.js"></script>
-<script src="//maxcdn.bootstrapcdn.com/bootstrap/latest/js/bootstrap.min.js"></script>
-<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap.min.js"></script>
-<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.13.2/select.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.5/highlight.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
+<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-sanitize.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.min.js"></script>
+<script src="https://maxcdn.bootstrapcdn.com/bootstrap/latest/js/bootstrap.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.13.2/select.min.js"></script>
 
 <script src="dist/angular-validation.js"></script>
 <script src="dist/angular-validation-rule.js"></script>
@@ -474,7 +468,7 @@ <h1>Examples</h1>
   (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
   (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
   m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
-  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
 
   ga('create', 'UA-62825613-1', 'auto');
   ga('send', 'pageview');
diff --git a/package.json b/package.json
index 44b9b24..15bbd03 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,9 @@
   "main": "./dist/angular-validation.js",
   "bugs": "https://github.com/huei90/angular-validation/issues",
   "devDependencies": {
+    "babel-core": "^6.7.7",
+    "babel-loader": "^6.2.4",
+    "babel-preset-es2015": "^6.6.0",
     "grunt": "~0.4.4",
     "grunt-browser-sync": "~2.2.0",
     "grunt-contrib-clean": "~0.7.0",
@@ -53,5 +56,8 @@
     "load-grunt-tasks": "~3.4.0",
     "requirejs": "~2.1.14",
     "time-grunt": "~1.3.0"
+  },
+  "dependencies": {
+    "webpack": "^1.13.0"
   }
 }
diff --git a/src/main.js b/src/main.js
new file mode 100644
index 0000000..764dbc5
--- /dev/null
+++ b/src/main.js
@@ -0,0 +1,2 @@
+var angular = require('./node_modules/angular/angular.js');
+var validationApp = require('./module.js');
\ No newline at end of file
diff --git a/src/module.js b/src/module.js
index fe2edb1..7f2bb22 100644
--- a/src/module.js
+++ b/src/module.js
@@ -1,5 +1,6 @@
-(function() {
-  angular.module('validation', ['validation.provider', 'validation.directive']);
-  angular.module('validation.provider', []);
-  angular.module('validation.directive', ['validation.provider']);
-}).call(this);
+
+
+angular.module('validation', ['validation.provider', 'validation.directive']);
+angular.module('validation.provider', []);
+angular.module('validation.directive', ['validation.provider']);
+
diff --git a/webpack.config.js b/webpack.config.js
new file mode 100644
index 0000000..7a71506
--- /dev/null
+++ b/webpack.config.js
@@ -0,0 +1,18 @@
+module.exports = {
+    entry: ['./src/module.js'],
+    output: {
+        filename: 'dist/bundle.js'
+    },
+    module: {
+        loaders: [
+            {
+                test: /\.jsx?$/,
+                exclude: /(node_modules|bower_components)/,
+                loader: 'babel',
+                query: {
+                    presets: ['es2015']
+                }
+            }
+        ]
+    }
+}
\ No newline at end of file