diff --git a/app.js b/app.js
index 4cb22b7..434b9c0 100644
--- a/app.js
+++ b/app.js
@@ -91,16 +91,9 @@ app.get('/callback', function (req, res) {
                     refresh_token = body.refresh_token;
 
                 // we can also pass the token to the browser to make requests from there
-                res.redirect('/#' +
-                    querystring.stringify({
-                        access_token: access_token,
-                        refresh_token: refresh_token
-                    }));
+                res.send('<script>window.token = { access_token: "'+access_token+'", refresh_token: "'+refresh_token+'" };</script>')
             } else {
-                res.redirect('/#' +
-                    querystring.stringify({
-                        error: 'invalid_token'
-                    }));
+                res.send('<script>window.token = { access_token: "", refresh_token: "" };</script>')
             }
         });
     }
diff --git a/public/index.html b/public/index.html
index 7b02799..dcfc549 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,76 +1,47 @@
 <!doctype html>
-<html>
+<html ng-app="app">
 <head>
     <title>Spotify Duplicate Finder</title>
     <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
     <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css">
     <link rel="stylesheet" href="./style.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
 </head>
 
 <body>
-<div class="container">
-    <h1>Duplicates finder
-        <button class="btn btn-default has-spinner" id="obtain-new-token">
-            Refresh token <span class="spinner"><i class="icon-spin icon-refresh"></i></span>
-        </button>
-        <span id="login">
-            <a href="/login" class="btn btn-lg btn-success">Log in with Spotify</a>
-        </span>
-    </h1>
-    <div id="error"></div>
-    <div id="loggedin">
-        <div id="user-profile">
+<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">
+            <a class="navbar-brand" href="#">DuplicateFinder</a>
         </div>
 
-        <div class="media">
-            <div class="pull-left">
-                <h2 id="playlists-title">Playlists
-                    <button class="btn btn-default has-spinner" id="get-playlists">
-                        Refresh <span class="spinner"><i class="icon-spin icon-refresh"></i></span>
-                    </button>
-                </h2>
-                <div id="playlists">
-                </div>
-            </div>
-            <div class="media-body">
-                <div id="dups">
-                </div>
-            </div>
-        </div>
-    </div>
+        <!-- Collect the nav links, forms, and other content for toggling -->
+        <div>
+            <ul class="nav navbar-nav">
+                <li class="active"><a href="#">Finder</a></li>
+            </ul>
+            <ul class="nav navbar-nav navbar-right" ng-controller="AuthCtrl">
+                <li ng-if="access_token == ''">
+                    <a ng-click="login()" href="#"><b>Login With Spotify</b></a>
+                </li>
+                <li ng-if="access_token != ''">
+                    <a ng-click="refresh()" href="#">Refresh my token</a>
+                </li>
+                <li ng-if="access_token != ''">
+                    <a ng-click="logout()" href="#"><b>Logout</b></a>
+                </li>
+            </ul>
+        </div><!-- /.navbar-collapse -->
+    </div><!-- /.container-fluid -->
+</nav>
+<div class="container">
+    <ui-view></ui-view>
 </div>
 
