diff --git a/app-src/styles/_variables.scss b/app-src/styles/_variables.scss
index e091b54532..443ffce47d 100644
--- a/app-src/styles/_variables.scss
+++ b/app-src/styles/_variables.scss
@@ -26,6 +26,8 @@ $layout-gt-lg: 1920px;
 
 $ease-in-out-quint: cubic-bezier(.38, .04, .35, .96);
 $transition-duration-xs: 200ms;
-$transition-duration-s: 400ms;
-$transition-duration-m: 600ms;
-$transition-duration-l: 800ms;
\ No newline at end of file
+$transition-duration-s: 250ms;
+$transition-duration-m: 300ms;
+$transition-duration-l: 600ms;
+
+$page-transition-duration: $transition-duration-s;
\ No newline at end of file
diff --git a/app-src/styles/components/_ui-view.scss b/app-src/styles/components/_ui-view.scss
index e5f80a4ffc..4f85d7bb53 100644
--- a/app-src/styles/components/_ui-view.scss
+++ b/app-src/styles/components/_ui-view.scss
@@ -3,30 +3,42 @@
   height: 65px;
 }
 
-//[ui-view].ng-leave,
+$this-transition-duration: $page-transition-duration;
 [ui-view].ng-enter {
-  position: absolute;
+  top: 0;
   left: 0;
   right: 0;
-  transition: all .3s ease-in-out;
+  position: absolute;
+  transition: all $this-transition-duration $ease-in-out-quint;
+}
+
+[ui-view].ng-leave {
+  transition: all $this-transition-duration $ease-in-out-quint;
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
 }
 
 [ui-view].ng-enter {
   opacity: 0;
-  //transform: translate3d(0, -100%, 0);
+  transform: scale(0.9);
 }
 
 [ui-view].ng-enter-active {
   opacity: 1;
-  //transform: translate3d(0, 0, 0);
+  transform: scale(1);
 }
 
 [ui-view].ng-leave {
-  //opacity: 1;
-  //transform: translate3d(0, 0, 0);
+  opacity: 1;
+  transform: scale(1);
 }
 
 [ui-view].ng-leave-active {
-  //opacity: 0;
-  //transform: translate3d(100%, 0, 0);
+  opacity: 0;
+  transform: scale(0.85);
 }
\ No newline at end of file