diff --git a/src/renderer/assets/styles/animate.less b/src/renderer/assets/styles/animate.less
index 2258ad96..96081c80 100644
--- a/src/renderer/assets/styles/animate.less
+++ b/src/renderer/assets/styles/animate.less
@@ -871,6 +871,41 @@
     transform: scale(1);
   }
 }
+@keyframes hinge {
+  0% {
+    -webkit-transform-origin: top left;
+    transform-origin: top left;
+    -webkit-animation-timing-function: ease-in-out;
+    animation-timing-function: ease-in-out;
+  }
+
+  20%,
+  60% {
+    -webkit-transform: rotate3d(0, 0, 1, 80deg);
+    transform: rotate3d(0, 0, 1, 80deg);
+    -webkit-transform-origin: top left;
+    transform-origin: top left;
+    -webkit-animation-timing-function: ease-in-out;
+    animation-timing-function: ease-in-out;
+  }
+
+  40%,
+  80% {
+    -webkit-transform: rotate3d(0, 0, 1, 60deg);
+    transform: rotate3d(0, 0, 1, 60deg);
+    -webkit-transform-origin: top left;
+    transform-origin: top left;
+    -webkit-animation-timing-function: ease-in-out;
+    animation-timing-function: ease-in-out;
+    opacity: 1;
+  }
+
+  to {
+    -webkit-transform: translate3d(0, 700px, 0);
+    transform: translate3d(0, 700px, 0);
+    opacity: 0;
+  }
+}
 
 .flipInX {
   backface-visibility: visible !important;
diff --git a/src/renderer/components/material/Modal.vue b/src/renderer/components/material/Modal.vue
index 83a4f4fa..d9981428 100644
--- a/src/renderer/components/material/Modal.vue
+++ b/src/renderer/components/material/Modal.vue
@@ -74,9 +74,9 @@ export default {
         'slideOutLeft',
         'slideOutRight',
         'slideOutUp',
-        'hinge',
+        // 'hinge',
       ],
-      inClass: 'animated flipInX',
+      inClass: 'animated jackInTheBox',
       outClass: 'animated flipOutX',
       unwatchFn: null,
     }