From 746a4ef565a9221bacf3f288e494962931f02014 Mon Sep 17 00:00:00 2001
From: Santiago Palenque <santipalenque@gmail.com>
Date: Tue, 4 Aug 2026 19:29:03 -0300
Subject: [PATCH 01/13] chore: apply mui-table changes

---
 .../media_uploads/media-upload-list-page.js   |  1 -
 .../add-form-template-item-popup.js           |  2 --
 .../form-template-from-duplicate-popup.js     |  1 -
 .../form-template-item-list-page.js           |  1 -
 .../inventory/inventory-list-page.js          |  1 -
 ...nsor-form-add-item-from-inventory-popup.js |  2 --
 .../sponsor-form-item-list-page/index.js      |  1 -
 .../sponsors/sponsor-forms-list-page/index.js | 10 +------
 .../add-sponsor-form-template-popup/index.js  |  1 -
 .../sponsor-form-item-from-inventory.js       |  2 --
 .../sponsor-forms-manage-items.js             |  1 -
 .../tabs/sponsor-forms-tab/index.js           | 10 ++-----
 .../add-sponsor-page-template-popup/index.js  |  1 -
 src/pages/summits/summit-directory-page.js    | 28 +++++++++----------
 14 files changed, 16 insertions(+), 46 deletions(-)

