diff --git a/src/playlist/PlaylistNav.vue b/src/playlist/PlaylistNav.vue
index 4e1038f..ca9981a 100644
--- a/src/playlist/PlaylistNav.vue
+++ b/src/playlist/PlaylistNav.vue
@@ -24,6 +24,9 @@
     </router-link>
 
     <b-modal v-model="showModal" title="New playlist">
+      <template #modal-header-close>
+        <Icon icon="x" />
+      </template>
       <b-form-group label="Name">
         <b-form-input v-model="playlistName" type="text" />
       </b-form-group>
diff --git a/src/shared/components/EditModal.vue b/src/shared/components/EditModal.vue
index c385b7e..2fc1080 100644
--- a/src/shared/components/EditModal.vue
+++ b/src/shared/components/EditModal.vue
@@ -1,5 +1,8 @@
 <template>
   <b-modal ok-title="Save" :visible="visible" @ok="confirm" @change="change">
+    <template #modal-header-close>
+      <Icon icon="x" />
+    </template>
     <template #modal-title>
       <slot name="title" :item="copy">
         {{ title }}
diff --git a/src/style/main.scss b/src/style/main.scss
index bf50d6b..fa9deff 100644
--- a/src/style/main.scss
+++ b/src/style/main.scss
@@ -74,3 +74,8 @@ $enable-responsive-font-sizes: true;
 
 @import '~bootstrap';
 @import '~bootstrap-vue';
+
+.modal-header .close {
+  color: $theme-text;
+  opacity: 1;
+}