diff --git a/.github/workflows/main.yaml b/.github/workflows/main.yaml
index a731918..0144959 100644
--- a/.github/workflows/main.yaml
+++ b/.github/workflows/main.yaml
@@ -1,5 +1,5 @@
-on:
-  push:
-    branch: ["main", "dev"]
+# on:
+#   push:
+#     branch: ["main", "dev"]
 
-jobs:
\ No newline at end of file
+# jobs:    
\ No newline at end of file
diff --git a/.prettierrc b/.prettierrc
index 4216862..354270e 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,10 +1,10 @@
 {
-  "semi": true,
-  "singleQuote": false,
-  "trailingComma": "none",
-  "arrowParens": "always",
-  "tabWidth": 4,
-  "useTabs": true,
-  "bracketSpacing": true,
-  "bracketSameLine": false
-}
\ No newline at end of file
+	"semi": true,
+	"singleQuote": false,
+	"trailingComma": "none",
+	"arrowParens": "always",
+	"tabWidth": 2,
+	"useTabs": true,
+	"bracketSpacing": true,
+	"bracketSameLine": false
+}
diff --git a/frontend/app/chess/page.tsx b/frontend/app/chess/page.tsx
new file mode 100644
index 0000000..84a7d52
--- /dev/null
+++ b/frontend/app/chess/page.tsx
@@ -0,0 +1,7 @@
+import Chess from "@/components/chess";
+
+export default function ChessPage() {
+    return (
+        <Chess/>
+    )
+}
\ No newline at end of file
diff --git a/frontend/components/chess/index.tsx b/frontend/components/chess/index.tsx
new file mode 100644
index 0000000..dd1a6ce
--- /dev/null
+++ b/frontend/components/chess/index.tsx
@@ -0,0 +1,102 @@
+"use client";
+
+import { initializeBoard, pieceSymbols } from "@/lib/utils";
+import { useState } from "react";
+
+export default function Chess() {
+
+    const [board] = useState(initializeBoard());
+    const [selectedSquare, setSelectedSquare] = useState<Array<number>| null>(null);
+
+    const handleSquareClick = (row:number, col:number) => {
+        const piece = board[row][col];
+
+        if (selectedSquare) {
+            const [fromRow, fromCol] = selectedSquare;
+            handleMakeMove(fromRow, fromCol, row, col);
+
+            setSelectedSquare(null);
+        } else {
+            if (piece) {
+                setSelectedSquare([row, col]);
+            }
+        }
+    };
+
+    const handleMakeMove = (fromRow: number, fromCol: number, toRow: number, toCol: number) => {
+        console.log(`Move from [${fromRow}, ${fromCol}] to [${toRow}, ${toCol}]`);
+    };
+
+    const handleReset = () => {
+        console.log('Reset board');
+    };
+
+
+    return (
+        <div className="min-h-screen flex items-center justify-center p-4 sm:p-6 md:p-8">
+            <div className="w-full max-w-3xl">
+                <div className="text-center mb-6 sm:mb-8 bg-blue-300 rounded p-2">
+                    <h1 className="text-3xl sm:text-4xl md:text-5xl font-bold text-white mb-2 ribeye">                                                                                                                          
+                        Chess Board
+                    </h1>
+                </div>
+
+                <div className="aspect-square bg-blue-50 p-3 sm:p-4 md:p-6 rounded-lg shadow-2xl">
+                    <div className="w-full h-full grid grid-cols-8 gap-0 bg-white rounded-sm overflow-hidden shadow-inner">
+                        {board.map((row, rowIndex) =>
+                            row.map((piece, colIndex) => {
+                                const isLight = (rowIndex + colIndex) % 2 === 0;
+                                const fileLabel = String.fromCharCode(97 + colIndex);
+                                const rankLabel = 8 - rowIndex;
+                                const showFileLabel = rowIndex === 7;
+                                const showRankLabel = colIndex === 0;
+                                const isSelected = selectedSquare && selectedSquare[0] === rowIndex && selectedSquare[1] === colIndex;
+
+                                return (
+                                    <button
+                                        key={`${rowIndex}-${colIndex}`}
+                                        onClick={() => handleSquareClick(rowIndex, colIndex)}
+                                        className={`relative aspect-square flex flex-col items-center justify-center transition-all duration-150 cursor-pointer hover:opacity-90 ${isLight
+                                            ? 'bg-blue-200'
+                                            : 'bg-blue-500'
+                                            } ${isSelected ? 'ring-4 ring-yellow-300 ring-inset' : ''}`}
+                                    >
+                                        {piece && (
+                                            <div className={`text-4xl sm:text-5xl md:text-6xl lg:text-7xl leading-none drop-shadow-lg ${piece.color === 'white'
+                                                ? 'text-white'
+                                                : 'text-black'
+                                                }`}>
+                                                {pieceSymbols[piece.color][piece.type]}
+                                            </div>
+                                        )}
+
+                                        {showFileLabel && (
+                                            <div className="absolute bottom-1 sm:bottom-1.5 right-1 sm:right-1.5 text-[10px] sm:text-xs font-bold text-blue-900 opacity-70">
+                                                {fileLabel}
+                                            </div>
+                                        )}
+
+                                        {showRankLabel && (
+                                            <div className="absolute top-1 sm:top-1.5 left-1 sm:left-1.5 text-[10px] sm:text-xs font-bold text-blue-900 opacity-70">
+                                                {rankLabel}
+                                            </div>
+                                        )}
+                                    </button>
+                                );
+                            })
+                        )}
+                    </div>
+                </div>
+
+                <div className="mt-6 sm:mt-8 flex justify-center gap-4">
+                    <button
+                        onClick={handleReset}
+                        className="px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg transition-colors duration-200"
+                    >
+                        Reset
+                    </button>
+                </div>
+            </div>
+        </div>
+    )
+}
diff --git a/frontend/components/ui/select.tsx b/frontend/components/ui/select.tsx
new file mode 100644
index 0000000..88302a8
--- /dev/null
+++ b/frontend/components/ui/select.tsx
@@ -0,0 +1,190 @@
+"use client"
+
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Select({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />
+}
+
+function SelectGroup({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />
+}
+
+function SelectValue({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />
+}
+
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon className="size-4 opacity-50" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  )
+}
+
+function SelectContent({
+  className,
+  children,
+  position = "item-aligned",
+  align = "center",
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
+          position === "popper" &&
+            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+          className
+        )}
+        position={position}
+        align={align}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          className={cn(
+            "p-1",
+            position === "popper" &&
+              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  )
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      )}
+      {...props}
+    >
+      <span
+        data-slot="select-item-indicator"
+        className="absolute right-2 flex size-3.5 items-center justify-center"
+      >
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  )
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronUpIcon className="size-4" />
+    </SelectPrimitive.ScrollUpButton>
+  )
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronDownIcon className="size-4" />
+    </SelectPrimitive.ScrollDownButton>
+  )
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+}
diff --git a/frontend/lib/Abi.ts b/frontend/lib/Abi.ts
new file mode 100644
index 0000000..50f1476
--- /dev/null
+++ b/frontend/lib/Abi.ts
@@ -0,0 +1,901 @@
+export const PONG_ABI = [
+    {
+        "inputs": [],
+        "stateMutability": "nonpayable",
+        "type": "constructor"
+    },
+    {
+        "inputs": [],
+        "name": "CannotJoinOwnGame",
+        "type": "error"
+    },
+    {
+        "inputs": [],
+        "name": "GameExpired",
+        "type": "error"
+    },
+    {
+        "inputs": [],
+        "name": "GameNotFound",
+        "type": "error"
+    },
+    {
+        "inputs": [],
+        "name": "GameplayPaused",
+        "type": "error"
+    },
+    {
+        "inputs": [],
+        "name": "InsufficientBalance",
+        "type": "error"
+    },
+    {
+        "inputs": [],
+        "name": "InsufficientPowerups",
+        "type": "error"
+    },
+    {
+        "inputs": [],
+        "name": "InvalidAmount",
+        "type": "error"
+    },
+    {
+        "inputs": [],
+        "name": "InvalidPowerupType",
+        "type": "error"
+    },
+    {
+        "inputs": [],
+        "name": "InvalidStatus",
+        "type": "error"
+    },
+    {
+        "inputs": [],
+        "name": "InvalidStatusTransition",
+        "type": "error"
+    },
+    {
+        "inputs": [],
+        "name": "InvalidWinner",
+        "type": "error"
+    },
+    {
+        "inputs": [],
+        "name": "NotGameParticipant",
+        "type": "error"
+    },
+    {
+        "inputs": [
+            {
+                "internalType": "address",
+                "name": "owner",
+                "type": "address"
+            }
+        ],
+        "name": "OwnableInvalidOwner",
+        "type": "error"
+    },
+    {
+        "inputs": [
+            {
+                "internalType": "address",
+                "name": "account",
+                "type": "address"
+            }
+        ],
+        "name": "OwnableUnauthorizedAccount",
+        "type": "error"
+    },
+    {
+        "inputs": [],
+        "name": "Player2NotJoined",
+        "type": "error"
+    },
+    {
+        "inputs": [],
+        "name": "Player2SlotNotEmpty",
+        "type": "error"
+    },
+    {
+        "inputs": [],
+        "name": "PlayerGamesLimitExceeded",
+        "type": "error"
+    },
+    {
+        "inputs": [],
+        "name": "ReentrancyGuardReentrantCall",
+        "type": "error"
+    },
+    {
+        "inputs": [],
+        "name": "TransferFailed",
+        "type": "error"
+    },
+    {
+        "inputs": [],
+        "name": "Unauthorized",
+        "type": "error"
+    },
+    {
+        "anonymous": false,
+        "inputs": [
+            {
+                "indexed": true,
+                "internalType": "address",
+                "name": "recipient",
+                "type": "address"
+            },
+            {
+                "indexed": false,
+                "internalType": "uint256",
+                "name": "amount",
+                "type": "uint256"
+            },
+            {
+                "indexed": false,
+                "internalType": "uint64",
+                "name": "timestamp",
+                "type": "uint64"
+            }
+        ],
+        "name": "FeeWithdrawn",
+        "type": "event"
+    },
+    {
+        "anonymous": false,
+        "inputs": [
+            {
+                "indexed": true,
+                "internalType": "uint64",
+                "name": "gameId",
+                "type": "uint64"
+            },
+            {
+                "indexed": true,
+                "internalType": "address",
+                "name": "player1",
+                "type": "address"
+            },
+            {
+                "indexed": false,
+                "internalType": "uint256",
+                "name": "stakeAmount",
+                "type": "uint256"
+            },
+            {
+                "indexed": false,
+                "internalType": "uint64",
+                "name": "createdAt",
+                "type": "uint64"
+            },
+            {
+                "indexed": false,
+                "internalType": "uint8",
+                "name": "status",
+                "type": "uint8"
+            }
+        ],
+        "name": "GameCreated",
+        "type": "event"
+    },
+    {
+        "anonymous": false,
+        "inputs": [
+            {
+                "indexed": true,
+                "internalType": "uint64",
+                "name": "gameId",
+                "type": "uint64"
+            },
+            {
+                "indexed": true,
+                "internalType": "address",
+                "name": "winner",
+                "type": "address"
+            },
+            {
+                "indexed": true,
+                "internalType": "address",
+                "name": "loser",
+                "type": "address"
+            },
+            {
+                "indexed": false,
+                "internalType": "uint256",
+                "name": "winnerAmount",
+                "type": "uint256"
+            },
+            {
+                "indexed": false,
+                "internalType": "uint256",
+                "name": "devFeeAmount",
+                "type": "uint256"
+            },
+            {
+                "indexed": false,
+                "internalType": "uint64",
+                "name": "completedAt",
+                "type": "uint64"
+            }
+        ],
+        "name": "GameEnded",
+        "type": "event"
+    },
+    {
+        "anonymous": false,
+        "inputs": [
+            {
+                "indexed": true,
+                "internalType": "uint64",
+                "name": "gameId",
+                "type": "uint64"
+            },
+            {
+                "indexed": true,
+                "internalType": "address",
+                "name": "player2",
+                "type": "address"
+            },
+            {
+                "indexed": false,
+                "internalType": "uint256",
+                "name": "stakeAmount",
+                "type": "uint256"
+            },
+            {
+                "indexed": false,
+                "internalType": "uint64",
+                "name": "timestamp",
+                "type": "uint64"
+            }
+        ],
+        "name": "GameJoined",
+        "type": "event"
+    },
+    {
+        "anonymous": false,
+        "inputs": [
+            {
+                "indexed": true,
+                "internalType": "address",
+                "name": "previousOwner",
+                "type": "address"
+            },
+            {
+                "indexed": true,
+                "internalType": "address",
+                "name": "newOwner",
+                "type": "address"
+            }
+        ],
+        "name": "OwnershipTransferred",
+        "type": "event"
+    },
+    {
+        "anonymous": false,
+        "inputs": [
+            {
+                "indexed": true,
+                "internalType": "address",
+                "name": "recipient",
+                "type": "address"
+            },
+            {
+                "indexed": false,
+                "internalType": "uint8",
+                "name": "powerupType",
+                "type": "uint8"
+            },
+            {
+                "indexed": false,
+                "internalType": "uint64",
+                "name": "countGranted",
+                "type": "uint64"
+            },
+            {
+                "indexed": false,
+                "internalType": "uint64",
+                "name": "totalCount",
+                "type": "uint64"
+            },
+            {
+                "indexed": false,
+                "internalType": "uint64",
+                "name": "timestamp",
+                "type": "uint64"
+            }
+        ],
+        "name": "PowerupGranted",
+        "type": "event"
+    },
+    {
+        "anonymous": false,
+        "inputs": [
+            {
+                "indexed": true,
+                "internalType": "uint64",
+                "name": "gameId",
+                "type": "uint64"
+            },
+            {
+                "indexed": true,
+                "internalType": "address",
+                "name": "player",
+                "type": "address"
+            },
+            {
+                "indexed": false,
+                "internalType": "uint8",
+                "name": "powerupType",
+                "type": "uint8"
+            },
+            {
+                "indexed": false,
+                "internalType": "uint64",
+                "name": "timestamp",
+                "type": "uint64"
+            }
+        ],
+        "name": "PowerupUsed",
+        "type": "event"
+    },
+    {
+        "anonymous": false,
+        "inputs": [
+            {
+                "indexed": true,
+                "internalType": "uint64",
+                "name": "gameId",
+                "type": "uint64"
+            },
+            {
+                "indexed": true,
+                "internalType": "address",
+                "name": "player",
+                "type": "address"
+            },
+            {
+                "indexed": false,
+                "internalType": "uint256",
+                "name": "amount",
+                "type": "uint256"
+            },
+            {
+                "indexed": false,
+                "internalType": "uint64",
+                "name": "timestamp",
+                "type": "uint64"
+            }
+        ],
+        "name": "RefundClaimed",
+        "type": "event"
+    },
+    {
+        "anonymous": false,
+        "inputs": [
+            {
+                "indexed": true,
+                "internalType": "uint64",
+                "name": "gameId",
+                "type": "uint64"
+            },
+            {
+                "indexed": true,
+                "internalType": "address",
+                "name": "player",
+                "type": "address"
+            },
+            {
+                "indexed": false,
+                "internalType": "uint256",
+                "name": "amount",
+                "type": "uint256"
+            },
+            {
+                "indexed": false,
+                "internalType": "uint64",
+                "name": "timestamp",
+                "type": "uint64"
+            }
+        ],
+        "name": "TimeoutRefund",
+        "type": "event"
+    },
+    {
+        "anonymous": false,
+        "inputs": [
+            {
+                "indexed": false,
+                "internalType": "bool",
+                "name": "paused",
+                "type": "bool"
+            },
+            {
+                "indexed": true,
+                "internalType": "address",
+                "name": "toggledBy",
+                "type": "address"
+            },
+            {
+                "indexed": false,
+                "internalType": "uint64",
+                "name": "timestamp",
+                "type": "uint64"
+            }
+        ],
+        "name": "VaultPauseToggled",
+        "type": "event"
+    },
+    {
+        "inputs": [
+            {
+                "internalType": "uint64",
+                "name": "gameId",
+                "type": "uint64"
+            }
+        ],
+        "name": "claimTimeoutRefund",
+        "outputs": [],
+        "stateMutability": "nonpayable",
+        "type": "function"
+    },
+    {
+        "inputs": [],
+        "name": "createGame",
+        "outputs": [],
+        "stateMutability": "payable",
+        "type": "function"
+    },
+    {
+        "inputs": [],
+        "name": "devFeeVault",
+        "outputs": [
+            {
+                "internalType": "uint256",
+                "name": "",
+                "type": "uint256"
+            }
+        ],
+        "stateMutability": "view",
+        "type": "function"
+    },
+    {
+        "inputs": [
+            {
+                "internalType": "uint64",
+                "name": "gameId",
+                "type": "uint64"
+            },
+            {
+                "internalType": "address",
+                "name": "winner",
+                "type": "address"
+            }
+        ],
+        "name": "endGame",
+        "outputs": [],
+        "stateMutability": "nonpayable",
+        "type": "function"
+    },
+    {
+        "inputs": [
+            {
+                "internalType": "address",
+                "name": "player",
+                "type": "address"
+            }
+        ],
+        "name": "getAllPowerups",
+        "outputs": [
+            {
+                "internalType": "uint64",
+                "name": "padStretch",
+                "type": "uint64"
+            },
+            {
+                "internalType": "uint64",
+                "name": "multiball",
+                "type": "uint64"
+            },
+            {
+                "internalType": "uint64",
+                "name": "shield",
+                "type": "uint64"
+            }
+        ],
+        "stateMutability": "view",
+        "type": "function"
+    },
+    {
+        "inputs": [],
+        "name": "getDevFees",
+        "outputs": [
+            {
+                "internalType": "uint256",
+                "name": "",
+                "type": "uint256"
+            }
+        ],
+        "stateMutability": "view",
+        "type": "function"
+    },
+    {
+        "inputs": [
+            {
+                "internalType": "uint64",
+                "name": "gameId",
+                "type": "uint64"
+            }
+        ],
+        "name": "getGame",
+        "outputs": [
+            {
+                "components": [
+                    {
+                        "internalType": "uint64",
+                        "name": "gameId",
+                        "type": "uint64"
+                    },
+                    {
+                        "internalType": "address",
+                        "name": "player1",
+                        "type": "address"
+                    },
+                    {
+                        "internalType": "address",
+                        "name": "player2",
+                        "type": "address"
+                    },
+                    {
+                        "internalType": "uint256",
+                        "name": "stakeAmount",
+                        "type": "uint256"
+                    },
+                    {
+                        "internalType": "uint256",
+                        "name": "escrowBalance",
+                        "type": "uint256"
+                    },
+                    {
+                        "internalType": "uint8",
+                        "name": "status",
+                        "type": "uint8"
+                    },
+                    {
+                        "internalType": "address",
+                        "name": "winner",
+                        "type": "address"
+                    },
+                    {
+                        "internalType": "uint64",
+                        "name": "createdAt",
+                        "type": "uint64"
+                    },
+                    {
+                        "internalType": "uint64",
+                        "name": "completedAt",
+                        "type": "uint64"
+                    }
+                ],
+                "internalType": "struct PingPong.GameSession",
+                "name": "",
+                "type": "tuple"
+            }
+        ],
+        "stateMutability": "view",
+        "type": "function"
+    },
+    {
+        "inputs": [
+            {
+                "internalType": "uint64",
+                "name": "gameId",
+                "type": "uint64"
+            }
+        ],
+        "name": "getGameEscrow",
+        "outputs": [
+            {
+                "internalType": "uint256",
+                "name": "",
+                "type": "uint256"
+            }
+        ],
+        "stateMutability": "view",
+        "type": "function"
+    },
+    {
+        "inputs": [
+            {
+                "internalType": "uint64",
+                "name": "gameId",
+                "type": "uint64"
+            }
+        ],
+        "name": "getGameStatus",
+        "outputs": [
+            {
+                "internalType": "uint8",
+                "name": "",
+                "type": "uint8"
+            }
+        ],
+        "stateMutability": "view",
+        "type": "function"
+    },
+    {
+        "inputs": [
+            {
+                "internalType": "address",
+                "name": "player",
+                "type": "address"
+            }
+        ],
+        "name": "getPlayerGameCount",
+        "outputs": [
+            {
+                "internalType": "uint256",
+                "name": "",
+                "type": "uint256"
+            }
+        ],
+        "stateMutability": "view",
+        "type": "function"
+    },
+    {
+        "inputs": [
+            {
+                "internalType": "address",
+                "name": "player",
+                "type": "address"
+            }
+        ],
+        "name": "getPlayerGames",
+        "outputs": [
+            {
+                "internalType": "uint64[]",
+                "name": "",
+                "type": "uint64[]"
+            }
+        ],
+        "stateMutability": "view",
+        "type": "function"
+    },
+    {
+        "inputs": [
+            {
+                "internalType": "address",
+                "name": "player",
+                "type": "address"
+            },
+            {
+                "internalType": "uint8",
+                "name": "powerupType",
+                "type": "uint8"
+            }
+        ],
+        "name": "getPowerupCount",
+        "outputs": [
+            {
+                "internalType": "uint64",
+                "name": "",
+                "type": "uint64"
+            }
+        ],
+        "stateMutability": "view",
+        "type": "function"
+    },
+    {
+        "inputs": [],
+        "name": "getTotalGames",
+        "outputs": [
+            {
+                "internalType": "uint64",
+                "name": "",
+                "type": "uint64"
+            }
+        ],
+        "stateMutability": "view",
+        "type": "function"
+    },
+    {
+        "inputs": [
+            {
+                "internalType": "address",
+                "name": "recipient",
+                "type": "address"
+            },
+            {
+                "internalType": "uint8",
+                "name": "powerupType",
+                "type": "uint8"
+            }
+        ],
+        "name": "grantPowerup",
+        "outputs": [],
+        "stateMutability": "nonpayable",
+        "type": "function"
+    },
+    {
+        "inputs": [
+            {
+                "internalType": "address",
+                "name": "",
+                "type": "address"
+            }
+        ],
+        "name": "inventories",
+        "outputs": [
+            {
+                "internalType": "uint64",
+                "name": "padStretchCount",
+                "type": "uint64"
+            },
+            {
+                "internalType": "uint64",
+                "name": "multiballCount",
+                "type": "uint64"
+            },
+            {
+                "internalType": "uint64",
+                "name": "shieldCount",
+                "type": "uint64"
+            }
+        ],
+        "stateMutability": "view",
+        "type": "function"
+    },
+    {
+        "inputs": [
+            {
+                "internalType": "uint64",
+                "name": "gameId",
+                "type": "uint64"
+            }
+        ],
+        "name": "isGameExists",
+        "outputs": [
+            {
+                "internalType": "bool",
+                "name": "",
+                "type": "bool"
+            }
+        ],
+        "stateMutability": "view",
+        "type": "function"
+    },
+    {
+        "inputs": [],
+        "name": "isVaultPaused",
+        "outputs": [
+            {
+                "internalType": "bool",
+                "name": "",
+                "type": "bool"
+            }
+        ],
+        "stateMutability": "view",
+        "type": "function"
+    },
+    {
+        "inputs": [
+            {
+                "internalType": "uint64",
+                "name": "gameId",
+                "type": "uint64"
+            }
+        ],
+        "name": "joinGame",
+        "outputs": [],
+        "stateMutability": "payable",
+        "type": "function"
+    },
+    {
+        "inputs": [],
+        "name": "owner",
+        "outputs": [
+            {
+                "internalType": "address",
+                "name": "",
+                "type": "address"
+            }
+        ],
+        "stateMutability": "view",
+        "type": "function"
+    },
+    {
+        "inputs": [],
+        "name": "paused",
+        "outputs": [
+            {
+                "internalType": "bool",
+                "name": "",
+                "type": "bool"
+            }
+        ],
+        "stateMutability": "view",
+        "type": "function"
+    },
+    {
+        "inputs": [],
+        "name": "renounceOwnership",
+        "outputs": [],
+        "stateMutability": "nonpayable",
+        "type": "function"
+    },
+    {
+        "inputs": [
+            {
+                "internalType": "uint64",
+                "name": "gameId",
+                "type": "uint64"
+            }
+        ],
+        "name": "requestRefund",
+        "outputs": [],
+        "stateMutability": "nonpayable",
+        "type": "function"
+    },
+    {
+        "inputs": [],
+        "name": "togglePause",
+        "outputs": [],
+        "stateMutability": "nonpayable",
+        "type": "function"
+    },
+    {
+        "inputs": [],
+        "name": "totalGames",
+        "outputs": [
+            {
+                "internalType": "uint64",
+                "name": "",
+                "type": "uint64"
+            }
+        ],
+        "stateMutability": "view",
+        "type": "function"
+    },
+    {
+        "inputs": [
+            {
+                "internalType": "address",
+                "name": "newOwner",
+                "type": "address"
+            }
+        ],
+        "name": "transferOwnership",
+        "outputs": [],
+        "stateMutability": "nonpayable",
+        "type": "function"
+    },
+    {
+        "inputs": [
+            {
+                "internalType": "uint64",
+                "name": "gameId",
+                "type": "uint64"
+            },
+            {
+                "internalType": "uint8",
+                "name": "powerupType",
+                "type": "uint8"
+            }
+        ],
+        "name": "usePowerup",
+        "outputs": [],
+        "stateMutability": "nonpayable",
+        "type": "function"
+    },
+    {
+        "inputs": [],
+        "name": "withdrawDevFees",
+        "outputs": [],
+        "stateMutability": "nonpayable",
+        "type": "function"
+    },
+    {
+        "stateMutability": "payable",
+        "type": "receive"
+    }
+] as const;
diff --git a/frontend/lib/hooks/useConnect.ts b/frontend/lib/hooks/useConnect.ts
new file mode 100644
index 0000000..3d97558
--- /dev/null
+++ b/frontend/lib/hooks/useConnect.ts
@@ -0,0 +1,11 @@
+import { Hex } from "viem"
+
+export default function useConnect() { 
+    const connectFreeGame = (address: Hex) => {
+        
+        console.log(address)
+     }
+    return {
+        connectFreeGame
+    }
+}
\ No newline at end of file
diff --git a/frontend/lib/utils.ts b/frontend/lib/utils.ts
index aff5dc8..297ec29 100644
--- a/frontend/lib/utils.ts
+++ b/frontend/lib/utils.ts
@@ -1,27 +1,65 @@
-import { clsx, type ClassValue } from "clsx"
-import { twMerge } from "tailwind-merge"
-import { cookieStorage, createStorage } from '@wagmi/core'
-import { WagmiAdapter } from '@reown/appkit-adapter-wagmi'
-import { baseSepolia, base } from '@reown/appkit/networks'
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+import { cookieStorage, createStorage } from "@wagmi/core";
+import { WagmiAdapter } from "@reown/appkit-adapter-wagmi";
+import { baseSepolia, base } from "@reown/appkit/networks";
 
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
+	return twMerge(clsx(inputs));
 }
 
