diff --git a/public/app/index.html b/public/app/index.html
index 6238e145..6694aff1 100644
--- a/public/app/index.html
+++ b/public/app/index.html
@@ -14,8 +14,6 @@
   <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="/bower_components/angular-loading-bar/build/loading-bar.min.css">
   <link type="text/css" rel="stylesheet" href="/bower_components/ng-table/ng-table.min.css">
   <link type="text/css" rel="stylesheet" href="/bower_components/angular-material/angular-material.min.css">
@@ -23,7 +21,7 @@
   <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>
-<body>
+<body layout="vertical" layout-fill>
 
   <!--[if lt IE 7]>
   <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
@@ -46,8 +44,6 @@
   <script src="/bower_components/angular-ui-router/release/angular-ui-router.js"></script>
   <script src="/bower_components/angular-material/angular-material.min.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>
   <script src="/bower_components/angular-loading-bar/build/loading-bar.min.js"></script>
   <script src="/bower_components/ng-table/ng-table.min.js"></script>
diff --git a/public/app/js/controllers/BalanceCtrl.js b/public/app/js/controllers/BalanceCtrl.js
index c51622d1..1a5bbf9e 100644
--- a/public/app/js/controllers/BalanceCtrl.js
+++ b/public/app/js/controllers/BalanceCtrl.js
@@ -14,7 +14,7 @@ app.controller( 'BalanceCtrl',
 		      $scope.toolTipContentFunction = function() {
 			  return function( key, x, y, e, graph ) {
 			      var details = $scope.balance.details[ key ];
-			      return '<h3>' + details.key + '</h3>'
+			      return '<material-content><h3>' + details.key + '</h3>'
 				  + '<table>'
 				  + _(details.values).map( function( transaction ) {
 				      return '<tr><td>'
@@ -24,7 +24,7 @@ app.controller( 'BalanceCtrl',
 					  + transaction.currency + '</td></tr>';
 				  }).join( '' )
 				  + '<tr><th></th><th>Total :</th><th>' + x + ' €</th></tr>'
-				  + '</table>';
+				  + '</table></material-content>';
 			  };
 		      };
 
@@ -84,18 +84,22 @@ app.controller( 'BalanceCtrl',
 			      period = period + ' to ' + to.year() + '-' + ( to.month() + 1 ) + '-' + to.date();
 			  }
 
-			  $scope.balance = { expenses: [],
-					     income: [],
+			  $scope.balance = { buckets: [ { name: 'Expenses',
+							  data: [],
+							  total: 0 },
+							{ name: 'Income',
+							  data: [],
+							  total: 0 } ],
 					     details: {} };
 
 			  $http.get( '/api/ledger/balance',
 				     { params: { period: period,
 						 categories: 'Expenses' } } )
 			      .then( function( response ) {
-				  $scope.balance.expenses = _(response.data).sortBy( function( account ) {
+				  $scope.balance.buckets[ 0 ].data = _(response.data).sortBy( function( account ) {
 				      return 1 / account.amount;
 				  } );
-				  _($scope.balance.expenses).each(
+				  _($scope.balance.buckets[ 0 ].data).each(
 				      function( account ) {
 					  $http.get( '/api/ledger/register',
 						     { params: { period: period,
@@ -104,23 +108,23 @@ app.controller( 'BalanceCtrl',
 						  $scope.balance.details[ account.account ] = response.data;
 					      } );
 				      } );
-				  $scope.balance.expenses_total = _(response.data).reduce( function( memo, account ){ return memo + account.amount; }, 0 );
+				  $scope.balance.buckets[ 0 ].total = _(response.data).reduce( function( memo, account ){ return memo + account.amount; }, 0 );
 			      } );
 			  $http.get( '/api/ledger/balance',
 				     { params: { period: period,
 						 categories: 'Income' } } )
 
 			      .then( function( response ) {
-				  $scope.balance.income = _(response.data)
+				  $scope.balance.buckets[ 1 ].data = _(response.data)
 				      .map( function( account ) {
 					  account.amount = account.amount * -1;
 					  return account;
 				      } );
-				  $scope.balance.income = _($scope.balance.income)
+				  $scope.balance.buckets[ 1 ].data = _($scope.balance.buckets[ 1 ].data)
 				      .sortBy( function( account ) {
 					  return account.amount;
 				      } );
-				  _($scope.balance.income)
+				  _($scope.balance.buckets[ 1 ].data)
 				      .each( function( account ) {
 					  $http.get( '/api/ledger/register',
 						     { params: { period: period,
@@ -129,7 +133,7 @@ app.controller( 'BalanceCtrl',
 						  $scope.balance.details[ account.account ] = response.data;
 					      } );
 				      } );
-				  $scope.balance.income_total = _(response.data)
+				  $scope.balance.buckets[ 1 ].total = _(response.data)
 				      .reduce( function( memo, account ){ return memo + account.amount; }, 0 );
 			      } );
 		      };
diff --git a/public/app/js/templates/balance.tpl.html b/public/app/js/templates/balance.tpl.html
index 9072cb6d..f061c344 100644
--- a/public/app/js/templates/balance.tpl.html
+++ b/public/app/js/templates/balance.tpl.html
@@ -1,50 +1,46 @@
-<div class="row-fluid">
+<div layout="vertical">
 
-  <div class="col-md-12 date">
+  <div class="date">
     <h2>
       From {{from_date | date:'longDate'}} <span data-ng-if="to_date">to {{to_date | date:'longDate'}}</span>
-
-      <div class="pull-right">
-	<button class="btn btn-default" data-ng-click="reset_offset()">Aujourd'hui</button>
-	<div class="btn-group">
-	  <button class="btn btn-default"
-		  data-ng-click="before()"
-		  data-ng-class="{'disabled': period_offset == 0}"><span class="glyphicon glyphicon-chevron-left"></span></button>
-	  <button class="btn btn-default"
-		  data-ng-click="after()"
-		  data-ng-class="{'disabled': period_offset == dates_salaries.length - 1}"><span class="glyphicon glyphicon-chevron-right"></span></button>
-	</div>
-      </div>
     </h2>
-    <h2 class="balance" data-ng-class="{'negative': balance.income_total - balance.expenses_total < 0, 'positive': balance.income_total - balance.expenses_total > 0}">
-      Balance: {{( balance.income_total - balance.expenses_total ) | number:2}} €
+
+    <div layout="horizontal" layout-align="end">
+      <material-button class="material-button-raised material-button-colored" data-ng-click="reset_offset()">Now</material-button>
+      <material-button class="material-button-fab"
+		       data-ng-click="before()"
+		       data-ng-class="{'disabled': period_offset == 0}">prev</span></material-button>
+      <material-button class="material-button-fab"
+		       data-ng-click="after()"
+		       data-ng-class="{'disabled': period_offset == dates_salaries.length - 1}">next</material-button>
+    </div>
+    <h2 class="balance" data-ng-class="{'negative': balance.buckets[1].total - balance.buckets[0].total < 0, 'positive': balance.buckets[1].total - balance.buckets[0].total > 0}">
+      Balance: {{( balance.buckets[1].total - balance.buckets[0].total ) | number:2}} €
     </h2>
   </div>
 
-  <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="300"
-	   margin="{left:0,top:0,bottom:0,right:0}"
-	   color="color()"
-	   tooltips="true"
-	   tooltipcontent="toolTipContentFunction()"
-	   showLabels="true"
-	   labelType="value">
+  <div layout="horizontal" layout-padding>
+    <div flex data-ng-repeat="bucket in balance.buckets">
+      <material-toolbar class="material-theme-light">
+	<h3>{{bucket.name}}, total = {{bucket.total | number:2}} €</h3>
+      </material-toolbar>
+      <material-content>
+	<nvd3-pie-chart data="bucket.data"
+			x="xFunction()"
+			y="yFunction()"
+			height="300"
+			margin="{left:0,top:0,bottom:0,right:0}"
+			color="color()"
+			tooltips="true"
+			tooltipcontent="toolTipContentFunction()"
+			showLabels="true"
+			labelType="value">
 	  <svg></svg>
 	</nvd3-pie-chart>
-      </div>
-      <div class="panel-footer">
+      </material-content>
+      <material-content>
 	<table data-ng-table="tableParams" class="table">
-	  <tr data-ng-repeat="account in balance.expenses"
+	  <tr data-ng-repeat="account in bucket.data"
 	      data-ng-class="{'even': $even, 'odd': $odd}"
 	      style="border-left:10px solid {{coloring_score( score_account( account.account ) )}};border-right:10px solid {{coloring_score( score_account( account.account ) )}}">
 	    <td data-title="'Account'"
@@ -57,48 +53,8 @@
 	    </td>
 	  </tr>
 	</table>
-      </div>
+      </material-content>
     </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="300"
-	   margin="{left:0,top:0,bottom:0,right:0}"
-	   color="color()"
-	   tooltips="true"
-	   tooltipcontent="toolTipContentFunction()"
-	   showLabels="true"
-	   labelType="value">
-	  <svg></svg>
-	</nvd3-pie-chart>
-      </div>
-      <div class="panel-footer">
-	<table data-ng-table="tableParams" class="table">
-	  <tr data-ng-repeat="account in balance.income"
-	      data-ng-class="{'even': $even, 'odd': $odd}"
-	      style="border-left:10px solid {{coloring_score( score_account( account.account ) )}};border-right:10px solid {{coloring_score( score_account( account.account ) )}}">
-	    <td data-title="'Account'"
-		style="border-bottom:1px solid {{coloring_score( score_account( account.account ) )}}">
-	      {{account.account}}
-	    </td>
-	    <td data-title="'Amount'"
-		style="text-align:right;border-bottom:1px solid {{coloring_score( score_account( account.account ) )}}">
-	      {{account.amount | number:2}} €
-	    </td>
-	  </tr>
-	</table>
-      </div>
-    </div>
   </div>
-
 </div>
diff --git a/public/app/js/templates/main.tpl.html b/public/app/js/templates/main.tpl.html
index 9b00b9aa..31800c0d 100644
--- a/public/app/js/templates/main.tpl.html
+++ b/public/app/js/templates/main.tpl.html
@@ -1,6 +1 @@
-
-<div class="container">
-  <div class="row">
-    <div ui-view></div>
-  </div>
-</div>
+<div ui-view></div>
diff --git a/public/app/js/templates/navbar.tpl.html b/public/app/js/templates/navbar.tpl.html
index c1758c61..19e99b5c 100644
--- a/public/app/js/templates/navbar.tpl.html
+++ b/public/app/js/templates/navbar.tpl.html
@@ -1,11 +1,7 @@
-
-<div class="container">
-  <div class="row">
-    <ul class="nav">
-      <li ng-repeat="item in items" class="navbar-item" ui-sref-active="navbar-active">
-        <a ui-sref="app.{{ item | lowercase }}">{{ item }}</a>
-      </li>
-    </ul>
-    
-  </div>
-</div>
+<header>
+  <ul>
+    <li ng-repeat="item in items" ui-sref-active="navbar-active">
+      <a ui-sref="app.{{ item | lowercase }}">{{ item }}</a>
+    </li>
+  </ul>
+</header>
