diff --git a/public/app/css/app.css b/public/app/css/app.css
index 16d65505..c19e887e 100644
--- a/public/app/css/app.css
+++ b/public/app/css/app.css
@@ -26,4 +26,12 @@ body {
 
 .nav:after {
   clear:both;
-}
\ No newline at end of file
+}
+
+
+.date,
+.panel-heading { text-align: center }
+
+.balance{color:#fff}
+.balance.positive{background-color:#0a0}
+.balance.negative{background-color:#a00}
diff --git a/public/app/index.html b/public/app/index.html
index 91f3b883..c24c7d33 100644
--- a/public/app/index.html
+++ b/public/app/index.html
@@ -12,6 +12,9 @@
   <link type="text/css" rel="stylesheet" href="bower_components/html5-boilerplate/css/normalize.css">
   <link type="text/css" rel="stylesheet" href="bower_components/html5-boilerplate/css/main.css">
   <link type="text/css" rel="stylesheet" href="bower_components/nvd3/nv.d3.min.css">
+  <link type="text/css" rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
+  <link type="text/css" rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap-theme.min.css">
+
   <link type="text/css" rel="stylesheet" href="css/app.css"/>
   <script src="bower_components/html5-boilerplate/js/vendor/modernizr-2.6.2.min.js"></script>
 </head>
@@ -28,10 +31,16 @@
   <!-- In production use:
   <script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
   -->
-  <script src="bower_components/angular/angular.js"></script>
-  <script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
+  <script src="bower_components/underscore/underscore.js"></script>
+  <script src="bower_components/moment/moment.js"></script>
   <script src="bower_components/d3/d3.min.js"></script>
   <script src="bower_components/nvd3/nv.d3.min.js"></script>
+
+  <script src="bower_components/angular/angular.js"></script>
+  <script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
+  <script src="bower_components/angular-moment/angular-moment.min.js"></script>
+  <script src="bower_components/angular-bootstrap/ui-bootstrap.min.js"></script>
+  <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
   <script src="bower_components/angularjs-nvd3-directives/dist/angularjs-nvd3-directives.min.js"></script>
 
   <!-- APP -->
@@ -48,9 +57,8 @@
 
   <!-- MAIN -->
   <script src="js/main/state.js"></script>
-  <script src="js/main/controllers/HomeCtrl.js"></script>
-  <script src="js/main/controllers/AboutCtrl.js"></script>
-  <script src="js/main/controllers/ContactCtrl.js"></script>
+  <script src="js/main/controllers/BalanceCtrl.js"></script>
+  <script src="js/main/filters/formatLedgerEntries.js"></script>
 
 </body>
 </html>
diff --git a/public/app/js/app.js b/public/app/js/app.js
index 30a1627f..d3676815 100644
--- a/public/app/js/app.js
+++ b/public/app/js/app.js
@@ -1,2 +1,3 @@
 var app = angular.module( 'app', [ 'ui.router',
-				   'nvd3ChartDirectives' ] );
+				   'nvd3ChartDirectives',
+				   'angularMoment' ] );
diff --git a/public/app/js/main/controllers/BalanceCtrl.js b/public/app/js/main/controllers/BalanceCtrl.js
index 2a52c888..7077b6ac 100644
--- a/public/app/js/main/controllers/BalanceCtrl.js
+++ b/public/app/js/main/controllers/BalanceCtrl.js
@@ -1,7 +1,15 @@
 app.controller( 'BalanceCtrl',
 		[ '$scope', '$http',
 		  function( $scope, $http ) {
-		      var now = new Date();
+		      $scope.now = moment();
+		      $scope.previous_period = function() {
+			  $scope.now.subtract( 'months', 1 );
+			  retrieve_data();
+		      };
+		      $scope.next_period = function() {
+			  $scope.now.add( 'months', 1 );
+			  retrieve_data();
+		      };
 
 		      $scope.xFunction = function() {
 			  return function( d ) {
@@ -13,14 +21,214 @@ app.controller( 'BalanceCtrl',
 			      return d.amount;
 			  };
 		      };
+		      $scope.toolTipContentFunction = function() {
+			  return function( key, x, y, e, graph ) {
+			      return '<h4>' + key + '</h4>' +
+				  '<h3>' + x + ' €</h3>';
+			  };
+		      };
+		      $scope.colorsIncome = function() {
+			  var colors = [
+			      '#00ff00', //Income:CAF:APL
+			      '#11ff11', //Income:CAF:PAJE
+			      '#22ff22', //Income:CAF:PAJE:garde
+			      '#33ff33', //Income:CAF:RSA
+			      '#44ff44', //Income:Change
+			      '#55ff55', //Income:Ebay
+			      '#66ff66', //Income:Found
+			      '#77ff77', //Income:Gift
+			      '#88ff88', //Income:Hang
+			      '#99ff99', //Income:Impôts
+			      '#aaffaa', //Income:Intérêts
+			      '#bbffbb', //Income:Isaac
+			      '#ccffcc', //Income:Iteal
+			      '#ddffdd', //Income:Juliette
+			      '#eeffee', //Income:Mutuelle
+			      '#ffffff', //Income:Rania
+			      '#f0fff0', //Income:Remboursement
+			      '#f1fff1', //Income:Sécu
+			      '#f2fff2', //Income:Vente
+			      '#f3fff3', //Income:correction
+			      '#f4fff4', //Income:réduction
+			      '#f5fff5', //Income:salaire
+			  ];
+			  return function( d, i ) {
+			      return colors[i];
+			  };
+		      };
+		      $scope.colorsExpenses = function() {
+			  var colors = [
+			      '#ff0000',
+			      '#ff1111',
+			      '#ff2222',
+			      '#ff3333',
+			      '#ff4444',
+			      '#ff5555',
+			      '#ff6666',
+			      '#ff7777',
+			      '#ff8888',
+			      '#ff9999',
+			      '#ffAAaa',
+			      '#ffBBbb',
+			      '#ffCCcc',
+			      '#ffDDdd',
+			      '#ffEEee',
+			      '#ffFFff',
+			      '#ff1010',
+			      '#ff1111',
+			      '#ff1212',
+			      '#ff1313',
+			      '#ff1414',
+			      '#ff1515',
+			      '#ff1616',
+			      '#ff1717',
+			      '#ff1818',
+			      '#ff1919',
+			      '#ff1A1A',
+			      '#ff1B1B',
+			      '#ff1C1C',
+			      '#ff1D1D',
+			      '#ff1E1E',
+			      '#ff1F1F',
+			      '#ff2020',
+			      '#ff2121',
+			      '#ff2222',
+			      '#ff2323',
+			      '#ff2424',
+			      '#ff2525',
+			      '#ff2626',
+			      '#ff2727',
+			      '#ff2828',
+			      '#ff2929',
+			      '#ff2A2A',
+			      '#ff2B2B',
+			      '#ff2C2C',
+			      '#ff2D2D',
+			      '#ff2E2E',
+			      '#ff2F2F',
+			      '#ff3030',
+			      '#ff3131',
+			      '#ff3232',
+			      '#ff3333',
+			      '#ff3434',
+			      '#ff3535',
+			      '#ff3636',
+			      '#ff3737',
+			      '#ff3838',
+			      '#ff3939',
+			      '#ff3A3A',
+			      '#ff3B3B',
+			      '#ff3C3C',
+			      '#ff3D3D',
+			      '#ff3E3E',
+			      '#ff3F3F',
+			      '#ff4040',
+			      '#ff4141',
+			      '#ff4242',
+			      '#ff4343',
+			      '#ff4444',
+			      '#ff4545',
+			      '#ff4646',
+			      '#ff4747',
+			      '#ff4848',
+			      '#ff4949',
+			      '#ff4A4A',
+			      '#ff4B4B',
+			      '#ff4C4C',
+			      '#ff4D4D',
+			      '#ff4E4E',
+			      '#ff4F4F',
+			      '#ff5050',
+			      '#ff5151',
+			      '#ff5252',
+			      '#ff5353',
+			      '#ff5454',
+			      '#ff5555',
+			      '#ff5656',
+			      '#ff5757',
+			      '#ff5858',
+			      '#ff5959',
+			      '#ff5A5A',
+			      '#ff5B5B',
+			      '#ff5C5C',
+			      '#ff5D5D',
+			      '#ff5E5E',
+			      '#ff5F5F',
+			      '#ff6060',
+			      '#ff6161',
+			      '#ff6262',
+			      '#ff6363',
+			      '#ff6464',
+			      '#ff6565',
+			      '#ff6666',
+			      '#ff6767',
+			      '#ff6868',
+			      '#ff6969',
+			      '#ff6A6A',
+			      '#ff6B6B',
+			      '#ff6C6C',
+			      '#ff6D6D',
+			      '#ff6E6E',
+			      '#ff6F6F',
+			      '#ff7070',
+			      '#ff7171',
+			      '#ff7272',
+			      '#ff7373',
+			      '#ff7474',
+			      '#ff7575',
+			      '#ff7676',
+			      '#ff7777',
+			      '#ff7878',
+			      '#ff7979',
+			      '#ff7A7A',
+			      '#ff7B7B',
+			      '#ff7C7C',
+			      '#ff7D7D',
+			      '#ff7E7E',
+			      '#ff7F7F',
+			      '#ff8080',
+			      '#ff8181',
+			      '#ff8282',
+			      '#ff8383',
+			      '#ff8484',
+			      '#ff8585',
+			      '#ff8686',
+			      '#ff8787',
+			      '#ff8888',
+			      '#ff8989',
+			      '#ff8A8A',
+			      '#ff8B8B',
+			      '#ff8C8C',
+			      '#ff8D8D'
+			  ];
+			  return function( d, i ) {
+			      return colors[i];
+			  };
+		      };
+
 		      $scope.balance = { expenses: [],
 					 income: [] };
-		      $http.get( '/api/ledger/balance?period=' + now.getFullYear() + '-' + now.getMonth() + '&categories=Expenses' )
-			  .then( function( response ) {
-			      $scope.balance.expenses = response.data;
-			  } );
-		      $http.get( '/api/ledger/balance?period=' + now.getFullYear() + '-' + now.getMonth() + '&categories=Income' )
-			  .then( function( response ) {
-			      $scope.balance.income = response.data;
-			  } );
+
+		      var retrieve_data = function() {
+			  $http.get( '/api/ledger/balance?period='
+				     + $scope.now.year()
+				     + '-'
+				     + ( $scope.now.month() + 1 )
+				     + '&categories=Expenses' )
+			      .then( function( response ) {
+				  $scope.balance.expenses = response.data;
+				  $scope.balance.expenses_total = _(response.data).reduce( function( memo, account ){ return memo + account.amount; }, 0 );
+			      } );
+			  $http.get( '/api/ledger/balance?period='
+				     + $scope.now.year()
+				     + '-'
+				     + ( $scope.now.month() + 1 )
+				     + '&categories=Income' )
+			      .then( function( response ) {
+				  $scope.balance.income = response.data;
+				  $scope.balance.income_total = _(response.data).reduce( function( memo, account ){ return memo + account.amount; }, 0 );
+			      } );
+		      };
+
+		      retrieve_data();
 		  }]);
diff --git a/public/app/js/main/filters/formatLedgerEntries.js b/public/app/js/main/filters/formatLedgerEntries.js
new file mode 100644
index 00000000..457d9c9b
--- /dev/null
+++ b/public/app/js/main/filters/formatLedgerEntries.js
@@ -0,0 +1,17 @@
+app.filter( 'formatLedgerEntries',
+	    [ '$sce',
+	      function( $sce ) {
+		return function( entries ) {
+		    return $sce.trustAsHtml( '<table><tr>'
+					     + entries
+					     .map( function( entry ) {
+						 return '<td>'
+						     + entry.account
+						     + '</td><td>'
+						     + entry.amount
+						     +' €</td>';
+					     } )
+					     .join( '</tr><tr>' )
+					     + '</tr></table>' );
+		};
+	    } ] );
diff --git a/public/app/js/main/templates/balance.tpl.html b/public/app/js/main/templates/balance.tpl.html
index 3f7d290f..2a204b31 100644
--- a/public/app/js/main/templates/balance.tpl.html
+++ b/public/app/js/main/templates/balance.tpl.html
@@ -1,25 +1,70 @@
-<p>Balance</p>
-<nvd3-pie-chart
-   data="balance.expenses"
-   x="xFunction()"
-   y="yFunction()"
-   id="ExpensesPie"
-   width="550"
-   height="350"
-   showLabels="true"
-   tooltips="true">
-  <svg></svg>
-</nvd3-pie-chart>
+<div class="row-fluid">
 
+  <div class="col-md-12 date">
+    <h2>
+      <button type="button" class="btn btn-primary"
+	      data-ng-click="previous_period()">
+	<span class="glyphicon glyphicon-chevron-left"></span>
+      </button>
+      <span>{{now | amDateFormat:'MMMM YYYY'}}</span>
+      <button type="button" class="btn btn-primary"
+	      data-ng-click="next_period()">
+	<span class="glyphicon glyphicon-chevron-right"></span>
+      </button>
+    </h2>
+    <h2 class="balance" data-ng-class="{'positive': balance.expenses_total + balance.income_total < 0, 'negative': balance.expenses_total + balance.income_total > 0}">
+      Balance: {{( balance.expenses_total - balance.income_total * -1 ) * -1 | number:2}} €
+    </h2>
+  </div>
 
-<nvd3-pie-chart
-   data="balance.income"
-   x="xFunction()"
-   y="yFunction()"
-   id="incomePie"
-   width="550"
-   height="350"
-   showLabels="true"
-   tooltips="true">
-  <svg></svg>
-</nvd3-pie-chart>
+  <div class="col-md-6">
+    <div class="panel panel-default">
+      <div class="panel-heading">
+	<h3 class="panel-title">Expenses, total = {{balance.expenses_total | number:2}} €</h3>
+      </div>
+      <div class="panel-body">
+	<nvd3-pie-chart
+	   data="balance.expenses"
+	   x="xFunction()"
+	   y="yFunction()"
+	   id="ExpensesPie"
+	   height="550"
+	   color="colorsExpenses()"
+	   tooltips="true"
+	   tooltipcontent="toolTipContentFunction()"
+	   showLabels="true"
+	   labelType="value">
+	  <svg></svg>
+	</nvd3-pie-chart>
+      </div>
+      <div class="panel-footer" data-ng-bind-html="balance.expenses | formatLedgerEntries">
+      </div>
+    </div>
+  </div>
+
+  <div class="col-md-6">
+    <div class="panel panel-default">
+      <div class="panel-heading">
+	<h3 class="panel-title">Income, total = {{balance.income_total | number:2}} €</h3>
+      </div>
+      <div class="panel-body">
+	<nvd3-pie-chart
+	   data="balance.income"
+	   x="xFunction()"
+	   y="yFunction()"
+	   id="incomePie"
+	   height="550"
+	   color="colorsIncome()"
+	   tooltips="true"
+	   tooltipcontent="toolTipContentFunction()"
+	   showLabels="true"
+	   labelType="value">
+	  <svg></svg>
+	</nvd3-pie-chart>
+      </div>
+      <div class="panel-footer" data-ng-bind-html="balance.income | formatLedgerEntries">
+      </div>
+    </div>
+  </div>
+
+</div>
diff --git a/public/bower.json b/public/bower.json
index 99f24e50..e460fada 100644
--- a/public/bower.json
+++ b/public/bower.json
@@ -11,6 +11,8 @@
     "angular-mocks": "latest",
     "html5-boilerplate": "latest",
     "angularjs-nvd3-directives": "latest",
-      "angular-bootstrap": "latest"
+    "angular-bootstrap": "latest",
+    "bootstrap": "~3.2.0",
+    "angular-moment": "~0.8.0"
   }
 }