-// export const config = getDefaultConfig({
-//   appName: 'My RainbowKit App',
-//   projectId: 'YOUR_PROJECT_ID',
-//   chains: [base, baseSepolia],
-//   ssr:true
-// })
-
 export const wagmiAdapter = new WagmiAdapter({
-  storage: createStorage({
-    storage: cookieStorage
-  }),
-  ssr: true,
-  projectId: "project id",
-  networks: [base, baseSepolia]
-})
+	storage: createStorage({
+		storage: cookieStorage
+	}),
+	ssr: true,
+	projectId: process.env.NEXT_PUBLIC_PROJECT_ID!,
+	networks: [base, baseSepolia]
+});
+
+export const config = wagmiAdapter.wagmiConfig;
+export const pieceSymbols = {
+	white: {
+		king: "♔",
+		queen: "♕",
+		rook: "♖",
+		bishop: "♗",
+		knight: "♘",
+		pawn: "♙"
+	},
+	black: {
+		king: "♚",
+		queen: "♛",
+		rook: "♜",
+		bishop: "♝",
+		knight: "♞",
+		pawn: "♟"
+	}
+};
+export const initializeBoard = () => {
+  const board: {type: string, color:string}[][] = Array(8)
+		.fill(null)
+		.map(() => Array(8).fill(null));
+
+	for (let i = 0; i < 8; i++) {
+		board[1][i] = { type: "pawn", color: "black" };
+		board[6][i] = { type: "pawn", color: "white" };
+	}
+
+	const setup = [
+		"rook",
+		"knight",
+		"bishop",
+		"queen",
+		"king",
+		"bishop",
+		"knight",
+		"rook"
+	];
+	for (let i = 0; i < 8; i++) {
+		board[0][i] = { type: setup[i], color: "black" };
+		board[7][i] = { type: setup[i], color: "white" };
+	}
 
-export const config = wagmiAdapter.wagmiConfig
\ No newline at end of file
+	return board;
+};
diff --git a/frontend/pages/pongPage.tsx b/frontend/pages/pongPage.tsx
index f1412b8..362a0bb 100644
--- a/frontend/pages/pongPage.tsx
+++ b/frontend/pages/pongPage.tsx
@@ -2,21 +2,34 @@ import Navbar from "@/components/commons/navbar";
 import BoostPack from "@/components/pong/boostPack";
 import BottomCard from "@/components/pong/Bottomcard";
 import { motion } from "framer-motion";
