diff --git a/sass/app.scss b/sass/app.scss
index 630559cf..e81686f6 100644
--- a/sass/app.scss
+++ b/sass/app.scss
@@ -32,17 +32,18 @@
 @import 'share_credential';
 @import 'settings';
 
-#app-settings-content:not(.ng-hide) {
+
+
+
+.hide-animation {
   display: inherit !important;
-  padding: 0;
-  transition: height 0.15s ease-out;
+  transition: ease-in-out .5s;
 }
-#app-settings-content.ng-hide{
-  //display: inherit !important;
-  height: 0;
-  padding: 0;
-  transition: height 0.15s ease-in;
+.hide-animation.ng-hide {
+  opacity: 0;
 }
+
+
 .ui-dialog{
   z-index: 9999;
 }
diff --git a/templates/main.php b/templates/main.php
index 02b2f838..37f79d31 100644
--- a/templates/main.php
+++ b/templates/main.php
@@ -199,7 +199,7 @@ style('passman', 'app');
                 >{{ 'settings' | translate }}
                 </button>
             </div>
-            <div id="app-settings-content" ng-show="settingsShown">
+            <div id="app-settings-content" class="hide-animation" ng-hide="!settingsShown">
 
                 <div class="settings-container-label">
                     <input class="checkbox" id="navbarLegacyMode" type="checkbox" ng-model="legacyNavbar" ng-change="legacyNavbarChecked()">