diff --git a/locale/defaultMessages.json b/locale/defaultMessages.json
index 72fa802df..eed47724e 100644
--- a/locale/defaultMessages.json
+++ b/locale/defaultMessages.json
@@ -3810,6 +3810,10 @@
     "context": "unassign attribute from product type, button",
     "string": "Unassign"
   },
+  "SBb6Ej": {
+    "context": "select a warehouse to fulfill product from",
+    "string": "Select warehouse..."
+  },
   "SHm7ee": {
     "string": "Search by product name, attribute, product type etc..."
   },
diff --git a/src/orders/components/OrderFulfillLine/OrderFulfillLine.tsx b/src/orders/components/OrderFulfillLine/OrderFulfillLine.tsx
index e68517fcc..e5c7a7184 100644
--- a/src/orders/components/OrderFulfillLine/OrderFulfillLine.tsx
+++ b/src/orders/components/OrderFulfillLine/OrderFulfillLine.tsx
@@ -58,7 +58,7 @@ export const OrderFulfillLine: React.FC<OrderFulfillLineProps> = props => {
 
   const isStockExceeded = lineFormQuantity > availableQuantity;
 
-  if (!line || !lineFormWarehouse) {
+  if (!line) {
     return (
       <TableRow key={lineIndex}>
         <TableCellAvatar className={classes.colName}>
@@ -156,7 +156,11 @@ export const OrderFulfillLine: React.FC<OrderFulfillLineProps> = props => {
         </TableCell>
       )}
       <TableCell className={classes.colStock} key="total">
-        {isPreorder || isDeletedVariant ? undefined : availableQuantity}
+        {lineFormWarehouse
+          ? isPreorder || isDeletedVariant
+            ? undefined
+            : availableQuantity
+          : "-"}
       </TableCell>
       <TableCell className={classes.colWarehouse}>
         <IconButton
@@ -165,9 +169,13 @@ export const OrderFulfillLine: React.FC<OrderFulfillLineProps> = props => {
           data-test-id="select-warehouse-button"
         >
           <div className={classes.warehouseButtonContent}>
-            <div className={classes.warehouseButtonContentText}>
-              {lineFormWarehouse?.name ?? <Skeleton />}
-            </div>
+            <Typography
+              color={lineFormWarehouse ? "textPrimary" : "textSecondary"}
+              className={classes.warehouseButtonContentText}
+            >
+              {lineFormWarehouse?.name ??
+                intl.formatMessage(messages.selectWarehouse)}
+            </Typography>
             <ChevronIcon />
           </div>
         </IconButton>
diff --git a/src/orders/components/OrderFulfillLine/messages.ts b/src/orders/components/OrderFulfillLine/messages.ts
index 97663a02d..716a951b4 100644
--- a/src/orders/components/OrderFulfillLine/messages.ts
+++ b/src/orders/components/OrderFulfillLine/messages.ts
@@ -17,4 +17,9 @@ export const messages = defineMessages({
     id: "W5hb5H",
     description: "warehouse input",
   },
+  selectWarehouse: {
+    defaultMessage: "Select warehouse...",
+    id: "SBb6Ej",
+    description: "select a warehouse to fulfill product from",
+  },
 });
diff --git a/src/orders/components/OrderFulfillLine/styles.ts b/src/orders/components/OrderFulfillLine/styles.ts
index 29f4df9de..a2a0f7189 100644
--- a/src/orders/components/OrderFulfillLine/styles.ts
+++ b/src/orders/components/OrderFulfillLine/styles.ts
@@ -62,6 +62,7 @@ export const useStyles = makeStyles(
     warehouseButtonContentText: {
       overflow: "hidden",
       textOverflow: "ellipsis",
+      whiteSpace: "nowrap",
     },
   }),
   { name: "OrderFulfillLine" },
diff --git a/src/orders/components/OrderFulfillPage/OrderFulfillPage.tsx b/src/orders/components/OrderFulfillPage/OrderFulfillPage.tsx
index 1a39f24b8..7c84c11a5 100644
--- a/src/orders/components/OrderFulfillPage/OrderFulfillPage.tsx
+++ b/src/orders/components/OrderFulfillPage/OrderFulfillPage.tsx
@@ -163,6 +163,10 @@ const OrderFulfillPage: React.FC<OrderFulfillPageProps> = props => {
     !shopSettings?.fulfillmentAllowUnpaid &&
     !order?.isPaid;
 
+  const areWarehousesSet = formsetData.every(line =>
+    line.value.every(v => v.warehouse),
+  );
+
   const shouldEnableSave = () => {
     if (!order || loading) {
       return false;
@@ -186,7 +190,7 @@ const OrderFulfillPage: React.FC<OrderFulfillPageProps> = props => {
         return formQuantityFulfilled > quantityToFulfill;
       });
 
-    return !overfulfill && isAtLeastOneFulfilled;
+    return !overfulfill && isAtLeastOneFulfilled && areWarehousesSet;
   };
 
   return (
@@ -261,7 +265,7 @@ const OrderFulfillPage: React.FC<OrderFulfillPageProps> = props => {
                                 lineId: line.id,
                                 warehouseId:
                                   formsetData[lineIndex]?.value?.[0]?.warehouse
-                                    .id,
+                                    ?.id,
                               })
                             }
                           />
diff --git a/src/storybook/__snapshots__/Stories.test.ts.snap b/src/storybook/__snapshots__/Stories.test.ts.snap
index 7cc7b17c6..c01a8ada2 100644
--- a/src/storybook/__snapshots__/Stories.test.ts.snap
+++ b/src/storybook/__snapshots__/Stories.test.ts.snap
@@ -114340,79 +114340,121 @@ exports[`Storyshots Views / Orders / Fulfill order default 1`] = `
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillLine-colName-id"
                   data-test-id="table-cell-avatar"
+                  thumbnail="sample-product.jpg"
                 >
                   <div
                     class="Avatar-content-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id MuiAvatar-colorDefault-id"
+                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
-                        data-test-id="imageIcon"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          clip-rule="evenodd"
-                          d="M2 5C2 3.34315 3.34315 2 5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5ZM5 4C4.44772 4 4 4.44772 4 5V15.7962L11.0456 9.63136L12.5 11.0858L16 7.58579L20 11.5858V5C20 4.44772 19.5523 4 19 4H5ZM20 14.4142L16 10.4142L12.5 13.9142L10.9544 12.3686L4 18.4538V19C4 19.5523 4.44772 20 5 20H19C19.5523 20 20 19.5523 20 19V14.4142Z"
-                          fill="currentColor"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
+                      <img
+                        class="MuiAvatar-img-id"
+                        src="sample-product.jpg"
+                      />
                     </div>
                     <div
                       class="Avatar-children-id"
                     >
-                      <span
-                        class="Skeleton-skeleton-id"
-                        data-test-id="skeleton"
+                      T-Shirt
+                      <div
+                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                       >
-                        ‌
-                      </span>
+                        S
+                      </div>
                     </div>
                   </div>
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillLine-colSku-id"
                 >
-                  <span
-                    class="Skeleton-skeleton-id"
-                    data-test-id="skeleton"
-                  >
-                    ‌
-                  </span>
+                  62783187
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillLine-colQuantity-id"
                 >
-                  <span
-                    class="Skeleton-skeleton-id"
-                    data-test-id="skeleton"
+                  <div
+                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                   >
-                    ‌
-                  </span>
+                    <div
+                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
+                    >
+                      <input
+                        aria-invalid="false"
+                        class="MuiInputBase-input-id MuiOutlinedInput-input-id OrderFulfillLine-quantityInnerInput-id OrderFulfillLine-quantityInnerInputNoRemaining-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
+                        min="0"
+                        style="text-align:right"
+                        type="number"
+                        value="2"
+                      />
+                      <div
+                        class="OrderFulfillLine-remainingQuantity-id"
+                      >
+                        / 2
+                      </div>
+                      <fieldset
+                        aria-hidden="true"
+                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id OrderFulfillLine-warning-id"
+                        style="padding-left:8px"
+                      >
+                        <legend
+                          class="PrivateNotchedOutline-legend-id"
+                          style="width:0.01px"
+                        >
+                          <span>
+                            ​
+                          </span>
+                        </legend>
+                      </fieldset>
+                    </div>
+                  </div>
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillLine-colStock-id"
                 >
-                  <span
-                    class="Skeleton-skeleton-id"
-                    data-test-id="skeleton"
-                  >
-                    ‌
-                  </span>
+                  -
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillLine-colWarehouse-id"
                 >
-                  <span
-                    class="Skeleton-skeleton-id"
-                    data-test-id="skeleton"
+                  <button
+                    class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id OrderFulfillLine-warehouseButton-id"
+                    data-test-id="select-warehouse-button"
+                    tabindex="0"
+                    type="button"
                   >
-                    ‌
-                  </span>
+                    <span
+                      class="MuiIconButton-label-id"
+                    >
+                      <div
+                        class="OrderFulfillLine-warehouseButtonContent-id"
+                      >
+                        <div
+                          class="MuiTypography-root-id OrderFulfillLine-warehouseButtonContentText-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+                        >
+                          Select warehouse...
+                        </div>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id MacawIcon-root-id"
+                          fill="none"
+                          focusable="false"
+                          height="24"
+                          viewBox="0 0 24 24"
+                          width="24"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="m8 10 4 4 4-4"
+                            stroke="currentColor"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="1.5"
+                          />
+                        </svg>
+                      </div>
+                    </span>
+                  </button>
                 </td>
               </tr>
               <tr
@@ -114421,79 +114463,121 @@ exports[`Storyshots Views / Orders / Fulfill order default 1`] = `
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillLine-colName-id"
                   data-test-id="table-cell-avatar"
+                  thumbnail="sample-product.jpg"
                 >
                   <div
                     class="Avatar-content-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id MuiAvatar-colorDefault-id"
+                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
-                        data-test-id="imageIcon"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          clip-rule="evenodd"
-                          d="M2 5C2 3.34315 3.34315 2 5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5ZM5 4C4.44772 4 4 4.44772 4 5V15.7962L11.0456 9.63136L12.5 11.0858L16 7.58579L20 11.5858V5C20 4.44772 19.5523 4 19 4H5ZM20 14.4142L16 10.4142L12.5 13.9142L10.9544 12.3686L4 18.4538V19C4 19.5523 4.44772 20 5 20H19C19.5523 20 20 19.5523 20 19V14.4142Z"
-                          fill="currentColor"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
+                      <img
+                        class="MuiAvatar-img-id"
+                        src="sample-product.jpg"
+                      />
                     </div>
                     <div
                       class="Avatar-children-id"
                     >
-                      <span
-                        class="Skeleton-skeleton-id"
-                        data-test-id="skeleton"
+                      Lemon Juice
+                      <div
+                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                       >
-                        ‌
-                      </span>
+                        2.5l
+                      </div>
                     </div>
                   </div>
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillLine-colSku-id"
                 >
-                  <span
-                    class="Skeleton-skeleton-id"
-                    data-test-id="skeleton"
-                  >
-                    ‌
-                  </span>
+                  998323583
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillLine-colQuantity-id"
                 >
-                  <span
-                    class="Skeleton-skeleton-id"
-                    data-test-id="skeleton"
+                  <div
+                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                   >
-                    ‌
-                  </span>
+                    <div
+                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
+                    >
+                      <input
+                        aria-invalid="false"
+                        class="MuiInputBase-input-id MuiOutlinedInput-input-id OrderFulfillLine-quantityInnerInput-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
+                        min="0"
+                        style="text-align:right"
+                        type="number"
+                        value="4"
+                      />
+                      <div
+                        class="OrderFulfillLine-remainingQuantity-id"
+                      >
+                        / 4
+                      </div>
+                      <fieldset
+                        aria-hidden="true"
+                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id OrderFulfillLine-warning-id"
+                        style="padding-left:8px"
+                      >
+                        <legend
+                          class="PrivateNotchedOutline-legend-id"
+                          style="width:0.01px"
+                        >
+                          <span>
+                            ​
+                          </span>
+                        </legend>
+                      </fieldset>
+                    </div>
+                  </div>
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillLine-colStock-id"
                 >
-                  <span
-                    class="Skeleton-skeleton-id"
-                    data-test-id="skeleton"
-                  >
-                    ‌
-                  </span>
+                  -
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillLine-colWarehouse-id"
                 >
-                  <span
-                    class="Skeleton-skeleton-id"
-                    data-test-id="skeleton"
+                  <button
+                    class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id OrderFulfillLine-warehouseButton-id"
+                    data-test-id="select-warehouse-button"
+                    tabindex="0"
+                    type="button"
                   >
-                    ‌
-                  </span>
+                    <span
+                      class="MuiIconButton-label-id"
+                    >
+                      <div
+                        class="OrderFulfillLine-warehouseButtonContent-id"
+                      >
+                        <div
+                          class="MuiTypography-root-id OrderFulfillLine-warehouseButtonContentText-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+                        >
+                          Select warehouse...
+                        </div>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id MacawIcon-root-id"
+                          fill="none"
+                          focusable="false"
+                          height="24"
+                          viewBox="0 0 24 24"
+                          width="24"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="m8 10 4 4 4-4"
+                            stroke="currentColor"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="1.5"
+                          />
+                        </svg>
+                      </div>
+                    </span>
+                  </button>
                 </td>
               </tr>
               <tr
@@ -114502,79 +114586,121 @@ exports[`Storyshots Views / Orders / Fulfill order default 1`] = `
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillLine-colName-id"
                   data-test-id="table-cell-avatar"
+                  thumbnail="sample-product.jpg"
                 >
                   <div
                     class="Avatar-content-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id MuiAvatar-colorDefault-id"
+                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
-                        data-test-id="imageIcon"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          clip-rule="evenodd"
-                          d="M2 5C2 3.34315 3.34315 2 5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5ZM5 4C4.44772 4 4 4.44772 4 5V15.7962L11.0456 9.63136L12.5 11.0858L16 7.58579L20 11.5858V5C20 4.44772 19.5523 4 19 4H5ZM20 14.4142L16 10.4142L12.5 13.9142L10.9544 12.3686L4 18.4538V19C4 19.5523 4.44772 20 5 20H19C19.5523 20 20 19.5523 20 19V14.4142Z"
-                          fill="currentColor"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
+                      <img
+                        class="MuiAvatar-img-id"
+                        src="sample-product.jpg"
+                      />
                     </div>
                     <div
                       class="Avatar-children-id"
                     >
-                      <span
-                        class="Skeleton-skeleton-id"
-                        data-test-id="skeleton"
+                      Orange Juice
+                      <div
+                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                       >
-                        ‌
-                      </span>
+                        5l
+                      </div>
                     </div>
                   </div>
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillLine-colSku-id"
                 >
-                  <span
-                    class="Skeleton-skeleton-id"
-                    data-test-id="skeleton"
-                  >
-                    ‌
-                  </span>
+                  998323584
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillLine-colQuantity-id"
                 >
-                  <span
-                    class="Skeleton-skeleton-id"
-                    data-test-id="skeleton"
+                  <div
+                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                   >
-                    ‌
-                  </span>
+                    <div
+                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
+                    >
+                      <input
+                        aria-invalid="false"
+                        class="MuiInputBase-input-id MuiOutlinedInput-input-id OrderFulfillLine-quantityInnerInput-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
+                        min="0"
+                        style="text-align:right"
+                        type="number"
+                        value="1"
+                      />
+                      <div
+                        class="OrderFulfillLine-remainingQuantity-id"
+                      >
+                        / 1
+                      </div>
+                      <fieldset
+                        aria-hidden="true"
+                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id OrderFulfillLine-warning-id"
+                        style="padding-left:8px"
+                      >
+                        <legend
+                          class="PrivateNotchedOutline-legend-id"
+                          style="width:0.01px"
+                        >
+                          <span>
+                            ​
+                          </span>
+                        </legend>
+                      </fieldset>
+                    </div>
+                  </div>
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillLine-colStock-id"
                 >
-                  <span
-                    class="Skeleton-skeleton-id"
-                    data-test-id="skeleton"
-                  >
-                    ‌
-                  </span>
+                  -
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillLine-colWarehouse-id"
                 >
-                  <span
-                    class="Skeleton-skeleton-id"
-                    data-test-id="skeleton"
+                  <button
+                    class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id OrderFulfillLine-warehouseButton-id"
+                    data-test-id="select-warehouse-button"
+                    tabindex="0"
+                    type="button"
                   >
-                    ‌
-                  </span>
+                    <span
+                      class="MuiIconButton-label-id"
+                    >
+                      <div
+                        class="OrderFulfillLine-warehouseButtonContent-id"
+                      >
+                        <div
+                          class="MuiTypography-root-id OrderFulfillLine-warehouseButtonContentText-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+                        >
+                          Select warehouse...
+                        </div>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id MacawIcon-root-id"
+                          fill="none"
+                          focusable="false"
+                          height="24"
+                          viewBox="0 0 24 24"
+                          width="24"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="m8 10 4 4 4-4"
+                            stroke="currentColor"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="1.5"
+                          />
+                        </svg>
+                      </div>
+                    </span>
+                  </button>
                 </td>
               </tr>
             </tbody>
@@ -114687,79 +114813,121 @@ exports[`Storyshots Views / Orders / Fulfill order error 1`] = `
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillLine-colName-id"
                   data-test-id="table-cell-avatar"
+                  thumbnail="sample-product.jpg"
                 >
                   <div
                     class="Avatar-content-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id MuiAvatar-colorDefault-id"
+                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
-                        data-test-id="imageIcon"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          clip-rule="evenodd"
-                          d="M2 5C2 3.34315 3.34315 2 5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5ZM5 4C4.44772 4 4 4.44772 4 5V15.7962L11.0456 9.63136L12.5 11.0858L16 7.58579L20 11.5858V5C20 4.44772 19.5523 4 19 4H5ZM20 14.4142L16 10.4142L12.5 13.9142L10.9544 12.3686L4 18.4538V19C4 19.5523 4.44772 20 5 20H19C19.5523 20 20 19.5523 20 19V14.4142Z"
-                          fill="currentColor"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
+                      <img
+                        class="MuiAvatar-img-id"
+                        src="sample-product.jpg"
+                      />
                     </div>
                     <div
                       class="Avatar-children-id"
                     >
-                      <span
-                        class="Skeleton-skeleton-id"
-                        data-test-id="skeleton"
+                      T-Shirt
+                      <div
+                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                       >
-                        ‌
-                      </span>
+                        S
+                      </div>
                     </div>
                   </div>
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillLine-colSku-id"
                 >
-                  <span
-                    class="Skeleton-skeleton-id"
-                    data-test-id="skeleton"
-                  >
-                    ‌
-                  </span>
+                  62783187
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillLine-colQuantity-id"
                 >
-                  <span
-                    class="Skeleton-skeleton-id"
-                    data-test-id="skeleton"
+                  <div
+                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                   >
-                    ‌
-                  </span>
+                    <div
+                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
+                    >
+                      <input
+                        aria-invalid="false"
+                        class="MuiInputBase-input-id MuiOutlinedInput-input-id OrderFulfillLine-quantityInnerInput-id OrderFulfillLine-quantityInnerInputNoRemaining-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
+                        min="0"
+                        style="text-align:right"
+                        type="number"
+                        value="2"
+                      />
+                      <div
+                        class="OrderFulfillLine-remainingQuantity-id"
+                      >
+                        / 2
+                      </div>
+                      <fieldset
+                        aria-hidden="true"
+                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id OrderFulfillLine-warning-id"
+                        style="padding-left:8px"
+                      >
+                        <legend
+                          class="PrivateNotchedOutline-legend-id"
+                          style="width:0.01px"
+                        >
+                          <span>
+                            ​
+                          </span>
+                        </legend>
+                      </fieldset>
+                    </div>
+                  </div>
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillLine-colStock-id"
                 >
-                  <span
-                    class="Skeleton-skeleton-id"
-                    data-test-id="skeleton"
-                  >
-                    ‌
-                  </span>
+                  -
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillLine-colWarehouse-id"
                 >
-                  <span
-                    class="Skeleton-skeleton-id"
-                    data-test-id="skeleton"
+                  <button
+                    class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id OrderFulfillLine-warehouseButton-id"
+                    data-test-id="select-warehouse-button"
+                    tabindex="0"
+                    type="button"
                   >
-                    ‌
-                  </span>
+                    <span
+                      class="MuiIconButton-label-id"
+                    >
+                      <div
+                        class="OrderFulfillLine-warehouseButtonContent-id"
+                      >
+                        <div
+                          class="MuiTypography-root-id OrderFulfillLine-warehouseButtonContentText-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+                        >
+                          Select warehouse...
+                        </div>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id MacawIcon-root-id"
+                          fill="none"
+                          focusable="false"
+                          height="24"
+                          viewBox="0 0 24 24"
+                          width="24"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="m8 10 4 4 4-4"
+                            stroke="currentColor"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="1.5"
+                          />
+                        </svg>
+                      </div>
+                    </span>
+                  </button>
                 </td>
               </tr>
               <tr
@@ -114768,79 +114936,121 @@ exports[`Storyshots Views / Orders / Fulfill order error 1`] = `
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillLine-colName-id"
                   data-test-id="table-cell-avatar"
+                  thumbnail="sample-product.jpg"
                 >
                   <div
                     class="Avatar-content-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id MuiAvatar-colorDefault-id"
+                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
-                        data-test-id="imageIcon"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          clip-rule="evenodd"
-                          d="M2 5C2 3.34315 3.34315 2 5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5ZM5 4C4.44772 4 4 4.44772 4 5V15.7962L11.0456 9.63136L12.5 11.0858L16 7.58579L20 11.5858V5C20 4.44772 19.5523 4 19 4H5ZM20 14.4142L16 10.4142L12.5 13.9142L10.9544 12.3686L4 18.4538V19C4 19.5523 4.44772 20 5 20H19C19.5523 20 20 19.5523 20 19V14.4142Z"
-                          fill="currentColor"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
+                      <img
+                        class="MuiAvatar-img-id"
+                        src="sample-product.jpg"
+                      />
                     </div>
                     <div
                       class="Avatar-children-id"
                     >
-                      <span
-                        class="Skeleton-skeleton-id"
-                        data-test-id="skeleton"
+                      Lemon Juice
+                      <div
+                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                       >
-                        ‌
-                      </span>
+                        2.5l
+                      </div>
                     </div>
                   </div>
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillLine-colSku-id"
                 >
-                  <span
-                    class="Skeleton-skeleton-id"
-                    data-test-id="skeleton"
-                  >
-                    ‌
-                  </span>
+                  998323583
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillLine-colQuantity-id"
                 >
-                  <span
-                    class="Skeleton-skeleton-id"
-                    data-test-id="skeleton"
+                  <div
+                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                   >
-                    ‌
-                  </span>
+                    <div
+                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
+                    >
+                      <input
+                        aria-invalid="false"
+                        class="MuiInputBase-input-id MuiOutlinedInput-input-id OrderFulfillLine-quantityInnerInput-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
+                        min="0"
+                        style="text-align:right"
+                        type="number"
+                        value="4"
+                      />
+                      <div
+                        class="OrderFulfillLine-remainingQuantity-id"
+                      >
+                        / 4
+                      </div>
+                      <fieldset
+                        aria-hidden="true"
+                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id OrderFulfillLine-warning-id"
+                        style="padding-left:8px"
+                      >
+                        <legend
+                          class="PrivateNotchedOutline-legend-id"
+                          style="width:0.01px"
+                        >
+                          <span>
+                            ​
+                          </span>
+                        </legend>
+                      </fieldset>
+                    </div>
+                  </div>
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillLine-colStock-id"
                 >
-                  <span
-                    class="Skeleton-skeleton-id"
-                    data-test-id="skeleton"
-                  >
-                    ‌
-                  </span>
+                  -
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillLine-colWarehouse-id"
                 >
-                  <span
-                    class="Skeleton-skeleton-id"
-                    data-test-id="skeleton"
+                  <button
+                    class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id OrderFulfillLine-warehouseButton-id"
+                    data-test-id="select-warehouse-button"
+                    tabindex="0"
+                    type="button"
                   >
-                    ‌
-                  </span>
+                    <span
+                      class="MuiIconButton-label-id"
+                    >
+                      <div
+                        class="OrderFulfillLine-warehouseButtonContent-id"
+                      >
+                        <div
+                          class="MuiTypography-root-id OrderFulfillLine-warehouseButtonContentText-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+                        >
+                          Select warehouse...
+                        </div>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id MacawIcon-root-id"
+                          fill="none"
+                          focusable="false"
+                          height="24"
+                          viewBox="0 0 24 24"
+                          width="24"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="m8 10 4 4 4-4"
+                            stroke="currentColor"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="1.5"
+                          />
+                        </svg>
+                      </div>
+                    </span>
+                  </button>
                 </td>
               </tr>
               <tr
@@ -114849,79 +115059,121 @@ exports[`Storyshots Views / Orders / Fulfill order error 1`] = `
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillLine-colName-id"
                   data-test-id="table-cell-avatar"
+                  thumbnail="sample-product.jpg"
                 >
                   <div
                     class="Avatar-content-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id MuiAvatar-colorDefault-id"
+                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
-                        data-test-id="imageIcon"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          clip-rule="evenodd"
-                          d="M2 5C2 3.34315 3.34315 2 5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5ZM5 4C4.44772 4 4 4.44772 4 5V15.7962L11.0456 9.63136L12.5 11.0858L16 7.58579L20 11.5858V5C20 4.44772 19.5523 4 19 4H5ZM20 14.4142L16 10.4142L12.5 13.9142L10.9544 12.3686L4 18.4538V19C4 19.5523 4.44772 20 5 20H19C19.5523 20 20 19.5523 20 19V14.4142Z"
-                          fill="currentColor"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
+                      <img
+                        class="MuiAvatar-img-id"
+                        src="sample-product.jpg"
+                      />
                     </div>
                     <div
                       class="Avatar-children-id"
                     >
-                      <span
-                        class="Skeleton-skeleton-id"
-                        data-test-id="skeleton"
+                      Orange Juice
+                      <div
+                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                       >
-                        ‌
-                      </span>
+                        5l
+                      </div>
                     </div>
                   </div>
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillLine-colSku-id"
                 >
-                  <span
-                    class="Skeleton-skeleton-id"
-                    data-test-id="skeleton"
-                  >
-                    ‌
-                  </span>
+                  998323584
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillLine-colQuantity-id"
                 >
-                  <span
-                    class="Skeleton-skeleton-id"
-                    data-test-id="skeleton"
+                  <div
+                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                   >
-                    ‌
-                  </span>
+                    <div
+                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
+                    >
+                      <input
+                        aria-invalid="false"
+                        class="MuiInputBase-input-id MuiOutlinedInput-input-id OrderFulfillLine-quantityInnerInput-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
+                        min="0"
+                        style="text-align:right"
+                        type="number"
+                        value="1"
+                      />
+                      <div
+                        class="OrderFulfillLine-remainingQuantity-id"
+                      >
+                        / 1
+                      </div>
+                      <fieldset
+                        aria-hidden="true"
+                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id OrderFulfillLine-warning-id"
+                        style="padding-left:8px"
+                      >
+                        <legend
+                          class="PrivateNotchedOutline-legend-id"
+                          style="width:0.01px"
+                        >
+                          <span>
+                            ​
+                          </span>
+                        </legend>
+                      </fieldset>
+                    </div>
+                  </div>
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillLine-colStock-id"
                 >
-                  <span
-                    class="Skeleton-skeleton-id"
-                    data-test-id="skeleton"
-                  >
-                    ‌
-                  </span>
+                  -
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillLine-colWarehouse-id"
                 >
-                  <span
-                    class="Skeleton-skeleton-id"
-                    data-test-id="skeleton"
+                  <button
+                    class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id OrderFulfillLine-warehouseButton-id"
+                    data-test-id="select-warehouse-button"
+                    tabindex="0"
+                    type="button"
                   >
-                    ‌
-                  </span>
+                    <span
+                      class="MuiIconButton-label-id"
+                    >
+                      <div
+                        class="OrderFulfillLine-warehouseButtonContent-id"
+                      >
+                        <div
+                          class="MuiTypography-root-id OrderFulfillLine-warehouseButtonContentText-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+                        >
+                          Select warehouse...
+                        </div>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id MacawIcon-root-id"
+                          fill="none"
+                          focusable="false"
+                          height="24"
+                          viewBox="0 0 24 24"
+                          width="24"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="m8 10 4 4 4-4"
+                            stroke="currentColor"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="1.5"
+                          />
+                        </svg>
+                      </div>
+                    </span>
+                  </button>
                 </td>
               </tr>
             </tbody>
@@ -115098,79 +115350,121 @@ exports[`Storyshots Views / Orders / Fulfill order one warehouse 1`] = `
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillLine-colName-id"
                   data-test-id="table-cell-avatar"
+                  thumbnail="sample-product.jpg"
                 >
                   <div
                     class="Avatar-content-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id MuiAvatar-colorDefault-id"
+                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
-                        data-test-id="imageIcon"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          clip-rule="evenodd"
-                          d="M2 5C2 3.34315 3.34315 2 5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5ZM5 4C4.44772 4 4 4.44772 4 5V15.7962L11.0456 9.63136L12.5 11.0858L16 7.58579L20 11.5858V5C20 4.44772 19.5523 4 19 4H5ZM20 14.4142L16 10.4142L12.5 13.9142L10.9544 12.3686L4 18.4538V19C4 19.5523 4.44772 20 5 20H19C19.5523 20 20 19.5523 20 19V14.4142Z"
-                          fill="currentColor"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
+                      <img
+                        class="MuiAvatar-img-id"
+                        src="sample-product.jpg"
+                      />
                     </div>
                     <div
                       class="Avatar-children-id"
                     >
-                      <span
-                        class="Skeleton-skeleton-id"
-                        data-test-id="skeleton"
+                      T-Shirt
+                      <div
+                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                       >
-                        ‌
-                      </span>
+                        S
+                      </div>
                     </div>
                   </div>
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillLine-colSku-id"
                 >
-                  <span
-                    class="Skeleton-skeleton-id"
-                    data-test-id="skeleton"
-                  >
-                    ‌
-                  </span>
+                  62783187
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillLine-colQuantity-id"
                 >
-                  <span
-                    class="Skeleton-skeleton-id"
-                    data-test-id="skeleton"
+                  <div
+                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                   >
-                    ‌
-                  </span>
+                    <div
+                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
+                    >
+                      <input
+                        aria-invalid="false"
+                        class="MuiInputBase-input-id MuiOutlinedInput-input-id OrderFulfillLine-quantityInnerInput-id OrderFulfillLine-quantityInnerInputNoRemaining-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
+                        min="0"
+                        style="text-align:right"
+                        type="number"
+                        value="2"
+                      />
+                      <div
+                        class="OrderFulfillLine-remainingQuantity-id"
+                      >
+                        / 2
+                      </div>
+                      <fieldset
+                        aria-hidden="true"
+                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id OrderFulfillLine-warning-id"
+                        style="padding-left:8px"
+                      >
+                        <legend
+                          class="PrivateNotchedOutline-legend-id"
+                          style="width:0.01px"
+                        >
+                          <span>
+                            ​
+                          </span>
+                        </legend>
+                      </fieldset>
+                    </div>
+                  </div>
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillLine-colStock-id"
                 >
-                  <span
-                    class="Skeleton-skeleton-id"
-                    data-test-id="skeleton"
-                  >
-                    ‌
-                  </span>
+                  -
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillLine-colWarehouse-id"
                 >
-                  <span
-                    class="Skeleton-skeleton-id"
-                    data-test-id="skeleton"
+                  <button
+                    class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id OrderFulfillLine-warehouseButton-id"
+                    data-test-id="select-warehouse-button"
+                    tabindex="0"
+                    type="button"
                   >
-                    ‌
-                  </span>
+                    <span
+                      class="MuiIconButton-label-id"
+                    >
+                      <div
+                        class="OrderFulfillLine-warehouseButtonContent-id"
+                      >
+                        <div
+                          class="MuiTypography-root-id OrderFulfillLine-warehouseButtonContentText-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+                        >
+                          Select warehouse...
+                        </div>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id MacawIcon-root-id"
+                          fill="none"
+                          focusable="false"
+                          height="24"
+                          viewBox="0 0 24 24"
+                          width="24"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="m8 10 4 4 4-4"
+                            stroke="currentColor"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="1.5"
+                          />
+                        </svg>
+                      </div>
+                    </span>
+                  </button>
                 </td>
               </tr>
               <tr
@@ -115179,79 +115473,121 @@ exports[`Storyshots Views / Orders / Fulfill order one warehouse 1`] = `
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillLine-colName-id"
                   data-test-id="table-cell-avatar"
+                  thumbnail="sample-product.jpg"
                 >
                   <div
                     class="Avatar-content-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id MuiAvatar-colorDefault-id"
+                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
-                        data-test-id="imageIcon"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          clip-rule="evenodd"
-                          d="M2 5C2 3.34315 3.34315 2 5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5ZM5 4C4.44772 4 4 4.44772 4 5V15.7962L11.0456 9.63136L12.5 11.0858L16 7.58579L20 11.5858V5C20 4.44772 19.5523 4 19 4H5ZM20 14.4142L16 10.4142L12.5 13.9142L10.9544 12.3686L4 18.4538V19C4 19.5523 4.44772 20 5 20H19C19.5523 20 20 19.5523 20 19V14.4142Z"
-                          fill="currentColor"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
+                      <img
+                        class="MuiAvatar-img-id"
+                        src="sample-product.jpg"
+                      />
                     </div>
                     <div
                       class="Avatar-children-id"
                     >
-                      <span
-                        class="Skeleton-skeleton-id"
-                        data-test-id="skeleton"
+                      Lemon Juice
+                      <div
+                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                       >
-                        ‌
-                      </span>
+                        2.5l
+                      </div>
                     </div>
                   </div>
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillLine-colSku-id"
                 >
-                  <span
-                    class="Skeleton-skeleton-id"
-                    data-test-id="skeleton"
-                  >
-                    ‌
-                  </span>
+                  998323583
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillLine-colQuantity-id"
                 >
-                  <span
-                    class="Skeleton-skeleton-id"
-                    data-test-id="skeleton"
+                  <div
+                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                   >
-                    ‌
-                  </span>
+                    <div
+                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
+                    >
+                      <input
+                        aria-invalid="false"
+                        class="MuiInputBase-input-id MuiOutlinedInput-input-id OrderFulfillLine-quantityInnerInput-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
+                        min="0"
+                        style="text-align:right"
+                        type="number"
+                        value="4"
+                      />
+                      <div
+                        class="OrderFulfillLine-remainingQuantity-id"
+                      >
+                        / 4
+                      </div>
+                      <fieldset
+                        aria-hidden="true"
+                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id OrderFulfillLine-warning-id"
+                        style="padding-left:8px"
+                      >
+                        <legend
+                          class="PrivateNotchedOutline-legend-id"
+                          style="width:0.01px"
+                        >
+                          <span>
+                            ​
+                          </span>
+                        </legend>
+                      </fieldset>
+                    </div>
+                  </div>
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillLine-colStock-id"
                 >
-                  <span
-                    class="Skeleton-skeleton-id"
-                    data-test-id="skeleton"
-                  >
-                    ‌
-                  </span>
+                  -
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillLine-colWarehouse-id"
                 >
-                  <span
-                    class="Skeleton-skeleton-id"
-                    data-test-id="skeleton"
+                  <button
+                    class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id OrderFulfillLine-warehouseButton-id"
+                    data-test-id="select-warehouse-button"
+                    tabindex="0"
+                    type="button"
                   >
-                    ‌
-                  </span>
+                    <span
+                      class="MuiIconButton-label-id"
+                    >
+                      <div
+                        class="OrderFulfillLine-warehouseButtonContent-id"
+                      >
+                        <div
+                          class="MuiTypography-root-id OrderFulfillLine-warehouseButtonContentText-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+                        >
+                          Select warehouse...
+                        </div>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id MacawIcon-root-id"
+                          fill="none"
+                          focusable="false"
+                          height="24"
+                          viewBox="0 0 24 24"
+                          width="24"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="m8 10 4 4 4-4"
+                            stroke="currentColor"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="1.5"
+                          />
+                        </svg>
+                      </div>
+                    </span>
+                  </button>
                 </td>
               </tr>
               <tr
@@ -115260,79 +115596,121 @@ exports[`Storyshots Views / Orders / Fulfill order one warehouse 1`] = `
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillLine-colName-id"
                   data-test-id="table-cell-avatar"
+                  thumbnail="sample-product.jpg"
                 >
                   <div
                     class="Avatar-content-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id MuiAvatar-colorDefault-id"
+                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
-                        data-test-id="imageIcon"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          clip-rule="evenodd"
-                          d="M2 5C2 3.34315 3.34315 2 5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5ZM5 4C4.44772 4 4 4.44772 4 5V15.7962L11.0456 9.63136L12.5 11.0858L16 7.58579L20 11.5858V5C20 4.44772 19.5523 4 19 4H5ZM20 14.4142L16 10.4142L12.5 13.9142L10.9544 12.3686L4 18.4538V19C4 19.5523 4.44772 20 5 20H19C19.5523 20 20 19.5523 20 19V14.4142Z"
-                          fill="currentColor"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
+                      <img
+                        class="MuiAvatar-img-id"
+                        src="sample-product.jpg"
+                      />
                     </div>
                     <div
                       class="Avatar-children-id"
                     >
-                      <span
-                        class="Skeleton-skeleton-id"
-                        data-test-id="skeleton"
+                      Orange Juice
+                      <div
+                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                       >
-                        ‌
-                      </span>
+                        5l
+                      </div>
                     </div>
                   </div>
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillLine-colSku-id"
                 >
-                  <span
-                    class="Skeleton-skeleton-id"
-                    data-test-id="skeleton"
-                  >
-                    ‌
-                  </span>
+                  998323584
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillLine-colQuantity-id"
                 >
-                  <span
-                    class="Skeleton-skeleton-id"
-                    data-test-id="skeleton"
+                  <div
+                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                   >
-                    ‌
-                  </span>
+                    <div
+                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
+                    >
+                      <input
+                        aria-invalid="false"
+                        class="MuiInputBase-input-id MuiOutlinedInput-input-id OrderFulfillLine-quantityInnerInput-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
+                        min="0"
+                        style="text-align:right"
+                        type="number"
+                        value="1"
+                      />
+                      <div
+                        class="OrderFulfillLine-remainingQuantity-id"
+                      >
+                        / 1
+                      </div>
+                      <fieldset
+                        aria-hidden="true"
+                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id OrderFulfillLine-warning-id"
+                        style="padding-left:8px"
+                      >
+                        <legend
+                          class="PrivateNotchedOutline-legend-id"
+                          style="width:0.01px"
+                        >
+                          <span>
+                            ​
+                          </span>
+                        </legend>
+                      </fieldset>
+                    </div>
+                  </div>
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillLine-colStock-id"
                 >
-                  <span
-                    class="Skeleton-skeleton-id"
-                    data-test-id="skeleton"
-                  >
-                    ‌
-                  </span>
+                  -
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillLine-colWarehouse-id"
                 >
-                  <span
-                    class="Skeleton-skeleton-id"
-                    data-test-id="skeleton"
+                  <button
+                    class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id OrderFulfillLine-warehouseButton-id"
+                    data-test-id="select-warehouse-button"
+                    tabindex="0"
+                    type="button"
                   >
-                    ‌
-                  </span>
+                    <span
+                      class="MuiIconButton-label-id"
+                    >
+                      <div
+                        class="OrderFulfillLine-warehouseButtonContent-id"
+                      >
+                        <div
+                          class="MuiTypography-root-id OrderFulfillLine-warehouseButtonContentText-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+                        >
+                          Select warehouse...
+                        </div>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id MacawIcon-root-id"
+                          fill="none"
+                          focusable="false"
+                          height="24"
+                          viewBox="0 0 24 24"
+                          width="24"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="m8 10 4 4 4-4"
+                            stroke="currentColor"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="1.5"
+                          />
+                        </svg>
+                      </div>
+                    </span>
+                  </button>
                 </td>
               </tr>
             </tbody>