diff --git a/package.json b/package.json
index 3576ac4..86552a3 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "groovebrew-mockup",
   "version": "0.1.0",
   "private": true,
-  "homepage": "https://kedaimaster.com",
+  "homepage": "https://dev.kedaimaster.com",
   "dependencies": {
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
diff --git a/src/components/Modal.js b/src/components/Modal.js
index 4726522..50d3592 100644
--- a/src/components/Modal.js
+++ b/src/components/Modal.js
@@ -25,6 +25,7 @@ import GuidePage from "../pages/GuidePage";
 import Join from "../pages/Join";
 import Loading from "../pages/Loading";
 import Message from "../pages/Message";
+import PlayerPrompt from "../pages/PlayerPrompt";
 import Login from "../pages/Login";
 import ResetPassword from "../pages/ResetPassword";
 import { getImageUrl } from "../helpers/itemHelper.js";
@@ -133,6 +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/>}
       </div>
     </div>
   );
diff --git a/src/components/MusicPlayer.js b/src/components/MusicPlayer.js
index edb1107..0f2e768 100644
--- a/src/components/MusicPlayer.js
+++ b/src/components/MusicPlayer.js
@@ -3,7 +3,7 @@ import "./MusicPlayer.css";
 import MusicComponent from "./MusicComponent";
 import Switch from "react-switch";
 
-export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLogin, queue }) {
+export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLogin, queue, setModal }) {
   const [currentTime, setCurrentTime] = useState(0);
   const [trackLength, setTrackLength] = useState(0);
   const [viewing, setViewing] = useState(false); // State for expansion
@@ -83,6 +83,10 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
     //   });
     // };
 
+    const modifyUrl = (url) => {
+      return url.replace(/w\d+-h\d+/, "w255-h255");
+    };
+
     const fetchColor = async () => {
       if (
         currentSong &&
@@ -104,7 +108,9 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
           //   setSubtitleColor("white");
           //   setSubtitleBG("black");
           // }
-          setBackgroundImage(imageUrl);
+          const proxiedUrl = `https://dev.api.kedaimaster.com/image?url=${encodeURIComponent(modifyUrl(imageUrl))}`;  // Use your proxy to fetch the image
+
+          setBackgroundImage(proxiedUrl);
         } catch (error) {
           console.error("Error fetching or processing image:", error);
         }
@@ -279,6 +285,7 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
     if (socket != null && token) {
       socket.emit("songRequest", { token, shopId, track });
       setSongName("");
+      console.log(track)
     }
   };
 
@@ -401,17 +408,12 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
     }, 1000); // 1 second timeout (same as the CSS transition duration)
   };
 
-  function modifyUrl(url) {
-    // Use a regular expression to find the part of the URL that starts with '='
-    return url.replace(/=(w\d+)-(h\d+)-/, '=w255-h255-');
-  }
-
   return (
     <div className={`music-player`} style={{ marginBottom: `${viewing ? '-10px' : ''}` }}>
       <div
         onClick={toggleView}
         className="current-bgr"
-        style={{ backgroundImage: `url(${modifyUrl(backgroundImage)})` }}
+        style={{ backgroundImage: `url(${backgroundImage})` }}
       // style={{ backgroundImage: `url(${videoSrc != "" ? '' : backgroundImage})` }}
       >
         {/* <video
@@ -485,6 +487,11 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
 
                   </div>
                 </div>
+                <div className="auth-box" style={{marginTop: '-11px'}} onClick={()=>setModal('player-prompt')}>
+                  <div>
+                  Filter jenis musik dengan AI
+                  </div>
+                </div>
               </>
             )}
             <div className="search-box">
diff --git a/src/config.js b/src/config.js
index 967c5ce..6cf67cc 100644
--- a/src/config.js
+++ b/src/config.js
@@ -1,5 +1,5 @@
 // src/config.js
 
-const API_BASE_URL = 'https://api.kedaimaster.com';
+const API_BASE_URL = 'https://dev.api.kedaimaster.com';
 
 export default API_BASE_URL;
diff --git a/src/pages/CafePage.js b/src/pages/CafePage.js
index 5f8712a..b44ac8f 100644
--- a/src/pages/CafePage.js
+++ b/src/pages/CafePage.js
@@ -242,6 +242,7 @@ function CafePage({
                   shopOwnerId={shopOwnerId}
                   isSpotifyNeedLogin={isSpotifyNeedLogin}
                   queue={queue}
+                  setModal={setModal}
                 />
                 <ItemTypeLister
                   user={user}
diff --git a/src/pages/CreateCoupon.js b/src/pages/CreateCoupon.js
index 0ed594a..3833ee6 100644
--- a/src/pages/CreateCoupon.js
+++ b/src/pages/CreateCoupon.js
@@ -46,7 +46,7 @@ const CreateCouponPage = () => {
       let encodedCouponCode = encodeURIComponent(encryptedCouponCode);
       
       // Construct the URL with the encoded coupon code as a query parameter
-      const urlWithCoupon = `https://coupon.kedaimaster.com/coupon?c=${encodedCouponCode}`;
+      const urlWithCoupon = `https://dev.coupon.kedaimaster.com/coupon?c=${encodedCouponCode}`;
   
       // Optionally, set the URL to use with the coupon
       setCouponUrl(urlWithCoupon);
diff --git a/src/pages/Join.module.css b/src/pages/Join.module.css
index 0eb5eb6..a7f14e0 100644
--- a/src/pages/Join.module.css
+++ b/src/pages/Join.module.css
@@ -15,6 +15,12 @@
   padding: 40px 3px 15px 3px;
 }
 
+.input {
+  width: calc(100% - 10px);
+  border-radius: 6px;
+  font-size: 19px;
+  margin-bottom: 10px;
+}
 /* Main Heading */
 .mainHeading {
   width: 222px;
diff --git a/src/pages/PlayerPrompt.js b/src/pages/PlayerPrompt.js
new file mode 100644
index 0000000..8343514
--- /dev/null
+++ b/src/pages/PlayerPrompt.js
@@ -0,0 +1,31 @@
+// LinktreePage.js
+import React, { useState, useEffect } from 'react';
+import styles from './Join.module.css'; // Import the module.css file
+
+const LinktreePage = ({ handleYes }) => {
+  const [captMessage, setCaptMessage] = useState('');
+  const [descMessage, setDescMessage] = 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)
+      }
+  }, []);
+
+  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>
+        </div>
+    </div>
+  );
+};
+
+export default LinktreePage;