diff --git a/.env.example b/.env.example
index aa1cb9f..97bcbbd 100644
--- a/.env.example
+++ b/.env.example
@@ -8,6 +8,7 @@ CLERK_SIGN_IN_URL="/sign-in"
 CLERK_PUBLISHABLE_KEY=""
 CLERK_SECRET_KEY=""
 CLERK_WEBHOOK_SIGNING_SECRET=""
+ROOT_URL=""
 
 #Misc
 SHIT_LIST=""
diff --git a/app/routes/sign-in.$.tsx b/app/routes/sign-in.$.tsx
index 8d2dc4b..256a1bb 100644
--- a/app/routes/sign-in.$.tsx
+++ b/app/routes/sign-in.$.tsx
@@ -1,5 +1,26 @@
 import { SignIn } from "@clerk/remix";
+import { json } from "@remix-run/node";
+import { useLoaderData } from "@remix-run/react";
+
+export async function loader() {
+  return json({
+    ENV: {
+      ROOT_URL: process.env.ROOT_URL,
+    },
+  });
+}
 
 export default function SignInPage() {
-  return <SignIn />;
-}
+  const { ENV } = useLoaderData<typeof loader>();
+
+  return (
+    <main className="flex flex-col text-center items-center justify-center px-4 py-16 gap-4 min-h-[100%]">
+      <SignIn
+        path="/sign-in"
+        routing="path"
+        signUpUrl="/sign-up"
+        redirectUrl={ENV.ROOT_URL ? ENV.ROOT_URL : "/"}
+      />{" "}
+    </main>
+  );
+}
\ No newline at end of file
diff --git a/app/routes/sign-up.$.tsx b/app/routes/sign-up.$.tsx
index fc9baa0..08be903 100644
--- a/app/routes/sign-up.$.tsx
+++ b/app/routes/sign-up.$.tsx
@@ -1,5 +1,26 @@
 import { SignUp } from "@clerk/remix";
+import { json } from "@remix-run/node";
+import { useLoaderData } from "@remix-run/react";
+
+export async function loader() {
+  return json({
+    ENV: {
+      ROOT_URL: process.env.ROOT_URL,
+    },
+  });
+}
 
 export default function SignUpPage() {
-  return <SignUp />;
-}
+  const { ENV } = useLoaderData<typeof loader>();
+
+  return (
+    <main className="flex flex-col text-center items-center justify-center px-4 py-16 gap-4 min-h-[100%]">
+      <SignUp
+        path="/sign-in"
+        routing="path"
+        signInUrl="/sign-up"
+        redirectUrl={ENV.ROOT_URL ? ENV.ROOT_URL : "/"}
+      />{" "}
+    </main>
+  );
+}
\ No newline at end of file