diff --git a/src/storybook/__snapshots__/Stories.test.ts.snap b/src/storybook/__snapshots__/Stories.test.ts.snap
index 9c1078adc..af29f356b 100644
--- a/src/storybook/__snapshots__/Stories.test.ts.snap
+++ b/src/storybook/__snapshots__/Stories.test.ts.snap
@@ -93850,32 +93850,83 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                 </button>
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id ProductList-colName-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id Hook-root-id ProductList-colName-id"
                 scope="col"
               >
-                <span
-                  class="ProductList-colNameHeader-id"
+                <div
+                  class="Hook-labelContainer-id"
                 >
-                  Name
-                </span>
+                  <div
+                    class="Hook-label-id"
+                  >
+                    <span
+                      class="ProductList-colNameHeader-id"
+                    >
+                      Name
+                    </span>
+                  </div>
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root-id Hook-arrow-id Hook-arrowUp-id"
+                    focusable="false"
+                    role="presentation"
+                    viewBox="0 0 24 24"
+                  >
+                    <rect
+                      fill="transparent"
+                      height="24"
+                      width="24"
+                    />
+                    <path
+                      clip-rule="evenodd"
+                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
+                      fill="currentColor"
+                      fill-rule="evenodd"
+                    />
+                  </svg>
+                </div>
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id ProductList-colType-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id Hook-root-id ProductList-colType-id"
                 scope="col"
               >
-                Type
+                <div
+                  class="Hook-labelContainer-id"
+                >
+                  <div
+                    class="Hook-label-id"
+                  >
+                    Type
+                  </div>
+                </div>
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id ProductList-colPublished-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id Hook-root-id ProductList-colPublished-id"
                 scope="col"
               >
-                Published
+                <div
+                  class="Hook-labelContainer-id"
+                >
+                  <div
+                    class="Hook-label-id"
+                  >
+                    Published
+                  </div>
+                </div>
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id ProductList-colPrice-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id Hook-root-id ProductList-colPrice-id"
                 scope="col"
               >
-                Price
+                <div
+                  class="Hook-labelContainer-id Hook-labelContainerRight-id"
+                >
+                  <div
+                    class="Hook-label-id"
+                  >
+                    Price
+                  </div>
+                </div>
               </th>
             </tr>
           </thead>
@@ -95424,32 +95475,83 @@ exports[`Storyshots Views / Products / Product list loading 1`] = `
                 </button>
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id ProductList-colName-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id Hook-root-id ProductList-colName-id"
                 scope="col"
               >
-                <span
-                  class="ProductList-colNameHeader-id"
+                <div
+                  class="Hook-labelContainer-id"
                 >
-                  Name
-                </span>
+                  <div
+                    class="Hook-label-id"
+                  >
+                    <span
+                      class="ProductList-colNameHeader-id"
+                    >
+                      Name
+                    </span>
+                  </div>
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root-id Hook-arrow-id Hook-arrowUp-id"
+                    focusable="false"
+                    role="presentation"
+                    viewBox="0 0 24 24"
+                  >
+                    <rect
+                      fill="transparent"
+                      height="24"
+                      width="24"
+                    />
+                    <path
+                      clip-rule="evenodd"
+                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
+                      fill="currentColor"
+                      fill-rule="evenodd"
+                    />
+                  </svg>
+                </div>
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id ProductList-colType-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id Hook-root-id ProductList-colType-id"
                 scope="col"
               >
-                Type
+                <div
+                  class="Hook-labelContainer-id"
+                >
+                  <div
+                    class="Hook-label-id"
+                  >
+                    Type
+                  </div>
+                </div>
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id ProductList-colPublished-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id Hook-root-id ProductList-colPublished-id"
                 scope="col"
               >
-                Published
+                <div
+                  class="Hook-labelContainer-id"
+                >
+                  <div
+                    class="Hook-label-id"
+                  >
+                    Published
+                  </div>
+                </div>
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id ProductList-colPrice-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id Hook-root-id ProductList-colPrice-id"
                 scope="col"
               >
-                Price
+                <div
+                  class="Hook-labelContainer-id Hook-labelContainerRight-id"
+                >
+                  <div
+                    class="Hook-label-id"
+                  >
+                    Price
+                  </div>
+                </div>
               </th>
             </tr>
           </thead>
@@ -95885,32 +95987,83 @@ exports[`Storyshots Views / Products / Product list no data 1`] = `
               class="MuiTableRow-root-id MuiTableRow-head-id"
             >
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id ProductList-colName-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id Hook-root-id ProductList-colName-id"
                 scope="col"
               >
