diff --git a/Gruntfile.js b/Gruntfile.js
index ac5dc6a..d21c2cb 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -43,7 +43,8 @@ module.exports = function(grunt) {
                 'app/nodeControllers/*.js',
                 'app/public/scripts/*.js',
                 'phantomas_custom/**/*.js',
-                'test/**/*.js'
+                'test/**/*.js',
+                'front/src/js/**/*.js'
             ]
         },
         clean: {
diff --git a/app/public/scripts/app.js b/app/public/scripts/app.js
index f8b9dd7..3b54686 100644
--- a/app/public/scripts/app.js
+++ b/app/public/scripts/app.js
@@ -2,4 +2,5 @@ angular.module('YellowLabTools', [
   'Results',
   'ngModal',
   'ShowOffendersDirective'
-]);
\ No newline at end of file
+]);
+
diff --git a/bin/server.js b/bin/server.js
index cc7199c..ea6ca38 100644
--- a/bin/server.js
+++ b/bin/server.js
@@ -16,7 +16,7 @@ app.use(apiLimitsMiddleware);
 
 // Initialize the controllers
 var apiController           = require('../lib/server/controllers/apiController')(app);
-var uiController            = require('../lib/server/controllers/uiController')(app);
+var frontController         = require('../lib/server/controllers/frontController')(app);
 
 
 // Let's start the server!
diff --git a/bower.json b/bower.json
index b308e91..3a28910 100644
--- a/bower.json
+++ b/bower.json
@@ -2,6 +2,8 @@
   "name": "yellowlabtools",
   "dependencies": {
     "angular": "~1.3.5",
-    "ngModal": "git://github.com/gmetais/ngModal.git#1.2.3"
+    "ngModal": "git://github.com/gmetais/ngModal.git#1.2.3",
+    "angular-route": "~1.3.6",
+    "angular-resource": "~1.3.6"
   }
 }
