diff --git a/docs/src/components/BuyMeACoffee/index.js b/docs/src/components/BuyMeACoffee/index.js
new file mode 100644
index 0000000..19cb6e8
--- /dev/null
+++ b/docs/src/components/BuyMeACoffee/index.js
@@ -0,0 +1,41 @@
+import React from "react";
+
+class BuyMeACoffee extends React.Component {
+  constructor(props) {
+    super(props)
+    let script = document.createElement("script");
+    script.src = 'https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js';
+    script.dataset.name = 'BMC-Widget';
+    script.dataset.cfasync = 'false';
+    script.dataset.id = 'amithkoujalgi';
+    script.dataset.description = 'Support me on Buy me a coffee!';
+    script.dataset.message = 'If you like my work and want to say thanks, or encourage me to do more, you can buy me a coffee! 😊';
+    script.dataset.color = '#2e8555';
+    script.dataset.position = 'Right';
+    script.dataset.x_margin = '18';
+    script.dataset.y_margin = '18';
+    script.async = true
+
+    script.onload = function () {
+      let evt = document.createEvent('Event');
+      evt.initEvent('DOMContentLoaded', false, false);
+      window.dispatchEvent(evt);
+    }
+    this.script = script
+  }
+
+  componentDidMount() {
+    document.head.appendChild(this.script)
+  }
+
+  // componentWillUnmount() {
+  //   document.head.removeChild(this.script);
+  //   document.body.removeChild(document.getElementById("bmc-wbtn"))
+  // }
+
+  render() {
+    return null
+  }
+}
+
+export default BuyMeACoffee;
\ No newline at end of file
diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css
index f1d6e94..9da6f53 100644
--- a/docs/src/css/custom.css
+++ b/docs/src/css/custom.css
@@ -37,4 +37,12 @@ div > h1,
 header > h1,
 h2 > a {
     font-size: 2rem !important;
+}
+
+#bmc-wbtn{
+    bottom: 15px;
+}
+
+#bmc-wbtn + div{
+    bottom:15px;
 }
\ No newline at end of file
diff --git a/docs/src/pages/index.js b/docs/src/pages/index.js
index bf32e07..61d69d4 100644
--- a/docs/src/pages/index.js
+++ b/docs/src/pages/index.js
@@ -3,38 +3,40 @@ import Link from '@docusaurus/Link';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Layout from '@theme/Layout';
 import HomepageFeatures from '@site/src/components/HomepageFeatures';
-
+import BuyMeACoffee from '@site/src/components/BuyMeACoffee';
 import Heading from '@theme/Heading';
 import styles from './index.module.css';
 
 function HomepageHeader() {
-    const {siteConfig} = useDocusaurusContext();
-    return (<header className={clsx('hero hero--primary', styles.heroBanner)}>
-        <div className="container">
-            <Heading as="h1" className="hero__title">
-                {siteConfig.title}
-            </Heading>
-            <img src="img/logo.svg" alt="Ollama4j Logo" className={styles.logo} style={{maxWidth: '20vh'}}/>
-            <p className="hero__subtitle">{siteConfig.tagline}</p>
-            <div className={styles.buttons}>
-                <Link
-                    className="button button--secondary button--lg"
-                    to="/intro">
-                    Getting Started
-                </Link>
-            </div>
-        </div>
-    </header>);
+  const {siteConfig} = useDocusaurusContext();
+  return (<header className={clsx('hero hero--primary', styles.heroBanner)}>
+    <div className="container">
+      <Heading as="h1" className="hero__title">
+        {siteConfig.title}
+      </Heading>
+      <img src="img/logo.svg" alt="Ollama4j Logo" className={styles.logo}
+           style={{maxWidth: '20vh'}}/>
+      <p className="hero__subtitle">{siteConfig.tagline}</p>
+      <div className={styles.buttons}>
+        <Link
+            className="button button--secondary button--lg"
+            to="/intro">
+          Getting Started
+        </Link>
+      </div>
+    </div>
+  </header>);
 }
 
 export default function Home() {
-    const {siteConfig} = useDocusaurusContext();
-    return (<Layout
-        title={`Hello from ${siteConfig.title}`}
-        description="Description will go into a meta tag in <head />">
-        <HomepageHeader/>
-        <main>
-            <HomepageFeatures/>
-        </main>
-    </Layout>);
-}
+  const {siteConfig} = useDocusaurusContext();
+  return (<Layout
+      title={`Hello from ${siteConfig.title}`}
+      description="Description will go into a meta tag in <head />">
+    <HomepageHeader/>
+    <main>
+      <HomepageFeatures/>
+      <BuyMeACoffee/>
+    </main>
+  </Layout>);
+}
\ No newline at end of file
