diff --git a/src/components/blog/BlogList.astro b/src/components/blog/BlogList.astro
index 1e1f50a..8f047f4 100644
--- a/src/components/blog/BlogList.astro
+++ b/src/components/blog/BlogList.astro
@@ -94,7 +94,7 @@ const readMoreText = lang === 'zh' ? '阅读更多' : 'Read More';
             <div class="p-6 flex-1 flex flex-col justify-between">
               <div>
                 <h2 class="text-xl font-bold text-card-foreground mb-3 group-hover:text-primary transition-colors duration-200">
-                  <a href={`${postBaseUrl}${post.slug}`}>
+                  <a href={`${postBaseUrl}${post.slug}`} data-astro-reload>
                     {post.title}
                   </a>
                 </h2>
@@ -137,6 +137,7 @@ const readMoreText = lang === 'zh' ? '阅读更多' : 'Read More';
                 
                 <a 
                   href={`${postBaseUrl}${post.slug}`}
+                  data-astro-reload
                   class="text-primary hover:text-primary font-medium flex items-center group"
                 >
                   {readMoreText}
diff --git a/src/components/blog/Comments.tsx b/src/components/blog/Comments.tsx
index 2022a4c..b4f8d75 100644
--- a/src/components/blog/Comments.tsx
+++ b/src/components/blog/Comments.tsx
@@ -13,12 +13,11 @@ export default function Comments({ lang = 'en', ...props }: CommentsProps) {
   const containerRef = useRef<HTMLDivElement>(null);
 
   const walineLang = lang === 'zh' ? 'zh-CN' : 'en';
+  const getTheme = () => (document.documentElement.classList.contains('dark') ? 'html.dark' : false);
 
   useEffect(() => {
     if (!containerRef.current) return;
 
-    const getTheme = () => document.documentElement.classList.contains('dark') ? 'html.dark' : false;
-
     const pathname = window.location.pathname;
     const postsMatch = pathname.match(/\/posts\/([^/]+)/);
     const path = postsMatch ? postsMatch[1] : pathname;
@@ -34,18 +33,6 @@ export default function Comments({ lang = 'en', ...props }: CommentsProps) {
       path,
     });
 
-    return () => walineInstanceRef.current?.destroy();
-  }, []);
-
-  useEffect(() => {
-    const getTheme = () => document.documentElement.classList.contains('dark') ? 'html.dark' : false;
-
-    walineInstanceRef.current?.update({
-      ...props,
-      lang: walineLang,
-      dark: getTheme(),
-    });
-
     const handleThemeChange = () => {
       walineInstanceRef.current?.update({
         ...props,
@@ -57,8 +44,22 @@ export default function Comments({ lang = 'en', ...props }: CommentsProps) {
     const observer = new MutationObserver(handleThemeChange);
     observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
 
-    return () => observer.disconnect();
-  }, [lang, props, walineLang]);
+    return () => {
+      observer.disconnect();
+      const instance = walineInstanceRef.current;
+      walineInstanceRef.current = null;
+
+      if (instance) {
+        try {
+          instance.destroy();
+        } catch {
+          if (containerRef.current) {
+            containerRef.current.innerHTML = '';
+          }
+        }
+      }
+    };
+  }, [props, walineLang]);
 
   return <div ref={containerRef} className="waline-container" />;
 }
diff --git a/src/layouts/BlogPostLayout.astro b/src/layouts/BlogPostLayout.astro
index 2df63a3..4cba6b7 100644
--- a/src/layouts/BlogPostLayout.astro
+++ b/src/layouts/BlogPostLayout.astro
@@ -107,7 +107,7 @@ const finalReadingTime = readTime ? parseInt(readTime.replace(/\D/g, '')) : unde
 
             <!-- Comments Section -->
             <div class="mt-10 sm:mt-16 border-t border-border pt-10">
-              <Comments client:only="react" lang={lang} />
+              <Comments client:visible lang={lang} />
             </div>
             
             <!-- Author Card moved to bottom with enhanced styling -->