diff --git a/src/app/@authModal/(.)sign-in/page.tsx b/src/app/@authModal/(.)sign-in/page.tsx
index 1c84498a..0ec96a4a 100644
--- a/src/app/@authModal/(.)sign-in/page.tsx
+++ b/src/app/@authModal/(.)sign-in/page.tsx
@@ -11,7 +11,7 @@ const page: FC = () => {
             <CloseModal />
           </div>
 
-          <SignIn />
+          <SignIn isModal={true} />
         </div>
       </div>
     </div>
diff --git a/src/app/@authModal/(.)sign-up/page.tsx b/src/app/@authModal/(.)sign-up/page.tsx
index a33eb809..30f72425 100644
--- a/src/app/@authModal/(.)sign-up/page.tsx
+++ b/src/app/@authModal/(.)sign-up/page.tsx
@@ -13,7 +13,7 @@ const page: FC<pageProps> = ({}) => {
             <CloseModal />
           </div>
 
-          <SignUp />
+          <SignUp isModal={true} />
         </div>
       </div>
     </div>
diff --git a/src/components/SignIn.tsx b/src/components/SignIn.tsx
index d935a9b8..f1f85097 100644
--- a/src/components/SignIn.tsx
+++ b/src/components/SignIn.tsx
@@ -1,8 +1,15 @@
+"use client";
+
+import { FC } from 'react'
 import { Icons } from '@/components/Icons'
 import UserAuthForm from '@/components/UserAuthForm'
 import Link from 'next/link'
 
-const SignIn = () => {
+interface SignInProps {
+  isModal?: boolean;
+}
+
+const SignIn: FC<SignInProps> = ({ isModal = false }) => {
   return (
     <div className='container mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[400px]'>
       <div className='flex flex-col space-y-2 text-center'>
@@ -18,7 +25,9 @@ const SignIn = () => {
         New to Breaddit?{' '}
         <Link
           href='/sign-up'
-          className='hover:text-brand text-sm underline underline-offset-4'>
+          className='hover:text-brand text-sm underline underline-offset-4'
+          replace={isModal}
+          }>
           Sign Up
         </Link>
       </p>
diff --git a/src/components/SignUp.tsx b/src/components/SignUp.tsx
index a0057793..1c74635d 100644
--- a/src/components/SignUp.tsx
+++ b/src/components/SignUp.tsx
@@ -1,29 +1,38 @@
-import { Icons } from '@/components/Icons'
-import UserAuthForm from '@/components/UserAuthForm'
-import Link from 'next/link'
+"use client";
 
-const SignUp = () => {
+import { FC } from "react";
+import { Icons } from "@/components/Icons";
+import UserAuthForm from "@/components/UserAuthForm";
+import Link from "next/link";
+
+interface SignUpProps {
+  isModal?: boolean;
+}
+
+const SignUp: Fc<SignUpProps> = ({ isModal = false }) => {
   return (
-    <div className='container mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[400px]'>
-      <div className='flex flex-col space-y-2 text-center'>
-        <Icons.logo className='mx-auto h-6 w-6' />
-        <h1 className='text-2xl font-semibold tracking-tight'>Sign Up</h1>
-        <p className='text-sm max-w-xs mx-auto'>
+    <div className="container mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[400px]">
+      <div className="flex flex-col space-y-2 text-center">
+        <Icons.logo className="mx-auto h-6 w-6" />
+        <h1 className="text-2xl font-semibold tracking-tight">Sign Up</h1>
+        <p className="text-sm max-w-xs mx-auto">
           By continuing, you are setting up a Breadit account and agree to our
           User Agreement and Privacy Policy.
         </p>
       </div>
       <UserAuthForm />
-      <p className='px-8 text-center text-sm text-muted-foreground'>
-        Already a Breadditor?{' '}
+      <p className="px-8 text-center text-sm text-muted-foreground">
+        Already a Breadditor?{" "}
         <Link
-          href='/sign-in'
-          className='hover:text-brand text-sm underline underline-offset-4'>
+          href="/sign-in"
+          className="hover:text-brand text-sm underline underline-offset-4"
+          replace={isModal}
+        >
           Sign in
         </Link>
       </p>
     </div>
-  )
-}
+  );
+};
 
-export default SignUp
+export default SignUp;