diff --git a/src/components/ModalComponent.vue b/src/components/ModalComponent.vue
index f1e5ad9b..3fdaea06 100644
--- a/src/components/ModalComponent.vue
+++ b/src/components/ModalComponent.vue
@@ -1,7 +1,8 @@
 <template>
     <div class="modal">
-        <div>
+        <div @click="handleClick">
             <div class="modal-container">
+                <button @click="$emit('close')"><font-awesome-icon icon="xmark" /></button>
                 <slot></slot>
             </div>
         </div>
@@ -23,6 +24,10 @@ export default {
             } else return;
             event.preventDefault();
         },
+        handleClick(event) {
+            if (event.target !== event.currentTarget) return;
+            this.$emit("close");
+        },
     },
 };
 </script>
@@ -37,6 +42,10 @@ export default {
 }
 
 .modal-container {
-    @apply w-min m-auto px-8 bg-dark-700 p-6 rounded-xl min-w-[20vw];
+    @apply w-min m-auto px-8 bg-dark-700 p-6 rounded-xl min-w-[20vw] relative;
+}
+
+.modal-container > button {
+    @apply absolute right-8 top-6;
 }
 </style>
diff --git a/src/components/PlaylistAddModal.vue b/src/components/PlaylistAddModal.vue
index 495f9f30..3e3a4aac 100644
--- a/src/components/PlaylistAddModal.vue
+++ b/src/components/PlaylistAddModal.vue
@@ -1,9 +1,6 @@
 <template>
     <ModalComponent>
-        <div class="flex">
-            <span class="text-2xl w-max inline-block" v-t="'actions.select_playlist'" />
-            <button class="ml-3" @click="$emit('close')"><font-awesome-icon icon="xmark" /></button>
-        </div>
+        <span class="text-2xl w-max inline-block" v-t="'actions.select_playlist'" />
         <select class="select w-full mt-3" v-model="selectedPlaylist">
             <option v-for="playlist in playlists" :value="playlist.id" :key="playlist.id" v-text="playlist.name" />
         </select>
diff --git a/src/components/ShareModal.vue b/src/components/ShareModal.vue
index 92a98ae9..34d447f4 100644
--- a/src/components/ShareModal.vue
+++ b/src/components/ShareModal.vue
@@ -1,9 +1,6 @@
 <template>
     <ModalComponent>
-        <div class="flex">
-            <h2 v-t="'actions.share'" />
-            <button class="ml-3" @click="$emit('close')"><font-awesome-icon icon="xmark" /></button>
-        </div>
+        <h2 v-t="'actions.share'" />
         <div class="flex justify-between mt-4">
             <label v-t="'actions.with_timecode'" for="withTimeCode" />
             <input id="withTimeCode" type="checkbox" v-model="withTimeCode" />
@@ -16,7 +13,7 @@
             <label v-t="'actions.time_code'" />
             <input class="input w-12" type="text" v-model="timeStamp" />
         </div>
-        <h3 class="mt-4" v-text="generatedLink" />
+        <a :href="generatedLink" target="_blank"><h3 class="mt-4" v-text="generatedLink" /></a>
         <div class="flex justify-end mt-4">
             <button class="btn" v-t="'actions.follow_link'" @click="followLink()" />
             <button class="btn ml-3" v-t="'actions.copy_link'" @click="copyLink()" />