diff --git a/.claude/settings.local.json b/.claude/settings.local.json
index 873f98bf..62acf38b 100644
--- a/.claude/settings.local.json
+++ b/.claude/settings.local.json
@@ -41,7 +41,8 @@
       "Bash(timeout 60 npx tsc:*)",
       "Bash(tee:*)",
       "WebFetch(domain:medium.com)",
-      "Bash(pnpm info:*)"
+      "Bash(pnpm info:*)",
+      "Bash(for file in )"
     ],
     "deny": []
   }
diff --git a/.prettierignore b/.prettierignore
deleted file mode 100644
index eac9227b..00000000
--- a/.prettierignore
+++ /dev/null
@@ -1,3 +0,0 @@
-node_modules
-*.d.ts
-.*
diff --git a/app/HomePage.tsx b/app/HomePage.tsx
index ee24833a..5090c3fa 100644
--- a/app/HomePage.tsx
+++ b/app/HomePage.tsx
@@ -7,7 +7,7 @@ import { useTheme } from 'next-themes';
 import { RiBookLine, RiDiscordFill, RiGithubFill, RiArrowDownLine, RiExternalLinkLine } from 'react-icons/ri';
 import RebalanceAnimation from '@/components/animations/RebalanceAnimation';
 import { Badge } from '@/components/common/Badge';
-import { Button } from '@/components/common/Button';
+import { Button } from '@/components/ui/button';
 import Header from '@/components/layout/header/Header';
 import { EXTERNAL_LINKS } from '@/utils/external';
 import logo from '../src/components/imgs/logo.png';
