diff --git a/.env b/.env
deleted file mode 100644
index 0d59efc..0000000
--- a/.env
+++ /dev/null
@@ -1,2 +0,0 @@
-RPC="wss://ws.test.azero.dev"
-SEED="prize gravity gold also lift avocado basket raise random garlic canoe shop"
diff --git a/src/app/(dashboard)/leaderboard/page.tsx b/src/app/(dashboard)/leaderboard/page.tsx
index 5a01d92..492ec36 100644
--- a/src/app/(dashboard)/leaderboard/page.tsx
+++ b/src/app/(dashboard)/leaderboard/page.tsx
@@ -5,7 +5,6 @@ import { siteConfig } from '@/config/site';
 import Image from 'next/image';
 import { Icons } from '@/components/icons';
 import { cn } from '@/lib/utils';
-import api from '@/lib/polkadot';
 
 type LeaderProps = {
   points: number;
@@ -32,7 +31,6 @@ export function LeaderBoardCard({ points, winner }: LeaderProps) {
   );
 }
 async function ChampionCard() {
-  const addresses = (await api.query.elections.nextEraNonReservedValidators()).toHuman();
   return (
     <>
       <div className="flex justify-between">
diff --git a/src/app/gameplay/page.tsx b/src/app/gameplay/page.tsx
index a02e7a3..32ffc44 100644
--- a/src/app/gameplay/page.tsx
+++ b/src/app/gameplay/page.tsx
@@ -1,7 +1,51 @@
+'use client';
+
 import { Shell } from '@/components/shell';
 import { Button } from '@/components/ui/button';
+import { ApiPromise, WsProvider } from '@polkadot/api';
 import Image from 'next/image';
+import { useState } from 'react';
+import { web3Enable, web3FromAddress } from '@polkadot/extension-dapp';
+import { getApi } from '@/lib/polkadot';
+
 export default function GamePlay() {
+  const address = '5CS5SfC1xCGM9b16ZvqNuWU4VqzV67bmdsHDXe5arDBS3DBA'; // get this from local storage
+  const [guess, setGuess] = useState('');
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const handleGuessChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setGuess(event.target.value);
+  };
+
+  const submitGuess = async () => {
+    if (!guess) return;
+
+    setIsSubmitting(true);
+
+    try {
+      const api = await getApi();
+      const extensions = await web3Enable('RealXChange');
+      const injected = await web3FromAddress(address);
+      const extrinsic = api.tx.system.remark(guess);
+      const signer = injected.signer;
+
+      const unsub = await extrinsic.signAndSend(address, { signer }, result => {
+        if (result.status.isInBlock) {
+          console.log(`Completed at block hash #${result.status.asInBlock.toString()}`);
+        } else if (result.status.isBroadcast) {
+          console.log('Broadcasting the guess...');
+        }
+      });
+
+      console.log('Transaction sent:', unsub);
+
+      setIsSubmitting(false);
+    } catch (error) {
+      console.error('Failed to submit guess:', error);
+      setIsSubmitting(false);
+    }
+  };
+
   return (
     <>
       <Shell className="px-20">
@@ -63,10 +107,15 @@ export default function GamePlay() {
                 </p>
                 <input
                   type="text"
+                  value={guess}
+                  onChange={handleGuessChange}
                   className="mt-4 rounded-md border-[1px] border-[#57A0C5] bg-transparent p-3 placeholder:text-center"
                   placeholder="Enter your guess"
+                  disabled={isSubmitting}
                 />
-                <Button className="mt-4">Guess Now</Button>
+                <Button className="mt-4" onClick={submitGuess} disabled={isSubmitting}>
+                  {isSubmitting ? 'Submitting...' : 'Guess Now'}
+                </Button>
               </div>
               <div className="flex w-1/3  justify-end">
                 <svg
diff --git a/src/lib/polkadot.ts b/src/lib/polkadot.ts
index a6239f2..248fe59 100644
--- a/src/lib/polkadot.ts
+++ b/src/lib/polkadot.ts
@@ -1,7 +1,7 @@
 import { ApiPromise, WsProvider } from '@polkadot/api';
 
-const wsProvider = new WsProvider(process.env.RPC);
-
-const apiPromise = await ApiPromise.create({ provider: wsProvider });
-
-export default apiPromise;
+export async function getApi() {
+  const wsProvider = new WsProvider(process.env.NEXT_PUBLIC_RPC);
+  const api = await ApiPromise.create({ provider: wsProvider });
+  return api;
+}
diff --git a/tsconfig.json b/tsconfig.json
index 1624409..7255686 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es2017",
+    "target": "esnext",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,