diff --git a/front/current/styles.css b/front/current/styles.css
new file mode 100644
index 0000000000000000000000000000000000000000..0dcc5daa8485d16a0b9b80cb031937a8df39ef58
--- /dev/null
+++ b/front/current/styles.css
@@ -0,0 +1,8 @@
+/*
+
+  BASE
+
+*/
+html,
+body {
+  height: 100%; }
diff --git a/front/current/styles/styles.scss b/front/current/styles/styles.scss
new file mode 100644
index 0000000000000000000000000000000000000000..9ecb8bf0c071a78f0774faa1113edd9ab877c0ec
--- /dev/null
+++ b/front/current/styles/styles.scss
@@ -0,0 +1,5 @@
+@import	'tachyons-sass/scss/base';
+
+@import 'variables/variables'; 
+
+
diff --git a/front/current/styles/variables/variables.scss b/front/current/styles/variables/variables.scss
new file mode 100644
index 0000000000000000000000000000000000000000..139597f9cb07c5d48bed18984ec4747f4b4f3438
--- /dev/null
+++ b/front/current/styles/variables/variables.scss
@@ -0,0 +1,2 @@
+
+
diff --git a/front/gulpfile.js b/front/gulpfile.js
new file mode 100644
index 0000000000000000000000000000000000000000..e8406abf7f2c774e6f2e7330501de300bb68dd2f
--- /dev/null
+++ b/front/gulpfile.js
@@ -0,0 +1,28 @@
+
+var gulp = require('gulp'),
+    sass = require('gulp-sass'),
+    cleanCSS = require('gulp-clean-css');
+
+
+// 'use strict';
+ 
+gulp.task('styles', function () {
+  return gulp.src('./current/styles/styles.scss')
+    .pipe(sass({
+        includePaths: ['node_modules']
+      }).on('error', sass.logError)) 
+    .pipe(gulp.dest('./current/'));
+});
+
+// Minify CSS
+
+gulp.task('minify-css', function() {
+  return gulp.src('./current/styles/*.css')
+    .pipe(cleanCSS({compatibility: 'ie8'}))
+    .pipe(gulp.dest('dist'));
+});
+ 
+//Watch task
+gulp.task('default',function() {
+    gulp.watch('current/styles/**/*.scss',['styles']);
+});
diff --git a/front/index.html b/front/index.html
index 67c2eb5c5a78bf96f4aadfcc6b3d8e15f0b20e30..dc3f8ecdb4e8631d835d4abe706cf1e83ade9ded 100644
--- a/front/index.html
+++ b/front/index.html
@@ -3,8 +3,7 @@
     <base href="/">
     <title>Project Dashboard</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">    
-    <!-- <link rel="stylesheet" href="styles.css"> -->
-    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
+    <link rel="stylesheet" href="current/styles.css">
 
     <!-- 1. Load libraries -->
     <!-- IE required polyfills, in this exact order -->
diff --git a/front/package.json b/front/package.json
index 3e72cba328f64321af0d046a93902e82dac128b1..ef74776dffaa6a026aad914ad070cd4c5c2aa568 100644
--- a/front/package.json
+++ b/front/package.json
@@ -2,7 +2,7 @@
   "name": "projectdashboard",
   "version": "1.0.0",
   "scripts": {
-    "start": "concurrently \"npm run tsc:w\" \"npm run lite\" ",
+    "start": "concurrently \"npm run tsc:w\" \"npm run lite\" gulp ",
     "tsc": "tsc",
     "tsc:w": "tsc -w",
     "lite": "lite-server",
@@ -12,17 +12,20 @@
   "license": "ISC",
   "dependencies": {
     "angular2": "2.0.0-beta.9",
-    "bootstrap": "^3.3.6",
     "config-json": "^1.0.0",
     "es6-promise": "^3.0.2",
     "es6-shim": "^0.33.3",
     "reflect-metadata": "0.1.2",
     "rxjs": "5.0.0-beta.2",
     "systemjs": "0.19.24",
+    "tachyons-sass": "^4.0.0-beta.12",
     "zone.js": "0.5.15"
   },
   "devDependencies": {
     "concurrently": "^2.0.0",
+    "gulp": "^3.9.1",
+    "gulp-clean-css": "^2.0.4",
+    "gulp-sass": "^2.2.0",
     "lite-server": "^2.1.0",
     "typescript": "^1.8.7",
     "typings": "^0.7.5"