diff --git a/src/index.css b/src/index.css
index c0438b7..9e64db7 100644
--- a/src/index.css
+++ b/src/index.css
@@ -49,6 +49,26 @@ header button {
   }
 }
 
+.ark-page-fade-in {
+  animation: ark-page-fade-in 240ms ease-out both;
+}
+
+@keyframes ark-page-fade-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ark-page-fade-in {
+    animation: none;
+  }
+}
+
 /* Desktop header nav: thin scrollbar when links overflow (still 單列) */
 .header-nav-scroll {
   scrollbar-width: thin;
diff --git a/src/layouts/PublicLayout.tsx b/src/layouts/PublicLayout.tsx
index 68a6f15..1d0aade 100644
--- a/src/layouts/PublicLayout.tsx
+++ b/src/layouts/PublicLayout.tsx
@@ -612,7 +612,9 @@ export function PublicLayout() {
               : "flex-1 px-4 pb-6 pt-6 min-[440px]:px-5 sm:px-6 md:px-9 md:pb-10 md:pt-10 xl:px-0"
         }`}
       >
-        <Outlet />
+        <div key={`${pathname}${search}`} className="ark-page-fade-in">
+          <Outlet />
+        </div>
       </main>
 
       <footer className="mt-auto bg-transparent md:border-t md:border-ark-line md:bg-ark-nav/90">