diff --git a/packages/ui/app/_components/Modal.tsx b/packages/ui/app/_components/Modal.tsx
deleted file mode 100644
index c99224528..000000000
--- a/packages/ui/app/_components/Modal.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import React, { useEffect, useState } from 'react';
-
-import Image from 'next/image';
-
-export type ModalProps = {
-  children: React.ReactNode;
-  close: () => void;
-};
-
-export default function Modal({ children, close }: ModalProps) {
-  const [isMounted, setIsMounted] = useState<boolean>(false);
-
-  /**
-   * Animation
-   */
-  useEffect(() => {
-    setIsMounted(true);
-  }, []);
-
-  useEffect(() => {
-    let closeTimer: ReturnType<typeof setTimeout>;
-
-    if (!isMounted) {
-      closeTimer = setTimeout(() => {
-        close();
-      }, 301);
-    }
-
-    return () => {
-      clearTimeout(closeTimer);
-    };
-  }, [close, isMounted]);
-
-  return (
-    <div
-      className={` z-40 fixed top-0 right-0 w-full h-screen  bg-black/25 flex overflow-y-scroll transition-opacity duration-300 animate-fade-in ${
-        isMounted && 'animated'
-      }`}
-    >
-      <div
-        className={`w-[85%] max-w-[800px] m-auto relative p-6 bg-grayUnselect rounded-xl scrollbar-hide transition-all duration-300 animate-pop-in ${
-          isMounted && 'animated'
-        }`}
-      >
-        <Image
-          alt="close"
-          className={` h-5 z-10 absolute right-4 top-3 cursor-pointer `}
-          height="20"
-          onClick={() => setIsMounted(false)}
-          src="/img/assets/close.png"
-          width="20"
-        />
-
-        {children}
-      </div>
-    </div>
-  );
-}
diff --git a/packages/ui/app/_components/dialogs/loop/index.tsx b/packages/ui/app/_components/dialogs/loop/index.tsx
index 98822b45c..4642de872 100644
--- a/packages/ui/app/_components/dialogs/loop/index.tsx
+++ b/packages/ui/app/_components/dialogs/loop/index.tsx
@@ -14,6 +14,12 @@ import {
 } from 'viem';
 import { useBalance, useChainId } from 'wagmi';
 
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle
+} from '@ui/components/ui/dialog';
 import { INFO_MESSAGES } from '@ui/constants/index';
 import { useMultiIonic } from '@ui/context/MultiIonicContext';
 import { useCurrentLeverageRatio } from '@ui/hooks/leverage/useCurrentLeverageRatio';
@@ -31,7 +37,6 @@ import BorrowActions from './BorrowActions';
 import LoopHealthRatioDisplay from './LoopHealthRatioDisplay';
 import LoopInfoDisplay from './LoopInfoDisplay';
 import SupplyActions from './SupplyActions';
