diff --git a/themes/example/components/ExampleRecentComments.js b/themes/example/components/ExampleRecentComments.js
new file mode 100644
index 00000000..5447b7cc
--- /dev/null
+++ b/themes/example/components/ExampleRecentComments.js
@@ -0,0 +1,35 @@
+import React from 'react'
+import { RecentComments } from '@waline/client'
+import BLOG from '@/blog.config'
+import Link from 'next/link'
+
+/**
+ * @see https://waline.js.org/guide/get-started.html
+ * @param {*} props
+ * @returns
+ */
+const ExampleRecentComments = (props) => {
+  const [comments, updateComments] = React.useState([])
+  const [onLoading, changeLoading] = React.useState(true)
+  React.useEffect(() => {
+    RecentComments({
+      serverURL: BLOG.COMMENT_WALINE_SERVER_URL,
+      count: 5
+    }).then(({ comments }) => {
+      changeLoading(false)
+      updateComments(comments)
+    })
+  }, [])
+
+  return <>
+         {onLoading && <div>Loading...<i className='ml-2 fas fa-spinner animate-spin' /></div>}
+        {!onLoading && comments && comments.length === 0 && <div>No Comments</div>}
+        {!onLoading && comments && comments.length > 0 && comments.map((comment) => <div key={comment.objectId} className='pb-2'>
+            <div className='dark:text-gray-300 text-gray-600 text-xs waline-recent-content' dangerouslySetInnerHTML={{ __html: comment.comment }} />
+            <div className='dark:text-gray-400 text-gray-400 font-sans text-sm text-right cursor-pointer hover:text-red-500 hover:underline pt-1'><Link href={comment.url + '#' + comment.objectId}><a >-- {comment.nick}</a></Link></div>
+        </div>)}
+
+  </>
+}
+
+export default ExampleRecentComments
diff --git a/themes/example/components/SideBar.js b/themes/example/components/SideBar.js
index b280cf89..823c9993 100644
--- a/themes/example/components/SideBar.js
+++ b/themes/example/components/SideBar.js
@@ -1,6 +1,8 @@
+import BLOG from '@/blog.config'
 import Live2D from '@/components/Live2D'
 import { useGlobal } from '@/lib/global'
 import Link from 'next/link'