-<script id="playlists-template" type="text/x-handlebars-template">
-    {{#list playlists}}
-    <a class="pl_item list-group-item has-spinner" href="/pl/{{pl_uid}}/{{pl_id}}">
-        {{pl_name}}
-        <span class="spinner"><i class="icon-spin icon-refresh"></i></span>
-        <i class="glyphicon glyphicon-chevron-right"></i>
-    </a>
-    {{/list}}
-</script>
-
-<script id="user-profile-template" type="text/x-handlebars-template">
-    Logged in as {{display_name}}
-</script>
-
-<script id="dups-template" type="text/x-handlebars-template">
-    <h2>Duplicates in {{pl_name}}</h2>
-    {{message}}
-    {{#list dups}}
-    <div class="list-group-item">{{dup_trackname}} - {{dup_artist}}</div>
-    {{/list}}
-</script>
-
-<script id="error-template" type="text/x-handlebars-template">
-    <div class="alert alert-danger alert-dismissible" role="alert">
-        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
-                aria-hidden="true">&times;</span></button>
-        <strong>{{err_title}}</strong> {{{err_content}}}.
-    </div>
-</script>
-
-<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://cdnjs.cloudflare.com/ajax/libs/ngStorage/0.3.6/ngStorage.min.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/partials/dups.html b/public/partials/dups.html
new file mode 100644
index 0000000..b8b63d7
--- /dev/null
+++ b/public/partials/dups.html
@@ -0,0 +1,8 @@
+<h2>Duplicates in {{playlistName}}</h2>
+<div ng-if="loaded == false">Loading...</div>
+<div ng-if="tracks.length == 0 && loaded">No duplicate found</div>
+<div ng-if="tracks.length > 0 && loaded">
+    <div class="list-group-item" ng-repeat="t in tracks">
+        {{t.track.name}} - <span ng-repeat="artist in t.track.artists">{{artist == t.track.artists[0]?'':', '}}{{artist.name}}</span>
+    </div>
+</div>
\ No newline at end of file
diff --git a/public/partials/home.html b/public/partials/home.html
new file mode 100644
index 0000000..c80bb30
--- /dev/null
+++ b/public/partials/home.html
@@ -0,0 +1 @@
+<p>Please connect to Spotify to access to the app.</p>
\ No newline at end of file
diff --git a/public/partials/logged.html b/public/partials/logged.html
new file mode 100644
index 0000000..050450b
--- /dev/null
+++ b/public/partials/logged.html
@@ -0,0 +1,4 @@
+<div class="container row">
+    <div class="col-md-3"><ui-view name="playlist"></ui-view></div>
+    <div class="col-md-9"><ui-view name="dups"></ui-view></div>
+</div>
\ No newline at end of file
diff --git a/public/partials/playlist.html b/public/partials/playlist.html
new file mode 100644
index 0000000..09b8638
--- /dev/null
+++ b/public/partials/playlist.html
@@ -0,0 +1,8 @@
+<div class="clearfix">
+    <h2 class="pull-left">Playlist</h2>
+</div>
+<div class="list-group ">
+    <a ng-class="current.playlistId == playlist.id?'list-group-item active':'list-group-item'" ng-repeat="playlist in playlists" ng-click="open(playlist)">
+        {{playlist.name}}
+    </a>
+</div>
\ No newline at end of file
diff --git a/public/script.js b/public/script.js
index bdf0496..c139d1a 100644
--- a/public/script.js
+++ b/public/script.js
@@ -1,182 +1,156 @@
 'use strict';
 
-var access_token;
-var refresh_token;
-var error;
+(function(){
 
-var userProfileSource = document.getElementById('user-profile-template').innerHTML,
-    userProfileTemplate = Handlebars.compile(userProfileSource),
-    userProfilePlaceholder = document.getElementById('user-profile');
+    var app = angular.module('app',['ui.router', 'ngStorage']);
 
-var playlistsSource = document.getElementById('playlists-template').innerHTML,
-    playlistsTemplate = Handlebars.compile(playlistsSource),
-    playlistsPlaceholder = document.getElementById('playlists');
-
-var dupsSource = document.getElementById('dups-template').innerHTML,
-    dupsTemplate = Handlebars.compile(dupsSource),
-    dupsPlaceholder = document.getElementById('dups');
-
-var errorSource = document.getElementById('error-template').innerHTML,
-    errorTemplate = Handlebars.compile(errorSource),
-    errorPlaceholder = document.getElementById('error');
-
-(function () {
-
-    /**
-     * Obtains parameters from the hash of the URL
-     * @return Object
-     */
-    function getHashParams() {
-        var hashParams = {};
-        var e, r = /([^&;=]+)=?([^&;]*)/g,
-            q = window.location.hash.substring(1);
-        while (e = r.exec(q)) {
-            hashParams[e[1]] = decodeURIComponent(e[2]);
-        }
-        return hashParams;
-    }
-
-    Handlebars.registerHelper('list', function (items, options) {
-        var out = "<div class='list-group'>";
-
-        for (var i = 0, l = items.length; i < l; i++) {
-            out = out + options.fn(items[i]);
-        }
-
-        return out + "</div>";
-    });
-
-    var params = getHashParams();
-
-    access_token = params.access_token;
-    refresh_token = params.refresh_token;
-    error = params.error;
-
-    if (error) {
-
-        errorPlaceholder.innerHTML = errorTemplate({
-            err_title: 'Error!',
-            err_content: 'There was an error during the authentication. Feel free to <a href="https://github.com/Crocmagnon/Spotify-Duplicate-Finder/issues" class="alert-link">open an issue</a>.'
-        });
-    } else {
-        if (access_token) {
-            getPersonnalInfo(true, userProfilePlaceholder, userProfileTemplate);
-        } else {
-            // render initial screen
-            $('#login').show();
-            $('#loggedin').hide();
-        }
-
-        document.getElementById('get-playlists').addEventListener('click', function () {
-            var button = $(this);
-            button.addClass('loading');
-            $.ajax({
-                url: '/get_playlists',
-                data: {
-                    'access_token': access_token
-                }
-            }).done(function (data) {
-                var pl = data.data.map(function (item) {
-                    return {
-                        pl_uid: item.owner.id,
-                        pl_name: item.name,
-                        pl_id: item.id
-                    }
-                });
-
-                button.removeClass('loading');
-                $('#dups').hide();
-
-                playlistsPlaceholder.innerHTML = playlistsTemplate({
-                    playlists: pl
-                });
+    app.config(['$stateProvider','$urlRouterProvider',function($stateProvider, $urlRouterProvider){
+        $stateProvider
+            .state('finder_public',{
+                templateUrl:'partials/home.html',
+                url: '/',
+                controller: 'HomeCtrl'
             })
-        }, false);
-
-        $(document).on('click', '.pl_item', function (e) {
-            e.preventDefault();
-            var pl_name = $(this).text();
-            $('.pl_item').removeClass('active');
-            var currentElement = $(this);
-            currentElement.addClass('active');
-            currentElement.addClass('loading');
-            $('#dups').hide();
-            $.ajax({
-                url: $(this).attr('href'),
-                data: {
-                    'access_token': access_token
-                }
-            }).done(function (data) {
-                var dups = data.data.map(function (item) {
-                    return {
-                        dup_trackname: item.track.name,
-                        dup_artist: item.track.artists[0].name
-                    }
-                });
-                currentElement.removeClass('loading');
-                if (data.data.length > 0) {
-                    dupsPlaceholder.innerHTML = dupsTemplate({
-                        dups: dups,
-                        pl_name: pl_name
-                    });
-                }
-                else {
-                    dupsPlaceholder.innerHTML = dupsTemplate({
-                        dups: [],
-                        message: "No duplicate found.",
-                        pl_name: pl_name
-                    });
-                }
-                $('#dups').show();
+            .state('finder',{
+                abstract: true,
+                templateUrl:'partials/logged.html',
+                url: '/finder',
+                controller: 'MainCtrl'
             })
-        });
-
-        $(document).on('click', '#obtain-new-token', function () {
-            refreshToken();
-        });
-    }
-})();
-
-function refreshToken() {
-    var button = $('#obtain-new-token');
-    button.addClass('loading');
-    $.ajax({
-        url: '/refresh_token',
-        data: {
-            'refresh_token': refresh_token
-        }
-    }).done(function (data) {
-        access_token = data.access_token;
-        button.removeClass('loading');
-    });
-}
-
-function getPersonnalInfo(first, userProfilePlaceholder, userProfileTemplate) {
-    $.ajax({
-        url: 'https://api.spotify.com/v1/me',
-        headers: {
-            'Authorization': 'Bearer ' + access_token
-        },
-        success: function (response) {
-            userProfilePlaceholder.innerHTML = userProfileTemplate(response);
-
-            $('#login').hide();
-            $('#obtain-new-token').show();
-            $('#loggedin').show();
-        },
-        error: function (response) {
-            if (response.status == 401) {
-                if (first) {
-                    refreshToken();
-                    getPersonnalInfo(false, userProfilePlaceholder, userProfileTemplate);
+            .state('finder.playlist',{
+                url: '/playlist',
+                views: {
+                    playlist:{
+                        templateUrl: 'partials/playlist.html',
+                        controller: 'PlaylistCtrl'
+                    },
+                    dups:{
+                        template: ''
+                    }
                 }
-                else {
-                    errorPlaceholder.innerHTML = errorTemplate({
-                        err_title: 'Error!',
-                        err_content: 'Error while refreshing token. Please <a href="/" class="alert-link">return to login</a>.'
-                    });
+            })
+            .state('finder.playlist.dups',{
+                url: '/:uid/:id/:playlist',
+                views: {
+                    'dups@finder': {
+                        templateUrl: 'partials/dups.html',
+                        controller: 'DupsCtrl'
+                    }
                 }
+            });
+        $urlRouterProvider.otherwise("/");
+    }]);
+
+    app.run(['$rootScope', '$state', '$localStorage',function($rootScope, $state, $localStorage){
+        $rootScope.$storage = $localStorage.$default({
+            access_token: "",
+            refresh_token: ""
+        });
+        $rootScope.access_token = $rootScope.$storage.access_token;
+        $rootScope.refresh_token = $rootScope.$storage.refresh_token;
+
+        $rootScope.$watch('access_token', function(newVal, oldVal, scope){
+
+            $rootScope.$storage.access_token = $rootScope.access_token;
+            $rootScope.$storage.refresh_token = $rootScope.refresh_token;
+
+            if(oldVal == "" && newVal != ""){
+                $state.go('finder.playlist');
+            } else if (oldVal != "" && newVal == ""){
+                $state.go('finder_public');
             }
+        });
+        $rootScope.$on('$stateChangeStart',
+            function (event, toState) {
+                if ((toState.name != "finder_public") && $rootScope.access_token == "") {
+                    event.preventDefault();
+                    $state.go('finder_public');
+                }
+            });
+    }]);
+
+    app.controller("HomeCtrl",['$scope',function($scope){
+
+    }]);
+
+    app.controller("MainCtrl",['$scope', '$state',function($scope, $state){
+        $scope.current = {playlistId: undefined};
+    }]);
+
+    app.controller("PlaylistCtrl",['$scope', '$http', '$state',function($scope, $http, $state){
+        $scope.playlists = [];
+        $scope.load = function(){
+            $http.get('/get_playlists', {
+                params:{
+                    access_token: $scope.access_token
+                }
+            }).then(function(result){
+                var r = result.data;
+                if(r.data){
+                    $scope.playlists = r.data;
+                }
+            })
+        };
+        $scope.open = function(playlist) {
+            $scope.current.playlistId = playlist.id;
+            $state.go('finder.playlist.dups',{uid: playlist.owner.id, id: playlist.id, playlist: encodeURIComponent(playlist.name)})
+        };
+        $scope.load();
+    }]);
+
+    app.controller("DupsCtrl",['$scope', '$stateParams', '$http',function($scope, $stateParams, $http){
+        $scope.uid = $stateParams['uid'];
+        $scope.id = $stateParams['id'];
+        $scope.playlistName = decodeURIComponent($stateParams.playlist);
+        $scope.current.playlistId = $scope.id;
+        $scope.tracks = [];
+        $scope.loaded = false;
+        $scope.load = function () {
+            $http.get('/pl/' + $scope.uid + '/' + $scope.id, {
+                params: {
+                    access_token: $scope.access_token
+                }
+            }).then(function(result) {
+                var r = result.data;
+                $scope.tracks = r.data;
+                $scope.loaded = true;
+            });
+        };
+        $scope.load();
+    }]);
+
+    app.controller('AuthCtrl',['$scope', '$rootScope', '$interval', '$http', function($scope, $rootScope, $interval, $http){
+        $scope.login = function(){
+            var openUrl = '/login';
+            window.$windowScope = $scope;
+            $scope.popup = window.open(openUrl, "Authenticate Account", "width=500, height=500");
+            var checker = $interval(function(){
+                if($scope.popup.closed){
+                    $interval.cancel(checker);
+                } else if ($scope.popup.token != undefined && $scope.popup.token != null) {
+                    $rootScope.access_token = $scope.popup.token.access_token;
+                    $rootScope.refresh_token = $scope.popup.token.refresh_token;
+                    $scope.popup.close();
+                    $interval.cancel(checker);
+                }
+            }, 500);
+            return false;
+        };
+        $scope.logout = function(){
+            $rootScope.refresh_token = "";
+            $rootScope.access_token = "";
+        };
+        $scope.refresh = function(){
+            if($rootScope.refresh_token)
+                $http.get('/refresh_token',{params: {refresh_token: $rootScope.refresh_token}})
+                    .then(function(result){
+                        $rootScope.access_token = result.data.access_token || "";
+                    }, function(failResult){
+                        $rootScope.access_token = "";
+                        $rootScope.refresh_token = "";
+                    });
+            return false;
         }
-    });
-}
+    }])
+
+})();
\ No newline at end of file
