diff --git a/packages/supabase/src/auth-callback.service.ts b/packages/supabase/src/auth-callback.service.ts
index 2bf125d86..d76cf8c88 100644
--- a/packages/supabase/src/auth-callback.service.ts
+++ b/packages/supabase/src/auth-callback.service.ts
@@ -36,6 +36,13 @@ class AuthCallbackService {
     const url = new URL(request.url);
     const searchParams = url.searchParams;
 
+    // set the host to the request host
+    // since outside of Vercel it gets set as "localhost"
+    if (url.host.includes('localhost:')) {
+      url.host = request.headers.get('host') ?? params.host;
+      url.port = '';
+    }
+
     const token_hash = searchParams.get('token_hash');
     const type = searchParams.get('type') as EmailOtpType | null;
     const next = searchParams.get('next') ?? params.redirectPath;
diff --git a/packages/ui/src/makerkit/page.tsx b/packages/ui/src/makerkit/page.tsx
index 50c3a7e2b..52db7850e 100644
--- a/packages/ui/src/makerkit/page.tsx
+++ b/packages/ui/src/makerkit/page.tsx
@@ -141,12 +141,19 @@ export function PageHeader({
   children,
   title,
   description,
+  className,
 }: React.PropsWithChildren<{
+  className?: string;
   title?: string | React.ReactNode;
   description?: string | React.ReactNode;
 }>) {
   return (
-    <div className={'flex h-20 items-center justify-between lg:px-4'}>
+    <div
+      className={cn(
+        'flex h-20 items-center justify-between lg:px-4',
+        className,
+      )}
+    >
       {title ? (
         <div className={'flex flex-col space-y-1.5'}>
           <PageTitle>{title}</PageTitle>