diff --git a/public/index.html b/public/index.html
index 8dbebb7..59096fc 100644
--- a/public/index.html
+++ b/public/index.html
@@ -8,6 +8,35 @@
 </head>
 
 <body>
+<nav class="navbar navbar-default navbar-static-top" role="navigation">
+    <div class="container-fluid">
+        <!-- Brand and toggle get grouped for better mobile display -->
+        <div class="navbar-header">
+            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
+                <span class="sr-only">Toggle navigation</span>
+                <span class="icon-bar"></span>
+                <span class="icon-bar"></span>
+                <span class="icon-bar"></span>
+            </button>
+            <a class="navbar-brand" href="#">DuplicateFinder</a>
+        </div>
+
+        <!-- Collect the nav links, forms, and other content for toggling -->
+        <div class="collapse navbar-collapse">
+            <ul class="nav navbar-nav">
+                <li class="active"><a href="#">Finder</a></li>
+            </ul>
+            <ul class="nav navbar-nav navbar-right">
+                <li ng-if="access_token == ''">
+                    <a href="#/login" class="dropdown-toggle" data-toggle="dropdown"><b>Login With Spotify</b></a>
+                </li>
+                <li ng-if="access_token != ''">
+                    <a href="#/refresh-token" class="dropdown-toggle" data-toggle="dropdown"><b>Refresh my token</b></a>
+                </li>
+            </ul>
+        </div><!-- /.navbar-collapse -->
+    </div><!-- /.container-fluid -->
+</nav>
 <div class="container">
     <h1>Duplicates finder
         <button class="btn btn-default has-spinner" id="obtain-new-token">
@@ -72,6 +101,7 @@
 
 <script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0-alpha.1/handlebars.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.4/angular.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.js"></script>
 <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
         integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
diff --git a/public/script.js b/public/script.js
index a82f26b..d4aa38d 100644
--- a/public/script.js
+++ b/public/script.js
@@ -2,10 +2,43 @@
 
 (function(){
 
-    var app = angular.module('app',[]);
+    var app = angular.module('app',['ui.router']);
 
-    app.controller('AuthCtrl',['$scope', function($scope){
+    app.config(['$stateProvider','$urlRouterProvider',function($stateProvider, $urlRouterProvider){
+        $stateProvider
+            .state('finder_public',{
+                templateUrl:'partials/home.html',
+                url: '/',
+                controller: 'HomeCtrl'
+            })
+            .state('finder',{
+                templateUrl:'partials/logged.html',
+                url: '/finder',
+                controller: 'MainCtrl'
+            })
+            .state('finder.playlist',{
+                url: '/playlist',
+                views: {
+                    playlist:{
+                        templateUrl: 'partials/playlist.html',
+                        controller: 'PlaylistCtrl'
+                    }
+                }
+            })
+            .state('finder.playlist.dups',{
+                url: '/playlist/:id',
+                views: {
+                    dups: {
+                        templateUrl: 'partials/dups.html',
+                        controller: 'DupsCtrl'
+                    }
+                }
+            })
+    }]);
 
+    app.controller('AuthCtrl',['$scope', '$rootScope', function($scope, $rootScope){
+        $rootScope.access_token = "Bonjour";
+        $rootScope.refresh_token = "Bonjour2";
     }])
 
 })();
