diff --git a/app/page.tsx b/app/page.tsx
index 10b915a..f919a68 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -42,6 +42,7 @@ function Home() {
   const [twitterConnected, setTwitterConnected] = useState(false); // State to track Twitter connection
   const [walletConnected, setWalletConnected] = useState(false); // State to track Wallet connection
   const [incrementNumber, setIncrementNumber] = useState(1);
+  const[leaderboardData, setLeaderboardData] = useState([]);
   useEffect(() => {
     if (darkMode) {
       document.documentElement.classList.add("dark");
@@ -51,8 +52,15 @@ function Home() {
   }, [darkMode]);
 
   useEffect(() => {
-    const intervalId = setInterval(() => {
+    const intervalId = setInterval(async () => {
       setIncrementNumber((prevNumber) => prevNumber + 1);
+      const response = await fetch('https://vps.playpoolstudios.com/callfi/get_leaderboard.php');
+      if (!response.ok) {
+        throw new Error('Network response was not ok');
+      }
+      const data = await response.json();
+      console.log('Leaderboard data:', data);
+      setLeaderboardData(data);
     }, 5000);
     return () => clearInterval(intervalId); // Clean up the interval on component unmount
   }, []);
@@ -128,22 +136,20 @@ function Home() {
         </div>
       </header>
       <div className="flex-grow flex flex-col items-center justify-center w-full p-4">
-        <h2 className="text-2xl font-bold mb-4">Leaderboard</h2>
+        <h2 className="text-2xl font-bold mb-4">Leaderboard </h2>
         <div className="w-full max-w-4xl">
           <table className={`min-w-full rounded-lg overflow-hidden shadow-lg ${darkMode ? "bg-gray-800" : "bg-white"}`}>
             <thead className={`bg-gray-800 text-white`}>
               <tr>
                 <th className="py-2 px-4">Name</th>
-                <th className="py-2 px-4">Coin</th>
                 <th className="py-2 px-4">Points</th>
               </tr>
             </thead>
             <tbody>
-              {tableData.map((row, index) => (
-                <tr key={index} className={`${index % 2 === 0 ? (darkMode ? "bg-gray-700" : "bg-gray-100") : (darkMode ? "bg-gray-600" : "bg-gray-200")}`}>
-                  <td className="py-2 px-4 text-center">{row.name}</td>
-                  <td className="py-2 px-4 text-center">{row.coin}</td>
-                  <td className="py-2 px-4 text-center">{row.point}</td>
+            {leaderboardData.map((item, index) => (
+                <tr key={item.id} className={`${index % 2 === 0 ? (darkMode ? "bg-gray-700" : "bg-gray-100") : (darkMode ? "bg-gray-600" : "bg-gray-200")}`}>
+                  <td className="py-2 px-4 text-center">{item.username}</td>
+                  <td className="py-2 px-4 text-center">{item.points}</td>
                 </tr>
               ))}
             </tbody>