diff --git a/src/app/invite/[id]/page.tsx b/src/app/invite/[id]/page.tsx
new file mode 100644
index 0000000..c7a65e1
--- /dev/null
+++ b/src/app/invite/[id]/page.tsx
@@ -0,0 +1,191 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useParams, useRouter } from "next/navigation";
+import { motion } from "framer-motion";
+import {
+  Utensils,
+  Users,
+  Heart,
+  Sparkles,
+  ChevronRight,
+  Loader2,
+} from "lucide-react";
+import { getUserId } from "@/lib/userId";
+
+export default function InvitePage() {
+  const params = useParams<{ id: string }>();
+  const router = useRouter();
+  const roomId = params.id;
+
+  const [status, setStatus] = useState<"loading" | "ready" | "not_found">(
+    "loading",
+  );
+  const [userCount, setUserCount] = useState(0);
+  const [joining, setJoining] = useState(false);
+
+  useEffect(() => {
+    fetch(`/api/room/${roomId}`)
+      .then((res) => {
+        if (!res.ok) throw new Error();
+        return res.json();
+      })
+      .then((data) => {
+        setUserCount(data.userCount ?? 0);
+        setStatus("ready");
+      })
+      .catch(() => setStatus("not_found"));
+  }, [roomId]);
+
+  const handleJoin = async () => {
+    setJoining(true);
+    try {
+      const userId = getUserId();
+      await fetch(`/api/room/${roomId}/join`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ userId }),
+      });
+      router.push(`/room/${roomId}`);
+    } catch {
+      setJoining(false);
+    }
+  };
+
+  if (status === "loading") {
+    return (
+      <div className="flex min-h-dvh flex-col items-center justify-center bg-background">
+        <div className="h-6 w-6 animate-spin rounded-full border-2 border-zinc-300 border-t-emerald-500" />
+      </div>
+    );
+  }
+
+  if (status === "not_found") {
+    return (
+      <div className="flex min-h-dvh flex-col items-center justify-center gap-4 bg-background px-6">
+        <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-zinc-100">
+          <Utensils size={28} className="text-zinc-400" />
+        </div>
+        <h1 className="text-xl font-bold text-zinc-900">房间不存在</h1>
+        <p className="text-center text-sm text-zinc-500">
+          这个房间已过期或不存在，请让朋友重新分享链接
+        </p>
+        <button
+          onClick={() => router.push("/")}
+          className="mt-2 rounded-xl bg-emerald-500 px-6 py-2.5 text-sm font-bold text-white shadow-md shadow-emerald-200 transition-colors hover:bg-emerald-600"
+        >
+          自己创建房间
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex min-h-dvh flex-col items-center justify-center bg-background px-6 py-12">
+      <motion.div
+        className="flex flex-col items-center"
+        initial={{ y: -20, opacity: 0 }}
+        animate={{ y: 0, opacity: 1 }}
+        transition={{ duration: 0.5 }}
+      >
+        <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-emerald-500 shadow-lg shadow-emerald-200">
+          <Utensils size={28} className="text-white" />
+        </div>
+
+        <h1 className="mt-5 text-3xl font-black tracking-tight text-zinc-900">
+          NoWhatever
+        </h1>
+        <p className="mt-0.5 text-sm font-medium tracking-widest text-zinc-400">
+          别说随便
+        </p>
+      </motion.div>
+
+      <motion.div
+        className="mt-8 flex w-full max-w-xs flex-col items-center gap-2 rounded-2xl border border-emerald-100 bg-emerald-50/50 px-6 py-5"
+        initial={{ y: 10, opacity: 0 }}
+        animate={{ y: 0, opacity: 1 }}
+        transition={{ duration: 0.5, delay: 0.1 }}
+      >
+        <p className="text-center text-lg font-bold text-zinc-800">
+          有人邀请你一起选餐厅
+        </p>
+        <div className="flex items-center gap-2 text-sm text-zinc-500">
+          <span className="rounded-full bg-white px-2.5 py-0.5 font-mono text-base font-bold tracking-widest text-emerald-600 shadow-sm">
+            {roomId}
+          </span>
+        </div>
+        {userCount > 0 && (
+          <div className="flex items-center gap-1 text-xs text-zinc-400">
+            <Users size={13} />
+            <span>
+              已有 <span className="font-semibold text-emerald-500">{userCount}</span> 人在房间
+            </span>
+          </div>
+        )}
+      </motion.div>
+
+      <motion.div
+        className="mt-6 flex items-start justify-center gap-3"
+        initial={{ y: 10, opacity: 0 }}
+        animate={{ y: 0, opacity: 1 }}
+        transition={{ duration: 0.5, delay: 0.2 }}
+      >
+        <div className="flex flex-col items-center gap-1.5 w-20">
+          <div className="flex h-10 w-10 items-center justify-center rounded-full bg-emerald-50">
+            <Users size={18} className="text-emerald-500" />
+          </div>
+          <span className="text-xs font-semibold text-zinc-700">加入房间</span>
+          <span className="text-[10px] leading-tight text-zinc-400 text-center">
+            和朋友一起
+          </span>
+        </div>
+
+        <ChevronRight size={14} className="mt-3 shrink-0 text-zinc-300" />
+
+        <div className="flex flex-col items-center gap-1.5 w-20">
+          <div className="flex h-10 w-10 items-center justify-center rounded-full bg-amber-50">
+            <Heart size={18} className="text-amber-500" />
+          </div>
+          <span className="text-xs font-semibold text-zinc-700">各自滑卡</span>
+          <span className="text-[10px] leading-tight text-zinc-400 text-center">
+            右滑喜欢的店
+          </span>
+        </div>
+
+        <ChevronRight size={14} className="mt-3 shrink-0 text-zinc-300" />
+
+        <div className="flex flex-col items-center gap-1.5 w-20">
+          <div className="flex h-10 w-10 items-center justify-center rounded-full bg-rose-50">
+            <Sparkles size={18} className="text-rose-500" />
+          </div>
+          <span className="text-xs font-semibold text-zinc-700">匹配结果</span>
+          <span className="text-[10px] leading-tight text-zinc-400 text-center">
+            滑中同一家就去
+          </span>
+        </div>
+      </motion.div>
+
+      <motion.div
+        className="mt-8 w-full max-w-xs"
+        initial={{ y: 20, opacity: 0 }}
+        animate={{ y: 0, opacity: 1 }}
+        transition={{ duration: 0.5, delay: 0.3 }}
+      >
+        <button
+          onClick={handleJoin}
+          disabled={joining}
+          className="flex h-12 w-full items-center justify-center gap-2 rounded-xl bg-emerald-500 text-sm font-bold text-white shadow-md shadow-emerald-200 transition-colors hover:bg-emerald-600 disabled:opacity-50"
+        >
+          {joining ? (
+            <>
+              <Loader2 size={18} className="animate-spin" />
+              加入中...
+            </>
+          ) : (
+            "加入房间"
+          )}
+        </button>
+      </motion.div>
+    </div>
+  );
+}
diff --git a/src/components/TopNav.tsx b/src/components/TopNav.tsx
index 0c4db48..a2f2f19 100644
--- a/src/components/TopNav.tsx
+++ b/src/components/TopNav.tsx
@@ -20,7 +20,7 @@ export default function TopNav({ roomId, userCount }: TopNavProps) {
   }, []);
 
   const handleInvite = useCallback(async () => {
-    const url = window.location.href;
+    const url = `${window.location.origin}/invite/${roomId}`;
     const shareData = {
       title: "别说随便啦，来滑卡片决定吃什么！",
       text: "我建好房间了，快点开链接一起选餐厅，滑中同一家就去吃！",
@@ -42,7 +42,7 @@ export default function TopNav({ roomId, userCount }: TopNavProps) {
     } catch {
       showToast("复制失败，请手动复制链接");
     }
-  }, [showToast]);
+  }, [roomId, showToast]);
 
   return (
     <>