From 4d1fbc19f84d18623dd329c7c58aa08bc8b4e41c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dominik=20=C5=BBegle=C5=84?= <flesz3@o2.pl>
Date: Mon, 17 Jan 2022 09:55:57 +0100
Subject: [PATCH] Update to new design theme (#1631)

* Update macaw to 0.3.0 (#1623)

* Update macaw to 0.3

* Use proper pagination component

* Fix type errors

* Remove leftover import

* Remove variant and color from confirm button

* Remove alias

* Update macaw

* Fix button type

* Random fixes (#1633)

* Improve layout components

* Use colored svgs

* Minor fixes

* Fix autocomplete loaders

* Fix padding

* Fix button variant

* Remove codegen file

* Fixes after bumping macaw to 0.3 part 2 (#1638)

* Fix various visual bugs

* Fix type errors

* Bump macaw

* Random fixes part 3 (#1647)

* wip

* Fix mismatched paddings

* Fix actions container padding

* Put story in the right directory

* Fix shipping zone picker

* Fix minor visual bugs

* Remove unused imports

* Move styles to separate file

* Random fixes part 4 (#1641)

* Fix various visual bugs

* Fix type errors

* Fix last table item padding

* Add outline on hover

* Fix spaces

* Fix spaces

* Remove dead code

* Fix elevation

* Remove dead code

* Fix shadows

* Add outline to expand button

* Fix spacing

* Fix spacings

* Fix selectable tables hover

* Use proper delete icon

* Fix ConfirmButtonTransitionState imports

* Update src/apps/components/CustomApps/CustomApps.tsx

Co-authored-by: Wojciech Mista <wojciech.mista@saleor.io>

Co-authored-by: Wojciech Mista <wojciech.mista@saleor.io>

* Rework error page (#1670)

* Remake error page

* Fix types

* Update error id styles

* Fix types

* Login page rework (#1703)

* Rework login page

* Remove outline

* Fix logo and footer placement

* Sort imports

* Random fixes part 5 (#1669)

* Fix text color in dark mode

* Update password reset pages (#1714)

* Update password reset pages

* Update src/auth/components/ResetPasswordPage/ResetPasswordPage.tsx

Co-authored-by: Jakub Majorek <majorek.jakub@gmail.com>

Co-authored-by: Jakub Majorek <majorek.jakub@gmail.com>

* Fix collection page

* Update dark mode logo

* Bring back "create app" button

* Fix spacings

* Fix selects

* Fix login e2e test

* Fix not found page displaying

* Update selector

* Add missing package

* Let dropdown overflow through card

* Fix scroll

* Fix scroll

* Fix overflow on grid element

* Fix e2e tests

* Fix data-test-id

* Update snapshots

* Update messages

* Update macaw

* Update snapshots

* Use stable macaw version

Co-authored-by: Wojciech Mista <wojciech.mista@saleor.io>
Co-authored-by: Jakub Majorek <majorek.jakub@gmail.com>
---
 .../DeleteIconButton/DeleteIconButton.tsx     |     7 +-
 src/components/Money/Money.tsx                |    60 +-
 src/components/Timeline/Timeline.tsx          |     1 -
 .../CustomerOrders/CustomerOrders.tsx         |     4 +-
 .../GiftCardCreateDialogCodeContent.tsx       |    36 +-
 .../GiftCardCreateDialogForm.tsx              |     7 +-
 src/giftCards/GiftCardCreateDialog/styles.ts  |    17 +-
 .../GiftCardUpdateDetailsBalanceSection.tsx   |     8 +-
 .../GiftCardUpdateDetailsCard.tsx             |    12 +-
 .../GiftCardUpdateDetailsCard/messages.ts     |     2 +-
 .../GiftCardUpdateDetailsCard/styles.ts       |     3 -
 .../GiftCardUpdateExpirySelect.tsx            |     2 +-
 .../GiftCardUpdateExpirySelect/styles.ts      |     4 +-
 .../GiftCardUpdatePageHeader.tsx              |     9 +-
 .../GiftCardsListHeader.tsx                   |     5 +-
 .../GiftCardsListTable/GiftCardsListTable.tsx |     9 +-
 .../BulkEnableDisableSection.tsx              |     4 +-
 .../GiftCardListDialogsProvider.tsx           |    14 +-
 src/giftCards/GiftCardsList/styles.ts         |    15 +-
 src/giftCards/index.tsx                       |     4 +-
 src/giftCards/urls.ts                         |     4 +-
 .../OrderDraftList/OrderDraftList.tsx         |     4 +-
 .../OrderFulfilledProductsCard.tsx            |     4 +-
 .../OrderFulfilledProductsCard/styles.ts      |     8 +-
 .../OrderFulfillmentApproveDialog.tsx         |    11 +-
 src/orders/components/OrderList/OrderList.tsx |     4 +-
 .../components/OrderPayment/OrderPayment.tsx  |    96 +-
 .../OrderPriceLabel/OrderPriceLabel.tsx       |     7 +-
 .../OrderProductsTableRow.tsx                 |     7 +-
 .../OrderUnfulfilledProductsCard.tsx          |     2 +-
 .../ProductTypeVariantAttributes.tsx          |    15 +-
 .../ProductExportDialogInfo.tsx               |   153 +-
 .../ProductListPage/ProductListPage.tsx       |     1 -
 .../ProductStocks/ProductStocks.tsx           |    12 +-
 .../ProductVariantEndPreorderDialog.tsx       |     2 +-
 .../__snapshots__/Stories.test.ts.snap        | 15340 ++++++----------
 .../WebhookDetailsPage/WebhookDetailsPage.tsx |     3 +-
 37 files changed, 5846 insertions(+), 10050 deletions(-)

diff --git a/src/components/DeleteIconButton/DeleteIconButton.tsx b/src/components/DeleteIconButton/DeleteIconButton.tsx
index 659b43ed71a..4dbcd7798ea 100644
--- a/src/components/DeleteIconButton/DeleteIconButton.tsx
+++ b/src/components/DeleteIconButton/DeleteIconButton.tsx
@@ -1,10 +1,9 @@
-import { IconButton, IconButtonProps } from "@material-ui/core";
-import TrashIcon from "@saleor/icons/Trash";
+import { DeleteIcon, IconButton, IconButtonProps } from "@saleor/macaw-ui";
 import React from "react";
 
 const DeleteIconButton: React.FC<IconButtonProps> = ({ onClick }) => (
-  <IconButton color="primary" onClick={onClick}>
-    <TrashIcon />
+  <IconButton variant="secondary" onClick={onClick}>
+    <DeleteIcon />
   </IconButton>
 );
 
diff --git a/src/components/Money/Money.tsx b/src/components/Money/Money.tsx
index 25c799b14be..dea0fd76f4c 100644
--- a/src/components/Money/Money.tsx
+++ b/src/components/Money/Money.tsx
@@ -1,49 +1,49 @@
-import { makeStyles, Typography, TypographyProps } from "@material-ui/core";
-import HorizontalSpacer from "@saleor/apps/components/HorizontalSpacer";
-import classNames from "classnames";
+import useLocale from "@saleor/hooks/useLocale";
+import { makeStyles } from "@saleor/macaw-ui";
 import React from "react";
 
+const useStyles = makeStyles(
+  {
+    currency: {
+      fontSize: "0.875em",
+      marginRight: "0.5rem"
+    }
+  },
+  { name: "Money" }
+);
+
 export interface IMoney {
   amount: number;
   currency: string;
 }
 
-export interface MoneyProps extends TypographyProps {
+export interface MoneyProps {
   money: IMoney | null;
 }
 
-const useStyles = makeStyles(
-  () => ({
-    container: {
-      display: "flex",
-      alignItems: "baseline"
-    },
-    containerRight: {
-      justifyContent: "end"
-    }
-  }),
-  { name: "Money" }
-);
-
-export const Money: React.FC<MoneyProps> = ({ money, ...rest }) => {
-  const classes = useStyles({});
+export const Money: React.FC<MoneyProps> = ({ money }) => {
+  const { locale } = useLocale();
+  const classes = useStyles();
 
   if (!money) {
     return null;
   }
 
+  const currencyFractionDigits = new Intl.NumberFormat(locale, {
+    style: "currency",
+    currency: money.currency
+  }).resolvedOptions().maximumFractionDigits;
+
+  const amount = (12345.678).toLocaleString(locale, {
+    maximumFractionDigits: currencyFractionDigits,
+    minimumFractionDigits: currencyFractionDigits
+  });
+
   return (
-    <div
-      className={classNames(classes.container, {
-        [classes.containerRight]: rest.align === "right"
-      })}
-    >
-      <Typography variant="caption" {...rest}>
-        {money.currency}
-      </Typography>
-      <HorizontalSpacer spacing={0.5} />
-      <Typography {...rest}>{money.amount.toFixed(2)}</Typography>
-    </div>
+    <>
+      <span className={classes.currency}>{money.currency}</span>
+      {amount}
+    </>
   );
 };
 
diff --git a/src/components/Timeline/Timeline.tsx b/src/components/Timeline/Timeline.tsx
index 109fae9c7af..6a5e84f6f55 100644
--- a/src/components/Timeline/Timeline.tsx
+++ b/src/components/Timeline/Timeline.tsx
@@ -117,7 +117,6 @@ export const TimelineAddNote: React.FC<TimelineAddNoteProps> = props => {
                 className={classes.button}
                 disabled={disabled}
                 onClick={e => submit(e)}
-                disabled={disabled}
               >
                 <FormattedMessage
                   defaultMessage="Send"
diff --git a/src/customers/components/CustomerOrders/CustomerOrders.tsx b/src/customers/components/CustomerOrders/CustomerOrders.tsx
index 61dbd1cc537..efaaa7729a3 100644
--- a/src/customers/components/CustomerOrders/CustomerOrders.tsx
+++ b/src/customers/components/CustomerOrders/CustomerOrders.tsx
@@ -129,9 +129,9 @@ const CustomerOrders: React.FC<CustomerOrdersProps> = props => {
                     <Skeleton />
                   )}
                 </TableCell>
-                <TableCell className={classes.textRight}>
+                <TableCell className={classes.textRight} align="right">
                   {maybe(() => order.total.gross) ? (
-                    <Money money={order.total.gross} align="right" />
+                    <Money money={order.total.gross} />
                   ) : (
                     <Skeleton />
                   )}
diff --git a/src/giftCards/GiftCardCreateDialog/GiftCardCreateDialogCodeContent.tsx b/src/giftCards/GiftCardCreateDialog/GiftCardCreateDialogCodeContent.tsx
index e25d607b03c..a0265691fd4 100644
--- a/src/giftCards/GiftCardCreateDialog/GiftCardCreateDialogCodeContent.tsx
+++ b/src/giftCards/GiftCardCreateDialog/GiftCardCreateDialogCodeContent.tsx
@@ -1,9 +1,10 @@
-import { Button, DialogContent, Typography } from "@material-ui/core";
+import { DialogActions, DialogContent, Typography } from "@material-ui/core";
 import HorizontalSpacer from "@saleor/apps/components/HorizontalSpacer";
 import VerticalSpacer from "@saleor/apps/components/VerticalSpacer";
 import useClipboard from "@saleor/hooks/useClipboard";
 import useNotifier from "@saleor/hooks/useNotifier";
 import { buttonMessages } from "@saleor/intl";
+import { Button } from "@saleor/macaw-ui";
 import React from "react";
 import { useIntl } from "react-intl";
 
@@ -33,30 +34,27 @@ const GiftCardCreateDialogCodeContent: React.FC<GiftCardCreateDialogCodeContentP
   };
 
   return (
-    <DialogContent>
-      <Typography>
-        {intl.formatMessage(messages.createdGiftCardLabel)}
-      </Typography>
-      <VerticalSpacer />
-      <Typography variant="h6" color="textSecondary" data-test-id="cardCode">
-        {cardCode}
-      </Typography>
-      <VerticalSpacer spacing={2} />
-      <div className={classes.buttonsContainer}>
+    <div className={classes.content}>
+      <DialogContent>
+        <Typography>
+          {intl.formatMessage(messages.createdGiftCardLabel)}
+        </Typography>
+        <VerticalSpacer />
+        <Typography variant="h6" color="textSecondary" data-test-id="cardCode">
+          {cardCode}
+        </Typography>
+        <VerticalSpacer spacing={2} />
+      </DialogContent>
+      <DialogActions>
         <Button onClick={onCopyCode}>
           {intl.formatMessage(messages.copyCodeLabel)}
         </Button>
         <HorizontalSpacer spacing={2} />
-        <Button
-          color="primary"
-          variant="contained"
-          onClick={onClose}
-          data-test="submit"
-        >
+        <Button variant="primary" onClick={onClose} data-test="submit">
           {intl.formatMessage(buttonMessages.ok)}
         </Button>
-      </div>
-    </DialogContent>
+      </DialogActions>
+    </div>
   );
 };
 
diff --git a/src/giftCards/GiftCardCreateDialog/GiftCardCreateDialogForm.tsx b/src/giftCards/GiftCardCreateDialog/GiftCardCreateDialogForm.tsx
index 979823f9f11..a2cffb76f64 100644
--- a/src/giftCards/GiftCardCreateDialog/GiftCardCreateDialogForm.tsx
+++ b/src/giftCards/GiftCardCreateDialog/GiftCardCreateDialogForm.tsx
@@ -147,12 +147,7 @@ const GiftCardCreateDialogForm: React.FC<GiftCardCreateDialogFormProps> = ({
 
   return (
     <>
-      <DialogContent
-        style={{
-          overflowY: "auto",
-          overflowX: "hidden"
-        }}
-      >
+      <DialogContent className={classes.dialogContent}>
         <GiftCardCreateMoneyInput {...commonFormProps} set={set} />
         <CardSpacer />
         <GiftCardTagInput
diff --git a/src/giftCards/GiftCardCreateDialog/styles.ts b/src/giftCards/GiftCardCreateDialog/styles.ts
index 53cb126f2fb..0a0da24a4d2 100644
--- a/src/giftCards/GiftCardCreateDialog/styles.ts
+++ b/src/giftCards/GiftCardCreateDialog/styles.ts
@@ -1,11 +1,16 @@
 import { makeStyles } from "@saleor/macaw-ui";
+import { CSSProperties } from "react";
+
+const contentStyles: CSSProperties = {
+  maxHeight: "calc(100vh - 230px)",
+  overflowY: "auto",
+  overflowX: "hidden"
+};
 
 export const useGiftCardCreateDialogCodeContentStyles = makeStyles(
   () => ({
-    buttonsContainer: {
-      display: "flex",
-      justifyContent: "flex-end",
-      minWidth: 450
+    content: {
+      ...contentStyles
     }
   }),
   { name: "GiftCardCreateDialogCodeContent" }
@@ -21,9 +26,7 @@ export const useGiftCardCreateFormStyles = makeStyles(
     },
     fullWidthContainer: { width: "100%" },
     dialogContent: {
-      minWidth: 550,
-      overflowY: "auto",
-      overflowX: "hidden"
+      ...contentStyles
     }
   }),
   { name: "GiftCardCreateDialogForm" }
diff --git a/src/giftCards/GiftCardUpdate/GiftCardUpdateDetailsCard/GiftCardUpdateDetailsBalanceSection.tsx b/src/giftCards/GiftCardUpdate/GiftCardUpdateDetailsCard/GiftCardUpdateDetailsBalanceSection.tsx
index 6b647091509..147496251e7 100644
--- a/src/giftCards/GiftCardUpdate/GiftCardUpdateDetailsCard/GiftCardUpdateDetailsBalanceSection.tsx
+++ b/src/giftCards/GiftCardUpdate/GiftCardUpdateDetailsCard/GiftCardUpdateDetailsBalanceSection.tsx
@@ -28,13 +28,15 @@ const GiftCardUpdateDetailsBalanceSection: React.FC = () => {
         className={classNames(classes.labelsContainer, classes.wideContainer)}
       >
         <Typography>{intl.formatMessage(messages.cardBalanceLabel)}</Typography>
-        <div className={classes.labelsContainer}>
+        <Typography className={classes.labelsContainer}>
           <Money money={currentBalance} />
           <HorizontalSpacer />
           /
           <HorizontalSpacer />
-          <Money className={classes.balanceTotal} money={initialBalance} />
-        </div>
+          <Typography component="span" color="textSecondary">
+            <Money money={initialBalance} />
+          </Typography>
+        </Typography>
       </div>
       <CardSpacer />
       <div className={classes.balanceBar}>
diff --git a/src/giftCards/GiftCardUpdate/GiftCardUpdateDetailsCard/GiftCardUpdateDetailsCard.tsx b/src/giftCards/GiftCardUpdate/GiftCardUpdateDetailsCard/GiftCardUpdateDetailsCard.tsx
index 1d499235c8c..4832d036780 100644
--- a/src/giftCards/GiftCardUpdate/GiftCardUpdateDetailsCard/GiftCardUpdateDetailsCard.tsx
+++ b/src/giftCards/GiftCardUpdate/GiftCardUpdateDetailsCard/GiftCardUpdateDetailsCard.tsx
@@ -1,16 +1,11 @@
-import {
-  Button,
-  Card,
-  CardContent,
-  Divider,
-  Typography
-} from "@material-ui/core";
+import { Card, CardContent, Divider, Typography } from "@material-ui/core";
 import VerticalSpacer from "@saleor/apps/components/VerticalSpacer";
 import CardSpacer from "@saleor/components/CardSpacer";
 import CardTitle from "@saleor/components/CardTitle";
 import Skeleton from "@saleor/components/Skeleton";
 import GiftCardTagInput from "@saleor/giftCards/components/GiftCardTagInput";
 import GiftCardUpdateExpirySelect from "@saleor/giftCards/GiftCardUpdate/GiftCardUpdateExpirySelect";
+import { Button } from "@saleor/macaw-ui";
 import React from "react";
 import { useIntl } from "react-intl";
 
@@ -40,7 +35,6 @@ const GiftCardUpdateDetailsCard: React.FC = () => {
           !giftCard?.isExpired && (
             <Button
               data-test-id="set-balance-button"
-              color="primary"
               onClick={openSetBalanceDialog}
             >
               {intl.formatMessage(messages.setBalanceButtonLabel)}
@@ -56,7 +50,7 @@ const GiftCardUpdateDetailsCard: React.FC = () => {
               <CardSpacer />
               <Divider />
               <CardSpacer />
-              <Typography>
+              <Typography color="textSecondary">
                 {intl.formatMessage(messages.tagInputLabel)}
               </Typography>
               <VerticalSpacer />
diff --git a/src/giftCards/GiftCardUpdate/GiftCardUpdateDetailsCard/messages.ts b/src/giftCards/GiftCardUpdate/GiftCardUpdateDetailsCard/messages.ts
index 8ceebb069c4..7a85ec0db82 100644
--- a/src/giftCards/GiftCardUpdate/GiftCardUpdateDetailsCard/messages.ts
+++ b/src/giftCards/GiftCardUpdate/GiftCardUpdateDetailsCard/messages.ts
@@ -6,7 +6,7 @@ export const giftCardUpdateDetailsCardMessages = defineMessages({
     description: "details title"
   },
   setBalanceButtonLabel: {
-    defaultMessage: "set balance",
+    defaultMessage: "Set Balance",
     description: "set balance button label"
   },
   cardBalanceLabel: {
diff --git a/src/giftCards/GiftCardUpdate/GiftCardUpdateDetailsCard/styles.ts b/src/giftCards/GiftCardUpdate/GiftCardUpdateDetailsCard/styles.ts
index 545821bdadc..e0e54d1a662 100644
--- a/src/giftCards/GiftCardUpdate/GiftCardUpdateDetailsCard/styles.ts
+++ b/src/giftCards/GiftCardUpdate/GiftCardUpdateDetailsCard/styles.ts
@@ -22,9 +22,6 @@ export const useGiftCardDetailsBalanceStyles = makeStyles(
       height: 28,
       borderRadius: 14,
       backgroundColor: theme.palette.primary.light
-    },
-    balanceTotal: {
-      color: theme.palette.text.secondary
     }
   }),
   { name: "GiftCardUpdateDetailsBalanceSection" }
diff --git a/src/giftCards/GiftCardUpdate/GiftCardUpdateExpirySelect/GiftCardUpdateExpirySelect.tsx b/src/giftCards/GiftCardUpdate/GiftCardUpdateExpirySelect/GiftCardUpdateExpirySelect.tsx
index 2d9d94fcd08..da35c3fa9be 100644
--- a/src/giftCards/GiftCardUpdate/GiftCardUpdateExpirySelect/GiftCardUpdateExpirySelect.tsx
+++ b/src/giftCards/GiftCardUpdate/GiftCardUpdateExpirySelect/GiftCardUpdateExpirySelect.tsx
@@ -45,7 +45,6 @@ const GiftCardUpdateExpirySelect: React.FC = () => {
         checked={cardExpiresSelected}
         onChange={event => setCardExpiresSelected(event.target.value)}
       />
-      <VerticalSpacer spacing={2} />
 
       {cardExpiresSelected && (
         <TextField
@@ -53,6 +52,7 @@ const GiftCardUpdateExpirySelect: React.FC = () => {
           helperText={getGiftCardErrorMessage(formErrors?.expiryDate, intl)}
           onChange={change}
           name={"expiryDate"}
+          fullWidth
           className={classes.dateField}
           label={intl.formatMessage(messages.expiryDateLabel)}
           value={expiryDate}
diff --git a/src/giftCards/GiftCardUpdate/GiftCardUpdateExpirySelect/styles.ts b/src/giftCards/GiftCardUpdate/GiftCardUpdateExpirySelect/styles.ts
index 81ade85cd95..786d8e049ed 100644
--- a/src/giftCards/GiftCardUpdate/GiftCardUpdateExpirySelect/styles.ts
+++ b/src/giftCards/GiftCardUpdate/GiftCardUpdateExpirySelect/styles.ts
@@ -7,7 +7,9 @@ export const useGiftCardExpirySelectStyles = makeStyles(
       flexDirection: "row"
     },
     dateField: {
-      width: 400
+      display: "block",
+      width: 400,
+      marginTop: theme.spacing(2)
     },
     periodField: {
       display: "flex"
diff --git a/src/giftCards/GiftCardUpdate/GiftCardUpdatePageHeader/GiftCardUpdatePageHeader.tsx b/src/giftCards/GiftCardUpdate/GiftCardUpdatePageHeader/GiftCardUpdatePageHeader.tsx
index 63b2f67205d..c0c68f16bcb 100644
--- a/src/giftCards/GiftCardUpdate/GiftCardUpdatePageHeader/GiftCardUpdatePageHeader.tsx
+++ b/src/giftCards/GiftCardUpdate/GiftCardUpdatePageHeader/GiftCardUpdatePageHeader.tsx
@@ -1,10 +1,9 @@
-import { Button } from "@material-ui/core";
 import HorizontalSpacer from "@saleor/apps/components/HorizontalSpacer";
 import PageHeader from "@saleor/components/PageHeader";
 import PageTitleWithStatusChip from "@saleor/components/PageTitleWithStatusChip";
 import GiftCardStatusChip from "@saleor/giftCards/components/GiftCardStatusChip/GiftCardStatusChip";
 import { sectionNames } from "@saleor/intl";
-import { Backlink } from "@saleor/macaw-ui";
+import { Backlink, Button } from "@saleor/macaw-ui";
 import React from "react";
 import { useIntl } from "react-intl";
 
@@ -47,11 +46,7 @@ const GiftCardUpdatePageHeader: React.FC = () => {
         <GiftCardEnableDisableSection />
         <HorizontalSpacer />
         {!isExpired && (
-          <Button
-            color="primary"
-            variant="contained"
-            onClick={openResendCodeDialog}
-          >
+          <Button variant="primary" onClick={openResendCodeDialog}>
             {intl.formatMessage(messages.resendButtonLabel)}
           </Button>
         )}
diff --git a/src/giftCards/GiftCardsList/GiftCardsListHeader/GiftCardsListHeader.tsx b/src/giftCards/GiftCardsList/GiftCardsListHeader/GiftCardsListHeader.tsx
index 57ecae180bf..03c9975d882 100644
--- a/src/giftCards/GiftCardsList/GiftCardsListHeader/GiftCardsListHeader.tsx
+++ b/src/giftCards/GiftCardsList/GiftCardsListHeader/GiftCardsListHeader.tsx
@@ -1,10 +1,10 @@
-import { Button } from "@material-ui/core";
 import HorizontalSpacer from "@saleor/apps/components/HorizontalSpacer";
 import VerticalSpacer from "@saleor/apps/components/VerticalSpacer";
 import CardMenu, { CardMenuItem } from "@saleor/components/CardMenu";
 import PageHeader from "@saleor/components/PageHeader";
 import useNavigator from "@saleor/hooks/useNavigator";
 import { sectionNames } from "@saleor/intl";
+import { Button } from "@saleor/macaw-ui";
 import React from "react";
 import { useIntl } from "react-intl";
 
@@ -49,8 +49,7 @@ const GiftCardsListHeader: React.FC = () => {
         <CardMenu menuItems={menuItems} data-test="menu" />
         <HorizontalSpacer spacing={2} />
         <Button
-          color="primary"
-          variant="contained"
+          variant="primary"
           onClick={openCreateDialog}
           data-test-id="issueCardButton"
         >
diff --git a/src/giftCards/GiftCardsList/GiftCardsListTable/GiftCardsListTable.tsx b/src/giftCards/GiftCardsList/GiftCardsListTable/GiftCardsListTable.tsx
index badf29f5342..2b54adabdff 100644
--- a/src/giftCards/GiftCardsList/GiftCardsListTable/GiftCardsListTable.tsx
+++ b/src/giftCards/GiftCardsList/GiftCardsListTable/GiftCardsListTable.tsx
@@ -9,6 +9,7 @@ import HorizontalSpacer from "@saleor/apps/components/HorizontalSpacer";
 import Checkbox from "@saleor/components/Checkbox";
 import DeleteIconButton from "@saleor/components/DeleteIconButton";
 import Link from "@saleor/components/Link";
+import Money from "@saleor/components/Money";
 import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import { customerUrl } from "@saleor/customers/urls";
@@ -130,13 +131,7 @@ const GiftCardsListTable: React.FC = () => {
                     )}
                   </TableCell>
                   <TableCell align="right" className={classes.colBalance}>
-                    <div className={classes.moneyContainer}>
-                      <Typography variant="caption">
-                        {currentBalance.currency}
-                      </Typography>
-                      <HorizontalSpacer spacing={0.5} />
-                      <Typography>{currentBalance.amount}</Typography>
-                    </div>
+                    <Money money={currentBalance} />
                   </TableCell>
                   <TableCell className={classes.colDelete}>
                     <DeleteIconButton
diff --git a/src/giftCards/GiftCardsList/GiftCardsListTable/GiftCardsListTableHeader/BulkEnableDisableSection.tsx b/src/giftCards/GiftCardsList/GiftCardsListTable/GiftCardsListTableHeader/BulkEnableDisableSection.tsx
index 7d191c994e3..61c2fe33523 100644
--- a/src/giftCards/GiftCardsList/GiftCardsListTable/GiftCardsListTableHeader/BulkEnableDisableSection.tsx
+++ b/src/giftCards/GiftCardsList/GiftCardsListTable/GiftCardsListTableHeader/BulkEnableDisableSection.tsx
@@ -111,7 +111,7 @@ const BulkEnableDisableSection: React.FC = () => {
       {(areAllSelectedCardsDisabled || isSelectionMixed) && (
         <ConfirmButton
           onClick={handleActivateGiftCards}
-          variant="text"
+          variant="tertiary"
           transitionState={activateGiftCardsOpts?.status}
         >
           {intl.formatMessage(messages.enableLabel)}
@@ -120,7 +120,7 @@ const BulkEnableDisableSection: React.FC = () => {
       {(areAllSelectedCardsActive || isSelectionMixed) && (
         <ConfirmButton
           onClick={handleDeactivateGiftCards}
-          variant="text"
+          variant="tertiary"
           transitionState={deactivateGiftCardsOpts?.status}
         >
           {intl.formatMessage(messages.disableLabel)}
diff --git a/src/giftCards/GiftCardsList/providers/GiftCardListDialogsProvider/GiftCardListDialogsProvider.tsx b/src/giftCards/GiftCardsList/providers/GiftCardListDialogsProvider/GiftCardListDialogsProvider.tsx
index 1fec7d1ef1e..c515633d83e 100644
--- a/src/giftCards/GiftCardsList/providers/GiftCardListDialogsProvider/GiftCardListDialogsProvider.tsx
+++ b/src/giftCards/GiftCardsList/providers/GiftCardListDialogsProvider/GiftCardListDialogsProvider.tsx
@@ -79,7 +79,12 @@ const GiftCardListDialogsProvider: React.FC<GiftCardListDialogsProviderProps> =
   return (
     <GiftCardListDialogsContext.Provider value={providerValues}>
       {children}
-      <Dialog open={isDialogOpen(CREATE)} maxWidth="sm" onClose={onClose}>
+      <Dialog
+        open={isDialogOpen(CREATE)}
+        maxWidth="sm"
+        onClose={onClose}
+        fullWidth
+      >
         <GiftCardCreateDialogContent
           onClose={onClose}
           refetchQueries={[GIFT_CARD_LIST_QUERY]}
@@ -89,7 +94,12 @@ const GiftCardListDialogsProvider: React.FC<GiftCardListDialogsProviderProps> =
         open={isDialogOpen(DELETE)}
         onClose={onClose}
       />
-      <Dialog open={isDialogOpen(EXPORT)} maxWidth="sm" onClose={onClose}>
+      <Dialog
+        open={isDialogOpen(EXPORT)}
+        maxWidth="sm"
+        onClose={onClose}
+        fullWidth
+      >
         <GiftCardExportDialogContent onClose={onClose} />
       </Dialog>
       <GiftCardBulkCreateDialog
diff --git a/src/giftCards/GiftCardsList/styles.ts b/src/giftCards/GiftCardsList/styles.ts
index 66be96dbcfd..796ba07a36d 100644
--- a/src/giftCards/GiftCardsList/styles.ts
+++ b/src/giftCards/GiftCardsList/styles.ts
@@ -1,12 +1,7 @@
 import { makeStyles } from "@saleor/macaw-ui";
 
 export const useTableStyles = makeStyles(
-  () => ({
-    moneyContainer: {
-      display: "flex",
-      alignItems: "baseline",
-      justifyContent: "flex-end"
-    },
+  {
     cardCodeContainer: {
       display: "flex",
       alignItems: "baseline"
@@ -15,7 +10,7 @@ export const useTableStyles = makeStyles(
       width: 400
     },
     colDelete: {
-      width: 100
+      width: 80
     },
     colBalance: {
       width: 135
@@ -25,13 +20,13 @@ export const useTableStyles = makeStyles(
     },
     row: {
       cursor: "pointer",
-      height: 80,
-      "& td": {
+      height: 70,
+      "& td, & th": {
         padding: "0px 20px",
         height: "auto"
       }
     }
-  }),
+  },
   { name: "GiftCardsListTable" }
 );
 
diff --git a/src/giftCards/index.tsx b/src/giftCards/index.tsx
index 9ae10ac819d..bf424f9841e 100644
--- a/src/giftCards/index.tsx
+++ b/src/giftCards/index.tsx
@@ -14,7 +14,7 @@ import {
 } from "./GiftCardsList/types";
 import GiftCardUpdateComponent from "./GiftCardUpdate";
 import { GiftCardUpdatePageUrlQueryParams } from "./GiftCardUpdate/types";
-import { giftCardSettingsUrl, giftCardsListPath, giftCardUrl } from "./urls";
+import { giftCardPath, giftCardSettingsUrl, giftCardsListPath } from "./urls";
 
 const GiftCardUpdatePage: React.FC<RouteComponentProps<{ id: string }>> = ({
   match
@@ -50,7 +50,7 @@ const Component: React.FC = ({}) => {
       <Switch>
         <Route path={giftCardSettingsUrl} component={GiftCardSettings} />
         <Route exact path={giftCardsListPath} component={GiftCardList} />
-        <Route path={giftCardUrl(":id")} component={GiftCardUpdatePage} />
+        <Route path={giftCardPath(":id")} component={GiftCardUpdatePage} />
       </Switch>
     </>
   );
diff --git a/src/giftCards/urls.ts b/src/giftCards/urls.ts
index db89b2e7bbb..823f07e5544 100644
--- a/src/giftCards/urls.ts
+++ b/src/giftCards/urls.ts
@@ -11,9 +11,11 @@ export const giftCardsListPath = `${giftCardsSectionUrlName}/`;
 export const giftCardListUrl = (params?: GiftCardListUrlQueryParams) =>
   giftCardsListPath + "?" + stringifyQs(params);
 
+export const giftCardPath = (id: string) => urlJoin(giftCardsListPath, id);
+
 export const giftCardUrl = (
   id: string,
   params?: GiftCardUpdatePageUrlQueryParams
-) => urlJoin(giftCardsListPath, id) + "?" + stringifyQs(params);
+) => giftCardPath(encodeURIComponent(id)) + "?" + stringifyQs(params);
 
 export const giftCardSettingsUrl = urlJoin(giftCardsListPath, "settings");
diff --git a/src/orders/components/OrderDraftList/OrderDraftList.tsx b/src/orders/components/OrderDraftList/OrderDraftList.tsx
index 22494ddd911..7e5915d909b 100644
--- a/src/orders/components/OrderDraftList/OrderDraftList.tsx
+++ b/src/orders/components/OrderDraftList/OrderDraftList.tsx
@@ -210,9 +210,9 @@ export const OrderDraftList: React.FC<OrderDraftListProps> = props => {
                     <Skeleton />
                   )}
                 </TableCell>
-                <TableCell className={classes.colTotal}>
+                <TableCell className={classes.colTotal} align="right">
                   {maybe(() => order.total.gross) ? (
-                    <Money money={order.total.gross} align="right" />
+                    <Money money={order.total.gross} />
                   ) : (
                     <Skeleton />
                   )}
diff --git a/src/orders/components/OrderFulfilledProductsCard/OrderFulfilledProductsCard.tsx b/src/orders/components/OrderFulfilledProductsCard/OrderFulfilledProductsCard.tsx
index daec588fc2c..d3fcccf1689 100644
--- a/src/orders/components/OrderFulfilledProductsCard/OrderFulfilledProductsCard.tsx
+++ b/src/orders/components/OrderFulfilledProductsCard/OrderFulfilledProductsCard.tsx
@@ -1,8 +1,9 @@
-import { Card, IconButton, TableBody } from "@material-ui/core";
+import { Card, TableBody } from "@material-ui/core";
 import CardSpacer from "@saleor/components/CardSpacer";
 import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import { OrderDetailsFragment } from "@saleor/fragments/types/OrderDetailsFragment";
 import TrashIcon from "@saleor/icons/Trash";
+import { IconButton } from "@saleor/macaw-ui";
 import { mergeRepeatedOrderLines } from "@saleor/orders/utils/data";
 import React from "react";
 
@@ -74,6 +75,7 @@ const OrderFulfilledProductsCard: React.FC<OrderFulfilledProductsCardProps> = pr
           toolbar={
             cancelableStatuses.includes(fulfillment?.status) && (
               <IconButton
+                variant="secondary"
                 className={classes.deleteIcon}
                 onClick={onOrderFulfillmentCancel}
                 data-test-id="cancelFulfillmentButton"
diff --git a/src/orders/components/OrderFulfilledProductsCard/styles.ts b/src/orders/components/OrderFulfilledProductsCard/styles.ts
index 86029220b4e..bfa3c528411 100644
--- a/src/orders/components/OrderFulfilledProductsCard/styles.ts
+++ b/src/orders/components/OrderFulfilledProductsCard/styles.ts
@@ -4,7 +4,13 @@ const useStyles = makeStyles(
   theme => ({
     actions: {
       flexDirection: "row-reverse",
-      padding: theme.spacing(2, 3)
+      padding: theme.spacing(2, 4)
+    },
+    deleteIcon: {
+      height: 40,
+      paddingRight: 0,
+      paddingLeft: theme.spacing(1),
+      width: 40
     },
     table: {
       tableLayout: "fixed"
diff --git a/src/orders/components/OrderFulfillmentApproveDialog/OrderFulfillmentApproveDialog.tsx b/src/orders/components/OrderFulfillmentApproveDialog/OrderFulfillmentApproveDialog.tsx
index 17af5ec333f..84e5457e2f5 100644
--- a/src/orders/components/OrderFulfillmentApproveDialog/OrderFulfillmentApproveDialog.tsx
+++ b/src/orders/components/OrderFulfillmentApproveDialog/OrderFulfillmentApproveDialog.tsx
@@ -1,19 +1,17 @@
 import {
-  Button,
   Dialog,
   DialogActions,
   DialogContent,
   DialogContentText,
   DialogTitle
 } from "@material-ui/core";
-import ConfirmButton, {
-  ConfirmButtonTransitionState
-} from "@saleor/components/ConfirmButton";
+import ConfirmButton from "@saleor/components/ConfirmButton";
 import ControlledCheckbox from "@saleor/components/ControlledCheckbox";
 import Form from "@saleor/components/Form";
 import FormSpacer from "@saleor/components/FormSpacer";
 import { OrderErrorFragment } from "@saleor/fragments/types/OrderErrorFragment";
 import { buttonMessages } from "@saleor/intl";
+import { Button, ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import getOrderErrorMessage from "@saleor/utils/errors/order";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
@@ -28,8 +26,8 @@ export interface OrderFulfillmentAcceptDialogProps {
   confirmButtonState: ConfirmButtonTransitionState;
   errors: OrderErrorFragment[];
   open: boolean;
-  onClose();
-  onConfirm(data: OrderFulfillmentAcceptDialogFormData);
+  onClose(): void;
+  onConfirm(data: OrderFulfillmentAcceptDialogFormData): void;
 }
 
 const OrderFulfillmentAcceptDialog: React.FC<OrderFulfillmentAcceptDialogProps> = props => {
@@ -76,7 +74,6 @@ const OrderFulfillmentAcceptDialog: React.FC<OrderFulfillmentAcceptDialogProps>
               <ConfirmButton
                 data-test="submit"
                 transitionState={confirmButtonState}
-                variant="contained"
                 onClick={submit}
               >
                 <FormattedMessage {...buttonMessages.approve} />
diff --git a/src/orders/components/OrderList/OrderList.tsx b/src/orders/components/OrderList/OrderList.tsx
index c891f47a6c2..35c58d62265 100644
--- a/src/orders/components/OrderList/OrderList.tsx
+++ b/src/orders/components/OrderList/OrderList.tsx
@@ -246,9 +246,9 @@ export const OrderList: React.FC<OrderListProps> = props => {
                   <Skeleton />
                 )}
               </TableCell>
-              <TableCell className={classes.colTotal}>
+              <TableCell className={classes.colTotal} align="right">
                 {maybe(() => order.total.gross) ? (
-                  <Money money={order.total.gross} align="right" />
+                  <Money money={order.total.gross} />
                 ) : (
                   <Skeleton />
                 )}
diff --git a/src/orders/components/OrderPayment/OrderPayment.tsx b/src/orders/components/OrderPayment/OrderPayment.tsx
index 29e7dd55178..db46714209f 100644
--- a/src/orders/components/OrderPayment/OrderPayment.tsx
+++ b/src/orders/components/OrderPayment/OrderPayment.tsx
@@ -24,14 +24,17 @@ import {
 
 const useStyles = makeStyles(
   theme => ({
+    header: {
+      display: "flex",
+      justifyContent: "space-between"
+    },
     root: {
       ...theme.typography.body1,
       lineHeight: 1.9,
       width: "100%"
     },
     textRight: {
-      display: "flex",
-      justifyContent: "end"
+      textAlign: "right"
     },
     totalRow: {
       fontWeight: 600
@@ -98,7 +101,50 @@ const OrderPayment: React.FC<OrderPaymentProps> = props => {
           maybe(() => order.paymentStatus) === undefined ? (
             <Skeleton />
           ) : (
-            <StatusLabel label={payment.localized} status={payment.status} />
+            <div className={classes.header}>
+              <StatusLabel label={payment.localized} status={payment.status} />
+              {maybe(() => order.status) !== OrderStatus.CANCELED &&
+                (canCapture || canRefund || canVoid || canMarkAsPaid) && (
+                  <div>
+                    {canCapture && (
+                      <Button variant="tertiary" onClick={onCapture}>
+                        <FormattedMessage
+                          defaultMessage="Capture"
+                          description="capture payment, button"
+                        />
+                      </Button>
+                    )}
+                    {canRefund && (
+                      <Button
+                        variant="tertiary"
+                        onClick={onRefund}
+                        data-test-id="refund-button"
+                      >
+                        <FormattedMessage
+                          defaultMessage="Refund"
+                          description="button"
+                        />
+                      </Button>
+                    )}
+                    {canVoid && (
+                      <Button variant="tertiary" onClick={onVoid}>
+                        <FormattedMessage
+                          defaultMessage="Void"
+                          description="void payment, button"
+                        />
+                      </Button>
+                    )}
+                    {canMarkAsPaid && (
+                      <Button variant="tertiary" onClick={onMarkAsPaid}>
+                        <FormattedMessage
+                          defaultMessage="Mark as paid"
+                          description="order, button"
+                        />
+                      </Button>
+                    )}
+                  </div>
+                )}
+            </div>
           )
         }
       />
@@ -309,50 +355,6 @@ const OrderPayment: React.FC<OrderPaymentProps> = props => {
           </tbody>
         </table>
       </CardContent>
-      {maybe(() => order.status) !== OrderStatus.CANCELED &&
-        (canCapture || canRefund || canVoid || canMarkAsPaid) && (
-          <>
-            <Hr />
-            <CardActions>
-              {canCapture && (
-                <Button variant="tertiary" onClick={onCapture}>
-                  <FormattedMessage
-                    defaultMessage="Capture"
-                    description="capture payment, button"
-                  />
-                </Button>
-              )}
-              {canRefund && (
-                <Button
-                  variant="tertiary"
-                  onClick={onRefund}
-                  data-test-id="refund-button"
-                >
-                  <FormattedMessage
-                    defaultMessage="Refund"
-                    description="button"
-                  />
-                </Button>
-              )}
-              {canVoid && (
-                <Button variant="tertiary" onClick={onVoid}>
-                  <FormattedMessage
-                    defaultMessage="Void"
-                    description="void payment, button"
-                  />
-                </Button>
-              )}
-              {canMarkAsPaid && (
-                <Button variant="tertiary" onClick={onMarkAsPaid}>
-                  <FormattedMessage
-                    defaultMessage="Mark as paid"
-                    description="order, button"
-                  />
-                </Button>
-              )}
-            </CardActions>
-          </>
-        )}
     </Card>
   );
 };
diff --git a/src/orders/components/OrderPriceLabel/OrderPriceLabel.tsx b/src/orders/components/OrderPriceLabel/OrderPriceLabel.tsx
index 34528548204..1177b6f9794 100644
--- a/src/orders/components/OrderPriceLabel/OrderPriceLabel.tsx
+++ b/src/orders/components/OrderPriceLabel/OrderPriceLabel.tsx
@@ -1,3 +1,4 @@
+import { Typography } from "@material-ui/core";
 import DiscountedPrice from "@saleor/components/DiscountedPrice/DiscountedPrice";
 import Money from "@saleor/components/Money";
 import { SearchOrderVariant_search_edges_node_variants_pricing } from "@saleor/orders/types/SearchOrderVariant";
@@ -24,7 +25,11 @@ const OrderPriceLabel: React.FC<OrderPriceLabelProps> = ({ pricing }) => {
     );
   }
 
-  return <Money money={pricing.priceUndiscounted.gross} align="right" />;
+  return (
+    <Typography align="right">
+      <Money money={pricing.priceUndiscounted.gross} />
+    </Typography>
+  );
 };
 
 export default OrderPriceLabel;
diff --git a/src/orders/components/OrderProductsCardElements/OrderProductsTableRow.tsx b/src/orders/components/OrderProductsCardElements/OrderProductsTableRow.tsx
index 942a753bea5..f3faf42bad7 100644
--- a/src/orders/components/OrderProductsCardElements/OrderProductsTableRow.tsx
+++ b/src/orders/components/OrderProductsCardElements/OrderProductsTableRow.tsx
@@ -96,20 +96,19 @@ const TableLine: React.FC<TableLineProps> = ({
       <TableCell className={classes.colQuantity}>
         {quantityToDisplay || <Skeleton />}
       </TableCell>
-      <TableCell className={classes.colPrice}>
+      <TableCell className={classes.colPrice} align="right">
         {maybe(() => line.orderLine.unitPrice.gross) ? (
-          <Money money={line.orderLine.unitPrice.gross} align="right" />
+          <Money money={line.orderLine.unitPrice.gross} />
         ) : (
           <Skeleton />
         )}
       </TableCell>
-      <TableCell className={classes.colTotal}>
+      <TableCell className={classes.colTotal} align="right">
         <Money
           money={{
             amount: line.quantity * line.orderLine.unitPrice.gross.amount,
             currency: line.orderLine.unitPrice.gross.currency
           }}
-          align="right"
         />
       </TableCell>
     </TableRow>
diff --git a/src/orders/components/OrderUnfulfilledProductsCard/OrderUnfulfilledProductsCard.tsx b/src/orders/components/OrderUnfulfilledProductsCard/OrderUnfulfilledProductsCard.tsx
index b3aedf64f1c..fb32f675500 100644
--- a/src/orders/components/OrderUnfulfilledProductsCard/OrderUnfulfilledProductsCard.tsx
+++ b/src/orders/components/OrderUnfulfilledProductsCard/OrderUnfulfilledProductsCard.tsx
@@ -1,4 +1,4 @@
-import { Card, CardActions, TableBody } from "@material-ui/core";
+import { Card, CardActions, TableBody, Typography } from "@material-ui/core";
 import CardSpacer from "@saleor/components/CardSpacer";
 import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import { commonMessages } from "@saleor/intl";
diff --git a/src/productTypes/components/ProductTypeVariantAttributes/ProductTypeVariantAttributes.tsx b/src/productTypes/components/ProductTypeVariantAttributes/ProductTypeVariantAttributes.tsx
index ef28220505d..8979184f9e3 100644
--- a/src/productTypes/components/ProductTypeVariantAttributes/ProductTypeVariantAttributes.tsx
+++ b/src/productTypes/components/ProductTypeVariantAttributes/ProductTypeVariantAttributes.tsx
@@ -1,12 +1,4 @@
-import {
-  Button,
-  Card,
-  IconButton,
-  TableCell,
-  TableRow,
-  Tooltip
-} from "@material-ui/core";
-import DeleteIcon from "@material-ui/icons/Delete";
+import { Card, TableCell, TableRow, Tooltip } from "@material-ui/core";
 import HelpOutline from "@material-ui/icons/HelpOutline";
 import CardTitle from "@saleor/components/CardTitle";
 import Checkbox from "@saleor/components/Checkbox";
@@ -17,7 +9,7 @@ import {
   SortableTableRow
 } from "@saleor/components/SortableTable";
 import TableHead from "@saleor/components/TableHead";
-import { makeStyles } from "@saleor/macaw-ui";
+import { Button, DeleteIcon, IconButton, makeStyles } from "@saleor/macaw-ui";
 import { maybe, renderCollection, stopPropagation } from "@saleor/misc";
 import { ListActions, ReorderAction } from "@saleor/types";
 import { ProductAttributeType } from "@saleor/types/globalTypes";
@@ -146,8 +138,7 @@ const ProductTypeVariantAttributes: React.FC<ProductTypeVariantAttributesProps>
         toolbar={
           <Button
             data-test-id={testId}
-            color="primary"
-            variant="text"
+            variant="tertiary"
             onClick={() => onAttributeAssign(ProductAttributeType[type])}
           >
             <FormattedMessage
diff --git a/src/products/components/ProductExportDialog/ProductExportDialogInfo.tsx b/src/products/components/ProductExportDialog/ProductExportDialogInfo.tsx
index 654a5d79448..244ba4f5dfa 100644
--- a/src/products/components/ProductExportDialog/ProductExportDialogInfo.tsx
+++ b/src/products/components/ProductExportDialog/ProductExportDialogInfo.tsx
@@ -1,4 +1,5 @@
 import {
+  Button,
   CircularProgress,
   FormControlLabel,
   TextField,
@@ -16,7 +17,7 @@ import { ChannelFragment } from "@saleor/fragments/types/ChannelFragment";
 import { ChangeEvent, FormChange } from "@saleor/hooks/useForm";
 import useSearchQuery from "@saleor/hooks/useSearchQuery";
 import { sectionNames } from "@saleor/intl";
-import { Button, makeStyles } from "@saleor/macaw-ui";
+import { makeStyles } from "@saleor/macaw-ui";
 import { FetchMoreProps } from "@saleor/types";
 import {
   ExportProductsInput,
@@ -305,7 +306,7 @@ const ProductExportDialogInfo: React.FC<ProductExportDialogInfoProps> = ({
     onSelectAllChannels(channels, channels.length);
 
   return (
-    <div className={classes.scrollable}>
+    <>
       <Typography className={classes.dialogLabel}>
         <FormattedMessage
           defaultMessage="Information exported:"
@@ -466,70 +467,17 @@ const ProductExportDialogInfo: React.FC<ProductExportDialogInfoProps> = ({
           onToggleAll={handleToggleAllFields}
           data-test="financial"
         />
-        <Hr className={classes.hr} />
-        {attributes.map(attribute => (
-          <Option
-            checked={data.exportInfo.attributes.includes(attribute.value)}
-            name={attributeNamePrefix + attribute.value}
-            onChange={onAttrtibuteSelect}
-            key={attribute.value}
-          >
-            {attribute.label}
-          </Option>
-        ))}
-        {(hasMore || loading) && (
-          <div className={classes.loadMoreContainer}>
-            {hasMore && !loading && (
-              <Button onClick={onFetchMore}>
-                <FormattedMessage
-                  defaultMessage="Load More"
-                  description="button"
-                />
-              </Button>
-            )}
-            {loading && <CircularProgress size={32} />}
-          </div>
-        )}
-      </Accordion>
-      <FieldAccordion
-        className={classes.accordion}
-        title={intl.formatMessage({
-          defaultMessage: "Financial Information",
-          description: "informations about product prices etc, header"
-        })}
-        data={data}
-        fields={[ProductFieldEnum.CHARGE_TAXES]}
-        onChange={handleFieldChange}
-        onToggleAll={handleToggleAllFields}
-        data-test="financial"
-      />
-      <Accordion
-        className={classes.accordion}
-        title={intl.formatMessage({
-          defaultMessage: "Inventory Information",
-          description: "informations about product stock, header"
-        })}
-        quickPeek={
-          (data.exportInfo.warehouses.length > 0 ||
-            selectedInventoryFields.length > 0) && (
-            <div className={classes.quickPeekContainer}>
-              {selectedInventoryFields.slice(0, maxChips).map(field => (
-                <Chip
-                  className={classes.chip}
-                  label={getFieldLabel(field)}
-                  onClose={() =>
-                    onChange({
-                      target: {
-                        name: field,
-                        value: false
-                      }
-                    })
-                  }
-                />
-              ))}
-              {data.exportInfo.warehouses
-                .slice(0, maxChips - selectedInventoryFields.length)
-                .map(warehouseId => (
+        <Accordion
+          className={classes.accordion}
+          title={intl.formatMessage({
+            defaultMessage: "Inventory Information",
+            description: "informations about product stock, header"
+          })}
+          quickPeek={
+            (data.exportInfo.warehouses.length > 0 ||
+              selectedInventoryFields.length > 0) && (
+              <div className={classes.quickPeekContainer}>
+                {selectedInventoryFields.slice(0, maxChips).map(field => (
                   <Chip
                     className={classes.chip}
                     label={getFieldLabel(field)}
@@ -646,60 +594,25 @@ const ProductExportDialogInfo: React.FC<ProductExportDialogInfoProps> = ({
               {warehouse.label}
             </Option>
           ))}
-        </div>
-        <Hr className={classes.hrWarehouses} />
-        <Typography>
-          <FormattedMessage defaultMessage="Export Product Stock Quantity to CSV" />
-        </Typography>
-        <div>
-          <Option
-            checked={warehouses.every(warehouse =>
-              data.exportInfo.warehouses.includes(warehouse.value)
-            )}
-            name="all-warehouses"
-            onChange={onSelectAllWarehouses}
-          >
-            <FormattedMessage
-              defaultMessage="Export stock for all warehouses"
-              description="option"
-            />
-          </Option>
-        </div>
-        <Hr className={classes.hrWarehouses} />
-        <Typography className={classes.warehousesLabel} variant="subtitle1">
-          <FormattedMessage
-            defaultMessage="Warehouses A to Z"
-            description="list of warehouses"
-          />
-        </Typography>
-        {warehouses.map(warehouse => (
-          <Option
-            checked={data.exportInfo.warehouses.includes(warehouse.value)}
-            name={warehouseNamePrefix + warehouse.value}
-            onChange={onWarehouseSelect}
-            key={warehouse.value}
-          >
-            {warehouse.label}
-          </Option>
-        ))}
-      </Accordion>
-      <FieldAccordion
-        title={intl.formatMessage({
-          defaultMessage: "SEO Information",
-          description: "informations about product seo, header"
-        })}
-        data={data}
-        fields={[
-          ProductFieldEnum.DESCRIPTION,
-          ProductFieldEnum.NAME,
-          ProductFieldEnum.PRODUCT_MEDIA,
-          ProductFieldEnum.VARIANT_MEDIA
-        ]}
-        onChange={handleFieldChange}
-        onToggleAll={handleToggleAllFields}
-        data-test="seo"
-      />
-    </div>
+        </Accordion>
+        <FieldAccordion
+          title={intl.formatMessage({
+            defaultMessage: "SEO Information",
+            description: "informations about product seo, header"
+          })}
+          data={data}
+          fields={[
+            ProductFieldEnum.DESCRIPTION,
+            ProductFieldEnum.NAME,
+            ProductFieldEnum.PRODUCT_MEDIA,
+            ProductFieldEnum.VARIANT_MEDIA
+          ]}
+          onChange={handleFieldChange}
+          onToggleAll={handleToggleAllFields}
+          data-test="seo"
+        />
+      </div>
+    </>
   );
 };
 
diff --git a/src/products/components/ProductListPage/ProductListPage.tsx b/src/products/components/ProductListPage/ProductListPage.tsx
index b7c35b2a7fd..b61161ee577 100644
--- a/src/products/components/ProductListPage/ProductListPage.tsx
+++ b/src/products/components/ProductListPage/ProductListPage.tsx
@@ -194,7 +194,6 @@ export const ProductListPage: React.FC<ProductListPageProps> = props => {
           data-test="add-product"
           disabled={limitReached}
           onClick={onAdd}
-          data-test="add-product"
         >
           <FormattedMessage
             defaultMessage="Create Product"
diff --git a/src/products/components/ProductStocks/ProductStocks.tsx b/src/products/components/ProductStocks/ProductStocks.tsx
index af3063c0cc1..cdaa33b9e20 100644
--- a/src/products/components/ProductStocks/ProductStocks.tsx
+++ b/src/products/components/ProductStocks/ProductStocks.tsx
@@ -1,5 +1,4 @@
 import {
-  Button,
   Card,
   CardContent,
   ClickAwayListener,
@@ -29,7 +28,13 @@ import { ProductErrorFragment } from "@saleor/fragments/types/ProductErrorFragme
 import { WarehouseFragment } from "@saleor/fragments/types/WarehouseFragment";
 import { FormChange, FormErrors } from "@saleor/hooks/useForm";
 import { FormsetAtomicData, FormsetChange } from "@saleor/hooks/useFormset";
-import { DeleteIcon, IconButton, makeStyles, PlusIcon } from "@saleor/macaw-ui";
+import {
+  Button,
+  DeleteIcon,
+  IconButton,
+  makeStyles,
+  PlusIcon
+} from "@saleor/macaw-ui";
 import { ICONBUTTON_SIZE } from "@saleor/macaw-ui";
 import { renderCollection } from "@saleor/misc";
 import { getFormErrors, getProductErrorMessage } from "@saleor/utils/errors";
@@ -486,8 +491,7 @@ const ProductStocks: React.FC<ProductStocksProps> = ({
           )}
           <Button
             name="hasPreorderEndDate"
-            color="primary"
-            variant="text"
+            variant="tertiary"
             disabled={disabled}
             onClick={() =>
               onFormDataChange({
diff --git a/src/products/components/ProductVariantEndPreorderDialog/ProductVariantEndPreorderDialog.tsx b/src/products/components/ProductVariantEndPreorderDialog/ProductVariantEndPreorderDialog.tsx
index 863d46c857c..08a199fa878 100644
--- a/src/products/components/ProductVariantEndPreorderDialog/ProductVariantEndPreorderDialog.tsx
+++ b/src/products/components/ProductVariantEndPreorderDialog/ProductVariantEndPreorderDialog.tsx
@@ -1,6 +1,6 @@
 import { DialogContentText } from "@material-ui/core";
 import ActionDialog from "@saleor/components/ActionDialog";
-import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton";
+import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import React from "react";
 import { useIntl } from "react-intl";
 
diff --git a/src/storybook/__snapshots__/Stories.test.ts.snap b/src/storybook/__snapshots__/Stories.test.ts.snap
index d4169c88771..0a6c6553ff6 100644
--- a/src/storybook/__snapshots__/Stories.test.ts.snap
+++ b/src/storybook/__snapshots__/Stories.test.ts.snap
@@ -647,7 +647,7 @@ exports[`Storyshots Attributes / Attributes default 1`] = `
           </div>
         </div>
         <div
-          class=""
+          class="BasicAttributeRow-value-id"
           data-test="attribute-value"
         >
           <div
@@ -1351,7 +1351,7 @@ exports[`Storyshots Attributes / Attributes disabled 1`] = `
           </div>
         </div>
         <div
-          class=""
+          class="BasicAttributeRow-value-id"
           data-test="attribute-value"
         >
           <div
@@ -2260,7 +2260,7 @@ exports[`Storyshots Attributes / Attributes selected 1`] = `
           </div>
         </div>
         <div
-          class=""
+          class="BasicAttributeRow-value-id"
           data-test="attribute-value"
         >
           <div
@@ -2349,23 +2349,18 @@ exports[`Storyshots Channels / Cannot define channels availability card default
       class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
     >
       <div
-        class="CardTitle-root-id"
+        class="MuiCardHeader-root-id"
       >
-        <span
-          class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
-        >
-          Availability
-        </span>
         <div
-          class="CardTitle-toolbar-id"
-        />
+          class="MuiCardHeader-content-id"
+        >
+          <span
+            class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
+          >
+            Availability
+          </span>
+        </div>
       </div>
-      <div
-        class="CardTitle-children-id"
-      />
-      <hr
-        class="CardTitle-hr-id"
-      />
       <div
         class="MuiCardContent-root-id"
       >
@@ -5934,21 +5929,12 @@ exports[`Storyshots Generics / Deletable Item default 1`] = `
       focusable="false"
       viewBox="0 0 24 24"
     >
-      <svg
-        fill="none"
-        height="24"
-        viewBox="0 0 24 24"
-        width="24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          clip-rule="evenodd"
-          d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
-          fill="#28234A"
-          fill-opacity="0.6"
-          fill-rule="evenodd"
-        />
-      </svg>
+      <path
+        clip-rule="evenodd"
+        d="M10 1C8.89543 1 8 1.89543 8 3V4H4C3.44772 4 3 4.44772 3 5C3 5.55228 3.44772 6 4 6H20C20.5523 6 21 5.55228 21 5C21 4.44772 20.5523 4 20 4H16V3C16 1.89543 15.1046 1 14 1H10ZM14 4H10V3H14V4ZM7 9C7 8.44772 6.55228 8 6 8C5.44772 8 5 8.44772 5 9V20C5 21.6569 6.34315 23 8 23H16C17.6569 23 19 21.6569 19 20V9C19 8.44772 18.5523 8 18 8C17.4477 8 17 8.44772 17 9V20C17 20.5523 16.5523 21 16 21H8C7.44772 21 7 20.5523 7 20V9ZM10 11C10.5523 11 11 11.4477 11 12V17C11 17.5523 10.5523 18 10 18C9.44772 18 9 17.5523 9 17V12C9 11.4477 9.44772 11 10 11ZM15 12C15 11.4477 14.5523 11 14 11C13.4477 11 13 11.4477 13 12V17C13 17.5523 13.4477 18 14 18C14.5523 18 15 17.5523 15 17V12Z"
+        fill="currentColor"
+        fill-rule="evenodd"
+      />
     </svg>
   </button>
 </div>
@@ -10069,23 +10055,12 @@ exports[`Storyshots Generics / Money formatting default 1`] = `
     <div
       class="MuiCardContent-root-id"
     >
-      <div
-        class="Money-container-id"
+      <span
+        class="Money-currency-id"
       >
-        <div
-          class="MuiTypography-root-id MuiTypography-caption-id"
-        >
-          EUR
-        </div>
-        <div
-          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-        />
-        <div
-          class="MuiTypography-root-id MuiTypography-body1-id"
-        >
-          14.00
-        </div>
-      </div>
+        EUR
+      </span>
+      12,345.68
     </div>
   </div>
 </div>
@@ -18614,12 +18589,6 @@ exports[`Storyshots Shipping / Order value rates default 1`] = `
         </span>
       </div>
     </div>
-    <div
-      class="CardTitle-children-id"
-    />
-    <hr
-      class="CardTitle-hr-id"
-    />
     <div
       class="OrderValue-content-id"
     >
@@ -18649,9 +18618,28 @@ exports[`Storyshots Shipping / Order value rates default 1`] = `
                 focusable="false"
                 viewBox="0 0 24 24"
               >
-                <path
-                  d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
-                />
+                <svg
+                  fill="none"
+                  height="24"
+                  viewBox="0 0 24 24"
+                  width="24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <rect
+                    fill="currentColor"
+                    height="23"
+                    rx="1.5"
+                    width="23"
+                    x="0.5"
+                    y="0.5"
+                  />
+                  <path
+                    clip-rule="evenodd"
+                    d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
+                    fill="var(--background-paper)"
+                    fill-rule="evenodd"
+                  />
+                </svg>
               </svg>
             </span>
           </span>
@@ -18850,12 +18838,6 @@ exports[`Storyshots Shipping / Order value rates loading 1`] = `
         </span>
       </div>
     </div>
-    <div
-      class="CardTitle-children-id"
-    />
-    <hr
-      class="CardTitle-hr-id"
-    />
     <div
       class="OrderValue-content-id"
     >
@@ -18887,9 +18869,28 @@ exports[`Storyshots Shipping / Order value rates loading 1`] = `
                 focusable="false"
                 viewBox="0 0 24 24"
               >
-                <path
-                  d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
-                />
+                <svg
+                  fill="none"
+                  height="24"
+                  viewBox="0 0 24 24"
+                  width="24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <rect
+                    fill="currentColor"
+                    height="23"
+                    rx="1.5"
+                    width="23"
+                    x="0.5"
+                    y="0.5"
+                  />
+                  <path
+                    clip-rule="evenodd"
+                    d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
+                    fill="var(--background-paper)"
+                    fill-rule="evenodd"
+                  />
+                </svg>
               </svg>
             </span>
           </span>
@@ -19082,6 +19083,19 @@ exports[`Storyshots Shipping / Order weight rates default 1`] = `
     >
       <div
         class="MuiCardHeader-content-id"
+      >
+        <span
+          class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
+        >
+          Order Weight
+        </span>
+      </div>
+    </div>
+    <div
+      class="MuiCardContent-root-id"
+    >
+      <label
+        class="MuiFormControlLabel-root-id"
       >
         <span
           aria-disabled="false"
@@ -19103,9 +19117,28 @@ exports[`Storyshots Shipping / Order weight rates default 1`] = `
               focusable="false"
               viewBox="0 0 24 24"
             >
-              <path
-                d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
-              />
+              <svg
+                fill="none"
+                height="24"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <rect
+                  fill="currentColor"
+                  height="23"
+                  rx="1.5"
+                  width="23"
+                  x="0.5"
+                  y="0.5"
+                />
+                <path
+                  clip-rule="evenodd"
+                  d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
+                  fill="var(--background-paper)"
+                  fill-rule="evenodd"
+                />
+              </svg>
             </svg>
           </span>
         </span>
@@ -19210,6 +19243,30 @@ exports[`Storyshots Shipping / Order weight rates default 1`] = `
         </div>
       </div>
     </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Shipping / Order weight rates form errors 1`] = `
+<div
+  style="padding:24px"
+>
+  <div
+    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
+  >
+    <div
+      class="MuiCardHeader-root-id"
+    >
+      <div
+        class="MuiCardHeader-content-id"
+      >
+        <span
+          class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
+        >
+          Order Weight
+        </span>
+      </div>
+    </div>
     <div
       class="MuiCardContent-root-id"
     >
@@ -19236,9 +19293,28 @@ exports[`Storyshots Shipping / Order weight rates default 1`] = `
               focusable="false"
               viewBox="0 0 24 24"
             >
-              <path
-                d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
-              />
+              <svg
+                fill="none"
+                height="24"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <rect
+                  fill="currentColor"
+                  height="23"
+                  rx="1.5"
+                  width="23"
+                  x="0.5"
+                  y="0.5"
+                />
+                <path
+                  clip-rule="evenodd"
+                  d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
+                  fill="var(--background-paper)"
+                  fill-rule="evenodd"
+                />
+              </svg>
             </svg>
           </span>
         </span>
@@ -19405,9 +19481,28 @@ exports[`Storyshots Shipping / Order weight rates loading 1`] = `
               focusable="false"
               viewBox="0 0 24 24"
             >
-              <path
-                d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
-              />
+              <svg
+                fill="none"
+                height="24"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <rect
+                  fill="currentColor"
+                  height="23"
+                  rx="1.5"
+                  width="23"
+                  x="0.5"
+                  y="0.5"
+                />
+                <path
+                  clip-rule="evenodd"
+                  d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
+                  fill="var(--background-paper)"
+                  fill-rule="evenodd"
+                />
+              </svg>
             </svg>
           </span>
         </span>
@@ -19564,9 +19659,28 @@ exports[`Storyshots Shipping / Order weight rates new 1`] = `
               focusable="false"
               viewBox="0 0 24 24"
             >
-              <path
-                d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
-              />
+              <svg
+                fill="none"
+                height="24"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <rect
+                  fill="currentColor"
+                  height="23"
+                  rx="1.5"
+                  width="23"
+                  x="0.5"
+                  y="0.5"
+                />
+                <path
+                  clip-rule="evenodd"
+                  d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
+                  fill="var(--background-paper)"
+                  fill-rule="evenodd"
+                />
+              </svg>
             </svg>
           </span>
         </span>
@@ -20443,12 +20557,6 @@ exports[`Storyshots Shipping / ShippingZoneRatesCreatePage page create price 1`]
                 </span>
               </div>
             </div>
-            <div
-              class="CardTitle-children-id"
-            />
-            <hr
-              class="CardTitle-hr-id"
-            />
             <div
               class="OrderValue-content-id"
             >
@@ -20478,9 +20586,28 @@ exports[`Storyshots Shipping / ShippingZoneRatesCreatePage page create price 1`]
                         focusable="false"
                         viewBox="0 0 24 24"
                       >
-                        <path
-                          d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
-                        />
+                        <svg
+                          fill="none"
+                          height="24"
+                          viewBox="0 0 24 24"
+                          width="24"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <rect
+                            fill="currentColor"
+                            height="23"
+                            rx="1.5"
+                            width="23"
+                            x="0.5"
+                            y="0.5"
+                          />
+                          <path
+                            clip-rule="evenodd"
+                            d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
+                            fill="var(--background-paper)"
+                            fill-rule="evenodd"
+                          />
+                        </svg>
                       </svg>
                     </span>
                   </span>
@@ -21365,9 +21492,28 @@ exports[`Storyshots Shipping / ShippingZoneRatesCreatePage page create weight 1`
                       focusable="false"
                       viewBox="0 0 24 24"
                     >
-                      <path
-                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
-                      />
+                      <svg
+                        fill="none"
+                        height="24"
+                        viewBox="0 0 24 24"
+                        width="24"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <rect
+                          fill="currentColor"
+                          height="23"
+                          rx="1.5"
+                          width="23"
+                          x="0.5"
+                          y="0.5"
+                        />
+                        <path
+                          clip-rule="evenodd"
+                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
+                          fill="var(--background-paper)"
+                          fill-rule="evenodd"
+                        />
+                      </svg>
                     </svg>
                   </span>
                 </span>
@@ -22242,12 +22388,6 @@ exports[`Storyshots Shipping / ShippingZoneRatesCreatePage page loading 1`] = `
                 </span>
               </div>
             </div>
-            <div
-              class="CardTitle-children-id"
-            />
-            <hr
-              class="CardTitle-hr-id"
-            />
             <div
               class="OrderValue-content-id"
             >
@@ -22279,9 +22419,28 @@ exports[`Storyshots Shipping / ShippingZoneRatesCreatePage page loading 1`] = `
                         focusable="false"
                         viewBox="0 0 24 24"
                       >
-                        <path
-                          d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
-                        />
+                        <svg
+                          fill="none"
+                          height="24"
+                          viewBox="0 0 24 24"
+                          width="24"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <rect
+                            fill="currentColor"
+                            height="23"
+                            rx="1.5"
+                            width="23"
+                            x="0.5"
+                            y="0.5"
+                          />
+                          <path
+                            clip-rule="evenodd"
+                            d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
+                            fill="var(--background-paper)"
+                            fill-rule="evenodd"
+                          />
+                        </svg>
                       </svg>
                     </span>
                   </span>
@@ -23203,21 +23362,12 @@ exports[`Storyshots Shipping zones card with options selected 1`] = `
                     focusable="false"
                     viewBox="0 0 24 24"
                   >
-                    <svg
-                      fill="none"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        clip-rule="evenodd"
-                        d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
-                        fill="#28234A"
-                        fill-opacity="0.6"
-                        fill-rule="evenodd"
-                      />
-                    </svg>
+                    <path
+                      clip-rule="evenodd"
+                      d="M10 1C8.89543 1 8 1.89543 8 3V4H4C3.44772 4 3 4.44772 3 5C3 5.55228 3.44772 6 4 6H20C20.5523 6 21 5.55228 21 5C21 4.44772 20.5523 4 20 4H16V3C16 1.89543 15.1046 1 14 1H10ZM14 4H10V3H14V4ZM7 9C7 8.44772 6.55228 8 6 8C5.44772 8 5 8.44772 5 9V20C5 21.6569 6.34315 23 8 23H16C17.6569 23 19 21.6569 19 20V9C19 8.44772 18.5523 8 18 8C17.4477 8 17 8.44772 17 9V20C17 20.5523 16.5523 21 16 21H8C7.44772 21 7 20.5523 7 20V9ZM10 11C10.5523 11 11 11.4477 11 12V17C11 17.5523 10.5523 18 10 18C9.44772 18 9 17.5523 9 17V12C9 11.4477 9.44772 11 10 11ZM15 12C15 11.4477 14.5523 11 14 11C13.4477 11 13 11.4477 13 12V17C13 17.5523 13.4477 18 14 18C14.5523 18 15 17.5523 15 17V12Z"
+                      fill="currentColor"
+                      fill-rule="evenodd"
+                    />
                   </svg>
                 </button>
               </div>
@@ -23243,21 +23393,12 @@ exports[`Storyshots Shipping zones card with options selected 1`] = `
                     focusable="false"
                     viewBox="0 0 24 24"
                   >
-                    <svg
-                      fill="none"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        clip-rule="evenodd"
-                        d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
-                        fill="#28234A"
-                        fill-opacity="0.6"
-                        fill-rule="evenodd"
-                      />
-                    </svg>
+                    <path
+                      clip-rule="evenodd"
+                      d="M10 1C8.89543 1 8 1.89543 8 3V4H4C3.44772 4 3 4.44772 3 5C3 5.55228 3.44772 6 4 6H20C20.5523 6 21 5.55228 21 5C21 4.44772 20.5523 4 20 4H16V3C16 1.89543 15.1046 1 14 1H10ZM14 4H10V3H14V4ZM7 9C7 8.44772 6.55228 8 6 8C5.44772 8 5 8.44772 5 9V20C5 21.6569 6.34315 23 8 23H16C17.6569 23 19 21.6569 19 20V9C19 8.44772 18.5523 8 18 8C17.4477 8 17 8.44772 17 9V20C17 20.5523 16.5523 21 16 21H8C7.44772 21 7 20.5523 7 20V9ZM10 11C10.5523 11 11 11.4477 11 12V17C11 17.5523 10.5523 18 10 18C9.44772 18 9 17.5523 9 17V12C9 11.4477 9.44772 11 10 11ZM15 12C15 11.4477 14.5523 11 14 11C13.4477 11 13 11.4477 13 12V17C13 17.5523 13.4477 18 14 18C14.5523 18 15 17.5523 15 17V12Z"
+                      fill="currentColor"
+                      fill-rule="evenodd"
+                    />
                   </svg>
                 </button>
               </div>
@@ -25545,23 +25686,18 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details default 1`] = `
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
           >
             <div
-              class="CardTitle-root-id"
+              class="MuiCardHeader-root-id"
             >
-              <span
-                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
-              >
-                Events
-              </span>
               <div
-                class="CardTitle-toolbar-id"
-              />
+                class="MuiCardHeader-content-id"
+              >
+                <span
+                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
+                >
+                  Events
+                </span>
+              </div>
             </div>
-            <div
-              class="CardTitle-children-id"
-            />
-            <hr
-              class="CardTitle-hr-id"
-            />
             <div
               class="MuiCardContent-root-id"
             >
@@ -25739,23 +25875,18 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details default 1`] = `
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
           >
             <div
-              class="CardTitle-root-id"
+              class="MuiCardHeader-root-id"
             >
-              <span
-                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
-              >
-                Webhook Status
-              </span>
               <div
-                class="CardTitle-toolbar-id"
-              />
+                class="MuiCardHeader-content-id"
+              >
+                <span
+                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
+                >
+                  Webhook Status
+                </span>
+              </div>
             </div>
-            <div
-              class="CardTitle-children-id"
-            />
-            <hr
-              class="CardTitle-hr-id"
-            />
             <div
               class="MuiCardContent-root-id"
             >
@@ -25787,9 +25918,28 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details default 1`] = `
                       focusable="false"
                       viewBox="0 0 24 24"
                     >
-                      <path
-                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
-                      />
+                      <svg
+                        fill="none"
+                        height="24"
+                        viewBox="0 0 24 24"
+                        width="24"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <rect
+                          fill="currentColor"
+                          height="23"
+                          rx="1.5"
+                          width="23"
+                          x="0.5"
+                          y="0.5"
+                        />
+                        <path
+                          clip-rule="evenodd"
+                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
+                          fill="var(--background-paper)"
+                          fill-rule="evenodd"
+                        />
+                      </svg>
                     </svg>
                   </span>
                 </span>
@@ -25821,7 +25971,7 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details form errors 1`] =
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
         >
           Webhook Test 2 Details
         </div>
@@ -25841,23 +25991,18 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details form errors 1`] =
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
           >
             <div
-              class="CardTitle-root-id"
+              class="MuiCardHeader-root-id"
             >
-              <span
-                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
-              >
-                Webhook Information
-              </span>
               <div
-                class="CardTitle-toolbar-id"
-              />
+                class="MuiCardHeader-content-id"
+              >
+                <span
+                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
+                >
+                  Webhook Information
+                </span>
+              </div>
             </div>
-            <div
-              class="CardTitle-children-id"
-            />
-            <hr
-              class="CardTitle-hr-id"
-            />
             <div
               class="MuiCardContent-root-id"
             >
@@ -26011,89 +26156,104 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details form errors 1`] =
                 <span
                   class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                 >
-                  Webhook Status
+                  Events
                 </span>
               </div>
             </div>
             <div
               class="MuiCardContent-root-id"
             >
+              <div
+                class="MuiTypography-root-id MuiTypography-caption-id"
+              >
+                Synchronous events
+              </div>
+              <div
+                class="VerticalSpacer-container-id VerticalSpacer-container-id"
+              />
               <div
                 class="MuiTypography-root-id MuiTypography-body1-id"
               >
-                If you want to disable this webhook please uncheck the box below.
+                Assign permissions to register synchronous events for this webhook.
               </div>
-              <label
-                class="MuiFormControlLabel-root-id"
+              <div
+                class="VerticalSpacer-container-id VerticalSpacer-container-id"
+              />
+              <div
+                class="MultiAutocompleteSelectField-container-id"
+                data-test="syncEvents"
               >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
+                <div
+                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                 >
-                  <span
-                    class="MuiIconButton-label-id"
+                  <label
+                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
+                    data-shrink="false"
+                  >
+                    Registered events
+                  </label>
+                  <div
+                    aria-autocomplete="list"
+                    aria-expanded="false"
+                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
+                    role="combobox"
                   >
                     <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      name="isActive"
-                      type="checkbox"
+                      aria-invalid="false"
+                      autocomplete="off"
+                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
+                      type="text"
+                      value=""
                     />
-                    <svg
+                    <div
+                      class="MultiAutocompleteSelectField-adornment-id"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root-id"
+                        focusable="false"
+                        viewBox="0 0 24 24"
+                      >
+                        <g
+                          style="fill-rule:evenodd"
+                        >
+                          <path
+                            d="M7 10l5 5 5-5z"
+                          />
+                        </g>
+                      </svg>
+                    </div>
+                    <fieldset
                       aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
+                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                     >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                >
-                  Webhook is active
-                </span>
-              </label>
-            </div>
-          </div>
-          <div
-            class="FormSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Events
-                </span>
+                      <legend
+                        class="PrivateNotchedOutline-legendLabelled-id"
+                      >
+                        <span>
+                          Registered events
+                        </span>
+                      </legend>
+                    </fieldset>
+                  </div>
+                </div>
               </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
+              <div
+                class="MultiAutocompleteSelectField-chipContainer-id"
+              />
+              <div
+                class="VerticalSpacer-container-id VerticalSpacer-container-id"
+              />
+              <hr
+                class="Hr-root-id"
+              />
+              <div
+                class="VerticalSpacer-container-id VerticalSpacer-container-id"
+              />
               <div
                 class="MuiTypography-root-id MuiTypography-caption-id"
               >
-                Synchronous events
+                Asynchronous events
               </div>
               <div
                 class="VerticalSpacer-container-id VerticalSpacer-container-id"
@@ -26101,101 +26261,14 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details form errors 1`] =
               <div
                 class="MuiTypography-root-id MuiTypography-body1-id"
               >
-                Assign permissions to register synchronous events for this webhook.
+                Assign permissions to register asynchronous events for this webhook.
               </div>
               <div
                 class="VerticalSpacer-container-id VerticalSpacer-container-id"
               />
               <div
                 class="MultiAutocompleteSelectField-container-id"
-                data-test="syncEvents"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                    data-shrink="false"
-                  >
-                    Registered events
-                  </label>
-                  <div
-                    aria-autocomplete="list"
-                    aria-expanded="false"
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                    role="combobox"
-                  >
-                    <input
-                      aria-invalid="false"
-                      autocomplete="off"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      type="text"
-                      value=""
-                    />
-                    <div
-                      class="MultiAutocompleteSelectField-adornment-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <g
-                          style="fill-rule:evenodd"
-                        >
-                          <path
-                            d="M7 10l5 5 5-5z"
-                          />
-                        </g>
-                      </svg>
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Registered events
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="MultiAutocompleteSelectField-chipContainer-id"
-              />
-              <div
-                class="VerticalSpacer-container-id VerticalSpacer-container-id"
-              />
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="VerticalSpacer-container-id VerticalSpacer-container-id"
-              />
-              <div
-                class="MuiTypography-root-id MuiTypography-caption-id"
-              >
-                Asynchronous events
-              </div>
-              <div
-                class="VerticalSpacer-container-id VerticalSpacer-container-id"
-              />
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Assign permissions to register asynchronous events for this webhook.
-              </div>
-              <div
-                class="VerticalSpacer-container-id VerticalSpacer-container-id"
-              />
-              <div
-                class="MultiAutocompleteSelectField-container-id"
-                data-test="asyncEvents"
+                data-test="asyncEvents"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -26264,23 +26337,18 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details form errors 1`] =
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
           >
             <div
-              class="CardTitle-root-id"
+              class="MuiCardHeader-root-id"
             >
-              <span
-                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
-              >
-                Webhook Status
-              </span>
               <div
-                class="CardTitle-toolbar-id"
-              />
+                class="MuiCardHeader-content-id"
+              >
+                <span
+                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
+                >
+                  Webhook Status
+                </span>
+              </div>
             </div>
-            <div
-              class="CardTitle-children-id"
-            />
-            <hr
-              class="CardTitle-hr-id"
-            />
             <div
               class="MuiCardContent-root-id"
             >
@@ -26312,9 +26380,28 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details form errors 1`] =
                       focusable="false"
                       viewBox="0 0 24 24"
                     >
-                      <path
-                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
-                      />
+                      <svg
+                        fill="none"
+                        height="24"
+                        viewBox="0 0 24 24"
+                        width="24"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <rect
+                          fill="currentColor"
+                          height="23"
+                          rx="1.5"
+                          width="23"
+                          x="0.5"
+                          y="0.5"
+                        />
+                        <path
+                          clip-rule="evenodd"
+                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
+                          fill="var(--background-paper)"
+                          fill-rule="evenodd"
+                        />
+                      </svg>
                     </svg>
                   </span>
                 </span>
@@ -26346,7 +26433,7 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details loading 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
         >
           Create Webhook
         </div>
@@ -26366,23 +26453,18 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details loading 1`] = `
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
           >
             <div
-              class="CardTitle-root-id"
+              class="MuiCardHeader-root-id"
             >
-              <span
-                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
-              >
-                Webhook Information
-              </span>
               <div
-                class="CardTitle-toolbar-id"
-              />
+                class="MuiCardHeader-content-id"
+              >
+                <span
+                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
+                >
+                  Webhook Information
+                </span>
+              </div>
             </div>
-            <div
-              class="CardTitle-children-id"
-            />
-            <hr
-              class="CardTitle-hr-id"
-            />
             <div
               class="MuiCardContent-root-id"
             >
@@ -26526,23 +26608,18 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details loading 1`] = `
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
           >
             <div
-              class="CardTitle-root-id"
+              class="MuiCardHeader-root-id"
             >
-              <span
-                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
-              >
-                Events
-              </span>
               <div
-                class="CardTitle-toolbar-id"
-              />
+                class="MuiCardHeader-content-id"
+              >
+                <span
+                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
+                >
+                  Events
+                </span>
+              </div>
             </div>
-            <div
-              class="CardTitle-children-id"
-            />
-            <hr
-              class="CardTitle-hr-id"
-            />
             <div
               class="MuiCardContent-root-id"
             >
@@ -26720,23 +26797,18 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details loading 1`] = `
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
           >
             <div
-              class="CardTitle-root-id"
+              class="MuiCardHeader-root-id"
             >
-              <span
-                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
-              >
-                Webhook Status
-              </span>
               <div
-                class="CardTitle-toolbar-id"
-              />
+                class="MuiCardHeader-content-id"
+              >
+                <span
+                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
+                >
+                  Webhook Status
+                </span>
+              </div>
             </div>
-            <div
-              class="CardTitle-children-id"
-            />
-            <hr
-              class="CardTitle-hr-id"
-            />
             <div
               class="MuiCardContent-root-id"
             >
@@ -26769,8 +26841,17 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details loading 1`] = `
                       focusable="false"
                       viewBox="0 0 24 24"
                     >
-                      <path
-                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+                      <rect
+                        fill="transparent"
+                        height="22"
+                        rx="2"
+                        ry="2"
+                        stroke="currentColor"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        width="22"
+                        x="1"
+                        y="1"
                       />
                     </svg>
                   </span>
@@ -26835,12 +26916,6 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details undefined 1`] = `
                 </span>
               </div>
             </div>
-            <div
-              class="CardTitle-children-id"
-            />
-            <hr
-              class="CardTitle-hr-id"
-            />
             <div
               class="MuiCardContent-root-id"
             >
@@ -26981,23 +27056,18 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details undefined 1`] = `
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
           >
             <div
-              class="CardTitle-root-id"
+              class="MuiCardHeader-root-id"
             >
-              <span
-                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
-              >
-                Events
-              </span>
               <div
-                class="CardTitle-toolbar-id"
-              />
+                class="MuiCardHeader-content-id"
+              >
+                <span
+                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
+                >
+                  Events
+                </span>
+              </div>
             </div>
-            <div
-              class="CardTitle-children-id"
-            />
-            <hr
-              class="CardTitle-hr-id"
-            />
             <div
               class="MuiCardContent-root-id"
             >
@@ -27175,23 +27245,18 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details undefined 1`] = `
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
           >
             <div
-              class="CardTitle-root-id"
+              class="MuiCardHeader-root-id"
             >
-              <span
-                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
-              >
-                Webhook Status
-              </span>
               <div
-                class="CardTitle-toolbar-id"
-              />
+                class="MuiCardHeader-content-id"
+              >
+                <span
+                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
+                >
+                  Webhook Status
+                </span>
+              </div>
             </div>
-            <div
-              class="CardTitle-children-id"
-            />
-            <hr
-              class="CardTitle-hr-id"
-            />
             <div
               class="MuiCardContent-root-id"
             >
@@ -27222,8 +27287,17 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details undefined 1`] = `
                       focusable="false"
                       viewBox="0 0 24 24"
                     >
-                      <path
-                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+                      <rect
+                        fill="transparent"
+                        height="22"
+                        rx="2"
+                        ry="2"
+                        stroke="currentColor"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        width="22"
+                        x="1"
+                        y="1"
                       />
                     </svg>
                   </span>
@@ -27256,7 +27330,7 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details unnamed 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
         >
           Unnamed Webhook Details
         </div>
@@ -27276,23 +27350,18 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details unnamed 1`] = `
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
           >
             <div
-              class="CardTitle-root-id"
+              class="MuiCardHeader-root-id"
             >
-              <span
-                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
-              >
-                Webhook Information
-              </span>
               <div
-                class="CardTitle-toolbar-id"
-              />
+                class="MuiCardHeader-content-id"
+              >
+                <span
+                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
+                >
+                  Webhook Information
+                </span>
+              </div>
             </div>
-            <div
-              class="CardTitle-children-id"
-            />
-            <hr
-              class="CardTitle-hr-id"
-            />
             <div
               class="MuiCardContent-root-id"
             >
@@ -27433,23 +27502,18 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details unnamed 1`] = `
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
           >
             <div
-              class="CardTitle-root-id"
+              class="MuiCardHeader-root-id"
             >
-              <span
-                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
-              >
-                Events
-              </span>
               <div
-                class="CardTitle-toolbar-id"
-              />
+                class="MuiCardHeader-content-id"
+              >
+                <span
+                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
+                >
+                  Events
+                </span>
+              </div>
             </div>
-            <div
-              class="CardTitle-children-id"
-            />
-            <hr
-              class="CardTitle-hr-id"
-            />
             <div
               class="MuiCardContent-root-id"
             >
@@ -36446,20 +36510,6 @@ exports[`Storyshots Views / Authentication / Log in disabled 1`] = `
         <div
           class="FormSpacer-spacer-id"
         />
-        <div
-          class="MuiTypography-root-id MuiTypography-body1-id"
-        >
-          Forgot password? 
-          <a
-            class="LoginCard-link-id"
-            data-test-id="reset-password-link"
-          >
-            Use this link to recover it
-          </a>
-        </div>
-        <div
-          class="FormSpacer-spacer-id"
-        />
         <hr
           class="MuiDivider-root-id"
         />
@@ -36594,102 +36644,9 @@ exports[`Storyshots Views / Authentication / Log in error external login 1`] = `
             </div>
           </div>
           <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id LoginCard-loginButton-id MuiButton-containedPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
-            data-test="submit"
-            disabled=""
-            tabindex="-1"
-            type="submit"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              Login
-            </span>
-          </button>
-        </div>
-        <div
-          class="FormSpacer-spacer-id"
-        />
-        <div
-          class="MuiTypography-root-id MuiTypography-body1-id"
-        >
-          Forgot password? 
-          <a
-            class="LoginCard-link-id"
-            data-test-id="reset-password-link"
-          >
-            Use this link to recover it
-          </a>
-        </div>
-        <div
-          class="FormSpacer-spacer-id"
-        />
-        <hr
-          class="MuiDivider-root-id"
-        />
-        <div
-          class="FormSpacer-spacer-id"
-        />
-        <div
-          class="MuiTypography-root-id MuiTypography-body1-id"
-        >
-          or login using
-        </div>
-        <div
-          class="FormSpacer-spacer-id"
-        />
-        <button
-          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-disabled-id MuiButton-fullWidth-id MuiButtonBase-disabled-id"
-          data-test="external-authentication"
-          disabled=""
-          tabindex="-1"
-          type="button"
-        >
-          <span
-            class="MuiButton-label-id"
-          >
-            Example auth plugin
-          </span>
-        </button>
-      </form>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Authentication / Log in error external login 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <form>
-        <div
-          class="LoginCard-panel-id"
-          data-test="loginErrorMessage"
-        >
-          <div
-            class="MuiTypography-root-id MuiTypography-caption-id"
-          >
-            Sorry, login went wrong. Please try again.
-          </div>
-        </div>
-        <div
-          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-        >
-          <label
-            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-            data-shrink="false"
-          >
-            E-mail Address
-          </label>
-          <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+            class="MuiButtonBase-root-id IconButton-secondary-id Login-showPasswordBtn-id"
+            tabindex="0"
+            type="button"
           >
             <svg
               aria-hidden="true"
@@ -36730,20 +36687,6 @@ exports[`Storyshots Views / Authentication / Log in error external login 1`] = `
         <div
           class="FormSpacer-spacer-id"
         />
-        <div
-          class="MuiTypography-root-id MuiTypography-body1-id"
-        >
-          Forgot password? 
-          <a
-            class="LoginCard-link-id"
-            data-test-id="reset-password-link"
-          >
-            Use this link to recover it
-          </a>
-        </div>
-        <div
-          class="FormSpacer-spacer-id"
-        />
         <hr
           class="MuiDivider-root-id"
         />
@@ -36920,20 +36863,6 @@ exports[`Storyshots Views / Authentication / Log in error login 1`] = `
         <div
           class="FormSpacer-spacer-id"
         />
-        <div
-          class="MuiTypography-root-id MuiTypography-body1-id"
-        >
-          Forgot password? 
-          <a
-            class="LoginCard-link-id"
-            data-test-id="reset-password-link"
-          >
-            Use this link to recover it
-          </a>
-        </div>
-        <div
-          class="FormSpacer-spacer-id"
-        />
         <hr
           class="MuiDivider-root-id"
         />
@@ -37093,7 +37022,7 @@ exports[`Storyshots Views / Authentication / Reset password default 1`] = `
           class="FormSpacer-spacer-id"
         />
         <button
-          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id ResetPasswordPage-submit-id MuiButton-containedPrimary-id"
+          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Login-submit-id MuiButton-containedPrimary-id"
           data-test="submit"
           tabindex="0"
           type="submit"
@@ -37203,7 +37132,7 @@ exports[`Storyshots Views / Authentication / Reset password error 1`] = `
           class="FormSpacer-spacer-id"
         />
         <button
-          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id ResetPasswordPage-submit-id MuiButton-containedPrimary-id"
+          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Login-submit-id MuiButton-containedPrimary-id"
           data-test="submit"
           tabindex="0"
           type="submit"
@@ -37309,7 +37238,7 @@ exports[`Storyshots Views / Authentication / Reset password loading 1`] = `
           class="FormSpacer-spacer-id"
         />
         <button
-          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id ResetPasswordPage-submit-id MuiButton-containedPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
+          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Login-submit-id MuiButton-containedPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
           data-test="submit"
           disabled=""
           tabindex="-1"
@@ -46318,21 +46247,12 @@ exports[`Storyshots Views / Channels / Channel details default 1`] = `
                           focusable="false"
                           viewBox="0 0 24 24"
                         >
-                          <svg
-                            fill="none"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              clip-rule="evenodd"
-                              d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
-                              fill="#28234A"
-                              fill-opacity="0.6"
-                              fill-rule="evenodd"
-                            />
-                          </svg>
+                          <path
+                            clip-rule="evenodd"
+                            d="M10 1C8.89543 1 8 1.89543 8 3V4H4C3.44772 4 3 4.44772 3 5C3 5.55228 3.44772 6 4 6H20C20.5523 6 21 5.55228 21 5C21 4.44772 20.5523 4 20 4H16V3C16 1.89543 15.1046 1 14 1H10ZM14 4H10V3H14V4ZM7 9C7 8.44772 6.55228 8 6 8C5.44772 8 5 8.44772 5 9V20C5 21.6569 6.34315 23 8 23H16C17.6569 23 19 21.6569 19 20V9C19 8.44772 18.5523 8 18 8C17.4477 8 17 8.44772 17 9V20C17 20.5523 16.5523 21 16 21H8C7.44772 21 7 20.5523 7 20V9ZM10 11C10.5523 11 11 11.4477 11 12V17C11 17.5523 10.5523 18 10 18C9.44772 18 9 17.5523 9 17V12C9 11.4477 9.44772 11 10 11ZM15 12C15 11.4477 14.5523 11 14 11C13.4477 11 13 11.4477 13 12V17C13 17.5523 13.4477 18 14 18C14.5523 18 15 17.5523 15 17V12Z"
+                            fill="currentColor"
+                            fill-rule="evenodd"
+                          />
                         </svg>
                       </button>
                     </div>
@@ -46358,21 +46278,12 @@ exports[`Storyshots Views / Channels / Channel details default 1`] = `
                           focusable="false"
                           viewBox="0 0 24 24"
                         >
-                          <svg
-                            fill="none"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              clip-rule="evenodd"
-                              d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
-                              fill="#28234A"
-                              fill-opacity="0.6"
-                              fill-rule="evenodd"
-                            />
-                          </svg>
+                          <path
+                            clip-rule="evenodd"
+                            d="M10 1C8.89543 1 8 1.89543 8 3V4H4C3.44772 4 3 4.44772 3 5C3 5.55228 3.44772 6 4 6H20C20.5523 6 21 5.55228 21 5C21 4.44772 20.5523 4 20 4H16V3C16 1.89543 15.1046 1 14 1H10ZM14 4H10V3H14V4ZM7 9C7 8.44772 6.55228 8 6 8C5.44772 8 5 8.44772 5 9V20C5 21.6569 6.34315 23 8 23H16C17.6569 23 19 21.6569 19 20V9C19 8.44772 18.5523 8 18 8C17.4477 8 17 8.44772 17 9V20C17 20.5523 16.5523 21 16 21H8C7.44772 21 7 20.5523 7 20V9ZM10 11C10.5523 11 11 11.4477 11 12V17C11 17.5523 10.5523 18 10 18C9.44772 18 9 17.5523 9 17V12C9 11.4477 9.44772 11 10 11ZM15 12C15 11.4477 14.5523 11 14 11C13.4477 11 13 11.4477 13 12V17C13 17.5523 13.4477 18 14 18C14.5523 18 15 17.5523 15 17V12Z"
+                            fill="currentColor"
+                            fill-rule="evenodd"
+                          />
                         </svg>
                       </button>
                     </div>
@@ -46834,21 +46745,12 @@ exports[`Storyshots Views / Channels / Channel details disabled 1`] = `
                           focusable="false"
                           viewBox="0 0 24 24"
                         >
-                          <svg
-                            fill="none"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              clip-rule="evenodd"
-                              d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
-                              fill="#28234A"
-                              fill-opacity="0.6"
-                              fill-rule="evenodd"
-                            />
-                          </svg>
+                          <path
+                            clip-rule="evenodd"
+                            d="M10 1C8.89543 1 8 1.89543 8 3V4H4C3.44772 4 3 4.44772 3 5C3 5.55228 3.44772 6 4 6H20C20.5523 6 21 5.55228 21 5C21 4.44772 20.5523 4 20 4H16V3C16 1.89543 15.1046 1 14 1H10ZM14 4H10V3H14V4ZM7 9C7 8.44772 6.55228 8 6 8C5.44772 8 5 8.44772 5 9V20C5 21.6569 6.34315 23 8 23H16C17.6569 23 19 21.6569 19 20V9C19 8.44772 18.5523 8 18 8C17.4477 8 17 8.44772 17 9V20C17 20.5523 16.5523 21 16 21H8C7.44772 21 7 20.5523 7 20V9ZM10 11C10.5523 11 11 11.4477 11 12V17C11 17.5523 10.5523 18 10 18C9.44772 18 9 17.5523 9 17V12C9 11.4477 9.44772 11 10 11ZM15 12C15 11.4477 14.5523 11 14 11C13.4477 11 13 11.4477 13 12V17C13 17.5523 13.4477 18 14 18C14.5523 18 15 17.5523 15 17V12Z"
+                            fill="currentColor"
+                            fill-rule="evenodd"
+                          />
                         </svg>
                       </button>
                     </div>
@@ -46874,21 +46776,12 @@ exports[`Storyshots Views / Channels / Channel details disabled 1`] = `
                           focusable="false"
                           viewBox="0 0 24 24"
                         >
-                          <svg
-                            fill="none"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              clip-rule="evenodd"
-                              d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
-                              fill="#28234A"
-                              fill-opacity="0.6"
-                              fill-rule="evenodd"
-                            />
-                          </svg>
+                          <path
+                            clip-rule="evenodd"
+                            d="M10 1C8.89543 1 8 1.89543 8 3V4H4C3.44772 4 3 4.44772 3 5C3 5.55228 3.44772 6 4 6H20C20.5523 6 21 5.55228 21 5C21 4.44772 20.5523 4 20 4H16V3C16 1.89543 15.1046 1 14 1H10ZM14 4H10V3H14V4ZM7 9C7 8.44772 6.55228 8 6 8C5.44772 8 5 8.44772 5 9V20C5 21.6569 6.34315 23 8 23H16C17.6569 23 19 21.6569 19 20V9C19 8.44772 18.5523 8 18 8C17.4477 8 17 8.44772 17 9V20C17 20.5523 16.5523 21 16 21H8C7.44772 21 7 20.5523 7 20V9ZM10 11C10.5523 11 11 11.4477 11 12V17C11 17.5523 10.5523 18 10 18C9.44772 18 9 17.5523 9 17V12C9 11.4477 9.44772 11 10 11ZM15 12C15 11.4477 14.5523 11 14 11C13.4477 11 13 11.4477 13 12V17C13 17.5523 13.4477 18 14 18C14.5523 18 15 17.5523 15 17V12Z"
+                            fill="currentColor"
+                            fill-rule="evenodd"
+                          />
                         </svg>
                       </button>
                     </div>
@@ -47346,21 +47239,12 @@ exports[`Storyshots Views / Channels / Channel details loading 1`] = `
                           focusable="false"
                           viewBox="0 0 24 24"
                         >
-                          <svg
-                            fill="none"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              clip-rule="evenodd"
-                              d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
-                              fill="#28234A"
-                              fill-opacity="0.6"
-                              fill-rule="evenodd"
-                            />
-                          </svg>
+                          <path
+                            clip-rule="evenodd"
+                            d="M10 1C8.89543 1 8 1.89543 8 3V4H4C3.44772 4 3 4.44772 3 5C3 5.55228 3.44772 6 4 6H20C20.5523 6 21 5.55228 21 5C21 4.44772 20.5523 4 20 4H16V3C16 1.89543 15.1046 1 14 1H10ZM14 4H10V3H14V4ZM7 9C7 8.44772 6.55228 8 6 8C5.44772 8 5 8.44772 5 9V20C5 21.6569 6.34315 23 8 23H16C17.6569 23 19 21.6569 19 20V9C19 8.44772 18.5523 8 18 8C17.4477 8 17 8.44772 17 9V20C17 20.5523 16.5523 21 16 21H8C7.44772 21 7 20.5523 7 20V9ZM10 11C10.5523 11 11 11.4477 11 12V17C11 17.5523 10.5523 18 10 18C9.44772 18 9 17.5523 9 17V12C9 11.4477 9.44772 11 10 11ZM15 12C15 11.4477 14.5523 11 14 11C13.4477 11 13 11.4477 13 12V17C13 17.5523 13.4477 18 14 18C14.5523 18 15 17.5523 15 17V12Z"
+                            fill="currentColor"
+                            fill-rule="evenodd"
+                          />
                         </svg>
                       </button>
                     </div>
@@ -47386,21 +47270,12 @@ exports[`Storyshots Views / Channels / Channel details loading 1`] = `
                           focusable="false"
                           viewBox="0 0 24 24"
                         >
-                          <svg
-                            fill="none"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              clip-rule="evenodd"
-                              d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
-                              fill="#28234A"
-                              fill-opacity="0.6"
-                              fill-rule="evenodd"
-                            />
-                          </svg>
+                          <path
+                            clip-rule="evenodd"
+                            d="M10 1C8.89543 1 8 1.89543 8 3V4H4C3.44772 4 3 4.44772 3 5C3 5.55228 3.44772 6 4 6H20C20.5523 6 21 5.55228 21 5C21 4.44772 20.5523 4 20 4H16V3C16 1.89543 15.1046 1 14 1H10ZM14 4H10V3H14V4ZM7 9C7 8.44772 6.55228 8 6 8C5.44772 8 5 8.44772 5 9V20C5 21.6569 6.34315 23 8 23H16C17.6569 23 19 21.6569 19 20V9C19 8.44772 18.5523 8 18 8C17.4477 8 17 8.44772 17 9V20C17 20.5523 16.5523 21 16 21H8C7.44772 21 7 20.5523 7 20V9ZM10 11C10.5523 11 11 11.4477 11 12V17C11 17.5523 10.5523 18 10 18C9.44772 18 9 17.5523 9 17V12C9 11.4477 9.44772 11 10 11ZM15 12C15 11.4477 14.5523 11 14 11C13.4477 11 13 11.4477 13 12V17C13 17.5523 13.4477 18 14 18C14.5523 18 15 17.5523 15 17V12Z"
+                            fill="currentColor"
+                            fill-rule="evenodd"
+                          />
                         </svg>
                       </button>
                     </div>
@@ -47858,21 +47733,12 @@ exports[`Storyshots Views / Channels / Channel details with data 1`] = `
                           focusable="false"
                           viewBox="0 0 24 24"
                         >
-                          <svg
-                            fill="none"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              clip-rule="evenodd"
-                              d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
-                              fill="#28234A"
-                              fill-opacity="0.6"
-                              fill-rule="evenodd"
-                            />
-                          </svg>
+                          <path
+                            clip-rule="evenodd"
+                            d="M10 1C8.89543 1 8 1.89543 8 3V4H4C3.44772 4 3 4.44772 3 5C3 5.55228 3.44772 6 4 6H20C20.5523 6 21 5.55228 21 5C21 4.44772 20.5523 4 20 4H16V3C16 1.89543 15.1046 1 14 1H10ZM14 4H10V3H14V4ZM7 9C7 8.44772 6.55228 8 6 8C5.44772 8 5 8.44772 5 9V20C5 21.6569 6.34315 23 8 23H16C17.6569 23 19 21.6569 19 20V9C19 8.44772 18.5523 8 18 8C17.4477 8 17 8.44772 17 9V20C17 20.5523 16.5523 21 16 21H8C7.44772 21 7 20.5523 7 20V9ZM10 11C10.5523 11 11 11.4477 11 12V17C11 17.5523 10.5523 18 10 18C9.44772 18 9 17.5523 9 17V12C9 11.4477 9.44772 11 10 11ZM15 12C15 11.4477 14.5523 11 14 11C13.4477 11 13 11.4477 13 12V17C13 17.5523 13.4477 18 14 18C14.5523 18 15 17.5523 15 17V12Z"
+                            fill="currentColor"
+                            fill-rule="evenodd"
+                          />
                         </svg>
                       </button>
                     </div>
@@ -47898,21 +47764,12 @@ exports[`Storyshots Views / Channels / Channel details with data 1`] = `
                           focusable="false"
                           viewBox="0 0 24 24"
                         >
-                          <svg
-                            fill="none"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              clip-rule="evenodd"
-                              d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
-                              fill="#28234A"
-                              fill-opacity="0.6"
-                              fill-rule="evenodd"
-                            />
-                          </svg>
+                          <path
+                            clip-rule="evenodd"
+                            d="M10 1C8.89543 1 8 1.89543 8 3V4H4C3.44772 4 3 4.44772 3 5C3 5.55228 3.44772 6 4 6H20C20.5523 6 21 5.55228 21 5C21 4.44772 20.5523 4 20 4H16V3C16 1.89543 15.1046 1 14 1H10ZM14 4H10V3H14V4ZM7 9C7 8.44772 6.55228 8 6 8C5.44772 8 5 8.44772 5 9V20C5 21.6569 6.34315 23 8 23H16C17.6569 23 19 21.6569 19 20V9C19 8.44772 18.5523 8 18 8C17.4477 8 17 8.44772 17 9V20C17 20.5523 16.5523 21 16 21H8C7.44772 21 7 20.5523 7 20V9ZM10 11C10.5523 11 11 11.4477 11 12V17C11 17.5523 10.5523 18 10 18C9.44772 18 9 17.5523 9 17V12C9 11.4477 9.44772 11 10 11ZM15 12C15 11.4477 14.5523 11 14 11C13.4477 11 13 11.4477 13 12V17C13 17.5523 13.4477 18 14 18C14.5523 18 15 17.5523 15 17V12Z"
+                            fill="currentColor"
+                            fill-rule="evenodd"
+                          />
                         </svg>
                       </button>
                     </div>
@@ -48376,37 +48233,30 @@ exports[`Storyshots Views / Channels / Channel details with errors 1`] = `
                           focusable="false"
                           viewBox="0 0 24 24"
                         >
-                          <svg
-                            fill="none"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              clip-rule="evenodd"
-                              d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
-                              fill="#28234A"
-                              fill-opacity="0.6"
-                              fill-rule="evenodd"
-                            />
-                          </svg>
+                          <path
+                            clip-rule="evenodd"
+                            d="M10 1C8.89543 1 8 1.89543 8 3V4H4C3.44772 4 3 4.44772 3 5C3 5.55228 3.44772 6 4 6H20C20.5523 6 21 5.55228 21 5C21 4.44772 20.5523 4 20 4H16V3C16 1.89543 15.1046 1 14 1H10ZM14 4H10V3H14V4ZM7 9C7 8.44772 6.55228 8 6 8C5.44772 8 5 8.44772 5 9V20C5 21.6569 6.34315 23 8 23H16C17.6569 23 19 21.6569 19 20V9C19 8.44772 18.5523 8 18 8C17.4477 8 17 8.44772 17 9V20C17 20.5523 16.5523 21 16 21H8C7.44772 21 7 20.5523 7 20V9ZM10 11C10.5523 11 11 11.4477 11 12V17C11 17.5523 10.5523 18 10 18C9.44772 18 9 17.5523 9 17V12C9 11.4477 9.44772 11 10 11ZM15 12C15 11.4477 14.5523 11 14 11C13.4477 11 13 11.4477 13 12V17C13 17.5523 13.4477 18 14 18C14.5523 18 15 17.5523 15 17V12Z"
+                            fill="currentColor"
+                            fill-rule="evenodd"
+                          />
                         </svg>
-                      </div>
+                      </button>
                     </div>
                     <hr
                       class="MuiDivider-root-id"
                     />
                     <div
-                      class="ShippingZoneItem-container-id"
+                      class="ShippingZonesCard-container-id"
                     >
                       <div
                         class="MuiTypography-root-id MuiTypography-body1-id"
                       >
                         USA
                       </div>
-                      <div
-                        class="DeletableItem-container-id"
+                      <button
+                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
+                        tabindex="0"
+                        type="button"
                       >
                         <svg
                           aria-hidden="true"
@@ -48414,23 +48264,14 @@ exports[`Storyshots Views / Channels / Channel details with errors 1`] = `
                           focusable="false"
                           viewBox="0 0 24 24"
                         >
-                          <svg
-                            fill="none"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              clip-rule="evenodd"
-                              d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
-                              fill="#28234A"
-                              fill-opacity="0.6"
-                              fill-rule="evenodd"
-                            />
-                          </svg>
+                          <path
+                            clip-rule="evenodd"
+                            d="M10 1C8.89543 1 8 1.89543 8 3V4H4C3.44772 4 3 4.44772 3 5C3 5.55228 3.44772 6 4 6H20C20.5523 6 21 5.55228 21 5C21 4.44772 20.5523 4 20 4H16V3C16 1.89543 15.1046 1 14 1H10ZM14 4H10V3H14V4ZM7 9C7 8.44772 6.55228 8 6 8C5.44772 8 5 8.44772 5 9V20C5 21.6569 6.34315 23 8 23H16C17.6569 23 19 21.6569 19 20V9C19 8.44772 18.5523 8 18 8C17.4477 8 17 8.44772 17 9V20C17 20.5523 16.5523 21 16 21H8C7.44772 21 7 20.5523 7 20V9ZM10 11C10.5523 11 11 11.4477 11 12V17C11 17.5523 10.5523 18 10 18C9.44772 18 9 17.5523 9 17V12C9 11.4477 9.44772 11 10 11ZM15 12C15 11.4477 14.5523 11 14 11C13.4477 11 13 11.4477 13 12V17C13 17.5523 13.4477 18 14 18C14.5523 18 15 17.5523 15 17V12Z"
+                            fill="currentColor"
+                            fill-rule="evenodd"
+                          />
                         </svg>
-                      </div>
+                      </button>
                     </div>
                     <hr
                       class="MuiDivider-root-id"
@@ -48445,25 +48286,22 @@ exports[`Storyshots Views / Channels / Channel details with errors 1`] = `
                         Add Shipping Zones
                       </a>
                       <button
-                        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
+                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
+                        color="primary"
                         data-test-id="add-shipping-zone-button"
                         tabindex="0"
                         type="button"
                       >
-                        <span
-                          class="MuiIconButton-label-id"
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          viewBox="0 0 24 24"
                         >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
-                            />
-                          </svg>
-                        </span>
+                          <path
+                            d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
+                          />
+                        </svg>
                       </button>
                     </div>
                   </div>
@@ -48491,23 +48329,18 @@ exports[`Storyshots Views / Channels / Channel details without editable currency
           class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
         >
           <div
-            class="CardTitle-root-id"
+            class="MuiCardHeader-root-id"
           >
-            <span
-              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
-            >
-              General Information
-            </span>
             <div
-              class="CardTitle-toolbar-id"
-            />
+              class="MuiCardHeader-content-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
+              >
+                General Information
+              </span>
+            </div>
           </div>
-          <div
-            class="CardTitle-children-id"
-          />
-          <hr
-            class="CardTitle-hr-id"
-          />
           <div
             class="MuiCardContent-root-id"
           >
@@ -48597,23 +48430,18 @@ exports[`Storyshots Views / Channels / Channel details without editable currency
           class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
         >
           <div
-            class="CardTitle-root-id"
+            class="MuiCardHeader-root-id"
           >
-            <span
-              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
-            >
-              Channel Settings
-            </span>
             <div
-              class="CardTitle-toolbar-id"
-            />
+              class="MuiCardHeader-content-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
+              >
+                Channel Settings
+              </span>
+            </div>
           </div>
-          <div
-            class="CardTitle-children-id"
-          />
-          <hr
-            class="CardTitle-hr-id"
-          />
           <div
             class="MuiCardContent-root-id"
           >
@@ -48697,23 +48525,18 @@ exports[`Storyshots Views / Channels / Channel details without editable currency
           class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
         >
           <div
-            class="CardTitle-root-id"
+            class="MuiCardHeader-root-id"
           >
-            <span
-              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
-            >
-              Channel Status
-            </span>
             <div
-              class="CardTitle-toolbar-id"
-            />
+              class="MuiCardHeader-content-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
+              >
+                Channel Status
+              </span>
+            </div>
           </div>
-          <div
-            class="CardTitle-children-id"
-          />
-          <hr
-            class="CardTitle-hr-id"
-          />
           <div
             class="MuiCardContent-root-id"
           >
@@ -48728,7 +48551,7 @@ exports[`Storyshots Views / Channels / Channel details without editable currency
               Active
             </div>
             <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id ChannelComponents-activeBtn-id MuiButton-textPrimary-id"
+              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id ChannelComponents-activeBtn-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
               tabindex="0"
               type="button"
             >
@@ -48747,23 +48570,18 @@ exports[`Storyshots Views / Channels / Channel details without editable currency
           class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
         >
           <div
-            class="CardTitle-root-id"
+            class="MuiCardHeader-root-id"
           >
-            <span
-              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
-            >
-              Shipping Zones
-            </span>
             <div
-              class="CardTitle-toolbar-id"
-            />
+              class="MuiCardHeader-content-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
+              >
+                Shipping Zones
+              </span>
+            </div>
           </div>
-          <div
-            class="CardTitle-children-id"
-          />
-          <hr
-            class="CardTitle-hr-id"
-          />
           <div
             class="MuiCardContent-root-id"
           >
@@ -48774,7 +48592,7 @@ exports[`Storyshots Views / Channels / Channel details without editable currency
             </div>
           </div>
           <div
-            class="MuiPaper-root-id MuiAccordion-root-id ShippingZonesCardExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
+            class="MuiPaper-root-id MuiAccordion-root-id Expander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
           >
             <div
               class="ShippingZonesListHeader-container-id"
@@ -48842,15 +48660,17 @@ exports[`Storyshots Views / Channels / Channel details without editable currency
                       class="MuiDivider-root-id"
                     />
                     <div
-                      class="ShippingZoneItem-container-id"
+                      class="ShippingZonesCard-container-id"
                     >
                       <div
                         class="MuiTypography-root-id MuiTypography-body1-id"
                       >
                         Europe
                       </div>
-                      <div
-                        class="DeletableItem-container-id"
+                      <button
+                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
+                        tabindex="0"
+                        type="button"
                       >
                         <svg
                           aria-hidden="true"
@@ -48858,21 +48678,12 @@ exports[`Storyshots Views / Channels / Channel details without editable currency
                           focusable="false"
                           viewBox="0 0 24 24"
                         >
-                          <svg
-                            fill="none"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              clip-rule="evenodd"
-                              d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
-                              fill="#28234A"
-                              fill-opacity="0.6"
-                              fill-rule="evenodd"
-                            />
-                          </svg>
+                          <path
+                            clip-rule="evenodd"
+                            d="M10 1C8.89543 1 8 1.89543 8 3V4H4C3.44772 4 3 4.44772 3 5C3 5.55228 3.44772 6 4 6H20C20.5523 6 21 5.55228 21 5C21 4.44772 20.5523 4 20 4H16V3C16 1.89543 15.1046 1 14 1H10ZM14 4H10V3H14V4ZM7 9C7 8.44772 6.55228 8 6 8C5.44772 8 5 8.44772 5 9V20C5 21.6569 6.34315 23 8 23H16C17.6569 23 19 21.6569 19 20V9C19 8.44772 18.5523 8 18 8C17.4477 8 17 8.44772 17 9V20C17 20.5523 16.5523 21 16 21H8C7.44772 21 7 20.5523 7 20V9ZM10 11C10.5523 11 11 11.4477 11 12V17C11 17.5523 10.5523 18 10 18C9.44772 18 9 17.5523 9 17V12C9 11.4477 9.44772 11 10 11ZM15 12C15 11.4477 14.5523 11 14 11C13.4477 11 13 11.4477 13 12V17C13 17.5523 13.4477 18 14 18C14.5523 18 15 17.5523 15 17V12Z"
+                            fill="currentColor"
+                            fill-rule="evenodd"
+                          />
                         </svg>
                       </button>
                     </div>
@@ -48898,21 +48709,12 @@ exports[`Storyshots Views / Channels / Channel details without editable currency
                           focusable="false"
                           viewBox="0 0 24 24"
                         >
-                          <svg
-                            fill="none"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              clip-rule="evenodd"
-                              d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
-                              fill="#28234A"
-                              fill-opacity="0.6"
-                              fill-rule="evenodd"
-                            />
-                          </svg>
+                          <path
+                            clip-rule="evenodd"
+                            d="M10 1C8.89543 1 8 1.89543 8 3V4H4C3.44772 4 3 4.44772 3 5C3 5.55228 3.44772 6 4 6H20C20.5523 6 21 5.55228 21 5C21 4.44772 20.5523 4 20 4H16V3C16 1.89543 15.1046 1 14 1H10ZM14 4H10V3H14V4ZM7 9C7 8.44772 6.55228 8 6 8C5.44772 8 5 8.44772 5 9V20C5 21.6569 6.34315 23 8 23H16C17.6569 23 19 21.6569 19 20V9C19 8.44772 18.5523 8 18 8C17.4477 8 17 8.44772 17 9V20C17 20.5523 16.5523 21 16 21H8C7.44772 21 7 20.5523 7 20V9ZM10 11C10.5523 11 11 11.4477 11 12V17C11 17.5523 10.5523 18 10 18C9.44772 18 9 17.5523 9 17V12C9 11.4477 9.44772 11 10 11ZM15 12C15 11.4477 14.5523 11 14 11C13.4477 11 13 11.4477 13 12V17C13 17.5523 13.4477 18 14 18C14.5523 18 15 17.5523 15 17V12Z"
+                            fill="currentColor"
+                            fill-rule="evenodd"
+                          />
                         </svg>
                       </button>
                     </div>
@@ -66826,25 +66628,14 @@ exports[`Storyshots Views / Customers / Customer details default 1`] = `
                       </div>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id CustomerOrders-textRight-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id CustomerOrders-textRight-id MuiTableCell-alignRight-id"
                     >
-                      <div
-                        class="Money-container-id Money-containerRight-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                        >
-                          1215.89
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                 </tbody>
@@ -67030,7 +66821,7 @@ exports[`Storyshots Views / Customers / Customer details default 1`] = `
                 class="MuiCardHeader-action-id"
               >
                 <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                   data-test-id="manageAddresses"
                   tabindex="0"
                   type="button"
@@ -67151,28 +66942,18 @@ exports[`Storyshots Views / Customers / Customer details default 1`] = `
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
           >
             <div
-              class="CardTitle-root-id"
-            >
-              <span
-                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
-              >
-                Gift Cards
-              </span>
-              <div
-                class="CardTitle-toolbar-id"
-              />
-            </div>
-            <div
-              class="CardTitle-children-id"
+              class="MuiCardHeader-root-id"
             >
-              There are no gift cards assigned to this customer
               <div
-                class="VerticalSpacer-container-id VerticalSpacer-container-id"
-              />
+                class="MuiCardHeader-content-id"
+              >
+                <span
+                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
+                >
+                  Gift Cards
+                </span>
+              </div>
             </div>
-            <hr
-              class="CardTitle-hr-id"
-            />
             <span
               class="Skeleton-skeleton-id"
               data-test-id="skeleton"
@@ -67605,25 +67386,14 @@ exports[`Storyshots Views / Customers / Customer details different addresses 1`]
                       </div>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id CustomerOrders-textRight-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id CustomerOrders-textRight-id MuiTableCell-alignRight-id"
                     >
-                      <div
-                        class="Money-container-id Money-containerRight-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                        >
-                          1215.89
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                 </tbody>
@@ -67809,7 +67579,7 @@ exports[`Storyshots Views / Customers / Customer details different addresses 1`]
                 class="MuiCardHeader-action-id"
               >
                 <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                   data-test-id="manageAddresses"
                   tabindex="0"
                   type="button"
@@ -67970,28 +67740,18 @@ exports[`Storyshots Views / Customers / Customer details different addresses 1`]
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
           >
             <div
-              class="CardTitle-root-id"
-            >
-              <span
-                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
-              >
-                Gift Cards
-              </span>
-              <div
-                class="CardTitle-toolbar-id"
-              />
-            </div>
-            <div
-              class="CardTitle-children-id"
+              class="MuiCardHeader-root-id"
             >
-              There are no gift cards assigned to this customer
               <div
-                class="VerticalSpacer-container-id VerticalSpacer-container-id"
-              />
+                class="MuiCardHeader-content-id"
+              >
+                <span
+                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
+                >
+                  Gift Cards
+                </span>
+              </div>
             </div>
-            <hr
-              class="CardTitle-hr-id"
-            />
             <span
               class="Skeleton-skeleton-id"
               data-test-id="skeleton"
@@ -68439,25 +68199,14 @@ exports[`Storyshots Views / Customers / Customer details form errors 1`] = `
                       </div>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id CustomerOrders-textRight-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id CustomerOrders-textRight-id MuiTableCell-alignRight-id"
                     >
-                      <div
-                        class="Money-container-id Money-containerRight-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                        >
-                          1215.89
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                 </tbody>
@@ -68643,7 +68392,7 @@ exports[`Storyshots Views / Customers / Customer details form errors 1`] = `
                 class="MuiCardHeader-action-id"
               >
                 <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                   data-test-id="manageAddresses"
                   tabindex="0"
                   type="button"
@@ -68764,28 +68513,18 @@ exports[`Storyshots Views / Customers / Customer details form errors 1`] = `
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
           >
             <div
-              class="CardTitle-root-id"
-            >
-              <span
-                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
-              >
-                Gift Cards
-              </span>
-              <div
-                class="CardTitle-toolbar-id"
-              />
-            </div>
-            <div
-              class="CardTitle-children-id"
+              class="MuiCardHeader-root-id"
             >
-              There are no gift cards assigned to this customer
               <div
-                class="VerticalSpacer-container-id VerticalSpacer-container-id"
-              />
+                class="MuiCardHeader-content-id"
+              >
+                <span
+                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
+                >
+                  Gift Cards
+                </span>
+              </div>
             </div>
-            <hr
-              class="CardTitle-hr-id"
-            />
             <span
               class="Skeleton-skeleton-id"
               data-test-id="skeleton"
@@ -69220,7 +68959,7 @@ exports[`Storyshots Views / Customers / Customer details loading 1`] = `
                       </span>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id CustomerOrders-textRight-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id CustomerOrders-textRight-id MuiTableCell-alignRight-id"
                     >
                       <span
                         class="Skeleton-skeleton-id"
@@ -69377,7 +69116,7 @@ exports[`Storyshots Views / Customers / Customer details loading 1`] = `
                 class="MuiCardHeader-action-id"
               >
                 <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
+                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id MuiButton-disabled-id MuiButtonBase-disabled-id"
                   data-test-id="manageAddresses"
                   disabled=""
                   tabindex="-1"
@@ -69467,28 +69206,18 @@ exports[`Storyshots Views / Customers / Customer details loading 1`] = `
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
           >
             <div
-              class="CardTitle-root-id"
-            >
-              <span
-                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
-              >
-                Gift Cards
-              </span>
-              <div
-                class="CardTitle-toolbar-id"
-              />
-            </div>
-            <div
-              class="CardTitle-children-id"
+              class="MuiCardHeader-root-id"
             >
-              There are no gift cards assigned to this customer
               <div
-                class="VerticalSpacer-container-id VerticalSpacer-container-id"
-              />
+                class="MuiCardHeader-content-id"
+              >
+                <span
+                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
+                >
+                  Gift Cards
+                </span>
+              </div>
             </div>
-            <hr
-              class="CardTitle-hr-id"
-            />
             <span
               class="Skeleton-skeleton-id"
               data-test-id="skeleton"
@@ -69921,25 +69650,14 @@ exports[`Storyshots Views / Customers / Customer details never logged 1`] = `
                       </div>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id CustomerOrders-textRight-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id CustomerOrders-textRight-id MuiTableCell-alignRight-id"
                     >
-                      <div
-                        class="Money-container-id Money-containerRight-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                        >
-                          1215.89
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                 </tbody>
@@ -70125,7 +69843,7 @@ exports[`Storyshots Views / Customers / Customer details never logged 1`] = `
                 class="MuiCardHeader-action-id"
               >
                 <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                   data-test-id="manageAddresses"
                   tabindex="0"
                   type="button"
@@ -70240,28 +69958,18 @@ exports[`Storyshots Views / Customers / Customer details never logged 1`] = `
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
           >
             <div
-              class="CardTitle-root-id"
-            >
-              <span
-                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
-              >
-                Gift Cards
-              </span>
-              <div
-                class="CardTitle-toolbar-id"
-              />
-            </div>
-            <div
-              class="CardTitle-children-id"
+              class="MuiCardHeader-root-id"
             >
-              There are no gift cards assigned to this customer
               <div
-                class="VerticalSpacer-container-id VerticalSpacer-container-id"
-              />
+                class="MuiCardHeader-content-id"
+              >
+                <span
+                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
+                >
+                  Gift Cards
+                </span>
+              </div>
             </div>
-            <hr
-              class="CardTitle-hr-id"
-            />
             <span
               class="Skeleton-skeleton-id"
               data-test-id="skeleton"
@@ -70694,25 +70402,14 @@ exports[`Storyshots Views / Customers / Customer details never placed order 1`]
                       </div>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id CustomerOrders-textRight-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id CustomerOrders-textRight-id MuiTableCell-alignRight-id"
                     >
-                      <div
-                        class="Money-container-id Money-containerRight-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                        >
-                          1215.89
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                 </tbody>
@@ -70898,7 +70595,7 @@ exports[`Storyshots Views / Customers / Customer details never placed order 1`]
                 class="MuiCardHeader-action-id"
               >
                 <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                   data-test-id="manageAddresses"
                   tabindex="0"
                   type="button"
@@ -71013,28 +70710,18 @@ exports[`Storyshots Views / Customers / Customer details never placed order 1`]
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
           >
             <div
-              class="CardTitle-root-id"
-            >
-              <span
-                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
-              >
-                Gift Cards
-              </span>
-              <div
-                class="CardTitle-toolbar-id"
-              />
-            </div>
-            <div
-              class="CardTitle-children-id"
+              class="MuiCardHeader-root-id"
             >
-              There are no gift cards assigned to this customer
               <div
-                class="VerticalSpacer-container-id VerticalSpacer-container-id"
-              />
+                class="MuiCardHeader-content-id"
+              >
+                <span
+                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
+                >
+                  Gift Cards
+                </span>
+              </div>
             </div>
-            <hr
-              class="CardTitle-hr-id"
-            />
             <span
               class="Skeleton-skeleton-id"
               data-test-id="skeleton"
@@ -71467,25 +71154,14 @@ exports[`Storyshots Views / Customers / Customer details no address at all 1`] =
                       </div>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id CustomerOrders-textRight-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id CustomerOrders-textRight-id MuiTableCell-alignRight-id"
                     >
-                      <div
-                        class="Money-container-id Money-containerRight-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                        >
-                          1215.89
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                 </tbody>
@@ -71671,7 +71347,7 @@ exports[`Storyshots Views / Customers / Customer details no address at all 1`] =
                 class="MuiCardHeader-action-id"
               >
                 <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                   data-test-id="manageAddresses"
                   tabindex="0"
                   type="button"
@@ -71764,28 +71440,18 @@ exports[`Storyshots Views / Customers / Customer details no address at all 1`] =
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
           >
             <div
-              class="CardTitle-root-id"
-            >
-              <span
-                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
-              >
-                Gift Cards
-              </span>
-              <div
-                class="CardTitle-toolbar-id"
-              />
-            </div>
-            <div
-              class="CardTitle-children-id"
+              class="MuiCardHeader-root-id"
             >
-              There are no gift cards assigned to this customer
               <div
-                class="VerticalSpacer-container-id VerticalSpacer-container-id"
-              />
+                class="MuiCardHeader-content-id"
+              >
+                <span
+                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
+                >
+                  Gift Cards
+                </span>
+              </div>
             </div>
-            <hr
-              class="CardTitle-hr-id"
-            />
             <span
               class="Skeleton-skeleton-id"
               data-test-id="skeleton"
@@ -72218,25 +71884,14 @@ exports[`Storyshots Views / Customers / Customer details no default billing addr
                       </div>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id CustomerOrders-textRight-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id CustomerOrders-textRight-id MuiTableCell-alignRight-id"
                     >
-                      <div
-                        class="Money-container-id Money-containerRight-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                        >
-                          1215.89
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                 </tbody>
@@ -72422,7 +72077,7 @@ exports[`Storyshots Views / Customers / Customer details no default billing addr
                 class="MuiCardHeader-action-id"
               >
                 <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                   data-test-id="manageAddresses"
                   tabindex="0"
                   type="button"
@@ -72543,28 +72198,18 @@ exports[`Storyshots Views / Customers / Customer details no default billing addr
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
           >
             <div
-              class="CardTitle-root-id"
-            >
-              <span
-                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
-              >
-                Gift Cards
-              </span>
-              <div
-                class="CardTitle-toolbar-id"
-              />
-            </div>
-            <div
-              class="CardTitle-children-id"
+              class="MuiCardHeader-root-id"
             >
-              There are no gift cards assigned to this customer
               <div
-                class="VerticalSpacer-container-id VerticalSpacer-container-id"
-              />
+                class="MuiCardHeader-content-id"
+              >
+                <span
+                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
+                >
+                  Gift Cards
+                </span>
+              </div>
             </div>
-            <hr
-              class="CardTitle-hr-id"
-            />
             <span
               class="Skeleton-skeleton-id"
               data-test-id="skeleton"
@@ -72997,25 +72642,14 @@ exports[`Storyshots Views / Customers / Customer details no default shipping add
                       </div>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id CustomerOrders-textRight-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id CustomerOrders-textRight-id MuiTableCell-alignRight-id"
                     >
-                      <div
-                        class="Money-container-id Money-containerRight-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                        >
-                          1215.89
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                 </tbody>
@@ -73201,7 +72835,7 @@ exports[`Storyshots Views / Customers / Customer details no default shipping add
                 class="MuiCardHeader-action-id"
               >
                 <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                   data-test-id="manageAddresses"
                   tabindex="0"
                   type="button"
@@ -73322,28 +72956,18 @@ exports[`Storyshots Views / Customers / Customer details no default shipping add
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
           >
             <div
-              class="CardTitle-root-id"
-            >
-              <span
-                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
-              >
-                Gift Cards
-              </span>
-              <div
-                class="CardTitle-toolbar-id"
-              />
-            </div>
-            <div
-              class="CardTitle-children-id"
+              class="MuiCardHeader-root-id"
             >
-              There are no gift cards assigned to this customer
               <div
-                class="VerticalSpacer-container-id VerticalSpacer-container-id"
-              />
+                class="MuiCardHeader-content-id"
+              >
+                <span
+                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
+                >
+                  Gift Cards
+                </span>
+              </div>
             </div>
-            <hr
-              class="CardTitle-hr-id"
-            />
             <span
               class="Skeleton-skeleton-id"
               data-test-id="skeleton"
@@ -87067,8 +86691,17 @@ exports[`Storyshots Views / Discounts / Sale list default 1`] = `
                       focusable="false"
                       viewBox="0 0 24 24"
                     >
-                      <path
-                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+                      <rect
+                        fill="transparent"
+                        height="22"
+                        rx="2"
+                        ry="2"
+                        stroke="currentColor"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        width="22"
+                        x="1"
+                        y="1"
                       />
                     </svg>
                   </span>
@@ -87098,23 +86731,12 @@ exports[`Storyshots Views / Discounts / Sale list default 1`] = `
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colValue-id"
               >
-                <div
-                  class="Money-container-id"
+                <span
+                  class="Money-currency-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    1.00
-                  </div>
-                </div>
+                  USD
+                </span>
+                12,345.68
               </td>
             </tr>
             <tr
@@ -93770,23 +93392,12 @@ exports[`Storyshots Views / Discounts / Voucher details default 1`] = `
               <div
                 class="MuiTypography-root-id MuiTypography-body1-id"
               >
-                <div
-                  class="Money-container-id"
+                <span
+                  class="Money-currency-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    1.00
-                  </div>
-                </div>
+                  USD
+                </span>
+                12,345.68
               </div>
               <div
                 class="CardSpacer-spacer-id"
@@ -93837,23 +93448,12 @@ exports[`Storyshots Views / Discounts / Voucher details default 1`] = `
               <div
                 class="MuiTypography-root-id MuiTypography-body1-id"
               >
-                <div
-                  class="Money-container-id"
+                <span
+                  class="Money-currency-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    1.00
-                  </div>
-                </div>
+                  USD
+                </span>
+                12,345.68
               </div>
               <div
                 class="FormSpacer-spacer-id"
@@ -96139,23 +95739,12 @@ exports[`Storyshots Views / Discounts / Voucher details form errors 1`] = `
               <div
                 class="MuiTypography-root-id MuiTypography-body1-id"
               >
-                <div
-                  class="Money-container-id"
+                <span
+                  class="Money-currency-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    1.00
-                  </div>
-                </div>
+                  USD
+                </span>
+                12,345.68
               </div>
               <div
                 class="CardSpacer-spacer-id"
@@ -96206,23 +95795,12 @@ exports[`Storyshots Views / Discounts / Voucher details form errors 1`] = `
               <div
                 class="MuiTypography-root-id MuiTypography-body1-id"
               >
-                <div
-                  class="Money-container-id"
+                <span
+                  class="Money-currency-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    1.00
-                  </div>
-                </div>
+                  USD
+                </span>
+                12,345.68
               </div>
               <div
                 class="FormSpacer-spacer-id"
@@ -98848,23 +98426,12 @@ exports[`Storyshots Views / Discounts / Voucher list default 1`] = `
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colMinSpent-id"
               >
-                <div
-                  class="Money-container-id"
+                <span
+                  class="Money-currency-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    1.00
-                  </div>
-                </div>
+                  USD
+                </span>
+                12,345.68
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colStart-id"
@@ -98941,23 +98508,12 @@ exports[`Storyshots Views / Discounts / Voucher list default 1`] = `
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colMinSpent-id"
               >
-                <div
-                  class="Money-container-id"
+                <span
+                  class="Money-currency-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    1.00
-                  </div>
-                </div>
+                  USD
+                </span>
+                12,345.68
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colStart-id"
@@ -98978,23 +98534,12 @@ exports[`Storyshots Views / Discounts / Voucher list default 1`] = `
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colValue-id"
               >
-                <div
-                  class="Money-container-id"
+                <span
+                  class="Money-currency-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    1.00
-                  </div>
-                </div>
+                  USD
+                </span>
+                12,345.68
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colUses-id"
@@ -100518,23 +100063,12 @@ exports[`Storyshots Views / HomePage default 1`] = `
                 <div
                   class="MuiTypography-root-id HomeAnalyticsCard-value-id MuiTypography-h4-id MuiTypography-colorTextPrimary-id"
                 >
-                  <div
-                    class="Money-container-id"
+                  <span
+                    class="Money-currency-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-caption-id"
-                    >
-                      USD
-                    </div>
-                    <div
-                      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                    />
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      57.15
-                    </div>
-                  </div>
+                    USD
+                  </span>
+                  12,345.68
                 </div>
               </div>
               <div
@@ -100791,23 +100325,12 @@ exports[`Storyshots Views / HomePage default 1`] = `
                     <div
                       class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          37.65
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </div>
                   </td>
                 </tr>
@@ -101495,23 +101018,12 @@ exports[`Storyshots Views / HomePage no data 1`] = `
                 <div
                   class="MuiTypography-root-id HomeAnalyticsCard-value-id MuiTypography-h4-id MuiTypography-colorTextPrimary-id"
                 >
-                  <div
-                    class="Money-container-id"
+                  <span
+                    class="Money-currency-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-caption-id"
-                    >
-                      USD
-                    </div>
-                    <div
-                      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                    />
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      57.15
-                    </div>
-                  </div>
+                    USD
+                  </span>
+                  12,345.68
                 </div>
               </div>
               <div
@@ -101895,23 +101407,12 @@ exports[`Storyshots Views / HomePage order permissions 1`] = `
                 <div
                   class="MuiTypography-root-id HomeAnalyticsCard-value-id MuiTypography-h4-id MuiTypography-colorTextPrimary-id"
                 >
-                  <div
-                    class="Money-container-id"
+                  <span
+                    class="Money-currency-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-caption-id"
-                    >
-                      USD
-                    </div>
-                    <div
-                      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                    />
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      57.15
-                    </div>
-                  </div>
+                    USD
+                  </span>
+                  12,345.68
                 </div>
               </div>
               <div
@@ -105568,25 +105069,14 @@ exports[`Storyshots Views / Orders / Draft order list default 1`] = `
                 Laura Stone 1 2
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
               >
-                <div
-                  class="Money-container-id Money-containerRight-id"
+                <span
+                  class="Money-currency-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                  >
-                    305.17
-                  </div>
-                </div>
+                  USD
+                </span>
+                12,345.68
               </td>
             </tr>
             <tr
@@ -105652,25 +105142,14 @@ exports[`Storyshots Views / Orders / Draft order list default 1`] = `
                 Elizabeth Vaughn
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
               >
-                <div
-                  class="Money-container-id Money-containerRight-id"
+                <span
+                  class="Money-currency-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                  >
-                    1215.89
-                  </div>
-                </div>
+                  USD
+                </span>
+                12,345.68
               </td>
             </tr>
             <tr
@@ -105736,25 +105215,14 @@ exports[`Storyshots Views / Orders / Draft order list default 1`] = `
                 david.lawson@example.com
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
               >
-                <div
-                  class="Money-container-id Money-containerRight-id"
+                <span
+                  class="Money-currency-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                  >
-                    321.71
-                  </div>
-                </div>
+                  USD
+                </span>
+                12,345.68
               </td>
             </tr>
             <tr
@@ -105820,25 +105288,14 @@ exports[`Storyshots Views / Orders / Draft order list default 1`] = `
                 Aaron Randall
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
               >
-                <div
-                  class="Money-container-id Money-containerRight-id"
+                <span
+                  class="Money-currency-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                  >
-                    271.95
-                  </div>
-                </div>
+                  USD
+                </span>
+                12,345.68
               </td>
             </tr>
             <tr
@@ -105904,25 +105361,14 @@ exports[`Storyshots Views / Orders / Draft order list default 1`] = `
                 Laura Jensen
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
               >
-                <div
-                  class="Money-container-id Money-containerRight-id"
+                <span
+                  class="Money-currency-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                  >
-                    335.84
-                  </div>
-                </div>
+                  USD
+                </span>
+                12,345.68
               </td>
             </tr>
             <tr
@@ -105988,25 +105434,14 @@ exports[`Storyshots Views / Orders / Draft order list default 1`] = `
                 Jenna Villa
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
               >
-                <div
-                  class="Money-container-id Money-containerRight-id"
+                <span
+                  class="Money-currency-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                  >
-                    1042.15
-                  </div>
-                </div>
+                  USD
+                </span>
+                12,345.68
               </td>
             </tr>
             <tr
@@ -106072,25 +105507,14 @@ exports[`Storyshots Views / Orders / Draft order list default 1`] = `
                 Wesley Davis
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
               >
-                <div
-                  class="Money-container-id Money-containerRight-id"
+                <span
+                  class="Money-currency-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                  >
-                    213.69
-                  </div>
-                </div>
+                  USD
+                </span>
+                12,345.68
               </td>
             </tr>
             <tr
@@ -106156,25 +105580,14 @@ exports[`Storyshots Views / Orders / Draft order list default 1`] = `
                 Anthony Gonzalez
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
               >
-                <div
-                  class="Money-container-id Money-containerRight-id"
+                <span
+                  class="Money-currency-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                  >
-                    367.03
-                  </div>
-                </div>
+                  USD
+                </span>
+                12,345.68
               </td>
             </tr>
             <tr
@@ -106240,25 +105653,14 @@ exports[`Storyshots Views / Orders / Draft order list default 1`] = `
                 Denise Freeman
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
               >
-                <div
-                  class="Money-container-id Money-containerRight-id"
+                <span
+                  class="Money-currency-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                  >
-                    298.76
-                  </div>
-                </div>
+                  USD
+                </span>
+                12,345.68
               </td>
             </tr>
             <tr
@@ -106324,25 +105726,14 @@ exports[`Storyshots Views / Orders / Draft order list default 1`] = `
                 James Ball
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
               >
-                <div
-                  class="Money-container-id Money-containerRight-id"
+                <span
+                  class="Money-currency-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                  >
-                    663.69
-                  </div>
-                </div>
+                  USD
+                </span>
+                12,345.68
               </td>
             </tr>
             <tr
@@ -106408,25 +105799,14 @@ exports[`Storyshots Views / Orders / Draft order list default 1`] = `
                 Michael Martinez
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
               >
-                <div
-                  class="Money-container-id Money-containerRight-id"
+                <span
+                  class="Money-currency-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                  >
-                    280.41
-                  </div>
-                </div>
+                  USD
+                </span>
+                12,345.68
               </td>
             </tr>
             <tr
@@ -106492,25 +105872,14 @@ exports[`Storyshots Views / Orders / Draft order list default 1`] = `
                 Melissa Simon
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
               >
-                <div
-                  class="Money-container-id Money-containerRight-id"
+                <span
+                  class="Money-currency-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                  >
-                    234.93
-                  </div>
-                </div>
+                  USD
+                </span>
+                12,345.68
               </td>
             </tr>
             <tr
@@ -106576,25 +105945,14 @@ exports[`Storyshots Views / Orders / Draft order list default 1`] = `
                 Justin Mccoy
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
               >
-                <div
-                  class="Money-container-id Money-containerRight-id"
+                <span
+                  class="Money-currency-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                  >
-                    485.19
-                  </div>
-                </div>
+                  USD
+                </span>
+                12,345.68
               </td>
             </tr>
             <tr
@@ -106660,25 +106018,14 @@ exports[`Storyshots Views / Orders / Draft order list default 1`] = `
                 Anthony Gonzalez
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
               >
-                <div
-                  class="Money-container-id Money-containerRight-id"
+                <span
+                  class="Money-currency-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                  >
-                    223.54
-                  </div>
-                </div>
+                  USD
+                </span>
+                12,345.68
               </td>
             </tr>
             <tr
@@ -106744,25 +106091,14 @@ exports[`Storyshots Views / Orders / Draft order list default 1`] = `
                 Bradley Ford
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
               >
-                <div
-                  class="Money-container-id Money-containerRight-id"
+                <span
+                  class="Money-currency-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                  >
-                    237.55
-                  </div>
-                </div>
+                  USD
+                </span>
+                12,345.68
               </td>
             </tr>
             <tr
@@ -106828,193 +106164,160 @@ exports[`Storyshots Views / Orders / Draft order list default 1`] = `
                 David Lawson
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
               >
-                <div
-                  class="Money-container-id Money-containerRight-id"
+                <span
+                  class="Money-currency-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
+                  USD
+                </span>
+                12,345.68
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
+              data-test-id="draft-order-table-row"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <span
+                  aria-disabled="false"
+                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
+                >
+                  <span
+                    class="MuiIconButton-label-id"
                   >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
+                    <input
+                      class="PrivateSwitchBase-input-id"
+                      data-indeterminate="false"
+                      type="checkbox"
+                    />
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      viewBox="0 0 24 24"
+                    >
+                      <rect
+                        fill="transparent"
+                        height="22"
+                        rx="2"
+                        ry="2"
+                        stroke="currentColor"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        width="22"
+                        x="1"
+                        y="1"
+                      />
+                    </svg>
+                  </span>
+                </span>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
+              >
+                #4
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
+              >
+                <time
+                  class=""
+                  datetime="1536658647230"
+                  title="Sep 11, 2018 5:37 AM"
+                >
+                  in a month
+                </time>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
+              >
+                Lauren Watson
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
+              >
+                <span
+                  class="Money-currency-id"
+                >
+                  USD
+                </span>
+                12,345.68
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
+              data-test-id="draft-order-table-row"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <span
+                  aria-disabled="false"
+                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
+                >
+                  <span
+                    class="MuiIconButton-label-id"
                   >
-                    453.55
-                  </div>
-                </div>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
-              data-test-id="draft-order-table-row"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
-              >
-                #4
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
-              >
-                <time
-                  class=""
-                  datetime="1536658647230"
-                  title="Sep 11, 2018 5:37 AM"
-                >
-                  in a month
-                </time>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
-              >
-                Lauren Watson
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id"
-              >
-                <div
-                  class="Money-container-id Money-containerRight-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                  >
-                    812.67
-                  </div>
-                </div>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
-              data-test-id="draft-order-table-row"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
-              >
-                #3
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
-              >
-                <time
-                  class=""
-                  datetime="1536658646972"
-                  title="Sep 11, 2018 5:37 AM"
-                >
-                  in a month
-                </time>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
-              >
-                Mark Lee
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id"
-              >
-                <div
-                  class="Money-container-id Money-containerRight-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                  >
-                    481.41
-                  </div>
-                </div>
+                    <input
+                      class="PrivateSwitchBase-input-id"
+                      data-indeterminate="false"
+                      type="checkbox"
+                    />
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      viewBox="0 0 24 24"
+                    >
+                      <rect
+                        fill="transparent"
+                        height="22"
+                        rx="2"
+                        ry="2"
+                        stroke="currentColor"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        width="22"
+                        x="1"
+                        y="1"
+                      />
+                    </svg>
+                  </span>
+                </span>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
+              >
+                #3
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
+              >
+                <time
+                  class=""
+                  datetime="1536658646972"
+                  title="Sep 11, 2018 5:37 AM"
+                >
+                  in a month
+                </time>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
+              >
+                Mark Lee
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
+              >
+                <span
+                  class="Money-currency-id"
+                >
+                  USD
+                </span>
+                12,345.68
               </td>
             </tr>
             <tr
@@ -107080,25 +106383,14 @@ exports[`Storyshots Views / Orders / Draft order list default 1`] = `
                 Kara Murphy
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
               >
-                <div
-                  class="Money-container-id Money-containerRight-id"
+                <span
+                  class="Money-currency-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                  >
-                    569.19
-                  </div>
-                </div>
+                  USD
+                </span>
+                12,345.68
               </td>
             </tr>
             <tr
@@ -107164,25 +106456,14 @@ exports[`Storyshots Views / Orders / Draft order list default 1`] = `
                 Curtis Bailey
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
               >
-                <div
-                  class="Money-container-id Money-containerRight-id"
+                <span
+                  class="Money-currency-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                  >
-                    557.00
-                  </div>
-                </div>
+                  USD
+                </span>
+                12,345.68
               </td>
             </tr>
           </tbody>
@@ -107667,109 +106948,87 @@ exports[`Storyshots Views / Orders / Draft order list limits reached 1`] = `
                 Laura Stone 1 2
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
               >
-                <div
-                  class="Money-container-id Money-containerRight-id"
+                <span
+                  class="Money-currency-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
+                  USD
+                </span>
+                12,345.68
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
+              data-test-id="draft-order-table-row"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <span
+                  aria-disabled="false"
+                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
+                >
+                  <span
+                    class="MuiIconButton-label-id"
                   >
-                    305.17
-                  </div>
-                </div>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
-              data-test-id="draft-order-table-row"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
-              >
-                #19
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
-              >
-                <time
-                  class=""
-                  datetime="1536658650124"
-                  title="Sep 11, 2018 5:37 AM"
-                >
-                  in a month
-                </time>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
-              >
-                Elizabeth Vaughn
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id"
-              >
-                <div
-                  class="Money-container-id Money-containerRight-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                  >
-                    1215.89
-                  </div>
-                </div>
+                    <input
+                      class="PrivateSwitchBase-input-id"
+                      data-indeterminate="false"
+                      type="checkbox"
+                    />
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      viewBox="0 0 24 24"
+                    >
+                      <rect
+                        fill="transparent"
+                        height="22"
+                        rx="2"
+                        ry="2"
+                        stroke="currentColor"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        width="22"
+                        x="1"
+                        y="1"
+                      />
+                    </svg>
+                  </span>
+                </span>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
+              >
+                #19
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
+              >
+                <time
+                  class=""
+                  datetime="1536658650124"
+                  title="Sep 11, 2018 5:37 AM"
+                >
+                  in a month
+                </time>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
+              >
+                Elizabeth Vaughn
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
+              >
+                <span
+                  class="Money-currency-id"
+                >
+                  USD
+                </span>
+                12,345.68
               </td>
             </tr>
             <tr
@@ -107835,25 +107094,14 @@ exports[`Storyshots Views / Orders / Draft order list limits reached 1`] = `
                 david.lawson@example.com
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
               >
-                <div
-                  class="Money-container-id Money-containerRight-id"
+                <span
+                  class="Money-currency-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                  >
-                    321.71
-                  </div>
-                </div>
+                  USD
+                </span>
+                12,345.68
               </td>
             </tr>
             <tr
@@ -107919,25 +107167,14 @@ exports[`Storyshots Views / Orders / Draft order list limits reached 1`] = `
                 Aaron Randall
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
               >
-                <div
-                  class="Money-container-id Money-containerRight-id"
+                <span
+                  class="Money-currency-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                  >
-                    271.95
-                  </div>
-                </div>
+                  USD
+                </span>
+                12,345.68
               </td>
             </tr>
             <tr
@@ -108003,25 +107240,14 @@ exports[`Storyshots Views / Orders / Draft order list limits reached 1`] = `
                 Laura Jensen
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
               >
-                <div
-                  class="Money-container-id Money-containerRight-id"
+                <span
+                  class="Money-currency-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                  >
-                    335.84
-                  </div>
-                </div>
+                  USD
+                </span>
+                12,345.68
               </td>
             </tr>
             <tr
@@ -108087,25 +107313,14 @@ exports[`Storyshots Views / Orders / Draft order list limits reached 1`] = `
                 Jenna Villa
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
               >
-                <div
-                  class="Money-container-id Money-containerRight-id"
+                <span
+                  class="Money-currency-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                  >
-                    1042.15
-                  </div>
-                </div>
+                  USD
+                </span>
+                12,345.68
               </td>
             </tr>
             <tr
@@ -108171,25 +107386,14 @@ exports[`Storyshots Views / Orders / Draft order list limits reached 1`] = `
                 Wesley Davis
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
               >
-                <div
-                  class="Money-container-id Money-containerRight-id"
+                <span
+                  class="Money-currency-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                  >
-                    213.69
-                  </div>
-                </div>
+                  USD
+                </span>
+                12,345.68
               </td>
             </tr>
             <tr
@@ -108255,25 +107459,14 @@ exports[`Storyshots Views / Orders / Draft order list limits reached 1`] = `
                 Anthony Gonzalez
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
               >
-                <div
-                  class="Money-container-id Money-containerRight-id"
+                <span
+                  class="Money-currency-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                  >
-                    367.03
-                  </div>
-                </div>
+                  USD
+                </span>
+                12,345.68
               </td>
             </tr>
             <tr
@@ -108339,25 +107532,14 @@ exports[`Storyshots Views / Orders / Draft order list limits reached 1`] = `
                 Denise Freeman
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
               >
-                <div
-                  class="Money-container-id Money-containerRight-id"
+                <span
+                  class="Money-currency-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                  >
-                    298.76
-                  </div>
-                </div>
+                  USD
+                </span>
+                12,345.68
               </td>
             </tr>
             <tr
@@ -108423,25 +107605,14 @@ exports[`Storyshots Views / Orders / Draft order list limits reached 1`] = `
                 James Ball
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
               >
-                <div
-                  class="Money-container-id Money-containerRight-id"
+                <span
+                  class="Money-currency-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                  >
-                    663.69
-                  </div>
-                </div>
+                  USD
+                </span>
+                12,345.68
               </td>
             </tr>
             <tr
@@ -108507,25 +107678,14 @@ exports[`Storyshots Views / Orders / Draft order list limits reached 1`] = `
                 Michael Martinez
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
               >
-                <div
-                  class="Money-container-id Money-containerRight-id"
+                <span
+                  class="Money-currency-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                  >
-                    280.41
-                  </div>
-                </div>
+                  USD
+                </span>
+                12,345.68
               </td>
             </tr>
             <tr
@@ -108591,25 +107751,14 @@ exports[`Storyshots Views / Orders / Draft order list limits reached 1`] = `
                 Melissa Simon
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
               >
-                <div
-                  class="Money-container-id Money-containerRight-id"
+                <span
+                  class="Money-currency-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                  >
-                    234.93
-                  </div>
-                </div>
+                  USD
+                </span>
+                12,345.68
               </td>
             </tr>
             <tr
@@ -108675,25 +107824,14 @@ exports[`Storyshots Views / Orders / Draft order list limits reached 1`] = `
                 Justin Mccoy
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
               >
-                <div
-                  class="Money-container-id Money-containerRight-id"
+                <span
+                  class="Money-currency-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                  >
-                    485.19
-                  </div>
-                </div>
+                  USD
+                </span>
+                12,345.68
               </td>
             </tr>
             <tr
@@ -108759,25 +107897,14 @@ exports[`Storyshots Views / Orders / Draft order list limits reached 1`] = `
                 Anthony Gonzalez
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
               >
-                <div
-                  class="Money-container-id Money-containerRight-id"
+                <span
+                  class="Money-currency-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                  >
-                    223.54
-                  </div>
-                </div>
+                  USD
+                </span>
+                12,345.68
               </td>
             </tr>
             <tr
@@ -108843,25 +107970,14 @@ exports[`Storyshots Views / Orders / Draft order list limits reached 1`] = `
                 Bradley Ford
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
               >
-                <div
-                  class="Money-container-id Money-containerRight-id"
+                <span
+                  class="Money-currency-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                  >
-                    237.55
-                  </div>
-                </div>
+                  USD
+                </span>
+                12,345.68
               </td>
             </tr>
             <tr
@@ -108927,25 +108043,14 @@ exports[`Storyshots Views / Orders / Draft order list limits reached 1`] = `
                 David Lawson
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
               >
-                <div
-                  class="Money-container-id Money-containerRight-id"
+                <span
+                  class="Money-currency-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                  >
-                    453.55
-                  </div>
-                </div>
+                  USD
+                </span>
+                12,345.68
               </td>
             </tr>
             <tr
@@ -109011,25 +108116,14 @@ exports[`Storyshots Views / Orders / Draft order list limits reached 1`] = `
                 Lauren Watson
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
               >
-                <div
-                  class="Money-container-id Money-containerRight-id"
+                <span
+                  class="Money-currency-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                  >
-                    812.67
-                  </div>
-                </div>
+                  USD
+                </span>
+                12,345.68
               </td>
             </tr>
             <tr
@@ -109095,25 +108189,14 @@ exports[`Storyshots Views / Orders / Draft order list limits reached 1`] = `
                 Mark Lee
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
               >
-                <div
-                  class="Money-container-id Money-containerRight-id"
+                <span
+                  class="Money-currency-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                  >
-                    481.41
-                  </div>
-                </div>
+                  USD
+                </span>
+                12,345.68
               </td>
             </tr>
             <tr
@@ -109179,25 +108262,14 @@ exports[`Storyshots Views / Orders / Draft order list limits reached 1`] = `
                 Kara Murphy
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
               >
-                <div
-                  class="Money-container-id Money-containerRight-id"
+                <span
+                  class="Money-currency-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                  >
-                    569.19
-                  </div>
-                </div>
+                  USD
+                </span>
+                12,345.68
               </td>
             </tr>
             <tr
@@ -109263,25 +108335,14 @@ exports[`Storyshots Views / Orders / Draft order list limits reached 1`] = `
                 Curtis Bailey
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
               >
-                <div
-                  class="Money-container-id Money-containerRight-id"
+                <span
+                  class="Money-currency-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                  >
-                    557.00
-                  </div>
-                </div>
+                  USD
+                </span>
+                12,345.68
               </td>
             </tr>
           </tbody>
@@ -109701,7 +108762,7 @@ exports[`Storyshots Views / Orders / Draft order list loading 1`] = `
                 </span>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
               >
                 <span
                   class="Skeleton-skeleton-id"
@@ -111336,7 +110397,7 @@ exports[`Storyshots Views / Orders / Fulfill order one warehouse 1`] = `
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
+        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
       >
         Order no. 9123 - Add Fulfillment
       </div>
@@ -111353,23 +110414,18 @@ exports[`Storyshots Views / Orders / Fulfill order one warehouse 1`] = `
         class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
       >
         <div
-          class="CardTitle-root-id"
+          class="MuiCardHeader-root-id"
         >
-          <span
-            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
-          >
-            Items ready to ship
-          </span>
           <div
-            class="CardTitle-toolbar-id"
-          />
+            class="MuiCardHeader-content-id"
+          >
+            <span
+              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
+            >
+              Items ready to ship
+            </span>
+          </div>
         </div>
-        <div
-          class="CardTitle-children-id"
-        />
-        <hr
-          class="CardTitle-hr-id"
-        />
         <div
           class="ResponsiveTable-root-id"
         >
@@ -111380,7 +110436,7 @@ exports[`Storyshots Views / Orders / Fulfill order one warehouse 1`] = `
               class="MuiTableHead-root-id"
             >
               <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
+                class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
               >
                 <th
                   class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillPage-colName-id OrderFulfillPage-colName-id"
@@ -111758,12 +110814,16 @@ exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
                       class="StatusLabel-textContainer-id"
                     >
                       <div
-                        class="CardTitle-title-id"
+                        class="MuiTypography-root-id MuiTypography-body1-id"
                       >
-                        Unfulfilled
                         <div
-                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
-                        />
+                          class="CardTitle-title-id"
+                        >
+                          Unfulfilled
+                          <div
+                            class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                          />
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -111854,46 +110914,24 @@ exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
                       3
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
                     >
-                      <div
-                        class="Money-container-id Money-containerRight-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                        >
-                          18.51
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
                     >
-                      <div
-                        class="Money-container-id Money-containerRight-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                        >
-                          55.53
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                 </tbody>
@@ -111925,18 +110963,22 @@ exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
                       class="StatusLabel-textContainer-id"
                     >
                       <div
-                        class="CardTitle-title-id"
+                        class="MuiTypography-root-id MuiTypography-body1-id"
                       >
-                        Unfulfilled
                         <div
-                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                          class="CardTitle-title-id"
                         >
-                          #9-2
-                        </div>
-                        <div
-                          class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
-                        >
-                          Fulfilled from Be stocked
+                          Unfulfilled
+                          <div
+                            class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                          >
+                            #9-2
+                          </div>
+                          <div
+                            class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
+                          >
+                            Fulfilled from Be stocked
+                          </div>
                         </div>
                       </div>
                     </div>
@@ -112028,46 +111070,24 @@ exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
                       1
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
                     >
-                      <div
-                        class="Money-container-id Money-containerRight-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                        >
-                          79.71
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
                     >
-                      <div
-                        class="Money-container-id Money-containerRight-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                        >
-                          79.71
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                 </tbody>
@@ -112099,18 +111119,22 @@ exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
                       class="StatusLabel-textContainer-id"
                     >
                       <div
-                        class="CardTitle-title-id"
+                        class="MuiTypography-root-id MuiTypography-body1-id"
                       >
-                        Unfulfilled
                         <div
-                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                          class="CardTitle-title-id"
                         >
-                          #9-1
-                        </div>
-                        <div
-                          class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
-                        >
-                          Fulfilled from C our wares
+                          Unfulfilled
+                          <div
+                            class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                          >
+                            #9-1
+                          </div>
+                          <div
+                            class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
+                          >
+                            Fulfilled from C our wares
+                          </div>
                         </div>
                       </div>
                     </div>
@@ -112202,46 +111226,24 @@ exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
                       1
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
                     >
-                      <div
-                        class="Money-container-id Money-containerRight-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                        >
-                          79.71
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
                     >
-                      <div
-                        class="Money-container-id Money-containerRight-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                        >
-                          79.71
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                 </tbody>
@@ -112295,18 +111297,22 @@ exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
                   class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="OrderPayment-header-id"
                   >
                     <div
-                      class="undefined StatusLabel-errorDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                      class="StatusLabel-container-id"
                     >
                       <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
+                        class="undefined StatusLabel-errorDot-id"
+                      />
+                      <div
+                        class="StatusLabel-textContainer-id"
                       >
-                        Unpaid
+                        <div
+                          class="MuiTypography-root-id MuiTypography-body1-id"
+                        >
+                          Unpaid
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -112330,23 +111336,12 @@ exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          214.95
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                   <tr>
@@ -112359,23 +111354,12 @@ exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          0.00
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                   <tr>
@@ -112388,23 +111372,12 @@ exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          19.98
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                   <tr
@@ -112417,23 +111390,12 @@ exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          234.93
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                 </tbody>
@@ -112456,23 +111418,12 @@ exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          234.93
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                   <tr>
@@ -112482,23 +111433,12 @@ exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          0.00
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                   <tr>
@@ -112508,23 +111448,12 @@ exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          0.00
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                   <tr
@@ -112536,23 +111465,12 @@ exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          234.93
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                 </tbody>
@@ -113680,12 +112598,16 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
                       class="StatusLabel-textContainer-id"
                     >
                       <div
-                        class="CardTitle-title-id"
+                        class="MuiTypography-root-id MuiTypography-body1-id"
                       >
-                        Unfulfilled
                         <div
-                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
-                        />
+                          class="CardTitle-title-id"
+                        >
+                          Unfulfilled
+                          <div
+                            class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                          />
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -113776,53 +112698,235 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
                       3
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
+                    >
+                      <span
+                        class="Money-currency-id"
+                      >
+                        USD
+                      </span>
+                      12,345.68
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
+                    >
+                      <span
+                        class="Money-currency-id"
+                      >
+                        USD
+                      </span>
+                      12,345.68
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+            <div
+              class="MuiCardActions-root-id MuiCardActions-spacing-id"
+            >
+              <button
+                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
+                tabindex="0"
+                type="button"
+              >
+                <span
+                  class="MuiButton-label-id"
+                >
+                  Fulfill
+                </span>
+              </button>
+            </div>
+          </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
+          >
+            <div
+              class="MuiCardHeader-root-id"
+            >
+              <div
+                class="MuiCardHeader-content-id"
+              >
+                <span
+                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
+                >
+                  <div
+                    class="StatusLabel-container-id"
+                  >
+                    <div
+                      class="undefined StatusLabel-successDot-id"
+                    />
+                    <div
+                      class="StatusLabel-textContainer-id"
                     >
                       <div
-                        class="Money-container-id Money-containerRight-id"
+                        class="MuiTypography-root-id MuiTypography-body1-id"
                       >
                         <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
+                          class="CardTitle-title-id"
                         >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                        >
-                          18.51
+                          Fulfilled (1)
+                          <div
+                            class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                          >
+                            #9-2
+                          </div>
+                          <div
+                            class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
+                          >
+                            Fulfilled from Be stocked
+                          </div>
                         </div>
                       </div>
-                    </td>
+                    </div>
+                  </div>
+                </span>
+              </div>
+              <div
+                class="MuiCardHeader-action-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id IconButton-secondary-id OrderFulfilledProductsCard-deleteIcon-id IconButton-hoverOutline-id"
+                  data-test-id="cancelFulfillmentButton"
+                  tabindex="0"
+                  type="button"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root-id"
+                    focusable="false"
+                    viewBox="0 0 24 24"
+                  >
+                    <svg
+                      fill="none"
+                      height="24"
+                      viewBox="0 0 24 24"
+                      width="24"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        clip-rule="evenodd"
+                        d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
+                        fill="#28234A"
+                        fill-opacity="0.6"
+                        fill-rule="evenodd"
+                      />
+                    </svg>
+                  </svg>
+                </button>
+              </div>
+            </div>
+            <div
+              class="ResponsiveTable-root-id"
+            >
+              <table
+                class="MuiTable-root-id OrderFulfilledProductsCard-table-id"
+              >
+                <thead
+                  class="MuiTableHead-root-id"
+                >
+                  <tr
+                    class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
+                  >
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colName-id"
+                      scope="col"
+                    >
+                      Product
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colSku-id"
+                      scope="col"
+                    >
+                      SKU
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colQuantity-id"
+                      scope="col"
+                    >
+                      Quantity
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colPrice-id"
+                      scope="col"
+                    >
+                      Price
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colTotal-id"
+                      scope="col"
+                    >
+                      Total
+                    </th>
+                  </tr>
+                </thead>
+                <tbody
+                  class="MuiTableBody-root-id"
+                >
+                  <tr
+                    class="MuiTableRow-root-id MuiTableRow-hover-id"
+                  >
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
+                      data-test-id="tableCellAvatar"
+                      thumbnail="placeholder60x60.png"
                     >
                       <div
-                        class="Money-container-id Money-containerRight-id"
+                        class="Avatar-content-id"
                       >
                         <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
+                          class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                         >
-                          USD
+                          <img
+                            class="MuiAvatar-img-id"
+                            src="placeholder60x60.png"
+                          />
                         </div>
                         <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
+                          class="Avatar-children-id"
                         >
-                          55.53
+                          Williams, Garcia and Walker (XS)
                         </div>
                       </div>
                     </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colSku-id"
+                    >
+                      5-1337
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colQuantity-id"
+                    >
+                      1
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
+                    >
+                      <span
+                        class="Money-currency-id"
+                      >
+                        USD
+                      </span>
+                      12,345.68
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
+                    >
+                      <span
+                        class="Money-currency-id"
+                      >
+                        USD
+                      </span>
+                      12,345.68
+                    </td>
                   </tr>
                 </tbody>
               </table>
             </div>
             <div
-              class="MuiCardActions-root-id OrderUnfulfilledItems-actions-id MuiCardActions-spacing-id"
+              class="MuiCardActions-root-id OrderFulfilledProductsCard-actions-id MuiCardActions-spacing-id"
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
@@ -113832,7 +112936,7 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
                 <span
                   class="MuiButton-label-id"
                 >
-                  Fulfill
+                  Add tracking
                 </span>
               </button>
             </div>
@@ -113862,244 +112966,22 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
                       class="StatusLabel-textContainer-id"
                     >
                       <div
-                        class="CardTitle-title-id"
-                      >
-                        Fulfilled (1)
-                        <div
-                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
-                        >
-                          #9-2
-                        </div>
-                        <div
-                          class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
-                        >
-                          Fulfilled from Be stocked
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiIconButton-root-id OrderFulfillment-deleteIcon-id"
-                  data-test-id="cancelFulfillmentButton"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <svg
-                        fill="none"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          clip-rule="evenodd"
-                          d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
-                          fill="#28234A"
-                          fill-opacity="0.6"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </svg>
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <table
-                class="MuiTable-root-id OrderFulfilledProductsCard-table-id"
-              >
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
-                  >
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colName-id"
-                      scope="col"
-                    >
-                      Product
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colSku-id"
-                      scope="col"
-                    >
-                      SKU
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colQuantity-id"
-                      scope="col"
-                    >
-                      Quantity
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colPrice-id"
-                      scope="col"
-                    >
-                      Price
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colTotal-id"
-                      scope="col"
-                    >
-                      Total
-                    </th>
-                  </tr>
-                </thead>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-hover-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
-                      data-test-id="tableCellAvatar"
-                      thumbnail="placeholder60x60.png"
-                    >
-                      <div
-                        class="Avatar-content-id"
-                      >
-                        <div
-                          class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
-                        >
-                          <img
-                            class="MuiAvatar-img-id"
-                            src="placeholder60x60.png"
-                          />
-                        </div>
-                        <div
-                          class="Avatar-children-id"
-                        >
-                          Williams, Garcia and Walker (XS)
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colSku-id"
-                    >
-                      5-1337
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colQuantity-id"
-                    >
-                      1
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id"
-                    >
-                      <div
-                        class="Money-container-id Money-containerRight-id"
-                      >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                        >
-                          79.71
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id"
-                    >
-                      <div
-                        class="Money-container-id Money-containerRight-id"
-                      >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                        >
-                          79.71
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-            <div
-              class="MuiCardActions-root-id OrderFulfilledProductsCard-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add tracking
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  <div
-                    class="StatusLabel-container-id"
-                  >
-                    <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
-                    >
-                      <div
-                        class="CardTitle-title-id"
+                        class="MuiTypography-root-id MuiTypography-body1-id"
                       >
-                        Fulfilled (1)
-                        <div
-                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
-                        >
-                          #9-1
-                        </div>
                         <div
-                          class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
+                          class="CardTitle-title-id"
                         >
-                          Fulfilled from C our wares
+                          Fulfilled (1)
+                          <div
+                            class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                          >
+                            #9-1
+                          </div>
+                          <div
+                            class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
+                          >
+                            Fulfilled from C our wares
+                          </div>
                         </div>
                       </div>
                     </div>
@@ -114110,37 +112992,33 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
                 class="MuiCardHeader-action-id"
               >
                 <button
-                  class="MuiButtonBase-root-id MuiIconButton-root-id OrderFulfillment-deleteIcon-id"
+                  class="MuiButtonBase-root-id IconButton-secondary-id OrderFulfilledProductsCard-deleteIcon-id IconButton-hoverOutline-id"
                   data-test-id="cancelFulfillmentButton"
                   tabindex="0"
                   type="button"
                 >
-                  <span
-                    class="MuiIconButton-label-id"
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root-id"
+                    focusable="false"
+                    viewBox="0 0 24 24"
                   >
                     <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
+                      fill="none"
+                      height="24"
                       viewBox="0 0 24 24"
+                      width="24"
+                      xmlns="http://www.w3.org/2000/svg"
                     >
-                      <svg
-                        fill="none"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          clip-rule="evenodd"
-                          d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
-                          fill="#28234A"
-                          fill-opacity="0.6"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
+                      <path
+                        clip-rule="evenodd"
+                        d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
+                        fill="#28234A"
+                        fill-opacity="0.6"
+                        fill-rule="evenodd"
+                      />
                     </svg>
-                  </span>
+                  </svg>
                 </button>
               </div>
             </div>
@@ -114228,46 +113106,24 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
                       1
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
                     >
-                      <div
-                        class="Money-container-id Money-containerRight-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                        >
-                          79.71
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
                     >
-                      <div
-                        class="Money-container-id Money-containerRight-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                        >
-                          79.71
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                 </tbody>
@@ -114336,20 +113192,71 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
                   class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="OrderPayment-header-id"
                   >
                     <div
-                      class="undefined StatusLabel-errorDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                      class="StatusLabel-container-id"
                     >
                       <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
+                        class="undefined StatusLabel-errorDot-id"
+                      />
+                      <div
+                        class="StatusLabel-textContainer-id"
                       >
-                        Unpaid
+                        <div
+                          class="MuiTypography-root-id MuiTypography-body1-id"
+                        >
+                          Unpaid
+                        </div>
                       </div>
                     </div>
+                    <div>
+                      <button
+                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiButton-label-id"
+                        >
+                          Capture
+                        </span>
+                      </button>
+                      <button
+                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
+                        data-test-id="refund-button"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiButton-label-id"
+                        >
+                          Refund
+                        </span>
+                      </button>
+                      <button
+                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiButton-label-id"
+                        >
+                          Void
+                        </span>
+                      </button>
+                      <button
+                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiButton-label-id"
+                        >
+                          Mark as paid
+                        </span>
+                      </button>
+                    </div>
                   </div>
                 </span>
               </div>
@@ -114371,23 +113278,12 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          214.95
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                   <tr>
@@ -114400,23 +113296,12 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          0.00
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                   <tr>
@@ -114429,23 +113314,12 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          19.98
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                   <tr
@@ -114458,23 +113332,12 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          234.93
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                 </tbody>
@@ -114497,23 +113360,12 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          234.93
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                   <tr>
@@ -114523,23 +113375,12 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          0.00
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                   <tr>
@@ -114549,23 +113390,12 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          0.00
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                   <tr
@@ -114577,80 +113407,17 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          234.93
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                 </tbody>
               </table>
             </div>
-            <hr
-              class="Hr-root-id"
-            />
-            <div
-              class="MuiCardActions-root-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Capture
-                </span>
-              </button>
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                data-test-id="refund-button"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Refund
-                </span>
-              </button>
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Void
-                </span>
-              </button>
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Mark as paid
-                </span>
-              </button>
-            </div>
           </div>
           <div
             class="CardSpacer-spacer-id"
@@ -115805,12 +114572,16 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
                       class="StatusLabel-textContainer-id"
                     >
                       <div
-                        class="CardTitle-title-id"
+                        class="MuiTypography-root-id MuiTypography-body1-id"
                       >
-                        Unfulfilled
                         <div
-                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
-                        />
+                          class="CardTitle-title-id"
+                        >
+                          Unfulfilled
+                          <div
+                            class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                          />
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -115901,56 +114672,34 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
                       3
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
                     >
-                      <div
-                        class="Money-container-id Money-containerRight-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                        >
-                          18.51
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
                     >
-                      <div
-                        class="Money-container-id Money-containerRight-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                        >
-                          55.53
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                 </tbody>
               </table>
             </div>
             <div
-              class="MuiCardActions-root-id OrderUnfulfilledItems-actions-id MuiCardActions-spacing-id"
+              class="MuiCardActions-root-id MuiCardActions-spacing-id"
             >
               <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
+                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                 tabindex="0"
                 type="button"
               >
@@ -115987,18 +114736,22 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
                       class="StatusLabel-textContainer-id"
                     >
                       <div
-                        class="CardTitle-title-id"
+                        class="MuiTypography-root-id MuiTypography-body1-id"
                       >
-                        Fulfilled (1)
                         <div
-                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                          class="CardTitle-title-id"
                         >
-                          #9-2
-                        </div>
-                        <div
-                          class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
-                        >
-                          Fulfilled from Be stocked
+                          Fulfilled (1)
+                          <div
+                            class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                          >
+                            #9-2
+                          </div>
+                          <div
+                            class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
+                          >
+                            Fulfilled from Be stocked
+                          </div>
                         </div>
                       </div>
                     </div>
@@ -116009,37 +114762,33 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
                 class="MuiCardHeader-action-id"
               >
                 <button
-                  class="MuiButtonBase-root-id MuiIconButton-root-id OrderFulfillment-deleteIcon-id"
+                  class="MuiButtonBase-root-id IconButton-secondary-id OrderFulfilledProductsCard-deleteIcon-id IconButton-hoverOutline-id"
                   data-test-id="cancelFulfillmentButton"
                   tabindex="0"
                   type="button"
                 >
-                  <span
-                    class="MuiIconButton-label-id"
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root-id"
+                    focusable="false"
+                    viewBox="0 0 24 24"
                   >
                     <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
+                      fill="none"
+                      height="24"
                       viewBox="0 0 24 24"
+                      width="24"
+                      xmlns="http://www.w3.org/2000/svg"
                     >
-                      <svg
-                        fill="none"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          clip-rule="evenodd"
-                          d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
-                          fill="#28234A"
-                          fill-opacity="0.6"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
+                      <path
+                        clip-rule="evenodd"
+                        d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
+                        fill="#28234A"
+                        fill-opacity="0.6"
+                        fill-rule="evenodd"
+                      />
                     </svg>
-                  </span>
+                  </svg>
                 </button>
               </div>
             </div>
@@ -116127,46 +114876,24 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
                       1
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
                     >
-                      <div
-                        class="Money-container-id Money-containerRight-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                        >
-                          79.71
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
                     >
-                      <div
-                        class="Money-container-id Money-containerRight-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                        >
-                          79.71
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                 </tbody>
@@ -116213,18 +114940,22 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
                       class="StatusLabel-textContainer-id"
                     >
                       <div
-                        class="CardTitle-title-id"
+                        class="MuiTypography-root-id MuiTypography-body1-id"
                       >
-                        Fulfilled (1)
                         <div
-                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                          class="CardTitle-title-id"
                         >
-                          #9-1
-                        </div>
-                        <div
-                          class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
-                        >
-                          Fulfilled from C our wares
+                          Fulfilled (1)
+                          <div
+                            class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                          >
+                            #9-1
+                          </div>
+                          <div
+                            class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
+                          >
+                            Fulfilled from C our wares
+                          </div>
                         </div>
                       </div>
                     </div>
@@ -116235,37 +114966,33 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
                 class="MuiCardHeader-action-id"
               >
                 <button
-                  class="MuiButtonBase-root-id MuiIconButton-root-id OrderFulfillment-deleteIcon-id"
+                  class="MuiButtonBase-root-id IconButton-secondary-id OrderFulfilledProductsCard-deleteIcon-id IconButton-hoverOutline-id"
                   data-test-id="cancelFulfillmentButton"
                   tabindex="0"
                   type="button"
                 >
-                  <span
-                    class="MuiIconButton-label-id"
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root-id"
+                    focusable="false"
+                    viewBox="0 0 24 24"
                   >
                     <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
+                      fill="none"
+                      height="24"
                       viewBox="0 0 24 24"
+                      width="24"
+                      xmlns="http://www.w3.org/2000/svg"
                     >
-                      <svg
-                        fill="none"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          clip-rule="evenodd"
-                          d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
-                          fill="#28234A"
-                          fill-opacity="0.6"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
+                      <path
+                        clip-rule="evenodd"
+                        d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
+                        fill="#28234A"
+                        fill-opacity="0.6"
+                        fill-rule="evenodd"
+                      />
                     </svg>
-                  </span>
+                  </svg>
                 </button>
               </div>
             </div>
@@ -116353,46 +115080,24 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
                       1
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
                     >
-                      <div
-                        class="Money-container-id Money-containerRight-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                        >
-                          79.71
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
                     >
-                      <div
-                        class="Money-container-id Money-containerRight-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                        >
-                          79.71
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                 </tbody>
@@ -116461,20 +115166,71 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
                   class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="OrderPayment-header-id"
                   >
                     <div
-                      class="undefined StatusLabel-errorDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                      class="StatusLabel-container-id"
                     >
                       <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
+                        class="undefined StatusLabel-errorDot-id"
+                      />
+                      <div
+                        class="StatusLabel-textContainer-id"
                       >
-                        Unpaid
+                        <div
+                          class="MuiTypography-root-id MuiTypography-body1-id"
+                        >
+                          Unpaid
+                        </div>
                       </div>
                     </div>
+                    <div>
+                      <button
+                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiButton-label-id"
+                        >
+                          Capture
+                        </span>
+                      </button>
+                      <button
+                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
+                        data-test-id="refund-button"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiButton-label-id"
+                        >
+                          Refund
+                        </span>
+                      </button>
+                      <button
+                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiButton-label-id"
+                        >
+                          Void
+                        </span>
+                      </button>
+                      <button
+                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiButton-label-id"
+                        >
+                          Mark as paid
+                        </span>
+                      </button>
+                    </div>
                   </div>
                 </span>
               </div>
@@ -116496,23 +115252,12 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          214.95
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                   <tr>
@@ -116525,23 +115270,12 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          0.00
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                   <tr>
@@ -116554,23 +115288,12 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          19.98
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                   <tr
@@ -116583,23 +115306,12 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          234.93
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                 </tbody>
@@ -116622,23 +115334,12 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          234.93
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                   <tr>
@@ -116648,23 +115349,12 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          0.00
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                   <tr>
@@ -116674,23 +115364,12 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          0.00
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                   <tr
@@ -116702,80 +115381,17 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          234.93
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                 </tbody>
               </table>
             </div>
-            <hr
-              class="Hr-root-id"
-            />
-            <div
-              class="MuiCardActions-root-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Capture
-                </span>
-              </button>
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                data-test-id="refund-button"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Refund
-                </span>
-              </button>
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Void
-                </span>
-              </button>
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Mark as paid
-                </span>
-              </button>
-            </div>
           </div>
           <div
             class="CardSpacer-spacer-id"
@@ -117826,7 +116442,7 @@ exports[`Storyshots Views / Orders / Order details loading 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
         >
           <div
             class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
@@ -118565,12 +117181,16 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
                       class="StatusLabel-textContainer-id"
                     >
                       <div
-                        class="CardTitle-title-id"
+                        class="MuiTypography-root-id MuiTypography-body1-id"
                       >
-                        Unfulfilled
                         <div
-                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
-                        />
+                          class="CardTitle-title-id"
+                        >
+                          Unfulfilled
+                          <div
+                            class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                          />
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -118661,56 +117281,34 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
                       3
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
                     >
-                      <div
-                        class="Money-container-id Money-containerRight-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                        >
-                          18.51
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
                     >
-                      <div
-                        class="Money-container-id Money-containerRight-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                        >
-                          55.53
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                 </tbody>
               </table>
             </div>
             <div
-              class="MuiCardActions-root-id OrderUnfulfilledItems-actions-id MuiCardActions-spacing-id"
+              class="MuiCardActions-root-id MuiCardActions-spacing-id"
             >
               <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
+                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                 tabindex="0"
                 type="button"
               >
@@ -118747,18 +117345,22 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
                       class="StatusLabel-textContainer-id"
                     >
                       <div
-                        class="CardTitle-title-id"
+                        class="MuiTypography-root-id MuiTypography-body1-id"
                       >
-                        Fulfilled (1)
                         <div
-                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                          class="CardTitle-title-id"
                         >
-                          #9-2
-                        </div>
-                        <div
-                          class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
-                        >
-                          Fulfilled from Be stocked
+                          Fulfilled (1)
+                          <div
+                            class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                          >
+                            #9-2
+                          </div>
+                          <div
+                            class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
+                          >
+                            Fulfilled from Be stocked
+                          </div>
                         </div>
                       </div>
                     </div>
@@ -118769,37 +117371,33 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
                 class="MuiCardHeader-action-id"
               >
                 <button
-                  class="MuiButtonBase-root-id MuiIconButton-root-id OrderFulfillment-deleteIcon-id"
+                  class="MuiButtonBase-root-id IconButton-secondary-id OrderFulfilledProductsCard-deleteIcon-id IconButton-hoverOutline-id"
                   data-test-id="cancelFulfillmentButton"
                   tabindex="0"
                   type="button"
                 >
-                  <span
-                    class="MuiIconButton-label-id"
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root-id"
+                    focusable="false"
+                    viewBox="0 0 24 24"
                   >
                     <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
+                      fill="none"
+                      height="24"
                       viewBox="0 0 24 24"
+                      width="24"
+                      xmlns="http://www.w3.org/2000/svg"
                     >
-                      <svg
-                        fill="none"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          clip-rule="evenodd"
-                          d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
-                          fill="#28234A"
-                          fill-opacity="0.6"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
+                      <path
+                        clip-rule="evenodd"
+                        d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
+                        fill="#28234A"
+                        fill-opacity="0.6"
+                        fill-rule="evenodd"
+                      />
                     </svg>
-                  </span>
+                  </svg>
                 </button>
               </div>
             </div>
@@ -118887,46 +117485,24 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
                       1
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
                     >
-                      <div
-                        class="Money-container-id Money-containerRight-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                        >
-                          79.71
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
                     >
-                      <div
-                        class="Money-container-id Money-containerRight-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                        >
-                          79.71
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                 </tbody>
@@ -118973,18 +117549,22 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
                       class="StatusLabel-textContainer-id"
                     >
                       <div
-                        class="CardTitle-title-id"
+                        class="MuiTypography-root-id MuiTypography-body1-id"
                       >
-                        Fulfilled (1)
                         <div
-                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                          class="CardTitle-title-id"
                         >
-                          #9-1
-                        </div>
-                        <div
-                          class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
-                        >
-                          Fulfilled from C our wares
+                          Fulfilled (1)
+                          <div
+                            class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                          >
+                            #9-1
+                          </div>
+                          <div
+                            class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
+                          >
+                            Fulfilled from C our wares
+                          </div>
                         </div>
                       </div>
                     </div>
@@ -118995,37 +117575,33 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
                 class="MuiCardHeader-action-id"
               >
                 <button
-                  class="MuiButtonBase-root-id MuiIconButton-root-id OrderFulfillment-deleteIcon-id"
+                  class="MuiButtonBase-root-id IconButton-secondary-id OrderFulfilledProductsCard-deleteIcon-id IconButton-hoverOutline-id"
                   data-test-id="cancelFulfillmentButton"
                   tabindex="0"
                   type="button"
                 >
-                  <span
-                    class="MuiIconButton-label-id"
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root-id"
+                    focusable="false"
+                    viewBox="0 0 24 24"
                   >
                     <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
+                      fill="none"
+                      height="24"
                       viewBox="0 0 24 24"
+                      width="24"
+                      xmlns="http://www.w3.org/2000/svg"
                     >
-                      <svg
-                        fill="none"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          clip-rule="evenodd"
-                          d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
-                          fill="#28234A"
-                          fill-opacity="0.6"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
+                      <path
+                        clip-rule="evenodd"
+                        d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
+                        fill="#28234A"
+                        fill-opacity="0.6"
+                        fill-rule="evenodd"
+                      />
                     </svg>
-                  </span>
+                  </svg>
                 </button>
               </div>
             </div>
@@ -119113,46 +117689,24 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
                       1
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
                     >
-                      <div
-                        class="Money-container-id Money-containerRight-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                        >
-                          79.71
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
                     >
-                      <div
-                        class="Money-container-id Money-containerRight-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                        >
-                          79.71
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                 </tbody>
@@ -119221,20 +117775,71 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
                   class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="OrderPayment-header-id"
                   >
                     <div
-                      class="undefined StatusLabel-errorDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                      class="StatusLabel-container-id"
                     >
                       <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
+                        class="undefined StatusLabel-errorDot-id"
+                      />
+                      <div
+                        class="StatusLabel-textContainer-id"
                       >
-                        Unpaid
+                        <div
+                          class="MuiTypography-root-id MuiTypography-body1-id"
+                        >
+                          Unpaid
+                        </div>
                       </div>
                     </div>
+                    <div>
+                      <button
+                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiButton-label-id"
+                        >
+                          Capture
+                        </span>
+                      </button>
+                      <button
+                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
+                        data-test-id="refund-button"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiButton-label-id"
+                        >
+                          Refund
+                        </span>
+                      </button>
+                      <button
+                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiButton-label-id"
+                        >
+                          Void
+                        </span>
+                      </button>
+                      <button
+                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiButton-label-id"
+                        >
+                          Mark as paid
+                        </span>
+                      </button>
+                    </div>
                   </div>
                 </span>
               </div>
@@ -119256,23 +117861,12 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          214.95
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                   <tr>
@@ -119285,23 +117879,12 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          0.00
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                   <tr>
@@ -119314,23 +117897,12 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          19.98
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                   <tr
@@ -119343,23 +117915,12 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          234.93
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                 </tbody>
@@ -119382,23 +117943,12 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          234.93
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                   <tr>
@@ -119408,23 +117958,12 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          0.00
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                   <tr>
@@ -119434,23 +117973,12 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          0.00
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                   <tr
@@ -119462,80 +117990,17 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          234.93
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                 </tbody>
               </table>
             </div>
-            <hr
-              class="Hr-root-id"
-            />
-            <div
-              class="MuiCardActions-root-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Capture
-                </span>
-              </button>
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                data-test-id="refund-button"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Refund
-                </span>
-              </button>
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Void
-                </span>
-              </button>
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Mark as paid
-                </span>
-              </button>
-            </div>
           </div>
           <div
             class="CardSpacer-spacer-id"
@@ -120690,12 +119155,16 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
                       class="StatusLabel-textContainer-id"
                     >
                       <div
-                        class="CardTitle-title-id"
+                        class="MuiTypography-root-id MuiTypography-body1-id"
                       >
-                        Unfulfilled
                         <div
-                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
-                        />
+                          class="CardTitle-title-id"
+                        >
+                          Unfulfilled
+                          <div
+                            class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                          />
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -120786,56 +119255,34 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
                       3
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
                     >
-                      <div
-                        class="Money-container-id Money-containerRight-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                        >
-                          18.51
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
                     >
-                      <div
-                        class="Money-container-id Money-containerRight-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                        >
-                          55.53
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                 </tbody>
               </table>
             </div>
             <div
-              class="MuiCardActions-root-id OrderUnfulfilledItems-actions-id MuiCardActions-spacing-id"
+              class="MuiCardActions-root-id MuiCardActions-spacing-id"
             >
               <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
+                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                 tabindex="0"
                 type="button"
               >
@@ -120872,18 +119319,22 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
                       class="StatusLabel-textContainer-id"
                     >
                       <div
-                        class="CardTitle-title-id"
+                        class="MuiTypography-root-id MuiTypography-body1-id"
                       >
-                        Fulfilled (1)
                         <div
-                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                          class="CardTitle-title-id"
                         >
-                          #9-2
-                        </div>
-                        <div
-                          class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
-                        >
-                          Fulfilled from Be stocked
+                          Fulfilled (1)
+                          <div
+                            class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                          >
+                            #9-2
+                          </div>
+                          <div
+                            class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
+                          >
+                            Fulfilled from Be stocked
+                          </div>
                         </div>
                       </div>
                     </div>
@@ -120894,37 +119345,33 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
                 class="MuiCardHeader-action-id"
               >
                 <button
-                  class="MuiButtonBase-root-id MuiIconButton-root-id OrderFulfillment-deleteIcon-id"
+                  class="MuiButtonBase-root-id IconButton-secondary-id OrderFulfilledProductsCard-deleteIcon-id IconButton-hoverOutline-id"
                   data-test-id="cancelFulfillmentButton"
                   tabindex="0"
                   type="button"
                 >
-                  <span
-                    class="MuiIconButton-label-id"
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root-id"
+                    focusable="false"
+                    viewBox="0 0 24 24"
                   >
                     <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
+                      fill="none"
+                      height="24"
                       viewBox="0 0 24 24"
+                      width="24"
+                      xmlns="http://www.w3.org/2000/svg"
                     >
-                      <svg
-                        fill="none"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          clip-rule="evenodd"
-                          d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
-                          fill="#28234A"
-                          fill-opacity="0.6"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
+                      <path
+                        clip-rule="evenodd"
+                        d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
+                        fill="#28234A"
+                        fill-opacity="0.6"
+                        fill-rule="evenodd"
+                      />
                     </svg>
-                  </span>
+                  </svg>
                 </button>
               </div>
             </div>
@@ -121012,46 +119459,24 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
                       1
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
                     >
-                      <div
-                        class="Money-container-id Money-containerRight-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                        >
-                          79.71
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
                     >
-                      <div
-                        class="Money-container-id Money-containerRight-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                        >
-                          79.71
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                 </tbody>
@@ -121098,18 +119523,22 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
                       class="StatusLabel-textContainer-id"
                     >
                       <div
-                        class="CardTitle-title-id"
+                        class="MuiTypography-root-id MuiTypography-body1-id"
                       >
-                        Fulfilled (1)
                         <div
-                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                          class="CardTitle-title-id"
                         >
-                          #9-1
-                        </div>
-                        <div
-                          class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
-                        >
-                          Fulfilled from C our wares
+                          Fulfilled (1)
+                          <div
+                            class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                          >
+                            #9-1
+                          </div>
+                          <div
+                            class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
+                          >
+                            Fulfilled from C our wares
+                          </div>
                         </div>
                       </div>
                     </div>
@@ -121120,37 +119549,33 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
                 class="MuiCardHeader-action-id"
               >
                 <button
-                  class="MuiButtonBase-root-id MuiIconButton-root-id OrderFulfillment-deleteIcon-id"
+                  class="MuiButtonBase-root-id IconButton-secondary-id OrderFulfilledProductsCard-deleteIcon-id IconButton-hoverOutline-id"
                   data-test-id="cancelFulfillmentButton"
                   tabindex="0"
                   type="button"
                 >
-                  <span
-                    class="MuiIconButton-label-id"
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root-id"
+                    focusable="false"
+                    viewBox="0 0 24 24"
                   >
                     <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
+                      fill="none"
+                      height="24"
                       viewBox="0 0 24 24"
+                      width="24"
+                      xmlns="http://www.w3.org/2000/svg"
                     >
-                      <svg
-                        fill="none"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          clip-rule="evenodd"
-                          d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
-                          fill="#28234A"
-                          fill-opacity="0.6"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
+                      <path
+                        clip-rule="evenodd"
+                        d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
+                        fill="#28234A"
+                        fill-opacity="0.6"
+                        fill-rule="evenodd"
+                      />
                     </svg>
-                  </span>
+                  </svg>
                 </button>
               </div>
             </div>
@@ -121238,46 +119663,24 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
                       1
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
                     >
-                      <div
-                        class="Money-container-id Money-containerRight-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                        >
-                          79.71
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
                     >
-                      <div
-                        class="Money-container-id Money-containerRight-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                        >
-                          79.71
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                 </tbody>
@@ -121346,17 +119749,68 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
                   class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="OrderPayment-header-id"
                   >
                     <div
-                      class="undefined StatusLabel-errorDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                      class="StatusLabel-container-id"
                     >
                       <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
+                        class="undefined StatusLabel-errorDot-id"
                       />
+                      <div
+                        class="StatusLabel-textContainer-id"
+                      >
+                        <div
+                          class="MuiTypography-root-id MuiTypography-body1-id"
+                        />
+                      </div>
+                    </div>
+                    <div>
+                      <button
+                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiButton-label-id"
+                        >
+                          Capture
+                        </span>
+                      </button>
+                      <button
+                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
+                        data-test-id="refund-button"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiButton-label-id"
+                        >
+                          Refund
+                        </span>
+                      </button>
+                      <button
+                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiButton-label-id"
+                        >
+                          Void
+                        </span>
+                      </button>
+                      <button
+                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiButton-label-id"
+                        >
+                          Mark as paid
+                        </span>
+                      </button>
                     </div>
                   </div>
                 </span>
@@ -121379,23 +119833,12 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          214.95
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                   <tr>
@@ -121408,23 +119851,12 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          0.00
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                   <tr>
@@ -121437,23 +119869,12 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          19.98
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                   <tr
@@ -121466,23 +119887,12 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          234.93
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                 </tbody>
@@ -121505,23 +119915,12 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          234.93
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                   <tr>
@@ -121531,23 +119930,12 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          0.00
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                   <tr>
@@ -121557,23 +119945,12 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          0.00
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                   <tr
@@ -121585,80 +119962,17 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          234.93
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                 </tbody>
               </table>
             </div>
-            <hr
-              class="Hr-root-id"
-            />
-            <div
-              class="MuiCardActions-root-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Capture
-                </span>
-              </button>
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                data-test-id="refund-button"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Refund
-                </span>
-              </button>
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Void
-                </span>
-              </button>
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Mark as paid
-                </span>
-              </button>
-            </div>
           </div>
           <div
             class="CardSpacer-spacer-id"
@@ -122813,12 +121127,16 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
                       class="StatusLabel-textContainer-id"
                     >
                       <div
-                        class="CardTitle-title-id"
+                        class="MuiTypography-root-id MuiTypography-body1-id"
                       >
-                        Unfulfilled
                         <div
-                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
-                        />
+                          class="CardTitle-title-id"
+                        >
+                          Unfulfilled
+                          <div
+                            class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                          />
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -122909,56 +121227,34 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
                       3
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
                     >
-                      <div
-                        class="Money-container-id Money-containerRight-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                        >
-                          18.51
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
                     >
-                      <div
-                        class="Money-container-id Money-containerRight-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                        >
-                          55.53
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                 </tbody>
               </table>
             </div>
             <div
-              class="MuiCardActions-root-id OrderUnfulfilledItems-actions-id MuiCardActions-spacing-id"
+              class="MuiCardActions-root-id MuiCardActions-spacing-id"
             >
               <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
+                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                 tabindex="0"
                 type="button"
               >
@@ -122995,18 +121291,22 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
                       class="StatusLabel-textContainer-id"
                     >
                       <div
-                        class="CardTitle-title-id"
+                        class="MuiTypography-root-id MuiTypography-body1-id"
                       >
-                        Fulfilled (1)
                         <div
-                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                          class="CardTitle-title-id"
                         >
-                          #9-2
-                        </div>
-                        <div
-                          class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
-                        >
-                          Fulfilled from Be stocked
+                          Fulfilled (1)
+                          <div
+                            class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                          >
+                            #9-2
+                          </div>
+                          <div
+                            class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
+                          >
+                            Fulfilled from Be stocked
+                          </div>
                         </div>
                       </div>
                     </div>
@@ -123017,37 +121317,33 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
                 class="MuiCardHeader-action-id"
               >
                 <button
-                  class="MuiButtonBase-root-id MuiIconButton-root-id OrderFulfillment-deleteIcon-id"
+                  class="MuiButtonBase-root-id IconButton-secondary-id OrderFulfilledProductsCard-deleteIcon-id IconButton-hoverOutline-id"
                   data-test-id="cancelFulfillmentButton"
                   tabindex="0"
                   type="button"
                 >
-                  <span
-                    class="MuiIconButton-label-id"
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root-id"
+                    focusable="false"
+                    viewBox="0 0 24 24"
                   >
                     <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
+                      fill="none"
+                      height="24"
                       viewBox="0 0 24 24"
+                      width="24"
+                      xmlns="http://www.w3.org/2000/svg"
                     >
-                      <svg
-                        fill="none"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          clip-rule="evenodd"
-                          d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
-                          fill="#28234A"
-                          fill-opacity="0.6"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
+                      <path
+                        clip-rule="evenodd"
+                        d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
+                        fill="#28234A"
+                        fill-opacity="0.6"
+                        fill-rule="evenodd"
+                      />
                     </svg>
-                  </span>
+                  </svg>
                 </button>
               </div>
             </div>
@@ -123135,46 +121431,24 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
                       1
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
                     >
-                      <div
-                        class="Money-container-id Money-containerRight-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                        >
-                          79.71
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
                     >
-                      <div
-                        class="Money-container-id Money-containerRight-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                        >
-                          79.71
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                 </tbody>
@@ -123221,18 +121495,22 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
                       class="StatusLabel-textContainer-id"
                     >
                       <div
-                        class="CardTitle-title-id"
+                        class="MuiTypography-root-id MuiTypography-body1-id"
                       >
-                        Fulfilled (1)
                         <div
-                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                          class="CardTitle-title-id"
                         >
-                          #9-1
-                        </div>
-                        <div
-                          class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
-                        >
-                          Fulfilled from C our wares
+                          Fulfilled (1)
+                          <div
+                            class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                          >
+                            #9-1
+                          </div>
+                          <div
+                            class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
+                          >
+                            Fulfilled from C our wares
+                          </div>
                         </div>
                       </div>
                     </div>
@@ -123243,37 +121521,33 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
                 class="MuiCardHeader-action-id"
               >
                 <button
-                  class="MuiButtonBase-root-id MuiIconButton-root-id OrderFulfillment-deleteIcon-id"
+                  class="MuiButtonBase-root-id IconButton-secondary-id OrderFulfilledProductsCard-deleteIcon-id IconButton-hoverOutline-id"
                   data-test-id="cancelFulfillmentButton"
                   tabindex="0"
                   type="button"
                 >
-                  <span
-                    class="MuiIconButton-label-id"
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root-id"
+                    focusable="false"
+                    viewBox="0 0 24 24"
                   >
                     <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
+                      fill="none"
+                      height="24"
                       viewBox="0 0 24 24"
+                      width="24"
+                      xmlns="http://www.w3.org/2000/svg"
                     >
-                      <svg
-                        fill="none"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          clip-rule="evenodd"
-                          d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
-                          fill="#28234A"
-                          fill-opacity="0.6"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
+                      <path
+                        clip-rule="evenodd"
+                        d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
+                        fill="#28234A"
+                        fill-opacity="0.6"
+                        fill-rule="evenodd"
+                      />
                     </svg>
-                  </span>
+                  </svg>
                 </button>
               </div>
             </div>
@@ -123361,46 +121635,24 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
                       1
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
                     >
-                      <div
-                        class="Money-container-id Money-containerRight-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                        >
-                          79.71
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
                     >
-                      <div
-                        class="Money-container-id Money-containerRight-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                        >
-                          79.71
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                 </tbody>
@@ -123469,20 +121721,71 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
                   class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="OrderPayment-header-id"
                   >
                     <div
-                      class="undefined StatusLabel-errorDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                      class="StatusLabel-container-id"
                     >
                       <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
+                        class="undefined StatusLabel-errorDot-id"
+                      />
+                      <div
+                        class="StatusLabel-textContainer-id"
                       >
-                        Unpaid
+                        <div
+                          class="MuiTypography-root-id MuiTypography-body1-id"
+                        >
+                          Unpaid
+                        </div>
                       </div>
                     </div>
+                    <div>
+                      <button
+                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiButton-label-id"
+                        >
+                          Capture
+                        </span>
+                      </button>
+                      <button
+                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
+                        data-test-id="refund-button"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiButton-label-id"
+                        >
+                          Refund
+                        </span>
+                      </button>
+                      <button
+                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiButton-label-id"
+                        >
+                          Void
+                        </span>
+                      </button>
+                      <button
+                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiButton-label-id"
+                        >
+                          Mark as paid
+                        </span>
+                      </button>
+                    </div>
                   </div>
                 </span>
               </div>
@@ -123504,23 +121807,12 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          214.95
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                   <tr>
@@ -123533,23 +121825,12 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          0.00
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                   <tr>
@@ -123562,23 +121843,12 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          19.98
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                   <tr
@@ -123591,23 +121861,12 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          234.93
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                 </tbody>
@@ -123630,23 +121889,12 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          234.93
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                   <tr>
@@ -123656,23 +121904,12 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          0.00
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                   <tr>
@@ -123682,23 +121919,12 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          0.00
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                   <tr
@@ -123710,80 +121936,17 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          234.93
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                 </tbody>
               </table>
             </div>
-            <hr
-              class="Hr-root-id"
-            />
-            <div
-              class="MuiCardActions-root-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Capture
-                </span>
-              </button>
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                data-test-id="refund-button"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Refund
-                </span>
-              </button>
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Void
-                </span>
-              </button>
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Mark as paid
-                </span>
-              </button>
-            </div>
           </div>
           <div
             class="CardSpacer-spacer-id"
@@ -124930,12 +123093,16 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
                       class="StatusLabel-textContainer-id"
                     >
                       <div
-                        class="CardTitle-title-id"
+                        class="MuiTypography-root-id MuiTypography-body1-id"
                       >
-                        Unfulfilled
                         <div
-                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
-                        />
+                          class="CardTitle-title-id"
+                        >
+                          Unfulfilled
+                          <div
+                            class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                          />
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -125026,56 +123193,34 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
                       3
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
                     >
-                      <div
-                        class="Money-container-id Money-containerRight-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                        >
-                          18.51
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
                     >
-                      <div
-                        class="Money-container-id Money-containerRight-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                        >
-                          55.53
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                 </tbody>
               </table>
             </div>
             <div
-              class="MuiCardActions-root-id OrderUnfulfilledItems-actions-id MuiCardActions-spacing-id"
+              class="MuiCardActions-root-id MuiCardActions-spacing-id"
             >
               <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
+                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                 tabindex="0"
                 type="button"
               >
@@ -125112,18 +123257,22 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
                       class="StatusLabel-textContainer-id"
                     >
                       <div
-                        class="CardTitle-title-id"
+                        class="MuiTypography-root-id MuiTypography-body1-id"
                       >
-                        Fulfilled (1)
                         <div
-                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                          class="CardTitle-title-id"
                         >
-                          #9-2
-                        </div>
-                        <div
-                          class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
-                        >
-                          Fulfilled from Be stocked
+                          Fulfilled (1)
+                          <div
+                            class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                          >
+                            #9-2
+                          </div>
+                          <div
+                            class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
+                          >
+                            Fulfilled from Be stocked
+                          </div>
                         </div>
                       </div>
                     </div>
@@ -125134,37 +123283,33 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
                 class="MuiCardHeader-action-id"
               >
                 <button
-                  class="MuiButtonBase-root-id MuiIconButton-root-id OrderFulfillment-deleteIcon-id"
+                  class="MuiButtonBase-root-id IconButton-secondary-id OrderFulfilledProductsCard-deleteIcon-id IconButton-hoverOutline-id"
                   data-test-id="cancelFulfillmentButton"
                   tabindex="0"
                   type="button"
                 >
-                  <span
-                    class="MuiIconButton-label-id"
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root-id"
+                    focusable="false"
+                    viewBox="0 0 24 24"
                   >
                     <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
+                      fill="none"
+                      height="24"
                       viewBox="0 0 24 24"
+                      width="24"
+                      xmlns="http://www.w3.org/2000/svg"
                     >
-                      <svg
-                        fill="none"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          clip-rule="evenodd"
-                          d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
-                          fill="#28234A"
-                          fill-opacity="0.6"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
+                      <path
+                        clip-rule="evenodd"
+                        d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
+                        fill="#28234A"
+                        fill-opacity="0.6"
+                        fill-rule="evenodd"
+                      />
                     </svg>
-                  </span>
+                  </svg>
                 </button>
               </div>
             </div>
@@ -125252,46 +123397,24 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
                       1
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
                     >
-                      <div
-                        class="Money-container-id Money-containerRight-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                        >
-                          79.71
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
                     >
-                      <div
-                        class="Money-container-id Money-containerRight-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                        >
-                          79.71
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                 </tbody>
@@ -125338,18 +123461,22 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
                       class="StatusLabel-textContainer-id"
                     >
                       <div
-                        class="CardTitle-title-id"
+                        class="MuiTypography-root-id MuiTypography-body1-id"
                       >
-                        Fulfilled (1)
                         <div
-                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                          class="CardTitle-title-id"
                         >
-                          #9-1
-                        </div>
-                        <div
-                          class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
-                        >
-                          Fulfilled from C our wares
+                          Fulfilled (1)
+                          <div
+                            class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                          >
+                            #9-1
+                          </div>
+                          <div
+                            class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
+                          >
+                            Fulfilled from C our wares
+                          </div>
                         </div>
                       </div>
                     </div>
@@ -125360,37 +123487,33 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
                 class="MuiCardHeader-action-id"
               >
                 <button
-                  class="MuiButtonBase-root-id MuiIconButton-root-id OrderFulfillment-deleteIcon-id"
+                  class="MuiButtonBase-root-id IconButton-secondary-id OrderFulfilledProductsCard-deleteIcon-id IconButton-hoverOutline-id"
                   data-test-id="cancelFulfillmentButton"
                   tabindex="0"
                   type="button"
                 >
-                  <span
-                    class="MuiIconButton-label-id"
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root-id"
+                    focusable="false"
+                    viewBox="0 0 24 24"
                   >
                     <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
+                      fill="none"
+                      height="24"
                       viewBox="0 0 24 24"
+                      width="24"
+                      xmlns="http://www.w3.org/2000/svg"
                     >
-                      <svg
-                        fill="none"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          clip-rule="evenodd"
-                          d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
-                          fill="#28234A"
-                          fill-opacity="0.6"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
+                      <path
+                        clip-rule="evenodd"
+                        d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
+                        fill="#28234A"
+                        fill-opacity="0.6"
+                        fill-rule="evenodd"
+                      />
                     </svg>
-                  </span>
+                  </svg>
                 </button>
               </div>
             </div>
@@ -125478,46 +123601,24 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
                       1
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
                     >
-                      <div
-                        class="Money-container-id Money-containerRight-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                        >
-                          79.71
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
                     >
-                      <div
-                        class="Money-container-id Money-containerRight-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                        >
-                          79.71
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                 </tbody>
@@ -125586,20 +123687,71 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
                   class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="OrderPayment-header-id"
                   >
                     <div
-                      class="undefined StatusLabel-errorDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                      class="StatusLabel-container-id"
                     >
                       <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
+                        class="undefined StatusLabel-errorDot-id"
+                      />
+                      <div
+                        class="StatusLabel-textContainer-id"
                       >
-                        Unpaid
+                        <div
+                          class="MuiTypography-root-id MuiTypography-body1-id"
+                        >
+                          Unpaid
+                        </div>
                       </div>
                     </div>
+                    <div>
+                      <button
+                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiButton-label-id"
+                        >
+                          Capture
+                        </span>
+                      </button>
+                      <button
+                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
+                        data-test-id="refund-button"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiButton-label-id"
+                        >
+                          Refund
+                        </span>
+                      </button>
+                      <button
+                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiButton-label-id"
+                        >
+                          Void
+                        </span>
+                      </button>
+                      <button
+                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiButton-label-id"
+                        >
+                          Mark as paid
+                        </span>
+                      </button>
+                    </div>
                   </div>
                 </span>
               </div>
@@ -125621,23 +123773,12 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          214.95
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                   <tr>
@@ -125650,23 +123791,12 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          0.00
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                   <tr>
@@ -125679,23 +123809,12 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          19.98
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                   <tr
@@ -125708,23 +123827,12 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          234.93
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                 </tbody>
@@ -125747,23 +123855,12 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          234.93
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                   <tr>
@@ -125773,23 +123870,12 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          0.00
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                   <tr>
@@ -125799,23 +123885,12 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          0.00
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                   <tr
@@ -125827,80 +123902,17 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          234.93
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                 </tbody>
               </table>
             </div>
-            <hr
-              class="Hr-root-id"
-            />
-            <div
-              class="MuiCardActions-root-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Capture
-                </span>
-              </button>
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                data-test-id="refund-button"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Refund
-                </span>
-              </button>
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Void
-                </span>
-              </button>
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Mark as paid
-                </span>
-              </button>
-            </div>
           </div>
           <div
             class="CardSpacer-spacer-id"
@@ -127055,12 +125067,16 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
                       class="StatusLabel-textContainer-id"
                     >
                       <div
-                        class="CardTitle-title-id"
+                        class="MuiTypography-root-id MuiTypography-body1-id"
                       >
-                        Unfulfilled
                         <div
-                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
-                        />
+                          class="CardTitle-title-id"
+                        >
+                          Unfulfilled
+                          <div
+                            class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                          />
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -127151,56 +125167,34 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
                       3
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
                     >
-                      <div
-                        class="Money-container-id Money-containerRight-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                        >
-                          18.51
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
                     >
-                      <div
-                        class="Money-container-id Money-containerRight-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                        >
-                          55.53
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                 </tbody>
               </table>
             </div>
             <div
-              class="MuiCardActions-root-id OrderUnfulfilledItems-actions-id MuiCardActions-spacing-id"
+              class="MuiCardActions-root-id MuiCardActions-spacing-id"
             >
               <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
+                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                 tabindex="0"
                 type="button"
               >
@@ -127237,18 +125231,22 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
                       class="StatusLabel-textContainer-id"
                     >
                       <div
-                        class="CardTitle-title-id"
+                        class="MuiTypography-root-id MuiTypography-body1-id"
                       >
-                        Fulfilled (1)
                         <div
-                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                          class="CardTitle-title-id"
                         >
-                          #9-2
-                        </div>
-                        <div
-                          class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
-                        >
-                          Fulfilled from Be stocked
+                          Fulfilled (1)
+                          <div
+                            class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                          >
+                            #9-2
+                          </div>
+                          <div
+                            class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
+                          >
+                            Fulfilled from Be stocked
+                          </div>
                         </div>
                       </div>
                     </div>
@@ -127259,37 +125257,33 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
                 class="MuiCardHeader-action-id"
               >
                 <button
-                  class="MuiButtonBase-root-id MuiIconButton-root-id OrderFulfillment-deleteIcon-id"
+                  class="MuiButtonBase-root-id IconButton-secondary-id OrderFulfilledProductsCard-deleteIcon-id IconButton-hoverOutline-id"
                   data-test-id="cancelFulfillmentButton"
                   tabindex="0"
                   type="button"
                 >
-                  <span
-                    class="MuiIconButton-label-id"
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root-id"
+                    focusable="false"
+                    viewBox="0 0 24 24"
                   >
                     <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
+                      fill="none"
+                      height="24"
                       viewBox="0 0 24 24"
+                      width="24"
+                      xmlns="http://www.w3.org/2000/svg"
                     >
-                      <svg
-                        fill="none"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          clip-rule="evenodd"
-                          d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
-                          fill="#28234A"
-                          fill-opacity="0.6"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
+                      <path
+                        clip-rule="evenodd"
+                        d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
+                        fill="#28234A"
+                        fill-opacity="0.6"
+                        fill-rule="evenodd"
+                      />
                     </svg>
-                  </span>
+                  </svg>
                 </button>
               </div>
             </div>
@@ -127377,46 +125371,24 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
                       1
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
                     >
-                      <div
-                        class="Money-container-id Money-containerRight-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                        >
-                          79.71
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
                     >
-                      <div
-                        class="Money-container-id Money-containerRight-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                        >
-                          79.71
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                 </tbody>
@@ -127463,18 +125435,22 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
                       class="StatusLabel-textContainer-id"
                     >
                       <div
-                        class="CardTitle-title-id"
+                        class="MuiTypography-root-id MuiTypography-body1-id"
                       >
-                        Fulfilled (1)
-                        <div
-                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
-                        >
-                          #9-1
-                        </div>
                         <div
-                          class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
+                          class="CardTitle-title-id"
                         >
-                          Fulfilled from C our wares
+                          Fulfilled (1)
+                          <div
+                            class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                          >
+                            #9-1
+                          </div>
+                          <div
+                            class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
+                          >
+                            Fulfilled from C our wares
+                          </div>
                         </div>
                       </div>
                     </div>
@@ -127485,37 +125461,33 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
                 class="MuiCardHeader-action-id"
               >
                 <button
-                  class="MuiButtonBase-root-id MuiIconButton-root-id OrderFulfillment-deleteIcon-id"
+                  class="MuiButtonBase-root-id IconButton-secondary-id OrderFulfilledProductsCard-deleteIcon-id IconButton-hoverOutline-id"
                   data-test-id="cancelFulfillmentButton"
                   tabindex="0"
                   type="button"
                 >
-                  <span
-                    class="MuiIconButton-label-id"
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root-id"
+                    focusable="false"
+                    viewBox="0 0 24 24"
                   >
                     <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
+                      fill="none"
+                      height="24"
                       viewBox="0 0 24 24"
+                      width="24"
+                      xmlns="http://www.w3.org/2000/svg"
                     >
-                      <svg
-                        fill="none"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          clip-rule="evenodd"
-                          d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
-                          fill="#28234A"
-                          fill-opacity="0.6"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
+                      <path
+                        clip-rule="evenodd"
+                        d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
+                        fill="#28234A"
+                        fill-opacity="0.6"
+                        fill-rule="evenodd"
+                      />
                     </svg>
-                  </span>
+                  </svg>
                 </button>
               </div>
             </div>
@@ -127603,46 +125575,24 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
                       1
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
                     >
-                      <div
-                        class="Money-container-id Money-containerRight-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                        >
-                          79.71
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
                     >
-                      <div
-                        class="Money-container-id Money-containerRight-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                        >
-                          79.71
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                 </tbody>
@@ -127711,20 +125661,71 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
                   class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="OrderPayment-header-id"
                   >
                     <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                      class="StatusLabel-container-id"
                     >
                       <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
+                        class="undefined StatusLabel-successDot-id"
+                      />
+                      <div
+                        class="StatusLabel-textContainer-id"
                       >
-                        Fully paid
+                        <div
+                          class="MuiTypography-root-id MuiTypography-body1-id"
+                        >
+                          Fully paid
+                        </div>
                       </div>
                     </div>
+                    <div>
+                      <button
+                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiButton-label-id"
+                        >
+                          Capture
+                        </span>
+                      </button>
+                      <button
+                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
+                        data-test-id="refund-button"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiButton-label-id"
+                        >
+                          Refund
+                        </span>
+                      </button>
+                      <button
+                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiButton-label-id"
+                        >
+                          Void
+                        </span>
+                      </button>
+                      <button
+                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiButton-label-id"
+                        >
+                          Mark as paid
+                        </span>
+                      </button>
+                    </div>
                   </div>
                 </span>
               </div>
@@ -127746,23 +125747,12 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          214.95
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                   <tr>
@@ -127775,23 +125765,12 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          0.00
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                   <tr>
@@ -127804,23 +125783,12 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          19.98
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                   <tr
@@ -127833,23 +125801,12 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          234.93
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                 </tbody>
@@ -127872,23 +125829,12 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          234.93
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                   <tr>
@@ -127898,23 +125844,12 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          0.00
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                   <tr>
@@ -127924,23 +125859,12 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          0.00
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                   <tr
@@ -127952,80 +125876,17 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          234.93
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                 </tbody>
               </table>
             </div>
-            <hr
-              class="Hr-root-id"
-            />
-            <div
-              class="MuiCardActions-root-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Capture
-                </span>
-              </button>
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                data-test-id="refund-button"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Refund
-                </span>
-              </button>
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Void
-                </span>
-              </button>
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Mark as paid
-                </span>
-              </button>
-            </div>
           </div>
           <div
             class="CardSpacer-spacer-id"
@@ -129180,12 +127041,16 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
                       class="StatusLabel-textContainer-id"
                     >
                       <div
-                        class="CardTitle-title-id"
+                        class="MuiTypography-root-id MuiTypography-body1-id"
                       >
-                        Unfulfilled
                         <div
-                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
-                        />
+                          class="CardTitle-title-id"
+                        >
+                          Unfulfilled
+                          <div
+                            class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                          />
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -129276,56 +127141,34 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
                       3
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
                     >
-                      <div
-                        class="Money-container-id Money-containerRight-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                        >
-                          18.51
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
                     >
-                      <div
-                        class="Money-container-id Money-containerRight-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                        >
-                          55.53
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                 </tbody>
               </table>
             </div>
             <div
-              class="MuiCardActions-root-id OrderUnfulfilledItems-actions-id MuiCardActions-spacing-id"
+              class="MuiCardActions-root-id MuiCardActions-spacing-id"
             >
               <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
+                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                 tabindex="0"
                 type="button"
               >
@@ -129362,18 +127205,22 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
                       class="StatusLabel-textContainer-id"
                     >
                       <div
-                        class="CardTitle-title-id"
+                        class="MuiTypography-root-id MuiTypography-body1-id"
                       >
-                        Fulfilled (1)
                         <div
-                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                          class="CardTitle-title-id"
                         >
-                          #9-2
-                        </div>
-                        <div
-                          class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
-                        >
-                          Fulfilled from Be stocked
+                          Fulfilled (1)
+                          <div
+                            class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                          >
+                            #9-2
+                          </div>
+                          <div
+                            class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
+                          >
+                            Fulfilled from Be stocked
+                          </div>
                         </div>
                       </div>
                     </div>
@@ -129384,37 +127231,33 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
                 class="MuiCardHeader-action-id"
               >
                 <button
-                  class="MuiButtonBase-root-id MuiIconButton-root-id OrderFulfillment-deleteIcon-id"
+                  class="MuiButtonBase-root-id IconButton-secondary-id OrderFulfilledProductsCard-deleteIcon-id IconButton-hoverOutline-id"
                   data-test-id="cancelFulfillmentButton"
                   tabindex="0"
                   type="button"
                 >
-                  <span
-                    class="MuiIconButton-label-id"
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root-id"
+                    focusable="false"
+                    viewBox="0 0 24 24"
                   >
                     <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
+                      fill="none"
+                      height="24"
                       viewBox="0 0 24 24"
+                      width="24"
+                      xmlns="http://www.w3.org/2000/svg"
                     >
-                      <svg
-                        fill="none"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          clip-rule="evenodd"
-                          d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
-                          fill="#28234A"
-                          fill-opacity="0.6"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
+                      <path
+                        clip-rule="evenodd"
+                        d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
+                        fill="#28234A"
+                        fill-opacity="0.6"
+                        fill-rule="evenodd"
+                      />
                     </svg>
-                  </span>
+                  </svg>
                 </button>
               </div>
             </div>
@@ -129502,46 +127345,24 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
                       1
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
                     >
-                      <div
-                        class="Money-container-id Money-containerRight-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                        >
-                          79.71
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
                     >
-                      <div
-                        class="Money-container-id Money-containerRight-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                        >
-                          79.71
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                 </tbody>
@@ -129588,18 +127409,22 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
                       class="StatusLabel-textContainer-id"
                     >
                       <div
-                        class="CardTitle-title-id"
+                        class="MuiTypography-root-id MuiTypography-body1-id"
                       >
-                        Fulfilled (1)
                         <div
-                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                          class="CardTitle-title-id"
                         >
-                          #9-1
-                        </div>
-                        <div
-                          class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
-                        >
-                          Fulfilled from C our wares
+                          Fulfilled (1)
+                          <div
+                            class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                          >
+                            #9-1
+                          </div>
+                          <div
+                            class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
+                          >
+                            Fulfilled from C our wares
+                          </div>
                         </div>
                       </div>
                     </div>
@@ -129610,37 +127435,33 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
                 class="MuiCardHeader-action-id"
               >
                 <button
-                  class="MuiButtonBase-root-id MuiIconButton-root-id OrderFulfillment-deleteIcon-id"
+                  class="MuiButtonBase-root-id IconButton-secondary-id OrderFulfilledProductsCard-deleteIcon-id IconButton-hoverOutline-id"
                   data-test-id="cancelFulfillmentButton"
                   tabindex="0"
                   type="button"
                 >
-                  <span
-                    class="MuiIconButton-label-id"
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root-id"
+                    focusable="false"
+                    viewBox="0 0 24 24"
                   >
                     <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
+                      fill="none"
+                      height="24"
                       viewBox="0 0 24 24"
+                      width="24"
+                      xmlns="http://www.w3.org/2000/svg"
                     >
-                      <svg
-                        fill="none"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          clip-rule="evenodd"
-                          d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
-                          fill="#28234A"
-                          fill-opacity="0.6"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
+                      <path
+                        clip-rule="evenodd"
+                        d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
+                        fill="#28234A"
+                        fill-opacity="0.6"
+                        fill-rule="evenodd"
+                      />
                     </svg>
-                  </span>
+                  </svg>
                 </button>
               </div>
             </div>
@@ -129728,46 +127549,24 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
                       1
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
                     >
-                      <div
-                        class="Money-container-id Money-containerRight-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                        >
-                          79.71
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
                     >
-                      <div
-                        class="Money-container-id Money-containerRight-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                        >
-                          79.71
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                 </tbody>
@@ -129836,20 +127635,71 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
                   class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="OrderPayment-header-id"
                   >
                     <div
-                      class="undefined StatusLabel-errorDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                      class="StatusLabel-container-id"
                     >
                       <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
+                        class="undefined StatusLabel-errorDot-id"
+                      />
+                      <div
+                        class="StatusLabel-textContainer-id"
                       >
-                        Unpaid
+                        <div
+                          class="MuiTypography-root-id MuiTypography-body1-id"
+                        >
+                          Unpaid
+                        </div>
                       </div>
                     </div>
+                    <div>
+                      <button
+                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiButton-label-id"
+                        >
+                          Capture
+                        </span>
+                      </button>
+                      <button
+                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
+                        data-test-id="refund-button"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiButton-label-id"
+                        >
+                          Refund
+                        </span>
+                      </button>
+                      <button
+                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiButton-label-id"
+                        >
+                          Void
+                        </span>
+                      </button>
+                      <button
+                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiButton-label-id"
+                        >
+                          Mark as paid
+                        </span>
+                      </button>
+                    </div>
                   </div>
                 </span>
               </div>
@@ -129871,23 +127721,12 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          214.95
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                   <tr>
@@ -129900,23 +127739,12 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          0.00
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                   <tr>
@@ -129929,23 +127757,12 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          19.98
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                   <tr
@@ -129958,23 +127775,12 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          234.93
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                 </tbody>
@@ -129997,23 +127803,12 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          234.93
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                   <tr>
@@ -130023,23 +127818,12 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          0.00
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                   <tr>
@@ -130049,23 +127833,12 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          0.00
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                   <tr
@@ -130077,80 +127850,17 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          234.93
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                 </tbody>
               </table>
             </div>
-            <hr
-              class="Hr-root-id"
-            />
-            <div
-              class="MuiCardActions-root-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Capture
-                </span>
-              </button>
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                data-test-id="refund-button"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Refund
-                </span>
-              </button>
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Void
-                </span>
-              </button>
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Mark as paid
-                </span>
-              </button>
-            </div>
           </div>
           <div
             class="CardSpacer-spacer-id"
@@ -131305,12 +129015,16 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
                       class="StatusLabel-textContainer-id"
                     >
                       <div
-                        class="CardTitle-title-id"
+                        class="MuiTypography-root-id MuiTypography-body1-id"
                       >
-                        Unfulfilled
                         <div
-                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
-                        />
+                          class="CardTitle-title-id"
+                        >
+                          Unfulfilled
+                          <div
+                            class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                          />
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -131401,56 +129115,34 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
                       3
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
                     >
-                      <div
-                        class="Money-container-id Money-containerRight-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                        >
-                          18.51
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
                     >
-                      <div
-                        class="Money-container-id Money-containerRight-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                        >
-                          55.53
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                 </tbody>
               </table>
             </div>
             <div
-              class="MuiCardActions-root-id OrderUnfulfilledItems-actions-id MuiCardActions-spacing-id"
+              class="MuiCardActions-root-id MuiCardActions-spacing-id"
             >
               <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
+                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                 tabindex="0"
                 type="button"
               >
@@ -131487,18 +129179,22 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
                       class="StatusLabel-textContainer-id"
                     >
                       <div
-                        class="CardTitle-title-id"
+                        class="MuiTypography-root-id MuiTypography-body1-id"
                       >
-                        Fulfilled (1)
                         <div
-                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                          class="CardTitle-title-id"
                         >
-                          #9-2
-                        </div>
-                        <div
-                          class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
-                        >
-                          Fulfilled from Be stocked
+                          Fulfilled (1)
+                          <div
+                            class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                          >
+                            #9-2
+                          </div>
+                          <div
+                            class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
+                          >
+                            Fulfilled from Be stocked
+                          </div>
                         </div>
                       </div>
                     </div>
@@ -131509,37 +129205,33 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
                 class="MuiCardHeader-action-id"
               >
                 <button
-                  class="MuiButtonBase-root-id MuiIconButton-root-id OrderFulfillment-deleteIcon-id"
+                  class="MuiButtonBase-root-id IconButton-secondary-id OrderFulfilledProductsCard-deleteIcon-id IconButton-hoverOutline-id"
                   data-test-id="cancelFulfillmentButton"
                   tabindex="0"
                   type="button"
                 >
-                  <span
-                    class="MuiIconButton-label-id"
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root-id"
+                    focusable="false"
+                    viewBox="0 0 24 24"
                   >
                     <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
+                      fill="none"
+                      height="24"
                       viewBox="0 0 24 24"
+                      width="24"
+                      xmlns="http://www.w3.org/2000/svg"
                     >
-                      <svg
-                        fill="none"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          clip-rule="evenodd"
-                          d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
-                          fill="#28234A"
-                          fill-opacity="0.6"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
+                      <path
+                        clip-rule="evenodd"
+                        d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
+                        fill="#28234A"
+                        fill-opacity="0.6"
+                        fill-rule="evenodd"
+                      />
                     </svg>
-                  </span>
+                  </svg>
                 </button>
               </div>
             </div>
@@ -131627,46 +129319,24 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
                       1
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
                     >
-                      <div
-                        class="Money-container-id Money-containerRight-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                        >
-                          79.71
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
                     >
-                      <div
-                        class="Money-container-id Money-containerRight-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                        >
-                          79.71
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                 </tbody>
@@ -131713,18 +129383,22 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
                       class="StatusLabel-textContainer-id"
                     >
                       <div
-                        class="CardTitle-title-id"
+                        class="MuiTypography-root-id MuiTypography-body1-id"
                       >
-                        Fulfilled (1)
                         <div
-                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                          class="CardTitle-title-id"
                         >
-                          #9-1
-                        </div>
-                        <div
-                          class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
-                        >
-                          Fulfilled from C our wares
+                          Fulfilled (1)
+                          <div
+                            class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                          >
+                            #9-1
+                          </div>
+                          <div
+                            class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
+                          >
+                            Fulfilled from C our wares
+                          </div>
                         </div>
                       </div>
                     </div>
@@ -131735,37 +129409,33 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
                 class="MuiCardHeader-action-id"
               >
                 <button
-                  class="MuiButtonBase-root-id MuiIconButton-root-id OrderFulfillment-deleteIcon-id"
+                  class="MuiButtonBase-root-id IconButton-secondary-id OrderFulfilledProductsCard-deleteIcon-id IconButton-hoverOutline-id"
                   data-test-id="cancelFulfillmentButton"
                   tabindex="0"
                   type="button"
                 >
-                  <span
-                    class="MuiIconButton-label-id"
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root-id"
+                    focusable="false"
+                    viewBox="0 0 24 24"
                   >
                     <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
+                      fill="none"
+                      height="24"
                       viewBox="0 0 24 24"
+                      width="24"
+                      xmlns="http://www.w3.org/2000/svg"
                     >
-                      <svg
-                        fill="none"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          clip-rule="evenodd"
-                          d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
-                          fill="#28234A"
-                          fill-opacity="0.6"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
+                      <path
+                        clip-rule="evenodd"
+                        d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
+                        fill="#28234A"
+                        fill-opacity="0.6"
+                        fill-rule="evenodd"
+                      />
                     </svg>
-                  </span>
+                  </svg>
                 </button>
               </div>
             </div>
@@ -131853,46 +129523,24 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
                       1
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
                     >
-                      <div
-                        class="Money-container-id Money-containerRight-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                        >
-                          79.71
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
                     >
-                      <div
-                        class="Money-container-id Money-containerRight-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                        >
-                          79.71
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                 </tbody>
@@ -131961,20 +129609,71 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
                   class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="OrderPayment-header-id"
                   >
                     <div
-                      class="undefined StatusLabel-errorDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                      class="StatusLabel-container-id"
                     >
                       <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
+                        class="undefined StatusLabel-errorDot-id"
+                      />
+                      <div
+                        class="StatusLabel-textContainer-id"
                       >
-                        Unpaid
+                        <div
+                          class="MuiTypography-root-id MuiTypography-body1-id"
+                        >
+                          Unpaid
+                        </div>
                       </div>
                     </div>
+                    <div>
+                      <button
+                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiButton-label-id"
+                        >
+                          Capture
+                        </span>
+                      </button>
+                      <button
+                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
+                        data-test-id="refund-button"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiButton-label-id"
+                        >
+                          Refund
+                        </span>
+                      </button>
+                      <button
+                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiButton-label-id"
+                        >
+                          Void
+                        </span>
+                      </button>
+                      <button
+                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiButton-label-id"
+                        >
+                          Mark as paid
+                        </span>
+                      </button>
+                    </div>
                   </div>
                 </span>
               </div>
@@ -131996,23 +129695,12 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          214.95
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                   <tr>
@@ -132025,23 +129713,12 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          0.00
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                   <tr>
@@ -132054,23 +129731,12 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          19.98
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                   <tr
@@ -132083,23 +129749,12 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          234.93
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                 </tbody>
@@ -132122,23 +129777,12 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          234.93
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                   <tr>
@@ -132148,23 +129792,12 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          0.00
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                   <tr>
@@ -132174,23 +129807,12 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          0.00
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                   <tr
@@ -132202,80 +129824,17 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          234.93
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                 </tbody>
               </table>
             </div>
-            <hr
-              class="Hr-root-id"
-            />
-            <div
-              class="MuiCardActions-root-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Capture
-                </span>
-              </button>
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                data-test-id="refund-button"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Refund
-                </span>
-              </button>
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Void
-                </span>
-              </button>
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Mark as paid
-                </span>
-              </button>
-            </div>
           </div>
           <div
             class="CardSpacer-spacer-id"
@@ -133430,12 +130989,16 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
                       class="StatusLabel-textContainer-id"
                     >
                       <div
-                        class="CardTitle-title-id"
+                        class="MuiTypography-root-id MuiTypography-body1-id"
                       >
-                        Unfulfilled
                         <div
-                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
-                        />
+                          class="CardTitle-title-id"
+                        >
+                          Unfulfilled
+                          <div
+                            class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                          />
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -133526,56 +131089,34 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
                       3
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
                     >
-                      <div
-                        class="Money-container-id Money-containerRight-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                        >
-                          18.51
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
                     >
-                      <div
-                        class="Money-container-id Money-containerRight-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                        >
-                          55.53
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                 </tbody>
               </table>
             </div>
             <div
-              class="MuiCardActions-root-id OrderUnfulfilledItems-actions-id MuiCardActions-spacing-id"
+              class="MuiCardActions-root-id MuiCardActions-spacing-id"
             >
               <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
+                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                 tabindex="0"
                 type="button"
               >
@@ -133612,18 +131153,22 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
                       class="StatusLabel-textContainer-id"
                     >
                       <div
-                        class="CardTitle-title-id"
+                        class="MuiTypography-root-id MuiTypography-body1-id"
                       >
-                        Fulfilled (1)
                         <div
-                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                          class="CardTitle-title-id"
                         >
-                          #9-2
-                        </div>
-                        <div
-                          class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
-                        >
-                          Fulfilled from Be stocked
+                          Fulfilled (1)
+                          <div
+                            class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                          >
+                            #9-2
+                          </div>
+                          <div
+                            class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
+                          >
+                            Fulfilled from Be stocked
+                          </div>
                         </div>
                       </div>
                     </div>
@@ -133634,37 +131179,33 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
                 class="MuiCardHeader-action-id"
               >
                 <button
-                  class="MuiButtonBase-root-id MuiIconButton-root-id OrderFulfillment-deleteIcon-id"
+                  class="MuiButtonBase-root-id IconButton-secondary-id OrderFulfilledProductsCard-deleteIcon-id IconButton-hoverOutline-id"
                   data-test-id="cancelFulfillmentButton"
                   tabindex="0"
                   type="button"
                 >
-                  <span
-                    class="MuiIconButton-label-id"
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root-id"
+                    focusable="false"
+                    viewBox="0 0 24 24"
                   >
                     <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
+                      fill="none"
+                      height="24"
                       viewBox="0 0 24 24"
+                      width="24"
+                      xmlns="http://www.w3.org/2000/svg"
                     >
-                      <svg
-                        fill="none"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          clip-rule="evenodd"
-                          d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
-                          fill="#28234A"
-                          fill-opacity="0.6"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
+                      <path
+                        clip-rule="evenodd"
+                        d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
+                        fill="#28234A"
+                        fill-opacity="0.6"
+                        fill-rule="evenodd"
+                      />
                     </svg>
-                  </span>
+                  </svg>
                 </button>
               </div>
             </div>
@@ -133752,46 +131293,24 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
                       1
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
                     >
-                      <div
-                        class="Money-container-id Money-containerRight-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                        >
-                          79.71
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
                     >
-                      <div
-                        class="Money-container-id Money-containerRight-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                        >
-                          79.71
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                 </tbody>
@@ -133838,18 +131357,22 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
                       class="StatusLabel-textContainer-id"
                     >
                       <div
-                        class="CardTitle-title-id"
+                        class="MuiTypography-root-id MuiTypography-body1-id"
                       >
-                        Fulfilled (1)
                         <div
-                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                          class="CardTitle-title-id"
                         >
-                          #9-1
-                        </div>
-                        <div
-                          class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
-                        >
-                          Fulfilled from C our wares
+                          Fulfilled (1)
+                          <div
+                            class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                          >
+                            #9-1
+                          </div>
+                          <div
+                            class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
+                          >
+                            Fulfilled from C our wares
+                          </div>
                         </div>
                       </div>
                     </div>
@@ -133860,37 +131383,33 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
                 class="MuiCardHeader-action-id"
               >
                 <button
-                  class="MuiButtonBase-root-id MuiIconButton-root-id OrderFulfillment-deleteIcon-id"
+                  class="MuiButtonBase-root-id IconButton-secondary-id OrderFulfilledProductsCard-deleteIcon-id IconButton-hoverOutline-id"
                   data-test-id="cancelFulfillmentButton"
                   tabindex="0"
                   type="button"
                 >
-                  <span
-                    class="MuiIconButton-label-id"
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root-id"
+                    focusable="false"
+                    viewBox="0 0 24 24"
                   >
                     <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
+                      fill="none"
+                      height="24"
                       viewBox="0 0 24 24"
+                      width="24"
+                      xmlns="http://www.w3.org/2000/svg"
                     >
-                      <svg
-                        fill="none"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          clip-rule="evenodd"
-                          d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
-                          fill="#28234A"
-                          fill-opacity="0.6"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
+                      <path
+                        clip-rule="evenodd"
+                        d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
+                        fill="#28234A"
+                        fill-opacity="0.6"
+                        fill-rule="evenodd"
+                      />
                     </svg>
-                  </span>
+                  </svg>
                 </button>
               </div>
             </div>
@@ -133978,46 +131497,24 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
                       1
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
                     >
-                      <div
-                        class="Money-container-id Money-containerRight-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                        >
-                          79.71
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
                     >
-                      <div
-                        class="Money-container-id Money-containerRight-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                        >
-                          79.71
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                 </tbody>
@@ -134086,20 +131583,71 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
                   class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="OrderPayment-header-id"
                   >
                     <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                      class="StatusLabel-container-id"
                     >
                       <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
+                        class="undefined StatusLabel-successDot-id"
+                      />
+                      <div
+                        class="StatusLabel-textContainer-id"
                       >
-                        Fully refunded
+                        <div
+                          class="MuiTypography-root-id MuiTypography-body1-id"
+                        >
+                          Fully refunded
+                        </div>
                       </div>
                     </div>
+                    <div>
+                      <button
+                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiButton-label-id"
+                        >
+                          Capture
+                        </span>
+                      </button>
+                      <button
+                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
+                        data-test-id="refund-button"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiButton-label-id"
+                        >
+                          Refund
+                        </span>
+                      </button>
+                      <button
+                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiButton-label-id"
+                        >
+                          Void
+                        </span>
+                      </button>
+                      <button
+                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiButton-label-id"
+                        >
+                          Mark as paid
+                        </span>
+                      </button>
+                    </div>
                   </div>
                 </span>
               </div>
@@ -134121,23 +131669,12 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          214.95
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                   <tr>
@@ -134150,23 +131687,12 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          0.00
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                   <tr>
@@ -134179,23 +131705,12 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          19.98
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                   <tr
@@ -134208,23 +131723,12 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          234.93
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                 </tbody>
@@ -134247,23 +131751,12 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          234.93
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                   <tr>
@@ -134273,23 +131766,12 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          0.00
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                   <tr>
@@ -134299,23 +131781,12 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          234.93
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                   <tr
@@ -134327,80 +131798,17 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          234.93
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                 </tbody>
               </table>
             </div>
-            <hr
-              class="Hr-root-id"
-            />
-            <div
-              class="MuiCardActions-root-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Capture
-                </span>
-              </button>
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                data-test-id="refund-button"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Refund
-                </span>
-              </button>
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Void
-                </span>
-              </button>
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Mark as paid
-                </span>
-              </button>
-            </div>
           </div>
           <div
             class="CardSpacer-spacer-id"
@@ -135555,12 +132963,16 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
                       class="StatusLabel-textContainer-id"
                     >
                       <div
-                        class="CardTitle-title-id"
+                        class="MuiTypography-root-id MuiTypography-body1-id"
                       >
-                        Unfulfilled
                         <div
-                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
-                        />
+                          class="CardTitle-title-id"
+                        >
+                          Unfulfilled
+                          <div
+                            class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                          />
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -135651,56 +133063,34 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
                       3
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
                     >
-                      <div
-                        class="Money-container-id Money-containerRight-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                        >
-                          18.51
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
                     >
-                      <div
-                        class="Money-container-id Money-containerRight-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                        >
-                          55.53
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                 </tbody>
               </table>
             </div>
             <div
-              class="MuiCardActions-root-id OrderUnfulfilledItems-actions-id MuiCardActions-spacing-id"
+              class="MuiCardActions-root-id MuiCardActions-spacing-id"
             >
               <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
+                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                 tabindex="0"
                 type="button"
               >
@@ -135737,18 +133127,22 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
                       class="StatusLabel-textContainer-id"
                     >
                       <div
-                        class="CardTitle-title-id"
+                        class="MuiTypography-root-id MuiTypography-body1-id"
                       >
-                        Fulfilled (1)
                         <div
-                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                          class="CardTitle-title-id"
                         >
-                          #9-2
-                        </div>
-                        <div
-                          class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
-                        >
-                          Fulfilled from Be stocked
+                          Fulfilled (1)
+                          <div
+                            class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                          >
+                            #9-2
+                          </div>
+                          <div
+                            class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
+                          >
+                            Fulfilled from Be stocked
+                          </div>
                         </div>
                       </div>
                     </div>
@@ -135759,37 +133153,33 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
                 class="MuiCardHeader-action-id"
               >
                 <button
-                  class="MuiButtonBase-root-id MuiIconButton-root-id OrderFulfillment-deleteIcon-id"
+                  class="MuiButtonBase-root-id IconButton-secondary-id OrderFulfilledProductsCard-deleteIcon-id IconButton-hoverOutline-id"
                   data-test-id="cancelFulfillmentButton"
                   tabindex="0"
                   type="button"
                 >
-                  <span
-                    class="MuiIconButton-label-id"
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root-id"
+                    focusable="false"
+                    viewBox="0 0 24 24"
                   >
                     <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
+                      fill="none"
+                      height="24"
                       viewBox="0 0 24 24"
+                      width="24"
+                      xmlns="http://www.w3.org/2000/svg"
                     >
-                      <svg
-                        fill="none"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          clip-rule="evenodd"
-                          d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
-                          fill="#28234A"
-                          fill-opacity="0.6"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
+                      <path
+                        clip-rule="evenodd"
+                        d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
+                        fill="#28234A"
+                        fill-opacity="0.6"
+                        fill-rule="evenodd"
+                      />
                     </svg>
-                  </span>
+                  </svg>
                 </button>
               </div>
             </div>
@@ -135877,46 +133267,24 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
                       1
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
                     >
-                      <div
-                        class="Money-container-id Money-containerRight-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                        >
-                          79.71
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
                     >
-                      <div
-                        class="Money-container-id Money-containerRight-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                        >
-                          79.71
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                 </tbody>
@@ -135963,18 +133331,22 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
                       class="StatusLabel-textContainer-id"
                     >
                       <div
-                        class="CardTitle-title-id"
+                        class="MuiTypography-root-id MuiTypography-body1-id"
                       >
-                        Fulfilled (1)
                         <div
-                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                          class="CardTitle-title-id"
                         >
-                          #9-1
-                        </div>
-                        <div
-                          class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
-                        >
-                          Fulfilled from C our wares
+                          Fulfilled (1)
+                          <div
+                            class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                          >
+                            #9-1
+                          </div>
+                          <div
+                            class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
+                          >
+                            Fulfilled from C our wares
+                          </div>
                         </div>
                       </div>
                     </div>
@@ -135985,37 +133357,33 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
                 class="MuiCardHeader-action-id"
               >
                 <button
-                  class="MuiButtonBase-root-id MuiIconButton-root-id OrderFulfillment-deleteIcon-id"
+                  class="MuiButtonBase-root-id IconButton-secondary-id OrderFulfilledProductsCard-deleteIcon-id IconButton-hoverOutline-id"
                   data-test-id="cancelFulfillmentButton"
                   tabindex="0"
                   type="button"
                 >
-                  <span
-                    class="MuiIconButton-label-id"
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root-id"
+                    focusable="false"
+                    viewBox="0 0 24 24"
                   >
                     <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
+                      fill="none"
+                      height="24"
                       viewBox="0 0 24 24"
+                      width="24"
+                      xmlns="http://www.w3.org/2000/svg"
                     >
-                      <svg
-                        fill="none"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          clip-rule="evenodd"
-                          d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
-                          fill="#28234A"
-                          fill-opacity="0.6"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
+                      <path
+                        clip-rule="evenodd"
+                        d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
+                        fill="#28234A"
+                        fill-opacity="0.6"
+                        fill-rule="evenodd"
+                      />
                     </svg>
-                  </span>
+                  </svg>
                 </button>
               </div>
             </div>
@@ -136103,46 +133471,24 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
                       1
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
                     >
-                      <div
-                        class="Money-container-id Money-containerRight-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                        >
-                          79.71
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
                     >
-                      <div
-                        class="Money-container-id Money-containerRight-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                        >
-                          79.71
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                 </tbody>
@@ -136211,20 +133557,71 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
                   class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="OrderPayment-header-id"
                   >
                     <div
-                      class="undefined StatusLabel-errorDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                      class="StatusLabel-container-id"
                     >
                       <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
+                        class="undefined StatusLabel-errorDot-id"
+                      />
+                      <div
+                        class="StatusLabel-textContainer-id"
                       >
-                        Unpaid
+                        <div
+                          class="MuiTypography-root-id MuiTypography-body1-id"
+                        >
+                          Unpaid
+                        </div>
                       </div>
                     </div>
+                    <div>
+                      <button
+                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiButton-label-id"
+                        >
+                          Capture
+                        </span>
+                      </button>
+                      <button
+                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
+                        data-test-id="refund-button"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiButton-label-id"
+                        >
+                          Refund
+                        </span>
+                      </button>
+                      <button
+                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiButton-label-id"
+                        >
+                          Void
+                        </span>
+                      </button>
+                      <button
+                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiButton-label-id"
+                        >
+                          Mark as paid
+                        </span>
+                      </button>
+                    </div>
                   </div>
                 </span>
               </div>
@@ -136246,23 +133643,12 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          214.95
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                   <tr>
@@ -136275,23 +133661,12 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          0.00
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                   <tr>
@@ -136304,23 +133679,12 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          19.98
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                   <tr
@@ -136333,23 +133697,12 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          234.93
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                 </tbody>
@@ -136372,23 +133725,12 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          234.93
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                   <tr>
@@ -136398,23 +133740,12 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          0.00
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                   <tr>
@@ -136424,23 +133755,12 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          0.00
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                   <tr
@@ -136452,80 +133772,17 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          234.93
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                 </tbody>
               </table>
             </div>
-            <hr
-              class="Hr-root-id"
-            />
-            <div
-              class="MuiCardActions-root-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Capture
-                </span>
-              </button>
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                data-test-id="refund-button"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Refund
-                </span>
-              </button>
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Void
-                </span>
-              </button>
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Mark as paid
-                </span>
-              </button>
-            </div>
           </div>
           <div
             class="CardSpacer-spacer-id"
@@ -137680,12 +134937,16 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
                       class="StatusLabel-textContainer-id"
                     >
                       <div
-                        class="CardTitle-title-id"
+                        class="MuiTypography-root-id MuiTypography-body1-id"
                       >
-                        Unfulfilled
                         <div
-                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
-                        />
+                          class="CardTitle-title-id"
+                        >
+                          Unfulfilled
+                          <div
+                            class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                          />
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -137776,56 +135037,34 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
                       3
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
                     >
-                      <div
-                        class="Money-container-id Money-containerRight-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                        >
-                          18.51
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
                     >
-                      <div
-                        class="Money-container-id Money-containerRight-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                        >
-                          55.53
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                 </tbody>
               </table>
             </div>
             <div
-              class="MuiCardActions-root-id OrderUnfulfilledItems-actions-id MuiCardActions-spacing-id"
+              class="MuiCardActions-root-id MuiCardActions-spacing-id"
             >
               <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
+                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                 tabindex="0"
                 type="button"
               >
@@ -137862,18 +135101,22 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
                       class="StatusLabel-textContainer-id"
                     >
                       <div
-                        class="CardTitle-title-id"
+                        class="MuiTypography-root-id MuiTypography-body1-id"
                       >
-                        Fulfilled (1)
                         <div
-                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                          class="CardTitle-title-id"
                         >
-                          #9-2
-                        </div>
-                        <div
-                          class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
-                        >
-                          Fulfilled from Be stocked
+                          Fulfilled (1)
+                          <div
+                            class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                          >
+                            #9-2
+                          </div>
+                          <div
+                            class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
+                          >
+                            Fulfilled from Be stocked
+                          </div>
                         </div>
                       </div>
                     </div>
@@ -137884,37 +135127,33 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
                 class="MuiCardHeader-action-id"
               >
                 <button
-                  class="MuiButtonBase-root-id MuiIconButton-root-id OrderFulfillment-deleteIcon-id"
+                  class="MuiButtonBase-root-id IconButton-secondary-id OrderFulfilledProductsCard-deleteIcon-id IconButton-hoverOutline-id"
                   data-test-id="cancelFulfillmentButton"
                   tabindex="0"
                   type="button"
                 >
-                  <span
-                    class="MuiIconButton-label-id"
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root-id"
+                    focusable="false"
+                    viewBox="0 0 24 24"
                   >
                     <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
+                      fill="none"
+                      height="24"
                       viewBox="0 0 24 24"
+                      width="24"
+                      xmlns="http://www.w3.org/2000/svg"
                     >
-                      <svg
-                        fill="none"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          clip-rule="evenodd"
-                          d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
-                          fill="#28234A"
-                          fill-opacity="0.6"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
+                      <path
+                        clip-rule="evenodd"
+                        d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
+                        fill="#28234A"
+                        fill-opacity="0.6"
+                        fill-rule="evenodd"
+                      />
                     </svg>
-                  </span>
+                  </svg>
                 </button>
               </div>
             </div>
@@ -138002,46 +135241,24 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
                       1
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
                     >
-                      <div
-                        class="Money-container-id Money-containerRight-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                        >
-                          79.71
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
                     >
-                      <div
-                        class="Money-container-id Money-containerRight-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                        >
-                          79.71
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                 </tbody>
@@ -138088,18 +135305,22 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
                       class="StatusLabel-textContainer-id"
                     >
                       <div
-                        class="CardTitle-title-id"
+                        class="MuiTypography-root-id MuiTypography-body1-id"
                       >
-                        Fulfilled (1)
                         <div
-                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                          class="CardTitle-title-id"
                         >
-                          #9-1
-                        </div>
-                        <div
-                          class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
-                        >
-                          Fulfilled from C our wares
+                          Fulfilled (1)
+                          <div
+                            class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                          >
+                            #9-1
+                          </div>
+                          <div
+                            class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
+                          >
+                            Fulfilled from C our wares
+                          </div>
                         </div>
                       </div>
                     </div>
@@ -138110,37 +135331,33 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
                 class="MuiCardHeader-action-id"
               >
                 <button
-                  class="MuiButtonBase-root-id MuiIconButton-root-id OrderFulfillment-deleteIcon-id"
+                  class="MuiButtonBase-root-id IconButton-secondary-id OrderFulfilledProductsCard-deleteIcon-id IconButton-hoverOutline-id"
                   data-test-id="cancelFulfillmentButton"
                   tabindex="0"
                   type="button"
                 >
-                  <span
-                    class="MuiIconButton-label-id"
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root-id"
+                    focusable="false"
+                    viewBox="0 0 24 24"
                   >
                     <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
+                      fill="none"
+                      height="24"
                       viewBox="0 0 24 24"
+                      width="24"
+                      xmlns="http://www.w3.org/2000/svg"
                     >
-                      <svg
-                        fill="none"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          clip-rule="evenodd"
-                          d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
-                          fill="#28234A"
-                          fill-opacity="0.6"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
+                      <path
+                        clip-rule="evenodd"
+                        d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
+                        fill="#28234A"
+                        fill-opacity="0.6"
+                        fill-rule="evenodd"
+                      />
                     </svg>
-                  </span>
+                  </svg>
                 </button>
               </div>
             </div>
@@ -138228,46 +135445,24 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
                       1
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
                     >
-                      <div
-                        class="Money-container-id Money-containerRight-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                        >
-                          79.71
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
                     >
-                      <div
-                        class="Money-container-id Money-containerRight-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                        >
-                          79.71
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                 </tbody>
@@ -138336,20 +135531,71 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
                   class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="OrderPayment-header-id"
                   >
                     <div
-                      class="undefined StatusLabel-errorDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                      class="StatusLabel-container-id"
                     >
                       <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
+                        class="undefined StatusLabel-errorDot-id"
+                      />
+                      <div
+                        class="StatusLabel-textContainer-id"
                       >
-                        Unpaid
+                        <div
+                          class="MuiTypography-root-id MuiTypography-body1-id"
+                        >
+                          Unpaid
+                        </div>
                       </div>
                     </div>
+                    <div>
+                      <button
+                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiButton-label-id"
+                        >
+                          Capture
+                        </span>
+                      </button>
+                      <button
+                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
+                        data-test-id="refund-button"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiButton-label-id"
+                        >
+                          Refund
+                        </span>
+                      </button>
+                      <button
+                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiButton-label-id"
+                        >
+                          Void
+                        </span>
+                      </button>
+                      <button
+                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiButton-label-id"
+                        >
+                          Mark as paid
+                        </span>
+                      </button>
+                    </div>
                   </div>
                 </span>
               </div>
@@ -138371,23 +135617,12 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          214.95
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                   <tr>
@@ -138400,23 +135635,12 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          0.00
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                   <tr>
@@ -138429,23 +135653,12 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          19.98
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                   <tr
@@ -138458,23 +135671,12 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          234.93
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                 </tbody>
@@ -138497,23 +135699,12 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          234.93
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                   <tr>
@@ -138523,23 +135714,12 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          0.00
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                   <tr>
@@ -138549,23 +135729,12 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          0.00
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                   <tr
@@ -138577,80 +135746,17 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
                     <td
                       class="OrderPayment-textRight-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          234.93
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </td>
                   </tr>
                 </tbody>
               </table>
             </div>
-            <hr
-              class="Hr-root-id"
-            />
-            <div
-              class="MuiCardActions-root-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Capture
-                </span>
-              </button>
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                data-test-id="refund-button"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Refund
-                </span>
-              </button>
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Void
-                </span>
-              </button>
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Mark as paid
-                </span>
-              </button>
-            </div>
           </div>
           <div
             class="CardSpacer-spacer-id"
@@ -139915,45 +137021,23 @@ exports[`Storyshots Views / Orders / Order draft default 1`] = `
                     <a
                       class="MuiTypography-root-id Link-root-id Link-primary-id Link-noUnderline-id MuiTypography-body1-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          168.30
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </a>
                   </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-colTotal-id"
                   >
-                    <div
-                      class="Money-container-id"
+                    <span
+                      class="Money-currency-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id"
-                      >
-                        USD
-                      </div>
-                      <div
-                        class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                      />
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        336.60
-                      </div>
-                    </div>
+                      USD
+                    </span>
+                    12,345.68
                   </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-colAction-id"
@@ -140056,45 +137140,23 @@ exports[`Storyshots Views / Orders / Order draft default 1`] = `
                     <a
                       class="MuiTypography-root-id Link-root-id Link-primary-id Link-noUnderline-id MuiTypography-body1-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          168.30
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </a>
                   </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-colTotal-id"
                   >
-                    <div
-                      class="Money-container-id"
+                    <span
+                      class="Money-currency-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id"
-                      >
-                        USD
-                      </div>
-                      <div
-                        class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                      />
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        336.60
-                      </div>
-                    </div>
+                      USD
+                    </span>
+                    12,345.68
                   </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-colAction-id"
@@ -140153,23 +137215,12 @@ exports[`Storyshots Views / Orders / Order draft default 1`] = `
                   <td
                     class="OrderDraftDetailsSummary-textRight-id"
                   >
-                    <div
-                      class="Money-container-id"
+                    <span
+                      class="Money-currency-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id"
-                      >
-                        USD
-                      </div>
-                      <div
-                        class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                      />
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        168.30
-                      </div>
-                    </div>
+                      USD
+                    </span>
+                    12,345.68
                   </td>
                 </tr>
                 <tr>
@@ -140189,23 +137240,12 @@ exports[`Storyshots Views / Orders / Order draft default 1`] = `
                   <td
                     class="OrderDraftDetailsSummary-textRight-id"
                   >
-                    <div
-                      class="Money-container-id"
+                    <span
+                      class="Money-currency-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id"
-                      >
-                        USD
-                      </div>
-                      <div
-                        class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                      />
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        68.30
-                      </div>
-                    </div>
+                      USD
+                    </span>
+                    12,345.68
                   </td>
                 </tr>
                 <tr>
@@ -140215,23 +137255,12 @@ exports[`Storyshots Views / Orders / Order draft default 1`] = `
                   <td
                     class="OrderDraftDetailsSummary-textRight-id"
                   >
-                    <div
-                      class="Money-container-id"
+                    <span
+                      class="Money-currency-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id"
-                      >
-                        USD
-                      </div>
-                      <div
-                        class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                      />
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        168.30
-                      </div>
-                    </div>
+                      USD
+                    </span>
+                    12,345.68
                   </td>
                 </tr>
               </tbody>
@@ -140998,45 +138027,23 @@ exports[`Storyshots Views / Orders / Order draft no user permissions 1`] = `
                     <a
                       class="MuiTypography-root-id Link-root-id Link-primary-id Link-noUnderline-id MuiTypography-body1-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          168.30
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </a>
                   </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-colTotal-id"
                   >
-                    <div
-                      class="Money-container-id"
+                    <span
+                      class="Money-currency-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id"
-                      >
-                        USD
-                      </div>
-                      <div
-                        class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                      />
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        336.60
-                      </div>
-                    </div>
+                      USD
+                    </span>
+                    12,345.68
                   </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-colAction-id"
@@ -141139,45 +138146,23 @@ exports[`Storyshots Views / Orders / Order draft no user permissions 1`] = `
                     <a
                       class="MuiTypography-root-id Link-root-id Link-primary-id Link-noUnderline-id MuiTypography-body1-id"
                     >
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          168.30
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </a>
                   </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-colTotal-id"
                   >
-                    <div
-                      class="Money-container-id"
+                    <span
+                      class="Money-currency-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id"
-                      >
-                        USD
-                      </div>
-                      <div
-                        class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                      />
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        336.60
-                      </div>
-                    </div>
+                      USD
+                    </span>
+                    12,345.68
                   </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-colAction-id"
@@ -141236,23 +138221,12 @@ exports[`Storyshots Views / Orders / Order draft no user permissions 1`] = `
                   <td
                     class="OrderDraftDetailsSummary-textRight-id"
                   >
-                    <div
-                      class="Money-container-id"
+                    <span
+                      class="Money-currency-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id"
-                      >
-                        USD
-                      </div>
-                      <div
-                        class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                      />
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        168.30
-                      </div>
-                    </div>
+                      USD
+                    </span>
+                    12,345.68
                   </td>
                 </tr>
                 <tr>
@@ -141272,23 +138246,12 @@ exports[`Storyshots Views / Orders / Order draft no user permissions 1`] = `
                   <td
                     class="OrderDraftDetailsSummary-textRight-id"
                   >
-                    <div
-                      class="Money-container-id"
+                    <span
+                      class="Money-currency-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id"
-                      >
-                        USD
-                      </div>
-                      <div
-                        class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                      />
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        68.30
-                      </div>
-                    </div>
+                      USD
+                    </span>
+                    12,345.68
                   </td>
                 </tr>
                 <tr>
@@ -141298,23 +138261,12 @@ exports[`Storyshots Views / Orders / Order draft no user permissions 1`] = `
                   <td
                     class="OrderDraftDetailsSummary-textRight-id"
                   >
-                    <div
-                      class="Money-container-id"
+                    <span
+                      class="Money-currency-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id"
-                      >
-                        USD
-                      </div>
-                      <div
-                        class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                      />
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        168.30
-                      </div>
-                    </div>
+                      USD
+                    </span>
+                    12,345.68
                   </td>
                 </tr>
               </tbody>
@@ -142331,25 +139283,14 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
               >
-                <div
-                  class="Money-container-id Money-containerRight-id"
+                <span
+                  class="Money-currency-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                  >
-                    305.17
-                  </div>
-                </div>
+                  USD
+                </span>
+                12,345.68
               </td>
             </tr>
             <tr
@@ -142418,25 +139359,14 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
               >
-                <div
-                  class="Money-container-id Money-containerRight-id"
+                <span
+                  class="Money-currency-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                  >
-                    1215.89
-                  </div>
-                </div>
+                  USD
+                </span>
+                12,345.68
               </td>
             </tr>
             <tr
@@ -142505,25 +139435,14 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
               >
-                <div
-                  class="Money-container-id Money-containerRight-id"
+                <span
+                  class="Money-currency-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                  >
-                    321.71
-                  </div>
-                </div>
+                  USD
+                </span>
+                12,345.68
               </td>
             </tr>
             <tr
@@ -142592,113 +139511,91 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
-              >
-                <div
-                  class="Money-container-id Money-containerRight-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                  >
-                    271.95
-                  </div>
-                </div>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
-              data-test-id="order-table-row"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
-              >
-                #16
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
-              >
-                <time
-                  class=""
-                  datetime="1536658649610"
-                  title="Sep 11, 2018 5:37 AM"
-                >
-                  in a month
-                </time>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
-              >
-                Laura Jensen
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
-              >
-                <div
-                  class="StatusLabel-container-id"
-                >
-                  <div
-                    class="undefined StatusLabel-errorDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
-                  >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Unpaid
-                    </div>
-                  </div>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
-              >
-                <div
-                  class="StatusLabel-container-id"
-                >
-                  <div
-                    class="undefined StatusLabel-errorDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
-                  >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Cancelled
-                    </div>
-                  </div>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
+              >
+                <span
+                  class="Money-currency-id"
+                >
+                  USD
+                </span>
+                12,345.68
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
+              data-test-id="order-table-row"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
+              >
+                #16
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
+              >
+                <time
+                  class=""
+                  datetime="1536658649610"
+                  title="Sep 11, 2018 5:37 AM"
+                >
+                  in a month
+                </time>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
+              >
+                Laura Jensen
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="Money-container-id Money-containerRight-id"
+                  class="StatusLabel-container-id"
                 >
                   <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
+                    class="undefined StatusLabel-errorDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
                   >
-                    USD
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Unpaid
+                    </div>
                   </div>
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
+              >
+                <div
+                  class="StatusLabel-container-id"
+                >
                   <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
+                    class="undefined StatusLabel-errorDot-id"
                   />
                   <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
+                    class="StatusLabel-textContainer-id"
                   >
-                    335.84
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Cancelled
+                    </div>
                   </div>
                 </div>
               </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
+              >
+                <span
+                  class="Money-currency-id"
+                >
+                  USD
+                </span>
+                12,345.68
+              </td>
             </tr>
             <tr
               class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
@@ -142766,25 +139663,14 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
               >
-                <div
-                  class="Money-container-id Money-containerRight-id"
+                <span
+                  class="Money-currency-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                  >
-                    1042.15
-                  </div>
-                </div>
+                  USD
+                </span>
+                12,345.68
               </td>
             </tr>
             <tr
@@ -142853,25 +139739,14 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
               >
-                <div
-                  class="Money-container-id Money-containerRight-id"
+                <span
+                  class="Money-currency-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                  >
-                    213.69
-                  </div>
-                </div>
+                  USD
+                </span>
+                12,345.68
               </td>
             </tr>
             <tr
@@ -142940,25 +139815,14 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
               >
-                <div
-                  class="Money-container-id Money-containerRight-id"
+                <span
+                  class="Money-currency-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                  >
-                    367.03
-                  </div>
-                </div>
+                  USD
+                </span>
+                12,345.68
               </td>
             </tr>
             <tr
@@ -143027,25 +139891,14 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
               >
-                <div
-                  class="Money-container-id Money-containerRight-id"
+                <span
+                  class="Money-currency-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                  >
-                    298.76
-                  </div>
-                </div>
+                  USD
+                </span>
+                12,345.68
               </td>
             </tr>
             <tr
@@ -143114,25 +139967,14 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
               >
-                <div
-                  class="Money-container-id Money-containerRight-id"
+                <span
+                  class="Money-currency-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                  >
-                    663.69
-                  </div>
-                </div>
+                  USD
+                </span>
+                12,345.68
               </td>
             </tr>
             <tr
@@ -143201,25 +140043,14 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
               >
-                <div
-                  class="Money-container-id Money-containerRight-id"
+                <span
+                  class="Money-currency-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                  >
-                    280.41
-                  </div>
-                </div>
+                  USD
+                </span>
+                12,345.68
               </td>
             </tr>
             <tr
@@ -143288,25 +140119,14 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
               >
-                <div
-                  class="Money-container-id Money-containerRight-id"
+                <span
+                  class="Money-currency-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                  >
-                    234.93
-                  </div>
-                </div>
+                  USD
+                </span>
+                12,345.68
               </td>
             </tr>
             <tr
@@ -143375,25 +140195,14 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
               >
-                <div
-                  class="Money-container-id Money-containerRight-id"
+                <span
+                  class="Money-currency-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                  >
-                    485.19
-                  </div>
-                </div>
+                  USD
+                </span>
+                12,345.68
               </td>
             </tr>
             <tr
@@ -143462,25 +140271,14 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
               >
-                <div
-                  class="Money-container-id Money-containerRight-id"
+                <span
+                  class="Money-currency-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                  >
-                    223.54
-                  </div>
-                </div>
+                  USD
+                </span>
+                12,345.68
               </td>
             </tr>
             <tr
@@ -143549,25 +140347,14 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
               >
-                <div
-                  class="Money-container-id Money-containerRight-id"
+                <span
+                  class="Money-currency-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                  >
-                    237.55
-                  </div>
-                </div>
+                  USD
+                </span>
+                12,345.68
               </td>
             </tr>
             <tr
@@ -143636,25 +140423,14 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
               >
-                <div
-                  class="Money-container-id Money-containerRight-id"
+                <span
+                  class="Money-currency-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                  >
-                    453.55
-                  </div>
-                </div>
+                  USD
+                </span>
+                12,345.68
               </td>
             </tr>
             <tr
@@ -143723,25 +140499,14 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
               >
-                <div
-                  class="Money-container-id Money-containerRight-id"
+                <span
+                  class="Money-currency-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                  >
-                    812.67
-                  </div>
-                </div>
+                  USD
+                </span>
+                12,345.68
               </td>
             </tr>
             <tr
@@ -143810,25 +140575,14 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
               >
-                <div
-                  class="Money-container-id Money-containerRight-id"
+                <span
+                  class="Money-currency-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                  >
-                    481.41
-                  </div>
-                </div>
+                  USD
+                </span>
+                12,345.68
               </td>
             </tr>
             <tr
@@ -143897,25 +140651,14 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
               >
-                <div
-                  class="Money-container-id Money-containerRight-id"
+                <span
+                  class="Money-currency-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                  >
-                    569.19
-                  </div>
-                </div>
+                  USD
+                </span>
+                12,345.68
               </td>
             </tr>
             <tr
@@ -143984,25 +140727,14 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
               >
-                <div
-                  class="Money-container-id Money-containerRight-id"
+                <span
+                  class="Money-currency-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                  >
-                    557.00
-                  </div>
-                </div>
+                  USD
+                </span>
+                12,345.68
               </td>
             </tr>
           </tbody>
@@ -144508,25 +141240,14 @@ exports[`Storyshots Views / Orders / Order list limits reached 1`] = `
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
               >
-                <div
-                  class="Money-container-id Money-containerRight-id"
+                <span
+                  class="Money-currency-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                  >
-                    305.17
-                  </div>
-                </div>
+                  USD
+                </span>
+                12,345.68
               </td>
             </tr>
             <tr
@@ -144595,25 +141316,14 @@ exports[`Storyshots Views / Orders / Order list limits reached 1`] = `
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
               >
-                <div
-                  class="Money-container-id Money-containerRight-id"
+                <span
+                  class="Money-currency-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                  >
-                    1215.89
-                  </div>
-                </div>
+                  USD
+                </span>
+                12,345.68
               </td>
             </tr>
             <tr
@@ -144682,25 +141392,14 @@ exports[`Storyshots Views / Orders / Order list limits reached 1`] = `
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
               >
-                <div
-                  class="Money-container-id Money-containerRight-id"
+                <span
+                  class="Money-currency-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                  >
-                    321.71
-                  </div>
-                </div>
+                  USD
+                </span>
+                12,345.68
               </td>
             </tr>
             <tr
@@ -144769,25 +141468,14 @@ exports[`Storyshots Views / Orders / Order list limits reached 1`] = `
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
               >
-                <div
-                  class="Money-container-id Money-containerRight-id"
+                <span
+                  class="Money-currency-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                  >
-                    271.95
-                  </div>
-                </div>
+                  USD
+                </span>
+                12,345.68
               </td>
             </tr>
             <tr
@@ -144856,25 +141544,14 @@ exports[`Storyshots Views / Orders / Order list limits reached 1`] = `
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
               >
-                <div
-                  class="Money-container-id Money-containerRight-id"
+                <span
+                  class="Money-currency-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                  >
-                    335.84
-                  </div>
-                </div>
+                  USD
+                </span>
+                12,345.68
               </td>
             </tr>
             <tr
@@ -144943,25 +141620,14 @@ exports[`Storyshots Views / Orders / Order list limits reached 1`] = `
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
               >
-                <div
-                  class="Money-container-id Money-containerRight-id"
+                <span
+                  class="Money-currency-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                  >
-                    1042.15
-                  </div>
-                </div>
+                  USD
+                </span>
+                12,345.68
               </td>
             </tr>
             <tr
@@ -145030,200 +141696,91 @@ exports[`Storyshots Views / Orders / Order list limits reached 1`] = `
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
-              >
-                <div
-                  class="Money-container-id Money-containerRight-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                  >
-                    213.69
-                  </div>
-                </div>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
-              data-test-id="order-table-row"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
-              >
-                #13
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
-              >
-                <time
-                  class=""
-                  datetime="1536658648921"
-                  title="Sep 11, 2018 5:37 AM"
-                >
-                  in a month
-                </time>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
-              >
-                Anthony Gonzalez
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
-              >
-                <div
-                  class="StatusLabel-container-id"
-                >
-                  <div
-                    class="undefined StatusLabel-errorDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
-                  >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Unpaid
-                    </div>
-                  </div>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
-              >
-                <div
-                  class="StatusLabel-container-id"
-                >
-                  <div
-                    class="undefined StatusLabel-errorDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
-                  >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Cancelled
-                    </div>
-                  </div>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
-              >
-                <div
-                  class="Money-container-id Money-containerRight-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                  >
-                    367.03
-                  </div>
-                </div>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
-              data-test-id="order-table-row"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
-              >
-                #12
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
-              >
-                <time
-                  class=""
-                  datetime="1536658648750"
-                  title="Sep 11, 2018 5:37 AM"
-                >
-                  in a month
-                </time>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
-              >
-                Denise Freeman
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
-              >
-                <div
-                  class="StatusLabel-container-id"
-                >
-                  <div
-                    class="undefined StatusLabel-errorDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
-                  >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Unpaid
-                    </div>
-                  </div>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
-              >
-                <div
-                  class="StatusLabel-container-id"
-                >
-                  <div
-                    class="undefined StatusLabel-errorDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
-                  >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Cancelled
-                    </div>
-                  </div>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
+              >
+                <span
+                  class="Money-currency-id"
+                >
+                  USD
+                </span>
+                12,345.68
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
+              data-test-id="order-table-row"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
+              >
+                #13
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
+              >
+                <time
+                  class=""
+                  datetime="1536658648921"
+                  title="Sep 11, 2018 5:37 AM"
+                >
+                  in a month
+                </time>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
+              >
+                Anthony Gonzalez
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="Money-container-id Money-containerRight-id"
+                  class="StatusLabel-container-id"
                 >
                   <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
+                    class="undefined StatusLabel-errorDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
                   >
-                    USD
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Unpaid
+                    </div>
                   </div>
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
+              >
+                <div
+                  class="StatusLabel-container-id"
+                >
                   <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
+                    class="undefined StatusLabel-errorDot-id"
                   />
                   <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
+                    class="StatusLabel-textContainer-id"
                   >
-                    298.76
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Cancelled
+                    </div>
                   </div>
                 </div>
               </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
+              >
+                <span
+                  class="Money-currency-id"
+                >
+                  USD
+                </span>
+                12,345.68
+              </td>
             </tr>
             <tr
               class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
@@ -145232,14 +141789,14 @@ exports[`Storyshots Views / Orders / Order list limits reached 1`] = `
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
               >
-                #11
+                #12
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
               >
                 <time
                   class=""
-                  datetime="1536658648598"
+                  datetime="1536658648750"
                   title="Sep 11, 2018 5:37 AM"
                 >
                   in a month
@@ -145248,7 +141805,7 @@ exports[`Storyshots Views / Orders / Order list limits reached 1`] = `
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
               >
-                James Ball
+                Denise Freeman
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
@@ -145257,7 +141814,7 @@ exports[`Storyshots Views / Orders / Order list limits reached 1`] = `
                   class="StatusLabel-container-id"
                 >
                   <div
-                    class="undefined StatusLabel-successDot-id"
+                    class="undefined StatusLabel-errorDot-id"
                   />
                   <div
                     class="StatusLabel-textContainer-id"
@@ -145265,7 +141822,7 @@ exports[`Storyshots Views / Orders / Order list limits reached 1`] = `
                     <div
                       class="MuiTypography-root-id MuiTypography-body1-id"
                     >
-                      Fully paid
+                      Unpaid
                     </div>
                   </div>
                 </div>
@@ -145285,32 +141842,97 @@ exports[`Storyshots Views / Orders / Order list limits reached 1`] = `
                     <div
                       class="MuiTypography-root-id MuiTypography-body1-id"
                     >
-                      Unfulfilled
+                      Cancelled
                     </div>
                   </div>
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
+              >
+                <span
+                  class="Money-currency-id"
+                >
+                  USD
+                </span>
+                12,345.68
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
+              data-test-id="order-table-row"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
+              >
+                #11
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
+              >
+                <time
+                  class=""
+                  datetime="1536658648598"
+                  title="Sep 11, 2018 5:37 AM"
+                >
+                  in a month
+                </time>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
+              >
+                James Ball
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="Money-container-id Money-containerRight-id"
+                  class="StatusLabel-container-id"
                 >
                   <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
+                    class="undefined StatusLabel-successDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
                   >
-                    USD
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Fully paid
+                    </div>
                   </div>
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
+              >
+                <div
+                  class="StatusLabel-container-id"
+                >
                   <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
+                    class="undefined StatusLabel-errorDot-id"
                   />
                   <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
+                    class="StatusLabel-textContainer-id"
                   >
-                    663.69
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Unfulfilled
+                    </div>
                   </div>
                 </div>
               </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
+              >
+                <span
+                  class="Money-currency-id"
+                >
+                  USD
+                </span>
+                12,345.68
+              </td>
             </tr>
             <tr
               class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
@@ -145378,25 +142000,14 @@ exports[`Storyshots Views / Orders / Order list limits reached 1`] = `
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
               >
-                <div
-                  class="Money-container-id Money-containerRight-id"
+                <span
+                  class="Money-currency-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                  >
-                    280.41
-                  </div>
-                </div>
+                  USD
+                </span>
+                12,345.68
               </td>
             </tr>
             <tr
@@ -145465,25 +142076,14 @@ exports[`Storyshots Views / Orders / Order list limits reached 1`] = `
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
               >
-                <div
-                  class="Money-container-id Money-containerRight-id"
+                <span
+                  class="Money-currency-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                  >
-                    234.93
-                  </div>
-                </div>
+                  USD
+                </span>
+                12,345.68
               </td>
             </tr>
             <tr
@@ -145552,25 +142152,14 @@ exports[`Storyshots Views / Orders / Order list limits reached 1`] = `
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
               >
-                <div
-                  class="Money-container-id Money-containerRight-id"
+                <span
+                  class="Money-currency-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                  >
-                    485.19
-                  </div>
-                </div>
+                  USD
+                </span>
+                12,345.68
               </td>
             </tr>
             <tr
@@ -145639,25 +142228,14 @@ exports[`Storyshots Views / Orders / Order list limits reached 1`] = `
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
               >
-                <div
-                  class="Money-container-id Money-containerRight-id"
+                <span
+                  class="Money-currency-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                  >
-                    223.54
-                  </div>
-                </div>
+                  USD
+                </span>
+                12,345.68
               </td>
             </tr>
             <tr
@@ -145726,25 +142304,14 @@ exports[`Storyshots Views / Orders / Order list limits reached 1`] = `
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
               >
-                <div
-                  class="Money-container-id Money-containerRight-id"
+                <span
+                  class="Money-currency-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                  >
-                    237.55
-                  </div>
-                </div>
+                  USD
+                </span>
+                12,345.68
               </td>
             </tr>
             <tr
@@ -145813,25 +142380,14 @@ exports[`Storyshots Views / Orders / Order list limits reached 1`] = `
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
               >
-                <div
-                  class="Money-container-id Money-containerRight-id"
+                <span
+                  class="Money-currency-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                  >
-                    453.55
-                  </div>
-                </div>
+                  USD
+                </span>
+                12,345.68
               </td>
             </tr>
             <tr
@@ -145900,25 +142456,14 @@ exports[`Storyshots Views / Orders / Order list limits reached 1`] = `
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
               >
-                <div
-                  class="Money-container-id Money-containerRight-id"
+                <span
+                  class="Money-currency-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                  >
-                    812.67
-                  </div>
-                </div>
+                  USD
+                </span>
+                12,345.68
               </td>
             </tr>
             <tr
@@ -145987,25 +142532,14 @@ exports[`Storyshots Views / Orders / Order list limits reached 1`] = `
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
               >
-                <div
-                  class="Money-container-id Money-containerRight-id"
+                <span
+                  class="Money-currency-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                  >
-                    481.41
-                  </div>
-                </div>
+                  USD
+                </span>
+                12,345.68
               </td>
             </tr>
             <tr
@@ -146074,25 +142608,14 @@ exports[`Storyshots Views / Orders / Order list limits reached 1`] = `
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
               >
-                <div
-                  class="Money-container-id Money-containerRight-id"
+                <span
+                  class="Money-currency-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                  >
-                    569.19
-                  </div>
-                </div>
+                  USD
+                </span>
+                12,345.68
               </td>
             </tr>
             <tr
@@ -146161,25 +142684,14 @@ exports[`Storyshots Views / Orders / Order list limits reached 1`] = `
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
               >
-                <div
-                  class="Money-container-id Money-containerRight-id"
+                <span
+                  class="Money-currency-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                  >
-                    557.00
-                  </div>
-                </div>
+                  USD
+                </span>
+                12,345.68
               </td>
             </tr>
           </tbody>
@@ -146606,7 +143118,7 @@ exports[`Storyshots Views / Orders / Order list loading 1`] = `
                 </span>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
               >
                 <span
                   class="Skeleton-skeleton-id"
@@ -147034,25 +143546,14 @@ exports[`Storyshots Views / Orders / Order list no limits 1`] = `
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
               >
-                <div
-                  class="Money-container-id Money-containerRight-id"
+                <span
+                  class="Money-currency-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                  >
-                    305.17
-                  </div>
-                </div>
+                  USD
+                </span>
+                12,345.68
               </td>
             </tr>
             <tr
@@ -147121,25 +143622,14 @@ exports[`Storyshots Views / Orders / Order list no limits 1`] = `
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
               >
-                <div
-                  class="Money-container-id Money-containerRight-id"
+                <span
+                  class="Money-currency-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                  >
-                    1215.89
-                  </div>
-                </div>
+                  USD
+                </span>
+                12,345.68
               </td>
             </tr>
             <tr
@@ -147208,25 +143698,14 @@ exports[`Storyshots Views / Orders / Order list no limits 1`] = `
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
               >
-                <div
-                  class="Money-container-id Money-containerRight-id"
+                <span
+                  class="Money-currency-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                  >
-                    321.71
-                  </div>
-                </div>
+                  USD
+                </span>
+                12,345.68
               </td>
             </tr>
             <tr
@@ -147295,25 +143774,14 @@ exports[`Storyshots Views / Orders / Order list no limits 1`] = `
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
               >
-                <div
-                  class="Money-container-id Money-containerRight-id"
+                <span
+                  class="Money-currency-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                  >
-                    271.95
-                  </div>
-                </div>
+                  USD
+                </span>
+                12,345.68
               </td>
             </tr>
             <tr
@@ -147382,25 +143850,14 @@ exports[`Storyshots Views / Orders / Order list no limits 1`] = `
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
               >
-                <div
-                  class="Money-container-id Money-containerRight-id"
+                <span
+                  class="Money-currency-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                  >
-                    335.84
-                  </div>
-                </div>
+                  USD
+                </span>
+                12,345.68
               </td>
             </tr>
             <tr
@@ -147469,25 +143926,14 @@ exports[`Storyshots Views / Orders / Order list no limits 1`] = `
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
               >
-                <div
-                  class="Money-container-id Money-containerRight-id"
+                <span
+                  class="Money-currency-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                  >
-                    1042.15
-                  </div>
-                </div>
+                  USD
+                </span>
+                12,345.68
               </td>
             </tr>
             <tr
@@ -147556,25 +144002,14 @@ exports[`Storyshots Views / Orders / Order list no limits 1`] = `
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
               >
-                <div
-                  class="Money-container-id Money-containerRight-id"
+                <span
+                  class="Money-currency-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                  >
-                    213.69
-                  </div>
-                </div>
+                  USD
+                </span>
+                12,345.68
               </td>
             </tr>
             <tr
@@ -147643,25 +144078,14 @@ exports[`Storyshots Views / Orders / Order list no limits 1`] = `
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
               >
-                <div
-                  class="Money-container-id Money-containerRight-id"
+                <span
+                  class="Money-currency-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                  >
-                    367.03
-                  </div>
-                </div>
+                  USD
+                </span>
+                12,345.68
               </td>
             </tr>
             <tr
@@ -147730,25 +144154,14 @@ exports[`Storyshots Views / Orders / Order list no limits 1`] = `
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
               >
-                <div
-                  class="Money-container-id Money-containerRight-id"
+                <span
+                  class="Money-currency-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                  >
-                    298.76
-                  </div>
-                </div>
+                  USD
+                </span>
+                12,345.68
               </td>
             </tr>
             <tr
@@ -147817,25 +144230,14 @@ exports[`Storyshots Views / Orders / Order list no limits 1`] = `
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
               >
-                <div
-                  class="Money-container-id Money-containerRight-id"
+                <span
+                  class="Money-currency-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                  >
-                    663.69
-                  </div>
-                </div>
+                  USD
+                </span>
+                12,345.68
               </td>
             </tr>
             <tr
@@ -147904,25 +144306,14 @@ exports[`Storyshots Views / Orders / Order list no limits 1`] = `
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
               >
-                <div
-                  class="Money-container-id Money-containerRight-id"
+                <span
+                  class="Money-currency-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                  >
-                    280.41
-                  </div>
-                </div>
+                  USD
+                </span>
+                12,345.68
               </td>
             </tr>
             <tr
@@ -147991,25 +144382,14 @@ exports[`Storyshots Views / Orders / Order list no limits 1`] = `
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
               >
-                <div
-                  class="Money-container-id Money-containerRight-id"
+                <span
+                  class="Money-currency-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                  >
-                    234.93
-                  </div>
-                </div>
+                  USD
+                </span>
+                12,345.68
               </td>
             </tr>
             <tr
@@ -148078,25 +144458,14 @@ exports[`Storyshots Views / Orders / Order list no limits 1`] = `
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
               >
-                <div
-                  class="Money-container-id Money-containerRight-id"
+                <span
+                  class="Money-currency-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                  >
-                    485.19
-                  </div>
-                </div>
+                  USD
+                </span>
+                12,345.68
               </td>
             </tr>
             <tr
@@ -148165,25 +144534,14 @@ exports[`Storyshots Views / Orders / Order list no limits 1`] = `
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
               >
-                <div
-                  class="Money-container-id Money-containerRight-id"
+                <span
+                  class="Money-currency-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                  >
-                    223.54
-                  </div>
-                </div>
+                  USD
+                </span>
+                12,345.68
               </td>
             </tr>
             <tr
@@ -148252,25 +144610,14 @@ exports[`Storyshots Views / Orders / Order list no limits 1`] = `
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
               >
-                <div
-                  class="Money-container-id Money-containerRight-id"
+                <span
+                  class="Money-currency-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                  >
-                    237.55
-                  </div>
-                </div>
+                  USD
+                </span>
+                12,345.68
               </td>
             </tr>
             <tr
@@ -148339,25 +144686,14 @@ exports[`Storyshots Views / Orders / Order list no limits 1`] = `
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
               >
-                <div
-                  class="Money-container-id Money-containerRight-id"
+                <span
+                  class="Money-currency-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                  >
-                    453.55
-                  </div>
-                </div>
+                  USD
+                </span>
+                12,345.68
               </td>
             </tr>
             <tr
@@ -148426,25 +144762,14 @@ exports[`Storyshots Views / Orders / Order list no limits 1`] = `
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
               >
-                <div
-                  class="Money-container-id Money-containerRight-id"
+                <span
+                  class="Money-currency-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                  >
-                    812.67
-                  </div>
-                </div>
+                  USD
+                </span>
+                12,345.68
               </td>
             </tr>
             <tr
@@ -148513,25 +144838,14 @@ exports[`Storyshots Views / Orders / Order list no limits 1`] = `
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
               >
-                <div
-                  class="Money-container-id Money-containerRight-id"
+                <span
+                  class="Money-currency-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                  >
-                    481.41
-                  </div>
-                </div>
+                  USD
+                </span>
+                12,345.68
               </td>
             </tr>
             <tr
@@ -148600,25 +144914,14 @@ exports[`Storyshots Views / Orders / Order list no limits 1`] = `
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
               >
-                <div
-                  class="Money-container-id Money-containerRight-id"
+                <span
+                  class="Money-currency-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                  >
-                    569.19
-                  </div>
-                </div>
+                  USD
+                </span>
+                12,345.68
               </td>
             </tr>
             <tr
@@ -148687,25 +144990,14 @@ exports[`Storyshots Views / Orders / Order list no limits 1`] = `
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
               >
-                <div
-                  class="Money-container-id Money-containerRight-id"
+                <span
+                  class="Money-currency-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-alignRight-id"
-                  >
-                    USD
-                  </div>
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                  >
-                    557.00
-                  </div>
-                </div>
+                  USD
+                </span>
+                12,345.68
               </td>
             </tr>
           </tbody>
@@ -149231,8 +145523,17 @@ exports[`Storyshots Views / Orders / Order settings default 1`] = `
                     focusable="false"
                     viewBox="0 0 24 24"
                   >
-                    <path
-                      d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+                    <rect
+                      fill="transparent"
+                      height="22"
+                      rx="2"
+                      ry="2"
+                      stroke="currentColor"
+                      stroke-linejoin="round"
+                      stroke-width="2"
+                      width="22"
+                      x="1"
+                      y="1"
                     />
                   </svg>
                 </span>
@@ -149256,23 +145557,18 @@ exports[`Storyshots Views / Orders / Order settings default 1`] = `
           data-test="OrderFulfillmentSettings"
         >
           <div
-            class="CardTitle-root-id"
+            class="MuiCardHeader-root-id"
           >
-            <span
-              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
-            >
-              Fulfillment settings
-            </span>
             <div
-              class="CardTitle-toolbar-id"
-            />
+              class="MuiCardHeader-content-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
+              >
+                Fulfillment settings
+              </span>
+            </div>
           </div>
-          <div
-            class="CardTitle-children-id"
-          />
-          <hr
-            class="CardTitle-hr-id"
-          />
           <div
             class="MuiCardContent-root-id"
           >
@@ -149300,9 +145596,28 @@ exports[`Storyshots Views / Orders / Order settings default 1`] = `
                     focusable="false"
                     viewBox="0 0 24 24"
                   >
-                    <path
-                      d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
-                    />
+                    <svg
+                      fill="none"
+                      height="24"
+                      viewBox="0 0 24 24"
+                      width="24"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <rect
+                        fill="currentColor"
+                        height="23"
+                        rx="1.5"
+                        width="23"
+                        x="0.5"
+                        y="0.5"
+                      />
+                      <path
+                        clip-rule="evenodd"
+                        d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
+                        fill="var(--background-paper)"
+                        fill-rule="evenodd"
+                      />
+                    </svg>
                   </svg>
                 </span>
               </span>
@@ -149344,9 +145659,28 @@ exports[`Storyshots Views / Orders / Order settings default 1`] = `
                     focusable="false"
                     viewBox="0 0 24 24"
                   >
-                    <path
-                      d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
-                    />
+                    <svg
+                      fill="none"
+                      height="24"
+                      viewBox="0 0 24 24"
+                      width="24"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <rect
+                        fill="currentColor"
+                        height="23"
+                        rx="1.5"
+                        width="23"
+                        x="0.5"
+                        y="0.5"
+                      />
+                      <path
+                        clip-rule="evenodd"
+                        d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
+                        fill="var(--background-paper)"
+                        fill-rule="evenodd"
+                      />
+                    </svg>
                   </svg>
                 </span>
               </span>
@@ -149510,8 +145844,17 @@ exports[`Storyshots Views / Orders / Order settings loading 1`] = `
                     focusable="false"
                     viewBox="0 0 24 24"
                   >
-                    <path
-                      d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+                    <rect
+                      fill="transparent"
+                      height="22"
+                      rx="2"
+                      ry="2"
+                      stroke="currentColor"
+                      stroke-linejoin="round"
+                      stroke-width="2"
+                      width="22"
+                      x="1"
+                      y="1"
                     />
                   </svg>
                 </span>
@@ -149535,23 +145878,18 @@ exports[`Storyshots Views / Orders / Order settings loading 1`] = `
           data-test="OrderFulfillmentSettings"
         >
           <div
-            class="CardTitle-root-id"
+            class="MuiCardHeader-root-id"
           >
-            <span
-              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
-            >
-              Fulfillment settings
-            </span>
             <div
-              class="CardTitle-toolbar-id"
-            />
+              class="MuiCardHeader-content-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
+              >
+                Fulfillment settings
+              </span>
+            </div>
           </div>
-          <div
-            class="CardTitle-children-id"
-          />
-          <hr
-            class="CardTitle-hr-id"
-          />
           <div
             class="MuiCardContent-root-id"
           >
@@ -149580,8 +145918,17 @@ exports[`Storyshots Views / Orders / Order settings loading 1`] = `
                     focusable="false"
                     viewBox="0 0 24 24"
                   >
-                    <path
-                      d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+                    <rect
+                      fill="transparent"
+                      height="22"
+                      rx="2"
+                      ry="2"
+                      stroke="currentColor"
+                      stroke-linejoin="round"
+                      stroke-width="2"
+                      width="22"
+                      x="1"
+                      y="1"
                     />
                   </svg>
                 </span>
@@ -149625,8 +145972,17 @@ exports[`Storyshots Views / Orders / Order settings loading 1`] = `
                     focusable="false"
                     viewBox="0 0 24 24"
                   >
-                    <path
-                      d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+                    <rect
+                      fill="transparent"
+                      height="22"
+                      rx="2"
+                      ry="2"
+                      stroke="currentColor"
+                      stroke-linejoin="round"
+                      stroke-width="2"
+                      width="22"
+                      x="1"
+                      y="1"
                     />
                   </svg>
                 </span>
@@ -150161,23 +146517,12 @@ exports[`Storyshots Views / Orders / Refund order miscellaneous 1`] = `
                 >
                   Authorized Amount
                   <div>
-                    <div
-                      class="Money-container-id"
+                    <span
+                      class="Money-currency-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id"
-                      >
-                        USD
-                      </div>
-                      <div
-                        class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                      />
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        744.38
-                      </div>
-                    </div>
+                      USD
+                    </span>
+                    12,345.68
                   </div>
                 </div>
                 <div
@@ -150185,23 +146530,12 @@ exports[`Storyshots Views / Orders / Refund order miscellaneous 1`] = `
                 >
                   Previously refunded
                   <div>
-                    <div
-                      class="Money-container-id"
+                    <span
+                      class="Money-currency-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id"
-                      >
-                        USD
-                      </div>
-                      <div
-                        class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                      />
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        -100.00
-                      </div>
-                    </div>
+                      USD
+                    </span>
+                    12,345.68
                   </div>
                 </div>
                 <div
@@ -150209,23 +146543,12 @@ exports[`Storyshots Views / Orders / Refund order miscellaneous 1`] = `
                 >
                   Max Refund
                   <div>
-                    <div
-                      class="Money-container-id"
+                    <span
+                      class="Money-currency-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id"
-                      >
-                        USD
-                      </div>
-                      <div
-                        class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                      />
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        644.38
-                      </div>
-                    </div>
+                      USD
+                    </span>
+                    12,345.68
                   </div>
                 </div>
               </div>
@@ -150549,23 +146872,12 @@ exports[`Storyshots Views / Orders / Refund order products 1`] = `
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id"
                   >
-                    <div
-                      class="Money-container-id"
+                    <span
+                      class="Money-currency-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id"
-                      >
-                        USD
-                      </div>
-                      <div
-                        class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                      />
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        26.02
-                      </div>
-                    </div>
+                      USD
+                    </span>
+                    12,345.68
                   </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id OrderRefundUnfulfilledProducts-colQuantity-id"
@@ -150612,23 +146924,12 @@ exports[`Storyshots Views / Orders / Refund order products 1`] = `
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id"
                   >
-                    <div
-                      class="Money-container-id"
+                    <span
+                      class="Money-currency-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id"
-                      >
-                        USD
-                      </div>
-                      <div
-                        class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                      />
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        0.00
-                      </div>
-                    </div>
+                      USD
+                    </span>
+                    12,345.68
                   </td>
                 </tr>
                 <tr
@@ -150660,23 +146961,12 @@ exports[`Storyshots Views / Orders / Refund order products 1`] = `
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id"
                   >
-                    <div
-                      class="Money-container-id"
+                    <span
+                      class="Money-currency-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id"
-                      >
-                        USD
-                      </div>
-                      <div
-                        class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                      />
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        10.00
-                      </div>
-                    </div>
+                      USD
+                    </span>
+                    12,345.68
                   </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id OrderRefundUnfulfilledProducts-colQuantity-id"
@@ -150723,23 +147013,12 @@ exports[`Storyshots Views / Orders / Refund order products 1`] = `
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id"
                   >
-                    <div
-                      class="Money-container-id"
+                    <span
+                      class="Money-currency-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id"
-                      >
-                        USD
-                      </div>
-                      <div
-                        class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                      />
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        0.00
-                      </div>
-                    </div>
+                      USD
+                    </span>
+                    12,345.68
                   </td>
                 </tr>
               </tbody>
@@ -150853,23 +147132,12 @@ exports[`Storyshots Views / Orders / Refund order products 1`] = `
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id"
                   >
-                    <div
-                      class="Money-container-id"
+                    <span
+                      class="Money-currency-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id"
-                      >
-                        USD
-                      </div>
-                      <div
-                        class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                      />
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        26.02
-                      </div>
-                    </div>
+                      USD
+                    </span>
+                    12,345.68
                   </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id OrderRefundFulfilledProducts-colQuantity-id"
@@ -150916,23 +147184,12 @@ exports[`Storyshots Views / Orders / Refund order products 1`] = `
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id"
                   >
-                    <div
-                      class="Money-container-id"
+                    <span
+                      class="Money-currency-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id"
-                      >
-                        USD
-                      </div>
-                      <div
-                        class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                      />
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        0.00
-                      </div>
-                    </div>
+                      USD
+                    </span>
+                    12,345.68
                   </td>
                 </tr>
                 <tr
@@ -150964,23 +147221,12 @@ exports[`Storyshots Views / Orders / Refund order products 1`] = `
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id"
                   >
-                    <div
-                      class="Money-container-id"
+                    <span
+                      class="Money-currency-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id"
-                      >
-                        USD
-                      </div>
-                      <div
-                        class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                      />
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        10.00
-                      </div>
-                    </div>
+                      USD
+                    </span>
+                    12,345.68
                   </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id OrderRefundFulfilledProducts-colQuantity-id"
@@ -151027,23 +147273,12 @@ exports[`Storyshots Views / Orders / Refund order products 1`] = `
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id"
                   >
-                    <div
-                      class="Money-container-id"
+                    <span
+                      class="Money-currency-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id"
-                      >
-                        USD
-                      </div>
-                      <div
-                        class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                      />
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        0.00
-                      </div>
-                    </div>
+                      USD
+                    </span>
+                    12,345.68
                   </td>
                 </tr>
               </tbody>
@@ -151157,23 +147392,12 @@ exports[`Storyshots Views / Orders / Refund order products 1`] = `
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id"
                   >
-                    <div
-                      class="Money-container-id"
+                    <span
+                      class="Money-currency-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id"
-                      >
-                        USD
-                      </div>
-                      <div
-                        class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                      />
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        26.02
-                      </div>
-                    </div>
+                      USD
+                    </span>
+                    12,345.68
                   </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id OrderRefundFulfilledProducts-colQuantity-id"
@@ -151220,23 +147444,12 @@ exports[`Storyshots Views / Orders / Refund order products 1`] = `
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id"
                   >
-                    <div
-                      class="Money-container-id"
+                    <span
+                      class="Money-currency-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id"
-                      >
-                        USD
-                      </div>
-                      <div
-                        class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                      />
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        0.00
-                      </div>
-                    </div>
+                      USD
+                    </span>
+                    12,345.68
                   </td>
                 </tr>
                 <tr
@@ -151268,23 +147481,12 @@ exports[`Storyshots Views / Orders / Refund order products 1`] = `
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id"
                   >
-                    <div
-                      class="Money-container-id"
+                    <span
+                      class="Money-currency-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id"
-                      >
-                        USD
-                      </div>
-                      <div
-                        class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                      />
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        10.00
-                      </div>
-                    </div>
+                      USD
+                    </span>
+                    12,345.68
                   </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id OrderRefundFulfilledProducts-colQuantity-id"
@@ -151331,23 +147533,12 @@ exports[`Storyshots Views / Orders / Refund order products 1`] = `
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id"
                   >
-                    <div
-                      class="Money-container-id"
+                    <span
+                      class="Money-currency-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id"
-                      >
-                        USD
-                      </div>
-                      <div
-                        class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                      />
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        0.00
-                      </div>
-                    </div>
+                      USD
+                    </span>
+                    12,345.68
                   </td>
                 </tr>
               </tbody>
@@ -151476,23 +147667,12 @@ exports[`Storyshots Views / Orders / Refund order products 1`] = `
                   >
                     Authorized Amount
                     <div>
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          744.38
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </div>
                   </div>
                   <div
@@ -151500,23 +147680,12 @@ exports[`Storyshots Views / Orders / Refund order products 1`] = `
                   >
                     Selected Products Value
                     <div>
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          0.00
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </div>
                   </div>
                   <div
@@ -151524,23 +147693,12 @@ exports[`Storyshots Views / Orders / Refund order products 1`] = `
                   >
                     Previously refunded
                     <div>
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          -100.00
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </div>
                   </div>
                   <div
@@ -151548,23 +147706,12 @@ exports[`Storyshots Views / Orders / Refund order products 1`] = `
                   >
                     Max Refund
                     <div>
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          644.38
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </div>
                   </div>
                   <div
@@ -151572,23 +147719,12 @@ exports[`Storyshots Views / Orders / Refund order products 1`] = `
                   >
                     Refund total amount
                     <div>
-                      <div
-                        class="Money-container-id"
+                      <span
+                        class="Money-currency-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          USD
-                        </div>
-                        <div
-                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                        />
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          0.00
-                        </div>
-                      </div>
+                        USD
+                      </span>
+                      12,345.68
                     </div>
                   </div>
                 </div>
@@ -158542,17 +154678,17 @@ exports[`Storyshots Views / Pages / Page list default 1`] = `
                 </span>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id TableCellHeader-root-id PageList-colTitle-id TableCellHeader-notSortable-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id PageList-colTitle-id"
               >
                 About
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id TableCellHeader-root-id PageList-colSlug-id TableCellHeader-notSortable-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id PageList-colSlug-id"
               >
                 about
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id TableCellHeader-root-id PageList-colVisibility-id TableCellHeader-notSortable-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id PageList-colVisibility-id"
               >
                 <div
                   class="StatusLabel-container-id"
@@ -158613,17 +154749,17 @@ exports[`Storyshots Views / Pages / Page list default 1`] = `
                 </span>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id TableCellHeader-root-id PageList-colTitle-id TableCellHeader-notSortable-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id PageList-colTitle-id"
               >
                 About
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id TableCellHeader-root-id PageList-colSlug-id TableCellHeader-notSortable-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id PageList-colSlug-id"
               >
                 about
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id TableCellHeader-root-id PageList-colVisibility-id TableCellHeader-notSortable-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id PageList-colVisibility-id"
               >
                 <div
                   class="StatusLabel-container-id"
@@ -158684,17 +154820,17 @@ exports[`Storyshots Views / Pages / Page list default 1`] = `
                 </span>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id TableCellHeader-root-id PageList-colTitle-id TableCellHeader-notSortable-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id PageList-colTitle-id"
               >
                 About
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id TableCellHeader-root-id PageList-colSlug-id TableCellHeader-notSortable-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id PageList-colSlug-id"
               >
                 about
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id TableCellHeader-root-id PageList-colVisibility-id TableCellHeader-notSortable-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id PageList-colVisibility-id"
               >
                 <div
                   class="StatusLabel-container-id"
@@ -158755,17 +154891,17 @@ exports[`Storyshots Views / Pages / Page list default 1`] = `
                 </span>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id TableCellHeader-root-id PageList-colTitle-id TableCellHeader-notSortable-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id PageList-colTitle-id"
               >
                 About
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id TableCellHeader-root-id PageList-colSlug-id TableCellHeader-notSortable-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id PageList-colSlug-id"
               >
                 about
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id TableCellHeader-root-id PageList-colVisibility-id TableCellHeader-notSortable-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id PageList-colVisibility-id"
               >
                 <div
                   class="StatusLabel-container-id"
@@ -159066,7 +155202,7 @@ exports[`Storyshots Views / Pages / Page list loading 1`] = `
                 </span>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id TableCellHeader-root-id PageList-colTitle-id TableCellHeader-notSortable-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id PageList-colTitle-id"
               >
                 <span
                   class="Skeleton-skeleton-id"
@@ -159076,7 +155212,7 @@ exports[`Storyshots Views / Pages / Page list loading 1`] = `
                 </span>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id TableCellHeader-root-id PageList-colSlug-id TableCellHeader-notSortable-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id PageList-colSlug-id"
               >
                 <span
                   class="Skeleton-skeleton-id"
@@ -159086,7 +155222,7 @@ exports[`Storyshots Views / Pages / Page list loading 1`] = `
                 </span>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id TableCellHeader-root-id PageList-colVisibility-id TableCellHeader-notSortable-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id PageList-colVisibility-id"
               >
                 <span
                   class="Skeleton-skeleton-id"
@@ -166021,12 +162157,6 @@ exports[`Storyshots Views / Plugins / Plugin details default 1`] = `
                 </span>
               </div>
             </div>
-            <div
-              class="CardTitle-children-id"
-            />
-            <hr
-              class="CardTitle-hr-id"
-            />
             <div>
               <div
                 class="PluginDetailsChannelsCardContent-itemContainer-id"
@@ -166199,12 +162329,6 @@ exports[`Storyshots Views / Plugins / Plugin details form errors 1`] = `
                 </span>
               </div>
             </div>
-            <div
-              class="CardTitle-children-id"
-            />
-            <hr
-              class="CardTitle-hr-id"
-            />
             <div>
               <div
                 class="PluginDetailsChannelsCardContent-itemContainer-id"
@@ -166533,12 +162657,6 @@ exports[`Storyshots Views / Plugins / Plugin details not configurable 1`] = `
                 </span>
               </div>
             </div>
-            <div
-              class="CardTitle-children-id"
-            />
-            <hr
-              class="CardTitle-hr-id"
-            />
             <div>
               <div
                 class="PluginDetailsChannelsCardContent-itemContainer-id"
@@ -167784,30 +163902,25 @@ exports[`Storyshots Views / Product types / Create product type default 1`] = `
                           type="radio"
                           value="NORMAL"
                         />
-                        <div
-                          class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          viewBox="0 0 24 24"
                         >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
-                            />
-                          </svg>
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
-                            />
-                          </svg>
-                        </div>
+                          <circle
+                            cx="12"
+                            cy="12"
+                            fill="currentColor"
+                            r="12"
+                          />
+                          <circle
+                            cx="12"
+                            cy="12"
+                            fill="var(--background-paper)"
+                            r="5"
+                          />
+                        </svg>
                       </span>
                     </span>
                     <span
@@ -167841,30 +163954,21 @@ exports[`Storyshots Views / Product types / Create product type default 1`] = `
                           type="radio"
                           value="GIFT_CARD"
                         />
-                        <div
-                          class="PrivateRadioButtonIcon-root-id"
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          viewBox="0 0 24 24"
                         >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
-                            />
-                          </svg>
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
-                            />
-                          </svg>
-                        </div>
+                          <circle
+                            cx="12"
+                            cy="12"
+                            fill="var(--background-paper)"
+                            r="11"
+                            stroke="currentColor"
+                            stroke-width="2"
+                          />
+                        </svg>
                       </span>
                     </span>
                     <span
@@ -168322,30 +164426,25 @@ exports[`Storyshots Views / Product types / Create product type form errors 1`]
                           type="radio"
                           value="NORMAL"
                         />
-                        <div
-                          class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          viewBox="0 0 24 24"
                         >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
-                            />
-                          </svg>
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
-                            />
-                          </svg>
-                        </div>
+                          <circle
+                            cx="12"
+                            cy="12"
+                            fill="currentColor"
+                            r="12"
+                          />
+                          <circle
+                            cx="12"
+                            cy="12"
+                            fill="var(--background-paper)"
+                            r="5"
+                          />
+                        </svg>
                       </span>
                     </span>
                     <span
@@ -168379,30 +164478,21 @@ exports[`Storyshots Views / Product types / Create product type form errors 1`]
                           type="radio"
                           value="GIFT_CARD"
                         />
-                        <div
-                          class="PrivateRadioButtonIcon-root-id"
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          viewBox="0 0 24 24"
                         >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
-                            />
-                          </svg>
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
-                            />
-                          </svg>
-                        </div>
+                          <circle
+                            cx="12"
+                            cy="12"
+                            fill="var(--background-paper)"
+                            r="11"
+                            stroke="currentColor"
+                            stroke-width="2"
+                          />
+                        </svg>
                       </span>
                     </span>
                     <span
@@ -168864,30 +164954,25 @@ exports[`Storyshots Views / Product types / Create product type loading 1`] = `
                           type="radio"
                           value="NORMAL"
                         />
-                        <div
-                          class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          viewBox="0 0 24 24"
                         >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
-                            />
-                          </svg>
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
-                            />
-                          </svg>
-                        </div>
+                          <circle
+                            cx="12"
+                            cy="12"
+                            fill="currentColor"
+                            r="12"
+                          />
+                          <circle
+                            cx="12"
+                            cy="12"
+                            fill="var(--background-paper)"
+                            r="5"
+                          />
+                        </svg>
                       </span>
                     </span>
                     <span
@@ -168923,30 +165008,21 @@ exports[`Storyshots Views / Product types / Create product type loading 1`] = `
                           type="radio"
                           value="GIFT_CARD"
                         />
-                        <div
-                          class="PrivateRadioButtonIcon-root-id"
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          viewBox="0 0 24 24"
                         >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
-                            />
-                          </svg>
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
-                            />
-                          </svg>
-                        </div>
+                          <circle
+                            cx="12"
+                            cy="12"
+                            fill="var(--background-paper)"
+                            r="11"
+                            stroke="currentColor"
+                            stroke-width="2"
+                          />
+                        </svg>
                       </span>
                     </span>
                     <span
@@ -169402,30 +165478,25 @@ exports[`Storyshots Views / Product types / Product type details default 1`] = `
                           type="radio"
                           value="NORMAL"
                         />
-                        <div
-                          class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          viewBox="0 0 24 24"
                         >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
-                            />
-                          </svg>
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
-                            />
-                          </svg>
-                        </div>
+                          <circle
+                            cx="12"
+                            cy="12"
+                            fill="currentColor"
+                            r="12"
+                          />
+                          <circle
+                            cx="12"
+                            cy="12"
+                            fill="var(--background-paper)"
+                            r="5"
+                          />
+                        </svg>
                       </span>
                     </span>
                     <span
@@ -169459,30 +165530,21 @@ exports[`Storyshots Views / Product types / Product type details default 1`] = `
                           type="radio"
                           value="GIFT_CARD"
                         />
-                        <div
-                          class="PrivateRadioButtonIcon-root-id"
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          viewBox="0 0 24 24"
                         >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
-                            />
-                          </svg>
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
-                            />
-                          </svg>
-                        </div>
+                          <circle
+                            cx="12"
+                            cy="12"
+                            fill="var(--background-paper)"
+                            r="11"
+                            stroke="currentColor"
+                            stroke-width="2"
+                          />
+                        </svg>
                       </span>
                     </span>
                     <span
@@ -170533,30 +166595,25 @@ exports[`Storyshots Views / Product types / Product type details form errors 1`]
                           type="radio"
                           value="NORMAL"
                         />
-                        <div
-                          class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          viewBox="0 0 24 24"
                         >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
-                            />
-                          </svg>
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
-                            />
-                          </svg>
-                        </div>
+                          <circle
+                            cx="12"
+                            cy="12"
+                            fill="currentColor"
+                            r="12"
+                          />
+                          <circle
+                            cx="12"
+                            cy="12"
+                            fill="var(--background-paper)"
+                            r="5"
+                          />
+                        </svg>
                       </span>
                     </span>
                     <span
@@ -170590,30 +166647,21 @@ exports[`Storyshots Views / Product types / Product type details form errors 1`]
                           type="radio"
                           value="GIFT_CARD"
                         />
-                        <div
-                          class="PrivateRadioButtonIcon-root-id"
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          viewBox="0 0 24 24"
                         >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
-                            />
-                          </svg>
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
-                            />
-                          </svg>
-                        </div>
+                          <circle
+                            cx="12"
+                            cy="12"
+                            fill="var(--background-paper)"
+                            r="11"
+                            stroke="currentColor"
+                            stroke-width="2"
+                          />
+                        </svg>
                       </span>
                     </span>
                     <span
@@ -171668,30 +167716,25 @@ exports[`Storyshots Views / Product types / Product type details loading 1`] = `
                           type="radio"
                           value="NORMAL"
                         />
-                        <div
-                          class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          viewBox="0 0 24 24"
                         >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
-                            />
-                          </svg>
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
-                            />
-                          </svg>
-                        </div>
+                          <circle
+                            cx="12"
+                            cy="12"
+                            fill="currentColor"
+                            r="12"
+                          />
+                          <circle
+                            cx="12"
+                            cy="12"
+                            fill="var(--background-paper)"
+                            r="5"
+                          />
+                        </svg>
                       </span>
                     </span>
                     <span
@@ -171727,30 +167770,21 @@ exports[`Storyshots Views / Product types / Product type details loading 1`] = `
                           type="radio"
                           value="GIFT_CARD"
                         />
-                        <div
-                          class="PrivateRadioButtonIcon-root-id"
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          viewBox="0 0 24 24"
                         >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
-                            />
-                          </svg>
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
-                            />
-                          </svg>
-                        </div>
+                          <circle
+                            cx="12"
+                            cy="12"
+                            fill="var(--background-paper)"
+                            r="11"
+                            stroke="currentColor"
+                            stroke-width="2"
+                          />
+                        </svg>
                       </span>
                     </span>
                     <span
@@ -172387,30 +168421,25 @@ exports[`Storyshots Views / Product types / Product type details no attributes 1
                           type="radio"
                           value="NORMAL"
                         />
-                        <div
-                          class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          viewBox="0 0 24 24"
                         >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
-                            />
-                          </svg>
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
-                            />
-                          </svg>
-                        </div>
+                          <circle
+                            cx="12"
+                            cy="12"
+                            fill="currentColor"
+                            r="12"
+                          />
+                          <circle
+                            cx="12"
+                            cy="12"
+                            fill="var(--background-paper)"
+                            r="5"
+                          />
+                        </svg>
                       </span>
                     </span>
                     <span
@@ -172444,30 +168473,21 @@ exports[`Storyshots Views / Product types / Product type details no attributes 1
                           type="radio"
                           value="GIFT_CARD"
                         />
-                        <div
-                          class="PrivateRadioButtonIcon-root-id"
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          viewBox="0 0 24 24"
                         >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
-                            />
-                          </svg>
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
-                            />
-                          </svg>
-                        </div>
+                          <circle
+                            cx="12"
+                            cy="12"
+                            fill="var(--background-paper)"
+                            r="11"
+                            stroke="currentColor"
+                            stroke-width="2"
+                          />
+                        </svg>
                       </span>
                     </span>
                     <span
@@ -184993,21 +181013,16 @@ exports[`Storyshots Views / Products / Create product variant add first variant
             <div
               class="MuiCardHeader-root-id"
             >
-              <span
-                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
-              >
-                Checkout limits
-              </span>
               <div
-                class="CardTitle-toolbar-id"
-              />
+                class="MuiCardHeader-content-id"
+              >
+                <span
+                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
+                >
+                  Checkout limits
+                </span>
+              </div>
             </div>
-            <div
-              class="CardTitle-children-id"
-            />
-            <hr
-              class="CardTitle-hr-id"
-            />
             <div
               class="MuiCardContent-root-id"
             >
@@ -185060,13 +181075,8 @@ exports[`Storyshots Views / Products / Create product variant add first variant
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
           >
             <div
-              class="CardTitle-root-id"
+              class="MuiCardHeader-root-id"
             >
-              <span
-                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
-              >
-                Shipping
-              </span>
               <div
                 class="MuiCardHeader-content-id"
               >
@@ -185239,8 +181249,17 @@ exports[`Storyshots Views / Products / Create product variant add first variant
                       focusable="false"
                       viewBox="0 0 24 24"
                     >
-                      <path
-                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+                      <rect
+                        fill="transparent"
+                        height="22"
+                        rx="2"
+                        ry="2"
+                        stroke="currentColor"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        width="22"
+                        x="1"
+                        y="1"
                       />
                     </svg>
                   </span>
@@ -186019,21 +182038,16 @@ exports[`Storyshots Views / Products / Create product variant default 1`] = `
             <div
               class="MuiCardHeader-root-id"
             >
-              <span
-                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
-              >
-                Checkout limits
-              </span>
               <div
-                class="CardTitle-toolbar-id"
-              />
+                class="MuiCardHeader-content-id"
+              >
+                <span
+                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
+                >
+                  Checkout limits
+                </span>
+              </div>
             </div>
-            <div
-              class="CardTitle-children-id"
-            />
-            <hr
-              class="CardTitle-hr-id"
-            />
             <div
               class="MuiCardContent-root-id"
             >
@@ -186086,13 +182100,8 @@ exports[`Storyshots Views / Products / Create product variant default 1`] = `
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
           >
             <div
-              class="CardTitle-root-id"
+              class="MuiCardHeader-root-id"
             >
-              <span
-                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
-              >
-                Shipping
-              </span>
               <div
                 class="MuiCardHeader-content-id"
               >
@@ -186265,8 +182274,17 @@ exports[`Storyshots Views / Products / Create product variant default 1`] = `
                       focusable="false"
                       viewBox="0 0 24 24"
                     >
-                      <path
-                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+                      <rect
+                        fill="transparent"
+                        height="22"
+                        rx="2"
+                        ry="2"
+                        stroke="currentColor"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        width="22"
+                        x="1"
+                        y="1"
                       />
                     </svg>
                   </span>
@@ -187045,21 +183063,16 @@ exports[`Storyshots Views / Products / Create product variant no warehouses 1`]
             <div
               class="MuiCardHeader-root-id"
             >
-              <span
-                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
-              >
-                Checkout limits
-              </span>
               <div
-                class="CardTitle-toolbar-id"
-              />
+                class="MuiCardHeader-content-id"
+              >
+                <span
+                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
+                >
+                  Checkout limits
+                </span>
+              </div>
             </div>
-            <div
-              class="CardTitle-children-id"
-            />
-            <hr
-              class="CardTitle-hr-id"
-            />
             <div
               class="MuiCardContent-root-id"
             >
@@ -187112,13 +183125,8 @@ exports[`Storyshots Views / Products / Create product variant no warehouses 1`]
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
           >
             <div
-              class="CardTitle-root-id"
+              class="MuiCardHeader-root-id"
             >
-              <span
-                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
-              >
-                Shipping
-              </span>
               <div
                 class="MuiCardHeader-content-id"
               >
@@ -187291,8 +183299,17 @@ exports[`Storyshots Views / Products / Create product variant no warehouses 1`]
                       focusable="false"
                       viewBox="0 0 24 24"
                     >
-                      <path
-                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+                      <rect
+                        fill="transparent"
+                        height="22"
+                        rx="2"
+                        ry="2"
+                        stroke="currentColor"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        width="22"
+                        x="1"
+                        y="1"
                       />
                     </svg>
                   </span>
@@ -187830,21 +183847,16 @@ exports[`Storyshots Views / Products / Create product variant when loading data
             <div
               class="MuiCardHeader-root-id"
             >
-              <span
-                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
-              >
-                Checkout limits
-              </span>
               <div
-                class="CardTitle-toolbar-id"
-              />
+                class="MuiCardHeader-content-id"
+              >
+                <span
+                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
+                >
+                  Checkout limits
+                </span>
+              </div>
             </div>
-            <div
-              class="CardTitle-children-id"
-            />
-            <hr
-              class="CardTitle-hr-id"
-            />
             <div
               class="MuiCardContent-root-id"
             >
@@ -187898,13 +183910,8 @@ exports[`Storyshots Views / Products / Create product variant when loading data
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
           >
             <div
-              class="CardTitle-root-id"
+              class="MuiCardHeader-root-id"
             >
-              <span
-                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
-              >
-                Shipping
-              </span>
               <div
                 class="MuiCardHeader-content-id"
               >
@@ -188081,8 +184088,17 @@ exports[`Storyshots Views / Products / Create product variant when loading data
                       focusable="false"
                       viewBox="0 0 24 24"
                     >
-                      <path
-                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+                      <rect
+                        fill="transparent"
+                        height="22"
+                        rx="2"
+                        ry="2"
+                        stroke="currentColor"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        width="22"
+                        x="1"
+                        y="1"
                       />
                     </svg>
                   </span>
@@ -188868,21 +184884,16 @@ exports[`Storyshots Views / Products / Create product variant with errors 1`] =
             <div
               class="MuiCardHeader-root-id"
             >
-              <span
-                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
-              >
-                Checkout limits
-              </span>
               <div
-                class="CardTitle-toolbar-id"
-              />
+                class="MuiCardHeader-content-id"
+              >
+                <span
+                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
+                >
+                  Checkout limits
+                </span>
+              </div>
             </div>
-            <div
-              class="CardTitle-children-id"
-            />
-            <hr
-              class="CardTitle-hr-id"
-            />
             <div
               class="MuiCardContent-root-id"
             >
@@ -188935,13 +184946,8 @@ exports[`Storyshots Views / Products / Create product variant with errors 1`] =
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
           >
             <div
-              class="CardTitle-root-id"
+              class="MuiCardHeader-root-id"
             >
-              <span
-                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
-              >
-                Shipping
-              </span>
               <div
                 class="MuiCardHeader-content-id"
               >
@@ -189119,8 +185125,17 @@ exports[`Storyshots Views / Products / Create product variant with errors 1`] =
                       focusable="false"
                       viewBox="0 0 24 24"
                     >
-                      <path
-                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+                      <rect
+                        fill="transparent"
+                        height="22"
+                        rx="2"
+                        ry="2"
+                        stroke="currentColor"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        width="22"
+                        x="1"
+                        y="1"
                       />
                     </svg>
                   </span>
@@ -196911,7 +192926,7 @@ exports[`Storyshots Views / Products / Product edit no stock and no variants 1`]
                 Set up an end date of preorder. When end date will be reached product will be automatically taken from preorder to standard selling
               </div>
               <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                 name="hasPreorderEndDate"
                 tabindex="0"
                 type="button"
@@ -198509,7 +194524,7 @@ exports[`Storyshots Views / Products / Product edit no stock, no variants and no
                 Set up an end date of preorder. When end date will be reached product will be automatically taken from preorder to standard selling
               </div>
               <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                 name="hasPreorderEndDate"
                 tabindex="0"
                 type="button"
@@ -200107,7 +196122,7 @@ exports[`Storyshots Views / Products / Product edit no variants 1`] = `
                 Set up an end date of preorder. When end date will be reached product will be automatically taken from preorder to standard selling
               </div>
               <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                 name="hasPreorderEndDate"
                 tabindex="0"
                 type="button"
@@ -203055,8 +199070,17 @@ exports[`Storyshots Views / Products / Product edit when loading data 1`] = `
                       focusable="false"
                       viewBox="0 0 24 24"
                     >
-                      <path
-                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+                      <rect
+                        fill="transparent"
+                        height="22"
+                        rx="2"
+                        ry="2"
+                        stroke="currentColor"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        width="22"
+                        x="1"
+                        y="1"
                       />
                     </svg>
                   </span>
@@ -206127,7 +202151,7 @@ exports[`Storyshots Views / Products / Product edit when product has no variants
                 Set up an end date of preorder. When end date will be reached product will be automatically taken from preorder to standard selling
               </div>
               <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                 name="hasPreorderEndDate"
                 tabindex="0"
                 type="button"
@@ -224322,21 +220346,16 @@ exports[`Storyshots Views / Products / Product variant details attribute errors
             <div
               class="MuiCardHeader-root-id"
             >
-              <span
-                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
-              >
-                Checkout limits
-              </span>
               <div
-                class="CardTitle-toolbar-id"
-              />
+                class="MuiCardHeader-content-id"
+              >
+                <span
+                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
+                >
+                  Checkout limits
+                </span>
+              </div>
             </div>
-            <div
-              class="CardTitle-children-id"
-            />
-            <hr
-              class="CardTitle-hr-id"
-            />
             <div
               class="MuiCardContent-root-id"
             >
@@ -224389,13 +220408,8 @@ exports[`Storyshots Views / Products / Product variant details attribute errors
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
           >
             <div
-              class="CardTitle-root-id"
+              class="MuiCardHeader-root-id"
             >
-              <span
-                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
-              >
-                Shipping
-              </span>
               <div
                 class="MuiCardHeader-content-id"
               >
@@ -224589,7 +220603,7 @@ exports[`Storyshots Views / Products / Product variant details attribute errors
                 Set up an end date of preorder. When end date will be reached product will be automatically taken from preorder to standard selling
               </div>
               <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                 name="hasPreorderEndDate"
                 tabindex="0"
                 type="button"
@@ -226181,21 +222195,16 @@ exports[`Storyshots Views / Products / Product variant details no warehouses 1`]
             <div
               class="MuiCardHeader-root-id"
             >
-              <span
-                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
-              >
-                Checkout limits
-              </span>
               <div
-                class="CardTitle-toolbar-id"
-              />
+                class="MuiCardHeader-content-id"
+              >
+                <span
+                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
+                >
+                  Checkout limits
+                </span>
+              </div>
             </div>
-            <div
-              class="CardTitle-children-id"
-            />
-            <hr
-              class="CardTitle-hr-id"
-            />
             <div
               class="MuiCardContent-root-id"
             >
@@ -226248,13 +222257,8 @@ exports[`Storyshots Views / Products / Product variant details no warehouses 1`]
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
           >
             <div
-              class="CardTitle-root-id"
+              class="MuiCardHeader-root-id"
             >
-              <span
-                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
-              >
-                Shipping
-              </span>
               <div
                 class="MuiCardHeader-content-id"
               >
@@ -226443,7 +222447,7 @@ exports[`Storyshots Views / Products / Product variant details no warehouses 1`]
                 Set up an end date of preorder. When end date will be reached product will be automatically taken from preorder to standard selling
               </div>
               <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                 name="hasPreorderEndDate"
                 tabindex="0"
                 type="button"
@@ -226526,7 +222530,7 @@ exports[`Storyshots Views / Products / Product variant details no warehouses 1`]
                 class="MuiTableHead-root-id"
               >
                 <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
+                  class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                 >
                   <th
                     class="MuiTableCell-root-id MuiTableCell-head-id ProductStocks-colName-id"
@@ -226552,7 +222556,7 @@ exports[`Storyshots Views / Products / Product variant details no warehouses 1`]
                 class="MuiTableBody-root-id"
               >
                 <tr
-                  class="MuiTableRow-root-id"
+                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id ProductStocks-colName-id"
@@ -226601,7 +222605,7 @@ exports[`Storyshots Views / Products / Product variant details no warehouses 1`]
                   </td>
                 </tr>
                 <tr
-                  class="MuiTableRow-root-id"
+                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id ProductStocks-colName-id"
@@ -228035,21 +224039,16 @@ exports[`Storyshots Views / Products / Product variant details when loaded data
             <div
               class="MuiCardHeader-root-id"
             >
-              <span
-                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
-              >
-                Checkout limits
-              </span>
               <div
-                class="CardTitle-toolbar-id"
-              />
+                class="MuiCardHeader-content-id"
+              >
+                <span
+                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
+                >
+                  Checkout limits
+                </span>
+              </div>
             </div>
-            <div
-              class="CardTitle-children-id"
-            />
-            <hr
-              class="CardTitle-hr-id"
-            />
             <div
               class="MuiCardContent-root-id"
             >
@@ -228102,13 +224101,8 @@ exports[`Storyshots Views / Products / Product variant details when loaded data
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
           >
             <div
-              class="CardTitle-root-id"
+              class="MuiCardHeader-root-id"
             >
-              <span
-                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
-              >
-                Shipping
-              </span>
               <div
                 class="MuiCardHeader-content-id"
               >
@@ -228297,7 +224291,7 @@ exports[`Storyshots Views / Products / Product variant details when loaded data
                 Set up an end date of preorder. When end date will be reached product will be automatically taken from preorder to standard selling
               </div>
               <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                 name="hasPreorderEndDate"
                 tabindex="0"
                 type="button"
@@ -229175,21 +225169,16 @@ exports[`Storyshots Views / Products / Product variant details when loading data
             <div
               class="MuiCardHeader-root-id"
             >
-              <span
-                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
-              >
-                Checkout limits
-              </span>
               <div
-                class="CardTitle-toolbar-id"
-              />
+                class="MuiCardHeader-content-id"
+              >
+                <span
+                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
+                >
+                  Checkout limits
+                </span>
+              </div>
             </div>
-            <div
-              class="CardTitle-children-id"
-            />
-            <hr
-              class="CardTitle-hr-id"
-            />
             <div
               class="MuiCardContent-root-id"
             >
@@ -229243,13 +225232,8 @@ exports[`Storyshots Views / Products / Product variant details when loading data
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
           >
             <div
-              class="CardTitle-root-id"
+              class="MuiCardHeader-root-id"
             >
-              <span
-                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
-              >
-                Shipping
-              </span>
               <div
                 class="MuiCardHeader-content-id"
               >
@@ -229397,8 +225381,17 @@ exports[`Storyshots Views / Products / Product variant details when loading data
                       focusable="false"
                       viewBox="0 0 24 24"
                     >
-                      <path
-                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+                      <rect
+                        fill="transparent"
+                        height="22"
+                        rx="2"
+                        ry="2"
+                        stroke="currentColor"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        width="22"
+                        x="1"
+                        y="1"
                       />
                     </svg>
                   </span>
@@ -230570,12 +226563,6 @@ exports[`Storyshots Views / Shipping / Shipping rate create price rate 1`] = `
                 </span>
               </div>
             </div>
-            <div
-              class="CardTitle-children-id"
-            />
-            <hr
-              class="CardTitle-hr-id"
-            />
             <div
               class="OrderValue-content-id"
             >
@@ -230605,9 +226592,28 @@ exports[`Storyshots Views / Shipping / Shipping rate create price rate 1`] = `
                         focusable="false"
                         viewBox="0 0 24 24"
                       >
-                        <path
-                          d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
-                        />
+                        <svg
+                          fill="none"
+                          height="24"
+                          viewBox="0 0 24 24"
+                          width="24"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <rect
+                            fill="currentColor"
+                            height="23"
+                            rx="1.5"
+                            width="23"
+                            x="0.5"
+                            y="0.5"
+                          />
+                          <path
+                            clip-rule="evenodd"
+                            d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
+                            fill="var(--background-paper)"
+                            fill-rule="evenodd"
+                          />
+                        </svg>
                       </svg>
                     </span>
                   </span>
@@ -231855,9 +227861,28 @@ exports[`Storyshots Views / Shipping / Shipping rate create weight rate 1`] = `
                       focusable="false"
                       viewBox="0 0 24 24"
                     >
-                      <path
-                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
-                      />
+                      <svg
+                        fill="none"
+                        height="24"
+                        viewBox="0 0 24 24"
+                        width="24"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <rect
+                          fill="currentColor"
+                          height="23"
+                          rx="1.5"
+                          width="23"
+                          x="0.5"
+                          y="0.5"
+                        />
+                        <path
+                          clip-rule="evenodd"
+                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
+                          fill="var(--background-paper)"
+                          fill-rule="evenodd"
+                        />
+                      </svg>
                     </svg>
                   </span>
                 </span>
@@ -233018,12 +229043,6 @@ exports[`Storyshots Views / Shipping / Shipping rate loading 1`] = `
                 </span>
               </div>
             </div>
-            <div
-              class="CardTitle-children-id"
-            />
-            <hr
-              class="CardTitle-hr-id"
-            />
             <div
               class="OrderValue-content-id"
             >
@@ -233983,12 +230002,6 @@ exports[`Storyshots Views / Shipping / Shipping rate update price rate 1`] = `
                 </span>
               </div>
             </div>
-            <div
-              class="CardTitle-children-id"
-            />
-            <hr
-              class="CardTitle-hr-id"
-            />
             <div
               class="OrderValue-content-id"
             >
@@ -235208,9 +231221,28 @@ exports[`Storyshots Views / Shipping / Shipping rate update weight rate 1`] = `
                       focusable="false"
                       viewBox="0 0 24 24"
                     >
-                      <path
-                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
-                      />
+                      <svg
+                        fill="none"
+                        height="24"
+                        viewBox="0 0 24 24"
+                        width="24"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <rect
+                          fill="currentColor"
+                          height="23"
+                          rx="1.5"
+                          width="23"
+                          x="0.5"
+                          y="0.5"
+                        />
+                        <path
+                          clip-rule="evenodd"
+                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
+                          fill="var(--background-paper)"
+                          fill-rule="evenodd"
+                        />
+                      </svg>
                     </svg>
                   </span>
                 </span>
@@ -241514,23 +237546,18 @@ exports[`Storyshots Views / Site settings / Page default 1`] = `
           class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
         >
           <div
-            class="CardTitle-root-id"
+            class="MuiCardHeader-root-id"
           >
-            <span
-              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
-            >
-              Reserved stock
-            </span>
             <div
-              class="CardTitle-toolbar-id"
-            />
+              class="MuiCardHeader-content-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
+              >
+                Reserved stock
+              </span>
+            </div>
           </div>
-          <div
-            class="CardTitle-children-id"
-          />
-          <hr
-            class="CardTitle-hr-id"
-          />
           <div
             class="MuiCardContent-root-id"
           >
@@ -241625,23 +237652,18 @@ exports[`Storyshots Views / Site settings / Page default 1`] = `
             </div>
           </div>
           <div
-            class="CardTitle-root-id"
+            class="MuiCardHeader-root-id"
           >
-            <span
-              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
-            >
-              Checkout limits
-            </span>
             <div
-              class="CardTitle-toolbar-id"
-            />
+              class="MuiCardHeader-content-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
+              >
+                Checkout limits
+              </span>
+            </div>
           </div>
-          <div
-            class="CardTitle-children-id"
-          />
-          <hr
-            class="CardTitle-hr-id"
-          />
           <div
             class="MuiCardContent-root-id"
           >
@@ -242272,23 +238294,18 @@ exports[`Storyshots Views / Site settings / Page form errors 1`] = `
           class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
         >
           <div
-            class="CardTitle-root-id"
+            class="MuiCardHeader-root-id"
           >
-            <span
-              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
-            >
-              Reserved stock
-            </span>
             <div
-              class="CardTitle-toolbar-id"
-            />
+              class="MuiCardHeader-content-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
+              >
+                Reserved stock
+              </span>
+            </div>
           </div>
-          <div
-            class="CardTitle-children-id"
-          />
-          <hr
-            class="CardTitle-hr-id"
-          />
           <div
             class="MuiCardContent-root-id"
           >
@@ -242383,23 +238400,18 @@ exports[`Storyshots Views / Site settings / Page form errors 1`] = `
             </div>
           </div>
           <div
-            class="CardTitle-root-id"
+            class="MuiCardHeader-root-id"
           >
-            <span
-              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
-            >
-              Checkout limits
-            </span>
             <div
-              class="CardTitle-toolbar-id"
-            />
+              class="MuiCardHeader-content-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
+              >
+                Checkout limits
+              </span>
+            </div>
           </div>
-          <div
-            class="CardTitle-children-id"
-          />
-          <hr
-            class="CardTitle-hr-id"
-          />
           <div
             class="MuiCardContent-root-id"
           >
@@ -243028,23 +239040,18 @@ exports[`Storyshots Views / Site settings / Page loading 1`] = `
           class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
         >
           <div
-            class="CardTitle-root-id"
+            class="MuiCardHeader-root-id"
           >
-            <span
-              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
-            >
-              Reserved stock
-            </span>
             <div
-              class="CardTitle-toolbar-id"
-            />
+              class="MuiCardHeader-content-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
+              >
+                Reserved stock
+              </span>
+            </div>
           </div>
-          <div
-            class="CardTitle-children-id"
-          />
-          <hr
-            class="CardTitle-hr-id"
-          />
           <div
             class="MuiCardContent-root-id"
           >
@@ -243141,23 +239148,18 @@ exports[`Storyshots Views / Site settings / Page loading 1`] = `
             </div>
           </div>
           <div
-            class="CardTitle-root-id"
+            class="MuiCardHeader-root-id"
           >
-            <span
-              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
-            >
-              Checkout limits
-            </span>
             <div
-              class="CardTitle-toolbar-id"
-            />
+              class="MuiCardHeader-content-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
+              >
+                Checkout limits
+              </span>
+            </div>
           </div>
-          <div
-            class="CardTitle-children-id"
-          />
-          <hr
-            class="CardTitle-hr-id"
-          />
           <div
             class="MuiCardContent-root-id"
           >
@@ -250959,18 +246961,13 @@ exports[`Storyshots Views / Warehouses / Warehouse details default 1`] = `
             <div
               class="MuiCardHeader-root-id"
             >
-              <span
-                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
-              >
-                Settings
-              </span>
               <div
                 class="MuiCardHeader-content-id"
               >
                 <span
                   class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                 >
-                  Shipping Zones
+                  Settings
                 </span>
               </div>
             </div>
@@ -251057,30 +247054,25 @@ exports[`Storyshots Views / Warehouses / Warehouse details default 1`] = `
                           type="radio"
                           value="true"
                         />
-                        <div
-                          class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          viewBox="0 0 24 24"
                         >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
-                            />
-                          </svg>
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
-                            />
-                          </svg>
-                        </div>
+                          <circle
+                            cx="12"
+                            cy="12"
+                            fill="currentColor"
+                            r="12"
+                          />
+                          <circle
+                            cx="12"
+                            cy="12"
+                            fill="var(--background-paper)"
+                            r="5"
+                          />
+                        </svg>
                       </span>
                     </span>
                     <span
@@ -251113,30 +247105,21 @@ exports[`Storyshots Views / Warehouses / Warehouse details default 1`] = `
                           type="radio"
                           value="false"
                         />
-                        <div
-                          class="PrivateRadioButtonIcon-root-id"
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          viewBox="0 0 24 24"
                         >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
-                            />
-                          </svg>
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
-                            />
-                          </svg>
-                        </div>
+                          <circle
+                            cx="12"
+                            cy="12"
+                            fill="var(--background-paper)"
+                            r="11"
+                            stroke="currentColor"
+                            stroke-width="2"
+                          />
+                        </svg>
                       </span>
                     </span>
                     <span
@@ -251192,30 +247175,25 @@ exports[`Storyshots Views / Warehouses / Warehouse details default 1`] = `
                           type="radio"
                           value="DISABLED"
                         />
-                        <div
-                          class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          viewBox="0 0 24 24"
                         >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
-                            />
-                          </svg>
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
-                            />
-                          </svg>
-                        </div>
+                          <circle
+                            cx="12"
+                            cy="12"
+                            fill="currentColor"
+                            r="12"
+                          />
+                          <circle
+                            cx="12"
+                            cy="12"
+                            fill="var(--background-paper)"
+                            r="5"
+                          />
+                        </svg>
                       </span>
                     </span>
                     <span
@@ -251248,30 +247226,21 @@ exports[`Storyshots Views / Warehouses / Warehouse details default 1`] = `
                           type="radio"
                           value="ALL"
                         />
-                        <div
-                          class="PrivateRadioButtonIcon-root-id"
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          viewBox="0 0 24 24"
                         >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
-                            />
-                          </svg>
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
-                            />
-                          </svg>
-                        </div>
+                          <circle
+                            cx="12"
+                            cy="12"
+                            fill="var(--background-paper)"
+                            r="11"
+                            stroke="currentColor"
+                            stroke-width="2"
+                          />
+                        </svg>
                       </span>
                     </span>
                     <span
@@ -251782,18 +247751,13 @@ exports[`Storyshots Views / Warehouses / Warehouse details form errors 1`] = `
             <div
               class="MuiCardHeader-root-id"
             >
-              <span
-                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
-              >
-                Settings
-              </span>
               <div
                 class="MuiCardHeader-content-id"
               >
                 <span
                   class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                 >
-                  Shipping Zones
+                  Settings
                 </span>
               </div>
             </div>
@@ -251880,30 +247844,25 @@ exports[`Storyshots Views / Warehouses / Warehouse details form errors 1`] = `
                           type="radio"
                           value="true"
                         />
-                        <div
-                          class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          viewBox="0 0 24 24"
                         >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
-                            />
-                          </svg>
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
-                            />
-                          </svg>
-                        </div>
+                          <circle
+                            cx="12"
+                            cy="12"
+                            fill="currentColor"
+                            r="12"
+                          />
+                          <circle
+                            cx="12"
+                            cy="12"
+                            fill="var(--background-paper)"
+                            r="5"
+                          />
+                        </svg>
                       </span>
                     </span>
                     <span
@@ -251936,30 +247895,21 @@ exports[`Storyshots Views / Warehouses / Warehouse details form errors 1`] = `
                           type="radio"
                           value="false"
                         />
-                        <div
-                          class="PrivateRadioButtonIcon-root-id"
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          viewBox="0 0 24 24"
                         >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
-                            />
-                          </svg>
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
-                            />
-                          </svg>
-                        </div>
+                          <circle
+                            cx="12"
+                            cy="12"
+                            fill="var(--background-paper)"
+                            r="11"
+                            stroke="currentColor"
+                            stroke-width="2"
+                          />
+                        </svg>
                       </span>
                     </span>
                     <span
@@ -252015,30 +247965,25 @@ exports[`Storyshots Views / Warehouses / Warehouse details form errors 1`] = `
                           type="radio"
                           value="DISABLED"
                         />
-                        <div
-                          class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          viewBox="0 0 24 24"
                         >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
-                            />
-                          </svg>
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
-                            />
-                          </svg>
-                        </div>
+                          <circle
+                            cx="12"
+                            cy="12"
+                            fill="currentColor"
+                            r="12"
+                          />
+                          <circle
+                            cx="12"
+                            cy="12"
+                            fill="var(--background-paper)"
+                            r="5"
+                          />
+                        </svg>
                       </span>
                     </span>
                     <span
@@ -252071,30 +248016,21 @@ exports[`Storyshots Views / Warehouses / Warehouse details form errors 1`] = `
                           type="radio"
                           value="ALL"
                         />
-                        <div
-                          class="PrivateRadioButtonIcon-root-id"
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          viewBox="0 0 24 24"
                         >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
-                            />
-                          </svg>
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
-                            />
-                          </svg>
-                        </div>
+                          <circle
+                            cx="12"
+                            cy="12"
+                            fill="var(--background-paper)"
+                            r="11"
+                            stroke="currentColor"
+                            stroke-width="2"
+                          />
+                        </svg>
                       </span>
                     </span>
                     <span
@@ -252575,18 +248511,13 @@ exports[`Storyshots Views / Warehouses / Warehouse details loading 1`] = `
             <div
               class="MuiCardHeader-root-id"
             >
-              <span
-                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
-              >
-                Settings
-              </span>
               <div
                 class="MuiCardHeader-content-id"
               >
                 <span
                   class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                 >
-                  Shipping Zones
+                  Settings
                 </span>
               </div>
             </div>
@@ -252635,30 +248566,21 @@ exports[`Storyshots Views / Warehouses / Warehouse details loading 1`] = `
                           type="radio"
                           value="true"
                         />
-                        <div
-                          class="PrivateRadioButtonIcon-root-id"
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          viewBox="0 0 24 24"
                         >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
-                            />
-                          </svg>
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
-                            />
-                          </svg>
-                        </div>
+                          <circle
+                            cx="12"
+                            cy="12"
+                            fill="var(--background-paper)"
+                            r="11"
+                            stroke="currentColor"
+                            stroke-width="2"
+                          />
+                        </svg>
                       </span>
                     </span>
                     <span
@@ -252694,30 +248616,25 @@ exports[`Storyshots Views / Warehouses / Warehouse details loading 1`] = `
                           type="radio"
                           value="false"
                         />
-                        <div
-                          class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          viewBox="0 0 24 24"
                         >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
-                            />
-                          </svg>
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
-                            />
-                          </svg>
-                        </div>
+                          <circle
+                            cx="12"
+                            cy="12"
+                            fill="currentColor"
+                            r="12"
+                          />
+                          <circle
+                            cx="12"
+                            cy="12"
+                            fill="var(--background-paper)"
+                            r="5"
+                          />
+                        </svg>
                       </span>
                     </span>
                     <span
@@ -252775,30 +248692,25 @@ exports[`Storyshots Views / Warehouses / Warehouse details loading 1`] = `
                           type="radio"
                           value="DISABLED"
                         />
-                        <div
-                          class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          viewBox="0 0 24 24"
                         >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
-                            />
-                          </svg>
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
-                            />
-                          </svg>
-                        </div>
+                          <circle
+                            cx="12"
+                            cy="12"
+                            fill="currentColor"
+                            r="12"
+                          />
+                          <circle
+                            cx="12"
+                            cy="12"
+                            fill="var(--background-paper)"
+                            r="5"
+                          />
+                        </svg>
                       </span>
                     </span>
                     <span
@@ -252833,30 +248745,21 @@ exports[`Storyshots Views / Warehouses / Warehouse details loading 1`] = `
                           type="radio"
                           value="LOCAL"
                         />
-                        <div
-                          class="PrivateRadioButtonIcon-root-id"
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          viewBox="0 0 24 24"
                         >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
-                            />
-                          </svg>
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
-                            />
-                          </svg>
-                        </div>
+                          <circle
+                            cx="12"
+                            cy="12"
+                            fill="var(--background-paper)"
+                            r="11"
+                            stroke="currentColor"
+                            stroke-width="2"
+                          />
+                        </svg>
                       </span>
                     </span>
                     <span
@@ -252891,30 +248794,21 @@ exports[`Storyshots Views / Warehouses / Warehouse details loading 1`] = `
                           type="radio"
                           value="ALL"
                         />
-                        <div
-                          class="PrivateRadioButtonIcon-root-id"
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          viewBox="0 0 24 24"
                         >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
-                            />
-                          </svg>
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
-                            />
-                          </svg>
-                        </div>
+                          <circle
+                            cx="12"
+                            cy="12"
+                            fill="var(--background-paper)"
+                            r="11"
+                            stroke="currentColor"
+                            stroke-width="2"
+                          />
+                        </svg>
                       </span>
                     </span>
                     <span
diff --git a/src/webhooks/components/WebhookDetailsPage/WebhookDetailsPage.tsx b/src/webhooks/components/WebhookDetailsPage/WebhookDetailsPage.tsx
index c131f04880f..7481df4ea78 100644
--- a/src/webhooks/components/WebhookDetailsPage/WebhookDetailsPage.tsx
+++ b/src/webhooks/components/WebhookDetailsPage/WebhookDetailsPage.tsx
@@ -1,4 +1,3 @@
-import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton";
 import Container from "@saleor/components/Container";
 import Form from "@saleor/components/Form";
 import FormSpacer from "@saleor/components/FormSpacer";
@@ -6,7 +5,7 @@ import Grid from "@saleor/components/Grid";
 import PageHeader from "@saleor/components/PageHeader";
 import Savebar from "@saleor/components/Savebar";
 import { WebhookErrorFragment } from "@saleor/fragments/types/WebhookErrorFragment";
-import { Backlink } from "@saleor/macaw-ui";
+import { Backlink, ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import {
   WebhookEventTypeAsyncEnum,
   WebhookEventTypeSyncEnum