diff --git a/front/src/js/app.js b/front/src/js/app.js
new file mode 100644
index 0000000..aaea1b7
--- /dev/null
+++ b/front/src/js/app.js
@@ -0,0 +1,30 @@
+var yltApp = angular.module('YellowLabTools', [
+    'ngRoute',
+    'indexCtrl',
+    'aboutCtrl',
+    'dashboardCtrl'
+]);
+
+yltApp.config(['$routeProvider', '$locationProvider',
+    function($routeProvider, $locationProvider) {
+        $routeProvider.
+            when('/', {
+                templateUrl: 'front/views/index.html',
+                controller: 'IndexCtrl'
+            }).
+            when('/about', {
+                templateUrl: 'front/views/about.html',
+                controller: 'AboutCtrl'
+            }).
+            when('/results/:runId', {
+                templateUrl: 'front/views/dashboard.html',
+                controller: 'DashboardCtrl'
+            }).
+            otherwise({
+                redirectTo: '/'
+            });
+            
+            $locationProvider.html5Mode(true);
+    }
+]);
+
diff --git a/front/src/js/controllers/aboutCtrl.js b/front/src/js/controllers/aboutCtrl.js
new file mode 100644
index 0000000..11957f9
--- /dev/null
+++ b/front/src/js/controllers/aboutCtrl.js
@@ -0,0 +1,5 @@
+var aboutCtrl = angular.module('aboutCtrl', []);
+
+aboutCtrl.controller('AboutCtrl', ['$scope', function($scope) {
+    $scope.about = "this is about YLT";
+}]);
\ No newline at end of file
diff --git a/front/src/js/controllers/dashboardCtrl.js b/front/src/js/controllers/dashboardCtrl.js
new file mode 100644
index 0000000..fcc5d95
--- /dev/null
+++ b/front/src/js/controllers/dashboardCtrl.js
@@ -0,0 +1,10 @@
+var dashboardCtrl = angular.module('dashboardCtrl', ['resultsFactory']);
+
+dashboardCtrl.controller('DashboardCtrl', ['$scope', '$routeParams', 'Results', function($scope, $routeParams, Results) {
+    $scope.dashboard = "this is a dashboard";
+    $scope.runId = $routeParams.runId;
+    Results.get({runId: $routeParams.runId}, function(result) {
+        $scope.result = result;
+        console.log(result);
+    });
+}]);
\ No newline at end of file
diff --git a/front/src/js/controllers/indexCtrl.js b/front/src/js/controllers/indexCtrl.js
new file mode 100644
index 0000000..d308850
--- /dev/null
+++ b/front/src/js/controllers/indexCtrl.js
@@ -0,0 +1,5 @@
+var indexCtrl = angular.module('indexCtrl', []);
+
+indexCtrl.controller('IndexCtrl', ['$scope', function($scope) {
+    $scope.toto = "Achraf";
+}]);
\ No newline at end of file
diff --git a/front/src/js/models/resultsFactory.js b/front/src/js/models/resultsFactory.js
new file mode 100644
index 0000000..fab26d0
--- /dev/null
+++ b/front/src/js/models/resultsFactory.js
@@ -0,0 +1,7 @@
+var resultsFactory = angular.module('resultsFactory', ['ngResource']);
+
+resultsFactory.factory('Results', ['$resource', function($resource) {
+    return $resource('/api/results/:runId', {
+        'get': {method: 'GET', params: {runId: '@runId'}}
+    });
+}]);
\ No newline at end of file
diff --git a/front/src/main.html b/front/src/main.html
new file mode 100644
index 0000000..5142b30
--- /dev/null
+++ b/front/src/main.html
@@ -0,0 +1,19 @@
+<html>
+<head>
+	<title>index template</title>
+    <base href="/">
+    <script src="/bower_components/angular/angular.min.js"></script>
+    <script src="/bower_components/angular-route/angular-route.min.js"></script>
+    <script src="/bower_components/angular-resource/angular-resource.min.js"></script>
+    <script src="/front/js/app.js"></script>
+    <script src="/front/js/controllers/indexCtrl.js"></script>
+    <script src="/front/js/controllers/aboutCtrl.js"></script>
+    <script src="/front/js/controllers/dashboardCtrl.js"></script>
+    <script src="/front/js/models/resultsFactory.js"></script>
+<head>
+<body ng-app="YellowLabTools">
+  <div id="header">hello yellowlab tools, header</div>
+  <div id="body" ng-view>hello yellowlab, body</div>
+  <div id="footer">hello yellowlab, footer</div>
+</body>
+</html>
\ No newline at end of file
diff --git a/front/src/views/about.html b/front/src/views/about.html
new file mode 100644
index 0000000..d0f7199
--- /dev/null
+++ b/front/src/views/about.html
@@ -0,0 +1 @@
+{{about}}
\ No newline at end of file
diff --git a/front/src/views/dashboard.html b/front/src/views/dashboard.html
new file mode 100644
index 0000000..29fb6e9
--- /dev/null
+++ b/front/src/views/dashboard.html
@@ -0,0 +1,2 @@
+<div>{{dashboard}}</div>
+<div>{{runId}}</div>
\ No newline at end of file
diff --git a/front/src/views/index.html b/front/src/views/index.html
new file mode 100644
index 0000000..b475959
--- /dev/null
+++ b/front/src/views/index.html
@@ -0,0 +1 @@
+this is a html index by {{toto}}
\ No newline at end of file
diff --git a/lib/server/controllers/frontController.js b/lib/server/controllers/frontController.js
new file mode 100644
index 0000000..d13ea6d
--- /dev/null
+++ b/lib/server/controllers/frontController.js
@@ -0,0 +1,23 @@
+var path = require('path');
+var express = require('express');
+
+var FrontController = function(app) {
+    'use strict';
+ 
+    app.get('/', function(req, res) {
+        res.sendFile(path.join(__dirname, '../../../front/src/main.html')); 
+    });
+    
+    app.get('/about', function(req, res) {
+        res.sendFile(path.join(__dirname, '../../../front/src/main.html')); 
+    });
+    
+    app.get('/results/:runId', function(req, res) {
+        res.sendFile(path.join(__dirname, '../../../front/src/main.html')); 
+    });
+    
+    app.use('/front', express.static(path.join(__dirname, '../../../front/src')));
+    app.use('/bower_components', express.static(path.join(__dirname, '../../../bower_components')));
+};
+
+module.exports = FrontController;
\ No newline at end of file
diff --git a/lib/server/controllers/uiController.js b/lib/server/controllers/uiController.js
deleted file mode 100644
index a6d906d..0000000
--- a/lib/server/controllers/uiController.js
+++ /dev/null
@@ -1,13 +0,0 @@
-var UiController = function(app) {
-    'use strict';
-
-
-    // Create a new run
-    app.get('/', function(req, res) {
-
-        res.setHeader('Content-Type', 'text/html');
-        res.send('Test');
-    });
-};
-
-module.exports = UiController;
\ No newline at end of file