diff --git a/.gitignore b/.gitignore
index 8a8fd81..cbca2a3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,3 @@
 /nbproject/
 /node_modules/
-/build/*
-!/build/jquery-3.1.1.min.js
\ No newline at end of file
+/build/
\ No newline at end of file
diff --git a/app.js b/app.js
index 8a096cb..5e79fe9 100644
--- a/app.js
+++ b/app.js
@@ -31,7 +31,6 @@ server.listen(8085, () => {
     console.log('App listening at http://localhost:8085');
 });
 
-
 // uncomment after placing your favicon in /public
 //app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
 app.use(logger('dev'));
@@ -40,14 +39,8 @@ app.use(bodyParser.urlencoded({extended: false}));
 app.use(cookieParser());
 //app.use(express.static(path.join(__dirname, 'public')));
 
-//app.use(express.static('./build/'));
-//app.use('/*', express.static('./build/index.html')); //Always keep as last route
-//app.use('/', express.static(__dirname + '/build'));
-/*app.use('/*', function (req, res) {
-    console.log("AllRouter");
-    res.sendFile(__dirname + '/build/index.html');
-});
-*/
+//Production
+app.use(express.static('./build/'));
 
 io.on('connection', (socket) => {
     socket.emit('test', 'Connectedddd');
diff --git a/client/app/app.js b/client/app/app.js
index ebe2a9e..1776982 100644
--- a/client/app/app.js
+++ b/client/app/app.js
@@ -14,9 +14,10 @@ import './home';
 import './services'
 import './auth';
 import './canvas';
-import './normalize.css';
-import './style.css';
 import 'angular-material';
+//development
+//import './normalize.css';
+//import './style.css';
 
 // Create and bootstrap application
 const requires = [
diff --git a/client/app/config/app.run.js b/client/app/config/app.run.js
index 270a698..9e711f4 100644
--- a/client/app/config/app.run.js
+++ b/client/app/config/app.run.js
@@ -3,7 +3,6 @@ function AppRun(AppConstants, $rootScope) {
 
   // change page title based on state
   $rootScope.$on('$stateChangeSuccess', (event, toState) => {
-	  console.log(toState);
     $rootScope.setPageTitle(toState.title);
   });
 
diff --git a/client/app/config/app.templates.js b/client/app/config/app.templates.js
index b90df68..c9bc7bc 100644
--- a/client/app/config/app.templates.js
+++ b/client/app/config/app.templates.js
@@ -1,14 +1,14 @@
 angular.module('templates', []).run(['$templateCache', function($templateCache) {$templateCache.put('auth/auth.html','<div class="auth-page">\r\n    <div class="row">\r\n\r\n        <h1 class="auth-title" ng-bind="::$ctrl.title"></h1>\r\n        <p>\r\n          <a ui-sref="app.login" ng-show="$ctrl.authType === \'register\'">\r\n            Have an account?\r\n          </a>\r\n\t\t  <a ui-sref="app.register" ng-show="$ctrl.authType === \'login\'">\r\n            Need an account?\r\n          </a>\r\n        </p>\r\n\t\t\r\n\t\t<list-errors errors="$ctrl.errors"></list-errors>\r\n\r\n        <form ng-submit="$ctrl.submitForm()">\r\n          <fieldset ng-disabled="$ctrl.isSubmitting">\r\n\r\n            <fieldset ng-show="$ctrl.authType === \'register\'">\r\n              <input class="auth-input"\r\n                type="text"\r\n                placeholder="Username"\r\n                ng-model="$ctrl.formData.username" />\r\n            </fieldset>\r\n\r\n            <fieldset>\r\n              <input class="auth-input"\r\n                type="email"\r\n                placeholder="Email"\r\n                ng-model="$ctrl.formData.email" />\r\n            </fieldset>\r\n\r\n            <fieldset>\r\n              <input class="auth-input"\r\n                type="password"\r\n                placeholder="Password"\r\n                ng-model="$ctrl.formData.password" />\r\n            </fieldset>\r\n\r\n            <button class="auth-button"\r\n              type="submit" ng-bind="$ctrl.title">\r\n            </button>\r\n\r\n          </fieldset>\r\n        </form>\r\n  </div>\r\n</div>');
 $templateCache.put('canvas/canvas.html','<div id="navbar">\r\n\t<!--<select id="colorOptions"></select>-->\r\n\t<md-button id="colorOptions" class="md-fab icon ion-android-color-palette" aria-label="Change Color"/>\r\n\t<div id="colorList">\r\n\t\t<div id="black" class="color"/>\r\n\t\t<div id="white" class="color"/>\r\n\t\t<div id="green" class="color"/>\r\n\t\t<div id="yellow" class="color"/>\r\n\t\t<div id="orange" class="color"/>\r\n\t\t<div id="red" class="color"/>\r\n\t\t<div id="lightBlue" class="color"/>\r\n\t\t<div id="blue" class="color"/>\r\n\t\t<div id="purple" class="color"/>\r\n\t</div>\r\n</div>\r\n\t\r\n<div id="content">\r\n\r\n\t<div id="cvContainer"><!-- our canvas will be inserted here--></div>\r\n\t<div id="sidebar">\r\n\t\t<md-button id="clearCv" class="md-fab icon ion-ios-trash" aria-label="Clear Canvas"/>\r\n\t\t<md-button id="changeBrushSize" class="md-fab icon ion-record" aria-label="Brush Size"/>\r\n\t</div>\r\n\t\r\n</div>\r\n\r\n<div id="footer">\r\n\t<p id="footerText">WebApps 3 Drawing Application</p>\r\n</div>');
-$templateCache.put('home/home.html','<div class="home-page">\r\n\r\n  <p>This is the home page and still needs to be changed, we are planning to show different rooms here and probably some information...</p>\r\n  \r\n  <ul>\r\n\r\n      <li class="nav-item">\r\n        <a class="nav-link"\r\n          ui-sref-active="active"\r\n          ui-sref="app.canvas">\r\n          Canvas\r\n        </a>\r\n      </li>\r\n\r\n      <li class="nav-item">\r\n        <a class="nav-link"\r\n          ui-sref-active="active"\r\n          ui-sref="app.login">\r\n          Sign in\r\n        </a>\r\n      </li>\r\n\r\n      <li class="nav-item">\r\n        <a class="nav-link"\r\n          ui-sref-active="active"\r\n          ui-sref="app.register">\r\n          Sign up\r\n        </a>\r\n      </li>\r\n\r\n    </ul>\r\n\r\n</div>\r\n');
 $templateCache.put('components/list-errors.html','<ul class="error-messages" ng-show="$ctrl.errors">\r\n  <div ng-repeat="(field, errors) in $ctrl.errors">\r\n    <li ng-repeat="error in errors">\r\n      {{field}} {{error}}\r\n    </li>\r\n  </div>\r\n</ul>');
+$templateCache.put('home/home.html','<div class="home-page">\r\n\r\n  <p>This is the home page and still needs to be changed, we are planning to show different rooms here and probably some information...</p>\r\n  \r\n  <ul>\r\n\r\n      <li class="nav-item">\r\n        <a class="nav-link"\r\n          ui-sref-active="active"\r\n          ui-sref="app.canvas">\r\n          Canvas\r\n        </a>\r\n      </li>\r\n\r\n      <li class="nav-item">\r\n        <a class="nav-link"\r\n          ui-sref-active="active"\r\n          ui-sref="app.login">\r\n          Sign in\r\n        </a>\r\n      </li>\r\n\r\n      <li class="nav-item">\r\n        <a class="nav-link"\r\n          ui-sref-active="active"\r\n          ui-sref="app.register">\r\n          Sign up\r\n        </a>\r\n      </li>\r\n\r\n    </ul>\r\n\r\n</div>\r\n');
 $templateCache.put('layout/app-view.html','<div ui-view></div>');
 $templateCache.put('layout/footer.html','<div id="footer">\r\n\t<span>test</span>\r\n</div>');
 $templateCache.put('layout/header.html','<div id="navbar">\r\n\t<select id="colorOptions"></select>\r\n\t<span>Evil Drawing</span>\r\n</div>');
 $templateCache.put('layout/sidebar.html','<div id="sidebar">\r\n                <input type ="button" id="clearCv" value="Clear Canvas"/>\r\n                <input type ="button" id="changeBrushSize" value="Brush Size"/>\r\n</div>');
-$templateCache.put('components/buttons/favorite-btn.html','<button class="btn btn-sm"\r\n\t\tng-class="{ \'disabled\': $ctrl.isSubmitting,\r\n\t\t\t\t\t\'btn-outline-primary\': !$ctrl.article.favorited,\r\n\t\t\t\t\t\'btn-primary\': $ctrl.article.favorited }"\r\n\t\tng-click="$ctrl.submit()">\r\n\r\n  <i class="ion-heart"></i> <ng-transclude></ng-transclude>\r\n\r\n</button>');
-$templateCache.put('components/buttons/follow-btn.html','<button class="btn btn-sm action-btn"\r\n\t\tng-class="{ \'disabled\': $ctrl.isSubmitting,\r\n\t\t\t\t\t\'btn-outline-secondary\': !$ctrl.user.following,\r\n\t\t\t\t\t\'btn-secondary\': $ctrl.user.following }"\r\n\t\tng-click="$ctrl.submit()">\r\n\t&nbsp;\r\n\t{{ $ctrl.user.following ? \'Unfollow\' : \'Follow\' }} {{ $ctrl.user.username }}\r\n</button>');
 $templateCache.put('components/article-helpers/article-list.html','<article-preview\r\n  article="article"\r\n  ng-repeat="article in $ctrl.list">\r\n</article-preview>\r\n\r\n<div class="article-preview"\r\n  ng-hide="!$ctrl.loading">\r\n  Loading articles...\r\n</div>\r\n\r\n<div class="article-preview"\r\n  ng-show="!$ctrl.loading && !$ctrl.list.length">\r\n  No articles are here... yet.\r\n</div>\r\n\r\n<list-pagination\r\n total-pages="$ctrl.listConfig.totalPages"\r\n current-page="$ctrl.listConfig.currentPage"\r\n ng-hide="$ctrl.listConfig.totalPages <= 1">\r\n</list-pagination>');
 $templateCache.put('components/article-helpers/article-meta.html','<div class="article-meta">\r\n  <a ui-sref="app.profile.main({ username:$ctrl.article.author.username })">\r\n    <img ng-src="{{$ctrl.article.author.image}}" />\r\n  </a>\r\n\r\n  <div class="info">\r\n    <a class="author"\r\n      ui-sref="app.profile.main({ username:$ctrl.article.author.username })"\r\n      ng-bind="$ctrl.article.author.username">\r\n    </a>\r\n    <span class="date"\r\n      ng-bind="$ctrl.article.createdAt | date: \'longDate\' ">\r\n    </span>\r\n  </div>\r\n\r\n  <ng-transclude></ng-transclude>\r\n</div>');
 $templateCache.put('components/article-helpers/article-preview.html','<div class="article-preview">\r\n  <article-meta article="$ctrl.article">\r\n    <favorite-btn\r\n      article="$ctrl.article"\r\n      class="pull-xs-right">\r\n      {{$ctrl.article.favoritesCount}}\r\n    </favorite-btn>\r\n  </article-meta>\r\n\r\n  <a ui-sref="app.article({ slug: $ctrl.article.slug })" class="preview-link">\r\n    <h1 ng-bind="$ctrl.article.title"></h1>\r\n    <p ng-bind="$ctrl.article.description"></p>\r\n    <span>Read more...</span>\r\n    <ul class="tag-list">\r\n      <li class="tag-default tag-pill tag-outline"\r\n        ng-repeat="tag in $ctrl.article.tagList">\r\n        {{tag}}\r\n      </li>\r\n    </ul>\r\n  </a>\r\n</div>');
-$templateCache.put('components/article-helpers/list-pagination.html','<nav>\r\n  <ul class="pagination">\r\n\r\n    <li class="page-item"\r\n      ng-class="{active: pageNumber === $ctrl.currentPage }"\r\n      ng-repeat="pageNumber in $ctrl.pageRange($ctrl.totalPages)"\r\n\t  ng-click="$ctrl.changePage(pageNumber)">\r\n\r\n      <a class="page-link" href="">{{ pageNumber }}</a>\r\n\r\n    </li>\r\n\r\n  </ul>\r\n</nav>');}]);
\ No newline at end of file
+$templateCache.put('components/article-helpers/list-pagination.html','<nav>\r\n  <ul class="pagination">\r\n\r\n    <li class="page-item"\r\n      ng-class="{active: pageNumber === $ctrl.currentPage }"\r\n      ng-repeat="pageNumber in $ctrl.pageRange($ctrl.totalPages)"\r\n\t  ng-click="$ctrl.changePage(pageNumber)">\r\n\r\n      <a class="page-link" href="">{{ pageNumber }}</a>\r\n\r\n    </li>\r\n\r\n  </ul>\r\n</nav>');
+$templateCache.put('components/buttons/favorite-btn.html','<button class="btn btn-sm"\r\n\t\tng-class="{ \'disabled\': $ctrl.isSubmitting,\r\n\t\t\t\t\t\'btn-outline-primary\': !$ctrl.article.favorited,\r\n\t\t\t\t\t\'btn-primary\': $ctrl.article.favorited }"\r\n\t\tng-click="$ctrl.submit()">\r\n\r\n  <i class="ion-heart"></i> <ng-transclude></ng-transclude>\r\n\r\n</button>');
+$templateCache.put('components/buttons/follow-btn.html','<button class="btn btn-sm action-btn"\r\n\t\tng-class="{ \'disabled\': $ctrl.isSubmitting,\r\n\t\t\t\t\t\'btn-outline-secondary\': !$ctrl.user.following,\r\n\t\t\t\t\t\'btn-secondary\': $ctrl.user.following }"\r\n\t\tng-click="$ctrl.submit()">\r\n\t&nbsp;\r\n\t{{ $ctrl.user.following ? \'Unfollow\' : \'Follow\' }} {{ $ctrl.user.username }}\r\n</button>');}]);
\ No newline at end of file
diff --git a/client/index.html b/client/index.html
index 95ac874..6a96b4a 100644
--- a/client/index.html
+++ b/client/index.html
@@ -4,7 +4,9 @@
     <meta charset="utf-8">
     <title ng-bind="pageTitle"></title>
 	<link type="text/css" rel="stylesheet" href="https://material.angularjs.org/latest/angular-material.min.css">
-	<link type="text/css" rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
+	<link type="text/css" rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
+	<!-- inject:css -->
+  <!-- endinject -->
   </head>
   <body>
 	<div id="wrapper">
@@ -14,5 +16,7 @@
 	</div>
 	<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
 	<script src='/socket.io/socket.io.js' type='text/javascript'></script>
+	<!-- inject:js -->
+  <!-- endinject -->
   </body>
 </html>
diff --git a/gulpfileserver.babel.js b/gulpfileserver.babel.js
new file mode 100644
index 0000000..6cdadf5
--- /dev/null
+++ b/gulpfileserver.babel.js
@@ -0,0 +1,83 @@
+'use strict';
+import gulp from 'gulp';
+import del from 'del';
+import source from 'vinyl-source-stream';
+import browserify from 'browserify';
+import babelify from 'babelify';
+import ngAnnotate from 'browserify-ngannotate';
+import templateCache from 'gulp-angular-templatecache';
+import rename from 'gulp-rename';
+import notify from 'gulp-notify';
+import ejs from 'gulp-ejs';
+import inject from 'gulp-inject';
+import concat from 'gulp-concat';
+import minifyCSS from 'gulp-minify-css';
+
+// Where our files are located
+var jsFiles   = "client/app/**/*.js";
+var viewFiles = "client/app/**/*.html";
+
+var interceptErrors = (error) => {
+    var args = Array.prototype.slice.call(arguments);
+
+    // Send error to notification center with gulp-notify
+    notify.onError({
+        title: 'Compile Error',
+        message: '<%= error.message %>'
+    }).apply(this, args);
+
+    // Keep gulp from hanging on this task
+    this.emit('end');
+};
+
+gulp.task('default', ['build'], () => {
+    console.log("Completed build.");
+});
+
+gulp.task('build', ['browserify', 'css'], () => {
+    gulp.start('html');
+    //gulp.start() will have to be replaced by gulp.series() when gulp 4.0 is released.
+});
+
+gulp.task('browserify', ['views'], () => {
+    return browserify(['./client/app/app.js'])
+            .transform(babelify, {presets: ["es2015"]})
+            .transform(ngAnnotate)
+            .bundle()
+            .on('error', interceptErrors)
+            .pipe(source('main.js'))
+            .pipe(gulp.dest('./build/'));
+});
+
+gulp.task('css', () => {
+    gulp.src('./client/app/*.css')
+            .pipe(minifyCSS())
+            .pipe(concat('style.css'))
+            .on('error', interceptErrors)
+            .pipe(gulp.dest('./build'));
+});
+
+gulp.task('html', () => {
+	const sources = gulp.src(['./build/*.js', './build/*.css'], {read: false});
+	
+    return gulp.src("./client/index.html")
+			.pipe(inject(sources, {relative: true, ignorePath: '../build/'}))
+            .on('error', interceptErrors)
+            .pipe(gulp.dest('./build/'));
+});
+
+gulp.task('views', () => {
+  return gulp.src(viewFiles)
+      .pipe(templateCache({
+        standalone: true
+      }))
+      .on('error', interceptErrors)
+      .pipe(rename("app.templates.js"))
+      .pipe(gulp.dest('./client/app/config/'));
+});
+
+gulp.task('clean', () => {
+    del(['./build/**', '!./build']).then(paths => {
+        console.log('Deleted files and folders:\n', paths.join('\n'));
+    });
+});
diff --git a/package.json b/package.json
index bda5850..c401492 100644
--- a/package.json
+++ b/package.json
@@ -1,101 +1,66 @@
 {
-  "name": "drawing-application",
-  "version": "0.0.1",
-  "description": "Webapp using Angular 1.5.x + ES6 + Webpack",
-  "main": "index.js",
-  "dependencies": {
-    "angular": "^1.5.8",
-    "angular-animate": "^1.5.8",
-    "angular-aria": "^1.5.8",
-    "angular-chart.js": "^1.0.3",
-    "angular-loading-bar": "^0.9.0",
-    "angular-material": "^1.1.1",
-    "angular-material-icons": "^0.7.1",
-    "angular-messages": "^1.5.8",
-    "angular-sanitize": "^1.5.8",
-    "angular-ui-router": "^1.0.0-beta.1",
-    "angularfire": "^2.0.2",
-    "body-parser": "^1.15.2",
-    "cookie-parser": "^1.4.3",
-    "cors": "^2.8.1",
-    "express": "^4.14.0",
-    "express-jwt": "^5.1.0",
-    "jquery": "^3.1.1",
-    "jsonwebtoken": "^7.1.9",
-    "mongoose": "^4.6.3",
-    "morgan": "^1.7.0",
-    "normalize.css": "^3.0.3",
-    "passport": "^0.3.2",
-    "passport-local": "^1.0.0",
-    "request": "^2.75.0",
-    "serve-favicon": "^2.3.0"
+  "name": "webapps3",
+  "version": "1.0.0",
+  "description": "Project WebApps 3",
+  "main": "app.js",
+  "scripts": {
+    "dev": "nodemon --exec babel-node app.js",
+    "prestart": "babel ./app.js --out-dir ./build",
+    "start": "node ./build/app.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/gevalo1/WebApps3.git"
   },
+  "author": "Thomas Buys",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/gevalo1/WebApps3/issues"
+  },
+  "homepage": "https://github.com/gevalo1/WebApps3#readme",
   "devDependencies": {
-    "angular-mocks": "^1.5.8",
-    "babel-core": "^6.17.0",
-    "babel-jest": "^16.0.0",
-    "babel-loader": "^6.2.5",
+    "babel-cli": "^6.18.0",
+    "babel-core": "^6.18.2",
+    "babel-loader": "^6.2.7",
     "babel-plugin-transform-runtime": "^6.15.0",
     "babel-polyfill": "^6.16.0",
-    "babel-preset-es2015": "^6.16.0",
-    "babel-preset-stage-0": "^6.15.0",
-    "babel-register": "^6.13.3",
-    "babel-runtime": "^6.11.6",
-    "browser-sync": "^2.17.3",
-    "connect-history-api-fallback": "^1.3.0",
-    "css-loader": "^0.25.0",
+    "babel-preset-es2015": "^6.18.0",
+    "babel-preset-stage-0": "^6.16.0",
+    "babelify": "^7.3.0",
+    "browser-sync": "^2.17.5",
+    "browserify": "^13.1.1",
+    "browserify-ngannotate": "^2.0.0",
     "del": "^2.2.2",
-    "eslint": "^3.7.1",
-    "fs-walk": "0.0.1",
-    "gulp": "^3.9.1",
+    "eslint": "^3.9.0",
+    "eslint-config-standard": "^6.2.1",
+    "eslint-plugin-promise": "^3.3.0",
+    "eslint-plugin-standard": "^2.0.1",
     "gulp-angular-templatecache": "^2.0.0",
+    "gulp-concat": "^2.6.0",
+    "gulp-ejs": "^2.2.1",
+    "gulp-html-replace": "^1.6.1",
+    "gulp-inject": "^4.1.0",
+    "gulp-minify-css": "^1.2.4",
     "gulp-nodemon": "^2.2.1",
     "gulp-notify": "^2.2.0",
     "gulp-rename": "^1.2.2",
-    "gulp-template": "^3.0.0",
-    "gulp-util": "^3.0.7",
-    "html-webpack-plugin": "^1.7.0",
-    "jest": "^16.0.2",
-    "lodash": "^4.16.4",
-    "ng-annotate-loader": "0.2.0",
-    "node-libs-browser": "^0.5.0",
-    "node-sass": "^3.10.1",
-    "raw-loader": "^0.5.1",
-    "run-sequence": "^1.2.2",
-    "sass-loader": "^4.0.2",
-    "style-loader": "^0.13.1",
-    "supports-color": "^3.1.2",
-    "webpack": "^1.13.2",
-    "webpack-dev-middleware": "^1.8.4",
-    "webpack-hot-middleware": "^2.13.0",
-    "yargs": "^3.9.0"
+    "gulp-uglify": "^2.0.0",
+    "vinyl-source-stream": "^1.1.0"
   },
-  "scripts": {
-    "test": "jest",
-    "test:watch": "jest --watch"
-  },
-  "keywords": [
-    "angular",
-    "webpack",
-    "es6"
-  ],
-  "author": "Thomas Buys",
-  "jest": {
-    "testPathDirs": [
-      "client"
-    ],
-    "setupTestFrameworkScriptFile": "./jest.init.js",
-    "verbose": "true",
-    "moduleFileExtensions": [
-      "js"
-    ],
-    "moduleDirectories": [
-      "node_modules"
-    ],
-    "moduleNameMapper": {
-      "^.+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
-      "^.+\\.(css|scss)$": "<rootDir>/__mocks__/styleMock.js",
-      "^.+\\.(html)$": "<rootDir>/__mocks__/htmlMock.js"
-    }
+  "dependencies": {
+    "angular": "^1.5.8",
+    "angular-ui-router": "^0.3.1",
+    "babel-cli": "^6.18.0",
+    "babel-register": "6.18.0",
+    "babel-runtime": "^6.18.0",
+    "body-parser": "1.15.2",
+    "cookie-parser": "1.4.3",
+    "ejs": "2.5.2",
+    "express": "4.14.0",
+    "gulp": "^3.9.1",
+    "mongoose": "^4.6.6",
+    "morgan": "1.7.0",
+    "serve-favicon": "2.3.0",
+    "socket.io": "^1.5.1"
   }
 }