diff --git a/advanced/providers/solana-adapter.mdx b/advanced/providers/solana-adapter.mdx
index 12c494ee6..e7e7e9c87 100644
--- a/advanced/providers/solana-adapter.mdx
+++ b/advanced/providers/solana-adapter.mdx
@@ -2,30 +2,28 @@
 title: Solana Adapter
 ---
 
-import CloudBanner from "/snippets/cloud-banner.mdx";
+import CloudBanner from '/snippets/cloud-banner.mdx'
 
 The WalletConnect Solana Adapter allows you to integrate the WalletConnect protocol into the Wallet Adapter library.
 
 <Info>
-  If you are not familiar with the Wallet Adapter library it is recommended to
-  use [AppKit instead](../../appkit//overview). AppKit now supports
-  multichain, which means you can choose and configure multiple blockchain
-  networks within your instance of AppKit, extending beyond just Ethereum-based
-  (EVM) networks.
+  If you are not familiar with the Wallet Adapter library it is recommended to use [AppKit
+  instead](../../appkit//overview). AppKit now supports multichain, which means you can choose and
+  configure multiple blockchain networks within your instance of AppKit, extending beyond just
+  Ethereum-based (EVM) networks.
 </Info>
 
 ## Installation
 
 <CodeGroup>
-  ```bash npm npm install @walletconnect/solana-adapter ``` ```bash Yarn yarn
-  add @walletconnect/solana-adapter ``` ```bash Bun bun add
-  @walletconnect/solana-adapter ``` ```bash pnpm pnpm add
-  @walletconnect/solana-adapter ```
+  ```bash npm npm install @walletconnect/solana-adapter ``` ```bash Yarn yarn add
+  @walletconnect/solana-adapter ``` ```bash Bun bun add @walletconnect/solana-adapter ``` ```bash
+  pnpm pnpm add @walletconnect/solana-adapter ```
 </CodeGroup>
 
 ## Cloud Configuration
 
-Create a new project on Reown Dashboard at https://dashboard.reown.com and obtain a new project ID.
+Create a new project on [Reown Dashboard](https://dashboard.reown.com) and obtain a new project ID.
 
 <CloudBanner />
 
@@ -34,37 +32,31 @@ Create a new project on Reown Dashboard at https://dashboard.reown.com and obtai
 Add the `WalletConnectAdapter` to your wallets list.
 
 ```tsx {12, 22-27}
-import { ReactNode, useMemo, useState } from "react";
-import {
-  ConnectionProvider,
-  WalletProvider,
-} from "@solana/wallet-adapter-react";
-import { WalletAdapterNetwork } from "@solana/wallet-adapter-base";
-import { WalletModalProvider } from "@solana/wallet-adapter-react-ui";
-import { clusterApiUrl } from "@solana/web3.js";
+import { ReactNode, useMemo, useState } from 'react'
+import { ConnectionProvider, WalletProvider } from '@solana/wallet-adapter-react'
+import { WalletAdapterNetwork } from '@solana/wallet-adapter-base'
+import { WalletModalProvider } from '@solana/wallet-adapter-react-ui'
+import { clusterApiUrl } from '@solana/web3.js'
 
-import "@solana/wallet-adapter-react-ui/styles.css";
+import '@solana/wallet-adapter-react-ui/styles.css'
 
-import { WalletConnectWalletAdapter } from "@walletconnect/solana-adapter";
+import { WalletConnectWalletAdapter } from '@walletconnect/solana-adapter'
 
 export const SolanaContext = ({ children }: { children: ReactNode }) => {
-  const endpoint = useMemo(
-    () => clusterApiUrl(WalletAdapterNetwork.Mainnet),
-    []
-  );
+  const endpoint = useMemo(() => clusterApiUrl(WalletAdapterNetwork.Mainnet), [])
 
   const wallets = useMemo(
     () => [
       new WalletConnectWalletAdapter({
         network: WalletAdapterNetwork.Mainnet,
         options: {
-          projectId: "YOUR_PROJECT_ID",
-        },
-      }),
+          projectId: 'YOUR_PROJECT_ID'
+        }
+      })
     ],
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
-  );
+  )
 
   return (
     <ConnectionProvider endpoint={endpoint}>
@@ -72,6 +64,6 @@ export const SolanaContext = ({ children }: { children: ReactNode }) => {
         <WalletModalProvider>{children}</WalletModalProvider>
       </WalletProvider>
     </ConnectionProvider>
-  );
-};
+  )
+}
 ```
diff --git a/appkit/javascript/core/installation.mdx b/appkit/javascript/core/installation.mdx
index ca03a0eb0..23569dd44 100644
--- a/appkit/javascript/core/installation.mdx
+++ b/appkit/javascript/core/installation.mdx
@@ -2,33 +2,29 @@
 title: Installation
 ---
 
-import CloudBanner from "/snippets/cloud-banner.mdx";
+import CloudBanner from '/snippets/cloud-banner.mdx'
 
-import WagmiImplementation from "/snippets/appkit/javascript/wagmi/about/implementation.mdx";
-import WagmiModal from "/snippets/appkit/javascript/wagmi/about/triggermodal.mdx";
+import WagmiImplementation from '/snippets/appkit/javascript/wagmi/about/implementation.mdx'
 
-import Ethers5Implementation from "/snippets/appkit/javascript/ethers5/implementation.mdx";
+import Ethers5Implementation from '/snippets/appkit/javascript/ethers5/implementation.mdx'
 
-import EthersImplementation from "/snippets/appkit/javascript/ethers/about/implementation.mdx";
-import EthersModal from "/snippets/appkit/javascript/ethers/about/triggermodal.mdx";
+import EthersImplementation from '/snippets/appkit/javascript/ethers/about/implementation.mdx'
 
-import SolanaImplementation from "/snippets/appkit/javascript/solana/about/implementation.mdx";
-import SolanaModal from "/snippets/appkit/javascript/solana/about/triggermodal.mdx";
-import SolanaPrograms from "/snippets/appkit/javascript/solana/about/programs.mdx";
+import SolanaImplementation from '/snippets/appkit/javascript/solana/about/implementation.mdx'
+import SolanaPrograms from '/snippets/appkit/javascript/solana/about/programs.mdx'
 
-import BitcoinImplementation from "/snippets/appkit/javascript/bitcoin/about/implementation.mdx";
-import BitcoinModal from "/snippets/appkit/javascript/bitcoin/about/triggermodal.mdx";
+import BitcoinImplementation from '/snippets/appkit/javascript/bitcoin/about/implementation.mdx'
 
-import CoreImplementation from "/snippets/appkit/javascript/core/about/implementation.mdx";
-import CoreModal from "/snippets/appkit/javascript/core/about/triggermodal.mdx";
+import TonImplementation from '/snippets/appkit/javascript/ton/about/implementation.mdx'
 
-AppKit provides seamless integration with multiple blockchain ecosystems. . It supports [Wagmi](https://wagmi.sh/) and [Ethers v6](https://docs.ethers.org/v6/) on Ethereum, 
-[@solana/web3.js](https://solana-labs.github.io/solana-web3.js/) on Solana, as well as Bitcoin and other networks. AppKit Core with Universal Provider library, enable compatibility across any blockchain protocol.
+import CoreImplementation from '/snippets/appkit/javascript/core/about/implementation.mdx'
+
+AppKit provides seamless integration with multiple blockchain ecosystems. . It supports [Wagmi](https://wagmi.sh/) and [Ethers v6](https://docs.ethers.org/v6/) on Ethereum,
+[@solana/web3.js](https://solana-labs.github.io/solana-web3.js/) on Solana, as well as Bitcoin, TON and other networks. AppKit Core with Universal Provider library, enable compatibility across any blockchain protocol.
 Choose one of these to get started.
 
 <Note>
-  We recommend using
-  [Vite](https://vitejs.dev/guide/#scaffolding-your-first-vite-project) to get
+  We recommend using [Vite](https://vitejs.dev/guide/#scaffolding-your-first-vite-project) to get
   started with AppKit JavaScript.
 </Note>
 
@@ -153,6 +149,29 @@ pnpm add @reown/appkit @reown/appkit-adapter-bitcoin
 
 </CodeGroup>
 
+</Tab>
+<Tab title="TON">
+
+<CodeGroup>
+
+```bash npm
+npm install @reown/appkit @reown/appkit-adapter-ton
+```
+
+```bash Yarn
+yarn add @reown/appkit @reown/appkit-adapter-ton
+```
+
+```bash Bun
+bun add @reown/appkit @reown/appkit-adapter-ton
+```
+
+```bash pnpm
+pnpm add @reown/appkit @reown/appkit-adapter-ton
+```
+
+</CodeGroup>
+
 </Tab>
 <Tab title="Others networks (AppKit Core)">
 
@@ -181,7 +200,7 @@ pnpm add @reown/appkit @reown/appkit-universal-connector @reown/appkit-common et
 
 ## Cloud Configuration
 
-Create a new project on Reown Dashboard at https://dashboard.reown.com and obtain a new project ID.
+Create a new project on [Reown Dashboard](https://dashboard.reown.com) and obtain a new project ID.
 
 <CloudBanner />
 
@@ -224,6 +243,14 @@ Check the JavaScript Bitcoin example
 
 <BitcoinImplementation />
 
+</Tab>
+<Tab title="TON">
+<Card title="TON Example" icon="github" href="https://github.com/reown-com/appkit-web-examples/tree/main/javascript/javascript-ton">
+Check the JavaScript TON example
+</Card>
+
+<TonImplementation />
+
 </Tab>
 <Tab title="Others networks (AppKit Core)">
 <Card title="AppKit Core Example" icon="github" href="https://github.com/reown-com/appkit-web-examples/tree/main/javascript/javascript-core-universal-connector">
@@ -238,34 +265,76 @@ Check the JavaScript AppKit Core example for Sui and Stacks
 ## Trigger the modal
 
 <Tabs>
-<Tab title="Wagmi">
+<Tab title="AppKit">
 
-<WagmiModal />
+To open AppKit you can use our [**web component**](/appkit/javascript/core/components) or build your own button with AppKit [**actions**](/appkit/javascript/core/actions#open-and-close-the-modal).
 
-</Tab>
-<Tab title="Ethers v5">
+<CodeGroup>
 
-<EthersModal />
+```tsx ConnectButton.html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>HTML AppKit Example</title>
+  </head>
+  <body>
+    <appkit-button />
+    <script type="module" src="main.js"></script>
+  </body>
+</html>
+```
 
-</Tab>
-<Tab title="Ethers">
+You can trigger the modal by calling the `open` function from the modal instance.
 
-<EthersModal />
+```js ConnectButtonWithFunctions.js
+const modal = createAppKit({
+  adapters: [wagmiAdapter],
+  networks: [mainnet, arbitrum],
+  projectId
+})
 
-</Tab>
-<Tab title="Solana">
+modal.open()
+```
 
-<SolanaModal />
+</CodeGroup>
 
 </Tab>
-<Tab title="Bitcoin">
-
-<BitcoinModal />
+<Tab title="AppKit Core">
 
-</Tab>
-<Tab title="Others networks (AppKit Core)">
+To open AppKit Core you need to call the `connect` function from the Universal Connector.
 
-<CoreModal />
+```tsx
+<script>
+  let session = null
+
+  async function handleConnect() {
+    // universalConnector is the universal connector instance from the implementation section
+    if (!universalConnector) {
+      return
+    }
+
+    const { session: providerSession } = await universalConnector.connect()
+    session = providerSession
+  }
+
+  async function handleDisconnect() {
+    if (!universalConnector) {
+      return
+    }
+    await universalConnector.disconnect()
+    session = null
+  }
+
+  document.getElementById('open-connect-modal').addEventListener('click', handleConnect)
+  document.getElementById('disconnect').addEventListener('click', handleDisconnect)
+</script>
+
+<div>
+  <button id="open-connect-modal">Open AppKit Core</button>
+  <button id="disconnect">Disconnect</button>
+</div>
+```
 
 </Tab>
 </Tabs>
@@ -294,6 +363,7 @@ bun a @wagmi/core
 ```bash pnpm
 pnpm add @wagmi/core
 ```
+
 </CodeGroup>
 
 [Wagmi actions](https://wagmi.sh/core/api/actions/readContract) can help us interact with wallets and smart contracts:
@@ -301,17 +371,17 @@ pnpm add @wagmi/core
 For this use case, we need to import the `wagmiConfig`from our AppKit WagmiAdapter configuration.
 
 ```tsx
-import { readContract } from "@wagmi/core";
-import { USDTAbi } from "../abi/USDTAbi";
+import { readContract } from '@wagmi/core'
+import { USDTAbi } from '../abi/USDTAbi'
 
-const USDTAddress = "0x...";
+const USDTAddress = '0x...'
 
 const data = readContract(wagmiConfig, {
   address: USDTAddress,
   abi: USDTAbi,
-  functionName: "totalSupply",
-  args: [],
-});
+  functionName: 'totalSupply',
+  args: []
+})
 ```
 
 Read more about Wagmi actions for smart contract interaction [here](https://wagmi.sh/core/actions/readContract).
@@ -322,29 +392,29 @@ Read more about Wagmi actions for smart contract interaction [here](https://wagm
 [Ethers](https://docs.ethers.org/v6/) can help us interact with wallets and smart contracts:
 
 ```tsx
-import { BrowserProvider, Contract, parseEther } from "ethers";
+import { BrowserProvider, Contract, parseEther } from 'ethers'
 
-const provider = await modal.subscribeProviders((state) => {
-  return state["eip155"];
-});
+const provider = await modal.subscribeProviders(state => {
+  return state['eip155']
+})
 
-const addressFrom = await modal.subscribeAccount((state) => {
-  return state;
-});
+const addressFrom = await modal.subscribeAccount(state => {
+  return state
+})
 
-if (!provider) throw Error("No provider found");
-if (!addressFrom) throw Error("No address found");
+if (!provider) throw Error('No provider found')
+if (!addressFrom) throw Error('No address found')
 
 function sendTransaction() {
   const tx = {
     from: addressFrom,
-    to: "0x...", // any address
-    value: parseEther("0.0001"),
-  };
-  const ethersProvider = new BrowserProvider(provider);
-  const signer = await ethersProvider.getSigner();
-  const tx = await signer.sendTransaction(tx);
-  console.log("transaction:", tx);
+    to: '0x...', // any address
+    value: parseEther('0.0001')
+  }
+  const ethersProvider = new BrowserProvider(provider)
+  const signer = await ethersProvider.getSigner()
+  const tx = await signer.sendTransaction(tx)
+  console.log('transaction:', tx)
 }
 ```
 
@@ -362,33 +432,35 @@ If you are starting from scratch, you can use the following methods to set up yo
 <Accordion title="Set up Reown AppKit using AI">
   If you're using Cursor IDE (or another AI based IDE) to build a project with Reown AppKit, Reown provides a `.mdc` file that enhances your development experience. The `reown-appkit.mdc` [file here](https://github.com/reown-com/reown-docs/blob/main/reown-appkit.mdc) contains Cursor-specific rules and type hints for Reown AppKit.
 
-  To use it in your project:
+To use it in your project:
+
+1. Copy the `reown-appkit.mdc` file from this repository
+2. Create a `.cursor/rules` folder in your project's root directory (if it doesn't exist)
+3. Place the `.mdc` file in your project's `.cursor/rules` folder
 
-  1. Copy the `reown-appkit.mdc` file from this repository
-  2. Create a `.cursor/rules` folder in your project's root directory (if it doesn't exist)
-  3. Place the `.mdc` file in your project's `.cursor/rules` folder
+For more info, refer to [Cursor's documentation](https://docs.cursor.com/context/rules#project-rules).
 
-  For more info, refer to [Cursor's documentation](https://docs.cursor.com/context/rules#project-rules).
 </Accordion>
 <Accordion title="AppKit CLI">
   Reown offers a dedicated CLI to set up a minimal version of AppKit in the easiest and quickest way possible.
 
-  To do this, please run the command below.
+To do this, please run the command below.
+
+```bash
+npx @reown/appkit-cli
+```
 
-  ```bash
-  npx @reown/appkit-cli
-  ```
+After running the command, you will be prompted to confirm the installation of the CLI. Upon your confirmation, the CLI will request the following details:
 
-  After running the command, you will be prompted to confirm the installation of the CLI. Upon your confirmation, the CLI will request the following details:
+1. **Project Name**: Enter the name for your project.
+2. **Framework**: Select your preferred framework or library. Currently, you have three options: React, Next.js, and Vue.
+3. **Network-Specific libraries**: Choose whether you want to install Wagmi, Ethers, Solana, or Multichain (EVM + Solana).
 
-  1. **Project Name**: Enter the name for your project.
-  2. **Framework**: Select your preferred framework or library. Currently, you have three options: React, Next.js, and Vue.
-  3. **Network-Specific libraries**: Choose whether you want to install Wagmi, Ethers, Solana, or Multichain (EVM + Solana).
+After providing the project name and selecting your preferences, the CLI will install a minimal example of AppKit with your preferred blockchain library. The example will be pre-configured with a `projectId` that will only work on `localhost`.
 
-  After providing the project name and selecting your preferences, the CLI will install a minimal example of AppKit with your preferred blockchain library. The example will be pre-configured with a `projectId` that will only work on `localhost`.
+To fully configure your project, please obtain a `projectId` from the Reown Dashboard and update your project accordingly.
 
-  To fully configure your project, please obtain a `projectId` from the Reown Dashboard and update your project accordingly.
+**Refer to [this section](#cloud-configuration) for more information.**
 
-  **Refer to [this section](#cloud-configuration) for more information.**
 </Accordion>
-</AccordionGroup>
\ No newline at end of file
+</AccordionGroup>
diff --git a/appkit/next/core/installation.mdx b/appkit/next/core/installation.mdx
index fbacc9dc4..c31d6f345 100644
--- a/appkit/next/core/installation.mdx
+++ b/appkit/next/core/installation.mdx
@@ -2,34 +2,29 @@
 title: Installation
 ---
 
-import CloudBanner from "/snippets/cloud-banner.mdx";
+import CloudBanner from '/snippets/cloud-banner.mdx'
 
-import WagmiImplementation from "/snippets/appkit/next/wagmi/about/implementation.mdx";
-import WagmiModal from "/snippets/appkit/next/wagmi/about/triggermodal.mdx";
+import WagmiImplementation from '/snippets/appkit/next/wagmi/about/implementation.mdx'
 
-import Ethers5Implementation from "/snippets/appkit/next/ethers5/implementation.mdx";
-import Ethers5Modal from "/snippets/appkit/next/ethers5/triggermodal.mdx";
+import Ethers5Implementation from '/snippets/appkit/next/ethers5/implementation.mdx'
 
-import EthersImplementation from "/snippets/appkit/next/ethers/about/implementation.mdx";
-import EthersModal from "/snippets/appkit/next/ethers/about/triggermodal.mdx";
+import EthersImplementation from '/snippets/appkit/next/ethers/about/implementation.mdx'
 
-import SolanaImplementation from "/snippets/appkit/next/solana/about/implementation.mdx";
-import SolanaModal from "/snippets/appkit/next/solana/about/triggermodal.mdx";
-import SolanaPrograms from "/snippets/appkit/next/solana/about/programs.mdx";
+import SolanaImplementation from '/snippets/appkit/next/solana/about/implementation.mdx'
+import SolanaPrograms from '/snippets/appkit/next/solana/about/programs.mdx'
 
-import BitcoinImplementation from "/snippets/appkit/next/bitcoin/about/implementation.mdx";
-import BitcoinModal from "/snippets/appkit/next/bitcoin/about/triggermodal.mdx";
+import BitcoinImplementation from '/snippets/appkit/next/bitcoin/about/implementation.mdx'
 
-import CoreImplementation from "/snippets/appkit/react/core/about/implementation.mdx";
-import CoreModal from "/snippets/appkit/react/core/about/triggermodal.mdx";
+import TonImplementation from '/snippets/appkit/next/ton/about/implementation.mdx'
 
-AppKit provides seamless integration with multiple blockchain ecosystems. . It supports [Wagmi](https://wagmi.sh/) and [Ethers v6](https://docs.ethers.org/v6/) on Ethereum, 
-[@solana/web3.js](https://solana-labs.github.io/solana-web3.js/) on Solana, as well as Bitcoin and other networks. AppKit Core with Universal Provider library, enable compatibility across any blockchain protocol.
+import CoreImplementation from '/snippets/appkit/react/core/about/implementation.mdx'
+
+AppKit provides seamless integration with multiple blockchain ecosystems. . It supports [Wagmi](https://wagmi.sh/) and [Ethers v6](https://docs.ethers.org/v6/) on Ethereum,
+[@solana/web3.js](https://solana-labs.github.io/solana-web3.js/) on Solana, as well as Bitcoin, TON and other networks. AppKit Core with Universal Provider library, enable compatibility across any blockchain protocol.
 
 <Note>
-  These steps are specific to [Next.js](https://nextjs.org/) app router. For
-  other React frameworks read the [React
-  documentation](../../react/core/installation).
+  These steps are specific to [Next.js](https://nextjs.org/) app router. For other React frameworks
+  read the [React documentation](../../react/core/installation).
 </Note>
 
 ## Installation
@@ -155,6 +150,29 @@ pnpm add @reown/appkit @reown/appkit-adapter-bitcoin
 
 </CodeGroup>
 
+</Tab>
+<Tab title="TON">
+
+<CodeGroup>
+
+```bash npm
+npm install @reown/appkit @reown/appkit-adapter-ton
+```
+
+```bash Yarn
+yarn add @reown/appkit @reown/appkit-adapter-ton
+```
+
+```bash Bun
+bun add @reown/appkit @reown/appkit-adapter-ton
+```
+
+```bash pnpm
+pnpm add @reown/appkit @reown/appkit-adapter-ton
+```
+
+</CodeGroup>
+
 </Tab>
 <Tab title="Others networks (AppKit Core)">
 
@@ -183,7 +201,7 @@ pnpm add @reown/appkit @reown/appkit-universal-connector @reown/appkit-common et
 
 ## Cloud Configuration
 
-Create a new project on Reown Dashboard at https://dashboard.reown.com and obtain a new project ID.
+Create a new project on [Reown Dashboard](https://dashboard.reown.com) and obtain a new project ID.
 
 <CloudBanner />
 
@@ -225,6 +243,13 @@ Check the Next Bitcoin example
 </Card>
 <BitcoinImplementation />
 
+</Tab>
+<Tab title="TON">
+<Card title="TON Example" icon="github" href="https://github.com/reown-com/appkit-web-examples/tree/main/nextjs/next-ton-app-router">
+Check the Next TON example
+</Card>
+<TonImplementation />
+
 </Tab>
 <Tab title="Others networks (AppKit Core)">
 
@@ -236,34 +261,71 @@ Check the Next Bitcoin example
 ## Trigger the modal
 
 <Tabs>
-<Tab title="Wagmi">
+<Tab title="AppKit">
 
-<WagmiModal />
+To open AppKit you can use our [**React components**](/appkit/react/core/components) or build your own button with AppKit [**hooks**](/appkit/react/core/hooks#useAppKit).
 
-</Tab>
-<Tab title="Ethers v5">
+<CodeGroup>
 
-<Ethers5Modal />
+```tsx ConnectButton.tsx
+import { AppKitButton } from '@reown/appkit/react'
 
-</Tab>
-<Tab title="Ethers">
+export default function ConnectButton() {
+  return <AppKitButton />
+}
+```
 
-<EthersModal />
+```tsx ConnectButtonWithHooks.tsx
+import { useAppKit } from '@reown/appkit/react'
 
-</Tab>
-<Tab title="Solana">
+export default function ConnectButton() {
+  const { open } = useAppKit()
 
-<SolanaModal />
+  return (
+    <>
+      <button onClick={() => open()}>Open Connect Modal</button>
+      <button onClick={() => open({ view: 'Networks' })}>Open Network Modal</button>
+    </>
+  )
+}
+```
+
+</CodeGroup>
 
 </Tab>
-<Tab title="Bitcoin">
+<Tab title="AppKit Core">
 
-<BitcoinModal />
+To open AppKit Core you need to call the `connect` function from the Universal Connector.
 
-</Tab>
-<Tab title="Others networks (AppKit Core)">
+```tsx
+// get the session from the universal connector
+const handleConnect = async () => {
+  if (!universalConnector) {
+    return
+  }
 
-<CoreModal />
+  const { session: providerSession } = await universalConnector.connect()
+  setSession(providerSession)
+}
+
+// disconnect the universal connector
+const handleDisconnect = async () => {
+  if (!universalConnector) {
+    return
+  }
+  await universalConnector.disconnect()
+  setSession(null)
+}
+
+...
+
+return (
+  <div>
+    <button onClick={handleConnect}>Open AppKit Core</button>
+    <button onClick={handleDisconnect}>Disconnect</button>
+  </div>
+)
+```
 
 </Tab>
 </Tabs>
@@ -276,17 +338,17 @@ Check the Next Bitcoin example
 [Wagmi hooks](https://wagmi.sh/react/api/hooks/useReadContract) can help us interact with wallets and smart contracts:
 
 ```tsx
-import { useReadContract } from "wagmi";
-import { USDTAbi } from "../abi/USDTAbi";
+import { useReadContract } from 'wagmi'
+import { USDTAbi } from '../abi/USDTAbi'
 
-const USDTAddress = "0x...";
+const USDTAddress = '0x...'
 
 function App() {
   const result = useReadContract({
     abi: USDTAbi,
     address: USDTAddress,
-    functionName: "totalSupply",
-  });
+    functionName: 'totalSupply'
+  })
 }
 ```
 
@@ -298,38 +360,38 @@ Read more about Wagmi hooks for smart contract interaction [here](https://wagmi.
 [Ethers](https://docs.ethers.org/v6/) can help us interact with wallets and smart contracts:
 
 ```tsx
-import { useAppKitProvider, useAppKitAccount } from "@reown/appkit/react";
-import { BrowserProvider, Contract, formatUnits } from "ethers";
+import { useAppKitProvider, useAppKitAccount } from '@reown/appkit/react'
+import { BrowserProvider, Contract, formatUnits } from 'ethers'
 
-const USDTAddress = "0x617f3112bf5397D0467D315cC709EF968D9ba546";
+const USDTAddress = '0x617f3112bf5397D0467D315cC709EF968D9ba546'
 
 // The ERC-20 Contract ABI, which is a common contract interface
 // for tokens (this is the Human-Readable ABI format)
 const USDTAbi = [
-  "function name() view returns (string)",
-  "function symbol() view returns (string)",
-  "function balanceOf(address) view returns (uint)",
-  "function transfer(address to, uint amount)",
-  "event Transfer(address indexed from, address indexed to, uint amount)",
-];
+  'function name() view returns (string)',
+  'function symbol() view returns (string)',
+  'function balanceOf(address) view returns (uint)',
+  'function transfer(address to, uint amount)',
+  'event Transfer(address indexed from, address indexed to, uint amount)'
+]
 
 function Components() {
-  const { address, caipAddress, isConnected } = useAppKitAccount();
-  const { walletProvider } = useAppKitProvider("eip155");
+  const { address, caipAddress, isConnected } = useAppKitAccount()
+  const { walletProvider } = useAppKitProvider('eip155')
 
   async function getBalance() {
-    if (!isConnected) throw Error("User disconnected");
+    if (!isConnected) throw Error('User disconnected')
 
-    const ethersProvider = new BrowserProvider(walletProvider);
-    const signer = await ethersProvider.getSigner();
+    const ethersProvider = new BrowserProvider(walletProvider)
+    const signer = await ethersProvider.getSigner()
     // The Contract object
-    const USDTContract = new Contract(USDTAddress, USDTAbi, signer);
-    const USDTBalance = await USDTContract.balanceOf(address);
+    const USDTContract = new Contract(USDTAddress, USDTAbi, signer)
+    const USDTBalance = await USDTContract.balanceOf(address)
 
-    console.log(formatUnits(USDTBalance, 18));
+    console.log(formatUnits(USDTBalance, 18))
   }
 
-  return <button onClick={getBalance}>Get User Balance</button>;
+  return <button onClick={getBalance}>Get User Balance</button>
 }
 ```
 
@@ -348,11 +410,11 @@ Next.js relies on [SSR](https://nextjs.org/docs/pages/building-your-application/
 ```ts
 // Path: next.config.js
 const nextConfig = {
-  webpack: (config) => {
-    config.externals.push("pino-pretty", "lokijs", "encoding");
-    return config;
-  },
-};
+  webpack: config => {
+    config.externals.push('pino-pretty', 'lokijs', 'encoding')
+    return config
+  }
+}
 ```
 
 - [Learn more about SSR with Wagmi](https://wagmi.sh/react/guides/ssr)
@@ -360,7 +422,7 @@ const nextConfig = {
 ## Video Tutorial
 
 <div style={{ position: 'relative', width: '100%', paddingBottom: '56.25%', height: 0 }}>
-  <iframe 
+  <iframe
     style={{
       position: 'absolute',
       top: 0,
@@ -387,33 +449,35 @@ If you are starting from scratch, you can use the following methods to set up yo
 <Accordion title="Set up Reown AppKit using AI">
   If you're using Cursor IDE (or another AI based IDE) to build a project with Reown AppKit, Reown provides a `.mdc` file that enhances your development experience. The `reown-appkit.mdc` [file here](https://github.com/reown-com/reown-docs/blob/main/reown-appkit.mdc) contains Cursor-specific rules and type hints for Reown AppKit.
 
-  To use it in your project:
+To use it in your project:
 
-  1. Copy the `reown-appkit.mdc` file from this repository
-  2. Create a `.cursor/rules` folder in your project's root directory (if it doesn't exist)
-  3. Place the `.mdc` file in your project's `.cursor/rules` folder
+1. Copy the `reown-appkit.mdc` file from this repository
+2. Create a `.cursor/rules` folder in your project's root directory (if it doesn't exist)
+3. Place the `.mdc` file in your project's `.cursor/rules` folder
+
+For more info, refer to [Cursor's documentation](https://docs.cursor.com/context/rules#project-rules).
 
-  For more info, refer to [Cursor's documentation](https://docs.cursor.com/context/rules#project-rules).
 </Accordion>
 <Accordion title="AppKit CLI">
   Reown offers a dedicated CLI to set up a minimal version of AppKit in the easiest and quickest way possible.
 
-  To do this, please run the command below.
+To do this, please run the command below.
+
+```bash
+npx @reown/appkit-cli
+```
 
-  ```bash
-  npx @reown/appkit-cli
-  ```
+After running the command, you will be prompted to confirm the installation of the CLI. Upon your confirmation, the CLI will request the following details:
 
-  After running the command, you will be prompted to confirm the installation of the CLI. Upon your confirmation, the CLI will request the following details:
+1. **Project Name**: Enter the name for your project.
+2. **Framework**: Select your preferred framework or library. Currently, you have three options: React, Next.js, and Vue.
+3. **Network-Specific libraries**: Choose whether you want to install Wagmi, Ethers, Solana, or Multichain (EVM + Solana).
 
-  1. **Project Name**: Enter the name for your project.
-  2. **Framework**: Select your preferred framework or library. Currently, you have three options: React, Next.js, and Vue.
-  3. **Network-Specific libraries**: Choose whether you want to install Wagmi, Ethers, Solana, or Multichain (EVM + Solana).
+After providing the project name and selecting your preferences, the CLI will install a minimal example of AppKit with your preferred blockchain library. The example will be pre-configured with a `projectId` that will only work on `localhost`.
 
-  After providing the project name and selecting your preferences, the CLI will install a minimal example of AppKit with your preferred blockchain library. The example will be pre-configured with a `projectId` that will only work on `localhost`.
+To fully configure your project, please obtain a `projectId` from the Reown Dashboard and update your project accordingly.
 
-  To fully configure your project, please obtain a `projectId` from the Reown Dashboard and update your project accordingly.
+**Refer to [this section](#cloud-configuration) for more information.**
 
-  **Refer to [this section](#cloud-configuration) for more information.**
 </Accordion>
 </AccordionGroup>
diff --git a/appkit/nuxt/core/installation.mdx b/appkit/nuxt/core/installation.mdx
index 84321bad8..e84a81cb5 100644
--- a/appkit/nuxt/core/installation.mdx
+++ b/appkit/nuxt/core/installation.mdx
@@ -2,23 +2,21 @@
 title: Installation
 ---
 
-import CloudBanner from "/snippets/cloud-banner.mdx";
+import CloudBanner from '/snippets/cloud-banner.mdx'
 
-import NuxtWagmiImplementation from "/snippets/appkit/nuxt/wagmi/about/implementation.mdx";
-import NuxtWagmiModal from "/snippets/appkit/nuxt/wagmi/about/triggermodal.mdx";
+import NuxtWagmiImplementation from '/snippets/appkit/nuxt/wagmi/about/implementation.mdx'
 
-import NuxtEthersImplementation from "/snippets/appkit/nuxt/ethers/about/implementation.mdx";
-import NuxtEthersModal from "/snippets/appkit/nuxt/ethers/about/triggermodal.mdx";
+import NuxtEthersImplementation from '/snippets/appkit/nuxt/ethers/about/implementation.mdx'
 
-import NuxtSolanaImplementation from "/snippets/appkit/nuxt/solana/about/implementation.mdx";
-import NuxtSolanaModal from "/snippets/appkit/nuxt/solana/about/triggermodal.mdx";
+import NuxtSolanaImplementation from '/snippets/appkit/nuxt/solana/about/implementation.mdx'
 
-import NuxtBitcoinImplementation from "/snippets/appkit/nuxt/bitcoin/about/implementation.mdx";
-import NuxtBitcoinModal from "/snippets/appkit/nuxt/bitcoin/about/triggermodal.mdx";
+import NuxtBitcoinImplementation from '/snippets/appkit/nuxt/bitcoin/about/implementation.mdx'
+
+import NuxtTonImplementation from '/snippets/appkit/nuxt/ton/about/implementation.mdx'
 
 # Nuxt
 
-AppKit has support for [Wagmi](https://wagmi.sh/) and [Ethers v6](https://docs.ethers.org/v6/) on Ethereum, [@solana/web3.js](https://solana-labs.github.io/solana-web3.js/) on Solana and Bitcoin.
+AppKit has support for [Wagmi](https://wagmi.sh/) and [Ethers v6](https://docs.ethers.org/v6/) on Ethereum, [@solana/web3.js](https://solana-labs.github.io/solana-web3.js/) on Solana, Bitcoin and TON.
 Choose one of these to get started.
 
 <Note>
@@ -119,12 +117,35 @@ pnpm add @reown/appkit @reown/appkit-adapter-bitcoin
 
 </CodeGroup>
 
+</Tab>
+<Tab title="TON">
+
+<CodeGroup>
+
+```bash npm
+npm install @reown/appkit @reown/appkit-adapter-ton
+```
+
+```bash Yarn
+yarn add @reown/appkit @reown/appkit-adapter-ton
+```
+
+```bash Bun
+bun add @reown/appkit @reown/appkit-adapter-ton
+```
+
+```bash pnpm
+pnpm add @reown/appkit @reown/appkit-adapter-ton
+```
+
+</CodeGroup>
+
 </Tab>
 </Tabs>
 
 ## Cloud Configuration
 
-Create a new project on Reown Dashboard at https://dashboard.reown.com and obtain a new project ID.
+Create a new project on [Reown Dashboard](https://dashboard.reown.com) and obtain a new project ID.
 
 <CloudBanner />
 
@@ -153,88 +174,95 @@ Check the Nuxt Wagmi example
 
 <NuxtBitcoinImplementation />
 
+</Tab>
+<Tab title="TON">
+
+<NuxtTonImplementation />
+
 </Tab>
 </Tabs>
 
 ## Trigger the modal
 
-The recommended way to trigger the modal in Nuxt is to use the `<appkit-button />` web component wrapped in `<client-only>` for SSR compatibility:
+<Note>
+  AppKit for Nuxt requires SSR compatibility considerations. Make sure to use the `<client-only>` wrapper and configure your Nuxt app appropriately.
+</Note>
 
-``` javascript
+<Tabs>
+<Tab title="AppKit">
+
+To open AppKit you can use our [**web components**](/appkit/vue/core/components) or build your own button with AppKit [**composables**](/appkit/vue/core/composables#useAppKit).
+
+<CodeGroup>
+
+```vue ConnectButton.vue
 <template>
   <client-only>
-    <div class="appkit-buttons-container">
-      <appkit-button />
-    </div>
+    <appkit-button />
   </client-only>
 </template>
 ```
 
-The `<appkit-button />` is a web component that's automatically registered when AppKit is initialized. The `<client-only>` wrapper ensures it only renders on the client side, preventing SSR hydration issues.
-
-### Alternative approaches
-
-You can also trigger the modal programmatically using the AppKit composables:
-
-``` javascript
+```vue ConnectButtonWithComposables.vue
 <script setup lang="ts">
-import { useAppKit } from '@reown/appkit/vue';
+import { useAppKit } from '@reown/appkit/vue'
 
-const { open } = useAppKit();
-
-function openModal() {
-  open();
-}
-
-function openConnectModal() {
-  open({ view: 'Connect' });
-}
-
-function openAccountModal() {
-  open({ view: 'Account' });
-}
+const { open } = useAppKit()
 </script>
 
 <template>
   <client-only>
-    <button @click="openModal">Open Modal</button>
-    <button @click="openConnectModal">Connect Wallet</button>
-    <button @click="openAccountModal">View Account</button>
+    <button @click="open()">Open Connect Modal</button>
+    <button @click="open({ view: 'Networks' })">Open Network Modal</button>
   </client-only>
 </template>
 ```
 
-Or use other AppKit web components:
+</CodeGroup>
 
-``` javascript
-<template>
-  <client-only>
-    <appkit-connect-button />
-    <appkit-account-button />
-    <appkit-network-button />
-  </client-only>
-</template>
-```
+<Note>
+  The `<client-only>` wrapper ensures AppKit components only render on the client side, preventing SSR hydration issues.
+</Note>
 
-<Tabs>
-<Tab title="Wagmi">
+</Tab>
+<Tab title="AppKit Core">
 
-<NuxtWagmiModal />
+To open AppKit Core you need to call the `connect` function from the Universal Connector.
 
-</Tab>
-<Tab title="Ethers">
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
 
-<NuxtEthersModal />
+let session = ref(null)
 
-</Tab>
-<Tab title="Solana">
+async function handleConnect() {
+  // universalConnector is the universal connector instance from the implementation section
+  if (!universalConnector) {
+    return
+  }
 
-<NuxtSolanaModal />
+  const { session: providerSession } = await universalConnector.connect()
+  session.value = providerSession
+}
 
-</Tab>
-<Tab title="Bitcoin">
+async function handleDisconnect() {
+  if (!universalConnector) {
+    return
+  }
+  await universalConnector.disconnect()
+  session.value = null
+}
+</script>
 
-<NuxtBitcoinModal />
+<template>
+  <client-only>
+    <div>
+      <button @click="handleConnect">Open AppKit Core</button>
+      <button @click="handleDisconnect">Disconnect</button>
+    </div>
+  </client-only>
+</template>
+```
 
 </Tab>
 </Tabs>
@@ -263,6 +291,7 @@ bun add @wagmi/core
 ```bash pnpm
 pnpm add @wagmi/core
 ```
+
 </CodeGroup>
 
 [Wagmi actions](https://wagmi.sh/core/api/actions/readContract) can help us interact with wallets and smart contracts:
@@ -270,17 +299,17 @@ pnpm add @wagmi/core
 For this use case, we need to import the `wagmiConfig` from our AppKit WagmiAdapter configuration.
 
 ```ts
-import { readContract } from "@wagmi/core";
-import { USDTAbi } from "../abi/USDTAbi";
+import { readContract } from '@wagmi/core'
+import { USDTAbi } from '../abi/USDTAbi'
 
-const USDTAddress = "0x...";
+const USDTAddress = '0x...'
 
 const data = readContract(wagmiConfig, {
   address: USDTAddress,
   abi: USDTAbi,
-  functionName: "totalSupply",
-  args: [],
-});
+  functionName: 'totalSupply',
+  args: []
+})
 ```
 
 Read more about Wagmi actions for smart contract interaction [here](https://wagmi.sh/core/actions/readContract).
@@ -291,25 +320,25 @@ Read more about Wagmi actions for smart contract interaction [here](https://wagm
 [Ethers](https://docs.ethers.org/v6/) can help us interact with wallets and smart contracts:
 
 ```ts
-import { BrowserProvider, Contract, parseEther } from "ethers";
-import { useAppKitProvider, useAppKitAccount } from "@reown/appkit/vue";
+import { BrowserProvider, Contract, parseEther } from 'ethers'
+import { useAppKitProvider, useAppKitAccount } from '@reown/appkit/vue'
 
-const { walletProvider } = useAppKitProvider("eip155");
-const { address } = useAppKitAccount();
+const { walletProvider } = useAppKitProvider('eip155')
+const { address } = useAppKitAccount()
 
-if (!walletProvider) throw Error("No provider found");
-if (!address) throw Error("No address found");
+if (!walletProvider) throw Error('No provider found')
+if (!address) throw Error('No address found')
 
 function sendTransaction() {
   const tx = {
     from: address,
-    to: "0x...", // any address
-    value: parseEther("0.0001"),
-  };
-  const ethersProvider = new BrowserProvider(walletProvider);
-  const signer = await ethersProvider.getSigner();
-  const tx = await signer.sendTransaction(tx);
-  console.log("transaction:", tx);
+    to: '0x...', // any address
+    value: parseEther('0.0001')
+  }
+  const ethersProvider = new BrowserProvider(walletProvider)
+  const signer = await ethersProvider.getSigner()
+  const tx = await signer.sendTransaction(tx)
+  console.log('transaction:', tx)
 }
 ```
 
diff --git a/appkit/overview.mdx b/appkit/overview.mdx
index 4510f0311..38464dfeb 100644
--- a/appkit/overview.mdx
+++ b/appkit/overview.mdx
@@ -2,7 +2,7 @@
 title: Overview
 ---
 
-**Reown AppKit** is an open-source all-in-one SDK with a generous free tier and the official gateway to the WalletConnect Network for delivering smooth wallet connections, transactions, logins, and more within your app - designed to onboard millions and scale with data-driven precision. It abstracts the complexity of blockchain infrastructure so you can focus on building apps that users love. 
+**Reown AppKit** is an open-source all-in-one SDK with a generous free tier and the official gateway to the WalletConnect Network for delivering smooth wallet connections, transactions, logins, and more within your app - designed to onboard millions and scale with data-driven precision. It abstracts the complexity of blockchain infrastructure so you can focus on building apps that users love.
 
 **AppKit includes:**
 
@@ -15,110 +15,124 @@ title: Overview
 - Built-in security (transaction screening and domain verification)
 - SDKs for **React, React Native, Flutter, Kotlin, Swift, Unity**, and more
 
-<video
-  controls
-  autoPlay
-  src="/images/appkit-overview-demo.mp4"
-  className="w-full"
-></video>
+<video controls autoPlay src="/images/appkit-overview-demo.mp4" className="w-full"></video>
 
 ### Demo
-<Card icon="flask" title="Try Demo" href="http://demo.reown.com/?utm_source=appkit&utm_medium=docs&utm_campaign=backlinks" external />
-<br/>
+
+<Card
+  icon="flask"
+  title="Try Demo"
+  href="http://demo.reown.com/?utm_source=appkit&utm_medium=docs&utm_campaign=backlinks"
+  external
+/>
+<br />
 
 **Ready to get started? Check out the Quickstart section [here](#quickstart). Learn more about all the features AppKit offers [here](#features).**
 
 ## Quickstart
+
 <CardGroup cols={2}>
   <Card title="React" icon="react" href="./react/core/installation">
     Get started with AppKit in React.
   </Card>
 
-  <Card title="Next.js" icon="square-n" href="./next/core/installation">
-    Get started with AppKit in Next.js.
-  </Card>
+<Card title="Next.js" icon="square-n" href="./next/core/installation">
+  Get started with AppKit in Next.js.
+</Card>
 
-  <Card title="Vue" icon="vuejs" href="./vue/core/installation">
-    Get started with AppKit in Vue.
-  </Card>
+<Card title="Vue" icon="vuejs" href="./vue/core/installation">
+  Get started with AppKit in Vue.
+</Card>
 
-  <Card title="Svelte" icon="s" href="./svelte/core/installation">
-    Get started with AppKit in Svelte.
-  </Card>
+<Card title="Svelte" icon="/images/icons/svelte.svg" href="./svelte/core/installation">
+  Get started with AppKit in Svelte.
+</Card>
 
-  <Card title="Nuxt" icon="mountains" href="./nuxt/core/installation">
-    Get started with AppKit in Nuxt.
-  </Card>
+<Card title="Nuxt" icon="mountains" href="./nuxt/core/installation">
+  Get started with AppKit in Nuxt.
+</Card>
 
-  <Card title="JavaScript" icon="js" href="./javascript/core/installation">
-    Get started with AppKit in JavaScript.
-  </Card>
+<Card title="JavaScript" icon="js" href="./javascript/core/installation">
+  Get started with AppKit in JavaScript.
+</Card>
 
-  <Card title="React Native" icon="react" href="./react-native/core/installation">
-    Get started with AppKit in React Native.
-  </Card>
+<Card title="React Native" icon="react" href="./react-native/core/installation">
+  Get started with AppKit in React Native.
+</Card>
 
-  <Card title="Flutter" icon="flutter" href="./flutter/core/installation">
-    Get started with AppKit in Flutter.
-  </Card>
+<Card title="Flutter" icon="flutter" href="./flutter/core/installation">
+  Get started with AppKit in Flutter.
+</Card>
 
-  <Card title="Android" icon="android" href="./android/core/installation">
-    Get started with AppKit in Android.
-  </Card>
+<Card title="Android" icon="android" href="./android/core/installation">
+  Get started with AppKit in Android.
+</Card>
 
-  <Card title="iOS" icon="apple" href="./ios/core/installation">
-    Get started with AppKit in iOS.
-  </Card>
+<Card title="iOS" icon="apple" href="./ios/core/installation">
+  Get started with AppKit in iOS.
+</Card>
 
   <Card title="Unity" icon="unity" href="./unity/core/installation">
     Get started with AppKit in Unity.
   </Card>
 </CardGroup>
 
-
 ## Features
-<Frame>
-![AppKit banner](/images/appkit.png)
-</Frame>
+
+<Frame>![AppKit banner](/images/appkit.png)</Frame>
 
 #### Framework Agnostic
+
 Integrate effortlessly with popular frameworks like React, Vue, Svelte, vanilla JavaScript, and more.
 
 #### EIP-6963 Support
+
 Seamlessly connect browser extension wallets for an enhanced user experience. Learn more about **EIP-6963 [here](https://eips.ethereum.org/EIPS/eip-6963).**
 
 #### Email & Social Login
+
 Expand your app’s reach by enabling users to connect using their email or social accounts. Implement these features with minimal code and leverage Smart Account functionality for advanced capabilities.
 
 #### On-Ramp
+
 Allow users to securely purchase crypto with fiat, directly within your app, supporting over 100 cryptocurrencies.
 
 #### Customizable UI
+
 Choose between light and dark modes, accent colors, or fully customize the interface with your own branding.
 
 #### Multi-Chain Ready
+
 Easily configure support for EVM and non-EVM chains, giving users access to multiple blockchain networks.
 
 #### Hundreds of Wallets
+
 Connect with popular wallets like MetaMask, Rainbow, Coinbase, and many more to maximize accessibility.
 
 #### Transaction History
+
 Display all user transactions directly in the account view for added transparency.
 
 #### Swaps
+
 Simplify token swapping for users with AppKit Modal, allowing secure, in-app swaps with just one line of code.
 
 #### One-Click Auth
+
 Streamline user authentication with WalletConnect v2 integration. Users can sign in and connect to your app with just one tap, supporting multi-chain and multi-account signing.
 
 #### Smart Accounts
+
 Enhance security and user convenience with features like multi-signature authorization and automated transaction workflows.
 
 #### Solana Support
+
 Bring the Solana blockchain to your application with simple, secure wallet connections and seamless transaction support.
 
 #### Notifications
+
 Engage your users with web3-native notifications sent straight to their wallets or through in-app and Web3Inbox notifications.
 
 #### Telegram MiniApps
+
 Build Web3 mini-apps for Telegram with a prebuilt interface for connecting self-custodial wallets or enabling wallet creation via email or social login.
diff --git a/appkit/react-native/core/installation.mdx b/appkit/react-native/core/installation.mdx
index a515601a2..9bd385255 100644
--- a/appkit/react-native/core/installation.mdx
+++ b/appkit/react-native/core/installation.mdx
@@ -2,10 +2,10 @@
 title: Installation
 ---
 
-import CloudBanner from "/snippets/cloud-banner.mdx";
-import ExpoBabel from "/snippets/appkit/react-native/expo/babel-config-expo53.mdx"
+import CloudBanner from '/snippets/cloud-banner.mdx'
+import ExpoBabel from '/snippets/appkit/react-native/expo/babel-config-expo53.mdx'
 
-AppKit for React Native enables seamless integration with multiple blockchain ecosystems, including **EVM chains (like Ethereum, Polygon, etc.), Solana, and Bitcoin**. It provides a unified API to manage wallet connections, interact with different chains, and build rich multi-chain applications.
+AppKit for React Native enables seamless integration with multiple blockchain ecosystems, including **EVM chains (like Ethereum, Polygon, etc.), Solana, Bitcoin, and TON**. It provides a unified API to manage wallet connections, interact with different chains, and build rich multi-chain applications.
 
 At the core of AppKit is a centralized `AppKit` instance that handles connection logic, manages various chain adapters, and provides data to your application via a React Context.
 
@@ -26,6 +26,7 @@ npx @reown/appkit-cli
 ### Add AppKit to your existing project
 
 Installation is a two-step process:
+
 1. Install the core AppKit library.
 2. Install the specific chain adapters you need for your application.
 
@@ -61,6 +62,7 @@ npx pod-install
 </Tabs>
 
 ### Chain Adapters
+
 <Note>For React Native CLI projects, use `npm install ...` or `yarn add ...`.</Note>
 
 Install the adapters for the chains you intend to support:
@@ -140,7 +142,7 @@ Install the adapters for the chains you intend to support:
         export const appKit = createAppKit({
           projectId,
           // Add your AppKitNetwork array for 'networks' matching the wagmiCoreConfig chains
-          // networks: [mainnet, sepolia, ...], 
+          // networks: [mainnet, sepolia, ...],
           adapters: [wagmiAdapter, /* other adapters for other chain types */],
           // ... other AppKit options
         });
@@ -182,6 +184,7 @@ Install the adapters for the chains you intend to support:
         <p>For a practical implementation example, you can refer to the <a href="https://github.com/reown-com/appkit-react-native/blob/develop/apps/native/App.tsx" target="_blank\">Reown AppKit + Wagmi example on GitHub</a>.</p>
       </Tab>
     </Tabs>
+
   </Tab>
   <Tab title="Solana">
     <p>For Solana, install the Solana adapter:</p>
@@ -197,6 +200,7 @@ Install the adapters for the chains you intend to support:
 
     const solanaAdapter = new SolanaAdapter();
     ```
+
   </Tab>
   <Tab title="Bitcoin">
     <p>For Bitcoin, install the Bitcoin adapter:</p>
@@ -209,6 +213,20 @@ Install the adapters for the chains you intend to support:
 
     const bitcoinAdapter = new BitcoinAdapter();
     ```
+
+  </Tab>
+  <Tab title="TON">
+    <p>For TON, install the TON adapter:</p>
+    ```bash
+    npx expo install @reown/appkit-ton-react-native
+    ```
+    <p>To initialize the TON adapter:</p>
+    ```typescript
+    import { TonAdapter } from '@reown/appkit-ton-react-native';
+
+    const tonAdapter = new TonAdapter();
+    ```
+
   </Tab>
 </Tabs>
 
@@ -218,53 +236,53 @@ Install the adapters for the chains you intend to support:
 
 Before setting up AppKit, you need to wrap your app with `SafeAreaProvider` from `react-native-safe-area-context`. This is required for proper modal rendering and safe area handling.
 
-<Note>
-**Expo users**: You can skip this step as it's already handled internally by Expo.
-</Note>
+<Note>**Expo users**: You can skip this step as it's already handled internally by Expo.</Note>
 
 ```tsx
-import { SafeAreaProvider } from 'react-native-safe-area-context';
+import { SafeAreaProvider } from 'react-native-safe-area-context'
 
 function App() {
-  return <SafeAreaProvider>{/* Your app content */}</SafeAreaProvider>;
+  return <SafeAreaProvider>{/* Your app content */}</SafeAreaProvider>
 }
 ```
 
 For more detailed information about `SafeAreaProvider`, check the [official documentation](https://appandflow.github.io/react-native-safe-area-context/api/safe-area-provider).
 
-
-
 ### 1. Initialize AppKit
 
 Create an instance of `AppKit`. This is where you'll configure your project ID (if using WalletConnect features) and define the chains your application will support, along with their respective adapters.
 
 <Note>
-To ensure proper functioning with React Native, make sure `import "@walletconnect/react-native-compat";` is the very first line in your configuration file (e.g., `AppKitConfig.ts`), even before other imports. This import handles necessary polyfills.
+  To ensure proper functioning with React Native, make sure `import
+  "@walletconnect/react-native-compat";` is the very first line in your configuration file (e.g.,
+  `AppKitConfig.ts`), even before other imports. This import handles necessary polyfills.
 </Note>
 
 ```typescript
 // src/AppKitConfig.ts (or wherever you prefer to configure it)
-import "@walletconnect/react-native-compat";
+import '@walletconnect/react-native-compat'
 
-import { createAppKit, bitcoin, solana, type AppKitNetwork } from '@reown/appkit-react-native';
-import { EthersAdapter } from '@reown/appkit-ethers-react-native';
-import { SolanaAdapter } from '@reown/appkit-solana-react-native';
-import { BitcoinAdapter } from '@reown/appkit-bitcoin-react-native';
+import { createAppKit, bitcoin, solana, type AppKitNetwork } from '@reown/appkit-react-native'
+import { EthersAdapter } from '@reown/appkit-ethers-react-native'
+import { SolanaAdapter } from '@reown/appkit-solana-react-native'
+import { BitcoinAdapter } from '@reown/appkit-bitcoin-react-native'
+import { TonAdapter } from '@reown/appkit-ton-react-native'
 
 // You can use 'viem/chains' or define your own chains using `AppKitNetwork` type. Check Options/networks for more detailed info
-import { mainnet, polygon } from 'viem/chains';
+import { mainnet, polygon } from 'viem/chains'
 
-const projectId = 'YOUR_PROJECT_ID'; // Obtain from https://dashboard.reown.com/
+const projectId = 'YOUR_PROJECT_ID' // Obtain from https://dashboard.reown.com/
 
-const ethersAdapter = new EthersAdapter();
-const solanaAdapter = new SolanaAdapter();
-const bitcoinAdapter = new BitcoinAdapter();
+const ethersAdapter = new EthersAdapter()
+const solanaAdapter = new SolanaAdapter()
+const bitcoinAdapter = new BitcoinAdapter()
+const tonAdapter = new TonAdapter()
 
 export const appKit = createAppKit({
   projectId,
   networks: [mainnet, polygon, solana, bitcoin],
   defaultNetwork: mainnet, // Optional: set a default network
-  adapters: [ethersAdapter, solanaAdapter, bitcoinAdapter],
+  adapters: [ethersAdapter, solanaAdapter, bitcoinAdapter, tonAdapter],
 
   // Other AppKit options (e.g., metadata for your dApp)
   metadata: {
@@ -273,15 +291,17 @@ export const appKit = createAppKit({
     url: 'https://myapp.com',
     icons: ['https://myapp.com/icon.png'],
     redirect: {
-      native: "YOUR_APP_SCHEME://",
-      universal: "YOUR_APP_UNIVERSAL_LINK.com",
-    },
+      native: 'YOUR_APP_SCHEME://',
+      universal: 'YOUR_APP_UNIVERSAL_LINK.com'
+    }
   }
-});
+})
 ```
 
 <Note>
-**Default Features:** AppKit comes with email and social login, swaps, and onramp features enabled by default. To disable any of these features, see the [Options](./options) documentation for configuration details.
+  **Default Features:** AppKit comes with email and social login, swaps, and onramp features enabled
+  by default. To disable any of these features, see the [Options](./options) documentation for
+  configuration details.
 </Note>
 
 ### 2. Configure Storage
@@ -295,31 +315,31 @@ export interface Storage {
   /**
    * Returns all keys in storage.
    */
-  getKeys(): Promise<string[]>;
+  getKeys(): Promise<string[]>
 
   /**
    * Returns all key-value entries in storage.
    */
-  getEntries<T = any>(): Promise<[string, T][]>;
+  getEntries<T = any>(): Promise<[string, T][]>
 
   /**
    * Get an item from storage for a given key.
    * @param key The key to retrieve.
    */
-  getItem<T = any>(key: string): Promise<T | undefined>;
+  getItem<T = any>(key: string): Promise<T | undefined>
 
   /**
    * Set an item in storage for a given key.
    * @param key The key to set.
    * @param value The value to set.
    */
-  setItem<T = any>(key: string, value: T): Promise<void>;
+  setItem<T = any>(key: string, value: T): Promise<void>
 
   /**
    * Remove an item from storage for a given key.
    * @param key The key to remove.
    */
-  removeItem(key: string): Promise<void>;
+  removeItem(key: string): Promise<void>
 }
 ```
 
@@ -331,28 +351,30 @@ Finally, import your custom storage and pass it to `createAppKit` in your `AppKi
 
 ```typescript {8,24}
 // src/AppKitConfig.ts (or wherever you prefer to configure it)
-import "@walletconnect/react-native-compat";
+import '@walletconnect/react-native-compat'
 
-import { createAppKit, bitcoin, solana, type AppKitNetwork } from '@reown/appkit-react-native';
-import { EthersAdapter } from '@reown/appkit-ethers-react-native';
-import { SolanaAdapter } from '@reown/appkit-solana-react-native';
-import { BitcoinAdapter } from '@reown/appkit-bitcoin-react-native';
-import { storage } from './StorageUtil'; // Import your custom storage
+import { createAppKit, bitcoin, solana, type AppKitNetwork } from '@reown/appkit-react-native'
+import { EthersAdapter } from '@reown/appkit-ethers-react-native'
+import { SolanaAdapter } from '@reown/appkit-solana-react-native'
+import { BitcoinAdapter } from '@reown/appkit-bitcoin-react-native'
+import { TonAdapter } from '@reown/appkit-ton-react-native'
+import { storage } from './StorageUtil' // Import your custom storage
 
 // You can use 'viem/chains' or define your own chains using `AppKitNetwork` type. Check Options/networks for more detailed info
-import { mainnet, polygon } from 'viem/chains';
+import { mainnet, polygon } from 'viem/chains'
 
-const projectId = 'YOUR_PROJECT_ID'; // Obtain from https://dashboard.reown.com/
+const projectId = 'YOUR_PROJECT_ID' // Obtain from https://dashboard.reown.com/
 
-const ethersAdapter = new EthersAdapter();
-const solanaAdapter = new SolanaAdapter();
-const bitcoinAdapter = new BitcoinAdapter();
+const ethersAdapter = new EthersAdapter()
+const solanaAdapter = new SolanaAdapter()
+const bitcoinAdapter = new BitcoinAdapter()
+const tonAdapter = new TonAdapter()
 
 export const appKit = createAppKit({
   projectId,
   networks: [mainnet, polygon, solana, bitcoin],
   defaultNetwork: mainnet,
-  adapters: [ethersAdapter, solanaAdapter, bitcoinAdapter],
+  adapters: [ethersAdapter, solanaAdapter, bitcoinAdapter, tonAdapter],
   storage,
 
   // Other AppKit options (e.g., metadata for your dApp)
@@ -362,11 +384,11 @@ export const appKit = createAppKit({
     url: 'https://myapp.com',
     icons: ['https://myapp.com/icon.png'],
     redirect: {
-      native: "YOUR_APP_SCHEME://",
-      universal: "YOUR_APP_UNIVERSAL_LINK.com",
-    },
+      native: 'YOUR_APP_SCHEME://',
+      universal: 'YOUR_APP_UNIVERSAL_LINK.com'
+    }
   }
-});
+})
 ```
 
 ### 3. Provide AppKit Instance
@@ -375,13 +397,13 @@ Wrap your application with the `AppKitProvider` to make the `AppKit` instance av
 
 ```tsx {6,13,15}
 // App.tsx
-import "@walletconnect/react-native-compat";
+import '@walletconnect/react-native-compat'
 
-import React from 'react';
-import { SafeAreaProvider } from 'react-native-safe-area-context';
-import { AppKitProvider } from '@reown/appkit-react-native';
-import { appKit } from './AppKitConfig'; // Your configured AppKit instance
-import YourAppRootComponent from './YourAppRootComponent';
+import React from 'react'
+import { SafeAreaProvider } from 'react-native-safe-area-context'
+import { AppKitProvider } from '@reown/appkit-react-native'
+import { appKit } from './AppKitConfig' // Your configured AppKit instance
+import YourAppRootComponent from './YourAppRootComponent'
 
 function App() {
   return (
@@ -390,10 +412,10 @@ function App() {
         <YourAppRootComponent />
       </AppKitProvider>
     </SafeAreaProvider>
-  );
+  )
 }
 
-export default App;
+export default App
 ```
 
 ### 4. Render AppKit UI
@@ -402,8 +424,8 @@ To display the AppKit modal and other potential UI elements, you need to include
 
 ```tsx {3,11}
 // YourAppRootComponent.tsx (or App.tsx if it contains your main layout)
-import React from 'react';
-import { AppKit } from '@reown/appkit-react-native';
+import React from 'react'
+import { AppKit } from '@reown/appkit-react-native'
 // ... other imports for your app components.
 
 function YourAppRootComponent() {
@@ -413,25 +435,26 @@ function YourAppRootComponent() {
       {/* Add the AppKit component here to render its UI */}
       <AppKit />
     </>
-  );
+  )
 }
 
-export default YourAppRootComponent;
+export default YourAppRootComponent
 ```
 
 <Note>
 **Expo Android Modal Issue**: If you're using Expo Router and the modal doesn't open on Android, you may need to wrap the `<AppKit />` component in a View with absolute positioning. Here's the workaround:
 
 ```tsx
-import { View } from 'react-native';
+import { View } from 'react-native'
 
 // Replace the simple <AppKit /> with:
-<View style={{ position: "absolute", height: "100%", width: "100%" }}>
+;<View style={{ position: 'absolute', height: '100%', width: '100%' }}>
   <AppKit />
 </View>
 ```
 
 This is a known issue with Expo Router on Android and this workaround resolves the modal rendering problem.
+
 </Note>
 
 ### 5. Using AppKit in Components
@@ -440,11 +463,11 @@ You can now access AppKit functionalities (like connecting, getting account stat
 
 ```tsx {2,5,6}
 // components/ConnectButton.tsx
-import { useAppKit, useAccount } from '@reown/appkit-react-native';
+import { useAppKit, useAccount } from '@reown/appkit-react-native'
 
 function ConnectButton() {
-  const { open, disconnect } = useAppKit();
-  const { address, isConnected, chainId } = useAccount();
+  const { open, disconnect } = useAppKit()
+  const { address, isConnected, chainId } = useAccount()
 
   if (isConnected) {
     return (
@@ -453,14 +476,15 @@ function ConnectButton() {
         <p>Address: {address}</p>
         <button onClick={() => disconnect()}>Disconnect</button>
       </div>
-    );
+    )
   }
 
-  return <button onClick={() => open()}>Connect Wallet</button>;
+  return <button onClick={() => open()}>Connect Wallet</button>
 }
 
-export default ConnectButton;
+export default ConnectButton
 ```
+
 For detailed examples on specific actions like signing messages, sending transactions, or switching networks, please refer to the [Hooks](./hooks#useprovider) and [Examples](#examples) sections.
 
 **Pre-built Components**
@@ -480,6 +504,7 @@ For detailed information about all available components, hooks, and examples for
 - Prioritizing installed wallets at the top of the wallet selection list
 
 All 600+ wallets in the AppKit ecosystem work via WalletConnect protocol regardless of this configuration. You only need to add the wallets your users most commonly have installed.
+
 </Info>
 
 To enable AppKit to detect wallets installed on the device, you can make specific changes to the native code of your project.
@@ -487,8 +512,10 @@ To enable AppKit to detect wallets installed on the device, you can make specifi
 <Tabs groupId="rn-environment">
   <Tab title="Expo">
 
-<Tabs >
+<Tabs>
+
 <Tab title="iOS">
+
 To enable AppKit to detect wallets installed on the device in your Expo project for iOS, follow these steps:
 
 1. Open your `app.json` (or `app.config.js`) file.
@@ -539,48 +566,44 @@ To enable AppKit to detect wallets installed on the device in your Expo project
 ```js
 // based on https://github.com/expo/config-plugins/issues/123#issuecomment-1746757954
 
-const {
-  AndroidConfig,
-  withAndroidManifest,
-  createRunOncePlugin,
-} = require("expo/config-plugins");
+const { AndroidConfig, withAndroidManifest, createRunOncePlugin } = require('expo/config-plugins')
 
 const queries = {
   package: [
-    { $: { "android:name": "com.wallet.crypto.trustapp" } },
-    { $: { "android:name": "io.metamask" } },
-    { $: { "android:name": "me.rainbow" } },
-    { $: { "android:name": "io.zerion.android" } },
-    { $: { "android:name": "io.gnosis.safe" } },
-    { $: { "android:name": "com.uniswap.mobile" } },
+    { $: { 'android:name': 'com.wallet.crypto.trustapp' } },
+    { $: { 'android:name': 'io.metamask' } },
+    { $: { 'android:name': 'me.rainbow' } },
+    { $: { 'android:name': 'io.zerion.android' } },
+    { $: { 'android:name': 'io.gnosis.safe' } },
+    { $: { 'android:name': 'com.uniswap.mobile' } }
     // Add other wallet package names here
-  ],
-};
+  ]
+}
 
 /**
  * @param {import('@expo/config-plugins').ExportedConfig} config
  */
-const withAndroidManifestService = (config) => {
-  return withAndroidManifest(config, (config) => {
+const withAndroidManifestService = config => {
+  return withAndroidManifest(config, config => {
     config.modResults.manifest = {
       ...config.modResults.manifest,
-      queries,
-    };
+      queries
+    }
 
-    return config;
-  });
-};
+    return config
+  })
+}
 
 module.exports = createRunOncePlugin(
   withAndroidManifestService,
-  "withAndroidManifestService",
-  "1.0.0"
-);
+  'withAndroidManifestService',
+  '1.0.0'
+)
 ```
 
 5. Add the wallet package names you want to be detected by your app.
+
 </Tab>
-</Tabs>
 
 </Tab>
   <Tab title="React Native CLI">
@@ -637,7 +660,9 @@ Example:
 ## Connectors
 
 <Info>
-**Optional feature** - These connectors are only needed if you want to support specific wallets that use custom connection protocols. All 600+ wallets in the AppKit ecosystem work via WalletConnect protocol regardless of this configuration.
+  **Optional feature** - These connectors are only needed if you want to support specific wallets
+  that use custom connection protocols. All 600+ wallets in the AppKit ecosystem work via
+  WalletConnect protocol regardless of this configuration.
 </Info>
 
 AppKit supports various custom connectors for specific wallets that use their own connection protocols. These connectors allow you to integrate popular wallets like Coinbase and Phantom directly into your AppKit configuration.
@@ -647,7 +672,9 @@ AppKit supports various custom connectors for specific wallets that use their ow
 Coinbase Wallet is a popular wallet that uses a custom connection protocol. To enable it in your AppKit configuration, you'll need to install the Coinbase SDK and add a specific connector.
 
 <Note>
-**Expo Compatibility:** Coinbase SDK works with [Expo Prebuild](https://docs.expo.dev/workflow/prebuild/) but not with Expo Go. You'll need to use `expo prebuild` to generate native code before building your app.
+  **Expo Compatibility:** Coinbase SDK works with [Expo
+  Prebuild](https://docs.expo.dev/workflow/prebuild/) but not with Expo Go. You'll need to use `expo
+  prebuild` to generate native code before building your app.
 </Note>
 
 To enable Coinbase Wallet, follow these steps:
@@ -697,42 +724,39 @@ npx pod-install
 
 ```typescript {4-5,9-11}
 // src/AppKitConfig.ts (or wherever you prefer to configure it)
-import "@walletconnect/react-native-compat";
+import '@walletconnect/react-native-compat'
 
-import { createAppKit } from '@reown/appkit-react-native';
-import { MMKV } from 'react-native-mmkv';
-import { CoinbaseConnector } from '@reown/appkit-coinbase-react-native';
+import { createAppKit } from '@reown/appkit-react-native'
+import { MMKV } from 'react-native-mmkv'
+import { CoinbaseConnector } from '@reown/appkit-coinbase-react-native'
 
 export const appKit = createAppKit({
   // ...
-  extraConnectors: [
-    new CoinbaseConnector({ storage: new MMKV() })
-  ],
+  extraConnectors: [new CoinbaseConnector({ storage: new MMKV() })]
   // ...
-});
+})
 ```
 
 7. Add the Coinbase response handler to process wallet responses:
 
 ```tsx
-import { handleResponse } from "@coinbase/wallet-mobile-sdk";
+import { handleResponse } from '@coinbase/wallet-mobile-sdk'
 
 // Add this to your app's deeplink handling code
 useEffect(() => {
-  const sub = Linking.addEventListener("url", ({ url }) => {
-    const handledBySdk = handleResponse(new URL(url));
+  const sub = Linking.addEventListener('url', ({ url }) => {
+    const handledBySdk = handleResponse(new URL(url))
     if (!handledBySdk) {
       // Handle other deeplinks
     }
-  });
+  })
 
-  return () => sub.remove();
-}, []);
+  return () => sub.remove()
+}, [])
 ```
 
 For more detailed information, check the [Coinbase docs](https://mobilewalletprotocol.github.io/wallet-mobile-sdk/docs/client-sdk/rn-install).
 
-
 ### Phantom & Solflare
 
 Phantom and Solflare are popular wallets on the Solana blockchain. Because they use a custom connection protocol, it requires a specific connector to be added to your AppKit configuration.
@@ -743,26 +767,26 @@ Here's how to update your `AppKitConfig.ts` file, using the example from the [Im
 
 ```typescript {4,8-11}
 // src/AppKitConfig.ts (or wherever you prefer to configure it)
-import "@walletconnect/react-native-compat";
+import '@walletconnect/react-native-compat'
 
-import { createAppKit } from '@reown/appkit-react-native';
-import { SolanaAdapter, PhantomConnector, Solflare } from '@reown/appkit-solana-react-native';
+import { createAppKit } from '@reown/appkit-react-native'
+import { SolanaAdapter, PhantomConnector, Solflare } from '@reown/appkit-solana-react-native'
 
 export const appKit = createAppKit({
   // ...
   extraConnectors: [
     new PhantomConnector({ cluster: 'mainnet-beta' }), // Or 'devnet', 'testnet'
     new SolflareConnector({ cluster: 'mainnet-beta' }) // Or 'devnet', 'testnet'
-  ],
+  ]
   // ...
-});
+})
 ```
 
 <Note>
-The `cluster` option can be set to `'mainnet-beta'`, `'devnet'`, or `'testnet'` depending on which Solana cluster you want to connect to.
+  The `cluster` option can be set to `'mainnet-beta'`, `'devnet'`, or `'testnet'` depending on which
+  Solana cluster you want to connect to.
 </Note>
 
-
 ## Examples
 
 <Tabs>
diff --git a/appkit/react/core/installation.mdx b/appkit/react/core/installation.mdx
index 22ca7f93e..f0835dc4c 100644
--- a/appkit/react/core/installation.mdx
+++ b/appkit/react/core/installation.mdx
@@ -2,29 +2,25 @@
 title: Installation
 ---
 
-import CloudBanner from "/snippets/cloud-banner.mdx";
+import CloudBanner from '/snippets/cloud-banner.mdx'
 
-import WagmiImplementation from "/snippets/appkit/react/wagmi/about/implementation.mdx";
-import WagmiModal from "/snippets/appkit/react/wagmi/about/triggermodal.mdx";
+import WagmiImplementation from '/snippets/appkit/react/wagmi/about/implementation.mdx'
 
-import Ethers5Implementation from "/snippets/appkit/react/ethers5/implementation.mdx";
-import Ethers5Modal from "/snippets/appkit/react/ethers5/triggermodal.mdx";
+import Ethers5Implementation from '/snippets/appkit/react/ethers5/implementation.mdx'
 
-import EthersImplementation from "/snippets/appkit/react/ethers/about/implementation.mdx";
-import EthersModal from "/snippets/appkit/react/ethers/about/triggermodal.mdx";
+import EthersImplementation from '/snippets/appkit/react/ethers/about/implementation.mdx'
 
-import SolanaImplementation from "/snippets/appkit/react/solana/about/implementation.mdx";
-import SolanaModal from "/snippets/appkit/react/solana/about/triggermodal.mdx";
-import SolanaPrograms from "/snippets/appkit/react/solana/about/programs.mdx";
+import SolanaImplementation from '/snippets/appkit/react/solana/about/implementation.mdx'
+import SolanaPrograms from '/snippets/appkit/react/solana/about/programs.mdx'
 
-import BitcoinImplementation from "/snippets/appkit/react/bitcoin/about/implementation.mdx";
-import BitcoinModal from "/snippets/appkit/react/bitcoin/about/triggermodal.mdx";
+import BitcoinImplementation from '/snippets/appkit/react/bitcoin/about/implementation.mdx'
 
-import CoreImplementation from "/snippets/appkit/react/core/about/implementation.mdx";
-import CoreModal from "/snippets/appkit/react/core/about/triggermodal.mdx";
+import TonImplementation from '/snippets/appkit/react/ton/about/implementation.mdx'
 
-AppKit provides seamless integration with multiple blockchain ecosystems. It supports [Wagmi](https://wagmi.sh/) and [Ethers v6](https://docs.ethers.org/v6/) on Ethereum, 
-[@solana/web3.js](https://solana-labs.github.io/solana-web3.js/) on Solana, as well as Bitcoin and other networks. AppKit Core with Universal Provider library, enable compatibility across any blockchain protocol.
+import CoreImplementation from '/snippets/appkit/react/core/about/implementation.mdx'
+
+AppKit provides seamless integration with multiple blockchain ecosystems. It supports [Wagmi](https://wagmi.sh/) and [Ethers v6](https://docs.ethers.org/v6/) on Ethereum,
+[@solana/web3.js](https://solana-labs.github.io/solana-web3.js/) on Solana, as well as Bitcoin, TON and other networks. AppKit Core with Universal Provider library, enable compatibility across any blockchain protocol.
 
 Choose one of these to get started.
 
@@ -37,11 +33,10 @@ Choose one of these to get started.
 ## Custom Installation
 
 <Warning>
-  If you are setting up your React app, please **do not use** `npx
-  create-react-app`, as it has been deprecated. Using it may cause dependency
-  issues. Instead, please use
-  [Vite](https://vitejs.dev/guide/#scaffolding-your-first-vite-project) to
-  create your React app. You can set it up by running `npm create vite@latest`.
+  If you are setting up your React app, please **do not use** `npx create-react-app`, as it has been
+  deprecated. Using it may cause dependency issues. Instead, please use
+  [Vite](https://vitejs.dev/guide/#scaffolding-your-first-vite-project) to create your React app.
+  You can set it up by running `npm create vite@latest`.
 </Warning>
 
 <Tabs>
@@ -159,6 +154,29 @@ pnpm add @reown/appkit @reown/appkit-adapter-bitcoin
 
 </CodeGroup>
 
+</Tab>
+<Tab title="TON">
+
+<CodeGroup>
+
+```bash npm
+npm install @reown/appkit @reown/appkit-adapter-ton
+```
+
+```bash Yarn
+yarn add @reown/appkit @reown/appkit-adapter-ton
+```
+
+```bash Bun
+bun add @reown/appkit @reown/appkit-adapter-ton
+```
+
+```bash pnpm
+pnpm add @reown/appkit @reown/appkit-adapter-ton
+```
+
+</CodeGroup>
+
 </Tab>
 <Tab title="Others networks (AppKit Core)">
 
@@ -187,13 +205,13 @@ pnpm add @reown/appkit @reown/appkit-universal-connector @reown/appkit-common et
 
 ## Cloud Configuration
 
-Create a new project on Reown Dashboard at https://dashboard.reown.com and obtain a new project ID.
+Create a new project on [Reown Dashboard](https://dashboard.reown.com) and obtain a new project ID.
 
 <CloudBanner />
 
 ## Implementation
 
-### AppKitProvider Component
+### `AppKitProvider` Component
 
 AppKit now provides an `AppKitProvider` React component for easy integration in React applications. This component wraps your app and provides the AppKit context to all child components.
 
@@ -204,9 +222,11 @@ function App() {
   return (
     <AppKitProvider
       projectId="YOUR_PROJECT_ID"
-      networks={[
-        /* Your Networks */
-      ]}
+      networks={
+        [
+          /* Your Networks */
+        ]
+      }
     >
       {/* Your App */}
     </AppKitProvider>
@@ -214,7 +234,7 @@ function App() {
 }
 ```
 
-### Framework-Specific Implementation
+### Framework Specific Implementation
 
 <Tabs>
 <Tab title="Wagmi">
@@ -256,6 +276,11 @@ Check the React Bitcoin example
 
 <BitcoinImplementation />
 
+</Tab>
+<Tab title="TON">
+
+<TonImplementation />
+
 </Tab>
 <Tab title="Others networks (AppKit Core)">
 <Card title="AppKit Core Example" icon="github" href="https://github.com/reown-com/appkit-web-examples/tree/main/react/react-core-universal-connector">
@@ -270,34 +295,71 @@ Check the React AppKit Core example for Sui
 ## Trigger the modal
 
 <Tabs>
-<Tab title="Wagmi">
+<Tab title="AppKit">
 
-<WagmiModal />
+To open AppKit you can use our [**React components**](/appkit/react/core/components) or build your own button with AppKit [**hooks**](/appkit/react/core/hooks#useAppKit).
 
-</Tab>
-<Tab title="Ethers v5">
+<CodeGroup>
 
-<Ethers5Modal />
+```tsx ConnectButton.tsx
+import { AppKitButton } from '@reown/appkit/react'
 
-</Tab>
-<Tab title="Ethers">
+export default function ConnectButton() {
+  return <AppKitButton />
+}
+```
 
-<EthersModal />
+```tsx ConnectButtonWithHooks.tsx
+import { useAppKit } from '@reown/appkit/react'
 
-</Tab>
-<Tab title="Solana">
+export default function ConnectButton() {
+  const { open } = useAppKit()
 
-<SolanaModal />
+  return (
+    <>
+      <button onClick={() => open()}>Open Connect Modal</button>
+      <button onClick={() => open({ view: 'Networks' })}>Open Network Modal</button>
+    </>
+  )
+}
+```
+
+</CodeGroup>
 
 </Tab>
-<Tab title="Bitcoin">
+<Tab title="AppKit Core">
 
-<BitcoinModal />
+To open AppKit Core you need to call the `connect` function from the Universal Connector.
 
-</Tab>
-<Tab title="Others networks (AppKit Core)">
+```tsx
+// get the session from the universal connector
+const handleConnect = async () => {
+  if (!universalConnector) {
+    return
+  }
 
-<CoreModal />
+  const { session: providerSession } = await universalConnector.connect()
+  setSession(providerSession)
+}
+
+// disconnect the universal connector
+const handleDisconnect = async () => {
+  if (!universalConnector) {
+    return
+  }
+  await universalConnector.disconnect()
+  setSession(null)
+}
+
+...
+
+return (
+  <div>
+    <button onClick={handleConnect}>Open AppKit Core</button>
+    <button onClick={handleDisconnect}>Disconnect</button>
+  </div>
+)
+```
 
 </Tab>
 </Tabs>
@@ -310,17 +372,17 @@ Check the React AppKit Core example for Sui
 [Wagmi hooks](https://wagmi.sh/react/api/hooks/useReadContract) can help us interact with wallets and smart contracts:
 
 ```tsx
-import { useReadContract } from "wagmi";
-import { USDTAbi } from "../abi/USDTAbi";
+import { useReadContract } from 'wagmi'
+import { USDTAbi } from '../abi/USDTAbi'
 
-const USDTAddress = "0x...";
+const USDTAddress = '0x...'
 
 function App() {
   const result = useReadContract({
     abi: USDTAbi,
     address: USDTAddress,
-    functionName: "totalSupply",
-  });
+    functionName: 'totalSupply'
+  })
 }
 ```
 
@@ -332,38 +394,38 @@ Read more about Wagmi hooks for smart contract interaction [here](https://wagmi.
 [Ethers](https://docs.ethers.org/v6/) can help us interact with wallets and smart contracts:
 
 ```tsx
-import { useAppKitProvider, useAppKitAccount } from "@reown/appkit/react";
-import { BrowserProvider, Contract, formatUnits } from "ethers";
+import { useAppKitProvider, useAppKitAccount } from '@reown/appkit/react'
+import { BrowserProvider, Contract, formatUnits } from 'ethers'
 
-const USDTAddress = "0x617f3112bf5397D0467D315cC709EF968D9ba546";
+const USDTAddress = '0x617f3112bf5397D0467D315cC709EF968D9ba546'
 
 // The ERC-20 Contract ABI, which is a common contract interface
 // for tokens (this is the Human-Readable ABI format)
 const USDTAbi = [
-  "function name() view returns (string)",
-  "function symbol() view returns (string)",
-  "function balanceOf(address) view returns (uint)",
-  "function transfer(address to, uint amount)",
-  "event Transfer(address indexed from, address indexed to, uint amount)",
-];
+  'function name() view returns (string)',
+  'function symbol() view returns (string)',
+  'function balanceOf(address) view returns (uint)',
+  'function transfer(address to, uint amount)',
+  'event Transfer(address indexed from, address indexed to, uint amount)'
+]
 
 function Components() {
-  const { address, isConnected } = useAppKitAccount();
-  const { walletProvider } = useAppKitProvider("eip155");
+  const { address, isConnected } = useAppKitAccount()
+  const { walletProvider } = useAppKitProvider('eip155')
 
   async function getBalance() {
-    if (!isConnected) throw Error("User disconnected");
+    if (!isConnected) throw Error('User disconnected')
 
-    const ethersProvider = new BrowserProvider(walletProvider);
-    const signer = await ethersProvider.getSigner();
+    const ethersProvider = new BrowserProvider(walletProvider)
+    const signer = await ethersProvider.getSigner()
     // The Contract object
-    const USDTContract = new Contract(USDTAddress, USDTAbi, signer);
-    const USDTBalance = await USDTContract.balanceOf(address);
+    const USDTContract = new Contract(USDTAddress, USDTAbi, signer)
+    const USDTBalance = await USDTContract.balanceOf(address)
 
-    console.log(formatUnits(USDTBalance, 18));
+    console.log(formatUnits(USDTBalance, 18))
   }
 
-  return <button onClick={getBalance}>Get User Balance</button>;
+  return <button onClick={getBalance}>Get User Balance</button>
 }
 ```
 
@@ -377,7 +439,7 @@ function Components() {
 ## Video Tutorial
 
 <div style={{ position: 'relative', width: '100%', paddingBottom: '56.25%', height: 0 }}>
-  <iframe 
+  <iframe
     style={{
       position: 'absolute',
       top: 0,
@@ -404,33 +466,35 @@ If you are starting from scratch, you can use the following methods to set up yo
 <Accordion title="Set up Reown AppKit using AI">
   If you're using Cursor IDE (or another AI based IDE) to build a project with Reown AppKit, Reown provides a `.mdc` file that enhances your development experience. The `reown-appkit.mdc` [file here](https://github.com/reown-com/reown-docs/blob/main/reown-appkit.mdc) contains Cursor-specific rules and type hints for Reown AppKit.
 
-  To use it in your project:
+To use it in your project:
 
-  1. Copy the `reown-appkit.mdc` file from this repository
-  2. Create a `.cursor/rules` folder in your project's root directory (if it doesn't exist)
-  3. Place the `.mdc` file in your project's `.cursor/rules` folder
+1. Copy the `reown-appkit.mdc` file from this repository
+2. Create a `.cursor/rules` folder in your project's root directory (if it doesn't exist)
+3. Place the `.mdc` file in your project's `.cursor/rules` folder
+
+For more info, refer to [Cursor's documentation](https://docs.cursor.com/context/rules#project-rules).
 
-  For more info, refer to [Cursor's documentation](https://docs.cursor.com/context/rules#project-rules).
 </Accordion>
 <Accordion title="AppKit CLI">
   Reown offers a dedicated CLI to set up a minimal version of AppKit in the easiest and quickest way possible.
 
-  To do this, please run the command below.
+To do this, please run the command below.
+
+```bash
+npx @reown/appkit-cli
+```
 
-  ```bash
-  npx @reown/appkit-cli
-  ```
+After running the command, you will be prompted to confirm the installation of the CLI. Upon your confirmation, the CLI will request the following details:
 
-  After running the command, you will be prompted to confirm the installation of the CLI. Upon your confirmation, the CLI will request the following details:
+1. **Project Name**: Enter the name for your project.
+2. **Framework**: Select your preferred framework or library. Currently, you have three options: React, Next.js, and Vue.
+3. **Network-Specific libraries**: Choose whether you want to install Wagmi, Ethers, Solana, or Multichain (EVM + Solana).
 
-  1. **Project Name**: Enter the name for your project.
-  2. **Framework**: Select your preferred framework or library. Currently, you have three options: React, Next.js, and Vue.
-  3. **Network-Specific libraries**: Choose whether you want to install Wagmi, Ethers, Solana, or Multichain (EVM + Solana).
+After providing the project name and selecting your preferences, the CLI will install a minimal example of AppKit with your preferred blockchain library. The example will be pre-configured with a `projectId` that will only work on `localhost`.
 
-  After providing the project name and selecting your preferences, the CLI will install a minimal example of AppKit with your preferred blockchain library. The example will be pre-configured with a `projectId` that will only work on `localhost`.
+To fully configure your project, please obtain a `projectId` from the Reown Dashboard and update your project accordingly.
 
-  To fully configure your project, please obtain a `projectId` from the Reown Dashboard and update your project accordingly.
+**Refer to [this section](#cloud-configuration) for more information.**
 
-  **Refer to [this section](#cloud-configuration) for more information.**
 </Accordion>
 </AccordionGroup>
diff --git a/appkit/svelte/core/installation.mdx b/appkit/svelte/core/installation.mdx
index 01aad3f4b..500acd66f 100644
--- a/appkit/svelte/core/installation.mdx
+++ b/appkit/svelte/core/installation.mdx
@@ -2,23 +2,26 @@
 title: Installation
 ---
 
-import CloudBanner from "/snippets/cloud-banner.mdx";
+import CloudBanner from '/snippets/cloud-banner.mdx'
 
-import SvelteWagmiImplementation from "/snippets/appkit/svelte/wagmi/about/implementation.mdx";
-import SvelteWagmiModal from "/snippets/appkit/svelte/wagmi/about/triggermodal.mdx";
+import SvelteWagmiImplementation from '/snippets/appkit/svelte/wagmi/about/implementation.mdx'
+import SvelteWagmiModal from '/snippets/appkit/svelte/wagmi/about/triggermodal.mdx'
 
-import SvelteEthersImplementation from "/snippets/appkit/svelte/ethers/about/implementation.mdx";
-import SvelteEthersModal from "/snippets/appkit/svelte/ethers/about/triggermodal.mdx";
+import SvelteEthersImplementation from '/snippets/appkit/svelte/ethers/about/implementation.mdx'
+import SvelteEthersModal from '/snippets/appkit/svelte/ethers/about/triggermodal.mdx'
 
-import SvelteSolanaImplementation from "/snippets/appkit/svelte/solana/about/implementation.mdx";
-import SvelteSolanaModal from "/snippets/appkit/svelte/solana/about/triggermodal.mdx";
+import SvelteSolanaImplementation from '/snippets/appkit/svelte/solana/about/implementation.mdx'
+import SvelteSolanaModal from '/snippets/appkit/svelte/solana/about/triggermodal.mdx'
 
-import SvelteBitcoinImplementation from "/snippets/appkit/svelte/bitcoin/about/implementation.mdx";
-import SvelteBitcoinModal from "/snippets/appkit/svelte/bitcoin/about/triggermodal.mdx";
+import SvelteBitcoinImplementation from '/snippets/appkit/svelte/bitcoin/about/implementation.mdx'
+import SvelteBitcoinModal from '/snippets/appkit/svelte/bitcoin/about/triggermodal.mdx'
+
+import SvelteTonImplementation from '/snippets/appkit/svelte/ton/about/implementation.mdx'
+import SvelteTonModal from '/snippets/appkit/svelte/ton/about/triggermodal.mdx'
 
 # Svelte
 
-AppKit has support for [Wagmi](https://wagmi.sh/) and [Ethers v6](https://docs.ethers.org/v6/) on Ethereum, [@solana/web3.js](https://solana-labs.github.io/solana-web3.js/) on Solana and Bitcoin.
+AppKit has support for [Wagmi](https://wagmi.sh/) and [Ethers v6](https://docs.ethers.org/v6/) on Ethereum, [@solana/web3.js](https://solana-labs.github.io/solana-web3.js/) on Solana, Bitcoin and TON.
 Choose one of these to get started.
 
 <Note>
@@ -119,12 +122,35 @@ pnpm add @reown/appkit @reown/appkit-adapter-bitcoin
 
 </CodeGroup>
 
+</Tab>
+<Tab title="TON">
+
+<CodeGroup>
+
+```bash npm
+npm install @reown/appkit @reown/appkit-adapter-ton
+```
+
+```bash Yarn
+yarn add @reown/appkit @reown/appkit-adapter-ton
+```
+
+```bash Bun
+bun add @reown/appkit @reown/appkit-adapter-ton
+```
+
+```bash pnpm
+pnpm add @reown/appkit @reown/appkit-adapter-ton
+```
+
+</CodeGroup>
+
 </Tab>
 </Tabs>
 
 ## Cloud Configuration
 
-Create a new project on Reown Dashboard at https://dashboard.reown.com and obtain a new project ID.
+Create a new project on [Reown Dashboard](https://dashboard.reown.com) and obtain a new project ID.
 
 <CloudBanner />
 
@@ -156,6 +182,11 @@ Check the Svelte Ethers example
 
 <SvelteBitcoinImplementation />
 
+</Tab>
+<Tab title="TON">
+
+<SvelteTonImplementation />
+
 </Tab>
 </Tabs>
 
@@ -163,7 +194,7 @@ Check the Svelte Ethers example
 
 The recommended way to trigger the modal in Svelte is to use the `<appkit-button />` web component. After setting up AppKit in your application, you can simply use the button component anywhere in your Svelte templates:
 
-``` javascript
+```javascript
 <script lang="ts">
   // Import your AppKit configuration to ensure it's initialized
   import '$lib/appkit';
@@ -171,7 +202,7 @@ The recommended way to trigger the modal in Svelte is to use the `<appkit-button
 
 <main>
   <h1>Svelte + AppKit Integration</h1>
-  
+
   <div class="card">
     <appkit-button />
   </div>
@@ -184,7 +215,7 @@ The `<appkit-button />` is a web component that's automatically registered when
 
 You can also trigger the modal programmatically using the AppKit instance:
 
-``` javascript
+```javascript
 <script lang="ts">
   import { appKit } from '$lib/appkit';
 
@@ -208,7 +239,7 @@ You can also trigger the modal programmatically using the AppKit instance:
 
 Or use other AppKit web components:
 
-``` javascript
+```javascript
 <appkit-connect-button />
 <appkit-account-button />
 <appkit-network-button />
@@ -234,6 +265,11 @@ Or use other AppKit web components:
 
 <SvelteBitcoinModal />
 
+</Tab>
+<Tab title="TON">
+
+<SvelteTonModal />
+
 </Tab>
 </Tabs>
 
@@ -261,6 +297,7 @@ bun a @wagmi/core
 ```bash pnpm
 pnpm add @wagmi/core
 ```
+
 </CodeGroup>
 
 [Wagmi actions](https://wagmi.sh/core/api/actions/readContract) can help us interact with wallets and smart contracts:
@@ -268,17 +305,17 @@ pnpm add @wagmi/core
 For this use case, we need to import the `wagmiConfig` from our AppKit WagmiAdapter configuration.
 
 ```ts
-import { readContract } from "@wagmi/core";
-import { USDTAbi } from "../abi/USDTAbi";
+import { readContract } from '@wagmi/core'
+import { USDTAbi } from '../abi/USDTAbi'
 
-const USDTAddress = "0x...";
+const USDTAddress = '0x...'
 
 const data = readContract(wagmiConfig, {
   address: USDTAddress,
   abi: USDTAbi,
-  functionName: "totalSupply",
-  args: [],
-});
+  functionName: 'totalSupply',
+  args: []
+})
 ```
 
 Read more about Wagmi actions for smart contract interaction [here](https://wagmi.sh/core/actions/readContract).
@@ -289,29 +326,29 @@ Read more about Wagmi actions for smart contract interaction [here](https://wagm
 [Ethers](https://docs.ethers.org/v6/) can help us interact with wallets and smart contracts:
 
 ```ts
-import { BrowserProvider, Contract, parseEther } from "ethers";
+import { BrowserProvider, Contract, parseEther } from 'ethers'
 
-const provider = await appKit.subscribeProviders((state) => {
-  return state["eip155"];
-});
+const provider = await appKit.subscribeProviders(state => {
+  return state['eip155']
+})
 
-const addressFrom = await appKit.subscribeAccount((state) => {
-  return state;
-});
+const addressFrom = await appKit.subscribeAccount(state => {
+  return state
+})
 
-if (!provider) throw Error("No provider found");
-if (!addressFrom) throw Error("No address found");
+if (!provider) throw Error('No provider found')
+if (!addressFrom) throw Error('No address found')
 
 function sendTransaction() {
   const tx = {
     from: addressFrom,
-    to: "0x...", // any address
-    value: parseEther("0.0001"),
-  };
-  const ethersProvider = new BrowserProvider(provider);
-  const signer = await ethersProvider.getSigner();
-  const tx = await signer.sendTransaction(tx);
-  console.log("transaction:", tx);
+    to: '0x...', // any address
+    value: parseEther('0.0001')
+  }
+  const ethersProvider = new BrowserProvider(provider)
+  const signer = await ethersProvider.getSigner()
+  const tx = await signer.sendTransaction(tx)
+  console.log('transaction:', tx)
 }
 ```
 
diff --git a/appkit/vue/core/installation.mdx b/appkit/vue/core/installation.mdx
index 44778c7bd..fe9287fb9 100644
--- a/appkit/vue/core/installation.mdx
+++ b/appkit/vue/core/installation.mdx
@@ -2,25 +2,23 @@
 title: Installation
 ---
 
-import CloudBanner from "/snippets/cloud-banner.mdx";
+import CloudBanner from '/snippets/cloud-banner.mdx'
 
-import WagmiImplementation from "/snippets/appkit/vue/wagmi/about/implementation.mdx";
-import WagmiModal from "/snippets/appkit/vue/wagmi/about/triggermodal.mdx";
+import WagmiImplementation from '/snippets/appkit/vue/wagmi/about/implementation.mdx'
 
-import Ethers5Implementation from "/snippets/appkit/vue/ethers5/implementation.mdx";
+import Ethers5Implementation from '/snippets/appkit/vue/ethers5/implementation.mdx'
 
-import EthersImplementation from "/snippets/appkit/vue/ethers/about/implementation.mdx";
-import EthersModal from "/snippets/appkit/vue/ethers/about/triggermodal.mdx";
-import SolanaImplementation from "/snippets/appkit/vue/solana/implementation.mdx";
-import SolanaModal from "/snippets/appkit/vue/solana/triggermodal.mdx";
-import SolanaPrograms from "/snippets/appkit/vue/solana/programs.mdx";
+import EthersImplementation from '/snippets/appkit/vue/ethers/about/implementation.mdx'
+import SolanaImplementation from '/snippets/appkit/vue/solana/implementation.mdx'
+import SolanaPrograms from '/snippets/appkit/vue/solana/programs.mdx'
 
-import BitcoinImplementation from "/snippets/appkit/vue/bitcoin/about/implementation.mdx";
-import BitcoinModal from "/snippets/appkit/vue/bitcoin/about/triggermodal.mdx";
+import BitcoinImplementation from '/snippets/appkit/vue/bitcoin/about/implementation.mdx'
+
+import TonImplementation from '/snippets/appkit/vue/ton/about/implementation.mdx'
 
 ## Introduction
 
-AppKit has support for [Wagmi](https://wagmi.sh/) and [Ethers v6](https://docs.ethers.org/v6/) on Ethereum, [@solana/web3.js](https://solana-labs.github.io/solana-web3.js/) on Solana and Bitcoin.
+AppKit has support for [Wagmi](https://wagmi.sh/) and [Ethers v6](https://docs.ethers.org/v6/) on Ethereum, [@solana/web3.js](https://solana-labs.github.io/solana-web3.js/) on Solana, Bitcoin and TON.
 Choose one of these to get started.
 
 ## Installation
@@ -108,7 +106,7 @@ npm install @reown/appkit @reown/appkit-adapter-solana
 ```
 
 ```bash Yarn
-yarn add @reown/appkit @reown/appkit-adapter-solana 
+yarn add @reown/appkit @reown/appkit-adapter-solana
 ```
 
 ```bash Bun
@@ -116,7 +114,7 @@ bun add @reown/appkit @reown/appkit-adapter-solana
 ```
 
 ```bash pnpm
-pnpm add @reown/appkit @reown/appkit-adapter-solana 
+pnpm add @reown/appkit @reown/appkit-adapter-solana
 ```
 
 </CodeGroup>
@@ -144,6 +142,29 @@ pnpm add @reown/appkit @reown/appkit-adapter-bitcoin
 
 </CodeGroup>
 
+</Tab>
+<Tab title="TON">
+
+<CodeGroup>
+
+```bash npm
+npm install @reown/appkit @reown/appkit-adapter-ton
+```
+
+```bash Yarn
+yarn add @reown/appkit @reown/appkit-adapter-ton
+```
+
+```bash Bun
+bun add @reown/appkit @reown/appkit-adapter-ton
+```
+
+```bash pnpm
+pnpm add @reown/appkit @reown/appkit-adapter-ton
+```
+
+</CodeGroup>
+
 </Tab>
 </Tabs>
 
@@ -151,7 +172,7 @@ pnpm add @reown/appkit @reown/appkit-adapter-bitcoin
 
 ## Cloud Configuration
 
-Create a new project on Reown Dashboard at https://dashboard.reown.com and obtain a new project ID.
+Create a new project on [Reown Dashboard](https://dashboard.reown.com) and obtain a new project ID.
 
 ## Implementation
 
@@ -191,32 +212,85 @@ Check the Vue Bitcoin example
 
 <BitcoinImplementation />
 
+</Tab>
+<Tab title="TON">
+<Card title="TON Example" icon="github" href="https://github.com/reown-com/appkit-web-examples/tree/main/vue/vue-ton">
+Check the Vue TON example
+</Card>
+
+<TonImplementation />
+
 </Tab>
 </Tabs>
 
 ## Trigger the modal
 
 <Tabs>
-<Tab title="Wagmi">
+<Tab title="AppKit">
 
-<WagmiModal />
+To open AppKit you can use our [**web components**](/appkit/vue/core/components) or build your own button with AppKit [**composables**](/appkit/vue/core/composables#useAppKit).
 
-</Tab>
-<Tab title="Ethers v5">
+<CodeGroup>
 
-<EthersModal />
+```vue ConnectButton.vue
+<template>
+  <appkit-button />
+</template>
+```
 
-</Tab>
-<Tab title="Ethers">
+```vue ConnectButtonWithComposables.vue
+<script setup lang="ts">
+import { useAppKit } from '@reown/appkit/vue'
 
-<EthersModal />
+const { open } = useAppKit()
+</script>
+
+<template>
+  <button @click="open()">Open Connect Modal</button>
+  <button @click="open({ view: 'Networks' })">Open Network Modal</button>
+</template>
+```
+
+</CodeGroup>
 
 </Tab>
-<Tab title="Solana">
-  <SolanaModal />
-</Tab>
-<Tab title="Bitcoin">
-  <BitcoinModal />
+<Tab title="AppKit Core">
+
+To open AppKit Core you need to call the `connect` function from the Universal Connector.
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+
+let session = ref(null)
+
+async function handleConnect() {
+  // universalConnector is the universal connector instance from the implementation section
+  if (!universalConnector) {
+    return
+  }
+
+  const { session: providerSession } = await universalConnector.connect()
+  session.value = providerSession
+}
+
+async function handleDisconnect() {
+  if (!universalConnector) {
+    return
+  }
+  await universalConnector.disconnect()
+  session.value = null
+}
+</script>
+
+<template>
+  <div>
+    <button @click="handleConnect">Open AppKit Core</button>
+    <button @click="handleDisconnect">Disconnect</button>
+  </div>
+</template>
+```
+
 </Tab>
 </Tabs>
 
@@ -229,16 +303,16 @@ Check the Vue Bitcoin example
 
 ```html
 <script setup lang="ts">
-  import { readContract } from "@wagmi/core";
-  import { USDTAbi } from "../abi/USDTAbi";
+  import { readContract } from '@wagmi/core'
+  import { USDTAbi } from '../abi/USDTAbi'
 
-  const USDTAddress = "0x...";
+  const USDTAddress = '0x...'
 
   const data = readContract({
     abi: USDTAbi,
     address: USDTAddress,
-    functionName: "symbol",
-  });
+    functionName: 'symbol'
+  })
 </script>
 ```
 
@@ -251,37 +325,37 @@ Read more about Wagmi actions for smart contract interaction [here](https://wagm
 
 ```html
 <script setup lang="ts">
-  import { useAppKitProvider, useAppKitAccount } from "@reown/appkit/vue";
-  import { BrowserProvider, Contract, formatUnits } from "ethers";
+  import { useAppKitProvider, useAppKitAccount } from '@reown/appkit/vue'
+  import { BrowserProvider, Contract, formatUnits } from 'ethers'
 
-  const USDTAddress = "0x617f3112bf5397D0467D315cC709EF968D9ba546";
+  const USDTAddress = '0x617f3112bf5397D0467D315cC709EF968D9ba546'
 
   // The ERC-20 Contract ABI, which is a common contract interface
   // for tokens (this is the Human-Readable ABI format)
   const USDTAbi = [
-    "function name() view returns (string)",
-    "function symbol() view returns (string)",
-    "function balanceOf(address) view returns (uint)",
-    "function transfer(address to, uint amount)",
-    "event Transfer(address indexed from, address indexed to, uint amount)",
-  ];
+    'function name() view returns (string)',
+    'function symbol() view returns (string)',
+    'function balanceOf(address) view returns (uint)',
+    'function transfer(address to, uint amount)',
+    'event Transfer(address indexed from, address indexed to, uint amount)'
+  ]
 
   function Components() {
-    const { address, isConnected } = useAppKitAccount();
-    const { walletProvider } = useAppKitProvider("eip155");
+    const { address, isConnected } = useAppKitAccount()
+    const { walletProvider } = useAppKitProvider('eip155')
 
     async function getBalance() {
-      if (!isConnected) throw Error("User disconnected");
+      if (!isConnected) throw Error('User disconnected')
 
-      const ethersProvider = new BrowserProvider(walletProvider);
-      const signer = await ethersProvider.getSigner();
+      const ethersProvider = new BrowserProvider(walletProvider)
+      const signer = await ethersProvider.getSigner()
       // The Contract object
-      const USDTContract = new Contract(USDTAddress, USDTAbi, signer);
-      const USDTBalance = await USDTContract.balanceOf(address);
+      const USDTContract = new Contract(USDTAddress, USDTAbi, signer)
+      const USDTBalance = await USDTContract.balanceOf(address)
 
-      console.log(formatUnits(USDTBalance, 18));
+      console.log(formatUnits(USDTBalance, 18))
     }
-    return <button onClick={getBalance}>Get User Balance</button>;
+    return <button onClick={getBalance}>Get User Balance</button>
   }
 </script>
 ```
@@ -302,33 +376,35 @@ If you are starting from scratch, you can use the following methods to set up yo
 <Accordion title="Set up Reown AppKit using AI">
   If you're using Cursor IDE (or another AI based IDE) to build a project with Reown AppKit, Reown provides a `.mdc` file that enhances your development experience. The `reown-appkit.mdc` [file here](https://github.com/reown-com/reown-docs/blob/main/reown-appkit.mdc) contains Cursor-specific rules and type hints for Reown AppKit.
 
-  To use it in your project:
+To use it in your project:
 
-  1. Copy the `reown-appkit.mdc` file from this repository
-  2. Create a `.cursor/rules` folder in your project's root directory (if it doesn't exist)
-  3. Place the `.mdc` file in your project's `.cursor/rules` folder
+1. Copy the `reown-appkit.mdc` file from this repository
+2. Create a `.cursor/rules` folder in your project's root directory (if it doesn't exist)
+3. Place the `.mdc` file in your project's `.cursor/rules` folder
+
+For more info, refer to [Cursor's documentation](https://docs.cursor.com/context/rules#project-rules).
 
-  For more info, refer to [Cursor's documentation](https://docs.cursor.com/context/rules#project-rules).
 </Accordion>
 <Accordion title="AppKit CLI">
   Reown offers a dedicated CLI to set up a minimal version of AppKit in the easiest and quickest way possible.
 
-  To do this, please run the command below.
+To do this, please run the command below.
+
+```bash
+npx @reown/appkit-cli
+```
 
-  ```bash
-  npx @reown/appkit-cli
-  ```
+After running the command, you will be prompted to confirm the installation of the CLI. Upon your confirmation, the CLI will request the following details:
 
-  After running the command, you will be prompted to confirm the installation of the CLI. Upon your confirmation, the CLI will request the following details:
+1. **Project Name**: Enter the name for your project.
+2. **Framework**: Select your preferred framework or library. Currently, you have three options: React, Next.js, and Vue.
+3. **Network-Specific libraries**: Choose whether you want to install Wagmi, Ethers, Solana, or Multichain (EVM + Solana).
 
-  1. **Project Name**: Enter the name for your project.
-  2. **Framework**: Select your preferred framework or library. Currently, you have three options: React, Next.js, and Vue.
-  3. **Network-Specific libraries**: Choose whether you want to install Wagmi, Ethers, Solana, or Multichain (EVM + Solana).
+After providing the project name and selecting your preferences, the CLI will install a minimal example of AppKit with your preferred blockchain library. The example will be pre-configured with a `projectId` that will only work on `localhost`.
 
-  After providing the project name and selecting your preferences, the CLI will install a minimal example of AppKit with your preferred blockchain library. The example will be pre-configured with a `projectId` that will only work on `localhost`.
+To fully configure your project, please obtain a `projectId` from the Reown Dashboard and update your project accordingly.
 
-  To fully configure your project, please obtain a `projectId` from the Reown Dashboard and update your project accordingly.
+**Refer to [this section](#cloud-configuration) for more information.**
 
-  **Refer to [this section](#cloud-configuration) for more information.**
 </Accordion>
 </AccordionGroup>
diff --git a/docs.json b/docs.json
index 2aa6a6e8d..42e96f3d3 100644
--- a/docs.json
+++ b/docs.json
@@ -7,7 +7,7 @@
     "light": "#008847",
     "dark": "#008847"
   },
-  
+
   "integrations": {
     "gtm": {
       "tagId": "GTM-56G35T8X"
@@ -59,23 +59,14 @@
     }
   ],
   "contextual": {
-    "options": [
-     "chatgpt",
-     "claude",
-     "copy",
-     "view",
-     "perplexity",
-     "mcp",
-     "cursor",
-     "vscode"
-   ]
+    "options": ["chatgpt", "claude", "copy", "view", "perplexity", "mcp", "cursor", "vscode"]
   },
   "navigation": {
     "tabs": [
       {
         "tab": "AppKit",
         "icon": "layer-group",
-        "dropdowns": [  
+        "dropdowns": [
           {
             "dropdown": "AppKit - Overview",
             "icon": "layer-group",
@@ -86,124 +77,127 @@
               },
               {
                 "group": "Paid Plans",
+                "pages": ["appkit/paid-plans/enterprise"]
+              },
+              {
+                "group": "Features",
                 "pages": [
-                  "appkit/paid-plans/enterprise"
+                  "appkit/features/index",
+                  "appkit/features/swaps",
+                  "appkit/features/onramp",
+                  "appkit/features/multichain",
+                  "appkit/features/smart-accounts",
+                  "appkit/features/smart-accounts-interaction",
+                  "appkit/features/sponsored-transactions",
+                  "appkit/features/smart-sessions",
+                  "appkit/features/chain-abstraction"
                 ]
               },
               {
-                "group": "Features",
-                    "pages": [
-                      "appkit/features/index",
-                      "appkit/features/swaps",
-                      "appkit/features/onramp",
-                      "appkit/features/multichain",
-                      "appkit/features/smart-accounts",
-                      "appkit/features/smart-accounts-interaction",
-                      "appkit/features/sponsored-transactions",
-                      "appkit/features/smart-sessions",
-                      "appkit/features/chain-abstraction"
-                    ]
-                  },
-                  {
-                    "group": "Authentication",
-                    "pages": [
-                      "appkit/authentication/socials",
-                      "appkit/authentication/one-click-auth",
-                      "appkit/authentication/siwx/default"
-                    ]
-                  },
-                  {
-                    "group": "Integrations",
-                    "pages": [
-                      "appkit/integrations/telegram-mini-apps",
-                      "appkit/integrations/farcaster-mini-apps"
-                    ]
-                  },
-                  {
-                    "group": "Payments",
-                    "pages": [
-                      "appkit/payments/overview",
-                      "appkit/payments/pay-with-exchange",
-                      "appkit/payments/deposit-with-exchange",
-                      "appkit/payments/one-click-checkout"
-                    ]
-                  },
-                  {
-                    "group": "Network",
-                    "pages": [
-                      "appkit/networks/evm",
-                      "appkit/networks/solana",
-                      "appkit/networks/bitcoin"
-                    ]
-                  },
+                "group": "Authentication",
+                "pages": [
+                  "appkit/authentication/socials",
+                  "appkit/authentication/one-click-auth",
+                  "appkit/authentication/siwx/default"
+                ]
+              },
+              {
+                "group": "Integrations",
+                "pages": [
+                  "appkit/integrations/telegram-mini-apps",
+                  "appkit/integrations/farcaster-mini-apps"
+                ]
+              },
+              {
+                "group": "Payments",
+                "pages": [
+                  "appkit/payments/overview",
+                  "appkit/payments/pay-with-exchange",
+                  "appkit/payments/deposit-with-exchange",
+                  "appkit/payments/one-click-checkout"
+                ]
+              },
+              {
+                "group": "Network",
+                "pages": [
+                  "appkit/networks/evm",
+                  "appkit/networks/solana",
+                  "appkit/networks/bitcoin"
+                ]
+              },
+              {
+                "group": "Guides",
+                "pages": [
                   {
-                    "group": "Guides",
+                    "group": "AppKit Guides",
                     "pages": [
-                      {
-                        "group": "AppKit Guides",
-                        "pages":[
-                          "appkit/recipes/telegram-mini-app",
-                          "appkit/recipes/tenderly-virtual-testnets",
-                          "appkit/recipes/wallet-buttons-react",
-                          "appkit/recipes/wagmi-send-transaction",
-                          "appkit/recipes/ethers-send-transaction",
-                          "appkit/recipes/EVM-smart-contract-interaction",
-                          "appkit/recipes/solana-send-transaction",
-                          "appkit/recipes/bitcoin-send-transaction",
-                          "appkit/recipes/switching-to-send-calls",
-                          "appkit/recipes/sponsoring-first-transaction",
-                          "appkit/recipes/travel-rule",
-                          "appkit/recipes/smart-sessions",
-                          "appkit/recipes/update-appkit",
-                          "appkit/recipes/universal-connector",
-                          "appkit/recipes/troubleshooting"
-                        ]
-                      },
-                      "appkit/recipes/gtm-checklist"
+                      "appkit/recipes/telegram-mini-app",
+                      "appkit/recipes/tenderly-virtual-testnets",
+                      "appkit/recipes/wallet-buttons-react",
+                      "appkit/recipes/wagmi-send-transaction",
+                      "appkit/recipes/ethers-send-transaction",
+                      "appkit/recipes/EVM-smart-contract-interaction",
+                      "appkit/recipes/solana-send-transaction",
+                      "appkit/recipes/bitcoin-send-transaction",
+                      "appkit/recipes/switching-to-send-calls",
+                      "appkit/recipes/sponsoring-first-transaction",
+                      "appkit/recipes/travel-rule",
+                      "appkit/recipes/smart-sessions",
+                      "appkit/recipes/update-appkit",
+                      "appkit/recipes/universal-connector",
+                      "appkit/recipes/troubleshooting"
                     ]
                   },
+                  "appkit/recipes/gtm-checklist"
+                ]
+              },
+              {
+                "group": "Upgrade",
+                "pages": [
                   {
-                    "group": "Upgrade",
+                    "group": "AppKit",
                     "pages": [
                       {
-                        "group": "AppKit",
+                        "group": "Web3Modal to Reown AppKit",
                         "pages": [
+                          "appkit/upgrade/from-w3m-to-reown",
                           {
-                            "group": "Web3Modal to Reown AppKit",
+                            "group": "Reown AppKit - Web",
                             "pages": [
-                              "appkit/upgrade/from-w3m-to-reown",
-                              {
-                                "group": "Reown AppKit - Web",
-                                "pages": ["appkit/upgrade/to-reown-appkit-web", "appkit/upgrade/to-reown-appkit-ethers-web", "appkit/upgrade/to-reown-appkit-ethers5-web", "appkit/upgrade/to-reown-appkit-solana-web"]
-                              },
-                              "appkit/upgrade/from-web3modal-react-native",
-                              "appkit/upgrade/from-web3modal-flutter",
-                              "appkit/upgrade/from-web3modal-android",
-                              "appkit/upgrade/from-web3modal-ios",
-                              "appkit/upgrade/from-web3modal-unity"
+                              "appkit/upgrade/to-reown-appkit-web",
+                              "appkit/upgrade/to-reown-appkit-ethers-web",
+                              "appkit/upgrade/to-reown-appkit-ethers5-web",
+                              "appkit/upgrade/to-reown-appkit-solana-web"
                             ]
-                          }
+                          },
+                          "appkit/upgrade/from-web3modal-react-native",
+                          "appkit/upgrade/from-web3modal-flutter",
+                          "appkit/upgrade/from-web3modal-android",
+                          "appkit/upgrade/from-web3modal-ios",
+                          "appkit/upgrade/from-web3modal-unity"
                         ]
-                      },
-                      "appkit/upgrade/wcm"
-                    ]
-                  },
-                  {
-                    "group": "Migration",
-                    "pages": [
-                      "appkit/migration/index",
-                      "appkit/migration/from-privy-next",
-                      "appkit/migration/from-rainbowkit-next",
-                      "appkit/migration/from-connectkit-next",
-                      "appkit/migration/from-anza-adapter-react"
+                      }
                     ]
                   },
-                  {
-                    "group": "Technical Reference",
-                    "pages": ["appkit/faq"]
-                  }
+                  "appkit/upgrade/wcm"
+                ]
+              },
+              {
+                "group": "Migration",
+                "pages": [
+                  "appkit/migration/index",
+                  "appkit/migration/from-privy-next",
+                  "appkit/migration/from-rainbowkit-next",
+                  "appkit/migration/from-connectkit-next",
+                  "appkit/migration/from-anza-adapter-react"
                 ]
               },
+              {
+                "group": "Technical Reference",
+                "pages": ["appkit/faq"]
+              }
+            ]
+          },
           {
             "dropdown": "React",
             "icon": "react",
@@ -314,7 +308,7 @@
                 "pages": [
                   "appkit/next/transactions/onramp",
                   "appkit/next/transactions/swaps",
-                  "appkit/next/transactions/sponsored-transactions"                  
+                  "appkit/next/transactions/sponsored-transactions"
                 ]
               },
               {
@@ -351,17 +345,11 @@
               },
               {
                 "group": "Authentication",
-                "pages": [
-                  "appkit/vue/core/socials",
-                  "appkit/vue/core/siwe",
-                  "appkit/vue/core/siwx"
-                ]
+                "pages": ["appkit/vue/core/socials", "appkit/vue/core/siwe", "appkit/vue/core/siwx"]
               },
               {
                 "group": "Early Access",
-                "pages": [
-                  "appkit/vue/early-access/smart-session"
-                ]
+                "pages": ["appkit/vue/early-access/smart-session"]
               },
               {
                 "group": "Payments",
@@ -419,9 +407,7 @@
               },
               {
                 "group": "Early Access",
-                "pages": [
-                  "appkit/javascript/early-access/smart-session"
-                ]
+                "pages": ["appkit/javascript/early-access/smart-session"]
               },
               {
                 "group": "Payments",
@@ -450,7 +436,7 @@
           },
           {
             "dropdown": "Svelte",
-            "icon": "S",
+            "icon": "http://localhost:3000/images/icons/svelte.svg",
             "description": "AppKit on Svelte",
             "pages": [
               {
@@ -470,16 +456,11 @@
               },
               {
                 "group": "Authentication",
-                "pages": [
-                  "appkit/svelte/core/socials"
-                ]
+                "pages": ["appkit/svelte/core/socials"]
               },
               {
                 "group": "Transactions",
-                "pages": [
-                  "appkit/svelte/transactions/onramp",
-                  "appkit/svelte/transactions/swaps"
-                ]
+                "pages": ["appkit/svelte/transactions/onramp", "appkit/svelte/transactions/swaps"]
               }
             ]
           },
@@ -506,16 +487,11 @@
               },
               {
                 "group": "Authentication",
-                "pages": [
-                  "appkit/nuxt/core/socials"
-                ]
+                "pages": ["appkit/nuxt/core/socials"]
               },
               {
                 "group": "Transactions",
-                "pages": [
-                  "appkit/nuxt/transactions/onramp",
-                  "appkit/nuxt/transactions/swaps"
-                ]
+                "pages": ["appkit/nuxt/transactions/onramp", "appkit/nuxt/transactions/swaps"]
               }
             ]
           },
@@ -583,10 +559,7 @@
               },
               {
                 "group": "Authentication",
-                "pages": [
-                  "appkit/flutter/core/email",
-                  "appkit/flutter/core/siwe"
-                ]
+                "pages": ["appkit/flutter/core/email", "appkit/flutter/core/siwe"]
               },
               {
                 "group": "Cloud",
@@ -616,9 +589,7 @@
               },
               {
                 "group": "Authentication",
-                "pages": [
-                  "appkit/android/core/one-click-auth"
-                ]
+                "pages": ["appkit/android/core/one-click-auth"]
               },
               {
                 "group": "Cloud",
@@ -647,9 +618,7 @@
               },
               {
                 "group": "Authentication",
-                "pages": [
-                  "appkit/ios/core/one-click-auth"
-                ]
+                "pages": ["appkit/ios/core/one-click-auth"]
               },
               {
                 "group": "Cloud",
@@ -680,15 +649,12 @@
               },
               {
                 "group": "Authentication",
-                "pages": [
-                  "appkit/unity/core/socials",
-                  "appkit/unity/core/siwe"
-                ]
+                "pages": ["appkit/unity/core/socials", "appkit/unity/core/siwe"]
               },
               {
                 "group": "Cloud",
                 "pages": [
-                  "appkit/unity/cloud/relay", 
+                  "appkit/unity/cloud/relay",
                   "appkit/unity/cloud/blockchain-api",
                   "appkit/unity/cloud/analytics"
                 ]
@@ -782,7 +748,11 @@
                 "pages": [
                   {
                     "group": "Core",
-                    "pages": ["advanced/api/core/pairing", "advanced/api/core/relay", "advanced/api/core/shared-core"]
+                    "pages": [
+                      "advanced/api/core/pairing",
+                      "advanced/api/core/relay",
+                      "advanced/api/core/shared-core"
+                    ]
                   },
                   {
                     "group": "Sign",
diff --git a/images/icons/svelte.svg b/images/icons/svelte.svg
new file mode 100644
index 000000000..79c5b874d
--- /dev/null
+++ b/images/icons/svelte.svg
@@ -0,0 +1,12 @@
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    fill="none"
+    viewBox="0 0 24 24"
+  >
+    <path
+      style="fill: rgb(0 136 71);"
+      d="M10.95 1.43c2.98-1.897 7.064-1.098 9.272 1.755l.208.278a6.598 6.598 0 0 1 1.128 4.993 6.194 6.194 0 0 1-.926 2.318 6.528 6.528 0 0 1 .643 4.194 6.187 6.187 0 0 1-2.798 4.148l-5.4 3.443c-3.076 1.959-7.32 1.046-9.482-2.036A6.605 6.605 0 0 1 2.47 15.53a6.198 6.198 0 0 1 .926-2.32 6.529 6.529 0 0 1-.643-4.189A6.182 6.182 0 0 1 5.55 4.874l5.4-3.443Zm7.254 3.454A4.287 4.287 0 0 0 13.6 3.178a3.909 3.909 0 0 0-1.097.481L7.113 7.1A3.734 3.734 0 0 0 5.43 9.597a3.97 3.97 0 0 0 .672 3.003 4.288 4.288 0 0 0 4.604 1.705 3.91 3.91 0 0 0 1.096-.482l2.068-1.312c.102-.065.214-.114.332-.146a1.294 1.294 0 0 1 1.387.515c.184.263.255.589.197.904-.058.311-.242.584-.51.753l-5.39 3.44a1.184 1.184 0 0 1-.33.146 1.292 1.292 0 0 1-1.401-.526 1.22 1.22 0 0 1-.218-.802l.02-.197-.197-.06A6.941 6.941 0 0 1 5.65 15.48l-.277-.197-.102.31a3.738 3.738 0 0 0-.128.506 3.97 3.97 0 0 0 .682 3.002 4.286 4.286 0 0 0 4.273 1.778l.33-.072a3.909 3.909 0 0 0 1.095-.482l5.393-3.44a3.733 3.733 0 0 0 1.681-2.495 3.97 3.97 0 0 0-.677-3.003 4.289 4.289 0 0 0-4.605-1.706 3.906 3.906 0 0 0-1.096.481l-2.06 1.314a1.223 1.223 0 0 1-.331.144 1.293 1.293 0 0 1-1.388-.515 1.179 1.179 0 0 1-.196-.903c.055-.31.24-.585.507-.753l5.404-3.429a1.18 1.18 0 0 1 .33-.145 1.29 1.29 0 0 1 1.387.515c.164.233.242.517.218.801l-.02.197.197.061a6.94 6.94 0 0 1 2.112 1.055l.278.196.101-.31c.055-.165.098-.334.128-.505a3.97 3.97 0 0 0-.681-3.002Z"
+    />
+  </svg>
\ No newline at end of file
diff --git a/snippets/appkit/javascript/ton/about/implementation.mdx b/snippets/appkit/javascript/ton/about/implementation.mdx
new file mode 100644
index 000000000..7291e834a
--- /dev/null
+++ b/snippets/appkit/javascript/ton/about/implementation.mdx
@@ -0,0 +1,50 @@
+AppKit TON is built on top of the AppKit library and provides a set of components and actions to easily connect TON wallets with your decentralized application.
+
+On top of your app set up the following configuration.
+
+```tsx
+// App.tsx
+import { createAppKit } from '@reown/appkit'
+import { TonAdapter } from '@reown/appkit-adapter-ton'
+import { ton, tonTestnet } from '@reown/appkit/networks'
+
+// 1. Get projectId from https://dashboard.reown.com
+const projectId = 'YOUR_PROJECT_ID'
+
+// 2. Set the networks
+const networks = [ton, tonTestnet]
+
+// 3. Set up TON Adapter
+const tonAdapter = new TonAdapter({
+  projectId
+})
+
+// 4. Create a metadata object - optional
+const metadata = {
+  name: 'AppKit',
+  description: 'AppKit TON Example',
+  url: 'https://example.com', // origin must match your domain & subdomain
+  icons: ['https://avatars.githubusercontent.com/u/179229932']
+}
+
+// 5. Create modal
+const modal = createAppKit({
+  adapters: [tonAdapter],
+  networks,
+  metadata,
+  projectId,
+  features: {
+    analytics: true // Optional - defaults to your Dashboard configuration,
+    email: false,
+    socials: []
+  }
+})
+
+// 6. Trigger modal programaticaly
+const openConnectModalBtn = document.getElementById('open-connect-modal')
+const openNetworkModalBtn = document.getElementById('open-network-modal')
+
+openConnectModalBtn.addEventListener('click', () => modal.open())
+openNetworkModalBtn.addEventListener('click', () => modal.open({ view: 'Networks' }))
+```
+
diff --git a/snippets/appkit/javascript/ton/about/triggermodal.mdx b/snippets/appkit/javascript/ton/about/triggermodal.mdx
new file mode 100644
index 000000000..c6d488d0e
--- /dev/null
+++ b/snippets/appkit/javascript/ton/about/triggermodal.mdx
@@ -0,0 +1,19 @@
+To open AppKit you can use our [**web component**](/appkit/javascript/core/components) or build your own button with AppKit [**actions**](/appkit/javascript/core/actions#open-and-close-the-modal).
+In this example we are going to use the `<appkit-button>` component.
+
+Web components are global html elements that don't require importing.
+
+```tsx
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>HTML AppKit Example</title>
+  </head>
+  <body>
+    <appkit-button />
+    <script type="module" src="main.js"></script>
+  </body>
+</html>
+```
+
diff --git a/snippets/appkit/next/ton/about/implementation.mdx b/snippets/appkit/next/ton/about/implementation.mdx
new file mode 100644
index 000000000..0b7ef2031
--- /dev/null
+++ b/snippets/appkit/next/ton/about/implementation.mdx
@@ -0,0 +1,47 @@
+AppKit TON provides a set of React components and hooks to easily connect TON wallets with your application.
+
+On top of your app set up the following configuration, making sure that all functions are called outside any React component to avoid unwanted rerenders.
+
+```tsx
+// App.tsx
+import { createAppKit } from '@reown/appkit/react'
+import { TonAdapter } from '@reown/appkit-adapter-ton'
+import { ton, tonTestnet } from '@reown/appkit/networks'
+
+// 1. Get projectId from https://dashboard.reown.com
+const projectId = 'YOUR_PROJECT_ID'
+
+// 2. Set the networks
+const networks = [ton, tonTestnet]
+
+// 3. Set up TON Adapter
+const tonAdapter = new TonAdapter({
+  projectId
+})
+
+// 4. Create a metadata object - optional
+const metadata = {
+  name: 'AppKit',
+  description: 'AppKit TON Example',
+  url: 'https://example.com', // origin must match your domain & subdomain
+  icons: ['https://avatars.githubusercontent.com/u/179229932']
+}
+
+// 5. Create modal
+createAppKit({
+  adapters: [tonAdapter],
+  networks,
+  metadata,
+  projectId,
+  features: {
+    analytics: true // Optional - defaults to your Cloud configuration,
+    email: false,
+    socials: []
+  }
+})
+
+export default function App() {
+  return <YourApp />
+}
+```
+
diff --git a/snippets/appkit/next/ton/about/triggermodal.mdx b/snippets/appkit/next/ton/about/triggermodal.mdx
new file mode 100644
index 000000000..0f7f42c0b
--- /dev/null
+++ b/snippets/appkit/next/ton/about/triggermodal.mdx
@@ -0,0 +1,11 @@
+To open AppKit you can use our default [web components](/appkit/react/core/components) or build your own logic using [AppKit hooks](/appkit/react/core/hooks).
+In this example we are going to use the `<appkit-button>` component.
+
+Web components are global html elements that don't require importing.
+
+```tsx
+export default function ConnectButton() {
+  return <appkit-button />
+}
+```
+
diff --git a/snippets/appkit/next/wagmi/about/implementation.mdx b/snippets/appkit/next/wagmi/about/implementation.mdx
index fe141082a..ab817dedf 100644
--- a/snippets/appkit/next/wagmi/about/implementation.mdx
+++ b/snippets/appkit/next/wagmi/about/implementation.mdx
@@ -45,19 +45,15 @@ import { mainnet, arbitrum, base, scroll, polygon } from '@reown/appkit/networks
 ```
 
 <Note>
-Looking to add a custom network? Check out the [custom networks](/appkit/next/core/custom-networks) section.
+  Looking to add a custom network? Check out the [custom
+  networks](/appkit/next/core/custom-networks) section.
 </Note>
 
 ## SSR and Hydration
 
-:::info
-
 - Using cookies is completely optional and by default Wagmi will use `localStorage` instead if the `storage` param is not defined.
 - The `ssr` flag will delay the hydration of Wagmi's store to avoid hydration mismatch errors.
 - AppKit doesn't fully support the `ssr` flag.
-  :::
-
-<br />
 
 ### Context Provider
 
@@ -141,8 +137,7 @@ export default async function RootLayout({
 }: Readonly<{
   children: React.ReactNode
 }>) {
-
-  const headersObj = await headers();
+  const headersObj = await headers()
   const cookies = headersObj.get('cookie')
 
   return (
diff --git a/snippets/appkit/nuxt/ton/about/implementation.mdx b/snippets/appkit/nuxt/ton/about/implementation.mdx
new file mode 100644
index 000000000..ffe0a7212
--- /dev/null
+++ b/snippets/appkit/nuxt/ton/about/implementation.mdx
@@ -0,0 +1,66 @@
+AppKit TON provides a set of Vue components and composables to easily connect TON wallets with your Nuxt application.
+
+First, configure your `nuxt.config.ts` for SSR compatibility:
+
+```javascript
+export default defineNuxtConfig({
+  ssr: false,
+  runtimeConfig: {
+    public: {
+      projectId: process.env.NUXT_PROJECT_ID
+    }
+  }
+})
+```
+
+In your `app.vue` file set up the following configuration:
+
+```javascript
+<script setup lang="ts">
+import { createAppKit } from '@reown/appkit/vue'
+import { TonAdapter } from '@reown/appkit-adapter-ton'
+import { ton, tonTestnet } from '@reown/appkit/networks'
+
+const config = useRuntimeConfig()
+const projectId = config.public.projectId
+
+const networks = [ton, tonTestnet]
+
+const tonAdapter = new TonAdapter({
+  projectId
+})
+
+const metadata = {
+  name: 'AppKit Nuxt',
+  description: 'AppKit Nuxt TON Example',
+  url: 'https://example.com',
+  icons: ['https://avatars.githubusercontent.com/u/179229932']
+}
+
+createAppKit({
+  adapters: [tonAdapter],
+  networks,
+  metadata,
+  projectId,
+  features: {
+    analytics: true,
+    email: false,
+    socials: []
+  }
+})
+</script>
+
+<template>
+  <client-only>
+    <div class="page-container">
+      <h1>Nuxt TON Example</h1>
+      <appkit-button />
+    </div>
+  </client-only>
+</template>
+```
+
+<Note>
+  The `ssr: false` configuration and `<client-only>` wrapper ensure AppKit works correctly with Nuxt's SSR environment.
+</Note>
+
diff --git a/snippets/appkit/nuxt/ton/about/triggermodal.mdx b/snippets/appkit/nuxt/ton/about/triggermodal.mdx
new file mode 100644
index 000000000..5c4bdf978
--- /dev/null
+++ b/snippets/appkit/nuxt/ton/about/triggermodal.mdx
@@ -0,0 +1,13 @@
+To open AppKit you can use our default [web components](/appkit/vue/core/components) or build your own logic using [AppKit composables](/appkit/vue/core/composables).
+In this example we are going to use the `<appkit-button>` component.
+
+Web components are global html elements that don't require importing.
+
+```vue
+<template>
+  <client-only>
+    <appkit-button />
+  </client-only>
+</template>
+```
+
diff --git a/snippets/appkit/react/ton/about/implementation.mdx b/snippets/appkit/react/ton/about/implementation.mdx
new file mode 100644
index 000000000..4b09bd44f
--- /dev/null
+++ b/snippets/appkit/react/ton/about/implementation.mdx
@@ -0,0 +1,47 @@
+AppKit TON provides a set of React components and hooks to easily connect TON wallets with your application.
+
+On top of your app set up the following configuration, making sure that all functions are called outside any React component to avoid unwanted rerenders.
+
+```tsx
+// App.tsx
+import { createAppKit } from '@reown/appkit/react'
+import { TonAdapter } from '@reown/appkit-adapter-ton'
+import { ton, tonTestnet } from '@reown/appkit/networks'
+
+// 1. Get projectId from https://dashboard.reown.com
+const projectId = 'YOUR_PROJECT_ID'
+
+// 2. Set the networks
+const networks = [ton, tonTestnet]
+
+// 3. Set up TON Adapter
+const tonAdapter = new TonAdapter({
+  projectId
+})
+
+// 4. Create a metadata object - optional
+const metadata = {
+  name: 'AppKit',
+  description: 'AppKit TON Example',
+  url: 'https://example.com', // origin must match your domain & subdomain
+  icons: ['https://avatars.githubusercontent.com/u/179229932']
+}
+
+// 5. Create modal
+createAppKit({
+  adapters: [tonAdapter],
+  networks,
+  metadata,
+  projectId,
+  features: {
+    analytics: true // Optional - defaults to your Dashboard configuration,
+    email: false,
+    socials: []
+  }
+})
+
+export default function App() {
+  return <YourApp />
+}
+```
+
diff --git a/snippets/appkit/react/ton/about/triggermodal.mdx b/snippets/appkit/react/ton/about/triggermodal.mdx
new file mode 100644
index 000000000..0f7f42c0b
--- /dev/null
+++ b/snippets/appkit/react/ton/about/triggermodal.mdx
@@ -0,0 +1,11 @@
+To open AppKit you can use our default [web components](/appkit/react/core/components) or build your own logic using [AppKit hooks](/appkit/react/core/hooks).
+In this example we are going to use the `<appkit-button>` component.
+
+Web components are global html elements that don't require importing.
+
+```tsx
+export default function ConnectButton() {
+  return <appkit-button />
+}
+```
+
diff --git a/snippets/appkit/svelte/ton/about/implementation.mdx b/snippets/appkit/svelte/ton/about/implementation.mdx
new file mode 100644
index 000000000..4cdaaf698
--- /dev/null
+++ b/snippets/appkit/svelte/ton/about/implementation.mdx
@@ -0,0 +1,51 @@
+For this example, we'll be using **TON**.
+
+Start by importing `createAppKit` from `@reown/appkit` and the necessary chains and TonAdapter from `@reown/appkit-adapter-ton`.
+
+```ts
+// lib/appkit.ts
+import { browser } from '$app/environment'
+import { createAppKit } from '@reown/appkit'
+import { TonAdapter } from '@reown/appkit-adapter-ton'
+import { ton, tonTestnet } from '@reown/appkit/networks'
+
+// Only initialize in browser environment
+let appKit: ReturnType<typeof createAppKit> | undefined = undefined
+
+if (browser) {
+  const projectId = import.meta.env.VITE_PROJECT_ID
+  if (!projectId) {
+    throw new Error('VITE_PROJECT_ID is not set')
+  }
+
+  const networks = [ton, tonTestnet]
+
+  // Create adapter
+  const tonAdapter = new TonAdapter()
+
+  // Initialize AppKit
+  appKit = createAppKit({
+    adapters: [tonAdapter],
+    networks: [ton, tonTestnet],
+    defaultNetwork: ton,
+    projectId,
+    metadata: {
+      name: 'SvelteKit Example',
+      description: 'SvelteKit Example using TON adapter',
+      url: 'https://reown.com/appkit',
+      icons: ['https://avatars.githubusercontent.com/u/179229932?s=200&v=4']
+    }
+  })
+}
+
+export { appKit }
+```
+
+<Note>
+  Make sure to set your `VITE_PROJECT_ID` environment variable which you can get from [Reown Dashboard](https://dashboard.reown.com).
+</Note>
+
+<Note>
+  The `browser` check ensures AppKit is only initialized in the browser environment, which is important for SvelteKit's SSR compatibility.
+</Note>
+
diff --git a/snippets/appkit/svelte/ton/about/triggermodal.mdx b/snippets/appkit/svelte/ton/about/triggermodal.mdx
new file mode 100644
index 000000000..3cb2b69b6
--- /dev/null
+++ b/snippets/appkit/svelte/ton/about/triggermodal.mdx
@@ -0,0 +1,20 @@
+To open AppKit you can use our [**web component**](/appkit/svelte/core/components) or build your own button with AppKit [**actions**](/appkit/svelte/core/actions#open-and-close-the-modal).
+In this example we are going to use the `<appkit-button>` component.
+
+Web components are global html elements that don't require importing.
+
+```svelte
+<script lang="ts">
+  // Import your AppKit configuration to ensure it's initialized
+  import '$lib/appkit';
+</script>
+
+<main>
+  <h1>Svelte + AppKit Integration</h1>
+  
+  <div class="card">
+    <appkit-button />
+  </div>
+</main>
+```
+
diff --git a/snippets/appkit/vue/ton/about/implementation.mdx b/snippets/appkit/vue/ton/about/implementation.mdx
new file mode 100644
index 000000000..057e81466
--- /dev/null
+++ b/snippets/appkit/vue/ton/about/implementation.mdx
@@ -0,0 +1,49 @@
+AppKit TON provides a set of Vue components and composables to easily connect TON wallets with your application.
+
+On top of your app set up the following configuration, making sure that all functions are called outside any Vue component to avoid unwanted rerenders.
+
+In your `App.vue` file set up the following configuration.
+
+```tsx
+<script setup lang="ts">
+
+import { createAppKit } from '@reown/appkit/vue'
+import { TonAdapter } from '@reown/appkit-adapter-ton'
+import { ton, tonTestnet } from '@reown/appkit/networks'
+
+// 1. Get projectId from https://dashboard.reown.com
+const projectId = 'YOUR_PROJECT_ID'
+
+// 2. Set the networks
+const networks = [ton, tonTestnet]
+
+// 3. Set up TON Adapter
+const tonAdapter = new TonAdapter({
+  projectId
+})
+
+// 4. Create a metadata object - optional
+const metadata = {
+  name: 'AppKit',
+  description: 'AppKit TON Example',
+  url: 'https://example.com', // origin must match your domain & subdomain
+  icons: ['https://avatars.githubusercontent.com/u/179229932']
+}
+
+// 5. Create modal
+createAppKit({
+  adapters: [tonAdapter],
+  networks,
+  metadata,
+  projectId,
+  features: {
+    analytics: true // Optional - defaults to your Cloud configuration,
+    email: false,
+    socials: []
+  }
+})
+</script>
+
+<template> // Rest of your app ... </template>
+```
+
diff --git a/snippets/appkit/vue/ton/about/triggermodal.mdx b/snippets/appkit/vue/ton/about/triggermodal.mdx
new file mode 100644
index 000000000..ffa2feb57
--- /dev/null
+++ b/snippets/appkit/vue/ton/about/triggermodal.mdx
@@ -0,0 +1,11 @@
+To open AppKit you can use our default [web components](/appkit/vue/core/components) or build your own logic using [AppKit composables](/appkit/vue/core/composables).
+In this example we are going to use the `<appkit-button>` component.
+
+Web components are global html elements that don't require importing.
+
+```vue
+<template>
+  <appkit-button />
+</template>
+```
+
diff --git a/snippets/cloud-banner.mdx b/snippets/cloud-banner.mdx
index 895679d4e..35cbf3bd6 100644
--- a/snippets/cloud-banner.mdx
+++ b/snippets/cloud-banner.mdx
@@ -1,12 +1,9 @@
-<Info>
-
-**Don't have a project ID?**
-
-Head over to Reown Dashboard and create a new project now!
-
 <Card
-  title="Get started"
+  title="Don't have a project ID?"
+  icon="circle-info"
   href="https://dashboard.reown.com/?utm_source=cloud_banner&utm_medium=docs&utm_campaign=backlinks"
-/>
+>
+
+Head over to Reown Dashboard and create a new project.
 
-</Info>
+</Card>
diff --git a/walletkit/react-native/usage.mdx b/walletkit/react-native/usage.mdx
index cb5e4b124..52a39ca34 100644
--- a/walletkit/react-native/usage.mdx
+++ b/walletkit/react-native/usage.mdx
@@ -2,13 +2,13 @@
 title: Usage
 ---
 
-import CloudBanner from "/snippets/cloud-banner.mdx";
+import CloudBanner from '/snippets/cloud-banner.mdx'
 
 This section provides instructions on how to initialize the WalletKit client, approve sessions with supported namespaces, and respond to session requests, enabling easy integration of Web3 wallets with dapps through a simple and intuitive interface.
 
 ## Cloud Configuration
 
-Create a new project on Reown Dashboard at https://dashboard.reown.com and obtain a new project ID.
+Create a new project on [Reown Dashboard](https://dashboard.reown.com) and obtain a new project ID.
 
 <CloudBanner />
 
@@ -19,7 +19,7 @@ Create a new project on Reown Dashboard at https://dashboard.reown.com and obtai
 `@walletconnect/react-native-compat` must be installed and imported before any `@reown/*` dependencies for proper React Native polyfills.
 
 ```ts
-import "@walletconnect/react-native-compat";
+import '@walletconnect/react-native-compat'
 // Other imports
 ```
 
@@ -30,25 +30,25 @@ Create a new instance from `Core` and initialize it with your `projectId`. Next,
 The `pair` function will help us pair between the dapp and wallet and will be used shortly.
 
 ```javascript
-import { Core } from "@walletconnect/core";
-import { WalletKit } from "@reown/walletkit";
+import { Core } from '@walletconnect/core'
+import { WalletKit } from '@reown/walletkit'
 
 const core = new Core({
-  projectId: process.env.PROJECT_ID,
-});
+  projectId: process.env.PROJECT_ID
+})
 
 const walletKit = await WalletKit.init({
   core, // <- pass the shared `core` instance
   metadata: {
-    name: "Demo React Native Wallet",
-    description: "Demo RN Wallet to interface with Dapps",
-    url: "www.walletconnect.com",
-    icons: ["https://your_wallet_icon.png"],
+    name: 'Demo React Native Wallet',
+    description: 'Demo RN Wallet to interface with Dapps',
+    url: 'www.walletconnect.com',
+    icons: ['https://your_wallet_icon.png'],
     redirect: {
-      native: "yourwalletscheme://",
-    },
-  },
-});
+      native: 'yourwalletscheme://'
+    }
+  }
+})
 ```
 
 ### Core Instance Sharing
@@ -62,27 +62,31 @@ Starting from newer versions of WalletKit, Core instances are shared globally by
 ```javascript
 const core = new Core({
   projectId: process.env.PROJECT_ID,
-  customStoragePrefix: `test-${Date.now()}`, // Unique prefix for each test
-});
+  customStoragePrefix: `test-${Date.now()}` // Unique prefix for each test
+})
 ```
 
 <Warning>
-Don't use randomly generated `customStoragePrefix` in production - this will cause the client to create new storage each time it is initialized. The client will not be able to persist/read existing data and all existing sessions will be lost after each reload.
+  Don't use randomly generated `customStoragePrefix` in production - this will cause the client to
+  create new storage each time it is initialized. The client will not be able to persist/read
+  existing data and all existing sessions will be lost after each reload.
 </Warning>
 
 #### Option 2: Disable global Core sharing
 
 ```javascript
 // Set environment variable before initializing Core
-process.env.DISABLE_GLOBAL_CORE = "true";
+process.env.DISABLE_GLOBAL_CORE = 'true'
 
 const core = new Core({
-  projectId: process.env.PROJECT_ID,
-});
+  projectId: process.env.PROJECT_ID
+})
 ```
 
 <Note>
-The global Core sharing behavior was introduced to prevent resource waste when multiple SDK instances are created. If you're running parallel tests and experiencing cross-test interference, use one of the solutions above to ensure proper test isolation.
+  The global Core sharing behavior was introduced to prevent resource waste when multiple SDK
+  instances are created. If you're running parallel tests and experiencing cross-test interference,
+  use one of the solutions above to ensure proper test isolation.
 </Note>
 
 ## Session
@@ -175,7 +179,7 @@ const approvedNamespaces = buildApprovedNamespaces({
 You can get the wallet active sessions using the `getActiveSessions` function.
 
 ```js
-const activeSessions = walletKit.getActiveSessions();
+const activeSessions = walletKit.getActiveSessions()
 ```
 
 ### EVM methods & events
@@ -229,18 +233,18 @@ The `session_proposal` event is emitted when a dapp initiates a new session with
 The `pair` method initiates a WalletConnect pairing process with a dapp using the given `uri` (QR code from the dapps). To learn more about pairing, checkout out the [docs](https://specs.walletconnect.com/2.0/specs/clients/core/pairing/).
 
 ```javascript
-import { getSdkError } from "@walletconnect/utils";
+import { getSdkError } from '@walletconnect/utils'
 
 // Approval: Using this listener for sessionProposal, you can accept the session
-walletKit.on("session_proposal", async (proposal) => {
+walletKit.on('session_proposal', async proposal => {
   const session = await walletKit.approveSession({
     id: proposal.id,
-    namespaces,
-  });
-});
+    namespaces
+  })
+})
 
 // Call this after WCURI is received
-await walletKit.pair({ uri: wcuri });
+await walletKit.pair({ uri: wcuri })
 ```
 
 ### Session Rejection
@@ -248,21 +252,21 @@ await walletKit.pair({ uri: wcuri });
 You can use the `getSDKError` function, which is available in the `@walletconnect/utils` for the rejection function [library](https://github.com/WalletConnect/walletconnect-monorepo/tree/v2.0/packages/utils).
 
 ```javascript
-import { getSdkError } from "@walletconnect/utils";
+import { getSdkError } from '@walletconnect/utils'
 
 // Reject: Using this listener for sessionProposal, you can reject the session
-walletKit.on("session_proposal", async (proposal) => {
+walletKit.on('session_proposal', async proposal => {
   await walletKit.rejectSession({
     id: proposal.id,
-    reason: getSdkError("USER_REJECTED_METHODS"),
-  });
-});
+    reason: getSdkError('USER_REJECTED_METHODS')
+  })
+})
 ```
 
 ### Responding to Session requests
 
 <Frame caption="session-request-example">
-    <img src="/images/assets/SessionRequestExample.png" />
+  <img src="/images/assets/SessionRequestExample.png" />
 </Frame>
 
 The `session_request` event is triggered by a dapp when it needs the wallet to perform a specific action, such as signing a transaction. The event contains a `topic` and a `request` object, which will vary depending on the action requested.
@@ -276,21 +280,21 @@ To sign the message, the wallet can use the `wallet.signMessage` method and pass
 The wallet then signs the message. `signedMessage`, along with the `id` from the event payload, can then be used to create a `response` object, which can be passed into `respondSessionRequest`.
 
 ```javascript
-walletKit.on("session_request", async (event) => {
-  const { topic, params, id } = event;
-  const { request } = params;
-  const requestParamsMessage = request.params[0];
+walletKit.on('session_request', async event => {
+  const { topic, params, id } = event
+  const { request } = params
+  const requestParamsMessage = request.params[0]
 
   // convert `requestParamsMessage` by using a method like hexToUtf8
-  const message = hexToUtf8(requestParamsMessage);
+  const message = hexToUtf8(requestParamsMessage)
 
   // sign the message
-  const signedMessage = await wallet.signMessage(message);
+  const signedMessage = await wallet.signMessage(message)
 
-  const response = { id, result: signedMessage, jsonrpc: "2.0" };
+  const response = { id, result: signedMessage, jsonrpc: '2.0' }
 
-  await walletKit.respondSessionRequest({ topic, response });
-});
+  await walletKit.respondSessionRequest({ topic, response })
+})
 ```
 
 To reject a session request, the response should be similar to this.
@@ -298,12 +302,12 @@ To reject a session request, the response should be similar to this.
 ```javascript
 const response = {
   id,
-  jsonrpc: "2.0",
+  jsonrpc: '2.0',
   error: {
     code: 5000,
-    message: "User rejected.",
-  },
-};
+    message: 'User rejected.'
+  }
+}
 ```
 
 ### Updating a Session
@@ -311,7 +315,7 @@ const response = {
 The `session_update` event is emitted from the wallet when the session is updated by calling `updateSession`. To update a session, pass in the [topic](../../advanced/glossary#topics) and the new namespace.
 
 ```javascript
-await walletKit.updateSession({ topic, namespaces: newNs });
+await walletKit.updateSession({ topic, namespaces: newNs })
 ```
 
 ### Extending a Session
@@ -319,7 +323,7 @@ await walletKit.updateSession({ topic, namespaces: newNs });
 To extend the session, call the `extendSession` method and pass in the new `topic`. The `session_update` event will be emitted from the wallet.
 
 ```javascript
-await walletKit.extendSession({ topic });
+await walletKit.extendSession({ topic })
 ```
 
 ### Session Disconnect
@@ -331,8 +335,8 @@ To initiate a session disconnect, call the `disconnectSession` method and pass i
 ```javascript
 await walletKit.disconnectSession({
   topic,
-  reason: getSdkError("USER_DISCONNECTED"),
-});
+  reason: getSdkError('USER_DISCONNECTED')
+})
 ```
 
 ### Emitting Session Events
@@ -343,11 +347,11 @@ To emit session events, call the `emitSessionEvent` and pass in the params. If y
 await walletKit.emitSessionEvent({
   topic,
   event: {
-    name: "accountsChanged",
-    data: ["0xab16a96D359eC26a11e2C2b3d8f8B8942d5Bfcdb"],
+    name: 'accountsChanged',
+    data: ['0xab16a96D359eC26a11e2C2b3d8f8B8942d5Bfcdb']
   },
-  chainId: "eip155:1",
-});
+  chainId: 'eip155:1'
+})
 ```
 
 In the following example, the wallet will emit `session_event` when the wallet switches chains.
@@ -356,9 +360,9 @@ In the following example, the wallet will emit `session_event` when the wallet s
 await walletKit.emitSessionEvent({
   topic,
   event: {
-    name: "chainChanged",
-    data: 1,
+    name: 'chainChanged',
+    data: 1
   },
-  chainId: "eip155:1",
-});
+  chainId: 'eip155:1'
+})
 ```
diff --git a/walletkit/web/usage.mdx b/walletkit/web/usage.mdx
index 5eb201061..cb63825f0 100644
--- a/walletkit/web/usage.mdx
+++ b/walletkit/web/usage.mdx
@@ -2,7 +2,7 @@
 title: Usage
 ---
 
-import CloudBanner from "/snippets/cloud-banner.mdx";
+import CloudBanner from '/snippets/cloud-banner.mdx'
 
 ## Overview
 
@@ -24,12 +24,12 @@ This section provides instructions on how to initialize the WalletKit client, ap
 This integration automatically opens a new web wallet tab when a user clicks "Connect" in a dApp. The wallet handles the WalletConnect URI automatically, meaning users don't need to manually copy and paste the URI. This provides a seamless, one-click connection experience.
 
 <Frame caption="Abstract Global Wallet to Wolfswap">
-<video
-  controls
-  autoPlay
-  className="w-full aspect-video"
-  src="/images/web-wallet-demo.mp4"
-></video>
+  <video
+    controls
+    autoPlay
+    className="w-full aspect-video"
+    src="/images/web-wallet-demo.mp4"
+  ></video>
 </Frame>
 
 ### QR Code Integration
@@ -37,17 +37,17 @@ This integration automatically opens a new web wallet tab when a user clicks "Co
 This integration only handles the session proposal and approval via the WalletConnect QR code. The user will need to manually copy and paste the WalletConnect URI into the wallet.
 
 <Frame caption="Safe Wallet Connecting to AppKit Lab">
-<video
-  controls
-  autoPlay
-  className="w-full aspect-video"
-  src="/images/web-wallet-qr-demo.mp4"
-></video>
+  <video
+    controls
+    autoPlay
+    className="w-full aspect-video"
+    src="/images/web-wallet-qr-demo.mp4"
+  ></video>
 </Frame>
 
 ## Cloud Configuration
 
-Create a new project on Reown Dashboard at https://dashboard.reown.com and obtain a new project ID.
+Create a new project on [Reown Dashboard](https://dashboard.reown.com) and obtain a new project ID.
 
 <CloudBanner />
 
@@ -56,26 +56,28 @@ Create a new project on Reown Dashboard at https://dashboard.reown.com and obtai
 Create a new instance from Core and initialize it with a projectId created from installation. Next, create WalletKit instance by calling init on walletKit. Passing in the options object containing metadata about the app and an optional relay URL.
 
 <Info>
-Make sure you initialize `walletKit` globally and use the same instance for all your sessions. For React-based apps, you can initialize it in the root component and export it to use in other components.
+  Make sure you initialize `walletKit` globally and use the same instance for all your sessions. For
+  React-based apps, you can initialize it in the root component and export it to use in other
+  components.
 </Info>
 
 ```javascript
-import { Core } from "@walletconnect/core";
-import { WalletKit } from "@reown/walletkit";
+import { Core } from '@walletconnect/core'
+import { WalletKit } from '@reown/walletkit'
 
 const core = new Core({
-  projectId: process.env.PROJECT_ID,
-});
+  projectId: process.env.PROJECT_ID
+})
 
 const walletKit = await WalletKit.init({
   core, // <- pass the shared `core` instance
   metadata: {
-    name: "Demo app",
-    description: "Demo Client as Wallet/Peer",
-    url: "https://reown.com/walletkit",
-    icons: [],
-  },
-});
+    name: 'Demo app',
+    description: 'Demo Client as Wallet/Peer',
+    url: 'https://reown.com/walletkit',
+    icons: []
+  }
+})
 ```
 
 ### Core Instance Sharing
@@ -89,27 +91,31 @@ Starting from newer versions of WalletKit, Core instances are shared globally by
 ```javascript
 const core = new Core({
   projectId: process.env.PROJECT_ID,
-  customStoragePrefix: `test-${Date.now()}`, // Unique prefix for each test
-});
+  customStoragePrefix: `test-${Date.now()}` // Unique prefix for each test
+})
 ```
 
 <Warning>
-Don't use randomly generated `customStoragePrefix` in production - this will cause the client to create new storage each time it is initialized. The client will not be able to persist/read existing data and all existing sessions will be lost after each reload.
+  Don't use randomly generated `customStoragePrefix` in production - this will cause the client to
+  create new storage each time it is initialized. The client will not be able to persist/read
+  existing data and all existing sessions will be lost after each reload.
 </Warning>
 
 #### Option 2: Disable global Core sharing
 
 ```javascript
 // Set environment variable before initializing Core
-process.env.DISABLE_GLOBAL_CORE = "true";
+process.env.DISABLE_GLOBAL_CORE = 'true'
 
 const core = new Core({
-  projectId: process.env.PROJECT_ID,
-});
+  projectId: process.env.PROJECT_ID
+})
 ```
 
 <Note>
-The global Core sharing behavior was introduced to prevent resource waste when multiple SDK instances are created. If you're running parallel tests and experiencing cross-test interference, use one of the solutions above to ensure proper test isolation.
+  The global Core sharing behavior was introduced to prevent resource waste when multiple SDK
+  instances are created. If you're running parallel tests and experiencing cross-test interference,
+  use one of the solutions above to ensure proper test isolation.
 </Note>
 
 ## Session
@@ -133,7 +139,8 @@ When opening the wallet directly from the dApp, the `WC_URI` will be in the foll
 We recommend closing the web wallet tab after the user approves the request and redirecting back to the dApp. For web requests, redirect to the original browser tab, and for mobile requests, redirect to the native mobile dApp.
 
 <Note>
-To test your web wallet connection flow, use our [Appkit Laboratory](https://appkit-lab.reown.com/) by adding a custom wallet with your web wallet URL. 
+  To test your web wallet connection flow, use our [Appkit
+  Laboratory](https://appkit-lab.reown.com/) by adding a custom wallet with your web wallet URL.
 </Note>
 
 ### Handling Session Requests
@@ -147,7 +154,8 @@ When a dApp sends a session request to your wallet, the request will be availabl
 This format allows your wallet to identify both the specific request and the session it belongs to.
 
 <Note>
-To test your web wallet connection flow, use our [Appkit Laboratory](https://appkit-lab.reown.com/) by adding a custom wallet with your web wallet URL. 
+  To test your web wallet connection flow, use our [Appkit
+  Laboratory](https://appkit-lab.reown.com/) by adding a custom wallet with your web wallet URL.
 </Note>
 
 ### Handling Redirects
@@ -155,6 +163,7 @@ To test your web wallet connection flow, use our [Appkit Laboratory](https://app
 When handling redirects after session approval or request completion, you should:
 
 1. For web dApps:
+
    - Redirect back to the original browser tab using `window.opener.location.href`
    - Close the current wallet tab using `window.close()`
 
@@ -168,21 +177,21 @@ Example implementation:
 ```javascript
 function handleRedirect(session) {
   // Check if this is a native app
-  const isNativeApp = session.peer.metadata.redirect !== undefined;
-  
+  const isNativeApp = session.peer.metadata.redirect !== undefined
+
   if (isNativeApp) {
     // Redirect to native app if URL is available
     if (session.peer.metadata.redirect) {
-      window.location.href = session.peer.metadata.redirect;
+      window.location.href = session.peer.metadata.redirect
     } else {
       // Show "Return to App" message
-      showReturnToAppMessage();
+      showReturnToAppMessage()
     }
   } else {
     // For web dApps, redirect back to original tab
     if (window.opener) {
-      window.opener.location.href = session.peer.metadata.url;
-      window.close();
+      window.opener.location.href = session.peer.metadata.url
+      window.close()
     }
   }
 }
@@ -273,7 +282,7 @@ const approvedNamespaces = buildApprovedNamespaces({
 You can get the wallet active sessions using the `getActiveSessions` function.
 
 ```js
-const activeSessions = walletKit.getActiveSessions();
+const activeSessions = walletKit.getActiveSessions()
 ```
 
 ### EVM methods & events
@@ -323,16 +332,13 @@ The `session_proposal` event is emitted when a dapp initiates a new session with
 The `pair` method initiates a WalletConnect pairing process with a dapp using the given `uri` (QR code from the dapps). To learn more about pairing, checkout out the [docs](/advanced/api/core/pairing).
 
 ```javascript
-walletKit.on(
-  "session_proposal",
-  async (proposal: WalletKitTypes.SessionProposal) => {
-    const session = await walletKit.approveSession({
-      id: proposal.id,
-      namespaces,
-    });
-  }
-);
-await walletKit.pair({ uri });
+walletKit.on('session_proposal', async (proposal: WalletKitTypes.SessionProposal) => {
+  const session = await walletKit.approveSession({
+    id: proposal.id,
+    namespaces
+  })
+})
+await walletKit.pair({ uri })
 ```
 
 ### 🛠️ Usage examples
@@ -364,15 +370,12 @@ Additionally, we highly recommend you to use our `namespace` builder utility tha
 In the event you want to reject the session proposal, call the `rejectSession` method. The `getSDKError` function comes from the `@walletconnect/utils` [library](https://github.com/WalletConnect/walletconnect-monorepo/tree/v2.0/packages/utils).
 
 ```javascript
-walletKit.on(
-  "session_proposal",
-  async (proposal: WalletKitTypes.SessionProposal) => {
-    await walletKit.rejectSession({
-      id: proposal.id,
-      reason: getSdkError("USER_REJECTED_METHODS"),
-    });
-  }
-);
+walletKit.on('session_proposal', async (proposal: WalletKitTypes.SessionProposal) => {
+  await walletKit.rejectSession({
+    id: proposal.id,
+    reason: getSdkError('USER_REJECTED_METHODS')
+  })
+})
 ```
 
 ### 🛠️ Usage examples
@@ -404,24 +407,21 @@ As an example, if the dapp requests a `personal_sign` method, you can extract th
 To sign the message, you can use your wallet's `signMessage` method and pass in the message. The signed message, along with the `id` from the event payload, can then be used to create a `response` object, which can be passed into `respondSessionRequest`.
 
 ```javascript
-walletKit.on(
-  "session_request",
-  async (event: WalletKitTypes.SessionRequest) => {
-    const { topic, params, id } = event;
-    const { request } = params;
-    const requestParamsMessage = request.params[0];
+walletKit.on('session_request', async (event: WalletKitTypes.SessionRequest) => {
+  const { topic, params, id } = event
+  const { request } = params
+  const requestParamsMessage = request.params[0]
 
-    // convert `requestParamsMessage` by using a method like hexToUtf8
-    const message = hexToUtf8(requestParamsMessage);
+  // convert `requestParamsMessage` by using a method like hexToUtf8
+  const message = hexToUtf8(requestParamsMessage)
 
-    // sign the message
-    const signedMessage = await wallet.signMessage(message);
+  // sign the message
+  const signedMessage = await wallet.signMessage(message)
 
-    const response = { id, result: signedMessage, jsonrpc: "2.0" };
+  const response = { id, result: signedMessage, jsonrpc: '2.0' }
 
-    await walletKit.respondSessionRequest({ topic, response });
-  }
-);
+  await walletKit.respondSessionRequest({ topic, response })
+})
 ```
 
 To reject a session request, the response should be similar to this.
@@ -429,12 +429,12 @@ To reject a session request, the response should be similar to this.
 ```javascript
 const response = {
   id,
-  jsonrpc: "2.0",
+  jsonrpc: '2.0',
   error: {
     code: 5000,
-    message: "User rejected.",
-  },
-};
+    message: 'User rejected.'
+  }
+}
 ```
 
 ### 🛠️ Usage examples
@@ -459,13 +459,13 @@ Example usage:
 `id` argument being the request id from the request payload.
 
 ```javascript
-import { formatJsonRpcResult } from "@walletconnect/jsonrpc-utils";
+import { formatJsonRpcResult } from '@walletconnect/jsonrpc-utils'
 
-const signature = await cryptoWallet.signTransaction(signTransaction);
+const signature = await cryptoWallet.signTransaction(signTransaction)
 const response = await walletKit.respondSessionRequest({
   topic: session.topic,
-  response: formatJsonRpcResult(id, signature),
-});
+  response: formatJsonRpcResult(id, signature)
+})
 ```
 
 ### Updating a Session
@@ -477,48 +477,48 @@ After you update the session, the other peer will receive a `session_update` eve
 An example adding a new account to an existing session:
 
 ```javascript
-const namespaces = session.namespaces;
+const namespaces = session.namespaces
 const accounts = [
-  "eip155:1:0xab16a96d359ec26a11e2c2b3d8f8b8942d5bfcdb",
-  "eip155:1:0x1234567890123456789012345678901234567890",
-];
+  'eip155:1:0xab16a96d359ec26a11e2c2b3d8f8b8942d5bfcdb',
+  'eip155:1:0x1234567890123456789012345678901234567890'
+]
 const updatedNamespaces = {
   ...namespaces,
   eip155: {
     ...namespaces.eip155,
-    accounts,
-  },
-};
+    accounts
+  }
+}
 const { acknowledged } = await walletKit.updateSession({
   topic: session.topic,
-  namespaces: updatedNamespaces,
-});
+  namespaces: updatedNamespaces
+})
 // If you wish to be notified when the dapp acknowledges the update.
 // note that if the dapp is offline `acknowledged` will not resolve until it comes back online
-await acknowledged();
+await acknowledged()
 ```
 
 An example adding a new chain to an existing session:
 
 ```javascript
-const namespaces = session.namespaces;
-const chains = ["eip155:1", "eip155:137"];
+const namespaces = session.namespaces
+const chains = ['eip155:1', 'eip155:137']
 const accounts = [
-  "eip155:1:0xab16a96d359ec26a11e2c2b3d8f8b8942d5bfcdb",
-  "eip155:137:0x1234567890123456789012345678901234567890",
-];
+  'eip155:1:0xab16a96d359ec26a11e2c2b3d8f8b8942d5bfcdb',
+  'eip155:137:0x1234567890123456789012345678901234567890'
+]
 const updatedNamespaces = {
   ...namespaces,
   eip155: {
     ...namespaces.eip155,
     accounts,
-    chains,
-  },
-};
+    chains
+  }
+}
 await walletKit.updateSession({
   topic: session.topic,
-  namespaces: updatedNamespaces,
-});
+  namespaces: updatedNamespaces
+})
 ```
 
 ### 🛠️ Usage examples
@@ -552,10 +552,10 @@ Additionally, we highly recommend you to use our `namespace` builder utility tha
 Sessions have a default expiry of 7 days. To extend a session by an additional 7 days, call `.extendSession` method and pass in the `topic` of the session you wish to extend.
 
 ```javascript
-const { acknowledged } = await walletKit.extendSession({ topic });
+const { acknowledged } = await walletKit.extendSession({ topic })
 // if you wish to be notified when the dapp acks the extend
 // note that if the dapp is offline `acknowledged` will not resolve until it comes back online
-await acknowledged();
+await acknowledged()
 ```
 
 ### 🛠️ Usage examples
@@ -579,6 +579,7 @@ The other peer will receive a `session_delete` and be notified that the session
 **Note**
 
 It's important that you're subscribed to the `session_delete` event as well, to be notified when the other peer initiates a disconnect.
+
 </Note>
 <Tip>
 We recommend using the `getSDKError` utility function, that will provide ready-to-use `reason` payloads and is available in the `@walletconnect/utils` [library](https://github.com/WalletConnect/walletconnect-monorepo/tree/v2.0/packages/utils).
@@ -587,8 +588,8 @@ We recommend using the `getSDKError` utility function, that will provide ready-t
 ```javascript
 await walletKit.disconnectSession({
   topic,
-  reason: getSdkError("USER_DISCONNECTED"),
-});
+  reason: getSdkError('USER_DISCONNECTED')
+})
 ```
 
 ### 🛠️ Usage examples
@@ -611,11 +612,11 @@ To emit session events, call the `emitSessionEvent` and pass in the params. If y
 await walletKit.emitSessionEvent({
   topic,
   event: {
-    name: "accountsChanged",
-    data: ["0xab16a96D359eC26a11e2C2b3d8f8B8942d5Bfcdb"],
+    name: 'accountsChanged',
+    data: ['0xab16a96D359eC26a11e2C2b3d8f8B8942d5Bfcdb']
   },
-  chainId: "eip155:1",
-});
+  chainId: 'eip155:1'
+})
 ```
 
 In the following example, the wallet will emit `session_event` when the wallet switches chains.
@@ -624,9 +625,9 @@ In the following example, the wallet will emit `session_event` when the wallet s
 await walletKit.emitSessionEvent({
   topic,
   event: {
-    name: "chainChanged",
-    data: 1,
+    name: 'chainChanged',
+    data: 1
   },
-  chainId: "eip155:1",
-});
+  chainId: 'eip155:1'
+})
 ```