diff --git a/apps/page/.env.example b/apps/page/.env.example
index bc346e6..d79aaf7 100644
--- a/apps/page/.env.example
+++ b/apps/page/.env.example
@@ -2,6 +2,8 @@ NEXT_PUBLIC_SUPABASE_URL=
 NEXT_PUBLIC_SUPABASE_ANON_KEY=
 SUPABASE_SERVICE_ROLE_KEY=
 
+VISITOR_JWT_SECRET=your-secure-secret-key-change-this-in-production
+
 # Inngest
 INNGEST_EVENT_KEY=
 
diff --git a/apps/page/components/footer.tsx b/apps/page/components/footer.tsx
index 044b8a9..09a4ee7 100644
--- a/apps/page/components/footer.tsx
+++ b/apps/page/components/footer.tsx
@@ -1,6 +1,6 @@
+import { IPageSettings } from "@changes-page/supabase/types/page";
 import Image from "next/image";
 import { useEffect } from "react";
-import { IPageSettings } from "@changes-page/supabase/types/page";
 import appStoreBadgeLight from "../public/badges/App_Store_Badge_US-UK_RGB_blk.svg";
 import appStoreBadgeDark from "../public/badges/App_Store_Badge_US-UK_RGB_wht.svg";
 import googlePlayBadge from "../public/badges/google-play-badge.png";
@@ -14,6 +14,7 @@ import {
   TwitterIcon,
   YouTubeIcon,
 } from "./social-icons.component";