diff --git a/src/pages/media_uploads/media-upload-list-page.js b/src/pages/media_uploads/media-upload-list-page.js
index c061ef4cf..83be2cb9b 100644
--- a/src/pages/media_uploads/media-upload-list-page.js
+++ b/src/pages/media_uploads/media-upload-list-page.js
@@ -156,7 +156,6 @@ const MediaUploadListPage = ({
         <MuiTable
           columns={columns}
           data={media_uploads}
-          tableSx={{ tableLayout: "auto" }}
           options={tableOptions}
           perPage={perPage}
           currentPage={currentPage}
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 69e339a6e..cd9170dc2 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
@@ -209,7 +209,6 @@ const FormTemplateItemListPage = ({
     {
       columnKey: "hasImage",
       header: "",
-      width: 40,
       align: "center",
       render: (row) => {
         const img = row.images?.[0];
diff --git a/src/pages/sponsors-global/inventory/inventory-list-page.js b/src/pages/sponsors-global/inventory/inventory-list-page.js
index 2919aabc1..df35adbca 100644
--- a/src/pages/sponsors-global/inventory/inventory-list-page.js
+++ b/src/pages/sponsors-global/inventory/inventory-list-page.js
@@ -173,7 +173,6 @@ const InventoryListPage = ({
     {
       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/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 87721eef9..b49c140bc 100644
--- a/src/pages/sponsors/sponsor-form-item-list-page/index.js
+++ b/src/pages/sponsors/sponsor-form-item-list-page/index.js
@@ -244,7 +244,6 @@ const SponsorFormItemListPage = ({
     {
       columnKey: "hasImage",
       header: "",
-      width: 40,
       align: "center",
       render: (row) => {
         const img = row.images?.[0];
diff --git a/src/pages/sponsors/sponsor-forms-list-page/index.js b/src/pages/sponsors/sponsor-forms-list-page/index.js
index dc1cabe4d..82d3248d1 100644
--- a/src/pages/sponsors/sponsor-forms-list-page/index.js
+++ b/src/pages/sponsors/sponsor-forms-list-page/index.js
@@ -219,12 +219,8 @@ const SponsorFormsListPage = ({
       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 +276,7 @@ const SponsorFormsListPage = ({
                 cursor: "pointer",
                 textDecoration: "underline dotted",
                 display: "block",
-                whiteSpace: "normal",
-                wordBreak: "break-word",
+                whiteSpace: "nowrap",
                 verticalAlign: "middle"
               }}
               title={label}
@@ -297,19 +292,16 @@ const SponsorFormsListPage = ({
       columnKey: "opens_at",
       header: T.translate("edit_sponsor.forms_tab.opens_at"),
       sortable: true,
-      width: 115,
       render: (row) => formatDate(row.opens_at)
     },
     {
       columnKey: "expires_at",
       header: T.translate("edit_sponsor.forms_tab.expires_at"),
       sortable: true,
-      width: 120,
       render: (row) => formatDate(row.expires_at)
     },
     {
       columnKey: "items_qty",
-      width: 90,
       header: T.translate("sponsor_forms.items_column_label"),
       sortable: false
     },
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 5fa0eb199..f8fbbe4d1 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..6d1683437 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
@@ -84,7 +84,6 @@ const SponsorFormItemFromInventoryPopup = ({
     {
       columnKey: "select",
       header: "",
-      width: 30,
       align: "center",
       render: (row) => (
         <FormControlLabel
@@ -142,7 +141,6 @@ const SponsorFormItemFromInventoryPopup = ({
     {
       columnKey: "images",
       header: "",
-      width: 40,
       align: "center",
       render: (row) => {
         const img = row.images?.[0];
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 cff1c1065..81421f064 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
@@ -269,7 +269,6 @@ const SponsorFormsManageItems = ({
     {
       columnKey: "images",
       header: "",
-      width: 40,
       align: "center",
       render: (row) =>
         row.images?.length > 0 ? (
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..2b7c1d19a 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
@@ -296,7 +296,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(", ")
@@ -305,20 +304,17 @@ const SponsorFormsTab = ({
     {
       columnKey: "opens_at",
       header: T.translate("edit_sponsor.forms_tab.opens_at"),
-      sortable: true,
-      width: 115
+      sortable: true
     },
     {
       columnKey: "expires_at",
       header: T.translate("edit_sponsor.forms_tab.expires_at"),
-      sortable: true,
-      width: 120
+      sortable: true
     },
     {
       columnKey: "items_qty",
       header: T.translate("edit_sponsor.forms_tab.items"),
       sortable: true,
-      width: 90,
       render: (row) =>
         `${row.items_count} ${
           row.items_count === 1
@@ -478,7 +474,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 +494,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/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 36e8343c3..4b9df9355 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/summits/summit-directory-page.js b/src/pages/summits/summit-directory-page.js
index 1eea4c25b..fd5e893ac 100644
--- a/src/pages/summits/summit-directory-page.js
+++ b/src/pages/summits/summit-directory-page.js
@@ -117,7 +117,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,15 +155,6 @@ 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
     }
   ];
 
@@ -214,7 +217,6 @@ const SummitDirectoryPage = ({
       <MuiTable
         columns={columns}
         data={safeSummits}
-        tableSx={{ tableLayout: "auto", minWidth: 910 }}
         totalRows={totalSummits}
         perPage={perPage}
         currentPage={currentPage}
@@ -223,13 +225,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>
   );

From 76a1fe159e42fa35505e1ba43047ad825d508553 Mon Sep 17 00:00:00 2001
From: Santiago Palenque <santipalenque@gmail.com>
Date: Thu, 6 Aug 2026 19:47:23 -0300
Subject: [PATCH 02/13] chore: adjusting tables one by one - WIP

---
 src/actions/sponsor-forms-actions.js          |  4 ++-
 .../sponsors/show-purchase-list-page/index.js |  5 ++--
 .../sponsors/sponsor-forms-list-page/index.js | 25 +++++++++++--------
 .../tabs/sponsor-forms-tab/index.js           |  6 +++--
 4 files changed, 23 insertions(+), 17 deletions(-)

diff --git a/src/actions/sponsor-forms-actions.js b/src/actions/sponsor-forms-actions.js
index f524f2c6a..b80305792 100644
--- a/src/actions/sponsor-forms-actions.js
+++ b/src/actions/sponsor-forms-actions.js
@@ -148,7 +148,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/pages/sponsors/show-purchase-list-page/index.js b/src/pages/sponsors/show-purchase-list-page/index.js
index c20075a68..cecde6fd5 100644
--- a/src/pages/sponsors/show-purchase-list-page/index.js
+++ b/src/pages/sponsors/show-purchase-list-page/index.js
@@ -116,7 +116,7 @@ const ShowPurchaseListPage = ({
     {
       columnKey: "purchased",
       header: T.translate("sponsor_show_purchases.purchased"),
-      width: 200,
+      width: 180,
       sortable: true
     },
     {
@@ -171,7 +171,7 @@ const ShowPurchaseListPage = ({
     {
       columnKey: "details",
       header: "",
-      width: 100,
+      width: 80,
       align: "center",
       render: (row) => (
         <Button
@@ -187,7 +187,6 @@ const ShowPurchaseListPage = ({
     {
       columnKey: "menu",
       header: "",
-      width: 100,
       align: "center",
       render: (row) =>
         downloadingOrderId === row.id ? (
diff --git a/src/pages/sponsors/sponsor-forms-list-page/index.js b/src/pages/sponsors/sponsor-forms-list-page/index.js
index 82d3248d1..9a15d946a 100644
--- a/src/pages/sponsors/sponsor-forms-list-page/index.js
+++ b/src/pages/sponsors/sponsor-forms-list-page/index.js
@@ -208,12 +208,14 @@ 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",
@@ -292,23 +294,26 @@ const SponsorFormsListPage = ({
       columnKey: "opens_at",
       header: T.translate("edit_sponsor.forms_tab.opens_at"),
       sortable: true,
+      headSx: { whiteSpace: "nowrap" },
       render: (row) => formatDate(row.opens_at)
     },
     {
       columnKey: "expires_at",
       header: T.translate("edit_sponsor.forms_tab.expires_at"),
       sortable: true,
+      headSx: { whiteSpace: "nowrap" },
       render: (row) => formatDate(row.expires_at)
     },
     {
       columnKey: "items_qty",
       header: T.translate("sponsor_forms.items_column_label"),
-      sortable: false
+      sortable: false,
+      cellSx: { whiteSpace: "nowrap" }
     },
     {
       columnKey: "manage_items",
       header: "",
-      width: 140,
+      width: 132,
       align: "left",
       render: (row) => (
         <Button
@@ -348,10 +353,10 @@ const SponsorFormsListPage = ({
           mb: 2
         }}
       >
-        <Grid2 size={1}>
+        <Grid2 size={{ xs: 12, sm: 6, md: 2 }}>
           <Box component="span">{totalCount} forms</Box>
         </Grid2>
-        <Grid2 size={2} offset={1}>
+        <Grid2 size={{ xs: 12, sm: 6, md: 3 }}>
           <FormGroup>
             <FormControlLabel
               control={
@@ -370,33 +375,31 @@ const SponsorFormsListPage = ({
             />
           </FormGroup>
         </Grid2>
-        <Grid2 size={2}>
+        <Grid2 size={{ xs: 12, sm: 12, md: 3 }}>
           <SearchInput
             term={term}
             onSearch={handleSearch}
             placeholder={T.translate("sponsor_forms.placeholders.search")}
           />
         </Grid2>
-        <Grid2 size={3}>
+        <Grid2 size={{ xs: 6, sm: 6, md: 2 }}>
           <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}>
+        <Grid2 size={{ xs: 6, sm: 6, md: 2 }}>
           <Button
             variant="contained"
             size="medium"
             fullWidth
             onClick={() => setOpenPopup("new")}
             startIcon={<AddIcon />}
-            sx={{ height: "36px" }}
           >
             {T.translate("sponsor_forms.add_form")}
           </Button>
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 2b7c1d19a..8fa808a86 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
@@ -304,12 +304,14 @@ const SponsorFormsTab = ({
     {
       columnKey: "opens_at",
       header: T.translate("edit_sponsor.forms_tab.opens_at"),
-      sortable: true
+      sortable: true,
+      width: 115
     },
     {
       columnKey: "expires_at",
       header: T.translate("edit_sponsor.forms_tab.expires_at"),
-      sortable: true
+      sortable: true,
+      width: 120
     },
     {
       columnKey: "items_qty",

From a712d4f5065025bd70de6b73e4979a25438e1bb4 Mon Sep 17 00:00:00 2001
From: Santiago Palenque <santipalenque@gmail.com>
Date: Fri, 7 Aug 2026 18:08:41 -0300
Subject: [PATCH 03/13] chore: update uicore

---
 package.json | 1 -
 yarn.lock    | 8 ++++----
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index f91e7ebd3..3f280711a 100644
--- a/package.json
+++ b/package.json
@@ -93,7 +93,6 @@
     "moment-duration-format": "^2.3.2",
     "moment-timezone": "^0.5.33",
     "mui-color-input": "^9.0.0",
-    "openstack-uicore-foundation": "5.0.55",
     "p-limit": "^6.1.0",
     "path-browserify": "^1.0.1",
     "postcss-loader": "^6.2.1",
diff --git a/yarn.lock b/yarn.lock
index 1b187bb5b..1f4d4cb8f 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.55:
-  version "5.0.55"
-  resolved "https://registry.yarnpkg.com/openstack-uicore-foundation/-/openstack-uicore-foundation-5.0.55.tgz#fcf83cc42464a9daafb42f0585eb53d8aa301e67"
-  integrity sha512-fNvqiREmdUw1Y6lnYmvHx+RW3b+sFJbyLX/c+myg5lXyzWAfxcu9r8DBQmMVEF0nwqppFD308J1BBQhOfF7A0w==
+openstack-uicore-foundation@5.0.49-beta.0:
+  version "5.0.49-beta.0"
+  resolved "https://registry.yarnpkg.com/openstack-uicore-foundation/-/openstack-uicore-foundation-5.0.49-beta.0.tgz#89e985a21196551b19ad04cfce615c32c8058c92"
+  integrity sha512-ktXOuBAXld4QfxjnruqQFtVx7rOK57vuls0cMm3YItPkyox0pCxr6WwL6n6xo/FQKcevH0zKWUrZZJb/x0PS4A==
   dependencies:
     use-sync-external-store "^1.6.0"
 

From 47991fad8aa598a21640e7aabdf41e0fc01db36a Mon Sep 17 00:00:00 2001
From: Santiago Palenque <santipalenque@gmail.com>
Date: Fri, 7 Aug 2026 18:28:02 -0300
Subject: [PATCH 04/13] chore: fix tests

---
 .../__tests__/show-pages-list-page.test.js                    | 4 ++--
 .../sponsor-pages-tab/__tests__/sponsor-pages-tab.test.js     | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

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/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);
     });

From 6d892f26a7218f1bd364817d589de0f05df69b31 Mon Sep 17 00:00:00 2001
From: Santiago Palenque <santipalenque@gmail.com>
Date: Wed, 19 Aug 2026 11:28:21 -0300
Subject: [PATCH 05/13] chore: adjust sponsors and sponsors purchases

---
 .../sponsors/show-purchase-list-page/index.js | 37 +++++-----
 src/pages/sponsors/sponsor-list-page.js       | 73 ++++++++-----------
 2 files changed, 49 insertions(+), 61 deletions(-)

diff --git a/src/pages/sponsors/show-purchase-list-page/index.js b/src/pages/sponsors/show-purchase-list-page/index.js
index cecde6fd5..a8efef105 100644
--- a/src/pages/sponsors/show-purchase-list-page/index.js
+++ b/src/pages/sponsors/show-purchase-list-page/index.js
@@ -16,7 +16,6 @@ import { connect } from "react-redux";
 import T from "i18n-react/dist/i18n-react";
 import { Breadcrumb } from "react-breadcrumbs";
 import {
-  Box,
   Button,
   CircularProgress,
   Grid2,
@@ -116,13 +115,14 @@ const ShowPurchaseListPage = ({
     {
       columnKey: "purchased",
       header: T.translate("sponsor_show_purchases.purchased"),
-      width: 180,
-      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: 80,
       align: "center",
+      width: 86,
+      cellSx: { p: 0 },
       render: (row) => (
         <Button
           variant="text"
@@ -188,6 +189,8 @@ const ShowPurchaseListPage = ({
       columnKey: "menu",
       header: "",
       align: "center",
+      width: 46,
+      cellSx: { p: 0 },
       render: (row) =>
         downloadingOrderId === row.id ? (
           <CircularProgress size={24} />
@@ -215,31 +218,29 @@ const ShowPurchaseListPage = ({
           }}
         />
       </div>
-      <h3>{T.translate("sponsor_show_purchases.purchases")}</h3>
+      <h3>
+        {T.translate("sponsor_show_purchases.purchases")} ({totalCount})
+      </h3>
       <Grid2
         container
         spacing={2}
         sx={{
-          justifyContent: "center",
-          alignItems: "center",
-          mb: 2
+          mb: 2,
+          display: "flex",
+          justifyContent: "space-between",
+          rowGap: 1,
+          gap: 2
         }}
       >
-        <Grid2 size={2}>
-          <Box component="span">
-            {totalCount}{" "}
-            {T.translate("sponsor_show_purchases.purchases").toLowerCase()}
-          </Box>
-        </Grid2>
-        <Grid2 size={2} offset={6}>
+        <Grid2 size={{ xs: 12, sm: 6 }}>
           <SearchInput
             term={term}
             onSearch={handleSearch}
             placeholder={T.translate("general.placeholders.search")}
           />
         </Grid2>
-        <Grid2 size={2}>
-          <Button variant="contained" onClick={handleExport}>
+        <Grid2 size={{ xs: 12, sm: 3 }}>
+          <Button fullWidth variant="contained" onClick={handleExport}>
             {T.translate("general.export")}
           </Button>
         </Grid2>
diff --git a/src/pages/sponsors/sponsor-list-page.js b/src/pages/sponsors/sponsor-list-page.js
index 9bc7d95f8..a56aa11d2 100644
--- a/src/pages/sponsors/sponsor-list-page.js
+++ b/src/pages/sponsors/sponsor-list-page.js
@@ -14,7 +14,7 @@
 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, Grid2, 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";
@@ -25,9 +25,9 @@ import {
   upsertLeadReportSettings
 } from "../../actions/summit-actions";
 import {
-  getSponsors,
   addSponsorToSummit,
   deleteSponsor,
+  getSponsors,
   updateSponsorOrder
 } from "../../actions/sponsor-actions";
 import Member from "../../models/member";
@@ -197,53 +197,40 @@ const SponsorListPage = ({
 
   return (
     <div className="container">
-      <h3> {T.translate("sponsor_list.sponsor_list")}</h3>
-
+      <h3>
+        {" "}
+        {T.translate("sponsor_list.sponsor_list")} ({totalSponsors})
+      </h3>
       <Grid2
         container
-        spacing={2}
         sx={{
-          justifyContent: "center",
-          alignItems: "center",
-          mb: 2
+          mb: 2,
+          display: "flex",
+          justifyContent: "space-between",
+          rowGap: 1
         }}
       >
-        <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 size={{ xs: 12, sm: 6 }}>
+          <SearchInput
+            onSearch={handleOnSearch}
+            term={term}
+            placeholder={T.translate(
+              "inventory_item_list.placeholders.search_inventory_items"
             )}
-          </Grid2>
+            debounced
+          />
+        </Grid2>
+        <Grid2 size={{ xs: 12, sm: 3 }}>
+          {canAddSponsors && (
+            <Button
+              variant="contained"
+              fullWidth
+              onClick={() => handleOpenAddSponsorPopup()}
+              startIcon={<AddIcon />}
+            >
+              {T.translate("sponsor_list.add_sponsor")}
+            </Button>
+          )}
         </Grid2>
       </Grid2>
 

From ef0f7115ed3cd090dba562f1da4ea5ea1a80d508 Mon Sep 17 00:00:00 2001
From: Santiago Palenque <santipalenque@gmail.com>
Date: Wed, 19 Aug 2026 11:47:10 -0300
Subject: [PATCH 06/13] chore: sponsor forms grid

---
 src/i18n/en.json                              |  2 -
 .../sponsors/sponsor-forms-list-page/index.js | 39 +++++++------------
 .../sponsors/sponsor-forms-list-reducer.js    | 11 +-----
 .../form-template-list-reducer.js             |  4 +-
 4 files changed, 18 insertions(+), 38 deletions(-)

diff --git a/src/i18n/en.json b/src/i18n/en.json
index ee09ba95a..d1ba65e1b 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -2809,8 +2809,6 @@
     "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.",
diff --git a/src/pages/sponsors/sponsor-forms-list-page/index.js b/src/pages/sponsors/sponsor-forms-list-page/index.js
index 9a15d946a..aa9cb0017 100644
--- a/src/pages/sponsors/sponsor-forms-list-page/index.js
+++ b/src/pages/sponsors/sponsor-forms-list-page/index.js
@@ -16,7 +16,6 @@ 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,
@@ -308,7 +307,7 @@ const SponsorFormsListPage = ({
       columnKey: "items_qty",
       header: T.translate("sponsor_forms.items_column_label"),
       sortable: false,
-      cellSx: { whiteSpace: "nowrap" }
+      cellSx: { textAlign: "center" }
     },
     {
       columnKey: "manage_items",
@@ -342,21 +341,19 @@ const SponsorFormsListPage = ({
 
   return (
     <div className="container">
-      <h1>{T.translate("sponsor_forms.forms")}</h1>
+      <h1>
+        {T.translate("sponsor_forms.forms")} {totalCount}
+      </h1>
       <CustomAlert message={T.translate("sponsor_forms.alert_info")} hideIcon />
-      <Grid2
-        container
-        spacing={2}
-        sx={{
-          justifyContent: "center",
-          alignItems: "center",
-          mb: 2
-        }}
-      >
-        <Grid2 size={{ xs: 12, sm: 6, md: 2 }}>
-          <Box component="span">{totalCount} forms</Box>
+      <Grid2 container spacing={2} sx={{ mb: 2, width: "100%" }}>
+        <Grid2 size={{ xs: 12, sm: 6, lg: 4 }}>
+          <SearchInput
+            term={term}
+            onSearch={handleSearch}
+            placeholder={T.translate("sponsor_forms.placeholders.search")}
+          />
         </Grid2>
-        <Grid2 size={{ xs: 12, sm: 6, md: 3 }}>
+        <Grid2 size={{ xs: 12, sm: 6, lg: 2 }}>
           <FormGroup>
             <FormControlLabel
               control={
@@ -375,14 +372,8 @@ const SponsorFormsListPage = ({
             />
           </FormGroup>
         </Grid2>
-        <Grid2 size={{ xs: 12, sm: 12, md: 3 }}>
-          <SearchInput
-            term={term}
-            onSearch={handleSearch}
-            placeholder={T.translate("sponsor_forms.placeholders.search")}
-          />
-        </Grid2>
-        <Grid2 size={{ xs: 6, sm: 6, md: 2 }}>
+
+        <Grid2 size={{ xs: 6, sm: 6, lg: 3 }}>
           <Button
             variant="contained"
             size="medium"
@@ -393,7 +384,7 @@ const SponsorFormsListPage = ({
             {T.translate("sponsor_forms.using_global")}
           </Button>
         </Grid2>
-        <Grid2 size={{ xs: 6, sm: 6, md: 2 }}>
+        <Grid2 size={{ xs: 6, sm: 6, lg: 3 }}>
           <Button
             variant="contained"
             size="medium"
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
       }));
 

From a61992c91fccffd398b877b018f0f072ca19159e Mon Sep 17 00:00:00 2001
From: Santiago Palenque <santipalenque@gmail.com>
Date: Wed, 19 Aug 2026 15:19:25 -0300
Subject: [PATCH 07/13] chore: define style pattern and apply to all grid
 headers

---
 src/i18n/en.json                              |  6 +-
 src/pages/emails/email-template-list-page.js  | 33 ++++----
 .../media_uploads/media-upload-list-page.js   | 36 +++------
 .../selection-plan-list-page.js               | 49 +++++-------
 .../add-on-types/add-on-types-list-page.js    | 50 ++++--------
 .../form-template-item-list-page.js           | 76 +++++++------------
 .../form-templates/form-template-list-page.js | 51 +++++--------
 .../inventory/inventory-list-page.js          | 47 ++++--------
 .../sponsors/show-pages-list-page/index.js    | 30 ++------
 .../sponsors/show-purchase-list-page/index.js | 23 ++----
 .../sponsor-form-item-list-page/index.js      | 29 +++----
 .../sponsors/sponsor-forms-list-page/index.js |  8 +-
 src/pages/sponsors/sponsor-list-page.js       | 18 +----
 .../tabs/sponsor-badge-scans/index.js         | 42 ++++------
 .../sponsor-cart-tab/components/cart-view.js  | 22 +-----
 .../sponsor-forms-manage-items.js             | 26 ++-----
 .../tabs/sponsor-forms-tab/index.js           | 30 ++------
 .../tabs/sponsor-pages-tab/index.js           | 32 +++-----
 .../tabs/sponsor-purchases-tab/index.js       | 20 ++---
 .../sponsors/sponsor-users-list-page/index.js | 44 ++++-------
 .../sponsors/summit-sponsorship-list-page.js  | 44 +++--------
 src/pages/summits/summit-directory-page.js    | 33 +++-----
 src/pages/tags/tag-list-page.js               | 42 +++-------
 23 files changed, 247 insertions(+), 544 deletions(-)

diff --git a/src/i18n/en.json b/src/i18n/en.json
index d1ba65e1b..f9b404e54 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -887,8 +887,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",
@@ -2960,8 +2958,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",
diff --git a/src/pages/emails/email-template-list-page.js b/src/pages/emails/email-template-list-page.js
index 7bf9691b7..14b9c9f76 100644
--- a/src/pages/emails/email-template-list-page.js
+++ b/src/pages/emails/email-template-list-page.js
@@ -12,6 +12,7 @@
  * */
 
 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";
@@ -115,32 +116,21 @@ const EmailTemplateListPage = ({
   return (
     <div className="container">
       <h3>{T.translate("emails.template_list")}</h3>
-      <Grid2
-        container
-        spacing={2}
-        sx={{
-          justifyContent: "center",
-          alignItems: "center",
-          mb: 2
-        }}
-      >
-        <Grid2 size={2}>
-          {totalTemplates} {T.translate("emails.templates")}
+      <Grid2 container spacing={2} sx={{ mb: 2 }}>
+        <Grid2 size={{ xs: 12, sm: 6 }}>
+          <SearchInput
+            term={term}
+            onSearch={handleSearch}
+            placeholder={T.translate("emails.placeholders.search_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>
+        <Grid2 size={{ xs: 12, sm: 6, md: 3 }} offset={{ md: 3 }}>
           <Button
             variant="contained"
+            fullWidth
             onClick={handleNewEmailTemplate}
             startIcon={<AddIcon />}
             sx={{
-              height: "36px",
               padding: "6px 16px",
               fontSize: "1.4rem",
               lineHeight: "2.4rem",
@@ -151,6 +141,9 @@ const EmailTemplateListPage = ({
           </Button>
         </Grid2>
       </Grid2>
+      <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/media_uploads/media-upload-list-page.js b/src/pages/media_uploads/media-upload-list-page.js
index 83be2cb9b..c4a47833d 100644
--- a/src/pages/media_uploads/media-upload-list-page.js
+++ b/src/pages/media_uploads/media-upload-list-page.js
@@ -105,42 +105,23 @@ 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 container spacing={2} sx={{ mb: 2 }}>
+        <Grid2 size={{ xs: 12, md: 6 }}>
+          <SearchInput term={term} onSearch={handleSearch} />
         </Grid2>
-        <Grid2
-          container
-          size={10}
-          gap={1}
-          sx={{
-            justifyContent: "flex-end",
-            alignItems: "center"
-          }}
-        >
-          <Grid2 size={4}>
-            <SearchInput term={term} onSearch={handleSearch} />
-          </Grid2>
+        <Grid2 size={{ xs: 6, md: 3 }}>
           <SummitDropdown
             onClick={handleCopyMediaUploads}
             actionLabel={T.translate("media_upload.copy_media_uploads")}
           />
+        </Grid2>
+        <Grid2 size={{ xs: 6, md: 3 }}>
           <Button
             variant="contained"
+            fullWidth
             onClick={handleNew}
             startIcon={<AddIcon />}
             sx={{
-              height: "36px",
               padding: "6px 16px",
               fontSize: "1.4rem",
               lineHeight: "2.4rem",
@@ -151,6 +132,9 @@ const MediaUploadListPage = ({
           </Button>
         </Grid2>
       </Grid2>
+      <Box sx={{ mb: 2 }}>
+        {totalMediaUploads} {T.translate("media_upload.media_uploads")}
+      </Box>
 
       {media_uploads.length > 0 && (
         <MuiTable
diff --git a/src/pages/selection-plans/selection-plan-list-page.js b/src/pages/selection-plans/selection-plan-list-page.js
index a4c6266bc..8486b4367 100644
--- a/src/pages/selection-plans/selection-plan-list-page.js
+++ b/src/pages/selection-plans/selection-plan-list-page.js
@@ -15,6 +15,7 @@ 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";
@@ -171,40 +172,26 @@ 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 }}
-      >
-        <Grid2 size={{ xs: 12, md: 2 }}>
-          <span>{totalSelectionPlans} items</span>
+      <Grid2 container spacing={2} sx={{ mb: 2 }}>
+        <Grid2 size={{ xs: 12, sm: 6 }}>
+          <SearchInput
+            onSearch={handleSearch}
+            term={term}
+            placeholder={T.translate("selection_plan_list.placeholders.search")}
+          />
         </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 size={{ xs: 12, sm: 6, md: 3 }} offset={{ md: 3 }}>
+          <Button
+            variant="contained"
+            fullWidth
+            onClick={handleNew}
+            startIcon={<AddIcon />}
+          >
+            {T.translate("selection_plan_list.add_selection_plan")}
+          </Button>
         </Grid2>
       </Grid2>
+      <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/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..cb5e3c311 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,8 +12,7 @@
  * */
 
 import React, { useEffect, useState } from "react";
-import { Button, Grid2 } from "@mui/material";
-import Box from "@mui/material/Box";
+import { Box, Button, Grid2 } 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";
@@ -126,45 +125,23 @@ const AddOnTypesListPage = ({
         }}
       />
       <h3> {T.translate("add_on_types_list.add_on_types")}</h3>
-      <Grid2
-        container
-        spacing={2}
-        sx={{
-          justifyContent: "center",
-          alignItems: "center",
-          mb: 2
-        }}
-      >
-        <Grid2 size={2}>
-          <Box component="span">
-            {totalAddOnTypes} {T.translate("add_on_types_list.add_on_types")}
-          </Box>
+      <Grid2 container spacing={2} sx={{ mb: 2 }}>
+        <Grid2 size={{ xs: 12, sm: 6 }}>
+          <SearchInput
+            term={term}
+            onSearch={handleSearch}
+            placeholder={T.translate(
+              "add_on_types_list.placeholders.search_add_on_types"
+            )}
+          />
         </Grid2>
-        <Grid2
-          container
-          size={10}
-          spacing={1}
-          gap={1}
-          sx={{
-            justifyContent: "flex-end",
-            alignItems: "center"
-          }}
-        >
-          <Grid2 size={3}>
-            <SearchInput
-              term={term}
-              onSearch={handleSearch}
-              placeholder={T.translate(
-                "add_on_types_list.placeholders.search_add_on_types"
-              )}
-            />
-          </Grid2>
+        <Grid2 size={{ xs: 12, sm: 6, md: 3 }} offset={{ md: 3 }}>
           <Button
             variant="contained"
+            fullWidth
             onClick={() => handleNewAddOnType()}
             startIcon={<AddIcon />}
             sx={{
-              height: "36px",
               padding: "6px 16px",
               fontSize: "1.4rem",
               lineHeight: "2.4rem",
@@ -175,6 +152,9 @@ const AddOnTypesListPage = ({
           </Button>
         </Grid2>
       </Grid2>
+      <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/form-template-item-list-page.js b/src/pages/sponsors-global/form-templates/form-template-item-list-page.js
index cd9170dc2..895c48794 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
@@ -243,57 +243,37 @@ const FormTemplateItemListPage = ({
       >
         {T.translate("form_template_item_list.alert_info")}
       </Alert>
-      <Grid2
-        container
-        spacing={2}
-        sx={{
-          justifyContent: "center",
-          alignItems: "center",
-          mb: 2
-        }}
-      >
-        <Grid2 size={6}>
-          <Box component="span">{totalFormTemplateItems} items</Box>
+      <Grid2 container spacing={2} sx={{ mb: 2 }}>
+        <Grid2 size={{ xs: 12, sm: 6 }}>
+          <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
-          container
-          size={6}
-          spacing={1}
-          sx={{
-            justifyContent: "center",
-            alignItems: "center"
-          }}
-        >
-          <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 size={{ xs: 12, sm: 6, md: 3 }} offset={{ md: 3 }}>
+          <Button
+            variant="contained"
+            fullWidth
+            onClick={() => handleNewInventoryItem()}
+            startIcon={<AddIcon />}
+          >
+            {T.translate("form_template_item_list.add_item")}
+          </Button>
         </Grid2>
       </Grid2>
+      <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..24233d180 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
@@ -14,13 +14,13 @@
 import React, { useEffect, useState } from "react";
 import {
   Alert,
+  Box,
   Button,
   Checkbox,
   FormControlLabel,
   FormGroup,
   Grid2
 } from "@mui/material";
-import Box from "@mui/material/Box";
 import AddIcon from "@mui/icons-material/Add";
 import SearchInput from "openstack-uicore-foundation/lib/components/mui/search-input";
 import { connect } from "react-redux";
@@ -231,11 +231,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,19 +243,8 @@ const FormTemplateListPage = ({
         {T.translate("form_template_list.alert_info")}
       </Alert>
 
-      <Grid2
-        container
-        spacing={1}
-        sx={{
-          justifyContent: "center",
-          alignItems: "center",
-          mb: 2
-        }}
-      >
-        <Grid2 size={1}>
-          <Box component="span">{totalFormTemplates} forms</Box>
-        </Grid2>
-        <Grid2 size={11} justifyContent="flex-end" gap={1} container>
+      <Grid2 container spacing={2} sx={{ mb: 2 }}>
+        <Grid2 size={{ xs: 12, sm: 6, lg: 2 }}>
           <FormGroup>
             <FormControlLabel
               control={
@@ -276,22 +261,22 @@ const FormTemplateListPage = ({
               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>
+        </Grid2>
+        <Grid2 size={{ xs: 12, sm: 6, lg: 4 }}>
+          <SearchInput
+            onSearch={handleSearch}
+            placeholder={T.translate(
+              "inventory_item_list.placeholders.search_inventory_items"
+            )}
+          />
+        </Grid2>
+        <Grid2 size={{ xs: 6, sm: 6, lg: 3 }}>
           <Button
             variant="contained"
-            size="medium"
+            fullWidth
             onClick={() => handleNewFromDuplicate()}
             startIcon={<AddIcon />}
             sx={{
-              height: "36px",
               padding: "6px 16px",
               fontSize: "1.4rem",
               lineHeight: "2.4rem",
@@ -300,13 +285,14 @@ const FormTemplateListPage = ({
           >
             {T.translate("form_template_list.using_duplicate")}
           </Button>
+        </Grid2>
+        <Grid2 size={{ xs: 6, sm: 6, lg: 3 }}>
           <Button
             variant="contained"
-            size="medium"
+            fullWidth
             onClick={() => handleNewFormTemplate()}
             startIcon={<AddIcon />}
             sx={{
-              height: "36px",
               padding: "6px 16px",
               fontSize: "1.4rem",
               lineHeight: "2.4rem",
@@ -317,6 +303,7 @@ const FormTemplateListPage = ({
           </Button>
         </Grid2>
       </Grid2>
+      <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 df35adbca..cb843f376 100644
--- a/src/pages/sponsors-global/inventory/inventory-list-page.js
+++ b/src/pages/sponsors-global/inventory/inventory-list-page.js
@@ -14,13 +14,13 @@
 import React, { useEffect, useState } from "react";
 import {
   Alert,
+  Box,
   Button,
   Checkbox,
   FormControlLabel,
   FormGroup,
   Grid2
 } from "@mui/material";
-import Box from "@mui/material/Box";
 import AddIcon from "@mui/icons-material/Add";
 import SearchInput from "openstack-uicore-foundation/lib/components/mui/search-input";
 import { connect } from "react-redux";
@@ -209,28 +209,8 @@ const InventoryListPage = ({
       >
         {T.translate("inventory_item_list.alert_info")}
       </Alert>
-      <Grid2
-        container
-        spacing={2}
-        sx={{
-          justifyContent: "center",
-          alignItems: "center",
-          mb: 2
-        }}
-      >
-        <Grid2 size={2}>
-          <Box component="span">{totalInventoryItems} items</Box>
-        </Grid2>
-        <Grid2
-          container
-          size={10}
-          spacing={1}
-          gap={1}
-          sx={{
-            justifyContent: "flex-end",
-            alignItems: "center"
-          }}
-        >
+      <Grid2 container spacing={2} sx={{ mb: 2 }}>
+        <Grid2 size={{ xs: 12, sm: 6, md: 3 }}>
           <FormGroup>
             <FormControlLabel
               control={
@@ -247,20 +227,22 @@ const InventoryListPage = ({
               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>
+        </Grid2>
+        <Grid2 size={{ xs: 12, sm: 6, md: 6 }}>
+          <SearchInput
+            onSearch={handleSearch}
+            placeholder={T.translate(
+              "inventory_item_list.placeholders.search_inventory_items"
+            )}
+          />
+        </Grid2>
+        <Grid2 size={{ xs: 12, md: 3 }}>
           <Button
             variant="contained"
+            fullWidth
             onClick={() => handleNewInventoryItem()}
             startIcon={<AddIcon />}
             sx={{
-              height: "36px",
               padding: "6px 16px",
               fontSize: "1.4rem",
               lineHeight: "2.4rem",
@@ -271,6 +253,7 @@ const InventoryListPage = ({
           </Button>
         </Grid2>
       </Grid2>
+      <Box sx={{ mb: 2 }}>{totalInventoryItems} items</Box>
 
       {inventoryItems.length > 0 && (
         <div>
diff --git a/src/pages/sponsors/show-pages-list-page/index.js b/src/pages/sponsors/show-pages-list-page/index.js
index b93ad1914..a91101131 100644
--- a/src/pages/sponsors/show-pages-list-page/index.js
+++ b/src/pages/sponsors/show-pages-list-page/index.js
@@ -203,21 +203,8 @@ 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
-        }}
-      >
-        <Grid2 size={1}>
-          <Box component="span">
-            {totalCount} {T.translate("show_pages.pages")}
-          </Box>
-        </Grid2>
-        <Grid2 size={2} offset={1}>
+      <Grid2 container spacing={2} sx={{ mb: 2 }}>
+        <Grid2 size={{ xs: 12, sm: 6, lg: 2 }}>
           <FormGroup>
             <FormControlLabel
               control={
@@ -233,38 +220,37 @@ const ShowPagesListPage = ({
             />
           </FormGroup>
         </Grid2>
-        <Grid2 size={2}>
+        <Grid2 size={{ xs: 12, sm: 6, lg: 4 }}>
           <SearchInput
             term={term}
             onSearch={handleSearch}
             placeholder={T.translate("show_pages.placeholders.search")}
           />
         </Grid2>
-        <Grid2 size={3}>
+        <Grid2 size={{ xs: 6, sm: 6, lg: 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}>
+        <Grid2 size={{ xs: 6, sm: 6, lg: 3 }}>
           <Button
             variant="contained"
-            size="medium"
             fullWidth
             onClick={handleNewShowPage}
             startIcon={<AddIcon />}
-            sx={{ height: "36px" }}
           >
             {T.translate("show_pages.new_page")}
           </Button>
         </Grid2>
       </Grid2>
+      <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 a8efef105..65df7dac5 100644
--- a/src/pages/sponsors/show-purchase-list-page/index.js
+++ b/src/pages/sponsors/show-purchase-list-page/index.js
@@ -16,6 +16,7 @@ import { connect } from "react-redux";
 import T from "i18n-react/dist/i18n-react";
 import { Breadcrumb } from "react-breadcrumbs";
 import {
+  Box,
   Button,
   CircularProgress,
   Grid2,
@@ -218,20 +219,8 @@ const ShowPurchaseListPage = ({
           }}
         />
       </div>
-      <h3>
-        {T.translate("sponsor_show_purchases.purchases")} ({totalCount})
-      </h3>
-      <Grid2
-        container
-        spacing={2}
-        sx={{
-          mb: 2,
-          display: "flex",
-          justifyContent: "space-between",
-          rowGap: 1,
-          gap: 2
-        }}
-      >
+      <h3>{T.translate("sponsor_show_purchases.purchases")}</h3>
+      <Grid2 container spacing={2} sx={{ mb: 2 }}>
         <Grid2 size={{ xs: 12, sm: 6 }}>
           <SearchInput
             term={term}
@@ -239,12 +228,16 @@ const ShowPurchaseListPage = ({
             placeholder={T.translate("general.placeholders.search")}
           />
         </Grid2>
-        <Grid2 size={{ xs: 12, sm: 3 }}>
+        <Grid2 size={{ xs: 12, sm: 6, md: 3 }} offset={{ md: 3 }}>
           <Button fullWidth variant="contained" onClick={handleExport}>
             {T.translate("general.export")}
           </Button>
         </Grid2>
       </Grid2>
+      <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/index.js b/src/pages/sponsors/sponsor-form-item-list-page/index.js
index b49c140bc..66588e559 100644
--- a/src/pages/sponsors/sponsor-form-item-list-page/index.js
+++ b/src/pages/sponsors/sponsor-form-item-list-page/index.js
@@ -285,26 +285,8 @@ const SponsorFormItemListPage = ({
       >
         {T.translate("sponsor_form_item_list.alert_info")}
       </Alert>
-      <Grid2
-        container
-        spacing={2}
-        sx={{
-          justifyContent: "center",
-          alignItems: "center",
-          mb: 2
-        }}
-      >
-        <Grid2 size={4}>
-          <Box component="span">{totalCount} items</Box>
-        </Grid2>
-        <Grid2
-          container
-          size={8}
-          sx={{
-            justifyContent: "flex-end",
-            alignItems: "center"
-          }}
-        >
+      <Grid2 container spacing={2} sx={{ mb: 2 }}>
+        <Grid2 size={{ xs: 12, md: 4 }}>
           <FormGroup>
             <FormControlLabel
               control={
@@ -321,15 +303,21 @@ const SponsorFormItemListPage = ({
               label={T.translate("sponsor_form_item_list.show_archived")}
             />
           </FormGroup>
+        </Grid2>
+        <Grid2 size={{ xs: 12, md: 4 }}>
           <Button
             variant="contained"
+            fullWidth
             onClick={() => handleNewItem()}
             startIcon={<AddIcon />}
           >
             {T.translate("sponsor_form_item_list.add_item")}
           </Button>
+        </Grid2>
+        <Grid2 size={{ xs: 12, md: 4 }}>
           <Button
             variant="contained"
+            fullWidth
             onClick={() => handleNewInventoryItem()}
             startIcon={<AddIcon />}
           >
@@ -337,6 +325,7 @@ const SponsorFormItemListPage = ({
           </Button>
         </Grid2>
       </Grid2>
+      <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 aa9cb0017..5d986bc83 100644
--- a/src/pages/sponsors/sponsor-forms-list-page/index.js
+++ b/src/pages/sponsors/sponsor-forms-list-page/index.js
@@ -16,6 +16,7 @@ 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,
@@ -341,11 +342,9 @@ const SponsorFormsListPage = ({
 
   return (
     <div className="container">
-      <h1>
-        {T.translate("sponsor_forms.forms")} {totalCount}
-      </h1>
+      <h3>{T.translate("sponsor_forms.forms")}</h3>
       <CustomAlert message={T.translate("sponsor_forms.alert_info")} hideIcon />
-      <Grid2 container spacing={2} sx={{ mb: 2, width: "100%" }}>
+      <Grid2 container spacing={2} sx={{ mb: 2 }}>
         <Grid2 size={{ xs: 12, sm: 6, lg: 4 }}>
           <SearchInput
             term={term}
@@ -396,6 +395,7 @@ const SponsorFormsListPage = ({
           </Button>
         </Grid2>
       </Grid2>
+      <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 a56aa11d2..6e4b745d5 100644
--- a/src/pages/sponsors/sponsor-list-page.js
+++ b/src/pages/sponsors/sponsor-list-page.js
@@ -197,19 +197,8 @@ const SponsorListPage = ({
 
   return (
     <div className="container">
-      <h3>
-        {" "}
-        {T.translate("sponsor_list.sponsor_list")} ({totalSponsors})
-      </h3>
-      <Grid2
-        container
-        sx={{
-          mb: 2,
-          display: "flex",
-          justifyContent: "space-between",
-          rowGap: 1
-        }}
-      >
+      <h3> {T.translate("sponsor_list.sponsor_list")}</h3>
+      <Grid2 container spacing={2} sx={{ mb: 2 }}>
         <Grid2 size={{ xs: 12, sm: 6 }}>
           <SearchInput
             onSearch={handleOnSearch}
@@ -220,7 +209,7 @@ const SponsorListPage = ({
             debounced
           />
         </Grid2>
-        <Grid2 size={{ xs: 12, sm: 3 }}>
+        <Grid2 size={{ xs: 12, sm: 6, md: 3 }} offset={{ md: 3 }}>
           {canAddSponsors && (
             <Button
               variant="contained"
@@ -233,6 +222,7 @@ const SponsorListPage = ({
           )}
         </Grid2>
       </Grid2>
+      <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/tabs/sponsor-badge-scans/index.js b/src/pages/sponsors/sponsor-page/tabs/sponsor-badge-scans/index.js
index b85c38f95..8967840d4 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
@@ -168,36 +168,22 @@ const SponsorBadgeScans = ({
 
   return (
     <Box sx={{ mt: 2 }}>
-      <Grid2
-        container
-        spacing={1}
-        sx={{
-          justifyContent: "center",
-          alignItems: "center",
-          mb: 2
-        }}
-      >
-        <Grid2 size={3}>
-          <Box component="span">
-            {totalBadgeScans} {T.translate("sponsor_badge_scans.badge_scanned")}
-          </Box>
+      <Grid2 container spacing={2} sx={{ mb: 2 }}>
+        <Grid2 size={{ xs: 12, sm: 6, lg: 6 }}>
+          <SearchInput
+            onSearch={handleSearch}
+            placeholder={T.translate(
+              "inventory_item_list.placeholders.search_inventory_items"
+            )}
+          />
         </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>
+        <Grid2 size={{ xs: 6, sm: 6, lg: 3 }}>
           <Button
             variant="contained"
-            size="medium"
+            fullWidth
             onClick={handleNewManualScan}
             startIcon={<AddIcon />}
             sx={{
-              height: "36px",
               padding: "6px 16px",
               fontSize: "1.4rem",
               lineHeight: "2.4rem",
@@ -206,13 +192,14 @@ const SponsorBadgeScans = ({
           >
             {T.translate("sponsor_badge_scans.add_manual_scan")}
           </Button>
+        </Grid2>
+        <Grid2 size={{ xs: 6, sm: 6, lg: 3 }}>
           <Button
             variant="contained"
-            size="medium"
+            fullWidth
             onClick={handleExportBadgeScans}
             startIcon={<DownloadIcon />}
             sx={{
-              height: "36px",
               padding: "6px 16px",
               fontSize: "1.4rem",
               lineHeight: "2.4rem",
@@ -223,6 +210,9 @@ const SponsorBadgeScans = ({
           </Button>
         </Grid2>
       </Grid2>
+      <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..ec0b6d7bb 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
@@ -190,35 +190,20 @@ const CartView = ({
 
   return (
     <>
-      <Grid2
-        container
-        spacing={2}
-        sx={{
-          justifyContent: "center",
-          alignItems: "center",
-          mb: 2
-        }}
-      >
-        <Grid2 size={4}>
-          {cart && (
-            <Box component="span">{cart?.forms.length} forms in Cart</Box>
-          )}
-        </Grid2>
-        <Grid2 size={2} offset={4}>
+      <Grid2 container spacing={2} sx={{ mb: 2 }}>
+        <Grid2 size={{ xs: 12, sm: 6, md: 2 }} offset={{ md: 8 }}>
           <SearchInput
             term={term}
             onSearch={handleSearch}
             placeholder={T.translate("edit_sponsor.placeholders.search")}
           />
         </Grid2>
-        <Grid2 size={2}>
+        <Grid2 size={{ xs: 12, sm: 6, md: 2 }}>
           <Button
             variant="contained"
-            size="medium"
             fullWidth
             onClick={onAddForm}
             startIcon={<AddIcon />}
-            sx={{ height: "36px" }}
           >
             {T.translate("edit_sponsor.cart_tab.add_form")}
           </Button>
@@ -231,6 +216,7 @@ 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}
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 81421f064..c6ac9d1d2 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
@@ -298,19 +298,8 @@ const SponsorFormsManageItems = ({
         )}
         hideIcon
       />
-      <Grid2
-        container
-        spacing={2}
-        sx={{
-          justifyContent: "center",
-          alignItems: "center",
-          mb: 2
-        }}
-      >
-        <Grid2 size={2}>
-          <Box component="span">{totalCount} items</Box>
-        </Grid2>
-        <Grid2 size={2} offset={1}>
+      <Grid2 container spacing={2} sx={{ mb: 2 }}>
+        <Grid2 size={{ xs: 12, sm: 6, lg: 2 }}>
           <FormGroup>
             <FormControlLabel
               control={
@@ -330,33 +319,29 @@ const SponsorFormsManageItems = ({
             />
           </FormGroup>
         </Grid2>
-        <Grid2 size={2}>
+        <Grid2 size={{ xs: 12, sm: 6, lg: 4 }}>
           <SearchInput
             term={term}
             onSearch={handleSearch}
             placeholder={T.translate("edit_sponsor.placeholders.search")}
           />
         </Grid2>
-        <Grid2 size={2}>
+        <Grid2 size={{ xs: 6, sm: 6, lg: 3 }}>
           <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}>
+        <Grid2 size={{ xs: 6, sm: 6, lg: 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"
@@ -364,6 +349,7 @@ const SponsorFormsManageItems = ({
           </Button>
         </Grid2>
       </Grid2>
+      <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 8fa808a86..43f2e8de9 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
@@ -403,21 +403,8 @@ const SponsorFormsTab = ({
         message={T.translate("edit_sponsor.forms_tab.alert_info")}
         hideIcon
       />
-      <Grid2
-        container
-        spacing={2}
-        sx={{
-          justifyContent: "center",
-          alignItems: "center",
-          mb: 2
-        }}
-      >
-        <Grid2 size={1}>
-          <Box component="span">
-            {managedForms.totalCount + customizedForms.totalCount} forms
-          </Box>
-        </Grid2>
-        <Grid2 size={2} offset={1}>
+      <Grid2 container spacing={2} sx={{ mb: 2 }}>
+        <Grid2 size={{ xs: 12, sm: 6, lg: 2 }}>
           <FormGroup>
             <FormControlLabel
               control={
@@ -435,38 +422,37 @@ const SponsorFormsTab = ({
             />
           </FormGroup>
         </Grid2>
-        <Grid2 size={2}>
+        <Grid2 size={{ xs: 12, sm: 6, lg: 4 }}>
           <SearchInput
             term={term}
             onSearch={handleSearch}
             placeholder={T.translate("edit_sponsor.placeholders.search")}
           />
         </Grid2>
-        <Grid2 size={3}>
+        <Grid2 size={{ xs: 6, sm: 6, lg: 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}>
+        <Grid2 size={{ xs: 6, sm: 6, lg: 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>
+      <Box sx={{ mb: 2 }}>
+        {managedForms.totalCount + customizedForms.totalCount} forms
+      </Box>
       <div>
         <MuiTable
           columns={customizedFormsColumns}
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..2a3243431 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
@@ -369,22 +369,8 @@ const SponsorPagesTab = ({
         message={T.translate("edit_sponsor.pages_tab.alert_info")}
         hideIcon
       />
-      <Grid2
-        container
-        spacing={2}
-        sx={{
-          justifyContent: "center",
-          alignItems: "center",
-          mb: 2
-        }}
-      >
-        <Grid2 size={1}>
-          <Box component="span">
-            {managedPages.totalItems + customizedPages.totalItems}{" "}
-            {T.translate("edit_sponsor.pages_tab.pages")}
-          </Box>
-        </Grid2>
-        <Grid2 size={2} offset={1}>
+      <Grid2 container spacing={2} sx={{ mb: 2 }}>
+        <Grid2 size={{ xs: 12, sm: 6, lg: 2 }}>
           <FormGroup>
             <FormControlLabel
               control={
@@ -402,38 +388,38 @@ const SponsorPagesTab = ({
             />
           </FormGroup>
         </Grid2>
-        <Grid2 size={2}>
+        <Grid2 size={{ xs: 12, sm: 6, lg: 4 }}>
           <SearchInput
             term={term}
             onSearch={handleSearch}
             placeholder={T.translate("edit_sponsor.placeholders.search")}
           />
         </Grid2>
-        <Grid2 size={3}>
+        <Grid2 size={{ xs: 6, sm: 6, lg: 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}>
+        <Grid2 size={{ xs: 6, sm: 6, lg: 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>
+      <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..92681cf64 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
@@ -191,21 +191,8 @@ const SponsorPurchasesTab = ({
 
   return (
     <Box sx={{ mt: 2 }}>
-      <Grid2
-        container
-        spacing={2}
-        sx={{
-          justifyContent: "center",
-          alignItems: "center",
-          mb: 2
-        }}
-      >
-        <Grid2 size={2}>
-          <Box component="span">
-            {totalCount} {T.translate("edit_sponsor.purchase_tab.purchases")}
-          </Box>
-        </Grid2>
-        <Grid2 size={2} offset={8}>
+      <Grid2 container spacing={2} sx={{ mb: 2 }}>
+        <Grid2 size={{ xs: 12, sm: 6, md: 3 }} offset={{ md: 9 }}>
           <SearchInput
             term={term}
             onSearch={handleSearch}
@@ -213,6 +200,9 @@ const SponsorPurchasesTab = ({
           />
         </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-users-list-page/index.js b/src/pages/sponsors/sponsor-users-list-page/index.js
index 2b4fce0f4..5d8236c46 100644
--- a/src/pages/sponsors/sponsor-users-list-page/index.js
+++ b/src/pages/sponsors/sponsor-users-list-page/index.js
@@ -106,46 +106,26 @@ 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 container spacing={2} sx={{ mb: 2 }}>
+        <Grid2 size={{ xs: 12, sm: 6, lg: 6 }}>
+          <SearchInput term={term} onSearch={handleSearch} />
         </Grid2>
-        <Grid2
-          container
-          size={10}
-          sx={{
-            justifyContent: "flex-end",
-            alignItems: "center"
-          }}
-        >
-          <Grid2 size={3}>
-            <SearchInput term={term} onSearch={handleSearch} />
-          </Grid2>
+        <Grid2 size={{ xs: 6, sm: 3 }}>
           <Button
             variant="contained"
-            size="medium"
+            fullWidth
             onClick={() => setOpenPopup("import")}
-            startIcon={<AddIcon />}
-            sx={{ height: "36px" }}
+            startIcon={<SaveAltIcon />}
           >
             {T.translate("sponsor_users.import_user")}
           </Button>
+        </Grid2>
+        <Grid2 size={{ xs: 6, sm: 3 }}>
           <Button
             variant="contained"
-            size="medium"
+            fullWidth
             onClick={() => setOpenPopup("new")}
-            startIcon={<SaveAltIcon />}
-            sx={{ height: "36px" }}
+            startIcon={<AddIcon />}
           >
             {T.translate("sponsor_users.add_user")}
           </Button>
@@ -167,6 +147,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..d721da031 100644
--- a/src/pages/sponsors/summit-sponsorship-list-page.js
+++ b/src/pages/sponsors/summit-sponsorship-list-page.js
@@ -139,41 +139,19 @@ 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"
-          }}
-        >
-          <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 container spacing={2} sx={{ mb: 2 }}>
+        <Grid2 size={{ xs: 12, sm: 6, md: 3 }} offset={{ sm: 6, md: 9 }}>
+          <Button
+            variant="contained"
+            fullWidth
+            onClick={handleNewSponsorship}
+            startIcon={<AddIcon />}
+          >
+            {T.translate("summit_sponsorship_list.add_sponsorship")}
+          </Button>
         </Grid2>
       </Grid2>
+      <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/summits/summit-directory-page.js b/src/pages/summits/summit-directory-page.js
index fd5e893ac..05a0d3d8a 100644
--- a/src/pages/summits/summit-directory-page.js
+++ b/src/pages/summits/summit-directory-page.js
@@ -160,27 +160,16 @@ const SummitDirectoryPage = ({
 
   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 }}>
+      <h3>{T.translate("directory.summits")}</h3>
+      <Grid2 container spacing={2} sx={{ mb: 2 }}>
+        <Grid2 size={{ xs: 12, md: 6 }}>
           <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
-          }}
-        >
+        <Grid2 size={{ xs: 6, md: 3 }}>
           <FormGroup>
             <FormControlLabel
               control={
@@ -195,25 +184,25 @@ const SummitDirectoryPage = ({
               label={T.translate("directory.hide_past_events")}
             />
           </FormGroup>
+        </Grid2>
+        <Grid2 size={{ xs: 6, md: 3 }}>
           {canAddSummits && (
             <Button
               variant="contained"
               color="primary"
+              size="medium"
+              fullWidth
               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>
+      <Box sx={{ mb: 2 }}>
+        {totalSummits} {T.translate("directory.summits").toLowerCase()}
+      </Box>
       <MuiTable
         columns={columns}
         data={safeSummits}
diff --git a/src/pages/tags/tag-list-page.js b/src/pages/tags/tag-list-page.js
index ff18d737c..b8ca36a3b 100644
--- a/src/pages/tags/tag-list-page.js
+++ b/src/pages/tags/tag-list-page.js
@@ -121,44 +121,21 @@ 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"
-        }}
-      >
-        <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 container spacing={2} sx={{ mb: 2 }}>
+        <Grid2 size={{ xs: 12, sm: 6 }}>
+          <MuiSearchInput
+            term={search}
+            onSearch={handleSearch}
+            placeholder={T.translate("tag_list.placeholders.search_tags")}
+          />
         </Grid2>
-        <Grid2
-          container
-          md={10}
-          spacing={1}
-          gap={1}
-          sx={{ justifyContent: "flex-end", alignItems: "center" }}
-        >
-          <Box sx={{ width: { xs: "100%", sm: 320 } }}>
-            <MuiSearchInput
-              term={search}
-              onSearch={handleSearch}
-              placeholder={T.translate("tag_list.placeholders.search_tags")}
-            />
-          </Box>
+        <Grid2 size={{ xs: 12, sm: 6, md: 3 }} offset={{ md: 3 }}>
           <Button
             variant="contained"
+            fullWidth
             startIcon={<AddIcon />}
             onClick={() => handleNewTag()}
             sx={{
-              height: "36px",
               padding: "6px 16px",
               fontSize: "1.4rem",
               lineHeight: "2.4rem",
@@ -169,6 +146,7 @@ const TagListPage = ({
           </Button>
         </Grid2>
       </Grid2>
+      <Box sx={{ mb: 2 }}>{totalTags}</Box>
 
       <MuiTable
         columns={columns}

From 874e1d1fbb51c7982c303652dd4e14995ae7668b Mon Sep 17 00:00:00 2001
From: Santiago Palenque <santipalenque@gmail.com>
Date: Wed, 19 Aug 2026 16:32:06 -0300
Subject: [PATCH 08/13] chore: create universal grid toolbar component

---
 src/components/mui/grid-toolbar.js            | 96 +++++++++++++++++++
 .../sponsors/show-pages-list-page/index.js    | 37 ++++---
 .../components/request-table.js               | 58 ++++++-----
 .../components/users-table.js                 | 40 ++++----
 .../sponsors/sponsor-users-list-page/index.js | 20 ++--
 5 files changed, 178 insertions(+), 73 deletions(-)
 create mode 100644 src/components/mui/grid-toolbar.js

diff --git a/src/components/mui/grid-toolbar.js b/src/components/mui/grid-toolbar.js
new file mode 100644
index 000000000..cb00aae90
--- /dev/null
+++ b/src/components/mui/grid-toolbar.js
@@ -0,0 +1,96 @@
+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, checkbox, children }) => {
+  const hasSearch = !!searchProps;
+  const hasCheckbox = !!checkbox;
+
+  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) {
+    searchSize = { xs: 12, md: 6 };
+    actionsSize = { xs: 12, md: 6 };
+  } else if (hasCheckbox) {
+    checkboxSize = { xs: 12, md: 2 };
+    actionsSize = { xs: 12, md: 10 };
+  } else {
+    actionsSize = { xs: 12, md: 12 };
+  }
+
+  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={checkbox.checked}
+                  onChange={checkbox.onChange}
+                  inputProps={{
+                    "aria-label": checkbox.ariaLabel ?? checkbox.label
+                  }}
+                />
+              }
+              label={checkbox.label}
+              sx={{ whiteSpace: "nowrap" }}
+            />
+          </FormGroup>
+        </Grid2>
+      )}
+      <Grid2
+        size={actionsSize}
+        sx={{
+          display: "flex",
+          justifyContent: "flex-end",
+          flexWrap: { xs: "wrap", sm: "nowrap" },
+          gap: 2
+        }}
+      >
+        {/* children are expected to be Button-like elements accepting `sx` */}
+        {React.Children.map(children, (child) =>
+          child
+            ? React.cloneElement(child, {
+                sx: { width: { xs: "100%", md: "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
+  }),
+  checkbox: PropTypes.shape({
+    checked: PropTypes.bool,
+    onChange: PropTypes.func,
+    label: PropTypes.node,
+    ariaLabel: PropTypes.string
+  })
+};
+
+GridToolbar.defaultProps = {
+  searchProps: null,
+  checkbox: null
+};
+
+export default GridToolbar;
diff --git a/src/pages/sponsors/show-pages-list-page/index.js b/src/pages/sponsors/show-pages-list-page/index.js
index a91101131..d1a57adde 100644
--- a/src/pages/sponsors/show-pages-list-page/index.js
+++ b/src/pages/sponsors/show-pages-list-page/index.js
@@ -203,9 +203,16 @@ const ShowPagesListPage = ({
       </div>
       <h3>{T.translate("show_pages.pages")}</h3>
       <CustomAlert message={T.translate("show_pages.alert_info")} hideIcon />
-      <Grid2 container spacing={2} sx={{ mb: 2 }}>
-        <Grid2 size={{ xs: 12, sm: 6, lg: 2 }}>
-          <FormGroup>
+      <Grid2 container spacing={2} sx={{ mb: 3 }}>
+        <Grid2 size={{ xs: 12, sm: 6, md: 4 }}>
+          <SearchInput
+            term={term}
+            onSearch={handleSearch}
+            placeholder={T.translate("show_pages.placeholders.search")}
+          />
+        </Grid2>
+        <Grid2 size={{ xs: 12, sm: 6, md: 2 }}>
+          <FormGroup sx={{ flexShrink: 0 }}>
             <FormControlLabel
               control={
                 <Checkbox
@@ -217,30 +224,30 @@ const ShowPagesListPage = ({
                 />
               }
               label={T.translate("show_pages.show_archived")}
+              sx={{ whiteSpace: "nowrap" }}
             />
           </FormGroup>
         </Grid2>
-        <Grid2 size={{ xs: 12, sm: 6, lg: 4 }}>
-          <SearchInput
-            term={term}
-            onSearch={handleSearch}
-            placeholder={T.translate("show_pages.placeholders.search")}
-          />
-        </Grid2>
-        <Grid2 size={{ xs: 6, sm: 6, lg: 3 }}>
+        <Grid2
+          size={{ xs: 12, md: 6 }}
+          sx={{
+            display: "flex",
+            justifyContent: "flex-end",
+            flexWrap: { xs: "wrap", sm: "nowrap" },
+            gap: 2
+          }}
+        >
           <Button
             variant="contained"
-            fullWidth
+            sx={{ width: { xs: "100%", md: "auto" } }}
             onClick={() => setOpenPopup("cloneTemplate")}
             startIcon={<AddIcon />}
           >
             {T.translate("show_pages.using_template")}
           </Button>
-        </Grid2>
-        <Grid2 size={{ xs: 6, sm: 6, lg: 3 }}>
           <Button
             variant="contained"
-            fullWidth
+            sx={{ width: { xs: "100%", md: "auto" } }}
             onClick={handleNewShowPage}
             startIcon={<AddIcon />}
           >
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 5d8236c46..a6ab5863d 100644
--- a/src/pages/sponsors/sponsor-users-list-page/index.js
+++ b/src/pages/sponsors/sponsor-users-list-page/index.js
@@ -106,24 +106,30 @@ const SponsorUsersListPage = ({
         }}
       />
       <h3>{T.translate("sponsor_users.users")}</h3>
-      <Grid2 container spacing={2} sx={{ mb: 2 }}>
-        <Grid2 size={{ xs: 12, sm: 6, lg: 6 }}>
+      <Grid2 container spacing={2} sx={{ mb: 3 }}>
+        <Grid2 size={{ xs: 12, sm: 6, lg: 4 }}>
           <SearchInput term={term} onSearch={handleSearch} />
         </Grid2>
-        <Grid2 size={{ xs: 6, sm: 3 }}>
+        <Grid2
+          size={{ xs: 12, sm: 6, lg: 8 }}
+          sx={{
+            display: "flex",
+            justifyContent: "flex-end",
+            flexWrap: { xs: "wrap" },
+            gap: 2
+          }}
+        >
           <Button
             variant="contained"
-            fullWidth
+            sx={{ width: { xs: "100%", sm: "auto" } }}
             onClick={() => setOpenPopup("import")}
             startIcon={<SaveAltIcon />}
           >
             {T.translate("sponsor_users.import_user")}
           </Button>
-        </Grid2>
-        <Grid2 size={{ xs: 6, sm: 3 }}>
           <Button
             variant="contained"
-            fullWidth
+            sx={{ width: { xs: "100%", sm: "auto" } }}
             onClick={() => setOpenPopup("new")}
             startIcon={<AddIcon />}
           >

From 79624333ec144fe9a20043b60a9f0310001f34ac Mon Sep 17 00:00:00 2001
From: Santiago Palenque <santipalenque@gmail.com>
Date: Thu, 20 Aug 2026 15:00:33 -0300
Subject: [PATCH 09/13] chore: apply responsive grid toolbar to all grid pages

---
 package.json                                  |   1 +
 src/components/CustomTheme.js                 |   2 +-
 src/components/mui/grid-toolbar.js            |  63 +++++--
 src/i18n/en.json                              |   6 +-
 .../admin_access/admin-access-list-page.js    |  57 ++----
 src/pages/companies/company-list-page.js      |  64 ++-----
 src/pages/emails/email-template-list-page.js  |  43 ++---
 src/pages/events/event-type-list-page.js      |  69 ++-----
 .../events/summit-event-list-page/index.js    |  76 ++++----
 .../media-file-type-list-page.js              |  55 +-----
 .../media_uploads/media-upload-list-page.js   |  34 +---
 .../selection-plan-list-page.js               |  33 ++--
 .../speakers/summit-speakers-list-page.js     |  68 ++-----
 .../add-on-types/add-on-types-list-page.js    |  48 ++---
 .../form-template-item-list-page.js           |  56 ++----
 .../form-templates/form-template-list-page.js | 100 +++-------
 .../inventory/inventory-list-page.js          |  77 +++-----
 .../page-templates/page-template-list-page.js |  93 +++-------
 .../sponsors/show-pages-list-page/index.js    |  88 +++------
 .../sponsors/show-purchase-list-page/index.js |  28 ++-
 .../sponsor-form-item-list-page/index.js      |  73 +++-----
 .../sponsors/sponsor-forms-list-page/index.js |  91 ++++-----
 src/pages/sponsors/sponsor-list-page.js       |  48 +++--
 .../sponsor-page/components/tab-nav.js        |   1 +
 .../tabs/sponsor-badge-scans/index.js         |  81 ++++----
 .../sponsor-cart-tab/components/cart-view.js  |  43 ++---
 .../sponsor-form-item-from-inventory.js       |  72 ++++----
 .../sponsor-forms-manage-items.js             |  95 ++++------
 .../tabs/sponsor-forms-tab/index.js           |  86 +++------
 .../tabs/sponsor-pages-tab/index.js           |  85 +++------
 .../tabs/sponsor-purchases-tab/index.js       |  19 +-
 .../sponsor-users-list-per-sponsor/index.js   |  69 +++----
 .../sponsors/sponsor-users-list-page/index.js |  49 ++---
 .../sponsors/summit-sponsorship-list-page.js  |  24 ++-
 .../sponsorship-list-page.js                  |  62 ++-----
 src/pages/summits/summit-directory-page.js    |  69 +++----
 src/pages/tags/tag-list-page.js               |  43 ++---
 src/pages/taxes/tax-type-list-page.js         |  63 ++-----
 .../payment-profile-list-page.js              |  68 ++-----
 .../track_chairs/track-chair-list-page.js     | 174 +++++++-----------
 yarn.lock                                     |   8 +-
 41 files changed, 831 insertions(+), 1553 deletions(-)

diff --git a/package.json b/package.json
index 3f280711a..f7556919c 100644
--- a/package.json
+++ b/package.json
@@ -93,6 +93,7 @@
     "moment-duration-format": "^2.3.2",
     "moment-timezone": "^0.5.33",
     "mui-color-input": "^9.0.0",
+    "openstack-uicore-foundation": "5.0.49-beta.1",
     "p-limit": "^6.1.0",
     "path-browserify": "^1.0.1",
     "postcss-loader": "^6.2.1",
diff --git a/src/components/CustomTheme.js b/src/components/CustomTheme.js
index bdeb26a20..13e23e07d 100644
--- a/src/components/CustomTheme.js
+++ b/src/components/CustomTheme.js
@@ -91,7 +91,7 @@ const theme = createTheme(MuiBaseCustomTheme, {
           ...(ownerState.size === "medium" && {
             fontSize: "14px",
             lineHeight: "20px",
-            padding: "10px 20px"
+            padding: "8px 12px"
           }),
           ...(ownerState.size === "large" && {
             fontSize: "16px",
diff --git a/src/components/mui/grid-toolbar.js b/src/components/mui/grid-toolbar.js
index cb00aae90..1f023ba0b 100644
--- a/src/components/mui/grid-toolbar.js
+++ b/src/components/mui/grid-toolbar.js
@@ -3,9 +3,9 @@ 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, checkbox, children }) => {
+const GridToolbar = ({ searchProps, checkboxProps, children, splitAt }) => {
   const hasSearch = !!searchProps;
-  const hasCheckbox = !!checkbox;
+  const hasCheckbox = !!checkboxProps;
 
   let searchSize;
   let checkboxSize;
@@ -16,15 +16,31 @@ const GridToolbar = ({ searchProps, checkbox, children }) => {
     checkboxSize = { xs: 12, sm: 6, md: 2 };
     actionsSize = { xs: 12, md: 6 };
   } else if (hasSearch) {
-    searchSize = { xs: 12, md: 6 };
-    actionsSize = { xs: 12, md: 6 };
+    // has search but no checkbox
+    searchSize = { xs: 12, [splitAt]: 4 };
+    actionsSize = { xs: 12, [splitAt]: 8 };
   } else if (hasCheckbox) {
-    checkboxSize = { xs: 12, md: 2 };
-    actionsSize = { xs: 12, md: 10 };
+    // has checkbox but no search
+    checkboxSize = { xs: 12, [splitAt]: 4 };
+    actionsSize = { xs: 12, [splitAt]: 8 };
   } else {
-    actionsSize = { xs: 12, md: 12 };
+    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 && (
@@ -38,14 +54,14 @@ const GridToolbar = ({ searchProps, checkbox, children }) => {
             <FormControlLabel
               control={
                 <Checkbox
-                  checked={checkbox.checked}
-                  onChange={checkbox.onChange}
+                  checked={checkboxProps.checked}
+                  onChange={checkboxProps.onChange}
                   inputProps={{
-                    "aria-label": checkbox.ariaLabel ?? checkbox.label
+                    "aria-label": checkboxProps.ariaLabel ?? checkboxProps.label
                   }}
                 />
               }
-              label={checkbox.label}
+              label={checkboxProps.label}
               sx={{ whiteSpace: "nowrap" }}
             />
           </FormGroup>
@@ -56,15 +72,24 @@ const GridToolbar = ({ searchProps, checkbox, children }) => {
         sx={{
           display: "flex",
           justifyContent: "flex-end",
-          flexWrap: { xs: "wrap", sm: "nowrap" },
+          flexWrap: { xs: "wrap", [actionsWidthBreakpoint]: "nowrap" },
           gap: 2
         }}
       >
-        {/* children are expected to be Button-like elements accepting `sx` */}
+        {/* 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%", md: "auto" }, ...child.props.sx }
+                sx: {
+                  width: { xs: "100%", [actionsAutoBreakpoint]: "auto" },
+                  ...(hasFillTier && {
+                    flexGrow: { sm: 1, [actionsAutoBreakpoint]: 0 },
+                    flexBasis: { sm: 0, [actionsAutoBreakpoint]: "auto" }
+                  }),
+                  ...child.props.sx
+                }
               })
             : child
         )}
@@ -80,17 +105,21 @@ GridToolbar.propTypes = {
     placeholder: PropTypes.string,
     debounced: PropTypes.bool
   }),
-  checkbox: PropTypes.shape({
+  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,
-  checkbox: null
+  checkboxProps: null,
+  splitAt: "sm"
 };
 
 export default GridToolbar;
diff --git a/src/i18n/en.json b/src/i18n/en.json
index f9b404e54..a75e0625e 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -2801,7 +2801,7 @@
   "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",
@@ -3522,7 +3522,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",
@@ -3538,7 +3538,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 14b9c9f76..e03986741 100644
--- a/src/pages/emails/email-template-list-page.js
+++ b/src/pages/emails/email-template-list-page.js
@@ -14,12 +14,11 @@
 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,
@@ -116,31 +115,21 @@ const EmailTemplateListPage = ({
   return (
     <div className="container">
       <h3>{T.translate("emails.template_list")}</h3>
-      <Grid2 container spacing={2} sx={{ mb: 2 }}>
-        <Grid2 size={{ xs: 12, sm: 6 }}>
-          <SearchInput
-            term={term}
-            onSearch={handleSearch}
-            placeholder={T.translate("emails.placeholders.search_templates")}
-          />
-        </Grid2>
-        <Grid2 size={{ xs: 12, sm: 6, md: 3 }} offset={{ md: 3 }}>
-          <Button
-            variant="contained"
-            fullWidth
-            onClick={handleNewEmailTemplate}
-            startIcon={<AddIcon />}
-            sx={{
-              padding: "6px 16px",
-              fontSize: "1.4rem",
-              lineHeight: "2.4rem",
-              letterSpacing: "0.4px"
-            }}
-          >
-            {T.translate("emails.add_template")}
-          </Button>
-        </Grid2>
-      </Grid2>
+      <GridToolbar
+        searchProps={{
+          term,
+          onSearch: handleSearch,
+          placeholder: T.translate("emails.placeholders.search_templates")
+        }}
+      >
+        <Button
+          variant="contained"
+          onClick={handleNewEmailTemplate}
+          startIcon={<AddIcon />}
+        >
+          {T.translate("emails.add_template")}
+        </Button>
+      </GridToolbar>
       <Box sx={{ mb: 2 }}>
         {totalTemplates} {T.translate("emails.templates")}
       </Box>
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 c4a47833d..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,33 +104,18 @@ const MediaUploadListPage = ({
   return (
     <div className="container">
       <h3>{T.translate("media_upload.media_upload_list")}</h3>
-      <Grid2 container spacing={2} sx={{ mb: 2 }}>
-        <Grid2 size={{ xs: 12, md: 6 }}>
-          <SearchInput term={term} onSearch={handleSearch} />
-        </Grid2>
-        <Grid2 size={{ xs: 6, md: 3 }}>
+      <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")}
           />
-        </Grid2>
-        <Grid2 size={{ xs: 6, md: 3 }}>
-          <Button
-            variant="contained"
-            fullWidth
-            onClick={handleNew}
-            startIcon={<AddIcon />}
-            sx={{
-              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>
diff --git a/src/pages/selection-plans/selection-plan-list-page.js b/src/pages/selection-plans/selection-plan-list-page.js
index 8486b4367..d6aaa79ce 100644
--- a/src/pages/selection-plans/selection-plan-list-page.js
+++ b/src/pages/selection-plans/selection-plan-list-page.js
@@ -14,12 +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,
@@ -172,25 +171,17 @@ const SelectionPlanListPage = ({
     <div className="container">
       <h3>{T.translate("selection_plan_list.selection_plan_list")}</h3>
 
-      <Grid2 container spacing={2} sx={{ mb: 2 }}>
-        <Grid2 size={{ xs: 12, sm: 6 }}>
-          <SearchInput
-            onSearch={handleSearch}
-            term={term}
-            placeholder={T.translate("selection_plan_list.placeholders.search")}
-          />
-        </Grid2>
-        <Grid2 size={{ xs: 12, sm: 6, md: 3 }} offset={{ md: 3 }}>
-          <Button
-            variant="contained"
-            fullWidth
-            onClick={handleNew}
-            startIcon={<AddIcon />}
-          >
-            {T.translate("selection_plan_list.add_selection_plan")}
-          </Button>
-        </Grid2>
-      </Grid2>
+      <GridToolbar
+        searchProps={{
+          onSearch: handleSearch,
+          term,
+          placeholder: T.translate("selection_plan_list.placeholders.search")
+        }}
+      >
+        <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 && (
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 cb5e3c311..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,13 +12,13 @@
  * */
 
 import React, { useEffect, useState } from "react";
-import { Box, Button, Grid2 } from "@mui/material";
+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,
@@ -125,33 +125,23 @@ const AddOnTypesListPage = ({
         }}
       />
       <h3> {T.translate("add_on_types_list.add_on_types")}</h3>
-      <Grid2 container spacing={2} sx={{ mb: 2 }}>
-        <Grid2 size={{ xs: 12, sm: 6 }}>
-          <SearchInput
-            term={term}
-            onSearch={handleSearch}
-            placeholder={T.translate(
-              "add_on_types_list.placeholders.search_add_on_types"
-            )}
-          />
-        </Grid2>
-        <Grid2 size={{ xs: 12, sm: 6, md: 3 }} offset={{ md: 3 }}>
-          <Button
-            variant="contained"
-            fullWidth
-            onClick={() => handleNewAddOnType()}
-            startIcon={<AddIcon />}
-            sx={{
-              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>
+      <GridToolbar
+        searchProps={{
+          term,
+          onSearch: handleSearch,
+          placeholder: T.translate(
+            "add_on_types_list.placeholders.search_add_on_types"
+          )
+        }}
+      >
+        <Button
+          variant="contained"
+          onClick={() => handleNewAddOnType()}
+          startIcon={<AddIcon />}
+        >
+          {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>
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 895c48794..3a484976d 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,
@@ -243,36 +236,21 @@ const FormTemplateItemListPage = ({
       >
         {T.translate("form_template_item_list.alert_info")}
       </Alert>
-      <Grid2 container spacing={2} sx={{ mb: 2 }}>
-        <Grid2 size={{ xs: 12, sm: 6 }}>
-          <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={{ xs: 12, sm: 6, md: 3 }} offset={{ md: 3 }}>
-          <Button
-            variant="contained"
-            fullWidth
-            onClick={() => handleNewInventoryItem()}
-            startIcon={<AddIcon />}
-          >
-            {T.translate("form_template_item_list.add_item")}
-          </Button>
-        </Grid2>
-      </Grid2>
+      <GridToolbar
+        checkboxProps={{
+          checked: showArchived,
+          onChange: handleShowArchivedForms,
+          label: T.translate("form_template_item_list.show_archived")
+        }}
+      >
+        <Button
+          variant="contained"
+          onClick={() => handleNewInventoryItem()}
+          startIcon={<AddIcon />}
+        >
+          {T.translate("form_template_item_list.add_item")}
+        </Button>
+      </GridToolbar>
       <Box sx={{ mb: 2 }}>{totalFormTemplateItems} items</Box>
 
       {formTemplateItems.length > 0 && (
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 24233d180..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,
-  Box,
-  Button,
-  Checkbox,
-  FormControlLabel,
-  FormGroup,
-  Grid2
-} from "@mui/material";
+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,
@@ -243,66 +235,34 @@ const FormTemplateListPage = ({
         {T.translate("form_template_list.alert_info")}
       </Alert>
 
-      <Grid2 container spacing={2} sx={{ mb: 2 }}>
-        <Grid2 size={{ xs: 12, sm: 6, lg: 2 }}>
-          <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>
-        <Grid2 size={{ xs: 12, sm: 6, lg: 4 }}>
-          <SearchInput
-            onSearch={handleSearch}
-            placeholder={T.translate(
-              "inventory_item_list.placeholders.search_inventory_items"
-            )}
-          />
-        </Grid2>
-        <Grid2 size={{ xs: 6, sm: 6, lg: 3 }}>
-          <Button
-            variant="contained"
-            fullWidth
-            onClick={() => handleNewFromDuplicate()}
-            startIcon={<AddIcon />}
-            sx={{
-              padding: "6px 16px",
-              fontSize: "1.4rem",
-              lineHeight: "2.4rem",
-              letterSpacing: "0.4px"
-            }}
-          >
-            {T.translate("form_template_list.using_duplicate")}
-          </Button>
-        </Grid2>
-        <Grid2 size={{ xs: 6, sm: 6, lg: 3 }}>
-          <Button
-            variant="contained"
-            fullWidth
-            onClick={() => handleNewFormTemplate()}
-            startIcon={<AddIcon />}
-            sx={{
-              padding: "6px 16px",
-              fontSize: "1.4rem",
-              lineHeight: "2.4rem",
-              letterSpacing: "0.4px"
-            }}
-          >
-            {T.translate("form_template_list.add_form_template")}
-          </Button>
-        </Grid2>
-      </Grid2>
+      <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")
+        }}
+      >
+        <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 && (
diff --git a/src/pages/sponsors-global/inventory/inventory-list-page.js b/src/pages/sponsors-global/inventory/inventory-list-page.js
index cb843f376..a51b1a35a 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,
-  Box,
-  Button,
-  Checkbox,
-  FormControlLabel,
-  FormGroup,
-  Grid2
-} from "@mui/material";
+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,
@@ -209,50 +201,27 @@ const InventoryListPage = ({
       >
         {T.translate("inventory_item_list.alert_info")}
       </Alert>
-      <Grid2 container spacing={2} sx={{ mb: 2 }}>
-        <Grid2 size={{ xs: 12, sm: 6, md: 3 }}>
-          <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>
-        <Grid2 size={{ xs: 12, sm: 6, md: 6 }}>
-          <SearchInput
-            onSearch={handleSearch}
-            placeholder={T.translate(
-              "inventory_item_list.placeholders.search_inventory_items"
-            )}
-          />
-        </Grid2>
-        <Grid2 size={{ xs: 12, md: 3 }}>
-          <Button
-            variant="contained"
-            fullWidth
-            onClick={() => handleNewInventoryItem()}
-            startIcon={<AddIcon />}
-            sx={{
-              padding: "6px 16px",
-              fontSize: "1.4rem",
-              lineHeight: "2.4rem",
-              letterSpacing: "0.4px"
-            }}
-          >
-            {T.translate("inventory_item_list.add_inventory_item")}
-          </Button>
-        </Grid2>
-      </Grid2>
+      <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")
+        }}
+      >
+        <Button
+          variant="contained"
+          onClick={() => handleNewInventoryItem()}
+          startIcon={<AddIcon />}
+        >
+          {T.translate("inventory_item_list.add_inventory_item")}
+        </Button>
+      </GridToolbar>
       <Box sx={{ mb: 2 }}>{totalInventoryItems} items</Box>
 
       {inventoryItems.length > 0 && (
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/index.js b/src/pages/sponsors/show-pages-list-page/index.js
index d1a57adde..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,58 +196,33 @@ const ShowPagesListPage = ({
       </div>
       <h3>{T.translate("show_pages.pages")}</h3>
       <CustomAlert message={T.translate("show_pages.alert_info")} hideIcon />
-      <Grid2 container spacing={2} sx={{ mb: 3 }}>
-        <Grid2 size={{ xs: 12, sm: 6, md: 4 }}>
-          <SearchInput
-            term={term}
-            onSearch={handleSearch}
-            placeholder={T.translate("show_pages.placeholders.search")}
-          />
-        </Grid2>
-        <Grid2 size={{ xs: 12, sm: 6, md: 2 }}>
-          <FormGroup sx={{ flexShrink: 0 }}>
-            <FormControlLabel
-              control={
-                <Checkbox
-                  onChange={handleShowArchivedForms}
-                  checked={showArchived}
-                  inputProps={{
-                    "aria-label": T.translate("show_pages.show_archived")
-                  }}
-                />
-              }
-              label={T.translate("show_pages.show_archived")}
-              sx={{ whiteSpace: "nowrap" }}
-            />
-          </FormGroup>
-        </Grid2>
-        <Grid2
-          size={{ xs: 12, md: 6 }}
-          sx={{
-            display: "flex",
-            justifyContent: "flex-end",
-            flexWrap: { xs: "wrap", sm: "nowrap" },
-            gap: 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")
+        }}
+      >
+        <Button
+          variant="contained"
+          onClick={() => setOpenPopup("cloneTemplate")}
+          startIcon={<AddIcon />}
+        >
+          {T.translate("show_pages.using_template")}
+        </Button>
+        <Button
+          variant="contained"
+          onClick={handleNewShowPage}
+          startIcon={<AddIcon />}
         >
-          <Button
-            variant="contained"
-            sx={{ width: { xs: "100%", md: "auto" } }}
-            onClick={() => setOpenPopup("cloneTemplate")}
-            startIcon={<AddIcon />}
-          >
-            {T.translate("show_pages.using_template")}
-          </Button>
-          <Button
-            variant="contained"
-            sx={{ width: { xs: "100%", md: "auto" } }}
-            onClick={handleNewShowPage}
-            startIcon={<AddIcon />}
-          >
-            {T.translate("show_pages.new_page")}
-          </Button>
-        </Grid2>
-      </Grid2>
+          {T.translate("show_pages.new_page")}
+        </Button>
+      </GridToolbar>
       <Box sx={{ mb: 2 }}>
         {totalCount} {T.translate("show_pages.pages")}
       </Box>
diff --git a/src/pages/sponsors/show-purchase-list-page/index.js b/src/pages/sponsors/show-purchase-list-page/index.js
index 65df7dac5..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,
@@ -220,20 +219,17 @@ const ShowPurchaseListPage = ({
         />
       </div>
       <h3>{T.translate("sponsor_show_purchases.purchases")}</h3>
-      <Grid2 container spacing={2} sx={{ mb: 2 }}>
-        <Grid2 size={{ xs: 12, sm: 6 }}>
-          <SearchInput
-            term={term}
-            onSearch={handleSearch}
-            placeholder={T.translate("general.placeholders.search")}
-          />
-        </Grid2>
-        <Grid2 size={{ xs: 12, sm: 6, md: 3 }} offset={{ md: 3 }}>
-          <Button fullWidth variant="contained" onClick={handleExport}>
-            {T.translate("general.export")}
-          </Button>
-        </Grid2>
-      </Grid2>
+      <GridToolbar
+        searchProps={{
+          term,
+          onSearch: handleSearch,
+          placeholder: T.translate("general.placeholders.search")
+        }}
+      >
+        <Button variant="contained" onClick={handleExport}>
+          {T.translate("general.export")}
+        </Button>
+      </GridToolbar>
       <Box sx={{ mb: 2 }}>
         {totalCount}{" "}
         {T.translate("sponsor_show_purchases.purchases").toLowerCase()}
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 66588e559..fcb3dc14e 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,
@@ -285,46 +278,28 @@ const SponsorFormItemListPage = ({
       >
         {T.translate("sponsor_form_item_list.alert_info")}
       </Alert>
-      <Grid2 container spacing={2} sx={{ mb: 2 }}>
-        <Grid2 size={{ xs: 12, md: 4 }}>
-          <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>
-        </Grid2>
-        <Grid2 size={{ xs: 12, md: 4 }}>
-          <Button
-            variant="contained"
-            fullWidth
-            onClick={() => handleNewItem()}
-            startIcon={<AddIcon />}
-          >
-            {T.translate("sponsor_form_item_list.add_item")}
-          </Button>
-        </Grid2>
-        <Grid2 size={{ xs: 12, md: 4 }}>
-          <Button
-            variant="contained"
-            fullWidth
-            onClick={() => handleNewInventoryItem()}
-            startIcon={<AddIcon />}
-          >
-            {T.translate("sponsor_form_item_list.add_item_from_inventory")}
-          </Button>
-        </Grid2>
-      </Grid2>
+      <GridToolbar
+        checkboxProps={{
+          checked: showArchived,
+          onChange: handleShowArchivedForms,
+          label: T.translate("sponsor_form_item_list.show_archived")
+        }}
+      >
+        <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>
+      </GridToolbar>
       <Box sx={{ mb: 2 }}>{totalCount} items</Box>
 
       {items.length > 0 && (
diff --git a/src/pages/sponsors/sponsor-forms-list-page/index.js b/src/pages/sponsors/sponsor-forms-list-page/index.js
index 5d986bc83..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,
@@ -344,57 +337,35 @@ const SponsorFormsListPage = ({
     <div className="container">
       <h3>{T.translate("sponsor_forms.forms")}</h3>
       <CustomAlert message={T.translate("sponsor_forms.alert_info")} hideIcon />
-      <Grid2 container spacing={2} sx={{ mb: 2 }}>
-        <Grid2 size={{ xs: 12, sm: 6, lg: 4 }}>
-          <SearchInput
-            term={term}
-            onSearch={handleSearch}
-            placeholder={T.translate("sponsor_forms.placeholders.search")}
-          />
-        </Grid2>
-        <Grid2 size={{ xs: 12, sm: 6, lg: 2 }}>
-          <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={{ xs: 6, sm: 6, lg: 3 }}>
-          <Button
-            variant="contained"
-            size="medium"
-            fullWidth
-            onClick={() => setOpenPopup("clone")}
-            startIcon={<AddIcon />}
-          >
-            {T.translate("sponsor_forms.using_global")}
-          </Button>
-        </Grid2>
-        <Grid2 size={{ xs: 6, sm: 6, lg: 3 }}>
-          <Button
-            variant="contained"
-            size="medium"
-            fullWidth
-            onClick={() => setOpenPopup("new")}
-            startIcon={<AddIcon />}
-          >
-            {T.translate("sponsor_forms.add_form")}
-          </Button>
-        </Grid2>
-      </Grid2>
+      <GridToolbar
+        searchProps={{
+          term,
+          onSearch: handleSearch,
+          placeholder: T.translate("sponsor_forms.placeholders.search")
+        }}
+        checkboxProps={{
+          checked: showArchived,
+          onChange: handleShowArchivedForms,
+          label: T.translate("sponsor_forms.show_archived")
+        }}
+      >
+        <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 && (
diff --git a/src/pages/sponsors/sponsor-list-page.js b/src/pages/sponsors/sponsor-list-page.js
index 6e4b745d5..2567ef027 100644
--- a/src/pages/sponsors/sponsor-list-page.js
+++ b/src/pages/sponsors/sponsor-list-page.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 { Badge, Button, Grid2, Tooltip, Typography } 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,
@@ -198,30 +198,26 @@ const SponsorListPage = ({
   return (
     <div className="container">
       <h3> {T.translate("sponsor_list.sponsor_list")}</h3>
-      <Grid2 container spacing={2} sx={{ mb: 2 }}>
-        <Grid2 size={{ xs: 12, sm: 6 }}>
-          <SearchInput
-            onSearch={handleOnSearch}
-            term={term}
-            placeholder={T.translate(
-              "inventory_item_list.placeholders.search_inventory_items"
-            )}
-            debounced
-          />
-        </Grid2>
-        <Grid2 size={{ xs: 12, sm: 6, md: 3 }} offset={{ md: 3 }}>
-          {canAddSponsors && (
-            <Button
-              variant="contained"
-              fullWidth
-              onClick={() => handleOpenAddSponsorPopup()}
-              startIcon={<AddIcon />}
-            >
-              {T.translate("sponsor_list.add_sponsor")}
-            </Button>
-          )}
-        </Grid2>
-      </Grid2>
+      <GridToolbar
+        searchProps={{
+          onSearch: handleOnSearch,
+          term,
+          placeholder: T.translate(
+            "inventory_item_list.placeholders.search_inventory_items"
+          ),
+          debounced: true
+        }}
+      >
+        {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 && (
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 8967840d4..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,48 +168,41 @@ const SponsorBadgeScans = ({
 
   return (
     <Box sx={{ mt: 2 }}>
-      <Grid2 container spacing={2} sx={{ mb: 2 }}>
-        <Grid2 size={{ xs: 12, sm: 6, lg: 6 }}>
-          <SearchInput
-            onSearch={handleSearch}
-            placeholder={T.translate(
-              "inventory_item_list.placeholders.search_inventory_items"
-            )}
-          />
-        </Grid2>
-        <Grid2 size={{ xs: 6, sm: 6, lg: 3 }}>
-          <Button
-            variant="contained"
-            fullWidth
-            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>
-        </Grid2>
-        <Grid2 size={{ xs: 6, sm: 6, lg: 3 }}>
-          <Button
-            variant="contained"
-            fullWidth
-            onClick={handleExportBadgeScans}
-            startIcon={<DownloadIcon />}
-            sx={{
-              padding: "6px 16px",
-              fontSize: "1.4rem",
-              lineHeight: "2.4rem",
-              letterSpacing: "0.4px"
-            }}
-          >
-            {T.translate("sponsor_badge_scans.export")}
-          </Button>
-        </Grid2>
-      </Grid2>
+      <GridToolbar
+        searchProps={{
+          onSearch: handleSearch,
+          placeholder: T.translate(
+            "inventory_item_list.placeholders.search_inventory_items"
+          )
+        }}
+      >
+        <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>
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 ec0b6d7bb..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,25 +183,17 @@ const CartView = ({
 
   return (
     <>
-      <Grid2 container spacing={2} sx={{ mb: 2 }}>
-        <Grid2 size={{ xs: 12, sm: 6, md: 2 }} offset={{ md: 8 }}>
-          <SearchInput
-            term={term}
-            onSearch={handleSearch}
-            placeholder={T.translate("edit_sponsor.placeholders.search")}
-          />
-        </Grid2>
-        <Grid2 size={{ xs: 12, sm: 6, md: 2 }}>
-          <Button
-            variant="contained"
-            fullWidth
-            onClick={onAddForm}
-            startIcon={<AddIcon />}
-          >
-            {T.translate("edit_sponsor.cart_tab.add_form")}
-          </Button>
-        </Grid2>
-      </Grid2>
+      <GridToolbar
+        searchProps={{
+          term,
+          onSearch: handleSearch,
+          placeholder: T.translate("edit_sponsor.placeholders.search")
+        }}
+      >
+        <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")}
@@ -221,7 +206,7 @@ const CartView = ({
             <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/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 6d1683437..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 {
@@ -187,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 c6ac9d1d2..8d98e95ff 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,
@@ -298,57 +289,37 @@ const SponsorFormsManageItems = ({
         )}
         hideIcon
       />
-      <Grid2 container spacing={2} sx={{ mb: 2 }}>
-        <Grid2 size={{ xs: 12, sm: 6, lg: 2 }}>
-          <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={{ xs: 12, sm: 6, lg: 4 }}>
-          <SearchInput
-            term={term}
-            onSearch={handleSearch}
-            placeholder={T.translate("edit_sponsor.placeholders.search")}
-          />
-        </Grid2>
-        <Grid2 size={{ xs: 6, sm: 6, lg: 3 }}>
-          <Button
-            variant="contained"
-            fullWidth
-            onClick={handleOpenItemPopup}
-            startIcon={<AddIcon />}
-          >
-            {T.translate("edit_sponsor.forms_tab.form_manage_items.add_item")}
-          </Button>
-        </Grid2>
-        <Grid2 size={{ xs: 6, sm: 6, lg: 3 }}>
-          <Button
-            variant="contained"
-            fullWidth
-            onClick={() => setOpenPopup("add_item_inventory")}
-            startIcon={<AddIcon />}
-          >
-            {T.translate(
-              "edit_sponsor.forms_tab.form_manage_items.add_item_inventory"
-            )}
-          </Button>
-        </Grid2>
-      </Grid2>
+      <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"
+          )
+        }}
+      >
+        <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>
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 43f2e8de9..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,
@@ -403,53 +395,33 @@ const SponsorFormsTab = ({
         message={T.translate("edit_sponsor.forms_tab.alert_info")}
         hideIcon
       />
-      <Grid2 container spacing={2} sx={{ mb: 2 }}>
-        <Grid2 size={{ xs: 12, sm: 6, lg: 2 }}>
-          <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={{ xs: 12, sm: 6, lg: 4 }}>
-          <SearchInput
-            term={term}
-            onSearch={handleSearch}
-            placeholder={T.translate("edit_sponsor.placeholders.search")}
-          />
-        </Grid2>
-        <Grid2 size={{ xs: 6, sm: 6, lg: 3 }}>
-          <Button
-            variant="contained"
-            fullWidth
-            onClick={() => setOpenPopup("template")}
-            startIcon={<AddIcon />}
-          >
-            {T.translate("edit_sponsor.forms_tab.using_template")}
-          </Button>
-        </Grid2>
-        <Grid2 size={{ xs: 6, sm: 6, lg: 3 }}>
-          <Button
-            variant="contained"
-            fullWidth
-            onClick={() => setCustomFormEdit("new")}
-            startIcon={<AddIcon />}
-          >
-            {T.translate("edit_sponsor.forms_tab.new_form")}
-          </Button>
-        </Grid2>
-      </Grid2>
+      <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")
+        }}
+      >
+        <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>
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 2a3243431..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,53 +362,33 @@ const SponsorPagesTab = ({
         message={T.translate("edit_sponsor.pages_tab.alert_info")}
         hideIcon
       />
-      <Grid2 container spacing={2} sx={{ mb: 2 }}>
-        <Grid2 size={{ xs: 12, sm: 6, lg: 2 }}>
-          <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={{ xs: 12, sm: 6, lg: 4 }}>
-          <SearchInput
-            term={term}
-            onSearch={handleSearch}
-            placeholder={T.translate("edit_sponsor.placeholders.search")}
-          />
-        </Grid2>
-        <Grid2 size={{ xs: 6, sm: 6, lg: 3 }}>
-          <Button
-            variant="contained"
-            fullWidth
-            onClick={handleUsingTemplate}
-            startIcon={<AddIcon />}
-          >
-            {T.translate("edit_sponsor.pages_tab.using_template")}
-          </Button>
-        </Grid2>
-        <Grid2 size={{ xs: 6, sm: 6, lg: 3 }}>
-          <Button
-            variant="contained"
-            fullWidth
-            onClick={handleAddPage}
-            startIcon={<AddIcon />}
-          >
-            {T.translate("edit_sponsor.pages_tab.new_page")}
-          </Button>
-        </Grid2>
-      </Grid2>
+      <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")
+        }}
+      >
+        <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")}
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 92681cf64..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,15 +190,13 @@ const SponsorPurchasesTab = ({
 
   return (
     <Box sx={{ mt: 2 }}>
-      <Grid2 container spacing={2} sx={{ mb: 2 }}>
-        <Grid2 size={{ xs: 12, sm: 6, md: 3 }} offset={{ md: 9 }}>
-          <SearchInput
-            term={term}
-            onSearch={handleSearch}
-            placeholder={T.translate("edit_sponsor.placeholders.search")}
-          />
-        </Grid2>
-      </Grid2>
+      <GridToolbar
+        searchProps={{
+          term,
+          onSearch: handleSearch,
+          placeholder: T.translate("edit_sponsor.placeholders.search")
+        }}
+      />
       <Box sx={{ mb: 2 }}>
         {totalCount} {T.translate("edit_sponsor.purchase_tab.purchases")}
       </Box>
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/index.js b/src/pages/sponsors/sponsor-users-list-page/index.js
index a6ab5863d..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,37 +106,22 @@ const SponsorUsersListPage = ({
         }}
       />
       <h3>{T.translate("sponsor_users.users")}</h3>
-      <Grid2 container spacing={2} sx={{ mb: 3 }}>
-        <Grid2 size={{ xs: 12, sm: 6, lg: 4 }}>
-          <SearchInput term={term} onSearch={handleSearch} />
-        </Grid2>
-        <Grid2
-          size={{ xs: 12, sm: 6, lg: 8 }}
-          sx={{
-            display: "flex",
-            justifyContent: "flex-end",
-            flexWrap: { xs: "wrap" },
-            gap: 2
-          }}
+      <GridToolbar searchProps={{ term, onSearch: handleSearch }}>
+        <Button
+          variant="contained"
+          onClick={() => setOpenPopup("import")}
+          startIcon={<SaveAltIcon />}
+        >
+          {T.translate("sponsor_users.import_user")}
+        </Button>
+        <Button
+          variant="contained"
+          onClick={() => setOpenPopup("new")}
+          startIcon={<AddIcon />}
         >
-          <Button
-            variant="contained"
-            sx={{ width: { xs: "100%", sm: "auto" } }}
-            onClick={() => setOpenPopup("import")}
-            startIcon={<SaveAltIcon />}
-          >
-            {T.translate("sponsor_users.import_user")}
-          </Button>
-          <Button
-            variant="contained"
-            sx={{ width: { xs: "100%", sm: "auto" } }}
-            onClick={() => setOpenPopup("new")}
-            startIcon={<AddIcon />}
-          >
-            {T.translate("sponsor_users.add_user")}
-          </Button>
-        </Grid2>
-      </Grid2>
+          {T.translate("sponsor_users.add_user")}
+        </Button>
+      </GridToolbar>
 
       {hasImportTasks && (
         <Box
diff --git a/src/pages/sponsors/summit-sponsorship-list-page.js b/src/pages/sponsors/summit-sponsorship-list-page.js
index d721da031..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,18 +140,15 @@ const SummitSponsorshipListPage = ({
       >
         {T.translate("summit_sponsorship_list.alert_info")}
       </Alert>
-      <Grid2 container spacing={2} sx={{ mb: 2 }}>
-        <Grid2 size={{ xs: 12, sm: 6, md: 3 }} offset={{ sm: 6, md: 9 }}>
-          <Button
-            variant="contained"
-            fullWidth
-            onClick={handleNewSponsorship}
-            startIcon={<AddIcon />}
-          >
-            {T.translate("summit_sponsorship_list.add_sponsorship")}
-          </Button>
-        </Grid2>
-      </Grid2>
+      <GridToolbar>
+        <Button
+          variant="contained"
+          onClick={handleNewSponsorship}
+          startIcon={<AddIcon />}
+        >
+          {T.translate("summit_sponsorship_list.add_sponsorship")}
+        </Button>
+      </GridToolbar>
       <Box sx={{ mb: 2 }}>{totalSponsorships} summit tiers</Box>
 
       {sponsorships.length === 0 && (
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 05a0d3d8a..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,
@@ -161,45 +157,30 @@ const SummitDirectoryPage = ({
   return (
     <Box className="container">
       <h3>{T.translate("directory.summits")}</h3>
-      <Grid2 container spacing={2} sx={{ mb: 2 }}>
-        <Grid2 size={{ xs: 12, md: 6 }}>
-          <MuiSearchInput
-            term={searchTerm}
-            onSearch={handleSearch}
-            placeholder={T.translate("directory.placeholders.search")}
-          />
-        </Grid2>
-        <Grid2 size={{ xs: 6, md: 3 }}>
-          <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>
-        </Grid2>
-        <Grid2 size={{ xs: 6, md: 3 }}>
-          {canAddSummits && (
-            <Button
-              variant="contained"
-              color="primary"
-              size="medium"
-              fullWidth
-              startIcon={<AddIcon />}
-              onClick={handleNewSummit}
-            >
-              {T.translate("directory.add_summit")}
-            </Button>
-          )}
-        </Grid2>
-      </Grid2>
+      <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>
diff --git a/src/pages/tags/tag-list-page.js b/src/pages/tags/tag-list-page.js
index b8ca36a3b..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,31 +120,21 @@ const TagListPage = ({
     <Box className="container">
       <h3>{T.translate("tag_list.tag_list")}</h3>
 
-      <Grid2 container spacing={2} sx={{ mb: 2 }}>
-        <Grid2 size={{ xs: 12, sm: 6 }}>
-          <MuiSearchInput
-            term={search}
-            onSearch={handleSearch}
-            placeholder={T.translate("tag_list.placeholders.search_tags")}
-          />
-        </Grid2>
-        <Grid2 size={{ xs: 12, sm: 6, md: 3 }} offset={{ md: 3 }}>
-          <Button
-            variant="contained"
-            fullWidth
-            startIcon={<AddIcon />}
-            onClick={() => handleNewTag()}
-            sx={{
-              padding: "6px 16px",
-              fontSize: "1.4rem",
-              lineHeight: "2.4rem",
-              letterSpacing: "0.4px"
-            }}
-          >
-            {T.translate("tag_list.add_tag")}
-          </Button>
-        </Grid2>
-      </Grid2>
+      <GridToolbar
+        searchProps={{
+          term: search,
+          onSearch: handleSearch,
+          placeholder: T.translate("tag_list.placeholders.search_tags")
+        }}
+      >
+        <Button
+          variant="contained"
+          startIcon={<AddIcon />}
+          onClick={() => handleNewTag()}
+        >
+          {T.translate("tag_list.add_tag")}
+        </Button>
+      </GridToolbar>
       <Box sx={{ mb: 2 }}>{totalTags}</Box>
 
       <MuiTable
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/yarn.lock b/yarn.lock
index 1f4d4cb8f..29721a714 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.49-beta.0:
-  version "5.0.49-beta.0"
-  resolved "https://registry.yarnpkg.com/openstack-uicore-foundation/-/openstack-uicore-foundation-5.0.49-beta.0.tgz#89e985a21196551b19ad04cfce615c32c8058c92"
-  integrity sha512-ktXOuBAXld4QfxjnruqQFtVx7rOK57vuls0cMm3YItPkyox0pCxr6WwL6n6xo/FQKcevH0zKWUrZZJb/x0PS4A==
+openstack-uicore-foundation@5.0.49-beta.1:
+  version "5.0.49-beta.1"
+  resolved "https://registry.yarnpkg.com/openstack-uicore-foundation/-/openstack-uicore-foundation-5.0.49-beta.1.tgz#2021b8f05a2414a86930d7facf50aac7427d93be"
+  integrity sha512-T8uxti00a6bNp0mMTnL06ikGgOcK89umgspFH5tITsKPT/qI81YFGp8Qk8BnfLCYCczC/lQyuL3c09BtSf8XXw==
   dependencies:
     use-sync-external-store "^1.6.0"
 

From dd3e51585a477f6f1068a24f036bef7fe341f629 Mon Sep 17 00:00:00 2001
From: Santiago Palenque <santipalenque@gmail.com>
Date: Fri, 21 Aug 2026 17:43:19 -0300
Subject: [PATCH 10/13] chore: update uicore and resize icon

---
 package.json                         | 2 +-
 src/components/image-preview-cell.js | 4 ++--
 yarn.lock                            | 8 ++++----
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/package.json b/package.json
index f7556919c..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.49-beta.1",
+    "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/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/yarn.lock b/yarn.lock
index 29721a714..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.49-beta.1:
-  version "5.0.49-beta.1"
-  resolved "https://registry.yarnpkg.com/openstack-uicore-foundation/-/openstack-uicore-foundation-5.0.49-beta.1.tgz#2021b8f05a2414a86930d7facf50aac7427d93be"
-  integrity sha512-T8uxti00a6bNp0mMTnL06ikGgOcK89umgspFH5tITsKPT/qI81YFGp8Qk8BnfLCYCczC/lQyuL3c09BtSf8XXw==
+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"
 

From 3a00e3f1a66d8a57cf4faa7cfdd4416bf972ff44 Mon Sep 17 00:00:00 2001
From: Santiago Palenque <santipalenque@gmail.com>
Date: Mon, 31 Aug 2026 19:32:20 -0300
Subject: [PATCH 11/13] chore: fix singular or plurar items count label

---
 package.json                                              | 2 +-
 src/i18n/en.json                                          | 6 ++++++
 .../form-templates/form-template-item-list-page.js        | 5 ++++-
 .../form-templates/form-template-list-page.js             | 5 ++++-
 .../sponsors-global/inventory/inventory-list-page.js      | 5 ++++-
 .../page-templates/page-template-list-page.js             | 5 ++++-
 src/pages/sponsors/sponsor-forms-list-page/index.js       | 3 ++-
 .../manage-items/sponsor-form-item-from-inventory.js      | 6 +++++-
 src/pages/summits/summit-directory-page.js                | 5 ++---
 src/utils/methods.js                                      | 4 ++++
 yarn.lock                                                 | 8 ++++----
 11 files changed, 40 insertions(+), 14 deletions(-)

diff --git a/package.json b/package.json
index 400c3d70a..f91e7ebd3 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.49-beta.2",
+    "openstack-uicore-foundation": "5.0.55",
     "p-limit": "^6.1.0",
     "path-browserify": "^1.0.1",
     "postcss-loader": "^6.2.1",
diff --git a/src/i18n/en.json b/src/i18n/en.json
index a75e0625e..c3c0e36b2 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -86,6 +86,7 @@
     "unarchive": "Unarchive",
     "archive": "Archive",
     "items": "items",
+    "item": "item",
     "sort_by": "Sort By",
     "sort_asc_label": "A-Z",
     "sort_desc_label": "Z-A",
@@ -308,6 +309,7 @@
   "directory": {
     "select": "Select",
     "summits": "Shows",
+    "summit": "show",
     "add_summit": "Add Show",
     "remove_warning": "Are you sure you want to delete event",
     "invitation_only": "Invitation Only",
@@ -2587,6 +2589,7 @@
         "standard_rate": "Standard Rate",
         "onsite_rate": "On site rate",
         "default_quantity": "Default Quantity",
+        "selected": "selected",
         "add_selected": "Add Selected Items",
         "item_updated": "Form item updated successfully",
         "item_created": "Form item created successfully",
@@ -2800,6 +2803,7 @@
   },
   "sponsor_forms": {
     "forms": "Forms",
+    "form": "form",
     "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",
     "using_global": "Using Global Template",
@@ -4055,6 +4059,7 @@
   },
   "form_template_list": {
     "form_templates": "Form Templates",
+    "form": "form",
     "alert_info": "To add an order form, select New Form Template. To edit an existing form, click on the list item. To edit the items within the form, click manage items on the form line you wish to edit.",
     "code_column_label": "Code",
     "name_column_label": "Name",
@@ -4208,6 +4213,7 @@
   },
   "page_template_list": {
     "page_templates": "Page Templates",
+    "page": "page",
     "alert_info": "You can create or archive Pages from the list. To edit a Page click on the item's Edit botton.",
     "code": "Code",
     "name": "Name",
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 3a484976d..2b9031690 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
@@ -35,6 +35,7 @@ import AddFormTemplateItemDialog from "./add-form-template-item-popup";
 import SponsorInventoryDialog from "./sponsor-inventory-popup";
 import { getInventoryItems } from "../../../actions/inventory-item-actions";
 import { DEFAULT_CURRENT_PAGE } from "../../../utils/constants";
+import { countLabel } from "../../../utils/methods";
 
 const FormTemplateItemListPage = ({
   formTemplateId,
@@ -251,7 +252,9 @@ const FormTemplateItemListPage = ({
           {T.translate("form_template_item_list.add_item")}
         </Button>
       </GridToolbar>
-      <Box sx={{ mb: 2 }}>{totalFormTemplateItems} items</Box>
+      <Box sx={{ mb: 2 }}>
+        {countLabel("general.item", totalFormTemplateItems)}
+      </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 f3fa811eb..bec30a492 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
@@ -34,6 +34,7 @@ import FormTemplateDialog from "./form-template-popup";
 import history from "../../../history";
 import FormTemplateFromDuplicateDialog from "./form-template-from-duplicate-popup";
 import { DEFAULT_CURRENT_PAGE } from "../../../utils/constants";
+import { countLabel } from "../../../utils/methods";
 
 const FormTemplateListPage = ({
   formTemplates,
@@ -263,7 +264,9 @@ const FormTemplateListPage = ({
           {T.translate("form_template_list.add_form_template")}
         </Button>
       </GridToolbar>
-      <Box sx={{ mb: 2 }}>{totalFormTemplates} forms</Box>
+      <Box sx={{ mb: 2 }}>
+        {countLabel("form_template_list.form", totalFormTemplates)}
+      </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 a51b1a35a..c504436aa 100644
--- a/src/pages/sponsors-global/inventory/inventory-list-page.js
+++ b/src/pages/sponsors-global/inventory/inventory-list-page.js
@@ -32,6 +32,7 @@ import {
 import SponsorInventoryDialog from "../form-templates/sponsor-inventory-popup";
 import { ImagePreviewCell } from "../../../components/image-preview-cell";
 import { DEFAULT_CURRENT_PAGE } from "../../../utils/constants";
+import { countLabel } from "../../../utils/methods";
 
 const InventoryListPage = ({
   inventoryItems,
@@ -222,7 +223,9 @@ const InventoryListPage = ({
           {T.translate("inventory_item_list.add_inventory_item")}
         </Button>
       </GridToolbar>
-      <Box sx={{ mb: 2 }}>{totalInventoryItems} items</Box>
+      <Box sx={{ mb: 2 }}>
+        {countLabel("general.item", totalInventoryItems)}
+      </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 e58044600..000a5c774 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
@@ -29,6 +29,7 @@ import {
   resetPageTemplateForm
 } from "../../../actions/page-template-actions";
 import { DEFAULT_CURRENT_PAGE } from "../../../utils/constants";
+import { countLabel } from "../../../utils/methods";
 import PageTemplatePopup from "./page-template-popup";
 import PageTemplateClonePopup from "./page-template-clone-popup";
 
@@ -225,7 +226,9 @@ const PageTemplateListPage = ({
           {T.translate("page_template_list.add_new")}
         </Button>
       </GridToolbar>
-      <Box sx={{ mb: 2 }}>{totalPageTemplates} pages</Box>
+      <Box sx={{ mb: 2 }}>
+        {countLabel("page_template_list.page", totalPageTemplates)}
+      </Box>
 
       <Box sx={{ mt: 4, mb: 2 }}>
         {pageTemplates.length === 0 && (
diff --git a/src/pages/sponsors/sponsor-forms-list-page/index.js b/src/pages/sponsors/sponsor-forms-list-page/index.js
index 598cbf130..df3b64edf 100644
--- a/src/pages/sponsors/sponsor-forms-list-page/index.js
+++ b/src/pages/sponsors/sponsor-forms-list-page/index.js
@@ -34,6 +34,7 @@ import CustomAlert from "../../../components/mui/custom-alert";
 import GlobalTemplatePopup from "./components/global-template/global-template-popup";
 import FormTemplatePopup from "./components/form-template/form-template-popup";
 import { DEFAULT_CURRENT_PAGE, MAX_PER_PAGE } from "../../../utils/constants";
+import { countLabel } from "../../../utils/methods";
 import { normalizeTiers, sameTierSet } from "./utils";
 
 const SponsorFormsListPage = ({
@@ -366,7 +367,7 @@ const SponsorFormsListPage = ({
           {T.translate("sponsor_forms.add_form")}
         </Button>
       </GridToolbar>
-      <Box sx={{ mb: 2 }}>{totalCount} forms</Box>
+      <Box sx={{ mb: 2 }}>{countLabel("sponsor_forms.form", totalCount)}</Box>
 
       {sponsorForms.length > 0 && (
         <div>
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 d39840a53..058f282b6 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
@@ -25,6 +25,7 @@ import {
   DEFAULT_CURRENT_PAGE,
   DEFAULT_PER_PAGE
 } from "../../../../../../../utils/constants";
+import { countLabel } from "../../../../../../../utils/methods";
 import { getInventoryItems } from "../../../../../../../actions/inventory-item-actions";
 import MenuButton from "../../../../../../../components/mui/menu-button";
 
@@ -216,7 +217,10 @@ const SponsorFormItemFromInventoryPopup = ({
               {T.translate("general.sort_by")}
             </MenuButton>
           </GridToolbar>
-          <Box>{selectedRows.length} items selected</Box>
+          <Box>
+            {countLabel("general.item", selectedRows.length)}{" "}
+            {T.translate("edit_sponsor.forms_tab.form_manage_items.selected")}
+          </Box>
         </Box>
 
         {inventoryItems.length > 0 && (
diff --git a/src/pages/summits/summit-directory-page.js b/src/pages/summits/summit-directory-page.js
index 1a4bf300c..3c1d675cb 100644
--- a/src/pages/summits/summit-directory-page.js
+++ b/src/pages/summits/summit-directory-page.js
@@ -28,6 +28,7 @@ import {
 } from "../../actions/summit-actions";
 import Member from "../../models/member";
 import { DEFAULT_CURRENT_PAGE } from "../../utils/constants";
+import { countLabel } from "../../utils/methods";
 
 const SummitDirectoryPage = ({
   summits,
@@ -181,9 +182,7 @@ const SummitDirectoryPage = ({
           </Button>
         )}
       </GridToolbar>
-      <Box sx={{ mb: 2 }}>
-        {totalSummits} {T.translate("directory.summits").toLowerCase()}
-      </Box>
+      <Box sx={{ mb: 2 }}>{countLabel("directory.summit", totalSummits)}</Box>
       <MuiTable
         columns={columns}
         data={safeSummits}
diff --git a/src/utils/methods.js b/src/utils/methods.js
index 340d19b99..a6614745b 100644
--- a/src/utils/methods.js
+++ b/src/utils/methods.js
@@ -677,3 +677,7 @@ export const formatDuration = (duration) => {
   const formatted = d.format("mm:ss", { trim: false });
   return formatted !== "00:00" ? formatted : "TBD";
 };
+
+// Builds "{count} {noun}" from a singular translation key, appending "s"
+export const countLabel = (translationKey, count) =>
+  `${count} ${T.translate(translationKey)}${count === 1 ? "" : "s"}`;
diff --git a/yarn.lock b/yarn.lock
index b55a39bac..1b187bb5b 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.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==
+openstack-uicore-foundation@5.0.55:
+  version "5.0.55"
+  resolved "https://registry.yarnpkg.com/openstack-uicore-foundation/-/openstack-uicore-foundation-5.0.55.tgz#fcf83cc42464a9daafb42f0585eb53d8aa301e67"
+  integrity sha512-fNvqiREmdUw1Y6lnYmvHx+RW3b+sFJbyLX/c+myg5lXyzWAfxcu9r8DBQmMVEF0nwqppFD308J1BBQhOfF7A0w==
   dependencies:
     use-sync-external-store "^1.6.0"
 

From bd96db894c9dc645948608e580faf3dcfb5be921 Mon Sep 17 00:00:00 2001
From: Santiago Palenque <santipalenque@gmail.com>
Date: Mon, 31 Aug 2026 19:34:59 -0300
Subject: [PATCH 12/13] chore: rolback filter change

---
 src/actions/sponsor-forms-actions.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/actions/sponsor-forms-actions.js b/src/actions/sponsor-forms-actions.js
index b80305792..f524f2c6a 100644
--- a/src/actions/sponsor-forms-actions.js
+++ b/src/actions/sponsor-forms-actions.js
@@ -148,9 +148,7 @@ export const getSponsorForms =
       expand: "sponsorship_types"
     };
 
-    if (!showArchived) {
-      filter.push("is_archived==0");
-    }
+    filter.push(`is_archived==${showArchived ? 1 : 0}`);
 
     if (sponsorshipTypesId?.length > 0) {
       const formattedSponsorships = sponsorshipTypesId.join("&&");

From f575ad0e9e33fb2021d74fd97b07c32fa109b924 Mon Sep 17 00:00:00 2001
From: smarcet <smarcet@gmail.com>
Date: Tue, 1 Sep 2026 09:55:25 -0300
Subject: [PATCH 13/13] chore(deps): update openstack-uicore-foundation to
 5.0.56

Signed-off-by: smarcet <smarcet@gmail.com>
---
 package.json | 2 +-
 yarn.lock    | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index f91e7ebd3..5245ac019 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.55",
+    "openstack-uicore-foundation": "5.0.56",
     "p-limit": "^6.1.0",
     "path-browserify": "^1.0.1",
     "postcss-loader": "^6.2.1",
diff --git a/yarn.lock b/yarn.lock
index 1b187bb5b..49830f251 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.55:
-  version "5.0.55"
-  resolved "https://registry.yarnpkg.com/openstack-uicore-foundation/-/openstack-uicore-foundation-5.0.55.tgz#fcf83cc42464a9daafb42f0585eb53d8aa301e67"
-  integrity sha512-fNvqiREmdUw1Y6lnYmvHx+RW3b+sFJbyLX/c+myg5lXyzWAfxcu9r8DBQmMVEF0nwqppFD308J1BBQhOfF7A0w==
+openstack-uicore-foundation@5.0.56:
+  version "5.0.56"
+  resolved "https://registry.npmjs.org/openstack-uicore-foundation/-/openstack-uicore-foundation-5.0.56.tgz#806dc75481fb136295cf3f33a2d6da6536fa62cd"
+  integrity sha512-51p1q9Emeiurni5ttDeYFmPa9q0Su1bg49HgyqZLyfBqB1JbaaNwSmyChc590WBRhKYKEdKKqF8lYoVORCWYtA==
   dependencies:
     use-sync-external-store "^1.6.0"