diff --git a/src/storybook/__snapshots__/Stories.test.ts.snap b/src/storybook/__snapshots__/Stories.test.ts.snap
index d72da75a6..2d8f82911 100644
--- a/src/storybook/__snapshots__/Stories.test.ts.snap
+++ b/src/storybook/__snapshots__/Stories.test.ts.snap
@@ -86562,7 +86562,7 @@ exports[`Storyshots Views / Products / Create multiple variants / summary defaul
                     >
                       <legend
                         class="PrivateNotchedOutline-legend-id"
-                        style="width:0"
+                        style="width:0.01px"
                       >
                         <span>
                           ​
@@ -86680,7 +86680,7 @@ exports[`Storyshots Views / Products / Create multiple variants / summary defaul
                     >
                       <legend
                         class="PrivateNotchedOutline-legend-id"
-                        style="width:0.01px"
+                        style="width:0"
                       >
                         <span>
                           ​
@@ -97552,99 +97552,6 @@ Ctrl + K"
                   </div>
                 </div>
               </div>
-              <div
-                class="MuiCardContent-root-id"
-              >
-                <div
-                  class="ProductImages-root-id"
-                >
-                  <div
-                    class="ImageTile-imageContainer-id"
-                    data-tc="product-image"
-                  >
-                    <div
-                      class="ImageTile-imageOverlay-id"
-                    >
-                      <div
-                        class="ImageTile-imageOverlayToolbar-id"
-                      />
-                    </div>
-                    <img
-                      alt="Id sit dolores adipisci"
-                      class="ImageTile-image-id"
-                      src="placeholder255x255.png"
-                    />
-                  </div>
-                  <div
-                    class="ImageTile-imageContainer-id"
-                    data-tc="product-image"
-                  >
-                    <div
-                      class="ImageTile-imageOverlay-id"
-                    >
-                      <div
-                        class="ImageTile-imageOverlayToolbar-id"
-                      />
-                    </div>
-                    <img
-                      alt="Id sit dolores adipisci"
-                      class="ImageTile-image-id"
-                      src="placeholder255x255.png"
-                    />
-                  </div>
-                  <div
-                    class="ImageTile-imageContainer-id"
-                    data-tc="product-image"
-                  >
-                    <div
-                      class="ImageTile-imageOverlay-id"
-                    >
-                      <div
-                        class="ImageTile-imageOverlayToolbar-id"
-                      />
-                    </div>
-                    <img
-                      alt="Id sit dolores adipisci"
-                      class="ImageTile-image-id"
-                      src="placeholder255x255.png"
-                    />
-                  </div>
-                  <div
-                    class="ImageTile-imageContainer-id"
-                    data-tc="product-image"
-                  >
-                    <div
-                      class="ImageTile-imageOverlay-id"
-                    >
-                      <div
-                        class="ImageTile-imageOverlayToolbar-id"
-                      />
-                    </div>
-                    <img
-                      alt="Id sit dolores adipisci"
-                      class="ImageTile-image-id"
-                      src="placeholder255x255.png"
-                    />
-                  </div>
-                  <div
-                    class="ImageTile-imageContainer-id"
-                    data-tc="product-image"
-                  >
-                    <div
-                      class="ImageTile-imageOverlay-id"
-                    >
-                      <div
-                        class="ImageTile-imageOverlayToolbar-id"
-                      />
-                    </div>
-                    <img
-                      alt="Id sit dolores adipisci"
-                      class="ImageTile-image-id"
-                      src="placeholder255x255.png"
-                    />
-                  </div>
-                </div>
-              </div>
             </div>
           </div>
           <div
@@ -97747,6 +97654,99 @@ Ctrl + K"
                   </div>
                 </div>
               </div>
+              <div
+                class="MuiCardContent-root-id"
+              >
+                <div
+                  class="ProductImages-root-id"
+                >
+                  <div
+                    class="ImageTile-imageContainer-id"
+                    data-tc="product-image"
+                  >
+                    <div
+                      class="ImageTile-imageOverlay-id"
+                    >
+                      <div
+                        class="ImageTile-imageOverlayToolbar-id"
+                      />
+                    </div>
+                    <img
+                      alt="Id sit dolores adipisci"
+                      class="ImageTile-image-id"
+                      src="placeholder255x255.png"
+                    />
+                  </div>
+                  <div
+                    class="ImageTile-imageContainer-id"
+                    data-tc="product-image"
+                  >
+                    <div
+                      class="ImageTile-imageOverlay-id"
+                    >
+                      <div
+                        class="ImageTile-imageOverlayToolbar-id"
+                      />
+                    </div>
+                    <img
+                      alt="Id sit dolores adipisci"
+                      class="ImageTile-image-id"
+                      src="placeholder255x255.png"
+                    />
+                  </div>
+                  <div
+                    class="ImageTile-imageContainer-id"
+                    data-tc="product-image"
+                  >
+                    <div
+                      class="ImageTile-imageOverlay-id"
+                    >
+                      <div
+                        class="ImageTile-imageOverlayToolbar-id"
+                      />
+                    </div>
+                    <img
+                      alt="Id sit dolores adipisci"
+                      class="ImageTile-image-id"
+                      src="placeholder255x255.png"
+                    />
+                  </div>
+                  <div
+                    class="ImageTile-imageContainer-id"
+                    data-tc="product-image"
+                  >
+                    <div
+                      class="ImageTile-imageOverlay-id"
+                    >
+                      <div
+                        class="ImageTile-imageOverlayToolbar-id"
+                      />
+                    </div>
+                    <img
+                      alt="Id sit dolores adipisci"
+                      class="ImageTile-image-id"
+                      src="placeholder255x255.png"
+                    />
+                  </div>
+                  <div
+                    class="ImageTile-imageContainer-id"
+                    data-tc="product-image"
+                  >
+                    <div
+                      class="ImageTile-imageOverlay-id"
+                    >
+                      <div
+                        class="ImageTile-imageOverlayToolbar-id"
+                      />
+                    </div>
+                    <img
+                      alt="Id sit dolores adipisci"
+                      class="ImageTile-image-id"
+                      src="placeholder255x255.png"
+                    />
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
           <div
@@ -99290,7 +99290,7 @@ Ctrl + K"
                     >
                       <legend
                         class="PrivateNotchedOutline-legend-id"
-                        style="width:0.01px"
+                        style="width:0"
                       >
                         <span>
                           ​
@@ -99359,7 +99359,7 @@ Ctrl + K"
                     >
                       <legend
                         class="PrivateNotchedOutline-legend-id"
-                        style="width:0"
+                        style="width:0.01px"
                       >
                         <span>
                           ​
@@ -104730,7 +104730,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                   data-tc="product-type"
                 >
-                  Top (clothing)
+                  Juice
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
@@ -104925,7 +104925,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                   data-tc="product-type"
                 >
-                  Juice
+                  Top (clothing)
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
@@ -105047,7 +105047,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                     <div
                       class="TableCellAvatar-children-id"
                     >
-                      Black Hoodie
+                      Polo Shirt
                     </div>
                   </div>
                 </td>
@@ -105112,7 +105112,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                     <div
                       class="TableCellAvatar-children-id"
                     >
-                      Blue Hoodie
+                      Black Hoodie
                     </div>
                   </div>
                 </td>
@@ -105177,7 +105177,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                     <div
                       class="TableCellAvatar-children-id"
                     >
-                      Mustard Hoodie
+                      Blue Hoodie
                     </div>
                   </div>
                 </td>
@@ -105242,7 +105242,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                     <div
                       class="TableCellAvatar-children-id"
                     >
-                      Polo Shirt
+                      Mustard Hoodie
                     </div>
                   </div>
                 </td>
@@ -105250,7 +105250,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                   data-tc="product-type"
                 >
-                  Cushion
+                  Top (clothing)
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
@@ -105315,7 +105315,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                   data-tc="product-type"
                 >
-                  Top (clothing)
+                  Cushion
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"