diff --git a/app/history/components/HistoryContent.tsx b/app/history/components/HistoryContent.tsx
index 2d9acf3c..03e2619d 100644
--- a/app/history/components/HistoryContent.tsx
+++ b/app/history/components/HistoryContent.tsx
@@ -1,6 +1,7 @@
 'use client';
 
-import PrimaryButton from '@/components/common/PrimaryButton';
+import Link from 'next/link';
+import { Button } from '@/components/common/Button';
 import Header from '@/components/layout/header/Header';
 import LoadingScreen from '@/components/Status/LoadingScreen';
 import useUserPositions from '@/hooks/useUserPositions';
@@ -28,7 +29,11 @@ export default function HistoryContent({ account }: { account: string }) {
         )}
 
         <div className="flex justify-center pt-14">
-          <PrimaryButton href={`/positions/${account}`}>Back to Portfolio</PrimaryButton>
+          <Link href={`/positions/${account}`}>
+            <Button variant="solid" color="primary" className="px-10 py-4 font-zen" size="lg">
+              Back to Portfolio
+            </Button>
+          </Link>
         </div>
       </div>
     </div>
diff --git a/app/home/HomePage.tsx b/app/home/HomePage.tsx
index b5644165..84760f62 100644
--- a/app/home/HomePage.tsx
+++ b/app/home/HomePage.tsx
@@ -1,8 +1,9 @@
 'use client';
 
 import React, { useState, useEffect } from 'react';
+import Link from 'next/link';
 import { useAccount } from 'wagmi';
