diff --git a/components/Ko-fi.tsx b/components/Ko-fi.tsx
new file mode 100644
index 0000000..91fda49
--- /dev/null
+++ b/components/Ko-fi.tsx
@@ -0,0 +1,28 @@
+import { useEffect } from 'react'
+import { siteMetadata } from '~/data/siteMetadata'
+
+export default function Kofi() {
+  useEffect(() => {
+    if (!siteMetadata.kofiName) return () => {}
+    const script = document.createElement('script')
+    script.src = 'https://storage.ko-fi.com/cdn/scripts/overlay-widget.js'
+    script.onload = () => {
+      if ((window as any).kofiWidgetOverlay) {
+        ;(window as any).kofiWidgetOverlay.draw(siteMetadata.kofiName, {
+          type: 'floating-chat',
+          'floating-chat.donateButton.text': 'Support me',
+          'floating-chat.donateButton.background-color': '#00b9fe',
+          'floating-chat.donateButton.text-color': '#fff',
+        })
+      }
+    }
+    document.body.appendChild(script)
+
+    // Clean up the script if the component is unmounted
+    return () => {
+      document.body.removeChild(script)
+    }
+  }, [])
+
+  return <></>
+}
diff --git a/components/LayoutWrapper.tsx b/components/LayoutWrapper.tsx
index df5037b..e4c97ab 100644
--- a/components/LayoutWrapper.tsx
+++ b/components/LayoutWrapper.tsx
@@ -4,6 +4,7 @@ import { Footer } from './Footer'
 import { Header } from './Header'
 import { MobileNav } from './MobileNav'
 import { SpeedInsights } from '@vercel/speed-insights/next'
+import Kofi from './Ko-fi'
 
 export function LayoutWrapper({ children }) {
   let [navShow, setNavShow] = useState(false)
@@ -20,6 +21,7 @@ export function LayoutWrapper({ children }) {
         </div>
       </div>
       <SpeedInsights />
+      <Kofi />
     </>
   )
 }
diff --git a/data/siteMetadata.ts b/data/siteMetadata.ts
index 9c74be6..948e531 100644
--- a/data/siteMetadata.ts
+++ b/data/siteMetadata.ts
@@ -35,6 +35,7 @@ export let siteMetadata = {
     linkedin: 'mengke',
     instagram: '_mk965',
   },
+  kofiName: 'mengke',
 }
 
 /**