+import ExampleRecentComments from './ExampleRecentComments'
 
 export const SideBar = (props) => {
   const { locale } = useGlobal()
@@ -36,6 +38,14 @@ export const SideBar = (props) => {
             </div>
         </aside>
 
+        {BLOG.COMMENT_WALINE_SERVER_URL && <aside className="rounded shadow overflow-hidden mb-6">
+            <h3 className="text-sm bg-gray-100 text-gray-700 dark:bg-hexo-black-gray dark:text-gray-200 py-3 px-4 dark:border-hexo-black-gray border-b">{locale.COMMON.RECENT_COMMENTS}</h3>
+
+            <div className="p-4">
+                <ExampleRecentComments/>
+            </div>
+        </aside>}
+
         <aside className="rounded  overflow-hidden mb-6">
             <Live2D />
         </aside>
diff --git a/themes/hexo/components/SideRight.js b/themes/hexo/components/SideRight.js
index 4a5508dd..aea16cb3 100644
--- a/themes/hexo/components/SideRight.js
+++ b/themes/hexo/components/SideRight.js
@@ -6,7 +6,7 @@ import Catalog from './Catalog'
 import { InfoCard } from './InfoCard'
 import { AnalyticsCard } from './AnalyticsCard'
 import CONFIG_HEXO from '../config_hexo'
-import WalineRecentComment from '@/components/WalineRecentsComments'
+import WalineRecentComment from './WalineRecentsComments'
 import BLOG from '@/blog.config'
 
 /**
diff --git a/components/WalineRecentsComments.js b/themes/hexo/components/WalineRecentsComments.js
similarity index 81%
rename from components/WalineRecentsComments.js
rename to themes/hexo/components/WalineRecentsComments.js
index b1142383..f31fdb75 100644
--- a/components/WalineRecentsComments.js
+++ b/themes/hexo/components/WalineRecentsComments.js
@@ -32,9 +32,9 @@ const WalineRecentComment = (props) => {
 
         {onLoading && <div>Loading...<i className='ml-2 fas fa-spinner animate-spin' /></div>}
         {!onLoading && comments && comments.length === 0 && <div>No Comments</div>}
-        {!onLoading && comments && comments.length > 0 && comments.map((comment) => <div key={comment.objectId} className='pb-2'>
+        {!onLoading && comments && comments.length > 0 && comments.map((comment) => <div key={comment.objectId} className='pb-2 pl-1'>
             <div className='dark:text-gray-200 text-sm waline-recent-content' dangerouslySetInnerHTML={{ __html: comment.comment }} />
-            <div className='dark:text-gray-100 font-sans text-sm text-right cursor-pointer hover:text-red-500 hover:underline pt-1'><Link href={comment.url + '#' + comment.objectId}><a >-- {comment.nick}</a></Link></div>
+            <div className='dark:text-gray-400 text-gray-400 font-sans text-sm text-right cursor-pointer hover:text-red-500 hover:underline pt-1 pr-2'><Link href={comment.url + '#' + comment.objectId}><a >-- {comment.nick}</a></Link></div>
         </div>)}
 
   </Card>
diff --git a/themes/next/components/NextRecentComments.js b/themes/next/components/NextRecentComments.js
new file mode 100644
index 00000000..caa84ef2
--- /dev/null
+++ b/themes/next/components/NextRecentComments.js
@@ -0,0 +1,35 @@
+import React from 'react'
+import { RecentComments } from '@waline/client'
+import BLOG from '@/blog.config'
+import Link from 'next/link'
+
+/**
+ * @see https://waline.js.org/guide/get-started.html
+ * @param {*} props
+ * @returns
+ */
+const NextRecentComments = (props) => {
+  const [comments, updateComments] = React.useState([])
+  const [onLoading, changeLoading] = React.useState(true)
+  React.useEffect(() => {
+    RecentComments({
+      serverURL: BLOG.COMMENT_WALINE_SERVER_URL,
+      count: 5
+    }).then(({ comments }) => {
+      changeLoading(false)
+      updateComments(comments)
+    })
+  }, [])
+
+  return <>
+        {onLoading && <div>Loading...<i className='ml-2 fas fa-spinner animate-spin' /></div>}
+        {!onLoading && comments && comments.length === 0 && <div>No Comments</div>}
+        {!onLoading && comments && comments.length > 0 && comments.map((comment) => <div key={comment.objectId} className='pb-2'>
+            <div className='dark:text-gray-300 text-gray-600 text-xs waline-recent-content' dangerouslySetInnerHTML={{ __html: comment.comment }} />
+            <div className='dark:text-gray-400 text-gray-400 font-sans text-sm text-right cursor-pointer hover:text-red-500 hover:underline pt-1'><Link href={comment.url + '#' + comment.objectId}><a >-- {comment.nick}</a></Link></div>
+        </div>)}
+
+  </>
+}
+
+export default NextRecentComments
diff --git a/themes/next/components/SideAreaRight.js b/themes/next/components/SideAreaRight.js
index b4f03826..78f2e202 100644
--- a/themes/next/components/SideAreaRight.js
+++ b/themes/next/components/SideAreaRight.js
@@ -6,6 +6,8 @@ import CategoryGroup from './CategoryGroup'
 import TagGroups from './TagGroups'
 import CONFIG_NEXT from '../config_next'
 import { useRouter } from 'next/router'
+import NextRecentComments from './NextRecentComments'
+import BLOG from '@/blog.config'
 
 /**
  * 侧边平铺
@@ -77,6 +79,24 @@ const SideAreaRight = (props) => {
           </Card>
          )}
 
+        {BLOG.COMMENT_WALINE_SERVER_URL && <Card>
+            <div className="text-sm pb-1 px-2 flex flex-nowrap justify-between font-light dark:text-gray-200">
+              <div className="text-gray-600 dark:text-gray-200">
+                <i className="mr-2 fas fa-tag" />
+                {locale.COMMON.RECENT_COMMENTS}
+              </div>
+              <Link href={'/tag'} passHref>
+                <a className="text-gray-400 hover:text-black  dark:hover:text-white hover:underline cursor-pointer">
+                  {locale.COMMON.MORE}{' '}
+                  <i className='fas fa-angle-double-right' />
+                </a>
+              </Link>
+            </div>
+            <div className="px-2 pt-2">
+                <NextRecentComments/>
+            </div>
+         </Card>}
+
       </div>
     </aside>
   )