diff --git a/package.json b/package.json
index 86552a3..3576ac4 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "groovebrew-mockup",
   "version": "0.1.0",
   "private": true,
-  "homepage": "https://dev.kedaimaster.com",
+  "homepage": "https://kedaimaster.com",
   "dependencies": {
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
diff --git a/src/App.css b/src/App.css
index 5576ee1..4d5885c 100644
--- a/src/App.css
+++ b/src/App.css
@@ -11,6 +11,29 @@ body {
   /* overflow-x: hidden; */
 }
 
+.Cafe {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  min-height: 100vh;
+  position: relative;
+}
+
+.Cafe.grayscale {
+  filter: grayscale(1);
+  pointer-events: none; /* Disable pointer events when the deadline is exceeded */
+}
+
+.Watermark {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  background-image: url(https://i.ibb.co.com/F4FMw1jz/testuseonly.png);
+  z-index: 1000;
+  filter: opacity(0.05);
+  pointer-events: none;
+}
+
 .App-logo {
   height: 40vmin;
   pointer-events: none;
diff --git a/src/App.js b/src/App.js
index b3c6e3c..a5e857c 100644
--- a/src/App.js
+++ b/src/App.js
@@ -44,6 +44,8 @@ import {
 } from "./helpers/subscribeHelpers.js";
 import Modal from "./components/Modal"; // Import your modal component
 
+import { requestNotificationPermission } from './services/notificationService'; // Import the notification service
+
 function App() {
   const location = useLocation();
   const navigate = useNavigate();
@@ -63,6 +65,7 @@ function App() {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [modalContent, setModalContent] = useState(null);
   const [onModalCloseFunction, setOnModalCloseFunction] = useState(null);
+  const [onModalYesFunction, setOnModalYesFunction] = useState(null);
   const transactionList = useRef(null);
   const [queue, setQueue] = useState([]);
 
@@ -83,14 +86,14 @@ function App() {
     setTotalItemsCount(totalCount);
     setTotalPrice(totalPrice);
 
-    
-      // If 'lastTransaction' exists, proceed
-      const lastTransaction = JSON.parse(localStorage.getItem("lastTransaction"));
-      console.log(lastTransaction);
-    
-      if (lastTransaction != null) {
-        setLastTransaction(lastTransaction);
-      }
+
+    // If 'lastTransaction' exists, proceed
+    const lastTransaction = JSON.parse(localStorage.getItem("lastTransaction"));
+    console.log(lastTransaction);
+
+    if (lastTransaction != null) {
+      setLastTransaction(lastTransaction);
+    }
   };
 
   useEffect(() => {
@@ -194,26 +197,26 @@ function App() {
       setModal("transaction_pending", data);
 
       localStorage.setItem('cart', []);
-      
+
       calculateTotalsFromLocalStorage();
     });
 
     socket.on("transaction_confirmed", async (data) => {
       console.log("transaction notification: " + data);
       setModal("transaction_confirmed", data);
-    
+
       localStorage.setItem('cart', []);
-      
+
       const startTime = Date.now(); // Capture the start time
       const timeout = 10000; // 10 seconds timeout in milliseconds
-      
+
       calculateTotalsFromLocalStorage();
 
       while (localStorage.getItem("lastTransaction") === null) {
         if (Date.now() - startTime > timeout) {
           return; // Exit the function and don't proceed further
         }
-    
+
         await new Promise((resolve) => setTimeout(resolve, 1000)); // Wait 1 second
       }
 
@@ -221,12 +224,12 @@ function App() {
       // If 'lastTransaction' exists, proceed
       const lastTransaction = JSON.parse(localStorage.getItem("lastTransaction"));
       console.log(lastTransaction);
-    
+
       if (lastTransaction != null) {
         setLastTransaction(lastTransaction);
       }
     });
-    
+
 
     socket.on("transaction_success", async (data) => {
       console.log("transaction notification");
@@ -249,6 +252,18 @@ function App() {
     });
 
 
+    const handleNotificationClick = async () => {
+      const permission = await requestNotificationPermission();
+
+      if (permission === "granted") {
+        console.log("Notification permission granted.");
+        // Set up notifications or show a success modal
+      } else {
+        console.error("Notification permission denied.");
+        setModal('blocked_notification'); // Show modal for blocked notifications
+      }
+    };
+
     const checkNotifications = () => {
       let permission = Notification.permission;
 
@@ -257,7 +272,7 @@ function App() {
       let searchModal = searchParams.get("modal") || ''; // Get transactionId or set it to empty string
 
       if (permission !== "granted" && searchModal == '') {
-        setModal("req_notification");
+        setModal("message", { captMessage: 'Notifikasi tidak aktif', descMessage: 'Aktifkan notifikasi supaya kamu tetap dapat info pesanan, meski sedang buka aplikasi lain.' }, null, handleNotificationClick);
       }
     };
 
@@ -268,7 +283,7 @@ function App() {
       } else {
         console.log(data)
         setUser(data.data.user);
-        if(data.data.latestOpenBillTransaction != null) localStorage.setItem('lastTransaction', JSON.stringify(data.data.latestOpenBillTransaction))
+        if (data.data.latestOpenBillTransaction != null) localStorage.setItem('lastTransaction', JSON.stringify(data.data.latestOpenBillTransaction))
         if (
           data.data.user.password == "unsetunsetunset" &&
           localStorage.getItem("settings")
@@ -438,7 +453,7 @@ function App() {
   }, [navigate]);
 
   // Function to open the modal
-  const setModal = (content, params = {}, onCloseFunction) => {
+  const setModal = (content, params = {}, onCloseFunction, onYesFunction) => {
     const queryParams = new URLSearchParams(location.search);
 
     // Update the modal and any additional params
@@ -462,6 +477,11 @@ function App() {
     } else {
       setOnModalCloseFunction(null);
     }
+    if (onYesFunction) {
+      setOnModalYesFunction(() => onYesFunction); // Store the close function
+    } else {
+      setOnModalYesFunction(null);
+    }
   };
 
   const closeModal = (closeTheseContent = []) => {
@@ -693,7 +713,7 @@ function App() {
             element={
               <>
                 <Transactions
-                shop={shop}
+                  shop={shop}
                   shopId={shopId}
                   sendParam={handleSetParam}
                   deviceType={deviceType}
@@ -725,6 +745,7 @@ function App() {
         onClose={closeModal}
         setModal={setModal}
         onModalCloseFunction={onModalCloseFunction}
+        onModalYesFunction={onModalYesFunction}
       />
     </div>
   );
diff --git a/src/components/AccountUpdatePage.js b/src/components/AccountUpdatePage.js
index e8effc0..635fc82 100644
--- a/src/components/AccountUpdatePage.js
+++ b/src/components/AccountUpdatePage.js
@@ -58,7 +58,7 @@ const AccountUpdatePage = ({ user, showEmail, onSubmit }) => {
 
         <div className={styles.LoginForm}>
         <div className={`${styles.FormUsername} ${inputtingPassword ? styles.animateForm : wasInputtingPassword ? styles.reverseForm : ''}`}>
-          <label htmlFor="username" className={styles.usernameLabel}>--------------------------------------------</label>
+          <label htmlFor="username" className={styles.usernameLabel}>----------------------------------------</label>
           
           <input
             name="username"
@@ -85,7 +85,7 @@ const AccountUpdatePage = ({ user, showEmail, onSubmit }) => {
         <div className={`${styles.FormPassword} ${inputtingPassword ? styles.animateForm : wasInputtingPassword ? styles.reverseForm : ''}`}>
           <span>
             <label onClick={() => setInputtingPassword(false)} htmlFor="password" className={styles.usernameLabel}> &lt;--- &lt;-- kembali </label>
-            <label htmlFor="password" className={styles.usernameLabel}>-------------------------</label>
+            <label htmlFor="password" className={styles.usernameLabel}>----------------------</label>
           </span>
 
           <input
diff --git a/src/components/Modal.js b/src/components/Modal.js
index c8e5f95..4726522 100644
--- a/src/components/Modal.js
+++ b/src/components/Modal.js
@@ -34,7 +34,7 @@ import CreateCoupon from "../pages/CreateCoupon";
 import CheckCoupon from "../pages/CheckCoupon";
 import CreateUserWithCoupon from "../pages/CreateUserWithCoupon";
 
-const Modal = ({ user, shop, isOpen, onClose, modalContent, deviceType, setModal, handleMoveToTransaction,welcomePageConfig, onModalCloseFunction }) => {
+const Modal = ({ user, shop, isOpen, onClose, modalContent, deviceType, setModal, handleMoveToTransaction,welcomePageConfig, onModalCloseFunction, onModalYesFunction }) => {
   
   const [shopImg, setShopImg] = useState('');
   const [updateKey, setUpdateKey] = useState(0);
@@ -62,6 +62,15 @@ const Modal = ({ user, shop, isOpen, onClose, modalContent, deviceType, setModal
     onClose(); // Close the modal
   };
 
+  const handleYes = (event) => {
+    if(onModalYesFunction) 
+      console.log('dawnawddjwand')
+    onModalYesFunction();
+  }
+
+  const handleNo = (event) => {
+    if(onModalCloseFunction) onModalCloseFunction();
+  }
 
   // Function to handle clicks on the modal content
   const handleContentClick = (event) => {
@@ -123,7 +132,7 @@ const Modal = ({ user, shop, isOpen, onClose, modalContent, deviceType, setModal
         {modalContent === "join" && <Join setModal={setModal} />}
         {modalContent === "claim-coupon" && <Join setModal={setModal} />}
         {modalContent === "loading" && <Loading setModal={setModal} />}
-        {modalContent === "message" && <Message/>}
+        {modalContent === "message" && <Message handleYes={handleYes}/>}
       </div>
     </div>
   );
diff --git a/src/components/MusicPlayer.css b/src/components/MusicPlayer.css
index 8ad26cd..f68f3e9 100644
--- a/src/components/MusicPlayer.css
+++ b/src/components/MusicPlayer.css
@@ -130,7 +130,7 @@
 }
 
 .expandable-container > div:first-child {
-  padding-top: 20px;
+  padding-top: 28px;
   
   -webkit-touch-callout: none; /* iOS Safari */
     -webkit-user-select: none; /* Safari */
@@ -167,7 +167,7 @@
   outline: none;
   
   transition: padding-top 0.3s ease;
-  padding-top: 8px;
+  padding-top: 13px;
   }
 
 .expand-button h5 {
diff --git a/src/components/StepByStep.js b/src/components/StepByStep.js
index 172d412..1d84367 100644
--- a/src/components/StepByStep.js
+++ b/src/components/StepByStep.js
@@ -1,9 +1,9 @@
 import React from 'react';
-import styles from './StepByStep.module.css'; // Import the CSS Module
+import styles from './StepByStep.module.css'; // Import the CSS module
 
 const StepByStep = () => {
   return (
-  <div className={styles.container}>
+    <div className={styles.container}>
     <div className={styles.screen}>
       <div className={styles.main}>
         <img src="https://i.ibb.co.com/F4VK6KHs/header.jpg" alt="Header" />
@@ -11,26 +11,38 @@ const StepByStep = () => {
           <img src="https://i.ibb.co.com/6cGq6byM/player1.jpg" alt="Player 1" />
           <img src="https://i.ibb.co.com/0VDjJdXV/player2.jpg" alt="Player 2" />
           <img src="https://i.ibb.co.com/8D3mSp4g/player3.jpg" alt="Player 3" />
-          <img src="https://i.ibb.co.com/XxS1DhRy/player4.jpg" alt="Player 4" />
+          <img src="https://i.ibb.co.com/tw7KkmZ1/player4.jpg" alt="Player 4" />
+          <img src="https://i.ibb.co.com/9k4PHW5W/player5.jpg" alt="Player 5" />
+          
+          <div>
+            <img src="https://i.ibb.co.com/TBYM6htX/search.jpg" alt="Search" />
+            <div></div>
+          </div>
+          
+          <img src="https://i.ibb.co.com/cSqD0LKR/music1.jpg" alt="Music 1" />
+          <img src="https://i.ibb.co.com/Q737mTn5/music2.jpg" alt="Music 2" />
+          <img src="https://i.ibb.co.com/Rk4tQW6M/music3.jpg" alt="Music 3" />
+          <div className={styles.borderRight}></div>
+          <div className={styles.whiteBg}></div>
         </div>
         <div>
           <img src="https://i.ibb.co.com/4z5zdsS/body.jpg" alt="Body" />
           <div className={styles.escappucino}>
-            <img src="https://i.ibb.co.com/yFvrPX8z/pesan.png" alt="Escappucino 1" />
-            <img src="https://i.ibb.co.com/rRwPHtY7/pesan-1.png" alt="Escappucino 2" />
+            <img src="https://i.ibb.co.com/yFvrPX8z/pesan.png" alt="Escappucino" />
+            <img src="https://i.ibb.co.com/rRwPHtY7/pesan-1.png" alt="Escappucino 1" />
           </div>
           <div className={styles.chickenkatsu}>
-            <img src="https://i.ibb.co.com/yFvrPX8z/pesan.png" alt="Chickenkatsu 1" />
-            <img src="https://i.ibb.co.com/rRwPHtY7/pesan-1.png" alt="Chickenkatsu 2" />
+            <img src="https://i.ibb.co.com/yFvrPX8z/pesan.png" alt="Chicken Katsu" />
+            <img src="https://i.ibb.co.com/rRwPHtY7/pesan-1.png" alt="Chicken Katsu 1" />
           </div>
         </div>
       </div>
       <div className={styles.cartbutton}>
-        <img src="https://i.ibb.co.com/zVrfGjZw/New-Project.png" alt="Cart Button" />
-        <img src="https://i.ibb.co.com/Y7wbjGDz/cart-2.png" alt="Cart Icon" />
+        <img src="https://i.ibb.co.com/zVrfGjZw/New-Project.png" alt="New Project" />
+        <img src="https://i.ibb.co.com/Y 7wbjGDz/cart-2.png" alt="Cart" />
       </div>
       <div className={styles.cart}>
-        <img src="https://i.ibb.co.com/F4Hb7Tqg/cart.jpg" alt="Cart Image" />
+        <img src="https://i.ibb.co.com/F4Hb7Tqg/cart.jpg" alt="Cart" />
         <img src="https://i.ibb.co.com/Mxrjc9Dc/checkout.png" alt="Checkout" />
       </div>
       <div className={styles.transaction}>
@@ -39,11 +51,11 @@ const StepByStep = () => {
     </div>
     <div className={styles.secondscreen}>
       <div className={styles.secondmain}>
-        <img src="https://i.ibb.co.com/LDw21htp/New-Project.jpg"/>
+        <img src="https://i.ibb.co.com/LDw21htp/New-Project.jpg" alt="Second Main" />
       </div>
     </div>
     </div>
   );
 };
 
-export default StepByStep;
+export default StepByStep;
\ No newline at end of file
diff --git a/src/components/StepByStep.module.css b/src/components/StepByStep.module.css
index 5ee410d..bc54436 100644
--- a/src/components/StepByStep.module.css
+++ b/src/components/StepByStep.module.css
@@ -36,649 +36,857 @@
     top: -62%;
     z-index: 10;
   }
-  
-  .secondmain {
-    width: 100%;
-    height: 100%;
-    animation: reportScrollBottom 5s infinite; /* Apply scroll animation only once */
-  }
-  .secondmain img {
-    width: 100%;
-  }
-  
-   @keyframes reportScrollBottom {
-    0% {
-      transform: translateY(0%); /* Start from the top */
-    }
-    30% {
-      transform: translateY(0%); /* Start from the top */
-    }
-    50% {
-      transform: translateY(-43%); /* Start from the top */
-    }
-    80% {
-      transform: translateY(-43%); /* Start from the top */
-    }
-    100% {
-      transform: translateY(0%); /* Start from the top */
-    }
-  }
-  
-  .main {
-    width: 100%;
-    height: 100%; /* Ensure the div fills the container */
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    animation: scrollBottom 20s infinite; /* Apply scroll animation only once */
-    position: absolute; /* Ensures it moves within the container */
-    background-color: white;
-  }
-  
-  .main img{
-    width: 100%;
-  }
-  
-  .main > div:nth-child(2) {
-    animation: playerClick 20s infinite;
-  }
-  
-  .main > div:nth-child(3) {
-    animation: bodyDown 20s infinite;
-  }
-  
-  /* Keyframes for scrolling the div content down */
-  @keyframes scrollBottom {
-    0% {
-      transform: translateY(0); /* Start from the top */
-    }
-    10% {
-      transform: translateY(0); /* Scale down at 20% */
-    }
-    15% {
-      transform: translateY(-50%); /* Move the content up */
-    }
-    57.5% {
-      transform: translateY(-50%); /* Move the content up */
-    }
-    62.5% {
-      transform: translateY(0%); /* Move the content up */
-    }
-    100% {
-      transform: translateY(0%); /* Move the content up */
-    }
-  }
-  
-  
-  /* New keyframes for scaling and opacity effect */
-  @keyframes playerClick {
-    0% {
-      transform: scale(1); /* Initial scale */
-    }
-    64% {
-      transform: scale(1); /* Initial scale */
-    }
-    65% {
-      transform: scale(0.8); /* Scale down */
-    }
-    66% {
-      transform: scale(1); /* Scale back to original size */
-    }
-    67% {
-      transform: scale(0.8); /* Scale down */
-    }
-    68% {
-      transform: scale(1); /* Scale back to original size */
-    }
-    94% {
-      transform: scale(1); /* Scale back to original size */
-    }
-    95% {
-      transform: scale(0.8); /* Scale back to original size */
-    }
-    96% {
-      transform: scale(1); /* Scale back to original size */
-    }
-    100% {
-      transform: scale(1); /* Scale back to original size */
-    }
-  }
-  
-  /* New keyframes for scaling and opacity effect */
-  @keyframes bodyDown {
-    0% {
-      margin-top: 0%;
-    }
-    64% {
-      margin-top: 0%;
-    }
-    65% {
-      margin-top: 20%;
-    }
-    66% {
-      margin-top: 20%;
-    }
-    67% {
-      margin-top: 96%;
-    }
-    90% {
-      margin-top: 96%;
-    }
-    91% {
-      margin-top: 20%;
-    }
-    97% {
-      margin-top: 20%;
-    }
-    98% {
-      margin-top: 0%;
-    }
-    100% {
-      margin-top: 0%;
-    }
-  }
-  
-  .player img{
-    width: 100%;
-  }
-  
-  .player > img:nth-child(1) {
-    animation: playerUnexpandedOpacity 20s infinite;
-  }
-  
-  .player > img:nth-child(2) {
-    animation: player2ExpandedOpacity 20s infinite;
-    position: absolute;
-    top: 0;
-    left: 0;
-  }
-  
-  .player > img:nth-child(3) {
-    animation: player3ExpandedOpacity 20s infinite;
-    position: absolute;
-    top: 0;
-    left: 0;
-  }
-  
-  .player > img:nth-child(4) {
-    animation: player4ExpandedOpacity 20s infinite;
-    position: absolute;
-    top: 0;
-    left: 0;
-  }
-  
-  /* New keyframes for scaling and opacity effect */
-  @keyframes playerUnexpandedOpacity {
-    0% {
-      filter: opacity(1); /* Initial scale */
-    }
-    65% {
-      filter: opacity(1);
-    }
-    66% {
-      filter: opacity(0);
-    }
-    95% {
-      filter: opacity(0);
-    }
-    96% {
-      filter: opacity(1);
-    }
-    100% {
-      filter: opacity(1); /* Scale back to original size */
-    }
-  }
-  
-  /* New keyframes for scaling and opacity effect */
-  @keyframes player2ExpandedOpacity {
-    0% {
-      filter: opacity(0); /* Initial scale */
-    }
-    65% {
-      filter: opacity(0);
-    }
-    66% {
-      filter: opacity(1);
-    }
-    67% {
-      filter: opacity(0); /* Scale back to original size */
-    }
-    100% {
-      filter: opacity(0); /* Scale back to original size */
-    }
-  }
-  
-  /* New keyframes for scaling and opacity effect */
-  @keyframes player3ExpandedOpacity {
-    0% {
-      filter: opacity(0); /* Initial scale */
-    }
-    66% {
-      filter: opacity(0);
-    }
-    67% {
-      filter: opacity(1);
-    }
-    90% {
-      filter: opacity(1);
-    }
-    91% {
-      filter: opacity(0);
-    }
-    100% {
-      filter: opacity(0); /* Scale back to original size */
-    }
-  }
-  
-  /* New keyframes for scaling and opacity effect */
-  @keyframes player4ExpandedOpacity {
-    0% {
-      filter: opacity(0); /* Initial scale */
-    }
-    90% {
-      filter: opacity(0);
-    }
-    91% {
-      filter: opacity(1);
-    }
-    95% {
-      filter: opacity(1);
-    }
-    97% {
-      filter: opacity(1);
-    }
-    98% {
-      filter: opacity(0);
-    }
-    100% {
-      filter: opacity(0); /* Scale back to original size */
-    }
-  }
-  
-  .escappucino {
-    position: relative;
-    top: -63.6%;
-    width: 100%;
-    animation: escappucinoscaleAnimation 20s infinite; /* Apply the scale animation */
-  }
-  
-  .escappucino img {
-    width: 100%;
-  }
-  
-  .escappucino > img:nth-child(1) {
-    position: absolute;
-    animation: escappucinochildOpacityAnimation 20s infinite;
-  }
-  
-  .escappucino > img:nth-child(2) {
-    animation: escappucinochildOpacityAnimation2 20s infinite;
-  }
-  
-  /* New keyframes for scaling and opacity effect */
-  @keyframes escappucinoscaleAnimation {
-    0% {
-      transform: scale(1); /* Initial scale */
-    }
-    5% {
-      transform: scale(1); /* Initial scale */
-    }
-    7.5% {
-      transform: scale(0.8); /* Scale down */
-    }
-    10% {
-      transform: scale(1); /* Scale back to original size */
-    }
-    100% {
-      transform: scale(1); /* Scale back to original size */
-    }
-  }
-  
-  @keyframes escappucinochildOpacityAnimation {
-    0% {
-      opacity: 1; /* Start visible */
-    }
-    5% {
-      opacity: 1; /* Start visible */
-    }
-    7.5% {
-      opacity: 0; /* Fade out at 70% */
-    }
-    10% {
-      opacity: 0; /* Keep faded out */
-    }
-    50% {
-      opacity: 0; /* Keep faded out */
-    }
-    60% {
-      opacity: 1; /* Keep faded out */
-    }
-    100% {
-      opacity: 1; /* Keep faded out */
-    }
-  }
-  
-  @keyframes escappucinochildOpacityAnimation2 {
-    0% {
-      opacity: 0; /* Start invisible */
-    }
-    5% {
-      opacity: 0; /* Start invisible */
-    }
-    7.5% {
-      opacity: 1; /* Fade in at 70% */
-    }
-    10% {
-      opacity: 1; /* Keep visible */
-    }
-    50% {
-      opacity: 1; /* Keep faded out */
-    }
-    60% {
-      opacity: 0; /* Keep faded out */
-    }
-    100% {
-      opacity: 0; /* Keep faded out */
-    }
-  }
-  
-  .chickenkatsu {
-    position: relative;
-    top: -27.6%;
-    width: 100%;
-    animation: chickenkatsuscaleAnimation 20s infinite; /* Apply the scale animation */
-  }
-  
-  .chickenkatsu img {
-    width: 100%;
-  }
-  
-  .chickenkatsu > img:nth-child(1) {
-    position: absolute;
-    animation: chickenkatsuchildOpacityAnimation 20s infinite;
-  }
-  
-  .chickenkatsu > img:nth-child(2) {
-    animation: chickenkatsuchildOpacityAnimation2 20s infinite;
-  }
-  
-  /* New keyframes for scaling and opacity effect */
-  @keyframes chickenkatsuscaleAnimation {
-    0% {
-      transform: scale(1); /* Initial scale */
-    }
-    15% {
-      transform: scale(1); /* Initial scale */
-    }
-    17.5% {
-      transform: scale(0.8); /* Scale down */
-    }
-    20% {
-      transform: scale(1); /* Scale back to original size */
-    }
-    100% {
-      transform: scale(1); /* Scale back to original size */
-    }
-  }
-  
-  @keyframes chickenkatsuchildOpacityAnimation {
-    0% {
-      opacity: 1; /* Start visible */
-    }
-    15% {
-      opacity: 1; /* Start visible */
-    }
-    17.5% {
-      opacity: 0; /* Fade out at 70% */
-    }
-    20% {
-      opacity: 0; /* Keep faded out */
-    }
-    50% {
-      opacity: 0; /* Keep faded out */
-    }
-    60% {
-      opacity: 1; /* Keep faded out */
-    }
-    100% {
-      opacity: 1; /* Keep faded out */
-    }
-  }
-  
-  @keyframes chickenkatsuchildOpacityAnimation2 {
-    0% {
-      opacity: 0; /* Start visible */
-    }
-    15% {
-      opacity: 0; /* Start visible */
-    }
-    17.5% {
-      opacity: 1; /* Fade out at 70% */
-    }
-    20% {
-      opacity: 1; /* Keep faded out */
-    }
-    50% {
-      opacity: 1; /* Keep faded out */
-    }
-    60% {
-      opacity: 0; /* Keep faded out */
-    }
-    100% {
-      opacity: 0; /* Keep faded out */
-    }
-  }
-  
-  .cartbutton{
-    position: absolute;
-    width: 100%;
-    top: 86%;
-    animation: cartbuttonscaleAnimation 20s infinite; /* Apply the scale animation */
-  }
-  
-  .cartbutton img {
-    width: 100%;
-  }
-  
-  .cartbutton > img:nth-child(1) {
-    position: absolute;
-    animation: cartbuttonchildOpacityAnimation 20s infinite;
-  }
-  
-  .cartbutton > img:nth-child(2) {
-    animation: cartbuttonchildOpacityAnimation2 20s infinite;
-  }
-  
-  /* New keyframes for scaling and opacity effect */
-  @keyframes cartbuttonscaleAnimation {
-    0% {
-      transform: scale(1); /* Initial scale */
-      filter: opacity(0);
-    }
-    5% {
-      transform: scale(1); /* Initial scale */
-      filter: opacity(0);
-    }
-    7.5% {
-      transform: scale(1); /* Initial scale */
-      filter: opacity(1);
-    }
-    25% {
-      transform: scale(1); /* Initial scale */
-    }
-    27.5% {
-      transform: scale(0.8); /* Scale down */
-    }
-    30% {
-      transform: scale(1); /* Scale back to original size */
-    }
-    50% {
-      transform: scale(1); /* Scale back to original size */
-      filter: opacity(1);
-    }
-    60% {
-      transform: scale(1); /* Scale back to original size */
-      filter: opacity(0);
-    }
-    100% {
-      transform: scale(1); /* Scale back to original size */
-      filter: opacity(0);
-    }
-  }
-  
-  @keyframes cartbuttonchildOpacityAnimation {
-    0% {
-      opacity: 1; /* Start visible */
-    }
-    15% {
-      opacity: 1; /* Start visible */
-    }
-    17.5% {
-      opacity: 0; /* Fade out at 70% */
-    }
-    20% {
-      opacity: 0; /* Keep faded out */
-    }
-    100% {
-      opacity: 0; /* Keep faded out */
-    }
-  }
-  
-  @keyframes cartbuttonchildOpacityAnimation2 {
-    0% {
-      opacity: 0; /* Start invisible */
-    }
-    15% {
-      opacity: 0; /* Start invisible */
-    }
-    17.5% {
-      opacity: 1; /* Fade in at 70% */
-    }
-    20% {
-      opacity: 1; /* Keep visible */
-    }
-    100% {
-      opacity: 1; /* Keep visible */
-    }
-  }
-  
-  
-  .cart{
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    left: 100%;
-    animation: cartslideinAnimation 20s infinite; /* Apply the scale animation */
-  }
-  
-  .cart > img:nth-child(1) {
-    width: 100%;
-    height: 100%;
-  }
-  
-  .cart > img:nth-child(2) {
-    width: 100%;
-    position: absolute;
-    top: 90.7%;
-    left: 0;
-    animation: checkoutbuttonscaleAnimation 20s infinite; /* Apply the scale animation */
-  }
-  
-  @keyframes cartslideinAnimation {
-    0% {
+    
+    .secondmain {
+      width: 100%;
+      height: 100%;
+      animation: reportScrollBottom 5s infinite; /* Apply scroll animation only once */
+    }
+    .secondmain img {
+      width: 100%;
+    }
+    
+     @keyframes reportScrollBottom {
+      0% {
+        transform: translateY(0%); /* Start from the top */
+      }
+      30% {
+        transform: translateY(0%); /* Start from the top */
+      }
+      50% {
+        transform: translateY(-43%); /* Start from the top */
+      }
+      80% {
+        transform: translateY(-43%); /* Start from the top */
+      }
+      100% {
+        transform: translateY(0%); /* Start from the top */
+      }
+    }
+    
+    .main {
+      width: 100%;
+      height: 100%; /* Ensure the div fills the container */
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+      animation: scrollBottom 20s infinite; /* Apply scroll animation only once */
+      position: absolute; /* Ensures it moves within the container */
+      background-color: white;
+    }
+    
+    .main img{
+      width: 100%;
+    }
+    
+    .main > div:nth-child(2) {
+      animation: playerClick 20s infinite;
+    }
+    
+    .main > div:nth-child(3) {
+      animation: bodyDown 20s infinite;
+    }
+    
+    /* Keyframes for scrolling the div content down */
+    @keyframes scrollBottom {
+      0% {
+        transform: translateY(0); /* Start from the top */
+      }
+      10% {
+        transform: translateY(0); /* Scale down at 20% */
+      }
+      15% {
+        transform: translateY(-50%); /* Move the content up */
+      }
+      57.5% {
+        transform: translateY(-50%); /* Move the content up */
+      }
+      62.5% {
+        transform: translateY(0%); /* Move the content up */
+      }
+      100% {
+        transform: translateY(0%); /* Move the content up */
+      }
+    }
+    
+    
+    /* New keyframes for scaling and opacity effect */
+    @keyframes playerClick {
+      0% {
+        transform: scale(1); /* Initial scale */
+      }
+      64% {
+        transform: scale(1); /* Initial scale */
+      }
+      65% {
+        transform: scale(0.8); /* Scale down */
+      }
+      66% {
+        transform: scale(1); /* Scale back to original size */
+      }
+      67% {
+        transform: scale(0.8); /* Scale down */
+      }
+      68% {
+        transform: scale(1); /* Scale back to original size */
+      }
+      90% {
+        transform: scale(1); /* Scale back to original size */
+      }
+      91% {
+        transform: scale(0.8); /* Scale back to original size */
+      }
+      92% {
+        transform: scale(1); /* Scale back to original size */
+      }
+      94% {
+        transform: scale(1); /* Scale back to original size */
+      }
+      95% {
+        transform: scale(0.8); /* Scale back to original size */
+      }
+      96% {
+        transform: scale(1); /* Scale back to original size */
+      }
+      100% {
+        transform: scale(1); /* Scale back to original size */
+      }
+    }
+    
+    /* New keyframes for scaling and opacity effect */
+    @keyframes bodyDown {
+      0% {
+        margin-top: 0%;
+      }
+      64% {
+        margin-top: 0%;
+      }
+      65% {
+        margin-top: 20%;
+      }
+      66% {
+        margin-top: 20%;
+      }
+      67% {
+        margin-top: 96%;
+      }
+      90% {
+        margin-top: 96%;
+      }
+      91% {
+        margin-top: 20%;
+      }
+      97% {
+        margin-top: 20%;
+      }
+      98% {
+        margin-top: 0%;
+      }
+      100% {
+        margin-top: 0%;
+      }
+    }
+    
+    .player img{
+      width: 100%;
+    }
+    
+    .player > img:nth-child(1) {
+      animation: playerUnexpandedOpacity 20s infinite;
+    }
+    
+    .player > img:nth-child(2) {
+      animation: player2ExpandedOpacity 20s infinite;
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+    
+    .player > img:nth-child(3) {
+      animation: player3ExpandedOpacity 20s infinite;
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+    
+    .player > img:nth-child(4) {
+      animation: player4ExpandedOpacity 20s infinite;
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+    
+    .player > img:nth-child(5) {
+      animation: player5ExpandedOpacity 20s infinite;
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+    
+    .player > div:nth-child(6) {
+      animation: playerSearch 20s infinite;
+      position: absolute;
+      top: 207%;
+      left: 0;
+      width: 100%;
+      z-index: 6;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    
+    .player > div:nth-child(6)  > img:nth-child(1){
+      width: 70%;
+      height: 70%;
+      object-fit: contain;
+    }
+    .player > div:nth-child(6)  > div:nth-child(2){
+      position: absolute;
+      animation: playerSearchText 20s infinite;
+      width: 30%;
+      height: 80%;
+      background-color: #f3efe6;
+    }
+    .player > img:nth-child(7) {
+      animation: musicExpanded 20s infinite;
+      position: absolute;
+      top: 280%;
+      left: 0;
+      z-index: 6;
+    }
+    
+    .player > img:nth-child(8) {
+      animation: music2Expanded 20s infinite;
+      position: absolute;
+      top: 390%;
+      left: 0;
+      z-index: 6;
+    }
+    
+    .player > img:nth-child(9) {
+      animation: musicExpanded 20s infinite;
+      position: absolute;
+      top: 500%;
+      left: 0;
+      z-index: 6;
+    }
+    
+    .borderRight {
+      position: absolute;
+      width: 5%;
+      height: 150%;
+      background-color: white;
+      right: -2%;
+      top: 370%;
+      animation: musicExpanded 20s infinite;
+      z-index: 6;
+    }
+    
+    .whiteBg {
+      position: absolute;
+      width: 90%;
+      height: 180%;
+      background-color: white;
+      top: 370%;
+      animation: musicExpanded 20s infinite;
+      z-index: 5;
+    }
+    
+    /* New keyframes for scaling and opacity effect */
+    @keyframes playerSearch {
+      0% {
+        filter: opacity(0); /* Initial scale */
+      }
+      67% {
+        filter: opacity(0); /* Initial scale */
+      }
+      70% {
+        filter: opacity(1); /* Initial scale */
+      }
+      79% {
+        filter: opacity(1); /* Initial scale */
+      }
+      81% {
+        filter: opacity(0); /* Initial scale */
+      }
+      100% {
+        filter: opacity(0); /* Initial scale */
+      }
+    }
+      @keyframes playerSearchText {
+      0% {
+        transform: translate(0%,0);
+      }
+      71% {      
+        transform: translate(0%,0);
+      }
+      74% {      
+        transform: translate(70%,0);
+      }
+      100% {
+        transform: translate(70%,0);
+      }
+    }
+    /* New keyframes for scaling and opacity effect */
+    @keyframes musicExpanded {
+      0% {
+        filter: opacity(0); /* Initial scale */
+      }
+      73% {
+        filter: opacity(0);
+        transform: scale(0.7);
+      }
+      75% {
+        filter: opacity(1);
+        transform: scale(0.9);
+      }
+      89% {
+        filter: opacity(1);
+      }
+      90% {
+        filter: opacity(0);
+      }
+      98% {
+        filter: opacity(0);
+      }
+      100% {
+        filter: opacity(0); /* Scale back to original size */
+        transform: scale(0.9);
+      }
+    }
+    
+    /* New keyframes for scaling and opacity effect */
+    @keyframes music2Expanded {
+      0% {
+        filter: opacity(0); /* Initial scale */
+      }
+      73% {
+        filter: opacity(0);
+        transform: scale(0.7);
+      }
+      75% {
+        filter: opacity(1);
+        transform: scale(0.9);
+      }
+      77% {
+        filter: opacity(1);
+        transform: scale(0.9);
+      }
+      79% {
+        filter: opacity(1);
+        transform: scale(0.8) translate(0,0);
+      }
+      85% {
+        filter: opacity(1);
+        transform: scale(0.8) translate(120%,0);
+      }
+      89% {
+        filter: opacity(1);
+      }
+      90% {
+        filter: opacity(0);
+      }
+      98% {
+        filter: opacity(0);
+      }
+      100% {
+        filter: opacity(0); /* Scale back to original size */
+        transform: scale(0.8) translate(120%,0);
+      }
+    }
+    /* New keyframes for scaling and opacity effect */
+    @keyframes playerUnexpandedOpacity {
+      0% {
+        filter: opacity(1); /* Initial scale */
+      }
+      65% {
+        filter: opacity(1);
+      }
+      66% {
+        filter: opacity(0);
+      }
+      94% {
+        filter: opacity(0);
+      }
+      95% {
+        filter: opacity(1);
+      }
+      100% {
+        filter: opacity(1); /* Scale back to original size */
+      }
+    }
+    
+    /* New keyframes for scaling and opacity effect */
+    @keyframes player2ExpandedOpacity {
+      0% {
+        filter: opacity(0); /* Initial scale */
+      }
+      65% {
+        filter: opacity(0);
+      }
+      66% {
+        filter: opacity(1);
+      }
+      67% {
+        filter: opacity(0); /* Scale back to original size */
+      }
+      100% {
+        filter: opacity(0); /* Scale back to original size */
+      }
+    }
+    
+    /* New keyframes for scaling and opacity effect */
+    @keyframes player3ExpandedOpacity {
+      0% {
+        filter: opacity(0); /* Initial scale */
+      }
+      66% {
+        filter: opacity(0);
+      }
+      67% {
+        filter: opacity(1);
+      }
+      89% {
+        filter: opacity(1);
+      }
+      90% {
+        filter: opacity(0);
+      }
+      100% {
+        filter: opacity(0); /* Scale back to original size */
+      }
+    }
+    
+    /* New keyframes for scaling and opacity effect */
+    @keyframes player4ExpandedOpacity {
+      0% {
+        filter: opacity(0); /* Initial scale */
+      }
+      84% {
+        filter: opacity(0);
+      }
+      85% {
+        filter: opacity(1);
+      }
+      89% {
+        filter: opacity(1);
+      }
+      90% {
+        filter: opacity(0);
+      }
+      100% {
+        filter: opacity(0); /* Scale back to original size */
+      }
+    }
+    
+    /* New keyframes for scaling and opacity effect */
+    @keyframes player5ExpandedOpacity {
+      0% {
+        filter: opacity(0); /* Initial scale */
+      }
+      90% {
+        filter: opacity(0);
+      }
+      91% {
+        filter: opacity(1);
+      }
+      95% {
+        filter: opacity(1);
+      }
+      96% {
+        filter: opacity(0);
+      }
+      98% {
+        filter: opacity(0);
+      }
+      100% {
+        filter: opacity(0); /* Scale back to original size */
+      }
+    }
+    .escappucino {
+      position: relative;
+      top: -63.6%;
+      width: 100%;
+      animation: escappucinoscaleAnimation 20s infinite; /* Apply the scale animation */
+    }
+    
+    .escappucino img {
+      width: 100%;
+    }
+    
+    .escappucino > img:nth-child(1) {
+      position: absolute;
+      animation: escappucinochildOpacityAnimation 20s infinite;
+    }
+    
+    .escappucino > img:nth-child(2) {
+      animation: escappucinochildOpacityAnimation2 20s infinite;
+    }
+    
+    /* New keyframes for scaling and opacity effect */
+    @keyframes escappucinoscaleAnimation {
+      0% {
+        transform: scale(1); /* Initial scale */
+      }
+      5% {
+        transform: scale(1); /* Initial scale */
+      }
+      7.5% {
+        transform: scale(0.8); /* Scale down */
+      }
+      10% {
+        transform: scale(1); /* Scale back to original size */
+      }
+      100% {
+        transform: scale(1); /* Scale back to original size */
+      }
+    }
+    
+    @keyframes escappucinochildOpacityAnimation {
+      0% {
+        opacity: 1; /* Start visible */
+      }
+      5% {
+        opacity: 1; /* Start visible */
+      }
+      7.5% {
+        opacity: 0; /* Fade out at 70% */
+      }
+      10% {
+        opacity: 0; /* Keep faded out */
+      }
+      50% {
+        opacity: 0; /* Keep faded out */
+      }
+      60% {
+        opacity: 1; /* Keep faded out */
+      }
+      100% {
+        opacity: 1; /* Keep faded out */
+      }
+    }
+    
+    @keyframes escappucinochildOpacityAnimation2 {
+      0% {
+        opacity: 0; /* Start invisible */
+      }
+      5% {
+        opacity: 0; /* Start invisible */
+      }
+      7.5% {
+        opacity: 1; /* Fade in at 70% */
+      }
+      10% {
+        opacity: 1; /* Keep visible */
+      }
+      50% {
+        opacity: 1; /* Keep faded out */
+      }
+      60% {
+        opacity: 0; /* Keep faded out */
+      }
+      100% {
+        opacity: 0; /* Keep faded out */
+      }
+    }
+    
+    .chickenkatsu {
+      position: relative;
+      top: -27.6%;
+      width: 100%;
+      animation: chickenkatsuscaleAnimation 20s infinite; /* Apply the scale animation */
+    }
+    
+    .chickenkatsu img {
+      width: 100%;
+    }
+    
+    .chickenkatsu > img:nth-child(1) {
+      position: absolute;
+      animation: chickenkatsuchildOpacityAnimation 20s infinite;
+    }
+    
+    .chickenkatsu > img:nth-child(2) {
+      animation: chickenkatsuchildOpacityAnimation2 20s infinite;
+    }
+    
+    /* New keyframes for scaling and opacity effect */
+    @keyframes chickenkatsuscaleAnimation {
+      0% {
+        transform: scale(1); /* Initial scale */
+      }
+      15% {
+        transform: scale(1); /* Initial scale */
+      }
+      17.5% {
+        transform: scale(0.8); /* Scale down */
+      }
+      20% {
+        transform: scale(1); /* Scale back to original size */
+      }
+      100% {
+        transform: scale(1); /* Scale back to original size */
+      }
+    }
+    
+    @keyframes chickenkatsuchildOpacityAnimation {
+      0% {
+        opacity: 1; /* Start visible */
+      }
+      15% {
+        opacity: 1; /* Start visible */
+      }
+      17.5% {
+        opacity: 0; /* Fade out at 70% */
+      }
+      20% {
+        opacity: 0; /* Keep faded out */
+      }
+      50% {
+        opacity: 0; /* Keep faded out */
+      }
+      60% {
+        opacity: 1; /* Keep faded out */
+      }
+      100% {
+        opacity: 1; /* Keep faded out */
+      }
+    }
+    
+    @keyframes chickenkatsuchildOpacityAnimation2 {
+      0% {
+        opacity: 0; /* Start visible */
+      }
+      15% {
+        opacity: 0; /* Start visible */
+      }
+      17.5% {
+        opacity: 1; /* Fade out at 70% */
+      }
+      20% {
+        opacity: 1; /* Keep faded out */
+      }
+      50% {
+        opacity: 1; /* Keep faded out */
+      }
+      60% {
+        opacity: 0; /* Keep faded out */
+      }
+      100% {
+        opacity: 0; /* Keep faded out */
+      }
+    }
+    
+    .cartbutton{
+      position: absolute;
+      width: 100%;
+      top: 86%;
+      animation: cartbuttonscaleAnimation 20s infinite; /* Apply the scale animation */
+    }
+    
+    .cartbutton img {
+      width: 100%;
+    }
+    
+    .cartbutton > img:nth-child(1) {
+      position: absolute;
+      animation: cartbuttonchildOpacityAnimation 20s infinite;
+    }
+    
+    .cartbutton > img:nth-child(2) {
+      animation: cartbuttonchildOpacityAnimation2 20s infinite;
+    }
+    
+    /* New keyframes for scaling and opacity effect */
+    @keyframes cartbuttonscaleAnimation {
+      0% {
+        transform: scale(1); /* Initial scale */
+        filter: opacity(0);
+      }
+      5% {
+        transform: scale(1); /* Initial scale */
+        filter: opacity(0);
+      }
+      7.5% {
+        transform: scale(1); /* Initial scale */
+        filter: opacity(1);
+      }
+      25% {
+        transform: scale(1); /* Initial scale */
+      }
+      27.5% {
+        transform: scale(0.8); /* Scale down */
+      }
+      30% {
+        transform: scale(1); /* Scale back to original size */
+      }
+      50% {
+        transform: scale(1); /* Scale back to original size */
+        filter: opacity(1);
+      }
+      60% {
+        transform: scale(1); /* Scale back to original size */
+        filter: opacity(0);
+      }
+      100% {
+        transform: scale(1); /* Scale back to original size */
+        filter: opacity(0);
+      }
+    }
+    
+    @keyframes cartbuttonchildOpacityAnimation {
+      0% {
+        opacity: 1; /* Start visible */
+      }
+      15% {
+        opacity: 1; /* Start visible */
+      }
+      17.5% {
+        opacity: 0; /* Fade out at 70% */
+      }
+      20% {
+        opacity: 0; /* Keep faded out */
+      }
+      100% {
+        opacity: 0; /* Keep faded out */
+      }
+    }
+    
+    @keyframes cartbuttonchildOpacityAnimation2 {
+      0% {
+        opacity: 0; /* Start invisible */
+      }
+      15% {
+        opacity: 0; /* Start invisible */
+      }
+      17.5% {
+        opacity: 1; /* Fade in at 70% */
+      }
+      20% {
+        opacity: 1; /* Keep visible */
+      }
+      100% {
+        opacity: 1; /* Keep visible */
+      }
+    }
+    
+    
+    .cart{
+      position: absolute;
+      width: 100%;
+      height: 100%;
       left: 100%;
+      animation: cartslideinAnimation 20s infinite; /* Apply the scale animation */
     }
-    30% {
-      left: 100%;
+    
+    .cart > img:nth-child(1) {
+      width: 100%;
+      height: 100%;
     }
-    32.5% {
-      left: 0%;
+    
+    .cart > img:nth-child(2) {
+      width: 100%;
+      position: absolute;
+      top: 90.7%;
+      left: 0;
+      animation: checkoutbuttonscaleAnimation 20s infinite; /* Apply the scale animation */
     }
-    55% {
-      left: 0%;
+    
+    @keyframes cartslideinAnimation {
+      0% {
+        left: 100%;
+      }
+      30% {
+        left: 100%;
+      }
+      32.5% {
+        left: 0%;
+      }
+      55% {
+        left: 0%;
+      }
+      57.5% {
+        left: 100%;
+      }
+      100% {
+        left: 100%;
+      }
     }
-    57.5% {
-      left: 100%;
+    
+    /* New keyframes for scaling and opacity effect */
+    @keyframes checkoutbuttonscaleAnimation {
+      0% {
+        transform: scale(1); /* Initial scale */
+      }
+      37.5% {
+        transform: scale(1); /* Initial scale */
+      }
+      40% {
+        transform: scale(0.8); /* Scale down */
+      }
+      42.5% {
+        transform: scale(1); /* Scale back to original size */
+      }
+      100% {
+        transform: scale(1); /* Scale back to original size */
+      }
     }
-    100% {
-      left: 100%;
+    
+    .transaction{
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      animation: transactionAnimation 20s infinite;
+      background-color: #0000006b;
+      display: flex;
+      justify-content: center;
+      align-items: center;
     }
-  }
-  
-  /* New keyframes for scaling and opacity effect */
-  @keyframes checkoutbuttonscaleAnimation {
-    0% {
-      transform: scale(1); /* Initial scale */
+    
+    .transaction img {
+      width: 80%;
+      animation: transactionElementAnimation 20s infinite;
     }
-    37.5% {
-      transform: scale(1); /* Initial scale */
+    
+    /* New keyframes for scaling and opacity effect */
+    @keyframes transactionAnimation {
+      0% {
+        filter: opacity(0);
+      }
+      42.5% {
+        filter: opacity(0);
+      }
+      45% {
+        filter: opacity(1);
+      }
+      52.5% {
+        filter: opacity(1);
+      }
+      55% {
+        filter: opacity(0);
+      }
+      100% {
+        filter: opacity(0);
+      }
     }
-    40% {
-      transform: scale(0.8); /* Scale down */
-    }
-    42.5% {
-      transform: scale(1); /* Scale back to original size */
-    }
-    100% {
-      transform: scale(1); /* Scale back to original size */
-    }
-  }
-  
-  .transaction{
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    animation: transactionAnimation 20s infinite;
-    background-color: #0000006b;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-  
-  .transaction img {
-    width: 80%;
-    animation: transactionElementAnimation 20s infinite;
-  }
-  
-  /* New keyframes for scaling and opacity effect */
-  @keyframes transactionAnimation {
-    0% {
-      filter: opacity(0);
-    }
-    42.5% {
-      filter: opacity(0);
-    }
-    45% {
-      filter: opacity(1);
-    }
-    52.5% {
-      filter: opacity(1);
-    }
-    55% {
-      filter: opacity(0);
-    }
-    100% {
-      filter: opacity(0);
-    }
-  }
-  /* New keyframes for scaling and opacity effect */
-  @keyframes transactionElementAnimation {
-    0% {
-      transform: scale(0); /* Initial scale */
-    }
-    42.5% {
-      transform: scale(0); /* Initial scale */
-    }
-    45% {
-      transform: scale(1); /* Scale down */
-    }
-    52.5% {
-      transform: scale(1); /* Scale down */
-    }
-    55% {
-      transform: scale(0); /* Scale down */
-    }
-    100% {
-      transform: scale(0); /* Scale back to original size */
-    }
-  }
\ No newline at end of file
+    /* New keyframes for scaling and opacity effect */
+    @keyframes transactionElementAnimation {
+      0% {
+        transform: scale(0); /* Initial scale */
+      }
+      42.5% {
+        transform: scale(0); /* Initial scale */
+      }
+      45% {
+        transform: scale(1); /* Scale down */
+      }
+      52.5% {
+        transform: scale(1); /* Scale down */
+      }
+      55% {
+        transform: scale(0); /* Scale down */
+      }
+      100% {
+        transform: scale(0); /* Scale back to original size */
+      }
+    }
\ No newline at end of file
diff --git a/src/components/Watermark.js b/src/components/Watermark.js
index bd0a07c..0eefe95 100644
--- a/src/components/Watermark.js
+++ b/src/components/Watermark.js
@@ -6,7 +6,7 @@ const Watermark = ({dontShowName}) => {
     <div style={{ zIndex: 5, marginTop: '30px', backgroundColor: 'rgb(222 237 100)', fontWeight: 700, fontSize: '15px', lineHeight: '1rem', letterSpacing: '-1px', color: 'rgb(37, 79, 26)', padding: '10px' }}>
       {!dontShowName && <div>KEDAIMASTER.COM</div>}
       <div style={{ display: 'flex' }}>
-        <div style={{ width: '45vw', marginTop: '10px', fontSize: '5.5vw', lineHeight: '33px' }}>Gak perlu rasain antri panjang yang bikin bosen lagi. Tinggal scan QR yang ada di meja, eh tiba tiba pesanan udah dimejamu</div>
+        <div style={{ width: '45vw', marginTop: '10px', fontSize: '5.5vw', lineHeight: '33px' }}>Gak perlu rasain antri panjang yang bikin bosen lagi. Tinggal scan QR yang ada di meja, eh tiba tiba kamu udah kenyang wkwkkw</div>
         <StepByStep />
       </div>
       <div style={{ marginTop: '8px' }}>© 2025 KEDIRITECHNOPARK.COM</div>
diff --git a/src/config.js b/src/config.js
index 6cf67cc..967c5ce 100644
--- a/src/config.js
+++ b/src/config.js
@@ -1,5 +1,5 @@
 // src/config.js
 
-const API_BASE_URL = 'https://dev.api.kedaimaster.com';
+const API_BASE_URL = 'https://api.kedaimaster.com';
 
 export default API_BASE_URL;
diff --git a/src/pages/CafePage.js b/src/pages/CafePage.js
index 4caf299..5f8712a 100644
--- a/src/pages/CafePage.js
+++ b/src/pages/CafePage.js
@@ -10,6 +10,7 @@ import {
 
 import "../App.css";
 
+import API_BASE_URL from '../config';
 import Watermark from "../components/Watermark";
 import { getImageUrl, createItem, updateItem, moveItemType } from "../helpers/itemHelper.js";
 import SearchInput from "../components/SearchInput";
@@ -140,7 +141,7 @@ function CafePage({
       socket.on("joined-room", (response) => {
         const { isSpotifyNeedLogin, isExceededDeadline } = response;
         setNeedSpotifyLogin(isSpotifyNeedLogin);
-        if (isExceededDeadline) setModal('message',{returnMessage:'Kafe sedang tidak tersedia'});
+        if (isExceededDeadline) setModal('message',{captMessage:'Kafe sedang tidak tersedia'});
         setIsExceededDeadline(isExceededDeadline);
       });
     }
@@ -199,7 +200,7 @@ function CafePage({
   else
     return (
       <>
-        {welcomePageConfig && isStarted ? (
+        {/* {welcomePageConfig && isStarted ? (
           <WelcomePage
             image={config.image}
             welcomingText={config.welcomingText}
@@ -209,9 +210,12 @@ function CafePage({
             onGetStarted={handleGetStarted}
             isFullscreen={true}
           />
-        ) : (
-          welcomePageConfig != null && (
-            <div className="Cafe" style={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-between', minHeight: '100vh', filter: isExceededDeadline ? 'grayscale(1)' : '', pointerEvents: isExceededDeadline ? 'none' : '' }}>
+        ) : ( */}
+            <div className={`Cafe ${isExceededDeadline ? 'grayscale' : ''}`}>
+              
+            {API_BASE_URL != 'https://api.kedaimaster.com' &&
+              <div className="Watermark"></div>
+            }
               <div className="App-header">
                 <Header
                   HeaderText={"Menu"}
@@ -363,8 +367,7 @@ function CafePage({
               </div>
               <Watermark/>
             </div>
-          )
-        )}
+        {/* )} */}
       </>
     );
 }
diff --git a/src/pages/CreateCoupon.js b/src/pages/CreateCoupon.js
index 3833ee6..0ed594a 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://dev.coupon.kedaimaster.com/coupon?c=${encodedCouponCode}`;
+      const urlWithCoupon = `https://coupon.kedaimaster.com/coupon?c=${encodedCouponCode}`;
   
       // Optionally, set the URL to use with the coupon
       setCouponUrl(urlWithCoupon);
diff --git a/src/pages/Dashboard.js b/src/pages/Dashboard.js
index 5532942..70cb076 100644
--- a/src/pages/Dashboard.js
+++ b/src/pages/Dashboard.js
@@ -35,7 +35,6 @@ const LinktreePage = ({ user, setModal }) => {
   const [selectedSubItemId, setSelectedSubItemId] = useState(0);
   const [coupons, setCoupons] = useState(null);
 
-
   useEffect(() => {
     const urlParams = new URLSearchParams(location.search);
     const modalParam = urlParams.get('modal');
@@ -126,6 +125,7 @@ const LinktreePage = ({ user, setModal }) => {
   useEffect(() => {
     if (user) {
       setLoading(true);
+      document.body.style.backgroundColor = "white";
       switch (user.roleId) {
         case 0:
           getAnalytics().then(setItems).catch(console.error).finally(() => setLoading(false));
@@ -138,6 +138,7 @@ const LinktreePage = ({ user, setModal }) => {
           break;
         default:
           setLoading(false);
+          document.body.style.backgroundColor = "rgb(222, 237, 100)";
           break;
       }
     }
diff --git a/src/pages/Join.js b/src/pages/Join.js
index 3b985c2..3bf2482 100644
--- a/src/pages/Join.js
+++ b/src/pages/Join.js
@@ -192,11 +192,11 @@ const LinktreePage = ({ data, setModal }) => {
                     
                           const loggingcoupon = await handleLogCouponForUser(); // Await the coupon logging process
                           setModal('message', { 
-                            returnMessage: loggingcoupon ? 'Kupon berhasil ditambahkan' : 'Kupon gagal ditambahkan' 
+                            captMessage: loggingcoupon ? 'Kupon berhasil ditambahkan' : 'Kupon gagal ditambahkan' 
                           });
                         } catch (error) {
                           console.error('Error during coupon handling:', error);
-                          setModal('message', { returnMessage: 'Kupon gagal ditambahkan' });
+                          setModal('message', { captMessage: 'Kupon gagal ditambahkan' });
                         }
                       }
                     }}                    
diff --git a/src/pages/Join.module.css b/src/pages/Join.module.css
index b026a53..0eb5eb6 100644
--- a/src/pages/Join.module.css
+++ b/src/pages/Join.module.css
@@ -12,7 +12,7 @@
 
 .dashboardContainer {
   z-index: 6;
-  padding-top: 40px;
+  padding: 40px 3px 15px 3px;
 }
 
 /* Main Heading */
@@ -25,7 +25,27 @@
   letter-spacing: -1px;
   color: rgb(37, 79, 26);
 }
+.button {
+  color: white;
+  background-color: rgb(37, 79, 26);
+  border-radius: 25px;
+  padding: 0px 0px 0px 18px;
+  width: 222px;
+  font-weight: 700;
+  font-size: 32px;
+  line-height: 2.25rem;
+  letter-spacing: -1px;
+}
 
+.descHeading {
+  width: 99%;
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 1.25rem;
+  margin-bottom: 1rem;
+  letter-spacing: -1px;
+  color: rgb(37, 79, 26);
+}
 /* Main Heading */
 .voucherHeading {
   font-weight: 700;
diff --git a/src/pages/LinktreePage.module.css b/src/pages/LinktreePage.module.css
index bfb8823..e2b68f3 100644
--- a/src/pages/LinktreePage.module.css
+++ b/src/pages/LinktreePage.module.css
@@ -20,6 +20,7 @@
   z-index: 6;
   padding: 0 1rem;
   padding-top: 100px;
+  margin-bottom: 30px;
 }
 
 /* Main Heading */
diff --git a/src/pages/Message.js b/src/pages/Message.js
index 6c8119c..4c8d855 100644
--- a/src/pages/Message.js
+++ b/src/pages/Message.js
@@ -2,24 +2,26 @@
 import React, { useState, useEffect } from 'react';
 import styles from './Join.module.css'; // Import the module.css file
 
-const LinktreePage = () => {
-  const [returnMessage, setReturnMessage] = useState('');
+const LinktreePage = ({ handleYes }) => {
+  const [captMessage, setCaptMessage] = useState('');
+  const [descMessage, setDescMessage] = useState('');
 
   useEffect(() => {
       const newQueryParams = new URLSearchParams(window.location.search);
-      const r = newQueryParams.get('returnMessage');
+      const r = newQueryParams.get('captMessage');
+      const s = newQueryParams.get('descMessage');
       if (r) {
-        setReturnMessage(r)
+        setCaptMessage(r)
+        setDescMessage(s)
       }
   }, []);
 
   return (
     <div className={styles.linktreePage}>
         <div className={styles.dashboardContainer}>
-          <div className={styles.mainHeading}>{returnMessage}</div>
-          <div className={styles.subHeadingTransparent}>
-            Daftarkan kedaimu sekarang dan mulai gunakan semua fitur unggulan kami.
-          </div>
+          <div className={styles.mainHeading}>{captMessage}</div>
+          <div className={styles.descHeading}>{descMessage}</div>
+          {handleYes && <div onClick={handleYes} className={styles.button}>Aktifkan</div>}
         </div>
     </div>
   );
diff --git a/src/pages/Reports.js b/src/pages/Reports.js
index ab9a946..20292f2 100644
--- a/src/pages/Reports.js
+++ b/src/pages/Reports.js
@@ -452,7 +452,7 @@ const App = ({ forCafe = true, cafeId = -1,
       setModal('loading');
       const create = await createCafe(itemName);
       setModal('message', { 
-        returnMessage: create ? 'Berhasil membuat cafe' : 'Gagal membuat cafe' 
+        captMessage: create ? 'Berhasil membuat cafe' : 'Gagal membuat cafe' 
       });
 
       // Add a 2-second delay before proceeding