diff --git a/src/components/Modal.js b/src/components/Modal.js
index 50d3592..0476fb3 100644
--- a/src/components/Modal.js
+++ b/src/components/Modal.js
@@ -65,8 +65,8 @@ const Modal = ({ user, shop, isOpen, onClose, modalContent, deviceType, setModal
 
   const handleYes = (event) => {
     if(onModalYesFunction) 
-      console.log('dawnawddjwand')
-    onModalYesFunction();
+      onModalYesFunction();
+    onClose(); // Close the modal
   }
 
   const handleNo = (event) => {
@@ -134,7 +134,7 @@ const Modal = ({ user, shop, isOpen, onClose, modalContent, deviceType, setModal
         {modalContent === "claim-coupon" && <Join setModal={setModal} />}
         {modalContent === "loading" && <Loading setModal={setModal} />}
         {modalContent === "message" && <Message handleYes={handleYes}/>}
-        {modalContent === "player-prompt" && <PlayerPrompt/>}
+        {modalContent === "player-prompt" && <PlayerPrompt cafeId={shop.cafeId} setModal={setModal} handleClose={handleOverlayClick} welcomePageConfig={shop.welcomePageConfig}/>}
       </div>
     </div>
   );
diff --git a/src/components/MusicPlayer.js b/src/components/MusicPlayer.js
index 88b19b1..c5bdd0a 100644
--- a/src/components/MusicPlayer.js
+++ b/src/components/MusicPlayer.js
@@ -129,8 +129,8 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
     if (!socket) return;
 
     socket.on("requestResponse", (response) => {
-      if(response.status)      setModal("message", { captMessage: 'Berhasil menambahkan lagu' }, null, null);
-else       setModal("message", { captMessage: 'Gagal menambahkan lagu', descMessage: response.alasan }, null, null);
+      if(response.success) setModal("message", { captMessage: 'Berhasil menambahkan lagu' }, null, null);
+      else setModal("message", { captMessage: 'Gagal menambahkan lagu', descMessage: response.alasan }, null, null);
     });
     socket.on("searchResponse", (response) => {
       console.log(response);
diff --git a/src/helpers/cafeHelpers.js b/src/helpers/cafeHelpers.js
index 76232f3..a4135f2 100644
--- a/src/helpers/cafeHelpers.js
+++ b/src/helpers/cafeHelpers.js
@@ -58,6 +58,7 @@ export const saveWelcomePageConfig = async (cafeId, details) => {
   formData.append("welcomingText", details.welcomingText);
   formData.append("backgroundColor", details.backgroundColor);
   formData.append("textColor", details.textColor);
+  formData.append("musicFilter", details.musicFilter);
   
   // Append the isWelcomePageActive field
   formData.append("isWelcomePageActive", details.isWelcomePageActive);
diff --git a/src/pages/Message.js b/src/pages/Message.js
index 4c8d855..3abd725 100644
--- a/src/pages/Message.js
+++ b/src/pages/Message.js
@@ -5,23 +5,26 @@ import styles from './Join.module.css'; // Import the module.css file
 const LinktreePage = ({ handleYes }) => {
   const [captMessage, setCaptMessage] = useState('');
   const [descMessage, setDescMessage] = useState('');
+  const [closeText, setCloseText] = useState('');
 
   useEffect(() => {
       const newQueryParams = new URLSearchParams(window.location.search);
       const r = newQueryParams.get('captMessage');
       const s = newQueryParams.get('descMessage');
+      const v = newQueryParams.get('closeText') || 'Tutup';
       if (r) {
         setCaptMessage(r)
         setDescMessage(s)
+        setCloseText(v)
       }
   }, []);
 
   return (
     <div className={styles.linktreePage}>
-        <div className={styles.dashboardContainer}>
+        <div className={styles.dashboardContainer} >
           <div className={styles.mainHeading}>{captMessage}</div>
-          <div className={styles.descHeading}>{descMessage}</div>
-          {handleYes && <div onClick={handleYes} className={styles.button}>Aktifkan</div>}
+          {descMessage && <div className={styles.descHeading}>{descMessage}</div>}
+          {handleYes && <div onClick={handleYes} className={styles.button}>{closeText}</div>}
         </div>
     </div>
   );
diff --git a/src/pages/PlayerPrompt.js b/src/pages/PlayerPrompt.js
index 8343514..c0acd3b 100644
--- a/src/pages/PlayerPrompt.js
+++ b/src/pages/PlayerPrompt.js
@@ -1,28 +1,42 @@
 // LinktreePage.js
 import React, { useState, useEffect } from 'react';
 import styles from './Join.module.css'; // Import the module.css file
+import { saveWelcomePageConfig } from "../helpers/cafeHelpers"; // Import the API function
 
-const LinktreePage = ({ handleYes }) => {
-  const [captMessage, setCaptMessage] = useState('');
-  const [descMessage, setDescMessage] = useState('');
+const LinktreePage = ({ cafeId, setModal, handleClose, welcomePageConfig }) => {
+  const [musicFilter, setMusicFilter] = useState('');
 
   useEffect(() => {
-      const newQueryParams = new URLSearchParams(window.location.search);
-      const r = newQueryParams.get('captMessage');
-      const s = newQueryParams.get('descMessage');
-      if (r) {
-        setCaptMessage(r)
-        setDescMessage(s)
-      }
-  }, []);
+    console.log(welcomePageConfig)
+    if (welcomePageConfig) {
+      const parsedConfig = JSON.parse(welcomePageConfig);
+      setMusicFilter(parsedConfig.musicFilter)
+    }
+  }, [welcomePageConfig]);
+
+  const handleSave = async () => {
+    setModal("loading");
+
+    const details = {
+      musicFilter
+    };
+
+    try {
+      const result = await saveWelcomePageConfig(cafeId, details);
+    } catch (error) {
+      setModal("message", { captMessage: 'Gagal menerapkan filter' }, null, null);
+    } finally {
+      handleClose();
+    }
+  };
 
   return (
     <div className={styles.linktreePage}>
         <div className={styles.dashboardContainer}>
           <div className={styles.mainHeading}>Filter jenis musik</div>
           <div className={styles.descHeading}>Masukkan prompt untuk Gemini AI</div>
-          <input className={styles.input} placeholder="hanya musik santai"type="text"/>
-          <div onClick={handleYes} className={styles.button}>Simpan</div>
+          <input value={musicFilter} onChange={(e)=>setMusicFilter(e.target.value)} className={styles.input} placeholder="hanya musik santai"type="text"/>
+          <div onClick={handleSave} className={styles.button}>Simpan</div>
         </div>
     </div>
   );