diff --git a/src/components/Modal.js b/src/components/Modal.js
index bd0161e..0563f18 100644
--- a/src/components/Modal.js
+++ b/src/components/Modal.js
@@ -104,7 +104,7 @@ const Modal = ({ user, shop, isOpen, onClose, modalContent, setModal, handleMove
         
         {modalContent === "create_coupon" && <CreateCoupon />}
         {modalContent === "check_coupon" && <CheckCoupon />}
-        {modalContent === "create_user" && <CreateUserWithCoupon />}
+        {modalContent === "create_user" && <CreateUserWithCoupon setModal={setModal}/>}
       </div>
     </div>
   );
diff --git a/src/pages/CreateUserWithCoupon.js b/src/pages/CreateUserWithCoupon.js
index ddc2f77..c61fd4e 100644
--- a/src/pages/CreateUserWithCoupon.js
+++ b/src/pages/CreateUserWithCoupon.js
@@ -12,6 +12,11 @@ const LinktreePage = ({ setModal }) => {
   const [couponCode, setCouponCode] = useState('');
   const [couponStatus, setCouponStatus] = 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('');
@@ -80,54 +85,89 @@ const LinktreePage = ({ setModal }) => {
         const data = await response.json();
         setCouponStatus('User created successfully with coupon');
         setCouponDetails(null);
-        console.log(data);
+
+        localStorage.setItem('auth', data.token);
+
+        // Clean the URL by removing query parameters and hash
+        const cleanUrl = window.location.origin + window.location.pathname;
+
+        // Replace the current URL with the cleaned one
+        window.history.replaceState(null, '', cleanUrl);
+
+        // Reload the page with the cleaned URL (no query params or hash)
+        window.location.reload();
       } else {
         const errorData = await response.json();
         setCouponStatus(errorData.message || 'Error creating user');
+        setModal('join', { couponCode })
       }
     } catch (error) {
       setCouponStatus('Error creating user.');
+      setModal('join', { couponCode })
     }
   };
 
   return (
     <div className={styles.linktreePage}>
-        <div className={styles.dashboardContainer}>
-          <div className={styles.mainHeading}>Gunakan Kupon</div>
-            <form className={styles.linktreeForm} onSubmit={handleCreateUserWithCoupon}>
-              <input
-                type="text"
-                placeholder="Username"
-                value={username}
-                onChange={(e) => setUsername(e.target.value)}
-                className={styles.usernameInput}
-              />
-              <input
-                type="email"
-                placeholder="Email"
-                value={email}
-                onChange={(e) => setEmail(e.target.value)}
-                className={styles.usernameInput}
-              />
-              <input
-                type="password"
-                placeholder="Password"
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-                className={styles.usernameInput}
-              />
-              <input
-                type="password"
-                placeholder="Re-type Password"
-                value={retypePassword}
-                onChange={(e) => setRetypePassword(e.target.value)}
-                className={styles.usernameInput}
-              />
-              <button type="submit" className={styles.claimButton}>
-                <span>Buat Akun</span>
-              </button>
-            </form>
+      <div className={styles.dashboardContainer}>
+        <div className={styles.mainHeading}>Gunakan Kupon</div>
+
+        <div className={styles.LoginForm}>
+          <div className={`${styles.FormUsername} ${inputtingPassword ? styles.animateForm : wasInputtingPassword ? styles.reverseForm : ''}`}>
+            <label htmlFor="username" className={styles.usernameLabel}>---- masuk -------------------------------</label>
+            <input
+              type="text"
+              placeholder="Username"
+              maxLength="30"
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+              className={!error ? styles.usernameInput : styles.usernameInputError}
+            />
+            <input
+              type="email"
+              placeholder="Email"
+              value={email}
+              onChange={(e) => setEmail(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="password"
+              placeholder="Password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              maxLength="30"
+              className={!error ? styles.usernameInput : styles.usernameInputError}
+            />
+            <input
+              type="password"
+              placeholder="Re-type Password"
+              value={retypePassword}
+              onChange={(e) => setRetypePassword(e.target.value)}
+              maxLength="30"
+              className={!error ? styles.usernameInput : styles.usernameInputError}
+            />
+            <button
+              onClick={handleCreateUserWithCoupon}
+              className={`${styles.claimButton} ${loading ? styles.loading : ''}`}
+              disabled={loading}
+            >
+              <span>{loading ? 'Loading...' : 'Masuk'}</span>
+            </button>
+          </div>
         </div>
+      </div>
     </div>
   );
 };
diff --git a/src/pages/Dashboard.js b/src/pages/Dashboard.js
index 5d32462..4c470d8 100644
--- a/src/pages/Dashboard.js
+++ b/src/pages/Dashboard.js
@@ -17,6 +17,7 @@ const LinktreePage = ({ user, setModal }) => {
   const location = useLocation();
   const [lastModal, setLastModal] = useState(false);
 
+  const [wasInputtingPassword, setWasInputtingPassword] = useState(false);
   const [inputtingPassword, setInputtingPassword] = useState(false);
   const [username, setUsername] = useState('');
   const [password, setPassword] = useState('');
@@ -882,7 +883,7 @@ const sortedMaterials = allMaterials.sort((a, b) => new Date(a.date) - new Date(
 
             {getLocalStorage('auth') == null && (
               <div className={styles.LoginForm}>
-                <div className={`${styles.FormUsername} ${inputtingPassword ? styles.animateForm : styles.reverseForm}`}>
+                <div className={`${styles.FormUsername} ${inputtingPassword ? styles.animateForm : wasInputtingPassword? styles.reverseForm : ''}`}>
                   <label htmlFor="username" className={styles.usernameLabel}>---- masuk -------------------------------</label>
                   <input
                     id="username"
@@ -892,12 +893,12 @@ const sortedMaterials = allMaterials.sort((a, b) => new Date(a.date) - new Date(
                     value={username}
                     onChange={(e) => setUsername(e.target.value)}
                   />
-                  <button onClick={() => setInputtingPassword(true)} className={styles.claimButton}>
+                  <button onClick={() => {setInputtingPassword(true); setWasInputtingPassword(true)}} className={styles.claimButton}>
                     <span>➜</span>
                   </button>
                 </div>
 
-                <div className={`${styles.FormPassword} ${inputtingPassword ? styles.animateForm : styles.reverseForm}`}>
+                <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>
diff --git a/src/pages/Join.js b/src/pages/Join.js
index 1e20541..e219a3a 100644
--- a/src/pages/Join.js
+++ b/src/pages/Join.js
@@ -16,10 +16,10 @@ const LinktreePage = ({ data, setModal }) => {
 
   // Detect query params on component mount
   useEffect(() => {
+    if(couponCode != '') return;
     const code = queryParams.get('couponCode');
     console.log(code)
     if (code) {
-      setCouponStatus(200);
       setCouponCode(code);
       setIsUsingCoupon(true);  // Automatically switch to the coupon input state
       handleCheckCoupon(code); // Automatically check the coupon code
@@ -144,6 +144,7 @@ const LinktreePage = ({ data, setModal }) => {
                 period={couponDetails?.discountPeriods}
                 expiration={couponDetails?.expirationDate}
               />
+              {couponStatus == 200 &&
               <form className={styles.linktreeForm}>
                 <label htmlFor="username" className={styles.usernameLabel}>
                   --------------------------------------------
@@ -157,6 +158,7 @@ const LinktreePage = ({ data, setModal }) => {
                   <span>Buat akun dengan kupon ini</span>
                 </button>
               </form>
+}
             </>
           )}
           <div className={styles.footer}>
@@ -176,6 +178,7 @@ const LinktreePage = ({ data, setModal }) => {
 
                   // Remove the couponCode query parameter
                   url.searchParams.delete('couponCode');
+                  url.searchParams.delete('codeStatus');
 
                   // Update the browser's URL, but keep 'modal=join' intact
                   window.history.pushState({}, '', url.toString());
diff --git a/src/pages/LinktreePage.module.css b/src/pages/LinktreePage.module.css
index 95cb719..e695c86 100644
--- a/src/pages/LinktreePage.module.css
+++ b/src/pages/LinktreePage.module.css
@@ -233,8 +233,13 @@
     left: 0vw;
   }
 
-  100% {
+  99.9% {
     left: 100vw;
+    visibility: hidden;
+  }
+  100% {
+    left: 0vw;
+    visibility: hidden;
   }
 }