diff --git a/site/docs/components/landing/NavigationList.tsx b/site/docs/components/landing/NavigationList.tsx
index 188a62d360..343b9b301d 100644
--- a/site/docs/components/landing/NavigationList.tsx
+++ b/site/docs/components/landing/NavigationList.tsx
@@ -1,112 +1,9 @@
-const identitySvg = (
-  <svg
-    width="30"
-    height="30"
-    viewBox="0 0 30 30"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <title>Identity SVG</title>
-    <path
-      className="fill-gray-50 group-hover:fill-gray-800"
-      d="M27.5 15C27.5 21.9036 21.9036 27.5 15 27.5C15 27.5 15 27.5 15 27.5C14.973 27.5 14.9461 27.4999 14.9192 27.4997C14.5153 27.4972 14.1159 27.4755 13.722 27.4355C12.4613 27.3074 11.2561 26.9921 10.1344 26.5177C8.36951 25.7712 6.81171 24.6309 5.57122 23.2069C5.54692 23.179 5.52274 23.151 5.49869 23.1229C3.62914 20.9381 2.5 18.1009 2.5 15C2.5 8.09644 8.09644 2.5 15 2.5C21.9036 2.5 27.5 8.09644 27.5 15ZM18.75 11.25C18.75 9.17893 17.0711 7.5 15 7.5C12.9289 7.5 11.25 9.17893 11.25 11.25C11.25 13.3211 12.9289 15 15 15C17.0711 15 18.75 13.3211 18.75 11.25ZM15 25C18.4371 25 21.4692 23.266 23.2691 20.625C21.4692 17.984 18.4371 16.25 15 16.25C11.5629 16.25 8.53081 17.984 6.73084 20.625C8.53081 23.266 11.5629 25 15 25Z"
-      fill="#030712"
-    />
-  </svg>
-);
-
-const walletSvg = (
-  <svg
-    width="30"
-    height="30"
-    viewBox="0 0 30 30"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <title>Wallet SVG</title>
-    <path
-      className="fill-gray-50 group-hover:fill-gray-800"
-      d="M5 2.5H25V7.5H5C3.625 7.5 2.5 6.375 2.5 5C2.5 3.625 3.625 2.5 5 2.5Z"
-      fill="#F9FAFB"
-    />
-    <path
-      className="fill-gray-50 group-hover:fill-gray-800"
-      d="M2.5 8.75V23.75C2.5 25.825 4.175 27.5 6.25 27.5H27.5V8.75H2.5ZM22.5 20C21.4625 20 20.625 19.1625 20.625 18.125C20.625 17.0875 21.4625 16.25 22.5 16.25C23.5375 16.25 24.375 17.0875 24.375 18.125C24.375 19.1625 23.5375 20 22.5 20Z"
-      fill="#F9FAFB"
-    />
-  </svg>
-);
-
-const tokensSvg = (
-  <svg
-    width="30"
-    height="30"
-    viewBox="0 0 30 30"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <title>Tokens SVG</title>
-    <path
-      className="fill-gray-50 group-hover:fill-gray-800"
-      d="M23.75 15.625C23.75 22.1834 18.4334 27.5 11.875 27.5C5.31662 27.5 0 22.1834 0 15.625C0 9.06662 5.31662 3.75 11.875 3.75C18.4334 3.75 23.75 9.06662 23.75 15.625ZM11.875 9.0625L10.1368 13.4568L5.625 13.8371L9.0625 16.9332L8.01229 21.5625L11.875 19.0818L15.7377 21.5625L14.6875 16.9332L18.125 13.8371L13.6132 13.4568L11.875 9.0625Z"
-      fill="#F9FAFB"
-    />
-    <path
-      className="fill-gray-50 group-hover:fill-gray-800"
-      d="M30 15.625C30 19.6212 28.026 23.1564 25 25.3086V21.9988C26.5515 20.3262 27.5 18.0864 27.5 15.625C27.5 13.1636 26.5515 10.9238 25 9.25117V5.94138C28.026 8.09364 30 11.6288 30 15.625Z"
-      fill="#F9FAFB"
-    />
-  </svg>
-);
-
-const swapSvg = (
-  <svg
-    width="30"
-    height="30"
-    viewBox="0 0 30 30"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <title>Swap SVG</title>
-    <path
-      className="fill-gray-50 group-hover:fill-gray-800"
-      d="M22.844 5.40681L22.7821 18.7446L20.2719 18.7446L20.3514 5.40681L15.4105 10.3477L13.6427 8.57995L21.5977 0.625L29.5527 8.57995L27.7849 10.3477L22.844 5.40681Z"
-      fill="#F9FAFB"
-    />
-    <path
-      className="fill-gray-50 group-hover:fill-gray-800"
-      d="M7.78073 23.9679L7.84261 10.6301L10.3528 10.6301L10.2733 23.9679L15.2142 19.027L16.982 20.7948L9.027 28.7497L1.07205 20.7948L2.83982 19.027L7.78073 23.9679Z"
-      fill="#F9FAFB"
-    />
-  </svg>
-);
-
-const frameSvg = (
-  <svg
-    width="34"
-    height="30"
-    viewBox="0 0 34 30"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <title>Frame SVG</title>
-    <path
-      className="fill-gray-50 group-hover:fill-gray-800"
-      d="M6.25229 0H27.3604V30H24.262V16.2581H24.2316C23.8891 12.4601 20.6955 9.48387 16.8064 9.48387C12.9172 9.48387 9.72356 12.4601 9.38112 16.2581H9.35073V30H6.25229V0Z"
-      fill="#F9FAFB"
-    />
-    <path
-      className="fill-gray-50 group-hover:fill-gray-800"
-      d="M0.636368 4.25807L1.89511 8.51613H2.9602V25.7419C2.42544 25.7419 1.99194 26.1752 1.99194 26.7097V27.871H1.79828C1.26353 27.871 0.83002 28.3042 0.83002 28.8387V30H11.6746V28.8387C11.6746 28.3042 11.2411 27.871 10.7063 27.871H10.5126V26.7097C10.5126 26.1752 10.0791 25.7419 9.54438 25.7419H8.38247V4.25807H0.636368Z"
-      fill="#F9FAFB"
-    />
-    <path
-      className="fill-gray-50 group-hover:fill-gray-800"
-      d="M24.4556 25.7419C23.9209 25.7419 23.4874 26.1752 23.4874 26.7097V27.871H23.2937C22.759 27.871 22.3254 28.3042 22.3254 28.8387V30H33.17V28.8387C33.17 28.3042 32.7365 27.871 32.2017 27.871H32.0081V26.7097C32.0081 26.1752 31.5746 25.7419 31.0398 25.7419V8.51613H32.1049L33.3636 4.25807H25.6175V25.7419H24.4556Z"
-      fill="#F9FAFB"
-    />
-  </svg>
-);
+import { frameSvg } from '../svg/frameSvg.tsx';
+import { identitySvg } from '../svg/identitySvg.tsx';
+import { swapSvg } from '../svg/swapSvg.tsx';
+import { tokensSvg } from '../svg/tokensSvg.tsx';
+import { transactionSvg } from '../svg/transactionSvg.tsx';
+import { walletSvg } from '../svg/walletSvg.tsx';
 
 const navItems = [
   {
@@ -129,6 +26,11 @@ const navItems = [
     svg: swapSvg,
     label: 'Swap',
   },
+  {
+    href: '#transaction',
+    svg: transactionSvg,
+    label: 'Transaction',
+  },
   {
     href: '#frame',
     svg: frameSvg,
@@ -138,18 +40,18 @@ const navItems = [
 
 export default function NavigationList() {
   return (
-    <ul className="flex max-w-full flex-wrap justify-center gap-12 md:justify-end">
+    <ul className='flex max-w-full flex-wrap justify-center gap-12 md:justify-end'>
       {navItems.map((item) => {
         return (
           <li key={item?.label}>
             <a
               href={item.href}
-              className="group flex flex-col items-center gap-3"
+              className='group flex flex-col items-center gap-3'
             >
-              <div className="h-[70px] w-[70px] rounded-xl bg-gray-800 p-5 group-hover:bg-gray-50">
+              <div className='h-[70px] w-[70px] rounded-xl bg-gray-800 p-5 group-hover:bg-gray-50'>
                 {item.svg}
               </div>
-              <p className="text-center font-normal text-base not-italic leading-6">
+              <p className='text-center font-normal text-base not-italic leading-6'>
                 {item.label}
               </p>
             </a>
diff --git a/site/docs/components/svg/frameSvg.tsx b/site/docs/components/svg/frameSvg.tsx
new file mode 100644
index 0000000000..a4a774628b
--- /dev/null
+++ b/site/docs/components/svg/frameSvg.tsx
@@ -0,0 +1,26 @@
+export const frameSvg = (
+  <svg
+    width="34"
+    height="30"
+    viewBox="0 0 34 30"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <title>Frame SVG</title>
+    <path
+      className="fill-gray-50 group-hover:fill-gray-800"
+      d="M6.25229 0H27.3604V30H24.262V16.2581H24.2316C23.8891 12.4601 20.6955 9.48387 16.8064 9.48387C12.9172 9.48387 9.72356 12.4601 9.38112 16.2581H9.35073V30H6.25229V0Z"
+      fill="#F9FAFB"
+    />
+    <path
+      className="fill-gray-50 group-hover:fill-gray-800"
+      d="M0.636368 4.25807L1.89511 8.51613H2.9602V25.7419C2.42544 25.7419 1.99194 26.1752 1.99194 26.7097V27.871H1.79828C1.26353 27.871 0.83002 28.3042 0.83002 28.8387V30H11.6746V28.8387C11.6746 28.3042 11.2411 27.871 10.7063 27.871H10.5126V26.7097C10.5126 26.1752 10.0791 25.7419 9.54438 25.7419H8.38247V4.25807H0.636368Z"
+      fill="#F9FAFB"
+    />
+    <path
+      className="fill-gray-50 group-hover:fill-gray-800"
+      d="M24.4556 25.7419C23.9209 25.7419 23.4874 26.1752 23.4874 26.7097V27.871H23.2937C22.759 27.871 22.3254 28.3042 22.3254 28.8387V30H33.17V28.8387C33.17 28.3042 32.7365 27.871 32.2017 27.871H32.0081V26.7097C32.0081 26.1752 31.5746 25.7419 31.0398 25.7419V8.51613H32.1049L33.3636 4.25807H25.6175V25.7419H24.4556Z"
+      fill="#F9FAFB"
+    />
+  </svg>
+);
diff --git a/site/docs/components/svg/identitySvg.tsx b/site/docs/components/svg/identitySvg.tsx
new file mode 100644
index 0000000000..f09d21d7b9
--- /dev/null
+++ b/site/docs/components/svg/identitySvg.tsx
@@ -0,0 +1,16 @@
+export const identitySvg = (
+  <svg
+    width="30"
+    height="30"
+    viewBox="0 0 30 30"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <title>Identity SVG</title>
+    <path
+      className="fill-gray-50 group-hover:fill-gray-800"
+      d="M27.5 15C27.5 21.9036 21.9036 27.5 15 27.5C15 27.5 15 27.5 15 27.5C14.973 27.5 14.9461 27.4999 14.9192 27.4997C14.5153 27.4972 14.1159 27.4755 13.722 27.4355C12.4613 27.3074 11.2561 26.9921 10.1344 26.5177C8.36951 25.7712 6.81171 24.6309 5.57122 23.2069C5.54692 23.179 5.52274 23.151 5.49869 23.1229C3.62914 20.9381 2.5 18.1009 2.5 15C2.5 8.09644 8.09644 2.5 15 2.5C21.9036 2.5 27.5 8.09644 27.5 15ZM18.75 11.25C18.75 9.17893 17.0711 7.5 15 7.5C12.9289 7.5 11.25 9.17893 11.25 11.25C11.25 13.3211 12.9289 15 15 15C17.0711 15 18.75 13.3211 18.75 11.25ZM15 25C18.4371 25 21.4692 23.266 23.2691 20.625C21.4692 17.984 18.4371 16.25 15 16.25C11.5629 16.25 8.53081 17.984 6.73084 20.625C8.53081 23.266 11.5629 25 15 25Z"
+      fill="#030712"
+    />
+  </svg>
+);
diff --git a/site/docs/components/svg/swapSvg.tsx b/site/docs/components/svg/swapSvg.tsx
new file mode 100644
index 0000000000..059c79f664
--- /dev/null
+++ b/site/docs/components/svg/swapSvg.tsx
@@ -0,0 +1,21 @@
+export const swapSvg = (
+  <svg
+    width="30"
+    height="30"
+    viewBox="0 0 30 30"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <title>Swap SVG</title>
+    <path
+      className="fill-gray-50 group-hover:fill-gray-800"
+      d="M22.844 5.40681L22.7821 18.7446L20.2719 18.7446L20.3514 5.40681L15.4105 10.3477L13.6427 8.57995L21.5977 0.625L29.5527 8.57995L27.7849 10.3477L22.844 5.40681Z"
+      fill="#F9FAFB"
+    />
+    <path
+      className="fill-gray-50 group-hover:fill-gray-800"
+      d="M7.78073 23.9679L7.84261 10.6301L10.3528 10.6301L10.2733 23.9679L15.2142 19.027L16.982 20.7948L9.027 28.7497L1.07205 20.7948L2.83982 19.027L7.78073 23.9679Z"
+      fill="#F9FAFB"
+    />
+  </svg>
+);
diff --git a/site/docs/components/svg/tokensSvg.tsx b/site/docs/components/svg/tokensSvg.tsx
new file mode 100644
index 0000000000..3312652178
--- /dev/null
+++ b/site/docs/components/svg/tokensSvg.tsx
@@ -0,0 +1,21 @@
+export const tokensSvg = (
+  <svg
+    width="30"
+    height="30"
+    viewBox="0 0 30 30"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <title>Tokens SVG</title>
+    <path
+      className="fill-gray-50 group-hover:fill-gray-800"
+      d="M23.75 15.625C23.75 22.1834 18.4334 27.5 11.875 27.5C5.31662 27.5 0 22.1834 0 15.625C0 9.06662 5.31662 3.75 11.875 3.75C18.4334 3.75 23.75 9.06662 23.75 15.625ZM11.875 9.0625L10.1368 13.4568L5.625 13.8371L9.0625 16.9332L8.01229 21.5625L11.875 19.0818L15.7377 21.5625L14.6875 16.9332L18.125 13.8371L13.6132 13.4568L11.875 9.0625Z"
+      fill="#F9FAFB"
+    />
+    <path
+      className="fill-gray-50 group-hover:fill-gray-800"
+      d="M30 15.625C30 19.6212 28.026 23.1564 25 25.3086V21.9988C26.5515 20.3262 27.5 18.0864 27.5 15.625C27.5 13.1636 26.5515 10.9238 25 9.25117V5.94138C28.026 8.09364 30 11.6288 30 15.625Z"
+      fill="#F9FAFB"
+    />
+  </svg>
+);
diff --git a/site/docs/components/svg/transactionSvg.tsx b/site/docs/components/svg/transactionSvg.tsx
new file mode 100644
index 0000000000..8c883678dd
--- /dev/null
+++ b/site/docs/components/svg/transactionSvg.tsx
@@ -0,0 +1,21 @@
+export const transactionSvg = (
+  <svg
+    width="31"
+    height="30"
+    viewBox="0 0 31 30"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <title>Transaction SVG</title>
+    <path
+      className="fill-gray-50 group-hover:fill-gray-800"
+      d="M0.5 20V16.875H30.5L20.5 27.5L21.125 20H0.5Z"
+      fill="#F9FAFB"
+    />
+    <path
+      className="fill-gray-50 group-hover:fill-gray-800"
+      d="M30.5 10V13.125L0.5 13.125L10.5 2.5L9.875 10L30.5 10Z"
+      fill="#F9FAFB"
+    />
+  </svg>
+);
diff --git a/site/docs/components/svg/walletSvg.tsx b/site/docs/components/svg/walletSvg.tsx
new file mode 100644
index 0000000000..9af9c85324
--- /dev/null
+++ b/site/docs/components/svg/walletSvg.tsx
@@ -0,0 +1,21 @@
+export const walletSvg = (
+  <svg
+    width="30"
+    height="30"
+    viewBox="0 0 30 30"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <title>Wallet SVG</title>
+    <path
+      className="fill-gray-50 group-hover:fill-gray-800"
+      d="M5 2.5H25V7.5H5C3.625 7.5 2.5 6.375 2.5 5C2.5 3.625 3.625 2.5 5 2.5Z"
+      fill="#F9FAFB"
+    />
+    <path
+      className="fill-gray-50 group-hover:fill-gray-800"
+      d="M2.5 8.75V23.75C2.5 25.825 4.175 27.5 6.25 27.5H27.5V8.75H2.5ZM22.5 20C21.4625 20 20.625 19.1625 20.625 18.125C20.625 17.0875 21.4625 16.25 22.5 16.25C23.5375 16.25 24.375 17.0875 24.375 18.125C24.375 19.1625 23.5375 20 22.5 20Z"
+      fill="#F9FAFB"
+    />
+  </svg>
+);
diff --git a/site/docs/pages/index.mdx b/site/docs/pages/index.mdx
index 67dada690f..d119ce3d5a 100644
--- a/site/docs/pages/index.mdx
+++ b/site/docs/pages/index.mdx
@@ -24,6 +24,15 @@ import NavigationList from '../components/landing/NavigationList';
 import SwapWrapper from '../components/SwapWrapper';
 import TokenSelector from '../components/TokenSelector';
 import WalletComponents from '../components/WalletComponents';
+import TransactionWrapper from '../components/TransactionWrapper';
+import { 
+  Transaction, 
+  TransactionButton,
+  TransactionSponsor,
+  TransactionStatus,
+  TransactionStatusAction,
+  TransactionStatusLabel,
+} from '@coinbase/onchainkit/transaction';
 
 <div id="blobs">
   <div
@@ -90,7 +99,7 @@ bun add @coinbase/onchainkit
 :::
 
     </div>
-      <a href="/getting-started" className="font-sans border rounded-xl border-solid border-indigo-400 text-indigo-400 px-4 py-3 font-bold mt-4">
+      <a href="/getting-started" title="View OnchainKit docs" className="font-sans border rounded-xl border-solid border-indigo-400 text-indigo-400 px-4 py-3 font-bold mt-4">
         View docs
       </a>
     </div>
@@ -109,7 +118,7 @@ bun add @coinbase/onchainkit
 
 <section className="w-[1225px] max-w-full pt-[56px] px-1 md:px-0">
   <main id="identity" className="flex flex-col gap-4 md:flex-row md:text-left text-center">
-    <a href="#identity">
+    <a href="#identity" title="Identity Component details">
       <h3 className="basis-1/2 py-[15px] text-4xl md:text-4xl">Identity</h3>
     </a>
   </main>
@@ -117,7 +126,7 @@ bun add @coinbase/onchainkit
     <p className="text-base md:text-base pb-[24px] md:text-left text-center">
       Display ENS [avatars](/identity/avatar), Attestation [badges](/identity/badge), ENS [names](/identity/name) and account [addresses](/identity/address).
     </p>
-    <a href="/identity/identity" className="mx-auto md:m-0 flex justify-center items-center border border-indigo-400 text-indigo-400 font-bold leading-6 px-4 py-3 rounded-xl border-solid w-[180px]">
+    <a href="/identity/identity" title="Start with Identity Component" className="mx-auto md:m-0 flex justify-center items-center border border-indigo-400 text-indigo-400 font-bold leading-6 px-4 py-3 rounded-xl border-solid w-[210px]">
       Start with Identity
     </a>
     <div className="flex grow md:flex-row pt-[44px] flex-col">
@@ -157,7 +166,7 @@ bun add @coinbase/onchainkit
 
   </aside>
   <main id="wallet" className="pt-[56px] flex flex-col gap-4 md:flex-row md:text-left text-center">
-    <a href="#wallet">
+    <a href="#wallet" title="Wallet Component details">
       <h3 className="basis-1/2 py-[15px] text-4xl md:text-4xl">Wallet</h3>
     </a>
   </main>
@@ -165,7 +174,7 @@ bun add @coinbase/onchainkit
     <p className="text-base md:text-base pb-[24px] md:text-left text-center">
       Create or connect your wallet with [Connect Wallet](/wallet/wallet), powered by [Smart Wallet](https://www.smartwallet.dev/why).
     </p>
-    <a href="/wallet/wallet" className="mx-auto md:m-0  flex justify-center items-center border border-indigo-400 text-indigo-400 font-bold leading-6 px-4 py-3 rounded-xl border-solid w-[180px]">
+    <a href="/wallet/wallet" title="Start with Wallet Component" className="mx-auto md:m-0  flex justify-center items-center border border-indigo-400 text-indigo-400 font-bold leading-6 px-4 py-3 rounded-xl border-solid w-[210px]">
       Start with Wallet
     </a>
     <div className="flex grow md:flex-row pt-[44px] flex-col">
@@ -222,7 +231,7 @@ bun add @coinbase/onchainkit
 
 
   <main id="tokens" className="pt-[56px] flex flex-col gap-4 md:flex-row md:text-left text-center">
-    <a href="#tokens">
+    <a href="#tokens" title="Tokens Component details">
       <h3 className="basis-1/2 py-[15px] text-4xl md:text-4xl">Tokens</h3>
     </a>
   </main>
@@ -231,7 +240,7 @@ bun add @coinbase/onchainkit
     <p className="text-base md:text-base pb-[24px] md:text-left text-center">
       Search [Tokens](/token/types#token) using [getTokens](/token/get-tokens) and display them with [TokenSearch](/token/token-search), [TokenChip](/token/token-chip), and [TokenRow](/token/token-row).
     </p>
-    <a href="/token/token-chip" className="mx-auto md:m-0 flex justify-center items-center border border-indigo-400 text-indigo-400 font-bold leading-6 px-4 py-3 rounded-xl border-solid w-[180px]">
+    <a href="/token/token-chip" title="Start with Tokens Component" className="mx-auto md:m-0 flex justify-center items-center border border-indigo-400 text-indigo-400 font-bold leading-6 px-4 py-3 rounded-xl border-solid w-[210px]">
       Start with Tokens
     </a>
     <div className="flex grow md:flex-row pt-[44px] flex-col">
@@ -278,7 +287,7 @@ setFilteredTokens(filteredTokens);
 
 
   <main id="swap" className="pt-[56px] flex flex-col gap-4 md:flex-row md:text-left text-center">
-    <a href="#swap">
+    <a href="#swap" title="Swap Component details">
       <h3 className="basis-1/2 py-[15px] text-4xl md:text-4xl">Swap</h3>
     </a>
   </main>
@@ -286,7 +295,7 @@ setFilteredTokens(filteredTokens);
     <p className="text-base md:text-base pb-[24px] md:text-left text-center">
       Swap [Tokens](/token/types#token) using the [Swap](/swap/swap) components.
     </p>
-    <a href="/swap/swap" className="mx-auto md:m-0 flex justify-center items-center border border-indigo-400 text-indigo-400 font-bold leading-6 px-4 py-3 rounded-xl border-solid w-[180px]">
+    <a href="/swap/swap" title="Start with Swap Component" className="mx-auto md:m-0 flex justify-center items-center border border-indigo-400 text-indigo-400 font-bold leading-6 px-4 py-3 rounded-xl border-solid w-[210px]">
       Start with Swap
     </a>
     <div className="flex grow flex-col items-center md:flex-row pt-[44px] md:pt-[20px]">
@@ -351,8 +360,88 @@ setFilteredTokens(filteredTokens);
     </div>
   </aside>
 
+<main id="transaction" className="pt-[56px] flex flex-col gap-4 md:flex-row md:text-left text-center">
+  <a href="#transaction" title="Transaction Component details">
+    <h3 className="basis-1/2 py-[15px] text-4xl md:text-4xl">Transaction</h3>
+  </a>
+</main>
+<aside className="pb-6">
+  <p className="text-base md:text-base pb-[24px] md:text-left text-center">
+    Trigger onchain operations and sponsor them with [Paymaster](https://www.coinbase.com/developer-platform/products/paymaster).
+  </p>
+  <a href="/transaction/transaction" title="Start with Transaction Component" className="mx-auto md:m-0 flex justify-center items-center border border-indigo-400 text-indigo-400 font-bold leading-6 px-4 py-3 rounded-xl border-solid w-[210px]">
+    Start with Transaction
+  </a>
+  <div className="flex grow md:flex-row pt-[44px] flex-col">
+    <div className="w-[664px] max-w-full">
+```tsx
+<Transaction // [!code focus]
+  address={address}
+  chainId={base.id}
+  contracts={[
+    {
+      address: CONTRACT_ADDRESS,
+      abi: CONTRACT_ABI,
+      functionName: CONTRACT_FUNCTION_NAME,
+      args: [],
+    },
+  ]}
+> // [!code focus]
+  <TransactionButton /> // [!code focus]
+  <TransactionSponsor /> // [!code focus]
+  <TransactionStatus> // [!code focus]
+    <TransactionStatusLabel /> // [!code focus]
+    <TransactionStatusAction /> // [!code focus]
+  </TransactionStatus> // [!code focus]
+</Transaction> // [!code focus]
+```
+    </div>
+    <div className='flex grow items-center justify-center h-24 mt-[50px] md:mt-0 md:h-auto'>
+      <App>
+        <TransactionWrapper>
+          {({ address, contracts, onError, onSuccess }) => {
+            const capabilities = {
+              paymasterService: {
+                url: import.meta.env.VITE_CDP_PAYMASTER_AND_BUNDLER_ENDPOINT,
+              },
+            }
+            if (address) {
+              return (
+                <Transaction
+                  address={address}
+                  capabilities={capabilities}
+                  chainId={84532}
+                  contracts={contracts}
+                  onError={onError}
+                  onSuccess={onSuccess}
+                >
+                <TransactionButton className="w-[240px] px-4 py-2 text-white bg-indigo-600 rounded-lg hover:bg-indigo-700 transition-colors" />
+                  <TransactionSponsor />
+                  <TransactionStatus>
+                    <TransactionStatusLabel />
+                    <TransactionStatusAction />
+                  </TransactionStatus>
+                </Transaction>
+              )
+            } else {
+              return (
+                <Wallet>
+                  <ConnectWallet>
+                    <Avatar className="h-6 w-6" />
+                    <Name />
+                  </ConnectWallet>
+                </Wallet>
+              )
+            }
+          }}
+        </TransactionWrapper>
+      </App>
+    </div>
+  </div>
+</aside>
+
   <main id="frame" className="pt-[56px] flex flex-col gap-4 md:flex-row md:text-left text-center">
-    <a href="#frame">
+    <a href="#frame" title="Frame Component details">
       <h3 className="basis-1/2 py-[15px] text-4xl md:text-4xl">Frame</h3>
     </a>
   </main>
@@ -360,7 +449,7 @@ setFilteredTokens(filteredTokens);
     <p className="text-base md:text-base pb-[24px] md:text-left text-center">
       Test, build, and ship your Farcaster frames with [FrameMetadata](/frame/frame-metadata).
     </p>
-    <a href="/frame/frame-metadata" className="mx-auto md:m-0 flex justify-center items-center border border-indigo-400 text-indigo-400 font-bold leading-6 px-4 py-3 rounded-xl border-solid w-[180px]">
+    <a href="/frame/frame-metadata" title="Start with Frame Component"  className="mx-auto md:m-0 flex justify-center items-center border border-indigo-400 text-indigo-400 font-bold leading-6 px-4 py-3 rounded-xl border-solid w-[210px]">
       Start with Frame
     </a>
     <div className="flex grow flex-col items-center md:flex-row pt-[44px]">
@@ -469,7 +558,7 @@ setFilteredTokens(filteredTokens);
           <p className="leading-7 text-xl text-gray-400 px-0 py-6 max-w-[500px] md:text-left text-center">
             Build your onchain apps with ready-to-use React components and Typescript utilities.
           </p>
-          <a href="/getting-started" className="alternate-button mx-auto md:mx-0 flex justify-center items-center bg-indigo-600 text-[white] font-bold leading-6 px-4 py-3 rounded-xl w-[180px]">
+          <a href="/getting-started" title="Get started with OnchainKit" className="alternate-button mx-auto md:mx-0 flex justify-center items-center bg-indigo-600 text-[white] font-bold leading-6 px-4 py-3 rounded-xl w-[180px]">
             Get started
           </a>
         </div>
@@ -482,22 +571,22 @@ setFilteredTokens(filteredTokens);
           <li>[Figma](https://www.figma.com/community/file/1370194397345450683/onchainkit)</li>
         </ul>
         <ul className="social-icons-list flex space-x-[28px]">
-          <a href="https://github.com/coinbase/onchainkit" target="_blank">
+          <a href="https://github.com/coinbase/onchainkit" title="View OnchainKit Github" target="_blank">
             <svg width="20" height="19" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg">
               <path fillRule="evenodd" clipRule="evenodd" d="M10.0719 0.19519C4.83504 0.19519 0.601562 4.45988 0.601562 9.73589C0.601562 13.9533 3.3141 17.5232 7.07711 18.7867C7.54758 18.8817 7.71991 18.5814 7.71991 18.3289C7.71991 18.1077 7.70441 17.3495 7.70441 16.5596C5.06999 17.1283 4.5214 15.4223 4.5214 15.4223C4.09803 14.3166 3.47073 14.0324 3.47073 14.0324C2.60849 13.4479 3.53354 13.4479 3.53354 13.4479C4.48999 13.5111 4.99187 14.4272 4.99187 14.4272C5.83841 15.8803 7.20253 15.4698 7.75132 15.217C7.82963 14.6009 8.08067 14.1745 8.34721 13.9376C6.24608 13.7164 4.03541 12.8951 4.03541 9.23033C4.03541 8.1878 4.41148 7.33487 5.00738 6.67151C4.91336 6.43463 4.58401 5.45511 5.10159 4.1441C5.10159 4.1441 5.90122 3.89132 7.70421 5.12343C8.47614 4.91459 9.27221 4.80835 10.0719 4.80745C10.8715 4.80745 11.6867 4.91814 12.4394 5.12343C14.2426 3.89132 15.0422 4.1441 15.0422 4.1441C15.5598 5.45511 15.2302 6.43463 15.1362 6.67151C15.7478 7.33487 16.1084 8.1878 16.1084 9.23033C16.1084 12.8951 13.8977 13.7005 11.7809 13.9376C12.1259 14.2377 12.4237 14.8062 12.4237 15.7066C12.4237 16.9861 12.4082 18.0129 12.4082 18.3287C12.4082 18.5814 12.5807 18.8817 13.051 18.7869C16.814 17.523 19.5265 13.9533 19.5265 9.73589C19.542 4.45988 15.293 0.19519 10.0719 0.19519Z" fill="#F9FAFB"/>
             </svg>
           </a>
-          <a href="https://discord.gg/8gW3h6w5" target="_blank">
+          <a href="https://discord.gg/8gW3h6w5" title="View OnchainKit discord" target="_blank">
             <svg width="19" height="15" viewBox="0 0 19 15" fill="none" xmlns="http://www.w3.org/2000/svg">
               <path d="M16.0995 1.52957C14.8561 0.960314 13.5435 0.556465 12.1951 0.328339C12.0106 0.658176 11.8437 0.997534 11.695 1.34499C10.2587 1.12857 8.79818 1.12857 7.36193 1.34499C7.21317 0.99757 7.04622 0.658216 6.86179 0.328339C5.51258 0.558391 4.19908 0.963199 2.95444 1.53255C0.483511 5.18834 -0.18632 8.75333 0.148595 12.2677C1.59564 13.3368 3.21529 14.1499 4.93714 14.6717C5.32485 14.1502 5.66793 13.597 5.96273 13.0179C5.4028 12.8088 4.86237 12.5508 4.34769 12.2469C4.48315 12.1486 4.61562 12.0474 4.74364 11.9492C6.24123 12.6534 7.87577 13.0186 9.5307 13.0186C11.1856 13.0186 12.8202 12.6534 14.3178 11.9492C14.4473 12.0548 14.5797 12.1561 14.7137 12.2469C14.198 12.5513 13.6566 12.8098 13.0957 13.0194C13.3901 13.5982 13.7332 14.151 14.1213 14.6717C15.8446 14.152 17.4655 13.3393 18.9128 12.2692C19.3058 8.19365 18.2415 4.6614 16.0995 1.52957ZM6.38696 10.1064C5.45366 10.1064 4.68261 9.25942 4.68261 8.21746C4.68261 7.1755 5.42686 6.32109 6.38398 6.32109C7.34109 6.32109 8.10619 7.1755 8.08981 8.21746C8.07344 9.25942 7.33812 10.1064 6.38696 10.1064ZM12.6744 10.1064C11.7396 10.1064 10.9716 9.25942 10.9716 8.21746C10.9716 7.1755 11.7158 6.32109 12.6744 6.32109C13.633 6.32109 14.3922 7.1755 14.3758 8.21746C14.3594 9.25942 13.6256 10.1064 12.6744 10.1064Z" fill="#F9FAFB"/>
             </svg>
           </a>
-          <a href="https://x.com/Onchainkit" target="_blank">
+          <a href="https://x.com/Onchainkit" title="View OnchainKit twitter page" target="_blank">
             <svg width="20" height="17" viewBox="0 0 20 17" fill="none" xmlns="http://www.w3.org/2000/svg">
               <path d="M17.5224 4.63938C17.534 4.80622 17.534 4.97306 17.534 5.14144C17.534 10.2719 13.6282 16.1889 6.48649 16.1889V16.1858C4.37679 16.1889 2.31092 15.5846 0.534897 14.4452C0.841664 14.4821 1.14997 14.5005 1.45904 14.5013C3.20739 14.5028 4.90575 13.9162 6.28121 12.836C4.61974 12.8045 3.16279 11.7212 2.65382 10.1397C3.23583 10.2519 3.83553 10.2289 4.40678 10.0728C2.59539 9.70681 1.2922 8.11531 1.2922 6.26702V6.21781C1.83193 6.51843 2.43624 6.68527 3.05439 6.70372C1.34833 5.56353 0.822443 3.29391 1.85269 1.51943C3.82399 3.94512 6.73252 5.41976 9.85478 5.57583C9.54186 4.22729 9.96933 2.81416 10.9781 1.86618C12.5419 0.396155 15.0014 0.471501 16.4714 2.03455C17.341 1.8631 18.1744 1.54403 18.9371 1.09196C18.6472 1.99073 18.0406 2.75419 17.2303 3.23933C17.9999 3.1486 18.7518 2.94255 19.4599 2.6281C18.9386 3.40924 18.282 4.08966 17.5224 4.63938Z" fill="#F9FAFB"/>
             </svg>
           </a>  
-          <a href="https://warpcast.com/~/channel/onchainkit" target="_blank">
+          <a href="https://warpcast.com/~/channel/onchainkit" title="View OnchainKit Warpcast page" target="_blank">
             <img src="/assets/warpcast-logo.png" />
           </a>
         </ul>
diff --git a/site/package.json b/site/package.json
index 1238850570..a79ef5197b 100644
--- a/site/package.json
+++ b/site/package.json
@@ -8,7 +8,7 @@
     "preview": "vocs preview"
   },
   "dependencies": {
-    "@coinbase/onchainkit": "0.26.14",
+    "@coinbase/onchainkit": "0.27.1",
     "@types/react": "latest",
     "@vercel/edge": "^1.1.1",
     "permissionless": "^0.1.29",
diff --git a/site/yarn.lock b/site/yarn.lock
index a9dcd7974d..7b6772b4b1 100644
--- a/site/yarn.lock
+++ b/site/yarn.lock
@@ -479,9 +479,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@coinbase/onchainkit@npm:0.26.14":
-  version: 0.26.14
-  resolution: "@coinbase/onchainkit@npm:0.26.14"
+"@coinbase/onchainkit@npm:0.27.1":
+  version: 0.27.1
+  resolution: "@coinbase/onchainkit@npm:0.27.1"
   dependencies:
     "@rainbow-me/rainbowkit": "npm:^2.1.3"
     "@tanstack/react-query": "npm:^5"
@@ -496,7 +496,7 @@ __metadata:
     "@xmtp/frames-validator": ^0.6.0
     react: ^18
     react-dom: ^18
-  checksum: f877c575bf4e83182c909a85ad55101b5539b51e1150e8c2905151409b5b52242a23dc12a147621e5705c1df5a94b453e2c592bb3abbbcbdc0eb08df65a916b2
+  checksum: b36180658913b9285a8591d6316c968db4a412c9d30cfaca7a2194794337347105a5a3e8d408842fd1322c27bf5b79473b59a458c9b71b771dea93f5f11789b5
   languageName: node
   linkType: hard
 
@@ -7836,7 +7836,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "onchainkit@workspace:."
   dependencies:
-    "@coinbase/onchainkit": "npm:0.26.14"
+    "@coinbase/onchainkit": "npm:0.27.1"
     "@types/react": "npm:latest"
     "@vercel/edge": "npm:^1.1.1"
     permissionless: "npm:^0.1.29"