diff --git a/src/components/page/MemberInfo.astro b/src/components/page/MemberInfo.astro
index 1c150fdf..7ee845f3 100644
--- a/src/components/page/MemberInfo.astro
+++ b/src/components/page/MemberInfo.astro
@@ -3,6 +3,7 @@ import { X } from "@lucide/astro";
 const { id = "member-info-modal" } = Astro.props;
 ---
 
+<div id={`${id}-overlay`} class="member-info-overlay"></div>
 <div id={id} class="member-info">
 	<div class="header">
 		<button class="close-btn" aria-label="關閉">
@@ -61,6 +62,17 @@ const { id = "member-info-modal" } = Astro.props;
 		}
 	};
 
+	// 解鎖背景滾動
+	const unlockBodyScroll = () => {
+		const scrollY = document.body.dataset.scrollY || "0";
+		document.body.style.overflow = "";
+		document.body.style.position = "";
+		document.body.style.width = "";
+		document.body.style.top = "";
+		window.scrollTo(0, parseInt(scrollY, 10));
+		delete document.body.dataset.scrollY;
+	};
+
 	// Unified Click Event Listener
 	document.addEventListener("keydown", e => {
 		if (e.key === "Enter" || e.key === " ") {
@@ -82,6 +94,7 @@ const { id = "member-info-modal" } = Astro.props;
 			const { name, position, link, team, description, mode, color } = trigger.dataset;
 
 			const modal = document.getElementById("member-info-modal");
+			const overlay = document.getElementById("member-info-modal-overlay");
 			if (modal) {
 				// Update Text
 				const nameEl = modal.querySelector("#member-name");
@@ -147,16 +160,37 @@ const { id = "member-info-modal" } = Astro.props;
 				}
 
 				modal.classList.add("show");
+				overlay?.classList.add("show");
+				// 鎖定背景滾動
+				document.body.style.overflow = "hidden";
+				document.body.style.position = "fixed";
+				document.body.style.width = "100%";
+				document.body.style.top = `-${window.scrollY}px`;
+				document.body.dataset.scrollY = String(window.scrollY);
 			}
 			return;
 		}
 
-		// Close modal logic
+		// Close modal logic - close button
 		const closeBtn = target.closest(".member-info .close-btn");
 		if (closeBtn) {
 			const modal = closeBtn.closest(".member-info") as HTMLElement | null;
+			const overlay = document.getElementById("member-info-modal-overlay");
+			if (modal) {
+				modal.classList.remove("show");
+				overlay?.classList.remove("show");
+				unlockBodyScroll();
+			}
+			return;
+		}
+
+		// Close modal logic - overlay click
+		if (target.classList.contains("member-info-overlay")) {
+			const modal = document.getElementById("member-info-modal");
 			if (modal) {
 				modal.classList.remove("show");
+				target.classList.remove("show");
+				unlockBodyScroll();
 			}
 			return;
 		}
@@ -174,8 +208,11 @@ const { id = "member-info-modal" } = Astro.props;
 	document.addEventListener("keydown", e => {
 		if (e.key === "Escape") {
 			const modal = document.getElementById("member-info-modal");
+			const overlay = document.getElementById("member-info-modal-overlay");
 			if (modal && modal.classList.contains("show")) {
 				modal.classList.remove("show");
+				overlay?.classList.remove("show");
+				unlockBodyScroll();
 			}
 		}
 	});
@@ -256,6 +293,29 @@ const { id = "member-info-modal" } = Astro.props;
 </script>
 
 <style>
+	.member-info-overlay {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background-color: rgba(0, 0, 0, 0.5);
+		z-index: 100;
+		opacity: 0;
+		visibility: hidden;
+		transition:
+			opacity 0.3s ease,
+			visibility 0s 0.3s;
+	}
+
+	.member-info-overlay.show {
+		opacity: 1;
+		visibility: visible;
+		transition:
+			opacity 0.3s ease,
+			visibility 0s 0s;
+	}
+
 	.member-info {
 		color: black;
 		background-color: white;
@@ -427,10 +487,15 @@ const { id = "member-info-modal" } = Astro.props;
 		.member-info {
 			width: calc(100vw - 4rem);
 			height: calc(100vh - 4rem);
-			align-self: center;
-			justify-self: center;
-			position: fixed;
+			top: 2rem;
+			left: 2rem;
+			border-radius: 1rem;
 			padding: 2.5rem;
+			transform: translateY(100%);
+		}
+
+		.member-info.show {
+			transform: translateY(0);
 		}
 
 		.header {
diff --git a/src/pages/info/index.astro b/src/pages/info/index.astro
index 9305a584..9e41d3c5 100644
--- a/src/pages/info/index.astro
+++ b/src/pages/info/index.astro
@@ -184,15 +184,36 @@ const { sections } = info;
 			if (typeof dialog.showModal === "function") dialog.showModal();
 			else dialog.setAttribute("open", "");
 
+			document.body.style.overflow = "hidden";
+			document.body.style.position = "fixed";
+			document.body.style.width = "100%";
+			document.body.style.top = `-${window.scrollY}px`;
+			document.body.dataset.scrollY = String(window.scrollY);
+
 			activateTab("shuttle");
 		});
 
+		// 恢復背景滾動
+		const unlockBodyScroll = () => {
+			const scrollY = document.body.dataset.scrollY || "0";
+			document.body.style.overflow = "";
+			document.body.style.position = "";
+			document.body.style.width = "";
+			document.body.style.top = "";
+			window.scrollTo(0, parseInt(scrollY, 10));
+			delete document.body.dataset.scrollY;
+		};
+
 		closeButton.addEventListener("click", () => dialog.close());
 
 		dialog.addEventListener("click", (e: MouseEvent) => {
 			if (e.target === dialog) dialog.close();
 		});
 
+		dialog.addEventListener("close", () => {
+			unlockBodyScroll();
+		});
+
 		tabs.forEach(btn => {
 			btn.addEventListener("click", () => {
 				const name = btn.getAttribute("data-transport-tab");