diff --git a/chain-registry b/chain-registry
index 9cb690b1..acdf9429 160000
--- a/chain-registry
+++ b/chain-registry
@@ -1 +1 @@
-Subproject commit 9cb690b1b2d5f2df623bf073567030a5fb03e7ff
+Subproject commit acdf9429184c44634ffe57194324935b753ddb7e
diff --git a/package-lock.json b/package-lock.json
index 12284994..2b410cd4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -65,9 +65,11 @@
         "date-fns": "^3.3.1",
         "dotenv": "^16.4.5",
         "download": "^8.0.0",
+        "kujira.js": "0.9.x",
         "match-sorter": "^6.3.3",
         "next": "^14.1.0",
         "next-seo": "^6.4.0",
+        "nuqs": "^1.17.4",
         "postcss": "^8.4.33",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
@@ -30143,6 +30145,11 @@
         }
       }
     },
+    "node_modules/mitt": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz",
+      "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw=="
+    },
     "node_modules/mkdirp": {
       "version": "0.5.6",
       "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
@@ -30902,6 +30909,17 @@
       "integrity": "sha512-2vPPEi+Z7WqML2jZYddDIfy5Dqb0r2fze2zTxNNknZaFpVHU3mFB3R+DWeJWGVx0ecvttSGlJTI+WG+8Z4cDWw==",
       "peer": true
     },
