diff --git a/src/App.js b/src/App.js
index 5d1e947..37de452 100644
--- a/src/App.js
+++ b/src/App.js
@@ -412,8 +412,13 @@ function App() {
 
     setIsModalOpen(true);
     setModalContent(content)
-    if (onCloseFunction) setOnModalCloseFunction(onCloseFunction)
-    else setOnModalCloseFunction(null)
+    console.log(onCloseFunction)
+
+    if (onCloseFunction) {
+      setOnModalCloseFunction(() => onCloseFunction); // Store the close function
+    } else {
+      setOnModalCloseFunction(null);
+    }
   };
 
   const closeModal = (closeTheseContent = []) => {
diff --git a/src/components/AccountUpdatePage.js b/src/components/AccountUpdatePage.js
index d4ff45d..f93e9d7 100644
--- a/src/components/AccountUpdatePage.js
+++ b/src/components/AccountUpdatePage.js
@@ -1,10 +1,10 @@
 import React, { useState } from 'react';
-import styles from './AccountUpdatePage.module.css'; // Adjust CSS if needed
 import { updateUser } from '../helpers/userHelpers';
+import styles from '../pages/Join.module.css'; // Import the module.css file
 
 const AccountUpdatePage = ({ user, showEmail, onSubmit }) => {
     const [formData, setFormData] = useState({
-        username: user.username.startsWith('guest') ? '' : user.username || '',
+        username: user.username || '',
         email: user.email || '',
         password: user.password === 'unsetunsetunset' ? '' : user.password || '',
     });
@@ -12,6 +12,13 @@ const AccountUpdatePage = ({ user, showEmail, onSubmit }) => {
     const [errorMessage, setErrorMessage] = useState('');
     const [successMessage, setSuccessMessage] = useState(''); // New state for success messages
 
+    
+    
+      const [loading, setLoading] = useState(false);
+      const [error, setError] = useState(false);
+      const [wasInputtingPassword, setWasInputtingPassword] = useState(false);
+      const [inputtingPassword, setInputtingPassword] = useState(false);
+
     const handleChange = (e) => {
         setFormData({ ...formData, [e.target.name]: e.target.value });
     };
@@ -41,55 +48,122 @@ const AccountUpdatePage = ({ user, showEmail, onSubmit }) => {
     };
 
     return (
-        <div className={styles.container}>
-            <h2>Update Your Account</h2>
-            <form onSubmit={handleSubmit} className={styles.form}>
-                <label className={styles.formLabel}>
-                    Username:
-                    <input
-                        type="text"
-                        name="username"
-                        value={formData.username}
-                        onChange={handleChange}
-                        className={styles.formInput}
-                    />
-                </label>
+        
+    <div className={styles.linktreePage}>
+    <div className={styles.dashboardContainer}>
+      <div className={styles.mainHeading}>Ubah profil</div>
+      <div className={styles.subHeadingTransparent}>
+        Daftarkan kedaimu sekarang dan mulai gunakan semua fitur unggulan kami.
+      </div>
 
-                {showEmail && (
-                    <label className={styles.formLabel}>
-                        Email:
-                        <input
-                            type="email"
-                            name="email"
-                            value={formData.email}
-                            onChange={handleChange}
-                            className={styles.formInput}
-                        />
-                    </label>
-                )}
+        <div className={styles.LoginForm}>
+        <div className={`${styles.FormUsername} ${inputtingPassword ? styles.animateForm : wasInputtingPassword ? styles.reverseForm : ''}`}>
+          <label htmlFor="username" className={styles.usernameLabel}>----------------------------------------------</label>
+          
+          <input
+            name="username"
+            type="text"
+            placeholder="Username"
+            value={formData.username}
+            onChange={handleChange}
+            className={!error ? styles.usernameInput : styles.usernameInputError}
+          />
 
-                <label className={styles.formLabel}>
-                    Password:
-                    <input
-                        type="password"
-                        name="password"
-                        value={formData.password}
-                        onChange={handleChange}
-                        className={styles.formInput}
-                    />
-                </label>
-
-                {/* Display success message */}
-                {successMessage && <div className={styles.successMessage}>{successMessage}</div>}
-
-                {/* Display error message */}
-                {errorMessage && <div className={styles.errorMessage}>{errorMessage}</div>}
-
-                <button type="submit" className={styles.submitButton}>
-                    Submit
-                </button>
-            </form>
+          <input
+            name="email"
+            type="number"
+            placeholder="Email"
+            value={formData.email}
+            onChange={handleChange}
+            className={!error ? styles.usernameInput : styles.usernameInputError}
+          />
+          <button onClick={() => { setInputtingPassword(true); setWasInputtingPassword(true); }} className={styles.claimButton}>
+            <span>➜</span>
+          </button>
         </div>
+
+        <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}> &nbsp; ------------------------- &nbsp; </label>
+          </span>
+
+          <input
+            name="password"
+            type="password"
+            placeholder="Ganti password"
+            onChange={handleChange}
+            maxLength="30"
+            className={!error ? styles.usernameInput : styles.usernameInputError}
+          />
+          <input
+            name="password"
+            type="password"
+            placeholder="Ulangi password"
+            onChange={handleChange}
+            maxLength="30"
+            className={!error ? styles.usernameInput : styles.usernameInputError}
+          />
+          <button
+            onClick={handleSubmit}
+            className={`${styles.claimButton} ${loading ? styles.loading : ''}`}
+            disabled={loading}
+          >
+            <span>{loading ? 'Loading...' : 'Simpan'}</span>
+          </button>
+        </div>
+      </div>
+      </div>
+      </div>
+        // <div className={styles.container}>
+        //     <h2>Update Your Account</h2>
+        //     <form onSubmit={handleSubmit} className={styles.form}>
+        //         <label className={styles.formLabel}>
+        //             Username:
+        //             <input
+        //                 type="text"
+        //                 name="username"
+        //                 value={formData.username}
+        //                 onChange={handleChange}
+        //                 className={styles.formInput}
+        //             />
+        //         </label>
+
+        //         {showEmail && (
+        //             <label className={styles.formLabel}>
+        //                 Email:
+        //                 <input
+        //                     type="email"
+        //                     name="email"
+        //                     value={formData.email}
+        //                     onChange={handleChange}
+        //                     className={styles.formInput}
+        //                 />
+        //             </label>
+        //         )}
+
+        //         <label className={styles.formLabel}>
+        //             Password:
+        //             <input
+        //                 type="password"
+        //                 name="password"
+        //                 value={formData.password}
+        //                 onChange={handleChange}
+        //                 className={styles.formInput}
+        //             />
+        //         </label>
+
+        //         {/* Display success message */}
+        //         {successMessage && <div className={styles.successMessage}>{successMessage}</div>}
+
+        //         {/* Display error message */}
+        //         {errorMessage && <div className={styles.errorMessage}>{errorMessage}</div>}
+
+        //         <button type="submit" className={styles.submitButton}>
+        //             Submit
+        //         </button>
+        //     </form>
+        // </div>
     );
 };
 
diff --git a/src/components/Header.js b/src/components/Header.js
index dff8c18..2ba31c0 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -346,6 +346,14 @@ const Header = ({
                   <>
                     <Child hasChildren>
                       {shopName}
+                      <Child>
+                        Mode pengembangan &nbsp;
+                        <Switch
+                          borderRadius={0}
+                          checked={isEditMode}
+                          onChange={() => setIsEditMode(!isEditMode)}
+                        />
+                      </Child>
                       <Child onClick={() => setModal("reports")}>Lihat laporan</Child>
                       <Child onClick={() => setModal("add_material")}>
                         Kelola bahan baku
@@ -384,14 +392,6 @@ const Header = ({
                           Metode pembayaran
                         </Child>
                       </Child>
-                      <Child>
-                        Mode pengembangan &nbsp;
-                        <Switch
-                          borderRadius={0}
-                          checked={isEditMode}
-                          onChange={() => setIsEditMode(!isEditMode)}
-                        />
-                      </Child>
                     </Child>
                   </>
                 )}
diff --git a/src/components/Modal.js b/src/components/Modal.js
index 6655c0e..e5d749a 100644
--- a/src/components/Modal.js
+++ b/src/components/Modal.js
@@ -47,12 +47,16 @@ const Modal = ({ user, shop, isOpen, onClose, modalContent, setModal, handleMove
   if (!isOpen) return null;
 
   // Function to handle clicks on the overlay
+
   const handleOverlayClick = (event) => {
-    // Close the modal only if the overlay is clicked
-    onModalCloseFunction();
-    onClose();
+    console.log(onModalCloseFunction)
+    if (onModalCloseFunction) {
+      onModalCloseFunction(); // Execute the passed closure
+    }
+    onClose(); // Close the modal
   };
 
+
   // Function to handle clicks on the modal content
   const handleContentClick = (event) => {
     // Prevent click event from propagating to the overlay
diff --git a/src/pages/CreateCoupon.js b/src/pages/CreateCoupon.js
index a21f12b..6dfd5a6 100644
--- a/src/pages/CreateCoupon.js
+++ b/src/pages/CreateCoupon.js
@@ -3,37 +3,37 @@ import styles from './Join.module.css';
 import Coupon from '../components/Coupon';
 
 import CryptoJS from 'crypto-js';
-import {createCoupon} from "../helpers/couponHelpers.js"
+import { createCoupon } from "../helpers/couponHelpers.js"
 
 function getAuthToken() {
-    return localStorage.getItem("auth");
-  }
+  return localStorage.getItem("auth");
+}
 const CreateCouponPage = () => {
   const [discountType, setDiscountType] = useState("percentage");
   const [discountValue, setDiscountValue] = useState("");
   const [discountPeriods, setDiscountPeriods] = useState("");
   const [couponDetails, setCouponDetails] = useState(null);
 
-  
-    const [loading, setLoading] = useState(false);
-    const [error, setError] = useState(false);
-    const [wasInputtingPassword, setWasInputtingPassword] = useState(false);
-    const [inputtingPassword, setInputtingPassword] = useState(false);
-    const [username, setUsername] = useState('');
-    const [email, setEmail] = useState('');
-    const [password, setPassword] = useState('');
-    const [retypePassword, setRetypePassword] = useState('');
-    const [codeExpectation, setCodeExpectation] = useState('');
-    const [couponUrl, setCouponUrl] = useState('');
-  
+
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(false);
+  const [wasInputtingPassword, setWasInputtingPassword] = useState(false);
+  const [inputtingPassword, setInputtingPassword] = useState(false);
+  const [username, setUsername] = useState('');
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [retypePassword, setRetypePassword] = useState('');
+  const [codeExpectation, setCodeExpectation] = useState('');
+  const [couponUrl, setCouponUrl] = useState('');
+
 
   const handleSubmit = async (e) => {
     e.preventDefault();
     setLoading(true);
-    
+
     // Call the helper function to create the coupon
     const result = await createCoupon(discountType, discountValue, discountPeriods, codeExpectation);
-    
+
     if (result.success) {
       setCouponDetails(result.coupon);
       const secretKey = 'xixixi666'; // Your AES-256 key (32 characters)
@@ -57,87 +57,88 @@ const CreateCouponPage = () => {
         </div>
 
         {couponDetails != null ?
-        <>
-        <Coupon
-                code={couponDetails?.code || null}
-                value={couponDetails?.discountValue}
-                period={couponDetails?.discountPeriods}
-                type={couponDetails?.type}
-                expiration={couponDetails?.expirationDate}
-              />
-              <button 
-  onClick={() => {
-    navigator.clipboard.writeText('https://dev.coupon.kedaimaster.com/coupon?c=' + couponUrl)
-      .then(() => {
-        // Optional: Show a message that the text has been copied
-        alert("Coupon URL copied to clipboard!");
-      })
-      .catch((err) => {
-        console.error("Failed to copy text: ", err);
-      });
-  }} 
-  className={styles.claimButton}
-  style={{marginBottom: '10px'}}
->
-  <span>Salin URL VOUCHER</span>
-</button></>
+          <>
+            <Coupon
+              code={couponDetails?.code || null}
+              value={couponDetails?.discountValue}
+              period={couponDetails?.discountPeriods}
+              type={couponDetails?.type}
+              expiration={couponDetails?.expirationDate}
+            />
+            <button
+              onClick={() => {
+                navigator.clipboard.writeText('https://dev.coupon.kedaimaster.com/coupon?c=' + couponUrl)
+                  .then(() => {
+                    // Optional: Show a message that the text has been copied
+                    alert("Coupon URL copied to clipboard!");
+                  })
+                  .catch((err) => {
+                    console.error("Failed to copy text: ", err);
+                  });
+              }}
+              className={styles.claimButton}
+              style={{ marginBottom: '10px' }}
+            >
+              <span>Salin URL VOUCHER</span>
+            </button></>
 
-              :
-              <div className={styles.LoginForm}>
-                <div className={`${styles.FormUsername} ${inputtingPassword ? styles.animateForm : wasInputtingPassword ? styles.reverseForm : ''}`}>
-                  <label htmlFor="username" className={styles.usernameLabel}>---- Daftar -------------------------------</label>
-                  <select
-                    className={!error ? styles.usernameInput : styles.usernameInputError}
-                    value={discountType}
-                    onChange={(e) => setDiscountType(e.target.value)}
-                  >
-                    <option value="percentage">Percentage</option>
-                    <option value="fixed">Fixed</option>
-                  </select>
-      
-                  <input
-                    type="number"
-                    placeholder="Nilai voucher"
-                    value={discountValue}
-                    onChange={(e) => setDiscountValue(e.target.value)}
-                    className={!error ? styles.usernameInput : styles.usernameInputError}
-                  />
-                  <button onClick={() => { setInputtingPassword(true); setWasInputtingPassword(true); }} className={styles.claimButton}>
-                    <span>➜</span>
-                  </button>
-                </div>
-      
-                <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}> &nbsp; ----------------- &nbsp; </label>
-                  </span>
-      
-                    <input
-                    type="number"
-                    placeholder="Periode diskon (minggu)"
-                    value={discountPeriods}
-                    onChange={(e) => setDiscountPeriods(e.target.value)}
-                    maxLength="30"
-                    className={!error ? styles.usernameInput : styles.usernameInputError}
-                  />
-                  <input
-                    type="text"
-                    placeholder="Ekspektasi kode"
-                    value={codeExpectation}
-                    onChange={(e) => setCodeExpectation(e.target.value)}
-                    maxLength="30"
-                    className={!error ? styles.usernameInput : styles.usernameInputError}
-                  />
-                  <button
-                    onClick={handleSubmit}
-                    className={`${styles.claimButton} ${loading ? styles.loading : ''}`}
-                    disabled={loading}
-                  >
-                    <span>{loading ? 'Loading...' : 'Buat'}</span>
-                  </button>
-                </div>
-                </div>
+          :
+          <div className={styles.LoginForm}>
+            <div className={`${styles.FormUsername} ${inputtingPassword ? styles.animateForm : wasInputtingPassword ? styles.reverseForm : ''}`}>
+              <label htmlFor="username" className={styles.usernameLabel}>----------------------------------------------</label>
+              <select
+                className={!error ? styles.usernameInput : styles.usernameInputError}
+                value={discountType}
+                onChange={(e) => setDiscountType(e.target.value)}
+                style={{width: '100%'}}
+              >
+                <option value="percentage">Percentage</option>
+                <option value="fixed">Fixed</option>
+              </select>
+
+              <input
+                type="number"
+                placeholder="Nilai voucher"
+                value={discountValue}
+                onChange={(e) => setDiscountValue(e.target.value)}
+                className={!error ? styles.usernameInput : styles.usernameInputError}
+              />
+              <button onClick={() => { setInputtingPassword(true); setWasInputtingPassword(true); }} className={styles.claimButton}>
+                <span>➜</span>
+              </button>
+            </div>
+
+            <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}> &nbsp; ----------------- &nbsp; </label>
+              </span>
+
+              <input
+                type="number"
+                placeholder="Periode diskon (minggu)"
+                value={discountPeriods}
+                onChange={(e) => setDiscountPeriods(e.target.value)}
+                maxLength="30"
+                className={!error ? styles.usernameInput : styles.usernameInputError}
+              />
+              <input
+                type="text"
+                placeholder="Ekspektasi kode"
+                value={codeExpectation}
+                onChange={(e) => setCodeExpectation(e.target.value)}
+                maxLength="30"
+                className={!error ? styles.usernameInput : styles.usernameInputError}
+              />
+              <button
+                onClick={handleSubmit}
+                className={`${styles.claimButton} ${loading ? styles.loading : ''}`}
+                disabled={loading}
+              >
+                <span>{loading ? 'Loading...' : 'Buat'}</span>
+              </button>
+            </div>
+          </div>
         }
       </div>
     </div>
diff --git a/src/pages/Reports.js b/src/pages/Reports.js
index 09bec47..3613dd4 100644
--- a/src/pages/Reports.js
+++ b/src/pages/Reports.js
@@ -387,7 +387,7 @@ const App = ({ forCafe = true, cafeId = -1,
     if (selectedItem) {
       setSelectedCafeId(selectedItem[1]); // Get the cafeId (second part of the pair)
     }
-    if(selectedItem[1] == -1 && user.roleId == 0) setModal('create_coupon',{},setSelectedCafeId(0));
+    if(selectedItem[1] == -1 && user.roleId == 0) setModal('create_coupon', {}, () => {setSelectedSwitch(0);setSelectedCafeId(0)});
 
     setResetKey((prevKey) => prevKey + 1); // Increase the key to force re-render
   };