diff --git a/src/app.css b/src/app.css
index 3a364f96..91e46547 100644
--- a/src/app.css
+++ b/src/app.css
@@ -325,16 +325,22 @@ a.hashtag {
   max-height: 100vh;
 }
 
+.carousel-top-controls {
+  top: 0;
+}
 .carousel-controls {
+  bottom: 0;
+}
+:is(.carousel-top-controls, .carousel-controls) {
   position: fixed;
   width: 100%;
-  bottom: 0;
-  text-align: center;
-  padding: 32px;
+  padding: 16px;
   display: flex;
   gap: 8px;
   justify-content: space-between;
+  text-align: center;
 }
+
 button.carousel-button {
   font-weight: bold;
   color: var(--link-color);
@@ -460,4 +466,7 @@ button.carousel-dot.active {
   .box {
     padding: 32px;
   }
+  :is(.carousel-top-controls, .carousel-controls) {
+    padding: 32px;
+  }
 }
\ No newline at end of file
diff --git a/src/components/status.jsx b/src/components/status.jsx
index a454047d..7ef72a4e 100644
--- a/src/components/status.jsx
+++ b/src/components/status.jsx
@@ -785,10 +785,25 @@ function Status({ statusID, status, withinContext, size = 'm', skeleton }) {
       </div>
       {showMediaModal !== false && (
         <Modal>
+          <div class="carousel-top-controls">
+            <span />
+            <button
+              type="button"
+              class="carousel-button plain"
+              onClick={() => setShowMediaModal(false)}
+            >
+              <Icon icon="x" />
+            </button>
+          </div>
           <div
             class="carousel"
-            onClick={() => {
-              setShowMediaModal(false);
+            onClick={(e) => {
+              if (
+                e.target.classList.contains('carousel-item') ||
+                e.target.classList.contains('media')
+              ) {
+                setShowMediaModal(false);
+              }
             }}
             tabindex="0"
           >