diff --git a/app/positions/components/PositionsContent.tsx b/app/positions/components/PositionsContent.tsx
index a551fce4..e8cf8db7 100644
--- a/app/positions/components/PositionsContent.tsx
+++ b/app/positions/components/PositionsContent.tsx
@@ -16,11 +16,13 @@ import { SupplyModal } from '@/components/supplyModal';
 import { WithdrawModal } from '@/components/withdrawModal';
 import useUserPositionsWithEarning from '@/hooks/useUserPositionsWithEarning';
 import { MarketPosition } from '@/utils/types';
+import { OnboardingModal } from './onboarding/Modal';
 import { PositionsSummaryTable } from './PositionsSummaryTable';
 
 export default function Positions() {
   const [showSupplyModal, setShowSupplyModal] = useState<boolean>(false);
   const [showWithdrawModal, setShowWithdrawModal] = useState<boolean>(false);
+  const [showOnboardingModal, setShowOnboardingModal] = useState<boolean>(false);
   const [selectedPosition, setSelectedPosition] = useState<MarketPosition | null>(null);
 
   const { account } = useParams<{ account: string }>();
@@ -84,18 +86,17 @@ export default function Positions() {
               </Button>
             </Link>
             {isOwner && (
-              <Link href="/positions/onboarding">
-                <Button
-                  variant="solid"
-                  color="primary"
-                  size="md"
-                  className="font-zen"
-                  disabled={account !== address}
-                >
-                  <FaPlus size={14} className="mr-2" />
-                  New Position
-                </Button>
-              </Link>
+              <Button
+                variant="solid"
+                color="primary"
+                size="md"
+                className="font-zen"
+                isDisabled={account !== address}
+                onClick={() => setShowOnboardingModal(true)}
+              >
+                <FaPlus size={14} className="mr-2" />
+                New Position
+              </Button>
             )}
           </div>
         </div>
@@ -121,17 +122,16 @@ export default function Positions() {
           />
         )}
 
+        <OnboardingModal
+          isOpen={showOnboardingModal}
+          onClose={() => setShowOnboardingModal(false)}
+        />
+
         {isLoading ? (
           <LoadingScreen message="Loading Supplies..." />
         ) : !hasSuppliedMarkets ? (
           <div className="flex flex-col items-center gap-8">
             <EmptyScreen message="No open supplies. Start lending now!" />
-            <Link href="/positions/onboarding">
-              <Button variant="solid" color="primary" size="lg" className="font-zen">
-                <FaPlus size={14} className="mr-2" />
-                Start Lending
-              </Button>
-            </Link>
           </div>
         ) : (
           <div className="mt-4">
diff --git a/app/positions/components/SmartOnboarding.tsx b/app/positions/components/SmartOnboarding.tsx
deleted file mode 100644
index 64226b9c..00000000
--- a/app/positions/components/SmartOnboarding.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { AssetSelection } from './onboarding/AssetSelection';
-import { OnboardingProvider } from './onboarding/OnboardingContext';
-import { RiskSelection } from './onboarding/RiskSelection';
-
-export function SmartOnboarding() {
-  return (
-    <div className="mx-auto max-w-7xl">
-      <OnboardingProvider>
-        <AssetSelection />
-        <RiskSelection />
-      </OnboardingProvider>
-    </div>
-  );
-}
diff --git a/app/positions/components/onboarding/AssetSelection.tsx b/app/positions/components/onboarding/AssetSelection.tsx
index d1c8fef3..5cfbd4aa 100644
--- a/app/positions/components/onboarding/AssetSelection.tsx
+++ b/app/positions/components/onboarding/AssetSelection.tsx
@@ -1,13 +1,13 @@
 import { useMemo } from 'react';
-import { Button } from '@nextui-org/react';
 import { motion } from 'framer-motion';
 import Image from 'next/image';
 import Link from 'next/link';
-import { useRouter } from 'next/navigation';
+import { formatUnits } from 'viem';
+import { Button } from '@/components/common/Button';
+import { Spinner } from '@/components/common/Spinner';
 import { useMarkets } from '@/hooks/useMarkets';
 import { useUserBalances } from '@/hooks/useUserBalances';
-import { formatBalance } from '@/utils/balance';
-import { getNetworkImg, getNetworkName } from '@/utils/networks';
+import { getNetworkImg, getNetworkName, SupportedNetworks } from '@/utils/networks';
 import { useOnboarding } from './OnboardingContext';
 import { TokenWithMarkets } from './types';
 
@@ -27,8 +27,7 @@ function NetworkIcon({ networkId }: { networkId: number }) {
 export function AssetSelection() {
   const { balances, loading: balancesLoading } = useUserBalances();
   const { markets, loading: marketsLoading } = useMarkets();
-  const { setSelectedToken, setSelectedMarkets } = useOnboarding();
-  const router = useRouter();
+  const { setSelectedToken, setSelectedMarkets, goToNextStep } = useOnboarding();
 
   const tokensWithMarkets = useMemo(() => {
     if (!balances || !markets) return [];
@@ -72,28 +71,22 @@ export function AssetSelection() {
   const handleTokenSelect = (token: TokenWithMarkets) => {
     setSelectedToken(token);
     setSelectedMarkets([]); // Reset selected markets when changing token
-    router.push('/positions/onboarding?step=risk-selection');
+    goToNextStep();
   };
 
   if (balancesLoading || marketsLoading) {
     return (
-      <div className="flex h-full flex-col">
-        <div>
-          <h2 className="font-zen text-2xl">Select an Asset</h2>
-          <p className="mt-2 text-gray-400">Choose which asset you want to supply</p>
+      <div className="flex-col">
+        <div className="flex min-h-[400px] items-center justify-center">
+          {' '}
+          <Spinner />{' '}
         </div>
-        <div className="mt-6">Loading...</div>
       </div>
     );
   }
 
   return (
     <div className="flex h-full flex-col">
-      <div>
-        <h2 className="font-zen text-2xl">Select an Asset</h2>
-        <p className="mt-2 text-gray-400">Choose which asset you want to supply</p>
-      </div>
-
       {tokensWithMarkets.length === 0 ? (
         <div className="mt-6 flex flex-col items-center justify-center gap-4 rounded border border-gray-200 p-8 text-center dark:border-gray-700">
           <p className="text-lg">No assets available</p>
@@ -107,7 +100,7 @@ export function AssetSelection() {
           </Link>
         </div>
       ) : (
-        <div className="mt-6 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+        <div className="mt-6 grid grid-cols-1 gap-4 sm:grid-cols-1 lg:grid-cols-2">
           {tokensWithMarkets.map((token) => (
             <motion.button
               aria-label={`Select ${token.symbol} on ${getNetworkName(token.network)}`}
@@ -115,7 +108,6 @@ export function AssetSelection() {
               key={`${token.symbol}-${token.network}`}
               onClick={() => handleTokenSelect(token)}
               className="group relative flex items-start gap-4 rounded border border-gray-200 bg-white p-4 text-left transition-all duration-300 hover:border-primary hover:shadow-lg dark:border-gray-700 dark:bg-gray-800/50 dark:hover:bg-gray-800"
-              whileHover={{ scale: 1.02 }}
               transition={{ type: 'spring', stiffness: 300, damping: 20 }}
             >
               <div className="relative flex h-12 w-12 items-center justify-center rounded-full bg-gray-100 transition-transform duration-300 group-hover:scale-110 dark:bg-gray-700">
@@ -139,12 +131,33 @@ export function AssetSelection() {
                       <NetworkIcon networkId={token.network} />
                       <span>{getNetworkName(token.network)}</span>
                     </div>
+
+                    {/* if base network, show agent badge */}
+                    {token.network === SupportedNetworks.Base && (
+                      // <Tooltip
+                      //   content={
+                      //     <div className="flex flex-col gap-2 p-2 font-zen">
+                      //       <div className="text-base">Monarch Autopilot 🎉</div>
+                      //       <div className="text-sm">
+                      //         Monarch Autopilot is now in beta on Base! Setup the agent to start
+                      //         automating your reallocations.
+                      //       </div>
+                      //     </div>
+                      //   }
+                      // >
+                      //   <div className="flex gap-2 rounded bg-primary bg-opacity-50 px-1.5 py-0.5 text-xs text-gray-100">
+                      //     🤖
+                      //     <span className="opacity-100">beta</span>
+                      //   </div>
+                      // </Tooltip>
+                      <div />
+                    )}
                   </div>
                 </div>
 
                 <div className="space-y-2">
                   <p className="text-sm text-gray-400 transition-opacity duration-300 group-hover:opacity-80">
-                    Balance: {formatBalance(token.balance, token.decimals)} {token.symbol}
+                    Balance: {formatUnits(BigInt(token.balance), token.decimals)} {token.symbol}
                   </p>
                   <div className="flex flex-col gap-1">
                     <div className="flex items-center gap-2">
diff --git a/app/positions/components/onboarding/Modal.tsx b/app/positions/components/onboarding/Modal.tsx
new file mode 100644
index 00000000..5f98717f
--- /dev/null
+++ b/app/positions/components/onboarding/Modal.tsx
@@ -0,0 +1,101 @@
+import { Modal, ModalContent, ModalHeader, Button } from '@nextui-org/react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { RxCross2 } from 'react-icons/rx';
+import { AssetSelection } from './AssetSelection';
+import { useOnboarding } from './OnboardingContext';
+import { ONBOARDING_STEPS } from './OnboardingContext';
+import { RiskSelection } from './RiskSelection';
+import { SetupPositions } from './SetupPositions';
+import { SuccessPage } from './SuccessPage';
+
+const StepComponents = {
+  'asset-selection': AssetSelection,
+  'risk-selection': RiskSelection,
+  setup: SetupPositions,
+  success: SuccessPage,
+} as const;
+
+function StepIndicator({ currentStep }: { currentStep: string }) {
+  const currentIndex = ONBOARDING_STEPS.findIndex((s) => s.id === currentStep);
+
+  return (
+    <div className="flex w-full items-center justify-center gap-2 px-4">
+      {ONBOARDING_STEPS.map((step, index) => {
+        const isPast = index < currentIndex;
+        const isCurrent = index === currentIndex;
+
+        return (
+          <div key={step.id} className="flex items-center">
+            <div
+              className={`h-[6px] w-8 gap-2 rounded transition-colors duration-300 ${
+                isCurrent
+                  ? 'bg-primary'
+                  : isPast
+                  ? 'bg-primary bg-opacity-50'
+                  : 'bg-gray-200 dark:bg-gray-700'
+              }`}
+            />
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+export function OnboardingModal({ isOpen, onClose }: { isOpen: boolean; onClose: () => void }) {
+  const { step } = useOnboarding();
+  const currentStepIndex = ONBOARDING_STEPS.findIndex((s) => s.id === step);
+  const CurrentStepComponent = StepComponents[step];
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      size="3xl"
+      scrollBehavior="inside"
+      classNames={{
+        base: 'bg-background',
+        body: 'py-6',
+        closeButton: 'hidden',
+      }}
+    >
+      <ModalContent className="p-4">
+        {/* Header */}
+        <ModalHeader className="flex justify-between">
+          <div>
+            <h2 className="font-zen text-2xl font-normal">
+              {ONBOARDING_STEPS[currentStepIndex].title}
+            </h2>
+            <p className="mt-1 font-zen text-sm font-normal text-secondary">
+              {ONBOARDING_STEPS[currentStepIndex].description}
+            </p>
+          </div>
+          <Button isIconOnly onClick={onClose} className="bg-surface">
+            <RxCross2 size={16} />
+          </Button>
+        </ModalHeader>
+
+        {/* Content */}
+        <div className="flex-1 overflow-hidden px-6">
+          <AnimatePresence mode="wait">
+            <motion.div
+              key={step}
+              className="h-full overflow-y-auto font-zen"
+              initial={{ height: 0, opacity: 0 }}
+              animate={{ height: 'auto', opacity: 1 }}
+              exit={{ height: 0, opacity: 0 }}
+              transition={{ duration: 0.2, ease: 'easeInOut' }}
+            >
+              <CurrentStepComponent onClose={onClose} />
+            </motion.div>
+          </AnimatePresence>
+        </div>
+
+        {/* Footer with Step Indicator */}
+        <div className="mt-6 pt-4">
+          <StepIndicator currentStep={step} />
+        </div>
+      </ModalContent>
+    </Modal>
+  );
+}
diff --git a/app/positions/components/onboarding/OnboardingContent.tsx b/app/positions/components/onboarding/OnboardingContent.tsx
deleted file mode 100644
index 15fbc870..00000000
--- a/app/positions/components/onboarding/OnboardingContent.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-'use client';
-
-import { useSearchParams } from 'next/navigation';
-import Header from '@/components/layout/header/Header';
-import { AssetSelection } from './AssetSelection';
-import { OnboardingProvider } from './OnboardingContext';
-import { RiskSelection } from './RiskSelection';
-import { SetupPositions } from './SetupPositions';
-import { SuccessPage } from './SuccessPage';
-
-export function OnboardingContent() {
-  const searchParams = useSearchParams();
-  const step = searchParams.get('step') ?? 'asset-selection';
-
-  const renderStep = () => {
-    switch (step) {
-      case 'asset-selection':
-        return <AssetSelection />;
-      case 'risk-selection':
-        return <RiskSelection />;
-      case 'setup':
-        return <SetupPositions />;
-      case 'success':
-        return <SuccessPage />;
-      default:
-        return <AssetSelection />;
-    }
-  };
-
-  return (
-    <div className="flex min-h-screen flex-col font-zen">
-      <Header />
-      <div className="mx-auto flex w-full max-w-7xl flex-1 flex-col px-4 py-8">
-        <OnboardingProvider>
-          <div className="flex min-h-0 flex-1 flex-col">{renderStep()}</div>
-        </OnboardingProvider>
-      </div>
-    </div>
-  );
-}
diff --git a/app/positions/components/onboarding/OnboardingContext.tsx b/app/positions/components/onboarding/OnboardingContext.tsx
index 750d3605..38064934 100644
--- a/app/positions/components/onboarding/OnboardingContext.tsx
+++ b/app/positions/components/onboarding/OnboardingContext.tsx
@@ -1,9 +1,19 @@
-import { createContext, useContext, useState, useMemo } from 'react';
-import { useRouter, useSearchParams } from 'next/navigation';
+import { createContext, useContext, useState, useMemo, useCallback } from 'react';
 import { Market } from '@/utils/types';
 import { TokenWithMarkets } from './types';
 
-type OnboardingStep = 'asset-selection' | 'risk-selection' | 'setup' | 'success';
+export const ONBOARDING_STEPS = [
+  {
+    id: 'asset-selection',
+    title: 'Select Asset',
+    description: 'Choose the asset you want to supply',
+  },
+  { id: 'risk-selection', title: 'Select Markets', description: 'Set your risk preferences' },
+  { id: 'setup', title: 'Position Setup', description: 'Configure your initial position' },
+  { id: 'success', title: 'Complete', description: 'Position created successfully' },
+] as const;
+
+export type OnboardingStep = (typeof ONBOARDING_STEPS)[number]['id'];
 
 type OnboardingContextType = {
   selectedToken: TokenWithMarkets | null;
@@ -12,52 +22,72 @@ type OnboardingContextType = {
   setSelectedMarkets: (markets: Market[]) => void;
   step: OnboardingStep;
   setStep: (step: OnboardingStep) => void;
+  canGoNext: boolean;
+  goToNextStep: () => void;
+  goToPrevStep: () => void;
+  resetOnboarding: () => void;
 };
 
 const OnboardingContext = createContext<OnboardingContextType | null>(null);
 
 export function OnboardingProvider({ children }: { children: React.ReactNode }) {
-  const router = useRouter();
-  const searchParams = useSearchParams();
-  const currentStep = (searchParams.get('step') as OnboardingStep) || 'asset-selection';
-
   const [selectedToken, setSelectedToken] = useState<TokenWithMarkets | null>(null);
   const [selectedMarkets, setSelectedMarkets] = useState<Market[]>([]);
 
-  const setStep = (newStep: OnboardingStep) => {
-    const params = new URLSearchParams(searchParams.toString());
-    params.set('step', newStep);
-    router.push(`/positions/onboarding?${params.toString()}`);
+  const [currentStep, setStep] = useState<OnboardingStep>('asset-selection');
+
+  const currentStepIndex = ONBOARDING_STEPS.findIndex((s) => s.id === currentStep);
+
+  const canGoNext = useMemo(() => {
+    switch (currentStep) {
+      case 'asset-selection':
+        return !!selectedToken;
+      case 'risk-selection':
+        return selectedMarkets.length > 0;
+      case 'setup':
+        return true;
+      default:
+        return false;
+    }
+  }, [currentStep, selectedToken, selectedMarkets]);
+
+  const goToNextStep = () => {
+    const nextStep = ONBOARDING_STEPS[currentStepIndex + 1];
+    if (nextStep) {
+      setStep(nextStep.id);
+    }
   };
 
+  const goToPrevStep = () => {
+    const prevStep = ONBOARDING_STEPS[currentStepIndex - 1];
+    if (prevStep) {
+      setStep(prevStep.id);
+    }
+  };
+
+  const resetOnboarding = useCallback(() => {
+    setSelectedToken(null);
+    setSelectedMarkets([]);
+    setStep('asset-selection');
+  }, [setSelectedToken, setSelectedMarkets, setStep]);
+
   const contextValue = useMemo(
     () => ({
       selectedToken,
       setSelectedToken: (token: TokenWithMarkets | null) => {
         setSelectedToken(token);
-        // Reset markets when token changes
         setSelectedMarkets([]);
       },
       selectedMarkets,
-      setSelectedMarkets: (markets: Market[]) => {
-        setSelectedMarkets(markets);
-      },
+      setSelectedMarkets,
       step: currentStep,
-      setStep: (newStep: OnboardingStep) => {
-        // Validate step transitions
-        if (newStep !== 'asset-selection' && !selectedToken) {
-          throw new Error('Token must be selected before proceeding');
-        }
-        if (newStep === 'setup' && selectedMarkets.length === 0) {
-          throw new Error('Markets must be selected before setup');
-        }
-        if (newStep === 'success' && !selectedToken) {
-          throw new Error('Token must be selected before showing success');
-        }
-        setStep(newStep);
-      },
+      setStep,
+      canGoNext,
+      goToNextStep,
+      goToPrevStep,
+      resetOnboarding,
     }),
-    [selectedToken, selectedMarkets, currentStep],
+    [selectedToken, selectedMarkets, currentStep, canGoNext],
   );
 
   return <OnboardingContext.Provider value={contextValue}>{children}</OnboardingContext.Provider>;
diff --git a/app/positions/components/onboarding/RiskSelection.tsx b/app/positions/components/onboarding/RiskSelection.tsx
index 873ce684..ec5447b8 100644
--- a/app/positions/components/onboarding/RiskSelection.tsx
+++ b/app/positions/components/onboarding/RiskSelection.tsx
@@ -1,11 +1,9 @@
 import { useMemo, useState } from 'react';
-import { Button } from '@nextui-org/react';
-import Image from 'next/image';
-import { useRouter, useSearchParams } from 'next/navigation';
+import { motion } from 'framer-motion';
 import { formatUnits } from 'viem';
-import OracleVendorBadge from '@/components/OracleVendorBadge';
+import { Button } from '@/components/common/Button';
+import { MarketInfoBlock } from '@/components/common/MarketInfoBlock';
 import { formatReadable } from '@/utils/balance';
-import { getAssetURL } from '@/utils/external';
 import { OracleVendors, parseOracleVendors } from '@/utils/oracle';
 import { findToken, getUniqueTokens } from '@/utils/tokens';
 import { Market } from '@/utils/types';
@@ -19,12 +17,16 @@ import {
 import { useOnboarding } from './OnboardingContext';
 
 export function RiskSelection() {
-  const router = useRouter();
-  const searchParams = useSearchParams();
-  const { selectedToken, setSelectedMarkets } = useOnboarding();
+  const {
+    selectedToken,
+    selectedMarkets,
+    setSelectedMarkets,
+    canGoNext,
+    goToNextStep,
+    goToPrevStep,
+  } = useOnboarding();
   const [selectedCollaterals, setSelectedCollaterals] = useState<string[]>([]);
   const [selectedOracles, setSelectedOracles] = useState<OracleVendors[]>([]);
-  const [selectedMarkets, setSelectedMarketsLocal] = useState<Set<string>>(new Set());
 
   const collateralTokens = useMemo(() => {
     if (!selectedToken?.markets) return [];
@@ -72,46 +74,32 @@ export function RiskSelection() {
       });
   }, [selectedToken, selectedCollaterals, selectedOracles]);
 
-  const handleNext = () => {
-    if (selectedMarkets.size > 0) {
-      const selectedMarketsArray = Array.from(selectedMarkets)
-        .map((key) => filteredMarkets.find((m) => m.uniqueKey === key))
-        .filter((m): m is Market => m !== undefined);
-
-      setSelectedMarkets(selectedMarketsArray);
-      router.push('/positions/onboarding?step=setup');
-    }
-  };
+  // Check if criteria is met to show markets
+  const shouldShowMarkets = selectedCollaterals.length > 0 && selectedOracles.length > 0;
 
   const handleMarketDetails = (market: Market, e: React.MouseEvent) => {
     e.stopPropagation();
-    const currentParams = searchParams.toString();
     const marketPath = `/market/${market.morphoBlue.chain.id}/${market.uniqueKey}`;
-    const targetPath = currentParams ? `${marketPath}?${currentParams}` : marketPath;
-
-    // open in tab
-    window.open(targetPath, '_blank');
+    window.open(marketPath, '_blank');
   };
 
   const toggleMarketSelection = (market: Market) => {
-    const newSelection = new Set(selectedMarkets);
-    if (selectedMarkets.has(market.uniqueKey)) {
-      newSelection.delete(market.uniqueKey);
+    if (selectedMarkets.some((m) => m.uniqueKey === market.uniqueKey)) {
+      setSelectedMarkets(selectedMarkets.filter((m) => m.uniqueKey !== market.uniqueKey));
     } else {
-      newSelection.add(market.uniqueKey);
+      setSelectedMarkets([...selectedMarkets, market]);
     }
-    setSelectedMarketsLocal(newSelection);
   };
 
   return (
     <div className="flex h-full flex-col">
+      {/* Input Section */}
       <div>
-        <h2 className="font-zen text-2xl">Select Your Risk Preference</h2>
-        <p className="mt-2 text-gray-400">Choose which assets and oracles you want to trust</p>
+        <p className="mt-2 font-zen text-gray-400">Choose collateral and oracle you trust</p>
+        <p />
       </div>
 
-      {/* Input Section */}
-      <div className="mt-6 flex gap-4 pb-6">
+      <div className="mt-2 flex gap-4">
         <div className="flex-1">
           <AssetFilter
             label="Collateral Assets"
@@ -127,158 +115,126 @@ export function RiskSelection() {
         </div>
       </div>
 
-      <div>
-        <p className="mt-2 text-gray-400">Choose markets you want to trust</p>
-      </div>
-
-      {/* Markets Table */}
-      <div className="mt-6 min-h-0 flex-1">
-        <div className="h-[calc(100vh-500px)] overflow-auto">
-          <table className="responsive w-full rounded-md font-zen">
-            <thead className="table-header sticky top-0 z-[1] bg-gray-50 text-sm dark:bg-gray-800">
-              <tr>
-                <th className="whitespace-nowrap px-4 py-2 text-left font-normal">Market</th>
-                <th className="whitespace-nowrap px-4 py-2 text-center font-normal">Oracle</th>
-                <th className="whitespace-nowrap px-4 py-2 text-center font-normal">Warnings</th>
-                <th className="whitespace-nowrap px-4 py-2 text-right font-normal">LLTV</th>
-                <th className="whitespace-nowrap px-4 py-2 text-right font-normal">Supply APY</th>
-                <th className="whitespace-nowrap px-4 py-2 text-right font-normal">Total Supply</th>
-                <th className="whitespace-nowrap px-4 py-2 text-right font-normal">Utilization</th>
-                <th className="whitespace-nowrap px-4 py-2 text-right font-normal">Actions</th>
-              </tr>
-            </thead>
-            <tbody className="table-body text-sm">
-              {filteredMarkets.map((market) => {
+      {shouldShowMarkets && (
+        <div>
+          <p className="mt-4 text-gray-400">Choose markets</p>
+          <p className="mt-2 text-sm text-gray-400"> selected markets: {selectedMarkets.length} </p>
+        </div>
+      )}
+
+      {/* Markets List - Scrollable Section */}
+      <div className="mt-6 flex-1">
+        <div className="h-[calc(100vh-560px)] overflow-y-auto px-2 scrollbar-hide">
+          {!shouldShowMarkets ? (
+            <div className="flex h-full flex-col items-center justify-center text-gray-400">
+              <div className="text-center">
+                <p className="text-lg">Select your preferences</p>
+                <p className="mt-2 text-sm">
+                  {selectedCollaterals.length === 0 && 'Choose at least one collateral asset'}
+                  {selectedCollaterals.length > 0 &&
+                    selectedOracles.length === 0 &&
+                    'Now select oracle vendors'}
+                </p>
+              </div>
+            </div>
+          ) : (
+            <motion.div
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              transition={{ duration: 0.5 }}
+              className="-mx-2 flex flex-col space-y-4"
+            >
+              {filteredMarkets.map((market, index) => {
                 const collateralToken = findToken(
                   market.collateralAsset.address,
                   market.morphoBlue.chain.id,
                 );
                 if (!collateralToken) return null;
 
-                const isSelected = selectedMarkets.has(market.uniqueKey);
-                const { vendors } = parseOracleVendors(market.oracle.data);
+                const isSelected = selectedMarkets.some((m) => m.uniqueKey === market.uniqueKey);
 
                 return (
-                  <tr
+                  <motion.div
                     key={market.uniqueKey}
+                    initial={{ opacity: 0, y: 20 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ duration: 0.5, delay: index * 0.1 }}
                     onClick={() => toggleMarketSelection(market)}
-                    className={`cursor-pointer transition-all duration-200 ease-in-out hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-800 ${
-                      isSelected ? 'bg-primary-50 dark:bg-primary-900/20' : ''
-                    }`}
+                    className={`relative cursor-pointer rounded p-1 transition-all duration-200 ease-in-out ${
+                      index === 0 ? 'mt-2' : ''
+                    } ${isSelected ? 'bg-hovered border-2' : ''}`}
                   >
-                    <td className="whitespace-nowrap px-4 py-2">
-                      <div className="flex items-center gap-2 px-4">
-                        {collateralToken?.img && (
-                          <div
-                            className={`overflow-hidden rounded-full transition-all duration-200 ease-in-out ${
-                              isSelected
-                                ? 'ring-2 ring-primary ring-offset-2 dark:ring-offset-gray-900'
-                                : ''
-                            }`}
-                          >
-                            <Image
-                              src={collateralToken.img}
-                              alt={market.collateralAsset.symbol}
-                              width={24}
-                              height={24}
-                              className="h-6 w-6 rounded-full object-cover"
-                            />
+                    <div className="flex w-full items-center justify-between pr-2">
+                      <div className="min-w-[300px] pr-4">
+                        <MarketInfoBlock
+                          market={market}
+                          className={`border-none ${isSelected ? 'bg-hovered' : 'bg-surface'} `}
+                        />
+                      </div>
+
+                      <div className="flex flex-1 items-center justify-end gap-8">
+                        {/* Risk Indicators */}
+                        <div className="flex gap-2">
+                          <MarketAssetIndicator market={market} />
+                          <MarketOracleIndicator market={market} />
+                          <MarketDebtIndicator market={market} />
+                        </div>
+
+                        {/* Total Supply */}
+                        <div className="text-xs text-gray-500">
+                          <span>Total Supply:</span>
+                          <div className="font-mono">
+                            {formatReadable(
+                              Number(
+                                formatUnits(
+                                  BigInt(market.state.supplyAssets),
+                                  market.loanAsset.decimals,
+                                ),
+                              ),
+                            )}{' '}
+                            {market.loanAsset.symbol}
                           </div>
-                        )}
-                        <div className="flex flex-col">
-                          <div className="flex items-center gap-2">
-                            <a
-                              href={getAssetURL(
-                                market.collateralAsset.address,
-                                market.morphoBlue.chain.id,
-                              )}
-                              target="_blank"
-                              rel="noopener noreferrer"
-                              onClick={(e) => e.stopPropagation()}
-                              className="flex items-center gap-1 no-underline hover:underline"
-                            >
-                              {market.collateralAsset.symbol}
-                            </a>
-                            <button
-                              onClick={(e) => handleMarketDetails(market, e)}
-                              className="text-xs text-gray-400 hover:text-gray-300"
-                              type="button"
-                            >
-                              {market.uniqueKey.slice(2, 8)}
-                            </button>
+                        </div>
+
+                        {/* Utilization Rate */}
+                        <div className="text-xs text-gray-500">
+                          <span>Utilization:</span>
+                          <div className="font-mono">
+                            {formatReadable(market.state.utilization * 100)}%
                           </div>
-                          <span className="text-xs text-gray-400">as collateral</span>
                         </div>
+
+                        {/* Details Button */}
+                        <Button
+                          onClick={(e) => handleMarketDetails(market, e)}
+                          variant="interactive"
+                          className="ml-4"
+                          size="sm"
+                        >
+                          Details
+                        </Button>
                       </div>
-                    </td>
-                    <td className="whitespace-nowrap px-4 py-2">
-                      <div className="flex flex-wrap justify-center gap-1">
-                        {vendors.map((vendor) => (
-                          <OracleVendorBadge
-                            key={vendor}
-                            oracleData={market.oracle.data}
-                            showText={false}
-                          />
-                        ))}
-                      </div>
-                    </td>
-                    <td className="whitespace-nowrap px-4 py-2">
-                      <div className="flex justify-center gap-2">
-                        <MarketAssetIndicator market={market} />
-                        <MarketOracleIndicator market={market} />
-                        <MarketDebtIndicator market={market} />
-                      </div>
-                    </td>
-                    <td className="whitespace-nowrap px-4 py-2 text-right font-mono">
-                      {formatUnits(BigInt(market.lltv), 16)}%
-                    </td>
-                    <td className="whitespace-nowrap px-4 py-2 text-right font-mono">
-                      {formatReadable(market.state.supplyApy * 100)}%
-                    </td>
-                    <td className="whitespace-nowrap px-4 py-2 text-right font-mono">
-                      {formatReadable(
-                        Number(
-                          formatUnits(BigInt(market.state.supplyAssets), market.loanAsset.decimals),
-                        ),
-                      )}{' '}
-                      {market.loanAsset.symbol}
-                    </td>
-                    <td className="whitespace-nowrap px-4 py-2 text-right font-mono">
-                      {formatReadable(market.state.utilization * 100)}%
-                    </td>
-                    <td className="whitespace-nowrap px-4 py-2 text-right">
-                      <button
-                        onClick={(e) => handleMarketDetails(market, e)}
-                        className="text-sm transition-colors hover:text-gray-300"
-                        type="button"
-                      >
-                        Details
-                      </button>
-                    </td>
-                  </tr>
+                    </div>
+                  </motion.div>
                 );
               })}
-            </tbody>
-          </table>
+            </motion.div>
+          )}
         </div>
       </div>
 
       {/* Navigation */}
-      <div className="mt-6 flex items-center justify-between pt-4">
-        <Button
-          variant="light"
-          className="min-w-[120px] rounded"
-          onClick={() => router.push('/positions/onboarding?step=asset-selection')}
-        >
+      <div className="mt-6 flex items-center justify-between gap-4">
+        <Button variant="light" onPress={goToPrevStep} className="min-w-[120px]">
           Back
         </Button>
         <Button
-          color="primary"
-          className="min-w-[120px] rounded"
-          onClick={handleNext}
-          disabled={selectedMarkets.size === 0}
+          variant="cta"
+          onPress={goToNextStep}
+          isDisabled={!canGoNext}
+          className="min-w-[120px]"
         >
-          Next
+          Continue
         </Button>
       </div>
     </div>
diff --git a/app/positions/components/onboarding/SetupPositions.tsx b/app/positions/components/onboarding/SetupPositions.tsx
index f59b3237..7cadbd24 100644
--- a/app/positions/components/onboarding/SetupPositions.tsx
+++ b/app/positions/components/onboarding/SetupPositions.tsx
@@ -1,25 +1,23 @@
 import { useState, useEffect, useMemo, useCallback } from 'react';
-import { Button, Slider } from '@nextui-org/react';
+import { Slider } from '@nextui-org/react';
 import { LockClosedIcon, LockOpen1Icon } from '@radix-ui/react-icons';
 import Image from 'next/image';
-import { useRouter } from 'next/navigation';
 import { toast } from 'react-toastify';
 import { formatUnits, parseUnits } from 'viem';
 import { useChainId, useSwitchChain } from 'wagmi';
-import OracleVendorBadge from '@/components/OracleVendorBadge';
+import { Button } from '@/components/common';
+import { MarketInfoBlock } from '@/components/common/MarketInfoBlock';
 import { SupplyProcessModal } from '@/components/SupplyProcessModal';
 import { useLocalStorage } from '@/hooks/useLocalStorage';
 import { useMultiMarketSupply } from '@/hooks/useMultiMarketSupply';
 import { useUserBalances } from '@/hooks/useUserBalances';
-import { formatBalance, formatReadable } from '@/utils/balance';
-import { parseOracleVendors } from '@/utils/oracle';
+import { formatBalance } from '@/utils/balance';
 import { findToken } from '@/utils/tokens';
 import { useOnboarding } from './OnboardingContext';
 
 export function SetupPositions() {
-  const router = useRouter();
   const chainId = useChainId();
-  const { selectedToken, selectedMarkets } = useOnboarding();
+  const { selectedToken, selectedMarkets, goToNextStep, goToPrevStep } = useOnboarding();
   const { balances } = useUserBalances();
   const [useEth] = useLocalStorage('useEth', false);
   const [usePermit2Setting] = useLocalStorage('usePermit2', true);
@@ -37,17 +35,6 @@ export function SetupPositions() {
 
   const { switchChain } = useSwitchChain();
 
-  // Redirect if no token selected
-  useEffect(() => {
-    if (!selectedToken) {
-      router.push('/positions/onboarding?step=asset-selection');
-      return;
-    }
-    if (!selectedMarkets || selectedMarkets.length === 0) {
-      router.push('/positions/onboarding?step=risk-selection');
-    }
-  }, [router, selectedToken, selectedMarkets]);
-
   // Compute token balance and decimals
   const tokenBalance = useMemo(() => {
     if (!selectedToken) return 0n;
@@ -229,7 +216,7 @@ export function SetupPositions() {
     isLoadingPermit2,
     approveAndSupply,
     supplyPending,
-  } = useMultiMarketSupply(selectedToken!, supplies, useEth, usePermit2Setting);
+  } = useMultiMarketSupply(selectedToken!, supplies, useEth, usePermit2Setting, goToNextStep);
 
   const handleSupply = async () => {
     if (isSupplying) {
@@ -251,10 +238,8 @@ export function SetupPositions() {
     setIsSupplying(true);
 
     try {
-      const success = await approveAndSupply();
-      if (success) {
-        router.push('/positions/onboarding?step=success');
-      }
+      // trigger the tx. goToNextStep() be called as a `onSuccess` callback
+      await approveAndSupply();
     } catch (supplyError) {
       console.error('Supply failed:', supplyError);
       // Error toast is already shown in useMultiMarketSupply
@@ -269,14 +254,6 @@ export function SetupPositions() {
 
   return (
     <div className="flex h-full flex-col">
-      <div>
-        <h2 className="font-zen text-2xl">Setup Your Positions</h2>
-        <p className="mt-2 text-gray-400">
-          Choose how much {selectedToken.symbol} you want to supply in total and distribute it
-          across markets
-        </p>
-      </div>
-
       {/* Total Amount Section */}
       <div className="mt-6 rounded border border-gray-200 p-4 dark:border-gray-700">
         <div className="flex items-center justify-between gap-4">
@@ -324,10 +301,7 @@ export function SetupPositions() {
           <table className="w-full font-zen">
             <thead className="sticky top-0 z-[1] bg-gray-50 text-sm dark:bg-gray-800">
               <tr>
-                <th className="whitespace-nowrap px-4 py-3 text-left font-normal">Market ID</th>
-                <th className="whitespace-nowrap px-4 py-3 text-left font-normal">Collateral</th>
-                <th className="whitespace-nowrap px-4 py-3 text-left font-normal">Market Params</th>
-                <th className="whitespace-nowrap px-4 py-3 text-right font-normal">Supply APY</th>
+                <th className="whitespace-nowrap px-4 py-3 text-left font-normal">Market</th>
                 <th className="whitespace-nowrap px-4 py-3 text-right font-normal">Distribution</th>
               </tr>
             </thead>
@@ -339,60 +313,24 @@ export function SetupPositions() {
                 );
                 if (!collateralToken) return null;
 
-                const { vendors } = parseOracleVendors(market.oracle.data);
                 const currentPercentage = percentages[market.uniqueKey] ?? 0;
                 const isLocked = lockedAmounts.has(market.uniqueKey);
 
                 return (
                   <tr key={market.uniqueKey}>
-                    <td className="whitespace-nowrap px-4 py-3 font-mono text-xs">
+                    <td className="whitespace-nowrap font-mono text-xs">
                       <a
                         href={`/market/${market.morphoBlue.chain.id}/${market.uniqueKey}`}
                         target="_blank"
                         rel="noopener noreferrer"
-                        className="text-primary hover:text-primary-400"
+                        className="no-underline"
                       >
-                        {market.uniqueKey.slice(2, 8)}
+                        <MarketInfoBlock
+                          market={market}
+                          className="bg-surface max-w-[300px] border-none no-underline"
+                        />
                       </a>
                     </td>
-                    <td className="whitespace-nowrap px-4 py-3">
-                      <div className="flex items-center gap-2">
-                        {collateralToken?.img && (
-                          <div className="overflow-hidden rounded-full">
-                            <Image
-                              src={collateralToken.img}
-                              alt={market.collateralAsset.symbol}
-                              width={24}
-                              height={24}
-                              className="h-6 w-6 rounded-full object-cover"
-                            />
-                          </div>
-                        )}
-                        <div className="flex flex-col">
-                          <span>{market.collateralAsset.symbol}</span>
-                          <span className="text-xs text-gray-400">as collateral</span>
-                        </div>
-                      </div>
-                    </td>
-                    <td className="whitespace-nowrap px-4 py-3">
-                      <div className="flex items-center gap-2">
-                        <div className="flex gap-1">
-                          {vendors.map((vendor) => (
-                            <OracleVendorBadge
-                              key={vendor}
-                              oracleData={market.oracle.data}
-                              showText={false}
-                            />
-                          ))}
-                        </div>
-                        <span className="text-xs text-gray-400">
-                          {formatUnits(BigInt(market.lltv), 16)}% LTV
-                        </span>
-                      </div>
-                    </td>
-                    <td className="whitespace-nowrap px-4 py-3 text-right font-mono">
-                      {formatReadable(market.state.supplyApy * 100)}%
-                    </td>
                     <td className="whitespace-nowrap px-4 py-3">
                       <div className="flex items-center gap-4">
                         <div className="flex flex-1 items-center gap-2">
@@ -472,19 +410,15 @@ export function SetupPositions() {
 
       {/* Navigation */}
       <div className="mt-6 flex items-center justify-between">
-        <Button
-          variant="light"
-          className="min-w-[120px] rounded"
-          onPress={() => router.push('/positions/onboarding?step=risk-selection')}
-        >
+        <Button variant="light" className="min-w-[120px]" onPress={goToPrevStep}>
           Back
         </Button>
         <Button
-          color="primary"
+          variant="cta"
           isDisabled={error !== null || !totalAmount || supplies.length === 0}
           isLoading={supplyPending || isLoadingPermit2}
           onPress={() => void handleSupply()}
-          className="min-w-[120px] rounded"
+          className="min-w-[120px]"
         >
           Execute
         </Button>
diff --git a/app/positions/components/onboarding/SmartOnboarding.tsx b/app/positions/components/onboarding/SmartOnboarding.tsx
deleted file mode 100644
index 3085b4de..00000000
--- a/app/positions/components/onboarding/SmartOnboarding.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { AssetSelection } from './AssetSelection';
-import { OnboardingProvider, useOnboarding } from './OnboardingContext';
-import { RiskSelection } from './RiskSelection';
-
-function OnboardingContent() {
-  const { step } = useOnboarding();
-
-  return (
-    <div className="w-full">
-      {step === 'asset-selection' && <AssetSelection />}
-      {step === 'risk-selection' && <RiskSelection />}
-    </div>
-  );
-}
-
-export function SmartOnboarding() {
-  return (
-    <OnboardingProvider>
-      <OnboardingContent />
-    </OnboardingProvider>
-  );
-}
diff --git a/app/positions/components/onboarding/SuccessPage.tsx b/app/positions/components/onboarding/SuccessPage.tsx
index 8b87ba90..fbc4efa9 100644
--- a/app/positions/components/onboarding/SuccessPage.tsx
+++ b/app/positions/components/onboarding/SuccessPage.tsx
@@ -1,36 +1,51 @@
-import { Button } from '@nextui-org/react';
+import { useMemo } from 'react';
 import Link from 'next/link';
 import { FaCheckCircle } from 'react-icons/fa';
 import { useAccount } from 'wagmi';
+import { Button } from '@/components/common/Button';
 import { useOnboarding } from './OnboardingContext';
+// import { SupportedNetworks } from '@/utils/networks';
 
-export function SuccessPage() {
-  const { selectedToken } = useOnboarding();
+export function SuccessPage({ onClose }: { onClose: () => void }) {
+  const { selectedToken, resetOnboarding } = useOnboarding();
   const { address } = useAccount();
 
+  const allowAgentSetting = useMemo(() => {
+    return false;
+    // TODO: enable for next release with agent
+    // return selectedToken?.network === SupportedNetworks.Base
+  }, [selectedToken?.network]);
+
+  const handleFinished = () => {
+    onClose();
+    resetOnboarding();
+  };
+
   return (
     <div className="flex h-full flex-col items-center justify-center gap-8 p-8">
       <div className="flex flex-col items-center gap-4 text-center">
         <div className="flex flex-col items-center gap-2">
-          <FaCheckCircle className="h-16 w-16 text-green-500" />
-          <h1 className="text-4xl font-bold">Success!</h1>
+          <FaCheckCircle className="h-12 w-12 text-green-500" />
+          <h1 className="text-2xl font-bold">Success!</h1>
         </div>
-        <p className="max-w-md text-xl text-gray-600 dark:text-gray-300">
-          Your {selectedToken?.symbol} has been successfully supplied to Morpho Blue.
+        <p className="max-w-md text-gray-600 dark:text-gray-300">
+          Your {selectedToken?.symbol} has been successfully supplied to Morpho.{' '}
+          {allowAgentSetting &&
+            'You can set Monarch AutoPilot to automate reallocate your positions.'}
         </p>
       </div>
 
-      <div className="flex gap-4">
-        <Link href={`/positions/${address}`} className="no-underline">
-          <Button color="primary" className="min-w-[120px] rounded">
-            View Position
-          </Button>
-        </Link>
-        <Link href="/positions/onboarding" className="bg-surface border-1 no-underline">
-          <Button variant="light" className="min-w-[120px] rounded">
-            Supply More
-          </Button>
-        </Link>
+      <div className="mt-4 flex gap-4">
+        <Button variant="secondary" className="min-w-[120px] rounded" onClick={handleFinished}>
+          Close
+        </Button>
+        {allowAgentSetting && (
+          <Link href={`/positions/${address}`} className="no-underline">
+            <Button variant="cta" className="min-w-[120px] rounded">
+              Set AutoPilot
+            </Button>
+          </Link>
+        )}
       </div>
     </div>
   );
diff --git a/app/positions/onboarding/page.tsx b/app/positions/onboarding/page.tsx
deleted file mode 100644
index 70b6437d..00000000
--- a/app/positions/onboarding/page.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Metadata } from 'next';
-import { OnboardingContent } from '../components/onboarding/OnboardingContent';
-
-export const metadata: Metadata = {
-  title: 'New Position | Monarch',
-  description: 'Create a new position on Morpho Blue',
-};
-
-export default function OnboardingPage() {
-  return <OnboardingContent />;
-}
diff --git a/app/positions/report/components/ReportTable.tsx b/app/positions/report/components/ReportTable.tsx
index ce8fd16f..0abe295c 100644
--- a/app/positions/report/components/ReportTable.tsx
+++ b/app/positions/report/components/ReportTable.tsx
@@ -56,7 +56,7 @@ const formatDays = (seconds: number) => {
   return days.toFixed(2);
 };
 
-function MarketInfoBlock({
+function MarketSummaryBlock({
   market,
   interestEarned,
   decimals,
@@ -186,7 +186,7 @@ export function ReportTable({ report, asset, startDate, endDate, chainId }: Repo
         <h3 className="text-lg font-medium">Markets</h3>
         <div className="space-y-4">
           {report.marketReports
-            .filter(m => m.market.collateralAsset !== null)
+            .filter((m) => m.market.collateralAsset !== null)
             .slice()
             .sort((a, b) => {
               // First sort by active status
@@ -217,7 +217,7 @@ export function ReportTable({ report, asset, startDate, endDate, chainId }: Repo
                     className="w-full hover:bg-gray-50 dark:hover:bg-gray-800"
                     onClick={() => toggleMarket(marketKey)}
                   >
-                    <MarketInfoBlock
+                    <MarketSummaryBlock
                       market={marketReport.market}
                       interestEarned={marketReport.interestEarned}
                       amount={marketReport.endBalance}
diff --git a/docs/Styling.md b/docs/Styling.md
index 1eb91e76..ca3e4883 100644
--- a/docs/Styling.md
+++ b/docs/Styling.md
@@ -11,6 +11,9 @@ Use these shared components instead of raw HTML elements:
 
 ## Component Guidelines
 
+- Use `rounded` for tables, cards or bigger components
+- Use `rounded-sm` for buttons, inputs
+
 ### Button Component
 
 ```typescript
@@ -43,12 +46,6 @@ import { Button } from '@/components/common/Button';
   - Use for: Tertiary actions, subtle navigation
   - Example: "Refresh" buttons, utility actions
 
-#### 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
diff --git a/src/abis/monarch-agent-v1.ts b/src/abis/monarch-agent-v1.ts
new file mode 100644
index 00000000..c450e900
--- /dev/null
+++ b/src/abis/monarch-agent-v1.ts
@@ -0,0 +1,210 @@
+export default [
+  {
+    inputs: [{ internalType: 'address', name: '_morphoBlue', type: 'address' }],
+    stateMutability: 'nonpayable',
+    type: 'constructor',
+  },
+  {
+    anonymous: false,
+    inputs: [
+      { indexed: true, internalType: 'address', name: 'user', type: 'address' },
+      { indexed: true, internalType: 'bytes32', name: 'marketId', type: 'bytes32' },
+      { indexed: false, internalType: 'uint256', name: 'cap', type: 'uint256' },
+    ],
+    name: 'MarketConfigured',
+    type: 'event',
+  },
+  {
+    anonymous: false,
+    inputs: [
+      { indexed: true, internalType: 'address', name: 'user', type: 'address' },
+      { indexed: true, internalType: 'address', name: 'token', type: 'address' },
+      {
+        components: [
+          {
+            components: [
+              { internalType: 'address', name: 'loanToken', type: 'address' },
+              { internalType: 'address', name: 'collateralToken', type: 'address' },
+              { internalType: 'address', name: 'oracle', type: 'address' },
+              { internalType: 'address', name: 'irm', type: 'address' },
+              { internalType: 'uint256', name: 'lltv', type: 'uint256' },
+            ],
+            internalType: 'struct MarketParams',
+            name: 'market',
+            type: 'tuple',
+          },
+          { internalType: 'uint256', name: 'assets', type: 'uint256' },
+          { internalType: 'uint256', name: 'shares', type: 'uint256' },
+        ],
+        indexed: false,
+        internalType: 'struct RebalanceMarketParams[]',
+        name: 'fromMarkets',
+        type: 'tuple[]',
+      },
+      {
+        components: [
+          {
+            components: [
+              { internalType: 'address', name: 'loanToken', type: 'address' },
+              { internalType: 'address', name: 'collateralToken', type: 'address' },
+              { internalType: 'address', name: 'oracle', type: 'address' },
+              { internalType: 'address', name: 'irm', type: 'address' },
+              { internalType: 'uint256', name: 'lltv', type: 'uint256' },
+            ],
+            internalType: 'struct MarketParams',
+            name: 'market',
+            type: 'tuple',
+          },
+          { internalType: 'uint256', name: 'assets', type: 'uint256' },
+          { internalType: 'uint256', name: 'shares', type: 'uint256' },
+        ],
+        indexed: false,
+        internalType: 'struct RebalanceMarketParams[]',
+        name: 'toMarkets',
+        type: 'tuple[]',
+      },
+    ],
+    name: 'Rebalance',
+    type: 'event',
+  },
+  {
+    anonymous: false,
+    inputs: [
+      { indexed: true, internalType: 'address', name: 'user', type: 'address' },
+      { indexed: true, internalType: 'address', name: 'rebalancer', type: 'address' },
+    ],
+    name: 'RebalancerSet',
+    type: 'event',
+  },
+  {
+    inputs: [{ internalType: 'address', name: 'rebalancer', type: 'address' }],
+    name: 'authorize',
+    outputs: [],
+    stateMutability: 'nonpayable',
+    type: 'function',
+  },
+  {
+    inputs: [
+      { internalType: 'bytes32[]', name: 'marketIds', type: 'bytes32[]' },
+      { internalType: 'uint256[]', name: 'caps', type: 'uint256[]' },
+    ],
+    name: 'batchConfigMarkets',
+    outputs: [],
+    stateMutability: 'nonpayable',
+    type: 'function',
+  },
+  {
+    inputs: [
+      { internalType: 'address', name: 'user', type: 'address' },
+      { internalType: 'bytes32', name: 'marketId', type: 'bytes32' },
+    ],
+    name: 'marketCap',
+    outputs: [{ internalType: 'uint256', name: 'cap', type: 'uint256' }],
+    stateMutability: 'view',
+    type: 'function',
+  },
+  {
+    inputs: [],
+    name: 'morphoBlue',
+    outputs: [{ internalType: 'contract IMorpho', name: '', type: 'address' }],
+    stateMutability: 'view',
+    type: 'function',
+  },
+  {
+    inputs: [{ internalType: 'bytes[]', name: 'data', type: 'bytes[]' }],
+    name: 'multicall',
+    outputs: [{ internalType: 'bytes[]', name: 'results', type: 'bytes[]' }],
+    stateMutability: 'nonpayable',
+    type: 'function',
+  },
+  {
+    inputs: [
+      { internalType: 'address', name: 'onBehalf', type: 'address' },
+      { internalType: 'address', name: 'token', type: 'address' },
+      {
+        components: [
+          {
+            components: [
+              { internalType: 'address', name: 'loanToken', type: 'address' },
+              { internalType: 'address', name: 'collateralToken', type: 'address' },
+              { internalType: 'address', name: 'oracle', type: 'address' },
+              { internalType: 'address', name: 'irm', type: 'address' },
+              { internalType: 'uint256', name: 'lltv', type: 'uint256' },
+            ],
+            internalType: 'struct MarketParams',
+            name: 'market',
+            type: 'tuple',
+          },
+          { internalType: 'uint256', name: 'assets', type: 'uint256' },
+          { internalType: 'uint256', name: 'shares', type: 'uint256' },
+        ],
+        internalType: 'struct RebalanceMarketParams[]',
+        name: 'fromMarkets',
+        type: 'tuple[]',
+      },
+      {
+        components: [
+          {
+            components: [
+              { internalType: 'address', name: 'loanToken', type: 'address' },
+              { internalType: 'address', name: 'collateralToken', type: 'address' },
+              { internalType: 'address', name: 'oracle', type: 'address' },
+              { internalType: 'address', name: 'irm', type: 'address' },
+              { internalType: 'uint256', name: 'lltv', type: 'uint256' },
+            ],
+            internalType: 'struct MarketParams',
+            name: 'market',
+            type: 'tuple',
+          },
+          { internalType: 'uint256', name: 'assets', type: 'uint256' },
+          { internalType: 'uint256', name: 'shares', type: 'uint256' },
+        ],
+        internalType: 'struct RebalanceMarketParams[]',
+        name: 'toMarkets',
+        type: 'tuple[]',
+      },
+    ],
+    name: 'rebalance',
+    outputs: [],
+    stateMutability: 'payable',
+    type: 'function',
+  },
+  {
+    inputs: [{ internalType: 'address', name: 'user', type: 'address' }],
+    name: 'rebalancers',
+    outputs: [{ internalType: 'address', name: 'rebalancer', type: 'address' }],
+    stateMutability: 'view',
+    type: 'function',
+  },
+  { inputs: [], name: 'revoke', outputs: [], stateMutability: 'nonpayable', type: 'function' },
+  {
+    inputs: [
+      {
+        components: [
+          { internalType: 'address', name: 'authorizer', type: 'address' },
+          { internalType: 'address', name: 'authorized', type: 'address' },
+          { internalType: 'bool', name: 'isAuthorized', type: 'bool' },
+          { internalType: 'uint256', name: 'nonce', type: 'uint256' },
+          { internalType: 'uint256', name: 'deadline', type: 'uint256' },
+        ],
+        internalType: 'struct Authorization',
+        name: 'authorization',
+        type: 'tuple',
+      },
+      {
+        components: [
+          { internalType: 'uint8', name: 'v', type: 'uint8' },
+          { internalType: 'bytes32', name: 'r', type: 'bytes32' },
+          { internalType: 'bytes32', name: 's', type: 'bytes32' },
+        ],
+        internalType: 'struct Signature',
+        name: 'signature',
+        type: 'tuple',
+      },
+    ],
+    name: 'setMorphoAuthorization',
+    outputs: [],
+    stateMutability: 'nonpayable',
+    type: 'function',
+  },
+] as const;
diff --git a/src/components/OracleVendorBadge.tsx b/src/components/OracleVendorBadge.tsx
index 4c317b2c..a03c1b45 100644
--- a/src/components/OracleVendorBadge.tsx
+++ b/src/components/OracleVendorBadge.tsx
@@ -28,7 +28,7 @@ function OracleVendorBadge({
   const noFeeds = vendors.length === 0;
 
   const content = (
-    <div className={`flex items-center space-x-1 ${useTooltip ? '' : 'bg-main rounded p-1'}`}>
+    <div className="flex items-center space-x-1 rounded p-1">
       {showText && (
         <span className="mr-1 text-xs font-medium">
           {noFeeds ? 'No Oracle' : vendors.join(', ')}
diff --git a/src/components/SupplyProcessModal.tsx b/src/components/SupplyProcessModal.tsx
index 34345307..8ccb0a89 100644
--- a/src/components/SupplyProcessModal.tsx
+++ b/src/components/SupplyProcessModal.tsx
@@ -3,7 +3,7 @@ import { Cross1Icon } from '@radix-ui/react-icons';
 import { motion, AnimatePresence } from 'framer-motion';
 import { FaCheckCircle, FaCircle } from 'react-icons/fa';
 import { Market } from '@/utils/types';
-import { MarketAmountBlock } from './common/MarketInfoBlock';
+import { MarketInfoBlock } from './common/MarketInfoBlock';
 
 type MarketSupply = {
   market: Market;
@@ -120,7 +120,7 @@ export function SupplyProcessModal({
             <div className="mt-4 space-y-3">
               {supplies.map((supply) => {
                 return (
-                  <MarketAmountBlock
+                  <MarketInfoBlock
                     market={supply.market}
                     amount={supply.amount}
                     key={supply.market.uniqueKey}
diff --git a/src/components/common/MarketInfoBlock.tsx b/src/components/common/MarketInfoBlock.tsx
index 526b6b3c..0ab2b5ba 100644
--- a/src/components/common/MarketInfoBlock.tsx
+++ b/src/components/common/MarketInfoBlock.tsx
@@ -6,21 +6,19 @@ import { findToken } from '@/utils/tokens';
 import { Market } from '@/utils/types';
 import OracleVendorBadge from '../OracleVendorBadge';
 
-type MarketAmountBlockProps = {
+type MarketInfoBlockProps = {
   market: Market;
   amount?: bigint;
-  lltv?: string;
-  apy?: string;
   className?: string;
 };
 
-export function MarketAmountBlock({ market, amount }: MarketAmountBlockProps): JSX.Element {
+export function MarketInfoBlock({ market, amount, className }: MarketInfoBlockProps): 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"
+      className={`flex items-center justify-between rounded border border-gray-100 bg-gray-50/50 p-3 transition-all duration-200 ease-in-out dark:border-gray-700 dark:bg-gray-900/50 ${className}`}
     >
       <div className="flex items-center gap-3">
         {collateralToken?.img && (
@@ -46,7 +44,7 @@ export function MarketAmountBlock({ market, amount }: MarketAmountBlockProps): J
               {formatBalance(amount, market.loanAsset.decimals)} {market.loanAsset.symbol}
             </span>
           ) : (
-            <OracleVendorBadge showText oracleData={market.oracle.data} />
+            <OracleVendorBadge showText oracleData={market.oracle.data} useTooltip={false} />
           )}
         </div>
       </div>
diff --git a/src/components/providers/ClientProviders.tsx b/src/components/providers/ClientProviders.tsx
index c0b7aef1..130cc169 100644
--- a/src/components/providers/ClientProviders.tsx
+++ b/src/components/providers/ClientProviders.tsx
@@ -3,6 +3,7 @@
 import { ReactNode } from 'react';
 import { ToastContainer } from 'react-toastify';
 import { MarketsProvider } from '@/contexts/MarketsContext';
+import { OnboardingProvider } from 'app/positions/components/onboarding/OnboardingContext';
 
 type ClientProvidersProps = {
   children: ReactNode;
@@ -11,8 +12,10 @@ type ClientProvidersProps = {
 export function ClientProviders({ children }: ClientProvidersProps) {
   return (
     <MarketsProvider>
-      {children}
-      <ToastContainer position="bottom-right" bodyClassName="font-zen" />
+      <OnboardingProvider>
+        {children}
+        <ToastContainer position="bottom-right" bodyClassName="font-zen" />
+      </OnboardingProvider>
     </MarketsProvider>
   );
 }
diff --git a/src/components/supplyModal.tsx b/src/components/supplyModal.tsx
index d105d5cc..f9203512 100644
--- a/src/components/supplyModal.tsx
+++ b/src/components/supplyModal.tsx
@@ -19,7 +19,7 @@ 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 { MarketInfoBlock } from './common/MarketInfoBlock';
 import OracleVendorBadge from './OracleVendorBadge';
 import { SupplyProcessModal } from './SupplyProcessModal';
 
@@ -341,7 +341,7 @@ export function SupplyModal({ market, onClose }: SupplyModalProps): JSX.Element
             </p>
 
             <div className="my-2">
-              <MarketAmountBlock market={market} />
+              <MarketInfoBlock market={market} />
 
               <div className="my-2">Details</div>
 
diff --git a/src/components/withdrawModal.tsx b/src/components/withdrawModal.tsx
index bbfe6044..b009a513 100644
--- a/src/components/withdrawModal.tsx
+++ b/src/components/withdrawModal.tsx
@@ -7,7 +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 { MarketInfoBlock } from '@/components/common/MarketInfoBlock';
 import Input from '@/components/Input/Input';
 import AccountConnect from '@/components/layout/header/AccountConnect';
 import { useTransactionWithToast } from '@/hooks/useTransactionWithToast';
@@ -128,7 +128,7 @@ export function WithdrawModal({ position, onClose, refetch }: ModalProps): JSX.E
         </p>
 
         <div className="mb-2">
-          <MarketAmountBlock market={position.market} />
+          <MarketInfoBlock 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/hooks/useMultiMarketSupply.ts b/src/hooks/useMultiMarketSupply.ts
index 54b574c8..0747bce8 100644
--- a/src/hooks/useMultiMarketSupply.ts
+++ b/src/hooks/useMultiMarketSupply.ts
@@ -22,6 +22,7 @@ export function useMultiMarketSupply(
   supplies: MarketSupply[],
   useEth: boolean,
   usePermit2Setting: boolean,
+  onSuccess?: () => void,
 ) {
   const [currentStep, setCurrentStep] = useState<'approve' | 'signing' | 'supplying'>('approve');
   const [showProcessModal, setShowProcessModal] = useState(false);
@@ -66,6 +67,7 @@ export function useMultiMarketSupply(
     successDescription: `Successfully supplied to ${supplies.length} market${
       supplies.length > 1 ? 's' : ''
     }`,
+    onSuccess,
   });
 
   const executeSupplyTransaction = useCallback(async () => {
diff --git a/src/hooks/useTransactionWithToast.tsx b/src/hooks/useTransactionWithToast.tsx
index 2b66fa03..d5d841c9 100644
--- a/src/hooks/useTransactionWithToast.tsx
+++ b/src/hooks/useTransactionWithToast.tsx
@@ -37,6 +37,8 @@ export function useTransactionWithToast({
     hash,
   });
 
+  console.log('isConfirmed', isConfirmed, toastId, hash);
+
   const onClick = useCallback(() => {
     if (hash) {
       // if chainId is not supported, use 1
diff --git a/src/imgs/tokens/usol.png b/src/imgs/tokens/usol.png
new file mode 100644
index 00000000..2e51e926
Binary files /dev/null and b/src/imgs/tokens/usol.png differ
diff --git a/src/imgs/tokens/usui.png b/src/imgs/tokens/usui.png
new file mode 100644
index 00000000..4610ffd5
Binary files /dev/null and b/src/imgs/tokens/usui.png differ
diff --git a/src/utils/monarch-agent.ts b/src/utils/monarch-agent.ts
new file mode 100644
index 00000000..1a715399
--- /dev/null
+++ b/src/utils/monarch-agent.ts
@@ -0,0 +1 @@
+export const AGENT_CONTRACT = '0x3ec3a96DA83b486d73C65a35d9eA1936195Af99F';
diff --git a/src/utils/tokens.ts b/src/utils/tokens.ts
index dea084b3..4ee28eab 100644
--- a/src/utils/tokens.ts
+++ b/src/utils/tokens.ts
@@ -240,7 +240,10 @@ const supportedTokens = [
     symbol: 'lBTC',
     img: require('../imgs/tokens/lbtc.webp') as string,
     decimals: 8,
-    networks: [{ chain: mainnet, address: '0x8236a87084f8B84306f72007F36F2618A5634494' }],
+    networks: [
+      { chain: mainnet, address: '0x8236a87084f8B84306f72007F36F2618A5634494' },
+      { chain: base, address: '0xecAc9C5F704e954931349Da37F60E39f515c11c1' },
+    ],
   },
   {
     symbol: 'rsETH',
@@ -382,6 +385,18 @@ const supportedTokens = [
     decimals: 18,
     networks: [{ chain: base, address: '0x7FcD174E80f264448ebeE8c88a7C4476AAF58Ea6' }],
   },
+  {
+    symbol: 'uSOL',
+    img: require('../imgs/tokens/usol.png') as string,
+    decimals: 18,
+    networks: [{ chain: base, address: '0x9B8Df6E244526ab5F6e6400d331DB28C8fdDdb55' }],
+  },
+  {
+    symbol: 'uSui',
+    img: require('../imgs/tokens/usui.png') as string,
+    decimals: 18,
+    networks: [{ chain: base, address: '0xb0505e5a99abd03d94a1169e638B78EDfEd26ea4' }],
+  },
 ];
 
 const isWhitelisted = (address: string, chainId: number) => {