diff --git a/apps/widget-builder/src/components/buttons/DownloadJsonBtn.tsx b/apps/widget-builder/src/components/buttons/DownloadJsonBtn.tsx
index d5f8e51c..308a9f5f 100644
--- a/apps/widget-builder/src/components/buttons/DownloadJsonBtn.tsx
+++ b/apps/widget-builder/src/components/buttons/DownloadJsonBtn.tsx
@@ -1,3 +1,4 @@
+import DownloadIcon from "@mui/icons-material/Download";
 import { Button } from "@mui/material";
 import { FC } from "react";
 
@@ -12,12 +13,13 @@ const DownloadJsonBtn: FC<DownloadJsonBtnProps> = ({ json }) => (
     data-testid="download-button"
     fullWidth
     size="large"
+    color="primary"
     variant="contained"
     href={URL.createObjectURL(
       new Blob([JSON.stringify(json, null, 2)], { type: "application/json" }),
     )}
     download={`widget.json`}
-    sx={{ color: "white" }}
+    startIcon={<DownloadIcon />}
   >
     Download JSON
   </Button>
diff --git a/apps/widget-builder/src/components/buttons/IPFSPublishBtn.tsx b/apps/widget-builder/src/components/buttons/IPFSPublishBtn.tsx
index b8039385..952d5f6a 100644
--- a/apps/widget-builder/src/components/buttons/IPFSPublishBtn.tsx
+++ b/apps/widget-builder/src/components/buttons/IPFSPublishBtn.tsx
@@ -1,3 +1,5 @@
+import CloudDoneIcon from "@mui/icons-material/CloudDone";
+import CloudUploadIcon from "@mui/icons-material/CloudUpload";
 import { LoadingButton } from "@mui/lab";
 import { Stack, Typography } from "@mui/material";
 import { SuperfluidButton } from "@superfluid-finance/widget/components";
@@ -14,6 +16,7 @@ const IPFSPublishBtn: FC<IPFSPublishBtnProps> = ({ json }) => {
   const { publish, isLoading, ipfsHash } = usePinataIpfs({
     pinataMetadata: { name: `${json.productDetails.name}-superfluid-widget` },
   });
+  const isPublished = !!ipfsHash;
 
   return (
     <Stack direction="column" gap={2}>
@@ -21,13 +24,14 @@ const IPFSPublishBtn: FC<IPFSPublishBtnProps> = ({ json }) => {
         data-testid="publish-button"
         size="large"
         loading={isLoading}
+        disabled={isPublished}
         variant="contained"
         onClick={() => publish(json)}
+        startIcon={isPublished ? <CloudDoneIcon /> : <CloudUploadIcon />}
       >
-        Publish
+        {isPublished ? "Published to IPFS" : "Publish to IPFS"}
       </LoadingButton>
-
-      {ipfsHash && (
+      {isPublished && (
         <Stack direction="column" sx={{ alignItems: "center", mt: 4 }} gap={2}>
           <Typography
             data-testid="published-message"
diff --git a/apps/widget-builder/src/components/config-editor/ConfigEditorDrawer.tsx b/apps/widget-builder/src/components/config-editor/ConfigEditorDrawer.tsx
index 70cdccb0..1ed52760 100644
--- a/apps/widget-builder/src/components/config-editor/ConfigEditorDrawer.tsx
+++ b/apps/widget-builder/src/components/config-editor/ConfigEditorDrawer.tsx
@@ -19,6 +19,7 @@ export const ConfigEditorDrawer: FC<ConfigEditorDrawerProps> = ({
   setValue,
 }) => (
   <Drawer
+    variant="temporary"
     open={isOpen}
     onClose={() => setIsOpen(false)}
     keepMounted={true}
diff --git a/apps/widget-builder/src/components/export-editor/ExportEditor.tsx b/apps/widget-builder/src/components/export-editor/ExportEditor.tsx
index 29cef78a..1f83eeba 100644
--- a/apps/widget-builder/src/components/export-editor/ExportEditor.tsx
+++ b/apps/widget-builder/src/components/export-editor/ExportEditor.tsx
@@ -1,11 +1,4 @@
-import {
-  Box,
-  Divider,
-  MenuItem,
-  Select,
-  Stack,
-  Typography,
-} from "@mui/material";
+import { Box, MenuItem, Select, Stack, Typography } from "@mui/material";
 import { FC, useMemo, useState } from "react";
 import { useFormContext } from "react-hook-form";
 
@@ -76,10 +69,13 @@ const ExportEditor: FC = () => {
     useState<ExportOption>("ipfs");
 
   return (
-    <Stack gap={4}>
+    <Stack height="100%" gap={2}>
+      <Typography variant="h6" component="h2">
+        Checkout Export
+      </Typography>
       <Box>
         <InputWrapper
-          title="Select export option"
+          title="Export option"
           sx={{
             width: "100%",
           }}
@@ -104,10 +100,10 @@ const ExportEditor: FC = () => {
           )}
         </InputWrapper>
         <Box textAlign="center" sx={{ my: 3 }}>
-          <Typography variant="h5" color="grey.900" sx={{ mb: 1 }}>
+          <Typography variant="h6" component="h3" sx={{ mb: 1 }}>
             How does it work?
           </Typography>
-          <Typography color="grey.800">
+          <Typography color="text.secondary">
             {selectedExportOption === "ipfs"
               ? "You’ll create a hosted link to your checkout which you can embed in your CTAs."
               : selectedExportOption === "json"
@@ -118,17 +114,15 @@ const ExportEditor: FC = () => {
         {switchExportOption(selectedExportOption, json)}
       </Box>
 
-      <Divider />
-
-      <Box textAlign="center">
-        <Typography variant="h5" color="grey.900" sx={{ mb: 1 }}>
+      <Stack height="100%" justifyContent="flex-end" alignItems="center">
+        <Typography variant="h6" component="h3" sx={{ mb: 1 }}>
           Do you have more questions?
         </Typography>
-        <Typography color="grey.800" sx={{ mb: 3 }}>
+        <Typography color="text.secondary" sx={{ mb: 3 }}>
           We’ll show you how your business can benefit from using our checkout.
         </Typography>
         <BookDemoBtn>Book a Demo</BookDemoBtn>
-      </Box>
+      </Stack>
     </Stack>
   );
 };
diff --git a/apps/widget-builder/src/components/form/InputWrapper.tsx b/apps/widget-builder/src/components/form/InputWrapper.tsx
index 8a442066..744549fe 100644
--- a/apps/widget-builder/src/components/form/InputWrapper.tsx
+++ b/apps/widget-builder/src/components/form/InputWrapper.tsx
@@ -1,4 +1,4 @@
-import InfoIcon from "@mui/icons-material/Info";
+import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
 import {
   FormControl,
   FormHelperText,
@@ -6,6 +6,7 @@ import {
   Stack,
   SxProps,
   Tooltip,
+  Typography,
   useTheme,
 } from "@mui/material";
 import { FC, PropsWithChildren, useId } from "react";
@@ -19,7 +20,7 @@ export const InputInfo: FC<InputInfoProps> = ({ tooltip }) => {
 
   return (
     <Tooltip title={tooltip}>
-      <InfoIcon fontSize="small" sx={{ color: theme.palette.grey[500] }} />
+      <InfoOutlinedIcon fontSize="small" sx={{ color: "text.secondary" }} />
     </Tooltip>
   );
 };
@@ -30,7 +31,9 @@ interface InputWrapperProps {
   tooltip?: string;
   sx?: SxProps;
   helperText?: string;
-  children: (inputId: string) => PropsWithChildren["children"];
+  optional?: boolean;
+  error?: boolean;
+  children: (inputId: string, error?: boolean) => PropsWithChildren["children"];
 }
 
 const InputWrapper: FC<InputWrapperProps> = ({
@@ -39,23 +42,37 @@ const InputWrapper: FC<InputWrapperProps> = ({
   sx = {},
   helperText,
   children,
+  optional,
+  error,
   ...props
 }) => {
   const generatedId = useId();
   const inputId = props.id ?? generatedId;
   const labelId = `label-${inputId}`;
   return (
-    <FormControl sx={sx}>
+    <FormControl sx={sx} error={error}>
       <Stack direction="row" alignItems="center" gap={1} sx={{ mb: 0.75 }}>
         {!!title && (
           <FormLabel id={labelId} htmlFor={inputId} focused={false}>
             {title}
+            {!!optional && (
+              <Typography
+                component="span"
+                variant="caption"
+                color="text.secondary"
+                sx={{ ml: 1 }}
+              >
+                (optional)
+              </Typography>
+            )}
           </FormLabel>
         )}
         {!!tooltip && <InputInfo tooltip={tooltip} />}
       </Stack>
-      {children(inputId)}
-      {!!helperText && <FormHelperText>{helperText}</FormHelperText>}
+      {children(inputId, error)}
+      {!!helperText && (
+        <FormHelperText aria-describedby={labelId}>{helperText}</FormHelperText>
+      )}
     </FormControl>
   );
 };
diff --git a/apps/widget-builder/src/components/image-select/ImageSelect.tsx b/apps/widget-builder/src/components/image-select/ImageSelect.tsx
index 1487c637..6758fd49 100644
--- a/apps/widget-builder/src/components/image-select/ImageSelect.tsx
+++ b/apps/widget-builder/src/components/image-select/ImageSelect.tsx
@@ -1,24 +1,17 @@
 import AddIcon from "@mui/icons-material/Add";
 import CancelIcon from "@mui/icons-material/Cancel";
-import {
-  Box,
-  Button,
-  IconButton,
-  Stack,
-  Typography,
-  useTheme,
-} from "@mui/material";
+import { Box, Button, IconButton, Stack, useTheme } from "@mui/material";
 import { ChangeEvent, FC, useRef } from "react";
 
 type ImageSelectProps = {
-  label: string;
+  id: string;
   imageSrc?: string;
   onClick: (file: File) => void;
   onRemove: () => void;
 };
 
 const ImageSelect: FC<ImageSelectProps> = ({
-  label,
+  id,
   imageSrc,
   onClick,
   onRemove,
@@ -39,19 +32,13 @@ const ImageSelect: FC<ImageSelectProps> = ({
 
   return (
     <Stack direction="column" gap={1} sx={{ flex: 1 }}>
-      <Stack
-        direction="row"
-        sx={{ alignItems: "center", justifyContent: "space-between" }}
-      >
-        <Typography variant="body1" fontWeight="500">
-          {label}
-        </Typography>
-        {imageSrc && (
+      {imageSrc && (
+        <Stack direction="row" justifyContent="flex-end">
           <IconButton onClick={onRemove} size="small" sx={{ p: 0 }}>
             <CancelIcon data-testid="remove-image-button" />
           </IconButton>
-        )}
-      </Stack>
+        </Stack>
+      )}
 
       {imageSrc ? (
         <Box
@@ -74,7 +61,7 @@ const ImageSelect: FC<ImageSelectProps> = ({
             data-testid="file-upload-field"
             hidden
             type="file"
-            name={label}
+            name={id}
             ref={inputRef}
             onChange={handleFileUpload}
           />
@@ -92,16 +79,6 @@ const ImageSelect: FC<ImageSelectProps> = ({
               height: 90,
             }}
           >
-            <Typography
-              variant="caption"
-              sx={{
-                color: theme.palette.grey[500],
-                textTransform: "none",
-                textAlign: "left",
-              }}
-            >
-              Optional
-            </Typography>
             <Box
               sx={{
                 display: "flex",
diff --git a/apps/widget-builder/src/components/payment-editor/PaymentEditor.tsx b/apps/widget-builder/src/components/payment-editor/PaymentEditor.tsx
new file mode 100644
index 00000000..3c641598
--- /dev/null
+++ b/apps/widget-builder/src/components/payment-editor/PaymentEditor.tsx
@@ -0,0 +1,230 @@
+import AddIcon from "@mui/icons-material/Add";
+import AutoFixHighIcon from "@mui/icons-material/AutoFixHigh";
+import CloseIcon from "@mui/icons-material/Close";
+import {
+  AppBar,
+  Box,
+  Button,
+  Dialog,
+  Divider,
+  Fab,
+  IconButton,
+  Slide,
+  SlideProps,
+  Stack,
+  Toolbar,
+  Tooltip,
+  Typography,
+  Zoom,
+} from "@mui/material";
+import { FC, useCallback, useState } from "react";
+import { Controller, useFieldArray, useFormContext } from "react-hook-form";
+
+import useDemoMode from "../../hooks/useDemoMode";
+import PaymentOptionView from "../payment-option-view/PaymentOptionView";
+import SelectPaymentOption from "../select-payment-option/SelectPaymentOption";
+import { WidgetProps } from "../widget-preview/WidgetPreview";
+
+const ProductEditor: FC = () => {
+  const { control, watch } = useFormContext<WidgetProps>();
+
+  const { fields, append, remove } = useFieldArray({
+    control,
+    name: "paymentDetails.paymentOptions", // unique name for your Field Array
+  });
+
+  const [paymentOptions] = watch(["paymentDetails.paymentOptions"]);
+
+  const [isAdding, setIsAdding] = useState(false);
+  const [addCount, setAddCount] = useState(0);
+
+  const handleOpen = () => {
+    setIsAdding(true);
+  };
+
+  const handleClose = () => {
+    setIsAdding(false);
+  };
+
+  const { setDemoPaymentDetails } = useDemoMode();
+  const handleDemo = useCallback(() => {
+    setAddCount((x) => x + 1);
+    setDemoPaymentDetails();
+  }, []);
+
+  return (
+    <>
+      <Stack direction="column" gap={2}>
+        <Box mb={1}>
+          <Typography variant="h6" component="h2">
+            Checkout Payment Details
+          </Typography>
+          <Typography variant="body2" color="text.secondary">
+            Enter your preferred payment options to start receiving ongoing
+            real-time payments powered by the Superfluid Protocol.
+          </Typography>
+        </Box>
+        <Stack direction="column">
+          <Stack
+            direction="row"
+            justifyContent="space-between"
+            alignItems="center"
+            sx={{
+              mb: 2,
+            }}
+          >
+            <Typography variant="subtitle1" component="h3">
+              <Stack direction="row" alignItems="center" gap={1}>
+                Payment Options
+                <Typography
+                  component="span"
+                  data-testid="added-payment-options-count"
+                  color="text.secondary"
+                >
+                  ({paymentOptions.length})
+                </Typography>
+              </Stack>
+            </Typography>
+            <Stack direction="row" gap={1}>
+              <Button
+                variant="contained"
+                size="medium"
+                color="primary"
+                onClick={handleOpen}
+                startIcon={<AddIcon />}
+              >
+                Add
+              </Button>
+            </Stack>
+          </Stack>
+
+          <Stack direction="column" gap={2.5}>
+            {paymentOptions.length ? (
+              paymentOptions
+                .map(
+                  (
+                    {
+                      superToken,
+                      chainId,
+                      transferAmountEther,
+                      flowRate,
+                      receiverAddress,
+                    },
+                    i,
+                  ) => (
+                    <Zoom
+                      in
+                      appear={!!addCount}
+                      key={`${superToken.address}-${i}`}
+                    >
+                      <Box>
+                        <PaymentOptionView
+                          upfrontPaymentAmountEther={transferAmountEther}
+                          flowRate={flowRate}
+                          receiverAddress={receiverAddress}
+                          superToken={superToken}
+                          chainId={chainId}
+                          index={i}
+                          remove={(params) => {
+                            remove(params);
+                            setAddCount(0);
+                          }}
+                        />
+                      </Box>
+                    </Zoom>
+                  ),
+                )
+                .reverse()
+            ) : (
+              <Typography
+                data-testid="no-options-message"
+                variant="body1"
+                color="text.secondary"
+              >
+                {"You haven't added any payment options yet."} Add your first
+                one or{" "}
+                <Typography
+                  component="span"
+                  color="primary"
+                  sx={{ cursor: "pointer" }}
+                  onClick={handleDemo}
+                >
+                  replace with demo data
+                </Typography>
+                .
+              </Typography>
+            )}
+          </Stack>
+        </Stack>
+      </Stack>
+      <Dialog
+        open={isAdding}
+        TransitionComponent={Slide}
+        TransitionProps={
+          {
+            direction: "right",
+            exit: false,
+          } as SlideProps
+        }
+        keepMounted
+      >
+        <AppBar color="transparent" position="relative" elevation={0}>
+          <Stack
+            component={Toolbar}
+            direction="row"
+            justifyContent="space-between"
+          >
+            <Typography variant="subtitle1">Add Payment Option</Typography>
+            <IconButton
+              edge="start"
+              color="inherit"
+              onClick={handleClose}
+              aria-label="close"
+            >
+              <CloseIcon />
+            </IconButton>
+          </Stack>
+        </AppBar>
+        <Divider />
+        <Controller
+          control={control}
+          name="paymentDetails.paymentOptions"
+          render={() => (
+            <SelectPaymentOption
+              key={addCount.toString()}
+              onAdd={(props) => {
+                setAddCount((x) => x + 1);
+                append(props);
+                handleClose();
+              }}
+              onDiscard={() => {
+                handleClose();
+                setAddCount((x) => x + 1);
+              }}
+            />
+          )}
+        />
+      </Dialog>
+      <Tooltip
+        title="Replace with demo payment details"
+        placement="right"
+        arrow
+      >
+        <Fab
+          size="medium"
+          color="secondary"
+          sx={{
+            position: "absolute",
+            bottom: 72,
+            left: 20,
+          }}
+          onClick={handleDemo}
+        >
+          <AutoFixHighIcon />
+        </Fab>
+      </Tooltip>
+    </>
+  );
+};
+
+export default ProductEditor;
diff --git a/apps/widget-builder/src/components/payment-option-view/PaymentOptionView.tsx b/apps/widget-builder/src/components/payment-option-view/PaymentOptionView.tsx
index c1635fe8..412815a2 100644
--- a/apps/widget-builder/src/components/payment-option-view/PaymentOptionView.tsx
+++ b/apps/widget-builder/src/components/payment-option-view/PaymentOptionView.tsx
@@ -1,9 +1,14 @@
-import CloseIcon from "@mui/icons-material/Close";
 import {
   Button,
-  Paper,
+  Card,
+  CardActions,
+  CardContent,
+  Divider,
   Stack,
+  styled,
   Tooltip,
+  tooltipClasses,
+  TooltipProps,
   Typography,
   useTheme,
 } from "@mui/material";
@@ -15,6 +20,7 @@ import {
 import superTokenList from "@superfluid-finance/widget/tokenlist";
 import Image from "next/image";
 import { FC, ReactNode, useMemo } from "react";
+import { getAddress } from "viem";
 
 import NetworkAvatar from "../NetworkAvatar";
 
@@ -23,6 +29,14 @@ type PaymentOptionRowProps = {
   value: ReactNode;
 };
 
+const NoMaxWidthTooltip = styled(({ className, ...props }: TooltipProps) => (
+  <Tooltip {...props} classes={{ popper: className }} />
+))({
+  [`& .${tooltipClasses.tooltip}`]: {
+    maxWidth: "none",
+  },
+});
+
 const PaymentOptionRow: FC<PaymentOptionRowProps> = ({ label, value }) => {
   const theme = useTheme();
   return (
@@ -33,14 +47,7 @@ const PaymentOptionRow: FC<PaymentOptionRowProps> = ({ label, value }) => {
       direction="row"
       sx={{ width: "100%", justifyContent: "space-between" }}
     >
-      <Typography
-        data-testid="payment-option-label"
-        sx={{
-          color: theme.palette.grey[700],
-          fontSize: "14px",
-          fontWeight: 500,
-        }}
-      >
+      <Typography data-testid="payment-option-label" fontWeight="500">
         {label}
       </Typography>
       {value}
@@ -51,7 +58,7 @@ const PaymentOptionRow: FC<PaymentOptionRowProps> = ({ label, value }) => {
 type PaymentOptionViewProps = {
   superToken: { address: `0x${string}` };
   upfrontPaymentAmountEther?: string;
-  flowRate: FlowRate;
+  flowRate: FlowRate | undefined;
   receiverAddress: `0x${string}`;
   chainId: ChainId;
   index: number;
@@ -62,135 +69,127 @@ const PaymentOptionView: FC<PaymentOptionViewProps> = ({
   superToken,
   upfrontPaymentAmountEther,
   flowRate,
-  receiverAddress,
+  receiverAddress: receiverAddress_,
   chainId,
   index,
   remove,
 }) => {
-  const theme = useTheme();
-  const network = supportedNetworks.find((n) => n.id === chainId)!;
-  const token = Object.values(superTokenList.tokens).find(
-    (token) => token.address === superToken.address,
+  const network = useMemo(
+    () => supportedNetworks.find((n) => n.id === chainId)!,
+    [chainId],
+  );
+  const receiverAddress = useMemo(
+    () => getAddress(receiverAddress_),
+    [receiverAddress_],
+  );
+
+  const token = useMemo(
+    () =>
+      Object.values(superTokenList.tokens).find(
+        (token) =>
+          token.address.toLowerCase() === superToken.address.toLowerCase(),
+      ),
+    [superTokenList, superToken.address],
   );
 
   const flowRateValue = useMemo(() => {
-    if (!flowRate) return "Custom amount";
+    if (!flowRate) return "User-defined";
     return `${flowRate.amountEther} ${token?.symbol ?? "x"}/${flowRate.period}`;
   }, [flowRate, token]);
 
   return (
-    <Paper variant="outlined" sx={{ p: 2 }}>
-      <Stack direction="column" gap={1} sx={{ mb: 2 }}>
-        <PaymentOptionRow
-          label="Network"
-          value={
-            <Stack
-              data-testid="added-network-option"
-              direction="row"
-              gap={1}
-              sx={{ alignItems: "center" }}
-            >
-              <NetworkAvatar network={network} />
-              {network?.name}
-            </Stack>
-          }
-        />
-        <PaymentOptionRow
-          label="Token"
-          value={
-            <Stack
-              data-testid="added-token-option"
-              direction="row"
-              gap={1}
-              sx={{ alignItems: "center" }}
-            >
-              {token?.logoURI && (
-                <Image
-                  src={token.logoURI}
-                  alt=""
-                  width={24}
-                  height={24}
-                  objectFit="contain"
-                />
-              )}
-              {token?.name}
-            </Stack>
-          }
-        />
-        <PaymentOptionRow label="Stream Rate" value={flowRateValue} />
-        {upfrontPaymentAmountEther && (
+    <Card variant="elevation" elevation={1}>
+      <CardContent>
+        <Stack direction="column" gap={1}>
           <PaymentOptionRow
-            label="Upfront Payment Amount"
-            value={`${upfrontPaymentAmountEther} ${token?.symbol ?? ""}`}
+            label="Network"
+            value={
+              <Stack
+                data-testid="added-network-option"
+                direction="row"
+                gap={1}
+                sx={{ alignItems: "center" }}
+              >
+                <NetworkAvatar network={network} />
+                {network?.name}
+              </Stack>
+            }
           />
-        )}
-        <PaymentOptionRow
-          label="Receiver"
-          value={
-            <Tooltip
-              title={receiverAddress}
-              data-testid="added-payment-receiver-tooltip"
-            >
-              <Typography data-testid="added-payment-receiver">
-                {`${receiverAddress.substring(
-                  0,
-                  6,
-                )}...${receiverAddress.substring(
-                  receiverAddress.length - 4,
-                  receiverAddress.length,
+          <PaymentOptionRow
+            label="Token"
+            value={
+              <Stack
+                data-testid="added-token-option"
+                direction="row"
+                gap={1}
+                sx={{ alignItems: "center" }}
+              >
+                {token?.logoURI && (
+                  <Image
+                    src={token.logoURI}
+                    alt=""
+                    width={24}
+                    height={24}
+                    objectFit="contain"
+                  />
                 )}
+                {token?.name}
+              </Stack>
+            }
+          />
+          <PaymentOptionRow label="Stream Rate" value={flowRateValue} />
+          {upfrontPaymentAmountEther && (
+            <PaymentOptionRow
+              label="Upfront Payment Amount"
+              value={`${upfrontPaymentAmountEther} ${token?.symbol ?? ""}`}
+            />
+          )}
+          <PaymentOptionRow
+            label="Receiver"
+            value={
+              <NoMaxWidthTooltip
+                title={receiverAddress}
+                data-testid="added-payment-receiver-tooltip"
+                placement="bottom"
+                arrow
+                PopperProps={{
+                  sx: {
+                    maxWidth: "none",
+                  },
+                }}
+              >
+                <Typography data-testid="added-payment-receiver">
+                  {`${receiverAddress.substring(
+                    0,
+                    6,
+                  )}...${receiverAddress.substring(
+                    receiverAddress.length - 4,
+                    receiverAddress.length,
+                  )}
                 `}
-              </Typography>
-            </Tooltip>
-          }
-        />
-      </Stack>
-
+                </Typography>
+              </NoMaxWidthTooltip>
+            }
+          />
+        </Stack>
+      </CardContent>
+      <Divider />
       <Stack
+        component={CardActions}
         direction="row"
-        sx={{ width: "100%", justifyContent: "center" }}
-        gap={1}
+        justifyContent="flex-end"
+        bgcolor="grey.50"
       >
-        {/* <Button
-          color="primary"
-          variant="contained"
-          size="small"
-          sx={{
-            width: "160px",
-            color: theme.palette.primary.main,
-            backgroundColor: theme.palette.primary.light,
-            boxShadow: "none",
-            textTransform: "none",
-
-            "&:hover:enabled": {
-              color: theme.palette.common.white,
-            },
-          }}
-        >
-          Edit
-          <EditIcon sx={{ fontSize: 16, ml: 1 }} />
-        </Button> */}
         <Button
           data-testid="delete-payment-option-button"
-          fullWidth
           color="error"
-          sx={{
-            color: theme.palette.error.main,
-            backgroundColor: theme.palette.error.light,
-            boxShadow: "none",
-            textTransform: "none",
-            "&:hover:enabled": {
-              color: theme.palette.common.white,
-            },
-          }}
-          variant="contained"
+          variant="text"
           onClick={() => remove(index)}
         >
-          Delete
-          <CloseIcon sx={{ fontSize: 16, ml: 1 }} />
+          Remove
         </Button>
       </Stack>
-    </Paper>
+    </Card>
   );
 };
 
diff --git a/apps/widget-builder/src/components/product-editor/ProductEditor.tsx b/apps/widget-builder/src/components/product-editor/ProductEditor.tsx
index b3d0b138..0d27dd12 100644
--- a/apps/widget-builder/src/components/product-editor/ProductEditor.tsx
+++ b/apps/widget-builder/src/components/product-editor/ProductEditor.tsx
@@ -1,11 +1,11 @@
-import { Divider, Stack, TextField, Typography } from "@mui/material";
+import AutoFixHighIcon from "@mui/icons-material/AutoFixHigh";
+import { Box, Fab, Stack, TextField, Tooltip, Typography } from "@mui/material";
 import { FC } from "react";
 import { Controller, useFieldArray, useFormContext } from "react-hook-form";
 
-import theme from "../../theme";
+import useDemoMode from "../../hooks/useDemoMode";
 import InputWrapper from "../form/InputWrapper";
-import PaymentOptionView from "../payment-option-view/PaymentOptionView";
-import SelectPaymentOption from "../select-payment-option/SelectPaymentOption";
+import ImageSelect from "../image-select/ImageSelect";
 import { WidgetProps } from "../widget-preview/WidgetPreview";
 
 const ProductEditor: FC = () => {
@@ -17,17 +17,25 @@ const ProductEditor: FC = () => {
   });
 
   const [paymentOptions] = watch(["paymentDetails.paymentOptions"]);
+  const { setDemoProductDetails } = useDemoMode();
 
   return (
-    <Stack gap={1}>
-      <Stack mb={4} gap={2}>
-        <Typography variant="subtitle1">Payment Configuration</Typography>
-
+    <>
+      <Stack gap={2}>
+        <Box mb={1}>
+          <Typography variant="h6" component="h2">
+            Checkout Product Details
+          </Typography>
+          <Typography variant="body2" color="text.secondary">
+            Define the product you want to receive ongoing real-time payments
+            for.
+          </Typography>
+        </Box>
         <Controller
           control={control}
           name="productDetails.name"
           render={({ field: { value, onChange } }) => (
-            <InputWrapper title="Product Name">
+            <InputWrapper title="Product Name" optional>
               {(id) => (
                 <TextField
                   id={id}
@@ -45,7 +53,7 @@ const ProductEditor: FC = () => {
           control={control}
           name="productDetails.description"
           render={({ field: { value, onChange } }) => (
-            <InputWrapper title="Product Description">
+            <InputWrapper title="Product Description" optional>
               {(id) => (
                 <TextField
                   id={id}
@@ -60,75 +68,42 @@ const ProductEditor: FC = () => {
             </InputWrapper>
           )}
         />
-      </Stack>
-
-      <Stack direction="column" gap={1.5}>
-        <Typography variant="subtitle1">Add Payment Options</Typography>
         <Controller
           control={control}
-          name="paymentDetails.paymentOptions"
-          render={() => <SelectPaymentOption onAdd={append} />}
+          name="productDetails.imageURI"
+          render={({ field: { value, onChange } }) => (
+            <InputWrapper id="product-image" title="Product Image" optional>
+              {(id) => (
+                <ImageSelect
+                  id={id}
+                  onClick={(file) => onChange(URL.createObjectURL(file))}
+                  onRemove={() => onChange("")}
+                  imageSrc={value}
+                />
+              )}
+            </InputWrapper>
+          )}
         />
-
-        <Divider sx={{ my: 4 }} />
-
-        <Stack direction="column">
-          <Stack
-            direction="row"
-            sx={{
-              mb: 2,
-              justifyContent: "space-between",
-              alignItems: "center",
-            }}
-          >
-            <Typography variant="subtitle1">Payment Details Summary</Typography>
-            <Typography
-              data-testid="added-payment-options-count"
-              sx={{ color: theme.palette.grey[500] }}
-            >
-              Added: {paymentOptions.length}
-            </Typography>
-          </Stack>
-
-          <Stack direction="column" gap={2.5}>
-            {paymentOptions.length ? (
-              paymentOptions.map(
-                (
-                  {
-                    superToken,
-                    chainId,
-                    transferAmountEther,
-                    flowRate,
-                    receiverAddress,
-                  },
-                  i,
-                ) => (
-                  <PaymentOptionView
-                    key={`${superToken.address}-${i}`}
-                    upfrontPaymentAmountEther={transferAmountEther}
-                    flowRate={
-                      flowRate ?? {
-                        amountEther: "0",
-                        period: "month",
-                      }
-                    }
-                    receiverAddress={receiverAddress}
-                    superToken={superToken}
-                    chainId={chainId}
-                    index={i}
-                    remove={remove}
-                  />
-                ),
-              )
-            ) : (
-              <Typography data-testid="no-options-message" variant="caption">
-                - None
-              </Typography>
-            )}
-          </Stack>
-        </Stack>
       </Stack>
-    </Stack>
+      <Tooltip
+        title="Replace with demo product details"
+        placement="right"
+        arrow
+      >
+        <Fab
+          size="medium"
+          color="secondary"
+          onClick={setDemoProductDetails}
+          sx={{
+            position: "absolute",
+            bottom: 72,
+            left: 20,
+          }}
+        >
+          <AutoFixHighIcon />
+        </Fab>
+      </Tooltip>
+    </>
   );
 };
 
diff --git a/apps/widget-builder/src/components/select-payment-option/SelectPaymentOption.tsx b/apps/widget-builder/src/components/select-payment-option/SelectPaymentOption.tsx
index c5990a63..47d1e12e 100644
--- a/apps/widget-builder/src/components/select-payment-option/SelectPaymentOption.tsx
+++ b/apps/widget-builder/src/components/select-payment-option/SelectPaymentOption.tsx
@@ -2,14 +2,17 @@ import {
   Autocomplete,
   Avatar,
   Button,
-  Chip,
   Collapse,
+  DialogActions,
+  DialogContent,
+  Divider,
   FormControlLabel,
   FormGroup,
   InputAdornment,
   ListItem,
   ListItemAvatar,
   ListItemText,
+  ListSubheader,
   MenuItem,
   Select,
   SelectChangeEvent,
@@ -22,6 +25,8 @@ import {
 import {
   ChainId,
   NetworkAssetInfo,
+  PaymentOption,
+  paymentOptionSchema,
   supportedNetworks,
   TimePeriod,
   timePeriods,
@@ -32,21 +37,26 @@ import tokenList, {
 import { ChangeEvent, FC, useEffect, useMemo, useState } from "react";
 import { UseFieldArrayAppend } from "react-hook-form";
 import { Chain } from "wagmi";
+import { ZodError } from "zod";
 
 import InputWrapper, { InputInfo } from "../form/InputWrapper";
 import NetworkAvatar from "../NetworkAvatar";
 import { WidgetProps } from "../widget-preview/WidgetPreview";
 
-export type PaymentOption = {
+export type PaymentOptionWithSuperTokenAndNetwork = {
   network: NetworkAssetInfo;
   superToken: SuperTokenInfo;
 };
 
 type PaymentOptionSelectorProps = {
   onAdd: UseFieldArrayAppend<WidgetProps, "paymentDetails.paymentOptions">;
+  onDiscard: () => void;
 };
 
-const SelectPaymentOption: FC<PaymentOptionSelectorProps> = ({ onAdd }) => {
+const SelectPaymentOption: FC<PaymentOptionSelectorProps> = ({
+  onAdd,
+  onDiscard,
+}) => {
   const [receiver, setReceiver] = useState<`0x${string}` | "">("");
   const [selectedNetwork, setSelectedNetwork] = useState<Chain | null>(null);
   const [selectedToken, setSelectedToken] = useState<SuperTokenInfo | null>(
@@ -86,38 +96,41 @@ const SelectPaymentOption: FC<PaymentOptionSelectorProps> = ({ onAdd }) => {
     }
   };
 
+  const [errors, setErrors] = useState<ZodError<PaymentOption> | null>(null);
+
   const handleAdd = () => {
-    if (!selectedToken) {
-      return;
-    }
+    setErrors(null);
 
-    const network = supportedNetworks.find(
-      (n) => n.id === selectedToken.chainId,
-    );
+    const thePaymentOption: Partial<PaymentOption> = {
+      receiverAddress: receiver as `0x${string}`,
+      superToken: selectedToken
+        ? {
+            address: selectedToken.address as `0x${string}`,
+          }
+        : undefined,
+      chainId: selectedToken ? (selectedToken.chainId as ChainId) : undefined,
+      ...(!isCustomAmount
+        ? {
+            ...(showUpfrontPayment
+              ? {
+                  transferAmountEther: upfrontPaymentAmount
+                    ? upfrontPaymentAmount
+                    : "0",
+                }
+              : {}),
+            flowRate: {
+              amountEther: flowRateAmount ? flowRateAmount : "0",
+              period: flowRateInterval,
+            },
+          }
+        : {}),
+    };
 
-    if (network && receiver) {
-      onAdd({
-        receiverAddress: receiver,
-        superToken: {
-          address: selectedToken.address as `0x${string}`,
-        },
-        chainId: selectedToken.chainId as ChainId,
-        ...(!isCustomAmount
-          ? {
-              ...(showUpfrontPayment
-                ? {
-                    transferAmountEther: upfrontPaymentAmount
-                      ? upfrontPaymentAmount
-                      : "0",
-                  }
-                : {}),
-              flowRate: {
-                amountEther: flowRateAmount ? flowRateAmount : "0",
-                period: flowRateInterval,
-              },
-            }
-          : {}),
-      });
+    const validationResult = paymentOptionSchema.safeParse(thePaymentOption);
+    if (validationResult.success) {
+      onAdd(validationResult.data);
+    } else {
+      setErrors(validationResult.error);
     }
   };
 
@@ -150,277 +163,313 @@ const SelectPaymentOption: FC<PaymentOptionSelectorProps> = ({ onAdd }) => {
   const [upfrontPaymentAmount, setUpfrontPaymentAmount] = useState<
     `${number}` | ""
   >("");
-  const onShowUpfrontPaymentChanged = (_e: ChangeEvent, checked: boolean) =>
-    setShowUpfrontPayment(checked);
+  const onShowUpfrontPaymentChanged = (_e: ChangeEvent, checked: boolean) => {
+    if (checked) {
+      setShowUpfrontPayment(true);
+      setUpfrontPaymentAmount(flowRateAmount);
+    } else {
+      setShowUpfrontPayment(false);
+      setUpfrontPaymentAmount("");
+    }
+  };
 
   return (
-    <Stack direction="column" gap={1.5}>
-      <InputWrapper
-        title=""
-        sx={{ width: "100%" }}
-        helperText={
-          isCustomAmount
-            ? "User-defined rate is a payment type suited for donations where users determine the amount they want to pay over a given period of time."
-            : "Fixed rate is a payment type suited for regular subscriptions where users pay a predetermined amount over a given period of time."
-        }
-      >
-        {(id) => (
-          <ToggleButtonGroup
-            id={id}
-            value={isCustomAmount}
-            exclusive
-            onChange={onCustomAmountChanged}
-            fullWidth
-            color="primary"
-          >
-            <ToggleButton value={false}>Fixed rate</ToggleButton>
-            <ToggleButton value={true}>User-defined rate</ToggleButton>
-          </ToggleButtonGroup>
-        )}
-      </InputWrapper>
-
-      <Stack
-        sx={{ display: "grid", gridTemplateColumns: "1fr 1fr" }}
-        gap={1.25}
-      >
-        <InputWrapper
-          title="Network"
-          tooltip="Select the network you'd like to request payment on."
-        >
-          {(id) => (
-            <Select
-              labelId={`label-${id}`}
-              id={id}
-              data-testid="network-selection"
-              value={selectedNetwork?.name}
-              onChange={handleNetworkSelect}
-              fullWidth
-            >
-              {filteredNetworks.map((network) => (
-                <MenuItem
-                  data-testid={network.id}
-                  value={network.name}
-                  key={`${network.id}`}
-                >
-                  <Stack
-                    direction="row"
-                    gap={1}
-                    sx={{ alignItems: "center", width: "100%" }}
-                  >
-                    <NetworkAvatar network={network} />
-                    <Stack
-                      direction="row"
-                      sx={{
-                        alignItems: "center",
-                        justifyContent: "space-between",
-                        flex: 1,
-                      }}
-                    >
-                      {network.name}
-                      {network.testnet && (
-                        <Chip
-                          data-testid="testnet-chip"
-                          variant="filled"
-                          color="primary"
-                          label="test"
-                          size="small"
-                        />
-                      )}
-                    </Stack>
-                  </Stack>
-                </MenuItem>
-              ))}
-            </Select>
-          )}
-        </InputWrapper>
-
-        <InputWrapper
-          id="token-select"
-          title="Super Token"
-          tooltip="Select the SuperToken you'd like to request payment in."
-        >
-          {(id) => (
-            <Autocomplete
-              fullWidth
-              disabled={!selectedNetwork}
-              value={selectedToken}
-              onChange={(_, value) => setSelectedToken(value!)}
-              id={id}
-              options={autoCompleteTokenOptions}
-              getOptionLabel={(token) => token.symbol}
-              componentsProps={{
-                popper: {
-                  placement: "bottom-end",
-                },
-              }}
-              renderOption={(props, option) => (
-                <ListItem {...props}>
-                  <ListItemAvatar sx={{ minWidth: 40 }}>
-                    {option.logoURI && (
-                      <Avatar
-                        sx={{ width: 24, height: 24, objectFit: "contain" }}
-                        src={option.logoURI}
-                      />
-                    )}
-                  </ListItemAvatar>
-                  <ListItemText
-                    primary={option.symbol}
-                    secondary={option.name}
-                    secondaryTypographyProps={{ variant: "caption" }}
-                    sx={{ m: 0 }}
-                  />
-                </ListItem>
-              )}
-              renderInput={(params) => (
-                <TextField
-                  {...params}
-                  InputProps={{
-                    ...params.InputProps,
-                    startAdornment: selectedToken?.logoURI && (
-                      <Avatar
-                        sx={{ width: 24, height: 24, objectFit: "contain" }}
-                        src={selectedToken.logoURI}
-                      />
-                    ),
-                  }}
-                />
-              )}
-            />
-          )}
-        </InputWrapper>
-      </Stack>
-
-      <Collapse in={!isCustomAmount}>
-        <Stack spacing={1}>
+    <>
+      <DialogContent>
+        <Stack direction="column" gap={1.5}>
           <InputWrapper
-            title="Stream Rate"
-            tooltip="Set the amount of tokens per month for the payment."
-            sx={{ pt: 1.5 }}
+            title="Network"
+            tooltip="Select the network you'd like to request payment on."
+            error={Boolean(errors?.formErrors?.fieldErrors?.chainId)}
           >
             {(id) => (
-              <Stack
-                gap="-1px"
-                sx={{ display: "grid", gridTemplateColumns: "2fr 1fr" }}
+              <Select
+                labelId={`label-${id}`}
+                id={id}
+                data-testid="network-selection"
+                value={selectedNetwork?.name}
+                onChange={handleNetworkSelect}
+                fullWidth
               >
-                <TextField
-                  id={id}
-                  data-testid="flow-rate-input"
-                  fullWidth
-                  value={flowRateAmount}
-                  onChange={({ target }) =>
-                    setFlowRateAmount(target.value as `${number}`)
-                  }
-                  InputProps={{
-                    sx: {
-                      borderTopRightRadius: 0,
-                      borderBottomRightRadius: 0,
-                    },
-                    endAdornment: (
-                      <InputAdornment position="end">
-                        {selectedToken?.symbol}
-                      </InputAdornment>
-                    ),
-                  }}
-                />
-                <Select
-                  data-testid="time-unit-selection"
-                  value={flowRateInterval}
-                  onChange={({ target }) =>
-                    setFlowRateInterval(target.value as TimePeriod)
-                  }
-                  sx={{
-                    borderTopLeftRadius: 0,
-                    borderBottomLeftRadius: 0,
-                    marginLeft: "-1px",
-                  }}
-                >
-                  {timePeriods.map((interval) => (
-                    <MenuItem value={interval} key={interval}>
-                      /{interval}
+                <ListSubheader>Mainnets</ListSubheader>
+                {filteredNetworks
+                  .filter((x) => !x.testnet)
+                  .map((network) => (
+                    <MenuItem
+                      data-testid={network.id}
+                      value={network.name}
+                      key={`${network.id}`}
+                    >
+                      <Stack
+                        direction="row"
+                        gap={1}
+                        sx={{ alignItems: "center", width: "100%" }}
+                      >
+                        <NetworkAvatar network={network} />
+                        {network.name}
+                      </Stack>
                     </MenuItem>
                   ))}
-                </Select>
-              </Stack>
+                <ListSubheader>Testnets</ListSubheader>
+                {filteredNetworks
+                  .filter((x) => x.testnet)
+                  .map((network) => (
+                    <MenuItem
+                      data-testid={network.id}
+                      value={network.name}
+                      key={`${network.id}`}
+                    >
+                      <Stack
+                        direction="row"
+                        gap={1}
+                        sx={{ alignItems: "center", width: "100%" }}
+                      >
+                        <NetworkAvatar network={network} />
+                        {network.name}
+                      </Stack>
+                    </MenuItem>
+                  ))}
+              </Select>
             )}
           </InputWrapper>
-          <FormGroup>
-            <Stack direction="row" alignItems="center" gap={1}>
-              <FormControlLabel
-                sx={{
-                  mr: 0,
-                }}
-                control={
-                  <Switch
-                    color="primary"
-                    checked={showUpfrontPayment}
-                    value={showUpfrontPayment}
-                    onChange={onShowUpfrontPaymentChanged}
-                  />
+
+          <InputWrapper
+            title="Receiver Address"
+            tooltip="Set your wallet or multisig address on the relevant network."
+            error={Boolean(errors?.formErrors?.fieldErrors?.receiverAddress)}
+          >
+            {(id, error) => (
+              <TextField
+                id={id}
+                error={error}
+                data-testid="receiver-input-field"
+                value={receiver}
+                onChange={({ target }) =>
+                  setReceiver(target.value as `0x${string}`)
                 }
-                label="Charge upfront payment amount"
               />
-              <InputInfo tooltip="A one-time payment amount to be paid before the stream starts." />
-            </Stack>
-          </FormGroup>
+            )}
+          </InputWrapper>
 
-          <Collapse in={showUpfrontPayment}>
-            <FormGroup>
-              <InputWrapper
-                title="Upfront Payment Amount"
-                tooltip="The ERC-20 transfer amount the user should send as an upfront payment."
-                sx={{ pt: 1.5 }}
-              >
-                {(id) => (
+          <InputWrapper
+            id="token-select"
+            title="Super Token"
+            tooltip="Select the SuperToken you'd like to request payment in."
+            error={Boolean(errors?.formErrors?.fieldErrors?.superToken)}
+          >
+            {(id, error) => (
+              <Autocomplete
+                fullWidth
+                disabled={!selectedNetwork}
+                value={selectedToken}
+                onChange={(_, value) => setSelectedToken(value!)}
+                id={id}
+                options={autoCompleteTokenOptions}
+                getOptionLabel={(token) => token.symbol}
+                componentsProps={{
+                  popper: {
+                    placement: "bottom-end",
+                  },
+                }}
+                renderOption={(props, option) => (
+                  <ListItem {...props}>
+                    <ListItemAvatar sx={{ minWidth: 40 }}>
+                      {option.logoURI && (
+                        <Avatar
+                          sx={{ width: 24, height: 24, objectFit: "contain" }}
+                          src={option.logoURI}
+                        />
+                      )}
+                    </ListItemAvatar>
+                    <ListItemText
+                      primary={option.symbol}
+                      secondary={option.name}
+                      secondaryTypographyProps={{ variant: "caption" }}
+                      sx={{ m: 0 }}
+                    />
+                  </ListItem>
+                )}
+                renderInput={(params) => (
                   <TextField
-                    id={id}
-                    data-testid="upfront-payment-amount-input"
-                    fullWidth
-                    value={upfrontPaymentAmount}
-                    onChange={({ target }) =>
-                      setUpfrontPaymentAmount(target.value as `${number}`)
-                    }
+                    {...params}
+                    error={error}
                     InputProps={{
-                      endAdornment: (
-                        <InputAdornment position="end">
-                          {selectedToken?.symbol}
-                        </InputAdornment>
+                      ...params.InputProps,
+                      startAdornment: selectedToken?.logoURI && (
+                        <Avatar
+                          sx={{ width: 24, height: 24, objectFit: "contain" }}
+                          src={selectedToken.logoURI}
+                        />
                       ),
                     }}
                   />
                 )}
-              </InputWrapper>
-            </FormGroup>
-          </Collapse>
-        </Stack>
-      </Collapse>
+              />
+            )}
+          </InputWrapper>
 
-      <InputWrapper
-        title="Receiver Address"
-        tooltip="Set your wallet or multisig address on the relevant network."
-      >
-        {(id) => (
-          <TextField
-            id={id}
-            data-testid="receiver-input-field"
-            value={receiver}
-            onChange={({ target }) =>
-              setReceiver(target.value as `0x${string}`)
+          <InputWrapper
+            title=""
+            sx={{ width: "100%" }}
+            helperText={
+              isCustomAmount
+                ? "User-defined rate is a payment type suited for donations where users determine the amount they want to pay over a given period of time."
+                : "Fixed rate is a payment type suited for regular subscriptions where users pay a predetermined amount over a given period of time."
             }
-          />
-        )}
-      </InputWrapper>
+          >
+            {(id) => (
+              <ToggleButtonGroup
+                id={id}
+                value={isCustomAmount}
+                exclusive
+                onChange={onCustomAmountChanged}
+                fullWidth
+                color="primary"
+              >
+                <ToggleButton value={false}>Fixed rate</ToggleButton>
+                <ToggleButton value={true}>User-defined rate</ToggleButton>
+              </ToggleButtonGroup>
+            )}
+          </InputWrapper>
 
-      <Button
-        data-testid="add-option-button"
-        color="primary"
-        variant="outlined"
-        disabled={!(selectedNetwork && selectedToken)}
-        onClick={handleAdd}
-        sx={{ mt: 1.5 }}
-      >
-        Add +
-      </Button>
-    </Stack>
+          <Collapse in={!isCustomAmount}>
+            <Stack spacing={1}>
+              <InputWrapper
+                title="Stream Rate"
+                tooltip="Set the amount of tokens per month for the payment."
+                error={Boolean(errors?.formErrors?.fieldErrors?.flowRate)}
+              >
+                {(id, error) => (
+                  <Stack
+                    gap="-1px"
+                    sx={{ display: "grid", gridTemplateColumns: "2fr 1fr" }}
+                  >
+                    <TextField
+                      id={id}
+                      error={error}
+                      data-testid="flow-rate-input"
+                      fullWidth
+                      value={flowRateAmount}
+                      onChange={({ target }) =>
+                        setFlowRateAmount(target.value as `${number}`)
+                      }
+                      InputProps={{
+                        sx: {
+                          borderTopRightRadius: 0,
+                          borderBottomRightRadius: 0,
+                        },
+                        endAdornment: (
+                          <InputAdornment position="end">
+                            {selectedToken?.symbol}
+                          </InputAdornment>
+                        ),
+                      }}
+                    />
+                    <Select
+                      data-testid="time-unit-selection"
+                      value={flowRateInterval}
+                      onChange={({ target }) =>
+                        setFlowRateInterval(target.value as TimePeriod)
+                      }
+                      sx={{
+                        borderTopLeftRadius: 0,
+                        borderBottomLeftRadius: 0,
+                        marginLeft: "-1px",
+                      }}
+                    >
+                      {timePeriods.map((interval) => (
+                        <MenuItem value={interval} key={interval}>
+                          /{interval}
+                        </MenuItem>
+                      ))}
+                    </Select>
+                  </Stack>
+                )}
+              </InputWrapper>
+              <FormGroup>
+                <Stack direction="row" alignItems="center" gap={1}>
+                  <FormControlLabel
+                    sx={{
+                      mr: 0,
+                    }}
+                    control={
+                      <Switch
+                        color="primary"
+                        checked={showUpfrontPayment}
+                        value={showUpfrontPayment}
+                        onChange={onShowUpfrontPaymentChanged}
+                      />
+                    }
+                    label="Charge upfront payment amount"
+                  />
+                  <InputInfo tooltip="A one-time payment amount to be paid before the stream starts." />
+                </Stack>
+              </FormGroup>
+
+              <Collapse in={showUpfrontPayment}>
+                <FormGroup>
+                  <InputWrapper
+                    title="Upfront Payment Amount"
+                    tooltip="The ERC-20 transfer amount the user should send as an upfront payment."
+                    error={Boolean(
+                      errors?.formErrors?.fieldErrors?.transferAmountEther,
+                    )}
+                  >
+                    {(id, error) => (
+                      <TextField
+                        id={id}
+                        error={error}
+                        data-testid="upfront-payment-amount-input"
+                        fullWidth
+                        value={upfrontPaymentAmount}
+                        onChange={({ target }) =>
+                          setUpfrontPaymentAmount(target.value as `${number}`)
+                        }
+                        InputProps={{
+                          endAdornment: (
+                            <InputAdornment position="end">
+                              {selectedToken?.symbol}
+                            </InputAdornment>
+                          ),
+                        }}
+                      />
+                    )}
+                  </InputWrapper>
+                </FormGroup>
+              </Collapse>
+            </Stack>
+          </Collapse>
+        </Stack>
+      </DialogContent>
+      <Divider />
+      <DialogActions>
+        <Stack
+          direction="row"
+          spacing={2}
+          sx={{ width: "100%" }}
+          justifyContent="flex-end"
+        >
+          <Button
+            size="large"
+            data-testid="add-option-button"
+            color="primary"
+            variant="text"
+            onClick={onDiscard}
+          >
+            Discard
+          </Button>
+          <Button
+            size="large"
+            data-testid="add-option-button"
+            color="primary"
+            variant="contained"
+            onClick={handleAdd}
+          >
+            Add Payment Option
+          </Button>
+        </Stack>
+      </DialogActions>
+    </>
   );
 };
 
diff --git a/apps/widget-builder/src/components/ui-editor/UiEditor.tsx b/apps/widget-builder/src/components/ui-editor/UiEditor.tsx
index d25311e3..c5ae62b9 100644
--- a/apps/widget-builder/src/components/ui-editor/UiEditor.tsx
+++ b/apps/widget-builder/src/components/ui-editor/UiEditor.tsx
@@ -1,5 +1,8 @@
+import AutoFixHighIcon from "@mui/icons-material/AutoFixHigh";
 import {
   Autocomplete,
+  Box,
+  Fab,
   FormControlLabel,
   Slider,
   Stack,
@@ -7,15 +10,16 @@ import {
   TextField,
   ToggleButton,
   ToggleButtonGroup,
+  Tooltip,
   Typography,
 } from "@mui/material";
 import { MuiColorInput } from "mui-color-input";
 import { FC } from "react";
 import { Controller, useFormContext } from "react-hook-form";
 
+import useDemoMode from "../../hooks/useDemoMode";
 import useFontOptions from "../../hooks/useFontOptions";
 import InputWrapper from "../form/InputWrapper";
-import ImageSelect from "../image-select/ImageSelect";
 import { WidgetProps } from "../widget-preview/WidgetPreview";
 
 const UiEditor: FC = () => {
@@ -24,126 +28,204 @@ const UiEditor: FC = () => {
   const [displaySettings] = watch(["displaySettings"]);
   const fontOptions = useFontOptions();
 
+  const { setDemoStyling } = useDemoMode();
+
   return (
-    <Stack direction="column" gap={2}>
-      <Stack direction="row" gap={2}>
+    <>
+      <Stack direction="column" gap={2}>
+        <Box mb={1}>
+          <Typography variant="h6" component="h2">
+            Checkout Widget Styling
+          </Typography>
+          <Typography variant="body2" color="text.secondary">
+            You are free to customize the look and feel of the checkout widget.
+          </Typography>
+        </Box>
+
         <Controller
           control={control}
-          name="productDetails.imageURI"
+          name="type"
           render={({ field: { value, onChange } }) => (
-            <ImageSelect
-              label="Product image"
-              onClick={(file) => onChange(URL.createObjectURL(file))}
-              onRemove={() => onChange("")}
-              imageSrc={value}
-            />
+            <InputWrapper title="View type">
+              {(id) => (
+                <ToggleButtonGroup
+                  id={id}
+                  value={value}
+                  exclusive
+                  onChange={(_, value) => onChange(value)}
+                  sx={{
+                    borderTopRightRadius: 0,
+                    borderBottomRightRadius: 0,
+                  }}
+                >
+                  <ToggleButton value="page" aria-label="page" title="Page">
+                    Inline
+                  </ToggleButton>
+                  <ToggleButton
+                    value="dialog"
+                    aria-label="dialog"
+                    title="Dialog"
+                  >
+                    Dialog
+                  </ToggleButton>
+                  <ToggleButton
+                    value="drawer"
+                    aria-label="drawer"
+                    title="Drawer"
+                  >
+                    Drawer
+                  </ToggleButton>
+                  <ToggleButton
+                    value="full-screen"
+                    aria-label="full-screen"
+                    title="Full Screen"
+                  >
+                    Full-screen
+                  </ToggleButton>
+                </ToggleButtonGroup>
+              )}
+            </InputWrapper>
           )}
         />
-        {/* <Controller
+        <Controller
           control={control}
-          name="displaySettings.logo"
+          name="displaySettings.darkMode"
           render={({ field: { value, onChange } }) => (
-            <ImageSelect
-              label="Logo"
-              onClick={(file) => onChange({ target: { value: file } })}
-              onRemove={() => onChange({ target: { value: "" } })}
-              imageSrc={value ? URL.createObjectURL(value) : ""}
+            <FormControlLabel
+              data-testid="dark-mode-switch"
+              control={<Switch checked={value ?? false} onChange={onChange} />}
+              label={
+                <Typography>{`Dark mode: ${value ? "on" : "off"}`}</Typography>
+              }
             />
           )}
-        /> */}
-      </Stack>
-      <Controller
-        control={control}
-        name="displaySettings.darkMode"
-        render={({ field: { value, onChange } }) => (
-          <FormControlLabel
-            data-testid="dark-mode-switch"
-            control={<Switch checked={value ?? false} onChange={onChange} />}
-            label={
-              <Typography>{`Dark mode: ${value ? "on" : "off"}`}</Typography>
-            }
-          />
-        )}
-      />
+        />
+        <Controller
+          control={control}
+          name="displaySettings.containerRadius"
+          render={({ field: { value, onChange } }) => (
+            <InputWrapper
+              title={`Container border-radius: ${displaySettings.containerRadius}`}
+            >
+              {(id) => (
+                <Slider
+                  id={id}
+                  data-testid="container-radius-slider"
+                  step={1}
+                  min={0}
+                  max={50}
+                  value={Number(value)}
+                  onChange={(_event, x) => onChange(x as number)}
+                />
+              )}
+            </InputWrapper>
+          )}
+        />
 
-      <Controller
-        control={control}
-        name="displaySettings.containerRadius"
-        render={({ field: { value, onChange } }) => (
-          <InputWrapper
-            title={`Container border-radius: ${displaySettings.containerRadius}`}
-          >
-            {(id) => (
-              <Slider
-                id={id}
-                data-testid="container-radius-slider"
-                step={1}
-                min={0}
-                max={50}
-                value={Number(value)}
-                onChange={(_event, x) => onChange(x as number)}
-              />
-            )}
-          </InputWrapper>
-        )}
-      />
+        <Controller
+          control={control}
+          name="displaySettings.inputRadius"
+          render={({ field: { value, onChange } }) => (
+            <InputWrapper
+              title={`Field border-radius: ${displaySettings.inputRadius}`}
+            >
+              {(id) => (
+                <Slider
+                  data-testid="field-border-slider"
+                  step={1}
+                  min={0}
+                  max={25}
+                  value={Number(value)}
+                  onChange={(_event, x) => onChange(x as number)}
+                />
+              )}
+            </InputWrapper>
+          )}
+        />
 
-      <Controller
-        control={control}
-        name="displaySettings.inputRadius"
-        render={({ field: { value, onChange } }) => (
-          <InputWrapper
-            title={`Field border-radius: ${displaySettings.inputRadius}`}
-          >
-            {(id) => (
-              <Slider
-                data-testid="field-border-slider"
-                step={1}
-                min={0}
-                max={25}
-                value={Number(value)}
-                onChange={(_event, x) => onChange(x as number)}
-              />
+        <Controller
+          control={control}
+          name="displaySettings.buttonRadius"
+          render={({ field: { value, onChange } }) => (
+            <InputWrapper
+              title={`Button border-radius: ${displaySettings.buttonRadius}`}
+            >
+              {(id) => (
+                <Slider
+                  id={id}
+                  data-testid="button-border-radius-slider"
+                  step={1}
+                  min={0}
+                  max={25}
+                  value={Number(value)}
+                  onChange={(_event, x) => onChange(x as number)}
+                />
+              )}
+            </InputWrapper>
+          )}
+        />
+
+        <Stack direction="row" gap={1}>
+          <Controller
+            control={control}
+            name="displaySettings.primaryColor"
+            render={({ field: { value, onChange } }) => (
+              <InputWrapper title="Primary color">
+                {(id) => (
+                  <MuiColorInput
+                    id={id}
+                    fallbackValue={"#000"}
+                    format="hex"
+                    value={value}
+                    onChange={(x) => onChange(x as `#{string}`)}
+                  />
+                )}
+              </InputWrapper>
             )}
-          </InputWrapper>
-        )}
-      />
+          />
 
-      <Controller
-        control={control}
-        name="displaySettings.buttonRadius"
-        render={({ field: { value, onChange } }) => (
-          <InputWrapper
-            title={`Button border-radius: ${displaySettings.buttonRadius}`}
-          >
-            {(id) => (
-              <Slider
-                id={id}
-                data-testid="button-border-radius-slider"
-                step={1}
-                min={0}
-                max={25}
-                value={Number(value)}
-                onChange={(_event, x) => onChange(x as number)}
-              />
+          <Controller
+            control={control}
+            name="displaySettings.secondaryColor"
+            render={({ field: { value, onChange } }) => (
+              <InputWrapper title="Secondary color">
+                {(id) => (
+                  <MuiColorInput
+                    id={id}
+                    data-testid="secondary-color-picker"
+                    fallbackValue={"#000"}
+                    format="hex"
+                    value={value}
+                    onChange={(x) => onChange(x as `#{string}`)}
+                  />
+                )}
+              </InputWrapper>
             )}
-          </InputWrapper>
-        )}
-      />
+          />
+        </Stack>
 
-      <Stack direction="row" gap={1}>
         <Controller
           control={control}
-          name="displaySettings.primaryColor"
+          name="displaySettings.font"
           render={({ field: { value, onChange } }) => (
-            <InputWrapper title="Primary color">
+            <InputWrapper title="Font Family">
               {(id) => (
-                <MuiColorInput
+                <Autocomplete
                   id={id}
-                  fallbackValue={"#000"}
-                  format="hex"
+                  data-testid="font-picker"
                   value={value}
-                  onChange={(x) => onChange(x as `#{string}`)}
+                  loading={fontOptions.length === 0}
+                  disablePortal
+                  options={fontOptions}
+                  isOptionEqualToValue={(option, value) =>
+                    option.family === value.family
+                  }
+                  onChange={(_, value) => onChange(value)}
+                  getOptionLabel={(option) =>
+                    `${option.family}, ${option.category}`
+                  }
+                  fullWidth
+                  renderInput={(params) => <TextField {...params} />}
                 />
               )}
             </InputWrapper>
@@ -152,88 +234,55 @@ const UiEditor: FC = () => {
 
         <Controller
           control={control}
-          name="displaySettings.secondaryColor"
+          name="displaySettings.stepperOrientation"
           render={({ field: { value, onChange } }) => (
-            <InputWrapper title="Secondary color">
+            <InputWrapper title="Stepper">
               {(id) => (
-                <MuiColorInput
+                <ToggleButtonGroup
                   id={id}
-                  data-testid="secondary-color-picker"
-                  fallbackValue={"#000"}
-                  format="hex"
                   value={value}
-                  onChange={(x) => onChange(x as `#{string}`)}
-                />
+                  exclusive
+                  onChange={(_, x: "vertical" | "horizontal") => onChange(x)}
+                  sx={{
+                    borderTopRightRadius: 0,
+                    borderBottomRightRadius: 0,
+                  }}
+                >
+                  <ToggleButton
+                    value="vertical"
+                    aria-label="vertical stepper"
+                    title="Choose vertical stepper"
+                  >
+                    Vertical
+                  </ToggleButton>
+                  <ToggleButton
+                    value="horizontal"
+                    aria-label="horizontal stepper"
+                    title="Choose horizontal stepper"
+                  >
+                    Horizontal
+                  </ToggleButton>
+                </ToggleButtonGroup>
               )}
             </InputWrapper>
           )}
         />
       </Stack>
-
-      <Controller
-        control={control}
-        name="displaySettings.font"
-        render={({ field: { value, onChange } }) => (
-          <InputWrapper title="Font Family">
-            {(id) => (
-              <Autocomplete
-                id={id}
-                data-testid="font-picker"
-                value={value}
-                loading={fontOptions.length === 0}
-                disablePortal
-                options={fontOptions}
-                isOptionEqualToValue={(option, value) =>
-                  option.family === value.family
-                }
-                onChange={(_, value) => onChange(value)}
-                getOptionLabel={(option) =>
-                  `${option.family}, ${option.category}`
-                }
-                fullWidth
-                renderInput={(params) => <TextField {...params} />}
-              />
-            )}
-          </InputWrapper>
-        )}
-      />
-
-      <Controller
-        control={control}
-        name="displaySettings.stepperOrientation"
-        render={({ field: { value, onChange } }) => (
-          <InputWrapper title="Stepper">
-            {(id) => (
-              <ToggleButtonGroup
-                id={id}
-                value={value}
-                exclusive
-                onChange={(_, x: "vertical" | "horizontal") => onChange(x)}
-                sx={{
-                  borderTopRightRadius: 0,
-                  borderBottomRightRadius: 0,
-                }}
-              >
-                <ToggleButton
-                  value="vertical"
-                  aria-label="vertical stepper"
-                  title="Choose vertical stepper"
-                >
-                  Vertical
-                </ToggleButton>
-                <ToggleButton
-                  value="horizontal"
-                  aria-label="horizontal stepper"
-                  title="Choose horizontal stepper"
-                >
-                  Horizontal
-                </ToggleButton>
-              </ToggleButtonGroup>
-            )}
-          </InputWrapper>
-        )}
-      />
-    </Stack>
+      <Tooltip title="Replace with random styling" placement="right" arrow>
+        <Fab
+          size="medium"
+          color="secondary"
+          onClick={setDemoStyling}
+          sx={{
+            position: "absolute",
+            bottom: 72,
+            left: 20,
+          }}
+        >
+          <AutoFixHighIcon />
+        </Fab>
+      </Tooltip>
+    </>
   );
 };
 
diff --git a/apps/widget-builder/src/components/widget-preview/WidgetPreview.tsx b/apps/widget-builder/src/components/widget-preview/WidgetPreview.tsx
index fa49287b..d39bb3a2 100644
--- a/apps/widget-builder/src/components/widget-preview/WidgetPreview.tsx
+++ b/apps/widget-builder/src/components/widget-preview/WidgetPreview.tsx
@@ -1,4 +1,4 @@
-import { Button, colors, SelectChangeEvent, ThemeOptions } from "@mui/material";
+import { colors, Fab, SelectChangeEvent, ThemeOptions } from "@mui/material";
 import SuperfluidWidget, {
   PaymentDetails,
   ProductDetails,
@@ -115,7 +115,11 @@ const switchLayout = (
       stepper={{ orientation: stepperOrientation }}
     >
       {({ openModal }) => (
-        <Button onClick={() => openModal()}>{`Open ${layout}`}</Button>
+        <Fab
+          color="primary"
+          variant="extended"
+          onClick={() => openModal()}
+        >{`Open Checkout in ${layout.toUpperCase()}`}</Fab>
       )}
     </SuperfluidWidget>
   );
diff --git a/apps/widget-builder/src/hooks/useDemoMode.ts b/apps/widget-builder/src/hooks/useDemoMode.ts
index 79875a98..eb50332f 100644
--- a/apps/widget-builder/src/hooks/useDemoMode.ts
+++ b/apps/widget-builder/src/hooks/useDemoMode.ts
@@ -4,7 +4,8 @@ import {
   ProductDetails,
   supportedNetwork,
 } from "@superfluid-finance/widget";
-import { useMemo, useState } from "react";
+import { useCallback } from "react";
+import { useFormContext } from "react-hook-form";
 
 import {
   DisplaySettings,
@@ -12,12 +13,6 @@ import {
   WidgetProps,
 } from "../components/widget-preview/WidgetPreview";
 
-const demoProductDetails: ProductDetails = {
-  name: `${faker.commerce.productName()}`,
-  description: `${faker.commerce.productDescription()}`,
-  imageURI: "https://picsum.photos/200/200",
-};
-
 const defaultProductDetails: ProductDetails = {
   name: "",
   description: "",
@@ -131,7 +126,7 @@ const defaultPaymentDetails: PaymentDetails = {
 
 const type: Layout = "page";
 
-const displaySettings: DisplaySettings = {
+const defaultDisplaySettings: DisplaySettings = {
   darkMode: false,
   containerRadius: 20,
   buttonRadius: 10,
@@ -145,36 +140,47 @@ const displaySettings: DisplaySettings = {
   stepperOrientation: "vertical",
 };
 
-const useDemoMode = () => {
-  const [demoMode, setDemoMode] = useState<boolean>(false);
+export const defaultWidgetProps: WidgetProps = {
+  productDetails: defaultProductDetails,
+  paymentDetails: defaultPaymentDetails,
+  type,
+  displaySettings: defaultDisplaySettings,
+};
 
-  const toggleDemoMode = () => {
-    setDemoMode(!demoMode);
-  };
+const useDemoMode = () => {
+  const { setValue } = useFormContext<WidgetProps>();
 
-  const widgetProps = useMemo<WidgetProps>(
-    () => ({
-      ...(demoMode
-        ? {
-            productDetails: demoProductDetails,
-            paymentDetails: demoPaymentDetails,
-            type,
-            displaySettings,
-          }
-        : {
-            productDetails: defaultProductDetails,
-            paymentDetails: defaultPaymentDetails,
-            type,
-            displaySettings,
-          }),
-    }),
-    [demoMode],
+  const setDemoPaymentDetails = useCallback(
+    () => setValue("paymentDetails", demoPaymentDetails),
+    [setValue],
   );
 
+  const setDemoProductDetails = useCallback(() => {
+    const demoProductDetails: ProductDetails = {
+      name: `${faker.commerce.productName()}`,
+      description: `${faker.commerce.productDescription()}`,
+      imageURI: "https://picsum.photos/200/200",
+    };
+    setValue("productDetails", demoProductDetails);
+  }, [setValue]);
+
+  const setDemoStyling = useCallback(() => {
+    const demoStyling: DisplaySettings = {
+      ...defaultDisplaySettings,
+      darkMode: faker.datatype.boolean(),
+      primaryColor: faker.color.rgb() as `#${string}`,
+      secondaryColor: faker.color.rgb() as `#${string}`,
+      containerRadius: faker.number.int({ min: 0, max: 50 }),
+      buttonRadius: faker.number.int({ min: 0, max: 25 }),
+      inputRadius: faker.number.int({ min: 0, max: 25 }),
+    };
+    setValue("displaySettings", demoStyling);
+  }, [setValue]);
+
   return {
-    demoMode,
-    toggleDemoMode,
-    widgetProps,
+    setDemoPaymentDetails,
+    setDemoProductDetails,
+    setDemoStyling,
   };
 };
 
diff --git a/apps/widget-builder/src/pages/builder.tsx b/apps/widget-builder/src/pages/builder.tsx
index 6eb585ae..45f25938 100644
--- a/apps/widget-builder/src/pages/builder.tsx
+++ b/apps/widget-builder/src/pages/builder.tsx
@@ -1,47 +1,49 @@
 import CodeIcon from "@mui/icons-material/Code";
-import FullscreenIcon from "@mui/icons-material/Fullscreen";
-import ViewSidebarIcon from "@mui/icons-material/ViewSidebar";
-import WebIcon from "@mui/icons-material/Web";
-import WebAssetIcon from "@mui/icons-material/WebAsset";
+import KeyboardArrowLeftIcon from "@mui/icons-material/KeyboardArrowLeft";
+import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight";
 import { TabContext, TabList, TabPanel } from "@mui/lab";
 import {
+  AppBar,
   Box,
   Button,
   Drawer,
-  FormControlLabel,
+  MobileStepper,
+  Paper,
   Stack,
-  Switch,
   Tab,
-  ToggleButton,
-  ToggleButtonGroup,
+  Toolbar,
   Typography,
-  useTheme,
 } from "@mui/material";
 import { useState } from "react";
-import { Controller, FormProvider, useForm } from "react-hook-form";
+import { FormProvider, useForm } from "react-hook-form";
 
 import ConfigEditorDrawer from "../components/config-editor/ConfigEditorDrawer";
 import ExportEditor from "../components/export-editor/ExportEditor";
+import PaymentEditor from "../components/payment-editor/PaymentEditor";
 import ProductEditor from "../components/product-editor/ProductEditor";
 import TermsAndPrivacy from "../components/terms-and-privacy/TermsAndPrivacy";
 import UiEditor from "../components/ui-editor/UiEditor";
 import WidgetPreview, {
   WidgetProps,
 } from "../components/widget-preview/WidgetPreview";
-import useDemoMode from "../hooks/useDemoMode";
+import { defaultWidgetProps } from "../hooks/useDemoMode";
 
-const drawerWidth = "480px";
+export const drawerWidth = "480px";
 
 export default function Builder() {
-  const theme = useTheme();
-  const [activeTab, setActiveTab] = useState<"ui" | "product" | "export">(
-    "product",
-  );
-
-  const { widgetProps, demoMode, toggleDemoMode } = useDemoMode();
+  const [activeStep, setActiveStep] = useState(0);
+  const stepCount = 4;
+  const handleNext = () => {
+    setActiveStep((prevActiveStep) =>
+      Math.min(prevActiveStep + 1, stepCount - 1),
+    );
+  };
+  const handleBack = () => {
+    setActiveStep((prevActiveStep) => Math.max(prevActiveStep - 1, 0));
+  };
 
   const formMethods = useForm<WidgetProps>({
-    values: widgetProps,
+    values: defaultWidgetProps,
   });
 
   const { watch, control, getValues, setValue } = formMethods;
@@ -69,45 +71,93 @@ export default function Builder() {
           },
         }}
       >
-        <Stack
-          direction="row"
-          sx={{
-            alignItems: "center",
-            justifyContent: "space-between",
-            px: 3.5,
-            pt: 3.5,
-            pb: 1,
-          }}
-          gap={1}
-        >
-          <Typography variant="subtitle1" fontWeight="500">
-            Widget Builder
-          </Typography>
-          <FormControlLabel
-            data-testid="demo-mode-switch"
-            control={<Switch checked={demoMode} onChange={toggleDemoMode} />}
-            label={<Typography>Demo</Typography>}
-          />
-        </Stack>
+        <TabContext value={activeStep.toString()}>
+          <AppBar position="sticky" color="primary" elevation={3}>
+            <Stack component={Toolbar} justifyContent="center">
+              <Typography variant="h6" component="h1">
+                Checkout Builder
+              </Typography>
+            </Stack>
+            <Box bgcolor="background.paper">
+              <TabList
+                variant="fullWidth"
+                onChange={(_, value) => setActiveStep(Number(value))}
+              >
+                <Tab label="Product" value="0" data-testid="product-tab" />
+                <Tab label="Payment" value="1" data-testid="payment-tab" />
+                <Tab label="Styling" value="2" data-testid="ui-tab" />
+                <Tab label="Export" value="3" data-testid="export-tab" />
+              </TabList>
+            </Box>
+          </AppBar>
 
-        <TabContext value={activeTab}>
-          <TabList onChange={(_, value) => setActiveTab(value)} sx={{ px: 2 }}>
-            <Tab label="1. Product" value="product" data-testid="product-tab" />
-            <Tab label="2. UI" value="ui" data-testid="ui-tab" />
-            <Tab label="3. Export" value="export" data-testid="export-tab" />
-          </TabList>
+          <Box
+            height="100%"
+            sx={{
+              overflowY: "scroll",
+            }}
+          >
+            <FormProvider {...formMethods}>
+              <TabPanel value="0" sx={{ height: "100%" }}>
+                <ProductEditor />
+              </TabPanel>
+              <TabPanel value="1" sx={{ height: "100%" }}>
+                <PaymentEditor />
+              </TabPanel>
+              <TabPanel value="2" sx={{ height: "100%" }}>
+                <UiEditor />
+              </TabPanel>
+              <TabPanel value="3" sx={{ height: "100%" }}>
+                <ExportEditor />
+              </TabPanel>
+            </FormProvider>
+          </Box>
 
-          <FormProvider {...formMethods}>
-            <TabPanel value="ui">
-              <UiEditor />
-            </TabPanel>
-            <TabPanel value="product">
-              <ProductEditor />
-            </TabPanel>
-            <TabPanel value="export">
-              <ExportEditor />
-            </TabPanel>
-          </FormProvider>
+          <Paper
+            sx={{ position: "sticky", bottom: 0, left: 0, right: 0 }}
+            elevation={3}
+          >
+            <MobileStepper
+              sx={{
+                bgcolor: "background.paper",
+              }}
+              variant="dots"
+              steps={stepCount}
+              position="static"
+              activeStep={activeStep}
+              nextButton={
+                <Button
+                  size="medium"
+                  variant="outlined"
+                  color="primary"
+                  onClick={handleNext}
+                  disabled={activeStep === stepCount - 1}
+                  sx={{
+                    visibility:
+                      activeStep === stepCount - 1 ? "hidden" : "visible",
+                  }}
+                >
+                  Next
+                  <KeyboardArrowRightIcon />
+                </Button>
+              }
+              backButton={
+                <Button
+                  size="medium"
+                  variant="outlined"
+                  color="primary"
+                  onClick={handleBack}
+                  disabled={activeStep === 0}
+                  sx={{
+                    visibility: activeStep === 0 ? "hidden" : "visible",
+                  }}
+                >
+                  <KeyboardArrowLeftIcon />
+                  Back
+                </Button>
+              }
+            />
+          </Paper>
         </TabContext>
       </Drawer>
       <Stack
@@ -140,56 +190,16 @@ export default function Builder() {
             type,
           }}
         />
-        <Box
-          sx={{
-            position: "fixed",
-            left: "calc(50%-96px)",
-            backgroundColor: theme.palette.common.white,
-            bottom: 0,
-            borderRadius: 1,
-            zIndex: 100,
-          }}
-        >
-          <Controller
-            control={control}
-            name="type"
-            render={({ field: { value, onChange } }) => (
-              <ToggleButtonGroup
-                value={value}
-                exclusive
-                onChange={(_, value) => onChange(value)}
-                sx={{
-                  borderTopRightRadius: 0,
-                  borderBottomRightRadius: 0,
-                }}
-              >
-                <ToggleButton value="dialog" aria-label="dialog" title="Dialog">
-                  <WebAssetIcon />
-                </ToggleButton>
-                <ToggleButton value="drawer" aria-label="drawer" title="Drawer">
-                  <ViewSidebarIcon />
-                </ToggleButton>
-                <ToggleButton
-                  value="full-screen"
-                  aria-label="full-screen"
-                  title="Full Screen"
-                >
-                  <FullscreenIcon />
-                </ToggleButton>
-                <ToggleButton value="page" aria-label="page" title="Page">
-                  <WebIcon />
-                </ToggleButton>
-              </ToggleButtonGroup>
-            )}
-          />
-        </Box>
       </Stack>
       <TermsAndPrivacy />
       <Box sx={{ position: "absolute", top: 5, right: 5 }}>
         <Button
-          variant="text"
+          variant="outlined"
           onClick={() => setConfigEditorOpen((isOpen) => !isOpen)}
           startIcon={<CodeIcon />}
+          sx={{
+            bgcolor: "background.paper",
+          }}
         >
           JSON Editor
         </Button>
diff --git a/examples/b2b-service-demo/src/components/BookModal/BookModal.tsx b/examples/b2b-service-demo/src/components/BookModal/BookModal.tsx
index 7407cf41..e9b53409 100644
--- a/examples/b2b-service-demo/src/components/BookModal/BookModal.tsx
+++ b/examples/b2b-service-demo/src/components/BookModal/BookModal.tsx
@@ -23,7 +23,7 @@ const BookModal: FC<ModalProps> = ({ show, onClose }) => {
             href="https://checkout-builder.superfluid.finance/"
             target="_blank"
           >
-            Try the Widget Builder
+            Try the Checkout Builder
           </a>
           <a
             className={styles.SecondaryButton}
diff --git a/examples/donation-demo/src/components/BookModal/BookModal.tsx b/examples/donation-demo/src/components/BookModal/BookModal.tsx
index 7407cf41..e9b53409 100644
--- a/examples/donation-demo/src/components/BookModal/BookModal.tsx
+++ b/examples/donation-demo/src/components/BookModal/BookModal.tsx
@@ -23,7 +23,7 @@ const BookModal: FC<ModalProps> = ({ show, onClose }) => {
             href="https://checkout-builder.superfluid.finance/"
             target="_blank"
           >
-            Try the Widget Builder
+            Try the Checkout Builder
           </a>
           <a
             className={styles.SecondaryButton}
diff --git a/examples/gated-community-demo/src/components/BookModal/BookModal.tsx b/examples/gated-community-demo/src/components/BookModal/BookModal.tsx
index 7d48a684..c84eb802 100644
--- a/examples/gated-community-demo/src/components/BookModal/BookModal.tsx
+++ b/examples/gated-community-demo/src/components/BookModal/BookModal.tsx
@@ -23,7 +23,7 @@ const BookModal: FC<ModalProps> = ({ show, onClose }) => {
             href="https://checkout-builder.superfluid.finance/"
             target="_blank"
           >
-            Try the Widget Builder
+            Try the Checkout Builder
           </a>
           <a
             className={styles.SecondaryButton}
diff --git a/packages/widget/src/index.ts b/packages/widget/src/index.ts
index 26e884bf..bce42d71 100644
--- a/packages/widget/src/index.ts
+++ b/packages/widget/src/index.ts
@@ -25,6 +25,10 @@ export type { EventListeners } from "./EventListeners";
 export type { WalletManager } from "./WalletManager";
 
 // TODO: Export Zod schemas from @superfluid-finance/widget/zod
-export { paymentDetailsSchema, productDetailsSchema } from "./core/index.js";
+export {
+  paymentDetailsSchema,
+  paymentOptionSchema,
+  productDetailsSchema,
+} from "./core/index.js";
 
 export default Widget;