diff --git a/app/abis/strk-abi.ts b/app/abis/strk-abi.ts
new file mode 100644
index 0000000..91871d2
--- /dev/null
+++ b/app/abis/strk-abi.ts
@@ -0,0 +1,1122 @@
+export const STRK_TOKEN_ABI = [
+    {
+      "name": "LockingContract",
+      "type": "impl",
+      "interface_name": "src::mintable_lock_interface::ILockingContract"
+    },
+    {
+      "name": "src::mintable_lock_interface::ILockingContract",
+      "type": "interface",
+      "items": [
+        {
+          "name": "set_locking_contract",
+          "type": "function",
+          "inputs": [
+            {
+              "name": "locking_contract",
+              "type": "core::starknet::contract_address::ContractAddress"
+            }
+          ],
+          "outputs": [],
+          "state_mutability": "external"
+        },
+        {
+          "name": "get_locking_contract",
+          "type": "function",
+          "inputs": [],
+          "outputs": [
+            {
+              "type": "core::starknet::contract_address::ContractAddress"
+            }
+          ],
+          "state_mutability": "view"
+        }
+      ]
+    },
+    {
+      "name": "LockAndDelegate",
+      "type": "impl",
+      "interface_name": "src::mintable_lock_interface::ILockAndDelegate"
+    },
+    {
+      "name": "core::integer::u256",
+      "type": "struct",
+      "members": [
+        {
+          "name": "low",
+          "type": "core::integer::u128"
+        },
+        {
+          "name": "high",
+          "type": "core::integer::u128"
+        }
+      ]
+    },
+    {
+      "name": "src::mintable_lock_interface::ILockAndDelegate",
+      "type": "interface",
+      "items": [
+        {
+          "name": "lock_and_delegate",
+          "type": "function",
+          "inputs": [
+            {
+              "name": "delegatee",
+              "type": "core::starknet::contract_address::ContractAddress"
+            },
+            {
+              "name": "amount",
+              "type": "core::integer::u256"
+            }
+          ],
+          "outputs": [],
+          "state_mutability": "external"
+        },
+        {
+          "name": "lock_and_delegate_by_sig",
+          "type": "function",
+          "inputs": [
+            {
+              "name": "account",
+              "type": "core::starknet::contract_address::ContractAddress"
+            },
+            {
+              "name": "delegatee",
+              "type": "core::starknet::contract_address::ContractAddress"
+            },
+            {
+              "name": "amount",
+              "type": "core::integer::u256"
+            },
+            {
+              "name": "nonce",
+              "type": "core::felt252"
+            },
+            {
+              "name": "expiry",
+              "type": "core::integer::u64"
+            },
+            {
+              "name": "signature",
+              "type": "core::array::Array::<core::felt252>"
+            }
+          ],
+          "outputs": [],
+          "state_mutability": "external"
+        }
+      ]
+    },
+    {
+      "name": "MintableToken",
+      "type": "impl",
+      "interface_name": "src::mintable_token_interface::IMintableToken"
+    },
+    {
+      "name": "src::mintable_token_interface::IMintableToken",
+      "type": "interface",
+      "items": [
+        {
+          "name": "permissioned_mint",
+          "type": "function",
+          "inputs": [
+            {
+              "name": "account",
+              "type": "core::starknet::contract_address::ContractAddress"
+            },
+            {
+              "name": "amount",
+              "type": "core::integer::u256"
+            }
+          ],
+          "outputs": [],
+          "state_mutability": "external"
+        },
+        {
+          "name": "permissioned_burn",
+          "type": "function",
+          "inputs": [
+            {
+              "name": "account",
+              "type": "core::starknet::contract_address::ContractAddress"
+            },
+            {
+              "name": "amount",
+              "type": "core::integer::u256"
+            }
+          ],
+          "outputs": [],
+          "state_mutability": "external"
+        }
+      ]
+    },
+    {
+      "name": "MintableTokenCamelImpl",
+      "type": "impl",
+      "interface_name": "src::mintable_token_interface::IMintableTokenCamel"
+    },
+    {
+      "name": "src::mintable_token_interface::IMintableTokenCamel",
+      "type": "interface",
+      "items": [
+        {
+          "name": "permissionedMint",
+          "type": "function",
+          "inputs": [
+            {
+              "name": "account",
+              "type": "core::starknet::contract_address::ContractAddress"
+            },
+            {
+              "name": "amount",
+              "type": "core::integer::u256"
+            }
+          ],
+          "outputs": [],
+          "state_mutability": "external"
+        },
+        {
+          "name": "permissionedBurn",
+          "type": "function",
+          "inputs": [
+            {
+              "name": "account",
+              "type": "core::starknet::contract_address::ContractAddress"
+            },
+            {
+              "name": "amount",
+              "type": "core::integer::u256"
+            }
+          ],
+          "outputs": [],
+          "state_mutability": "external"
+        }
+      ]
+    },
+    {
+      "name": "Replaceable",
+      "type": "impl",
+      "interface_name": "src::replaceability_interface::IReplaceable"
+    },
+    {
+      "name": "core::array::Span::<core::felt252>",
+      "type": "struct",
+      "members": [
+        {
+          "name": "snapshot",
+          "type": "@core::array::Array::<core::felt252>"
+        }
+      ]
+    },
+    {
+      "name": "src::replaceability_interface::EICData",
+      "type": "struct",
+      "members": [
+        {
+          "name": "eic_hash",
+          "type": "core::starknet::class_hash::ClassHash"
+        },
+        {
+          "name": "eic_init_data",
+          "type": "core::array::Span::<core::felt252>"
+        }
+      ]
+    },
+    {
+      "name": "core::option::Option::<src::replaceability_interface::EICData>",
+      "type": "enum",
+      "variants": [
+        {
+          "name": "Some",
+          "type": "src::replaceability_interface::EICData"
+        },
+        {
+          "name": "None",
+          "type": "()"
+        }
+      ]
+    },
+    {
+      "name": "core::bool",
+      "type": "enum",
+      "variants": [
+        {
+          "name": "False",
+          "type": "()"
+        },
+        {
+          "name": "True",
+          "type": "()"
+        }
+      ]
+    },
+    {
+      "name": "src::replaceability_interface::ImplementationData",
+      "type": "struct",
+      "members": [
+        {
+          "name": "impl_hash",
+          "type": "core::starknet::class_hash::ClassHash"
+        },
+        {
+          "name": "eic_data",
+          "type": "core::option::Option::<src::replaceability_interface::EICData>"
+        },
+        {
+          "name": "final",
+          "type": "core::bool"
+        }
+      ]
+    },
+    {
+      "name": "src::replaceability_interface::IReplaceable",
+      "type": "interface",
+      "items": [
+        {
+          "name": "get_upgrade_delay",
+          "type": "function",
+          "inputs": [],
+          "outputs": [
+            {
+              "type": "core::integer::u64"
+            }
+          ],
+          "state_mutability": "view"
+        },
+        {
+          "name": "get_impl_activation_time",
+          "type": "function",
+          "inputs": [
+            {
+              "name": "implementation_data",
+              "type": "src::replaceability_interface::ImplementationData"
+            }
+          ],
+          "outputs": [
+            {
+              "type": "core::integer::u64"
+            }
+          ],
+          "state_mutability": "view"
+        },
+        {
+          "name": "add_new_implementation",
+          "type": "function",
+          "inputs": [
+            {
+              "name": "implementation_data",
+              "type": "src::replaceability_interface::ImplementationData"
+            }
+          ],
+          "outputs": [],
+          "state_mutability": "external"
+        },
+        {
+          "name": "remove_implementation",
+          "type": "function",
+          "inputs": [
+            {
+              "name": "implementation_data",
+              "type": "src::replaceability_interface::ImplementationData"
+            }
+          ],
+          "outputs": [],
+          "state_mutability": "external"
+        },
+        {
+          "name": "replace_to",
+          "type": "function",
+          "inputs": [
+            {
+              "name": "implementation_data",
+              "type": "src::replaceability_interface::ImplementationData"
+            }
+          ],
+          "outputs": [],
+          "state_mutability": "external"
+        }
+      ]
+    },
+    {
+      "name": "AccessControlImplExternal",
+      "type": "impl",
+      "interface_name": "src::access_control_interface::IAccessControl"
+    },
+    {
+      "name": "src::access_control_interface::IAccessControl",
+      "type": "interface",
+      "items": [
+        {
+          "name": "has_role",
+          "type": "function",
+          "inputs": [
+            {
+              "name": "role",
+              "type": "core::felt252"
+            },
+            {
+              "name": "account",
+              "type": "core::starknet::contract_address::ContractAddress"
+            }
+          ],
+          "outputs": [
+            {
+              "type": "core::bool"
+            }
+          ],
+          "state_mutability": "view"
+        },
+        {
+          "name": "get_role_admin",
+          "type": "function",
+          "inputs": [
+            {
+              "name": "role",
+              "type": "core::felt252"
+            }
+          ],
+          "outputs": [
+            {
+              "type": "core::felt252"
+            }
+          ],
+          "state_mutability": "view"
+        }
+      ]
+    },
+    {
+      "name": "RolesImpl",
+      "type": "impl",
+      "interface_name": "src::roles_interface::IMinimalRoles"
+    },
+    {
+      "name": "src::roles_interface::IMinimalRoles",
+      "type": "interface",
+      "items": [
+        {
+          "name": "is_governance_admin",
+          "type": "function",
+          "inputs": [
+            {
+              "name": "account",
+              "type": "core::starknet::contract_address::ContractAddress"
+            }
+          ],
+          "outputs": [
+            {
+              "type": "core::bool"
+            }
+          ],
+          "state_mutability": "view"
+        },
+        {
+          "name": "is_upgrade_governor",
+          "type": "function",
+          "inputs": [
+            {
+              "name": "account",
+              "type": "core::starknet::contract_address::ContractAddress"
+            }
+          ],
+          "outputs": [
+            {
+              "type": "core::bool"
+            }
+          ],
+          "state_mutability": "view"
+        },
+        {
+          "name": "register_governance_admin",
+          "type": "function",
+          "inputs": [
+            {
+              "name": "account",
+              "type": "core::starknet::contract_address::ContractAddress"
+            }
+          ],
+          "outputs": [],
+          "state_mutability": "external"
+        },
+        {
+          "name": "remove_governance_admin",
+          "type": "function",
+          "inputs": [
+            {
+              "name": "account",
+              "type": "core::starknet::contract_address::ContractAddress"
+            }
+          ],
+          "outputs": [],
+          "state_mutability": "external"
+        },
+        {
+          "name": "register_upgrade_governor",
+          "type": "function",
+          "inputs": [
+            {
+              "name": "account",
+              "type": "core::starknet::contract_address::ContractAddress"
+            }
+          ],
+          "outputs": [],
+          "state_mutability": "external"
+        },
+        {
+          "name": "remove_upgrade_governor",
+          "type": "function",
+          "inputs": [
+            {
+              "name": "account",
+              "type": "core::starknet::contract_address::ContractAddress"
+            }
+          ],
+          "outputs": [],
+          "state_mutability": "external"
+        },
+        {
+          "name": "renounce",
+          "type": "function",
+          "inputs": [
+            {
+              "name": "role",
+              "type": "core::felt252"
+            }
+          ],
+          "outputs": [],
+          "state_mutability": "external"
+        }
+      ]
+    },
+    {
+      "name": "ERC20Impl",
+      "type": "impl",
+      "interface_name": "openzeppelin::token::erc20::interface::IERC20"
+    },
+    {
+      "name": "openzeppelin::token::erc20::interface::IERC20",
+      "type": "interface",
+      "items": [
+        {
+          "name": "name",
+          "type": "function",
+          "inputs": [],
+          "outputs": [
+            {
+              "type": "core::felt252"
+            }
+          ],
+          "state_mutability": "view"
+        },
+        {
+          "name": "symbol",
+          "type": "function",
+          "inputs": [],
+          "outputs": [
+            {
+              "type": "core::felt252"
+            }
+          ],
+          "state_mutability": "view"
+        },
+        {
+          "name": "decimals",
+          "type": "function",
+          "inputs": [],
+          "outputs": [
+            {
+              "type": "core::integer::u8"
+            }
+          ],
+          "state_mutability": "view"
+        },
+        {
+          "name": "total_supply",
+          "type": "function",
+          "inputs": [],
+          "outputs": [
+            {
+              "type": "core::integer::u256"
+            }
+          ],
+          "state_mutability": "view"
+        },
+        {
+          "name": "balance_of",
+          "type": "function",
+          "inputs": [
+            {
+              "name": "account",
+              "type": "core::starknet::contract_address::ContractAddress"
+            }
+          ],
+          "outputs": [
+            {
+              "type": "core::integer::u256"
+            }
+          ],
+          "state_mutability": "view"
+        },
+        {
+          "name": "allowance",
+          "type": "function",
+          "inputs": [
+            {
+              "name": "owner",
+              "type": "core::starknet::contract_address::ContractAddress"
+            },
+            {
+              "name": "spender",
+              "type": "core::starknet::contract_address::ContractAddress"
+            }
+          ],
+          "outputs": [
+            {
+              "type": "core::integer::u256"
+            }
+          ],
+          "state_mutability": "view"
+        },
+        {
+          "name": "transfer",
+          "type": "function",
+          "inputs": [
+            {
+              "name": "recipient",
+              "type": "core::starknet::contract_address::ContractAddress"
+            },
+            {
+              "name": "amount",
+              "type": "core::integer::u256"
+            }
+          ],
+          "outputs": [
+            {
+              "type": "core::bool"
+            }
+          ],
+          "state_mutability": "external"
+        },
+        {
+          "name": "transfer_from",
+          "type": "function",
+          "inputs": [
+            {
+              "name": "sender",
+              "type": "core::starknet::contract_address::ContractAddress"
+            },
+            {
+              "name": "recipient",
+              "type": "core::starknet::contract_address::ContractAddress"
+            },
+            {
+              "name": "amount",
+              "type": "core::integer::u256"
+            }
+          ],
+          "outputs": [
+            {
+              "type": "core::bool"
+            }
+          ],
+          "state_mutability": "external"
+        },
+        {
+          "name": "approve",
+          "type": "function",
+          "inputs": [
+            {
+              "name": "spender",
+              "type": "core::starknet::contract_address::ContractAddress"
+            },
+            {
+              "name": "amount",
+              "type": "core::integer::u256"
+            }
+          ],
+          "outputs": [
+            {
+              "type": "core::bool"
+            }
+          ],
+          "state_mutability": "external"
+        }
+      ]
+    },
+    {
+      "name": "ERC20CamelOnlyImpl",
+      "type": "impl",
+      "interface_name": "openzeppelin::token::erc20::interface::IERC20CamelOnly"
+    },
+    {
+      "name": "openzeppelin::token::erc20::interface::IERC20CamelOnly",
+      "type": "interface",
+      "items": [
+        {
+          "name": "totalSupply",
+          "type": "function",
+          "inputs": [],
+          "outputs": [
+            {
+              "type": "core::integer::u256"
+            }
+          ],
+          "state_mutability": "view"
+        },
+        {
+          "name": "balanceOf",
+          "type": "function",
+          "inputs": [
+            {
+              "name": "account",
+              "type": "core::starknet::contract_address::ContractAddress"
+            }
+          ],
+          "outputs": [
+            {
+              "type": "core::integer::u256"
+            }
+          ],
+          "state_mutability": "view"
+        },
+        {
+          "name": "transferFrom",
+          "type": "function",
+          "inputs": [
+            {
+              "name": "sender",
+              "type": "core::starknet::contract_address::ContractAddress"
+            },
+            {
+              "name": "recipient",
+              "type": "core::starknet::contract_address::ContractAddress"
+            },
+            {
+              "name": "amount",
+              "type": "core::integer::u256"
+            }
+          ],
+          "outputs": [
+            {
+              "type": "core::bool"
+            }
+          ],
+          "state_mutability": "external"
+        }
+      ]
+    },
+    {
+      "name": "constructor",
+      "type": "constructor",
+      "inputs": [
+        {
+          "name": "name",
+          "type": "core::felt252"
+        },
+        {
+          "name": "symbol",
+          "type": "core::felt252"
+        },
+        {
+          "name": "decimals",
+          "type": "core::integer::u8"
+        },
+        {
+          "name": "initial_supply",
+          "type": "core::integer::u256"
+        },
+        {
+          "name": "recipient",
+          "type": "core::starknet::contract_address::ContractAddress"
+        },
+        {
+          "name": "permitted_minter",
+          "type": "core::starknet::contract_address::ContractAddress"
+        },
+        {
+          "name": "provisional_governance_admin",
+          "type": "core::starknet::contract_address::ContractAddress"
+        },
+        {
+          "name": "upgrade_delay",
+          "type": "core::integer::u64"
+        }
+      ]
+    },
+    {
+      "name": "increase_allowance",
+      "type": "function",
+      "inputs": [
+        {
+          "name": "spender",
+          "type": "core::starknet::contract_address::ContractAddress"
+        },
+        {
+          "name": "added_value",
+          "type": "core::integer::u256"
+        }
+      ],
+      "outputs": [
+        {
+          "type": "core::bool"
+        }
+      ],
+      "state_mutability": "external"
+    },
+    {
+      "name": "decrease_allowance",
+      "type": "function",
+      "inputs": [
+        {
+          "name": "spender",
+          "type": "core::starknet::contract_address::ContractAddress"
+        },
+        {
+          "name": "subtracted_value",
+          "type": "core::integer::u256"
+        }
+      ],
+      "outputs": [
+        {
+          "type": "core::bool"
+        }
+      ],
+      "state_mutability": "external"
+    },
+    {
+      "name": "increaseAllowance",
+      "type": "function",
+      "inputs": [
+        {
+          "name": "spender",
+          "type": "core::starknet::contract_address::ContractAddress"
+        },
+        {
+          "name": "addedValue",
+          "type": "core::integer::u256"
+        }
+      ],
+      "outputs": [
+        {
+          "type": "core::bool"
+        }
+      ],
+      "state_mutability": "external"
+    },
+    {
+      "name": "decreaseAllowance",
+      "type": "function",
+      "inputs": [
+        {
+          "name": "spender",
+          "type": "core::starknet::contract_address::ContractAddress"
+        },
+        {
+          "name": "subtractedValue",
+          "type": "core::integer::u256"
+        }
+      ],
+      "outputs": [
+        {
+          "type": "core::bool"
+        }
+      ],
+      "state_mutability": "external"
+    },
+    {
+      "kind": "struct",
+      "name": "src::strk::erc20_lockable::ERC20Lockable::Transfer",
+      "type": "event",
+      "members": [
+        {
+          "kind": "data",
+          "name": "from",
+          "type": "core::starknet::contract_address::ContractAddress"
+        },
+        {
+          "kind": "data",
+          "name": "to",
+          "type": "core::starknet::contract_address::ContractAddress"
+        },
+        {
+          "kind": "data",
+          "name": "value",
+          "type": "core::integer::u256"
+        }
+      ]
+    },
+    {
+      "kind": "struct",
+      "name": "src::strk::erc20_lockable::ERC20Lockable::Approval",
+      "type": "event",
+      "members": [
+        {
+          "kind": "data",
+          "name": "owner",
+          "type": "core::starknet::contract_address::ContractAddress"
+        },
+        {
+          "kind": "data",
+          "name": "spender",
+          "type": "core::starknet::contract_address::ContractAddress"
+        },
+        {
+          "kind": "data",
+          "name": "value",
+          "type": "core::integer::u256"
+        }
+      ]
+    },
+    {
+      "kind": "struct",
+      "name": "src::replaceability_interface::ImplementationAdded",
+      "type": "event",
+      "members": [
+        {
+          "kind": "data",
+          "name": "implementation_data",
+          "type": "src::replaceability_interface::ImplementationData"
+        }
+      ]
+    },
+    {
+      "kind": "struct",
+      "name": "src::replaceability_interface::ImplementationRemoved",
+      "type": "event",
+      "members": [
+        {
+          "kind": "data",
+          "name": "implementation_data",
+          "type": "src::replaceability_interface::ImplementationData"
+        }
+      ]
+    },
+    {
+      "kind": "struct",
+      "name": "src::replaceability_interface::ImplementationReplaced",
+      "type": "event",
+      "members": [
+        {
+          "kind": "data",
+          "name": "implementation_data",
+          "type": "src::replaceability_interface::ImplementationData"
+        }
+      ]
+    },
+    {
+      "kind": "struct",
+      "name": "src::replaceability_interface::ImplementationFinalized",
+      "type": "event",
+      "members": [
+        {
+          "kind": "data",
+          "name": "impl_hash",
+          "type": "core::starknet::class_hash::ClassHash"
+        }
+      ]
+    },
+    {
+      "kind": "struct",
+      "name": "src::access_control_interface::RoleGranted",
+      "type": "event",
+      "members": [
+        {
+          "kind": "data",
+          "name": "role",
+          "type": "core::felt252"
+        },
+        {
+          "kind": "data",
+          "name": "account",
+          "type": "core::starknet::contract_address::ContractAddress"
+        },
+        {
+          "kind": "data",
+          "name": "sender",
+          "type": "core::starknet::contract_address::ContractAddress"
+        }
+      ]
+    },
+    {
+      "kind": "struct",
+      "name": "src::access_control_interface::RoleRevoked",
+      "type": "event",
+      "members": [
+        {
+          "kind": "data",
+          "name": "role",
+          "type": "core::felt252"
+        },
+        {
+          "kind": "data",
+          "name": "account",
+          "type": "core::starknet::contract_address::ContractAddress"
+        },
+        {
+          "kind": "data",
+          "name": "sender",
+          "type": "core::starknet::contract_address::ContractAddress"
+        }
+      ]
+    },
+    {
+      "kind": "struct",
+      "name": "src::access_control_interface::RoleAdminChanged",
+      "type": "event",
+      "members": [
+        {
+          "kind": "data",
+          "name": "role",
+          "type": "core::felt252"
+        },
+        {
+          "kind": "data",
+          "name": "previous_admin_role",
+          "type": "core::felt252"
+        },
+        {
+          "kind": "data",
+          "name": "new_admin_role",
+          "type": "core::felt252"
+        }
+      ]
+    },
+    {
+      "kind": "struct",
+      "name": "src::roles_interface::GovernanceAdminAdded",
+      "type": "event",
+      "members": [
+        {
+          "kind": "data",
+          "name": "added_account",
+          "type": "core::starknet::contract_address::ContractAddress"
+        },
+        {
+          "kind": "data",
+          "name": "added_by",
+          "type": "core::starknet::contract_address::ContractAddress"
+        }
+      ]
+    },
+    {
+      "kind": "struct",
+      "name": "src::roles_interface::GovernanceAdminRemoved",
+      "type": "event",
+      "members": [
+        {
+          "kind": "data",
+          "name": "removed_account",
+          "type": "core::starknet::contract_address::ContractAddress"
+        },
+        {
+          "kind": "data",
+          "name": "removed_by",
+          "type": "core::starknet::contract_address::ContractAddress"
+        }
+      ]
+    },
+    {
+      "kind": "struct",
+      "name": "src::roles_interface::UpgradeGovernorAdded",
+      "type": "event",
+      "members": [
+        {
+          "kind": "data",
+          "name": "added_account",
+          "type": "core::starknet::contract_address::ContractAddress"
+        },
+        {
+          "kind": "data",
+          "name": "added_by",
+          "type": "core::starknet::contract_address::ContractAddress"
+        }
+      ]
+    },
+    {
+      "kind": "struct",
+      "name": "src::roles_interface::UpgradeGovernorRemoved",
+      "type": "event",
+      "members": [
+        {
+          "kind": "data",
+          "name": "removed_account",
+          "type": "core::starknet::contract_address::ContractAddress"
+        },
+        {
+          "kind": "data",
+          "name": "removed_by",
+          "type": "core::starknet::contract_address::ContractAddress"
+        }
+      ]
+    },
+    {
+      "kind": "enum",
+      "name": "src::strk::erc20_lockable::ERC20Lockable::Event",
+      "type": "event",
+      "variants": [
+        {
+          "kind": "nested",
+          "name": "Transfer",
+          "type": "src::strk::erc20_lockable::ERC20Lockable::Transfer"
+        },
+        {
+          "kind": "nested",
+          "name": "Approval",
+          "type": "src::strk::erc20_lockable::ERC20Lockable::Approval"
+        },
+        {
+          "kind": "nested",
+          "name": "ImplementationAdded",
+          "type": "src::replaceability_interface::ImplementationAdded"
+        },
+        {
+          "kind": "nested",
+          "name": "ImplementationRemoved",
+          "type": "src::replaceability_interface::ImplementationRemoved"
+        },
+        {
+          "kind": "nested",
+          "name": "ImplementationReplaced",
+          "type": "src::replaceability_interface::ImplementationReplaced"
+        },
+        {
+          "kind": "nested",
+          "name": "ImplementationFinalized",
+          "type": "src::replaceability_interface::ImplementationFinalized"
+        },
+        {
+          "kind": "nested",
+          "name": "RoleGranted",
+          "type": "src::access_control_interface::RoleGranted"
+        },
+        {
+          "kind": "nested",
+          "name": "RoleRevoked",
+          "type": "src::access_control_interface::RoleRevoked"
+        },
+        {
+          "kind": "nested",
+          "name": "RoleAdminChanged",
+          "type": "src::access_control_interface::RoleAdminChanged"
+        },
+        {
+          "kind": "nested",
+          "name": "GovernanceAdminAdded",
+          "type": "src::roles_interface::GovernanceAdminAdded"
+        },
+        {
+          "kind": "nested",
+          "name": "GovernanceAdminRemoved",
+          "type": "src::roles_interface::GovernanceAdminRemoved"
+        },
+        {
+          "kind": "nested",
+          "name": "UpgradeGovernorAdded",
+          "type": "src::roles_interface::UpgradeGovernorAdded"
+        },
+        {
+          "kind": "nested",
+          "name": "UpgradeGovernorRemoved",
+          "type": "src::roles_interface::UpgradeGovernorRemoved"
+        }
+      ]
+    }
+  ]
\ No newline at end of file
diff --git a/app/abis/swappr-abi.ts b/app/abis/swappr-abi.ts
index 7f1e567..24dde51 100644
--- a/app/abis/swappr-abi.ts
+++ b/app/abis/swappr-abi.ts
@@ -2,17 +2,17 @@ import type { Abi } from "starknet";
 
 export const SWAPPR_ABI = [
   {
-    type: "impl",
     name: "UpgradeableImpl",
+    type: "impl",
     interface_name: "openzeppelin_upgrades::interface::IUpgradeable",
   },
   {
-    type: "interface",
     name: "openzeppelin_upgrades::interface::IUpgradeable",
+    type: "interface",
     items: [
       {
-        type: "function",
         name: "upgrade",
+        type: "function",
         inputs: [
           {
             name: "new_class_hash",
@@ -25,13 +25,13 @@ export const SWAPPR_ABI = [
     ],
   },
   {
-    type: "impl",
     name: "AutoSwappr",
+    type: "impl",
     interface_name: "auto_swappr::interfaces::iautoswappr::IAutoSwappr",
   },
   {
-    type: "struct",
     name: "core::integer::u256",
+    type: "struct",
     members: [
       {
         name: "low",
@@ -44,8 +44,8 @@ export const SWAPPR_ABI = [
     ],
   },
   {
-    type: "struct",
     name: "auto_swappr::base::types::Route",
+    type: "struct",
     members: [
       {
         name: "token_from",
@@ -70,8 +70,8 @@ export const SWAPPR_ABI = [
     ],
   },
   {
-    type: "struct",
     name: "auto_swappr::base::types::RouteParams",
+    type: "struct",
     members: [
       {
         name: "token_in",
@@ -96,8 +96,8 @@ export const SWAPPR_ABI = [
     ],
   },
   {
-    type: "struct",
     name: "auto_swappr::base::types::SwapParams",
+    type: "struct",
     members: [
       {
         name: "token_in",
@@ -126,38 +126,56 @@ export const SWAPPR_ABI = [
     ],
   },
   {
-    type: "struct",
+    name: "auto_swappr::base::types::FeeType",
+    type: "enum",
+    variants: [
+      {
+        name: "Fixed",
+        type: "()",
+      },
+      {
+        name: "Percentage",
+        type: "()",
+      },
+    ],
+  },
+  {
     name: "auto_swappr::interfaces::iautoswappr::ContractInfo",
+    type: "struct",
     members: [
       {
         name: "fees_collector",
         type: "core::starknet::contract_address::ContractAddress",
       },
-      {
-        name: "avnu_exchange_address",
-        type: "core::starknet::contract_address::ContractAddress",
-      },
       {
         name: "fibrous_exchange_address",
         type: "core::starknet::contract_address::ContractAddress",
       },
       {
-        name: "strk_token",
+        name: "avnu_exchange_address",
         type: "core::starknet::contract_address::ContractAddress",
       },
       {
-        name: "eth_token",
+        name: "oracle_address",
         type: "core::starknet::contract_address::ContractAddress",
       },
       {
         name: "owner",
         type: "core::starknet::contract_address::ContractAddress",
       },
+      {
+        name: "fee_type",
+        type: "auto_swappr::base::types::FeeType",
+      },
+      {
+        name: "percentage_fee",
+        type: "core::integer::u16",
+      },
     ],
   },
   {
-    type: "enum",
     name: "core::bool",
+    type: "enum",
     variants: [
       {
         name: "False",
@@ -170,13 +188,121 @@ export const SWAPPR_ABI = [
     ],
   },
   {
-    type: "interface",
+    name: "ekubo::types::i129::i129",
+    type: "struct",
+    members: [
+      {
+        name: "mag",
+        type: "core::integer::u128",
+      },
+      {
+        name: "sign",
+        type: "core::bool",
+      },
+    ],
+  },
+  {
+    name: "ekubo::interfaces::core::SwapParameters",
+    type: "struct",
+    members: [
+      {
+        name: "amount",
+        type: "ekubo::types::i129::i129",
+      },
+      {
+        name: "is_token1",
+        type: "core::bool",
+      },
+      {
+        name: "sqrt_ratio_limit",
+        type: "core::integer::u256",
+      },
+      {
+        name: "skip_ahead",
+        type: "core::integer::u128",
+      },
+    ],
+  },
+  {
+    name: "ekubo::types::keys::PoolKey",
+    type: "struct",
+    members: [
+      {
+        name: "token0",
+        type: "core::starknet::contract_address::ContractAddress",
+      },
+      {
+        name: "token1",
+        type: "core::starknet::contract_address::ContractAddress",
+      },
+      {
+        name: "fee",
+        type: "core::integer::u128",
+      },
+      {
+        name: "tick_spacing",
+        type: "core::integer::u128",
+      },
+      {
+        name: "extension",
+        type: "core::starknet::contract_address::ContractAddress",
+      },
+    ],
+  },
+  {
+    name: "auto_swappr::base::types::SwapData",
+    type: "struct",
+    members: [
+      {
+        name: "params",
+        type: "ekubo::interfaces::core::SwapParameters",
+      },
+      {
+        name: "pool_key",
+        type: "ekubo::types::keys::PoolKey",
+      },
+      {
+        name: "caller",
+        type: "core::starknet::contract_address::ContractAddress",
+      },
+    ],
+  },
+  {
+    name: "ekubo::types::delta::Delta",
+    type: "struct",
+    members: [
+      {
+        name: "amount0",
+        type: "ekubo::types::i129::i129",
+      },
+      {
+        name: "amount1",
+        type: "ekubo::types::i129::i129",
+      },
+    ],
+  },
+  {
+    name: "auto_swappr::base::types::SwapResult",
+    type: "struct",
+    members: [
+      {
+        name: "delta",
+        type: "ekubo::types::delta::Delta",
+      },
+    ],
+  },
+  {
     name: "auto_swappr::interfaces::iautoswappr::IAutoSwappr",
+    type: "interface",
     items: [
       {
-        type: "function",
         name: "avnu_swap",
+        type: "function",
         inputs: [
+          {
+            name: "protocol_swapper",
+            type: "core::starknet::contract_address::ContractAddress",
+          },
           {
             name: "token_from_address",
             type: "core::starknet::contract_address::ContractAddress",
@@ -189,10 +315,6 @@ export const SWAPPR_ABI = [
             name: "token_to_address",
             type: "core::starknet::contract_address::ContractAddress",
           },
-          {
-            name: "token_to_amount",
-            type: "core::integer::u256",
-          },
           {
             name: "token_to_min_amount",
             type: "core::integer::u256",
@@ -218,8 +340,8 @@ export const SWAPPR_ABI = [
         state_mutability: "external",
       },
       {
-        type: "function",
         name: "fibrous_swap",
+        type: "function",
         inputs: [
           {
             name: "routeParams",
@@ -229,13 +351,21 @@ export const SWAPPR_ABI = [
             name: "swapParams",
             type: "core::array::Array::<auto_swappr::base::types::SwapParams>",
           },
+          {
+            name: "protocol_swapper",
+            type: "core::starknet::contract_address::ContractAddress",
+          },
+          {
+            name: "beneficiary",
+            type: "core::starknet::contract_address::ContractAddress",
+          },
         ],
         outputs: [],
         state_mutability: "external",
       },
       {
-        type: "function",
         name: "contract_parameters",
+        type: "function",
         inputs: [],
         outputs: [
           {
@@ -245,23 +375,27 @@ export const SWAPPR_ABI = [
         state_mutability: "view",
       },
       {
+        name: "support_new_token_from",
         type: "function",
-        name: "set_operator",
         inputs: [
           {
-            name: "address",
+            name: "token_from",
             type: "core::starknet::contract_address::ContractAddress",
           },
+          {
+            name: "feed_id",
+            type: "core::felt252",
+          },
         ],
         outputs: [],
         state_mutability: "external",
       },
       {
+        name: "remove_token_from",
         type: "function",
-        name: "remove_operator",
         inputs: [
           {
-            name: "address",
+            name: "token_from",
             type: "core::starknet::contract_address::ContractAddress",
           },
         ],
@@ -269,57 +403,144 @@ export const SWAPPR_ABI = [
         state_mutability: "external",
       },
       {
+        name: "get_token_amount_in_usd",
         type: "function",
-        name: "is_operator",
         inputs: [
           {
-            name: "address",
+            name: "token",
             type: "core::starknet::contract_address::ContractAddress",
           },
+          {
+            name: "token_amount",
+            type: "core::integer::u256",
+          },
         ],
         outputs: [
           {
-            type: "core::bool",
+            type: "core::integer::u256",
           },
         ],
         state_mutability: "view",
       },
       {
+        name: "get_token_from_status_and_value",
         type: "function",
-        name: "get_strk_usd_price",
-        inputs: [],
+        inputs: [
+          {
+            name: "token_from",
+            type: "core::starknet::contract_address::ContractAddress",
+          },
+        ],
         outputs: [
           {
-            type: "(core::integer::u128, core::integer::u32)",
+            type: "(core::bool, core::felt252)",
           },
         ],
         state_mutability: "view",
       },
       {
+        name: "set_fee_type",
         type: "function",
-        name: "get_eth_usd_price",
-        inputs: [],
+        inputs: [
+          {
+            name: "fee_type",
+            type: "auto_swappr::base::types::FeeType",
+          },
+          {
+            name: "percentage_fee",
+            type: "core::integer::u16",
+          },
+        ],
+        outputs: [],
+        state_mutability: "external",
+      },
+      {
+        name: "ekubo_swap",
+        type: "function",
+        inputs: [
+          {
+            name: "swap_data",
+            type: "auto_swappr::base::types::SwapData",
+          },
+        ],
         outputs: [
           {
-            type: "(core::integer::u128, core::integer::u32)",
+            type: "auto_swappr::base::types::SwapResult",
           },
         ],
-        state_mutability: "view",
+        state_mutability: "external",
+      },
+      {
+        name: "ekubo_manual_swap",
+        type: "function",
+        inputs: [
+          {
+            name: "swap_data",
+            type: "auto_swappr::base::types::SwapData",
+          },
+        ],
+        outputs: [
+          {
+            type: "auto_swappr::base::types::SwapResult",
+          },
+        ],
+        state_mutability: "external",
       },
     ],
   },
   {
+    name: "LockerImpl",
     type: "impl",
+    interface_name: "ekubo::interfaces::core::ILocker",
+  },
+  {
+    name: "core::array::Span::<core::felt252>",
+    type: "struct",
+    members: [
+      {
+        name: "snapshot",
+        type: "@core::array::Array::<core::felt252>",
+      },
+    ],
+  },
+  {
+    name: "ekubo::interfaces::core::ILocker",
+    type: "interface",
+    items: [
+      {
+        name: "locked",
+        type: "function",
+        inputs: [
+          {
+            name: "id",
+            type: "core::integer::u32",
+          },
+          {
+            name: "data",
+            type: "core::array::Span::<core::felt252>",
+          },
+        ],
+        outputs: [
+          {
+            type: "core::array::Span::<core::felt252>",
+          },
+        ],
+        state_mutability: "external",
+      },
+    ],
+  },
+  {
     name: "OwnableImpl",
+    type: "impl",
     interface_name: "openzeppelin_access::ownable::interface::IOwnable",
   },
   {
-    type: "interface",
     name: "openzeppelin_access::ownable::interface::IOwnable",
+    type: "interface",
     items: [
       {
-        type: "function",
         name: "owner",
+        type: "function",
         inputs: [],
         outputs: [
           {
@@ -329,8 +550,8 @@ export const SWAPPR_ABI = [
         state_mutability: "view",
       },
       {
-        type: "function",
         name: "transfer_ownership",
+        type: "function",
         inputs: [
           {
             name: "new_owner",
@@ -341,8 +562,8 @@ export const SWAPPR_ABI = [
         state_mutability: "external",
       },
       {
-        type: "function",
         name: "renounce_ownership",
+        type: "function",
         inputs: [],
         outputs: [],
         state_mutability: "external",
@@ -350,13 +571,68 @@ export const SWAPPR_ABI = [
     ],
   },
   {
-    type: "constructor",
+    name: "OperatorImpl",
+    type: "impl",
+    interface_name: "auto_swappr::interfaces::ioperator::IOperator",
+  },
+  {
+    name: "auto_swappr::interfaces::ioperator::IOperator",
+    type: "interface",
+    items: [
+      {
+        name: "set_operator",
+        type: "function",
+        inputs: [
+          {
+            name: "address",
+            type: "core::starknet::contract_address::ContractAddress",
+          },
+        ],
+        outputs: [],
+        state_mutability: "external",
+      },
+      {
+        name: "remove_operator",
+        type: "function",
+        inputs: [
+          {
+            name: "address",
+            type: "core::starknet::contract_address::ContractAddress",
+          },
+        ],
+        outputs: [],
+        state_mutability: "external",
+      },
+      {
+        name: "is_operator",
+        type: "function",
+        inputs: [
+          {
+            name: "address",
+            type: "core::starknet::contract_address::ContractAddress",
+          },
+        ],
+        outputs: [
+          {
+            type: "core::bool",
+          },
+        ],
+        state_mutability: "view",
+      },
+    ],
+  },
+  {
     name: "constructor",
+    type: "constructor",
     inputs: [
       {
         name: "fees_collector",
         type: "core::starknet::contract_address::ContractAddress",
       },
+      {
+        name: "fee_amount_bps",
+        type: "core::integer::u8",
+      },
       {
         name: "avnu_exchange_address",
         type: "core::starknet::contract_address::ContractAddress",
@@ -366,256 +642,307 @@ export const SWAPPR_ABI = [
         type: "core::starknet::contract_address::ContractAddress",
       },
       {
-        name: "oracle_address",
+        name: "ekubo_core_address",
         type: "core::starknet::contract_address::ContractAddress",
       },
       {
-        name: "_strk_token",
+        name: "oracle_address",
         type: "core::starknet::contract_address::ContractAddress",
       },
       {
-        name: "_eth_token",
-        type: "core::starknet::contract_address::ContractAddress",
+        name: "supported_assets",
+        type: "core::array::Array::<core::starknet::contract_address::ContractAddress>",
+      },
+      {
+        name: "supported_assets_priceFeeds_ids",
+        type: "core::array::Array::<core::felt252>",
       },
       {
         name: "owner",
         type: "core::starknet::contract_address::ContractAddress",
       },
+      {
+        name: "initial_fee_type",
+        type: "auto_swappr::base::types::FeeType",
+      },
+      {
+        name: "initial_percentage_fee",
+        type: "core::integer::u16",
+      },
     ],
   },
   {
-    type: "event",
-    name: "openzeppelin_access::ownable::ownable::OwnableComponent::OwnershipTransferred",
     kind: "struct",
+    name: "auto_swappr::autoswappr::AutoSwappr::SwapSuccessful",
+    type: "event",
     members: [
       {
-        name: "previous_owner",
+        kind: "data",
+        name: "token_from_address",
         type: "core::starknet::contract_address::ContractAddress",
-        kind: "key",
       },
       {
-        name: "new_owner",
+        kind: "data",
+        name: "token_from_amount",
+        type: "core::integer::u256",
+      },
+      {
+        kind: "data",
+        name: "token_to_address",
         type: "core::starknet::contract_address::ContractAddress",
-        kind: "key",
       },
-    ],
-  },
-  {
-    type: "event",
-    name: "openzeppelin_access::ownable::ownable::OwnableComponent::OwnershipTransferStarted",
-    kind: "struct",
-    members: [
       {
-        name: "previous_owner",
+        kind: "data",
+        name: "token_to_amount",
+        type: "core::integer::u256",
+      },
+      {
+        kind: "data",
+        name: "beneficiary",
         type: "core::starknet::contract_address::ContractAddress",
-        kind: "key",
       },
       {
-        name: "new_owner",
+        kind: "data",
+        name: "provider",
         type: "core::starknet::contract_address::ContractAddress",
-        kind: "key",
       },
     ],
   },
   {
-    type: "event",
-    name: "openzeppelin_access::ownable::ownable::OwnableComponent::Event",
-    kind: "enum",
-    variants: [
+    name: "auto_swappr::base::types::Assets",
+    type: "struct",
+    members: [
       {
-        name: "OwnershipTransferred",
-        type: "openzeppelin_access::ownable::ownable::OwnableComponent::OwnershipTransferred",
-        kind: "nested",
+        name: "strk",
+        type: "core::bool",
       },
       {
-        name: "OwnershipTransferStarted",
-        type: "openzeppelin_access::ownable::ownable::OwnableComponent::OwnershipTransferStarted",
-        kind: "nested",
+        name: "eth",
+        type: "core::bool",
       },
     ],
   },
   {
-    type: "event",
-    name: "openzeppelin_upgrades::upgradeable::UpgradeableComponent::Upgraded",
     kind: "struct",
+    name: "auto_swappr::autoswappr::AutoSwappr::Subscribed",
+    type: "event",
     members: [
       {
-        name: "class_hash",
-        type: "core::starknet::class_hash::ClassHash",
         kind: "data",
+        name: "user",
+        type: "core::starknet::contract_address::ContractAddress",
       },
-    ],
-  },
-  {
-    type: "event",
-    name: "openzeppelin_upgrades::upgradeable::UpgradeableComponent::Event",
-    kind: "enum",
-    variants: [
       {
-        name: "Upgraded",
-        type: "openzeppelin_upgrades::upgradeable::UpgradeableComponent::Upgraded",
-        kind: "nested",
+        kind: "data",
+        name: "assets",
+        type: "auto_swappr::base::types::Assets",
       },
     ],
   },
   {
-    type: "event",
-    name: "auto_swappr::autoswappr::AutoSwappr::SwapSuccessful",
     kind: "struct",
+    name: "auto_swappr::autoswappr::AutoSwappr::Unsubscribed",
+    type: "event",
     members: [
       {
-        name: "token_from_address",
-        type: "core::starknet::contract_address::ContractAddress",
         kind: "data",
+        name: "user",
+        type: "core::starknet::contract_address::ContractAddress",
       },
       {
-        name: "token_from_amount",
-        type: "core::integer::u256",
         kind: "data",
+        name: "assets",
+        type: "auto_swappr::base::types::Assets",
       },
       {
-        name: "token_to_address",
-        type: "core::starknet::contract_address::ContractAddress",
         kind: "data",
+        name: "block_timestamp",
+        type: "core::integer::u64",
       },
+    ],
+  },
+  {
+    kind: "struct",
+    name: "auto_swappr::autoswappr::AutoSwappr::FeeTypeChanged",
+    type: "event",
+    members: [
       {
-        name: "token_to_amount",
-        type: "core::integer::u256",
         kind: "data",
+        name: "new_fee_type",
+        type: "auto_swappr::base::types::FeeType",
       },
       {
-        name: "beneficiary",
-        type: "core::starknet::contract_address::ContractAddress",
         kind: "data",
+        name: "new_percentage_fee",
+        type: "core::integer::u16",
       },
     ],
   },
   {
-    type: "struct",
-    name: "auto_swappr::base::types::Assets",
+    kind: "struct",
+    name: "openzeppelin_access::ownable::ownable::OwnableComponent::OwnershipTransferred",
+    type: "event",
     members: [
       {
-        name: "strk",
-        type: "core::bool",
+        kind: "key",
+        name: "previous_owner",
+        type: "core::starknet::contract_address::ContractAddress",
       },
       {
-        name: "eth",
-        type: "core::bool",
+        kind: "key",
+        name: "new_owner",
+        type: "core::starknet::contract_address::ContractAddress",
       },
     ],
   },
   {
-    type: "event",
-    name: "auto_swappr::autoswappr::AutoSwappr::Subscribed",
     kind: "struct",
+    name: "openzeppelin_access::ownable::ownable::OwnableComponent::OwnershipTransferStarted",
+    type: "event",
     members: [
       {
-        name: "user",
+        kind: "key",
+        name: "previous_owner",
         type: "core::starknet::contract_address::ContractAddress",
-        kind: "data",
       },
       {
-        name: "assets",
-        type: "auto_swappr::base::types::Assets",
-        kind: "data",
+        kind: "key",
+        name: "new_owner",
+        type: "core::starknet::contract_address::ContractAddress",
       },
     ],
   },
   {
+    kind: "enum",
+    name: "openzeppelin_access::ownable::ownable::OwnableComponent::Event",
     type: "event",
-    name: "auto_swappr::autoswappr::AutoSwappr::Unsubscribed",
-    kind: "struct",
-    members: [
+    variants: [
       {
-        name: "user",
-        type: "core::starknet::contract_address::ContractAddress",
-        kind: "data",
+        kind: "nested",
+        name: "OwnershipTransferred",
+        type: "openzeppelin_access::ownable::ownable::OwnableComponent::OwnershipTransferred",
       },
       {
-        name: "assets",
-        type: "auto_swappr::base::types::Assets",
-        kind: "data",
+        kind: "nested",
+        name: "OwnershipTransferStarted",
+        type: "openzeppelin_access::ownable::ownable::OwnableComponent::OwnershipTransferStarted",
       },
+    ],
+  },
+  {
+    kind: "struct",
+    name: "openzeppelin_upgrades::upgradeable::UpgradeableComponent::Upgraded",
+    type: "event",
+    members: [
       {
-        name: "block_timestamp",
-        type: "core::integer::u64",
         kind: "data",
+        name: "class_hash",
+        type: "core::starknet::class_hash::ClassHash",
       },
     ],
   },
   {
+    kind: "enum",
+    name: "openzeppelin_upgrades::upgradeable::UpgradeableComponent::Event",
     type: "event",
-    name: "auto_swappr::autoswappr::AutoSwappr::OperatorAdded",
+    variants: [
+      {
+        kind: "nested",
+        name: "Upgraded",
+        type: "openzeppelin_upgrades::upgradeable::UpgradeableComponent::Upgraded",
+      },
+    ],
+  },
+  {
     kind: "struct",
+    name: "auto_swappr::components::operator::OperatorComponent::OperatorAdded",
+    type: "event",
     members: [
       {
+        kind: "data",
         name: "operator",
         type: "core::starknet::contract_address::ContractAddress",
-        kind: "data",
       },
       {
+        kind: "data",
         name: "time_added",
         type: "core::integer::u64",
-        kind: "data",
       },
     ],
   },
   {
-    type: "event",
-    name: "auto_swappr::autoswappr::AutoSwappr::OperatorRemoved",
     kind: "struct",
+    name: "auto_swappr::components::operator::OperatorComponent::OperatorRemoved",
+    type: "event",
     members: [
       {
+        kind: "data",
         name: "operator",
         type: "core::starknet::contract_address::ContractAddress",
-        kind: "data",
       },
       {
+        kind: "data",
         name: "time_removed",
         type: "core::integer::u64",
-        kind: "data",
       },
     ],
   },
   {
-    type: "event",
-    name: "auto_swappr::autoswappr::AutoSwappr::Event",
     kind: "enum",
+    name: "auto_swappr::components::operator::OperatorComponent::Event",
+    type: "event",
     variants: [
       {
-        name: "OwnableEvent",
-        type: "openzeppelin_access::ownable::ownable::OwnableComponent::Event",
-        kind: "flat",
+        kind: "nested",
+        name: "OperatorAdded",
+        type: "auto_swappr::components::operator::OperatorComponent::OperatorAdded",
       },
       {
-        name: "UpgradeableEvent",
-        type: "openzeppelin_upgrades::upgradeable::UpgradeableComponent::Event",
-        kind: "flat",
+        kind: "nested",
+        name: "OperatorRemoved",
+        type: "auto_swappr::components::operator::OperatorComponent::OperatorRemoved",
       },
+    ],
+  },
+  {
+    kind: "enum",
+    name: "auto_swappr::autoswappr::AutoSwappr::Event",
+    type: "event",
+    variants: [
       {
+        kind: "nested",
         name: "SwapSuccessful",
         type: "auto_swappr::autoswappr::AutoSwappr::SwapSuccessful",
-        kind: "nested",
       },
       {
+        kind: "nested",
         name: "Subscribed",
         type: "auto_swappr::autoswappr::AutoSwappr::Subscribed",
-        kind: "nested",
       },
       {
+        kind: "nested",
         name: "Unsubscribed",
         type: "auto_swappr::autoswappr::AutoSwappr::Unsubscribed",
-        kind: "nested",
       },
       {
-        name: "OperatorAdded",
-        type: "auto_swappr::autoswappr::AutoSwappr::OperatorAdded",
         kind: "nested",
+        name: "FeeTypeChanged",
+        type: "auto_swappr::autoswappr::AutoSwappr::FeeTypeChanged",
       },
       {
-        name: "OperatorRemoved",
-        type: "auto_swappr::autoswappr::AutoSwappr::OperatorRemoved",
-        kind: "nested",
+        kind: "flat",
+        name: "OwnableEvent",
+        type: "openzeppelin_access::ownable::ownable::OwnableComponent::Event",
+      },
+      {
+        kind: "flat",
+        name: "UpgradeableEvent",
+        type: "openzeppelin_upgrades::upgradeable::UpgradeableComponent::Event",
+      },
+      {
+        kind: "flat",
+        name: "OperatorEvent",
+        type: "auto_swappr::components::operator::OperatorComponent::Event",
       },
     ],
   },
diff --git a/app/components/address.tsx b/app/components/address.tsx
index 313f6b5..df97656 100644
--- a/app/components/address.tsx
+++ b/app/components/address.tsx
@@ -1,40 +1,45 @@
 "use client";
+import { useState, useEffect } from "react";
 import { useAccount } from "@starknet-react/core";
-import { MoreVertical } from "lucide-react";
-import { useState } from "react";
 import { shortenAddress } from "../utils/helper";
 import DisconnectModal from "./ui/modals/disconnect-wallet-modal";
+import { getUserStrkBalance } from "@/services/getUserStrkBalance";
 
 export default function Address() {
   const [isModalOpen, setIsModalOpen] = useState(false);
-  const { address } = useAccount();
+  const { address, account } = useAccount();
+  const [balance, setBalance] = useState(0);
+  useEffect(() => {
+    const fetchBalance = async () => {
+      if (!address || !account) {
+        setBalance(0);
+        return;
+      }
+
+      const balanceValue = await getUserStrkBalance(address, account);
+      setBalance(Number(balanceValue.toFixed(2)));
+    };
+    fetchBalance();
+  }, [address, account]);
 
   return (
     <div className="flex items-center gap-2 sm:gap-4 text-[#F3F5FF] leading-6 text-sm font-semibold">
-      {/* {isModalOpen &&
-        createPortal(
-          <DisconnectModal handleClose={() => setIsModalOpen(false)} />,
-          document.body
-        )} */}
       <DisconnectModal
         open={isModalOpen}
         onOpenChange={() => setIsModalOpen((prev) => !prev)}
       />
-      <div className="flex bg-[#0D1016] md:bg-opacity-[64%] items-center gap-2 px-[14px] py-3 rounded-lg min-w-[164px] justify-center text-sm">
+      <div className="flex bg-[#0D1016] md:bg-opacity-[64%] items-center gap-2 px-[14px] py-4 rounded-lg min-w-[164px] justify-center text-sm">
         <img
-          src="/coin-logos/usdt-logo.svg"
+          src="/coin-logos/strk-logo.svg"
           alt="USDT icon"
           className="w-5 h-5"
         />
-        <span>USDT: $114.00</span>
+        <span>STRK: {balance}</span>
       </div>
 
-      <div className="flex bg-[#0D1016] md:bg-opacity-[64%] items-center gap-2 px-[14px] py-3 rounded-lg text-sm">
+      <div className="flex bg-[#0D1016] md:bg-opacity-[64%] items-center gap-2 px-[14px] py-4 rounded-lg text-sm cursor-pointer" onClick={() => setIsModalOpen(true)}>
         <img src="/user.svg" alt="" className="w-5 h-5" />
         <span>{address ? shortenAddress(address) : ""}</span>
-        <button type="button" onClick={() => setIsModalOpen(true)}>
-          <MoreVertical className="w-4 h-4 text-gray-400" />
-        </button>
       </div>
     </div>
   );
diff --git a/app/components/layout/sections/landing-hero-section.tsx b/app/components/layout/sections/landing-hero-section.tsx
index b6c9dcf..9716d4d 100644
--- a/app/components/layout/sections/landing-hero-section.tsx
+++ b/app/components/layout/sections/landing-hero-section.tsx
@@ -37,7 +37,7 @@ function LandingHeroSection() {
             </p>
             <button
               type="button"
-              className="flex gap-1 items-center justify-center py-3 md:py-3 w-[70%] md:w-[230px] border border-[#4C5053] rounded-lg md:text-base font-semibold md:leading-[22px] text-[#F3F5FF] text-sm leading-5 bg-[#1D8CF4]"
+              className="flex gap-1 items-center justify-center py-3 w-fit px-6 md:py-3 border border-[#4C5053] rounded-lg md:text-base font-semibold md:leading-[22px] text-[#F3F5FF] text-sm leading-5 bg-[#1D8CF4]"
               onClick={() => {
                 if (!address) {
                   setIsConnecting(true);
diff --git a/app/components/layout/sections/what-is-autoswappr.tsx b/app/components/layout/sections/what-is-autoswappr.tsx
index 2193e3d..b7f3263 100644
--- a/app/components/layout/sections/what-is-autoswappr.tsx
+++ b/app/components/layout/sections/what-is-autoswappr.tsx
@@ -1,30 +1,63 @@
+"use client";
+
 import React from "react";
+import { motion } from "framer-motion";
 
 export default function WhatIsAutoSwapper() {
+  const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.2,
+        delayChildren: 0.1,
+      },
+    },
+  };
+
+  const itemVariants = {
+    hidden: { 
+      opacity: 0, 
+      y: 30 
+    },
+    visible: { 
+      opacity: 1, 
+      y: 0,
+      transition: {
+        duration: 0.6,
+        ease: [0.22, 1, 0.36, 1],
+      },
+    },
+  };
+
   return (
-    <div className="px-6 md:px-[74px] py-10 text-center">
-      <h2 className="text-xl md:text-[32px] font-semibold text-[#F3F5FF] mb-3 md:mb-6 ">
-        WTH is autoswappr?
-      </h2>
-      <div className="flex md:flex-row flex-col gap-y-5 gap-x-5 justify-center items-stretch text-xs md:text-base leading-5 md:leading-6 text-[#DCDFE1]">
-        <div className="w-full md:max-w-[380px] flex items-center">
-          <p>
-            Autoswappr automatically converts any STRK tokens you receive into
-            USDT — a stable token that holds its value. This means you
-            won&apos;t have to worry about missing the right time to convert,
-            especially if you&apos;re not notified right away when STRK hits
-            your wallet.
-          </p>
-        </div>
-        <div className="w-full md:w-[2px] rounded-lg h-[3px] bg-[#1E2021]" />
-        <div className="w-full md:max-w-[380px] flex items-center">
-          <p>
-            It runs in the background, so you don&apos;t have to do anything
-            manually. Your transactions are secured with advanced technology
-            that protects your funds and personal data from fraud or hacking.
+    <section className="px-6 md:px-[74px] py-16 md:py-24">
+      <motion.div
+        className="max-w-4xl mx-auto text-center"
+        initial="hidden"
+        whileInView="visible"
+        viewport={{ once: true, margin: "-100px" }}
+        variants={containerVariants}
+      >
+        {/* Heading */}
+        <motion.h2
+          className="text-4xl md:text-6xl font-semibold text-[#F3F5FF] mb-8 md:mb-12"
+          variants={itemVariants}
+        >
+          What is Autoswappr?
+        </motion.h2>
+
+        <motion.div
+          className="max-w-3xl mx-auto"
+          variants={itemVariants}
+        >
+          <p className="text-xl md:text-2xl leading-relaxed text-[#DCDFE1]">
+            Autoswappr automatically converts your STRK tokens into USDT — a stable token that holds its value. 
+            It runs seamlessly in the background, so you never have to worry about missing the right time to convert. 
+            Your transactions are secured with advanced technology that protects your funds and personal data.
           </p>
-        </div>
-      </div>
-    </div>
+        </motion.div>
+      </motion.div>
+    </section>
   );
 }
diff --git a/app/components/layout/sections/why-autoswappr.tsx b/app/components/layout/sections/why-autoswappr.tsx
index cca94ce..e7a0117 100644
--- a/app/components/layout/sections/why-autoswappr.tsx
+++ b/app/components/layout/sections/why-autoswappr.tsx
@@ -1,72 +1,161 @@
+"use client";
+
+import React from "react";
+import { motion } from "framer-motion";
+
+interface FeatureCardProps {
+  image: string;
+  title: string;
+  description: string;
+  variants: any;
+}
+
 const FeatureCard = ({
   image,
   title,
   description,
-}: {
-  image: string;
-  title: string;
-  description: string;
-}) => (
-  <div className="py-6 flex flex-col items-center text-center md:items-start md:text-left">
-    <img src={image} className="w-[350px] md:w-auto mb-7 md:mb-[60px]" alt="" />
-    <div className="max-w-[360px] py-4">
-      <h5 className="mb-3 md:mb-4 text-[#F3F5FF] text-sm md:text-xl font-medium">
+  variants,
+}: FeatureCardProps) => (
+  <motion.div
+    className="flex flex-col items-center text-center"
+    variants={variants}
+  >
+    <div className="mb-8 md:mb-12">
+      <img
+        src={image}
+        className="w-full"
+        alt={`${title} illustration`}
+      />
+    </div>
+    <div className="max-w-md">
+      <h3 className="text-2xl md:text-3xl font-semibold text-[#F3F5FF] mb-4 md:mb-6">
         {title}
-      </h5>
-      <p className="text-xs md:text-sm text-[#DCDFE1] h-[60px]">
+      </h3>
+      <p className="text-base md:text-lg leading-relaxed text-[#DCDFE1]">
         {description}
       </p>
     </div>
-  </div>
+  </motion.div>
 );
 
-const Divider = () => (
-  <div
-    className="hidden lg:flex w-[2px] h-[235px] bg-[#1E2021] rounded-full"
+const Divider = ({ variants }: { variants: any }) => (
+  <motion.div
+    className="hidden lg:flex w-[2px] h-[300px] bg-gradient-to-b from-transparent via-[#1E2021] to-transparent"
     role="presentation"
     aria-hidden="true"
+    variants={variants}
   />
 );
 
-function WhyAutoSwappr() {
+export default function WhyAutoSwappr() {
+  const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.15,
+        delayChildren: 0.1,
+      },
+    },
+  };
+
+  const itemVariants = {
+    hidden: {
+      opacity: 0,
+      y: 40,
+    },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: {
+        duration: 0.6,
+        ease: [0.22, 1, 0.36, 1],
+      },
+    },
+  };
+
+  const cardVariants = {
+    hidden: {
+      opacity: 0,
+      y: 50,
+    },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: {
+        duration: 0.7,
+        ease: [0.22, 1, 0.36, 1],
+      },
+    },
+  };
+
+  const features = [
+    {
+      image: "/dot-pattern-1.svg",
+      title: "Security",
+      description:
+        "Security is at the core of Autoswappr. Your assets are protected by audited smart contracts and industry-best practices at every step.",
+    },
+    {
+      image: "/dot-pattern-2.svg",
+      title: "Transparency",
+      description:
+        "Every transaction is verifiable on-chain. You have full visibility into your swaps and can track all activities with complete transparency.",
+    },
+    {
+      image: "/dot-pattern-3.svg",
+      title: "Efficiency",
+      description:
+        "Automated swaps execute instantly when conditions are met. No manual intervention needed — save time while maximizing your token value.",
+    },
+  ];
+
   return (
-    <div className="md:py-[60px] py-10 px-6 md:px-[75px]">
-      <h2 className="text-xl md:text-[32px] text-center md:text-left font-semibold text-[#F3F5FF] mb-3 md:mb-4">
-        Why AutoSwappr?
-      </h2>
-      <div className="flex gap-x-3 text-center">
-        <div className="py-2 px-4 border border-[#1E2021] rounded-lg text-sm bg-[#1E2021] text-[#F3F5FF] flex-1 md:flex-none">
-          Security
-        </div>
-        <div className="py-2 px-4 border border-[#1E2021] rounded-lg text-sm text-[#F3F5FF] flex-1 md:flex-none">
-          Transparency
-        </div>
-        <div className="py-2 px-4 border border-[#1E2021] rounded-lg text-sm text-[#F3F5FF] flex-1 md:flex-none">
-          Efficiency
-        </div>
-      </div>
+    <section className="px-6 md:px-[74px] py-16 md:py-24">
+      <motion.div
+        className="max-w-7xl mx-auto"
+        initial="hidden"
+        whileInView="visible"
+        viewport={{ once: true, margin: "-100px" }}
+        variants={containerVariants}
+      >
+        <motion.h2
+          className="text-4xl md:text-6xl font-semibold text-[#F3F5FF] text-center mb-12 md:mb-16"
+          variants={itemVariants}
+        >
+          Why AutoSwappr?
+        </motion.h2>
 
-      <div className="grid grid-cols-[1fr] lg:grid-cols-[1fr_auto_1fr_auto_1fr] mt-7 md:mt-[68px] items-end gap-x-[52px]">
-        <FeatureCard
-          image="/dot-pattern-1.svg"
-          title="Security"
-          description="Security is at the core of Autoswappr. Your assets are protected by audited smart contracts and industry-best practices at every step."
-        />
-        <Divider />
-        <FeatureCard
-          image="/dot-pattern-2.svg"
-          title="Transparency"
-          description="Fill out the short form by inputting the amount of STRK tokens you want to automatically swap to USDT."
-        />
-        <Divider />
-        <FeatureCard
-          image="/dot-pattern-3.svg"
-          title="Efficiency"
-          description="Security is at the core of Autoswappr. Your assets are protected by audited smart contracts and industry-best practices at every step."
-        />
-      </div>
-    </div>
+        <motion.div
+          className="flex flex-wrap justify-center gap-3 md:gap-4 mb-12 md:mb-20"
+          variants={itemVariants}
+        >
+          {features.map((feature, index) => (
+            <div
+              key={feature.title}
+              className="px-4 md:px-6 py-2 md:py-3 border border-[#1E2021] rounded-full text-xs md:text-lg font-medium text-[#F3F5FF] bg-[#1E2021]/50 backdrop-blur-sm transition-all hover:border-[#1D8CF4]/50 hover:bg-[#1E2021]"
+            >
+              {feature.title}
+            </div>
+          ))}
+        </motion.div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-12 md:gap-5 items-start">
+          {features.map((feature, index) => (
+            <React.Fragment key={feature.title}>
+              <FeatureCard
+                image={feature.image}
+                title={feature.title}
+                description={feature.description}
+                variants={cardVariants}
+              />
+              {index < features.length - 1 && (
+                <Divider variants={itemVariants} />
+              )}
+            </React.Fragment>
+          ))}
+        </div>
+      </motion.div>
+    </section>
   );
 }
-
-export default WhyAutoSwappr;
diff --git a/app/components/navbar.tsx b/app/components/navbar.tsx
index fd4aa54..9bf389a 100644
--- a/app/components/navbar.tsx
+++ b/app/components/navbar.tsx
@@ -16,66 +16,124 @@ export default function Navbar() {
   const [isConnecting, setIsConnecting] = useState(false);
   const { address } = useAccount();
 
+  const handleConnectClick = () => {
+    setIsConnecting(true);
+    setIsMenuOpen(false);
+  };
+
+  const handleCloseConnect = () => {
+    setIsConnecting(false);
+  };
+
   return (
-    <nav className="fixed top-0 left-0 w-full bg-transparent backdrop-blur-sm pl-6 md:pl-0 pr-6 md:pr-[80px] z-50 py-[14px] flex items-center justify-between">
-      <ConnectWallet
-        open={isConnecting}
-        onOpenChange={() => setIsConnecting((prev) => !prev)}
-      />
+    <>
+      <ConnectWallet open={isConnecting} onOpenChange={handleCloseConnect} />
+
       {isMenuOpen &&
         createPortal(
           <MobileMenu
             navLinks={navLinks}
             closeMenu={() => setIsMenuOpen(false)}
-            toggleConnectModal={() => setIsConnecting((prev) => !prev)}
+            toggleConnectModal={handleConnectClick}
           />,
           document.body
         )}
 
-      <div
-        className={`md:bg-[#0D1016] md:rounded-[0_16px_16px_0] px-0 md:px-[80px] flex items-center lg:min-w-[800px] ${!address && "md:py-[15px]"}`}
+      <nav
+        className="fixed top-0 left-0 right-0 z-50 
+                   bg-transparent backdrop-blur-md 
+                   px-4 sm:px-6 md:px-12 lg:px-20 
+                   py-3 md:py-6"
       >
-        <Link href={"/"} className="cursor-pointer">
-          <img
-            src="/auto-swappr-logo.svg"
-            className="md:w-[85px] md:h-[48px] h-10 w-[64px]"
-            alt=""
-          />
-        </Link>
+        <div className="max-w-[1920px] mx-auto flex items-center justify-between relative">
+          <div className="flex items-center flex-shrink-0">
+            <div className="md:rounded-r-2xl md:pr-12 lg:pr-20">
+              <Link
+                href="/"
+                className="flex-shrink-0 transition-opacity hover:opacity-80 
+                           focus:outline-none focus:ring-2 focus:ring-accent focus:ring-offset-2 
+                           focus:ring-offset-[#02060D] rounded-lg"
+                aria-label="AutoSwappr Home"
+              >
+                <img
+                  src="/auto-swappr-logo.svg"
+                  className="h-10 w-auto md:h-12 md:w-[85px] 
+                             object-contain transition-transform hover:scale-105"
+                  alt="AutoSwappr Logo"
+                  width={85}
+                  height={48}
+                />
+              </Link>
+            </div>
+          </div>
 
-        {address && (
-          <ul className="hidden md:flex items-center gap-4 w-[700px] justify-center py-7">
-            {navLinks.map((link, i) => (
-              <li key={link.title} className="flex gap-4 items-center">
-                <Link
-                  href={link.href}
-                  className={`text-sm md:text-base  hover:text-[#F3F5FF] transition-all ease-in-out duration-300 ${pathname === link.href ? "text-[#F3F5FF]" : "text-[#7E8489]"}`}
-                >
-                  {link.title}
-                </Link>
-                {i + 1 !== navLinks.length && (
-                  <span className="w-[3px] h-3 rounded-lg bg-[#2C3035]" />
-                )}
-              </li>
-            ))}
-          </ul>
-        )}
-      </div>
+          {address && (
+            <nav
+              className="hidden md:flex bg-[#0D10163D] items-center absolute left-1/2 -translate-x-1/2 border border-gray-300/20 py-4 px-6 rounded-xl "
+              aria-label="Main navigation"
+            >
+              <ul className="flex items-center gap-6 lg:gap-8">
+                {navLinks.map((link, index) => (
+                  <li key={link.href} className="flex items-center">
+                    <Link
+                      href={link.href}
+                      className={`relative text-sm lg:text-base font-medium
+                                 transition-all duration-300 ease-in-out
+                                 px-2 py-1 rounded-md
+                                 ${
+                                   pathname === link.href
+                                     ? "text-[#F3F5FF]"
+                                     : "text-grey-700 hover:text-[#F3F5FF]"
+                                 }
+                                 hover:bg-grey-1100/30`}
+                      aria-current={pathname === link.href ? "page" : undefined}
+                    >
+                      {link.title}
+                      {pathname === link.href && (
+                        <span
+                          className="absolute bottom-0 left-1/2 -translate-x-1/2 
+                                   w-1 h-1 bg-accent rounded-full"
+                          aria-hidden="true"
+                        />
+                      )}
+                    </Link>
 
-      {/* Connect Wallet Button */}
-      <div className="hidden md:flex items-center">
-        <WalletBar toggleModal={() => setIsConnecting(true)} />
-      </div>
+                    {index < navLinks.length - 1 && (
+                      <span
+                        className="mx-4 w-[3px] h-3 rounded-full bg-grey-1100/50"
+                        aria-hidden="true"
+                      />
+                    )}
+                  </li>
+                ))}
+              </ul>
+            </nav>
+          )}
 
-      {/* Mobile Menu Button */}
-      <button
-        type="button"
-        className="md:hidden p-2 text-white"
-        onClick={() => setIsMenuOpen((prev) => !prev)}
-        aria-label="Toggle menu"
-      >
-        {isMenuOpen ? <X size={24} /> : <Menu size={24} />}
-      </button>
-    </nav>
+          <div className="flex items-center gap-4 flex-shrink-0">
+            <div className="hidden md:flex items-center">
+              <WalletBar toggleModal={handleConnectClick} />
+            </div>
+
+            <button
+              type="button"
+              className="md:hidden p-2.5 rounded-lg
+                         text-[#F3F5FF] hover:bg-grey-1100/40
+                         transition-colors duration-200
+                         active:scale-95"
+              onClick={() => setIsMenuOpen((prev) => !prev)}
+              aria-label={isMenuOpen ? "Close menu" : "Open menu"}
+              aria-expanded={isMenuOpen}
+            >
+              {isMenuOpen ? (
+                <X size={24} className="transition-transform" />
+              ) : (
+                <Menu size={24} className="transition-transform" />
+              )}
+            </button>
+          </div>
+        </div>
+      </nav>
+    </>
   );
 }
diff --git a/app/components/starknet-provider.tsx b/app/components/starknet-provider.tsx
index 817fddd..d1c77d1 100644
--- a/app/components/starknet-provider.tsx
+++ b/app/components/starknet-provider.tsx
@@ -1,7 +1,7 @@
 "use client";
 import React from "react";
 
-import { sepolia } from "@starknet-react/chains";
+import { mainnet } from "@starknet-react/chains";
 import {
   StarknetConfig,
   argent,
@@ -23,7 +23,7 @@ export function StarknetProvider({ children }: { children: React.ReactNode }) {
 
   return (
     <StarknetConfig
-      chains={[sepolia]}
+      chains={[mainnet]}
       provider={jsonRpcProvider({
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         rpc: () => ({ nodeUrl: process.env.NEXT_PUBLIC_RPC_URL }),
diff --git a/app/components/ui/modals/change-autoswap-settings.tsx b/app/components/ui/modals/change-autoswap-settings.tsx
index 2ac2182..7e5c5d0 100644
--- a/app/components/ui/modals/change-autoswap-settings.tsx
+++ b/app/components/ui/modals/change-autoswap-settings.tsx
@@ -1,27 +1,71 @@
-import { useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { EditIcon } from "lucide-react";
 import GrantPermission from "./grant-permission-modal";
 import { useSubscription } from "../../../hooks/useSubscription";
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../dialog";
 
+interface ChangeAutoswapSettingsProps {
+  open: boolean;
+  onOpenChange: () => void;
+  currentAllowance: number;
+  isLoadingAllowance: boolean;
+  allowanceError?: Error | null;
+  onAllowanceRefresh: () => void;
+}
+
 export default function ChangeAutoswapSettings({
   open,
   onOpenChange,
-}: {
-  onOpenChange: () => void;
-  open: boolean;
-}) {
+  currentAllowance,
+  isLoadingAllowance,
+  allowanceError,
+  onAllowanceRefresh,
+}: ChangeAutoswapSettingsProps) {
   const [newSwapAmount, setNewSwapAmount] = useState("");
+  const [isGrantPermissionLoading, setIsGrantPermissionLoading] =
+    useState(false);
+
+  const {
+    isPermissionModalOpen,
+    setIsPermissionModalOpen,
+    handleSubscribe,
+  } = useSubscription(newSwapAmount, {
+    onSuccess: () => {
+      onAllowanceRefresh();
+      onOpenChange();
+      setNewSwapAmount("");
+    },
+  });
+
+  useEffect(() => {
+    if (!open) return;
+    if (currentAllowance && currentAllowance > 0) {
+      setNewSwapAmount(Math.floor(currentAllowance).toString());
+    } else {
+      setNewSwapAmount("");
+    }
+  }, [open, currentAllowance]);
 
-  const { isPermissionModalOpen, setIsPermissionModalOpen, handleSubscribe } =
-    useSubscription(newSwapAmount);
+  const isApplyDisabled = useMemo(() => {
+    if (!newSwapAmount) return true;
+    const parsedValue = Number(newSwapAmount);
+    return Number.isNaN(parsedValue) || parsedValue <= 0;
+  }, [newSwapAmount]);
 
   return (
     <>
       <GrantPermission
         onOpenChange={() => setIsPermissionModalOpen((prev) => !prev)}
         open={isPermissionModalOpen}
-        handleSubmit={handleSubscribe}
+        handleSubmit={async () => {
+          setIsGrantPermissionLoading(true);
+          try {
+            await handleSubscribe();
+          } finally {
+            setIsGrantPermissionLoading(false);
+          }
+        }}
+        isSubmitting={isGrantPermissionLoading}
       />
 
       <Dialog open={open} onOpenChange={onOpenChange}>
@@ -40,13 +84,29 @@ export default function ChangeAutoswapSettings({
                 <p className="mb-2 text-[#CBCFD2] text-[13px]">
                   Current threshold amount:
                 </p>
-                <div className="bg-[#0B0F16] py-3 flex gap-x-2 justify-center items-center text-base font-bold text-[#7E8489] rounded-xl">
+                <div className="bg-[#0B0F16] py-3 flex gap-x-2 justify-center items-center text-base font-bold text-[#7E8489] rounded-xl min-h-[48px]">
                   <img
                     src="/coin-logos/strk-logo.svg"
                     className="w-5 h-5"
                     alt=""
                   />
-                  3000 STRK
+                  {isLoadingAllowance ? (
+                    <span className="text-sm text-[#CBCFD2]">
+                      Fetching allowance...
+                    </span>
+                  ) : allowanceError ? (
+                    <span className="text-sm text-red-400">
+                      Unable to load allowance
+                    </span>
+                  ) : (
+                    <span>
+                      {currentAllowance.toLocaleString(undefined, {
+                        maximumFractionDigits: 2,
+                        minimumFractionDigits: 0,
+                      })}{" "}
+                      STRK
+                    </span>
+                  )}
                 </div>
               </div>
 
@@ -61,7 +121,11 @@ export default function ChangeAutoswapSettings({
                     className="bg-transparent w-full text-sm p-1 placeholder:text-grey-900 text-white border-none focus:outline-none"
                     placeholder="e.g.: 294839 STRK"
                     value={newSwapAmount}
-                    onChange={(e) => setNewSwapAmount(e.target.value)}
+                    onChange={(e) => {
+                      const rawValue = e.target.value;
+                      const sanitizedValue = rawValue.replace(/[^\d]/g, "");
+                      setNewSwapAmount(sanitizedValue);
+                    }}
                     required
                   />
                   <EditIcon size={14} />
@@ -71,11 +135,11 @@ export default function ChangeAutoswapSettings({
             <button
               type="submit"
               id="submit"
-              className="disabled:bg-[#0D1016] bg-[#1D8CF4] border-[#1E2021] border-[1px] text-xs md:text-sm text-[#F3F5FF] py-3 w-full rounded-lg font-semibold mt-10 disabled:cursor-not-allowed transition-all duration-300 ease-in-out disabled:cursor-not-allowed"
-              disabled={!newSwapAmount || !Number(newSwapAmount)}
+              className="disabled:bg-[#0D1016] bg-[#1D8CF4] border-[#1E2021] border-[1px] text-xs md:text-sm text-[#F3F5FF] py-3 w-full rounded-lg font-semibold mt-10 disabled:cursor-not-allowed transition-all duration-300 ease-in-out"
+              disabled={isApplyDisabled}
               onClick={(e) => {
                 e.preventDefault();
-                if (newSwapAmount && Number(newSwapAmount)) {
+                if (!isApplyDisabled) {
                   setIsPermissionModalOpen(true);
                 }
               }}
diff --git a/app/components/ui/modals/connect-wallet-modal.tsx b/app/components/ui/modals/connect-wallet-modal.tsx
index d04b1e5..80b50bf 100644
--- a/app/components/ui/modals/connect-wallet-modal.tsx
+++ b/app/components/ui/modals/connect-wallet-modal.tsx
@@ -6,7 +6,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from "../dialog";
-import { useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { useConnect, type Connector } from "@starknet-react/core";
 import Image from "next/image";
 import { walletDetails } from "@/app/utils/data";
@@ -19,9 +19,53 @@ interface ConnectWalletModalProps {
 export function ConnectWallet({ open, onOpenChange }: ConnectWalletModalProps) {
   const { connect, connectors } = useConnect();
   const [selectedConnector, setSelectedConnector] = useState<Connector | null>(
-    null
+    null,
   );
 
+  const MAINNET_CHAIN_ID = "SN_MAIN";
+
+  const supportsMainnet = (connector: Connector) => {
+    const connectorWithChains = connector as Connector & {
+      availableChains?: unknown;
+    };
+    const chains = connectorWithChains.availableChains;
+
+    if (!Array.isArray(chains) || chains.length === 0) {
+      return true;
+    }
+
+    return chains.some((chain) => {
+      if (typeof chain === "string") {
+        return chain === MAINNET_CHAIN_ID;
+      }
+      if (
+        chain &&
+        typeof chain === "object" &&
+        "id" in chain &&
+        typeof (chain as { id: unknown }).id === "string"
+      ) {
+        return (chain as { id: string }).id === MAINNET_CHAIN_ID;
+      }
+      return false;
+    });
+  };
+
+  const availableConnectors = useMemo(
+    () => connectors.filter(supportsMainnet),
+    [connectors],
+  );
+
+  useEffect(() => {
+    if (
+      selectedConnector &&
+      !availableConnectors.some(
+        (connector) => connector.id === selectedConnector.id,
+      )
+    ) {
+      setSelectedConnector(null);
+    }
+  }, [availableConnectors, selectedConnector]);
+
   const handleConnect = () => {
     if (!selectedConnector) return;
 
@@ -50,48 +94,56 @@ export function ConnectWallet({ open, onOpenChange }: ConnectWalletModalProps) {
             Connect Wallet
           </DialogTitle>
           <DialogDescription className="text-[#BABFC3] mt-2 mb-6 text-xs md:text-sm text-center max-w-[75%] mx-auto">
-            Choose a wallet you want to connect to Auto-swapper
+            Choose a wallet you want to connect to Auto-swapper. Only Starknet
+            Mainnet is supported.
           </DialogDescription>
         </DialogHeader>
         <section className="gap-y-4 flex flex-col items-center">
-          {connectors.map((connector) => {
-            const details = getWalletDetails(connector);
-            const isSelected = selectedConnector?.id === connector.id;
+          {availableConnectors.length === 0 ? (
+            <div className="text-[#BABFC3] text-xs md:text-sm text-center max-w-[280px]">
+              No compatible wallets detected for Starknet Mainnet. Please install
+              or enable a wallet that supports mainnet.
+            </div>
+          ) : (
+            availableConnectors.map((connector) => {
+              const details = getWalletDetails(connector);
+              const isSelected = selectedConnector?.id === connector.id;
 
-            return (
-              <button
-                type="button"
-                key={connector.id}
-                onClick={(e) => {
-                  e.stopPropagation();
-                  if (isSelected) {
-                    setSelectedConnector(null);
-                  } else {
-                    setSelectedConnector(connector);
-                  }
-                }}
-                className={`w-full sm:w-[264px] flex items-center py-2 px-12 rounded-[8px] border gap-4
+              return (
+                <button
+                  type="button"
+                  key={connector.id}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    if (isSelected) {
+                      setSelectedConnector(null);
+                    } else {
+                      setSelectedConnector(connector);
+                    }
+                  }}
+                  className={`w-full sm:w-[264px] flex items-center py-2 px-12 rounded-[8px] border gap-4
                 ${isSelected ? "border-[#1D8CF4]" : "border-[#1E2021]"}
                 hover:border-[#1D8CF4] transition-colors`}
-              >
-                <Image
-                  src={details.icon}
-                  alt={details.name}
-                  width={28}
-                  height={28}
-                  className="rounded-full"
-                />
-                <div className="flex flex-col">
-                  <span className="text-[#F3F5FF] text-sm md:text-base leading-[22px]">
-                    {details.name}
-                  </span>
-                  <span className="text-xs font-semibold text-[#4C5053]">
-                    {details.subtext}
-                  </span>
-                </div>
-              </button>
-            );
-          })}
+                >
+                  <Image
+                    src={details.icon}
+                    alt={details.name}
+                    width={28}
+                    height={28}
+                    className="rounded-full"
+                  />
+                  <div className="flex flex-col">
+                    <span className="text-[#F3F5FF] text-sm md:text-base leading-[22px]">
+                      {details.name}
+                    </span>
+                    <span className="text-xs font-semibold text-[#4C5053]">
+                      {details.subtext}
+                    </span>
+                  </div>
+                </button>
+              );
+            })
+          )}
 
           <button
             type="button"
diff --git a/app/components/ui/modals/grant-permission-modal.tsx b/app/components/ui/modals/grant-permission-modal.tsx
index 54ebe05..55a2905 100644
--- a/app/components/ui/modals/grant-permission-modal.tsx
+++ b/app/components/ui/modals/grant-permission-modal.tsx
@@ -5,12 +5,14 @@ interface GrantPermissionProps {
   open: boolean;
   onOpenChange: () => void;
   handleSubmit: () => void;
+  isSubmitting: boolean;
 }
 
 export default function GrantPermission({
   open,
   onOpenChange,
   handleSubmit,
+  isSubmitting,
 }: GrantPermissionProps) {
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
@@ -31,22 +33,48 @@ export default function GrantPermission({
             wallet, so they can automatically be swapped to your preferred
             stable base token. Do you wish to continue?
           </p>
-          <div className="items-center grid grid-cols-[1fr_1fr] gap-x-6 text-[#F3F5FF] text-xs md:text-sm">
-            <button
-              type="button"
-              className="py-3 rounded-lg border border-[#1E2021] bg-[#0D1016]"
-              onClick={onOpenChange}
-            >
-              Cancel
-            </button>
-            <button
-              type="button"
-              className="py-3 rounded-lg bg-[#1D8CF4]"
-              onClick={handleSubmit}
-            >
-              Yes, Continue
-            </button>
-          </div>
+          {isSubmitting ? (
+            <div className="flex flex-col items-center gap-3 py-6 text-[#F3F5FF] text-sm">
+              <svg
+                className="h-6 w-6 animate-spin text-[#1D8CF4]"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+              >
+                <circle
+                  className="opacity-25"
+                  cx="12"
+                  cy="12"
+                  r="10"
+                  stroke="currentColor"
+                  strokeWidth="4"
+                />
+                <path
+                  className="opacity-75"
+                  fill="currentColor"
+                  d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"
+                />
+              </svg>
+              <span>Waiting for wallet confirmation...</span>
+            </div>
+          ) : (
+            <div className="items-center grid grid-cols-[1fr_1fr] gap-x-6 text-[#F3F5FF] text-xs md:text-sm">
+              <button
+                type="button"
+                className="py-3 rounded-lg border border-[#1E2021] bg-[#0D1016]"
+                onClick={onOpenChange}
+              >
+                Cancel
+              </button>
+              <button
+                type="button"
+                className="py-3 rounded-lg bg-[#1D8CF4]"
+                onClick={handleSubmit}
+              >
+                Yes, Continue
+              </button>
+            </div>
+          )}
         </section>
       </DialogContent>
     </Dialog>
diff --git a/app/hooks/useSubscription.ts b/app/hooks/useSubscription.ts
index 80bf97f..c091c91 100644
--- a/app/hooks/useSubscription.ts
+++ b/app/hooks/useSubscription.ts
@@ -4,13 +4,21 @@ import { useRouter } from "next/navigation";
 import { useAccount } from "@starknet-react/core";
 import { STRK_TOKEN, USDT_TOKEN } from "../utils/data";
 import { swappr_contract_address } from "../utils/addresses";
-import { ERC20_ABI } from "../abis/erc20-abi";
+import { STRK_TOKEN_ABI } from "../abis/strk-abi";
 import { createSubscription, useContractWriteUtility } from "../utils/helper";
 
-export function useSubscription(swapAmount: string) {
+interface UseSubscriptionOptions {
+  onSuccess?: () => void;
+}
+
+export function useSubscription(
+  swapAmount: string,
+  options?: UseSubscriptionOptions
+) {
   const { address } = useAccount();
   const router = useRouter();
   const [isPermissionModalOpen, setIsPermissionModalOpen] = useState(false);
+  const onSuccess = options?.onSuccess;
 
   const { writeAsync, waitData } = useContractWriteUtility(
     "approve",
@@ -20,8 +28,8 @@ export function useSubscription(swapAmount: string) {
         ? BigInt(swapAmount) * BigInt(10 ** STRK_TOKEN.decimals)
         : BigInt(0),
     ],
-    ERC20_ABI,
-    STRK_TOKEN.contractAddress,
+    STRK_TOKEN_ABI,
+    STRK_TOKEN.contractAddress
   );
 
   useEffect(() => {
@@ -36,14 +44,18 @@ export function useSubscription(swapAmount: string) {
           swap_amount: Number(swapAmount),
         });
         setIsPermissionModalOpen(false);
-        router.push("/overview");
+        if (onSuccess) {
+          onSuccess();
+        } else {
+          router.push("/overview");
+        }
       } catch (error) {
         console.error("Subscription error:", error);
       }
     };
 
     subscribe();
-  }, [waitData, address, router, swapAmount]);
+  }, [waitData, address, router, swapAmount, onSuccess]);
 
   const handleSubscribe = useCallback(async () => {
     try {
diff --git a/app/layout.tsx b/app/layout.tsx
index 5e6e62d..37ff6f5 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,10 +1,34 @@
 import type { Metadata } from "next";
+import localFont from "next/font/local";
+import NextTopLoader from "nextjs-toploader";
 import "./globals.css";
 import Navbar from "./components/navbar";
 import { StarknetProvider } from "./components/starknet-provider";
 import Footer from "./components/footer";
 import { siteConfig } from "@/config/site";
 
+const creatoDisplay = localFont({
+  src: [
+    {
+      path: "../public/fonts/CreatoDisplay-Regular.otf",
+      weight: "400",
+      style: "normal",
+    },
+    {
+      path: "../public/fonts/CreatoDisplay-Medium.otf",
+      weight: "500",
+      style: "normal",
+    },
+    {
+      path: "../public/fonts/CreatoDisplay-Bold.otf",
+      weight: "700",
+      style: "normal",
+    },
+  ],
+  variable: "--font-creato-display",
+  display: "swap",
+});
+
 export const metadata: Metadata = {
   metadataBase: new URL(siteConfig.url.base),
   title: { default: siteConfig.name, template: `%s | ${siteConfig.name}` },
@@ -45,9 +69,17 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
+    <html lang="en" className={creatoDisplay.variable}>
       <StarknetProvider>
-        <body className="relative w-[100vw] h-fit overflow-x-hidden bg-[#02060D]">
+        <body className="relative w-[100vw] h-fit overflow-x-hidden bg-[#02060D] font-creato">
+          <NextTopLoader
+            color="#1d8cf4"
+            height={3}
+            showSpinner={false}
+            easing="ease"
+            speed={200}
+            shadow="0 0 10px #1d8cf4,0 0 5px #1d8cf4"
+          />
           <Navbar />
           <main className="relative h-full">{children}</main>
           <Footer />
diff --git a/app/overview/page.tsx b/app/overview/page.tsx
index e8b5907..c739fdd 100644
--- a/app/overview/page.tsx
+++ b/app/overview/page.tsx
@@ -1,62 +1,83 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useMemo } from "react";
 import { createPortal } from "react-dom";
 import { LoaderCircle, Settings } from "lucide-react";
-// import type { TokenPair } from "../utils/types";
-
+import { useAccount } from "@starknet-react/core";
 import SubscribeForm from "../components/subscribe-form";
 import LockBodyScroll from "../components/lock-body-scroll";
 import { Modal } from "../components/modal";
-
-// import usdt from "../../public/coin-logos/usdc-logo.svg";
-// import strk from "../../public/coin-logos/strk-logo.svg";
 import TranscationHistory from "./transcation-history";
 import ChangeAutoswapSettings from "../components/ui/modals/change-autoswap-settings";
 import STRKtoUSDTDisplay from "../components/strk-to-usd";
+import { useContractFetch } from "../utils/helper";
+import { STRK_TOKEN_ABI } from "../abis/strk-abi";
+import {
+  strk_token_contract_address,
+  swappr_contract_address,
+} from "../utils/addresses";
 
 export default function Overview() {
-  // State Management
   const [isFetchingSubs] = useState(false);
   const [settingsIsOpen, setSettingsIsOpen] = useState(false);
   const [isAddingToken, setIsAddingToken] = useState(false);
   const [isEditing, setIsEditing] = useState(false);
-  // const [tokenPairs, setTokenPairs] = useState<TokenPair[]>([]);
-  // const [selectedTokenPair] = useState<TokenPair | undefined>(undefined);
-  // Fetch subscriptions
-  // useEffect(() => {
-  //   if (!address) return;
-  // TODO: Implement Fetch Data
-  // const fetchData = async () => {
-  //   setIsFetchingSubs(true);
-  //   try {
-  //     const subs = await fetchSubscriptions(address);
-  //     if (!subs?.data?.length) {
-  //       router.push("/subscribe");
-  //       return;
-  //     }
-  //     setTokenPairs([
-  //       {
-  //         id: 1,
-  //         from: { name: "Starknet", symbol: "STRK", logo: strk },
-  //         to: { name: "Tether", symbol: "USDT", logo: usdt },
-  //         amount: subs.data[0].swap_amount,
-  //         timestamp: "10.09.2024 GMT 21:08 PM",
-  //         enabled: false,
-  //         edit: false,
-  //         delete: false,
-  //       },
-  //     ]);
-  //   } catch (err) {
-  //     console.error("Error fetching subscriptions:", err);
-  //   } finally {
-  //     setIsFetchingSubs(false);
-  //   }
-  // };
+  const { address } = useAccount();
+
+  const allowanceArgs = useMemo(() => {
+    const ZERO_ADDRESS =
+      "0x0000000000000000000000000000000000000000000000000000000000000000";
+    const ownerAddress =
+      (address as `0x${string}` | undefined) ?? (ZERO_ADDRESS as `0x${string}`);
+    return [ownerAddress, swappr_contract_address] as const;
+  }, [address]);
+
+  const {
+    data: allowanceData,
+    isLoading: isLoadingAllowance,
+    error: allowanceError,
+    refetch: refetchAllowance,
+  } = useContractFetch(
+    STRK_TOKEN_ABI,
+    "allowance",
+    strk_token_contract_address as `0x${string}`,
+    allowanceArgs as unknown as any[]
+  );
 
-  // fetchData();
-  // }, [address, router]);
+  // Convert allowance from wei to STRK (18 decimals)
+  const allowanceAmount = useMemo(() => {
+    if (!allowanceData) return 0;
+    try {
+      const normalizeToBigInt = (value: unknown): bigint => {
+        if (typeof value === "bigint") return value;
+        if (typeof value === "number") return BigInt(value);
+        if (typeof value === "string") return BigInt(value);
+        if (value && typeof value === "object") {
+          if ("low" in value && "high" in value) {
+            const low = normalizeToBigInt(
+              (value as { low: unknown; high: unknown }).low,
+            );
+            const high = normalizeToBigInt(
+              (value as { low: unknown; high: unknown }).high,
+            );
+            const shift = BigInt(2) ** BigInt(128);
+            return high * shift + low;
+          }
+          if ("toString" in value && typeof value.toString === "function") {
+            return BigInt(value.toString());
+          }
+        }
+        return BigInt(0);
+      };
 
+      const amount = normalizeToBigInt(allowanceData);
+      return Number(amount) / Math.pow(10, 18);
+    } catch (error) {
+      console.error("Error converting allowance:", error);
+      return 0;
+    }
+  }, [allowanceData]);
+ 
   return (
     <div className="sm:min-h-[100vh] pt-[100px] md:pt-[200px] text-[#F3F5FF] px-4 lg:px-[187px] min-h-[95vh] relative">
       <video
@@ -74,6 +95,14 @@ export default function Overview() {
           <ChangeAutoswapSettings
             open={settingsIsOpen}
             onOpenChange={() => setSettingsIsOpen((prev) => !prev)}
+            currentAllowance={allowanceAmount}
+            isLoadingAllowance={isLoadingAllowance}
+            allowanceError={
+              allowanceError instanceof Error ? allowanceError : null
+            }
+            onAllowanceRefresh={() => {
+              void refetchAllowance();
+            }}
           />,
           document.body
         )}
@@ -115,20 +144,37 @@ export default function Overview() {
               </p>
               
               <div className="bg-[#0D1016] rounded-xl w-full md:w-fit py-5 px-4 flex gap-x-8 justify-between">
-                <div className="flex gap-x-2">
+                <div className="flex items-start gap-x-2">
                   <img
                     src="/coin-logos/strk-logo.svg"
-                    className="mt-3 h-8 w-8"
+                    className="h-8 w-8"
                     alt=""
                   />
                   <div className="text-[#F3F5FF]">
-                    <h3 className="text-3xl leading-[54px] font-bold">
-                      3000 <span className="text-xs">STRK</span>
-                    </h3>
+                    {isLoadingAllowance ? (
+                      <div className="flex items-center gap-2">
+                        <LoaderCircle size={20} className="animate-spin" />
+                        <span className="text-sm text-[#DCDFE1]">Loading...</span>
+                      </div>
+                    ) : allowanceError ? (
+                      <div className="text-sm text-red-400">
+                        Error loading allowance
+                      </div>
+                    ) : (
+                      <>
+                        <h3 className="text-3xl font-bold">
+                          {allowanceAmount.toLocaleString(undefined, {
+                            maximumFractionDigits: 2,
+                            minimumFractionDigits: 0,
+                          })}{" "}
+                          <span className="text-xs">STRK</span>
+                        </h3>
 
-                    <h5 className="flex gap-x-1 items-center text-sm">
-                      <STRKtoUSDTDisplay amount={3000} />
-                    </h5>
+                        <h5 className="flex gap-x-1 items-center text-sm">
+                          <STRKtoUSDTDisplay amount={allowanceAmount} />
+                        </h5>
+                      </>
+                    )}
                   </div>
                 </div>
                 <button
diff --git a/app/page.tsx b/app/page.tsx
index 10c85a4..0ab40d1 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -9,8 +9,6 @@ export default function Home() {
       <LandingHeroSection />
       <WhatIsAutoSwapper />
       <WhyAutoSwappr />
-
-      {/*TODO: Implment this later */}
       {/* <HowToUseAutoSwappr /> */}
     </main>
   );
diff --git a/app/utils/addresses.ts b/app/utils/addresses.ts
index 74fa712..aa5f14b 100644
--- a/app/utils/addresses.ts
+++ b/app/utils/addresses.ts
@@ -1,5 +1,5 @@
 export const swappr_contract_address =
-  "0x5276163003e6c6932268675f6c714efbe48cd6d03752159128e1af832af6929";
+  "0x05582ad635c43b4c14dbfa53cbde0df32266164a0d1b36e5b510e5b34aeb364b";
 
 export const strk_token_contract_address =
   "0x04718f5a0fc34cc1af16a1cdee98ffb20c31f5cd61d6ab07201858f4287c938d";
diff --git a/package.json b/package.json
index d67d041..17f174a 100644
--- a/package.json
+++ b/package.json
@@ -16,8 +16,8 @@
     "@headlessui/react": "2.2.0",
     "@nextui-org/react": "2.4.8",
     "@radix-ui/react-dialog": "^1.1.13",
-    "@starknet-react/chains": "3.0.0",
-    "@starknet-react/core": "3.6.0",
+    "@starknet-react/chains": "5.0.3",
+    "@starknet-react/core": "5.0.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "framer-motion": "11.11.17",
@@ -26,10 +26,11 @@
     "husky": "^9.1.6",
     "lucide-react": "0.460.0",
     "next": "15.0.3",
+    "nextjs-toploader": "^3.9.17",
     "react": "18.0.0",
     "react-dom": "18.0.0",
     "react-icons": "^5.4.0",
-    "starknet": "6.11.0",
+    "starknet": "8.5.5",
     "tailwind-merge": "^3.3.0",
     "tailwind-scrollbar-hide": "^1.1.7",
     "vaul": "^1.1.2"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ce94ce6..1f3a472 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -10,7 +10,7 @@ importers:
     dependencies:
       '@cartridge/connector':
         specifier: 0.3.46
-        version: 0.3.46(get-starknet-core@3.3.4(starknet@6.11.0))(react@18.0.0)
+        version: 0.3.46(get-starknet-core@3.3.4(starknet@8.5.5))(react@18.0.0)
       '@headlessui/react':
         specifier: 2.2.0
         version: 2.2.0(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
@@ -21,11 +21,11 @@ importers:
         specifier: ^1.1.13
         version: 1.1.13(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
       '@starknet-react/chains':
-        specifier: 3.0.0
-        version: 3.0.0
+        specifier: 5.0.3
+        version: 5.0.3
       '@starknet-react/core':
-        specifier: 3.6.0
-        version: 3.6.0(get-starknet-core@3.3.4(starknet@6.11.0))(react@18.0.0)(starknet@6.11.0)(typescript@5.6.3)
+        specifier: 5.0.3
+        version: 5.0.3(get-starknet-core@3.3.4(starknet@8.5.5))(react@18.0.0)(starknet@8.5.5)(typescript@5.6.3)
       class-variance-authority:
         specifier: ^0.7.1
         version: 0.7.1
@@ -37,10 +37,10 @@ importers:
         version: 11.11.17(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
       get-starknet:
         specifier: 3.3.3
-        version: 3.3.3(starknet@6.11.0)
+        version: 3.3.3(starknet@8.5.5)
       get-starknet-core:
         specifier: 3.3.4
-        version: 3.3.4(starknet@6.11.0)
+        version: 3.3.4(starknet@8.5.5)
       husky:
         specifier: ^9.1.6
         version: 9.1.7
@@ -50,6 +50,9 @@ importers:
       next:
         specifier: 15.0.3
         version: 15.0.3(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      nextjs-toploader:
+        specifier: ^3.9.17
+        version: 3.9.17(next@15.0.3(react-dom@18.0.0(react@18.0.0))(react@18.0.0))(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
       react:
         specifier: 18.0.0
         version: 18.0.0
@@ -60,8 +63,8 @@ importers:
         specifier: ^5.4.0
         version: 5.4.0(react@18.0.0)
       starknet:
-        specifier: 6.11.0
-        version: 6.11.0
+        specifier: 8.5.5
+        version: 8.5.5
       tailwind-merge:
         specifier: ^3.3.0
         version: 3.3.0
@@ -1820,17 +1823,26 @@ packages:
   '@scure/starknet@1.0.0':
     resolution: {integrity: sha512-o5J57zY0f+2IL/mq8+AYJJ4Xpc1fOtDhr+mFQKbHnYFmm3WQrC+8zj2HEgxak1a+x86mhmBC1Kq305KUpVf0wg==}
 
+  '@scure/starknet@1.1.0':
+    resolution: {integrity: sha512-83g3M6Ix2qRsPN4wqLDqiRZ2GBNbjVWfboJE/9UjfG+MHr6oDSu/CWgy8hsBSJejr09DkkL+l0Ze4KVrlCIdtQ==}
+
+  '@starknet-io/types-js@0.7.10':
+    resolution: {integrity: sha512-1VtCqX4AHWJlRRSYGSn+4X1mqolI1Tdq62IwzoU2vUuEE72S1OlEeGhpvd6XsdqXcfHmVzYfj8k1XtKBQqwo9w==}
+
   '@starknet-io/types-js@0.7.7':
     resolution: {integrity: sha512-WLrpK7LIaIb8Ymxu6KF/6JkGW1sso988DweWu7p5QY/3y7waBIiPvzh27D9bX5KIJNRDyOoOVoHVEKYUYWZ/RQ==}
 
+  '@starknet-io/types-js@0.8.4':
+    resolution: {integrity: sha512-0RZ3TZHcLsUTQaq1JhDSCM8chnzO4/XNsSCozwDET64JK5bjFDIf2ZUkta+tl5Nlbf4usoU7uZiDI/Q57kt2SQ==}
+
+  '@starknet-io/types-js@0.9.2':
+    resolution: {integrity: sha512-vWOc0FVSn+RmabozIEWcEny1I73nDGTvOrLYJsR1x7LGA3AZmqt4i/aW69o/3i2NN5CVP8Ok6G1ayRQJKye3Wg==}
+
   '@starknet-react/chains@0.1.7':
     resolution: {integrity: sha512-UNh97I1SvuJKaAhKOmpEk8JcWuZWMlPG/ba2HcvFYL9x/47BKndJ+Da9V+iJFtkHUjreVnajT1snsaz1XMG+UQ==}
 
-  '@starknet-react/chains@3.0.0':
-    resolution: {integrity: sha512-+XulhJZMSDAEX9JXHI5qJetHlf1Xr0nc7K2+efUMotGxXM31ovKWc/0JFlJh9Jwjgik/UO859Dh4yLkb92PAhw==}
-
-  '@starknet-react/chains@3.1.0':
-    resolution: {integrity: sha512-h+fxh+Bs8h0ZSEX651vG3mn1NtMKzFDSHqrX7Q8YRRIeTKolPCx4vmoi5Gg19SXr/9iIVSwgx6qe4rVZTNfhcQ==}
+  '@starknet-react/chains@5.0.3':
+    resolution: {integrity: sha512-TxP391OTWgaqujT9Hu1Siljye54IHjEXrgkUuhMfxzf9sCu5q42ZzZgu9hLm0NcJgg9Fx2t75J0WB6eYmQ26fw==}
 
   '@starknet-react/core@2.9.0':
     resolution: {integrity: sha512-UdRo454/g2lb0YsNAUJohJ2w21LlahcEXQlkWrddoKFubRY6Q0b39hec0eZOCqfU0Z1Sh7kF1XYvI5t9xL4yTQ==}
@@ -1839,12 +1851,12 @@ packages:
       react: ^18.0
       starknet: ^5.25.0
 
-  '@starknet-react/core@3.6.0':
-    resolution: {integrity: sha512-+5acQqMZkk6q2/cogoY7g/Ne2zgUHUvbgEc1dE9ItNbfpMJqxUtB5Ovt7+Q3utsYUYXbuxWgq/G6CjPHGrtqzg==}
+  '@starknet-react/core@5.0.3':
+    resolution: {integrity: sha512-BxtcYL+SPqqDo1cpzfNYcYmSY4Ifjz1O5vq5vDdjx2iHEvHYzxBMjnyacJ+JsdRlQiuLNRGInooC/yzFkMrHAQ==}
     peerDependencies:
       get-starknet-core: ^4.0.0
       react: ^18.0
-      starknet: ^6.11.0
+      starknet: ^8.1.2
 
   '@swc/counter@0.1.3':
     resolution: {integrity: sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==}
@@ -1969,6 +1981,10 @@ packages:
     resolution: {integrity: sha512-JlqiAl9CPvTm5kKG0QXmVCWNWoC/XyRMOeT77cQlbxXWllgjf6SqUmaNqFon72C2o5OSZids+5FvLdsw6dvWaw==}
     hasBin: true
 
+  abi-wan-kanabi@2.2.4:
+    resolution: {integrity: sha512-0aA81FScmJCPX+8UvkXLki3X1+yPQuWxEkqXBVKltgPAK79J+NB+Lp5DouMXa7L6f+zcRlIA/6XO7BN/q9fnvg==}
+    hasBin: true
+
   abitype@1.0.7:
     resolution: {integrity: sha512-ZfYYSktDQUwc2eduYu8C4wOs+RDPmnRYMh7zNfzeMtGGgb0U+6tLGjixUic6mXf5xKKCcgT5Qp6cv39tOARVFw==}
     peerDependencies:
@@ -2998,6 +3014,9 @@ packages:
   lossless-json@4.0.2:
     resolution: {integrity: sha512-+z0EaLi2UcWi8MZRxA5iTb6m4Ys4E80uftGY+yG5KNFJb5EceQXOhdW/pWJZ8m97s26u7yZZAYMcKWNztSZssA==}
 
+  lossless-json@4.3.0:
+    resolution: {integrity: sha512-ToxOC+SsduRmdSuoLZLYAr5zy1Qu7l5XhmPWM3zefCZ5IcrzW/h108qbJUKfOlDlhvhjUK84+8PSVX0kxnit0g==}
+
   lru-cache@10.4.3:
     resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}
 
@@ -3067,6 +3086,13 @@ packages:
       sass:
         optional: true
 
+  nextjs-toploader@3.9.17:
+    resolution: {integrity: sha512-9OF0KSSLtoSAuNg2LZ3aTl4hR9mBDj5L9s9DZiFCbMlXehyICGjkIz5dVGzuATU2bheJZoBdFgq9w07AKSuQQw==}
+    peerDependencies:
+      next: '>= 6.0.0'
+      react: '>= 16.0.0'
+      react-dom: '>= 16.0.0'
+
   node-fetch@2.7.0:
     resolution: {integrity: sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==}
     engines: {node: 4.x || >=6.0.0}
@@ -3084,6 +3110,9 @@ packages:
     resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
     engines: {node: '>=0.10.0'}
 
+  nprogress@0.2.0:
+    resolution: {integrity: sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA==}
+
   object-assign@4.1.1:
     resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
     engines: {node: '>=0.10.0'}
@@ -3487,6 +3516,10 @@ packages:
   starknet@6.11.0:
     resolution: {integrity: sha512-u50KrGDi9fbu1Ogu7ynwF/tSeFlp3mzOg1/Y5x50tYFICImo3OfY4lOz9OtYDk404HK4eUujKkhov9tG7GAKlg==}
 
+  starknet@8.5.5:
+    resolution: {integrity: sha512-YbAoOUx8cGcpaCPt/KuIYNyQIEWNr1iUJFVibpaxg/C8+ubAClqy6U498HgCVbxMbTg6UaYMc6xnh0RpeMYlcA==}
+    engines: {node: '>=22'}
+
   streamsearch@1.1.0:
     resolution: {integrity: sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==}
     engines: {node: '>=10.0.0'}
@@ -3880,10 +3913,10 @@ snapshots:
 
   '@cartridge/account-wasm@0.3.46': {}
 
-  '@cartridge/connector@0.3.46(get-starknet-core@3.3.4(starknet@6.11.0))(react@18.0.0)':
+  '@cartridge/connector@0.3.46(get-starknet-core@3.3.4(starknet@8.5.5))(react@18.0.0)':
     dependencies:
       '@cartridge/controller': 0.3.46
-      '@starknet-react/core': 2.9.0(get-starknet-core@3.3.4(starknet@6.11.0))(react@18.0.0)(starknet@6.11.0)
+      '@starknet-react/core': 2.9.0(get-starknet-core@3.3.4(starknet@8.5.5))(react@18.0.0)(starknet@6.11.0)
       starknet: 6.11.0
     transitivePeerDependencies:
       - encoding
@@ -6427,34 +6460,44 @@ snapshots:
       '@noble/curves': 1.3.0
       '@noble/hashes': 1.3.3
 
+  '@scure/starknet@1.1.0':
+    dependencies:
+      '@noble/curves': 1.7.0
+      '@noble/hashes': 1.6.1
+
+  '@starknet-io/types-js@0.7.10': {}
+
   '@starknet-io/types-js@0.7.7': {}
 
-  '@starknet-react/chains@0.1.7': {}
+  '@starknet-io/types-js@0.8.4': {}
+
+  '@starknet-io/types-js@0.9.2': {}
 
-  '@starknet-react/chains@3.0.0': {}
+  '@starknet-react/chains@0.1.7': {}
 
-  '@starknet-react/chains@3.1.0': {}
+  '@starknet-react/chains@5.0.3': {}
 
-  '@starknet-react/core@2.9.0(get-starknet-core@3.3.4(starknet@6.11.0))(react@18.0.0)(starknet@6.11.0)':
+  '@starknet-react/core@2.9.0(get-starknet-core@3.3.4(starknet@8.5.5))(react@18.0.0)(starknet@6.11.0)':
     dependencies:
       '@starknet-react/chains': 0.1.7
       '@tanstack/react-query': 5.60.6(react@18.0.0)
       eventemitter3: 5.0.1
-      get-starknet-core: 3.3.4(starknet@6.11.0)
+      get-starknet-core: 3.3.4(starknet@8.5.5)
       immutable: 4.3.7
       react: 18.0.0
       starknet: 6.11.0
       zod: 3.23.8
 
-  '@starknet-react/core@3.6.0(get-starknet-core@3.3.4(starknet@6.11.0))(react@18.0.0)(starknet@6.11.0)(typescript@5.6.3)':
+  '@starknet-react/core@5.0.3(get-starknet-core@3.3.4(starknet@8.5.5))(react@18.0.0)(starknet@8.5.5)(typescript@5.6.3)':
     dependencies:
-      '@starknet-io/types-js': 0.7.7
-      '@starknet-react/chains': 3.1.0
+      '@starknet-io/types-js': 0.7.10
+      '@starknet-react/chains': 5.0.3
       '@tanstack/react-query': 5.60.6(react@18.0.0)
+      abi-wan-kanabi: 2.2.4
       eventemitter3: 5.0.1
-      get-starknet-core: 3.3.4(starknet@6.11.0)
+      get-starknet-core: 3.3.4(starknet@8.5.5)
       react: 18.0.0
-      starknet: 6.11.0
+      starknet: 8.5.5
       viem: 2.21.55(typescript@5.6.3)(zod@3.23.8)
       zod: 3.23.8
     transitivePeerDependencies:
@@ -6608,6 +6651,13 @@ snapshots:
       fs-extra: 10.1.0
       yargs: 17.7.2
 
+  abi-wan-kanabi@2.2.4:
+    dependencies:
+      ansicolors: 0.3.2
+      cardinal: 2.1.1
+      fs-extra: 10.1.0
+      yargs: 17.7.2
+
   abitype@1.0.7(typescript@5.6.3)(zod@3.23.8):
     optionalDependencies:
       typescript: 5.6.3
@@ -7119,7 +7169,7 @@ snapshots:
       debug: 4.3.7
       enhanced-resolve: 5.17.1
       eslint: 9.15.0(jiti@1.21.6)
-      eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.15.0(eslint@9.15.0(jiti@1.21.6))(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.15.0(eslint@9.15.0(jiti@1.21.6))(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@9.15.0(jiti@1.21.6)))(eslint@9.15.0(jiti@1.21.6))
+      eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.15.0(eslint@9.15.0(jiti@1.21.6))(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3)(eslint@9.15.0(jiti@1.21.6))
       fast-glob: 3.3.2
       get-tsconfig: 4.8.1
       is-bun-module: 1.2.1
@@ -7132,7 +7182,7 @@ snapshots:
       - eslint-import-resolver-webpack
       - supports-color
 
-  eslint-module-utils@2.12.0(@typescript-eslint/parser@8.15.0(eslint@9.15.0(jiti@1.21.6))(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.15.0(eslint@9.15.0(jiti@1.21.6))(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@9.15.0(jiti@1.21.6)))(eslint@9.15.0(jiti@1.21.6)):
+  eslint-module-utils@2.12.0(@typescript-eslint/parser@8.15.0(eslint@9.15.0(jiti@1.21.6))(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3)(eslint@9.15.0(jiti@1.21.6)):
     dependencies:
       debug: 3.2.7
     optionalDependencies:
@@ -7154,7 +7204,7 @@ snapshots:
       doctrine: 2.1.0
       eslint: 9.15.0(jiti@1.21.6)
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.15.0(eslint@9.15.0(jiti@1.21.6))(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.15.0(eslint@9.15.0(jiti@1.21.6))(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@9.15.0(jiti@1.21.6)))(eslint@9.15.0(jiti@1.21.6))
+      eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.15.0(eslint@9.15.0(jiti@1.21.6))(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3)(eslint@9.15.0(jiti@1.21.6))
       hasown: 2.0.2
       is-core-module: 2.15.1
       is-glob: 4.0.3
@@ -7400,19 +7450,19 @@ snapshots:
 
   get-nonce@1.0.1: {}
 
-  get-starknet-core@3.3.4(starknet@6.11.0):
+  get-starknet-core@3.3.4(starknet@8.5.5):
     dependencies:
       '@module-federation/runtime': 0.1.21
-      starknet: 6.11.0
+      starknet: 8.5.5
 
   get-starknet-core@4.0.0:
     dependencies:
       '@starknet-io/types-js': 0.7.7
 
-  get-starknet@3.3.3(starknet@6.11.0):
+  get-starknet@3.3.3(starknet@8.5.5):
     dependencies:
       bowser: 2.11.0
-      get-starknet-core: 3.3.4(starknet@6.11.0)
+      get-starknet-core: 3.3.4(starknet@8.5.5)
     transitivePeerDependencies:
       - starknet
 
@@ -7761,6 +7811,8 @@ snapshots:
 
   lossless-json@4.0.2: {}
 
+  lossless-json@4.3.0: {}
+
   lru-cache@10.4.3: {}
 
   lucide-react@0.460.0(react@18.0.0):
@@ -7825,6 +7877,14 @@ snapshots:
       - '@babel/core'
       - babel-plugin-macros
 
+  nextjs-toploader@3.9.17(next@15.0.3(react-dom@18.0.0(react@18.0.0))(react@18.0.0))(react-dom@18.0.0(react@18.0.0))(react@18.0.0):
+    dependencies:
+      next: 15.0.3(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      nprogress: 0.2.0
+      prop-types: 15.8.1
+      react: 18.0.0
+      react-dom: 18.0.0(react@18.0.0)
+
   node-fetch@2.7.0:
     dependencies:
       whatwg-url: 5.0.0
@@ -7836,6 +7896,8 @@ snapshots:
 
   normalize-path@3.0.0: {}
 
+  nprogress@0.2.0: {}
+
   object-assign@4.1.1: {}
 
   object-hash@3.0.0: {}
@@ -8277,6 +8339,19 @@ snapshots:
     transitivePeerDependencies:
       - encoding
 
+  starknet@8.5.5:
+    dependencies:
+      '@noble/curves': 1.7.0
+      '@noble/hashes': 1.6.1
+      '@scure/base': 1.2.1
+      '@scure/starknet': 1.1.0
+      '@starknet-io/starknet-types-08': '@starknet-io/types-js@0.8.4'
+      '@starknet-io/starknet-types-09': '@starknet-io/types-js@0.9.2'
+      abi-wan-kanabi: 2.2.4
+      lossless-json: 4.3.0
+      pako: 2.1.0
+      ts-mixer: 6.0.4
+
   streamsearch@1.1.0: {}
 
   strict-uri-encode@2.0.0: {}
diff --git a/public/fonts/CreatoDisplay-Bold.otf b/public/fonts/CreatoDisplay-Bold.otf
new file mode 100644
index 0000000..9e283fd
Binary files /dev/null and b/public/fonts/CreatoDisplay-Bold.otf differ
diff --git a/public/fonts/CreatoDisplay-Medium.otf b/public/fonts/CreatoDisplay-Medium.otf
new file mode 100644
index 0000000..663b789
Binary files /dev/null and b/public/fonts/CreatoDisplay-Medium.otf differ
diff --git a/public/fonts/CreatoDisplay-Regular.otf b/public/fonts/CreatoDisplay-Regular.otf
new file mode 100644
index 0000000..4d470c0
Binary files /dev/null and b/public/fonts/CreatoDisplay-Regular.otf differ
diff --git a/services/getUserStrkBalance.ts b/services/getUserStrkBalance.ts
new file mode 100644
index 0000000..a51a3d3
--- /dev/null
+++ b/services/getUserStrkBalance.ts
@@ -0,0 +1,18 @@
+import { Account, Contract, RpcProvider } from "starknet";
+import { STRK_TOKEN_ABI } from "@/app/abis/strk-abi";
+import { strk_token_contract_address } from "@/app/utils/addresses";
+
+export async function getUserStrkBalance(address: any, account: any) {
+  const contract = new Contract({
+    abi: STRK_TOKEN_ABI,
+    address: strk_token_contract_address,
+    providerOrAccount: account,
+  });
+  try {
+    const balance = await contract.balanceOf(address);
+    return Number(balance) / Math.pow(10, 18);
+  } catch (error: any) {
+    console.error("Error fetching user STRK balance:", error);
+    throw new Error(error.message || "Failed to fetch STRK balance");
+  }
+}
diff --git a/tailwind.config.ts b/tailwind.config.ts
index e5e2859..f030f19 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -9,6 +9,7 @@ export default {
   theme: {
     fontFamily: {
       sans: ["Open Sans", "sans-serif"],
+      creato: ["var(--font-creato-display)", "sans-serif"],
     },
     extend: {
       colors: {