diff --git a/public/themes/arya-blue/theme.css b/public/themes/arya-blue/theme.css
index a08ec211e..949298afa 100644
--- a/public/themes/arya-blue/theme.css
+++ b/public/themes/arya-blue/theme.css
@@ -903,7 +903,7 @@
   background: #1e1e1e;
   color: rgba(255, 255, 255, 0.87);
   border: 1px solid #383838;
-  box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
   border-radius: 3px;
 }
 .p-password-panel .p-password-meter {
@@ -2780,7 +2780,7 @@
   background: #383838;
   color: rgba(255, 255, 255, 0.87);
   padding: 0.5rem 0.5rem;
-  box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
   border-radius: 3px;
 }
 .p-tooltip.p-tooltip-right .p-tooltip-arrow {
diff --git a/public/themes/arya-green/theme.css b/public/themes/arya-green/theme.css
index 5a1c7714d..5b6978142 100644
--- a/public/themes/arya-green/theme.css
+++ b/public/themes/arya-green/theme.css
@@ -903,7 +903,7 @@
   background: #1e1e1e;
   color: rgba(255, 255, 255, 0.87);
   border: 1px solid #383838;
-  box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
   border-radius: 3px;
 }
 .p-password-panel .p-password-meter {
@@ -2780,7 +2780,7 @@
   background: #383838;
   color: rgba(255, 255, 255, 0.87);
   padding: 0.5rem 0.5rem;
-  box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
   border-radius: 3px;
 }
 .p-tooltip.p-tooltip-right .p-tooltip-arrow {
diff --git a/public/themes/arya-orange/theme.css b/public/themes/arya-orange/theme.css
index dcb094b55..929fd3884 100644
--- a/public/themes/arya-orange/theme.css
+++ b/public/themes/arya-orange/theme.css
@@ -903,7 +903,7 @@
   background: #1e1e1e;
   color: rgba(255, 255, 255, 0.87);
   border: 1px solid #383838;
-  box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
   border-radius: 3px;
 }
 .p-password-panel .p-password-meter {
@@ -2780,7 +2780,7 @@
   background: #383838;
   color: rgba(255, 255, 255, 0.87);
   padding: 0.5rem 0.5rem;
-  box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
   border-radius: 3px;
 }
 .p-tooltip.p-tooltip-right .p-tooltip-arrow {
diff --git a/public/themes/arya-purple/theme.css b/public/themes/arya-purple/theme.css
index 392fc90c7..32a59f210 100644
--- a/public/themes/arya-purple/theme.css
+++ b/public/themes/arya-purple/theme.css
@@ -903,7 +903,7 @@
   background: #1e1e1e;
   color: rgba(255, 255, 255, 0.87);
   border: 1px solid #383838;
-  box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
   border-radius: 3px;
 }
 .p-password-panel .p-password-meter {
@@ -2780,7 +2780,7 @@
   background: #383838;
   color: rgba(255, 255, 255, 0.87);
   padding: 0.5rem 0.5rem;
-  box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
   border-radius: 3px;
 }
 .p-tooltip.p-tooltip-right .p-tooltip-arrow {
diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css
index 62b0c6c5e..02b8e7d51 100644
--- a/public/themes/luna-amber/theme.css
+++ b/public/themes/luna-amber/theme.css
@@ -903,7 +903,7 @@
   background: #323232;
   color: #dedede;
   border: 1px solid #191919;
-  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
+  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
   border-radius: 3px;
 }
 .p-password-panel .p-password-meter {
@@ -2763,7 +2763,7 @@
   background: #4c4c4c;
   color: #dedede;
   padding: 0.429rem 0.429rem;
-  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
+  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
   border-radius: 3px;
 }
 .p-tooltip.p-tooltip-right .p-tooltip-arrow {
diff --git a/public/themes/luna-blue/theme.css b/public/themes/luna-blue/theme.css
index 3e12da67d..19c89d08f 100644
--- a/public/themes/luna-blue/theme.css
+++ b/public/themes/luna-blue/theme.css
@@ -903,7 +903,7 @@
   background: #323232;
   color: #dedede;
   border: 1px solid #191919;
-  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
+  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
   border-radius: 3px;
 }
 .p-password-panel .p-password-meter {
@@ -2763,7 +2763,7 @@
   background: #4c4c4c;
   color: #dedede;
   padding: 0.429rem 0.429rem;
-  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
+  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
   border-radius: 3px;
 }
 .p-tooltip.p-tooltip-right .p-tooltip-arrow {
diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css
index d55c0fe45..4e27479f0 100644
--- a/public/themes/luna-green/theme.css
+++ b/public/themes/luna-green/theme.css
@@ -903,7 +903,7 @@
   background: #323232;
   color: #dedede;
   border: 1px solid #191919;
-  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
+  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
   border-radius: 3px;
 }
 .p-password-panel .p-password-meter {
@@ -2763,7 +2763,7 @@
   background: #4c4c4c;
   color: #dedede;
   padding: 0.429rem 0.429rem;
-  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
+  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
   border-radius: 3px;
 }
 .p-tooltip.p-tooltip-right .p-tooltip-arrow {
diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css
index bdf3b2dfd..a6ec12936 100644
--- a/public/themes/luna-pink/theme.css
+++ b/public/themes/luna-pink/theme.css
@@ -903,7 +903,7 @@
   background: #323232;
   color: #dedede;
   border: 1px solid #191919;
-  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
+  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
   border-radius: 3px;
 }
 .p-password-panel .p-password-meter {
@@ -2763,7 +2763,7 @@
   background: #4c4c4c;
   color: #dedede;
   padding: 0.429rem 0.429rem;
-  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
+  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
   border-radius: 3px;
 }
 .p-tooltip.p-tooltip-right .p-tooltip-arrow {
diff --git a/public/themes/md-dark-deeppurple/theme.css b/public/themes/md-dark-deeppurple/theme.css
index aca723734..33216e278 100644
--- a/public/themes/md-dark-deeppurple/theme.css
+++ b/public/themes/md-dark-deeppurple/theme.css
@@ -923,7 +923,7 @@
   background: #1e1e1e;
   color: rgba(255, 255, 255, 0.87);
   border: 0 none;
-  box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);
+  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
   border-radius: 4px;
 }
 .p-password-panel .p-password-meter {
@@ -2796,7 +2796,7 @@
   background: #444444;
   color: rgba(255, 255, 255, 0.87);
   padding: 0.5rem;
-  box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);
+  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
   border-radius: 4px;
 }
 .p-tooltip.p-tooltip-right .p-tooltip-arrow {
@@ -4754,7 +4754,7 @@
 
 .p-tooltip .p-tooltip-text {
   box-shadow: none;
-  font-size: 0.714rem;
+  font-size: 0.875rem;
 }
 .p-tooltip .p-tooltip-arrow {
   display: none;
diff --git a/public/themes/md-dark-indigo/theme.css b/public/themes/md-dark-indigo/theme.css
index afa236a5d..9783672f3 100644
--- a/public/themes/md-dark-indigo/theme.css
+++ b/public/themes/md-dark-indigo/theme.css
@@ -923,7 +923,7 @@
   background: #1e1e1e;
   color: rgba(255, 255, 255, 0.87);
   border: 0 none;
-  box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);
+  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
   border-radius: 4px;
 }
 .p-password-panel .p-password-meter {
@@ -2796,7 +2796,7 @@
   background: #444444;
   color: rgba(255, 255, 255, 0.87);
   padding: 0.5rem;
-  box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);
+  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
   border-radius: 4px;
 }
 .p-tooltip.p-tooltip-right .p-tooltip-arrow {
@@ -4754,7 +4754,7 @@
 
 .p-tooltip .p-tooltip-text {
   box-shadow: none;
-  font-size: 0.714rem;
+  font-size: 0.875rem;
 }
 .p-tooltip .p-tooltip-arrow {
   display: none;
diff --git a/public/themes/md-light-deeppurple/theme.css b/public/themes/md-light-deeppurple/theme.css
index 4c3d4fb83..2e0adce89 100644
--- a/public/themes/md-light-deeppurple/theme.css
+++ b/public/themes/md-light-deeppurple/theme.css
@@ -923,7 +923,7 @@
   background: #ffffff;
   color: #000001;
   border: 0 none;
-  box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);
+  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
   border-radius: 4px;
 }
 .p-password-panel .p-password-meter {
@@ -2796,7 +2796,7 @@
   background: rgba(97, 97, 97, 0.9);
   color: #ffffff;
   padding: 0.5rem;
-  box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);
+  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
   border-radius: 4px;
 }
 .p-tooltip.p-tooltip-right .p-tooltip-arrow {
@@ -4754,7 +4754,7 @@
 
 .p-tooltip .p-tooltip-text {
   box-shadow: none;
-  font-size: 0.714rem;
+  font-size: 0.875rem;
 }
 .p-tooltip .p-tooltip-arrow {
   display: none;
diff --git a/public/themes/md-light-indigo/theme.css b/public/themes/md-light-indigo/theme.css
index 4aa1e7102..4095f8945 100644
--- a/public/themes/md-light-indigo/theme.css
+++ b/public/themes/md-light-indigo/theme.css
@@ -923,7 +923,7 @@
   background: #ffffff;
   color: #000001;
   border: 0 none;
-  box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);
+  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
   border-radius: 4px;
 }
 .p-password-panel .p-password-meter {
@@ -2796,7 +2796,7 @@
   background: rgba(97, 97, 97, 0.9);
   color: #ffffff;
   padding: 0.5rem;
-  box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);
+  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
   border-radius: 4px;
 }
 .p-tooltip.p-tooltip-right .p-tooltip-arrow {
@@ -4754,7 +4754,7 @@
 
 .p-tooltip .p-tooltip-text {
   box-shadow: none;
-  font-size: 0.714rem;
+  font-size: 0.875rem;
 }
 .p-tooltip .p-tooltip-arrow {
   display: none;
diff --git a/public/themes/mdc-dark-deeppurple/theme.css b/public/themes/mdc-dark-deeppurple/theme.css
index 21c921644..a94afa710 100644
--- a/public/themes/mdc-dark-deeppurple/theme.css
+++ b/public/themes/mdc-dark-deeppurple/theme.css
@@ -923,7 +923,7 @@
   background: #1e1e1e;
   color: rgba(255, 255, 255, 0.87);
   border: 0 none;
-  box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);
+  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
   border-radius: 4px;
 }
 .p-password-panel .p-password-meter {
@@ -2796,7 +2796,7 @@
   background: #444444;
   color: rgba(255, 255, 255, 0.87);
   padding: 0.5rem;
-  box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);
+  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
   border-radius: 4px;
 }
 .p-tooltip.p-tooltip-right .p-tooltip-arrow {
@@ -4754,7 +4754,7 @@
 
 .p-tooltip .p-tooltip-text {
   box-shadow: none;
-  font-size: 0.714rem;
+  font-size: 0.875rem;
 }
 .p-tooltip .p-tooltip-arrow {
   display: none;
diff --git a/public/themes/mdc-dark-indigo/theme.css b/public/themes/mdc-dark-indigo/theme.css
index 78d42e1c0..6c9d99b22 100644
--- a/public/themes/mdc-dark-indigo/theme.css
+++ b/public/themes/mdc-dark-indigo/theme.css
@@ -923,7 +923,7 @@
   background: #1e1e1e;
   color: rgba(255, 255, 255, 0.87);
   border: 0 none;
-  box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);
+  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
   border-radius: 4px;
 }
 .p-password-panel .p-password-meter {
@@ -2796,7 +2796,7 @@
   background: #444444;
   color: rgba(255, 255, 255, 0.87);
   padding: 0.5rem;
-  box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);
+  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
   border-radius: 4px;
 }
 .p-tooltip.p-tooltip-right .p-tooltip-arrow {
@@ -4754,7 +4754,7 @@
 
 .p-tooltip .p-tooltip-text {
   box-shadow: none;
-  font-size: 0.714rem;
+  font-size: 0.875rem;
 }
 .p-tooltip .p-tooltip-arrow {
   display: none;
diff --git a/public/themes/mdc-light-deeppurple/theme.css b/public/themes/mdc-light-deeppurple/theme.css
index 9d5074b06..f3151b0f5 100644
--- a/public/themes/mdc-light-deeppurple/theme.css
+++ b/public/themes/mdc-light-deeppurple/theme.css
@@ -923,7 +923,7 @@
   background: #ffffff;
   color: #000001;
   border: 0 none;
-  box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);
+  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
   border-radius: 4px;
 }
 .p-password-panel .p-password-meter {
@@ -2796,7 +2796,7 @@
   background: rgba(97, 97, 97, 0.9);
   color: #ffffff;
   padding: 0.5rem;
-  box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);
+  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
   border-radius: 4px;
 }
 .p-tooltip.p-tooltip-right .p-tooltip-arrow {
@@ -4754,7 +4754,7 @@
 
 .p-tooltip .p-tooltip-text {
   box-shadow: none;
-  font-size: 0.714rem;
+  font-size: 0.875rem;
 }
 .p-tooltip .p-tooltip-arrow {
   display: none;
diff --git a/public/themes/mdc-light-indigo/theme.css b/public/themes/mdc-light-indigo/theme.css
index 2bde1036d..cdc029499 100644
--- a/public/themes/mdc-light-indigo/theme.css
+++ b/public/themes/mdc-light-indigo/theme.css
@@ -923,7 +923,7 @@
   background: #ffffff;
   color: #000001;
   border: 0 none;
-  box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);
+  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
   border-radius: 4px;
 }
 .p-password-panel .p-password-meter {
@@ -2796,7 +2796,7 @@
   background: rgba(97, 97, 97, 0.9);
   color: #ffffff;
   padding: 0.5rem;
-  box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);
+  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
   border-radius: 4px;
 }
 .p-tooltip.p-tooltip-right .p-tooltip-arrow {
@@ -4754,7 +4754,7 @@
 
 .p-tooltip .p-tooltip-text {
   box-shadow: none;
-  font-size: 0.714rem;
+  font-size: 0.875rem;
 }
 .p-tooltip .p-tooltip-arrow {
   display: none;
diff --git a/public/themes/nova-accent/theme.css b/public/themes/nova-accent/theme.css
index b2e439b8d..5c56c79e1 100644
--- a/public/themes/nova-accent/theme.css
+++ b/public/themes/nova-accent/theme.css
@@ -899,7 +899,7 @@
   background: #ffffff;
   color: #333333;
   border: 1px solid #c8c8c8;
-  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
+  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
   border-radius: 3px;
 }
 .p-password-panel .p-password-meter {
@@ -2755,7 +2755,7 @@
   background: #333333;
   color: #ffffff;
   padding: 0.429rem 0.429rem;
-  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
+  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
   border-radius: 3px;
 }
 .p-tooltip.p-tooltip-right .p-tooltip-arrow {
diff --git a/public/themes/nova-alt/theme.css b/public/themes/nova-alt/theme.css
index 788e3c295..c026c96a4 100644
--- a/public/themes/nova-alt/theme.css
+++ b/public/themes/nova-alt/theme.css
@@ -903,7 +903,7 @@
   background: #ffffff;
   color: #333333;
   border: 1px solid #c8c8c8;
-  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
+  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
   border-radius: 3px;
 }
 .p-password-panel .p-password-meter {
@@ -2763,7 +2763,7 @@
   background: #333333;
   color: #ffffff;
   padding: 0.429rem 0.429rem;
-  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
+  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
   border-radius: 3px;
 }
 .p-tooltip.p-tooltip-right .p-tooltip-arrow {
diff --git a/public/themes/nova-vue/theme.css b/public/themes/nova-vue/theme.css
index 0698e5b0f..5d0770c77 100644
--- a/public/themes/nova-vue/theme.css
+++ b/public/themes/nova-vue/theme.css
@@ -903,7 +903,7 @@
   background: #ffffff;
   color: #333333;
   border: 1px solid #c8c8c8;
-  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
+  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
   border-radius: 3px;
 }
 .p-password-panel .p-password-meter {
@@ -2763,7 +2763,7 @@
   background: #333333;
   color: #ffffff;
   padding: 0.429rem 0.429rem;
-  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
+  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
   border-radius: 3px;
 }
 .p-tooltip.p-tooltip-right .p-tooltip-arrow {
diff --git a/public/themes/nova/theme.css b/public/themes/nova/theme.css
index 3e87bf2ef..657b75f2e 100644
--- a/public/themes/nova/theme.css
+++ b/public/themes/nova/theme.css
@@ -903,7 +903,7 @@
   background: #ffffff;
   color: #333333;
   border: 1px solid #c8c8c8;
-  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
+  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
   border-radius: 3px;
 }
 .p-password-panel .p-password-meter {
@@ -2763,7 +2763,7 @@
   background: #333333;
   color: #ffffff;
   padding: 0.429rem 0.429rem;
-  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
+  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
   border-radius: 3px;
 }
 .p-tooltip.p-tooltip-right .p-tooltip-arrow {
diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css
index 95363f5e6..738b34160 100644
--- a/public/themes/saga-blue/theme.css
+++ b/public/themes/saga-blue/theme.css
@@ -903,7 +903,7 @@
   background: #ffffff;
   color: #495057;
   border: 0 none;
-  box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
   border-radius: 3px;
 }
 .p-password-panel .p-password-meter {
@@ -2780,7 +2780,7 @@
   background: #495057;
   color: #ffffff;
   padding: 0.5rem 0.5rem;
-  box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
   border-radius: 3px;
 }
 .p-tooltip.p-tooltip-right .p-tooltip-arrow {
diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css
index bac6b4e92..570689897 100644
--- a/public/themes/saga-green/theme.css
+++ b/public/themes/saga-green/theme.css
@@ -903,7 +903,7 @@
   background: #ffffff;
   color: #495057;
   border: 0 none;
-  box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
   border-radius: 3px;
 }
 .p-password-panel .p-password-meter {
@@ -2780,7 +2780,7 @@
   background: #495057;
   color: #ffffff;
   padding: 0.5rem 0.5rem;
-  box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
   border-radius: 3px;
 }
 .p-tooltip.p-tooltip-right .p-tooltip-arrow {
diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css
index e612ed45c..df50f30f3 100644
--- a/public/themes/saga-orange/theme.css
+++ b/public/themes/saga-orange/theme.css
@@ -903,7 +903,7 @@
   background: #ffffff;
   color: #495057;
   border: 0 none;
-  box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
   border-radius: 3px;
 }
 .p-password-panel .p-password-meter {
@@ -2780,7 +2780,7 @@
   background: #495057;
   color: #ffffff;
   padding: 0.5rem 0.5rem;
-  box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
   border-radius: 3px;
 }
 .p-tooltip.p-tooltip-right .p-tooltip-arrow {
diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css
index 26f5437a1..0905a1c9d 100644
--- a/public/themes/vela-blue/theme.css
+++ b/public/themes/vela-blue/theme.css
@@ -902,7 +902,7 @@
   background: #1f2d40;
   color: rgba(255, 255, 255, 0.87);
   border: 1px solid #304562;
-  box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
   border-radius: 3px;
 }
 .p-password-panel .p-password-meter {
@@ -2779,7 +2779,7 @@
   background: #304562;
   color: rgba(255, 255, 255, 0.87);
   padding: 0.5rem 0.5rem;
-  box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
   border-radius: 3px;
 }
 .p-tooltip.p-tooltip-right .p-tooltip-arrow {
diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css
index ed43a1f4a..7ece48c00 100644
--- a/public/themes/vela-green/theme.css
+++ b/public/themes/vela-green/theme.css
@@ -902,7 +902,7 @@
   background: #1f2d40;
   color: rgba(255, 255, 255, 0.87);
   border: 1px solid #304562;
-  box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
   border-radius: 3px;
 }
 .p-password-panel .p-password-meter {
@@ -2779,7 +2779,7 @@
   background: #304562;
   color: rgba(255, 255, 255, 0.87);
   padding: 0.5rem 0.5rem;
-  box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
   border-radius: 3px;
 }
 .p-tooltip.p-tooltip-right .p-tooltip-arrow {
diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css
index e4ed1919a..65f95c519 100644
--- a/public/themes/vela-orange/theme.css
+++ b/public/themes/vela-orange/theme.css
@@ -902,7 +902,7 @@
   background: #1f2d40;
   color: rgba(255, 255, 255, 0.87);
   border: 1px solid #304562;
-  box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
   border-radius: 3px;
 }
 .p-password-panel .p-password-meter {
@@ -2779,7 +2779,7 @@
   background: #304562;
   color: rgba(255, 255, 255, 0.87);
   padding: 0.5rem 0.5rem;
-  box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
   border-radius: 3px;
 }
 .p-tooltip.p-tooltip-right .p-tooltip-arrow {
diff --git a/public/themes/vela-purple/theme.css b/public/themes/vela-purple/theme.css
index 35af4dbbe..c08747f2c 100644
--- a/public/themes/vela-purple/theme.css
+++ b/public/themes/vela-purple/theme.css
@@ -902,7 +902,7 @@
   background: #1f2d40;
   color: rgba(255, 255, 255, 0.87);
   border: 1px solid #304562;
-  box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
   border-radius: 3px;
 }
 .p-password-panel .p-password-meter {
@@ -2779,7 +2779,7 @@
   background: #304562;
   color: rgba(255, 255, 255, 0.87);
   padding: 0.5rem 0.5rem;
-  box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
   border-radius: 3px;
 }
 .p-tooltip.p-tooltip-right .p-tooltip-arrow {
diff --git a/src/App.vue b/src/App.vue
index a31754625..eee392a43 100755
--- a/src/App.vue
+++ b/src/App.vue
@@ -18,6 +18,9 @@
             <router-view/>
             <app-footer />
         </div>
+        <div class="app-theme">
+            <img :src="getLogo()" />
+        </div>
         <Toast />
         <Toast position="topleft" group="tl" />
         <Toast position="bottomleft" group="bl" />
@@ -37,9 +40,46 @@ export default {
         return {
             sidebarActive: false,
             newsActive: false,
-            theme: 'saga-blue'
+            theme: 'saga-blue',
+            logoMap: {
+                'bootstrap4-light-blue': 'bootstrap4-light-blue.svg',
+                'bootstrap4-light-purple': 'bootstrap4-light-purple.svg',
+                'bootstrap4-dark-blue': 'bootstrap4-dark-blue.svg',
+                'bootstrap4-dark-purple': 'bootstrap4-dark-purple.svg',
+                'bootstrap4-dark-purple': 'bootstrap4-dark-purple.svg',
+                'md-light-indigo': 'md-light-indigo.svg',
+                'md-light-purple': 'md-light-purple.svg',
+                'md-dark-indigo': 'md-dark-indigo.svg',
+                'md-dark-indigo': 'md-dark-purple.svg',
+                'mdc-light-indigo': 'md-light-indigo.svg',
+                'mdc-light-purple': 'md-light-purple.svg',
+                'mdc-dark-indigo': 'md-dark-indigo.svg',
+                'mdc-dark-indigo': 'md-dark-purple.svg',
+                'saga-blue': 'saga-blue.png',
+                'saga-green': 'saga-green.png',
+                'saga-orange': 'saga-orange.png',
+                'saga-purple': 'saga-purple.png',
+                'vela-blue': 'vela-blue.png',
+                'vela-green': 'vela-green.png',
+                'vela-orange': 'vela-orange.png',
+                'vela-purple': 'vela-purple.png',
+                'arya-blue': 'arya-blue.png',
+                'arya-green': 'arya-green.png',
+                'arya-orange': 'arya-orange.png',
+                'arya-purple': 'arya-purple.png',
+                'nova': 'themeswitcher-nova.png',
+                'nova-alt': 'themeswitcher-nova-alt.png',
+                'nova-accent': 'themeswitcher-nova-accent.png',
+                'nova-vue': 'themeswitcher-nova-vue.png',
+                'luna-blue': 'themeswitcher-luna-blue.png',
+                'luna-green': 'themeswitcher-luna-green.png',
+                'luna-pink': 'themeswitcher-luna-pink.png',
+                'luna-amber': 'themeswitcher-luna-amber.png',
+                'rhea': 'themeswitcher-rhea.png'
+            }
         }
     },
+
     mounted() {
         if (this.isOutdatedIE()) {
             this.$toast.add({severity: 'warn', summary: 'Limited Functionality', detail: 'Although PrimeVue supports IE11, ThemeSwitcher in this application cannot be not fully supported by your browser. Please use a modern browser for the best experience of the showcase.'});
@@ -112,7 +152,11 @@ export default {
             }
 
             return false;
-        }
+        },
+        getLogo() {
+            var images = require.context('./assets/images/themes', false);
+            return images('./' + this.logoMap[this.theme]);
+        },
     },
     computed: {
         containerClass() {
diff --git a/src/AppTopBar.vue b/src/AppTopBar.vue
index d5339ef09..782acf1b6 100755
--- a/src/AppTopBar.vue
+++ b/src/AppTopBar.vue
@@ -21,7 +21,7 @@
                         <li><a @click="changeTheme($event, 'bootstrap4-light-purple')"><img src="./assets/images/themes/bootstrap4-light-purple.svg" alt="Purple Light" /><span>Purple Light</span></a></li>
                         <li><a @click="changeTheme($event, 'bootstrap4-dark-blue')"><img src="./assets/images/themes/bootstrap4-dark-blue.svg" alt="Blue Dark" /><span>Blue Dark</span></a></li>
                         <li><a @click="changeTheme($event, 'bootstrap4-dark-purple')"><img src="./assets/images/themes/bootstrap4-dark-purple.svg" alt="Purple Dark" /><span>Purple Dark</span></a></li>
-                        
+
                         <li class="topbar-submenu-header">MATERIAL DESIGN</li>
                         <li><a @click="changeTheme($event, 'md-light-indigo')"><img src="./assets/images/themes/md-light-indigo.svg" alt="Indigo Light" /><span>Indigo Light</span></a></li>
                         <li><a @click="changeTheme($event, 'md-light-deeppurple')"><img src="./assets/images/themes/md-light-deeppurple.svg" alt="Deep Purple Light" /><span>Deep Purple Light</span></a></li>
@@ -33,7 +33,7 @@
                         <li><a @click="changeTheme($event, 'mdc-light-deeppurple')"><img src="./assets/images/themes/md-light-deeppurple.svg" alt="Deep Purple Light" /><span>Deep Purple Light</span></a></li>
                         <li><a @click="changeTheme($event, 'mdc-dark-indigo')"><img src="./assets/images/themes/md-dark-indigo.svg" alt="Indigo Dark" /><span>Indigo Dark</span></a></li>
                         <li><a @click="changeTheme($event, 'mdc-dark-deeppurple')"><img src="./assets/images/themes/md-dark-deeppurple.svg" alt="Deep Purple Dark" /><span>Deep Purple Dark</span></a></li>
-                        
+
                         <li class="topbar-submenu-header">PRIMEONE</li>
                         <li><a @click="changeTheme($event, 'saga-blue')"><img src="./assets/images/themes/saga-blue.png" alt="Saga Blue" /><span>Saga Blue</span></a></li>
                         <li><a @click="changeTheme($event, 'saga-green')"><img src="./assets/images/themes/saga-green.png" alt="Saga Green" /><span>Saga Green</span></a></li>
diff --git a/src/assets/styles/app/_core.scss b/src/assets/styles/app/_core.scss
index 6e63081dc..d15bb9625 100644
--- a/src/assets/styles/app/_core.scss
+++ b/src/assets/styles/app/_core.scss
@@ -204,4 +204,22 @@ h6 {
 p {
     line-height: 1.5;
     margin: 0 0 1rem 0;
+}
+
+.app-theme {
+    background-color: var(--primary-color);
+    color: var(--primary-color-text);
+    position: fixed;
+    left: 285px;
+    top: 15px;
+    padding: .5rem;
+    z-index: 2000;
+    border-radius: 4px;
+    box-shadow: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12);
+    width: 39px;
+    height: 39px;
+
+    img {
+        width: 25px;
+    }
 }
\ No newline at end of file
diff --git a/src/assets/styles/app/_responsive.scss b/src/assets/styles/app/_responsive.scss
index d7e7fb9fc..7ca238306 100644
--- a/src/assets/styles/app/_responsive.scss
+++ b/src/assets/styles/app/_responsive.scss
@@ -136,6 +136,11 @@
             transform: translate3d(0,0,0);
         }
     }
+
+    .app-theme {
+        right: 35px;
+        left: auto;
+    }
 }
 
 @media screen and (max-width: 640px) {
diff --git a/src/assets/styles/app/_topbar.scss b/src/assets/styles/app/_topbar.scss
index 6b4ec5dd9..f377d4508 100644
--- a/src/assets/styles/app/_topbar.scss
+++ b/src/assets/styles/app/_topbar.scss
@@ -90,6 +90,7 @@
 
                 > ul {
                     position: absolute;
+                    transform-origin: top;
                     top: 70px;
                     right: 0;
                     width: 275px;
diff --git a/src/assets/styles/app/app.scss b/src/assets/styles/app/app.scss
index 170385a8c..fbe179534 100644
--- a/src/assets/styles/app/app.scss
+++ b/src/assets/styles/app/app.scss
@@ -7,5 +7,4 @@
 @import './config';
 @import './designer';
 @import './home';
-@import './responsive';
-@import './core';
\ No newline at end of file
+@import './responsive';
\ No newline at end of file
diff --git a/src/components/common/Common.css b/src/components/common/Common.css
index 3ae425202..abe233e69 100755
--- a/src/components/common/Common.css
+++ b/src/components/common/Common.css
@@ -89,34 +89,40 @@ button {
     user-select: none;
 }
 
-/* Overlay Animations */
+/* Non vue overlay animations */
 .p-input-overlay {
-    transform: translateY(5%);
     opacity: 0;
-    transition: transform .3s, opacity .3s;
+    transform: scaleY(0.8);
+    transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
 }
 
 .p-input-overlay-visible {
-    transform: translateY(0);
     opacity: 1;
+    transform: scaleY(1);
 }
 
 .p-input-overlay-hidden {
     opacity: 0;
-    transform: translateY(5%);
-    transition: transform .3s, opacity .15s;
+    transform: scaleY(1);
+    transition: opacity .1s linear;
+}
+
+/* Vue based overlay animations */
+.p-input-overlay-enter {
+    opacity: 0;
+    transform: scaleY(0.8);
 }
 
-/* Overlay Animations */
-.p-input-overlay-enter,
 .p-input-overlay-leave-to {
     opacity: 0;
-    transform: translateY(5%);
 }
 
-.p-input-overlay-enter-active,
+.p-input-overlay-enter-active {
+    transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
+}
+
 .p-input-overlay-leave-active {
-    transition: transform .3s, opacity .15s;
+    transition: opacity .1s linear;
 }
 
 /* Toggleable Content */
diff --git a/src/components/overlaypanel/OverlayPanel.vue b/src/components/overlaypanel/OverlayPanel.vue
index 76987eeb5..839aa20c6 100755
--- a/src/components/overlaypanel/OverlayPanel.vue
+++ b/src/components/overlaypanel/OverlayPanel.vue
@@ -168,29 +168,21 @@ export default {
 }
 
 /* Animation */
-.p-overlaypanel-enter,
+.p-overlaypanel-enter {
+    opacity: 0;
+    transform: scaleY(0.8);
+}
+
 .p-overlaypanel-leave-to {
     opacity: 0;
-    transform: translate3d(-50%, -25%, 0) scale(0.9);
 }
 
-.p-overlaypanel-enter-active,
+.p-overlaypanel-enter-active {
+    transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
+}
+
 .p-overlaypanel-leave-active {
-    transition: all 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
-}
-
-.p-overlaypanel-enter,
-.p-overlaypanel-leave-to {
-    opacity: 0;
-    -webkit-transform: translateY(5%);
-    -ms-transform: translateY(5%);
-    transform: translateY(5%);
-}
-
-.p-overlaypanel-enter-active,
-.p-overlaypanel-leave-active {
-    -webkit-transition: transform .3s, opacity .15s;
-    transition: transform .3s, opacity .15s;
+    transition: opacity .1s linear;
 }
 
 .p-overlaypanel:after, .p-overlaypanel:before {
diff --git a/src/components/utils/DomHandler.js b/src/components/utils/DomHandler.js
index f2cf9cdf6..4fbc8ff94 100755
--- a/src/components/utils/DomHandler.js
+++ b/src/components/utils/DomHandler.js
@@ -187,10 +187,14 @@ export default class DomHandler {
         let viewport = this.getViewport();
         let top, left;
 
-        if (targetOffset.top + targetOuterHeight + elementOuterHeight > viewport.height)
+        if (targetOffset.top + targetOuterHeight + elementOuterHeight > viewport.height) {
             top = targetOffset.top + windowScrollTop - elementOuterHeight;
-        else
+            element.style.transformOrigin = 'bottom';
+        }
+        else {
             top = targetOuterHeight + targetOffset.top + windowScrollTop;
+            element.style.transformOrigin = 'top';
+        }
 
         if (targetOffset.left + targetOuterWidth + elementOuterWidth > viewport.width)
             left = targetOffset.left + windowScrollLeft + targetOuterWidth - elementOuterWidth;
@@ -209,10 +213,14 @@ export default class DomHandler {
         var viewport = this.getViewport();
         var top, left;
 
-        if ((targetOffset.top + targetHeight + elementDimensions.height) > viewport.height)
+        if ((targetOffset.top + targetHeight + elementDimensions.height) > viewport.height) {
             top = -1 * (elementDimensions.height);
-        else
+            element.style.transformOrigin = 'bottom';
+        }
+        else {
             top = targetHeight;
+            element.style.transformOrigin = 'top';
+        }
 
         if ((targetOffset.left + elementDimensions.width) > viewport.width)
             left = targetWidth - elementDimensions.width;