diff --git a/extern/aurora b/extern/aurora
index 285c11a13c..d950468064 160000
--- a/extern/aurora
+++ b/extern/aurora
@@ -1 +1 @@
-Subproject commit 285c11a13c9200be196a3c407e31a642824658a9
+Subproject commit d9504680642bae0f862b8928f1ee42be3c9b274a
diff --git a/res/rml/overlay.rcss b/res/rml/overlay.rcss
index a493616ac9..60788b0e75 100644
--- a/res/rml/overlay.rcss
+++ b/res/rml/overlay.rcss
@@ -24,8 +24,14 @@ body {
     flex-direction: column;
     justify-content: flex-end;
     align-items: stretch;
-    decorator: linear-gradient(0deg, #151610F2 0%, #151610CC 60%, #00000000 100%);
+    decorator: vertical-gradient(#00000000 #151610F2);
     padding: 48dp 0 40dp 0;
+    filter: opacity(0);
+    transition: filter 0.2s linear-in-out;
+}
+
+.overlay-root[open] {
+    filter: opacity(1);
 }
 
 button {
diff --git a/src/dusk/ui/overlay.cpp b/src/dusk/ui/overlay.cpp
index 301f12e06b..ef1a98ad91 100644
--- a/src/dusk/ui/overlay.cpp
+++ b/src/dusk/ui/overlay.cpp
@@ -18,7 +18,7 @@ const Rml::String kDocumentSource = R"RML(
     <link type="text/rcss" href="res/rml/overlay.rcss" />
 </head>
 <body>
-    <div class="overlay-root">
+    <div id="root" class="overlay-root">
         <div class="overlay">
             <div class="header">
                 <div id="title"></div>
@@ -193,7 +193,7 @@ Overlay::Overlay(OverlayProps props)
             add_component<Button>(returnParent,
                 Button::Props{
                     .text = "Return",
-                    .onPressed = [this](Rml::Event&) { dismiss(); },
+                    .onPressed = [this](Rml::Event&) { pop_document(); },
                 }, "footer-button"
             );
         returnButton.root()->SetClass("return", true);
@@ -208,6 +208,27 @@ Overlay::Overlay(OverlayProps props)
             );
         resetButton.root()->SetClass("reset", true);
     }
+
+    // Hide document after transition completion
+    mRoot = mDocument->GetElementById("root");
+    listen(mRoot, Rml::EventId::Transitionend, [this](Rml::Event& event) {
+        if (event.GetTargetElement() == mRoot &&
+            *mRoot->GetProperty(Rml::PropertyId::Visibility) == Rml::Style::Visibility::Visible &&
+            mDismissed)
+        {
+            Document::hide();
+        }
+    });
+}
+
+void Overlay::show() {
+    Document::show();
+    mRoot->SetAttribute("open", "");
+}
+
+void Overlay::hide() {
+    mRoot->RemoveAttribute("open");
+    mDismissed = true;
 }
 
 void Overlay::update() {
@@ -228,20 +249,12 @@ bool Overlay::focus() {
 
 bool Overlay::handle_nav_command(Rml::Event& event, NavCommand cmd) {
     if (cmd == NavCommand::Cancel) {
-        dismiss();
+        pop_document();
         return true;
     }
     return Document::handle_nav_command(event, cmd);
 }
 
-void Overlay::dismiss() {
-    if (mDismissed) {
-        return;
-    }
-    mDismissed = true;
-    pop_document();
-}
-
 void Overlay::reset_default() {
     set_value(mOption, mValueMin);
 }
diff --git a/src/dusk/ui/overlay.hpp b/src/dusk/ui/overlay.hpp
index 25579c0ad2..1ad2d8a161 100644
--- a/src/dusk/ui/overlay.hpp
+++ b/src/dusk/ui/overlay.hpp
@@ -56,6 +56,8 @@ class Overlay : public Document {
 public:
     explicit Overlay(OverlayProps props);
 
+    void show() override;
+    void hide() override;
     void update() override;
     bool focus() override;
 
@@ -71,13 +73,13 @@ private:
         return ref;
     }
 
-    void dismiss();
     void reset_default();
 
     GraphicsOption mOption;
     int mValueMin = 0;
     int mValueMax = 0;
     std::vector<std::unique_ptr<Component> > mComponents;
+    Rml::Element* mRoot;
     bool mDismissed = false;
 };
 
