diff --git a/gulpfile.js b/gulpfile.js
index eef5f43160..fc430ecaf7 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -65,6 +65,10 @@ gulp.task('lib', ['clean:lib'], function () {
             src: paths.npmDir + 'angular/angular*.js',
             dest: paths.libDir + 'angular'
         },
+        {
+            src: paths.npmDir + 'angular-animate/angular-animate.js',
+            dest: paths.libDir + 'angular-animate'
+        },
         {
             src: paths.npmDir + 'angular-ui-bootstrap/dist/*tpls*.js',
             dest: paths.libDir + 'angular-ui-bootstrap'
diff --git a/src/popup/app/app.js b/src/popup/app/app.js
index 9576bda24c..ea4f9b958a 100644
--- a/src/popup/app/app.js
+++ b/src/popup/app/app.js
@@ -2,6 +2,7 @@
     .module('bit', [
         'ui.router',
         'angular-jwt',
+        'ngAnimate',
 
         'bit.services',
 
diff --git a/src/popup/app/config.js b/src/popup/app/config.js
index a102933911..389ba24838 100644
--- a/src/popup/app/config.js
+++ b/src/popup/app/config.js
@@ -30,20 +30,23 @@
                 url: "/login",
                 controller: 'accountsLoginController',
                 templateUrl: "app/accounts/views/accountsLogin.html",
-                data: { authorize: false }
+                data: { authorize: false },
+                params: { animation: null }
             })
             .state('twoFactor', {
                 url: "/two-factor",
                 controller: 'accountsLoginController',
                 templateUrl: "app/accounts/views/accountsLoginTwoFactor.html",
-                data: { authorize: false }
+                data: { authorize: false },
+                params: { animation: null }
             })
 
             .state('tabs', {
                 url: "/tab",
                 abstract: true,
                 templateUrl: "app/global/tabs.html",
-                data: { authorize: true }
+                data: { authorize: true },
+                params: { animation: null }
             })
                 .state('tabs.current', {
                     url: "/current",
@@ -70,19 +73,22 @@
                 url: "/view-site?siteId",
                 templateUrl: "app/vault/views/vaultViewSite.html",
                 controller: 'vaultViewSiteController',
-                data: { authorize: true }
+                data: { authorize: true },
+                params: { animation: null }
             })
             .state('addSite', {
                 url: "/add-site",
                 templateUrl: "app/vault/views/vaultAddSite.html",
                 controller: 'vaultAddSiteController',
-                data: { authorize: true }
+                data: { authorize: true },
+                params: { animation: null }
             })
             .state('editSite', {
                 url: "/edit-site?siteId",
                 templateUrl: "app/vault/views/vaultEditSite.html",
                 controller: 'vaultEditSiteController',
-                data: { authorize: true }
+                data: { authorize: true },
+                params: { animation: null }
             });
     })
     .run(function ($rootScope, userService, loginService, tokenService, $state) {
diff --git a/src/popup/app/global/mainController.js b/src/popup/app/global/mainController.js
index 0d42af1024..40ce959ac2 100644
--- a/src/popup/app/global/mainController.js
+++ b/src/popup/app/global/mainController.js
@@ -2,9 +2,17 @@
     .module('bit.global')
 
     .controller('mainController', function ($scope, $state) {
-        $scope.currentYear = new Date().getFullYear();
+        var self = this;
+        self.currentYear = new Date().getFullYear();
+        self.animation = '';
 
         $scope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) {
-            
+            if (toParams.animation) {
+                self.animation = toParams.animation;
+                return;
+            }
+            else {
+                self.animation = '';
+            }
         });
     });
diff --git a/src/popup/app/vault/vaultModule.js b/src/popup/app/vault/vaultModule.js
index f223546912..02b6c4f5a2 100644
--- a/src/popup/app/vault/vaultModule.js
+++ b/src/popup/app/vault/vaultModule.js
@@ -1,2 +1,2 @@
 angular
-    .module('bit.vault', []);
+    .module('bit.vault', ['ngAnimate']);
diff --git a/src/popup/app/vault/views/vault.html b/src/popup/app/vault/views/vault.html
index fb50773b5b..2a7b657acf 100644
--- a/src/popup/app/vault/views/vault.html
+++ b/src/popup/app/vault/views/vault.html
@@ -1,5 +1,5 @@
 <div class="header">
-    <a class="right" ui-sref="addSite"><i class="fa fa-plus fa-lg"></i></a>
+    <a class="right" ui-sref="addSite({animation: 'in-slide-up'})"><i class="fa fa-plus fa-lg"></i></a>
     <div class="title">My Vault</div>
 </div>
 <div class="content content-tabs">
@@ -8,7 +8,7 @@
             <div class="list-item-header">
                 <i class="fa fa-folder-open"></i> {{folder.name}}
             </div>
