diff --git a/CHANGELOG.md b/CHANGELOG.md
index 053f66dd9..d8b7dacaf 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,7 @@ All notable, unreleased changes to this project will be documented in this file.
 - Update customer's details page design - #248 by @dominik-zeglen
 - Use Apollo Hooks - #254 by @dominik-zeglen
 - Fix disappearing products description - #259 by @dominik-zeglen
+- Improve mobile appearance - #240 by @benekex2 and @dominik-zeglen
 
 ## 2.0.0
 
diff --git a/src/attributes/components/AttributeList/AttributeList.tsx b/src/attributes/components/AttributeList/AttributeList.tsx
index 9b34c1272..caa17b28e 100644
--- a/src/attributes/components/AttributeList/AttributeList.tsx
+++ b/src/attributes/components/AttributeList/AttributeList.tsx
@@ -1,5 +1,4 @@
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableFooter from "@material-ui/core/TableFooter";
@@ -8,6 +7,7 @@ import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
 import Checkbox from "@saleor/components/Checkbox";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import TableHead from "@saleor/components/TableHead";
 import TablePagination from "@saleor/components/TablePagination";
@@ -75,7 +75,7 @@ const AttributeList: React.FC<AttributeListProps> = ({
   const intl = useIntl();
 
   return (
-    <Table>
+    <ResponsiveTable>
       <TableHead
         colSpan={numberOfColumns}
         selected={selected}
@@ -207,7 +207,7 @@ const AttributeList: React.FC<AttributeListProps> = ({
           )
         )}
       </TableBody>
-    </Table>
+    </ResponsiveTable>
   );
 };
 AttributeList.displayName = "AttributeList";
diff --git a/src/attributes/components/AttributeValues/AttributeValues.tsx b/src/attributes/components/AttributeValues/AttributeValues.tsx
index f336e748f..c0e340d02 100644
--- a/src/attributes/components/AttributeValues/AttributeValues.tsx
+++ b/src/attributes/components/AttributeValues/AttributeValues.tsx
@@ -2,7 +2,6 @@ import Button from "@material-ui/core/Button";
 import Card from "@material-ui/core/Card";
 import IconButton from "@material-ui/core/IconButton";
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
 import TableCell from "@material-ui/core/TableCell";
 import TableHead from "@material-ui/core/TableHead";
 import TableRow from "@material-ui/core/TableRow";
@@ -11,6 +10,7 @@ import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
 import CardTitle from "@saleor/components/CardTitle";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import {
   SortableTableBody,
@@ -80,7 +80,7 @@ const AttributeValues: React.FC<AttributeValuesProps> = ({
           </Button>
         }
       />
-      <Table>
+      <ResponsiveTable>
         <TableHead>
           <TableRow>
             <TableCell className={classes.columnDrag} />
@@ -138,7 +138,7 @@ const AttributeValues: React.FC<AttributeValuesProps> = ({
             )
           )}
         </SortableTableBody>
-      </Table>
+      </ResponsiveTable>
     </Card>
   );
 };
diff --git a/src/categories/components/CategoryList/CategoryList.tsx b/src/categories/components/CategoryList/CategoryList.tsx
index 8426d628b..216d092e6 100644
--- a/src/categories/components/CategoryList/CategoryList.tsx
+++ b/src/categories/components/CategoryList/CategoryList.tsx
@@ -1,5 +1,4 @@
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableFooter from "@material-ui/core/TableFooter";
@@ -9,6 +8,7 @@ import { FormattedMessage } from "react-intl";
 
 import { CategoryFragment } from "@saleor/categories/types/CategoryFragment";
 import Checkbox from "@saleor/components/Checkbox";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import TableHead from "@saleor/components/TableHead";
 import TablePagination from "@saleor/components/TablePagination";
@@ -73,7 +73,7 @@ const CategoryList: React.FC<CategoryListProps> = props => {
   const classes = useStyles(props);
 
   return (
-    <Table>
+    <ResponsiveTable>
       <TableHead
         colSpan={numberOfColumns}
         selected={selected}
@@ -174,7 +174,7 @@ const CategoryList: React.FC<CategoryListProps> = props => {
           )
         )}
       </TableBody>
-    </Table>
+    </ResponsiveTable>
   );
 };
 
diff --git a/src/categories/components/CategoryProductList/CategoryProductList.tsx b/src/categories/components/CategoryProductList/CategoryProductList.tsx
index 82499e54f..50fe397a4 100644
--- a/src/categories/components/CategoryProductList/CategoryProductList.tsx
+++ b/src/categories/components/CategoryProductList/CategoryProductList.tsx
@@ -1,11 +1,11 @@
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableFooter from "@material-ui/core/TableFooter";
 import TableRow from "@material-ui/core/TableRow";
 import Checkbox from "@saleor/components/Checkbox";
 import Money from "@saleor/components/Money";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import StatusLabel from "@saleor/components/StatusLabel";
 import { FormattedMessage, useIntl } from "react-intl";
@@ -98,7 +98,7 @@ export const CategoryProductList: React.FC<
 
   return (
     <div className={classes.tableContainer}>
-      <Table className={classes.table}>
+      <ResponsiveTable className={classes.table}>
         <colgroup>
           <col />
           <col className={classes.colName} />
@@ -229,7 +229,7 @@ export const CategoryProductList: React.FC<
             )
           )}
         </TableBody>
-      </Table>
+      </ResponsiveTable>
     </div>
   );
 };
diff --git a/src/collections/components/CollectionList/CollectionList.tsx b/src/collections/components/CollectionList/CollectionList.tsx
index e54764f5d..46953f107 100644
--- a/src/collections/components/CollectionList/CollectionList.tsx
+++ b/src/collections/components/CollectionList/CollectionList.tsx
@@ -1,5 +1,4 @@
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableFooter from "@material-ui/core/TableFooter";
@@ -8,6 +7,7 @@ import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
 import Checkbox from "@saleor/components/Checkbox";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import StatusLabel from "@saleor/components/StatusLabel";
 import TableHead from "@saleor/components/TableHead";
@@ -68,7 +68,7 @@ const CollectionList: React.FC<CollectionListProps> = props => {
   const intl = useIntl();
 
   return (
-    <Table>
+    <ResponsiveTable>
       <TableHead
         colSpan={numberOfColumns}
         selected={selected}
@@ -174,7 +174,7 @@ const CollectionList: React.FC<CollectionListProps> = props => {
           )
         )}
       </TableBody>
-    </Table>
+    </ResponsiveTable>
   );
 };
 
diff --git a/src/collections/components/CollectionProducts/CollectionProducts.tsx b/src/collections/components/CollectionProducts/CollectionProducts.tsx
index 871ba72b6..6d007651b 100644
--- a/src/collections/components/CollectionProducts/CollectionProducts.tsx
+++ b/src/collections/components/CollectionProducts/CollectionProducts.tsx
@@ -2,7 +2,6 @@ import Button from "@material-ui/core/Button";
 import Card from "@material-ui/core/Card";
 import IconButton from "@material-ui/core/IconButton";
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableFooter from "@material-ui/core/TableFooter";
@@ -13,6 +12,7 @@ import { FormattedMessage, useIntl } from "react-intl";
 
 import CardTitle from "@saleor/components/CardTitle";
 import Checkbox from "@saleor/components/Checkbox";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import StatusLabel from "@saleor/components/StatusLabel";
 import TableCellAvatar, {
@@ -114,7 +114,7 @@ const CollectionProducts: React.FC<CollectionProductsProps> = props => {
           </Button>
         }
       />
-      <Table className={classes.table}>
+      <ResponsiveTable className={classes.table}>
         <TableHead
           colSpan={numberOfColumns}
           selected={selected}
@@ -232,7 +232,7 @@ const CollectionProducts: React.FC<CollectionProductsProps> = props => {
             )
           )}
         </TableBody>
-      </Table>
+      </ResponsiveTable>
     </Card>
   );
 };
diff --git a/src/components/AppHeader/AppHeader.tsx b/src/components/AppHeader/AppHeader.tsx
index 07f2e815e..f7e941fba 100644
--- a/src/components/AppHeader/AppHeader.tsx
+++ b/src/components/AppHeader/AppHeader.tsx
@@ -30,7 +30,10 @@ const useStyles = makeStyles(theme => ({
     cursor: "pointer",
     display: "flex",
     marginTop: theme.spacing(0.5),
-    transition: theme.transitions.duration.standard + "ms"
+    transition: theme.transitions.duration.standard + "ms",
+    [theme.breakpoints.down("sm")]: {
+      display: "none"
+    }
   },
   skeleton: {
     marginBottom: theme.spacing(2),
@@ -40,9 +43,13 @@ const useStyles = makeStyles(theme => ({
     color: "inherit",
     flex: 1,
     marginLeft: theme.spacing(),
-    textTransform: "uppercase"
+    textTransform: "uppercase",
+    [theme.breakpoints.down("sm")]: {
+      display: "none"
+    }
   }
 }));
+
 const AppHeader: React.FC<AppHeaderProps> = props => {
   const { children, onBack } = props;
 
diff --git a/src/components/AppLayout/AppLayout.tsx b/src/components/AppLayout/AppLayout.tsx
index 0362dc578..32517e68e 100644
--- a/src/components/AppLayout/AppLayout.tsx
+++ b/src/components/AppLayout/AppLayout.tsx
@@ -64,6 +64,12 @@ const useStyles = makeStyles(
       marginLeft: theme.spacing(2),
       transition: theme.transitions.duration.standard + "ms"
     },
+    avatar: {
+      "&&": {
+        height: 32,
+        width: 32
+      }
+    },
     content: {
       [theme.breakpoints.down("sm")]: {
         paddingLeft: 0
@@ -79,9 +85,16 @@ const useStyles = makeStyles(
       paddingLeft: drawerWidth
     },
     darkThemeSwitch: {
+      [theme.breakpoints.down("sm")]: {
+        marginRight: -theme.spacing(1.5)
+      },
       marginRight: theme.spacing(2)
     },
     header: {
+      [theme.breakpoints.down("sm")]: {
+        height: 88,
+        marginBottom: 0
+      },
       display: "flex",
       height: 40,
       marginBottom: theme.spacing(3)
@@ -179,6 +192,9 @@ const useStyles = makeStyles(
       [theme.breakpoints.up("md")]: {
         display: "none"
       },
+      [theme.breakpoints.down("sm")]: {
+        left: 0
+      },
       background: theme.palette.background.paper,
       borderRadius: "50%",
       cursor: "pointer",
@@ -239,12 +255,20 @@ const useStyles = makeStyles(
       flex: 1
     },
     userBar: {
+      [theme.breakpoints.down("sm")]: {
+        alignItems: "flex-end",
+        flexDirection: "column-reverse",
+        overflow: "hidden"
+      },
       alignItems: "center",
       display: "flex"
     },
     userChip: {
       backgroundColor: theme.palette.background.paper,
-      color: theme.palette.text.primary
+      borderRadius: 24,
+      color: theme.palette.text.primary,
+      height: 40,
+      padding: theme.spacing(0.5)
     },
     userMenuContainer: {
       position: "relative"
@@ -415,6 +439,9 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
                               <Avatar alt="user" src={user.avatar.url} />
                             )
                           }
+                          classes={{
+                            avatar: classes.avatar
+                          }}
                           className={classes.userChip}
                           label={
                             <>
@@ -433,7 +460,6 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
                           open={isMenuOpened}
                           anchorEl={anchor.current}
                           transition
-                          disablePortal
                           placement="bottom-end"
                         >
                           {({ TransitionProps, placement }) => (
diff --git a/src/components/AppLayout/MenuList.tsx b/src/components/AppLayout/MenuList.tsx
index 410ac2301..4e29d600b 100644
--- a/src/components/AppLayout/MenuList.tsx
+++ b/src/components/AppLayout/MenuList.tsx
@@ -101,7 +101,7 @@ const useStyles = makeStyles(theme => ({
       content: "''",
       height: 0,
       position: "absolute",
-      right: -35,
+      right: -30,
       top: 15,
       width: 0
     },
diff --git a/src/components/AppLayout/MenuNested.tsx b/src/components/AppLayout/MenuNested.tsx
index 4b486f21d..978882807 100644
--- a/src/components/AppLayout/MenuNested.tsx
+++ b/src/components/AppLayout/MenuNested.tsx
@@ -8,7 +8,7 @@ import SVG from "react-inlinesvg";
 import menuArrowIcon from "@assets/images/menu-arrow-icon.svg";
 import useTheme from "@saleor/hooks/useTheme";
 import { createHref } from "@saleor/misc";
-import { drawerWidthExpanded } from "./consts";
+import { drawerNestedMenuWidth, drawerWidthExpandedMobile } from "./consts";
 import { IActiveSubMenu } from "./MenuList";
 import { IMenuItem } from "./menuStructure";
 
@@ -20,15 +20,15 @@ const useStyles = makeStyles(theme => ({
     right: 0,
     top: 0,
     transition: `right  ${theme.transitions.duration.shorter}ms ease`,
-    width: 300,
+    width: drawerNestedMenuWidth,
     zIndex: -1
   },
   menuListNestedClose: {
     "& svg": {
       fill: theme.palette.primary.main,
-      left: 7,
+      left: 11,
       position: "relative",
-      top: -2
+      top: 1
     },
     border: `solid 1px #EAEAEA`,
     borderRadius: "100%",
@@ -71,10 +71,11 @@ const useStyles = makeStyles(theme => ({
   menuListNestedOpen: {
     [theme.breakpoints.down("sm")]: {
       right: 0,
-      width: drawerWidthExpanded,
+      width: drawerWidthExpandedMobile,
       zIndex: 2
     },
-    right: -300,
+    right: -drawerNestedMenuWidth,
+    width: drawerNestedMenuWidth,
     zIndex: -1
   },
   subHeader: {
diff --git a/src/components/AppLayout/ResponsiveDrawer.tsx b/src/components/AppLayout/ResponsiveDrawer.tsx
index 6925a5076..86f1dbb83 100644
--- a/src/components/AppLayout/ResponsiveDrawer.tsx
+++ b/src/components/AppLayout/ResponsiveDrawer.tsx
@@ -2,7 +2,11 @@ import Drawer from "@material-ui/core/Drawer";
 import Hidden from "@material-ui/core/Hidden";
 import { makeStyles } from "@material-ui/core/styles";
 import React from "react";
-import { drawerWidth, drawerWidthExpanded } from "./consts";
+import {
+  drawerWidth,
+  drawerWidthExpanded,
+  drawerWidthExpandedMobile
+} from "./consts";
 
 const useStyles = makeStyles(
   theme => ({
@@ -22,7 +26,7 @@ const useStyles = makeStyles(
       width: drawerWidth
     },
     drawerMobile: {
-      width: drawerWidthExpanded
+      width: drawerWidthExpandedMobile
     }
   }),
   { name: "ResponsiveDrawer" }
diff --git a/src/components/AppLayout/consts.ts b/src/components/AppLayout/consts.ts
index 342ad7b55..b5184b016 100644
--- a/src/components/AppLayout/consts.ts
+++ b/src/components/AppLayout/consts.ts
@@ -1,4 +1,6 @@
 export const drawerWidthExpanded = 210;
+export const drawerWidthExpandedMobile = 250;
 export const drawerWidth = 80;
+export const drawerNestedMenuWidth = 300;
 export const navigationBarHeight = 64;
 export const appLoaderHeight = 4;
diff --git a/src/components/AssignCategoryDialog/AssignCategoryDialog.tsx b/src/components/AssignCategoryDialog/AssignCategoryDialog.tsx
index d58a01ba8..cecd2b136 100644
--- a/src/components/AssignCategoryDialog/AssignCategoryDialog.tsx
+++ b/src/components/AssignCategoryDialog/AssignCategoryDialog.tsx
@@ -5,7 +5,6 @@ import DialogActions from "@material-ui/core/DialogActions";
 import DialogContent from "@material-ui/core/DialogContent";
 import DialogTitle from "@material-ui/core/DialogTitle";
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableRow from "@material-ui/core/TableRow";
@@ -17,6 +16,7 @@ import ConfirmButton, {
   ConfirmButtonTransitionState
 } from "@saleor/components/ConfirmButton";
 import FormSpacer from "@saleor/components/FormSpacer";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import useSearchQuery from "@saleor/hooks/useSearchQuery";
 import { buttonMessages } from "@saleor/intl";
 import { SearchCategories_search_edges_node } from "../../containers/SearchCategories/types/SearchCategories";
@@ -123,7 +123,7 @@ const AssignCategoriesDialog: React.FC<AssignCategoriesDialogProps> = props => {
           }}
         />
         <FormSpacer />
-        <Table>
+        <ResponsiveTable>
           <TableBody>
             {categories &&
               categories.map(category => {
@@ -156,7 +156,7 @@ const AssignCategoriesDialog: React.FC<AssignCategoriesDialogProps> = props => {
                 );
               })}
           </TableBody>
-        </Table>
+        </ResponsiveTable>
       </DialogContent>
       <DialogActions>
         <Button onClick={onClose}>
diff --git a/src/components/AssignCollectionDialog/AssignCollectionDialog.tsx b/src/components/AssignCollectionDialog/AssignCollectionDialog.tsx
index 24ff87786..97da47a3e 100644
--- a/src/components/AssignCollectionDialog/AssignCollectionDialog.tsx
+++ b/src/components/AssignCollectionDialog/AssignCollectionDialog.tsx
@@ -5,7 +5,6 @@ import DialogActions from "@material-ui/core/DialogActions";
 import DialogContent from "@material-ui/core/DialogContent";
 import DialogTitle from "@material-ui/core/DialogTitle";
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableRow from "@material-ui/core/TableRow";
@@ -13,6 +12,7 @@ import TextField from "@material-ui/core/TextField";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import useSearchQuery from "@saleor/hooks/useSearchQuery";
 import { buttonMessages } from "@saleor/intl";
 import { SearchCollections_search_edges_node } from "../../containers/SearchCollections/types/SearchCollections";
@@ -123,7 +123,7 @@ const AssignCollectionDialog: React.FC<AssignCollectionDialogProps> = props => {
           }}
         />
         <FormSpacer />
-        <Table>
+        <ResponsiveTable>
           <TableBody>
             {collections &&
               collections.map(collection => {
@@ -156,7 +156,7 @@ const AssignCollectionDialog: React.FC<AssignCollectionDialogProps> = props => {
                 );
               })}
           </TableBody>
-        </Table>
+        </ResponsiveTable>
       </DialogContent>
       <DialogActions>
         <Button onClick={onClose}>
diff --git a/src/components/AssignProductDialog/AssignProductDialog.tsx b/src/components/AssignProductDialog/AssignProductDialog.tsx
index 9714965c0..4fcfeb626 100644
--- a/src/components/AssignProductDialog/AssignProductDialog.tsx
+++ b/src/components/AssignProductDialog/AssignProductDialog.tsx
@@ -5,7 +5,6 @@ import DialogActions from "@material-ui/core/DialogActions";
 import DialogContent from "@material-ui/core/DialogContent";
 import DialogTitle from "@material-ui/core/DialogTitle";
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableRow from "@material-ui/core/TableRow";
@@ -17,6 +16,7 @@ import ConfirmButton, {
   ConfirmButtonTransitionState
 } from "@saleor/components/ConfirmButton";
 import FormSpacer from "@saleor/components/FormSpacer";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import TableCellAvatar from "@saleor/components/TableCellAvatar";
 import useSearchQuery from "@saleor/hooks/useSearchQuery";
 import { buttonMessages } from "@saleor/intl";
@@ -131,7 +131,7 @@ const AssignProductDialog: React.FC<AssignProductDialogProps> = props => {
         />
         <FormSpacer />
         <div className={classes.scrollArea}>
-          <Table>
+          <ResponsiveTable>
             <TableBody>
               {products &&
                 products.map(product => {
@@ -168,7 +168,7 @@ const AssignProductDialog: React.FC<AssignProductDialogProps> = props => {
                   );
                 })}
             </TableBody>
-          </Table>
+          </ResponsiveTable>
         </div>
       </DialogContent>
       <DialogActions>
diff --git a/src/components/ColumnPicker/ColumnPicker.tsx b/src/components/ColumnPicker/ColumnPicker.tsx
index aa1f55275..f2a1c9434 100644
--- a/src/components/ColumnPicker/ColumnPicker.tsx
+++ b/src/components/ColumnPicker/ColumnPicker.tsx
@@ -28,8 +28,8 @@ const useStyles = makeStyles(
   theme => ({
     popper: {
       boxShadow: `0px 5px 10px 0 ${fade(theme.palette.common.black, 0.05)}`,
-      marginTop: theme.spacing(2),
-      zIndex: 1
+      marginTop: theme.spacing(1),
+      zIndex: 2
     }
   }),
   {
diff --git a/src/components/ColumnPicker/ColumnPickerContent.tsx b/src/components/ColumnPicker/ColumnPickerContent.tsx
index 8580d4391..7ea3e865f 100644
--- a/src/components/ColumnPicker/ColumnPickerContent.tsx
+++ b/src/components/ColumnPicker/ColumnPickerContent.tsx
@@ -43,6 +43,9 @@ const useStyles = makeStyles(theme => ({
     marginRight: theme.spacing(2)
   },
   content: {
+    [theme.breakpoints.down("sm")]: {
+      gridTemplateColumns: "repeat(2, 1fr)"
+    },
     display: "grid",
     gridColumnGap: theme.spacing(3),
     gridTemplateColumns: "repeat(3, 1fr)",
@@ -66,6 +69,9 @@ const useStyles = makeStyles(theme => ({
   },
   root: {
     boxShadow: "0px 4px 4px rgba(0, 0, 0, 0.25)"
+  },
+  titleContainer: {
+    padding: theme.spacing(1.5, 3.5)
   }
 }));
 
@@ -94,7 +100,7 @@ const ColumnPickerContent: React.FC<ColumnPickerContentProps> = props => {
 
   return (
     <Card className={classes.root}>
-      <CardContent>
+      <CardContent className={classes.titleContainer}>
         <Typography color="textSecondary">
           <FormattedMessage
             defaultMessage="{numberOfSelected} columns selected out of {numberOfTotal}"
diff --git a/src/components/Container.tsx b/src/components/Container.tsx
index c2e48752a..3f4e5533b 100644
--- a/src/components/Container.tsx
+++ b/src/components/Container.tsx
@@ -2,19 +2,24 @@ import { makeStyles } from "@material-ui/core/styles";
 import classNames from "classnames";
 import React from "react";
 
-const useStyles = makeStyles(theme => ({
-  root: {
-    [theme.breakpoints.up("lg")]: {
-      marginLeft: "auto",
-      marginRight: "auto",
-      maxWidth: theme.breakpoints.width("lg")
-    },
-    [theme.breakpoints.up("sm")]: {
-      padding: theme.spacing(0, 3)
-    },
-    padding: theme.spacing(0, 1)
+const useStyles = makeStyles(
+  theme => ({
+    root: {
+      [theme.breakpoints.up("lg")]: {
+        marginLeft: "auto",
+        marginRight: "auto",
+        maxWidth: theme.breakpoints.width("lg")
+      },
+      [theme.breakpoints.up("sm")]: {
+        padding: theme.spacing(0, 3)
+      },
+      padding: theme.spacing(0, 1)
+    }
+  }),
+  {
+    name: "Container"
   }
-}));
+);
 
 interface ContainerProps {
   className?: string;
diff --git a/src/components/CountryList/CountryList.tsx b/src/components/CountryList/CountryList.tsx
index 7924c0d3f..61550e5f9 100644
--- a/src/components/CountryList/CountryList.tsx
+++ b/src/components/CountryList/CountryList.tsx
@@ -3,7 +3,6 @@ import Card from "@material-ui/core/Card";
 import CardContent from "@material-ui/core/CardContent";
 import IconButton from "@material-ui/core/IconButton";
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableRow from "@material-ui/core/TableRow";
@@ -14,6 +13,7 @@ import React from "react";
 import { FormattedMessage } from "react-intl";
 
 import CardTitle from "@saleor/components/CardTitle";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import { maybe, renderCollection } from "../../misc";
 import { CountryFragment } from "../../taxes/types/CountryFragment";
@@ -100,7 +100,7 @@ const CountryList: React.FC<CountryListProps> = props => {
         }
       />
       <CardContent className={classes.root}>
-        <Table>
+        <ResponsiveTable>
           <TableBody>
             <TableRow className={classes.pointer} onClick={toggleCollapse}>
               <TableCell
@@ -173,7 +173,7 @@ const CountryList: React.FC<CountryListProps> = props => {
                 )
               )}
           </TableBody>
-        </Table>
+        </ResponsiveTable>
       </CardContent>
     </Card>
   );
diff --git a/src/components/ExtendedPageHeader/ExtendedPageHeader.tsx b/src/components/ExtendedPageHeader/ExtendedPageHeader.tsx
index 70d1c6a1a..8d6815b59 100644
--- a/src/components/ExtendedPageHeader/ExtendedPageHeader.tsx
+++ b/src/components/ExtendedPageHeader/ExtendedPageHeader.tsx
@@ -2,48 +2,68 @@ import { makeStyles } from "@material-ui/core/styles";
 import classNames from "classnames";
 import React from "react";
 
-const useStyles = makeStyles(theme => ({
-  action: {
-    flex: "0 0 auto"
-  },
-  grid: {
-    padding: theme.spacing(2)
-  },
-  menuButton: {
-    flex: "0 0 auto",
-    marginLeft: -theme.spacing(2),
-    marginRight: theme.spacing(3),
-    marginTop: -theme.spacing(2)
-  },
-  root: {
-    alignItems: "center",
-    display: "flex",
-    marginBottom: theme.spacing(3)
-  },
-  subtitle: {
-    alignItems: "center",
-    display: "flex",
-    marginBottom: theme.spacing(2)
-  },
-  title: {
-    flex: 1,
-    paddingBottom: theme.spacing(2)
+const useStyles = makeStyles(
+  theme => ({
+    action: {
+      flex: "0 0 auto",
+      [theme.breakpoints.down("sm")]: {
+        marginTop: theme.spacing()
+      }
+    },
+    block: {
+      [theme.breakpoints.down("sm")]: {
+        "&&": {
+          display: "block"
+        }
+      }
+    },
+    grid: {
+      padding: theme.spacing(2)
+    },
+    menuButton: {
+      flex: "0 0 auto",
+      marginLeft: -theme.spacing(2),
+      marginRight: theme.spacing(3),
+      marginTop: -theme.spacing(2)
+    },
+    root: {
+      alignItems: "center",
+      display: "flex",
+      marginBottom: theme.spacing(3)
+    },
+    subtitle: {
+      alignItems: "center",
+      display: "flex",
+      marginBottom: theme.spacing(2)
+    },
+    title: {
+      flex: 1,
+      paddingBottom: theme.spacing(2)
+    }
+  }),
+  {
+    name: "ExtendedPageHeader"
   }
-}));
+);
 
 interface ExtendedPageHeaderProps {
   children?: React.ReactNode;
   className?: string;
+  inline?: boolean;
   title?: React.ReactNode;
 }
 
 const ExtendedPageHeader: React.FC<ExtendedPageHeaderProps> = props => {
-  const { children, className, title } = props;
+  const { children, className, inline, title } = props;
 
   const classes = useStyles(props);
 
   return (
-    <div className={classNames(classes.root, className)}>
+    <div
+      className={classNames(classes.root, className, {
+        [classes.block]: !inline
+      })}
+    >
       {title}
       <div className={classes.action}>{children}</div>
     </div>
diff --git a/src/components/PageHeader/PageHeader.tsx b/src/components/PageHeader/PageHeader.tsx
index a78c57737..d1457663b 100644
--- a/src/components/PageHeader/PageHeader.tsx
+++ b/src/components/PageHeader/PageHeader.tsx
@@ -10,26 +10,33 @@ const useStyles = makeStyles(theme => ({
     display: "flex"
   },
   title: {
+    [theme.breakpoints.down("sm")]: {
+      fontSize: 20,
+      marginTop: theme.spacing(2),
+      padding: 0
+    },
+    alignSelf: "flex-start",
     flex: 1,
-    fontSize: 24,
-    paddingBottom: theme.spacing(2)
+    fontSize: 24
   }
 }));
 
 interface PageHeaderProps {
   children?: React.ReactNode;
   className?: string;
+  inline?: boolean;
   title?: string;
 }
 
 const PageHeader: React.FC<PageHeaderProps> = props => {
-  const { children, className, title } = props;
+  const { children, className, inline, title } = props;
 
   const classes = useStyles(props);
 
   return (
     <ExtendedPageHeader
       className={className}
+      inline={inline}
       title={
         <Typography className={classes.title} variant="h5">
           {title !== undefined ? title : <Skeleton style={{ width: "10em" }} />}
diff --git a/src/components/ResponsiveTable/ResponsiveTable.tsx b/src/components/ResponsiveTable/ResponsiveTable.tsx
new file mode 100644
index 000000000..23cd083a9
--- /dev/null
+++ b/src/components/ResponsiveTable/ResponsiveTable.tsx
@@ -0,0 +1,44 @@
+import makeStyles from "@material-ui/core/styles/makeStyles";
+import Table from "@material-ui/core/Table";
+import React from "react";
+
+const useStyles = makeStyles(
+  theme => ({
+    root: {
+      [theme.breakpoints.up("sm")]: {
+        "& table": {
+          tableLayout: "fixed"
+        }
+      },
+      "& table": {
+        tableLayout: "auto"
+      },
+      overflowX: "auto",
+      width: "100%"
+    }
+  }),
+  {
+    name: "ResponsiveTable"
+  }
+);
+
+interface ResponsiveTableProps {
+  children: React.ReactNode | React.ReactNodeArray;
+  className?: string;
+  key?: string;
+}
+
+const ResponsiveTable: React.FC<ResponsiveTableProps> = props => {
+  const { children, className } = props;
+
+  const classes = useStyles(props);
+
+  return (
+    <div className={classes.root}>
+      <Table className={className}>{children}</Table>
+    </div>
+  );
+};
+
+ResponsiveTable.displayName = "ResponsiveTable";
+export default ResponsiveTable;
diff --git a/src/components/ResponsiveTable/index.ts b/src/components/ResponsiveTable/index.ts
new file mode 100644
index 000000000..907f1c053
--- /dev/null
+++ b/src/components/ResponsiveTable/index.ts
@@ -0,0 +1,2 @@
+export { default } from "./ResponsiveTable";
+export * from "./ResponsiveTable";
diff --git a/src/components/TableCellHeader/TableCellHeader.stories.tsx b/src/components/TableCellHeader/TableCellHeader.stories.tsx
index f2d609822..25d2e24c6 100644
--- a/src/components/TableCellHeader/TableCellHeader.stories.tsx
+++ b/src/components/TableCellHeader/TableCellHeader.stories.tsx
@@ -1,5 +1,4 @@
 import Card from "@material-ui/core/Card";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableHead from "@material-ui/core/TableHead";
@@ -7,6 +6,7 @@ import TableRow from "@material-ui/core/TableRow";
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Decorator from "../../storybook/Decorator";
 import TableCellHeader, {
   TableCellHeaderArrowDirection
@@ -25,7 +25,7 @@ const Story: React.FC<StoryProps> = ({
   onHeaderClick = () => undefined
 }) => (
   <Card style={{ margin: "auto", width: 400 }}>
-    <Table>
+    <ResponsiveTable>
       <TableHead>
         <TableRow>
           <TableCellHeader
@@ -49,7 +49,7 @@ const Story: React.FC<StoryProps> = ({
           <TableCell>Juice</TableCell>
         </TableRow>
       </TableBody>
-    </Table>
+    </ResponsiveTable>
   </Card>
 );
 const InteractiveStory: React.FC = () => {
diff --git a/src/components/Theme/ThemeProvider.tsx b/src/components/Theme/ThemeProvider.tsx
index 169a663b6..591358b2b 100644
--- a/src/components/Theme/ThemeProvider.tsx
+++ b/src/components/Theme/ThemeProvider.tsx
@@ -1,5 +1,6 @@
 import { MuiThemeProvider } from "@material-ui/core/styles";
 import React from "react";
+import Helmet from "react-helmet";
 
 import Baseline from "../../Baseline";
 import createTheme from "../../theme";
@@ -27,6 +28,8 @@ const ThemeProvider: React.FC<ThemeProviderProps> = ({
     localStorage.setItem("theme", (!isDark).toString());
   };
 
+  const theme = createTheme(isDark ? dark : light);
+
   return (
     <ThemeContext.Provider
       value={{
@@ -34,7 +37,10 @@ const ThemeProvider: React.FC<ThemeProviderProps> = ({
         toggleTheme
       }}
     >
-      <MuiThemeProvider theme={createTheme(isDark ? dark : light)}>
+      <Helmet>
+        <meta name="theme-color" content={theme.palette.background.default} />
+      </Helmet>
+      <MuiThemeProvider theme={theme}>
         <Baseline />
         {children}
       </MuiThemeProvider>
diff --git a/src/configuration/ConfigurationPage.tsx b/src/configuration/ConfigurationPage.tsx
index ce6976363..4e2e0a1e5 100644
--- a/src/configuration/ConfigurationPage.tsx
+++ b/src/configuration/ConfigurationPage.tsx
@@ -61,6 +61,9 @@ const useStyles = makeStyles(theme => ({
     paddingTop: theme.spacing(3)
   },
   configurationItem: {
+    [theme.breakpoints.down("md")]: {
+      gridTemplateColumns: "1fr"
+    },
     display: "grid",
     gridColumnGap: theme.spacing(4),
     gridTemplateColumns: "1fr 1fr"
diff --git a/src/customers/components/CustomerList/CustomerList.tsx b/src/customers/components/CustomerList/CustomerList.tsx
index 6452f48b1..c2de1fa67 100644
--- a/src/customers/components/CustomerList/CustomerList.tsx
+++ b/src/customers/components/CustomerList/CustomerList.tsx
@@ -1,5 +1,4 @@
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableFooter from "@material-ui/core/TableFooter";
@@ -8,6 +7,7 @@ import React from "react";
 import { FormattedMessage } from "react-intl";
 
 import Checkbox from "@saleor/components/Checkbox";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import TableHead from "@saleor/components/TableHead";
 import TablePagination from "@saleor/components/TablePagination";
@@ -61,7 +61,7 @@ const CustomerList: React.FC<CustomerListProps> = props => {
   const classes = useStyles(props);
 
   return (
-    <Table>
+    <ResponsiveTable>
       <TableHead
         colSpan={numberOfColumns}
         selected={selected}
@@ -141,7 +141,7 @@ const CustomerList: React.FC<CustomerListProps> = props => {
           )
         )}
       </TableBody>
-    </Table>
+    </ResponsiveTable>
   );
 };
 CustomerList.displayName = "CustomerList";
diff --git a/src/customers/components/CustomerOrders/CustomerOrders.tsx b/src/customers/components/CustomerOrders/CustomerOrders.tsx
index 254d17e88..f12fe185d 100644
--- a/src/customers/components/CustomerOrders/CustomerOrders.tsx
+++ b/src/customers/components/CustomerOrders/CustomerOrders.tsx
@@ -1,7 +1,6 @@
 import Button from "@material-ui/core/Button";
 import Card from "@material-ui/core/Card";
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableHead from "@material-ui/core/TableHead";
@@ -12,6 +11,7 @@ import { FormattedMessage, useIntl } from "react-intl";
 import CardTitle from "@saleor/components/CardTitle";
 import { DateTime } from "@saleor/components/Date";
 import Money from "@saleor/components/Money";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import StatusLabel from "@saleor/components/StatusLabel";
 import { maybe, renderCollection, transformPaymentStatus } from "../../../misc";
@@ -60,7 +60,7 @@ const CustomerOrders: React.FC<CustomerOrdersProps> = props => {
           </Button>
         }
       />
-      <Table>
+      <ResponsiveTable>
         <TableHead>
           <TableRow>
             <TableCell>
@@ -143,7 +143,7 @@ const CustomerOrders: React.FC<CustomerOrdersProps> = props => {
             )
           )}
         </TableBody>
-      </Table>
+      </ResponsiveTable>
     </Card>
   );
 };
diff --git a/src/discounts/components/DiscountCategories/DiscountCategories.tsx b/src/discounts/components/DiscountCategories/DiscountCategories.tsx
index c7e60843a..fb1263b77 100644
--- a/src/discounts/components/DiscountCategories/DiscountCategories.tsx
+++ b/src/discounts/components/DiscountCategories/DiscountCategories.tsx
@@ -2,7 +2,6 @@ import Button from "@material-ui/core/Button";
 import Card from "@material-ui/core/Card";
 import IconButton from "@material-ui/core/IconButton";
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableFooter from "@material-ui/core/TableFooter";
@@ -13,6 +12,7 @@ import { FormattedMessage, useIntl } from "react-intl";
 
 import CardTitle from "@saleor/components/CardTitle";
 import Checkbox from "@saleor/components/Checkbox";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import TableHead from "@saleor/components/TableHead";
 import TablePagination from "@saleor/components/TablePagination";
@@ -84,7 +84,7 @@ const DiscountCategories: React.FC<DiscountCategoriesProps> = props => {
           </Button>
         }
       />
-      <Table>
+      <ResponsiveTable>
         <TableHead
           colSpan={numberOfColumns}
           selected={selected}
@@ -173,7 +173,7 @@ const DiscountCategories: React.FC<DiscountCategoriesProps> = props => {
             )
           )}
         </TableBody>
-      </Table>
+      </ResponsiveTable>
     </Card>
   );
 };
diff --git a/src/discounts/components/DiscountCollections/DiscountCollections.tsx b/src/discounts/components/DiscountCollections/DiscountCollections.tsx
index b903b2cee..0d196c4b2 100644
--- a/src/discounts/components/DiscountCollections/DiscountCollections.tsx
+++ b/src/discounts/components/DiscountCollections/DiscountCollections.tsx
@@ -2,7 +2,6 @@ import Button from "@material-ui/core/Button";
 import Card from "@material-ui/core/Card";
 import IconButton from "@material-ui/core/IconButton";
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableFooter from "@material-ui/core/TableFooter";
@@ -13,6 +12,7 @@ import { FormattedMessage, useIntl } from "react-intl";
 
 import CardTitle from "@saleor/components/CardTitle";
 import Checkbox from "@saleor/components/Checkbox";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import TableHead from "@saleor/components/TableHead";
 import TablePagination from "@saleor/components/TablePagination";
@@ -84,7 +84,7 @@ const DiscountCollections: React.FC<DiscountCollectionsProps> = props => {
           </Button>
         }
       />
-      <Table>
+      <ResponsiveTable>
         <TableHead
           colSpan={numberOfColumns}
           selected={selected}
@@ -173,7 +173,7 @@ const DiscountCollections: React.FC<DiscountCollectionsProps> = props => {
             )
           )}
         </TableBody>
-      </Table>
+      </ResponsiveTable>
     </Card>
   );
 };
diff --git a/src/discounts/components/DiscountCountrySelectDialog/DiscountCountrySelectDialog.tsx b/src/discounts/components/DiscountCountrySelectDialog/DiscountCountrySelectDialog.tsx
index 5a865c866..160345883 100644
--- a/src/discounts/components/DiscountCountrySelectDialog/DiscountCountrySelectDialog.tsx
+++ b/src/discounts/components/DiscountCountrySelectDialog/DiscountCountrySelectDialog.tsx
@@ -4,7 +4,6 @@ import DialogActions from "@material-ui/core/DialogActions";
 import DialogContent from "@material-ui/core/DialogContent";
 import DialogTitle from "@material-ui/core/DialogTitle";
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableRow from "@material-ui/core/TableRow";
@@ -21,6 +20,7 @@ import ConfirmButton, {
 import Form from "@saleor/components/Form";
 import FormSpacer from "@saleor/components/FormSpacer";
 import Hr from "@saleor/components/Hr";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 // tslint:disable no-submodule-imports
 import { ShopInfo_shop_countries } from "@saleor/components/Shop/types/ShopInfo";
 import { buttonMessages } from "@saleor/intl";
@@ -122,7 +122,7 @@ const DiscountCountrySelectDialog: React.FC<
                     description="country selection"
                   />
                 </Typography>
-                <Table>
+                <ResponsiveTable>
                   <TableBody>
                     {filter(countries, data.query, {
                       key: "country"
@@ -164,7 +164,7 @@ const DiscountCountrySelectDialog: React.FC<
                       );
                     })}
                   </TableBody>
-                </Table>
+                </ResponsiveTable>
               </DialogContent>
               <DialogActions>
                 <Button onClick={onClose}>
diff --git a/src/discounts/components/DiscountProducts/DiscountProducts.tsx b/src/discounts/components/DiscountProducts/DiscountProducts.tsx
index a2436d017..ccdbc3841 100644
--- a/src/discounts/components/DiscountProducts/DiscountProducts.tsx
+++ b/src/discounts/components/DiscountProducts/DiscountProducts.tsx
@@ -2,7 +2,6 @@ import Button from "@material-ui/core/Button";
 import Card from "@material-ui/core/Card";
 import IconButton from "@material-ui/core/IconButton";
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableFooter from "@material-ui/core/TableFooter";
@@ -13,6 +12,7 @@ import { FormattedMessage, useIntl } from "react-intl";
 
 import CardTitle from "@saleor/components/CardTitle";
 import Checkbox from "@saleor/components/Checkbox";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import StatusLabel from "@saleor/components/StatusLabel";
 import TableCellAvatar, {
@@ -98,7 +98,7 @@ const DiscountProducts: React.FC<SaleProductsProps> = props => {
           </Button>
         }
       />
-      <Table>
+      <ResponsiveTable>
         <TableHead
           colSpan={numberOfColumns}
           selected={selected}
@@ -212,7 +212,7 @@ const DiscountProducts: React.FC<SaleProductsProps> = props => {
             )
           )}
         </TableBody>
-      </Table>
+      </ResponsiveTable>
     </Card>
   );
 };
diff --git a/src/discounts/components/SaleList/SaleList.tsx b/src/discounts/components/SaleList/SaleList.tsx
index 5cdcedae1..c3a31884e 100644
--- a/src/discounts/components/SaleList/SaleList.tsx
+++ b/src/discounts/components/SaleList/SaleList.tsx
@@ -1,5 +1,4 @@
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableFooter from "@material-ui/core/TableFooter";
@@ -11,6 +10,7 @@ import Checkbox from "@saleor/components/Checkbox";
 import Date from "@saleor/components/Date";
 import Money from "@saleor/components/Money";
 import Percent from "@saleor/components/Percent";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import TableHead from "@saleor/components/TableHead";
 import TablePagination from "@saleor/components/TablePagination";
@@ -77,7 +77,7 @@ const SaleList: React.FC<SaleListProps> = props => {
   const classes = useStyles(props);
 
   return (
-    <Table>
+    <ResponsiveTable>
       <TableHead
         colSpan={numberOfColumns}
         selected={selected}
@@ -189,7 +189,7 @@ const SaleList: React.FC<SaleListProps> = props => {
           )
         )}
       </TableBody>
-    </Table>
+    </ResponsiveTable>
   );
 };
 SaleList.displayName = "SaleList";
diff --git a/src/discounts/components/VoucherList/VoucherList.tsx b/src/discounts/components/VoucherList/VoucherList.tsx
index 9ed3c1974..45afba2d3 100644
--- a/src/discounts/components/VoucherList/VoucherList.tsx
+++ b/src/discounts/components/VoucherList/VoucherList.tsx
@@ -1,5 +1,4 @@
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableFooter from "@material-ui/core/TableFooter";
@@ -11,6 +10,7 @@ import Checkbox from "@saleor/components/Checkbox";
 import Date from "@saleor/components/Date";
 import Money from "@saleor/components/Money";
 import Percent from "@saleor/components/Percent";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import TableHead from "@saleor/components/TableHead";
 import TablePagination from "@saleor/components/TablePagination";
@@ -92,7 +92,7 @@ const VoucherList: React.FC<VoucherListProps> = props => {
   const classes = useStyles(props);
 
   return (
-    <Table>
+    <ResponsiveTable>
       <TableHead
         colSpan={numberOfColumns}
         selected={selected}
@@ -240,7 +240,7 @@ const VoucherList: React.FC<VoucherListProps> = props => {
           )
         )}
       </TableBody>
-    </Table>
+    </ResponsiveTable>
   );
 };
 VoucherList.displayName = "VoucherList";
diff --git a/src/home/components/HomeNotificationTable/HomeNotificationTable.tsx b/src/home/components/HomeNotificationTable/HomeNotificationTable.tsx
index f7c311d69..a7318cb5b 100644
--- a/src/home/components/HomeNotificationTable/HomeNotificationTable.tsx
+++ b/src/home/components/HomeNotificationTable/HomeNotificationTable.tsx
@@ -1,6 +1,5 @@
 import Card from "@material-ui/core/Card";
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableRow from "@material-ui/core/TableRow";
@@ -10,6 +9,7 @@ import React from "react";
 import { FormattedMessage } from "react-intl";
 
 import RequirePermissions from "@saleor/components/RequirePermissions";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import { UserPermissionProps } from "@saleor/types";
 import { PermissionEnum } from "@saleor/types/globalTypes";
@@ -47,7 +47,7 @@ const HomeNotificationTable: React.FC<HomeNotificationTableProps> = props => {
 
   return (
     <Card>
-      <Table>
+      <ResponsiveTable>
         <TableBody className={classes.tableRow}>
           <RequirePermissions
             userPermissions={userPermissions}
@@ -150,7 +150,7 @@ const HomeNotificationTable: React.FC<HomeNotificationTableProps> = props => {
             </TableRow>
           </RequirePermissions>
         </TableBody>
-      </Table>
+      </ResponsiveTable>
     </Card>
   );
 };
diff --git a/src/home/components/HomeProductListCard/HomeProductListCard.tsx b/src/home/components/HomeProductListCard/HomeProductListCard.tsx
index 215ad30d4..2854c922d 100644
--- a/src/home/components/HomeProductListCard/HomeProductListCard.tsx
+++ b/src/home/components/HomeProductListCard/HomeProductListCard.tsx
@@ -1,6 +1,5 @@
 import Card from "@material-ui/core/Card";
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableRow from "@material-ui/core/TableRow";
@@ -11,6 +10,7 @@ import { FormattedMessage, useIntl } from "react-intl";
 
 import CardTitle from "@saleor/components/CardTitle";
 import Money from "@saleor/components/Money";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import TableCellAvatar from "@saleor/components/TableCellAvatar";
 import { maybe, renderCollection } from "../../../misc";
@@ -58,7 +58,7 @@ export const HomeProductList: React.FC<HomeProductListProps> = props => {
           id: "homeProductsListCardHeader"
         })}
       />
-      <Table>
+      <ResponsiveTable>
         <TableBody>
           {renderCollection(
             topProducts,
@@ -139,7 +139,7 @@ export const HomeProductList: React.FC<HomeProductListProps> = props => {
             )
           )}
         </TableBody>
-      </Table>
+      </ResponsiveTable>
     </Card>
   );
 };
diff --git a/src/navigation/components/MenuList/MenuList.tsx b/src/navigation/components/MenuList/MenuList.tsx
index 191b0a19f..e5bb1343c 100644
--- a/src/navigation/components/MenuList/MenuList.tsx
+++ b/src/navigation/components/MenuList/MenuList.tsx
@@ -1,6 +1,5 @@
 import Card from "@material-ui/core/Card";
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableFooter from "@material-ui/core/TableFooter";
@@ -11,6 +10,7 @@ import { FormattedMessage } from "react-intl";
 
 import Checkbox from "@saleor/components/Checkbox";
 import IconButtonTableCell from "@saleor/components/IconButtonTableCell";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import TableHead from "@saleor/components/TableHead";
 import TablePagination from "@saleor/components/TablePagination";
@@ -65,7 +65,7 @@ const MenuList: React.FC<MenuListProps> = props => {
 
   return (
     <Card>
-      <Table>
+      <ResponsiveTable>
         <TableHead
           colSpan={numberOfColumns}
           selected={selected}
@@ -156,7 +156,7 @@ const MenuList: React.FC<MenuListProps> = props => {
             )
           )}
         </TableBody>
-      </Table>
+      </ResponsiveTable>
     </Card>
   );
 };
diff --git a/src/orders/components/OrderDetailsPage/OrderDetailsPage.tsx b/src/orders/components/OrderDetailsPage/OrderDetailsPage.tsx
index e26c1b47a..886d46d9c 100644
--- a/src/orders/components/OrderDetailsPage/OrderDetailsPage.tsx
+++ b/src/orders/components/OrderDetailsPage/OrderDetailsPage.tsx
@@ -23,15 +23,21 @@ import OrderHistory, { FormData as HistoryFormData } from "../OrderHistory";
 import OrderPayment from "../OrderPayment/OrderPayment";
 import OrderUnfulfilledItems from "../OrderUnfulfilledItems/OrderUnfulfilledItems";
 
-const useStyles = makeStyles(theme => ({
-  date: {
-    marginBottom: theme.spacing(3),
-    marginTop: -theme.spacing(2)
-  },
-  header: {
-    marginBottom: 0
+const useStyles = makeStyles(
+  theme => ({
+    date: {
+      marginBottom: theme.spacing(3),
+      marginTop: -theme.spacing(2)
+    },
+    header: {
+      display: "flex",
+      marginBottom: 0
+    }
+  }),
+  {
+    name: "OrderDetailsPage"
   }
-}));
+);
 
 export interface OrderDetailsPageProps extends UserPermissionProps {
   order: OrderDetails_order;
@@ -95,6 +101,7 @@ const OrderDetailsPage: React.FC<OrderDetailsPageProps> = props => {
       </AppHeader>
       <PageHeader
         className={classes.header}
+        inline
         title={maybe(() => order.number) ? "#" + order.number : undefined}
       >
         {canCancel && (
diff --git a/src/orders/components/OrderDraftDetailsProducts/OrderDraftDetailsProducts.tsx b/src/orders/components/OrderDraftDetailsProducts/OrderDraftDetailsProducts.tsx
index 6b4d2d18d..cde3c7bf9 100644
--- a/src/orders/components/OrderDraftDetailsProducts/OrderDraftDetailsProducts.tsx
+++ b/src/orders/components/OrderDraftDetailsProducts/OrderDraftDetailsProducts.tsx
@@ -1,6 +1,5 @@
 import IconButton from "@material-ui/core/IconButton";
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableHead from "@material-ui/core/TableHead";
@@ -14,6 +13,7 @@ import { FormattedMessage } from "react-intl";
 import { DebounceForm } from "@saleor/components/DebounceForm";
 import Form from "@saleor/components/Form";
 import Money from "@saleor/components/Money";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import TableCellAvatar, {
   AVATAR_MARGIN
@@ -76,7 +76,7 @@ const OrderDraftDetailsProducts: React.FC<
   const classes = useStyles(props);
 
   return (
-    <Table className={classes.table}>
+    <ResponsiveTable className={classes.table}>
       {maybe(() => !!lines.length) && (
         <TableHead>
           <TableRow>
@@ -187,7 +187,7 @@ const OrderDraftDetailsProducts: React.FC<
           ))
         )}
       </TableBody>
-    </Table>
+    </ResponsiveTable>
   );
 };
 OrderDraftDetailsProducts.displayName = "OrderDraftDetailsProducts";
diff --git a/src/orders/components/OrderDraftList/OrderDraftList.tsx b/src/orders/components/OrderDraftList/OrderDraftList.tsx
index 41cbe6751..6e7cb3add 100644
--- a/src/orders/components/OrderDraftList/OrderDraftList.tsx
+++ b/src/orders/components/OrderDraftList/OrderDraftList.tsx
@@ -1,5 +1,4 @@
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableFooter from "@material-ui/core/TableFooter";
@@ -10,6 +9,7 @@ import { FormattedMessage, useIntl } from "react-intl";
 import Checkbox from "@saleor/components/Checkbox";
 import { DateTime } from "@saleor/components/Date";
 import Money from "@saleor/components/Money";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import TableHead from "@saleor/components/TableHead";
 import TablePagination from "@saleor/components/TablePagination";
@@ -83,7 +83,7 @@ export const OrderDraftList: React.FC<OrderDraftListProps> = props => {
     : undefined;
 
   return (
-    <Table>
+    <ResponsiveTable>
       <TableHead
         colSpan={numberOfColumns}
         selected={selected}
@@ -194,7 +194,7 @@ export const OrderDraftList: React.FC<OrderDraftListProps> = props => {
           )
         )}
       </TableBody>
-    </Table>
+    </ResponsiveTable>
   );
 };
 OrderDraftList.displayName = "OrderDraftList";
diff --git a/src/orders/components/OrderDraftPage/OrderDraftPage.tsx b/src/orders/components/OrderDraftPage/OrderDraftPage.tsx
index 77cf46f3a..dbe3ea00c 100644
--- a/src/orders/components/OrderDraftPage/OrderDraftPage.tsx
+++ b/src/orders/components/OrderDraftPage/OrderDraftPage.tsx
@@ -25,10 +25,10 @@ import OrderHistory, { FormData as HistoryFormData } from "../OrderHistory";
 
 const useStyles = makeStyles(theme => ({
   date: {
-    marginBottom: theme.spacing(3),
-    marginLeft: theme.spacing(7)
+    marginBottom: theme.spacing(3)
   },
   header: {
+    display: "flex",
     marginBottom: 0
   }
 }));
@@ -99,6 +99,7 @@ const OrderDraftPage: React.FC<OrderDraftPageProps> = props => {
       </AppHeader>
       <PageHeader
         className={classes.header}
+        inline
         title={maybe(() => order.number) ? "#" + order.number : undefined}
       >
         <CardMenu
diff --git a/src/orders/components/OrderFulfillment/OrderFulfillment.tsx b/src/orders/components/OrderFulfillment/OrderFulfillment.tsx
index a3be33a78..c3399ee1f 100644
--- a/src/orders/components/OrderFulfillment/OrderFulfillment.tsx
+++ b/src/orders/components/OrderFulfillment/OrderFulfillment.tsx
@@ -2,7 +2,6 @@ import Button from "@material-ui/core/Button";
 import Card from "@material-ui/core/Card";
 import CardActions from "@material-ui/core/CardActions";
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableHead from "@material-ui/core/TableHead";
@@ -14,6 +13,7 @@ import { FormattedMessage, useIntl } from "react-intl";
 import CardMenu from "@saleor/components/CardMenu";
 import CardTitle from "@saleor/components/CardTitle";
 import Money from "@saleor/components/Money";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import StatusLabel from "@saleor/components/StatusLabel";
 import TableCellAvatar, {
@@ -142,7 +142,7 @@ const OrderFulfillment: React.FC<OrderFulfillmentProps> = props => {
           )
         }
       />
-      <Table className={classes.table}>
+      <ResponsiveTable className={classes.table}>
         <TableHead>
           <TableRow>
             <TableCell className={classes.colName}>
@@ -226,7 +226,7 @@ const OrderFulfillment: React.FC<OrderFulfillmentProps> = props => {
             </TableRow>
           )}
         </TableBody>
-      </Table>
+      </ResponsiveTable>
       {status === FulfillmentStatus.FULFILLED && !fulfillment.trackingNumber && (
         <CardActions>
           <Button color="primary" onClick={onTrackingCodeAdd}>
diff --git a/src/orders/components/OrderFulfillmentDialog/OrderFulfillmentDialog.tsx b/src/orders/components/OrderFulfillmentDialog/OrderFulfillmentDialog.tsx
index e08f923e6..31b6f1f41 100644
--- a/src/orders/components/OrderFulfillmentDialog/OrderFulfillmentDialog.tsx
+++ b/src/orders/components/OrderFulfillmentDialog/OrderFulfillmentDialog.tsx
@@ -4,7 +4,6 @@ import DialogActions from "@material-ui/core/DialogActions";
 import DialogContent from "@material-ui/core/DialogContent";
 import DialogTitle from "@material-ui/core/DialogTitle";
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableHead from "@material-ui/core/TableHead";
@@ -18,6 +17,7 @@ import ConfirmButton, {
 } from "@saleor/components/ConfirmButton";
 import Form from "@saleor/components/Form";
 import { FormSpacer } from "@saleor/components/FormSpacer";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import TableCellAvatar, {
   AVATAR_MARGIN
 } from "@saleor/components/TableCellAvatar";
@@ -111,7 +111,7 @@ const OrderFulfillmentDialog: React.FC<OrderFulfillmentDialogProps> = props => {
                   description="dialog header"
                 />
               </DialogTitle>
-              <Table className={classes.table}>
+              <ResponsiveTable className={classes.table}>
                 <TableHead>
                   <TableRow>
                     <TableCell className={classes.colName}>
@@ -174,7 +174,7 @@ const OrderFulfillmentDialog: React.FC<OrderFulfillmentDialogProps> = props => {
                     );
                   })}
                 </TableBody>
-              </Table>
+              </ResponsiveTable>
               <DialogContent>
                 <FormSpacer />
                 <TextField
diff --git a/src/orders/components/OrderList/OrderList.tsx b/src/orders/components/OrderList/OrderList.tsx
index 52babdc26..a77fd55eb 100644
--- a/src/orders/components/OrderList/OrderList.tsx
+++ b/src/orders/components/OrderList/OrderList.tsx
@@ -1,5 +1,4 @@
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableFooter from "@material-ui/core/TableFooter";
@@ -10,6 +9,7 @@ import { FormattedMessage, useIntl } from "react-intl";
 import Checkbox from "@saleor/components/Checkbox";
 import { DateTime } from "@saleor/components/Date";
 import Money from "@saleor/components/Money";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import StatusLabel from "@saleor/components/StatusLabel";
 import TableHead from "@saleor/components/TableHead";
@@ -87,7 +87,7 @@ export const OrderList: React.FC<OrderListProps> = props => {
       }))
     : undefined;
   return (
-    <Table>
+    <ResponsiveTable>
       <TableHead
         colSpan={numberOfColumns}
         selected={selected}
@@ -232,7 +232,7 @@ export const OrderList: React.FC<OrderListProps> = props => {
           )
         )}
       </TableBody>
-    </Table>
+    </ResponsiveTable>
   );
 };
 OrderList.displayName = "OrderList";
diff --git a/src/orders/components/OrderProductAddDialog/OrderProductAddDialog.tsx b/src/orders/components/OrderProductAddDialog/OrderProductAddDialog.tsx
index e1d5b55da..2cb61b667 100644
--- a/src/orders/components/OrderProductAddDialog/OrderProductAddDialog.tsx
+++ b/src/orders/components/OrderProductAddDialog/OrderProductAddDialog.tsx
@@ -5,7 +5,6 @@ import DialogActions from "@material-ui/core/DialogActions";
 import DialogContent from "@material-ui/core/DialogContent";
 import DialogTitle from "@material-ui/core/DialogTitle";
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableRow from "@material-ui/core/TableRow";
@@ -19,6 +18,7 @@ import ConfirmButton, {
   ConfirmButtonTransitionState
 } from "@saleor/components/ConfirmButton";
 import Money from "@saleor/components/Money";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import TableCellAvatar from "@saleor/components/TableCellAvatar";
 import useSearchQuery from "@saleor/hooks/useSearchQuery";
 import { buttonMessages } from "@saleor/intl";
@@ -227,7 +227,7 @@ const OrderProductAddDialog: React.FC<OrderProductAddDialogProps> = props => {
           }
           threshold={10}
         >
-          <Table key="table">
+          <ResponsiveTable key="table">
             <TableBody>
               {renderCollection(
                 products,
@@ -316,7 +316,7 @@ const OrderProductAddDialog: React.FC<OrderProductAddDialogProps> = props => {
                 )
               )}
             </TableBody>
-          </Table>
+          </ResponsiveTable>
         </InfiniteScroll>
       </DialogContent>
       <DialogActions>
diff --git a/src/orders/components/OrderUnfulfilledItems/OrderUnfulfilledItems.tsx b/src/orders/components/OrderUnfulfilledItems/OrderUnfulfilledItems.tsx
index 7dac6d301..340e61073 100644
--- a/src/orders/components/OrderUnfulfilledItems/OrderUnfulfilledItems.tsx
+++ b/src/orders/components/OrderUnfulfilledItems/OrderUnfulfilledItems.tsx
@@ -2,7 +2,6 @@ import Button from "@material-ui/core/Button";
 import Card from "@material-ui/core/Card";
 import CardActions from "@material-ui/core/CardActions";
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableHead from "@material-ui/core/TableHead";
@@ -12,6 +11,7 @@ import { FormattedMessage, useIntl } from "react-intl";
 
 import CardTitle from "@saleor/components/CardTitle";
 import Money from "@saleor/components/Money";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import StatusLabel from "@saleor/components/StatusLabel";
 import TableCellAvatar, {
@@ -83,7 +83,7 @@ const OrderUnfulfilledItems: React.FC<OrderUnfulfilledItemsProps> = props => {
           />
         }
       />
-      <Table className={classes.table}>
+      <ResponsiveTable className={classes.table}>
         <TableHead>
           <TableRow>
             <TableCell className={classes.colName}>
@@ -160,7 +160,7 @@ const OrderUnfulfilledItems: React.FC<OrderUnfulfilledItemsProps> = props => {
             </TableRow>
           ))}
         </TableBody>
-      </Table>
+      </ResponsiveTable>
       {canFulfill && (
         <CardActions>
           <Button variant="text" color="primary" onClick={onFulfill}>
diff --git a/src/pages/components/PageList/PageList.tsx b/src/pages/components/PageList/PageList.tsx
index 006d96326..f2087a7e9 100644
--- a/src/pages/components/PageList/PageList.tsx
+++ b/src/pages/components/PageList/PageList.tsx
@@ -1,6 +1,5 @@
 import Card from "@material-ui/core/Card";
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableFooter from "@material-ui/core/TableFooter";
@@ -9,6 +8,7 @@ import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
 import Checkbox from "@saleor/components/Checkbox";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import StatusLabel from "@saleor/components/StatusLabel";
 import TableHead from "@saleor/components/TableHead";
@@ -65,7 +65,7 @@ const PageList: React.FC<PageListProps> = props => {
 
   return (
     <Card>
-      <Table>
+      <ResponsiveTable>
         <TableHead
           colSpan={numberOfColumns}
           selected={selected}
@@ -169,7 +169,7 @@ const PageList: React.FC<PageListProps> = props => {
             )
           )}
         </TableBody>
-      </Table>
+      </ResponsiveTable>
     </Card>
   );
 };
diff --git a/src/plugins/components/PluginsList/PluginsList.tsx b/src/plugins/components/PluginsList/PluginsList.tsx
index b8e694d06..35699875c 100644
--- a/src/plugins/components/PluginsList/PluginsList.tsx
+++ b/src/plugins/components/PluginsList/PluginsList.tsx
@@ -1,6 +1,5 @@
 import Card from "@material-ui/core/Card";
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableFooter from "@material-ui/core/TableFooter";
@@ -10,6 +9,7 @@ import EditIcon from "@material-ui/icons/Edit";
 import React from "react";
 import { useIntl } from "react-intl";
 
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import StatusLabel from "@saleor/components/StatusLabel";
 import TablePagination from "@saleor/components/TablePagination";
@@ -59,7 +59,7 @@ const PluginList: React.FC<PluginListProps> = props => {
   const intl = useIntl();
   return (
     <Card>
-      <Table>
+      <ResponsiveTable>
         <TableHead>
           <TableCell className={classes.colName}>
             {intl.formatMessage({
@@ -139,7 +139,7 @@ const PluginList: React.FC<PluginListProps> = props => {
             )
           )}
         </TableBody>
-      </Table>
+      </ResponsiveTable>
     </Card>
   );
 };
diff --git a/src/productTypes/components/AssignAttributeDialog/AssignAttributeDialog.tsx b/src/productTypes/components/AssignAttributeDialog/AssignAttributeDialog.tsx
index addcf195a..afc397718 100644
--- a/src/productTypes/components/AssignAttributeDialog/AssignAttributeDialog.tsx
+++ b/src/productTypes/components/AssignAttributeDialog/AssignAttributeDialog.tsx
@@ -6,7 +6,6 @@ import DialogContent from "@material-ui/core/DialogContent";
 import DialogContentText from "@material-ui/core/DialogContentText";
 import DialogTitle from "@material-ui/core/DialogTitle";
 import makeStyles from "@material-ui/core/styles/makeStyles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableRow from "@material-ui/core/TableRow";
@@ -21,6 +20,7 @@ import Checkbox from "@saleor/components/Checkbox";
 import ConfirmButton, {
   ConfirmButtonTransitionState
 } from "@saleor/components/ConfirmButton";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import useElementScroll, {
   isScrolledToBottom
 } from "@saleor/hooks/useElementScroll";
@@ -136,7 +136,7 @@ const AssignAttributeDialog: React.FC<AssignAttributeDialogProps> = ({
           threshold={100}
           key="infinite-scroll"
         >
-          <Table key="table">
+          <ResponsiveTable key="table">
             <TableBody>
               {renderCollection(
                 attributes,
@@ -178,7 +178,7 @@ const AssignAttributeDialog: React.FC<AssignAttributeDialogProps> = ({
                   )
               )}
             </TableBody>
-          </Table>
+          </ResponsiveTable>
         </InfiniteScroll>
       </DialogContent>
       {errors.length > 0 && (
diff --git a/src/productTypes/components/ProductTypeAttributes/ProductTypeAttributes.tsx b/src/productTypes/components/ProductTypeAttributes/ProductTypeAttributes.tsx
index 70ec32531..4355a1047 100644
--- a/src/productTypes/components/ProductTypeAttributes/ProductTypeAttributes.tsx
+++ b/src/productTypes/components/ProductTypeAttributes/ProductTypeAttributes.tsx
@@ -2,7 +2,6 @@ import Button from "@material-ui/core/Button";
 import Card from "@material-ui/core/Card";
 import IconButton from "@material-ui/core/IconButton";
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
 import TableCell from "@material-ui/core/TableCell";
 import TableRow from "@material-ui/core/TableRow";
 import DeleteIcon from "@material-ui/icons/Delete";
@@ -11,6 +10,7 @@ import { FormattedMessage, useIntl } from "react-intl";
 
 import CardTitle from "@saleor/components/CardTitle";
 import Checkbox from "@saleor/components/Checkbox";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import {
   SortableTableBody,
@@ -111,7 +111,7 @@ const ProductTypeAttributes: React.FC<ProductTypeAttributesProps> = props => {
           </Button>
         }
       />
-      <Table>
+      <ResponsiveTable>
         <TableHead
           colSpan={numberOfColumns}
           disabled={disabled}
@@ -196,7 +196,7 @@ const ProductTypeAttributes: React.FC<ProductTypeAttributesProps> = props => {
             )
           )}
         </SortableTableBody>
-      </Table>
+      </ResponsiveTable>
     </Card>
   );
 };
diff --git a/src/productTypes/components/ProductTypeList/ProductTypeList.tsx b/src/productTypes/components/ProductTypeList/ProductTypeList.tsx
index eb45189aa..17eb98f4d 100644
--- a/src/productTypes/components/ProductTypeList/ProductTypeList.tsx
+++ b/src/productTypes/components/ProductTypeList/ProductTypeList.tsx
@@ -1,5 +1,4 @@
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableFooter from "@material-ui/core/TableFooter";
@@ -9,6 +8,7 @@ import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
 import Checkbox from "@saleor/components/Checkbox";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import TableHead from "@saleor/components/TableHead";
 import TablePagination from "@saleor/components/TablePagination";
@@ -61,7 +61,7 @@ const ProductTypeList: React.FC<ProductTypeListProps> = props => {
   const intl = useIntl();
 
   return (
-    <Table>
+    <ResponsiveTable>
       <TableHead
         colSpan={numberOfColumns}
         selected={selected}
@@ -185,7 +185,7 @@ const ProductTypeList: React.FC<ProductTypeListProps> = props => {
           )
         )}
       </TableBody>
-    </Table>
+    </ResponsiveTable>
   );
 };
 ProductTypeList.displayName = "ProductTypeList";
diff --git a/src/products/components/ProductList/ProductList.tsx b/src/products/components/ProductList/ProductList.tsx
index 2040e6235..14210ce09 100644
--- a/src/products/components/ProductList/ProductList.tsx
+++ b/src/products/components/ProductList/ProductList.tsx
@@ -1,5 +1,4 @@
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableFooter from "@material-ui/core/TableFooter";
@@ -10,6 +9,7 @@ import { FormattedMessage, useIntl } from "react-intl";
 
 import Checkbox from "@saleor/components/Checkbox";
 import Money from "@saleor/components/Money";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import StatusLabel from "@saleor/components/StatusLabel";
 import TableCellAvatar, {
@@ -131,7 +131,7 @@ export const ProductList: React.FC<ProductListProps> = props => {
 
   return (
     <div className={classes.tableContainer}>
-      <Table className={classes.table}>
+      <ResponsiveTable className={classes.table}>
         <colgroup>
           <col />
           <col className={classes.colName} />
@@ -392,7 +392,7 @@ export const ProductList: React.FC<ProductListProps> = props => {
             )
           )}
         </TableBody>
-      </Table>
+      </ResponsiveTable>
     </div>
   );
 };
diff --git a/src/products/components/ProductVariantNavigation/ProductVariantNavigation.tsx b/src/products/components/ProductVariantNavigation/ProductVariantNavigation.tsx
index 8e3dc7661..4e1e7ae6a 100644
--- a/src/products/components/ProductVariantNavigation/ProductVariantNavigation.tsx
+++ b/src/products/components/ProductVariantNavigation/ProductVariantNavigation.tsx
@@ -1,7 +1,6 @@
 import Button from "@material-ui/core/Button";
 import Card from "@material-ui/core/Card";
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableRow from "@material-ui/core/TableRow";
@@ -10,6 +9,7 @@ import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
 import CardTitle from "@saleor/components/CardTitle";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import TableCellAvatar from "@saleor/components/TableCellAvatar";
 import { maybe, renderCollection } from "../../../misc";
@@ -64,7 +64,7 @@ const ProductVariantNavigation: React.FC<
           description: "section header"
         })}
       />
-      <Table>
+      <ResponsiveTable>
         <TableBody>
           {renderCollection(variants, variant => (
             <TableRow
@@ -110,7 +110,7 @@ const ProductVariantNavigation: React.FC<
             </TableRow>
           )}
         </TableBody>
-      </Table>
+      </ResponsiveTable>
     </Card>
   );
 };
diff --git a/src/products/components/ProductVariants/ProductVariants.tsx b/src/products/components/ProductVariants/ProductVariants.tsx
index 3e81ee4f2..6e46489a9 100644
--- a/src/products/components/ProductVariants/ProductVariants.tsx
+++ b/src/products/components/ProductVariants/ProductVariants.tsx
@@ -3,7 +3,6 @@ import Card from "@material-ui/core/Card";
 import CardContent from "@material-ui/core/CardContent";
 import Hidden from "@material-ui/core/Hidden";
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableRow from "@material-ui/core/TableRow";
@@ -14,6 +13,7 @@ import { FormattedMessage, useIntl } from "react-intl";
 import CardTitle from "@saleor/components/CardTitle";
 import Checkbox from "@saleor/components/Checkbox";
 import Money from "@saleor/components/Money";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import StatusLabel from "@saleor/components/StatusLabel";
 import TableHead from "@saleor/components/TableHead";
@@ -133,7 +133,7 @@ export const ProductVariants: React.FC<ProductVariantsProps> = props => {
         </CardContent>
       )}
       {hasVariants && (
-        <Table className={classes.denseTable}>
+        <ResponsiveTable className={classes.denseTable}>
           <TableHead
             colSpan={numberOfColumns}
             selected={selected}
@@ -237,7 +237,7 @@ export const ProductVariants: React.FC<ProductVariantsProps> = props => {
               );
             })}
           </TableBody>
-        </Table>
+        </ResponsiveTable>
       )}
     </Card>
   );
diff --git a/src/services/components/ServiceList/ServiceList.tsx b/src/services/components/ServiceList/ServiceList.tsx
index 576b87f22..0a68c2216 100644
--- a/src/services/components/ServiceList/ServiceList.tsx
+++ b/src/services/components/ServiceList/ServiceList.tsx
@@ -1,6 +1,5 @@
 import IconButton from "@material-ui/core/IconButton";
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableFooter from "@material-ui/core/TableFooter";
@@ -12,6 +11,7 @@ import EditIcon from "@material-ui/icons/Edit";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import TablePagination from "@saleor/components/TablePagination";
 import { maybe, renderCollection, stopPropagation } from "@saleor/misc";
@@ -68,7 +68,7 @@ const ServiceList: React.FC<ServiceListProps> = props => {
   const classes = useStyles(props);
 
   return (
-    <Table className={classes.table}>
+    <ResponsiveTable className={classes.table}>
       <TableHead>
         <TableRow>
           <TableCell className={classes.colName}>
@@ -154,7 +154,7 @@ const ServiceList: React.FC<ServiceListProps> = props => {
           )
         )}
       </TableBody>
-    </Table>
+    </ResponsiveTable>
   );
 };
 ServiceList.displayName = "ServiceList";
diff --git a/src/services/components/ServiceTokens/ServiceTokens.tsx b/src/services/components/ServiceTokens/ServiceTokens.tsx
index fee1fb703..7568847ea 100644
--- a/src/services/components/ServiceTokens/ServiceTokens.tsx
+++ b/src/services/components/ServiceTokens/ServiceTokens.tsx
@@ -2,7 +2,6 @@ import Button from "@material-ui/core/Button";
 import Card from "@material-ui/core/Card";
 import IconButton from "@material-ui/core/IconButton";
 import makeStyles from "@material-ui/core/styles/makeStyles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableHead from "@material-ui/core/TableHead";
@@ -12,6 +11,7 @@ import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
 import CardTitle from "@saleor/components/CardTitle";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import { maybe, renderCollection } from "@saleor/misc";
 import { ServiceDetailsFragment_tokens } from "@saleor/services/types/ServiceDetailsFragment";
@@ -64,7 +64,7 @@ const ServiceTokens: React.FC<ServiceTokensProps> = props => {
           </Button>
         }
       />
-      <Table>
+      <ResponsiveTable>
         <TableHead>
           <TableRow>
             <TableCell className={classes.colNote}>
@@ -117,7 +117,7 @@ const ServiceTokens: React.FC<ServiceTokensProps> = props => {
             )
           )}
         </TableBody>
-      </Table>
+      </ResponsiveTable>
     </Card>
   );
 };
diff --git a/src/shipping/components/ShippingZoneCountriesAssignDialog/ShippingZoneCountriesAssignDialog.tsx b/src/shipping/components/ShippingZoneCountriesAssignDialog/ShippingZoneCountriesAssignDialog.tsx
index 0503a31f0..9895bf892 100644
--- a/src/shipping/components/ShippingZoneCountriesAssignDialog/ShippingZoneCountriesAssignDialog.tsx
+++ b/src/shipping/components/ShippingZoneCountriesAssignDialog/ShippingZoneCountriesAssignDialog.tsx
@@ -4,7 +4,6 @@ import DialogActions from "@material-ui/core/DialogActions";
 import DialogContent from "@material-ui/core/DialogContent";
 import DialogTitle from "@material-ui/core/DialogTitle";
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableRow from "@material-ui/core/TableRow";
@@ -21,6 +20,7 @@ import ConfirmButton, {
 import Form from "@saleor/components/Form";
 import FormSpacer from "@saleor/components/FormSpacer";
 import Hr from "@saleor/components/Hr";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import { ShopInfo_shop_countries } from "@saleor/components/Shop/types/ShopInfo";
 import { buttonMessages } from "@saleor/intl";
 
@@ -122,7 +122,7 @@ const ShippingZoneCountriesAssignDialog: React.FC<
                 <Typography className={classes.heading} variant="subtitle1">
                   <FormattedMessage defaultMessage="Quick Pick" />
                 </Typography>
-                <Table className={classes.table}>
+                <ResponsiveTable className={classes.table}>
                   <TableBody>
                     <TableRow>
                       <TableCell className={classes.wideCell}>
@@ -149,7 +149,7 @@ const ShippingZoneCountriesAssignDialog: React.FC<
                       </TableCell>
                     </TableRow>
                   </TableBody>
-                </Table>
+                </ResponsiveTable>
               </DialogContent>
 
               <DialogContent className={classes.container}>
@@ -159,7 +159,7 @@ const ShippingZoneCountriesAssignDialog: React.FC<
                     description="country selection"
                   />
                 </Typography>
-                <Table className={classes.table}>
+                <ResponsiveTable className={classes.table}>
                   <TableBody>
                     {filter(countries, data.query, {
                       key: "country"
@@ -201,7 +201,7 @@ const ShippingZoneCountriesAssignDialog: React.FC<
                       );
                     })}
                   </TableBody>
-                </Table>
+                </ResponsiveTable>
               </DialogContent>
               <DialogActions>
                 <Button onClick={onClose}>
diff --git a/src/shipping/components/ShippingZoneRates/ShippingZoneRates.tsx b/src/shipping/components/ShippingZoneRates/ShippingZoneRates.tsx
index 6645be304..64c5ddcd0 100644
--- a/src/shipping/components/ShippingZoneRates/ShippingZoneRates.tsx
+++ b/src/shipping/components/ShippingZoneRates/ShippingZoneRates.tsx
@@ -1,7 +1,6 @@
 import Button from "@material-ui/core/Button";
 import Card from "@material-ui/core/Card";
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableHead from "@material-ui/core/TableHead";
@@ -15,6 +14,7 @@ import CardTitle from "@saleor/components/CardTitle";
 import IconButtonTableCell from "@saleor/components/IconButtonTableCell";
 import Money from "@saleor/components/Money";
 import MoneyRange from "@saleor/components/MoneyRange";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import WeightRange from "@saleor/components/WeightRange";
 import { maybe, renderCollection } from "../../../misc";
@@ -82,7 +82,7 @@ const ShippingZoneRates: React.FC<ShippingZoneRatesProps> = props => {
           </Button>
         }
       />
-      <Table>
+      <ResponsiveTable>
         <TableHead>
           <TableRow>
             <TableCell className={classes.nameColumn}>
@@ -172,7 +172,7 @@ const ShippingZoneRates: React.FC<ShippingZoneRatesProps> = props => {
             )
           )}
         </TableBody>
-      </Table>
+      </ResponsiveTable>
     </Card>
   );
 };
diff --git a/src/shipping/components/ShippingZonesList/ShippingZonesList.tsx b/src/shipping/components/ShippingZonesList/ShippingZonesList.tsx
index aa7f12cd2..15c0ac7c2 100644
--- a/src/shipping/components/ShippingZonesList/ShippingZonesList.tsx
+++ b/src/shipping/components/ShippingZonesList/ShippingZonesList.tsx
@@ -2,7 +2,6 @@ import Button from "@material-ui/core/Button";
 import Card from "@material-ui/core/Card";
 import IconButton from "@material-ui/core/IconButton";
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableFooter from "@material-ui/core/TableFooter";
@@ -13,6 +12,7 @@ import { FormattedMessage, useIntl } from "react-intl";
 
 import CardTitle from "@saleor/components/CardTitle";
 import Checkbox from "@saleor/components/Checkbox";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import TableHead from "@saleor/components/TableHead";
 import TablePagination from "@saleor/components/TablePagination";
@@ -88,7 +88,7 @@ const ShippingZonesList: React.FC<ShippingZonesListProps> = props => {
           </Button>
         }
       />
-      <Table>
+      <ResponsiveTable>
         <TableHead
           colSpan={numberOfColumns}
           selected={selected}
@@ -183,7 +183,7 @@ const ShippingZonesList: React.FC<ShippingZonesListProps> = props => {
             )
           )}
         </TableBody>
-      </Table>
+      </ResponsiveTable>
     </Card>
   );
 };
diff --git a/src/siteSettings/components/SiteSettingsKeys/SiteSettingsKeys.tsx b/src/siteSettings/components/SiteSettingsKeys/SiteSettingsKeys.tsx
index 995cf39d3..fa3cb16a4 100644
--- a/src/siteSettings/components/SiteSettingsKeys/SiteSettingsKeys.tsx
+++ b/src/siteSettings/components/SiteSettingsKeys/SiteSettingsKeys.tsx
@@ -2,7 +2,6 @@ import Button from "@material-ui/core/Button";
 import Card from "@material-ui/core/Card";
 import IconButton from "@material-ui/core/IconButton";
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableHead from "@material-ui/core/TableHead";
@@ -12,6 +11,7 @@ import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
 import CardTitle from "@saleor/components/CardTitle";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import { authorizationKeyTypes, maybe, renderCollection } from "../../../misc";
 import { ICONBUTTON_SIZE } from "../../../theme";
@@ -58,7 +58,7 @@ const SiteSettingsKeys: React.FC<SiteSettingsKeysProps> = props => {
           </Button>
         }
       />
-      <Table>
+      <ResponsiveTable>
         <TableHead>
           <TableRow>
             <TableCell>
@@ -109,7 +109,7 @@ const SiteSettingsKeys: React.FC<SiteSettingsKeysProps> = props => {
             )
           )}
         </TableBody>
-      </Table>
+      </ResponsiveTable>
     </Card>
   );
 };
diff --git a/src/staff/components/StaffList/StaffList.tsx b/src/staff/components/StaffList/StaffList.tsx
index 1c65cd16f..ede1d6b7d 100644
--- a/src/staff/components/StaffList/StaffList.tsx
+++ b/src/staff/components/StaffList/StaffList.tsx
@@ -1,5 +1,4 @@
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableFooter from "@material-ui/core/TableFooter";
@@ -10,6 +9,7 @@ import classNames from "classnames";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import TablePagination from "@saleor/components/TablePagination";
 import {
@@ -78,7 +78,7 @@ const StaffList: React.FC<StaffListProps> = props => {
   const intl = useIntl();
 
   return (
-    <Table>
+    <ResponsiveTable>
       <TableHead>
         <TableRow>
           <TableCell className={classes.wideColumn}>
@@ -167,7 +167,7 @@ const StaffList: React.FC<StaffListProps> = props => {
           )
         )}
       </TableBody>
-    </Table>
+    </ResponsiveTable>
   );
 };
 StaffList.displayName = "StaffList";
diff --git a/src/storybook/__snapshots__/Stories.test.ts.snap b/src/storybook/__snapshots__/Stories.test.ts.snap
index 2ee2c975f..21cc3a558 100644
--- a/src/storybook/__snapshots__/Stories.test.ts.snap
+++ b/src/storybook/__snapshots__/Stories.test.ts.snap
@@ -1245,61 +1245,65 @@ exports[`Storyshots Generics / EditableTableCell default 1`] = `
     <div
       class="MuiCardContent-root-id"
     >
-      <table
-        class="MuiTable-root-id"
+      <div
+        class="ResponsiveTable-root-id"
       >
-        <thead
-          class="MuiTableHead-root-id"
+        <table
+          class="MuiTable-root-id"
         >
-          <tr>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id"
-              scope="col"
-            >
-              Some header
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id"
-              scope="col"
-            >
-              Some header
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id"
-              scope="col"
-            >
-              Some header
-            </th>
-          </tr>
-        </thead>
-        <tbody
-          class="MuiTableBody-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id"
+          <thead
+            class="MuiTableHead-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              Some value
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-container-id"
-            >
-              <div
-                class="MuiTypography-root-id makeStyles-text-id MuiTypography-caption-id"
+            <tr>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id"
+                scope="col"
               >
-                Some editable text
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
+                Some header
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id"
+                scope="col"
+              >
+                Some header
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id"
+                scope="col"
+              >
+                Some header
+              </th>
+            </tr>
+          </thead>
+          <tbody
+            class="MuiTableBody-root-id"
+          >
+            <tr
+              class="MuiTableRow-root-id"
             >
-              Some value
-            </td>
-          </tr>
-        </tbody>
-      </table>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id"
+              >
+                Some value
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-container-id"
+              >
+                <div
+                  class="MuiTypography-root-id makeStyles-text-id MuiTypography-caption-id"
+                >
+                  Some editable text
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id"
+              >
+                Some value
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
     </div>
   </div>
 </div>
@@ -3069,7 +3073,7 @@ exports[`Storyshots Generics / PageHeader with title 1`] = `
   style="padding:24px"
 >
   <div
-    class="makeStyles-root-id"
+    class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
   >
     <div
       class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -3077,7 +3081,7 @@ exports[`Storyshots Generics / PageHeader with title 1`] = `
       Lorem ipsum
     </div>
     <div
-      class="makeStyles-action-id"
+      class="ExtendedPageHeader-action-id"
     >
       <div
         class="makeStyles-root-id"
@@ -3092,7 +3096,7 @@ exports[`Storyshots Generics / PageHeader with title icon bar 1`] = `
   style="padding:24px"
 >
   <div
-    class="makeStyles-root-id"
+    class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
   >
     <div
       class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -3100,7 +3104,7 @@ exports[`Storyshots Generics / PageHeader with title icon bar 1`] = `
       Lorem ipsum
     </div>
     <div
-      class="makeStyles-action-id"
+      class="ExtendedPageHeader-action-id"
     >
       <div
         class="makeStyles-root-id"
@@ -3137,7 +3141,7 @@ exports[`Storyshots Generics / PageHeader without title 1`] = `
   style="padding:24px"
 >
   <div
-    class="makeStyles-root-id"
+    class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
   >
     <div
       class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -3150,7 +3154,7 @@ exports[`Storyshots Generics / PageHeader without title 1`] = `
       </span>
     </div>
     <div
-      class="makeStyles-action-id"
+      class="ExtendedPageHeader-action-id"
     >
       <div
         class="makeStyles-root-id"
@@ -5583,83 +5587,87 @@ exports[`Storyshots Generics / Table header ascending 1`] = `
     class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
     style="margin:auto;width:400px"
   >
-    <table
-      class="MuiTable-root-id"
+    <div
+      class="ResponsiveTable-root-id"
     >
-      <thead
-        class="MuiTableHead-root-id"
+      <table
+        class="MuiTable-root-id"
       >
-        <tr
-          class="MuiTableRow-root-id MuiTableRow-head-id"
+        <thead
+          class="MuiTableHead-root-id"
         >
-          <th
-            class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-root-id"
-            scope="col"
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-head-id"
           >
-            <div
-              class="makeStyles-labelContainer-id makeStyles-labelContainerActive-id"
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-root-id"
+              scope="col"
             >
               <div
-                class="makeStyles-label-id"
+                class="makeStyles-labelContainer-id makeStyles-labelContainerActive-id"
               >
-                Name
+                <div
+                  class="makeStyles-label-id"
+                >
+                  Name
+                </div>
+                <svg
+                  aria-hidden="true"
+                  class="MuiSvgIcon-root-id makeStyles-arrow-id makeStyles-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>
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id makeStyles-arrow-id makeStyles-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 makeStyles-root-id"
-            scope="col"
-          >
-            <div
-              class="makeStyles-labelContainer-id"
+            </th>
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-root-id"
+              scope="col"
             >
               <div
-                class="makeStyles-label-id"
+                class="makeStyles-labelContainer-id"
               >
-                Type
+                <div
+                  class="makeStyles-label-id"
+                >
+                  Type
+                </div>
               </div>
-            </div>
-          </th>
-        </tr>
-      </thead>
-      <tbody
-        class="MuiTableBody-root-id"
-      >
-        <tr
-          class="MuiTableRow-root-id"
+            </th>
+          </tr>
+        </thead>
+        <tbody
+          class="MuiTableBody-root-id"
         >
-          <td
-            class="MuiTableCell-root-id MuiTableCell-body-id"
+          <tr
+            class="MuiTableRow-root-id"
           >
-            Apple Juice
-          </td>
-          <td
-            class="MuiTableCell-root-id MuiTableCell-body-id"
-          >
-            Juice
-          </td>
-        </tr>
-      </tbody>
-    </table>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id"
+            >
+              Apple Juice
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id"
+            >
+              Juice
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
   </div>
 </div>
 `;
@@ -5672,83 +5680,87 @@ exports[`Storyshots Generics / Table header descending 1`] = `
     class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
     style="margin:auto;width:400px"
   >
-    <table
-      class="MuiTable-root-id"
+    <div
+      class="ResponsiveTable-root-id"
     >
-      <thead
-        class="MuiTableHead-root-id"
+      <table
+        class="MuiTable-root-id"
       >
-        <tr
-          class="MuiTableRow-root-id MuiTableRow-head-id"
+        <thead
+          class="MuiTableHead-root-id"
         >
-          <th
-            class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-root-id"
-            scope="col"
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-head-id"
           >
-            <div
-              class="makeStyles-labelContainer-id makeStyles-labelContainerActive-id"
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-root-id"
+              scope="col"
             >
               <div
-                class="makeStyles-label-id"
+                class="makeStyles-labelContainer-id makeStyles-labelContainerActive-id"
               >
-                Name
+                <div
+                  class="makeStyles-label-id"
+                >
+                  Name
+                </div>
+                <svg
+                  aria-hidden="true"
+                  class="MuiSvgIcon-root-id makeStyles-arrow-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>
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id makeStyles-arrow-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 makeStyles-root-id"
-            scope="col"
-          >
-            <div
-              class="makeStyles-labelContainer-id"
+            </th>
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-root-id"
+              scope="col"
             >
               <div
-                class="makeStyles-label-id"
+                class="makeStyles-labelContainer-id"
               >
-                Type
+                <div
+                  class="makeStyles-label-id"
+                >
+                  Type
+                </div>
               </div>
-            </div>
-          </th>
-        </tr>
-      </thead>
-      <tbody
-        class="MuiTableBody-root-id"
-      >
-        <tr
-          class="MuiTableRow-root-id"
+            </th>
+          </tr>
+        </thead>
+        <tbody
+          class="MuiTableBody-root-id"
         >
-          <td
-            class="MuiTableCell-root-id MuiTableCell-body-id"
+          <tr
+            class="MuiTableRow-root-id"
           >
-            Apple Juice
-          </td>
-          <td
-            class="MuiTableCell-root-id MuiTableCell-body-id"
-          >
-            Juice
-          </td>
-        </tr>
-      </tbody>
-    </table>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id"
+            >
+              Apple Juice
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id"
+            >
+              Juice
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
   </div>
 </div>
 `;
@@ -5761,83 +5773,87 @@ exports[`Storyshots Generics / Table header interactive 1`] = `
     class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
     style="margin:auto;width:400px"
   >
-    <table
-      class="MuiTable-root-id"
+    <div
+      class="ResponsiveTable-root-id"
     >
-      <thead
-        class="MuiTableHead-root-id"
+      <table
+        class="MuiTable-root-id"
       >
-        <tr
-          class="MuiTableRow-root-id MuiTableRow-head-id"
+        <thead
+          class="MuiTableHead-root-id"
         >
-          <th
-            class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-root-id"
-            scope="col"
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-head-id"
           >
-            <div
-              class="makeStyles-labelContainer-id makeStyles-labelContainerActive-id"
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-root-id"
+              scope="col"
             >
               <div
-                class="makeStyles-label-id"
+                class="makeStyles-labelContainer-id makeStyles-labelContainerActive-id"
               >
-                Name
+                <div
+                  class="makeStyles-label-id"
+                >
+                  Name
+                </div>
+                <svg
+                  aria-hidden="true"
+                  class="MuiSvgIcon-root-id makeStyles-arrow-id makeStyles-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>
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id makeStyles-arrow-id makeStyles-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 makeStyles-root-id"
-            scope="col"
-          >
-            <div
-              class="makeStyles-labelContainer-id"
+            </th>
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-root-id"
+              scope="col"
             >
               <div
-                class="makeStyles-label-id"
+                class="makeStyles-labelContainer-id"
               >
-                Type
+                <div
+                  class="makeStyles-label-id"
+                >
+                  Type
+                </div>
               </div>
-            </div>
-          </th>
-        </tr>
-      </thead>
-      <tbody
-        class="MuiTableBody-root-id"
-      >
-        <tr
-          class="MuiTableRow-root-id"
+            </th>
+          </tr>
+        </thead>
+        <tbody
+          class="MuiTableBody-root-id"
         >
-          <td
-            class="MuiTableCell-root-id MuiTableCell-body-id"
+          <tr
+            class="MuiTableRow-root-id"
           >
-            Apple Juice
-          </td>
-          <td
-            class="MuiTableCell-root-id MuiTableCell-body-id"
-          >
-            Juice
-          </td>
-        </tr>
-      </tbody>
-    </table>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id"
+            >
+              Apple Juice
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id"
+            >
+              Juice
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
   </div>
 </div>
 `;
@@ -5853,82 +5869,86 @@ exports[`Storyshots Generics / TablePagination both previous and next pages are
     <div
       class="MuiCardContent-root-id"
     >
-      <table
-        class="MuiTable-root-id"
+      <div
+        class="ResponsiveTable-root-id"
       >
-        <tbody>
-          <tr>
-            <td
-              class="MuiTableCell-root-id makeStyles-root-id"
-              colspan="1"
-            >
-              <div
-                class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+        <table
+          class="MuiTable-root-id"
+        >
+          <tbody>
+            <tr>
+              <td
+                class="MuiTableCell-root-id makeStyles-root-id"
+                colspan="1"
               >
                 <div
-                  class="makeStyles-spacer-id"
-                />
-                <div
-                  class="makeStyles-root-id"
+                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
                 >
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
-                    data-tc="button-pagination-back"
-                    tabindex="0"
-                    type="button"
+                  <div
+                    class="makeStyles-spacer-id"
+                  />
+                  <div
+                    class="makeStyles-root-id"
                   >
-                    <span
-                      class="MuiIconButton-label-id"
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                      data-tc="button-pagination-back"
+                      tabindex="0"
+                      type="button"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
+                      <span
+                        class="MuiIconButton-label-id"
                       >
-                        <path
-                          d="M14 7l-5 5 5 5V7z"
-                        />
-                        <path
-                          d="M24 0v24H0V0h24z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
-                    data-tc="button-pagination-next"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M14 7l-5 5 5 5V7z"
+                          />
+                          <path
+                            d="M24 0v24H0V0h24z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                      data-tc="button-pagination-next"
+                      tabindex="0"
+                      type="button"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
+                      <span
+                        class="MuiIconButton-label-id"
                       >
-                        <path
-                          d="M10 17l5-5-5-5v10z"
-                        />
-                        <path
-                          d="M0 24V0h24v24H0z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M10 17l5-5-5-5v10z"
+                          />
+                          <path
+                            d="M0 24V0h24v24H0z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </div>
                 </div>
-              </div>
-            </td>
-          </tr>
-        </tbody>
-      </table>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
     </div>
   </div>
 </div>
@@ -5945,83 +5965,87 @@ exports[`Storyshots Generics / TablePagination next page available 1`] = `
     <div
       class="MuiCardContent-root-id"
     >
-      <table
-        class="MuiTable-root-id"
+      <div
+        class="ResponsiveTable-root-id"
       >
-        <tbody>
-          <tr>
-            <td
-              class="MuiTableCell-root-id makeStyles-root-id"
-              colspan="1"
-            >
-              <div
-                class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+        <table
+          class="MuiTable-root-id"
+        >
+          <tbody>
+            <tr>
+              <td
+                class="MuiTableCell-root-id makeStyles-root-id"
+                colspan="1"
               >
                 <div
-                  class="makeStyles-spacer-id"
-                />
-                <div
-                  class="makeStyles-root-id"
+                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
                 >
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                    data-tc="button-pagination-back"
-                    disabled=""
-                    tabindex="-1"
-                    type="button"
+                  <div
+                    class="makeStyles-spacer-id"
+                  />
+                  <div
+                    class="makeStyles-root-id"
                   >
-                    <span
-                      class="MuiIconButton-label-id"
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      data-tc="button-pagination-back"
+                      disabled=""
+                      tabindex="-1"
+                      type="button"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
+                      <span
+                        class="MuiIconButton-label-id"
                       >
-                        <path
-                          d="M14 7l-5 5 5 5V7z"
-                        />
-                        <path
-                          d="M24 0v24H0V0h24z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
-                    data-tc="button-pagination-next"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M14 7l-5 5 5 5V7z"
+                          />
+                          <path
+                            d="M24 0v24H0V0h24z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                      data-tc="button-pagination-next"
+                      tabindex="0"
+                      type="button"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
+                      <span
+                        class="MuiIconButton-label-id"
                       >
-                        <path
-                          d="M10 17l5-5-5-5v10z"
-                        />
-                        <path
-                          d="M0 24V0h24v24H0z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M10 17l5-5-5-5v10z"
+                          />
+                          <path
+                            d="M0 24V0h24v24H0z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </div>
                 </div>
-              </div>
-            </td>
-          </tr>
-        </tbody>
-      </table>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
     </div>
   </div>
 </div>
@@ -6038,84 +6062,88 @@ exports[`Storyshots Generics / TablePagination no previous / next page 1`] = `
     <div
       class="MuiCardContent-root-id"
     >
-      <table
-        class="MuiTable-root-id"
+      <div
+        class="ResponsiveTable-root-id"
       >
-        <tbody>
-          <tr>
-            <td
-              class="MuiTableCell-root-id makeStyles-root-id"
-              colspan="1"
-            >
-              <div
-                class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+        <table
+          class="MuiTable-root-id"
+        >
+          <tbody>
+            <tr>
+              <td
+                class="MuiTableCell-root-id makeStyles-root-id"
+                colspan="1"
               >
                 <div
-                  class="makeStyles-spacer-id"
-                />
-                <div
-                  class="makeStyles-root-id"
+                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
                 >
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                    data-tc="button-pagination-back"
-                    disabled=""
-                    tabindex="-1"
-                    type="button"
+                  <div
+                    class="makeStyles-spacer-id"
+                  />
+                  <div
+                    class="makeStyles-root-id"
                   >
-                    <span
-                      class="MuiIconButton-label-id"
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      data-tc="button-pagination-back"
+                      disabled=""
+                      tabindex="-1"
+                      type="button"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
+                      <span
+                        class="MuiIconButton-label-id"
                       >
-                        <path
-                          d="M14 7l-5 5 5 5V7z"
-                        />
-                        <path
-                          d="M24 0v24H0V0h24z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                    data-tc="button-pagination-next"
-                    disabled=""
-                    tabindex="-1"
-                    type="button"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M14 7l-5 5 5 5V7z"
+                          />
+                          <path
+                            d="M24 0v24H0V0h24z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      data-tc="button-pagination-next"
+                      disabled=""
+                      tabindex="-1"
+                      type="button"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
+                      <span
+                        class="MuiIconButton-label-id"
                       >
-                        <path
-                          d="M10 17l5-5-5-5v10z"
-                        />
-                        <path
-                          d="M0 24V0h24v24H0z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M10 17l5-5-5-5v10z"
+                          />
+                          <path
+                            d="M0 24V0h24v24H0z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </div>
                 </div>
-              </div>
-            </td>
-          </tr>
-        </tbody>
-      </table>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
     </div>
   </div>
 </div>
@@ -6132,83 +6160,87 @@ exports[`Storyshots Generics / TablePagination previous page available 1`] = `
     <div
       class="MuiCardContent-root-id"
     >
-      <table
-        class="MuiTable-root-id"
+      <div
+        class="ResponsiveTable-root-id"
       >
-        <tbody>
-          <tr>
-            <td
-              class="MuiTableCell-root-id makeStyles-root-id"
-              colspan="1"
-            >
-              <div
-                class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+        <table
+          class="MuiTable-root-id"
+        >
+          <tbody>
+            <tr>
+              <td
+                class="MuiTableCell-root-id makeStyles-root-id"
+                colspan="1"
               >
                 <div
-                  class="makeStyles-spacer-id"
-                />
-                <div
-                  class="makeStyles-root-id"
+                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
                 >
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
-                    data-tc="button-pagination-back"
-                    tabindex="0"
-                    type="button"
+                  <div
+                    class="makeStyles-spacer-id"
+                  />
+                  <div
+                    class="makeStyles-root-id"
                   >
-                    <span
-                      class="MuiIconButton-label-id"
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                      data-tc="button-pagination-back"
+                      tabindex="0"
+                      type="button"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
+                      <span
+                        class="MuiIconButton-label-id"
                       >
-                        <path
-                          d="M14 7l-5 5 5 5V7z"
-                        />
-                        <path
-                          d="M24 0v24H0V0h24z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                    data-tc="button-pagination-next"
-                    disabled=""
-                    tabindex="-1"
-                    type="button"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M14 7l-5 5 5 5V7z"
+                          />
+                          <path
+                            d="M24 0v24H0V0h24z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      data-tc="button-pagination-next"
+                      disabled=""
+                      tabindex="-1"
+                      type="button"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
+                      <span
+                        class="MuiIconButton-label-id"
                       >
-                        <path
-                          d="M10 17l5-5-5-5v10z"
-                        />
-                        <path
-                          d="M0 24V0h24v24H0z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M10 17l5-5-5-5v10z"
+                          />
+                          <path
+                            d="M0 24V0h24v24H0z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </div>
                 </div>
-              </div>
-            </td>
-          </tr>
-        </tbody>
-      </table>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
     </div>
   </div>
 </div>
@@ -7790,10 +7822,10 @@ exports[`Storyshots Views / Attributes / Attribute details create 1`] = `
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -7801,7 +7833,7 @@ exports[`Storyshots Views / Attributes / Attribute details create 1`] = `
           Create New Attribute
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -8034,194 +8066,198 @@ exports[`Storyshots Views / Attributes / Attribute details create 1`] = `
             <hr
               class="makeStyles-hr-id"
             />
-            <table
-              class="MuiTable-root-id"
+            <div
+              class="ResponsiveTable-root-id"
             >
-              <thead
-                class="MuiTableHead-root-id"
+              <table
+                class="MuiTable-root-id"
               >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
+                <thead
+                  class="MuiTableHead-root-id"
                 >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-columnDrag-id"
-                    scope="col"
-                  />
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-columnAdmin-id"
-                    scope="col"
+                  <tr
+                    class="MuiTableRow-root-id MuiTableRow-head-id"
                   >
-                    Admin
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-columnStore-id"
-                    scope="col"
-                  >
-                    Default Store View
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id"
-                    scope="col"
-                  />
-                </tr>
-              </thead>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-columnDrag-id"
+                      scope="col"
+                    />
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-columnAdmin-id"
+                      scope="col"
+                    >
+                      Admin
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-columnStore-id"
+                      scope="col"
+                    >
+                      Default Store View
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id"
+                      scope="col"
+                    />
+                  </tr>
+                </thead>
+                <tbody
+                  class="MuiTableBody-root-id"
                 >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnDrag-id"
+                  <tr
+                    class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
                   >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnDrag-id"
                     >
-                      <path
-                        clip-rule="evenodd"
-                        d="M3.5 2C3.5 2.82843 2.82843 3.5 2 3.5C1.17157 3.5 0.5 2.82843 0.5 2C0.5 1.17157 1.17157 0.5 2 0.5C2.82843 0.5 3.5 1.17157 3.5 2ZM4 2C4 3.10457 3.10457 4 2 4C0.895431 4 0 3.10457 0 2C0 0.895431 0.895431 0 2 0C3.10457 0 4 0.895431 4 2ZM9.5 2C9.5 2.82843 8.82843 3.5 8 3.5C7.17157 3.5 6.5 2.82843 6.5 2C6.5 1.17157 7.17157 0.5 8 0.5C8.82843 0.5 9.5 1.17157 9.5 2ZM10 2C10 3.10457 9.10457 4 8 4C6.89543 4 6 3.10457 6 2C6 0.895431 6.89543 0 8 0C9.10457 0 10 0.895431 10 2ZM8 9.5C8.82843 9.5 9.5 8.82843 9.5 8C9.5 7.17157 8.82843 6.5 8 6.5C7.17157 6.5 6.5 7.17157 6.5 8C6.5 8.82843 7.17157 9.5 8 9.5ZM8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10ZM3.5 8C3.5 8.82843 2.82843 9.5 2 9.5C1.17157 9.5 0.5 8.82843 0.5 8C0.5 7.17157 1.17157 6.5 2 6.5C2.82843 6.5 3.5 7.17157 3.5 8ZM4 8C4 9.10457 3.10457 10 2 10C0.895431 10 0 9.10457 0 8C0 6.89543 0.895431 6 2 6C3.10457 6 4 6.89543 4 8ZM2 15.5C2.82843 15.5 3.5 14.8284 3.5 14C3.5 13.1716 2.82843 12.5 2 12.5C1.17157 12.5 0.5 13.1716 0.5 14C0.5 14.8284 1.17157 15.5 2 15.5ZM2 16C3.10457 16 4 15.1046 4 14C4 12.8954 3.10457 12 2 12C0.895431 12 0 12.8954 0 14C0 15.1046 0.895431 16 2 16ZM9.5 14C9.5 14.8284 8.82843 15.5 8 15.5C7.17157 15.5 6.5 14.8284 6.5 14C6.5 13.1716 7.17157 12.5 8 12.5C8.82843 12.5 9.5 13.1716 9.5 14ZM10 14C10 15.1046 9.10457 16 8 16C6.89543 16 6 15.1046 6 14C6 12.8954 6.89543 12 8 12C9.10457 12 10 12.8954 10 14Z"
-                        fill="url(#paint0_linear)"
-                        fill-rule="evenodd"
-                        style="transform:translate(7px, 4px)"
-                      />
-                      <defs>
-                        <linearGradient
-                          gradientUnits="userSpaceOnUse"
-                          id="paint0_linear"
-                          x1="0"
-                          x2="16.0896"
-                          y1="0"
-                          y2="10.4478"
-                        >
-                          <stop
-                            stop-color="#06847B"
-                          />
-                          <stop
-                            offset="1"
-                            stop-color="#3EE7CD"
-                          />
-                        </linearGradient>
-                      </defs>
-                    </svg>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnAdmin-id"
-                  >
-                    john-doe
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnStore-id"
-                  >
-                    John Doe
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-iconCell-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root-id"
+                        focusable="false"
+                        role="presentation"
+                        viewBox="0 0 24 24"
                       >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
-                          focusable="false"
-                          role="presentation"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                          />
-                        </svg>
-                      </span>
-                    </button>
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnDrag-id"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
+                        <path
+                          clip-rule="evenodd"
+                          d="M3.5 2C3.5 2.82843 2.82843 3.5 2 3.5C1.17157 3.5 0.5 2.82843 0.5 2C0.5 1.17157 1.17157 0.5 2 0.5C2.82843 0.5 3.5 1.17157 3.5 2ZM4 2C4 3.10457 3.10457 4 2 4C0.895431 4 0 3.10457 0 2C0 0.895431 0.895431 0 2 0C3.10457 0 4 0.895431 4 2ZM9.5 2C9.5 2.82843 8.82843 3.5 8 3.5C7.17157 3.5 6.5 2.82843 6.5 2C6.5 1.17157 7.17157 0.5 8 0.5C8.82843 0.5 9.5 1.17157 9.5 2ZM10 2C10 3.10457 9.10457 4 8 4C6.89543 4 6 3.10457 6 2C6 0.895431 6.89543 0 8 0C9.10457 0 10 0.895431 10 2ZM8 9.5C8.82843 9.5 9.5 8.82843 9.5 8C9.5 7.17157 8.82843 6.5 8 6.5C7.17157 6.5 6.5 7.17157 6.5 8C6.5 8.82843 7.17157 9.5 8 9.5ZM8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10ZM3.5 8C3.5 8.82843 2.82843 9.5 2 9.5C1.17157 9.5 0.5 8.82843 0.5 8C0.5 7.17157 1.17157 6.5 2 6.5C2.82843 6.5 3.5 7.17157 3.5 8ZM4 8C4 9.10457 3.10457 10 2 10C0.895431 10 0 9.10457 0 8C0 6.89543 0.895431 6 2 6C3.10457 6 4 6.89543 4 8ZM2 15.5C2.82843 15.5 3.5 14.8284 3.5 14C3.5 13.1716 2.82843 12.5 2 12.5C1.17157 12.5 0.5 13.1716 0.5 14C0.5 14.8284 1.17157 15.5 2 15.5ZM2 16C3.10457 16 4 15.1046 4 14C4 12.8954 3.10457 12 2 12C0.895431 12 0 12.8954 0 14C0 15.1046 0.895431 16 2 16ZM9.5 14C9.5 14.8284 8.82843 15.5 8 15.5C7.17157 15.5 6.5 14.8284 6.5 14C6.5 13.1716 7.17157 12.5 8 12.5C8.82843 12.5 9.5 13.1716 9.5 14ZM10 14C10 15.1046 9.10457 16 8 16C6.89543 16 6 15.1046 6 14C6 12.8954 6.89543 12 8 12C9.10457 12 10 12.8954 10 14Z"
+                          fill="url(#paint0_linear)"
+                          fill-rule="evenodd"
+                          style="transform:translate(7px, 4px)"
+                        />
+                        <defs>
+                          <linearGradient
+                            gradientUnits="userSpaceOnUse"
+                            id="paint0_linear"
+                            x1="0"
+                            x2="16.0896"
+                            y1="0"
+                            y2="10.4478"
+                          >
+                            <stop
+                              stop-color="#06847B"
+                            />
+                            <stop
+                              offset="1"
+                              stop-color="#3EE7CD"
+                            />
+                          </linearGradient>
+                        </defs>
+                      </svg>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnAdmin-id"
                     >
-                      <path
-                        clip-rule="evenodd"
-                        d="M3.5 2C3.5 2.82843 2.82843 3.5 2 3.5C1.17157 3.5 0.5 2.82843 0.5 2C0.5 1.17157 1.17157 0.5 2 0.5C2.82843 0.5 3.5 1.17157 3.5 2ZM4 2C4 3.10457 3.10457 4 2 4C0.895431 4 0 3.10457 0 2C0 0.895431 0.895431 0 2 0C3.10457 0 4 0.895431 4 2ZM9.5 2C9.5 2.82843 8.82843 3.5 8 3.5C7.17157 3.5 6.5 2.82843 6.5 2C6.5 1.17157 7.17157 0.5 8 0.5C8.82843 0.5 9.5 1.17157 9.5 2ZM10 2C10 3.10457 9.10457 4 8 4C6.89543 4 6 3.10457 6 2C6 0.895431 6.89543 0 8 0C9.10457 0 10 0.895431 10 2ZM8 9.5C8.82843 9.5 9.5 8.82843 9.5 8C9.5 7.17157 8.82843 6.5 8 6.5C7.17157 6.5 6.5 7.17157 6.5 8C6.5 8.82843 7.17157 9.5 8 9.5ZM8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10ZM3.5 8C3.5 8.82843 2.82843 9.5 2 9.5C1.17157 9.5 0.5 8.82843 0.5 8C0.5 7.17157 1.17157 6.5 2 6.5C2.82843 6.5 3.5 7.17157 3.5 8ZM4 8C4 9.10457 3.10457 10 2 10C0.895431 10 0 9.10457 0 8C0 6.89543 0.895431 6 2 6C3.10457 6 4 6.89543 4 8ZM2 15.5C2.82843 15.5 3.5 14.8284 3.5 14C3.5 13.1716 2.82843 12.5 2 12.5C1.17157 12.5 0.5 13.1716 0.5 14C0.5 14.8284 1.17157 15.5 2 15.5ZM2 16C3.10457 16 4 15.1046 4 14C4 12.8954 3.10457 12 2 12C0.895431 12 0 12.8954 0 14C0 15.1046 0.895431 16 2 16ZM9.5 14C9.5 14.8284 8.82843 15.5 8 15.5C7.17157 15.5 6.5 14.8284 6.5 14C6.5 13.1716 7.17157 12.5 8 12.5C8.82843 12.5 9.5 13.1716 9.5 14ZM10 14C10 15.1046 9.10457 16 8 16C6.89543 16 6 15.1046 6 14C6 12.8954 6.89543 12 8 12C9.10457 12 10 12.8954 10 14Z"
-                        fill="url(#paint0_linear)"
-                        fill-rule="evenodd"
-                        style="transform:translate(7px, 4px)"
-                      />
-                      <defs>
-                        <linearGradient
-                          gradientUnits="userSpaceOnUse"
-                          id="paint0_linear"
-                          x1="0"
-                          x2="16.0896"
-                          y1="0"
-                          y2="10.4478"
-                        >
-                          <stop
-                            stop-color="#06847B"
-                          />
-                          <stop
-                            offset="1"
-                            stop-color="#3EE7CD"
-                          />
-                        </linearGradient>
-                      </defs>
-                    </svg>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnAdmin-id"
-                  >
-                    milionare-pirate
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnStore-id"
-                  >
-                    Milionare Pirate
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-iconCell-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id"
-                      tabindex="0"
-                      type="button"
+                      john-doe
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnStore-id"
                     >
-                      <span
-                        class="MuiIconButton-label-id"
+                      John Doe
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-iconCell-id"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id MuiIconButton-root-id"
+                        tabindex="0"
+                        type="button"
                       >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
-                          focusable="false"
-                          role="presentation"
-                          viewBox="0 0 24 24"
+                        <span
+                          class="MuiIconButton-label-id"
                         >
-                          <path
-                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                          />
-                        </svg>
-                      </span>
-                    </button>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </td>
+                  </tr>
+                  <tr
+                    class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                  >
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnDrag-id"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root-id"
+                        focusable="false"
+                        role="presentation"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          clip-rule="evenodd"
+                          d="M3.5 2C3.5 2.82843 2.82843 3.5 2 3.5C1.17157 3.5 0.5 2.82843 0.5 2C0.5 1.17157 1.17157 0.5 2 0.5C2.82843 0.5 3.5 1.17157 3.5 2ZM4 2C4 3.10457 3.10457 4 2 4C0.895431 4 0 3.10457 0 2C0 0.895431 0.895431 0 2 0C3.10457 0 4 0.895431 4 2ZM9.5 2C9.5 2.82843 8.82843 3.5 8 3.5C7.17157 3.5 6.5 2.82843 6.5 2C6.5 1.17157 7.17157 0.5 8 0.5C8.82843 0.5 9.5 1.17157 9.5 2ZM10 2C10 3.10457 9.10457 4 8 4C6.89543 4 6 3.10457 6 2C6 0.895431 6.89543 0 8 0C9.10457 0 10 0.895431 10 2ZM8 9.5C8.82843 9.5 9.5 8.82843 9.5 8C9.5 7.17157 8.82843 6.5 8 6.5C7.17157 6.5 6.5 7.17157 6.5 8C6.5 8.82843 7.17157 9.5 8 9.5ZM8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10ZM3.5 8C3.5 8.82843 2.82843 9.5 2 9.5C1.17157 9.5 0.5 8.82843 0.5 8C0.5 7.17157 1.17157 6.5 2 6.5C2.82843 6.5 3.5 7.17157 3.5 8ZM4 8C4 9.10457 3.10457 10 2 10C0.895431 10 0 9.10457 0 8C0 6.89543 0.895431 6 2 6C3.10457 6 4 6.89543 4 8ZM2 15.5C2.82843 15.5 3.5 14.8284 3.5 14C3.5 13.1716 2.82843 12.5 2 12.5C1.17157 12.5 0.5 13.1716 0.5 14C0.5 14.8284 1.17157 15.5 2 15.5ZM2 16C3.10457 16 4 15.1046 4 14C4 12.8954 3.10457 12 2 12C0.895431 12 0 12.8954 0 14C0 15.1046 0.895431 16 2 16ZM9.5 14C9.5 14.8284 8.82843 15.5 8 15.5C7.17157 15.5 6.5 14.8284 6.5 14C6.5 13.1716 7.17157 12.5 8 12.5C8.82843 12.5 9.5 13.1716 9.5 14ZM10 14C10 15.1046 9.10457 16 8 16C6.89543 16 6 15.1046 6 14C6 12.8954 6.89543 12 8 12C9.10457 12 10 12.8954 10 14Z"
+                          fill="url(#paint0_linear)"
+                          fill-rule="evenodd"
+                          style="transform:translate(7px, 4px)"
+                        />
+                        <defs>
+                          <linearGradient
+                            gradientUnits="userSpaceOnUse"
+                            id="paint0_linear"
+                            x1="0"
+                            x2="16.0896"
+                            y1="0"
+                            y2="10.4478"
+                          >
+                            <stop
+                              stop-color="#06847B"
+                            />
+                            <stop
+                              offset="1"
+                              stop-color="#3EE7CD"
+                            />
+                          </linearGradient>
+                        </defs>
+                      </svg>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnAdmin-id"
+                    >
+                      milionare-pirate
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnStore-id"
+                    >
+                      Milionare Pirate
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-iconCell-id"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id MuiIconButton-root-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiIconButton-label-id"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
           </div>
         </div>
         <div>
@@ -8424,10 +8460,10 @@ exports[`Storyshots Views / Attributes / Attribute details default 1`] = `
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -8435,7 +8471,7 @@ exports[`Storyshots Views / Attributes / Attribute details default 1`] = `
           Author
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -8667,194 +8703,198 @@ exports[`Storyshots Views / Attributes / Attribute details default 1`] = `
             <hr
               class="makeStyles-hr-id"
             />
-            <table
-              class="MuiTable-root-id"
+            <div
+              class="ResponsiveTable-root-id"
             >
-              <thead
-                class="MuiTableHead-root-id"
+              <table
+                class="MuiTable-root-id"
               >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
+                <thead
+                  class="MuiTableHead-root-id"
                 >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-columnDrag-id"
-                    scope="col"
-                  />
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-columnAdmin-id"
-                    scope="col"
+                  <tr
+                    class="MuiTableRow-root-id MuiTableRow-head-id"
                   >
-                    Admin
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-columnStore-id"
-                    scope="col"
-                  >
-                    Default Store View
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id"
-                    scope="col"
-                  />
-                </tr>
-              </thead>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-columnDrag-id"
+                      scope="col"
+                    />
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-columnAdmin-id"
+                      scope="col"
+                    >
+                      Admin
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-columnStore-id"
+                      scope="col"
+                    >
+                      Default Store View
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id"
+                      scope="col"
+                    />
+                  </tr>
+                </thead>
+                <tbody
+                  class="MuiTableBody-root-id"
                 >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnDrag-id"
+                  <tr
+                    class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
                   >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnDrag-id"
                     >
-                      <path
-                        clip-rule="evenodd"
-                        d="M3.5 2C3.5 2.82843 2.82843 3.5 2 3.5C1.17157 3.5 0.5 2.82843 0.5 2C0.5 1.17157 1.17157 0.5 2 0.5C2.82843 0.5 3.5 1.17157 3.5 2ZM4 2C4 3.10457 3.10457 4 2 4C0.895431 4 0 3.10457 0 2C0 0.895431 0.895431 0 2 0C3.10457 0 4 0.895431 4 2ZM9.5 2C9.5 2.82843 8.82843 3.5 8 3.5C7.17157 3.5 6.5 2.82843 6.5 2C6.5 1.17157 7.17157 0.5 8 0.5C8.82843 0.5 9.5 1.17157 9.5 2ZM10 2C10 3.10457 9.10457 4 8 4C6.89543 4 6 3.10457 6 2C6 0.895431 6.89543 0 8 0C9.10457 0 10 0.895431 10 2ZM8 9.5C8.82843 9.5 9.5 8.82843 9.5 8C9.5 7.17157 8.82843 6.5 8 6.5C7.17157 6.5 6.5 7.17157 6.5 8C6.5 8.82843 7.17157 9.5 8 9.5ZM8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10ZM3.5 8C3.5 8.82843 2.82843 9.5 2 9.5C1.17157 9.5 0.5 8.82843 0.5 8C0.5 7.17157 1.17157 6.5 2 6.5C2.82843 6.5 3.5 7.17157 3.5 8ZM4 8C4 9.10457 3.10457 10 2 10C0.895431 10 0 9.10457 0 8C0 6.89543 0.895431 6 2 6C3.10457 6 4 6.89543 4 8ZM2 15.5C2.82843 15.5 3.5 14.8284 3.5 14C3.5 13.1716 2.82843 12.5 2 12.5C1.17157 12.5 0.5 13.1716 0.5 14C0.5 14.8284 1.17157 15.5 2 15.5ZM2 16C3.10457 16 4 15.1046 4 14C4 12.8954 3.10457 12 2 12C0.895431 12 0 12.8954 0 14C0 15.1046 0.895431 16 2 16ZM9.5 14C9.5 14.8284 8.82843 15.5 8 15.5C7.17157 15.5 6.5 14.8284 6.5 14C6.5 13.1716 7.17157 12.5 8 12.5C8.82843 12.5 9.5 13.1716 9.5 14ZM10 14C10 15.1046 9.10457 16 8 16C6.89543 16 6 15.1046 6 14C6 12.8954 6.89543 12 8 12C9.10457 12 10 12.8954 10 14Z"
-                        fill="url(#paint0_linear)"
-                        fill-rule="evenodd"
-                        style="transform:translate(7px, 4px)"
-                      />
-                      <defs>
-                        <linearGradient
-                          gradientUnits="userSpaceOnUse"
-                          id="paint0_linear"
-                          x1="0"
-                          x2="16.0896"
-                          y1="0"
-                          y2="10.4478"
-                        >
-                          <stop
-                            stop-color="#06847B"
-                          />
-                          <stop
-                            offset="1"
-                            stop-color="#3EE7CD"
-                          />
-                        </linearGradient>
-                      </defs>
-                    </svg>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnAdmin-id"
-                  >
-                    john-doe
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnStore-id"
-                  >
-                    John Doe
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-iconCell-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root-id"
+                        focusable="false"
+                        role="presentation"
+                        viewBox="0 0 24 24"
                       >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
-                          focusable="false"
-                          role="presentation"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                          />
-                        </svg>
-                      </span>
-                    </button>
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnDrag-id"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
+                        <path
+                          clip-rule="evenodd"
+                          d="M3.5 2C3.5 2.82843 2.82843 3.5 2 3.5C1.17157 3.5 0.5 2.82843 0.5 2C0.5 1.17157 1.17157 0.5 2 0.5C2.82843 0.5 3.5 1.17157 3.5 2ZM4 2C4 3.10457 3.10457 4 2 4C0.895431 4 0 3.10457 0 2C0 0.895431 0.895431 0 2 0C3.10457 0 4 0.895431 4 2ZM9.5 2C9.5 2.82843 8.82843 3.5 8 3.5C7.17157 3.5 6.5 2.82843 6.5 2C6.5 1.17157 7.17157 0.5 8 0.5C8.82843 0.5 9.5 1.17157 9.5 2ZM10 2C10 3.10457 9.10457 4 8 4C6.89543 4 6 3.10457 6 2C6 0.895431 6.89543 0 8 0C9.10457 0 10 0.895431 10 2ZM8 9.5C8.82843 9.5 9.5 8.82843 9.5 8C9.5 7.17157 8.82843 6.5 8 6.5C7.17157 6.5 6.5 7.17157 6.5 8C6.5 8.82843 7.17157 9.5 8 9.5ZM8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10ZM3.5 8C3.5 8.82843 2.82843 9.5 2 9.5C1.17157 9.5 0.5 8.82843 0.5 8C0.5 7.17157 1.17157 6.5 2 6.5C2.82843 6.5 3.5 7.17157 3.5 8ZM4 8C4 9.10457 3.10457 10 2 10C0.895431 10 0 9.10457 0 8C0 6.89543 0.895431 6 2 6C3.10457 6 4 6.89543 4 8ZM2 15.5C2.82843 15.5 3.5 14.8284 3.5 14C3.5 13.1716 2.82843 12.5 2 12.5C1.17157 12.5 0.5 13.1716 0.5 14C0.5 14.8284 1.17157 15.5 2 15.5ZM2 16C3.10457 16 4 15.1046 4 14C4 12.8954 3.10457 12 2 12C0.895431 12 0 12.8954 0 14C0 15.1046 0.895431 16 2 16ZM9.5 14C9.5 14.8284 8.82843 15.5 8 15.5C7.17157 15.5 6.5 14.8284 6.5 14C6.5 13.1716 7.17157 12.5 8 12.5C8.82843 12.5 9.5 13.1716 9.5 14ZM10 14C10 15.1046 9.10457 16 8 16C6.89543 16 6 15.1046 6 14C6 12.8954 6.89543 12 8 12C9.10457 12 10 12.8954 10 14Z"
+                          fill="url(#paint0_linear)"
+                          fill-rule="evenodd"
+                          style="transform:translate(7px, 4px)"
+                        />
+                        <defs>
+                          <linearGradient
+                            gradientUnits="userSpaceOnUse"
+                            id="paint0_linear"
+                            x1="0"
+                            x2="16.0896"
+                            y1="0"
+                            y2="10.4478"
+                          >
+                            <stop
+                              stop-color="#06847B"
+                            />
+                            <stop
+                              offset="1"
+                              stop-color="#3EE7CD"
+                            />
+                          </linearGradient>
+                        </defs>
+                      </svg>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnAdmin-id"
                     >
-                      <path
-                        clip-rule="evenodd"
-                        d="M3.5 2C3.5 2.82843 2.82843 3.5 2 3.5C1.17157 3.5 0.5 2.82843 0.5 2C0.5 1.17157 1.17157 0.5 2 0.5C2.82843 0.5 3.5 1.17157 3.5 2ZM4 2C4 3.10457 3.10457 4 2 4C0.895431 4 0 3.10457 0 2C0 0.895431 0.895431 0 2 0C3.10457 0 4 0.895431 4 2ZM9.5 2C9.5 2.82843 8.82843 3.5 8 3.5C7.17157 3.5 6.5 2.82843 6.5 2C6.5 1.17157 7.17157 0.5 8 0.5C8.82843 0.5 9.5 1.17157 9.5 2ZM10 2C10 3.10457 9.10457 4 8 4C6.89543 4 6 3.10457 6 2C6 0.895431 6.89543 0 8 0C9.10457 0 10 0.895431 10 2ZM8 9.5C8.82843 9.5 9.5 8.82843 9.5 8C9.5 7.17157 8.82843 6.5 8 6.5C7.17157 6.5 6.5 7.17157 6.5 8C6.5 8.82843 7.17157 9.5 8 9.5ZM8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10ZM3.5 8C3.5 8.82843 2.82843 9.5 2 9.5C1.17157 9.5 0.5 8.82843 0.5 8C0.5 7.17157 1.17157 6.5 2 6.5C2.82843 6.5 3.5 7.17157 3.5 8ZM4 8C4 9.10457 3.10457 10 2 10C0.895431 10 0 9.10457 0 8C0 6.89543 0.895431 6 2 6C3.10457 6 4 6.89543 4 8ZM2 15.5C2.82843 15.5 3.5 14.8284 3.5 14C3.5 13.1716 2.82843 12.5 2 12.5C1.17157 12.5 0.5 13.1716 0.5 14C0.5 14.8284 1.17157 15.5 2 15.5ZM2 16C3.10457 16 4 15.1046 4 14C4 12.8954 3.10457 12 2 12C0.895431 12 0 12.8954 0 14C0 15.1046 0.895431 16 2 16ZM9.5 14C9.5 14.8284 8.82843 15.5 8 15.5C7.17157 15.5 6.5 14.8284 6.5 14C6.5 13.1716 7.17157 12.5 8 12.5C8.82843 12.5 9.5 13.1716 9.5 14ZM10 14C10 15.1046 9.10457 16 8 16C6.89543 16 6 15.1046 6 14C6 12.8954 6.89543 12 8 12C9.10457 12 10 12.8954 10 14Z"
-                        fill="url(#paint0_linear)"
-                        fill-rule="evenodd"
-                        style="transform:translate(7px, 4px)"
-                      />
-                      <defs>
-                        <linearGradient
-                          gradientUnits="userSpaceOnUse"
-                          id="paint0_linear"
-                          x1="0"
-                          x2="16.0896"
-                          y1="0"
-                          y2="10.4478"
-                        >
-                          <stop
-                            stop-color="#06847B"
-                          />
-                          <stop
-                            offset="1"
-                            stop-color="#3EE7CD"
-                          />
-                        </linearGradient>
-                      </defs>
-                    </svg>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnAdmin-id"
-                  >
-                    milionare-pirate
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnStore-id"
-                  >
-                    Milionare Pirate
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-iconCell-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id"
-                      tabindex="0"
-                      type="button"
+                      john-doe
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnStore-id"
                     >
-                      <span
-                        class="MuiIconButton-label-id"
+                      John Doe
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-iconCell-id"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id MuiIconButton-root-id"
+                        tabindex="0"
+                        type="button"
                       >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
-                          focusable="false"
-                          role="presentation"
-                          viewBox="0 0 24 24"
+                        <span
+                          class="MuiIconButton-label-id"
                         >
-                          <path
-                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                          />
-                        </svg>
-                      </span>
-                    </button>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </td>
+                  </tr>
+                  <tr
+                    class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                  >
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnDrag-id"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root-id"
+                        focusable="false"
+                        role="presentation"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          clip-rule="evenodd"
+                          d="M3.5 2C3.5 2.82843 2.82843 3.5 2 3.5C1.17157 3.5 0.5 2.82843 0.5 2C0.5 1.17157 1.17157 0.5 2 0.5C2.82843 0.5 3.5 1.17157 3.5 2ZM4 2C4 3.10457 3.10457 4 2 4C0.895431 4 0 3.10457 0 2C0 0.895431 0.895431 0 2 0C3.10457 0 4 0.895431 4 2ZM9.5 2C9.5 2.82843 8.82843 3.5 8 3.5C7.17157 3.5 6.5 2.82843 6.5 2C6.5 1.17157 7.17157 0.5 8 0.5C8.82843 0.5 9.5 1.17157 9.5 2ZM10 2C10 3.10457 9.10457 4 8 4C6.89543 4 6 3.10457 6 2C6 0.895431 6.89543 0 8 0C9.10457 0 10 0.895431 10 2ZM8 9.5C8.82843 9.5 9.5 8.82843 9.5 8C9.5 7.17157 8.82843 6.5 8 6.5C7.17157 6.5 6.5 7.17157 6.5 8C6.5 8.82843 7.17157 9.5 8 9.5ZM8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10ZM3.5 8C3.5 8.82843 2.82843 9.5 2 9.5C1.17157 9.5 0.5 8.82843 0.5 8C0.5 7.17157 1.17157 6.5 2 6.5C2.82843 6.5 3.5 7.17157 3.5 8ZM4 8C4 9.10457 3.10457 10 2 10C0.895431 10 0 9.10457 0 8C0 6.89543 0.895431 6 2 6C3.10457 6 4 6.89543 4 8ZM2 15.5C2.82843 15.5 3.5 14.8284 3.5 14C3.5 13.1716 2.82843 12.5 2 12.5C1.17157 12.5 0.5 13.1716 0.5 14C0.5 14.8284 1.17157 15.5 2 15.5ZM2 16C3.10457 16 4 15.1046 4 14C4 12.8954 3.10457 12 2 12C0.895431 12 0 12.8954 0 14C0 15.1046 0.895431 16 2 16ZM9.5 14C9.5 14.8284 8.82843 15.5 8 15.5C7.17157 15.5 6.5 14.8284 6.5 14C6.5 13.1716 7.17157 12.5 8 12.5C8.82843 12.5 9.5 13.1716 9.5 14ZM10 14C10 15.1046 9.10457 16 8 16C6.89543 16 6 15.1046 6 14C6 12.8954 6.89543 12 8 12C9.10457 12 10 12.8954 10 14Z"
+                          fill="url(#paint0_linear)"
+                          fill-rule="evenodd"
+                          style="transform:translate(7px, 4px)"
+                        />
+                        <defs>
+                          <linearGradient
+                            gradientUnits="userSpaceOnUse"
+                            id="paint0_linear"
+                            x1="0"
+                            x2="16.0896"
+                            y1="0"
+                            y2="10.4478"
+                          >
+                            <stop
+                              stop-color="#06847B"
+                            />
+                            <stop
+                              offset="1"
+                              stop-color="#3EE7CD"
+                            />
+                          </linearGradient>
+                        </defs>
+                      </svg>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnAdmin-id"
+                    >
+                      milionare-pirate
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnStore-id"
+                    >
+                      Milionare Pirate
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-iconCell-id"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id MuiIconButton-root-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiIconButton-label-id"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
           </div>
         </div>
         <div>
@@ -9057,10 +9097,10 @@ exports[`Storyshots Views / Attributes / Attribute details form errors 1`] = `
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -9068,7 +9108,7 @@ exports[`Storyshots Views / Attributes / Attribute details form errors 1`] = `
           Author
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -9305,194 +9345,198 @@ exports[`Storyshots Views / Attributes / Attribute details form errors 1`] = `
             <hr
               class="makeStyles-hr-id"
             />
-            <table
-              class="MuiTable-root-id"
+            <div
+              class="ResponsiveTable-root-id"
             >
-              <thead
-                class="MuiTableHead-root-id"
+              <table
+                class="MuiTable-root-id"
               >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
+                <thead
+                  class="MuiTableHead-root-id"
                 >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-columnDrag-id"
-                    scope="col"
-                  />
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-columnAdmin-id"
-                    scope="col"
+                  <tr
+                    class="MuiTableRow-root-id MuiTableRow-head-id"
                   >
-                    Admin
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-columnStore-id"
-                    scope="col"
-                  >
-                    Default Store View
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id"
-                    scope="col"
-                  />
-                </tr>
-              </thead>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-columnDrag-id"
+                      scope="col"
+                    />
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-columnAdmin-id"
+                      scope="col"
+                    >
+                      Admin
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-columnStore-id"
+                      scope="col"
+                    >
+                      Default Store View
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id"
+                      scope="col"
+                    />
+                  </tr>
+                </thead>
+                <tbody
+                  class="MuiTableBody-root-id"
                 >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnDrag-id"
+                  <tr
+                    class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
                   >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnDrag-id"
                     >
-                      <path
-                        clip-rule="evenodd"
-                        d="M3.5 2C3.5 2.82843 2.82843 3.5 2 3.5C1.17157 3.5 0.5 2.82843 0.5 2C0.5 1.17157 1.17157 0.5 2 0.5C2.82843 0.5 3.5 1.17157 3.5 2ZM4 2C4 3.10457 3.10457 4 2 4C0.895431 4 0 3.10457 0 2C0 0.895431 0.895431 0 2 0C3.10457 0 4 0.895431 4 2ZM9.5 2C9.5 2.82843 8.82843 3.5 8 3.5C7.17157 3.5 6.5 2.82843 6.5 2C6.5 1.17157 7.17157 0.5 8 0.5C8.82843 0.5 9.5 1.17157 9.5 2ZM10 2C10 3.10457 9.10457 4 8 4C6.89543 4 6 3.10457 6 2C6 0.895431 6.89543 0 8 0C9.10457 0 10 0.895431 10 2ZM8 9.5C8.82843 9.5 9.5 8.82843 9.5 8C9.5 7.17157 8.82843 6.5 8 6.5C7.17157 6.5 6.5 7.17157 6.5 8C6.5 8.82843 7.17157 9.5 8 9.5ZM8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10ZM3.5 8C3.5 8.82843 2.82843 9.5 2 9.5C1.17157 9.5 0.5 8.82843 0.5 8C0.5 7.17157 1.17157 6.5 2 6.5C2.82843 6.5 3.5 7.17157 3.5 8ZM4 8C4 9.10457 3.10457 10 2 10C0.895431 10 0 9.10457 0 8C0 6.89543 0.895431 6 2 6C3.10457 6 4 6.89543 4 8ZM2 15.5C2.82843 15.5 3.5 14.8284 3.5 14C3.5 13.1716 2.82843 12.5 2 12.5C1.17157 12.5 0.5 13.1716 0.5 14C0.5 14.8284 1.17157 15.5 2 15.5ZM2 16C3.10457 16 4 15.1046 4 14C4 12.8954 3.10457 12 2 12C0.895431 12 0 12.8954 0 14C0 15.1046 0.895431 16 2 16ZM9.5 14C9.5 14.8284 8.82843 15.5 8 15.5C7.17157 15.5 6.5 14.8284 6.5 14C6.5 13.1716 7.17157 12.5 8 12.5C8.82843 12.5 9.5 13.1716 9.5 14ZM10 14C10 15.1046 9.10457 16 8 16C6.89543 16 6 15.1046 6 14C6 12.8954 6.89543 12 8 12C9.10457 12 10 12.8954 10 14Z"
-                        fill="url(#paint0_linear)"
-                        fill-rule="evenodd"
-                        style="transform:translate(7px, 4px)"
-                      />
-                      <defs>
-                        <linearGradient
-                          gradientUnits="userSpaceOnUse"
-                          id="paint0_linear"
-                          x1="0"
-                          x2="16.0896"
-                          y1="0"
-                          y2="10.4478"
-                        >
-                          <stop
-                            stop-color="#06847B"
-                          />
-                          <stop
-                            offset="1"
-                            stop-color="#3EE7CD"
-                          />
-                        </linearGradient>
-                      </defs>
-                    </svg>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnAdmin-id"
-                  >
-                    john-doe
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnStore-id"
-                  >
-                    John Doe
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-iconCell-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root-id"
+                        focusable="false"
+                        role="presentation"
+                        viewBox="0 0 24 24"
                       >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
-                          focusable="false"
-                          role="presentation"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                          />
-                        </svg>
-                      </span>
-                    </button>
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnDrag-id"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
+                        <path
+                          clip-rule="evenodd"
+                          d="M3.5 2C3.5 2.82843 2.82843 3.5 2 3.5C1.17157 3.5 0.5 2.82843 0.5 2C0.5 1.17157 1.17157 0.5 2 0.5C2.82843 0.5 3.5 1.17157 3.5 2ZM4 2C4 3.10457 3.10457 4 2 4C0.895431 4 0 3.10457 0 2C0 0.895431 0.895431 0 2 0C3.10457 0 4 0.895431 4 2ZM9.5 2C9.5 2.82843 8.82843 3.5 8 3.5C7.17157 3.5 6.5 2.82843 6.5 2C6.5 1.17157 7.17157 0.5 8 0.5C8.82843 0.5 9.5 1.17157 9.5 2ZM10 2C10 3.10457 9.10457 4 8 4C6.89543 4 6 3.10457 6 2C6 0.895431 6.89543 0 8 0C9.10457 0 10 0.895431 10 2ZM8 9.5C8.82843 9.5 9.5 8.82843 9.5 8C9.5 7.17157 8.82843 6.5 8 6.5C7.17157 6.5 6.5 7.17157 6.5 8C6.5 8.82843 7.17157 9.5 8 9.5ZM8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10ZM3.5 8C3.5 8.82843 2.82843 9.5 2 9.5C1.17157 9.5 0.5 8.82843 0.5 8C0.5 7.17157 1.17157 6.5 2 6.5C2.82843 6.5 3.5 7.17157 3.5 8ZM4 8C4 9.10457 3.10457 10 2 10C0.895431 10 0 9.10457 0 8C0 6.89543 0.895431 6 2 6C3.10457 6 4 6.89543 4 8ZM2 15.5C2.82843 15.5 3.5 14.8284 3.5 14C3.5 13.1716 2.82843 12.5 2 12.5C1.17157 12.5 0.5 13.1716 0.5 14C0.5 14.8284 1.17157 15.5 2 15.5ZM2 16C3.10457 16 4 15.1046 4 14C4 12.8954 3.10457 12 2 12C0.895431 12 0 12.8954 0 14C0 15.1046 0.895431 16 2 16ZM9.5 14C9.5 14.8284 8.82843 15.5 8 15.5C7.17157 15.5 6.5 14.8284 6.5 14C6.5 13.1716 7.17157 12.5 8 12.5C8.82843 12.5 9.5 13.1716 9.5 14ZM10 14C10 15.1046 9.10457 16 8 16C6.89543 16 6 15.1046 6 14C6 12.8954 6.89543 12 8 12C9.10457 12 10 12.8954 10 14Z"
+                          fill="url(#paint0_linear)"
+                          fill-rule="evenodd"
+                          style="transform:translate(7px, 4px)"
+                        />
+                        <defs>
+                          <linearGradient
+                            gradientUnits="userSpaceOnUse"
+                            id="paint0_linear"
+                            x1="0"
+                            x2="16.0896"
+                            y1="0"
+                            y2="10.4478"
+                          >
+                            <stop
+                              stop-color="#06847B"
+                            />
+                            <stop
+                              offset="1"
+                              stop-color="#3EE7CD"
+                            />
+                          </linearGradient>
+                        </defs>
+                      </svg>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnAdmin-id"
                     >
-                      <path
-                        clip-rule="evenodd"
-                        d="M3.5 2C3.5 2.82843 2.82843 3.5 2 3.5C1.17157 3.5 0.5 2.82843 0.5 2C0.5 1.17157 1.17157 0.5 2 0.5C2.82843 0.5 3.5 1.17157 3.5 2ZM4 2C4 3.10457 3.10457 4 2 4C0.895431 4 0 3.10457 0 2C0 0.895431 0.895431 0 2 0C3.10457 0 4 0.895431 4 2ZM9.5 2C9.5 2.82843 8.82843 3.5 8 3.5C7.17157 3.5 6.5 2.82843 6.5 2C6.5 1.17157 7.17157 0.5 8 0.5C8.82843 0.5 9.5 1.17157 9.5 2ZM10 2C10 3.10457 9.10457 4 8 4C6.89543 4 6 3.10457 6 2C6 0.895431 6.89543 0 8 0C9.10457 0 10 0.895431 10 2ZM8 9.5C8.82843 9.5 9.5 8.82843 9.5 8C9.5 7.17157 8.82843 6.5 8 6.5C7.17157 6.5 6.5 7.17157 6.5 8C6.5 8.82843 7.17157 9.5 8 9.5ZM8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10ZM3.5 8C3.5 8.82843 2.82843 9.5 2 9.5C1.17157 9.5 0.5 8.82843 0.5 8C0.5 7.17157 1.17157 6.5 2 6.5C2.82843 6.5 3.5 7.17157 3.5 8ZM4 8C4 9.10457 3.10457 10 2 10C0.895431 10 0 9.10457 0 8C0 6.89543 0.895431 6 2 6C3.10457 6 4 6.89543 4 8ZM2 15.5C2.82843 15.5 3.5 14.8284 3.5 14C3.5 13.1716 2.82843 12.5 2 12.5C1.17157 12.5 0.5 13.1716 0.5 14C0.5 14.8284 1.17157 15.5 2 15.5ZM2 16C3.10457 16 4 15.1046 4 14C4 12.8954 3.10457 12 2 12C0.895431 12 0 12.8954 0 14C0 15.1046 0.895431 16 2 16ZM9.5 14C9.5 14.8284 8.82843 15.5 8 15.5C7.17157 15.5 6.5 14.8284 6.5 14C6.5 13.1716 7.17157 12.5 8 12.5C8.82843 12.5 9.5 13.1716 9.5 14ZM10 14C10 15.1046 9.10457 16 8 16C6.89543 16 6 15.1046 6 14C6 12.8954 6.89543 12 8 12C9.10457 12 10 12.8954 10 14Z"
-                        fill="url(#paint0_linear)"
-                        fill-rule="evenodd"
-                        style="transform:translate(7px, 4px)"
-                      />
-                      <defs>
-                        <linearGradient
-                          gradientUnits="userSpaceOnUse"
-                          id="paint0_linear"
-                          x1="0"
-                          x2="16.0896"
-                          y1="0"
-                          y2="10.4478"
-                        >
-                          <stop
-                            stop-color="#06847B"
-                          />
-                          <stop
-                            offset="1"
-                            stop-color="#3EE7CD"
-                          />
-                        </linearGradient>
-                      </defs>
-                    </svg>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnAdmin-id"
-                  >
-                    milionare-pirate
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnStore-id"
-                  >
-                    Milionare Pirate
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-iconCell-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id"
-                      tabindex="0"
-                      type="button"
+                      john-doe
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnStore-id"
                     >
-                      <span
-                        class="MuiIconButton-label-id"
+                      John Doe
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-iconCell-id"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id MuiIconButton-root-id"
+                        tabindex="0"
+                        type="button"
                       >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
-                          focusable="false"
-                          role="presentation"
-                          viewBox="0 0 24 24"
+                        <span
+                          class="MuiIconButton-label-id"
                         >
-                          <path
-                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                          />
-                        </svg>
-                      </span>
-                    </button>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </td>
+                  </tr>
+                  <tr
+                    class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                  >
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnDrag-id"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root-id"
+                        focusable="false"
+                        role="presentation"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          clip-rule="evenodd"
+                          d="M3.5 2C3.5 2.82843 2.82843 3.5 2 3.5C1.17157 3.5 0.5 2.82843 0.5 2C0.5 1.17157 1.17157 0.5 2 0.5C2.82843 0.5 3.5 1.17157 3.5 2ZM4 2C4 3.10457 3.10457 4 2 4C0.895431 4 0 3.10457 0 2C0 0.895431 0.895431 0 2 0C3.10457 0 4 0.895431 4 2ZM9.5 2C9.5 2.82843 8.82843 3.5 8 3.5C7.17157 3.5 6.5 2.82843 6.5 2C6.5 1.17157 7.17157 0.5 8 0.5C8.82843 0.5 9.5 1.17157 9.5 2ZM10 2C10 3.10457 9.10457 4 8 4C6.89543 4 6 3.10457 6 2C6 0.895431 6.89543 0 8 0C9.10457 0 10 0.895431 10 2ZM8 9.5C8.82843 9.5 9.5 8.82843 9.5 8C9.5 7.17157 8.82843 6.5 8 6.5C7.17157 6.5 6.5 7.17157 6.5 8C6.5 8.82843 7.17157 9.5 8 9.5ZM8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10ZM3.5 8C3.5 8.82843 2.82843 9.5 2 9.5C1.17157 9.5 0.5 8.82843 0.5 8C0.5 7.17157 1.17157 6.5 2 6.5C2.82843 6.5 3.5 7.17157 3.5 8ZM4 8C4 9.10457 3.10457 10 2 10C0.895431 10 0 9.10457 0 8C0 6.89543 0.895431 6 2 6C3.10457 6 4 6.89543 4 8ZM2 15.5C2.82843 15.5 3.5 14.8284 3.5 14C3.5 13.1716 2.82843 12.5 2 12.5C1.17157 12.5 0.5 13.1716 0.5 14C0.5 14.8284 1.17157 15.5 2 15.5ZM2 16C3.10457 16 4 15.1046 4 14C4 12.8954 3.10457 12 2 12C0.895431 12 0 12.8954 0 14C0 15.1046 0.895431 16 2 16ZM9.5 14C9.5 14.8284 8.82843 15.5 8 15.5C7.17157 15.5 6.5 14.8284 6.5 14C6.5 13.1716 7.17157 12.5 8 12.5C8.82843 12.5 9.5 13.1716 9.5 14ZM10 14C10 15.1046 9.10457 16 8 16C6.89543 16 6 15.1046 6 14C6 12.8954 6.89543 12 8 12C9.10457 12 10 12.8954 10 14Z"
+                          fill="url(#paint0_linear)"
+                          fill-rule="evenodd"
+                          style="transform:translate(7px, 4px)"
+                        />
+                        <defs>
+                          <linearGradient
+                            gradientUnits="userSpaceOnUse"
+                            id="paint0_linear"
+                            x1="0"
+                            x2="16.0896"
+                            y1="0"
+                            y2="10.4478"
+                          >
+                            <stop
+                              stop-color="#06847B"
+                            />
+                            <stop
+                              offset="1"
+                              stop-color="#3EE7CD"
+                            />
+                          </linearGradient>
+                        </defs>
+                      </svg>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnAdmin-id"
+                    >
+                      milionare-pirate
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnStore-id"
+                    >
+                      Milionare Pirate
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-iconCell-id"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id MuiIconButton-root-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiIconButton-label-id"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
           </div>
         </div>
         <div>
@@ -9700,10 +9744,10 @@ exports[`Storyshots Views / Attributes / Attribute details loading 1`] = `
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -9716,7 +9760,7 @@ exports[`Storyshots Views / Attributes / Attribute details loading 1`] = `
           </span>
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -9952,127 +9996,131 @@ exports[`Storyshots Views / Attributes / Attribute details loading 1`] = `
             <hr
               class="makeStyles-hr-id"
             />
-            <table
-              class="MuiTable-root-id"
+            <div
+              class="ResponsiveTable-root-id"
             >
-              <thead
-                class="MuiTableHead-root-id"
+              <table
+                class="MuiTable-root-id"
               >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
+                <thead
+                  class="MuiTableHead-root-id"
                 >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-columnDrag-id"
-                    scope="col"
-                  />
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-columnAdmin-id"
-                    scope="col"
+                  <tr
+                    class="MuiTableRow-root-id MuiTableRow-head-id"
                   >
-                    Admin
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-columnStore-id"
-                    scope="col"
-                  >
-                    Default Store View
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id"
-                    scope="col"
-                  />
-                </tr>
-              </thead>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id"
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-columnDrag-id"
+                      scope="col"
+                    />
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-columnAdmin-id"
+                      scope="col"
+                    >
+                      Admin
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-columnStore-id"
+                      scope="col"
+                    >
+                      Default Store View
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id"
+                      scope="col"
+                    />
+                  </tr>
+                </thead>
+                <tbody
+                  class="MuiTableBody-root-id"
                 >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnDrag-id"
+                  <tr
+                    class="MuiTableRow-root-id"
                   >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnDrag-id"
                     >
-                      <path
-                        clip-rule="evenodd"
-                        d="M3.5 2C3.5 2.82843 2.82843 3.5 2 3.5C1.17157 3.5 0.5 2.82843 0.5 2C0.5 1.17157 1.17157 0.5 2 0.5C2.82843 0.5 3.5 1.17157 3.5 2ZM4 2C4 3.10457 3.10457 4 2 4C0.895431 4 0 3.10457 0 2C0 0.895431 0.895431 0 2 0C3.10457 0 4 0.895431 4 2ZM9.5 2C9.5 2.82843 8.82843 3.5 8 3.5C7.17157 3.5 6.5 2.82843 6.5 2C6.5 1.17157 7.17157 0.5 8 0.5C8.82843 0.5 9.5 1.17157 9.5 2ZM10 2C10 3.10457 9.10457 4 8 4C6.89543 4 6 3.10457 6 2C6 0.895431 6.89543 0 8 0C9.10457 0 10 0.895431 10 2ZM8 9.5C8.82843 9.5 9.5 8.82843 9.5 8C9.5 7.17157 8.82843 6.5 8 6.5C7.17157 6.5 6.5 7.17157 6.5 8C6.5 8.82843 7.17157 9.5 8 9.5ZM8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10ZM3.5 8C3.5 8.82843 2.82843 9.5 2 9.5C1.17157 9.5 0.5 8.82843 0.5 8C0.5 7.17157 1.17157 6.5 2 6.5C2.82843 6.5 3.5 7.17157 3.5 8ZM4 8C4 9.10457 3.10457 10 2 10C0.895431 10 0 9.10457 0 8C0 6.89543 0.895431 6 2 6C3.10457 6 4 6.89543 4 8ZM2 15.5C2.82843 15.5 3.5 14.8284 3.5 14C3.5 13.1716 2.82843 12.5 2 12.5C1.17157 12.5 0.5 13.1716 0.5 14C0.5 14.8284 1.17157 15.5 2 15.5ZM2 16C3.10457 16 4 15.1046 4 14C4 12.8954 3.10457 12 2 12C0.895431 12 0 12.8954 0 14C0 15.1046 0.895431 16 2 16ZM9.5 14C9.5 14.8284 8.82843 15.5 8 15.5C7.17157 15.5 6.5 14.8284 6.5 14C6.5 13.1716 7.17157 12.5 8 12.5C8.82843 12.5 9.5 13.1716 9.5 14ZM10 14C10 15.1046 9.10457 16 8 16C6.89543 16 6 15.1046 6 14C6 12.8954 6.89543 12 8 12C9.10457 12 10 12.8954 10 14Z"
-                        fill="url(#paint0_linear)"
-                        fill-rule="evenodd"
-                        style="transform:translate(7px, 4px)"
-                      />
-                      <defs>
-                        <linearGradient
-                          gradientUnits="userSpaceOnUse"
-                          id="paint0_linear"
-                          x1="0"
-                          x2="16.0896"
-                          y1="0"
-                          y2="10.4478"
-                        >
-                          <stop
-                            stop-color="#06847B"
-                          />
-                          <stop
-                            offset="1"
-                            stop-color="#3EE7CD"
-                          />
-                        </linearGradient>
-                      </defs>
-                    </svg>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnAdmin-id"
-                  >
-                    <span
-                      class="makeStyles-skeleton-id"
-                    >
-                      ‌
-                    </span>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnStore-id"
-                  >
-                    <span
-                      class="makeStyles-skeleton-id"
-                    >
-                      ‌
-                    </span>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-iconCell-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root-id"
+                        focusable="false"
+                        role="presentation"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          clip-rule="evenodd"
+                          d="M3.5 2C3.5 2.82843 2.82843 3.5 2 3.5C1.17157 3.5 0.5 2.82843 0.5 2C0.5 1.17157 1.17157 0.5 2 0.5C2.82843 0.5 3.5 1.17157 3.5 2ZM4 2C4 3.10457 3.10457 4 2 4C0.895431 4 0 3.10457 0 2C0 0.895431 0.895431 0 2 0C3.10457 0 4 0.895431 4 2ZM9.5 2C9.5 2.82843 8.82843 3.5 8 3.5C7.17157 3.5 6.5 2.82843 6.5 2C6.5 1.17157 7.17157 0.5 8 0.5C8.82843 0.5 9.5 1.17157 9.5 2ZM10 2C10 3.10457 9.10457 4 8 4C6.89543 4 6 3.10457 6 2C6 0.895431 6.89543 0 8 0C9.10457 0 10 0.895431 10 2ZM8 9.5C8.82843 9.5 9.5 8.82843 9.5 8C9.5 7.17157 8.82843 6.5 8 6.5C7.17157 6.5 6.5 7.17157 6.5 8C6.5 8.82843 7.17157 9.5 8 9.5ZM8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10ZM3.5 8C3.5 8.82843 2.82843 9.5 2 9.5C1.17157 9.5 0.5 8.82843 0.5 8C0.5 7.17157 1.17157 6.5 2 6.5C2.82843 6.5 3.5 7.17157 3.5 8ZM4 8C4 9.10457 3.10457 10 2 10C0.895431 10 0 9.10457 0 8C0 6.89543 0.895431 6 2 6C3.10457 6 4 6.89543 4 8ZM2 15.5C2.82843 15.5 3.5 14.8284 3.5 14C3.5 13.1716 2.82843 12.5 2 12.5C1.17157 12.5 0.5 13.1716 0.5 14C0.5 14.8284 1.17157 15.5 2 15.5ZM2 16C3.10457 16 4 15.1046 4 14C4 12.8954 3.10457 12 2 12C0.895431 12 0 12.8954 0 14C0 15.1046 0.895431 16 2 16ZM9.5 14C9.5 14.8284 8.82843 15.5 8 15.5C7.17157 15.5 6.5 14.8284 6.5 14C6.5 13.1716 7.17157 12.5 8 12.5C8.82843 12.5 9.5 13.1716 9.5 14ZM10 14C10 15.1046 9.10457 16 8 16C6.89543 16 6 15.1046 6 14C6 12.8954 6.89543 12 8 12C9.10457 12 10 12.8954 10 14Z"
+                          fill="url(#paint0_linear)"
+                          fill-rule="evenodd"
+                          style="transform:translate(7px, 4px)"
+                        />
+                        <defs>
+                          <linearGradient
+                            gradientUnits="userSpaceOnUse"
+                            id="paint0_linear"
+                            x1="0"
+                            x2="16.0896"
+                            y1="0"
+                            y2="10.4478"
+                          >
+                            <stop
+                              stop-color="#06847B"
+                            />
+                            <stop
+                              offset="1"
+                              stop-color="#3EE7CD"
+                            />
+                          </linearGradient>
+                        </defs>
+                      </svg>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnAdmin-id"
                     >
                       <span
-                        class="MuiIconButton-label-id"
+                        class="makeStyles-skeleton-id"
                       >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
-                          focusable="false"
-                          role="presentation"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                          />
-                        </svg>
+                        ‌
                       </span>
-                    </button>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnStore-id"
+                    >
+                      <span
+                        class="makeStyles-skeleton-id"
+                      >
+                        ‌
+                      </span>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-iconCell-id"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                        disabled=""
+                        tabindex="-1"
+                        type="button"
+                      >
+                        <span
+                          class="MuiIconButton-label-id"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
           </div>
         </div>
         <div>
@@ -10284,10 +10332,10 @@ exports[`Storyshots Views / Attributes / Attribute details multiple select input
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -10295,7 +10343,7 @@ exports[`Storyshots Views / Attributes / Attribute details multiple select input
           Author
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -10527,194 +10575,198 @@ exports[`Storyshots Views / Attributes / Attribute details multiple select input
             <hr
               class="makeStyles-hr-id"
             />
-            <table
-              class="MuiTable-root-id"
+            <div
+              class="ResponsiveTable-root-id"
             >
-              <thead
-                class="MuiTableHead-root-id"
+              <table
+                class="MuiTable-root-id"
               >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
+                <thead
+                  class="MuiTableHead-root-id"
                 >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-columnDrag-id"
-                    scope="col"
-                  />
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-columnAdmin-id"
-                    scope="col"
+                  <tr
+                    class="MuiTableRow-root-id MuiTableRow-head-id"
                   >
-                    Admin
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-columnStore-id"
-                    scope="col"
-                  >
-                    Default Store View
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id"
-                    scope="col"
-                  />
-                </tr>
-              </thead>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-columnDrag-id"
+                      scope="col"
+                    />
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-columnAdmin-id"
+                      scope="col"
+                    >
+                      Admin
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-columnStore-id"
+                      scope="col"
+                    >
+                      Default Store View
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id"
+                      scope="col"
+                    />
+                  </tr>
+                </thead>
+                <tbody
+                  class="MuiTableBody-root-id"
                 >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnDrag-id"
+                  <tr
+                    class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
                   >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnDrag-id"
                     >
-                      <path
-                        clip-rule="evenodd"
-                        d="M3.5 2C3.5 2.82843 2.82843 3.5 2 3.5C1.17157 3.5 0.5 2.82843 0.5 2C0.5 1.17157 1.17157 0.5 2 0.5C2.82843 0.5 3.5 1.17157 3.5 2ZM4 2C4 3.10457 3.10457 4 2 4C0.895431 4 0 3.10457 0 2C0 0.895431 0.895431 0 2 0C3.10457 0 4 0.895431 4 2ZM9.5 2C9.5 2.82843 8.82843 3.5 8 3.5C7.17157 3.5 6.5 2.82843 6.5 2C6.5 1.17157 7.17157 0.5 8 0.5C8.82843 0.5 9.5 1.17157 9.5 2ZM10 2C10 3.10457 9.10457 4 8 4C6.89543 4 6 3.10457 6 2C6 0.895431 6.89543 0 8 0C9.10457 0 10 0.895431 10 2ZM8 9.5C8.82843 9.5 9.5 8.82843 9.5 8C9.5 7.17157 8.82843 6.5 8 6.5C7.17157 6.5 6.5 7.17157 6.5 8C6.5 8.82843 7.17157 9.5 8 9.5ZM8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10ZM3.5 8C3.5 8.82843 2.82843 9.5 2 9.5C1.17157 9.5 0.5 8.82843 0.5 8C0.5 7.17157 1.17157 6.5 2 6.5C2.82843 6.5 3.5 7.17157 3.5 8ZM4 8C4 9.10457 3.10457 10 2 10C0.895431 10 0 9.10457 0 8C0 6.89543 0.895431 6 2 6C3.10457 6 4 6.89543 4 8ZM2 15.5C2.82843 15.5 3.5 14.8284 3.5 14C3.5 13.1716 2.82843 12.5 2 12.5C1.17157 12.5 0.5 13.1716 0.5 14C0.5 14.8284 1.17157 15.5 2 15.5ZM2 16C3.10457 16 4 15.1046 4 14C4 12.8954 3.10457 12 2 12C0.895431 12 0 12.8954 0 14C0 15.1046 0.895431 16 2 16ZM9.5 14C9.5 14.8284 8.82843 15.5 8 15.5C7.17157 15.5 6.5 14.8284 6.5 14C6.5 13.1716 7.17157 12.5 8 12.5C8.82843 12.5 9.5 13.1716 9.5 14ZM10 14C10 15.1046 9.10457 16 8 16C6.89543 16 6 15.1046 6 14C6 12.8954 6.89543 12 8 12C9.10457 12 10 12.8954 10 14Z"
-                        fill="url(#paint0_linear)"
-                        fill-rule="evenodd"
-                        style="transform:translate(7px, 4px)"
-                      />
-                      <defs>
-                        <linearGradient
-                          gradientUnits="userSpaceOnUse"
-                          id="paint0_linear"
-                          x1="0"
-                          x2="16.0896"
-                          y1="0"
-                          y2="10.4478"
-                        >
-                          <stop
-                            stop-color="#06847B"
-                          />
-                          <stop
-                            offset="1"
-                            stop-color="#3EE7CD"
-                          />
-                        </linearGradient>
-                      </defs>
-                    </svg>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnAdmin-id"
-                  >
-                    john-doe
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnStore-id"
-                  >
-                    John Doe
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-iconCell-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root-id"
+                        focusable="false"
+                        role="presentation"
+                        viewBox="0 0 24 24"
                       >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
-                          focusable="false"
-                          role="presentation"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                          />
-                        </svg>
-                      </span>
-                    </button>
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnDrag-id"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
+                        <path
+                          clip-rule="evenodd"
+                          d="M3.5 2C3.5 2.82843 2.82843 3.5 2 3.5C1.17157 3.5 0.5 2.82843 0.5 2C0.5 1.17157 1.17157 0.5 2 0.5C2.82843 0.5 3.5 1.17157 3.5 2ZM4 2C4 3.10457 3.10457 4 2 4C0.895431 4 0 3.10457 0 2C0 0.895431 0.895431 0 2 0C3.10457 0 4 0.895431 4 2ZM9.5 2C9.5 2.82843 8.82843 3.5 8 3.5C7.17157 3.5 6.5 2.82843 6.5 2C6.5 1.17157 7.17157 0.5 8 0.5C8.82843 0.5 9.5 1.17157 9.5 2ZM10 2C10 3.10457 9.10457 4 8 4C6.89543 4 6 3.10457 6 2C6 0.895431 6.89543 0 8 0C9.10457 0 10 0.895431 10 2ZM8 9.5C8.82843 9.5 9.5 8.82843 9.5 8C9.5 7.17157 8.82843 6.5 8 6.5C7.17157 6.5 6.5 7.17157 6.5 8C6.5 8.82843 7.17157 9.5 8 9.5ZM8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10ZM3.5 8C3.5 8.82843 2.82843 9.5 2 9.5C1.17157 9.5 0.5 8.82843 0.5 8C0.5 7.17157 1.17157 6.5 2 6.5C2.82843 6.5 3.5 7.17157 3.5 8ZM4 8C4 9.10457 3.10457 10 2 10C0.895431 10 0 9.10457 0 8C0 6.89543 0.895431 6 2 6C3.10457 6 4 6.89543 4 8ZM2 15.5C2.82843 15.5 3.5 14.8284 3.5 14C3.5 13.1716 2.82843 12.5 2 12.5C1.17157 12.5 0.5 13.1716 0.5 14C0.5 14.8284 1.17157 15.5 2 15.5ZM2 16C3.10457 16 4 15.1046 4 14C4 12.8954 3.10457 12 2 12C0.895431 12 0 12.8954 0 14C0 15.1046 0.895431 16 2 16ZM9.5 14C9.5 14.8284 8.82843 15.5 8 15.5C7.17157 15.5 6.5 14.8284 6.5 14C6.5 13.1716 7.17157 12.5 8 12.5C8.82843 12.5 9.5 13.1716 9.5 14ZM10 14C10 15.1046 9.10457 16 8 16C6.89543 16 6 15.1046 6 14C6 12.8954 6.89543 12 8 12C9.10457 12 10 12.8954 10 14Z"
+                          fill="url(#paint0_linear)"
+                          fill-rule="evenodd"
+                          style="transform:translate(7px, 4px)"
+                        />
+                        <defs>
+                          <linearGradient
+                            gradientUnits="userSpaceOnUse"
+                            id="paint0_linear"
+                            x1="0"
+                            x2="16.0896"
+                            y1="0"
+                            y2="10.4478"
+                          >
+                            <stop
+                              stop-color="#06847B"
+                            />
+                            <stop
+                              offset="1"
+                              stop-color="#3EE7CD"
+                            />
+                          </linearGradient>
+                        </defs>
+                      </svg>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnAdmin-id"
                     >
-                      <path
-                        clip-rule="evenodd"
-                        d="M3.5 2C3.5 2.82843 2.82843 3.5 2 3.5C1.17157 3.5 0.5 2.82843 0.5 2C0.5 1.17157 1.17157 0.5 2 0.5C2.82843 0.5 3.5 1.17157 3.5 2ZM4 2C4 3.10457 3.10457 4 2 4C0.895431 4 0 3.10457 0 2C0 0.895431 0.895431 0 2 0C3.10457 0 4 0.895431 4 2ZM9.5 2C9.5 2.82843 8.82843 3.5 8 3.5C7.17157 3.5 6.5 2.82843 6.5 2C6.5 1.17157 7.17157 0.5 8 0.5C8.82843 0.5 9.5 1.17157 9.5 2ZM10 2C10 3.10457 9.10457 4 8 4C6.89543 4 6 3.10457 6 2C6 0.895431 6.89543 0 8 0C9.10457 0 10 0.895431 10 2ZM8 9.5C8.82843 9.5 9.5 8.82843 9.5 8C9.5 7.17157 8.82843 6.5 8 6.5C7.17157 6.5 6.5 7.17157 6.5 8C6.5 8.82843 7.17157 9.5 8 9.5ZM8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10ZM3.5 8C3.5 8.82843 2.82843 9.5 2 9.5C1.17157 9.5 0.5 8.82843 0.5 8C0.5 7.17157 1.17157 6.5 2 6.5C2.82843 6.5 3.5 7.17157 3.5 8ZM4 8C4 9.10457 3.10457 10 2 10C0.895431 10 0 9.10457 0 8C0 6.89543 0.895431 6 2 6C3.10457 6 4 6.89543 4 8ZM2 15.5C2.82843 15.5 3.5 14.8284 3.5 14C3.5 13.1716 2.82843 12.5 2 12.5C1.17157 12.5 0.5 13.1716 0.5 14C0.5 14.8284 1.17157 15.5 2 15.5ZM2 16C3.10457 16 4 15.1046 4 14C4 12.8954 3.10457 12 2 12C0.895431 12 0 12.8954 0 14C0 15.1046 0.895431 16 2 16ZM9.5 14C9.5 14.8284 8.82843 15.5 8 15.5C7.17157 15.5 6.5 14.8284 6.5 14C6.5 13.1716 7.17157 12.5 8 12.5C8.82843 12.5 9.5 13.1716 9.5 14ZM10 14C10 15.1046 9.10457 16 8 16C6.89543 16 6 15.1046 6 14C6 12.8954 6.89543 12 8 12C9.10457 12 10 12.8954 10 14Z"
-                        fill="url(#paint0_linear)"
-                        fill-rule="evenodd"
-                        style="transform:translate(7px, 4px)"
-                      />
-                      <defs>
-                        <linearGradient
-                          gradientUnits="userSpaceOnUse"
-                          id="paint0_linear"
-                          x1="0"
-                          x2="16.0896"
-                          y1="0"
-                          y2="10.4478"
-                        >
-                          <stop
-                            stop-color="#06847B"
-                          />
-                          <stop
-                            offset="1"
-                            stop-color="#3EE7CD"
-                          />
-                        </linearGradient>
-                      </defs>
-                    </svg>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnAdmin-id"
-                  >
-                    milionare-pirate
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnStore-id"
-                  >
-                    Milionare Pirate
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-iconCell-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id"
-                      tabindex="0"
-                      type="button"
+                      john-doe
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnStore-id"
                     >
-                      <span
-                        class="MuiIconButton-label-id"
+                      John Doe
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-iconCell-id"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id MuiIconButton-root-id"
+                        tabindex="0"
+                        type="button"
                       >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
-                          focusable="false"
-                          role="presentation"
-                          viewBox="0 0 24 24"
+                        <span
+                          class="MuiIconButton-label-id"
                         >
-                          <path
-                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                          />
-                        </svg>
-                      </span>
-                    </button>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </td>
+                  </tr>
+                  <tr
+                    class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                  >
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnDrag-id"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root-id"
+                        focusable="false"
+                        role="presentation"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          clip-rule="evenodd"
+                          d="M3.5 2C3.5 2.82843 2.82843 3.5 2 3.5C1.17157 3.5 0.5 2.82843 0.5 2C0.5 1.17157 1.17157 0.5 2 0.5C2.82843 0.5 3.5 1.17157 3.5 2ZM4 2C4 3.10457 3.10457 4 2 4C0.895431 4 0 3.10457 0 2C0 0.895431 0.895431 0 2 0C3.10457 0 4 0.895431 4 2ZM9.5 2C9.5 2.82843 8.82843 3.5 8 3.5C7.17157 3.5 6.5 2.82843 6.5 2C6.5 1.17157 7.17157 0.5 8 0.5C8.82843 0.5 9.5 1.17157 9.5 2ZM10 2C10 3.10457 9.10457 4 8 4C6.89543 4 6 3.10457 6 2C6 0.895431 6.89543 0 8 0C9.10457 0 10 0.895431 10 2ZM8 9.5C8.82843 9.5 9.5 8.82843 9.5 8C9.5 7.17157 8.82843 6.5 8 6.5C7.17157 6.5 6.5 7.17157 6.5 8C6.5 8.82843 7.17157 9.5 8 9.5ZM8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10ZM3.5 8C3.5 8.82843 2.82843 9.5 2 9.5C1.17157 9.5 0.5 8.82843 0.5 8C0.5 7.17157 1.17157 6.5 2 6.5C2.82843 6.5 3.5 7.17157 3.5 8ZM4 8C4 9.10457 3.10457 10 2 10C0.895431 10 0 9.10457 0 8C0 6.89543 0.895431 6 2 6C3.10457 6 4 6.89543 4 8ZM2 15.5C2.82843 15.5 3.5 14.8284 3.5 14C3.5 13.1716 2.82843 12.5 2 12.5C1.17157 12.5 0.5 13.1716 0.5 14C0.5 14.8284 1.17157 15.5 2 15.5ZM2 16C3.10457 16 4 15.1046 4 14C4 12.8954 3.10457 12 2 12C0.895431 12 0 12.8954 0 14C0 15.1046 0.895431 16 2 16ZM9.5 14C9.5 14.8284 8.82843 15.5 8 15.5C7.17157 15.5 6.5 14.8284 6.5 14C6.5 13.1716 7.17157 12.5 8 12.5C8.82843 12.5 9.5 13.1716 9.5 14ZM10 14C10 15.1046 9.10457 16 8 16C6.89543 16 6 15.1046 6 14C6 12.8954 6.89543 12 8 12C9.10457 12 10 12.8954 10 14Z"
+                          fill="url(#paint0_linear)"
+                          fill-rule="evenodd"
+                          style="transform:translate(7px, 4px)"
+                        />
+                        <defs>
+                          <linearGradient
+                            gradientUnits="userSpaceOnUse"
+                            id="paint0_linear"
+                            x1="0"
+                            x2="16.0896"
+                            y1="0"
+                            y2="10.4478"
+                          >
+                            <stop
+                              stop-color="#06847B"
+                            />
+                            <stop
+                              offset="1"
+                              stop-color="#3EE7CD"
+                            />
+                          </linearGradient>
+                        </defs>
+                      </svg>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnAdmin-id"
+                    >
+                      milionare-pirate
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnStore-id"
+                    >
+                      Milionare Pirate
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-iconCell-id"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id MuiIconButton-root-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiIconButton-label-id"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
           </div>
         </div>
         <div>
@@ -10917,10 +10969,10 @@ exports[`Storyshots Views / Attributes / Attribute details no values 1`] = `
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -10928,7 +10980,7 @@ exports[`Storyshots Views / Attributes / Attribute details no values 1`] = `
           Author
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -11160,126 +11212,130 @@ exports[`Storyshots Views / Attributes / Attribute details no values 1`] = `
             <hr
               class="makeStyles-hr-id"
             />
-            <table
-              class="MuiTable-root-id"
+            <div
+              class="ResponsiveTable-root-id"
             >
-              <thead
-                class="MuiTableHead-root-id"
+              <table
+                class="MuiTable-root-id"
               >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
+                <thead
+                  class="MuiTableHead-root-id"
                 >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-columnDrag-id"
-                    scope="col"
-                  />
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-columnAdmin-id"
-                    scope="col"
+                  <tr
+                    class="MuiTableRow-root-id MuiTableRow-head-id"
                   >
-                    Admin
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-columnStore-id"
-                    scope="col"
-                  >
-                    Default Store View
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id"
-                    scope="col"
-                  />
-                </tr>
-              </thead>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id"
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-columnDrag-id"
+                      scope="col"
+                    />
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-columnAdmin-id"
+                      scope="col"
+                    >
+                      Admin
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-columnStore-id"
+                      scope="col"
+                    >
+                      Default Store View
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id"
+                      scope="col"
+                    />
+                  </tr>
+                </thead>
+                <tbody
+                  class="MuiTableBody-root-id"
                 >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnDrag-id"
+                  <tr
+                    class="MuiTableRow-root-id"
                   >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnDrag-id"
                     >
-                      <path
-                        clip-rule="evenodd"
-                        d="M3.5 2C3.5 2.82843 2.82843 3.5 2 3.5C1.17157 3.5 0.5 2.82843 0.5 2C0.5 1.17157 1.17157 0.5 2 0.5C2.82843 0.5 3.5 1.17157 3.5 2ZM4 2C4 3.10457 3.10457 4 2 4C0.895431 4 0 3.10457 0 2C0 0.895431 0.895431 0 2 0C3.10457 0 4 0.895431 4 2ZM9.5 2C9.5 2.82843 8.82843 3.5 8 3.5C7.17157 3.5 6.5 2.82843 6.5 2C6.5 1.17157 7.17157 0.5 8 0.5C8.82843 0.5 9.5 1.17157 9.5 2ZM10 2C10 3.10457 9.10457 4 8 4C6.89543 4 6 3.10457 6 2C6 0.895431 6.89543 0 8 0C9.10457 0 10 0.895431 10 2ZM8 9.5C8.82843 9.5 9.5 8.82843 9.5 8C9.5 7.17157 8.82843 6.5 8 6.5C7.17157 6.5 6.5 7.17157 6.5 8C6.5 8.82843 7.17157 9.5 8 9.5ZM8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10ZM3.5 8C3.5 8.82843 2.82843 9.5 2 9.5C1.17157 9.5 0.5 8.82843 0.5 8C0.5 7.17157 1.17157 6.5 2 6.5C2.82843 6.5 3.5 7.17157 3.5 8ZM4 8C4 9.10457 3.10457 10 2 10C0.895431 10 0 9.10457 0 8C0 6.89543 0.895431 6 2 6C3.10457 6 4 6.89543 4 8ZM2 15.5C2.82843 15.5 3.5 14.8284 3.5 14C3.5 13.1716 2.82843 12.5 2 12.5C1.17157 12.5 0.5 13.1716 0.5 14C0.5 14.8284 1.17157 15.5 2 15.5ZM2 16C3.10457 16 4 15.1046 4 14C4 12.8954 3.10457 12 2 12C0.895431 12 0 12.8954 0 14C0 15.1046 0.895431 16 2 16ZM9.5 14C9.5 14.8284 8.82843 15.5 8 15.5C7.17157 15.5 6.5 14.8284 6.5 14C6.5 13.1716 7.17157 12.5 8 12.5C8.82843 12.5 9.5 13.1716 9.5 14ZM10 14C10 15.1046 9.10457 16 8 16C6.89543 16 6 15.1046 6 14C6 12.8954 6.89543 12 8 12C9.10457 12 10 12.8954 10 14Z"
-                        fill="url(#paint0_linear)"
-                        fill-rule="evenodd"
-                        style="transform:translate(7px, 4px)"
-                      />
-                      <defs>
-                        <linearGradient
-                          gradientUnits="userSpaceOnUse"
-                          id="paint0_linear"
-                          x1="0"
-                          x2="16.0896"
-                          y1="0"
-                          y2="10.4478"
-                        >
-                          <stop
-                            stop-color="#06847B"
-                          />
-                          <stop
-                            offset="1"
-                            stop-color="#3EE7CD"
-                          />
-                        </linearGradient>
-                      </defs>
-                    </svg>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnAdmin-id"
-                  >
-                    <span
-                      class="makeStyles-skeleton-id"
-                    >
-                      ‌
-                    </span>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnStore-id"
-                  >
-                    <span
-                      class="makeStyles-skeleton-id"
-                    >
-                      ‌
-                    </span>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-iconCell-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id"
-                      tabindex="0"
-                      type="button"
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root-id"
+                        focusable="false"
+                        role="presentation"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          clip-rule="evenodd"
+                          d="M3.5 2C3.5 2.82843 2.82843 3.5 2 3.5C1.17157 3.5 0.5 2.82843 0.5 2C0.5 1.17157 1.17157 0.5 2 0.5C2.82843 0.5 3.5 1.17157 3.5 2ZM4 2C4 3.10457 3.10457 4 2 4C0.895431 4 0 3.10457 0 2C0 0.895431 0.895431 0 2 0C3.10457 0 4 0.895431 4 2ZM9.5 2C9.5 2.82843 8.82843 3.5 8 3.5C7.17157 3.5 6.5 2.82843 6.5 2C6.5 1.17157 7.17157 0.5 8 0.5C8.82843 0.5 9.5 1.17157 9.5 2ZM10 2C10 3.10457 9.10457 4 8 4C6.89543 4 6 3.10457 6 2C6 0.895431 6.89543 0 8 0C9.10457 0 10 0.895431 10 2ZM8 9.5C8.82843 9.5 9.5 8.82843 9.5 8C9.5 7.17157 8.82843 6.5 8 6.5C7.17157 6.5 6.5 7.17157 6.5 8C6.5 8.82843 7.17157 9.5 8 9.5ZM8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10ZM3.5 8C3.5 8.82843 2.82843 9.5 2 9.5C1.17157 9.5 0.5 8.82843 0.5 8C0.5 7.17157 1.17157 6.5 2 6.5C2.82843 6.5 3.5 7.17157 3.5 8ZM4 8C4 9.10457 3.10457 10 2 10C0.895431 10 0 9.10457 0 8C0 6.89543 0.895431 6 2 6C3.10457 6 4 6.89543 4 8ZM2 15.5C2.82843 15.5 3.5 14.8284 3.5 14C3.5 13.1716 2.82843 12.5 2 12.5C1.17157 12.5 0.5 13.1716 0.5 14C0.5 14.8284 1.17157 15.5 2 15.5ZM2 16C3.10457 16 4 15.1046 4 14C4 12.8954 3.10457 12 2 12C0.895431 12 0 12.8954 0 14C0 15.1046 0.895431 16 2 16ZM9.5 14C9.5 14.8284 8.82843 15.5 8 15.5C7.17157 15.5 6.5 14.8284 6.5 14C6.5 13.1716 7.17157 12.5 8 12.5C8.82843 12.5 9.5 13.1716 9.5 14ZM10 14C10 15.1046 9.10457 16 8 16C6.89543 16 6 15.1046 6 14C6 12.8954 6.89543 12 8 12C9.10457 12 10 12.8954 10 14Z"
+                          fill="url(#paint0_linear)"
+                          fill-rule="evenodd"
+                          style="transform:translate(7px, 4px)"
+                        />
+                        <defs>
+                          <linearGradient
+                            gradientUnits="userSpaceOnUse"
+                            id="paint0_linear"
+                            x1="0"
+                            x2="16.0896"
+                            y1="0"
+                            y2="10.4478"
+                          >
+                            <stop
+                              stop-color="#06847B"
+                            />
+                            <stop
+                              offset="1"
+                              stop-color="#3EE7CD"
+                            />
+                          </linearGradient>
+                        </defs>
+                      </svg>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnAdmin-id"
                     >
                       <span
-                        class="MuiIconButton-label-id"
+                        class="makeStyles-skeleton-id"
                       >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
-                          focusable="false"
-                          role="presentation"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                          />
-                        </svg>
+                        ‌
                       </span>
-                    </button>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnStore-id"
+                    >
+                      <span
+                        class="makeStyles-skeleton-id"
+                      >
+                        ‌
+                      </span>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-iconCell-id"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id MuiIconButton-root-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiIconButton-label-id"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
           </div>
         </div>
         <div>
@@ -11481,10 +11537,10 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = `
   style="padding:24px"
 >
   <div
-    class="makeStyles-root-id"
+    class="Container-root-id"
   >
     <div
-      class="makeStyles-root-id"
+      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
         class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -11492,7 +11548,7 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = `
         Attributes
       </div>
       <div
-        class="makeStyles-action-id"
+        class="ExtendedPageHeader-action-id"
       >
         <div
           class="makeStyles-root-id"
@@ -11588,805 +11644,809 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = `
       <hr
         class="makeStyles-root-id"
       />
-      <table
-        class="MuiTable-root-id"
+      <div
+        class="ResponsiveTable-root-id"
       >
-        <thead
-          class="MuiTableHead-root-id"
+        <table
+          class="MuiTable-root-id"
         >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-head-id"
+          <thead
+            class="MuiTableHead-root-id"
           >
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
-              scope="col"
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-head-id"
             >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
+                scope="col"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colSlug-id"
-              scope="col"
-            >
-              Attribute Code
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
-              scope="col"
-            >
-              Default Label
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colVisible-id"
-              scope="col"
-            >
-              Visible
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colSearchable-id"
-              scope="col"
-            >
-              Searchable
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colFaceted-id"
-              scope="col"
-            >
-              Use in faceted search
-            </th>
-          </tr>
-        </thead>
-        <tfoot
-          class="MuiTableFooter-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-footer-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
-              colspan="6"
-            >
-              <div
-                class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
-              >
-                <div
-                  class="makeStyles-spacer-id"
-                />
-                <div
-                  class="makeStyles-root-id"
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
                 >
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                    data-tc="button-pagination-back"
-                    disabled=""
-                    tabindex="-1"
-                    type="button"
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colSlug-id"
+                scope="col"
+              >
+                Attribute Code
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                scope="col"
+              >
+                Default Label
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colVisible-id"
+                scope="col"
+              >
+                Visible
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colSearchable-id"
+                scope="col"
+              >
+                Searchable
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colFaceted-id"
+                scope="col"
+              >
+                Use in faceted search
+              </th>
+            </tr>
+          </thead>
+          <tfoot
+            class="MuiTableFooter-root-id"
+          >
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-footer-id"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                colspan="6"
+              >
+                <div
+                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+                >
+                  <div
+                    class="makeStyles-spacer-id"
+                  />
+                  <div
+                    class="makeStyles-root-id"
                   >
-                    <span
-                      class="MuiIconButton-label-id"
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      data-tc="button-pagination-back"
+                      disabled=""
+                      tabindex="-1"
+                      type="button"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
+                      <span
+                        class="MuiIconButton-label-id"
                       >
-                        <path
-                          d="M14 7l-5 5 5 5V7z"
-                        />
-                        <path
-                          d="M24 0v24H0V0h24z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
-                    data-tc="button-pagination-next"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M14 7l-5 5 5 5V7z"
+                          />
+                          <path
+                            d="M24 0v24H0V0h24z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                      data-tc="button-pagination-next"
+                      tabindex="0"
+                      type="button"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
+                      <span
+                        class="MuiIconButton-label-id"
                       >
-                        <path
-                          d="M10 17l5-5-5-5v10z"
-                        />
-                        <path
-                          d="M0 24V0h24v24H0z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M10 17l5-5-5-5v10z"
+                          />
+                          <path
+                            d="M0 24V0h24v24H0z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </div>
                 </div>
-              </div>
-            </td>
-          </tr>
-        </tfoot>
-        <tbody
-          class="MuiTableBody-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-            data-tc="id"
-            data-tc-id="UHJvZHVjdEF0dHJpYnV0ZTo5"
-            data-tc-values="[{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjI0\\",\\"name\\":\\"John Doe\\",\\"slug\\":\\"john-doe\\",\\"sortOrder\\":0,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjI1\\",\\"name\\":\\"Milionare Pirate\\",\\"slug\\":\\"milionare-pirate\\",\\"sortOrder\\":1,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"}]"
+              </td>
+            </tr>
+          </tfoot>
+          <tbody
+            class="MuiTableBody-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+            <tr
+              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              data-tc="id"
+              data-tc-id="UHJvZHVjdEF0dHJpYnV0ZTo5"
+              data-tc-values="[{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjI0\\",\\"name\\":\\"John Doe\\",\\"slug\\":\\"john-doe\\",\\"sortOrder\\":0,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjI1\\",\\"name\\":\\"Milionare Pirate\\",\\"slug\\":\\"milionare-pirate\\",\\"sortOrder\\":1,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"}]"
             >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSlug-id"
-              data-tc="slug"
-            >
-              author
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
-              data-tc="name"
-            >
-              Author
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colVisible-id"
-              data-tc="visible"
-              data-tc-visible="true"
-            >
-              Yes
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSearchable-id"
-              data-tc="searchable"
-              data-tc-searchable="true"
-            >
-              Yes
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFaceted-id"
-              data-tc="use-in-faceted-search"
-              data-tc-use-in-faceted-search="false"
-            >
-              No
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-            data-tc="id"
-            data-tc-id="UHJvZHVjdEF0dHJpYnV0ZTo2"
-            data-tc-values="[{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjE1\\",\\"name\\":\\"100g\\",\\"slug\\":\\"100g\\",\\"sortOrder\\":0,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjE2\\",\\"name\\":\\"250g\\",\\"slug\\":\\"250g\\",\\"sortOrder\\":1,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjE3\\",\\"name\\":\\"500g\\",\\"slug\\":\\"500g\\",\\"sortOrder\\":2,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjE4\\",\\"name\\":\\"1kg\\",\\"slug\\":\\"1kg\\",\\"sortOrder\\":3,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"}]"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSlug-id"
+                data-tc="slug"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSlug-id"
-              data-tc="slug"
-            >
-              box-size
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
-              data-tc="name"
-            >
-              Box Size
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colVisible-id"
-              data-tc="visible"
-              data-tc-visible="false"
-            >
-              No
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSearchable-id"
-              data-tc="searchable"
-              data-tc-searchable="true"
-            >
-              Yes
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFaceted-id"
-              data-tc="use-in-faceted-search"
-              data-tc-use-in-faceted-search="false"
-            >
-              No
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-            data-tc="id"
-            data-tc-id="UHJvZHVjdEF0dHJpYnV0ZToz"
-            data-tc-values="[{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjY=\\",\\"name\\":\\"Saleor\\",\\"slug\\":\\"saleor\\",\\"sortOrder\\":0,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"}]"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+                author
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                data-tc="name"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSlug-id"
-              data-tc="slug"
-            >
-              brand
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
-              data-tc="name"
-            >
-              Brand
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colVisible-id"
-              data-tc="visible"
-              data-tc-visible="false"
-            >
-              No
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSearchable-id"
-              data-tc="searchable"
-              data-tc-searchable="false"
-            >
-              No
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFaceted-id"
-              data-tc="use-in-faceted-search"
-              data-tc-use-in-faceted-search="true"
-            >
-              Yes
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-            data-tc="id"
-            data-tc-id="UHJvZHVjdEF0dHJpYnV0ZTo4"
-            data-tc-values="[{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjIx\\",\\"name\\":\\"100g\\",\\"slug\\":\\"100g\\",\\"sortOrder\\":0,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjIy\\",\\"name\\":\\"250g\\",\\"slug\\":\\"250g\\",\\"sortOrder\\":1,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjIz\\",\\"name\\":\\"500g\\",\\"slug\\":\\"500g\\",\\"sortOrder\\":2,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"}]"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+                Author
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colVisible-id"
+                data-tc="visible"
+                data-tc-visible="true"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSlug-id"
-              data-tc="slug"
-            >
-              candy-box-size
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
-              data-tc="name"
-            >
-              Candy Box Size
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colVisible-id"
-              data-tc="visible"
-              data-tc-visible="false"
-            >
-              No
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSearchable-id"
-              data-tc="searchable"
-              data-tc-searchable="true"
-            >
-              Yes
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFaceted-id"
-              data-tc="use-in-faceted-search"
-              data-tc-use-in-faceted-search="true"
-            >
-              Yes
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-            data-tc="id"
-            data-tc-id="UHJvZHVjdEF0dHJpYnV0ZTo1"
-            data-tc-values="[{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjEz\\",\\"name\\":\\"Arabica\\",\\"slug\\":\\"arabica\\",\\"sortOrder\\":0,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjE0\\",\\"name\\":\\"Robusta\\",\\"slug\\":\\"robusta\\",\\"sortOrder\\":1,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"}]"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+                Yes
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSearchable-id"
+                data-tc="searchable"
+                data-tc-searchable="true"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSlug-id"
-              data-tc="slug"
-            >
-              coffee-genre
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
-              data-tc="name"
-            >
-              Coffee Genre
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colVisible-id"
-              data-tc="visible"
-              data-tc-visible="true"
-            >
-              Yes
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSearchable-id"
-              data-tc="searchable"
-              data-tc-searchable="true"
-            >
-              Yes
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFaceted-id"
-              data-tc="use-in-faceted-search"
-              data-tc-use-in-faceted-search="true"
-            >
-              Yes
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-            data-tc="id"
-            data-tc-id="UHJvZHVjdEF0dHJpYnV0ZToy"
-            data-tc-values="[{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjM=\\",\\"name\\":\\"Round\\",\\"slug\\":\\"round\\",\\"sortOrder\\":0,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjQ=\\",\\"name\\":\\"V-Neck\\",\\"slug\\":\\"v-neck\\",\\"sortOrder\\":1,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjU=\\",\\"name\\":\\"Polo\\",\\"slug\\":\\"polo\\",\\"sortOrder\\":2,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"}]"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+                Yes
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFaceted-id"
+                data-tc="use-in-faceted-search"
+                data-tc-use-in-faceted-search="false"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSlug-id"
-              data-tc="slug"
+                No
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              data-tc="id"
+              data-tc-id="UHJvZHVjdEF0dHJpYnV0ZTo2"
+              data-tc-values="[{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjE1\\",\\"name\\":\\"100g\\",\\"slug\\":\\"100g\\",\\"sortOrder\\":0,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjE2\\",\\"name\\":\\"250g\\",\\"slug\\":\\"250g\\",\\"sortOrder\\":1,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjE3\\",\\"name\\":\\"500g\\",\\"slug\\":\\"500g\\",\\"sortOrder\\":2,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjE4\\",\\"name\\":\\"1kg\\",\\"slug\\":\\"1kg\\",\\"sortOrder\\":3,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"}]"
             >
-              collar
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
-              data-tc="name"
-            >
-              Collar
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colVisible-id"
-              data-tc="visible"
-              data-tc-visible="true"
-            >
-              Yes
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSearchable-id"
-              data-tc="searchable"
-              data-tc-searchable="false"
-            >
-              No
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFaceted-id"
-              data-tc="use-in-faceted-search"
-              data-tc-use-in-faceted-search="true"
-            >
-              Yes
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-            data-tc="id"
-            data-tc-id="UHJvZHVjdEF0dHJpYnV0ZTox"
-            data-tc-values="[{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjE=\\",\\"name\\":\\"Blue\\",\\"slug\\":\\"blue\\",\\"sortOrder\\":0,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjI=\\",\\"name\\":\\"White\\",\\"slug\\":\\"white\\",\\"sortOrder\\":1,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"}]"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSlug-id"
-              data-tc="slug"
-            >
-              color
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
-              data-tc="name"
-            >
-              Color
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colVisible-id"
-              data-tc="visible"
-              data-tc-visible="true"
-            >
-              Yes
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSearchable-id"
-              data-tc="searchable"
-              data-tc-searchable="false"
-            >
-              No
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFaceted-id"
-              data-tc="use-in-faceted-search"
-              data-tc-use-in-faceted-search="false"
-            >
-              No
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-            data-tc="id"
-            data-tc-id="UHJvZHVjdEF0dHJpYnV0ZToxMg=="
-            data-tc-values="[{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjMw\\",\\"name\\":\\"Soft\\",\\"slug\\":\\"soft\\",\\"sortOrder\\":0,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjMx\\",\\"name\\":\\"Hard\\",\\"slug\\":\\"hard\\",\\"sortOrder\\":1,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjMy\\",\\"name\\":\\"Middle soft\\",\\"slug\\":\\"middle-soft\\",\\"sortOrder\\":2,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjMz\\",\\"name\\":\\"Middle hard\\",\\"slug\\":\\"middle-hard\\",\\"sortOrder\\":3,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjM0\\",\\"name\\":\\"Middle\\",\\"slug\\":\\"middle\\",\\"sortOrder\\":4,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjM1\\",\\"name\\":\\"Very hard\\",\\"slug\\":\\"very-hard\\",\\"sortOrder\\":5,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"}]"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSlug-id"
+                data-tc="slug"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSlug-id"
-              data-tc="slug"
-            >
-              cover
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
-              data-tc="name"
-            >
-              Cover
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colVisible-id"
-              data-tc="visible"
-              data-tc-visible="false"
-            >
-              No
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSearchable-id"
-              data-tc="searchable"
-              data-tc-searchable="true"
-            >
-              Yes
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFaceted-id"
-              data-tc="use-in-faceted-search"
-              data-tc-use-in-faceted-search="false"
-            >
-              No
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-            data-tc="id"
-            data-tc-id="UHJvZHVjdEF0dHJpYnV0ZTo3"
-            data-tc-values="[{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjE5\\",\\"name\\":\\"Sour\\",\\"slug\\":\\"sour\\",\\"sortOrder\\":0,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjIw\\",\\"name\\":\\"Sweet\\",\\"slug\\":\\"sweet\\",\\"sortOrder\\":1,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"}]"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+                box-size
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                data-tc="name"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSlug-id"
-              data-tc="slug"
-            >
-              flavor
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
-              data-tc="name"
-            >
-              Flavor
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colVisible-id"
-              data-tc="visible"
-              data-tc-visible="true"
-            >
-              Yes
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSearchable-id"
-              data-tc="searchable"
-              data-tc-searchable="true"
-            >
-              Yes
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFaceted-id"
-              data-tc="use-in-faceted-search"
-              data-tc-use-in-faceted-search="true"
-            >
-              Yes
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-            data-tc="id"
-            data-tc-id="UHJvZHVjdEF0dHJpYnV0ZToxMQ=="
-            data-tc-values="[{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjI4\\",\\"name\\":\\"English\\",\\"slug\\":\\"english\\",\\"sortOrder\\":0,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjI5\\",\\"name\\":\\"Pirate\\",\\"slug\\":\\"pirate\\",\\"sortOrder\\":1,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"}]"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+                Box Size
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colVisible-id"
+                data-tc="visible"
+                data-tc-visible="false"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSlug-id"
-              data-tc="slug"
-            >
-              language
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
-              data-tc="name"
-            >
-              Language
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colVisible-id"
-              data-tc="visible"
-              data-tc-visible="true"
-            >
-              Yes
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSearchable-id"
-              data-tc="searchable"
-              data-tc-searchable="false"
-            >
-              No
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFaceted-id"
-              data-tc="use-in-faceted-search"
-              data-tc-use-in-faceted-search="true"
-            >
-              Yes
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-            data-tc="id"
-            data-tc-id="UHJvZHVjdEF0dHJpYnV0ZToxMA=="
-            data-tc-values="[{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjI2\\",\\"name\\":\\"Mirumee Press\\",\\"slug\\":\\"mirumee-press\\",\\"sortOrder\\":0,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjI3\\",\\"name\\":\\"Saleor Publishing\\",\\"slug\\":\\"saleor-publishing\\",\\"sortOrder\\":1,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"}]"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+                No
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSearchable-id"
+                data-tc="searchable"
+                data-tc-searchable="true"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSlug-id"
-              data-tc="slug"
-            >
-              publisher
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
-              data-tc="name"
-            >
-              Publisher
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colVisible-id"
-              data-tc="visible"
-              data-tc-visible="true"
-            >
-              Yes
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSearchable-id"
-              data-tc="searchable"
-              data-tc-searchable="true"
-            >
-              Yes
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFaceted-id"
-              data-tc="use-in-faceted-search"
-              data-tc-use-in-faceted-search="true"
-            >
-              Yes
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-            data-tc="id"
-            data-tc-id="UHJvZHVjdEF0dHJpYnV0ZTo0"
-            data-tc-values="[{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjc=\\",\\"name\\":\\"XS\\",\\"slug\\":\\"xs\\",\\"sortOrder\\":0,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjg=\\",\\"name\\":\\"S\\",\\"slug\\":\\"s\\",\\"sortOrder\\":1,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjk=\\",\\"name\\":\\"M\\",\\"slug\\":\\"m\\",\\"sortOrder\\":2,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjEw\\",\\"name\\":\\"L\\",\\"slug\\":\\"l\\",\\"sortOrder\\":3,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjEx\\",\\"name\\":\\"XL\\",\\"slug\\":\\"xl\\",\\"sortOrder\\":4,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjEy\\",\\"name\\":\\"XXL\\",\\"slug\\":\\"xxl\\",\\"sortOrder\\":5,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"}]"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+                Yes
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFaceted-id"
+                data-tc="use-in-faceted-search"
+                data-tc-use-in-faceted-search="false"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSlug-id"
-              data-tc="slug"
+                No
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              data-tc="id"
+              data-tc-id="UHJvZHVjdEF0dHJpYnV0ZToz"
+              data-tc-values="[{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjY=\\",\\"name\\":\\"Saleor\\",\\"slug\\":\\"saleor\\",\\"sortOrder\\":0,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"}]"
             >
-              size
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
-              data-tc="name"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSlug-id"
+                data-tc="slug"
+              >
+                brand
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                data-tc="name"
+              >
+                Brand
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colVisible-id"
+                data-tc="visible"
+                data-tc-visible="false"
+              >
+                No
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSearchable-id"
+                data-tc="searchable"
+                data-tc-searchable="false"
+              >
+                No
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFaceted-id"
+                data-tc="use-in-faceted-search"
+                data-tc-use-in-faceted-search="true"
+              >
+                Yes
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              data-tc="id"
+              data-tc-id="UHJvZHVjdEF0dHJpYnV0ZTo4"
+              data-tc-values="[{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjIx\\",\\"name\\":\\"100g\\",\\"slug\\":\\"100g\\",\\"sortOrder\\":0,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjIy\\",\\"name\\":\\"250g\\",\\"slug\\":\\"250g\\",\\"sortOrder\\":1,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjIz\\",\\"name\\":\\"500g\\",\\"slug\\":\\"500g\\",\\"sortOrder\\":2,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"}]"
             >
-              Size
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colVisible-id"
-              data-tc="visible"
-              data-tc-visible="true"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSlug-id"
+                data-tc="slug"
+              >
+                candy-box-size
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                data-tc="name"
+              >
+                Candy Box Size
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colVisible-id"
+                data-tc="visible"
+                data-tc-visible="false"
+              >
+                No
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSearchable-id"
+                data-tc="searchable"
+                data-tc-searchable="true"
+              >
+                Yes
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFaceted-id"
+                data-tc="use-in-faceted-search"
+                data-tc-use-in-faceted-search="true"
+              >
+                Yes
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              data-tc="id"
+              data-tc-id="UHJvZHVjdEF0dHJpYnV0ZTo1"
+              data-tc-values="[{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjEz\\",\\"name\\":\\"Arabica\\",\\"slug\\":\\"arabica\\",\\"sortOrder\\":0,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjE0\\",\\"name\\":\\"Robusta\\",\\"slug\\":\\"robusta\\",\\"sortOrder\\":1,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"}]"
             >
-              Yes
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSearchable-id"
-              data-tc="searchable"
-              data-tc-searchable="true"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSlug-id"
+                data-tc="slug"
+              >
+                coffee-genre
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                data-tc="name"
+              >
+                Coffee Genre
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colVisible-id"
+                data-tc="visible"
+                data-tc-visible="true"
+              >
+                Yes
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSearchable-id"
+                data-tc="searchable"
+                data-tc-searchable="true"
+              >
+                Yes
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFaceted-id"
+                data-tc="use-in-faceted-search"
+                data-tc-use-in-faceted-search="true"
+              >
+                Yes
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              data-tc="id"
+              data-tc-id="UHJvZHVjdEF0dHJpYnV0ZToy"
+              data-tc-values="[{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjM=\\",\\"name\\":\\"Round\\",\\"slug\\":\\"round\\",\\"sortOrder\\":0,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjQ=\\",\\"name\\":\\"V-Neck\\",\\"slug\\":\\"v-neck\\",\\"sortOrder\\":1,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjU=\\",\\"name\\":\\"Polo\\",\\"slug\\":\\"polo\\",\\"sortOrder\\":2,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"}]"
             >
-              Yes
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFaceted-id"
-              data-tc="use-in-faceted-search"
-              data-tc-use-in-faceted-search="true"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSlug-id"
+                data-tc="slug"
+              >
+                collar
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                data-tc="name"
+              >
+                Collar
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colVisible-id"
+                data-tc="visible"
+                data-tc-visible="true"
+              >
+                Yes
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSearchable-id"
+                data-tc="searchable"
+                data-tc-searchable="false"
+              >
+                No
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFaceted-id"
+                data-tc="use-in-faceted-search"
+                data-tc-use-in-faceted-search="true"
+              >
+                Yes
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              data-tc="id"
+              data-tc-id="UHJvZHVjdEF0dHJpYnV0ZTox"
+              data-tc-values="[{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjE=\\",\\"name\\":\\"Blue\\",\\"slug\\":\\"blue\\",\\"sortOrder\\":0,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjI=\\",\\"name\\":\\"White\\",\\"slug\\":\\"white\\",\\"sortOrder\\":1,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"}]"
             >
-              Yes
-            </td>
-          </tr>
-        </tbody>
-      </table>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSlug-id"
+                data-tc="slug"
+              >
+                color
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                data-tc="name"
+              >
+                Color
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colVisible-id"
+                data-tc="visible"
+                data-tc-visible="true"
+              >
+                Yes
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSearchable-id"
+                data-tc="searchable"
+                data-tc-searchable="false"
+              >
+                No
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFaceted-id"
+                data-tc="use-in-faceted-search"
+                data-tc-use-in-faceted-search="false"
+              >
+                No
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              data-tc="id"
+              data-tc-id="UHJvZHVjdEF0dHJpYnV0ZToxMg=="
+              data-tc-values="[{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjMw\\",\\"name\\":\\"Soft\\",\\"slug\\":\\"soft\\",\\"sortOrder\\":0,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjMx\\",\\"name\\":\\"Hard\\",\\"slug\\":\\"hard\\",\\"sortOrder\\":1,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjMy\\",\\"name\\":\\"Middle soft\\",\\"slug\\":\\"middle-soft\\",\\"sortOrder\\":2,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjMz\\",\\"name\\":\\"Middle hard\\",\\"slug\\":\\"middle-hard\\",\\"sortOrder\\":3,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjM0\\",\\"name\\":\\"Middle\\",\\"slug\\":\\"middle\\",\\"sortOrder\\":4,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjM1\\",\\"name\\":\\"Very hard\\",\\"slug\\":\\"very-hard\\",\\"sortOrder\\":5,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"}]"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSlug-id"
+                data-tc="slug"
+              >
+                cover
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                data-tc="name"
+              >
+                Cover
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colVisible-id"
+                data-tc="visible"
+                data-tc-visible="false"
+              >
+                No
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSearchable-id"
+                data-tc="searchable"
+                data-tc-searchable="true"
+              >
+                Yes
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFaceted-id"
+                data-tc="use-in-faceted-search"
+                data-tc-use-in-faceted-search="false"
+              >
+                No
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              data-tc="id"
+              data-tc-id="UHJvZHVjdEF0dHJpYnV0ZTo3"
+              data-tc-values="[{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjE5\\",\\"name\\":\\"Sour\\",\\"slug\\":\\"sour\\",\\"sortOrder\\":0,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjIw\\",\\"name\\":\\"Sweet\\",\\"slug\\":\\"sweet\\",\\"sortOrder\\":1,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"}]"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSlug-id"
+                data-tc="slug"
+              >
+                flavor
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                data-tc="name"
+              >
+                Flavor
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colVisible-id"
+                data-tc="visible"
+                data-tc-visible="true"
+              >
+                Yes
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSearchable-id"
+                data-tc="searchable"
+                data-tc-searchable="true"
+              >
+                Yes
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFaceted-id"
+                data-tc="use-in-faceted-search"
+                data-tc-use-in-faceted-search="true"
+              >
+                Yes
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              data-tc="id"
+              data-tc-id="UHJvZHVjdEF0dHJpYnV0ZToxMQ=="
+              data-tc-values="[{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjI4\\",\\"name\\":\\"English\\",\\"slug\\":\\"english\\",\\"sortOrder\\":0,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjI5\\",\\"name\\":\\"Pirate\\",\\"slug\\":\\"pirate\\",\\"sortOrder\\":1,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"}]"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSlug-id"
+                data-tc="slug"
+              >
+                language
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                data-tc="name"
+              >
+                Language
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colVisible-id"
+                data-tc="visible"
+                data-tc-visible="true"
+              >
+                Yes
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSearchable-id"
+                data-tc="searchable"
+                data-tc-searchable="false"
+              >
+                No
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFaceted-id"
+                data-tc="use-in-faceted-search"
+                data-tc-use-in-faceted-search="true"
+              >
+                Yes
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              data-tc="id"
+              data-tc-id="UHJvZHVjdEF0dHJpYnV0ZToxMA=="
+              data-tc-values="[{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjI2\\",\\"name\\":\\"Mirumee Press\\",\\"slug\\":\\"mirumee-press\\",\\"sortOrder\\":0,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjI3\\",\\"name\\":\\"Saleor Publishing\\",\\"slug\\":\\"saleor-publishing\\",\\"sortOrder\\":1,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"}]"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSlug-id"
+                data-tc="slug"
+              >
+                publisher
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                data-tc="name"
+              >
+                Publisher
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colVisible-id"
+                data-tc="visible"
+                data-tc-visible="true"
+              >
+                Yes
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSearchable-id"
+                data-tc="searchable"
+                data-tc-searchable="true"
+              >
+                Yes
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFaceted-id"
+                data-tc="use-in-faceted-search"
+                data-tc-use-in-faceted-search="true"
+              >
+                Yes
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              data-tc="id"
+              data-tc-id="UHJvZHVjdEF0dHJpYnV0ZTo0"
+              data-tc-values="[{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjc=\\",\\"name\\":\\"XS\\",\\"slug\\":\\"xs\\",\\"sortOrder\\":0,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjg=\\",\\"name\\":\\"S\\",\\"slug\\":\\"s\\",\\"sortOrder\\":1,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjk=\\",\\"name\\":\\"M\\",\\"slug\\":\\"m\\",\\"sortOrder\\":2,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjEw\\",\\"name\\":\\"L\\",\\"slug\\":\\"l\\",\\"sortOrder\\":3,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjEx\\",\\"name\\":\\"XL\\",\\"slug\\":\\"xl\\",\\"sortOrder\\":4,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjEy\\",\\"name\\":\\"XXL\\",\\"slug\\":\\"xxl\\",\\"sortOrder\\":5,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"}]"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSlug-id"
+                data-tc="slug"
+              >
+                size
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                data-tc="name"
+              >
+                Size
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colVisible-id"
+                data-tc="visible"
+                data-tc-visible="true"
+              >
+                Yes
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSearchable-id"
+                data-tc="searchable"
+                data-tc-searchable="true"
+              >
+                Yes
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFaceted-id"
+                data-tc="use-in-faceted-search"
+                data-tc-use-in-faceted-search="true"
+              >
+                Yes
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
     </div>
   </div>
 </div>
@@ -12397,10 +12457,10 @@ exports[`Storyshots Views / Attributes / Attribute list loading 1`] = `
   style="padding:24px"
 >
   <div
-    class="makeStyles-root-id"
+    class="Container-root-id"
   >
     <div
-      class="makeStyles-root-id"
+      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
         class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -12408,7 +12468,7 @@ exports[`Storyshots Views / Attributes / Attribute list loading 1`] = `
         Attributes
       </div>
       <div
-        class="makeStyles-action-id"
+        class="ExtendedPageHeader-action-id"
       >
         <div
           class="makeStyles-root-id"
@@ -12504,221 +12564,225 @@ exports[`Storyshots Views / Attributes / Attribute list loading 1`] = `
       <hr
         class="makeStyles-root-id"
       />
-      <table
-        class="MuiTable-root-id"
+      <div
+        class="ResponsiveTable-root-id"
       >
-        <thead
-          class="MuiTableHead-root-id"
+        <table
+          class="MuiTable-root-id"
         >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-head-id"
+          <thead
+            class="MuiTableHead-root-id"
           >
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
-              scope="col"
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-head-id"
             >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
-                disabled=""
-                tabindex="-1"
-                type="button"
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
+                scope="col"
               >
-                <input
-                  class="makeStyles-box-id makeStyles-disabled-id"
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
                   disabled=""
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colSlug-id"
-              scope="col"
-            >
-              Attribute Code
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
-              scope="col"
-            >
-              Default Label
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colVisible-id"
-              scope="col"
-            >
-              Visible
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colSearchable-id"
-              scope="col"
-            >
-              Searchable
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colFaceted-id"
-              scope="col"
-            >
-              Use in faceted search
-            </th>
-          </tr>
-        </thead>
-        <tfoot
-          class="MuiTableFooter-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-footer-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
-              colspan="6"
-            >
-              <div
-                class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
-              >
-                <div
-                  class="makeStyles-spacer-id"
-                />
-                <div
-                  class="makeStyles-root-id"
+                  tabindex="-1"
+                  type="button"
                 >
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                    data-tc="button-pagination-back"
+                  <input
+                    class="makeStyles-box-id makeStyles-disabled-id"
                     disabled=""
-                    tabindex="-1"
-                    type="button"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M14 7l-5 5 5 5V7z"
-                        />
-                        <path
-                          d="M24 0v24H0V0h24z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                    data-tc="button-pagination-next"
-                    disabled=""
-                    tabindex="-1"
-                    type="button"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M10 17l5-5-5-5v10z"
-                        />
-                        <path
-                          d="M0 24V0h24v24H0z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                </div>
-              </div>
-            </td>
-          </tr>
-        </tfoot>
-        <tbody
-          class="MuiTableBody-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id makeStyles-link-id"
-            data-tc="id"
-            data-tc-values="[]"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colSlug-id"
+                scope="col"
+              >
+                Attribute Code
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                scope="col"
+              >
+                Default Label
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colVisible-id"
+                scope="col"
+              >
+                Visible
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colSearchable-id"
+                scope="col"
+              >
+                Searchable
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colFaceted-id"
+                scope="col"
+              >
+                Use in faceted search
+              </th>
+            </tr>
+          </thead>
+          <tfoot
+            class="MuiTableFooter-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-footer-id"
             >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
-                disabled=""
-                tabindex="-1"
-                type="button"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                colspan="6"
               >
-                <input
-                  class="makeStyles-box-id makeStyles-disabled-id"
+                <div
+                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+                >
+                  <div
+                    class="makeStyles-spacer-id"
+                  />
+                  <div
+                    class="makeStyles-root-id"
+                  >
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      data-tc="button-pagination-back"
+                      disabled=""
+                      tabindex="-1"
+                      type="button"
+                    >
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M14 7l-5 5 5 5V7z"
+                          />
+                          <path
+                            d="M24 0v24H0V0h24z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      data-tc="button-pagination-next"
+                      disabled=""
+                      tabindex="-1"
+                      type="button"
+                    >
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M10 17l5-5-5-5v10z"
+                          />
+                          <path
+                            d="M0 24V0h24v24H0z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </div>
+                </div>
+              </td>
+            </tr>
+          </tfoot>
+          <tbody
+            class="MuiTableBody-root-id"
+          >
+            <tr
+              class="MuiTableRow-root-id makeStyles-link-id"
+              data-tc="id"
+              data-tc-values="[]"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
                   disabled=""
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSlug-id"
-              data-tc="slug"
-            >
-              <span
-                class="makeStyles-skeleton-id"
+                  tabindex="-1"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id makeStyles-disabled-id"
+                    disabled=""
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSlug-id"
+                data-tc="slug"
               >
-                ‌
-              </span>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
-              data-tc="name"
-            >
-              <span
-                class="makeStyles-skeleton-id"
+                <span
+                  class="makeStyles-skeleton-id"
+                >
+                  ‌
+                </span>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                data-tc="name"
               >
-                ‌
-              </span>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colVisible-id"
-              data-tc="visible"
-            >
-              <span
-                class="makeStyles-skeleton-id"
+                <span
+                  class="makeStyles-skeleton-id"
+                >
+                  ‌
+                </span>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colVisible-id"
+                data-tc="visible"
               >
-                ‌
-              </span>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSearchable-id"
-              data-tc="searchable"
-            >
-              <span
-                class="makeStyles-skeleton-id"
+                <span
+                  class="makeStyles-skeleton-id"
+                >
+                  ‌
+                </span>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSearchable-id"
+                data-tc="searchable"
               >
-                ‌
-              </span>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFaceted-id"
-              data-tc="use-in-faceted-search"
-            >
-              <span
-                class="makeStyles-skeleton-id"
+                <span
+                  class="makeStyles-skeleton-id"
+                >
+                  ‌
+                </span>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFaceted-id"
+                data-tc="use-in-faceted-search"
               >
-                ‌
-              </span>
-            </td>
-          </tr>
-        </tbody>
-      </table>
+                <span
+                  class="makeStyles-skeleton-id"
+                >
+                  ‌
+                </span>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
     </div>
   </div>
 </div>
@@ -12729,10 +12793,10 @@ exports[`Storyshots Views / Attributes / Attribute list no data 1`] = `
   style="padding:24px"
 >
   <div
-    class="makeStyles-root-id"
+    class="Container-root-id"
   >
     <div
-      class="makeStyles-root-id"
+      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
         class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -12740,7 +12804,7 @@ exports[`Storyshots Views / Attributes / Attribute list no data 1`] = `
         Attributes
       </div>
       <div
-        class="makeStyles-action-id"
+        class="ExtendedPageHeader-action-id"
       >
         <div
           class="makeStyles-root-id"
@@ -12836,139 +12900,143 @@ exports[`Storyshots Views / Attributes / Attribute list no data 1`] = `
       <hr
         class="makeStyles-root-id"
       />
-      <table
-        class="MuiTable-root-id"
+      <div
+        class="ResponsiveTable-root-id"
       >
-        <thead
-          class="MuiTableHead-root-id"
+        <table
+          class="MuiTable-root-id"
         >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-head-id"
+          <thead
+            class="MuiTableHead-root-id"
           >
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colSlug-id"
-              scope="col"
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-head-id"
             >
-              Attribute Code
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
-              scope="col"
-            >
-              Default Label
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colVisible-id"
-              scope="col"
-            >
-              Visible
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colSearchable-id"
-              scope="col"
-            >
-              Searchable
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colFaceted-id"
-              scope="col"
-            >
-              Use in faceted search
-            </th>
-          </tr>
-        </thead>
-        <tfoot
-          class="MuiTableFooter-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-footer-id"
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colSlug-id"
+                scope="col"
+              >
+                Attribute Code
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                scope="col"
+              >
+                Default Label
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colVisible-id"
+                scope="col"
+              >
+                Visible
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colSearchable-id"
+                scope="col"
+              >
+                Searchable
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colFaceted-id"
+                scope="col"
+              >
+                Use in faceted search
+              </th>
+            </tr>
+          </thead>
+          <tfoot
+            class="MuiTableFooter-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
-              colspan="6"
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-footer-id"
             >
-              <div
-                class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                colspan="6"
               >
                 <div
-                  class="makeStyles-spacer-id"
-                />
-                <div
-                  class="makeStyles-root-id"
+                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
                 >
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                    data-tc="button-pagination-back"
-                    disabled=""
-                    tabindex="-1"
-                    type="button"
+                  <div
+                    class="makeStyles-spacer-id"
+                  />
+                  <div
+                    class="makeStyles-root-id"
                   >
-                    <span
-                      class="MuiIconButton-label-id"
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      data-tc="button-pagination-back"
+                      disabled=""
+                      tabindex="-1"
+                      type="button"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
+                      <span
+                        class="MuiIconButton-label-id"
                       >
-                        <path
-                          d="M14 7l-5 5 5 5V7z"
-                        />
-                        <path
-                          d="M24 0v24H0V0h24z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
-                    data-tc="button-pagination-next"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M14 7l-5 5 5 5V7z"
+                          />
+                          <path
+                            d="M24 0v24H0V0h24z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                      data-tc="button-pagination-next"
+                      tabindex="0"
+                      type="button"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
+                      <span
+                        class="MuiIconButton-label-id"
                       >
-                        <path
-                          d="M10 17l5-5-5-5v10z"
-                        />
-                        <path
-                          d="M0 24V0h24v24H0z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M10 17l5-5-5-5v10z"
+                          />
+                          <path
+                            d="M0 24V0h24v24H0z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </div>
                 </div>
-              </div>
-            </td>
-          </tr>
-        </tfoot>
-        <tbody
-          class="MuiTableBody-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id"
+              </td>
+            </tr>
+          </tfoot>
+          <tbody
+            class="MuiTableBody-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-              colspan="6"
+            <tr
+              class="MuiTableRow-root-id"
             >
-              No attributes found
-            </td>
-          </tr>
-        </tbody>
-      </table>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id"
+                colspan="6"
+              >
+                No attributes found
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
     </div>
   </div>
 </div>
@@ -13909,10 +13977,10 @@ exports[`Storyshots Views / Categories / Category list default 1`] = `
   style="padding:24px"
 >
   <div
-    class="makeStyles-root-id"
+    class="Container-root-id"
   >
     <div
-      class="makeStyles-root-id"
+      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
         class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -13920,7 +13988,7 @@ exports[`Storyshots Views / Categories / Category list default 1`] = `
         Categories
       </div>
       <div
-        class="makeStyles-action-id"
+        class="ExtendedPageHeader-action-id"
       >
         <div
           class="makeStyles-root-id"
@@ -14016,391 +14084,395 @@ exports[`Storyshots Views / Categories / Category list default 1`] = `
       <hr
         class="makeStyles-root-id"
       />
-      <table
-        class="MuiTable-root-id"
+      <div
+        class="ResponsiveTable-root-id"
       >
-        <thead
-          class="MuiTableHead-root-id"
+        <table
+          class="MuiTable-root-id"
         >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-head-id"
+          <thead
+            class="MuiTableHead-root-id"
           >
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
-              scope="col"
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-head-id"
             >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
+                scope="col"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id CategoryList-colName-id"
-              scope="col"
-            >
-              Category Name
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id CategoryList-colSubcategories-id"
-              scope="col"
-            >
-              Subcategories
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id CategoryList-colProducts-id"
-              scope="col"
-            >
-              No. of Products
-            </th>
-          </tr>
-        </thead>
-        <tfoot
-          class="MuiTableFooter-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-footer-id"
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id CategoryList-colName-id"
+                scope="col"
+              >
+                Category Name
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id CategoryList-colSubcategories-id"
+                scope="col"
+              >
+                Subcategories
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id CategoryList-colProducts-id"
+                scope="col"
+              >
+                No. of Products
+              </th>
+            </tr>
+          </thead>
+          <tfoot
+            class="MuiTableFooter-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
-              colspan="4"
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-footer-id"
             >
-              <div
-                class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                colspan="4"
               >
                 <div
-                  class="makeStyles-spacer-id"
+                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
                 >
-                  <div>
-                    <span
-                      class="RowNumberSelect-label-id"
-                    >
-                      No of Rows:
-                    </span>
-                    <div
-                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
-                    >
+                  <div
+                    class="makeStyles-spacer-id"
+                  >
+                    <div>
+                      <span
+                        class="RowNumberSelect-label-id"
+                      >
+                        No of Rows:
+                      </span>
                       <div
-                        aria-haspopup="listbox"
-                        aria-labelledby=" "
-                        class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-id"
-                        role="button"
-                        tabindex="0"
+                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                       >
-                        20
-                      </div>
-                      <input
-                        type="hidden"
-                        value="20"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MuiSelect-icon-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M7 10l5 5 5-5z"
+                        <div
+                          aria-haspopup="listbox"
+                          aria-labelledby=" "
+                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-id"
+                          role="button"
+                          tabindex="0"
+                        >
+                          20
+                        </div>
+                        <input
+                          type="hidden"
+                          value="20"
                         />
-                      </svg>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M7 10l5 5 5-5z"
+                          />
+                        </svg>
+                      </div>
                     </div>
                   </div>
+                  <div
+                    class="makeStyles-root-id"
+                  >
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      data-tc="button-pagination-back"
+                      disabled=""
+                      tabindex="-1"
+                      type="button"
+                    >
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M14 7l-5 5 5 5V7z"
+                          />
+                          <path
+                            d="M24 0v24H0V0h24z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                      data-tc="button-pagination-next"
+                      tabindex="0"
+                      type="button"
+                    >
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M10 17l5-5-5-5v10z"
+                          />
+                          <path
+                            d="M0 24V0h24v24H0z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </div>
                 </div>
-                <div
-                  class="makeStyles-root-id"
+              </td>
+            </tr>
+          </tfoot>
+          <tbody
+            class="MuiTableBody-root-id"
+          >
+            <tr
+              class="MuiTableRow-root-id CategoryList-tableRow-id MuiTableRow-hover-id"
+              data-tc="id"
+              data-tc-id="123123"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
                 >
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                    data-tc="button-pagination-back"
-                    disabled=""
-                    tabindex="-1"
-                    type="button"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M14 7l-5 5 5 5V7z"
-                        />
-                        <path
-                          d="M24 0v24H0V0h24z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
-                    data-tc="button-pagination-next"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M10 17l5-5-5-5v10z"
-                        />
-                        <path
-                          d="M0 24V0h24v24H0z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                </div>
-              </div>
-            </td>
-          </tr>
-        </tfoot>
-        <tbody
-          class="MuiTableBody-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id CategoryList-tableRow-id MuiTableRow-hover-id"
-            data-tc="id"
-            data-tc-id="123123"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colName-id"
+                data-tc="name"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colName-id"
-              data-tc="name"
-            >
-              Lorem ipsum dolor
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colSubcategories-id"
-            >
-              2
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colProducts-id"
-            >
-              4
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id CategoryList-tableRow-id MuiTableRow-hover-id"
-            data-tc="id"
-            data-tc-id="876752"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+                Lorem ipsum dolor
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colSubcategories-id"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colName-id"
-              data-tc="name"
-            >
-              Mauris vehicula tortor vulputate
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colSubcategories-id"
-            >
-              54
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colProducts-id"
-            >
-              3
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id CategoryList-tableRow-id MuiTableRow-hover-id"
-            data-tc="id"
-            data-tc-id="876542"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+                2
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colProducts-id"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colName-id"
-              data-tc="name"
+                4
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id CategoryList-tableRow-id MuiTableRow-hover-id"
+              data-tc="id"
+              data-tc-id="876752"
             >
-              Excepteur sint occaecat cupidatat non proident
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colSubcategories-id"
-            >
-              2
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colProducts-id"
-            >
-              6
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id CategoryList-tableRow-id MuiTableRow-hover-id"
-            data-tc="id"
-            data-tc-id="875352"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colName-id"
-              data-tc="name"
-            >
-              Ut enim ad minim veniam
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colSubcategories-id"
-            >
-              6
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colProducts-id"
-            >
-              12
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id CategoryList-tableRow-id MuiTableRow-hover-id"
-            data-tc="id"
-            data-tc-id="865752"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colName-id"
+                data-tc="name"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colName-id"
-              data-tc="name"
-            >
-              Duis aute irure dolor in reprehenderit
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colSubcategories-id"
-            >
-              76
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colProducts-id"
-            >
-              43
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id CategoryList-tableRow-id MuiTableRow-hover-id"
-            data-tc="id"
-            data-tc-id="878752"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+                Mauris vehicula tortor vulputate
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colSubcategories-id"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colName-id"
-              data-tc="name"
+                54
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colProducts-id"
+              >
+                3
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id CategoryList-tableRow-id MuiTableRow-hover-id"
+              data-tc="id"
+              data-tc-id="876542"
             >
-              Neque porro quisquam est
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colSubcategories-id"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colName-id"
+                data-tc="name"
+              >
+                Excepteur sint occaecat cupidatat non proident
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colSubcategories-id"
+              >
+                2
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colProducts-id"
+              >
+                6
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id CategoryList-tableRow-id MuiTableRow-hover-id"
+              data-tc="id"
+              data-tc-id="875352"
             >
-              11
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colProducts-id"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colName-id"
+                data-tc="name"
+              >
+                Ut enim ad minim veniam
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colSubcategories-id"
+              >
+                6
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colProducts-id"
+              >
+                12
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id CategoryList-tableRow-id MuiTableRow-hover-id"
+              data-tc="id"
+              data-tc-id="865752"
             >
-              21
-            </td>
-          </tr>
-        </tbody>
-      </table>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colName-id"
+                data-tc="name"
+              >
+                Duis aute irure dolor in reprehenderit
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colSubcategories-id"
+              >
+                76
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colProducts-id"
+              >
+                43
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id CategoryList-tableRow-id MuiTableRow-hover-id"
+              data-tc="id"
+              data-tc-id="878752"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colName-id"
+                data-tc="name"
+              >
+                Neque porro quisquam est
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colSubcategories-id"
+              >
+                11
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colProducts-id"
+              >
+                21
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
     </div>
   </div>
 </div>
@@ -14411,10 +14483,10 @@ exports[`Storyshots Views / Categories / Category list empty 1`] = `
   style="padding:24px"
 >
   <div
-    class="makeStyles-root-id"
+    class="Container-root-id"
   >
     <div
-      class="makeStyles-root-id"
+      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
         class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -14422,7 +14494,7 @@ exports[`Storyshots Views / Categories / Category list empty 1`] = `
         Categories
       </div>
       <div
-        class="makeStyles-action-id"
+        class="ExtendedPageHeader-action-id"
       >
         <div
           class="makeStyles-root-id"
@@ -14518,163 +14590,167 @@ exports[`Storyshots Views / Categories / Category list empty 1`] = `
       <hr
         class="makeStyles-root-id"
       />
-      <table
-        class="MuiTable-root-id"
+      <div
+        class="ResponsiveTable-root-id"
       >
-        <thead
-          class="MuiTableHead-root-id"
+        <table
+          class="MuiTable-root-id"
         >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-head-id"
+          <thead
+            class="MuiTableHead-root-id"
           >
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id CategoryList-colName-id"
-              scope="col"
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-head-id"
             >
-              Category Name
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id CategoryList-colSubcategories-id"
-              scope="col"
-            >
-              Subcategories
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id CategoryList-colProducts-id"
-              scope="col"
-            >
-              No. of Products
-            </th>
-          </tr>
-        </thead>
-        <tfoot
-          class="MuiTableFooter-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-footer-id"
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id CategoryList-colName-id"
+                scope="col"
+              >
+                Category Name
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id CategoryList-colSubcategories-id"
+                scope="col"
+              >
+                Subcategories
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id CategoryList-colProducts-id"
+                scope="col"
+              >
+                No. of Products
+              </th>
+            </tr>
+          </thead>
+          <tfoot
+            class="MuiTableFooter-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
-              colspan="4"
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-footer-id"
             >
-              <div
-                class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                colspan="4"
               >
                 <div
-                  class="makeStyles-spacer-id"
+                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
                 >
-                  <div>
-                    <span
-                      class="RowNumberSelect-label-id"
-                    >
-                      No of Rows:
-                    </span>
-                    <div
-                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
-                    >
+                  <div
+                    class="makeStyles-spacer-id"
+                  >
+                    <div>
+                      <span
+                        class="RowNumberSelect-label-id"
+                      >
+                        No of Rows:
+                      </span>
                       <div
-                        aria-haspopup="listbox"
-                        aria-labelledby=" "
-                        class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-id"
-                        role="button"
-                        tabindex="0"
+                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                       >
-                        20
-                      </div>
-                      <input
-                        type="hidden"
-                        value="20"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MuiSelect-icon-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M7 10l5 5 5-5z"
+                        <div
+                          aria-haspopup="listbox"
+                          aria-labelledby=" "
+                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-id"
+                          role="button"
+                          tabindex="0"
+                        >
+                          20
+                        </div>
+                        <input
+                          type="hidden"
+                          value="20"
                         />
-                      </svg>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M7 10l5 5 5-5z"
+                          />
+                        </svg>
+                      </div>
                     </div>
                   </div>
-                </div>
-                <div
-                  class="makeStyles-root-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                    data-tc="button-pagination-back"
-                    disabled=""
-                    tabindex="-1"
-                    type="button"
+                  <div
+                    class="makeStyles-root-id"
                   >
-                    <span
-                      class="MuiIconButton-label-id"
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      data-tc="button-pagination-back"
+                      disabled=""
+                      tabindex="-1"
+                      type="button"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
+                      <span
+                        class="MuiIconButton-label-id"
                       >
-                        <path
-                          d="M14 7l-5 5 5 5V7z"
-                        />
-                        <path
-                          d="M24 0v24H0V0h24z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
-                    data-tc="button-pagination-next"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M14 7l-5 5 5 5V7z"
+                          />
+                          <path
+                            d="M24 0v24H0V0h24z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                      data-tc="button-pagination-next"
+                      tabindex="0"
+                      type="button"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
+                      <span
+                        class="MuiIconButton-label-id"
                       >
-                        <path
-                          d="M10 17l5-5-5-5v10z"
-                        />
-                        <path
-                          d="M0 24V0h24v24H0z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M10 17l5-5-5-5v10z"
+                          />
+                          <path
+                            d="M0 24V0h24v24H0z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </div>
                 </div>
-              </div>
-            </td>
-          </tr>
-        </tfoot>
-        <tbody
-          class="MuiTableBody-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id"
+              </td>
+            </tr>
+          </tfoot>
+          <tbody
+            class="MuiTableBody-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-              colspan="4"
+            <tr
+              class="MuiTableRow-root-id"
             >
-              No categories found
-            </td>
-          </tr>
-        </tbody>
-      </table>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id"
+                colspan="4"
+              >
+                No categories found
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
     </div>
   </div>
 </div>
@@ -14685,10 +14761,10 @@ exports[`Storyshots Views / Categories / Category list loading 1`] = `
   style="padding:24px"
 >
   <div
-    class="makeStyles-root-id"
+    class="Container-root-id"
   >
     <div
-      class="makeStyles-root-id"
+      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
         class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -14696,7 +14772,7 @@ exports[`Storyshots Views / Categories / Category list loading 1`] = `
         Categories
       </div>
       <div
-        class="makeStyles-action-id"
+        class="ExtendedPageHeader-action-id"
       >
         <div
           class="makeStyles-root-id"
@@ -14792,217 +14868,221 @@ exports[`Storyshots Views / Categories / Category list loading 1`] = `
       <hr
         class="makeStyles-root-id"
       />
-      <table
-        class="MuiTable-root-id"
+      <div
+        class="ResponsiveTable-root-id"
       >
-        <thead
-          class="MuiTableHead-root-id"
+        <table
+          class="MuiTable-root-id"
         >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-head-id"
+          <thead
+            class="MuiTableHead-root-id"
           >
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
-              scope="col"
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-head-id"
             >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
+                scope="col"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id CategoryList-colName-id"
-              scope="col"
-            >
-              Category Name
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id CategoryList-colSubcategories-id"
-              scope="col"
-            >
-              Subcategories
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id CategoryList-colProducts-id"
-              scope="col"
-            >
-              No. of Products
-            </th>
-          </tr>
-        </thead>
-        <tfoot
-          class="MuiTableFooter-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-footer-id"
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id CategoryList-colName-id"
+                scope="col"
+              >
+                Category Name
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id CategoryList-colSubcategories-id"
+                scope="col"
+              >
+                Subcategories
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id CategoryList-colProducts-id"
+                scope="col"
+              >
+                No. of Products
+              </th>
+            </tr>
+          </thead>
+          <tfoot
+            class="MuiTableFooter-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
-              colspan="4"
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-footer-id"
             >
-              <div
-                class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                colspan="4"
               >
                 <div
-                  class="makeStyles-spacer-id"
+                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
                 >
-                  <div>
-                    <span
-                      class="RowNumberSelect-label-id"
-                    >
-                      No of Rows:
-                    </span>
-                    <div
-                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
-                    >
+                  <div
+                    class="makeStyles-spacer-id"
+                  >
+                    <div>
+                      <span
+                        class="RowNumberSelect-label-id"
+                      >
+                        No of Rows:
+                      </span>
                       <div
-                        aria-haspopup="listbox"
-                        aria-labelledby=" "
-                        class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-id"
-                        role="button"
-                        tabindex="0"
+                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                       >
-                        20
-                      </div>
-                      <input
-                        type="hidden"
-                        value="20"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MuiSelect-icon-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M7 10l5 5 5-5z"
+                        <div
+                          aria-haspopup="listbox"
+                          aria-labelledby=" "
+                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-id"
+                          role="button"
+                          tabindex="0"
+                        >
+                          20
+                        </div>
+                        <input
+                          type="hidden"
+                          value="20"
                         />
-                      </svg>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M7 10l5 5 5-5z"
+                          />
+                        </svg>
+                      </div>
                     </div>
                   </div>
-                </div>
-                <div
-                  class="makeStyles-root-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                    data-tc="button-pagination-back"
-                    disabled=""
-                    tabindex="-1"
-                    type="button"
+                  <div
+                    class="makeStyles-root-id"
                   >
-                    <span
-                      class="MuiIconButton-label-id"
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      data-tc="button-pagination-back"
+                      disabled=""
+                      tabindex="-1"
+                      type="button"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
+                      <span
+                        class="MuiIconButton-label-id"
                       >
-                        <path
-                          d="M14 7l-5 5 5 5V7z"
-                        />
-                        <path
-                          d="M24 0v24H0V0h24z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
-                    data-tc="button-pagination-next"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M14 7l-5 5 5 5V7z"
+                          />
+                          <path
+                            d="M24 0v24H0V0h24z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                      data-tc="button-pagination-next"
+                      tabindex="0"
+                      type="button"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
+                      <span
+                        class="MuiIconButton-label-id"
                       >
-                        <path
-                          d="M10 17l5-5-5-5v10z"
-                        />
-                        <path
-                          d="M0 24V0h24v24H0z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M10 17l5-5-5-5v10z"
+                          />
+                          <path
+                            d="M0 24V0h24v24H0z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </div>
                 </div>
-              </div>
-            </td>
-          </tr>
-        </tfoot>
-        <tbody
-          class="MuiTableBody-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id CategoryList-tableRow-id"
-            data-tc="id"
+              </td>
+            </tr>
+          </tfoot>
+          <tbody
+            class="MuiTableBody-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+            <tr
+              class="MuiTableRow-root-id CategoryList-tableRow-id"
+              data-tc="id"
             >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colName-id"
-              data-tc="name"
-            >
-              <span
-                class="makeStyles-skeleton-id"
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colName-id"
+                data-tc="name"
               >
-                ‌
-              </span>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colSubcategories-id"
-            >
-              <span
-                class="makeStyles-skeleton-id"
+                <span
+                  class="makeStyles-skeleton-id"
+                >
+                  ‌
+                </span>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colSubcategories-id"
               >
-                ‌
-              </span>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colProducts-id"
-            >
-              <span
-                class="makeStyles-skeleton-id"
+                <span
+                  class="makeStyles-skeleton-id"
+                >
+                  ‌
+                </span>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colProducts-id"
               >
-                ‌
-              </span>
-            </td>
-          </tr>
-        </tbody>
-      </table>
+                <span
+                  class="makeStyles-skeleton-id"
+                >
+                  ‌
+                </span>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
     </div>
   </div>
 </div>
@@ -15014,10 +15094,10 @@ exports[`Storyshots Views / Categories / Create category When loading 1`] = `
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -15025,7 +15105,7 @@ exports[`Storyshots Views / Categories / Create category When loading 1`] = `
           Create New Category
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -15470,10 +15550,10 @@ exports[`Storyshots Views / Categories / Create category default 1`] = `
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -15481,7 +15561,7 @@ exports[`Storyshots Views / Categories / Create category default 1`] = `
           Create New Category
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -15925,10 +16005,10 @@ exports[`Storyshots Views / Categories / Update category default 1`] = `
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -15936,7 +16016,7 @@ exports[`Storyshots Views / Categories / Update category default 1`] = `
           Coffees
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -16764,126 +16844,130 @@ Ctrl + K"
         <hr
           class="makeStyles-hr-id"
         />
-        <table
-          class="MuiTable-root-id"
+        <div
+          class="ResponsiveTable-root-id"
         >
-          <thead
-            class="MuiTableHead-root-id"
+          <table
+            class="MuiTable-root-id"
           >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-head-id"
+            <thead
+              class="MuiTableHead-root-id"
             >
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id CategoryList-colName-id"
-                scope="col"
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-head-id"
               >
-                Category Name
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id CategoryList-colSubcategories-id"
-                scope="col"
-              >
-                Subcategories
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id CategoryList-colProducts-id"
-                scope="col"
-              >
-                No. of Products
-              </th>
-            </tr>
-          </thead>
-          <tfoot
-            class="MuiTableFooter-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-footer-id"
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id CategoryList-colName-id"
+                  scope="col"
+                >
+                  Category Name
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id CategoryList-colSubcategories-id"
+                  scope="col"
+                >
+                  Subcategories
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id CategoryList-colProducts-id"
+                  scope="col"
+                >
+                  No. of Products
+                </th>
+              </tr>
+            </thead>
+            <tfoot
+              class="MuiTableFooter-root-id"
             >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
-                colspan="4"
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-footer-id"
               >
-                <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                  colspan="4"
                 >
                   <div
-                    class="makeStyles-spacer-id"
-                  />
-                  <div
-                    class="makeStyles-root-id"
+                    class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
                   >
-                    <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
-                      data-tc="button-pagination-back"
-                      tabindex="0"
-                      type="button"
+                    <div
+                      class="makeStyles-spacer-id"
+                    />
+                    <div
+                      class="makeStyles-root-id"
                     >
-                      <span
-                        class="MuiIconButton-label-id"
+                      <button
+                        class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                        data-tc="button-pagination-back"
+                        tabindex="0"
+                        type="button"
                       >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          role="presentation"
-                          viewBox="0 0 24 24"
+                        <span
+                          class="MuiIconButton-label-id"
                         >
-                          <path
-                            d="M14 7l-5 5 5 5V7z"
-                          />
-                          <path
-                            d="M24 0v24H0V0h24z"
-                            fill="none"
-                          />
-                        </svg>
-                      </span>
-                    </button>
-                    <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
-                      data-tc="button-pagination-next"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M14 7l-5 5 5 5V7z"
+                            />
+                            <path
+                              d="M24 0v24H0V0h24z"
+                              fill="none"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                      <button
+                        class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                        data-tc="button-pagination-next"
+                        tabindex="0"
+                        type="button"
                       >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          role="presentation"
-                          viewBox="0 0 24 24"
+                        <span
+                          class="MuiIconButton-label-id"
                         >
-                          <path
-                            d="M10 17l5-5-5-5v10z"
-                          />
-                          <path
-                            d="M0 24V0h24v24H0z"
-                            fill="none"
-                          />
-                        </svg>
-                      </span>
-                    </button>
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M10 17l5-5-5-5v10z"
+                            />
+                            <path
+                              d="M0 24V0h24v24H0z"
+                              fill="none"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </div>
                   </div>
-                </div>
-              </td>
-            </tr>
-          </tfoot>
-          <tbody
-            class="MuiTableBody-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id"
+                </td>
+              </tr>
+            </tfoot>
+            <tbody
+              class="MuiTableBody-root-id"
             >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-                colspan="4"
+              <tr
+                class="MuiTableRow-root-id"
               >
-                No subcategories found
-              </td>
-            </tr>
-          </tbody>
-        </table>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                  colspan="4"
+                >
+                  No subcategories found
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
       </div>
     </div>
   </form>
@@ -16896,10 +16980,10 @@ exports[`Storyshots Views / Categories / Update category loading 1`] = `
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -16912,7 +16996,7 @@ exports[`Storyshots Views / Categories / Update category loading 1`] = `
           </span>
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -17454,186 +17538,190 @@ Ctrl + K"
         <hr
           class="makeStyles-hr-id"
         />
-        <table
-          class="MuiTable-root-id"
+        <div
+          class="ResponsiveTable-root-id"
         >
-          <thead
-            class="MuiTableHead-root-id"
+          <table
+            class="MuiTable-root-id"
           >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-head-id"
+            <thead
+              class="MuiTableHead-root-id"
             >
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
-                scope="col"
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-head-id"
               >
-                <button
-                  class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
-                  disabled=""
-                  tabindex="-1"
-                  type="button"
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
+                  scope="col"
                 >
-                  <input
-                    class="makeStyles-box-id makeStyles-disabled-id"
+                  <button
+                    class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
                     disabled=""
-                    type="checkbox"
-                    value="false"
-                  />
-                </button>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id CategoryList-colName-id"
-                scope="col"
-              >
-                Category Name
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id CategoryList-colSubcategories-id"
-                scope="col"
-              >
-                Subcategories
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id CategoryList-colProducts-id"
-                scope="col"
-              >
-                No. of Products
-              </th>
-            </tr>
-          </thead>
-          <tfoot
-            class="MuiTableFooter-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-footer-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
-                colspan="4"
-              >
-                <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
-                >
-                  <div
-                    class="makeStyles-spacer-id"
-                  />
-                  <div
-                    class="makeStyles-root-id"
+                    tabindex="-1"
+                    type="button"
                   >
-                    <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                      data-tc="button-pagination-back"
+                    <input
+                      class="makeStyles-box-id makeStyles-disabled-id"
                       disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          role="presentation"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M14 7l-5 5 5 5V7z"
-                          />
-                          <path
-                            d="M24 0v24H0V0h24z"
-                            fill="none"
-                          />
-                        </svg>
-                      </span>
-                    </button>
-                    <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                      data-tc="button-pagination-next"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          role="presentation"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M10 17l5-5-5-5v10z"
-                          />
-                          <path
-                            d="M0 24V0h24v24H0z"
-                            fill="none"
-                          />
-                        </svg>
-                      </span>
-                    </button>
-                  </div>
-                </div>
-              </td>
-            </tr>
-          </tfoot>
-          <tbody
-            class="MuiTableBody-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id CategoryList-tableRow-id"
-              data-tc="id"
+                      type="checkbox"
+                      value="false"
+                    />
+                  </button>
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id CategoryList-colName-id"
+                  scope="col"
+                >
+                  Category Name
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id CategoryList-colSubcategories-id"
+                  scope="col"
+                >
+                  Subcategories
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id CategoryList-colProducts-id"
+                  scope="col"
+                >
+                  No. of Products
+                </th>
+              </tr>
+            </thead>
+            <tfoot
+              class="MuiTableFooter-root-id"
             >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-footer-id"
               >
-                <button
-                  class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
-                  disabled=""
-                  tabindex="-1"
-                  type="button"
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                  colspan="4"
                 >
-                  <input
-                    class="makeStyles-box-id makeStyles-disabled-id"
+                  <div
+                    class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+                  >
+                    <div
+                      class="makeStyles-spacer-id"
+                    />
+                    <div
+                      class="makeStyles-root-id"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                        data-tc="button-pagination-back"
+                        disabled=""
+                        tabindex="-1"
+                        type="button"
+                      >
+                        <span
+                          class="MuiIconButton-label-id"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M14 7l-5 5 5 5V7z"
+                            />
+                            <path
+                              d="M24 0v24H0V0h24z"
+                              fill="none"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                      <button
+                        class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                        data-tc="button-pagination-next"
+                        disabled=""
+                        tabindex="-1"
+                        type="button"
+                      >
+                        <span
+                          class="MuiIconButton-label-id"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M10 17l5-5-5-5v10z"
+                            />
+                            <path
+                              d="M0 24V0h24v24H0z"
+                              fill="none"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </div>
+                  </div>
+                </td>
+              </tr>
+            </tfoot>
+            <tbody
+              class="MuiTableBody-root-id"
+            >
+              <tr
+                class="MuiTableRow-root-id CategoryList-tableRow-id"
+                data-tc="id"
+              >
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
                     disabled=""
-                    type="checkbox"
-                    value="false"
-                  />
-                </button>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colName-id"
-                data-tc="name"
-              >
-                <span
-                  class="makeStyles-skeleton-id"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <input
+                      class="makeStyles-box-id makeStyles-disabled-id"
+                      disabled=""
+                      type="checkbox"
+                      value="false"
+                    />
+                  </button>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colName-id"
+                  data-tc="name"
                 >
-                  ‌
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colSubcategories-id"
-              >
-                <span
-                  class="makeStyles-skeleton-id"
+                  <span
+                    class="makeStyles-skeleton-id"
+                  >
+                    ‌
+                  </span>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colSubcategories-id"
                 >
-                  ‌
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colProducts-id"
-              >
-                <span
-                  class="makeStyles-skeleton-id"
+                  <span
+                    class="makeStyles-skeleton-id"
+                  >
+                    ‌
+                  </span>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colProducts-id"
                 >
-                  ‌
-                </span>
-              </td>
-            </tr>
-          </tbody>
-        </table>
+                  <span
+                    class="makeStyles-skeleton-id"
+                  >
+                    ‌
+                  </span>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
       </div>
     </div>
   </form>
@@ -17646,10 +17734,10 @@ exports[`Storyshots Views / Categories / Update category no background 1`] = `
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -17657,7 +17745,7 @@ exports[`Storyshots Views / Categories / Update category no background 1`] = `
           Coffees
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -18439,126 +18527,130 @@ Ctrl + K"
         <hr
           class="makeStyles-hr-id"
         />
-        <table
-          class="MuiTable-root-id"
+        <div
+          class="ResponsiveTable-root-id"
         >
-          <thead
-            class="MuiTableHead-root-id"
+          <table
+            class="MuiTable-root-id"
           >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-head-id"
+            <thead
+              class="MuiTableHead-root-id"
             >
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id CategoryList-colName-id"
-                scope="col"
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-head-id"
               >
-                Category Name
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id CategoryList-colSubcategories-id"
-                scope="col"
-              >
-                Subcategories
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id CategoryList-colProducts-id"
-                scope="col"
-              >
-                No. of Products
-              </th>
-            </tr>
-          </thead>
-          <tfoot
-            class="MuiTableFooter-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-footer-id"
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id CategoryList-colName-id"
+                  scope="col"
+                >
+                  Category Name
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id CategoryList-colSubcategories-id"
+                  scope="col"
+                >
+                  Subcategories
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id CategoryList-colProducts-id"
+                  scope="col"
+                >
+                  No. of Products
+                </th>
+              </tr>
+            </thead>
+            <tfoot
+              class="MuiTableFooter-root-id"
             >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
-                colspan="4"
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-footer-id"
               >
-                <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                  colspan="4"
                 >
                   <div
-                    class="makeStyles-spacer-id"
-                  />
-                  <div
-                    class="makeStyles-root-id"
+                    class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
                   >
-                    <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
-                      data-tc="button-pagination-back"
-                      tabindex="0"
-                      type="button"
+                    <div
+                      class="makeStyles-spacer-id"
+                    />
+                    <div
+                      class="makeStyles-root-id"
                     >
-                      <span
-                        class="MuiIconButton-label-id"
+                      <button
+                        class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                        data-tc="button-pagination-back"
+                        tabindex="0"
+                        type="button"
                       >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          role="presentation"
-                          viewBox="0 0 24 24"
+                        <span
+                          class="MuiIconButton-label-id"
                         >
-                          <path
-                            d="M14 7l-5 5 5 5V7z"
-                          />
-                          <path
-                            d="M24 0v24H0V0h24z"
-                            fill="none"
-                          />
-                        </svg>
-                      </span>
-                    </button>
-                    <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
-                      data-tc="button-pagination-next"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M14 7l-5 5 5 5V7z"
+                            />
+                            <path
+                              d="M24 0v24H0V0h24z"
+                              fill="none"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                      <button
+                        class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                        data-tc="button-pagination-next"
+                        tabindex="0"
+                        type="button"
                       >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          role="presentation"
-                          viewBox="0 0 24 24"
+                        <span
+                          class="MuiIconButton-label-id"
                         >
-                          <path
-                            d="M10 17l5-5-5-5v10z"
-                          />
-                          <path
-                            d="M0 24V0h24v24H0z"
-                            fill="none"
-                          />
-                        </svg>
-                      </span>
-                    </button>
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M10 17l5-5-5-5v10z"
+                            />
+                            <path
+                              d="M0 24V0h24v24H0z"
+                              fill="none"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </div>
                   </div>
-                </div>
-              </td>
-            </tr>
-          </tfoot>
-          <tbody
-            class="MuiTableBody-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id"
+                </td>
+              </tr>
+            </tfoot>
+            <tbody
+              class="MuiTableBody-root-id"
             >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-                colspan="4"
+              <tr
+                class="MuiTableRow-root-id"
               >
-                No subcategories found
-              </td>
-            </tr>
-          </tbody>
-        </table>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                  colspan="4"
+                >
+                  No subcategories found
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
       </div>
     </div>
   </form>
@@ -18571,10 +18663,10 @@ exports[`Storyshots Views / Categories / Update category no products 1`] = `
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -18582,7 +18674,7 @@ exports[`Storyshots Views / Categories / Update category no products 1`] = `
           Coffees
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -19413,151 +19505,155 @@ Ctrl + K"
         <div
           class="CategoryProductList-tableContainer-id"
         >
-          <table
-            class="MuiTable-root-id CategoryProductList-table-id"
+          <div
+            class="ResponsiveTable-root-id"
           >
-            <colgroup>
-              <col />
-              <col
-                class="CategoryProductList-colName-id"
-              />
-              <col
-                class="CategoryProductList-colType-id"
-              />
-              <col
-                class="CategoryProductList-colPublished-id"
-              />
-              <col
-                class="CategoryProductList-colPrice-id"
-              />
-            </colgroup>
-            <thead
-              class="MuiTableHead-root-id"
+            <table
+              class="MuiTable-root-id CategoryProductList-table-id"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
+              <colgroup>
+                <col />
+                <col
+                  class="CategoryProductList-colName-id"
+                />
+                <col
+                  class="CategoryProductList-colType-id"
+                />
+                <col
+                  class="CategoryProductList-colPublished-id"
+                />
+                <col
+                  class="CategoryProductList-colPrice-id"
+                />
+              </colgroup>
+              <thead
+                class="MuiTableHead-root-id"
               >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id CategoryProductList-colName-id"
-                  scope="col"
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
-                  <span
-                    class="CategoryProductList-colNameHeader-id"
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id CategoryProductList-colName-id"
+                    scope="col"
                   >
-                    Name
-                  </span>
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id CategoryProductList-colType-id"
-                  scope="col"
-                >
-                  Type
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id CategoryProductList-colPublished-id"
-                  scope="col"
-                >
-                  Published
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id CategoryProductList-colPrice-id"
-                  scope="col"
-                >
-                  Price
-                </th>
-              </tr>
-            </thead>
-            <tfoot
-              class="MuiTableFooter-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-footer-id"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
-                  colspan="5"
-                >
-                  <div
-                    class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
-                  >
-                    <div
-                      class="makeStyles-spacer-id"
-                    />
-                    <div
-                      class="makeStyles-root-id"
+                    <span
+                      class="CategoryProductList-colNameHeader-id"
                     >
-                      <button
-                        class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
-                        data-tc="button-pagination-back"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <span
-                          class="MuiIconButton-label-id"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            role="presentation"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M14 7l-5 5 5 5V7z"
-                            />
-                            <path
-                              d="M24 0v24H0V0h24z"
-                              fill="none"
-                            />
-                          </svg>
-                        </span>
-                      </button>
-                      <button
-                        class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
-                        data-tc="button-pagination-next"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <span
-                          class="MuiIconButton-label-id"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            role="presentation"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M10 17l5-5-5-5v10z"
-                            />
-                            <path
-                              d="M0 24V0h24v24H0z"
-                              fill="none"
-                            />
-                          </svg>
-                        </span>
-                      </button>
-                    </div>
-                  </div>
-                </td>
-              </tr>
-            </tfoot>
-            <tbody
-              class="MuiTableBody-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id"
+                      Name
+                    </span>
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id CategoryProductList-colType-id"
+                    scope="col"
+                  >
+                    Type
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id CategoryProductList-colPublished-id"
+                    scope="col"
+                  >
+                    Published
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id CategoryProductList-colPrice-id"
+                    scope="col"
+                  >
+                    Price
+                  </th>
+                </tr>
+              </thead>
+              <tfoot
+                class="MuiTableFooter-root-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                  colspan="5"
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-footer-id"
                 >
-                  No products found
-                </td>
-              </tr>
-            </tbody>
-          </table>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                    colspan="5"
+                  >
+                    <div
+                      class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+                    >
+                      <div
+                        class="makeStyles-spacer-id"
+                      />
+                      <div
+                        class="makeStyles-root-id"
+                      >
+                        <button
+                          class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                          data-tc="button-pagination-back"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <span
+                            class="MuiIconButton-label-id"
+                          >
+                            <svg
+                              aria-hidden="true"
+                              class="MuiSvgIcon-root-id"
+                              focusable="false"
+                              role="presentation"
+                              viewBox="0 0 24 24"
+                            >
+                              <path
+                                d="M14 7l-5 5 5 5V7z"
+                              />
+                              <path
+                                d="M24 0v24H0V0h24z"
+                                fill="none"
+                              />
+                            </svg>
+                          </span>
+                        </button>
+                        <button
+                          class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                          data-tc="button-pagination-next"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <span
+                            class="MuiIconButton-label-id"
+                          >
+                            <svg
+                              aria-hidden="true"
+                              class="MuiSvgIcon-root-id"
+                              focusable="false"
+                              role="presentation"
+                              viewBox="0 0 24 24"
+                            >
+                              <path
+                                d="M10 17l5-5-5-5v10z"
+                              />
+                              <path
+                                d="M0 24V0h24v24H0z"
+                                fill="none"
+                              />
+                            </svg>
+                          </span>
+                        </button>
+                      </div>
+                    </div>
+                  </td>
+                </tr>
+              </tfoot>
+              <tbody
+                class="MuiTableBody-root-id"
+              >
+                <tr
+                  class="MuiTableRow-root-id"
+                >
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                    colspan="5"
+                  >
+                    No products found
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
         </div>
       </div>
     </div>
@@ -19571,10 +19667,10 @@ exports[`Storyshots Views / Categories / Update category no subcategories 1`] =
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -19582,7 +19678,7 @@ exports[`Storyshots Views / Categories / Update category no subcategories 1`] =
           Coffees
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -20410,126 +20506,130 @@ Ctrl + K"
         <hr
           class="makeStyles-hr-id"
         />
-        <table
-          class="MuiTable-root-id"
+        <div
+          class="ResponsiveTable-root-id"
         >
-          <thead
-            class="MuiTableHead-root-id"
+          <table
+            class="MuiTable-root-id"
           >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-head-id"
+            <thead
+              class="MuiTableHead-root-id"
             >
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id CategoryList-colName-id"
-                scope="col"
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-head-id"
               >
-                Category Name
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id CategoryList-colSubcategories-id"
-                scope="col"
-              >
-                Subcategories
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id CategoryList-colProducts-id"
-                scope="col"
-              >
-                No. of Products
-              </th>
-            </tr>
-          </thead>
-          <tfoot
-            class="MuiTableFooter-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-footer-id"
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id CategoryList-colName-id"
+                  scope="col"
+                >
+                  Category Name
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id CategoryList-colSubcategories-id"
+                  scope="col"
+                >
+                  Subcategories
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id CategoryList-colProducts-id"
+                  scope="col"
+                >
+                  No. of Products
+                </th>
+              </tr>
+            </thead>
+            <tfoot
+              class="MuiTableFooter-root-id"
             >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
-                colspan="4"
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-footer-id"
               >
-                <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                  colspan="4"
                 >
                   <div
-                    class="makeStyles-spacer-id"
-                  />
-                  <div
-                    class="makeStyles-root-id"
+                    class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
                   >
-                    <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
-                      data-tc="button-pagination-back"
-                      tabindex="0"
-                      type="button"
+                    <div
+                      class="makeStyles-spacer-id"
+                    />
+                    <div
+                      class="makeStyles-root-id"
                     >
-                      <span
-                        class="MuiIconButton-label-id"
+                      <button
+                        class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                        data-tc="button-pagination-back"
+                        tabindex="0"
+                        type="button"
                       >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          role="presentation"
-                          viewBox="0 0 24 24"
+                        <span
+                          class="MuiIconButton-label-id"
                         >
-                          <path
-                            d="M14 7l-5 5 5 5V7z"
-                          />
-                          <path
-                            d="M24 0v24H0V0h24z"
-                            fill="none"
-                          />
-                        </svg>
-                      </span>
-                    </button>
-                    <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
-                      data-tc="button-pagination-next"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M14 7l-5 5 5 5V7z"
+                            />
+                            <path
+                              d="M24 0v24H0V0h24z"
+                              fill="none"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                      <button
+                        class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                        data-tc="button-pagination-next"
+                        tabindex="0"
+                        type="button"
                       >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          role="presentation"
-                          viewBox="0 0 24 24"
+                        <span
+                          class="MuiIconButton-label-id"
                         >
-                          <path
-                            d="M10 17l5-5-5-5v10z"
-                          />
-                          <path
-                            d="M0 24V0h24v24H0z"
-                            fill="none"
-                          />
-                        </svg>
-                      </span>
-                    </button>
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M10 17l5-5-5-5v10z"
+                            />
+                            <path
+                              d="M0 24V0h24v24H0z"
+                              fill="none"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </div>
                   </div>
-                </div>
-              </td>
-            </tr>
-          </tfoot>
-          <tbody
-            class="MuiTableBody-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id"
+                </td>
+              </tr>
+            </tfoot>
+            <tbody
+              class="MuiTableBody-root-id"
             >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-                colspan="4"
+              <tr
+                class="MuiTableRow-root-id"
               >
-                No subcategories found
-              </td>
-            </tr>
-          </tbody>
-        </table>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                  colspan="4"
+                >
+                  No subcategories found
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
       </div>
     </div>
   </form>
@@ -20542,10 +20642,10 @@ exports[`Storyshots Views / Categories / Update category products 1`] = `
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -20553,7 +20653,7 @@ exports[`Storyshots Views / Categories / Update category products 1`] = `
           Coffees
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -21384,747 +21484,751 @@ Ctrl + K"
         <div
           class="CategoryProductList-tableContainer-id"
         >
-          <table
-            class="MuiTable-root-id CategoryProductList-table-id"
+          <div
+            class="ResponsiveTable-root-id"
           >
-            <colgroup>
-              <col />
-              <col
-                class="CategoryProductList-colName-id"
-              />
-              <col
-                class="CategoryProductList-colType-id"
-              />
-              <col
-                class="CategoryProductList-colPublished-id"
-              />
-              <col
-                class="CategoryProductList-colPrice-id"
-              />
-            </colgroup>
-            <thead
-              class="MuiTableHead-root-id"
+            <table
+              class="MuiTable-root-id CategoryProductList-table-id"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
+              <colgroup>
+                <col />
+                <col
+                  class="CategoryProductList-colName-id"
+                />
+                <col
+                  class="CategoryProductList-colType-id"
+                />
+                <col
+                  class="CategoryProductList-colPublished-id"
+                />
+                <col
+                  class="CategoryProductList-colPrice-id"
+                />
+              </colgroup>
+              <thead
+                class="MuiTableHead-root-id"
               >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
-                  scope="col"
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
-                  <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
-                    tabindex="0"
-                    type="button"
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
+                    scope="col"
                   >
-                    <input
-                      class="makeStyles-box-id"
-                      type="checkbox"
-                      value="false"
-                    />
-                  </button>
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id CategoryProductList-colName-id"
-                  scope="col"
-                >
-                  <span
-                    class="CategoryProductList-colNameHeader-id"
-                  >
-                    Name
-                  </span>
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id CategoryProductList-colType-id"
-                  scope="col"
-                >
-                  Type
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id CategoryProductList-colPublished-id"
-                  scope="col"
-                >
-                  Published
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id CategoryProductList-colPrice-id"
-                  scope="col"
-                >
-                  Price
-                </th>
-              </tr>
-            </thead>
-            <tfoot
-              class="MuiTableFooter-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-footer-id"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
-                  colspan="5"
-                >
-                  <div
-                    class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
-                  >
-                    <div
-                      class="makeStyles-spacer-id"
-                    />
-                    <div
-                      class="makeStyles-root-id"
+                    <button
+                      class="MuiButtonBase-root-id makeStyles-root-id"
+                      tabindex="0"
+                      type="button"
                     >
-                      <button
-                        class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
-                        data-tc="button-pagination-back"
-                        tabindex="0"
-                        type="button"
+                      <input
+                        class="makeStyles-box-id"
+                        type="checkbox"
+                        value="false"
+                      />
+                    </button>
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id CategoryProductList-colName-id"
+                    scope="col"
+                  >
+                    <span
+                      class="CategoryProductList-colNameHeader-id"
+                    >
+                      Name
+                    </span>
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id CategoryProductList-colType-id"
+                    scope="col"
+                  >
+                    Type
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id CategoryProductList-colPublished-id"
+                    scope="col"
+                  >
+                    Published
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id CategoryProductList-colPrice-id"
+                    scope="col"
+                  >
+                    Price
+                  </th>
+                </tr>
+              </thead>
+              <tfoot
+                class="MuiTableFooter-root-id"
+              >
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-footer-id"
+                >
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                    colspan="5"
+                  >
+                    <div
+                      class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+                    >
+                      <div
+                        class="makeStyles-spacer-id"
+                      />
+                      <div
+                        class="makeStyles-root-id"
                       >
-                        <span
-                          class="MuiIconButton-label-id"
+                        <button
+                          class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                          data-tc="button-pagination-back"
+                          tabindex="0"
+                          type="button"
                         >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            role="presentation"
-                            viewBox="0 0 24 24"
+                          <span
+                            class="MuiIconButton-label-id"
                           >
-                            <path
-                              d="M14 7l-5 5 5 5V7z"
-                            />
-                            <path
-                              d="M24 0v24H0V0h24z"
-                              fill="none"
-                            />
-                          </svg>
-                        </span>
-                      </button>
-                      <button
-                        class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
-                        data-tc="button-pagination-next"
-                        tabindex="0"
-                        type="button"
+                            <svg
+                              aria-hidden="true"
+                              class="MuiSvgIcon-root-id"
+                              focusable="false"
+                              role="presentation"
+                              viewBox="0 0 24 24"
+                            >
+                              <path
+                                d="M14 7l-5 5 5 5V7z"
+                              />
+                              <path
+                                d="M24 0v24H0V0h24z"
+                                fill="none"
+                              />
+                            </svg>
+                          </span>
+                        </button>
+                        <button
+                          class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                          data-tc="button-pagination-next"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <span
+                            class="MuiIconButton-label-id"
+                          >
+                            <svg
+                              aria-hidden="true"
+                              class="MuiSvgIcon-root-id"
+                              focusable="false"
+                              role="presentation"
+                              viewBox="0 0 24 24"
+                            >
+                              <path
+                                d="M10 17l5-5-5-5v10z"
+                              />
+                              <path
+                                d="M0 24V0h24v24H0z"
+                                fill="none"
+                              />
+                            </svg>
+                          </span>
+                        </button>
+                      </div>
+                    </div>
+                  </td>
+                </tr>
+              </tfoot>
+              <tbody
+                class="MuiTableBody-root-id"
+              >
+                <tr
+                  class="MuiTableRow-root-id CategoryProductList-link-id MuiTableRow-hover-id"
+                >
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+                  >
+                    <button
+                      class="MuiButtonBase-root-id makeStyles-root-id"
+                      tabindex="0"
+                      type="button"
+                    >
+                      <input
+                        class="makeStyles-box-id"
+                        type="checkbox"
+                        value="false"
+                      />
+                    </button>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id CategoryProductList-colName-id"
+                  >
+                    <div
+                      class="makeStyles-content-id"
+                    >
+                      <div
+                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
                       >
-                        <span
-                          class="MuiIconButton-label-id"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            role="presentation"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M10 17l5-5-5-5v10z"
-                            />
-                            <path
-                              d="M0 24V0h24v24H0z"
-                              fill="none"
-                            />
-                          </svg>
-                        </span>
-                      </button>
+                        <img
+                          class="MuiAvatar-img-id"
+                          src="placeholder255x255.png"
+                        />
+                      </div>
+                      <div
+                        class="makeStyles-children-id"
+                      >
+                        Gardner-Schultz
+                      </div>
                     </div>
-                  </div>
-                </td>
-              </tr>
-            </tfoot>
-            <tbody
-              class="MuiTableBody-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id CategoryProductList-link-id MuiTableRow-hover-id"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
-                    tabindex="0"
-                    type="button"
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colType-id"
                   >
-                    <input
-                      class="makeStyles-box-id"
-                      type="checkbox"
-                      value="false"
-                    />
-                  </button>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id CategoryProductList-colName-id"
-                >
-                  <div
-                    class="makeStyles-content-id"
+                    Coffee
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colPublished-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      class="makeStyles-root-id undefined makeStyles-successDot-id"
                     >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
+                      Published
+                    </div>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colPrice-id"
+                  >
+                    $83.30
+                  </td>
+                </tr>
+                <tr
+                  class="MuiTableRow-root-id CategoryProductList-link-id MuiTableRow-hover-id"
+                >
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+                  >
+                    <button
+                      class="MuiButtonBase-root-id makeStyles-root-id"
+                      tabindex="0"
+                      type="button"
+                    >
+                      <input
+                        class="makeStyles-box-id"
+                        type="checkbox"
+                        value="false"
                       />
-                    </div>
-                    <div
-                      class="makeStyles-children-id"
-                    >
-                      Gardner-Schultz
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colType-id"
-                >
-                  Coffee
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colPublished-id"
-                >
-                  <div
-                    class="makeStyles-root-id undefined makeStyles-successDot-id"
-                  >
-                    Published
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colPrice-id"
-                >
-                  $83.30
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id CategoryProductList-link-id MuiTableRow-hover-id"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <input
-                      class="makeStyles-box-id"
-                      type="checkbox"
-                      value="false"
-                    />
-                  </button>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id CategoryProductList-colName-id"
-                >
-                  <div
-                    class="makeStyles-content-id"
+                    </button>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id CategoryProductList-colName-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      class="makeStyles-content-id"
                     >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
+                      <div
+                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      >
+                        <img
+                          class="MuiAvatar-img-id"
+                          src="placeholder255x255.png"
+                        />
+                      </div>
+                      <div
+                        class="makeStyles-children-id"
+                      >
+                        James, Martinez and Murray
+                      </div>
+                    </div>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colType-id"
+                  >
+                    Coffee
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colPublished-id"
+                  >
+                    <div
+                      class="makeStyles-root-id undefined makeStyles-successDot-id"
+                    >
+                      Published
+                    </div>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colPrice-id"
+                  >
+                    $68.27
+                  </td>
+                </tr>
+                <tr
+                  class="MuiTableRow-root-id CategoryProductList-link-id MuiTableRow-hover-id"
+                >
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+                  >
+                    <button
+                      class="MuiButtonBase-root-id makeStyles-root-id"
+                      tabindex="0"
+                      type="button"
+                    >
+                      <input
+                        class="makeStyles-box-id"
+                        type="checkbox"
+                        value="false"
                       />
-                    </div>
-                    <div
-                      class="makeStyles-children-id"
-                    >
-                      James, Martinez and Murray
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colType-id"
-                >
-                  Coffee
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colPublished-id"
-                >
-                  <div
-                    class="makeStyles-root-id undefined makeStyles-successDot-id"
-                  >
-                    Published
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colPrice-id"
-                >
-                  $68.27
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id CategoryProductList-link-id MuiTableRow-hover-id"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <input
-                      class="makeStyles-box-id"
-                      type="checkbox"
-                      value="false"
-                    />
-                  </button>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id CategoryProductList-colName-id"
-                >
-                  <div
-                    class="makeStyles-content-id"
+                    </button>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id CategoryProductList-colName-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      class="makeStyles-content-id"
                     >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
+                      <div
+                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      >
+                        <img
+                          class="MuiAvatar-img-id"
+                          src="placeholder255x255.png"
+                        />
+                      </div>
+                      <div
+                        class="makeStyles-children-id"
+                      >
+                        Curtis, Joyce and Turner
+                      </div>
+                    </div>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colType-id"
+                  >
+                    Coffee
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colPublished-id"
+                  >
+                    <div
+                      class="makeStyles-root-id undefined makeStyles-successDot-id"
+                    >
+                      Published
+                    </div>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colPrice-id"
+                  >
+                    $21.43
+                  </td>
+                </tr>
+                <tr
+                  class="MuiTableRow-root-id CategoryProductList-link-id MuiTableRow-hover-id"
+                >
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+                  >
+                    <button
+                      class="MuiButtonBase-root-id makeStyles-root-id"
+                      tabindex="0"
+                      type="button"
+                    >
+                      <input
+                        class="makeStyles-box-id"
+                        type="checkbox"
+                        value="false"
                       />
-                    </div>
-                    <div
-                      class="makeStyles-children-id"
-                    >
-                      Curtis, Joyce and Turner
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colType-id"
-                >
-                  Coffee
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colPublished-id"
-                >
-                  <div
-                    class="makeStyles-root-id undefined makeStyles-successDot-id"
-                  >
-                    Published
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colPrice-id"
-                >
-                  $21.43
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id CategoryProductList-link-id MuiTableRow-hover-id"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <input
-                      class="makeStyles-box-id"
-                      type="checkbox"
-                      value="false"
-                    />
-                  </button>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id CategoryProductList-colName-id"
-                >
-                  <div
-                    class="makeStyles-content-id"
+                    </button>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id CategoryProductList-colName-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      class="makeStyles-content-id"
                     >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
+                      <div
+                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      >
+                        <img
+                          class="MuiAvatar-img-id"
+                          src="placeholder255x255.png"
+                        />
+                      </div>
+                      <div
+                        class="makeStyles-children-id"
+                      >
+                        Davis, Brown and Ray
+                      </div>
+                    </div>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colType-id"
+                  >
+                    Coffee
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colPublished-id"
+                  >
+                    <div
+                      class="makeStyles-root-id undefined makeStyles-successDot-id"
+                    >
+                      Published
+                    </div>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colPrice-id"
+                  >
+                    $62.76
+                  </td>
+                </tr>
+                <tr
+                  class="MuiTableRow-root-id CategoryProductList-link-id MuiTableRow-hover-id"
+                >
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+                  >
+                    <button
+                      class="MuiButtonBase-root-id makeStyles-root-id"
+                      tabindex="0"
+                      type="button"
+                    >
+                      <input
+                        class="makeStyles-box-id"
+                        type="checkbox"
+                        value="false"
                       />
-                    </div>
-                    <div
-                      class="makeStyles-children-id"
-                    >
-                      Davis, Brown and Ray
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colType-id"
-                >
-                  Coffee
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colPublished-id"
-                >
-                  <div
-                    class="makeStyles-root-id undefined makeStyles-successDot-id"
-                  >
-                    Published
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colPrice-id"
-                >
-                  $62.76
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id CategoryProductList-link-id MuiTableRow-hover-id"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <input
-                      class="makeStyles-box-id"
-                      type="checkbox"
-                      value="false"
-                    />
-                  </button>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id CategoryProductList-colName-id"
-                >
-                  <div
-                    class="makeStyles-content-id"
+                    </button>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id CategoryProductList-colName-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      class="makeStyles-content-id"
                     >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
+                      <div
+                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      >
+                        <img
+                          class="MuiAvatar-img-id"
+                          src="placeholder255x255.png"
+                        />
+                      </div>
+                      <div
+                        class="makeStyles-children-id"
+                      >
+                        Gallegos Ltd
+                      </div>
+                    </div>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colType-id"
+                  >
+                    Coffee
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colPublished-id"
+                  >
+                    <div
+                      class="makeStyles-root-id undefined makeStyles-successDot-id"
+                    >
+                      Published
+                    </div>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colPrice-id"
+                  >
+                    $7.13
+                  </td>
+                </tr>
+                <tr
+                  class="MuiTableRow-root-id CategoryProductList-link-id MuiTableRow-hover-id"
+                >
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+                  >
+                    <button
+                      class="MuiButtonBase-root-id makeStyles-root-id"
+                      tabindex="0"
+                      type="button"
+                    >
+                      <input
+                        class="makeStyles-box-id"
+                        type="checkbox"
+                        value="false"
                       />
-                    </div>
-                    <div
-                      class="makeStyles-children-id"
-                    >
-                      Gallegos Ltd
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colType-id"
-                >
-                  Coffee
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colPublished-id"
-                >
-                  <div
-                    class="makeStyles-root-id undefined makeStyles-successDot-id"
-                  >
-                    Published
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colPrice-id"
-                >
-                  $7.13
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id CategoryProductList-link-id MuiTableRow-hover-id"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <input
-                      class="makeStyles-box-id"
-                      type="checkbox"
-                      value="false"
-                    />
-                  </button>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id CategoryProductList-colName-id"
-                >
-                  <div
-                    class="makeStyles-content-id"
+                    </button>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id CategoryProductList-colName-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      class="makeStyles-content-id"
                     >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
+                      <div
+                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      >
+                        <img
+                          class="MuiAvatar-img-id"
+                          src="placeholder255x255.png"
+                        />
+                      </div>
+                      <div
+                        class="makeStyles-children-id"
+                      >
+                        Franklin Inc
+                      </div>
+                    </div>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colType-id"
+                  >
+                    Coffee
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colPublished-id"
+                  >
+                    <div
+                      class="makeStyles-root-id undefined makeStyles-successDot-id"
+                    >
+                      Published
+                    </div>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colPrice-id"
+                  >
+                    $48.82
+                  </td>
+                </tr>
+                <tr
+                  class="MuiTableRow-root-id CategoryProductList-link-id MuiTableRow-hover-id"
+                >
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+                  >
+                    <button
+                      class="MuiButtonBase-root-id makeStyles-root-id"
+                      tabindex="0"
+                      type="button"
+                    >
+                      <input
+                        class="makeStyles-box-id"
+                        type="checkbox"
+                        value="false"
                       />
-                    </div>
-                    <div
-                      class="makeStyles-children-id"
-                    >
-                      Franklin Inc
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colType-id"
-                >
-                  Coffee
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colPublished-id"
-                >
-                  <div
-                    class="makeStyles-root-id undefined makeStyles-successDot-id"
-                  >
-                    Published
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colPrice-id"
-                >
-                  $48.82
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id CategoryProductList-link-id MuiTableRow-hover-id"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <input
-                      class="makeStyles-box-id"
-                      type="checkbox"
-                      value="false"
-                    />
-                  </button>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id CategoryProductList-colName-id"
-                >
-                  <div
-                    class="makeStyles-content-id"
+                    </button>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id CategoryProductList-colName-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      class="makeStyles-content-id"
                     >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
+                      <div
+                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      >
+                        <img
+                          class="MuiAvatar-img-id"
+                          src="placeholder255x255.png"
+                        />
+                      </div>
+                      <div
+                        class="makeStyles-children-id"
+                      >
+                        Williams-Taylor
+                      </div>
+                    </div>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colType-id"
+                  >
+                    Coffee
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colPublished-id"
+                  >
+                    <div
+                      class="makeStyles-root-id undefined makeStyles-successDot-id"
+                    >
+                      Published
+                    </div>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colPrice-id"
+                  >
+                    $27.34
+                  </td>
+                </tr>
+                <tr
+                  class="MuiTableRow-root-id CategoryProductList-link-id MuiTableRow-hover-id"
+                >
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+                  >
+                    <button
+                      class="MuiButtonBase-root-id makeStyles-root-id"
+                      tabindex="0"
+                      type="button"
+                    >
+                      <input
+                        class="makeStyles-box-id"
+                        type="checkbox"
+                        value="false"
                       />
-                    </div>
-                    <div
-                      class="makeStyles-children-id"
-                    >
-                      Williams-Taylor
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colType-id"
-                >
-                  Coffee
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colPublished-id"
-                >
-                  <div
-                    class="makeStyles-root-id undefined makeStyles-successDot-id"
-                  >
-                    Published
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colPrice-id"
-                >
-                  $27.34
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id CategoryProductList-link-id MuiTableRow-hover-id"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <input
-                      class="makeStyles-box-id"
-                      type="checkbox"
-                      value="false"
-                    />
-                  </button>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id CategoryProductList-colName-id"
-                >
-                  <div
-                    class="makeStyles-content-id"
+                    </button>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id CategoryProductList-colName-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      class="makeStyles-content-id"
                     >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
+                      <div
+                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      >
+                        <img
+                          class="MuiAvatar-img-id"
+                          src="placeholder255x255.png"
+                        />
+                      </div>
+                      <div
+                        class="makeStyles-children-id"
+                      >
+                        Riddle, Evans and Hicks
+                      </div>
+                    </div>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colType-id"
+                  >
+                    Coffee
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colPublished-id"
+                  >
+                    <div
+                      class="makeStyles-root-id undefined makeStyles-successDot-id"
+                    >
+                      Published
+                    </div>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colPrice-id"
+                  >
+                    $75.42
+                  </td>
+                </tr>
+                <tr
+                  class="MuiTableRow-root-id CategoryProductList-link-id MuiTableRow-hover-id"
+                >
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+                  >
+                    <button
+                      class="MuiButtonBase-root-id makeStyles-root-id"
+                      tabindex="0"
+                      type="button"
+                    >
+                      <input
+                        class="makeStyles-box-id"
+                        type="checkbox"
+                        value="false"
                       />
-                    </div>
-                    <div
-                      class="makeStyles-children-id"
-                    >
-                      Riddle, Evans and Hicks
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colType-id"
-                >
-                  Coffee
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colPublished-id"
-                >
-                  <div
-                    class="makeStyles-root-id undefined makeStyles-successDot-id"
-                  >
-                    Published
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colPrice-id"
-                >
-                  $75.42
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id CategoryProductList-link-id MuiTableRow-hover-id"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <input
-                      class="makeStyles-box-id"
-                      type="checkbox"
-                      value="false"
-                    />
-                  </button>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id CategoryProductList-colName-id"
-                >
-                  <div
-                    class="makeStyles-content-id"
+                    </button>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id CategoryProductList-colName-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      class="makeStyles-content-id"
                     >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
+                      <div
+                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      >
+                        <img
+                          class="MuiAvatar-img-id"
+                          src="placeholder255x255.png"
+                        />
+                      </div>
+                      <div
+                        class="makeStyles-children-id"
+                      >
+                        Hebert-Sherman
+                      </div>
+                    </div>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colType-id"
+                  >
+                    Coffee
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colPublished-id"
+                  >
+                    <div
+                      class="makeStyles-root-id undefined makeStyles-successDot-id"
+                    >
+                      Published
+                    </div>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colPrice-id"
+                  >
+                    $86.62
+                  </td>
+                </tr>
+                <tr
+                  class="MuiTableRow-root-id CategoryProductList-link-id MuiTableRow-hover-id"
+                >
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+                  >
+                    <button
+                      class="MuiButtonBase-root-id makeStyles-root-id"
+                      tabindex="0"
+                      type="button"
+                    >
+                      <input
+                        class="makeStyles-box-id"
+                        type="checkbox"
+                        value="false"
                       />
-                    </div>
-                    <div
-                      class="makeStyles-children-id"
-                    >
-                      Hebert-Sherman
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colType-id"
-                >
-                  Coffee
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colPublished-id"
-                >
-                  <div
-                    class="makeStyles-root-id undefined makeStyles-successDot-id"
-                  >
-                    Published
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colPrice-id"
-                >
-                  $86.62
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id CategoryProductList-link-id MuiTableRow-hover-id"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <input
-                      class="makeStyles-box-id"
-                      type="checkbox"
-                      value="false"
-                    />
-                  </button>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id CategoryProductList-colName-id"
-                >
-                  <div
-                    class="makeStyles-content-id"
+                    </button>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id CategoryProductList-colName-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      class="makeStyles-content-id"
                     >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
+                      <div
+                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      >
+                        <img
+                          class="MuiAvatar-img-id"
+                          src="placeholder255x255.png"
+                        />
+                      </div>
+                      <div
+                        class="makeStyles-children-id"
+                      >
+                        Carter and Sons
+                      </div>
                     </div>
-                    <div
-                      class="makeStyles-children-id"
-                    >
-                      Carter and Sons
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colType-id"
-                >
-                  Coffee
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colPublished-id"
-                >
-                  <div
-                    class="makeStyles-root-id undefined makeStyles-successDot-id"
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colType-id"
                   >
-                    Published
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colPrice-id"
-                >
-                  $48.66
-                </td>
-              </tr>
-            </tbody>
-          </table>
+                    Coffee
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colPublished-id"
+                  >
+                    <div
+                      class="makeStyles-root-id undefined makeStyles-successDot-id"
+                    >
+                      Published
+                    </div>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colPrice-id"
+                  >
+                    $48.66
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
         </div>
       </div>
     </div>
@@ -22138,10 +22242,10 @@ exports[`Storyshots Views / Collections / Collection details default 1`] = `
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -22149,7 +22253,7 @@ exports[`Storyshots Views / Collections / Collection details default 1`] = `
           Summer collection
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -22916,457 +23020,461 @@ Ctrl + K"
             <hr
               class="makeStyles-hr-id"
             />
-            <table
-              class="MuiTable-root-id CollectionProducts-table-id"
+            <div
+              class="ResponsiveTable-root-id"
             >
-              <thead
-                class="MuiTableHead-root-id"
+              <table
+                class="MuiTable-root-id CollectionProducts-table-id"
               >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
+                <thead
+                  class="MuiTableHead-root-id"
                 >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
-                    scope="col"
+                  <tr
+                    class="MuiTableRow-root-id MuiTableRow-head-id"
                   >
-                    <button
-                      class="MuiButtonBase-root-id makeStyles-root-id"
-                      tabindex="0"
-                      type="button"
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
+                      scope="col"
                     >
-                      <input
-                        class="makeStyles-box-id"
-                        type="checkbox"
-                        value="false"
-                      />
-                    </button>
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id CollectionProducts-colName-id"
-                    scope="col"
-                  >
-                    <span
-                      class="CollectionProducts-colNameLabel-id"
-                    >
-                      Name
-                    </span>
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id CollectionProducts-colType-id"
-                    scope="col"
-                  >
-                    Type
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id CollectionProducts-colPublished-id"
-                    scope="col"
-                  >
-                    Published
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id CollectionProducts-colActions-id"
-                    scope="col"
-                  />
-                </tr>
-              </thead>
-              <tfoot
-                class="MuiTableFooter-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-footer-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
-                    colspan="5"
-                  >
-                    <div
-                      class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
-                    >
-                      <div
-                        class="makeStyles-spacer-id"
-                      />
-                      <div
-                        class="makeStyles-root-id"
+                      <button
+                        class="MuiButtonBase-root-id makeStyles-root-id"
+                        tabindex="0"
+                        type="button"
                       >
-                        <button
-                          class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                          data-tc="button-pagination-back"
-                          disabled=""
-                          tabindex="-1"
-                          type="button"
+                        <input
+                          class="makeStyles-box-id"
+                          type="checkbox"
+                          value="false"
+                        />
+                      </button>
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id CollectionProducts-colName-id"
+                      scope="col"
+                    >
+                      <span
+                        class="CollectionProducts-colNameLabel-id"
+                      >
+                        Name
+                      </span>
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id CollectionProducts-colType-id"
+                      scope="col"
+                    >
+                      Type
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id CollectionProducts-colPublished-id"
+                      scope="col"
+                    >
+                      Published
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id CollectionProducts-colActions-id"
+                      scope="col"
+                    />
+                  </tr>
+                </thead>
+                <tfoot
+                  class="MuiTableFooter-root-id"
+                >
+                  <tr
+                    class="MuiTableRow-root-id MuiTableRow-footer-id"
+                  >
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                      colspan="5"
+                    >
+                      <div
+                        class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+                      >
+                        <div
+                          class="makeStyles-spacer-id"
+                        />
+                        <div
+                          class="makeStyles-root-id"
                         >
-                          <span
-                            class="MuiIconButton-label-id"
+                          <button
+                            class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                            data-tc="button-pagination-back"
+                            disabled=""
+                            tabindex="-1"
+                            type="button"
                           >
-                            <svg
-                              aria-hidden="true"
-                              class="MuiSvgIcon-root-id"
-                              focusable="false"
-                              role="presentation"
-                              viewBox="0 0 24 24"
+                            <span
+                              class="MuiIconButton-label-id"
                             >
-                              <path
-                                d="M14 7l-5 5 5 5V7z"
-                              />
-                              <path
-                                d="M24 0v24H0V0h24z"
-                                fill="none"
-                              />
-                            </svg>
-                          </span>
-                        </button>
-                        <button
-                          class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
-                          data-tc="button-pagination-next"
-                          tabindex="0"
-                          type="button"
-                        >
-                          <span
-                            class="MuiIconButton-label-id"
+                              <svg
+                                aria-hidden="true"
+                                class="MuiSvgIcon-root-id"
+                                focusable="false"
+                                role="presentation"
+                                viewBox="0 0 24 24"
+                              >
+                                <path
+                                  d="M14 7l-5 5 5 5V7z"
+                                />
+                                <path
+                                  d="M24 0v24H0V0h24z"
+                                  fill="none"
+                                />
+                              </svg>
+                            </span>
+                          </button>
+                          <button
+                            class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                            data-tc="button-pagination-next"
+                            tabindex="0"
+                            type="button"
                           >
-                            <svg
-                              aria-hidden="true"
-                              class="MuiSvgIcon-root-id"
-                              focusable="false"
-                              role="presentation"
-                              viewBox="0 0 24 24"
+                            <span
+                              class="MuiIconButton-label-id"
                             >
-                              <path
-                                d="M10 17l5-5-5-5v10z"
-                              />
-                              <path
-                                d="M0 24V0h24v24H0z"
-                                fill="none"
-                              />
-                            </svg>
-                          </span>
-                        </button>
+                              <svg
+                                aria-hidden="true"
+                                class="MuiSvgIcon-root-id"
+                                focusable="false"
+                                role="presentation"
+                                viewBox="0 0 24 24"
+                              >
+                                <path
+                                  d="M10 17l5-5-5-5v10z"
+                                />
+                                <path
+                                  d="M0 24V0h24v24H0z"
+                                  fill="none"
+                                />
+                              </svg>
+                            </span>
+                          </button>
+                        </div>
                       </div>
-                    </div>
-                  </td>
-                </tr>
-              </tfoot>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id CollectionProducts-tableRow-id MuiTableRow-hover-id"
+                    </td>
+                  </tr>
+                </tfoot>
+                <tbody
+                  class="MuiTableBody-root-id"
                 >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+                  <tr
+                    class="MuiTableRow-root-id CollectionProducts-tableRow-id MuiTableRow-hover-id"
                   >
-                    <button
-                      class="MuiButtonBase-root-id makeStyles-root-id"
-                      tabindex="0"
-                      type="button"
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                     >
-                      <input
-                        class="makeStyles-box-id"
-                        type="checkbox"
-                        value="false"
-                      />
-                    </button>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id CollectionProducts-colName-id"
-                  >
-                    <div
-                      class="makeStyles-content-id"
-                    >
-                      <div
-                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      <button
+                        class="MuiButtonBase-root-id makeStyles-root-id"
+                        tabindex="0"
+                        type="button"
                       >
-                        <img
-                          class="MuiAvatar-img-id"
-                          src="placeholder60x60.png"
+                        <input
+                          class="makeStyles-box-id"
+                          type="checkbox"
+                          value="false"
                         />
-                      </div>
+                      </button>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id CollectionProducts-colName-id"
+                    >
                       <div
-                        class="makeStyles-children-id"
+                        class="makeStyles-content-id"
                       >
-                        Murray Inc
-                      </div>
-                    </div>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colType-id"
-                  >
-                    Mugs
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colPublished-id"
-                  >
-                    <div
-                      class="makeStyles-root-id undefined makeStyles-successDot-id"
-                    >
-                      Published
-                    </div>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colActions-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
-                          focusable="false"
-                          role="presentation"
-                          viewBox="0 0 24 24"
+                        <div
+                          class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
                         >
-                          <path
-                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                          <img
+                            class="MuiAvatar-img-id"
+                            src="placeholder60x60.png"
                           />
-                        </svg>
-                      </span>
-                    </button>
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id CollectionProducts-tableRow-id MuiTableRow-hover-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id makeStyles-root-id"
-                      tabindex="0"
-                      type="button"
+                        </div>
+                        <div
+                          class="makeStyles-children-id"
+                        >
+                          Murray Inc
+                        </div>
+                      </div>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colType-id"
                     >
-                      <input
-                        class="makeStyles-box-id"
-                        type="checkbox"
-                        value="false"
-                      />
-                    </button>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id CollectionProducts-colName-id"
-                  >
-                    <div
-                      class="makeStyles-content-id"
+                      Mugs
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colPublished-id"
                     >
                       <div
-                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                        class="makeStyles-root-id undefined makeStyles-successDot-id"
                       >
-                        <img
-                          class="MuiAvatar-img-id"
-                          src="placeholder60x60.png"
+                        Published
+                      </div>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colActions-id"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id MuiIconButton-root-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiIconButton-label-id"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </td>
+                  </tr>
+                  <tr
+                    class="MuiTableRow-root-id CollectionProducts-tableRow-id MuiTableRow-hover-id"
+                  >
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id makeStyles-root-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <input
+                          class="makeStyles-box-id"
+                          type="checkbox"
+                          value="false"
                         />
-                      </div>
+                      </button>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id CollectionProducts-colName-id"
+                    >
                       <div
-                        class="makeStyles-children-id"
+                        class="makeStyles-content-id"
                       >
-                        Williams-Taylor
-                      </div>
-                    </div>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colType-id"
-                  >
-                    Coffee
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colPublished-id"
-                  >
-                    <div
-                      class="makeStyles-root-id undefined makeStyles-successDot-id"
-                    >
-                      Published
-                    </div>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colActions-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
-                          focusable="false"
-                          role="presentation"
-                          viewBox="0 0 24 24"
+                        <div
+                          class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
                         >
-                          <path
-                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                          <img
+                            class="MuiAvatar-img-id"
+                            src="placeholder60x60.png"
                           />
-                        </svg>
-                      </span>
-                    </button>
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id CollectionProducts-tableRow-id MuiTableRow-hover-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id makeStyles-root-id"
-                      tabindex="0"
-                      type="button"
+                        </div>
+                        <div
+                          class="makeStyles-children-id"
+                        >
+                          Williams-Taylor
+                        </div>
+                      </div>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colType-id"
                     >
-                      <input
-                        class="makeStyles-box-id"
-                        type="checkbox"
-                        value="false"
-                      />
-                    </button>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id CollectionProducts-colName-id"
-                  >
-                    <div
-                      class="makeStyles-content-id"
+                      Coffee
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colPublished-id"
                     >
                       <div
-                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                        class="makeStyles-root-id undefined makeStyles-successDot-id"
                       >
-                        <img
-                          class="MuiAvatar-img-id"
-                          src="placeholder60x60.png"
+                        Published
+                      </div>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colActions-id"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id MuiIconButton-root-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiIconButton-label-id"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </td>
+                  </tr>
+                  <tr
+                    class="MuiTableRow-root-id CollectionProducts-tableRow-id MuiTableRow-hover-id"
+                  >
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id makeStyles-root-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <input
+                          class="makeStyles-box-id"
+                          type="checkbox"
+                          value="false"
                         />
-                      </div>
+                      </button>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id CollectionProducts-colName-id"
+                    >
                       <div
-                        class="makeStyles-children-id"
+                        class="makeStyles-content-id"
                       >
-                        Hebert-Sherman
-                      </div>
-                    </div>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colType-id"
-                  >
-                    Coffee
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colPublished-id"
-                  >
-                    <div
-                      class="makeStyles-root-id undefined makeStyles-successDot-id"
-                    >
-                      Published
-                    </div>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colActions-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
-                          focusable="false"
-                          role="presentation"
-                          viewBox="0 0 24 24"
+                        <div
+                          class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
                         >
-                          <path
-                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                          <img
+                            class="MuiAvatar-img-id"
+                            src="placeholder60x60.png"
                           />
-                        </svg>
-                      </span>
-                    </button>
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id CollectionProducts-tableRow-id MuiTableRow-hover-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id makeStyles-root-id"
-                      tabindex="0"
-                      type="button"
+                        </div>
+                        <div
+                          class="makeStyles-children-id"
+                        >
+                          Hebert-Sherman
+                        </div>
+                      </div>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colType-id"
                     >
-                      <input
-                        class="makeStyles-box-id"
-                        type="checkbox"
-                        value="false"
-                      />
-                    </button>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id CollectionProducts-colName-id"
-                  >
-                    <div
-                      class="makeStyles-content-id"
+                      Coffee
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colPublished-id"
                     >
                       <div
-                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                        class="makeStyles-root-id undefined makeStyles-successDot-id"
                       >
-                        <img
-                          class="MuiAvatar-img-id"
-                          src="placeholder60x60.png"
+                        Published
+                      </div>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colActions-id"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id MuiIconButton-root-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiIconButton-label-id"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </td>
+                  </tr>
+                  <tr
+                    class="MuiTableRow-root-id CollectionProducts-tableRow-id MuiTableRow-hover-id"
+                  >
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id makeStyles-root-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <input
+                          class="makeStyles-box-id"
+                          type="checkbox"
+                          value="false"
                         />
-                      </div>
+                      </button>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id CollectionProducts-colName-id"
+                    >
                       <div
-                        class="makeStyles-children-id"
+                        class="makeStyles-content-id"
                       >
-                        Estes, Johnson and Graham
-                      </div>
-                    </div>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colType-id"
-                  >
-                    Books
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colPublished-id"
-                  >
-                    <div
-                      class="makeStyles-root-id undefined makeStyles-successDot-id"
-                    >
-                      Published
-                    </div>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colActions-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
-                          focusable="false"
-                          role="presentation"
-                          viewBox="0 0 24 24"
+                        <div
+                          class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
                         >
-                          <path
-                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                          <img
+                            class="MuiAvatar-img-id"
+                            src="placeholder60x60.png"
                           />
-                        </svg>
-                      </span>
-                    </button>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
+                        </div>
+                        <div
+                          class="makeStyles-children-id"
+                        >
+                          Estes, Johnson and Graham
+                        </div>
+                      </div>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colType-id"
+                    >
+                      Books
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colPublished-id"
+                    >
+                      <div
+                        class="makeStyles-root-id undefined makeStyles-successDot-id"
+                      >
+                        Published
+                      </div>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colActions-id"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id MuiIconButton-root-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiIconButton-label-id"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
           </div>
           <div
             class="makeStyles-spacer-id"
@@ -23615,10 +23723,10 @@ exports[`Storyshots Views / Collections / Collection details loading 1`] = `
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -23631,7 +23739,7 @@ exports[`Storyshots Views / Collections / Collection details loading 1`] = `
           </span>
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -24117,240 +24225,244 @@ Ctrl + K"
             <hr
               class="makeStyles-hr-id"
             />
-            <table
-              class="MuiTable-root-id CollectionProducts-table-id"
+            <div
+              class="ResponsiveTable-root-id"
             >
-              <thead
-                class="MuiTableHead-root-id"
+              <table
+                class="MuiTable-root-id CollectionProducts-table-id"
               >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
+                <thead
+                  class="MuiTableHead-root-id"
                 >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
-                    scope="col"
+                  <tr
+                    class="MuiTableRow-root-id MuiTableRow-head-id"
                   >
-                    <button
-                      class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
+                      scope="col"
                     >
-                      <input
-                        class="makeStyles-box-id makeStyles-disabled-id"
+                      <button
+                        class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
                         disabled=""
-                        type="checkbox"
-                        value="false"
-                      />
-                    </button>
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id CollectionProducts-colName-id"
-                    scope="col"
-                  >
-                    <span
-                      class="CollectionProducts-colNameLabel-id"
-                    >
-                      Name
-                    </span>
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id CollectionProducts-colType-id"
-                    scope="col"
-                  >
-                    Type
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id CollectionProducts-colPublished-id"
-                    scope="col"
-                  >
-                    Published
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id CollectionProducts-colActions-id"
-                    scope="col"
-                  />
-                </tr>
-              </thead>
-              <tfoot
-                class="MuiTableFooter-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-footer-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
-                    colspan="5"
-                  >
-                    <div
-                      class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
-                    >
-                      <div
-                        class="makeStyles-spacer-id"
-                      />
-                      <div
-                        class="makeStyles-root-id"
+                        tabindex="-1"
+                        type="button"
                       >
-                        <button
-                          class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                          data-tc="button-pagination-back"
+                        <input
+                          class="makeStyles-box-id makeStyles-disabled-id"
                           disabled=""
-                          tabindex="-1"
-                          type="button"
-                        >
-                          <span
-                            class="MuiIconButton-label-id"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              class="MuiSvgIcon-root-id"
-                              focusable="false"
-                              role="presentation"
-                              viewBox="0 0 24 24"
-                            >
-                              <path
-                                d="M14 7l-5 5 5 5V7z"
-                              />
-                              <path
-                                d="M24 0v24H0V0h24z"
-                                fill="none"
-                              />
-                            </svg>
-                          </span>
-                        </button>
-                        <button
-                          class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
-                          data-tc="button-pagination-next"
-                          tabindex="0"
-                          type="button"
-                        >
-                          <span
-                            class="MuiIconButton-label-id"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              class="MuiSvgIcon-root-id"
-                              focusable="false"
-                              role="presentation"
-                              viewBox="0 0 24 24"
-                            >
-                              <path
-                                d="M10 17l5-5-5-5v10z"
-                              />
-                              <path
-                                d="M0 24V0h24v24H0z"
-                                fill="none"
-                              />
-                            </svg>
-                          </span>
-                        </button>
-                      </div>
-                    </div>
-                  </td>
-                </tr>
-              </tfoot>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id CollectionProducts-tableRow-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <input
-                        class="makeStyles-box-id makeStyles-disabled-id"
-                        disabled=""
-                        type="checkbox"
-                        value="false"
-                      />
-                    </button>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id CollectionProducts-colName-id"
-                  >
-                    <div
-                      class="makeStyles-content-id"
-                    >
-                      <div
-                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id MuiAvatar-colorDefault-id"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
-                          focusable="false"
-                          role="presentation"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M19 8l-4 4h3c0 3.31-2.69 6-6 6-1.01 0-1.97-.25-2.8-.7l-1.46 1.46C8.97 19.54 10.43 20 12 20c4.42 0 8-3.58 8-8h3l-4-4zM6 12c0-3.31 2.69-6 6-6 1.01 0 1.97.25 2.8.7l1.46-1.46C15.03 4.46 13.57 4 12 4c-4.42 0-8 3.58-8 8H1l4 4 4-4H6z"
-                          />
-                        </svg>
-                      </div>
-                      <div
-                        class="makeStyles-children-id"
-                      >
-                        <span
-                          class="makeStyles-skeleton-id"
-                        >
-                          ‌
-                        </span>
-                      </div>
-                    </div>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colType-id"
-                  >
-                    <span
-                      class="makeStyles-skeleton-id"
-                    >
-                      ‌
-                    </span>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colPublished-id"
-                  >
-                    <span
-                      class="makeStyles-skeleton-id"
-                    >
-                      ‌
-                    </span>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colActions-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
+                          type="checkbox"
+                          value="false"
+                        />
+                      </button>
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id CollectionProducts-colName-id"
+                      scope="col"
                     >
                       <span
-                        class="MuiIconButton-label-id"
+                        class="CollectionProducts-colNameLabel-id"
                       >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
-                          focusable="false"
-                          role="presentation"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                          />
-                        </svg>
+                        Name
                       </span>
-                    </button>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id CollectionProducts-colType-id"
+                      scope="col"
+                    >
+                      Type
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id CollectionProducts-colPublished-id"
+                      scope="col"
+                    >
+                      Published
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id CollectionProducts-colActions-id"
+                      scope="col"
+                    />
+                  </tr>
+                </thead>
+                <tfoot
+                  class="MuiTableFooter-root-id"
+                >
+                  <tr
+                    class="MuiTableRow-root-id MuiTableRow-footer-id"
+                  >
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                      colspan="5"
+                    >
+                      <div
+                        class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+                      >
+                        <div
+                          class="makeStyles-spacer-id"
+                        />
+                        <div
+                          class="makeStyles-root-id"
+                        >
+                          <button
+                            class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                            data-tc="button-pagination-back"
+                            disabled=""
+                            tabindex="-1"
+                            type="button"
+                          >
+                            <span
+                              class="MuiIconButton-label-id"
+                            >
+                              <svg
+                                aria-hidden="true"
+                                class="MuiSvgIcon-root-id"
+                                focusable="false"
+                                role="presentation"
+                                viewBox="0 0 24 24"
+                              >
+                                <path
+                                  d="M14 7l-5 5 5 5V7z"
+                                />
+                                <path
+                                  d="M24 0v24H0V0h24z"
+                                  fill="none"
+                                />
+                              </svg>
+                            </span>
+                          </button>
+                          <button
+                            class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                            data-tc="button-pagination-next"
+                            tabindex="0"
+                            type="button"
+                          >
+                            <span
+                              class="MuiIconButton-label-id"
+                            >
+                              <svg
+                                aria-hidden="true"
+                                class="MuiSvgIcon-root-id"
+                                focusable="false"
+                                role="presentation"
+                                viewBox="0 0 24 24"
+                              >
+                                <path
+                                  d="M10 17l5-5-5-5v10z"
+                                />
+                                <path
+                                  d="M0 24V0h24v24H0z"
+                                  fill="none"
+                                />
+                              </svg>
+                            </span>
+                          </button>
+                        </div>
+                      </div>
+                    </td>
+                  </tr>
+                </tfoot>
+                <tbody
+                  class="MuiTableBody-root-id"
+                >
+                  <tr
+                    class="MuiTableRow-root-id CollectionProducts-tableRow-id"
+                  >
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                        disabled=""
+                        tabindex="-1"
+                        type="button"
+                      >
+                        <input
+                          class="makeStyles-box-id makeStyles-disabled-id"
+                          disabled=""
+                          type="checkbox"
+                          value="false"
+                        />
+                      </button>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id CollectionProducts-colName-id"
+                    >
+                      <div
+                        class="makeStyles-content-id"
+                      >
+                        <div
+                          class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id MuiAvatar-colorDefault-id"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M19 8l-4 4h3c0 3.31-2.69 6-6 6-1.01 0-1.97-.25-2.8-.7l-1.46 1.46C8.97 19.54 10.43 20 12 20c4.42 0 8-3.58 8-8h3l-4-4zM6 12c0-3.31 2.69-6 6-6 1.01 0 1.97.25 2.8.7l1.46-1.46C15.03 4.46 13.57 4 12 4c-4.42 0-8 3.58-8 8H1l4 4 4-4H6z"
+                            />
+                          </svg>
+                        </div>
+                        <div
+                          class="makeStyles-children-id"
+                        >
+                          <span
+                            class="makeStyles-skeleton-id"
+                          >
+                            ‌
+                          </span>
+                        </div>
+                      </div>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colType-id"
+                    >
+                      <span
+                        class="makeStyles-skeleton-id"
+                      >
+                        ‌
+                      </span>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colPublished-id"
+                    >
+                      <span
+                        class="makeStyles-skeleton-id"
+                      >
+                        ‌
+                      </span>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colActions-id"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                        disabled=""
+                        tabindex="-1"
+                        type="button"
+                      >
+                        <span
+                          class="MuiIconButton-label-id"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
           </div>
           <div
             class="makeStyles-spacer-id"
@@ -24608,10 +24720,10 @@ exports[`Storyshots Views / Collections / Collection details no products 1`] = `
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -24619,7 +24731,7 @@ exports[`Storyshots Views / Collections / Collection details no products 1`] = `
           Summer collection
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -25388,138 +25500,142 @@ Ctrl + K"
             <hr
               class="makeStyles-hr-id"
             />
-            <table
-              class="MuiTable-root-id CollectionProducts-table-id"
+            <div
+              class="ResponsiveTable-root-id"
             >
-              <thead
-                class="MuiTableHead-root-id"
+              <table
+                class="MuiTable-root-id CollectionProducts-table-id"
               >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
+                <thead
+                  class="MuiTableHead-root-id"
                 >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id CollectionProducts-colName-id"
-                    scope="col"
+                  <tr
+                    class="MuiTableRow-root-id MuiTableRow-head-id"
                   >
-                    <span
-                      class="CollectionProducts-colNameLabel-id"
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id CollectionProducts-colName-id"
+                      scope="col"
                     >
-                      Name
-                    </span>
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id CollectionProducts-colType-id"
-                    scope="col"
-                  >
-                    Type
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id CollectionProducts-colPublished-id"
-                    scope="col"
-                  >
-                    Published
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id CollectionProducts-colActions-id"
-                    scope="col"
-                  />
-                </tr>
-              </thead>
-              <tfoot
-                class="MuiTableFooter-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-footer-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
-                    colspan="5"
-                  >
-                    <div
-                      class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
-                    >
-                      <div
-                        class="makeStyles-spacer-id"
-                      />
-                      <div
-                        class="makeStyles-root-id"
+                      <span
+                        class="CollectionProducts-colNameLabel-id"
                       >
-                        <button
-                          class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                          data-tc="button-pagination-back"
-                          disabled=""
-                          tabindex="-1"
-                          type="button"
-                        >
-                          <span
-                            class="MuiIconButton-label-id"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              class="MuiSvgIcon-root-id"
-                              focusable="false"
-                              role="presentation"
-                              viewBox="0 0 24 24"
-                            >
-                              <path
-                                d="M14 7l-5 5 5 5V7z"
-                              />
-                              <path
-                                d="M24 0v24H0V0h24z"
-                                fill="none"
-                              />
-                            </svg>
-                          </span>
-                        </button>
-                        <button
-                          class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
-                          data-tc="button-pagination-next"
-                          tabindex="0"
-                          type="button"
-                        >
-                          <span
-                            class="MuiIconButton-label-id"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              class="MuiSvgIcon-root-id"
-                              focusable="false"
-                              role="presentation"
-                              viewBox="0 0 24 24"
-                            >
-                              <path
-                                d="M10 17l5-5-5-5v10z"
-                              />
-                              <path
-                                d="M0 24V0h24v24H0z"
-                                fill="none"
-                              />
-                            </svg>
-                          </span>
-                        </button>
-                      </div>
-                    </div>
-                  </td>
-                </tr>
-              </tfoot>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id"
+                        Name
+                      </span>
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id CollectionProducts-colType-id"
+                      scope="col"
+                    >
+                      Type
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id CollectionProducts-colPublished-id"
+                      scope="col"
+                    >
+                      Published
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id CollectionProducts-colActions-id"
+                      scope="col"
+                    />
+                  </tr>
+                </thead>
+                <tfoot
+                  class="MuiTableFooter-root-id"
                 >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  />
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                    colspan="5"
+                  <tr
+                    class="MuiTableRow-root-id MuiTableRow-footer-id"
                   >
-                    No products found
-                  </td>
-                </tr>
-              </tbody>
-            </table>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                      colspan="5"
+                    >
+                      <div
+                        class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+                      >
+                        <div
+                          class="makeStyles-spacer-id"
+                        />
+                        <div
+                          class="makeStyles-root-id"
+                        >
+                          <button
+                            class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                            data-tc="button-pagination-back"
+                            disabled=""
+                            tabindex="-1"
+                            type="button"
+                          >
+                            <span
+                              class="MuiIconButton-label-id"
+                            >
+                              <svg
+                                aria-hidden="true"
+                                class="MuiSvgIcon-root-id"
+                                focusable="false"
+                                role="presentation"
+                                viewBox="0 0 24 24"
+                              >
+                                <path
+                                  d="M14 7l-5 5 5 5V7z"
+                                />
+                                <path
+                                  d="M24 0v24H0V0h24z"
+                                  fill="none"
+                                />
+                              </svg>
+                            </span>
+                          </button>
+                          <button
+                            class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                            data-tc="button-pagination-next"
+                            tabindex="0"
+                            type="button"
+                          >
+                            <span
+                              class="MuiIconButton-label-id"
+                            >
+                              <svg
+                                aria-hidden="true"
+                                class="MuiSvgIcon-root-id"
+                                focusable="false"
+                                role="presentation"
+                                viewBox="0 0 24 24"
+                              >
+                                <path
+                                  d="M10 17l5-5-5-5v10z"
+                                />
+                                <path
+                                  d="M0 24V0h24v24H0z"
+                                  fill="none"
+                                />
+                              </svg>
+                            </span>
+                          </button>
+                        </div>
+                      </div>
+                    </td>
+                  </tr>
+                </tfoot>
+                <tbody
+                  class="MuiTableBody-root-id"
+                >
+                  <tr
+                    class="MuiTableRow-root-id"
+                  >
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                    />
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                      colspan="5"
+                    >
+                      No products found
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
           </div>
           <div
             class="makeStyles-spacer-id"
@@ -25773,10 +25889,10 @@ exports[`Storyshots Views / Collections / Collection list default 1`] = `
   style="padding:24px"
 >
   <div
-    class="makeStyles-root-id"
+    class="Container-root-id"
   >
     <div
-      class="makeStyles-root-id"
+      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
         class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -25784,7 +25900,7 @@ exports[`Storyshots Views / Collections / Collection list default 1`] = `
         Collections
       </div>
       <div
-        class="makeStyles-action-id"
+        class="ExtendedPageHeader-action-id"
       >
         <div
           class="makeStyles-root-id"
@@ -25880,427 +25996,431 @@ exports[`Storyshots Views / Collections / Collection list default 1`] = `
       <hr
         class="makeStyles-root-id"
       />
-      <table
-        class="MuiTable-root-id"
+      <div
+        class="ResponsiveTable-root-id"
       >
-        <thead
-          class="MuiTableHead-root-id"
+        <table
+          class="MuiTable-root-id"
         >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-head-id"
+          <thead
+            class="MuiTableHead-root-id"
           >
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
-              scope="col"
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-head-id"
             >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
+                scope="col"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id CollectionList-colName-id"
-              scope="col"
-            >
-              Category Name
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id CollectionList-colProducts-id"
-              scope="col"
-            >
-              No. of Products
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id CollectionList-colAvailability-id"
-              scope="col"
-            >
-              Availability
-            </th>
-          </tr>
-        </thead>
-        <tfoot
-          class="MuiTableFooter-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-footer-id"
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id CollectionList-colName-id"
+                scope="col"
+              >
+                Category Name
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id CollectionList-colProducts-id"
+                scope="col"
+              >
+                No. of Products
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id CollectionList-colAvailability-id"
+                scope="col"
+              >
+                Availability
+              </th>
+            </tr>
+          </thead>
+          <tfoot
+            class="MuiTableFooter-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
-              colspan="5"
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-footer-id"
             >
-              <div
-                class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                colspan="5"
               >
                 <div
-                  class="makeStyles-spacer-id"
+                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
                 >
-                  <div>
-                    <span
-                      class="RowNumberSelect-label-id"
-                    >
-                      No of Rows:
-                    </span>
-                    <div
-                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
-                    >
+                  <div
+                    class="makeStyles-spacer-id"
+                  >
+                    <div>
+                      <span
+                        class="RowNumberSelect-label-id"
+                      >
+                        No of Rows:
+                      </span>
                       <div
-                        aria-haspopup="listbox"
-                        aria-labelledby=" "
-                        class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-id"
-                        role="button"
-                        tabindex="0"
+                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                       >
-                        20
-                      </div>
-                      <input
-                        type="hidden"
-                        value="20"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MuiSelect-icon-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M7 10l5 5 5-5z"
+                        <div
+                          aria-haspopup="listbox"
+                          aria-labelledby=" "
+                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-id"
+                          role="button"
+                          tabindex="0"
+                        >
+                          20
+                        </div>
+                        <input
+                          type="hidden"
+                          value="20"
                         />
-                      </svg>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M7 10l5 5 5-5z"
+                          />
+                        </svg>
+                      </div>
                     </div>
                   </div>
+                  <div
+                    class="makeStyles-root-id"
+                  >
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      data-tc="button-pagination-back"
+                      disabled=""
+                      tabindex="-1"
+                      type="button"
+                    >
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M14 7l-5 5 5 5V7z"
+                          />
+                          <path
+                            d="M24 0v24H0V0h24z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                      data-tc="button-pagination-next"
+                      tabindex="0"
+                      type="button"
+                    >
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M10 17l5-5-5-5v10z"
+                          />
+                          <path
+                            d="M0 24V0h24v24H0z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </div>
                 </div>
-                <div
-                  class="makeStyles-root-id"
+              </td>
+            </tr>
+          </tfoot>
+          <tbody
+            class="MuiTableBody-root-id"
+          >
+            <tr
+              class="MuiTableRow-root-id CollectionList-tableRow-id MuiTableRow-hover-id"
+              data-tc="id"
+              data-tc-id="Q29sbGVjdGlvbjox"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
                 >
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                    data-tc="button-pagination-back"
-                    disabled=""
-                    tabindex="-1"
-                    type="button"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M14 7l-5 5 5 5V7z"
-                        />
-                        <path
-                          d="M24 0v24H0V0h24z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
-                    data-tc="button-pagination-next"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M10 17l5-5-5-5v10z"
-                        />
-                        <path
-                          d="M0 24V0h24v24H0z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colName-id"
+                data-tc="name"
+              >
+                Summer collection
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colProducts-id"
+              >
+                4
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colAvailability-id"
+                data-tc="published"
+                data-tc-published="true"
+              >
+                <div
+                  class="makeStyles-root-id undefined makeStyles-successDot-id"
+                >
+                  Published
                 </div>
-              </div>
-            </td>
-          </tr>
-        </tfoot>
-        <tbody
-          class="MuiTableBody-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id CollectionList-tableRow-id MuiTableRow-hover-id"
-            data-tc="id"
-            data-tc-id="Q29sbGVjdGlvbjox"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id CollectionList-tableRow-id MuiTableRow-hover-id"
+              data-tc="id"
+              data-tc-id="Q29sbGVjdGlvbjoy"
             >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colName-id"
-              data-tc="name"
-            >
-              Summer collection
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colProducts-id"
-            >
-              4
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colAvailability-id"
-              data-tc="published"
-              data-tc-published="true"
-            >
-              <div
-                class="makeStyles-root-id undefined makeStyles-successDot-id"
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colName-id"
+                data-tc="name"
               >
-                Published
-              </div>
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id CollectionList-tableRow-id MuiTableRow-hover-id"
-            data-tc="id"
-            data-tc-id="Q29sbGVjdGlvbjoy"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+                Winter sale
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colProducts-id"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colName-id"
-              data-tc="name"
-            >
-              Winter sale
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colProducts-id"
-            >
-              4
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colAvailability-id"
-              data-tc="published"
-              data-tc-published="true"
-            >
-              <div
-                class="makeStyles-root-id undefined makeStyles-successDot-id"
+                4
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colAvailability-id"
+                data-tc="published"
+                data-tc-published="true"
               >
-                Published
-              </div>
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id CollectionList-tableRow-id MuiTableRow-hover-id"
-            data-tc="id"
-            data-tc-id="Q29sbGVjdGlvbjoz"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+                <div
+                  class="makeStyles-root-id undefined makeStyles-successDot-id"
+                >
+                  Published
+                </div>
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id CollectionList-tableRow-id MuiTableRow-hover-id"
+              data-tc="id"
+              data-tc-id="Q29sbGVjdGlvbjoz"
             >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colName-id"
-              data-tc="name"
-            >
-              Vintage vibes
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colProducts-id"
-            >
-              4
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colAvailability-id"
-              data-tc="published"
-              data-tc-published="true"
-            >
-              <div
-                class="makeStyles-root-id undefined makeStyles-successDot-id"
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colName-id"
+                data-tc="name"
               >
-                Published
-              </div>
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id CollectionList-tableRow-id MuiTableRow-hover-id"
-            data-tc="id"
-            data-tc-id="Q29sbGVjdGlvbjoa"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+                Vintage vibes
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colProducts-id"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colName-id"
-              data-tc="name"
-            >
-              Merry Christmas
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colProducts-id"
-            >
-              4
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colAvailability-id"
-              data-tc="published"
-              data-tc-published="true"
-            >
-              <div
-                class="makeStyles-root-id undefined makeStyles-successDot-id"
+                4
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colAvailability-id"
+                data-tc="published"
+                data-tc-published="true"
               >
-                Published
-              </div>
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id CollectionList-tableRow-id MuiTableRow-hover-id"
-            data-tc="id"
-            data-tc-id="Q29sbGVjdGlvbjob"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+                <div
+                  class="makeStyles-root-id undefined makeStyles-successDot-id"
+                >
+                  Published
+                </div>
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id CollectionList-tableRow-id MuiTableRow-hover-id"
+              data-tc="id"
+              data-tc-id="Q29sbGVjdGlvbjoa"
             >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colName-id"
-              data-tc="name"
-            >
-              80s Miami
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colProducts-id"
-            >
-              4
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colAvailability-id"
-              data-tc="published"
-              data-tc-published="true"
-            >
-              <div
-                class="makeStyles-root-id undefined makeStyles-successDot-id"
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colName-id"
+                data-tc="name"
               >
-                Published
-              </div>
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id CollectionList-tableRow-id MuiTableRow-hover-id"
-            data-tc="id"
-            data-tc-id="Q29sbGVjdGlvbjoc"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+                Merry Christmas
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colProducts-id"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colName-id"
-              data-tc="name"
-            >
-              Yellow Submarine 2019
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colProducts-id"
-            >
-              4
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colAvailability-id"
-              data-tc="published"
-              data-tc-published="true"
-            >
-              <div
-                class="makeStyles-root-id undefined makeStyles-successDot-id"
+                4
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colAvailability-id"
+                data-tc="published"
+                data-tc-published="true"
               >
-                Published
-              </div>
-            </td>
-          </tr>
-        </tbody>
-      </table>
+                <div
+                  class="makeStyles-root-id undefined makeStyles-successDot-id"
+                >
+                  Published
+                </div>
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id CollectionList-tableRow-id MuiTableRow-hover-id"
+              data-tc="id"
+              data-tc-id="Q29sbGVjdGlvbjob"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colName-id"
+                data-tc="name"
+              >
+                80s Miami
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colProducts-id"
+              >
+                4
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colAvailability-id"
+                data-tc="published"
+                data-tc-published="true"
+              >
+                <div
+                  class="makeStyles-root-id undefined makeStyles-successDot-id"
+                >
+                  Published
+                </div>
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id CollectionList-tableRow-id MuiTableRow-hover-id"
+              data-tc="id"
+              data-tc-id="Q29sbGVjdGlvbjoc"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colName-id"
+                data-tc="name"
+              >
+                Yellow Submarine 2019
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colProducts-id"
+              >
+                4
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colAvailability-id"
+                data-tc="published"
+                data-tc-published="true"
+              >
+                <div
+                  class="makeStyles-root-id undefined makeStyles-successDot-id"
+                >
+                  Published
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
     </div>
   </div>
 </div>
@@ -26311,10 +26431,10 @@ exports[`Storyshots Views / Collections / Collection list loading 1`] = `
   style="padding:24px"
 >
   <div
-    class="makeStyles-root-id"
+    class="Container-root-id"
   >
     <div
-      class="makeStyles-root-id"
+      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
         class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -26322,7 +26442,7 @@ exports[`Storyshots Views / Collections / Collection list loading 1`] = `
         Collections
       </div>
       <div
-        class="makeStyles-action-id"
+        class="ExtendedPageHeader-action-id"
       >
         <div
           class="makeStyles-root-id"
@@ -26419,223 +26539,227 @@ exports[`Storyshots Views / Collections / Collection list loading 1`] = `
       <hr
         class="makeStyles-root-id"
       />
-      <table
-        class="MuiTable-root-id"
+      <div
+        class="ResponsiveTable-root-id"
       >
-        <thead
-          class="MuiTableHead-root-id"
+        <table
+          class="MuiTable-root-id"
         >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-head-id"
+          <thead
+            class="MuiTableHead-root-id"
           >
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
-              scope="col"
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-head-id"
             >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
-                disabled=""
-                tabindex="-1"
-                type="button"
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
+                scope="col"
               >
-                <input
-                  class="makeStyles-box-id makeStyles-disabled-id"
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
                   disabled=""
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id CollectionList-colName-id"
-              scope="col"
-            >
-              Category Name
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id CollectionList-colProducts-id"
-              scope="col"
-            >
-              No. of Products
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id CollectionList-colAvailability-id"
-              scope="col"
-            >
-              Availability
-            </th>
-          </tr>
-        </thead>
-        <tfoot
-          class="MuiTableFooter-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-footer-id"
+                  tabindex="-1"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id makeStyles-disabled-id"
+                    disabled=""
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id CollectionList-colName-id"
+                scope="col"
+              >
+                Category Name
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id CollectionList-colProducts-id"
+                scope="col"
+              >
+                No. of Products
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id CollectionList-colAvailability-id"
+                scope="col"
+              >
+                Availability
+              </th>
+            </tr>
+          </thead>
+          <tfoot
+            class="MuiTableFooter-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
-              colspan="5"
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-footer-id"
             >
-              <div
-                class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                colspan="5"
               >
                 <div
-                  class="makeStyles-spacer-id"
+                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
                 >
-                  <div>
-                    <span
-                      class="RowNumberSelect-label-id"
-                    >
-                      No of Rows:
-                    </span>
-                    <div
-                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
-                    >
+                  <div
+                    class="makeStyles-spacer-id"
+                  >
+                    <div>
+                      <span
+                        class="RowNumberSelect-label-id"
+                      >
+                        No of Rows:
+                      </span>
                       <div
-                        aria-haspopup="listbox"
-                        aria-labelledby=" "
-                        class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-id"
-                        role="button"
-                        tabindex="0"
+                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                       >
-                        20
-                      </div>
-                      <input
-                        type="hidden"
-                        value="20"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MuiSelect-icon-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M7 10l5 5 5-5z"
+                        <div
+                          aria-haspopup="listbox"
+                          aria-labelledby=" "
+                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-id"
+                          role="button"
+                          tabindex="0"
+                        >
+                          20
+                        </div>
+                        <input
+                          type="hidden"
+                          value="20"
                         />
-                      </svg>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M7 10l5 5 5-5z"
+                          />
+                        </svg>
+                      </div>
                     </div>
                   </div>
-                </div>
-                <div
-                  class="makeStyles-root-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                    data-tc="button-pagination-back"
-                    disabled=""
-                    tabindex="-1"
-                    type="button"
+                  <div
+                    class="makeStyles-root-id"
                   >
-                    <span
-                      class="MuiIconButton-label-id"
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      data-tc="button-pagination-back"
+                      disabled=""
+                      tabindex="-1"
+                      type="button"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
+                      <span
+                        class="MuiIconButton-label-id"
                       >
-                        <path
-                          d="M14 7l-5 5 5 5V7z"
-                        />
-                        <path
-                          d="M24 0v24H0V0h24z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                    data-tc="button-pagination-next"
-                    disabled=""
-                    tabindex="-1"
-                    type="button"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M14 7l-5 5 5 5V7z"
+                          />
+                          <path
+                            d="M24 0v24H0V0h24z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      data-tc="button-pagination-next"
+                      disabled=""
+                      tabindex="-1"
+                      type="button"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
+                      <span
+                        class="MuiIconButton-label-id"
                       >
-                        <path
-                          d="M10 17l5-5-5-5v10z"
-                        />
-                        <path
-                          d="M0 24V0h24v24H0z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M10 17l5-5-5-5v10z"
+                          />
+                          <path
+                            d="M0 24V0h24v24H0z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </div>
                 </div>
-              </div>
-            </td>
-          </tr>
-        </tfoot>
-        <tbody
-          class="MuiTableBody-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id CollectionList-tableRow-id"
-            data-tc="id"
+              </td>
+            </tr>
+          </tfoot>
+          <tbody
+            class="MuiTableBody-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+            <tr
+              class="MuiTableRow-root-id CollectionList-tableRow-id"
+              data-tc="id"
             >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
-                disabled=""
-                tabindex="-1"
-                type="button"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
-                <input
-                  class="makeStyles-box-id makeStyles-disabled-id"
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
                   disabled=""
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colName-id"
-              data-tc="name"
-            >
-              <span
-                class="makeStyles-skeleton-id"
+                  tabindex="-1"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id makeStyles-disabled-id"
+                    disabled=""
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colName-id"
+                data-tc="name"
               >
-                ‌
-              </span>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colProducts-id"
-            >
-              <span
-                class="makeStyles-skeleton-id"
+                <span
+                  class="makeStyles-skeleton-id"
+                >
+                  ‌
+                </span>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colProducts-id"
               >
-                ‌
-              </span>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colAvailability-id"
-              data-tc="published"
-            >
-              <span
-                class="makeStyles-skeleton-id"
+                <span
+                  class="makeStyles-skeleton-id"
+                >
+                  ‌
+                </span>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colAvailability-id"
+                data-tc="published"
               >
-                ‌
-              </span>
-            </td>
-          </tr>
-        </tbody>
-      </table>
+                <span
+                  class="makeStyles-skeleton-id"
+                >
+                  ‌
+                </span>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
     </div>
   </div>
 </div>
@@ -26646,10 +26770,10 @@ exports[`Storyshots Views / Collections / Collection list no data 1`] = `
   style="padding:24px"
 >
   <div
-    class="makeStyles-root-id"
+    class="Container-root-id"
   >
     <div
-      class="makeStyles-root-id"
+      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
         class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -26657,7 +26781,7 @@ exports[`Storyshots Views / Collections / Collection list no data 1`] = `
         Collections
       </div>
       <div
-        class="makeStyles-action-id"
+        class="ExtendedPageHeader-action-id"
       >
         <div
           class="makeStyles-root-id"
@@ -26753,163 +26877,167 @@ exports[`Storyshots Views / Collections / Collection list no data 1`] = `
       <hr
         class="makeStyles-root-id"
       />
-      <table
-        class="MuiTable-root-id"
+      <div
+        class="ResponsiveTable-root-id"
       >
-        <thead
-          class="MuiTableHead-root-id"
+        <table
+          class="MuiTable-root-id"
         >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-head-id"
+          <thead
+            class="MuiTableHead-root-id"
           >
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id CollectionList-colName-id"
-              scope="col"
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-head-id"
             >
-              Category Name
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id CollectionList-colProducts-id"
-              scope="col"
-            >
-              No. of Products
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id CollectionList-colAvailability-id"
-              scope="col"
-            >
-              Availability
-            </th>
-          </tr>
-        </thead>
-        <tfoot
-          class="MuiTableFooter-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-footer-id"
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id CollectionList-colName-id"
+                scope="col"
+              >
+                Category Name
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id CollectionList-colProducts-id"
+                scope="col"
+              >
+                No. of Products
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id CollectionList-colAvailability-id"
+                scope="col"
+              >
+                Availability
+              </th>
+            </tr>
+          </thead>
+          <tfoot
+            class="MuiTableFooter-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
-              colspan="5"
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-footer-id"
             >
-              <div
-                class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                colspan="5"
               >
                 <div
-                  class="makeStyles-spacer-id"
+                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
                 >
-                  <div>
-                    <span
-                      class="RowNumberSelect-label-id"
-                    >
-                      No of Rows:
-                    </span>
-                    <div
-                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
-                    >
+                  <div
+                    class="makeStyles-spacer-id"
+                  >
+                    <div>
+                      <span
+                        class="RowNumberSelect-label-id"
+                      >
+                        No of Rows:
+                      </span>
                       <div
-                        aria-haspopup="listbox"
-                        aria-labelledby=" "
-                        class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-id"
-                        role="button"
-                        tabindex="0"
+                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                       >
-                        20
-                      </div>
-                      <input
-                        type="hidden"
-                        value="20"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MuiSelect-icon-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M7 10l5 5 5-5z"
+                        <div
+                          aria-haspopup="listbox"
+                          aria-labelledby=" "
+                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-id"
+                          role="button"
+                          tabindex="0"
+                        >
+                          20
+                        </div>
+                        <input
+                          type="hidden"
+                          value="20"
                         />
-                      </svg>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M7 10l5 5 5-5z"
+                          />
+                        </svg>
+                      </div>
                     </div>
                   </div>
-                </div>
-                <div
-                  class="makeStyles-root-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                    data-tc="button-pagination-back"
-                    disabled=""
-                    tabindex="-1"
-                    type="button"
+                  <div
+                    class="makeStyles-root-id"
                   >
-                    <span
-                      class="MuiIconButton-label-id"
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      data-tc="button-pagination-back"
+                      disabled=""
+                      tabindex="-1"
+                      type="button"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
+                      <span
+                        class="MuiIconButton-label-id"
                       >
-                        <path
-                          d="M14 7l-5 5 5 5V7z"
-                        />
-                        <path
-                          d="M24 0v24H0V0h24z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
-                    data-tc="button-pagination-next"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M14 7l-5 5 5 5V7z"
+                          />
+                          <path
+                            d="M24 0v24H0V0h24z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                      data-tc="button-pagination-next"
+                      tabindex="0"
+                      type="button"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
+                      <span
+                        class="MuiIconButton-label-id"
                       >
-                        <path
-                          d="M10 17l5-5-5-5v10z"
-                        />
-                        <path
-                          d="M0 24V0h24v24H0z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M10 17l5-5-5-5v10z"
+                          />
+                          <path
+                            d="M0 24V0h24v24H0z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </div>
                 </div>
-              </div>
-            </td>
-          </tr>
-        </tfoot>
-        <tbody
-          class="MuiTableBody-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id"
+              </td>
+            </tr>
+          </tfoot>
+          <tbody
+            class="MuiTableBody-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-              colspan="5"
+            <tr
+              class="MuiTableRow-root-id"
             >
-              No collections found
-            </td>
-          </tr>
-        </tbody>
-      </table>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id"
+                colspan="5"
+              >
+                No collections found
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
     </div>
   </div>
 </div>
@@ -26921,10 +27049,10 @@ exports[`Storyshots Views / Collections / Create collection default 1`] = `
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -26932,7 +27060,7 @@ exports[`Storyshots Views / Collections / Create collection default 1`] = `
           Add Collection
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -27661,10 +27789,10 @@ exports[`Storyshots Views / Collections / Create collection loading 1`] = `
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -27672,7 +27800,7 @@ exports[`Storyshots Views / Collections / Create collection loading 1`] = `
           Add Collection
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -28405,10 +28533,10 @@ exports[`Storyshots Views / Configuration default 1`] = `
   style="padding:24px"
 >
   <div
-    class="makeStyles-root-id"
+    class="Container-root-id"
   >
     <div
-      class="makeStyles-root-id makeStyles-header-id"
+      class="ExtendedPageHeader-root-id makeStyles-header-id ExtendedPageHeader-block-id"
     >
       <div
         class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -28416,7 +28544,7 @@ exports[`Storyshots Views / Configuration default 1`] = `
         Configuration
       </div>
       <div
-        class="makeStyles-action-id"
+        class="ExtendedPageHeader-action-id"
       >
         <div
           class="makeStyles-root-id"
@@ -28921,10 +29049,10 @@ exports[`Storyshots Views / Configuration partial access 1`] = `
   style="padding:24px"
 >
   <div
-    class="makeStyles-root-id"
+    class="Container-root-id"
   >
     <div
-      class="makeStyles-root-id makeStyles-header-id"
+      class="ExtendedPageHeader-root-id makeStyles-header-id ExtendedPageHeader-block-id"
     >
       <div
         class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -28932,7 +29060,7 @@ exports[`Storyshots Views / Configuration partial access 1`] = `
         Configuration
       </div>
       <div
-        class="makeStyles-action-id"
+        class="ExtendedPageHeader-action-id"
       >
         <div
           class="makeStyles-root-id"
@@ -29134,10 +29262,10 @@ exports[`Storyshots Views / Customers / Address Book default 1`] = `
   style="padding:24px"
 >
   <div
-    class="makeStyles-root-id"
+    class="Container-root-id"
   >
     <div
-      class="makeStyles-root-id"
+      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
         class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -29145,7 +29273,7 @@ exports[`Storyshots Views / Customers / Address Book default 1`] = `
         Tom Cooper's Address Book
       </div>
       <div
-        class="makeStyles-action-id"
+        class="ExtendedPageHeader-action-id"
       >
         <div
           class="makeStyles-root-id"
@@ -29390,10 +29518,10 @@ exports[`Storyshots Views / Customers / Address Book loading 1`] = `
   style="padding:24px"
 >
   <div
-    class="makeStyles-root-id"
+    class="Container-root-id"
   >
     <div
-      class="makeStyles-root-id"
+      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
         class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -29401,7 +29529,7 @@ exports[`Storyshots Views / Customers / Address Book loading 1`] = `
         ...'s Address Book
       </div>
       <div
-        class="makeStyles-action-id"
+        class="ExtendedPageHeader-action-id"
       >
         <div
           class="makeStyles-root-id"
@@ -29527,7 +29655,7 @@ exports[`Storyshots Views / Customers / Address Book no data 1`] = `
   style="padding:24px"
 >
   <div
-    class="makeStyles-root-id"
+    class="Container-root-id"
   >
     <div
       class="makeStyles-empty-id"
@@ -29564,10 +29692,10 @@ exports[`Storyshots Views / Customers / Create customer default 1`] = `
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -29575,7 +29703,7 @@ exports[`Storyshots Views / Customers / Create customer default 1`] = `
           Add Customer
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -30270,10 +30398,10 @@ exports[`Storyshots Views / Customers / Create customer form errors 1`] = `
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -30281,7 +30409,7 @@ exports[`Storyshots Views / Customers / Create customer form errors 1`] = `
           Add Customer
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -31036,10 +31164,10 @@ exports[`Storyshots Views / Customers / Create customer loading 1`] = `
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -31047,7 +31175,7 @@ exports[`Storyshots Views / Customers / Create customer loading 1`] = `
           Add Customer
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -31756,10 +31884,10 @@ exports[`Storyshots Views / Customers / Customer details default 1`] = `
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -31767,7 +31895,7 @@ exports[`Storyshots Views / Customers / Customer details default 1`] = `
           Tom Cooper
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -32058,80 +32186,84 @@ exports[`Storyshots Views / Customers / Customer details default 1`] = `
             <hr
               class="makeStyles-hr-id"
             />
-            <table
-              class="MuiTable-root-id"
+            <div
+              class="ResponsiveTable-root-id"
             >
-              <thead
-                class="MuiTableHead-root-id"
+              <table
+                class="MuiTable-root-id"
               >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
+                <thead
+                  class="MuiTableHead-root-id"
                 >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id"
-                    scope="col"
+                  <tr
+                    class="MuiTableRow-root-id MuiTableRow-head-id"
                   >
-                    No. of Order
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id"
-                    scope="col"
-                  >
-                    Date
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id"
-                    scope="col"
-                  >
-                    Status
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-textRight-id"
-                    scope="col"
-                  >
-                    Total
-                  </th>
-                </tr>
-              </thead>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id"
+                      scope="col"
+                    >
+                      No. of Order
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id"
+                      scope="col"
+                    >
+                      Date
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id"
+                      scope="col"
+                    >
+                      Status
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-textRight-id"
+                      scope="col"
+                    >
+                      Total
+                    </th>
+                  </tr>
+                </thead>
+                <tbody
+                  class="MuiTableBody-root-id"
                 >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  <tr
+                    class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
                   >
-                    #8234
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    <time
-                      class=""
-                      datetime="1525685850124"
-                      title="May 7, 2018 5:37 AM"
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
                     >
-                      3 months ago
-                    </time>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    <div
-                      class="makeStyles-root-id undefined makeStyles-successDot-id"
+                      #8234
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
                     >
-                      Fully paid
-                    </div>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
-                  >
-                    $1,215.89
-                  </td>
-                </tr>
-              </tbody>
-            </table>
+                      <time
+                        class=""
+                        datetime="1525685850124"
+                        title="May 7, 2018 5:37 AM"
+                      >
+                        3 months ago
+                      </time>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                    >
+                      <div
+                        class="makeStyles-root-id undefined makeStyles-successDot-id"
+                      >
+                        Fully paid
+                      </div>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
+                    >
+                      $1,215.89
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
           </div>
         </div>
         <div>
@@ -32284,10 +32416,10 @@ exports[`Storyshots Views / Customers / Customer details different addresses 1`]
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -32295,7 +32427,7 @@ exports[`Storyshots Views / Customers / Customer details different addresses 1`]
           Tom Cooper
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -32586,80 +32718,84 @@ exports[`Storyshots Views / Customers / Customer details different addresses 1`]
             <hr
               class="makeStyles-hr-id"
             />
-            <table
-              class="MuiTable-root-id"
+            <div
+              class="ResponsiveTable-root-id"
             >
-              <thead
-                class="MuiTableHead-root-id"
+              <table
+                class="MuiTable-root-id"
               >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
+                <thead
+                  class="MuiTableHead-root-id"
                 >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id"
-                    scope="col"
+                  <tr
+                    class="MuiTableRow-root-id MuiTableRow-head-id"
                   >
-                    No. of Order
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id"
-                    scope="col"
-                  >
-                    Date
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id"
-                    scope="col"
-                  >
-                    Status
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-textRight-id"
-                    scope="col"
-                  >
-                    Total
-                  </th>
-                </tr>
-              </thead>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id"
+                      scope="col"
+                    >
+                      No. of Order
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id"
+                      scope="col"
+                    >
+                      Date
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id"
+                      scope="col"
+                    >
+                      Status
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-textRight-id"
+                      scope="col"
+                    >
+                      Total
+                    </th>
+                  </tr>
+                </thead>
+                <tbody
+                  class="MuiTableBody-root-id"
                 >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  <tr
+                    class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
                   >
-                    #8234
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    <time
-                      class=""
-                      datetime="1525685850124"
-                      title="May 7, 2018 5:37 AM"
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
                     >
-                      3 months ago
-                    </time>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    <div
-                      class="makeStyles-root-id undefined makeStyles-successDot-id"
+                      #8234
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
                     >
-                      Fully paid
-                    </div>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
-                  >
-                    $1,215.89
-                  </td>
-                </tr>
-              </tbody>
-            </table>
+                      <time
+                        class=""
+                        datetime="1525685850124"
+                        title="May 7, 2018 5:37 AM"
+                      >
+                        3 months ago
+                      </time>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                    >
+                      <div
+                        class="makeStyles-root-id undefined makeStyles-successDot-id"
+                      >
+                        Fully paid
+                      </div>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
+                    >
+                      $1,215.89
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
           </div>
         </div>
         <div>
@@ -32849,10 +32985,10 @@ exports[`Storyshots Views / Customers / Customer details form errors 1`] = `
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -32860,7 +32996,7 @@ exports[`Storyshots Views / Customers / Customer details form errors 1`] = `
           Tom Cooper
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -33166,80 +33302,84 @@ exports[`Storyshots Views / Customers / Customer details form errors 1`] = `
             <hr
               class="makeStyles-hr-id"
             />
-            <table
-              class="MuiTable-root-id"
+            <div
+              class="ResponsiveTable-root-id"
             >
-              <thead
-                class="MuiTableHead-root-id"
+              <table
+                class="MuiTable-root-id"
               >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
+                <thead
+                  class="MuiTableHead-root-id"
                 >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id"
-                    scope="col"
+                  <tr
+                    class="MuiTableRow-root-id MuiTableRow-head-id"
                   >
-                    No. of Order
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id"
-                    scope="col"
-                  >
-                    Date
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id"
-                    scope="col"
-                  >
-                    Status
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-textRight-id"
-                    scope="col"
-                  >
-                    Total
-                  </th>
-                </tr>
-              </thead>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id"
+                      scope="col"
+                    >
+                      No. of Order
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id"
+                      scope="col"
+                    >
+                      Date
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id"
+                      scope="col"
+                    >
+                      Status
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-textRight-id"
+                      scope="col"
+                    >
+                      Total
+                    </th>
+                  </tr>
+                </thead>
+                <tbody
+                  class="MuiTableBody-root-id"
                 >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  <tr
+                    class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
                   >
-                    #8234
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    <time
-                      class=""
-                      datetime="1525685850124"
-                      title="May 7, 2018 5:37 AM"
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
                     >
-                      3 months ago
-                    </time>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    <div
-                      class="makeStyles-root-id undefined makeStyles-successDot-id"
+                      #8234
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
                     >
-                      Fully paid
-                    </div>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
-                  >
-                    $1,215.89
-                  </td>
-                </tr>
-              </tbody>
-            </table>
+                      <time
+                        class=""
+                        datetime="1525685850124"
+                        title="May 7, 2018 5:37 AM"
+                      >
+                        3 months ago
+                      </time>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                    >
+                      <div
+                        class="makeStyles-root-id undefined makeStyles-successDot-id"
+                      >
+                        Fully paid
+                      </div>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
+                    >
+                      $1,215.89
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
           </div>
         </div>
         <div>
@@ -33392,10 +33532,10 @@ exports[`Storyshots Views / Customers / Customer details loading 1`] = `
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -33408,7 +33548,7 @@ exports[`Storyshots Views / Customers / Customer details loading 1`] = `
           </span>
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -33710,86 +33850,90 @@ exports[`Storyshots Views / Customers / Customer details loading 1`] = `
             <hr
               class="makeStyles-hr-id"
             />
-            <table
-              class="MuiTable-root-id"
+            <div
+              class="ResponsiveTable-root-id"
             >
-              <thead
-                class="MuiTableHead-root-id"
+              <table
+                class="MuiTable-root-id"
               >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
+                <thead
+                  class="MuiTableHead-root-id"
                 >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id"
-                    scope="col"
+                  <tr
+                    class="MuiTableRow-root-id MuiTableRow-head-id"
                   >
-                    No. of Order
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id"
-                    scope="col"
-                  >
-                    Date
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id"
-                    scope="col"
-                  >
-                    Status
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-textRight-id"
-                    scope="col"
-                  >
-                    Total
-                  </th>
-                </tr>
-              </thead>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id"
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id"
+                      scope="col"
+                    >
+                      No. of Order
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id"
+                      scope="col"
+                    >
+                      Date
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id"
+                      scope="col"
+                    >
+                      Status
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-textRight-id"
+                      scope="col"
+                    >
+                      Total
+                    </th>
+                  </tr>
+                </thead>
+                <tbody
+                  class="MuiTableBody-root-id"
                 >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  <tr
+                    class="MuiTableRow-root-id"
                   >
-                    <span
-                      class="makeStyles-skeleton-id"
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
                     >
-                      ‌
-                    </span>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    <span
-                      class="makeStyles-skeleton-id"
+                      <span
+                        class="makeStyles-skeleton-id"
+                      >
+                        ‌
+                      </span>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
                     >
-                      ‌
-                    </span>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    <span
-                      class="makeStyles-skeleton-id"
+                      <span
+                        class="makeStyles-skeleton-id"
+                      >
+                        ‌
+                      </span>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
                     >
-                      ‌
-                    </span>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
-                  >
-                    <span
-                      class="makeStyles-skeleton-id"
+                      <span
+                        class="makeStyles-skeleton-id"
+                      >
+                        ‌
+                      </span>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
                     >
-                      ‌
-                    </span>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
+                      <span
+                        class="makeStyles-skeleton-id"
+                      >
+                        ‌
+                      </span>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
           </div>
         </div>
         <div>
@@ -33911,10 +34055,10 @@ exports[`Storyshots Views / Customers / Customer details never logged 1`] = `
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -33922,7 +34066,7 @@ exports[`Storyshots Views / Customers / Customer details never logged 1`] = `
           Tom Cooper
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -34213,80 +34357,84 @@ exports[`Storyshots Views / Customers / Customer details never logged 1`] = `
             <hr
               class="makeStyles-hr-id"
             />
-            <table
-              class="MuiTable-root-id"
+            <div
+              class="ResponsiveTable-root-id"
             >
-              <thead
-                class="MuiTableHead-root-id"
+              <table
+                class="MuiTable-root-id"
               >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
+                <thead
+                  class="MuiTableHead-root-id"
                 >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id"
-                    scope="col"
+                  <tr
+                    class="MuiTableRow-root-id MuiTableRow-head-id"
                   >
-                    No. of Order
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id"
-                    scope="col"
-                  >
-                    Date
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id"
-                    scope="col"
-                  >
-                    Status
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-textRight-id"
-                    scope="col"
-                  >
-                    Total
-                  </th>
-                </tr>
-              </thead>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id"
+                      scope="col"
+                    >
+                      No. of Order
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id"
+                      scope="col"
+                    >
+                      Date
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id"
+                      scope="col"
+                    >
+                      Status
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-textRight-id"
+                      scope="col"
+                    >
+                      Total
+                    </th>
+                  </tr>
+                </thead>
+                <tbody
+                  class="MuiTableBody-root-id"
                 >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  <tr
+                    class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
                   >
-                    #8234
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    <time
-                      class=""
-                      datetime="1525685850124"
-                      title="May 7, 2018 5:37 AM"
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
                     >
-                      3 months ago
-                    </time>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    <div
-                      class="makeStyles-root-id undefined makeStyles-successDot-id"
+                      #8234
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
                     >
-                      Fully paid
-                    </div>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
-                  >
-                    $1,215.89
-                  </td>
-                </tr>
-              </tbody>
-            </table>
+                      <time
+                        class=""
+                        datetime="1525685850124"
+                        title="May 7, 2018 5:37 AM"
+                      >
+                        3 months ago
+                      </time>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                    >
+                      <div
+                        class="makeStyles-root-id undefined makeStyles-successDot-id"
+                      >
+                        Fully paid
+                      </div>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
+                    >
+                      $1,215.89
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
           </div>
         </div>
         <div>
@@ -34433,10 +34581,10 @@ exports[`Storyshots Views / Customers / Customer details never placed order 1`]
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -34444,7 +34592,7 @@ exports[`Storyshots Views / Customers / Customer details never placed order 1`]
           Tom Cooper
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -34735,80 +34883,84 @@ exports[`Storyshots Views / Customers / Customer details never placed order 1`]
             <hr
               class="makeStyles-hr-id"
             />
-            <table
-              class="MuiTable-root-id"
+            <div
+              class="ResponsiveTable-root-id"
             >
-              <thead
-                class="MuiTableHead-root-id"
+              <table
+                class="MuiTable-root-id"
               >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
+                <thead
+                  class="MuiTableHead-root-id"
                 >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id"
-                    scope="col"
+                  <tr
+                    class="MuiTableRow-root-id MuiTableRow-head-id"
                   >
-                    No. of Order
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id"
-                    scope="col"
-                  >
-                    Date
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id"
-                    scope="col"
-                  >
-                    Status
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-textRight-id"
-                    scope="col"
-                  >
-                    Total
-                  </th>
-                </tr>
-              </thead>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id"
+                      scope="col"
+                    >
+                      No. of Order
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id"
+                      scope="col"
+                    >
+                      Date
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id"
+                      scope="col"
+                    >
+                      Status
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-textRight-id"
+                      scope="col"
+                    >
+                      Total
+                    </th>
+                  </tr>
+                </thead>
+                <tbody
+                  class="MuiTableBody-root-id"
                 >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  <tr
+                    class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
                   >
-                    #8234
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    <time
-                      class=""
-                      datetime="1525685850124"
-                      title="May 7, 2018 5:37 AM"
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
                     >
-                      3 months ago
-                    </time>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    <div
-                      class="makeStyles-root-id undefined makeStyles-successDot-id"
+                      #8234
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
                     >
-                      Fully paid
-                    </div>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
-                  >
-                    $1,215.89
-                  </td>
-                </tr>
-              </tbody>
-            </table>
+                      <time
+                        class=""
+                        datetime="1525685850124"
+                        title="May 7, 2018 5:37 AM"
+                      >
+                        3 months ago
+                      </time>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                    >
+                      <div
+                        class="makeStyles-root-id undefined makeStyles-successDot-id"
+                      >
+                        Fully paid
+                      </div>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
+                    >
+                      $1,215.89
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
           </div>
         </div>
         <div>
@@ -34955,10 +35107,10 @@ exports[`Storyshots Views / Customers / Customer details no address at all 1`] =
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -34966,7 +35118,7 @@ exports[`Storyshots Views / Customers / Customer details no address at all 1`] =
           Tom Cooper
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -35257,80 +35409,84 @@ exports[`Storyshots Views / Customers / Customer details no address at all 1`] =
             <hr
               class="makeStyles-hr-id"
             />
-            <table
-              class="MuiTable-root-id"
+            <div
+              class="ResponsiveTable-root-id"
             >
-              <thead
-                class="MuiTableHead-root-id"
+              <table
+                class="MuiTable-root-id"
               >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
+                <thead
+                  class="MuiTableHead-root-id"
                 >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id"
-                    scope="col"
+                  <tr
+                    class="MuiTableRow-root-id MuiTableRow-head-id"
                   >
-                    No. of Order
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id"
-                    scope="col"
-                  >
-                    Date
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id"
-                    scope="col"
-                  >
-                    Status
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-textRight-id"
-                    scope="col"
-                  >
-                    Total
-                  </th>
-                </tr>
-              </thead>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id"
+                      scope="col"
+                    >
+                      No. of Order
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id"
+                      scope="col"
+                    >
+                      Date
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id"
+                      scope="col"
+                    >
+                      Status
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-textRight-id"
+                      scope="col"
+                    >
+                      Total
+                    </th>
+                  </tr>
+                </thead>
+                <tbody
+                  class="MuiTableBody-root-id"
                 >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  <tr
+                    class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
                   >
-                    #8234
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    <time
-                      class=""
-                      datetime="1525685850124"
-                      title="May 7, 2018 5:37 AM"
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
                     >
-                      3 months ago
-                    </time>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    <div
-                      class="makeStyles-root-id undefined makeStyles-successDot-id"
+                      #8234
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
                     >
-                      Fully paid
-                    </div>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
-                  >
-                    $1,215.89
-                  </td>
-                </tr>
-              </tbody>
-            </table>
+                      <time
+                        class=""
+                        datetime="1525685850124"
+                        title="May 7, 2018 5:37 AM"
+                      >
+                        3 months ago
+                      </time>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                    >
+                      <div
+                        class="makeStyles-root-id undefined makeStyles-successDot-id"
+                      >
+                        Fully paid
+                      </div>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
+                    >
+                      $1,215.89
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
           </div>
         </div>
         <div>
@@ -35458,10 +35614,10 @@ exports[`Storyshots Views / Customers / Customer details no default billing addr
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -35469,7 +35625,7 @@ exports[`Storyshots Views / Customers / Customer details no default billing addr
           Tom Cooper
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -35760,80 +35916,84 @@ exports[`Storyshots Views / Customers / Customer details no default billing addr
             <hr
               class="makeStyles-hr-id"
             />
-            <table
-              class="MuiTable-root-id"
+            <div
+              class="ResponsiveTable-root-id"
             >
-              <thead
-                class="MuiTableHead-root-id"
+              <table
+                class="MuiTable-root-id"
               >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
+                <thead
+                  class="MuiTableHead-root-id"
                 >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id"
-                    scope="col"
+                  <tr
+                    class="MuiTableRow-root-id MuiTableRow-head-id"
                   >
-                    No. of Order
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id"
-                    scope="col"
-                  >
-                    Date
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id"
-                    scope="col"
-                  >
-                    Status
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-textRight-id"
-                    scope="col"
-                  >
-                    Total
-                  </th>
-                </tr>
-              </thead>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id"
+                      scope="col"
+                    >
+                      No. of Order
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id"
+                      scope="col"
+                    >
+                      Date
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id"
+                      scope="col"
+                    >
+                      Status
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-textRight-id"
+                      scope="col"
+                    >
+                      Total
+                    </th>
+                  </tr>
+                </thead>
+                <tbody
+                  class="MuiTableBody-root-id"
                 >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  <tr
+                    class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
                   >
-                    #8234
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    <time
-                      class=""
-                      datetime="1525685850124"
-                      title="May 7, 2018 5:37 AM"
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
                     >
-                      3 months ago
-                    </time>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    <div
-                      class="makeStyles-root-id undefined makeStyles-successDot-id"
+                      #8234
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
                     >
-                      Fully paid
-                    </div>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
-                  >
-                    $1,215.89
-                  </td>
-                </tr>
-              </tbody>
-            </table>
+                      <time
+                        class=""
+                        datetime="1525685850124"
+                        title="May 7, 2018 5:37 AM"
+                      >
+                        3 months ago
+                      </time>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                    >
+                      <div
+                        class="makeStyles-root-id undefined makeStyles-successDot-id"
+                      >
+                        Fully paid
+                      </div>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
+                    >
+                      $1,215.89
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
           </div>
         </div>
         <div>
@@ -35986,10 +36146,10 @@ exports[`Storyshots Views / Customers / Customer details no default shipping add
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -35997,7 +36157,7 @@ exports[`Storyshots Views / Customers / Customer details no default shipping add
           Tom Cooper
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -36288,80 +36448,84 @@ exports[`Storyshots Views / Customers / Customer details no default shipping add
             <hr
               class="makeStyles-hr-id"
             />
-            <table
-              class="MuiTable-root-id"
+            <div
+              class="ResponsiveTable-root-id"
             >
-              <thead
-                class="MuiTableHead-root-id"
+              <table
+                class="MuiTable-root-id"
               >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
+                <thead
+                  class="MuiTableHead-root-id"
                 >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id"
-                    scope="col"
+                  <tr
+                    class="MuiTableRow-root-id MuiTableRow-head-id"
                   >
-                    No. of Order
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id"
-                    scope="col"
-                  >
-                    Date
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id"
-                    scope="col"
-                  >
-                    Status
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-textRight-id"
-                    scope="col"
-                  >
-                    Total
-                  </th>
-                </tr>
-              </thead>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id"
+                      scope="col"
+                    >
+                      No. of Order
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id"
+                      scope="col"
+                    >
+                      Date
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id"
+                      scope="col"
+                    >
+                      Status
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-textRight-id"
+                      scope="col"
+                    >
+                      Total
+                    </th>
+                  </tr>
+                </thead>
+                <tbody
+                  class="MuiTableBody-root-id"
                 >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  <tr
+                    class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
                   >
-                    #8234
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    <time
-                      class=""
-                      datetime="1525685850124"
-                      title="May 7, 2018 5:37 AM"
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
                     >
-                      3 months ago
-                    </time>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    <div
-                      class="makeStyles-root-id undefined makeStyles-successDot-id"
+                      #8234
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
                     >
-                      Fully paid
-                    </div>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
-                  >
-                    $1,215.89
-                  </td>
-                </tr>
-              </tbody>
-            </table>
+                      <time
+                        class=""
+                        datetime="1525685850124"
+                        title="May 7, 2018 5:37 AM"
+                      >
+                        3 months ago
+                      </time>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                    >
+                      <div
+                        class="makeStyles-root-id undefined makeStyles-successDot-id"
+                      >
+                        Fully paid
+                      </div>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
+                    >
+                      $1,215.89
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
           </div>
         </div>
         <div>
@@ -36513,10 +36677,10 @@ exports[`Storyshots Views / Customers / Customer list default 1`] = `
   style="padding:24px"
 >
   <div
-    class="makeStyles-root-id"
+    class="Container-root-id"
   >
     <div
-      class="makeStyles-root-id"
+      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
         class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -36524,7 +36688,7 @@ exports[`Storyshots Views / Customers / Customer list default 1`] = `
         Customers
       </div>
       <div
-        class="makeStyles-action-id"
+        class="ExtendedPageHeader-action-id"
       >
         <div
           class="makeStyles-root-id"
@@ -36620,985 +36784,989 @@ exports[`Storyshots Views / Customers / Customer list default 1`] = `
       <hr
         class="makeStyles-root-id"
       />
-      <table
-        class="MuiTable-root-id"
+      <div
+        class="ResponsiveTable-root-id"
       >
-        <thead
-          class="MuiTableHead-root-id"
+        <table
+          class="MuiTable-root-id"
         >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-head-id"
+          <thead
+            class="MuiTableHead-root-id"
           >
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
-              scope="col"
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-head-id"
             >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
+                scope="col"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
-              scope="col"
-            >
-              Customer Name
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colEmail-id"
-              scope="col"
-            >
-              Customer Email
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colOrders-id"
-              scope="col"
-            >
-              No. of Orders
-            </th>
-          </tr>
-        </thead>
-        <tfoot
-          class="MuiTableFooter-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-footer-id"
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                scope="col"
+              >
+                Customer Name
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colEmail-id"
+                scope="col"
+              >
+                Customer Email
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colOrders-id"
+                scope="col"
+              >
+                No. of Orders
+              </th>
+            </tr>
+          </thead>
+          <tfoot
+            class="MuiTableFooter-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
-              colspan="4"
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-footer-id"
             >
-              <div
-                class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                colspan="4"
               >
                 <div
-                  class="makeStyles-spacer-id"
+                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
                 >
-                  <div>
-                    <span
-                      class="RowNumberSelect-label-id"
-                    >
-                      No of Rows:
-                    </span>
-                    <div
-                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
-                    >
+                  <div
+                    class="makeStyles-spacer-id"
+                  >
+                    <div>
+                      <span
+                        class="RowNumberSelect-label-id"
+                      >
+                        No of Rows:
+                      </span>
                       <div
-                        aria-haspopup="listbox"
-                        aria-labelledby=" "
-                        class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-id"
-                        role="button"
-                        tabindex="0"
+                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                       >
-                        20
-                      </div>
-                      <input
-                        type="hidden"
-                        value="20"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MuiSelect-icon-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M7 10l5 5 5-5z"
+                        <div
+                          aria-haspopup="listbox"
+                          aria-labelledby=" "
+                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-id"
+                          role="button"
+                          tabindex="0"
+                        >
+                          20
+                        </div>
+                        <input
+                          type="hidden"
+                          value="20"
                         />
-                      </svg>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M7 10l5 5 5-5z"
+                          />
+                        </svg>
+                      </div>
                     </div>
                   </div>
+                  <div
+                    class="makeStyles-root-id"
+                  >
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      data-tc="button-pagination-back"
+                      disabled=""
+                      tabindex="-1"
+                      type="button"
+                    >
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M14 7l-5 5 5 5V7z"
+                          />
+                          <path
+                            d="M24 0v24H0V0h24z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                      data-tc="button-pagination-next"
+                      tabindex="0"
+                      type="button"
+                    >
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M10 17l5-5-5-5v10z"
+                          />
+                          <path
+                            d="M0 24V0h24v24H0z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </div>
                 </div>
-                <div
-                  class="makeStyles-root-id"
+              </td>
+            </tr>
+          </tfoot>
+          <tbody
+            class="MuiTableBody-root-id"
+          >
+            <tr
+              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
                 >
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                    data-tc="button-pagination-back"
-                    disabled=""
-                    tabindex="-1"
-                    type="button"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M14 7l-5 5 5 5V7z"
-                        />
-                        <path
-                          d="M24 0v24H0V0h24z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
-                    data-tc="button-pagination-next"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M10 17l5-5-5-5v10z"
-                        />
-                        <path
-                          d="M0 24V0h24v24H0z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                </div>
-              </div>
-            </td>
-          </tr>
-        </tfoot>
-        <tbody
-          class="MuiTableBody-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
-            >
-              curtis Bailey
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEmail-id"
-            >
-              Curtis.bailey@example.com
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colOrders-id"
-            >
-              2
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+                curtis Bailey
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEmail-id"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
-            >
-              Curtis Bailey
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEmail-id"
-            >
-              curtis.bailey@example.com
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colOrders-id"
-            >
-              2
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+                Curtis.bailey@example.com
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colOrders-id"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                2
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
             >
-              Elizabeth Vaughn
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEmail-id"
-            >
-              elizabeth.vaughn@example.com
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colOrders-id"
-            >
-              1
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
-            >
-              Michael Martinez
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEmail-id"
-            >
-              michael.martinez@example.com
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colOrders-id"
-            >
-              1
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
-            >
-              Kayla Griffin
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEmail-id"
-            >
-              kayla.griffin@example.com
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colOrders-id"
-            >
-              0
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+                Curtis Bailey
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEmail-id"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
-            >
-              Donna Robinson
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEmail-id"
-            >
-              donna.robinson@example.com
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colOrders-id"
-            >
-              0
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+                curtis.bailey@example.com
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colOrders-id"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                2
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
             >
-              James Bqall
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEmail-id"
-            >
-              james.ball@example.com
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colOrders-id"
-            >
-              1
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
-            >
-              Anthony Gonzalez
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEmail-id"
-            >
-              anthony.gonzalez@example.com
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colOrders-id"
-            >
-              2
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
-            >
-              Anthony Gonzalez
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEmail-id"
-            >
-              anthony.gonzalez@example.com
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colOrders-id"
-            >
-              2
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+                Elizabeth Vaughn
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEmail-id"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
-            >
-              Wesley Davis
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEmail-id"
-            >
-              wesley.davis@example.com
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colOrders-id"
-            >
-              1
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+                elizabeth.vaughn@example.com
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colOrders-id"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                1
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
             >
-              Laura Stone
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEmail-id"
-            >
-              laura.stone@example.com
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colOrders-id"
-            >
-              1
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
-            >
-              William Miller
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEmail-id"
-            >
-              william.miller@example.com
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colOrders-id"
-            >
-              0
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
-            >
-              Donald Solomon
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEmail-id"
-            >
-              donald.solomon@example.com
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colOrders-id"
-            >
-              0
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+                Michael Martinez
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEmail-id"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
-            >
-              Anthony Young
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEmail-id"
-            >
-              anthony.young@example.com
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colOrders-id"
-            >
-              0
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+                michael.martinez@example.com
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colOrders-id"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                1
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
             >
-              Hanson Sharon
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEmail-id"
-            >
-              sharon.hanson@example.com
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colOrders-id"
-            >
-              0
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
-            >
-              Laura Jensen
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEmail-id"
-            >
-              laura.jensen@example.com
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colOrders-id"
-            >
-              1
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
-            >
-              Mark Lee
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEmail-id"
-            >
-              mark.lee@example.com
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colOrders-id"
-            >
-              1
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+                Kayla Griffin
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEmail-id"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
-            >
-              David Lawson
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEmail-id"
-            >
-              david.lawson@example.com
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colOrders-id"
-            >
-              2
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+                kayla.griffin@example.com
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colOrders-id"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                0
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
             >
-              David Lawson
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEmail-id"
-            >
-              david.lawson@example.com
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colOrders-id"
-            >
-              2
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
-            >
-              Faith Smith
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEmail-id"
-            >
-              faith.smith@example.com
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colOrders-id"
-            >
-              0
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
-            >
-              John Jones
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEmail-id"
-            >
-              john.jones@example.com
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colOrders-id"
-            >
-              0
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+                Donna Robinson
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEmail-id"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
-            >
-              Ronald Fisher
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEmail-id"
-            >
-              ronald.fisher@example.com
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colOrders-id"
-            >
-              0
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+                donna.robinson@example.com
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colOrders-id"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                0
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
             >
-              Jason Gray
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEmail-id"
-            >
-              jason.gray@example.com
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colOrders-id"
-            >
-              0
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+              >
+                James Bqall
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEmail-id"
+              >
+                james.ball@example.com
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colOrders-id"
+              >
+                1
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
             >
-              Tom Cooper
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEmail-id"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+              >
+                Anthony Gonzalez
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEmail-id"
+              >
+                anthony.gonzalez@example.com
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colOrders-id"
+              >
+                2
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
             >
-              admin@example.com
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colOrders-id"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+              >
+                Anthony Gonzalez
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEmail-id"
+              >
+                anthony.gonzalez@example.com
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colOrders-id"
+              >
+                2
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
             >
-              6
-            </td>
-          </tr>
-        </tbody>
-      </table>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+              >
+                Wesley Davis
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEmail-id"
+              >
+                wesley.davis@example.com
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colOrders-id"
+              >
+                1
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+              >
+                Laura Stone
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEmail-id"
+              >
+                laura.stone@example.com
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colOrders-id"
+              >
+                1
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+              >
+                William Miller
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEmail-id"
+              >
+                william.miller@example.com
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colOrders-id"
+              >
+                0
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+              >
+                Donald Solomon
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEmail-id"
+              >
+                donald.solomon@example.com
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colOrders-id"
+              >
+                0
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+              >
+                Anthony Young
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEmail-id"
+              >
+                anthony.young@example.com
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colOrders-id"
+              >
+                0
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+              >
+                Hanson Sharon
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEmail-id"
+              >
+                sharon.hanson@example.com
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colOrders-id"
+              >
+                0
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+              >
+                Laura Jensen
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEmail-id"
+              >
+                laura.jensen@example.com
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colOrders-id"
+              >
+                1
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+              >
+                Mark Lee
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEmail-id"
+              >
+                mark.lee@example.com
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colOrders-id"
+              >
+                1
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+              >
+                David Lawson
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEmail-id"
+              >
+                david.lawson@example.com
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colOrders-id"
+              >
+                2
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+              >
+                David Lawson
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEmail-id"
+              >
+                david.lawson@example.com
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colOrders-id"
+              >
+                2
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+              >
+                Faith Smith
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEmail-id"
+              >
+                faith.smith@example.com
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colOrders-id"
+              >
+                0
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+              >
+                John Jones
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEmail-id"
+              >
+                john.jones@example.com
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colOrders-id"
+              >
+                0
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+              >
+                Ronald Fisher
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEmail-id"
+              >
+                ronald.fisher@example.com
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colOrders-id"
+              >
+                0
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+              >
+                Jason Gray
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEmail-id"
+              >
+                jason.gray@example.com
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colOrders-id"
+              >
+                0
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+              >
+                Tom Cooper
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEmail-id"
+              >
+                admin@example.com
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colOrders-id"
+              >
+                6
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
     </div>
   </div>
 </div>
@@ -37609,10 +37777,10 @@ exports[`Storyshots Views / Customers / Customer list loading 1`] = `
   style="padding:24px"
 >
   <div
-    class="makeStyles-root-id"
+    class="Container-root-id"
   >
     <div
-      class="makeStyles-root-id"
+      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
         class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -37620,7 +37788,7 @@ exports[`Storyshots Views / Customers / Customer list loading 1`] = `
         Customers
       </div>
       <div
-        class="makeStyles-action-id"
+        class="ExtendedPageHeader-action-id"
       >
         <div
           class="makeStyles-root-id"
@@ -37717,214 +37885,218 @@ exports[`Storyshots Views / Customers / Customer list loading 1`] = `
       <hr
         class="makeStyles-root-id"
       />
-      <table
-        class="MuiTable-root-id"
+      <div
+        class="ResponsiveTable-root-id"
       >
-        <thead
-          class="MuiTableHead-root-id"
+        <table
+          class="MuiTable-root-id"
         >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-head-id"
+          <thead
+            class="MuiTableHead-root-id"
           >
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
-              scope="col"
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-head-id"
             >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
-                disabled=""
-                tabindex="-1"
-                type="button"
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
+                scope="col"
               >
-                <input
-                  class="makeStyles-box-id makeStyles-disabled-id"
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
                   disabled=""
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
-              scope="col"
-            >
-              Customer Name
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colEmail-id"
-              scope="col"
-            >
-              Customer Email
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colOrders-id"
-              scope="col"
-            >
-              No. of Orders
-            </th>
-          </tr>
-        </thead>
-        <tfoot
-          class="MuiTableFooter-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-footer-id"
+                  tabindex="-1"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id makeStyles-disabled-id"
+                    disabled=""
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                scope="col"
+              >
+                Customer Name
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colEmail-id"
+                scope="col"
+              >
+                Customer Email
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colOrders-id"
+                scope="col"
+              >
+                No. of Orders
+              </th>
+            </tr>
+          </thead>
+          <tfoot
+            class="MuiTableFooter-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
-              colspan="4"
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-footer-id"
             >
-              <div
-                class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                colspan="4"
               >
                 <div
-                  class="makeStyles-spacer-id"
+                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
                 >
-                  <div>
-                    <span
-                      class="RowNumberSelect-label-id"
-                    >
-                      No of Rows:
-                    </span>
-                    <div
-                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
-                    >
+                  <div
+                    class="makeStyles-spacer-id"
+                  >
+                    <div>
+                      <span
+                        class="RowNumberSelect-label-id"
+                      >
+                        No of Rows:
+                      </span>
                       <div
-                        aria-haspopup="listbox"
-                        aria-labelledby=" "
-                        class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-id"
-                        role="button"
-                        tabindex="0"
+                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                       >
-                        20
-                      </div>
-                      <input
-                        type="hidden"
-                        value="20"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MuiSelect-icon-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M7 10l5 5 5-5z"
+                        <div
+                          aria-haspopup="listbox"
+                          aria-labelledby=" "
+                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-id"
+                          role="button"
+                          tabindex="0"
+                        >
+                          20
+                        </div>
+                        <input
+                          type="hidden"
+                          value="20"
                         />
-                      </svg>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M7 10l5 5 5-5z"
+                          />
+                        </svg>
+                      </div>
                     </div>
                   </div>
-                </div>
-                <div
-                  class="makeStyles-root-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                    data-tc="button-pagination-back"
-                    disabled=""
-                    tabindex="-1"
-                    type="button"
+                  <div
+                    class="makeStyles-root-id"
                   >
-                    <span
-                      class="MuiIconButton-label-id"
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      data-tc="button-pagination-back"
+                      disabled=""
+                      tabindex="-1"
+                      type="button"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
+                      <span
+                        class="MuiIconButton-label-id"
                       >
-                        <path
-                          d="M14 7l-5 5 5 5V7z"
-                        />
-                        <path
-                          d="M24 0v24H0V0h24z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                    data-tc="button-pagination-next"
-                    disabled=""
-                    tabindex="-1"
-                    type="button"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M14 7l-5 5 5 5V7z"
+                          />
+                          <path
+                            d="M24 0v24H0V0h24z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      data-tc="button-pagination-next"
+                      disabled=""
+                      tabindex="-1"
+                      type="button"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
+                      <span
+                        class="MuiIconButton-label-id"
                       >
-                        <path
-                          d="M10 17l5-5-5-5v10z"
-                        />
-                        <path
-                          d="M0 24V0h24v24H0z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M10 17l5-5-5-5v10z"
+                          />
+                          <path
+                            d="M0 24V0h24v24H0z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </div>
                 </div>
-              </div>
-            </td>
-          </tr>
-        </tfoot>
-        <tbody
-          class="MuiTableBody-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id"
+              </td>
+            </tr>
+          </tfoot>
+          <tbody
+            class="MuiTableBody-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+            <tr
+              class="MuiTableRow-root-id"
             >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
-                disabled=""
-                tabindex="-1"
-                type="button"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
-                <input
-                  class="makeStyles-box-id makeStyles-disabled-id"
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
                   disabled=""
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
-            />
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEmail-id"
-            >
-              <span
-                class="makeStyles-skeleton-id"
+                  tabindex="-1"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id makeStyles-disabled-id"
+                    disabled=""
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+              />
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEmail-id"
               >
-                ‌
-              </span>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colOrders-id"
-            >
-              <span
-                class="makeStyles-skeleton-id"
+                <span
+                  class="makeStyles-skeleton-id"
+                >
+                  ‌
+                </span>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colOrders-id"
               >
-                ‌
-              </span>
-            </td>
-          </tr>
-        </tbody>
-      </table>
+                <span
+                  class="makeStyles-skeleton-id"
+                >
+                  ‌
+                </span>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
     </div>
   </div>
 </div>
@@ -37935,10 +38107,10 @@ exports[`Storyshots Views / Customers / Customer list no data 1`] = `
   style="padding:24px"
 >
   <div
-    class="makeStyles-root-id"
+    class="Container-root-id"
   >
     <div
-      class="makeStyles-root-id"
+      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
         class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -37946,7 +38118,7 @@ exports[`Storyshots Views / Customers / Customer list no data 1`] = `
         Customers
       </div>
       <div
-        class="makeStyles-action-id"
+        class="ExtendedPageHeader-action-id"
       >
         <div
           class="makeStyles-root-id"
@@ -38042,163 +38214,167 @@ exports[`Storyshots Views / Customers / Customer list no data 1`] = `
       <hr
         class="makeStyles-root-id"
       />
-      <table
-        class="MuiTable-root-id"
+      <div
+        class="ResponsiveTable-root-id"
       >
-        <thead
-          class="MuiTableHead-root-id"
+        <table
+          class="MuiTable-root-id"
         >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-head-id"
+          <thead
+            class="MuiTableHead-root-id"
           >
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
-              scope="col"
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-head-id"
             >
-              Customer Name
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colEmail-id"
-              scope="col"
-            >
-              Customer Email
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colOrders-id"
-              scope="col"
-            >
-              No. of Orders
-            </th>
-          </tr>
-        </thead>
-        <tfoot
-          class="MuiTableFooter-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-footer-id"
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                scope="col"
+              >
+                Customer Name
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colEmail-id"
+                scope="col"
+              >
+                Customer Email
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colOrders-id"
+                scope="col"
+              >
+                No. of Orders
+              </th>
+            </tr>
+          </thead>
+          <tfoot
+            class="MuiTableFooter-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
-              colspan="4"
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-footer-id"
             >
-              <div
-                class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                colspan="4"
               >
                 <div
-                  class="makeStyles-spacer-id"
+                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
                 >
-                  <div>
-                    <span
-                      class="RowNumberSelect-label-id"
-                    >
-                      No of Rows:
-                    </span>
-                    <div
-                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
-                    >
+                  <div
+                    class="makeStyles-spacer-id"
+                  >
+                    <div>
+                      <span
+                        class="RowNumberSelect-label-id"
+                      >
+                        No of Rows:
+                      </span>
                       <div
-                        aria-haspopup="listbox"
-                        aria-labelledby=" "
-                        class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-id"
-                        role="button"
-                        tabindex="0"
+                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                       >
-                        20
-                      </div>
-                      <input
-                        type="hidden"
-                        value="20"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MuiSelect-icon-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M7 10l5 5 5-5z"
+                        <div
+                          aria-haspopup="listbox"
+                          aria-labelledby=" "
+                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-id"
+                          role="button"
+                          tabindex="0"
+                        >
+                          20
+                        </div>
+                        <input
+                          type="hidden"
+                          value="20"
                         />
-                      </svg>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M7 10l5 5 5-5z"
+                          />
+                        </svg>
+                      </div>
                     </div>
                   </div>
-                </div>
-                <div
-                  class="makeStyles-root-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                    data-tc="button-pagination-back"
-                    disabled=""
-                    tabindex="-1"
-                    type="button"
+                  <div
+                    class="makeStyles-root-id"
                   >
-                    <span
-                      class="MuiIconButton-label-id"
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      data-tc="button-pagination-back"
+                      disabled=""
+                      tabindex="-1"
+                      type="button"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
+                      <span
+                        class="MuiIconButton-label-id"
                       >
-                        <path
-                          d="M14 7l-5 5 5 5V7z"
-                        />
-                        <path
-                          d="M24 0v24H0V0h24z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
-                    data-tc="button-pagination-next"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M14 7l-5 5 5 5V7z"
+                          />
+                          <path
+                            d="M24 0v24H0V0h24z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                      data-tc="button-pagination-next"
+                      tabindex="0"
+                      type="button"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
+                      <span
+                        class="MuiIconButton-label-id"
                       >
-                        <path
-                          d="M10 17l5-5-5-5v10z"
-                        />
-                        <path
-                          d="M0 24V0h24v24H0z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M10 17l5-5-5-5v10z"
+                          />
+                          <path
+                            d="M0 24V0h24v24H0z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </div>
                 </div>
-              </div>
-            </td>
-          </tr>
-        </tfoot>
-        <tbody
-          class="MuiTableBody-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id"
+              </td>
+            </tr>
+          </tfoot>
+          <tbody
+            class="MuiTableBody-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-              colspan="4"
+            <tr
+              class="MuiTableRow-root-id"
             >
-              No customers found
-            </td>
-          </tr>
-        </tbody>
-      </table>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id"
+                colspan="4"
+              >
+                No customers found
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
     </div>
   </div>
 </div>
@@ -38210,10 +38386,10 @@ exports[`Storyshots Views / Discounts / Sale create default 1`] = `
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -38221,7 +38397,7 @@ exports[`Storyshots Views / Discounts / Sale create default 1`] = `
           Create Sale
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -38570,10 +38746,10 @@ exports[`Storyshots Views / Discounts / Sale create form errors 1`] = `
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -38581,7 +38757,7 @@ exports[`Storyshots Views / Discounts / Sale create form errors 1`] = `
           Create Sale
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -38945,10 +39121,10 @@ exports[`Storyshots Views / Discounts / Sale create loading 1`] = `
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -38956,7 +39132,7 @@ exports[`Storyshots Views / Discounts / Sale create loading 1`] = `
           Create Sale
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -39312,10 +39488,10 @@ exports[`Storyshots Views / Discounts / Sale details collections 1`] = `
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -39323,7 +39499,7 @@ exports[`Storyshots Views / Discounts / Sale details collections 1`] = `
           Happy minute day!
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -39658,185 +39834,189 @@ exports[`Storyshots Views / Discounts / Sale details collections 1`] = `
             <hr
               class="makeStyles-hr-id"
             />
-            <table
-              class="MuiTable-root-id"
+            <div
+              class="ResponsiveTable-root-id"
             >
-              <thead
-                class="MuiTableHead-root-id"
+              <table
+                class="MuiTable-root-id"
               >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
+                <thead
+                  class="MuiTableHead-root-id"
                 >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
-                    scope="col"
+                  <tr
+                    class="MuiTableRow-root-id MuiTableRow-head-id"
                   >
-                    <button
-                      class="MuiButtonBase-root-id makeStyles-root-id"
-                      tabindex="0"
-                      type="button"
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
+                      scope="col"
                     >
-                      <input
-                        class="makeStyles-box-id"
-                        type="checkbox"
-                        value="false"
-                      />
-                    </button>
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-wideColumn-id"
-                    scope="col"
-                  >
-                    Collection name
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-textRight-id"
-                    scope="col"
-                  >
-                    Products
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id"
-                    scope="col"
-                  />
-                </tr>
-              </thead>
-              <tfoot
-                class="MuiTableFooter-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-footer-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
-                    colspan="4"
-                  >
-                    <div
-                      class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
-                    >
-                      <div
-                        class="makeStyles-spacer-id"
-                      />
-                      <div
-                        class="makeStyles-root-id"
+                      <button
+                        class="MuiButtonBase-root-id makeStyles-root-id"
+                        tabindex="0"
+                        type="button"
                       >
-                        <button
-                          class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                          data-tc="button-pagination-back"
-                          disabled=""
-                          tabindex="-1"
-                          type="button"
+                        <input
+                          class="makeStyles-box-id"
+                          type="checkbox"
+                          value="false"
+                        />
+                      </button>
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-wideColumn-id"
+                      scope="col"
+                    >
+                      Collection name
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-textRight-id"
+                      scope="col"
+                    >
+                      Products
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id"
+                      scope="col"
+                    />
+                  </tr>
+                </thead>
+                <tfoot
+                  class="MuiTableFooter-root-id"
+                >
+                  <tr
+                    class="MuiTableRow-root-id MuiTableRow-footer-id"
+                  >
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                      colspan="4"
+                    >
+                      <div
+                        class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+                      >
+                        <div
+                          class="makeStyles-spacer-id"
+                        />
+                        <div
+                          class="makeStyles-root-id"
                         >
-                          <span
-                            class="MuiIconButton-label-id"
+                          <button
+                            class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                            data-tc="button-pagination-back"
+                            disabled=""
+                            tabindex="-1"
+                            type="button"
                           >
-                            <svg
-                              aria-hidden="true"
-                              class="MuiSvgIcon-root-id"
-                              focusable="false"
-                              role="presentation"
-                              viewBox="0 0 24 24"
+                            <span
+                              class="MuiIconButton-label-id"
                             >
-                              <path
-                                d="M14 7l-5 5 5 5V7z"
-                              />
-                              <path
-                                d="M24 0v24H0V0h24z"
-                                fill="none"
-                              />
-                            </svg>
-                          </span>
-                        </button>
-                        <button
-                          class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
-                          data-tc="button-pagination-next"
-                          tabindex="0"
-                          type="button"
-                        >
-                          <span
-                            class="MuiIconButton-label-id"
+                              <svg
+                                aria-hidden="true"
+                                class="MuiSvgIcon-root-id"
+                                focusable="false"
+                                role="presentation"
+                                viewBox="0 0 24 24"
+                              >
+                                <path
+                                  d="M14 7l-5 5 5 5V7z"
+                                />
+                                <path
+                                  d="M24 0v24H0V0h24z"
+                                  fill="none"
+                                />
+                              </svg>
+                            </span>
+                          </button>
+                          <button
+                            class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                            data-tc="button-pagination-next"
+                            tabindex="0"
+                            type="button"
                           >
-                            <svg
-                              aria-hidden="true"
-                              class="MuiSvgIcon-root-id"
-                              focusable="false"
-                              role="presentation"
-                              viewBox="0 0 24 24"
+                            <span
+                              class="MuiIconButton-label-id"
                             >
-                              <path
-                                d="M10 17l5-5-5-5v10z"
-                              />
-                              <path
-                                d="M0 24V0h24v24H0z"
-                                fill="none"
-                              />
-                            </svg>
-                          </span>
-                        </button>
+                              <svg
+                                aria-hidden="true"
+                                class="MuiSvgIcon-root-id"
+                                focusable="false"
+                                role="presentation"
+                                viewBox="0 0 24 24"
+                              >
+                                <path
+                                  d="M10 17l5-5-5-5v10z"
+                                />
+                                <path
+                                  d="M0 24V0h24v24H0z"
+                                  fill="none"
+                                />
+                              </svg>
+                            </span>
+                          </button>
+                        </div>
                       </div>
-                    </div>
-                  </td>
-                </tr>
-              </tfoot>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+                    </td>
+                  </tr>
+                </tfoot>
+                <tbody
+                  class="MuiTableBody-root-id"
                 >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+                  <tr
+                    class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
                   >
-                    <button
-                      class="MuiButtonBase-root-id makeStyles-root-id"
-                      tabindex="0"
-                      type="button"
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                     >
-                      <input
-                        class="makeStyles-box-id"
-                        type="checkbox"
-                        value="false"
-                      />
-                    </button>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    Winter Collection
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
-                  >
-                    110
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-iconCell-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
+                      <button
+                        class="MuiButtonBase-root-id makeStyles-root-id"
+                        tabindex="0"
+                        type="button"
                       >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
-                          focusable="false"
-                          role="presentation"
-                          viewBox="0 0 24 24"
+                        <input
+                          class="makeStyles-box-id"
+                          type="checkbox"
+                          value="false"
+                        />
+                      </button>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                    >
+                      Winter Collection
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
+                    >
+                      110
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-iconCell-id"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id MuiIconButton-root-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiIconButton-label-id"
                         >
-                          <path
-                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                          />
-                        </svg>
-                      </span>
-                    </button>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
           </div>
           <div
             class="makeStyles-spacer-id"
@@ -40058,10 +40238,10 @@ exports[`Storyshots Views / Discounts / Sale details default 1`] = `
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -40069,7 +40249,7 @@ exports[`Storyshots Views / Discounts / Sale details default 1`] = `
           Happy minute day!
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -40404,185 +40584,189 @@ exports[`Storyshots Views / Discounts / Sale details default 1`] = `
             <hr
               class="makeStyles-hr-id"
             />
-            <table
-              class="MuiTable-root-id"
+            <div
+              class="ResponsiveTable-root-id"
             >
-              <thead
-                class="MuiTableHead-root-id"
+              <table
+                class="MuiTable-root-id"
               >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
+                <thead
+                  class="MuiTableHead-root-id"
                 >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
-                    scope="col"
+                  <tr
+                    class="MuiTableRow-root-id MuiTableRow-head-id"
                   >
-                    <button
-                      class="MuiButtonBase-root-id makeStyles-root-id"
-                      tabindex="0"
-                      type="button"
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
+                      scope="col"
                     >
-                      <input
-                        class="makeStyles-box-id"
-                        type="checkbox"
-                        value="false"
-                      />
-                    </button>
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-wideColumn-id"
-                    scope="col"
-                  >
-                    Category name
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-textRight-id"
-                    scope="col"
-                  >
-                    Products
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id"
-                    scope="col"
-                  />
-                </tr>
-              </thead>
-              <tfoot
-                class="MuiTableFooter-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-footer-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
-                    colspan="4"
-                  >
-                    <div
-                      class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
-                    >
-                      <div
-                        class="makeStyles-spacer-id"
-                      />
-                      <div
-                        class="makeStyles-root-id"
+                      <button
+                        class="MuiButtonBase-root-id makeStyles-root-id"
+                        tabindex="0"
+                        type="button"
                       >
-                        <button
-                          class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                          data-tc="button-pagination-back"
-                          disabled=""
-                          tabindex="-1"
-                          type="button"
+                        <input
+                          class="makeStyles-box-id"
+                          type="checkbox"
+                          value="false"
+                        />
+                      </button>
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-wideColumn-id"
+                      scope="col"
+                    >
+                      Category name
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-textRight-id"
+                      scope="col"
+                    >
+                      Products
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id"
+                      scope="col"
+                    />
+                  </tr>
+                </thead>
+                <tfoot
+                  class="MuiTableFooter-root-id"
+                >
+                  <tr
+                    class="MuiTableRow-root-id MuiTableRow-footer-id"
+                  >
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                      colspan="4"
+                    >
+                      <div
+                        class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+                      >
+                        <div
+                          class="makeStyles-spacer-id"
+                        />
+                        <div
+                          class="makeStyles-root-id"
                         >
-                          <span
-                            class="MuiIconButton-label-id"
+                          <button
+                            class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                            data-tc="button-pagination-back"
+                            disabled=""
+                            tabindex="-1"
+                            type="button"
                           >
-                            <svg
-                              aria-hidden="true"
-                              class="MuiSvgIcon-root-id"
-                              focusable="false"
-                              role="presentation"
-                              viewBox="0 0 24 24"
+                            <span
+                              class="MuiIconButton-label-id"
                             >
-                              <path
-                                d="M14 7l-5 5 5 5V7z"
-                              />
-                              <path
-                                d="M24 0v24H0V0h24z"
-                                fill="none"
-                              />
-                            </svg>
-                          </span>
-                        </button>
-                        <button
-                          class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
-                          data-tc="button-pagination-next"
-                          tabindex="0"
-                          type="button"
-                        >
-                          <span
-                            class="MuiIconButton-label-id"
+                              <svg
+                                aria-hidden="true"
+                                class="MuiSvgIcon-root-id"
+                                focusable="false"
+                                role="presentation"
+                                viewBox="0 0 24 24"
+                              >
+                                <path
+                                  d="M14 7l-5 5 5 5V7z"
+                                />
+                                <path
+                                  d="M24 0v24H0V0h24z"
+                                  fill="none"
+                                />
+                              </svg>
+                            </span>
+                          </button>
+                          <button
+                            class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                            data-tc="button-pagination-next"
+                            tabindex="0"
+                            type="button"
                           >
-                            <svg
-                              aria-hidden="true"
-                              class="MuiSvgIcon-root-id"
-                              focusable="false"
-                              role="presentation"
-                              viewBox="0 0 24 24"
+                            <span
+                              class="MuiIconButton-label-id"
                             >
-                              <path
-                                d="M10 17l5-5-5-5v10z"
-                              />
-                              <path
-                                d="M0 24V0h24v24H0z"
-                                fill="none"
-                              />
-                            </svg>
-                          </span>
-                        </button>
+                              <svg
+                                aria-hidden="true"
+                                class="MuiSvgIcon-root-id"
+                                focusable="false"
+                                role="presentation"
+                                viewBox="0 0 24 24"
+                              >
+                                <path
+                                  d="M10 17l5-5-5-5v10z"
+                                />
+                                <path
+                                  d="M0 24V0h24v24H0z"
+                                  fill="none"
+                                />
+                              </svg>
+                            </span>
+                          </button>
+                        </div>
                       </div>
-                    </div>
-                  </td>
-                </tr>
-              </tfoot>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+                    </td>
+                  </tr>
+                </tfoot>
+                <tbody
+                  class="MuiTableBody-root-id"
                 >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+                  <tr
+                    class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
                   >
-                    <button
-                      class="MuiButtonBase-root-id makeStyles-root-id"
-                      tabindex="0"
-                      type="button"
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                     >
-                      <input
-                        class="makeStyles-box-id"
-                        type="checkbox"
-                        value="false"
-                      />
-                    </button>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    Apparel
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
-                  >
-                    18
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-iconCell-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
+                      <button
+                        class="MuiButtonBase-root-id makeStyles-root-id"
+                        tabindex="0"
+                        type="button"
                       >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
-                          focusable="false"
-                          role="presentation"
-                          viewBox="0 0 24 24"
+                        <input
+                          class="makeStyles-box-id"
+                          type="checkbox"
+                          value="false"
+                        />
+                      </button>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                    >
+                      Apparel
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
+                    >
+                      18
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-iconCell-id"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id MuiIconButton-root-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiIconButton-label-id"
                         >
-                          <path
-                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                          />
-                        </svg>
-                      </span>
-                    </button>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
           </div>
           <div
             class="makeStyles-spacer-id"
@@ -40804,10 +40988,10 @@ exports[`Storyshots Views / Discounts / Sale details form errors 1`] = `
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -40815,7 +40999,7 @@ exports[`Storyshots Views / Discounts / Sale details form errors 1`] = `
           Happy minute day!
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -41160,185 +41344,189 @@ exports[`Storyshots Views / Discounts / Sale details form errors 1`] = `
             <hr
               class="makeStyles-hr-id"
             />
-            <table
-              class="MuiTable-root-id"
+            <div
+              class="ResponsiveTable-root-id"
             >
-              <thead
-                class="MuiTableHead-root-id"
+              <table
+                class="MuiTable-root-id"
               >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
+                <thead
+                  class="MuiTableHead-root-id"
                 >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
-                    scope="col"
+                  <tr
+                    class="MuiTableRow-root-id MuiTableRow-head-id"
                   >
-                    <button
-                      class="MuiButtonBase-root-id makeStyles-root-id"
-                      tabindex="0"
-                      type="button"
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
+                      scope="col"
                     >
-                      <input
-                        class="makeStyles-box-id"
-                        type="checkbox"
-                        value="false"
-                      />
-                    </button>
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-wideColumn-id"
-                    scope="col"
-                  >
-                    Category name
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-textRight-id"
-                    scope="col"
-                  >
-                    Products
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id"
-                    scope="col"
-                  />
-                </tr>
-              </thead>
-              <tfoot
-                class="MuiTableFooter-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-footer-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
-                    colspan="4"
-                  >
-                    <div
-                      class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
-                    >
-                      <div
-                        class="makeStyles-spacer-id"
-                      />
-                      <div
-                        class="makeStyles-root-id"
+                      <button
+                        class="MuiButtonBase-root-id makeStyles-root-id"
+                        tabindex="0"
+                        type="button"
                       >
-                        <button
-                          class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                          data-tc="button-pagination-back"
-                          disabled=""
-                          tabindex="-1"
-                          type="button"
+                        <input
+                          class="makeStyles-box-id"
+                          type="checkbox"
+                          value="false"
+                        />
+                      </button>
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-wideColumn-id"
+                      scope="col"
+                    >
+                      Category name
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-textRight-id"
+                      scope="col"
+                    >
+                      Products
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id"
+                      scope="col"
+                    />
+                  </tr>
+                </thead>
+                <tfoot
+                  class="MuiTableFooter-root-id"
+                >
+                  <tr
+                    class="MuiTableRow-root-id MuiTableRow-footer-id"
+                  >
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                      colspan="4"
+                    >
+                      <div
+                        class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+                      >
+                        <div
+                          class="makeStyles-spacer-id"
+                        />
+                        <div
+                          class="makeStyles-root-id"
                         >
-                          <span
-                            class="MuiIconButton-label-id"
+                          <button
+                            class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                            data-tc="button-pagination-back"
+                            disabled=""
+                            tabindex="-1"
+                            type="button"
                           >
-                            <svg
-                              aria-hidden="true"
-                              class="MuiSvgIcon-root-id"
-                              focusable="false"
-                              role="presentation"
-                              viewBox="0 0 24 24"
+                            <span
+                              class="MuiIconButton-label-id"
                             >
-                              <path
-                                d="M14 7l-5 5 5 5V7z"
-                              />
-                              <path
-                                d="M24 0v24H0V0h24z"
-                                fill="none"
-                              />
-                            </svg>
-                          </span>
-                        </button>
-                        <button
-                          class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
-                          data-tc="button-pagination-next"
-                          tabindex="0"
-                          type="button"
-                        >
-                          <span
-                            class="MuiIconButton-label-id"
+                              <svg
+                                aria-hidden="true"
+                                class="MuiSvgIcon-root-id"
+                                focusable="false"
+                                role="presentation"
+                                viewBox="0 0 24 24"
+                              >
+                                <path
+                                  d="M14 7l-5 5 5 5V7z"
+                                />
+                                <path
+                                  d="M24 0v24H0V0h24z"
+                                  fill="none"
+                                />
+                              </svg>
+                            </span>
+                          </button>
+                          <button
+                            class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                            data-tc="button-pagination-next"
+                            tabindex="0"
+                            type="button"
                           >
-                            <svg
-                              aria-hidden="true"
-                              class="MuiSvgIcon-root-id"
-                              focusable="false"
-                              role="presentation"
-                              viewBox="0 0 24 24"
+                            <span
+                              class="MuiIconButton-label-id"
                             >
-                              <path
-                                d="M10 17l5-5-5-5v10z"
-                              />
-                              <path
-                                d="M0 24V0h24v24H0z"
-                                fill="none"
-                              />
-                            </svg>
-                          </span>
-                        </button>
+                              <svg
+                                aria-hidden="true"
+                                class="MuiSvgIcon-root-id"
+                                focusable="false"
+                                role="presentation"
+                                viewBox="0 0 24 24"
+                              >
+                                <path
+                                  d="M10 17l5-5-5-5v10z"
+                                />
+                                <path
+                                  d="M0 24V0h24v24H0z"
+                                  fill="none"
+                                />
+                              </svg>
+                            </span>
+                          </button>
+                        </div>
                       </div>
-                    </div>
-                  </td>
-                </tr>
-              </tfoot>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+                    </td>
+                  </tr>
+                </tfoot>
+                <tbody
+                  class="MuiTableBody-root-id"
                 >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+                  <tr
+                    class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
                   >
-                    <button
-                      class="MuiButtonBase-root-id makeStyles-root-id"
-                      tabindex="0"
-                      type="button"
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                     >
-                      <input
-                        class="makeStyles-box-id"
-                        type="checkbox"
-                        value="false"
-                      />
-                    </button>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    Apparel
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
-                  >
-                    18
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-iconCell-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
+                      <button
+                        class="MuiButtonBase-root-id makeStyles-root-id"
+                        tabindex="0"
+                        type="button"
                       >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
-                          focusable="false"
-                          role="presentation"
-                          viewBox="0 0 24 24"
+                        <input
+                          class="makeStyles-box-id"
+                          type="checkbox"
+                          value="false"
+                        />
+                      </button>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                    >
+                      Apparel
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
+                    >
+                      18
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-iconCell-id"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id MuiIconButton-root-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiIconButton-label-id"
                         >
-                          <path
-                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                          />
-                        </svg>
-                      </span>
-                    </button>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
           </div>
           <div
             class="makeStyles-spacer-id"
@@ -41570,10 +41758,10 @@ exports[`Storyshots Views / Discounts / Sale details loading 1`] = `
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -41586,7 +41774,7 @@ exports[`Storyshots Views / Discounts / Sale details loading 1`] = `
           </span>
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -41927,199 +42115,203 @@ exports[`Storyshots Views / Discounts / Sale details loading 1`] = `
             <hr
               class="makeStyles-hr-id"
             />
-            <table
-              class="MuiTable-root-id"
+            <div
+              class="ResponsiveTable-root-id"
             >
-              <thead
-                class="MuiTableHead-root-id"
+              <table
+                class="MuiTable-root-id"
               >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
+                <thead
+                  class="MuiTableHead-root-id"
                 >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
-                    scope="col"
+                  <tr
+                    class="MuiTableRow-root-id MuiTableRow-head-id"
                   >
-                    <button
-                      class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
+                      scope="col"
                     >
-                      <input
-                        class="makeStyles-box-id makeStyles-disabled-id"
+                      <button
+                        class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
                         disabled=""
-                        type="checkbox"
-                        value="false"
-                      />
-                    </button>
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-wideColumn-id"
-                    scope="col"
-                  >
-                    Category name
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-textRight-id"
-                    scope="col"
-                  >
-                    Products
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id"
-                    scope="col"
-                  />
-                </tr>
-              </thead>
-              <tfoot
-                class="MuiTableFooter-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-footer-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
-                    colspan="4"
-                  >
-                    <div
-                      class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
-                    >
-                      <div
-                        class="makeStyles-spacer-id"
-                      />
-                      <div
-                        class="makeStyles-root-id"
+                        tabindex="-1"
+                        type="button"
                       >
-                        <button
-                          class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                          data-tc="button-pagination-back"
+                        <input
+                          class="makeStyles-box-id makeStyles-disabled-id"
                           disabled=""
-                          tabindex="-1"
-                          type="button"
-                        >
-                          <span
-                            class="MuiIconButton-label-id"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              class="MuiSvgIcon-root-id"
-                              focusable="false"
-                              role="presentation"
-                              viewBox="0 0 24 24"
-                            >
-                              <path
-                                d="M14 7l-5 5 5 5V7z"
-                              />
-                              <path
-                                d="M24 0v24H0V0h24z"
-                                fill="none"
-                              />
-                            </svg>
-                          </span>
-                        </button>
-                        <button
-                          class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                          data-tc="button-pagination-next"
-                          disabled=""
-                          tabindex="-1"
-                          type="button"
-                        >
-                          <span
-                            class="MuiIconButton-label-id"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              class="MuiSvgIcon-root-id"
-                              focusable="false"
-                              role="presentation"
-                              viewBox="0 0 24 24"
-                            >
-                              <path
-                                d="M10 17l5-5-5-5v10z"
-                              />
-                              <path
-                                d="M0 24V0h24v24H0z"
-                                fill="none"
-                              />
-                            </svg>
-                          </span>
-                        </button>
-                      </div>
-                    </div>
-                  </td>
-                </tr>
-              </tfoot>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id makeStyles-tableRow-id"
+                          type="checkbox"
+                          value="false"
+                        />
+                      </button>
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-wideColumn-id"
+                      scope="col"
+                    >
+                      Category name
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-textRight-id"
+                      scope="col"
+                    >
+                      Products
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id"
+                      scope="col"
+                    />
+                  </tr>
+                </thead>
+                <tfoot
+                  class="MuiTableFooter-root-id"
                 >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+                  <tr
+                    class="MuiTableRow-root-id MuiTableRow-footer-id"
                   >
-                    <button
-                      class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                      colspan="4"
                     >
-                      <input
-                        class="makeStyles-box-id makeStyles-disabled-id"
+                      <div
+                        class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+                      >
+                        <div
+                          class="makeStyles-spacer-id"
+                        />
+                        <div
+                          class="makeStyles-root-id"
+                        >
+                          <button
+                            class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                            data-tc="button-pagination-back"
+                            disabled=""
+                            tabindex="-1"
+                            type="button"
+                          >
+                            <span
+                              class="MuiIconButton-label-id"
+                            >
+                              <svg
+                                aria-hidden="true"
+                                class="MuiSvgIcon-root-id"
+                                focusable="false"
+                                role="presentation"
+                                viewBox="0 0 24 24"
+                              >
+                                <path
+                                  d="M14 7l-5 5 5 5V7z"
+                                />
+                                <path
+                                  d="M24 0v24H0V0h24z"
+                                  fill="none"
+                                />
+                              </svg>
+                            </span>
+                          </button>
+                          <button
+                            class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                            data-tc="button-pagination-next"
+                            disabled=""
+                            tabindex="-1"
+                            type="button"
+                          >
+                            <span
+                              class="MuiIconButton-label-id"
+                            >
+                              <svg
+                                aria-hidden="true"
+                                class="MuiSvgIcon-root-id"
+                                focusable="false"
+                                role="presentation"
+                                viewBox="0 0 24 24"
+                              >
+                                <path
+                                  d="M10 17l5-5-5-5v10z"
+                                />
+                                <path
+                                  d="M0 24V0h24v24H0z"
+                                  fill="none"
+                                />
+                              </svg>
+                            </span>
+                          </button>
+                        </div>
+                      </div>
+                    </td>
+                  </tr>
+                </tfoot>
+                <tbody
+                  class="MuiTableBody-root-id"
+                >
+                  <tr
+                    class="MuiTableRow-root-id makeStyles-tableRow-id"
+                  >
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
                         disabled=""
-                        type="checkbox"
-                        value="false"
-                      />
-                    </button>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    <span
-                      class="makeStyles-skeleton-id"
-                    >
-                      ‌
-                    </span>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
-                  >
-                    <span
-                      class="makeStyles-skeleton-id"
-                    >
-                      ‌
-                    </span>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-iconCell-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
+                        tabindex="-1"
+                        type="button"
+                      >
+                        <input
+                          class="makeStyles-box-id makeStyles-disabled-id"
+                          disabled=""
+                          type="checkbox"
+                          value="false"
+                        />
+                      </button>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
                     >
                       <span
-                        class="MuiIconButton-label-id"
+                        class="makeStyles-skeleton-id"
                       >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
-                          focusable="false"
-                          role="presentation"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                          />
-                        </svg>
+                        ‌
                       </span>
-                    </button>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
+                    >
+                      <span
+                        class="makeStyles-skeleton-id"
+                      >
+                        ‌
+                      </span>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-iconCell-id"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                        disabled=""
+                        tabindex="-1"
+                        type="button"
+                      >
+                        <span
+                          class="MuiIconButton-label-id"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
           </div>
           <div
             class="makeStyles-spacer-id"
@@ -42359,10 +42551,10 @@ exports[`Storyshots Views / Discounts / Sale details products 1`] = `
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -42370,7 +42562,7 @@ exports[`Storyshots Views / Discounts / Sale details products 1`] = `
           Happy minute day!
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -42705,457 +42897,461 @@ exports[`Storyshots Views / Discounts / Sale details products 1`] = `
             <hr
               class="makeStyles-hr-id"
             />
-            <table
-              class="MuiTable-root-id"
+            <div
+              class="ResponsiveTable-root-id"
             >
-              <thead
-                class="MuiTableHead-root-id"
+              <table
+                class="MuiTable-root-id"
               >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
+                <thead
+                  class="MuiTableHead-root-id"
                 >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
-                    scope="col"
+                  <tr
+                    class="MuiTableRow-root-id MuiTableRow-head-id"
                   >
-                    <button
-                      class="MuiButtonBase-root-id makeStyles-root-id"
-                      tabindex="0"
-                      type="button"
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
+                      scope="col"
                     >
-                      <input
-                        class="makeStyles-box-id"
-                        type="checkbox"
-                        value="false"
-                      />
-                    </button>
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
-                    scope="col"
-                  >
-                    <span
-                      class="makeStyles-colNameLabel-id"
-                    >
-                      Product Name
-                    </span>
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colType-id"
-                    scope="col"
-                  >
-                    Product Type
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPublished-id"
-                    scope="col"
-                  >
-                    Published
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id"
-                    scope="col"
-                  />
-                </tr>
-              </thead>
-              <tfoot
-                class="MuiTableFooter-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-footer-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
-                    colspan="5"
-                  >
-                    <div
-                      class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
-                    >
-                      <div
-                        class="makeStyles-spacer-id"
-                      />
-                      <div
-                        class="makeStyles-root-id"
+                      <button
+                        class="MuiButtonBase-root-id makeStyles-root-id"
+                        tabindex="0"
+                        type="button"
                       >
-                        <button
-                          class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                          data-tc="button-pagination-back"
-                          disabled=""
-                          tabindex="-1"
-                          type="button"
+                        <input
+                          class="makeStyles-box-id"
+                          type="checkbox"
+                          value="false"
+                        />
+                      </button>
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                      scope="col"
+                    >
+                      <span
+                        class="makeStyles-colNameLabel-id"
+                      >
+                        Product Name
+                      </span>
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colType-id"
+                      scope="col"
+                    >
+                      Product Type
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPublished-id"
+                      scope="col"
+                    >
+                      Published
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id"
+                      scope="col"
+                    />
+                  </tr>
+                </thead>
+                <tfoot
+                  class="MuiTableFooter-root-id"
+                >
+                  <tr
+                    class="MuiTableRow-root-id MuiTableRow-footer-id"
+                  >
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                      colspan="5"
+                    >
+                      <div
+                        class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+                      >
+                        <div
+                          class="makeStyles-spacer-id"
+                        />
+                        <div
+                          class="makeStyles-root-id"
                         >
-                          <span
-                            class="MuiIconButton-label-id"
+                          <button
+                            class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                            data-tc="button-pagination-back"
+                            disabled=""
+                            tabindex="-1"
+                            type="button"
                           >
-                            <svg
-                              aria-hidden="true"
-                              class="MuiSvgIcon-root-id"
-                              focusable="false"
-                              role="presentation"
-                              viewBox="0 0 24 24"
+                            <span
+                              class="MuiIconButton-label-id"
                             >
-                              <path
-                                d="M14 7l-5 5 5 5V7z"
-                              />
-                              <path
-                                d="M24 0v24H0V0h24z"
-                                fill="none"
-                              />
-                            </svg>
-                          </span>
-                        </button>
-                        <button
-                          class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
-                          data-tc="button-pagination-next"
-                          tabindex="0"
-                          type="button"
-                        >
-                          <span
-                            class="MuiIconButton-label-id"
+                              <svg
+                                aria-hidden="true"
+                                class="MuiSvgIcon-root-id"
+                                focusable="false"
+                                role="presentation"
+                                viewBox="0 0 24 24"
+                              >
+                                <path
+                                  d="M14 7l-5 5 5 5V7z"
+                                />
+                                <path
+                                  d="M24 0v24H0V0h24z"
+                                  fill="none"
+                                />
+                              </svg>
+                            </span>
+                          </button>
+                          <button
+                            class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                            data-tc="button-pagination-next"
+                            tabindex="0"
+                            type="button"
                           >
-                            <svg
-                              aria-hidden="true"
-                              class="MuiSvgIcon-root-id"
-                              focusable="false"
-                              role="presentation"
-                              viewBox="0 0 24 24"
+                            <span
+                              class="MuiIconButton-label-id"
                             >
-                              <path
-                                d="M10 17l5-5-5-5v10z"
-                              />
-                              <path
-                                d="M0 24V0h24v24H0z"
-                                fill="none"
-                              />
-                            </svg>
-                          </span>
-                        </button>
+                              <svg
+                                aria-hidden="true"
+                                class="MuiSvgIcon-root-id"
+                                focusable="false"
+                                role="presentation"
+                                viewBox="0 0 24 24"
+                              >
+                                <path
+                                  d="M10 17l5-5-5-5v10z"
+                                />
+                                <path
+                                  d="M0 24V0h24v24H0z"
+                                  fill="none"
+                                />
+                              </svg>
+                            </span>
+                          </button>
+                        </div>
                       </div>
-                    </div>
-                  </td>
-                </tr>
-              </tfoot>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+                    </td>
+                  </tr>
+                </tfoot>
+                <tbody
+                  class="MuiTableBody-root-id"
                 >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+                  <tr
+                    class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
                   >
-                    <button
-                      class="MuiButtonBase-root-id makeStyles-root-id"
-                      tabindex="0"
-                      type="button"
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                     >
-                      <input
-                        class="makeStyles-box-id"
-                        type="checkbox"
-                        value="false"
-                      />
-                    </button>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
-                  >
-                    <div
-                      class="makeStyles-content-id"
-                    >
-                      <div
-                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      <button
+                        class="MuiButtonBase-root-id makeStyles-root-id"
+                        tabindex="0"
+                        type="button"
                       >
-                        <img
-                          class="MuiAvatar-img-id"
-                          src="placeholder60x60.png"
+                        <input
+                          class="makeStyles-box-id"
+                          type="checkbox"
+                          value="false"
                         />
-                      </div>
+                      </button>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                    >
                       <div
-                        class="makeStyles-children-id"
+                        class="makeStyles-content-id"
                       >
-                        Orange Juice
-                      </div>
-                    </div>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
-                  >
-                    Juice
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
-                  >
-                    <div
-                      class="makeStyles-root-id undefined makeStyles-successDot-id"
-                    >
-                      Published
-                    </div>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colActions-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
-                          focusable="false"
-                          role="presentation"
-                          viewBox="0 0 24 24"
+                        <div
+                          class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
                         >
-                          <path
-                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                          <img
+                            class="MuiAvatar-img-id"
+                            src="placeholder60x60.png"
                           />
-                        </svg>
-                      </span>
-                    </button>
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id makeStyles-root-id"
-                      tabindex="0"
-                      type="button"
+                        </div>
+                        <div
+                          class="makeStyles-children-id"
+                        >
+                          Orange Juice
+                        </div>
+                      </div>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
                     >
-                      <input
-                        class="makeStyles-box-id"
-                        type="checkbox"
-                        value="false"
-                      />
-                    </button>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
-                  >
-                    <div
-                      class="makeStyles-content-id"
+                      Juice
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
                     >
                       <div
-                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                        class="makeStyles-root-id undefined makeStyles-successDot-id"
                       >
-                        <img
-                          class="MuiAvatar-img-id"
-                          src="placeholder60x60.png"
+                        Published
+                      </div>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colActions-id"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id MuiIconButton-root-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiIconButton-label-id"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </td>
+                  </tr>
+                  <tr
+                    class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+                  >
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id makeStyles-root-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <input
+                          class="makeStyles-box-id"
+                          type="checkbox"
+                          value="false"
                         />
-                      </div>
+                      </button>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                    >
                       <div
-                        class="makeStyles-children-id"
+                        class="makeStyles-content-id"
                       >
-                        Carrot Juice
-                      </div>
-                    </div>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
-                  >
-                    Juice
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
-                  >
-                    <div
-                      class="makeStyles-root-id undefined makeStyles-successDot-id"
-                    >
-                      Published
-                    </div>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colActions-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
-                          focusable="false"
-                          role="presentation"
-                          viewBox="0 0 24 24"
+                        <div
+                          class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
                         >
-                          <path
-                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                          <img
+                            class="MuiAvatar-img-id"
+                            src="placeholder60x60.png"
                           />
-                        </svg>
-                      </span>
-                    </button>
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id makeStyles-root-id"
-                      tabindex="0"
-                      type="button"
+                        </div>
+                        <div
+                          class="makeStyles-children-id"
+                        >
+                          Carrot Juice
+                        </div>
+                      </div>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
                     >
-                      <input
-                        class="makeStyles-box-id"
-                        type="checkbox"
-                        value="false"
-                      />
-                    </button>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
-                  >
-                    <div
-                      class="makeStyles-content-id"
+                      Juice
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
                     >
                       <div
-                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                        class="makeStyles-root-id undefined makeStyles-successDot-id"
                       >
-                        <img
-                          class="MuiAvatar-img-id"
-                          src="placeholder60x60.png"
+                        Published
+                      </div>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colActions-id"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id MuiIconButton-root-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiIconButton-label-id"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </td>
+                  </tr>
+                  <tr
+                    class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+                  >
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id makeStyles-root-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <input
+                          class="makeStyles-box-id"
+                          type="checkbox"
+                          value="false"
                         />
-                      </div>
+                      </button>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                    >
                       <div
-                        class="makeStyles-children-id"
+                        class="makeStyles-content-id"
                       >
-                        Bean Juice
-                      </div>
-                    </div>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
-                  >
-                    Juice
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
-                  >
-                    <div
-                      class="makeStyles-root-id undefined makeStyles-successDot-id"
-                    >
-                      Published
-                    </div>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colActions-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
-                          focusable="false"
-                          role="presentation"
-                          viewBox="0 0 24 24"
+                        <div
+                          class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
                         >
-                          <path
-                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                          <img
+                            class="MuiAvatar-img-id"
+                            src="placeholder60x60.png"
                           />
-                        </svg>
-                      </span>
-                    </button>
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id makeStyles-root-id"
-                      tabindex="0"
-                      type="button"
+                        </div>
+                        <div
+                          class="makeStyles-children-id"
+                        >
+                          Bean Juice
+                        </div>
+                      </div>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
                     >
-                      <input
-                        class="makeStyles-box-id"
-                        type="checkbox"
-                        value="false"
-                      />
-                    </button>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
-                  >
-                    <div
-                      class="makeStyles-content-id"
+                      Juice
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
                     >
                       <div
-                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                        class="makeStyles-root-id undefined makeStyles-successDot-id"
                       >
-                        <img
-                          class="MuiAvatar-img-id"
-                          src="placeholder60x60.png"
+                        Published
+                      </div>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colActions-id"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id MuiIconButton-root-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiIconButton-label-id"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </td>
+                  </tr>
+                  <tr
+                    class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+                  >
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id makeStyles-root-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <input
+                          class="makeStyles-box-id"
+                          type="checkbox"
+                          value="false"
                         />
-                      </div>
+                      </button>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                    >
                       <div
-                        class="makeStyles-children-id"
+                        class="makeStyles-content-id"
                       >
-                        Black Hoodie
-                      </div>
-                    </div>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
-                  >
-                    Top (clothing)
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
-                  >
-                    <div
-                      class="makeStyles-root-id undefined makeStyles-successDot-id"
-                    >
-                      Published
-                    </div>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colActions-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
-                          focusable="false"
-                          role="presentation"
-                          viewBox="0 0 24 24"
+                        <div
+                          class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
                         >
-                          <path
-                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                          <img
+                            class="MuiAvatar-img-id"
+                            src="placeholder60x60.png"
                           />
-                        </svg>
-                      </span>
-                    </button>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
+                        </div>
+                        <div
+                          class="makeStyles-children-id"
+                        >
+                          Black Hoodie
+                        </div>
+                      </div>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
+                    >
+                      Top (clothing)
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
+                    >
+                      <div
+                        class="makeStyles-root-id undefined makeStyles-successDot-id"
+                      >
+                        Published
+                      </div>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colActions-id"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id MuiIconButton-root-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiIconButton-label-id"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
           </div>
           <div
             class="makeStyles-spacer-id"
@@ -43376,10 +43572,10 @@ exports[`Storyshots Views / Discounts / Sale list default 1`] = `
   style="padding:24px"
 >
   <div
-    class="makeStyles-root-id"
+    class="Container-root-id"
   >
     <div
-      class="makeStyles-root-id"
+      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
         class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -43387,7 +43583,7 @@ exports[`Storyshots Views / Discounts / Sale list default 1`] = `
         Sales
       </div>
       <div
-        class="makeStyles-action-id"
+        class="ExtendedPageHeader-action-id"
       >
         <div
           class="makeStyles-root-id"
@@ -43483,400 +43679,404 @@ exports[`Storyshots Views / Discounts / Sale list default 1`] = `
       <hr
         class="makeStyles-root-id"
       />
-      <table
-        class="MuiTable-root-id"
+      <div
+        class="ResponsiveTable-root-id"
       >
-        <thead
-          class="MuiTableHead-root-id"
+        <table
+          class="MuiTable-root-id"
         >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-head-id"
+          <thead
+            class="MuiTableHead-root-id"
           >
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
-              scope="col"
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-head-id"
             >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
+                scope="col"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
-              scope="col"
-            >
-              Name
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colStart-id"
-              scope="col"
-            >
-              Starts
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colEnd-id"
-              scope="col"
-            >
-              Ends
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colValue-id"
-              scope="col"
-            >
-              Value
-            </th>
-          </tr>
-        </thead>
-        <tfoot
-          class="MuiTableFooter-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-footer-id"
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                scope="col"
+              >
+                Name
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colStart-id"
+                scope="col"
+              >
+                Starts
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colEnd-id"
+                scope="col"
+              >
+                Ends
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colValue-id"
+                scope="col"
+              >
+                Value
+              </th>
+            </tr>
+          </thead>
+          <tfoot
+            class="MuiTableFooter-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
-              colspan="5"
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-footer-id"
             >
-              <div
-                class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                colspan="5"
               >
                 <div
-                  class="makeStyles-spacer-id"
+                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
                 >
-                  <div>
-                    <span
-                      class="RowNumberSelect-label-id"
-                    >
-                      No of Rows:
-                    </span>
-                    <div
-                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
-                    >
+                  <div
+                    class="makeStyles-spacer-id"
+                  >
+                    <div>
+                      <span
+                        class="RowNumberSelect-label-id"
+                      >
+                        No of Rows:
+                      </span>
                       <div
-                        aria-haspopup="listbox"
-                        aria-labelledby=" "
-                        class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-id"
-                        role="button"
-                        tabindex="0"
+                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                       >
-                        20
-                      </div>
-                      <input
-                        type="hidden"
-                        value="20"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MuiSelect-icon-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M7 10l5 5 5-5z"
+                        <div
+                          aria-haspopup="listbox"
+                          aria-labelledby=" "
+                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-id"
+                          role="button"
+                          tabindex="0"
+                        >
+                          20
+                        </div>
+                        <input
+                          type="hidden"
+                          value="20"
                         />
-                      </svg>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M7 10l5 5 5-5z"
+                          />
+                        </svg>
+                      </div>
                     </div>
                   </div>
+                  <div
+                    class="makeStyles-root-id"
+                  >
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      data-tc="button-pagination-back"
+                      disabled=""
+                      tabindex="-1"
+                      type="button"
+                    >
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M14 7l-5 5 5 5V7z"
+                          />
+                          <path
+                            d="M24 0v24H0V0h24z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                      data-tc="button-pagination-next"
+                      tabindex="0"
+                      type="button"
+                    >
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M10 17l5-5-5-5v10z"
+                          />
+                          <path
+                            d="M0 24V0h24v24H0z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </div>
                 </div>
-                <div
-                  class="makeStyles-root-id"
+              </td>
+            </tr>
+          </tfoot>
+          <tbody
+            class="MuiTableBody-root-id"
+          >
+            <tr
+              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
                 >
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                    data-tc="button-pagination-back"
-                    disabled=""
-                    tabindex="-1"
-                    type="button"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M14 7l-5 5 5 5V7z"
-                        />
-                        <path
-                          d="M24 0v24H0V0h24z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
-                    data-tc="button-pagination-next"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M10 17l5-5-5-5v10z"
-                        />
-                        <path
-                          d="M0 24V0h24v24H0z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                </div>
-              </div>
-            </td>
-          </tr>
-        </tfoot>
-        <tbody
-          class="MuiTableBody-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
-            >
-              Happy front day!
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colStart-id"
-            >
-              <time
-                class=""
-                datetime="2019-01-03"
-                title="Jan 3, 2019"
+                Happy front day!
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colStart-id"
               >
-                in 5 months
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEnd-id"
-            >
-              -
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colValue-id"
-            >
-              40%
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+                <time
+                  class=""
+                  datetime="2019-01-03"
+                  title="Jan 3, 2019"
+                >
+                  in 5 months
+                </time>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEnd-id"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
-            >
-              Happy minute day!
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colStart-id"
-            >
-              <time
-                class=""
-                datetime="2019-01-03"
-                title="Jan 3, 2019"
+                -
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colValue-id"
               >
-                in 5 months
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEnd-id"
+                40%
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
             >
-              -
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colValue-id"
-            >
-              $30.00
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
-            >
-              Happy class day!
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colStart-id"
-            >
-              <time
-                class=""
-                datetime="2019-01-03"
-                title="Jan 3, 2019"
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
               >
-                in 5 months
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEnd-id"
-            >
-              -
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colValue-id"
-            >
-              10%
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+                Happy minute day!
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colStart-id"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
-            >
-              Happy human day!
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colStart-id"
-            >
-              <time
-                class=""
-                datetime="2019-01-03"
-                title="Jan 3, 2019"
+                <time
+                  class=""
+                  datetime="2019-01-03"
+                  title="Jan 3, 2019"
+                >
+                  in 5 months
+                </time>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEnd-id"
               >
-                in 5 months
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEnd-id"
-            >
-              -
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colValue-id"
-            >
-              20%
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+                -
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colValue-id"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                $30.00
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
             >
-              Happy year day!
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colStart-id"
-            >
-              <time
-                class=""
-                datetime="2019-01-03"
-                title="Jan 3, 2019"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
-                in 5 months
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEnd-id"
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+              >
+                Happy class day!
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colStart-id"
+              >
+                <time
+                  class=""
+                  datetime="2019-01-03"
+                  title="Jan 3, 2019"
+                >
+                  in 5 months
+                </time>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEnd-id"
+              >
+                -
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colValue-id"
+              >
+                10%
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
             >
-              -
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colValue-id"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+              >
+                Happy human day!
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colStart-id"
+              >
+                <time
+                  class=""
+                  datetime="2019-01-03"
+                  title="Jan 3, 2019"
+                >
+                  in 5 months
+                </time>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEnd-id"
+              >
+                -
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colValue-id"
+              >
+                20%
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
             >
-              10%
-            </td>
-          </tr>
-        </tbody>
-      </table>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+              >
+                Happy year day!
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colStart-id"
+              >
+                <time
+                  class=""
+                  datetime="2019-01-03"
+                  title="Jan 3, 2019"
+                >
+                  in 5 months
+                </time>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEnd-id"
+              >
+                -
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colValue-id"
+              >
+                10%
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
     </div>
   </div>
 </div>
@@ -43887,10 +44087,10 @@ exports[`Storyshots Views / Discounts / Sale list loading 1`] = `
   style="padding:24px"
 >
   <div
-    class="makeStyles-root-id"
+    class="Container-root-id"
   >
     <div
-      class="makeStyles-root-id"
+      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
         class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -43898,7 +44098,7 @@ exports[`Storyshots Views / Discounts / Sale list loading 1`] = `
         Sales
       </div>
       <div
-        class="makeStyles-action-id"
+        class="ExtendedPageHeader-action-id"
       >
         <div
           class="makeStyles-root-id"
@@ -43994,230 +44194,234 @@ exports[`Storyshots Views / Discounts / Sale list loading 1`] = `
       <hr
         class="makeStyles-root-id"
       />
-      <table
-        class="MuiTable-root-id"
+      <div
+        class="ResponsiveTable-root-id"
       >
-        <thead
-          class="MuiTableHead-root-id"
+        <table
+          class="MuiTable-root-id"
         >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-head-id"
+          <thead
+            class="MuiTableHead-root-id"
           >
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
-              scope="col"
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-head-id"
             >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
+                scope="col"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
-              scope="col"
-            >
-              Name
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colStart-id"
-              scope="col"
-            >
-              Starts
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colEnd-id"
-              scope="col"
-            >
-              Ends
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colValue-id"
-              scope="col"
-            >
-              Value
-            </th>
-          </tr>
-        </thead>
-        <tfoot
-          class="MuiTableFooter-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-footer-id"
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                scope="col"
+              >
+                Name
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colStart-id"
+                scope="col"
+              >
+                Starts
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colEnd-id"
+                scope="col"
+              >
+                Ends
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colValue-id"
+                scope="col"
+              >
+                Value
+              </th>
+            </tr>
+          </thead>
+          <tfoot
+            class="MuiTableFooter-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
-              colspan="5"
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-footer-id"
             >
-              <div
-                class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                colspan="5"
               >
                 <div
-                  class="makeStyles-spacer-id"
+                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
                 >
-                  <div>
-                    <span
-                      class="RowNumberSelect-label-id"
-                    >
-                      No of Rows:
-                    </span>
-                    <div
-                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
-                    >
+                  <div
+                    class="makeStyles-spacer-id"
+                  >
+                    <div>
+                      <span
+                        class="RowNumberSelect-label-id"
+                      >
+                        No of Rows:
+                      </span>
                       <div
-                        aria-haspopup="listbox"
-                        aria-labelledby=" "
-                        class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-id"
-                        role="button"
-                        tabindex="0"
+                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                       >
-                        20
-                      </div>
-                      <input
-                        type="hidden"
-                        value="20"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MuiSelect-icon-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M7 10l5 5 5-5z"
+                        <div
+                          aria-haspopup="listbox"
+                          aria-labelledby=" "
+                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-id"
+                          role="button"
+                          tabindex="0"
+                        >
+                          20
+                        </div>
+                        <input
+                          type="hidden"
+                          value="20"
                         />
-                      </svg>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M7 10l5 5 5-5z"
+                          />
+                        </svg>
+                      </div>
                     </div>
                   </div>
-                </div>
-                <div
-                  class="makeStyles-root-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                    data-tc="button-pagination-back"
-                    disabled=""
-                    tabindex="-1"
-                    type="button"
+                  <div
+                    class="makeStyles-root-id"
                   >
-                    <span
-                      class="MuiIconButton-label-id"
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      data-tc="button-pagination-back"
+                      disabled=""
+                      tabindex="-1"
+                      type="button"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
+                      <span
+                        class="MuiIconButton-label-id"
                       >
-                        <path
-                          d="M14 7l-5 5 5 5V7z"
-                        />
-                        <path
-                          d="M24 0v24H0V0h24z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
-                    data-tc="button-pagination-next"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M14 7l-5 5 5 5V7z"
+                          />
+                          <path
+                            d="M24 0v24H0V0h24z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                      data-tc="button-pagination-next"
+                      tabindex="0"
+                      type="button"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
+                      <span
+                        class="MuiIconButton-label-id"
                       >
-                        <path
-                          d="M10 17l5-5-5-5v10z"
-                        />
-                        <path
-                          d="M0 24V0h24v24H0z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M10 17l5-5-5-5v10z"
+                          />
+                          <path
+                            d="M0 24V0h24v24H0z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </div>
                 </div>
-              </div>
-            </td>
-          </tr>
-        </tfoot>
-        <tbody
-          class="MuiTableBody-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id"
+              </td>
+            </tr>
+          </tfoot>
+          <tbody
+            class="MuiTableBody-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+            <tr
+              class="MuiTableRow-root-id"
             >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
-            >
-              <span
-                class="makeStyles-skeleton-id"
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
               >
-                ‌
-              </span>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colStart-id"
-            >
-              <span
-                class="makeStyles-skeleton-id"
+                <span
+                  class="makeStyles-skeleton-id"
+                >
+                  ‌
+                </span>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colStart-id"
               >
-                ‌
-              </span>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEnd-id"
-            >
-              <span
-                class="makeStyles-skeleton-id"
+                <span
+                  class="makeStyles-skeleton-id"
+                >
+                  ‌
+                </span>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEnd-id"
               >
-                ‌
-              </span>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colValue-id"
-            >
-              <span
-                class="makeStyles-skeleton-id"
+                <span
+                  class="makeStyles-skeleton-id"
+                >
+                  ‌
+                </span>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colValue-id"
               >
-                ‌
-              </span>
-            </td>
-          </tr>
-        </tbody>
-      </table>
+                <span
+                  class="makeStyles-skeleton-id"
+                >
+                  ‌
+                </span>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
     </div>
   </div>
 </div>
@@ -44228,10 +44432,10 @@ exports[`Storyshots Views / Discounts / Sale list no data 1`] = `
   style="padding:24px"
 >
   <div
-    class="makeStyles-root-id"
+    class="Container-root-id"
   >
     <div
-      class="makeStyles-root-id"
+      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
         class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -44239,7 +44443,7 @@ exports[`Storyshots Views / Discounts / Sale list no data 1`] = `
         Sales
       </div>
       <div
-        class="makeStyles-action-id"
+        class="ExtendedPageHeader-action-id"
       >
         <div
           class="makeStyles-root-id"
@@ -44335,169 +44539,173 @@ exports[`Storyshots Views / Discounts / Sale list no data 1`] = `
       <hr
         class="makeStyles-root-id"
       />
-      <table
-        class="MuiTable-root-id"
+      <div
+        class="ResponsiveTable-root-id"
       >
-        <thead
-          class="MuiTableHead-root-id"
+        <table
+          class="MuiTable-root-id"
         >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-head-id"
+          <thead
+            class="MuiTableHead-root-id"
           >
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
-              scope="col"
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-head-id"
             >
-              Name
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colStart-id"
-              scope="col"
-            >
-              Starts
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colEnd-id"
-              scope="col"
-            >
-              Ends
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colValue-id"
-              scope="col"
-            >
-              Value
-            </th>
-          </tr>
-        </thead>
-        <tfoot
-          class="MuiTableFooter-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-footer-id"
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                scope="col"
+              >
+                Name
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colStart-id"
+                scope="col"
+              >
+                Starts
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colEnd-id"
+                scope="col"
+              >
+                Ends
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colValue-id"
+                scope="col"
+              >
+                Value
+              </th>
+            </tr>
+          </thead>
+          <tfoot
+            class="MuiTableFooter-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
-              colspan="5"
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-footer-id"
             >
-              <div
-                class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                colspan="5"
               >
                 <div
-                  class="makeStyles-spacer-id"
+                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
                 >
-                  <div>
-                    <span
-                      class="RowNumberSelect-label-id"
-                    >
-                      No of Rows:
-                    </span>
-                    <div
-                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
-                    >
+                  <div
+                    class="makeStyles-spacer-id"
+                  >
+                    <div>
+                      <span
+                        class="RowNumberSelect-label-id"
+                      >
+                        No of Rows:
+                      </span>
                       <div
-                        aria-haspopup="listbox"
-                        aria-labelledby=" "
-                        class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-id"
-                        role="button"
-                        tabindex="0"
+                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                       >
-                        20
-                      </div>
-                      <input
-                        type="hidden"
-                        value="20"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MuiSelect-icon-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M7 10l5 5 5-5z"
+                        <div
+                          aria-haspopup="listbox"
+                          aria-labelledby=" "
+                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-id"
+                          role="button"
+                          tabindex="0"
+                        >
+                          20
+                        </div>
+                        <input
+                          type="hidden"
+                          value="20"
                         />
-                      </svg>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M7 10l5 5 5-5z"
+                          />
+                        </svg>
+                      </div>
                     </div>
                   </div>
-                </div>
-                <div
-                  class="makeStyles-root-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                    data-tc="button-pagination-back"
-                    disabled=""
-                    tabindex="-1"
-                    type="button"
+                  <div
+                    class="makeStyles-root-id"
                   >
-                    <span
-                      class="MuiIconButton-label-id"
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      data-tc="button-pagination-back"
+                      disabled=""
+                      tabindex="-1"
+                      type="button"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
+                      <span
+                        class="MuiIconButton-label-id"
                       >
-                        <path
-                          d="M14 7l-5 5 5 5V7z"
-                        />
-                        <path
-                          d="M24 0v24H0V0h24z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
-                    data-tc="button-pagination-next"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M14 7l-5 5 5 5V7z"
+                          />
+                          <path
+                            d="M24 0v24H0V0h24z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                      data-tc="button-pagination-next"
+                      tabindex="0"
+                      type="button"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
+                      <span
+                        class="MuiIconButton-label-id"
                       >
-                        <path
-                          d="M10 17l5-5-5-5v10z"
-                        />
-                        <path
-                          d="M0 24V0h24v24H0z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M10 17l5-5-5-5v10z"
+                          />
+                          <path
+                            d="M0 24V0h24v24H0z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </div>
                 </div>
-              </div>
-            </td>
-          </tr>
-        </tfoot>
-        <tbody
-          class="MuiTableBody-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id"
+              </td>
+            </tr>
+          </tfoot>
+          <tbody
+            class="MuiTableBody-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-              colspan="5"
+            <tr
+              class="MuiTableRow-root-id"
             >
-              No sales found
-            </td>
-          </tr>
-        </tbody>
-      </table>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id"
+                colspan="5"
+              >
+                No sales found
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
     </div>
   </div>
 </div>
@@ -44509,10 +44717,10 @@ exports[`Storyshots Views / Discounts / Voucher create default 1`] = `
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -44520,7 +44728,7 @@ exports[`Storyshots Views / Discounts / Voucher create default 1`] = `
           Create Voucher
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -45302,10 +45510,10 @@ exports[`Storyshots Views / Discounts / Voucher create form errors 1`] = `
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -45313,7 +45521,7 @@ exports[`Storyshots Views / Discounts / Voucher create form errors 1`] = `
           Create Voucher
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -46115,10 +46323,10 @@ exports[`Storyshots Views / Discounts / Voucher details default 1`] = `
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -46126,7 +46334,7 @@ exports[`Storyshots Views / Discounts / Voucher details default 1`] = `
           DISCOUNT
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -47191,10 +47399,10 @@ exports[`Storyshots Views / Discounts / Voucher details form errors 1`] = `
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -47202,7 +47410,7 @@ exports[`Storyshots Views / Discounts / Voucher details form errors 1`] = `
           DISCOUNT
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -48302,10 +48510,10 @@ exports[`Storyshots Views / Discounts / Voucher details loading 1`] = `
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -48318,7 +48526,7 @@ exports[`Storyshots Views / Discounts / Voucher details loading 1`] = `
           </span>
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -49393,10 +49601,10 @@ exports[`Storyshots Views / Discounts / Voucher list default 1`] = `
   style="padding:24px"
 >
   <div
-    class="makeStyles-root-id"
+    class="Container-root-id"
   >
     <div
-      class="makeStyles-root-id"
+      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
         class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -49404,7 +49612,7 @@ exports[`Storyshots Views / Discounts / Voucher list default 1`] = `
         Vouchers
       </div>
       <div
-        class="makeStyles-action-id"
+        class="ExtendedPageHeader-action-id"
       >
         <div
           class="makeStyles-root-id"
@@ -49500,297 +49708,301 @@ exports[`Storyshots Views / Discounts / Voucher list default 1`] = `
       <hr
         class="makeStyles-root-id"
       />
-      <table
-        class="MuiTable-root-id"
+      <div
+        class="ResponsiveTable-root-id"
       >
-        <thead
-          class="MuiTableHead-root-id"
+        <table
+          class="MuiTable-root-id"
         >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-head-id"
+          <thead
+            class="MuiTableHead-root-id"
           >
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
-              scope="col"
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-head-id"
             >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
+                scope="col"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
-              scope="col"
-            >
-              Code
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colMinSpent-id"
-              scope="col"
-            >
-              Min. Spent
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colStart-id"
-              scope="col"
-            >
-              Starts
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colEnd-id"
-              scope="col"
-            >
-              Ends
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colValue-id"
-              scope="col"
-            >
-              Value
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colUses-id"
-              scope="col"
-            >
-              Uses
-            </th>
-          </tr>
-        </thead>
-        <tfoot
-          class="MuiTableFooter-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-footer-id"
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                scope="col"
+              >
+                Code
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colMinSpent-id"
+                scope="col"
+              >
+                Min. Spent
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colStart-id"
+                scope="col"
+              >
+                Starts
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colEnd-id"
+                scope="col"
+              >
+                Ends
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colValue-id"
+                scope="col"
+              >
+                Value
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colUses-id"
+                scope="col"
+              >
+                Uses
+              </th>
+            </tr>
+          </thead>
+          <tfoot
+            class="MuiTableFooter-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
-              colspan="7"
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-footer-id"
             >
-              <div
-                class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                colspan="7"
               >
                 <div
-                  class="makeStyles-spacer-id"
+                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
                 >
-                  <div>
-                    <span
-                      class="RowNumberSelect-label-id"
-                    >
-                      No of Rows:
-                    </span>
-                    <div
-                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
-                    >
+                  <div
+                    class="makeStyles-spacer-id"
+                  >
+                    <div>
+                      <span
+                        class="RowNumberSelect-label-id"
+                      >
+                        No of Rows:
+                      </span>
                       <div
-                        aria-haspopup="listbox"
-                        aria-labelledby=" "
-                        class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-id"
-                        role="button"
-                        tabindex="0"
+                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                       >
-                        20
-                      </div>
-                      <input
-                        type="hidden"
-                        value="20"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MuiSelect-icon-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M7 10l5 5 5-5z"
+                        <div
+                          aria-haspopup="listbox"
+                          aria-labelledby=" "
+                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-id"
+                          role="button"
+                          tabindex="0"
+                        >
+                          20
+                        </div>
+                        <input
+                          type="hidden"
+                          value="20"
                         />
-                      </svg>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M7 10l5 5 5-5z"
+                          />
+                        </svg>
+                      </div>
                     </div>
                   </div>
+                  <div
+                    class="makeStyles-root-id"
+                  >
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      data-tc="button-pagination-back"
+                      disabled=""
+                      tabindex="-1"
+                      type="button"
+                    >
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M14 7l-5 5 5 5V7z"
+                          />
+                          <path
+                            d="M24 0v24H0V0h24z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                      data-tc="button-pagination-next"
+                      tabindex="0"
+                      type="button"
+                    >
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M10 17l5-5-5-5v10z"
+                          />
+                          <path
+                            d="M0 24V0h24v24H0z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </div>
                 </div>
-                <div
-                  class="makeStyles-root-id"
+              </td>
+            </tr>
+          </tfoot>
+          <tbody
+            class="MuiTableBody-root-id"
+          >
+            <tr
+              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
                 >
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                    data-tc="button-pagination-back"
-                    disabled=""
-                    tabindex="-1"
-                    type="button"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M14 7l-5 5 5 5V7z"
-                        />
-                        <path
-                          d="M24 0v24H0V0h24z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
-                    data-tc="button-pagination-next"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M10 17l5-5-5-5v10z"
-                        />
-                        <path
-                          d="M0 24V0h24v24H0z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                </div>
-              </div>
-            </td>
-          </tr>
-        </tfoot>
-        <tbody
-          class="MuiTableBody-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
-            >
-              FREE2019
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colMinSpent-id"
-            >
-              -
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colStart-id"
-            >
-              <time
-                class=""
-                datetime="2019-01-03"
-                title="Jan 3, 2019"
+                FREE2019
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colMinSpent-id"
               >
-                in 5 months
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEnd-id"
-            >
-              -
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colValue-id"
-            >
-              100%
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colUses-id"
-            >
-              -
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+                -
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colStart-id"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
-            >
-              FREE2020
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colMinSpent-id"
-            >
-              $200.00
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colStart-id"
-            >
-              <time
-                class=""
-                datetime="2019-01-03"
-                title="Jan 3, 2019"
+                <time
+                  class=""
+                  datetime="2019-01-03"
+                  title="Jan 3, 2019"
+                >
+                  in 5 months
+                </time>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEnd-id"
               >
-                in 5 months
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEnd-id"
+                -
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colValue-id"
+              >
+                100%
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colUses-id"
+              >
+                -
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
             >
-              -
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colValue-id"
-            >
-              $25.00
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colUses-id"
-            >
-              150
-            </td>
-          </tr>
-        </tbody>
-      </table>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+              >
+                FREE2020
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colMinSpent-id"
+              >
+                $200.00
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colStart-id"
+              >
+                <time
+                  class=""
+                  datetime="2019-01-03"
+                  title="Jan 3, 2019"
+                >
+                  in 5 months
+                </time>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEnd-id"
+              >
+                -
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colValue-id"
+              >
+                $25.00
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colUses-id"
+              >
+                150
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
     </div>
   </div>
 </div>
@@ -49801,10 +50013,10 @@ exports[`Storyshots Views / Discounts / Voucher list loading 1`] = `
   style="padding:24px"
 >
   <div
-    class="makeStyles-root-id"
+    class="Container-root-id"
   >
     <div
-      class="makeStyles-root-id"
+      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
         class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -49812,7 +50024,7 @@ exports[`Storyshots Views / Discounts / Voucher list loading 1`] = `
         Vouchers
       </div>
       <div
-        class="makeStyles-action-id"
+        class="ExtendedPageHeader-action-id"
       >
         <div
           class="makeStyles-root-id"
@@ -49908,260 +50120,264 @@ exports[`Storyshots Views / Discounts / Voucher list loading 1`] = `
       <hr
         class="makeStyles-root-id"
       />
-      <table
-        class="MuiTable-root-id"
+      <div
+        class="ResponsiveTable-root-id"
       >
-        <thead
-          class="MuiTableHead-root-id"
+        <table
+          class="MuiTable-root-id"
         >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-head-id"
+          <thead
+            class="MuiTableHead-root-id"
           >
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
-              scope="col"
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-head-id"
             >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
+                scope="col"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
-              scope="col"
-            >
-              Code
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colMinSpent-id"
-              scope="col"
-            >
-              Min. Spent
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colStart-id"
-              scope="col"
-            >
-              Starts
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colEnd-id"
-              scope="col"
-            >
-              Ends
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colValue-id"
-              scope="col"
-            >
-              Value
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colUses-id"
-              scope="col"
-            >
-              Uses
-            </th>
-          </tr>
-        </thead>
-        <tfoot
-          class="MuiTableFooter-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-footer-id"
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                scope="col"
+              >
+                Code
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colMinSpent-id"
+                scope="col"
+              >
+                Min. Spent
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colStart-id"
+                scope="col"
+              >
+                Starts
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colEnd-id"
+                scope="col"
+              >
+                Ends
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colValue-id"
+                scope="col"
+              >
+                Value
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colUses-id"
+                scope="col"
+              >
+                Uses
+              </th>
+            </tr>
+          </thead>
+          <tfoot
+            class="MuiTableFooter-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
-              colspan="7"
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-footer-id"
             >
-              <div
-                class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                colspan="7"
               >
                 <div
-                  class="makeStyles-spacer-id"
+                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
                 >
-                  <div>
-                    <span
-                      class="RowNumberSelect-label-id"
-                    >
-                      No of Rows:
-                    </span>
-                    <div
-                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
-                    >
+                  <div
+                    class="makeStyles-spacer-id"
+                  >
+                    <div>
+                      <span
+                        class="RowNumberSelect-label-id"
+                      >
+                        No of Rows:
+                      </span>
                       <div
-                        aria-haspopup="listbox"
-                        aria-labelledby=" "
-                        class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-id"
-                        role="button"
-                        tabindex="0"
+                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                       >
-                        20
-                      </div>
-                      <input
-                        type="hidden"
-                        value="20"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MuiSelect-icon-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M7 10l5 5 5-5z"
+                        <div
+                          aria-haspopup="listbox"
+                          aria-labelledby=" "
+                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-id"
+                          role="button"
+                          tabindex="0"
+                        >
+                          20
+                        </div>
+                        <input
+                          type="hidden"
+                          value="20"
                         />
-                      </svg>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M7 10l5 5 5-5z"
+                          />
+                        </svg>
+                      </div>
                     </div>
                   </div>
-                </div>
-                <div
-                  class="makeStyles-root-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                    data-tc="button-pagination-back"
-                    disabled=""
-                    tabindex="-1"
-                    type="button"
+                  <div
+                    class="makeStyles-root-id"
                   >
-                    <span
-                      class="MuiIconButton-label-id"
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      data-tc="button-pagination-back"
+                      disabled=""
+                      tabindex="-1"
+                      type="button"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
+                      <span
+                        class="MuiIconButton-label-id"
                       >
-                        <path
-                          d="M14 7l-5 5 5 5V7z"
-                        />
-                        <path
-                          d="M24 0v24H0V0h24z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
-                    data-tc="button-pagination-next"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M14 7l-5 5 5 5V7z"
+                          />
+                          <path
+                            d="M24 0v24H0V0h24z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                      data-tc="button-pagination-next"
+                      tabindex="0"
+                      type="button"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
+                      <span
+                        class="MuiIconButton-label-id"
                       >
-                        <path
-                          d="M10 17l5-5-5-5v10z"
-                        />
-                        <path
-                          d="M0 24V0h24v24H0z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M10 17l5-5-5-5v10z"
+                          />
+                          <path
+                            d="M0 24V0h24v24H0z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </div>
                 </div>
-              </div>
-            </td>
-          </tr>
-        </tfoot>
-        <tbody
-          class="MuiTableBody-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id"
+              </td>
+            </tr>
+          </tfoot>
+          <tbody
+            class="MuiTableBody-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+            <tr
+              class="MuiTableRow-root-id"
             >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
-            >
-              <span
-                class="makeStyles-skeleton-id"
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
               >
-                ‌
-              </span>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colMinSpent-id"
-            >
-              <span
-                class="makeStyles-skeleton-id"
+                <span
+                  class="makeStyles-skeleton-id"
+                >
+                  ‌
+                </span>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colMinSpent-id"
               >
-                ‌
-              </span>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colStart-id"
-            >
-              <span
-                class="makeStyles-skeleton-id"
+                <span
+                  class="makeStyles-skeleton-id"
+                >
+                  ‌
+                </span>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colStart-id"
               >
-                ‌
-              </span>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEnd-id"
-            >
-              <span
-                class="makeStyles-skeleton-id"
+                <span
+                  class="makeStyles-skeleton-id"
+                >
+                  ‌
+                </span>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEnd-id"
               >
-                ‌
-              </span>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colValue-id"
-            >
-              <span
-                class="makeStyles-skeleton-id"
+                <span
+                  class="makeStyles-skeleton-id"
+                >
+                  ‌
+                </span>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colValue-id"
               >
-                ‌
-              </span>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colUses-id"
-            >
-              <span
-                class="makeStyles-skeleton-id"
+                <span
+                  class="makeStyles-skeleton-id"
+                >
+                  ‌
+                </span>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colUses-id"
               >
-                ‌
-              </span>
-            </td>
-          </tr>
-        </tbody>
-      </table>
+                <span
+                  class="makeStyles-skeleton-id"
+                >
+                  ‌
+                </span>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
     </div>
   </div>
 </div>
@@ -50172,10 +50388,10 @@ exports[`Storyshots Views / Discounts / Voucher list no data 1`] = `
   style="padding:24px"
 >
   <div
-    class="makeStyles-root-id"
+    class="Container-root-id"
   >
     <div
-      class="makeStyles-root-id"
+      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
         class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -50183,7 +50399,7 @@ exports[`Storyshots Views / Discounts / Voucher list no data 1`] = `
         Vouchers
       </div>
       <div
-        class="makeStyles-action-id"
+        class="ExtendedPageHeader-action-id"
       >
         <div
           class="makeStyles-root-id"
@@ -50279,181 +50495,185 @@ exports[`Storyshots Views / Discounts / Voucher list no data 1`] = `
       <hr
         class="makeStyles-root-id"
       />
-      <table
-        class="MuiTable-root-id"
+      <div
+        class="ResponsiveTable-root-id"
       >
-        <thead
-          class="MuiTableHead-root-id"
+        <table
+          class="MuiTable-root-id"
         >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-head-id"
+          <thead
+            class="MuiTableHead-root-id"
           >
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
-              scope="col"
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-head-id"
             >
-              Code
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colMinSpent-id"
-              scope="col"
-            >
-              Min. Spent
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colStart-id"
-              scope="col"
-            >
-              Starts
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colEnd-id"
-              scope="col"
-            >
-              Ends
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colValue-id"
-              scope="col"
-            >
-              Value
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colUses-id"
-              scope="col"
-            >
-              Uses
-            </th>
-          </tr>
-        </thead>
-        <tfoot
-          class="MuiTableFooter-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-footer-id"
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                scope="col"
+              >
+                Code
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colMinSpent-id"
+                scope="col"
+              >
+                Min. Spent
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colStart-id"
+                scope="col"
+              >
+                Starts
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colEnd-id"
+                scope="col"
+              >
+                Ends
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colValue-id"
+                scope="col"
+              >
+                Value
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colUses-id"
+                scope="col"
+              >
+                Uses
+              </th>
+            </tr>
+          </thead>
+          <tfoot
+            class="MuiTableFooter-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
-              colspan="7"
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-footer-id"
             >
-              <div
-                class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                colspan="7"
               >
                 <div
-                  class="makeStyles-spacer-id"
+                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
                 >
-                  <div>
-                    <span
-                      class="RowNumberSelect-label-id"
-                    >
-                      No of Rows:
-                    </span>
-                    <div
-                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
-                    >
+                  <div
+                    class="makeStyles-spacer-id"
+                  >
+                    <div>
+                      <span
+                        class="RowNumberSelect-label-id"
+                      >
+                        No of Rows:
+                      </span>
                       <div
-                        aria-haspopup="listbox"
-                        aria-labelledby=" "
-                        class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-id"
-                        role="button"
-                        tabindex="0"
+                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                       >
-                        20
-                      </div>
-                      <input
-                        type="hidden"
-                        value="20"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MuiSelect-icon-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M7 10l5 5 5-5z"
+                        <div
+                          aria-haspopup="listbox"
+                          aria-labelledby=" "
+                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-id"
+                          role="button"
+                          tabindex="0"
+                        >
+                          20
+                        </div>
+                        <input
+                          type="hidden"
+                          value="20"
                         />
-                      </svg>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M7 10l5 5 5-5z"
+                          />
+                        </svg>
+                      </div>
                     </div>
                   </div>
-                </div>
-                <div
-                  class="makeStyles-root-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                    data-tc="button-pagination-back"
-                    disabled=""
-                    tabindex="-1"
-                    type="button"
+                  <div
+                    class="makeStyles-root-id"
                   >
-                    <span
-                      class="MuiIconButton-label-id"
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      data-tc="button-pagination-back"
+                      disabled=""
+                      tabindex="-1"
+                      type="button"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
+                      <span
+                        class="MuiIconButton-label-id"
                       >
-                        <path
-                          d="M14 7l-5 5 5 5V7z"
-                        />
-                        <path
-                          d="M24 0v24H0V0h24z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
-                    data-tc="button-pagination-next"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M14 7l-5 5 5 5V7z"
+                          />
+                          <path
+                            d="M24 0v24H0V0h24z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                      data-tc="button-pagination-next"
+                      tabindex="0"
+                      type="button"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
+                      <span
+                        class="MuiIconButton-label-id"
                       >
-                        <path
-                          d="M10 17l5-5-5-5v10z"
-                        />
-                        <path
-                          d="M0 24V0h24v24H0z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M10 17l5-5-5-5v10z"
+                          />
+                          <path
+                            d="M0 24V0h24v24H0z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </div>
                 </div>
-              </div>
-            </td>
-          </tr>
-        </tfoot>
-        <tbody
-          class="MuiTableBody-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id"
+              </td>
+            </tr>
+          </tfoot>
+          <tbody
+            class="MuiTableBody-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-              colspan="7"
+            <tr
+              class="MuiTableRow-root-id"
             >
-              No vouchers found
-            </td>
-          </tr>
-        </tbody>
-      </table>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id"
+                colspan="7"
+              >
+                No vouchers found
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
     </div>
   </div>
 </div>
@@ -50523,7 +50743,7 @@ exports[`Storyshots Views / HomePage default 1`] = `
   style="padding:24px"
 >
   <div
-    class="makeStyles-root-id"
+    class="Container-root-id"
   >
     <div
       class="makeStyles-headerContainer-id"
@@ -50640,101 +50860,105 @@ exports[`Storyshots Views / HomePage default 1`] = `
         <div
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
-          <table
-            class="MuiTable-root-id"
+          <div
+            class="ResponsiveTable-root-id"
           >
-            <tbody
-              class="MuiTableBody-root-id makeStyles-tableRow-id"
+            <table
+              class="MuiTable-root-id"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-hover-id"
+              <tbody
+                class="MuiTableBody-root-id makeStyles-tableRow-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
                   >
-                    <strong>
-                      1
-                    </strong>
-                     Orders are ready to fulfill
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-arrowIcon-id"
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      <strong>
+                        1
+                      </strong>
+                       Orders are ready to fulfill
+                    </div>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-arrowIcon-id"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
+                      />
+                    </svg>
+                  </td>
+                </tr>
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                 >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    role="presentation"
-                    viewBox="0 0 24 24"
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
                   >
-                    <path
-                      d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
-                    />
-                  </svg>
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-hover-id"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      No payments waiting for capture
+                    </div>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-arrowIcon-id"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
+                      />
+                    </svg>
+                  </td>
+                </tr>
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
                   >
-                    No payments waiting for capture
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-arrowIcon-id"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    role="presentation"
-                    viewBox="0 0 24 24"
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      No products out of stock
+                    </div>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-arrowIcon-id"
                   >
-                    <path
-                      d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
-                    />
-                  </svg>
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-hover-id"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    No products out of stock
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-arrowIcon-id"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    role="presentation"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
-                    />
-                  </svg>
-                </td>
-              </tr>
-            </tbody>
-          </table>
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
+                      />
+                    </svg>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
         </div>
         <div
           class="makeStyles-spacer-id"
@@ -50760,65 +50984,69 @@ exports[`Storyshots Views / HomePage default 1`] = `
           <hr
             class="makeStyles-hr-id"
           />
-          <table
-            class="MuiTable-root-id"
+          <div
+            class="ResponsiveTable-root-id"
           >
-            <tbody
-              class="MuiTableBody-root-id"
+            <table
+              class="MuiTable-root-id"
             >
-              <tr
-                class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+              <tbody
+                class="MuiTableBody-root-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-avatarSpacing-id"
+                <tr
+                  class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
                 >
-                  <div
-                    class="makeStyles-content-id"
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-avatarSpacing-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id makeStyles-avatarProps-id"
+                      class="makeStyles-content-id"
                     >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder60x60.png"
+                      <div
+                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id makeStyles-avatarProps-id"
+                      >
+                        <img
+                          class="MuiAvatar-img-id"
+                          src="placeholder60x60.png"
+                        />
+                      </div>
+                      <div
+                        class="makeStyles-children-id"
                       />
                     </div>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-label-id"
+                  >
                     <div
-                      class="makeStyles-children-id"
-                    />
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-label-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
+                      class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
+                    >
+                      Gardner-Martin
+                    </div>
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+                    >
+                      XS
+                    </div>
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+                    >
+                      One ordered
+                    </div>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
                   >
-                    Gardner-Martin
-                  </div>
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-                  >
-                    XS
-                  </div>
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-                  >
-                    One ordered
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                  >
-                    $37.65
-                  </div>
-                </td>
-              </tr>
-            </tbody>
-          </table>
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
+                    >
+                      $37.65
+                    </div>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
         </div>
         <div
           class="makeStyles-spacer-id"
@@ -51174,7 +51402,7 @@ exports[`Storyshots Views / HomePage loading 1`] = `
   style="padding:24px"
 >
   <div
-    class="makeStyles-root-id"
+    class="Container-root-id"
   >
     <div
       class="makeStyles-headerContainer-id"
@@ -51311,98 +51539,102 @@ exports[`Storyshots Views / HomePage loading 1`] = `
         <div
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
-          <table
-            class="MuiTable-root-id"
+          <div
+            class="ResponsiveTable-root-id"
           >
-            <tbody
-              class="MuiTableBody-root-id makeStyles-tableRow-id"
+            <table
+              class="MuiTable-root-id"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-hover-id"
+              <tbody
+                class="MuiTableBody-root-id makeStyles-tableRow-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                 >
-                  <span
-                    class="makeStyles-skeleton-id"
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
                   >
-                    ‌
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-arrowIcon-id"
+                    <span
+                      class="makeStyles-skeleton-id"
+                    >
+                      ‌
+                    </span>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-arrowIcon-id"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
+                      />
+                    </svg>
+                  </td>
+                </tr>
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                 >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    role="presentation"
-                    viewBox="0 0 24 24"
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
                   >
-                    <path
-                      d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
-                    />
-                  </svg>
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-hover-id"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                    <span
+                      class="makeStyles-skeleton-id"
+                    >
+                      ‌
+                    </span>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-arrowIcon-id"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
+                      />
+                    </svg>
+                  </td>
+                </tr>
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                 >
-                  <span
-                    class="makeStyles-skeleton-id"
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
                   >
-                    ‌
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-arrowIcon-id"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    role="presentation"
-                    viewBox="0 0 24 24"
+                    <span
+                      class="makeStyles-skeleton-id"
+                    >
+                      ‌
+                    </span>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-arrowIcon-id"
                   >
-                    <path
-                      d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
-                    />
-                  </svg>
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-hover-id"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  <span
-                    class="makeStyles-skeleton-id"
-                  >
-                    ‌
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-arrowIcon-id"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    role="presentation"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
-                    />
-                  </svg>
-                </td>
-              </tr>
-            </tbody>
-          </table>
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
+                      />
+                    </svg>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
         </div>
         <div
           class="makeStyles-spacer-id"
@@ -51428,66 +51660,70 @@ exports[`Storyshots Views / HomePage loading 1`] = `
           <hr
             class="makeStyles-hr-id"
           />
-          <table
-            class="MuiTable-root-id"
+          <div
+            class="ResponsiveTable-root-id"
           >
-            <tbody
-              class="MuiTableBody-root-id"
+            <table
+              class="MuiTable-root-id"
             >
-              <tr
-                class="MuiTableRow-root-id"
+              <tbody
+                class="MuiTableBody-root-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-avatarSpacing-id"
+                <tr
+                  class="MuiTableRow-root-id"
                 >
-                  <div
-                    class="makeStyles-content-id"
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-avatarSpacing-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id makeStyles-avatarProps-id MuiAvatar-colorDefault-id"
+                      class="makeStyles-content-id"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
+                      <div
+                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id makeStyles-avatarProps-id MuiAvatar-colorDefault-id"
                       >
-                        <path
-                          d="M19 8l-4 4h3c0 3.31-2.69 6-6 6-1.01 0-1.97-.25-2.8-.7l-1.46 1.46C8.97 19.54 10.43 20 12 20c4.42 0 8-3.58 8-8h3l-4-4zM6 12c0-3.31 2.69-6 6-6 1.01 0 1.97.25 2.8.7l1.46-1.46C15.03 4.46 13.57 4 12 4c-4.42 0-8 3.58-8 8H1l4 4 4-4H6z"
-                        />
-                      </svg>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M19 8l-4 4h3c0 3.31-2.69 6-6 6-1.01 0-1.97-.25-2.8-.7l-1.46 1.46C8.97 19.54 10.43 20 12 20c4.42 0 8-3.58 8-8h3l-4-4zM6 12c0-3.31 2.69-6 6-6 1.01 0 1.97.25 2.8.7l1.46-1.46C15.03 4.46 13.57 4 12 4c-4.42 0-8 3.58-8 8H1l4 4 4-4H6z"
+                          />
+                        </svg>
+                      </div>
+                      <div
+                        class="makeStyles-children-id"
+                      />
                     </div>
-                    <div
-                      class="makeStyles-children-id"
-                    />
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-label-id"
-                >
-                  <span
-                    class="makeStyles-skeleton-id"
-                  >
-                    ‌
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-label-id"
                   >
                     <span
                       class="makeStyles-skeleton-id"
                     >
                       ‌
                     </span>
-                  </div>
-                </td>
-              </tr>
-            </tbody>
-          </table>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
+                    >
+                      <span
+                        class="makeStyles-skeleton-id"
+                      >
+                        ‌
+                      </span>
+                    </div>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
         </div>
         <div
           class="makeStyles-spacer-id"
@@ -51548,7 +51784,7 @@ exports[`Storyshots Views / HomePage no data 1`] = `
   style="padding:24px"
 >
   <div
-    class="makeStyles-root-id"
+    class="Container-root-id"
   >
     <div
       class="makeStyles-headerContainer-id"
@@ -51665,101 +51901,105 @@ exports[`Storyshots Views / HomePage no data 1`] = `
         <div
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
-          <table
-            class="MuiTable-root-id"
+          <div
+            class="ResponsiveTable-root-id"
           >
-            <tbody
-              class="MuiTableBody-root-id makeStyles-tableRow-id"
+            <table
+              class="MuiTable-root-id"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-hover-id"
+              <tbody
+                class="MuiTableBody-root-id makeStyles-tableRow-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
                   >
-                    <strong>
-                      1
-                    </strong>
-                     Orders are ready to fulfill
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-arrowIcon-id"
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      <strong>
+                        1
+                      </strong>
+                       Orders are ready to fulfill
+                    </div>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-arrowIcon-id"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
+                      />
+                    </svg>
+                  </td>
+                </tr>
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                 >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    role="presentation"
-                    viewBox="0 0 24 24"
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
                   >
-                    <path
-                      d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
-                    />
-                  </svg>
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-hover-id"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      No payments waiting for capture
+                    </div>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-arrowIcon-id"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
+                      />
+                    </svg>
+                  </td>
+                </tr>
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
                   >
-                    No payments waiting for capture
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-arrowIcon-id"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    role="presentation"
-                    viewBox="0 0 24 24"
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      No products out of stock
+                    </div>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-arrowIcon-id"
                   >
-                    <path
-                      d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
-                    />
-                  </svg>
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-hover-id"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    No products out of stock
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-arrowIcon-id"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    role="presentation"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
-                    />
-                  </svg>
-                </td>
-              </tr>
-            </tbody>
-          </table>
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
+                      />
+                    </svg>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
         </div>
         <div
           class="makeStyles-spacer-id"
@@ -51785,27 +52025,31 @@ exports[`Storyshots Views / HomePage no data 1`] = `
           <hr
             class="makeStyles-hr-id"
           />
-          <table
-            class="MuiTable-root-id"
+          <div
+            class="ResponsiveTable-root-id"
           >
-            <tbody
-              class="MuiTableBody-root-id"
+            <table
+              class="MuiTable-root-id"
             >
-              <tr
-                class="MuiTableRow-root-id"
+              <tbody
+                class="MuiTableBody-root-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-noProducts-id"
+                <tr
+                  class="MuiTableRow-root-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-noProducts-id"
                   >
-                    No products found
-                  </div>
-                </td>
-              </tr>
-            </tbody>
-          </table>
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      No products found
+                    </div>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
         </div>
         <div
           class="makeStyles-spacer-id"
@@ -51862,7 +52106,7 @@ exports[`Storyshots Views / HomePage no permissions 1`] = `
   style="padding:24px"
 >
   <div
-    class="makeStyles-root-id"
+    class="Container-root-id"
   >
     <div
       class="makeStyles-headerContainer-id"
@@ -51889,13 +52133,17 @@ exports[`Storyshots Views / HomePage no permissions 1`] = `
         <div
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
-          <table
-            class="MuiTable-root-id"
+          <div
+            class="ResponsiveTable-root-id"
           >
-            <tbody
-              class="MuiTableBody-root-id makeStyles-tableRow-id"
-            />
-          </table>
+            <table
+              class="MuiTable-root-id"
+            >
+              <tbody
+                class="MuiTableBody-root-id makeStyles-tableRow-id"
+              />
+            </table>
+          </div>
         </div>
         <div
           class="makeStyles-spacer-id"
@@ -51912,7 +52160,7 @@ exports[`Storyshots Views / HomePage order permissions 1`] = `
   style="padding:24px"
 >
   <div
-    class="makeStyles-root-id"
+    class="Container-root-id"
   >
     <div
       class="makeStyles-headerContainer-id"
@@ -52029,73 +52277,77 @@ exports[`Storyshots Views / HomePage order permissions 1`] = `
         <div
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
-          <table
-            class="MuiTable-root-id"
+          <div
+            class="ResponsiveTable-root-id"
           >
-            <tbody
-              class="MuiTableBody-root-id makeStyles-tableRow-id"
+            <table
+              class="MuiTable-root-id"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-hover-id"
+              <tbody
+                class="MuiTableBody-root-id makeStyles-tableRow-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
                   >
-                    <strong>
-                      1
-                    </strong>
-                     Orders are ready to fulfill
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-arrowIcon-id"
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      <strong>
+                        1
+                      </strong>
+                       Orders are ready to fulfill
+                    </div>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-arrowIcon-id"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
+                      />
+                    </svg>
+                  </td>
+                </tr>
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                 >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    role="presentation"
-                    viewBox="0 0 24 24"
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
                   >
-                    <path
-                      d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
-                    />
-                  </svg>
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-hover-id"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      No payments waiting for capture
+                    </div>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-arrowIcon-id"
                   >
-                    No payments waiting for capture
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-arrowIcon-id"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    role="presentation"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
-                    />
-                  </svg>
-                </td>
-              </tr>
-            </tbody>
-          </table>
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
+                      />
+                    </svg>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
         </div>
         <div
           class="makeStyles-spacer-id"
@@ -52451,7 +52703,7 @@ exports[`Storyshots Views / HomePage product permissions 1`] = `
   style="padding:24px"
 >
   <div
-    class="makeStyles-root-id"
+    class="Container-root-id"
   >
     <div
       class="makeStyles-headerContainer-id"
@@ -52478,42 +52730,46 @@ exports[`Storyshots Views / HomePage product permissions 1`] = `
         <div
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
-          <table
-            class="MuiTable-root-id"
+          <div
+            class="ResponsiveTable-root-id"
           >
-            <tbody
-              class="MuiTableBody-root-id makeStyles-tableRow-id"
+            <table
+              class="MuiTable-root-id"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-hover-id"
+              <tbody
+                class="MuiTableBody-root-id makeStyles-tableRow-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
                   >
-                    No products out of stock
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-arrowIcon-id"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    role="presentation"
-                    viewBox="0 0 24 24"
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      No products out of stock
+                    </div>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-arrowIcon-id"
                   >
-                    <path
-                      d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
-                    />
-                  </svg>
-                </td>
-              </tr>
-            </tbody>
-          </table>
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
+                      />
+                    </svg>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
         </div>
         <div
           class="makeStyles-spacer-id"
@@ -52531,7 +52787,7 @@ exports[`Storyshots Views / Navigation / Menu details default 1`] = `
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
         class="makeStyles-root-id makeStyles-inverted-id"
@@ -53288,7 +53544,7 @@ exports[`Storyshots Views / Navigation / Menu details loading 1`] = `
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
         class="makeStyles-root-id makeStyles-inverted-id"
@@ -53444,7 +53700,7 @@ exports[`Storyshots Views / Navigation / Menu details no data 1`] = `
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
         class="makeStyles-root-id makeStyles-inverted-id"
@@ -53608,10 +53864,10 @@ exports[`Storyshots Views / Navigation / Menu list default 1`] = `
   style="padding:24px"
 >
   <div
-    class="makeStyles-root-id"
+    class="Container-root-id"
   >
     <div
-      class="makeStyles-root-id"
+      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
         class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -53619,7 +53875,7 @@ exports[`Storyshots Views / Navigation / Menu list default 1`] = `
         Navigation
       </div>
       <div
-        class="makeStyles-action-id"
+        class="ExtendedPageHeader-action-id"
       >
         <div
           class="makeStyles-root-id"
@@ -53641,275 +53897,279 @@ exports[`Storyshots Views / Navigation / Menu list default 1`] = `
     <div
       class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
     >
-      <table
-        class="MuiTable-root-id"
+      <div
+        class="ResponsiveTable-root-id"
       >
-        <thead
-          class="MuiTableHead-root-id"
+        <table
+          class="MuiTable-root-id"
         >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-head-id"
+          <thead
+            class="MuiTableHead-root-id"
           >
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
-              scope="col"
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-head-id"
             >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
+                scope="col"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTitle-id"
-              scope="col"
-            >
-              Menu Title
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colItems-id"
-              scope="col"
-            >
-              Items
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id"
-              scope="col"
-            />
-          </tr>
-        </thead>
-        <tfoot
-          class="MuiTableFooter-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-footer-id"
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTitle-id"
+                scope="col"
+              >
+                Menu Title
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colItems-id"
+                scope="col"
+              >
+                Items
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id"
+                scope="col"
+              />
+            </tr>
+          </thead>
+          <tfoot
+            class="MuiTableFooter-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
-              colspan="4"
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-footer-id"
             >
-              <div
-                class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                colspan="4"
               >
                 <div
-                  class="makeStyles-spacer-id"
+                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
                 >
-                  <div>
-                    <span
-                      class="RowNumberSelect-label-id"
-                    >
-                      No of Rows:
-                    </span>
-                    <div
-                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
-                    >
+                  <div
+                    class="makeStyles-spacer-id"
+                  >
+                    <div>
+                      <span
+                        class="RowNumberSelect-label-id"
+                      >
+                        No of Rows:
+                      </span>
                       <div
-                        aria-haspopup="listbox"
-                        aria-labelledby=" "
-                        class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-id"
-                        role="button"
-                        tabindex="0"
+                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                       >
-                        20
-                      </div>
-                      <input
-                        type="hidden"
-                        value="20"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MuiSelect-icon-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M7 10l5 5 5-5z"
+                        <div
+                          aria-haspopup="listbox"
+                          aria-labelledby=" "
+                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-id"
+                          role="button"
+                          tabindex="0"
+                        >
+                          20
+                        </div>
+                        <input
+                          type="hidden"
+                          value="20"
                         />
-                      </svg>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M7 10l5 5 5-5z"
+                          />
+                        </svg>
+                      </div>
                     </div>
                   </div>
-                </div>
-                <div
-                  class="makeStyles-root-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                    data-tc="button-pagination-back"
-                    disabled=""
-                    tabindex="-1"
-                    type="button"
+                  <div
+                    class="makeStyles-root-id"
                   >
-                    <span
-                      class="MuiIconButton-label-id"
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      data-tc="button-pagination-back"
+                      disabled=""
+                      tabindex="-1"
+                      type="button"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
+                      <span
+                        class="MuiIconButton-label-id"
                       >
-                        <path
-                          d="M14 7l-5 5 5 5V7z"
-                        />
-                        <path
-                          d="M24 0v24H0V0h24z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
-                    data-tc="button-pagination-next"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M14 7l-5 5 5 5V7z"
+                          />
+                          <path
+                            d="M24 0v24H0V0h24z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                      data-tc="button-pagination-next"
+                      tabindex="0"
+                      type="button"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
+                      <span
+                        class="MuiIconButton-label-id"
                       >
-                        <path
-                          d="M10 17l5-5-5-5v10z"
-                        />
-                        <path
-                          d="M0 24V0h24v24H0z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M10 17l5-5-5-5v10z"
+                          />
+                          <path
+                            d="M0 24V0h24v24H0z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </div>
                 </div>
-              </div>
-            </td>
-          </tr>
-        </tfoot>
-        <tbody
-          class="MuiTableBody-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id makeStyles-row-id MuiTableRow-hover-id"
+              </td>
+            </tr>
+          </tfoot>
+          <tbody
+            class="MuiTableBody-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+            <tr
+              class="MuiTableRow-root-id makeStyles-row-id MuiTableRow-hover-id"
             >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTitle-id"
-            >
-              navbar
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colItems-id"
-            >
-              3
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiIconButton-label-id"
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
                 >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    role="presentation"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                    />
-                  </svg>
-                </span>
-              </button>
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-row-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTitle-id"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTitle-id"
-            >
-              footer
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colItems-id"
-            >
-              2
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
-                tabindex="0"
-                type="button"
+                navbar
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colItems-id"
               >
-                <span
-                  class="MuiIconButton-label-id"
+                3
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
+                  tabindex="0"
+                  type="button"
                 >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    role="presentation"
-                    viewBox="0 0 24 24"
+                  <span
+                    class="MuiIconButton-label-id"
                   >
-                    <path
-                      d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                    />
-                  </svg>
-                </span>
-              </button>
-            </td>
-          </tr>
-        </tbody>
-      </table>
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                      />
+                    </svg>
+                  </span>
+                </button>
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-row-id MuiTableRow-hover-id"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTitle-id"
+              >
+                footer
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colItems-id"
+              >
+                2
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <span
+                    class="MuiIconButton-label-id"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                      />
+                    </svg>
+                  </span>
+                </button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
     </div>
   </div>
 </div>
@@ -53920,10 +54180,10 @@ exports[`Storyshots Views / Navigation / Menu list loading 1`] = `
   style="padding:24px"
 >
   <div
-    class="makeStyles-root-id"
+    class="Container-root-id"
   >
     <div
-      class="makeStyles-root-id"
+      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
         class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -53931,7 +54191,7 @@ exports[`Storyshots Views / Navigation / Menu list loading 1`] = `
         Navigation
       </div>
       <div
-        class="makeStyles-action-id"
+        class="ExtendedPageHeader-action-id"
       >
         <div
           class="makeStyles-root-id"
@@ -53954,235 +54214,239 @@ exports[`Storyshots Views / Navigation / Menu list loading 1`] = `
     <div
       class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
     >
-      <table
-        class="MuiTable-root-id"
+      <div
+        class="ResponsiveTable-root-id"
       >
-        <thead
-          class="MuiTableHead-root-id"
+        <table
+          class="MuiTable-root-id"
         >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-head-id"
+          <thead
+            class="MuiTableHead-root-id"
           >
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
-              scope="col"
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-head-id"
             >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
-                disabled=""
-                tabindex="-1"
-                type="button"
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
+                scope="col"
               >
-                <input
-                  class="makeStyles-box-id makeStyles-disabled-id"
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
                   disabled=""
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTitle-id"
-              scope="col"
-            >
-              Menu Title
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colItems-id"
-              scope="col"
-            >
-              Items
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id"
-              scope="col"
-            />
-          </tr>
-        </thead>
-        <tfoot
-          class="MuiTableFooter-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-footer-id"
+                  tabindex="-1"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id makeStyles-disabled-id"
+                    disabled=""
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTitle-id"
+                scope="col"
+              >
+                Menu Title
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colItems-id"
+                scope="col"
+              >
+                Items
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id"
+                scope="col"
+              />
+            </tr>
+          </thead>
+          <tfoot
+            class="MuiTableFooter-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
-              colspan="4"
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-footer-id"
             >
-              <div
-                class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                colspan="4"
               >
                 <div
-                  class="makeStyles-spacer-id"
+                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
                 >
-                  <div>
-                    <span
-                      class="RowNumberSelect-label-id"
-                    >
-                      No of Rows:
-                    </span>
-                    <div
-                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
-                    >
+                  <div
+                    class="makeStyles-spacer-id"
+                  >
+                    <div>
+                      <span
+                        class="RowNumberSelect-label-id"
+                      >
+                        No of Rows:
+                      </span>
                       <div
-                        aria-haspopup="listbox"
-                        aria-labelledby=" "
-                        class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-id"
-                        role="button"
-                        tabindex="0"
+                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                       >
-                        20
-                      </div>
-                      <input
-                        type="hidden"
-                        value="20"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MuiSelect-icon-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M7 10l5 5 5-5z"
+                        <div
+                          aria-haspopup="listbox"
+                          aria-labelledby=" "
+                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-id"
+                          role="button"
+                          tabindex="0"
+                        >
+                          20
+                        </div>
+                        <input
+                          type="hidden"
+                          value="20"
                         />
-                      </svg>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M7 10l5 5 5-5z"
+                          />
+                        </svg>
+                      </div>
                     </div>
                   </div>
-                </div>
-                <div
-                  class="makeStyles-root-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                    data-tc="button-pagination-back"
-                    disabled=""
-                    tabindex="-1"
-                    type="button"
+                  <div
+                    class="makeStyles-root-id"
                   >
-                    <span
-                      class="MuiIconButton-label-id"
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      data-tc="button-pagination-back"
+                      disabled=""
+                      tabindex="-1"
+                      type="button"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
+                      <span
+                        class="MuiIconButton-label-id"
                       >
-                        <path
-                          d="M14 7l-5 5 5 5V7z"
-                        />
-                        <path
-                          d="M24 0v24H0V0h24z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                    data-tc="button-pagination-next"
-                    disabled=""
-                    tabindex="-1"
-                    type="button"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M14 7l-5 5 5 5V7z"
+                          />
+                          <path
+                            d="M24 0v24H0V0h24z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      data-tc="button-pagination-next"
+                      disabled=""
+                      tabindex="-1"
+                      type="button"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
+                      <span
+                        class="MuiIconButton-label-id"
                       >
-                        <path
-                          d="M10 17l5-5-5-5v10z"
-                        />
-                        <path
-                          d="M0 24V0h24v24H0z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M10 17l5-5-5-5v10z"
+                          />
+                          <path
+                            d="M0 24V0h24v24H0z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </div>
                 </div>
-              </div>
-            </td>
-          </tr>
-        </tfoot>
-        <tbody
-          class="MuiTableBody-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id makeStyles-row-id"
+              </td>
+            </tr>
+          </tfoot>
+          <tbody
+            class="MuiTableBody-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+            <tr
+              class="MuiTableRow-root-id makeStyles-row-id"
             >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
-                disabled=""
-                tabindex="-1"
-                type="button"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
-                <input
-                  class="makeStyles-box-id makeStyles-disabled-id"
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
                   disabled=""
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTitle-id"
-            >
-              <span
-                class="makeStyles-skeleton-id"
-              >
-                ‌
-              </span>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colItems-id"
-            >
-              <span
-                class="makeStyles-skeleton-id"
-              >
-                ‌
-              </span>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                disabled=""
-                tabindex="-1"
-                type="button"
+                  tabindex="-1"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id makeStyles-disabled-id"
+                    disabled=""
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTitle-id"
               >
                 <span
-                  class="MuiIconButton-label-id"
+                  class="makeStyles-skeleton-id"
                 >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    role="presentation"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                    />
-                  </svg>
+                  ‌
                 </span>
-              </button>
-            </td>
-          </tr>
-        </tbody>
-      </table>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colItems-id"
+              >
+                <span
+                  class="makeStyles-skeleton-id"
+                >
+                  ‌
+                </span>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                  disabled=""
+                  tabindex="-1"
+                  type="button"
+                >
+                  <span
+                    class="MuiIconButton-label-id"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                      />
+                    </svg>
+                  </span>
+                </button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
     </div>
   </div>
 </div>
@@ -54193,10 +54457,10 @@ exports[`Storyshots Views / Navigation / Menu list no data 1`] = `
   style="padding:24px"
 >
   <div
-    class="makeStyles-root-id"
+    class="Container-root-id"
   >
     <div
-      class="makeStyles-root-id"
+      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
         class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -54204,7 +54468,7 @@ exports[`Storyshots Views / Navigation / Menu list no data 1`] = `
         Navigation
       </div>
       <div
-        class="makeStyles-action-id"
+        class="ExtendedPageHeader-action-id"
       >
         <div
           class="makeStyles-root-id"
@@ -54226,161 +54490,165 @@ exports[`Storyshots Views / Navigation / Menu list no data 1`] = `
     <div
       class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
     >
-      <table
-        class="MuiTable-root-id"
+      <div
+        class="ResponsiveTable-root-id"
       >
-        <thead
-          class="MuiTableHead-root-id"
+        <table
+          class="MuiTable-root-id"
         >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-head-id"
+          <thead
+            class="MuiTableHead-root-id"
           >
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTitle-id"
-              scope="col"
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-head-id"
             >
-              Menu Title
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colItems-id"
-              scope="col"
-            >
-              Items
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id"
-              scope="col"
-            />
-          </tr>
-        </thead>
-        <tfoot
-          class="MuiTableFooter-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-footer-id"
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTitle-id"
+                scope="col"
+              >
+                Menu Title
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colItems-id"
+                scope="col"
+              >
+                Items
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id"
+                scope="col"
+              />
+            </tr>
+          </thead>
+          <tfoot
+            class="MuiTableFooter-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
-              colspan="4"
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-footer-id"
             >
-              <div
-                class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                colspan="4"
               >
                 <div
-                  class="makeStyles-spacer-id"
+                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
                 >
-                  <div>
-                    <span
-                      class="RowNumberSelect-label-id"
-                    >
-                      No of Rows:
-                    </span>
-                    <div
-                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
-                    >
+                  <div
+                    class="makeStyles-spacer-id"
+                  >
+                    <div>
+                      <span
+                        class="RowNumberSelect-label-id"
+                      >
+                        No of Rows:
+                      </span>
                       <div
-                        aria-haspopup="listbox"
-                        aria-labelledby=" "
-                        class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-id"
-                        role="button"
-                        tabindex="0"
+                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                       >
-                        20
-                      </div>
-                      <input
-                        type="hidden"
-                        value="20"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MuiSelect-icon-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M7 10l5 5 5-5z"
+                        <div
+                          aria-haspopup="listbox"
+                          aria-labelledby=" "
+                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-id"
+                          role="button"
+                          tabindex="0"
+                        >
+                          20
+                        </div>
+                        <input
+                          type="hidden"
+                          value="20"
                         />
-                      </svg>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M7 10l5 5 5-5z"
+                          />
+                        </svg>
+                      </div>
                     </div>
                   </div>
-                </div>
-                <div
-                  class="makeStyles-root-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                    data-tc="button-pagination-back"
-                    disabled=""
-                    tabindex="-1"
-                    type="button"
+                  <div
+                    class="makeStyles-root-id"
                   >
-                    <span
-                      class="MuiIconButton-label-id"
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      data-tc="button-pagination-back"
+                      disabled=""
+                      tabindex="-1"
+                      type="button"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
+                      <span
+                        class="MuiIconButton-label-id"
                       >
-                        <path
-                          d="M14 7l-5 5 5 5V7z"
-                        />
-                        <path
-                          d="M24 0v24H0V0h24z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
-                    data-tc="button-pagination-next"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M14 7l-5 5 5 5V7z"
+                          />
+                          <path
+                            d="M24 0v24H0V0h24z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                      data-tc="button-pagination-next"
+                      tabindex="0"
+                      type="button"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
+                      <span
+                        class="MuiIconButton-label-id"
                       >
-                        <path
-                          d="M10 17l5-5-5-5v10z"
-                        />
-                        <path
-                          d="M0 24V0h24v24H0z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M10 17l5-5-5-5v10z"
+                          />
+                          <path
+                            d="M0 24V0h24v24H0z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </div>
                 </div>
-              </div>
-            </td>
-          </tr>
-        </tfoot>
-        <tbody
-          class="MuiTableBody-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id"
+              </td>
+            </tr>
+          </tfoot>
+          <tbody
+            class="MuiTableBody-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-              colspan="4"
+            <tr
+              class="MuiTableRow-root-id"
             >
-              No menus found
-            </td>
-          </tr>
-        </tbody>
-      </table>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id"
+                colspan="4"
+              >
+                No menus found
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
     </div>
   </div>
 </div>
@@ -54445,10 +54713,10 @@ exports[`Storyshots Views / Orders / Draft order list default 1`] = `
   style="padding:24px"
 >
   <div
-    class="makeStyles-root-id"
+    class="Container-root-id"
   >
     <div
-      class="makeStyles-root-id"
+      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
         class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -54456,7 +54724,7 @@ exports[`Storyshots Views / Orders / Draft order list default 1`] = `
         Draft Orders
       </div>
       <div
-        class="makeStyles-action-id"
+        class="ExtendedPageHeader-action-id"
       >
         <div
           class="makeStyles-root-id"
@@ -54552,1075 +54820,1079 @@ exports[`Storyshots Views / Orders / Draft order list default 1`] = `
       <hr
         class="makeStyles-root-id"
       />
-      <table
-        class="MuiTable-root-id"
+      <div
+        class="ResponsiveTable-root-id"
       >
-        <thead
-          class="MuiTableHead-root-id"
+        <table
+          class="MuiTable-root-id"
         >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-head-id"
+          <thead
+            class="MuiTableHead-root-id"
           >
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
-              scope="col"
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-head-id"
             >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
+                scope="col"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colNumber-id"
-              scope="col"
-            >
-              No. of Order
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colDate-id"
-              scope="col"
-            >
-              Date
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colCustomer-id"
-              scope="col"
-            >
-              Customer
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
-              scope="col"
-            >
-              Total
-            </th>
-          </tr>
-        </thead>
-        <tfoot
-          class="MuiTableFooter-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-footer-id"
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colNumber-id"
+                scope="col"
+              >
+                No. of Order
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colDate-id"
+                scope="col"
+              >
+                Date
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colCustomer-id"
+                scope="col"
+              >
+                Customer
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
+                scope="col"
+              >
+                Total
+              </th>
+            </tr>
+          </thead>
+          <tfoot
+            class="MuiTableFooter-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
-              colspan="5"
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-footer-id"
             >
-              <div
-                class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                colspan="5"
               >
                 <div
-                  class="makeStyles-spacer-id"
+                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
                 >
-                  <div>
-                    <span
-                      class="RowNumberSelect-label-id"
-                    >
-                      No of Rows:
-                    </span>
-                    <div
-                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
-                    >
+                  <div
+                    class="makeStyles-spacer-id"
+                  >
+                    <div>
+                      <span
+                        class="RowNumberSelect-label-id"
+                      >
+                        No of Rows:
+                      </span>
                       <div
-                        aria-haspopup="listbox"
-                        aria-labelledby=" "
-                        class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-id"
-                        role="button"
-                        tabindex="0"
+                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                       >
-                        20
-                      </div>
-                      <input
-                        type="hidden"
-                        value="20"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MuiSelect-icon-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M7 10l5 5 5-5z"
+                        <div
+                          aria-haspopup="listbox"
+                          aria-labelledby=" "
+                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-id"
+                          role="button"
+                          tabindex="0"
+                        >
+                          20
+                        </div>
+                        <input
+                          type="hidden"
+                          value="20"
                         />
-                      </svg>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M7 10l5 5 5-5z"
+                          />
+                        </svg>
+                      </div>
                     </div>
                   </div>
+                  <div
+                    class="makeStyles-root-id"
+                  >
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      data-tc="button-pagination-back"
+                      disabled=""
+                      tabindex="-1"
+                      type="button"
+                    >
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M14 7l-5 5 5 5V7z"
+                          />
+                          <path
+                            d="M24 0v24H0V0h24z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                      data-tc="button-pagination-next"
+                      tabindex="0"
+                      type="button"
+                    >
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M10 17l5-5-5-5v10z"
+                          />
+                          <path
+                            d="M0 24V0h24v24H0z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </div>
                 </div>
-                <div
-                  class="makeStyles-root-id"
+              </td>
+            </tr>
+          </tfoot>
+          <tbody
+            class="MuiTableBody-root-id"
+          >
+            <tr
+              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
                 >
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                    data-tc="button-pagination-back"
-                    disabled=""
-                    tabindex="-1"
-                    type="button"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M14 7l-5 5 5 5V7z"
-                        />
-                        <path
-                          d="M24 0v24H0V0h24z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
-                    data-tc="button-pagination-next"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M10 17l5-5-5-5v10z"
-                        />
-                        <path
-                          d="M0 24V0h24v24H0z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                </div>
-              </div>
-            </td>
-          </tr>
-        </tfoot>
-        <tbody
-          class="MuiTableBody-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
-            >
-              #20
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
-            >
-              <time
-                class=""
-                datetime="1536658650376"
-                title="Sep 11, 2018 5:37 AM"
+                #20
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
               >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
-            >
-              Laura Stone 1 2
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-            >
-              $305.17
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+                <time
+                  class=""
+                  datetime="1536658650376"
+                  title="Sep 11, 2018 5:37 AM"
+                >
+                  in a month
+                </time>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
-            >
-              #19
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
-            >
-              <time
-                class=""
-                datetime="1536658650124"
-                title="Sep 11, 2018 5:37 AM"
+                Laura Stone 1 2
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
               >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+                $305.17
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
             >
-              Elizabeth Vaughn
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-            >
-              $1,215.89
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
-            >
-              #18
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
-            >
-              <time
-                class=""
-                datetime="1536658650019"
-                title="Sep 11, 2018 5:37 AM"
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
               >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
-            >
-              david.lawson@example.com
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-            >
-              $321.71
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+                #19
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
-            >
-              #17
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
-            >
-              <time
-                class=""
-                datetime="1536658649864"
-                title="Sep 11, 2018 5:37 AM"
+                <time
+                  class=""
+                  datetime="1536658650124"
+                  title="Sep 11, 2018 5:37 AM"
+                >
+                  in a month
+                </time>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
               >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
-            >
-              Aaron Randall
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-            >
-              $271.95
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+                Elizabeth Vaughn
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+                $1,215.89
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
             >
-              #16
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
-            >
-              <time
-                class=""
-                datetime="1536658649610"
-                title="Sep 11, 2018 5:37 AM"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
-            >
-              Laura Jensen
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-            >
-              $335.84
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
-            >
-              #15
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
-            >
-              <time
-                class=""
-                datetime="1536658649336"
-                title="Sep 11, 2018 5:37 AM"
+                #18
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
               >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
-            >
-              Jenna Villa
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-            >
-              $1,042.15
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+                <time
+                  class=""
+                  datetime="1536658650019"
+                  title="Sep 11, 2018 5:37 AM"
+                >
+                  in a month
+                </time>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
-            >
-              #14
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
-            >
-              <time
-                class=""
-                datetime="1536658649103"
-                title="Sep 11, 2018 5:37 AM"
+                david.lawson@example.com
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
               >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+                $321.71
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
             >
-              Wesley Davis
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-            >
-              $213.69
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
-            >
-              #13
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
-            >
-              <time
-                class=""
-                datetime="1536658648921"
-                title="Sep 11, 2018 5:37 AM"
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
               >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
-            >
-              Anthony Gonzalez
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-            >
-              $367.03
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+                #17
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
-            >
-              #12
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
-            >
-              <time
-                class=""
-                datetime="1536658648750"
-                title="Sep 11, 2018 5:37 AM"
+                <time
+                  class=""
+                  datetime="1536658649864"
+                  title="Sep 11, 2018 5:37 AM"
+                >
+                  in a month
+                </time>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
               >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
-            >
-              Denise Freeman
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-            >
-              $298.76
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+                Aaron Randall
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+                $271.95
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
             >
-              #11
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
-            >
-              <time
-                class=""
-                datetime="1536658648598"
-                title="Sep 11, 2018 5:37 AM"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
-            >
-              James Ball
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-            >
-              $663.69
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
-            >
-              #10
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
-            >
-              <time
-                class=""
-                datetime="1536658648409"
-                title="Sep 11, 2018 5:37 AM"
+                #16
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
               >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
-            >
-              Michael Martinez
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-            >
-              $280.41
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+                <time
+                  class=""
+                  datetime="1536658649610"
+                  title="Sep 11, 2018 5:37 AM"
+                >
+                  in a month
+                </time>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
-            >
-              #9
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
-            >
-              <time
-                class=""
-                datetime="1536658648185"
-                title="Sep 11, 2018 5:37 AM"
+                Laura Jensen
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
               >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+                $335.84
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
             >
-              Melissa Simon
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-            >
-              $234.93
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
-            >
-              #8
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
-            >
-              <time
-                class=""
-                datetime="1536658647953"
-                title="Sep 11, 2018 5:37 AM"
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
               >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
-            >
-              Justin Mccoy
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-            >
-              $485.19
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+                #15
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
-            >
-              #7
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
-            >
-              <time
-                class=""
-                datetime="1536658647828"
-                title="Sep 11, 2018 5:37 AM"
+                <time
+                  class=""
+                  datetime="1536658649336"
+                  title="Sep 11, 2018 5:37 AM"
+                >
+                  in a month
+                </time>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
               >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
-            >
-              Anthony Gonzalez
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-            >
-              $223.54
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+                Jenna Villa
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+                $1,042.15
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
             >
-              #6
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
-            >
-              <time
-                class=""
-                datetime="1536658647636"
-                title="Sep 11, 2018 5:37 AM"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
-            >
-              Bradley Ford
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-            >
-              $237.55
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
-            >
-              #5
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
-            >
-              <time
-                class=""
-                datetime="1536658647420"
-                title="Sep 11, 2018 5:37 AM"
+                #14
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
               >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
-            >
-              David Lawson
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-            >
-              $453.55
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+                <time
+                  class=""
+                  datetime="1536658649103"
+                  title="Sep 11, 2018 5:37 AM"
+                >
+                  in a month
+                </time>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
-            >
-              #4
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
-            >
-              <time
-                class=""
-                datetime="1536658647230"
-                title="Sep 11, 2018 5:37 AM"
+                Wesley Davis
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
               >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+                $213.69
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
             >
-              Lauren Watson
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-            >
-              $812.67
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
-            >
-              #3
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
-            >
-              <time
-                class=""
-                datetime="1536658646972"
-                title="Sep 11, 2018 5:37 AM"
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
               >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
-            >
-              Mark Lee
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-            >
-              $481.41
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+                #13
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
-            >
-              #2
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
-            >
-              <time
-                class=""
-                datetime="1536658646751"
-                title="Sep 11, 2018 5:37 AM"
+                <time
+                  class=""
+                  datetime="1536658648921"
+                  title="Sep 11, 2018 5:37 AM"
+                >
+                  in a month
+                </time>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
               >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
-            >
-              Kara Murphy
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-            >
-              $569.19
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+                Anthony Gonzalez
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+                $367.03
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
             >
-              #1
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
-            >
-              <time
-                class=""
-                datetime="1536658646314"
-                title="Sep 11, 2018 5:37 AM"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+              >
+                #12
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+              >
+                <time
+                  class=""
+                  datetime="1536658648750"
+                  title="Sep 11, 2018 5:37 AM"
+                >
+                  in a month
+                </time>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+              >
+                Denise Freeman
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+              >
+                $298.76
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
             >
-              Curtis Bailey
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+              >
+                #11
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+              >
+                <time
+                  class=""
+                  datetime="1536658648598"
+                  title="Sep 11, 2018 5:37 AM"
+                >
+                  in a month
+                </time>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+              >
+                James Ball
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+              >
+                $663.69
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
             >
-              $557.00
-            </td>
-          </tr>
-        </tbody>
-      </table>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+              >
+                #10
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+              >
+                <time
+                  class=""
+                  datetime="1536658648409"
+                  title="Sep 11, 2018 5:37 AM"
+                >
+                  in a month
+                </time>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+              >
+                Michael Martinez
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+              >
+                $280.41
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+              >
+                #9
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+              >
+                <time
+                  class=""
+                  datetime="1536658648185"
+                  title="Sep 11, 2018 5:37 AM"
+                >
+                  in a month
+                </time>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+              >
+                Melissa Simon
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+              >
+                $234.93
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+              >
+                #8
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+              >
+                <time
+                  class=""
+                  datetime="1536658647953"
+                  title="Sep 11, 2018 5:37 AM"
+                >
+                  in a month
+                </time>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+              >
+                Justin Mccoy
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+              >
+                $485.19
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+              >
+                #7
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+              >
+                <time
+                  class=""
+                  datetime="1536658647828"
+                  title="Sep 11, 2018 5:37 AM"
+                >
+                  in a month
+                </time>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+              >
+                Anthony Gonzalez
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+              >
+                $223.54
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+              >
+                #6
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+              >
+                <time
+                  class=""
+                  datetime="1536658647636"
+                  title="Sep 11, 2018 5:37 AM"
+                >
+                  in a month
+                </time>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+              >
+                Bradley Ford
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+              >
+                $237.55
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+              >
+                #5
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+              >
+                <time
+                  class=""
+                  datetime="1536658647420"
+                  title="Sep 11, 2018 5:37 AM"
+                >
+                  in a month
+                </time>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+              >
+                David Lawson
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+              >
+                $453.55
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+              >
+                #4
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+              >
+                <time
+                  class=""
+                  datetime="1536658647230"
+                  title="Sep 11, 2018 5:37 AM"
+                >
+                  in a month
+                </time>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+              >
+                Lauren Watson
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+              >
+                $812.67
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+              >
+                #3
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+              >
+                <time
+                  class=""
+                  datetime="1536658646972"
+                  title="Sep 11, 2018 5:37 AM"
+                >
+                  in a month
+                </time>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+              >
+                Mark Lee
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+              >
+                $481.41
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+              >
+                #2
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+              >
+                <time
+                  class=""
+                  datetime="1536658646751"
+                  title="Sep 11, 2018 5:37 AM"
+                >
+                  in a month
+                </time>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+              >
+                Kara Murphy
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+              >
+                $569.19
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+              >
+                #1
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+              >
+                <time
+                  class=""
+                  datetime="1536658646314"
+                  title="Sep 11, 2018 5:37 AM"
+                >
+                  in a month
+                </time>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+              >
+                Curtis Bailey
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+              >
+                $557.00
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
     </div>
   </div>
 </div>
@@ -55631,10 +55903,10 @@ exports[`Storyshots Views / Orders / Draft order list loading 1`] = `
   style="padding:24px"
 >
   <div
-    class="makeStyles-root-id"
+    class="Container-root-id"
   >
     <div
-      class="makeStyles-root-id"
+      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
         class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -55642,7 +55914,7 @@ exports[`Storyshots Views / Orders / Draft order list loading 1`] = `
         Draft Orders
       </div>
       <div
-        class="makeStyles-action-id"
+        class="ExtendedPageHeader-action-id"
       >
         <div
           class="makeStyles-root-id"
@@ -55739,235 +56011,239 @@ exports[`Storyshots Views / Orders / Draft order list loading 1`] = `
       <hr
         class="makeStyles-root-id"
       />
-      <table
-        class="MuiTable-root-id"
+      <div
+        class="ResponsiveTable-root-id"
       >
-        <thead
-          class="MuiTableHead-root-id"
+        <table
+          class="MuiTable-root-id"
         >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-head-id"
+          <thead
+            class="MuiTableHead-root-id"
           >
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
-              scope="col"
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-head-id"
             >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
-                disabled=""
-                tabindex="-1"
-                type="button"
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
+                scope="col"
               >
-                <input
-                  class="makeStyles-box-id makeStyles-disabled-id"
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
                   disabled=""
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colNumber-id"
-              scope="col"
-            >
-              No. of Order
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colDate-id"
-              scope="col"
-            >
-              Date
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colCustomer-id"
-              scope="col"
-            >
-              Customer
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
-              scope="col"
-            >
-              Total
-            </th>
-          </tr>
-        </thead>
-        <tfoot
-          class="MuiTableFooter-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-footer-id"
+                  tabindex="-1"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id makeStyles-disabled-id"
+                    disabled=""
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colNumber-id"
+                scope="col"
+              >
+                No. of Order
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colDate-id"
+                scope="col"
+              >
+                Date
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colCustomer-id"
+                scope="col"
+              >
+                Customer
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
+                scope="col"
+              >
+                Total
+              </th>
+            </tr>
+          </thead>
+          <tfoot
+            class="MuiTableFooter-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
-              colspan="5"
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-footer-id"
             >
-              <div
-                class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                colspan="5"
               >
                 <div
-                  class="makeStyles-spacer-id"
+                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
                 >
-                  <div>
-                    <span
-                      class="RowNumberSelect-label-id"
-                    >
-                      No of Rows:
-                    </span>
-                    <div
-                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
-                    >
+                  <div
+                    class="makeStyles-spacer-id"
+                  >
+                    <div>
+                      <span
+                        class="RowNumberSelect-label-id"
+                      >
+                        No of Rows:
+                      </span>
                       <div
-                        aria-haspopup="listbox"
-                        aria-labelledby=" "
-                        class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-id"
-                        role="button"
-                        tabindex="0"
+                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                       >
-                        20
-                      </div>
-                      <input
-                        type="hidden"
-                        value="20"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MuiSelect-icon-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M7 10l5 5 5-5z"
+                        <div
+                          aria-haspopup="listbox"
+                          aria-labelledby=" "
+                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-id"
+                          role="button"
+                          tabindex="0"
+                        >
+                          20
+                        </div>
+                        <input
+                          type="hidden"
+                          value="20"
                         />
-                      </svg>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M7 10l5 5 5-5z"
+                          />
+                        </svg>
+                      </div>
                     </div>
                   </div>
-                </div>
-                <div
-                  class="makeStyles-root-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                    data-tc="button-pagination-back"
-                    disabled=""
-                    tabindex="-1"
-                    type="button"
+                  <div
+                    class="makeStyles-root-id"
                   >
-                    <span
-                      class="MuiIconButton-label-id"
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      data-tc="button-pagination-back"
+                      disabled=""
+                      tabindex="-1"
+                      type="button"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
+                      <span
+                        class="MuiIconButton-label-id"
                       >
-                        <path
-                          d="M14 7l-5 5 5 5V7z"
-                        />
-                        <path
-                          d="M24 0v24H0V0h24z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                    data-tc="button-pagination-next"
-                    disabled=""
-                    tabindex="-1"
-                    type="button"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M14 7l-5 5 5 5V7z"
+                          />
+                          <path
+                            d="M24 0v24H0V0h24z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      data-tc="button-pagination-next"
+                      disabled=""
+                      tabindex="-1"
+                      type="button"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
+                      <span
+                        class="MuiIconButton-label-id"
                       >
-                        <path
-                          d="M10 17l5-5-5-5v10z"
-                        />
-                        <path
-                          d="M0 24V0h24v24H0z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M10 17l5-5-5-5v10z"
+                          />
+                          <path
+                            d="M0 24V0h24v24H0z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </div>
                 </div>
-              </div>
-            </td>
-          </tr>
-        </tfoot>
-        <tbody
-          class="MuiTableBody-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id"
+              </td>
+            </tr>
+          </tfoot>
+          <tbody
+            class="MuiTableBody-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+            <tr
+              class="MuiTableRow-root-id"
             >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
-                disabled=""
-                tabindex="-1"
-                type="button"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
-                <input
-                  class="makeStyles-box-id makeStyles-disabled-id"
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
                   disabled=""
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
-            >
-              <span
-                class="makeStyles-skeleton-id"
+                  tabindex="-1"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id makeStyles-disabled-id"
+                    disabled=""
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
               >
-                ‌
-              </span>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
-            >
-              <span
-                class="makeStyles-skeleton-id"
+                <span
+                  class="makeStyles-skeleton-id"
+                >
+                  ‌
+                </span>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
               >
-                ‌
-              </span>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
-            >
-              <span
-                class="makeStyles-skeleton-id"
+                <span
+                  class="makeStyles-skeleton-id"
+                >
+                  ‌
+                </span>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
               >
-                ‌
-              </span>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-            >
-              <span
-                class="makeStyles-skeleton-id"
+                <span
+                  class="makeStyles-skeleton-id"
+                >
+                  ‌
+                </span>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
               >
-                ‌
-              </span>
-            </td>
-          </tr>
-        </tbody>
-      </table>
+                <span
+                  class="makeStyles-skeleton-id"
+                >
+                  ‌
+                </span>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
     </div>
   </div>
 </div>
@@ -55978,10 +56254,10 @@ exports[`Storyshots Views / Orders / Draft order list when no data 1`] = `
   style="padding:24px"
 >
   <div
-    class="makeStyles-root-id"
+    class="Container-root-id"
   >
     <div
-      class="makeStyles-root-id"
+      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
         class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -55989,7 +56265,7 @@ exports[`Storyshots Views / Orders / Draft order list when no data 1`] = `
         Draft Orders
       </div>
       <div
-        class="makeStyles-action-id"
+        class="ExtendedPageHeader-action-id"
       >
         <div
           class="makeStyles-root-id"
@@ -56085,169 +56361,173 @@ exports[`Storyshots Views / Orders / Draft order list when no data 1`] = `
       <hr
         class="makeStyles-root-id"
       />
-      <table
-        class="MuiTable-root-id"
+      <div
+        class="ResponsiveTable-root-id"
       >
-        <thead
-          class="MuiTableHead-root-id"
+        <table
+          class="MuiTable-root-id"
         >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-head-id"
+          <thead
+            class="MuiTableHead-root-id"
           >
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colNumber-id"
-              scope="col"
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-head-id"
             >
-              No. of Order
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colDate-id"
-              scope="col"
-            >
-              Date
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colCustomer-id"
-              scope="col"
-            >
-              Customer
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
-              scope="col"
-            >
-              Total
-            </th>
-          </tr>
-        </thead>
-        <tfoot
-          class="MuiTableFooter-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-footer-id"
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colNumber-id"
+                scope="col"
+              >
+                No. of Order
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colDate-id"
+                scope="col"
+              >
+                Date
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colCustomer-id"
+                scope="col"
+              >
+                Customer
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
+                scope="col"
+              >
+                Total
+              </th>
+            </tr>
+          </thead>
+          <tfoot
+            class="MuiTableFooter-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
-              colspan="5"
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-footer-id"
             >
-              <div
-                class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                colspan="5"
               >
                 <div
-                  class="makeStyles-spacer-id"
+                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
                 >
-                  <div>
-                    <span
-                      class="RowNumberSelect-label-id"
-                    >
-                      No of Rows:
-                    </span>
-                    <div
-                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
-                    >
+                  <div
+                    class="makeStyles-spacer-id"
+                  >
+                    <div>
+                      <span
+                        class="RowNumberSelect-label-id"
+                      >
+                        No of Rows:
+                      </span>
                       <div
-                        aria-haspopup="listbox"
-                        aria-labelledby=" "
-                        class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-id"
-                        role="button"
-                        tabindex="0"
+                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                       >
-                        20
-                      </div>
-                      <input
-                        type="hidden"
-                        value="20"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MuiSelect-icon-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M7 10l5 5 5-5z"
+                        <div
+                          aria-haspopup="listbox"
+                          aria-labelledby=" "
+                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-id"
+                          role="button"
+                          tabindex="0"
+                        >
+                          20
+                        </div>
+                        <input
+                          type="hidden"
+                          value="20"
                         />
-                      </svg>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M7 10l5 5 5-5z"
+                          />
+                        </svg>
+                      </div>
                     </div>
                   </div>
-                </div>
-                <div
-                  class="makeStyles-root-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                    data-tc="button-pagination-back"
-                    disabled=""
-                    tabindex="-1"
-                    type="button"
+                  <div
+                    class="makeStyles-root-id"
                   >
-                    <span
-                      class="MuiIconButton-label-id"
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      data-tc="button-pagination-back"
+                      disabled=""
+                      tabindex="-1"
+                      type="button"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
+                      <span
+                        class="MuiIconButton-label-id"
                       >
-                        <path
-                          d="M14 7l-5 5 5 5V7z"
-                        />
-                        <path
-                          d="M24 0v24H0V0h24z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
-                    data-tc="button-pagination-next"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M14 7l-5 5 5 5V7z"
+                          />
+                          <path
+                            d="M24 0v24H0V0h24z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                      data-tc="button-pagination-next"
+                      tabindex="0"
+                      type="button"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
+                      <span
+                        class="MuiIconButton-label-id"
                       >
-                        <path
-                          d="M10 17l5-5-5-5v10z"
-                        />
-                        <path
-                          d="M0 24V0h24v24H0z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M10 17l5-5-5-5v10z"
+                          />
+                          <path
+                            d="M0 24V0h24v24H0z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </div>
                 </div>
-              </div>
-            </td>
-          </tr>
-        </tfoot>
-        <tbody
-          class="MuiTableBody-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id"
+              </td>
+            </tr>
+          </tfoot>
+          <tbody
+            class="MuiTableBody-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-              colspan="5"
+            <tr
+              class="MuiTableRow-root-id"
             >
-              No draft orders found
-            </td>
-          </tr>
-        </tbody>
-      </table>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id"
+                colspan="5"
+              >
+                No draft orders found
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
     </div>
   </div>
 </div>
@@ -56258,10 +56538,10 @@ exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
   style="padding:24px"
 >
   <div
-    class="makeStyles-root-id"
+    class="Container-root-id"
   >
     <div
-      class="makeStyles-root-id makeStyles-header-id"
+      class="ExtendedPageHeader-root-id OrderDetailsPage-header-id"
     >
       <div
         class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -56269,7 +56549,7 @@ exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
         #9
       </div>
       <div
-        class="makeStyles-action-id"
+        class="ExtendedPageHeader-action-id"
       >
         <div
           class="makeStyles-root-id"
@@ -56277,7 +56557,7 @@ exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
       </div>
     </div>
     <div
-      class="makeStyles-date-id"
+      class="OrderDetailsPage-date-id"
     >
       <div
         class="MuiTypography-root-id MuiTypography-caption-id"
@@ -56320,90 +56600,94 @@ exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
           <hr
             class="makeStyles-hr-id"
           />
-          <table
-            class="MuiTable-root-id makeStyles-table-id"
+          <div
+            class="ResponsiveTable-root-id"
           >
-            <thead
-              class="MuiTableHead-root-id"
+            <table
+              class="MuiTable-root-id makeStyles-table-id"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
+              <thead
+                class="MuiTableHead-root-id"
               >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
-                  scope="col"
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
-                  <span
-                    class="makeStyles-colNameLabel-id"
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                    scope="col"
                   >
-                    Product
-                  </span>
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
-                  scope="col"
-                >
-                  Quantity
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
-                  scope="col"
-                >
-                  Price
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
-                  scope="col"
-                >
-                  Total
-                </th>
-              </tr>
-            </thead>
-            <tbody
-              class="MuiTableBody-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
+                    <span
+                      class="makeStyles-colNameLabel-id"
+                    >
+                      Product
+                    </span>
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
+                    scope="col"
+                  >
+                    Quantity
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
+                    scope="col"
+                  >
+                    Price
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
+                    scope="col"
+                  >
+                    Total
+                  </th>
+                </tr>
+              </thead>
+              <tbody
+                class="MuiTableBody-root-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                <tr
+                  class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
                 >
-                  <div
-                    class="makeStyles-content-id"
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      class="makeStyles-content-id"
                     >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder60x60.png"
-                      />
+                      <div
+                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      >
+                        <img
+                          class="MuiAvatar-img-id"
+                          src="placeholder60x60.png"
+                        />
+                      </div>
+                      <div
+                        class="makeStyles-children-id"
+                      >
+                        Watkins-Gonzalez (Soft)
+                      </div>
                     </div>
-                    <div
-                      class="makeStyles-children-id"
-                    >
-                      Watkins-Gonzalez (Soft)
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
-                >
-                  3
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
-                >
-                  $18.51
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-                >
-                  $55.53
-                </td>
-              </tr>
-            </tbody>
-          </table>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
+                  >
+                    3
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                  >
+                    $18.51
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                  >
+                    $55.53
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
         </div>
         <div
           class="makeStyles-spacer-id"
@@ -56438,90 +56722,94 @@ exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
           <hr
             class="makeStyles-hr-id"
           />
-          <table
-            class="MuiTable-root-id makeStyles-table-id"
+          <div
+            class="ResponsiveTable-root-id"
           >
-            <thead
-              class="MuiTableHead-root-id"
+            <table
+              class="MuiTable-root-id makeStyles-table-id"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
+              <thead
+                class="MuiTableHead-root-id"
               >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
-                  scope="col"
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
-                  <span
-                    class="makeStyles-colNameLabel-id"
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                    scope="col"
                   >
-                    Product
-                  </span>
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
-                  scope="col"
-                >
-                  Quantity
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
-                  scope="col"
-                >
-                  Price
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
-                  scope="col"
-                >
-                  Total
-                </th>
-              </tr>
-            </thead>
-            <tbody
-              class="MuiTableBody-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
+                    <span
+                      class="makeStyles-colNameLabel-id"
+                    >
+                      Product
+                    </span>
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
+                    scope="col"
+                  >
+                    Quantity
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
+                    scope="col"
+                  >
+                    Price
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
+                    scope="col"
+                  >
+                    Total
+                  </th>
+                </tr>
+              </thead>
+              <tbody
+                class="MuiTableBody-root-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                <tr
+                  class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
                 >
-                  <div
-                    class="makeStyles-content-id"
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      class="makeStyles-content-id"
                     >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder60x60.png"
-                      />
+                      <div
+                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      >
+                        <img
+                          class="MuiAvatar-img-id"
+                          src="placeholder60x60.png"
+                        />
+                      </div>
+                      <div
+                        class="makeStyles-children-id"
+                      >
+                        Williams, Garcia and Walker (XS)
+                      </div>
                     </div>
-                    <div
-                      class="makeStyles-children-id"
-                    >
-                      Williams, Garcia and Walker (XS)
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
-                >
-                  1
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
-                >
-                  $79.71
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-                >
-                  $79.71
-                </td>
-              </tr>
-            </tbody>
-          </table>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
+                  >
+                    1
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                  >
+                    $79.71
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                  >
+                    $79.71
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
         </div>
         <div
           class="makeStyles-spacer-id"
@@ -56556,90 +56844,94 @@ exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
           <hr
             class="makeStyles-hr-id"
           />
-          <table
-            class="MuiTable-root-id makeStyles-table-id"
+          <div
+            class="ResponsiveTable-root-id"
           >
-            <thead
-              class="MuiTableHead-root-id"
+            <table
+              class="MuiTable-root-id makeStyles-table-id"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
+              <thead
+                class="MuiTableHead-root-id"
               >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
-                  scope="col"
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
-                  <span
-                    class="makeStyles-colNameLabel-id"
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                    scope="col"
                   >
-                    Product
-                  </span>
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
-                  scope="col"
-                >
-                  Quantity
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
-                  scope="col"
-                >
-                  Price
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
-                  scope="col"
-                >
-                  Total
-                </th>
-              </tr>
-            </thead>
-            <tbody
-              class="MuiTableBody-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
+                    <span
+                      class="makeStyles-colNameLabel-id"
+                    >
+                      Product
+                    </span>
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
+                    scope="col"
+                  >
+                    Quantity
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
+                    scope="col"
+                  >
+                    Price
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
+                    scope="col"
+                  >
+                    Total
+                  </th>
+                </tr>
+              </thead>
+              <tbody
+                class="MuiTableBody-root-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                <tr
+                  class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
                 >
-                  <div
-                    class="makeStyles-content-id"
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      class="makeStyles-content-id"
                     >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder60x60.png"
-                      />
+                      <div
+                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      >
+                        <img
+                          class="MuiAvatar-img-id"
+                          src="placeholder60x60.png"
+                        />
+                      </div>
+                      <div
+                        class="makeStyles-children-id"
+                      >
+                        Williams, Garcia and Walker (XS)
+                      </div>
                     </div>
-                    <div
-                      class="makeStyles-children-id"
-                    >
-                      Williams, Garcia and Walker (XS)
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
-                >
-                  1
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
-                >
-                  $79.71
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-                >
-                  $79.71
-                </td>
-              </tr>
-            </tbody>
-          </table>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
+                  >
+                    1
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                  >
+                    $79.71
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                  >
+                    $79.71
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
         </div>
         <div
           class="makeStyles-spacer-id"
@@ -57032,10 +57324,10 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
   style="padding:24px"
 >
   <div
-    class="makeStyles-root-id"
+    class="Container-root-id"
   >
     <div
-      class="makeStyles-root-id makeStyles-header-id"
+      class="ExtendedPageHeader-root-id OrderDetailsPage-header-id"
     >
       <div
         class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -57043,7 +57335,7 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
         #9
       </div>
       <div
-        class="makeStyles-action-id"
+        class="ExtendedPageHeader-action-id"
       >
         <div
           class="makeStyles-root-id"
@@ -57077,7 +57369,7 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
       </div>
     </div>
     <div
-      class="makeStyles-date-id"
+      class="OrderDetailsPage-date-id"
     >
       <div
         class="MuiTypography-root-id MuiTypography-caption-id"
@@ -57120,90 +57412,94 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
           <hr
             class="makeStyles-hr-id"
           />
-          <table
-            class="MuiTable-root-id makeStyles-table-id"
+          <div
+            class="ResponsiveTable-root-id"
           >
-            <thead
-              class="MuiTableHead-root-id"
+            <table
+              class="MuiTable-root-id makeStyles-table-id"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
+              <thead
+                class="MuiTableHead-root-id"
               >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
-                  scope="col"
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
-                  <span
-                    class="makeStyles-colNameLabel-id"
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                    scope="col"
                   >
-                    Product
-                  </span>
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
-                  scope="col"
-                >
-                  Quantity
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
-                  scope="col"
-                >
-                  Price
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
-                  scope="col"
-                >
-                  Total
-                </th>
-              </tr>
-            </thead>
-            <tbody
-              class="MuiTableBody-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
+                    <span
+                      class="makeStyles-colNameLabel-id"
+                    >
+                      Product
+                    </span>
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
+                    scope="col"
+                  >
+                    Quantity
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
+                    scope="col"
+                  >
+                    Price
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
+                    scope="col"
+                  >
+                    Total
+                  </th>
+                </tr>
+              </thead>
+              <tbody
+                class="MuiTableBody-root-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                <tr
+                  class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
                 >
-                  <div
-                    class="makeStyles-content-id"
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      class="makeStyles-content-id"
                     >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder60x60.png"
-                      />
+                      <div
+                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      >
+                        <img
+                          class="MuiAvatar-img-id"
+                          src="placeholder60x60.png"
+                        />
+                      </div>
+                      <div
+                        class="makeStyles-children-id"
+                      >
+                        Watkins-Gonzalez (Soft)
+                      </div>
                     </div>
-                    <div
-                      class="makeStyles-children-id"
-                    >
-                      Watkins-Gonzalez (Soft)
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
-                >
-                  3
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
-                >
-                  $18.51
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-                >
-                  $55.53
-                </td>
-              </tr>
-            </tbody>
-          </table>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
+                  >
+                    3
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                  >
+                    $18.51
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                  >
+                    $55.53
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
           <div
             class="MuiCardActions-root-id MuiCardActions-spacing-id"
           >
@@ -57279,90 +57575,94 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
           <hr
             class="makeStyles-hr-id"
           />
-          <table
-            class="MuiTable-root-id makeStyles-table-id"
+          <div
+            class="ResponsiveTable-root-id"
           >
-            <thead
-              class="MuiTableHead-root-id"
+            <table
+              class="MuiTable-root-id makeStyles-table-id"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
+              <thead
+                class="MuiTableHead-root-id"
               >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
-                  scope="col"
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
-                  <span
-                    class="makeStyles-colNameLabel-id"
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                    scope="col"
                   >
-                    Product
-                  </span>
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
-                  scope="col"
-                >
-                  Quantity
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
-                  scope="col"
-                >
-                  Price
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
-                  scope="col"
-                >
-                  Total
-                </th>
-              </tr>
-            </thead>
-            <tbody
-              class="MuiTableBody-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
+                    <span
+                      class="makeStyles-colNameLabel-id"
+                    >
+                      Product
+                    </span>
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
+                    scope="col"
+                  >
+                    Quantity
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
+                    scope="col"
+                  >
+                    Price
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
+                    scope="col"
+                  >
+                    Total
+                  </th>
+                </tr>
+              </thead>
+              <tbody
+                class="MuiTableBody-root-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                <tr
+                  class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
                 >
-                  <div
-                    class="makeStyles-content-id"
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      class="makeStyles-content-id"
                     >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder60x60.png"
-                      />
+                      <div
+                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      >
+                        <img
+                          class="MuiAvatar-img-id"
+                          src="placeholder60x60.png"
+                        />
+                      </div>
+                      <div
+                        class="makeStyles-children-id"
+                      >
+                        Williams, Garcia and Walker (XS)
+                      </div>
                     </div>
-                    <div
-                      class="makeStyles-children-id"
-                    >
-                      Williams, Garcia and Walker (XS)
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
-                >
-                  1
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
-                >
-                  $79.71
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-                >
-                  $79.71
-                </td>
-              </tr>
-            </tbody>
-          </table>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
+                  >
+                    1
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                  >
+                    $79.71
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                  >
+                    $79.71
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
           <div
             class="MuiCardActions-root-id MuiCardActions-spacing-id"
           >
@@ -57438,90 +57738,94 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
           <hr
             class="makeStyles-hr-id"
           />
-          <table
-            class="MuiTable-root-id makeStyles-table-id"
+          <div
+            class="ResponsiveTable-root-id"
           >
-            <thead
-              class="MuiTableHead-root-id"
+            <table
+              class="MuiTable-root-id makeStyles-table-id"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
+              <thead
+                class="MuiTableHead-root-id"
               >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
-                  scope="col"
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
-                  <span
-                    class="makeStyles-colNameLabel-id"
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                    scope="col"
                   >
-                    Product
-                  </span>
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
-                  scope="col"
-                >
-                  Quantity
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
-                  scope="col"
-                >
-                  Price
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
-                  scope="col"
-                >
-                  Total
-                </th>
-              </tr>
-            </thead>
-            <tbody
-              class="MuiTableBody-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
+                    <span
+                      class="makeStyles-colNameLabel-id"
+                    >
+                      Product
+                    </span>
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
+                    scope="col"
+                  >
+                    Quantity
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
+                    scope="col"
+                  >
+                    Price
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
+                    scope="col"
+                  >
+                    Total
+                  </th>
+                </tr>
+              </thead>
+              <tbody
+                class="MuiTableBody-root-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                <tr
+                  class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
                 >
-                  <div
-                    class="makeStyles-content-id"
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      class="makeStyles-content-id"
                     >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder60x60.png"
-                      />
+                      <div
+                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      >
+                        <img
+                          class="MuiAvatar-img-id"
+                          src="placeholder60x60.png"
+                        />
+                      </div>
+                      <div
+                        class="makeStyles-children-id"
+                      >
+                        Williams, Garcia and Walker (XS)
+                      </div>
                     </div>
-                    <div
-                      class="makeStyles-children-id"
-                    >
-                      Williams, Garcia and Walker (XS)
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
-                >
-                  1
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
-                >
-                  $79.71
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-                >
-                  $79.71
-                </td>
-              </tr>
-            </tbody>
-          </table>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
+                  >
+                    1
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                  >
+                    $79.71
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                  >
+                    $79.71
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
           <div
             class="MuiCardActions-root-id MuiCardActions-spacing-id"
           >
@@ -58010,10 +58314,10 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
   style="padding:24px"
 >
   <div
-    class="makeStyles-root-id"
+    class="Container-root-id"
   >
     <div
-      class="makeStyles-root-id makeStyles-header-id"
+      class="ExtendedPageHeader-root-id OrderDetailsPage-header-id"
     >
       <div
         class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -58021,7 +58325,7 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
         #9
       </div>
       <div
-        class="makeStyles-action-id"
+        class="ExtendedPageHeader-action-id"
       >
         <div
           class="makeStyles-root-id"
@@ -58055,7 +58359,7 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
       </div>
     </div>
     <div
-      class="makeStyles-date-id"
+      class="OrderDetailsPage-date-id"
     >
       <div
         class="MuiTypography-root-id MuiTypography-caption-id"
@@ -58098,90 +58402,94 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
           <hr
             class="makeStyles-hr-id"
           />
-          <table
-            class="MuiTable-root-id makeStyles-table-id"
+          <div
+            class="ResponsiveTable-root-id"
           >
-            <thead
-              class="MuiTableHead-root-id"
+            <table
+              class="MuiTable-root-id makeStyles-table-id"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
+              <thead
+                class="MuiTableHead-root-id"
               >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
-                  scope="col"
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
-                  <span
-                    class="makeStyles-colNameLabel-id"
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                    scope="col"
                   >
-                    Product
-                  </span>
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
-                  scope="col"
-                >
-                  Quantity
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
-                  scope="col"
-                >
-                  Price
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
-                  scope="col"
-                >
-                  Total
-                </th>
-              </tr>
-            </thead>
-            <tbody
-              class="MuiTableBody-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
+                    <span
+                      class="makeStyles-colNameLabel-id"
+                    >
+                      Product
+                    </span>
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
+                    scope="col"
+                  >
+                    Quantity
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
+                    scope="col"
+                  >
+                    Price
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
+                    scope="col"
+                  >
+                    Total
+                  </th>
+                </tr>
+              </thead>
+              <tbody
+                class="MuiTableBody-root-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                <tr
+                  class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
                 >
-                  <div
-                    class="makeStyles-content-id"
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      class="makeStyles-content-id"
                     >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder60x60.png"
-                      />
+                      <div
+                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      >
+                        <img
+                          class="MuiAvatar-img-id"
+                          src="placeholder60x60.png"
+                        />
+                      </div>
+                      <div
+                        class="makeStyles-children-id"
+                      >
+                        Watkins-Gonzalez (Soft)
+                      </div>
                     </div>
-                    <div
-                      class="makeStyles-children-id"
-                    >
-                      Watkins-Gonzalez (Soft)
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
-                >
-                  3
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
-                >
-                  $18.51
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-                >
-                  $55.53
-                </td>
-              </tr>
-            </tbody>
-          </table>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
+                  >
+                    3
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                  >
+                    $18.51
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                  >
+                    $55.53
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
           <div
             class="MuiCardActions-root-id MuiCardActions-spacing-id"
           >
@@ -58257,90 +58565,94 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
           <hr
             class="makeStyles-hr-id"
           />
-          <table
-            class="MuiTable-root-id makeStyles-table-id"
+          <div
+            class="ResponsiveTable-root-id"
           >
-            <thead
-              class="MuiTableHead-root-id"
+            <table
+              class="MuiTable-root-id makeStyles-table-id"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
+              <thead
+                class="MuiTableHead-root-id"
               >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
-                  scope="col"
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
-                  <span
-                    class="makeStyles-colNameLabel-id"
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                    scope="col"
                   >
-                    Product
-                  </span>
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
-                  scope="col"
-                >
-                  Quantity
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
-                  scope="col"
-                >
-                  Price
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
-                  scope="col"
-                >
-                  Total
-                </th>
-              </tr>
-            </thead>
-            <tbody
-              class="MuiTableBody-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
+                    <span
+                      class="makeStyles-colNameLabel-id"
+                    >
+                      Product
+                    </span>
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
+                    scope="col"
+                  >
+                    Quantity
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
+                    scope="col"
+                  >
+                    Price
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
+                    scope="col"
+                  >
+                    Total
+                  </th>
+                </tr>
+              </thead>
+              <tbody
+                class="MuiTableBody-root-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                <tr
+                  class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
                 >
-                  <div
-                    class="makeStyles-content-id"
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      class="makeStyles-content-id"
                     >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder60x60.png"
-                      />
+                      <div
+                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      >
+                        <img
+                          class="MuiAvatar-img-id"
+                          src="placeholder60x60.png"
+                        />
+                      </div>
+                      <div
+                        class="makeStyles-children-id"
+                      >
+                        Williams, Garcia and Walker (XS)
+                      </div>
                     </div>
-                    <div
-                      class="makeStyles-children-id"
-                    >
-                      Williams, Garcia and Walker (XS)
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
-                >
-                  1
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
-                >
-                  $79.71
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-                >
-                  $79.71
-                </td>
-              </tr>
-            </tbody>
-          </table>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
+                  >
+                    1
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                  >
+                    $79.71
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                  >
+                    $79.71
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
           <div
             class="MuiCardActions-root-id MuiCardActions-spacing-id"
           >
@@ -58416,90 +58728,94 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
           <hr
             class="makeStyles-hr-id"
           />
-          <table
-            class="MuiTable-root-id makeStyles-table-id"
+          <div
+            class="ResponsiveTable-root-id"
           >
-            <thead
-              class="MuiTableHead-root-id"
+            <table
+              class="MuiTable-root-id makeStyles-table-id"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
+              <thead
+                class="MuiTableHead-root-id"
               >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
-                  scope="col"
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
-                  <span
-                    class="makeStyles-colNameLabel-id"
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                    scope="col"
                   >
-                    Product
-                  </span>
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
-                  scope="col"
-                >
-                  Quantity
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
-                  scope="col"
-                >
-                  Price
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
-                  scope="col"
-                >
-                  Total
-                </th>
-              </tr>
-            </thead>
-            <tbody
-              class="MuiTableBody-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
+                    <span
+                      class="makeStyles-colNameLabel-id"
+                    >
+                      Product
+                    </span>
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
+                    scope="col"
+                  >
+                    Quantity
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
+                    scope="col"
+                  >
+                    Price
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
+                    scope="col"
+                  >
+                    Total
+                  </th>
+                </tr>
+              </thead>
+              <tbody
+                class="MuiTableBody-root-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                <tr
+                  class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
                 >
-                  <div
-                    class="makeStyles-content-id"
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      class="makeStyles-content-id"
                     >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder60x60.png"
-                      />
+                      <div
+                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      >
+                        <img
+                          class="MuiAvatar-img-id"
+                          src="placeholder60x60.png"
+                        />
+                      </div>
+                      <div
+                        class="makeStyles-children-id"
+                      >
+                        Williams, Garcia and Walker (XS)
+                      </div>
                     </div>
-                    <div
-                      class="makeStyles-children-id"
-                    >
-                      Williams, Garcia and Walker (XS)
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
-                >
-                  1
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
-                >
-                  $79.71
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-                >
-                  $79.71
-                </td>
-              </tr>
-            </tbody>
-          </table>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
+                  >
+                    1
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                  >
+                    $79.71
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                  >
+                    $79.71
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
           <div
             class="MuiCardActions-root-id MuiCardActions-spacing-id"
           >
@@ -58988,10 +59304,10 @@ exports[`Storyshots Views / Orders / Order details loading 1`] = `
   style="padding:24px"
 >
   <div
-    class="makeStyles-root-id"
+    class="Container-root-id"
   >
     <div
-      class="makeStyles-root-id makeStyles-header-id"
+      class="ExtendedPageHeader-root-id OrderDetailsPage-header-id"
     >
       <div
         class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -59004,7 +59320,7 @@ exports[`Storyshots Views / Orders / Order details loading 1`] = `
         </span>
       </div>
       <div
-        class="makeStyles-action-id"
+        class="ExtendedPageHeader-action-id"
       >
         <div
           class="makeStyles-root-id"
@@ -59038,7 +59354,7 @@ exports[`Storyshots Views / Orders / Order details loading 1`] = `
       </div>
     </div>
     <div
-      class="makeStyles-date-id"
+      class="OrderDetailsPage-date-id"
     >
       <span
         class="makeStyles-skeleton-id"
@@ -59079,113 +59395,117 @@ exports[`Storyshots Views / Orders / Order details loading 1`] = `
           <hr
             class="makeStyles-hr-id"
           />
-          <table
-            class="MuiTable-root-id makeStyles-table-id"
+          <div
+            class="ResponsiveTable-root-id"
           >
-            <thead
-              class="MuiTableHead-root-id"
+            <table
+              class="MuiTable-root-id makeStyles-table-id"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
+              <thead
+                class="MuiTableHead-root-id"
               >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
-                  scope="col"
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
-                  <span
-                    class="makeStyles-colNameLabel-id"
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                    scope="col"
                   >
-                    Product
-                  </span>
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
-                  scope="col"
-                >
-                  Quantity
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
-                  scope="col"
-                >
-                  Price
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
-                  scope="col"
-                >
-                  Total
-                </th>
-              </tr>
-            </thead>
-            <tbody
-              class="MuiTableBody-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id"
+                    <span
+                      class="makeStyles-colNameLabel-id"
+                    >
+                      Product
+                    </span>
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
+                    scope="col"
+                  >
+                    Quantity
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
+                    scope="col"
+                  >
+                    Price
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
+                    scope="col"
+                  >
+                    Total
+                  </th>
+                </tr>
+              </thead>
+              <tbody
+                class="MuiTableBody-root-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                <tr
+                  class="MuiTableRow-root-id"
                 >
-                  <div
-                    class="makeStyles-content-id"
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id MuiAvatar-colorDefault-id"
+                      class="makeStyles-content-id"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
+                      <div
+                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id MuiAvatar-colorDefault-id"
                       >
-                        <path
-                          d="M19 8l-4 4h3c0 3.31-2.69 6-6 6-1.01 0-1.97-.25-2.8-.7l-1.46 1.46C8.97 19.54 10.43 20 12 20c4.42 0 8-3.58 8-8h3l-4-4zM6 12c0-3.31 2.69-6 6-6 1.01 0 1.97.25 2.8.7l1.46-1.46C15.03 4.46 13.57 4 12 4c-4.42 0-8 3.58-8 8H1l4 4 4-4H6z"
-                        />
-                      </svg>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M19 8l-4 4h3c0 3.31-2.69 6-6 6-1.01 0-1.97-.25-2.8-.7l-1.46 1.46C8.97 19.54 10.43 20 12 20c4.42 0 8-3.58 8-8h3l-4-4zM6 12c0-3.31 2.69-6 6-6 1.01 0 1.97.25 2.8.7l1.46-1.46C15.03 4.46 13.57 4 12 4c-4.42 0-8 3.58-8 8H1l4 4 4-4H6z"
+                          />
+                        </svg>
+                      </div>
+                      <div
+                        class="makeStyles-children-id"
+                      >
+                        <span
+                          class="makeStyles-skeleton-id"
+                        >
+                          ‌
+                        </span>
+                      </div>
                     </div>
-                    <div
-                      class="makeStyles-children-id"
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
+                  >
+                    <span
+                      class="makeStyles-skeleton-id"
                     >
-                      <span
-                        class="makeStyles-skeleton-id"
-                      >
-                        ‌
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
-                >
-                  <span
-                    class="makeStyles-skeleton-id"
+                      ‌
+                    </span>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
                   >
-                    ‌
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
-                >
-                  <span
-                    class="makeStyles-skeleton-id"
+                    <span
+                      class="makeStyles-skeleton-id"
+                    >
+                      ‌
+                    </span>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
                   >
-                    ‌
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-                >
-                  <span
-                    class="makeStyles-skeleton-id"
-                  >
-                    ‌
-                  </span>
-                </td>
-              </tr>
-            </tbody>
-          </table>
+                    <span
+                      class="makeStyles-skeleton-id"
+                    >
+                      ‌
+                    </span>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
         </div>
         <div
           class="makeStyles-spacer-id"
@@ -59532,10 +59852,10 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
   style="padding:24px"
 >
   <div
-    class="makeStyles-root-id"
+    class="Container-root-id"
   >
     <div
-      class="makeStyles-root-id makeStyles-header-id"
+      class="ExtendedPageHeader-root-id OrderDetailsPage-header-id"
     >
       <div
         class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -59543,7 +59863,7 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
         #9
       </div>
       <div
-        class="makeStyles-action-id"
+        class="ExtendedPageHeader-action-id"
       >
         <div
           class="makeStyles-root-id"
@@ -59577,7 +59897,7 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
       </div>
     </div>
     <div
-      class="makeStyles-date-id"
+      class="OrderDetailsPage-date-id"
     >
       <div
         class="MuiTypography-root-id MuiTypography-caption-id"
@@ -59620,90 +59940,94 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
           <hr
             class="makeStyles-hr-id"
           />
-          <table
-            class="MuiTable-root-id makeStyles-table-id"
+          <div
+            class="ResponsiveTable-root-id"
           >
-            <thead
-              class="MuiTableHead-root-id"
+            <table
+              class="MuiTable-root-id makeStyles-table-id"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
+              <thead
+                class="MuiTableHead-root-id"
               >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
-                  scope="col"
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
-                  <span
-                    class="makeStyles-colNameLabel-id"
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                    scope="col"
                   >
-                    Product
-                  </span>
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
-                  scope="col"
-                >
-                  Quantity
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
-                  scope="col"
-                >
-                  Price
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
-                  scope="col"
-                >
-                  Total
-                </th>
-              </tr>
-            </thead>
-            <tbody
-              class="MuiTableBody-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
+                    <span
+                      class="makeStyles-colNameLabel-id"
+                    >
+                      Product
+                    </span>
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
+                    scope="col"
+                  >
+                    Quantity
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
+                    scope="col"
+                  >
+                    Price
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
+                    scope="col"
+                  >
+                    Total
+                  </th>
+                </tr>
+              </thead>
+              <tbody
+                class="MuiTableBody-root-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                <tr
+                  class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
                 >
-                  <div
-                    class="makeStyles-content-id"
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      class="makeStyles-content-id"
                     >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder60x60.png"
-                      />
+                      <div
+                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      >
+                        <img
+                          class="MuiAvatar-img-id"
+                          src="placeholder60x60.png"
+                        />
+                      </div>
+                      <div
+                        class="makeStyles-children-id"
+                      >
+                        Watkins-Gonzalez (Soft)
+                      </div>
                     </div>
-                    <div
-                      class="makeStyles-children-id"
-                    >
-                      Watkins-Gonzalez (Soft)
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
-                >
-                  3
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
-                >
-                  $18.51
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-                >
-                  $55.53
-                </td>
-              </tr>
-            </tbody>
-          </table>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
+                  >
+                    3
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                  >
+                    $18.51
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                  >
+                    $55.53
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
           <div
             class="MuiCardActions-root-id MuiCardActions-spacing-id"
           >
@@ -59779,90 +60103,94 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
           <hr
             class="makeStyles-hr-id"
           />
-          <table
-            class="MuiTable-root-id makeStyles-table-id"
+          <div
+            class="ResponsiveTable-root-id"
           >
-            <thead
-              class="MuiTableHead-root-id"
+            <table
+              class="MuiTable-root-id makeStyles-table-id"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
+              <thead
+                class="MuiTableHead-root-id"
               >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
-                  scope="col"
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
-                  <span
-                    class="makeStyles-colNameLabel-id"
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                    scope="col"
                   >
-                    Product
-                  </span>
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
-                  scope="col"
-                >
-                  Quantity
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
-                  scope="col"
-                >
-                  Price
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
-                  scope="col"
-                >
-                  Total
-                </th>
-              </tr>
-            </thead>
-            <tbody
-              class="MuiTableBody-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
+                    <span
+                      class="makeStyles-colNameLabel-id"
+                    >
+                      Product
+                    </span>
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
+                    scope="col"
+                  >
+                    Quantity
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
+                    scope="col"
+                  >
+                    Price
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
+                    scope="col"
+                  >
+                    Total
+                  </th>
+                </tr>
+              </thead>
+              <tbody
+                class="MuiTableBody-root-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                <tr
+                  class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
                 >
-                  <div
-                    class="makeStyles-content-id"
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      class="makeStyles-content-id"
                     >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder60x60.png"
-                      />
+                      <div
+                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      >
+                        <img
+                          class="MuiAvatar-img-id"
+                          src="placeholder60x60.png"
+                        />
+                      </div>
+                      <div
+                        class="makeStyles-children-id"
+                      >
+                        Williams, Garcia and Walker (XS)
+                      </div>
                     </div>
-                    <div
-                      class="makeStyles-children-id"
-                    >
-                      Williams, Garcia and Walker (XS)
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
-                >
-                  1
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
-                >
-                  $79.71
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-                >
-                  $79.71
-                </td>
-              </tr>
-            </tbody>
-          </table>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
+                  >
+                    1
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                  >
+                    $79.71
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                  >
+                    $79.71
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
           <div
             class="MuiCardActions-root-id MuiCardActions-spacing-id"
           >
@@ -59938,90 +60266,94 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
           <hr
             class="makeStyles-hr-id"
           />
-          <table
-            class="MuiTable-root-id makeStyles-table-id"
+          <div
+            class="ResponsiveTable-root-id"
           >
-            <thead
-              class="MuiTableHead-root-id"
+            <table
+              class="MuiTable-root-id makeStyles-table-id"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
+              <thead
+                class="MuiTableHead-root-id"
               >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
-                  scope="col"
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
-                  <span
-                    class="makeStyles-colNameLabel-id"
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                    scope="col"
                   >
-                    Product
-                  </span>
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
-                  scope="col"
-                >
-                  Quantity
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
-                  scope="col"
-                >
-                  Price
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
-                  scope="col"
-                >
-                  Total
-                </th>
-              </tr>
-            </thead>
-            <tbody
-              class="MuiTableBody-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
+                    <span
+                      class="makeStyles-colNameLabel-id"
+                    >
+                      Product
+                    </span>
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
+                    scope="col"
+                  >
+                    Quantity
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
+                    scope="col"
+                  >
+                    Price
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
+                    scope="col"
+                  >
+                    Total
+                  </th>
+                </tr>
+              </thead>
+              <tbody
+                class="MuiTableBody-root-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                <tr
+                  class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
                 >
-                  <div
-                    class="makeStyles-content-id"
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      class="makeStyles-content-id"
                     >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder60x60.png"
-                      />
+                      <div
+                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      >
+                        <img
+                          class="MuiAvatar-img-id"
+                          src="placeholder60x60.png"
+                        />
+                      </div>
+                      <div
+                        class="makeStyles-children-id"
+                      >
+                        Williams, Garcia and Walker (XS)
+                      </div>
                     </div>
-                    <div
-                      class="makeStyles-children-id"
-                    >
-                      Williams, Garcia and Walker (XS)
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
-                >
-                  1
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
-                >
-                  $79.71
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-                >
-                  $79.71
-                </td>
-              </tr>
-            </tbody>
-          </table>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
+                  >
+                    1
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                  >
+                    $79.71
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                  >
+                    $79.71
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
           <div
             class="MuiCardActions-root-id MuiCardActions-spacing-id"
           >
@@ -60510,10 +60842,10 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
   style="padding:24px"
 >
   <div
-    class="makeStyles-root-id"
+    class="Container-root-id"
   >
     <div
-      class="makeStyles-root-id makeStyles-header-id"
+      class="ExtendedPageHeader-root-id OrderDetailsPage-header-id"
     >
       <div
         class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -60521,7 +60853,7 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
         #9
       </div>
       <div
-        class="makeStyles-action-id"
+        class="ExtendedPageHeader-action-id"
       >
         <div
           class="makeStyles-root-id"
@@ -60555,7 +60887,7 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
       </div>
     </div>
     <div
-      class="makeStyles-date-id"
+      class="OrderDetailsPage-date-id"
     >
       <div
         class="MuiTypography-root-id MuiTypography-caption-id"
@@ -60598,90 +60930,94 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
           <hr
             class="makeStyles-hr-id"
           />
-          <table
-            class="MuiTable-root-id makeStyles-table-id"
+          <div
+            class="ResponsiveTable-root-id"
           >
-            <thead
-              class="MuiTableHead-root-id"
+            <table
+              class="MuiTable-root-id makeStyles-table-id"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
+              <thead
+                class="MuiTableHead-root-id"
               >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
-                  scope="col"
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
-                  <span
-                    class="makeStyles-colNameLabel-id"
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                    scope="col"
                   >
-                    Product
-                  </span>
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
-                  scope="col"
-                >
-                  Quantity
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
-                  scope="col"
-                >
-                  Price
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
-                  scope="col"
-                >
-                  Total
-                </th>
-              </tr>
-            </thead>
-            <tbody
-              class="MuiTableBody-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
+                    <span
+                      class="makeStyles-colNameLabel-id"
+                    >
+                      Product
+                    </span>
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
+                    scope="col"
+                  >
+                    Quantity
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
+                    scope="col"
+                  >
+                    Price
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
+                    scope="col"
+                  >
+                    Total
+                  </th>
+                </tr>
+              </thead>
+              <tbody
+                class="MuiTableBody-root-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                <tr
+                  class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
                 >
-                  <div
-                    class="makeStyles-content-id"
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      class="makeStyles-content-id"
                     >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder60x60.png"
-                      />
+                      <div
+                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      >
+                        <img
+                          class="MuiAvatar-img-id"
+                          src="placeholder60x60.png"
+                        />
+                      </div>
+                      <div
+                        class="makeStyles-children-id"
+                      >
+                        Watkins-Gonzalez (Soft)
+                      </div>
                     </div>
-                    <div
-                      class="makeStyles-children-id"
-                    >
-                      Watkins-Gonzalez (Soft)
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
-                >
-                  3
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
-                >
-                  $18.51
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-                >
-                  $55.53
-                </td>
-              </tr>
-            </tbody>
-          </table>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
+                  >
+                    3
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                  >
+                    $18.51
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                  >
+                    $55.53
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
           <div
             class="MuiCardActions-root-id MuiCardActions-spacing-id"
           >
@@ -60757,90 +61093,94 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
           <hr
             class="makeStyles-hr-id"
           />
-          <table
-            class="MuiTable-root-id makeStyles-table-id"
+          <div
+            class="ResponsiveTable-root-id"
           >
-            <thead
-              class="MuiTableHead-root-id"
+            <table
+              class="MuiTable-root-id makeStyles-table-id"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
+              <thead
+                class="MuiTableHead-root-id"
               >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
-                  scope="col"
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
-                  <span
-                    class="makeStyles-colNameLabel-id"
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                    scope="col"
                   >
-                    Product
-                  </span>
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
-                  scope="col"
-                >
-                  Quantity
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
-                  scope="col"
-                >
-                  Price
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
-                  scope="col"
-                >
-                  Total
-                </th>
-              </tr>
-            </thead>
-            <tbody
-              class="MuiTableBody-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
+                    <span
+                      class="makeStyles-colNameLabel-id"
+                    >
+                      Product
+                    </span>
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
+                    scope="col"
+                  >
+                    Quantity
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
+                    scope="col"
+                  >
+                    Price
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
+                    scope="col"
+                  >
+                    Total
+                  </th>
+                </tr>
+              </thead>
+              <tbody
+                class="MuiTableBody-root-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                <tr
+                  class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
                 >
-                  <div
-                    class="makeStyles-content-id"
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      class="makeStyles-content-id"
                     >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder60x60.png"
-                      />
+                      <div
+                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      >
+                        <img
+                          class="MuiAvatar-img-id"
+                          src="placeholder60x60.png"
+                        />
+                      </div>
+                      <div
+                        class="makeStyles-children-id"
+                      >
+                        Williams, Garcia and Walker (XS)
+                      </div>
                     </div>
-                    <div
-                      class="makeStyles-children-id"
-                    >
-                      Williams, Garcia and Walker (XS)
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
-                >
-                  1
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
-                >
-                  $79.71
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-                >
-                  $79.71
-                </td>
-              </tr>
-            </tbody>
-          </table>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
+                  >
+                    1
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                  >
+                    $79.71
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                  >
+                    $79.71
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
           <div
             class="MuiCardActions-root-id MuiCardActions-spacing-id"
           >
@@ -60916,90 +61256,94 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
           <hr
             class="makeStyles-hr-id"
           />
-          <table
-            class="MuiTable-root-id makeStyles-table-id"
+          <div
+            class="ResponsiveTable-root-id"
           >
-            <thead
-              class="MuiTableHead-root-id"
+            <table
+              class="MuiTable-root-id makeStyles-table-id"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
+              <thead
+                class="MuiTableHead-root-id"
               >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
-                  scope="col"
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
-                  <span
-                    class="makeStyles-colNameLabel-id"
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                    scope="col"
                   >
-                    Product
-                  </span>
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
-                  scope="col"
-                >
-                  Quantity
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
-                  scope="col"
-                >
-                  Price
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
-                  scope="col"
-                >
-                  Total
-                </th>
-              </tr>
-            </thead>
-            <tbody
-              class="MuiTableBody-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
+                    <span
+                      class="makeStyles-colNameLabel-id"
+                    >
+                      Product
+                    </span>
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
+                    scope="col"
+                  >
+                    Quantity
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
+                    scope="col"
+                  >
+                    Price
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
+                    scope="col"
+                  >
+                    Total
+                  </th>
+                </tr>
+              </thead>
+              <tbody
+                class="MuiTableBody-root-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                <tr
+                  class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
                 >
-                  <div
-                    class="makeStyles-content-id"
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      class="makeStyles-content-id"
                     >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder60x60.png"
-                      />
+                      <div
+                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      >
+                        <img
+                          class="MuiAvatar-img-id"
+                          src="placeholder60x60.png"
+                        />
+                      </div>
+                      <div
+                        class="makeStyles-children-id"
+                      >
+                        Williams, Garcia and Walker (XS)
+                      </div>
                     </div>
-                    <div
-                      class="makeStyles-children-id"
-                    >
-                      Williams, Garcia and Walker (XS)
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
-                >
-                  1
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
-                >
-                  $79.71
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-                >
-                  $79.71
-                </td>
-              </tr>
-            </tbody>
-          </table>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
+                  >
+                    1
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                  >
+                    $79.71
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                  >
+                    $79.71
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
           <div
             class="MuiCardActions-root-id MuiCardActions-spacing-id"
           >
@@ -61488,10 +61832,10 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
   style="padding:24px"
 >
   <div
-    class="makeStyles-root-id"
+    class="Container-root-id"
   >
     <div
-      class="makeStyles-root-id makeStyles-header-id"
+      class="ExtendedPageHeader-root-id OrderDetailsPage-header-id"
     >
       <div
         class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -61499,7 +61843,7 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
         #9
       </div>
       <div
-        class="makeStyles-action-id"
+        class="ExtendedPageHeader-action-id"
       >
         <div
           class="makeStyles-root-id"
@@ -61533,7 +61877,7 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
       </div>
     </div>
     <div
-      class="makeStyles-date-id"
+      class="OrderDetailsPage-date-id"
     >
       <div
         class="MuiTypography-root-id MuiTypography-caption-id"
@@ -61576,90 +61920,94 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
           <hr
             class="makeStyles-hr-id"
           />
-          <table
-            class="MuiTable-root-id makeStyles-table-id"
+          <div
+            class="ResponsiveTable-root-id"
           >
-            <thead
-              class="MuiTableHead-root-id"
+            <table
+              class="MuiTable-root-id makeStyles-table-id"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
+              <thead
+                class="MuiTableHead-root-id"
               >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
-                  scope="col"
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
-                  <span
-                    class="makeStyles-colNameLabel-id"
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                    scope="col"
                   >
-                    Product
-                  </span>
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
-                  scope="col"
-                >
-                  Quantity
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
-                  scope="col"
-                >
-                  Price
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
-                  scope="col"
-                >
-                  Total
-                </th>
-              </tr>
-            </thead>
-            <tbody
-              class="MuiTableBody-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
+                    <span
+                      class="makeStyles-colNameLabel-id"
+                    >
+                      Product
+                    </span>
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
+                    scope="col"
+                  >
+                    Quantity
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
+                    scope="col"
+                  >
+                    Price
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
+                    scope="col"
+                  >
+                    Total
+                  </th>
+                </tr>
+              </thead>
+              <tbody
+                class="MuiTableBody-root-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                <tr
+                  class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
                 >
-                  <div
-                    class="makeStyles-content-id"
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      class="makeStyles-content-id"
                     >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder60x60.png"
-                      />
+                      <div
+                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      >
+                        <img
+                          class="MuiAvatar-img-id"
+                          src="placeholder60x60.png"
+                        />
+                      </div>
+                      <div
+                        class="makeStyles-children-id"
+                      >
+                        Watkins-Gonzalez (Soft)
+                      </div>
                     </div>
-                    <div
-                      class="makeStyles-children-id"
-                    >
-                      Watkins-Gonzalez (Soft)
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
-                >
-                  3
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
-                >
-                  $18.51
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-                >
-                  $55.53
-                </td>
-              </tr>
-            </tbody>
-          </table>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
+                  >
+                    3
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                  >
+                    $18.51
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                  >
+                    $55.53
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
           <div
             class="MuiCardActions-root-id MuiCardActions-spacing-id"
           >
@@ -61735,90 +62083,94 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
           <hr
             class="makeStyles-hr-id"
           />
-          <table
-            class="MuiTable-root-id makeStyles-table-id"
+          <div
+            class="ResponsiveTable-root-id"
           >
-            <thead
-              class="MuiTableHead-root-id"
+            <table
+              class="MuiTable-root-id makeStyles-table-id"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
+              <thead
+                class="MuiTableHead-root-id"
               >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
-                  scope="col"
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
-                  <span
-                    class="makeStyles-colNameLabel-id"
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                    scope="col"
                   >
-                    Product
-                  </span>
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
-                  scope="col"
-                >
-                  Quantity
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
-                  scope="col"
-                >
-                  Price
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
-                  scope="col"
-                >
-                  Total
-                </th>
-              </tr>
-            </thead>
-            <tbody
-              class="MuiTableBody-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
+                    <span
+                      class="makeStyles-colNameLabel-id"
+                    >
+                      Product
+                    </span>
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
+                    scope="col"
+                  >
+                    Quantity
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
+                    scope="col"
+                  >
+                    Price
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
+                    scope="col"
+                  >
+                    Total
+                  </th>
+                </tr>
+              </thead>
+              <tbody
+                class="MuiTableBody-root-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                <tr
+                  class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
                 >
-                  <div
-                    class="makeStyles-content-id"
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      class="makeStyles-content-id"
                     >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder60x60.png"
-                      />
+                      <div
+                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      >
+                        <img
+                          class="MuiAvatar-img-id"
+                          src="placeholder60x60.png"
+                        />
+                      </div>
+                      <div
+                        class="makeStyles-children-id"
+                      >
+                        Williams, Garcia and Walker (XS)
+                      </div>
                     </div>
-                    <div
-                      class="makeStyles-children-id"
-                    >
-                      Williams, Garcia and Walker (XS)
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
-                >
-                  1
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
-                >
-                  $79.71
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-                >
-                  $79.71
-                </td>
-              </tr>
-            </tbody>
-          </table>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
+                  >
+                    1
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                  >
+                    $79.71
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                  >
+                    $79.71
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
           <div
             class="MuiCardActions-root-id MuiCardActions-spacing-id"
           >
@@ -61894,90 +62246,94 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
           <hr
             class="makeStyles-hr-id"
           />
-          <table
-            class="MuiTable-root-id makeStyles-table-id"
+          <div
+            class="ResponsiveTable-root-id"
           >
-            <thead
-              class="MuiTableHead-root-id"
+            <table
+              class="MuiTable-root-id makeStyles-table-id"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
+              <thead
+                class="MuiTableHead-root-id"
               >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
-                  scope="col"
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
-                  <span
-                    class="makeStyles-colNameLabel-id"
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                    scope="col"
                   >
-                    Product
-                  </span>
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
-                  scope="col"
-                >
-                  Quantity
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
-                  scope="col"
-                >
-                  Price
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
-                  scope="col"
-                >
-                  Total
-                </th>
-              </tr>
-            </thead>
-            <tbody
-              class="MuiTableBody-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
+                    <span
+                      class="makeStyles-colNameLabel-id"
+                    >
+                      Product
+                    </span>
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
+                    scope="col"
+                  >
+                    Quantity
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
+                    scope="col"
+                  >
+                    Price
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
+                    scope="col"
+                  >
+                    Total
+                  </th>
+                </tr>
+              </thead>
+              <tbody
+                class="MuiTableBody-root-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                <tr
+                  class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
                 >
-                  <div
-                    class="makeStyles-content-id"
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      class="makeStyles-content-id"
                     >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder60x60.png"
-                      />
+                      <div
+                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      >
+                        <img
+                          class="MuiAvatar-img-id"
+                          src="placeholder60x60.png"
+                        />
+                      </div>
+                      <div
+                        class="makeStyles-children-id"
+                      >
+                        Williams, Garcia and Walker (XS)
+                      </div>
                     </div>
-                    <div
-                      class="makeStyles-children-id"
-                    >
-                      Williams, Garcia and Walker (XS)
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
-                >
-                  1
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
-                >
-                  $79.71
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-                >
-                  $79.71
-                </td>
-              </tr>
-            </tbody>
-          </table>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
+                  >
+                    1
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                  >
+                    $79.71
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                  >
+                    $79.71
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
           <div
             class="MuiCardActions-root-id MuiCardActions-spacing-id"
           >
@@ -62466,10 +62822,10 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
   style="padding:24px"
 >
   <div
-    class="makeStyles-root-id"
+    class="Container-root-id"
   >
     <div
-      class="makeStyles-root-id makeStyles-header-id"
+      class="ExtendedPageHeader-root-id OrderDetailsPage-header-id"
     >
       <div
         class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -62477,7 +62833,7 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
         #9
       </div>
       <div
-        class="makeStyles-action-id"
+        class="ExtendedPageHeader-action-id"
       >
         <div
           class="makeStyles-root-id"
@@ -62511,7 +62867,7 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
       </div>
     </div>
     <div
-      class="makeStyles-date-id"
+      class="OrderDetailsPage-date-id"
     >
       <div
         class="MuiTypography-root-id MuiTypography-caption-id"
@@ -62554,90 +62910,94 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
           <hr
             class="makeStyles-hr-id"
           />
-          <table
-            class="MuiTable-root-id makeStyles-table-id"
+          <div
+            class="ResponsiveTable-root-id"
           >
-            <thead
-              class="MuiTableHead-root-id"
+            <table
+              class="MuiTable-root-id makeStyles-table-id"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
+              <thead
+                class="MuiTableHead-root-id"
               >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
-                  scope="col"
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
-                  <span
-                    class="makeStyles-colNameLabel-id"
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                    scope="col"
                   >
-                    Product
-                  </span>
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
-                  scope="col"
-                >
-                  Quantity
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
-                  scope="col"
-                >
-                  Price
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
-                  scope="col"
-                >
-                  Total
-                </th>
-              </tr>
-            </thead>
-            <tbody
-              class="MuiTableBody-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
+                    <span
+                      class="makeStyles-colNameLabel-id"
+                    >
+                      Product
+                    </span>
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
+                    scope="col"
+                  >
+                    Quantity
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
+                    scope="col"
+                  >
+                    Price
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
+                    scope="col"
+                  >
+                    Total
+                  </th>
+                </tr>
+              </thead>
+              <tbody
+                class="MuiTableBody-root-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                <tr
+                  class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
                 >
-                  <div
-                    class="makeStyles-content-id"
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      class="makeStyles-content-id"
                     >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder60x60.png"
-                      />
+                      <div
+                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      >
+                        <img
+                          class="MuiAvatar-img-id"
+                          src="placeholder60x60.png"
+                        />
+                      </div>
+                      <div
+                        class="makeStyles-children-id"
+                      >
+                        Watkins-Gonzalez (Soft)
+                      </div>
                     </div>
-                    <div
-                      class="makeStyles-children-id"
-                    >
-                      Watkins-Gonzalez (Soft)
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
-                >
-                  3
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
-                >
-                  $18.51
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-                >
-                  $55.53
-                </td>
-              </tr>
-            </tbody>
-          </table>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
+                  >
+                    3
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                  >
+                    $18.51
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                  >
+                    $55.53
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
           <div
             class="MuiCardActions-root-id MuiCardActions-spacing-id"
           >
@@ -62713,90 +63073,94 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
           <hr
             class="makeStyles-hr-id"
           />
-          <table
-            class="MuiTable-root-id makeStyles-table-id"
+          <div
+            class="ResponsiveTable-root-id"
           >
-            <thead
-              class="MuiTableHead-root-id"
+            <table
+              class="MuiTable-root-id makeStyles-table-id"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
+              <thead
+                class="MuiTableHead-root-id"
               >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
-                  scope="col"
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
-                  <span
-                    class="makeStyles-colNameLabel-id"
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                    scope="col"
                   >
-                    Product
-                  </span>
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
-                  scope="col"
-                >
-                  Quantity
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
-                  scope="col"
-                >
-                  Price
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
-                  scope="col"
-                >
-                  Total
-                </th>
-              </tr>
-            </thead>
-            <tbody
-              class="MuiTableBody-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
+                    <span
+                      class="makeStyles-colNameLabel-id"
+                    >
+                      Product
+                    </span>
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
+                    scope="col"
+                  >
+                    Quantity
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
+                    scope="col"
+                  >
+                    Price
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
+                    scope="col"
+                  >
+                    Total
+                  </th>
+                </tr>
+              </thead>
+              <tbody
+                class="MuiTableBody-root-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                <tr
+                  class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
                 >
-                  <div
-                    class="makeStyles-content-id"
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      class="makeStyles-content-id"
                     >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder60x60.png"
-                      />
+                      <div
+                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      >
+                        <img
+                          class="MuiAvatar-img-id"
+                          src="placeholder60x60.png"
+                        />
+                      </div>
+                      <div
+                        class="makeStyles-children-id"
+                      >
+                        Williams, Garcia and Walker (XS)
+                      </div>
                     </div>
-                    <div
-                      class="makeStyles-children-id"
-                    >
-                      Williams, Garcia and Walker (XS)
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
-                >
-                  1
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
-                >
-                  $79.71
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-                >
-                  $79.71
-                </td>
-              </tr>
-            </tbody>
-          </table>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
+                  >
+                    1
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                  >
+                    $79.71
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                  >
+                    $79.71
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
           <div
             class="MuiCardActions-root-id MuiCardActions-spacing-id"
           >
@@ -62872,90 +63236,94 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
           <hr
             class="makeStyles-hr-id"
           />
-          <table
-            class="MuiTable-root-id makeStyles-table-id"
+          <div
+            class="ResponsiveTable-root-id"
           >
-            <thead
-              class="MuiTableHead-root-id"
+            <table
+              class="MuiTable-root-id makeStyles-table-id"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
+              <thead
+                class="MuiTableHead-root-id"
               >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
-                  scope="col"
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
-                  <span
-                    class="makeStyles-colNameLabel-id"
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                    scope="col"
                   >
-                    Product
-                  </span>
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
-                  scope="col"
-                >
-                  Quantity
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
-                  scope="col"
-                >
-                  Price
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
-                  scope="col"
-                >
-                  Total
-                </th>
-              </tr>
-            </thead>
-            <tbody
-              class="MuiTableBody-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
+                    <span
+                      class="makeStyles-colNameLabel-id"
+                    >
+                      Product
+                    </span>
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
+                    scope="col"
+                  >
+                    Quantity
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
+                    scope="col"
+                  >
+                    Price
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
+                    scope="col"
+                  >
+                    Total
+                  </th>
+                </tr>
+              </thead>
+              <tbody
+                class="MuiTableBody-root-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                <tr
+                  class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
                 >
-                  <div
-                    class="makeStyles-content-id"
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      class="makeStyles-content-id"
                     >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder60x60.png"
-                      />
+                      <div
+                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      >
+                        <img
+                          class="MuiAvatar-img-id"
+                          src="placeholder60x60.png"
+                        />
+                      </div>
+                      <div
+                        class="makeStyles-children-id"
+                      >
+                        Williams, Garcia and Walker (XS)
+                      </div>
                     </div>
-                    <div
-                      class="makeStyles-children-id"
-                    >
-                      Williams, Garcia and Walker (XS)
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
-                >
-                  1
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
-                >
-                  $79.71
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-                >
-                  $79.71
-                </td>
-              </tr>
-            </tbody>
-          </table>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
+                  >
+                    1
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                  >
+                    $79.71
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                  >
+                    $79.71
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
           <div
             class="MuiCardActions-root-id MuiCardActions-spacing-id"
           >
@@ -63444,10 +63812,10 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
   style="padding:24px"
 >
   <div
-    class="makeStyles-root-id"
+    class="Container-root-id"
   >
     <div
-      class="makeStyles-root-id makeStyles-header-id"
+      class="ExtendedPageHeader-root-id OrderDetailsPage-header-id"
     >
       <div
         class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -63455,7 +63823,7 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
         #9
       </div>
       <div
-        class="makeStyles-action-id"
+        class="ExtendedPageHeader-action-id"
       >
         <div
           class="makeStyles-root-id"
@@ -63489,7 +63857,7 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
       </div>
     </div>
     <div
-      class="makeStyles-date-id"
+      class="OrderDetailsPage-date-id"
     >
       <div
         class="MuiTypography-root-id MuiTypography-caption-id"
@@ -63532,90 +63900,94 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
           <hr
             class="makeStyles-hr-id"
           />
-          <table
-            class="MuiTable-root-id makeStyles-table-id"
+          <div
+            class="ResponsiveTable-root-id"
           >
-            <thead
-              class="MuiTableHead-root-id"
+            <table
+              class="MuiTable-root-id makeStyles-table-id"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
+              <thead
+                class="MuiTableHead-root-id"
               >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
-                  scope="col"
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
-                  <span
-                    class="makeStyles-colNameLabel-id"
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                    scope="col"
                   >
-                    Product
-                  </span>
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
-                  scope="col"
-                >
-                  Quantity
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
-                  scope="col"
-                >
-                  Price
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
-                  scope="col"
-                >
-                  Total
-                </th>
-              </tr>
-            </thead>
-            <tbody
-              class="MuiTableBody-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
+                    <span
+                      class="makeStyles-colNameLabel-id"
+                    >
+                      Product
+                    </span>
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
+                    scope="col"
+                  >
+                    Quantity
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
+                    scope="col"
+                  >
+                    Price
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
+                    scope="col"
+                  >
+                    Total
+                  </th>
+                </tr>
+              </thead>
+              <tbody
+                class="MuiTableBody-root-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                <tr
+                  class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
                 >
-                  <div
-                    class="makeStyles-content-id"
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      class="makeStyles-content-id"
                     >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder60x60.png"
-                      />
+                      <div
+                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      >
+                        <img
+                          class="MuiAvatar-img-id"
+                          src="placeholder60x60.png"
+                        />
+                      </div>
+                      <div
+                        class="makeStyles-children-id"
+                      >
+                        Watkins-Gonzalez (Soft)
+                      </div>
                     </div>
-                    <div
-                      class="makeStyles-children-id"
-                    >
-                      Watkins-Gonzalez (Soft)
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
-                >
-                  3
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
-                >
-                  $18.51
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-                >
-                  $55.53
-                </td>
-              </tr>
-            </tbody>
-          </table>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
+                  >
+                    3
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                  >
+                    $18.51
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                  >
+                    $55.53
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
           <div
             class="MuiCardActions-root-id MuiCardActions-spacing-id"
           >
@@ -63691,90 +64063,94 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
           <hr
             class="makeStyles-hr-id"
           />
-          <table
-            class="MuiTable-root-id makeStyles-table-id"
+          <div
+            class="ResponsiveTable-root-id"
           >
-            <thead
-              class="MuiTableHead-root-id"
+            <table
+              class="MuiTable-root-id makeStyles-table-id"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
+              <thead
+                class="MuiTableHead-root-id"
               >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
-                  scope="col"
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
-                  <span
-                    class="makeStyles-colNameLabel-id"
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                    scope="col"
                   >
-                    Product
-                  </span>
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
-                  scope="col"
-                >
-                  Quantity
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
-                  scope="col"
-                >
-                  Price
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
-                  scope="col"
-                >
-                  Total
-                </th>
-              </tr>
-            </thead>
-            <tbody
-              class="MuiTableBody-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
+                    <span
+                      class="makeStyles-colNameLabel-id"
+                    >
+                      Product
+                    </span>
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
+                    scope="col"
+                  >
+                    Quantity
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
+                    scope="col"
+                  >
+                    Price
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
+                    scope="col"
+                  >
+                    Total
+                  </th>
+                </tr>
+              </thead>
+              <tbody
+                class="MuiTableBody-root-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                <tr
+                  class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
                 >
-                  <div
-                    class="makeStyles-content-id"
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      class="makeStyles-content-id"
                     >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder60x60.png"
-                      />
+                      <div
+                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      >
+                        <img
+                          class="MuiAvatar-img-id"
+                          src="placeholder60x60.png"
+                        />
+                      </div>
+                      <div
+                        class="makeStyles-children-id"
+                      >
+                        Williams, Garcia and Walker (XS)
+                      </div>
                     </div>
-                    <div
-                      class="makeStyles-children-id"
-                    >
-                      Williams, Garcia and Walker (XS)
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
-                >
-                  1
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
-                >
-                  $79.71
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-                >
-                  $79.71
-                </td>
-              </tr>
-            </tbody>
-          </table>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
+                  >
+                    1
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                  >
+                    $79.71
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                  >
+                    $79.71
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
           <div
             class="MuiCardActions-root-id MuiCardActions-spacing-id"
           >
@@ -63850,90 +64226,94 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
           <hr
             class="makeStyles-hr-id"
           />
-          <table
-            class="MuiTable-root-id makeStyles-table-id"
+          <div
+            class="ResponsiveTable-root-id"
           >
-            <thead
-              class="MuiTableHead-root-id"
+            <table
+              class="MuiTable-root-id makeStyles-table-id"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
+              <thead
+                class="MuiTableHead-root-id"
               >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
-                  scope="col"
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
-                  <span
-                    class="makeStyles-colNameLabel-id"
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                    scope="col"
                   >
-                    Product
-                  </span>
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
-                  scope="col"
-                >
-                  Quantity
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
-                  scope="col"
-                >
-                  Price
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
-                  scope="col"
-                >
-                  Total
-                </th>
-              </tr>
-            </thead>
-            <tbody
-              class="MuiTableBody-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
+                    <span
+                      class="makeStyles-colNameLabel-id"
+                    >
+                      Product
+                    </span>
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
+                    scope="col"
+                  >
+                    Quantity
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
+                    scope="col"
+                  >
+                    Price
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
+                    scope="col"
+                  >
+                    Total
+                  </th>
+                </tr>
+              </thead>
+              <tbody
+                class="MuiTableBody-root-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                <tr
+                  class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
                 >
-                  <div
-                    class="makeStyles-content-id"
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      class="makeStyles-content-id"
                     >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder60x60.png"
-                      />
+                      <div
+                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      >
+                        <img
+                          class="MuiAvatar-img-id"
+                          src="placeholder60x60.png"
+                        />
+                      </div>
+                      <div
+                        class="makeStyles-children-id"
+                      >
+                        Williams, Garcia and Walker (XS)
+                      </div>
                     </div>
-                    <div
-                      class="makeStyles-children-id"
-                    >
-                      Williams, Garcia and Walker (XS)
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
-                >
-                  1
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
-                >
-                  $79.71
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-                >
-                  $79.71
-                </td>
-              </tr>
-            </tbody>
-          </table>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
+                  >
+                    1
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                  >
+                    $79.71
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                  >
+                    $79.71
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
           <div
             class="MuiCardActions-root-id MuiCardActions-spacing-id"
           >
@@ -64422,10 +64802,10 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
   style="padding:24px"
 >
   <div
-    class="makeStyles-root-id"
+    class="Container-root-id"
   >
     <div
-      class="makeStyles-root-id makeStyles-header-id"
+      class="ExtendedPageHeader-root-id OrderDetailsPage-header-id"
     >
       <div
         class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -64433,7 +64813,7 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
         #9
       </div>
       <div
-        class="makeStyles-action-id"
+        class="ExtendedPageHeader-action-id"
       >
         <div
           class="makeStyles-root-id"
@@ -64467,7 +64847,7 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
       </div>
     </div>
     <div
-      class="makeStyles-date-id"
+      class="OrderDetailsPage-date-id"
     >
       <div
         class="MuiTypography-root-id MuiTypography-caption-id"
@@ -64510,90 +64890,94 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
           <hr
             class="makeStyles-hr-id"
           />
-          <table
-            class="MuiTable-root-id makeStyles-table-id"
+          <div
+            class="ResponsiveTable-root-id"
           >
-            <thead
-              class="MuiTableHead-root-id"
+            <table
+              class="MuiTable-root-id makeStyles-table-id"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
+              <thead
+                class="MuiTableHead-root-id"
               >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
-                  scope="col"
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
-                  <span
-                    class="makeStyles-colNameLabel-id"
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                    scope="col"
                   >
-                    Product
-                  </span>
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
-                  scope="col"
-                >
-                  Quantity
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
-                  scope="col"
-                >
-                  Price
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
-                  scope="col"
-                >
-                  Total
-                </th>
-              </tr>
-            </thead>
-            <tbody
-              class="MuiTableBody-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
+                    <span
+                      class="makeStyles-colNameLabel-id"
+                    >
+                      Product
+                    </span>
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
+                    scope="col"
+                  >
+                    Quantity
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
+                    scope="col"
+                  >
+                    Price
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
+                    scope="col"
+                  >
+                    Total
+                  </th>
+                </tr>
+              </thead>
+              <tbody
+                class="MuiTableBody-root-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                <tr
+                  class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
                 >
-                  <div
-                    class="makeStyles-content-id"
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      class="makeStyles-content-id"
                     >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder60x60.png"
-                      />
+                      <div
+                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      >
+                        <img
+                          class="MuiAvatar-img-id"
+                          src="placeholder60x60.png"
+                        />
+                      </div>
+                      <div
+                        class="makeStyles-children-id"
+                      >
+                        Watkins-Gonzalez (Soft)
+                      </div>
                     </div>
-                    <div
-                      class="makeStyles-children-id"
-                    >
-                      Watkins-Gonzalez (Soft)
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
-                >
-                  3
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
-                >
-                  $18.51
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-                >
-                  $55.53
-                </td>
-              </tr>
-            </tbody>
-          </table>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
+                  >
+                    3
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                  >
+                    $18.51
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                  >
+                    $55.53
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
           <div
             class="MuiCardActions-root-id MuiCardActions-spacing-id"
           >
@@ -64669,90 +65053,94 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
           <hr
             class="makeStyles-hr-id"
           />
-          <table
-            class="MuiTable-root-id makeStyles-table-id"
+          <div
+            class="ResponsiveTable-root-id"
           >
-            <thead
-              class="MuiTableHead-root-id"
+            <table
+              class="MuiTable-root-id makeStyles-table-id"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
+              <thead
+                class="MuiTableHead-root-id"
               >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
-                  scope="col"
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
-                  <span
-                    class="makeStyles-colNameLabel-id"
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                    scope="col"
                   >
-                    Product
-                  </span>
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
-                  scope="col"
-                >
-                  Quantity
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
-                  scope="col"
-                >
-                  Price
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
-                  scope="col"
-                >
-                  Total
-                </th>
-              </tr>
-            </thead>
-            <tbody
-              class="MuiTableBody-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
+                    <span
+                      class="makeStyles-colNameLabel-id"
+                    >
+                      Product
+                    </span>
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
+                    scope="col"
+                  >
+                    Quantity
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
+                    scope="col"
+                  >
+                    Price
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
+                    scope="col"
+                  >
+                    Total
+                  </th>
+                </tr>
+              </thead>
+              <tbody
+                class="MuiTableBody-root-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                <tr
+                  class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
                 >
-                  <div
-                    class="makeStyles-content-id"
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      class="makeStyles-content-id"
                     >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder60x60.png"
-                      />
+                      <div
+                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      >
+                        <img
+                          class="MuiAvatar-img-id"
+                          src="placeholder60x60.png"
+                        />
+                      </div>
+                      <div
+                        class="makeStyles-children-id"
+                      >
+                        Williams, Garcia and Walker (XS)
+                      </div>
                     </div>
-                    <div
-                      class="makeStyles-children-id"
-                    >
-                      Williams, Garcia and Walker (XS)
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
-                >
-                  1
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
-                >
-                  $79.71
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-                >
-                  $79.71
-                </td>
-              </tr>
-            </tbody>
-          </table>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
+                  >
+                    1
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                  >
+                    $79.71
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                  >
+                    $79.71
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
           <div
             class="MuiCardActions-root-id MuiCardActions-spacing-id"
           >
@@ -64828,90 +65216,94 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
           <hr
             class="makeStyles-hr-id"
           />
-          <table
-            class="MuiTable-root-id makeStyles-table-id"
+          <div
+            class="ResponsiveTable-root-id"
           >
-            <thead
-              class="MuiTableHead-root-id"
+            <table
+              class="MuiTable-root-id makeStyles-table-id"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
+              <thead
+                class="MuiTableHead-root-id"
               >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
-                  scope="col"
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
-                  <span
-                    class="makeStyles-colNameLabel-id"
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                    scope="col"
                   >
-                    Product
-                  </span>
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
-                  scope="col"
-                >
-                  Quantity
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
-                  scope="col"
-                >
-                  Price
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
-                  scope="col"
-                >
-                  Total
-                </th>
-              </tr>
-            </thead>
-            <tbody
-              class="MuiTableBody-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
+                    <span
+                      class="makeStyles-colNameLabel-id"
+                    >
+                      Product
+                    </span>
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
+                    scope="col"
+                  >
+                    Quantity
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
+                    scope="col"
+                  >
+                    Price
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
+                    scope="col"
+                  >
+                    Total
+                  </th>
+                </tr>
+              </thead>
+              <tbody
+                class="MuiTableBody-root-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                <tr
+                  class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
                 >
-                  <div
-                    class="makeStyles-content-id"
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      class="makeStyles-content-id"
                     >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder60x60.png"
-                      />
+                      <div
+                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      >
+                        <img
+                          class="MuiAvatar-img-id"
+                          src="placeholder60x60.png"
+                        />
+                      </div>
+                      <div
+                        class="makeStyles-children-id"
+                      >
+                        Williams, Garcia and Walker (XS)
+                      </div>
                     </div>
-                    <div
-                      class="makeStyles-children-id"
-                    >
-                      Williams, Garcia and Walker (XS)
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
-                >
-                  1
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
-                >
-                  $79.71
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-                >
-                  $79.71
-                </td>
-              </tr>
-            </tbody>
-          </table>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
+                  >
+                    1
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                  >
+                    $79.71
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                  >
+                    $79.71
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
           <div
             class="MuiCardActions-root-id MuiCardActions-spacing-id"
           >
@@ -65400,10 +65792,10 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
   style="padding:24px"
 >
   <div
-    class="makeStyles-root-id"
+    class="Container-root-id"
   >
     <div
-      class="makeStyles-root-id makeStyles-header-id"
+      class="ExtendedPageHeader-root-id OrderDetailsPage-header-id"
     >
       <div
         class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -65411,7 +65803,7 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
         #9
       </div>
       <div
-        class="makeStyles-action-id"
+        class="ExtendedPageHeader-action-id"
       >
         <div
           class="makeStyles-root-id"
@@ -65445,7 +65837,7 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
       </div>
     </div>
     <div
-      class="makeStyles-date-id"
+      class="OrderDetailsPage-date-id"
     >
       <div
         class="MuiTypography-root-id MuiTypography-caption-id"
@@ -65488,90 +65880,94 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
           <hr
             class="makeStyles-hr-id"
           />
-          <table
-            class="MuiTable-root-id makeStyles-table-id"
+          <div
+            class="ResponsiveTable-root-id"
           >
-            <thead
-              class="MuiTableHead-root-id"
+            <table
+              class="MuiTable-root-id makeStyles-table-id"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
+              <thead
+                class="MuiTableHead-root-id"
               >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
-                  scope="col"
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
-                  <span
-                    class="makeStyles-colNameLabel-id"
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                    scope="col"
                   >
-                    Product
-                  </span>
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
-                  scope="col"
-                >
-                  Quantity
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
-                  scope="col"
-                >
-                  Price
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
-                  scope="col"
-                >
-                  Total
-                </th>
-              </tr>
-            </thead>
-            <tbody
-              class="MuiTableBody-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
+                    <span
+                      class="makeStyles-colNameLabel-id"
+                    >
+                      Product
+                    </span>
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
+                    scope="col"
+                  >
+                    Quantity
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
+                    scope="col"
+                  >
+                    Price
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
+                    scope="col"
+                  >
+                    Total
+                  </th>
+                </tr>
+              </thead>
+              <tbody
+                class="MuiTableBody-root-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                <tr
+                  class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
                 >
-                  <div
-                    class="makeStyles-content-id"
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      class="makeStyles-content-id"
                     >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder60x60.png"
-                      />
+                      <div
+                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      >
+                        <img
+                          class="MuiAvatar-img-id"
+                          src="placeholder60x60.png"
+                        />
+                      </div>
+                      <div
+                        class="makeStyles-children-id"
+                      >
+                        Watkins-Gonzalez (Soft)
+                      </div>
                     </div>
-                    <div
-                      class="makeStyles-children-id"
-                    >
-                      Watkins-Gonzalez (Soft)
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
-                >
-                  3
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
-                >
-                  $18.51
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-                >
-                  $55.53
-                </td>
-              </tr>
-            </tbody>
-          </table>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
+                  >
+                    3
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                  >
+                    $18.51
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                  >
+                    $55.53
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
           <div
             class="MuiCardActions-root-id MuiCardActions-spacing-id"
           >
@@ -65647,90 +66043,94 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
           <hr
             class="makeStyles-hr-id"
           />
-          <table
-            class="MuiTable-root-id makeStyles-table-id"
+          <div
+            class="ResponsiveTable-root-id"
           >
-            <thead
-              class="MuiTableHead-root-id"
+            <table
+              class="MuiTable-root-id makeStyles-table-id"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
+              <thead
+                class="MuiTableHead-root-id"
               >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
-                  scope="col"
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
-                  <span
-                    class="makeStyles-colNameLabel-id"
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                    scope="col"
                   >
-                    Product
-                  </span>
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
-                  scope="col"
-                >
-                  Quantity
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
-                  scope="col"
-                >
-                  Price
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
-                  scope="col"
-                >
-                  Total
-                </th>
-              </tr>
-            </thead>
-            <tbody
-              class="MuiTableBody-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
+                    <span
+                      class="makeStyles-colNameLabel-id"
+                    >
+                      Product
+                    </span>
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
+                    scope="col"
+                  >
+                    Quantity
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
+                    scope="col"
+                  >
+                    Price
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
+                    scope="col"
+                  >
+                    Total
+                  </th>
+                </tr>
+              </thead>
+              <tbody
+                class="MuiTableBody-root-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                <tr
+                  class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
                 >
-                  <div
-                    class="makeStyles-content-id"
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      class="makeStyles-content-id"
                     >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder60x60.png"
-                      />
+                      <div
+                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      >
+                        <img
+                          class="MuiAvatar-img-id"
+                          src="placeholder60x60.png"
+                        />
+                      </div>
+                      <div
+                        class="makeStyles-children-id"
+                      >
+                        Williams, Garcia and Walker (XS)
+                      </div>
                     </div>
-                    <div
-                      class="makeStyles-children-id"
-                    >
-                      Williams, Garcia and Walker (XS)
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
-                >
-                  1
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
-                >
-                  $79.71
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-                >
-                  $79.71
-                </td>
-              </tr>
-            </tbody>
-          </table>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
+                  >
+                    1
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                  >
+                    $79.71
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                  >
+                    $79.71
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
           <div
             class="MuiCardActions-root-id MuiCardActions-spacing-id"
           >
@@ -65806,90 +66206,94 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
           <hr
             class="makeStyles-hr-id"
           />
-          <table
-            class="MuiTable-root-id makeStyles-table-id"
+          <div
+            class="ResponsiveTable-root-id"
           >
-            <thead
-              class="MuiTableHead-root-id"
+            <table
+              class="MuiTable-root-id makeStyles-table-id"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
+              <thead
+                class="MuiTableHead-root-id"
               >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
-                  scope="col"
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
-                  <span
-                    class="makeStyles-colNameLabel-id"
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                    scope="col"
                   >
-                    Product
-                  </span>
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
-                  scope="col"
-                >
-                  Quantity
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
-                  scope="col"
-                >
-                  Price
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
-                  scope="col"
-                >
-                  Total
-                </th>
-              </tr>
-            </thead>
-            <tbody
-              class="MuiTableBody-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
+                    <span
+                      class="makeStyles-colNameLabel-id"
+                    >
+                      Product
+                    </span>
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
+                    scope="col"
+                  >
+                    Quantity
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
+                    scope="col"
+                  >
+                    Price
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
+                    scope="col"
+                  >
+                    Total
+                  </th>
+                </tr>
+              </thead>
+              <tbody
+                class="MuiTableBody-root-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                <tr
+                  class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
                 >
-                  <div
-                    class="makeStyles-content-id"
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      class="makeStyles-content-id"
                     >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder60x60.png"
-                      />
+                      <div
+                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      >
+                        <img
+                          class="MuiAvatar-img-id"
+                          src="placeholder60x60.png"
+                        />
+                      </div>
+                      <div
+                        class="makeStyles-children-id"
+                      >
+                        Williams, Garcia and Walker (XS)
+                      </div>
                     </div>
-                    <div
-                      class="makeStyles-children-id"
-                    >
-                      Williams, Garcia and Walker (XS)
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
-                >
-                  1
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
-                >
-                  $79.71
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-                >
-                  $79.71
-                </td>
-              </tr>
-            </tbody>
-          </table>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
+                  >
+                    1
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                  >
+                    $79.71
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                  >
+                    $79.71
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
           <div
             class="MuiCardActions-root-id MuiCardActions-spacing-id"
           >
@@ -66378,10 +66782,10 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
   style="padding:24px"
 >
   <div
-    class="makeStyles-root-id"
+    class="Container-root-id"
   >
     <div
-      class="makeStyles-root-id makeStyles-header-id"
+      class="ExtendedPageHeader-root-id OrderDetailsPage-header-id"
     >
       <div
         class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -66389,7 +66793,7 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
         #9
       </div>
       <div
-        class="makeStyles-action-id"
+        class="ExtendedPageHeader-action-id"
       >
         <div
           class="makeStyles-root-id"
@@ -66423,7 +66827,7 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
       </div>
     </div>
     <div
-      class="makeStyles-date-id"
+      class="OrderDetailsPage-date-id"
     >
       <div
         class="MuiTypography-root-id MuiTypography-caption-id"
@@ -66466,90 +66870,94 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
           <hr
             class="makeStyles-hr-id"
           />
-          <table
-            class="MuiTable-root-id makeStyles-table-id"
+          <div
+            class="ResponsiveTable-root-id"
           >
-            <thead
-              class="MuiTableHead-root-id"
+            <table
+              class="MuiTable-root-id makeStyles-table-id"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
+              <thead
+                class="MuiTableHead-root-id"
               >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
-                  scope="col"
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
-                  <span
-                    class="makeStyles-colNameLabel-id"
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                    scope="col"
                   >
-                    Product
-                  </span>
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
-                  scope="col"
-                >
-                  Quantity
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
-                  scope="col"
-                >
-                  Price
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
-                  scope="col"
-                >
-                  Total
-                </th>
-              </tr>
-            </thead>
-            <tbody
-              class="MuiTableBody-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
+                    <span
+                      class="makeStyles-colNameLabel-id"
+                    >
+                      Product
+                    </span>
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
+                    scope="col"
+                  >
+                    Quantity
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
+                    scope="col"
+                  >
+                    Price
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
+                    scope="col"
+                  >
+                    Total
+                  </th>
+                </tr>
+              </thead>
+              <tbody
+                class="MuiTableBody-root-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                <tr
+                  class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
                 >
-                  <div
-                    class="makeStyles-content-id"
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      class="makeStyles-content-id"
                     >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder60x60.png"
-                      />
+                      <div
+                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      >
+                        <img
+                          class="MuiAvatar-img-id"
+                          src="placeholder60x60.png"
+                        />
+                      </div>
+                      <div
+                        class="makeStyles-children-id"
+                      >
+                        Watkins-Gonzalez (Soft)
+                      </div>
                     </div>
-                    <div
-                      class="makeStyles-children-id"
-                    >
-                      Watkins-Gonzalez (Soft)
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
-                >
-                  3
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
-                >
-                  $18.51
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-                >
-                  $55.53
-                </td>
-              </tr>
-            </tbody>
-          </table>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
+                  >
+                    3
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                  >
+                    $18.51
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                  >
+                    $55.53
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
           <div
             class="MuiCardActions-root-id MuiCardActions-spacing-id"
           >
@@ -66625,90 +67033,94 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
           <hr
             class="makeStyles-hr-id"
           />
-          <table
-            class="MuiTable-root-id makeStyles-table-id"
+          <div
+            class="ResponsiveTable-root-id"
           >
-            <thead
-              class="MuiTableHead-root-id"
+            <table
+              class="MuiTable-root-id makeStyles-table-id"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
+              <thead
+                class="MuiTableHead-root-id"
               >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
-                  scope="col"
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
-                  <span
-                    class="makeStyles-colNameLabel-id"
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                    scope="col"
                   >
-                    Product
-                  </span>
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
-                  scope="col"
-                >
-                  Quantity
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
-                  scope="col"
-                >
-                  Price
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
-                  scope="col"
-                >
-                  Total
-                </th>
-              </tr>
-            </thead>
-            <tbody
-              class="MuiTableBody-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
+                    <span
+                      class="makeStyles-colNameLabel-id"
+                    >
+                      Product
+                    </span>
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
+                    scope="col"
+                  >
+                    Quantity
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
+                    scope="col"
+                  >
+                    Price
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
+                    scope="col"
+                  >
+                    Total
+                  </th>
+                </tr>
+              </thead>
+              <tbody
+                class="MuiTableBody-root-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                <tr
+                  class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
                 >
-                  <div
-                    class="makeStyles-content-id"
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      class="makeStyles-content-id"
                     >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder60x60.png"
-                      />
+                      <div
+                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      >
+                        <img
+                          class="MuiAvatar-img-id"
+                          src="placeholder60x60.png"
+                        />
+                      </div>
+                      <div
+                        class="makeStyles-children-id"
+                      >
+                        Williams, Garcia and Walker (XS)
+                      </div>
                     </div>
-                    <div
-                      class="makeStyles-children-id"
-                    >
-                      Williams, Garcia and Walker (XS)
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
-                >
-                  1
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
-                >
-                  $79.71
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-                >
-                  $79.71
-                </td>
-              </tr>
-            </tbody>
-          </table>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
+                  >
+                    1
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                  >
+                    $79.71
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                  >
+                    $79.71
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
           <div
             class="MuiCardActions-root-id MuiCardActions-spacing-id"
           >
@@ -66784,90 +67196,94 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
           <hr
             class="makeStyles-hr-id"
           />
-          <table
-            class="MuiTable-root-id makeStyles-table-id"
+          <div
+            class="ResponsiveTable-root-id"
           >
-            <thead
-              class="MuiTableHead-root-id"
+            <table
+              class="MuiTable-root-id makeStyles-table-id"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
+              <thead
+                class="MuiTableHead-root-id"
               >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
-                  scope="col"
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
-                  <span
-                    class="makeStyles-colNameLabel-id"
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                    scope="col"
                   >
-                    Product
-                  </span>
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
-                  scope="col"
-                >
-                  Quantity
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
-                  scope="col"
-                >
-                  Price
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
-                  scope="col"
-                >
-                  Total
-                </th>
-              </tr>
-            </thead>
-            <tbody
-              class="MuiTableBody-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
+                    <span
+                      class="makeStyles-colNameLabel-id"
+                    >
+                      Product
+                    </span>
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
+                    scope="col"
+                  >
+                    Quantity
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
+                    scope="col"
+                  >
+                    Price
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
+                    scope="col"
+                  >
+                    Total
+                  </th>
+                </tr>
+              </thead>
+              <tbody
+                class="MuiTableBody-root-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                <tr
+                  class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
                 >
-                  <div
-                    class="makeStyles-content-id"
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      class="makeStyles-content-id"
                     >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder60x60.png"
-                      />
+                      <div
+                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      >
+                        <img
+                          class="MuiAvatar-img-id"
+                          src="placeholder60x60.png"
+                        />
+                      </div>
+                      <div
+                        class="makeStyles-children-id"
+                      >
+                        Williams, Garcia and Walker (XS)
+                      </div>
                     </div>
-                    <div
-                      class="makeStyles-children-id"
-                    >
-                      Williams, Garcia and Walker (XS)
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
-                >
-                  1
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
-                >
-                  $79.71
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-                >
-                  $79.71
-                </td>
-              </tr>
-            </tbody>
-          </table>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
+                  >
+                    1
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                  >
+                    $79.71
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                  >
+                    $79.71
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
           <div
             class="MuiCardActions-root-id MuiCardActions-spacing-id"
           >
@@ -67356,10 +67772,10 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
   style="padding:24px"
 >
   <div
-    class="makeStyles-root-id"
+    class="Container-root-id"
   >
     <div
-      class="makeStyles-root-id makeStyles-header-id"
+      class="ExtendedPageHeader-root-id OrderDetailsPage-header-id"
     >
       <div
         class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -67367,7 +67783,7 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
         #9
       </div>
       <div
-        class="makeStyles-action-id"
+        class="ExtendedPageHeader-action-id"
       >
         <div
           class="makeStyles-root-id"
@@ -67401,7 +67817,7 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
       </div>
     </div>
     <div
-      class="makeStyles-date-id"
+      class="OrderDetailsPage-date-id"
     >
       <div
         class="MuiTypography-root-id MuiTypography-caption-id"
@@ -67444,90 +67860,94 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
           <hr
             class="makeStyles-hr-id"
           />
-          <table
-            class="MuiTable-root-id makeStyles-table-id"
+          <div
+            class="ResponsiveTable-root-id"
           >
-            <thead
-              class="MuiTableHead-root-id"
+            <table
+              class="MuiTable-root-id makeStyles-table-id"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
+              <thead
+                class="MuiTableHead-root-id"
               >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
-                  scope="col"
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
-                  <span
-                    class="makeStyles-colNameLabel-id"
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                    scope="col"
                   >
-                    Product
-                  </span>
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
-                  scope="col"
-                >
-                  Quantity
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
-                  scope="col"
-                >
-                  Price
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
-                  scope="col"
-                >
-                  Total
-                </th>
-              </tr>
-            </thead>
-            <tbody
-              class="MuiTableBody-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
+                    <span
+                      class="makeStyles-colNameLabel-id"
+                    >
+                      Product
+                    </span>
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
+                    scope="col"
+                  >
+                    Quantity
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
+                    scope="col"
+                  >
+                    Price
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
+                    scope="col"
+                  >
+                    Total
+                  </th>
+                </tr>
+              </thead>
+              <tbody
+                class="MuiTableBody-root-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                <tr
+                  class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
                 >
-                  <div
-                    class="makeStyles-content-id"
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      class="makeStyles-content-id"
                     >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder60x60.png"
-                      />
+                      <div
+                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      >
+                        <img
+                          class="MuiAvatar-img-id"
+                          src="placeholder60x60.png"
+                        />
+                      </div>
+                      <div
+                        class="makeStyles-children-id"
+                      >
+                        Watkins-Gonzalez (Soft)
+                      </div>
                     </div>
-                    <div
-                      class="makeStyles-children-id"
-                    >
-                      Watkins-Gonzalez (Soft)
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
-                >
-                  3
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
-                >
-                  $18.51
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-                >
-                  $55.53
-                </td>
-              </tr>
-            </tbody>
-          </table>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
+                  >
+                    3
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                  >
+                    $18.51
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                  >
+                    $55.53
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
           <div
             class="MuiCardActions-root-id MuiCardActions-spacing-id"
           >
@@ -67603,90 +68023,94 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
           <hr
             class="makeStyles-hr-id"
           />
-          <table
-            class="MuiTable-root-id makeStyles-table-id"
+          <div
+            class="ResponsiveTable-root-id"
           >
-            <thead
-              class="MuiTableHead-root-id"
+            <table
+              class="MuiTable-root-id makeStyles-table-id"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
+              <thead
+                class="MuiTableHead-root-id"
               >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
-                  scope="col"
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
-                  <span
-                    class="makeStyles-colNameLabel-id"
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                    scope="col"
                   >
-                    Product
-                  </span>
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
-                  scope="col"
-                >
-                  Quantity
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
-                  scope="col"
-                >
-                  Price
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
-                  scope="col"
-                >
-                  Total
-                </th>
-              </tr>
-            </thead>
-            <tbody
-              class="MuiTableBody-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
+                    <span
+                      class="makeStyles-colNameLabel-id"
+                    >
+                      Product
+                    </span>
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
+                    scope="col"
+                  >
+                    Quantity
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
+                    scope="col"
+                  >
+                    Price
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
+                    scope="col"
+                  >
+                    Total
+                  </th>
+                </tr>
+              </thead>
+              <tbody
+                class="MuiTableBody-root-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                <tr
+                  class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
                 >
-                  <div
-                    class="makeStyles-content-id"
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      class="makeStyles-content-id"
                     >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder60x60.png"
-                      />
+                      <div
+                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      >
+                        <img
+                          class="MuiAvatar-img-id"
+                          src="placeholder60x60.png"
+                        />
+                      </div>
+                      <div
+                        class="makeStyles-children-id"
+                      >
+                        Williams, Garcia and Walker (XS)
+                      </div>
                     </div>
-                    <div
-                      class="makeStyles-children-id"
-                    >
-                      Williams, Garcia and Walker (XS)
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
-                >
-                  1
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
-                >
-                  $79.71
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-                >
-                  $79.71
-                </td>
-              </tr>
-            </tbody>
-          </table>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
+                  >
+                    1
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                  >
+                    $79.71
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                  >
+                    $79.71
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
           <div
             class="MuiCardActions-root-id MuiCardActions-spacing-id"
           >
@@ -67762,90 +68186,94 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
           <hr
             class="makeStyles-hr-id"
           />
-          <table
-            class="MuiTable-root-id makeStyles-table-id"
+          <div
+            class="ResponsiveTable-root-id"
           >
-            <thead
-              class="MuiTableHead-root-id"
+            <table
+              class="MuiTable-root-id makeStyles-table-id"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
+              <thead
+                class="MuiTableHead-root-id"
               >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
-                  scope="col"
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
-                  <span
-                    class="makeStyles-colNameLabel-id"
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                    scope="col"
                   >
-                    Product
-                  </span>
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
-                  scope="col"
-                >
-                  Quantity
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
-                  scope="col"
-                >
-                  Price
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
-                  scope="col"
-                >
-                  Total
-                </th>
-              </tr>
-            </thead>
-            <tbody
-              class="MuiTableBody-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
+                    <span
+                      class="makeStyles-colNameLabel-id"
+                    >
+                      Product
+                    </span>
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
+                    scope="col"
+                  >
+                    Quantity
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
+                    scope="col"
+                  >
+                    Price
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
+                    scope="col"
+                  >
+                    Total
+                  </th>
+                </tr>
+              </thead>
+              <tbody
+                class="MuiTableBody-root-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                <tr
+                  class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
                 >
-                  <div
-                    class="makeStyles-content-id"
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      class="makeStyles-content-id"
                     >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder60x60.png"
-                      />
+                      <div
+                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      >
+                        <img
+                          class="MuiAvatar-img-id"
+                          src="placeholder60x60.png"
+                        />
+                      </div>
+                      <div
+                        class="makeStyles-children-id"
+                      >
+                        Williams, Garcia and Walker (XS)
+                      </div>
                     </div>
-                    <div
-                      class="makeStyles-children-id"
-                    >
-                      Williams, Garcia and Walker (XS)
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
-                >
-                  1
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
-                >
-                  $79.71
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-                >
-                  $79.71
-                </td>
-              </tr>
-            </tbody>
-          </table>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
+                  >
+                    1
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                  >
+                    $79.71
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                  >
+                    $79.71
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
           <div
             class="MuiCardActions-root-id MuiCardActions-spacing-id"
           >
@@ -68334,10 +68762,10 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
   style="padding:24px"
 >
   <div
-    class="makeStyles-root-id"
+    class="Container-root-id"
   >
     <div
-      class="makeStyles-root-id makeStyles-header-id"
+      class="ExtendedPageHeader-root-id OrderDetailsPage-header-id"
     >
       <div
         class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -68345,7 +68773,7 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
         #9
       </div>
       <div
-        class="makeStyles-action-id"
+        class="ExtendedPageHeader-action-id"
       >
         <div
           class="makeStyles-root-id"
@@ -68379,7 +68807,7 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
       </div>
     </div>
     <div
-      class="makeStyles-date-id"
+      class="OrderDetailsPage-date-id"
     >
       <div
         class="MuiTypography-root-id MuiTypography-caption-id"
@@ -68422,90 +68850,94 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
           <hr
             class="makeStyles-hr-id"
           />
-          <table
-            class="MuiTable-root-id makeStyles-table-id"
+          <div
+            class="ResponsiveTable-root-id"
           >
-            <thead
-              class="MuiTableHead-root-id"
+            <table
+              class="MuiTable-root-id makeStyles-table-id"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
+              <thead
+                class="MuiTableHead-root-id"
               >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
-                  scope="col"
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
-                  <span
-                    class="makeStyles-colNameLabel-id"
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                    scope="col"
                   >
-                    Product
-                  </span>
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
-                  scope="col"
-                >
-                  Quantity
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
-                  scope="col"
-                >
-                  Price
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
-                  scope="col"
-                >
-                  Total
-                </th>
-              </tr>
-            </thead>
-            <tbody
-              class="MuiTableBody-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
+                    <span
+                      class="makeStyles-colNameLabel-id"
+                    >
+                      Product
+                    </span>
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
+                    scope="col"
+                  >
+                    Quantity
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
+                    scope="col"
+                  >
+                    Price
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
+                    scope="col"
+                  >
+                    Total
+                  </th>
+                </tr>
+              </thead>
+              <tbody
+                class="MuiTableBody-root-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                <tr
+                  class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
                 >
-                  <div
-                    class="makeStyles-content-id"
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      class="makeStyles-content-id"
                     >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder60x60.png"
-                      />
+                      <div
+                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      >
+                        <img
+                          class="MuiAvatar-img-id"
+                          src="placeholder60x60.png"
+                        />
+                      </div>
+                      <div
+                        class="makeStyles-children-id"
+                      >
+                        Watkins-Gonzalez (Soft)
+                      </div>
                     </div>
-                    <div
-                      class="makeStyles-children-id"
-                    >
-                      Watkins-Gonzalez (Soft)
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
-                >
-                  3
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
-                >
-                  $18.51
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-                >
-                  $55.53
-                </td>
-              </tr>
-            </tbody>
-          </table>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
+                  >
+                    3
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                  >
+                    $18.51
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                  >
+                    $55.53
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
           <div
             class="MuiCardActions-root-id MuiCardActions-spacing-id"
           >
@@ -68581,90 +69013,94 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
           <hr
             class="makeStyles-hr-id"
           />
-          <table
-            class="MuiTable-root-id makeStyles-table-id"
+          <div
+            class="ResponsiveTable-root-id"
           >
-            <thead
-              class="MuiTableHead-root-id"
+            <table
+              class="MuiTable-root-id makeStyles-table-id"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
+              <thead
+                class="MuiTableHead-root-id"
               >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
-                  scope="col"
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
-                  <span
-                    class="makeStyles-colNameLabel-id"
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                    scope="col"
                   >
-                    Product
-                  </span>
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
-                  scope="col"
-                >
-                  Quantity
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
-                  scope="col"
-                >
-                  Price
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
-                  scope="col"
-                >
-                  Total
-                </th>
-              </tr>
-            </thead>
-            <tbody
-              class="MuiTableBody-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
+                    <span
+                      class="makeStyles-colNameLabel-id"
+                    >
+                      Product
+                    </span>
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
+                    scope="col"
+                  >
+                    Quantity
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
+                    scope="col"
+                  >
+                    Price
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
+                    scope="col"
+                  >
+                    Total
+                  </th>
+                </tr>
+              </thead>
+              <tbody
+                class="MuiTableBody-root-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                <tr
+                  class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
                 >
-                  <div
-                    class="makeStyles-content-id"
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      class="makeStyles-content-id"
                     >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder60x60.png"
-                      />
+                      <div
+                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      >
+                        <img
+                          class="MuiAvatar-img-id"
+                          src="placeholder60x60.png"
+                        />
+                      </div>
+                      <div
+                        class="makeStyles-children-id"
+                      >
+                        Williams, Garcia and Walker (XS)
+                      </div>
                     </div>
-                    <div
-                      class="makeStyles-children-id"
-                    >
-                      Williams, Garcia and Walker (XS)
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
-                >
-                  1
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
-                >
-                  $79.71
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-                >
-                  $79.71
-                </td>
-              </tr>
-            </tbody>
-          </table>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
+                  >
+                    1
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                  >
+                    $79.71
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                  >
+                    $79.71
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
           <div
             class="MuiCardActions-root-id MuiCardActions-spacing-id"
           >
@@ -68740,90 +69176,94 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
           <hr
             class="makeStyles-hr-id"
           />
-          <table
-            class="MuiTable-root-id makeStyles-table-id"
+          <div
+            class="ResponsiveTable-root-id"
           >
-            <thead
-              class="MuiTableHead-root-id"
+            <table
+              class="MuiTable-root-id makeStyles-table-id"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
+              <thead
+                class="MuiTableHead-root-id"
               >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
-                  scope="col"
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
-                  <span
-                    class="makeStyles-colNameLabel-id"
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                    scope="col"
                   >
-                    Product
-                  </span>
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
-                  scope="col"
-                >
-                  Quantity
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
-                  scope="col"
-                >
-                  Price
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
-                  scope="col"
-                >
-                  Total
-                </th>
-              </tr>
-            </thead>
-            <tbody
-              class="MuiTableBody-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
+                    <span
+                      class="makeStyles-colNameLabel-id"
+                    >
+                      Product
+                    </span>
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
+                    scope="col"
+                  >
+                    Quantity
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
+                    scope="col"
+                  >
+                    Price
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
+                    scope="col"
+                  >
+                    Total
+                  </th>
+                </tr>
+              </thead>
+              <tbody
+                class="MuiTableBody-root-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                <tr
+                  class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
                 >
-                  <div
-                    class="makeStyles-content-id"
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      class="makeStyles-content-id"
                     >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder60x60.png"
-                      />
+                      <div
+                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      >
+                        <img
+                          class="MuiAvatar-img-id"
+                          src="placeholder60x60.png"
+                        />
+                      </div>
+                      <div
+                        class="makeStyles-children-id"
+                      >
+                        Williams, Garcia and Walker (XS)
+                      </div>
                     </div>
-                    <div
-                      class="makeStyles-children-id"
-                    >
-                      Williams, Garcia and Walker (XS)
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
-                >
-                  1
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
-                >
-                  $79.71
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-                >
-                  $79.71
-                </td>
-              </tr>
-            </tbody>
-          </table>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
+                  >
+                    1
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                  >
+                    $79.71
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                  >
+                    $79.71
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
           <div
             class="MuiCardActions-root-id MuiCardActions-spacing-id"
           >
@@ -69312,10 +69752,10 @@ exports[`Storyshots Views / Orders / Order draft default 1`] = `
   style="padding:24px"
 >
   <div
-    class="makeStyles-root-id"
+    class="Container-root-id"
   >
     <div
-      class="makeStyles-root-id makeStyles-header-id"
+      class="ExtendedPageHeader-root-id makeStyles-header-id"
     >
       <div
         class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -69323,7 +69763,7 @@ exports[`Storyshots Views / Orders / Order draft default 1`] = `
         #24
       </div>
       <div
-        class="makeStyles-action-id"
+        class="ExtendedPageHeader-action-id"
       >
         <div
           class="makeStyles-root-id"
@@ -69408,262 +69848,266 @@ exports[`Storyshots Views / Orders / Order draft default 1`] = `
           <hr
             class="makeStyles-hr-id"
           />
-          <table
-            class="MuiTable-root-id makeStyles-table-id"
+          <div
+            class="ResponsiveTable-root-id"
           >
-            <thead
-              class="MuiTableHead-root-id"
+            <table
+              class="MuiTable-root-id makeStyles-table-id"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
+              <thead
+                class="MuiTableHead-root-id"
               >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
-                  scope="col"
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
-                  <span
-                    class="makeStyles-colNameLabel-id"
-                  >
-                    Product
-                  </span>
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
-                  scope="col"
-                >
-                  Quantity
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
-                  scope="col"
-                >
-                  Price
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
-                  scope="col"
-                >
-                  Total
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colAction-id"
-                  scope="col"
-                />
-              </tr>
-            </thead>
-            <tbody
-              class="MuiTableBody-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
-                >
-                  <div
-                    class="makeStyles-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder60x60.png"
-                      />
-                    </div>
-                    <div
-                      class="makeStyles-children-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body2-id"
-                      >
-                        Davis Group (Hard)
-                      </div>
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id"
-                      >
-                        58-1338
-                      </div>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
-                >
-                  <form>
-                    <div
-                      class="MuiFormControl-root-id MuiTextField-root-id makeStyles-quantityField-id MuiFormControl-fullWidth-id"
-                    >
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                      >
-                        <input
-                          aria-invalid="false"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                          name="quantity"
-                          type="number"
-                          value="2"
-                        />
-                        <fieldset
-                          aria-hidden="true"
-                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          style="padding-left:8px"
-                        >
-                          <legend
-                            class="PrivateNotchedOutline-legend-id"
-                            style="width:0"
-                          >
-                            <span>
-                              ​
-                            </span>
-                          </legend>
-                        </fieldset>
-                      </div>
-                    </div>
-                  </form>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
-                >
-                  $65.95
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-                >
-                  $131.90
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colAction-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id"
-                    tabindex="0"
-                    type="button"
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                    scope="col"
                   >
                     <span
-                      class="MuiIconButton-label-id"
+                      class="makeStyles-colNameLabel-id"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                        />
-                      </svg>
+                      Product
                     </span>
-                  </button>
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id"
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
+                    scope="col"
+                  >
+                    Quantity
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
+                    scope="col"
+                  >
+                    Price
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
+                    scope="col"
+                  >
+                    Total
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colAction-id"
+                    scope="col"
+                  />
+                </tr>
+              </thead>
+              <tbody
+                class="MuiTableBody-root-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                <tr
+                  class="MuiTableRow-root-id"
                 >
-                  <div
-                    class="makeStyles-content-id"
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder60x60.png"
-                      />
-                    </div>
-                    <div
-                      class="makeStyles-children-id"
+                      class="makeStyles-content-id"
                     >
                       <div
-                        class="MuiTypography-root-id MuiTypography-body2-id"
+                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
                       >
-                        Anderson PLC (15-1337)
-                      </div>
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id"
-                      >
-                        15-1337
-                      </div>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
-                >
-                  <form>
-                    <div
-                      class="MuiFormControl-root-id MuiTextField-root-id makeStyles-quantityField-id MuiFormControl-fullWidth-id"
-                    >
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                      >
-                        <input
-                          aria-invalid="false"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                          name="quantity"
-                          type="number"
-                          value="2"
+                        <img
+                          class="MuiAvatar-img-id"
+                          src="placeholder60x60.png"
                         />
-                        <fieldset
-                          aria-hidden="true"
-                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          style="padding-left:8px"
+                      </div>
+                      <div
+                        class="makeStyles-children-id"
+                      >
+                        <div
+                          class="MuiTypography-root-id MuiTypography-body2-id"
                         >
-                          <legend
-                            class="PrivateNotchedOutline-legend-id"
-                            style="width:0"
-                          >
-                            <span>
-                              ​
-                            </span>
-                          </legend>
-                        </fieldset>
+                          Davis Group (Hard)
+                        </div>
+                        <div
+                          class="MuiTypography-root-id MuiTypography-caption-id"
+                        >
+                          58-1338
+                        </div>
                       </div>
                     </div>
-                  </form>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
-                >
-                  $68.20
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-                >
-                  $136.40
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colAction-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id"
-                    tabindex="0"
-                    type="button"
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
                   >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
+                    <form>
+                      <div
+                        class="MuiFormControl-root-id MuiTextField-root-id makeStyles-quantityField-id MuiFormControl-fullWidth-id"
                       >
-                        <path
-                          d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                        <div
+                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+                        >
+                          <input
+                            aria-invalid="false"
+                            class="MuiInputBase-input-id MuiOutlinedInput-input-id"
+                            name="quantity"
+                            type="number"
+                            value="2"
+                          />
+                          <fieldset
+                            aria-hidden="true"
+                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                            style="padding-left:8px"
+                          >
+                            <legend
+                              class="PrivateNotchedOutline-legend-id"
+                              style="width:0"
+                            >
+                              <span>
+                                ​
+                              </span>
+                            </legend>
+                          </fieldset>
+                        </div>
+                      </div>
+                    </form>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                  >
+                    $65.95
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                  >
+                    $131.90
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colAction-id"
+                  >
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id"
+                      tabindex="0"
+                      type="button"
+                    >
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </td>
+                </tr>
+                <tr
+                  class="MuiTableRow-root-id"
+                >
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                  >
+                    <div
+                      class="makeStyles-content-id"
+                    >
+                      <div
+                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      >
+                        <img
+                          class="MuiAvatar-img-id"
+                          src="placeholder60x60.png"
                         />
-                      </svg>
-                    </span>
-                  </button>
-                </td>
-              </tr>
-            </tbody>
-          </table>
+                      </div>
+                      <div
+                        class="makeStyles-children-id"
+                      >
+                        <div
+                          class="MuiTypography-root-id MuiTypography-body2-id"
+                        >
+                          Anderson PLC (15-1337)
+                        </div>
+                        <div
+                          class="MuiTypography-root-id MuiTypography-caption-id"
+                        >
+                          15-1337
+                        </div>
+                      </div>
+                    </div>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
+                  >
+                    <form>
+                      <div
+                        class="MuiFormControl-root-id MuiTextField-root-id makeStyles-quantityField-id MuiFormControl-fullWidth-id"
+                      >
+                        <div
+                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+                        >
+                          <input
+                            aria-invalid="false"
+                            class="MuiInputBase-input-id MuiOutlinedInput-input-id"
+                            name="quantity"
+                            type="number"
+                            value="2"
+                          />
+                          <fieldset
+                            aria-hidden="true"
+                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                            style="padding-left:8px"
+                          >
+                            <legend
+                              class="PrivateNotchedOutline-legend-id"
+                              style="width:0"
+                            >
+                              <span>
+                                ​
+                              </span>
+                            </legend>
+                          </fieldset>
+                        </div>
+                      </div>
+                    </form>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                  >
+                    $68.20
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                  >
+                    $136.40
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colAction-id"
+                  >
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id"
+                      tabindex="0"
+                      type="button"
+                    >
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
           <div
             class="MuiCardContent-root-id"
           >
@@ -69927,10 +70371,10 @@ exports[`Storyshots Views / Orders / Order draft loading 1`] = `
   style="padding:24px"
 >
   <div
-    class="makeStyles-root-id"
+    class="Container-root-id"
   >
     <div
-      class="makeStyles-root-id makeStyles-header-id"
+      class="ExtendedPageHeader-root-id makeStyles-header-id"
     >
       <div
         class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -69943,7 +70387,7 @@ exports[`Storyshots Views / Orders / Order draft loading 1`] = `
         </span>
       </div>
       <div
-        class="makeStyles-action-id"
+        class="ExtendedPageHeader-action-id"
       >
         <div
           class="makeStyles-root-id"
@@ -70023,102 +70467,106 @@ exports[`Storyshots Views / Orders / Order draft loading 1`] = `
           <hr
             class="makeStyles-hr-id"
           />
-          <table
-            class="MuiTable-root-id makeStyles-table-id"
+          <div
+            class="ResponsiveTable-root-id"
           >
-            <tbody
-              class="MuiTableBody-root-id"
+            <table
+              class="MuiTable-root-id makeStyles-table-id"
             >
-              <tr
-                class="MuiTableRow-root-id"
+              <tbody
+                class="MuiTableBody-root-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                <tr
+                  class="MuiTableRow-root-id"
                 >
-                  <div
-                    class="makeStyles-content-id"
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id MuiAvatar-colorDefault-id"
+                      class="makeStyles-content-id"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
+                      <div
+                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id MuiAvatar-colorDefault-id"
                       >
-                        <path
-                          d="M19 8l-4 4h3c0 3.31-2.69 6-6 6-1.01 0-1.97-.25-2.8-.7l-1.46 1.46C8.97 19.54 10.43 20 12 20c4.42 0 8-3.58 8-8h3l-4-4zM6 12c0-3.31 2.69-6 6-6 1.01 0 1.97.25 2.8.7l1.46-1.46C15.03 4.46 13.57 4 12 4c-4.42 0-8 3.58-8 8H1l4 4 4-4H6z"
-                        />
-                      </svg>
-                    </div>
-                    <div
-                      class="makeStyles-children-id"
-                    >
-                      <span
-                        class="makeStyles-skeleton-id"
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M19 8l-4 4h3c0 3.31-2.69 6-6 6-1.01 0-1.97-.25-2.8-.7l-1.46 1.46C8.97 19.54 10.43 20 12 20c4.42 0 8-3.58 8-8h3l-4-4zM6 12c0-3.31 2.69-6 6-6 1.01 0 1.97.25 2.8.7l1.46-1.46C15.03 4.46 13.57 4 12 4c-4.42 0-8 3.58-8 8H1l4 4 4-4H6z"
+                          />
+                        </svg>
+                      </div>
+                      <div
+                        class="makeStyles-children-id"
                       >
-                        ‌
-                      </span>
+                        <span
+                          class="makeStyles-skeleton-id"
+                        >
+                          ‌
+                        </span>
+                      </div>
                     </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
-                >
-                  <span
-                    class="makeStyles-skeleton-id"
-                  >
-                    ‌
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
-                >
-                  <span
-                    class="makeStyles-skeleton-id"
-                  >
-                    ‌
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-                >
-                  <span
-                    class="makeStyles-skeleton-id"
-                  >
-                    ‌
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colAction-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id"
-                    tabindex="0"
-                    type="button"
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
                   >
                     <span
-                      class="MuiIconButton-label-id"
+                      class="makeStyles-skeleton-id"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                        />
-                      </svg>
+                      ‌
                     </span>
-                  </button>
-                </td>
-              </tr>
-            </tbody>
-          </table>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                  >
+                    <span
+                      class="makeStyles-skeleton-id"
+                    >
+                      ‌
+                    </span>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                  >
+                    <span
+                      class="makeStyles-skeleton-id"
+                    >
+                      ‌
+                    </span>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colAction-id"
+                  >
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id"
+                      tabindex="0"
+                      type="button"
+                    >
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
           <div
             class="MuiCardContent-root-id"
           >
@@ -70321,10 +70769,10 @@ exports[`Storyshots Views / Orders / Order draft no user permissions 1`] = `
   style="padding:24px"
 >
   <div
-    class="makeStyles-root-id"
+    class="Container-root-id"
   >
     <div
-      class="makeStyles-root-id makeStyles-header-id"
+      class="ExtendedPageHeader-root-id makeStyles-header-id"
     >
       <div
         class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -70332,7 +70780,7 @@ exports[`Storyshots Views / Orders / Order draft no user permissions 1`] = `
         #24
       </div>
       <div
-        class="makeStyles-action-id"
+        class="ExtendedPageHeader-action-id"
       >
         <div
           class="makeStyles-root-id"
@@ -70417,262 +70865,266 @@ exports[`Storyshots Views / Orders / Order draft no user permissions 1`] = `
           <hr
             class="makeStyles-hr-id"
           />
-          <table
-            class="MuiTable-root-id makeStyles-table-id"
+          <div
+            class="ResponsiveTable-root-id"
           >
-            <thead
-              class="MuiTableHead-root-id"
+            <table
+              class="MuiTable-root-id makeStyles-table-id"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
+              <thead
+                class="MuiTableHead-root-id"
               >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
-                  scope="col"
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
-                  <span
-                    class="makeStyles-colNameLabel-id"
-                  >
-                    Product
-                  </span>
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
-                  scope="col"
-                >
-                  Quantity
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
-                  scope="col"
-                >
-                  Price
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
-                  scope="col"
-                >
-                  Total
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colAction-id"
-                  scope="col"
-                />
-              </tr>
-            </thead>
-            <tbody
-              class="MuiTableBody-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
-                >
-                  <div
-                    class="makeStyles-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder60x60.png"
-                      />
-                    </div>
-                    <div
-                      class="makeStyles-children-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body2-id"
-                      >
-                        Davis Group (Hard)
-                      </div>
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id"
-                      >
-                        58-1338
-                      </div>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
-                >
-                  <form>
-                    <div
-                      class="MuiFormControl-root-id MuiTextField-root-id makeStyles-quantityField-id MuiFormControl-fullWidth-id"
-                    >
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                      >
-                        <input
-                          aria-invalid="false"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                          name="quantity"
-                          type="number"
-                          value="2"
-                        />
-                        <fieldset
-                          aria-hidden="true"
-                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          style="padding-left:8px"
-                        >
-                          <legend
-                            class="PrivateNotchedOutline-legend-id"
-                            style="width:0"
-                          >
-                            <span>
-                              ​
-                            </span>
-                          </legend>
-                        </fieldset>
-                      </div>
-                    </div>
-                  </form>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
-                >
-                  $65.95
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-                >
-                  $131.90
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colAction-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id"
-                    tabindex="0"
-                    type="button"
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                    scope="col"
                   >
                     <span
-                      class="MuiIconButton-label-id"
+                      class="makeStyles-colNameLabel-id"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                        />
-                      </svg>
+                      Product
                     </span>
-                  </button>
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id"
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
+                    scope="col"
+                  >
+                    Quantity
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
+                    scope="col"
+                  >
+                    Price
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
+                    scope="col"
+                  >
+                    Total
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colAction-id"
+                    scope="col"
+                  />
+                </tr>
+              </thead>
+              <tbody
+                class="MuiTableBody-root-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                <tr
+                  class="MuiTableRow-root-id"
                 >
-                  <div
-                    class="makeStyles-content-id"
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder60x60.png"
-                      />
-                    </div>
-                    <div
-                      class="makeStyles-children-id"
+                      class="makeStyles-content-id"
                     >
                       <div
-                        class="MuiTypography-root-id MuiTypography-body2-id"
+                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
                       >
-                        Anderson PLC (15-1337)
-                      </div>
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id"
-                      >
-                        15-1337
-                      </div>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
-                >
-                  <form>
-                    <div
-                      class="MuiFormControl-root-id MuiTextField-root-id makeStyles-quantityField-id MuiFormControl-fullWidth-id"
-                    >
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                      >
-                        <input
-                          aria-invalid="false"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                          name="quantity"
-                          type="number"
-                          value="2"
+                        <img
+                          class="MuiAvatar-img-id"
+                          src="placeholder60x60.png"
                         />
-                        <fieldset
-                          aria-hidden="true"
-                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          style="padding-left:8px"
+                      </div>
+                      <div
+                        class="makeStyles-children-id"
+                      >
+                        <div
+                          class="MuiTypography-root-id MuiTypography-body2-id"
                         >
-                          <legend
-                            class="PrivateNotchedOutline-legend-id"
-                            style="width:0"
-                          >
-                            <span>
-                              ​
-                            </span>
-                          </legend>
-                        </fieldset>
+                          Davis Group (Hard)
+                        </div>
+                        <div
+                          class="MuiTypography-root-id MuiTypography-caption-id"
+                        >
+                          58-1338
+                        </div>
                       </div>
                     </div>
-                  </form>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
-                >
-                  $68.20
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-                >
-                  $136.40
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colAction-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id"
-                    tabindex="0"
-                    type="button"
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
                   >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
+                    <form>
+                      <div
+                        class="MuiFormControl-root-id MuiTextField-root-id makeStyles-quantityField-id MuiFormControl-fullWidth-id"
                       >
-                        <path
-                          d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                        <div
+                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+                        >
+                          <input
+                            aria-invalid="false"
+                            class="MuiInputBase-input-id MuiOutlinedInput-input-id"
+                            name="quantity"
+                            type="number"
+                            value="2"
+                          />
+                          <fieldset
+                            aria-hidden="true"
+                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                            style="padding-left:8px"
+                          >
+                            <legend
+                              class="PrivateNotchedOutline-legend-id"
+                              style="width:0"
+                            >
+                              <span>
+                                ​
+                              </span>
+                            </legend>
+                          </fieldset>
+                        </div>
+                      </div>
+                    </form>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                  >
+                    $65.95
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                  >
+                    $131.90
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colAction-id"
+                  >
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id"
+                      tabindex="0"
+                      type="button"
+                    >
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </td>
+                </tr>
+                <tr
+                  class="MuiTableRow-root-id"
+                >
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                  >
+                    <div
+                      class="makeStyles-content-id"
+                    >
+                      <div
+                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      >
+                        <img
+                          class="MuiAvatar-img-id"
+                          src="placeholder60x60.png"
                         />
-                      </svg>
-                    </span>
-                  </button>
-                </td>
-              </tr>
-            </tbody>
-          </table>
+                      </div>
+                      <div
+                        class="makeStyles-children-id"
+                      >
+                        <div
+                          class="MuiTypography-root-id MuiTypography-body2-id"
+                        >
+                          Anderson PLC (15-1337)
+                        </div>
+                        <div
+                          class="MuiTypography-root-id MuiTypography-caption-id"
+                        >
+                          15-1337
+                        </div>
+                      </div>
+                    </div>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
+                  >
+                    <form>
+                      <div
+                        class="MuiFormControl-root-id MuiTextField-root-id makeStyles-quantityField-id MuiFormControl-fullWidth-id"
+                      >
+                        <div
+                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+                        >
+                          <input
+                            aria-invalid="false"
+                            class="MuiInputBase-input-id MuiOutlinedInput-input-id"
+                            name="quantity"
+                            type="number"
+                            value="2"
+                          />
+                          <fieldset
+                            aria-hidden="true"
+                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                            style="padding-left:8px"
+                          >
+                            <legend
+                              class="PrivateNotchedOutline-legend-id"
+                              style="width:0"
+                            >
+                              <span>
+                                ​
+                              </span>
+                            </legend>
+                          </fieldset>
+                        </div>
+                      </div>
+                    </form>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                  >
+                    $68.20
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                  >
+                    $136.40
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colAction-id"
+                  >
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id"
+                      tabindex="0"
+                      type="button"
+                    >
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
           <div
             class="MuiCardContent-root-id"
           >
@@ -70924,10 +71376,10 @@ exports[`Storyshots Views / Orders / Order draft without lines 1`] = `
   style="padding:24px"
 >
   <div
-    class="makeStyles-root-id"
+    class="Container-root-id"
   >
     <div
-      class="makeStyles-root-id makeStyles-header-id"
+      class="ExtendedPageHeader-root-id makeStyles-header-id"
     >
       <div
         class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -70935,7 +71387,7 @@ exports[`Storyshots Views / Orders / Order draft without lines 1`] = `
         #24
       </div>
       <div
-        class="makeStyles-action-id"
+        class="ExtendedPageHeader-action-id"
       >
         <div
           class="makeStyles-root-id"
@@ -71020,24 +71472,28 @@ exports[`Storyshots Views / Orders / Order draft without lines 1`] = `
           <hr
             class="makeStyles-hr-id"
           />
-          <table
-            class="MuiTable-root-id makeStyles-table-id"
+          <div
+            class="ResponsiveTable-root-id"
           >
-            <tbody
-              class="MuiTableBody-root-id"
+            <table
+              class="MuiTable-root-id makeStyles-table-id"
             >
-              <tr
-                class="MuiTableRow-root-id"
+              <tbody
+                class="MuiTableBody-root-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                  colspan="5"
+                <tr
+                  class="MuiTableRow-root-id"
                 >
-                  No Products added to Order
-                </td>
-              </tr>
-            </tbody>
-          </table>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                    colspan="5"
+                  >
+                    No Products added to Order
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
         </div>
         <div
           class="makeStyles-root-id"
@@ -71256,10 +71712,10 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
   style="padding:24px"
 >
   <div
-    class="makeStyles-root-id"
+    class="Container-root-id"
   >
     <div
-      class="makeStyles-root-id"
+      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
         class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -71267,7 +71723,7 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
         Orders
       </div>
       <div
-        class="makeStyles-action-id"
+        class="ExtendedPageHeader-action-id"
       >
         <div
           class="makeStyles-root-id"
@@ -71387,1447 +71843,1451 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
       <hr
         class="makeStyles-root-id"
       />
-      <table
-        class="MuiTable-root-id"
+      <div
+        class="ResponsiveTable-root-id"
       >
-        <thead
-          class="MuiTableHead-root-id"
+        <table
+          class="MuiTable-root-id"
         >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-head-id"
+          <thead
+            class="MuiTableHead-root-id"
           >
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
-              scope="col"
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-head-id"
             >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
+                scope="col"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colNumber-id"
-              scope="col"
-            >
-              No. of Order
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colDate-id"
-              scope="col"
-            >
-              Date
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colCustomer-id"
-              scope="col"
-            >
-              Customer
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPayment-id"
-              scope="col"
-            >
-              Payment
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colFulfillment-id"
-              scope="col"
-            >
-              Fulfillment status
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
-              scope="col"
-            >
-              Total
-            </th>
-          </tr>
-        </thead>
-        <tfoot
-          class="MuiTableFooter-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-footer-id"
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colNumber-id"
+                scope="col"
+              >
+                No. of Order
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colDate-id"
+                scope="col"
+              >
+                Date
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colCustomer-id"
+                scope="col"
+              >
+                Customer
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPayment-id"
+                scope="col"
+              >
+                Payment
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colFulfillment-id"
+                scope="col"
+              >
+                Fulfillment status
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
+                scope="col"
+              >
+                Total
+              </th>
+            </tr>
+          </thead>
+          <tfoot
+            class="MuiTableFooter-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
-              colspan="7"
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-footer-id"
             >
-              <div
-                class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                colspan="7"
               >
                 <div
-                  class="makeStyles-spacer-id"
+                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
                 >
-                  <div>
-                    <span
-                      class="RowNumberSelect-label-id"
-                    >
-                      No of Rows:
-                    </span>
-                    <div
-                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
-                    >
+                  <div
+                    class="makeStyles-spacer-id"
+                  >
+                    <div>
+                      <span
+                        class="RowNumberSelect-label-id"
+                      >
+                        No of Rows:
+                      </span>
                       <div
-                        aria-haspopup="listbox"
-                        aria-labelledby=" "
-                        class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-id"
-                        role="button"
-                        tabindex="0"
+                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                       >
-                        20
-                      </div>
-                      <input
-                        type="hidden"
-                        value="20"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MuiSelect-icon-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M7 10l5 5 5-5z"
+                        <div
+                          aria-haspopup="listbox"
+                          aria-labelledby=" "
+                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-id"
+                          role="button"
+                          tabindex="0"
+                        >
+                          20
+                        </div>
+                        <input
+                          type="hidden"
+                          value="20"
                         />
-                      </svg>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M7 10l5 5 5-5z"
+                          />
+                        </svg>
+                      </div>
                     </div>
                   </div>
+                  <div
+                    class="makeStyles-root-id"
+                  >
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      data-tc="button-pagination-back"
+                      disabled=""
+                      tabindex="-1"
+                      type="button"
+                    >
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M14 7l-5 5 5 5V7z"
+                          />
+                          <path
+                            d="M24 0v24H0V0h24z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                      data-tc="button-pagination-next"
+                      tabindex="0"
+                      type="button"
+                    >
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M10 17l5-5-5-5v10z"
+                          />
+                          <path
+                            d="M0 24V0h24v24H0z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </div>
                 </div>
-                <div
-                  class="makeStyles-root-id"
+              </td>
+            </tr>
+          </tfoot>
+          <tbody
+            class="MuiTableBody-root-id"
+          >
+            <tr
+              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
                 >
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                    data-tc="button-pagination-back"
-                    disabled=""
-                    tabindex="-1"
-                    type="button"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M14 7l-5 5 5 5V7z"
-                        />
-                        <path
-                          d="M24 0v24H0V0h24z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
-                    data-tc="button-pagination-next"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M10 17l5-5-5-5v10z"
-                        />
-                        <path
-                          d="M0 24V0h24v24H0z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+              >
+                #20
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+              >
+                <time
+                  class=""
+                  datetime="1536658650376"
+                  title="Sep 11, 2018 5:37 AM"
+                >
+                  in a month
+                </time>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+              >
+                Laura Stone 1 2
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
+              >
+                <div
+                  class="makeStyles-root-id undefined makeStyles-successDot-id"
+                >
+                  Fully paid
                 </div>
-              </div>
-            </td>
-          </tr>
-        </tfoot>
-        <tbody
-          class="MuiTableBody-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
-              >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
-            >
-              #20
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
-            >
-              <time
-                class=""
-                datetime="1536658650376"
-                title="Sep 11, 2018 5:37 AM"
-              >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
-            >
-              Laura Stone 1 2
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
-            >
-              <div
-                class="makeStyles-root-id undefined makeStyles-successDot-id"
-              >
-                Fully paid
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
-            >
-              <div
-                class="makeStyles-root-id undefined makeStyles-errorDot-id"
-              >
-                Cancelled
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-            >
-              $305.17
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
-              >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
-            >
-              #19
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
-            >
-              <time
-                class=""
-                datetime="1536658650124"
-                title="Sep 11, 2018 5:37 AM"
-              >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
-            >
-              Elizabeth Vaughn
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
-            >
-              <div
-                class="makeStyles-root-id undefined makeStyles-successDot-id"
-              >
-                Fully paid
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
-            >
-              <div
-                class="makeStyles-root-id undefined makeStyles-errorDot-id"
-              >
-                Cancelled
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-            >
-              $1,215.89
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
-              >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
-            >
-              #18
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
-            >
-              <time
-                class=""
-                datetime="1536658650019"
-                title="Sep 11, 2018 5:37 AM"
-              >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
-            >
-              david.lawson@example.com
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
-            >
-              <div
-                class="makeStyles-root-id undefined makeStyles-errorDot-id"
-              >
-                Unpaid
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
-            >
-              <div
-                class="makeStyles-root-id undefined makeStyles-errorDot-id"
-              >
-                Draft
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-            >
-              $321.71
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
-              >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
-            >
-              #17
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
-            >
-              <time
-                class=""
-                datetime="1536658649864"
-                title="Sep 11, 2018 5:37 AM"
-              >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
-            >
-              Aaron Randall
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
-            >
-              <div
-                class="makeStyles-root-id undefined makeStyles-errorDot-id"
-              >
-                Unpaid
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
-            >
-              <div
-                class="makeStyles-root-id undefined makeStyles-errorDot-id"
-              >
-                Cancelled
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-            >
-              $271.95
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
-              >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
-            >
-              #16
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
-            >
-              <time
-                class=""
-                datetime="1536658649610"
-                title="Sep 11, 2018 5:37 AM"
-              >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
-            >
-              Laura Jensen
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
-            >
-              <div
-                class="makeStyles-root-id undefined makeStyles-errorDot-id"
-              >
-                Unpaid
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
-            >
-              <div
-                class="makeStyles-root-id undefined makeStyles-errorDot-id"
-              >
-                Cancelled
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-            >
-              $335.84
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
-              >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
-            >
-              #15
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
-            >
-              <time
-                class=""
-                datetime="1536658649336"
-                title="Sep 11, 2018 5:37 AM"
-              >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
-            >
-              Jenna Villa
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
-            >
-              <div
-                class="makeStyles-root-id undefined makeStyles-errorDot-id"
-              >
-                Unpaid
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
-            >
-              <div
-                class="makeStyles-root-id undefined makeStyles-errorDot-id"
-              >
-                Cancelled
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-            >
-              $1,042.15
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
-              >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
-            >
-              #14
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
-            >
-              <time
-                class=""
-                datetime="1536658649103"
-                title="Sep 11, 2018 5:37 AM"
-              >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
-            >
-              Wesley Davis
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
-            >
-              <div
-                class="makeStyles-root-id undefined makeStyles-errorDot-id"
-              >
-                Unpaid
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
-            >
-              <div
-                class="makeStyles-root-id undefined makeStyles-errorDot-id"
-              >
-                Cancelled
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-            >
-              $213.69
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
-              >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
-            >
-              #13
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
-            >
-              <time
-                class=""
-                datetime="1536658648921"
-                title="Sep 11, 2018 5:37 AM"
-              >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
-            >
-              Anthony Gonzalez
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
-            >
-              <div
-                class="makeStyles-root-id undefined makeStyles-errorDot-id"
-              >
-                Unpaid
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
-            >
-              <div
-                class="makeStyles-root-id undefined makeStyles-errorDot-id"
-              >
-                Cancelled
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-            >
-              $367.03
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
-              >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
-            >
-              #12
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
-            >
-              <time
-                class=""
-                datetime="1536658648750"
-                title="Sep 11, 2018 5:37 AM"
-              >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
-            >
-              Denise Freeman
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
-            >
-              <div
-                class="makeStyles-root-id undefined makeStyles-errorDot-id"
-              >
-                Unpaid
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
-            >
-              <div
-                class="makeStyles-root-id undefined makeStyles-errorDot-id"
-              >
-                Cancelled
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-            >
-              $298.76
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
-              >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
-            >
-              #11
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
-            >
-              <time
-                class=""
-                datetime="1536658648598"
-                title="Sep 11, 2018 5:37 AM"
-              >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
-            >
-              James Ball
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
-            >
-              <div
-                class="makeStyles-root-id undefined makeStyles-successDot-id"
-              >
-                Fully paid
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
-            >
-              <div
-                class="makeStyles-root-id undefined makeStyles-errorDot-id"
-              >
-                Unfulfilled
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-            >
-              $663.69
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
-              >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
-            >
-              #10
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
-            >
-              <time
-                class=""
-                datetime="1536658648409"
-                title="Sep 11, 2018 5:37 AM"
-              >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
-            >
-              Michael Martinez
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
-            >
-              <div
-                class="makeStyles-root-id undefined makeStyles-errorDot-id"
-              >
-                Unpaid
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
-            >
-              <div
-                class="makeStyles-root-id undefined makeStyles-errorDot-id"
-              >
-                Cancelled
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-            >
-              $280.41
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
-              >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
-            >
-              #9
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
-            >
-              <time
-                class=""
-                datetime="1536658648185"
-                title="Sep 11, 2018 5:37 AM"
-              >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
-            >
-              Melissa Simon
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
-            >
-              <div
-                class="makeStyles-root-id undefined makeStyles-errorDot-id"
-              >
-                Unpaid
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
-            >
-              <div
-                class="makeStyles-root-id undefined makeStyles-neutralDot-id"
-              >
-                Partially fulfilled
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-            >
-              $234.93
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
-              >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
-            >
-              #8
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
-            >
-              <time
-                class=""
-                datetime="1536658647953"
-                title="Sep 11, 2018 5:37 AM"
-              >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
-            >
-              Justin Mccoy
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
-            >
-              <div
-                class="makeStyles-root-id undefined makeStyles-errorDot-id"
-              >
-                Unpaid
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
-            >
-              <div
-                class="makeStyles-root-id undefined makeStyles-neutralDot-id"
-              >
-                Partially fulfilled
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-            >
-              $485.19
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
-              >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
-            >
-              #7
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
-            >
-              <time
-                class=""
-                datetime="1536658647828"
-                title="Sep 11, 2018 5:37 AM"
-              >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
-            >
-              Anthony Gonzalez
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
-            >
-              <div
-                class="makeStyles-root-id undefined makeStyles-successDot-id"
-              >
-                Fully paid
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
-            >
-              <div
-                class="makeStyles-root-id undefined makeStyles-neutralDot-id"
-              >
-                Partially fulfilled
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-            >
-              $223.54
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
-              >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
-            >
-              #6
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
-            >
-              <time
-                class=""
-                datetime="1536658647636"
-                title="Sep 11, 2018 5:37 AM"
-              >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
-            >
-              Bradley Ford
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
-            >
-              <div
-                class="makeStyles-root-id undefined makeStyles-errorDot-id"
-              >
-                Unpaid
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
-            >
-              <div
-                class="makeStyles-root-id undefined makeStyles-successDot-id"
-              >
-                Fulfilled
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-            >
-              $237.55
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
-              >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
-            >
-              #5
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
-            >
-              <time
-                class=""
-                datetime="1536658647420"
-                title="Sep 11, 2018 5:37 AM"
-              >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
-            >
-              David Lawson
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
-            >
-              <div
-                class="makeStyles-root-id undefined makeStyles-errorDot-id"
-              >
-                Unpaid
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
-            >
-              <div
-                class="makeStyles-root-id undefined makeStyles-neutralDot-id"
-              >
-                Partially fulfilled
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-            >
-              $453.55
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
-              >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
-            >
-              #4
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
-            >
-              <time
-                class=""
-                datetime="1536658647230"
-                title="Sep 11, 2018 5:37 AM"
-              >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
-            >
-              Lauren Watson
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
-            >
-              <div
-                class="makeStyles-root-id undefined makeStyles-errorDot-id"
-              >
-                Unpaid
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
-            >
-              <div
-                class="makeStyles-root-id undefined makeStyles-neutralDot-id"
-              >
-                Partially fulfilled
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-            >
-              $812.67
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
-              >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
-            >
-              #3
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
-            >
-              <time
-                class=""
-                datetime="1536658646972"
-                title="Sep 11, 2018 5:37 AM"
-              >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
-            >
-              Mark Lee
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
-            >
-              <div
-                class="makeStyles-root-id undefined makeStyles-errorDot-id"
-              >
-                Unpaid
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
-            >
-              <div
-                class="makeStyles-root-id undefined makeStyles-neutralDot-id"
-              >
-                Partially fulfilled
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-            >
-              $481.41
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
-              >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
-            >
-              #2
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
-            >
-              <time
-                class=""
-                datetime="1536658646751"
-                title="Sep 11, 2018 5:37 AM"
-              >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
-            >
-              Kara Murphy
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
-            >
-              <div
-                class="makeStyles-root-id undefined makeStyles-successDot-id"
-              >
-                Fully paid
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
-            >
-              <div
-                class="makeStyles-root-id undefined makeStyles-neutralDot-id"
-              >
-                Partially fulfilled
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-            >
-              $569.19
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
-              >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
-            >
-              #1
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
-            >
-              <time
-                class=""
-                datetime="1536658646314"
-                title="Sep 11, 2018 5:37 AM"
-              >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
-            >
-              Curtis Bailey
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
-            >
-              <div
-                class="makeStyles-root-id undefined makeStyles-successDot-id"
-              >
-                Fully paid
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
-            >
-              <div
-                class="makeStyles-root-id undefined makeStyles-neutralDot-id"
-              >
-                Partially fulfilled
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-            >
-              $557.00
-            </td>
-          </tr>
-        </tbody>
-      </table>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
+              >
+                <div
+                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                >
+                  Cancelled
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+              >
+                $305.17
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+              >
+                #19
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+              >
+                <time
+                  class=""
+                  datetime="1536658650124"
+                  title="Sep 11, 2018 5:37 AM"
+                >
+                  in a month
+                </time>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+              >
+                Elizabeth Vaughn
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
+              >
+                <div
+                  class="makeStyles-root-id undefined makeStyles-successDot-id"
+                >
+                  Fully paid
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
+              >
+                <div
+                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                >
+                  Cancelled
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+              >
+                $1,215.89
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+              >
+                #18
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+              >
+                <time
+                  class=""
+                  datetime="1536658650019"
+                  title="Sep 11, 2018 5:37 AM"
+                >
+                  in a month
+                </time>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+              >
+                david.lawson@example.com
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
+              >
+                <div
+                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                >
+                  Unpaid
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
+              >
+                <div
+                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                >
+                  Draft
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+              >
+                $321.71
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+              >
+                #17
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+              >
+                <time
+                  class=""
+                  datetime="1536658649864"
+                  title="Sep 11, 2018 5:37 AM"
+                >
+                  in a month
+                </time>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+              >
+                Aaron Randall
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
+              >
+                <div
+                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                >
+                  Unpaid
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
+              >
+                <div
+                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                >
+                  Cancelled
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+              >
+                $271.95
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+              >
+                #16
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+              >
+                <time
+                  class=""
+                  datetime="1536658649610"
+                  title="Sep 11, 2018 5:37 AM"
+                >
+                  in a month
+                </time>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+              >
+                Laura Jensen
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
+              >
+                <div
+                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                >
+                  Unpaid
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
+              >
+                <div
+                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                >
+                  Cancelled
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+              >
+                $335.84
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+              >
+                #15
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+              >
+                <time
+                  class=""
+                  datetime="1536658649336"
+                  title="Sep 11, 2018 5:37 AM"
+                >
+                  in a month
+                </time>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+              >
+                Jenna Villa
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
+              >
+                <div
+                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                >
+                  Unpaid
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
+              >
+                <div
+                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                >
+                  Cancelled
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+              >
+                $1,042.15
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+              >
+                #14
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+              >
+                <time
+                  class=""
+                  datetime="1536658649103"
+                  title="Sep 11, 2018 5:37 AM"
+                >
+                  in a month
+                </time>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+              >
+                Wesley Davis
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
+              >
+                <div
+                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                >
+                  Unpaid
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
+              >
+                <div
+                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                >
+                  Cancelled
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+              >
+                $213.69
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+              >
+                #13
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+              >
+                <time
+                  class=""
+                  datetime="1536658648921"
+                  title="Sep 11, 2018 5:37 AM"
+                >
+                  in a month
+                </time>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+              >
+                Anthony Gonzalez
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
+              >
+                <div
+                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                >
+                  Unpaid
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
+              >
+                <div
+                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                >
+                  Cancelled
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+              >
+                $367.03
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+              >
+                #12
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+              >
+                <time
+                  class=""
+                  datetime="1536658648750"
+                  title="Sep 11, 2018 5:37 AM"
+                >
+                  in a month
+                </time>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+              >
+                Denise Freeman
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
+              >
+                <div
+                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                >
+                  Unpaid
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
+              >
+                <div
+                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                >
+                  Cancelled
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+              >
+                $298.76
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+              >
+                #11
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+              >
+                <time
+                  class=""
+                  datetime="1536658648598"
+                  title="Sep 11, 2018 5:37 AM"
+                >
+                  in a month
+                </time>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+              >
+                James Ball
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
+              >
+                <div
+                  class="makeStyles-root-id undefined makeStyles-successDot-id"
+                >
+                  Fully paid
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
+              >
+                <div
+                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                >
+                  Unfulfilled
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+              >
+                $663.69
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+              >
+                #10
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+              >
+                <time
+                  class=""
+                  datetime="1536658648409"
+                  title="Sep 11, 2018 5:37 AM"
+                >
+                  in a month
+                </time>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+              >
+                Michael Martinez
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
+              >
+                <div
+                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                >
+                  Unpaid
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
+              >
+                <div
+                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                >
+                  Cancelled
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+              >
+                $280.41
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+              >
+                #9
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+              >
+                <time
+                  class=""
+                  datetime="1536658648185"
+                  title="Sep 11, 2018 5:37 AM"
+                >
+                  in a month
+                </time>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+              >
+                Melissa Simon
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
+              >
+                <div
+                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                >
+                  Unpaid
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
+              >
+                <div
+                  class="makeStyles-root-id undefined makeStyles-neutralDot-id"
+                >
+                  Partially fulfilled
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+              >
+                $234.93
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+              >
+                #8
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+              >
+                <time
+                  class=""
+                  datetime="1536658647953"
+                  title="Sep 11, 2018 5:37 AM"
+                >
+                  in a month
+                </time>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+              >
+                Justin Mccoy
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
+              >
+                <div
+                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                >
+                  Unpaid
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
+              >
+                <div
+                  class="makeStyles-root-id undefined makeStyles-neutralDot-id"
+                >
+                  Partially fulfilled
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+              >
+                $485.19
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+              >
+                #7
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+              >
+                <time
+                  class=""
+                  datetime="1536658647828"
+                  title="Sep 11, 2018 5:37 AM"
+                >
+                  in a month
+                </time>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+              >
+                Anthony Gonzalez
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
+              >
+                <div
+                  class="makeStyles-root-id undefined makeStyles-successDot-id"
+                >
+                  Fully paid
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
+              >
+                <div
+                  class="makeStyles-root-id undefined makeStyles-neutralDot-id"
+                >
+                  Partially fulfilled
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+              >
+                $223.54
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+              >
+                #6
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+              >
+                <time
+                  class=""
+                  datetime="1536658647636"
+                  title="Sep 11, 2018 5:37 AM"
+                >
+                  in a month
+                </time>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+              >
+                Bradley Ford
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
+              >
+                <div
+                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                >
+                  Unpaid
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
+              >
+                <div
+                  class="makeStyles-root-id undefined makeStyles-successDot-id"
+                >
+                  Fulfilled
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+              >
+                $237.55
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+              >
+                #5
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+              >
+                <time
+                  class=""
+                  datetime="1536658647420"
+                  title="Sep 11, 2018 5:37 AM"
+                >
+                  in a month
+                </time>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+              >
+                David Lawson
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
+              >
+                <div
+                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                >
+                  Unpaid
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
+              >
+                <div
+                  class="makeStyles-root-id undefined makeStyles-neutralDot-id"
+                >
+                  Partially fulfilled
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+              >
+                $453.55
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+              >
+                #4
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+              >
+                <time
+                  class=""
+                  datetime="1536658647230"
+                  title="Sep 11, 2018 5:37 AM"
+                >
+                  in a month
+                </time>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+              >
+                Lauren Watson
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
+              >
+                <div
+                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                >
+                  Unpaid
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
+              >
+                <div
+                  class="makeStyles-root-id undefined makeStyles-neutralDot-id"
+                >
+                  Partially fulfilled
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+              >
+                $812.67
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+              >
+                #3
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+              >
+                <time
+                  class=""
+                  datetime="1536658646972"
+                  title="Sep 11, 2018 5:37 AM"
+                >
+                  in a month
+                </time>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+              >
+                Mark Lee
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
+              >
+                <div
+                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                >
+                  Unpaid
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
+              >
+                <div
+                  class="makeStyles-root-id undefined makeStyles-neutralDot-id"
+                >
+                  Partially fulfilled
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+              >
+                $481.41
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+              >
+                #2
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+              >
+                <time
+                  class=""
+                  datetime="1536658646751"
+                  title="Sep 11, 2018 5:37 AM"
+                >
+                  in a month
+                </time>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+              >
+                Kara Murphy
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
+              >
+                <div
+                  class="makeStyles-root-id undefined makeStyles-successDot-id"
+                >
+                  Fully paid
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
+              >
+                <div
+                  class="makeStyles-root-id undefined makeStyles-neutralDot-id"
+                >
+                  Partially fulfilled
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+              >
+                $569.19
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+              >
+                #1
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+              >
+                <time
+                  class=""
+                  datetime="1536658646314"
+                  title="Sep 11, 2018 5:37 AM"
+                >
+                  in a month
+                </time>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+              >
+                Curtis Bailey
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
+              >
+                <div
+                  class="makeStyles-root-id undefined makeStyles-successDot-id"
+                >
+                  Fully paid
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
+              >
+                <div
+                  class="makeStyles-root-id undefined makeStyles-neutralDot-id"
+                >
+                  Partially fulfilled
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+              >
+                $557.00
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
     </div>
   </div>
 </div>
@@ -72838,10 +73298,10 @@ exports[`Storyshots Views / Orders / Order list loading 1`] = `
   style="padding:24px"
 >
   <div
-    class="makeStyles-root-id"
+    class="Container-root-id"
   >
     <div
-      class="makeStyles-root-id"
+      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
         class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -72849,7 +73309,7 @@ exports[`Storyshots Views / Orders / Order list loading 1`] = `
         Orders
       </div>
       <div
-        class="makeStyles-action-id"
+        class="ExtendedPageHeader-action-id"
       >
         <div
           class="makeStyles-root-id"
@@ -72969,265 +73429,269 @@ exports[`Storyshots Views / Orders / Order list loading 1`] = `
       <hr
         class="makeStyles-root-id"
       />
-      <table
-        class="MuiTable-root-id"
+      <div
+        class="ResponsiveTable-root-id"
       >
-        <thead
-          class="MuiTableHead-root-id"
+        <table
+          class="MuiTable-root-id"
         >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-head-id"
+          <thead
+            class="MuiTableHead-root-id"
           >
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
-              scope="col"
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-head-id"
             >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
-                disabled=""
-                tabindex="-1"
-                type="button"
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
+                scope="col"
               >
-                <input
-                  class="makeStyles-box-id makeStyles-disabled-id"
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
                   disabled=""
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colNumber-id"
-              scope="col"
-            >
-              No. of Order
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colDate-id"
-              scope="col"
-            >
-              Date
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colCustomer-id"
-              scope="col"
-            >
-              Customer
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPayment-id"
-              scope="col"
-            >
-              Payment
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colFulfillment-id"
-              scope="col"
-            >
-              Fulfillment status
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
-              scope="col"
-            >
-              Total
-            </th>
-          </tr>
-        </thead>
-        <tfoot
-          class="MuiTableFooter-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-footer-id"
+                  tabindex="-1"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id makeStyles-disabled-id"
+                    disabled=""
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colNumber-id"
+                scope="col"
+              >
+                No. of Order
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colDate-id"
+                scope="col"
+              >
+                Date
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colCustomer-id"
+                scope="col"
+              >
+                Customer
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPayment-id"
+                scope="col"
+              >
+                Payment
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colFulfillment-id"
+                scope="col"
+              >
+                Fulfillment status
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
+                scope="col"
+              >
+                Total
+              </th>
+            </tr>
+          </thead>
+          <tfoot
+            class="MuiTableFooter-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
-              colspan="7"
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-footer-id"
             >
-              <div
-                class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                colspan="7"
               >
                 <div
-                  class="makeStyles-spacer-id"
+                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
                 >
-                  <div>
-                    <span
-                      class="RowNumberSelect-label-id"
-                    >
-                      No of Rows:
-                    </span>
-                    <div
-                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
-                    >
+                  <div
+                    class="makeStyles-spacer-id"
+                  >
+                    <div>
+                      <span
+                        class="RowNumberSelect-label-id"
+                      >
+                        No of Rows:
+                      </span>
                       <div
-                        aria-haspopup="listbox"
-                        aria-labelledby=" "
-                        class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-id"
-                        role="button"
-                        tabindex="0"
+                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                       >
-                        20
-                      </div>
-                      <input
-                        type="hidden"
-                        value="20"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MuiSelect-icon-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M7 10l5 5 5-5z"
+                        <div
+                          aria-haspopup="listbox"
+                          aria-labelledby=" "
+                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-id"
+                          role="button"
+                          tabindex="0"
+                        >
+                          20
+                        </div>
+                        <input
+                          type="hidden"
+                          value="20"
                         />
-                      </svg>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M7 10l5 5 5-5z"
+                          />
+                        </svg>
+                      </div>
                     </div>
                   </div>
-                </div>
-                <div
-                  class="makeStyles-root-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                    data-tc="button-pagination-back"
-                    disabled=""
-                    tabindex="-1"
-                    type="button"
+                  <div
+                    class="makeStyles-root-id"
                   >
-                    <span
-                      class="MuiIconButton-label-id"
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      data-tc="button-pagination-back"
+                      disabled=""
+                      tabindex="-1"
+                      type="button"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
+                      <span
+                        class="MuiIconButton-label-id"
                       >
-                        <path
-                          d="M14 7l-5 5 5 5V7z"
-                        />
-                        <path
-                          d="M24 0v24H0V0h24z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                    data-tc="button-pagination-next"
-                    disabled=""
-                    tabindex="-1"
-                    type="button"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M14 7l-5 5 5 5V7z"
+                          />
+                          <path
+                            d="M24 0v24H0V0h24z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      data-tc="button-pagination-next"
+                      disabled=""
+                      tabindex="-1"
+                      type="button"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
+                      <span
+                        class="MuiIconButton-label-id"
                       >
-                        <path
-                          d="M10 17l5-5-5-5v10z"
-                        />
-                        <path
-                          d="M0 24V0h24v24H0z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M10 17l5-5-5-5v10z"
+                          />
+                          <path
+                            d="M0 24V0h24v24H0z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </div>
                 </div>
-              </div>
-            </td>
-          </tr>
-        </tfoot>
-        <tbody
-          class="MuiTableBody-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id"
+              </td>
+            </tr>
+          </tfoot>
+          <tbody
+            class="MuiTableBody-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+            <tr
+              class="MuiTableRow-root-id"
             >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
-                disabled=""
-                tabindex="-1"
-                type="button"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
-                <input
-                  class="makeStyles-box-id makeStyles-disabled-id"
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
                   disabled=""
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
-            >
-              <span
-                class="makeStyles-skeleton-id"
+                  tabindex="-1"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id makeStyles-disabled-id"
+                    disabled=""
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
               >
-                ‌
-              </span>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
-            >
-              <span
-                class="makeStyles-skeleton-id"
+                <span
+                  class="makeStyles-skeleton-id"
+                >
+                  ‌
+                </span>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
               >
-                ‌
-              </span>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
-            >
-              <span
-                class="makeStyles-skeleton-id"
+                <span
+                  class="makeStyles-skeleton-id"
+                >
+                  ‌
+                </span>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
               >
-                ‌
-              </span>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
-            >
-              <span
-                class="makeStyles-skeleton-id"
+                <span
+                  class="makeStyles-skeleton-id"
+                >
+                  ‌
+                </span>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
               >
-                ‌
-              </span>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
-            >
-              <span
-                class="makeStyles-skeleton-id"
+                <span
+                  class="makeStyles-skeleton-id"
+                >
+                  ‌
+                </span>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
               >
-                ‌
-              </span>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-            >
-              <span
-                class="makeStyles-skeleton-id"
+                <span
+                  class="makeStyles-skeleton-id"
+                >
+                  ‌
+                </span>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
               >
-                ‌
-              </span>
-            </td>
-          </tr>
-        </tbody>
-      </table>
+                <span
+                  class="makeStyles-skeleton-id"
+                >
+                  ‌
+                </span>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
     </div>
   </div>
 </div>
@@ -73238,10 +73702,10 @@ exports[`Storyshots Views / Orders / Order list when no data 1`] = `
   style="padding:24px"
 >
   <div
-    class="makeStyles-root-id"
+    class="Container-root-id"
   >
     <div
-      class="makeStyles-root-id"
+      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
         class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -73249,7 +73713,7 @@ exports[`Storyshots Views / Orders / Order list when no data 1`] = `
         Orders
       </div>
       <div
-        class="makeStyles-action-id"
+        class="ExtendedPageHeader-action-id"
       >
         <div
           class="makeStyles-root-id"
@@ -73369,181 +73833,185 @@ exports[`Storyshots Views / Orders / Order list when no data 1`] = `
       <hr
         class="makeStyles-root-id"
       />
-      <table
-        class="MuiTable-root-id"
+      <div
+        class="ResponsiveTable-root-id"
       >
-        <thead
-          class="MuiTableHead-root-id"
+        <table
+          class="MuiTable-root-id"
         >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-head-id"
+          <thead
+            class="MuiTableHead-root-id"
           >
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colNumber-id"
-              scope="col"
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-head-id"
             >
-              No. of Order
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colDate-id"
-              scope="col"
-            >
-              Date
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colCustomer-id"
-              scope="col"
-            >
-              Customer
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPayment-id"
-              scope="col"
-            >
-              Payment
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colFulfillment-id"
-              scope="col"
-            >
-              Fulfillment status
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
-              scope="col"
-            >
-              Total
-            </th>
-          </tr>
-        </thead>
-        <tfoot
-          class="MuiTableFooter-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-footer-id"
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colNumber-id"
+                scope="col"
+              >
+                No. of Order
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colDate-id"
+                scope="col"
+              >
+                Date
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colCustomer-id"
+                scope="col"
+              >
+                Customer
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPayment-id"
+                scope="col"
+              >
+                Payment
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colFulfillment-id"
+                scope="col"
+              >
+                Fulfillment status
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
+                scope="col"
+              >
+                Total
+              </th>
+            </tr>
+          </thead>
+          <tfoot
+            class="MuiTableFooter-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
-              colspan="7"
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-footer-id"
             >
-              <div
-                class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                colspan="7"
               >
                 <div
-                  class="makeStyles-spacer-id"
+                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
                 >
-                  <div>
-                    <span
-                      class="RowNumberSelect-label-id"
-                    >
-                      No of Rows:
-                    </span>
-                    <div
-                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
-                    >
+                  <div
+                    class="makeStyles-spacer-id"
+                  >
+                    <div>
+                      <span
+                        class="RowNumberSelect-label-id"
+                      >
+                        No of Rows:
+                      </span>
                       <div
-                        aria-haspopup="listbox"
-                        aria-labelledby=" "
-                        class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-id"
-                        role="button"
-                        tabindex="0"
+                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                       >
-                        20
-                      </div>
-                      <input
-                        type="hidden"
-                        value="20"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MuiSelect-icon-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M7 10l5 5 5-5z"
+                        <div
+                          aria-haspopup="listbox"
+                          aria-labelledby=" "
+                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-id"
+                          role="button"
+                          tabindex="0"
+                        >
+                          20
+                        </div>
+                        <input
+                          type="hidden"
+                          value="20"
                         />
-                      </svg>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M7 10l5 5 5-5z"
+                          />
+                        </svg>
+                      </div>
                     </div>
                   </div>
-                </div>
-                <div
-                  class="makeStyles-root-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                    data-tc="button-pagination-back"
-                    disabled=""
-                    tabindex="-1"
-                    type="button"
+                  <div
+                    class="makeStyles-root-id"
                   >
-                    <span
-                      class="MuiIconButton-label-id"
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      data-tc="button-pagination-back"
+                      disabled=""
+                      tabindex="-1"
+                      type="button"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
+                      <span
+                        class="MuiIconButton-label-id"
                       >
-                        <path
-                          d="M14 7l-5 5 5 5V7z"
-                        />
-                        <path
-                          d="M24 0v24H0V0h24z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
-                    data-tc="button-pagination-next"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M14 7l-5 5 5 5V7z"
+                          />
+                          <path
+                            d="M24 0v24H0V0h24z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                      data-tc="button-pagination-next"
+                      tabindex="0"
+                      type="button"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
+                      <span
+                        class="MuiIconButton-label-id"
                       >
-                        <path
-                          d="M10 17l5-5-5-5v10z"
-                        />
-                        <path
-                          d="M0 24V0h24v24H0z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M10 17l5-5-5-5v10z"
+                          />
+                          <path
+                            d="M0 24V0h24v24H0z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </div>
                 </div>
-              </div>
-            </td>
-          </tr>
-        </tfoot>
-        <tbody
-          class="MuiTableBody-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id"
+              </td>
+            </tr>
+          </tfoot>
+          <tbody
+            class="MuiTableBody-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-              colspan="7"
+            <tr
+              class="MuiTableRow-root-id"
             >
-              No orders found
-            </td>
-          </tr>
-        </tbody>
-      </table>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id"
+                colspan="7"
+              >
+                No orders found
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
     </div>
   </div>
 </div>
@@ -73554,10 +74022,10 @@ exports[`Storyshots Views / Orders / Order list with custom filters 1`] = `
   style="padding:24px"
 >
   <div
-    class="makeStyles-root-id"
+    class="Container-root-id"
   >
     <div
-      class="makeStyles-root-id"
+      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
         class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -73565,7 +74033,7 @@ exports[`Storyshots Views / Orders / Order list with custom filters 1`] = `
         Orders
       </div>
       <div
-        class="makeStyles-action-id"
+        class="ExtendedPageHeader-action-id"
       >
         <div
           class="makeStyles-root-id"
@@ -74080,1447 +74548,1451 @@ exports[`Storyshots Views / Orders / Order list with custom filters 1`] = `
           </div>
         </div>
       </div>
-      <table
-        class="MuiTable-root-id"
+      <div
+        class="ResponsiveTable-root-id"
       >
-        <thead
-          class="MuiTableHead-root-id"
+        <table
+          class="MuiTable-root-id"
         >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-head-id"
+          <thead
+            class="MuiTableHead-root-id"
           >
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
-              scope="col"
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-head-id"
             >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
+                scope="col"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colNumber-id"
-              scope="col"
-            >
-              No. of Order
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colDate-id"
-              scope="col"
-            >
-              Date
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colCustomer-id"
-              scope="col"
-            >
-              Customer
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPayment-id"
-              scope="col"
-            >
-              Payment
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colFulfillment-id"
-              scope="col"
-            >
-              Fulfillment status
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
-              scope="col"
-            >
-              Total
-            </th>
-          </tr>
-        </thead>
-        <tfoot
-          class="MuiTableFooter-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-footer-id"
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colNumber-id"
+                scope="col"
+              >
+                No. of Order
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colDate-id"
+                scope="col"
+              >
+                Date
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colCustomer-id"
+                scope="col"
+              >
+                Customer
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPayment-id"
+                scope="col"
+              >
+                Payment
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colFulfillment-id"
+                scope="col"
+              >
+                Fulfillment status
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
+                scope="col"
+              >
+                Total
+              </th>
+            </tr>
+          </thead>
+          <tfoot
+            class="MuiTableFooter-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
-              colspan="7"
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-footer-id"
             >
-              <div
-                class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                colspan="7"
               >
                 <div
-                  class="makeStyles-spacer-id"
+                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
                 >
-                  <div>
-                    <span
-                      class="RowNumberSelect-label-id"
-                    >
-                      No of Rows:
-                    </span>
-                    <div
-                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
-                    >
+                  <div
+                    class="makeStyles-spacer-id"
+                  >
+                    <div>
+                      <span
+                        class="RowNumberSelect-label-id"
+                      >
+                        No of Rows:
+                      </span>
                       <div
-                        aria-haspopup="listbox"
-                        aria-labelledby=" "
-                        class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-id"
-                        role="button"
-                        tabindex="0"
+                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                       >
-                        20
-                      </div>
-                      <input
-                        type="hidden"
-                        value="20"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MuiSelect-icon-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M7 10l5 5 5-5z"
+                        <div
+                          aria-haspopup="listbox"
+                          aria-labelledby=" "
+                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-id"
+                          role="button"
+                          tabindex="0"
+                        >
+                          20
+                        </div>
+                        <input
+                          type="hidden"
+                          value="20"
                         />
-                      </svg>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M7 10l5 5 5-5z"
+                          />
+                        </svg>
+                      </div>
                     </div>
                   </div>
+                  <div
+                    class="makeStyles-root-id"
+                  >
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      data-tc="button-pagination-back"
+                      disabled=""
+                      tabindex="-1"
+                      type="button"
+                    >
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M14 7l-5 5 5 5V7z"
+                          />
+                          <path
+                            d="M24 0v24H0V0h24z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                      data-tc="button-pagination-next"
+                      tabindex="0"
+                      type="button"
+                    >
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M10 17l5-5-5-5v10z"
+                          />
+                          <path
+                            d="M0 24V0h24v24H0z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </div>
                 </div>
-                <div
-                  class="makeStyles-root-id"
+              </td>
+            </tr>
+          </tfoot>
+          <tbody
+            class="MuiTableBody-root-id"
+          >
+            <tr
+              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
                 >
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                    data-tc="button-pagination-back"
-                    disabled=""
-                    tabindex="-1"
-                    type="button"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M14 7l-5 5 5 5V7z"
-                        />
-                        <path
-                          d="M24 0v24H0V0h24z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
-                    data-tc="button-pagination-next"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M10 17l5-5-5-5v10z"
-                        />
-                        <path
-                          d="M0 24V0h24v24H0z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+              >
+                #20
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+              >
+                <time
+                  class=""
+                  datetime="1536658650376"
+                  title="Sep 11, 2018 5:37 AM"
+                >
+                  in a month
+                </time>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+              >
+                Laura Stone 1 2
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
+              >
+                <div
+                  class="makeStyles-root-id undefined makeStyles-successDot-id"
+                >
+                  Fully paid
                 </div>
-              </div>
-            </td>
-          </tr>
-        </tfoot>
-        <tbody
-          class="MuiTableBody-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
-              >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
-            >
-              #20
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
-            >
-              <time
-                class=""
-                datetime="1536658650376"
-                title="Sep 11, 2018 5:37 AM"
-              >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
-            >
-              Laura Stone 1 2
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
-            >
-              <div
-                class="makeStyles-root-id undefined makeStyles-successDot-id"
-              >
-                Fully paid
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
-            >
-              <div
-                class="makeStyles-root-id undefined makeStyles-errorDot-id"
-              >
-                Cancelled
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-            >
-              $305.17
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
-              >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
-            >
-              #19
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
-            >
-              <time
-                class=""
-                datetime="1536658650124"
-                title="Sep 11, 2018 5:37 AM"
-              >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
-            >
-              Elizabeth Vaughn
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
-            >
-              <div
-                class="makeStyles-root-id undefined makeStyles-successDot-id"
-              >
-                Fully paid
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
-            >
-              <div
-                class="makeStyles-root-id undefined makeStyles-errorDot-id"
-              >
-                Cancelled
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-            >
-              $1,215.89
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
-              >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
-            >
-              #18
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
-            >
-              <time
-                class=""
-                datetime="1536658650019"
-                title="Sep 11, 2018 5:37 AM"
-              >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
-            >
-              david.lawson@example.com
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
-            >
-              <div
-                class="makeStyles-root-id undefined makeStyles-errorDot-id"
-              >
-                Unpaid
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
-            >
-              <div
-                class="makeStyles-root-id undefined makeStyles-errorDot-id"
-              >
-                Draft
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-            >
-              $321.71
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
-              >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
-            >
-              #17
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
-            >
-              <time
-                class=""
-                datetime="1536658649864"
-                title="Sep 11, 2018 5:37 AM"
-              >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
-            >
-              Aaron Randall
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
-            >
-              <div
-                class="makeStyles-root-id undefined makeStyles-errorDot-id"
-              >
-                Unpaid
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
-            >
-              <div
-                class="makeStyles-root-id undefined makeStyles-errorDot-id"
-              >
-                Cancelled
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-            >
-              $271.95
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
-              >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
-            >
-              #16
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
-            >
-              <time
-                class=""
-                datetime="1536658649610"
-                title="Sep 11, 2018 5:37 AM"
-              >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
-            >
-              Laura Jensen
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
-            >
-              <div
-                class="makeStyles-root-id undefined makeStyles-errorDot-id"
-              >
-                Unpaid
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
-            >
-              <div
-                class="makeStyles-root-id undefined makeStyles-errorDot-id"
-              >
-                Cancelled
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-            >
-              $335.84
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
-              >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
-            >
-              #15
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
-            >
-              <time
-                class=""
-                datetime="1536658649336"
-                title="Sep 11, 2018 5:37 AM"
-              >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
-            >
-              Jenna Villa
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
-            >
-              <div
-                class="makeStyles-root-id undefined makeStyles-errorDot-id"
-              >
-                Unpaid
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
-            >
-              <div
-                class="makeStyles-root-id undefined makeStyles-errorDot-id"
-              >
-                Cancelled
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-            >
-              $1,042.15
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
-              >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
-            >
-              #14
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
-            >
-              <time
-                class=""
-                datetime="1536658649103"
-                title="Sep 11, 2018 5:37 AM"
-              >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
-            >
-              Wesley Davis
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
-            >
-              <div
-                class="makeStyles-root-id undefined makeStyles-errorDot-id"
-              >
-                Unpaid
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
-            >
-              <div
-                class="makeStyles-root-id undefined makeStyles-errorDot-id"
-              >
-                Cancelled
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-            >
-              $213.69
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
-              >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
-            >
-              #13
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
-            >
-              <time
-                class=""
-                datetime="1536658648921"
-                title="Sep 11, 2018 5:37 AM"
-              >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
-            >
-              Anthony Gonzalez
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
-            >
-              <div
-                class="makeStyles-root-id undefined makeStyles-errorDot-id"
-              >
-                Unpaid
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
-            >
-              <div
-                class="makeStyles-root-id undefined makeStyles-errorDot-id"
-              >
-                Cancelled
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-            >
-              $367.03
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
-              >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
-            >
-              #12
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
-            >
-              <time
-                class=""
-                datetime="1536658648750"
-                title="Sep 11, 2018 5:37 AM"
-              >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
-            >
-              Denise Freeman
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
-            >
-              <div
-                class="makeStyles-root-id undefined makeStyles-errorDot-id"
-              >
-                Unpaid
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
-            >
-              <div
-                class="makeStyles-root-id undefined makeStyles-errorDot-id"
-              >
-                Cancelled
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-            >
-              $298.76
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
-              >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
-            >
-              #11
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
-            >
-              <time
-                class=""
-                datetime="1536658648598"
-                title="Sep 11, 2018 5:37 AM"
-              >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
-            >
-              James Ball
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
-            >
-              <div
-                class="makeStyles-root-id undefined makeStyles-successDot-id"
-              >
-                Fully paid
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
-            >
-              <div
-                class="makeStyles-root-id undefined makeStyles-errorDot-id"
-              >
-                Unfulfilled
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-            >
-              $663.69
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
-              >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
-            >
-              #10
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
-            >
-              <time
-                class=""
-                datetime="1536658648409"
-                title="Sep 11, 2018 5:37 AM"
-              >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
-            >
-              Michael Martinez
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
-            >
-              <div
-                class="makeStyles-root-id undefined makeStyles-errorDot-id"
-              >
-                Unpaid
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
-            >
-              <div
-                class="makeStyles-root-id undefined makeStyles-errorDot-id"
-              >
-                Cancelled
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-            >
-              $280.41
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
-              >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
-            >
-              #9
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
-            >
-              <time
-                class=""
-                datetime="1536658648185"
-                title="Sep 11, 2018 5:37 AM"
-              >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
-            >
-              Melissa Simon
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
-            >
-              <div
-                class="makeStyles-root-id undefined makeStyles-errorDot-id"
-              >
-                Unpaid
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
-            >
-              <div
-                class="makeStyles-root-id undefined makeStyles-neutralDot-id"
-              >
-                Partially fulfilled
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-            >
-              $234.93
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
-              >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
-            >
-              #8
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
-            >
-              <time
-                class=""
-                datetime="1536658647953"
-                title="Sep 11, 2018 5:37 AM"
-              >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
-            >
-              Justin Mccoy
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
-            >
-              <div
-                class="makeStyles-root-id undefined makeStyles-errorDot-id"
-              >
-                Unpaid
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
-            >
-              <div
-                class="makeStyles-root-id undefined makeStyles-neutralDot-id"
-              >
-                Partially fulfilled
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-            >
-              $485.19
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
-              >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
-            >
-              #7
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
-            >
-              <time
-                class=""
-                datetime="1536658647828"
-                title="Sep 11, 2018 5:37 AM"
-              >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
-            >
-              Anthony Gonzalez
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
-            >
-              <div
-                class="makeStyles-root-id undefined makeStyles-successDot-id"
-              >
-                Fully paid
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
-            >
-              <div
-                class="makeStyles-root-id undefined makeStyles-neutralDot-id"
-              >
-                Partially fulfilled
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-            >
-              $223.54
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
-              >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
-            >
-              #6
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
-            >
-              <time
-                class=""
-                datetime="1536658647636"
-                title="Sep 11, 2018 5:37 AM"
-              >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
-            >
-              Bradley Ford
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
-            >
-              <div
-                class="makeStyles-root-id undefined makeStyles-errorDot-id"
-              >
-                Unpaid
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
-            >
-              <div
-                class="makeStyles-root-id undefined makeStyles-successDot-id"
-              >
-                Fulfilled
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-            >
-              $237.55
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
-              >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
-            >
-              #5
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
-            >
-              <time
-                class=""
-                datetime="1536658647420"
-                title="Sep 11, 2018 5:37 AM"
-              >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
-            >
-              David Lawson
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
-            >
-              <div
-                class="makeStyles-root-id undefined makeStyles-errorDot-id"
-              >
-                Unpaid
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
-            >
-              <div
-                class="makeStyles-root-id undefined makeStyles-neutralDot-id"
-              >
-                Partially fulfilled
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-            >
-              $453.55
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
-              >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
-            >
-              #4
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
-            >
-              <time
-                class=""
-                datetime="1536658647230"
-                title="Sep 11, 2018 5:37 AM"
-              >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
-            >
-              Lauren Watson
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
-            >
-              <div
-                class="makeStyles-root-id undefined makeStyles-errorDot-id"
-              >
-                Unpaid
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
-            >
-              <div
-                class="makeStyles-root-id undefined makeStyles-neutralDot-id"
-              >
-                Partially fulfilled
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-            >
-              $812.67
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
-              >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
-            >
-              #3
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
-            >
-              <time
-                class=""
-                datetime="1536658646972"
-                title="Sep 11, 2018 5:37 AM"
-              >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
-            >
-              Mark Lee
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
-            >
-              <div
-                class="makeStyles-root-id undefined makeStyles-errorDot-id"
-              >
-                Unpaid
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
-            >
-              <div
-                class="makeStyles-root-id undefined makeStyles-neutralDot-id"
-              >
-                Partially fulfilled
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-            >
-              $481.41
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
-              >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
-            >
-              #2
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
-            >
-              <time
-                class=""
-                datetime="1536658646751"
-                title="Sep 11, 2018 5:37 AM"
-              >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
-            >
-              Kara Murphy
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
-            >
-              <div
-                class="makeStyles-root-id undefined makeStyles-successDot-id"
-              >
-                Fully paid
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
-            >
-              <div
-                class="makeStyles-root-id undefined makeStyles-neutralDot-id"
-              >
-                Partially fulfilled
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-            >
-              $569.19
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
-              >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
-            >
-              #1
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
-            >
-              <time
-                class=""
-                datetime="1536658646314"
-                title="Sep 11, 2018 5:37 AM"
-              >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
-            >
-              Curtis Bailey
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
-            >
-              <div
-                class="makeStyles-root-id undefined makeStyles-successDot-id"
-              >
-                Fully paid
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
-            >
-              <div
-                class="makeStyles-root-id undefined makeStyles-neutralDot-id"
-              >
-                Partially fulfilled
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
-            >
-              $557.00
-            </td>
-          </tr>
-        </tbody>
-      </table>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
+              >
+                <div
+                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                >
+                  Cancelled
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+              >
+                $305.17
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+              >
+                #19
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+              >
+                <time
+                  class=""
+                  datetime="1536658650124"
+                  title="Sep 11, 2018 5:37 AM"
+                >
+                  in a month
+                </time>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+              >
+                Elizabeth Vaughn
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
+              >
+                <div
+                  class="makeStyles-root-id undefined makeStyles-successDot-id"
+                >
+                  Fully paid
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
+              >
+                <div
+                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                >
+                  Cancelled
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+              >
+                $1,215.89
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+              >
+                #18
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+              >
+                <time
+                  class=""
+                  datetime="1536658650019"
+                  title="Sep 11, 2018 5:37 AM"
+                >
+                  in a month
+                </time>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+              >
+                david.lawson@example.com
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
+              >
+                <div
+                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                >
+                  Unpaid
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
+              >
+                <div
+                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                >
+                  Draft
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+              >
+                $321.71
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+              >
+                #17
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+              >
+                <time
+                  class=""
+                  datetime="1536658649864"
+                  title="Sep 11, 2018 5:37 AM"
+                >
+                  in a month
+                </time>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+              >
+                Aaron Randall
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
+              >
+                <div
+                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                >
+                  Unpaid
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
+              >
+                <div
+                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                >
+                  Cancelled
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+              >
+                $271.95
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+              >
+                #16
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+              >
+                <time
+                  class=""
+                  datetime="1536658649610"
+                  title="Sep 11, 2018 5:37 AM"
+                >
+                  in a month
+                </time>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+              >
+                Laura Jensen
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
+              >
+                <div
+                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                >
+                  Unpaid
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
+              >
+                <div
+                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                >
+                  Cancelled
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+              >
+                $335.84
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+              >
+                #15
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+              >
+                <time
+                  class=""
+                  datetime="1536658649336"
+                  title="Sep 11, 2018 5:37 AM"
+                >
+                  in a month
+                </time>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+              >
+                Jenna Villa
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
+              >
+                <div
+                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                >
+                  Unpaid
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
+              >
+                <div
+                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                >
+                  Cancelled
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+              >
+                $1,042.15
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+              >
+                #14
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+              >
+                <time
+                  class=""
+                  datetime="1536658649103"
+                  title="Sep 11, 2018 5:37 AM"
+                >
+                  in a month
+                </time>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+              >
+                Wesley Davis
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
+              >
+                <div
+                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                >
+                  Unpaid
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
+              >
+                <div
+                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                >
+                  Cancelled
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+              >
+                $213.69
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+              >
+                #13
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+              >
+                <time
+                  class=""
+                  datetime="1536658648921"
+                  title="Sep 11, 2018 5:37 AM"
+                >
+                  in a month
+                </time>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+              >
+                Anthony Gonzalez
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
+              >
+                <div
+                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                >
+                  Unpaid
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
+              >
+                <div
+                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                >
+                  Cancelled
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+              >
+                $367.03
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+              >
+                #12
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+              >
+                <time
+                  class=""
+                  datetime="1536658648750"
+                  title="Sep 11, 2018 5:37 AM"
+                >
+                  in a month
+                </time>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+              >
+                Denise Freeman
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
+              >
+                <div
+                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                >
+                  Unpaid
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
+              >
+                <div
+                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                >
+                  Cancelled
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+              >
+                $298.76
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+              >
+                #11
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+              >
+                <time
+                  class=""
+                  datetime="1536658648598"
+                  title="Sep 11, 2018 5:37 AM"
+                >
+                  in a month
+                </time>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+              >
+                James Ball
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
+              >
+                <div
+                  class="makeStyles-root-id undefined makeStyles-successDot-id"
+                >
+                  Fully paid
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
+              >
+                <div
+                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                >
+                  Unfulfilled
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+              >
+                $663.69
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+              >
+                #10
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+              >
+                <time
+                  class=""
+                  datetime="1536658648409"
+                  title="Sep 11, 2018 5:37 AM"
+                >
+                  in a month
+                </time>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+              >
+                Michael Martinez
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
+              >
+                <div
+                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                >
+                  Unpaid
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
+              >
+                <div
+                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                >
+                  Cancelled
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+              >
+                $280.41
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+              >
+                #9
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+              >
+                <time
+                  class=""
+                  datetime="1536658648185"
+                  title="Sep 11, 2018 5:37 AM"
+                >
+                  in a month
+                </time>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+              >
+                Melissa Simon
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
+              >
+                <div
+                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                >
+                  Unpaid
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
+              >
+                <div
+                  class="makeStyles-root-id undefined makeStyles-neutralDot-id"
+                >
+                  Partially fulfilled
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+              >
+                $234.93
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+              >
+                #8
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+              >
+                <time
+                  class=""
+                  datetime="1536658647953"
+                  title="Sep 11, 2018 5:37 AM"
+                >
+                  in a month
+                </time>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+              >
+                Justin Mccoy
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
+              >
+                <div
+                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                >
+                  Unpaid
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
+              >
+                <div
+                  class="makeStyles-root-id undefined makeStyles-neutralDot-id"
+                >
+                  Partially fulfilled
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+              >
+                $485.19
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+              >
+                #7
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+              >
+                <time
+                  class=""
+                  datetime="1536658647828"
+                  title="Sep 11, 2018 5:37 AM"
+                >
+                  in a month
+                </time>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+              >
+                Anthony Gonzalez
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
+              >
+                <div
+                  class="makeStyles-root-id undefined makeStyles-successDot-id"
+                >
+                  Fully paid
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
+              >
+                <div
+                  class="makeStyles-root-id undefined makeStyles-neutralDot-id"
+                >
+                  Partially fulfilled
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+              >
+                $223.54
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+              >
+                #6
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+              >
+                <time
+                  class=""
+                  datetime="1536658647636"
+                  title="Sep 11, 2018 5:37 AM"
+                >
+                  in a month
+                </time>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+              >
+                Bradley Ford
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
+              >
+                <div
+                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                >
+                  Unpaid
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
+              >
+                <div
+                  class="makeStyles-root-id undefined makeStyles-successDot-id"
+                >
+                  Fulfilled
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+              >
+                $237.55
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+              >
+                #5
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+              >
+                <time
+                  class=""
+                  datetime="1536658647420"
+                  title="Sep 11, 2018 5:37 AM"
+                >
+                  in a month
+                </time>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+              >
+                David Lawson
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
+              >
+                <div
+                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                >
+                  Unpaid
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
+              >
+                <div
+                  class="makeStyles-root-id undefined makeStyles-neutralDot-id"
+                >
+                  Partially fulfilled
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+              >
+                $453.55
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+              >
+                #4
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+              >
+                <time
+                  class=""
+                  datetime="1536658647230"
+                  title="Sep 11, 2018 5:37 AM"
+                >
+                  in a month
+                </time>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+              >
+                Lauren Watson
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
+              >
+                <div
+                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                >
+                  Unpaid
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
+              >
+                <div
+                  class="makeStyles-root-id undefined makeStyles-neutralDot-id"
+                >
+                  Partially fulfilled
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+              >
+                $812.67
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+              >
+                #3
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+              >
+                <time
+                  class=""
+                  datetime="1536658646972"
+                  title="Sep 11, 2018 5:37 AM"
+                >
+                  in a month
+                </time>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+              >
+                Mark Lee
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
+              >
+                <div
+                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                >
+                  Unpaid
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
+              >
+                <div
+                  class="makeStyles-root-id undefined makeStyles-neutralDot-id"
+                >
+                  Partially fulfilled
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+              >
+                $481.41
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+              >
+                #2
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+              >
+                <time
+                  class=""
+                  datetime="1536658646751"
+                  title="Sep 11, 2018 5:37 AM"
+                >
+                  in a month
+                </time>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+              >
+                Kara Murphy
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
+              >
+                <div
+                  class="makeStyles-root-id undefined makeStyles-successDot-id"
+                >
+                  Fully paid
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
+              >
+                <div
+                  class="makeStyles-root-id undefined makeStyles-neutralDot-id"
+                >
+                  Partially fulfilled
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+              >
+                $569.19
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+              >
+                #1
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+              >
+                <time
+                  class=""
+                  datetime="1536658646314"
+                  title="Sep 11, 2018 5:37 AM"
+                >
+                  in a month
+                </time>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+              >
+                Curtis Bailey
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
+              >
+                <div
+                  class="makeStyles-root-id undefined makeStyles-successDot-id"
+                >
+                  Fully paid
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
+              >
+                <div
+                  class="makeStyles-root-id undefined makeStyles-neutralDot-id"
+                >
+                  Partially fulfilled
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+              >
+                $557.00
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
     </div>
   </div>
 </div>
@@ -75532,10 +76004,10 @@ exports[`Storyshots Views / Pages / Page details default 1`] = `
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -75543,7 +76015,7 @@ exports[`Storyshots Views / Pages / Page details default 1`] = `
           About
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -76424,10 +76896,10 @@ exports[`Storyshots Views / Pages / Page details form errors 1`] = `
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -76435,7 +76907,7 @@ exports[`Storyshots Views / Pages / Page details form errors 1`] = `
           About
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -77321,10 +77793,10 @@ exports[`Storyshots Views / Pages / Page details loading 1`] = `
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -77337,7 +77809,7 @@ exports[`Storyshots Views / Pages / Page details loading 1`] = `
           </span>
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -78019,10 +78491,10 @@ exports[`Storyshots Views / Pages / Page list default 1`] = `
   style="padding:24px"
 >
   <div
-    class="makeStyles-root-id"
+    class="Container-root-id"
   >
     <div
-      class="makeStyles-root-id"
+      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
         class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -78030,7 +78502,7 @@ exports[`Storyshots Views / Pages / Page list default 1`] = `
         Pages
       </div>
       <div
-        class="makeStyles-action-id"
+        class="ExtendedPageHeader-action-id"
       >
         <div
           class="makeStyles-root-id"
@@ -78052,321 +78524,325 @@ exports[`Storyshots Views / Pages / Page list default 1`] = `
     <div
       class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
     >
-      <table
-        class="MuiTable-root-id"
+      <div
+        class="ResponsiveTable-root-id"
       >
-        <thead
-          class="MuiTableHead-root-id"
+        <table
+          class="MuiTable-root-id"
         >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-head-id"
+          <thead
+            class="MuiTableHead-root-id"
           >
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
-              scope="col"
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-head-id"
             >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
+                scope="col"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTitle-id"
-              scope="col"
-            >
-              Title
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colSlug-id"
-              scope="col"
-            >
-              Slug
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colVisibility-id"
-              scope="col"
-            >
-              Visibility
-            </th>
-          </tr>
-        </thead>
-        <tfoot
-          class="MuiTableFooter-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-footer-id"
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTitle-id"
+                scope="col"
+              >
+                Title
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colSlug-id"
+                scope="col"
+              >
+                Slug
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colVisibility-id"
+                scope="col"
+              >
+                Visibility
+              </th>
+            </tr>
+          </thead>
+          <tfoot
+            class="MuiTableFooter-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
-              colspan="4"
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-footer-id"
             >
-              <div
-                class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                colspan="4"
               >
                 <div
-                  class="makeStyles-spacer-id"
+                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
                 >
-                  <div>
-                    <span
-                      class="RowNumberSelect-label-id"
-                    >
-                      No of Rows:
-                    </span>
-                    <div
-                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
-                    >
+                  <div
+                    class="makeStyles-spacer-id"
+                  >
+                    <div>
+                      <span
+                        class="RowNumberSelect-label-id"
+                      >
+                        No of Rows:
+                      </span>
                       <div
-                        aria-haspopup="listbox"
-                        aria-labelledby=" "
-                        class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-id"
-                        role="button"
-                        tabindex="0"
+                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                       >
-                        20
-                      </div>
-                      <input
-                        type="hidden"
-                        value="20"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MuiSelect-icon-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M7 10l5 5 5-5z"
+                        <div
+                          aria-haspopup="listbox"
+                          aria-labelledby=" "
+                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-id"
+                          role="button"
+                          tabindex="0"
+                        >
+                          20
+                        </div>
+                        <input
+                          type="hidden"
+                          value="20"
                         />
-                      </svg>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M7 10l5 5 5-5z"
+                          />
+                        </svg>
+                      </div>
                     </div>
                   </div>
+                  <div
+                    class="makeStyles-root-id"
+                  >
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      data-tc="button-pagination-back"
+                      disabled=""
+                      tabindex="-1"
+                      type="button"
+                    >
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M14 7l-5 5 5 5V7z"
+                          />
+                          <path
+                            d="M24 0v24H0V0h24z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                      data-tc="button-pagination-next"
+                      tabindex="0"
+                      type="button"
+                    >
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M10 17l5-5-5-5v10z"
+                          />
+                          <path
+                            d="M0 24V0h24v24H0z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </div>
                 </div>
-                <div
-                  class="makeStyles-root-id"
+              </td>
+            </tr>
+          </tfoot>
+          <tbody
+            class="MuiTableBody-root-id"
+          >
+            <tr
+              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
                 >
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                    data-tc="button-pagination-back"
-                    disabled=""
-                    tabindex="-1"
-                    type="button"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M14 7l-5 5 5 5V7z"
-                        />
-                        <path
-                          d="M24 0v24H0V0h24z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
-                    data-tc="button-pagination-next"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M10 17l5-5-5-5v10z"
-                        />
-                        <path
-                          d="M0 24V0h24v24H0z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTitle-id"
+              >
+                About
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSlug-id"
+              >
+                about
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colVisibility-id"
+              >
+                <div
+                  class="makeStyles-root-id undefined makeStyles-successDot-id"
+                >
+                  Published
                 </div>
-              </div>
-            </td>
-          </tr>
-        </tfoot>
-        <tbody
-          class="MuiTableBody-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
             >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTitle-id"
-            >
-              About
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSlug-id"
-            >
-              about
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colVisibility-id"
-            >
-              <div
-                class="makeStyles-root-id undefined makeStyles-successDot-id"
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTitle-id"
               >
-                Published
-              </div>
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+                About
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSlug-id"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTitle-id"
-            >
-              About
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSlug-id"
-            >
-              about
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colVisibility-id"
-            >
-              <div
-                class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                about
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colVisibility-id"
               >
-                Not Published
-              </div>
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+                <div
+                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                >
+                  Not Published
+                </div>
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
             >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTitle-id"
-            >
-              About
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSlug-id"
-            >
-              about
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colVisibility-id"
-            >
-              <div
-                class="makeStyles-root-id undefined makeStyles-successDot-id"
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTitle-id"
               >
-                Published
-              </div>
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+                About
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSlug-id"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTitle-id"
-            >
-              About
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSlug-id"
-            >
-              about
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colVisibility-id"
-            >
-              <div
-                class="makeStyles-root-id undefined makeStyles-successDot-id"
+                about
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colVisibility-id"
               >
-                Published
-              </div>
-            </td>
-          </tr>
-        </tbody>
-      </table>
+                <div
+                  class="makeStyles-root-id undefined makeStyles-successDot-id"
+                >
+                  Published
+                </div>
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTitle-id"
+              >
+                About
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSlug-id"
+              >
+                about
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colVisibility-id"
+              >
+                <div
+                  class="makeStyles-root-id undefined makeStyles-successDot-id"
+                >
+                  Published
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
     </div>
   </div>
 </div>
@@ -78377,10 +78853,10 @@ exports[`Storyshots Views / Pages / Page list loading 1`] = `
   style="padding:24px"
 >
   <div
-    class="makeStyles-root-id"
+    class="Container-root-id"
   >
     <div
-      class="makeStyles-root-id"
+      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
         class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -78388,7 +78864,7 @@ exports[`Storyshots Views / Pages / Page list loading 1`] = `
         Pages
       </div>
       <div
-        class="makeStyles-action-id"
+        class="ExtendedPageHeader-action-id"
       >
         <div
           class="makeStyles-root-id"
@@ -78411,220 +78887,224 @@ exports[`Storyshots Views / Pages / Page list loading 1`] = `
     <div
       class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
     >
-      <table
-        class="MuiTable-root-id"
+      <div
+        class="ResponsiveTable-root-id"
       >
-        <thead
-          class="MuiTableHead-root-id"
+        <table
+          class="MuiTable-root-id"
         >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-head-id"
+          <thead
+            class="MuiTableHead-root-id"
           >
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
-              scope="col"
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-head-id"
             >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
-                disabled=""
-                tabindex="-1"
-                type="button"
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
+                scope="col"
               >
-                <input
-                  class="makeStyles-box-id makeStyles-disabled-id"
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
                   disabled=""
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTitle-id"
-              scope="col"
-            >
-              Title
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colSlug-id"
-              scope="col"
-            >
-              Slug
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colVisibility-id"
-              scope="col"
-            >
-              Visibility
-            </th>
-          </tr>
-        </thead>
-        <tfoot
-          class="MuiTableFooter-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-footer-id"
+                  tabindex="-1"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id makeStyles-disabled-id"
+                    disabled=""
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTitle-id"
+                scope="col"
+              >
+                Title
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colSlug-id"
+                scope="col"
+              >
+                Slug
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colVisibility-id"
+                scope="col"
+              >
+                Visibility
+              </th>
+            </tr>
+          </thead>
+          <tfoot
+            class="MuiTableFooter-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
-              colspan="4"
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-footer-id"
             >
-              <div
-                class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                colspan="4"
               >
                 <div
-                  class="makeStyles-spacer-id"
+                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
                 >
-                  <div>
-                    <span
-                      class="RowNumberSelect-label-id"
-                    >
-                      No of Rows:
-                    </span>
-                    <div
-                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
-                    >
+                  <div
+                    class="makeStyles-spacer-id"
+                  >
+                    <div>
+                      <span
+                        class="RowNumberSelect-label-id"
+                      >
+                        No of Rows:
+                      </span>
                       <div
-                        aria-haspopup="listbox"
-                        aria-labelledby=" "
-                        class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-id"
-                        role="button"
-                        tabindex="0"
+                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                       >
-                        20
-                      </div>
-                      <input
-                        type="hidden"
-                        value="20"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MuiSelect-icon-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M7 10l5 5 5-5z"
+                        <div
+                          aria-haspopup="listbox"
+                          aria-labelledby=" "
+                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-id"
+                          role="button"
+                          tabindex="0"
+                        >
+                          20
+                        </div>
+                        <input
+                          type="hidden"
+                          value="20"
                         />
-                      </svg>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M7 10l5 5 5-5z"
+                          />
+                        </svg>
+                      </div>
                     </div>
                   </div>
-                </div>
-                <div
-                  class="makeStyles-root-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                    data-tc="button-pagination-back"
-                    disabled=""
-                    tabindex="-1"
-                    type="button"
+                  <div
+                    class="makeStyles-root-id"
                   >
-                    <span
-                      class="MuiIconButton-label-id"
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      data-tc="button-pagination-back"
+                      disabled=""
+                      tabindex="-1"
+                      type="button"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
+                      <span
+                        class="MuiIconButton-label-id"
                       >
-                        <path
-                          d="M14 7l-5 5 5 5V7z"
-                        />
-                        <path
-                          d="M24 0v24H0V0h24z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                    data-tc="button-pagination-next"
-                    disabled=""
-                    tabindex="-1"
-                    type="button"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M14 7l-5 5 5 5V7z"
+                          />
+                          <path
+                            d="M24 0v24H0V0h24z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      data-tc="button-pagination-next"
+                      disabled=""
+                      tabindex="-1"
+                      type="button"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
+                      <span
+                        class="MuiIconButton-label-id"
                       >
-                        <path
-                          d="M10 17l5-5-5-5v10z"
-                        />
-                        <path
-                          d="M0 24V0h24v24H0z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M10 17l5-5-5-5v10z"
+                          />
+                          <path
+                            d="M0 24V0h24v24H0z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </div>
                 </div>
-              </div>
-            </td>
-          </tr>
-        </tfoot>
-        <tbody
-          class="MuiTableBody-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id"
+              </td>
+            </tr>
+          </tfoot>
+          <tbody
+            class="MuiTableBody-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+            <tr
+              class="MuiTableRow-root-id"
             >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
-                disabled=""
-                tabindex="-1"
-                type="button"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
-                <input
-                  class="makeStyles-box-id makeStyles-disabled-id"
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
                   disabled=""
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTitle-id"
-            >
-              <span
-                class="makeStyles-skeleton-id"
+                  tabindex="-1"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id makeStyles-disabled-id"
+                    disabled=""
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTitle-id"
               >
-                ‌
-              </span>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSlug-id"
-            >
-              <span
-                class="makeStyles-skeleton-id"
+                <span
+                  class="makeStyles-skeleton-id"
+                >
+                  ‌
+                </span>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSlug-id"
               >
-                ‌
-              </span>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colVisibility-id"
-            >
-              <span
-                class="makeStyles-skeleton-id"
+                <span
+                  class="makeStyles-skeleton-id"
+                >
+                  ‌
+                </span>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colVisibility-id"
               >
-                ‌
-              </span>
-            </td>
-          </tr>
-        </tbody>
-      </table>
+                <span
+                  class="makeStyles-skeleton-id"
+                >
+                  ‌
+                </span>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
     </div>
   </div>
 </div>
@@ -78635,10 +79115,10 @@ exports[`Storyshots Views / Pages / Page list no data 1`] = `
   style="padding:24px"
 >
   <div
-    class="makeStyles-root-id"
+    class="Container-root-id"
   >
     <div
-      class="makeStyles-root-id"
+      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
         class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -78646,7 +79126,7 @@ exports[`Storyshots Views / Pages / Page list no data 1`] = `
         Pages
       </div>
       <div
-        class="makeStyles-action-id"
+        class="ExtendedPageHeader-action-id"
       >
         <div
           class="makeStyles-root-id"
@@ -78668,163 +79148,167 @@ exports[`Storyshots Views / Pages / Page list no data 1`] = `
     <div
       class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
     >
-      <table
-        class="MuiTable-root-id"
+      <div
+        class="ResponsiveTable-root-id"
       >
-        <thead
-          class="MuiTableHead-root-id"
+        <table
+          class="MuiTable-root-id"
         >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-head-id"
+          <thead
+            class="MuiTableHead-root-id"
           >
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTitle-id"
-              scope="col"
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-head-id"
             >
-              Title
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colSlug-id"
-              scope="col"
-            >
-              Slug
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colVisibility-id"
-              scope="col"
-            >
-              Visibility
-            </th>
-          </tr>
-        </thead>
-        <tfoot
-          class="MuiTableFooter-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-footer-id"
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTitle-id"
+                scope="col"
+              >
+                Title
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colSlug-id"
+                scope="col"
+              >
+                Slug
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colVisibility-id"
+                scope="col"
+              >
+                Visibility
+              </th>
+            </tr>
+          </thead>
+          <tfoot
+            class="MuiTableFooter-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
-              colspan="4"
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-footer-id"
             >
-              <div
-                class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                colspan="4"
               >
                 <div
-                  class="makeStyles-spacer-id"
+                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
                 >
-                  <div>
-                    <span
-                      class="RowNumberSelect-label-id"
-                    >
-                      No of Rows:
-                    </span>
-                    <div
-                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
-                    >
+                  <div
+                    class="makeStyles-spacer-id"
+                  >
+                    <div>
+                      <span
+                        class="RowNumberSelect-label-id"
+                      >
+                        No of Rows:
+                      </span>
                       <div
-                        aria-haspopup="listbox"
-                        aria-labelledby=" "
-                        class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-id"
-                        role="button"
-                        tabindex="0"
+                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                       >
-                        20
-                      </div>
-                      <input
-                        type="hidden"
-                        value="20"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MuiSelect-icon-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M7 10l5 5 5-5z"
+                        <div
+                          aria-haspopup="listbox"
+                          aria-labelledby=" "
+                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-id"
+                          role="button"
+                          tabindex="0"
+                        >
+                          20
+                        </div>
+                        <input
+                          type="hidden"
+                          value="20"
                         />
-                      </svg>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M7 10l5 5 5-5z"
+                          />
+                        </svg>
+                      </div>
                     </div>
                   </div>
-                </div>
-                <div
-                  class="makeStyles-root-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                    data-tc="button-pagination-back"
-                    disabled=""
-                    tabindex="-1"
-                    type="button"
+                  <div
+                    class="makeStyles-root-id"
                   >
-                    <span
-                      class="MuiIconButton-label-id"
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      data-tc="button-pagination-back"
+                      disabled=""
+                      tabindex="-1"
+                      type="button"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
+                      <span
+                        class="MuiIconButton-label-id"
                       >
-                        <path
-                          d="M14 7l-5 5 5 5V7z"
-                        />
-                        <path
-                          d="M24 0v24H0V0h24z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
-                    data-tc="button-pagination-next"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M14 7l-5 5 5 5V7z"
+                          />
+                          <path
+                            d="M24 0v24H0V0h24z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                      data-tc="button-pagination-next"
+                      tabindex="0"
+                      type="button"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
+                      <span
+                        class="MuiIconButton-label-id"
                       >
-                        <path
-                          d="M10 17l5-5-5-5v10z"
-                        />
-                        <path
-                          d="M0 24V0h24v24H0z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M10 17l5-5-5-5v10z"
+                          />
+                          <path
+                            d="M0 24V0h24v24H0z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </div>
                 </div>
-              </div>
-            </td>
-          </tr>
-        </tfoot>
-        <tbody
-          class="MuiTableBody-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id"
+              </td>
+            </tr>
+          </tfoot>
+          <tbody
+            class="MuiTableBody-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-              colspan="4"
+            <tr
+              class="MuiTableRow-root-id"
             >
-              No pages found
-            </td>
-          </tr>
-        </tbody>
-      </table>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id"
+                colspan="4"
+              >
+                No pages found
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
     </div>
   </div>
 </div>
@@ -78848,10 +79332,10 @@ exports[`Storyshots Views / Plugins / Plugin details default 1`] = `
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -78859,7 +79343,7 @@ exports[`Storyshots Views / Plugins / Plugin details default 1`] = `
           Username or account Details
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -79260,10 +79744,10 @@ exports[`Storyshots Views / Plugins / Plugin details form errors 1`] = `
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -79271,7 +79755,7 @@ exports[`Storyshots Views / Plugins / Plugin details form errors 1`] = `
           Username or account Details
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -79672,10 +80156,10 @@ exports[`Storyshots Views / Plugins / Plugin details loading 1`] = `
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -79683,7 +80167,7 @@ exports[`Storyshots Views / Plugins / Plugin details loading 1`] = `
           ... Details
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -79783,10 +80267,10 @@ exports[`Storyshots Views / Plugins / Plugin details not configurable 1`] = `
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -79794,7 +80278,7 @@ exports[`Storyshots Views / Plugins / Plugin details not configurable 1`] = `
           Username or account Details
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -79905,10 +80389,10 @@ exports[`Storyshots Views / Plugins / Plugin list default 1`] = `
   style="padding:24px"
 >
   <div
-    class="makeStyles-root-id"
+    class="Container-root-id"
   >
     <div
-      class="makeStyles-root-id"
+      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
         class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -79916,7 +80400,7 @@ exports[`Storyshots Views / Plugins / Plugin list default 1`] = `
         Plugins
       </div>
       <div
-        class="makeStyles-action-id"
+        class="ExtendedPageHeader-action-id"
       >
         <div
           class="makeStyles-root-id"
@@ -79926,221 +80410,225 @@ exports[`Storyshots Views / Plugins / Plugin list default 1`] = `
     <div
       class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
     >
-      <table
-        class="MuiTable-root-id"
+      <div
+        class="ResponsiveTable-root-id"
       >
-        <thead
-          class="MuiTableHead-root-id"
+        <table
+          class="MuiTable-root-id"
         >
-          <tr>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
-              scope="col"
-            >
-              Name
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colActive-id"
-              scope="col"
-            >
-              Active
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colAction-id"
-              scope="col"
-            >
-              Action
-            </th>
-          </tr>
-        </thead>
-        <tfoot
-          class="MuiTableFooter-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-footer-id"
+          <thead
+            class="MuiTableHead-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
-              colspan="4"
+            <tr>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                scope="col"
+              >
+                Name
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colActive-id"
+                scope="col"
+              >
+                Active
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colAction-id"
+                scope="col"
+              >
+                Action
+              </th>
+            </tr>
+          </thead>
+          <tfoot
+            class="MuiTableFooter-root-id"
+          >
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-footer-id"
             >
-              <div
-                class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                colspan="4"
               >
                 <div
-                  class="makeStyles-spacer-id"
+                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
                 >
-                  <div>
-                    <span
-                      class="RowNumberSelect-label-id"
-                    >
-                      No of Rows:
-                    </span>
-                    <div
-                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
-                    >
+                  <div
+                    class="makeStyles-spacer-id"
+                  >
+                    <div>
+                      <span
+                        class="RowNumberSelect-label-id"
+                      >
+                        No of Rows:
+                      </span>
                       <div
-                        aria-haspopup="listbox"
-                        aria-labelledby=" "
-                        class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-id"
-                        role="button"
-                        tabindex="0"
+                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                       >
-                        20
-                      </div>
-                      <input
-                        type="hidden"
-                        value="20"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MuiSelect-icon-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M7 10l5 5 5-5z"
+                        <div
+                          aria-haspopup="listbox"
+                          aria-labelledby=" "
+                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-id"
+                          role="button"
+                          tabindex="0"
+                        >
+                          20
+                        </div>
+                        <input
+                          type="hidden"
+                          value="20"
                         />
-                      </svg>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M7 10l5 5 5-5z"
+                          />
+                        </svg>
+                      </div>
                     </div>
                   </div>
+                  <div
+                    class="makeStyles-root-id"
+                  >
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      data-tc="button-pagination-back"
+                      disabled=""
+                      tabindex="-1"
+                      type="button"
+                    >
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M14 7l-5 5 5 5V7z"
+                          />
+                          <path
+                            d="M24 0v24H0V0h24z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                      data-tc="button-pagination-next"
+                      tabindex="0"
+                      type="button"
+                    >
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M10 17l5-5-5-5v10z"
+                          />
+                          <path
+                            d="M0 24V0h24v24H0z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </div>
                 </div>
+              </td>
+            </tr>
+          </tfoot>
+          <tbody
+            class="MuiTableBody-root-id"
+          >
+            <tr
+              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+              >
+                Avalara
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colActive-id"
+              >
                 <div
-                  class="makeStyles-root-id"
+                  class="makeStyles-root-id undefined makeStyles-successDot-id"
                 >
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                    data-tc="button-pagination-back"
-                    disabled=""
-                    tabindex="-1"
-                    type="button"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M14 7l-5 5 5 5V7z"
-                        />
-                        <path
-                          d="M24 0v24H0V0h24z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
-                    data-tc="button-pagination-next"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M10 17l5-5-5-5v10z"
-                        />
-                        <path
-                          d="M0 24V0h24v24H0z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
+                  Yes
                 </div>
-              </div>
-            </td>
-          </tr>
-        </tfoot>
-        <tbody
-          class="MuiTableBody-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
-            >
-              Avalara
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colActive-id"
-            >
-              <div
-                class="makeStyles-root-id undefined makeStyles-successDot-id"
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colAction-id"
               >
-                Yes
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colAction-id"
+                <div>
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root-id"
+                    focusable="false"
+                    role="presentation"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
+                    />
+                  </svg>
+                </div>
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
             >
-              <div>
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id"
-                  focusable="false"
-                  role="presentation"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
-                  />
-                </svg>
-              </div>
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
-            >
-              VatLayer
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colActive-id"
-            >
-              <div
-                class="makeStyles-root-id undefined makeStyles-errorDot-id"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
               >
-                No
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colAction-id"
-            >
-              <div>
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id"
-                  focusable="false"
-                  role="presentation"
-                  viewBox="0 0 24 24"
+                VatLayer
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colActive-id"
+              >
+                <div
+                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
                 >
-                  <path
-                    d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
-                  />
-                </svg>
-              </div>
-            </td>
-          </tr>
-        </tbody>
-      </table>
+                  No
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colAction-id"
+              >
+                <div>
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root-id"
+                    focusable="false"
+                    role="presentation"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
+                    />
+                  </svg>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
     </div>
   </div>
 </div>
@@ -80151,10 +80639,10 @@ exports[`Storyshots Views / Plugins / Plugin list loading 1`] = `
   style="padding:24px"
 >
   <div
-    class="makeStyles-root-id"
+    class="Container-root-id"
   >
     <div
-      class="makeStyles-root-id"
+      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
         class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -80162,7 +80650,7 @@ exports[`Storyshots Views / Plugins / Plugin list loading 1`] = `
         Plugins
       </div>
       <div
-        class="makeStyles-action-id"
+        class="ExtendedPageHeader-action-id"
       >
         <div
           class="makeStyles-root-id"
@@ -80172,191 +80660,195 @@ exports[`Storyshots Views / Plugins / Plugin list loading 1`] = `
     <div
       class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
     >
-      <table
-        class="MuiTable-root-id"
+      <div
+        class="ResponsiveTable-root-id"
       >
-        <thead
-          class="MuiTableHead-root-id"
+        <table
+          class="MuiTable-root-id"
         >
-          <tr>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
-              scope="col"
-            >
-              Name
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colActive-id"
-              scope="col"
-            >
-              Active
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colAction-id"
-              scope="col"
-            >
-              Action
-            </th>
-          </tr>
-        </thead>
-        <tfoot
-          class="MuiTableFooter-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-footer-id"
+          <thead
+            class="MuiTableHead-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
-              colspan="4"
+            <tr>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                scope="col"
+              >
+                Name
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colActive-id"
+                scope="col"
+              >
+                Active
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colAction-id"
+                scope="col"
+              >
+                Action
+              </th>
+            </tr>
+          </thead>
+          <tfoot
+            class="MuiTableFooter-root-id"
+          >
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-footer-id"
             >
-              <div
-                class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                colspan="4"
               >
                 <div
-                  class="makeStyles-spacer-id"
+                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
                 >
-                  <div>
-                    <span
-                      class="RowNumberSelect-label-id"
-                    >
-                      No of Rows:
-                    </span>
-                    <div
-                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
-                    >
+                  <div
+                    class="makeStyles-spacer-id"
+                  >
+                    <div>
+                      <span
+                        class="RowNumberSelect-label-id"
+                      >
+                        No of Rows:
+                      </span>
                       <div
-                        aria-haspopup="listbox"
-                        aria-labelledby=" "
-                        class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-id"
-                        role="button"
-                        tabindex="0"
+                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                       >
-                        20
-                      </div>
-                      <input
-                        type="hidden"
-                        value="20"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MuiSelect-icon-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M7 10l5 5 5-5z"
+                        <div
+                          aria-haspopup="listbox"
+                          aria-labelledby=" "
+                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-id"
+                          role="button"
+                          tabindex="0"
+                        >
+                          20
+                        </div>
+                        <input
+                          type="hidden"
+                          value="20"
                         />
-                      </svg>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M7 10l5 5 5-5z"
+                          />
+                        </svg>
+                      </div>
                     </div>
                   </div>
-                </div>
-                <div
-                  class="makeStyles-root-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                    data-tc="button-pagination-back"
-                    disabled=""
-                    tabindex="-1"
-                    type="button"
+                  <div
+                    class="makeStyles-root-id"
                   >
-                    <span
-                      class="MuiIconButton-label-id"
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      data-tc="button-pagination-back"
+                      disabled=""
+                      tabindex="-1"
+                      type="button"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
+                      <span
+                        class="MuiIconButton-label-id"
                       >
-                        <path
-                          d="M14 7l-5 5 5 5V7z"
-                        />
-                        <path
-                          d="M24 0v24H0V0h24z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                    data-tc="button-pagination-next"
-                    disabled=""
-                    tabindex="-1"
-                    type="button"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M14 7l-5 5 5 5V7z"
+                          />
+                          <path
+                            d="M24 0v24H0V0h24z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      data-tc="button-pagination-next"
+                      disabled=""
+                      tabindex="-1"
+                      type="button"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
+                      <span
+                        class="MuiIconButton-label-id"
                       >
-                        <path
-                          d="M10 17l5-5-5-5v10z"
-                        />
-                        <path
-                          d="M0 24V0h24v24H0z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M10 17l5-5-5-5v10z"
+                          />
+                          <path
+                            d="M0 24V0h24v24H0z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </div>
                 </div>
-              </div>
-            </td>
-          </tr>
-        </tfoot>
-        <tbody
-          class="MuiTableBody-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id"
+              </td>
+            </tr>
+          </tfoot>
+          <tbody
+            class="MuiTableBody-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+            <tr
+              class="MuiTableRow-root-id"
             >
-              <span
-                class="makeStyles-skeleton-id"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
               >
-                ‌
-              </span>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colActive-id"
-            >
-              <span
-                class="makeStyles-skeleton-id"
-              >
-                ‌
-              </span>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colAction-id"
-            >
-              <div>
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id"
-                  focusable="false"
-                  role="presentation"
-                  viewBox="0 0 24 24"
+                <span
+                  class="makeStyles-skeleton-id"
                 >
-                  <path
-                    d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
-                  />
-                </svg>
-              </div>
-            </td>
-          </tr>
-        </tbody>
-      </table>
+                  ‌
+                </span>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colActive-id"
+              >
+                <span
+                  class="makeStyles-skeleton-id"
+                >
+                  ‌
+                </span>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colAction-id"
+              >
+                <div>
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root-id"
+                    focusable="false"
+                    role="presentation"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
+                    />
+                  </svg>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
     </div>
   </div>
 </div>
@@ -80367,10 +80859,10 @@ exports[`Storyshots Views / Plugins / Plugin list no data 1`] = `
   style="padding:24px"
 >
   <div
-    class="makeStyles-root-id"
+    class="Container-root-id"
   >
     <div
-      class="makeStyles-root-id"
+      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
         class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -80378,7 +80870,7 @@ exports[`Storyshots Views / Plugins / Plugin list no data 1`] = `
         Plugins
       </div>
       <div
-        class="makeStyles-action-id"
+        class="ExtendedPageHeader-action-id"
       >
         <div
           class="makeStyles-root-id"
@@ -80388,161 +80880,165 @@ exports[`Storyshots Views / Plugins / Plugin list no data 1`] = `
     <div
       class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
     >
-      <table
-        class="MuiTable-root-id"
+      <div
+        class="ResponsiveTable-root-id"
       >
-        <thead
-          class="MuiTableHead-root-id"
+        <table
+          class="MuiTable-root-id"
         >
-          <tr>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
-              scope="col"
-            >
-              Name
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colActive-id"
-              scope="col"
-            >
-              Active
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colAction-id"
-              scope="col"
-            >
-              Action
-            </th>
-          </tr>
-        </thead>
-        <tfoot
-          class="MuiTableFooter-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-footer-id"
+          <thead
+            class="MuiTableHead-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
-              colspan="4"
+            <tr>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                scope="col"
+              >
+                Name
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colActive-id"
+                scope="col"
+              >
+                Active
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colAction-id"
+                scope="col"
+              >
+                Action
+              </th>
+            </tr>
+          </thead>
+          <tfoot
+            class="MuiTableFooter-root-id"
+          >
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-footer-id"
             >
-              <div
-                class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                colspan="4"
               >
                 <div
-                  class="makeStyles-spacer-id"
+                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
                 >
-                  <div>
-                    <span
-                      class="RowNumberSelect-label-id"
-                    >
-                      No of Rows:
-                    </span>
-                    <div
-                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
-                    >
+                  <div
+                    class="makeStyles-spacer-id"
+                  >
+                    <div>
+                      <span
+                        class="RowNumberSelect-label-id"
+                      >
+                        No of Rows:
+                      </span>
                       <div
-                        aria-haspopup="listbox"
-                        aria-labelledby=" "
-                        class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-id"
-                        role="button"
-                        tabindex="0"
+                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                       >
-                        20
-                      </div>
-                      <input
-                        type="hidden"
-                        value="20"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MuiSelect-icon-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M7 10l5 5 5-5z"
+                        <div
+                          aria-haspopup="listbox"
+                          aria-labelledby=" "
+                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-id"
+                          role="button"
+                          tabindex="0"
+                        >
+                          20
+                        </div>
+                        <input
+                          type="hidden"
+                          value="20"
                         />
-                      </svg>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M7 10l5 5 5-5z"
+                          />
+                        </svg>
+                      </div>
                     </div>
                   </div>
-                </div>
-                <div
-                  class="makeStyles-root-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                    data-tc="button-pagination-back"
-                    disabled=""
-                    tabindex="-1"
-                    type="button"
+                  <div
+                    class="makeStyles-root-id"
                   >
-                    <span
-                      class="MuiIconButton-label-id"
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      data-tc="button-pagination-back"
+                      disabled=""
+                      tabindex="-1"
+                      type="button"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
+                      <span
+                        class="MuiIconButton-label-id"
                       >
-                        <path
-                          d="M14 7l-5 5 5 5V7z"
-                        />
-                        <path
-                          d="M24 0v24H0V0h24z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
-                    data-tc="button-pagination-next"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M14 7l-5 5 5 5V7z"
+                          />
+                          <path
+                            d="M24 0v24H0V0h24z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                      data-tc="button-pagination-next"
+                      tabindex="0"
+                      type="button"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
+                      <span
+                        class="MuiIconButton-label-id"
                       >
-                        <path
-                          d="M10 17l5-5-5-5v10z"
-                        />
-                        <path
-                          d="M0 24V0h24v24H0z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M10 17l5-5-5-5v10z"
+                          />
+                          <path
+                            d="M0 24V0h24v24H0z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </div>
                 </div>
-              </div>
-            </td>
-          </tr>
-        </tfoot>
-        <tbody
-          class="MuiTableBody-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id"
+              </td>
+            </tr>
+          </tfoot>
+          <tbody
+            class="MuiTableBody-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-              colspan="4"
+            <tr
+              class="MuiTableRow-root-id"
             >
-              No plugins found
-            </td>
-          </tr>
-        </tbody>
-      </table>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id"
+                colspan="4"
+              >
+                No plugins found
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
     </div>
   </div>
 </div>
@@ -80554,10 +81050,10 @@ exports[`Storyshots Views / Product types / Create product type default 1`] = `
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -80565,7 +81061,7 @@ exports[`Storyshots Views / Product types / Create product type default 1`] = `
           Create product type
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -80787,10 +81283,10 @@ exports[`Storyshots Views / Product types / Create product type form errors 1`]
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -80798,7 +81294,7 @@ exports[`Storyshots Views / Product types / Create product type form errors 1`]
           Create product type
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -81025,10 +81521,10 @@ exports[`Storyshots Views / Product types / Create product type loading 1`] = `
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -81041,7 +81537,7 @@ exports[`Storyshots Views / Product types / Create product type loading 1`] = `
           </span>
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -81267,10 +81763,10 @@ exports[`Storyshots Views / Product types / Product type details default 1`] = `
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -81278,7 +81774,7 @@ exports[`Storyshots Views / Product types / Product type details default 1`] = `
           E-books
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -81475,343 +81971,347 @@ exports[`Storyshots Views / Product types / Product type details default 1`] = `
             <hr
               class="makeStyles-hr-id"
             />
-            <table
-              class="MuiTable-root-id"
+            <div
+              class="ResponsiveTable-root-id"
             >
-              <thead
-                class="MuiTableHead-root-id"
+              <table
+                class="MuiTable-root-id"
               >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
+                <thead
+                  class="MuiTableHead-root-id"
                 >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id"
-                    scope="col"
-                  />
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-dragRows-id MuiTableCell-paddingCheckbox-id"
-                    scope="col"
+                  <tr
+                    class="MuiTableRow-root-id MuiTableRow-head-id"
                   >
-                    <button
-                      class="MuiButtonBase-root-id makeStyles-root-id"
-                      tabindex="0"
-                      type="button"
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id"
+                      scope="col"
+                    />
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-dragRows-id MuiTableCell-paddingCheckbox-id"
+                      scope="col"
                     >
-                      <input
-                        class="makeStyles-box-id"
-                        type="checkbox"
-                        value="false"
-                      />
-                    </button>
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
-                    scope="col"
-                  >
-                    Attribute name
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
-                    scope="col"
-                  >
-                    Slug
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id"
-                    scope="col"
-                  />
-                </tr>
-              </thead>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-                  data-tc="id"
-                  data-tc-id="UHJvZHVjdEF0dHJpYnV0ZTo5"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnDrag-id"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        clip-rule="evenodd"
-                        d="M3.5 2C3.5 2.82843 2.82843 3.5 2 3.5C1.17157 3.5 0.5 2.82843 0.5 2C0.5 1.17157 1.17157 0.5 2 0.5C2.82843 0.5 3.5 1.17157 3.5 2ZM4 2C4 3.10457 3.10457 4 2 4C0.895431 4 0 3.10457 0 2C0 0.895431 0.895431 0 2 0C3.10457 0 4 0.895431 4 2ZM9.5 2C9.5 2.82843 8.82843 3.5 8 3.5C7.17157 3.5 6.5 2.82843 6.5 2C6.5 1.17157 7.17157 0.5 8 0.5C8.82843 0.5 9.5 1.17157 9.5 2ZM10 2C10 3.10457 9.10457 4 8 4C6.89543 4 6 3.10457 6 2C6 0.895431 6.89543 0 8 0C9.10457 0 10 0.895431 10 2ZM8 9.5C8.82843 9.5 9.5 8.82843 9.5 8C9.5 7.17157 8.82843 6.5 8 6.5C7.17157 6.5 6.5 7.17157 6.5 8C6.5 8.82843 7.17157 9.5 8 9.5ZM8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10ZM3.5 8C3.5 8.82843 2.82843 9.5 2 9.5C1.17157 9.5 0.5 8.82843 0.5 8C0.5 7.17157 1.17157 6.5 2 6.5C2.82843 6.5 3.5 7.17157 3.5 8ZM4 8C4 9.10457 3.10457 10 2 10C0.895431 10 0 9.10457 0 8C0 6.89543 0.895431 6 2 6C3.10457 6 4 6.89543 4 8ZM2 15.5C2.82843 15.5 3.5 14.8284 3.5 14C3.5 13.1716 2.82843 12.5 2 12.5C1.17157 12.5 0.5 13.1716 0.5 14C0.5 14.8284 1.17157 15.5 2 15.5ZM2 16C3.10457 16 4 15.1046 4 14C4 12.8954 3.10457 12 2 12C0.895431 12 0 12.8954 0 14C0 15.1046 0.895431 16 2 16ZM9.5 14C9.5 14.8284 8.82843 15.5 8 15.5C7.17157 15.5 6.5 14.8284 6.5 14C6.5 13.1716 7.17157 12.5 8 12.5C8.82843 12.5 9.5 13.1716 9.5 14ZM10 14C10 15.1046 9.10457 16 8 16C6.89543 16 6 15.1046 6 14C6 12.8954 6.89543 12 8 12C9.10457 12 10 12.8954 10 14Z"
-                        fill="url(#paint0_linear)"
-                        fill-rule="evenodd"
-                        style="transform:translate(7px, 4px)"
-                      />
-                      <defs>
-                        <linearGradient
-                          gradientUnits="userSpaceOnUse"
-                          id="paint0_linear"
-                          x1="0"
-                          x2="16.0896"
-                          y1="0"
-                          y2="10.4478"
-                        >
-                          <stop
-                            stop-color="#06847B"
-                          />
-                          <stop
-                            offset="1"
-                            stop-color="#3EE7CD"
-                          />
-                        </linearGradient>
-                      </defs>
-                    </svg>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id makeStyles-root-id"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <input
-                        class="makeStyles-box-id"
-                        type="checkbox"
-                        value="false"
-                      />
-                    </button>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
-                    data-tc="name"
-                  >
-                    Author
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSlug-id"
-                    data-tc="slug"
-                  >
-                    author
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-iconCell-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
+                      <button
+                        class="MuiButtonBase-root-id makeStyles-root-id"
+                        tabindex="0"
+                        type="button"
                       >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
-                          focusable="false"
-                          role="presentation"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                          />
-                        </svg>
-                      </span>
-                    </button>
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-                  data-tc="id"
-                  data-tc-id="UHJvZHVjdEF0dHJpYnV0ZToxMQ=="
+                        <input
+                          class="makeStyles-box-id"
+                          type="checkbox"
+                          value="false"
+                        />
+                      </button>
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                      scope="col"
+                    >
+                      Attribute name
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                      scope="col"
+                    >
+                      Slug
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id"
+                      scope="col"
+                    />
+                  </tr>
+                </thead>
+                <tbody
+                  class="MuiTableBody-root-id"
                 >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnDrag-id"
+                  <tr
+                    class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                    data-tc="id"
+                    data-tc-id="UHJvZHVjdEF0dHJpYnV0ZTo5"
                   >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnDrag-id"
                     >
-                      <path
-                        clip-rule="evenodd"
-                        d="M3.5 2C3.5 2.82843 2.82843 3.5 2 3.5C1.17157 3.5 0.5 2.82843 0.5 2C0.5 1.17157 1.17157 0.5 2 0.5C2.82843 0.5 3.5 1.17157 3.5 2ZM4 2C4 3.10457 3.10457 4 2 4C0.895431 4 0 3.10457 0 2C0 0.895431 0.895431 0 2 0C3.10457 0 4 0.895431 4 2ZM9.5 2C9.5 2.82843 8.82843 3.5 8 3.5C7.17157 3.5 6.5 2.82843 6.5 2C6.5 1.17157 7.17157 0.5 8 0.5C8.82843 0.5 9.5 1.17157 9.5 2ZM10 2C10 3.10457 9.10457 4 8 4C6.89543 4 6 3.10457 6 2C6 0.895431 6.89543 0 8 0C9.10457 0 10 0.895431 10 2ZM8 9.5C8.82843 9.5 9.5 8.82843 9.5 8C9.5 7.17157 8.82843 6.5 8 6.5C7.17157 6.5 6.5 7.17157 6.5 8C6.5 8.82843 7.17157 9.5 8 9.5ZM8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10ZM3.5 8C3.5 8.82843 2.82843 9.5 2 9.5C1.17157 9.5 0.5 8.82843 0.5 8C0.5 7.17157 1.17157 6.5 2 6.5C2.82843 6.5 3.5 7.17157 3.5 8ZM4 8C4 9.10457 3.10457 10 2 10C0.895431 10 0 9.10457 0 8C0 6.89543 0.895431 6 2 6C3.10457 6 4 6.89543 4 8ZM2 15.5C2.82843 15.5 3.5 14.8284 3.5 14C3.5 13.1716 2.82843 12.5 2 12.5C1.17157 12.5 0.5 13.1716 0.5 14C0.5 14.8284 1.17157 15.5 2 15.5ZM2 16C3.10457 16 4 15.1046 4 14C4 12.8954 3.10457 12 2 12C0.895431 12 0 12.8954 0 14C0 15.1046 0.895431 16 2 16ZM9.5 14C9.5 14.8284 8.82843 15.5 8 15.5C7.17157 15.5 6.5 14.8284 6.5 14C6.5 13.1716 7.17157 12.5 8 12.5C8.82843 12.5 9.5 13.1716 9.5 14ZM10 14C10 15.1046 9.10457 16 8 16C6.89543 16 6 15.1046 6 14C6 12.8954 6.89543 12 8 12C9.10457 12 10 12.8954 10 14Z"
-                        fill="url(#paint0_linear)"
-                        fill-rule="evenodd"
-                        style="transform:translate(7px, 4px)"
-                      />
-                      <defs>
-                        <linearGradient
-                          gradientUnits="userSpaceOnUse"
-                          id="paint0_linear"
-                          x1="0"
-                          x2="16.0896"
-                          y1="0"
-                          y2="10.4478"
-                        >
-                          <stop
-                            stop-color="#06847B"
-                          />
-                          <stop
-                            offset="1"
-                            stop-color="#3EE7CD"
-                          />
-                        </linearGradient>
-                      </defs>
-                    </svg>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id makeStyles-root-id"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <input
-                        class="makeStyles-box-id"
-                        type="checkbox"
-                        value="false"
-                      />
-                    </button>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
-                    data-tc="name"
-                  >
-                    Language
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSlug-id"
-                    data-tc="slug"
-                  >
-                    language
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-iconCell-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root-id"
+                        focusable="false"
+                        role="presentation"
+                        viewBox="0 0 24 24"
                       >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
-                          focusable="false"
-                          role="presentation"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                          />
-                        </svg>
-                      </span>
-                    </button>
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-                  data-tc="id"
-                  data-tc-id="UHJvZHVjdEF0dHJpYnV0ZToxMA=="
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnDrag-id"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
+                        <path
+                          clip-rule="evenodd"
+                          d="M3.5 2C3.5 2.82843 2.82843 3.5 2 3.5C1.17157 3.5 0.5 2.82843 0.5 2C0.5 1.17157 1.17157 0.5 2 0.5C2.82843 0.5 3.5 1.17157 3.5 2ZM4 2C4 3.10457 3.10457 4 2 4C0.895431 4 0 3.10457 0 2C0 0.895431 0.895431 0 2 0C3.10457 0 4 0.895431 4 2ZM9.5 2C9.5 2.82843 8.82843 3.5 8 3.5C7.17157 3.5 6.5 2.82843 6.5 2C6.5 1.17157 7.17157 0.5 8 0.5C8.82843 0.5 9.5 1.17157 9.5 2ZM10 2C10 3.10457 9.10457 4 8 4C6.89543 4 6 3.10457 6 2C6 0.895431 6.89543 0 8 0C9.10457 0 10 0.895431 10 2ZM8 9.5C8.82843 9.5 9.5 8.82843 9.5 8C9.5 7.17157 8.82843 6.5 8 6.5C7.17157 6.5 6.5 7.17157 6.5 8C6.5 8.82843 7.17157 9.5 8 9.5ZM8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10ZM3.5 8C3.5 8.82843 2.82843 9.5 2 9.5C1.17157 9.5 0.5 8.82843 0.5 8C0.5 7.17157 1.17157 6.5 2 6.5C2.82843 6.5 3.5 7.17157 3.5 8ZM4 8C4 9.10457 3.10457 10 2 10C0.895431 10 0 9.10457 0 8C0 6.89543 0.895431 6 2 6C3.10457 6 4 6.89543 4 8ZM2 15.5C2.82843 15.5 3.5 14.8284 3.5 14C3.5 13.1716 2.82843 12.5 2 12.5C1.17157 12.5 0.5 13.1716 0.5 14C0.5 14.8284 1.17157 15.5 2 15.5ZM2 16C3.10457 16 4 15.1046 4 14C4 12.8954 3.10457 12 2 12C0.895431 12 0 12.8954 0 14C0 15.1046 0.895431 16 2 16ZM9.5 14C9.5 14.8284 8.82843 15.5 8 15.5C7.17157 15.5 6.5 14.8284 6.5 14C6.5 13.1716 7.17157 12.5 8 12.5C8.82843 12.5 9.5 13.1716 9.5 14ZM10 14C10 15.1046 9.10457 16 8 16C6.89543 16 6 15.1046 6 14C6 12.8954 6.89543 12 8 12C9.10457 12 10 12.8954 10 14Z"
+                          fill="url(#paint0_linear)"
+                          fill-rule="evenodd"
+                          style="transform:translate(7px, 4px)"
+                        />
+                        <defs>
+                          <linearGradient
+                            gradientUnits="userSpaceOnUse"
+                            id="paint0_linear"
+                            x1="0"
+                            x2="16.0896"
+                            y1="0"
+                            y2="10.4478"
+                          >
+                            <stop
+                              stop-color="#06847B"
+                            />
+                            <stop
+                              offset="1"
+                              stop-color="#3EE7CD"
+                            />
+                          </linearGradient>
+                        </defs>
+                      </svg>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                     >
-                      <path
-                        clip-rule="evenodd"
-                        d="M3.5 2C3.5 2.82843 2.82843 3.5 2 3.5C1.17157 3.5 0.5 2.82843 0.5 2C0.5 1.17157 1.17157 0.5 2 0.5C2.82843 0.5 3.5 1.17157 3.5 2ZM4 2C4 3.10457 3.10457 4 2 4C0.895431 4 0 3.10457 0 2C0 0.895431 0.895431 0 2 0C3.10457 0 4 0.895431 4 2ZM9.5 2C9.5 2.82843 8.82843 3.5 8 3.5C7.17157 3.5 6.5 2.82843 6.5 2C6.5 1.17157 7.17157 0.5 8 0.5C8.82843 0.5 9.5 1.17157 9.5 2ZM10 2C10 3.10457 9.10457 4 8 4C6.89543 4 6 3.10457 6 2C6 0.895431 6.89543 0 8 0C9.10457 0 10 0.895431 10 2ZM8 9.5C8.82843 9.5 9.5 8.82843 9.5 8C9.5 7.17157 8.82843 6.5 8 6.5C7.17157 6.5 6.5 7.17157 6.5 8C6.5 8.82843 7.17157 9.5 8 9.5ZM8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10ZM3.5 8C3.5 8.82843 2.82843 9.5 2 9.5C1.17157 9.5 0.5 8.82843 0.5 8C0.5 7.17157 1.17157 6.5 2 6.5C2.82843 6.5 3.5 7.17157 3.5 8ZM4 8C4 9.10457 3.10457 10 2 10C0.895431 10 0 9.10457 0 8C0 6.89543 0.895431 6 2 6C3.10457 6 4 6.89543 4 8ZM2 15.5C2.82843 15.5 3.5 14.8284 3.5 14C3.5 13.1716 2.82843 12.5 2 12.5C1.17157 12.5 0.5 13.1716 0.5 14C0.5 14.8284 1.17157 15.5 2 15.5ZM2 16C3.10457 16 4 15.1046 4 14C4 12.8954 3.10457 12 2 12C0.895431 12 0 12.8954 0 14C0 15.1046 0.895431 16 2 16ZM9.5 14C9.5 14.8284 8.82843 15.5 8 15.5C7.17157 15.5 6.5 14.8284 6.5 14C6.5 13.1716 7.17157 12.5 8 12.5C8.82843 12.5 9.5 13.1716 9.5 14ZM10 14C10 15.1046 9.10457 16 8 16C6.89543 16 6 15.1046 6 14C6 12.8954 6.89543 12 8 12C9.10457 12 10 12.8954 10 14Z"
-                        fill="url(#paint0_linear)"
-                        fill-rule="evenodd"
-                        style="transform:translate(7px, 4px)"
-                      />
-                      <defs>
-                        <linearGradient
-                          gradientUnits="userSpaceOnUse"
-                          id="paint0_linear"
-                          x1="0"
-                          x2="16.0896"
-                          y1="0"
-                          y2="10.4478"
-                        >
-                          <stop
-                            stop-color="#06847B"
-                          />
-                          <stop
-                            offset="1"
-                            stop-color="#3EE7CD"
-                          />
-                        </linearGradient>
-                      </defs>
-                    </svg>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id makeStyles-root-id"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <input
-                        class="makeStyles-box-id"
-                        type="checkbox"
-                        value="false"
-                      />
-                    </button>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
-                    data-tc="name"
-                  >
-                    Publisher
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSlug-id"
-                    data-tc="slug"
-                  >
-                    publisher
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-iconCell-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
+                      <button
+                        class="MuiButtonBase-root-id makeStyles-root-id"
+                        tabindex="0"
+                        type="button"
                       >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
-                          focusable="false"
-                          role="presentation"
-                          viewBox="0 0 24 24"
+                        <input
+                          class="makeStyles-box-id"
+                          type="checkbox"
+                          value="false"
+                        />
+                      </button>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                      data-tc="name"
+                    >
+                      Author
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSlug-id"
+                      data-tc="slug"
+                    >
+                      author
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-iconCell-id"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id MuiIconButton-root-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiIconButton-label-id"
                         >
-                          <path
-                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                          />
-                        </svg>
-                      </span>
-                    </button>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </td>
+                  </tr>
+                  <tr
+                    class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                    data-tc="id"
+                    data-tc-id="UHJvZHVjdEF0dHJpYnV0ZToxMQ=="
+                  >
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnDrag-id"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root-id"
+                        focusable="false"
+                        role="presentation"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          clip-rule="evenodd"
+                          d="M3.5 2C3.5 2.82843 2.82843 3.5 2 3.5C1.17157 3.5 0.5 2.82843 0.5 2C0.5 1.17157 1.17157 0.5 2 0.5C2.82843 0.5 3.5 1.17157 3.5 2ZM4 2C4 3.10457 3.10457 4 2 4C0.895431 4 0 3.10457 0 2C0 0.895431 0.895431 0 2 0C3.10457 0 4 0.895431 4 2ZM9.5 2C9.5 2.82843 8.82843 3.5 8 3.5C7.17157 3.5 6.5 2.82843 6.5 2C6.5 1.17157 7.17157 0.5 8 0.5C8.82843 0.5 9.5 1.17157 9.5 2ZM10 2C10 3.10457 9.10457 4 8 4C6.89543 4 6 3.10457 6 2C6 0.895431 6.89543 0 8 0C9.10457 0 10 0.895431 10 2ZM8 9.5C8.82843 9.5 9.5 8.82843 9.5 8C9.5 7.17157 8.82843 6.5 8 6.5C7.17157 6.5 6.5 7.17157 6.5 8C6.5 8.82843 7.17157 9.5 8 9.5ZM8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10ZM3.5 8C3.5 8.82843 2.82843 9.5 2 9.5C1.17157 9.5 0.5 8.82843 0.5 8C0.5 7.17157 1.17157 6.5 2 6.5C2.82843 6.5 3.5 7.17157 3.5 8ZM4 8C4 9.10457 3.10457 10 2 10C0.895431 10 0 9.10457 0 8C0 6.89543 0.895431 6 2 6C3.10457 6 4 6.89543 4 8ZM2 15.5C2.82843 15.5 3.5 14.8284 3.5 14C3.5 13.1716 2.82843 12.5 2 12.5C1.17157 12.5 0.5 13.1716 0.5 14C0.5 14.8284 1.17157 15.5 2 15.5ZM2 16C3.10457 16 4 15.1046 4 14C4 12.8954 3.10457 12 2 12C0.895431 12 0 12.8954 0 14C0 15.1046 0.895431 16 2 16ZM9.5 14C9.5 14.8284 8.82843 15.5 8 15.5C7.17157 15.5 6.5 14.8284 6.5 14C6.5 13.1716 7.17157 12.5 8 12.5C8.82843 12.5 9.5 13.1716 9.5 14ZM10 14C10 15.1046 9.10457 16 8 16C6.89543 16 6 15.1046 6 14C6 12.8954 6.89543 12 8 12C9.10457 12 10 12.8954 10 14Z"
+                          fill="url(#paint0_linear)"
+                          fill-rule="evenodd"
+                          style="transform:translate(7px, 4px)"
+                        />
+                        <defs>
+                          <linearGradient
+                            gradientUnits="userSpaceOnUse"
+                            id="paint0_linear"
+                            x1="0"
+                            x2="16.0896"
+                            y1="0"
+                            y2="10.4478"
+                          >
+                            <stop
+                              stop-color="#06847B"
+                            />
+                            <stop
+                              offset="1"
+                              stop-color="#3EE7CD"
+                            />
+                          </linearGradient>
+                        </defs>
+                      </svg>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id makeStyles-root-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <input
+                          class="makeStyles-box-id"
+                          type="checkbox"
+                          value="false"
+                        />
+                      </button>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                      data-tc="name"
+                    >
+                      Language
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSlug-id"
+                      data-tc="slug"
+                    >
+                      language
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-iconCell-id"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id MuiIconButton-root-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiIconButton-label-id"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </td>
+                  </tr>
+                  <tr
+                    class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                    data-tc="id"
+                    data-tc-id="UHJvZHVjdEF0dHJpYnV0ZToxMA=="
+                  >
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnDrag-id"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root-id"
+                        focusable="false"
+                        role="presentation"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          clip-rule="evenodd"
+                          d="M3.5 2C3.5 2.82843 2.82843 3.5 2 3.5C1.17157 3.5 0.5 2.82843 0.5 2C0.5 1.17157 1.17157 0.5 2 0.5C2.82843 0.5 3.5 1.17157 3.5 2ZM4 2C4 3.10457 3.10457 4 2 4C0.895431 4 0 3.10457 0 2C0 0.895431 0.895431 0 2 0C3.10457 0 4 0.895431 4 2ZM9.5 2C9.5 2.82843 8.82843 3.5 8 3.5C7.17157 3.5 6.5 2.82843 6.5 2C6.5 1.17157 7.17157 0.5 8 0.5C8.82843 0.5 9.5 1.17157 9.5 2ZM10 2C10 3.10457 9.10457 4 8 4C6.89543 4 6 3.10457 6 2C6 0.895431 6.89543 0 8 0C9.10457 0 10 0.895431 10 2ZM8 9.5C8.82843 9.5 9.5 8.82843 9.5 8C9.5 7.17157 8.82843 6.5 8 6.5C7.17157 6.5 6.5 7.17157 6.5 8C6.5 8.82843 7.17157 9.5 8 9.5ZM8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10ZM3.5 8C3.5 8.82843 2.82843 9.5 2 9.5C1.17157 9.5 0.5 8.82843 0.5 8C0.5 7.17157 1.17157 6.5 2 6.5C2.82843 6.5 3.5 7.17157 3.5 8ZM4 8C4 9.10457 3.10457 10 2 10C0.895431 10 0 9.10457 0 8C0 6.89543 0.895431 6 2 6C3.10457 6 4 6.89543 4 8ZM2 15.5C2.82843 15.5 3.5 14.8284 3.5 14C3.5 13.1716 2.82843 12.5 2 12.5C1.17157 12.5 0.5 13.1716 0.5 14C0.5 14.8284 1.17157 15.5 2 15.5ZM2 16C3.10457 16 4 15.1046 4 14C4 12.8954 3.10457 12 2 12C0.895431 12 0 12.8954 0 14C0 15.1046 0.895431 16 2 16ZM9.5 14C9.5 14.8284 8.82843 15.5 8 15.5C7.17157 15.5 6.5 14.8284 6.5 14C6.5 13.1716 7.17157 12.5 8 12.5C8.82843 12.5 9.5 13.1716 9.5 14ZM10 14C10 15.1046 9.10457 16 8 16C6.89543 16 6 15.1046 6 14C6 12.8954 6.89543 12 8 12C9.10457 12 10 12.8954 10 14Z"
+                          fill="url(#paint0_linear)"
+                          fill-rule="evenodd"
+                          style="transform:translate(7px, 4px)"
+                        />
+                        <defs>
+                          <linearGradient
+                            gradientUnits="userSpaceOnUse"
+                            id="paint0_linear"
+                            x1="0"
+                            x2="16.0896"
+                            y1="0"
+                            y2="10.4478"
+                          >
+                            <stop
+                              stop-color="#06847B"
+                            />
+                            <stop
+                              offset="1"
+                              stop-color="#3EE7CD"
+                            />
+                          </linearGradient>
+                        </defs>
+                      </svg>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id makeStyles-root-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <input
+                          class="makeStyles-box-id"
+                          type="checkbox"
+                          value="false"
+                        />
+                      </button>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                      data-tc="name"
+                    >
+                      Publisher
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSlug-id"
+                      data-tc="slug"
+                    >
+                      publisher
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-iconCell-id"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id MuiIconButton-root-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiIconButton-label-id"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
           </div>
           <div
             class="makeStyles-spacer-id"
@@ -81920,10 +82420,10 @@ exports[`Storyshots Views / Product types / Product type details form errors 1`]
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -81931,7 +82431,7 @@ exports[`Storyshots Views / Product types / Product type details form errors 1`]
           E-books
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -82133,343 +82633,347 @@ exports[`Storyshots Views / Product types / Product type details form errors 1`]
             <hr
               class="makeStyles-hr-id"
             />
-            <table
-              class="MuiTable-root-id"
+            <div
+              class="ResponsiveTable-root-id"
             >
-              <thead
-                class="MuiTableHead-root-id"
+              <table
+                class="MuiTable-root-id"
               >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
+                <thead
+                  class="MuiTableHead-root-id"
                 >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id"
-                    scope="col"
-                  />
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-dragRows-id MuiTableCell-paddingCheckbox-id"
-                    scope="col"
+                  <tr
+                    class="MuiTableRow-root-id MuiTableRow-head-id"
                   >
-                    <button
-                      class="MuiButtonBase-root-id makeStyles-root-id"
-                      tabindex="0"
-                      type="button"
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id"
+                      scope="col"
+                    />
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-dragRows-id MuiTableCell-paddingCheckbox-id"
+                      scope="col"
                     >
-                      <input
-                        class="makeStyles-box-id"
-                        type="checkbox"
-                        value="false"
-                      />
-                    </button>
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
-                    scope="col"
-                  >
-                    Attribute name
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
-                    scope="col"
-                  >
-                    Slug
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id"
-                    scope="col"
-                  />
-                </tr>
-              </thead>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-                  data-tc="id"
-                  data-tc-id="UHJvZHVjdEF0dHJpYnV0ZTo5"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnDrag-id"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        clip-rule="evenodd"
-                        d="M3.5 2C3.5 2.82843 2.82843 3.5 2 3.5C1.17157 3.5 0.5 2.82843 0.5 2C0.5 1.17157 1.17157 0.5 2 0.5C2.82843 0.5 3.5 1.17157 3.5 2ZM4 2C4 3.10457 3.10457 4 2 4C0.895431 4 0 3.10457 0 2C0 0.895431 0.895431 0 2 0C3.10457 0 4 0.895431 4 2ZM9.5 2C9.5 2.82843 8.82843 3.5 8 3.5C7.17157 3.5 6.5 2.82843 6.5 2C6.5 1.17157 7.17157 0.5 8 0.5C8.82843 0.5 9.5 1.17157 9.5 2ZM10 2C10 3.10457 9.10457 4 8 4C6.89543 4 6 3.10457 6 2C6 0.895431 6.89543 0 8 0C9.10457 0 10 0.895431 10 2ZM8 9.5C8.82843 9.5 9.5 8.82843 9.5 8C9.5 7.17157 8.82843 6.5 8 6.5C7.17157 6.5 6.5 7.17157 6.5 8C6.5 8.82843 7.17157 9.5 8 9.5ZM8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10ZM3.5 8C3.5 8.82843 2.82843 9.5 2 9.5C1.17157 9.5 0.5 8.82843 0.5 8C0.5 7.17157 1.17157 6.5 2 6.5C2.82843 6.5 3.5 7.17157 3.5 8ZM4 8C4 9.10457 3.10457 10 2 10C0.895431 10 0 9.10457 0 8C0 6.89543 0.895431 6 2 6C3.10457 6 4 6.89543 4 8ZM2 15.5C2.82843 15.5 3.5 14.8284 3.5 14C3.5 13.1716 2.82843 12.5 2 12.5C1.17157 12.5 0.5 13.1716 0.5 14C0.5 14.8284 1.17157 15.5 2 15.5ZM2 16C3.10457 16 4 15.1046 4 14C4 12.8954 3.10457 12 2 12C0.895431 12 0 12.8954 0 14C0 15.1046 0.895431 16 2 16ZM9.5 14C9.5 14.8284 8.82843 15.5 8 15.5C7.17157 15.5 6.5 14.8284 6.5 14C6.5 13.1716 7.17157 12.5 8 12.5C8.82843 12.5 9.5 13.1716 9.5 14ZM10 14C10 15.1046 9.10457 16 8 16C6.89543 16 6 15.1046 6 14C6 12.8954 6.89543 12 8 12C9.10457 12 10 12.8954 10 14Z"
-                        fill="url(#paint0_linear)"
-                        fill-rule="evenodd"
-                        style="transform:translate(7px, 4px)"
-                      />
-                      <defs>
-                        <linearGradient
-                          gradientUnits="userSpaceOnUse"
-                          id="paint0_linear"
-                          x1="0"
-                          x2="16.0896"
-                          y1="0"
-                          y2="10.4478"
-                        >
-                          <stop
-                            stop-color="#06847B"
-                          />
-                          <stop
-                            offset="1"
-                            stop-color="#3EE7CD"
-                          />
-                        </linearGradient>
-                      </defs>
-                    </svg>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id makeStyles-root-id"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <input
-                        class="makeStyles-box-id"
-                        type="checkbox"
-                        value="false"
-                      />
-                    </button>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
-                    data-tc="name"
-                  >
-                    Author
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSlug-id"
-                    data-tc="slug"
-                  >
-                    author
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-iconCell-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
+                      <button
+                        class="MuiButtonBase-root-id makeStyles-root-id"
+                        tabindex="0"
+                        type="button"
                       >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
-                          focusable="false"
-                          role="presentation"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                          />
-                        </svg>
-                      </span>
-                    </button>
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-                  data-tc="id"
-                  data-tc-id="UHJvZHVjdEF0dHJpYnV0ZToxMQ=="
+                        <input
+                          class="makeStyles-box-id"
+                          type="checkbox"
+                          value="false"
+                        />
+                      </button>
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                      scope="col"
+                    >
+                      Attribute name
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                      scope="col"
+                    >
+                      Slug
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id"
+                      scope="col"
+                    />
+                  </tr>
+                </thead>
+                <tbody
+                  class="MuiTableBody-root-id"
                 >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnDrag-id"
+                  <tr
+                    class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                    data-tc="id"
+                    data-tc-id="UHJvZHVjdEF0dHJpYnV0ZTo5"
                   >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnDrag-id"
                     >
-                      <path
-                        clip-rule="evenodd"
-                        d="M3.5 2C3.5 2.82843 2.82843 3.5 2 3.5C1.17157 3.5 0.5 2.82843 0.5 2C0.5 1.17157 1.17157 0.5 2 0.5C2.82843 0.5 3.5 1.17157 3.5 2ZM4 2C4 3.10457 3.10457 4 2 4C0.895431 4 0 3.10457 0 2C0 0.895431 0.895431 0 2 0C3.10457 0 4 0.895431 4 2ZM9.5 2C9.5 2.82843 8.82843 3.5 8 3.5C7.17157 3.5 6.5 2.82843 6.5 2C6.5 1.17157 7.17157 0.5 8 0.5C8.82843 0.5 9.5 1.17157 9.5 2ZM10 2C10 3.10457 9.10457 4 8 4C6.89543 4 6 3.10457 6 2C6 0.895431 6.89543 0 8 0C9.10457 0 10 0.895431 10 2ZM8 9.5C8.82843 9.5 9.5 8.82843 9.5 8C9.5 7.17157 8.82843 6.5 8 6.5C7.17157 6.5 6.5 7.17157 6.5 8C6.5 8.82843 7.17157 9.5 8 9.5ZM8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10ZM3.5 8C3.5 8.82843 2.82843 9.5 2 9.5C1.17157 9.5 0.5 8.82843 0.5 8C0.5 7.17157 1.17157 6.5 2 6.5C2.82843 6.5 3.5 7.17157 3.5 8ZM4 8C4 9.10457 3.10457 10 2 10C0.895431 10 0 9.10457 0 8C0 6.89543 0.895431 6 2 6C3.10457 6 4 6.89543 4 8ZM2 15.5C2.82843 15.5 3.5 14.8284 3.5 14C3.5 13.1716 2.82843 12.5 2 12.5C1.17157 12.5 0.5 13.1716 0.5 14C0.5 14.8284 1.17157 15.5 2 15.5ZM2 16C3.10457 16 4 15.1046 4 14C4 12.8954 3.10457 12 2 12C0.895431 12 0 12.8954 0 14C0 15.1046 0.895431 16 2 16ZM9.5 14C9.5 14.8284 8.82843 15.5 8 15.5C7.17157 15.5 6.5 14.8284 6.5 14C6.5 13.1716 7.17157 12.5 8 12.5C8.82843 12.5 9.5 13.1716 9.5 14ZM10 14C10 15.1046 9.10457 16 8 16C6.89543 16 6 15.1046 6 14C6 12.8954 6.89543 12 8 12C9.10457 12 10 12.8954 10 14Z"
-                        fill="url(#paint0_linear)"
-                        fill-rule="evenodd"
-                        style="transform:translate(7px, 4px)"
-                      />
-                      <defs>
-                        <linearGradient
-                          gradientUnits="userSpaceOnUse"
-                          id="paint0_linear"
-                          x1="0"
-                          x2="16.0896"
-                          y1="0"
-                          y2="10.4478"
-                        >
-                          <stop
-                            stop-color="#06847B"
-                          />
-                          <stop
-                            offset="1"
-                            stop-color="#3EE7CD"
-                          />
-                        </linearGradient>
-                      </defs>
-                    </svg>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id makeStyles-root-id"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <input
-                        class="makeStyles-box-id"
-                        type="checkbox"
-                        value="false"
-                      />
-                    </button>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
-                    data-tc="name"
-                  >
-                    Language
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSlug-id"
-                    data-tc="slug"
-                  >
-                    language
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-iconCell-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root-id"
+                        focusable="false"
+                        role="presentation"
+                        viewBox="0 0 24 24"
                       >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
-                          focusable="false"
-                          role="presentation"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                          />
-                        </svg>
-                      </span>
-                    </button>
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-                  data-tc="id"
-                  data-tc-id="UHJvZHVjdEF0dHJpYnV0ZToxMA=="
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnDrag-id"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
+                        <path
+                          clip-rule="evenodd"
+                          d="M3.5 2C3.5 2.82843 2.82843 3.5 2 3.5C1.17157 3.5 0.5 2.82843 0.5 2C0.5 1.17157 1.17157 0.5 2 0.5C2.82843 0.5 3.5 1.17157 3.5 2ZM4 2C4 3.10457 3.10457 4 2 4C0.895431 4 0 3.10457 0 2C0 0.895431 0.895431 0 2 0C3.10457 0 4 0.895431 4 2ZM9.5 2C9.5 2.82843 8.82843 3.5 8 3.5C7.17157 3.5 6.5 2.82843 6.5 2C6.5 1.17157 7.17157 0.5 8 0.5C8.82843 0.5 9.5 1.17157 9.5 2ZM10 2C10 3.10457 9.10457 4 8 4C6.89543 4 6 3.10457 6 2C6 0.895431 6.89543 0 8 0C9.10457 0 10 0.895431 10 2ZM8 9.5C8.82843 9.5 9.5 8.82843 9.5 8C9.5 7.17157 8.82843 6.5 8 6.5C7.17157 6.5 6.5 7.17157 6.5 8C6.5 8.82843 7.17157 9.5 8 9.5ZM8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10ZM3.5 8C3.5 8.82843 2.82843 9.5 2 9.5C1.17157 9.5 0.5 8.82843 0.5 8C0.5 7.17157 1.17157 6.5 2 6.5C2.82843 6.5 3.5 7.17157 3.5 8ZM4 8C4 9.10457 3.10457 10 2 10C0.895431 10 0 9.10457 0 8C0 6.89543 0.895431 6 2 6C3.10457 6 4 6.89543 4 8ZM2 15.5C2.82843 15.5 3.5 14.8284 3.5 14C3.5 13.1716 2.82843 12.5 2 12.5C1.17157 12.5 0.5 13.1716 0.5 14C0.5 14.8284 1.17157 15.5 2 15.5ZM2 16C3.10457 16 4 15.1046 4 14C4 12.8954 3.10457 12 2 12C0.895431 12 0 12.8954 0 14C0 15.1046 0.895431 16 2 16ZM9.5 14C9.5 14.8284 8.82843 15.5 8 15.5C7.17157 15.5 6.5 14.8284 6.5 14C6.5 13.1716 7.17157 12.5 8 12.5C8.82843 12.5 9.5 13.1716 9.5 14ZM10 14C10 15.1046 9.10457 16 8 16C6.89543 16 6 15.1046 6 14C6 12.8954 6.89543 12 8 12C9.10457 12 10 12.8954 10 14Z"
+                          fill="url(#paint0_linear)"
+                          fill-rule="evenodd"
+                          style="transform:translate(7px, 4px)"
+                        />
+                        <defs>
+                          <linearGradient
+                            gradientUnits="userSpaceOnUse"
+                            id="paint0_linear"
+                            x1="0"
+                            x2="16.0896"
+                            y1="0"
+                            y2="10.4478"
+                          >
+                            <stop
+                              stop-color="#06847B"
+                            />
+                            <stop
+                              offset="1"
+                              stop-color="#3EE7CD"
+                            />
+                          </linearGradient>
+                        </defs>
+                      </svg>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                     >
-                      <path
-                        clip-rule="evenodd"
-                        d="M3.5 2C3.5 2.82843 2.82843 3.5 2 3.5C1.17157 3.5 0.5 2.82843 0.5 2C0.5 1.17157 1.17157 0.5 2 0.5C2.82843 0.5 3.5 1.17157 3.5 2ZM4 2C4 3.10457 3.10457 4 2 4C0.895431 4 0 3.10457 0 2C0 0.895431 0.895431 0 2 0C3.10457 0 4 0.895431 4 2ZM9.5 2C9.5 2.82843 8.82843 3.5 8 3.5C7.17157 3.5 6.5 2.82843 6.5 2C6.5 1.17157 7.17157 0.5 8 0.5C8.82843 0.5 9.5 1.17157 9.5 2ZM10 2C10 3.10457 9.10457 4 8 4C6.89543 4 6 3.10457 6 2C6 0.895431 6.89543 0 8 0C9.10457 0 10 0.895431 10 2ZM8 9.5C8.82843 9.5 9.5 8.82843 9.5 8C9.5 7.17157 8.82843 6.5 8 6.5C7.17157 6.5 6.5 7.17157 6.5 8C6.5 8.82843 7.17157 9.5 8 9.5ZM8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10ZM3.5 8C3.5 8.82843 2.82843 9.5 2 9.5C1.17157 9.5 0.5 8.82843 0.5 8C0.5 7.17157 1.17157 6.5 2 6.5C2.82843 6.5 3.5 7.17157 3.5 8ZM4 8C4 9.10457 3.10457 10 2 10C0.895431 10 0 9.10457 0 8C0 6.89543 0.895431 6 2 6C3.10457 6 4 6.89543 4 8ZM2 15.5C2.82843 15.5 3.5 14.8284 3.5 14C3.5 13.1716 2.82843 12.5 2 12.5C1.17157 12.5 0.5 13.1716 0.5 14C0.5 14.8284 1.17157 15.5 2 15.5ZM2 16C3.10457 16 4 15.1046 4 14C4 12.8954 3.10457 12 2 12C0.895431 12 0 12.8954 0 14C0 15.1046 0.895431 16 2 16ZM9.5 14C9.5 14.8284 8.82843 15.5 8 15.5C7.17157 15.5 6.5 14.8284 6.5 14C6.5 13.1716 7.17157 12.5 8 12.5C8.82843 12.5 9.5 13.1716 9.5 14ZM10 14C10 15.1046 9.10457 16 8 16C6.89543 16 6 15.1046 6 14C6 12.8954 6.89543 12 8 12C9.10457 12 10 12.8954 10 14Z"
-                        fill="url(#paint0_linear)"
-                        fill-rule="evenodd"
-                        style="transform:translate(7px, 4px)"
-                      />
-                      <defs>
-                        <linearGradient
-                          gradientUnits="userSpaceOnUse"
-                          id="paint0_linear"
-                          x1="0"
-                          x2="16.0896"
-                          y1="0"
-                          y2="10.4478"
-                        >
-                          <stop
-                            stop-color="#06847B"
-                          />
-                          <stop
-                            offset="1"
-                            stop-color="#3EE7CD"
-                          />
-                        </linearGradient>
-                      </defs>
-                    </svg>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id makeStyles-root-id"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <input
-                        class="makeStyles-box-id"
-                        type="checkbox"
-                        value="false"
-                      />
-                    </button>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
-                    data-tc="name"
-                  >
-                    Publisher
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSlug-id"
-                    data-tc="slug"
-                  >
-                    publisher
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-iconCell-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
+                      <button
+                        class="MuiButtonBase-root-id makeStyles-root-id"
+                        tabindex="0"
+                        type="button"
                       >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
-                          focusable="false"
-                          role="presentation"
-                          viewBox="0 0 24 24"
+                        <input
+                          class="makeStyles-box-id"
+                          type="checkbox"
+                          value="false"
+                        />
+                      </button>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                      data-tc="name"
+                    >
+                      Author
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSlug-id"
+                      data-tc="slug"
+                    >
+                      author
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-iconCell-id"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id MuiIconButton-root-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiIconButton-label-id"
                         >
-                          <path
-                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                          />
-                        </svg>
-                      </span>
-                    </button>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </td>
+                  </tr>
+                  <tr
+                    class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                    data-tc="id"
+                    data-tc-id="UHJvZHVjdEF0dHJpYnV0ZToxMQ=="
+                  >
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnDrag-id"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root-id"
+                        focusable="false"
+                        role="presentation"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          clip-rule="evenodd"
+                          d="M3.5 2C3.5 2.82843 2.82843 3.5 2 3.5C1.17157 3.5 0.5 2.82843 0.5 2C0.5 1.17157 1.17157 0.5 2 0.5C2.82843 0.5 3.5 1.17157 3.5 2ZM4 2C4 3.10457 3.10457 4 2 4C0.895431 4 0 3.10457 0 2C0 0.895431 0.895431 0 2 0C3.10457 0 4 0.895431 4 2ZM9.5 2C9.5 2.82843 8.82843 3.5 8 3.5C7.17157 3.5 6.5 2.82843 6.5 2C6.5 1.17157 7.17157 0.5 8 0.5C8.82843 0.5 9.5 1.17157 9.5 2ZM10 2C10 3.10457 9.10457 4 8 4C6.89543 4 6 3.10457 6 2C6 0.895431 6.89543 0 8 0C9.10457 0 10 0.895431 10 2ZM8 9.5C8.82843 9.5 9.5 8.82843 9.5 8C9.5 7.17157 8.82843 6.5 8 6.5C7.17157 6.5 6.5 7.17157 6.5 8C6.5 8.82843 7.17157 9.5 8 9.5ZM8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10ZM3.5 8C3.5 8.82843 2.82843 9.5 2 9.5C1.17157 9.5 0.5 8.82843 0.5 8C0.5 7.17157 1.17157 6.5 2 6.5C2.82843 6.5 3.5 7.17157 3.5 8ZM4 8C4 9.10457 3.10457 10 2 10C0.895431 10 0 9.10457 0 8C0 6.89543 0.895431 6 2 6C3.10457 6 4 6.89543 4 8ZM2 15.5C2.82843 15.5 3.5 14.8284 3.5 14C3.5 13.1716 2.82843 12.5 2 12.5C1.17157 12.5 0.5 13.1716 0.5 14C0.5 14.8284 1.17157 15.5 2 15.5ZM2 16C3.10457 16 4 15.1046 4 14C4 12.8954 3.10457 12 2 12C0.895431 12 0 12.8954 0 14C0 15.1046 0.895431 16 2 16ZM9.5 14C9.5 14.8284 8.82843 15.5 8 15.5C7.17157 15.5 6.5 14.8284 6.5 14C6.5 13.1716 7.17157 12.5 8 12.5C8.82843 12.5 9.5 13.1716 9.5 14ZM10 14C10 15.1046 9.10457 16 8 16C6.89543 16 6 15.1046 6 14C6 12.8954 6.89543 12 8 12C9.10457 12 10 12.8954 10 14Z"
+                          fill="url(#paint0_linear)"
+                          fill-rule="evenodd"
+                          style="transform:translate(7px, 4px)"
+                        />
+                        <defs>
+                          <linearGradient
+                            gradientUnits="userSpaceOnUse"
+                            id="paint0_linear"
+                            x1="0"
+                            x2="16.0896"
+                            y1="0"
+                            y2="10.4478"
+                          >
+                            <stop
+                              stop-color="#06847B"
+                            />
+                            <stop
+                              offset="1"
+                              stop-color="#3EE7CD"
+                            />
+                          </linearGradient>
+                        </defs>
+                      </svg>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id makeStyles-root-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <input
+                          class="makeStyles-box-id"
+                          type="checkbox"
+                          value="false"
+                        />
+                      </button>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                      data-tc="name"
+                    >
+                      Language
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSlug-id"
+                      data-tc="slug"
+                    >
+                      language
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-iconCell-id"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id MuiIconButton-root-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiIconButton-label-id"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </td>
+                  </tr>
+                  <tr
+                    class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                    data-tc="id"
+                    data-tc-id="UHJvZHVjdEF0dHJpYnV0ZToxMA=="
+                  >
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnDrag-id"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root-id"
+                        focusable="false"
+                        role="presentation"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          clip-rule="evenodd"
+                          d="M3.5 2C3.5 2.82843 2.82843 3.5 2 3.5C1.17157 3.5 0.5 2.82843 0.5 2C0.5 1.17157 1.17157 0.5 2 0.5C2.82843 0.5 3.5 1.17157 3.5 2ZM4 2C4 3.10457 3.10457 4 2 4C0.895431 4 0 3.10457 0 2C0 0.895431 0.895431 0 2 0C3.10457 0 4 0.895431 4 2ZM9.5 2C9.5 2.82843 8.82843 3.5 8 3.5C7.17157 3.5 6.5 2.82843 6.5 2C6.5 1.17157 7.17157 0.5 8 0.5C8.82843 0.5 9.5 1.17157 9.5 2ZM10 2C10 3.10457 9.10457 4 8 4C6.89543 4 6 3.10457 6 2C6 0.895431 6.89543 0 8 0C9.10457 0 10 0.895431 10 2ZM8 9.5C8.82843 9.5 9.5 8.82843 9.5 8C9.5 7.17157 8.82843 6.5 8 6.5C7.17157 6.5 6.5 7.17157 6.5 8C6.5 8.82843 7.17157 9.5 8 9.5ZM8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10ZM3.5 8C3.5 8.82843 2.82843 9.5 2 9.5C1.17157 9.5 0.5 8.82843 0.5 8C0.5 7.17157 1.17157 6.5 2 6.5C2.82843 6.5 3.5 7.17157 3.5 8ZM4 8C4 9.10457 3.10457 10 2 10C0.895431 10 0 9.10457 0 8C0 6.89543 0.895431 6 2 6C3.10457 6 4 6.89543 4 8ZM2 15.5C2.82843 15.5 3.5 14.8284 3.5 14C3.5 13.1716 2.82843 12.5 2 12.5C1.17157 12.5 0.5 13.1716 0.5 14C0.5 14.8284 1.17157 15.5 2 15.5ZM2 16C3.10457 16 4 15.1046 4 14C4 12.8954 3.10457 12 2 12C0.895431 12 0 12.8954 0 14C0 15.1046 0.895431 16 2 16ZM9.5 14C9.5 14.8284 8.82843 15.5 8 15.5C7.17157 15.5 6.5 14.8284 6.5 14C6.5 13.1716 7.17157 12.5 8 12.5C8.82843 12.5 9.5 13.1716 9.5 14ZM10 14C10 15.1046 9.10457 16 8 16C6.89543 16 6 15.1046 6 14C6 12.8954 6.89543 12 8 12C9.10457 12 10 12.8954 10 14Z"
+                          fill="url(#paint0_linear)"
+                          fill-rule="evenodd"
+                          style="transform:translate(7px, 4px)"
+                        />
+                        <defs>
+                          <linearGradient
+                            gradientUnits="userSpaceOnUse"
+                            id="paint0_linear"
+                            x1="0"
+                            x2="16.0896"
+                            y1="0"
+                            y2="10.4478"
+                          >
+                            <stop
+                              stop-color="#06847B"
+                            />
+                            <stop
+                              offset="1"
+                              stop-color="#3EE7CD"
+                            />
+                          </linearGradient>
+                        </defs>
+                      </svg>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id makeStyles-root-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <input
+                          class="makeStyles-box-id"
+                          type="checkbox"
+                          value="false"
+                        />
+                      </button>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                      data-tc="name"
+                    >
+                      Publisher
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSlug-id"
+                      data-tc="slug"
+                    >
+                      publisher
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-iconCell-id"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id MuiIconButton-root-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiIconButton-label-id"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
           </div>
           <div
             class="makeStyles-spacer-id"
@@ -82578,10 +83082,10 @@ exports[`Storyshots Views / Product types / Product type details loading 1`] = `
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -82594,7 +83098,7 @@ exports[`Storyshots Views / Product types / Product type details loading 1`] = `
           </span>
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -82793,164 +83297,168 @@ exports[`Storyshots Views / Product types / Product type details loading 1`] = `
             <hr
               class="makeStyles-hr-id"
             />
-            <table
-              class="MuiTable-root-id"
+            <div
+              class="ResponsiveTable-root-id"
             >
-              <thead
-                class="MuiTableHead-root-id"
+              <table
+                class="MuiTable-root-id"
               >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
+                <thead
+                  class="MuiTableHead-root-id"
                 >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id"
-                    scope="col"
-                  />
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-dragRows-id MuiTableCell-paddingCheckbox-id"
-                    scope="col"
+                  <tr
+                    class="MuiTableRow-root-id MuiTableRow-head-id"
                   >
-                    <button
-                      class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id"
+                      scope="col"
+                    />
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-dragRows-id MuiTableCell-paddingCheckbox-id"
+                      scope="col"
                     >
-                      <input
-                        class="makeStyles-box-id makeStyles-disabled-id"
+                      <button
+                        class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
                         disabled=""
-                        type="checkbox"
-                        value="false"
-                      />
-                    </button>
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
-                    scope="col"
-                  >
-                    Attribute name
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
-                    scope="col"
-                  >
-                    Slug
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id"
-                    scope="col"
-                  />
-                </tr>
-              </thead>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id"
-                  data-tc="id"
+                        tabindex="-1"
+                        type="button"
+                      >
+                        <input
+                          class="makeStyles-box-id makeStyles-disabled-id"
+                          disabled=""
+                          type="checkbox"
+                          value="false"
+                        />
+                      </button>
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                      scope="col"
+                    >
+                      Attribute name
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                      scope="col"
+                    >
+                      Slug
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id"
+                      scope="col"
+                    />
+                  </tr>
+                </thead>
+                <tbody
+                  class="MuiTableBody-root-id"
                 >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnDrag-id"
+                  <tr
+                    class="MuiTableRow-root-id"
+                    data-tc="id"
                   >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnDrag-id"
                     >
-                      <path
-                        clip-rule="evenodd"
-                        d="M3.5 2C3.5 2.82843 2.82843 3.5 2 3.5C1.17157 3.5 0.5 2.82843 0.5 2C0.5 1.17157 1.17157 0.5 2 0.5C2.82843 0.5 3.5 1.17157 3.5 2ZM4 2C4 3.10457 3.10457 4 2 4C0.895431 4 0 3.10457 0 2C0 0.895431 0.895431 0 2 0C3.10457 0 4 0.895431 4 2ZM9.5 2C9.5 2.82843 8.82843 3.5 8 3.5C7.17157 3.5 6.5 2.82843 6.5 2C6.5 1.17157 7.17157 0.5 8 0.5C8.82843 0.5 9.5 1.17157 9.5 2ZM10 2C10 3.10457 9.10457 4 8 4C6.89543 4 6 3.10457 6 2C6 0.895431 6.89543 0 8 0C9.10457 0 10 0.895431 10 2ZM8 9.5C8.82843 9.5 9.5 8.82843 9.5 8C9.5 7.17157 8.82843 6.5 8 6.5C7.17157 6.5 6.5 7.17157 6.5 8C6.5 8.82843 7.17157 9.5 8 9.5ZM8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10ZM3.5 8C3.5 8.82843 2.82843 9.5 2 9.5C1.17157 9.5 0.5 8.82843 0.5 8C0.5 7.17157 1.17157 6.5 2 6.5C2.82843 6.5 3.5 7.17157 3.5 8ZM4 8C4 9.10457 3.10457 10 2 10C0.895431 10 0 9.10457 0 8C0 6.89543 0.895431 6 2 6C3.10457 6 4 6.89543 4 8ZM2 15.5C2.82843 15.5 3.5 14.8284 3.5 14C3.5 13.1716 2.82843 12.5 2 12.5C1.17157 12.5 0.5 13.1716 0.5 14C0.5 14.8284 1.17157 15.5 2 15.5ZM2 16C3.10457 16 4 15.1046 4 14C4 12.8954 3.10457 12 2 12C0.895431 12 0 12.8954 0 14C0 15.1046 0.895431 16 2 16ZM9.5 14C9.5 14.8284 8.82843 15.5 8 15.5C7.17157 15.5 6.5 14.8284 6.5 14C6.5 13.1716 7.17157 12.5 8 12.5C8.82843 12.5 9.5 13.1716 9.5 14ZM10 14C10 15.1046 9.10457 16 8 16C6.89543 16 6 15.1046 6 14C6 12.8954 6.89543 12 8 12C9.10457 12 10 12.8954 10 14Z"
-                        fill="url(#paint0_linear)"
-                        fill-rule="evenodd"
-                        style="transform:translate(7px, 4px)"
-                      />
-                      <defs>
-                        <linearGradient
-                          gradientUnits="userSpaceOnUse"
-                          id="paint0_linear"
-                          x1="0"
-                          x2="16.0896"
-                          y1="0"
-                          y2="10.4478"
-                        >
-                          <stop
-                            stop-color="#06847B"
-                          />
-                          <stop
-                            offset="1"
-                            stop-color="#3EE7CD"
-                          />
-                        </linearGradient>
-                      </defs>
-                    </svg>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root-id"
+                        focusable="false"
+                        role="presentation"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          clip-rule="evenodd"
+                          d="M3.5 2C3.5 2.82843 2.82843 3.5 2 3.5C1.17157 3.5 0.5 2.82843 0.5 2C0.5 1.17157 1.17157 0.5 2 0.5C2.82843 0.5 3.5 1.17157 3.5 2ZM4 2C4 3.10457 3.10457 4 2 4C0.895431 4 0 3.10457 0 2C0 0.895431 0.895431 0 2 0C3.10457 0 4 0.895431 4 2ZM9.5 2C9.5 2.82843 8.82843 3.5 8 3.5C7.17157 3.5 6.5 2.82843 6.5 2C6.5 1.17157 7.17157 0.5 8 0.5C8.82843 0.5 9.5 1.17157 9.5 2ZM10 2C10 3.10457 9.10457 4 8 4C6.89543 4 6 3.10457 6 2C6 0.895431 6.89543 0 8 0C9.10457 0 10 0.895431 10 2ZM8 9.5C8.82843 9.5 9.5 8.82843 9.5 8C9.5 7.17157 8.82843 6.5 8 6.5C7.17157 6.5 6.5 7.17157 6.5 8C6.5 8.82843 7.17157 9.5 8 9.5ZM8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10ZM3.5 8C3.5 8.82843 2.82843 9.5 2 9.5C1.17157 9.5 0.5 8.82843 0.5 8C0.5 7.17157 1.17157 6.5 2 6.5C2.82843 6.5 3.5 7.17157 3.5 8ZM4 8C4 9.10457 3.10457 10 2 10C0.895431 10 0 9.10457 0 8C0 6.89543 0.895431 6 2 6C3.10457 6 4 6.89543 4 8ZM2 15.5C2.82843 15.5 3.5 14.8284 3.5 14C3.5 13.1716 2.82843 12.5 2 12.5C1.17157 12.5 0.5 13.1716 0.5 14C0.5 14.8284 1.17157 15.5 2 15.5ZM2 16C3.10457 16 4 15.1046 4 14C4 12.8954 3.10457 12 2 12C0.895431 12 0 12.8954 0 14C0 15.1046 0.895431 16 2 16ZM9.5 14C9.5 14.8284 8.82843 15.5 8 15.5C7.17157 15.5 6.5 14.8284 6.5 14C6.5 13.1716 7.17157 12.5 8 12.5C8.82843 12.5 9.5 13.1716 9.5 14ZM10 14C10 15.1046 9.10457 16 8 16C6.89543 16 6 15.1046 6 14C6 12.8954 6.89543 12 8 12C9.10457 12 10 12.8954 10 14Z"
+                          fill="url(#paint0_linear)"
+                          fill-rule="evenodd"
+                          style="transform:translate(7px, 4px)"
+                        />
+                        <defs>
+                          <linearGradient
+                            gradientUnits="userSpaceOnUse"
+                            id="paint0_linear"
+                            x1="0"
+                            x2="16.0896"
+                            y1="0"
+                            y2="10.4478"
+                          >
+                            <stop
+                              stop-color="#06847B"
+                            />
+                            <stop
+                              offset="1"
+                              stop-color="#3EE7CD"
+                            />
+                          </linearGradient>
+                        </defs>
+                      </svg>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                     >
-                      <input
-                        class="makeStyles-box-id makeStyles-disabled-id"
+                      <button
+                        class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
                         disabled=""
-                        type="checkbox"
-                        value="false"
-                      />
-                    </button>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
-                    data-tc="name"
-                  >
-                    <span
-                      class="makeStyles-skeleton-id"
-                    >
-                      ‌
-                    </span>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSlug-id"
-                    data-tc="slug"
-                  >
-                    <span
-                      class="makeStyles-skeleton-id"
-                    >
-                      ‌
-                    </span>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-iconCell-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id"
-                      tabindex="0"
-                      type="button"
+                        tabindex="-1"
+                        type="button"
+                      >
+                        <input
+                          class="makeStyles-box-id makeStyles-disabled-id"
+                          disabled=""
+                          type="checkbox"
+                          value="false"
+                        />
+                      </button>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                      data-tc="name"
                     >
                       <span
-                        class="MuiIconButton-label-id"
+                        class="makeStyles-skeleton-id"
                       >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
-                          focusable="false"
-                          role="presentation"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                          />
-                        </svg>
+                        ‌
                       </span>
-                    </button>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSlug-id"
+                      data-tc="slug"
+                    >
+                      <span
+                        class="makeStyles-skeleton-id"
+                      >
+                        ‌
+                      </span>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-iconCell-id"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id MuiIconButton-root-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiIconButton-label-id"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
           </div>
           <div
             class="makeStyles-spacer-id"
@@ -83063,10 +83571,10 @@ exports[`Storyshots Views / Product types / Product type details no attributes 1
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -83074,7 +83582,7 @@ exports[`Storyshots Views / Product types / Product type details no attributes 1
           E-books
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -83271,48 +83779,52 @@ exports[`Storyshots Views / Product types / Product type details no attributes 1
             <hr
               class="makeStyles-hr-id"
             />
-            <table
-              class="MuiTable-root-id"
+            <div
+              class="ResponsiveTable-root-id"
             >
-              <thead
-                class="MuiTableHead-root-id"
+              <table
+                class="MuiTable-root-id"
               >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
+                <thead
+                  class="MuiTableHead-root-id"
                 >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
-                    scope="col"
+                  <tr
+                    class="MuiTableRow-root-id MuiTableRow-head-id"
                   >
-                    Attribute name
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
-                    scope="col"
-                  >
-                    Slug
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id"
-                    scope="col"
-                  />
-                </tr>
-              </thead>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id"
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                      scope="col"
+                    >
+                      Attribute name
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                      scope="col"
+                    >
+                      Slug
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id"
+                      scope="col"
+                    />
+                  </tr>
+                </thead>
+                <tbody
+                  class="MuiTableBody-root-id"
                 >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                    colspan="5"
+                  <tr
+                    class="MuiTableRow-root-id"
                   >
-                    No attributes found
-                  </td>
-                </tr>
-              </tbody>
-            </table>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                      colspan="5"
+                    >
+                      No attributes found
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
           </div>
           <div
             class="makeStyles-spacer-id"
@@ -83420,10 +83932,10 @@ exports[`Storyshots Views / Product types / Product types list default 1`] = `
   style="padding:24px"
 >
   <div
-    class="makeStyles-root-id"
+    class="Container-root-id"
   >
     <div
-      class="makeStyles-root-id"
+      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
         class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -83431,7 +83943,7 @@ exports[`Storyshots Views / Product types / Product types list default 1`] = `
         Product Types
       </div>
       <div
-        class="makeStyles-action-id"
+        class="ExtendedPageHeader-action-id"
       >
         <div
           class="makeStyles-root-id"
@@ -83527,358 +84039,362 @@ exports[`Storyshots Views / Product types / Product types list default 1`] = `
       <hr
         class="makeStyles-root-id"
       />
-      <table
-        class="MuiTable-root-id"
+      <div
+        class="ResponsiveTable-root-id"
       >
-        <thead
-          class="MuiTableHead-root-id"
+        <table
+          class="MuiTable-root-id"
         >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-head-id"
+          <thead
+            class="MuiTableHead-root-id"
           >
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
-              scope="col"
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-head-id"
             >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
+                scope="col"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
-              scope="col"
-            >
-              Type Name
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colType-id"
-              scope="col"
-            >
-              Type
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTax-id"
-              scope="col"
-            >
-              Tax
-            </th>
-          </tr>
-        </thead>
-        <tfoot
-          class="MuiTableFooter-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-footer-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
-              colspan="4"
-            >
-              <div
-                class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
-              >
-                <div
-                  class="makeStyles-spacer-id"
-                />
-                <div
-                  class="makeStyles-root-id"
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
                 >
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                    data-tc="button-pagination-back"
-                    disabled=""
-                    tabindex="-1"
-                    type="button"
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                scope="col"
+              >
+                Type Name
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colType-id"
+                scope="col"
+              >
+                Type
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTax-id"
+                scope="col"
+              >
+                Tax
+              </th>
+            </tr>
+          </thead>
+          <tfoot
+            class="MuiTableFooter-root-id"
+          >
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-footer-id"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                colspan="4"
+              >
+                <div
+                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+                >
+                  <div
+                    class="makeStyles-spacer-id"
+                  />
+                  <div
+                    class="makeStyles-root-id"
                   >
-                    <span
-                      class="MuiIconButton-label-id"
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      data-tc="button-pagination-back"
+                      disabled=""
+                      tabindex="-1"
+                      type="button"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
+                      <span
+                        class="MuiIconButton-label-id"
                       >
-                        <path
-                          d="M14 7l-5 5 5 5V7z"
-                        />
-                        <path
-                          d="M24 0v24H0V0h24z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
-                    data-tc="button-pagination-next"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M14 7l-5 5 5 5V7z"
+                          />
+                          <path
+                            d="M24 0v24H0V0h24z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                      data-tc="button-pagination-next"
+                      tabindex="0"
+                      type="button"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
+                      <span
+                        class="MuiIconButton-label-id"
                       >
-                        <path
-                          d="M10 17l5-5-5-5v10z"
-                        />
-                        <path
-                          d="M0 24V0h24v24H0z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M10 17l5-5-5-5v10z"
+                          />
+                          <path
+                            d="M0 24V0h24v24H0z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </div>
                 </div>
-              </div>
-            </td>
-          </tr>
-        </tfoot>
-        <tbody
-          class="MuiTableBody-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-            data-tc="id"
-            data-tc-id="UHJvZHVjdFR5cGU6NA=="
+              </td>
+            </tr>
+          </tfoot>
+          <tbody
+            class="MuiTableBody-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+            <tr
+              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              data-tc="id"
+              data-tc-id="UHJvZHVjdFR5cGU6NA=="
             >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
-            >
-              <span
-                data-tc="name"
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
               >
-                Candy
-              </span>
-              <div
-                class="MuiTypography-root-id MuiTypography-caption-id"
+                <span
+                  data-tc="name"
+                >
+                  Candy
+                </span>
+                <div
+                  class="MuiTypography-root-id MuiTypography-caption-id"
+                >
+                  Configurable
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
               >
-                Configurable
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
-            >
-              Physical
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTax-id"
-            >
-              PB100000
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-            data-tc="id"
-            data-tc-id="UHJvZHVjdFR5cGU6NQ=="
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+                Physical
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTax-id"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                PB100000
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              data-tc="id"
+              data-tc-id="UHJvZHVjdFR5cGU6NQ=="
             >
-              <span
-                data-tc="name"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
-                E-books
-              </span>
-              <div
-                class="MuiTypography-root-id MuiTypography-caption-id"
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
               >
-                Simple product
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
-            >
-              Digital
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTax-id"
-            >
-              PH403682
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-            data-tc="id"
-            data-tc-id="UHJvZHVjdFR5cGU6Mg=="
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+                <span
+                  data-tc="name"
+                >
+                  E-books
+                </span>
+                <div
+                  class="MuiTypography-root-id MuiTypography-caption-id"
+                >
+                  Simple product
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
-            >
-              <span
-                data-tc="name"
+                Digital
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTax-id"
               >
-                Mugs
-              </span>
-              <div
-                class="MuiTypography-root-id MuiTypography-caption-id"
+                PH403682
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              data-tc="id"
+              data-tc-id="UHJvZHVjdFR5cGU6Mg=="
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
-                Simple product
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
-            >
-              Physical
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTax-id"
-            >
-              PC077426
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-            data-tc="id"
-            data-tc-id="UHJvZHVjdFR5cGU6Mw=="
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
-            >
-              <span
-                data-tc="name"
+                <span
+                  data-tc="name"
+                >
+                  Mugs
+                </span>
+                <div
+                  class="MuiTypography-root-id MuiTypography-caption-id"
+                >
+                  Simple product
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
               >
-                Coffee
-              </span>
-              <div
-                class="MuiTypography-root-id MuiTypography-caption-id"
+                Physical
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTax-id"
               >
-                Configurable
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
+                PC077426
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              data-tc="id"
+              data-tc-id="UHJvZHVjdFR5cGU6Mw=="
             >
-              Physical
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTax-id"
-            >
-              PB100000
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-            data-tc="id"
-            data-tc-id="UHJvZHVjdFR5cGU6MQ=="
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
-                tabindex="0"
-                type="button"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
-                <input
-                  class="makeStyles-box-id"
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
-            >
-              <span
-                data-tc="name"
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
               >
-                T-Shirt
-              </span>
-              <div
-                class="MuiTypography-root-id MuiTypography-caption-id"
+                <span
+                  data-tc="name"
+                >
+                  Coffee
+                </span>
+                <div
+                  class="MuiTypography-root-id MuiTypography-caption-id"
+                >
+                  Configurable
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
               >
-                Configurable
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
+                Physical
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTax-id"
+              >
+                PB100000
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              data-tc="id"
+              data-tc-id="UHJvZHVjdFR5cGU6MQ=="
             >
-              Physical
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTax-id"
-            >
-              PH403970
-            </td>
-          </tr>
-        </tbody>
-      </table>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+              >
+                <span
+                  data-tc="name"
+                >
+                  T-Shirt
+                </span>
+                <div
+                  class="MuiTypography-root-id MuiTypography-caption-id"
+                >
+                  Configurable
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
+              >
+                Physical
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTax-id"
+              >
+                PH403970
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
     </div>
   </div>
 </div>
@@ -83889,10 +84405,10 @@ exports[`Storyshots Views / Product types / Product types list loading 1`] = `
   style="padding:24px"
 >
   <div
-    class="makeStyles-root-id"
+    class="Container-root-id"
   >
     <div
-      class="makeStyles-root-id"
+      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
         class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -83900,7 +84416,7 @@ exports[`Storyshots Views / Product types / Product types list loading 1`] = `
         Product Types
       </div>
       <div
-        class="makeStyles-action-id"
+        class="ExtendedPageHeader-action-id"
       >
         <div
           class="makeStyles-root-id"
@@ -83996,185 +84512,189 @@ exports[`Storyshots Views / Product types / Product types list loading 1`] = `
       <hr
         class="makeStyles-root-id"
       />
-      <table
-        class="MuiTable-root-id"
+      <div
+        class="ResponsiveTable-root-id"
       >
-        <thead
-          class="MuiTableHead-root-id"
+        <table
+          class="MuiTable-root-id"
         >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-head-id"
+          <thead
+            class="MuiTableHead-root-id"
           >
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
-              scope="col"
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-head-id"
             >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
-                disabled=""
-                tabindex="-1"
-                type="button"
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
+                scope="col"
               >
-                <input
-                  class="makeStyles-box-id makeStyles-disabled-id"
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
                   disabled=""
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
-              scope="col"
-            >
-              Type Name
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colType-id"
-              scope="col"
-            >
-              Type
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTax-id"
-              scope="col"
-            >
-              Tax
-            </th>
-          </tr>
-        </thead>
-        <tfoot
-          class="MuiTableFooter-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-footer-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
-              colspan="4"
-            >
-              <div
-                class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
-              >
-                <div
-                  class="makeStyles-spacer-id"
-                />
-                <div
-                  class="makeStyles-root-id"
+                  tabindex="-1"
+                  type="button"
                 >
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                    data-tc="button-pagination-back"
+                  <input
+                    class="makeStyles-box-id makeStyles-disabled-id"
                     disabled=""
-                    tabindex="-1"
-                    type="button"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M14 7l-5 5 5 5V7z"
-                        />
-                        <path
-                          d="M24 0v24H0V0h24z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                    data-tc="button-pagination-next"
-                    disabled=""
-                    tabindex="-1"
-                    type="button"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M10 17l5-5-5-5v10z"
-                        />
-                        <path
-                          d="M0 24V0h24v24H0z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                </div>
-              </div>
-            </td>
-          </tr>
-        </tfoot>
-        <tbody
-          class="MuiTableBody-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id"
-            data-tc="id"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                scope="col"
+              >
+                Type Name
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colType-id"
+                scope="col"
+              >
+                Type
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTax-id"
+                scope="col"
+              >
+                Tax
+              </th>
+            </tr>
+          </thead>
+          <tfoot
+            class="MuiTableFooter-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-footer-id"
             >
-              <button
-                class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
-                disabled=""
-                tabindex="-1"
-                type="button"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                colspan="4"
               >
-                <input
-                  class="makeStyles-box-id makeStyles-disabled-id"
+                <div
+                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+                >
+                  <div
+                    class="makeStyles-spacer-id"
+                  />
+                  <div
+                    class="makeStyles-root-id"
+                  >
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      data-tc="button-pagination-back"
+                      disabled=""
+                      tabindex="-1"
+                      type="button"
+                    >
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M14 7l-5 5 5 5V7z"
+                          />
+                          <path
+                            d="M24 0v24H0V0h24z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      data-tc="button-pagination-next"
+                      disabled=""
+                      tabindex="-1"
+                      type="button"
+                    >
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M10 17l5-5-5-5v10z"
+                          />
+                          <path
+                            d="M0 24V0h24v24H0z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </div>
+                </div>
+              </td>
+            </tr>
+          </tfoot>
+          <tbody
+            class="MuiTableBody-root-id"
+          >
+            <tr
+              class="MuiTableRow-root-id"
+              data-tc="id"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
                   disabled=""
-                  type="checkbox"
-                  value="false"
-                />
-              </button>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
-            >
-              <span
-                class="makeStyles-skeleton-id"
+                  tabindex="-1"
+                  type="button"
+                >
+                  <input
+                    class="makeStyles-box-id makeStyles-disabled-id"
+                    disabled=""
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
               >
-                ‌
-              </span>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
-            >
-              <span
-                class="makeStyles-skeleton-id"
+                <span
+                  class="makeStyles-skeleton-id"
+                >
+                  ‌
+                </span>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
               >
-                ‌
-              </span>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTax-id"
-            >
-              <span
-                class="makeStyles-skeleton-id"
+                <span
+                  class="makeStyles-skeleton-id"
+                >
+                  ‌
+                </span>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTax-id"
               >
-                ‌
-              </span>
-            </td>
-          </tr>
-        </tbody>
-      </table>
+                <span
+                  class="makeStyles-skeleton-id"
+                >
+                  ‌
+                </span>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
     </div>
   </div>
 </div>
@@ -84185,10 +84705,10 @@ exports[`Storyshots Views / Product types / Product types list no data 1`] = `
   style="padding:24px"
 >
   <div
-    class="makeStyles-root-id"
+    class="Container-root-id"
   >
     <div
-      class="makeStyles-root-id"
+      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
         class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -84196,7 +84716,7 @@ exports[`Storyshots Views / Product types / Product types list no data 1`] = `
         Product Types
       </div>
       <div
-        class="makeStyles-action-id"
+        class="ExtendedPageHeader-action-id"
       >
         <div
           class="makeStyles-root-id"
@@ -84292,127 +84812,131 @@ exports[`Storyshots Views / Product types / Product types list no data 1`] = `
       <hr
         class="makeStyles-root-id"
       />
-      <table
-        class="MuiTable-root-id"
+      <div
+        class="ResponsiveTable-root-id"
       >
-        <thead
-          class="MuiTableHead-root-id"
+        <table
+          class="MuiTable-root-id"
         >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-head-id"
+          <thead
+            class="MuiTableHead-root-id"
           >
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
-              scope="col"
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-head-id"
             >
-              Type Name
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colType-id"
-              scope="col"
-            >
-              Type
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTax-id"
-              scope="col"
-            >
-              Tax
-            </th>
-          </tr>
-        </thead>
-        <tfoot
-          class="MuiTableFooter-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-footer-id"
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                scope="col"
+              >
+                Type Name
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colType-id"
+                scope="col"
+              >
+                Type
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTax-id"
+                scope="col"
+              >
+                Tax
+              </th>
+            </tr>
+          </thead>
+          <tfoot
+            class="MuiTableFooter-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
-              colspan="4"
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-footer-id"
             >
-              <div
-                class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                colspan="4"
               >
                 <div
-                  class="makeStyles-spacer-id"
-                />
-                <div
-                  class="makeStyles-root-id"
+                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
                 >
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                    data-tc="button-pagination-back"
-                    disabled=""
-                    tabindex="-1"
-                    type="button"
+                  <div
+                    class="makeStyles-spacer-id"
+                  />
+                  <div
+                    class="makeStyles-root-id"
                   >
-                    <span
-                      class="MuiIconButton-label-id"
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      data-tc="button-pagination-back"
+                      disabled=""
+                      tabindex="-1"
+                      type="button"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
+                      <span
+                        class="MuiIconButton-label-id"
                       >
-                        <path
-                          d="M14 7l-5 5 5 5V7z"
-                        />
-                        <path
-                          d="M24 0v24H0V0h24z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
-                    data-tc="button-pagination-next"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M14 7l-5 5 5 5V7z"
+                          />
+                          <path
+                            d="M24 0v24H0V0h24z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                      data-tc="button-pagination-next"
+                      tabindex="0"
+                      type="button"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
+                      <span
+                        class="MuiIconButton-label-id"
                       >
-                        <path
-                          d="M10 17l5-5-5-5v10z"
-                        />
-                        <path
-                          d="M0 24V0h24v24H0z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M10 17l5-5-5-5v10z"
+                          />
+                          <path
+                            d="M0 24V0h24v24H0z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </div>
                 </div>
-              </div>
-            </td>
-          </tr>
-        </tfoot>
-        <tbody
-          class="MuiTableBody-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id"
+              </td>
+            </tr>
+          </tfoot>
+          <tbody
+            class="MuiTableBody-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-              colspan="4"
+            <tr
+              class="MuiTableRow-root-id"
             >
-              No product types found
-            </td>
-          </tr>
-        </tbody>
-      </table>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id"
+                colspan="4"
+              >
+                No product types found
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
     </div>
   </div>
 </div>
@@ -86714,10 +87238,10 @@ exports[`Storyshots Views / Products / Create product When loading 1`] = `
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -86725,7 +87249,7 @@ exports[`Storyshots Views / Products / Create product When loading 1`] = `
           Add product
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -87782,10 +88306,10 @@ exports[`Storyshots Views / Products / Create product default 1`] = `
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -87793,7 +88317,7 @@ exports[`Storyshots Views / Products / Create product default 1`] = `
           Add product
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -88838,10 +89362,10 @@ exports[`Storyshots Views / Products / Create product form errors 1`] = `
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -88849,7 +89373,7 @@ exports[`Storyshots Views / Products / Create product form errors 1`] = `
           Add product
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -89914,10 +90438,10 @@ exports[`Storyshots Views / Products / Create product variant add first variant
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -89925,7 +90449,7 @@ exports[`Storyshots Views / Products / Create product variant add first variant
           Add variant
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -89957,68 +90481,72 @@ exports[`Storyshots Views / Products / Create product variant add first variant
             <hr
               class="makeStyles-hr-id"
             />
-            <table
-              class="MuiTable-root-id"
+            <div
+              class="ResponsiveTable-root-id"
             >
-              <tbody
-                class="MuiTableBody-root-id"
+              <table
+                class="MuiTable-root-id"
               >
-                <tr
-                  class="MuiTableRow-root-id"
+                <tbody
+                  class="MuiTableBody-root-id"
                 >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-tabActive-id"
+                  <tr
+                    class="MuiTableRow-root-id"
                   >
-                    <div
-                      class="makeStyles-content-id"
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-tabActive-id"
                     >
                       <div
-                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id MuiAvatar-colorDefault-id"
+                        class="makeStyles-content-id"
                       >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
-                          focusable="false"
-                          role="presentation"
-                          viewBox="0 0 24 24"
+                        <div
+                          class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id MuiAvatar-colorDefault-id"
                         >
-                          <path
-                            d="M6.10864 17.8974H3.29212C3.23158 17.8878 3.16942 17.8772 3.12042 17.8416C3.04669 17.788 3.01472 17.6983 3 17.6051V3.29232C3.01963 3.16818 3.08547 3.05213 3.20185 3.01431C3.23081 3.00488 3.26204 3.00477 3.29212 3H17.595C17.6248 3.00477 17.655 3.00954 17.6851 3.01431C17.7693 3.05715 17.8446 3.11527 17.8727 3.20199C17.8821 3.23097 17.8821 3.26223 17.887 3.29232V6.10798L20.7073 6.10342C20.7374 6.10815 20.7676 6.11285 20.7977 6.11759C20.8819 6.16039 20.9572 6.21852 20.9856 6.3053C20.9951 6.33435 20.9951 6.36561 21 6.39574V20.7074C20.9804 20.8315 20.9145 20.9476 20.7981 20.9854C20.769 20.9948 20.7378 20.9949 20.7076 20.9997L6.4008 21C6.34022 20.9904 6.27807 20.9798 6.22906 20.9442C6.15534 20.8906 6.1234 20.8009 6.10864 20.7077V17.8974ZM20.4156 18.1487H6.69292V20.4154L20.4156 20.415V18.1487ZM17.3216 10.7226L14.5234 13.4247L18.5752 17.4543C18.6102 17.5025 18.6316 17.5227 18.6457 17.5641H20.4156V13.6145L17.3216 10.7226ZM7.13581 17.5392C7.13753 17.5474 7.13886 17.5557 7.13988 17.5641H17.8565L12.6137 12.3498L7.13581 17.5392ZM17.3027 6.10892V3.58465H3.58424V17.3128H6.10864V6.41886C6.11821 6.35835 6.1288 6.29622 6.16431 6.24721C6.21777 6.17347 6.30727 6.14141 6.40031 6.12653L17.3027 6.10892ZM20.4156 12.8145V6.68856C15.8415 6.69596 11.2671 6.70333 6.69292 6.71073V17.1537L12.4178 11.7303C12.4913 11.6796 12.492 11.6793 12.5774 11.6532C12.6073 11.6536 12.6371 11.6539 12.667 11.6543C12.7517 11.6824 12.7524 11.6827 12.8246 11.7352L14.1087 13.0125L17.1155 10.1091C17.2122 10.0238 17.2154 10.0181 17.3552 10.0295C17.453 10.0463 17.4713 10.0661 17.5179 10.1059L20.4156 12.8145ZM9.46155 7.9651C10.1933 7.97204 10.8858 8.53631 11.0257 9.26605C11.125 9.7844 10.9492 10.3474 10.571 10.717C10.1291 11.1488 9.4265 11.2926 8.84531 11.0548C8.33223 10.8449 7.94546 10.3525 7.86504 9.80323C7.7658 9.12545 8.15208 8.40581 8.77376 8.11517C8.98813 8.01494 9.22433 7.96432 9.46155 7.9651ZM9.44459 8.54974C8.98175 8.55416 8.54681 8.90584 8.45303 9.36375C8.32277 10 8.9137 10.7061 9.63799 10.5718C10.051 10.4953 10.398 10.137 10.4593 9.71848C10.5424 9.15123 10.0783 8.55953 9.46446 8.54981C9.45784 8.54974 9.45121 8.54974 9.44459 8.54974Z"
-                            fill="url(#paint0_linear)"
-                          />
-                          <defs>
-                            <linearGradient
-                              gradientUnits="userSpaceOnUse"
-                              id="paint0_linear"
-                              x1="3"
-                              x2="22.8"
-                              y1="3"
-                              y2="23.5714"
-                            >
-                              <stop
-                                stop-color="#06847B"
-                              />
-                              <stop
-                                offset="1"
-                                stop-color="#3EE7CD"
-                              />
-                            </linearGradient>
-                          </defs>
-                        </svg>
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M6.10864 17.8974H3.29212C3.23158 17.8878 3.16942 17.8772 3.12042 17.8416C3.04669 17.788 3.01472 17.6983 3 17.6051V3.29232C3.01963 3.16818 3.08547 3.05213 3.20185 3.01431C3.23081 3.00488 3.26204 3.00477 3.29212 3H17.595C17.6248 3.00477 17.655 3.00954 17.6851 3.01431C17.7693 3.05715 17.8446 3.11527 17.8727 3.20199C17.8821 3.23097 17.8821 3.26223 17.887 3.29232V6.10798L20.7073 6.10342C20.7374 6.10815 20.7676 6.11285 20.7977 6.11759C20.8819 6.16039 20.9572 6.21852 20.9856 6.3053C20.9951 6.33435 20.9951 6.36561 21 6.39574V20.7074C20.9804 20.8315 20.9145 20.9476 20.7981 20.9854C20.769 20.9948 20.7378 20.9949 20.7076 20.9997L6.4008 21C6.34022 20.9904 6.27807 20.9798 6.22906 20.9442C6.15534 20.8906 6.1234 20.8009 6.10864 20.7077V17.8974ZM20.4156 18.1487H6.69292V20.4154L20.4156 20.415V18.1487ZM17.3216 10.7226L14.5234 13.4247L18.5752 17.4543C18.6102 17.5025 18.6316 17.5227 18.6457 17.5641H20.4156V13.6145L17.3216 10.7226ZM7.13581 17.5392C7.13753 17.5474 7.13886 17.5557 7.13988 17.5641H17.8565L12.6137 12.3498L7.13581 17.5392ZM17.3027 6.10892V3.58465H3.58424V17.3128H6.10864V6.41886C6.11821 6.35835 6.1288 6.29622 6.16431 6.24721C6.21777 6.17347 6.30727 6.14141 6.40031 6.12653L17.3027 6.10892ZM20.4156 12.8145V6.68856C15.8415 6.69596 11.2671 6.70333 6.69292 6.71073V17.1537L12.4178 11.7303C12.4913 11.6796 12.492 11.6793 12.5774 11.6532C12.6073 11.6536 12.6371 11.6539 12.667 11.6543C12.7517 11.6824 12.7524 11.6827 12.8246 11.7352L14.1087 13.0125L17.1155 10.1091C17.2122 10.0238 17.2154 10.0181 17.3552 10.0295C17.453 10.0463 17.4713 10.0661 17.5179 10.1059L20.4156 12.8145ZM9.46155 7.9651C10.1933 7.97204 10.8858 8.53631 11.0257 9.26605C11.125 9.7844 10.9492 10.3474 10.571 10.717C10.1291 11.1488 9.4265 11.2926 8.84531 11.0548C8.33223 10.8449 7.94546 10.3525 7.86504 9.80323C7.7658 9.12545 8.15208 8.40581 8.77376 8.11517C8.98813 8.01494 9.22433 7.96432 9.46155 7.9651ZM9.44459 8.54974C8.98175 8.55416 8.54681 8.90584 8.45303 9.36375C8.32277 10 8.9137 10.7061 9.63799 10.5718C10.051 10.4953 10.398 10.137 10.4593 9.71848C10.5424 9.15123 10.0783 8.55953 9.46446 8.54981C9.45784 8.54974 9.45121 8.54974 9.44459 8.54974Z"
+                              fill="url(#paint0_linear)"
+                            />
+                            <defs>
+                              <linearGradient
+                                gradientUnits="userSpaceOnUse"
+                                id="paint0_linear"
+                                x1="3"
+                                x2="22.8"
+                                y1="3"
+                                y2="23.5714"
+                              >
+                                <stop
+                                  stop-color="#06847B"
+                                />
+                                <stop
+                                  offset="1"
+                                  stop-color="#3EE7CD"
+                                />
+                              </linearGradient>
+                            </defs>
+                          </svg>
+                        </div>
+                        <div
+                          class="makeStyles-children-id"
+                        />
                       </div>
-                      <div
-                        class="makeStyles-children-id"
-                      />
-                    </div>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
-                  >
-                    New Variant
-                  </td>
-                </tr>
-              </tbody>
-            </table>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                    >
+                      New Variant
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
           </div>
         </div>
         <div>
@@ -90367,10 +90895,10 @@ exports[`Storyshots Views / Products / Create product variant default 1`] = `
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -90378,7 +90906,7 @@ exports[`Storyshots Views / Products / Create product variant default 1`] = `
           Add variant
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -90410,124 +90938,128 @@ exports[`Storyshots Views / Products / Create product variant default 1`] = `
             <hr
               class="makeStyles-hr-id"
             />
-            <table
-              class="MuiTable-root-id"
+            <div
+              class="ResponsiveTable-root-id"
             >
-              <tbody
-                class="MuiTableBody-root-id"
+              <table
+                class="MuiTable-root-id"
               >
-                <tr
-                  class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                <tbody
+                  class="MuiTableBody-root-id"
                 >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
+                  <tr
+                    class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
                   >
-                    <div
-                      class="makeStyles-content-id"
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
                     >
                       <div
-                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                        class="makeStyles-content-id"
                       >
-                        <img
-                          class="MuiAvatar-img-id"
-                          src="placeholder255x255.png"
-                        />
-                      </div>
-                      <div
-                        class="makeStyles-children-id"
-                      />
-                    </div>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
-                  >
-                    Cordoba Oro
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
-                  >
-                    <div
-                      class="makeStyles-content-id"
-                    >
-                      <div
-                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
-                      >
-                        <img
-                          class="MuiAvatar-img-id"
-                          src="placeholder255x255.png"
-                        />
-                      </div>
-                      <div
-                        class="makeStyles-children-id"
-                      />
-                    </div>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
-                  >
-                    silver
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-tabActive-id"
-                  >
-                    <div
-                      class="makeStyles-content-id"
-                    >
-                      <div
-                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id MuiAvatar-colorDefault-id"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
-                          focusable="false"
-                          role="presentation"
-                          viewBox="0 0 24 24"
+                        <div
+                          class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
                         >
-                          <path
-                            d="M6.10864 17.8974H3.29212C3.23158 17.8878 3.16942 17.8772 3.12042 17.8416C3.04669 17.788 3.01472 17.6983 3 17.6051V3.29232C3.01963 3.16818 3.08547 3.05213 3.20185 3.01431C3.23081 3.00488 3.26204 3.00477 3.29212 3H17.595C17.6248 3.00477 17.655 3.00954 17.6851 3.01431C17.7693 3.05715 17.8446 3.11527 17.8727 3.20199C17.8821 3.23097 17.8821 3.26223 17.887 3.29232V6.10798L20.7073 6.10342C20.7374 6.10815 20.7676 6.11285 20.7977 6.11759C20.8819 6.16039 20.9572 6.21852 20.9856 6.3053C20.9951 6.33435 20.9951 6.36561 21 6.39574V20.7074C20.9804 20.8315 20.9145 20.9476 20.7981 20.9854C20.769 20.9948 20.7378 20.9949 20.7076 20.9997L6.4008 21C6.34022 20.9904 6.27807 20.9798 6.22906 20.9442C6.15534 20.8906 6.1234 20.8009 6.10864 20.7077V17.8974ZM20.4156 18.1487H6.69292V20.4154L20.4156 20.415V18.1487ZM17.3216 10.7226L14.5234 13.4247L18.5752 17.4543C18.6102 17.5025 18.6316 17.5227 18.6457 17.5641H20.4156V13.6145L17.3216 10.7226ZM7.13581 17.5392C7.13753 17.5474 7.13886 17.5557 7.13988 17.5641H17.8565L12.6137 12.3498L7.13581 17.5392ZM17.3027 6.10892V3.58465H3.58424V17.3128H6.10864V6.41886C6.11821 6.35835 6.1288 6.29622 6.16431 6.24721C6.21777 6.17347 6.30727 6.14141 6.40031 6.12653L17.3027 6.10892ZM20.4156 12.8145V6.68856C15.8415 6.69596 11.2671 6.70333 6.69292 6.71073V17.1537L12.4178 11.7303C12.4913 11.6796 12.492 11.6793 12.5774 11.6532C12.6073 11.6536 12.6371 11.6539 12.667 11.6543C12.7517 11.6824 12.7524 11.6827 12.8246 11.7352L14.1087 13.0125L17.1155 10.1091C17.2122 10.0238 17.2154 10.0181 17.3552 10.0295C17.453 10.0463 17.4713 10.0661 17.5179 10.1059L20.4156 12.8145ZM9.46155 7.9651C10.1933 7.97204 10.8858 8.53631 11.0257 9.26605C11.125 9.7844 10.9492 10.3474 10.571 10.717C10.1291 11.1488 9.4265 11.2926 8.84531 11.0548C8.33223 10.8449 7.94546 10.3525 7.86504 9.80323C7.7658 9.12545 8.15208 8.40581 8.77376 8.11517C8.98813 8.01494 9.22433 7.96432 9.46155 7.9651ZM9.44459 8.54974C8.98175 8.55416 8.54681 8.90584 8.45303 9.36375C8.32277 10 8.9137 10.7061 9.63799 10.5718C10.051 10.4953 10.398 10.137 10.4593 9.71848C10.5424 9.15123 10.0783 8.55953 9.46446 8.54981C9.45784 8.54974 9.45121 8.54974 9.44459 8.54974Z"
-                            fill="url(#paint0_linear)"
+                          <img
+                            class="MuiAvatar-img-id"
+                            src="placeholder255x255.png"
                           />
-                          <defs>
-                            <linearGradient
-                              gradientUnits="userSpaceOnUse"
-                              id="paint0_linear"
-                              x1="3"
-                              x2="22.8"
-                              y1="3"
-                              y2="23.5714"
-                            >
-                              <stop
-                                stop-color="#06847B"
-                              />
-                              <stop
-                                offset="1"
-                                stop-color="#3EE7CD"
-                              />
-                            </linearGradient>
-                          </defs>
-                        </svg>
+                        </div>
+                        <div
+                          class="makeStyles-children-id"
+                        />
                       </div>
-                      <div
-                        class="makeStyles-children-id"
-                      />
-                    </div>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                    >
+                      Cordoba Oro
+                    </td>
+                  </tr>
+                  <tr
+                    class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
                   >
-                    New Variant
-                  </td>
-                </tr>
-              </tbody>
-            </table>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
+                    >
+                      <div
+                        class="makeStyles-content-id"
+                      >
+                        <div
+                          class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                        >
+                          <img
+                            class="MuiAvatar-img-id"
+                            src="placeholder255x255.png"
+                          />
+                        </div>
+                        <div
+                          class="makeStyles-children-id"
+                        />
+                      </div>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                    >
+                      silver
+                    </td>
+                  </tr>
+                  <tr
+                    class="MuiTableRow-root-id"
+                  >
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-tabActive-id"
+                    >
+                      <div
+                        class="makeStyles-content-id"
+                      >
+                        <div
+                          class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id MuiAvatar-colorDefault-id"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M6.10864 17.8974H3.29212C3.23158 17.8878 3.16942 17.8772 3.12042 17.8416C3.04669 17.788 3.01472 17.6983 3 17.6051V3.29232C3.01963 3.16818 3.08547 3.05213 3.20185 3.01431C3.23081 3.00488 3.26204 3.00477 3.29212 3H17.595C17.6248 3.00477 17.655 3.00954 17.6851 3.01431C17.7693 3.05715 17.8446 3.11527 17.8727 3.20199C17.8821 3.23097 17.8821 3.26223 17.887 3.29232V6.10798L20.7073 6.10342C20.7374 6.10815 20.7676 6.11285 20.7977 6.11759C20.8819 6.16039 20.9572 6.21852 20.9856 6.3053C20.9951 6.33435 20.9951 6.36561 21 6.39574V20.7074C20.9804 20.8315 20.9145 20.9476 20.7981 20.9854C20.769 20.9948 20.7378 20.9949 20.7076 20.9997L6.4008 21C6.34022 20.9904 6.27807 20.9798 6.22906 20.9442C6.15534 20.8906 6.1234 20.8009 6.10864 20.7077V17.8974ZM20.4156 18.1487H6.69292V20.4154L20.4156 20.415V18.1487ZM17.3216 10.7226L14.5234 13.4247L18.5752 17.4543C18.6102 17.5025 18.6316 17.5227 18.6457 17.5641H20.4156V13.6145L17.3216 10.7226ZM7.13581 17.5392C7.13753 17.5474 7.13886 17.5557 7.13988 17.5641H17.8565L12.6137 12.3498L7.13581 17.5392ZM17.3027 6.10892V3.58465H3.58424V17.3128H6.10864V6.41886C6.11821 6.35835 6.1288 6.29622 6.16431 6.24721C6.21777 6.17347 6.30727 6.14141 6.40031 6.12653L17.3027 6.10892ZM20.4156 12.8145V6.68856C15.8415 6.69596 11.2671 6.70333 6.69292 6.71073V17.1537L12.4178 11.7303C12.4913 11.6796 12.492 11.6793 12.5774 11.6532C12.6073 11.6536 12.6371 11.6539 12.667 11.6543C12.7517 11.6824 12.7524 11.6827 12.8246 11.7352L14.1087 13.0125L17.1155 10.1091C17.2122 10.0238 17.2154 10.0181 17.3552 10.0295C17.453 10.0463 17.4713 10.0661 17.5179 10.1059L20.4156 12.8145ZM9.46155 7.9651C10.1933 7.97204 10.8858 8.53631 11.0257 9.26605C11.125 9.7844 10.9492 10.3474 10.571 10.717C10.1291 11.1488 9.4265 11.2926 8.84531 11.0548C8.33223 10.8449 7.94546 10.3525 7.86504 9.80323C7.7658 9.12545 8.15208 8.40581 8.77376 8.11517C8.98813 8.01494 9.22433 7.96432 9.46155 7.9651ZM9.44459 8.54974C8.98175 8.55416 8.54681 8.90584 8.45303 9.36375C8.32277 10 8.9137 10.7061 9.63799 10.5718C10.051 10.4953 10.398 10.137 10.4593 9.71848C10.5424 9.15123 10.0783 8.55953 9.46446 8.54981C9.45784 8.54974 9.45121 8.54974 9.44459 8.54974Z"
+                              fill="url(#paint0_linear)"
+                            />
+                            <defs>
+                              <linearGradient
+                                gradientUnits="userSpaceOnUse"
+                                id="paint0_linear"
+                                x1="3"
+                                x2="22.8"
+                                y1="3"
+                                y2="23.5714"
+                              >
+                                <stop
+                                  stop-color="#06847B"
+                                />
+                                <stop
+                                  offset="1"
+                                  stop-color="#3EE7CD"
+                                />
+                              </linearGradient>
+                            </defs>
+                          </svg>
+                        </div>
+                        <div
+                          class="makeStyles-children-id"
+                        />
+                      </div>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                    >
+                      New Variant
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
           </div>
         </div>
         <div>
@@ -90876,10 +91408,10 @@ exports[`Storyshots Views / Products / Create product variant when loading data
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -90887,7 +91419,7 @@ exports[`Storyshots Views / Products / Create product variant when loading data
           Add variant
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -90919,107 +91451,111 @@ exports[`Storyshots Views / Products / Create product variant when loading data
             <hr
               class="makeStyles-hr-id"
             />
-            <table
-              class="MuiTable-root-id"
+            <div
+              class="ResponsiveTable-root-id"
             >
-              <tbody
-                class="MuiTableBody-root-id"
+              <table
+                class="MuiTable-root-id"
               >
-                <tr
-                  class="MuiTableRow-root-id makeStyles-link-id"
+                <tbody
+                  class="MuiTableBody-root-id"
                 >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
+                  <tr
+                    class="MuiTableRow-root-id makeStyles-link-id"
                   >
-                    <div
-                      class="makeStyles-content-id"
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
                     >
                       <div
-                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id MuiAvatar-colorDefault-id"
+                        class="makeStyles-content-id"
                       >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
-                          focusable="false"
-                          role="presentation"
-                          viewBox="0 0 24 24"
+                        <div
+                          class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id MuiAvatar-colorDefault-id"
                         >
-                          <path
-                            d="M19 8l-4 4h3c0 3.31-2.69 6-6 6-1.01 0-1.97-.25-2.8-.7l-1.46 1.46C8.97 19.54 10.43 20 12 20c4.42 0 8-3.58 8-8h3l-4-4zM6 12c0-3.31 2.69-6 6-6 1.01 0 1.97.25 2.8.7l1.46-1.46C15.03 4.46 13.57 4 12 4c-4.42 0-8 3.58-8 8H1l4 4 4-4H6z"
-                          />
-                        </svg>
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M19 8l-4 4h3c0 3.31-2.69 6-6 6-1.01 0-1.97-.25-2.8-.7l-1.46 1.46C8.97 19.54 10.43 20 12 20c4.42 0 8-3.58 8-8h3l-4-4zM6 12c0-3.31 2.69-6 6-6 1.01 0 1.97.25 2.8.7l1.46-1.46C15.03 4.46 13.57 4 12 4c-4.42 0-8 3.58-8 8H1l4 4 4-4H6z"
+                            />
+                          </svg>
+                        </div>
+                        <div
+                          class="makeStyles-children-id"
+                        />
                       </div>
-                      <div
-                        class="makeStyles-children-id"
-                      />
-                    </div>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
-                  >
-                    <span
-                      class="makeStyles-skeleton-id"
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
                     >
-                      ‌
-                    </span>
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-tabActive-id"
-                  >
-                    <div
-                      class="makeStyles-content-id"
-                    >
-                      <div
-                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id MuiAvatar-colorDefault-id"
+                      <span
+                        class="makeStyles-skeleton-id"
                       >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
-                          focusable="false"
-                          role="presentation"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M6.10864 17.8974H3.29212C3.23158 17.8878 3.16942 17.8772 3.12042 17.8416C3.04669 17.788 3.01472 17.6983 3 17.6051V3.29232C3.01963 3.16818 3.08547 3.05213 3.20185 3.01431C3.23081 3.00488 3.26204 3.00477 3.29212 3H17.595C17.6248 3.00477 17.655 3.00954 17.6851 3.01431C17.7693 3.05715 17.8446 3.11527 17.8727 3.20199C17.8821 3.23097 17.8821 3.26223 17.887 3.29232V6.10798L20.7073 6.10342C20.7374 6.10815 20.7676 6.11285 20.7977 6.11759C20.8819 6.16039 20.9572 6.21852 20.9856 6.3053C20.9951 6.33435 20.9951 6.36561 21 6.39574V20.7074C20.9804 20.8315 20.9145 20.9476 20.7981 20.9854C20.769 20.9948 20.7378 20.9949 20.7076 20.9997L6.4008 21C6.34022 20.9904 6.27807 20.9798 6.22906 20.9442C6.15534 20.8906 6.1234 20.8009 6.10864 20.7077V17.8974ZM20.4156 18.1487H6.69292V20.4154L20.4156 20.415V18.1487ZM17.3216 10.7226L14.5234 13.4247L18.5752 17.4543C18.6102 17.5025 18.6316 17.5227 18.6457 17.5641H20.4156V13.6145L17.3216 10.7226ZM7.13581 17.5392C7.13753 17.5474 7.13886 17.5557 7.13988 17.5641H17.8565L12.6137 12.3498L7.13581 17.5392ZM17.3027 6.10892V3.58465H3.58424V17.3128H6.10864V6.41886C6.11821 6.35835 6.1288 6.29622 6.16431 6.24721C6.21777 6.17347 6.30727 6.14141 6.40031 6.12653L17.3027 6.10892ZM20.4156 12.8145V6.68856C15.8415 6.69596 11.2671 6.70333 6.69292 6.71073V17.1537L12.4178 11.7303C12.4913 11.6796 12.492 11.6793 12.5774 11.6532C12.6073 11.6536 12.6371 11.6539 12.667 11.6543C12.7517 11.6824 12.7524 11.6827 12.8246 11.7352L14.1087 13.0125L17.1155 10.1091C17.2122 10.0238 17.2154 10.0181 17.3552 10.0295C17.453 10.0463 17.4713 10.0661 17.5179 10.1059L20.4156 12.8145ZM9.46155 7.9651C10.1933 7.97204 10.8858 8.53631 11.0257 9.26605C11.125 9.7844 10.9492 10.3474 10.571 10.717C10.1291 11.1488 9.4265 11.2926 8.84531 11.0548C8.33223 10.8449 7.94546 10.3525 7.86504 9.80323C7.7658 9.12545 8.15208 8.40581 8.77376 8.11517C8.98813 8.01494 9.22433 7.96432 9.46155 7.9651ZM9.44459 8.54974C8.98175 8.55416 8.54681 8.90584 8.45303 9.36375C8.32277 10 8.9137 10.7061 9.63799 10.5718C10.051 10.4953 10.398 10.137 10.4593 9.71848C10.5424 9.15123 10.0783 8.55953 9.46446 8.54981C9.45784 8.54974 9.45121 8.54974 9.44459 8.54974Z"
-                            fill="url(#paint0_linear)"
-                          />
-                          <defs>
-                            <linearGradient
-                              gradientUnits="userSpaceOnUse"
-                              id="paint0_linear"
-                              x1="3"
-                              x2="22.8"
-                              y1="3"
-                              y2="23.5714"
-                            >
-                              <stop
-                                stop-color="#06847B"
-                              />
-                              <stop
-                                offset="1"
-                                stop-color="#3EE7CD"
-                              />
-                            </linearGradient>
-                          </defs>
-                        </svg>
-                      </div>
-                      <div
-                        class="makeStyles-children-id"
-                      />
-                    </div>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                        ‌
+                      </span>
+                    </td>
+                  </tr>
+                  <tr
+                    class="MuiTableRow-root-id"
                   >
-                    New Variant
-                  </td>
-                </tr>
-              </tbody>
-            </table>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-tabActive-id"
+                    >
+                      <div
+                        class="makeStyles-content-id"
+                      >
+                        <div
+                          class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id MuiAvatar-colorDefault-id"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M6.10864 17.8974H3.29212C3.23158 17.8878 3.16942 17.8772 3.12042 17.8416C3.04669 17.788 3.01472 17.6983 3 17.6051V3.29232C3.01963 3.16818 3.08547 3.05213 3.20185 3.01431C3.23081 3.00488 3.26204 3.00477 3.29212 3H17.595C17.6248 3.00477 17.655 3.00954 17.6851 3.01431C17.7693 3.05715 17.8446 3.11527 17.8727 3.20199C17.8821 3.23097 17.8821 3.26223 17.887 3.29232V6.10798L20.7073 6.10342C20.7374 6.10815 20.7676 6.11285 20.7977 6.11759C20.8819 6.16039 20.9572 6.21852 20.9856 6.3053C20.9951 6.33435 20.9951 6.36561 21 6.39574V20.7074C20.9804 20.8315 20.9145 20.9476 20.7981 20.9854C20.769 20.9948 20.7378 20.9949 20.7076 20.9997L6.4008 21C6.34022 20.9904 6.27807 20.9798 6.22906 20.9442C6.15534 20.8906 6.1234 20.8009 6.10864 20.7077V17.8974ZM20.4156 18.1487H6.69292V20.4154L20.4156 20.415V18.1487ZM17.3216 10.7226L14.5234 13.4247L18.5752 17.4543C18.6102 17.5025 18.6316 17.5227 18.6457 17.5641H20.4156V13.6145L17.3216 10.7226ZM7.13581 17.5392C7.13753 17.5474 7.13886 17.5557 7.13988 17.5641H17.8565L12.6137 12.3498L7.13581 17.5392ZM17.3027 6.10892V3.58465H3.58424V17.3128H6.10864V6.41886C6.11821 6.35835 6.1288 6.29622 6.16431 6.24721C6.21777 6.17347 6.30727 6.14141 6.40031 6.12653L17.3027 6.10892ZM20.4156 12.8145V6.68856C15.8415 6.69596 11.2671 6.70333 6.69292 6.71073V17.1537L12.4178 11.7303C12.4913 11.6796 12.492 11.6793 12.5774 11.6532C12.6073 11.6536 12.6371 11.6539 12.667 11.6543C12.7517 11.6824 12.7524 11.6827 12.8246 11.7352L14.1087 13.0125L17.1155 10.1091C17.2122 10.0238 17.2154 10.0181 17.3552 10.0295C17.453 10.0463 17.4713 10.0661 17.5179 10.1059L20.4156 12.8145ZM9.46155 7.9651C10.1933 7.97204 10.8858 8.53631 11.0257 9.26605C11.125 9.7844 10.9492 10.3474 10.571 10.717C10.1291 11.1488 9.4265 11.2926 8.84531 11.0548C8.33223 10.8449 7.94546 10.3525 7.86504 9.80323C7.7658 9.12545 8.15208 8.40581 8.77376 8.11517C8.98813 8.01494 9.22433 7.96432 9.46155 7.9651ZM9.44459 8.54974C8.98175 8.55416 8.54681 8.90584 8.45303 9.36375C8.32277 10 8.9137 10.7061 9.63799 10.5718C10.051 10.4953 10.398 10.137 10.4593 9.71848C10.5424 9.15123 10.0783 8.55953 9.46446 8.54981C9.45784 8.54974 9.45121 8.54974 9.44459 8.54974Z"
+                              fill="url(#paint0_linear)"
+                            />
+                            <defs>
+                              <linearGradient
+                                gradientUnits="userSpaceOnUse"
+                                id="paint0_linear"
+                                x1="3"
+                                x2="22.8"
+                                y1="3"
+                                y2="23.5714"
+                              >
+                                <stop
+                                  stop-color="#06847B"
+                                />
+                                <stop
+                                  offset="1"
+                                  stop-color="#3EE7CD"
+                                />
+                              </linearGradient>
+                            </defs>
+                          </svg>
+                        </div>
+                        <div
+                          class="makeStyles-children-id"
+                        />
+                      </div>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                    >
+                      New Variant
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
           </div>
         </div>
         <div>
@@ -91311,10 +91847,10 @@ exports[`Storyshots Views / Products / Create product variant with errors 1`] =
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -91322,7 +91858,7 @@ exports[`Storyshots Views / Products / Create product variant with errors 1`] =
           Add variant
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -91354,124 +91890,128 @@ exports[`Storyshots Views / Products / Create product variant with errors 1`] =
             <hr
               class="makeStyles-hr-id"
             />
-            <table
-              class="MuiTable-root-id"
+            <div
+              class="ResponsiveTable-root-id"
             >
-              <tbody
-                class="MuiTableBody-root-id"
+              <table
+                class="MuiTable-root-id"
               >
-                <tr
-                  class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                <tbody
+                  class="MuiTableBody-root-id"
                 >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
+                  <tr
+                    class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
                   >
-                    <div
-                      class="makeStyles-content-id"
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
                     >
                       <div
-                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                        class="makeStyles-content-id"
                       >
-                        <img
-                          class="MuiAvatar-img-id"
-                          src="placeholder255x255.png"
-                        />
-                      </div>
-                      <div
-                        class="makeStyles-children-id"
-                      />
-                    </div>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
-                  >
-                    Cordoba Oro
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
-                  >
-                    <div
-                      class="makeStyles-content-id"
-                    >
-                      <div
-                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
-                      >
-                        <img
-                          class="MuiAvatar-img-id"
-                          src="placeholder255x255.png"
-                        />
-                      </div>
-                      <div
-                        class="makeStyles-children-id"
-                      />
-                    </div>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
-                  >
-                    silver
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-tabActive-id"
-                  >
-                    <div
-                      class="makeStyles-content-id"
-                    >
-                      <div
-                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id MuiAvatar-colorDefault-id"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
-                          focusable="false"
-                          role="presentation"
-                          viewBox="0 0 24 24"
+                        <div
+                          class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
                         >
-                          <path
-                            d="M6.10864 17.8974H3.29212C3.23158 17.8878 3.16942 17.8772 3.12042 17.8416C3.04669 17.788 3.01472 17.6983 3 17.6051V3.29232C3.01963 3.16818 3.08547 3.05213 3.20185 3.01431C3.23081 3.00488 3.26204 3.00477 3.29212 3H17.595C17.6248 3.00477 17.655 3.00954 17.6851 3.01431C17.7693 3.05715 17.8446 3.11527 17.8727 3.20199C17.8821 3.23097 17.8821 3.26223 17.887 3.29232V6.10798L20.7073 6.10342C20.7374 6.10815 20.7676 6.11285 20.7977 6.11759C20.8819 6.16039 20.9572 6.21852 20.9856 6.3053C20.9951 6.33435 20.9951 6.36561 21 6.39574V20.7074C20.9804 20.8315 20.9145 20.9476 20.7981 20.9854C20.769 20.9948 20.7378 20.9949 20.7076 20.9997L6.4008 21C6.34022 20.9904 6.27807 20.9798 6.22906 20.9442C6.15534 20.8906 6.1234 20.8009 6.10864 20.7077V17.8974ZM20.4156 18.1487H6.69292V20.4154L20.4156 20.415V18.1487ZM17.3216 10.7226L14.5234 13.4247L18.5752 17.4543C18.6102 17.5025 18.6316 17.5227 18.6457 17.5641H20.4156V13.6145L17.3216 10.7226ZM7.13581 17.5392C7.13753 17.5474 7.13886 17.5557 7.13988 17.5641H17.8565L12.6137 12.3498L7.13581 17.5392ZM17.3027 6.10892V3.58465H3.58424V17.3128H6.10864V6.41886C6.11821 6.35835 6.1288 6.29622 6.16431 6.24721C6.21777 6.17347 6.30727 6.14141 6.40031 6.12653L17.3027 6.10892ZM20.4156 12.8145V6.68856C15.8415 6.69596 11.2671 6.70333 6.69292 6.71073V17.1537L12.4178 11.7303C12.4913 11.6796 12.492 11.6793 12.5774 11.6532C12.6073 11.6536 12.6371 11.6539 12.667 11.6543C12.7517 11.6824 12.7524 11.6827 12.8246 11.7352L14.1087 13.0125L17.1155 10.1091C17.2122 10.0238 17.2154 10.0181 17.3552 10.0295C17.453 10.0463 17.4713 10.0661 17.5179 10.1059L20.4156 12.8145ZM9.46155 7.9651C10.1933 7.97204 10.8858 8.53631 11.0257 9.26605C11.125 9.7844 10.9492 10.3474 10.571 10.717C10.1291 11.1488 9.4265 11.2926 8.84531 11.0548C8.33223 10.8449 7.94546 10.3525 7.86504 9.80323C7.7658 9.12545 8.15208 8.40581 8.77376 8.11517C8.98813 8.01494 9.22433 7.96432 9.46155 7.9651ZM9.44459 8.54974C8.98175 8.55416 8.54681 8.90584 8.45303 9.36375C8.32277 10 8.9137 10.7061 9.63799 10.5718C10.051 10.4953 10.398 10.137 10.4593 9.71848C10.5424 9.15123 10.0783 8.55953 9.46446 8.54981C9.45784 8.54974 9.45121 8.54974 9.44459 8.54974Z"
-                            fill="url(#paint0_linear)"
+                          <img
+                            class="MuiAvatar-img-id"
+                            src="placeholder255x255.png"
                           />
-                          <defs>
-                            <linearGradient
-                              gradientUnits="userSpaceOnUse"
-                              id="paint0_linear"
-                              x1="3"
-                              x2="22.8"
-                              y1="3"
-                              y2="23.5714"
-                            >
-                              <stop
-                                stop-color="#06847B"
-                              />
-                              <stop
-                                offset="1"
-                                stop-color="#3EE7CD"
-                              />
-                            </linearGradient>
-                          </defs>
-                        </svg>
+                        </div>
+                        <div
+                          class="makeStyles-children-id"
+                        />
                       </div>
-                      <div
-                        class="makeStyles-children-id"
-                      />
-                    </div>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                    >
+                      Cordoba Oro
+                    </td>
+                  </tr>
+                  <tr
+                    class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
                   >
-                    New Variant
-                  </td>
-                </tr>
-              </tbody>
-            </table>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
+                    >
+                      <div
+                        class="makeStyles-content-id"
+                      >
+                        <div
+                          class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                        >
+                          <img
+                            class="MuiAvatar-img-id"
+                            src="placeholder255x255.png"
+                          />
+                        </div>
+                        <div
+                          class="makeStyles-children-id"
+                        />
+                      </div>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                    >
+                      silver
+                    </td>
+                  </tr>
+                  <tr
+                    class="MuiTableRow-root-id"
+                  >
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-tabActive-id"
+                    >
+                      <div
+                        class="makeStyles-content-id"
+                      >
+                        <div
+                          class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id MuiAvatar-colorDefault-id"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M6.10864 17.8974H3.29212C3.23158 17.8878 3.16942 17.8772 3.12042 17.8416C3.04669 17.788 3.01472 17.6983 3 17.6051V3.29232C3.01963 3.16818 3.08547 3.05213 3.20185 3.01431C3.23081 3.00488 3.26204 3.00477 3.29212 3H17.595C17.6248 3.00477 17.655 3.00954 17.6851 3.01431C17.7693 3.05715 17.8446 3.11527 17.8727 3.20199C17.8821 3.23097 17.8821 3.26223 17.887 3.29232V6.10798L20.7073 6.10342C20.7374 6.10815 20.7676 6.11285 20.7977 6.11759C20.8819 6.16039 20.9572 6.21852 20.9856 6.3053C20.9951 6.33435 20.9951 6.36561 21 6.39574V20.7074C20.9804 20.8315 20.9145 20.9476 20.7981 20.9854C20.769 20.9948 20.7378 20.9949 20.7076 20.9997L6.4008 21C6.34022 20.9904 6.27807 20.9798 6.22906 20.9442C6.15534 20.8906 6.1234 20.8009 6.10864 20.7077V17.8974ZM20.4156 18.1487H6.69292V20.4154L20.4156 20.415V18.1487ZM17.3216 10.7226L14.5234 13.4247L18.5752 17.4543C18.6102 17.5025 18.6316 17.5227 18.6457 17.5641H20.4156V13.6145L17.3216 10.7226ZM7.13581 17.5392C7.13753 17.5474 7.13886 17.5557 7.13988 17.5641H17.8565L12.6137 12.3498L7.13581 17.5392ZM17.3027 6.10892V3.58465H3.58424V17.3128H6.10864V6.41886C6.11821 6.35835 6.1288 6.29622 6.16431 6.24721C6.21777 6.17347 6.30727 6.14141 6.40031 6.12653L17.3027 6.10892ZM20.4156 12.8145V6.68856C15.8415 6.69596 11.2671 6.70333 6.69292 6.71073V17.1537L12.4178 11.7303C12.4913 11.6796 12.492 11.6793 12.5774 11.6532C12.6073 11.6536 12.6371 11.6539 12.667 11.6543C12.7517 11.6824 12.7524 11.6827 12.8246 11.7352L14.1087 13.0125L17.1155 10.1091C17.2122 10.0238 17.2154 10.0181 17.3552 10.0295C17.453 10.0463 17.4713 10.0661 17.5179 10.1059L20.4156 12.8145ZM9.46155 7.9651C10.1933 7.97204 10.8858 8.53631 11.0257 9.26605C11.125 9.7844 10.9492 10.3474 10.571 10.717C10.1291 11.1488 9.4265 11.2926 8.84531 11.0548C8.33223 10.8449 7.94546 10.3525 7.86504 9.80323C7.7658 9.12545 8.15208 8.40581 8.77376 8.11517C8.98813 8.01494 9.22433 7.96432 9.46155 7.9651ZM9.44459 8.54974C8.98175 8.55416 8.54681 8.90584 8.45303 9.36375C8.32277 10 8.9137 10.7061 9.63799 10.5718C10.051 10.4953 10.398 10.137 10.4593 9.71848C10.5424 9.15123 10.0783 8.55953 9.46446 8.54981C9.45784 8.54974 9.45121 8.54974 9.44459 8.54974Z"
+                              fill="url(#paint0_linear)"
+                            />
+                            <defs>
+                              <linearGradient
+                                gradientUnits="userSpaceOnUse"
+                                id="paint0_linear"
+                                x1="3"
+                                x2="22.8"
+                                y1="3"
+                                y2="23.5714"
+                              >
+                                <stop
+                                  stop-color="#06847B"
+                                />
+                                <stop
+                                  offset="1"
+                                  stop-color="#3EE7CD"
+                                />
+                              </linearGradient>
+                            </defs>
+                          </svg>
+                        </div>
+                        <div
+                          class="makeStyles-children-id"
+                        />
+                      </div>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                    >
+                      New Variant
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
           </div>
         </div>
         <div>
@@ -91838,10 +92378,10 @@ exports[`Storyshots Views / Products / Product edit no product attributes 1`] =
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -91849,7 +92389,7 @@ exports[`Storyshots Views / Products / Product edit no product attributes 1`] =
           Ergonomic Plastic Bacon
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -92771,140 +93311,144 @@ Ctrl + K"
             <hr
               class="makeStyles-hr-id"
             />
-            <table
-              class="MuiTable-root-id ProductVariants-denseTable-id"
+            <div
+              class="ResponsiveTable-root-id"
             >
-              <thead
-                class="MuiTableHead-root-id"
+              <table
+                class="MuiTable-root-id ProductVariants-denseTable-id"
               >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
+                <thead
+                  class="MuiTableHead-root-id"
                 >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
-                    scope="col"
+                  <tr
+                    class="MuiTableRow-root-id MuiTableRow-head-id"
                   >
-                    <button
-                      class="MuiButtonBase-root-id makeStyles-root-id"
-                      tabindex="0"
-                      type="button"
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
+                      scope="col"
                     >
-                      <input
-                        class="makeStyles-box-id"
-                        type="checkbox"
-                        value="false"
-                      />
-                    </button>
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id ProductVariants-colName-id"
-                    scope="col"
-                  >
-                    Name
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id ProductVariants-colStatus-id"
-                    scope="col"
-                  >
-                    Status
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id ProductVariants-colSku-id"
-                    scope="col"
-                  >
-                    SKU
-                  </th>
-                </tr>
-              </thead>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id ProductVariants-link-id MuiTableRow-hover-id"
+                      <button
+                        class="MuiButtonBase-root-id makeStyles-root-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <input
+                          class="makeStyles-box-id"
+                          type="checkbox"
+                          value="false"
+                        />
+                      </button>
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id ProductVariants-colName-id"
+                      scope="col"
+                    >
+                      Name
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id ProductVariants-colStatus-id"
+                      scope="col"
+                    >
+                      Status
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id ProductVariants-colSku-id"
+                      scope="col"
+                    >
+                      SKU
+                    </th>
+                  </tr>
+                </thead>
+                <tbody
+                  class="MuiTableBody-root-id"
                 >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+                  <tr
+                    class="MuiTableRow-root-id ProductVariants-link-id MuiTableRow-hover-id"
                   >
-                    <button
-                      class="MuiButtonBase-root-id makeStyles-root-id"
-                      tabindex="0"
-                      type="button"
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                     >
-                      <input
-                        class="makeStyles-box-id"
-                        type="checkbox"
-                        value="false"
-                      />
-                    </button>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colName-id"
-                    data-tc="name"
-                  >
-                    Cordoba Oro
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colStatus-id"
-                    data-tc="isAvailable"
-                    data-tc-is-available="true"
-                  >
-                    <div
-                      class="makeStyles-root-id undefined makeStyles-successDot-id"
+                      <button
+                        class="MuiButtonBase-root-id makeStyles-root-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <input
+                          class="makeStyles-box-id"
+                          type="checkbox"
+                          value="false"
+                        />
+                      </button>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colName-id"
+                      data-tc="name"
                     >
-                      Available
-                    </div>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colSku-id"
-                    data-tc="sku"
-                  >
-                    87192-94370
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id ProductVariants-link-id MuiTableRow-hover-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id makeStyles-root-id"
-                      tabindex="0"
-                      type="button"
+                      Cordoba Oro
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colStatus-id"
+                      data-tc="isAvailable"
+                      data-tc-is-available="true"
                     >
-                      <input
-                        class="makeStyles-box-id"
-                        type="checkbox"
-                        value="false"
-                      />
-                    </button>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colName-id"
-                    data-tc="name"
-                  >
-                    silver
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colStatus-id"
-                    data-tc="isAvailable"
-                    data-tc-is-available="true"
-                  >
-                    <div
-                      class="makeStyles-root-id undefined makeStyles-successDot-id"
+                      <div
+                        class="makeStyles-root-id undefined makeStyles-successDot-id"
+                      >
+                        Available
+                      </div>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colSku-id"
+                      data-tc="sku"
                     >
-                      Available
-                    </div>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colSku-id"
-                    data-tc="sku"
+                      87192-94370
+                    </td>
+                  </tr>
+                  <tr
+                    class="MuiTableRow-root-id ProductVariants-link-id MuiTableRow-hover-id"
                   >
-                    69055-15190
-                  </td>
-                </tr>
-              </tbody>
-            </table>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id makeStyles-root-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <input
+                          class="makeStyles-box-id"
+                          type="checkbox"
+                          value="false"
+                        />
+                      </button>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colName-id"
+                      data-tc="name"
+                    >
+                      silver
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colStatus-id"
+                      data-tc="isAvailable"
+                      data-tc-is-available="true"
+                    >
+                      <div
+                        class="makeStyles-root-id undefined makeStyles-successDot-id"
+                      >
+                        Available
+                      </div>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colSku-id"
+                      data-tc="sku"
+                    >
+                      69055-15190
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
           </div>
           <div
             class="makeStyles-spacer-id"
@@ -93356,10 +93900,10 @@ exports[`Storyshots Views / Products / Product edit no variants 1`] = `
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -93367,7 +93911,7 @@ exports[`Storyshots Views / Products / Product edit no variants 1`] = `
           Ergonomic Plastic Bacon
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -94548,140 +95092,144 @@ Ctrl + K"
             <hr
               class="makeStyles-hr-id"
             />
-            <table
-              class="MuiTable-root-id ProductVariants-denseTable-id"
+            <div
+              class="ResponsiveTable-root-id"
             >
-              <thead
-                class="MuiTableHead-root-id"
+              <table
+                class="MuiTable-root-id ProductVariants-denseTable-id"
               >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
+                <thead
+                  class="MuiTableHead-root-id"
                 >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
-                    scope="col"
+                  <tr
+                    class="MuiTableRow-root-id MuiTableRow-head-id"
                   >
-                    <button
-                      class="MuiButtonBase-root-id makeStyles-root-id"
-                      tabindex="0"
-                      type="button"
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
+                      scope="col"
                     >
-                      <input
-                        class="makeStyles-box-id"
-                        type="checkbox"
-                        value="false"
-                      />
-                    </button>
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id ProductVariants-colName-id"
-                    scope="col"
-                  >
-                    Name
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id ProductVariants-colStatus-id"
-                    scope="col"
-                  >
-                    Status
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id ProductVariants-colSku-id"
-                    scope="col"
-                  >
-                    SKU
-                  </th>
-                </tr>
-              </thead>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id ProductVariants-link-id MuiTableRow-hover-id"
+                      <button
+                        class="MuiButtonBase-root-id makeStyles-root-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <input
+                          class="makeStyles-box-id"
+                          type="checkbox"
+                          value="false"
+                        />
+                      </button>
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id ProductVariants-colName-id"
+                      scope="col"
+                    >
+                      Name
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id ProductVariants-colStatus-id"
+                      scope="col"
+                    >
+                      Status
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id ProductVariants-colSku-id"
+                      scope="col"
+                    >
+                      SKU
+                    </th>
+                  </tr>
+                </thead>
+                <tbody
+                  class="MuiTableBody-root-id"
                 >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+                  <tr
+                    class="MuiTableRow-root-id ProductVariants-link-id MuiTableRow-hover-id"
                   >
-                    <button
-                      class="MuiButtonBase-root-id makeStyles-root-id"
-                      tabindex="0"
-                      type="button"
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                     >
-                      <input
-                        class="makeStyles-box-id"
-                        type="checkbox"
-                        value="false"
-                      />
-                    </button>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colName-id"
-                    data-tc="name"
-                  >
-                    Cordoba Oro
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colStatus-id"
-                    data-tc="isAvailable"
-                    data-tc-is-available="true"
-                  >
-                    <div
-                      class="makeStyles-root-id undefined makeStyles-successDot-id"
+                      <button
+                        class="MuiButtonBase-root-id makeStyles-root-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <input
+                          class="makeStyles-box-id"
+                          type="checkbox"
+                          value="false"
+                        />
+                      </button>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colName-id"
+                      data-tc="name"
                     >
-                      Available
-                    </div>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colSku-id"
-                    data-tc="sku"
-                  >
-                    87192-94370
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id ProductVariants-link-id MuiTableRow-hover-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id makeStyles-root-id"
-                      tabindex="0"
-                      type="button"
+                      Cordoba Oro
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colStatus-id"
+                      data-tc="isAvailable"
+                      data-tc-is-available="true"
                     >
-                      <input
-                        class="makeStyles-box-id"
-                        type="checkbox"
-                        value="false"
-                      />
-                    </button>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colName-id"
-                    data-tc="name"
-                  >
-                    silver
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colStatus-id"
-                    data-tc="isAvailable"
-                    data-tc-is-available="true"
-                  >
-                    <div
-                      class="makeStyles-root-id undefined makeStyles-successDot-id"
+                      <div
+                        class="makeStyles-root-id undefined makeStyles-successDot-id"
+                      >
+                        Available
+                      </div>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colSku-id"
+                      data-tc="sku"
                     >
-                      Available
-                    </div>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colSku-id"
-                    data-tc="sku"
+                      87192-94370
+                    </td>
+                  </tr>
+                  <tr
+                    class="MuiTableRow-root-id ProductVariants-link-id MuiTableRow-hover-id"
                   >
-                    69055-15190
-                  </td>
-                </tr>
-              </tbody>
-            </table>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id makeStyles-root-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <input
+                          class="makeStyles-box-id"
+                          type="checkbox"
+                          value="false"
+                        />
+                      </button>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colName-id"
+                      data-tc="name"
+                    >
+                      silver
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colStatus-id"
+                      data-tc="isAvailable"
+                      data-tc-is-available="true"
+                    >
+                      <div
+                        class="makeStyles-root-id undefined makeStyles-successDot-id"
+                      >
+                        Available
+                      </div>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colSku-id"
+                      data-tc="sku"
+                    >
+                      69055-15190
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
           </div>
           <div
             class="makeStyles-spacer-id"
@@ -95133,10 +95681,10 @@ exports[`Storyshots Views / Products / Product edit when data is fully loaded 1`
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -95144,7 +95692,7 @@ exports[`Storyshots Views / Products / Product edit when data is fully loaded 1`
           Ergonomic Plastic Bacon
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -96325,140 +96873,144 @@ Ctrl + K"
             <hr
               class="makeStyles-hr-id"
             />
-            <table
-              class="MuiTable-root-id ProductVariants-denseTable-id"
+            <div
+              class="ResponsiveTable-root-id"
             >
-              <thead
-                class="MuiTableHead-root-id"
+              <table
+                class="MuiTable-root-id ProductVariants-denseTable-id"
               >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
+                <thead
+                  class="MuiTableHead-root-id"
                 >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
-                    scope="col"
+                  <tr
+                    class="MuiTableRow-root-id MuiTableRow-head-id"
                   >
-                    <button
-                      class="MuiButtonBase-root-id makeStyles-root-id"
-                      tabindex="0"
-                      type="button"
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
+                      scope="col"
                     >
-                      <input
-                        class="makeStyles-box-id"
-                        type="checkbox"
-                        value="false"
-                      />
-                    </button>
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id ProductVariants-colName-id"
-                    scope="col"
-                  >
-                    Name
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id ProductVariants-colStatus-id"
-                    scope="col"
-                  >
-                    Status
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id ProductVariants-colSku-id"
-                    scope="col"
-                  >
-                    SKU
-                  </th>
-                </tr>
-              </thead>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id ProductVariants-link-id MuiTableRow-hover-id"
+                      <button
+                        class="MuiButtonBase-root-id makeStyles-root-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <input
+                          class="makeStyles-box-id"
+                          type="checkbox"
+                          value="false"
+                        />
+                      </button>
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id ProductVariants-colName-id"
+                      scope="col"
+                    >
+                      Name
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id ProductVariants-colStatus-id"
+                      scope="col"
+                    >
+                      Status
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id ProductVariants-colSku-id"
+                      scope="col"
+                    >
+                      SKU
+                    </th>
+                  </tr>
+                </thead>
+                <tbody
+                  class="MuiTableBody-root-id"
                 >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+                  <tr
+                    class="MuiTableRow-root-id ProductVariants-link-id MuiTableRow-hover-id"
                   >
-                    <button
-                      class="MuiButtonBase-root-id makeStyles-root-id"
-                      tabindex="0"
-                      type="button"
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                     >
-                      <input
-                        class="makeStyles-box-id"
-                        type="checkbox"
-                        value="false"
-                      />
-                    </button>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colName-id"
-                    data-tc="name"
-                  >
-                    Cordoba Oro
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colStatus-id"
-                    data-tc="isAvailable"
-                    data-tc-is-available="true"
-                  >
-                    <div
-                      class="makeStyles-root-id undefined makeStyles-successDot-id"
+                      <button
+                        class="MuiButtonBase-root-id makeStyles-root-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <input
+                          class="makeStyles-box-id"
+                          type="checkbox"
+                          value="false"
+                        />
+                      </button>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colName-id"
+                      data-tc="name"
                     >
-                      Available
-                    </div>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colSku-id"
-                    data-tc="sku"
-                  >
-                    87192-94370
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id ProductVariants-link-id MuiTableRow-hover-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id makeStyles-root-id"
-                      tabindex="0"
-                      type="button"
+                      Cordoba Oro
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colStatus-id"
+                      data-tc="isAvailable"
+                      data-tc-is-available="true"
                     >
-                      <input
-                        class="makeStyles-box-id"
-                        type="checkbox"
-                        value="false"
-                      />
-                    </button>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colName-id"
-                    data-tc="name"
-                  >
-                    silver
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colStatus-id"
-                    data-tc="isAvailable"
-                    data-tc-is-available="true"
-                  >
-                    <div
-                      class="makeStyles-root-id undefined makeStyles-successDot-id"
+                      <div
+                        class="makeStyles-root-id undefined makeStyles-successDot-id"
+                      >
+                        Available
+                      </div>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colSku-id"
+                      data-tc="sku"
                     >
-                      Available
-                    </div>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colSku-id"
-                    data-tc="sku"
+                      87192-94370
+                    </td>
+                  </tr>
+                  <tr
+                    class="MuiTableRow-root-id ProductVariants-link-id MuiTableRow-hover-id"
                   >
-                    69055-15190
-                  </td>
-                </tr>
-              </tbody>
-            </table>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id makeStyles-root-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <input
+                          class="makeStyles-box-id"
+                          type="checkbox"
+                          value="false"
+                        />
+                      </button>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colName-id"
+                      data-tc="name"
+                    >
+                      silver
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colStatus-id"
+                      data-tc="isAvailable"
+                      data-tc-is-available="true"
+                    >
+                      <div
+                        class="makeStyles-root-id undefined makeStyles-successDot-id"
+                      >
+                        Available
+                      </div>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colSku-id"
+                      data-tc="sku"
+                    >
+                      69055-15190
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
           </div>
           <div
             class="makeStyles-spacer-id"
@@ -96910,10 +97462,10 @@ exports[`Storyshots Views / Products / Product edit when loading data 1`] = `
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -96926,7 +97478,7 @@ exports[`Storyshots Views / Products / Product edit when loading data 1`] = `
           </span>
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -98002,10 +98554,10 @@ exports[`Storyshots Views / Products / Product edit when product has no images 1
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -98013,7 +98565,7 @@ exports[`Storyshots Views / Products / Product edit when product has no images 1
           Ergonomic Plastic Bacon
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -99101,140 +99653,144 @@ Ctrl + K"
             <hr
               class="makeStyles-hr-id"
             />
-            <table
-              class="MuiTable-root-id ProductVariants-denseTable-id"
+            <div
+              class="ResponsiveTable-root-id"
             >
-              <thead
-                class="MuiTableHead-root-id"
+              <table
+                class="MuiTable-root-id ProductVariants-denseTable-id"
               >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
+                <thead
+                  class="MuiTableHead-root-id"
                 >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
-                    scope="col"
+                  <tr
+                    class="MuiTableRow-root-id MuiTableRow-head-id"
                   >
-                    <button
-                      class="MuiButtonBase-root-id makeStyles-root-id"
-                      tabindex="0"
-                      type="button"
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
+                      scope="col"
                     >
-                      <input
-                        class="makeStyles-box-id"
-                        type="checkbox"
-                        value="false"
-                      />
-                    </button>
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id ProductVariants-colName-id"
-                    scope="col"
-                  >
-                    Name
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id ProductVariants-colStatus-id"
-                    scope="col"
-                  >
-                    Status
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id ProductVariants-colSku-id"
-                    scope="col"
-                  >
-                    SKU
-                  </th>
-                </tr>
-              </thead>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id ProductVariants-link-id MuiTableRow-hover-id"
+                      <button
+                        class="MuiButtonBase-root-id makeStyles-root-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <input
+                          class="makeStyles-box-id"
+                          type="checkbox"
+                          value="false"
+                        />
+                      </button>
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id ProductVariants-colName-id"
+                      scope="col"
+                    >
+                      Name
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id ProductVariants-colStatus-id"
+                      scope="col"
+                    >
+                      Status
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id ProductVariants-colSku-id"
+                      scope="col"
+                    >
+                      SKU
+                    </th>
+                  </tr>
+                </thead>
+                <tbody
+                  class="MuiTableBody-root-id"
                 >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+                  <tr
+                    class="MuiTableRow-root-id ProductVariants-link-id MuiTableRow-hover-id"
                   >
-                    <button
-                      class="MuiButtonBase-root-id makeStyles-root-id"
-                      tabindex="0"
-                      type="button"
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                     >
-                      <input
-                        class="makeStyles-box-id"
-                        type="checkbox"
-                        value="false"
-                      />
-                    </button>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colName-id"
-                    data-tc="name"
-                  >
-                    Cordoba Oro
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colStatus-id"
-                    data-tc="isAvailable"
-                    data-tc-is-available="true"
-                  >
-                    <div
-                      class="makeStyles-root-id undefined makeStyles-successDot-id"
+                      <button
+                        class="MuiButtonBase-root-id makeStyles-root-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <input
+                          class="makeStyles-box-id"
+                          type="checkbox"
+                          value="false"
+                        />
+                      </button>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colName-id"
+                      data-tc="name"
                     >
-                      Available
-                    </div>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colSku-id"
-                    data-tc="sku"
-                  >
-                    87192-94370
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id ProductVariants-link-id MuiTableRow-hover-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id makeStyles-root-id"
-                      tabindex="0"
-                      type="button"
+                      Cordoba Oro
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colStatus-id"
+                      data-tc="isAvailable"
+                      data-tc-is-available="true"
                     >
-                      <input
-                        class="makeStyles-box-id"
-                        type="checkbox"
-                        value="false"
-                      />
-                    </button>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colName-id"
-                    data-tc="name"
-                  >
-                    silver
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colStatus-id"
-                    data-tc="isAvailable"
-                    data-tc-is-available="true"
-                  >
-                    <div
-                      class="makeStyles-root-id undefined makeStyles-successDot-id"
+                      <div
+                        class="makeStyles-root-id undefined makeStyles-successDot-id"
+                      >
+                        Available
+                      </div>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colSku-id"
+                      data-tc="sku"
                     >
-                      Available
-                    </div>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colSku-id"
-                    data-tc="sku"
+                      87192-94370
+                    </td>
+                  </tr>
+                  <tr
+                    class="MuiTableRow-root-id ProductVariants-link-id MuiTableRow-hover-id"
                   >
-                    69055-15190
-                  </td>
-                </tr>
-              </tbody>
-            </table>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id makeStyles-root-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <input
+                          class="makeStyles-box-id"
+                          type="checkbox"
+                          value="false"
+                        />
+                      </button>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colName-id"
+                      data-tc="name"
+                    >
+                      silver
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colStatus-id"
+                      data-tc="isAvailable"
+                      data-tc-is-available="true"
+                    >
+                      <div
+                        class="makeStyles-root-id undefined makeStyles-successDot-id"
+                      >
+                        Available
+                      </div>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colSku-id"
+                      data-tc="sku"
+                    >
+                      69055-15190
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
           </div>
           <div
             class="makeStyles-spacer-id"
@@ -99686,10 +100242,10 @@ exports[`Storyshots Views / Products / Product edit when product has no variants
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -99697,7 +100253,7 @@ exports[`Storyshots Views / Products / Product edit when product has no variants
           Ergonomic Plastic Bacon
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -101399,10 +101955,10 @@ exports[`Storyshots Views / Products / Product image details when loaded data 1`
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -101410,7 +101966,7 @@ exports[`Storyshots Views / Products / Product image details when loaded data 1`
           Edit Photo
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -101638,10 +102194,10 @@ exports[`Storyshots Views / Products / Product image details when loading data 1
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -101649,7 +102205,7 @@ exports[`Storyshots Views / Products / Product image details when loading data 1
           Edit Photo
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -101809,10 +102365,10 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
   style="padding:24px"
 >
   <div
-    class="makeStyles-root-id"
+    class="Container-root-id"
   >
     <div
-      class="makeStyles-root-id"
+      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
         class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -101820,7 +102376,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
         Products
       </div>
       <div
-        class="makeStyles-action-id"
+        class="ExtendedPageHeader-action-id"
       >
         <div
           class="makeStyles-root-id"
@@ -101970,1545 +102526,1549 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
       <div
         class="makeStyles-tableContainer-id"
       >
-        <table
-          class="MuiTable-root-id makeStyles-table-id"
+        <div
+          class="ResponsiveTable-root-id"
         >
-          <colgroup>
-            <col />
-            <col
-              class="makeStyles-colName-id"
-            />
-            <col
-              class="makeStyles-colType-id"
-            />
-            <col
-              class="makeStyles-colPublished-id"
-            />
-            <col
-              class="makeStyles-colPrice-id"
-            />
-          </colgroup>
-          <thead
-            class="MuiTableHead-root-id"
+          <table
+            class="MuiTable-root-id makeStyles-table-id"
           >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-head-id"
+            <colgroup>
+              <col />
+              <col
+                class="makeStyles-colName-id"
+              />
+              <col
+                class="makeStyles-colType-id"
+              />
+              <col
+                class="makeStyles-colPublished-id"
+              />
+              <col
+                class="makeStyles-colPrice-id"
+              />
+            </colgroup>
+            <thead
+              class="MuiTableHead-root-id"
             >
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
-                scope="col"
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-head-id"
               >
-                <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
-                  tabindex="0"
-                  type="button"
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
+                  scope="col"
                 >
-                  <input
-                    class="makeStyles-box-id"
-                    type="checkbox"
-                    value="false"
-                  />
-                </button>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-root-id makeStyles-colName-id"
-                scope="col"
-              >
-                <div
-                  class="makeStyles-labelContainer-id makeStyles-labelContainerActive-id"
+                  <button
+                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <input
+                      class="makeStyles-box-id"
+                      type="checkbox"
+                      value="false"
+                    />
+                  </button>
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-root-id makeStyles-colName-id"
+                  scope="col"
                 >
                   <div
-                    class="makeStyles-label-id"
+                    class="makeStyles-labelContainer-id makeStyles-labelContainerActive-id"
                   >
-                    <span
-                      class="makeStyles-colNameHeader-id"
+                    <div
+                      class="makeStyles-label-id"
                     >
-                      Name
-                    </span>
+                      <span
+                        class="makeStyles-colNameHeader-id"
+                      >
+                        Name
+                      </span>
+                    </div>
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id makeStyles-arrow-id makeStyles-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>
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id makeStyles-arrow-id makeStyles-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 makeStyles-root-id makeStyles-colType-id"
-                scope="col"
-              >
-                <div
-                  class="makeStyles-labelContainer-id"
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-root-id makeStyles-colType-id"
+                  scope="col"
                 >
                   <div
-                    class="makeStyles-label-id"
+                    class="makeStyles-labelContainer-id"
                   >
-                    Type
+                    <div
+                      class="makeStyles-label-id"
+                    >
+                      Type
+                    </div>
                   </div>
-                </div>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-root-id makeStyles-colPublished-id"
-                scope="col"
-              >
-                <div
-                  class="makeStyles-labelContainer-id"
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-root-id makeStyles-colPublished-id"
+                  scope="col"
                 >
                   <div
-                    class="makeStyles-label-id"
+                    class="makeStyles-labelContainer-id"
+                  >
+                    <div
+                      class="makeStyles-label-id"
+                    >
+                      Published
+                    </div>
+                  </div>
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-root-id makeStyles-colPrice-id"
+                  scope="col"
+                >
+                  <div
+                    class="makeStyles-labelContainer-id makeStyles-labelContainerRight-id"
+                  >
+                    <div
+                      class="makeStyles-label-id"
+                    >
+                      Price
+                    </div>
+                  </div>
+                </th>
+              </tr>
+            </thead>
+            <tfoot
+              class="MuiTableFooter-root-id"
+            >
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-footer-id"
+              >
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                  colspan="5"
+                >
+                  <div
+                    class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+                  >
+                    <div
+                      class="makeStyles-spacer-id"
+                    >
+                      <div>
+                        <span
+                          class="RowNumberSelect-label-id"
+                        >
+                          No of Rows:
+                        </span>
+                        <div
+                          class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
+                        >
+                          <div
+                            aria-haspopup="listbox"
+                            aria-labelledby=" "
+                            class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-id"
+                            role="button"
+                            tabindex="0"
+                          >
+                            20
+                          </div>
+                          <input
+                            type="hidden"
+                            value="20"
+                          />
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id MuiSelect-icon-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M7 10l5 5 5-5z"
+                            />
+                          </svg>
+                        </div>
+                      </div>
+                    </div>
+                    <div
+                      class="makeStyles-root-id"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                        data-tc="button-pagination-back"
+                        disabled=""
+                        tabindex="-1"
+                        type="button"
+                      >
+                        <span
+                          class="MuiIconButton-label-id"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M14 7l-5 5 5 5V7z"
+                            />
+                            <path
+                              d="M24 0v24H0V0h24z"
+                              fill="none"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                      <button
+                        class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                        data-tc="button-pagination-next"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiIconButton-label-id"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M10 17l5-5-5-5v10z"
+                            />
+                            <path
+                              d="M0 24V0h24v24H0z"
+                              fill="none"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </div>
+                  </div>
+                </td>
+              </tr>
+            </tfoot>
+            <tbody
+              class="MuiTableBody-root-id"
+            >
+              <tr
+                class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                data-tc="id"
+                data-tc-id="UHJvZHVjdDo2MQ=="
+              >
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <input
+                      class="makeStyles-box-id"
+                      type="checkbox"
+                      value="false"
+                    />
+                  </button>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                  data-tc="name"
+                >
+                  <div
+                    class="makeStyles-content-id"
+                  >
+                    <div
+                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                    >
+                      <img
+                        class="MuiAvatar-img-id"
+                        src="placeholder255x255.png"
+                      />
+                    </div>
+                    <div
+                      class="makeStyles-children-id"
+                    >
+                      Nebula Night Sky Paint
+                    </div>
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
+                  data-tc="product-type"
+                >
+                  Paint
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
+                  data-tc="isPublished"
+                  data-tc-is-published="true"
+                >
+                  <div
+                    class="makeStyles-root-id undefined makeStyles-successDot-id"
                   >
                     Published
                   </div>
-                </div>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-root-id makeStyles-colPrice-id"
-                scope="col"
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                >
+                  $15.00
+                </td>
+              </tr>
+              <tr
+                class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                data-tc="id"
+                data-tc-id="UHJvZHVjdDo2NA=="
               >
-                <div
-                  class="makeStyles-labelContainer-id makeStyles-labelContainerRight-id"
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <input
+                      class="makeStyles-box-id"
+                      type="checkbox"
+                      value="false"
+                    />
+                  </button>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                  data-tc="name"
                 >
                   <div
-                    class="makeStyles-label-id"
+                    class="makeStyles-content-id"
                   >
-                    Price
-                  </div>
-                </div>
-              </th>
-            </tr>
-          </thead>
-          <tfoot
-            class="MuiTableFooter-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-footer-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
-                colspan="5"
-              >
-                <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
-                >
-                  <div
-                    class="makeStyles-spacer-id"
-                  >
-                    <div>
-                      <span
-                        class="RowNumberSelect-label-id"
-                      >
-                        No of Rows:
-                      </span>
-                      <div
-                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
-                      >
-                        <div
-                          aria-haspopup="listbox"
-                          aria-labelledby=" "
-                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-id"
-                          role="button"
-                          tabindex="0"
-                        >
-                          20
-                        </div>
-                        <input
-                          type="hidden"
-                          value="20"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
-                          focusable="false"
-                          role="presentation"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M7 10l5 5 5-5z"
-                          />
-                        </svg>
-                      </div>
+                    <div
+                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                    >
+                      <img
+                        class="MuiAvatar-img-id"
+                        src="placeholder255x255.png"
+                      />
+                    </div>
+                    <div
+                      class="makeStyles-children-id"
+                    >
+                      Light Speed Yellow Paint
                     </div>
                   </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
+                  data-tc="product-type"
+                >
+                  Paint
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
+                  data-tc="isPublished"
+                  data-tc-is-published="true"
+                >
                   <div
-                    class="makeStyles-root-id"
+                    class="makeStyles-root-id undefined makeStyles-successDot-id"
                   >
-                    <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                      data-tc="button-pagination-back"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
+                    Published
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                >
+                  $15.00
+                </td>
+              </tr>
+              <tr
+                class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                data-tc="id"
+                data-tc-id="UHJvZHVjdDo2NQ=="
+              >
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <input
+                      class="makeStyles-box-id"
+                      type="checkbox"
+                      value="false"
+                    />
+                  </button>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                  data-tc="name"
+                >
+                  <div
+                    class="makeStyles-content-id"
+                  >
+                    <div
+                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
                     >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          role="presentation"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M14 7l-5 5 5 5V7z"
-                          />
-                          <path
-                            d="M24 0v24H0V0h24z"
-                            fill="none"
-                          />
-                        </svg>
-                      </span>
-                    </button>
-                    <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
-                      data-tc="button-pagination-next"
-                      tabindex="0"
-                      type="button"
+                      <img
+                        class="MuiAvatar-img-id"
+                        src="placeholder255x255.png"
+                      />
+                    </div>
+                    <div
+                      class="makeStyles-children-id"
                     >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          role="presentation"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M10 17l5-5-5-5v10z"
-                          />
-                          <path
-                            d="M0 24V0h24v24H0z"
-                            fill="none"
-                          />
-                        </svg>
-                      </span>
-                    </button>
+                      Hyperspace Turquoise Paint
+                    </div>
                   </div>
-                </div>
-              </td>
-            </tr>
-          </tfoot>
-          <tbody
-            class="MuiTableBody-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-              data-tc="id"
-              data-tc-id="UHJvZHVjdDo2MQ=="
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
-                  tabindex="0"
-                  type="button"
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
+                  data-tc="product-type"
                 >
-                  <input
-                    class="makeStyles-box-id"
-                    type="checkbox"
-                    value="false"
-                  />
-                </button>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
-                data-tc="name"
-              >
-                <div
-                  class="makeStyles-content-id"
+                  Paint
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
+                  data-tc="isPublished"
+                  data-tc-is-published="true"
                 >
                   <div
-                    class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                    class="makeStyles-root-id undefined makeStyles-successDot-id"
                   >
-                    <img
-                      class="MuiAvatar-img-id"
-                      src="placeholder255x255.png"
+                    Published
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                >
+                  $15.00
+                </td>
+              </tr>
+              <tr
+                class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                data-tc="id"
+                data-tc-id="UHJvZHVjdDo3NQ=="
+              >
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <input
+                      class="makeStyles-box-id"
+                      type="checkbox"
+                      value="false"
                     />
-                  </div>
-                  <div
-                    class="makeStyles-children-id"
-                  >
-                    Nebula Night Sky Paint
-                  </div>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
-                data-tc="product-type"
-              >
-                Paint
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
-                data-tc="isPublished"
-                data-tc-is-published="true"
-              >
-                <div
-                  class="makeStyles-root-id undefined makeStyles-successDot-id"
-                >
-                  Published
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
-              >
-                $15.00
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-              data-tc="id"
-              data-tc-id="UHJvZHVjdDo2NA=="
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <input
-                    class="makeStyles-box-id"
-                    type="checkbox"
-                    value="false"
-                  />
-                </button>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
-                data-tc="name"
-              >
-                <div
-                  class="makeStyles-content-id"
+                  </button>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                  data-tc="name"
                 >
                   <div
-                    class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                    class="makeStyles-content-id"
                   >
-                    <img
-                      class="MuiAvatar-img-id"
-                      src="placeholder255x255.png"
+                    <div
+                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                    >
+                      <img
+                        class="MuiAvatar-img-id"
+                        src="placeholder255x255.png"
+                      />
+                    </div>
+                    <div
+                      class="makeStyles-children-id"
+                    >
+                      Pineapple Juice
+                    </div>
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
+                  data-tc="product-type"
+                >
+                  Juice
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
+                  data-tc="isPublished"
+                  data-tc-is-published="true"
+                >
+                  <div
+                    class="makeStyles-root-id undefined makeStyles-successDot-id"
+                  >
+                    Published
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                >
+                  $3.00
+                </td>
+              </tr>
+              <tr
+                class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                data-tc="id"
+                data-tc-id="UHJvZHVjdDo3Ng=="
+              >
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <input
+                      class="makeStyles-box-id"
+                      type="checkbox"
+                      value="false"
                     />
-                  </div>
-                  <div
-                    class="makeStyles-children-id"
-                  >
-                    Light Speed Yellow Paint
-                  </div>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
-                data-tc="product-type"
-              >
-                Paint
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
-                data-tc="isPublished"
-                data-tc-is-published="true"
-              >
-                <div
-                  class="makeStyles-root-id undefined makeStyles-successDot-id"
-                >
-                  Published
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
-              >
-                $15.00
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-              data-tc="id"
-              data-tc-id="UHJvZHVjdDo2NQ=="
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <input
-                    class="makeStyles-box-id"
-                    type="checkbox"
-                    value="false"
-                  />
-                </button>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
-                data-tc="name"
-              >
-                <div
-                  class="makeStyles-content-id"
+                  </button>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                  data-tc="name"
                 >
                   <div
-                    class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                    class="makeStyles-content-id"
                   >
-                    <img
-                      class="MuiAvatar-img-id"
-                      src="placeholder255x255.png"
+                    <div
+                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                    >
+                      <img
+                        class="MuiAvatar-img-id"
+                        src="placeholder255x255.png"
+                      />
+                    </div>
+                    <div
+                      class="makeStyles-children-id"
+                    >
+                      Coconut Juice
+                    </div>
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
+                  data-tc="product-type"
+                >
+                  Juice
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
+                  data-tc="isPublished"
+                  data-tc-is-published="true"
+                >
+                  <div
+                    class="makeStyles-root-id undefined makeStyles-successDot-id"
+                  >
+                    Published
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                >
+                  $3.00
+                </td>
+              </tr>
+              <tr
+                class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                data-tc="id"
+                data-tc-id="UHJvZHVjdDo3Mg=="
+              >
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <input
+                      class="makeStyles-box-id"
+                      type="checkbox"
+                      value="false"
                     />
-                  </div>
-                  <div
-                    class="makeStyles-children-id"
-                  >
-                    Hyperspace Turquoise Paint
-                  </div>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
-                data-tc="product-type"
-              >
-                Paint
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
-                data-tc="isPublished"
-                data-tc-is-published="true"
-              >
-                <div
-                  class="makeStyles-root-id undefined makeStyles-successDot-id"
-                >
-                  Published
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
-              >
-                $15.00
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-              data-tc="id"
-              data-tc-id="UHJvZHVjdDo3NQ=="
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <input
-                    class="makeStyles-box-id"
-                    type="checkbox"
-                    value="false"
-                  />
-                </button>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
-                data-tc="name"
-              >
-                <div
-                  class="makeStyles-content-id"
+                  </button>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                  data-tc="name"
                 >
                   <div
-                    class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                    class="makeStyles-content-id"
                   >
-                    <img
-                      class="MuiAvatar-img-id"
-                      src="placeholder255x255.png"
+                    <div
+                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                    >
+                      <img
+                        class="MuiAvatar-img-id"
+                        src="placeholder255x255.png"
+                      />
+                    </div>
+                    <div
+                      class="makeStyles-children-id"
+                    >
+                      Apple Juice
+                    </div>
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
+                  data-tc="product-type"
+                >
+                  Juice
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
+                  data-tc="isPublished"
+                  data-tc-is-published="true"
+                >
+                  <div
+                    class="makeStyles-root-id undefined makeStyles-successDot-id"
+                  >
+                    Published
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                >
+                  $3.00
+                </td>
+              </tr>
+              <tr
+                class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                data-tc="id"
+                data-tc-id="UHJvZHVjdDo3MQ=="
+              >
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <input
+                      class="makeStyles-box-id"
+                      type="checkbox"
+                      value="false"
                     />
-                  </div>
-                  <div
-                    class="makeStyles-children-id"
-                  >
-                    Pineapple Juice
-                  </div>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
-                data-tc="product-type"
-              >
-                Juice
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
-                data-tc="isPublished"
-                data-tc-is-published="true"
-              >
-                <div
-                  class="makeStyles-root-id undefined makeStyles-successDot-id"
-                >
-                  Published
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
-              >
-                $3.00
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-              data-tc="id"
-              data-tc-id="UHJvZHVjdDo3Ng=="
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <input
-                    class="makeStyles-box-id"
-                    type="checkbox"
-                    value="false"
-                  />
-                </button>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
-                data-tc="name"
-              >
-                <div
-                  class="makeStyles-content-id"
+                  </button>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                  data-tc="name"
                 >
                   <div
-                    class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                    class="makeStyles-content-id"
                   >
-                    <img
-                      class="MuiAvatar-img-id"
-                      src="placeholder255x255.png"
+                    <div
+                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                    >
+                      <img
+                        class="MuiAvatar-img-id"
+                        src="placeholder255x255.png"
+                      />
+                    </div>
+                    <div
+                      class="makeStyles-children-id"
+                    >
+                      Orange Juice
+                    </div>
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
+                  data-tc="product-type"
+                >
+                  Juice
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
+                  data-tc="isPublished"
+                  data-tc-is-published="true"
+                >
+                  <div
+                    class="makeStyles-root-id undefined makeStyles-successDot-id"
+                  >
+                    Published
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                >
+                  $3.00
+                </td>
+              </tr>
+              <tr
+                class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                data-tc="id"
+                data-tc-id="UHJvZHVjdDo3NA=="
+              >
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <input
+                      class="makeStyles-box-id"
+                      type="checkbox"
+                      value="false"
                     />
-                  </div>
-                  <div
-                    class="makeStyles-children-id"
-                  >
-                    Coconut Juice
-                  </div>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
-                data-tc="product-type"
-              >
-                Juice
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
-                data-tc="isPublished"
-                data-tc-is-published="true"
-              >
-                <div
-                  class="makeStyles-root-id undefined makeStyles-successDot-id"
-                >
-                  Published
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
-              >
-                $3.00
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-              data-tc="id"
-              data-tc-id="UHJvZHVjdDo3Mg=="
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <input
-                    class="makeStyles-box-id"
-                    type="checkbox"
-                    value="false"
-                  />
-                </button>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
-                data-tc="name"
-              >
-                <div
-                  class="makeStyles-content-id"
+                  </button>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                  data-tc="name"
                 >
                   <div
-                    class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                    class="makeStyles-content-id"
                   >
-                    <img
-                      class="MuiAvatar-img-id"
-                      src="placeholder255x255.png"
+                    <div
+                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                    >
+                      <img
+                        class="MuiAvatar-img-id"
+                        src="placeholder255x255.png"
+                      />
+                    </div>
+                    <div
+                      class="makeStyles-children-id"
+                    >
+                      Banana Juice
+                    </div>
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
+                  data-tc="product-type"
+                >
+                  Juice
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
+                  data-tc="isPublished"
+                  data-tc-is-published="true"
+                >
+                  <div
+                    class="makeStyles-root-id undefined makeStyles-successDot-id"
+                  >
+                    Published
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                >
+                  $3.00
+                </td>
+              </tr>
+              <tr
+                class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                data-tc="id"
+                data-tc-id="UHJvZHVjdDo3OQ=="
+              >
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <input
+                      class="makeStyles-box-id"
+                      type="checkbox"
+                      value="false"
                     />
-                  </div>
-                  <div
-                    class="makeStyles-children-id"
-                  >
-                    Apple Juice
-                  </div>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
-                data-tc="product-type"
-              >
-                Juice
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
-                data-tc="isPublished"
-                data-tc-is-published="true"
-              >
-                <div
-                  class="makeStyles-root-id undefined makeStyles-successDot-id"
-                >
-                  Published
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
-              >
-                $3.00
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-              data-tc="id"
-              data-tc-id="UHJvZHVjdDo3MQ=="
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <input
-                    class="makeStyles-box-id"
-                    type="checkbox"
-                    value="false"
-                  />
-                </button>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
-                data-tc="name"
-              >
-                <div
-                  class="makeStyles-content-id"
+                  </button>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                  data-tc="name"
                 >
                   <div
-                    class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                    class="makeStyles-content-id"
                   >
-                    <img
-                      class="MuiAvatar-img-id"
-                      src="placeholder255x255.png"
+                    <div
+                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                    >
+                      <img
+                        class="MuiAvatar-img-id"
+                        src="placeholder255x255.png"
+                      />
+                    </div>
+                    <div
+                      class="makeStyles-children-id"
+                    >
+                      Bean Juice
+                    </div>
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
+                  data-tc="product-type"
+                >
+                  Juice
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
+                  data-tc="isPublished"
+                  data-tc-is-published="true"
+                >
+                  <div
+                    class="makeStyles-root-id undefined makeStyles-successDot-id"
+                  >
+                    Published
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                >
+                  $3.00
+                </td>
+              </tr>
+              <tr
+                class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                data-tc="id"
+                data-tc-id="UHJvZHVjdDo3Mw=="
+              >
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <input
+                      class="makeStyles-box-id"
+                      type="checkbox"
+                      value="false"
                     />
-                  </div>
-                  <div
-                    class="makeStyles-children-id"
-                  >
-                    Orange Juice
-                  </div>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
-                data-tc="product-type"
-              >
-                Juice
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
-                data-tc="isPublished"
-                data-tc-is-published="true"
-              >
-                <div
-                  class="makeStyles-root-id undefined makeStyles-successDot-id"
-                >
-                  Published
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
-              >
-                $3.00
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-              data-tc="id"
-              data-tc-id="UHJvZHVjdDo3NA=="
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <input
-                    class="makeStyles-box-id"
-                    type="checkbox"
-                    value="false"
-                  />
-                </button>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
-                data-tc="name"
-              >
-                <div
-                  class="makeStyles-content-id"
+                  </button>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                  data-tc="name"
                 >
                   <div
-                    class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                    class="makeStyles-content-id"
                   >
-                    <img
-                      class="MuiAvatar-img-id"
-                      src="placeholder255x255.png"
+                    <div
+                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                    >
+                      <img
+                        class="MuiAvatar-img-id"
+                        src="placeholder255x255.png"
+                      />
+                    </div>
+                    <div
+                      class="makeStyles-children-id"
+                    >
+                      Carrot Juice
+                    </div>
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
+                  data-tc="product-type"
+                >
+                  Juice
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
+                  data-tc="isPublished"
+                  data-tc-is-published="true"
+                >
+                  <div
+                    class="makeStyles-root-id undefined makeStyles-successDot-id"
+                  >
+                    Published
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                >
+                  $3.00
+                </td>
+              </tr>
+              <tr
+                class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                data-tc="id"
+                data-tc-id="UHJvZHVjdDo3OA=="
+              >
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <input
+                      class="makeStyles-box-id"
+                      type="checkbox"
+                      value="false"
                     />
-                  </div>
-                  <div
-                    class="makeStyles-children-id"
-                  >
-                    Banana Juice
-                  </div>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
-                data-tc="product-type"
-              >
-                Juice
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
-                data-tc="isPublished"
-                data-tc-is-published="true"
-              >
-                <div
-                  class="makeStyles-root-id undefined makeStyles-successDot-id"
-                >
-                  Published
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
-              >
-                $3.00
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-              data-tc="id"
-              data-tc-id="UHJvZHVjdDo3OQ=="
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <input
-                    class="makeStyles-box-id"
-                    type="checkbox"
-                    value="false"
-                  />
-                </button>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
-                data-tc="name"
-              >
-                <div
-                  class="makeStyles-content-id"
+                  </button>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                  data-tc="name"
                 >
                   <div
-                    class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                    class="makeStyles-content-id"
                   >
-                    <img
-                      class="MuiAvatar-img-id"
-                      src="placeholder255x255.png"
+                    <div
+                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                    >
+                      <img
+                        class="MuiAvatar-img-id"
+                        src="placeholder255x255.png"
+                      />
+                    </div>
+                    <div
+                      class="makeStyles-children-id"
+                    >
+                      Green Juice
+                    </div>
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
+                  data-tc="product-type"
+                >
+                  Juice
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
+                  data-tc="isPublished"
+                  data-tc-is-published="true"
+                >
+                  <div
+                    class="makeStyles-root-id undefined makeStyles-successDot-id"
+                  >
+                    Published
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                >
+                  $3.00
+                </td>
+              </tr>
+              <tr
+                class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                data-tc="id"
+                data-tc-id="UHJvZHVjdDo4OQ=="
+              >
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <input
+                      class="makeStyles-box-id"
+                      type="checkbox"
+                      value="false"
                     />
-                  </div>
-                  <div
-                    class="makeStyles-children-id"
-                  >
-                    Bean Juice
-                  </div>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
-                data-tc="product-type"
-              >
-                Juice
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
-                data-tc="isPublished"
-                data-tc-is-published="true"
-              >
-                <div
-                  class="makeStyles-root-id undefined makeStyles-successDot-id"
-                >
-                  Published
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
-              >
-                $3.00
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-              data-tc="id"
-              data-tc-id="UHJvZHVjdDo3Mw=="
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <input
-                    class="makeStyles-box-id"
-                    type="checkbox"
-                    value="false"
-                  />
-                </button>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
-                data-tc="name"
-              >
-                <div
-                  class="makeStyles-content-id"
+                  </button>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                  data-tc="name"
                 >
                   <div
-                    class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                    class="makeStyles-content-id"
                   >
-                    <img
-                      class="MuiAvatar-img-id"
-                      src="placeholder255x255.png"
+                    <div
+                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                    >
+                      <img
+                        class="MuiAvatar-img-id"
+                        src="placeholder255x255.png"
+                      />
+                    </div>
+                    <div
+                      class="makeStyles-children-id"
+                    >
+                      Code Division T-shirt
+                    </div>
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
+                  data-tc="product-type"
+                >
+                  Top (clothing)
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
+                  data-tc="isPublished"
+                  data-tc-is-published="true"
+                >
+                  <div
+                    class="makeStyles-root-id undefined makeStyles-successDot-id"
+                  >
+                    Published
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                >
+                  $30.00
+                </td>
+              </tr>
+              <tr
+                class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                data-tc="id"
+                data-tc-id="UHJvZHVjdDoxMDc="
+              >
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <input
+                      class="makeStyles-box-id"
+                      type="checkbox"
+                      value="false"
                     />
-                  </div>
-                  <div
-                    class="makeStyles-children-id"
-                  >
-                    Carrot Juice
-                  </div>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
-                data-tc="product-type"
-              >
-                Juice
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
-                data-tc="isPublished"
-                data-tc-is-published="true"
-              >
-                <div
-                  class="makeStyles-root-id undefined makeStyles-successDot-id"
-                >
-                  Published
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
-              >
-                $3.00
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-              data-tc="id"
-              data-tc-id="UHJvZHVjdDo3OA=="
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <input
-                    class="makeStyles-box-id"
-                    type="checkbox"
-                    value="false"
-                  />
-                </button>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
-                data-tc="name"
-              >
-                <div
-                  class="makeStyles-content-id"
+                  </button>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                  data-tc="name"
                 >
                   <div
-                    class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                    class="makeStyles-content-id"
                   >
-                    <img
-                      class="MuiAvatar-img-id"
-                      src="placeholder255x255.png"
+                    <div
+                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                    >
+                      <img
+                        class="MuiAvatar-img-id"
+                        src="placeholder255x255.png"
+                      />
+                    </div>
+                    <div
+                      class="makeStyles-children-id"
+                    >
+                      Polo Shirt
+                    </div>
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
+                  data-tc="product-type"
+                >
+                  Top (clothing)
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
+                  data-tc="isPublished"
+                  data-tc-is-published="true"
+                >
+                  <div
+                    class="makeStyles-root-id undefined makeStyles-successDot-id"
+                  >
+                    Published
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                >
+                  $30.00
+                </td>
+              </tr>
+              <tr
+                class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                data-tc="id"
+                data-tc-id="UHJvZHVjdDoxMDg="
+              >
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <input
+                      class="makeStyles-box-id"
+                      type="checkbox"
+                      value="false"
                     />
-                  </div>
-                  <div
-                    class="makeStyles-children-id"
-                  >
-                    Green Juice
-                  </div>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
-                data-tc="product-type"
-              >
-                Juice
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
-                data-tc="isPublished"
-                data-tc-is-published="true"
-              >
-                <div
-                  class="makeStyles-root-id undefined makeStyles-successDot-id"
-                >
-                  Published
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
-              >
-                $3.00
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-              data-tc="id"
-              data-tc-id="UHJvZHVjdDo4OQ=="
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <input
-                    class="makeStyles-box-id"
-                    type="checkbox"
-                    value="false"
-                  />
-                </button>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
-                data-tc="name"
-              >
-                <div
-                  class="makeStyles-content-id"
+                  </button>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                  data-tc="name"
                 >
                   <div
-                    class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                    class="makeStyles-content-id"
                   >
-                    <img
-                      class="MuiAvatar-img-id"
-                      src="placeholder255x255.png"
+                    <div
+                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                    >
+                      <img
+                        class="MuiAvatar-img-id"
+                        src="placeholder255x255.png"
+                      />
+                    </div>
+                    <div
+                      class="makeStyles-children-id"
+                    >
+                      Polo Shirt
+                    </div>
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
+                  data-tc="product-type"
+                >
+                  Top (clothing)
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
+                  data-tc="isPublished"
+                  data-tc-is-published="true"
+                >
+                  <div
+                    class="makeStyles-root-id undefined makeStyles-successDot-id"
+                  >
+                    Published
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                >
+                  $30.00
+                </td>
+              </tr>
+              <tr
+                class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                data-tc="id"
+                data-tc-id="UHJvZHVjdDoxMDk="
+              >
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <input
+                      class="makeStyles-box-id"
+                      type="checkbox"
+                      value="false"
                     />
-                  </div>
-                  <div
-                    class="makeStyles-children-id"
-                  >
-                    Code Division T-shirt
-                  </div>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
-                data-tc="product-type"
-              >
-                Top (clothing)
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
-                data-tc="isPublished"
-                data-tc-is-published="true"
-              >
-                <div
-                  class="makeStyles-root-id undefined makeStyles-successDot-id"
-                >
-                  Published
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
-              >
-                $30.00
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-              data-tc="id"
-              data-tc-id="UHJvZHVjdDoxMDc="
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <input
-                    class="makeStyles-box-id"
-                    type="checkbox"
-                    value="false"
-                  />
-                </button>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
-                data-tc="name"
-              >
-                <div
-                  class="makeStyles-content-id"
+                  </button>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                  data-tc="name"
                 >
                   <div
-                    class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                    class="makeStyles-content-id"
                   >
-                    <img
-                      class="MuiAvatar-img-id"
-                      src="placeholder255x255.png"
+                    <div
+                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                    >
+                      <img
+                        class="MuiAvatar-img-id"
+                        src="placeholder255x255.png"
+                      />
+                    </div>
+                    <div
+                      class="makeStyles-children-id"
+                    >
+                      Polo Shirt
+                    </div>
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
+                  data-tc="product-type"
+                >
+                  Top (clothing)
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
+                  data-tc="isPublished"
+                  data-tc-is-published="true"
+                >
+                  <div
+                    class="makeStyles-root-id undefined makeStyles-successDot-id"
+                  >
+                    Published
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                >
+                  $30.00
+                </td>
+              </tr>
+              <tr
+                class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                data-tc="id"
+                data-tc-id="UHJvZHVjdDoxMTA="
+              >
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <input
+                      class="makeStyles-box-id"
+                      type="checkbox"
+                      value="false"
                     />
-                  </div>
-                  <div
-                    class="makeStyles-children-id"
-                  >
-                    Polo Shirt
-                  </div>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
-                data-tc="product-type"
-              >
-                Top (clothing)
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
-                data-tc="isPublished"
-                data-tc-is-published="true"
-              >
-                <div
-                  class="makeStyles-root-id undefined makeStyles-successDot-id"
-                >
-                  Published
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
-              >
-                $30.00
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-              data-tc="id"
-              data-tc-id="UHJvZHVjdDoxMDg="
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <input
-                    class="makeStyles-box-id"
-                    type="checkbox"
-                    value="false"
-                  />
-                </button>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
-                data-tc="name"
-              >
-                <div
-                  class="makeStyles-content-id"
+                  </button>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                  data-tc="name"
                 >
                   <div
-                    class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                    class="makeStyles-content-id"
                   >
-                    <img
-                      class="MuiAvatar-img-id"
-                      src="placeholder255x255.png"
+                    <div
+                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                    >
+                      <img
+                        class="MuiAvatar-img-id"
+                        src="placeholder255x255.png"
+                      />
+                    </div>
+                    <div
+                      class="makeStyles-children-id"
+                    >
+                      Polo Shirt
+                    </div>
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
+                  data-tc="product-type"
+                >
+                  Top (clothing)
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
+                  data-tc="isPublished"
+                  data-tc-is-published="true"
+                >
+                  <div
+                    class="makeStyles-root-id undefined makeStyles-successDot-id"
+                  >
+                    Published
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                >
+                  $30.00
+                </td>
+              </tr>
+              <tr
+                class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                data-tc="id"
+                data-tc-id="UHJvZHVjdDoxMTU="
+              >
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <input
+                      class="makeStyles-box-id"
+                      type="checkbox"
+                      value="false"
                     />
-                  </div>
-                  <div
-                    class="makeStyles-children-id"
-                  >
-                    Polo Shirt
-                  </div>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
-                data-tc="product-type"
-              >
-                Top (clothing)
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
-                data-tc="isPublished"
-                data-tc-is-published="true"
-              >
-                <div
-                  class="makeStyles-root-id undefined makeStyles-successDot-id"
-                >
-                  Published
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
-              >
-                $30.00
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-              data-tc="id"
-              data-tc-id="UHJvZHVjdDoxMDk="
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <input
-                    class="makeStyles-box-id"
-                    type="checkbox"
-                    value="false"
-                  />
-                </button>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
-                data-tc="name"
-              >
-                <div
-                  class="makeStyles-content-id"
+                  </button>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                  data-tc="name"
                 >
                   <div
-                    class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                    class="makeStyles-content-id"
                   >
-                    <img
-                      class="MuiAvatar-img-id"
-                      src="placeholder255x255.png"
+                    <div
+                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                    >
+                      <img
+                        class="MuiAvatar-img-id"
+                        src="placeholder255x255.png"
+                      />
+                    </div>
+                    <div
+                      class="makeStyles-children-id"
+                    >
+                      Black Hoodie
+                    </div>
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
+                  data-tc="product-type"
+                >
+                  Top (clothing)
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
+                  data-tc="isPublished"
+                  data-tc-is-published="true"
+                >
+                  <div
+                    class="makeStyles-root-id undefined makeStyles-successDot-id"
+                  >
+                    Published
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                >
+                  $30.00
+                </td>
+              </tr>
+              <tr
+                class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                data-tc="id"
+                data-tc-id="UHJvZHVjdDoxMTY="
+              >
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <input
+                      class="makeStyles-box-id"
+                      type="checkbox"
+                      value="false"
                     />
-                  </div>
-                  <div
-                    class="makeStyles-children-id"
-                  >
-                    Polo Shirt
-                  </div>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
-                data-tc="product-type"
-              >
-                Top (clothing)
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
-                data-tc="isPublished"
-                data-tc-is-published="true"
-              >
-                <div
-                  class="makeStyles-root-id undefined makeStyles-successDot-id"
-                >
-                  Published
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
-              >
-                $30.00
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-              data-tc="id"
-              data-tc-id="UHJvZHVjdDoxMTA="
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <input
-                    class="makeStyles-box-id"
-                    type="checkbox"
-                    value="false"
-                  />
-                </button>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
-                data-tc="name"
-              >
-                <div
-                  class="makeStyles-content-id"
+                  </button>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                  data-tc="name"
                 >
                   <div
-                    class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                    class="makeStyles-content-id"
                   >
-                    <img
-                      class="MuiAvatar-img-id"
-                      src="placeholder255x255.png"
+                    <div
+                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                    >
+                      <img
+                        class="MuiAvatar-img-id"
+                        src="placeholder255x255.png"
+                      />
+                    </div>
+                    <div
+                      class="makeStyles-children-id"
+                    >
+                      Blue Hoodie
+                    </div>
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
+                  data-tc="product-type"
+                >
+                  Top (clothing)
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
+                  data-tc="isPublished"
+                  data-tc-is-published="true"
+                >
+                  <div
+                    class="makeStyles-root-id undefined makeStyles-successDot-id"
+                  >
+                    Published
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                >
+                  $30.00
+                </td>
+              </tr>
+              <tr
+                class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                data-tc="id"
+                data-tc-id="UHJvZHVjdDoxMTc="
+              >
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <input
+                      class="makeStyles-box-id"
+                      type="checkbox"
+                      value="false"
                     />
-                  </div>
-                  <div
-                    class="makeStyles-children-id"
-                  >
-                    Polo Shirt
-                  </div>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
-                data-tc="product-type"
-              >
-                Top (clothing)
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
-                data-tc="isPublished"
-                data-tc-is-published="true"
-              >
-                <div
-                  class="makeStyles-root-id undefined makeStyles-successDot-id"
-                >
-                  Published
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
-              >
-                $30.00
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-              data-tc="id"
-              data-tc-id="UHJvZHVjdDoxMTU="
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <input
-                    class="makeStyles-box-id"
-                    type="checkbox"
-                    value="false"
-                  />
-                </button>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
-                data-tc="name"
-              >
-                <div
-                  class="makeStyles-content-id"
+                  </button>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                  data-tc="name"
                 >
                   <div
-                    class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                    class="makeStyles-content-id"
                   >
-                    <img
-                      class="MuiAvatar-img-id"
-                      src="placeholder255x255.png"
+                    <div
+                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                    >
+                      <img
+                        class="MuiAvatar-img-id"
+                        src="placeholder255x255.png"
+                      />
+                    </div>
+                    <div
+                      class="makeStyles-children-id"
+                    >
+                      Mustard Hoodie
+                    </div>
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
+                  data-tc="product-type"
+                >
+                  Top (clothing)
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
+                  data-tc="isPublished"
+                  data-tc-is-published="true"
+                >
+                  <div
+                    class="makeStyles-root-id undefined makeStyles-successDot-id"
+                  >
+                    Published
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                >
+                  $30.00
+                </td>
+              </tr>
+              <tr
+                class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                data-tc="id"
+                data-tc-id="UHJvZHVjdDo4NQ=="
+              >
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <input
+                      class="makeStyles-box-id"
+                      type="checkbox"
+                      value="false"
                     />
-                  </div>
-                  <div
-                    class="makeStyles-children-id"
-                  >
-                    Black Hoodie
-                  </div>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
-                data-tc="product-type"
-              >
-                Top (clothing)
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
-                data-tc="isPublished"
-                data-tc-is-published="true"
-              >
-                <div
-                  class="makeStyles-root-id undefined makeStyles-successDot-id"
-                >
-                  Published
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
-              >
-                $30.00
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-              data-tc="id"
-              data-tc-id="UHJvZHVjdDoxMTY="
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <input
-                    class="makeStyles-box-id"
-                    type="checkbox"
-                    value="false"
-                  />
-                </button>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
-                data-tc="name"
-              >
-                <div
-                  class="makeStyles-content-id"
+                  </button>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                  data-tc="name"
                 >
                   <div
-                    class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                    class="makeStyles-content-id"
                   >
-                    <img
-                      class="MuiAvatar-img-id"
-                      src="placeholder255x255.png"
-                    />
+                    <div
+                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                    >
+                      <img
+                        class="MuiAvatar-img-id"
+                        src="placeholder255x255.png"
+                      />
+                    </div>
+                    <div
+                      class="makeStyles-children-id"
+                    >
+                      Colored Parrot Cushion
+                    </div>
                   </div>
-                  <div
-                    class="makeStyles-children-id"
-                  >
-                    Blue Hoodie
-                  </div>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
-                data-tc="product-type"
-              >
-                Top (clothing)
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
-                data-tc="isPublished"
-                data-tc-is-published="true"
-              >
-                <div
-                  class="makeStyles-root-id undefined makeStyles-successDot-id"
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
+                  data-tc="product-type"
                 >
-                  Published
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
-              >
-                $30.00
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-              data-tc="id"
-              data-tc-id="UHJvZHVjdDoxMTc="
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <input
-                    class="makeStyles-box-id"
-                    type="checkbox"
-                    value="false"
-                  />
-                </button>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
-                data-tc="name"
-              >
-                <div
-                  class="makeStyles-content-id"
+                  Cushion
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
+                  data-tc="isPublished"
+                  data-tc-is-published="true"
                 >
                   <div
-                    class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                    class="makeStyles-root-id undefined makeStyles-successDot-id"
                   >
-                    <img
-                      class="MuiAvatar-img-id"
-                      src="placeholder255x255.png"
-                    />
+                    Published
                   </div>
-                  <div
-                    class="makeStyles-children-id"
-                  >
-                    Mustard Hoodie
-                  </div>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
-                data-tc="product-type"
-              >
-                Top (clothing)
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
-                data-tc="isPublished"
-                data-tc-is-published="true"
-              >
-                <div
-                  class="makeStyles-root-id undefined makeStyles-successDot-id"
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
                 >
-                  Published
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
-              >
-                $30.00
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-              data-tc="id"
-              data-tc-id="UHJvZHVjdDo4NQ=="
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <input
-                    class="makeStyles-box-id"
-                    type="checkbox"
-                    value="false"
-                  />
-                </button>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
-                data-tc="name"
-              >
-                <div
-                  class="makeStyles-content-id"
-                >
-                  <div
-                    class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
-                  >
-                    <img
-                      class="MuiAvatar-img-id"
-                      src="placeholder255x255.png"
-                    />
-                  </div>
-                  <div
-                    class="makeStyles-children-id"
-                  >
-                    Colored Parrot Cushion
-                  </div>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
-                data-tc="product-type"
-              >
-                Cushion
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
-                data-tc="isPublished"
-                data-tc-is-published="true"
-              >
-                <div
-                  class="makeStyles-root-id undefined makeStyles-successDot-id"
-                >
-                  Published
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
-              >
-                $20.00
-              </td>
-            </tr>
-          </tbody>
-        </table>
+                  $20.00
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
       </div>
     </div>
   </div>
@@ -103520,10 +104080,10 @@ exports[`Storyshots Views / Products / Product list loading 1`] = `
   style="padding:24px"
 >
   <div
-    class="makeStyles-root-id"
+    class="Container-root-id"
   >
     <div
-      class="makeStyles-root-id"
+      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
         class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -103531,7 +104091,7 @@ exports[`Storyshots Views / Products / Product list loading 1`] = `
         Products
       </div>
       <div
-        class="makeStyles-action-id"
+        class="ExtendedPageHeader-action-id"
       >
         <div
           class="makeStyles-root-id"
@@ -103681,332 +104241,336 @@ exports[`Storyshots Views / Products / Product list loading 1`] = `
       <div
         class="makeStyles-tableContainer-id"
       >
-        <table
-          class="MuiTable-root-id makeStyles-table-id"
+        <div
+          class="ResponsiveTable-root-id"
         >
-          <colgroup>
-            <col />
-            <col
-              class="makeStyles-colName-id"
-            />
-            <col
-              class="makeStyles-colType-id"
-            />
-            <col
-              class="makeStyles-colPublished-id"
-            />
-            <col
-              class="makeStyles-colPrice-id"
-            />
-          </colgroup>
-          <thead
-            class="MuiTableHead-root-id"
+          <table
+            class="MuiTable-root-id makeStyles-table-id"
           >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-head-id"
+            <colgroup>
+              <col />
+              <col
+                class="makeStyles-colName-id"
+              />
+              <col
+                class="makeStyles-colType-id"
+              />
+              <col
+                class="makeStyles-colPublished-id"
+              />
+              <col
+                class="makeStyles-colPrice-id"
+              />
+            </colgroup>
+            <thead
+              class="MuiTableHead-root-id"
             >
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
-                scope="col"
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-head-id"
               >
-                <button
-                  class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
-                  disabled=""
-                  tabindex="-1"
-                  type="button"
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
+                  scope="col"
                 >
-                  <input
-                    class="makeStyles-box-id makeStyles-disabled-id"
+                  <button
+                    class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
                     disabled=""
-                    type="checkbox"
-                    value="false"
-                  />
-                </button>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-root-id makeStyles-colName-id"
-                scope="col"
-              >
-                <div
-                  class="makeStyles-labelContainer-id makeStyles-labelContainerActive-id"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <input
+                      class="makeStyles-box-id makeStyles-disabled-id"
+                      disabled=""
+                      type="checkbox"
+                      value="false"
+                    />
+                  </button>
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-root-id makeStyles-colName-id"
+                  scope="col"
                 >
                   <div
-                    class="makeStyles-label-id"
+                    class="makeStyles-labelContainer-id makeStyles-labelContainerActive-id"
                   >
-                    <span
-                      class="makeStyles-colNameHeader-id"
+                    <div
+                      class="makeStyles-label-id"
                     >
-                      Name
-                    </span>
-                  </div>
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id makeStyles-arrow-id makeStyles-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 makeStyles-root-id makeStyles-colType-id"
-                scope="col"
-              >
-                <div
-                  class="makeStyles-labelContainer-id"
-                >
-                  <div
-                    class="makeStyles-label-id"
-                  >
-                    Type
-                  </div>
-                </div>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-root-id makeStyles-colPublished-id"
-                scope="col"
-              >
-                <div
-                  class="makeStyles-labelContainer-id"
-                >
-                  <div
-                    class="makeStyles-label-id"
-                  >
-                    Published
-                  </div>
-                </div>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-root-id makeStyles-colPrice-id"
-                scope="col"
-              >
-                <div
-                  class="makeStyles-labelContainer-id makeStyles-labelContainerRight-id"
-                >
-                  <div
-                    class="makeStyles-label-id"
-                  >
-                    Price
-                  </div>
-                </div>
-              </th>
-            </tr>
-          </thead>
-          <tfoot
-            class="MuiTableFooter-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-footer-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
-                colspan="5"
-              >
-                <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
-                >
-                  <div
-                    class="makeStyles-spacer-id"
-                  >
-                    <div>
                       <span
-                        class="RowNumberSelect-label-id"
+                        class="makeStyles-colNameHeader-id"
                       >
-                        No of Rows:
+                        Name
                       </span>
-                      <div
-                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
-                      >
-                        <div
-                          aria-haspopup="listbox"
-                          aria-labelledby=" "
-                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-id"
-                          role="button"
-                          tabindex="0"
-                        >
-                          20
-                        </div>
-                        <input
-                          type="hidden"
-                          value="20"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
-                          focusable="false"
-                          role="presentation"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M7 10l5 5 5-5z"
-                          />
-                        </svg>
-                      </div>
                     </div>
-                  </div>
-                  <div
-                    class="makeStyles-root-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                      data-tc="button-pagination-back"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          role="presentation"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M14 7l-5 5 5 5V7z"
-                          />
-                          <path
-                            d="M24 0v24H0V0h24z"
-                            fill="none"
-                          />
-                        </svg>
-                      </span>
-                    </button>
-                    <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                      data-tc="button-pagination-next"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          role="presentation"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M10 17l5-5-5-5v10z"
-                          />
-                          <path
-                            d="M0 24V0h24v24H0z"
-                            fill="none"
-                          />
-                        </svg>
-                      </span>
-                    </button>
-                  </div>
-                </div>
-              </td>
-            </tr>
-          </tfoot>
-          <tbody
-            class="MuiTableBody-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id makeStyles-link-id"
-              data-tc="id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
-                  disabled=""
-                  tabindex="-1"
-                  type="button"
-                >
-                  <input
-                    class="makeStyles-box-id makeStyles-disabled-id"
-                    disabled=""
-                    type="checkbox"
-                    value="false"
-                  />
-                </button>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
-                data-tc="name"
-              >
-                <div
-                  class="makeStyles-content-id"
-                >
-                  <div
-                    class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id MuiAvatar-colorDefault-id"
-                  >
                     <svg
                       aria-hidden="true"
-                      class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
+                      class="MuiSvgIcon-root-id makeStyles-arrow-id makeStyles-arrowUp-id"
                       focusable="false"
                       role="presentation"
                       viewBox="0 0 24 24"
                     >
+                      <rect
+                        fill="transparent"
+                        height="24"
+                        width="24"
+                      />
                       <path
-                        d="M19 8l-4 4h3c0 3.31-2.69 6-6 6-1.01 0-1.97-.25-2.8-.7l-1.46 1.46C8.97 19.54 10.43 20 12 20c4.42 0 8-3.58 8-8h3l-4-4zM6 12c0-3.31 2.69-6 6-6 1.01 0 1.97.25 2.8.7l1.46-1.46C15.03 4.46 13.57 4 12 4c-4.42 0-8 3.58-8 8H1l4 4 4-4H6z"
+                        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 makeStyles-root-id makeStyles-colType-id"
+                  scope="col"
+                >
                   <div
-                    class="makeStyles-children-id"
+                    class="makeStyles-labelContainer-id"
                   >
-                    <span
-                      class="makeStyles-skeleton-id"
+                    <div
+                      class="makeStyles-label-id"
                     >
-                      ‌
-                    </span>
+                      Type
+                    </div>
                   </div>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
-                data-tc="product-type"
-              >
-                <span
-                  class="makeStyles-skeleton-id"
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-root-id makeStyles-colPublished-id"
+                  scope="col"
                 >
-                  ‌
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
-                data-tc="isPublished"
-              >
-                <span
-                  class="makeStyles-skeleton-id"
+                  <div
+                    class="makeStyles-labelContainer-id"
+                  >
+                    <div
+                      class="makeStyles-label-id"
+                    >
+                      Published
+                    </div>
+                  </div>
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-root-id makeStyles-colPrice-id"
+                  scope="col"
                 >
-                  ‌
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                  <div
+                    class="makeStyles-labelContainer-id makeStyles-labelContainerRight-id"
+                  >
+                    <div
+                      class="makeStyles-label-id"
+                    >
+                      Price
+                    </div>
+                  </div>
+                </th>
+              </tr>
+            </thead>
+            <tfoot
+              class="MuiTableFooter-root-id"
+            >
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-footer-id"
               >
-                <span
-                  class="makeStyles-skeleton-id"
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                  colspan="5"
                 >
-                  ‌
-                </span>
-              </td>
-            </tr>
-          </tbody>
-        </table>
+                  <div
+                    class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+                  >
+                    <div
+                      class="makeStyles-spacer-id"
+                    >
+                      <div>
+                        <span
+                          class="RowNumberSelect-label-id"
+                        >
+                          No of Rows:
+                        </span>
+                        <div
+                          class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
+                        >
+                          <div
+                            aria-haspopup="listbox"
+                            aria-labelledby=" "
+                            class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-id"
+                            role="button"
+                            tabindex="0"
+                          >
+                            20
+                          </div>
+                          <input
+                            type="hidden"
+                            value="20"
+                          />
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id MuiSelect-icon-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M7 10l5 5 5-5z"
+                            />
+                          </svg>
+                        </div>
+                      </div>
+                    </div>
+                    <div
+                      class="makeStyles-root-id"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                        data-tc="button-pagination-back"
+                        disabled=""
+                        tabindex="-1"
+                        type="button"
+                      >
+                        <span
+                          class="MuiIconButton-label-id"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M14 7l-5 5 5 5V7z"
+                            />
+                            <path
+                              d="M24 0v24H0V0h24z"
+                              fill="none"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                      <button
+                        class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                        data-tc="button-pagination-next"
+                        disabled=""
+                        tabindex="-1"
+                        type="button"
+                      >
+                        <span
+                          class="MuiIconButton-label-id"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M10 17l5-5-5-5v10z"
+                            />
+                            <path
+                              d="M0 24V0h24v24H0z"
+                              fill="none"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </div>
+                  </div>
+                </td>
+              </tr>
+            </tfoot>
+            <tbody
+              class="MuiTableBody-root-id"
+            >
+              <tr
+                class="MuiTableRow-root-id makeStyles-link-id"
+                data-tc="id"
+              >
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                    disabled=""
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <input
+                      class="makeStyles-box-id makeStyles-disabled-id"
+                      disabled=""
+                      type="checkbox"
+                      value="false"
+                    />
+                  </button>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                  data-tc="name"
+                >
+                  <div
+                    class="makeStyles-content-id"
+                  >
+                    <div
+                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id MuiAvatar-colorDefault-id"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
+                        focusable="false"
+                        role="presentation"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M19 8l-4 4h3c0 3.31-2.69 6-6 6-1.01 0-1.97-.25-2.8-.7l-1.46 1.46C8.97 19.54 10.43 20 12 20c4.42 0 8-3.58 8-8h3l-4-4zM6 12c0-3.31 2.69-6 6-6 1.01 0 1.97.25 2.8.7l1.46-1.46C15.03 4.46 13.57 4 12 4c-4.42 0-8 3.58-8 8H1l4 4 4-4H6z"
+                        />
+                      </svg>
+                    </div>
+                    <div
+                      class="makeStyles-children-id"
+                    >
+                      <span
+                        class="makeStyles-skeleton-id"
+                      >
+                        ‌
+                      </span>
+                    </div>
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
+                  data-tc="product-type"
+                >
+                  <span
+                    class="makeStyles-skeleton-id"
+                  >
+                    ‌
+                  </span>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
+                  data-tc="isPublished"
+                >
+                  <span
+                    class="makeStyles-skeleton-id"
+                  >
+                    ‌
+                  </span>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                >
+                  <span
+                    class="makeStyles-skeleton-id"
+                  >
+                    ‌
+                  </span>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
       </div>
     </div>
   </div>
@@ -104018,10 +104582,10 @@ exports[`Storyshots Views / Products / Product list no data 1`] = `
   style="padding:24px"
 >
   <div
-    class="makeStyles-root-id"
+    class="Container-root-id"
   >
     <div
-      class="makeStyles-root-id"
+      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
         class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -104029,7 +104593,7 @@ exports[`Storyshots Views / Products / Product list no data 1`] = `
         Products
       </div>
       <div
-        class="makeStyles-action-id"
+        class="ExtendedPageHeader-action-id"
       >
         <div
           class="makeStyles-root-id"
@@ -104179,239 +104743,243 @@ exports[`Storyshots Views / Products / Product list no data 1`] = `
       <div
         class="makeStyles-tableContainer-id"
       >
-        <table
-          class="MuiTable-root-id makeStyles-table-id"
+        <div
+          class="ResponsiveTable-root-id"
         >
-          <colgroup>
-            <col />
-            <col
-              class="makeStyles-colName-id"
-            />
-            <col
-              class="makeStyles-colType-id"
-            />
-            <col
-              class="makeStyles-colPublished-id"
-            />
-            <col
-              class="makeStyles-colPrice-id"
-            />
-          </colgroup>
-          <thead
-            class="MuiTableHead-root-id"
+          <table
+            class="MuiTable-root-id makeStyles-table-id"
           >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-head-id"
+            <colgroup>
+              <col />
+              <col
+                class="makeStyles-colName-id"
+              />
+              <col
+                class="makeStyles-colType-id"
+              />
+              <col
+                class="makeStyles-colPublished-id"
+              />
+              <col
+                class="makeStyles-colPrice-id"
+              />
+            </colgroup>
+            <thead
+              class="MuiTableHead-root-id"
             >
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-root-id makeStyles-colName-id"
-                scope="col"
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-head-id"
               >
-                <div
-                  class="makeStyles-labelContainer-id makeStyles-labelContainerActive-id"
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-root-id makeStyles-colName-id"
+                  scope="col"
                 >
                   <div
-                    class="makeStyles-label-id"
+                    class="makeStyles-labelContainer-id makeStyles-labelContainerActive-id"
                   >
-                    <span
-                      class="makeStyles-colNameHeader-id"
+                    <div
+                      class="makeStyles-label-id"
                     >
-                      Name
-                    </span>
-                  </div>
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id makeStyles-arrow-id makeStyles-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 makeStyles-root-id makeStyles-colType-id"
-                scope="col"
-              >
-                <div
-                  class="makeStyles-labelContainer-id"
-                >
-                  <div
-                    class="makeStyles-label-id"
-                  >
-                    Type
-                  </div>
-                </div>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-root-id makeStyles-colPublished-id"
-                scope="col"
-              >
-                <div
-                  class="makeStyles-labelContainer-id"
-                >
-                  <div
-                    class="makeStyles-label-id"
-                  >
-                    Published
-                  </div>
-                </div>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-root-id makeStyles-colPrice-id"
-                scope="col"
-              >
-                <div
-                  class="makeStyles-labelContainer-id makeStyles-labelContainerRight-id"
-                >
-                  <div
-                    class="makeStyles-label-id"
-                  >
-                    Price
-                  </div>
-                </div>
-              </th>
-            </tr>
-          </thead>
-          <tfoot
-            class="MuiTableFooter-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-footer-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
-                colspan="5"
-              >
-                <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
-                >
-                  <div
-                    class="makeStyles-spacer-id"
-                  >
-                    <div>
                       <span
-                        class="RowNumberSelect-label-id"
+                        class="makeStyles-colNameHeader-id"
                       >
-                        No of Rows:
+                        Name
                       </span>
-                      <div
-                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
-                      >
-                        <div
-                          aria-haspopup="listbox"
-                          aria-labelledby=" "
-                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-id"
-                          role="button"
-                          tabindex="0"
-                        >
-                          20
-                        </div>
-                        <input
-                          type="hidden"
-                          value="20"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
-                          focusable="false"
-                          role="presentation"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M7 10l5 5 5-5z"
-                          />
-                        </svg>
-                      </div>
+                    </div>
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id makeStyles-arrow-id makeStyles-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 makeStyles-root-id makeStyles-colType-id"
+                  scope="col"
+                >
+                  <div
+                    class="makeStyles-labelContainer-id"
+                  >
+                    <div
+                      class="makeStyles-label-id"
+                    >
+                      Type
                     </div>
                   </div>
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-root-id makeStyles-colPublished-id"
+                  scope="col"
+                >
                   <div
-                    class="makeStyles-root-id"
+                    class="makeStyles-labelContainer-id"
                   >
-                    <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                      data-tc="button-pagination-back"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
+                    <div
+                      class="makeStyles-label-id"
                     >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          role="presentation"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M14 7l-5 5 5 5V7z"
-                          />
-                          <path
-                            d="M24 0v24H0V0h24z"
-                            fill="none"
-                          />
-                        </svg>
-                      </span>
-                    </button>
-                    <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
-                      data-tc="button-pagination-next"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          role="presentation"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M10 17l5-5-5-5v10z"
-                          />
-                          <path
-                            d="M0 24V0h24v24H0z"
-                            fill="none"
-                          />
-                        </svg>
-                      </span>
-                    </button>
+                      Published
+                    </div>
                   </div>
-                </div>
-              </td>
-            </tr>
-          </tfoot>
-          <tbody
-            class="MuiTableBody-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id"
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-root-id makeStyles-colPrice-id"
+                  scope="col"
+                >
+                  <div
+                    class="makeStyles-labelContainer-id makeStyles-labelContainerRight-id"
+                  >
+                    <div
+                      class="makeStyles-label-id"
+                    >
+                      Price
+                    </div>
+                  </div>
+                </th>
+              </tr>
+            </thead>
+            <tfoot
+              class="MuiTableFooter-root-id"
             >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-                colspan="5"
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-footer-id"
               >
-                No products found
-              </td>
-            </tr>
-          </tbody>
-        </table>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                  colspan="5"
+                >
+                  <div
+                    class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+                  >
+                    <div
+                      class="makeStyles-spacer-id"
+                    >
+                      <div>
+                        <span
+                          class="RowNumberSelect-label-id"
+                        >
+                          No of Rows:
+                        </span>
+                        <div
+                          class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
+                        >
+                          <div
+                            aria-haspopup="listbox"
+                            aria-labelledby=" "
+                            class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-id"
+                            role="button"
+                            tabindex="0"
+                          >
+                            20
+                          </div>
+                          <input
+                            type="hidden"
+                            value="20"
+                          />
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id MuiSelect-icon-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M7 10l5 5 5-5z"
+                            />
+                          </svg>
+                        </div>
+                      </div>
+                    </div>
+                    <div
+                      class="makeStyles-root-id"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                        data-tc="button-pagination-back"
+                        disabled=""
+                        tabindex="-1"
+                        type="button"
+                      >
+                        <span
+                          class="MuiIconButton-label-id"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M14 7l-5 5 5 5V7z"
+                            />
+                            <path
+                              d="M24 0v24H0V0h24z"
+                              fill="none"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                      <button
+                        class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                        data-tc="button-pagination-next"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiIconButton-label-id"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M10 17l5-5-5-5v10z"
+                            />
+                            <path
+                              d="M0 24V0h24v24H0z"
+                              fill="none"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </div>
+                  </div>
+                </td>
+              </tr>
+            </tfoot>
+            <tbody
+              class="MuiTableBody-root-id"
+            >
+              <tr
+                class="MuiTableRow-root-id"
+              >
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                  colspan="5"
+                >
+                  No products found
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
       </div>
     </div>
   </div>
@@ -104423,10 +104991,10 @@ exports[`Storyshots Views / Products / Product list with custom filters 1`] = `
   style="padding:24px"
 >
   <div
-    class="makeStyles-root-id"
+    class="Container-root-id"
   >
     <div
-      class="makeStyles-root-id"
+      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
         class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -104434,7 +105002,7 @@ exports[`Storyshots Views / Products / Product list with custom filters 1`] = `
         Products
       </div>
       <div
-        class="makeStyles-action-id"
+        class="ExtendedPageHeader-action-id"
       >
         <div
           class="makeStyles-root-id"
@@ -104979,1545 +105547,1549 @@ exports[`Storyshots Views / Products / Product list with custom filters 1`] = `
       <div
         class="makeStyles-tableContainer-id"
       >
-        <table
-          class="MuiTable-root-id makeStyles-table-id"
+        <div
+          class="ResponsiveTable-root-id"
         >
-          <colgroup>
-            <col />
-            <col
-              class="makeStyles-colName-id"
-            />
-            <col
-              class="makeStyles-colType-id"
-            />
-            <col
-              class="makeStyles-colPublished-id"
-            />
-            <col
-              class="makeStyles-colPrice-id"
-            />
-          </colgroup>
-          <thead
-            class="MuiTableHead-root-id"
+          <table
+            class="MuiTable-root-id makeStyles-table-id"
           >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-head-id"
+            <colgroup>
+              <col />
+              <col
+                class="makeStyles-colName-id"
+              />
+              <col
+                class="makeStyles-colType-id"
+              />
+              <col
+                class="makeStyles-colPublished-id"
+              />
+              <col
+                class="makeStyles-colPrice-id"
+              />
+            </colgroup>
+            <thead
+              class="MuiTableHead-root-id"
             >
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
-                scope="col"
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-head-id"
               >
-                <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
-                  tabindex="0"
-                  type="button"
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
+                  scope="col"
                 >
-                  <input
-                    class="makeStyles-box-id"
-                    type="checkbox"
-                    value="false"
-                  />
-                </button>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-root-id makeStyles-colName-id"
-                scope="col"
-              >
-                <div
-                  class="makeStyles-labelContainer-id makeStyles-labelContainerActive-id"
+                  <button
+                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <input
+                      class="makeStyles-box-id"
+                      type="checkbox"
+                      value="false"
+                    />
+                  </button>
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-root-id makeStyles-colName-id"
+                  scope="col"
                 >
                   <div
-                    class="makeStyles-label-id"
+                    class="makeStyles-labelContainer-id makeStyles-labelContainerActive-id"
                   >
-                    <span
-                      class="makeStyles-colNameHeader-id"
+                    <div
+                      class="makeStyles-label-id"
                     >
-                      Name
-                    </span>
+                      <span
+                        class="makeStyles-colNameHeader-id"
+                      >
+                        Name
+                      </span>
+                    </div>
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id makeStyles-arrow-id makeStyles-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>
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id makeStyles-arrow-id makeStyles-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 makeStyles-root-id makeStyles-colType-id"
-                scope="col"
-              >
-                <div
-                  class="makeStyles-labelContainer-id"
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-root-id makeStyles-colType-id"
+                  scope="col"
                 >
                   <div
-                    class="makeStyles-label-id"
+                    class="makeStyles-labelContainer-id"
                   >
-                    Type
+                    <div
+                      class="makeStyles-label-id"
+                    >
+                      Type
+                    </div>
                   </div>
-                </div>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-root-id makeStyles-colPublished-id"
-                scope="col"
-              >
-                <div
-                  class="makeStyles-labelContainer-id"
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-root-id makeStyles-colPublished-id"
+                  scope="col"
                 >
                   <div
-                    class="makeStyles-label-id"
+                    class="makeStyles-labelContainer-id"
+                  >
+                    <div
+                      class="makeStyles-label-id"
+                    >
+                      Published
+                    </div>
+                  </div>
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-root-id makeStyles-colPrice-id"
+                  scope="col"
+                >
+                  <div
+                    class="makeStyles-labelContainer-id makeStyles-labelContainerRight-id"
+                  >
+                    <div
+                      class="makeStyles-label-id"
+                    >
+                      Price
+                    </div>
+                  </div>
+                </th>
+              </tr>
+            </thead>
+            <tfoot
+              class="MuiTableFooter-root-id"
+            >
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-footer-id"
+              >
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                  colspan="5"
+                >
+                  <div
+                    class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+                  >
+                    <div
+                      class="makeStyles-spacer-id"
+                    >
+                      <div>
+                        <span
+                          class="RowNumberSelect-label-id"
+                        >
+                          No of Rows:
+                        </span>
+                        <div
+                          class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
+                        >
+                          <div
+                            aria-haspopup="listbox"
+                            aria-labelledby=" "
+                            class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-id"
+                            role="button"
+                            tabindex="0"
+                          >
+                            20
+                          </div>
+                          <input
+                            type="hidden"
+                            value="20"
+                          />
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id MuiSelect-icon-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M7 10l5 5 5-5z"
+                            />
+                          </svg>
+                        </div>
+                      </div>
+                    </div>
+                    <div
+                      class="makeStyles-root-id"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                        data-tc="button-pagination-back"
+                        disabled=""
+                        tabindex="-1"
+                        type="button"
+                      >
+                        <span
+                          class="MuiIconButton-label-id"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M14 7l-5 5 5 5V7z"
+                            />
+                            <path
+                              d="M24 0v24H0V0h24z"
+                              fill="none"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                      <button
+                        class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                        data-tc="button-pagination-next"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiIconButton-label-id"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M10 17l5-5-5-5v10z"
+                            />
+                            <path
+                              d="M0 24V0h24v24H0z"
+                              fill="none"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </div>
+                  </div>
+                </td>
+              </tr>
+            </tfoot>
+            <tbody
+              class="MuiTableBody-root-id"
+            >
+              <tr
+                class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                data-tc="id"
+                data-tc-id="UHJvZHVjdDo2MQ=="
+              >
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <input
+                      class="makeStyles-box-id"
+                      type="checkbox"
+                      value="false"
+                    />
+                  </button>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                  data-tc="name"
+                >
+                  <div
+                    class="makeStyles-content-id"
+                  >
+                    <div
+                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                    >
+                      <img
+                        class="MuiAvatar-img-id"
+                        src="placeholder255x255.png"
+                      />
+                    </div>
+                    <div
+                      class="makeStyles-children-id"
+                    >
+                      Nebula Night Sky Paint
+                    </div>
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
+                  data-tc="product-type"
+                >
+                  Paint
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
+                  data-tc="isPublished"
+                  data-tc-is-published="true"
+                >
+                  <div
+                    class="makeStyles-root-id undefined makeStyles-successDot-id"
                   >
                     Published
                   </div>
-                </div>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-root-id makeStyles-colPrice-id"
-                scope="col"
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                >
+                  $15.00
+                </td>
+              </tr>
+              <tr
+                class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                data-tc="id"
+                data-tc-id="UHJvZHVjdDo2NA=="
               >
-                <div
-                  class="makeStyles-labelContainer-id makeStyles-labelContainerRight-id"
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <input
+                      class="makeStyles-box-id"
+                      type="checkbox"
+                      value="false"
+                    />
+                  </button>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                  data-tc="name"
                 >
                   <div
-                    class="makeStyles-label-id"
+                    class="makeStyles-content-id"
                   >
-                    Price
-                  </div>
-                </div>
-              </th>
-            </tr>
-          </thead>
-          <tfoot
-            class="MuiTableFooter-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-footer-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
-                colspan="5"
-              >
-                <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
-                >
-                  <div
-                    class="makeStyles-spacer-id"
-                  >
-                    <div>
-                      <span
-                        class="RowNumberSelect-label-id"
-                      >
-                        No of Rows:
-                      </span>
-                      <div
-                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
-                      >
-                        <div
-                          aria-haspopup="listbox"
-                          aria-labelledby=" "
-                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-id"
-                          role="button"
-                          tabindex="0"
-                        >
-                          20
-                        </div>
-                        <input
-                          type="hidden"
-                          value="20"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
-                          focusable="false"
-                          role="presentation"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M7 10l5 5 5-5z"
-                          />
-                        </svg>
-                      </div>
+                    <div
+                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                    >
+                      <img
+                        class="MuiAvatar-img-id"
+                        src="placeholder255x255.png"
+                      />
+                    </div>
+                    <div
+                      class="makeStyles-children-id"
+                    >
+                      Light Speed Yellow Paint
                     </div>
                   </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
+                  data-tc="product-type"
+                >
+                  Paint
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
+                  data-tc="isPublished"
+                  data-tc-is-published="true"
+                >
                   <div
-                    class="makeStyles-root-id"
+                    class="makeStyles-root-id undefined makeStyles-successDot-id"
                   >
-                    <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                      data-tc="button-pagination-back"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
+                    Published
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                >
+                  $15.00
+                </td>
+              </tr>
+              <tr
+                class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                data-tc="id"
+                data-tc-id="UHJvZHVjdDo2NQ=="
+              >
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <input
+                      class="makeStyles-box-id"
+                      type="checkbox"
+                      value="false"
+                    />
+                  </button>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                  data-tc="name"
+                >
+                  <div
+                    class="makeStyles-content-id"
+                  >
+                    <div
+                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
                     >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          role="presentation"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M14 7l-5 5 5 5V7z"
-                          />
-                          <path
-                            d="M24 0v24H0V0h24z"
-                            fill="none"
-                          />
-                        </svg>
-                      </span>
-                    </button>
-                    <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
-                      data-tc="button-pagination-next"
-                      tabindex="0"
-                      type="button"
+                      <img
+                        class="MuiAvatar-img-id"
+                        src="placeholder255x255.png"
+                      />
+                    </div>
+                    <div
+                      class="makeStyles-children-id"
                     >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          role="presentation"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M10 17l5-5-5-5v10z"
-                          />
-                          <path
-                            d="M0 24V0h24v24H0z"
-                            fill="none"
-                          />
-                        </svg>
-                      </span>
-                    </button>
+                      Hyperspace Turquoise Paint
+                    </div>
                   </div>
-                </div>
-              </td>
-            </tr>
-          </tfoot>
-          <tbody
-            class="MuiTableBody-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-              data-tc="id"
-              data-tc-id="UHJvZHVjdDo2MQ=="
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
-                  tabindex="0"
-                  type="button"
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
+                  data-tc="product-type"
                 >
-                  <input
-                    class="makeStyles-box-id"
-                    type="checkbox"
-                    value="false"
-                  />
-                </button>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
-                data-tc="name"
-              >
-                <div
-                  class="makeStyles-content-id"
+                  Paint
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
+                  data-tc="isPublished"
+                  data-tc-is-published="true"
                 >
                   <div
-                    class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                    class="makeStyles-root-id undefined makeStyles-successDot-id"
                   >
-                    <img
-                      class="MuiAvatar-img-id"
-                      src="placeholder255x255.png"
+                    Published
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                >
+                  $15.00
+                </td>
+              </tr>
+              <tr
+                class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                data-tc="id"
+                data-tc-id="UHJvZHVjdDo3NQ=="
+              >
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <input
+                      class="makeStyles-box-id"
+                      type="checkbox"
+                      value="false"
                     />
-                  </div>
-                  <div
-                    class="makeStyles-children-id"
-                  >
-                    Nebula Night Sky Paint
-                  </div>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
-                data-tc="product-type"
-              >
-                Paint
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
-                data-tc="isPublished"
-                data-tc-is-published="true"
-              >
-                <div
-                  class="makeStyles-root-id undefined makeStyles-successDot-id"
-                >
-                  Published
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
-              >
-                $15.00
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-              data-tc="id"
-              data-tc-id="UHJvZHVjdDo2NA=="
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <input
-                    class="makeStyles-box-id"
-                    type="checkbox"
-                    value="false"
-                  />
-                </button>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
-                data-tc="name"
-              >
-                <div
-                  class="makeStyles-content-id"
+                  </button>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                  data-tc="name"
                 >
                   <div
-                    class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                    class="makeStyles-content-id"
                   >
-                    <img
-                      class="MuiAvatar-img-id"
-                      src="placeholder255x255.png"
+                    <div
+                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                    >
+                      <img
+                        class="MuiAvatar-img-id"
+                        src="placeholder255x255.png"
+                      />
+                    </div>
+                    <div
+                      class="makeStyles-children-id"
+                    >
+                      Pineapple Juice
+                    </div>
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
+                  data-tc="product-type"
+                >
+                  Juice
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
+                  data-tc="isPublished"
+                  data-tc-is-published="true"
+                >
+                  <div
+                    class="makeStyles-root-id undefined makeStyles-successDot-id"
+                  >
+                    Published
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                >
+                  $3.00
+                </td>
+              </tr>
+              <tr
+                class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                data-tc="id"
+                data-tc-id="UHJvZHVjdDo3Ng=="
+              >
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <input
+                      class="makeStyles-box-id"
+                      type="checkbox"
+                      value="false"
                     />
-                  </div>
-                  <div
-                    class="makeStyles-children-id"
-                  >
-                    Light Speed Yellow Paint
-                  </div>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
-                data-tc="product-type"
-              >
-                Paint
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
-                data-tc="isPublished"
-                data-tc-is-published="true"
-              >
-                <div
-                  class="makeStyles-root-id undefined makeStyles-successDot-id"
-                >
-                  Published
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
-              >
-                $15.00
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-              data-tc="id"
-              data-tc-id="UHJvZHVjdDo2NQ=="
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <input
-                    class="makeStyles-box-id"
-                    type="checkbox"
-                    value="false"
-                  />
-                </button>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
-                data-tc="name"
-              >
-                <div
-                  class="makeStyles-content-id"
+                  </button>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                  data-tc="name"
                 >
                   <div
-                    class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                    class="makeStyles-content-id"
                   >
-                    <img
-                      class="MuiAvatar-img-id"
-                      src="placeholder255x255.png"
+                    <div
+                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                    >
+                      <img
+                        class="MuiAvatar-img-id"
+                        src="placeholder255x255.png"
+                      />
+                    </div>
+                    <div
+                      class="makeStyles-children-id"
+                    >
+                      Coconut Juice
+                    </div>
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
+                  data-tc="product-type"
+                >
+                  Juice
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
+                  data-tc="isPublished"
+                  data-tc-is-published="true"
+                >
+                  <div
+                    class="makeStyles-root-id undefined makeStyles-successDot-id"
+                  >
+                    Published
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                >
+                  $3.00
+                </td>
+              </tr>
+              <tr
+                class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                data-tc="id"
+                data-tc-id="UHJvZHVjdDo3Mg=="
+              >
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <input
+                      class="makeStyles-box-id"
+                      type="checkbox"
+                      value="false"
                     />
-                  </div>
-                  <div
-                    class="makeStyles-children-id"
-                  >
-                    Hyperspace Turquoise Paint
-                  </div>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
-                data-tc="product-type"
-              >
-                Paint
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
-                data-tc="isPublished"
-                data-tc-is-published="true"
-              >
-                <div
-                  class="makeStyles-root-id undefined makeStyles-successDot-id"
-                >
-                  Published
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
-              >
-                $15.00
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-              data-tc="id"
-              data-tc-id="UHJvZHVjdDo3NQ=="
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <input
-                    class="makeStyles-box-id"
-                    type="checkbox"
-                    value="false"
-                  />
-                </button>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
-                data-tc="name"
-              >
-                <div
-                  class="makeStyles-content-id"
+                  </button>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                  data-tc="name"
                 >
                   <div
-                    class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                    class="makeStyles-content-id"
                   >
-                    <img
-                      class="MuiAvatar-img-id"
-                      src="placeholder255x255.png"
+                    <div
+                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                    >
+                      <img
+                        class="MuiAvatar-img-id"
+                        src="placeholder255x255.png"
+                      />
+                    </div>
+                    <div
+                      class="makeStyles-children-id"
+                    >
+                      Apple Juice
+                    </div>
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
+                  data-tc="product-type"
+                >
+                  Juice
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
+                  data-tc="isPublished"
+                  data-tc-is-published="true"
+                >
+                  <div
+                    class="makeStyles-root-id undefined makeStyles-successDot-id"
+                  >
+                    Published
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                >
+                  $3.00
+                </td>
+              </tr>
+              <tr
+                class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                data-tc="id"
+                data-tc-id="UHJvZHVjdDo3MQ=="
+              >
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <input
+                      class="makeStyles-box-id"
+                      type="checkbox"
+                      value="false"
                     />
-                  </div>
-                  <div
-                    class="makeStyles-children-id"
-                  >
-                    Pineapple Juice
-                  </div>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
-                data-tc="product-type"
-              >
-                Juice
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
-                data-tc="isPublished"
-                data-tc-is-published="true"
-              >
-                <div
-                  class="makeStyles-root-id undefined makeStyles-successDot-id"
-                >
-                  Published
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
-              >
-                $3.00
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-              data-tc="id"
-              data-tc-id="UHJvZHVjdDo3Ng=="
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <input
-                    class="makeStyles-box-id"
-                    type="checkbox"
-                    value="false"
-                  />
-                </button>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
-                data-tc="name"
-              >
-                <div
-                  class="makeStyles-content-id"
+                  </button>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                  data-tc="name"
                 >
                   <div
-                    class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                    class="makeStyles-content-id"
                   >
-                    <img
-                      class="MuiAvatar-img-id"
-                      src="placeholder255x255.png"
+                    <div
+                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                    >
+                      <img
+                        class="MuiAvatar-img-id"
+                        src="placeholder255x255.png"
+                      />
+                    </div>
+                    <div
+                      class="makeStyles-children-id"
+                    >
+                      Orange Juice
+                    </div>
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
+                  data-tc="product-type"
+                >
+                  Juice
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
+                  data-tc="isPublished"
+                  data-tc-is-published="true"
+                >
+                  <div
+                    class="makeStyles-root-id undefined makeStyles-successDot-id"
+                  >
+                    Published
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                >
+                  $3.00
+                </td>
+              </tr>
+              <tr
+                class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                data-tc="id"
+                data-tc-id="UHJvZHVjdDo3NA=="
+              >
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <input
+                      class="makeStyles-box-id"
+                      type="checkbox"
+                      value="false"
                     />
-                  </div>
-                  <div
-                    class="makeStyles-children-id"
-                  >
-                    Coconut Juice
-                  </div>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
-                data-tc="product-type"
-              >
-                Juice
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
-                data-tc="isPublished"
-                data-tc-is-published="true"
-              >
-                <div
-                  class="makeStyles-root-id undefined makeStyles-successDot-id"
-                >
-                  Published
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
-              >
-                $3.00
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-              data-tc="id"
-              data-tc-id="UHJvZHVjdDo3Mg=="
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <input
-                    class="makeStyles-box-id"
-                    type="checkbox"
-                    value="false"
-                  />
-                </button>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
-                data-tc="name"
-              >
-                <div
-                  class="makeStyles-content-id"
+                  </button>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                  data-tc="name"
                 >
                   <div
-                    class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                    class="makeStyles-content-id"
                   >
-                    <img
-                      class="MuiAvatar-img-id"
-                      src="placeholder255x255.png"
+                    <div
+                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                    >
+                      <img
+                        class="MuiAvatar-img-id"
+                        src="placeholder255x255.png"
+                      />
+                    </div>
+                    <div
+                      class="makeStyles-children-id"
+                    >
+                      Banana Juice
+                    </div>
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
+                  data-tc="product-type"
+                >
+                  Juice
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
+                  data-tc="isPublished"
+                  data-tc-is-published="true"
+                >
+                  <div
+                    class="makeStyles-root-id undefined makeStyles-successDot-id"
+                  >
+                    Published
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                >
+                  $3.00
+                </td>
+              </tr>
+              <tr
+                class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                data-tc="id"
+                data-tc-id="UHJvZHVjdDo3OQ=="
+              >
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <input
+                      class="makeStyles-box-id"
+                      type="checkbox"
+                      value="false"
                     />
-                  </div>
-                  <div
-                    class="makeStyles-children-id"
-                  >
-                    Apple Juice
-                  </div>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
-                data-tc="product-type"
-              >
-                Juice
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
-                data-tc="isPublished"
-                data-tc-is-published="true"
-              >
-                <div
-                  class="makeStyles-root-id undefined makeStyles-successDot-id"
-                >
-                  Published
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
-              >
-                $3.00
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-              data-tc="id"
-              data-tc-id="UHJvZHVjdDo3MQ=="
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <input
-                    class="makeStyles-box-id"
-                    type="checkbox"
-                    value="false"
-                  />
-                </button>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
-                data-tc="name"
-              >
-                <div
-                  class="makeStyles-content-id"
+                  </button>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                  data-tc="name"
                 >
                   <div
-                    class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                    class="makeStyles-content-id"
                   >
-                    <img
-                      class="MuiAvatar-img-id"
-                      src="placeholder255x255.png"
+                    <div
+                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                    >
+                      <img
+                        class="MuiAvatar-img-id"
+                        src="placeholder255x255.png"
+                      />
+                    </div>
+                    <div
+                      class="makeStyles-children-id"
+                    >
+                      Bean Juice
+                    </div>
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
+                  data-tc="product-type"
+                >
+                  Juice
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
+                  data-tc="isPublished"
+                  data-tc-is-published="true"
+                >
+                  <div
+                    class="makeStyles-root-id undefined makeStyles-successDot-id"
+                  >
+                    Published
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                >
+                  $3.00
+                </td>
+              </tr>
+              <tr
+                class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                data-tc="id"
+                data-tc-id="UHJvZHVjdDo3Mw=="
+              >
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <input
+                      class="makeStyles-box-id"
+                      type="checkbox"
+                      value="false"
                     />
-                  </div>
-                  <div
-                    class="makeStyles-children-id"
-                  >
-                    Orange Juice
-                  </div>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
-                data-tc="product-type"
-              >
-                Juice
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
-                data-tc="isPublished"
-                data-tc-is-published="true"
-              >
-                <div
-                  class="makeStyles-root-id undefined makeStyles-successDot-id"
-                >
-                  Published
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
-              >
-                $3.00
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-              data-tc="id"
-              data-tc-id="UHJvZHVjdDo3NA=="
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <input
-                    class="makeStyles-box-id"
-                    type="checkbox"
-                    value="false"
-                  />
-                </button>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
-                data-tc="name"
-              >
-                <div
-                  class="makeStyles-content-id"
+                  </button>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                  data-tc="name"
                 >
                   <div
-                    class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                    class="makeStyles-content-id"
                   >
-                    <img
-                      class="MuiAvatar-img-id"
-                      src="placeholder255x255.png"
+                    <div
+                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                    >
+                      <img
+                        class="MuiAvatar-img-id"
+                        src="placeholder255x255.png"
+                      />
+                    </div>
+                    <div
+                      class="makeStyles-children-id"
+                    >
+                      Carrot Juice
+                    </div>
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
+                  data-tc="product-type"
+                >
+                  Juice
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
+                  data-tc="isPublished"
+                  data-tc-is-published="true"
+                >
+                  <div
+                    class="makeStyles-root-id undefined makeStyles-successDot-id"
+                  >
+                    Published
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                >
+                  $3.00
+                </td>
+              </tr>
+              <tr
+                class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                data-tc="id"
+                data-tc-id="UHJvZHVjdDo3OA=="
+              >
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <input
+                      class="makeStyles-box-id"
+                      type="checkbox"
+                      value="false"
                     />
-                  </div>
-                  <div
-                    class="makeStyles-children-id"
-                  >
-                    Banana Juice
-                  </div>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
-                data-tc="product-type"
-              >
-                Juice
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
-                data-tc="isPublished"
-                data-tc-is-published="true"
-              >
-                <div
-                  class="makeStyles-root-id undefined makeStyles-successDot-id"
-                >
-                  Published
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
-              >
-                $3.00
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-              data-tc="id"
-              data-tc-id="UHJvZHVjdDo3OQ=="
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <input
-                    class="makeStyles-box-id"
-                    type="checkbox"
-                    value="false"
-                  />
-                </button>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
-                data-tc="name"
-              >
-                <div
-                  class="makeStyles-content-id"
+                  </button>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                  data-tc="name"
                 >
                   <div
-                    class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                    class="makeStyles-content-id"
                   >
-                    <img
-                      class="MuiAvatar-img-id"
-                      src="placeholder255x255.png"
+                    <div
+                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                    >
+                      <img
+                        class="MuiAvatar-img-id"
+                        src="placeholder255x255.png"
+                      />
+                    </div>
+                    <div
+                      class="makeStyles-children-id"
+                    >
+                      Green Juice
+                    </div>
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
+                  data-tc="product-type"
+                >
+                  Juice
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
+                  data-tc="isPublished"
+                  data-tc-is-published="true"
+                >
+                  <div
+                    class="makeStyles-root-id undefined makeStyles-successDot-id"
+                  >
+                    Published
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                >
+                  $3.00
+                </td>
+              </tr>
+              <tr
+                class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                data-tc="id"
+                data-tc-id="UHJvZHVjdDo4OQ=="
+              >
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <input
+                      class="makeStyles-box-id"
+                      type="checkbox"
+                      value="false"
                     />
-                  </div>
-                  <div
-                    class="makeStyles-children-id"
-                  >
-                    Bean Juice
-                  </div>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
-                data-tc="product-type"
-              >
-                Juice
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
-                data-tc="isPublished"
-                data-tc-is-published="true"
-              >
-                <div
-                  class="makeStyles-root-id undefined makeStyles-successDot-id"
-                >
-                  Published
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
-              >
-                $3.00
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-              data-tc="id"
-              data-tc-id="UHJvZHVjdDo3Mw=="
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <input
-                    class="makeStyles-box-id"
-                    type="checkbox"
-                    value="false"
-                  />
-                </button>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
-                data-tc="name"
-              >
-                <div
-                  class="makeStyles-content-id"
+                  </button>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                  data-tc="name"
                 >
                   <div
-                    class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                    class="makeStyles-content-id"
                   >
-                    <img
-                      class="MuiAvatar-img-id"
-                      src="placeholder255x255.png"
+                    <div
+                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                    >
+                      <img
+                        class="MuiAvatar-img-id"
+                        src="placeholder255x255.png"
+                      />
+                    </div>
+                    <div
+                      class="makeStyles-children-id"
+                    >
+                      Code Division T-shirt
+                    </div>
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
+                  data-tc="product-type"
+                >
+                  Top (clothing)
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
+                  data-tc="isPublished"
+                  data-tc-is-published="true"
+                >
+                  <div
+                    class="makeStyles-root-id undefined makeStyles-successDot-id"
+                  >
+                    Published
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                >
+                  $30.00
+                </td>
+              </tr>
+              <tr
+                class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                data-tc="id"
+                data-tc-id="UHJvZHVjdDoxMDc="
+              >
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <input
+                      class="makeStyles-box-id"
+                      type="checkbox"
+                      value="false"
                     />
-                  </div>
-                  <div
-                    class="makeStyles-children-id"
-                  >
-                    Carrot Juice
-                  </div>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
-                data-tc="product-type"
-              >
-                Juice
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
-                data-tc="isPublished"
-                data-tc-is-published="true"
-              >
-                <div
-                  class="makeStyles-root-id undefined makeStyles-successDot-id"
-                >
-                  Published
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
-              >
-                $3.00
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-              data-tc="id"
-              data-tc-id="UHJvZHVjdDo3OA=="
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <input
-                    class="makeStyles-box-id"
-                    type="checkbox"
-                    value="false"
-                  />
-                </button>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
-                data-tc="name"
-              >
-                <div
-                  class="makeStyles-content-id"
+                  </button>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                  data-tc="name"
                 >
                   <div
-                    class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                    class="makeStyles-content-id"
                   >
-                    <img
-                      class="MuiAvatar-img-id"
-                      src="placeholder255x255.png"
+                    <div
+                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                    >
+                      <img
+                        class="MuiAvatar-img-id"
+                        src="placeholder255x255.png"
+                      />
+                    </div>
+                    <div
+                      class="makeStyles-children-id"
+                    >
+                      Polo Shirt
+                    </div>
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
+                  data-tc="product-type"
+                >
+                  Top (clothing)
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
+                  data-tc="isPublished"
+                  data-tc-is-published="true"
+                >
+                  <div
+                    class="makeStyles-root-id undefined makeStyles-successDot-id"
+                  >
+                    Published
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                >
+                  $30.00
+                </td>
+              </tr>
+              <tr
+                class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                data-tc="id"
+                data-tc-id="UHJvZHVjdDoxMDg="
+              >
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <input
+                      class="makeStyles-box-id"
+                      type="checkbox"
+                      value="false"
                     />
-                  </div>
-                  <div
-                    class="makeStyles-children-id"
-                  >
-                    Green Juice
-                  </div>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
-                data-tc="product-type"
-              >
-                Juice
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
-                data-tc="isPublished"
-                data-tc-is-published="true"
-              >
-                <div
-                  class="makeStyles-root-id undefined makeStyles-successDot-id"
-                >
-                  Published
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
-              >
-                $3.00
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-              data-tc="id"
-              data-tc-id="UHJvZHVjdDo4OQ=="
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <input
-                    class="makeStyles-box-id"
-                    type="checkbox"
-                    value="false"
-                  />
-                </button>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
-                data-tc="name"
-              >
-                <div
-                  class="makeStyles-content-id"
+                  </button>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                  data-tc="name"
                 >
                   <div
-                    class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                    class="makeStyles-content-id"
                   >
-                    <img
-                      class="MuiAvatar-img-id"
-                      src="placeholder255x255.png"
+                    <div
+                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                    >
+                      <img
+                        class="MuiAvatar-img-id"
+                        src="placeholder255x255.png"
+                      />
+                    </div>
+                    <div
+                      class="makeStyles-children-id"
+                    >
+                      Polo Shirt
+                    </div>
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
+                  data-tc="product-type"
+                >
+                  Top (clothing)
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
+                  data-tc="isPublished"
+                  data-tc-is-published="true"
+                >
+                  <div
+                    class="makeStyles-root-id undefined makeStyles-successDot-id"
+                  >
+                    Published
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                >
+                  $30.00
+                </td>
+              </tr>
+              <tr
+                class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                data-tc="id"
+                data-tc-id="UHJvZHVjdDoxMDk="
+              >
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <input
+                      class="makeStyles-box-id"
+                      type="checkbox"
+                      value="false"
                     />
-                  </div>
-                  <div
-                    class="makeStyles-children-id"
-                  >
-                    Code Division T-shirt
-                  </div>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
-                data-tc="product-type"
-              >
-                Top (clothing)
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
-                data-tc="isPublished"
-                data-tc-is-published="true"
-              >
-                <div
-                  class="makeStyles-root-id undefined makeStyles-successDot-id"
-                >
-                  Published
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
-              >
-                $30.00
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-              data-tc="id"
-              data-tc-id="UHJvZHVjdDoxMDc="
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <input
-                    class="makeStyles-box-id"
-                    type="checkbox"
-                    value="false"
-                  />
-                </button>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
-                data-tc="name"
-              >
-                <div
-                  class="makeStyles-content-id"
+                  </button>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                  data-tc="name"
                 >
                   <div
-                    class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                    class="makeStyles-content-id"
                   >
-                    <img
-                      class="MuiAvatar-img-id"
-                      src="placeholder255x255.png"
+                    <div
+                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                    >
+                      <img
+                        class="MuiAvatar-img-id"
+                        src="placeholder255x255.png"
+                      />
+                    </div>
+                    <div
+                      class="makeStyles-children-id"
+                    >
+                      Polo Shirt
+                    </div>
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
+                  data-tc="product-type"
+                >
+                  Top (clothing)
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
+                  data-tc="isPublished"
+                  data-tc-is-published="true"
+                >
+                  <div
+                    class="makeStyles-root-id undefined makeStyles-successDot-id"
+                  >
+                    Published
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                >
+                  $30.00
+                </td>
+              </tr>
+              <tr
+                class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                data-tc="id"
+                data-tc-id="UHJvZHVjdDoxMTA="
+              >
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <input
+                      class="makeStyles-box-id"
+                      type="checkbox"
+                      value="false"
                     />
-                  </div>
-                  <div
-                    class="makeStyles-children-id"
-                  >
-                    Polo Shirt
-                  </div>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
-                data-tc="product-type"
-              >
-                Top (clothing)
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
-                data-tc="isPublished"
-                data-tc-is-published="true"
-              >
-                <div
-                  class="makeStyles-root-id undefined makeStyles-successDot-id"
-                >
-                  Published
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
-              >
-                $30.00
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-              data-tc="id"
-              data-tc-id="UHJvZHVjdDoxMDg="
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <input
-                    class="makeStyles-box-id"
-                    type="checkbox"
-                    value="false"
-                  />
-                </button>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
-                data-tc="name"
-              >
-                <div
-                  class="makeStyles-content-id"
+                  </button>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                  data-tc="name"
                 >
                   <div
-                    class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                    class="makeStyles-content-id"
                   >
-                    <img
-                      class="MuiAvatar-img-id"
-                      src="placeholder255x255.png"
+                    <div
+                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                    >
+                      <img
+                        class="MuiAvatar-img-id"
+                        src="placeholder255x255.png"
+                      />
+                    </div>
+                    <div
+                      class="makeStyles-children-id"
+                    >
+                      Polo Shirt
+                    </div>
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
+                  data-tc="product-type"
+                >
+                  Top (clothing)
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
+                  data-tc="isPublished"
+                  data-tc-is-published="true"
+                >
+                  <div
+                    class="makeStyles-root-id undefined makeStyles-successDot-id"
+                  >
+                    Published
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                >
+                  $30.00
+                </td>
+              </tr>
+              <tr
+                class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                data-tc="id"
+                data-tc-id="UHJvZHVjdDoxMTU="
+              >
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <input
+                      class="makeStyles-box-id"
+                      type="checkbox"
+                      value="false"
                     />
-                  </div>
-                  <div
-                    class="makeStyles-children-id"
-                  >
-                    Polo Shirt
-                  </div>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
-                data-tc="product-type"
-              >
-                Top (clothing)
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
-                data-tc="isPublished"
-                data-tc-is-published="true"
-              >
-                <div
-                  class="makeStyles-root-id undefined makeStyles-successDot-id"
-                >
-                  Published
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
-              >
-                $30.00
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-              data-tc="id"
-              data-tc-id="UHJvZHVjdDoxMDk="
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <input
-                    class="makeStyles-box-id"
-                    type="checkbox"
-                    value="false"
-                  />
-                </button>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
-                data-tc="name"
-              >
-                <div
-                  class="makeStyles-content-id"
+                  </button>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                  data-tc="name"
                 >
                   <div
-                    class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                    class="makeStyles-content-id"
                   >
-                    <img
-                      class="MuiAvatar-img-id"
-                      src="placeholder255x255.png"
+                    <div
+                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                    >
+                      <img
+                        class="MuiAvatar-img-id"
+                        src="placeholder255x255.png"
+                      />
+                    </div>
+                    <div
+                      class="makeStyles-children-id"
+                    >
+                      Black Hoodie
+                    </div>
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
+                  data-tc="product-type"
+                >
+                  Top (clothing)
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
+                  data-tc="isPublished"
+                  data-tc-is-published="true"
+                >
+                  <div
+                    class="makeStyles-root-id undefined makeStyles-successDot-id"
+                  >
+                    Published
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                >
+                  $30.00
+                </td>
+              </tr>
+              <tr
+                class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                data-tc="id"
+                data-tc-id="UHJvZHVjdDoxMTY="
+              >
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <input
+                      class="makeStyles-box-id"
+                      type="checkbox"
+                      value="false"
                     />
-                  </div>
-                  <div
-                    class="makeStyles-children-id"
-                  >
-                    Polo Shirt
-                  </div>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
-                data-tc="product-type"
-              >
-                Top (clothing)
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
-                data-tc="isPublished"
-                data-tc-is-published="true"
-              >
-                <div
-                  class="makeStyles-root-id undefined makeStyles-successDot-id"
-                >
-                  Published
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
-              >
-                $30.00
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-              data-tc="id"
-              data-tc-id="UHJvZHVjdDoxMTA="
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <input
-                    class="makeStyles-box-id"
-                    type="checkbox"
-                    value="false"
-                  />
-                </button>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
-                data-tc="name"
-              >
-                <div
-                  class="makeStyles-content-id"
+                  </button>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                  data-tc="name"
                 >
                   <div
-                    class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                    class="makeStyles-content-id"
                   >
-                    <img
-                      class="MuiAvatar-img-id"
-                      src="placeholder255x255.png"
+                    <div
+                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                    >
+                      <img
+                        class="MuiAvatar-img-id"
+                        src="placeholder255x255.png"
+                      />
+                    </div>
+                    <div
+                      class="makeStyles-children-id"
+                    >
+                      Blue Hoodie
+                    </div>
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
+                  data-tc="product-type"
+                >
+                  Top (clothing)
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
+                  data-tc="isPublished"
+                  data-tc-is-published="true"
+                >
+                  <div
+                    class="makeStyles-root-id undefined makeStyles-successDot-id"
+                  >
+                    Published
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                >
+                  $30.00
+                </td>
+              </tr>
+              <tr
+                class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                data-tc="id"
+                data-tc-id="UHJvZHVjdDoxMTc="
+              >
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <input
+                      class="makeStyles-box-id"
+                      type="checkbox"
+                      value="false"
                     />
-                  </div>
-                  <div
-                    class="makeStyles-children-id"
-                  >
-                    Polo Shirt
-                  </div>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
-                data-tc="product-type"
-              >
-                Top (clothing)
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
-                data-tc="isPublished"
-                data-tc-is-published="true"
-              >
-                <div
-                  class="makeStyles-root-id undefined makeStyles-successDot-id"
-                >
-                  Published
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
-              >
-                $30.00
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-              data-tc="id"
-              data-tc-id="UHJvZHVjdDoxMTU="
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <input
-                    class="makeStyles-box-id"
-                    type="checkbox"
-                    value="false"
-                  />
-                </button>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
-                data-tc="name"
-              >
-                <div
-                  class="makeStyles-content-id"
+                  </button>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                  data-tc="name"
                 >
                   <div
-                    class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                    class="makeStyles-content-id"
                   >
-                    <img
-                      class="MuiAvatar-img-id"
-                      src="placeholder255x255.png"
+                    <div
+                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                    >
+                      <img
+                        class="MuiAvatar-img-id"
+                        src="placeholder255x255.png"
+                      />
+                    </div>
+                    <div
+                      class="makeStyles-children-id"
+                    >
+                      Mustard Hoodie
+                    </div>
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
+                  data-tc="product-type"
+                >
+                  Top (clothing)
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
+                  data-tc="isPublished"
+                  data-tc-is-published="true"
+                >
+                  <div
+                    class="makeStyles-root-id undefined makeStyles-successDot-id"
+                  >
+                    Published
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                >
+                  $30.00
+                </td>
+              </tr>
+              <tr
+                class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                data-tc="id"
+                data-tc-id="UHJvZHVjdDo4NQ=="
+              >
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <input
+                      class="makeStyles-box-id"
+                      type="checkbox"
+                      value="false"
                     />
-                  </div>
-                  <div
-                    class="makeStyles-children-id"
-                  >
-                    Black Hoodie
-                  </div>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
-                data-tc="product-type"
-              >
-                Top (clothing)
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
-                data-tc="isPublished"
-                data-tc-is-published="true"
-              >
-                <div
-                  class="makeStyles-root-id undefined makeStyles-successDot-id"
-                >
-                  Published
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
-              >
-                $30.00
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-              data-tc="id"
-              data-tc-id="UHJvZHVjdDoxMTY="
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <input
-                    class="makeStyles-box-id"
-                    type="checkbox"
-                    value="false"
-                  />
-                </button>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
-                data-tc="name"
-              >
-                <div
-                  class="makeStyles-content-id"
+                  </button>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                  data-tc="name"
                 >
                   <div
-                    class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                    class="makeStyles-content-id"
                   >
-                    <img
-                      class="MuiAvatar-img-id"
-                      src="placeholder255x255.png"
-                    />
+                    <div
+                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                    >
+                      <img
+                        class="MuiAvatar-img-id"
+                        src="placeholder255x255.png"
+                      />
+                    </div>
+                    <div
+                      class="makeStyles-children-id"
+                    >
+                      Colored Parrot Cushion
+                    </div>
                   </div>
-                  <div
-                    class="makeStyles-children-id"
-                  >
-                    Blue Hoodie
-                  </div>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
-                data-tc="product-type"
-              >
-                Top (clothing)
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
-                data-tc="isPublished"
-                data-tc-is-published="true"
-              >
-                <div
-                  class="makeStyles-root-id undefined makeStyles-successDot-id"
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
+                  data-tc="product-type"
                 >
-                  Published
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
-              >
-                $30.00
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-              data-tc="id"
-              data-tc-id="UHJvZHVjdDoxMTc="
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <input
-                    class="makeStyles-box-id"
-                    type="checkbox"
-                    value="false"
-                  />
-                </button>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
-                data-tc="name"
-              >
-                <div
-                  class="makeStyles-content-id"
+                  Cushion
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
+                  data-tc="isPublished"
+                  data-tc-is-published="true"
                 >
                   <div
-                    class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                    class="makeStyles-root-id undefined makeStyles-successDot-id"
                   >
-                    <img
-                      class="MuiAvatar-img-id"
-                      src="placeholder255x255.png"
-                    />
+                    Published
                   </div>
-                  <div
-                    class="makeStyles-children-id"
-                  >
-                    Mustard Hoodie
-                  </div>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
-                data-tc="product-type"
-              >
-                Top (clothing)
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
-                data-tc="isPublished"
-                data-tc-is-published="true"
-              >
-                <div
-                  class="makeStyles-root-id undefined makeStyles-successDot-id"
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
                 >
-                  Published
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
-              >
-                $30.00
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-              data-tc="id"
-              data-tc-id="UHJvZHVjdDo4NQ=="
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <input
-                    class="makeStyles-box-id"
-                    type="checkbox"
-                    value="false"
-                  />
-                </button>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
-                data-tc="name"
-              >
-                <div
-                  class="makeStyles-content-id"
-                >
-                  <div
-                    class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
-                  >
-                    <img
-                      class="MuiAvatar-img-id"
-                      src="placeholder255x255.png"
-                    />
-                  </div>
-                  <div
-                    class="makeStyles-children-id"
-                  >
-                    Colored Parrot Cushion
-                  </div>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
-                data-tc="product-type"
-              >
-                Cushion
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
-                data-tc="isPublished"
-                data-tc-is-published="true"
-              >
-                <div
-                  class="makeStyles-root-id undefined makeStyles-successDot-id"
-                >
-                  Published
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
-              >
-                $20.00
-              </td>
-            </tr>
-          </tbody>
-        </table>
+                  $20.00
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
       </div>
     </div>
   </div>
@@ -106529,10 +107101,10 @@ exports[`Storyshots Views / Products / Product variant details attribute errors
   style="padding:24px"
 >
   <div
-    class="makeStyles-root-id"
+    class="Container-root-id"
   >
     <div
-      class="makeStyles-root-id"
+      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
         class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -106540,7 +107112,7 @@ exports[`Storyshots Views / Products / Product variant details attribute errors
         Extended Hard
       </div>
       <div
-        class="makeStyles-action-id"
+        class="ExtendedPageHeader-action-id"
       >
         <div
           class="makeStyles-root-id"
@@ -106573,146 +107145,150 @@ exports[`Storyshots Views / Products / Product variant details attribute errors
             <hr
               class="makeStyles-hr-id"
             />
-            <table
-              class="MuiTable-root-id"
+            <div
+              class="ResponsiveTable-root-id"
             >
-              <tbody
-                class="MuiTableBody-root-id"
+              <table
+                class="MuiTable-root-id"
               >
-                <tr
-                  class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                <tbody
+                  class="MuiTableBody-root-id"
                 >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-tabActive-id"
+                  <tr
+                    class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
                   >
-                    <div
-                      class="makeStyles-content-id"
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-tabActive-id"
                     >
                       <div
-                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                        class="makeStyles-content-id"
                       >
-                        <img
-                          class="MuiAvatar-img-id"
-                          src="placeholder60x60.png"
+                        <div
+                          class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                        >
+                          <img
+                            class="MuiAvatar-img-id"
+                            src="placeholder60x60.png"
+                          />
+                        </div>
+                        <div
+                          class="makeStyles-children-id"
                         />
                       </div>
-                      <div
-                        class="makeStyles-children-id"
-                      />
-                    </div>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                    >
+                      Extended Hard
+                    </td>
+                  </tr>
+                  <tr
+                    class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
                   >
-                    Extended Hard
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
-                  >
-                    <div
-                      class="makeStyles-content-id"
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
                     >
                       <div
-                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                        class="makeStyles-content-id"
                       >
-                        <img
-                          class="MuiAvatar-img-id"
-                          src="placeholder60x60.png"
+                        <div
+                          class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                        >
+                          <img
+                            class="MuiAvatar-img-id"
+                            src="placeholder60x60.png"
+                          />
+                        </div>
+                        <div
+                          class="makeStyles-children-id"
                         />
                       </div>
-                      <div
-                        class="makeStyles-children-id"
-                      />
-                    </div>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                    >
+                      Extended Soft
+                    </td>
+                  </tr>
+                  <tr
+                    class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
                   >
-                    Extended Soft
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
-                  >
-                    <div
-                      class="makeStyles-content-id"
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
                     >
                       <div
-                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                        class="makeStyles-content-id"
                       >
-                        <img
-                          class="MuiAvatar-img-id"
-                          src="placeholder60x60.png"
+                        <div
+                          class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                        >
+                          <img
+                            class="MuiAvatar-img-id"
+                            src="placeholder60x60.png"
+                          />
+                        </div>
+                        <div
+                          class="makeStyles-children-id"
                         />
                       </div>
-                      <div
-                        class="makeStyles-children-id"
-                      />
-                    </div>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                    >
+                      Normal Hard
+                    </td>
+                  </tr>
+                  <tr
+                    class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
                   >
-                    Normal Hard
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
-                  >
-                    <div
-                      class="makeStyles-content-id"
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
                     >
                       <div
-                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                        class="makeStyles-content-id"
                       >
-                        <img
-                          class="MuiAvatar-img-id"
-                          src="placeholder60x60.png"
+                        <div
+                          class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                        >
+                          <img
+                            class="MuiAvatar-img-id"
+                            src="placeholder60x60.png"
+                          />
+                        </div>
+                        <div
+                          class="makeStyles-children-id"
                         />
                       </div>
-                      <div
-                        class="makeStyles-children-id"
-                      />
-                    </div>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
-                  >
-                    Normal Soft
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                    colspan="2"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
-                      tabindex="0"
-                      type="button"
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
                     >
-                      <span
-                        class="MuiButton-label-id"
+                      Normal Soft
+                    </td>
+                  </tr>
+                  <tr
+                    class="MuiTableRow-root-id"
+                  >
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                      colspan="2"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+                        tabindex="0"
+                        type="button"
                       >
-                        Add variant
-                      </span>
-                    </button>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
+                        <span
+                          class="MuiButton-label-id"
+                        >
+                          Add variant
+                        </span>
+                      </button>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
           </div>
         </div>
         <div>
@@ -107220,10 +107796,10 @@ exports[`Storyshots Views / Products / Product variant details when loaded data
   style="padding:24px"
 >
   <div
-    class="makeStyles-root-id"
+    class="Container-root-id"
   >
     <div
-      class="makeStyles-root-id"
+      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
         class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -107231,7 +107807,7 @@ exports[`Storyshots Views / Products / Product variant details when loaded data
         Extended Hard
       </div>
       <div
-        class="makeStyles-action-id"
+        class="ExtendedPageHeader-action-id"
       >
         <div
           class="makeStyles-root-id"
@@ -107264,146 +107840,150 @@ exports[`Storyshots Views / Products / Product variant details when loaded data
             <hr
               class="makeStyles-hr-id"
             />
-            <table
-              class="MuiTable-root-id"
+            <div
+              class="ResponsiveTable-root-id"
             >
-              <tbody
-                class="MuiTableBody-root-id"
+              <table
+                class="MuiTable-root-id"
               >
-                <tr
-                  class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                <tbody
+                  class="MuiTableBody-root-id"
                 >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-tabActive-id"
+                  <tr
+                    class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
                   >
-                    <div
-                      class="makeStyles-content-id"
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-tabActive-id"
                     >
                       <div
-                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                        class="makeStyles-content-id"
                       >
-                        <img
-                          class="MuiAvatar-img-id"
-                          src="placeholder60x60.png"
+                        <div
+                          class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                        >
+                          <img
+                            class="MuiAvatar-img-id"
+                            src="placeholder60x60.png"
+                          />
+                        </div>
+                        <div
+                          class="makeStyles-children-id"
                         />
                       </div>
-                      <div
-                        class="makeStyles-children-id"
-                      />
-                    </div>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                    >
+                      Extended Hard
+                    </td>
+                  </tr>
+                  <tr
+                    class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
                   >
-                    Extended Hard
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
-                  >
-                    <div
-                      class="makeStyles-content-id"
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
                     >
                       <div
-                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                        class="makeStyles-content-id"
                       >
-                        <img
-                          class="MuiAvatar-img-id"
-                          src="placeholder60x60.png"
+                        <div
+                          class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                        >
+                          <img
+                            class="MuiAvatar-img-id"
+                            src="placeholder60x60.png"
+                          />
+                        </div>
+                        <div
+                          class="makeStyles-children-id"
                         />
                       </div>
-                      <div
-                        class="makeStyles-children-id"
-                      />
-                    </div>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                    >
+                      Extended Soft
+                    </td>
+                  </tr>
+                  <tr
+                    class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
                   >
-                    Extended Soft
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
-                  >
-                    <div
-                      class="makeStyles-content-id"
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
                     >
                       <div
-                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                        class="makeStyles-content-id"
                       >
-                        <img
-                          class="MuiAvatar-img-id"
-                          src="placeholder60x60.png"
+                        <div
+                          class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                        >
+                          <img
+                            class="MuiAvatar-img-id"
+                            src="placeholder60x60.png"
+                          />
+                        </div>
+                        <div
+                          class="makeStyles-children-id"
                         />
                       </div>
-                      <div
-                        class="makeStyles-children-id"
-                      />
-                    </div>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                    >
+                      Normal Hard
+                    </td>
+                  </tr>
+                  <tr
+                    class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
                   >
-                    Normal Hard
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
-                  >
-                    <div
-                      class="makeStyles-content-id"
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
                     >
                       <div
-                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                        class="makeStyles-content-id"
                       >
-                        <img
-                          class="MuiAvatar-img-id"
-                          src="placeholder60x60.png"
+                        <div
+                          class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                        >
+                          <img
+                            class="MuiAvatar-img-id"
+                            src="placeholder60x60.png"
+                          />
+                        </div>
+                        <div
+                          class="makeStyles-children-id"
                         />
                       </div>
-                      <div
-                        class="makeStyles-children-id"
-                      />
-                    </div>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
-                  >
-                    Normal Soft
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                    colspan="2"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
-                      tabindex="0"
-                      type="button"
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
                     >
-                      <span
-                        class="MuiButton-label-id"
+                      Normal Soft
+                    </td>
+                  </tr>
+                  <tr
+                    class="MuiTableRow-root-id"
+                  >
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                      colspan="2"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+                        tabindex="0"
+                        type="button"
                       >
-                        Add variant
-                      </span>
-                    </button>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
+                        <span
+                          class="MuiButton-label-id"
+                        >
+                          Add variant
+                        </span>
+                      </button>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
           </div>
         </div>
         <div>
@@ -107893,10 +108473,10 @@ exports[`Storyshots Views / Products / Product variant details when loading data
   style="padding:24px"
 >
   <div
-    class="makeStyles-root-id"
+    class="Container-root-id"
   >
     <div
-      class="makeStyles-root-id"
+      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
         class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -107909,7 +108489,7 @@ exports[`Storyshots Views / Products / Product variant details when loading data
         </span>
       </div>
       <div
-        class="makeStyles-action-id"
+        class="ExtendedPageHeader-action-id"
       >
         <div
           class="makeStyles-root-id"
@@ -107942,73 +108522,77 @@ exports[`Storyshots Views / Products / Product variant details when loading data
             <hr
               class="makeStyles-hr-id"
             />
-            <table
-              class="MuiTable-root-id"
+            <div
+              class="ResponsiveTable-root-id"
             >
-              <tbody
-                class="MuiTableBody-root-id"
+              <table
+                class="MuiTable-root-id"
               >
-                <tr
-                  class="MuiTableRow-root-id makeStyles-link-id"
+                <tbody
+                  class="MuiTableBody-root-id"
                 >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
+                  <tr
+                    class="MuiTableRow-root-id makeStyles-link-id"
                   >
-                    <div
-                      class="makeStyles-content-id"
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
                     >
                       <div
-                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id MuiAvatar-colorDefault-id"
+                        class="makeStyles-content-id"
                       >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
-                          focusable="false"
-                          role="presentation"
-                          viewBox="0 0 24 24"
+                        <div
+                          class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id MuiAvatar-colorDefault-id"
                         >
-                          <path
-                            d="M19 8l-4 4h3c0 3.31-2.69 6-6 6-1.01 0-1.97-.25-2.8-.7l-1.46 1.46C8.97 19.54 10.43 20 12 20c4.42 0 8-3.58 8-8h3l-4-4zM6 12c0-3.31 2.69-6 6-6 1.01 0 1.97.25 2.8.7l1.46-1.46C15.03 4.46 13.57 4 12 4c-4.42 0-8 3.58-8 8H1l4 4 4-4H6z"
-                          />
-                        </svg>
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M19 8l-4 4h3c0 3.31-2.69 6-6 6-1.01 0-1.97-.25-2.8-.7l-1.46 1.46C8.97 19.54 10.43 20 12 20c4.42 0 8-3.58 8-8h3l-4-4zM6 12c0-3.31 2.69-6 6-6 1.01 0 1.97.25 2.8.7l1.46-1.46C15.03 4.46 13.57 4 12 4c-4.42 0-8 3.58-8 8H1l4 4 4-4H6z"
+                            />
+                          </svg>
+                        </div>
+                        <div
+                          class="makeStyles-children-id"
+                        />
                       </div>
-                      <div
-                        class="makeStyles-children-id"
-                      />
-                    </div>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
-                  >
-                    <span
-                      class="makeStyles-skeleton-id"
-                    >
-                      ‌
-                    </span>
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                    colspan="2"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
-                      tabindex="0"
-                      type="button"
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
                     >
                       <span
-                        class="MuiButton-label-id"
+                        class="makeStyles-skeleton-id"
                       >
-                        Add variant
+                        ‌
                       </span>
-                    </button>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
+                    </td>
+                  </tr>
+                  <tr
+                    class="MuiTableRow-root-id"
+                  >
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                      colspan="2"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiButton-label-id"
+                        >
+                          Add variant
+                        </span>
+                      </button>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
           </div>
         </div>
         <div>
@@ -108335,10 +108919,10 @@ exports[`Storyshots Views / Services / Create service default 1`] = `
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -108346,7 +108930,7 @@ exports[`Storyshots Views / Services / Create service default 1`] = `
           Create New Account
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -108848,10 +109432,10 @@ exports[`Storyshots Views / Services / Create service form errors 1`] = `
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -108859,7 +109443,7 @@ exports[`Storyshots Views / Services / Create service form errors 1`] = `
           Create New Account
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -109366,10 +109950,10 @@ exports[`Storyshots Views / Services / Create service loading 1`] = `
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -109377,7 +109961,7 @@ exports[`Storyshots Views / Services / Create service loading 1`] = `
           Create New Account
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -109916,10 +110500,10 @@ exports[`Storyshots Views / Services / Service details default 1`] = `
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -109927,7 +110511,7 @@ exports[`Storyshots Views / Services / Service details default 1`] = `
           Magento Importer
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -110035,79 +110619,83 @@ exports[`Storyshots Views / Services / Service details default 1`] = `
             <hr
               class="makeStyles-hr-id"
             />
-            <table
-              class="MuiTable-root-id"
+            <div
+              class="ResponsiveTable-root-id"
             >
-              <thead
-                class="MuiTableHead-root-id"
+              <table
+                class="MuiTable-root-id"
               >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
+                <thead
+                  class="MuiTableHead-root-id"
                 >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colNote-id"
-                    scope="col"
+                  <tr
+                    class="MuiTableRow-root-id MuiTableRow-head-id"
                   >
-                    Token Note
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colKey-id"
-                    scope="col"
-                  >
-                    Key
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colActions-id"
-                    scope="col"
-                  >
-                    Actions
-                  </th>
-                </tr>
-              </thead>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNote-id"
-                  >
-                    default
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colKey-id"
-                  >
-                    **** AK05
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colActions-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
-                      tabindex="0"
-                      type="button"
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colNote-id"
+                      scope="col"
                     >
-                      <span
-                        class="MuiIconButton-label-id"
+                      Token Note
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colKey-id"
+                      scope="col"
+                    >
+                      Key
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colActions-id"
+                      scope="col"
+                    >
+                      Actions
+                    </th>
+                  </tr>
+                </thead>
+                <tbody
+                  class="MuiTableBody-root-id"
+                >
+                  <tr
+                    class="MuiTableRow-root-id"
+                  >
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNote-id"
+                    >
+                      default
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colKey-id"
+                    >
+                      **** AK05
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colActions-id"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
+                        tabindex="0"
+                        type="button"
                       >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          role="presentation"
-                          viewBox="0 0 24 24"
+                        <span
+                          class="MuiIconButton-label-id"
                         >
-                          <path
-                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                          />
-                        </svg>
-                      </span>
-                    </button>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
           </div>
         </div>
         <div>
@@ -110541,10 +111129,10 @@ exports[`Storyshots Views / Services / Service details default token 1`] = `
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -110552,7 +111140,7 @@ exports[`Storyshots Views / Services / Service details default token 1`] = `
           Magento Importer
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -110743,79 +111331,83 @@ exports[`Storyshots Views / Services / Service details default token 1`] = `
             <hr
               class="makeStyles-hr-id"
             />
-            <table
-              class="MuiTable-root-id"
+            <div
+              class="ResponsiveTable-root-id"
             >
-              <thead
-                class="MuiTableHead-root-id"
+              <table
+                class="MuiTable-root-id"
               >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
+                <thead
+                  class="MuiTableHead-root-id"
                 >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colNote-id"
-                    scope="col"
+                  <tr
+                    class="MuiTableRow-root-id MuiTableRow-head-id"
                   >
-                    Token Note
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colKey-id"
-                    scope="col"
-                  >
-                    Key
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colActions-id"
-                    scope="col"
-                  >
-                    Actions
-                  </th>
-                </tr>
-              </thead>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNote-id"
-                  >
-                    default
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colKey-id"
-                  >
-                    **** AK05
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colActions-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
-                      tabindex="0"
-                      type="button"
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colNote-id"
+                      scope="col"
                     >
-                      <span
-                        class="MuiIconButton-label-id"
+                      Token Note
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colKey-id"
+                      scope="col"
+                    >
+                      Key
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colActions-id"
+                      scope="col"
+                    >
+                      Actions
+                    </th>
+                  </tr>
+                </thead>
+                <tbody
+                  class="MuiTableBody-root-id"
+                >
+                  <tr
+                    class="MuiTableRow-root-id"
+                  >
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNote-id"
+                    >
+                      default
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colKey-id"
+                    >
+                      **** AK05
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colActions-id"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
+                        tabindex="0"
+                        type="button"
                       >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          role="presentation"
-                          viewBox="0 0 24 24"
+                        <span
+                          class="MuiIconButton-label-id"
                         >
-                          <path
-                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                          />
-                        </svg>
-                      </span>
-                    </button>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
           </div>
         </div>
         <div>
@@ -111249,10 +111841,10 @@ exports[`Storyshots Views / Services / Service details form errors 1`] = `
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -111260,7 +111852,7 @@ exports[`Storyshots Views / Services / Service details form errors 1`] = `
           Magento Importer
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -111373,79 +111965,83 @@ exports[`Storyshots Views / Services / Service details form errors 1`] = `
             <hr
               class="makeStyles-hr-id"
             />
-            <table
-              class="MuiTable-root-id"
+            <div
+              class="ResponsiveTable-root-id"
             >
-              <thead
-                class="MuiTableHead-root-id"
+              <table
+                class="MuiTable-root-id"
               >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
+                <thead
+                  class="MuiTableHead-root-id"
                 >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colNote-id"
-                    scope="col"
+                  <tr
+                    class="MuiTableRow-root-id MuiTableRow-head-id"
                   >
-                    Token Note
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colKey-id"
-                    scope="col"
-                  >
-                    Key
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colActions-id"
-                    scope="col"
-                  >
-                    Actions
-                  </th>
-                </tr>
-              </thead>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNote-id"
-                  >
-                    default
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colKey-id"
-                  >
-                    **** AK05
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colActions-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
-                      tabindex="0"
-                      type="button"
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colNote-id"
+                      scope="col"
                     >
-                      <span
-                        class="MuiIconButton-label-id"
+                      Token Note
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colKey-id"
+                      scope="col"
+                    >
+                      Key
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colActions-id"
+                      scope="col"
+                    >
+                      Actions
+                    </th>
+                  </tr>
+                </thead>
+                <tbody
+                  class="MuiTableBody-root-id"
+                >
+                  <tr
+                    class="MuiTableRow-root-id"
+                  >
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNote-id"
+                    >
+                      default
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colKey-id"
+                    >
+                      **** AK05
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colActions-id"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
+                        tabindex="0"
+                        type="button"
                       >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          role="presentation"
-                          viewBox="0 0 24 24"
+                        <span
+                          class="MuiIconButton-label-id"
                         >
-                          <path
-                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                          />
-                        </svg>
-                      </span>
-                    </button>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
           </div>
         </div>
         <div>
@@ -111879,10 +112475,10 @@ exports[`Storyshots Views / Services / Service details loading 1`] = `
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -111895,7 +112491,7 @@ exports[`Storyshots Views / Services / Service details loading 1`] = `
           </span>
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -112004,87 +112600,91 @@ exports[`Storyshots Views / Services / Service details loading 1`] = `
             <hr
               class="makeStyles-hr-id"
             />
-            <table
-              class="MuiTable-root-id"
+            <div
+              class="ResponsiveTable-root-id"
             >
-              <thead
-                class="MuiTableHead-root-id"
+              <table
+                class="MuiTable-root-id"
               >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
+                <thead
+                  class="MuiTableHead-root-id"
                 >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colNote-id"
-                    scope="col"
+                  <tr
+                    class="MuiTableRow-root-id MuiTableRow-head-id"
                   >
-                    Token Note
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colKey-id"
-                    scope="col"
-                  >
-                    Key
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colActions-id"
-                    scope="col"
-                  >
-                    Actions
-                  </th>
-                </tr>
-              </thead>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id"
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colNote-id"
+                      scope="col"
+                    >
+                      Token Note
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colKey-id"
+                      scope="col"
+                    >
+                      Key
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colActions-id"
+                      scope="col"
+                    >
+                      Actions
+                    </th>
+                  </tr>
+                </thead>
+                <tbody
+                  class="MuiTableBody-root-id"
                 >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNote-id"
+                  <tr
+                    class="MuiTableRow-root-id"
                   >
-                    <span
-                      class="makeStyles-skeleton-id"
-                    >
-                      ‌
-                    </span>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colKey-id"
-                  >
-                    <span
-                      class="makeStyles-skeleton-id"
-                    >
-                      ‌
-                    </span>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colActions-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
-                      tabindex="0"
-                      type="button"
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNote-id"
                     >
                       <span
-                        class="MuiIconButton-label-id"
+                        class="makeStyles-skeleton-id"
                       >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          role="presentation"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                          />
-                        </svg>
+                        ‌
                       </span>
-                    </button>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colKey-id"
+                    >
+                      <span
+                        class="makeStyles-skeleton-id"
+                      >
+                        ‌
+                      </span>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colActions-id"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiIconButton-label-id"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
           </div>
         </div>
         <div>
@@ -112547,10 +113147,10 @@ exports[`Storyshots Views / Services / Service list default 1`] = `
   style="padding:24px"
 >
   <div
-    class="makeStyles-root-id"
+    class="Container-root-id"
   >
     <div
-      class="makeStyles-root-id"
+      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
         class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -112558,7 +113158,7 @@ exports[`Storyshots Views / Services / Service list default 1`] = `
         Service Accounts
       </div>
       <div
-        class="makeStyles-action-id"
+        class="ExtendedPageHeader-action-id"
       >
         <div
           class="makeStyles-root-id"
@@ -112654,340 +113254,344 @@ exports[`Storyshots Views / Services / Service list default 1`] = `
       <hr
         class="makeStyles-root-id"
       />
-      <table
-        class="MuiTable-root-id makeStyles-table-id"
+      <div
+        class="ResponsiveTable-root-id"
       >
-        <thead
-          class="MuiTableHead-root-id"
+        <table
+          class="MuiTable-root-id makeStyles-table-id"
         >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-head-id"
+          <thead
+            class="MuiTableHead-root-id"
           >
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
-              scope="col"
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-head-id"
             >
-              Name
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id"
-              scope="col"
-            />
-          </tr>
-        </thead>
-        <tfoot
-          class="MuiTableFooter-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-footer-id"
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                scope="col"
+              >
+                Name
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id"
+                scope="col"
+              />
+            </tr>
+          </thead>
+          <tfoot
+            class="MuiTableFooter-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
-              colspan="2"
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-footer-id"
             >
-              <div
-                class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                colspan="2"
               >
                 <div
-                  class="makeStyles-spacer-id"
+                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
                 >
-                  <div>
-                    <span
-                      class="RowNumberSelect-label-id"
-                    >
-                      No of Rows:
-                    </span>
-                    <div
-                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
-                    >
+                  <div
+                    class="makeStyles-spacer-id"
+                  >
+                    <div>
+                      <span
+                        class="RowNumberSelect-label-id"
+                      >
+                        No of Rows:
+                      </span>
                       <div
-                        aria-haspopup="listbox"
-                        aria-labelledby=" "
-                        class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-id"
-                        role="button"
-                        tabindex="0"
+                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                       >
-                        20
-                      </div>
-                      <input
-                        type="hidden"
-                        value="20"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MuiSelect-icon-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M7 10l5 5 5-5z"
+                        <div
+                          aria-haspopup="listbox"
+                          aria-labelledby=" "
+                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-id"
+                          role="button"
+                          tabindex="0"
+                        >
+                          20
+                        </div>
+                        <input
+                          type="hidden"
+                          value="20"
                         />
-                      </svg>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M7 10l5 5 5-5z"
+                          />
+                        </svg>
+                      </div>
                     </div>
                   </div>
+                  <div
+                    class="makeStyles-root-id"
+                  >
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      data-tc="button-pagination-back"
+                      disabled=""
+                      tabindex="-1"
+                      type="button"
+                    >
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M14 7l-5 5 5 5V7z"
+                          />
+                          <path
+                            d="M24 0v24H0V0h24z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                      data-tc="button-pagination-next"
+                      tabindex="0"
+                      type="button"
+                    >
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M10 17l5-5-5-5v10z"
+                          />
+                          <path
+                            d="M0 24V0h24v24H0z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </div>
                 </div>
+              </td>
+            </tr>
+          </tfoot>
+          <tbody
+            class="MuiTableBody-root-id"
+          >
+            <tr
+              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+              >
+                <span
+                  data-tc="name"
+                >
+                  Slack
+                </span>
                 <div
-                  class="makeStyles-root-id"
+                  class="MuiTypography-root-id MuiTypography-caption-id"
+                  data-tc="isActive"
                 >
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                    data-tc="button-pagination-back"
-                    disabled=""
-                    tabindex="-1"
-                    type="button"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M14 7l-5 5 5 5V7z"
-                        />
-                        <path
-                          d="M24 0v24H0V0h24z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
-                    data-tc="button-pagination-next"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M10 17l5-5-5-5v10z"
-                        />
-                        <path
-                          d="M0 24V0h24v24H0z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
+                  active
                 </div>
-              </div>
-            </td>
-          </tr>
-        </tfoot>
-        <tbody
-          class="MuiTableBody-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
-            >
-              <span
-                data-tc="name"
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colAction-id"
               >
-                Slack
-              </span>
-              <div
-                class="MuiTypography-root-id MuiTypography-caption-id"
-                data-tc="isActive"
-              >
-                active
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colAction-id"
+                <button
+                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <span
+                    class="MuiIconButton-label-id"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
+                      />
+                    </svg>
+                  </span>
+                </button>
+                <button
+                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <span
+                    class="MuiIconButton-label-id"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                      />
+                    </svg>
+                  </span>
+                </button>
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
             >
-              <button
-                class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
-                tabindex="0"
-                type="button"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
               >
                 <span
-                  class="MuiIconButton-label-id"
+                  data-tc="name"
                 >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    role="presentation"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
-                    />
-                  </svg>
+                  Facebook Market
                 </span>
-              </button>
-              <button
-                class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
-                tabindex="0"
-                type="button"
+                <div
+                  class="MuiTypography-root-id MuiTypography-caption-id"
+                  data-tc="isActive"
+                >
+                  active
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colAction-id"
               >
-                <span
-                  class="MuiIconButton-label-id"
+                <button
+                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
+                  tabindex="0"
+                  type="button"
                 >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    role="presentation"
-                    viewBox="0 0 24 24"
+                  <span
+                    class="MuiIconButton-label-id"
                   >
-                    <path
-                      d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                    />
-                  </svg>
-                </span>
-              </button>
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
+                      />
+                    </svg>
+                  </span>
+                </button>
+                <button
+                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <span
+                    class="MuiIconButton-label-id"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                      />
+                    </svg>
+                  </span>
+                </button>
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
             >
-              <span
-                data-tc="name"
-              >
-                Facebook Market
-              </span>
-              <div
-                class="MuiTypography-root-id MuiTypography-caption-id"
-                data-tc="isActive"
-              >
-                active
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colAction-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
-                tabindex="0"
-                type="button"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
               >
                 <span
-                  class="MuiIconButton-label-id"
+                  data-tc="name"
                 >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    role="presentation"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
-                    />
-                  </svg>
+                  Magento Importer
                 </span>
-              </button>
-              <button
-                class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiIconButton-label-id"
+                <div
+                  class="MuiTypography-root-id MuiTypography-caption-id"
+                  data-tc="isActive"
                 >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    role="presentation"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                    />
-                  </svg>
-                </span>
-              </button>
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
-            >
-              <span
-                data-tc="name"
+                  inactive
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colAction-id"
               >
-                Magento Importer
-              </span>
-              <div
-                class="MuiTypography-root-id MuiTypography-caption-id"
-                data-tc="isActive"
-              >
-                inactive
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colAction-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiIconButton-label-id"
+                <button
+                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
+                  tabindex="0"
+                  type="button"
                 >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    role="presentation"
-                    viewBox="0 0 24 24"
+                  <span
+                    class="MuiIconButton-label-id"
                   >
-                    <path
-                      d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
-                    />
-                  </svg>
-                </span>
-              </button>
-              <button
-                class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiIconButton-label-id"
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
+                      />
+                    </svg>
+                  </span>
+                </button>
+                <button
+                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
+                  tabindex="0"
+                  type="button"
                 >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    role="presentation"
-                    viewBox="0 0 24 24"
+                  <span
+                    class="MuiIconButton-label-id"
                   >
-                    <path
-                      d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                    />
-                  </svg>
-                </span>
-              </button>
-            </td>
-          </tr>
-        </tbody>
-      </table>
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                      />
+                    </svg>
+                  </span>
+                </button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
     </div>
   </div>
 </div>
@@ -112998,10 +113602,10 @@ exports[`Storyshots Views / Services / Service list loading 1`] = `
   style="padding:24px"
 >
   <div
-    class="makeStyles-root-id"
+    class="Container-root-id"
   >
     <div
-      class="makeStyles-root-id"
+      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
         class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -113009,7 +113613,7 @@ exports[`Storyshots Views / Services / Service list loading 1`] = `
         Service Accounts
       </div>
       <div
-        class="makeStyles-action-id"
+        class="ExtendedPageHeader-action-id"
       >
         <div
           class="makeStyles-root-id"
@@ -113105,213 +113709,217 @@ exports[`Storyshots Views / Services / Service list loading 1`] = `
       <hr
         class="makeStyles-root-id"
       />
-      <table
-        class="MuiTable-root-id makeStyles-table-id"
+      <div
+        class="ResponsiveTable-root-id"
       >
-        <thead
-          class="MuiTableHead-root-id"
+        <table
+          class="MuiTable-root-id makeStyles-table-id"
         >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-head-id"
+          <thead
+            class="MuiTableHead-root-id"
           >
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
-              scope="col"
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-head-id"
             >
-              Name
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id"
-              scope="col"
-            />
-          </tr>
-        </thead>
-        <tfoot
-          class="MuiTableFooter-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-footer-id"
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                scope="col"
+              >
+                Name
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id"
+                scope="col"
+              />
+            </tr>
+          </thead>
+          <tfoot
+            class="MuiTableFooter-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
-              colspan="2"
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-footer-id"
             >
-              <div
-                class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                colspan="2"
               >
                 <div
-                  class="makeStyles-spacer-id"
+                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
                 >
-                  <div>
-                    <span
-                      class="RowNumberSelect-label-id"
-                    >
-                      No of Rows:
-                    </span>
-                    <div
-                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
-                    >
+                  <div
+                    class="makeStyles-spacer-id"
+                  >
+                    <div>
+                      <span
+                        class="RowNumberSelect-label-id"
+                      >
+                        No of Rows:
+                      </span>
                       <div
-                        aria-haspopup="listbox"
-                        aria-labelledby=" "
-                        class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-id"
-                        role="button"
-                        tabindex="0"
+                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                       >
-                        20
-                      </div>
-                      <input
-                        type="hidden"
-                        value="20"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MuiSelect-icon-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M7 10l5 5 5-5z"
+                        <div
+                          aria-haspopup="listbox"
+                          aria-labelledby=" "
+                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-id"
+                          role="button"
+                          tabindex="0"
+                        >
+                          20
+                        </div>
+                        <input
+                          type="hidden"
+                          value="20"
                         />
-                      </svg>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M7 10l5 5 5-5z"
+                          />
+                        </svg>
+                      </div>
                     </div>
                   </div>
-                </div>
-                <div
-                  class="makeStyles-root-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                    data-tc="button-pagination-back"
-                    disabled=""
-                    tabindex="-1"
-                    type="button"
+                  <div
+                    class="makeStyles-root-id"
                   >
-                    <span
-                      class="MuiIconButton-label-id"
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      data-tc="button-pagination-back"
+                      disabled=""
+                      tabindex="-1"
+                      type="button"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
+                      <span
+                        class="MuiIconButton-label-id"
                       >
-                        <path
-                          d="M14 7l-5 5 5 5V7z"
-                        />
-                        <path
-                          d="M24 0v24H0V0h24z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                    data-tc="button-pagination-next"
-                    disabled=""
-                    tabindex="-1"
-                    type="button"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M14 7l-5 5 5 5V7z"
+                          />
+                          <path
+                            d="M24 0v24H0V0h24z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      data-tc="button-pagination-next"
+                      disabled=""
+                      tabindex="-1"
+                      type="button"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
+                      <span
+                        class="MuiIconButton-label-id"
                       >
-                        <path
-                          d="M10 17l5-5-5-5v10z"
-                        />
-                        <path
-                          d="M0 24V0h24v24H0z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M10 17l5-5-5-5v10z"
+                          />
+                          <path
+                            d="M0 24V0h24v24H0z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </div>
                 </div>
-              </div>
-            </td>
-          </tr>
-        </tfoot>
-        <tbody
-          class="MuiTableBody-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id"
+              </td>
+            </tr>
+          </tfoot>
+          <tbody
+            class="MuiTableBody-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+            <tr
+              class="MuiTableRow-root-id"
             >
-              <span
-                data-tc="name"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
               >
                 <span
-                  class="makeStyles-skeleton-id"
+                  data-tc="name"
                 >
-                  ‌
-                </span>
-              </span>
-              <div
-                class="MuiTypography-root-id MuiTypography-caption-id"
-                data-tc="isActive"
-              />
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colAction-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiIconButton-label-id"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    role="presentation"
-                    viewBox="0 0 24 24"
+                  <span
+                    class="makeStyles-skeleton-id"
                   >
-                    <path
-                      d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
-                    />
-                  </svg>
+                    ‌
+                  </span>
                 </span>
-              </button>
-              <button
-                class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
-                tabindex="0"
-                type="button"
+                <div
+                  class="MuiTypography-root-id MuiTypography-caption-id"
+                  data-tc="isActive"
+                />
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colAction-id"
               >
-                <span
-                  class="MuiIconButton-label-id"
+                <button
+                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
+                  tabindex="0"
+                  type="button"
                 >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    role="presentation"
-                    viewBox="0 0 24 24"
+                  <span
+                    class="MuiIconButton-label-id"
                   >
-                    <path
-                      d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                    />
-                  </svg>
-                </span>
-              </button>
-            </td>
-          </tr>
-        </tbody>
-      </table>
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
+                      />
+                    </svg>
+                  </span>
+                </button>
+                <button
+                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <span
+                    class="MuiIconButton-label-id"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                      />
+                    </svg>
+                  </span>
+                </button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
     </div>
   </div>
 </div>
@@ -113322,10 +113930,10 @@ exports[`Storyshots Views / Services / Service list no data 1`] = `
   style="padding:24px"
 >
   <div
-    class="makeStyles-root-id"
+    class="Container-root-id"
   >
     <div
-      class="makeStyles-root-id"
+      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
         class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -113333,7 +113941,7 @@ exports[`Storyshots Views / Services / Service list no data 1`] = `
         Service Accounts
       </div>
       <div
-        class="makeStyles-action-id"
+        class="ExtendedPageHeader-action-id"
       >
         <div
           class="makeStyles-root-id"
@@ -113429,155 +114037,159 @@ exports[`Storyshots Views / Services / Service list no data 1`] = `
       <hr
         class="makeStyles-root-id"
       />
-      <table
-        class="MuiTable-root-id makeStyles-table-id"
+      <div
+        class="ResponsiveTable-root-id"
       >
-        <thead
-          class="MuiTableHead-root-id"
+        <table
+          class="MuiTable-root-id makeStyles-table-id"
         >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-head-id"
+          <thead
+            class="MuiTableHead-root-id"
           >
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
-              scope="col"
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-head-id"
             >
-              Name
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id"
-              scope="col"
-            />
-          </tr>
-        </thead>
-        <tfoot
-          class="MuiTableFooter-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-footer-id"
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                scope="col"
+              >
+                Name
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id"
+                scope="col"
+              />
+            </tr>
+          </thead>
+          <tfoot
+            class="MuiTableFooter-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
-              colspan="2"
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-footer-id"
             >
-              <div
-                class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                colspan="2"
               >
                 <div
-                  class="makeStyles-spacer-id"
+                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
                 >
-                  <div>
-                    <span
-                      class="RowNumberSelect-label-id"
-                    >
-                      No of Rows:
-                    </span>
-                    <div
-                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
-                    >
+                  <div
+                    class="makeStyles-spacer-id"
+                  >
+                    <div>
+                      <span
+                        class="RowNumberSelect-label-id"
+                      >
+                        No of Rows:
+                      </span>
                       <div
-                        aria-haspopup="listbox"
-                        aria-labelledby=" "
-                        class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-id"
-                        role="button"
-                        tabindex="0"
+                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                       >
-                        20
-                      </div>
-                      <input
-                        type="hidden"
-                        value="20"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MuiSelect-icon-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M7 10l5 5 5-5z"
+                        <div
+                          aria-haspopup="listbox"
+                          aria-labelledby=" "
+                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-id"
+                          role="button"
+                          tabindex="0"
+                        >
+                          20
+                        </div>
+                        <input
+                          type="hidden"
+                          value="20"
                         />
-                      </svg>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M7 10l5 5 5-5z"
+                          />
+                        </svg>
+                      </div>
                     </div>
                   </div>
-                </div>
-                <div
-                  class="makeStyles-root-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                    data-tc="button-pagination-back"
-                    disabled=""
-                    tabindex="-1"
-                    type="button"
+                  <div
+                    class="makeStyles-root-id"
                   >
-                    <span
-                      class="MuiIconButton-label-id"
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      data-tc="button-pagination-back"
+                      disabled=""
+                      tabindex="-1"
+                      type="button"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
+                      <span
+                        class="MuiIconButton-label-id"
                       >
-                        <path
-                          d="M14 7l-5 5 5 5V7z"
-                        />
-                        <path
-                          d="M24 0v24H0V0h24z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
-                    data-tc="button-pagination-next"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M14 7l-5 5 5 5V7z"
+                          />
+                          <path
+                            d="M24 0v24H0V0h24z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                      data-tc="button-pagination-next"
+                      tabindex="0"
+                      type="button"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
+                      <span
+                        class="MuiIconButton-label-id"
                       >
-                        <path
-                          d="M10 17l5-5-5-5v10z"
-                        />
-                        <path
-                          d="M0 24V0h24v24H0z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M10 17l5-5-5-5v10z"
+                          />
+                          <path
+                            d="M0 24V0h24v24H0z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </div>
                 </div>
-              </div>
-            </td>
-          </tr>
-        </tfoot>
-        <tbody
-          class="MuiTableBody-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id"
+              </td>
+            </tr>
+          </tfoot>
+          <tbody
+            class="MuiTableBody-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-              colspan="2"
+            <tr
+              class="MuiTableRow-root-id"
             >
-              No service accounts found
-            </td>
-          </tr>
-        </tbody>
-      </table>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id"
+                colspan="2"
+              >
+                No service accounts found
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
     </div>
   </div>
 </div>
@@ -113595,10 +114207,10 @@ exports[`Storyshots Views / Shipping / Create shipping zone default 1`] = `
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -113606,7 +114218,7 @@ exports[`Storyshots Views / Shipping / Create shipping zone default 1`] = `
           Create New Shipping Zone
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -113717,48 +114329,52 @@ exports[`Storyshots Views / Shipping / Create shipping zone default 1`] = `
             <div
               class="MuiCardContent-root-id makeStyles-root-id"
             >
-              <table
-                class="MuiTable-root-id"
+              <div
+                class="ResponsiveTable-root-id"
               >
-                <tbody
-                  class="MuiTableBody-root-id"
+                <table
+                  class="MuiTable-root-id"
                 >
-                  <tr
-                    class="MuiTableRow-root-id makeStyles-pointer-id"
+                  <tbody
+                    class="MuiTableBody-root-id"
                   >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-wideColumn-id makeStyles-toLeft-id"
+                    <tr
+                      class="MuiTableRow-root-id makeStyles-pointer-id"
                     >
-                      0 Countries
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id makeStyles-iconCell-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id MuiIconButton-root-id"
-                        tabindex="0"
-                        type="button"
+                      <td
+                        class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-wideColumn-id makeStyles-toLeft-id"
                       >
-                        <span
-                          class="MuiIconButton-label-id"
+                        0 Countries
+                      </td>
+                      <td
+                        class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id makeStyles-iconCell-id"
+                      >
+                        <button
+                          class="MuiButtonBase-root-id MuiIconButton-root-id"
+                          tabindex="0"
+                          type="button"
                         >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            role="presentation"
-                            viewBox="0 0 24 24"
+                          <span
+                            class="MuiIconButton-label-id"
                           >
-                            <path
-                              d="M7 10l5 5 5-5z"
-                            />
-                          </svg>
-                        </span>
-                      </button>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
+                            <svg
+                              aria-hidden="true"
+                              class="MuiSvgIcon-root-id"
+                              focusable="false"
+                              role="presentation"
+                              viewBox="0 0 24 24"
+                            >
+                              <path
+                                d="M7 10l5 5 5-5z"
+                              />
+                            </svg>
+                          </span>
+                        </button>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
             </div>
           </div>
         </div>
@@ -113774,10 +114390,10 @@ exports[`Storyshots Views / Shipping / Create shipping zone form errors 1`] = `
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -113785,7 +114401,7 @@ exports[`Storyshots Views / Shipping / Create shipping zone form errors 1`] = `
           Create New Shipping Zone
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -113901,48 +114517,52 @@ exports[`Storyshots Views / Shipping / Create shipping zone form errors 1`] = `
             <div
               class="MuiCardContent-root-id makeStyles-root-id"
             >
-              <table
-                class="MuiTable-root-id"
+              <div
+                class="ResponsiveTable-root-id"
               >
-                <tbody
-                  class="MuiTableBody-root-id"
+                <table
+                  class="MuiTable-root-id"
                 >
-                  <tr
-                    class="MuiTableRow-root-id makeStyles-pointer-id"
+                  <tbody
+                    class="MuiTableBody-root-id"
                   >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-wideColumn-id makeStyles-toLeft-id"
+                    <tr
+                      class="MuiTableRow-root-id makeStyles-pointer-id"
                     >
-                      0 Countries
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id makeStyles-iconCell-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id MuiIconButton-root-id"
-                        tabindex="0"
-                        type="button"
+                      <td
+                        class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-wideColumn-id makeStyles-toLeft-id"
                       >
-                        <span
-                          class="MuiIconButton-label-id"
+                        0 Countries
+                      </td>
+                      <td
+                        class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id makeStyles-iconCell-id"
+                      >
+                        <button
+                          class="MuiButtonBase-root-id MuiIconButton-root-id"
+                          tabindex="0"
+                          type="button"
                         >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            role="presentation"
-                            viewBox="0 0 24 24"
+                          <span
+                            class="MuiIconButton-label-id"
                           >
-                            <path
-                              d="M7 10l5 5 5-5z"
-                            />
-                          </svg>
-                        </span>
-                      </button>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
+                            <svg
+                              aria-hidden="true"
+                              class="MuiSvgIcon-root-id"
+                              focusable="false"
+                              role="presentation"
+                              viewBox="0 0 24 24"
+                            >
+                              <path
+                                d="M7 10l5 5 5-5z"
+                              />
+                            </svg>
+                          </span>
+                        </button>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
             </div>
           </div>
         </div>
@@ -113958,10 +114578,10 @@ exports[`Storyshots Views / Shipping / Shipping zone details default 1`] = `
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -113969,7 +114589,7 @@ exports[`Storyshots Views / Shipping / Shipping zone details default 1`] = `
           Europe
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -114080,48 +114700,52 @@ exports[`Storyshots Views / Shipping / Shipping zone details default 1`] = `
             <div
               class="MuiCardContent-root-id makeStyles-root-id"
             >
-              <table
-                class="MuiTable-root-id"
+              <div
+                class="ResponsiveTable-root-id"
               >
-                <tbody
-                  class="MuiTableBody-root-id"
+                <table
+                  class="MuiTable-root-id"
                 >
-                  <tr
-                    class="MuiTableRow-root-id makeStyles-pointer-id"
+                  <tbody
+                    class="MuiTableBody-root-id"
                   >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-wideColumn-id makeStyles-toLeft-id"
+                    <tr
+                      class="MuiTableRow-root-id makeStyles-pointer-id"
                     >
-                      51 Countries
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id makeStyles-iconCell-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id MuiIconButton-root-id"
-                        tabindex="0"
-                        type="button"
+                      <td
+                        class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-wideColumn-id makeStyles-toLeft-id"
                       >
-                        <span
-                          class="MuiIconButton-label-id"
+                        51 Countries
+                      </td>
+                      <td
+                        class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id makeStyles-iconCell-id"
+                      >
+                        <button
+                          class="MuiButtonBase-root-id MuiIconButton-root-id"
+                          tabindex="0"
+                          type="button"
                         >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            role="presentation"
-                            viewBox="0 0 24 24"
+                          <span
+                            class="MuiIconButton-label-id"
                           >
-                            <path
-                              d="M7 10l5 5 5-5z"
-                            />
-                          </svg>
-                        </span>
-                      </button>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
+                            <svg
+                              aria-hidden="true"
+                              class="MuiSvgIcon-root-id"
+                              focusable="false"
+                              role="presentation"
+                              viewBox="0 0 24 24"
+                            >
+                              <path
+                                d="M7 10l5 5 5-5z"
+                              />
+                            </svg>
+                          </span>
+                        </button>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
             </div>
           </div>
           <div
@@ -114160,186 +114784,190 @@ exports[`Storyshots Views / Shipping / Shipping zone details default 1`] = `
             <hr
               class="makeStyles-hr-id"
             />
-            <table
-              class="MuiTable-root-id"
+            <div
+              class="ResponsiveTable-root-id"
             >
-              <thead
-                class="MuiTableHead-root-id"
+              <table
+                class="MuiTable-root-id"
               >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
+                <thead
+                  class="MuiTableHead-root-id"
                 >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-nameColumn-id"
-                    scope="col"
+                  <tr
+                    class="MuiTableRow-root-id MuiTableRow-head-id"
                   >
-                    Name
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-valueColumn-id"
-                    scope="col"
-                  >
-                    Value Range
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-nameColumn-id"
-                    scope="col"
-                  >
-                    Price
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id"
-                    scope="col"
-                  />
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id"
-                    scope="col"
-                  />
-                </tr>
-              </thead>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-hover-id"
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-nameColumn-id"
+                      scope="col"
+                    >
+                      Name
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-valueColumn-id"
+                      scope="col"
+                    >
+                      Value Range
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-nameColumn-id"
+                      scope="col"
+                    >
+                      Price
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id"
+                      scope="col"
+                    />
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id"
+                      scope="col"
+                    />
+                  </tr>
+                </thead>
+                <tbody
+                  class="MuiTableBody-root-id"
                 >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-nameColumn-id"
+                  <tr
+                    class="MuiTableRow-root-id MuiTableRow-hover-id"
                   >
-                    UPS
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    from $0.00
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    $48.11
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
-                      tabindex="0"
-                      type="button"
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-nameColumn-id"
                     >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          role="presentation"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
-                          />
-                        </svg>
-                      </span>
-                    </button>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
-                      tabindex="0"
-                      type="button"
+                      UPS
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
                     >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          role="presentation"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                          />
-                        </svg>
-                      </span>
-                    </button>
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-hover-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-nameColumn-id"
-                  >
-                    DHL
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    from $0.00
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    $95.24
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
-                      tabindex="0"
-                      type="button"
+                      from $0.00
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
                     >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          role="presentation"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
-                          />
-                        </svg>
-                      </span>
-                    </button>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
-                      tabindex="0"
-                      type="button"
+                      $48.11
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
                     >
-                      <span
-                        class="MuiIconButton-label-id"
+                      <button
+                        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
+                        tabindex="0"
+                        type="button"
                       >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          role="presentation"
-                          viewBox="0 0 24 24"
+                        <span
+                          class="MuiIconButton-label-id"
                         >
-                          <path
-                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                          />
-                        </svg>
-                      </span>
-                    </button>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiIconButton-label-id"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </td>
+                  </tr>
+                  <tr
+                    class="MuiTableRow-root-id MuiTableRow-hover-id"
+                  >
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-nameColumn-id"
+                    >
+                      DHL
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                    >
+                      from $0.00
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                    >
+                      $95.24
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiIconButton-label-id"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiIconButton-label-id"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
           </div>
           <div
             class="makeStyles-spacer-id"
@@ -114377,186 +115005,190 @@ exports[`Storyshots Views / Shipping / Shipping zone details default 1`] = `
             <hr
               class="makeStyles-hr-id"
             />
-            <table
-              class="MuiTable-root-id"
+            <div
+              class="ResponsiveTable-root-id"
             >
-              <thead
-                class="MuiTableHead-root-id"
+              <table
+                class="MuiTable-root-id"
               >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
+                <thead
+                  class="MuiTableHead-root-id"
                 >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-nameColumn-id"
-                    scope="col"
+                  <tr
+                    class="MuiTableRow-root-id MuiTableRow-head-id"
                   >
-                    Name
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-valueColumn-id"
-                    scope="col"
-                  >
-                    Weight Range
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-nameColumn-id"
-                    scope="col"
-                  >
-                    Price
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id"
-                    scope="col"
-                  />
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id"
-                    scope="col"
-                  />
-                </tr>
-              </thead>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-hover-id"
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-nameColumn-id"
+                      scope="col"
+                    >
+                      Name
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-valueColumn-id"
+                      scope="col"
+                    >
+                      Weight Range
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-nameColumn-id"
+                      scope="col"
+                    >
+                      Price
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id"
+                      scope="col"
+                    />
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id"
+                      scope="col"
+                    />
+                  </tr>
+                </thead>
+                <tbody
+                  class="MuiTableBody-root-id"
                 >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-nameColumn-id"
+                  <tr
+                    class="MuiTableRow-root-id MuiTableRow-hover-id"
                   >
-                    DB Schenker
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    0 kg - 80 kg
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    $45.93
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
-                      tabindex="0"
-                      type="button"
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-nameColumn-id"
                     >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          role="presentation"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
-                          />
-                        </svg>
-                      </span>
-                    </button>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
-                      tabindex="0"
-                      type="button"
+                      DB Schenker
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
                     >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          role="presentation"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                          />
-                        </svg>
-                      </span>
-                    </button>
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-hover-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-nameColumn-id"
-                  >
-                    Registred priority
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    from 0 kg
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    $73.87
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
-                      tabindex="0"
-                      type="button"
+                      0 kg - 80 kg
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
                     >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          role="presentation"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
-                          />
-                        </svg>
-                      </span>
-                    </button>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
-                      tabindex="0"
-                      type="button"
+                      $45.93
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
                     >
-                      <span
-                        class="MuiIconButton-label-id"
+                      <button
+                        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
+                        tabindex="0"
+                        type="button"
                       >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          role="presentation"
-                          viewBox="0 0 24 24"
+                        <span
+                          class="MuiIconButton-label-id"
                         >
-                          <path
-                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                          />
-                        </svg>
-                      </span>
-                    </button>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiIconButton-label-id"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </td>
+                  </tr>
+                  <tr
+                    class="MuiTableRow-root-id MuiTableRow-hover-id"
+                  >
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-nameColumn-id"
+                    >
+                      Registred priority
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                    >
+                      from 0 kg
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                    >
+                      $73.87
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiIconButton-label-id"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiIconButton-label-id"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
           </div>
         </div>
       </div>
@@ -114571,10 +115203,10 @@ exports[`Storyshots Views / Shipping / Shipping zone details form errors 1`] = `
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -114582,7 +115214,7 @@ exports[`Storyshots Views / Shipping / Shipping zone details form errors 1`] = `
           Europe
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -114698,48 +115330,52 @@ exports[`Storyshots Views / Shipping / Shipping zone details form errors 1`] = `
             <div
               class="MuiCardContent-root-id makeStyles-root-id"
             >
-              <table
-                class="MuiTable-root-id"
+              <div
+                class="ResponsiveTable-root-id"
               >
-                <tbody
-                  class="MuiTableBody-root-id"
+                <table
+                  class="MuiTable-root-id"
                 >
-                  <tr
-                    class="MuiTableRow-root-id makeStyles-pointer-id"
+                  <tbody
+                    class="MuiTableBody-root-id"
                   >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-wideColumn-id makeStyles-toLeft-id"
+                    <tr
+                      class="MuiTableRow-root-id makeStyles-pointer-id"
                     >
-                      51 Countries
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id makeStyles-iconCell-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id MuiIconButton-root-id"
-                        tabindex="0"
-                        type="button"
+                      <td
+                        class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-wideColumn-id makeStyles-toLeft-id"
                       >
-                        <span
-                          class="MuiIconButton-label-id"
+                        51 Countries
+                      </td>
+                      <td
+                        class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id makeStyles-iconCell-id"
+                      >
+                        <button
+                          class="MuiButtonBase-root-id MuiIconButton-root-id"
+                          tabindex="0"
+                          type="button"
                         >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            role="presentation"
-                            viewBox="0 0 24 24"
+                          <span
+                            class="MuiIconButton-label-id"
                           >
-                            <path
-                              d="M7 10l5 5 5-5z"
-                            />
-                          </svg>
-                        </span>
-                      </button>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
+                            <svg
+                              aria-hidden="true"
+                              class="MuiSvgIcon-root-id"
+                              focusable="false"
+                              role="presentation"
+                              viewBox="0 0 24 24"
+                            >
+                              <path
+                                d="M7 10l5 5 5-5z"
+                              />
+                            </svg>
+                          </span>
+                        </button>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
             </div>
           </div>
           <div
@@ -114778,186 +115414,190 @@ exports[`Storyshots Views / Shipping / Shipping zone details form errors 1`] = `
             <hr
               class="makeStyles-hr-id"
             />
-            <table
-              class="MuiTable-root-id"
+            <div
+              class="ResponsiveTable-root-id"
             >
-              <thead
-                class="MuiTableHead-root-id"
+              <table
+                class="MuiTable-root-id"
               >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
+                <thead
+                  class="MuiTableHead-root-id"
                 >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-nameColumn-id"
-                    scope="col"
+                  <tr
+                    class="MuiTableRow-root-id MuiTableRow-head-id"
                   >
-                    Name
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-valueColumn-id"
-                    scope="col"
-                  >
-                    Value Range
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-nameColumn-id"
-                    scope="col"
-                  >
-                    Price
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id"
-                    scope="col"
-                  />
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id"
-                    scope="col"
-                  />
-                </tr>
-              </thead>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-hover-id"
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-nameColumn-id"
+                      scope="col"
+                    >
+                      Name
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-valueColumn-id"
+                      scope="col"
+                    >
+                      Value Range
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-nameColumn-id"
+                      scope="col"
+                    >
+                      Price
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id"
+                      scope="col"
+                    />
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id"
+                      scope="col"
+                    />
+                  </tr>
+                </thead>
+                <tbody
+                  class="MuiTableBody-root-id"
                 >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-nameColumn-id"
+                  <tr
+                    class="MuiTableRow-root-id MuiTableRow-hover-id"
                   >
-                    UPS
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    from $0.00
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    $48.11
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
-                      tabindex="0"
-                      type="button"
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-nameColumn-id"
                     >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          role="presentation"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
-                          />
-                        </svg>
-                      </span>
-                    </button>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
-                      tabindex="0"
-                      type="button"
+                      UPS
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
                     >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          role="presentation"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                          />
-                        </svg>
-                      </span>
-                    </button>
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-hover-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-nameColumn-id"
-                  >
-                    DHL
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    from $0.00
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    $95.24
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
-                      tabindex="0"
-                      type="button"
+                      from $0.00
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
                     >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          role="presentation"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
-                          />
-                        </svg>
-                      </span>
-                    </button>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
-                      tabindex="0"
-                      type="button"
+                      $48.11
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
                     >
-                      <span
-                        class="MuiIconButton-label-id"
+                      <button
+                        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
+                        tabindex="0"
+                        type="button"
                       >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          role="presentation"
-                          viewBox="0 0 24 24"
+                        <span
+                          class="MuiIconButton-label-id"
                         >
-                          <path
-                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                          />
-                        </svg>
-                      </span>
-                    </button>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiIconButton-label-id"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </td>
+                  </tr>
+                  <tr
+                    class="MuiTableRow-root-id MuiTableRow-hover-id"
+                  >
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-nameColumn-id"
+                    >
+                      DHL
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                    >
+                      from $0.00
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                    >
+                      $95.24
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiIconButton-label-id"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiIconButton-label-id"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
           </div>
           <div
             class="makeStyles-spacer-id"
@@ -114995,186 +115635,190 @@ exports[`Storyshots Views / Shipping / Shipping zone details form errors 1`] = `
             <hr
               class="makeStyles-hr-id"
             />
-            <table
-              class="MuiTable-root-id"
+            <div
+              class="ResponsiveTable-root-id"
             >
-              <thead
-                class="MuiTableHead-root-id"
+              <table
+                class="MuiTable-root-id"
               >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
+                <thead
+                  class="MuiTableHead-root-id"
                 >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-nameColumn-id"
-                    scope="col"
+                  <tr
+                    class="MuiTableRow-root-id MuiTableRow-head-id"
                   >
-                    Name
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-valueColumn-id"
-                    scope="col"
-                  >
-                    Weight Range
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-nameColumn-id"
-                    scope="col"
-                  >
-                    Price
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id"
-                    scope="col"
-                  />
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id"
-                    scope="col"
-                  />
-                </tr>
-              </thead>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-hover-id"
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-nameColumn-id"
+                      scope="col"
+                    >
+                      Name
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-valueColumn-id"
+                      scope="col"
+                    >
+                      Weight Range
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-nameColumn-id"
+                      scope="col"
+                    >
+                      Price
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id"
+                      scope="col"
+                    />
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id"
+                      scope="col"
+                    />
+                  </tr>
+                </thead>
+                <tbody
+                  class="MuiTableBody-root-id"
                 >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-nameColumn-id"
+                  <tr
+                    class="MuiTableRow-root-id MuiTableRow-hover-id"
                   >
-                    DB Schenker
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    0 kg - 80 kg
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    $45.93
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
-                      tabindex="0"
-                      type="button"
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-nameColumn-id"
                     >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          role="presentation"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
-                          />
-                        </svg>
-                      </span>
-                    </button>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
-                      tabindex="0"
-                      type="button"
+                      DB Schenker
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
                     >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          role="presentation"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                          />
-                        </svg>
-                      </span>
-                    </button>
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-hover-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-nameColumn-id"
-                  >
-                    Registred priority
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    from 0 kg
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    $73.87
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
-                      tabindex="0"
-                      type="button"
+                      0 kg - 80 kg
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
                     >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          role="presentation"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
-                          />
-                        </svg>
-                      </span>
-                    </button>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
-                      tabindex="0"
-                      type="button"
+                      $45.93
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
                     >
-                      <span
-                        class="MuiIconButton-label-id"
+                      <button
+                        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
+                        tabindex="0"
+                        type="button"
                       >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          role="presentation"
-                          viewBox="0 0 24 24"
+                        <span
+                          class="MuiIconButton-label-id"
                         >
-                          <path
-                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                          />
-                        </svg>
-                      </span>
-                    </button>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiIconButton-label-id"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </td>
+                  </tr>
+                  <tr
+                    class="MuiTableRow-root-id MuiTableRow-hover-id"
+                  >
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-nameColumn-id"
+                    >
+                      Registred priority
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                    >
+                      from 0 kg
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                    >
+                      $73.87
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiIconButton-label-id"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiIconButton-label-id"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
           </div>
         </div>
       </div>
@@ -115189,10 +115833,10 @@ exports[`Storyshots Views / Shipping / Shipping zone details loading 1`] = `
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -115205,7 +115849,7 @@ exports[`Storyshots Views / Shipping / Shipping zone details loading 1`] = `
           </span>
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -115316,48 +115960,52 @@ exports[`Storyshots Views / Shipping / Shipping zone details loading 1`] = `
             <div
               class="MuiCardContent-root-id makeStyles-root-id"
             >
-              <table
-                class="MuiTable-root-id"
+              <div
+                class="ResponsiveTable-root-id"
               >
-                <tbody
-                  class="MuiTableBody-root-id"
+                <table
+                  class="MuiTable-root-id"
                 >
-                  <tr
-                    class="MuiTableRow-root-id makeStyles-pointer-id"
+                  <tbody
+                    class="MuiTableBody-root-id"
                   >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-wideColumn-id makeStyles-toLeft-id"
+                    <tr
+                      class="MuiTableRow-root-id makeStyles-pointer-id"
                     >
-                      ... Countries
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id makeStyles-iconCell-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id MuiIconButton-root-id"
-                        tabindex="0"
-                        type="button"
+                      <td
+                        class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-wideColumn-id makeStyles-toLeft-id"
                       >
-                        <span
-                          class="MuiIconButton-label-id"
+                        ... Countries
+                      </td>
+                      <td
+                        class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id makeStyles-iconCell-id"
+                      >
+                        <button
+                          class="MuiButtonBase-root-id MuiIconButton-root-id"
+                          tabindex="0"
+                          type="button"
                         >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            role="presentation"
-                            viewBox="0 0 24 24"
+                          <span
+                            class="MuiIconButton-label-id"
                           >
-                            <path
-                              d="M7 10l5 5 5-5z"
-                            />
-                          </svg>
-                        </span>
-                      </button>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
+                            <svg
+                              aria-hidden="true"
+                              class="MuiSvgIcon-root-id"
+                              focusable="false"
+                              role="presentation"
+                              viewBox="0 0 24 24"
+                            >
+                              <path
+                                d="M7 10l5 5 5-5z"
+                              />
+                            </svg>
+                          </span>
+                        </button>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
             </div>
           </div>
           <div
@@ -115396,131 +116044,135 @@ exports[`Storyshots Views / Shipping / Shipping zone details loading 1`] = `
             <hr
               class="makeStyles-hr-id"
             />
-            <table
-              class="MuiTable-root-id"
+            <div
+              class="ResponsiveTable-root-id"
             >
-              <thead
-                class="MuiTableHead-root-id"
+              <table
+                class="MuiTable-root-id"
               >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
+                <thead
+                  class="MuiTableHead-root-id"
                 >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-nameColumn-id"
-                    scope="col"
+                  <tr
+                    class="MuiTableRow-root-id MuiTableRow-head-id"
                   >
-                    Name
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-valueColumn-id"
-                    scope="col"
-                  >
-                    Value Range
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-nameColumn-id"
-                    scope="col"
-                  >
-                    Price
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id"
-                    scope="col"
-                  />
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id"
-                    scope="col"
-                  />
-                </tr>
-              </thead>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id"
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-nameColumn-id"
+                      scope="col"
+                    >
+                      Name
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-valueColumn-id"
+                      scope="col"
+                    >
+                      Value Range
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-nameColumn-id"
+                      scope="col"
+                    >
+                      Price
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id"
+                      scope="col"
+                    />
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id"
+                      scope="col"
+                    />
+                  </tr>
+                </thead>
+                <tbody
+                  class="MuiTableBody-root-id"
                 >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-nameColumn-id"
+                  <tr
+                    class="MuiTableRow-root-id"
                   >
-                    <span
-                      class="makeStyles-skeleton-id"
-                    >
-                      ‌
-                    </span>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    <span
-                      class="makeStyles-skeleton-id"
-                    >
-                      ‌
-                    </span>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    <span
-                      class="makeStyles-skeleton-id"
-                    >
-                      ‌
-                    </span>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-nameColumn-id"
                     >
                       <span
-                        class="MuiIconButton-label-id"
+                        class="makeStyles-skeleton-id"
                       >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          role="presentation"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
-                          />
-                        </svg>
+                        ‌
                       </span>
-                    </button>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
                     >
                       <span
-                        class="MuiIconButton-label-id"
+                        class="makeStyles-skeleton-id"
                       >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          role="presentation"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                          />
-                        </svg>
+                        ‌
                       </span>
-                    </button>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                    >
+                      <span
+                        class="makeStyles-skeleton-id"
+                      >
+                        ‌
+                      </span>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                        disabled=""
+                        tabindex="-1"
+                        type="button"
+                      >
+                        <span
+                          class="MuiIconButton-label-id"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                        disabled=""
+                        tabindex="-1"
+                        type="button"
+                      >
+                        <span
+                          class="MuiIconButton-label-id"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
           </div>
           <div
             class="makeStyles-spacer-id"
@@ -115558,131 +116210,135 @@ exports[`Storyshots Views / Shipping / Shipping zone details loading 1`] = `
             <hr
               class="makeStyles-hr-id"
             />
-            <table
-              class="MuiTable-root-id"
+            <div
+              class="ResponsiveTable-root-id"
             >
-              <thead
-                class="MuiTableHead-root-id"
+              <table
+                class="MuiTable-root-id"
               >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
+                <thead
+                  class="MuiTableHead-root-id"
                 >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-nameColumn-id"
-                    scope="col"
+                  <tr
+                    class="MuiTableRow-root-id MuiTableRow-head-id"
                   >
-                    Name
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-valueColumn-id"
-                    scope="col"
-                  >
-                    Weight Range
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-nameColumn-id"
-                    scope="col"
-                  >
-                    Price
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id"
-                    scope="col"
-                  />
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id"
-                    scope="col"
-                  />
-                </tr>
-              </thead>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id"
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-nameColumn-id"
+                      scope="col"
+                    >
+                      Name
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-valueColumn-id"
+                      scope="col"
+                    >
+                      Weight Range
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-nameColumn-id"
+                      scope="col"
+                    >
+                      Price
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id"
+                      scope="col"
+                    />
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id"
+                      scope="col"
+                    />
+                  </tr>
+                </thead>
+                <tbody
+                  class="MuiTableBody-root-id"
                 >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-nameColumn-id"
+                  <tr
+                    class="MuiTableRow-root-id"
                   >
-                    <span
-                      class="makeStyles-skeleton-id"
-                    >
-                      ‌
-                    </span>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    <span
-                      class="makeStyles-skeleton-id"
-                    >
-                      ‌
-                    </span>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    <span
-                      class="makeStyles-skeleton-id"
-                    >
-                      ‌
-                    </span>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-nameColumn-id"
                     >
                       <span
-                        class="MuiIconButton-label-id"
+                        class="makeStyles-skeleton-id"
                       >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          role="presentation"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
-                          />
-                        </svg>
+                        ‌
                       </span>
-                    </button>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
                     >
                       <span
-                        class="MuiIconButton-label-id"
+                        class="makeStyles-skeleton-id"
                       >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          role="presentation"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                          />
-                        </svg>
+                        ‌
                       </span>
-                    </button>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                    >
+                      <span
+                        class="makeStyles-skeleton-id"
+                      >
+                        ‌
+                      </span>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                        disabled=""
+                        tabindex="-1"
+                        type="button"
+                      >
+                        <span
+                          class="MuiIconButton-label-id"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                        disabled=""
+                        tabindex="-1"
+                        type="button"
+                      >
+                        <span
+                          class="MuiIconButton-label-id"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
           </div>
         </div>
       </div>
@@ -115696,10 +116352,10 @@ exports[`Storyshots Views / Shipping / Shipping zones list default 1`] = `
   style="padding:24px"
 >
   <div
-    class="makeStyles-root-id"
+    class="Container-root-id"
   >
     <div
-      class="makeStyles-root-id"
+      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
         class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -115707,7 +116363,7 @@ exports[`Storyshots Views / Shipping / Shipping zones list default 1`] = `
         Shipping
       </div>
       <div
-        class="makeStyles-action-id"
+        class="ExtendedPageHeader-action-id"
       >
         <div
           class="makeStyles-root-id"
@@ -115751,437 +116407,441 @@ exports[`Storyshots Views / Shipping / Shipping zones list default 1`] = `
           <hr
             class="makeStyles-hr-id"
           />
-          <table
-            class="MuiTable-root-id"
+          <div
+            class="ResponsiveTable-root-id"
           >
-            <thead
-              class="MuiTableHead-root-id"
+            <table
+              class="MuiTable-root-id"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
+              <thead
+                class="MuiTableHead-root-id"
               >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
-                  scope="col"
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
-                  <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
-                    tabindex="0"
-                    type="button"
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
+                    scope="col"
                   >
-                    <input
-                      class="makeStyles-box-id"
-                      type="checkbox"
-                      value="false"
-                    />
-                  </button>
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
-                  scope="col"
-                >
-                  Name
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colCountries-id"
-                  scope="col"
-                >
-                  Countries
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id"
-                  scope="col"
-                />
-              </tr>
-            </thead>
-            <tfoot
-              class="MuiTableFooter-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-footer-id"
+                    <button
+                      class="MuiButtonBase-root-id makeStyles-root-id"
+                      tabindex="0"
+                      type="button"
+                    >
+                      <input
+                        class="makeStyles-box-id"
+                        type="checkbox"
+                        value="false"
+                      />
+                    </button>
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                    scope="col"
+                  >
+                    Name
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colCountries-id"
+                    scope="col"
+                  >
+                    Countries
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id"
+                    scope="col"
+                  />
+                </tr>
+              </thead>
+              <tfoot
+                class="MuiTableFooter-root-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
-                  colspan="4"
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-footer-id"
                 >
-                  <div
-                    class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                    colspan="4"
                   >
                     <div
-                      class="makeStyles-spacer-id"
+                      class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
                     >
-                      <div>
-                        <span
-                          class="RowNumberSelect-label-id"
-                        >
-                          No of Rows:
-                        </span>
-                        <div
-                          class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
-                        >
+                      <div
+                        class="makeStyles-spacer-id"
+                      >
+                        <div>
+                          <span
+                            class="RowNumberSelect-label-id"
+                          >
+                            No of Rows:
+                          </span>
                           <div
-                            aria-haspopup="listbox"
-                            aria-labelledby=" "
-                            class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-id"
-                            role="button"
-                            tabindex="0"
+                            class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                           >
-                            20
-                          </div>
-                          <input
-                            type="hidden"
-                            value="20"
-                          />
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MuiSelect-icon-id"
-                            focusable="false"
-                            role="presentation"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M7 10l5 5 5-5z"
+                            <div
+                              aria-haspopup="listbox"
+                              aria-labelledby=" "
+                              class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-id"
+                              role="button"
+                              tabindex="0"
+                            >
+                              20
+                            </div>
+                            <input
+                              type="hidden"
+                              value="20"
                             />
-                          </svg>
+                            <svg
+                              aria-hidden="true"
+                              class="MuiSvgIcon-root-id MuiSelect-icon-id"
+                              focusable="false"
+                              role="presentation"
+                              viewBox="0 0 24 24"
+                            >
+                              <path
+                                d="M7 10l5 5 5-5z"
+                              />
+                            </svg>
+                          </div>
                         </div>
                       </div>
-                    </div>
-                    <div
-                      class="makeStyles-root-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                        data-tc="button-pagination-back"
-                        disabled=""
-                        tabindex="-1"
-                        type="button"
+                      <div
+                        class="makeStyles-root-id"
                       >
-                        <span
-                          class="MuiIconButton-label-id"
+                        <button
+                          class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                          data-tc="button-pagination-back"
+                          disabled=""
+                          tabindex="-1"
+                          type="button"
                         >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            role="presentation"
-                            viewBox="0 0 24 24"
+                          <span
+                            class="MuiIconButton-label-id"
                           >
-                            <path
-                              d="M14 7l-5 5 5 5V7z"
-                            />
-                            <path
-                              d="M24 0v24H0V0h24z"
-                              fill="none"
-                            />
-                          </svg>
-                        </span>
-                      </button>
-                      <button
-                        class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
-                        data-tc="button-pagination-next"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <span
-                          class="MuiIconButton-label-id"
+                            <svg
+                              aria-hidden="true"
+                              class="MuiSvgIcon-root-id"
+                              focusable="false"
+                              role="presentation"
+                              viewBox="0 0 24 24"
+                            >
+                              <path
+                                d="M14 7l-5 5 5 5V7z"
+                              />
+                              <path
+                                d="M24 0v24H0V0h24z"
+                                fill="none"
+                              />
+                            </svg>
+                          </span>
+                        </button>
+                        <button
+                          class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                          data-tc="button-pagination-next"
+                          tabindex="0"
+                          type="button"
                         >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            role="presentation"
-                            viewBox="0 0 24 24"
+                          <span
+                            class="MuiIconButton-label-id"
                           >
-                            <path
-                              d="M10 17l5-5-5-5v10z"
-                            />
-                            <path
-                              d="M0 24V0h24v24H0z"
-                              fill="none"
-                            />
-                          </svg>
-                        </span>
-                      </button>
+                            <svg
+                              aria-hidden="true"
+                              class="MuiSvgIcon-root-id"
+                              focusable="false"
+                              role="presentation"
+                              viewBox="0 0 24 24"
+                            >
+                              <path
+                                d="M10 17l5-5-5-5v10z"
+                              />
+                              <path
+                                d="M0 24V0h24v24H0z"
+                                fill="none"
+                              />
+                            </svg>
+                          </span>
+                        </button>
+                      </div>
                     </div>
-                  </div>
-                </td>
-              </tr>
-            </tfoot>
-            <tbody
-              class="MuiTableBody-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id makeStyles-row-id MuiTableRow-hover-id"
+                  </td>
+                </tr>
+              </tfoot>
+              <tbody
+                class="MuiTableBody-root-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+                <tr
+                  class="MuiTableRow-root-id makeStyles-row-id MuiTableRow-hover-id"
                 >
-                  <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
-                    tabindex="0"
-                    type="button"
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                   >
-                    <input
-                      class="makeStyles-box-id"
-                      type="checkbox"
-                      value="false"
-                    />
-                  </button>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
-                >
-                  Europe
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCountries-id"
-                >
-                  51
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-alignRight-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
+                    <button
+                      class="MuiButtonBase-root-id makeStyles-root-id"
+                      tabindex="0"
+                      type="button"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id makeStyles-row-id MuiTableRow-hover-id"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
-                    tabindex="0"
-                    type="button"
+                      <input
+                        class="makeStyles-box-id"
+                        type="checkbox"
+                        value="false"
+                      />
+                    </button>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
                   >
-                    <input
-                      class="makeStyles-box-id"
-                      type="checkbox"
-                      value="false"
-                    />
-                  </button>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
-                >
-                  Oceania
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCountries-id"
-                >
-                  29
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-alignRight-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
-                    tabindex="0"
-                    type="button"
+                    Europe
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCountries-id"
                   >
-                    <span
-                      class="MuiIconButton-label-id"
+                    51
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-alignRight-id"
+                  >
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
+                      tabindex="0"
+                      type="button"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
+                      <span
+                        class="MuiIconButton-label-id"
                       >
-                        <path
-                          d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id makeStyles-row-id MuiTableRow-hover-id"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </td>
+                </tr>
+                <tr
+                  class="MuiTableRow-root-id makeStyles-row-id MuiTableRow-hover-id"
                 >
-                  <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
-                    tabindex="0"
-                    type="button"
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                   >
-                    <input
-                      class="makeStyles-box-id"
-                      type="checkbox"
-                      value="false"
-                    />
-                  </button>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
-                >
-                  Asia
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCountries-id"
-                >
-                  51
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-alignRight-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
+                    <button
+                      class="MuiButtonBase-root-id makeStyles-root-id"
+                      tabindex="0"
+                      type="button"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id makeStyles-row-id MuiTableRow-hover-id"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
-                    tabindex="0"
-                    type="button"
+                      <input
+                        class="makeStyles-box-id"
+                        type="checkbox"
+                        value="false"
+                      />
+                    </button>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
                   >
-                    <input
-                      class="makeStyles-box-id"
-                      type="checkbox"
-                      value="false"
-                    />
-                  </button>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
-                >
-                  Americas
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCountries-id"
-                >
-                  57
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-alignRight-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
-                    tabindex="0"
-                    type="button"
+                    Oceania
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCountries-id"
                   >
-                    <span
-                      class="MuiIconButton-label-id"
+                    29
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-alignRight-id"
+                  >
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
+                      tabindex="0"
+                      type="button"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
+                      <span
+                        class="MuiIconButton-label-id"
                       >
-                        <path
-                          d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id makeStyles-row-id MuiTableRow-hover-id"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </td>
+                </tr>
+                <tr
+                  class="MuiTableRow-root-id makeStyles-row-id MuiTableRow-hover-id"
                 >
-                  <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
-                    tabindex="0"
-                    type="button"
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                   >
-                    <input
-                      class="makeStyles-box-id"
-                      type="checkbox"
-                      value="false"
-                    />
-                  </button>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
-                >
-                  Africa
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCountries-id"
-                >
-                  60
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-alignRight-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
+                    <button
+                      class="MuiButtonBase-root-id makeStyles-root-id"
+                      tabindex="0"
+                      type="button"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
+                      <input
+                        class="makeStyles-box-id"
+                        type="checkbox"
+                        value="false"
+                      />
+                    </button>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                  >
+                    Asia
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCountries-id"
+                  >
+                    51
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-alignRight-id"
+                  >
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
+                      tabindex="0"
+                      type="button"
+                    >
+                      <span
+                        class="MuiIconButton-label-id"
                       >
-                        <path
-                          d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                </td>
-              </tr>
-            </tbody>
-          </table>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </td>
+                </tr>
+                <tr
+                  class="MuiTableRow-root-id makeStyles-row-id MuiTableRow-hover-id"
+                >
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+                  >
+                    <button
+                      class="MuiButtonBase-root-id makeStyles-root-id"
+                      tabindex="0"
+                      type="button"
+                    >
+                      <input
+                        class="makeStyles-box-id"
+                        type="checkbox"
+                        value="false"
+                      />
+                    </button>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                  >
+                    Americas
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCountries-id"
+                  >
+                    57
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-alignRight-id"
+                  >
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
+                      tabindex="0"
+                      type="button"
+                    >
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </td>
+                </tr>
+                <tr
+                  class="MuiTableRow-root-id makeStyles-row-id MuiTableRow-hover-id"
+                >
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+                  >
+                    <button
+                      class="MuiButtonBase-root-id makeStyles-root-id"
+                      tabindex="0"
+                      type="button"
+                    >
+                      <input
+                        class="makeStyles-box-id"
+                        type="checkbox"
+                        value="false"
+                      />
+                    </button>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                  >
+                    Africa
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCountries-id"
+                  >
+                    60
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-alignRight-id"
+                  >
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
+                      tabindex="0"
+                      type="button"
+                    >
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
         </div>
       </div>
       <div>
@@ -116301,10 +116961,10 @@ exports[`Storyshots Views / Shipping / Shipping zones list loading 1`] = `
   style="padding:24px"
 >
   <div
-    class="makeStyles-root-id"
+    class="Container-root-id"
   >
     <div
-      class="makeStyles-root-id"
+      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
         class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -116312,7 +116972,7 @@ exports[`Storyshots Views / Shipping / Shipping zones list loading 1`] = `
         Shipping
       </div>
       <div
-        class="makeStyles-action-id"
+        class="ExtendedPageHeader-action-id"
       >
         <div
           class="makeStyles-root-id"
@@ -116356,235 +117016,239 @@ exports[`Storyshots Views / Shipping / Shipping zones list loading 1`] = `
           <hr
             class="makeStyles-hr-id"
           />
-          <table
-            class="MuiTable-root-id"
+          <div
+            class="ResponsiveTable-root-id"
           >
-            <thead
-              class="MuiTableHead-root-id"
+            <table
+              class="MuiTable-root-id"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
+              <thead
+                class="MuiTableHead-root-id"
               >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
-                  scope="col"
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
-                  <button
-                    class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
-                    disabled=""
-                    tabindex="-1"
-                    type="button"
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
+                    scope="col"
                   >
-                    <input
-                      class="makeStyles-box-id makeStyles-disabled-id"
+                    <button
+                      class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
                       disabled=""
-                      type="checkbox"
-                      value="false"
-                    />
-                  </button>
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
-                  scope="col"
-                >
-                  Name
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colCountries-id"
-                  scope="col"
-                >
-                  Countries
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id"
-                  scope="col"
-                />
-              </tr>
-            </thead>
-            <tfoot
-              class="MuiTableFooter-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-footer-id"
+                      tabindex="-1"
+                      type="button"
+                    >
+                      <input
+                        class="makeStyles-box-id makeStyles-disabled-id"
+                        disabled=""
+                        type="checkbox"
+                        value="false"
+                      />
+                    </button>
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                    scope="col"
+                  >
+                    Name
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colCountries-id"
+                    scope="col"
+                  >
+                    Countries
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id"
+                    scope="col"
+                  />
+                </tr>
+              </thead>
+              <tfoot
+                class="MuiTableFooter-root-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
-                  colspan="4"
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-footer-id"
                 >
-                  <div
-                    class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                    colspan="4"
                   >
                     <div
-                      class="makeStyles-spacer-id"
+                      class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
                     >
-                      <div>
-                        <span
-                          class="RowNumberSelect-label-id"
-                        >
-                          No of Rows:
-                        </span>
-                        <div
-                          class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
-                        >
+                      <div
+                        class="makeStyles-spacer-id"
+                      >
+                        <div>
+                          <span
+                            class="RowNumberSelect-label-id"
+                          >
+                            No of Rows:
+                          </span>
                           <div
-                            aria-haspopup="listbox"
-                            aria-labelledby=" "
-                            class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-id"
-                            role="button"
-                            tabindex="0"
+                            class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                           >
-                            20
-                          </div>
-                          <input
-                            type="hidden"
-                            value="20"
-                          />
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MuiSelect-icon-id"
-                            focusable="false"
-                            role="presentation"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M7 10l5 5 5-5z"
+                            <div
+                              aria-haspopup="listbox"
+                              aria-labelledby=" "
+                              class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-id"
+                              role="button"
+                              tabindex="0"
+                            >
+                              20
+                            </div>
+                            <input
+                              type="hidden"
+                              value="20"
                             />
-                          </svg>
+                            <svg
+                              aria-hidden="true"
+                              class="MuiSvgIcon-root-id MuiSelect-icon-id"
+                              focusable="false"
+                              role="presentation"
+                              viewBox="0 0 24 24"
+                            >
+                              <path
+                                d="M7 10l5 5 5-5z"
+                              />
+                            </svg>
+                          </div>
                         </div>
                       </div>
-                    </div>
-                    <div
-                      class="makeStyles-root-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                        data-tc="button-pagination-back"
-                        disabled=""
-                        tabindex="-1"
-                        type="button"
+                      <div
+                        class="makeStyles-root-id"
                       >
-                        <span
-                          class="MuiIconButton-label-id"
+                        <button
+                          class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                          data-tc="button-pagination-back"
+                          disabled=""
+                          tabindex="-1"
+                          type="button"
                         >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            role="presentation"
-                            viewBox="0 0 24 24"
+                          <span
+                            class="MuiIconButton-label-id"
                           >
-                            <path
-                              d="M14 7l-5 5 5 5V7z"
-                            />
-                            <path
-                              d="M24 0v24H0V0h24z"
-                              fill="none"
-                            />
-                          </svg>
-                        </span>
-                      </button>
-                      <button
-                        class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                        data-tc="button-pagination-next"
-                        disabled=""
-                        tabindex="-1"
-                        type="button"
-                      >
-                        <span
-                          class="MuiIconButton-label-id"
+                            <svg
+                              aria-hidden="true"
+                              class="MuiSvgIcon-root-id"
+                              focusable="false"
+                              role="presentation"
+                              viewBox="0 0 24 24"
+                            >
+                              <path
+                                d="M14 7l-5 5 5 5V7z"
+                              />
+                              <path
+                                d="M24 0v24H0V0h24z"
+                                fill="none"
+                              />
+                            </svg>
+                          </span>
+                        </button>
+                        <button
+                          class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                          data-tc="button-pagination-next"
+                          disabled=""
+                          tabindex="-1"
+                          type="button"
                         >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            role="presentation"
-                            viewBox="0 0 24 24"
+                          <span
+                            class="MuiIconButton-label-id"
                           >
-                            <path
-                              d="M10 17l5-5-5-5v10z"
-                            />
-                            <path
-                              d="M0 24V0h24v24H0z"
-                              fill="none"
-                            />
-                          </svg>
-                        </span>
-                      </button>
+                            <svg
+                              aria-hidden="true"
+                              class="MuiSvgIcon-root-id"
+                              focusable="false"
+                              role="presentation"
+                              viewBox="0 0 24 24"
+                            >
+                              <path
+                                d="M10 17l5-5-5-5v10z"
+                              />
+                              <path
+                                d="M0 24V0h24v24H0z"
+                                fill="none"
+                              />
+                            </svg>
+                          </span>
+                        </button>
+                      </div>
                     </div>
-                  </div>
-                </td>
-              </tr>
-            </tfoot>
-            <tbody
-              class="MuiTableBody-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id makeStyles-row-id"
+                  </td>
+                </tr>
+              </tfoot>
+              <tbody
+                class="MuiTableBody-root-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+                <tr
+                  class="MuiTableRow-root-id makeStyles-row-id"
                 >
-                  <button
-                    class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
-                    disabled=""
-                    tabindex="-1"
-                    type="button"
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                   >
-                    <input
-                      class="makeStyles-box-id makeStyles-disabled-id"
+                    <button
+                      class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
                       disabled=""
-                      type="checkbox"
-                      value="false"
-                    />
-                  </button>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
-                >
-                  <span
-                    class="makeStyles-skeleton-id"
-                  >
-                    ‌
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCountries-id"
-                >
-                  <span
-                    class="makeStyles-skeleton-id"
-                  >
-                    ‌
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-alignRight-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                    disabled=""
-                    tabindex="-1"
-                    type="button"
+                      tabindex="-1"
+                      type="button"
+                    >
+                      <input
+                        class="makeStyles-box-id makeStyles-disabled-id"
+                        disabled=""
+                        type="checkbox"
+                        value="false"
+                      />
+                    </button>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
                   >
                     <span
-                      class="MuiIconButton-label-id"
+                      class="makeStyles-skeleton-id"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                        />
-                      </svg>
+                      ‌
                     </span>
-                  </button>
-                </td>
-              </tr>
-            </tbody>
-          </table>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCountries-id"
+                  >
+                    <span
+                      class="makeStyles-skeleton-id"
+                    >
+                      ‌
+                    </span>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-alignRight-id"
+                  >
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      disabled=""
+                      tabindex="-1"
+                      type="button"
+                    >
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
         </div>
       </div>
       <div>
@@ -116703,10 +117367,10 @@ exports[`Storyshots Views / Shipping / Shipping zones list no data 1`] = `
   style="padding:24px"
 >
   <div
-    class="makeStyles-root-id"
+    class="Container-root-id"
   >
     <div
-      class="makeStyles-root-id"
+      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
         class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -116714,7 +117378,7 @@ exports[`Storyshots Views / Shipping / Shipping zones list no data 1`] = `
         Shipping
       </div>
       <div
-        class="makeStyles-action-id"
+        class="ExtendedPageHeader-action-id"
       >
         <div
           class="makeStyles-root-id"
@@ -116758,161 +117422,165 @@ exports[`Storyshots Views / Shipping / Shipping zones list no data 1`] = `
           <hr
             class="makeStyles-hr-id"
           />
-          <table
-            class="MuiTable-root-id"
+          <div
+            class="ResponsiveTable-root-id"
           >
-            <thead
-              class="MuiTableHead-root-id"
+            <table
+              class="MuiTable-root-id"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
+              <thead
+                class="MuiTableHead-root-id"
               >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
-                  scope="col"
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
-                  Name
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colCountries-id"
-                  scope="col"
-                >
-                  Countries
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id"
-                  scope="col"
-                />
-              </tr>
-            </thead>
-            <tfoot
-              class="MuiTableFooter-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-footer-id"
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                    scope="col"
+                  >
+                    Name
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colCountries-id"
+                    scope="col"
+                  >
+                    Countries
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id"
+                    scope="col"
+                  />
+                </tr>
+              </thead>
+              <tfoot
+                class="MuiTableFooter-root-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
-                  colspan="4"
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-footer-id"
                 >
-                  <div
-                    class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                    colspan="4"
                   >
                     <div
-                      class="makeStyles-spacer-id"
+                      class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
                     >
-                      <div>
-                        <span
-                          class="RowNumberSelect-label-id"
-                        >
-                          No of Rows:
-                        </span>
-                        <div
-                          class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
-                        >
+                      <div
+                        class="makeStyles-spacer-id"
+                      >
+                        <div>
+                          <span
+                            class="RowNumberSelect-label-id"
+                          >
+                            No of Rows:
+                          </span>
                           <div
-                            aria-haspopup="listbox"
-                            aria-labelledby=" "
-                            class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-id"
-                            role="button"
-                            tabindex="0"
+                            class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                           >
-                            20
-                          </div>
-                          <input
-                            type="hidden"
-                            value="20"
-                          />
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MuiSelect-icon-id"
-                            focusable="false"
-                            role="presentation"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M7 10l5 5 5-5z"
+                            <div
+                              aria-haspopup="listbox"
+                              aria-labelledby=" "
+                              class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-id"
+                              role="button"
+                              tabindex="0"
+                            >
+                              20
+                            </div>
+                            <input
+                              type="hidden"
+                              value="20"
                             />
-                          </svg>
+                            <svg
+                              aria-hidden="true"
+                              class="MuiSvgIcon-root-id MuiSelect-icon-id"
+                              focusable="false"
+                              role="presentation"
+                              viewBox="0 0 24 24"
+                            >
+                              <path
+                                d="M7 10l5 5 5-5z"
+                              />
+                            </svg>
+                          </div>
                         </div>
                       </div>
-                    </div>
-                    <div
-                      class="makeStyles-root-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                        data-tc="button-pagination-back"
-                        disabled=""
-                        tabindex="-1"
-                        type="button"
+                      <div
+                        class="makeStyles-root-id"
                       >
-                        <span
-                          class="MuiIconButton-label-id"
+                        <button
+                          class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                          data-tc="button-pagination-back"
+                          disabled=""
+                          tabindex="-1"
+                          type="button"
                         >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            role="presentation"
-                            viewBox="0 0 24 24"
+                          <span
+                            class="MuiIconButton-label-id"
                           >
-                            <path
-                              d="M14 7l-5 5 5 5V7z"
-                            />
-                            <path
-                              d="M24 0v24H0V0h24z"
-                              fill="none"
-                            />
-                          </svg>
-                        </span>
-                      </button>
-                      <button
-                        class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
-                        data-tc="button-pagination-next"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <span
-                          class="MuiIconButton-label-id"
+                            <svg
+                              aria-hidden="true"
+                              class="MuiSvgIcon-root-id"
+                              focusable="false"
+                              role="presentation"
+                              viewBox="0 0 24 24"
+                            >
+                              <path
+                                d="M14 7l-5 5 5 5V7z"
+                              />
+                              <path
+                                d="M24 0v24H0V0h24z"
+                                fill="none"
+                              />
+                            </svg>
+                          </span>
+                        </button>
+                        <button
+                          class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                          data-tc="button-pagination-next"
+                          tabindex="0"
+                          type="button"
                         >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            role="presentation"
-                            viewBox="0 0 24 24"
+                          <span
+                            class="MuiIconButton-label-id"
                           >
-                            <path
-                              d="M10 17l5-5-5-5v10z"
-                            />
-                            <path
-                              d="M0 24V0h24v24H0z"
-                              fill="none"
-                            />
-                          </svg>
-                        </span>
-                      </button>
+                            <svg
+                              aria-hidden="true"
+                              class="MuiSvgIcon-root-id"
+                              focusable="false"
+                              role="presentation"
+                              viewBox="0 0 24 24"
+                            >
+                              <path
+                                d="M10 17l5-5-5-5v10z"
+                              />
+                              <path
+                                d="M0 24V0h24v24H0z"
+                                fill="none"
+                              />
+                            </svg>
+                          </span>
+                        </button>
+                      </div>
                     </div>
-                  </div>
-                </td>
-              </tr>
-            </tfoot>
-            <tbody
-              class="MuiTableBody-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id"
+                  </td>
+                </tr>
+              </tfoot>
+              <tbody
+                class="MuiTableBody-root-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                  colspan="4"
+                <tr
+                  class="MuiTableRow-root-id"
                 >
-                  No shipping zones found
-                </td>
-              </tr>
-            </tbody>
-          </table>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                    colspan="4"
+                  >
+                    No shipping zones found
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
         </div>
       </div>
       <div>
@@ -117032,10 +117700,10 @@ exports[`Storyshots Views / Shipping / Shipping zones list no site settings perm
   style="padding:24px"
 >
   <div
-    class="makeStyles-root-id"
+    class="Container-root-id"
   >
     <div
-      class="makeStyles-root-id"
+      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
         class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -117043,7 +117711,7 @@ exports[`Storyshots Views / Shipping / Shipping zones list no site settings perm
         Shipping
       </div>
       <div
-        class="makeStyles-action-id"
+        class="ExtendedPageHeader-action-id"
       >
         <div
           class="makeStyles-root-id"
@@ -117087,437 +117755,441 @@ exports[`Storyshots Views / Shipping / Shipping zones list no site settings perm
           <hr
             class="makeStyles-hr-id"
           />
-          <table
-            class="MuiTable-root-id"
+          <div
+            class="ResponsiveTable-root-id"
           >
-            <thead
-              class="MuiTableHead-root-id"
+            <table
+              class="MuiTable-root-id"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
+              <thead
+                class="MuiTableHead-root-id"
               >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
-                  scope="col"
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
-                  <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
-                    tabindex="0"
-                    type="button"
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
+                    scope="col"
                   >
-                    <input
-                      class="makeStyles-box-id"
-                      type="checkbox"
-                      value="false"
-                    />
-                  </button>
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
-                  scope="col"
-                >
-                  Name
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colCountries-id"
-                  scope="col"
-                >
-                  Countries
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id"
-                  scope="col"
-                />
-              </tr>
-            </thead>
-            <tfoot
-              class="MuiTableFooter-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-footer-id"
+                    <button
+                      class="MuiButtonBase-root-id makeStyles-root-id"
+                      tabindex="0"
+                      type="button"
+                    >
+                      <input
+                        class="makeStyles-box-id"
+                        type="checkbox"
+                        value="false"
+                      />
+                    </button>
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                    scope="col"
+                  >
+                    Name
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colCountries-id"
+                    scope="col"
+                  >
+                    Countries
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id"
+                    scope="col"
+                  />
+                </tr>
+              </thead>
+              <tfoot
+                class="MuiTableFooter-root-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
-                  colspan="4"
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-footer-id"
                 >
-                  <div
-                    class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                    colspan="4"
                   >
                     <div
-                      class="makeStyles-spacer-id"
+                      class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
                     >
-                      <div>
-                        <span
-                          class="RowNumberSelect-label-id"
-                        >
-                          No of Rows:
-                        </span>
-                        <div
-                          class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
-                        >
+                      <div
+                        class="makeStyles-spacer-id"
+                      >
+                        <div>
+                          <span
+                            class="RowNumberSelect-label-id"
+                          >
+                            No of Rows:
+                          </span>
                           <div
-                            aria-haspopup="listbox"
-                            aria-labelledby=" "
-                            class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-id"
-                            role="button"
-                            tabindex="0"
+                            class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                           >
-                            20
-                          </div>
-                          <input
-                            type="hidden"
-                            value="20"
-                          />
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MuiSelect-icon-id"
-                            focusable="false"
-                            role="presentation"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M7 10l5 5 5-5z"
+                            <div
+                              aria-haspopup="listbox"
+                              aria-labelledby=" "
+                              class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-id"
+                              role="button"
+                              tabindex="0"
+                            >
+                              20
+                            </div>
+                            <input
+                              type="hidden"
+                              value="20"
                             />
-                          </svg>
+                            <svg
+                              aria-hidden="true"
+                              class="MuiSvgIcon-root-id MuiSelect-icon-id"
+                              focusable="false"
+                              role="presentation"
+                              viewBox="0 0 24 24"
+                            >
+                              <path
+                                d="M7 10l5 5 5-5z"
+                              />
+                            </svg>
+                          </div>
                         </div>
                       </div>
-                    </div>
-                    <div
-                      class="makeStyles-root-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                        data-tc="button-pagination-back"
-                        disabled=""
-                        tabindex="-1"
-                        type="button"
+                      <div
+                        class="makeStyles-root-id"
                       >
-                        <span
-                          class="MuiIconButton-label-id"
+                        <button
+                          class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                          data-tc="button-pagination-back"
+                          disabled=""
+                          tabindex="-1"
+                          type="button"
                         >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            role="presentation"
-                            viewBox="0 0 24 24"
+                          <span
+                            class="MuiIconButton-label-id"
                           >
-                            <path
-                              d="M14 7l-5 5 5 5V7z"
-                            />
-                            <path
-                              d="M24 0v24H0V0h24z"
-                              fill="none"
-                            />
-                          </svg>
-                        </span>
-                      </button>
-                      <button
-                        class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
-                        data-tc="button-pagination-next"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <span
-                          class="MuiIconButton-label-id"
+                            <svg
+                              aria-hidden="true"
+                              class="MuiSvgIcon-root-id"
+                              focusable="false"
+                              role="presentation"
+                              viewBox="0 0 24 24"
+                            >
+                              <path
+                                d="M14 7l-5 5 5 5V7z"
+                              />
+                              <path
+                                d="M24 0v24H0V0h24z"
+                                fill="none"
+                              />
+                            </svg>
+                          </span>
+                        </button>
+                        <button
+                          class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                          data-tc="button-pagination-next"
+                          tabindex="0"
+                          type="button"
                         >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            role="presentation"
-                            viewBox="0 0 24 24"
+                          <span
+                            class="MuiIconButton-label-id"
                           >
-                            <path
-                              d="M10 17l5-5-5-5v10z"
-                            />
-                            <path
-                              d="M0 24V0h24v24H0z"
-                              fill="none"
-                            />
-                          </svg>
-                        </span>
-                      </button>
+                            <svg
+                              aria-hidden="true"
+                              class="MuiSvgIcon-root-id"
+                              focusable="false"
+                              role="presentation"
+                              viewBox="0 0 24 24"
+                            >
+                              <path
+                                d="M10 17l5-5-5-5v10z"
+                              />
+                              <path
+                                d="M0 24V0h24v24H0z"
+                                fill="none"
+                              />
+                            </svg>
+                          </span>
+                        </button>
+                      </div>
                     </div>
-                  </div>
-                </td>
-              </tr>
-            </tfoot>
-            <tbody
-              class="MuiTableBody-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id makeStyles-row-id MuiTableRow-hover-id"
+                  </td>
+                </tr>
+              </tfoot>
+              <tbody
+                class="MuiTableBody-root-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+                <tr
+                  class="MuiTableRow-root-id makeStyles-row-id MuiTableRow-hover-id"
                 >
-                  <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
-                    tabindex="0"
-                    type="button"
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                   >
-                    <input
-                      class="makeStyles-box-id"
-                      type="checkbox"
-                      value="false"
-                    />
-                  </button>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
-                >
-                  Europe
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCountries-id"
-                >
-                  51
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-alignRight-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
+                    <button
+                      class="MuiButtonBase-root-id makeStyles-root-id"
+                      tabindex="0"
+                      type="button"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id makeStyles-row-id MuiTableRow-hover-id"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
-                    tabindex="0"
-                    type="button"
+                      <input
+                        class="makeStyles-box-id"
+                        type="checkbox"
+                        value="false"
+                      />
+                    </button>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
                   >
-                    <input
-                      class="makeStyles-box-id"
-                      type="checkbox"
-                      value="false"
-                    />
-                  </button>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
-                >
-                  Oceania
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCountries-id"
-                >
-                  29
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-alignRight-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
-                    tabindex="0"
-                    type="button"
+                    Europe
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCountries-id"
                   >
-                    <span
-                      class="MuiIconButton-label-id"
+                    51
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-alignRight-id"
+                  >
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
+                      tabindex="0"
+                      type="button"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
+                      <span
+                        class="MuiIconButton-label-id"
                       >
-                        <path
-                          d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id makeStyles-row-id MuiTableRow-hover-id"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </td>
+                </tr>
+                <tr
+                  class="MuiTableRow-root-id makeStyles-row-id MuiTableRow-hover-id"
                 >
-                  <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
-                    tabindex="0"
-                    type="button"
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                   >
-                    <input
-                      class="makeStyles-box-id"
-                      type="checkbox"
-                      value="false"
-                    />
-                  </button>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
-                >
-                  Asia
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCountries-id"
-                >
-                  51
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-alignRight-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
+                    <button
+                      class="MuiButtonBase-root-id makeStyles-root-id"
+                      tabindex="0"
+                      type="button"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id makeStyles-row-id MuiTableRow-hover-id"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
-                    tabindex="0"
-                    type="button"
+                      <input
+                        class="makeStyles-box-id"
+                        type="checkbox"
+                        value="false"
+                      />
+                    </button>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
                   >
-                    <input
-                      class="makeStyles-box-id"
-                      type="checkbox"
-                      value="false"
-                    />
-                  </button>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
-                >
-                  Americas
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCountries-id"
-                >
-                  57
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-alignRight-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
-                    tabindex="0"
-                    type="button"
+                    Oceania
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCountries-id"
                   >
-                    <span
-                      class="MuiIconButton-label-id"
+                    29
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-alignRight-id"
+                  >
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
+                      tabindex="0"
+                      type="button"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
+                      <span
+                        class="MuiIconButton-label-id"
                       >
-                        <path
-                          d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id makeStyles-row-id MuiTableRow-hover-id"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </td>
+                </tr>
+                <tr
+                  class="MuiTableRow-root-id makeStyles-row-id MuiTableRow-hover-id"
                 >
-                  <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
-                    tabindex="0"
-                    type="button"
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                   >
-                    <input
-                      class="makeStyles-box-id"
-                      type="checkbox"
-                      value="false"
-                    />
-                  </button>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
-                >
-                  Africa
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCountries-id"
-                >
-                  60
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-alignRight-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
+                    <button
+                      class="MuiButtonBase-root-id makeStyles-root-id"
+                      tabindex="0"
+                      type="button"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
+                      <input
+                        class="makeStyles-box-id"
+                        type="checkbox"
+                        value="false"
+                      />
+                    </button>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                  >
+                    Asia
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCountries-id"
+                  >
+                    51
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-alignRight-id"
+                  >
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
+                      tabindex="0"
+                      type="button"
+                    >
+                      <span
+                        class="MuiIconButton-label-id"
                       >
-                        <path
-                          d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                </td>
-              </tr>
-            </tbody>
-          </table>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </td>
+                </tr>
+                <tr
+                  class="MuiTableRow-root-id makeStyles-row-id MuiTableRow-hover-id"
+                >
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+                  >
+                    <button
+                      class="MuiButtonBase-root-id makeStyles-root-id"
+                      tabindex="0"
+                      type="button"
+                    >
+                      <input
+                        class="makeStyles-box-id"
+                        type="checkbox"
+                        value="false"
+                      />
+                    </button>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                  >
+                    Americas
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCountries-id"
+                  >
+                    57
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-alignRight-id"
+                  >
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
+                      tabindex="0"
+                      type="button"
+                    >
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </td>
+                </tr>
+                <tr
+                  class="MuiTableRow-root-id makeStyles-row-id MuiTableRow-hover-id"
+                >
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+                  >
+                    <button
+                      class="MuiButtonBase-root-id makeStyles-root-id"
+                      tabindex="0"
+                      type="button"
+                    >
+                      <input
+                        class="makeStyles-box-id"
+                        type="checkbox"
+                        value="false"
+                      />
+                    </button>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                  >
+                    Africa
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCountries-id"
+                  >
+                    60
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-alignRight-id"
+                  >
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
+                      tabindex="0"
+                      type="button"
+                    >
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
         </div>
       </div>
       <div />
@@ -117532,10 +118204,10 @@ exports[`Storyshots Views / Site settings / Page default 1`] = `
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -117543,7 +118215,7 @@ exports[`Storyshots Views / Site settings / Page default 1`] = `
           General Informations
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -118305,77 +118977,81 @@ exports[`Storyshots Views / Site settings / Page default 1`] = `
           <hr
             class="makeStyles-hr-id"
           />
-          <table
-            class="MuiTable-root-id"
+          <div
+            class="ResponsiveTable-root-id"
           >
-            <thead
-              class="MuiTableHead-root-id"
+            <table
+              class="MuiTable-root-id"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
+              <thead
+                class="MuiTableHead-root-id"
               >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id"
-                  scope="col"
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
-                  Authentication Type
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id"
-                  scope="col"
-                >
-                  Key
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id"
-                  scope="col"
-                />
-              </tr>
-            </thead>
-            <tbody
-              class="MuiTableBody-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-hover-id"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  Facebook
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  n1n62jkn2123:123n
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-iconCell-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id"
-                    tabindex="0"
-                    type="button"
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id"
+                    scope="col"
                   >
-                    <span
-                      class="MuiIconButton-label-id"
+                    Authentication Type
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id"
+                    scope="col"
+                  >
+                    Key
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id"
+                    scope="col"
+                  />
+                </tr>
+              </thead>
+              <tbody
+                class="MuiTableBody-root-id"
+              >
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-hover-id"
+                >
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    Facebook
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    n1n62jkn2123:123n
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-iconCell-id"
+                  >
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id"
+                      tabindex="0"
+                      type="button"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
+                      <span
+                        class="MuiIconButton-label-id"
                       >
-                        <path
-                          d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                </td>
-              </tr>
-            </tbody>
-          </table>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
         </div>
       </div>
     </div>
@@ -118389,10 +119065,10 @@ exports[`Storyshots Views / Site settings / Page form errors 1`] = `
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -118400,7 +119076,7 @@ exports[`Storyshots Views / Site settings / Page form errors 1`] = `
           General Informations
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -119172,77 +119848,81 @@ exports[`Storyshots Views / Site settings / Page form errors 1`] = `
           <hr
             class="makeStyles-hr-id"
           />
-          <table
-            class="MuiTable-root-id"
+          <div
+            class="ResponsiveTable-root-id"
           >
-            <thead
-              class="MuiTableHead-root-id"
+            <table
+              class="MuiTable-root-id"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
+              <thead
+                class="MuiTableHead-root-id"
               >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id"
-                  scope="col"
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
-                  Authentication Type
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id"
-                  scope="col"
-                >
-                  Key
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id"
-                  scope="col"
-                />
-              </tr>
-            </thead>
-            <tbody
-              class="MuiTableBody-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-hover-id"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  Facebook
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  n1n62jkn2123:123n
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-iconCell-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id"
-                    tabindex="0"
-                    type="button"
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id"
+                    scope="col"
                   >
-                    <span
-                      class="MuiIconButton-label-id"
+                    Authentication Type
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id"
+                    scope="col"
+                  >
+                    Key
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id"
+                    scope="col"
+                  />
+                </tr>
+              </thead>
+              <tbody
+                class="MuiTableBody-root-id"
+              >
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-hover-id"
+                >
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    Facebook
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    n1n62jkn2123:123n
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-iconCell-id"
+                  >
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id"
+                      tabindex="0"
+                      type="button"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
+                      <span
+                        class="MuiIconButton-label-id"
                       >
-                        <path
-                          d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                </td>
-              </tr>
-            </tbody>
-          </table>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
         </div>
       </div>
     </div>
@@ -119256,10 +119936,10 @@ exports[`Storyshots Views / Site settings / Page loading 1`] = `
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -119267,7 +119947,7 @@ exports[`Storyshots Views / Site settings / Page loading 1`] = `
           General Informations
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -120046,85 +120726,89 @@ exports[`Storyshots Views / Site settings / Page loading 1`] = `
           <hr
             class="makeStyles-hr-id"
           />
-          <table
-            class="MuiTable-root-id"
+          <div
+            class="ResponsiveTable-root-id"
           >
-            <thead
-              class="MuiTableHead-root-id"
+            <table
+              class="MuiTable-root-id"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
+              <thead
+                class="MuiTableHead-root-id"
               >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id"
-                  scope="col"
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
-                  Authentication Type
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id"
-                  scope="col"
-                >
-                  Key
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id"
-                  scope="col"
-                />
-              </tr>
-            </thead>
-            <tbody
-              class="MuiTableBody-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id"
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id"
+                    scope="col"
+                  >
+                    Authentication Type
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id"
+                    scope="col"
+                  >
+                    Key
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id"
+                    scope="col"
+                  />
+                </tr>
+              </thead>
+              <tbody
+                class="MuiTableBody-root-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                <tr
+                  class="MuiTableRow-root-id"
                 >
-                  <span
-                    class="makeStyles-skeleton-id"
-                  >
-                    ‌
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  <span
-                    class="makeStyles-skeleton-id"
-                  >
-                    ‌
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-iconCell-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id"
-                    tabindex="0"
-                    type="button"
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
                   >
                     <span
-                      class="MuiIconButton-label-id"
+                      class="makeStyles-skeleton-id"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                        />
-                      </svg>
+                      ‌
                     </span>
-                  </button>
-                </td>
-              </tr>
-            </tbody>
-          </table>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    <span
+                      class="makeStyles-skeleton-id"
+                    >
+                      ‌
+                    </span>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-iconCell-id"
+                  >
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id"
+                      tabindex="0"
+                      type="button"
+                    >
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
         </div>
       </div>
     </div>
@@ -120138,10 +120822,10 @@ exports[`Storyshots Views / Staff / Staff member details default 1`] = `
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -120149,7 +120833,7 @@ exports[`Storyshots Views / Staff / Staff member details default 1`] = `
           Jacob Smith
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -120449,10 +121133,10 @@ exports[`Storyshots Views / Staff / Staff member details himself 1`] = `
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -120460,7 +121144,7 @@ exports[`Storyshots Views / Staff / Staff member details himself 1`] = `
           Jacob Smith
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -120769,10 +121453,10 @@ exports[`Storyshots Views / Staff / Staff member details loading 1`] = `
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -120785,7 +121469,7 @@ exports[`Storyshots Views / Staff / Staff member details loading 1`] = `
           </span>
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -121424,10 +122108,10 @@ exports[`Storyshots Views / Staff / Staff member details not admin 1`] = `
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -121435,7 +122119,7 @@ exports[`Storyshots Views / Staff / Staff member details not admin 1`] = `
           Jacob Smith
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -122040,10 +122724,10 @@ exports[`Storyshots Views / Staff / Staff members default 1`] = `
   style="padding:24px"
 >
   <div
-    class="makeStyles-root-id"
+    class="Container-root-id"
   >
     <div
-      class="makeStyles-root-id"
+      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
         class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -122051,7 +122735,7 @@ exports[`Storyshots Views / Staff / Staff members default 1`] = `
         Staff Members
       </div>
       <div
-        class="makeStyles-action-id"
+        class="ExtendedPageHeader-action-id"
       >
         <div
           class="makeStyles-root-id"
@@ -122147,519 +122831,523 @@ exports[`Storyshots Views / Staff / Staff members default 1`] = `
       <hr
         class="makeStyles-root-id"
       />
-      <table
-        class="MuiTable-root-id"
+      <div
+        class="ResponsiveTable-root-id"
       >
-        <thead
-          class="MuiTableHead-root-id"
+        <table
+          class="MuiTable-root-id"
         >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-head-id"
+          <thead
+            class="MuiTableHead-root-id"
           >
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-wideColumn-id"
-              scope="col"
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-head-id"
             >
-              Name
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id"
-              scope="col"
-            >
-              Email Address
-            </th>
-          </tr>
-        </thead>
-        <tfoot
-          class="MuiTableFooter-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-footer-id"
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-wideColumn-id"
+                scope="col"
+              >
+                Name
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id"
+                scope="col"
+              >
+                Email Address
+              </th>
+            </tr>
+          </thead>
+          <tfoot
+            class="MuiTableFooter-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
-              colspan="3"
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-footer-id"
             >
-              <div
-                class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                colspan="3"
               >
                 <div
-                  class="makeStyles-spacer-id"
+                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
                 >
-                  <div>
-                    <span
-                      class="RowNumberSelect-label-id"
-                    >
-                      No of Rows:
-                    </span>
-                    <div
-                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
-                    >
+                  <div
+                    class="makeStyles-spacer-id"
+                  >
+                    <div>
+                      <span
+                        class="RowNumberSelect-label-id"
+                      >
+                        No of Rows:
+                      </span>
                       <div
-                        aria-haspopup="listbox"
-                        aria-labelledby=" "
-                        class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-id"
-                        role="button"
-                        tabindex="0"
+                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                       >
-                        20
-                      </div>
-                      <input
-                        type="hidden"
-                        value="20"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MuiSelect-icon-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M7 10l5 5 5-5z"
+                        <div
+                          aria-haspopup="listbox"
+                          aria-labelledby=" "
+                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-id"
+                          role="button"
+                          tabindex="0"
+                        >
+                          20
+                        </div>
+                        <input
+                          type="hidden"
+                          value="20"
                         />
-                      </svg>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M7 10l5 5 5-5z"
+                          />
+                        </svg>
+                      </div>
                     </div>
                   </div>
+                  <div
+                    class="makeStyles-root-id"
+                  >
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      data-tc="button-pagination-back"
+                      disabled=""
+                      tabindex="-1"
+                      type="button"
+                    >
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M14 7l-5 5 5 5V7z"
+                          />
+                          <path
+                            d="M24 0v24H0V0h24z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                      data-tc="button-pagination-next"
+                      tabindex="0"
+                      type="button"
+                    >
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M10 17l5-5-5-5v10z"
+                          />
+                          <path
+                            d="M0 24V0h24v24H0z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </div>
+                </div>
+              </td>
+            </tr>
+          </tfoot>
+          <tbody
+            class="MuiTableBody-root-id"
+          >
+            <tr
+              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id"
+              >
+                <div
+                  class="makeStyles-avatar-id"
+                >
+                  <img
+                    class="makeStyles-avatarImage-id"
+                    src="avatar1.png"
+                  />
                 </div>
                 <div
-                  class="makeStyles-root-id"
+                  class="MuiTypography-root-id MuiTypography-body1-id"
                 >
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                    data-tc="button-pagination-back"
-                    disabled=""
-                    tabindex="-1"
-                    type="button"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M14 7l-5 5 5 5V7z"
-                        />
-                        <path
-                          d="M24 0v24H0V0h24z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
-                    data-tc="button-pagination-next"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M10 17l5-5-5-5v10z"
-                        />
-                        <path
-                          d="M0 24V0h24v24H0z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
+                  Chris Cooper
                 </div>
-              </div>
-            </td>
-          </tr>
-        </tfoot>
-        <tbody
-          class="MuiTableBody-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
+                <div
+                  class="MuiTypography-root-id makeStyles-statusText-id MuiTypography-caption-id"
+                >
+                  Active
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id"
+              >
+                admin@example.com
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
             >
-              <div
-                class="makeStyles-avatar-id"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id"
               >
-                <img
-                  class="makeStyles-avatarImage-id"
-                  src="avatar1.png"
-                />
-              </div>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
+                <div
+                  class="makeStyles-avatar-id"
+                >
+                  <img
+                    class="makeStyles-avatarImage-id"
+                    src="avatar1.png"
+                  />
+                </div>
+                <div
+                  class="MuiTypography-root-id MuiTypography-body1-id"
+                >
+                  Jacob Smith
+                </div>
+                <div
+                  class="MuiTypography-root-id makeStyles-statusText-id MuiTypography-caption-id"
+                >
+                  Inactive
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id"
               >
-                Chris Cooper
-              </div>
-              <div
-                class="MuiTypography-root-id makeStyles-statusText-id MuiTypography-caption-id"
-              >
-                Active
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
+                admin@example.com
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
             >
-              admin@example.com
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id"
+              >
+                <div
+                  class="makeStyles-avatar-id"
+                >
+                  <img
+                    class="makeStyles-avatarImage-id"
+                    src="avatar1.png"
+                  />
+                </div>
+                <div
+                  class="MuiTypography-root-id MuiTypography-body1-id"
+                >
+                  Jacob Smith
+                </div>
+                <div
+                  class="MuiTypography-root-id makeStyles-statusText-id MuiTypography-caption-id"
+                >
+                  Active
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id"
+              >
+                admin@example.com
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
             >
-              <div
-                class="makeStyles-avatar-id"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id"
               >
-                <img
-                  class="makeStyles-avatarImage-id"
-                  src="avatar1.png"
-                />
-              </div>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
+                <div
+                  class="makeStyles-avatar-id"
+                >
+                  <img
+                    class="makeStyles-avatarImage-id"
+                    src="avatar1.png"
+                  />
+                </div>
+                <div
+                  class="MuiTypography-root-id MuiTypography-body1-id"
+                >
+                  Jacob Smith
+                </div>
+                <div
+                  class="MuiTypography-root-id makeStyles-statusText-id MuiTypography-caption-id"
+                >
+                  Active
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id"
               >
-                Jacob Smith
-              </div>
-              <div
-                class="MuiTypography-root-id makeStyles-statusText-id MuiTypography-caption-id"
-              >
-                Inactive
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
+                admin@example.com
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
             >
-              admin@example.com
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id"
+              >
+                <div
+                  class="makeStyles-avatar-id"
+                >
+                  <img
+                    class="makeStyles-avatarImage-id"
+                    src="avatar1.png"
+                  />
+                </div>
+                <div
+                  class="MuiTypography-root-id MuiTypography-body1-id"
+                >
+                  Jacob Smith
+                </div>
+                <div
+                  class="MuiTypography-root-id makeStyles-statusText-id MuiTypography-caption-id"
+                >
+                  Active
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id"
+              >
+                admin@example.com
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
             >
-              <div
-                class="makeStyles-avatar-id"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id"
               >
-                <img
-                  class="makeStyles-avatarImage-id"
-                  src="avatar1.png"
-                />
-              </div>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
+                <div
+                  class="makeStyles-avatar-id"
+                >
+                  <img
+                    class="makeStyles-avatarImage-id"
+                    src="avatar1.png"
+                  />
+                </div>
+                <div
+                  class="MuiTypography-root-id MuiTypography-body1-id"
+                >
+                  Jacob Smith
+                </div>
+                <div
+                  class="MuiTypography-root-id makeStyles-statusText-id MuiTypography-caption-id"
+                >
+                  Active
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id"
               >
-                Jacob Smith
-              </div>
-              <div
-                class="MuiTypography-root-id makeStyles-statusText-id MuiTypography-caption-id"
-              >
-                Active
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
+                admin@example.com
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
             >
-              admin@example.com
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id"
+              >
+                <div
+                  class="makeStyles-avatar-id"
+                >
+                  <img
+                    class="makeStyles-avatarImage-id"
+                    src="avatar1.png"
+                  />
+                </div>
+                <div
+                  class="MuiTypography-root-id MuiTypography-body1-id"
+                >
+                  Jacob Smith
+                </div>
+                <div
+                  class="MuiTypography-root-id makeStyles-statusText-id MuiTypography-caption-id"
+                >
+                  Inactive
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id"
+              >
+                admin@example.com
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
             >
-              <div
-                class="makeStyles-avatar-id"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id"
               >
-                <img
-                  class="makeStyles-avatarImage-id"
-                  src="avatar1.png"
-                />
-              </div>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
+                <div
+                  class="makeStyles-avatar-id"
+                >
+                  <img
+                    class="makeStyles-avatarImage-id"
+                    src="avatar1.png"
+                  />
+                </div>
+                <div
+                  class="MuiTypography-root-id MuiTypography-body1-id"
+                >
+                  Jacob Smith
+                </div>
+                <div
+                  class="MuiTypography-root-id makeStyles-statusText-id MuiTypography-caption-id"
+                >
+                  Active
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id"
               >
-                Jacob Smith
-              </div>
-              <div
-                class="MuiTypography-root-id makeStyles-statusText-id MuiTypography-caption-id"
-              >
-                Active
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
+                admin@example.com
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
             >
-              admin@example.com
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id"
+              >
+                <div
+                  class="makeStyles-avatar-id"
+                >
+                  <img
+                    class="makeStyles-avatarImage-id"
+                    src="avatar1.png"
+                  />
+                </div>
+                <div
+                  class="MuiTypography-root-id MuiTypography-body1-id"
+                >
+                  Jacob Smith
+                </div>
+                <div
+                  class="MuiTypography-root-id makeStyles-statusText-id MuiTypography-caption-id"
+                >
+                  Active
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id"
+              >
+                admin@example.com
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
             >
-              <div
-                class="makeStyles-avatar-id"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id"
               >
-                <img
-                  class="makeStyles-avatarImage-id"
-                  src="avatar1.png"
-                />
-              </div>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
+                <div
+                  class="makeStyles-avatar-id"
+                >
+                  <img
+                    class="makeStyles-avatarImage-id"
+                    src="avatar1.png"
+                  />
+                </div>
+                <div
+                  class="MuiTypography-root-id MuiTypography-body1-id"
+                >
+                  Jacob Smith
+                </div>
+                <div
+                  class="MuiTypography-root-id makeStyles-statusText-id MuiTypography-caption-id"
+                >
+                  Inactive
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id"
               >
-                Jacob Smith
-              </div>
-              <div
-                class="MuiTypography-root-id makeStyles-statusText-id MuiTypography-caption-id"
-              >
-                Active
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
+                admin@example.com
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
             >
-              admin@example.com
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id"
+              >
+                <div
+                  class="makeStyles-avatar-id"
+                >
+                  <img
+                    class="makeStyles-avatarImage-id"
+                    src="avatar1.png"
+                  />
+                </div>
+                <div
+                  class="MuiTypography-root-id MuiTypography-body1-id"
+                >
+                  Jacob Smith
+                </div>
+                <div
+                  class="MuiTypography-root-id makeStyles-statusText-id MuiTypography-caption-id"
+                >
+                  Inactive
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id"
+              >
+                admin@example.com
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
             >
-              <div
-                class="makeStyles-avatar-id"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id"
               >
-                <img
-                  class="makeStyles-avatarImage-id"
-                  src="avatar1.png"
-                />
-              </div>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
+                <div
+                  class="makeStyles-avatar-id"
+                >
+                  <img
+                    class="makeStyles-avatarImage-id"
+                    src="avatar1.png"
+                  />
+                </div>
+                <div
+                  class="MuiTypography-root-id MuiTypography-body1-id"
+                >
+                  Jacob Smith
+                </div>
+                <div
+                  class="MuiTypography-root-id makeStyles-statusText-id MuiTypography-caption-id"
+                >
+                  Active
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id"
               >
-                Jacob Smith
-              </div>
-              <div
-                class="MuiTypography-root-id makeStyles-statusText-id MuiTypography-caption-id"
-              >
-                Active
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              admin@example.com
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              <div
-                class="makeStyles-avatar-id"
-              >
-                <img
-                  class="makeStyles-avatarImage-id"
-                  src="avatar1.png"
-                />
-              </div>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Jacob Smith
-              </div>
-              <div
-                class="MuiTypography-root-id makeStyles-statusText-id MuiTypography-caption-id"
-              >
-                Inactive
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              admin@example.com
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              <div
-                class="makeStyles-avatar-id"
-              >
-                <img
-                  class="makeStyles-avatarImage-id"
-                  src="avatar1.png"
-                />
-              </div>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Jacob Smith
-              </div>
-              <div
-                class="MuiTypography-root-id makeStyles-statusText-id MuiTypography-caption-id"
-              >
-                Active
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              admin@example.com
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              <div
-                class="makeStyles-avatar-id"
-              >
-                <img
-                  class="makeStyles-avatarImage-id"
-                  src="avatar1.png"
-                />
-              </div>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Jacob Smith
-              </div>
-              <div
-                class="MuiTypography-root-id makeStyles-statusText-id MuiTypography-caption-id"
-              >
-                Active
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              admin@example.com
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              <div
-                class="makeStyles-avatar-id"
-              >
-                <img
-                  class="makeStyles-avatarImage-id"
-                  src="avatar1.png"
-                />
-              </div>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Jacob Smith
-              </div>
-              <div
-                class="MuiTypography-root-id makeStyles-statusText-id MuiTypography-caption-id"
-              >
-                Inactive
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              admin@example.com
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              <div
-                class="makeStyles-avatar-id"
-              >
-                <img
-                  class="makeStyles-avatarImage-id"
-                  src="avatar1.png"
-                />
-              </div>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Jacob Smith
-              </div>
-              <div
-                class="MuiTypography-root-id makeStyles-statusText-id MuiTypography-caption-id"
-              >
-                Inactive
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              admin@example.com
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              <div
-                class="makeStyles-avatar-id"
-              >
-                <img
-                  class="makeStyles-avatarImage-id"
-                  src="avatar1.png"
-                />
-              </div>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Jacob Smith
-              </div>
-              <div
-                class="MuiTypography-root-id makeStyles-statusText-id MuiTypography-caption-id"
-              >
-                Active
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              admin@example.com
-            </td>
-          </tr>
-        </tbody>
-      </table>
+                admin@example.com
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
     </div>
   </div>
 </div>
@@ -122670,10 +123358,10 @@ exports[`Storyshots Views / Staff / Staff members when loading 1`] = `
   style="padding:24px"
 >
   <div
-    class="makeStyles-root-id"
+    class="Container-root-id"
   >
     <div
-      class="makeStyles-root-id"
+      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
         class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -122681,7 +123369,7 @@ exports[`Storyshots Views / Staff / Staff members when loading 1`] = `
         Staff Members
       </div>
       <div
-        class="makeStyles-action-id"
+        class="ExtendedPageHeader-action-id"
       >
         <div
           class="makeStyles-root-id"
@@ -122777,194 +123465,198 @@ exports[`Storyshots Views / Staff / Staff members when loading 1`] = `
       <hr
         class="makeStyles-root-id"
       />
-      <table
-        class="MuiTable-root-id"
+      <div
+        class="ResponsiveTable-root-id"
       >
-        <thead
-          class="MuiTableHead-root-id"
+        <table
+          class="MuiTable-root-id"
         >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-head-id"
+          <thead
+            class="MuiTableHead-root-id"
           >
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-wideColumn-id"
-              scope="col"
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-head-id"
             >
-              Name
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id"
-              scope="col"
-            >
-              Email Address
-            </th>
-          </tr>
-        </thead>
-        <tfoot
-          class="MuiTableFooter-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-footer-id"
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-wideColumn-id"
+                scope="col"
+              >
+                Name
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id"
+                scope="col"
+              >
+                Email Address
+              </th>
+            </tr>
+          </thead>
+          <tfoot
+            class="MuiTableFooter-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
-              colspan="3"
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-footer-id"
             >
-              <div
-                class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                colspan="3"
               >
                 <div
-                  class="makeStyles-spacer-id"
+                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
                 >
-                  <div>
-                    <span
-                      class="RowNumberSelect-label-id"
-                    >
-                      No of Rows:
-                    </span>
-                    <div
-                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
-                    >
+                  <div
+                    class="makeStyles-spacer-id"
+                  >
+                    <div>
+                      <span
+                        class="RowNumberSelect-label-id"
+                      >
+                        No of Rows:
+                      </span>
                       <div
-                        aria-haspopup="listbox"
-                        aria-labelledby=" "
-                        class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-id"
-                        role="button"
-                        tabindex="0"
+                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                       >
-                        20
-                      </div>
-                      <input
-                        type="hidden"
-                        value="20"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MuiSelect-icon-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M7 10l5 5 5-5z"
+                        <div
+                          aria-haspopup="listbox"
+                          aria-labelledby=" "
+                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-id"
+                          role="button"
+                          tabindex="0"
+                        >
+                          20
+                        </div>
+                        <input
+                          type="hidden"
+                          value="20"
                         />
-                      </svg>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M7 10l5 5 5-5z"
+                          />
+                        </svg>
+                      </div>
                     </div>
                   </div>
+                  <div
+                    class="makeStyles-root-id"
+                  >
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      data-tc="button-pagination-back"
+                      disabled=""
+                      tabindex="-1"
+                      type="button"
+                    >
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M14 7l-5 5 5 5V7z"
+                          />
+                          <path
+                            d="M24 0v24H0V0h24z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      data-tc="button-pagination-next"
+                      disabled=""
+                      tabindex="-1"
+                      type="button"
+                    >
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M10 17l5-5-5-5v10z"
+                          />
+                          <path
+                            d="M0 24V0h24v24H0z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </div>
+                </div>
+              </td>
+            </tr>
+          </tfoot>
+          <tbody
+            class="MuiTableBody-root-id"
+          >
+            <tr
+              class="MuiTableRow-root-id"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id"
+              >
+                <div
+                  class="makeStyles-avatar-id"
+                >
+                  <div
+                    class="makeStyles-avatarDefault-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    />
+                  </div>
                 </div>
                 <div
-                  class="makeStyles-root-id"
+                  class="MuiTypography-root-id MuiTypography-body1-id"
                 >
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                    data-tc="button-pagination-back"
-                    disabled=""
-                    tabindex="-1"
-                    type="button"
+                  <span
+                    class="makeStyles-skeleton-id"
                   >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M14 7l-5 5 5 5V7z"
-                        />
-                        <path
-                          d="M24 0v24H0V0h24z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                    data-tc="button-pagination-next"
-                    disabled=""
-                    tabindex="-1"
-                    type="button"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M10 17l5-5-5-5v10z"
-                        />
-                        <path
-                          d="M0 24V0h24v24H0z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
+                    ‌
+                  </span>
                 </div>
-              </div>
-            </td>
-          </tr>
-        </tfoot>
-        <tbody
-          class="MuiTableBody-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              <div
-                class="makeStyles-avatar-id"
-              >
                 <div
-                  class="makeStyles-avatarDefault-id"
+                  class="MuiTypography-root-id makeStyles-statusText-id MuiTypography-caption-id"
                 >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  />
+                  <span
+                    class="makeStyles-skeleton-id"
+                  >
+                    ‌
+                  </span>
                 </div>
-              </div>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id"
               >
                 <span
                   class="makeStyles-skeleton-id"
                 >
                   ‌
                 </span>
-              </div>
-              <div
-                class="MuiTypography-root-id makeStyles-statusText-id MuiTypography-caption-id"
-              >
-                <span
-                  class="makeStyles-skeleton-id"
-                >
-                  ‌
-                </span>
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              <span
-                class="makeStyles-skeleton-id"
-              >
-                ‌
-              </span>
-            </td>
-          </tr>
-        </tbody>
-      </table>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
     </div>
   </div>
 </div>
@@ -122976,10 +123668,10 @@ exports[`Storyshots Views / Taxes / Country List default 1`] = `
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -122987,7 +123679,7 @@ exports[`Storyshots Views / Taxes / Country List default 1`] = `
           Taxes
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -123119,572 +123811,576 @@ exports[`Storyshots Views / Taxes / Country List default 1`] = `
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
-            <table
-              class="MuiTable-root-id"
+            <div
+              class="ResponsiveTable-root-id"
             >
-              <thead
-                class="MuiTableHead-root-id"
+              <table
+                class="MuiTable-root-id"
               >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
+                <thead
+                  class="MuiTableHead-root-id"
                 >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id"
-                    scope="col"
+                  <tr
+                    class="MuiTableRow-root-id MuiTableRow-head-id"
                   >
-                    Country Code
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id"
-                    scope="col"
-                  >
-                    Country Name
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-textRight-id"
-                    scope="col"
-                  >
-                    Reduced Tax Rates
-                  </th>
-                </tr>
-              </thead>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id"
+                      scope="col"
+                    >
+                      Country Code
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id"
+                      scope="col"
+                    >
+                      Country Name
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-textRight-id"
+                      scope="col"
+                    >
+                      Reduced Tax Rates
+                    </th>
+                  </tr>
+                </thead>
+                <tbody
+                  class="MuiTableBody-root-id"
                 >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    AT
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    Austria
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
-                  >
-                    8
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    BE
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    Belgia
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
-                  >
-                    10
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    BG
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    Bułgaria
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
-                  >
-                    1
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    CY
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    Cypr
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
-                  >
-                    11
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    CZ
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    Czechy
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
-                  >
-                    11
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    DE
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    Niemcy
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
-                  >
-                    8
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    DK
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    Dania
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
-                  >
-                    0
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    EE
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    Estonia
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
-                  >
-                    4
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    ES
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    Hiszpania
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
-                  >
-                    8
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    FI
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    Finlandia
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
-                  >
-                    10
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    FR
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    Francja
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
-                  >
-                    13
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    GB
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    Wielka Brytania
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
-                  >
-                    8
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    GR
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    Grecja
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
-                  >
-                    9
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    HR
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    Chorwacja
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
-                  >
-                    2
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    HU
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    Węgry
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
-                  >
-                    5
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    IE
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    Irlandia
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
-                  >
-                    10
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    IT
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    Włochy
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
-                  >
-                    10
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    LT
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    Litwa
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
-                  >
-                    3
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    LU
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    Luksemburg
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
-                  >
-                    17
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    LV
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    Łotwa
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
-                  >
-                    5
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    MT
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    Malta
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
-                  >
-                    8
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    NL
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    Holandia
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
-                  >
-                    9
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    PL
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    Polska
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
-                  >
-                    10
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    PT
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    Portugalia
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
-                  >
-                    8
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    RO
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    Rumunia
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
-                  >
-                    9
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    SE
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    Szwecja
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
-                  >
-                    2
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    SI
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    Słowenia
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
-                  >
-                    9
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    SK
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    Słowacja
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
-                  >
-                    6
-                  </td>
-                </tr>
-              </tbody>
-            </table>
+                  <tr
+                    class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+                  >
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                    >
+                      AT
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                    >
+                      Austria
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
+                    >
+                      8
+                    </td>
+                  </tr>
+                  <tr
+                    class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+                  >
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                    >
+                      BE
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                    >
+                      Belgia
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
+                    >
+                      10
+                    </td>
+                  </tr>
+                  <tr
+                    class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+                  >
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                    >
+                      BG
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                    >
+                      Bułgaria
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
+                    >
+                      1
+                    </td>
+                  </tr>
+                  <tr
+                    class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+                  >
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                    >
+                      CY
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                    >
+                      Cypr
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
+                    >
+                      11
+                    </td>
+                  </tr>
+                  <tr
+                    class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+                  >
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                    >
+                      CZ
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                    >
+                      Czechy
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
+                    >
+                      11
+                    </td>
+                  </tr>
+                  <tr
+                    class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+                  >
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                    >
+                      DE
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                    >
+                      Niemcy
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
+                    >
+                      8
+                    </td>
+                  </tr>
+                  <tr
+                    class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+                  >
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                    >
+                      DK
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                    >
+                      Dania
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
+                    >
+                      0
+                    </td>
+                  </tr>
+                  <tr
+                    class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+                  >
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                    >
+                      EE
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                    >
+                      Estonia
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
+                    >
+                      4
+                    </td>
+                  </tr>
+                  <tr
+                    class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+                  >
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                    >
+                      ES
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                    >
+                      Hiszpania
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
+                    >
+                      8
+                    </td>
+                  </tr>
+                  <tr
+                    class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+                  >
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                    >
+                      FI
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                    >
+                      Finlandia
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
+                    >
+                      10
+                    </td>
+                  </tr>
+                  <tr
+                    class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+                  >
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                    >
+                      FR
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                    >
+                      Francja
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
+                    >
+                      13
+                    </td>
+                  </tr>
+                  <tr
+                    class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+                  >
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                    >
+                      GB
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                    >
+                      Wielka Brytania
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
+                    >
+                      8
+                    </td>
+                  </tr>
+                  <tr
+                    class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+                  >
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                    >
+                      GR
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                    >
+                      Grecja
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
+                    >
+                      9
+                    </td>
+                  </tr>
+                  <tr
+                    class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+                  >
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                    >
+                      HR
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                    >
+                      Chorwacja
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
+                    >
+                      2
+                    </td>
+                  </tr>
+                  <tr
+                    class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+                  >
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                    >
+                      HU
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                    >
+                      Węgry
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
+                    >
+                      5
+                    </td>
+                  </tr>
+                  <tr
+                    class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+                  >
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                    >
+                      IE
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                    >
+                      Irlandia
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
+                    >
+                      10
+                    </td>
+                  </tr>
+                  <tr
+                    class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+                  >
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                    >
+                      IT
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                    >
+                      Włochy
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
+                    >
+                      10
+                    </td>
+                  </tr>
+                  <tr
+                    class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+                  >
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                    >
+                      LT
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                    >
+                      Litwa
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
+                    >
+                      3
+                    </td>
+                  </tr>
+                  <tr
+                    class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+                  >
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                    >
+                      LU
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                    >
+                      Luksemburg
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
+                    >
+                      17
+                    </td>
+                  </tr>
+                  <tr
+                    class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+                  >
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                    >
+                      LV
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                    >
+                      Łotwa
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
+                    >
+                      5
+                    </td>
+                  </tr>
+                  <tr
+                    class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+                  >
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                    >
+                      MT
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                    >
+                      Malta
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
+                    >
+                      8
+                    </td>
+                  </tr>
+                  <tr
+                    class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+                  >
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                    >
+                      NL
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                    >
+                      Holandia
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
+                    >
+                      9
+                    </td>
+                  </tr>
+                  <tr
+                    class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+                  >
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                    >
+                      PL
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                    >
+                      Polska
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
+                    >
+                      10
+                    </td>
+                  </tr>
+                  <tr
+                    class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+                  >
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                    >
+                      PT
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                    >
+                      Portugalia
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
+                    >
+                      8
+                    </td>
+                  </tr>
+                  <tr
+                    class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+                  >
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                    >
+                      RO
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                    >
+                      Rumunia
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
+                    >
+                      9
+                    </td>
+                  </tr>
+                  <tr
+                    class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+                  >
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                    >
+                      SE
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                    >
+                      Szwecja
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
+                    >
+                      2
+                    </td>
+                  </tr>
+                  <tr
+                    class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+                  >
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                    >
+                      SI
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                    >
+                      Słowenia
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
+                    >
+                      9
+                    </td>
+                  </tr>
+                  <tr
+                    class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+                  >
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                    >
+                      SK
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                    >
+                      Słowacja
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
+                    >
+                      6
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
           </div>
         </div>
       </div>
@@ -123699,10 +124395,10 @@ exports[`Storyshots Views / Taxes / Country List loading 1`] = `
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -123710,7 +124406,7 @@ exports[`Storyshots Views / Taxes / Country List loading 1`] = `
           Taxes
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -123848,6 +124544,116 @@ exports[`Storyshots Views / Taxes / Country List loading 1`] = `
         <div>
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
+          >
+            <div
+              class="ResponsiveTable-root-id"
+            >
+              <table
+                class="MuiTable-root-id"
+              >
+                <thead
+                  class="MuiTableHead-root-id"
+                >
+                  <tr
+                    class="MuiTableRow-root-id MuiTableRow-head-id"
+                  >
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id"
+                      scope="col"
+                    >
+                      Country Code
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id"
+                      scope="col"
+                    >
+                      Country Name
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-textRight-id"
+                      scope="col"
+                    >
+                      Reduced Tax Rates
+                    </th>
+                  </tr>
+                </thead>
+                <tbody
+                  class="MuiTableBody-root-id"
+                >
+                  <tr
+                    class="MuiTableRow-root-id"
+                  >
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                    >
+                      <span
+                        class="makeStyles-skeleton-id"
+                      >
+                        ‌
+                      </span>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                    >
+                      <span
+                        class="makeStyles-skeleton-id"
+                      >
+                        ‌
+                      </span>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
+                    >
+                      <span
+                        class="makeStyles-skeleton-id"
+                      >
+                        ‌
+                      </span>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`Storyshots Views / Taxes / Reduced Tax Categories default 1`] = `
+<div
+  style="padding:24px"
+>
+  <div
+    class="Container-root-id"
+  >
+    <div
+      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
+    >
+      <div
+        class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+      >
+        Tax Rates in Austria
+      </div>
+      <div
+        class="ExtendedPageHeader-action-id"
+      >
+        <div
+          class="makeStyles-root-id"
+        />
+      </div>
+    </div>
+    <div
+      class="makeStyles-root-id makeStyles-default-id"
+    >
+      <div>
+        <div
+          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
+        >
+          <div
+            class="ResponsiveTable-root-id"
           >
             <table
               class="MuiTable-root-id"
@@ -123859,22 +124665,202 @@ exports[`Storyshots Views / Taxes / Country List loading 1`] = `
                   class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-wideColumn-id"
                     scope="col"
                   >
-                    Country Code
+                    Category
                   </th>
                   <th
                     class="MuiTableCell-root-id MuiTableCell-head-id"
                     scope="col"
                   >
-                    Country Name
+                    Tax Rate
                   </th>
+                </tr>
+              </thead>
+              <tbody
+                class="MuiTableBody-root-id"
+              >
+                <tr
+                  class="MuiTableRow-root-id"
+                >
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    Admission to cultural events
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    10
+                  </td>
+                </tr>
+                <tr
+                  class="MuiTableRow-root-id"
+                >
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    Admission to entertainment events
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    10
+                  </td>
+                </tr>
+                <tr
+                  class="MuiTableRow-root-id"
+                >
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    Books
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    10
+                  </td>
+                </tr>
+                <tr
+                  class="MuiTableRow-root-id"
+                >
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    Foodstuffs
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    10
+                  </td>
+                </tr>
+                <tr
+                  class="MuiTableRow-root-id"
+                >
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    Hotels
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    10
+                  </td>
+                </tr>
+                <tr
+                  class="MuiTableRow-root-id"
+                >
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    Newspapers
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    10
+                  </td>
+                </tr>
+                <tr
+                  class="MuiTableRow-root-id"
+                >
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    Passenger transport
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    10
+                  </td>
+                </tr>
+                <tr
+                  class="MuiTableRow-root-id"
+                >
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    Pharmaceuticals
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    10
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Views / Taxes / Reduced Tax Categories loading 1`] = `
+<div
+  style="padding:24px"
+>
+  <div
+    class="Container-root-id"
+  >
+    <div
+      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
+    >
+      <div
+        class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+      >
+        <span
+          class="makeStyles-skeleton-id"
+          style="width:10em"
+        >
+          ‌
+        </span>
+      </div>
+      <div
+        class="ExtendedPageHeader-action-id"
+      >
+        <div
+          class="makeStyles-root-id"
+        />
+      </div>
+    </div>
+    <div
+      class="makeStyles-root-id makeStyles-default-id"
+    >
+      <div>
+        <div
+          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
+        >
+          <div
+            class="ResponsiveTable-root-id"
+          >
+            <table
+              class="MuiTable-root-id"
+            >
+              <thead
+                class="MuiTableHead-root-id"
+              >
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-head-id"
+                >
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-textRight-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-wideColumn-id"
                     scope="col"
                   >
-                    Reduced Tax Rates
+                    Category
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id"
+                    scope="col"
+                  >
+                    Tax Rate
                   </th>
                 </tr>
               </thead>
@@ -123902,15 +124888,6 @@ exports[`Storyshots Views / Taxes / Country List loading 1`] = `
                       ‌
                     </span>
                   </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
-                  >
-                    <span
-                      class="makeStyles-skeleton-id"
-                    >
-                      ‌
-                    </span>
-                  </td>
                 </tr>
               </tbody>
             </table>
@@ -123918,275 +124895,6 @@ exports[`Storyshots Views / Taxes / Country List loading 1`] = `
         </div>
       </div>
     </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Taxes / Reduced Tax Categories default 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="makeStyles-root-id"
-  >
-    <div
-      class="makeStyles-root-id"
-    >
-      <div
-        class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
-      >
-        Tax Rates in Austria
-      </div>
-      <div
-        class="makeStyles-action-id"
-      >
-        <div
-          class="makeStyles-root-id"
-        />
-      </div>
-    </div>
-    <div
-      class="makeStyles-root-id makeStyles-default-id"
-    >
-      <div>
-        <div
-          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
-        >
-          <table
-            class="MuiTable-root-id"
-          >
-            <thead
-              class="MuiTableHead-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
-              >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-wideColumn-id"
-                  scope="col"
-                >
-                  Category
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id"
-                  scope="col"
-                >
-                  Tax Rate
-                </th>
-              </tr>
-            </thead>
-            <tbody
-              class="MuiTableBody-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  Admission to cultural events
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  10
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  Admission to entertainment events
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  10
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  Books
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  10
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  Foodstuffs
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  10
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  Hotels
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  10
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  Newspapers
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  10
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  Passenger transport
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  10
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  Pharmaceuticals
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  10
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Taxes / Reduced Tax Categories loading 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="makeStyles-root-id"
-  >
-    <div
-      class="makeStyles-root-id"
-    >
-      <div
-        class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
-      >
-        <span
-          class="makeStyles-skeleton-id"
-          style="width:10em"
-        >
-          ‌
-        </span>
-      </div>
-      <div
-        class="makeStyles-action-id"
-      >
-        <div
-          class="makeStyles-root-id"
-        />
-      </div>
-    </div>
-    <div
-      class="makeStyles-root-id makeStyles-default-id"
-    >
-      <div>
-        <div
-          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
-        >
-          <table
-            class="MuiTable-root-id"
-          >
-            <thead
-              class="MuiTableHead-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
-              >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-wideColumn-id"
-                  scope="col"
-                >
-                  Category
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id"
-                  scope="col"
-                >
-                  Tax Rate
-                </th>
-              </tr>
-            </thead>
-            <tbody
-              class="MuiTableBody-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  <span
-                    class="makeStyles-skeleton-id"
-                  >
-                    ‌
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  <span
-                    class="makeStyles-skeleton-id"
-                  >
-                    ‌
-                  </span>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </div>
   </div>
 </div>
 `;
@@ -124196,10 +124904,10 @@ exports[`Storyshots Views / Translations / Entity list default 1`] = `
   style="padding:24px"
 >
   <div
-    class="makeStyles-root-id"
+    class="Container-root-id"
   >
     <div
-      class="makeStyles-root-id"
+      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
         class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -124207,7 +124915,7 @@ exports[`Storyshots Views / Translations / Entity list default 1`] = `
         Translations to English
       </div>
       <div
-        class="makeStyles-action-id"
+        class="ExtendedPageHeader-action-id"
       >
         <div
           class="makeStyles-root-id"
@@ -124351,139 +125059,143 @@ exports[`Storyshots Views / Translations / Entity list default 1`] = `
       <hr
         class="makeStyles-root-id"
       />
-      <table
-        class="MuiTable-root-id"
+      <div
+        class="ResponsiveTable-root-id"
       >
-        <thead
-          class="MuiTableHead-root-id"
+        <table
+          class="MuiTable-root-id"
         >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-head-id"
+          <thead
+            class="MuiTableHead-root-id"
           >
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-wideColumn-id"
-              scope="col"
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-head-id"
             >
-              Name
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-textRight-id"
-              scope="col"
-            >
-              Completed Translations
-            </th>
-          </tr>
-        </thead>
-        <tfoot
-          class="MuiTableFooter-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-footer-id"
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-wideColumn-id"
+                scope="col"
+              >
+                Name
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-textRight-id"
+                scope="col"
+              >
+                Completed Translations
+              </th>
+            </tr>
+          </thead>
+          <tfoot
+            class="MuiTableFooter-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
-              colspan="2"
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-footer-id"
             >
-              <div
-                class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                colspan="2"
               >
                 <div
-                  class="makeStyles-spacer-id"
-                />
-                <div
-                  class="makeStyles-root-id"
+                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
                 >
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                    data-tc="button-pagination-back"
-                    disabled=""
-                    tabindex="-1"
-                    type="button"
+                  <div
+                    class="makeStyles-spacer-id"
+                  />
+                  <div
+                    class="makeStyles-root-id"
                   >
-                    <span
-                      class="MuiIconButton-label-id"
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      data-tc="button-pagination-back"
+                      disabled=""
+                      tabindex="-1"
+                      type="button"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
+                      <span
+                        class="MuiIconButton-label-id"
                       >
-                        <path
-                          d="M14 7l-5 5 5 5V7z"
-                        />
-                        <path
-                          d="M24 0v24H0V0h24z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
-                    data-tc="button-pagination-next"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M14 7l-5 5 5 5V7z"
+                          />
+                          <path
+                            d="M24 0v24H0V0h24z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                      data-tc="button-pagination-next"
+                      tabindex="0"
+                      type="button"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
+                      <span
+                        class="MuiIconButton-label-id"
                       >
-                        <path
-                          d="M10 17l5-5-5-5v10z"
-                        />
-                        <path
-                          d="M0 24V0h24v24H0z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M10 17l5-5-5-5v10z"
+                          />
+                          <path
+                            d="M0 24V0h24v24H0z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </div>
                 </div>
-              </div>
-            </td>
-          </tr>
-        </tfoot>
-        <tbody
-          class="MuiTableBody-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+              </td>
+            </tr>
+          </tfoot>
+          <tbody
+            class="MuiTableBody-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
+            <tr
+              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
             >
-              White Hoodie
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id"
+              >
+                White Hoodie
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
+              >
+                1 of 3
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
             >
-              1 of 3
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              Brown Supreme Hoodie
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
-            >
-              2 of 3
-            </td>
-          </tr>
-        </tbody>
-      </table>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id"
+              >
+                Brown Supreme Hoodie
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
+              >
+                2 of 3
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
     </div>
   </div>
 </div>
@@ -124494,10 +125206,10 @@ exports[`Storyshots Views / Translations / Language list default 1`] = `
   style="padding:24px"
 >
   <div
-    class="makeStyles-root-id"
+    class="Container-root-id"
   >
     <div
-      class="makeStyles-root-id"
+      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
         class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -124505,7 +125217,7 @@ exports[`Storyshots Views / Translations / Language list default 1`] = `
         Languages
       </div>
       <div
-        class="makeStyles-action-id"
+        class="ExtendedPageHeader-action-id"
       >
         <div
           class="makeStyles-root-id"
@@ -124515,64 +125227,68 @@ exports[`Storyshots Views / Translations / Language list default 1`] = `
     <div
       class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
     >
-      <table
-        class="MuiTable-root-id"
+      <div
+        class="ResponsiveTable-root-id"
       >
-        <thead
-          class="MuiTableHead-root-id"
+        <table
+          class="MuiTable-root-id"
         >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-head-id"
+          <thead
+            class="MuiTableHead-root-id"
           >
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id"
-              scope="col"
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-head-id"
             >
-              Language
-            </th>
-          </tr>
-        </thead>
-        <tbody
-          class="MuiTableBody-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id"
+                scope="col"
+              >
+                Language
+              </th>
+            </tr>
+          </thead>
+          <tbody
+            class="MuiTableBody-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-capitalize-id"
+            <tr
+              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
             >
-              niemiecki
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-capitalize-id"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-capitalize-id"
+              >
+                niemiecki
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
             >
-              angielski
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-capitalize-id"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-capitalize-id"
+              >
+                angielski
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
             >
-              hiszpański
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-capitalize-id"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-capitalize-id"
+              >
+                hiszpański
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
             >
-              polski
-            </td>
-          </tr>
-        </tbody>
-      </table>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-capitalize-id"
+              >
+                polski
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
     </div>
   </div>
 </div>
@@ -124583,10 +125299,10 @@ exports[`Storyshots Views / Translations / Language list loading 1`] = `
   style="padding:24px"
 >
   <div
-    class="makeStyles-root-id"
+    class="Container-root-id"
   >
     <div
-      class="makeStyles-root-id"
+      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
         class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -124594,7 +125310,7 @@ exports[`Storyshots Views / Translations / Language list loading 1`] = `
         Languages
       </div>
       <div
-        class="makeStyles-action-id"
+        class="ExtendedPageHeader-action-id"
       >
         <div
           class="makeStyles-root-id"
@@ -124604,41 +125320,45 @@ exports[`Storyshots Views / Translations / Language list loading 1`] = `
     <div
       class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
     >
-      <table
-        class="MuiTable-root-id"
+      <div
+        class="ResponsiveTable-root-id"
       >
-        <thead
-          class="MuiTableHead-root-id"
+        <table
+          class="MuiTable-root-id"
         >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-head-id"
+          <thead
+            class="MuiTableHead-root-id"
           >
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id"
-              scope="col"
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-head-id"
             >
-              Language
-            </th>
-          </tr>
-        </thead>
-        <tbody
-          class="MuiTableBody-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-capitalize-id"
-            >
-              <span
-                class="makeStyles-skeleton-id"
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id"
+                scope="col"
               >
-                ‌
-              </span>
-            </td>
-          </tr>
-        </tbody>
-      </table>
+                Language
+              </th>
+            </tr>
+          </thead>
+          <tbody
+            class="MuiTableBody-root-id"
+          >
+            <tr
+              class="MuiTableRow-root-id"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-capitalize-id"
+              >
+                <span
+                  class="makeStyles-skeleton-id"
+                >
+                  ‌
+                </span>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
     </div>
   </div>
 </div>
@@ -124649,10 +125369,10 @@ exports[`Storyshots Views / Translations / Language list no data 1`] = `
   style="padding:24px"
 >
   <div
-    class="makeStyles-root-id"
+    class="Container-root-id"
   >
     <div
-      class="makeStyles-root-id"
+      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
         class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -124660,7 +125380,7 @@ exports[`Storyshots Views / Translations / Language list no data 1`] = `
         Languages
       </div>
       <div
-        class="makeStyles-action-id"
+        class="ExtendedPageHeader-action-id"
       >
         <div
           class="makeStyles-root-id"
@@ -124670,38 +125390,42 @@ exports[`Storyshots Views / Translations / Language list no data 1`] = `
     <div
       class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
     >
-      <table
-        class="MuiTable-root-id"
+      <div
+        class="ResponsiveTable-root-id"
       >
-        <thead
-          class="MuiTableHead-root-id"
+        <table
+          class="MuiTable-root-id"
         >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-head-id"
+          <thead
+            class="MuiTableHead-root-id"
           >
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id"
-              scope="col"
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-head-id"
             >
-              Language
-            </th>
-          </tr>
-        </thead>
-        <tbody
-          class="MuiTableBody-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id"
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id"
+                scope="col"
+              >
+                Language
+              </th>
+            </tr>
+          </thead>
+          <tbody
+            class="MuiTableBody-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-              colspan="1"
+            <tr
+              class="MuiTableRow-root-id"
             >
-              No languages found
-            </td>
-          </tr>
-        </tbody>
-      </table>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id"
+                colspan="1"
+              >
+                No languages found
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
     </div>
   </div>
 </div>
@@ -124713,10 +125437,10 @@ exports[`Storyshots Views / Webhooks / Create webhook default 1`] = `
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -124724,7 +125448,7 @@ exports[`Storyshots Views / Webhooks / Create webhook default 1`] = `
           Create Webhook
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -125245,10 +125969,10 @@ exports[`Storyshots Views / Webhooks / Create webhook form errors 1`] = `
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -125256,7 +125980,7 @@ exports[`Storyshots Views / Webhooks / Create webhook form errors 1`] = `
           Create Webhook
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -125782,10 +126506,10 @@ exports[`Storyshots Views / Webhooks / Create webhook loading 1`] = `
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -125793,7 +126517,7 @@ exports[`Storyshots Views / Webhooks / Create webhook loading 1`] = `
           Create Webhook
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -126342,10 +127066,10 @@ exports[`Storyshots Views / Webhooks / Webhook details default 1`] = `
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -126353,7 +127077,7 @@ exports[`Storyshots Views / Webhooks / Webhook details default 1`] = `
           Webhook Test 2 Details
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -126875,10 +127599,10 @@ exports[`Storyshots Views / Webhooks / Webhook details form errors 1`] = `
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -126886,7 +127610,7 @@ exports[`Storyshots Views / Webhooks / Webhook details form errors 1`] = `
           Webhook Test 2 Details
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -127413,10 +128137,10 @@ exports[`Storyshots Views / Webhooks / Webhook details loading 1`] = `
 >
   <form>
     <div
-      class="makeStyles-root-id"
+      class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
           class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -127424,7 +128148,7 @@ exports[`Storyshots Views / Webhooks / Webhook details loading 1`] = `
           ... Details
         </div>
         <div
-          class="makeStyles-action-id"
+          class="ExtendedPageHeader-action-id"
         >
           <div
             class="makeStyles-root-id"
@@ -127967,10 +128691,10 @@ exports[`Storyshots Views / Webhooks / Webhook list default 1`] = `
   style="padding:24px"
 >
   <div
-    class="makeStyles-root-id"
+    class="Container-root-id"
   >
     <div
-      class="makeStyles-root-id"
+      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
         class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -127978,7 +128702,7 @@ exports[`Storyshots Views / Webhooks / Webhook list default 1`] = `
         Webhooks
       </div>
       <div
-        class="makeStyles-action-id"
+        class="ExtendedPageHeader-action-id"
       >
         <div
           class="makeStyles-root-id"
@@ -128074,273 +128798,277 @@ exports[`Storyshots Views / Webhooks / Webhook list default 1`] = `
       <hr
         class="makeStyles-root-id"
       />
-      <table
-        class="MuiTable-root-id makeStyles-table-id"
+      <div
+        class="ResponsiveTable-root-id"
       >
-        <thead
-          class="MuiTableHead-root-id"
+        <table
+          class="MuiTable-root-id makeStyles-table-id"
         >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-head-id"
+          <thead
+            class="MuiTableHead-root-id"
           >
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
-              scope="col"
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-head-id"
             >
-              Name
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colActive-id"
-              scope="col"
-            >
-              Service Account
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colAction-id"
-              scope="col"
-            >
-              Action
-            </th>
-          </tr>
-        </thead>
-        <tfoot
-          class="MuiTableFooter-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-footer-id"
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                scope="col"
+              >
+                Name
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colActive-id"
+                scope="col"
+              >
+                Service Account
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colAction-id"
+                scope="col"
+              >
+                Action
+              </th>
+            </tr>
+          </thead>
+          <tfoot
+            class="MuiTableFooter-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
-              colspan="3"
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-footer-id"
             >
-              <div
-                class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                colspan="3"
               >
                 <div
-                  class="makeStyles-spacer-id"
+                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
                 >
-                  <div>
-                    <span
-                      class="RowNumberSelect-label-id"
-                    >
-                      No of Rows:
-                    </span>
-                    <div
-                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
-                    >
+                  <div
+                    class="makeStyles-spacer-id"
+                  >
+                    <div>
+                      <span
+                        class="RowNumberSelect-label-id"
+                      >
+                        No of Rows:
+                      </span>
                       <div
-                        aria-haspopup="listbox"
-                        aria-labelledby=" "
-                        class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-id"
-                        role="button"
-                        tabindex="0"
+                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                       >
-                        20
-                      </div>
-                      <input
-                        type="hidden"
-                        value="20"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MuiSelect-icon-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M7 10l5 5 5-5z"
+                        <div
+                          aria-haspopup="listbox"
+                          aria-labelledby=" "
+                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-id"
+                          role="button"
+                          tabindex="0"
+                        >
+                          20
+                        </div>
+                        <input
+                          type="hidden"
+                          value="20"
                         />
-                      </svg>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M7 10l5 5 5-5z"
+                          />
+                        </svg>
+                      </div>
                     </div>
                   </div>
-                </div>
-                <div
-                  class="makeStyles-root-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                    data-tc="button-pagination-back"
-                    disabled=""
-                    tabindex="-1"
-                    type="button"
+                  <div
+                    class="makeStyles-root-id"
                   >
-                    <span
-                      class="MuiIconButton-label-id"
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      data-tc="button-pagination-back"
+                      disabled=""
+                      tabindex="-1"
+                      type="button"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
+                      <span
+                        class="MuiIconButton-label-id"
                       >
-                        <path
-                          d="M14 7l-5 5 5 5V7z"
-                        />
-                        <path
-                          d="M24 0v24H0V0h24z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
-                    data-tc="button-pagination-next"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M14 7l-5 5 5 5V7z"
+                          />
+                          <path
+                            d="M24 0v24H0V0h24z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                      data-tc="button-pagination-next"
+                      tabindex="0"
+                      type="button"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
+                      <span
+                        class="MuiIconButton-label-id"
                       >
-                        <path
-                          d="M10 17l5-5-5-5v10z"
-                        />
-                        <path
-                          d="M0 24V0h24v24H0z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M10 17l5-5-5-5v10z"
+                          />
+                          <path
+                            d="M0 24V0h24v24H0z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </div>
                 </div>
-              </div>
-            </td>
-          </tr>
-        </tfoot>
-        <tbody
-          class="MuiTableBody-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+              </td>
+            </tr>
+          </tfoot>
+          <tbody
+            class="MuiTableBody-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+            <tr
+              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
             >
-              Webhook Test
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colActive-id"
-            >
-              Test Account
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colAction-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
-                tabindex="0"
-                type="button"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
               >
-                <span
-                  class="MuiIconButton-label-id"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    role="presentation"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
-                    />
-                  </svg>
-                </span>
-              </button>
-              <button
-                class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
-                tabindex="0"
-                type="button"
+                Webhook Test
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colActive-id"
               >
-                <span
-                  class="MuiIconButton-label-id"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    role="presentation"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                    />
-                  </svg>
-                </span>
-              </button>
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
-            >
-              Webhook Test 2
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colActive-id"
-            >
-              Test Account 2
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colAction-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
-                tabindex="0"
-                type="button"
+                Test Account
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colAction-id"
               >
-                <span
-                  class="MuiIconButton-label-id"
+                <button
+                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
+                  tabindex="0"
+                  type="button"
                 >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    role="presentation"
-                    viewBox="0 0 24 24"
+                  <span
+                    class="MuiIconButton-label-id"
                   >
-                    <path
-                      d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
-                    />
-                  </svg>
-                </span>
-              </button>
-              <button
-                class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
-                tabindex="0"
-                type="button"
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
+                      />
+                    </svg>
+                  </span>
+                </button>
+                <button
+                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <span
+                    class="MuiIconButton-label-id"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                      />
+                    </svg>
+                  </span>
+                </button>
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
               >
-                <span
-                  class="MuiIconButton-label-id"
+                Webhook Test 2
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colActive-id"
+              >
+                Test Account 2
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colAction-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
+                  tabindex="0"
+                  type="button"
                 >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    role="presentation"
-                    viewBox="0 0 24 24"
+                  <span
+                    class="MuiIconButton-label-id"
                   >
-                    <path
-                      d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                    />
-                  </svg>
-                </span>
-              </button>
-            </td>
-          </tr>
-        </tbody>
-      </table>
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
+                      />
+                    </svg>
+                  </span>
+                </button>
+                <button
+                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <span
+                    class="MuiIconButton-label-id"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                      />
+                    </svg>
+                  </span>
+                </button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
     </div>
   </div>
 </div>
@@ -128351,10 +129079,10 @@ exports[`Storyshots Views / Webhooks / Webhook list loading 1`] = `
   style="padding:24px"
 >
   <div
-    class="makeStyles-root-id"
+    class="Container-root-id"
   >
     <div
-      class="makeStyles-root-id"
+      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
         class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -128362,7 +129090,7 @@ exports[`Storyshots Views / Webhooks / Webhook list loading 1`] = `
         Webhooks
       </div>
       <div
-        class="makeStyles-action-id"
+        class="ExtendedPageHeader-action-id"
       >
         <div
           class="makeStyles-root-id"
@@ -128458,222 +129186,226 @@ exports[`Storyshots Views / Webhooks / Webhook list loading 1`] = `
       <hr
         class="makeStyles-root-id"
       />
-      <table
-        class="MuiTable-root-id makeStyles-table-id"
+      <div
+        class="ResponsiveTable-root-id"
       >
-        <thead
-          class="MuiTableHead-root-id"
+        <table
+          class="MuiTable-root-id makeStyles-table-id"
         >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-head-id"
+          <thead
+            class="MuiTableHead-root-id"
           >
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
-              scope="col"
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-head-id"
             >
-              Name
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colActive-id"
-              scope="col"
-            >
-              Service Account
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colAction-id"
-              scope="col"
-            >
-              Action
-            </th>
-          </tr>
-        </thead>
-        <tfoot
-          class="MuiTableFooter-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-footer-id"
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                scope="col"
+              >
+                Name
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colActive-id"
+                scope="col"
+              >
+                Service Account
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colAction-id"
+                scope="col"
+              >
+                Action
+              </th>
+            </tr>
+          </thead>
+          <tfoot
+            class="MuiTableFooter-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
-              colspan="3"
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-footer-id"
             >
-              <div
-                class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                colspan="3"
               >
                 <div
-                  class="makeStyles-spacer-id"
+                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
                 >
-                  <div>
-                    <span
-                      class="RowNumberSelect-label-id"
-                    >
-                      No of Rows:
-                    </span>
-                    <div
-                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
-                    >
+                  <div
+                    class="makeStyles-spacer-id"
+                  >
+                    <div>
+                      <span
+                        class="RowNumberSelect-label-id"
+                      >
+                        No of Rows:
+                      </span>
                       <div
-                        aria-haspopup="listbox"
-                        aria-labelledby=" "
-                        class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-id"
-                        role="button"
-                        tabindex="0"
+                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                       >
-                        20
-                      </div>
-                      <input
-                        type="hidden"
-                        value="20"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MuiSelect-icon-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M7 10l5 5 5-5z"
+                        <div
+                          aria-haspopup="listbox"
+                          aria-labelledby=" "
+                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-id"
+                          role="button"
+                          tabindex="0"
+                        >
+                          20
+                        </div>
+                        <input
+                          type="hidden"
+                          value="20"
                         />
-                      </svg>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M7 10l5 5 5-5z"
+                          />
+                        </svg>
+                      </div>
                     </div>
                   </div>
-                </div>
-                <div
-                  class="makeStyles-root-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                    data-tc="button-pagination-back"
-                    disabled=""
-                    tabindex="-1"
-                    type="button"
+                  <div
+                    class="makeStyles-root-id"
                   >
-                    <span
-                      class="MuiIconButton-label-id"
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      data-tc="button-pagination-back"
+                      disabled=""
+                      tabindex="-1"
+                      type="button"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
+                      <span
+                        class="MuiIconButton-label-id"
                       >
-                        <path
-                          d="M14 7l-5 5 5 5V7z"
-                        />
-                        <path
-                          d="M24 0v24H0V0h24z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                    data-tc="button-pagination-next"
-                    disabled=""
-                    tabindex="-1"
-                    type="button"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M14 7l-5 5 5 5V7z"
+                          />
+                          <path
+                            d="M24 0v24H0V0h24z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      data-tc="button-pagination-next"
+                      disabled=""
+                      tabindex="-1"
+                      type="button"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
+                      <span
+                        class="MuiIconButton-label-id"
                       >
-                        <path
-                          d="M10 17l5-5-5-5v10z"
-                        />
-                        <path
-                          d="M0 24V0h24v24H0z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M10 17l5-5-5-5v10z"
+                          />
+                          <path
+                            d="M0 24V0h24v24H0z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </div>
                 </div>
-              </div>
-            </td>
-          </tr>
-        </tfoot>
-        <tbody
-          class="MuiTableBody-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id"
+              </td>
+            </tr>
+          </tfoot>
+          <tbody
+            class="MuiTableBody-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+            <tr
+              class="MuiTableRow-root-id"
             >
-              <span
-                class="makeStyles-skeleton-id"
-              >
-                ‌
-              </span>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colActive-id"
-            >
-              <span
-                class="makeStyles-skeleton-id"
-              >
-                ‌
-              </span>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colAction-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
-                tabindex="0"
-                type="button"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
               >
                 <span
-                  class="MuiIconButton-label-id"
+                  class="makeStyles-skeleton-id"
                 >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    role="presentation"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
-                    />
-                  </svg>
+                  ‌
                 </span>
-              </button>
-              <button
-                class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
-                tabindex="0"
-                type="button"
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colActive-id"
               >
                 <span
-                  class="MuiIconButton-label-id"
+                  class="makeStyles-skeleton-id"
                 >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    role="presentation"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                    />
-                  </svg>
+                  ‌
                 </span>
-              </button>
-            </td>
-          </tr>
-        </tbody>
-      </table>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colAction-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <span
+                    class="MuiIconButton-label-id"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
+                      />
+                    </svg>
+                  </span>
+                </button>
+                <button
+                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <span
+                    class="MuiIconButton-label-id"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                      />
+                    </svg>
+                  </span>
+                </button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
     </div>
   </div>
 </div>
@@ -128684,10 +129416,10 @@ exports[`Storyshots Views / Webhooks / Webhook list no data 1`] = `
   style="padding:24px"
 >
   <div
-    class="makeStyles-root-id"
+    class="Container-root-id"
   >
     <div
-      class="makeStyles-root-id"
+      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
         class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
@@ -128695,7 +129427,7 @@ exports[`Storyshots Views / Webhooks / Webhook list no data 1`] = `
         Webhooks
       </div>
       <div
-        class="makeStyles-action-id"
+        class="ExtendedPageHeader-action-id"
       >
         <div
           class="makeStyles-root-id"
@@ -128791,163 +129523,167 @@ exports[`Storyshots Views / Webhooks / Webhook list no data 1`] = `
       <hr
         class="makeStyles-root-id"
       />
-      <table
-        class="MuiTable-root-id makeStyles-table-id"
+      <div
+        class="ResponsiveTable-root-id"
       >
-        <thead
-          class="MuiTableHead-root-id"
+        <table
+          class="MuiTable-root-id makeStyles-table-id"
         >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-head-id"
+          <thead
+            class="MuiTableHead-root-id"
           >
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
-              scope="col"
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-head-id"
             >
-              Name
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colActive-id"
-              scope="col"
-            >
-              Service Account
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colAction-id"
-              scope="col"
-            >
-              Action
-            </th>
-          </tr>
-        </thead>
-        <tfoot
-          class="MuiTableFooter-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-footer-id"
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                scope="col"
+              >
+                Name
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colActive-id"
+                scope="col"
+              >
+                Service Account
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colAction-id"
+                scope="col"
+              >
+                Action
+              </th>
+            </tr>
+          </thead>
+          <tfoot
+            class="MuiTableFooter-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
-              colspan="3"
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-footer-id"
             >
-              <div
-                class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                colspan="3"
               >
                 <div
-                  class="makeStyles-spacer-id"
+                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
                 >
-                  <div>
-                    <span
-                      class="RowNumberSelect-label-id"
-                    >
-                      No of Rows:
-                    </span>
-                    <div
-                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
-                    >
+                  <div
+                    class="makeStyles-spacer-id"
+                  >
+                    <div>
+                      <span
+                        class="RowNumberSelect-label-id"
+                      >
+                        No of Rows:
+                      </span>
                       <div
-                        aria-haspopup="listbox"
-                        aria-labelledby=" "
-                        class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-id"
-                        role="button"
-                        tabindex="0"
+                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                       >
-                        20
-                      </div>
-                      <input
-                        type="hidden"
-                        value="20"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MuiSelect-icon-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M7 10l5 5 5-5z"
+                        <div
+                          aria-haspopup="listbox"
+                          aria-labelledby=" "
+                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-id"
+                          role="button"
+                          tabindex="0"
+                        >
+                          20
+                        </div>
+                        <input
+                          type="hidden"
+                          value="20"
                         />
-                      </svg>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M7 10l5 5 5-5z"
+                          />
+                        </svg>
+                      </div>
                     </div>
                   </div>
-                </div>
-                <div
-                  class="makeStyles-root-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                    data-tc="button-pagination-back"
-                    disabled=""
-                    tabindex="-1"
-                    type="button"
+                  <div
+                    class="makeStyles-root-id"
                   >
-                    <span
-                      class="MuiIconButton-label-id"
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      data-tc="button-pagination-back"
+                      disabled=""
+                      tabindex="-1"
+                      type="button"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
+                      <span
+                        class="MuiIconButton-label-id"
                       >
-                        <path
-                          d="M14 7l-5 5 5 5V7z"
-                        />
-                        <path
-                          d="M24 0v24H0V0h24z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
-                    data-tc="button-pagination-next"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M14 7l-5 5 5 5V7z"
+                          />
+                          <path
+                            d="M24 0v24H0V0h24z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                      data-tc="button-pagination-next"
+                      tabindex="0"
+                      type="button"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
+                      <span
+                        class="MuiIconButton-label-id"
                       >
-                        <path
-                          d="M10 17l5-5-5-5v10z"
-                        />
-                        <path
-                          d="M0 24V0h24v24H0z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M10 17l5-5-5-5v10z"
+                          />
+                          <path
+                            d="M0 24V0h24v24H0z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </div>
                 </div>
-              </div>
-            </td>
-          </tr>
-        </tfoot>
-        <tbody
-          class="MuiTableBody-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id"
+              </td>
+            </tr>
+          </tfoot>
+          <tbody
+            class="MuiTableBody-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-              colspan="3"
+            <tr
+              class="MuiTableRow-root-id"
             >
-              No webhooks found
-            </td>
-          </tr>
-        </tbody>
-      </table>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id"
+                colspan="3"
+              >
+                No webhooks found
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
     </div>
   </div>
 </div>
diff --git a/src/storybook/stories/components/EditableTableCell.tsx b/src/storybook/stories/components/EditableTableCell.tsx
index e9d7a87e4..90b6171d6 100644
--- a/src/storybook/stories/components/EditableTableCell.tsx
+++ b/src/storybook/stories/components/EditableTableCell.tsx
@@ -1,4 +1,3 @@
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableHead from "@material-ui/core/TableHead";
@@ -7,6 +6,7 @@ import { storiesOf } from "@storybook/react";
 import React from "react";
 
 import EditableTableCell from "@saleor/components/EditableTableCell";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import CardDecorator from "../../CardDecorator";
 import Decorator from "../../Decorator";
 
@@ -14,7 +14,7 @@ storiesOf("Generics / EditableTableCell", module)
   .addDecorator(CardDecorator)
   .addDecorator(Decorator)
   .add("default", () => (
-    <Table>
+    <ResponsiveTable>
       <TableHead>
         <TableCell>Some header</TableCell>
         <TableCell>Some header</TableCell>
@@ -30,5 +30,5 @@ storiesOf("Generics / EditableTableCell", module)
           <TableCell>Some value</TableCell>
         </TableRow>
       </TableBody>
-    </Table>
+    </ResponsiveTable>
   ));
diff --git a/src/storybook/stories/components/TablePagination.tsx b/src/storybook/stories/components/TablePagination.tsx
index 9151647ee..e25557a7e 100644
--- a/src/storybook/stories/components/TablePagination.tsx
+++ b/src/storybook/stories/components/TablePagination.tsx
@@ -1,7 +1,7 @@
-import Table from "@material-ui/core/Table";
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import TablePagination from "@saleor/components/TablePagination";
 import CardDecorator from "../../CardDecorator";
 import Decorator from "../../Decorator";
@@ -10,7 +10,7 @@ storiesOf("Generics / TablePagination", module)
   .addDecorator(CardDecorator)
   .addDecorator(Decorator)
   .add("no previous / next page", () => (
-    <Table>
+    <ResponsiveTable>
       <TablePagination
         colSpan={1}
         hasNextPage={false}
@@ -18,10 +18,10 @@ storiesOf("Generics / TablePagination", module)
         onPreviousPage={undefined}
         onNextPage={undefined}
       />
-    </Table>
+    </ResponsiveTable>
   ))
   .add("previous page available", () => (
-    <Table>
+    <ResponsiveTable>
       <TablePagination
         colSpan={1}
         hasNextPage={false}
@@ -29,10 +29,10 @@ storiesOf("Generics / TablePagination", module)
         onPreviousPage={undefined}
         onNextPage={undefined}
       />
-    </Table>
+    </ResponsiveTable>
   ))
   .add("next page available", () => (
-    <Table>
+    <ResponsiveTable>
       <TablePagination
         colSpan={1}
         hasNextPage={true}
@@ -40,10 +40,10 @@ storiesOf("Generics / TablePagination", module)
         onPreviousPage={undefined}
         onNextPage={undefined}
       />
-    </Table>
+    </ResponsiveTable>
   ))
   .add("both previous and next pages are available", () => (
-    <Table>
+    <ResponsiveTable>
       <TablePagination
         colSpan={1}
         hasNextPage={true}
@@ -51,5 +51,5 @@ storiesOf("Generics / TablePagination", module)
         onPreviousPage={undefined}
         onNextPage={undefined}
       />
-    </Table>
+    </ResponsiveTable>
   ));
diff --git a/src/taxes/components/CountryList/CountryList.tsx b/src/taxes/components/CountryList/CountryList.tsx
index 97235b2cd..6eeeabb88 100644
--- a/src/taxes/components/CountryList/CountryList.tsx
+++ b/src/taxes/components/CountryList/CountryList.tsx
@@ -1,6 +1,5 @@
 import Card from "@material-ui/core/Card";
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableHead from "@material-ui/core/TableHead";
@@ -9,6 +8,7 @@ import classNames from "classnames";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import { maybe, renderCollection } from "../../../misc";
 import { CountryList_shop_countries } from "../../types/CountryList";
@@ -34,7 +34,7 @@ const CountryList: React.FC<CountryListProps> = props => {
 
   return (
     <Card>
-      <Table>
+      <ResponsiveTable>
         <TableHead>
           <TableRow>
             <TableCell>
@@ -83,7 +83,7 @@ const CountryList: React.FC<CountryListProps> = props => {
             )
           )}
         </TableBody>
-      </Table>
+      </ResponsiveTable>
     </Card>
   );
 };
diff --git a/src/taxes/components/CountryTaxesPage/CountryTaxesPage.tsx b/src/taxes/components/CountryTaxesPage/CountryTaxesPage.tsx
index 9cd0a2e76..93c988c28 100644
--- a/src/taxes/components/CountryTaxesPage/CountryTaxesPage.tsx
+++ b/src/taxes/components/CountryTaxesPage/CountryTaxesPage.tsx
@@ -1,6 +1,5 @@
 import Card from "@material-ui/core/Card";
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableHead from "@material-ui/core/TableHead";
@@ -12,6 +11,7 @@ import AppHeader from "@saleor/components/AppHeader";
 import { Container } from "@saleor/components/Container";
 import Grid from "@saleor/components/Grid";
 import PageHeader from "@saleor/components/PageHeader";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import { sectionNames } from "@saleor/intl";
 import { TaxRateType } from "@saleor/types/globalTypes";
@@ -165,7 +165,7 @@ const CountryTaxesPage: React.FC<CountryTaxesPageProps> = props => {
       <Grid>
         <div>
           <Card>
-            <Table>
+            <ResponsiveTable>
               <TableHead>
                 <TableRow>
                   <TableCell className={classes.wideColumn}>
@@ -206,7 +206,7 @@ const CountryTaxesPage: React.FC<CountryTaxesPageProps> = props => {
                   )
                 )}
               </TableBody>
-            </Table>
+            </ResponsiveTable>
           </Card>
         </div>
       </Grid>
diff --git a/src/translations/components/TranslationsEntitiesList/TranslationsEntitiesList.tsx b/src/translations/components/TranslationsEntitiesList/TranslationsEntitiesList.tsx
index dc2751710..2b58938f7 100644
--- a/src/translations/components/TranslationsEntitiesList/TranslationsEntitiesList.tsx
+++ b/src/translations/components/TranslationsEntitiesList/TranslationsEntitiesList.tsx
@@ -1,6 +1,5 @@
 import { Omit } from "@material-ui/core";
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableFooter from "@material-ui/core/TableFooter";
@@ -12,6 +11,7 @@ import { FormattedMessage, useIntl } from "react-intl";
 
 import { ListProps } from "../../../types";
 
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import TablePagination from "@saleor/components/TablePagination";
 import { maybe, renderCollection } from "../../../misc";
@@ -58,7 +58,7 @@ const TranslationsEntitiesList: React.FC<
   const intl = useIntl();
 
   return (
-    <Table>
+    <ResponsiveTable>
       <TableHead>
         <TableRow>
           <TableCell className={classes.wideColumn}>
@@ -126,7 +126,7 @@ const TranslationsEntitiesList: React.FC<
           )
         )}
       </TableBody>
-    </Table>
+    </ResponsiveTable>
   );
 };
 TranslationsEntitiesList.displayName = "TranslationsEntitiesList";
diff --git a/src/translations/components/TranslationsLanguageList/TranslationsLanguageList.tsx b/src/translations/components/TranslationsLanguageList/TranslationsLanguageList.tsx
index 7400c15ea..e613d7a72 100644
--- a/src/translations/components/TranslationsLanguageList/TranslationsLanguageList.tsx
+++ b/src/translations/components/TranslationsLanguageList/TranslationsLanguageList.tsx
@@ -1,6 +1,5 @@
 import Card from "@material-ui/core/Card";
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableHead from "@material-ui/core/TableHead";
@@ -8,6 +7,7 @@ import TableRow from "@material-ui/core/TableRow";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import { ShopInfo_shop_languages } from "@saleor/components/Shop/types/ShopInfo";
 import Skeleton from "@saleor/components/Skeleton";
 import { maybe, renderCollection } from "../../../misc";
@@ -35,7 +35,7 @@ const TranslationsLanguageList: React.FC<
 
   return (
     <Card>
-      <Table>
+      <ResponsiveTable>
         <TableHead>
           <TableRow>
             <TableCell>
@@ -70,7 +70,7 @@ const TranslationsLanguageList: React.FC<
             )
           )}
         </TableBody>
-      </Table>
+      </ResponsiveTable>
     </Card>
   );
 };
diff --git a/src/webhooks/components/WebhooksList/WebhooksList.tsx b/src/webhooks/components/WebhooksList/WebhooksList.tsx
index 69f409036..2b9015983 100644
--- a/src/webhooks/components/WebhooksList/WebhooksList.tsx
+++ b/src/webhooks/components/WebhooksList/WebhooksList.tsx
@@ -1,6 +1,5 @@
 import IconButton from "@material-ui/core/IconButton";
 import makeStyles from "@material-ui/core/styles/makeStyles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableFooter from "@material-ui/core/TableFooter";
@@ -11,6 +10,7 @@ import EditIcon from "@material-ui/icons/Edit";
 import React from "react";
 import { useIntl } from "react-intl";
 
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import TablePagination from "@saleor/components/TablePagination";
 import { maybe, renderCollection, stopPropagation } from "@saleor/misc";
@@ -68,7 +68,7 @@ const WebhooksList: React.FC<WebhooksListProps> = ({
   const classes = useStyles({});
 
   return (
-    <Table className={classes.table}>
+    <ResponsiveTable className={classes.table}>
       <TableHead>
         <TableRow>
           <TableCell className={classes.colName}>
@@ -156,7 +156,7 @@ const WebhooksList: React.FC<WebhooksListProps> = ({
           )
         )}
       </TableBody>
-    </Table>
+    </ResponsiveTable>
   );
 };
 WebhooksList.displayName = "WebhooksList";