diff --git a/connector/src/App.tsx b/connector/src/App.tsx
index 39d770d..905b510 100644
--- a/connector/src/App.tsx
+++ b/connector/src/App.tsx
@@ -1,4 +1,3 @@
-import './App.css'
 import Dapp from './example/Dapp'
 
 function App() {
diff --git a/connector/src/connector/Modal/ConnectButton.tsx b/connector/src/connector/Modal/ConnectButton.tsx
deleted file mode 100644
index e69de29..0000000
diff --git a/connector/src/connector/types/modal.ts b/connector/src/connector/types/modal.ts
index 4ad2942..0135b70 100644
--- a/connector/src/connector/types/modal.ts
+++ b/connector/src/connector/types/modal.ts
@@ -1,22 +1,8 @@
-import type { GetWalletOptions, StarknetWindowObject } from "get-starknet-core"
+import type { StarknetWindowObject } from "get-starknet-core"
 import type { Connector, ConnectorIcons } from "../types/connector"
-// import type { ArgentMobileConnectorOptions } from "../connectors/argentMobile"
-import { ProviderInterface } from "starknet"
 
 export type StoreVersion = "chrome" | "firefox" | "edge"
 
-// export interface ConnectOptions extends GetWalletOptions {
-//   argentMobileOptions?: ArgentMobileConnectorOptions
-//   dappName?: string
-//   connectors?: Connector[]
-//   modalMode?: "alwaysAsk" | "canAsk" | "neverAsk"
-//   modalTheme?: "light" | "dark" | "system"
-//   storeVersion?: StoreVersion | null
-//   webWalletUrl?: string
-//   resultType?: "connector" | "wallet"
-//   provider?: ProviderInterface
-// }
-
 export type ModalWallet = {
   name: string
   id: string
diff --git a/connector/src/connector/windowObject/tokenboundAccount.ts b/connector/src/connector/windowObject/tokenboundAccount.ts
index d744928..e1bace4 100644
--- a/connector/src/connector/windowObject/tokenboundAccount.ts
+++ b/connector/src/connector/windowObject/tokenboundAccount.ts
@@ -6,6 +6,7 @@ import {
     SignerInterface,
     Call,
     CallData,
+    RawArgs
 } from "starknet";
 
 class UnimplementedSigner implements SignerInterface {
@@ -44,14 +45,24 @@ class UnimplementedSigner implements SignerInterface {
     override execute = async (
         calls: Call[]
     ) => {
-        try {
-            let call: Call = {
+        try{
+            const transactions = Array.isArray(calls) ? calls : [calls];
+            
+            const txns = transactions.map((call) => ({
+                contractAddress: call.contractAddress,
+                entrypoint: call.entrypoint,
+                calldata: Array.isArray(call.calldata) && '__compiled__' in call.calldata
+                ? call.calldata
+                : CallData.compile(call.calldata as RawArgs)
+            }))
+
+            let callToBeExecuted: Call = {
                 contractAddress: this.address,
                 entrypoint: '__execute__',
-                calldata: CallData.compile({ calls })
+                calldata: CallData.compile({ txns })
             }
-            console.log(call)
-            return await this.parentAccount.execute(call)
+
+            return await this.parentAccount.execute(callToBeExecuted)
         }
         catch(error) {
             console.log(error);
diff --git a/connector/src/example/Dapp.css b/connector/src/example/Dapp.css
index 1fad1b1..cd2d0ee 100644
--- a/connector/src/example/Dapp.css
+++ b/connector/src/example/Dapp.css
@@ -1,3 +1,10 @@
+#root {
+    max-width: 1280px;
+    margin: 0 auto;
+    padding: 2rem;
+    text-align: center;
+}
+
 .App {
     text-align: center;
   }
@@ -28,7 +35,7 @@
   }
 
   .button {
-    background-color: white;
+    background-color: white !important;
     color: black;
     margin: 20px;
     border-radius: 5px;
@@ -36,6 +43,10 @@
     font-size: 20px;
     cursor: pointer;
   }
+
+  .card {
+    margin-top: 30px;
+  }
   
   @keyframes App-logo-spin {
     from {
diff --git a/connector/src/example/Dapp.tsx b/connector/src/example/Dapp.tsx
index 4e7e5a5..dcde5bb 100644
--- a/connector/src/example/Dapp.tsx
+++ b/connector/src/example/Dapp.tsx
@@ -4,7 +4,7 @@ import { TokenboundConnector } from '../connector'
 import { Contract, RpcProvider } from 'starknet'
 import { ConnectedStarknetWindowObject } from 'get-starknet-core'
 
-import contractAbi from './abis/abi.json'
+import { ABI } from './abis/abi';
 const contractAddress = "0x077e0925380d1529772ee99caefa8cd7a7017a823ec3db7c003e56ad2e85e300"
 
 function Dapp() {
@@ -37,7 +37,7 @@ function Dapp() {
 
   const increaseCounter = async() => {
     try {
-      const contract = new Contract(contractAbi, contractAddress, account)
+      const contract = new Contract(ABI, contractAddress, account).typedv2(ABI)
       await contract.increment()
       alert("you successfully increased the counter")
     }
@@ -48,7 +48,7 @@ function Dapp() {
 
   const decreaseCounter = async() => {
     try {
-      const contract = new Contract(contractAbi, contractAddress, account)
+      const contract = new Contract(ABI, contractAddress, account).typedv2(ABI)
       await contract.decrement()
       alert("you sucessfully decreased the counter")
     }
@@ -60,7 +60,7 @@ function Dapp() {
   const getCounter = async() => {
     const provider = new RpcProvider({ nodeUrl: "https://starknet-mainnet.public.blastapi.io" })
     try {
-      const contract = new Contract(contractAbi, contractAddress, provider)
+      const contract = new Contract(ABI, contractAddress, provider).typedv2(ABI)
       const counter = await contract.get_current_count()
       setRetrievedValue(counter.toString())
     }
diff --git a/connector/src/example/abis/abi.json b/connector/src/example/abis/abi.ts
similarity index 96%
rename from connector/src/example/abis/abi.json
rename to connector/src/example/abis/abi.ts
index bdc4dd1..9cf1939 100644
--- a/connector/src/example/abis/abi.json
+++ b/connector/src/example/abis/abi.ts
@@ -1,4 +1,4 @@
-[
+export const ABI = [
     {
       "name": "core::integer::u256",
       "type": "struct",
@@ -44,4 +44,4 @@
       "type": "event",
       "variants": []
     }
-  ]
\ No newline at end of file
+  ] as const
\ No newline at end of file
diff --git a/sdk/examples/sdk-starknetjs-starknetkit-starknet-react/src/components/Home.tsx b/sdk/examples/sdk-starknetjs-starknetkit-starknet-react/src/components/Home.tsx
index 63d5d91..60aad42 100644
--- a/sdk/examples/sdk-starknetjs-starknetkit-starknet-react/src/components/Home.tsx
+++ b/sdk/examples/sdk-starknetjs-starknetkit-starknet-react/src/components/Home.tsx
@@ -15,7 +15,7 @@ function Home() {
   const { account } = useAccount()
 
   const registryAddress: string = "0x1b0ef7a47d9db8652f8a9010ecaf3e6537442bfab3afed13449b571fa1da37a"
-  const implementationAddress: string = "0x011bc9fabead984d714cf82ec46ffa23f4558f27ae73561542fed9fa8fb510ae"
+  const implementationAddress: string = "0x499ef439944ff0a477c4ecc14785ad31f4c12300993e1ce6568f9c1f2c24c09"
 
   const options = {
     account: account,
@@ -30,8 +30,8 @@ function Home() {
   }
 
   // replace with a sample NFT your account owns on mainnet
-  const tokenContract = "0x042e7815d9e90b7ea53f4550f74dc12207ed6a0faaef57ba0dbf9a66f3762d82"
-  const tokenId = "5866077281322167718"
+  const tokenContract = "0x42e7815d9e90b7ea53f4550f74dc12207ed6a0faaef57ba0dbf9a66f3762d82"
+  const tokenId = "2030367002182993916"
 
   // url to starkscan
   const url = `https://starkscan.co/contract/${tbaAccount}`
@@ -41,8 +41,7 @@ function Home() {
     try {
       await tokenbound.createAccount({
         tokenContract: tokenContract,
-        tokenId: tokenId,
-        salt: "3000000000"
+        tokenId: tokenId
       })
     }
     catch (error) {
@@ -75,7 +74,6 @@ function Home() {
     const account = await tokenbound.getAccount({
       tokenContract: tokenContract,
       tokenId: tokenId,
-      salt: "3000000000"
     })
     setTBAAccount(num.toHex(account))
   }
@@ -85,7 +83,6 @@ function Home() {
     const status = await tokenbound.checkAccountDeployment({
       tokenContract,
       tokenId,
-      salt: "3000000000"
     })
     setDeployStatus(status?.deployed)
     setAccountClassHash(status?.classHash)