+import VisitorStatus from "./visitor-status";
 
 export default function Footer({ settings }: { settings: IPageSettings }) {
   useEffect(() => {
@@ -25,8 +26,12 @@ export default function Footer({ settings }: { settings: IPageSettings }) {
 
   return (
     <footer>
+      <div className="pt-4 py-2 flex justify-center space-x-6">
+        <VisitorStatus />
+      </div>
+
       {(settings?.app_store_url || settings?.play_store_url) && (
-        <p className="pt-8 py-4 flex justify-center space-x-6">
+        <p className="pt-4 py-4 flex justify-center space-x-6">
           {settings?.app_store_url ? (
             <a
               target="_blank"
diff --git a/apps/page/components/reactions.tsx b/apps/page/components/reactions.tsx
index 40c1bf9..c41d500 100644
--- a/apps/page/components/reactions.tsx
+++ b/apps/page/components/reactions.tsx
@@ -3,6 +3,8 @@ import { Transition } from "@headlessui/react";
 import classNames from "classnames";
 import { useCallback, useEffect, useState } from "react";
 import { httpGet, httpPost } from "../utils/http";
+import { useVisitorAuth } from "../hooks/useVisitorAuth";
+import VisitorAuthModal from "./visitor-auth-modal";
 
 const ReactionsCounter = ({
   postId,
@@ -11,6 +13,7 @@ const ReactionsCounter = ({
   floating,
   optimisticUpdate,
   setShowPicker,
+  onAuthRequired,
 }: {
   postId: string;
   aggregate: IReactions;
@@ -18,9 +21,15 @@ const ReactionsCounter = ({
   floating: boolean;
   optimisticUpdate?: (reaction: string, status: boolean) => void;
   setShowPicker?: (v: boolean) => void;
+  onAuthRequired?: () => void;
 }) => {
   const doReact = useCallback(
     (reaction: string) => {
+      if (onAuthRequired) {
+        onAuthRequired();
+        return;
+      }
+
       if (setShowPicker) {
         setShowPicker(false);
       }
@@ -38,7 +47,7 @@ const ReactionsCounter = ({
         },
       });
     },
-    [postId, setShowPicker, user, optimisticUpdate]
+    [postId, setShowPicker, user, optimisticUpdate, onAuthRequired]
   );
 
   return (
@@ -211,7 +220,9 @@ const ReactionsCounter = ({
 
 export default function Reactions(props: any) {
   const { post } = props;
+  const { visitor } = useVisitorAuth();
   const [showPicker, setShowPicker] = useState(false);
+  const [isAuthModalOpen, setIsAuthModalOpen] = useState(false);
   const [reactions, setReactions] = useState<IReactions>({});
   const [userReaction, setUserReaction] = useState<IReactions>({});
 
@@ -258,12 +269,20 @@ export default function Reactions(props: any) {
     updateReactions();
   }, [updateReactions]);
 
+  const handleReactionClick = useCallback(() => {
+    if (!visitor) {
+      setIsAuthModalOpen(true);
+      return;
+    }
+    setShowPicker((v) => !v);
+  }, [visitor]);
+
   return (
     <div className="flex">
       <div className="relative flex items-center">
         <button
           className="text-sm p-1.5 my-2 border border-gray-300 dark:border-gray-700 rounded-full bg-white dark:bg-gray-800 text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-200"
-          onClick={() => setShowPicker((v) => !v)}
+          onClick={handleReactionClick}
         >
           <svg
             className=" w-4 h-4"
@@ -313,9 +332,15 @@ export default function Reactions(props: any) {
           user={userReaction}
           optimisticUpdate={optimisticUpdate}
           setShowPicker={setShowPicker}
+          onAuthRequired={!visitor ? () => setIsAuthModalOpen(true) : undefined}
           floating={false}
         />
       ) : null}
+
+      <VisitorAuthModal
+        isOpen={isAuthModalOpen}
+        onClose={() => setIsAuthModalOpen(false)}
+      />
     </div>
   );
 }
diff --git a/apps/page/components/visitor-auth-modal.tsx b/apps/page/components/visitor-auth-modal.tsx
new file mode 100644
index 0000000..dcf1318
--- /dev/null
+++ b/apps/page/components/visitor-auth-modal.tsx
@@ -0,0 +1,141 @@
+import { Dialog } from "@headlessui/react";
+import { XIcon } from "@heroicons/react/outline";
+import { useState } from "react";
+import { httpPost } from "../utils/http";
+
+interface VisitorAuthModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export default function VisitorAuthModal({
+  isOpen,
+  onClose,
+}: VisitorAuthModalProps) {
+  const [email, setEmail] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [isEmailSent, setIsEmailSent] = useState(false);
+  const [error, setError] = useState("");
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError("");
+
+    try {
+      await httpPost({
+        url: "/api/auth/request-magic-link",
+        data: { email },
+      });
+
+      setIsEmailSent(true);
+      if (typeof window !== "undefined") {
+        sessionStorage.setItem("auth_redirect", window.location.href);
+      }
+    } catch (err) {
+      setError(
+        err instanceof Error
+          ? err.message
+          : "Something went wrong. Please try again."
+      );
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleClose = () => {
+    setEmail("");
+    setIsEmailSent(false);
+    setError("");
+    onClose();
+  };
+
+  return (
+    <Dialog open={isOpen} onClose={handleClose} className="relative z-50">
+      <div className="fixed inset-0 bg-black/30" aria-hidden="true" />
+
+      <div className="fixed inset-0 flex items-center justify-center p-4">
+        <Dialog.Panel className="mx-auto max-w-md rounded-lg bg-white p-6 shadow-lg dark:bg-gray-800">
+          <div className="flex items-center justify-between mb-4">
+            <Dialog.Title className="text-lg font-medium text-gray-900 dark:text-gray-100">
+              {isEmailSent ? "Check your email" : "Sign in to continue"}
+            </Dialog.Title>
+            <button
+              onClick={handleClose}
+              className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+            >
+              <XIcon className="h-5 w-5" />
+            </button>
+          </div>
+
+          {isEmailSent ? (
+            <div className="text-center">
+              <div className="mx-auto mb-4 h-12 w-12 rounded-full bg-green-100 dark:bg-green-900 flex items-center justify-center">
+                <svg
+                  className="h-6 w-6 text-green-600 dark:text-green-400"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M5 13l4 4L19 7"
+                  />
+                </svg>
+              </div>
+              <p className="text-gray-600 dark:text-gray-300 mb-4">
+                We have sent a magic link to <strong>{email}</strong>
+              </p>
+              <p className="text-sm text-gray-500 dark:text-gray-400">
+                Click the link in your email to complete your sign-in. The link
+                will expire in 15 minutes.
+              </p>
+            </div>
+          ) : (
+            <form onSubmit={handleSubmit}>
+              <div className="mb-4">
+                <label
+                  htmlFor="email"
+                  className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
+                >
+                  Email address
+                </label>
+                <input
+                  type="email"
+                  id="email"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  required
+                  className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-700 dark:text-gray-100"
+                  placeholder="your@email.com"
+                />
+              </div>
+
+              {error && (
+                <div className="mb-4 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-md">
+                  <p className="text-sm text-red-600 dark:text-red-400">
+                    {error}
+                  </p>
+                </div>
+              )}
+
+              <button
+                type="submit"
+                disabled={isLoading || !email}
+                className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed dark:bg-indigo-700 dark:hover:bg-indigo-600"
+              >
+                {isLoading ? "Sending..." : "Send magic link"}
+              </button>
+
+              <p className="mt-4 text-xs text-gray-500 dark:text-gray-400 text-center">
+                We will send you a secure link to sign in without a password.
+              </p>
+            </form>
+          )}
+        </Dialog.Panel>
+      </div>
+    </Dialog>
+  );
+}
diff --git a/apps/page/components/visitor-status.tsx b/apps/page/components/visitor-status.tsx
new file mode 100644
index 0000000..844bc5e
--- /dev/null
+++ b/apps/page/components/visitor-status.tsx
@@ -0,0 +1,71 @@
+import { useState } from "react";
+import { useVisitorAuth } from "../hooks/useVisitorAuth";
+import VisitorAuthModal from "./visitor-auth-modal";
+
+interface VisitorStatusProps {
+  onAuthRequired?: () => void;
+  showEmail?: boolean;
+}
+
+export default function VisitorStatus({
+  onAuthRequired,
+  showEmail = true,
+}: VisitorStatusProps) {
+  const { visitor, isLoading, isAuthenticated, logout } = useVisitorAuth();
+  const [showAuthModal, setShowAuthModal] = useState(false);
+
+  const handleSignIn = () => {
+    if (onAuthRequired) {
+      onAuthRequired();
+    } else {
+      setShowAuthModal(true);
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center space-x-2 text-sm text-gray-500 dark:text-gray-400">
+        <div className="w-4 h-4 rounded-full bg-gray-300 dark:bg-gray-600 animate-pulse"></div>
+        <span>Loading...</span>
+      </div>
+    );
+  }
+
+  if (isAuthenticated && visitor) {
+    return (
+      <div className="flex items-center space-x-3">
+        <div className="flex items-center space-x-2">
+          <div className="w-2 h-2 rounded-full bg-green-500"></div>
+          {showEmail && (
+            <span className="text-sm text-gray-700 dark:text-gray-300">
+              {visitor.email}
+            </span>
+          )}
+        </div>
+        <button
+          onClick={logout}
+          className="text-xs text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200"
+        >
+          Sign out
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <button
+        onClick={handleSignIn}
+        className="inline-flex items-center space-x-2 text-sm text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-300"
+      >
+        <div className="w-2 h-2 rounded-full bg-gray-400 dark:bg-gray-500"></div>
+        <span>Sign in</span>
+      </button>
+
+      <VisitorAuthModal
+        isOpen={showAuthModal}
+        onClose={() => setShowAuthModal(false)}
+      />
+    </>
+  );
+}
\ No newline at end of file
diff --git a/apps/page/hooks/useVisitorAuth.tsx b/apps/page/hooks/useVisitorAuth.tsx
new file mode 100644
index 0000000..d230326
--- /dev/null
+++ b/apps/page/hooks/useVisitorAuth.tsx
@@ -0,0 +1,94 @@
+import {
+  createContext,
+  ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+} from "react";
+
+interface Visitor {
+  id: string;
+  email: string;
+  email_verified: boolean;
+}
+
+interface UseVisitorAuthReturn {
+  visitor: Visitor | null;
+  isLoading: boolean;
+  isAuthenticated: boolean;
+  logout: () => Promise<void>;
+}
+
+const VisitorAuthContext = createContext<UseVisitorAuthReturn | null>(null);
+
+export function VisitorAuthProvider({ children }: { children: ReactNode }) {
+  const [visitor, setVisitor] = useState<Visitor | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [hasFetched, setHasFetched] = useState(false);
+
+  const fetchVisitor = useCallback(async () => {
+    if (hasFetched) return;
+
+    try {
+      const response = await fetch("/api/auth/me", {
+        credentials: "include",
+      });
+
+      if (response.ok) {
+        const data = await response.json();
+        if (data.success) {
+          setVisitor(data.visitor);
+        } else {
+          setVisitor(null);
+        }
+      } else {
+        setVisitor(null);
+      }
+    } catch (error) {
+      console.error("Failed to fetch visitor:", error);
+      setVisitor(null);
+    } finally {
+      setIsLoading(false);
+      setHasFetched(true);
+    }
+  }, [hasFetched]);
+
+  const logout = useCallback(async () => {
+    try {
+      await fetch("/api/auth/logout", {
+        method: "POST",
+        credentials: "include",
+      });
+      setVisitor(null);
+      setHasFetched(false);
+    } catch (error) {
+      console.error("Failed to logout:", error);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchVisitor();
+  }, [fetchVisitor]);
+
+  const value = {
+    visitor,
+    isLoading,
+    isAuthenticated: !!visitor,
+    logout,
+  };
+
+  return (
+    <VisitorAuthContext.Provider value={value}>
+      {children}
+    </VisitorAuthContext.Provider>
+  );
+}
+
+export function useVisitorAuth(): UseVisitorAuthReturn {
+  const context = useContext(VisitorAuthContext);
+  if (!context) {
+    throw new Error("useVisitorAuth must be used within VisitorAuthProvider");
+  }
+  return context;
+}
diff --git a/apps/page/lib/visitor-auth.ts b/apps/page/lib/visitor-auth.ts
new file mode 100644
index 0000000..4ad6fa1
--- /dev/null
+++ b/apps/page/lib/visitor-auth.ts
@@ -0,0 +1,149 @@
+import { IPageVisitor } from "@changes-page/supabase/types/page";
+import { SignJWT, jwtVerify } from "jose";
+import type { NextApiRequest } from "next";
+import { randomBytes, randomUUID } from "node:crypto";
+
+if (!process.env.VISITOR_JWT_SECRET) {
+  throw new Error("VISITOR_JWT_SECRET environment variable is required");
+}
+
+const JWT_SECRET = new TextEncoder().encode(process.env.VISITOR_JWT_SECRET);
+
+export const JWT_COOKIE_NAME = "cp_visitor_token";
+const JWT_EXPIRY = "30d";
+
+export interface VisitorTokenPayload {
+  visitor_id: string;
+  email: string;
+  email_verified: boolean;
+  iat: number;
+  exp: number;
+}
+
+export interface AuthenticatedVisitor {
+  id: string;
+  email: string;
+  email_verified: boolean;
+}
+
+/**
+ * Generate a secure verification token for magic links
+ */
+export function generateVerificationToken(): string {
+  return randomBytes(32).toString("hex");
+}
+
+/**
+ * Create a JWT token for an authenticated visitor
+ */
+export async function createVisitorJWT(
+  visitor: Pick<IPageVisitor, "id" | "email" | "email_verified">
+): Promise<string> {
+  const jwt = await new SignJWT({
+    visitor_id: visitor.id,
+    email: visitor.email,
+    email_verified: visitor.email_verified,
+  })
+    .setProtectedHeader({ alg: "HS256" })
+    .setIssuedAt()
+    .setExpirationTime(JWT_EXPIRY)
+    .sign(JWT_SECRET);
+
+  return jwt;
+}
+
+/**
+ * Type guard to check if payload is a valid VisitorTokenPayload
+ */
+function isVisitorTokenPayload(payload: any): payload is VisitorTokenPayload {
+  return (
+    typeof payload.visitor_id === "string" &&
+    typeof payload.email === "string" &&
+    typeof payload.email_verified === "boolean" &&
+    typeof payload.iat === "number" &&
+    typeof payload.exp === "number"
+  );
+}
+
+/**
+ * Verify and decode a visitor JWT token
+ */
+export async function verifyVisitorJWT(
+  token: string
+): Promise<VisitorTokenPayload | null> {
+  try {
+    const { payload } = await jwtVerify(token, JWT_SECRET);
+
+    if (isVisitorTokenPayload(payload)) {
+      return payload;
+    } else {
+      console.error("Invalid JWT payload structure");
+      return null;
+    }
+  } catch (error) {
+    console.error("JWT verification failed:", error);
+    return null;
+  }
+}
+
+/**
+ * Get authenticated visitor from request cookies
+ */
+export async function getAuthenticatedVisitor(
+  req: NextApiRequest
+): Promise<AuthenticatedVisitor | null> {
+  const token = req.cookies[JWT_COOKIE_NAME];
+  if (!token) {
+    return null;
+  }
+
+  const payload = await verifyVisitorJWT(token);
+  if (!payload) {
+    return null;
+  }
+
+  return {
+    id: payload.visitor_id,
+    email: payload.email,
+    email_verified: payload.email_verified,
+  };
+}
+
+/**
+ * Get visitor ID from either JWT token or legacy cookie
+ * This maintains backward compatibility with existing visitor tracking
+ */
+export async function getVisitorId(req: NextApiRequest): Promise<string> {
+  // First try to get from JWT token
+  const authenticatedVisitor = await getAuthenticatedVisitor(req);
+  if (authenticatedVisitor) {
+    return authenticatedVisitor.id;
+  }
+
+  // Fall back to legacy cookie
+  let visitorId = req.cookies.cp_pa_vid;
+
+  if (!visitorId) {
+    // Generate new visitor ID if none exists
+    visitorId = randomUUID();
+  }
+
+  return visitorId;
+}
+
+/**
+ * Check if a verification token is expired
+ */
+export function isTokenExpired(expiresAt: string | null): boolean {
+  if (!expiresAt) {
+    return true;
+  }
+  return new Date(expiresAt) < new Date();
+}
+
+/**
+ * Generate verification token expiry time (15 minutes from now)
+ */
+export function getTokenExpiry(): Date {
+  return new Date(Date.now() + 15 * 60 * 1000); // 15 minutes
+}
diff --git a/apps/page/package.json b/apps/page/package.json
index d50b49f..9620617 100644
--- a/apps/page/package.json
+++ b/apps/page/package.json
@@ -24,6 +24,7 @@
     "feed": "^4.2.2",
     "formik": "^2.2.9",
     "inngest": "^0.9.3",
+    "jose": "^6.1.0",
     "next": "^14.2.25",
     "next-seo": "^5.15.0",
     "next-themes": "^0.2.1",
@@ -44,6 +45,7 @@
     "strip-markdown": "^5.0.0",
     "ua-parser-js": "^1.0.32",
     "uuid": "^9.0.0",
+    "validator": "^13.15.15",
     "yup": "^0.32.9"
   },
   "devDependencies": {
@@ -54,6 +56,7 @@
     "@types/react": "^18.2.0",
     "@types/ua-parser-js": "^0.7.36",
     "@types/uuid": "^9.0.0",
+    "@types/validator": "^13.15.3",
     "autoprefixer": "^10.4.5",
     "eslint": "7.32.0",
     "eslint-config-next": "^14.1.0",
diff --git a/apps/page/pages/_app.tsx b/apps/page/pages/_app.tsx
index 8014983..9d18464 100644
--- a/apps/page/pages/_app.tsx
+++ b/apps/page/pages/_app.tsx
@@ -2,6 +2,7 @@ import { ThemeProvider } from "next-themes";
 import type { AppProps } from "next/app";
 import dynamic from "next/dynamic";
 import Head from "next/head";
+import { VisitorAuthProvider } from "../hooks/useVisitorAuth";
 import "../styles/globals.css";
 
 const ProgressBar = dynamic(
@@ -21,8 +22,10 @@ function MyApp({ Component, pageProps }: AppProps) {
         ></meta>
       </Head>
       <ThemeProvider attribute="class">
-        <Component {...pageProps} />
-        <ProgressBar />
+        <VisitorAuthProvider>
+          <Component {...pageProps} />
+          <ProgressBar />
+        </VisitorAuthProvider>
       </ThemeProvider>
     </>
   );
diff --git a/apps/page/pages/_sites/[site]/auth/verify.tsx b/apps/page/pages/_sites/[site]/auth/verify.tsx
new file mode 100644
index 0000000..0f834c8
--- /dev/null
+++ b/apps/page/pages/_sites/[site]/auth/verify.tsx
@@ -0,0 +1,142 @@
+import { NextSeo } from "next-seo";
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+import { httpPost } from "../../../../utils/http";
+
+export default function VerifyMagicLink() {
+  const router = useRouter();
+  const { token } = router.query;
+  const [status, setStatus] = useState<
+    "loading" | "verifying" | "success" | "error"
+  >("loading");
+  const [message, setMessage] = useState("");
+
+  useEffect(() => {
+    if (!router.isReady) return;
+
+    if (!token || typeof token !== "string") {
+      setStatus("error");
+      setMessage("Invalid verification link");
+      return;
+    }
+
+    setStatus("verifying");
+    verifyToken(token);
+  }, [router.isReady, token]);
+
+  const verifyToken = async (verificationToken: string) => {
+    try {
+      const response = await httpPost<{ success: boolean; message: string }>({
+        url: "/api/auth/verify-magic-link",
+        data: {
+          token: verificationToken,
+        },
+      });
+
+      if (response.success) {
+        setStatus("success");
+        setMessage("Email verified successfully! You are now signed in.");
+
+        // Redirect to the previous page or homepage after 2 seconds
+        setTimeout(() => {
+          const redirectTo = sessionStorage.getItem("auth_redirect") || "/";
+          sessionStorage.removeItem("auth_redirect");
+          window.location.href = redirectTo;
+        }, 2000);
+      } else {
+        setStatus("error");
+        setMessage(response.message || "Failed to verify email");
+      }
+    } catch (error) {
+      setStatus("error");
+      setMessage("Something went wrong. Please try again.");
+    }
+  };
+
+  return (
+    <>
+      <NextSeo
+        title="Verify Email - changes.page"
+        description="Verify your email to complete sign-in"
+      />
+
+      <div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
+        <div className="max-w-md w-full space-y-8">
+          <div className="text-center">
+            <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4">
+              {status === "loading" && "Loading..."}
+              {status === "verifying" && "Verifying your email..."}
+              {status === "success" && "Email Verified!"}
+              {status === "error" && "Verification Failed"}
+            </h1>
+
+            {(status === "loading" || status === "verifying") && (
+              <div className="flex justify-center">
+                <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-indigo-600"></div>
+              </div>
+            )}
+
+            {status === "success" && (
+              <div className="mx-auto mb-4 h-16 w-16 rounded-full bg-green-100 dark:bg-green-900 flex items-center justify-center">
+                <svg
+                  className="h-8 w-8 text-green-600 dark:text-green-400"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M5 13l4 4L19 7"
+                  />
+                </svg>
+              </div>
+            )}
+
+            {status === "error" && (
+              <div className="mx-auto mb-4 h-16 w-16 rounded-full bg-red-100 dark:bg-red-900 flex items-center justify-center">
+                <svg
+                  className="h-8 w-8 text-red-600 dark:text-red-400"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M6 18L18 6M6 6l12 12"
+                  />
+                </svg>
+              </div>
+            )}
+
+            <p className="text-gray-600 dark:text-gray-300 mb-4">{message}</p>
+
+            {status === "success" && (
+              <p className="text-sm text-gray-500 dark:text-gray-400">
+                Redirecting you back to the page...
+              </p>
+            )}
+
+            {status === "error" && (
+              <div className="space-y-4">
+                <button
+                  onClick={() => router.back()}
+                  className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+                >
+                  Go Back
+                </button>
+                <p className="text-xs text-gray-500 dark:text-gray-400">
+                  You can request a new magic link from the page you were
+                  visiting.
+                </p>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/apps/page/pages/_sites/[site]/roadmap/[roadmap_slug].tsx b/apps/page/pages/_sites/[site]/roadmap/[roadmap_slug].tsx
index 0590152..84d178f 100644
--- a/apps/page/pages/_sites/[site]/roadmap/[roadmap_slug].tsx
+++ b/apps/page/pages/_sites/[site]/roadmap/[roadmap_slug].tsx
@@ -15,7 +15,9 @@ import remarkGfm from "remark-gfm";
 import Footer from "../../../../components/footer";
 import PageHeader from "../../../../components/page-header";
 import SeoTags from "../../../../components/seo-tags";
+import VisitorAuthModal from "../../../../components/visitor-auth-modal";
 import { usePageTheme } from "../../../../hooks/usePageTheme";
+import { useVisitorAuth } from "../../../../hooks/useVisitorAuth";
 import {
   BLACKLISTED_SLUGS,
   fetchRenderData,
@@ -47,8 +49,10 @@ export default function RoadmapPage({
 }) {
   usePageTheme(settings?.color_scheme);
 
+  const { visitor } = useVisitorAuth();
   const [selectedItem, setSelectedItem] = useState<RoadmapItem | null>(null);
   const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isAuthModalOpen, setIsAuthModalOpen] = useState(false);
   const [votes, setVotes] = useState<
     Record<string, { count: number; voted: boolean }>
   >({});
@@ -75,6 +79,11 @@ export default function RoadmapPage({
   };
 
   const handleVote = async (itemId: string) => {
+    if (!visitor) {
+      setIsAuthModalOpen(true);
+      return;
+    }
+
     if (votingItems.has(itemId)) return;
 
     setVotingItems((prev) => new Set(prev).add(itemId));
@@ -357,181 +366,186 @@ export default function RoadmapPage({
                     <XIcon className="h-5 w-5" aria-hidden="true" />
                   </button>
 
-                <Dialog.Panel className="w-full h-full sm:h-auto sm:max-w-5xl sm:min-w-[880px] transform overflow-hidden rounded-none sm:rounded-2xl bg-white dark:bg-gray-900 text-left align-middle shadow-xl transition-all flex flex-col sm:block">
-
-                  {/* Mobile Header with Close Button */}
-                  <div className="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700 sm:hidden">
-                    <h3 className="text-lg font-semibold text-gray-900 dark:text-white truncate">
-                      {selectedItem?.title}
-                    </h3>
-                    <button
-                      type="button"
-                      className="rounded-full p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-500"
-                      onClick={closeItemModal}
-                    >
-                      <XIcon className="h-6 w-6" aria-hidden="true" />
-                    </button>
-                  </div>
-
-                  <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 relative p-4 sm:p-8 overflow-y-auto flex-1 sm:h-auto">
-                    {/* Column Divider */}
-                    <div className="hidden lg:block absolute left-2/3 top-0 bottom-0 w-px bg-gray-200 dark:bg-gray-800 transform -translate-x-1/2 z-10"></div>
-
-                    {/* Left side - Content */}
-                    <div className="lg:col-span-2 space-y-6">
-                      <h3 className="hidden sm:block text-xl font-semibold leading-6 text-gray-900 dark:text-white">
+                  <Dialog.Panel className="w-full h-full sm:h-auto sm:max-w-5xl sm:min-w-[880px] transform overflow-hidden rounded-none sm:rounded-2xl bg-white dark:bg-gray-900 text-left align-middle shadow-xl transition-all flex flex-col sm:block">
+                    {/* Mobile Header with Close Button */}
+                    <div className="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700 sm:hidden">
+                      <h3 className="text-lg font-semibold text-gray-900 dark:text-white truncate">
                         {selectedItem?.title}
                       </h3>
-                      {selectedItem?.description && (
-                        <div>
-                          <div className="prose prose-sm dark:prose-invert max-w-none text-gray-600 dark:text-gray-300">
-                            <ReactMarkdown
-                              rehypePlugins={[
-                                rehypeRaw,
-                                [
-                                  rehypeSanitize,
-                                  {
-                                    ...defaultSchema,
-                                    attributes: {
-                                      ...defaultSchema.attributes,
-                                      a: [
-                                        ...(defaultSchema.attributes?.a || []),
-                                        ["target"],
-                                        ["rel"],
-                                      ],
-                                      code: [
-                                        ...(defaultSchema.attributes?.code ||
-                                          []),
-                                        ["className"],
-                                      ],
-                                      span: [
-                                        ...(defaultSchema.attributes?.span ||
-                                          []),
-                                        ["className"],
-                                      ],
-                                    },
-                                  },
-                                ],
-                              ]}
-                              remarkPlugins={[remarkGfm]}
-                            >
-                              {selectedItem.description}
-                            </ReactMarkdown>
-                          </div>
-                        </div>
-                      )}
+                      <button
+                        type="button"
+                        className="rounded-full p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-500"
+                        onClick={closeItemModal}
+                      >
+                        <XIcon className="h-6 w-6" aria-hidden="true" />
+                      </button>
                     </div>
 
-                    {/* Right side - Metadata */}
-                    <div className="lg:col-span-1 space-y-6">
-                      {/* Votes */}
-                      <div className="flex items-center justify-between">
-                        <span className="text-sm font-medium text-gray-500 dark:text-gray-400">
-                          Votes
-                        </span>
-                        <button
-                          onClick={() =>
-                            selectedItem && handleVote(selectedItem.id)
-                          }
-                          disabled={
-                            !selectedItem || votingItems.has(selectedItem.id)
-                          }
-                          className={`flex items-center text-sm px-3 py-1.5 rounded-lg border transition-colors ${
-                            selectedItem && votes[selectedItem.id]?.voted
-                              ? "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200 border-blue-300 dark:border-blue-700"
-                              : "text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-600 border-gray-200 dark:border-gray-600 hover:border-gray-300 dark:hover:border-gray-500"
-                          } ${
-                            !selectedItem || votingItems.has(selectedItem.id)
-                              ? "opacity-50 cursor-not-allowed"
-                              : "cursor-pointer"
-                          }`}
-                        >
-                          <svg
-                            className="mr-1 h-4 w-4"
-                            fill="currentColor"
-                            viewBox="0 0 20 20"
-                          >
-                            <path
-                              fillRule="evenodd"
-                              d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z"
-                              clipRule="evenodd"
-                            />
-                          </svg>
-                          <span>
-                            {selectedItem
-                              ? votes[selectedItem.id]?.count ??
-                                (selectedItem.vote_count || 0)
-                              : 0}
-                          </span>
-                        </button>
+                    <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 relative p-4 sm:p-8 overflow-y-auto flex-1 sm:h-auto">
+                      {/* Column Divider */}
+                      <div className="hidden lg:block absolute left-2/3 top-0 bottom-0 w-px bg-gray-200 dark:bg-gray-800 transform -translate-x-1/2 z-10"></div>
+
+                      {/* Left side - Content */}
+                      <div className="lg:col-span-2 space-y-6">
+                        <h3 className="hidden sm:block text-xl font-semibold leading-6 text-gray-900 dark:text-white">
+                          {selectedItem?.title}
+                        </h3>
+                        {selectedItem?.description && (
+                          <div>
+                            <div className="prose prose-sm dark:prose-invert max-w-none text-gray-600 dark:text-gray-300">
+                              <ReactMarkdown
+                                rehypePlugins={[
+                                  rehypeRaw,
+                                  [
+                                    rehypeSanitize,
+                                    {
+                                      ...defaultSchema,
+                                      attributes: {
+                                        ...defaultSchema.attributes,
+                                        a: [
+                                          ...(defaultSchema.attributes?.a ||
+                                            []),
+                                          ["target"],
+                                          ["rel"],
+                                        ],
+                                        code: [
+                                          ...(defaultSchema.attributes?.code ||
+                                            []),
+                                          ["className"],
+                                        ],
+                                        span: [
+                                          ...(defaultSchema.attributes?.span ||
+                                            []),
+                                          ["className"],
+                                        ],
+                                      },
+                                    },
+                                  ],
+                                ]}
+                                remarkPlugins={[remarkGfm]}
+                              >
+                                {selectedItem.description}
+                              </ReactMarkdown>
+                            </div>
+                          </div>
+                        )}
                       </div>
 
-                      {/* Status (Column) */}
-                      {selectedItem?.column_id && (
-                        <div className="flex items-center justify-between">
-                          <span className="text-sm font-medium text-gray-500 dark:text-gray-400">
-                            Status
-                          </span>
-                          <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200">
-                            {columns.find(
-                              (col) => col.id === selectedItem.column_id
-                            )?.name || "Unknown"}
-                          </span>
-                        </div>
-                      )}
-
-                      {/* Category */}
-                      {selectedItem?.roadmap_categories && (
+                      {/* Right side - Metadata */}
+                      <div className="lg:col-span-1 space-y-6">
+                        {/* Votes */}
                         <div className="flex items-center justify-between">
                           <span className="text-sm font-medium text-gray-500 dark:text-gray-400">
-                            Category
+                            Votes
                           </span>
-                          <span
-                            className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${getCategoryColorClasses(
-                              selectedItem.roadmap_categories.color || "blue"
-                            )}`}
+                          <button
+                            onClick={() =>
+                              selectedItem && handleVote(selectedItem.id)
+                            }
+                            disabled={
+                              !selectedItem || votingItems.has(selectedItem.id)
+                            }
+                            className={`flex items-center text-sm px-3 py-1.5 rounded-lg border transition-colors ${
+                              selectedItem && votes[selectedItem.id]?.voted
+                                ? "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200 border-blue-300 dark:border-blue-700"
+                                : "text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-600 border-gray-200 dark:border-gray-600 hover:border-gray-300 dark:hover:border-gray-500"
+                            } ${
+                              !selectedItem || votingItems.has(selectedItem.id)
+                                ? "opacity-50 cursor-not-allowed"
+                                : "cursor-pointer"
+                            }`}
                           >
-                            {selectedItem.roadmap_categories.name}
-                          </span>
+                            <svg
+                              className="mr-1 h-4 w-4"
+                              fill="currentColor"
+                              viewBox="0 0 20 20"
+                            >
+                              <path
+                                fillRule="evenodd"
+                                d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z"
+                                clipRule="evenodd"
+                              />
+                            </svg>
+                            <span>
+                              {selectedItem
+                                ? votes[selectedItem.id]?.count ??
+                                  (selectedItem.vote_count || 0)
+                                : 0}
+                            </span>
+                          </button>
                         </div>
-                      )}
-
-                      {/* Board */}
-                      <div className="flex items-center justify-between">
-                        <span className="text-sm font-medium text-gray-500 dark:text-gray-400">
-                          Board
-                        </span>
-                        <span className="text-sm text-gray-900 dark:text-gray-100 font-medium">
-                          {board.title}
-                        </span>
-                      </div>
 
-                      {/* Created Date */}
-                      {selectedItem?.created_at && (
+                        {/* Status (Column) */}
+                        {selectedItem?.column_id && (
+                          <div className="flex items-center justify-between">
+                            <span className="text-sm font-medium text-gray-500 dark:text-gray-400">
+                              Status
+                            </span>
+                            <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200">
+                              {columns.find(
+                                (col) => col.id === selectedItem.column_id
+                              )?.name || "Unknown"}
+                            </span>
+                          </div>
+                        )}
+
+                        {/* Category */}
+                        {selectedItem?.roadmap_categories && (
+                          <div className="flex items-center justify-between">
+                            <span className="text-sm font-medium text-gray-500 dark:text-gray-400">
+                              Category
+                            </span>
+                            <span
+                              className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${getCategoryColorClasses(
+                                selectedItem.roadmap_categories.color || "blue"
+                              )}`}
+                            >
+                              {selectedItem.roadmap_categories.name}
+                            </span>
+                          </div>
+                        )}
+
+                        {/* Board */}
                         <div className="flex items-center justify-between">
                           <span className="text-sm font-medium text-gray-500 dark:text-gray-400">
-                            Created
+                            Board
                           </span>
-                          <span className="text-sm text-gray-900 dark:text-gray-100">
-                            {new Date(
-                              selectedItem.created_at
-                            ).toLocaleDateString("en-US", {
-                              year: "numeric",
-                              month: "long",
-                              day: "numeric",
-                            })}
+                          <span className="text-sm text-gray-900 dark:text-gray-100 font-medium">
+                            {board.title}
                           </span>
                         </div>
-                      )}
+
+                        {/* Created Date */}
+                        {selectedItem?.created_at && (
+                          <div className="flex items-center justify-between">
+                            <span className="text-sm font-medium text-gray-500 dark:text-gray-400">
+                              Created
+                            </span>
+                            <span className="text-sm text-gray-900 dark:text-gray-100">
+                              {new Date(
+                                selectedItem.created_at
+                              ).toLocaleDateString("en-US", {
+                                year: "numeric",
+                                month: "long",
+                                day: "numeric",
+                              })}
+                            </span>
+                          </div>
+                        )}
+                      </div>
                     </div>
-                  </div>
-                </Dialog.Panel>
+                  </Dialog.Panel>
                 </div>
               </Transition.Child>
             </div>
           </div>
         </Dialog>
       </Transition>
+
+      <VisitorAuthModal
+        isOpen={isAuthModalOpen}
+        onClose={() => setIsAuthModalOpen(false)}
+      />
     </>
   );
 }
diff --git a/apps/page/pages/api/auth/logout.ts b/apps/page/pages/api/auth/logout.ts
new file mode 100644
index 0000000..734ddad
--- /dev/null
+++ b/apps/page/pages/api/auth/logout.ts
@@ -0,0 +1,37 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import { JWT_COOKIE_NAME } from "../../../lib/visitor-auth";
+
+interface ApiResponse {
+  success: boolean;
+  message: string;
+}
+
+export default async function logoutVisitor(
+  req: NextApiRequest,
+  res: NextApiResponse<ApiResponse>
+) {
+  if (req.method !== "POST") {
+    return res.status(405).json({
+      success: false,
+      message: "Method not allowed",
+    });
+  }
+
+  try {
+    res.setHeader(
+      "Set-Cookie",
+      `${JWT_COOKIE_NAME}=; Path=/; Secure; HttpOnly; SameSite=Lax; Max-Age=0`
+    );
+
+    return res.status(200).json({
+      success: true,
+      message: "Logged out successfully",
+    });
+  } catch (error: any) {
+    console.error("logoutVisitor error:", error);
+    return res.status(500).json({
+      success: false,
+      message: "Internal server error",
+    });
+  }
+}
diff --git a/apps/page/pages/api/auth/me.ts b/apps/page/pages/api/auth/me.ts
new file mode 100644
index 0000000..ac10cb2
--- /dev/null
+++ b/apps/page/pages/api/auth/me.ts
@@ -0,0 +1,50 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import { getAuthenticatedVisitor } from "../../../lib/visitor-auth";
+
+interface ApiResponse {
+  success: boolean;
+  visitor?: {
+    id: string;
+    email: string;
+    email_verified: boolean;
+  };
+  message?: string;
+}
+
+export default async function getVisitorProfile(
+  req: NextApiRequest,
+  res: NextApiResponse<ApiResponse>
+) {
+  if (req.method !== "GET") {
+    return res.status(405).json({
+      success: false,
+      message: "Method not allowed",
+    });
+  }
+
+  try {
+    const visitor = await getAuthenticatedVisitor(req);
+
+    if (!visitor) {
+      return res.status(401).json({
+        success: false,
+        message: "Not authenticated",
+      });
+    }
+
+    return res.status(200).json({
+      success: true,
+      visitor: {
+        id: visitor.id,
+        email: visitor.email,
+        email_verified: visitor.email_verified,
+      },
+    });
+  } catch (error: any) {
+    console.error("getVisitorProfile error:", error);
+    return res.status(500).json({
+      success: false,
+      message: "Internal server error",
+    });
+  }
+}
\ No newline at end of file
diff --git a/apps/page/pages/api/auth/request-magic-link.ts b/apps/page/pages/api/auth/request-magic-link.ts
new file mode 100644
index 0000000..160d6bb
--- /dev/null
+++ b/apps/page/pages/api/auth/request-magic-link.ts
@@ -0,0 +1,200 @@
+import arcjet, { protectSignup } from "@arcjet/next";
+import { supabaseAdmin } from "@changes-page/supabase/admin";
+import type { NextApiRequest, NextApiResponse } from "next";
+import validator from "validator";
+import {
+  fetchRenderData,
+  translateHostToPageIdentifier,
+} from "../../../lib/data";
+import {
+  generateVerificationToken,
+  getTokenExpiry,
+} from "../../../lib/visitor-auth";
+import inngestClient from "../../../utils/inngest";
+
+const RATE_LIMIT_MINUTES = 2;
+
+interface RequestBody {
+  email: string;
+}
+
+interface ApiResponse {
+  success: boolean;
+  message: string;
+  error?: string;
+}
+
+export default async function requestMagicLink(
+  req: NextApiRequest,
+  res: NextApiResponse<ApiResponse>
+) {
+  if (req.method !== "POST") {
+    return res.status(405).json({
+      success: false,
+      message: "Method not allowed",
+    });
+  }
+
+  const { email }: RequestBody = req.body;
+
+  if (!email) {
+    return res.status(400).json({
+      success: false,
+      message: "Email is required",
+    });
+  }
+
+  if (!validator.isEmail(email)) {
+    return res.status(400).json({
+      success: false,
+      message: "Invalid email format",
+    });
+  }
+
+  if (process.env.ARCJET_KEY) {
+    const aj = arcjet({
+      key: process.env.ARCJET_KEY,
+      rules: [
+        protectSignup({
+          email: {
+            mode: "LIVE",
+            block: ["DISPOSABLE", "INVALID", "NO_MX_RECORDS"],
+          },
+          bots: {
+            mode: "LIVE",
+            block: ["AUTOMATED"],
+          },
+          rateLimit: {
+            mode: "LIVE",
+            interval: "1m",
+            max: 3,
+          },
+        }),
+      ],
+    });
+
+    const decision = await aj.protect(req, { email });
+
+    if (decision.isDenied()) {
+      console.log("auth/request-magic-link: [Arcjet Block]", decision.reason);
+      return res.status(400).json({
+        success: false,
+        message: "Please provide a valid email address",
+      });
+    }
+  }
+
+  try {
+    const hostname = String(req?.headers?.host || "");
+    const { domain, page: url_slug } = translateHostToPageIdentifier(hostname);
+
+    let pageUrl: string | null = null;
+    let pageId: string | null = null;
+
+    try {
+      const { page, settings } = await fetchRenderData(
+        String(domain || url_slug)
+      );
+      if (page && settings) {
+        pageId = page.id;
+        if (settings.custom_domain) {
+          pageUrl = `https://${settings.custom_domain}`;
+        } else {
+          pageUrl = `https://${page.url_slug}.changes.page`;
+        }
+      }
+    } catch (pageError) {
+      console.warn("Could not fetch page context for magic link:", pageError);
+    }
+
+    if (!pageUrl || !pageId) {
+      return res.status(400).json({
+        success: false,
+        message: "Could not determine page context. Please contact support.",
+      });
+    }
+
+    const { data: existingVisitor } = await supabaseAdmin
+      .from("page_visitors")
+      .select("id, verification_expires_at")
+      .eq("email", email.toLowerCase())
+      .order("updated_at", { ascending: false })
+      .limit(1)
+      .maybeSingle();
+
+    if (existingVisitor?.verification_expires_at) {
+      const lastRequestTime = new Date(existingVisitor.verification_expires_at);
+      const timeSinceLastRequest =
+        Date.now() - (lastRequestTime.getTime() - 15 * 60 * 1000);
+
+      if (timeSinceLastRequest < RATE_LIMIT_MINUTES * 60 * 1000) {
+        return res.status(429).json({
+          success: false,
+          message: `Please wait before requesting another magic link`,
+        });
+      }
+    }
+
+    const verificationToken = generateVerificationToken();
+    const expiresAt = getTokenExpiry();
+
+    const existingVisitorId = req.cookies.cp_pa_vid;
+    let visitorId: string | undefined;
+    if (existingVisitor) {
+      visitorId = existingVisitor.id;
+    } else if (existingVisitorId) {
+      const { data: idTaken } = await supabaseAdmin
+        .from("page_visitors")
+        .select("id")
+        .eq("id", existingVisitorId)
+        .maybeSingle();
+
+      if (!idTaken) {
+        visitorId = existingVisitorId;
+      }
+    }
+
+    const { error: upsertError } = await supabaseAdmin
+      .from("page_visitors")
+      .upsert(
+        {
+          ...(visitorId && { id: visitorId }),
+          email: email.toLowerCase(),
+          verification_token: verificationToken,
+          verification_expires_at: expiresAt.toISOString(),
+        },
+        {
+          onConflict: "email",
+        }
+      );
+
+    if (upsertError) {
+      console.error("Failed to upsert page_visitor:", upsertError);
+      return res.status(500).json({
+        success: false,
+        message: "Failed to process request",
+      });
+    }
+
+    await inngestClient.send({
+      name: "email/visitor.magic-link",
+      data: {
+        email: email.toLowerCase(),
+        verification_token: verificationToken,
+        page_url: pageUrl,
+        page_id: pageId,
+      },
+    });
+
+    return res.status(200).json({
+      success: true,
+      message: "Magic link sent! Please check your email.",
+    });
+  } catch (error: any) {
+    console.error("requestMagicLink error:", error);
+    return res.status(500).json({
+      success: false,
+      message: "Internal server error",
+    });
+  }
+}
diff --git a/apps/page/pages/api/auth/verify-magic-link.ts b/apps/page/pages/api/auth/verify-magic-link.ts
new file mode 100644
index 0000000..2c5c8fe
--- /dev/null
+++ b/apps/page/pages/api/auth/verify-magic-link.ts
@@ -0,0 +1,122 @@
+import { supabaseAdmin } from "@changes-page/supabase/admin";
+import type { NextApiRequest, NextApiResponse } from "next";
+import { createVisitorJWT, isTokenExpired } from "../../../lib/visitor-auth";
+
+interface RequestBody {
+  token: string;
+}
+
+interface ApiResponse {
+  success: boolean;
+  message: string;
+  visitor?: {
+    id: string;
+    email: string;
+    email_verified: boolean;
+  };
+  error?: string;
+}
+
+export default async function verifyMagicLink(
+  req: NextApiRequest,
+  res: NextApiResponse<ApiResponse>
+) {
+  if (req.method !== "POST") {
+    return res.status(405).json({
+      success: false,
+      message: "Method not allowed",
+    });
+  }
+
+  const { token }: RequestBody = req.body;
+
+  if (!token) {
+    return res.status(400).json({
+      success: false,
+      message: "Verification token is required",
+    });
+  }
+
+  try {
+    // Find visitor by verification token
+    const { data: visitor, error: fetchError } = await supabaseAdmin
+      .from("page_visitors")
+      .select("*")
+      .eq("verification_token", token)
+      .maybeSingle();
+
+    if (fetchError) {
+      console.error("Failed to fetch visitor:", fetchError);
+      return res.status(500).json({
+        success: false,
+        message: "Failed to verify token",
+        error: fetchError.message,
+      });
+    }
+
+    if (!visitor) {
+      return res.status(400).json({
+        success: false,
+        message: "Invalid or expired verification token",
+      });
+    }
+
+    // Check if token is expired
+    if (isTokenExpired(visitor.verification_expires_at)) {
+      return res.status(400).json({
+        success: false,
+        message:
+          "Verification token has expired. Please request a new magic link.",
+      });
+    }
+
+    // Mark email as verified and clear verification token
+    const { data: updatedVisitor, error: updateError } = await supabaseAdmin
+      .from("page_visitors")
+      .update({
+        email_verified: true,
+        verification_token: null,
+        verification_expires_at: null,
+      })
+      .eq("id", visitor.id)
+      .select()
+      .single();
+
+    if (updateError || !updatedVisitor) {
+      console.error("Failed to update visitor:", updateError);
+      return res.status(500).json({
+        success: false,
+        message: "Failed to verify email",
+        error: updateError?.message,
+      });
+    }
+
+    const jwtToken = await createVisitorJWT(updatedVisitor);
+
+    res.setHeader("Set-Cookie", [
+      `cp_visitor_token=${jwtToken}; Path=/; Secure; HttpOnly; SameSite=Lax; Max-Age=${
+        30 * 24 * 60 * 60
+      }`,
+      `cp_pa_vid=${updatedVisitor.id}; Path=/; Secure; SameSite=Lax; Max-Age=${
+        365 * 24 * 60 * 60
+      }`,
+    ]);
+
+    return res.status(200).json({
+      success: true,
+      message: "Email verified successfully!",
+      visitor: {
+        id: updatedVisitor.id,
+        email: updatedVisitor.email,
+        email_verified: updatedVisitor.email_verified,
+      },
+    });
+  } catch (error: any) {
+    console.error("verifyMagicLink error:", error);
+    return res.status(500).json({
+      success: false,
+      message: "Internal server error",
+      error: error.message,
+    });
+  }
+}
diff --git a/apps/page/pages/api/pa/view.ts b/apps/page/pages/api/pa/view.ts
index 499d9d8..ab07414 100644
--- a/apps/page/pages/api/pa/view.ts
+++ b/apps/page/pages/api/pa/view.ts
@@ -6,12 +6,12 @@ import {
   translateHostToPageIdentifier,
 } from "../../../lib/data";
 import { supabaseAdmin } from "@changes-page/supabase/admin";
+import { getVisitorId } from "../../../lib/visitor-auth";
 
 async function pageAnalyticsView(
   req: NextApiRequest,
   res: NextApiResponse<{ ok: boolean }>
 ) {
-  // Ignore bots
   if (String(req?.headers["user-agent"]).toLowerCase().includes("bot")) {
     return res.status(200).json({ ok: true });
   }
@@ -20,10 +20,10 @@ async function pageAnalyticsView(
   const { domain, page: url_slug } = translateHostToPageIdentifier(hostname);
 
   const { page_path, referrer } = req.body;
-  let { cp_pa_vid: visitor_id } = req.cookies;
 
-  if (!visitor_id) {
-    visitor_id = v4();
+  const visitor_id = await getVisitorId(req);
+
+  if (!req.cookies.cp_visitor_token && !req.cookies.cp_pa_vid) {
     res.setHeader(
       "Set-Cookie",
       `cp_pa_vid=${visitor_id}; Path=/; Secure; HttpOnly; SameSite=Lax; Max-Age=31536000`
diff --git a/apps/page/pages/api/post/react.ts b/apps/page/pages/api/post/react.ts
index cc3e182..06dcae0 100644
--- a/apps/page/pages/api/post/react.ts
+++ b/apps/page/pages/api/post/react.ts
@@ -1,16 +1,17 @@
 import type { NextApiRequest, NextApiResponse } from "next";
 import { v4 } from "uuid";
 import { supabaseAdmin } from "@changes-page/supabase/admin";
+import { getVisitorId } from "../../../lib/visitor-auth";
 
 export default async function reactToPost(
   req: NextApiRequest,
   res: NextApiResponse<{ ok: boolean }>
 ) {
   const { post_id, reaction } = req.body;
-  let { cp_pa_vid: visitor_id } = req.cookies;
 
-  if (!visitor_id) {
-    visitor_id = v4();
+  const visitor_id = await getVisitorId(req);
+
+  if (!req.cookies.cp_visitor_token && !req.cookies.cp_pa_vid) {
     res.setHeader(
       "Set-Cookie",
       `cp_pa_vid=${visitor_id}; Path=/; Secure; HttpOnly; SameSite=Lax; Max-Age=31536000`
diff --git a/apps/page/pages/api/roadmap/vote.ts b/apps/page/pages/api/roadmap/vote.ts
index 48dfc67..e30afb1 100644
--- a/apps/page/pages/api/roadmap/vote.ts
+++ b/apps/page/pages/api/roadmap/vote.ts
@@ -1,6 +1,7 @@
+import { supabaseAdmin } from "@changes-page/supabase/admin";
 import type { NextApiRequest, NextApiResponse } from "next";
 import { v4 } from "uuid";
-import { supabaseAdmin } from "@changes-page/supabase/admin";
+import { getVisitorId } from "../../../lib/visitor-auth";
 
 export default async function voteOnRoadmapItem(
   req: NextApiRequest,
@@ -16,18 +17,9 @@ export default async function voteOnRoadmapItem(
     return res.status(400).json({ ok: false, error: "Missing item_id" });
   }
 
-  let { cp_pa_vid: visitor_id } = req.cookies;
-
-  if (!visitor_id) {
-    visitor_id = v4();
-    res.setHeader(
-      "Set-Cookie",
-      `cp_pa_vid=${visitor_id}; Path=/; Secure; HttpOnly; SameSite=Lax; Max-Age=31536000`
-    );
-  }
+  const visitor_id = await getVisitorId(req);
 
   try {
-    // Ensure item exists and belongs to a public board
     const { data: itemCheck, error: itemCheckError } = await supabaseAdmin
       .from("roadmap_items")
       .select("id, board_id, roadmap_boards!inner(is_public)")
@@ -97,4 +89,3 @@ export default async function voteOnRoadmapItem(
     res.status(500).json({ ok: false, error: "Internal server error" });
   }
 }
-
diff --git a/apps/page/utils/http.ts b/apps/page/utils/http.ts
index 9a0791d..c558ec5 100644
--- a/apps/page/utils/http.ts
+++ b/apps/page/utils/http.ts
@@ -1,20 +1,20 @@
-export const httpPost = async ({
+export const httpPost = async <T = any, U = {}>({
   url,
-  data = {},
+  data,
 }: {
   url: string;
-  data: any;
-}) => {
+  data?: U;
+}): Promise<T> => {
   const res = await fetch(url, {
     method: "POST",
     headers: new Headers({ "Content-Type": "application/json" }),
-    body: JSON.stringify(data),
+    body: data ? JSON.stringify(data) : undefined,
+    credentials: "include",
   });
 
   const payload = await res.json();
 
-  if (res.status >= 400 || !payload.ok) {
-    // throw error with response body
+  if (res.status >= 400 || !payload.success) {
     throw new Error(payload.message);
   }
 
diff --git a/apps/web/components/page-settings/notifications.tsx b/apps/web/components/page-settings/notifications.tsx
index 36d8d73..a5c4f1f 100644
--- a/apps/web/components/page-settings/notifications.tsx
+++ b/apps/web/components/page-settings/notifications.tsx
@@ -3,6 +3,7 @@ import { Spinner } from "@changes-page/ui";
 import { InformationCircleIcon } from "@heroicons/react/solid";
 import { useFormik } from "formik";
 import { useCallback, useEffect, useState } from "react";
+import validator from "validator";
 import * as Yup from "yup";
 import { httpGet, httpPut } from "../../utils/http";
 import { notifyError } from "../core/toast.component";
@@ -66,6 +67,11 @@ export default function NotificationsSettings({
           );
           return;
         }
+
+        if (!validator.isEmail(values.email_reply_to)) {
+          notifyError("Please enter a valid reply-to email address");
+          return;
+        }
       }
 
       try {
diff --git a/apps/web/inngest/email/send-visitor-magic-link.ts b/apps/web/inngest/email/send-visitor-magic-link.ts
new file mode 100644
index 0000000..c45365b
--- /dev/null
+++ b/apps/web/inngest/email/send-visitor-magic-link.ts
@@ -0,0 +1,166 @@
+import { supabaseAdmin } from "@changes-page/supabase/admin";
+import inngestClient from "../../utils/inngest";
+import postmarkClient from "../../utils/postmark";
+
+interface EventData {
+  email: string;
+  verification_token: string;
+  page_url: string;
+  page_id?: string | null;
+}
+
+export const sendVisitorMagicLink = inngestClient.createFunction(
+  { name: "Email: Send visitor magic link" },
+  { event: "email/visitor.magic-link" },
+  async ({ event }) => {
+    const { email, verification_token, page_url, page_id }: EventData =
+      event.data;
+
+    console.log("Sending magic link email", {
+      email,
+      page_url,
+      page_id,
+    });
+
+    if (!page_id) {
+      throw new Error("Missing page_id");
+    }
+
+    const { data: page, error: pageError } = await supabaseAdmin
+      .from("pages")
+      .select("title, page_settings(page_logo)")
+      .eq("id", page_id)
+      .maybeSingle();
+    if (!page || pageError) {
+      console.error("Error fetching page:", pageError);
+      throw new Error("Page not found");
+    }
+
+    const pageName = page.title;
+    const pageLogoUrl = page.page_settings?.page_logo || null;
+
+    const magicLinkUrl = new URL(page_url);
+    magicLinkUrl.pathname = "/auth/verify";
+    magicLinkUrl.searchParams.set("token", verification_token);
+
+    // avoid catching error here so that inngest can retry
+    const result = await postmarkClient.sendEmail({
+      MessageStream: "outbound",
+      From: "no-reply@changes.page",
+      To: email,
+      Subject: `Sign in to ${pageName}`,
+      HtmlBody: `
+        <!DOCTYPE html>
+        <html>
+        <head>
+          <meta charset="utf-8">
+          <meta name="viewport" content="width=device-width, initial-scale=1.0">
+          <title>Your Magic Link</title>
+          <style>
+            body {
+              font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+              line-height: 1.6;
+              color: #333;
+              max-width: 600px;
+              margin: 0 auto;
+              padding: 20px;
+              background-color: #f8f9fa;
+            }
+            .container {
+              background-color: white;
+              padding: 40px;
+              border-radius: 8px;
+              box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+            }
+            .logo {
+              text-align: center;
+              margin-bottom: 30px;
+            }
+            .button {
+              display: inline-block;
+              background-color: #4f46e5;
+              color: white;
+              padding: 12px 24px;
+              text-decoration: none;
+              border-radius: 6px;
+              font-weight: 500;
+              margin: 20px 0;
+            }
+            .button:hover {
+              background-color: #4338ca;
+            }
+            .footer {
+              margin-top: 30px;
+              padding-top: 20px;
+              border-top: 1px solid #e5e7eb;
+              font-size: 14px;
+              color: #6b7280;
+            }
+            .warning {
+              background-color: #fef3c7;
+              border-left: 4px solid #f59e0b;
+              padding: 12px;
+              margin: 20px 0;
+              border-radius: 4px;
+            }
+          </style>
+        </head>
+        <body>
+          <div class="container">
+            <div class="logo">
+              ${
+                pageLogoUrl
+                  ? `<img src="${pageLogoUrl}" alt="${pageName}" style="max-width: 150px; height: auto; margin: 0 auto;"/>`
+                  : `<h1 style="color: #4f46e5; margin: 0;">${pageName}</h1>`
+              }
+            </div>
+
+            <h2>Complete your sign-in</h2>
+
+            <p>Hi there!</p>
+
+            <p>You requested to sign in to ${pageName}. Click the button below to complete your authentication:</p>
+
+            <div style="text-align: center;">
+              <a href="${magicLinkUrl.toString()}" class="button">Sign In</a>
+            </div>
+
+            <div class="warning">
+              <strong>Note:</strong> This link will expire in 15 minutes and can only be used once.
+            </div>
+
+            <p>If you didn't request this email, you can safely ignore it.</p>
+
+            <p>If you're having trouble with the button above, you can also copy and paste this link into your browser:</p>
+            <p style="background-color: #f3f4f6; padding: 10px; border-radius: 4px; word-break: break-all; font-size: 14px;">
+              ${magicLinkUrl.toString()}
+            </p>
+
+            <div class="footer">
+              <p>This email was sent on behalf of ${pageName} via changes.page.</p>
+            </div>
+          </div>
+        </body>
+        </html>
+      `,
+      TextBody: `
+        Complete your sign-in to ${pageName}
+
+        Hi there!
+
+        You requested to sign in to ${pageName}. Click or copy the link below to complete your authentication:
+
+        ${magicLinkUrl.toString()}
+
+        This link will expire in 15 minutes and can only be used once.
+
+        If you didn't request this email, you can safely ignore it.
+
+        ---
+        This email was sent on behalf of ${pageName} via changes.page.
+      `,
+    });
+
+    return { body: "Magic link email sent", result };
+  }
+);
diff --git a/apps/web/package.json b/apps/web/package.json
index 6cbd6dc..fd6858f 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -27,7 +27,6 @@
     "@supabase/supabase-js": "^2.39.3",
     "@tailwindcss/typography": "^0.5.1",
     "@types/canvas-confetti": "^1.6.4",
-    "@types/validator": "^13.15.3",
     "@vercel/og": "^0.0.20",
     "canvas-confetti": "^1.9.3",
     "capture-node": "^2.2.0",
@@ -77,6 +76,7 @@
     "@types/node": "^18.19.4",
     "@types/react": "^17.0.16",
     "@types/uuid": "^9.0.1",
+    "@types/validator": "^13.15.3",
     "autoprefixer": "^10.4.5",
     "postcss": "^8.4.5",
     "prettier": "^2.3.2",
diff --git a/apps/web/pages/api/inngest.ts b/apps/web/pages/api/inngest.ts
index 70f6dac..5023641 100644
--- a/apps/web/pages/api/inngest.ts
+++ b/apps/web/pages/api/inngest.ts
@@ -4,6 +4,7 @@ import { reportUsageForStripeInvoice } from "../../inngest/billing/report-pages-
 import { sendConfirmEmailNotification } from "../../inngest/email/send-confirm-email-notification";
 import { sendTeamInviteEmail } from "../../inngest/email/send-team-invite";
 import { sendWelcomeEmail } from "../../inngest/email/send-welcome-email";
+import { sendVisitorMagicLink } from "../../inngest/email/send-visitor-magic-link";
 import { deleteImagesJob } from "../../inngest/jobs/delete-images";
 import { sendPostNotification } from "./../../inngest/email/send-post-notification";
 
@@ -17,6 +18,7 @@ export default serve("changes-page", [
   sendPostNotification,
   sendWelcomeEmail,
   sendTeamInviteEmail,
+  sendVisitorMagicLink,
   // Background Jobs
   deleteImagesJob,
 ]);
diff --git a/packages/supabase/migrations/19_page_visitors_auth.sql b/packages/supabase/migrations/19_page_visitors_auth.sql
new file mode 100644
index 0000000..ada8788
--- /dev/null
+++ b/packages/supabase/migrations/19_page_visitors_auth.sql
@@ -0,0 +1,23 @@
+-- PAGE VISITORS table for email-based authentication
+create table page_visitors (
+  id uuid default uuid_generate_v4() primary key,
+  email text unique not null,
+  email_verified boolean not null default false,
+  verification_token text,
+  verification_expires_at timestamp with time zone,
+  created_at timestamp with time zone default timezone('utc'::text, now()) not null,
+  updated_at timestamp with time zone default timezone('utc'::text, now()) not null
+);
+
+alter table page_visitors enable row level security;
+
+-- Index for faster lookups by email and token
+create index idx_page_visitors_email on page_visitors(email);
+create index idx_page_visitors_verification_token on page_visitors(verification_token);
+create index idx_page_visitors_verification_expires on page_visitors(verification_expires_at);
+
+-- Trigger for updated_at
+CREATE TRIGGER set_timestamp
+BEFORE UPDATE ON page_visitors
+FOR EACH ROW
+EXECUTE PROCEDURE trigger_set_timestamp();
diff --git a/packages/supabase/types/index.ts b/packages/supabase/types/index.ts
index 1072451..924ae08 100644
--- a/packages/supabase/types/index.ts
+++ b/packages/supabase/types/index.ts
@@ -242,6 +242,36 @@ export type Database = {
           },
         ]
       }
+      page_visitors: {
+        Row: {
+          created_at: string
+          email: string
+          email_verified: boolean
+          id: string
+          updated_at: string
+          verification_expires_at: string | null
+          verification_token: string | null
+        }
+        Insert: {
+          created_at?: string
+          email: string
+          email_verified?: boolean
+          id?: string
+          updated_at?: string
+          verification_expires_at?: string | null
+          verification_token?: string | null
+        }
+        Update: {
+          created_at?: string
+          email?: string
+          email_verified?: boolean
+          id?: string
+          updated_at?: string
+          verification_expires_at?: string | null
+          verification_token?: string | null
+        }
+        Relationships: []
+      }
       pages: {
         Row: {
           created_at: string
@@ -814,14 +844,6 @@ export type Database = {
           thumbs_up_count: number
         }[]
       }
-      roadmap_item_has_voted: {
-        Args: { itemid: string; visitorid: string }
-        Returns: boolean
-      }
-      roadmap_item_votes_count: {
-        Args: { itemid: string }
-        Returns: number
-      }
     }
     Enums: {
       page_color_scheme: "auto" | "dark" | "light"
diff --git a/packages/supabase/types/page.ts b/packages/supabase/types/page.ts
index 5294193..652f48d 100644
--- a/packages/supabase/types/page.ts
+++ b/packages/supabase/types/page.ts
@@ -5,6 +5,7 @@ export type IPageSettings = Tables<"page_settings">;
 export type IPost = Tables<"posts">;
 export type IPageEmailSubscriber = Tables<"page_email_subscribers">;
 export type IPageView = Tables<"page_views">;
+export type IPageVisitor = Tables<"page_visitors">;
 export type ITeam = Tables<"teams">;
 export type ITeamMember = Tables<"team_members">;
 export type ITeamInvitation = Tables<"team_invitations">;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 75d68b4..f68f19f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -101,6 +101,9 @@ importers:
       inngest:
         specifier: ^0.9.3
         version: 0.9.3
+      jose:
+        specifier: ^6.1.0
+        version: 6.1.0
       next:
         specifier: ^14.2.25
         version: 14.2.28(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -161,6 +164,9 @@ importers:
       uuid:
         specifier: ^9.0.0
         version: 9.0.1
+      validator:
+        specifier: ^13.15.15
+        version: 13.15.15
       yup:
         specifier: ^0.32.9
         version: 0.32.11
@@ -186,6 +192,9 @@ importers:
       '@types/uuid':
         specifier: ^9.0.0
         version: 9.0.8
+      '@types/validator':
+        specifier: ^13.15.3
+        version: 13.15.3
       autoprefixer:
         specifier: ^10.4.5
         version: 10.4.21(postcss@8.5.3)
@@ -261,9 +270,6 @@ importers:
       '@types/canvas-confetti':
         specifier: ^1.6.4
         version: 1.9.0
-      '@types/validator':
-        specifier: ^13.15.3
-        version: 13.15.3
       '@vercel/og':
         specifier: ^0.0.20
         version: 0.0.20
@@ -406,6 +412,9 @@ importers:
       '@types/uuid':
         specifier: ^9.0.1
         version: 9.0.8
+      '@types/validator':
+        specifier: ^13.15.3
+        version: 13.15.3
       autoprefixer:
         specifier: ^10.4.5
         version: 10.4.21(postcss@8.5.3)
@@ -3490,6 +3499,9 @@ packages:
   jju@1.4.0:
     resolution: {integrity: sha512-8wb9Yw966OSxApiCt0K3yNJL8pnNeIv+OEq2YMidz4FKP6nonSRoOXc80iXY4JaN2FC11B9qsNmDsm+ZOfMROA==}
 
+  jose@6.1.0:
+    resolution: {integrity: sha512-TTQJyoEoKcC1lscpVDCSsVgYzUDg/0Bt3WE//WiTPK6uOCQC2KZS4MpugbMWt/zyjkopgZoXhZuCi00gLudfUA==}
+
   js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
 
@@ -8639,6 +8651,8 @@ snapshots:
 
   jju@1.4.0: {}
 
+  jose@6.1.0: {}
+
   js-tokens@4.0.0: {}
 
   js-yaml@3.14.1: