diff --git a/src/components/AssetDialog.tsx b/src/components/AssetDialog.tsx
index b8bda39..8205f13 100644
--- a/src/components/AssetDialog.tsx
+++ b/src/components/AssetDialog.tsx
@@ -4,14 +4,14 @@ import ListItem from 'components/ListItem';
 import SkeletonListItem from 'components/SkeletonListItem';
 import { displayFunctionsAtom } from 'store/app';
 import type { Brand } from '@agoric/ertp/src/types';
+import { anchorBrandsAtom } from 'store/swap';
 
 const AssetDialog = ({
-  brands,
   handleBrandSelected,
 }: {
-  brands: Array<Brand>;
   handleBrandSelected: (brand: Brand) => void;
 }) => {
+  const brands = useAtomValue(anchorBrandsAtom);
   const { displayBrandPetname } = useAtomValue(displayFunctionsAtom);
   const brandSections =
     brands && brands.length
diff --git a/src/components/DialogSwap.tsx b/src/components/DialogSwap.tsx
index dd39c16..35bb299 100644
--- a/src/components/DialogSwap.tsx
+++ b/src/components/DialogSwap.tsx
@@ -4,33 +4,40 @@ import { AnimatePresence, motion } from 'framer-motion';
 import { FiX, FiExternalLink } from 'react-icons/fi';
 import AssetDialog from 'components/AssetDialog';
 import type { Brand } from '@agoric/ertp/src/types';
+import { useAtom, useAtomValue } from 'jotai';
+import {
+  assetSelectionDialogOpenAtom,
+  selectedAnchorPetnameAtom,
+} from 'store/swap';
+import { displayFunctionsAtom } from 'store/app';
+
+const DialogSwap = () => {
+  const { displayBrandPetname } = useAtomValue(displayFunctionsAtom);
+  const [selectedAnchorBrandPetname, setSelectedAnchorBrandPetname] = useAtom(
+    selectedAnchorPetnameAtom
+  );
+  const [assetSelectionDialogOpen, setAssetSelectionDialogOpen] = useAtom(
+    assetSelectionDialogOpenAtom
+  );
+
+  const handleBrandSelected = (brand: Brand | null) => {
+    setSelectedAnchorBrandPetname(displayBrandPetname(brand));
+    setAssetSelectionDialogOpen(false);
+  };
+  const close = () => setAssetSelectionDialogOpen(false);
 
-const DialogSwap = ({
-  open,
-  handleClose,
-  brands,
-  selectedBrand,
-  handleBrandSelected,
-}: {
-  open: boolean;
-  handleClose: () => void;
-  brands: Array<Brand>;
-  handleBrandSelected: (brand: Brand | null) => void;
-  selectedBrand?: Brand | null;
-  purseOnly?: boolean;
-}) => {
   return (
     <AnimatePresence>
-      {open && (
+      {assetSelectionDialogOpen && (
         <motion.div
-          key={selectedBrand ? 'purseDialog' : 'assetDialog'}
+          key={selectedAnchorBrandPetname ? 'purseDialog' : 'assetDialog'}
           initial={{ opacity: 0 }}
           animate={{ opacity: 1 }}
           exit={{ opacity: 0 }}
           transition={{ duration: 0.5 }}
           className="fixed top-0 left-0 w-screen h-screen bg-black bg-opacity-10 flex items-center justify-center px-4 py-6 z-50"
         >
-          <div className="absolute w-full h-full " onClick={handleClose} />
+          <div className="absolute w-full h-full" onClick={close} />
           <motion.div
             className="bg-white flex flex-col w-full max-w-md rounded-sm max-h-full  z-50"
             initial={{ scale: 0 }}
@@ -51,15 +58,12 @@ const DialogSwap = ({
               </div>
               <button
                 className="text-2xl hover:bg-gray-100 p-1 rounded-sm cursor-pointer"
-                onClick={handleClose}
+                onClick={close}
               >
                 <FiX />
               </button>
             </div>
-            <AssetDialog
-              handleBrandSelected={handleBrandSelected}
-              brands={brands}
-            />
+            <AssetDialog handleBrandSelected={handleBrandSelected} />
           </motion.div>
         </motion.div>
       )}
diff --git a/src/components/SectionSwap.tsx b/src/components/SectionSwap.tsx
index 5a2219d..2099ec3 100644
--- a/src/components/SectionSwap.tsx
+++ b/src/components/SectionSwap.tsx
@@ -1,12 +1,10 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
-import { useState } from 'react';
 import { motion } from 'framer-motion';
 import { FiChevronDown } from 'react-icons/fi';
-import { useAtomValue, useAtom } from 'jotai';
+import { useAtomValue, useAtom, useSetAtom } from 'jotai';
 import clsx from 'clsx';
 import CustomInput from 'components/CustomInput';
-import DialogSwap from 'components/DialogSwap';
 import { displayFunctionsAtom, previewEnabledAtom } from 'store/app';
 import { displayPetname } from 'utils/displayFunctions';
 import {
@@ -16,11 +14,9 @@ import {
   toPurseAtom,
   swapDirectionAtom,
   SwapDirection,
-  anchorBrandsAtom,
-  selectedAnchorPetnameAtom,
+  assetSelectionDialogOpenAtom,
 } from 'store/swap';
 import { AmountMath } from '@agoric/ertp';
-import type { Brand } from '@agoric/ertp/src/types';
 
 export enum SectionSwapType {
   FROM = 'FROM',
@@ -34,13 +30,9 @@ const SectionSwap = ({ type }: { type: SectionSwapType }) => {
   const toPurse = useAtomValue(toPurseAtom);
   const [toAmount, setToAmount] = useAtom(toAmountAtom);
   const [fromAmount, setFromAmount] = useAtom(fromAmountAtom);
-  const [open, setOpen] = useState(false);
+  const setAssetSelectionDialogOpen = useSetAtom(assetSelectionDialogOpenAtom);
   const swapDirection = useAtomValue(swapDirectionAtom);
   const previewEnabled = useAtomValue(previewEnabledAtom);
-  const brands = useAtomValue(anchorBrandsAtom);
-  const [_selectedAnchorBrandPetname, setSelectedAnchorBrandPetname] = useAtom(
-    selectedAnchorPetnameAtom
-  );
 
   const isMinted =
     (swapDirection === SwapDirection.WantMinted &&
@@ -51,11 +43,6 @@ const SectionSwap = ({ type }: { type: SectionSwapType }) => {
   const value =
     type === SectionSwapType.TO ? toAmount?.value : fromAmount?.value;
 
-  const handleBrandSelected = (brand: Brand | null) => {
-    setSelectedAnchorBrandPetname(displayBrandPetname(brand));
-    setOpen(false);
-  };
-
   const purse = type === SectionSwapType.TO ? toPurse : fromPurse;
   const brand = purse?.brand;
 
@@ -71,70 +58,60 @@ const SectionSwap = ({ type }: { type: SectionSwapType }) => {
   };
 
   return (
-    <>
-      <DialogSwap
-        open={open}
-        handleClose={() => setOpen(false)}
-        brands={brands}
-        selectedBrand={brand}
-        handleBrandSelected={handleBrandSelected}
-      />
-      <motion.div
-        className="flex flex-col bg-alternative p-4 rounded-sm gap-2 select-none"
-        layout
-      >
-        <h3 className="text-xs uppercase text-gray-500 tracking-wide font-medium select-none">
-          Swap {type}
-        </h3>
-        <div className="flex gap-3 items-center">
-          <div className="w-8 h-8">
-            <img
-              className="w-8 h-8"
-              alt="brand icon"
-              src={displayBrandIcon(brand)}
-            />
-          </div>
-          {purse ? (
-            <div
-              className={clsx(
-                'flex flex-col w-28 p-1 rounded-sm',
-                !isMinted && 'hover:bg-black cursor-pointer hover:bg-opacity-5'
-              )}
-              onClick={() => {
-                !isMinted && setOpen(true);
-              }}
-            >
-              <div className="flex items-center justify-between">
-                <h2 className="text-base font-medium">
-                  {displayBrandPetname(brand)}
-                </h2>
-                {!isMinted && <FiChevronDown className="text-xl" />}
-              </div>
-              {previewEnabled && (
-                <h3 className="text-xs text-gray-500 font-semibold">
-                  Purse:{' '}
-                  <span>{displayPetname(purse?.pursePetname ?? '')}</span>{' '}
-                </h3>
-              )}
-            </div>
-          ) : (
-            <button
-              className="btn-primary text-sm py-1 px-2 w-28"
-              onClick={() => setOpen(true)}
-            >
-              Select asset
-            </button>
-          )}
-          <CustomInput
-            value={value}
-            onChange={handleValueChange}
-            brand={brand}
-            purse={purse}
-            showMaxButton={type === SectionSwapType.FROM && !isMinted}
+    <motion.div
+      className="flex flex-col bg-alternative p-4 rounded-sm gap-2 select-none"
+      layout
+    >
+      <h3 className="text-xs uppercase text-gray-500 tracking-wide font-medium select-none">
+        Swap {type}
+      </h3>
+      <div className="flex gap-3 items-center">
+        <div className="w-8 h-8">
+          <img
+            className="w-8 h-8"
+            alt="brand icon"
+            src={displayBrandIcon(brand)}
           />
         </div>
-      </motion.div>
-    </>
+        {purse ? (
+          <div
+            className={clsx(
+              'flex flex-col w-28 p-1 rounded-sm',
+              !isMinted && 'hover:bg-black cursor-pointer hover:bg-opacity-5'
+            )}
+            onClick={() => {
+              !isMinted && setAssetSelectionDialogOpen(true);
+            }}
+          >
+            <div className="flex items-center justify-between">
+              <h2 className="text-base font-medium">
+                {displayBrandPetname(brand)}
+              </h2>
+              {!isMinted && <FiChevronDown className="text-xl" />}
+            </div>
+            {previewEnabled && (
+              <h3 className="text-xs text-gray-500 font-semibold">
+                Purse: <span>{displayPetname(purse?.pursePetname ?? '')}</span>{' '}
+              </h3>
+            )}
+          </div>
+        ) : (
+          <button
+            className="btn-primary text-sm py-1 px-2 w-28"
+            onClick={() => setAssetSelectionDialogOpen(true)}
+          >
+            Select asset
+          </button>
+        )}
+        <CustomInput
+          value={value}
+          onChange={handleValueChange}
+          brand={brand}
+          purse={purse}
+          showMaxButton={type === SectionSwapType.FROM && !isMinted}
+        />
+      </div>
+    </motion.div>
   );
 };
 
diff --git a/src/components/Swap.tsx b/src/components/Swap.tsx
index 4dc10fa..e63ea5e 100644
--- a/src/components/Swap.tsx
+++ b/src/components/Swap.tsx
@@ -32,6 +32,7 @@ import {
 } from 'store/swap';
 import { makeSwapOffer } from 'services/swap';
 import { provisionSmartWallet } from 'services/wallet';
+import DialogSwap from './DialogSwap';
 
 const Swap = () => {
   const chainConnection = useAtomValue(chainConnectionAtom);
@@ -197,54 +198,57 @@ const Swap = () => {
   );
 
   return (
-    <motion.div
-      layout
-      initial={{ opacity: 0, boxShadow: 'none' }}
-      animate={{
-        opacity: 1,
-        boxShadow: '0px 0px 99px var(--color-glow)',
-      }}
-      transition={{ duration: 0.4 }}
-      className="h-fit flex flex-col p-4 rounded-sm gap-4 w-screen max-w-lg relative select-none overflow-hidden"
-    >
-      <motion.div className="flex justify-between items-center gap-8 " layout>
-        <h1 className="text-2xl font-semibold text-slate-800">IST Swap</h1>
-        <span className="text-2xl text-blue-500 hover:text-blue-700">
-          <a
-            href="https://docs.inter.trade/user-how-to/minting-ist/mainnet-minting-ist-using-the-psm"
-            target="psm_guide"
-          >
-            <FiHelpCircle />
-          </a>
-        </span>
-      </motion.div>
-      {chainConnection && isSmartWalletProvisioned !== undefined ? (
-        form
-      ) : (
-        <CustomLoader text="Connect Keplr to continue" />
-      )}
-      <ContractInfo />
-      <motion.button
-        className={clsx(
-          'flex items-center justify-center bg-gray-100 hover:bg-gray-200 text-xl font-medium p-3 uppercase',
-          areAnchorsLoaded
-            ? 'bg-primary hover:bg-primaryDark text-white'
-            : 'text-gray-500 cursor-not-allowed'
-        )}
-        disabled={isSmartWalletProvisioned === undefined}
-        onClick={isSmartWalletProvisioned === false ? provision : handleSwap}
+    <>
+      <motion.div
+        layout
+        initial={{ opacity: 0, boxShadow: 'none' }}
+        animate={{
+          opacity: 1,
+          boxShadow: '0px 0px 99px var(--color-glow)',
+        }}
+        transition={{ duration: 0.4 }}
+        className="h-fit flex flex-col p-4 rounded-sm gap-4 w-screen max-w-lg relative select-none overflow-hidden"
       >
-        <motion.div className="relative flex flex-row w-full justify-center items-center">
-          <div className="w-6" />
-          <div className="text-white w-fit">
-            {isSmartWalletProvisioned === false
-              ? 'Provision Smart Wallet'
-              : 'Swap'}
-          </div>
+        <motion.div className="flex justify-between items-center gap-8 " layout>
+          <h1 className="text-2xl font-semibold text-slate-800">IST Swap</h1>
+          <span className="text-2xl text-blue-500 hover:text-blue-700">
+            <a
+              href="https://docs.inter.trade/user-how-to/minting-ist/mainnet-minting-ist-using-the-psm"
+              target="psm_guide"
+            >
+              <FiHelpCircle />
+            </a>
+          </span>
         </motion.div>
-      </motion.button>
-      {errorsToRender}
-    </motion.div>
+        {chainConnection && isSmartWalletProvisioned !== undefined ? (
+          form
+        ) : (
+          <CustomLoader text="Connect Keplr to continue" />
+        )}
+        <ContractInfo />
+        <motion.button
+          className={clsx(
+            'flex items-center justify-center bg-gray-100 hover:bg-gray-200 text-xl font-medium p-3 uppercase',
+            areAnchorsLoaded
+              ? 'bg-primary hover:bg-primaryDark text-white'
+              : 'text-gray-500 cursor-not-allowed'
+          )}
+          disabled={isSmartWalletProvisioned === undefined}
+          onClick={isSmartWalletProvisioned === false ? provision : handleSwap}
+        >
+          <motion.div className="relative flex flex-row w-full justify-center items-center">
+            <div className="w-6" />
+            <div className="text-white w-fit">
+              {isSmartWalletProvisioned === false
+                ? 'Provision Smart Wallet'
+                : 'Swap'}
+            </div>
+          </motion.div>
+        </motion.button>
+        {errorsToRender}
+      </motion.div>
+      <DialogSwap />
+    </>
   );
 };
 
diff --git a/src/store/swap.ts b/src/store/swap.ts
index 0408418..9c10fa7 100644
--- a/src/store/swap.ts
+++ b/src/store/swap.ts
@@ -32,6 +32,8 @@ export enum SwapDirection {
 
 export const selectedAnchorPetnameAtom = atom<string | null>(null);
 
+export const assetSelectionDialogOpenAtom = atom(false);
+
 export const anchorBrandAtom = atom(
   get => get(metricsAtom)?.anchorPoolBalance?.brand
 );