diff --git a/themes/heo/components/HexoCard.js b/themes/heo/components/HexoCard.js
new file mode 100644
index 00000000..0806dc28
--- /dev/null
+++ b/themes/heo/components/HexoCard.js
@@ -0,0 +1,10 @@
+const Card = ({ children, headerSlot, className }) => {
+  return <div className={className}>
+    <>{headerSlot}</>
+    <section className="card shadow-md hover:shadow-md dark:text-gray-300 border dark:border-black rounded-xl lg:p-6 p-4 bg-white dark:bg-hexo-black-gray lg:duration-100">
+        {children}
+    </section>
+  </div>
+}
+export default Card
+
diff --git a/themes/heo/components/HexoRecentComments.js b/themes/heo/components/HexoRecentComments.js
index dbeee596..661654dc 100644
--- a/themes/heo/components/HexoRecentComments.js
+++ b/themes/heo/components/HexoRecentComments.js
@@ -1,4 +1,4 @@
-import Card from '@/themes/hexo/components/Card'
+import Card from '@./HexoCard'
 import { useGlobal } from '@/lib/global'
 import Link from 'next/link'
 import { RecentComments } from '@waline/client'