diff --git a/pkg/ui/workspaces/cluster-ui/src/api/statementsApi.ts b/pkg/ui/workspaces/cluster-ui/src/api/statementsApi.ts
index 38afe8694e1c..f6cfa71c4ac7 100644
--- a/pkg/ui/workspaces/cluster-ui/src/api/statementsApi.ts
+++ b/pkg/ui/workspaces/cluster-ui/src/api/statementsApi.ts
@@ -34,6 +34,8 @@ export type StatementDetailsResponseWithKey = {
 };
 
 export type SqlStatsResponse = cockroach.server.serverpb.StatementsResponse;
+export const SqlStatsSortOptions = cockroach.server.serverpb.StatsSortOptions;
+export type SqlStatsSortType = cockroach.server.serverpb.StatsSortOptions;
 
 const FetchStatsMode =
   cockroach.server.serverpb.CombinedStatementsStatsRequest.StatsType;
@@ -43,9 +45,6 @@ export type ErrorWithKey = {
   key: string;
 };
 
-export const SqlStatsSortOptions = cockroach.server.serverpb.StatsSortOptions;
-export type SqlStatsSortType = cockroach.server.serverpb.StatsSortOptions;
-
 export const DEFAULT_STATS_REQ_OPTIONS = {
   limit: 100,
   sort: SqlStatsSortOptions.SERVICE_LAT,
diff --git a/pkg/ui/workspaces/cluster-ui/src/columnsSelector/columnsSelector.module.scss b/pkg/ui/workspaces/cluster-ui/src/columnsSelector/columnsSelector.module.scss
index 38a7574c7ea1..f249709fd869 100644
--- a/pkg/ui/workspaces/cluster-ui/src/columnsSelector/columnsSelector.module.scss
+++ b/pkg/ui/workspaces/cluster-ui/src/columnsSelector/columnsSelector.module.scss
@@ -6,7 +6,7 @@
   }
 
   &__btn {
-    height: $line-height--large;
+    height: $line-height--larger;
     width: 67px;
     font-size: $font-size--small;
   }
@@ -36,9 +36,10 @@
   }
 }
 