-import PrimaryButton from '@/components/common/PrimaryButton';
+import { Button } from '@/components/common/Button';
 import Header from '@/components/layout/header/Header';
 
 export default function HomePage() {
@@ -105,12 +106,16 @@ export default function HomePage() {
             </h2>
           </div>
           <div className="mt-8 flex w-full justify-center gap-4 px-4 sm:w-auto sm:flex-row">
-            <PrimaryButton isSecondary href="/info" className="w-full sm:w-auto">
-              Why Monarch
-            </PrimaryButton>
-            <PrimaryButton href={`/positions/${address ?? ''}`} className="w-full sm:w-auto">
-              Get Started
-            </PrimaryButton>
+            <Link href="/info" className="block w-full sm:w-auto">
+              <Button variant="default" className="w-full px-10 py-4 font-zen" size="lg">
+                Why Monarch
+              </Button>
+            </Link>
+            <Link href={`/positions/${address ?? ''}`} className="block w-full sm:w-auto">
+              <Button variant="cta" className="w-full px-10 py-4 font-zen" size="lg">
+                Launch App
+              </Button>
+            </Link>
           </div>
         </section>
       </main>
diff --git a/app/market/[chainId]/[marketid]/content.tsx b/app/market/[chainId]/[marketid]/content.tsx
index 66965adf..d971e9cb 100644
--- a/app/market/[chainId]/[marketid]/content.tsx
+++ b/app/market/[chainId]/[marketid]/content.tsx
@@ -1,7 +1,6 @@
 'use client';
 
 import { useState, useCallback } from 'react';
-import { Button } from '@nextui-org/button';
 import { Card, CardHeader, CardBody } from '@nextui-org/card';
 import { Spinner } from '@nextui-org/spinner';
 import { ExternalLinkIcon, ChevronLeftIcon } from '@radix-ui/react-icons';
@@ -9,6 +8,7 @@ import Image from 'next/image';
 import Link from 'next/link';
 import { useParams, useRouter, useSearchParams } from 'next/navigation';
 import { formatUnits } from 'viem';
+import { Button } from '@/components/common';
 import { OracleFeedInfo } from '@/components/FeedInfo/OracleFeedInfo';
 import Header from '@/components/layout/header/Header';
 import OracleVendorBadge from '@/components/OracleVendorBadge';
@@ -124,22 +124,20 @@ function MarketContent() {
       <div className="container mx-auto px-4 py-8 pb-4 font-zen">
         {/* navigation bottons */}
         <div className="flex justify-between">
-          <Button
-            onClick={handleBackToMarkets}
-            className="bg-surface mb-4 rounded-md"
-            startContent={<ChevronLeftIcon />}
-          >
+          <Button onClick={handleBackToMarkets} size="md" className="mb-4">
+            <ChevronLeftIcon className="mr-2" />
             Back to Markets
           </Button>
 
           <Button
-            className="bg-surface mb-4 rounded-md"
+            size="md"
+            className="mb-4"
             onClick={() =>
               window.open(getMarketURL(market.uniqueKey, market.morphoBlue.chain.id), '_blank')
             }
-            endContent={<Image src={MORPHO_LOGO} alt="Morpho Logo" width={20} height={20} />}
           >
             View on Morpho Blue
+            <Image src={MORPHO_LOGO} alt="Morpho Logo" width={20} height={20} className="ml-2" />
           </Button>
         </div>
 
diff --git a/app/markets/components/MarketTableBody.tsx b/app/markets/components/MarketTableBody.tsx
index 2892f5f2..a0940b73 100644
--- a/app/markets/components/MarketTableBody.tsx
+++ b/app/markets/components/MarketTableBody.tsx
@@ -1,9 +1,10 @@
 import React from 'react';
-import { Tooltip, Button } from '@nextui-org/react';
+import { Tooltip } from '@nextui-org/react';
 import { motion, AnimatePresence } from 'framer-motion';
 import Image from 'next/image';
 import { FaShieldAlt } from 'react-icons/fa';
 import { GoStarFill, GoStar } from 'react-icons/go';
+import { Button } from '@/components/common/Button';
 import OracleVendorBadge from '@/components/OracleVendorBadge';
 import { formatReadable } from '@/utils/balance';
 import { getNetworkImg } from '@/utils/networks';
@@ -159,7 +160,8 @@ export function MarketTableBody({
                 <div className="flex items-center justify-center">
                   <Button
                     size="sm"
-                    className="rounded-sm bg-opacity-50 p-2 text-xs duration-300 ease-in-out hover:bg-primary"
+                    variant="interactive"
+                    className="text-xs"
                     onClick={() => {
                       setSelectedMarket(item);
                       setShowSupplyModal(true);
diff --git a/app/markets/components/markets.tsx b/app/markets/components/markets.tsx
index bf86f78d..e6ff05b6 100644
--- a/app/markets/components/markets.tsx
+++ b/app/markets/components/markets.tsx
@@ -6,6 +6,7 @@ import storage from 'local-storage-fallback';
 import { useRouter, useSearchParams } from 'next/navigation';
 import { FaSync } from 'react-icons/fa';
 import { toast } from 'react-toastify';
+import { Button } from '@/components/common';
 import Header from '@/components/layout/header/Header';
 import EmptyScreen from '@/components/Status/EmptyScreen';
 import LoadingScreen from '@/components/Status/LoadingScreen';
@@ -395,17 +396,16 @@ export default function Markets() {
           </div>
 
           <div className="mt-4 flex gap-2 lg:mt-0">
-            <button
-              onClick={handleRefresh}
-              type="button"
+            <Button
               disabled={loading || isRefetching}
-              className={`flex items-center gap-2 rounded bg-gray-200 p-2 px-3 text-sm text-secondary transition-colors hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 ${
-                loading || isRefetching ? 'cursor-not-allowed opacity-50' : ''
-              }`}
+              variant="light"
+              size="sm"
+              className="text-secondary"
+              onClick={handleRefresh}
             >
-              <FaSync className={`${loading || isRefetching ? 'animate-spin' : ''}`} size={10} />
+              <FaSync className={`${isRefetching ? 'animate-spin' : ''} mr-2`} size={10} />
               Refresh
-            </button>
+            </Button>
           </div>
         </div>
 
diff --git a/app/markets/components/marketsTable.tsx b/app/markets/components/marketsTable.tsx
index 52e19c91..0a6f4f5a 100644
--- a/app/markets/components/marketsTable.tsx
+++ b/app/markets/components/marketsTable.tsx
@@ -49,7 +49,7 @@ function MarketsTable({
   const totalPages = Math.ceil(markets.length / entriesPerPage);
 
   return (
-    <div className="flex flex-col gap-4">
+    <div className="flex flex-col gap-4 pb-4">
       <div className="w-full overflow-x-auto">
         <table className="responsive w-full rounded-md font-zen">
           <thead className="table-header">
diff --git a/app/positions/components/FromAndToMarkets.tsx b/app/positions/components/FromAndToMarkets.tsx
index a54a8f37..ec560a48 100644
--- a/app/positions/components/FromAndToMarkets.tsx
+++ b/app/positions/components/FromAndToMarkets.tsx
@@ -92,7 +92,7 @@ export function FromAndToMarkets({
       <div className="w-2/5">
         <h3 className="mb-2 text-lg font-semibold">Your Market Positions</h3>
         <Input
-          placeholder="Filter your positions or Market ID"
+          placeholder="Filter with Market ID or Collateral"
           value={fromFilter}
           onChange={(e) => onFromFilterChange(e.target.value)}
           className="mb-2"
@@ -228,7 +228,7 @@ export function FromAndToMarkets({
       <div className="w-3/5">
         <h3 className="mb-2 text-lg font-semibold">Available Markets for Rebalancing</h3>
         <Input
-          placeholder="Filter available markets or Market ID"
+          placeholder="Filter with Market ID or Collateral"
           value={toFilter}
           onChange={(e) => onToFilterChange(e.target.value)}
           className="mb-2"
diff --git a/app/positions/components/PositionsContent.tsx b/app/positions/components/PositionsContent.tsx
index bcf0be9c..cce4c228 100644
--- a/app/positions/components/PositionsContent.tsx
+++ b/app/positions/components/PositionsContent.tsx
@@ -7,6 +7,7 @@ import { useParams } from 'next/navigation';
 import { FaHistory, FaGift, FaPlus, FaCircle } from 'react-icons/fa';
 import { useAccount } from 'wagmi';
 import { Avatar } from '@/components/Avatar/Avatar';
+import { Button } from '@/components/common/Button';
 import Header from '@/components/layout/header/Header';
 import EmptyScreen from '@/components/Status/EmptyScreen';
 import LoadingScreen from '@/components/Status/LoadingScreen';
@@ -64,37 +65,30 @@ export default function Positions() {
             </div>
           </div>
           <div className="flex gap-4">
-            <Link href={`/history/${account}`} className="no-underline">
-              <button
-                type="button"
-                aria-label="View history"
-                className="bg-surface flex items-center gap-2 rounded p-2 font-zen text-sm text-secondary opacity-80 transition-all duration-200 ease-in-out hover:opacity-100"
-              >
-                <FaHistory size={14} />
+            <Link href={`/history/${account}`}>
+              <Button size="md" className="font-zen text-secondary">
+                <FaHistory size={14} className="mr-2" />
                 History
-              </button>
+              </Button>
             </Link>
-            <Link href={`/rewards/${account}`} className="no-underline">
-              <button
-                type="button"
-                aria-label="View rewards"
-                className="bg-surface flex items-center gap-2 rounded p-2 font-zen text-sm text-secondary opacity-80 transition-all duration-200 ease-in-out hover:opacity-100"
-              >
-                <FaGift size={14} />
+            <Link href={`/rewards/${account}`}>
+              <Button size="md" className="font-zen text-secondary">
+                <FaGift size={14} className="mr-2" />
                 Rewards
-              </button>
+              </Button>
             </Link>
             {isOwner && (
-              <Link href="/positions/onboarding" className="no-underline">
-                <button
-                  aria-label="Create a new position"
-                  type="button"
-                  className="bg-monarch-orange hover:bg-monarch-orange/90 flex items-center gap-2 rounded p-2 font-zen text-sm text-white shadow-sm transition-all duration-200 ease-in-out hover:shadow-md"
+              <Link href="/positions/onboarding">
+                <Button
+                  variant="solid"
+                  color="primary"
+                  size="md"
+                  className="font-zen"
                   disabled={account !== address}
                 >
-                  <FaPlus size={14} />
+                  <FaPlus size={14} className="mr-2" />
                   New Position
-                </button>
+                </Button>
               </Link>
             )}
           </div>
@@ -126,13 +120,11 @@ export default function Positions() {
         ) : !hasSuppliedMarkets ? (
           <div className="flex flex-col items-center gap-8">
             <EmptyScreen message="No open supplies. Start lending now!" />
-            <Link href="/positions/onboarding" passHref>
-              <button
-                type="button"
-                className="bg-monarch-orange mx-auto rounded px-8 py-3 font-zen text-white opacity-90 transition-all duration-200 ease-in-out hover:opacity-100"
-              >
+            <Link href="/positions/onboarding">
+              <Button variant="solid" color="primary" size="lg" className="font-zen">
+                <FaPlus size={14} className="mr-2" />
                 Start Lending
-              </button>
+              </Button>
             </Link>
           </div>
         ) : (
diff --git a/app/positions/components/PositionsSummaryTable.tsx b/app/positions/components/PositionsSummaryTable.tsx
index c879c5ae..bdec7514 100644
--- a/app/positions/components/PositionsSummaryTable.tsx
+++ b/app/positions/components/PositionsSummaryTable.tsx
@@ -1,11 +1,12 @@
 import React, { useMemo, useState, useEffect } from 'react';
-import { Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button } from '@nextui-org/react';
+import { Dropdown, DropdownTrigger, DropdownMenu, DropdownItem } from '@nextui-org/react';
 import { ChevronDownIcon, ChevronUpIcon } from '@radix-ui/react-icons';
 import { motion, AnimatePresence } from 'framer-motion';
 import Image from 'next/image';
 import { IoRefreshOutline, IoChevronDownOutline } from 'react-icons/io5';
 import { toast } from 'react-toastify';
 import { useAccount } from 'wagmi';
+import { Button } from '@/components/common/Button';
 import { TokenIcon } from '@/components/TokenIcon';
 import { formatReadable, formatBalance } from '@/utils/balance';
 import { getNetworkImg } from '@/utils/networks';
@@ -230,9 +231,9 @@ export function PositionsSummaryTable({
             <Button
               variant="light"
               size="sm"
-              startContent={<IoChevronDownOutline className="h-4 w-4" />}
               className="font-zen text-secondary opacity-80 transition-all duration-200 ease-in-out hover:opacity-100"
             >
+              <IoChevronDownOutline className="mr-2 h-4 w-4" />
               {earningsPeriod}
             </Button>
           </DropdownTrigger>
@@ -249,10 +250,10 @@ export function PositionsSummaryTable({
         <Button
           variant="light"
           size="sm"
-          startContent={<IoRefreshOutline className="h-4 w-4" />}
           onClick={handleManualRefresh}
           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" />
           Refresh
         </Button>
       </div>
@@ -366,9 +367,8 @@ export function PositionsSummaryTable({
                       <div className="flex items-center justify-center">
                         <Button
                           size="sm"
-                          className={`rounded-sm bg-opacity-50 p-2 text-xs duration-300 ease-in-out ${
-                            isOwner ? 'hover:bg-primary' : 'cursor-not-allowed opacity-50'
-                          }`}
+                          variant="interactive"
+                          className="text-xs"
                           onClick={() => {
                             if (!isOwner) {
                               toast.error('You can only rebalance your own positions');
@@ -377,6 +377,7 @@ export function PositionsSummaryTable({
                             setSelectedGroupedPosition(groupedPosition);
                             setShowRebalanceModal(true);
                           }}
+                          disabled={!isOwner}
                         >
                           Rebalance
                         </Button>
diff --git a/app/positions/components/RebalanceActionInput.tsx b/app/positions/components/RebalanceActionInput.tsx
index aeb189c1..b9028def 100644
--- a/app/positions/components/RebalanceActionInput.tsx
+++ b/app/positions/components/RebalanceActionInput.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
-import { Button } from '@nextui-org/react';
 import { ArrowRightIcon } from '@radix-ui/react-icons';
 import Image from 'next/image';
+import { Button } from '@/components/common';
 import { ERC20Token } from '@/utils/tokens';
 import { GroupedPosition, Market } from '@/utils/types';
 import { MarketBadge } from './MarketBadge';
@@ -59,7 +59,8 @@ export function RebalanceActionInput({
       </div>
       <Button
         onClick={onAddAction}
-        className="ml-4 rounded-sm bg-primary p-2 px-4 font-zen text-white opacity-80 transition-all duration-200 ease-in-out hover:scale-105 hover:opacity-100"
+        variant="cta"
+        isDisabled={!amount || !selectedFromMarketUniqueKey || !selectedToMarketUniqueKey}
       >
         Add Action
       </Button>
diff --git a/app/positions/components/RebalanceCart.tsx b/app/positions/components/RebalanceCart.tsx
index 1bbbc631..61a1825a 100644
--- a/app/positions/components/RebalanceCart.tsx
+++ b/app/positions/components/RebalanceCart.tsx
@@ -1,14 +1,7 @@
 import React from 'react';
-import {
-  Table,
-  TableHeader,
-  TableColumn,
-  TableBody,
-  TableRow,
-  TableCell,
-  Button,
-} from '@nextui-org/react';
+import { Table, TableHeader, TableColumn, TableBody, TableRow, TableCell } from '@nextui-org/react';
 import { formatUnits } from 'viem';
+import { Button } from '@/components/common';
 import { Market } from '@/utils/types';
 import { GroupedPosition, RebalanceAction } from '@/utils/types';
 import { MarketBadge } from './MarketBadge';
@@ -71,10 +64,10 @@ export function RebalanceCart({
               </TableCell>
               <TableCell>
                 <Button
-                  color="danger"
+                  variant="secondary"
                   size="sm"
                   onPress={() => removeRebalanceAction(index)}
-                  className="rounded-sm bg-red-500 p-2 text-xs text-white duration-300 ease-in-out hover:bg-red-600 dark:bg-red-600 dark:hover:bg-red-700"
+                  className="rounded-sm p-2 text-xs duration-300 ease-in-out"
                 >
                   Remove
                 </Button>
diff --git a/app/positions/components/RebalanceModal.tsx b/app/positions/components/RebalanceModal.tsx
index ad579967..6d35f756 100644
--- a/app/positions/components/RebalanceModal.tsx
+++ b/app/positions/components/RebalanceModal.tsx
@@ -5,13 +5,13 @@ import {
   ModalHeader,
   ModalBody,
   ModalFooter,
-  Button,
   Spinner,
 } from '@nextui-org/react';
 import { GrRefresh } from 'react-icons/gr';
 import { toast } from 'react-toastify';
 import { parseUnits, formatUnits } from 'viem';
 import { useAccount, useSwitchChain } from 'wagmi';
+import { Button } from '@/components/common';
 import { useMarkets } from '@/hooks/useMarkets';
 import { usePagination } from '@/hooks/usePagination';
 import { useRebalance } from '@/hooks/useRebalance';
@@ -268,28 +268,28 @@ export function RebalanceModal({
         isDismissable={false}
         size="5xl"
         classNames={{
-          base: 'min-w-[1250px] z-[1000] p-4',
+          base: 'min-w-[1250px] z-[1000] p-4 rounded',
           backdrop: showProcessModal && 'z-[999]',
         }}
       >
         <ModalContent>
           <ModalHeader className="flex items-center justify-between px-8 font-zen text-2xl">
-            <div className="flex items-center gap-2">
+            <div className="flex items-center gap-2 text-2xl">
               Rebalance {groupedPosition.loanAsset ?? 'Unknown'} Position
               {isRefetching && <Spinner size="sm" />}
             </div>
-            <button
+            <Button
+              variant="light"
+              size="sm"
               onClick={handleManualRefresh}
-              disabled={isRefetching}
-              type="button"
-              className="flex items-center gap-2 rounded-md bg-gray-200 px-3 py-1 text-sm text-secondary transition-colors hover:bg-gray-300 disabled:opacity-50 dark:bg-gray-700 dark:hover:bg-gray-600"
+              isDisabled={isRefetching}
             >
               <GrRefresh size={16} />
               Refresh
-            </button>
+            </Button>
           </ModalHeader>
           <ModalBody className="mx-2 font-zen">
-            <div className="mb-4 rounded bg-gray-100 p-4 dark:border-gray-700 dark:bg-gray-800">
+            <div className="py-4">
               <p className="text-sm text-secondary">
                 Optimize your {groupedPosition.loanAsset} lending strategy by redistributing funds
                 across markets, add "Rebalance" actions to fine-tune your portfolio.
@@ -344,18 +344,18 @@ export function RebalanceModal({
           </ModalBody>
           <ModalFooter className="mx-2">
             <Button
-              variant="light"
+              variant="secondary"
               onPress={onClose}
-              className="rounded-sm bg-gray-200 p-4 px-10 font-zen text-secondary opacity-80 transition-all duration-200 ease-in-out hover:scale-105 hover:opacity-100 dark:bg-gray-700 dark:text-gray-300"
+              className="rounded-sm p-4 px-10 font-zen text-secondary duration-200 ease-in-out hover:scale-105"
             >
               Cancel
             </Button>
             <Button
-              color="primary"
+              variant="cta"
               onPress={() => void handleExecuteRebalance()}
               isDisabled={isConfirming || rebalanceActions.length === 0}
               isLoading={isConfirming}
-              className="rounded-sm bg-primary p-4 px-10 font-zen text-white opacity-80 transition-all duration-200 ease-in-out hover:scale-105 hover:opacity-100 disabled:opacity-50 dark:bg-primary"
+              className="rounded-sm p-4 px-10 font-zen text-white duration-200 ease-in-out hover:scale-105 disabled:opacity-50"
             >
               {needSwitchChain ? 'Switch Network & Execute' : 'Execute Rebalance'}
             </Button>
diff --git a/app/positions/components/RebalanceProcessModal.tsx b/app/positions/components/RebalanceProcessModal.tsx
index ac273426..5385095a 100644
--- a/app/positions/components/RebalanceProcessModal.tsx
+++ b/app/positions/components/RebalanceProcessModal.tsx
@@ -65,7 +65,7 @@ export function RebalanceProcessModal({
     <div className="fixed left-0 top-0 z-[1001] flex h-full w-full items-center justify-center bg-black bg-opacity-50">
       <div
         style={{ width: '500px' }}
-        className="bg-surface relative z-50 rounded-md p-12 transition-all duration-500 ease-in-out"
+        className="bg-surface relative z-50 rounded p-12 transition-all duration-500 ease-in-out"
       >
         <button
           type="button"
diff --git a/app/positions/components/SuppliedMarketsDetail.tsx b/app/positions/components/SuppliedMarketsDetail.tsx
index fe9d512a..35606d84 100644
--- a/app/positions/components/SuppliedMarketsDetail.tsx
+++ b/app/positions/components/SuppliedMarketsDetail.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
-import { Tooltip, Button } from '@nextui-org/react';
+import { Tooltip } from '@nextui-org/react';
 import { motion } from 'framer-motion';
 import Link from 'next/link';
 import { IoWarningOutline } from 'react-icons/io5';
+import { Button } from '@/components/common';
 import OracleVendorBadge from '@/components/OracleVendorBadge';
 import { TokenIcon } from '@/components/TokenIcon';
 import { formatReadable, formatBalance } from '@/utils/balance';
@@ -204,9 +205,8 @@ export function SuppliedMarketsDetail({
                   <td data-label="Actions" className="justify-center px-4 py-3">
                     <div className="flex items-center justify-center gap-2">
                       <Button
-                        variant="light"
                         size="sm"
-                        className="rounded-sm bg-opacity-50 p-2 text-xs duration-300 ease-in-out hover:bg-primary"
+                        variant="interactive"
                         onClick={() => {
                           setSelectedPosition(position);
                           setShowWithdrawModal(true);
@@ -215,9 +215,8 @@ export function SuppliedMarketsDetail({
                         Withdraw
                       </Button>
                       <Button
-                        variant="light"
                         size="sm"
-                        className="rounded-sm bg-opacity-50 p-2 text-xs duration-300 ease-in-out hover:bg-primary"
+                        variant="interactive"
                         onClick={() => {
                           setSelectedPosition(position);
                           setShowSupplyModal(true);
diff --git a/app/rewards/components/MarketProgram.tsx b/app/rewards/components/MarketProgram.tsx
index c8dd8f1c..09aa714e 100644
--- a/app/rewards/components/MarketProgram.tsx
+++ b/app/rewards/components/MarketProgram.tsx
@@ -7,6 +7,7 @@ import Link from 'next/link';
 import { toast } from 'react-toastify';
 import { Address } from 'viem';
 import { useAccount, useSwitchChain } from 'wagmi';
+import { Button } from '@/components/common/Button';
 import { DistributionResponseType } from '@/hooks/useRewards';
 import { useTransactionWithToast } from '@/hooks/useTransactionWithToast';
 import { formatReadable, formatBalance } from '@/utils/balance';
@@ -201,16 +202,12 @@ export default function MarketProgram({
                         )}
                       </div>
                     </TableCell>
-                    <TableCell>
-                      <div className="flex justify-end">
-                        <button
-                          type="button"
-                          className={`bg-hovered items-center justify-between rounded-sm p-2 text-xs duration-300 ease-in-out ${
-                            tokenReward.claimable === BigInt(0) || distribution === undefined
-                              ? 'cursor-not-allowed opacity-50'
-                              : 'hover:scale-110 hover:bg-orange-500'
-                          }`}
-                          disabled={
+                    <TableCell align="center">
+                      <div className="flex justify-center">
+                        <Button
+                          variant="interactive"
+                          size="sm"
+                          isDisabled={
                             tokenReward.claimable === BigInt(0) || distribution === undefined
                           }
                           onClick={(e) => {
@@ -237,7 +234,7 @@ export default function MarketProgram({
                           }}
                         >
                           Claim
-                        </button>
+                        </Button>
                       </div>
                     </TableCell>
                   </TableRow>
diff --git a/app/rewards/components/UniformProgram.tsx b/app/rewards/components/UniformProgram.tsx
index f4557145..3797bf76 100644
--- a/app/rewards/components/UniformProgram.tsx
+++ b/app/rewards/components/UniformProgram.tsx
@@ -6,6 +6,7 @@ import Image from 'next/image';
 import { toast } from 'react-toastify';
 import { Address } from 'viem';
 import { useAccount, useSwitchChain } from 'wagmi';
+import { Button } from '@/components/common/Button';
 import { DistributionResponseType } from '@/hooks/useRewards';
 import { useTransactionWithToast } from '@/hooks/useTransactionWithToast';
 import { formatReadable, formatBalance } from '@/utils/balance';
@@ -92,7 +93,7 @@ export default function UniformProgram({
             <TableColumn align="center">Pending</TableColumn>
             <TableColumn align="center">Claimed</TableColumn>
             <TableColumn align="center">Total</TableColumn>
-            <TableColumn align="end">Action</TableColumn>
+            <TableColumn align="center">Action</TableColumn>
           </TableHeader>
           <TableBody>
             {rewardsData.map((reward, index) => (
@@ -157,42 +158,36 @@ export default function UniformProgram({
                     )}
                   </div>
                 </TableCell>
-                <TableCell>
-                  <div className="flex justify-end">
-                    <button
-                      type="button"
-                      className={`bg-hovered items-center justify-between rounded-sm p-2 text-xs duration-300 ease-in-out ${
-                        reward.claimable === BigInt(0) || !reward.distribution
-                          ? 'cursor-not-allowed opacity-50'
-                          : 'hover:scale-110 hover:bg-orange-500'
-                      }`}
-                      disabled={reward.claimable === BigInt(0) || !reward.distribution}
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        if (!account) {
-                          toast.error('Connect wallet');
-                          return;
-                        }
-                        if (!reward.distribution) {
-                          toast.error('No claim data');
-                          return;
-                        }
-                        if (chainId !== reward.asset.chain_id) {
-                          switchChain({ chainId: reward.asset.chain_id });
-                          toast('Click on claim again after switching network');
-                          return;
-                        }
-                        sendTransaction({
-                          account: account as Address,
-                          to: reward.distribution.distributor.address as Address,
-                          data: reward.distribution.tx_data as `0x${string}`,
-                          chainId: reward.distribution.distributor.chain_id,
-                        });
-                      }}
-                    >
-                      Claim
-                    </button>
-                  </div>
+                <TableCell align="center">
+                  <Button
+                    variant="interactive"
+                    size="sm"
+                    isDisabled={reward.claimable === BigInt(0) || !reward.distribution}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      if (!account) {
+                        toast.error('Connect wallet');
+                        return;
+                      }
+                      if (!reward.distribution) {
+                        toast.error('No claim data');
+                        return;
+                      }
+                      if (chainId !== reward.asset.chain_id) {
+                        switchChain({ chainId: reward.asset.chain_id });
+                        toast('Click on claim again after switching network');
+                        return;
+                      }
+                      sendTransaction({
+                        account: account as Address,
+                        to: reward.distribution.distributor.address as Address,
+                        data: reward.distribution.tx_data as `0x${string}`,
+                        chainId: reward.distribution.distributor.chain_id,
+                      });
+                    }}
+                  >
+                    Claim
+                  </Button>
                 </TableCell>
               </TableRow>
             ))}
diff --git a/docs/Styling.md b/docs/Styling.md
index 0d1b8746..b71cd446 100644
--- a/docs/Styling.md
+++ b/docs/Styling.md
@@ -1,11 +1,108 @@
-# Styling and CSS guidelines
+# Styling and CSS Guidelines
 
-## Colors
+## Core Components
 
-- background: `bg-main`
-- card, button: `bg-surface`
+Use these shared components instead of raw HTML elements:
 
-## Tailwind-Compatible Component
+- `Button`: Import from `@/components/common/Button` for all clickable actions
+- `Modal`: For all modal dialogs
+- `Card`: For contained content sections
+- `Typography`: For text elements
 
-- primary: `text-primary`
-- secondary: `text-secondary`
+## Component Guidelines
+
+### Button Component
+
+```typescript
+import { Button } from '@/components/common/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
+
+#### Size Guidelines
+
+- `sm`: Compact buttons (h-8)
+
+  - Use for: Table actions, tight spaces
+  - Default padding: px-3 py-1.5
+
+- `md`: Standard buttons (h-10)
+
+  - Use for: Most general actions
+  - Default padding: px-4 py-2
+
+- `lg`: Large buttons (h-12)
+  - Use for: Primary CTAs, important actions
+  - Default padding: px-6 py-3
+
+#### Common Classes
+
+- Font: `font-zen` for consistent typography
+- Icons: Use `mr-2` for icon spacing when icons are present
+- Transitions: Built into variants, no need to add transition classes
+
+#### Examples
+
+```tsx
+// Primary CTA
+<Button variant="cta" size="lg" className="font-zen">
+  Launch App
+</Button>
+
+// Table Action
+<Button variant="interactive" size="sm">
+  Claim
+</Button>
+
+// Navigation
+<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="ghost" size="sm">
+  <RefreshIcon className="mr-2" />
+  Refresh
+</Button>
+```
+
+2. Modals:
+
+   - Always use `rounded-lg`
+   - Standard padding: `p-6`
+   - Consistent max-width: `max-w-lg`
+
+3. Cards:
+   - Use `rounded-base`
+   - Consistent padding: `p-4`
+   - Standard shadow: `shadow-base`
diff --git a/package.json b/package.json
index 335a3c0b..e0f60157 100644
--- a/package.json
+++ b/package.json
@@ -68,6 +68,7 @@
     "sharp": "^0.33.5",
     "shikiji": "^0.9.17",
     "shikiji-core": "^0.9.17",
+    "tailwind-merge": "^2.5.5",
     "unified": "^11.0.4",
     "viem": "2.x",
     "wagmi": "^2.10.2",
diff --git a/src/components/Button/Button.test.tsx b/src/components/Button/Button.test.tsx
deleted file mode 100644
index 99ca7a11..00000000
--- a/src/components/Button/Button.test.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-/**
- * @jest-environment jsdom
- */
-import React from 'react';
-import { SymbolIcon } from '@radix-ui/react-icons';
-import { render, screen, within } from '@testing-library/react';
-import Button from './Button';
-
-describe('Button', () => {
-  it('should render Button', () => {
-    render(<Button buttonContent="BOAT button" />);
-
-    expect(screen.getByRole('button', { name: 'BOAT button' })).toBeInTheDocument();
-  });
-
-  it('should button with primary styles by default', () => {
-    render(<Button buttonContent="BOAT button" />);
-
-    const primaryClassNames = ['bg-white', 'text-black'];
-    const btnEl = screen.getByRole('button', { name: 'BOAT button' });
-
-    expect(btnEl).toHaveClass(primaryClassNames[0]);
-    expect(btnEl).toHaveClass(primaryClassNames[1]);
-  });
-
-  it('should render disabled button', () => {
-    render(<Button buttonContent="BOAT button" disabled />);
-
-    const btnEl = screen.getByRole('button', { name: 'BOAT button' });
-
-    expect(btnEl).toHaveAttribute('disabled');
-  });
-
-  it('should render icon with text', () => {
-    render(<Button buttonContent="BOAT button" icon={<SymbolIcon data-testid="symbol-icon" />} />);
-
-    const btnEl = screen.getByRole('button', { name: 'BOAT button' });
-
-    expect(within(btnEl).getByTestId('symbol-icon')).toBeInTheDocument();
-  });
-});
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
deleted file mode 100644
index be223ac7..00000000
--- a/src/components/Button/Button.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { MouseEventHandler, ReactNode } from 'react';
-import clsx from 'clsx';
-
-type ButtonProps = {
-  buttonContent: ReactNode | string;
-  type?: HTMLButtonElement['type'];
-  className?: string;
-  onClick?: MouseEventHandler<HTMLButtonElement> | undefined;
-  variant?: 'primary' | 'secondary';
-  disabled?: boolean;
-  icon?: ReactNode;
-  rounded?: boolean;
-};
-
-export default function Button({
-  buttonContent,
-  type = 'button',
-  className,
-  onClick,
-  variant = 'primary',
-  disabled = false,
-  icon,
-  rounded = true,
-}: ButtonProps) {
-  return (
-    <button
-      // eslint-disable-next-line react/button-has-type
-      type={type}
-      onClick={onClick}
-      className={clsx(
-        'flex w-full items-center justify-center',
-        'py-4 text-sm',
-        variant === 'primary' ? 'bg-monarch-white' : 'bg-main',
-        variant === 'primary' ? 'text-black' : 'text-white',
-        disabled && variant === 'primary' ? 'bg-gray-400' : null,
-        disabled && variant === 'secondary' ? 'bg-boat-color-gray-900' : null,
-        rounded ? 'rounded-full' : null,
-        className,
-      )}
-      disabled={disabled}
-    >
-      {icon ? <span className="mr-2">{icon}</span> : null}
-      {buttonContent}
-    </button>
-  );
-}
diff --git a/src/components/SupplyProcessModal.tsx b/src/components/SupplyProcessModal.tsx
index 10d49af1..34345307 100644
--- a/src/components/SupplyProcessModal.tsx
+++ b/src/components/SupplyProcessModal.tsx
@@ -1,12 +1,9 @@
 import React, { useMemo } from 'react';
 import { Cross1Icon } from '@radix-ui/react-icons';
 import { motion, AnimatePresence } from 'framer-motion';
-import Image from 'next/image';
 import { FaCheckCircle, FaCircle } from 'react-icons/fa';
-import { formatUnits } from 'viem';
-import { formatBalance } from '@/utils/balance';
-import { findToken } from '@/utils/tokens';
 import { Market } from '@/utils/types';
+import { MarketAmountBlock } from './common/MarketInfoBlock';
 
 type MarketSupply = {
   market: Market;
@@ -103,7 +100,7 @@ export function SupplyProcessModal({
           initial={{ scale: 0.95 }}
           animate={{ scale: 1 }}
           exit={{ scale: 0.95 }}
-          className="relative w-full max-w-lg rounded-lg bg-white p-4 shadow-xl dark:bg-gray-900"
+          className="relative w-full max-w-lg rounded bg-white p-4 shadow-xl dark:bg-gray-900"
         >
           <button
             type="button"
@@ -122,49 +119,12 @@ export function SupplyProcessModal({
             {/* Market details */}
             <div className="mt-4 space-y-3">
               {supplies.map((supply) => {
-                const collateralToken = findToken(
-                  supply.market.collateralAsset.address,
-                  supply.market.morphoBlue.chain.id,
-                );
                 return (
-                  <div
+                  <MarketAmountBlock
+                    market={supply.market}
+                    amount={supply.amount}
                     key={supply.market.uniqueKey}
-                    className="flex items-center justify-between rounded-lg border border-gray-100 bg-gray-50/50 p-3 dark:border-gray-700 dark:bg-gray-900/50"
-                  >
-                    <div className="flex items-center gap-3">
-                      {collateralToken?.img && (
-                        <div className="overflow-hidden rounded-full">
-                          <Image
-                            src={collateralToken.img}
-                            alt={supply.market.collateralAsset.symbol}
-                            width={32}
-                            height={32}
-                            className="h-8 w-8 rounded-full object-cover"
-                          />
-                        </div>
-                      )}
-                      <div className="flex flex-col">
-                        <div className="flex items-center gap-2">
-                          <span className="font-medium">
-                            {supply.market.collateralAsset.symbol}
-                          </span>
-                          <span className="rounded bg-gray-100 px-1.5 py-0.5 text-xs text-gray-600 dark:bg-gray-800 dark:text-gray-400">
-                            {formatUnits(BigInt(supply.market.lltv), 16)}% LTV
-                          </span>
-                        </div>
-                        <span className="text-xs text-gray-500">
-                          {formatBalance(supply.amount, supply.market.loanAsset.decimals)}{' '}
-                          {tokenSymbol}
-                        </span>
-                      </div>
-                    </div>
-                    <div className="text-right">
-                      <div className="font-mono text-sm">
-                        {(supply.market.state.supplyApy * 100).toFixed(2)}%
-                      </div>
-                      <div className="text-xs text-gray-500">Supply APY</div>
-                    </div>
-                  </div>
+                  />
                 );
               })}
             </div>
@@ -176,7 +136,7 @@ export function SupplyProcessModal({
                 return (
                   <div
                     key={step.key}
-                    className={`flex items-start gap-3 rounded-lg border p-3 transition-colors ${
+                    className={`flex items-start gap-3 rounded border p-3 transition-colors ${
                       status === 'current'
                         ? 'border-primary bg-primary/5'
                         : 'border-gray-100 dark:border-gray-700'
diff --git a/src/components/common/Button.tsx b/src/components/common/Button.tsx
new file mode 100644
index 00000000..417294b6
--- /dev/null
+++ b/src/components/common/Button.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import { extendVariants, Button as NextUIButton } from '@nextui-org/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
+    },
+    // Size variants
+    size: {
+      sm: 'px-3 py-1.5 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/MarketInfoBlock.tsx b/src/components/common/MarketInfoBlock.tsx
new file mode 100644
index 00000000..526b6b3c
--- /dev/null
+++ b/src/components/common/MarketInfoBlock.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import Image from 'next/image';
+import { formatUnits } from 'viem';
+import { formatBalance } from '@/utils/balance';
+import { findToken } from '@/utils/tokens';
+import { Market } from '@/utils/types';
+import OracleVendorBadge from '../OracleVendorBadge';
+
+type MarketAmountBlockProps = {
+  market: Market;
+  amount?: bigint;
+  lltv?: string;
+  apy?: string;
+  className?: string;
+};
+
+export function MarketAmountBlock({ market, amount }: MarketAmountBlockProps): JSX.Element {
+  const collateralToken = findToken(market.collateralAsset.address, market.morphoBlue.chain.id);
+
+  return (
+    <div
+      key={market.uniqueKey}
+      className="flex items-center justify-between rounded border border-gray-100 bg-gray-50/50 p-3 dark:border-gray-700 dark:bg-gray-900/50"
+    >
+      <div className="flex items-center gap-3">
+        {collateralToken?.img && (
+          <div className="overflow-hidden rounded-full">
+            <Image
+              src={collateralToken.img}
+              alt={market.collateralAsset.symbol}
+              width={32}
+              height={32}
+              className="h-8 w-8 rounded-full object-cover"
+            />
+          </div>
+        )}
+        <div className="flex flex-col">
+          <div className="flex items-center gap-2">
+            <span className="font-medium">{market.collateralAsset.symbol}</span>
+            <span className="rounded bg-gray-100 px-1.5 py-0.5 text-xs text-gray-600 dark:bg-gray-800 dark:text-gray-400">
+              {formatUnits(BigInt(market.lltv), 16)}% LTV
+            </span>
+          </div>
+          {amount ? (
+            <span className="text-xs text-gray-500">
+              {formatBalance(amount, market.loanAsset.decimals)} {market.loanAsset.symbol}
+            </span>
+          ) : (
+            <OracleVendorBadge showText oracleData={market.oracle.data} />
+          )}
+        </div>
+      </div>
+      <div className="text-right">
+        <div className="font-mono text-sm">{(market.state.supplyApy * 100).toFixed(2)}%</div>
+        <div className="text-xs text-gray-500">Supply APY</div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/common/PrimaryButton.tsx b/src/components/common/PrimaryButton.tsx
deleted file mode 100644
index 0645c88e..00000000
--- a/src/components/common/PrimaryButton.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import Link from 'next/link';
-
-type PrimaryButtonProps = {
-  href: string;
-  children: React.ReactNode;
-  className?: string;
-  isSecondary?: boolean;
-};
-
-export default function PrimaryButton({
-  href,
-  children,
-  className = '',
-  isSecondary,
-}: PrimaryButtonProps) {
-  return (
-    <Link href={href}>
-      <button
-        type="button"
-        className={`${
-          isSecondary ? 'bg-surface' : 'bg-monarch-orange'
-        } rounded-sm p-4 px-10 font-zen opacity-90 transition-all duration-200 ease-in-out hover:opacity-100 ${className} hover:scale-105`}
-      >
-        {children}
-      </button>
-    </Link>
-  );
-}
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
new file mode 100644
index 00000000..8b166a86
--- /dev/null
+++ b/src/components/common/index.ts
@@ -0,0 +1 @@
+export * from './Button';
diff --git a/src/components/supplyModal.tsx b/src/components/supplyModal.tsx
index 41756b73..d105d5cc 100644
--- a/src/components/supplyModal.tsx
+++ b/src/components/supplyModal.tsx
@@ -4,7 +4,7 @@ import { Cross1Icon, ExternalLinkIcon } from '@radix-ui/react-icons';
 import Image from 'next/image';
 import Link from 'next/link';
 import { toast } from 'react-toastify';
-import { Address, encodeFunctionData, formatUnits } from 'viem';
+import { Address, encodeFunctionData } from 'viem';
 import { useAccount, useBalance, useSwitchChain } from 'wagmi';
 import morphoBundlerAbi from '@/abis/bundlerV2';
 import Input from '@/components/Input/Input';
@@ -18,6 +18,8 @@ import { getExplorerURL } from '@/utils/external';
 import { getBundlerV2, getIRMTitle, MONARCH_TX_IDENTIFIER } from '@/utils/morpho';
 import { findToken } from '@/utils/tokens';
 import { Market } from '@/utils/types';
+import { Button } from './common';
+import { MarketAmountBlock } from './common/MarketInfoBlock';
 import OracleVendorBadge from './OracleVendorBadge';
 import { SupplyProcessModal } from './SupplyProcessModal';
 
@@ -37,7 +39,6 @@ export function SupplyModal({ market, onClose }: SupplyModalProps): JSX.Element
 
   const { address: account, isConnected, chainId } = useAccount();
 
-  const collateralToken = findToken(market.collateralAsset.address, market.morphoBlue.chain.id);
   const loanToken = findToken(market.loanAsset.address, market.morphoBlue.chain.id);
 
   const { switchChain } = useSwitchChain();
@@ -330,18 +331,21 @@ export function SupplyModal({ market, onClose }: SupplyModalProps): JSX.Element
               <Cross1Icon />{' '}
             </button>
 
-            <div className="mb-4 flex items-center gap-2 p-2 text-2xl">
+            <div className="mb-2 flex items-center gap-2 py-2 text-2xl">
               Supply {loanToken ? loanToken.symbol : market.loanAsset.symbol}
               {loanToken?.img && <Image src={loanToken.img} height={18} alt={loanToken.symbol} />}
             </div>
 
             <p className="py-4 opacity-80">
-              {' '}
               You are supplying {market.loanAsset.symbol} to the following market:{' '}
             </p>
 
-            <div className="mb-2">
-              <div className="mb-1 flex items-start justify-between">
+            <div className="my-2">
+              <MarketAmountBlock market={market} />
+
+              <div className="my-2">Details</div>
+
+              <div className="my-1 flex items-start justify-between">
                 <p className="font-inter text-sm opacity-50">Market ID:</p>
                 <Link href={`/market/${market.morphoBlue.chain.id}/${market.uniqueKey}`}>
                   <p className="text-right font-monospace text-sm">
@@ -349,21 +353,7 @@ export function SupplyModal({ market, onClose }: SupplyModalProps): JSX.Element
                   </p>
                 </Link>
               </div>
-              <div className="mb-1 flex items-start justify-between">
-                <p className="font-inter text-sm opacity-50">Collateral Token:</p>
-                <div className="flex items-center justify-center gap-2">
-                  <p className="text-right font-zen">{market.collateralAsset.symbol} </p>
-                  <div>
-                    {collateralToken?.img && (
-                      <Image src={collateralToken.img} height={16} alt={collateralToken.symbol} />
-                    )}{' '}
-                  </div>
-                </div>
-              </div>
-              <div className="mb-1 flex items-start justify-between">
-                <p className="font-inter text-sm opacity-50">LLTV:</p>
-                <p className="text-right font-zen">{formatUnits(BigInt(market.lltv), 16)} %</p>
-              </div>
+
               <div className="mb-1 flex items-start justify-between">
                 <p className="font-inter text-sm opacity-50">Oracle:</p>
                 <a
@@ -456,31 +446,31 @@ export function SupplyModal({ market, onClose }: SupplyModalProps): JSX.Element
               </div>
 
               {needSwitchChain ? (
-                <button
-                  type="button"
+                <Button
                   onClick={() => void switchChain({ chainId: market.morphoBlue.chain.id })}
-                  className="bg-monarch-orange ml-2 h-10 min-w-32 rounded p-2 text-sm text-white  opacity-90 duration-300 ease-in-out hover:scale-110 hover:opacity-100 disabled:opacity-50"
+                  className="ml-2 min-w-32"
+                  variant="solid"
                 >
                   Switch Chain
-                </button>
+                </Button>
               ) : (!permit2Authorized && !useEth) || (!usePermit2Setting && !isApproved) ? (
-                <button
-                  disabled={!isConnected || isLoadingPermit2}
-                  type="button"
+                <Button
+                  disabled={!isConnected || isLoadingPermit2 || supplyPending}
                   onClick={() => void approveAndSupply()}
-                  className="bg-monarch-orange ml-2 h-10 min-w-32 rounded p-2 text-sm text-white  opacity-90 duration-300 ease-in-out hover:scale-110 hover:opacity-100 disabled:opacity-50"
+                  className="ml-2 min-w-32"
+                  variant="cta"
                 >
                   Approve and Supply
-                </button>
+                </Button>
               ) : (
-                <button
+                <Button
                   disabled={!isConnected || supplyPending || inputError !== null}
-                  type="button"
                   onClick={() => void signAndSupply()}
-                  className="bg-monarch-orange ml-2 h-10 min-w-32 rounded p-2 text-sm text-white opacity-90 duration-300 ease-in-out hover:scale-110 hover:opacity-100 disabled:opacity-50"
+                  className="ml-2 min-w-32"
+                  variant="cta"
                 >
                   {useEth ? 'Supply' : 'Sign and Supply'}
-                </button>
+                </Button>
               )}
             </div>
           </div>
diff --git a/src/components/withdrawModal.tsx b/src/components/withdrawModal.tsx
index b868e3f1..bbfe6044 100644
--- a/src/components/withdrawModal.tsx
+++ b/src/components/withdrawModal.tsx
@@ -7,6 +7,7 @@ import { toast } from 'react-toastify';
 import { Address, encodeFunctionData } from 'viem';
 import { useAccount, useSwitchChain } from 'wagmi';
 import morphoAbi from '@/abis/morpho';
+import { MarketAmountBlock } from '@/components/common/MarketInfoBlock';
 import Input from '@/components/Input/Input';
 import AccountConnect from '@/components/layout/header/AccountConnect';
 import { useTransactionWithToast } from '@/hooks/useTransactionWithToast';
@@ -106,7 +107,7 @@ export function WithdrawModal({ position, onClose, refetch }: ModalProps): JSX.E
     <div className="fixed left-0 top-0 z-50 flex h-full w-full items-center justify-center bg-black bg-opacity-50 font-zen">
       <div
         style={{ width: '600px' }}
-        className="bg-surface relative z-50 rounded-sm p-12 transition-all duration-500 ease-in-out"
+        className="bg-surface relative z-50 rounded p-12 transition-all duration-500 ease-in-out"
       >
         <button
           type="button"
@@ -116,7 +117,7 @@ export function WithdrawModal({ position, onClose, refetch }: ModalProps): JSX.E
           <Cross1Icon />{' '}
         </button>
 
-        <div className="mb-4 flex items-center gap-2 p-2 text-2xl">
+        <div className="mb-4 flex items-center gap-2 py-2 text-2xl">
           Withdraw {loanToken ? loanToken.symbol : position.market.loanAsset.symbol}
           {loanToken?.img && <Image src={loanToken.img} height={18} alt={loanToken.symbol} />}
         </div>
@@ -127,12 +128,7 @@ export function WithdrawModal({ position, onClose, refetch }: ModalProps): JSX.E
         </p>
 
         <div className="mb-2">
-          <div className="mb-1 flex items-start justify-between">
-            <p className="font-inter text-sm opacity-50">Market ID:</p>
-            <p className="text-right font-monospace text-sm">
-              {position.market.uniqueKey.slice(2, 8)}
-            </p>
-          </div>
+          <MarketAmountBlock market={position.market} />
           <div className="my-2 flex items-start justify-between">
             <p className="font-inter text-sm opacity-50">Available Liquidity:</p>
 
diff --git a/src/contexts/MarketsContext.tsx b/src/contexts/MarketsContext.tsx
index 9483c4dd..89864672 100644
--- a/src/contexts/MarketsContext.tsx
+++ b/src/contexts/MarketsContext.tsx
@@ -113,15 +113,18 @@ export function MarketsProvider({ children }: MarketsProviderProps) {
       } catch (_error) {
         setError(_error);
       } finally {
-        setLoading(false);
-        setIsRefetching(false);
+        if (isRefetch) {
+          setIsRefetching(false);
+        } else {
+          setLoading(false);
+        }
       }
     },
     [liquidatedMarketIds],
   );
 
   useEffect(() => {
-    if (!liquidationsLoading) {
+    if (!liquidationsLoading && markets.length === 0) {
       fetchMarkets().catch(console.error);
     }
   }, [liquidationsLoading, fetchMarkets]);
diff --git a/yarn.lock b/yarn.lock
index abd89802..ddb43faf 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -15323,6 +15323,7 @@ __metadata:
     stylelint-config-idiomatic-order: "npm:^10.0.0"
     stylelint-config-standard: "npm:^35.0.0"
     stylelint-order: "npm:^6.0.4"
+    tailwind-merge: "npm:^2.5.5"
     tailwindcss: "npm:^3.4.0"
     ts-jest: "npm:^29.1.1"
     typescript: "npm:~5.3.3"
@@ -18372,6 +18373,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tailwind-merge@npm:^2.5.5":
+  version: 2.5.5
+  resolution: "tailwind-merge@npm:2.5.5"
+  checksum: 10c0/32614dd2b4ddd4fab070d5ec569e6da00e2b34269b9ac2f2ff16733cef29a076c8e2210fbfc1904d7983a8fdb6b3e63d18ca117645f21b12ca7bcf8fe3507241
+  languageName: node
+  linkType: hard
+
 "tailwind-variants@npm:^0.1.20":
   version: 0.1.20
   resolution: "tailwind-variants@npm:0.1.20"