diff --git a/apps/dashboard/src/app/(dashboard)/invite/client.tsx b/apps/dashboard/src/app/(dashboard)/invite/client.tsx
index f8597840..afe6711a 100644
--- a/apps/dashboard/src/app/(dashboard)/invite/client.tsx
+++ b/apps/dashboard/src/app/(dashboard)/invite/client.tsx
@@ -7,6 +7,12 @@ import { useQueryStates } from "nuqs";
 import { useTransition } from "react";
 import { toast } from "sonner";
 
+import { Link } from "@/components/common/link";
+import {
+  EmptyStateContainer,
+  EmptyStateDescription,
+  EmptyStateTitle,
+} from "@/components/content/empty-state";
 import {
   Section,
   SectionDescription,
@@ -14,6 +20,16 @@ import {
   SectionHeader,
   SectionTitle,
 } from "@/components/content/section";
+import {
+  FormCard,
+  FormCardContent,
+  FormCardDescription,
+  FormCardFooter,
+  FormCardFooterInfo,
+  FormCardHeader,
+  FormCardTitle,
+} from "@/components/forms/form-card";
+import { formatDate } from "@/lib/formatter";
 import { useTRPC } from "@/lib/trpc/client";
 import { switchWorkspace } from "@/lib/workspace-cookie";
 
@@ -42,11 +58,20 @@ export function Client() {
       <SectionGroup>
         <Section>
           <SectionHeader>
-            <SectionTitle className="text-destructive">Error</SectionTitle>
-            <SectionDescription className="font-mono">
-              {error.message}
+            <SectionTitle>Invitation</SectionTitle>
+            <SectionDescription>
+              This invitation can&apos;t be opened.
             </SectionDescription>
           </SectionHeader>
+          <EmptyStateContainer className="py-8">
+            <EmptyStateTitle>Invitation unavailable</EmptyStateTitle>
+            <EmptyStateDescription className="font-mono">
+              {error.message}
+            </EmptyStateDescription>
+            <Button size="sm" variant="outline" className="mt-2" asChild>
+              <Link href="/overview">Back to overview</Link>
+            </Button>
+          </EmptyStateContainer>
         </Section>
       </SectionGroup>
     );
@@ -55,48 +80,90 @@ export function Client() {
   if (!invitation) return null;
   if (invitation.acceptedAt) return null;
 
+  const { workspace } = invitation;
+
   return (
     <SectionGroup>
       <Section>
         <SectionHeader>
           <SectionTitle>Invitation</SectionTitle>
           <SectionDescription>
-            You&apos;ve been invited to join the workspace{" "}
-            {invitation.workspace.name ? (
-              <span className="font-semibold">{invitation.workspace.name}</span>
-            ) : (
-              <span className="font-mono">{invitation.workspace.slug}</span>
-            )}
-            .
+            Accepting switches you into the workspace. You can switch back
+            anytime from the sidebar.
           </SectionDescription>
         </SectionHeader>
-        <Button
-          size="sm"
-          onClick={() => {
-            startTransition(async () => {
-              try {
-                const promise = acceptInvitationMutation.mutateAsync({
-                  id: invitation.id,
-                });
-                toast.promise(promise, {
-                  loading: "Accepting invitation...",
-                  success: "Invitation accepted",
-                  error: (error) => {
-                    if (isTRPCClientError(error)) {
-                      return error.message;
-                    }
-                    return "Failed to accept invitation";
-                  },
+        <FormCard>
+          <FormCardHeader>
+            <FormCardTitle>Join workspace</FormCardTitle>
+            <FormCardDescription>
+              You were invited as{" "}
+              <span className="text-foreground font-mono">
+                {invitation.role}
+              </span>{" "}
+              via{" "}
+              <span className="text-foreground font-mono">
+                {invitation.email}
+              </span>
+              .
+            </FormCardDescription>
+          </FormCardHeader>
+          <FormCardContent>
+            <div className="flex items-center gap-3">
+              <div className="size-8 shrink-0 overflow-hidden rounded-lg">
+                <img
+                  src={`https://api.dicebear.com/9.x/glass/svg?seed=${workspace.slug}`}
+                  alt=""
+                />
+              </div>
+              <div className="grid min-w-0 text-sm leading-tight">
+                <div className="truncate font-medium">
+                  {workspace.name || "Untitled Workspace"}
+                </div>
+                <div className="truncate text-xs">
+                  <span className="font-commit-mono tracking-tight">
+                    {workspace.slug}
+                  </span>{" "}
+                  <span className="text-muted-foreground">
+                    {workspace.plan === "team" ? "pro" : workspace.plan}
+                  </span>
+                </div>
+              </div>
+            </div>
+          </FormCardContent>
+          <FormCardFooter>
+            <FormCardFooterInfo>
+              Invitation expires {formatDate(invitation.expiresAt)}.
+            </FormCardFooterInfo>
+            <Button
+              size="sm"
+              disabled={isPending}
+              onClick={() => {
+                startTransition(async () => {
+                  try {
+                    const promise = acceptInvitationMutation.mutateAsync({
+                      id: invitation.id,
+                    });
+                    toast.promise(promise, {
+                      loading: "Accepting invitation...",
+                      success: "Invitation accepted",
+                      error: (error) => {
+                        if (isTRPCClientError(error)) {
+                          return error.message;
+                        }
+                        return "Failed to accept invitation";
+                      },
+                    });
+                    await promise;
+                  } catch (error) {
+                    console.error(error);
+                  }
                 });
-                await promise;
-              } catch (error) {
-                console.error(error);
-              }
-            });
-          }}
-        >
-          {isPending ? "Accepting..." : "Accept Invitation"}
-        </Button>
+              }}
+            >
+              {isPending ? "Accepting..." : "Accept Invitation"}
+            </Button>
+          </FormCardFooter>
+        </FormCard>
       </Section>
     </SectionGroup>
   );
diff --git a/apps/dashboard/src/app/login/_components/actions.ts b/apps/dashboard/src/app/login/_components/actions.ts
index face7a3f..fb8e6cb1 100644
--- a/apps/dashboard/src/app/login/_components/actions.ts
+++ b/apps/dashboard/src/app/login/_components/actions.ts
@@ -7,9 +7,20 @@ import { signIn } from "@/lib/auth";
 import { ssoLookupRateLimit } from "@/lib/rate-limit/sso-lookup";
 import { SSO_ORG_COOKIE } from "@/lib/sso-cookie";
 
+// Same-origin paths only; the Auth.js `redirect` callback is the second line
+// of defense, not the first.
+function sanitizeRedirectTo(raw: FormDataEntryValue | null) {
+  const value = String(raw ?? "");
+  return value.startsWith("/") && !value.startsWith("//") ? value : undefined;
+}
+
 export async function signInWithResendAction(formData: FormData) {
   try {
-    await signIn("resend", formData);
+    // next-auth lifts `redirectTo` into the magic link's `callbackUrl` itself.
+    await signIn("resend", {
+      email: String(formData.get("email") ?? ""),
+      redirectTo: sanitizeRedirectTo(formData.get("redirectTo")),
+    });
   } catch (e) {
     console.error(e);
   }
@@ -28,11 +39,8 @@ export async function startSsoSignIn(
   formData: FormData,
 ): Promise<SsoFormState> {
   const email = String(formData.get("email") ?? "");
-  const redirectToRaw = String(formData.get("redirectTo") ?? "");
   const redirectTo =
-    redirectToRaw.startsWith("/") && !redirectToRaw.startsWith("//")
-      ? redirectToRaw
-      : "/overview";
+    sanitizeRedirectTo(formData.get("redirectTo")) ?? "/overview";
 
   if (!email.includes("@")) return { error: GENERIC_ERROR };
 
diff --git a/apps/dashboard/src/app/login/_components/magic-link-form.tsx b/apps/dashboard/src/app/login/_components/magic-link-form.tsx
index 866d552e..879196d5 100644
--- a/apps/dashboard/src/app/login/_components/magic-link-form.tsx
+++ b/apps/dashboard/src/app/login/_components/magic-link-form.tsx
@@ -8,10 +8,14 @@ import { toast } from "sonner";
 import { signInWithResendAction } from "./actions";
 import { LoginButton } from "./login-button";
 
+interface MagicLinkFormProps {
+  redirectTo?: string;
+}
+
 /**
  * @deprecated - only to be used in development mode
  */
-export default function MagicLinkForm() {
+export function MagicLinkForm({ redirectTo }: MagicLinkFormProps) {
   const { pending } = useFormStatus();
 
   return (
@@ -27,6 +31,9 @@ export default function MagicLinkForm() {
       }}
       className="grid gap-2"
     >
+      {redirectTo ? (
+        <input type="hidden" name="redirectTo" value={redirectTo} />
+      ) : null}
       <div className="grid gap-1.5">
         <Label htmlFor="email">Email</Label>
         <Input id="email" name="email" type="email" required />
diff --git a/apps/dashboard/src/app/login/page.tsx b/apps/dashboard/src/app/login/page.tsx
index 51d6b14f..9b1eaa2c 100644
--- a/apps/dashboard/src/app/login/page.tsx
+++ b/apps/dashboard/src/app/login/page.tsx
@@ -8,7 +8,7 @@ import type { SearchParams } from "nuqs/server";
 import { signIn } from "@/lib/auth";
 
 import { LoginButton } from "./_components/login-button";
-import MagicLinkForm from "./_components/magic-link-form";
+import { MagicLinkForm } from "./_components/magic-link-form";
 import { SsoForm } from "./_components/sso-form";
 import { searchParamsCache } from "./search-params";
 
@@ -53,7 +53,7 @@ export default async function Page(props: {
         {process.env.NODE_ENV === "development" ||
         process.env.SELF_HOST === "true" ? (
           <div className="grid gap-4">
-            <MagicLinkForm />
+            <MagicLinkForm redirectTo={redirectTo ?? undefined} />
             <Separator />
           </div>
         ) : null}
diff --git a/packages/api/src/router/email/index.ts b/packages/api/src/router/email/index.ts
index c25b1e3e..a601db9c 100644
--- a/packages/api/src/router/email/index.ts
+++ b/packages/api/src/router/email/index.ts
@@ -134,11 +134,16 @@ export const emailRouter = createTRPCRouter({
 
         if (!_invitation) return;
 
+        const baseUrl = opts.ctx.req?.nextUrl?.origin
+          ? `${opts.ctx.req.nextUrl.origin}/invite`
+          : undefined;
+
         await emailClient.sendTeamInvitation({
           to: _invitation.email,
           token: _invitation.token,
           invitedBy: `${opts.ctx.user.email}`,
           workspaceName: opts.ctx.workspace.name || "openstatus",
+          baseUrl,
         });
       }
     }),
diff --git a/packages/emails/src/client.tsx b/packages/emails/src/client.tsx
index 32e753eb..b582f434 100644
--- a/packages/emails/src/client.tsx
+++ b/packages/emails/src/client.tsx
@@ -268,7 +268,9 @@ export class EmailClient {
 
   public async sendTeamInvitation(req: TeamInvitationProps & { to: string }) {
     if (env.NODE_ENV === "development") {
+      const inviteUrl = `${req.baseUrl ?? "http://localhost:3000/invite"}?token=${req.token}`;
       console.log(`Sending team invitation email to ${req.to}`);
+      console.log(`>>> Team Invitation Link: ${inviteUrl}`);
       return;
     }