diff --git a/src/components/modal.vue b/src/components/modal.vue
index 6a2bfb9a..0aa74ffb 100644
--- a/src/components/modal.vue
+++ b/src/components/modal.vue
@@ -6,6 +6,7 @@
       <div class="cancel image" @click="modal.hideModal"></div>
       <NewPlaylist
         v-if="modal.component == modal.options.newPlaylist"
+        :track="modal.props.track"
         @hideModal="hideModal"
         @title="title"
       />
@@ -38,7 +39,7 @@ function hideModal() {
 <style lang="scss">
 .new-playlist-modal {
   position: fixed;
-  z-index: 2000;
+  z-index: 20;
   height: 100vh;
   width: 100vw;
   display: grid;
diff --git a/src/stores/modal.ts b/src/stores/modal.ts
index 3e65de64..c631fcb2 100644
--- a/src/stores/modal.ts
+++ b/src/stores/modal.ts
@@ -1,5 +1,5 @@
 import { defineStore } from "pinia";
-
+import { Track } from "../interfaces";
 enum ModalOptions {
   newPlaylist = "newPlaylist",
   editPlaylist = "editPlaylist",
@@ -10,6 +10,7 @@ export default defineStore("newModal", {
     title: "",
     options: ModalOptions,
     component: "",
+    props: {},
     visible: false,
   }),
   actions: {
@@ -17,6 +18,11 @@ export default defineStore("newModal", {
       this.component = modalOption;
       this.visible = true;
     },
+    showNewPlaylistModal(track: Track) {
+      this.component = ModalOptions.newPlaylist;
+      this.props.track = track;
+      this.visible = true;
+    },
     hideModal() {
       this.visible = false;
     },