-.float {
+.btn-area {
   float: left;
   margin-right: 7px;
+  font-size: $font-size--medium;
 }
 
 .label {
diff --git a/pkg/ui/workspaces/cluster-ui/src/columnsSelector/columnsSelector.tsx b/pkg/ui/workspaces/cluster-ui/src/columnsSelector/columnsSelector.tsx
index a731fdc76de5..f7a631778c90 100644
--- a/pkg/ui/workspaces/cluster-ui/src/columnsSelector/columnsSelector.tsx
+++ b/pkg/ui/workspaces/cluster-ui/src/columnsSelector/columnsSelector.tsx
@@ -36,6 +36,7 @@ export interface ColumnsSelectorProps {
   // options provides the list of available columns and their initial selection state
   options: SelectOption[];
   onSubmitColumns: (selectedColumns: string[]) => void;
+  size?: "default" | "small";
 }
 
 export interface ColumnsSelectorState {
@@ -222,6 +223,7 @@ export default class ColumnsSelector extends React.Component<
 
   render(): React.ReactElement {
     const { hide } = this.state;
+    const { size = "default" } = this.props;
     const dropdownArea = hide ? hidden : dropdown;
     const options = this.getOptions();
     const columnsSelected = options.filter(o => o.isSelected);
@@ -230,9 +232,9 @@ export default class ColumnsSelector extends React.Component<
       <div
         onClick={this.insideClick}
         ref={this.dropdownRef}
-        className={cx("float")}
+        className={cx("btn-area")}
       >
-        <Button type="secondary" size="small" onClick={this.toggleOpen}>
+        <Button type="secondary" size={size} onClick={this.toggleOpen}>
           <Gear className={cx("icon")} />
           Columns
         </Button>
diff --git a/pkg/ui/workspaces/cluster-ui/src/common/index.tsx b/pkg/ui/workspaces/cluster-ui/src/common/index.tsx
index 96ff5b297bb8..b4c1f2eddd0d 100644
--- a/pkg/ui/workspaces/cluster-ui/src/common/index.tsx
+++ b/pkg/ui/workspaces/cluster-ui/src/common/index.tsx
@@ -12,3 +12,31 @@ import classNames from "classnames/bind";
 import styles from "./styles.module.scss";
 
 export const commonStyles = classNames.bind(styles);
+
+export const selectCustomStyles = {
+  container: (provided: any) => ({
+    ...provided,
+    border: "none",
+  }),
+  option: (provided: any, state: any) => ({
+    ...provided,
+    backgroundColor: state.isSelected ? "#DEEBFF" : provided.backgroundColor,
+    color: "#394455",
+  }),
+  control: (provided: any) => ({
+    ...provided,
+    width: "100%",
+    borderColor: "#C0C6D9",
+  }),
+  dropdownIndicator: (provided: any) => ({
+    ...provided,
+    color: "#C0C6D9",
+  }),
+  singleValue: (provided: any) => ({
+    ...provided,
+    color: "#475872",
+  }),
+  indicatorSeparator: (provided: any) => ({
+    ...provided,
+  }),
+};
diff --git a/pkg/ui/workspaces/cluster-ui/src/common/styles.module.scss b/pkg/ui/workspaces/cluster-ui/src/common/styles.module.scss
index 87455380c909..db5965ad5de1 100644
--- a/pkg/ui/workspaces/cluster-ui/src/common/styles.module.scss
+++ b/pkg/ui/workspaces/cluster-ui/src/common/styles.module.scss
@@ -45,7 +45,16 @@ h3.base-heading {
   font-family: $font-family--semi-bold;
   font-style: normal;
   font-stretch: normal;
-  font-size: 20px;
+  font-size: $font-size--large;
+  padding-bottom: 12px;
+}
+
+h5.base-heading {
+  color: $colors--neutral-7;
+  font-family: $font-family--semi-bold;
+  font-style: normal;
+  font-stretch: normal;
+  font-size: $font-size--tall;
   padding-bottom: 12px;
 }
 
diff --git a/pkg/ui/workspaces/cluster-ui/src/insights/workloadInsights/statementInsights/statementInsightsView.tsx b/pkg/ui/workspaces/cluster-ui/src/insights/workloadInsights/statementInsights/statementInsightsView.tsx
index e886b361408f..872ecfbde489 100644
--- a/pkg/ui/workspaces/cluster-ui/src/insights/workloadInsights/statementInsights/statementInsightsView.tsx
+++ b/pkg/ui/workspaces/cluster-ui/src/insights/workloadInsights/statementInsights/statementInsightsView.tsx
@@ -292,6 +292,7 @@ export const StatementInsightsView: React.FC<StatementInsightsViewProps> = ({
                 <ColumnsSelector
                   options={tableColumns}
                   onSubmitColumns={onColumnsChange}
+                  size={"small"}
                 />
                 <TableStatistics
                   pagination={pagination}
diff --git a/pkg/ui/workspaces/cluster-ui/src/jobs/jobsPage/jobsPage.tsx b/pkg/ui/workspaces/cluster-ui/src/jobs/jobsPage/jobsPage.tsx
index b9528c3e6405..2dead1f7a2b8 100644
--- a/pkg/ui/workspaces/cluster-ui/src/jobs/jobsPage/jobsPage.tsx
+++ b/pkg/ui/workspaces/cluster-ui/src/jobs/jobsPage/jobsPage.tsx
@@ -325,6 +325,7 @@ export class JobsPage extends React.Component<JobsPageProps, PageState> {
                   <ColumnsSelector
                     options={tableColumns}
                     onSubmitColumns={onColumnsChange}
+                    size={"small"}
                   />
                   <div className={cx("jobs-table-summary")}>
                     <h4 className={cx("cl-count-title")}>
diff --git a/pkg/ui/workspaces/cluster-ui/src/pageConfig/pageConfig.tsx b/pkg/ui/workspaces/cluster-ui/src/pageConfig/pageConfig.tsx
index 031c72d14a95..5d039aa6dbd6 100644
--- a/pkg/ui/workspaces/cluster-ui/src/pageConfig/pageConfig.tsx
+++ b/pkg/ui/workspaces/cluster-ui/src/pageConfig/pageConfig.tsx
@@ -17,6 +17,7 @@ export interface PageConfigProps {
   layout?: "list" | "spread";
   children?: React.ReactNode;
   whiteBkg?: boolean;
+  className?: string;
 }
 
 const cx = classnames.bind(styles);
@@ -31,9 +32,9 @@ export function PageConfig(props: PageConfigProps): React.ReactElement {
 
   return (
     <div
-      className={cx("page-config", {
+      className={`${cx("page-config", {
         "page-config__white-background": whiteBkg,
-      })}
+      })} ${props.className}`}
     >
       <ul className={classes}>{props.children}</ul>
     </div>
diff --git a/pkg/ui/workspaces/cluster-ui/src/queryFilter/filter.module.scss b/pkg/ui/workspaces/cluster-ui/src/queryFilter/filter.module.scss
index 783f972f1d5d..4214ac610584 100644
--- a/pkg/ui/workspaces/cluster-ui/src/queryFilter/filter.module.scss
+++ b/pkg/ui/workspaces/cluster-ui/src/queryFilter/filter.module.scss
@@ -6,13 +6,13 @@ $dropdown-hover-color: darken($colors--background, 2.5%);
   font-family: $font-family--semi-bold;
   padding: 8px 0 8px 17px;
   vertical-align: middle;
-  border: 1px solid $colors--neutral-5;
+  border: 1px solid $colors--neutral-4;
   border-radius: 3px;
   white-space: nowrap;
   color: $colors--neutral-7;
   cursor: pointer;
   position: relative;
-  background: $colors--neutral-1;
+  background: white;
   display: flex;
   align-items: center;
   height: 40px;
diff --git a/pkg/ui/workspaces/cluster-ui/src/queryFilter/filter.tsx b/pkg/ui/workspaces/cluster-ui/src/queryFilter/filter.tsx
index 985e5fc3b62f..9dbea2a143f4 100644
--- a/pkg/ui/workspaces/cluster-ui/src/queryFilter/filter.tsx
+++ b/pkg/ui/workspaces/cluster-ui/src/queryFilter/filter.tsx
@@ -29,6 +29,7 @@ import {
 } from "./filterClasses";
 import { MultiSelectCheckbox } from "../multiSelectCheckbox/multiSelectCheckbox";
 import { syncHistory } from "../util";
+import { selectCustomStyles } from "../common";
 
 interface QueryFilter {
   onSubmitFilters: (filters: Filters) => void;
@@ -417,33 +418,7 @@ export class Filter extends React.Component<QueryFilter, FilterState> {
       showWorkloadInsightTypes,
     } = this.props;
     const dropdownArea = hide ? hidden : dropdown;
-    const customStyles = {
-      container: (provided: any) => ({
-        ...provided,
-        border: "none",
-      }),
-      option: (provided: any, state: any) => ({
-        ...provided,
-        backgroundColor: state.isSelected
-          ? "#DEEBFF"
-          : provided.backgroundColor,
-        color: "#394455",
-      }),
-      control: (provided: any) => ({
-        ...provided,
-        width: "100%",
-        borderColor: "#C0C6D9",
-      }),
-      dropdownIndicator: (provided: any) => ({
-        ...provided,
-        color: "#C0C6D9",
-      }),
-      singleValue: (provided: any) => ({
-        ...provided,
-        color: "#475872",
-      }),
-    };
-    const customStylesSmall = { ...customStyles };
+    const customStylesSmall = { ...selectCustomStyles };
     customStylesSmall.container = (provided: any) => ({
       ...provided,
       width: "141px",
diff --git a/pkg/ui/workspaces/cluster-ui/src/recentExecutions/recentStatementsSection.tsx b/pkg/ui/workspaces/cluster-ui/src/recentExecutions/recentStatementsSection.tsx
index d5d6938cbfc8..f69988949eff 100644
--- a/pkg/ui/workspaces/cluster-ui/src/recentExecutions/recentStatementsSection.tsx
+++ b/pkg/ui/workspaces/cluster-ui/src/recentExecutions/recentStatementsSection.tsx
@@ -83,6 +83,7 @@ export const RecentStatementsSection: React.FC<
         <ColumnsSelector
           options={tableColumns}
           onSubmitColumns={onColumnsSelect}
+          size={"small"}
         />
         <TableStatistics
           pagination={pagination}
diff --git a/pkg/ui/workspaces/cluster-ui/src/recentExecutions/recentTransactionsSection.tsx b/pkg/ui/workspaces/cluster-ui/src/recentExecutions/recentTransactionsSection.tsx
index 8c17547df108..4b35ad8d1a4f 100644
--- a/pkg/ui/workspaces/cluster-ui/src/recentExecutions/recentTransactionsSection.tsx
+++ b/pkg/ui/workspaces/cluster-ui/src/recentExecutions/recentTransactionsSection.tsx
@@ -83,6 +83,7 @@ export const RecentTransactionsSection: React.FC<
         <ColumnsSelector
           options={tableColumns}
           onSubmitColumns={onColumnsSelect}
+          size={"small"}
         />
         <TableStatistics
           pagination={pagination}
diff --git a/pkg/ui/workspaces/cluster-ui/src/searchCriteria/index.ts b/pkg/ui/workspaces/cluster-ui/src/searchCriteria/index.ts
new file mode 100644
index 000000000000..b45162ad446a
--- /dev/null
+++ b/pkg/ui/workspaces/cluster-ui/src/searchCriteria/index.ts
@@ -0,0 +1,11 @@
+// Copyright 2023 The Cockroach Authors.
+//
+// Use of this software is governed by the Business Source License
+// included in the file licenses/BSL.txt.
+//
+// As of the Change Date specified in that file, in accordance with
+// the Business Source License, use of this software will be governed
+// by the Apache License, Version 2.0, included in the file
+// licenses/APL.txt.
+
+export * from "./searchCriteria";
diff --git a/pkg/ui/workspaces/cluster-ui/src/searchCriteria/searchCriteria.module.scss b/pkg/ui/workspaces/cluster-ui/src/searchCriteria/searchCriteria.module.scss
new file mode 100644
index 000000000000..d5b7211c9169
--- /dev/null
+++ b/pkg/ui/workspaces/cluster-ui/src/searchCriteria/searchCriteria.module.scss
@@ -0,0 +1,29 @@
+@import "../core/index.module";
+
+.search-area {
+  border: 1px solid $colors--neutral-3;
+  border-radius: 3px;
+  margin-bottom: 10px;
+  margin-right: 10px;
+  padding: 20px;
+  background-color: white;
+}
+
+.top-area {
+  z-index: 5;
+  background-color: white;
+}
+
+.timescale-small {
+  width: 455px;
+}
+
+.label {
+  color: $colors--neutral-6;
+  font-family: $font-family--semi-bold;
+  font-size: $font-size--medium;
+}
+
+.margin-top-btn {
+  margin-top: 22px;
+}
diff --git a/pkg/ui/workspaces/cluster-ui/src/searchCriteria/searchCriteria.tsx b/pkg/ui/workspaces/cluster-ui/src/searchCriteria/searchCriteria.tsx
new file mode 100644
index 000000000000..bb7a83fc6224
--- /dev/null
+++ b/pkg/ui/workspaces/cluster-ui/src/searchCriteria/searchCriteria.tsx
@@ -0,0 +1,126 @@
+// Copyright 2021 The Cockroach Authors.
+//
+// Use of this software is governed by the Business Source License
+// included in the file licenses/BSL.txt.
+//
+// As of the Change Date specified in that file, in accordance with
+// the Business Source License, use of this software will be governed
+// by the Apache License, Version 2.0, included in the file
+// licenses/APL.txt.
+
+import React from "react";
+import classNames from "classnames/bind";
+import styles from "./searchCriteria.module.scss";
+import {
+  Button,
+  commonStyles,
+  PageConfig,
+  PageConfigItem,
+  selectCustomStyles,
+  TimeScale,
+  timeScale1hMinOptions,
+  TimeScaleDropdown,
+} from "src";
+import { applyBtn } from "../queryFilter/filterClasses";
+import Select from "react-select";
+import { limitOptions } from "../util/sqlActivityConstants";
+import { SqlStatsSortType } from "src/api/statementsApi";
+const cx = classNames.bind(styles);
+
+type SortOption = {
+  label: string;
+  value: SqlStatsSortType;
+};
+export interface SearchCriteriaProps {
+  sortOptions: SortOption[];
+  currentScale: TimeScale;
+  topValue: number;
+  byValue: SqlStatsSortType;
+  onChangeTimeScale: (ts: TimeScale) => void;
+  onChangeTop: (top: number) => void;
+  onChangeBy: (by: SqlStatsSortType) => void;
+  onApply: () => void;
+}
+
+export function SearchCriteria(props: SearchCriteriaProps): React.ReactElement {
+  const {
+    topValue,
+    byValue,
+    currentScale,
+    onChangeTop,
+    onChangeBy,
+    onChangeTimeScale,
+    sortOptions,
+  } = props;
+  const customStyles = { ...selectCustomStyles };
+  customStyles.indicatorSeparator = (provided: any) => ({
+    ...provided,
+    display: "none",
+  });
+
+  const customStylesTop = { ...customStyles };
+  customStylesTop.container = (provided: any) => ({
+    ...provided,
+    width: "80px",
+    border: "none",
+  });
+
+  const customStylesBy = { ...customStyles };
+  customStylesBy.container = (provided: any) => ({
+    ...provided,
+    width: "170px",
+    border: "none",
+  });
+
+  return (
+    <div className={cx("search-area")}>
+      <h5 className={commonStyles("base-heading")}>Search Criteria</h5>
+      <PageConfig className={cx("top-area")}>
+        <PageConfigItem>
+          <label>
+            <span className={cx("label")}>Top</span>
+            <Select
+              options={limitOptions}
+              value={limitOptions.filter(top => top.value === topValue)}
+              onChange={event => onChangeTop(event.value)}
+              styles={customStylesTop}
+            />
+          </label>
+        </PageConfigItem>
+        <PageConfigItem>
+          <label>
+            <span className={cx("label")}>By</span>
+            <Select
+              options={sortOptions}
+              value={sortOptions.filter(
+                (top: SortOption) => top.value === byValue,
+              )}
+              onChange={event => onChangeBy(event.value as SqlStatsSortType)}
+              styles={customStylesBy}
+            />
+          </label>
+        </PageConfigItem>
+        <PageConfigItem>
+          <label>
+            <span className={cx("label")}>Time Range</span>
+            <TimeScaleDropdown
+              options={timeScale1hMinOptions}
+              currentScale={currentScale}
+              setTimeScale={onChangeTimeScale}
+              className={cx("timescale-small")}
+            />
+          </label>
+        </PageConfigItem>
+        <PageConfigItem>
+          <Button
+            className={`${applyBtn.btn} ${cx("margin-top-btn")}`}
+            textAlign="center"
+            onClick={props.onApply}
+          >
+            Apply
+          </Button>
+        </PageConfigItem>
+      </PageConfig>
+    </div>
+  );
+}
diff --git a/pkg/ui/workspaces/cluster-ui/src/sessions/sessionsPage.tsx b/pkg/ui/workspaces/cluster-ui/src/sessions/sessionsPage.tsx
index daa11a6245db..600ecf18335e 100644
--- a/pkg/ui/workspaces/cluster-ui/src/sessions/sessionsPage.tsx
+++ b/pkg/ui/workspaces/cluster-ui/src/sessions/sessionsPage.tsx
@@ -403,6 +403,7 @@ export class SessionsPage extends React.Component<
               <ColumnsSelector
                 options={tableColumns}
                 onSubmitColumns={onColumnsChange}
+                size={"small"}
               />
               <TableStatistics
                 pagination={pagination}
diff --git a/pkg/ui/workspaces/cluster-ui/src/sqlActivity/clearStats.tsx b/pkg/ui/workspaces/cluster-ui/src/sqlActivity/clearStats.tsx
index 37e1ca91df9c..91679ee86a38 100644
--- a/pkg/ui/workspaces/cluster-ui/src/sqlActivity/clearStats.tsx
+++ b/pkg/ui/workspaces/cluster-ui/src/sqlActivity/clearStats.tsx
@@ -38,7 +38,7 @@ const ClearStats = (props: clearStatsProps): React.ReactElement => {
   return (
     <>
       <a className={cx("action", "separator")} onClick={showModal}>
-        reset SQL stats
+        Reset SQL Stats
       </a>
       <Modal
         visible={visible}
diff --git a/pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPage.module.scss b/pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPage.module.scss
index 077a8b425296..26c85c3de3b8 100644
--- a/pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPage.module.scss
+++ b/pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPage.module.scss
@@ -107,3 +107,19 @@ cl-table-container {
     text-decoration: underline;
   }
 }
+
+.filter-area {
+  height: 40px;
+}
+
+.float-right {
+  float: right;
+}
+
+.float-left {
+  float: left;
+}
+
+.margin-top {
+  margin-top: 20px;
+}
diff --git a/pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPage.tsx b/pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPage.tsx
index f0154651e580..96c393310317 100644
--- a/pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPage.tsx
+++ b/pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPage.tsx
@@ -22,7 +22,6 @@ import {
 } from "src/sortedtable";
 import { Search } from "src/search";
 import { Pagination } from "src/pagination";
-import { TableStatistics } from "../tableStatistics";
 import {
   calculateActiveFilters,
   defaultFilters,
@@ -66,7 +65,6 @@ import {
   getValidOption,
   TimeScale,
   timeScale1hMinOptions,
-  TimeScaleDropdown,
   timeScaleToString,
   toRoundedDateRange,
 } from "../timeScaleDropdown";
@@ -80,17 +78,18 @@ import {
   StatementDiagnosticsReport,
 } from "../api";
 import { filteredStatementsData } from "../sqlActivity/util";
-import { Dropdown } from "src/dropdown";
 import {
   STATS_LONG_LOADING_DURATION,
-  limitOptions,
   stmtRequestSortOptions,
   getSortLabel,
 } from "src/util/sqlActivityConstants";
 import { Button } from "src/button";
+import { SearchCriteria } from "src/searchCriteria/searchCriteria";
+import timeScaleStyles from "../timeScaleDropdown/timeScale.module.scss";
 
 const cx = classNames.bind(styles);
 const sortableTableCx = classNames.bind(sortableTableStyles);
+const timeScaleStylesCx = classNames.bind(timeScaleStyles);
 
 // Most of the props are supposed to be provided as connected props
 // from redux store.
@@ -211,7 +210,7 @@ export class StatementsPage extends React.Component<
     super(props);
     const defaultState = {
       pagination: {
-        pageSize: 20,
+        pageSize: 50,
         current: 1,
       },
       limit: this.props.limit,
@@ -478,7 +477,7 @@ export class StatementsPage extends React.Component<
     this.setState(prevState => ({ ...prevState, reqSortSetting: newSort }));
   };
 
-  renderStatements = (regions: string[]): React.ReactElement => {
+  renderStatements = (): React.ReactElement => {
     const { pagination, filters, activeFilters } = this.state;
     const {
       onSelectDiagnosticsReportDropdownOption,
@@ -490,6 +489,9 @@ export class StatementsPage extends React.Component<
       hasViewActivityRedactedRole,
       sortSetting,
       search,
+      apps,
+      databases,
+      hasAdminRole,
     } = this.props;
     const statements = this.props.statements ?? [];
     const data = filteredStatementsData(
@@ -499,8 +501,16 @@ export class StatementsPage extends React.Component<
       nodeRegions,
       isTenant,
     );
-    const totalCount = data.length;
     const isEmptySearchResults = statements?.length > 0 && search?.length > 0;
+    const nodes = Object.keys(nodeRegions)
+      .map(n => Number(n))
+      .sort();
+    const regions = unique(
+      isTenant
+        ? flatMap(statements, statement => statement.stats.regions)
+        : nodes.map(node => nodeRegions[node.toString()]),
+    ).sort();
+
     // If the cluster is a tenant cluster we don't show info
     // about nodes/regions.
     populateRegionNodeForStatements(statements, nodeRegions);
@@ -543,25 +553,78 @@ export class StatementsPage extends React.Component<
     );
 
     const period = timeScaleToString(this.props.timeScale);
+    const clearFilter = activeFilters ? (
+      <PageConfigItem>
+        <Button onClick={this.onClearFilters} type="flat" size="small">
+          clear filter
+        </Button>
+      </PageConfigItem>
+    ) : (
+      <></>
+    );
+
+    const sortSettingLabel = getSortLabel(this.props.reqSortSetting);
 
     return (
-      <div>
+      <>
+        <h5 className={`${commonStyles("base-heading")} ${cx("margin-top")}`}>
+          {`Results - Top ${this.props.limit} Statement Fingerprints by ${sortSettingLabel}`}
+        </h5>
+        <section className={cx("filter-area")}>
+          <PageConfig className={cx("float-left")}>
+            <PageConfigItem>
+              <Search
+                onSubmit={this.onSubmitSearchField}
+                onClear={this.onClearSearchField}
+                defaultValue={search}
+              />
+            </PageConfigItem>
+            <PageConfigItem>
+              <Filter
+                onSubmitFilters={this.onSubmitFilters}
+                appNames={apps}
+                dbNames={databases}
+                regions={regions}
+                nodes={nodes.map(n => "n" + n)}
+                activeFilters={activeFilters}
+                filters={filters}
+                showDB={true}
+                showSqlType={true}
+                showScan={true}
+                showRegions={regions.length > 1}
+                showNodes={!isTenant && nodes.length > 1}
+              />
+            </PageConfigItem>
+            <PageConfigItem>
+              <ColumnsSelector
+                options={tableColumns}
+                onSubmitColumns={onColumnsChange}
+              />
+            </PageConfigItem>
+            {clearFilter}
+          </PageConfig>
+          <PageConfig className={cx("float-right")}>
+            <PageConfigItem>
+              <p className={timeScaleStylesCx("time-label")}>
+                Showing aggregated stats from{" "}
+                <span className={timeScaleStylesCx("bold")}>{period}</span>
+              </p>
+            </PageConfigItem>
+            {hasAdminRole && (
+              <PageConfigItem
+                className={`${commonStyles("separator")} ${cx(
+                  "reset-btn-area",
+                )} `}
+              >
+                <ClearStats
+                  resetSQLStats={this.resetSQLStats}
+                  tooltipType="statement"
+                />
+              </PageConfigItem>
+            )}
+          </PageConfig>
+        </section>
         <section className={sortableTableCx("cl-table-container")}>
-          <div>
-            <ColumnsSelector
-              options={tableColumns}
-              onSubmitColumns={onColumnsChange}
-            />
-            <TableStatistics
-              pagination={pagination}
-              search={search}
-              totalCount={totalCount}
-              arrayItemName="statements"
-              activeFilters={activeFilters}
-              period={period}
-              onClearFilters={this.onClearFilters}
-            />
-          </div>
           <StatementsSortedTable
             className="statements-table"
             data={data}
@@ -583,7 +646,7 @@ export class StatementsPage extends React.Component<
           total={data.length}
           onChange={this.onChangePage}
         />
-      </div>
+      </>
     );
   };
 
@@ -592,27 +655,7 @@ export class StatementsPage extends React.Component<
       refreshStatementDiagnosticsRequests,
       onActivateStatementDiagnostics,
       onDiagnosticsModalOpen,
-      apps,
-      databases,
-      statements,
-      search,
-      isTenant,
-      nodeRegions,
-      hasAdminRole,
     } = this.props;
-
-    const nodes = Object.keys(nodeRegions)
-      .map(n => Number(n))
-      .sort();
-
-    const regions = unique(
-      isTenant
-        ? flatMap(statements, statement => statement.stats.regions)
-        : nodes.map(node => nodeRegions[node.toString()]),
-    ).sort();
-
-    const { filters, activeFilters } = this.state;
-
     const longLoadingMessage = (
       <Delayed delay={STATS_LONG_LOADING_DURATION}>
         <InlineAlert
@@ -624,74 +667,22 @@ export class StatementsPage extends React.Component<
 
     return (
       <div className={cx("root")}>
-        <PageConfig>
-          <PageConfigItem>
-            <Search
-              onSubmit={this.onSubmitSearchField}
-              onClear={this.onClearSearchField}
-              defaultValue={search}
-            />
-          </PageConfigItem>
-          <PageConfigItem>
-            <Filter
-              onSubmitFilters={this.onSubmitFilters}
-              appNames={apps}
-              dbNames={databases}
-              regions={regions}
-              nodes={nodes.map(n => "n" + n)}
-              activeFilters={activeFilters}
-              filters={filters}
-              showDB={true}
-              showSqlType={true}
-              showScan={true}
-              showRegions={regions.length > 1}
-              showNodes={!isTenant && nodes.length > 1}
-            />
-          </PageConfigItem>
-          <PageConfigItem className={commonStyles("separator")}>
-            <Dropdown items={limitOptions} onChange={this.onChangeLimit}>
-              Limit: {this.state.limit ?? "N/A"}
-            </Dropdown>
-          </PageConfigItem>
-          <PageConfigItem>
-            <Dropdown
-              items={stmtRequestSortOptions}
-              onChange={this.onChangeReqSort}
-            >
-              Sort By: {getSortLabel(this.state.reqSortSetting)}
-            </Dropdown>
-          </PageConfigItem>
-          <PageConfigItem>
-            <TimeScaleDropdown
-              options={timeScale1hMinOptions}
-              currentScale={this.state.timeScale}
-              setTimeScale={this.changeTimeScale}
-            />
-          </PageConfigItem>
-          <PageConfigItem>
-            <Button size="small" onClick={this.updateRequestParams}>
-              Submit Request
-            </Button>
-          </PageConfigItem>
-          {hasAdminRole && (
-            <PageConfigItem
-              className={`${commonStyles("separator")} ${cx(
-                "reset-btn-area",
-              )} `}
-            >
-              <ClearStats
-                resetSQLStats={this.resetSQLStats}
-                tooltipType="statement"
-              />
-            </PageConfigItem>
-          )}
-        </PageConfig>
+        <SearchCriteria
+          sortOptions={stmtRequestSortOptions}
+          topValue={this.state.limit}
+          byValue={this.state.reqSortSetting}
+          currentScale={this.state.timeScale}
+          onChangeTop={this.onChangeLimit}
+          onChangeBy={this.onChangeReqSort}
+          onChangeTimeScale={this.changeTimeScale}
+          onApply={this.updateRequestParams}
+        />
         <div className={cx("table-area")}>
           <Loading
             loading={this.props.isReqInFlight}
             page={"statements"}
             error={this.props.statementsError}
-            render={() => this.renderStatements(regions)}
+            render={() => this.renderStatements()}
             renderError={() =>
               LoadingError({
                 statsType: "statements",
diff --git a/pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPageConnected.tsx b/pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPageConnected.tsx
index de992ed57230..2373eed7ab79 100644
--- a/pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPageConnected.tsx
+++ b/pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPageConnected.tsx
@@ -53,7 +53,7 @@ import {
   selectHasAdminRole,
 } from "../store/uiConfig";
 import { nodeRegionsByIDSelector } from "../store/nodes";
-import { SqlStatsSortType, StatementsRequest } from "src/api/statementsApi";
+import { StatementsRequest } from "src/api/statementsApi";
 import { TimeScale } from "../timeScaleDropdown";
 import {
   StatementsPageRoot,
@@ -70,6 +70,7 @@ import {
 import {
   InsertStmtDiagnosticRequest,
   StatementDiagnosticsReport,
+  SqlStatsSortType,
 } from "../api";
 
 type StateProps = {
diff --git a/pkg/ui/workspaces/cluster-ui/src/timeScaleDropdown/rangeSelector.module.scss b/pkg/ui/workspaces/cluster-ui/src/timeScaleDropdown/rangeSelector.module.scss
index 68995838ab96..bdd17bc20200 100644
--- a/pkg/ui/workspaces/cluster-ui/src/timeScaleDropdown/rangeSelector.module.scss
+++ b/pkg/ui/workspaces/cluster-ui/src/timeScaleDropdown/rangeSelector.module.scss
@@ -31,7 +31,7 @@
   width: 100%;
 
   .trigger-button {
-    width: 423px;
+    min-width: 285px;
     height: fit-content;
   }
 }
diff --git a/pkg/ui/workspaces/cluster-ui/src/timeScaleDropdown/timeScaleDropdown.tsx b/pkg/ui/workspaces/cluster-ui/src/timeScaleDropdown/timeScaleDropdown.tsx
index 6ae0a4031a24..46be340fd099 100644
--- a/pkg/ui/workspaces/cluster-ui/src/timeScaleDropdown/timeScaleDropdown.tsx
+++ b/pkg/ui/workspaces/cluster-ui/src/timeScaleDropdown/timeScaleDropdown.tsx
@@ -40,6 +40,7 @@ export interface TimeScaleDropdownProps {
     timeWindow: TimeWindow,
   ) => TimeScale;
   hasCustomOption?: boolean;
+  className?: string;
 }
 
 export const getTimeLabel = (
@@ -129,6 +130,7 @@ export const TimeScaleDropdown: React.FC<TimeScaleDropdownProps> = ({
   setTimeScale,
   adjustTimeScaleOnChange,
   hasCustomOption = true,
+  className,
 }): React.ReactElement => {
   const end = currentScale.fixedWindowEnd
     ? moment.utc(currentScale.fixedWindowEnd)
@@ -253,7 +255,7 @@ export const TimeScaleDropdown: React.FC<TimeScaleDropdownProps> = ({
   };
 
   return (
-    <div className={cx("timescale")}>
+    <div className={`${cx("timescale")} ${className}`}>
       <RangeSelect
         selected={formatRangeSelectSelected(currentWindow, currentScale)}
         onPresetOptionSelect={onPresetOptionSelect}
diff --git a/pkg/ui/workspaces/cluster-ui/src/transactionsPage/transactionsPage.tsx b/pkg/ui/workspaces/cluster-ui/src/transactionsPage/transactionsPage.tsx
index a6356442f2e8..8adb048972d3 100644
--- a/pkg/ui/workspaces/cluster-ui/src/transactionsPage/transactionsPage.tsx
+++ b/pkg/ui/workspaces/cluster-ui/src/transactionsPage/transactionsPage.tsx
@@ -25,7 +25,6 @@ import {
   updateSortSettingQueryParamsOnTab,
 } from "../sortedtable";
 import { Pagination } from "../pagination";
-import { TableStatistics } from "../tableStatistics";
 import { statisticsClasses } from "./transactionsPageClasses";
 import {
   aggregateAcrossNodeIDs,
@@ -51,8 +50,8 @@ import {
 } from "../queryFilter";
 import { UIConfigState } from "../store";
 import {
-  createCombinedStmtsRequest,
   SqlStatsSortType,
+  createCombinedStmtsRequest,
   StatementsRequest,
 } from "src/api/statementsApi";
 import ColumnsSelector from "../columnsSelector/columnsSelector";
@@ -65,7 +64,6 @@ import ClearStats from "../sqlActivity/clearStats";
 import LoadingError from "../sqlActivity/errorComponent";
 import { commonStyles } from "../common";
 import {
-  TimeScaleDropdown,
   TimeScale,
   timeScaleToString,
   timeScale1hMinOptions,
@@ -76,18 +74,19 @@ import { InlineAlert } from "@cockroachlabs/ui-components";
 import { TransactionViewType } from "./transactionsPageTypes";
 import { isSelectedColumn } from "../columnsSelector/utils";
 import moment from "moment";
-import { Dropdown } from "src/dropdown";
 import {
   STATS_LONG_LOADING_DURATION,
-  getSortLabel,
-  limitOptions,
   txnRequestSortOptions,
+  getSortLabel,
 } from "src/util/sqlActivityConstants";
 import { Button } from "src/button";
+import { SearchCriteria } from "src/searchCriteria/searchCriteria";
+import timeScaleStyles from "../timeScaleDropdown/timeScale.module.scss";
 
 type IStatementsResponse = protos.cockroach.server.serverpb.IStatementsResponse;
 
 const cx = classNames.bind(styles);
+const timeScaleStylesCx = classNames.bind(timeScaleStyles);
 
 interface TState {
   filters?: Filters;
@@ -110,7 +109,6 @@ export interface TransactionsPageStateProps {
   filters: Filters;
   isTenant?: UIConfigState["isTenant"];
   nodeRegions: { [nodeId: string]: string };
-  pageSize?: number;
   search: string;
   sortSetting: SortSetting;
   hasAdminRole?: UIConfigState["hasAdminRole"];
@@ -161,7 +159,7 @@ export class TransactionsPage extends React.Component<
       timeScale: this.props.timeScale,
       reqSortSetting: this.props.reqSortSetting,
       pagination: {
-        pageSize: this.props.pageSize || 20,
+        pageSize: 50,
         current: 1,
       },
     };
@@ -398,7 +396,7 @@ export class TransactionsPage extends React.Component<
     this.refreshData();
   };
 
-  render(): React.ReactElement {
+  renderTransactions(): React.ReactElement {
     const {
       data,
       nodeRegions,
@@ -409,19 +407,9 @@ export class TransactionsPage extends React.Component<
       search,
       hasAdminRole,
     } = this.props;
+    const { pagination, filters } = this.state;
     const internal_app_name_prefix = data?.internal_app_name_prefix || "";
     const statements = data?.statements || [];
-    const { filters } = this.state;
-
-    const nodes = Object.keys(nodeRegions)
-      .map(n => Number(n))
-      .sort();
-
-    const regions = unique(
-      isTenant
-        ? flatMap(statements, statement => statement.stats.regions)
-        : nodes.map(node => nodeRegions[node.toString()]),
-    ).sort();
 
     // We apply the search filters and app name filters prior to aggregating across Node IDs
     // in order to match what's done on the Statements Page.
@@ -443,6 +431,154 @@ export class TransactionsPage extends React.Component<
       internal_app_name_prefix,
     );
 
+    const transactionsToDisplay: TransactionInfo[] = aggregateAcrossNodeIDs(
+      filteredTransactions,
+      statements,
+    ).map(t => ({
+      stats_data: t.stats_data,
+      node_id: t.node_id,
+      regions: generateRegion(t, statements),
+      regionNodes: generateRegionNode(t, statements, nodeRegions),
+    }));
+    const { current, pageSize } = pagination;
+    const hasData = data?.transactions?.length > 0;
+    const isUsedFilter = search?.length > 0;
+
+    const nodes = Object.keys(nodeRegions)
+      .map(n => Number(n))
+      .sort();
+
+    const regions = unique(
+      isTenant
+        ? flatMap(statements, statement => statement.stats.regions)
+        : nodes.map(node => nodeRegions[node.toString()]),
+    ).sort();
+
+    // Creates a list of all possible columns,
+    // hiding nodeRegions if is not multi-region and
+    // hiding columns that won't be displayed for tenants.
+    const columns = makeTransactionsColumns(
+      transactionsToDisplay,
+      statements,
+      isTenant,
+      search,
+    )
+      .filter(c => !(c.name === "regions" && regions.length < 2))
+      .filter(c => !(c.name === "regionNodes" && regions.length < 2))
+      .filter(c => !(isTenant && c.hideIfTenant));
+
+    // Iterate over all available columns and create list of SelectOptions with initial selection
+    // values based on stored user selections in local storage and default column configs.
+    // Columns that are set to alwaysShow are filtered from the list.
+    const tableColumns = columns
+      .filter(c => !c.alwaysShow)
+      .map(
+        (c): SelectOption => ({
+          label: getLabel(c.name as StatisticTableColumnKeys, "transaction"),
+          value: c.name,
+          isSelected: isSelectedColumn(userSelectedColumnsToShow, c),
+        }),
+      );
+
+    // List of all columns that will be displayed based on the column selection.
+    const displayColumns = columns.filter(c =>
+      isSelectedColumn(userSelectedColumnsToShow, c),
+    );
+
+    const period = timeScaleToString(this.props.timeScale);
+    const clearFilter = activeFilters ? (
+      <PageConfigItem>
+        <Button onClick={this.onClearFilters} type="flat" size="small">
+          clear filter
+        </Button>
+      </PageConfigItem>
+    ) : (
+      <></>
+    );
+
+    const sortSettingLabel = getSortLabel(this.props.reqSortSetting);
+    return (
+      <>
+        <h5 className={`${commonStyles("base-heading")} ${cx("margin-top")}`}>
+          {`Results - Top ${this.props.limit} Transaction Fingerprints by ${sortSettingLabel}`}
+        </h5>
+        <section className={cx("filter-area")}>
+          <PageConfig className={cx("float-left")}>
+            <PageConfigItem>
+              <Search
+                onSubmit={this.onSubmitSearchField}
+                onClear={this.onClearSearchField}
+                defaultValue={search}
+              />
+            </PageConfigItem>
+            <PageConfigItem>
+              <Filter
+                onSubmitFilters={this.onSubmitFilters}
+                appNames={appNames}
+                regions={regions}
+                timeLabel={"Transaction fingerprint"}
+                nodes={nodes.map(n => "n" + n)}
+                activeFilters={activeFilters}
+                filters={filters}
+                showRegions={regions.length > 1}
+                showNodes={!isTenant && nodes.length > 1}
+              />
+            </PageConfigItem>
+            <PageConfigItem>
+              <ColumnsSelector
+                options={tableColumns}
+                onSubmitColumns={onColumnsChange}
+              />
+            </PageConfigItem>
+            {clearFilter}
+          </PageConfig>
+          <PageConfig className={cx("float-right")}>
+            <PageConfigItem>
+              <p className={timeScaleStylesCx("time-label")}>
+                Showing aggregated stats from{" "}
+                <span className={timeScaleStylesCx("bold")}>{period}</span>
+              </p>
+            </PageConfigItem>
+            {hasAdminRole && (
+              <PageConfigItem
+                className={`${commonStyles("separator")} ${cx(
+                  "reset-btn-area",
+                )} `}
+              >
+                <ClearStats
+                  resetSQLStats={this.resetSQLStats}
+                  tooltipType="statement"
+                />
+              </PageConfigItem>
+            )}
+          </PageConfig>
+        </section>
+        <section className={statisticsClasses.tableContainerClass}>
+          <TransactionsTable
+            columns={displayColumns}
+            transactions={transactionsToDisplay}
+            sortSetting={sortSetting}
+            onChangeSortSetting={this.onChangeSortSetting}
+            pagination={pagination}
+            renderNoResult={
+              <EmptyTransactionsPlaceholder
+                transactionView={TransactionViewType.FINGERPRINTS}
+                isEmptySearchResults={hasData && isUsedFilter}
+              />
+            }
+          />
+        </section>
+        <Pagination
+          pageSize={pageSize}
+          current={current}
+          total={transactionsToDisplay.length}
+          onChange={this.onChangePage}
+        />
+      </>
+    );
+  }
+
+  render(): React.ReactElement {
     const longLoadingMessage = (
       <Delayed delay={STATS_LONG_LOADING_DURATION}>
         <InlineAlert
@@ -454,157 +590,22 @@ export class TransactionsPage extends React.Component<
 
     return (
       <>
-        <PageConfig>
-          <PageConfigItem>
-            <Search
-              onSubmit={this.onSubmitSearchField}
-              onClear={this.onClearSearchField}
-              defaultValue={search}
-              placeholder={"Search Transactions"}
-            />
-          </PageConfigItem>
-          <PageConfigItem>
-            <Filter
-              onSubmitFilters={this.onSubmitFilters}
-              appNames={appNames}
-              regions={regions}
-              timeLabel={"Transaction fingerprint"}
-              nodes={nodes.map(n => "n" + n)}
-              activeFilters={activeFilters}
-              filters={filters}
-              showRegions={regions.length > 1}
-              showNodes={!isTenant && nodes.length > 1}
-            />
-          </PageConfigItem>
-          <PageConfigItem className={commonStyles("separator")}>
-            <Dropdown items={limitOptions} onChange={this.onChangeLimit}>
-              Limit: {this.state.limit ?? "N/A"}
-            </Dropdown>
-          </PageConfigItem>
-          <PageConfigItem>
-            <Dropdown
-              items={txnRequestSortOptions}
-              onChange={this.onChangeReqSort}
-            >
-              Sort By: {getSortLabel(this.state.reqSortSetting)}
-            </Dropdown>
-          </PageConfigItem>
-          <PageConfigItem className={commonStyles("separator")}>
-            <TimeScaleDropdown
-              options={timeScale1hMinOptions}
-              currentScale={this.state.timeScale}
-              setTimeScale={this.changeTimeScale}
-            />
-          </PageConfigItem>
-          <PageConfigItem>
-            <Button size="small" onClick={this.updateRequestParams}>
-              Submit Request
-            </Button>
-          </PageConfigItem>
-          {hasAdminRole && (
-            <PageConfigItem>
-              <ClearStats
-                resetSQLStats={this.resetSQLStats}
-                tooltipType="transaction"
-              />
-            </PageConfigItem>
-          )}
-        </PageConfig>
+        <SearchCriteria
+          sortOptions={txnRequestSortOptions}
+          topValue={this.state.limit}
+          byValue={this.state.reqSortSetting}
+          currentScale={this.state.timeScale}
+          onChangeTop={this.onChangeLimit}
+          onChangeBy={this.onChangeReqSort}
+          onChangeTimeScale={this.changeTimeScale}
+          onApply={this.updateRequestParams}
+        />
         <div className={cx("table-area")}>
           <Loading
             loading={this.props.isReqInFlight}
             page={"transactions"}
             error={this.props?.error}
-            render={() => {
-              const { pagination } = this.state;
-              const transactionsToDisplay: TransactionInfo[] =
-                aggregateAcrossNodeIDs(filteredTransactions, statements).map(
-                  t => ({
-                    stats_data: t.stats_data,
-                    node_id: t.node_id,
-                    regions: generateRegion(t, statements),
-                    regionNodes: generateRegionNode(t, statements, nodeRegions),
-                  }),
-                );
-              const { current, pageSize } = pagination;
-              const hasData = data?.transactions?.length > 0;
-              const isUsedFilter = search?.length > 0;
-
-              // Creates a list of all possible columns,
-              // hiding nodeRegions if is not multi-region and
-              // hiding columns that won't be displayed for tenants.
-              const columns = makeTransactionsColumns(
-                transactionsToDisplay,
-                statements,
-                isTenant,
-                search,
-              )
-                .filter(c => !(c.name === "regions" && regions.length < 2))
-                .filter(c => !(c.name === "regionNodes" && regions.length < 2))
-                .filter(c => !(isTenant && c.hideIfTenant));
-
-              // Iterate over all available columns and create list of SelectOptions with initial selection
-              // values based on stored user selections in local storage and default column configs.
-              // Columns that are set to alwaysShow are filtered from the list.
-              const tableColumns = columns
-                .filter(c => !c.alwaysShow)
-                .map(
-                  (c): SelectOption => ({
-                    label: getLabel(
-                      c.name as StatisticTableColumnKeys,
-                      "transaction",
-                    ),
-                    value: c.name,
-                    isSelected: isSelectedColumn(userSelectedColumnsToShow, c),
-                  }),
-                );
-
-              // List of all columns that will be displayed based on the column selection.
-              const displayColumns = columns.filter(c =>
-                isSelectedColumn(userSelectedColumnsToShow, c),
-              );
-
-              const period = timeScaleToString(this.props.timeScale);
-
-              return (
-                <>
-                  <section className={statisticsClasses.tableContainerClass}>
-                    <ColumnsSelector
-                      options={tableColumns}
-                      onSubmitColumns={onColumnsChange}
-                    />
-                    <TableStatistics
-                      pagination={pagination}
-                      search={search}
-                      totalCount={transactionsToDisplay.length}
-                      arrayItemName="transactions"
-                      activeFilters={activeFilters}
-                      period={period}
-                      onClearFilters={this.onClearFilters}
-                    />
-                    <TransactionsTable
-                      columns={displayColumns}
-                      transactions={transactionsToDisplay}
-                      sortSetting={sortSetting}
-                      onChangeSortSetting={this.onChangeSortSetting}
-                      pagination={pagination}
-                      renderNoResult={
-                        <EmptyTransactionsPlaceholder
-                          transactionView={TransactionViewType.FINGERPRINTS}
-                          isEmptySearchResults={hasData && isUsedFilter}
-                        />
-                      }
-                    />
-                  </section>
-                  <Pagination
-                    pageSize={pageSize}
-                    current={current}
-                    total={transactionsToDisplay.length}
-                    onChange={this.onChangePage}
-                  />
-                </>
-              );
-            }}
+            render={() => this.renderTransactions()}
             renderError={() =>
               LoadingError({
                 statsType: "transactions",
diff --git a/pkg/ui/workspaces/cluster-ui/src/util/sqlActivityConstants.ts b/pkg/ui/workspaces/cluster-ui/src/util/sqlActivityConstants.ts
index 326892ba6c9c..9f9a3d002230 100644
--- a/pkg/ui/workspaces/cluster-ui/src/util/sqlActivityConstants.ts
+++ b/pkg/ui/workspaces/cluster-ui/src/util/sqlActivityConstants.ts
@@ -13,10 +13,10 @@ import { TimeScale } from "../timeScaleDropdown";
 import { SqlStatsSortOptions, SqlStatsSortType } from "../api/statementsApi";
 
 export const limitOptions = [
-  { value: 100, name: "100" },
-  { value: 200, name: "200" },
-  { value: 500, name: "500" },
-  { value: 1000, name: "1000" },
+  { value: 100, label: "100" },
+  { value: 200, label: "200" },
+  { value: 500, label: "500" },
+  { value: 1000, label: "1000" },
 ];
 
 export function getSortLabel(sort: SqlStatsSortType): string {
@@ -40,8 +40,8 @@ export function getSortLabel(sort: SqlStatsSortType): string {
 
 export const stmtRequestSortOptions = Object.values(SqlStatsSortOptions).map(
   sortVal => ({
-    value: sortVal,
-    name: getSortLabel(sortVal as SqlStatsSortType),
+    value: sortVal as SqlStatsSortType,
+    label: getSortLabel(sortVal as SqlStatsSortType),
   }),
 );