diff --git a/src/components/icons/GasIcon.tsx b/src/components/icons/GasIcon.tsx
new file mode 100644
index 0000000..d6f37d0
--- /dev/null
+++ b/src/components/icons/GasIcon.tsx
@@ -0,0 +1,24 @@
+import { DefaultIconProps } from '@hyperlane-xyz/widgets';
+import { memo } from 'react';
+import { Color } from '../../styles/Color';
+
+// TODO move to widgets lib
+function _GasIcon({ color, ...rest }: DefaultIconProps) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" {...rest}>
+      <g clipPath="url(#a)">
+        <path
+          fill={color || Color.black}
+          d="M3.1 6.3A6.3 6.3 0 0 1 9.4 0H28a6.2 6.2 0 0 1 6.3 6.3v25a6.2 6.2 0 0 1 6.2 6.2v1.6a1.6 1.6 0 0 0 3.1 0V25h-1.5a1.6 1.6 0 0 1-1.6-1.6v-9.7a1.6 1.6 0 0 1 1.6-1.6h4.7a10 10 0 0 0-.7-3.8A3 3 0 0 0 45 6.9a5 5 0 0 0-2.8-.7 1.6 1.6 0 0 1 0-3c1.8 0 3.2.3 4.4 1 1.2.7 2 1.7 2.5 2.8.9 2 .9 4.6.9 6.5v10a1.6 1.6 0 0 1-1.6 1.5H47v14a4.7 4.7 0 0 1-9.4 0v-1.5a3.1 3.1 0 0 0-3.1-3.1v12.5H36a1.6 1.6 0 0 1 0 3.1H1.6a1.6 1.6 0 1 1 0-3.1H3V6.3Zm7.8 0a1.6 1.6 0 0 0-1.5 1.5v15.6a1.6 1.6 0 0 0 1.5 1.6h15.7a1.6 1.6 0 0 0 1.5-1.6V7.8a1.6 1.6 0 0 0-1.5-1.5H10.9Z"
+        />
+      </g>
+      <defs>
+        <clipPath id="a">
+          <path fill="#fff" d="M0 0h50v50H0z" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
+
+export const GasIcon = memo(_GasIcon);
diff --git a/src/components/icons/StopIcon.tsx b/src/components/icons/StopIcon.tsx
new file mode 100644
index 0000000..b3f8309
--- /dev/null
+++ b/src/components/icons/StopIcon.tsx
@@ -0,0 +1,24 @@
+import { DefaultIconProps } from '@hyperlane-xyz/widgets';
+import { memo } from 'react';
+import { Color } from '../../styles/Color';
+
+// TODO move to widgets lib
+function _StopIcon({ color, ...rest }: DefaultIconProps) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" {...rest}>
+      <g clipPath="url(#a)">
+        <path
+          fill={color || Color.black}
+          d="M3.5 12 0 8.5v-5L3.5 0h5L12 3.5v5L8.5 12h-5Zm.6-3.2L6 7l1.9 2 1-1-2-1.9 2-1.9-1-1-1.9 2-1.9-2-1 1 2 1.9-2 1.9 1 1Zm0 1.9h3.8l2.8-2.8V4.1L7.9 1.3H4.1L1.3 4.1v3.8l2.8 2.8Z"
+        />
+      </g>
+      <defs>
+        <clipPath id="a">
+          <path fill="#fff" d="M0 0h12v12H0z" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
+
+export const StopIcon = memo(_StopIcon);
diff --git a/src/components/text/H1.tsx b/src/components/text/H1.tsx
index c756749..74269b7 100644
--- a/src/components/text/H1.tsx
+++ b/src/components/text/H1.tsx
@@ -1,3 +1,8 @@
-export function H1({ children }: { children: React.ReactNode }) {
-  return <h1 className="text-xl text-primary-500">{children}</h1>;
+import clsx from 'clsx';
+import { HTMLAttributes, PropsWithChildren } from 'react';
+
+type Props = PropsWithChildren<HTMLAttributes<HTMLHeadingElement>>;
+
+export function H1({ className, ...props }: Props) {
+  return <h1 className={clsx('text-xl text-primary-500', className)} {...props} />;
 }
diff --git a/src/features/deployment/warp/WarpDeploymentDeploy.tsx b/src/features/deployment/warp/WarpDeploymentDeploy.tsx
new file mode 100644
index 0000000..e3eda59
--- /dev/null
+++ b/src/features/deployment/warp/WarpDeploymentDeploy.tsx
@@ -0,0 +1,87 @@
+import { ArrowIcon, Button, WalletIcon } from '@hyperlane-xyz/widgets';
+import { useState } from 'react';
+import { toast } from 'react-toastify';
+import { SolidButton } from '../../../components/buttons/SolidButton';
+import { GasIcon } from '../../../components/icons/GasIcon';
+import { StopIcon } from '../../../components/icons/StopIcon';
+import { H1 } from '../../../components/text/H1';
+import { CardPage } from '../../../flows/CardPage';
+import { useCardNav } from '../../../flows/hooks';
+import { Color } from '../../../styles/Color';
+import { useWarpDeploymentConfig } from '../hooks';
+
+export function WarpDeploymentDeploy() {
+  return (
+    <div className="flex w-full flex-col items-center space-y-8 py-2 xs:min-w-100">
+      <HeaderSection />
+      <StatusSection />
+      <ButtonSection />
+    </div>
+  );
+}
+
+function HeaderSection() {
+  return <H1 className="text-center">Deploying Warp Route</H1>;
+}
+
+function StatusSection() {
+  const { deploymentConfig } = useWarpDeploymentConfig();
+  const _chains = deploymentConfig?.chains || [];
+
+  return (
+    <div className="space-y-3">
+      <FundAccounts />
+    </div>
+  );
+}
+
+function FundAccounts() {
+  const { deploymentConfig } = useWarpDeploymentConfig();
+  const chains = deploymentConfig?.chains || [];
+  const numChains = chains.length;
+
+  const [currentChainIndex, setCurrentChainIndex] = useState(0);
+  const currentChain = chains[currentChainIndex];
+
+  const onClickFund = () => {
+    // TODO create a temp deployer account and trigger a
+    if (currentChainIndex < numChains - 1) {
+      setCurrentChainIndex(currentChainIndex + 1);
+    }
+  };
+
+  return (
+    <div className="flex flex-col items-center space-y-5">
+      <div className="flex items-center justify-center gap-3">
+        <WalletIcon width={40} height={40} color={Color.primary['500']} />
+        <ArrowIcon width={30} height={30} color={Color.primary['500']} direction="e" />
+        <GasIcon width={38} height={38} color={Color.primary['500']} />
+      </div>
+      <p className="max-w-sm text-center text-sm leading-relaxed">
+        To deploy your route, a temporary account must be funded for each chain. Unused amounts are
+        refunded.
+      </p>
+      <SolidButton
+        color="accent"
+        className="px-3 py-1.5 text-sm"
+        onClick={onClickFund}
+      >{`Fund on ${currentChain} (Chain ${currentChainIndex + 1} / ${numChains})`}</SolidButton>
+    </div>
+  );
+}
+
+function ButtonSection() {
+  const { setPage } = useCardNav();
+  const onClickCancel = () => {
+    // TODO cancel in SDK if possible?
+    toast.warn('Deployment cancelled');
+    setPage(CardPage.WarpReview);
+  };
+
+  return (
+    <Button onClick={onClickCancel} className="gap-2.5">
+      <StopIcon width={16} height={16} color={Color.accent['500']} />
+      <span className="text-md text-accent-500">Cancel deployment</span>
+    </Button>
+  );
+}
diff --git a/src/flows/CardFlow.tsx b/src/flows/CardFlow.tsx
index cab4534..da59c44 100644
--- a/src/flows/CardFlow.tsx
+++ b/src/flows/CardFlow.tsx
@@ -1,4 +1,5 @@
 import { AnimatePresence, motion } from 'framer-motion';
+import { WarpDeploymentDeploy } from '../features/deployment/warp/WarpDeploymentDeploy';
 import { WarpDeploymentForm } from '../features/deployment/warp/WarpDeploymentForm';
 import { WarpDeploymentReview } from '../features/deployment/warp/WarpDeploymentReview';
 import { CardPage } from './CardPage';
@@ -25,6 +26,7 @@ export function CardFlow() {
         {page === CardPage.Landing && <LandingPage />}
         {page === CardPage.WarpForm && <WarpDeploymentForm />}
         {page === CardPage.WarpReview && <WarpDeploymentReview />}
+        {page === CardPage.WarpDeploy && <WarpDeploymentDeploy />}
       </motion.div>
       ;
     </AnimatePresence>
diff --git a/src/flows/LandingCard.tsx b/src/flows/LandingCard.tsx
index 88b3f82..ceaba02 100644
--- a/src/flows/LandingCard.tsx
+++ b/src/flows/LandingCard.tsx
@@ -10,17 +10,17 @@ export function LandingPage() {
   const { setPage } = useCardNav();
 
   return (
-    <div className="max-w-full space-y-6 p-4 text-center sm:max-w-screen-xs">
+    <div className="max-w-full space-y-6 p-4 text-center">
       <div className="relative -mx-8 flex items-center justify-center">
-        <Image src={BlueWave} alt="" className="absolute left-0 right-0 top-[0.5rem] rotate-6" />
+        <Image src={BlueWave} alt="" className="absolute left-0 right-0 top-[0.4rem] rotate-6" />
         <Image width={110} height={110} src={SpaceCraft} alt="" className="z-[5] -rotate-[16deg]" />
       </div>
       <h1 className="text-2xl text-primary-500">Deploy a Warp Route</h1>
-      <h2 className="px-2 text-md leading-relaxed">
+      <h2 className="max-w-md px-2 text-md leading-relaxed">
         Anyone can permissionlessly create an interchain token bridge by deploying Hyperlane Warp
         Route contracts.
       </h2>
-      <p className="px-2 text-sm leading-relaxed">
+      <p className="max-w-md px-2 text-sm leading-relaxed">
         Follow three steps to create a new route: configure your options, deploy your contracts, and
         set up a bridge UI.
       </p>
diff --git a/src/images/icons/arrow-right.svg b/src/images/icons/arrow-right.svg
deleted file mode 100644
index 2b05235..0000000
--- a/src/images/icons/arrow-right.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg width="13" height="10" viewBox="0 0 13 10" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="arrow-right-short 1">
-<path id="Vector" fill-rule="evenodd" clip-rule="evenodd" d="M1.35425 5.58035C1.35425 5.41969 1.42201 5.26562 1.54262 5.15202C1.66324 5.03841 1.82683 4.97459 1.99741 4.97459H9.44903L6.68731 2.37468C6.56654 2.26093 6.49869 2.10666 6.49869 1.9458C6.49869 1.78494 6.56654 1.63067 6.68731 1.51693C6.80808 1.40318 6.97187 1.33928 7.14266 1.33928C7.31346 1.33928 7.47725 1.40318 7.59802 1.51693L11.457 5.15147C11.5169 5.20774 11.5644 5.27459 11.5968 5.34818C11.6292 5.42178 11.6459 5.50067 11.6459 5.58035C11.6459 5.66003 11.6292 5.73892 11.5968 5.81252C11.5644 5.88611 11.5169 5.95296 11.457 6.00923L7.59802 9.64378C7.47725 9.75752 7.31346 9.82142 7.14266 9.82142C6.97187 9.82142 6.80808 9.75752 6.68731 9.64378C6.56654 9.53003 6.49869 9.37576 6.49869 9.2149C6.49869 9.05404 6.56654 8.89977 6.68731 8.78602L9.44903 6.18611H1.99741C1.82683 6.18611 1.66324 6.12229 1.54262 6.00869C1.42201 5.89509 1.35425 5.74101 1.35425 5.58035Z" fill="#010101"/>
-</g>
-</svg>