diff --git a/packages/frontend/src/components/Dialog/Dialog.tsx b/packages/frontend/src/components/Dialog/Dialog.tsx
index 8d01ccb3ff..34d4d9071a 100644
--- a/packages/frontend/src/components/Dialog/Dialog.tsx
+++ b/packages/frontend/src/components/Dialog/Dialog.tsx
@@ -59,7 +59,6 @@ const Dialog = React.memo<Props>(
 
     const onClose = (value: any) => {
       props.onClose && props.onClose(value)
-      dialog.current!.style.display = 'none'
     }
 
     const onCancel = (ev: React.BaseSyntheticEvent) => {
@@ -71,7 +70,6 @@ const Dialog = React.memo<Props>(
     useEffect(() => {
       // calling showModal is "only" the way to have ::backdrop
       dialog.current?.showModal()
-      dialog.current!.style.display = 'flex'
     })
 
     let style
diff --git a/packages/frontend/src/components/Dialog/styles.module.scss b/packages/frontend/src/components/Dialog/styles.module.scss
index 8b97066457..e963d12820 100644
--- a/packages/frontend/src/components/Dialog/styles.module.scss
+++ b/packages/frontend/src/components/Dialog/styles.module.scss
@@ -3,8 +3,13 @@ $paddingHorizontal: 30px;
 $paddingVertical: 20px;
 
 .dialog {
+  opacity: 0;
   padding: 0;
 
+  &:last-of-type {
+    opacity: 1;
+  }
+
   &.unstyled {
     background: none;
     width: 100vw;