diff --git a/package.json b/package.json
index b6afdcd12..400c3d70a 100644
--- a/package.json
+++ b/package.json
@@ -93,7 +93,7 @@
     "moment-duration-format": "^2.3.2",
     "moment-timezone": "^0.5.33",
     "mui-color-input": "^9.0.0",
-    "openstack-uicore-foundation": "5.0.44",
+    "openstack-uicore-foundation": "5.0.49-beta.2",
     "p-limit": "^6.1.0",
     "path-browserify": "^1.0.1",
     "postcss-loader": "^6.2.1",
diff --git a/src/actions/sponsor-forms-actions.js b/src/actions/sponsor-forms-actions.js
index 5492628e7..bcfe40c6e 100644
--- a/src/actions/sponsor-forms-actions.js
+++ b/src/actions/sponsor-forms-actions.js
@@ -144,7 +144,9 @@ export const getSponsorForms =
       expand: "sponsorship_types"
     };
 
-    filter.push(`is_archived==${showArchived ? 1 : 0}`);
+    if (!showArchived) {
+      filter.push("is_archived==0");
+    }
 
     if (sponsorshipTypesId?.length > 0) {
       const formattedSponsorships = sponsorshipTypesId.join("&&");
diff --git a/src/components/CustomTheme.js b/src/components/CustomTheme.js
index a977d4861..aefcee380 100644
--- a/src/components/CustomTheme.js
+++ b/src/components/CustomTheme.js
@@ -91,7 +91,7 @@ const theme = createTheme(CustomThemeBase, {
           ...(ownerState.size === "medium" && {
             fontSize: "14px",
             lineHeight: "20px",
-            padding: "10px 20px"
+            padding: "8px 12px"
           }),
           ...(ownerState.size === "large" && {
             fontSize: "16px",
diff --git a/src/components/image-preview-cell.js b/src/components/image-preview-cell.js
index 82b1bb082..af93ce840 100644
--- a/src/components/image-preview-cell.js
+++ b/src/components/image-preview-cell.js
@@ -36,11 +36,11 @@ export const ImagePreviewCell = React.memo(
     return (
       <>
         <IconButton
-          size="small"
+          size="medium"
           aria-label={T.translate("preview_modal.title")}
           onClick={() => setOpen(true)}
         >
-          <ImageIcon fontSize="small" />
+          <ImageIcon fontSize="large" />
         </IconButton>
 
         {open && (
diff --git a/src/components/mui/grid-toolbar.js b/src/components/mui/grid-toolbar.js
new file mode 100644
index 000000000..1f023ba0b
--- /dev/null
+++ b/src/components/mui/grid-toolbar.js
@@ -0,0 +1,125 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { Checkbox, FormControlLabel, FormGroup, Grid2 } from "@mui/material";
+import SearchInput from "openstack-uicore-foundation/lib/components/mui/search-input";
+
+const GridToolbar = ({ searchProps, checkboxProps, children, splitAt }) => {
+  const hasSearch = !!searchProps;
+  const hasCheckbox = !!checkboxProps;
+
+  let searchSize;
+  let checkboxSize;
+  let actionsSize;
+
+  if (hasSearch && hasCheckbox) {
+    searchSize = { xs: 12, sm: 6, md: 4 };
+    checkboxSize = { xs: 12, sm: 6, md: 2 };
+    actionsSize = { xs: 12, md: 6 };
+  } else if (hasSearch) {
+    // has search but no checkbox
+    searchSize = { xs: 12, [splitAt]: 4 };
+    actionsSize = { xs: 12, [splitAt]: 8 };
+  } else if (hasCheckbox) {
+    // has checkbox but no search
+    checkboxSize = { xs: 12, [splitAt]: 4 };
+    actionsSize = { xs: 12, [splitAt]: 8 };
+  } else {
+    actionsSize = { xs: 12 };
+  }
+
+  // must match the breakpoint where actionsSize itself leaves its xs:12
+  // (own full-width row) value — that's the point flexWrap needs to switch
+  // to nowrap, so children don't get squeezed once actionsSize starts
+  // sharing a row with a sibling
+  const actionsWidthBreakpoint =
+    hasSearch && hasCheckbox ? "md" : hasSearch || hasCheckbox ? splitAt : "xs";
+
+  // children go natural (auto) width starting at actionsWidthBreakpoint,
+  // never earlier than sm; between sm and that point (only a real window
+  // when actionsWidthBreakpoint is md) they fill the row evenly instead
+  const actionsAutoBreakpoint =
+    actionsWidthBreakpoint === "xs" ? "sm" : actionsWidthBreakpoint;
+  const hasFillTier = actionsAutoBreakpoint !== "sm";
+
+  return (
+    <Grid2 container spacing={2} sx={{ mb: 3 }}>
+      {hasSearch && (
+        <Grid2 size={searchSize}>
+          <SearchInput {...searchProps} />
+        </Grid2>
+      )}
+      {hasCheckbox && (
+        <Grid2 size={checkboxSize}>
+          <FormGroup sx={{ flexShrink: 0 }}>
+            <FormControlLabel
+              control={
+                <Checkbox
+                  checked={checkboxProps.checked}
+                  onChange={checkboxProps.onChange}
+                  inputProps={{
+                    "aria-label": checkboxProps.ariaLabel ?? checkboxProps.label
+                  }}
+                />
+              }
+              label={checkboxProps.label}
+              sx={{ whiteSpace: "nowrap" }}
+            />
+          </FormGroup>
+        </Grid2>
+      )}
+      <Grid2
+        size={actionsSize}
+        sx={{
+          display: "flex",
+          justifyContent: "flex-end",
+          flexWrap: { xs: "wrap", [actionsWidthBreakpoint]: "nowrap" },
+          gap: 2
+        }}
+      >
+        {/* xs: stacked full width. sm through actionsAutoBreakpoint (only a
+            real window when that's md): fill the row evenly via flexGrow.
+            From actionsAutoBreakpoint on: natural/auto width. */}
+        {React.Children.map(children, (child) =>
+          child
+            ? React.cloneElement(child, {
+                sx: {
+                  width: { xs: "100%", [actionsAutoBreakpoint]: "auto" },
+                  ...(hasFillTier && {
+                    flexGrow: { sm: 1, [actionsAutoBreakpoint]: 0 },
+                    flexBasis: { sm: 0, [actionsAutoBreakpoint]: "auto" }
+                  }),
+                  ...child.props.sx
+                }
+              })
+            : child
+        )}
+      </Grid2>
+    </Grid2>
+  );
+};
+
+GridToolbar.propTypes = {
+  searchProps: PropTypes.shape({
+    term: PropTypes.string,
+    onSearch: PropTypes.func.isRequired,
+    placeholder: PropTypes.string,
+    debounced: PropTypes.bool
+  }),
+  checkboxProps: PropTypes.shape({
+    checked: PropTypes.bool,
+    onChange: PropTypes.func,
+    label: PropTypes.node,
+    ariaLabel: PropTypes.string
+  }),
+  // breakpoint where search/checkbox split from the actions row into their
+  // compact ratio — raise it (e.g. "lg") when actions holds a lot of children
+  splitAt: PropTypes.oneOf(["xs", "sm", "md", "lg", "xl"])
+};
+
+GridToolbar.defaultProps = {
+  searchProps: null,
+  checkboxProps: null,
+  splitAt: "sm"
+};
+
+export default GridToolbar;
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 935ec2de4..9a7082ad9 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -858,8 +858,6 @@
   },
   "tag_list": {
     "tag_list": "Tag List",
-    "item": "item",
-    "items": "items",
     "tags": "Tags",
     "add_tag": "Add Tag",
     "delete_tag_warning": "Are you sure you want to delete tag",
@@ -2765,14 +2763,12 @@
   "sponsor_forms": {
     "forms": "Forms",
     "alert_info": "To add an order form, select Add Form to start the process. To edit an existing form, click on the form name. To edit the line items within the form click manage items on the form line you wish to edit.",
-    "show_archived": "Show archived Forms",
+    "show_archived": "Show archived",
     "using_global": "Using Global Template",
     "add_form": "New Form Template",
     "code_column_label": "Code",
     "name_column_label": "Name",
     "items_column_label": "Items",
-    "item_label_singular": "Item",
-    "item_label_plural": "Items",
     "tiers_column_label": "Tiers",
     "manage_items_button": "Manage Items",
     "form_delete_success": "Form successfully deleted.",
@@ -2924,8 +2920,8 @@
   "sponsor_users": {
     "users": "Users",
     "access_request": "access request",
-    "import_user": "import existing user",
-    "add_user": "add user",
+    "import_user": "import",
+    "add_user": "add",
     "name": "Name",
     "email": "Email",
     "sponsor": "Sponsor",
@@ -3488,7 +3484,7 @@
     "media_uploads": "Media Upload Types",
     "media_upload": "Media Upload Type",
     "media_upload_list": "Media Upload Type List",
-    "add": "Add Media Upload Type",
+    "add": "Add Type",
     "no_results": "No items found for this search criteria.",
     "id": "Id",
     "name": "Name",
@@ -3504,7 +3500,7 @@
     "public_storage_type": "Public Storage Type",
     "private_storage_type": "Private Storage Type",
     "presentation_types": "Presentation Types",
-    "copy_media_uploads": "Copy Media Uploads",
+    "copy_media_uploads": "Copy Types",
     "media_uploads_copied": "Media Upload Types copied successfully.",
     "delete_warning": "Are you sure you want to delete media media type ",
     "saved": "Media Upload Type saved successfully.",
diff --git a/src/pages/admin_access/admin-access-list-page.js b/src/pages/admin_access/admin-access-list-page.js
index 5be41f527..91da17f8d 100644
--- a/src/pages/admin_access/admin-access-list-page.js
+++ b/src/pages/admin_access/admin-access-list-page.js
@@ -16,10 +16,9 @@ import { connect } from "react-redux";
 import T from "i18n-react/dist/i18n-react";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
-import Grid2 from "@mui/material/Grid2";
 import AddIcon from "@mui/icons-material/Add";
 import MuiTable from "openstack-uicore-foundation/lib/components/mui/table";
-import MuiSearchInput from "openstack-uicore-foundation/lib/components/mui/search-input";
+import GridToolbar from "../../components/mui/grid-toolbar";
 import {
   getAdminAccesses,
   deleteAdminAccess,
@@ -109,46 +108,24 @@ const AdminAccessListPage = ({
   return (
     <Box className="container">
       <h3>{T.translate("admin_access.admin_access_list")}</h3>
-      <Grid2
-        container
-        spacing={2}
-        sx={{ justifyContent: "center", alignItems: "center", mb: 2 }}
+      <GridToolbar
+        searchProps={{
+          term,
+          onSearch: handleSearch,
+          placeholder: T.translate("admin_access.placeholders.search")
+        }}
       >
-        <Grid2 size={2}>
-          <Box component="span">
-            {totalAdminAccesses} {T.translate("general.items")}
-          </Box>
-        </Grid2>
-        <Grid2
-          container
-          size={10}
-          spacing={1}
-          gap={1}
-          sx={{ justifyContent: "flex-end", alignItems: "center" }}
+        <Button
+          variant="contained"
+          startIcon={<AddIcon />}
+          onClick={handleNewAdminAccess}
         >
-          <Grid2 size={3}>
-            <MuiSearchInput
-              term={term}
-              onSearch={handleSearch}
-              placeholder={T.translate("admin_access.placeholders.search")}
-            />
-          </Grid2>
-          <Button
-            variant="contained"
-            startIcon={<AddIcon />}
-            onClick={handleNewAdminAccess}
-            sx={{
-              height: "36px",
-              padding: "6px 16px",
-              fontSize: "1.4rem",
-              lineHeight: "2.4rem",
-              letterSpacing: "0.4px"
-            }}
-          >
-            {T.translate("admin_access.add")}
-          </Button>
-        </Grid2>
-      </Grid2>
+          {T.translate("admin_access.add")}
+        </Button>
+      </GridToolbar>
+      <Box sx={{ mb: 2 }}>
+        {totalAdminAccesses} {T.translate("general.items")}
+      </Box>
 
       {admin_accesses.length === 0 && (
         <div>{T.translate("admin_access.no_results")}</div>
diff --git a/src/pages/companies/company-list-page.js b/src/pages/companies/company-list-page.js
index fc50edb96..0812d95b3 100644
--- a/src/pages/companies/company-list-page.js
+++ b/src/pages/companies/company-list-page.js
@@ -14,10 +14,10 @@
 import React, { useEffect, useState } from "react";
 import { connect } from "react-redux";
 import T from "i18n-react/dist/i18n-react";
-import { Box, Button, Grid2 } from "@mui/material";
+import { Box, Button } from "@mui/material";
 import AddIcon from "@mui/icons-material/Add";
 import MuiTable from "openstack-uicore-foundation/lib/components/mui/table";
-import SearchInput from "openstack-uicore-foundation/lib/components/mui/search-input";
+import GridToolbar from "../../components/mui/grid-toolbar";
 import {
   getCompanies,
   getCompany,
@@ -125,54 +125,24 @@ const CompanyListPage = ({
   return (
     <div className="container">
       <h3> {T.translate("company_list.company_list")}</h3>
-      <Grid2
-        container
-        spacing={1}
-        sx={{
-          justifyContent: "space-between",
-          alignItems: "center",
-          mb: 2
+      <GridToolbar
+        searchProps={{
+          term,
+          onSearch: handleSearch,
+          placeholder: T.translate("company_list.placeholders.search_companies")
         }}
       >
-        <Grid2 size={2}>
-          <Box component="span">
-            {totalCompanies} {T.translate("company_list.companies")}
-          </Box>
-        </Grid2>
-        <Grid2
-          container
-          size={10}
-          gap={1}
-          sx={{
-            justifyContent: "flex-end",
-            alignItems: "center"
-          }}
+        <Button
+          variant="contained"
+          onClick={handleNewCompany}
+          startIcon={<AddIcon />}
         >
-          <Grid2 size={4}>
-            <SearchInput
-              term={term}
-              onSearch={handleSearch}
-              placeholder={T.translate(
-                "company_list.placeholders.search_companies"
-              )}
-            />
-          </Grid2>
-          <Button
-            variant="contained"
-            onClick={handleNewCompany}
-            startIcon={<AddIcon />}
-            sx={{
-              height: "36px",
-              padding: "6px 16px",
-              fontSize: "1.4rem",
-              lineHeight: "2.4rem",
-              letterSpacing: "0.4px"
-            }}
-          >
-            {T.translate("company_list.add_company")}
-          </Button>
-        </Grid2>
-      </Grid2>
+          {T.translate("company_list.add_company")}
+        </Button>
+      </GridToolbar>
+      <Box sx={{ mb: 2 }}>
+        {totalCompanies} {T.translate("company_list.companies")}
+      </Box>
 
       {companies.length > 0 && (
         <MuiTable
diff --git a/src/pages/emails/email-template-list-page.js b/src/pages/emails/email-template-list-page.js
index 7bf9691b7..e03986741 100644
--- a/src/pages/emails/email-template-list-page.js
+++ b/src/pages/emails/email-template-list-page.js
@@ -12,13 +12,13 @@
  * */
 
 import React, { useEffect } from "react";
+import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
-import Grid2 from "@mui/material/Grid2";
 import AddIcon from "@mui/icons-material/Add";
 import { connect } from "react-redux";
 import T from "i18n-react/dist/i18n-react";
-import SearchInput from "openstack-uicore-foundation/lib/components/mui/search-input";
 import MuiTable from "openstack-uicore-foundation/lib/components/mui/table";
+import GridToolbar from "../../components/mui/grid-toolbar";
 import { DEFAULT_CURRENT_PAGE } from "../../utils/constants";
 import {
   getEmailTemplates,
@@ -115,42 +115,24 @@ const EmailTemplateListPage = ({
   return (
     <div className="container">
       <h3>{T.translate("emails.template_list")}</h3>
-      <Grid2
-        container
-        spacing={2}
-        sx={{
-          justifyContent: "center",
-          alignItems: "center",
-          mb: 2
+      <GridToolbar
+        searchProps={{
+          term,
+          onSearch: handleSearch,
+          placeholder: T.translate("emails.placeholders.search_templates")
         }}
       >
-        <Grid2 size={2}>
-          {totalTemplates} {T.translate("emails.templates")}
-        </Grid2>
-        <Grid2 size={10} container spacing={1} sx={{ justifyContent: "end" }}>
-          <Grid2 size={3}>
-            <SearchInput
-              term={term}
-              onSearch={handleSearch}
-              placeholder={T.translate("emails.placeholders.search_templates")}
-            />
-          </Grid2>
-          <Button
-            variant="contained"
-            onClick={handleNewEmailTemplate}
-            startIcon={<AddIcon />}
-            sx={{
-              height: "36px",
-              padding: "6px 16px",
-              fontSize: "1.4rem",
-              lineHeight: "2.4rem",
-              letterSpacing: "0.4px"
-            }}
-          >
-            {T.translate("emails.add_template")}
-          </Button>
-        </Grid2>
-      </Grid2>
+        <Button
+          variant="contained"
+          onClick={handleNewEmailTemplate}
+          startIcon={<AddIcon />}
+        >
+          {T.translate("emails.add_template")}
+        </Button>
+      </GridToolbar>
+      <Box sx={{ mb: 2 }}>
+        {totalTemplates} {T.translate("emails.templates")}
+      </Box>
 
       {templates.length === 0 && (
         <div>{T.translate("emails.no_templates")}</div>
diff --git a/src/pages/events/event-type-list-page.js b/src/pages/events/event-type-list-page.js
index 8b8439ee0..abdc054db 100644
--- a/src/pages/events/event-type-list-page.js
+++ b/src/pages/events/event-type-list-page.js
@@ -17,10 +17,9 @@ import PropTypes from "prop-types";
 import T from "i18n-react/dist/i18n-react";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
-import Grid2 from "@mui/material/Grid2";
 import AddIcon from "@mui/icons-material/Add";
 import MuiTable from "openstack-uicore-foundation/lib/components/mui/table";
-import SearchInput from "openstack-uicore-foundation/lib/components/mui/search-input";
+import GridToolbar from "../../components/mui/grid-toolbar";
 import {
   getEventTypes as getEventTypesAction,
   getEventType as getEventTypeAction,
@@ -135,61 +134,17 @@ const EventTypeListPage = ({
   return (
     <div className="container">
       <h3>{T.translate("event_type_list.event_type_list")}</h3>
-      <Grid2
-        container
-        spacing={1}
-        sx={{
-          justifyContent: "space-between",
-          alignItems: "center",
-          mb: 2
-        }}
-      >
-        <Grid2 size={2}>
-          <Box component="span">
-            {totalEventTypes} {T.translate("event_type_list.event_types")}
-          </Box>
-        </Grid2>
-        <Grid2
-          container
-          size={10}
-          gap={1}
-          sx={{
-            justifyContent: "flex-end",
-            alignItems: "center"
-          }}
-        >
-          <Grid2 size={4}>
-            <SearchInput term={term} onSearch={handleSearch} />
-          </Grid2>
-          <Button
-            variant="outlined"
-            onClick={handleSeed}
-            sx={{
-              height: "36px",
-              padding: "6px 16px",
-              fontSize: "1.4rem",
-              lineHeight: "2.4rem",
-              letterSpacing: "0.4px"
-            }}
-          >
-            {T.translate("event_type_list.seed_event_types")}
-          </Button>
-          <Button
-            variant="contained"
-            onClick={handleNew}
-            startIcon={<AddIcon />}
-            sx={{
-              height: "36px",
-              padding: "6px 16px",
-              fontSize: "1.4rem",
-              lineHeight: "2.4rem",
-              letterSpacing: "0.4px"
-            }}
-          >
-            {T.translate("event_type_list.add_event_type")}
-          </Button>
-        </Grid2>
-      </Grid2>
+      <GridToolbar searchProps={{ term, onSearch: handleSearch }}>
+        <Button variant="outlined" onClick={handleSeed}>
+          {T.translate("event_type_list.seed_event_types")}
+        </Button>
+        <Button variant="contained" onClick={handleNew} startIcon={<AddIcon />}>
+          {T.translate("event_type_list.add_event_type")}
+        </Button>
+      </GridToolbar>
+      <Box sx={{ mb: 2 }}>
+        {totalEventTypes} {T.translate("event_type_list.event_types")}
+      </Box>
 
       {eventTypes.length > 0 && (
         <MuiTable
diff --git a/src/pages/events/summit-event-list-page/index.js b/src/pages/events/summit-event-list-page/index.js
index ac1b7a477..0fb28c88d 100644
--- a/src/pages/events/summit-event-list-page/index.js
+++ b/src/pages/events/summit-event-list-page/index.js
@@ -14,16 +14,16 @@
 import React, { useEffect, useState } from "react";
 import { connect } from "react-redux";
 import T from "i18n-react/dist/i18n-react";
-import { Box, Button, Grid2 } from "@mui/material";
+import { Box, Button } from "@mui/material";
 import AddIcon from "@mui/icons-material/Add";
 import Dropdown from "openstack-uicore-foundation/lib/components/inputs/dropdown";
 import MuiDropdown from "openstack-uicore-foundation/lib/components/mui/dropdown";
-import SearchInput from "openstack-uicore-foundation/lib/components/mui/search-input";
 import {
   GridFilter,
   useGridFilter
 } from "openstack-uicore-foundation/lib/components/mui/grid-filter";
 import BulkEditTable from "openstack-uicore-foundation/lib/components/mui/bulk-edit-table";
+import GridToolbar from "../../../components/mui/grid-toolbar";
 import {
   bulkUpdateEvents,
   deleteEvent,
@@ -325,49 +325,39 @@ const SummitEventListPage = ({
       <h3>
         {T.translate("event_list.event_list")} ({totalEvents})
       </h3>
-      <Grid2
-        container
-        spacing={2}
-        sx={{
-          justifyContent: "space-between",
-          alignItems: "center",
-          mb: 2
+      <GridToolbar
+        splitAt="lg"
+        searchProps={{
+          term,
+          placeholder: T.translate("event_list.placeholders.search_events"),
+          onSearch: handleSearch
         }}
       >
-        <Grid2 size={4}>
-          <SearchInput
-            term={term}
-            placeholder={T.translate("event_list.placeholders.search_events")}
-            onSearch={handleSearch}
-          />
-        </Grid2>
-        <Grid2 size={8} sx={{ display: "flex", gap: 1, justifyContent: "end" }}>
-          <GridFilter
-            id={FILTER_ID}
-            criterias={getCriterias(currentSummit, mediaUploadTypes)}
-          />
-          <Button
-            variant="contained"
-            onClick={handleNewEvent}
-            startIcon={<AddIcon />}
-          >
-            {T.translate("event_list.add_event")}
-          </Button>
-          <Button variant="outlined" onClick={handleExport}>
-            {T.translate("general.export")}
-          </Button>
-          <Button
-            variant="outlined"
-            onClick={handleMUXImport}
-            sx={{ whiteSpace: "nowrap", flexShrink: 0 }}
-          >
-            {T.translate("event_list.mux_import")}
-          </Button>
-          <Button variant="outlined" onClick={() => setShowImportModal(true)}>
-            {T.translate("event_list.import")}
-          </Button>
-        </Grid2>
-      </Grid2>
+        <GridFilter
+          id={FILTER_ID}
+          criterias={getCriterias(currentSummit, mediaUploadTypes)}
+        />
+        <Button
+          variant="contained"
+          onClick={handleNewEvent}
+          startIcon={<AddIcon />}
+        >
+          {T.translate("event_list.add_event")}
+        </Button>
+        <Button variant="outlined" onClick={handleExport}>
+          {T.translate("general.export")}
+        </Button>
+        <Button
+          variant="outlined"
+          onClick={handleMUXImport}
+          sx={{ whiteSpace: "nowrap", flexShrink: 0 }}
+        >
+          {T.translate("event_list.mux_import")}
+        </Button>
+        <Button variant="outlined" onClick={() => setShowImportModal(true)}>
+          {T.translate("event_list.import")}
+        </Button>
+      </GridToolbar>
       <hr />
       <div>
         <SelectFilterCriteria
diff --git a/src/pages/media_file_types/media-file-type-list-page.js b/src/pages/media_file_types/media-file-type-list-page.js
index d110a945e..4ad510320 100644
--- a/src/pages/media_file_types/media-file-type-list-page.js
+++ b/src/pages/media_file_types/media-file-type-list-page.js
@@ -14,10 +14,10 @@
 import React, { useEffect, useState } from "react";
 import { connect } from "react-redux";
 import T from "i18n-react/dist/i18n-react";
-import { Box, Button, Grid2 } from "@mui/material";
+import { Box, Button } from "@mui/material";
 import AddIcon from "@mui/icons-material/Add";
 import MuiTable from "openstack-uicore-foundation/lib/components/mui/table";
-import SearchInput from "openstack-uicore-foundation/lib/components/mui/search-input";
+import GridToolbar from "../../components/mui/grid-toolbar";
 import {
   getMediaFileTypes,
   getMediaFileType,
@@ -125,49 +125,14 @@ const MediaFileTypeListPage = ({
   return (
     <div className="container">
       <h3>{T.translate("media_file_type.media_file_type_list")}</h3>
-      <Grid2
-        container
-        spacing={1}
-        sx={{
-          justifyContent: "space-between",
-          alignItems: "center",
-          mb: 2
-        }}
-      >
-        <Grid2 size={2}>
-          <Box component="span">
-            {totalMediaFileTypes}{" "}
-            {T.translate("media_file_type.media_file_types")}
-          </Box>
-        </Grid2>
-        <Grid2
-          container
-          size={10}
-          gap={1}
-          sx={{
-            justifyContent: "flex-end",
-            alignItems: "center"
-          }}
-        >
-          <Grid2 size={4}>
-            <SearchInput term={term} onSearch={handleSearch} />
-          </Grid2>
-          <Button
-            variant="contained"
-            onClick={handleNew}
-            startIcon={<AddIcon />}
-            sx={{
-              height: "36px",
-              padding: "6px 16px",
-              fontSize: "1.4rem",
-              lineHeight: "2.4rem",
-              letterSpacing: "0.4px"
-            }}
-          >
-            {T.translate("media_file_type.add")}
-          </Button>
-        </Grid2>
-      </Grid2>
+      <GridToolbar searchProps={{ term, onSearch: handleSearch }}>
+        <Button variant="contained" onClick={handleNew} startIcon={<AddIcon />}>
+          {T.translate("media_file_type.add")}
+        </Button>
+      </GridToolbar>
+      <Box sx={{ mb: 2 }}>
+        {totalMediaFileTypes} {T.translate("media_file_type.media_file_types")}
+      </Box>
 
       {media_file_types.length > 0 && (
         <MuiTable
diff --git a/src/pages/media_uploads/media-upload-list-page.js b/src/pages/media_uploads/media-upload-list-page.js
index c061ef4cf..af3d41f36 100644
--- a/src/pages/media_uploads/media-upload-list-page.js
+++ b/src/pages/media_uploads/media-upload-list-page.js
@@ -17,12 +17,11 @@ import PropTypes from "prop-types";
 import T from "i18n-react/dist/i18n-react";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
-import Grid2 from "@mui/material/Grid2";
 import AddIcon from "@mui/icons-material/Add";
 import MuiTable from "openstack-uicore-foundation/lib/components/mui/table";
-import SearchInput from "openstack-uicore-foundation/lib/components/mui/search-input";
 import RawHTML from "openstack-uicore-foundation/lib/components/raw-html";
 import SummitDropdown from "../../components/summit-dropdown";
+import GridToolbar from "../../components/mui/grid-toolbar";
 import {
   getMediaUploads as getMediaUploadsAction,
   deleteMediaUpload as deleteMediaUploadAction,
@@ -105,58 +104,26 @@ const MediaUploadListPage = ({
   return (
     <div className="container">
       <h3>{T.translate("media_upload.media_upload_list")}</h3>
-      <Grid2
-        container
-        spacing={1}
-        sx={{
-          justifyContent: "space-between",
-          alignItems: "center",
-          mb: 2
-        }}
-      >
-        <Grid2 size={2}>
-          <Box component="span">
-            {totalMediaUploads} {T.translate("media_upload.media_uploads")}
-          </Box>
-        </Grid2>
-        <Grid2
-          container
-          size={10}
-          gap={1}
-          sx={{
-            justifyContent: "flex-end",
-            alignItems: "center"
-          }}
-        >
-          <Grid2 size={4}>
-            <SearchInput term={term} onSearch={handleSearch} />
-          </Grid2>
+      <GridToolbar searchProps={{ term, onSearch: handleSearch }}>
+        {/* TODO: remove this wrapper once SummitDropdown is migrated to MUI */}
+        <Box sx={{ flexShrink: 0 }}>
           <SummitDropdown
             onClick={handleCopyMediaUploads}
             actionLabel={T.translate("media_upload.copy_media_uploads")}
           />
-          <Button
-            variant="contained"
-            onClick={handleNew}
-            startIcon={<AddIcon />}
-            sx={{
-              height: "36px",
-              padding: "6px 16px",
-              fontSize: "1.4rem",
-              lineHeight: "2.4rem",
-              letterSpacing: "0.4px"
-            }}
-          >
-            {T.translate("media_upload.add")}
-          </Button>
-        </Grid2>
-      </Grid2>
+        </Box>
+        <Button variant="contained" onClick={handleNew} startIcon={<AddIcon />}>
+          {T.translate("media_upload.add")}
+        </Button>
+      </GridToolbar>
+      <Box sx={{ mb: 2 }}>
+        {totalMediaUploads} {T.translate("media_upload.media_uploads")}
+      </Box>
 
       {media_uploads.length > 0 && (
         <MuiTable
           columns={columns}
           data={media_uploads}
-          tableSx={{ tableLayout: "auto" }}
           options={tableOptions}
           perPage={perPage}
           currentPage={currentPage}
diff --git a/src/pages/selection-plans/selection-plan-list-page.js b/src/pages/selection-plans/selection-plan-list-page.js
index a4c6266bc..d6aaa79ce 100644
--- a/src/pages/selection-plans/selection-plan-list-page.js
+++ b/src/pages/selection-plans/selection-plan-list-page.js
@@ -14,11 +14,11 @@
 import React, { useCallback, useEffect, useState } from "react";
 import { connect } from "react-redux";
 import T from "i18n-react/dist/i18n-react";
-import Grid2 from "@mui/material/Grid2";
+import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import AddIcon from "@mui/icons-material/Add";
-import SearchInput from "openstack-uicore-foundation/lib/components/mui/search-input";
 import MuiTable from "openstack-uicore-foundation/lib/components/mui/table";
+import GridToolbar from "../../components/mui/grid-toolbar";
 import {
   deleteSelectionPlan,
   getSelectionPlan,
@@ -171,40 +171,18 @@ const SelectionPlanListPage = ({
     <div className="container">
       <h3>{T.translate("selection_plan_list.selection_plan_list")}</h3>
 
-      <Grid2
-        container
-        spacing={2}
-        sx={{ justifyContent: "space-between", alignItems: "center", mb: 2 }}
+      <GridToolbar
+        searchProps={{
+          onSearch: handleSearch,
+          term,
+          placeholder: T.translate("selection_plan_list.placeholders.search")
+        }}
       >
-        <Grid2 size={{ xs: 12, md: 2 }}>
-          <span>{totalSelectionPlans} items</span>
-        </Grid2>
-        <Grid2
-          container
-          size={{ xs: 12, md: 10 }}
-          spacing={1}
-          sx={{ justifyContent: "flex-end", alignItems: "center" }}
-        >
-          <Grid2 size={{ xs: 12, md: 4 }}>
-            <SearchInput
-              onSearch={handleSearch}
-              term={term}
-              placeholder={T.translate(
-                "selection_plan_list.placeholders.search"
-              )}
-            />
-          </Grid2>
-          <Grid2>
-            <Button
-              variant="contained"
-              onClick={handleNew}
-              startIcon={<AddIcon />}
-            >
-              {T.translate("selection_plan_list.add_selection_plan")}
-            </Button>
-          </Grid2>
-        </Grid2>
-      </Grid2>
+        <Button variant="contained" onClick={handleNew} startIcon={<AddIcon />}>
+          {T.translate("selection_plan_list.add_selection_plan")}
+        </Button>
+      </GridToolbar>
+      <Box sx={{ mb: 2 }}>{totalSelectionPlans} items</Box>
 
       {selectionPlans.length === 0 && (
         <div>{T.translate("selection_plan_list.no_selection_plans")}</div>
diff --git a/src/pages/speakers/summit-speakers-list-page.js b/src/pages/speakers/summit-speakers-list-page.js
index b63806699..69a5140f4 100644
--- a/src/pages/speakers/summit-speakers-list-page.js
+++ b/src/pages/speakers/summit-speakers-list-page.js
@@ -14,10 +14,10 @@
 import React, { useEffect } from "react";
 import { connect } from "react-redux";
 import T from "i18n-react/dist/i18n-react";
-import { Box, Button, Grid2 } from "@mui/material";
+import { Box, Button } from "@mui/material";
 import AddIcon from "@mui/icons-material/Add";
 import MuiTable from "openstack-uicore-foundation/lib/components/mui/table";
-import SearchInput from "openstack-uicore-foundation/lib/components/mui/search-input";
+import GridToolbar from "../../components/mui/grid-toolbar";
 import { getSpeakers, deleteSpeaker } from "../../actions/speaker-actions";
 import Member from "../../models/member";
 import { DEFAULT_CURRENT_PAGE } from "../../utils/constants";
@@ -91,54 +91,26 @@ const SummitSpeakerListPage = ({
   return (
     <div className="container">
       <h3>{T.translate("speaker_list.speaker_list")}</h3>
-      <Grid2
-        container
-        spacing={1}
-        sx={{
-          justifyContent: "space-between",
-          alignItems: "center",
-          mb: 2
+      <GridToolbar
+        searchProps={{
+          term,
+          onSearch: handleSearch,
+          placeholder: T.translate("general.placeholders.search_speakers")
         }}
       >
-        <Grid2 size={2}>
-          <Box component="span">
-            {totalSpeakers} {T.translate("speaker_list.speakers")}
-          </Box>
-        </Grid2>
-        <Grid2
-          container
-          size={10}
-          gap={1}
-          sx={{
-            justifyContent: "flex-end",
-            alignItems: "center"
-          }}
-        >
-          <Grid2 size={4}>
-            <SearchInput
-              term={term}
-              onSearch={handleSearch}
-              placeholder={T.translate("general.placeholders.search_speakers")}
-            />
-          </Grid2>
-          {memberObj.canAddSpeakers() && (
-            <Button
-              variant="contained"
-              onClick={handleNewSpeaker}
-              startIcon={<AddIcon />}
-              sx={{
-                height: "36px",
-                padding: "6px 16px",
-                fontSize: "1.4rem",
-                lineHeight: "2.4rem",
-                letterSpacing: "0.4px"
-              }}
-            >
-              {T.translate("speaker_list.add_speaker")}
-            </Button>
-          )}
-        </Grid2>
-      </Grid2>
+        {memberObj.canAddSpeakers() && (
+          <Button
+            variant="contained"
+            onClick={handleNewSpeaker}
+            startIcon={<AddIcon />}
+          >
+            {T.translate("speaker_list.add_speaker")}
+          </Button>
+        )}
+      </GridToolbar>
+      <Box sx={{ mb: 2 }}>
+        {totalSpeakers} {T.translate("speaker_list.speakers")}
+      </Box>
 
       {speakers.length > 0 && (
         <MuiTable
diff --git a/src/pages/sponsors-global/add-on-types/add-on-types-list-page.js b/src/pages/sponsors-global/add-on-types/add-on-types-list-page.js
index 2c743272c..c78211e9a 100644
--- a/src/pages/sponsors-global/add-on-types/add-on-types-list-page.js
+++ b/src/pages/sponsors-global/add-on-types/add-on-types-list-page.js
@@ -12,14 +12,13 @@
  * */
 
 import React, { useEffect, useState } from "react";
-import { Button, Grid2 } from "@mui/material";
-import Box from "@mui/material/Box";
+import { Box, Button } from "@mui/material";
 import AddIcon from "@mui/icons-material/Add";
-import SearchInput from "openstack-uicore-foundation/lib/components/mui/search-input";
 import { connect } from "react-redux";
 import { Breadcrumb } from "react-breadcrumbs";
 import T from "i18n-react/dist/i18n-react";
 import MuiTable from "openstack-uicore-foundation/lib/components/mui/table";
+import GridToolbar from "../../../components/mui/grid-toolbar";
 import Restrict from "../../../routes/restrict";
 import {
   getAddOnTypes,
@@ -126,55 +125,26 @@ const AddOnTypesListPage = ({
         }}
       />
       <h3> {T.translate("add_on_types_list.add_on_types")}</h3>
-      <Grid2
-        container
-        spacing={2}
-        sx={{
-          justifyContent: "center",
-          alignItems: "center",
-          mb: 2
+      <GridToolbar
+        searchProps={{
+          term,
+          onSearch: handleSearch,
+          placeholder: T.translate(
+            "add_on_types_list.placeholders.search_add_on_types"
+          )
         }}
       >
-        <Grid2 size={2}>
-          <Box component="span">
-            {totalAddOnTypes} {T.translate("add_on_types_list.add_on_types")}
-          </Box>
-        </Grid2>
-        <Grid2
-          container
-          size={10}
-          spacing={1}
-          gap={1}
-          sx={{
-            justifyContent: "flex-end",
-            alignItems: "center"
-          }}
+        <Button
+          variant="contained"
+          onClick={() => handleNewAddOnType()}
+          startIcon={<AddIcon />}
         >
-          <Grid2 size={3}>
-            <SearchInput
-              term={term}
-              onSearch={handleSearch}
-              placeholder={T.translate(
-                "add_on_types_list.placeholders.search_add_on_types"
-              )}
-            />
-          </Grid2>
-          <Button
-            variant="contained"
-            onClick={() => handleNewAddOnType()}
-            startIcon={<AddIcon />}
-            sx={{
-              height: "36px",
-              padding: "6px 16px",
-              fontSize: "1.4rem",
-              lineHeight: "2.4rem",
-              letterSpacing: "0.4px"
-            }}
-          >
-            {T.translate("add_on_types_list.add_add_on_type")}
-          </Button>
-        </Grid2>
-      </Grid2>
+          {T.translate("add_on_types_list.add_add_on_type")}
+        </Button>
+      </GridToolbar>
+      <Box sx={{ mb: 2 }}>
+        {totalAddOnTypes} {T.translate("add_on_types_list.add_on_types")}
+      </Box>
 
       {addOnTypes.length > 0 && (
         <div>
diff --git a/src/pages/sponsors-global/form-templates/add-form-template-item-popup.js b/src/pages/sponsors-global/form-templates/add-form-template-item-popup.js
index 86496b0ad..572222989 100644
--- a/src/pages/sponsors-global/form-templates/add-form-template-item-popup.js
+++ b/src/pages/sponsors-global/form-templates/add-form-template-item-popup.js
@@ -102,7 +102,6 @@ const AddFormTemplateItemDialog = ({
     {
       columnKey: "select",
       header: "",
-      width: 30,
       align: "center",
       render: (row) => (
         <FormControlLabel
@@ -157,7 +156,6 @@ const AddFormTemplateItemDialog = ({
     {
       columnKey: "hasImage",
       header: "",
-      width: 40,
       align: "center",
       render: (row) => {
         const img = row.images?.[0];
diff --git a/src/pages/sponsors-global/form-templates/form-template-from-duplicate-popup.js b/src/pages/sponsors-global/form-templates/form-template-from-duplicate-popup.js
index 17b79a843..d5a079d20 100644
--- a/src/pages/sponsors-global/form-templates/form-template-from-duplicate-popup.js
+++ b/src/pages/sponsors-global/form-templates/form-template-from-duplicate-popup.js
@@ -62,7 +62,6 @@ const FormTemplateFromDuplicateDialog = ({
     {
       columnKey: "select",
       header: "",
-      width: 30,
       align: "center",
       render: (row) => (
         <FormControlLabel
diff --git a/src/pages/sponsors-global/form-templates/form-template-item-list-page.js b/src/pages/sponsors-global/form-templates/form-template-item-list-page.js
index 1acff070a..20d7cc4c9 100644
--- a/src/pages/sponsors-global/form-templates/form-template-item-list-page.js
+++ b/src/pages/sponsors-global/form-templates/form-template-item-list-page.js
@@ -14,18 +14,11 @@
 import React, { useEffect, useState } from "react";
 import { connect } from "react-redux";
 import T from "i18n-react/dist/i18n-react";
-import {
-  Alert,
-  Box,
-  Button,
-  Checkbox,
-  FormControlLabel,
-  FormGroup,
-  Grid2
-} from "@mui/material";
+import { Alert, Box, Button } from "@mui/material";
 import AddIcon from "@mui/icons-material/Add";
 import MuiTable from "openstack-uicore-foundation/lib/components/mui/table";
 import { ImagePreviewCell } from "../../../components/image-preview-cell";
+import GridToolbar from "../../../components/mui/grid-toolbar";
 import {
   cloneFromInventoryItem,
   getFormTemplateItem,
@@ -201,7 +194,6 @@ const FormTemplateItemListPage = ({
     {
       columnKey: "hasImage",
       header: "",
-      width: 40,
       align: "center",
       render: (row) => {
         const img = row.images?.[0];
@@ -236,57 +228,22 @@ const FormTemplateItemListPage = ({
       >
         {T.translate("form_template_item_list.alert_info")}
       </Alert>
-      <Grid2
-        container
-        spacing={2}
-        sx={{
-          justifyContent: "center",
-          alignItems: "center",
-          mb: 2
+      <GridToolbar
+        checkboxProps={{
+          checked: showArchived,
+          onChange: handleShowArchivedForms,
+          label: T.translate("form_template_item_list.show_archived")
         }}
       >
-        <Grid2 size={6}>
-          <Box component="span">{totalFormTemplateItems} items</Box>
-        </Grid2>
-        <Grid2
-          container
-          size={6}
-          spacing={1}
-          sx={{
-            justifyContent: "center",
-            alignItems: "center"
-          }}
+        <Button
+          variant="contained"
+          onClick={() => handleNewInventoryItem()}
+          startIcon={<AddIcon />}
         >
-          <Grid2 size={4} offset={4}>
-            <FormGroup>
-              <FormControlLabel
-                control={
-                  <Checkbox
-                    checked={showArchived}
-                    onChange={handleShowArchivedForms}
-                    inputProps={{
-                      "aria-label": T.translate(
-                        "form_template_item_list.show_archived"
-                      )
-                    }}
-                  />
-                }
-                label={T.translate("form_template_item_list.show_archived")}
-              />
-            </FormGroup>
-          </Grid2>
-          <Grid2 size={4}>
-            <Button
-              variant="contained"
-              fullWidth
-              onClick={() => handleNewInventoryItem()}
-              startIcon={<AddIcon />}
-            >
-              {T.translate("form_template_item_list.add_item")}
-            </Button>
-          </Grid2>
-        </Grid2>
-      </Grid2>
+          {T.translate("form_template_item_list.add_item")}
+        </Button>
+      </GridToolbar>
+      <Box sx={{ mb: 2 }}>{totalFormTemplateItems} items</Box>
 
       {formTemplateItems.length > 0 && (
         <div>
diff --git a/src/pages/sponsors-global/form-templates/form-template-list-page.js b/src/pages/sponsors-global/form-templates/form-template-list-page.js
index 302c0cc1b..f3fa811eb 100644
--- a/src/pages/sponsors-global/form-templates/form-template-list-page.js
+++ b/src/pages/sponsors-global/form-templates/form-template-list-page.js
@@ -12,20 +12,12 @@
  * */
 
 import React, { useEffect, useState } from "react";
-import {
-  Alert,
-  Button,
-  Checkbox,
-  FormControlLabel,
-  FormGroup,
-  Grid2
-} from "@mui/material";
-import Box from "@mui/material/Box";
+import { Alert, Box, Button } from "@mui/material";
 import AddIcon from "@mui/icons-material/Add";
-import SearchInput from "openstack-uicore-foundation/lib/components/mui/search-input";
 import { connect } from "react-redux";
 import T from "i18n-react/dist/i18n-react";
 import MuiTable from "openstack-uicore-foundation/lib/components/mui/table";
+import GridToolbar from "../../../components/mui/grid-toolbar";
 import {
   archiveFormTemplate,
   deleteFormTemplate,
@@ -231,11 +223,7 @@ const FormTemplateListPage = ({
 
   return (
     <div className="container">
-      <h3>
-        {" "}
-        {T.translate("form_template_list.form_templates")} ({totalFormTemplates}
-        ){" "}
-      </h3>
+      <h3>{T.translate("form_template_list.form_templates")}</h3>
       <Alert
         severity="info"
         sx={{
@@ -247,76 +235,35 @@ const FormTemplateListPage = ({
         {T.translate("form_template_list.alert_info")}
       </Alert>
 
-      <Grid2
-        container
-        spacing={1}
-        sx={{
-          justifyContent: "center",
-          alignItems: "center",
-          mb: 2
+      <GridToolbar
+        searchProps={{
+          onSearch: handleSearch,
+          placeholder: T.translate(
+            "inventory_item_list.placeholders.search_inventory_items"
+          )
+        }}
+        checkboxProps={{
+          checked: showArchived,
+          onChange: (ev) => handleShowArchivedForms(ev.target.checked),
+          label: T.translate("form_template_list.show_archived")
         }}
       >
-        <Grid2 size={1}>
-          <Box component="span">{totalFormTemplates} forms</Box>
-        </Grid2>
-        <Grid2 size={11} justifyContent="flex-end" gap={1} container>
-          <FormGroup>
-            <FormControlLabel
-              control={
-                <Checkbox
-                  onChange={(ev) => handleShowArchivedForms(ev.target.checked)}
-                  checked={showArchived}
-                  inputProps={{
-                    "aria-label": T.translate(
-                      "form_template_list.show_archived"
-                    )
-                  }}
-                />
-              }
-              label={T.translate("form_template_list.show_archived")}
-            />
-          </FormGroup>
-
-          <Grid2 size={3}>
-            <SearchInput
-              onSearch={handleSearch}
-              placeholder={T.translate(
-                "inventory_item_list.placeholders.search_inventory_items"
-              )}
-            />
-          </Grid2>
-          <Button
-            variant="contained"
-            size="medium"
-            onClick={() => handleNewFromDuplicate()}
-            startIcon={<AddIcon />}
-            sx={{
-              height: "36px",
-              padding: "6px 16px",
-              fontSize: "1.4rem",
-              lineHeight: "2.4rem",
-              letterSpacing: "0.4px"
-            }}
-          >
-            {T.translate("form_template_list.using_duplicate")}
-          </Button>
-          <Button
-            variant="contained"
-            size="medium"
-            onClick={() => handleNewFormTemplate()}
-            startIcon={<AddIcon />}
-            sx={{
-              height: "36px",
-              padding: "6px 16px",
-              fontSize: "1.4rem",
-              lineHeight: "2.4rem",
-              letterSpacing: "0.4px"
-            }}
-          >
-            {T.translate("form_template_list.add_form_template")}
-          </Button>
-        </Grid2>
-      </Grid2>
+        <Button
+          variant="contained"
+          onClick={() => handleNewFromDuplicate()}
+          startIcon={<AddIcon />}
+        >
+          {T.translate("form_template_list.using_duplicate")}
+        </Button>
+        <Button
+          variant="contained"
+          onClick={() => handleNewFormTemplate()}
+          startIcon={<AddIcon />}
+        >
+          {T.translate("form_template_list.add_form_template")}
+        </Button>
+      </GridToolbar>
+      <Box sx={{ mb: 2 }}>{totalFormTemplates} forms</Box>
 
       {formTemplates.length > 0 && (
         <div>
diff --git a/src/pages/sponsors-global/inventory/inventory-list-page.js b/src/pages/sponsors-global/inventory/inventory-list-page.js
index a3ba172f5..edb95cc3e 100644
--- a/src/pages/sponsors-global/inventory/inventory-list-page.js
+++ b/src/pages/sponsors-global/inventory/inventory-list-page.js
@@ -12,20 +12,12 @@
  * */
 
 import React, { useEffect, useState } from "react";
-import {
-  Alert,
-  Button,
-  Checkbox,
-  FormControlLabel,
-  FormGroup,
-  Grid2
-} from "@mui/material";
-import Box from "@mui/material/Box";
+import { Alert, Box, Button } from "@mui/material";
 import AddIcon from "@mui/icons-material/Add";
-import SearchInput from "openstack-uicore-foundation/lib/components/mui/search-input";
 import { connect } from "react-redux";
 import T from "i18n-react/dist/i18n-react";
 import MuiTable from "openstack-uicore-foundation/lib/components/mui/table";
+import GridToolbar from "../../../components/mui/grid-toolbar";
 import {
   archiveInventoryItem,
   deleteInventoryItemImage,
@@ -165,7 +157,6 @@ const InventoryListPage = ({
     {
       columnKey: "hasImage",
       header: "",
-      width: 40,
       align: "center",
       render: (row) => {
         const img = row.images?.[0];
@@ -202,68 +193,28 @@ const InventoryListPage = ({
       >
         {T.translate("inventory_item_list.alert_info")}
       </Alert>
-      <Grid2
-        container
-        spacing={2}
-        sx={{
-          justifyContent: "center",
-          alignItems: "center",
-          mb: 2
+      <GridToolbar
+        searchProps={{
+          onSearch: handleSearch,
+          placeholder: T.translate(
+            "inventory_item_list.placeholders.search_inventory_items"
+          )
+        }}
+        checkboxProps={{
+          checked: showArchived,
+          onChange: handleShowArchivedForms,
+          label: T.translate("inventory_item_list.show_archived")
         }}
       >
-        <Grid2 size={2}>
-          <Box component="span">{totalInventoryItems} items</Box>
-        </Grid2>
-        <Grid2
-          container
-          size={10}
-          spacing={1}
-          gap={1}
-          sx={{
-            justifyContent: "flex-end",
-            alignItems: "center"
-          }}
+        <Button
+          variant="contained"
+          onClick={() => handleNewInventoryItem()}
+          startIcon={<AddIcon />}
         >
-          <FormGroup>
-            <FormControlLabel
-              control={
-                <Checkbox
-                  onChange={handleShowArchivedForms}
-                  checked={showArchived}
-                  inputProps={{
-                    "aria-label": T.translate(
-                      "inventory_item_list.show_archived"
-                    )
-                  }}
-                />
-              }
-              label={T.translate("inventory_item_list.show_archived")}
-            />
-          </FormGroup>
-          <Grid2 size={3}>
-            <SearchInput
-              onSearch={handleSearch}
-              placeholder={T.translate(
-                "inventory_item_list.placeholders.search_inventory_items"
-              )}
-            />
-          </Grid2>
-          <Button
-            variant="contained"
-            onClick={() => handleNewInventoryItem()}
-            startIcon={<AddIcon />}
-            sx={{
-              height: "36px",
-              padding: "6px 16px",
-              fontSize: "1.4rem",
-              lineHeight: "2.4rem",
-              letterSpacing: "0.4px"
-            }}
-          >
-            {T.translate("inventory_item_list.add_inventory_item")}
-          </Button>
-        </Grid2>
-      </Grid2>
+          {T.translate("inventory_item_list.add_inventory_item")}
+        </Button>
+      </GridToolbar>
+      <Box sx={{ mb: 2 }}>{totalInventoryItems} items</Box>
 
       {inventoryItems.length > 0 && (
         <div>
diff --git a/src/pages/sponsors-global/page-templates/page-template-list-page.js b/src/pages/sponsors-global/page-templates/page-template-list-page.js
index f3ffedc6b..e58044600 100644
--- a/src/pages/sponsors-global/page-templates/page-template-list-page.js
+++ b/src/pages/sponsors-global/page-templates/page-template-list-page.js
@@ -12,20 +12,13 @@
  * */
 
 import React, { useEffect, useState } from "react";
-import {
-  Alert,
-  Button,
-  Checkbox,
-  FormControlLabel,
-  FormGroup,
-  Grid2
-} from "@mui/material";
+import { Alert, Button } from "@mui/material";
 import Box from "@mui/material/Box";
 import AddIcon from "@mui/icons-material/Add";
 import { connect } from "react-redux";
 import T from "i18n-react/dist/i18n-react";
 import MuiTable from "openstack-uicore-foundation/lib/components/mui/table";
-import SearchInput from "openstack-uicore-foundation/lib/components/mui/search-input";
+import GridToolbar from "../../../components/mui/grid-toolbar";
 import {
   archivePageTemplate,
   deletePageTemplate,
@@ -203,64 +196,36 @@ const PageTemplateListPage = ({
         {T.translate("page_template_list.alert_info")}
       </Alert>
 
-      <Grid2
-        container
-        spacing={1}
-        sx={{
-          justifyContent: "center",
-          alignItems: "center",
-          mb: 2
+      <GridToolbar
+        searchProps={{
+          onSearch: handleSearch,
+          term,
+          placeholder: T.translate("page_template_list.placeholders.search")
+        }}
+        checkboxProps={{
+          checked: showArchived,
+          onChange: handleShowArchived,
+          label: T.translate("page_template_list.show_archived")
         }}
       >
-        <Grid2 size={2}>
-          <Box component="span">{totalPageTemplates} pages</Box>
-        </Grid2>
-        <Grid2
-          container
-          size={10}
-          sx={{
-            justifyContent: "flex-end",
-            alignItems: "center"
-          }}
+        <Button
+          variant="contained"
+          size="medium"
+          onClick={handleClonePageTemplate}
+          startIcon={<AddIcon />}
         >
-          <FormGroup>
-            <FormControlLabel
-              control={
-                <Checkbox
-                  checked={showArchived}
-                  onChange={handleShowArchived}
-                />
-              }
-              label={T.translate("page_template_list.show_archived")}
-            />
-          </FormGroup>
-          <Grid2 size={3}>
-            <SearchInput
-              onSearch={handleSearch}
-              term={term}
-              placeholder={T.translate(
-                "page_template_list.placeholders.search"
-              )}
-            />
-          </Grid2>
-          <Button
-            variant="contained"
-            size="medium"
-            onClick={handleClonePageTemplate}
-            startIcon={<AddIcon />}
-          >
-            {T.translate("page_template_list.add_template")}
-          </Button>
-          <Button
-            variant="contained"
-            size="medium"
-            onClick={handleNewPageTemplate}
-            startIcon={<AddIcon />}
-          >
-            {T.translate("page_template_list.add_new")}
-          </Button>
-        </Grid2>
-      </Grid2>
+          {T.translate("page_template_list.add_template")}
+        </Button>
+        <Button
+          variant="contained"
+          size="medium"
+          onClick={handleNewPageTemplate}
+          startIcon={<AddIcon />}
+        >
+          {T.translate("page_template_list.add_new")}
+        </Button>
+      </GridToolbar>
+      <Box sx={{ mb: 2 }}>{totalPageTemplates} pages</Box>
 
       <Box sx={{ mt: 4, mb: 2 }}>
         {pageTemplates.length === 0 && (
diff --git a/src/pages/sponsors/show-pages-list-page/__tests__/show-pages-list-page.test.js b/src/pages/sponsors/show-pages-list-page/__tests__/show-pages-list-page.test.js
index 4ada962ec..8f50169df 100644
--- a/src/pages/sponsors/show-pages-list-page/__tests__/show-pages-list-page.test.js
+++ b/src/pages/sponsors/show-pages-list-page/__tests__/show-pages-list-page.test.js
@@ -275,7 +275,7 @@ describe("ShowPagesListPage", () => {
           }
         }
       );
-      const archiveButton = screen.getByText("general.archive");
+      const archiveButton = screen.getByTestId("action-archive");
       await act(async () => {
         await userEvent.click(archiveButton);
       });
@@ -295,7 +295,7 @@ describe("ShowPagesListPage", () => {
           }
         }
       );
-      const unarchiveButton = screen.getByText("general.unarchive");
+      const unarchiveButton = screen.getByTestId("action-archive");
       await act(async () => {
         await userEvent.click(unarchiveButton);
       });
diff --git a/src/pages/sponsors/show-pages-list-page/index.js b/src/pages/sponsors/show-pages-list-page/index.js
index b93ad1914..56d523783 100644
--- a/src/pages/sponsors/show-pages-list-page/index.js
+++ b/src/pages/sponsors/show-pages-list-page/index.js
@@ -15,17 +15,10 @@ import React, { useEffect, useState } from "react";
 import { connect } from "react-redux";
 import T from "i18n-react/dist/i18n-react";
 import { Breadcrumb } from "react-breadcrumbs";
-import {
-  Box,
-  Button,
-  Checkbox,
-  FormControlLabel,
-  FormGroup,
-  Grid2
-} from "@mui/material";
+import { Box, Button } from "@mui/material";
 import AddIcon from "@mui/icons-material/Add";
 import MuiTable from "openstack-uicore-foundation/lib/components/mui/table";
-import SearchInput from "openstack-uicore-foundation/lib/components/mui/search-input";
+import GridToolbar from "../../../components/mui/grid-toolbar";
 import {
   archiveShowPage,
   deleteShowPage,
@@ -203,68 +196,36 @@ const ShowPagesListPage = ({
       </div>
       <h3>{T.translate("show_pages.pages")}</h3>
       <CustomAlert message={T.translate("show_pages.alert_info")} hideIcon />
-      <Grid2
-        container
-        spacing={2}
-        sx={{
-          justifyContent: "center",
-          alignItems: "center",
-          mb: 2
+      <GridToolbar
+        searchProps={{
+          term,
+          onSearch: handleSearch,
+          placeholder: T.translate("show_pages.placeholders.search")
+        }}
+        checkboxProps={{
+          checked: showArchived,
+          onChange: handleShowArchivedForms,
+          label: T.translate("show_pages.show_archived")
         }}
       >
-        <Grid2 size={1}>
-          <Box component="span">
-            {totalCount} {T.translate("show_pages.pages")}
-          </Box>
-        </Grid2>
-        <Grid2 size={2} offset={1}>
-          <FormGroup>
-            <FormControlLabel
-              control={
-                <Checkbox
-                  onChange={handleShowArchivedForms}
-                  checked={showArchived}
-                  inputProps={{
-                    "aria-label": T.translate("show_pages.show_archived")
-                  }}
-                />
-              }
-              label={T.translate("show_pages.show_archived")}
-            />
-          </FormGroup>
-        </Grid2>
-        <Grid2 size={2}>
-          <SearchInput
-            term={term}
-            onSearch={handleSearch}
-            placeholder={T.translate("show_pages.placeholders.search")}
-          />
-        </Grid2>
-        <Grid2 size={3}>
-          <Button
-            variant="contained"
-            size="medium"
-            fullWidth
-            onClick={() => setOpenPopup("cloneTemplate")}
-            startIcon={<AddIcon />}
-            sx={{ height: "36px" }}
-          >
-            {T.translate("show_pages.using_template")}
-          </Button>
-        </Grid2>
-        <Grid2 size={3}>
-          <Button
-            variant="contained"
-            size="medium"
-            fullWidth
-            onClick={handleNewShowPage}
-            startIcon={<AddIcon />}
-            sx={{ height: "36px" }}
-          >
-            {T.translate("show_pages.new_page")}
-          </Button>
-        </Grid2>
-      </Grid2>
+        <Button
+          variant="contained"
+          onClick={() => setOpenPopup("cloneTemplate")}
+          startIcon={<AddIcon />}
+        >
+          {T.translate("show_pages.using_template")}
+        </Button>
+        <Button
+          variant="contained"
+          onClick={handleNewShowPage}
+          startIcon={<AddIcon />}
+        >
+          {T.translate("show_pages.new_page")}
+        </Button>
+      </GridToolbar>
+      <Box sx={{ mb: 2 }}>
+        {totalCount} {T.translate("show_pages.pages")}
+      </Box>
 
       {showPages.length === 0 && (
         <div>{T.translate("show_pages.no_sponsors_pages")}</div>
diff --git a/src/pages/sponsors/show-purchase-list-page/index.js b/src/pages/sponsors/show-purchase-list-page/index.js
index c20075a68..0688f7108 100644
--- a/src/pages/sponsors/show-purchase-list-page/index.js
+++ b/src/pages/sponsors/show-purchase-list-page/index.js
@@ -19,14 +19,13 @@ import {
   Box,
   Button,
   CircularProgress,
-  Grid2,
   IconButton,
   MenuItem,
   Select
 } from "@mui/material";
 import DownloadIcon from "@mui/icons-material/Download";
 import MuiTable from "openstack-uicore-foundation/lib/components/mui/table";
-import SearchInput from "openstack-uicore-foundation/lib/components/mui/search-input";
+import GridToolbar from "../../../components/mui/grid-toolbar";
 import history from "../../../history";
 import {
   approveSponsorPurchase,
@@ -116,13 +115,14 @@ const ShowPurchaseListPage = ({
     {
       columnKey: "purchased",
       header: T.translate("sponsor_show_purchases.purchased"),
-      width: 200,
-      sortable: true
+      sortable: true,
+      cellSx: { maxWidth: { md: 120, lg: 180 } }
     },
     {
       columnKey: "sponsor_name",
       header: T.translate("sponsor_show_purchases.sponsor"),
-      sortable: true
+      sortable: true,
+      cellSx: { maxWidth: 200 }
     },
     {
       columnKey: "payment_method",
@@ -171,8 +171,9 @@ const ShowPurchaseListPage = ({
     {
       columnKey: "details",
       header: "",
-      width: 100,
       align: "center",
+      width: 86,
+      cellSx: { p: 0 },
       render: (row) => (
         <Button
           variant="text"
@@ -187,8 +188,9 @@ const ShowPurchaseListPage = ({
     {
       columnKey: "menu",
       header: "",
-      width: 100,
       align: "center",
+      width: 46,
+      cellSx: { p: 0 },
       render: (row) =>
         downloadingOrderId === row.id ? (
           <CircularProgress size={24} />
@@ -217,34 +219,21 @@ const ShowPurchaseListPage = ({
         />
       </div>
       <h3>{T.translate("sponsor_show_purchases.purchases")}</h3>
-      <Grid2
-        container
-        spacing={2}
-        sx={{
-          justifyContent: "center",
-          alignItems: "center",
-          mb: 2
+      <GridToolbar
+        searchProps={{
+          term,
+          onSearch: handleSearch,
+          placeholder: T.translate("general.placeholders.search")
         }}
       >
-        <Grid2 size={2}>
-          <Box component="span">
-            {totalCount}{" "}
-            {T.translate("sponsor_show_purchases.purchases").toLowerCase()}
-          </Box>
-        </Grid2>
-        <Grid2 size={2} offset={6}>
-          <SearchInput
-            term={term}
-            onSearch={handleSearch}
-            placeholder={T.translate("general.placeholders.search")}
-          />
-        </Grid2>
-        <Grid2 size={2}>
-          <Button variant="contained" onClick={handleExport}>
-            {T.translate("general.export")}
-          </Button>
-        </Grid2>
-      </Grid2>
+        <Button variant="contained" onClick={handleExport}>
+          {T.translate("general.export")}
+        </Button>
+      </GridToolbar>
+      <Box sx={{ mb: 2 }}>
+        {totalCount}{" "}
+        {T.translate("sponsor_show_purchases.purchases").toLowerCase()}
+      </Box>
       <div>
         <MuiTable
           columns={tableColumns}
diff --git a/src/pages/sponsors/sponsor-form-item-list-page/components/sponsor-form-add-item-from-inventory-popup.js b/src/pages/sponsors/sponsor-form-item-list-page/components/sponsor-form-add-item-from-inventory-popup.js
index 8df83f36c..d5c07ab94 100644
--- a/src/pages/sponsors/sponsor-form-item-list-page/components/sponsor-form-add-item-from-inventory-popup.js
+++ b/src/pages/sponsors/sponsor-form-item-list-page/components/sponsor-form-add-item-from-inventory-popup.js
@@ -92,7 +92,6 @@ const SponsorFormAddItemFromInventoryPopup = ({
     {
       columnKey: "select",
       header: "",
-      width: 30,
       align: "center",
       render: (row) => (
         <FormControlLabel
@@ -143,7 +142,6 @@ const SponsorFormAddItemFromInventoryPopup = ({
     {
       columnKey: "hasImage",
       header: "",
-      width: 40,
       align: "center",
       render: (row) => {
         const img = row.images?.[0];
diff --git a/src/pages/sponsors/sponsor-form-item-list-page/index.js b/src/pages/sponsors/sponsor-form-item-list-page/index.js
index 260924bd8..56447fbea 100644
--- a/src/pages/sponsors/sponsor-form-item-list-page/index.js
+++ b/src/pages/sponsors/sponsor-form-item-list-page/index.js
@@ -15,18 +15,11 @@ import React, { useEffect, useState } from "react";
 import { Breadcrumb } from "react-breadcrumbs";
 import { connect } from "react-redux";
 import T from "i18n-react/dist/i18n-react";
-import {
-  Alert,
-  Box,
-  Button,
-  Checkbox,
-  FormControlLabel,
-  FormGroup,
-  Grid2
-} from "@mui/material";
+import { Alert, Box, Button } from "@mui/material";
 import AddIcon from "@mui/icons-material/Add";
 import MuiTableEditable from "openstack-uicore-foundation/lib/components/mui/editable-table";
 import { ImagePreviewCell } from "../../../components/image-preview-cell";
+import GridToolbar from "../../../components/mui/grid-toolbar";
 import {
   deleteSponsorFormItem,
   getSponsorFormItem,
@@ -235,7 +228,6 @@ const SponsorFormItemListPage = ({
     {
       columnKey: "hasImage",
       header: "",
-      width: 40,
       align: "center",
       render: (row) => {
         const img = row.images?.[0];
@@ -277,58 +269,29 @@ const SponsorFormItemListPage = ({
       >
         {T.translate("sponsor_form_item_list.alert_info")}
       </Alert>
-      <Grid2
-        container
-        spacing={2}
-        sx={{
-          justifyContent: "center",
-          alignItems: "center",
-          mb: 2
+      <GridToolbar
+        checkboxProps={{
+          checked: showArchived,
+          onChange: handleShowArchivedForms,
+          label: T.translate("sponsor_form_item_list.show_archived")
         }}
       >
-        <Grid2 size={4}>
-          <Box component="span">{totalCount} items</Box>
-        </Grid2>
-        <Grid2
-          container
-          size={8}
-          sx={{
-            justifyContent: "flex-end",
-            alignItems: "center"
-          }}
+        <Button
+          variant="contained"
+          onClick={() => handleNewItem()}
+          startIcon={<AddIcon />}
+        >
+          {T.translate("sponsor_form_item_list.add_item")}
+        </Button>
+        <Button
+          variant="contained"
+          onClick={() => handleNewInventoryItem()}
+          startIcon={<AddIcon />}
         >
-          <FormGroup>
-            <FormControlLabel
-              control={
-                <Checkbox
-                  checked={showArchived}
-                  onChange={handleShowArchivedForms}
-                  inputProps={{
-                    "aria-label": T.translate(
-                      "sponsor_form_item_list.show_archived"
-                    )
-                  }}
-                />
-              }
-              label={T.translate("sponsor_form_item_list.show_archived")}
-            />
-          </FormGroup>
-          <Button
-            variant="contained"
-            onClick={() => handleNewItem()}
-            startIcon={<AddIcon />}
-          >
-            {T.translate("sponsor_form_item_list.add_item")}
-          </Button>
-          <Button
-            variant="contained"
-            onClick={() => handleNewInventoryItem()}
-            startIcon={<AddIcon />}
-          >
-            {T.translate("sponsor_form_item_list.add_item_from_inventory")}
-          </Button>
-        </Grid2>
-      </Grid2>
+          {T.translate("sponsor_form_item_list.add_item_from_inventory")}
+        </Button>
+      </GridToolbar>
+      <Box sx={{ mb: 2 }}>{totalCount} items</Box>
 
       {items.length > 0 && (
         <div>
diff --git a/src/pages/sponsors/sponsor-forms-list-page/index.js b/src/pages/sponsors/sponsor-forms-list-page/index.js
index dc1cabe4d..598cbf130 100644
--- a/src/pages/sponsors/sponsor-forms-list-page/index.js
+++ b/src/pages/sponsors/sponsor-forms-list-page/index.js
@@ -15,18 +15,11 @@ import React, { useEffect, useState, useRef } from "react";
 import { epochToMoment } from "openstack-uicore-foundation/lib/utils/methods";
 import { connect } from "react-redux";
 import T from "i18n-react/dist/i18n-react";
-import {
-  Box,
-  Button,
-  Checkbox,
-  FormControlLabel,
-  FormGroup,
-  Grid2
-} from "@mui/material";
+import { Box, Button } from "@mui/material";
 import AddIcon from "@mui/icons-material/Add";
 import MuiDropdownCheckbox from "openstack-uicore-foundation/lib/components/mui/dropdown-checkbox";
 import MuiTable from "openstack-uicore-foundation/lib/components/mui/table";
-import SearchInput from "openstack-uicore-foundation/lib/components/mui/search-input";
+import GridToolbar from "../../../components/mui/grid-toolbar";
 import history from "../../../history";
 import {
   archiveSponsorForm,
@@ -208,23 +201,21 @@ const SponsorFormsListPage = ({
     {
       columnKey: "code",
       header: T.translate("sponsor_forms.code_column_label"),
-      sortable: true
+      sortable: true,
+      cellSx: { maxWidth: 120 }
     },
     {
       columnKey: "name",
       header: T.translate("sponsor_forms.name_column_label"),
-      sortable: true
+      sortable: true,
+      cellSx: { maxWidth: 120 }
     },
     {
       columnKey: "tiers",
       header: T.translate("sponsor_forms.tiers_column_label"),
       sortable: false,
-      width: 140,
       render: (row) => {
         const cellStyle = {
-          width: 140,
-          maxWidth: 140,
-          minWidth: 140,
           display: "block"
         };
         if (editingTiersId === row.id) {
@@ -280,8 +271,7 @@ const SponsorFormsListPage = ({
                 cursor: "pointer",
                 textDecoration: "underline dotted",
                 display: "block",
-                whiteSpace: "normal",
-                wordBreak: "break-word",
+                whiteSpace: "nowrap",
                 verticalAlign: "middle"
               }}
               title={label}
@@ -297,26 +287,26 @@ const SponsorFormsListPage = ({
       columnKey: "opens_at",
       header: T.translate("edit_sponsor.forms_tab.opens_at"),
       sortable: true,
-      width: 115,
+      headSx: { whiteSpace: "nowrap" },
       render: (row) => formatDate(row.opens_at)
     },
     {
       columnKey: "expires_at",
       header: T.translate("edit_sponsor.forms_tab.expires_at"),
       sortable: true,
-      width: 120,
+      headSx: { whiteSpace: "nowrap" },
       render: (row) => formatDate(row.expires_at)
     },
     {
       columnKey: "items_qty",
-      width: 90,
       header: T.translate("sponsor_forms.items_column_label"),
-      sortable: false
+      sortable: false,
+      cellSx: { textAlign: "center" }
     },
     {
       columnKey: "manage_items",
       header: "",
-      width: 140,
+      width: 132,
       align: "left",
       render: (row) => (
         <Button
@@ -345,71 +335,38 @@ const SponsorFormsListPage = ({
 
   return (
     <div className="container">
-      <h1>{T.translate("sponsor_forms.forms")}</h1>
+      <h3>{T.translate("sponsor_forms.forms")}</h3>
       <CustomAlert message={T.translate("sponsor_forms.alert_info")} hideIcon />
-      <Grid2
-        container
-        spacing={2}
-        sx={{
-          justifyContent: "center",
-          alignItems: "center",
-          mb: 2
+      <GridToolbar
+        searchProps={{
+          term,
+          onSearch: handleSearch,
+          placeholder: T.translate("sponsor_forms.placeholders.search")
+        }}
+        checkboxProps={{
+          checked: showArchived,
+          onChange: handleShowArchivedForms,
+          label: T.translate("sponsor_forms.show_archived")
         }}
       >
-        <Grid2 size={1}>
-          <Box component="span">{totalCount} forms</Box>
-        </Grid2>
-        <Grid2 size={2} offset={1}>
-          <FormGroup>
-            <FormControlLabel
-              control={
-                <Checkbox
-                  checked={showArchived}
-                  onChange={handleShowArchivedForms}
-                  slotProps={{
-                    input: {
-                      "aria-label": T.translate("sponsor_forms.show_archived")
-                    }
-                  }}
-                />
-              }
-              label={T.translate("sponsor_forms.show_archived")}
-              sx={{ whiteSpace: "nowrap", mb: 0 }}
-            />
-          </FormGroup>
-        </Grid2>
-        <Grid2 size={2}>
-          <SearchInput
-            term={term}
-            onSearch={handleSearch}
-            placeholder={T.translate("sponsor_forms.placeholders.search")}
-          />
-        </Grid2>
-        <Grid2 size={3}>
-          <Button
-            variant="contained"
-            size="medium"
-            fullWidth
-            onClick={() => setOpenPopup("clone")}
-            startIcon={<AddIcon />}
-            sx={{ height: "36px" }}
-          >
-            {T.translate("sponsor_forms.using_global")}
-          </Button>
-        </Grid2>
-        <Grid2 size={3}>
-          <Button
-            variant="contained"
-            size="medium"
-            fullWidth
-            onClick={() => setOpenPopup("new")}
-            startIcon={<AddIcon />}
-            sx={{ height: "36px" }}
-          >
-            {T.translate("sponsor_forms.add_form")}
-          </Button>
-        </Grid2>
-      </Grid2>
+        <Button
+          variant="contained"
+          size="medium"
+          onClick={() => setOpenPopup("clone")}
+          startIcon={<AddIcon />}
+        >
+          {T.translate("sponsor_forms.using_global")}
+        </Button>
+        <Button
+          variant="contained"
+          size="medium"
+          onClick={() => setOpenPopup("new")}
+          startIcon={<AddIcon />}
+        >
+          {T.translate("sponsor_forms.add_form")}
+        </Button>
+      </GridToolbar>
+      <Box sx={{ mb: 2 }}>{totalCount} forms</Box>
 
       {sponsorForms.length > 0 && (
         <div>
diff --git a/src/pages/sponsors/sponsor-list-page.js b/src/pages/sponsors/sponsor-list-page.js
index 9bc7d95f8..2567ef027 100644
--- a/src/pages/sponsors/sponsor-list-page.js
+++ b/src/pages/sponsors/sponsor-list-page.js
@@ -14,20 +14,20 @@
 import React, { useEffect, useState } from "react";
 import { connect } from "react-redux";
 import T from "i18n-react/dist/i18n-react";
-import { Button, Grid2, Typography, Badge, Tooltip } from "@mui/material";
+import { Badge, Button, Tooltip, Typography } from "@mui/material";
 import Box from "@mui/material/Box";
 import AddIcon from "@mui/icons-material/Add";
 import MuiTable from "openstack-uicore-foundation/lib/components/mui/table";
-import SearchInput from "openstack-uicore-foundation/lib/components/mui/search-input";
+import GridToolbar from "../../components/mui/grid-toolbar";
 import {
   getLeadReportSettingsMeta,
   getSummitById,
   upsertLeadReportSettings
 } from "../../actions/summit-actions";
 import {
-  getSponsors,
   addSponsorToSummit,
   deleteSponsor,
+  getSponsors,
   updateSponsorOrder
 } from "../../actions/sponsor-actions";
 import Member from "../../models/member";
@@ -198,54 +198,27 @@ const SponsorListPage = ({
   return (
     <div className="container">
       <h3> {T.translate("sponsor_list.sponsor_list")}</h3>
-
-      <Grid2
-        container
-        spacing={2}
-        sx={{
-          justifyContent: "center",
-          alignItems: "center",
-          mb: 2
+      <GridToolbar
+        searchProps={{
+          onSearch: handleOnSearch,
+          term,
+          placeholder: T.translate(
+            "inventory_item_list.placeholders.search_inventory_items"
+          ),
+          debounced: true
         }}
       >
-        <Grid2 size={6}>
-          <Box component="span">{totalSponsors} sponsors</Box>
-        </Grid2>
-        <Grid2
-          container
-          size={6}
-          spacing={1}
-          sx={{
-            justifyContent: "center",
-            alignItems: "center"
-          }}
-        >
-          <Grid2 size={2} />
-          <Grid2 size={6}>
-            <SearchInput
-              onSearch={handleOnSearch}
-              term={term}
-              placeholder={T.translate(
-                "inventory_item_list.placeholders.search_inventory_items"
-              )}
-              debounced
-            />
-          </Grid2>
-          <Grid2 size={4}>
-            {canAddSponsors && (
-              <Button
-                variant="contained"
-                fullWidth
-                onClick={() => handleOpenAddSponsorPopup()}
-                startIcon={<AddIcon />}
-                sx={{ height: "36px" }}
-              >
-                {T.translate("sponsor_list.add_sponsor")}
-              </Button>
-            )}
-          </Grid2>
-        </Grid2>
-      </Grid2>
+        {canAddSponsors && (
+          <Button
+            variant="contained"
+            onClick={() => handleOpenAddSponsorPopup()}
+            startIcon={<AddIcon />}
+          >
+            {T.translate("sponsor_list.add_sponsor")}
+          </Button>
+        )}
+      </GridToolbar>
+      <Box sx={{ mb: 2 }}>{totalSponsors} sponsors</Box>
 
       {sponsors.length === 0 && (
         <div>{T.translate("sponsor_list.no_sponsors")}</div>
diff --git a/src/pages/sponsors/sponsor-page/components/tab-nav.js b/src/pages/sponsors/sponsor-page/components/tab-nav.js
index 94d54b47f..db8cd8855 100644
--- a/src/pages/sponsors/sponsor-page/components/tab-nav.js
+++ b/src/pages/sponsors/sponsor-page/components/tab-nav.js
@@ -32,6 +32,7 @@ const TabNav = ({ currentSummit, sponsor, member, history, location }) => {
       value={selectedTab}
       onChange={(ev, val) => handleTabChange(val)}
       sx={{ minHeight: "36px" }}
+      variant="scrollable"
     >
       {tabs
         .filter((t) => memberObj.hasAccess(t.accessRoute))
diff --git a/src/pages/sponsors/sponsor-page/tabs/sponsor-badge-scans/index.js b/src/pages/sponsors/sponsor-page/tabs/sponsor-badge-scans/index.js
index b85c38f95..7f9e48423 100644
--- a/src/pages/sponsors/sponsor-page/tabs/sponsor-badge-scans/index.js
+++ b/src/pages/sponsors/sponsor-page/tabs/sponsor-badge-scans/index.js
@@ -14,11 +14,11 @@
 import React, { useEffect, useState } from "react";
 import { connect } from "react-redux";
 import T from "i18n-react/dist/i18n-react";
-import { Box, Button, Grid2 } from "@mui/material";
+import { Box, Button } from "@mui/material";
 import AddIcon from "@mui/icons-material/Add";
 import DownloadIcon from "@mui/icons-material/Download";
 import MuiTable from "openstack-uicore-foundation/lib/components/mui/table";
-import SearchInput from "openstack-uicore-foundation/lib/components/mui/search-input";
+import GridToolbar from "../../../../../components/mui/grid-toolbar";
 import {
   getSponsor,
   getBadgeScans,
@@ -168,61 +168,44 @@ const SponsorBadgeScans = ({
 
   return (
     <Box sx={{ mt: 2 }}>
-      <Grid2
-        container
-        spacing={1}
-        sx={{
-          justifyContent: "center",
-          alignItems: "center",
-          mb: 2
+      <GridToolbar
+        searchProps={{
+          onSearch: handleSearch,
+          placeholder: T.translate(
+            "inventory_item_list.placeholders.search_inventory_items"
+          )
         }}
       >
-        <Grid2 size={3}>
-          <Box component="span">
-            {totalBadgeScans} {T.translate("sponsor_badge_scans.badge_scanned")}
-          </Box>
-        </Grid2>
-        <Grid2 size={9} justifyContent="flex-end" gap={1} container>
-          <Grid2 size={4}>
-            <SearchInput
-              onSearch={handleSearch}
-              placeholder={T.translate(
-                "inventory_item_list.placeholders.search_inventory_items"
-              )}
-            />
-          </Grid2>
-          <Button
-            variant="contained"
-            size="medium"
-            onClick={handleNewManualScan}
-            startIcon={<AddIcon />}
-            sx={{
-              height: "36px",
-              padding: "6px 16px",
-              fontSize: "1.4rem",
-              lineHeight: "2.4rem",
-              letterSpacing: "0.4px"
-            }}
-          >
-            {T.translate("sponsor_badge_scans.add_manual_scan")}
-          </Button>
-          <Button
-            variant="contained"
-            size="medium"
-            onClick={handleExportBadgeScans}
-            startIcon={<DownloadIcon />}
-            sx={{
-              height: "36px",
-              padding: "6px 16px",
-              fontSize: "1.4rem",
-              lineHeight: "2.4rem",
-              letterSpacing: "0.4px"
-            }}
-          >
-            {T.translate("sponsor_badge_scans.export")}
-          </Button>
-        </Grid2>
-      </Grid2>
+        <Button
+          variant="contained"
+          onClick={handleNewManualScan}
+          startIcon={<AddIcon />}
+          sx={{
+            padding: "6px 16px",
+            fontSize: "1.4rem",
+            lineHeight: "2.4rem",
+            letterSpacing: "0.4px"
+          }}
+        >
+          {T.translate("sponsor_badge_scans.add_manual_scan")}
+        </Button>
+        <Button
+          variant="contained"
+          onClick={handleExportBadgeScans}
+          startIcon={<DownloadIcon />}
+          sx={{
+            padding: "6px 16px",
+            fontSize: "1.4rem",
+            lineHeight: "2.4rem",
+            letterSpacing: "0.4px"
+          }}
+        >
+          {T.translate("sponsor_badge_scans.export")}
+        </Button>
+      </GridToolbar>
+      <Box sx={{ mb: 2 }}>
+        {totalBadgeScans} {T.translate("sponsor_badge_scans.badge_scanned")}
+      </Box>
 
       {badgeScans.length > 0 && (
         <div>
diff --git a/src/pages/sponsors/sponsor-page/tabs/sponsor-cart-tab/components/cart-view.js b/src/pages/sponsors/sponsor-page/tabs/sponsor-cart-tab/components/cart-view.js
index b7934a3a8..68e870b56 100644
--- a/src/pages/sponsors/sponsor-page/tabs/sponsor-cart-tab/components/cart-view.js
+++ b/src/pages/sponsors/sponsor-page/tabs/sponsor-cart-tab/components/cart-view.js
@@ -14,20 +14,13 @@
 import React, { useEffect } from "react";
 import T from "i18n-react/dist/i18n-react";
 import { connect } from "react-redux";
-import {
-  Box,
-  Button,
-  Grid2,
-  IconButton,
-  Paper,
-  Typography
-} from "@mui/material";
+import { Box, Button, IconButton, Paper, Typography } from "@mui/material";
 import AddIcon from "@mui/icons-material/Add";
 import LockOpenIcon from "@mui/icons-material/LockOpen";
 import LockClosedIcon from "@mui/icons-material/Lock";
 import MuiTable from "openstack-uicore-foundation/lib/components/mui/table";
 import { TotalRow } from "openstack-uicore-foundation/lib/components/mui/table/extra-rows";
-import SearchInput from "openstack-uicore-foundation/lib/components/mui/search-input";
+import GridToolbar from "../../../../../../components/mui/grid-toolbar";
 import history from "../../../../../../history";
 import {
   checkoutCart,
@@ -190,40 +183,17 @@ const CartView = ({
 
   return (
     <>
-      <Grid2
-        container
-        spacing={2}
-        sx={{
-          justifyContent: "center",
-          alignItems: "center",
-          mb: 2
+      <GridToolbar
+        searchProps={{
+          term,
+          onSearch: handleSearch,
+          placeholder: T.translate("edit_sponsor.placeholders.search")
         }}
       >
-        <Grid2 size={4}>
-          {cart && (
-            <Box component="span">{cart?.forms.length} forms in Cart</Box>
-          )}
-        </Grid2>
-        <Grid2 size={2} offset={4}>
-          <SearchInput
-            term={term}
-            onSearch={handleSearch}
-            placeholder={T.translate("edit_sponsor.placeholders.search")}
-          />
-        </Grid2>
-        <Grid2 size={2}>
-          <Button
-            variant="contained"
-            size="medium"
-            fullWidth
-            onClick={onAddForm}
-            startIcon={<AddIcon />}
-            sx={{ height: "36px" }}
-          >
-            {T.translate("edit_sponsor.cart_tab.add_form")}
-          </Button>
-        </Grid2>
-      </Grid2>
+        <Button variant="contained" onClick={onAddForm} startIcon={<AddIcon />}>
+          {T.translate("edit_sponsor.cart_tab.add_form")}
+        </Button>
+      </GridToolbar>
       {!cart && (
         <Typography variant="h6" textAlign="center" sx={{ mb: 2, mt: 4 }}>
           {T.translate("edit_sponsor.cart_tab.no_cart")}
@@ -231,11 +201,12 @@ const CartView = ({
       )}
       {!!cart && (
         <>
+          <Box sx={{ mb: 2 }}>{cart?.forms.length} forms in Cart</Box>
           <Paper elevation={0} sx={{ width: "100%", mb: 2 }}>
             <MuiTable
               columns={tableColumns}
               data={cartData}
-              options={{}}
+              options={{ responsive: false }}
               onEdit={handleEditForm}
               onDelete={handleDelete}
               deleteDialogBody={(formName) =>
diff --git a/src/pages/sponsors/sponsor-page/tabs/sponsor-forms-tab/components/add-sponsor-form-template-popup/index.js b/src/pages/sponsors/sponsor-page/tabs/sponsor-forms-tab/components/add-sponsor-form-template-popup/index.js
index 33b40332e..3154614a2 100644
--- a/src/pages/sponsors/sponsor-page/tabs/sponsor-forms-tab/components/add-sponsor-form-template-popup/index.js
+++ b/src/pages/sponsors/sponsor-page/tabs/sponsor-forms-tab/components/add-sponsor-form-template-popup/index.js
@@ -140,7 +140,6 @@ const AddSponsorFormTemplatePopup = ({
     {
       columnKey: "select",
       header: "",
-      width: 30,
       align: "center",
       render: (row) => (
         <FormControlLabel
diff --git a/src/pages/sponsors/sponsor-page/tabs/sponsor-forms-tab/components/manage-items/sponsor-form-item-from-inventory.js b/src/pages/sponsors/sponsor-page/tabs/sponsor-forms-tab/components/manage-items/sponsor-form-item-from-inventory.js
index 2b65abe0a..d39840a53 100644
--- a/src/pages/sponsors/sponsor-page/tabs/sponsor-forms-tab/components/manage-items/sponsor-form-item-from-inventory.js
+++ b/src/pages/sponsors/sponsor-page/tabs/sponsor-forms-tab/components/manage-items/sponsor-form-item-from-inventory.js
@@ -12,14 +12,13 @@ import {
   DialogTitle,
   Divider,
   FormControlLabel,
-  Grid2,
   IconButton,
   Typography
 } from "@mui/material";
 import CloseIcon from "@mui/icons-material/Close";
 import SwapVertIcon from "@mui/icons-material/SwapVert";
 import MuiTable from "openstack-uicore-foundation/lib/components/mui/table";
-import SearchInput from "openstack-uicore-foundation/lib/components/mui/search-input";
+import GridToolbar from "../../../../../../../components/mui/grid-toolbar";
 import { ImagePreviewCell } from "../../../../../../../components/image-preview-cell";
 import { formatRateFromCents } from "../../../../../../../utils/rate-helpers";
 import {
@@ -84,7 +83,6 @@ const SponsorFormItemFromInventoryPopup = ({
     {
       columnKey: "select",
       header: "",
-      width: 30,
       align: "center",
       render: (row) => (
         <FormControlLabel
@@ -142,7 +140,6 @@ const SponsorFormItemFromInventoryPopup = ({
     {
       columnKey: "images",
       header: "",
-      width: 40,
       align: "center",
       render: (row) => {
         const img = row.images?.[0];
@@ -189,43 +186,38 @@ const SponsorFormItemFromInventoryPopup = ({
       </DialogTitle>
       <Divider />
       <DialogContent sx={{ p: 0 }}>
-        <Grid2 container spacing={2} size={12} sx={{ p: 2 }}>
-          <Grid2 container spacing={2} size={4} sx={{ alignItems: "baseline" }}>
-            {selectedRows.length} items selected
-          </Grid2>
-          <Grid2 container spacing={2} size={8}>
-            <Grid2 size={3}>
-              <MenuButton
-                buttonId="sort-button"
-                menuId="sort-menu"
-                menuItems={[
-                  {
-                    label: T.translate(
-                      "edit_sponsor.forms_tab.form_manage_items.sort_asc_label"
-                    ),
-                    onClick: () => handleSort("name", 1)
-                  },
-                  {
-                    label: T.translate(
-                      "edit_sponsor.forms_tab.form_manage_items.sort_desc_label"
-                    ),
-                    onClick: () => handleSort("name", 0)
-                  }
-                ]}
-              >
-                <SwapVertIcon fontSize="large" sx={{ mr: 1 }} />{" "}
-                {T.translate("general.sort_by")}
-              </MenuButton>
-            </Grid2>
-            <Grid2 size={9}>
-              <SearchInput
-                onSearch={handleOnSearch}
-                term={term}
-                placeholder={T.translate("edit_sponsor.placeholders.search")}
-              />
-            </Grid2>
-          </Grid2>
-        </Grid2>
+        <Box sx={{ p: 2 }}>
+          <GridToolbar
+            searchProps={{
+              onSearch: handleOnSearch,
+              term,
+              placeholder: T.translate("edit_sponsor.placeholders.search")
+            }}
+          >
+            <MenuButton
+              buttonId="sort-button"
+              menuId="sort-menu"
+              menuItems={[
+                {
+                  label: T.translate(
+                    "edit_sponsor.forms_tab.form_manage_items.sort_asc_label"
+                  ),
+                  onClick: () => handleSort("name", 1)
+                },
+                {
+                  label: T.translate(
+                    "edit_sponsor.forms_tab.form_manage_items.sort_desc_label"
+                  ),
+                  onClick: () => handleSort("name", 0)
+                }
+              ]}
+            >
+              <SwapVertIcon fontSize="large" sx={{ mr: 1 }} />{" "}
+              {T.translate("general.sort_by")}
+            </MenuButton>
+          </GridToolbar>
+          <Box>{selectedRows.length} items selected</Box>
+        </Box>
 
         {inventoryItems.length > 0 && (
           <Box sx={{ p: 2 }}>
diff --git a/src/pages/sponsors/sponsor-page/tabs/sponsor-forms-tab/components/manage-items/sponsor-forms-manage-items.js b/src/pages/sponsors/sponsor-page/tabs/sponsor-forms-tab/components/manage-items/sponsor-forms-manage-items.js
index 86a48eae5..4e387ccb5 100644
--- a/src/pages/sponsors/sponsor-page/tabs/sponsor-forms-tab/components/manage-items/sponsor-forms-manage-items.js
+++ b/src/pages/sponsors/sponsor-page/tabs/sponsor-forms-tab/components/manage-items/sponsor-forms-manage-items.js
@@ -14,20 +14,11 @@
 import React, { useEffect, useState } from "react";
 import { connect } from "react-redux";
 import T from "i18n-react/dist/i18n-react";
-import {
-  Box,
-  Button,
-  Checkbox,
-  FormControlLabel,
-  FormGroup,
-  Grid2,
-  IconButton,
-  Tooltip
-} from "@mui/material";
+import { Box, Button, IconButton, Tooltip } from "@mui/material";
 import AddIcon from "@mui/icons-material/Add";
 import ImageIcon from "@mui/icons-material/Image";
 import MuiTableEditable from "openstack-uicore-foundation/lib/components/mui/editable-table";
-import SearchInput from "openstack-uicore-foundation/lib/components/mui/search-input";
+import GridToolbar from "../../../../../../../components/mui/grid-toolbar";
 import {
   addSponsorManagedFormItems,
   archiveSponsorCustomizedFormItem,
@@ -257,7 +248,6 @@ const SponsorFormsManageItems = ({
     {
       columnKey: "images",
       header: "",
-      width: 40,
       align: "center",
       render: (row) =>
         row.images?.length > 0 ? (
@@ -287,72 +277,38 @@ const SponsorFormsManageItems = ({
         )}
         hideIcon
       />
-      <Grid2
-        container
-        spacing={2}
-        sx={{
-          justifyContent: "center",
-          alignItems: "center",
-          mb: 2
+      <GridToolbar
+        searchProps={{
+          term,
+          onSearch: handleSearch,
+          placeholder: T.translate("edit_sponsor.placeholders.search")
+        }}
+        checkboxProps={{
+          checked: showArchived,
+          onChange: handleShowArchivedItems,
+          label: T.translate(
+            "edit_sponsor.forms_tab.form_manage_items.show_archived"
+          )
         }}
       >
-        <Grid2 size={2}>
-          <Box component="span">{totalCount} items</Box>
-        </Grid2>
-        <Grid2 size={2} offset={1}>
-          <FormGroup>
-            <FormControlLabel
-              control={
-                <Checkbox
-                  checked={showArchived}
-                  onChange={handleShowArchivedItems}
-                  inputProps={{
-                    "aria-label": T.translate(
-                      "edit_sponsor.forms_tab.form_manage_items.show_archived"
-                    )
-                  }}
-                />
-              }
-              label={T.translate(
-                "edit_sponsor.forms_tab.form_manage_items.show_archived"
-              )}
-            />
-          </FormGroup>
-        </Grid2>
-        <Grid2 size={2}>
-          <SearchInput
-            term={term}
-            onSearch={handleSearch}
-            placeholder={T.translate("edit_sponsor.placeholders.search")}
-          />
-        </Grid2>
-        <Grid2 size={2}>
-          <Button
-            variant="contained"
-            size="medium"
-            fullWidth
-            onClick={handleOpenItemPopup}
-            startIcon={<AddIcon />}
-            sx={{ height: "36px" }}
-          >
-            {T.translate("edit_sponsor.forms_tab.form_manage_items.add_item")}
-          </Button>
-        </Grid2>
-        <Grid2 size={3}>
-          <Button
-            variant="contained"
-            size="medium"
-            fullWidth
-            onClick={() => setOpenPopup("add_item_inventory")}
-            startIcon={<AddIcon />}
-            sx={{ height: "36px" }}
-          >
-            {T.translate(
-              "edit_sponsor.forms_tab.form_manage_items.add_item_inventory"
-            )}
-          </Button>
-        </Grid2>
-      </Grid2>
+        <Button
+          variant="contained"
+          onClick={handleOpenItemPopup}
+          startIcon={<AddIcon />}
+        >
+          {T.translate("edit_sponsor.forms_tab.form_manage_items.add_item")}
+        </Button>
+        <Button
+          variant="contained"
+          onClick={() => setOpenPopup("add_item_inventory")}
+          startIcon={<AddIcon />}
+        >
+          {T.translate(
+            "edit_sponsor.forms_tab.form_manage_items.add_item_inventory"
+          )}
+        </Button>
+      </GridToolbar>
+      <Box sx={{ mb: 2 }}>{totalCount} items</Box>
 
       <div>
         <MuiTableEditable
diff --git a/src/pages/sponsors/sponsor-page/tabs/sponsor-forms-tab/index.js b/src/pages/sponsors/sponsor-page/tabs/sponsor-forms-tab/index.js
index 5e499a935..af9b0c12d 100644
--- a/src/pages/sponsors/sponsor-page/tabs/sponsor-forms-tab/index.js
+++ b/src/pages/sponsors/sponsor-page/tabs/sponsor-forms-tab/index.js
@@ -14,19 +14,11 @@
 import React, { useEffect, useState } from "react";
 import { connect } from "react-redux";
 import T from "i18n-react/dist/i18n-react";
-import {
-  Box,
-  Button,
-  Checkbox,
-  Chip,
-  FormControlLabel,
-  FormGroup,
-  Grid2
-} from "@mui/material";
+import { Box, Button, Chip } from "@mui/material";
 import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
 import AddIcon from "@mui/icons-material/Add";
 import MuiTable from "openstack-uicore-foundation/lib/components/mui/table";
-import SearchInput from "openstack-uicore-foundation/lib/components/mui/search-input";
+import GridToolbar from "../../../../../components/mui/grid-toolbar";
 import {
   archiveSponsorCustomizedForm,
   deleteSponsorCustomizedForm,
@@ -296,7 +288,6 @@ const SponsorFormsTab = ({
       columnKey: "allowed_add_ons",
       header: T.translate("edit_sponsor.forms_tab.add_ons"),
       sortable: true,
-      width: 120,
       render: (row) =>
         row.allowed_add_ons?.length > 0
           ? row.allowed_add_ons.map((a) => `${a.type} ${a.name}`).join(", ")
@@ -318,7 +309,6 @@ const SponsorFormsTab = ({
       columnKey: "items_qty",
       header: T.translate("edit_sponsor.forms_tab.items"),
       sortable: true,
-      width: 90,
       render: (row) =>
         `${row.items_count} ${
           row.items_count === 1
@@ -405,70 +395,36 @@ const SponsorFormsTab = ({
         message={T.translate("edit_sponsor.forms_tab.alert_info")}
         hideIcon
       />
-      <Grid2
-        container
-        spacing={2}
-        sx={{
-          justifyContent: "center",
-          alignItems: "center",
-          mb: 2
+      <GridToolbar
+        searchProps={{
+          term,
+          onSearch: handleSearch,
+          placeholder: T.translate("edit_sponsor.placeholders.search")
+        }}
+        checkboxProps={{
+          checked: showArchived,
+          onChange: handleShowArchivedForms,
+          label: T.translate("edit_sponsor.forms_tab.show_archived")
         }}
       >
-        <Grid2 size={1}>
-          <Box component="span">
-            {managedForms.totalCount + customizedForms.totalCount} forms
-          </Box>
-        </Grid2>
-        <Grid2 size={2} offset={1}>
-          <FormGroup>
-            <FormControlLabel
-              control={
-                <Checkbox
-                  checked={showArchived}
-                  onChange={handleShowArchivedForms}
-                  inputProps={{
-                    "aria-label": T.translate(
-                      "edit_sponsor.forms_tab.show_archived"
-                    )
-                  }}
-                />
-              }
-              label={T.translate("edit_sponsor.forms_tab.show_archived")}
-            />
-          </FormGroup>
-        </Grid2>
-        <Grid2 size={2}>
-          <SearchInput
-            term={term}
-            onSearch={handleSearch}
-            placeholder={T.translate("edit_sponsor.placeholders.search")}
-          />
-        </Grid2>
-        <Grid2 size={3}>
-          <Button
-            variant="contained"
-            size="medium"
-            fullWidth
-            onClick={() => setOpenPopup("template")}
-            startIcon={<AddIcon />}
-            sx={{ height: "36px" }}
-          >
-            {T.translate("edit_sponsor.forms_tab.using_template")}
-          </Button>
-        </Grid2>
-        <Grid2 size={3}>
-          <Button
-            variant="contained"
-            size="medium"
-            fullWidth
-            onClick={() => setCustomFormEdit("new")}
-            startIcon={<AddIcon />}
-            sx={{ height: "36px" }}
-          >
-            {T.translate("edit_sponsor.forms_tab.new_form")}
-          </Button>
-        </Grid2>
-      </Grid2>
+        <Button
+          variant="contained"
+          onClick={() => setOpenPopup("template")}
+          startIcon={<AddIcon />}
+        >
+          {T.translate("edit_sponsor.forms_tab.using_template")}
+        </Button>
+        <Button
+          variant="contained"
+          onClick={() => setCustomFormEdit("new")}
+          startIcon={<AddIcon />}
+        >
+          {T.translate("edit_sponsor.forms_tab.new_form")}
+        </Button>
+      </GridToolbar>
+      <Box sx={{ mb: 2 }}>
+        {managedForms.totalCount + customizedForms.totalCount} forms
+      </Box>
       <div>
         <MuiTable
           columns={customizedFormsColumns}
@@ -478,7 +434,6 @@ const SponsorFormsTab = ({
             sortDir: customizedForms.orderDir,
             disableProp: "is_archived"
           }}
-          tableSx={{ tableLayout: "auto", minWidth: 910 }}
           perPage={customizedForms.perPage}
           totalRows={customizedForms.totalCount}
           currentPage={customizedForms.currentPage}
@@ -499,7 +454,6 @@ const SponsorFormsTab = ({
             sortCol: managedForms.order,
             sortDir: managedForms.orderDir
           }}
-          tableSx={{ tableLayout: "auto", minWidth: 910 }}
           perPage={managedForms.perPage}
           totalRows={managedForms.totalCount}
           currentPage={managedForms.currentPage}
diff --git a/src/pages/sponsors/sponsor-page/tabs/sponsor-pages-tab/__tests__/sponsor-pages-tab.test.js b/src/pages/sponsors/sponsor-page/tabs/sponsor-pages-tab/__tests__/sponsor-pages-tab.test.js
index 6821d609d..b3e2a6cf3 100644
--- a/src/pages/sponsors/sponsor-page/tabs/sponsor-pages-tab/__tests__/sponsor-pages-tab.test.js
+++ b/src/pages/sponsors/sponsor-page/tabs/sponsor-pages-tab/__tests__/sponsor-pages-tab.test.js
@@ -396,7 +396,7 @@ describe("SponsorPagesTab", () => {
       }
     );
 
-    const archiveButton = screen.getByText("general.archive");
+    const archiveButton = screen.getByTestId("action-archive");
     await act(async () => {
       await userEvent.click(archiveButton);
     });
@@ -422,7 +422,7 @@ describe("SponsorPagesTab", () => {
       }
     );
 
-    const unarchiveButton = screen.getByText("general.unarchive");
+    const unarchiveButton = screen.getByTestId("action-archive");
     await act(async () => {
       await userEvent.click(unarchiveButton);
     });
diff --git a/src/pages/sponsors/sponsor-page/tabs/sponsor-pages-tab/components/add-sponsor-page-template-popup/index.js b/src/pages/sponsors/sponsor-page/tabs/sponsor-pages-tab/components/add-sponsor-page-template-popup/index.js
index 90cf133cd..c423a096c 100644
--- a/src/pages/sponsors/sponsor-page/tabs/sponsor-pages-tab/components/add-sponsor-page-template-popup/index.js
+++ b/src/pages/sponsors/sponsor-page/tabs/sponsor-pages-tab/components/add-sponsor-page-template-popup/index.js
@@ -159,7 +159,6 @@ const AddSponsorPageTemplatePopup = ({
     {
       columnKey: "select",
       header: "",
-      width: 30,
       align: "center",
       render: (row) => (
         <FormControlLabel
diff --git a/src/pages/sponsors/sponsor-page/tabs/sponsor-pages-tab/index.js b/src/pages/sponsors/sponsor-page/tabs/sponsor-pages-tab/index.js
index bf530a36c..5f12521e9 100644
--- a/src/pages/sponsors/sponsor-page/tabs/sponsor-pages-tab/index.js
+++ b/src/pages/sponsors/sponsor-page/tabs/sponsor-pages-tab/index.js
@@ -14,18 +14,11 @@
 import React, { useEffect, useState } from "react";
 import { connect } from "react-redux";
 import T from "i18n-react/dist/i18n-react";
-import {
-  Box,
-  Button,
-  Checkbox,
-  FormControlLabel,
-  FormGroup,
-  Grid2
-} from "@mui/material";
+import { Box, Button } from "@mui/material";
 import AddIcon from "@mui/icons-material/Add";
 import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
 import MuiTable from "openstack-uicore-foundation/lib/components/mui/table";
-import SearchInput from "openstack-uicore-foundation/lib/components/mui/search-input";
+import GridToolbar from "../../../../../components/mui/grid-toolbar";
 import {
   getSponsorManagedPages,
   getSponsorManagedPage,
@@ -369,71 +362,37 @@ const SponsorPagesTab = ({
         message={T.translate("edit_sponsor.pages_tab.alert_info")}
         hideIcon
       />
-      <Grid2
-        container
-        spacing={2}
-        sx={{
-          justifyContent: "center",
-          alignItems: "center",
-          mb: 2
+      <GridToolbar
+        searchProps={{
+          term,
+          onSearch: handleSearch,
+          placeholder: T.translate("edit_sponsor.placeholders.search")
+        }}
+        checkboxProps={{
+          checked: showArchived,
+          onChange: handleShowArchived,
+          label: T.translate("edit_sponsor.pages_tab.show_archived")
         }}
       >
-        <Grid2 size={1}>
-          <Box component="span">
-            {managedPages.totalItems + customizedPages.totalItems}{" "}
-            {T.translate("edit_sponsor.pages_tab.pages")}
-          </Box>
-        </Grid2>
-        <Grid2 size={2} offset={1}>
-          <FormGroup>
-            <FormControlLabel
-              control={
-                <Checkbox
-                  checked={showArchived}
-                  onChange={handleShowArchived}
-                  inputProps={{
-                    "aria-label": T.translate(
-                      "edit_sponsor.pages_tab.show_archived"
-                    )
-                  }}
-                />
-              }
-              label={T.translate("edit_sponsor.pages_tab.show_archived")}
-            />
-          </FormGroup>
-        </Grid2>
-        <Grid2 size={2}>
-          <SearchInput
-            term={term}
-            onSearch={handleSearch}
-            placeholder={T.translate("edit_sponsor.placeholders.search")}
-          />
-        </Grid2>
-        <Grid2 size={3}>
-          <Button
-            variant="contained"
-            size="medium"
-            fullWidth
-            onClick={handleUsingTemplate}
-            startIcon={<AddIcon />}
-            sx={{ height: "36px" }}
-          >
-            {T.translate("edit_sponsor.pages_tab.using_template")}
-          </Button>
-        </Grid2>
-        <Grid2 size={3}>
-          <Button
-            variant="contained"
-            size="medium"
-            fullWidth
-            onClick={handleAddPage}
-            startIcon={<AddIcon />}
-            sx={{ height: "36px" }}
-          >
-            {T.translate("edit_sponsor.pages_tab.new_page")}
-          </Button>
-        </Grid2>
-      </Grid2>
+        <Button
+          variant="contained"
+          onClick={handleUsingTemplate}
+          startIcon={<AddIcon />}
+        >
+          {T.translate("edit_sponsor.pages_tab.using_template")}
+        </Button>
+        <Button
+          variant="contained"
+          onClick={handleAddPage}
+          startIcon={<AddIcon />}
+        >
+          {T.translate("edit_sponsor.pages_tab.new_page")}
+        </Button>
+      </GridToolbar>
+      <Box sx={{ mb: 2 }}>
+        {managedPages.totalItems + customizedPages.totalItems}{" "}
+        {T.translate("edit_sponsor.pages_tab.pages")}
+      </Box>
       <div>
         <MuiTable
           columns={customizedPagesColumns}
diff --git a/src/pages/sponsors/sponsor-page/tabs/sponsor-purchases-tab/index.js b/src/pages/sponsors/sponsor-page/tabs/sponsor-purchases-tab/index.js
index 4fa032a75..e1dde7571 100644
--- a/src/pages/sponsors/sponsor-page/tabs/sponsor-purchases-tab/index.js
+++ b/src/pages/sponsors/sponsor-page/tabs/sponsor-purchases-tab/index.js
@@ -18,14 +18,13 @@ import {
   Box,
   Button,
   CircularProgress,
-  Grid2,
   IconButton,
   MenuItem,
   Select
 } from "@mui/material";
 import DownloadIcon from "@mui/icons-material/Download";
 import MuiTable from "openstack-uicore-foundation/lib/components/mui/table";
-import SearchInput from "openstack-uicore-foundation/lib/components/mui/search-input";
+import GridToolbar from "../../../../../components/mui/grid-toolbar";
 import history from "../../../../../history";
 import {
   approveSponsorPurchase,
@@ -191,28 +190,16 @@ const SponsorPurchasesTab = ({
 
   return (
     <Box sx={{ mt: 2 }}>
-      <Grid2
-        container
-        spacing={2}
-        sx={{
-          justifyContent: "center",
-          alignItems: "center",
-          mb: 2
+      <GridToolbar
+        searchProps={{
+          term,
+          onSearch: handleSearch,
+          placeholder: T.translate("edit_sponsor.placeholders.search")
         }}
-      >
-        <Grid2 size={2}>
-          <Box component="span">
-            {totalCount} {T.translate("edit_sponsor.purchase_tab.purchases")}
-          </Box>
-        </Grid2>
-        <Grid2 size={2} offset={8}>
-          <SearchInput
-            term={term}
-            onSearch={handleSearch}
-            placeholder={T.translate("edit_sponsor.placeholders.search")}
-          />
-        </Grid2>
-      </Grid2>
+      />
+      <Box sx={{ mb: 2 }}>
+        {totalCount} {T.translate("edit_sponsor.purchase_tab.purchases")}
+      </Box>
       <div>
         <MuiTable
           columns={tableColumns}
diff --git a/src/pages/sponsors/sponsor-page/tabs/sponsor-users-list-per-sponsor/index.js b/src/pages/sponsors/sponsor-page/tabs/sponsor-users-list-per-sponsor/index.js
index 47c1ac425..79dd08be0 100644
--- a/src/pages/sponsors/sponsor-page/tabs/sponsor-users-list-per-sponsor/index.js
+++ b/src/pages/sponsors/sponsor-page/tabs/sponsor-users-list-per-sponsor/index.js
@@ -14,10 +14,10 @@
 import React, { useEffect, useRef, useState } from "react";
 import { connect } from "react-redux";
 import T from "i18n-react/dist/i18n-react";
-import { Box, Button, CircularProgress, Grid2 } from "@mui/material";
+import { Box, Button, CircularProgress } from "@mui/material";
 import AddIcon from "@mui/icons-material/Add";
 import SaveAltIcon from "@mui/icons-material/SaveAlt";
-import SearchInput from "openstack-uicore-foundation/lib/components/mui/search-input";
+import GridToolbar from "../../../../../components/mui/grid-toolbar";
 import {
   deleteSponsorUser,
   getSponsorUserRequests,
@@ -92,52 +92,27 @@ const SponsorUsersListPerSponsorPage = ({
         />
       )}
       <CustomAlert message={T.translate("sponsor_users.alert_info")} />
-      <Grid2
-        container
-        spacing={2}
-        sx={{
-          justifyContent: "center",
-          alignItems: "center",
-          mb: 2
-        }}
-      >
-        <Grid2 size={2}>
-          <Box component="span">
-            {users.totalCount}{" "}
-            {T.translate("sponsor_users.users").toLowerCase()}
-          </Box>
-        </Grid2>
-        <Grid2
-          container
-          size={10}
-          sx={{
-            justifyContent: "flex-end",
-            alignItems: "center"
-          }}
+      <GridToolbar searchProps={{ term, onSearch: handleSearch }}>
+        <Button
+          variant="contained"
+          size="medium"
+          onClick={() => setOpenPopup("import")}
+          startIcon={<SaveAltIcon />}
+        >
+          {T.translate("sponsor_users.import_user")}
+        </Button>
+        <Button
+          variant="contained"
+          size="medium"
+          onClick={() => setOpenPopup("new_user")}
+          startIcon={<AddIcon />}
         >
-          <Grid2 size={3}>
-            <SearchInput term={term} onSearch={handleSearch} />
-          </Grid2>
-          <Button
-            variant="contained"
-            size="medium"
-            onClick={() => setOpenPopup("import")}
-            startIcon={<SaveAltIcon />}
-            sx={{ height: "36px" }}
-          >
-            {T.translate("sponsor_users.import_user")}
-          </Button>
-          <Button
-            variant="contained"
-            size="medium"
-            onClick={() => setOpenPopup("new_user")}
-            startIcon={<AddIcon />}
-            sx={{ height: "36px" }}
-          >
-            {T.translate("sponsor_users.add_user")}
-          </Button>
-        </Grid2>
-      </Grid2>
+          {T.translate("sponsor_users.add_user")}
+        </Button>
+      </GridToolbar>
+      <Box sx={{ mb: 2 }}>
+        {users.totalCount} {T.translate("sponsor_users.users").toLowerCase()}
+      </Box>
 
       {hasImportTasks && (
         <Box
diff --git a/src/pages/sponsors/sponsor-users-list-page/components/request-table.js b/src/pages/sponsors/sponsor-users-list-page/components/request-table.js
index c42a22131..70c707b61 100644
--- a/src/pages/sponsors/sponsor-users-list-page/components/request-table.js
+++ b/src/pages/sponsors/sponsor-users-list-page/components/request-table.js
@@ -76,37 +76,35 @@ const RequestTable = ({ requests, term, getRequests, onRequestDelete }) => {
   };
 
   return (
-    requests.items.length > 0 && (
-      <div>
-        <MuiTable
-          columns={requestsColumns}
-          data={requests.items}
-          options={requestsTableOptions}
-          perPage={requests.perPage}
-          totalRows={requests.totalCount}
-          currentPage={requests.currentPage}
-          onDelete={handleRequestDelete}
-          onPageChange={handleRequestsPageChange}
-          onPerPageChange={handlePerPageChange}
-          onSort={handleRequestsSort}
-          deleteDialogTitle={T.translate(
-            "sponsor_users.process_request.delete_confirmation_title"
-          )}
-          deleteDialogBody={T.translate(
-            "sponsor_users.process_request.delete_confirmation_body"
-          )}
-          deleteDialogConfirmText={T.translate("general.confirm")}
-          confirmButtonColor="primary"
-        />
-
-        {processRequest && (
-          <ProcessRequestPopup
-            request={processRequest}
-            onClose={() => setProcessRequest(null)}
-          />
+    <div>
+      <MuiTable
+        columns={requestsColumns}
+        data={requests.items}
+        options={requestsTableOptions}
+        perPage={requests.perPage}
+        totalRows={requests.totalCount}
+        currentPage={requests.currentPage}
+        onDelete={handleRequestDelete}
+        onPageChange={handleRequestsPageChange}
+        onPerPageChange={handlePerPageChange}
+        onSort={handleRequestsSort}
+        deleteDialogTitle={T.translate(
+          "sponsor_users.process_request.delete_confirmation_title"
+        )}
+        deleteDialogBody={T.translate(
+          "sponsor_users.process_request.delete_confirmation_body"
         )}
-      </div>
-    )
+        deleteDialogConfirmText={T.translate("general.confirm")}
+        confirmButtonColor="primary"
+      />
+
+      {processRequest && (
+        <ProcessRequestPopup
+          request={processRequest}
+          onClose={() => setProcessRequest(null)}
+        />
+      )}
+    </div>
   );
 };
 
diff --git a/src/pages/sponsors/sponsor-users-list-page/components/users-table.js b/src/pages/sponsors/sponsor-users-list-page/components/users-table.js
index fc85ead9f..74df0520c 100644
--- a/src/pages/sponsors/sponsor-users-list-page/components/users-table.js
+++ b/src/pages/sponsors/sponsor-users-list-page/components/users-table.js
@@ -119,27 +119,25 @@ const UsersTable = ({
   });
 
   return (
-    users.items.length > 0 && (
-      <div>
-        <MuiTable
-          columns={usersColumns}
-          data={userData}
-          options={usersTableOptions}
-          perPage={users.perPage}
-          totalRows={users.totalCount}
-          currentPage={users.currentPage}
-          getName={(user) => user.email}
-          onEdit={onEdit}
-          onDelete={handleUserDelete}
-          deleteDialogBody={(user) =>
-            T.translate("edit_sponsor.remove_sponsor_user_warning", { user })
-          }
-          onPageChange={handleUsersPageChange}
-          onPerPageChange={handlePerPageChange}
-          onSort={handleUsersSort}
-        />
-      </div>
-    )
+    <div>
+      <MuiTable
+        columns={usersColumns}
+        data={userData}
+        options={usersTableOptions}
+        perPage={users.perPage}
+        totalRows={users.totalCount}
+        currentPage={users.currentPage}
+        getName={(user) => user.email}
+        onEdit={onEdit}
+        onDelete={handleUserDelete}
+        deleteDialogBody={(user) =>
+          T.translate("edit_sponsor.remove_sponsor_user_warning", { user })
+        }
+        onPageChange={handleUsersPageChange}
+        onPerPageChange={handlePerPageChange}
+        onSort={handleUsersSort}
+      />
+    </div>
   );
 };
 
diff --git a/src/pages/sponsors/sponsor-users-list-page/index.js b/src/pages/sponsors/sponsor-users-list-page/index.js
index 2b4fce0f4..28824d2d1 100644
--- a/src/pages/sponsors/sponsor-users-list-page/index.js
+++ b/src/pages/sponsors/sponsor-users-list-page/index.js
@@ -15,10 +15,10 @@ import React, { useEffect, useRef, useState } from "react";
 import { connect } from "react-redux";
 import T from "i18n-react/dist/i18n-react";
 import { Breadcrumb } from "react-breadcrumbs";
-import { Box, Button, CircularProgress, Grid2 } from "@mui/material";
+import { Box, Button, CircularProgress } from "@mui/material";
 import AddIcon from "@mui/icons-material/Add";
 import SaveAltIcon from "@mui/icons-material/SaveAlt";
-import SearchInput from "openstack-uicore-foundation/lib/components/mui/search-input";
+import GridToolbar from "../../../components/mui/grid-toolbar";
 import {
   deleteSponsorUser,
   deleteSponsorUserRequest,
@@ -106,51 +106,22 @@ const SponsorUsersListPage = ({
         }}
       />
       <h3>{T.translate("sponsor_users.users")}</h3>
-      <Grid2
-        container
-        spacing={2}
-        sx={{
-          justifyContent: "center",
-          alignItems: "center",
-          mb: 2
-        }}
-      >
-        <Grid2 size={2}>
-          <Box component="span">
-            {requests.totalCount} {T.translate("sponsor_users.access_request")}
-          </Box>
-        </Grid2>
-        <Grid2
-          container
-          size={10}
-          sx={{
-            justifyContent: "flex-end",
-            alignItems: "center"
-          }}
+      <GridToolbar searchProps={{ term, onSearch: handleSearch }}>
+        <Button
+          variant="contained"
+          onClick={() => setOpenPopup("import")}
+          startIcon={<SaveAltIcon />}
         >
-          <Grid2 size={3}>
-            <SearchInput term={term} onSearch={handleSearch} />
-          </Grid2>
-          <Button
-            variant="contained"
-            size="medium"
-            onClick={() => setOpenPopup("import")}
-            startIcon={<AddIcon />}
-            sx={{ height: "36px" }}
-          >
-            {T.translate("sponsor_users.import_user")}
-          </Button>
-          <Button
-            variant="contained"
-            size="medium"
-            onClick={() => setOpenPopup("new")}
-            startIcon={<SaveAltIcon />}
-            sx={{ height: "36px" }}
-          >
-            {T.translate("sponsor_users.add_user")}
-          </Button>
-        </Grid2>
-      </Grid2>
+          {T.translate("sponsor_users.import_user")}
+        </Button>
+        <Button
+          variant="contained"
+          onClick={() => setOpenPopup("new")}
+          startIcon={<AddIcon />}
+        >
+          {T.translate("sponsor_users.add_user")}
+        </Button>
+      </GridToolbar>
 
       {hasImportTasks && (
         <Box
@@ -167,6 +138,10 @@ const SponsorUsersListPage = ({
         </Box>
       )}
 
+      <Box sx={{ mb: 2 }}>
+        {requests.totalCount} {T.translate("sponsor_users.access_request")}
+      </Box>
+
       <RequestTable
         requests={requests}
         term={term}
diff --git a/src/pages/sponsors/summit-sponsorship-list-page.js b/src/pages/sponsors/summit-sponsorship-list-page.js
index e395099d7..e62dcd9d1 100644
--- a/src/pages/sponsors/summit-sponsorship-list-page.js
+++ b/src/pages/sponsors/summit-sponsorship-list-page.js
@@ -14,9 +14,10 @@
 import React, { useEffect, useState } from "react";
 import { connect } from "react-redux";
 import T from "i18n-react/dist/i18n-react";
-import { Alert, Box, Button, Grid2 } from "@mui/material";
+import { Alert, Box, Button } from "@mui/material";
 import AddIcon from "@mui/icons-material/Add";
 import MuiTableSortable from "openstack-uicore-foundation/lib/components/mui/sortable-table";
+import GridToolbar from "../../components/mui/grid-toolbar";
 import { getSummitById } from "../../actions/summit-actions";
 import {
   deleteSummitSponsorship,
@@ -139,41 +140,16 @@ const SummitSponsorshipListPage = ({
       >
         {T.translate("summit_sponsorship_list.alert_info")}
       </Alert>
-      <Grid2
-        container
-        spacing={2}
-        sx={{
-          justifyContent: "center",
-          alignItems: "center",
-          mb: 2
-        }}
-      >
-        <Grid2 size={6}>
-          <Box component="span">{totalSponsorships} summit tiers</Box>
-        </Grid2>
-        <Grid2
-          container
-          size={6}
-          spacing={1}
-          sx={{
-            justifyContent: "center",
-            alignItems: "center"
-          }}
+      <GridToolbar>
+        <Button
+          variant="contained"
+          onClick={handleNewSponsorship}
+          startIcon={<AddIcon />}
         >
-          <Grid2 size={{ xs: 0, sm: 4, lg: 6, xl: 7 }} />
-          <Grid2 size={{ xs: 12, sm: 8, lg: 6, xl: 5 }}>
-            <Button
-              variant="contained"
-              fullWidth
-              onClick={handleNewSponsorship}
-              startIcon={<AddIcon />}
-              sx={{ height: "36px" }}
-            >
-              {T.translate("summit_sponsorship_list.add_sponsorship")}
-            </Button>
-          </Grid2>
-        </Grid2>
-      </Grid2>
+          {T.translate("summit_sponsorship_list.add_sponsorship")}
+        </Button>
+      </GridToolbar>
+      <Box sx={{ mb: 2 }}>{totalSponsorships} summit tiers</Box>
 
       {sponsorships.length === 0 && (
         <div>{T.translate("summit_sponsorship_list.no_sponsorships")}</div>
diff --git a/src/pages/sponsorship-types/sponsorship-list-page.js b/src/pages/sponsorship-types/sponsorship-list-page.js
index ffd0f2232..0f3784760 100644
--- a/src/pages/sponsorship-types/sponsorship-list-page.js
+++ b/src/pages/sponsorship-types/sponsorship-list-page.js
@@ -14,10 +14,10 @@
 import React, { useEffect, useState } from "react";
 import { connect } from "react-redux";
 import T from "i18n-react/dist/i18n-react";
-import { Box, Button, Grid2 } from "@mui/material";
+import { Box, Button } from "@mui/material";
 import AddIcon from "@mui/icons-material/Add";
 import MuiTable from "openstack-uicore-foundation/lib/components/mui/table";
-import SearchInput from "openstack-uicore-foundation/lib/components/mui/search-input";
+import GridToolbar from "../../components/mui/grid-toolbar";
 import {
   getSponsorships,
   getSponsorship,
@@ -119,54 +119,20 @@ const SponsorshipListPage = ({
   return (
     <div className="container">
       <h3>{T.translate("sponsorship_list.sponsorship_types_list")}</h3>
-      <Grid2
-        container
-        spacing={1}
-        sx={{
-          justifyContent: "space-between",
-          alignItems: "center",
-          mb: 2
+      <GridToolbar
+        searchProps={{
+          onSearch: handleSearch,
+          term,
+          placeholder: T.translate("sponsorship_list.placeholders.search")
         }}
       >
-        <Grid2 size={2}>
-          <Box component="span">
-            {totalSponsorships}{" "}
-            {T.translate("sponsorship_list.sponsorship_types")}
-          </Box>
-        </Grid2>
-        <Grid2
-          container
-          size={10}
-          spacing={1}
-          gap={1}
-          sx={{
-            justifyContent: "flex-end",
-            alignItems: "center"
-          }}
-        >
-          <Grid2 size={5}>
-            <SearchInput
-              onSearch={handleSearch}
-              term={term}
-              placeholder={T.translate("sponsorship_list.placeholders.search")}
-            />
-          </Grid2>
-          <Button
-            variant="contained"
-            onClick={handleNew}
-            startIcon={<AddIcon />}
-            sx={{
-              height: "36px",
-              padding: "6px 16px",
-              fontSize: "1.4rem",
-              lineHeight: "2.4rem",
-              letterSpacing: "0.4px"
-            }}
-          >
-            {T.translate("sponsorship_list.add_sponsorship")}
-          </Button>
-        </Grid2>
-      </Grid2>
+        <Button variant="contained" onClick={handleNew} startIcon={<AddIcon />}>
+          {T.translate("sponsorship_list.add_sponsorship")}
+        </Button>
+      </GridToolbar>
+      <Box sx={{ mb: 2 }}>
+        {totalSponsorships} {T.translate("sponsorship_list.sponsorship_types")}
+      </Box>
 
       {sponsorships.length > 0 && (
         <MuiTable
diff --git a/src/pages/summits/summit-directory-page.js b/src/pages/summits/summit-directory-page.js
index 1eea4c25b..1a4bf300c 100644
--- a/src/pages/summits/summit-directory-page.js
+++ b/src/pages/summits/summit-directory-page.js
@@ -16,15 +16,11 @@ import { connect } from "react-redux";
 import T from "i18n-react/dist/i18n-react";
 import { formatEpoch } from "openstack-uicore-foundation/lib/utils/methods";
 import MuiTable from "openstack-uicore-foundation/lib/components/mui/table";
-import MuiSearchInput from "openstack-uicore-foundation/lib/components/mui/search-input";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
-import Checkbox from "@mui/material/Checkbox";
 import Chip from "@mui/material/Chip";
-import FormControlLabel from "@mui/material/FormControlLabel";
-import FormGroup from "@mui/material/FormGroup";
-import Grid2 from "@mui/material/Grid2";
 import AddIcon from "@mui/icons-material/Add";
+import GridToolbar from "../../components/mui/grid-toolbar";
 import {
   clearCurrentSummit,
   deleteSummit,
@@ -117,7 +113,19 @@ const SummitDirectoryPage = ({
     },
     {
       columnKey: "name",
-      header: T.translate("directory.summit_name")
+      header: T.translate("directory.summit_name"),
+      render: (row) => (
+        <>
+          <div>{row.name}</div>
+          {!!row.invite_only_registration && (
+            <Chip
+              size="small"
+              sx={{ mt: "4px" }}
+              label={T.translate("directory.invitation_only")}
+            />
+          )}
+        </>
+      )
     },
     {
       columnKey: "sponsor_qty",
@@ -143,78 +151,42 @@ const SummitDirectoryPage = ({
       columnKey: "end_date",
       header: T.translate("directory.end_date"),
       render: (row) => formatEpoch(row.end_date, "MMMM Do YYYY")
-    },
-    {
-      columnKey: "invite_only_registration",
-      header: "",
-      width: 120,
-      render: (row) =>
-        row.invite_only_registration ? (
-          <Chip label={T.translate("directory.invitation_only")} />
-        ) : null
     }
   ];
 
   return (
     <Box className="container">
-      <h3>
-        {T.translate("directory.summits")} ({totalSummits})
-      </h3>
-      <Grid2 container spacing={2} sx={{ mb: 2, width: "100%" }}>
-        <Grid2 size={{ xs: 12, sm: 4 }}>
-          <MuiSearchInput
-            term={searchTerm}
-            onSearch={handleSearch}
-            placeholder={T.translate("directory.placeholders.search")}
-          />
-        </Grid2>
-        <Grid2
-          size={{ xs: 12, sm: 8 }}
-          sx={{
-            display: "flex",
-            justifyContent: "space-between",
-            flexWrap: "wrap",
-            rowGap: 1,
-            gap: 2
-          }}
-        >
-          <FormGroup>
-            <FormControlLabel
-              control={
-                <Checkbox
-                  onChange={handleHidePastEventsChange}
-                  checked={hidePastEvents}
-                  inputProps={{
-                    "aria-label": T.translate("directory.hide_past_events")
-                  }}
-                />
-              }
-              label={T.translate("directory.hide_past_events")}
-            />
-          </FormGroup>
-          {canAddSummits && (
-            <Button
-              variant="contained"
-              color="primary"
-              startIcon={<AddIcon />}
-              onClick={handleNewSummit}
-              sx={{
-                height: "36px",
-                padding: "6px 16px",
-                fontSize: "1.4rem",
-                lineHeight: "2.4rem",
-                letterSpacing: "0.4px"
-              }}
-            >
-              {T.translate("directory.add_summit")}
-            </Button>
-          )}
-        </Grid2>
-      </Grid2>
+      <h3>{T.translate("directory.summits")}</h3>
+      <GridToolbar
+        searchProps={{
+          term: searchTerm,
+          onSearch: handleSearch,
+          placeholder: T.translate("directory.placeholders.search")
+        }}
+        checkboxProps={{
+          checked: hidePastEvents,
+          onChange: handleHidePastEventsChange,
+          label: T.translate("directory.hide_past_events")
+        }}
+      >
+        {canAddSummits && (
+          <Button
+            variant="contained"
+            color="primary"
+            size="medium"
+            startIcon={<AddIcon />}
+            onClick={handleNewSummit}
+          >
+            {T.translate("directory.add_summit")}
+          </Button>
+        )}
+      </GridToolbar>
+      <Box sx={{ mb: 2 }}>
+        {totalSummits} {T.translate("directory.summits").toLowerCase()}
+      </Box>
       <MuiTable
         columns={columns}
         data={safeSummits}
-        tableSx={{ tableLayout: "auto", minWidth: 910 }}
         totalRows={totalSummits}
         perPage={perPage}
         currentPage={currentPage}
@@ -223,13 +195,9 @@ const SummitDirectoryPage = ({
         onEdit={canEditSummit ? handleEditSummit : undefined}
         onDelete={canDeleteSummits ? (id) => deleteSummit(id) : undefined}
         onSelect={handleSelectSummit}
-        getName={(row) => row.name}
-        deleteDialogTitle={T.translate("general.are_you_sure")}
         deleteDialogBody={(name) =>
           `${T.translate("directory.remove_warning")} ${name}`
         }
-        deleteDialogConfirmText={T.translate("general.yes_delete")}
-        confirmButtonColor="error"
       />
     </Box>
   );
diff --git a/src/pages/tags/tag-list-page.js b/src/pages/tags/tag-list-page.js
index ff18d737c..12da3f260 100644
--- a/src/pages/tags/tag-list-page.js
+++ b/src/pages/tags/tag-list-page.js
@@ -16,10 +16,9 @@ import { connect } from "react-redux";
 import T from "i18n-react/dist/i18n-react";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
-import Grid2 from "@mui/material/Grid2";
 import MuiTable from "openstack-uicore-foundation/lib/components/mui/table";
-import MuiSearchInput from "openstack-uicore-foundation/lib/components/mui/search-input";
 import AddIcon from "@mui/icons-material/Add";
+import GridToolbar from "../../components/mui/grid-toolbar";
 import TagsDialog from "./tags-popup";
 import {
   getTags,
@@ -121,54 +120,22 @@ const TagListPage = ({
     <Box className="container">
       <h3>{T.translate("tag_list.tag_list")}</h3>
 
-      <Grid2
-        container
-        sx={{
-          mb: 2,
-          width: "100%",
-          alignItems: "center",
-          justifyContent: "space-between",
-          flexWrap: "wrap"
+      <GridToolbar
+        searchProps={{
+          term: search,
+          onSearch: handleSearch,
+          placeholder: T.translate("tag_list.placeholders.search_tags")
         }}
       >
-        <Grid2 md={2} sx={{ display: "flex", alignItems: "center" }}>
-          <Box component="span">
-            {totalTags}{" "}
-            {totalTags === 1
-              ? T.translate("tag_list.item")
-              : T.translate("tag_list.items")}
-          </Box>
-        </Grid2>
-        <Grid2
-          container
-          md={10}
-          spacing={1}
-          gap={1}
-          sx={{ justifyContent: "flex-end", alignItems: "center" }}
+        <Button
+          variant="contained"
+          startIcon={<AddIcon />}
+          onClick={() => handleNewTag()}
         >
-          <Box sx={{ width: { xs: "100%", sm: 320 } }}>
-            <MuiSearchInput
-              term={search}
-              onSearch={handleSearch}
-              placeholder={T.translate("tag_list.placeholders.search_tags")}
-            />
-          </Box>
-          <Button
-            variant="contained"
-            startIcon={<AddIcon />}
-            onClick={() => handleNewTag()}
-            sx={{
-              height: "36px",
-              padding: "6px 16px",
-              fontSize: "1.4rem",
-              lineHeight: "2.4rem",
-              letterSpacing: "0.4px"
-            }}
-          >
-            {T.translate("tag_list.add_tag")}
-          </Button>
-        </Grid2>
-      </Grid2>
+          {T.translate("tag_list.add_tag")}
+        </Button>
+      </GridToolbar>
+      <Box sx={{ mb: 2 }}>{totalTags}</Box>
 
       <MuiTable
         columns={columns}
diff --git a/src/pages/taxes/tax-type-list-page.js b/src/pages/taxes/tax-type-list-page.js
index f1a17e251..2d94042ba 100644
--- a/src/pages/taxes/tax-type-list-page.js
+++ b/src/pages/taxes/tax-type-list-page.js
@@ -15,12 +15,11 @@ import React, { useEffect, useState } from "react";
 import { connect } from "react-redux";
 import { Breadcrumb } from "react-breadcrumbs";
 import T from "i18n-react/dist/i18n-react";
+import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
-import Grid2 from "@mui/material/Grid2";
-import Typography from "@mui/material/Typography";
 import AddIcon from "@mui/icons-material/Add";
-import SearchInput from "openstack-uicore-foundation/lib/components/mui/search-input";
 import MuiTable from "openstack-uicore-foundation/lib/components/mui/table";
+import GridToolbar from "../../components/mui/grid-toolbar";
 import Restrict from "../../routes/restrict";
 import {
   getTaxTypes,
@@ -141,51 +140,25 @@ const TaxTypeListPage = ({
       <div className="container">
         <h3>{T.translate("tax_type_list.tax_type_list")}</h3>
 
-        <Grid2
-          container
-          spacing={2}
-          sx={{
-            justifyContent: "center",
-            alignItems: "center",
-            mb: 2
+        <GridToolbar
+          searchProps={{
+            onSearch: handleSearch,
+            term,
+            placeholder: T.translate("tax_type_list.name"),
+            debounced: true
           }}
         >
-          <Grid2 size={6}>
-            <Typography>
-              {totalTaxTypes} {T.translate("general.items")}
-            </Typography>
-          </Grid2>
-          <Grid2
-            container
-            size={6}
-            spacing={1}
-            sx={{
-              justifyContent: "center",
-              alignItems: "center"
-            }}
+          <Button
+            variant="contained"
+            onClick={handleOpenNewTaxType}
+            startIcon={<AddIcon />}
           >
-            <Grid2 size={2} />
-            <Grid2 size={6}>
-              <SearchInput
-                onSearch={handleSearch}
-                term={term}
-                placeholder={T.translate("tax_type_list.name")}
-                debounced
-              />
-            </Grid2>
-            <Grid2 size={4}>
-              <Button
-                variant="contained"
-                fullWidth
-                onClick={handleOpenNewTaxType}
-                startIcon={<AddIcon />}
-                sx={{ height: "36px" }}
-              >
-                {T.translate("tax_type_list.add_tax_type")}
-              </Button>
-            </Grid2>
-          </Grid2>
-        </Grid2>
+            {T.translate("tax_type_list.add_tax_type")}
+          </Button>
+        </GridToolbar>
+        <Box sx={{ mb: 2 }}>
+          {totalTaxTypes} {T.translate("general.items")}
+        </Box>
 
         {taxTypes.length === 0 && (
           <div>{T.translate("tax_type_list.no_tax_types")}</div>
diff --git a/src/pages/tickets/payment-profile/payment-profile-list-page.js b/src/pages/tickets/payment-profile/payment-profile-list-page.js
index 71212739e..8259f7fce 100644
--- a/src/pages/tickets/payment-profile/payment-profile-list-page.js
+++ b/src/pages/tickets/payment-profile/payment-profile-list-page.js
@@ -14,10 +14,10 @@
 import React, { useEffect, useState } from "react";
 import { connect } from "react-redux";
 import T from "i18n-react/dist/i18n-react";
-import { Box, Button, Grid2 } from "@mui/material";
+import { Box, Button } from "@mui/material";
 import AddIcon from "@mui/icons-material/Add";
 import MuiTable from "openstack-uicore-foundation/lib/components/mui/table";
-import SearchInput from "openstack-uicore-foundation/lib/components/mui/search-input";
+import GridToolbar from "../../../components/mui/grid-toolbar";
 import {
   getPaymentProfiles,
   getPaymentProfile,
@@ -141,55 +141,27 @@ const PaymentProfileListPage = ({
   return (
     <div className="container">
       <h3>{T.translate("payment_profiles.payment_profiles_list")}</h3>
-      <Grid2
-        container
-        spacing={1}
-        sx={{
-          justifyContent: "space-between",
-          alignItems: "center",
-          mb: 2
+      <GridToolbar
+        searchProps={{
+          term,
+          onSearch: handleSearch,
+          placeholder: T.translate(
+            "payment_profiles.placeholders.search_profiles"
+          )
         }}
       >
-        <Grid2 size={2}>
-          <Box component="span">
-            {totalPaymentProfiles}{" "}
-            {T.translate("payment_profiles.payment_profiles")}
-          </Box>
-        </Grid2>
-        <Grid2
-          container
-          size={10}
-          gap={1}
-          sx={{
-            justifyContent: "flex-end",
-            alignItems: "center"
-          }}
+        <Button
+          variant="contained"
+          onClick={handleNewPaymentProfile}
+          startIcon={<AddIcon />}
         >
-          <Grid2 size={4}>
-            <SearchInput
-              term={term}
-              onSearch={handleSearch}
-              placeholder={T.translate(
-                "payment_profiles.placeholders.search_profiles"
-              )}
-            />
-          </Grid2>
-          <Button
-            variant="contained"
-            onClick={handleNewPaymentProfile}
-            startIcon={<AddIcon />}
-            sx={{
-              height: "36px",
-              padding: "6px 16px",
-              fontSize: "1.4rem",
-              lineHeight: "2.4rem",
-              letterSpacing: "0.4px"
-            }}
-          >
-            {T.translate("payment_profiles.add_payment_profile")}
-          </Button>
-        </Grid2>
-      </Grid2>
+          {T.translate("payment_profiles.add_payment_profile")}
+        </Button>
+      </GridToolbar>
+      <Box sx={{ mb: 2 }}>
+        {totalPaymentProfiles}{" "}
+        {T.translate("payment_profiles.payment_profiles")}
+      </Box>
 
       {paymentProfiles.length === 0 && (
         <div>{T.translate("payment_profiles.no_payment_profiles")}</div>
diff --git a/src/pages/track_chairs/track-chair-list-page.js b/src/pages/track_chairs/track-chair-list-page.js
index 80613e088..077cbbc59 100644
--- a/src/pages/track_chairs/track-chair-list-page.js
+++ b/src/pages/track_chairs/track-chair-list-page.js
@@ -18,7 +18,6 @@ import {
   Box,
   Button,
   FormControl,
-  Grid2,
   IconButton,
   InputAdornment,
   MenuItem,
@@ -27,7 +26,7 @@ import {
 import AddIcon from "@mui/icons-material/Add";
 import ClearIcon from "@mui/icons-material/Clear";
 import MuiTable from "openstack-uicore-foundation/lib/components/mui/table";
-import SearchInput from "openstack-uicore-foundation/lib/components/mui/search-input";
+import GridToolbar from "../../components/mui/grid-toolbar";
 import {
   getTrackChairs,
   deleteTrackChair,
@@ -38,14 +37,6 @@ import {
 import { DEFAULT_CURRENT_PAGE } from "../../utils/constants";
 import TrackChairDialog from "./components/track-chair-dialog";
 
-const buttonSx = {
-  height: "36px",
-  padding: "6px 16px",
-  fontSize: "1.4rem",
-  lineHeight: "2.4rem",
-  letterSpacing: "0.4px"
-};
-
 const TrackChairListPage = ({
   currentSummit,
   trackChairs,
@@ -175,105 +166,76 @@ const TrackChairListPage = ({
   return (
     <div className="container">
       <h3>{T.translate("track_chairs.list")}</h3>
-      <Grid2
-        container
-        spacing={1}
-        sx={{ justifyContent: "space-between", alignItems: "center", mb: 2 }}
+      <GridToolbar
+        searchProps={{
+          term,
+          placeholder: T.translate("track_chairs.placeholders.search"),
+          onSearch: handleSearch
+        }}
       >
-        <Grid2 size={2}>
-          <Box component="span">
-            {totalTrackChairs} {T.translate("track_chairs.track_chairs")}
-          </Box>
-        </Grid2>
-        <Grid2
-          container
-          size={10}
-          gap={1}
-          sx={{ justifyContent: "flex-end", alignItems: "center" }}
+        <FormControl
+          sx={{
+            minWidth: 200,
+            "& .MuiOutlinedInput-root": { height: "36px" }
+          }}
         >
-          <Grid2 size={3}>
-            <SearchInput
-              term={term}
-              placeholder={T.translate("track_chairs.placeholders.search")}
-              onSearch={handleSearch}
-            />
-          </Grid2>
-          <Grid2 size={3}>
-            <FormControl
-              fullWidth
-              sx={{ "& .MuiOutlinedInput-root": { height: "36px" } }}
-            >
-              <Select
-                size="small"
-                value={trackId ?? ""}
-                onChange={handleFilterByTrack}
-                displayEmpty
-                renderValue={(selected) =>
-                  selected ? (
-                    tracks_ddl.find((t) => t.value === selected)?.label
-                  ) : (
-                    <span style={{ color: "#aaa" }}>
-                      {T.translate("track_chairs.placeholders.select_track")}
-                    </span>
-                  )
-                }
-                endAdornment={
-                  trackId ? (
-                    <InputAdornment position="end" sx={{ mr: 2 }}>
-                      <IconButton
-                        size="small"
-                        onClick={() =>
-                          getTrackChairs(
-                            null,
-                            term,
-                            DEFAULT_CURRENT_PAGE,
-                            perPage,
-                            order,
-                            orderDir
-                          )
-                        }
-                      >
-                        <ClearIcon fontSize="small" />
-                      </IconButton>
-                    </InputAdornment>
-                  ) : null
-                }
-              >
-                {tracks_ddl.map((t) => (
-                  <MenuItem key={t.value} value={t.value}>
-                    {t.label}
-                  </MenuItem>
-                ))}
-              </Select>
-            </FormControl>
-          </Grid2>
-          <Grid2
-            size="auto"
-            gap={1}
-            sx={{
-              display: "flex",
-              justifyContent: "flex-end",
-              alignItems: "center"
-            }}
+          <Select
+            size="small"
+            value={trackId ?? ""}
+            onChange={handleFilterByTrack}
+            displayEmpty
+            renderValue={(selected) =>
+              selected ? (
+                tracks_ddl.find((t) => t.value === selected)?.label
+              ) : (
+                <span style={{ color: "#aaa" }}>
+                  {T.translate("track_chairs.placeholders.select_track")}
+                </span>
+              )
+            }
+            endAdornment={
+              trackId ? (
+                <InputAdornment position="end" sx={{ mr: 2 }}>
+                  <IconButton
+                    size="small"
+                    onClick={() =>
+                      getTrackChairs(
+                        null,
+                        term,
+                        DEFAULT_CURRENT_PAGE,
+                        perPage,
+                        order,
+                        orderDir
+                      )
+                    }
+                  >
+                    <ClearIcon fontSize="small" />
+                  </IconButton>
+                </InputAdornment>
+              ) : null
+            }
           >
-            <Button
-              variant="outlined"
-              onClick={() => exportTrackChairs()}
-              sx={buttonSx}
-            >
-              {T.translate("general.export")}
-            </Button>
-            <Button
-              variant="contained"
-              onClick={handleNewTrackChair}
-              startIcon={<AddIcon />}
-              sx={buttonSx}
-            >
-              {T.translate("track_chairs.add")}
-            </Button>
-          </Grid2>
-        </Grid2>
-      </Grid2>
+            {tracks_ddl.map((t) => (
+              <MenuItem key={t.value} value={t.value}>
+                {t.label}
+              </MenuItem>
+            ))}
+          </Select>
+        </FormControl>
+        <Button variant="outlined" onClick={() => exportTrackChairs()}>
+          {T.translate("general.export")}
+        </Button>
+        <Button
+          variant="contained"
+          onClick={handleNewTrackChair}
+          startIcon={<AddIcon />}
+        >
+          {T.translate("track_chairs.add")}
+        </Button>
+      </GridToolbar>
+      <Box sx={{ mb: 2 }}>
+        {totalTrackChairs} {T.translate("track_chairs.track_chairs")}
+      </Box>
 
       {trackChairs.length === 0 ? (
         <div>{T.translate("track_chairs.no_items")}</div>
diff --git a/src/reducers/sponsors/sponsor-forms-list-reducer.js b/src/reducers/sponsors/sponsor-forms-list-reducer.js
index ee3213724..c4c47d5a2 100644
--- a/src/reducers/sponsors/sponsor-forms-list-reducer.js
+++ b/src/reducers/sponsors/sponsor-forms-list-reducer.js
@@ -12,7 +12,6 @@
  * */
 
 import { LOGOUT_USER } from "openstack-uicore-foundation/lib/security/actions";
-import T from "i18n-react/dist/i18n-react";
 import {
   RECEIVE_GLOBAL_TEMPLATES,
   RECEIVE_SPONSOR_FORM,
@@ -110,11 +109,7 @@ const sponsorFormsListReducer = (state = DEFAULT_STATE, action) => {
           name: a.name,
           opens_at: a.opens_at || "",
           expires_at: a.expires_at || "",
-          items_qty: `${a.items.length} ${
-            a.items.length === 1
-              ? T.translate("sponsor_forms.item_label_singular")
-              : T.translate("sponsor_forms.item_label_plural")
-          }`,
+          items_qty: a.items.length,
           is_archived: a.is_archived,
           sponsorship_types
         };
@@ -209,9 +204,7 @@ const sponsorFormsListReducer = (state = DEFAULT_STATE, action) => {
         id: a.id,
         code: a.code,
         name: a.name,
-        items_qty: `${a.items.length} ${
-          a.items.length === 1 ? "Item" : "Items"
-        }`
+        items_qty: a.items.length
       }));
 
       const items =
diff --git a/src/reducers/sponsors_inventory/form-template-list-reducer.js b/src/reducers/sponsors_inventory/form-template-list-reducer.js
index ea2cf493e..72c3b8d28 100644
--- a/src/reducers/sponsors_inventory/form-template-list-reducer.js
+++ b/src/reducers/sponsors_inventory/form-template-list-reducer.js
@@ -75,9 +75,7 @@ const formTemplateListReducer = (state = DEFAULT_STATE, action = {}) => {
         id: a.id,
         code: a.code,
         name: a.name,
-        items_qty: `${a.items.length} ${
-          a.items.length === 1 ? "Item" : "Items"
-        }`,
+        items_qty: a.items.length,
         is_archived: a.is_archived
       }));
 
diff --git a/yarn.lock b/yarn.lock
index 3065f215e..b55a39bac 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9042,10 +9042,10 @@ open@^10.0.3:
     is-inside-container "^1.0.0"
     wsl-utils "^0.1.0"
 
-openstack-uicore-foundation@5.0.44:
-  version "5.0.44"
-  resolved "https://registry.yarnpkg.com/openstack-uicore-foundation/-/openstack-uicore-foundation-5.0.44.tgz#d40d42d083de98bfb8d5e5baba7ff9b14267902c"
-  integrity sha512-wThO8s5IIZbpjlzhZKJ3KMNBYhTjt/q2TZyazfiDKOR2YMV51A8oudy6/uMe5UkQPMfuApLg4abPXZcNCdaNBA==
+openstack-uicore-foundation@5.0.49-beta.2:
+  version "5.0.49-beta.2"
+  resolved "https://registry.yarnpkg.com/openstack-uicore-foundation/-/openstack-uicore-foundation-5.0.49-beta.2.tgz#e2090f5aba4a836bc943c6a360e1ad7af963ff0e"
+  integrity sha512-9pbIYZqZOTrsNjqQjcl0MRqpAGpQwHFX2gdI5wHJjlzLwkevtS4PmnhXsdCAd/wG1OuXmdjPShhgKDS5OsH9ag==
   dependencies:
     use-sync-external-store "^1.6.0"