+import useConnect from "@/lib/hooks/useConnect";
+import { useAppKitAccount } from "@reown/appkit/react";
+import { Hex } from "viem";
+import { toast } from "sonner";
 
-
-    
 export default function PongPage() {
-      const games = [
-          { texts: "Quick Match", gameType: "Free", action: () => { } },
-          { texts: "Create / Join", gameType: "Free", action: () => {} },
-          { texts: "Friendly Stake", gameType: "Stake", action: () => {} },
-        { texts: "Compete", gameType: "Stake", action: ()=> {} }
+    const { connectFreeGame } = useConnect();
+    const { address } = useAppKitAccount()
+
+    const games = [
+        {
+            texts: "Quick Match", gameType: "Free", action: function () {
+                if (!address) {
+                    toast.error("Plese connect our wallet")
+                    return;
+                }
+                connectFreeGame(address as Hex)
+            }
+        },
+        { texts: "Create / Join", gameType: "Free", action: () => { } },
+        { texts: "Friendly Stake", gameType: "Stake", action: () => { } },
+        { texts: "Compete", gameType: "Stake", action: () => { } }
     ];
 
     return (
         <main className="w-full">
             <Navbar />
-             <div className='pong_hero'>
+            <div className='pong_hero'>
                 <section>
                     {games.map((game, idx) => (
                         <motion.article key={idx}
@@ -25,7 +38,7 @@ export default function PongPage() {
                             whileHover={{ scale: [1.1, 1.3, 1.1] }}
                             onClick={game.action}
                         >
-                            <h6 className="text-gradient">{game.texts} <br/> ({game.gameType})</h6>
+                            <h6 className="text-gradient">{game.texts} <br /> ({game.gameType})</h6>
                         </motion.article>
                     ))}
                 </section>
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index 3a13f90..6b4686a 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -1,34 +1,34 @@
 {
-  "compilerOptions": {
-    "target": "ES2017",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "strict": true,
-    "noEmit": true,
-    "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "bundler",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "react-jsx",
-    "incremental": true,
-    "plugins": [
-      {
-        "name": "next"
-      }
-    ],
-    "paths": {
-      "@/*": ["./*"]
-    }
-  },
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx",
-    ".next/types/**/*.ts",
-    ".next/dev/types/**/*.ts",
-    "**/*.mts"
-  ],
-  "exclude": ["node_modules"]
+	"compilerOptions": {
+		"target": "ES2017",
+		"lib": ["dom", "dom.iterable", "esnext"],
+		"allowJs": true,
+		"skipLibCheck": true,
+		"strict": true,
+		"noEmit": true,
+		"esModuleInterop": true,
+		"module": "esnext",
+		"moduleResolution": "bundler",
+		"resolveJsonModule": true,
+		"isolatedModules": true,
+		"jsx": "react-jsx",
+		"incremental": true,
+		"plugins": [
+			{
+				"name": "next"
+			}
+		],
+		"paths": {
+			"@/*": ["./*"]
+		}
+	},
+	"include": [
+		"next-env.d.ts",
+		"**/*.ts",
+		"**/*.tsx",
+		".next/types/**/*.ts",
+		".next/dev/types/**/*.ts",
+		"**/*.mts"
+	],
+	"exclude": ["node_modules"]
 }