diff --git a/docs/src/containers/SocialButton/index.js b/docs/src/containers/SocialButton/index.js
index 7cbe0b2de..572c2210f 100644
--- a/docs/src/containers/SocialButton/index.js
+++ b/docs/src/containers/SocialButton/index.js
@@ -2,9 +2,11 @@ import React from "react";
 import { FaGithub, FaDiscord } from "react-icons/fa";
 import { RiStarSFill } from "react-icons/ri";
 import { useAppStars } from "@site/src/hooks/useAppStars";
+import { useDiscordWidget } from "@site/src/hooks/useDiscordWidget";
 
 export default function SocialButton() {
   const { stargazers } = useAppStars();
+  const { data } = useDiscordWidget();
 
   return (
     <div className="flex items-center space-x-2 justify-start">
@@ -36,7 +38,7 @@ export default function SocialButton() {
           <p className="text-base">Discord</p>
           <div className="text-sm text-white flex items-center space-x-1">
             <div className="w-2 h-2 bg-green-500 rounded-full" />
-            <span>{stargazers.count} online</span>
+            <span>{data.presence_count} online</span>
           </div>
         </div>
       </a>
diff --git a/docs/src/hooks/useDiscordWidget.js b/docs/src/hooks/useDiscordWidget.js
new file mode 100644
index 000000000..b85303f8b
--- /dev/null
+++ b/docs/src/hooks/useDiscordWidget.js
@@ -0,0 +1,28 @@
+import React, { useEffect, useState } from "react";
+
+import axios from "axios";
+import { isAxiosError } from "axios";
+
+export const useDiscordWidget = () => {
+  const [data, setData] = useState({});
+
+  useEffect(() => {
+    const updateData = async () => {
+      try {
+        const { data } = await axios.get(
+          "https://discord.com/api/guilds/1107178041848909847/widget.json"
+        );
+        setData({
+          ...data,
+        });
+      } catch (error) {
+        if (isAxiosError(error)) {
+          console.error("Failed to get stargazers:", error);
+        }
+      }
+    };
+    updateData();
+  }, []);
+
+  return { data };
+};