diff --git a/app/(auth)/login/page.tsx b/app/(auth)/login/page.tsx
index ef31020..d786c2c 100644
--- a/app/(auth)/login/page.tsx
+++ b/app/(auth)/login/page.tsx
@@ -1,6 +1,5 @@
-import { Icons } from "@/components/Icons";
+import SignIn from "@/components/pages/SignIn";
 import { buttonVariants } from "@/components/ui/button";
-import UserAuthentication from "@/components/UserAuthentication";
 import { cn } from "@/lib/utils";
 import { ChevronLeft } from "lucide-react";
 import Link from "next/link";
@@ -25,28 +24,3 @@ export default function Login() {
     </div>
   );
 }
-
-export const SignIn = () => {
-  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-24 w-24" />
-        <h1 className="text-2xl font-semibold tracking-tight">Welcome back</h1>
-        <p className="text-sm max-w-xs mx-auto">
-          By continuing, you are setting up a Crypt anonyumous account and agree
-          to our User Agreement and Privacy Policy.
-        </p>
-      </div>
-      <UserAuthentication />
-      <p className="px-8 text-center text-sm text-muted-foreground">
-        New to Crypt?{" "}
-        <Link
-          href="/register"
-          className="hover:text-brand text-sm underline underline-offset-4"
-        >
-          Sign Up
-        </Link>
-      </p>
-    </div>
-  );
-};
diff --git a/app/(auth)/register/page.tsx b/app/(auth)/register/page.tsx
index eec2961..8de6ff6 100644
--- a/app/(auth)/register/page.tsx
+++ b/app/(auth)/register/page.tsx
@@ -1,6 +1,5 @@
-import { Icons } from "@/components/Icons";
+import SignUp from "@/components/pages/SignUp";
 import { buttonVariants } from "@/components/ui/button";
-import UserAuthentication from "@/components/UserAuthentication";
 import { cn } from "@/lib/utils";
 import { ChevronLeft } from "lucide-react";
 import Link from "next/link";
@@ -25,27 +24,3 @@ export default function Register() {
     </div>
   );
 }
-export const SignUp = () => {
-  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-24 w-24" />
-        <h1 className="text-2xl font-semibold tracking-tight">Create your Account</h1>
-        <p className="text-sm max-w-xs mx-auto">
-          By continuing, you are setting up a Crypt anonymous account and agree to our
-          User Agreement and Privacy Policy.
-        </p>
-      </div>
-      <UserAuthentication />
-      <p className="px-8 text-center text-sm text-muted-foreground">
-        Already a Crypt User?{" "}
-        <Link
-          href="/login"
-          className="hover:text-brand text-sm underline underline-offset-4"
-        >
-          Login
-        </Link>
-      </p>
-    </div>
-  );
-};
diff --git a/app/@authModal/(.)login/page.tsx b/app/@authModal/(.)login/page.tsx
index 62bfa63..4dbbebb 100644
--- a/app/@authModal/(.)login/page.tsx
+++ b/app/@authModal/(.)login/page.tsx
@@ -1,6 +1,6 @@
 "use client";
-import { SignIn } from "@/app/(auth)/login/page";
 import CloseModal from "@/components/CloseModal";
+import SignIn from "@/components/pages/SignIn";
 import { useRouter } from "next/navigation";
 import { useCallback, useEffect } from "react";
 
diff --git a/app/@authModal/(.)register/page.tsx b/app/@authModal/(.)register/page.tsx
index 870c034..3a9607d 100644
--- a/app/@authModal/(.)register/page.tsx
+++ b/app/@authModal/(.)register/page.tsx
@@ -1,6 +1,6 @@
 "use client";
-import { SignUp } from "@/app/(auth)/register/page";
 import CloseModal from "@/components/CloseModal";
+import SignUp from "@/components/pages/SignUp";
 import { useRouter } from "next/navigation";
 import { useCallback, useEffect } from "react";
 
diff --git a/components/pages/SignIn.tsx b/components/pages/SignIn.tsx
new file mode 100644
index 0000000..95290d9
--- /dev/null
+++ b/components/pages/SignIn.tsx
@@ -0,0 +1,28 @@
+import Link from "next/link";
+import { Icons } from "../Icons";
+import UserAuthentication from "../UserAuthentication";
+
+export default function SignIn() {
+  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-24 w-24" />
+        <h1 className="text-2xl font-semibold tracking-tight">Welcome back</h1>
+        <p className="text-sm max-w-xs mx-auto">
+          By continuing, you are setting up a Crypt anonyumous account and agree
+          to our User Agreement and Privacy Policy.
+        </p>
+      </div>
+      <UserAuthentication />
+      <p className="px-8 text-center text-sm text-muted-foreground">
+        New to Crypt?{" "}
+        <Link
+          href="/register"
+          className="hover:text-brand text-sm underline underline-offset-4"
+        >
+          Sign Up
+        </Link>
+      </p>
+    </div>
+  );
+}
diff --git a/components/pages/SignUp.tsx b/components/pages/SignUp.tsx
new file mode 100644
index 0000000..194ffc2
--- /dev/null
+++ b/components/pages/SignUp.tsx
@@ -0,0 +1,30 @@
+import Link from "next/link";
+import { Icons } from "../Icons";
+import UserAuthentication from "../UserAuthentication";
+
+export default function SignUp() {
+  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-24 w-24" />
+        <h1 className="text-2xl font-semibold tracking-tight">
+          Create your Account
+        </h1>
+        <p className="text-sm max-w-xs mx-auto">
+          By continuing, you are setting up a Crypt anonymous account and agree
+          to our User Agreement and Privacy Policy.
+        </p>
+      </div>
+      <UserAuthentication />
+      <p className="px-8 text-center text-sm text-muted-foreground">
+        Already a Crypt User?{" "}
+        <Link
+          href="/login"
+          className="hover:text-brand text-sm underline underline-offset-4"
+        >
+          Login
+        </Link>
+      </p>
+    </div>
+  );
+}