diff --git a/apps/user/src/sections/subscribe/recharge.tsx b/apps/user/src/sections/subscribe/recharge.tsx
index ccf4973..bcdaa79 100644
--- a/apps/user/src/sections/subscribe/recharge.tsx
+++ b/apps/user/src/sections/subscribe/recharge.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { useNavigate } from "@tanstack/react-router";
 import { Button } from "@workspace/ui/components/button";
 import {
   Dialog,
@@ -24,6 +25,7 @@ export default function Recharge(
 ) {
   const { t } = useTranslation("subscribe");
   const { common } = useGlobalStore();
+  const navigate = useNavigate();
   const { currency } = common;
 
   const [open, setOpen] = useState<boolean>(false);
@@ -86,7 +88,10 @@ export default function Recharge(
                   const response = await recharge(params);
                   const orderNo = response.data.data?.order_no;
                   if (orderNo) {
-                    window.location.href = `/#/payment?order_no=${orderNo}`;
+                    navigate({
+                      to: "/payment",
+                      search: { order_no: String(orderNo) },
+                    });
                     setOpen(false);
                   }
                 } catch (_error) {
diff --git a/apps/user/src/sections/subscribe/renewal.tsx b/apps/user/src/sections/subscribe/renewal.tsx
index e86dfaf..d780d17 100644
--- a/apps/user/src/sections/subscribe/renewal.tsx
+++ b/apps/user/src/sections/subscribe/renewal.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { useQuery } from "@tanstack/react-query";
+import { useNavigate } from "@tanstack/react-router";
 import { Button } from "@workspace/ui/components/button";
 import { Card, CardContent } from "@workspace/ui/components/card";
 import {
@@ -30,6 +31,7 @@ interface RenewalProps {
 export default function Renewal({ id, subscribe }: Readonly<RenewalProps>) {
   const { t } = useTranslation("subscribe");
   const { getUserInfo } = useGlobalStore();
+  const navigate = useNavigate();
   const [open, setOpen] = useState<boolean>(false);
   const [params, setParams] = useState<Partial<API.RenewalOrderRequest>>({
     quantity: 1,
@@ -90,13 +92,13 @@ export default function Renewal({ id, subscribe }: Readonly<RenewalProps>) {
         const orderNo = response.data.data?.order_no;
         if (orderNo) {
           getUserInfo();
-          window.location.href = `/#/payment?order_no=${orderNo}`;
+          navigate({ to: "/payment", search: { order_no: String(orderNo) } });
         }
       } catch (_error) {
         /* empty */
       }
     });
-  }, [params, getUserInfo]);
+  }, [params, getUserInfo, navigate]);
 
   return (
     <Dialog onOpenChange={setOpen} open={open}>
diff --git a/apps/user/src/sections/subscribe/reset-traffic.tsx b/apps/user/src/sections/subscribe/reset-traffic.tsx
index b398659..a282901 100644
--- a/apps/user/src/sections/subscribe/reset-traffic.tsx
+++ b/apps/user/src/sections/subscribe/reset-traffic.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { useNavigate } from "@tanstack/react-router";
 import { Button } from "@workspace/ui/components/button";
 import {
   Dialog,
@@ -27,6 +28,7 @@ export default function ResetTraffic({
 }: Readonly<ResetTrafficProps>) {
   const { t } = useTranslation("subscribe");
   const { getUserInfo } = useGlobalStore();
+  const navigate = useNavigate();
   const [open, setOpen] = useState<boolean>(false);
   const [params, setParams] = useState<API.ResetTrafficOrderRequest>({
     payment: -1,
@@ -88,7 +90,10 @@ export default function ResetTraffic({
                   const orderNo = response.data.data?.order_no;
                   if (orderNo) {
                     getUserInfo();
-                    window.location.href = `/#/payment?order_no=${orderNo}`;
+                    navigate({
+                      to: "/payment",
+                      search: { order_no: String(orderNo) },
+                    });
                   }
                 } catch (error) {
                   console.log(error);