-import Modal from '../../Modal';
 import ResultHandler from '../../ResultHandler';
 import TransactionStepsHandler, {
   useTransactionSteps
@@ -44,21 +49,21 @@ const SwapWidget = dynamic(() => import('../../markets/SwapWidget'), {
 });
 
 export type LoopProps = {
+  isOpen: boolean;
+  setIsOpen: (open: boolean) => void;
   borrowableAssets: Address[];
-  closeLoop: () => void;
   comptrollerAddress: Address;
   currentBorrowAsset?: MarketData;
-  isOpen: boolean;
   selectedCollateralAsset: MarketData;
 };
 
 export default function Loop({
+  isOpen,
+  setIsOpen,
   borrowableAssets,
-  closeLoop,
   comptrollerAddress,
   currentBorrowAsset,
-  selectedCollateralAsset,
-  isOpen
+  selectedCollateralAsset
 }: LoopProps) {
   const chainId = useChainId();
   const [amount, setAmount] = useState<string>();
@@ -570,82 +575,87 @@ export default function Loop({
 
   return (
     <>
-      {isOpen && (
-        <>
-          <SwapWidget
-            close={() => setSwapWidgetOpen(false)}
-            open={swapWidgetOpen}
-            fromChain={chainId}
-            toChain={chainId}
-            toToken={selectedCollateralAsset.underlyingToken}
-          />
-          <Modal close={() => closeLoop()}>
-            <div className="flex mb-4 items-center text-lg font-bold">
-              <Image
-                alt=""
-                className="mr-2"
-                height="20"
-                src={`/img/symbols/32/color/${selectedCollateralAsset.underlyingSymbol.toLowerCase()}.png`}
-                width="20"
-              />
-
-              {selectedCollateralAsset.underlyingSymbol}
-            </div>
-
-            <div className="flex mb-4 items-center text-sm font-bold">
-              {currentPosition
-                ? `Loop Position Found: `
-                : 'No Loop Position Found, Create a New One'}
-              {currentPosition && (
-                <a
-                  href={`${getScanUrlByChainId(chainId)}/address/${currentPosition.address}`}
-                  target="_blank"
-                  className="text-cyan-400 pl-2"
-                >
-                  0x{currentPosition.address.slice(2, 4)}...
-                  {currentPosition.address.slice(-6)}
-                </a>
-              )}
-            </div>
-            <button
-              className={`w-full font-bold uppercase rounded-md py-1 transition-colors bg-accent text-darkone text-xs mx-auto mb-4`}
-              onClick={() => setSwapWidgetOpen(true)}
-            >
-              Get {selectedCollateralAsset.underlyingSymbol}
-            </button>
+      <SwapWidget
+        close={() => setSwapWidgetOpen(false)}
+        open={swapWidgetOpen}
+        fromChain={chainId}
+        toChain={chainId}
+        toToken={selectedCollateralAsset.underlyingToken}
+      />
+      <Dialog
+        open={isOpen}
+        onOpenChange={setIsOpen}
+      >
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>
+              <div className="flex items-center text-lg font-bold">
+                <Image
+                  alt=""
+                  className="mr-2"
+                  height="20"
+                  src={`/img/symbols/32/color/${selectedCollateralAsset.underlyingSymbol.toLowerCase()}.png`}
+                  width="20"
+                />
+                {selectedCollateralAsset.underlyingSymbol}
+              </div>
+            </DialogTitle>
+          </DialogHeader>
 
-            <div className="lg:flex justify-between items-center">
-              <div className="grow-0 shrink-0 basis-[45%]">
-                <div
-                  className={`flex w-full items-center justify-between mb-1 hint-text-uppercase `}
+          <div className="flex mb-4 items-center text-sm font-bold">
+            {currentPosition
+              ? `Loop Position Found: `
+              : 'No Loop Position Found, Create a New One'}
+            {currentPosition && (
+              <a
+                href={`${getScanUrlByChainId(chainId)}/address/${currentPosition.address}`}
+                target="_blank"
+                className="text-cyan-400 pl-2"
+              >
+                0x{currentPosition.address.slice(2, 4)}...
+                {currentPosition.address.slice(-6)}
+              </a>
+            )}
+          </div>
+          <button
+            className={`w-full font-bold uppercase rounded-md py-1 transition-colors bg-accent text-darkone text-xs mx-auto mb-4`}
+            onClick={() => setSwapWidgetOpen(true)}
+          >
+            Get {selectedCollateralAsset.underlyingSymbol}
+          </button>
+
+          <div className="lg:flex justify-between items-center">
+            <div className="grow-0 shrink-0 basis-[45%]">
+              <div
+                className={`flex w-full items-center justify-between mb-1 hint-text-uppercase `}
+              >
+                <span className={``}>Position Value</span>
+                <ResultHandler
+                  height="20"
+                  isLoading={isFetchingPositionInfo}
+                  width="20"
                 >
-                  <span className={``}>Position Value</span>
-                  <ResultHandler
-                    height="20"
-                    isLoading={isFetchingPositionInfo}
-                    width="20"
-                  >
-                    <span className={`flex text-sm font-bold pl-2 text-white`}>
-                      ${positionValueMillified}
-                    </span>
-                  </ResultHandler>
-                </div>
-                <div
-                  className={`flex w-full items-center justify-between mb-1 hint-text-uppercase `}
+                  <span className={`flex text-sm font-bold pl-2 text-white`}>
+                    ${positionValueMillified}
+                  </span>
+                </ResultHandler>
+              </div>
+              <div
+                className={`flex w-full items-center justify-between mb-1 hint-text-uppercase `}
+              >
+                <span className={``}>Net APR</span>
+                <ResultHandler
+                  height="20"
+                  isLoading={isFetchingPositionNetApy}
+                  width="20"
                 >
-                  <span className={``}>Net APR</span>
-                  <ResultHandler
-                    height="20"
-                    isLoading={isFetchingPositionNetApy}
-                    width="20"
-                  >
-                    <span className={`flex text-sm font-bold pl-2 text-white`}>
-                      {positionNetApy?.toFixed(2) ?? '0.00'}%
-                    </span>
-                  </ResultHandler>
-                </div>
-
-                {/* <div
+                  <span className={`flex text-sm font-bold pl-2 text-white`}>
+                    {positionNetApy?.toFixed(2) ?? '0.00'}%
+                  </span>
+                </ResultHandler>
+              </div>
+
+              {/* <div
                 className={`flex w-full items-center justify-between mb-1 hint-text-uppercase `}
               >
                 <span className={``}>Annual yield</span>
@@ -653,32 +663,31 @@ export default function Loop({
                   TODO
                 </span>
               </div> */}
-              </div>
-
-              <div className={`separator lg:hidden`} />
-
-              <div className="separator-vertical hidden lg:block" />
-
-              <LoopHealthRatioDisplay
-                currentValue={positionValueMillified}
-                healthRatio={healthRatio}
-                liquidationValue={millify(liquidationValue)}
-                projectedHealthRatio={
-                  parseFloat(amount ?? '0') > 0 ||
-                  (!!currentPositionLeverageRatio &&
-                    Math.round(currentPositionLeverageRatio) !==
-                      currentLeverage)
-                    ? projectedHealthRatio
-                    : undefined
-                }
-              />
             </div>
 
-            <div className={`separator`} />
-
-            <div className="md:flex justify-between items-center">
-              <LoopInfoDisplay
-                aprPercentage={`
+            <div className={`separator lg:hidden`} />
+
+            <div className="separator-vertical hidden lg:block" />
+
+            <LoopHealthRatioDisplay
+              currentValue={positionValueMillified}
+              healthRatio={healthRatio}
+              liquidationValue={millify(liquidationValue)}
+              projectedHealthRatio={
+                parseFloat(amount ?? '0') > 0 ||
+                (!!currentPositionLeverageRatio &&
+                  Math.round(currentPositionLeverageRatio) !== currentLeverage)
+                  ? projectedHealthRatio
+                  : undefined
+              }
+            />
+          </div>
+
+          <div className={`separator`} />
+
+          <div className="md:flex justify-between items-center">
+            <LoopInfoDisplay
+              aprPercentage={`
                   ${
                     collateralsAPR &&
                     collateralsAPR[selectedCollateralAsset.cToken]
@@ -689,186 +698,181 @@ export default function Loop({
                   }
                   %
               `}
-                aprText={'Collateral APR'}
-                isLoading={
-                  isFetchingPositionInfo ||
-                  typeof collateralsAPR === 'undefined'
-                }
-                nativeAmount={
-                  currentPosition
-                    ? formatUnits(
-                        positionInfo?.equityAmount ?? 0n,
-                        Number(currentPosition.collateral.underlyingDecimals)
-                      )
-                    : '0'
-                }
-                symbol={selectedCollateralAsset.underlyingSymbol}
-                title={'My Collateral'}
-                usdAmount={
-                  currentPosition
-                    ? millify(
-                        Number(
-                          formatUnits(
-                            positionInfo?.equityAmount ?? 0n,
-                            selectedCollateralAsset.underlyingDecimals
-                          )
-                        ) * selectedCollateralAssetUSDPrice
-                      )
-                    : '0'
-                }
-              />
-
-              <div className="separator lg:hidden" />
-
-              <div className="separator-vertical hidden lg:block" />
-
-              <LoopInfoDisplay
-                aprPercentage={`
+              aprText={'Collateral APR'}
+              isLoading={
+                isFetchingPositionInfo || typeof collateralsAPR === 'undefined'
+              }
+              nativeAmount={
+                currentPosition
+                  ? formatUnits(
+                      positionInfo?.equityAmount ?? 0n,
+                      Number(currentPosition.collateral.underlyingDecimals)
+                    )
+                  : '0'
+              }
+              symbol={selectedCollateralAsset.underlyingSymbol}
+              title={'My Collateral'}
+              usdAmount={
+                currentPosition
+                  ? millify(
+                      Number(
+                        formatUnits(
+                          positionInfo?.equityAmount ?? 0n,
+                          selectedCollateralAsset.underlyingDecimals
+                        )
+                      ) * selectedCollateralAssetUSDPrice
+                    )
+                  : '0'
+              }
+            />
+
+            <div className="separator lg:hidden" />
+
+            <div className="separator-vertical hidden lg:block" />
+
+            <LoopInfoDisplay
+              aprPercentage={`
                   ${Number(formatEther(borrowApr ?? 0n)).toFixed(2)}
                   %
               `}
-                aprText={'Borrow APR'}
-                isLoading={isFetchingPositionInfo}
-                nativeAmount={borrowedAssetAmount.toFixed(
-                  selectedBorrowAsset?.underlyingDecimals ?? 18
-                )}
-                symbol={selectedBorrowAsset?.underlyingSymbol ?? ''}
-                title={'My Borrow'}
-                usdAmount={millify(
-                  borrowedAssetAmount * selectedBorrowAssetUSDPrice
-                )}
-              />
-            </div>
-
-            <div className="separator" />
+              aprText={'Borrow APR'}
+              isLoading={isFetchingPositionInfo}
+              nativeAmount={borrowedAssetAmount.toFixed(
+                selectedBorrowAsset?.underlyingDecimals ?? 18
+              )}
+              symbol={selectedBorrowAsset?.underlyingSymbol ?? ''}
+              title={'My Borrow'}
+              usdAmount={millify(
+                borrowedAssetAmount * selectedBorrowAssetUSDPrice
+              )}
+            />
+          </div>
+
+          <div className="separator" />
+
+          {currentPosition && (
+            <>
+              <div className="md:flex justify-between items-center">
+                <LoopInfoDisplay
+                  isLoading={isFetchingPositionInfo || !collateralsAPR}
+                  nativeAmount={projectedCollateral}
+                  symbol={selectedCollateralAsset.underlyingSymbol}
+                  title={'Projected Collateral'}
+                  usdAmount={millify(projectedCollateralValue)}
+                />
+
+                <div className="separator lg:hidden" />
+
+                <div className="separator-vertical hidden lg:block" />
+
+                <LoopInfoDisplay
+                  isLoading={isFetchingPositionInfo}
+                  nativeAmount={projectedBorrowAmount.toString() ?? '0'}
+                  symbol={selectedBorrowAsset?.underlyingSymbol ?? ''}
+                  title={'Projected Borrow'}
+                  usdAmount={millify(
+                    Number(projectedBorrowAmount) * selectedBorrowAssetUSDPrice
+                  )}
+                />
+              </div>
 
-            {currentPosition && (
+              <div className="separator" />
+            </>
+          )}
+
+          <div className="lg:flex justify-between items-center">
+            <SupplyActions
+              amount={amount}
+              comptrollerAddress={comptrollerAddress}
+              handleClosePosition={handleClosePosition}
+              isClosingPosition={!!transactionSteps.length}
+              selectedCollateralAsset={selectedCollateralAsset}
+              selectedCollateralAssetUSDPrice={selectedCollateralAssetUSDPrice}
+              setAmount={setAmount}
+            />
+
+            <div className="separator lg:hidden" />
+
+            <div className="separator-vertical hidden lg:block" />
+
+            <BorrowActions
+              borrowAmount={(
+                (parseFloat(amount ?? '0') / borrowedToCollateralRatio) *
+                (currentLeverage - 1)
+              ).toFixed(
+                parseInt(
+                  selectedBorrowAsset?.underlyingDecimals.toString() ?? '18'
+                )
+              )}
+              borrowableAssets={borrowableAssets}
+              currentLeverage={currentLeverage}
+              currentPositionLeverage={
+                currentPositionLeverageRatio
+                  ? Math.round(currentPositionLeverageRatio)
+                  : undefined
+              }
+              selectedBorrowAsset={selectedBorrowAsset}
+              selectedBorrowAssetUSDPrice={selectedBorrowAssetUSDPrice}
+              setCurrentLeverage={setCurrentLeverage}
+              setSelectedBorrowAsset={setSelectedBorrowAsset}
+            />
+          </div>
+
+          <div className="mt-4">
+            <ResultHandler
+              center
+              height="32"
+              isLoading={isFetchingPositionInfo}
+            >
               <>
-                <div className="md:flex justify-between items-center">
-                  <LoopInfoDisplay
-                    isLoading={isFetchingPositionInfo || !collateralsAPR}
-                    nativeAmount={projectedCollateral}
-                    symbol={selectedCollateralAsset.underlyingSymbol}
-                    title={'Projected Collateral'}
-                    usdAmount={millify(projectedCollateralValue)}
-                  />
-
-                  <div className="separator lg:hidden" />
-
-                  <div className="separator-vertical hidden lg:block" />
-
-                  <LoopInfoDisplay
-                    isLoading={isFetchingPositionInfo}
-                    nativeAmount={projectedBorrowAmount.toString() ?? '0'}
-                    symbol={selectedBorrowAsset?.underlyingSymbol ?? ''}
-                    title={'Projected Borrow'}
-                    usdAmount={millify(
-                      Number(projectedBorrowAmount) *
-                        selectedBorrowAssetUSDPrice
-                    )}
-                  />
-                </div>
-
-                <div className="separator" />
-              </>
-            )}
-
-            <div className="lg:flex justify-between items-center">
-              <SupplyActions
-                amount={amount}
-                comptrollerAddress={comptrollerAddress}
-                handleClosePosition={handleClosePosition}
-                isClosingPosition={!!transactionSteps.length}
-                selectedCollateralAsset={selectedCollateralAsset}
-                selectedCollateralAssetUSDPrice={
-                  selectedCollateralAssetUSDPrice
-                }
-                setAmount={setAmount}
-              />
-
-              <div className="separator lg:hidden" />
-
-              <div className="separator-vertical hidden lg:block" />
-
-              <BorrowActions
-                borrowAmount={(
-                  (parseFloat(amount ?? '0') / borrowedToCollateralRatio) *
-                  (currentLeverage - 1)
-                ).toFixed(
-                  parseInt(
-                    selectedBorrowAsset?.underlyingDecimals.toString() ?? '18'
-                  )
-                )}
-                borrowableAssets={borrowableAssets}
-                currentLeverage={currentLeverage}
-                currentPositionLeverage={
-                  currentPositionLeverageRatio
-                    ? Math.round(currentPositionLeverageRatio)
-                    : undefined
-                }
-                selectedBorrowAsset={selectedBorrowAsset}
-                selectedBorrowAssetUSDPrice={selectedBorrowAssetUSDPrice}
-                setCurrentLeverage={setCurrentLeverage}
-                setSelectedBorrowAsset={setSelectedBorrowAsset}
-              />
-            </div>
-
-            <div className="mt-4">
-              <ResultHandler
-                center
-                height="32"
-                isLoading={isFetchingPositionInfo}
-              >
-                <>
-                  {transactionSteps.length > 0 ? (
-                    <div className="flex justify-center">
-                      <TransactionStepsHandler
-                        chainId={chainId}
-                        resetTransactionSteps={handleTransactionStepsReset}
-                        transactionSteps={transactionSteps}
-                      />
-                    </div>
-                  ) : (
-                    <>
-                      {currentPosition ? (
-                        <div className="md:flex">
-                          <button
-                            className={`block w-full btn-green md:mr-6 uppercase`}
-                            disabled={parseFloat(amount ?? '0') <= 0}
-                            onClick={handlePositionFunding}
-                          >
-                            Fund position
-                          </button>
-
-                          <button
-                            className={`block w-full btn-green mt-2 md:mt-0 md:ml-6 uppercase`}
-                            disabled={
-                              !!currentPositionLeverageRatio &&
-                              Math.round(currentPositionLeverageRatio) ===
-                                currentLeverage
-                            }
-                            onClick={handleLeverageAdjustment}
-                          >
-                            Adjust leverage
-                          </button>
-                        </div>
-                      ) : (
+                {transactionSteps.length > 0 ? (
+                  <div className="flex justify-center">
+                    <TransactionStepsHandler
+                      chainId={chainId}
+                      resetTransactionSteps={handleTransactionStepsReset}
+                      transactionSteps={transactionSteps}
+                    />
+                  </div>
+                ) : (
+                  <>
+                    {currentPosition ? (
+                      <div className="md:flex">
                         <button
-                          className={`block w-full btn-green uppercase`}
+                          className={`block w-full btn-green md:mr-6 uppercase`}
                           disabled={parseFloat(amount ?? '0') <= 0}
-                          onClick={handleOpenPosition}
+                          onClick={handlePositionFunding}
                         >
-                          Loop
+                          Fund position
                         </button>
-                      )}
-                    </>
-                  )}
-                </>
-              </ResultHandler>
-            </div>
-          </Modal>
-        </>
-      )}
+
+                        <button
+                          className={`block w-full btn-green mt-2 md:mt-0 md:ml-6 uppercase`}
+                          disabled={
+                            !!currentPositionLeverageRatio &&
+                            Math.round(currentPositionLeverageRatio) ===
+                              currentLeverage
+                          }
+                          onClick={handleLeverageAdjustment}
+                        >
+                          Adjust leverage
+                        </button>
+                      </div>
+                    ) : (
+                      <button
+                        className={`block w-full btn-green uppercase`}
+                        disabled={parseFloat(amount ?? '0') <= 0}
+                        onClick={handleOpenPosition}
+                      >
+                        Loop
+                      </button>
+                    )}
+                  </>
+                )}
+              </>
+            </ResultHandler>
+          </div>
+        </DialogContent>
+      </Dialog>
     </>
   );
 }
diff --git a/packages/ui/app/dashboard/page.tsx b/packages/ui/app/dashboard/page.tsx
index 8f2cc8428..a392100bb 100644
--- a/packages/ui/app/dashboard/page.tsx
+++ b/packages/ui/app/dashboard/page.tsx
@@ -174,7 +174,7 @@ export default function Dashboard() {
   );
   const [selectedLoopBorrowData, setSelectedLoopBorrowData] =
     useState<MarketData>();
-  const [loopOpen, setLoopOpen] = useState<boolean>(false);
+  const [isLoopDialogOpen, setIsLoopDialogOpen] = useState<boolean>(false);
   const { data: healthData, isLoading: isLoadingHealthData } = useHealthFactor(
     marketData?.comptroller,
     +chain
@@ -720,7 +720,7 @@ export default function Dashboard() {
                         usdPrice={usdPrice ?? undefined}
                         setSelectedLoopBorrowData={setSelectedLoopBorrowData}
                         setSelectedSymbol={setSelectedSymbol}
-                        setLoopOpen={setLoopOpen}
+                        setLoopOpen={setIsLoopDialogOpen}
                         chain={+chain}
                       />
                     );
@@ -739,12 +739,10 @@ export default function Dashboard() {
       {selectedMarketData && (
         <Loop
           borrowableAssets={loopData ? loopData[selectedMarketData.cToken] : []}
-          closeLoop={() => {
-            setLoopOpen(false);
-          }}
+          isOpen={isLoopDialogOpen}
+          setIsOpen={setIsLoopDialogOpen}
           comptrollerAddress={marketData?.comptroller ?? ('' as Address)}
           currentBorrowAsset={selectedLoopBorrowData}
-          isOpen={loopOpen}
           selectedCollateralAsset={selectedMarketData}
         />
       )}
diff --git a/packages/ui/app/market/page.tsx b/packages/ui/app/market/page.tsx
index 37a15407b..79eb7cc12 100644
--- a/packages/ui/app/market/page.tsx
+++ b/packages/ui/app/market/page.tsx
@@ -293,7 +293,7 @@ export default function Market() {
       {loopProps && (
         <Loop
           {...loopProps}
-          closeLoop={() => setIsLoopDialogOpen(false)}
+          setIsOpen={setIsLoopDialogOpen}
           isOpen={isLoopDialogOpen}
         />
       )}