diff --git a/templates/widgets/modal.lucius b/templates/widgets/modal.lucius
index c5406febc..bb449f0ed 100644
--- a/templates/widgets/modal.lucius
+++ b/templates/widgets/modal.lucius
@@ -2,7 +2,7 @@
   position: fixed;
   left: 50%;
   top: 50%;
-  transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%) scale(0.8, 0.8);
   display: block;
   background-color: rgba(255, 255, 255, 0.9);
   min-width: 60vw;
@@ -13,9 +13,13 @@
   color: var(--fontbase);
   padding: 20px;
   overflow: auto;
+  opacity: 0;
+  transition: all .15s ease;
 
   &.modal--open {
+    opacity: 1;
     z-index: 200;
+    transform: translate(-50%, -50%) scale(1, 1);
   }
 }
 
@@ -43,10 +47,12 @@
   width: 100%;
   background-color: transparent;
   z-index: -1;
-  transition: background-color .2s ease;
+  opacity: 0;
+  transition: all .2s ease;
 
   &.modal__overlay--open {
     z-index: 199;
+    opacity: 1;
     background-color: rgba(0, 0, 0, 0.4);
   }
 }