-                <span
-                  class="ProductList-colNameHeader-id"
+                <div
+                  class="Hook-labelContainer-id"
                 >
-                  Name
-                </span>
+                  <div
+                    class="Hook-label-id"
+                  >
+                    <span
+                      class="ProductList-colNameHeader-id"
+                    >
+                      Name
+                    </span>
+                  </div>
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root-id Hook-arrow-id Hook-arrowUp-id"
+                    focusable="false"
+                    role="presentation"
+                    viewBox="0 0 24 24"
+                  >
+                    <rect
+                      fill="transparent"
+                      height="24"
+                      width="24"
+                    />
+                    <path
+                      clip-rule="evenodd"
+                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
+                      fill="currentColor"
+                      fill-rule="evenodd"
+                    />
+                  </svg>
+                </div>
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id ProductList-colType-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id Hook-root-id ProductList-colType-id"
                 scope="col"
               >
-                Type
+                <div
+                  class="Hook-labelContainer-id"
+                >
+                  <div
+                    class="Hook-label-id"
+                  >
+                    Type
+                  </div>
+                </div>
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id ProductList-colPublished-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id Hook-root-id ProductList-colPublished-id"
                 scope="col"
               >
-                Published
+                <div
+                  class="Hook-labelContainer-id"
+                >
+                  <div
+                    class="Hook-label-id"
+                  >
+                    Published
+                  </div>
+                </div>
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id ProductList-colPrice-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id Hook-root-id ProductList-colPrice-id"
                 scope="col"
               >
-                Price
+                <div
+                  class="Hook-labelContainer-id Hook-labelContainerRight-id"
+                >
+                  <div
+                    class="Hook-label-id"
+                  >
+                    Price
+                  </div>
+                </div>
               </th>
             </tr>
           </thead>
@@ -96742,32 +96895,83 @@ exports[`Storyshots Views / Products / Product list with custom filters 1`] = `
                 </button>
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id ProductList-colName-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id Hook-root-id ProductList-colName-id"
                 scope="col"
               >
-                <span
-                  class="ProductList-colNameHeader-id"
+                <div
+                  class="Hook-labelContainer-id"
                 >
-                  Name
-                </span>
+                  <div
+                    class="Hook-label-id"
+                  >
+                    <span
+                      class="ProductList-colNameHeader-id"
+                    >
+                      Name
+                    </span>
+                  </div>
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root-id Hook-arrow-id Hook-arrowUp-id"
+                    focusable="false"
+                    role="presentation"
+                    viewBox="0 0 24 24"
+                  >
+                    <rect
+                      fill="transparent"
+                      height="24"
+                      width="24"
+                    />
+                    <path
+                      clip-rule="evenodd"
+                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
+                      fill="currentColor"
+                      fill-rule="evenodd"
+                    />
+                  </svg>
+                </div>
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id ProductList-colType-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id Hook-root-id ProductList-colType-id"
                 scope="col"
               >
-                Type
+                <div
+                  class="Hook-labelContainer-id"
+                >
+                  <div
+                    class="Hook-label-id"
+                  >
+                    Type
+                  </div>
+                </div>
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id ProductList-colPublished-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id Hook-root-id ProductList-colPublished-id"
                 scope="col"
               >
-                Published
+                <div
+                  class="Hook-labelContainer-id"
+                >
+                  <div
+                    class="Hook-label-id"
+                  >
+                    Published
+                  </div>
+                </div>
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id ProductList-colPrice-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id Hook-root-id ProductList-colPrice-id"
                 scope="col"
               >
-                Price
+                <div
+                  class="Hook-labelContainer-id Hook-labelContainerRight-id"
+                >
+                  <div
+                    class="Hook-label-id"
+                  >
+                    Price
+                  </div>
+                </div>
               </th>
             </tr>
           </thead>