diff --git a/package.json b/package.json
index 5e7de87..6952913 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-icons": "^5.0.1",
+        "react-share": "^5.1.0",
         "react-simple-typewriter": "^5.0.1",
         "tailwindcss": "^3.2.4"
     },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 08e8806..2cb556d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -53,6 +53,9 @@ dependencies:
   react-icons:
     specifier: ^5.0.1
     version: 5.0.1(react@18.2.0)
+  react-share:
+    specifier: ^5.1.0
+    version: 5.1.0(react@18.2.0)
   react-simple-typewriter:
     specifier: ^5.0.1
     version: 5.0.1(react-dom@18.2.0)(react@18.2.0)
@@ -3775,6 +3778,10 @@ packages:
     engines: {node: '>=8'}
     dev: false
 
+  /classnames@2.5.1:
+    resolution: {integrity: sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==}
+    dev: false
+
   /clean-css@5.3.3:
     resolution: {integrity: sha512-D5J+kHaVb/wKSFcyyV75uCn8fiY4sV38XJoe4CUyGQ+mOU/fMVYUdH1hJC+CJQ5uY3EnW27SbJYS4X8BiLrAFg==}
     engines: {node: '>= 10.0'}
@@ -6256,6 +6263,14 @@ packages:
       graceful-fs: 4.2.10
     dev: false
 
+  /jsonp@0.2.1:
+    resolution: {integrity: sha512-pfog5gdDxPdV4eP7Kg87M8/bHgshlZ5pybl+yKxAnCZ5O7lCIn7Ixydj03wOlnDQesky2BPyA91SQ+5Y/mNwzw==}
+    dependencies:
+      debug: 2.6.9
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
   /keyv@4.5.4:
     resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
     dependencies:
@@ -8789,6 +8804,18 @@ packages:
       tiny-warning: 1.0.3
     dev: false
 
+  /react-share@5.1.0(react@18.2.0):
+    resolution: {integrity: sha512-OvyfMtj/0UzH1wi90OdHhZVJ6WUC/+IeWvBwppeZozwIGyAjQgyR0QXlHOrxVHVECqnGvcpBaFTXVrqouTieaw==}
+    peerDependencies:
+      react: ^17 || ^18
+    dependencies:
+      classnames: 2.5.1
+      jsonp: 0.2.1
+      react: 18.2.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
   /react-simple-typewriter@5.0.1(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-vA5HkABwJKL/DJ4RshSlY/igdr+FiVY4MLsSQYJX6FZG/f1/VwN4y1i3mPXRyfaswrvI8xii1kOVe1dYtO2Row==}
     engines: {node: '>=14'}
diff --git a/src/theme/BlogPostPage/icons.tsx b/src/theme/BlogPostPage/icons.tsx
new file mode 100644
index 0000000..3130ef2
--- /dev/null
+++ b/src/theme/BlogPostPage/icons.tsx
@@ -0,0 +1,29 @@
+import clsx from 'clsx';
+import React from 'react';
+
+export const Twitter = (props: React.SVGProps<SVGSVGElement>): JSX.Element => (
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={36}
+        height={36}
+        fill="none"
+        {...props}
+        viewBox="0 0 24 24"
+        className={clsx('text-black dark:text-white', props.className)}
+    >
+        <title>Twitter</title>
+        <rect
+            width={24}
+            height={24}
+            fill="currentColor"
+            rx={12}
+            className={clsx('text-gray-200 dark:text-black', props.className)}
+        />
+        <path
+            fill="currentColor"
+            fillRule="evenodd"
+            d="m6 6 4.62 6.75L6.098 18H7.1l3.963-4.604L14.214 18H18l-4.827-7.052L17.433 6h-1l-3.703 4.3L9.786 6H6Zm1.196.632h2.258l7.35 10.736h-2.258L7.196 6.632Z"
+            clipRule="evenodd"
+        />
+    </svg>
+);
diff --git a/src/theme/BlogPostPage/index.js b/src/theme/BlogPostPage/index.js
index 1476d74..f0b976c 100644
--- a/src/theme/BlogPostPage/index.js
+++ b/src/theme/BlogPostPage/index.js
@@ -10,6 +10,9 @@ import TOC from '@theme/TOC';
 import Unlisted from '@theme/Unlisted';
 import GiscusComponent from '@site/src/components/GiscusComponent';
 import { PostPaginator } from '@site/src/components/blog/post-paginator';
+import { LinkedinShareButton, RedditShareButton, TwitterShareButton, RedditIcon, LinkedinIcon } from 'react-share';
+import { Twitter } from './icons';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 
 function getMultipleRandomPosts(relatedPosts, number) {
     // Create a copy of the original array to avoid modifying it
@@ -53,9 +56,8 @@ function getMultipleRandomPosts(relatedPosts, number) {
 
 function BlogPostPageContent({ children }) {
     const { metadata, toc } = useBlogPost();
-    const { relatedPosts } = metadata;
 
-    const { nextItem, prevItem, frontMatter, unlisted } = metadata;
+    const { relatedPosts, nextItem, prevItem, frontMatter, unlisted, permalink, title, description } = metadata;
     const {
         hide_table_of_contents: hideTableOfContents,
         toc_min_heading_level: tocMinHeadingLevel,
@@ -65,6 +67,9 @@ function BlogPostPageContent({ children }) {
     const randomThreeRelatedPosts = getMultipleRandomPosts(relatedPosts, 3);
 
     console.log('relatedPosts', relatedPosts);
+    const {
+        siteConfig: { url },
+    } = useDocusaurusContext();
 
     return (
         <BlogLayout
@@ -77,6 +82,36 @@ function BlogPostPageContent({ children }) {
             {unlisted && <Unlisted />}
 
             <BlogPostItem>{children}</BlogPostItem>
+            <div className="flex items-center gap-3 pt-10 not-prose">
+                <span className="text-base">Share on</span>
+                <TwitterShareButton
+                    windowWidth={750}
+                    windowHeight={800}
+                    url={url + permalink}
+                    className="flex"
+                    title={title}
+                >
+                    <Twitter width={36} height={36} />
+                </TwitterShareButton>
+                <RedditShareButton
+                    className="flex"
+                    windowWidth={750}
+                    windowHeight={600}
+                    url={url + permalink}
+                    title={title}
+                >
+                    <RedditIcon size={36} round />
+                </RedditShareButton>
+                <LinkedinShareButton
+                    url={url + permalink}
+                    title={title}
+                    source={url}
+                    summary={description}
+                    className="flex"
+                >
+                    <LinkedinIcon size={36} round />
+                </LinkedinShareButton>
+            </div>
             <PostPaginator title="Related Articles" posts={randomThreeRelatedPosts}></PostPaginator>
             <GiscusComponent />
             {(nextItem || prevItem) && <BlogPostPaginator nextItem={nextItem} prevItem={prevItem} />}