@@ -227,7 +227,7 @@ function HomePage() {
                   variant="default"
                   className="flex w-auto min-w-[200px] items-center justify-center gap-2 px-8 py-3 font-zen sm:px-10 sm:py-4"
                   size="lg"
-                  onPress={() => scrollToSection('section-1')}
+                  onClick={() => scrollToSection('section-1')}
                 >
                   Learn More
                   <RiArrowDownLine className="h-5 w-5" />
@@ -237,7 +237,7 @@ function HomePage() {
                   className="block no-underline"
                 >
                   <Button
-                    variant="cta"
+                    variant="primary"
                     className="w-auto min-w-[200px] px-8 py-3 font-zen sm:px-10 sm:py-4"
                     size="lg"
                   >
@@ -293,7 +293,7 @@ function HomePage() {
                     className="inline-block no-underline"
                   >
                     <Button
-                      variant="secondary"
+                      variant="default"
                       size="lg"
                       className="font-zen flex w-auto min-w-[280px] items-center justify-center gap-2"
                     >
@@ -302,10 +302,10 @@ function HomePage() {
                     </Button>
                   </a>
                   <Button
-                    variant="cta"
+                    variant="primary"
                     size="lg"
                     className="font-zen flex w-auto min-w-[280px] items-center justify-center gap-2"
-                    onPress={() => scrollToSection('section-2')}
+                    onClick={() => scrollToSection('section-2')}
                   >
                     Continue
                     <RiArrowDownLine className="h-5 w-5" />
@@ -356,7 +356,7 @@ function HomePage() {
                     className="inline-block no-underline"
                   >
                     <Button
-                      variant="secondary"
+                      variant="default"
                       size="lg"
                       className="font-zen flex w-auto min-w-[280px] items-center justify-center gap-2"
                     >
@@ -365,10 +365,10 @@ function HomePage() {
                     </Button>
                   </a>
                   <Button
-                    variant="cta"
+                    variant="primary"
                     size="lg"
                     className="font-zen flex w-auto min-w-[280px] items-center justify-center gap-2"
-                    onPress={() => scrollToSection('section-3')}
+                    onClick={() => scrollToSection('section-3')}
                   >
                     Why Monarch
                     <RiArrowDownLine className="h-5 w-5" />
@@ -440,10 +440,10 @@ function HomePage() {
               {/* CTA Buttons - Centered */}
               <div className="mx-auto flex flex-col items-center justify-center gap-3 sm:flex-row sm:gap-4">
                 <Button
-                  variant="secondary"
+                  variant="default"
                   size="lg"
                   className="w-auto min-w-[200px] cursor-not-allowed font-zen opacity-50"
-                  isDisabled
+                  disabled
                 >
                   Auto Vault <Badge variant="success"> Coming Soon </Badge>
                 </Button>
@@ -452,7 +452,7 @@ function HomePage() {
                   className="block no-underline"
                 >
                   <Button
-                    variant="cta"
+                    variant="primary"
                     size="lg"
                     className="w-auto min-w-[200px] font-zen"
                   >
@@ -520,7 +520,7 @@ function HomePage() {
 
               <div className="mt-12">
                 <Link href="/autovault">
-                  <Button variant="cta" size="lg" className="px-12 py-4 font-zen">
+                  <Button variant="primary" size="lg" className="px-12 py-4 font-zen">
                     Create Auto Vault
                   </Button>
                 </Link>
diff --git a/app/admin/stats/page.tsx b/app/admin/stats/page.tsx
index b807b6ce..40d40cbb 100644
--- a/app/admin/stats/page.tsx
+++ b/app/admin/stats/page.tsx
@@ -1,10 +1,9 @@
 'use client';
 
 import { useState, useEffect } from 'react';
-import { Button } from '@heroui/react';
+import { Button } from '@/components/ui/button';
 import { Dropdown, DropdownTrigger, DropdownMenu, DropdownItem } from '@heroui/react';
 import Image from 'next/image';
-import { FiChevronDown } from 'react-icons/fi';
 import ButtonGroup from '@/components/ButtonGroup';
 import { Spinner } from '@/components/common/Spinner';
 import { TokenIcon } from '@/components/TokenIcon';
@@ -182,11 +181,8 @@ export default function StatsPage() {
           {/* Network selector */}
           <Dropdown>
             <DropdownTrigger>
-              <Button
-                variant="flat"
-                endContent={<FiChevronDown className="text-small" />}
-                className="bg-surface min-w-[140px] border border-divider font-zen hover:bg-default-100 active:bg-default-200"
-                startContent={
+              <Button className="bg-surface min-w-[140px] border border-divider font-zen hover:bg-default-100 active:bg-default-200">
+                <div className="flex gap-2">
                   <div className="flex items-center">
                     {selectedNetworkImg && (
                       <Image
@@ -198,9 +194,8 @@ export default function StatsPage() {
                       />
                     )}
                   </div>
-                }
-              >
-                {getNetworkName(selectedNetwork) ?? 'Network'}
+                  <div>{getNetworkName(selectedNetwork)}</div>
+                </div>
               </Button>
             </DropdownTrigger>
             <DropdownMenu
@@ -271,11 +266,7 @@ export default function StatsPage() {
             {/* Loan Asset Filter */}
             <Dropdown>
               <DropdownTrigger>
-                <Button
-                  variant="flat"
-                  endContent={<FiChevronDown className="text-small" />}
-                  className="bg-surface min-w-[160px] border border-divider font-zen hover:bg-default-100 active:bg-default-200"
-                >
+                <Button className="bg-surface min-w-[160px] border border-divider font-zen hover:bg-default-100 active:bg-default-200">
                   {selectedLoanAssets.length === 0
                     ? 'All loan assets'
                     : selectedLoanAssets.length === 1
@@ -324,11 +315,7 @@ export default function StatsPage() {
             {/* Side Filter */}
             <Dropdown>
               <DropdownTrigger>
-                <Button
-                  variant="flat"
-                  endContent={<FiChevronDown className="text-small" />}
-                  className="bg-surface min-w-[140px] border border-divider font-zen hover:bg-default-100 active:bg-default-200"
-                >
+                <Button className="bg-surface min-w-[140px] border border-divider font-zen hover:bg-default-100 active:bg-default-200">
                   {selectedSides.length === 0
                     ? 'All sides'
                     : selectedSides.length === 1
diff --git a/app/autovault/[chainId]/[vaultAddress]/components/DepositToVaultModal.tsx b/app/autovault/[chainId]/[vaultAddress]/components/DepositToVaultModal.tsx
index a3a37b6f..2550a307 100644
--- a/app/autovault/[chainId]/[vaultAddress]/components/DepositToVaultModal.tsx
+++ b/app/autovault/[chainId]/[vaultAddress]/components/DepositToVaultModal.tsx
@@ -2,7 +2,7 @@
 
 import type { Address } from 'viem';
 import { useConnection } from 'wagmi';
-import { Button } from '@/components/common';
+import { Button } from '@/components/ui/button';
 import { Modal, ModalBody, ModalHeader } from '@/components/common/Modal';
 import Input from '@/components/Input/Input';
 import AccountConnect from '@/components/layout/header/AccountConnect';
@@ -111,19 +111,19 @@ export function DepositToVaultModal({
 
                   {!permit2Authorized || (!usePermit2Setting && !isApproved) ? (
                     <Button
-                      isDisabled={!isConnected || isLoadingPermit2 || depositPending}
-                      onPress={() => void approveAndDeposit()}
+                      disabled={!isConnected || isLoadingPermit2 || depositPending}
+                      onClick={() => void approveAndDeposit()}
                       className="ml-2 min-w-32"
-                      variant="cta"
+                      variant="primary"
                     >
                       Deposit
                     </Button>
                   ) : (
                     <Button
-                      isDisabled={!isConnected || depositPending || inputError !== null || !depositAmount}
-                      onPress={() => void signAndDeposit()}
+                      disabled={!isConnected || depositPending || inputError !== null || !depositAmount}
+                      onClick={() => void signAndDeposit()}
                       className="ml-2 min-w-32"
-                      variant="cta"
+                      variant="primary"
                     >
                       Deposit
                     </Button>
diff --git a/app/autovault/[chainId]/[vaultAddress]/components/VaultInitializationModal.tsx b/app/autovault/[chainId]/[vaultAddress]/components/VaultInitializationModal.tsx
index 4ca72823..e65fe302 100644
--- a/app/autovault/[chainId]/[vaultAddress]/components/VaultInitializationModal.tsx
+++ b/app/autovault/[chainId]/[vaultAddress]/components/VaultInitializationModal.tsx
@@ -3,7 +3,7 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { FiZap } from 'react-icons/fi';
 import { type Address, zeroAddress } from 'viem';
-import { Button } from '@/components/common';
+import { Button } from '@/components/ui/button';
 import { AccountIdentity } from '@/components/common/AccountIdentity';
 import { AllocatorCard } from '@/components/common/AllocatorCard';
 import { Modal, ModalHeader, ModalBody, ModalFooter } from '@/components/common/Modal';
@@ -296,11 +296,11 @@ export function VaultInitializationModal({
     if (stepIndex === 0) {
       return (
         <Button
-          variant="cta"
+          variant="primary"
           size="sm"
           className="min-w-[150px]"
-          isDisabled={!canDeploy || isDeploying}
-          onPress={() => void handleDeploy()}
+          disabled={!canDeploy || isDeploying}
+          onClick={() => void handleDeploy()}
         >
           {isDeploying ? (
             <span className="flex items-center gap-2">
@@ -317,11 +317,11 @@ export function VaultInitializationModal({
     if (stepIndex === 1) {
       return (
         <Button
-          variant="cta"
+          variant="primary"
           size="sm"
           className="min-w-[150px]"
-          isDisabled={!canProceedFromAdapterCap}
-          onPress={() => setStepIndex(2)}
+          disabled={!canProceedFromAdapterCap}
+          onClick={() => setStepIndex(2)}
         >
           Next: Finalize setup
         </Button>
@@ -332,11 +332,11 @@ export function VaultInitializationModal({
     if (stepIndex === 2) {
       return (
         <Button
-          variant="cta"
+          variant="primary"
           size="sm"
           className="min-w-[170px]"
-          isDisabled={!canProceedToAgents}
-          onPress={() => setStepIndex(3)}
+          disabled={!canProceedToAgents}
+          onClick={() => setStepIndex(3)}
         >
           Next: Choose agent
         </Button>
@@ -350,17 +350,17 @@ export function VaultInitializationModal({
           variant="ghost"
           size="sm"
           className="min-w-[120px]"
-          onPress={() => void handleCompleteInitialization()}
-          isDisabled={isInitializing}
+          onClick={() => void handleCompleteInitialization()}
+          disabled={isInitializing}
         >
           Skip for now
         </Button>
         <Button
-          variant="cta"
+          variant="primary"
           size="sm"
           className="min-w-[170px]"
-          isDisabled={isInitializing}
-          onPress={() => void handleCompleteInitialization()}
+          disabled={isInitializing}
+          onClick={() => void handleCompleteInitialization()}
         >
           {isInitializing ? (
             <span className="flex items-center gap-2">
@@ -424,7 +424,7 @@ export function VaultInitializationModal({
           <Button
             variant="ghost"
             size="sm"
-            onPress={() => setStepIndex((prev) => Math.max(prev - 1, 0))}
+            onClick={() => setStepIndex((prev) => Math.max(prev - 1, 0))}
           >
             Back
           </Button>
diff --git a/app/autovault/[chainId]/[vaultAddress]/components/settings/AgentsTab.tsx b/app/autovault/[chainId]/[vaultAddress]/components/settings/AgentsTab.tsx
index ab396af9..7db2058e 100644
--- a/app/autovault/[chainId]/[vaultAddress]/components/settings/AgentsTab.tsx
+++ b/app/autovault/[chainId]/[vaultAddress]/components/settings/AgentsTab.tsx
@@ -1,7 +1,7 @@
 import { useCallback, useState } from 'react';
 import type { Address } from 'viem';
 import { AccountIdentity } from '@/components/common/AccountIdentity';
-import { Button } from '@/components/common/Button';
+import { Button } from '@/components/ui/button';
 import { Spinner } from '@/components/common/Spinner';
 import { useMarketNetwork } from '@/hooks/useMarketNetwork';
 import { v2AgentsBase } from '@/utils/monarch-agent';
@@ -100,10 +100,10 @@ export function AgentsTab({
           </div>
           {!isEditingAllocators && (
             <Button
-              variant="interactive"
+              variant="surface"
               size="sm"
-              onPress={() => setIsEditingAllocators(true)}
-              isDisabled={!isOwner}
+              onClick={() => setIsEditingAllocators(true)}
+              disabled={!isOwner}
             >
               {allocators.length === 0 ? 'Add allocators' : 'Edit'}
             </Button>
@@ -123,10 +123,10 @@ export function AgentsTab({
                   >
                     <AgentListItem address={address as Address} />
                     <Button
-                      variant="secondary"
+                      variant="default"
                       size="sm"
-                      onPress={() => void handleRemoveAllocator(address as Address)}
-                      isDisabled={isUpdatingAllocator && allocatorToRemove === (address as Address)}
+                      onClick={() => void handleRemoveAllocator(address as Address)}
+                      disabled={isUpdatingAllocator && allocatorToRemove === (address as Address)}
                     >
                       {isUpdatingAllocator && allocatorToRemove === (address as Address) ? (
                         <span className="flex items-center gap-2">
@@ -156,10 +156,10 @@ export function AgentsTab({
                       <p className="ml-8 text-xs text-secondary">{agent.strategyDescription}</p>
                     </div>
                     <Button
-                      variant="interactive"
+                      variant="surface"
                       size="sm"
-                      onPress={() => void handleAddAllocator(agent.address as Address)}
-                      isDisabled={isUpdatingAllocator && allocatorToAdd === (agent.address as Address)}
+                      onClick={() => void handleAddAllocator(agent.address as Address)}
+                      disabled={isUpdatingAllocator && allocatorToAdd === (agent.address as Address)}
                     >
                       {isUpdatingAllocator && allocatorToAdd === (agent.address as Address) ? (
                         <span className="flex items-center gap-2">
@@ -180,7 +180,7 @@ export function AgentsTab({
               <Button
                 variant="ghost"
                 size="sm"
-                onPress={() => setIsEditingAllocators(false)}
+                onClick={() => setIsEditingAllocators(false)}
               >
                 Done
               </Button>
diff --git a/app/autovault/[chainId]/[vaultAddress]/components/settings/CurrentCaps.tsx b/app/autovault/[chainId]/[vaultAddress]/components/settings/CurrentCaps.tsx
index fe1f39e0..1acc1294 100644
--- a/app/autovault/[chainId]/[vaultAddress]/components/settings/CurrentCaps.tsx
+++ b/app/autovault/[chainId]/[vaultAddress]/components/settings/CurrentCaps.tsx
@@ -1,7 +1,7 @@
 import { useMemo, useState } from 'react';
 import { ChevronDownIcon, ChevronUpIcon } from '@radix-ui/react-icons';
 import { type Address, maxUint128 } from 'viem';
-import { Button } from '@/components/common/Button';
+import { Button } from '@/components/ui/button';
 import { MarketDetailsBlock } from '@/components/common/MarketDetailsBlock';
 import { Spinner } from '@/components/common/Spinner';
 import { TokenIcon } from '@/components/TokenIcon';
@@ -138,9 +138,9 @@ export function CurrentCaps({ existingCaps, isOwner, onStartEdit, chainId, vault
         <div className="flex items-center gap-2">
           {isOwner && (
             <Button
-              variant="subtle"
+              variant="default"
               size="sm"
-              onPress={onStartEdit}
+              onClick={onStartEdit}
             >
               {hasAnyCaps ? 'Edit caps' : 'Add caps'}
             </Button>
diff --git a/app/autovault/[chainId]/[vaultAddress]/components/settings/EditCaps.tsx b/app/autovault/[chainId]/[vaultAddress]/components/settings/EditCaps.tsx
index 37bee851..cec8a9ca 100644
--- a/app/autovault/[chainId]/[vaultAddress]/components/settings/EditCaps.tsx
+++ b/app/autovault/[chainId]/[vaultAddress]/components/settings/EditCaps.tsx
@@ -2,7 +2,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import { PlusIcon } from '@radix-ui/react-icons';
 import { type Address, parseUnits, maxUint128 } from 'viem';
 import { Badge } from '@/components/common/Badge';
-import { Button } from '@/components/common/Button';
+import { Button } from '@/components/ui/button';
 import { Spinner } from '@/components/common/Spinner';
 import { useTokens } from '@/components/providers/TokenProvider';
 import { TokenIcon } from '@/components/TokenIcon';
@@ -525,10 +525,10 @@ export function EditCaps({ existingCaps, vaultAsset, chainId, isOwner, isUpdatin
         {/* Add Market Button */}
         <div className="flex items-center justify-center">
           <Button
-            variant="subtle"
+            variant="default"
             size="sm"
-            onPress={() => setShowAddMarketModal(true)}
-            isDisabled={!isOwner}
+            onClick={() => setShowAddMarketModal(true)}
+            disabled={!isOwner}
           >
             <PlusIcon className="h-4 w-4 mr-1" />
             Add Market Cap
@@ -540,17 +540,17 @@ export function EditCaps({ existingCaps, vaultAsset, chainId, isOwner, isUpdatin
           <div />
           <div className="flex items-center gap-2">
             <Button
-              variant="subtle"
+              variant="default"
               size="sm"
-              onPress={onCancel}
+              onClick={onCancel}
             >
               Cancel
             </Button>
             <Button
-              variant="cta"
+              variant="primary"
               size="sm"
-              isDisabled={!hasChanges || isUpdating}
-              onPress={() => void handleSave()}
+              disabled={!hasChanges || isUpdating}
+              onClick={() => void handleSave()}
             >
               {isUpdating ? (
                 <span className="flex items-center gap-2">
diff --git a/app/autovault/[chainId]/[vaultAddress]/components/settings/GeneralTab.tsx b/app/autovault/[chainId]/[vaultAddress]/components/settings/GeneralTab.tsx
index 039f4c8b..62e83fc0 100644
--- a/app/autovault/[chainId]/[vaultAddress]/components/settings/GeneralTab.tsx
+++ b/app/autovault/[chainId]/[vaultAddress]/components/settings/GeneralTab.tsx
@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useId, useMemo, useState } from 'react';
 import { Input } from '@heroui/react';
-import { Button } from '@/components/common/Button';
+import { Button } from '@/components/ui/button';
 import { Spinner } from '@/components/common/Spinner';
 import { useMarketNetwork } from '@/hooks/useMarketNetwork';
 import type { GeneralTabProps } from './types';
@@ -88,11 +88,10 @@ export function GeneralTab({
           <Input
             size="sm"
             radius="sm"
-            variant="flat"
             value={nameInput}
             onChange={(event) => setNameInput(event.target.value)}
             placeholder={defaultName}
-            isDisabled={!isOwner}
+            disabled={!isOwner}
             id={nameInputId}
             classNames={{
               input: 'text-sm',
@@ -111,12 +110,11 @@ export function GeneralTab({
           <Input
             size="sm"
             radius="sm"
-            variant="flat"
             value={symbolInput}
             onChange={(event) => setSymbolInput(event.target.value)}
             placeholder={defaultSymbol}
             maxLength={16}
-            isDisabled={!isOwner}
+            disabled={!isOwner}
             id={symbolInputId}
             classNames={{
               input: 'text-sm',
@@ -129,10 +127,10 @@ export function GeneralTab({
 
         <Button
           className="ml-auto"
-          variant="interactive"
+          variant="surface"
           size="sm"
-          isDisabled={!metadataChanged || updatingMetadata || !isOwner}
-          onPress={() => void handleMetadataSubmit()}
+          disabled={!metadataChanged || updatingMetadata || !isOwner}
+          onClick={() => void handleMetadataSubmit()}
         >
           {updatingMetadata ? (
             <span className="flex items-center gap-2">
diff --git a/app/autovault/[chainId]/[vaultAddress]/content.tsx b/app/autovault/[chainId]/[vaultAddress]/content.tsx
index 0c124db5..24f7e9c1 100644
--- a/app/autovault/[chainId]/[vaultAddress]/content.tsx
+++ b/app/autovault/[chainId]/[vaultAddress]/content.tsx
@@ -8,7 +8,7 @@ import { useParams } from 'next/navigation';
 import { IoRefreshOutline } from 'react-icons/io5';
 import type { Address } from 'viem';
 import { useConnection } from 'wagmi';
-import { Button } from '@/components/common';
+import { Button } from '@/components/ui/button';
 import { AccountIdentity } from '@/components/common/AccountIdentity';
 import Header from '@/components/layout/header/Header';
 import { useVaultPage } from '@/hooks/useVaultPage';
@@ -125,7 +125,7 @@ export default function VaultContent() {
             <h2 className="mb-4 text-xl">Vault data unavailable</h2>
             <p className="mb-6 text-secondary">We could not load this autovault right now. Please retry in a few minutes.</p>
             <Link href="/autovault">
-              <Button variant="cta">Back to Autovaults</Button>
+              <Button variant="primary">Back to Autovaults</Button>
             </Link>
           </div>
         </div>
@@ -151,10 +151,10 @@ export default function VaultContent() {
                 linkTo="explorer"
               />
               <Button
-                variant="light"
+                variant="default"
                 size="sm"
-                onPress={handleRefreshVault}
-                isDisabled={vault.vaultDataLoading}
+                onClick={handleRefreshVault}
+                disabled={vault.vaultDataLoading}
                 className="font-zen text-secondary opacity-80 transition-all duration-200 ease-in-out hover:opacity-100"
               >
                 <IoRefreshOutline className="mr-2 h-4 w-4" />
@@ -162,9 +162,9 @@ export default function VaultContent() {
               </Button>
               {vault.isOwner && (
                 <Button
-                  variant="subtle"
+                  variant="default"
                   size="sm"
-                  onPress={() => {
+                  onClick={() => {
                     setSettingsTab('general');
                     setShowSettings(true);
                   }}
@@ -187,11 +187,11 @@ export default function VaultContent() {
                 </p>
               </div>
               <Button
-                variant="cta"
+                variant="primary"
                 size="sm"
                 className="mt-3 sm:mt-0"
-                onPress={() => setShowInitializationModal(true)}
-                isDisabled={vault.isLoading}
+                onClick={() => setShowInitializationModal(true)}
+                disabled={vault.isLoading}
               >
                 Start setup
               </Button>
@@ -205,10 +205,10 @@ export default function VaultContent() {
                 <p className="text-sm text-secondary">Add an agent to enable automated allocation and rebalancing.</p>
               </div>
               <Button
-                variant="cta"
+                variant="primary"
                 size="sm"
                 className="mt-3 sm:mt-0"
-                onPress={() => {
+                onClick={() => {
                   setSettingsTab('agents');
                   setShowSettings(true);
                 }}
@@ -227,10 +227,10 @@ export default function VaultContent() {
                 </p>
               </div>
               <Button
-                variant="cta"
+                variant="primary"
                 size="sm"
                 className="mt-3 sm:mt-0"
-                onPress={() => {
+                onClick={() => {
                   setSettingsTab('caps');
                   setShowSettings(true);
                 }}
diff --git a/app/autovault/components/AutovaultContent.tsx b/app/autovault/components/AutovaultContent.tsx
index 1526383f..877fa4e6 100644
--- a/app/autovault/components/AutovaultContent.tsx
+++ b/app/autovault/components/AutovaultContent.tsx
@@ -3,7 +3,7 @@
 import { useState } from 'react';
 import { FaPlus } from 'react-icons/fa';
 import { useConnection } from 'wagmi';
-import { Button } from '@/components/common/Button';
+import { Button } from '@/components/ui/button';
 import AccountConnect from '@/components/layout/header/AccountConnect';
 import Header from '@/components/layout/header/Header';
 import { useUserVaultsV2 } from '@/hooks/useUserVaultsV2';
@@ -60,10 +60,10 @@ export default function AutovaultContent() {
           </div>
           <div className="flex gap-4">
             <Button
-              variant={hasExistingVaults ? 'secondary' : 'cta'}
+              variant={hasExistingVaults ? 'surface' : 'primary'}
               size="md"
               className="font-zen"
-              onPress={handleCreateVault}
+              onClick={handleCreateVault}
             >
               <FaPlus
                 size={14}
diff --git a/app/autovault/components/VaultListV2.tsx b/app/autovault/components/VaultListV2.tsx
index 215fdd40..9bb11fa8 100644
--- a/app/autovault/components/VaultListV2.tsx
+++ b/app/autovault/components/VaultListV2.tsx
@@ -1,7 +1,7 @@
 import Image from 'next/image';
 import Link from 'next/link';
 import { formatUnits } from 'viem';
-import { Button } from '@/components/common';
+import { Button } from '@/components/ui/button';
 import { Spinner } from '@/components/common/Spinner';
 import { useTokens } from '@/components/providers/TokenProvider';
 import { TokenIcon } from '@/components/TokenIcon';
@@ -134,7 +134,7 @@ export function VaultListV2({ vaults, loading }: VaultListV2Props) {
                     <div className="flex justify-center">
                       <Link href={`/autovault/${vault.networkId ?? SupportedNetworks.Base}/${vault.address}`}>
                         <Button
-                          variant="interactive"
+                          variant="surface"
                           size="sm"
                         >
                           Manage
diff --git a/app/autovault/components/deployment/DeploymentModal.tsx b/app/autovault/components/deployment/DeploymentModal.tsx
index 2159fde8..69ae6494 100644
--- a/app/autovault/components/deployment/DeploymentModal.tsx
+++ b/app/autovault/components/deployment/DeploymentModal.tsx
@@ -3,7 +3,7 @@
 import { useEffect, useMemo, useState } from 'react';
 import { Checkbox } from '@heroui/react';
 import { FaCube } from 'react-icons/fa';
-import { Button } from '@/components/common';
+import { Button } from '@/components/ui/button';
 import { Modal, ModalBody, ModalHeader } from '@/components/common/Modal';
 import { Spinner } from '@/components/common/Spinner';
 import { useMarkets } from '@/contexts/MarketsContext';
@@ -106,9 +106,9 @@ function DeploymentModalContent({ isOpen, onOpenChange, existingVaults }: Deploy
 
               <div className="flex justify-end pt-2">
                 <Button
-                  variant="cta"
-                  onPress={needSwitchChain ? switchToNetwork : () => void createVault()}
-                  isDisabled={
+                  variant="primary"
+                  onClick={needSwitchChain ? switchToNetwork : () => void createVault()}
+                  disabled={
                     !selectedTokenAndNetwork ||
                     isDeploying ||
                     balancesLoading ||
diff --git a/app/error.tsx b/app/error.tsx
index d708ff71..70757f3b 100644
--- a/app/error.tsx
+++ b/app/error.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { useEffect } from 'react';
-import { Button } from '@/components/common';
+import { Button } from '@/components/ui/button';
 
 export default function AppError({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
   useEffect(() => {
@@ -13,7 +13,7 @@ export default function AppError({ error, reset }: { error: Error & { digest?: s
     <div className="flex min-h-[60vh] flex-col items-center justify-center gap-4 p-8 text-center">
       <h2 className="text-2xl">Something went wrong</h2>
       <p className="max-w-xl text-secondary">This page failed to load some data. Please try again.</p>
-      <Button onPress={reset}>Retry</Button>
+      <Button onClick={reset}>Retry</Button>
     </div>
   );
 }
diff --git a/app/global-error.tsx b/app/global-error.tsx
index db064b3e..1fac68e9 100644
--- a/app/global-error.tsx
+++ b/app/global-error.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Button } from '@/components/common';
+import { Button } from '@/components/ui/button';
 
 export default function GlobalError({ error, reset }: { error: Error; reset: () => void }) {
   return (
@@ -15,7 +15,7 @@ export default function GlobalError({ error, reset }: { error: Error; reset: ()
             An unexpected error occurred. Please try again. If the issue persists, it may be due to a transient data source outage.
           </p>
           <pre className="max-w-xl overflow-auto rounded bg-content3 p-4 text-left text-xs">{error?.message ?? 'Unknown error'}</pre>
-          <Button onPress={reset}>Try again</Button>
+          <Button onClick={reset}>Try again</Button>
         </div>
       </body>
     </html>
diff --git a/app/history/components/HistoryTable.tsx b/app/history/components/HistoryTable.tsx
index 2a10e931..666b6ed6 100644
--- a/app/history/components/HistoryTable.tsx
+++ b/app/history/components/HistoryTable.tsx
@@ -348,7 +348,7 @@ export function HistoryTable({ account, positions, rebalancerInfos }: HistoryTab
                         </div>
                         <Chip
                           size="sm"
-                          variant="flat"
+                          variant="light"
                           className="bg-default-100 text-xs"
                           radius="sm"
                         >
diff --git a/app/market/[chainId]/[marketid]/components/BorrowsTable.tsx b/app/market/[chainId]/[marketid]/components/BorrowsTable.tsx
index f559392a..d4c9da3e 100644
--- a/app/market/[chainId]/[marketid]/components/BorrowsTable.tsx
+++ b/app/market/[chainId]/[marketid]/components/BorrowsTable.tsx
@@ -4,7 +4,7 @@ import moment from 'moment';
 import { FiFilter } from 'react-icons/fi';
 import type { Address } from 'viem';
 import { formatUnits } from 'viem';
-import { Button } from '@/components/common';
+import { Button } from '@/components/ui/button';
 import { AccountIdentity } from '@/components/common/AccountIdentity';
 import { Badge } from '@/components/common/Badge';
 import { Spinner } from '@/components/common/Spinner';
@@ -69,12 +69,11 @@ export function BorrowsTable({ chainId, market, minAssets, onOpenFiltersModal }:
             }
           >
             <Button
-              isIconOnly
-              variant="light"
+              variant="ghost"
               size="sm"
               className="min-w-0 px-2 text-secondary"
               aria-label="Transaction filters"
-              onPress={onOpenFiltersModal}
+              onClick={onOpenFiltersModal}
             >
               <FiFilter
                 size={14}
diff --git a/app/market/[chainId]/[marketid]/components/CampaignModal.tsx b/app/market/[chainId]/[marketid]/components/CampaignModal.tsx
index b90202d3..8765a3e6 100644
--- a/app/market/[chainId]/[marketid]/components/CampaignModal.tsx
+++ b/app/market/[chainId]/[marketid]/components/CampaignModal.tsx
@@ -3,7 +3,7 @@
 import { ExternalLinkIcon } from '@radix-ui/react-icons';
 import Image from 'next/image';
 import Link from 'next/link';
-import { Button } from '@/components/common/Button';
+import { Button } from '@/components/ui/button';
 import { Modal, ModalBody, ModalHeader } from '@/components/common/Modal';
 import { getMerklCampaignURL } from '@/utils/external';
 import type { SimplifiedCampaign } from '@/utils/merklTypes';
@@ -60,7 +60,7 @@ function CampaignRow({ campaign }: { campaign: SimplifiedCampaign }) {
           rel="noopener noreferrer"
         >
           <Button
-            variant="light"
+            variant="ghost"
             size="sm"
             className="text-xs"
           >
diff --git a/app/market/[chainId]/[marketid]/components/SuppliesTable.tsx b/app/market/[chainId]/[marketid]/components/SuppliesTable.tsx
index 6c526c28..fd67d6ca 100644
--- a/app/market/[chainId]/[marketid]/components/SuppliesTable.tsx
+++ b/app/market/[chainId]/[marketid]/components/SuppliesTable.tsx
@@ -4,7 +4,7 @@ import moment from 'moment';
 import { FiFilter } from 'react-icons/fi';
 import type { Address } from 'viem';
 import { formatUnits } from 'viem';
-import { Button } from '@/components/common';
+import { Button } from '@/components/ui/button';
 import { AccountIdentity } from '@/components/common/AccountIdentity';
 import { Badge } from '@/components/common/Badge';
 import { Spinner } from '@/components/common/Spinner';
@@ -64,12 +64,11 @@ export function SuppliesTable({ chainId, market, minAssets, onOpenFiltersModal }
             }
           >
             <Button
-              isIconOnly
-              variant="light"
+              variant="ghost"
               size="sm"
               className="min-w-0 px-2 text-secondary"
               aria-label="Transaction filters"
-              onPress={onOpenFiltersModal}
+              onClick={onOpenFiltersModal}
             >
               <FiFilter
                 size={14}
diff --git a/app/market/[chainId]/[marketid]/components/TransactionFiltersModal.tsx b/app/market/[chainId]/[marketid]/components/TransactionFiltersModal.tsx
index 1205b26d..5d1a17ba 100644
--- a/app/market/[chainId]/[marketid]/components/TransactionFiltersModal.tsx
+++ b/app/market/[chainId]/[marketid]/components/TransactionFiltersModal.tsx
@@ -1,7 +1,7 @@
 import type React from 'react';
 import { Input, Divider } from '@heroui/react';
 import { FiSliders } from 'react-icons/fi';
-import { Button } from '@/components/common';
+import { Button } from '@/components/ui/button';
 import { Modal, ModalHeader, ModalBody, ModalFooter } from '@/components/common/Modal';
 
 type TransactionFiltersModalProps = {
@@ -110,8 +110,8 @@ export default function TransactionFiltersModal({
           </ModalBody>
           <ModalFooter>
             <Button
-              variant="light"
-              onPress={onClose}
+              variant="ghost"
+              onClick={onClose}
             >
               Close
             </Button>
diff --git a/app/market/[chainId]/[marketid]/content.tsx b/app/market/[chainId]/[marketid]/content.tsx
index 5856f698..8f7505a7 100644
--- a/app/market/[chainId]/[marketid]/content.tsx
+++ b/app/market/[chainId]/[marketid]/content.tsx
@@ -11,7 +11,7 @@ import { useParams, useRouter, useSearchParams } from 'next/navigation';
 import { formatUnits, parseUnits } from 'viem';
 import { useConnection } from 'wagmi';
 import { BorrowModal } from '@/components/BorrowModal';
-import { Button } from '@/components/common';
+import { Button } from '@/components/ui/button';
 import { Spinner } from '@/components/common/Spinner';
 import Header from '@/components/layout/header/Header';
 import { OracleTypeInfo } from '@/components/MarketOracle';
@@ -217,7 +217,7 @@ function MarketContent() {
         {/* navigation buttons */}
         <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
           <Button
-            onPress={handleBackToMarkets}
+            onClick={handleBackToMarkets}
             size="md"
             className="w-auto"
           >
@@ -228,13 +228,13 @@ function MarketContent() {
 
           <div className="flex flex-wrap gap-2">
             <Button
-              onPress={() => setShowSupplyModal(true)}
+              onClick={() => setShowSupplyModal(true)}
               className="flex-1 sm:flex-none"
             >
               Supply
             </Button>
             <Button
-              onPress={() => setShowBorrowModal(true)}
+              onClick={() => setShowBorrowModal(true)}
               className="flex-1 sm:flex-none"
             >
               Borrow
@@ -242,7 +242,7 @@ function MarketContent() {
             <Button
               size="md"
               className="w-full sm:w-auto"
-              onPress={() => {
+              onClick={() => {
                 void window.open(getMarketURL(market.uniqueKey, market.morphoBlue.chain.id), '_blank');
               }}
             >
diff --git a/app/markets/components/BlacklistConfirmationModal.tsx b/app/markets/components/BlacklistConfirmationModal.tsx
index 77027165..413ebdcd 100644
--- a/app/markets/components/BlacklistConfirmationModal.tsx
+++ b/app/markets/components/BlacklistConfirmationModal.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { IoWarningOutline } from 'react-icons/io5';
-import { Button } from '@/components/common';
+import { Button } from '@/components/ui/button';
 import { Modal, ModalHeader, ModalBody, ModalFooter } from '@/components/common/Modal';
 import { MarketIdentity } from '@/components/MarketIdentity';
 import type { Market } from '@/utils/types';
@@ -60,16 +60,16 @@ export function BlacklistConfirmationModal({ isOpen, onOpenChange, onConfirm, ma
       </ModalBody>
       <ModalFooter className="border-t border-primary/10">
         <Button
-          variant="secondary"
+          variant="default"
           size="md"
-          onPress={() => onOpenChange(false)}
+          onClick={() => onOpenChange(false)}
         >
           Cancel
         </Button>
         <Button
-          variant="cta"
+          variant="primary"
           size="md"
-          onPress={handleConfirm}
+          onClick={handleConfirm}
         >
           Blacklist Market
         </Button>
diff --git a/app/markets/components/MarketActionsDropdown.tsx b/app/markets/components/MarketActionsDropdown.tsx
index 9a476a9a..7316bb66 100644
--- a/app/markets/components/MarketActionsDropdown.tsx
+++ b/app/markets/components/MarketActionsDropdown.tsx
@@ -7,7 +7,7 @@ import { AiOutlineStop } from 'react-icons/ai';
 import { GoStarFill, GoStar, GoGraph } from 'react-icons/go';
 import { IoEllipsisVertical } from 'react-icons/io5';
 import { TbArrowUp } from 'react-icons/tb';
-import { Button } from '@/components/common/Button';
+import { Button } from '@/components/ui/button';
 import type { Market } from '@/utils/types';
 import { BlacklistConfirmationModal } from './BlacklistConfirmationModal';
 
@@ -68,9 +68,8 @@ export function MarketActionsDropdown({
         <DropdownTrigger>
           <Button
             size="xs"
-            variant="interactive"
+            variant="surface"
             className="text-xs"
-            isIconOnly
           >
             <IoEllipsisVertical className="h-3 w-3" />
           </Button>
diff --git a/app/markets/components/MarketRowDetail.tsx b/app/markets/components/MarketRowDetail.tsx
index 89ba7ed7..3d90e959 100644
--- a/app/markets/components/MarketRowDetail.tsx
+++ b/app/markets/components/MarketRowDetail.tsx
@@ -9,8 +9,8 @@ export function ExpandedMarketDetail({ market }: { market: Market }) {
   const warningsWithDetail = useMarketWarnings(market, true);
 
   return (
-    <div className="m-4 flex max-w-xs flex-col gap-2 sm:max-w-sm lg:max-w-none lg:flex-row">
-      <div className="m-4 lg:w-1/3">
+    <div className="flex w-full flex-col gap-4 lg:flex-row lg:gap-6">
+      <div className="lg:w-1/3">
         <div className="mb-1 flex items-start justify-between text-base">
           <p className="mb-2 font-zen">Oracle Info</p>
         </div>
@@ -26,7 +26,7 @@ export function ExpandedMarketDetail({ market }: { market: Market }) {
       </div>
 
       {/* market info */}
-      <div className="m-4 lg:w-1/3">
+      <div className="lg:w-1/3">
         <div className="mb-1 flex items-start justify-between text-base">
           <p className="mb-2 font-zen">Market State</p>
         </div>
@@ -41,12 +41,12 @@ export function ExpandedMarketDetail({ market }: { market: Market }) {
       </div>
 
       {/* warnings */}
-      <div className="m-4 mr-0 lg:w-1/3">
+      <div className="lg:w-1/3">
         <div className="mb-1 flex items-start justify-between text-base">
           <p className="mb-2 font-zen">Warnings</p>
         </div>
 
-        <div className="w-full gap-2 ">
+        <div className="flex flex-col gap-2">
           {warningsWithDetail.map((warning) => {
             return (
               <Info
diff --git a/app/markets/components/MarketSettingsModal.tsx b/app/markets/components/MarketSettingsModal.tsx
index 17a13e29..0486b19c 100644
--- a/app/markets/components/MarketSettingsModal.tsx
+++ b/app/markets/components/MarketSettingsModal.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Input, Divider } from '@heroui/react';
 import { FiSliders } from 'react-icons/fi';
-import { Button } from '@/components/common';
+import { Button } from '@/components/ui/button';
 import { IconSwitch } from '@/components/common/IconSwitch';
 import { Modal, ModalHeader, ModalBody, ModalFooter } from '@/components/common/Modal';
 import { TrustedByCell } from '@/components/vaults/TrustedVaultBadges';
@@ -215,8 +215,8 @@ export default function MarketSettingsModal({
                       </div>
                       <Button
                         size="sm"
-                        variant="flat"
-                        onPress={onOpenTrustedVaultsModal}
+                        variant="ghost"
+                        onClick={onOpenTrustedVaultsModal}
                         className="flex-shrink-0"
                       >
                         Manage
@@ -251,7 +251,7 @@ export default function MarketSettingsModal({
                   />
                   <Button
                     size="sm"
-                    onPress={handleCustomEntriesSubmit}
+                    onClick={handleCustomEntriesSubmit}
                   >
                     Update
                   </Button>
@@ -261,8 +261,8 @@ export default function MarketSettingsModal({
           </ModalBody>
           <ModalFooter>
             <Button
-              variant="light"
-              onPress={onClose}
+              variant="ghost"
+              onClick={onClose}
             >
               Close
             </Button>
diff --git a/app/markets/components/markets.tsx b/app/markets/components/markets.tsx
index 8f5bab62..c08ca21f 100644
--- a/app/markets/components/markets.tsx
+++ b/app/markets/components/markets.tsx
@@ -8,7 +8,7 @@ import { CgCompress } from 'react-icons/cg';
 import { FiSettings } from 'react-icons/fi';
 import { RiExpandHorizontalLine } from 'react-icons/ri';
 
-import { Button } from '@/components/common';
+import { Button } from '@/components/ui/button';
 import { SuppliedAssetFilterCompactSwitch } from '@/components/common/SuppliedAssetFilterCompactSwitch';
 import Header from '@/components/layout/header/Header';
 import { useTokens } from '@/components/providers/TokenProvider';
@@ -577,16 +577,17 @@ export default function Markets({ initialNetwork, initialCollaterals, initialLoa
                 />
               }
             >
-              <Button
-                disabled={loading || isRefetching}
-                variant="light"
-                size="sm"
-                className="text-secondary min-w-0 px-2"
-                onPress={handleRefresh}
-                isIconOnly
-              >
-                <ReloadIcon className={`${isRefetching ? 'animate-spin' : ''} h-3 w-3`} />
-              </Button>
+              <span>
+                <Button
+                  disabled={loading || isRefetching}
+                  variant="ghost"
+                  size="icon"
+                  className="text-secondary"
+                  onClick={handleRefresh}
+                >
+                  <ReloadIcon className={isRefetching ? 'animate-spin' : ''} />
+                </Button>
+              </span>
             </Tooltip>
 
             {/* Hide expand/compact toggle on mobile */}
@@ -608,16 +609,17 @@ export default function Markets({ initialNetwork, initialCollaterals, initialLoa
                   />
                 }
               >
-                <Button
-                  isIconOnly
-                  aria-label="Toggle table width"
-                  variant="light"
-                  size="sm"
-                  className="text-secondary min-w-0 px-2"
-                  onPress={() => setTableViewMode(tableViewMode === 'compact' ? 'expanded' : 'compact')}
-                >
-                  {effectiveTableViewMode === 'compact' ? <RiExpandHorizontalLine size={16} /> : <CgCompress size={16} />}
-                </Button>
+                <span>
+                  <Button
+                    aria-label="Toggle table width"
+                    variant="ghost"
+                    size="icon"
+                    className="text-secondary"
+                    onClick={() => setTableViewMode(tableViewMode === 'compact' ? 'expanded' : 'compact')}
+                  >
+                    {effectiveTableViewMode === 'compact' ? <RiExpandHorizontalLine /> : <CgCompress />}
+                  </Button>
+                </span>
               </Tooltip>
             </div>
 
@@ -633,16 +635,17 @@ export default function Markets({ initialNetwork, initialCollaterals, initialLoa
                 />
               }
             >
-              <Button
-                isIconOnly
-                aria-label="Market Preferences"
-                variant="light"
-                size="sm"
-                className="text-secondary min-w-0 px-2"
-                onPress={onSettingsModalOpen}
-              >
-                <FiSettings size={12} />
-              </Button>
+              <span>
+                <Button
+                  aria-label="Market Preferences"
+                  variant="ghost"
+                  size="icon"
+                  className="text-secondary"
+                  onClick={onSettingsModalOpen}
+                >
+                  <FiSettings />
+                </Button>
+              </span>
             </Tooltip>
           </div>
         </div>
diff --git a/app/positions/components/FromMarketsTable.tsx b/app/positions/components/FromMarketsTable.tsx
index 5f9a2e0b..aa5e8ab8 100644
--- a/app/positions/components/FromMarketsTable.tsx
+++ b/app/positions/components/FromMarketsTable.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { Pagination } from '@heroui/react';
-import { Button } from '@/components/common/Button';
+import { Button } from '@/components/ui/button';
 import { MarketIdentity, MarketIdentityMode, MarketIdentityFocus } from '@/components/MarketIdentity';
 import { useMarkets } from '@/hooks/useMarkets';
 import { useRateLabel } from '@/hooks/useRateLabel';
@@ -146,18 +146,16 @@ export function FromMarketsTable({ positions, selectedMarketUniqueKey, onSelectM
                           </div>
                           <Button
                             size="sm"
-                            variant="flat"
+                            variant="surface"
                             className="h-5 min-w-0 px-2 text-xs"
-                            isDisabled={maxTransferableAmount <= 0n}
-                            onPress={() => {
+                            disabled={maxTransferableAmount <= 0n}
+                            onClick={(e: React.MouseEvent) => {
+                              e.stopPropagation();
                               onSelectMarket(position.market.uniqueKey);
                               if (onSelectMax && maxTransferableAmount > 0n) {
                                 onSelectMax(position.market.uniqueKey, Number(maxTransferableAmount));
                               }
                             }}
-                            onClick={(e: React.MouseEvent) => {
-                              e.stopPropagation();
-                            }}
                           >
                             Max
                           </Button>
diff --git a/app/positions/components/PositionsContent.tsx b/app/positions/components/PositionsContent.tsx
index dd89f803..600d1fe7 100644
--- a/app/positions/components/PositionsContent.tsx
+++ b/app/positions/components/PositionsContent.tsx
@@ -3,6 +3,7 @@
 import { useEffect, useMemo, useState } from 'react';
 import Link from 'next/link';
 import { useParams } from 'next/navigation';
+import { Tooltip } from '@heroui/react';
 import { FaHistory, FaPlus } from 'react-icons/fa';
 import { IoRefreshOutline } from 'react-icons/io5';
 import { TbReport } from 'react-icons/tb';
@@ -10,11 +11,12 @@ import { toast } from 'react-toastify';
 import type { Address } from 'viem';
 import { useConnection } from 'wagmi';
 import { AccountIdentity } from '@/components/common/AccountIdentity';
-import { Button } from '@/components/common/Button';
+import { Button } from '@/components/ui/button';
 import Header from '@/components/layout/header/Header';
 import EmptyScreen from '@/components/Status/EmptyScreen';
 import LoadingScreen from '@/components/Status/LoadingScreen';
 import { SupplyModalV2 } from '@/components/SupplyModalV2';
+import { TooltipContent } from '@/components/TooltipContent';
 import { useMarkets } from '@/hooks/useMarkets';
 import useUserPositionsSummaryData, { type EarningsPeriod } from '@/hooks/useUserPositionsSummaryData';
 import type { MarketPosition } from '@/utils/types';
@@ -111,10 +113,10 @@ export default function Positions() {
             </Link>
             {isOwner && (
               <Button
-                variant="cta"
+                variant="primary"
                 size="md"
                 className="font-zen"
-                onPress={() => setShowOnboardingModal(true)}
+                onClick={() => setShowOnboardingModal(true)}
               >
                 <FaPlus
                   size={14}
@@ -175,15 +177,29 @@ export default function Positions() {
         ) : (
           <div className="container flex flex-col">
             <div className="flex w-full justify-end">
-              <Button
-                variant="light"
-                size="sm"
-                onPress={handleRefetch}
-                className="font-zen text-secondary opacity-80 transition-all duration-200 ease-in-out hover:opacity-100"
+              <Tooltip
+                classNames={{
+                  base: 'p-0 m-0 bg-transparent shadow-sm border-none',
+                  content: 'p-0 m-0 bg-transparent shadow-sm border-none',
+                }}
+                content={
+                  <TooltipContent
+                    title="Refresh"
+                    detail="Fetch latest data"
+                  />
+                }
               >
-                <IoRefreshOutline className="mr-2 h-4 w-4" />
-                Refresh
-              </Button>
+                <span>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={handleRefetch}
+                    className="text-secondary min-w-0 px-2"
+                  >
+                    <IoRefreshOutline className="h-3 w-3" />
+                  </Button>
+                </span>
+              </Tooltip>
             </div>
             <div className="flex justify-center">
               <EmptyScreen
diff --git a/app/positions/components/PositionsSummaryTable.tsx b/app/positions/components/PositionsSummaryTable.tsx
index 9609233a..ee04e668 100644
--- a/app/positions/components/PositionsSummaryTable.tsx
+++ b/app/positions/components/PositionsSummaryTable.tsx
@@ -1,5 +1,5 @@
 import React, { useMemo, useState, useEffect } from 'react';
-import { Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Tooltip, Switch, Button as NextUIButton } from '@heroui/react';
+import { Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Tooltip, Switch } from '@heroui/react';
 import { ChevronDownIcon, ChevronUpIcon } from '@radix-ui/react-icons';
 import { ReloadIcon } from '@radix-ui/react-icons';
 import { GearIcon } from '@radix-ui/react-icons';
@@ -10,7 +10,7 @@ import { IoChevronDownOutline } from 'react-icons/io5';
 import { PiHandCoins } from 'react-icons/pi';
 import { PulseLoader } from 'react-spinners';
 import { useConnection } from 'wagmi';
-import { Button } from '@/components/common/Button';
+import { Button } from '@/components/ui/button';
 import { TokenIcon } from '@/components/TokenIcon';
 import { TooltipContent } from '@/components/TooltipContent';
 import { useLocalStorage } from '@/hooks/useLocalStorage';
@@ -186,12 +186,12 @@ export function PositionsSummaryTable({
         <Dropdown>
           <DropdownTrigger>
             <Button
-              variant="light"
+              variant="ghost"
               size="sm"
-              className="font-zen text-secondary opacity-80 transition-all duration-200 ease-in-out hover:opacity-100"
+              className="font-zen text-secondary min-w-fit"
             >
               <IoChevronDownOutline className="mr-2 h-4 w-4" />
-              {earningsPeriod}
+              {periodLabels[earningsPeriod]}
             </Button>
           </DropdownTrigger>
           <DropdownMenu
@@ -204,26 +204,39 @@ export function PositionsSummaryTable({
             ))}
           </DropdownMenu>
         </Dropdown>
-        <Button
-          variant="light"
-          size="sm"
-          onPress={handleManualRefresh}
-          disabled={isRefetching}
-          className="font-zen text-secondary opacity-80 transition-all duration-200 ease-in-out hover:opacity-100"
+        <Tooltip
+          classNames={{
+            base: 'p-0 m-0 bg-transparent shadow-sm border-none',
+            content: 'p-0 m-0 bg-transparent shadow-sm border-none',
+          }}
+          content={
+            <TooltipContent
+              title="Refresh"
+              detail="Fetch latest position data"
+            />
+          }
         >
-          <ReloadIcon className={`mr-2 h-4 w-4 ${isRefetching ? 'animate-spin' : ''}`} />
-          Refresh
-        </Button>
+          <span>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={handleManualRefresh}
+              disabled={isRefetching}
+              className="text-secondary min-w-0 px-2"
+            >
+              <ReloadIcon className={`${isRefetching ? 'animate-spin' : ''} h-3 w-3`} />
+            </Button>
+          </span>
+        </Tooltip>
         <Dropdown>
           <DropdownTrigger>
-            <NextUIButton
-              isIconOnly
-              variant="light"
+            <Button
+              variant="ghost"
               size="sm"
-              className="font-zen text-secondary opacity-80 transition-all duration-200 ease-in-out hover:opacity-100"
+              className="text-secondary min-w-0 px-2"
             >
-              <GearIcon className="h-4 w-4" />
-            </NextUIButton>
+              <GearIcon className="h-3 w-3" />
+            </Button>
           </DropdownTrigger>
           <DropdownMenu
             aria-label="Position table settings"
@@ -406,9 +419,9 @@ export function PositionsSummaryTable({
                       <div className="flex items-center justify-center">
                         <Button
                           size="sm"
-                          variant="interactive"
+                          variant="surface"
                           className="text-xs"
-                          onPress={() => {
+                          onClick={() => {
                             if (!isOwner) {
                               toast.error('No authorization', 'You can only rebalance your own positions');
                               return;
diff --git a/app/positions/components/RebalanceActionRow.tsx b/app/positions/components/RebalanceActionRow.tsx
index ffae2c2b..15cde6c3 100644
--- a/app/positions/components/RebalanceActionRow.tsx
+++ b/app/positions/components/RebalanceActionRow.tsx
@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 import { ArrowRightIcon, Cross2Icon, TrashIcon } from '@radix-ui/react-icons';
 import { formatUnits, parseUnits } from 'viem';
-import { Button } from '@/components/common';
+import { Button } from '@/components/ui/button';
 import { MarketIdentity, MarketIdentityMode } from '@/components/MarketIdentity';
 import { TokenIcon } from '@/components/TokenIcon';
 import { useRateLabel } from '@/hooks/useRateLabel';
@@ -226,10 +226,10 @@ export function RebalanceActionRow({
 
         {mode === 'input' ? (
           <Button
-            onPress={onAddAction}
-            variant="cta"
+            onClick={onAddAction}
+            variant="primary"
             size="sm"
-            isDisabled={isAddDisabled}
+            disabled={isAddDisabled}
             className="h-8 w-[64px]"
           >
             Add
diff --git a/app/positions/components/RebalanceModal.tsx b/app/positions/components/RebalanceModal.tsx
index 492530c1..028f9ef3 100644
--- a/app/positions/components/RebalanceModal.tsx
+++ b/app/positions/components/RebalanceModal.tsx
@@ -1,7 +1,7 @@
 import { useState, useMemo, useCallback } from 'react';
 import { ReloadIcon } from '@radix-ui/react-icons';
 import { parseUnits, formatUnits } from 'viem';
-import { Button } from '@/components/common';
+import { Button } from '@/components/ui/button';
 import { MarketSelectionModal } from '@/components/common/MarketSelectionModal';
 import { Modal, ModalHeader, ModalBody, ModalFooter } from '@/components/common/Modal';
 import { Spinner } from '@/components/common/Spinner';
@@ -313,16 +313,16 @@ export function RebalanceModal({ groupedPosition, isOpen, onOpenChange, refetch,
         </ModalBody>
         <ModalFooter className="mx-2">
           <Button
-            variant="secondary"
-            onPress={() => onOpenChange(false)}
+            variant="default"
+            onClick={() => onOpenChange(false)}
             className="rounded-sm p-4 px-10 font-zen text-secondary duration-200 ease-in-out hover:scale-105"
           >
             Cancel
           </Button>
           <Button
-            variant="cta"
-            onPress={() => void handleExecuteRebalance()}
-            isDisabled={isProcessing || rebalanceActions.length === 0}
+            variant="primary"
+            onClick={() => void handleExecuteRebalance()}
+            disabled={isProcessing || rebalanceActions.length === 0}
             isLoading={isProcessing}
             className="rounded-sm p-4 px-10 font-zen text-white duration-200 ease-in-out hover:scale-105 disabled:opacity-50"
           >
diff --git a/app/positions/components/SuppliedMarketsDetail.tsx b/app/positions/components/SuppliedMarketsDetail.tsx
index cd44600f..9c370cbd 100644
--- a/app/positions/components/SuppliedMarketsDetail.tsx
+++ b/app/positions/components/SuppliedMarketsDetail.tsx
@@ -1,5 +1,5 @@
 import { motion } from 'framer-motion';
-import { Button } from '@/components/common';
+import { Button } from '@/components/ui/button';
 import { RateFormatted } from '@/components/common/RateFormatted';
 import { MarketIdBadge } from '@/components/MarketIdBadge';
 import { MarketIdentity, MarketIdentityFocus, MarketIdentityMode } from '@/components/MarketIdentity';
@@ -106,8 +106,8 @@ function MarketRow({
         <div className="flex items-center justify-center gap-2">
           <Button
             size="sm"
-            variant="interactive"
-            onPress={() => {
+            variant="surface"
+            onClick={() => {
               setSelectedPosition(position);
               setShowWithdrawModal(true);
             }}
@@ -116,8 +116,8 @@ function MarketRow({
           </Button>
           <Button
             size="sm"
-            variant="interactive"
-            onPress={() => {
+            variant="surface"
+            onClick={() => {
               setSelectedPosition(position);
               setShowSupplyModal(true);
             }}
diff --git a/app/positions/components/onboarding/AssetSelection.tsx b/app/positions/components/onboarding/AssetSelection.tsx
index 4e80450e..0edd58c1 100644
--- a/app/positions/components/onboarding/AssetSelection.tsx
+++ b/app/positions/components/onboarding/AssetSelection.tsx
@@ -3,7 +3,7 @@ import { motion } from 'framer-motion';
 import Image from 'next/image';
 import Link from 'next/link';
 import { formatUnits } from 'viem';
-import { Button } from '@/components/common/Button';
+import { Button } from '@/components/ui/button';
 import { Spinner } from '@/components/common/Spinner';
 import { useMarkets } from '@/hooks/useMarkets';
 import { useUserBalancesAllNetworks } from '@/hooks/useUserBalances';
diff --git a/app/positions/components/onboarding/MarketSelectionOnboarding.tsx b/app/positions/components/onboarding/MarketSelectionOnboarding.tsx
index c30a2fe6..08629a6c 100644
--- a/app/positions/components/onboarding/MarketSelectionOnboarding.tsx
+++ b/app/positions/components/onboarding/MarketSelectionOnboarding.tsx
@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { Button } from '@/components/common/Button';
+import { Button } from '@/components/ui/button';
 import { MarketsTableWithSameLoanAsset } from '@/components/common/MarketsTableWithSameLoanAsset';
 import type { MarketWithSelection } from '@/components/common/MarketsTableWithSameLoanAsset';
 import { useTokens } from '@/components/providers/TokenProvider';
@@ -39,8 +39,8 @@ export function MarketSelectionOnboarding() {
       <div className="flex h-full flex-col items-center justify-center">
         <p className="text-gray-400">No token selected. Please go back and select a token.</p>
         <Button
-          variant="light"
-          onPress={goToPrevStep}
+          variant="ghost"
+          onClick={goToPrevStep}
           className="mt-4 min-w-[120px]"
         >
           Back
@@ -85,16 +85,16 @@ export function MarketSelectionOnboarding() {
       {/* Navigation - ALWAYS VISIBLE */}
       <div className="mt-6 flex items-center justify-between gap-4 border-t border-gray-200 dark:border-gray-700 pt-4">
         <Button
-          variant="light"
-          onPress={goToPrevStep}
+          variant="ghost"
+          onClick={goToPrevStep}
           className="min-w-[120px]"
         >
           Back
         </Button>
         <Button
-          variant="cta"
-          onPress={goToNextStep}
-          isDisabled={!canGoNext}
+          variant="primary"
+          onClick={goToNextStep}
+          disabled={!canGoNext}
           className="min-w-[120px]"
         >
           Continue
diff --git a/app/positions/components/onboarding/SetupPositions.tsx b/app/positions/components/onboarding/SetupPositions.tsx
index dbef1446..32fb7f61 100644
--- a/app/positions/components/onboarding/SetupPositions.tsx
+++ b/app/positions/components/onboarding/SetupPositions.tsx
@@ -3,7 +3,7 @@ import { Slider } from '@heroui/react';
 import { LockClosedIcon, LockOpen1Icon } from '@radix-ui/react-icons';
 import Image from 'next/image';
 import { formatUnits, parseUnits } from 'viem';
-import { Button } from '@/components/common';
+import { Button } from '@/components/ui/button';
 import Input from '@/components/Input/Input';
 import { MarketIdentity, MarketIdentityMode, MarketIdentityFocus } from '@/components/MarketIdentity';
 import { SupplyProcessModal } from '@/components/SupplyProcessModal';
@@ -373,17 +373,17 @@ export function SetupPositions() {
       {/* Navigation */}
       <div className="mt-6 flex items-center justify-between">
         <Button
-          variant="light"
+          variant="ghost"
           className="min-w-[120px]"
-          onPress={goToPrevStep}
+          onClick={goToPrevStep}
         >
           Back
         </Button>
         <Button
-          variant="cta"
-          isDisabled={error !== null || totalAmountBigInt === 0n || supplies.length === 0}
+          variant="primary"
+          disabled={error !== null || totalAmountBigInt === 0n || supplies.length === 0}
           isLoading={supplyPending || isLoadingPermit2}
-          onPress={() => void handleSupply()}
+          onClick={() => void handleSupply()}
           className="min-w-[120px]"
         >
           Execute
diff --git a/app/positions/components/onboarding/SuccessPage.tsx b/app/positions/components/onboarding/SuccessPage.tsx
index 777ec5be..43f2a842 100644
--- a/app/positions/components/onboarding/SuccessPage.tsx
+++ b/app/positions/components/onboarding/SuccessPage.tsx
@@ -1,5 +1,5 @@
 import { FaCheckCircle } from 'react-icons/fa';
-import { Button } from '@/components/common/Button';
+import { Button } from '@/components/ui/button';
 import { useOnboarding } from './OnboardingContext';
 
 export function SuccessPage({ onClose }: { onClose: () => void }) {
@@ -22,9 +22,9 @@ export function SuccessPage({ onClose }: { onClose: () => void }) {
 
       <div className="mt-4">
         <Button
-          variant="cta"
+          variant="primary"
           className="min-w-[120px]"
-          onPress={handleFinished}
+          onClick={handleFinished}
         >
           Close
         </Button>
diff --git a/app/positions/report/components/ReportContent.tsx b/app/positions/report/components/ReportContent.tsx
index e4d1afdb..39d166ee 100644
--- a/app/positions/report/components/ReportContent.tsx
+++ b/app/positions/report/components/ReportContent.tsx
@@ -5,7 +5,7 @@ import type { DateValue } from '@heroui/react';
 import { parseDate, getLocalTimeZone, today, parseAbsoluteToLocal, type ZonedDateTime, now } from '@internationalized/date';
 import { useDateFormatter } from '@react-aria/i18n';
 import type { Address } from 'viem';
-import { Button } from '@/components/common/Button';
+import { Button } from '@/components/ui/button';
 import DatePicker from '@/components/common/DatePicker';
 import { Spinner } from '@/components/common/Spinner';
 import Header from '@/components/layout/header/Header';
@@ -213,9 +213,9 @@ export default function ReportContent({ account }: { account: Address }) {
                 onClick={() => {
                   void handleGenerateReport();
                 }}
-                isDisabled={!selectedAsset || isGenerating || isReportCurrent || !!startDateError || !!endDateError}
+                disabled={!selectedAsset || isGenerating || isReportCurrent || !!startDateError || !!endDateError}
                 className="inline-flex h-14 min-w-[120px] items-center gap-2"
-                variant="cta"
+                variant="primary"
               >
                 {isGenerating ? (
                   <Spinner
diff --git a/app/rewards/components/RewardContent.tsx b/app/rewards/components/RewardContent.tsx
index 169b0b31..158b14a4 100644
--- a/app/rewards/components/RewardContent.tsx
+++ b/app/rewards/components/RewardContent.tsx
@@ -132,7 +132,7 @@ export default function Rewards() {
 
   const canClaim = useMemo(() => totalClaimable > 0n, [totalClaimable]);
 
-  const showLegacy = useMemo(() => morphoBalanceLegacy && morphoBalanceLegacy !== 0n, [morphoBalanceLegacy]);
+  const showLegacy = useMemo(() => morphoBalanceLegacy !== undefined && morphoBalanceLegacy !== 0n, [morphoBalanceLegacy]);
 
   const { wrap, currentStep, showProcessModal, setShowProcessModal } = useWrapLegacyMorpho(morphoBalanceLegacy ?? 0n, () => {
     // Refresh rewards data after successful wrap
diff --git a/app/rewards/components/RewardTable.tsx b/app/rewards/components/RewardTable.tsx
index a08a72fb..da812e5c 100644
--- a/app/rewards/components/RewardTable.tsx
+++ b/app/rewards/components/RewardTable.tsx
@@ -6,7 +6,7 @@ import Image from 'next/image';
 import Link from 'next/link';
 import type { Address } from 'viem';
 import { useConnection } from 'wagmi';
-import { Button } from '@/components/common/Button';
+import { Button } from '@/components/ui/button';
 import { TokenIcon } from '@/components/TokenIcon';
 import { useMarketNetwork } from '@/hooks/useMarketNetwork';
 import type { DistributionResponseType } from '@/hooks/useRewards';
@@ -194,19 +194,19 @@ export default function RewardTable({ rewards, distributions, account, showClaim
                             rel="noopener noreferrer"
                           >
                             <Button
-                              variant="interactive"
+                              variant="surface"
                               size="sm"
-                              isDisabled={tokenReward.total.claimable === BigInt(0)}
+                              disabled={tokenReward.total.claimable === BigInt(0)}
                             >
                               Claim on Merkl
                             </Button>
                           </Link>
                         ) : (
                           <Button
-                            variant="interactive"
+                            variant="surface"
                             size="sm"
-                            isDisabled={tokenReward.total.claimable === BigInt(0) || distribution === undefined}
-                            onPress={() => {
+                            disabled={tokenReward.total.claimable === BigInt(0) || distribution === undefined}
+                            onClick={() => {
                               void (async () => {
                                 if (!account) {
                                   toast.error('No account connected', 'Please connect your wallet to continue.');
diff --git a/app/settings/page.tsx b/app/settings/page.tsx
index 77f170af..7cb12a21 100644
--- a/app/settings/page.tsx
+++ b/app/settings/page.tsx
@@ -2,7 +2,7 @@
 
 import React from 'react';
 import { GoShield, GoShieldCheck } from 'react-icons/go';
-import { Button } from '@/components/common';
+import { Button } from '@/components/ui/button';
 import { IconSwitch } from '@/components/common/IconSwitch';
 import Header from '@/components/layout/header/Header';
 import { BlacklistedMarketsModal } from '@/components/settings/BlacklistedMarketsModal';
@@ -185,8 +185,8 @@ export default function SettingsPage() {
                 </div>
                 <Button
                   size="sm"
-                  variant="secondary"
-                  onPress={() => setIsTrustedVaultsModalOpen(true)}
+                  variant="default"
+                  onClick={() => setIsTrustedVaultsModalOpen(true)}
                 >
                   Edit
                 </Button>
@@ -243,8 +243,8 @@ export default function SettingsPage() {
                 </div>
                 <Button
                   size="sm"
-                  variant="secondary"
-                  onPress={() => setIsBlacklistedMarketsModalOpen(true)}
+                  variant="default"
+                  onClick={() => setIsBlacklistedMarketsModalOpen(true)}
                 >
                   Edit
                 </Button>
diff --git a/app/tools/page.tsx b/app/tools/page.tsx
index 496caf5d..4995771a 100644
--- a/app/tools/page.tsx
+++ b/app/tools/page.tsx
@@ -3,7 +3,7 @@
 import React from 'react';
 import { isAddress } from 'viem';
 import { useChainId, useSwitchChain } from 'wagmi';
-import { Button } from '@/components/common';
+import { Button } from '@/components/ui/button';
 import Header from '@/components/layout/header/Header';
 import { useMorphoAuthorization } from '@/hooks/useMorphoAuthorization';
 import { useStyledToast } from '@/hooks/useStyledToast';
@@ -153,18 +153,18 @@ export default function ToolsPage() {
                   {/* Action Buttons */}
                   {isAuthorized === true ? (
                     <Button
-                      variant="secondary"
-                      onPress={handleRevoke}
-                      isDisabled={!isValidAddress || !addressInput || isAuthorizing}
+                      variant="default"
+                      onClick={handleRevoke}
+                      disabled={!isValidAddress || !addressInput || isAuthorizing}
                       className="flex-shrink-0"
                     >
                       {isAuthorizing ? 'Revoking...' : needsSwitchChain ? 'Switch Network' : 'Revoke'}
                     </Button>
                   ) : (
                     <Button
-                      variant="cta"
-                      onPress={handleAuthorize}
-                      isDisabled={!isValidAddress || !addressInput || isAuthorizing}
+                      variant="primary"
+                      onClick={handleAuthorize}
+                      disabled={!isValidAddress || !addressInput || isAuthorizing}
                       className="flex-shrink-0"
                     >
                       {isAuthorizing ? 'Authorizing...' : needsSwitchChain ? 'Switch Network' : 'Authorize'}
diff --git a/docs/Styling.md b/docs/Styling.md
index 0c873ded..7fdd7cae 100644
--- a/docs/Styling.md
+++ b/docs/Styling.md
@@ -4,7 +4,7 @@
 
 Use these shared components instead of raw HTML elements:
 
-- `Button`: Import from `@/components/common/Button` for all clickable actions
+- `Button`: Import from `@/components/ui/button` for all clickable actions
 - `Modal`: For **all** modal dialogs (always import from `@/components/common/Modal`)
 - `Card`: For contained content sections
 
@@ -31,7 +31,7 @@ Import the primitives from our shared entry point (and nowhere else):
 
 ```tsx
 import { Modal, ModalHeader, ModalBody, ModalFooter } from '@/components/common/Modal';
-import { Button } from '@/components/common/Button';
+import { Button } from '@/components/ui/button';
 ```
 
 ### Global Modal Context
@@ -79,8 +79,8 @@ Use this pattern for primary workflows, settings, and management interfaces:
   </ModalBody>
 
   <ModalFooter>
-    <Button variant="secondary" onPress={onClose}>Cancel</Button>
-    <Button variant="cta" onPress={handleConfirm}>Confirm</Button>
+    <Button variant="secondary" onClick={onClose}>Cancel</Button>
+    <Button variant="cta" onClick={handleConfirm}>Confirm</Button>
   </ModalFooter>
 </Modal>
 ```
@@ -115,7 +115,7 @@ import { TokenIcon } from '@/components/TokenIcon';
   title="Rebalance Position"
   description="Manage your positions"
   actions={
-    <Button variant="light" size="sm" onPress={handleRefresh}>
+    <Button variant="light" size="sm" onClick={handleRefresh}>
       <RefreshIcon /> Refresh
     </Button>
   }
@@ -153,8 +153,8 @@ Use this pattern for filters, confirmations, and quick actions:
   </ModalBody>
 
   <ModalFooter>
-    <Button variant="secondary" size="sm" onPress={onClose}>Cancel</Button>
-    <Button variant="cta" size="sm" onPress={handleApply}>Apply</Button>
+    <Button variant="secondary" size="sm" onClick={onClose}>Cancel</Button>
+    <Button variant="cta" size="sm" onClick={handleApply}>Apply</Button>
   </ModalFooter>
 </Modal>
 ```
@@ -282,66 +282,94 @@ For custom modals using `framer-motion`, apply `font-zen` to the outer container
 ### Button Component
 
 ```typescript
-import { Button } from '@/components/common/Button';
+import { Button } from '@/components/ui/button';
 ```
 
 #### Button Variants
 
-- `default`: Standard surface-colored button
-
-  - Use for: Navigation buttons, "Back", "Cancel" actions
-  - Example: "Back to Markets", "Cancel"
-
-- `cta`: Primary call-to-action with orange background
-
-  - Use for: Main actions, confirmations, primary flows
-  - Example: "Launch App", "Execute Rebalance", "Start Lending"
-
-- `interactive`: Subtle background with strong hover effect (background → primary)
-
-  - Use for: Table row actions, interactive elements
-  - Example: "Claim", "Supply", "Withdraw" in tables
-
-- `secondary`: Subtle background (hovered color) without hover transform
-
-  - Use for: Secondary actions, less prominent options
-  - Example: "Remove" in tables, "Cancel" in modals
-
-- `ghost`: Most subtle variant with minimal visual impact
-  - Use for: Tertiary actions, subtle navigation
-  - Example: "Refresh" buttons, utility actions
+Our button system uses 4 simple, purpose-driven variants:
+
+**default** - For buttons on background areas
+- Uses `bg-surface` color
+- Hover: Darkens slightly and increases opacity
+- Use for: Navigation buttons, actions on main background
+- Example: "Back to Markets", top-level page actions
+
+**primary** - For important actions
+- Uses `bg-primary` color (primary theme color, NOT orange)
+- Hover: Increases shadow and opacity, slight scale down on click
+- Use for: Main CTAs, confirmations, primary flows
+- Example: "New Position", "Execute Rebalance", "Supply", "Withdraw"
+
+**surface** - For buttons on surface-colored backgrounds
+- Uses `bg-hovered` color - Subtle, doesn't stand out too much
+- Hover: `bg-default-200`, Active: `bg-default-300` (gentle color progression)
+- Use for: Actions in cards, modals, table rows
+- Example: "Claim" button in tables, dropdown triggers, actions in cards
+
+**ghost** - For icon buttons and minimal actions
+- Transparent background with responsive hover states
+- Icon buttons: Scale up slightly on hover, visible background feedback
+- Size-specific hover styles for optimal feedback
+- Use for: Icon-only buttons, utility actions, settings
+- Example: Refresh icons, settings icons, filter toggles
 
 #### Examples
 
 ```tsx
-// Primary CTA
-<Button variant="cta" size="lg" className="font-zen">
-  Launch App
+// Primary - Important action
+<Button variant="primary" size="md" className="font-zen">
+  New Position
 </Button>
 
-// Table Action
-<Button variant="interactive" size="sm">
+// Surface - Action in a table/card (subtle)
+<Button variant="surface" size="sm">
   Claim
 </Button>
 
-// Navigation
+// Default - Navigation on background
 <Button variant="default" size="md">
   <ChevronLeftIcon className="mr-2" />
   Back to Markets
 </Button>
 
-// Secondary Action
-<Button variant="secondary" size="md">
-  Cancel
-</Button>
-
-// Utility Action
-<Button variant="subtle" size="sm">
-  <RefreshIcon className="mr-2" />
-  Refresh
-</Button>
+// Ghost - Icon-only button with tooltip (always wrap in span for HeroUI Tooltip)
+<Tooltip
+  classNames={{
+    base: 'p-0 m-0 bg-transparent shadow-sm border-none',
+    content: 'p-0 m-0 bg-transparent shadow-sm border-none',
+  }}
+  content={<TooltipContent title="Refresh" detail="Fetch latest data" />}
+>
+  <span>
+    <Button variant="ghost" size="icon" className="text-secondary">
+      <RefreshIcon />
+    </Button>
+  </span>
+</Tooltip>
 ```
 
+#### Button Sizes
+
+- `xs`: Extra small (h-6, 40px min-width) - Rare use
+- `sm`: Small (h-8, 64px min-width) - Common for compact actions
+- `md`/`default`: Medium (h-10, 80px min-width) - Standard size
+- `lg`: Large (h-12, 96px min-width) - Important CTAs
+- `icon`: Icon-only (h-8 w-8, 14px icons) - Use for icon buttons
+
+#### Button Hover Effects
+
+All buttons have subtle hover refinements:
+- **Opacity**: Buttons start at 95% opacity and become 100% on hover for a refined look
+- **Color transitions**: Smooth 200ms transitions for all state changes
+- **Scale feedback**: Active state provides tactile press feedback
+- **Ghost buttons**: Size-specific hover behaviors for optimal UX
+  - Icon size: Scales to 105% on hover, darker background
+  - Small size: Scales to 102% on hover, medium background
+  - Medium/Large: Scales to 101% on hover, lighter background
+
+**Important Note**: When wrapping Button in HeroUI Tooltip, always wrap the Button in a `<span>` to prevent ResizeObserver errors.
+
 ### Toggle Controls
 
 - Always use the shared `IconSwitch` component (`@/components/common/IconSwitch`) for boolean toggles so dimensions, motion, and iconography stay consistent across pages.
@@ -819,7 +847,7 @@ For simple text inputs, use native HTML input with consistent styling:
   <Button
     variant="cta"
     size="sm"
-    onPress={handleAction}
+    onClick={handleAction}
     className="absolute right-1 top-1/2 -translate-y-1/2 transform"
   >
     Save
diff --git a/package.json b/package.json
index 3c44dbdb..f6451399 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,6 @@
   "dependencies": {
     "@heroicons/react": "^2.2.0",
     "@heroui/accordion": "^2.0.35",
-    "@heroui/button": "^2.0.34",
     "@heroui/checkbox": "^2.1.2",
     "@heroui/input": "^2.2.2",
     "@heroui/react": "^2.4.2",
@@ -35,10 +34,10 @@
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-navigation-menu": "^1.1.4",
     "@radix-ui/react-slot": "^1.2.4",
-    "@reown/appkit": "^1.8.14",
-    "@reown/appkit-adapter-wagmi": "^1.8.14",
     "@react-aria/i18n": "^3.12.11",
     "@react-spring/web": "^9.7.3",
+    "@reown/appkit": "^1.8.14",
+    "@reown/appkit-adapter-wagmi": "^1.8.14",
     "@tanstack/react-query": "^5.69.0",
     "@tanstack/react-query-devtools": "^5.69.0",
     "@types/react-table": "^7.7.20",
@@ -47,7 +46,6 @@
     "animejs": "^4.2.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.0",
-    "downshift": "^9.0.8",
     "framer-motion": "^11.2.10",
     "graphql": "^16.8.1",
     "graphql-request": "6",
@@ -56,8 +54,7 @@
     "next": "^15.4.8",
     "next-themes": "^0.3.0",
     "perfume.js": "9.2.0",
-    "permissionless": "^0.0.36",
-    "pino-pretty": "^10.3.1",
+    "pino-pretty": "^13.1.3",
     "react": "^18",
     "react-dom": "^18",
     "react-icons": "^5.2.1",
@@ -67,13 +64,7 @@
     "react-toastify": "11.0.2",
     "react-type-animation": "^3.2.0",
     "recharts": "^2.13.0",
-    "rehype-pretty-code": "0.12.3",
-    "rehype-stringify": "^10.0.0",
-    "remark-parse": "^11.0.0",
-    "remark-rehype": "^11.0.0",
     "sharp": "^0.33.5",
-    "shikiji": "^0.9.17",
-    "shikiji-core": "^0.9.17",
     "tailwind-merge": "^3.4.0",
     "tailwind-variants": "^2.1.0",
     "unified": "^11.0.4",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2502a78f..f60d7f8b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -14,9 +14,6 @@ importers:
       '@heroui/accordion':
         specifier: ^2.0.35
         version: 2.2.21(@heroui/system@2.4.20(@heroui/theme@2.4.20(tailwindcss@4.1.17))(framer-motion@11.18.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@heroui/theme@2.4.20(tailwindcss@4.1.17))(framer-motion@11.18.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@heroui/button':
-        specifier: ^2.0.34
-        version: 2.2.24(@heroui/system@2.4.20(@heroui/theme@2.4.20(tailwindcss@4.1.17))(framer-motion@11.18.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@heroui/theme@2.4.20(tailwindcss@4.1.17))(framer-motion@11.18.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@heroui/checkbox':
         specifier: ^2.1.2
         version: 2.3.24(@heroui/system@2.4.20(@heroui/theme@2.4.20(tailwindcss@4.1.17))(framer-motion@11.18.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@heroui/theme@2.4.20(tailwindcss@4.1.17))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -92,9 +89,6 @@ importers:
       clsx:
         specifier: ^2.1.0
         version: 2.1.1
-      downshift:
-        specifier: ^9.0.8
-        version: 9.0.10(react@18.3.1)
       framer-motion:
         specifier: ^11.2.10
         version: 11.18.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -119,12 +113,9 @@ importers:
       perfume.js:
         specifier: 9.2.0
         version: 9.2.0
-      permissionless:
-        specifier: ^0.0.36
-        version: 0.0.36(viem@2.40.2(bufferutil@4.0.9)(typescript@5.9.3)(utf-8-validate@5.0.10)(zod@3.25.76))
       pino-pretty:
-        specifier: ^10.3.1
-        version: 10.3.1
+        specifier: ^13.1.3
+        version: 13.1.3
       react:
         specifier: ^18
         version: 18.3.1
@@ -152,27 +143,9 @@ importers:
       recharts:
         specifier: ^2.13.0
         version: 2.15.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      rehype-pretty-code:
-        specifier: 0.12.3
-        version: 0.12.3(shikiji@0.9.19)
-      rehype-stringify:
-        specifier: ^10.0.0
-        version: 10.0.1
-      remark-parse:
-        specifier: ^11.0.0
-        version: 11.0.0
-      remark-rehype:
-        specifier: ^11.0.0
-        version: 11.1.2
       sharp:
         specifier: ^0.33.5
         version: 0.33.5
-      shikiji:
-        specifier: ^0.9.17
-        version: 0.9.19
-      shikiji-core:
-        specifier: ^0.9.17
-        version: 0.9.19
       tailwind-merge:
         specifier: ^3.4.0
         version: 3.4.0
@@ -3597,9 +3570,6 @@ packages:
   '@types/debug@4.1.12':
     resolution: {integrity: sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==}
 
-  '@types/hast@3.0.4':
-    resolution: {integrity: sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==}
-
   '@types/identity-obj-proxy@3.0.2':
     resolution: {integrity: sha512-0WfmImclMEjbt2oOC4BvvoypsR9Bgsp6OeqEjzSpNBYa1FEHbMGwxADaW/y5liIcnUyMotWtntl3WGWUbSebEw==}
 
@@ -3612,9 +3582,6 @@ packages:
   '@types/lodash@4.17.20':
     resolution: {integrity: sha512-H3MHACvFUEiujabxhaI/ImO6gUrd8oOurg7LQtS7mbwIXA/cUqWrvBsaeJ23aZEPk1TAYkurjfMbSELfoCXlGA==}
 
-  '@types/mdast@4.0.4':
-    resolution: {integrity: sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==}
-
   '@types/ms@2.1.0':
     resolution: {integrity: sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==}
 
@@ -3653,9 +3620,6 @@ packages:
   '@types/ws@8.18.1':
     resolution: {integrity: sha512-ThVF6DCVhA8kUGy+aazFQ4kXQ7E1Ty7A3ypFOe0IcJV8O/M511G99AW24irKrW56Wt44yG9+ij8FaqoBGkuBXg==}
 
-  '@ungap/structured-clone@1.3.0':
-    resolution: {integrity: sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==}
-
   '@uniswap/permit2-sdk@1.4.0':
     resolution: {integrity: sha512-l/aGhfhB93M76vXs4eB8QNwhELE6bs66kh7F1cyobaPtINaVpMmlJv+j3KmHeHwAZIsh7QXyYzhDxs07u0Pe4Q==}
 
@@ -4052,9 +4016,6 @@ packages:
   caniuse-lite@1.0.30001735:
     resolution: {integrity: sha512-EV/laoX7Wq2J9TQlyIXRxTJqIw4sxfXS4OYgudGxBYRuTv0q7AM6yMEpU/Vo1I94thg9U6EZ2NfZx9GJq83u7w==}
 
-  ccount@2.0.1:
-    resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
-
   chalk@4.1.2:
     resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
     engines: {node: '>=10'}
@@ -4063,15 +4024,6 @@ packages:
     resolution: {integrity: sha512-7NzBL0rN6fMUW+f7A6Io4h40qQlG+xGmtMxfbnH/K7TAtt8JQWVQK+6g0UXKMeVJoyV5EkkNsErQ8pVD3bLHbA==}
     engines: {node: ^12.17.0 || ^14.13 || >=16.0.0}
 
-  character-entities-html4@2.1.0:
-    resolution: {integrity: sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==}
-
-  character-entities-legacy@3.0.0:
-    resolution: {integrity: sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==}
-
-  character-entities@2.0.2:
-    resolution: {integrity: sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==}
-
   charenc@0.0.2:
     resolution: {integrity: sha512-yrLQ/yVUFXkzg7EDQsPieE/53+0RlaWTs+wBrvW36cyilJ2SaDWfl4Yj7MtLTXleV9uEKefbAGUPv2/iWSooRA==}
 
@@ -4126,9 +4078,6 @@ packages:
     resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
     engines: {node: '>= 0.8'}
 
-  comma-separated-tokens@2.0.3:
-    resolution: {integrity: sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==}
-
   commander@14.0.0:
     resolution: {integrity: sha512-2uM9rYjPvyq39NwLRqaiLtWHyDC1FvryJDa2ATTVims5YAS4PupsEQsDvP14FqhFr0P49CYDugi59xaxJlTXRA==}
     engines: {node: '>=20'}
@@ -4299,9 +4248,6 @@ packages:
   decimal.js@10.6.0:
     resolution: {integrity: sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==}
 
-  decode-named-character-reference@1.2.0:
-    resolution: {integrity: sha512-c6fcElNV6ShtZXmsgNgFFV5tVX2PaV4g+MOAkb8eXHvn6sryJBrZa9r0zV6+dtTyoCKxtDy5tyQ5ZwQuidtd+Q==}
-
   decode-uri-component@0.2.2:
     resolution: {integrity: sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ==}
     engines: {node: '>=0.10'}
@@ -4371,11 +4317,6 @@ packages:
   dom-helpers@5.2.1:
     resolution: {integrity: sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==}
 
-  downshift@9.0.10:
-    resolution: {integrity: sha512-TP/iqV6bBok6eGD5tZ8boM8Xt7/+DZvnVNr8cNIhbAm2oUBd79Tudiccs2hbcV9p7xAgS/ozE7Hxy3a9QqS6Mw==}
-    peerDependencies:
-      react: '>=16.12.0'
-
   dunder-proto@1.0.1:
     resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
     engines: {node: '>= 0.4'}
@@ -4413,10 +4354,6 @@ packages:
     resolution: {integrity: sha512-d4lC8xfavMeBjzGr2vECC3fsGXziXZQyJxD868h2M/mBI3PwAuODxAkLkq5HYuvrPYcUtiLzsTo8U3PgX3Ocww==}
     engines: {node: '>=10.13.0'}
 
-  entities@6.0.1:
-    resolution: {integrity: sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==}
-    engines: {node: '>=0.12'}
-
   env-paths@2.2.1:
     resolution: {integrity: sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==}
     engines: {node: '>=6'}
@@ -4508,8 +4445,8 @@ packages:
     resolution: {integrity: sha512-GipyPsXO1anza0AOZdy69Im7hGFCNB7Y/NGjDlZGJ3GJJLtwNSb2vrzYrTYJRrRloVx7pl+bhUaTB8yiccPvFQ==}
     engines: {node: '> 0.1.90'}
 
-  fast-copy@3.0.2:
-    resolution: {integrity: sha512-dl0O9Vhju8IrcLndv2eU4ldt1ftXMqqfgN4H1cpmGV7P6jeB9FwpN9a2c8DPGE1Ys88rNUJVYDHq73CGAGOPfQ==}
+  fast-copy@4.0.1:
+    resolution: {integrity: sha512-+uUOQlhsaswsizHFmEFAQhB3lSiQ+lisxl50N6ZP0wywlZeWsIESxSi9ftPEps8UGfiBzyYP7x27zA674WUvXw==}
 
   fast-deep-equal@3.1.3:
     resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
@@ -4709,27 +4646,6 @@ packages:
     resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
     engines: {node: '>= 0.4'}
 
-  hast-util-from-html@2.0.3:
-    resolution: {integrity: sha512-CUSRHXyKjzHov8yKsQjGOElXy/3EKpyX56ELnkHH34vDVw1N1XSQ1ZcAvTyAPtGqLTuKP/uxM+aLkSPqF/EtMw==}
-
-  hast-util-from-parse5@8.0.3:
-    resolution: {integrity: sha512-3kxEVkEKt0zvcZ3hCRYI8rqrgwtlIOFMWkbclACvjlDw8Li9S2hk/d51OI0nr/gIpdMHNepwgOKqZ/sy0Clpyg==}
-
-  hast-util-parse-selector@4.0.0:
-    resolution: {integrity: sha512-wkQCkSYoOGCRKERFWcxMVMOcYE2K1AaNLU8DXS9arxnLOUEWbOXKXiJUNzEpqZ3JOKpnha3jkFrumEjVliDe7A==}
-
-  hast-util-to-html@9.0.5:
-    resolution: {integrity: sha512-OguPdidb+fbHQSU4Q4ZiLKnzWo8Wwsf5bZfbvu7//a9oTYoqD/fWpe96NuHkoS9h0ccGOTe0C4NGXdtS0iObOw==}
-
-  hast-util-to-string@3.0.1:
-    resolution: {integrity: sha512-XelQVTDWvqcl3axRfI0xSeoVKzyIFPwsAGSLIsKdJKQMXDYJS4WYrBNF/8J7RdhIcFI2BOHgAifggsvsxp/3+A==}
-
-  hast-util-whitespace@3.0.0:
-    resolution: {integrity: sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==}
-
-  hastscript@9.0.1:
-    resolution: {integrity: sha512-g7df9rMFX/SPi34tyGCyUBREQoKkapwdY/T04Qn9TDWfHhAYt4/I0gMVirzK5wEzeUqIjEB+LXC/ypb7Aqno5w==}
-
   help-me@5.0.0:
     resolution: {integrity: sha512-7xgomUX6ADmcYzFik0HzAxh/73YlKR9bmFzf51CZwR+b6YtzU2m0u49hQCqV6SvlqIqsaxovfwdvbnsw3b/zpg==}
 
@@ -4747,9 +4663,6 @@ packages:
     resolution: {integrity: sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==}
     engines: {node: '>=8'}
 
-  html-void-elements@3.0.0:
-    resolution: {integrity: sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==}
-
   humanize-ms@1.2.1:
     resolution: {integrity: sha512-Fl70vYtsAFb/C06PTS9dZBo7ihau+Tu/DNCk/OyHhea07S+aeMWpFFkUaXRa8fI+ScZbEI8dfSxwY7gxZ9SAVQ==}
 
@@ -5149,15 +5062,6 @@ packages:
   md5@2.3.0:
     resolution: {integrity: sha512-T1GITYmFaKuO91vxyoQMFETst+O71VUPEU3ze5GNzDm0OWdP8v1ziTaAEPUr/3kLsY3Sftgz242A1SetQiDL7g==}
 
-  mdast-util-from-markdown@2.0.2:
-    resolution: {integrity: sha512-uZhTV/8NBuw0WHkPTrCqDOl0zVe1BIng5ZtHoDk49ME1qqcjYmmLmOf0gELgcRMxN4w2iuIeVso5/6QymSrgmA==}
-
-  mdast-util-to-hast@13.2.0:
-    resolution: {integrity: sha512-QGYKEuUsYT9ykKBCMOEDLsU5JRObWQusAolFMeko/tYPufNkRffBAQjIE+99jbA87xv6FgmjLtwjh9wBWajwAA==}
-
-  mdast-util-to-string@4.0.0:
-    resolution: {integrity: sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==}
-
   mdn-data@2.12.2:
     resolution: {integrity: sha512-IEn+pegP1aManZuckezWCO+XZQDplx1366JoVhTpMpBB1sPey/SbveZQUosKiKiGYjg1wH4pMlNgXbCiYgihQA==}
 
@@ -5172,69 +5076,6 @@ packages:
   micro-ftch@0.3.1:
     resolution: {integrity: sha512-/0LLxhzP0tfiR5hcQebtudP56gUurs2CLkGarnCiB/OqEyUFQ6U3paQi/tgLv0hBJYt2rnr9MNpxz4fiiugstg==}
 
-  micromark-core-commonmark@2.0.3:
-    resolution: {integrity: sha512-RDBrHEMSxVFLg6xvnXmb1Ayr2WzLAWjeSATAoxwKYJV94TeNavgoIdA0a9ytzDSVzBy2YKFK+emCPOEibLeCrg==}
-
-  micromark-factory-destination@2.0.1:
-    resolution: {integrity: sha512-Xe6rDdJlkmbFRExpTOmRj9N3MaWmbAgdpSrBQvCFqhezUn4AHqJHbaEnfbVYYiexVSs//tqOdY/DxhjdCiJnIA==}
-
-  micromark-factory-label@2.0.1:
-    resolution: {integrity: sha512-VFMekyQExqIW7xIChcXn4ok29YE3rnuyveW3wZQWWqF4Nv9Wk5rgJ99KzPvHjkmPXF93FXIbBp6YdW3t71/7Vg==}
-
-  micromark-factory-space@2.0.1:
-    resolution: {integrity: sha512-zRkxjtBxxLd2Sc0d+fbnEunsTj46SWXgXciZmHq0kDYGnck/ZSGj9/wULTV95uoeYiK5hRXP2mJ98Uo4cq/LQg==}
-
-  micromark-factory-title@2.0.1:
-    resolution: {integrity: sha512-5bZ+3CjhAd9eChYTHsjy6TGxpOFSKgKKJPJxr293jTbfry2KDoWkhBb6TcPVB4NmzaPhMs1Frm9AZH7OD4Cjzw==}
-
-  micromark-factory-whitespace@2.0.1:
-    resolution: {integrity: sha512-Ob0nuZ3PKt/n0hORHyvoD9uZhr+Za8sFoP+OnMcnWK5lngSzALgQYKMr9RJVOWLqQYuyn6ulqGWSXdwf6F80lQ==}
-
-  micromark-util-character@2.1.1:
-    resolution: {integrity: sha512-wv8tdUTJ3thSFFFJKtpYKOYiGP2+v96Hvk4Tu8KpCAsTMs6yi+nVmGh1syvSCsaxz45J6Jbw+9DD6g97+NV67Q==}
-
-  micromark-util-chunked@2.0.1:
-    resolution: {integrity: sha512-QUNFEOPELfmvv+4xiNg2sRYeS/P84pTW0TCgP5zc9FpXetHY0ab7SxKyAQCNCc1eK0459uoLI1y5oO5Vc1dbhA==}
-
-  micromark-util-classify-character@2.0.1:
-    resolution: {integrity: sha512-K0kHzM6afW/MbeWYWLjoHQv1sgg2Q9EccHEDzSkxiP/EaagNzCm7T/WMKZ3rjMbvIpvBiZgwR3dKMygtA4mG1Q==}
-
-  micromark-util-combine-extensions@2.0.1:
-    resolution: {integrity: sha512-OnAnH8Ujmy59JcyZw8JSbK9cGpdVY44NKgSM7E9Eh7DiLS2E9RNQf0dONaGDzEG9yjEl5hcqeIsj4hfRkLH/Bg==}
-
-  micromark-util-decode-numeric-character-reference@2.0.2:
-    resolution: {integrity: sha512-ccUbYk6CwVdkmCQMyr64dXz42EfHGkPQlBj5p7YVGzq8I7CtjXZJrubAYezf7Rp+bjPseiROqe7G6foFd+lEuw==}
-
-  micromark-util-decode-string@2.0.1:
-    resolution: {integrity: sha512-nDV/77Fj6eH1ynwscYTOsbK7rR//Uj0bZXBwJZRfaLEJ1iGBR6kIfNmlNqaqJf649EP0F3NWNdeJi03elllNUQ==}
-
-  micromark-util-encode@2.0.1:
-    resolution: {integrity: sha512-c3cVx2y4KqUnwopcO9b/SCdo2O67LwJJ/UyqGfbigahfegL9myoEFoDYZgkT7f36T0bLrM9hZTAaAyH+PCAXjw==}
-
-  micromark-util-html-tag-name@2.0.1:
-    resolution: {integrity: sha512-2cNEiYDhCWKI+Gs9T0Tiysk136SnR13hhO8yW6BGNyhOC4qYFnwF1nKfD3HFAIXA5c45RrIG1ub11GiXeYd1xA==}
-
-  micromark-util-normalize-identifier@2.0.1:
-    resolution: {integrity: sha512-sxPqmo70LyARJs0w2UclACPUUEqltCkJ6PhKdMIDuJ3gSf/Q+/GIe3WKl0Ijb/GyH9lOpUkRAO2wp0GVkLvS9Q==}
-
-  micromark-util-resolve-all@2.0.1:
-    resolution: {integrity: sha512-VdQyxFWFT2/FGJgwQnJYbe1jjQoNTS4RjglmSjTUlpUMa95Htx9NHeYW4rGDJzbjvCsl9eLjMQwGeElsqmzcHg==}
-
-  micromark-util-sanitize-uri@2.0.1:
-    resolution: {integrity: sha512-9N9IomZ/YuGGZZmQec1MbgxtlgougxTodVwDzzEouPKo3qFWvymFHWcnDi2vzV1ff6kas9ucW+o3yzJK9YB1AQ==}
-
-  micromark-util-subtokenize@2.1.0:
-    resolution: {integrity: sha512-XQLu552iSctvnEcgXw6+Sx75GflAPNED1qx7eBJ+wydBb2KCbRZe+NwvIEEMM83uml1+2WSXpBAcp9IUCgCYWA==}
-
-  micromark-util-symbol@2.0.1:
-    resolution: {integrity: sha512-vs5t8Apaud9N28kgCrRUdEed4UJ+wWNvicHLPxCa9ENlYuAY31M0ETy5y1vA33YoNPDFTghEbnh6efaE8h4x0Q==}
-
-  micromark-util-types@2.0.2:
-    resolution: {integrity: sha512-Yw0ECSpJoViF1qTU4DC6NwtC4aWGt1EkzaQB8KPPyCRR8z9TWeV0HbEFGTO+ZY1wB22zmxnJqhPyTpOVCpeHTA==}
-
-  micromark@4.0.2:
-    resolution: {integrity: sha512-zpe98Q6kvavpCr1NPVSCMebCKfD7CA2NqZ+rykeNhONIJBpc1tFKt9hucLGwha3jNTNI8lHpctWJWoimVF4PfA==}
-
   micromatch@4.0.8:
     resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
     engines: {node: '>=8.6'}
@@ -5451,12 +5292,6 @@ packages:
     resolution: {integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==}
     engines: {node: '>=8'}
 
-  parse-numeric-range@1.3.0:
-    resolution: {integrity: sha512-twN+njEipszzlMJd4ONUYgSfZPDxgHhT9Ahed5uTigpQn90FggW4SA/AIPq/6a149fTbE9qBEcSwE3FAEp6wQQ==}
-
-  parse5@7.3.0:
-    resolution: {integrity: sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==}
-
   path-exists@4.0.0:
     resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
     engines: {node: '>=8'}
@@ -5479,11 +5314,6 @@ packages:
     resolution: {integrity: sha512-nQfWzedTZgeWyy2d8up0DN1TziydR9C1VfQcpF9UaHPYILQtvTrArvnQoAVsa34sT/nD7D94bzy5vJHIGcTM4A==}
     engines: {node: '>=10.0.0'}
 
-  permissionless@0.0.36:
-    resolution: {integrity: sha512-1/+N3zzFn2vjKZm6aol3eXsFO34d68/GAhKypq2iucFEPrgM5sdq3I5sOK+RrKuGIy8/Bix+IoHhtg0XCDPMOA==}
-    peerDependencies:
-      viem: ^2.0.0
-
   picocolors@1.1.1:
     resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
 
@@ -5494,14 +5324,14 @@ packages:
   pino-abstract-transport@0.5.0:
     resolution: {integrity: sha512-+KAgmVeqXYbTtU2FScx1XS3kNyfZ5TrXY07V96QnUSFqo2gAqlvmaxH67Lj7SWazqsMabf+58ctdTcBgnOLUOQ==}
 
-  pino-abstract-transport@1.2.0:
-    resolution: {integrity: sha512-Guhh8EZfPCfH+PMXAb6rKOjGQEoy0xlAIn+irODG5kgfYV+BQ0rGYYWTIel3P5mmyXqkYkPmdIkywsn6QKUR1Q==}
-
   pino-abstract-transport@2.0.0:
     resolution: {integrity: sha512-F63x5tizV6WCh4R6RHyi2Ml+M70DNRXt/+HANowMflpgGFMAym/VKm6G7ZOQRjqN7XbGxK1Lg9t6ZrtzOaivMw==}
 
-  pino-pretty@10.3.1:
-    resolution: {integrity: sha512-az8JbIYeN/1iLj2t0jR9DV48/LQ3RC6hZPpapKPkb84Q+yTidMCpgWxIT3N0flnBDilyBQ1luWNpOeJptjdp/g==}
+  pino-abstract-transport@3.0.0:
+    resolution: {integrity: sha512-wlfUczU+n7Hy/Ha5j9a/gZNy7We5+cXp8YL+X+PG8S0KXxw7n/JXA3c46Y0zQznIJ83URJiwy7Lh56WLokNuxg==}
+
+  pino-pretty@13.1.3:
+    resolution: {integrity: sha512-ttXRkkOz6WWC95KeY9+xxWL6AtImwbyMHrL1mSwqwW9u+vLp/WIElvHvCSDg0xO/Dzrggz1zv3rN5ovTRVowKg==}
     hasBin: true
 
   pino-std-serializers@4.0.0:
@@ -5617,9 +5447,6 @@ packages:
   prop-types@15.8.1:
     resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
 
-  property-information@7.1.0:
-    resolution: {integrity: sha512-TwEZ+X+yCJmYfL7TPUOcvBZ4QfoT5YenQiJuX//0th53DE6w0xxLEtfK3iyryQFddXuvkIk51EEgrJQ0WJkOmQ==}
-
   proxy-compare@2.6.0:
     resolution: {integrity: sha512-8xuCeM3l8yqdmbPoYeLbrAXCBWu19XEYc5/F28f5qOaoAIMyfmBUkl5axiK+x9olUvRlcekvnm98AP9RDngOIw==}
 
@@ -5666,9 +5493,6 @@ packages:
   react-is@17.0.2:
     resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}
 
-  react-is@18.2.0:
-    resolution: {integrity: sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==}
-
   react-is@18.3.1:
     resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==}
 
@@ -5803,24 +5627,6 @@ packages:
     resolution: {integrity: sha512-cnE+y8bz4NhMjISKbgeVJtqNbtf5QpjZP+Bslo+UqkIt9QPnX9q095eiRRASJG1/tz6dlNr6Z5NsBiWYokp6EQ==}
     hasBin: true
 
-  rehype-parse@9.0.1:
-    resolution: {integrity: sha512-ksCzCD0Fgfh7trPDxr2rSylbwq9iYDkSn8TCDmEJ49ljEUBxDVCzCHv7QNzZOfODanX4+bWQ4WZqLCRWYLfhag==}
-
-  rehype-pretty-code@0.12.3:
-    resolution: {integrity: sha512-6NbIit8A3hLrkKBEbNs862jVnTLeIOM2AmM0VZ/MtyHb+OuNMeCa6UZSx6UG4zrobm5tY9efTwhih1exsGYsiw==}
-    engines: {node: '>=18'}
-    peerDependencies:
-      shikiji: ^0.7.0 || ^0.8.0 || ^0.9.0
-
-  rehype-stringify@10.0.1:
-    resolution: {integrity: sha512-k9ecfXHmIPuFVI61B9DeLPN0qFHfawM6RsuX48hoqlaKSF61RskNjSm1lI8PhBEM0MRdLxVVm4WmTqJQccH9mA==}
-
-  remark-parse@11.0.0:
-    resolution: {integrity: sha512-FCxlKLNGknS5ba/1lmpYijMUzX2esxW5xQqjWxw2eHFfS2MSdaHVINFmhjo+qN1WhZhNimq0dZATN9pH0IDrpA==}
-
-  remark-rehype@11.1.2:
-    resolution: {integrity: sha512-Dh7l57ianaEoIpzbp0PC9UKAdCSVklD8E5Rpw7ETfbTl3FqcOOgq5q2LVDhgGCkaBv7p24JXikPdvhhmHvKMsw==}
-
   require-directory@2.1.1:
     resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==}
     engines: {node: '>=0.10.0'}
@@ -5881,8 +5687,8 @@ packages:
   scrypt-js@3.0.1:
     resolution: {integrity: sha512-cdwTTnqPu0Hyvf5in5asVdZocVDTNRmR7XEcJuIzMjJeSHybHl7vpB66AzwTaIg6CLSbtjcxc8fqcySfnTkccA==}
 
-  secure-json-parse@2.7.0:
-    resolution: {integrity: sha512-6aU+Rwsezw7VR8/nyvKTx8QpWH9FrcYiXXlqC4z5d5XQBDRqtbfsRjnwGyqbi3gddNtWHuEk9OANUotL26qKUw==}
+  secure-json-parse@4.1.0:
+    resolution: {integrity: sha512-l4KnYfEyqYJxDwlNVyRfO2E4NTHfMKAWdUuA8J0yve2Dz/E/PdBepY03RvyJpssIpRFwJoCD55wA+mEDs6ByWA==}
 
   semver@6.3.1:
     resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
@@ -5912,14 +5718,6 @@ packages:
     resolution: {integrity: sha512-eX2IQ6nFohW4DbvHIOLRB3MHFpYqaqvXd3Tp5e/T/dSH83fxaNJQRvDMhASmkNTsNTVF2/OOopzRCt7xokgPfg==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
 
-  shikiji-core@0.9.19:
-    resolution: {integrity: sha512-AFJu/vcNT21t0e6YrfadZ+9q86gvPum6iywRyt1OtIPjPFe25RQnYJyxHQPMLKCCWA992TPxmEmbNcOZCAJclw==}
-    deprecated: Deprecated, use @shikijs/core instead
-
-  shikiji@0.9.19:
-    resolution: {integrity: sha512-Kw2NHWktdcdypCj1GkKpXH4o6Vxz8B8TykPlPuLHOGSV8VkhoCLcFOH4k19K4LXAQYRQmxg+0X/eM+m2sLhAkg==}
-    deprecated: Deprecated, use shiki instead
-
   side-channel-list@1.0.0:
     resolution: {integrity: sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==}
     engines: {node: '>= 0.4'}
@@ -5968,9 +5766,6 @@ packages:
   sonic-boom@2.8.0:
     resolution: {integrity: sha512-kuonw1YOYYNOve5iHdSahXPOK49GqwA+LZhI6Wz/l0rP57iKyXXIHaRagOBHAPmGwJC6od2Z9zgvZ5loSgMlVg==}
 
-  sonic-boom@3.8.1:
-    resolution: {integrity: sha512-y4Z8LCDBuum+PBP3lSV7RHrXscqksve/bi0as7mhwVnBW+/wUqKT/2Kb7um8yqcFy0duYbbPxzt89Zy2nOCaxg==}
-
   sonic-boom@4.2.0:
     resolution: {integrity: sha512-INb7TM37/mAcsGmc9hyyI6+QR3rR1zVRu36B0NeGXKnOOLiZOfER5SA+N7X7k3yUYRzLWafduTDvJAfDswwEww==}
 
@@ -5978,9 +5773,6 @@ packages:
     resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
     engines: {node: '>=0.10.0'}
 
-  space-separated-tokens@2.0.2:
-    resolution: {integrity: sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==}
-
   split-on-first@1.1.0:
     resolution: {integrity: sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw==}
     engines: {node: '>=6'}
@@ -6016,16 +5808,13 @@ packages:
   string_decoder@1.3.0:
     resolution: {integrity: sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==}
 
-  stringify-entities@4.0.4:
-    resolution: {integrity: sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==}
-
   strip-ansi@6.0.1:
     resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
     engines: {node: '>=8'}
 
-  strip-json-comments@3.1.1:
-    resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
-    engines: {node: '>=8'}
+  strip-json-comments@5.0.3:
+    resolution: {integrity: sha512-1tB5mhVo7U+ETBKNf92xT4hrQa3pm0MZ0PQvuDnWgAAGHDsfp4lPSpiS6psrSiet87wyGPh9ft6wmhOMQ0hDiw==}
+    engines: {node: '>=14.16'}
 
   styled-jsx@5.1.6:
     resolution: {integrity: sha512-qSVyDTeMotdvQYoHWLNGwRFJHC+i+ZvdBRYosOFgC+Wg1vx4frN2/RG/NA7SYqqvKNLf39P2LSRA2pu6n0XYZA==}
@@ -6147,9 +5936,6 @@ packages:
   tr46@0.0.3:
     resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
 
-  trim-lines@3.0.1:
-    resolution: {integrity: sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==}
-
   trough@2.2.0:
     resolution: {integrity: sha512-tmMpK00BjZiUyVyvrBK7knerNgmgvcV/KLVyuma/SC+TQN167GrMRciANTz09+k3zW8L8t60jWO1GpfkZdjTaw==}
 
@@ -6235,21 +6021,9 @@ packages:
   unified@11.0.5:
     resolution: {integrity: sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA==}
 
-  unist-util-is@6.0.0:
-    resolution: {integrity: sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==}
-
-  unist-util-position@5.0.0:
-    resolution: {integrity: sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==}
-
   unist-util-stringify-position@4.0.0:
     resolution: {integrity: sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==}
 
-  unist-util-visit-parents@6.0.1:
-    resolution: {integrity: sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw==}
-
-  unist-util-visit@5.0.0:
-    resolution: {integrity: sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==}
-
   unstorage@1.16.1:
     resolution: {integrity: sha512-gdpZ3guLDhz+zWIlYP1UwQ259tG5T5vYRzDaHMkQ1bBY1SQPutvZnrRjTFaWUUpseErJIgAZS51h6NOcZVZiqQ==}
     peerDependencies:
@@ -6414,9 +6188,6 @@ packages:
       react:
         optional: true
 
-  vfile-location@5.0.3:
-    resolution: {integrity: sha512-5yXvWDEgqeiYiBe1lbxYF7UMAIm/IcopxMHrMQDq3nvKcjPKIhZklUKL+AE7J7uApI4kwe2snsK+eI6UTj9EHg==}
-
   vfile-message@4.0.3:
     resolution: {integrity: sha512-QTHzsGd1EhbZs4AsQ20JX1rC3cOlt/IWJruk893DfLRr57lcnOeMaWG4K0JrRta4mIJZKth2Au3mM3u03/JWKw==}
 
@@ -6453,9 +6224,6 @@ packages:
       typescript:
         optional: true
 
-  web-namespaces@2.0.1:
-    resolution: {integrity: sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ==}
-
   web-vitals@3.5.2:
     resolution: {integrity: sha512-c0rhqNcHXRkY/ogGDJQxZ9Im9D19hDihbzSQJrsioex+KnFgmMzBiy57Z1EjkhX/+OjyBpclDCzz2ITtjokFmg==}
 
@@ -6609,9 +6377,6 @@ packages:
       use-sync-external-store:
         optional: true
 
-  zwitch@2.0.4:
-    resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
-
 snapshots:
 
   '@adraffy/ens-normalize@1.11.0': {}
@@ -11814,10 +11579,7 @@ snapshots:
   '@types/debug@4.1.12':
     dependencies:
       '@types/ms': 2.1.0
-
-  '@types/hast@3.0.4':
-    dependencies:
-      '@types/unist': 3.0.3
+    optional: true
 
   '@types/identity-obj-proxy@3.0.2': {}
 
@@ -11831,11 +11593,8 @@ snapshots:
 
   '@types/lodash@4.17.20': {}
 
-  '@types/mdast@4.0.4':
-    dependencies:
-      '@types/unist': 3.0.3
-
-  '@types/ms@2.1.0': {}
+  '@types/ms@2.1.0':
+    optional: true
 
   '@types/node@12.20.55':
     optional: true
@@ -11876,8 +11635,6 @@ snapshots:
       '@types/node': 22.17.2
     optional: true
 
-  '@ungap/structured-clone@1.3.0': {}
-
   '@uniswap/permit2-sdk@1.4.0(bufferutil@4.0.9)(utf-8-validate@5.0.10)':
     dependencies:
       ethers: 5.8.0(bufferutil@4.0.9)(utf-8-validate@5.0.10)
@@ -12689,6 +12446,7 @@ snapshots:
   abort-controller@3.0.0:
     dependencies:
       event-target-shim: 5.0.1
+    optional: true
 
   aes-js@3.0.0: {}
 
@@ -12889,8 +12647,6 @@ snapshots:
 
   caniuse-lite@1.0.30001735: {}
 
-  ccount@2.0.1: {}
-
   chalk@4.1.2:
     dependencies:
       ansi-styles: 4.3.0
@@ -12899,12 +12655,6 @@ snapshots:
   chalk@5.6.2:
     optional: true
 
-  character-entities-html4@2.1.0: {}
-
-  character-entities-legacy@3.0.0: {}
-
-  character-entities@2.0.2: {}
-
   charenc@0.0.2:
     optional: true
 
@@ -12959,8 +12709,6 @@ snapshots:
       delayed-stream: 1.0.0
     optional: true
 
-  comma-separated-tokens@2.0.3: {}
-
   commander@14.0.0:
     optional: true
 
@@ -13098,10 +12846,6 @@ snapshots:
 
   decimal.js@10.6.0: {}
 
-  decode-named-character-reference@1.2.0:
-    dependencies:
-      character-entities: 2.0.2
-
   decode-uri-component@0.2.2:
     optional: true
 
@@ -13180,15 +12924,6 @@ snapshots:
       '@babel/runtime': 7.28.3
       csstype: 3.1.3
 
-  downshift@9.0.10(react@18.3.1):
-    dependencies:
-      '@babel/runtime': 7.28.3
-      compute-scroll-into-view: 3.1.1
-      prop-types: 15.8.1
-      react: 18.3.1
-      react-is: 18.2.0
-      tslib: 2.8.1
-
   dunder-proto@1.0.1:
     dependencies:
       call-bind-apply-helpers: 1.0.2
@@ -13252,8 +12987,6 @@ snapshots:
       graceful-fs: 4.2.11
       tapable: 2.3.0
 
-  entities@6.0.1: {}
-
   env-paths@2.2.1: {}
 
   error-ex@1.3.2:
@@ -13383,7 +13116,8 @@ snapshots:
       - bufferutil
       - utf-8-validate
 
-  event-target-shim@5.0.1: {}
+  event-target-shim@5.0.1:
+    optional: true
 
   eventemitter2@6.4.9:
     optional: true
@@ -13407,7 +13141,7 @@ snapshots:
   eyes@0.1.8:
     optional: true
 
-  fast-copy@3.0.2: {}
+  fast-copy@4.0.1: {}
 
   fast-deep-equal@3.1.3: {}
 
@@ -13610,60 +13344,6 @@ snapshots:
     dependencies:
       function-bind: 1.1.2
 
-  hast-util-from-html@2.0.3:
-    dependencies:
-      '@types/hast': 3.0.4
-      devlop: 1.1.0
-      hast-util-from-parse5: 8.0.3
-      parse5: 7.3.0
-      vfile: 6.0.3
-      vfile-message: 4.0.3
-
-  hast-util-from-parse5@8.0.3:
-    dependencies:
-      '@types/hast': 3.0.4
-      '@types/unist': 3.0.3
-      devlop: 1.1.0
-      hastscript: 9.0.1
-      property-information: 7.1.0
-      vfile: 6.0.3
-      vfile-location: 5.0.3
-      web-namespaces: 2.0.1
-
-  hast-util-parse-selector@4.0.0:
-    dependencies:
-      '@types/hast': 3.0.4
-
-  hast-util-to-html@9.0.5:
-    dependencies:
-      '@types/hast': 3.0.4
-      '@types/unist': 3.0.3
-      ccount: 2.0.1
-      comma-separated-tokens: 2.0.3
-      hast-util-whitespace: 3.0.0
-      html-void-elements: 3.0.0
-      mdast-util-to-hast: 13.2.0
-      property-information: 7.1.0
-      space-separated-tokens: 2.0.2
-      stringify-entities: 4.0.4
-      zwitch: 2.0.4
-
-  hast-util-to-string@3.0.1:
-    dependencies:
-      '@types/hast': 3.0.4
-
-  hast-util-whitespace@3.0.0:
-    dependencies:
-      '@types/hast': 3.0.4
-
-  hastscript@9.0.1:
-    dependencies:
-      '@types/hast': 3.0.4
-      comma-separated-tokens: 2.0.3
-      hast-util-parse-selector: 4.0.0
-      property-information: 7.1.0
-      space-separated-tokens: 2.0.2
-
   help-me@5.0.0: {}
 
   hmac-drbg@1.0.1:
@@ -13679,8 +13359,6 @@ snapshots:
 
   html-tags@3.3.1: {}
 
-  html-void-elements@3.0.0: {}
-
   humanize-ms@1.2.1:
     dependencies:
       ms: 2.1.3
@@ -14040,39 +13718,6 @@ snapshots:
       is-buffer: 1.1.6
     optional: true
 
-  mdast-util-from-markdown@2.0.2:
-    dependencies:
-      '@types/mdast': 4.0.4
-      '@types/unist': 3.0.3
-      decode-named-character-reference: 1.2.0
-      devlop: 1.1.0
-      mdast-util-to-string: 4.0.0
-      micromark: 4.0.2
-      micromark-util-decode-numeric-character-reference: 2.0.2
-      micromark-util-decode-string: 2.0.1
-      micromark-util-normalize-identifier: 2.0.1
-      micromark-util-symbol: 2.0.1
-      micromark-util-types: 2.0.2
-      unist-util-stringify-position: 4.0.0
-    transitivePeerDependencies:
-      - supports-color
-
-  mdast-util-to-hast@13.2.0:
-    dependencies:
-      '@types/hast': 3.0.4
-      '@types/mdast': 4.0.4
-      '@ungap/structured-clone': 1.3.0
-      devlop: 1.1.0
-      micromark-util-sanitize-uri: 2.0.1
-      trim-lines: 3.0.1
-      unist-util-position: 5.0.0
-      unist-util-visit: 5.0.0
-      vfile: 6.0.3
-
-  mdast-util-to-string@4.0.0:
-    dependencies:
-      '@types/mdast': 4.0.4
-
   mdn-data@2.12.2: {}
 
   meow@13.2.0: {}
@@ -14082,139 +13727,6 @@ snapshots:
   micro-ftch@0.3.1:
     optional: true
 
-  micromark-core-commonmark@2.0.3:
-    dependencies:
-      decode-named-character-reference: 1.2.0
-      devlop: 1.1.0
-      micromark-factory-destination: 2.0.1
-      micromark-factory-label: 2.0.1
-      micromark-factory-space: 2.0.1
-      micromark-factory-title: 2.0.1
-      micromark-factory-whitespace: 2.0.1
-      micromark-util-character: 2.1.1
-      micromark-util-chunked: 2.0.1
-      micromark-util-classify-character: 2.0.1
-      micromark-util-html-tag-name: 2.0.1
-      micromark-util-normalize-identifier: 2.0.1
-      micromark-util-resolve-all: 2.0.1
-      micromark-util-subtokenize: 2.1.0
-      micromark-util-symbol: 2.0.1
-      micromark-util-types: 2.0.2
-
-  micromark-factory-destination@2.0.1:
-    dependencies:
-      micromark-util-character: 2.1.1
-      micromark-util-symbol: 2.0.1
-      micromark-util-types: 2.0.2
-
-  micromark-factory-label@2.0.1:
-    dependencies:
-      devlop: 1.1.0
-      micromark-util-character: 2.1.1
-      micromark-util-symbol: 2.0.1
-      micromark-util-types: 2.0.2
-
-  micromark-factory-space@2.0.1:
-    dependencies:
-      micromark-util-character: 2.1.1
-      micromark-util-types: 2.0.2
-
-  micromark-factory-title@2.0.1:
-    dependencies:
-      micromark-factory-space: 2.0.1
-      micromark-util-character: 2.1.1
-      micromark-util-symbol: 2.0.1
-      micromark-util-types: 2.0.2
-
-  micromark-factory-whitespace@2.0.1:
-    dependencies:
-      micromark-factory-space: 2.0.1
-      micromark-util-character: 2.1.1
-      micromark-util-symbol: 2.0.1
-      micromark-util-types: 2.0.2
-
-  micromark-util-character@2.1.1:
-    dependencies:
-      micromark-util-symbol: 2.0.1
-      micromark-util-types: 2.0.2
-
-  micromark-util-chunked@2.0.1:
-    dependencies:
-      micromark-util-symbol: 2.0.1
-
-  micromark-util-classify-character@2.0.1:
-    dependencies:
-      micromark-util-character: 2.1.1
-      micromark-util-symbol: 2.0.1
-      micromark-util-types: 2.0.2
-
-  micromark-util-combine-extensions@2.0.1:
-    dependencies:
-      micromark-util-chunked: 2.0.1
-      micromark-util-types: 2.0.2
-
-  micromark-util-decode-numeric-character-reference@2.0.2:
-    dependencies:
-      micromark-util-symbol: 2.0.1
-
-  micromark-util-decode-string@2.0.1:
-    dependencies:
-      decode-named-character-reference: 1.2.0
-      micromark-util-character: 2.1.1
-      micromark-util-decode-numeric-character-reference: 2.0.2
-      micromark-util-symbol: 2.0.1
-
-  micromark-util-encode@2.0.1: {}
-
-  micromark-util-html-tag-name@2.0.1: {}
-
-  micromark-util-normalize-identifier@2.0.1:
-    dependencies:
-      micromark-util-symbol: 2.0.1
-
-  micromark-util-resolve-all@2.0.1:
-    dependencies:
-      micromark-util-types: 2.0.2
-
-  micromark-util-sanitize-uri@2.0.1:
-    dependencies:
-      micromark-util-character: 2.1.1
-      micromark-util-encode: 2.0.1
-      micromark-util-symbol: 2.0.1
-
-  micromark-util-subtokenize@2.1.0:
-    dependencies:
-      devlop: 1.1.0
-      micromark-util-chunked: 2.0.1
-      micromark-util-symbol: 2.0.1
-      micromark-util-types: 2.0.2
-
-  micromark-util-symbol@2.0.1: {}
-
-  micromark-util-types@2.0.2: {}
-
-  micromark@4.0.2:
-    dependencies:
-      '@types/debug': 4.1.12
-      debug: 4.4.1
-      decode-named-character-reference: 1.2.0
-      devlop: 1.1.0
-      micromark-core-commonmark: 2.0.3
-      micromark-factory-space: 2.0.1
-      micromark-util-character: 2.1.1
-      micromark-util-chunked: 2.0.1
-      micromark-util-combine-extensions: 2.0.1
-      micromark-util-decode-numeric-character-reference: 2.0.2
-      micromark-util-encode: 2.0.1
-      micromark-util-normalize-identifier: 2.0.1
-      micromark-util-resolve-all: 2.0.1
-      micromark-util-sanitize-uri: 2.0.1
-      micromark-util-subtokenize: 2.1.0
-      micromark-util-symbol: 2.0.1
-      micromark-util-types: 2.0.2
-    transitivePeerDependencies:
-      - supports-color
-
   micromatch@4.0.8:
     dependencies:
       braces: 3.0.3
@@ -14476,12 +13988,6 @@ snapshots:
       json-parse-even-better-errors: 2.3.1
       lines-and-columns: 1.2.4
 
-  parse-numeric-range@1.3.0: {}
-
-  parse5@7.3.0:
-    dependencies:
-      entities: 6.0.1
-
   path-exists@4.0.0: {}
 
   path-parse@1.0.7: {}
@@ -14499,10 +14005,6 @@ snapshots:
     dependencies:
       web-vitals: 3.5.2
 
-  permissionless@0.0.36(viem@2.40.2(bufferutil@4.0.9)(typescript@5.9.3)(utf-8-validate@5.0.10)(zod@3.25.76)):
-    dependencies:
-      viem: 2.40.2(bufferutil@4.0.9)(typescript@5.9.3)(utf-8-validate@5.0.10)(zod@3.25.76)
-
   picocolors@1.1.1: {}
 
   picomatch@2.3.1: {}
@@ -14513,31 +14015,29 @@ snapshots:
       split2: 4.2.0
     optional: true
 
-  pino-abstract-transport@1.2.0:
+  pino-abstract-transport@2.0.0:
     dependencies:
-      readable-stream: 4.7.0
       split2: 4.2.0
 
-  pino-abstract-transport@2.0.0:
+  pino-abstract-transport@3.0.0:
     dependencies:
       split2: 4.2.0
 
-  pino-pretty@10.3.1:
+  pino-pretty@13.1.3:
     dependencies:
       colorette: 2.0.20
       dateformat: 4.6.3
-      fast-copy: 3.0.2
+      fast-copy: 4.0.1
       fast-safe-stringify: 2.1.1
       help-me: 5.0.0
       joycon: 3.1.1
       minimist: 1.2.8
       on-exit-leak-free: 2.1.2
-      pino-abstract-transport: 1.2.0
+      pino-abstract-transport: 3.0.0
       pump: 3.0.3
-      readable-stream: 4.7.0
-      secure-json-parse: 2.7.0
-      sonic-boom: 3.8.1
-      strip-json-comments: 3.1.1
+      secure-json-parse: 4.1.0
+      sonic-boom: 4.2.0
+      strip-json-comments: 5.0.3
 
   pino-std-serializers@4.0.0:
     optional: true
@@ -14653,7 +14153,8 @@ snapshots:
 
   process-warning@5.0.0: {}
 
-  process@0.11.10: {}
+  process@0.11.10:
+    optional: true
 
   prop-types@15.8.1:
     dependencies:
@@ -14661,8 +14162,6 @@ snapshots:
       object-assign: 4.1.1
       react-is: 16.13.1
 
-  property-information@7.1.0: {}
-
   proxy-compare@2.6.0:
     optional: true
 
@@ -14711,8 +14210,6 @@ snapshots:
 
   react-is@17.0.2: {}
 
-  react-is@18.2.0: {}
-
   react-is@18.3.1: {}
 
   react-remove-scroll-bar@2.3.8(@types/react@18.3.23)(react@18.3.1):
@@ -14818,6 +14315,7 @@ snapshots:
       events: 3.3.0
       process: 0.11.10
       string_decoder: 1.3.0
+    optional: true
 
   readdirp@4.1.2: {}
 
@@ -14873,45 +14371,6 @@ snapshots:
     dependencies:
       jsesc: 3.0.2
 
-  rehype-parse@9.0.1:
-    dependencies:
-      '@types/hast': 3.0.4
-      hast-util-from-html: 2.0.3
-      unified: 11.0.5
-
-  rehype-pretty-code@0.12.3(shikiji@0.9.19):
-    dependencies:
-      '@types/hast': 3.0.4
-      hast-util-to-string: 3.0.1
-      parse-numeric-range: 1.3.0
-      rehype-parse: 9.0.1
-      shikiji: 0.9.19
-      unified: 11.0.5
-      unist-util-visit: 5.0.0
-
-  rehype-stringify@10.0.1:
-    dependencies:
-      '@types/hast': 3.0.4
-      hast-util-to-html: 9.0.5
-      unified: 11.0.5
-
-  remark-parse@11.0.0:
-    dependencies:
-      '@types/mdast': 4.0.4
-      mdast-util-from-markdown: 2.0.2
-      micromark-util-types: 2.0.2
-      unified: 11.0.5
-    transitivePeerDependencies:
-      - supports-color
-
-  remark-rehype@11.1.2:
-    dependencies:
-      '@types/hast': 3.0.4
-      '@types/mdast': 4.0.4
-      mdast-util-to-hast: 13.2.0
-      unified: 11.0.5
-      vfile: 6.0.3
-
   require-directory@2.1.1: {}
 
   require-from-string@2.0.2: {}
@@ -14953,7 +14412,8 @@ snapshots:
   safe-buffer@5.1.2:
     optional: true
 
-  safe-buffer@5.2.1: {}
+  safe-buffer@5.2.1:
+    optional: true
 
   safe-regex-test@1.1.0:
     dependencies:
@@ -14973,7 +14433,7 @@ snapshots:
 
   scrypt-js@3.0.1: {}
 
-  secure-json-parse@2.7.0: {}
+  secure-json-parse@4.1.0: {}
 
   semver@6.3.1: {}
 
@@ -15053,12 +14513,6 @@ snapshots:
       '@img/sharp-win32-x64': 0.34.3
     optional: true
 
-  shikiji-core@0.9.19: {}
-
-  shikiji@0.9.19:
-    dependencies:
-      shikiji-core: 0.9.19
-
   side-channel-list@1.0.0:
     dependencies:
       es-errors: 1.3.0
@@ -15130,18 +14584,12 @@ snapshots:
       atomic-sleep: 1.0.0
     optional: true
 
-  sonic-boom@3.8.1:
-    dependencies:
-      atomic-sleep: 1.0.0
-
   sonic-boom@4.2.0:
     dependencies:
       atomic-sleep: 1.0.0
 
   source-map-js@1.2.1: {}
 
-  space-separated-tokens@2.0.2: {}
-
   split-on-first@1.1.0:
     optional: true
 
@@ -15180,17 +14628,13 @@ snapshots:
   string_decoder@1.3.0:
     dependencies:
       safe-buffer: 5.2.1
-
-  stringify-entities@4.0.4:
-    dependencies:
-      character-entities-html4: 2.1.0
-      character-entities-legacy: 3.0.0
+    optional: true
 
   strip-ansi@6.0.1:
     dependencies:
       ansi-regex: 5.0.1
 
-  strip-json-comments@3.1.1: {}
+  strip-json-comments@5.0.3: {}
 
   styled-jsx@5.1.6(@babel/core@7.28.3)(react@18.3.1):
     dependencies:
@@ -15329,8 +14773,6 @@ snapshots:
 
   tr46@0.0.3: {}
 
-  trim-lines@3.0.1: {}
-
   trough@2.2.0: {}
 
   trpc-cli@0.12.1(@trpc/server@11.7.2(typescript@5.9.3))(zod@4.1.13):
@@ -15409,29 +14851,10 @@ snapshots:
       trough: 2.2.0
       vfile: 6.0.3
 
-  unist-util-is@6.0.0:
-    dependencies:
-      '@types/unist': 3.0.3
-
-  unist-util-position@5.0.0:
-    dependencies:
-      '@types/unist': 3.0.3
-
   unist-util-stringify-position@4.0.0:
     dependencies:
       '@types/unist': 3.0.3
 
-  unist-util-visit-parents@6.0.1:
-    dependencies:
-      '@types/unist': 3.0.3
-      unist-util-is: 6.0.0
-
-  unist-util-visit@5.0.0:
-    dependencies:
-      '@types/unist': 3.0.3
-      unist-util-is: 6.0.0
-      unist-util-visit-parents: 6.0.1
-
   unstorage@1.16.1(idb-keyval@6.2.2):
     dependencies:
       anymatch: 3.1.3
@@ -15533,11 +14956,6 @@ snapshots:
       '@types/react': 18.3.23
       react: 18.3.1
 
-  vfile-location@5.0.3:
-    dependencies:
-      '@types/unist': 3.0.3
-      vfile: 6.0.3
-
   vfile-message@4.0.3:
     dependencies:
       '@types/unist': 3.0.3
@@ -15640,8 +15058,6 @@ snapshots:
       - immer
       - porto
 
-  web-namespaces@2.0.1: {}
-
   web-vitals@3.5.2: {}
 
   webextension-polyfill@0.10.0:
@@ -15763,5 +15179,3 @@ snapshots:
       react: 18.3.1
       use-sync-external-store: 1.4.0(react@18.3.1)
     optional: true
-
-  zwitch@2.0.4: {}
diff --git a/src/components/Borrow/AddCollateralAndBorrow.tsx b/src/components/Borrow/AddCollateralAndBorrow.tsx
index 25c94ae1..a686a347 100644
--- a/src/components/Borrow/AddCollateralAndBorrow.tsx
+++ b/src/components/Borrow/AddCollateralAndBorrow.tsx
@@ -2,7 +2,7 @@ import { useState, useEffect, useCallback } from 'react';
 import { Switch } from '@heroui/react';
 import { ReloadIcon } from '@radix-ui/react-icons';
 import { useConnection } from 'wagmi';
-import { Button } from '@/components/common';
+import { Button } from '@/components/ui/button';
 import { LTVWarning } from '@/components/common/LTVWarning';
 import { MarketDetailsBlock } from '@/components/common/MarketDetailsBlock';
 import Input from '@/components/Input/Input';
@@ -315,15 +315,15 @@ export function AddCollateralAndBorrow({
               {isConnected ? (
                 needSwitchChain ? (
                   <Button
-                    onPress={switchToNetwork}
+                    onClick={switchToNetwork}
                     className="min-w-32"
-                    variant="solid"
+                    variant="surface"
                   >
                     Switch Chain
                   </Button>
                 ) : (!permit2Authorized && !useEth) || (!usePermit2Setting && !isApproved) ? (
                   <Button
-                    isDisabled={
+                    disabled={
                       !isConnected ||
                       isLoadingPermit2 ||
                       borrowPending ||
@@ -333,15 +333,15 @@ export function AddCollateralAndBorrow({
                       borrowAmount === BigInt(0) ||
                       newLTV >= lltv
                     }
-                    onPress={() => void approveAndBorrow()}
+                    onClick={() => void approveAndBorrow()}
                     className="min-w-32"
-                    variant="cta"
+                    variant="primary"
                   >
                     Approve and Borrow
                   </Button>
                 ) : (
                   <Button
-                    isDisabled={
+                    disabled={
                       !isConnected ||
                       borrowPending ||
                       collateralInputError !== null ||
@@ -349,9 +349,9 @@ export function AddCollateralAndBorrow({
                       (collateralAmount === BigInt(0) && borrowAmount === BigInt(0)) ||
                       newLTV >= lltv
                     }
-                    onPress={() => void signAndBorrow()}
+                    onClick={() => void signAndBorrow()}
                     className="min-w-32"
-                    variant="cta"
+                    variant="primary"
                   >
                     {collateralAmount > 0n && borrowAmount == 0n ? 'Add Collateral' : 'Borrow'}
                   </Button>
diff --git a/src/components/Borrow/WithdrawCollateralAndRepay.tsx b/src/components/Borrow/WithdrawCollateralAndRepay.tsx
index 6e1ccd12..aa45ea37 100644
--- a/src/components/Borrow/WithdrawCollateralAndRepay.tsx
+++ b/src/components/Borrow/WithdrawCollateralAndRepay.tsx
@@ -1,7 +1,7 @@
 import { useMemo, useState, useEffect, useCallback } from 'react';
 import { ReloadIcon } from '@radix-ui/react-icons';
 import { useConnection } from 'wagmi';
-import { Button } from '@/components/common';
+import { Button } from '@/components/ui/button';
 import { LTVWarning } from '@/components/common/LTVWarning';
 import Input from '@/components/Input/Input';
 import AccountConnect from '@/components/layout/header/AccountConnect';
@@ -304,15 +304,15 @@ export function WithdrawCollateralAndRepay({
             {isConnected ? (
               needSwitchChain ? (
                 <Button
-                  onPress={switchToNetwork}
+                  onClick={switchToNetwork}
                   className="min-w-32"
-                  variant="solid"
+                  variant="surface"
                 >
                   Switch Chain
                 </Button>
               ) : (
                 <Button
-                  isDisabled={
+                  disabled={
                     !isConnected ||
                     repayPending ||
                     withdrawInputError !== null ||
@@ -321,7 +321,7 @@ export function WithdrawCollateralAndRepay({
                     newLTV >= lltv ||
                     isLoadingPermit2
                   }
-                  onPress={() => {
+                  onClick={() => {
                     if (!isApproved && !permit2Authorized) {
                       void approveAndRepay();
                     } else {
@@ -329,7 +329,7 @@ export function WithdrawCollateralAndRepay({
                     }
                   }}
                   className="min-w-32"
-                  variant="cta"
+                  variant="primary"
                 >
                   {isLoadingPermit2
                     ? 'Loading...'
diff --git a/src/components/BorrowModal.tsx b/src/components/BorrowModal.tsx
index 25042c27..829beadb 100644
--- a/src/components/BorrowModal.tsx
+++ b/src/components/BorrowModal.tsx
@@ -2,7 +2,7 @@ import { useState } from 'react';
 import { LuArrowRightLeft } from 'react-icons/lu';
 import { useConnection, useReadContract, useBalance } from 'wagmi';
 import { erc20Abi } from 'viem';
-import { Button } from '@/components/common/Button';
+import { Button } from '@/components/ui/button';
 import { Modal, ModalHeader, ModalBody } from '@/components/common/Modal';
 import type { Market, MarketPosition } from '@/utils/types';
 import { AddCollateralAndBorrow } from './Borrow/AddCollateralAndBorrow';
@@ -92,9 +92,9 @@ export function BorrowModal({ market, onOpenChange, oraclePrice, refetch, isRefr
         actions={
           hasPosition ? (
             <Button
-              variant="light"
+              variant="ghost"
               size="sm"
-              onPress={() => setMode(mode === 'borrow' ? 'repay' : 'borrow')}
+              onClick={() => setMode(mode === 'borrow' ? 'repay' : 'borrow')}
               className="flex items-center gap-1.5"
             >
               <LuArrowRightLeft className="h-3 w-3 rotate-90" />
diff --git a/src/components/Info/info.tsx b/src/components/Info/info.tsx
index a047d410..b69720ec 100644
--- a/src/components/Info/info.tsx
+++ b/src/components/Info/info.tsx
@@ -60,11 +60,16 @@ const levelToIcon = (level: string) => {
  */
 export function Info({ description, level, title }: { description: string; level: string; title?: string }) {
   return (
-    <div className={`flex items-center rounded-sm ${levelToCellColor(level)} p-4 opacity-80`}>
+    <div className={`flex max-w-full items-start gap-2 rounded-sm ${levelToCellColor(level)} p-3 opacity-80`}>
       {levelToIcon(level)}
-      <div>
-        <h2 className="font-bold">{title}</h2>
-        <p>{description}</p>
+      <div className="min-w-0 flex-1">
+        {title && <h2 className="font-bold">{title}</h2>}
+        <p
+          className="text-sm leading-tight hyphens-auto"
+          style={{ wordBreak: 'break-word', overflowWrap: 'anywhere' }}
+        >
+          {description}
+        </p>
       </div>
     </div>
   );
diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx
index cccd0aad..a195d1b0 100644
--- a/src/components/Input/Input.tsx
+++ b/src/components/Input/Input.tsx
@@ -2,7 +2,7 @@ import { useCallback, useState, useEffect } from 'react';
 
 import { parseUnits } from 'viem';
 import { formatBalance } from '@/utils/balance';
-import { Button } from '../common';
+import { Button } from '@/components/ui/button';
 
 type InputProps = {
   decimals: number;
@@ -113,7 +113,7 @@ export default function Input({
           <Button
             size="xs"
             onClick={handleDismissError}
-            variant="secondary"
+            variant="default"
           >
             Ignore
           </Button>
diff --git a/src/components/RiskNotificationModal.tsx b/src/components/RiskNotificationModal.tsx
index 82ef717a..351c2918 100644
--- a/src/components/RiskNotificationModal.tsx
+++ b/src/components/RiskNotificationModal.tsx
@@ -1,7 +1,8 @@
 'use client';
 
 import { useState, useEffect } from 'react';
-import { Button, Checkbox } from '@heroui/react';
+import { Checkbox } from '@heroui/react';
+import { Button } from '@/components/ui/button';
 import { usePathname } from 'next/navigation';
 import { PiButterflyDuotone } from 'react-icons/pi';
 import { Modal, ModalHeader, ModalBody, ModalFooter } from '@/components/common/Modal';
@@ -72,8 +73,8 @@ export default function RiskNotificationModal() {
       <ModalFooter>
         <Button
           className="bg-monarch-orange text-white"
-          onPress={handleConfirm}
-          isDisabled={!isChecked}
+          onClick={handleConfirm}
+          disabled={!isChecked}
         >
           Confirm and Proceed
         </Button>
diff --git a/src/components/SupplyModalContent.tsx b/src/components/SupplyModalContent.tsx
index a87d7fdf..bfc9e823 100644
--- a/src/components/SupplyModalContent.tsx
+++ b/src/components/SupplyModalContent.tsx
@@ -11,7 +11,7 @@ import { formatBalance } from '@/utils/balance';
 import { getNativeTokenSymbol } from '@/utils/networks';
 import { isWrappedNativeToken } from '@/utils/tokens';
 import type { Market } from '@/utils/types';
-import { Button } from './common';
+import { Button } from '@/components/ui/button';
 import { SupplyProcessModal } from './SupplyProcessModal';
 
 type SupplyModalContentProps = {
@@ -147,27 +147,27 @@ export function SupplyModalContent({ onClose, market, refetch, onAmountChange }:
 
                     {needSwitchChain ? (
                       <Button
-                        onPress={switchToNetwork}
+                        onClick={switchToNetwork}
                         className="ml-2 min-w-32"
-                        variant="secondary"
+                        variant="default"
                       >
                         Switch Chain
                       </Button>
                     ) : (!permit2Authorized && !useEth) || (!usePermit2Setting && !isApproved) ? (
                       <Button
                         disabled={!isConnected || isLoadingPermit2 || supplyPending}
-                        onPress={() => void approveAndSupply()}
+                        onClick={() => void approveAndSupply()}
                         className="ml-2 min-w-32"
-                        variant="cta"
+                        variant="primary"
                       >
                         Supply
                       </Button>
                     ) : (
                       <Button
                         disabled={!isConnected || supplyPending || inputError !== null || !supplyAmount}
-                        onPress={() => void signAndSupply()}
+                        onClick={() => void signAndSupply()}
                         className="ml-2 min-w-32"
-                        variant="cta"
+                        variant="primary"
                       >
                         Supply
                       </Button>
diff --git a/src/components/WithdrawModalContent.tsx b/src/components/WithdrawModalContent.tsx
index 267e0349..f0d38957 100644
--- a/src/components/WithdrawModalContent.tsx
+++ b/src/components/WithdrawModalContent.tsx
@@ -12,7 +12,7 @@ import { formatBalance, formatReadable, min } from '@/utils/balance';
 import { getMorphoAddress } from '@/utils/morpho';
 import type { SupportedNetworks } from '@/utils/networks';
 import type { Market, MarketPosition } from '@/utils/types';
-import { Button } from './common';
+import { Button } from '@/components/ui/button';
 
 type WithdrawModalContentProps = {
   position?: MarketPosition | null;
@@ -147,18 +147,18 @@ export function WithdrawModalContent({ position, market, onClose, refetch, onAmo
                 </div>
                 {needSwitchChain ? (
                   <Button
-                    onPress={switchToNetwork}
+                    onClick={switchToNetwork}
                     className="ml-2 min-w-32"
-                    variant="secondary"
+                    variant="default"
                   >
                     Switch Chain
                   </Button>
                 ) : (
                   <Button
-                    isDisabled={!isConnected || isConfirming || !withdrawAmount}
-                    onPress={() => void withdraw()}
+                    disabled={!isConnected || isConfirming || !withdrawAmount}
+                    onClick={() => void withdraw()}
                     className="ml-2 min-w-32"
-                    variant="cta"
+                    variant="primary"
                   >
                     Withdraw
                   </Button>
diff --git a/src/components/common/Button.tsx b/src/components/common/Button.tsx
deleted file mode 100644
index c71233e3..00000000
--- a/src/components/common/Button.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import type React from 'react';
-import { extendVariants, Button as NextUIButton } from '@heroui/react';
-
-export const Button = extendVariants(NextUIButton, {
-  variants: {
-    // Main variant types that define the button's purpose and behavior
-    variant: {
-      default: 'bg-surface hover:bg-surface/80 transition-all duration-200 ease-in-out', // Default surface-colored button
-      cta: 'bg-monarch-orange text-white hover:bg-monarch-orange/80 transition-all duration-200 ease-in-out', // Primary CTA with orange background
-      secondary: 'bg-hovered text-foreground ',
-      interactive: 'bg-hovered text-foreground hover:bg-primary hover:text-white transition-all duration-200 ease-in-out', // Starts subtle, strong hover effect
-      ghost: 'bg-transparent hover:bg-surface/5 transition-all duration-200 ease-in-out', // Most subtle variant
-      subtle: 'bg-surface shadow-sm hover:shadow text-foreground hover:bg-default-100 transition-all duration-200 ease-in-out', // Subtle button with shadow, background and shadow change on hover
-    },
-    // Size variants
-    size: {
-      xs: 'px-1.5 py-1 text-xs min-w-[40px] h-6',
-      sm: 'px-1.5 py-1 text-xs min-w-[64px] h-8',
-      md: 'px-4 py-2 text-sm min-w-[80px] h-10',
-      lg: 'px-6 py-3 text-md min-w-[96px] h-12',
-    },
-    // Rounded corners
-    radius: {
-      none: 'rounded-none',
-      base: 'rounded-sm',
-    },
-    // Full width option
-    fullWidth: {
-      true: 'w-full',
-    },
-    // Loading state
-    isLoading: {
-      true: 'cursor-not-allowed',
-    },
-  },
-  defaultVariants: {
-    variant: 'default',
-    size: 'md',
-    radius: 'base',
-    fullWidth: false,
-  },
-  compoundVariants: [
-    // Disabled state
-    {
-      isDisabled: 'true',
-      class: 'opacity-50 cursor-not-allowed pointer-events-none',
-    },
-    // Loading state
-    {
-      isLoading: true,
-      class: 'gap-2 [&>span]:opacity-0 [&>svg]:opacity-0 [&>*:not(.loading-spinner)]:opacity-0',
-    },
-  ],
-});
-
-export type ButtonProps = React.ComponentProps<typeof Button>;
-
-Button.displayName = 'Button';
diff --git a/src/components/common/MarketSelectionModal.tsx b/src/components/common/MarketSelectionModal.tsx
index 4b1aafc7..6e3bf5a2 100644
--- a/src/components/common/MarketSelectionModal.tsx
+++ b/src/components/common/MarketSelectionModal.tsx
@@ -1,7 +1,7 @@
 import { useState, useMemo } from 'react';
 import { FiSearch } from 'react-icons/fi';
 import type { Address } from 'viem';
-import { Button } from '@/components/common/Button';
+import { Button } from '@/components/ui/button';
 import { MarketsTableWithSameLoanAsset } from '@/components/common/MarketsTableWithSameLoanAsset';
 import { Modal, ModalHeader, ModalBody, ModalFooter } from '@/components/common/Modal';
 import { Spinner } from '@/components/common/Spinner';
@@ -141,17 +141,17 @@ export function MarketSelectionModal({
             </p>
             <div className="flex items-center gap-2">
               <Button
-                variant="subtle"
+                variant="default"
                 size="sm"
-                onPress={() => onOpenChange(false)}
+                onClick={() => onOpenChange(false)}
               >
                 Cancel
               </Button>
               <Button
-                variant="cta"
+                variant="primary"
                 size="sm"
-                isDisabled={selectedCount === 0}
-                onPress={handleConfirm}
+                disabled={selectedCount === 0}
+                onClick={handleConfirm}
               >
                 {buttonText}
               </Button>
@@ -160,9 +160,9 @@ export function MarketSelectionModal({
         ) : (
           <div className="flex w-full justify-end">
             <Button
-              variant="subtle"
+              variant="default"
               size="sm"
-              onPress={() => onOpenChange(false)}
+              onClick={() => onOpenChange(false)}
             >
               Cancel
             </Button>
diff --git a/src/components/common/MarketsTableWithSameLoanAsset.tsx b/src/components/common/MarketsTableWithSameLoanAsset.tsx
index 33733536..11094620 100644
--- a/src/components/common/MarketsTableWithSameLoanAsset.tsx
+++ b/src/components/common/MarketsTableWithSameLoanAsset.tsx
@@ -6,7 +6,7 @@ import Image from 'next/image';
 import { FaSearch } from 'react-icons/fa';
 import { IoHelpCircleOutline } from 'react-icons/io5';
 import { LuX } from 'react-icons/lu';
-import { Button } from '@/components/common';
+import { Button } from '@/components/ui/button';
 import { SuppliedAssetFilterCompactSwitch } from '@/components/common/SuppliedAssetFilterCompactSwitch';
 import { TablePagination } from '@/components/common/TablePagination';
 import { useTokens } from '@/components/providers/TokenProvider';
@@ -491,7 +491,7 @@ function MarketRow({
             <Checkbox
               isSelected={isSelected}
               onValueChange={onToggle}
-              isDisabled={disabled}
+              disabled={disabled}
               className="h-6 w-4 cursor-pointer rounded border-gray-300 text-primary"
               onSelect={(e) => e.stopPropagation()}
               size="sm"
@@ -1005,9 +1005,9 @@ export function MarketsTableWithSameLoanAsset({
           />
           {showSettings && (
             <Button
-              variant="light"
+              variant="ghost"
               size="sm"
-              onPress={() => setShowSettingsModal(true)}
+              onClick={() => setShowSettingsModal(true)}
               className="min-w-0 px-2"
             >
               <GearIcon className="h-4 w-4" />
diff --git a/src/components/common/SuppliedAssetFilterCompactSwitch.tsx b/src/components/common/SuppliedAssetFilterCompactSwitch.tsx
index effb3566..3d9111cc 100644
--- a/src/components/common/SuppliedAssetFilterCompactSwitch.tsx
+++ b/src/components/common/SuppliedAssetFilterCompactSwitch.tsx
@@ -3,7 +3,7 @@
 import { useMemo } from 'react';
 import { Divider, Tooltip, useDisclosure } from '@heroui/react';
 import { FiFilter } from 'react-icons/fi';
-import { Button } from '@/components/common/Button';
+import { Button } from '@/components/ui/button';
 import { FilterRow, FilterSection } from '@/components/common/FilterComponents';
 import { IconSwitch } from '@/components/common/IconSwitch';
 import { Modal, ModalHeader, ModalBody, ModalFooter } from '@/components/common/Modal';
@@ -90,12 +90,11 @@ export function SuppliedAssetFilterCompactSwitch({
         }
       >
         <Button
-          isIconOnly
-          variant="light"
+          variant="ghost"
           size="sm"
           className="min-w-0 px-2 text-secondary"
           aria-label="Market filters"
-          onPress={onOpen}
+          onClick={onOpen}
         >
           <FiFilter
             size={14}
@@ -213,16 +212,16 @@ export function SuppliedAssetFilterCompactSwitch({
             </ModalBody>
             <ModalFooter className="justify-between">
               <Button
-                variant="flat"
+                variant="ghost"
                 size="sm"
-                onPress={handleCustomize}
+                onClick={handleCustomize}
               >
                 Customize Filters
               </Button>
               <Button
                 color="primary"
                 size="sm"
-                onPress={close}
+                onClick={close}
               >
                 Done
               </Button>
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
index 8d412f78..719afc52 100644
--- a/src/components/common/index.ts
+++ b/src/components/common/index.ts
@@ -1,4 +1,3 @@
-export * from './Button';
 export * from './TransactionIdentity';
 export * from './AccountIdentity';
 export * from './AccountActionsPopover';
diff --git a/src/components/layout/header/AccountConnect.tsx b/src/components/layout/header/AccountConnect.tsx
index 0c943a24..334f4ffb 100644
--- a/src/components/layout/header/AccountConnect.tsx
+++ b/src/components/layout/header/AccountConnect.tsx
@@ -1,7 +1,7 @@
 import { useAppKit } from '@reown/appkit/react';
 import { useConnection } from 'wagmi';
 import { useEffect, useState } from 'react';
-import { Button } from '@/components/common';
+import { Button } from '@/components/ui/button';
 import { useConnectRedirect } from '@/components/providers/ConnectRedirectProvider';
 import { AccountDropdown } from './AccountDropdown';
 
@@ -41,9 +41,9 @@ function AccountConnect({ onConnectPath }: { onConnectPath?: string }) {
         </div>
       ) : (
         <Button
-          onPress={handleConnect}
+          onClick={handleConnect}
           type="button"
-          variant="cta"
+          variant="primary"
         >
           Connect
         </Button>
diff --git a/src/components/settings/BlacklistedMarketsModal.tsx b/src/components/settings/BlacklistedMarketsModal.tsx
index 78176cc5..c30add26 100644
--- a/src/components/settings/BlacklistedMarketsModal.tsx
+++ b/src/components/settings/BlacklistedMarketsModal.tsx
@@ -4,7 +4,7 @@ import React, { useMemo } from 'react';
 import { Divider } from '@heroui/react';
 import { FiPlus, FiX } from 'react-icons/fi';
 import { MdBlockFlipped } from 'react-icons/md';
-import { Button } from '@/components/common';
+import { Button } from '@/components/ui/button';
 import { Modal, ModalHeader, ModalBody, ModalFooter } from '@/components/common/Modal';
 import { MarketIdentity, MarketIdentityMode, MarketIdentityFocus } from '@/components/MarketIdentity';
 import { useMarkets } from '@/contexts/MarketsContext';
@@ -124,9 +124,9 @@ export function BlacklistedMarketsModal({ isOpen, onOpenChange }: BlacklistedMar
                           </div>
                           <Button
                             size="sm"
-                            variant="secondary"
-                            onPress={() => removeBlacklistedMarket(market.uniqueKey)}
-                            isDisabled={isDefault}
+                            variant="default"
+                            onClick={() => removeBlacklistedMarket(market.uniqueKey)}
+                            disabled={isDefault}
                             className="shrink-0"
                           >
                             <FiX className="h-4 w-4" />
@@ -192,8 +192,8 @@ export function BlacklistedMarketsModal({ isOpen, onOpenChange }: BlacklistedMar
                           </div>
                           <Button
                             size="sm"
-                            variant="secondary"
-                            onPress={() => addBlacklistedMarket(market.uniqueKey, market.morphoBlue.chain.id)}
+                            variant="default"
+                            onClick={() => addBlacklistedMarket(market.uniqueKey, market.morphoBlue.chain.id)}
                             className="shrink-0"
                           >
                             <FiPlus className="h-4 w-4" />
@@ -208,9 +208,9 @@ export function BlacklistedMarketsModal({ isOpen, onOpenChange }: BlacklistedMar
                     <div className="mt-4 flex items-center justify-center gap-2">
                       <Button
                         size="sm"
-                        variant="secondary"
-                        onPress={() => setCurrentPage((p) => Math.max(1, p - 1))}
-                        isDisabled={currentPage === 1}
+                        variant="default"
+                        onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
+                        disabled={currentPage === 1}
                       >
                         Previous
                       </Button>
@@ -219,9 +219,9 @@ export function BlacklistedMarketsModal({ isOpen, onOpenChange }: BlacklistedMar
                       </span>
                       <Button
                         size="sm"
-                        variant="secondary"
-                        onPress={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}
-                        isDisabled={currentPage === totalPages}
+                        variant="default"
+                        onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}
+                        disabled={currentPage === totalPages}
                       >
                         Next
                       </Button>
@@ -233,8 +233,8 @@ export function BlacklistedMarketsModal({ isOpen, onOpenChange }: BlacklistedMar
           </ModalBody>
           <ModalFooter>
             <Button
-              variant="secondary"
-              onPress={onClose}
+              variant="default"
+              onClick={onClose}
               size="sm"
             >
               Close
diff --git a/src/components/settings/CustomRpcSettings.tsx b/src/components/settings/CustomRpcSettings.tsx
index 59015b0a..e54f99dc 100644
--- a/src/components/settings/CustomRpcSettings.tsx
+++ b/src/components/settings/CustomRpcSettings.tsx
@@ -2,7 +2,7 @@
 
 import { useState } from 'react';
 import Image from 'next/image';
-import { Button } from '@/components/common/Button';
+import { Button } from '@/components/ui/button';
 import { Modal, ModalBody, ModalHeader } from '@/components/common/Modal';
 import { Spinner } from '@/components/common/Spinner';
 import { useStyledToast } from '@/hooks/useStyledToast';
@@ -183,10 +183,10 @@ function RpcModal({ isOpen, onClose }: { isOpen: boolean; onClose: () => void })
         onClose={handleClose}
         actions={
           <Button
-            variant="secondary"
+            variant="default"
             size="sm"
-            onPress={handleResetAll}
-            isDisabled={Object.keys(customRpcUrls).length === 0}
+            onClick={handleResetAll}
+            disabled={Object.keys(customRpcUrls).length === 0}
           >
             Reset All
           </Button>
@@ -261,10 +261,10 @@ function RpcModal({ isOpen, onClose }: { isOpen: boolean; onClose: () => void })
                     }`}
                   />
                   <Button
-                    variant="cta"
+                    variant="primary"
                     size="sm"
-                    onPress={() => void handleSave()}
-                    isDisabled={isValidating}
+                    onClick={() => void handleSave()}
+                    disabled={isValidating}
                     className="absolute right-1 top-1/2 flex min-w-[60px] -translate-y-1/2 transform items-center justify-center"
                   >
                     {isValidating ? (
@@ -284,9 +284,9 @@ function RpcModal({ isOpen, onClose }: { isOpen: boolean; onClose: () => void })
               {isUsingCustomRpc(selectedNetwork) && (
                 <div className="flex justify-center">
                   <Button
-                    variant="secondary"
+                    variant="default"
                     size="sm"
-                    onPress={handleReset}
+                    onClick={handleReset}
                   >
                     Reset to Default
                   </Button>
@@ -329,9 +329,9 @@ export function AdvancedRpcSettings() {
             </div>
 
             <Button
-              variant="interactive"
+              variant="surface"
               size="sm"
-              onPress={() => setIsModalOpen(true)}
+              onClick={() => setIsModalOpen(true)}
             >
               Edit
             </Button>
diff --git a/src/components/settings/TrustedVaultsModal.tsx b/src/components/settings/TrustedVaultsModal.tsx
index 16530ec5..af8612e9 100644
--- a/src/components/settings/TrustedVaultsModal.tsx
+++ b/src/components/settings/TrustedVaultsModal.tsx
@@ -5,7 +5,7 @@ import { Divider, Input, Spinner } from '@heroui/react';
 import { FiChevronDown, FiChevronUp } from 'react-icons/fi';
 import { GoShield, GoShieldCheck } from 'react-icons/go';
 import { IoWarningOutline } from 'react-icons/io5';
-import { Button } from '@/components/common';
+import { Button } from '@/components/ui/button';
 import { IconSwitch } from '@/components/common/IconSwitch';
 import { Modal, ModalHeader, ModalBody, ModalFooter } from '@/components/common/Modal';
 import { NetworkIcon } from '@/components/common/NetworkIcon';
@@ -163,15 +163,15 @@ export default function TrustedVaultsModal({ isOpen, onOpenChange, userTrustedVa
               <div className="flex flex-wrap gap-2">
                 <Button
                   size="sm"
-                  variant="flat"
-                  onPress={handleSelectAll}
+                  variant="ghost"
+                  onClick={handleSelectAll}
                 >
                   Select All
                 </Button>
                 <Button
                   size="sm"
-                  variant="flat"
-                  onPress={handleDeselectAll}
+                  variant="ghost"
+                  onClick={handleDeselectAll}
                 >
                   Deselect All
                 </Button>
@@ -286,8 +286,8 @@ export default function TrustedVaultsModal({ isOpen, onOpenChange, userTrustedVa
           </ModalBody>
           <ModalFooter>
             <Button
-              variant="secondary"
-              onPress={onClose}
+              variant="default"
+              onClick={onClose}
               size="sm"
             >
               Close
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index 07569cb2..a4945d66 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -5,28 +5,77 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import { cn } from '@/lib/utils';
 
 const buttonVariants = cva(
-  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-sm text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-all duration-200 ease-in-out border-0 outline-0 ring-0 focus:border-0 focus:outline-0 focus:ring-0 active:border-0 active:outline-0 active:ring-0 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 opacity-95 hover:opacity-100',
   {
     variants: {
       variant: {
-        default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
-        destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
-        outline: 'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
-        secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
-        ghost: 'hover:bg-accent hover:text-accent-foreground',
-        link: 'text-primary underline-offset-4 hover:underline',
+        // For buttons on background areas
+        default: 'bg-surface text-foreground hover:bg-surface/80 shadow-sm hover:shadow active:scale-[0.98]',
+
+        // Primary action button
+        primary: 'bg-primary text-primary-foreground hover:bg-primary/90 shadow-sm hover:shadow active:scale-[0.98]',
+
+        // For buttons on surface-colored backgrounds (cards, modals, tables)
+        surface: 'bg-hovered text-foreground hover:bg-default-200 active:bg-default-300 active:scale-[0.98]',
+
+        // For icon buttons and minimal actions (hover styles in compoundVariants below)
+        ghost: 'bg-transparent text-foreground',
       },
       size: {
-        default: 'h-9 px-4 py-2',
-        sm: 'h-8 px-3 text-xs',
-        lg: 'h-10 px-8',
-        icon: 'h-9 w-9',
+        xs: 'h-6 px-1.5 py-1 text-xs min-w-[40px]',
+        sm: 'h-8 px-1.5 py-1 text-xs min-w-[64px]',
+        md: 'h-10 px-4 py-2 text-sm min-w-[80px]',
+        default: 'h-10 px-4 py-2 text-sm min-w-[80px]',
+        lg: 'h-12 px-6 py-3 text-base min-w-[96px]',
+        icon: 'h-8 w-8 [&_svg]:size-3.5 p-2',
+      },
+      radius: {
+        none: 'rounded-none',
+        base: 'rounded-sm',
+      },
+      fullWidth: {
+        true: 'w-full',
+        false: '',
+      },
+      isLoading: {
+        true: 'cursor-not-allowed',
+        false: '',
       },
     },
     defaultVariants: {
       variant: 'default',
       size: 'default',
+      radius: 'base',
+      fullWidth: false,
+      isLoading: false,
     },
+    compoundVariants: [
+      {
+        isLoading: true,
+        className: 'gap-2 [&>span]:opacity-0 [&>svg]:opacity-0 [&>*:not(.loading-spinner)]:opacity-0',
+      },
+      // Ghost button hover effects - darker backgrounds for better feedback
+      {
+        variant: 'ghost',
+        size: 'icon',
+        className: 'hover:bg-surface/70 active:bg-surface hover:scale-105 active:scale-100',
+      },
+      {
+        variant: 'ghost',
+        size: 'sm',
+        className: 'hover:bg-surface/50 active:bg-surface/70 hover:scale-[1.02] active:scale-100',
+      },
+      {
+        variant: 'ghost',
+        size: 'md',
+        className: 'hover:bg-default-100 active:bg-default-200 hover:scale-[1.01] active:scale-100',
+      },
+      {
+        variant: 'ghost',
+        size: 'lg',
+        className: 'hover:bg-default-100 active:bg-default-200 hover:scale-[1.01] active:scale-100',
+      },
+    ],
   },
 );
 
@@ -35,16 +84,19 @@ export type ButtonProps = {
 } & React.ButtonHTMLAttributes<HTMLButtonElement> &
   VariantProps<typeof buttonVariants>;
 
-const Button = forwardRef<HTMLButtonElement, ButtonProps>(({ className, variant, size, asChild = false, ...props }, ref) => {
-  const Comp = asChild ? Slot : 'button';
-  return (
-    <Comp
-      className={cn(buttonVariants({ variant, size, className }))}
-      ref={ref}
-      {...props}
-    />
-  );
-});
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, radius, fullWidth, isLoading, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button';
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, radius, fullWidth, isLoading, className }))}
+        ref={ref}
+        disabled={isLoading ? true : props.disabled}
+        {...props}
+      />
+    );
+  },
+);
 Button.displayName = 'Button';
 
 export { Button, buttonVariants };
diff --git a/src/components/ui/pagination.tsx b/src/components/ui/pagination.tsx
index 127e0d72..e42a7759 100644
--- a/src/components/ui/pagination.tsx
+++ b/src/components/ui/pagination.tsx
@@ -44,7 +44,7 @@ function PaginationLink({ className, isActive, size = 'icon', children, ...props
       aria-current={isActive ? 'page' : undefined}
       className={cn(
         buttonVariants({
-          variant: isActive ? 'outline' : 'ghost',
+          variant: isActive ? 'surface' : 'ghost',
           size,
         }),
         className,
diff --git a/src/fonts/KodeMono/KodeMono-VariableFont_wght.ttf b/src/fonts/KodeMono/KodeMono-VariableFont_wght.ttf
deleted file mode 100755
index 1501a8cd..00000000
Binary files a/src/fonts/KodeMono/KodeMono-VariableFont_wght.ttf and /dev/null differ
diff --git a/tailwind.config.ts.deprecated b/tailwind.config.ts.deprecated
deleted file mode 100644
index 4b5d7e9f..00000000
--- a/tailwind.config.ts.deprecated
+++ /dev/null
@@ -1,125 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unsafe-call */
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
-
-import type { Config } from 'tailwindcss';
-import plugin from 'tailwindcss/plugin';
-const { heroui } = require('@heroui/theme');
-
-const MONARCH_PRIMARY = '#f45f2d';
-
-const config: Config = {
-  content: [
-    './app/**/*.{js,ts,jsx,tsx,mdx}',
-    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
-    './node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}',
-  ],
-  theme: {
-    container: {
-      center: true,
-      screens: {
-        sm: '640px',
-        md: '768px',
-        lg: '1024px',
-        xl: '1280px',
-      },
-    },
-    extend: {
-      backgroundImage: {
-        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
-        'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
-        'gradient-2': 'linear-gradient(270deg, #f55925 0%, #D75986 100%)',
-      },
-      gridTemplateColumns: {
-        // Coffee column grid
-        '2CoffeeLg': '1fr 380px',
-        '2CoffeeMd': '1fr 330px',
-
-        // Mint colum grid
-        '2mint': '420px 1fr',
-      },
-      colors: {
-        primary: MONARCH_PRIMARY,
-        'monarch-primary': MONARCH_PRIMARY,
-        border: 'hsl(var(--border))',
-        input: 'hsl(var(--input))',
-        ring: 'hsl(var(--ring))',
-        background: 'hsl(var(--background))',
-        foreground: 'hsl(var(--foreground))',
-        // primary: {
-        //   DEFAULT: 'hsl(var(--primary))',
-        //   foreground: 'hsl(var(--primary-foreground))',
-        // },
-        secondary: {
-          DEFAULT: 'hsl(var(--secondary))',
-          foreground: 'hsl(var(--secondary-foreground))',
-        },
-        destructive: {
-          DEFAULT: 'hsl(var(--destructive))',
-          foreground: 'hsl(var(--destructive-foreground))',
-        },
-        muted: {
-          DEFAULT: 'hsl(var(--muted))',
-          foreground: 'hsl(var(--muted-foreground))',
-        },
-        accent: {
-          DEFAULT: 'hsl(var(--accent))',
-          foreground: 'hsl(var(--accent-foreground))',
-        },
-        popover: {
-          DEFAULT: 'hsl(var(--popover))',
-          foreground: 'hsl(var(--popover-foreground))',
-        },
-        card: {
-          DEFAULT: 'hsl(var(--card))',
-          foreground: 'hsl(var(--card-foreground))',
-        },
-      },
-      fontFamily: {
-        inter: ['var(--font-inter)'],
-        zen: ['var(--font-zen)'],
-        monospace: ['var(--font-monospace)'],
-      },
-      fontWeight: {
-        normal: '400',
-        bold: '700',
-      },
-    },
-  },
-  darkMode: 'class',
-  plugins: [
-    heroui({
-      themes: {
-        light: {
-          layout: {
-            radius: {
-              small: '0.375rem', // rounded
-              medium: '0.375rem', // rounded
-              large: '0.375rem', // rounded
-            },
-          },
-        },
-        dark: {
-          layout: {
-            radius: {
-              small: '0.375rem', // rounded
-              medium: '0.375rem', // rounded
-              large: '0.375rem', // rounded
-            },
-          },
-          colors: {
-            content1: '#222529', // Modal background
-          },
-        },
-      },
-    }),
-    plugin(function ({ addBase }) {
-      addBase({
-        'button, .nextui-button': {
-          '@apply rounded': {}, // This makes all buttons rounded by default
-        },
-      });
-    }),
-  ],
-};
-
-export default config;