diff --git a/package.json b/package.json
index 57e4e28..ff5a67d 100644
--- a/package.json
+++ b/package.json
@@ -3,9 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev -p 3030",
+    "dev": "next dev -p 3031",
     "build": "next build",
-    "start": "next start -p 3030",
+    "start": "next start -p 3031",
     "lint": "next lint"
   },
   "dependencies": {
diff --git a/src/components/GameHistory.tsx b/src/components/GameHistory.tsx
index 59db20f..6ff811f 100644
--- a/src/components/GameHistory.tsx
+++ b/src/components/GameHistory.tsx
@@ -51,7 +51,7 @@ export default function GameHistoryModal({
         );
         const gameData = res.data || [];
         setGamesHistory(gameData);
-        console.log(`history data ${gameData}`);
+        // console.log(`history data ${gameData}`);
         const opponentIds: string[] = gameData.map((game: GameHistory) =>
           game.master_id === userId ? game.client_id : game.master_id
         );
diff --git a/src/components/ReferralSection.tsx b/src/components/ReferralSection.tsx
index 1a8a93e..f3dc564 100644
--- a/src/components/ReferralSection.tsx
+++ b/src/components/ReferralSection.tsx
@@ -33,6 +33,24 @@ export default function ReferralSection({
   const [gamesHistory, setGamesHistory] = useState<GameHistory[]>([]);
   const [loading, setLoading] = useState(false);
   const [playerUsernames, setPlayerUsernames] = useState<{ [key: string]: string }>({});
+  const [referralInput, setReferralInput] = useState("");
+  const [actualRefId, setActualRefId] = useState<number>(refId);
+
+  useEffect(() => {
+    const fetchReferralId = async () => {
+      try {
+        const response = await axios.get(`${API_URL}get_referred_id.php?ref_id=${refId}`);
+        console.log(`referred id ${response.data}`);
+        const referredId = parseInt(response.data);
+        setActualRefId(referredId);
+      } catch (err) {
+        console.error("Error fetching referral ID", err);
+        toast.error("Failed to fetch referral status");
+      }
+    };
+
+    fetchReferralId();
+  }, [refId]);
 
   useEffect(() => {
     const fetchGames = async () => {
@@ -76,6 +94,29 @@ export default function ReferralSection({
     window.open(`${EXPLORER_ADDRESS_TEMPLATE.replace("{address}", address)}`, "_blank");
   };
 
+  const handleReferralSubmit = async () => {
+    if (!referralInput.trim()) {
+      toast.error("Please enter a referral ID");
+      return;
+    }
+
+    try {
+      setActualRefId(parseInt(referralInput.trim()));
+      const response = await fetch(`${API_URL}submit_referral.php?ref_id=${refId}&referral_id=${referralInput.trim()}`);
+      
+      if (response.ok) {
+        toast.success("Referral submitted successfully!");
+        setReferralInput("");
+      } else {
+        toast.error("Failed to submit referral");
+        setActualRefId(-1);
+      }
+    } catch (err) {
+      console.error("Error submitting referral", err);
+      toast.error("Failed to submit referral");
+    }
+  };
+
   return (
     <>
       <div>
@@ -111,6 +152,31 @@ export default function ReferralSection({
               Share
             </button>
           </div>
+
+          {actualRefId === -1 && (
+            <div className="space-y-4 mb-4">
+              <p className="text-gray-400 text-sm">
+                Enter your friends referral ID
+              </p>
+              <div className="flex items-center gap-2">
+                <input
+                  type="number"
+                  value={referralInput}
+                  onChange={(e) => setReferralInput(e.target.value)}
+                  placeholder="Enter referral ID"
+                  className="bg-gray-700 text-white px-4 py-2 rounded-md flex-1 focus:outline-none focus:ring-2 focus:ring-[rgb(248,144,22)]"
+                />
+                <button
+                  onClick={handleReferralSubmit}
+                  className="bg-[rgb(248,144,22)] hover:bg-[rgb(248,200,100)] text-black px-4 py-2 rounded-md text-sm font-semibold"
+                >
+                  Refer
+                </button>
+              </div>
+              
+            </div>
+          )}
+
           <div className="flex items-center justify-between">
             <div className="flex items-center gap-8">
               <div>
diff --git a/src/data/shared.ts b/src/data/shared.ts
index 3dea281..0c824e3 100644
--- a/src/data/shared.ts
+++ b/src/data/shared.ts
@@ -1,12 +1,12 @@
-import {  clusterApiUrl, Connection } from "@solana/web3.js";
+import {   Connection } from "@solana/web3.js";
 
 // Replace this URL with your dedicated RPC endpoint
 // You can get one from providers like QuickNode, Alchemy, Helius, or GenesysGo
 // export const CLUSTER_URL = "https://tiniest-cold-darkness.solana-mainnet.quiknode.pro/72332d636ff78d498b880bd8fdc3eb646c827da8/";
 // export const CLUSTER_URL = "https://go.getblock.io/908837801b534ae7a6f0869fc44cc567";
-// export const CLUSTER_URL = "https://solana-mainnet.core.chainstack.com/c54e14eef17693283a0323efcc4ce731";
+export const CLUSTER_URL = "https://solana-mainnet.core.chainstack.com/c54e14eef17693283a0323efcc4ce731";
 // export const CLUSTER_URL = "https://mainnet.helius-rpc.com/?api-key=72332d63-6ff7-4d49-8b88-0bd8fdc3eb64";
-export const CLUSTER_URL = clusterApiUrl("devnet");
+// export const CLUSTER_URL = clusterApiUrl("devnet");
 export const EXPLORER_ADDRESS_TEMPLATE = "https://explorer.solana.com/address/{address}";
 export const EXPLORER_TX_TEMPLATE = "https://explorer.solana.com/tx/{address}";
 export const connection = new Connection(CLUSTER_URL);