-            <a ui-sref="viewSite({siteId: site.id})" class="list-item list-item-condensed" ng-repeat="site in folderSites = (sites | filter: { folderId: folder.id } | orderBy: ['name', 'username'])">
+            <a ui-sref="viewSite({siteId: site.id, animation: 'in-slide-up'})" class="list-item list-item-condensed" ng-repeat="site in folderSites = (sites | filter: { folderId: folder.id } | orderBy: ['name', 'username'])">
                 <span class="text">{{site.name}}</span>
                 <span class="detail">{{site.username}}</span>
                 <!--<span class="btn btn-link pull-right"><i class="fa fa-ellipsis-h"></i></span>-->
diff --git a/src/popup/app/vault/views/vaultAddSite.html b/src/popup/app/vault/views/vaultAddSite.html
index 927ac0cede..c9093f6c31 100644
--- a/src/popup/app/vault/views/vaultAddSite.html
+++ b/src/popup/app/vault/views/vaultAddSite.html
@@ -1,5 +1,5 @@
 <div class="header">
-    <a ui-sref="tabs.vault" class="left">Close</a>
+    <a ui-sref="tabs.vault({animation: 'out-slide-down'})" class="left">Close</a>
     <a href="#" class="right">Save</a>
     <div class="title">Add Site</div>
 </div>
diff --git a/src/popup/app/vault/views/vaultViewSite.html b/src/popup/app/vault/views/vaultViewSite.html
index ec514e4476..c89a19e21f 100644
--- a/src/popup/app/vault/views/vaultViewSite.html
+++ b/src/popup/app/vault/views/vaultViewSite.html
@@ -1,5 +1,5 @@
 <div class="header">
-    <a ui-sref="tabs.vault" class="left">Close</a>
+    <a ui-sref="tabs.vault({animation: 'out-slide-down'})" class="left">Close</a>
     <a href="#" class="right">Edit</a>
     <div class="title">View Site</div>
 </div>
diff --git a/src/popup/index.html b/src/popup/index.html
index f2bec79d7e..f412162204 100644
--- a/src/popup/index.html
+++ b/src/popup/index.html
@@ -13,6 +13,7 @@
     <script src="../lib/bootstrap/js/bootstrap.js"></script>
 
     <script src="../lib/angular/angular.js"></script>
+    <script src="../lib/angular-animate/angular-animate.js"></script>
     <script src="../lib/angular-ui-router/angular-ui-router.js"></script>
     <script src="../lib/angular-jwt/angular-jwt.js"></script>
 
@@ -52,7 +53,7 @@
     <script src="app/tools/toolsModule.js"></script>
     <script src="app/tools/toolsController.js"></script>
 </head>
-<body ng-controller="mainController as main">
-    <div ui-view></div>
+<body ng-controller="mainController as main" class="{{main.animation}}">
+    <div ui-view class="main-view"></div>
 </body>
 </html>
diff --git a/src/popup/less/animations.less b/src/popup/less/animations.less
new file mode 100644
index 0000000000..749c181da2
--- /dev/null
+++ b/src/popup/less/animations.less
@@ -0,0 +1,51 @@
+.in-slide-up {
+    .main-view.ng-enter,
+    .main-view.ng-leave {
+        -webkit-transition: all 0.4s ease;
+        transition: all 0.4s ease;
+    }
+
+    .main-view.ng-enter {
+        top: 100%;
+        z-index: 990;
+    }
+
+    .main-view.ng-enter.ng-enter-active {
+        top: 0;
+    }
+
+    .main-view.ng-leave {
+        top: 0;
+        z-index: 970;
+    }
+
+    .main-view.ng-leave.ng-leave-active {
+        top: 0;
+    }
+}
+
+.out-slide-down {
+    .main-view.ng-enter,
+    .main-view.ng-leave {
+        -webkit-transition: all 0.4s ease;
+        transition: all 0.4s ease;
+    }
+
+    .main-view.ng-enter {
+        top: 0;
+        z-index: 970;
+    }
+
+    .main-view.ng-enter.ng-enter-active {
+        top: 0;
+    }
+
+    .main-view.ng-leave {
+        top: 0;
+        z-index: 990;
+    }
+
+    .main-view.ng-leave.ng-leave-active {
+        top: 100%;
+    }
+}
diff --git a/src/popup/less/popup.less b/src/popup/less/popup.less
index 559fc29564..8cb6e2dc61 100644
--- a/src/popup/less/popup.less
+++ b/src/popup/less/popup.less
@@ -1,6 +1,7 @@
 @import "../../../node_modules/bootstrap/less/bootstrap.less";
 @import "variables.less";
 @import "components.less";
+@import "animations.less";
 
 body {
     width: 320px;
@@ -8,6 +9,13 @@ body {
     background-color: @background-color;
 }
 
+.main-view {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    z-index: 980;
+}
+
 .content {
     position: absolute;
     top: 44px;
@@ -15,6 +23,7 @@ body {
     left: 0;
     right: 0;
     overflow: auto;
+    background-color: @background-color;
 
     &.content-tabs {
         bottom: 55px;