diff --git a/dapps/web3modal/next/src/app/page.tsx b/dapps/web3modal/next/src/app/page.tsx
index 1be7eae9e..47f75f33b 100644
--- a/dapps/web3modal/next/src/app/page.tsx
+++ b/dapps/web3modal/next/src/app/page.tsx
@@ -1,5 +1,6 @@
-import Connect, { Custom } from '@/components/Connect'
+import Connect from '@/components/Connect'
 import styles from './page.module.css'
+import Custom from '@/components/Custom'
 
 export default function Home() {
   return (
diff --git a/dapps/web3modal/next/src/components/Connect.tsx b/dapps/web3modal/next/src/components/Connect.tsx
index 7df494b10..13983551f 100644
--- a/dapps/web3modal/next/src/components/Connect.tsx
+++ b/dapps/web3modal/next/src/components/Connect.tsx
@@ -1,12 +1,5 @@
 'use client'
 
-import { useWeb3Modal } from "@web3modal/wagmi/react"
-
 export default function Connect() {
   return <w3m-button />
-}
-
-export function Custom(){
-  const { open } = useWeb3Modal()
-  return <button onClick={()=>open()} >open modal</button>
-}
+}
\ No newline at end of file
diff --git a/dapps/web3modal/next/src/components/Custom.tsx b/dapps/web3modal/next/src/components/Custom.tsx
new file mode 100644
index 000000000..5545647ad
--- /dev/null
+++ b/dapps/web3modal/next/src/components/Custom.tsx
@@ -0,0 +1,13 @@
+'use client'
+
+import { useWeb3Modal } from "@web3modal/wagmi/react"
+import { useAccount, useDisconnect } from "wagmi"
+
+export default function Custom(){
+  const { open } = useWeb3Modal()
+  const { isConnected } = useAccount()
+  const { disconnect } = useDisconnect()
+
+  if(isConnected) return <button onClick={()=>disconnect()} >Disconnect</button>
+  return <button onClick={()=>open()} >open modal</button>
+}