diff --git a/src/App.js b/src/App.js
index 25ada1d..34d5ebc 100644
--- a/src/App.js
+++ b/src/App.js
@@ -67,6 +67,7 @@ function App() {
   const [onModalCloseFunction, setOnModalCloseFunction] = useState(null);
   const [onModalYesFunction, setOnModalYesFunction] = useState(null);
   const transactionList = useRef(null);
+  const [depth, setDepth] = useState(-1);
   const [queue, setQueue] = useState([]);
 
 
@@ -351,6 +352,13 @@ function App() {
     let transaction_info = searchParams.get("transactionId") || ''; // Get transactionId or set it to empty string
     console.log(transaction_info);  // Log the updated transaction_info
 
+
+const depthh = transactionList.current.findIndex(
+  item => item.transactionId.toString() === transaction_info.toString()
+);
+
+setDepth(depthh);
+
     // If transaction_info is an empty string, set the modal
     if (transaction_info == '') return false;
     else return true;
@@ -411,15 +419,18 @@ function App() {
 
     // Find the current index based on the 'from' transactionId
     const currentIndex = transactionList.current.findIndex(item => item.transactionId == from);
-
+    
     // Determine the new transactionId based on the direction
     let newTransactionId;
     if (direction === 'next') {
+
       // If we're not at the last transaction, get the next transactionId
       newTransactionId = currentIndex < transactionList.current.length - 1
         ? transactionList.current[currentIndex + 1].transactionId
         : from; // If already at the end, stay on the current transactionId
     } else if (direction === 'previous') {
+
+    setDepth(currentIndex -1);
       // If we're not at the first transaction, get the previous transactionId
       newTransactionId = currentIndex > 0
         ? transactionList.current[currentIndex - 1].transactionId
@@ -741,6 +752,7 @@ function App() {
         isOpen={isModalOpen}
         modalContent={modalContent}
         handleMoveToTransaction={handleMoveToTransaction}
+        depth={depth}
         welcomePageConfig={shop.welcomePageConfig}
         onClose={closeModal}
         setModal={setModal}
diff --git a/src/components/Header.js b/src/components/Header.js
index c43d66f..fcd64c0 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -333,7 +333,7 @@ const Header = ({
       </Title>
       <div style={{ visibility: showProfile ? "visible" : "hidden" }}>
         <ProfileImage
-          src={user.username == undefined && shopImage && !shopImage.includes('undefined') ? shopImage || 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS-DjX_bGBax4NL14ULvkAdU4FP3FKoWXWu5w&s' : "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS-DjX_bGBax4NL14ULvkAdU4FP3FKoWXWu5w&s"}
+          src={shopImage && !shopImage.includes('undefined') ? shopImage || 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS-DjX_bGBax4NL14ULvkAdU4FP3FKoWXWu5w&s' : "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS-DjX_bGBax4NL14ULvkAdU4FP3FKoWXWu5w&s"}
           alt="Profile"
           onClick={user.username !== undefined ? handleImageClick : null}
           animate={showRectangle && animate}
diff --git a/src/components/Modal.js b/src/components/Modal.js
index 0476fb3..6a7c7a9 100644
--- a/src/components/Modal.js
+++ b/src/components/Modal.js
@@ -35,7 +35,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, onModalYesFunction }) => {
+const Modal = ({ user, shop, isOpen, onClose, modalContent, deviceType, setModal, handleMoveToTransaction, depth,welcomePageConfig, onModalCloseFunction, onModalYesFunction }) => {
   
   const [shopImg, setShopImg] = useState('');
   const [updateKey, setUpdateKey] = useState(0);
@@ -92,7 +92,7 @@ const Modal = ({ user, shop, isOpen, onClose, modalContent, deviceType, setModal
         {modalContent === "create_tenant" && <CreateTenant shopId={shop.cafeId} />}
         {modalContent === "edit_tables" && <TablesPage shop={shop} />}
         {modalContent === "new_transaction" && (
-          <Transaction propsShopId={shop.cafeId} handleMoveToTransaction={handleMoveToTransaction} shopImg={shopImg} />
+          <Transaction propsShopId={shop.cafeId} handleMoveToTransaction={handleMoveToTransaction} depth={depth} shopImg={shopImg} />
         )}
         {modalContent === "transaction_canceled" && (
           <Transaction propsShopId={shop.cafeId} />
diff --git a/src/components/MusicPlayer.js b/src/components/MusicPlayer.js
index 754932f..84ac216 100644
--- a/src/components/MusicPlayer.js
+++ b/src/components/MusicPlayer.js
@@ -108,7 +108,7 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
           //   setSubtitleColor("white");
           //   setSubtitleBG("black");
           // }
-          const proxiedUrl = `https://api.kedaimaster.com/image?url=${encodeURIComponent(modifyUrl(imageUrl))}`;  // Use your proxy to fetch the image
+          const proxiedUrl = `https://dev.api.kedaimaster.com/image?url=${encodeURIComponent(modifyUrl(imageUrl))}`;  // Use your proxy to fetch the image
 
           setBackgroundImage(proxiedUrl);
         } catch (error) {
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/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/Reports.js b/src/pages/Reports.js
index 8fba232..1dd6c9a 100644
--- a/src/pages/Reports.js
+++ b/src/pages/Reports.js
@@ -27,7 +27,11 @@ const RoundedRectangle = ({
   loading = false,
   children, // Assuming this is a React component or JSX
   isChildren,
-  width = 'calc(100% / 2 - 10px)'
+  width = 'calc(100% / 2 - 10px)',
+  height,
+  marginBottom,
+  backgroundColor,
+  color
 }) => {
   const containerStyle = {
     display: "flex",
@@ -35,25 +39,26 @@ const RoundedRectangle = ({
     alignItems: "flex-start",
     justifyContent: "center",
     width: width,
-    height: "auto",
-    borderRadius: "15px",
+    height: height != undefined ? height : "auto",
+    borderRadius: "11px",
     padding: "20px",
     margin: "5px",
     textAlign: "left",
     fontFamily: "Arial, sans-serif",
     boxSizing: "border-box",
-    backgroundColor: loading ? "rgb(127 127 127)" : 'white',
-    border: '1px solid #b3b1b1'
+    backgroundColor: loading ? "rgb(127 127 127)" : backgroundColor,
+    border: '1px solid #b3b1b1',
+    fontSize: '15px'
   };
 
   const titleStyle = {
     fontWeight: "bold",
-    marginBottom: "10px",
+    marginBottom: marginBottom,
     width: "100%",
     backgroundColor: loading
       ? "rgb(85 85 85)"
-      : !isChildren && !children && "inherit",
-    color: loading ? "transparent" : "inherit",
+      : !isChildren && !children && backgroundColor,
+    color: loading ? "transparent" : color,
   };
 
   const valueAndPercentageContainerStyle = {
@@ -536,6 +541,9 @@ const App = ({ forCafe = true, cafeId = -1,
               percentage={roundToInteger(analytics?.growth?.incomeGrowth)}
               invert={false}
               loading={loading}
+              marginBottom={'10px'}
+              backgroundColor={'white'}
+              color={'black'}
             />
 
             <RoundedRectangle
@@ -545,6 +553,9 @@ const App = ({ forCafe = true, cafeId = -1,
               percentage={roundToInteger(analytics?.growth?.outcomeGrowth)}
               invert={true}
               loading={loading}
+              marginBottom={'10px'}
+              backgroundColor={'white'}
+              color={'black'}
             />
             <RoundedRectangle
               title="Transaksi"
@@ -552,6 +563,9 @@ const App = ({ forCafe = true, cafeId = -1,
               percentage={roundToInteger(analytics?.growth?.transactionGrowth)}
               invert={false}
               loading={loading}
+              marginBottom={'10px'}
+              backgroundColor={'white'}
+              color={'black'}
             />
             {((analytics?.itemSales &&
               analytics?.itemSales.length > 0) || (!analytics?.itemSales && segments.length > 0)) ? (
@@ -560,6 +574,9 @@ const App = ({ forCafe = true, cafeId = -1,
                 value={analytics?.itemSales?.length > 0 && analytics?.itemSales[0] != undefined ? analytics?.itemSales[0]?.itemName
                   : segments[0].itemName}
                 loading={loading}
+                marginBottom={'10px'}
+                backgroundColor={'white'}
+                color={'black'}
               />
             )
               :
@@ -568,24 +585,29 @@ const App = ({ forCafe = true, cafeId = -1,
                   title={"Item favorit"}
                   value={"-"}
                   loading={loading}
+                  marginBottom={'10px'}
+                  backgroundColor={'white'}
+                  color={'black'}
                 />
               )
             }
-            {selectedCafeId != -1 && (
+            {/* {selectedCafeId != -1 && (
               <RoundedRectangle
                 title={"Total promo"}
                 loading={loading}
                 value={'Rp'+analytics?.currentTotals?.totalPromoSpend}
                 width= {`calc(${!forCafe && selectedCafeId !== 0 ? '50%' : '100%'} - 10px)`}
               />
-            )}
+            )} */}
             {!forCafe && selectedCafeId != -1 && selectedCafeId != 0 && (
               <RoundedRectangle
-                title={"Kunjungi"}
-                value={"bisnis"}
-                loading={loading}
-                width= {`calc(${selectedCafeId !== 0 ? '50%' : '100%'} - 10px)`}
+                title={"Kunjungi bisnis"}
+                width= {`calc(${'100%'} - 10px)`}
+                height='10px'
                 onClick={() => window.location.href = window.location.origin + '/' + otherCafes.find(item => item.cafeId === selectedCafeId).cafeIdentifyName}
+                marginBottom={'0px'}
+                backgroundColor={'#f4f0e6'}
+                color={'#b39969'}
               />
             )}
             <div
diff --git a/src/pages/Transaction.js b/src/pages/Transaction.js
index d1c0a46..3a34ccc 100644
--- a/src/pages/Transaction.js
+++ b/src/pages/Transaction.js
@@ -11,7 +11,7 @@ import { getTables } from "../helpers/tableHelper";
 import TableCanvas from "../components/TableCanvas";
 import { useSearchParams } from "react-router-dom";
 
-export default function Transactions({ propsShopId, sendParam, deviceType, handleMoveToTransaction, shopImg }) {
+export default function Transactions({ propsShopId, sendParam, deviceType, handleMoveToTransaction, depth, shopImg }) {
   const { shopId, tableId } = useParams();
   if (sendParam) sendParam({ shopId, tableId });
 
@@ -160,7 +160,9 @@ export default function Transactions({ propsShopId, sendParam, deviceType, handl
                     </g>
                   </svg>
                 </div>
-                <div className={styles.circle}>1</div>
+                {depth > 0 &&
+                <div className={styles.circle}>{depth}</div>
+}
               </div>
               <div className={styles['line']} ></div>
               <div className={styles['circle-right']} onClick={() => handleMoveToTransaction('next', transaction.transactionId)}>