+    "node_modules/nuqs": {
+      "version": "1.17.4",
+      "resolved": "https://registry.npmjs.org/nuqs/-/nuqs-1.17.4.tgz",
+      "integrity": "sha512-wraphFfKI+Y/aWIGFsld/Ta7fTFEyeya1LkgEGNPDiMuY+Hwea/eVHBiq1GYlyMqTYSAoxRWvQyjCIo1Dy1u7g==",
+      "dependencies": {
+        "mitt": "^3.0.1"
+      },
+      "peerDependencies": {
+        "next": ">=13.4 <14.0.2 || ^14.0.3"
+      }
+    },
     "node_modules/nwsapi": {
       "version": "2.2.7",
       "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.7.tgz",
diff --git a/package.json b/package.json
index 4b72b1e2..801b686c 100644
--- a/package.json
+++ b/package.json
@@ -86,9 +86,11 @@
     "date-fns": "^3.3.1",
     "dotenv": "^16.4.5",
     "download": "^8.0.0",
+    "kujira.js": "0.9.x",
     "match-sorter": "^6.3.3",
     "next": "^14.1.0",
     "next-seo": "^6.4.0",
+    "nuqs": "^1.17.4",
     "postcss": "^8.4.33",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
diff --git a/src/components/AdaptiveLink.tsx b/src/components/AdaptiveLink.tsx
index 03b43864..89539cbd 100644
--- a/src/components/AdaptiveLink.tsx
+++ b/src/components/AdaptiveLink.tsx
@@ -1,7 +1,6 @@
-import Link, { LinkProps } from "next/link";
 import { ComponentPropsWithoutRef, useMemo } from "react";
 
-export type AdaptiveLinkProps = LinkProps & Omit<ComponentPropsWithoutRef<"a">, "href"> & { isExternal?: boolean };
+export type AdaptiveLinkProps = ComponentPropsWithoutRef<"a"> & { isExternal?: boolean };
 
 export function AdaptiveLink({ href, isExternal, rel = "", target, ...props }: AdaptiveLinkProps) {
   const isActuallyExternal = useMemo(() => {
@@ -11,9 +10,6 @@ export function AdaptiveLink({ href, isExternal, rel = "", target, ...props }: A
     if (typeof href === "string") {
       return href.startsWith("http");
     }
-    if (typeof href === "object") {
-      return href.href?.startsWith("http");
-    }
   }, [href, isExternal]);
 
   const externalProps = useMemo(() => {
@@ -25,7 +21,7 @@ export function AdaptiveLink({ href, isExternal, rel = "", target, ...props }: A
   }, [isActuallyExternal, rel, target]);
 
   return (
-    <Link
+    <a
       href={href}
       {...externalProps}
       {...props}
diff --git a/src/components/ChainSelect/ChainSelectContent.tsx b/src/components/ChainSelect/ChainSelectContent.tsx
index 8ab80080..c6852fe6 100644
--- a/src/components/ChainSelect/ChainSelectContent.tsx
+++ b/src/components/ChainSelect/ChainSelectContent.tsx
@@ -1,7 +1,6 @@
 import { ArrowLeftIcon } from "@heroicons/react/20/solid";
 import * as ScrollArea from "@radix-ui/react-scroll-area";
 import { matchSorter } from "match-sorter";
-import Image from "next/image";
 import { useEffect, useMemo, useRef, useState } from "react";
 
 import { Chain } from "@/hooks/useChains";
@@ -87,7 +86,7 @@ function ChainSelectContent({ chains, onChange, onClose }: Props) {
                 onClick={() => onChange(chain)}
                 data-testid="chain-item"
               >
-                <Image
+                <img
                   alt={chain.prettyName}
                   className="h-[48px] w-[48px] rounded-full object-contain"
                   width={48}
diff --git a/src/components/ConnectedWalletButton.tsx b/src/components/ConnectedWalletButton.tsx
index e35328dd..2c82f0ee 100644
--- a/src/components/ConnectedWalletButton.tsx
+++ b/src/components/ConnectedWalletButton.tsx
@@ -1,4 +1,3 @@
-import Image from "next/image";
 import { ComponentProps, forwardRef } from "react";
 
 import { cn } from "@/utils/ui";
@@ -23,8 +22,7 @@ export const ConnectedWalletButton = forwardRef<HTMLButtonElement, Props>(
         ref={ref}
       >
         {walletLogo && (
-          <Image
-            unoptimized
+          <img
             height={16}
             width={16}
             alt={walletName}
diff --git a/src/components/Dialog/DialogContent.tsx b/src/components/Dialog/DialogContent.tsx
index d0d04e6f..68e4c209 100644
--- a/src/components/Dialog/DialogContent.tsx
+++ b/src/components/Dialog/DialogContent.tsx
@@ -16,7 +16,7 @@ export function DialogContent({ children, onInteractOutside }: Props) {
   return (
     <Dialog.Portal container={container.current}>
       <Dialog.Content
-        className="absolute inset-0 z-10 animate-fade-zoom-in rounded-3xl bg-white"
+        className="absolute inset-0 z-10 animate-fade-zoom-in bg-white"
         onInteractOutside={onInteractOutside}
       >
         {children}
diff --git a/src/components/EmbedButton.tsx b/src/components/EmbedButton.tsx
new file mode 100644
index 00000000..3e8c6e19
--- /dev/null
+++ b/src/components/EmbedButton.tsx
@@ -0,0 +1,22 @@
+import { CodeBracketIcon } from "@heroicons/react/20/solid";
+
+import { disclosure } from "@/context/disclosures";
+import { cn } from "@/utils/ui";
+
+import { SimpleTooltip } from "./SimpleTooltip";
+
+export const EmbedButton = () => {
+  return (
+    <SimpleTooltip label="Embed swap widget">
+      <button
+        onClick={() => disclosure.open("embedDialog")}
+        className={cn(
+          "rounded-full p-2 text-black/80 hover:bg-neutral-100 hover:text-black/100",
+          "transition-colors focus:outline-none",
+        )}
+      >
+        <CodeBracketIcon className="h-4 w-4" />
+      </button>
+    </SimpleTooltip>
+  );
+};
diff --git a/src/components/EmbedDialog/index.tsx b/src/components/EmbedDialog/index.tsx
new file mode 100644
index 00000000..b26252d2
--- /dev/null
+++ b/src/components/EmbedDialog/index.tsx
@@ -0,0 +1,85 @@
+import { ArrowLeftIcon } from "@heroicons/react/20/solid";
+import * as Dialog from "@radix-ui/react-dialog";
+import * as ScrollArea from "@radix-ui/react-scroll-area";
+import toast from "react-hot-toast";
+
+import { useDisclosureKey } from "@/context/disclosures";
+import { cn } from "@/utils/ui";
+
+export const EmbedDialog = ({ embedLink }: { embedLink: string }) => {
+  const [isOpen, { close }] = useDisclosureKey("embedDialog");
+
+  const embedCode = `<iframe allow="clipboard-read; clipboard-write" src="${embedLink}" height="820" width="450" />`;
+
+  return (
+    <Dialog.Root
+      modal
+      open={isOpen}
+    >
+      <Dialog.Content className="absolute inset-0 animate-fade-zoom-in rounded-3xl bg-white">
+        <div className="flex h-full flex-col space-y-2 px-4 py-6">
+          <div className="flex items-center gap-4 pb-2">
+            <button
+              className="flex h-8 w-8 items-center justify-center rounded-full transition-colors hover:bg-neutral-100"
+              onClick={close}
+            >
+              <ArrowLeftIcon className="h-6 w-6" />
+            </button>
+            <h3 className="text-xl font-bold">Embed Swap Widget</h3>
+            <div className="flex-grow" />
+          </div>
+          <ScrollArea.Root
+            className={cn(
+              "relative isolate -mx-4 overflow-hidden",
+              "before:absolute before:inset-x-0 before:bottom-0 before:z-10 before:h-2",
+            )}
+          >
+            <ScrollArea.Viewport className="h-full w-full px-6">
+              <div className="flex flex-col space-y-2">
+                <p>The swap widget can be embedded in your app by using the following code snippet:</p>
+                <pre className="text-wrap break-all rounded-lg border bg-neutral-50 p-2 font-mono text-xs">
+                  {embedCode}
+                </pre>
+                <button
+                  onClick={() => {
+                    try {
+                      navigator.clipboard.writeText(embedCode);
+                      toast.success("Copied to clipboard");
+                    } catch (error) {
+                      toast.error("Failed to copy link to clipboard");
+                    }
+                  }}
+                  className={cn(
+                    "self-end rounded-md bg-[#FF486E] px-2 py-1 text-xs font-semibold uppercase text-white disabled:bg-red-200",
+                  )}
+                >
+                  Copy to clipboard
+                </button>
+
+                <p className="pt-4 text-sm">
+                  <strong>Note: </strong>You can customize the default swap route by modifying the query parameters for
+                  more information visit the{" "}
+                  <a
+                    href="https://api-docs.skip.money/docs"
+                    target="_blank"
+                    rel="noreferrer"
+                    className="text-[#FF486E]"
+                  >
+                    docs
+                  </a>
+                </p>
+              </div>
+            </ScrollArea.Viewport>
+            <ScrollArea.Scrollbar
+              className="z-20 flex touch-none select-none transition-colors ease-out data-[orientation=horizontal]:h-2 data-[orientation=vertical]:w-2 data-[orientation=horizontal]:flex-col"
+              orientation="vertical"
+            >
+              <ScrollArea.Thumb className="relative flex-1 rounded-[10px] bg-neutral-500/50 transition-colors before:absolute before:left-1/2 before:top-1/2 before:h-2 before:w-2 before:-translate-x-1/2 before:-translate-y-1/2 before:content-[''] hover:bg-neutral-500" />
+            </ScrollArea.Scrollbar>
+            <ScrollArea.Corner />
+          </ScrollArea.Root>
+        </div>
+      </Dialog.Content>
+    </Dialog.Root>
+  );
+};
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index a24674bc..614ac6cb 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -1,11 +1,12 @@
 import Image from "next/image";
-import Link from "next/link";
+
+import { AdaptiveLink } from "./AdaptiveLink";
 
 function Footer() {
   return (
     <div className="relative flex flex-row items-center justify-center space-x-0 px-4 py-8 sm:py-12">
       <p className="text-sm text-black sm:text-base">Crafted by</p>
-      <Link
+      <AdaptiveLink
         href="https://skip.money/"
         target="_blank"
       >
@@ -20,7 +21,7 @@ function Footer() {
             }}
           />
         </div>
-      </Link>
+      </AdaptiveLink>
     </div>
   );
 }
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 8cbb995e..7fbee42d 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -1,13 +1,12 @@
-import Link from "next/link";
-
+import { AdaptiveLink } from "./AdaptiveLink";
 import { IbcFunLogo } from "./IbcFunLogo";
 
 function Header() {
   return (
     <nav className="relative flex items-center justify-center px-4 py-8 sm:py-12">
-      <Link href="/">
+      <AdaptiveLink href="/">
         <IbcFunLogo className="h-8 sm:h-16" />
-      </Link>
+      </AdaptiveLink>
     </nav>
   );
 }
diff --git a/src/components/PreviewRoute/ChainStep.tsx b/src/components/PreviewRoute/ChainStep.tsx
index b6fa4c96..55a964e2 100644
--- a/src/components/PreviewRoute/ChainStep.tsx
+++ b/src/components/PreviewRoute/ChainStep.tsx
@@ -1,6 +1,5 @@
 import { ArrowRightIcon, FingerPrintIcon, PencilSquareIcon } from "@heroicons/react/20/solid";
 import { RouteResponse } from "@skip-router/core";
-import Image from "next/image";
 import { Dispatch, SetStateAction, useEffect, useMemo } from "react";
 import toast from "react-hot-toast";
 import { FaExternalLinkAlt, FaKeyboard } from "react-icons/fa";
@@ -195,7 +194,7 @@ export const ChainStep = ({
             )}
           >
             <div className="flex h-full w-full items-center justify-center rounded-full bg-white p-1">
-              <Image
+              <img
                 src={chain?.logoURI || "/logo-fallback.png"}
                 width={48}
                 height={48}
@@ -307,14 +306,17 @@ export const ChainStep = ({
               <SimpleTooltip label={chainAddress.address}>
                 <button
                   onClick={() => {
-                    navigator.clipboard.writeText(chainAddress.address || "");
-                    toast.success("Address copied to clipboard");
+                    try {
+                      navigator.clipboard.writeText(chainAddress.address || "");
+                      toast.success("Address copied to clipboard");
+                    } catch (error) {
+                      toast.error("Failed to copy address to clipboard");
+                    }
                   }}
                   className="opacity-50"
                 >
                   {chainAddress?.source !== "input" ? (
-                    <Image
-                      unoptimized
+                    <img
                       height={16}
                       width={16}
                       alt={"wallet"}
@@ -347,8 +349,7 @@ export const ChainStep = ({
             {chainAddress?.address && !isIntermidiaryChain && (
               <>
                 {chainAddress?.source !== "input" ? (
-                  <Image
-                    unoptimized
+                  <img
                     height={16}
                     width={16}
                     alt={"wallet"}
@@ -369,8 +370,12 @@ export const ChainStep = ({
                 >
                   <button
                     onClick={() => {
-                      navigator.clipboard.writeText(chainAddress.address || "");
-                      toast.success("Address copied to clipboard");
+                      try {
+                        navigator.clipboard.writeText(chainAddress.address || "");
+                        toast.success("Address copied to clipboard");
+                      } catch (error) {
+                        toast.error("Failed to copy address to clipboard");
+                      }
                     }}
                   >
                     <p className={cn("text-md font-semibold", isNotFocused && "font-normal text-neutral-400")}>
diff --git a/src/components/PreviewRoute/SetAddressDialog.tsx b/src/components/PreviewRoute/SetAddressDialog.tsx
index 8def4c54..f12a7657 100644
--- a/src/components/PreviewRoute/SetAddressDialog.tsx
+++ b/src/components/PreviewRoute/SetAddressDialog.tsx
@@ -3,7 +3,6 @@ import { ArrowLeftIcon } from "@heroicons/react/20/solid";
 import * as ScrollArea from "@radix-ui/react-scroll-area";
 import { Chain } from "@skip-router/core";
 import { PublicKey } from "@solana/web3.js";
-import Image from "next/image";
 import { useMemo, useState } from "react";
 import { FaKeyboard } from "react-icons/fa";
 import { MdCheck, MdClose } from "react-icons/md";
@@ -183,8 +182,7 @@ export const SetAddressDialog = ({
                         disabled={chainType === "svm" && wallet.isAvailable !== true}
                       >
                         {wallet.walletInfo.logo && (
-                          <Image
-                            unoptimized
+                          <img
                             height={36}
                             width={36}
                             alt={wallet.walletPrettyName}
diff --git a/src/components/ShareButton.tsx b/src/components/ShareButton.tsx
new file mode 100644
index 00000000..dd45be46
--- /dev/null
+++ b/src/components/ShareButton.tsx
@@ -0,0 +1,29 @@
+import { ShareIcon } from "@heroicons/react/20/solid";
+import toast from "react-hot-toast";
+
+import { cn } from "@/utils/ui";
+
+import { SimpleTooltip } from "./SimpleTooltip";
+
+export const ShareButton = ({ shareableLink }: { shareableLink: string }) => {
+  return (
+    <SimpleTooltip label="Share">
+      <button
+        onClick={() => {
+          try {
+            navigator.clipboard.writeText(shareableLink);
+            toast.success("Link copied to clipboard");
+          } catch (error) {
+            toast.error("Failed to copy link to clipboard");
+          }
+        }}
+        className={cn(
+          "rounded-full p-2 text-black/80 hover:bg-neutral-100 hover:text-black/100",
+          "transition-colors focus:outline-none",
+        )}
+      >
+        <ShareIcon className="h-4 w-4" />
+      </button>
+    </SimpleTooltip>
+  );
+};
diff --git a/src/components/SwapWidget/SwapWidget.tsx b/src/components/SwapWidget/SwapWidget.tsx
index 22484e02..947447cf 100644
--- a/src/components/SwapWidget/SwapWidget.tsx
+++ b/src/components/SwapWidget/SwapWidget.tsx
@@ -6,17 +6,21 @@ import type {} from "typed-query-selector";
 import { disclosure } from "@/context/disclosures";
 import { useAccount } from "@/hooks/useAccount";
 import { useChains as useSkipChains } from "@/hooks/useChains";
+import { useIsInIframe } from "@/hooks/useIsInIframe";
 import { cn } from "@/utils/ui";
 
 import { AdaptiveLink } from "../AdaptiveLink";
 import AssetInput from "../AssetInput";
 import { ConnectedWalletButton } from "../ConnectedWalletButton";
+import { EmbedButton } from "../EmbedButton";
+import { EmbedDialog } from "../EmbedDialog";
 import { HistoryButton } from "../HistoryButton";
 import { HistoryDialog } from "../HistoryDialog";
 import { Spinner } from "../Icons/Spinner";
 import { JsonDialog } from "../JsonDialog";
 import { SettingsButton } from "../SettingsButton";
 import { SettingsDialog } from "../SettingsDialog";
+import { ShareButton } from "../ShareButton";
 import { SimpleTooltip } from "../SimpleTooltip";
 import TransactionDialog from "../TransactionDialog";
 import { UsdDiff } from "../UsdValue";
@@ -62,6 +66,7 @@ export function SwapWidget() {
     sourceFeeAsset,
     swapPriceImpactPercent,
     usdDiffPercent,
+    shareable,
   } = useSwapWidget();
 
   const srcAccount = useAccount(sourceChain?.chainID);
@@ -86,6 +91,7 @@ export function SwapWidget() {
   }, []);
 
   const accountStateKey = `${srcAccount?.isWalletConnected ? "src" : "no-src"}`;
+  const isInIframe = useIsInIframe();
 
   return (
     <UsdDiff.Provider>
@@ -97,6 +103,8 @@ export function SwapWidget() {
           <div className="flex h-8 items-center">
             <p className="text-2xl font-semibold">From</p>
             <div className="flex-grow" />
+            {!isInIframe && <EmbedButton />}
+            <ShareButton shareableLink={shareable.link} />
             <HistoryButton />
             <SettingsButton />
             <div className="w-2" />
@@ -261,6 +269,7 @@ export function SwapWidget() {
             </div>
           )}
         </div>
+        <EmbedDialog embedLink={shareable.embedLink} />
         <HistoryDialog />
         <SettingsDialog />
         <JsonDialog />
diff --git a/src/components/SwapWidget/useSwapWidget.ts b/src/components/SwapWidget/useSwapWidget.ts
index 17d5fef4..98f67d93 100644
--- a/src/components/SwapWidget/useSwapWidget.ts
+++ b/src/components/SwapWidget/useSwapWidget.ts
@@ -3,6 +3,7 @@ import { useManager as useCosmosManager } from "@cosmos-kit/react";
 import { Asset, BridgeType } from "@skip-router/core";
 import { useWallet } from "@solana/wallet-adapter-react";
 import { BigNumber } from "bignumber.js";
+import { useQueryState } from "nuqs";
 import { MouseEvent, useCallback, useEffect, useMemo, useState } from "react";
 import toast from "react-hot-toast";
 import { formatUnits } from "viem";
@@ -15,6 +16,7 @@ import { createJSONStorage, persist, subscribeWithSelector } from "zustand/middl
 import { shallow } from "zustand/shallow";
 import { createWithEqualityFn as create } from "zustand/traditional";
 
+import { appUrl } from "@/constants/api";
 import { EVMOS_GAS_AMOUNT, isChainIdEvmos } from "@/constants/gas";
 import { useAssets } from "@/context/assets";
 import { useAnyDisclosureOpen } from "@/context/disclosures";
@@ -44,7 +46,7 @@ export function useSwapWidget() {
 
   const skipClient = useSkipClient();
 
-  const { assetsByChainID, getFeeAsset } = useAssets();
+  const { assetsByChainID, getFeeAsset, isReady: isAssetsReady } = useAssets();
   const { data: chains } = useChains();
 
   const { getWalletRepo } = useCosmosManager();
@@ -285,7 +287,7 @@ export function useSwapWidget() {
    * - if not, select first available asset
    */
   const onDestinationChainChange = useCallback(
-    async (chain: Chain) => {
+    async (chain: Chain, injectAsset?: Asset) => {
       const { destinationAsset: currentDstAsset } = useSwapWidgetStore.getState();
       const assets = assetsByChainID(chain.chainID);
 
@@ -317,7 +319,7 @@ export function useSwapWidget() {
 
       useSwapWidgetStore.setState({
         destinationChain: chain,
-        destinationAsset: asset,
+        destinationAsset: injectAsset ? injectAsset : asset,
       });
     },
 
@@ -573,30 +575,6 @@ export function useSwapWidget() {
     );
   }, []);
 
-  /**
-   * prefill source chain with {@link DEFAULT_SRC_CHAIN_ID} and trigger
-   * {@link onSourceChainChange} to sync source asset
-   */
-  useEffect(() => {
-    return useSwapWidgetStore.subscribe(
-      (state) => [state.sourceChain, state.sourceAsset] as const,
-      ([chain, asset]) => {
-        if (!chain) {
-          chain ??= (chains ?? []).find(({ chainID }) => {
-            return chainID === DEFAULT_SRC_CHAIN_ID;
-          });
-        }
-        if (chain && !asset) {
-          onSourceChainChange(chain);
-        }
-      },
-      {
-        equalityFn: shallow,
-        fireImmediately: true,
-      },
-    );
-  }, [chains, onSourceChainChange]);
-
   /**
    * sync source chain wallet connections
    * @see {srcChain}
@@ -673,6 +651,172 @@ export function useSwapWidget() {
 
   // #endregion
 
+  // #region -- query params
+  const toastId = "url-params-toast";
+
+  const [srcChainQP, setSrcChainQP] = useQueryState("src_chain");
+  const [srcAssetQP, setSrcAssetQP] = useQueryState("src_asset");
+  useEffect(() => {
+    if (!chains || !isAssetsReady) return;
+    if (srcChainQP) {
+      const findChain = chains.find((x) => x.chainID.toLowerCase() === decodeURI(srcChainQP).toLowerCase());
+      if (findChain) {
+        onSourceChainChange(findChain);
+        if (srcAssetQP) {
+          const assets = assetsByChainID(findChain.chainID);
+          const findAsset = assets.find((x) => x.denom.toLowerCase() === decodeURI(srcAssetQP).toLowerCase());
+          if (findAsset) {
+            onSourceAssetChange(findAsset);
+          }
+        }
+      }
+      toast.success("URL parameters processed successfully", {
+        id: toastId,
+        duration: 5000,
+      });
+      setSrcChainQP(null);
+      setSrcAssetQP(null);
+    }
+  }, [
+    assetsByChainID,
+    chains,
+    isAssetsReady,
+    onSourceAssetChange,
+    onSourceChainChange,
+    setSrcAssetQP,
+    setSrcChainQP,
+    srcAssetQP,
+    srcChainQP,
+  ]);
+
+  const [destChainQP, setDestChainQP] = useQueryState("dest_chain");
+  const [destAssetQP, setDestAssetQP] = useQueryState("dest_asset");
+  useEffect(() => {
+    if (!chains || !isAssetsReady) return;
+    if (destChainQP) {
+      const findChain = chains.find((x) => x.chainID.toLowerCase() === decodeURI(destChainQP).toLowerCase());
+      if (findChain) {
+        if (destAssetQP) {
+          const assets = assetsByChainID(findChain.chainID);
+          const findAsset = assets.find((x) => x.denom.toLowerCase() === decodeURI(destAssetQP).toLowerCase());
+          if (findAsset) {
+            onDestinationChainChange(findChain, findAsset);
+            setDestChainQP(null);
+            setDestAssetQP(null);
+            return;
+          }
+        }
+        onDestinationChainChange(findChain);
+      }
+      toast.success("URL parameters processed successfully", {
+        id: toastId,
+        duration: 5000,
+      });
+      setDestChainQP(null);
+      setDestAssetQP(null);
+    }
+  }, [
+    assetsByChainID,
+    chains,
+    isAssetsReady,
+    onDestinationAssetChange,
+    onDestinationChainChange,
+    setDestAssetQP,
+    setDestChainQP,
+    destAssetQP,
+    destChainQP,
+  ]);
+
+  const [amountInQP, setAmountInQP] = useQueryState("amount_in");
+  const [amountOutQP, setAmountOutQP] = useQueryState("amount_out");
+
+  useEffect(() => {
+    if (amountInQP) {
+      onSourceAmountChange(amountInQP);
+      setAmountOutQP(null);
+      setAmountInQP(null);
+      toast.success("URL parameters processed successfully", {
+        id: toastId,
+        duration: 5000,
+      });
+      return;
+    }
+    if (amountOutQP) {
+      onDestinationAmountChange(amountOutQP);
+      setAmountOutQP(null);
+      setAmountInQP(null);
+      toast.success("URL parameters processed successfully", {
+        id: toastId,
+        duration: 5000,
+      });
+    }
+  }, [amountInQP, amountOutQP, onDestinationAmountChange, onSourceAmountChange, setAmountInQP, setAmountOutQP]);
+
+  const shareable = useMemo(() => {
+    const params = new URLSearchParams();
+    if (srcChain) {
+      params.set("src_chain", srcChain.chainID.toLowerCase());
+    }
+    if (srcAsset) {
+      params.set("src_asset", srcAsset.denom.toLowerCase());
+    }
+    if (dstChain) {
+      params.set("dest_chain", dstChain.chainID.toLowerCase());
+    }
+    if (dstAsset) {
+      params.set("dest_asset", dstAsset.denom.toLowerCase());
+    }
+    if (amountIn) {
+      params.set("amount_in", amountIn);
+    }
+    if (amountOut) {
+      params.set("amount_out", amountOut);
+    }
+    return {
+      link: `${appUrl}?${params}`,
+      embedLink: `${appUrl}/widget?${params}`,
+    };
+  }, [srcChain, srcAsset, dstChain, dstAsset, amountIn, amountOut]);
+
+  useEffect(() => {
+    // this is a loading state when we are waiting for chains and assets to load when query params are present
+    if (
+      (!chains || !isAssetsReady) &&
+      (srcChainQP || srcAssetQP || destChainQP || destAssetQP || amountInQP || amountOutQP)
+    ) {
+      toast.loading("URL parameters are being processed...", {
+        id: toastId,
+        duration: Infinity,
+      });
+    }
+  }, [amountInQP, amountOutQP, chains, destAssetQP, destChainQP, isAssetsReady, srcAssetQP, srcChainQP]);
+
+  // #endregion
+
+  /**
+   * prefill source chain with {@link DEFAULT_SRC_CHAIN_ID} and trigger
+   * {@link onSourceChainChange} to sync source asset
+   */
+  useEffect(() => {
+    if (srcChainQP) return;
+    return useSwapWidgetStore.subscribe(
+      (state) => [state.sourceChain, state.sourceAsset] as const,
+      ([chain, asset]) => {
+        if (!chain) {
+          chain ??= (chains ?? []).find(({ chainID }) => {
+            return chainID === DEFAULT_SRC_CHAIN_ID;
+          });
+        }
+        if (chain && !asset) {
+          onSourceChainChange(chain);
+        }
+      },
+      {
+        equalityFn: shallow,
+        fireImmediately: true,
+      },
+    );
+  }, [chains, onSourceChainChange, srcChainQP]);
   /////////////////////////////////////////////////////////////////////////////
 
   return {
@@ -707,6 +851,7 @@ export function useSwapWidget() {
     sourceFeeAsset: srcFeeAsset,
     swapPriceImpactPercent,
     usdDiffPercent,
+    shareable,
   };
 }
 
@@ -728,7 +873,7 @@ export interface SwapWidgetStore {
   bridges: BridgeType[];
 }
 
-const defaultValues: SwapWidgetStore = {
+export const defaultValues: SwapWidgetStore = {
   amountIn: "",
   amountOut: "",
   direction: "swap-in",
@@ -737,7 +882,7 @@ const defaultValues: SwapWidgetStore = {
 
 // TODO: move to src/context/
 // TODO: include all memoize values
-const useSwapWidgetStore = create(
+export const useSwapWidgetStore = create(
   subscribeWithSelector(
     persist(() => defaultValues, {
       name: "SwapWidgetState",
diff --git a/src/components/TransactionDialog.tsx b/src/components/TransactionDialog.tsx
index 7f0d0ddb..d51a564d 100644
--- a/src/components/TransactionDialog.tsx
+++ b/src/components/TransactionDialog.tsx
@@ -71,7 +71,7 @@ function TransactionDialog({
           className={cn(
             "w-full rounded-md bg-[#FF486E] py-4 font-semibold text-white outline-none transition-[opacity,transform]",
             "disabled:cursor-not-allowed disabled:opacity-75",
-            "enabled:hover:rotate-1 enabled:hover:scale-105",
+            "enabled:hover:rotate-1",
           )}
           disabled={!route || (typeof isLoading === "boolean" && isLoading)}
           onClick={() => confirmControl.open()}
diff --git a/src/components/WalletModal/WalletListItem.tsx b/src/components/WalletModal/WalletListItem.tsx
index 0b74ec5f..a2f2b263 100644
--- a/src/components/WalletModal/WalletListItem.tsx
+++ b/src/components/WalletModal/WalletListItem.tsx
@@ -49,6 +49,9 @@ const CosmosWalletListItem = ({
     if ("snapInstalled" in walletClient) {
       return walletClient.snapInstalled;
     }
+    if (wallet?.prettyName.toLowerCase() === "outer wallet") {
+      return false;
+    }
     if (_isMobile) {
       return isWalletConnect || walletClient;
     }
@@ -56,7 +59,7 @@ const CosmosWalletListItem = ({
       return !isWalletConnect;
     }
     return true;
-  }, [_isMobile, isWalletConnect, walletClient]);
+  }, [_isMobile, isWalletConnect, wallet?.prettyName, walletClient]);
 
   useEffect(() => {
     const unregister = () => {
diff --git a/src/components/WalletModal/WalletModal.tsx b/src/components/WalletModal/WalletModal.tsx
index cc450161..4ff0e328 100644
--- a/src/components/WalletModal/WalletModal.tsx
+++ b/src/components/WalletModal/WalletModal.tsx
@@ -1,7 +1,6 @@
 import { ArrowTopRightOnSquareIcon } from "@heroicons/react/16/solid";
 import { ArrowLeftIcon, FaceFrownIcon } from "@heroicons/react/20/solid";
 import * as ScrollArea from "@radix-ui/react-scroll-area";
-import Image from "next/image";
 
 import { DialogContent } from "@/components/Dialog";
 import { trackWallet, TrackWalletCtx } from "@/context/track-wallet";
@@ -91,8 +90,7 @@ export function WalletModal({ chainType, onClose, wallets }: Props) {
                   disabled={chainType === "svm" && wallet.isAvailable !== true}
                 >
                   {wallet.walletInfo.logo && (
-                    <Image
-                      unoptimized
+                    <img
                       height={36}
                       width={36}
                       alt={wallet.walletPrettyName}
diff --git a/src/context/disclosures.ts b/src/context/disclosures.ts
index e577f9f2..61ded438 100644
--- a/src/context/disclosures.ts
+++ b/src/context/disclosures.ts
@@ -7,6 +7,7 @@ const defaultValues = {
   priceImpactDialog: false,
   settingsDialog: false,
   destinationDialog: false,
+  embedDialog: false,
   // TODO: port dialogs to new system
   // assetSelect: false,
   // chainSelect: false,
diff --git a/src/hooks/useIsInIframe.ts b/src/hooks/useIsInIframe.ts
new file mode 100644
index 00000000..5caf4e1a
--- /dev/null
+++ b/src/hooks/useIsInIframe.ts
@@ -0,0 +1,10 @@
+import { useEffect, useState } from "react";
+
+export const useIsInIframe = () => {
+  const [isInIframe, setIsInIframe] = useState(false);
+
+  useEffect(() => {
+    setIsInIframe(window.self !== window.top);
+  }, []);
+  return isInIframe;
+};
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 5737fbcc..76fa7029 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -1,67 +1,19 @@
-import "@fontsource/jost/latin.css";
 import "@/styles/globals.css";
-import "@interchain-ui/react/styles";
 
-import { ChainProvider } from "@cosmos-kit/react";
-import { WalletProvider } from "@solana/wallet-adapter-react";
-import { PersistQueryClientProvider } from "@tanstack/react-query-persist-client";
 import { Analytics } from "@vercel/analytics/react";
 import { AppProps } from "next/app";
-import { ComponentProps } from "react";
-import { WagmiProvider } from "wagmi";
 
-import { getAssetLists, getChains } from "@/chains";
 import { DefaultSeo } from "@/components/DefaultSeo";
-import { metadata } from "@/constants/seo";
-import { wallets } from "@/lib/cosmos-kit";
-import { persister, queryClient } from "@/lib/react-query";
-import { solanaWallets } from "@/lib/solana-wallet-adapter";
-import { config } from "@/lib/wagmi";
-
-type ChainProviderProps = ComponentProps<typeof ChainProvider>;
-
-const assets = getAssetLists() as ChainProviderProps["assetLists"];
-const chains = getChains() as ChainProviderProps["chains"];
+import { Provider } from "@/widget";
 
 export default function App({ Component, pageProps }: AppProps) {
   return (
     <>
       <DefaultSeo />
       <Analytics />
-      <WalletProvider
-        wallets={solanaWallets}
-        localStorageKey="solana-wallet"
-        autoConnect
-      >
-        <ChainProvider
-          assetLists={assets}
-          chains={chains}
-          sessionOptions={{
-            duration: 1000 * 60 * 60 * 24, // 1 day
-          }}
-          throwErrors={false}
-          walletConnectOptions={
-            process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID
-              ? {
-                  signClient: {
-                    name: metadata.name,
-                    projectId: process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID,
-                  },
-                }
-              : undefined
-          }
-          wallets={wallets}
-        >
-          <WagmiProvider config={config}>
-            <PersistQueryClientProvider
-              client={queryClient}
-              persistOptions={{ persister }}
-            >
-              <Component {...pageProps} />
-            </PersistQueryClientProvider>
-          </WagmiProvider>
-        </ChainProvider>
-      </WalletProvider>
+      <Provider>
+        <Component {...pageProps} />
+      </Provider>
     </>
   );
 }
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
index 7ab842f7..9807d9f7 100644
--- a/src/pages/_document.tsx
+++ b/src/pages/_document.tsx
@@ -1,13 +1,8 @@
 import { Head, Html, Main, NextScript } from "next/document";
 
-import { cn } from "@/utils/ui";
-
 export default function Document() {
   return (
-    <Html
-      lang="en"
-      className="bg-[#ffdc61]"
-    >
+    <Html lang="en">
       <Head>
         <meta charSet="UTF-8" />
         <meta
@@ -15,14 +10,7 @@ export default function Document() {
           httpEquiv="X-UA-Compatible"
         />
       </Head>
-      <body
-        className={cn(
-          "font-sans subpixel-antialiased",
-          "relative overflow-x-hidden overflow-y-scroll",
-          "before:fixed before:inset-x-0 before:bottom-0 before:h-[80vh] before:content-['']",
-          "before:bg-[url(/site-bg-2.svg)] before:bg-cover before:bg-[center_top] before:bg-no-repeat",
-        )}
-      >
+      <body>
         <Main />
         <NextScript />
       </body>
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index cfaa72b5..0ecb0f70 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,17 +1,33 @@
-import { SwapWidget } from "@/components/SwapWidget";
-import { WalletModalProvider } from "@/components/WalletModal";
-import { DefaultLayout } from "@/layouts/default";
+import Footer from "@/components/Footer";
+import Header from "@/components/Header";
+import { Help } from "@/components/Help";
+import SkipBanner from "@/components/SkipBanner";
+import { VersionCheck } from "@/components/VersionCheck";
+import { cn } from "@/utils/ui";
+import { Widget } from "@/widget";
 
 export default function Home() {
   return (
-    <DefaultLayout>
-      <div className="flex flex-grow flex-col items-center">
-        <div className="relative w-screen bg-white p-6 shadow-xl sm:max-w-[450px] sm:rounded-3xl">
-          <WalletModalProvider>
-            <SwapWidget />
-          </WalletModalProvider>
+    <div
+      className={cn(
+        "bg-[#ffdc61] font-sans subpixel-antialiased",
+        "relative overflow-x-hidden overflow-y-hidden",
+        "before:fixed before:inset-x-0 before:bottom-0 before:h-[80vh] before:content-['']",
+        "before:bg-[url(/site-bg-2.svg)] before:bg-cover before:bg-[center_top] before:bg-no-repeat",
+      )}
+    >
+      <main className="relative flex min-h-screen flex-col items-center sm:pt-11">
+        <SkipBanner className="inset-x-0 top-0 z-50 w-screen sm:fixed" />
+        <Header />
+        <div className="flex flex-grow flex-col items-center">
+          <div className="relative w-screen overflow-hidden bg-white p-6 shadow-xl sm:max-w-[450px] sm:rounded-3xl">
+            <Widget />
+          </div>
+          <Footer />
         </div>
-      </div>
-    </DefaultLayout>
+      </main>
+      <VersionCheck />
+      <Help />
+    </div>
   );
 }
diff --git a/src/pages/widget.tsx b/src/pages/widget.tsx
new file mode 100644
index 00000000..97023fc2
--- /dev/null
+++ b/src/pages/widget.tsx
@@ -0,0 +1,15 @@
+import { useLayoutEffect } from "react";
+
+import { defaultValues, useSwapWidgetStore } from "@/components/SwapWidget/useSwapWidget";
+import { Widget } from "@/widget";
+
+export default function WidgetPage() {
+  useLayoutEffect(() => {
+    useSwapWidgetStore.setState(defaultValues);
+  }, []);
+  return (
+    <div className="relative bg-white p-6 scrollbar-hide">
+      <Widget />
+    </div>
+  );
+}
diff --git a/src/styles/globals.css b/src/styles/globals.css
index b5c61c95..de61c382 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -1,3 +1,5 @@
+@import "@fontsource/jost/latin.css";
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
diff --git a/src/utils/clients.ts b/src/utils/clients.ts
index 1e5140a7..617d5862 100644
--- a/src/utils/clients.ts
+++ b/src/utils/clients.ts
@@ -1,6 +1,6 @@
 import { CosmWasmClient } from "@cosmjs/cosmwasm-stargate";
 import { StargateClient } from "@cosmjs/stargate";
-import { accountParser } from "@skip-router/core/parser";
+import { accountParser } from "kujira.js";
 
 import { appUrl } from "@/constants/api";
 
diff --git a/src/widget/Widget.tsx b/src/widget/Widget.tsx
new file mode 100644
index 00000000..4194eec6
--- /dev/null
+++ b/src/widget/Widget.tsx
@@ -0,0 +1,86 @@
+import { ChainProvider } from "@cosmos-kit/react";
+import { WalletProvider } from "@solana/wallet-adapter-react";
+import { PersistQueryClientProvider } from "@tanstack/react-query-persist-client";
+import { ComponentProps, ReactNode } from "react";
+import { Toaster } from "react-hot-toast";
+import { WagmiProvider } from "wagmi";
+
+import { getAssetLists, getChains } from "@/chains";
+import { SwapWidget } from "@/components/SwapWidget";
+import { WalletModalProvider } from "@/components/WalletModal";
+import { metadata } from "@/constants/seo";
+import { AssetsProvider } from "@/context/assets";
+import { useIsInIframe } from "@/hooks/useIsInIframe";
+import { wallets } from "@/lib/cosmos-kit";
+import { persister, queryClient } from "@/lib/react-query";
+import { solanaWallets } from "@/lib/solana-wallet-adapter";
+import { config } from "@/lib/wagmi";
+import { SkipProvider } from "@/solve";
+
+type ChainProviderProps = ComponentProps<typeof ChainProvider>;
+
+const assets = getAssetLists() as ChainProviderProps["assetLists"];
+const chains = getChains() as ChainProviderProps["chains"];
+
+export const Provider = ({ children }: { children: ReactNode }) => {
+  const isInIframe = useIsInIframe();
+  return (
+    <WalletProvider
+      wallets={solanaWallets}
+      localStorageKey="ibc-fun-solana-wallet"
+      autoConnect
+      key="skip-widget-solana-wallet"
+    >
+      <ChainProvider
+        assetLists={assets}
+        chains={chains}
+        disableIframe={true}
+        sessionOptions={{
+          duration: 1000 * 60 * 60 * 24, // 1 day
+        }}
+        throwErrors={false}
+        walletConnectOptions={
+          process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID
+            ? {
+                signClient: {
+                  name: metadata.name,
+                  projectId: process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID,
+                },
+              }
+            : undefined
+        }
+        wallets={wallets}
+        key={"skip-widget-chain-provider"}
+      >
+        <WagmiProvider
+          config={config}
+          key={"skip-widget-wagmi-provider"}
+        >
+          <PersistQueryClientProvider
+            client={queryClient}
+            persistOptions={{ persister }}
+            key={"skip-widget"}
+          >
+            <SkipProvider>
+              <AssetsProvider>
+                {children}
+                <Toaster
+                  position={isInIframe ? "top-center" : "top-right"}
+                  toastOptions={{ duration: 1000 * 10 }}
+                />
+              </AssetsProvider>
+            </SkipProvider>
+          </PersistQueryClientProvider>
+        </WagmiProvider>
+      </ChainProvider>
+    </WalletProvider>
+  );
+};
+
+export const Widget = () => {
+  return (
+    <WalletModalProvider>
+      <SwapWidget />
+    </WalletModalProvider>
+  );
+};
diff --git a/src/widget/index.ts b/src/widget/index.ts
new file mode 100644
index 00000000..b3b50ff2
--- /dev/null
+++ b/src/widget/index.ts
@@ -0,0 +1 @@
+export { Provider, Widget } from "./Widget";