diff --git a/features/auth/pages/SignupPage.tsx b/features/auth/pages/SignupPage.tsx
index c4f4215..b5aacbb 100644
--- a/features/auth/pages/SignupPage.tsx
+++ b/features/auth/pages/SignupPage.tsx
@@ -1,29 +1,27 @@
 "use client";
 
 import { redirect } from "next/navigation";
-import React, { useEffect, useState } from "react";
+import React, { JSX, useEffect, useState } from "react";
 import SecurityCheckup from "@/shared/auth/ui/SecurityCheckup";
 import SecurityCheckupFailed from "@/shared/auth/ui/SecurityCheckupFailed";
 import Signup from "../ui/Signup";
 
 const SignupPage = () => {
+  // State to set the current page component
+  const [componentFlow, setComponentFlow] = useState<JSX.Element>(
+    <SecurityCheckup />
+  );
+
   /**
    * Create a lit component that will be used in popp, consisting of 3 component flows:
-   * 1. When the user opens it, a browser environment check will be performed.
-   * 2. If it passes, the login component will appear and the user will perform authentication.
-   * 3. If it fails, stop the authentication process and display the warning component, then return the user to the homepage.
+   * 1. If it passes, the login component will appear and the user will perform authentication.
+   * 2. If it fails, stop the authentication process and display the warning component, then return the user to the homepage.
    */
   const componentFlowList = {
-    securityCheckup: <SecurityCheckup />,
     securityCheckupFailed: <SecurityCheckupFailed />,
-    SecurityCheckupSuccessed: <Signup />,
+    SecurityCheckupSuccessed: <Signup changeCurrentPage={setComponentFlow} />,
   };
 
-  // State to set the current page component
-  const [componentFlow, setComponentFlow] = useState(
-    componentFlowList.securityCheckup
-  );
-
   useEffect(() => {
     /**
      * Check if the window has an opener (i.e., it was opened by another window)
diff --git a/features/auth/ui/Signup.tsx b/features/auth/ui/Signup.tsx
index d6cf8a0..c3749c2 100644
--- a/features/auth/ui/Signup.tsx
+++ b/features/auth/ui/Signup.tsx
@@ -2,11 +2,16 @@
 
 import React from "react";
 import EmailInput from "./EmailInput";
-import { Divider, Link } from "@heroui/react";
+import { Button, Divider, Link } from "@heroui/react";
 import { routes } from "@/shared/config/routes";
 import OAuthProviders from "./OAuthProviders";
+import DebugPage from "@/app/debug/DebugPage";
 
-const Signup = () => {
+type Props = {
+  changeCurrentPage: React.Dispatch<React.SetStateAction<React.JSX.Element>>;
+};
+
+const Signup = ({ changeCurrentPage }: Props) => {
   return (
     <div className="pt-12 max-w-[480px] mx-auto">
       <div className="text-3xl text-center">Create an account</div>
@@ -14,6 +19,13 @@ const Signup = () => {
       {/* Email form */}
       <div className="mt-6 px-3">
         <EmailInput />
+        <Button
+          onPress={() => changeCurrentPage(<DebugPage />)}
+          className="mt-2 w-full"
+          color="primary"
+        >
+          For debug only
+        </Button>
       </div>
 
       {/* Sign up link */}