diff --git a/administrator/components/com_media/resources/scripts/components/modals/modal.vue b/administrator/components/com_media/resources/scripts/components/modals/modal.vue
index 27c2b4b3dfdca..931413cf74964 100644
--- a/administrator/components/com_media/resources/scripts/components/modals/modal.vue
+++ b/administrator/components/com_media/resources/scripts/components/modals/modal.vue
@@ -2,11 +2,11 @@
     <div class="media-modal-backdrop" @click="close()">
         <div class="modal" @click.stop style="display: flex">
 			<tab-lock>
-				<slot name="backdrop-close"></slot>
 				<div class="modal-dialog" :class="modalClass" role="dialog" :aria-labelledby="labelElement">
 					<div class="modal-content">
 						<div class="modal-header">
 							<slot name="header"></slot>
+							<slot name="backdrop-close"></slot>
 							<button type="button" v-if="showClose" class="close" @click="close()"
 									aria-label="Close">
 								<span aria-hidden="true">&times;</span>
diff --git a/administrator/components/com_media/resources/styles/components/_media-modal.scss b/administrator/components/com_media/resources/styles/components/_media-modal.scss
index 88f69afebe11c..54ac017ddf08c 100644
--- a/administrator/components/com_media/resources/styles/components/_media-modal.scss
+++ b/administrator/components/com_media/resources/styles/components/_media-modal.scss
@@ -60,10 +60,9 @@
 
 .media-preview-close {
   position: absolute;
-  top: 0;
-  right: 0;
-  margin: 5px 20px;
-  font-size: 3rem;
+  bottom: 100%;
+  left: 100%;
+  font-size: 2rem;
   color: inherit;
   background: none;
   border: 0;