diff --git a/pkg/ui/workspaces/cluster-ui/src/queryFilter/filter.tsx b/pkg/ui/workspaces/cluster-ui/src/queryFilter/filter.tsx
index 6c1fc126be61..c5c172254ccc 100644
--- a/pkg/ui/workspaces/cluster-ui/src/queryFilter/filter.tsx
+++ b/pkg/ui/workspaces/cluster-ui/src/queryFilter/filter.tsx
@@ -29,7 +29,7 @@ import { MultiSelectCheckbox } from "../multiSelectCheckbox/multiSelectCheckbox"
 interface QueryFilter {
   onSubmitFilters: (filters: Filters) => void;
   smth?: string;
-  appNames: SelectOptions[];
+  appNames: string[];
   activeFilters: number;
   filters: Filters;
   dbNames?: string[];
@@ -69,7 +69,7 @@ const timeUnit = [
 ];
 
 export const defaultFilters: Filters = {
-  app: "All",
+  app: "",
   timeNumber: "0",
   timeUnit: "seconds",
   fullScan: false,
@@ -116,7 +116,7 @@ export const getFiltersFromQueryString = (
  * we want to consider 0 active Filters
  */
 export const inactiveFiltersState: Filters = {
-  app: "All",
+  app: "",
   timeNumber: "0",
   fullScan: false,
   sqlType: "",
@@ -289,6 +289,27 @@ export class Filter extends React.Component<QueryFilter, FilterState> {
       border: "none",
     });
 
+    const appsOptions = appNames.map(app => ({
+      label: app,
+      value: app,
+      isSelected: this.isOptionSelected(app, filters.app),
+    }));
+    const appValue = appsOptions.filter(option => {
+      return filters.app.split(",").includes(option.label);
+    });
+    const appFilter = (
+      <div>
+        <div className={filterLabel.margin}>App</div>
+        <MultiSelectCheckbox
+          options={appsOptions}
+          placeholder="All"
+          field="app"
+          parent={this}
+          value={appValue}
+        />
+      </div>
+    );
+
     const databasesOptions = showDB
       ? dbNames.map(db => ({
           label: db,
@@ -413,14 +434,6 @@ export class Filter extends React.Component<QueryFilter, FilterState> {
     );
     // TODO replace all onChange actions in Selects and Checkboxes with one onSubmit in <form />
 
-    // Some app names could be empty strings, so we're adding " " to those names,
-    // this way it's easier for the user to recognize the blank name.
-    const apps = appNames.map(app => {
-      const label =
-        app.label.trim().length === 0 ? '"' + app.label + '"' : app.label;
-      return { label: label, value: app.value };
-    });
-
     return (
       <div onClick={this.insideClick} ref={this.dropdownRef}>
         <div className={dropdownButton} onClick={this.toggleFilters}>
@@ -429,14 +442,7 @@ export class Filter extends React.Component<QueryFilter, FilterState> {
         </div>
         <div className={dropdownArea}>
           <div className={dropdownContentWrapper}>
-            <div className={filterLabel.top}>App</div>
-            <Select
-              options={apps}
-              onChange={e => this.handleSelectChange(e, "app")}
-              value={apps.filter(app => app.value === filters.app)}
-              placeholder="All"
-              styles={customStyles}
-            />
+            {appFilter}
             {showDB ? dbFilter : ""}
             {showSqlType ? sqlTypeFilter : ""}
             {showRegions ? regionsFilter : ""}
diff --git a/pkg/ui/workspaces/cluster-ui/src/statementDetails/statementDetails.selectors.ts b/pkg/ui/workspaces/cluster-ui/src/statementDetails/statementDetails.selectors.ts
index c21d5433c39f..e8547877d46d 100644
--- a/pkg/ui/workspaces/cluster-ui/src/statementDetails/statementDetails.selectors.ts
+++ b/pkg/ui/workspaces/cluster-ui/src/statementDetails/statementDetails.selectors.ts
@@ -105,8 +105,13 @@ function filterByRouterParamsPredicate(
 ): (stat: ExecutionStatistics) => boolean {
   const statement = getMatchParamByName(match, statementAttr);
   const implicitTxn = getMatchParamByName(match, implicitTxnAttr) === "true";
-  const database = queryByName(location, databaseAttr);
-  let app = queryByName(location, appAttr);
+  const database =
+    queryByName(location, databaseAttr) === "(unset)"
+      ? ""
+      : queryByName(location, databaseAttr);
+  const apps = queryByName(location, appAttr)
+    ? queryByName(location, appAttr).split(",")
+    : null;
   // If the aggregatedTs is unset, we will aggregate across the current date range.
   const aggregatedTs = queryByName(location, aggregatedTsAttr);
   const aggInterval = queryByName(location, aggregationIntervalAttr);
@@ -119,20 +124,21 @@ function filterByRouterParamsPredicate(
     stmt.implicit_txn === implicitTxn &&
     (stmt.database === database || database === null);
 
-  if (!app) {
+  if (!apps) {
     return filterByKeys;
   }
-
-  if (app === "(unset)") {
-    app = "";
+  if (apps.includes("(unset)")) {
+    apps.push("");
   }
-
-  if (app === internalAppNamePrefix) {
-    return (stmt: ExecutionStatistics) =>
-      filterByKeys(stmt) && stmt.app.startsWith(internalAppNamePrefix);
+  let showInternal = false;
+  if (apps.includes(internalAppNamePrefix)) {
+    showInternal = true;
   }
 
-  return (stmt: ExecutionStatistics) => filterByKeys(stmt) && stmt.app === app;
+  return (stmt: ExecutionStatistics) =>
+    filterByKeys(stmt) &&
+    ((showInternal && stmt.app.startsWith(internalAppNamePrefix)) ||
+      apps.includes(stmt.app));
 }
 
 export const selectStatement = createSelector(
diff --git a/pkg/ui/workspaces/cluster-ui/src/statementDetails/statementDetails.tsx b/pkg/ui/workspaces/cluster-ui/src/statementDetails/statementDetails.tsx
index 18ac90562766..989573eb806e 100644
--- a/pkg/ui/workspaces/cluster-ui/src/statementDetails/statementDetails.tsx
+++ b/pkg/ui/workspaces/cluster-ui/src/statementDetails/statementDetails.tsx
@@ -176,7 +176,7 @@ function statementsRequestFromProps(
 
 function AppLink(props: { app: string }) {
   if (!props.app) {
-    return <span className={cx("app-name", "app-name__unset")}>(unset)</span>;
+    return <Text className={cx("app-name", "app-name__unset")}>(unset)</Text>;
   }
 
   const searchParams = new URLSearchParams({ [appAttr]: props.app });
@@ -184,7 +184,7 @@ function AppLink(props: { app: string }) {
   return (
     <Link
       className={cx("app-name")}
-      to={`/statements/?${searchParams.toString()}`}
+      to={`/sql-activity?tab=statements&${searchParams.toString()}`}
     >
       {props.app}
     </Link>
@@ -542,6 +542,12 @@ export class StatementDetails extends React.Component<
             .utc()
         : this.props.dateRange[1];
 
+    const db = database ? (
+      <Text>{database}</Text>
+    ) : (
+      <Text className={cx("app-name", "app-name__unset")}>(unset)</Text>
+    );
+
     return (
       <Tabs
         defaultActiveKey="1"
@@ -700,7 +706,7 @@ export class StatementDetails extends React.Component<
 
                 <div className={summaryCardStylesCx("summary--card__item")}>
                   <Text>Database</Text>
-                  <Text>{database}</Text>
+                  {db}
                 </div>
                 <p
                   className={summaryCardStylesCx(
diff --git a/pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPage.selectors.ts b/pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPage.selectors.ts
index 88fb8b3ed74b..86744b98aa4a 100644
--- a/pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPage.selectors.ts
+++ b/pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPage.selectors.ts
@@ -105,7 +105,9 @@ export const selectDatabases = createSelector(
 
     return Array.from(
       new Set(
-        statementsState.data.statements.map(s => s.key.key_data.database),
+        statementsState.data.statements.map(s =>
+          s.key.key_data.database ? s.key.key_data.database : "(unset)",
+        ),
       ),
     ).filter((dbName: string) => dbName !== null && dbName.length > 0);
   },
@@ -153,17 +155,19 @@ export const selectStatements = createSelector(
       statement.app.startsWith(state.data.internal_app_name_prefix);
 
     if (app && app !== "All") {
-      let criteria = decodeURIComponent(app);
+      const criteria = decodeURIComponent(app).split(",");
       let showInternal = false;
-      if (criteria === "(unset)") {
-        criteria = "";
-      } else if (criteria === state.data.internal_app_name_prefix) {
+      if (criteria.includes(state.data.internal_app_name_prefix)) {
         showInternal = true;
       }
+      if (criteria.includes("(unset)")) {
+        criteria.push("");
+      }
 
       statements = statements.filter(
         (statement: ExecutionStatistics) =>
-          (showInternal && isInternal(statement)) || statement.app === criteria,
+          (showInternal && isInternal(statement)) ||
+          criteria.includes(statement.app),
       );
     }
 
diff --git a/pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPage.tsx b/pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPage.tsx
index b9be2351ca80..0e10ca6bb1c7 100644
--- a/pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPage.tsx
+++ b/pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPage.tsx
@@ -339,6 +339,9 @@ export class StatementsPage extends React.Component<
         : [];
     const databases =
       filters.database.length > 0 ? filters.database.split(",") : [];
+    if (databases.includes("(unset)")) {
+      databases.push("");
+    }
     const regions =
       filters.regions.length > 0 ? filters.regions.split(",") : [];
     const nodes = filters.nodes.length > 0 ? filters.nodes.split(",") : [];
@@ -409,6 +412,7 @@ export class StatementsPage extends React.Component<
     const { pagination, search, filters, activeFilters } = this.state;
     const {
       statements,
+      apps,
       databases,
       location,
       onDiagnosticsReportDownload,
@@ -421,8 +425,6 @@ export class StatementsPage extends React.Component<
     } = this.props;
     const appAttrValue = queryByName(location, appAttr);
     const selectedApp = appAttrValue || "";
-    const appOptions = [{ value: "", label: "All" }];
-    this.props.apps.forEach(app => appOptions.push({ value: app, label: app }));
     const data = this.filteredStatementsData();
     const totalWorkload = calculateTotalWorkload(data);
     const totalCount = data.length;
@@ -495,7 +497,7 @@ export class StatementsPage extends React.Component<
           <PageConfigItem>
             <Filter
               onSubmitFilters={this.onSubmitFilters}
-              appNames={appOptions}
+              appNames={apps}
               dbNames={databases}
               regions={regions}
               nodes={nodes.map(n => "n" + n)}
diff --git a/pkg/ui/workspaces/cluster-ui/src/statementsTable/statementsTableContent.tsx b/pkg/ui/workspaces/cluster-ui/src/statementsTable/statementsTableContent.tsx
index 8aad0e689a72..50473ace8bd4 100644
--- a/pkg/ui/workspaces/cluster-ui/src/statementsTable/statementsTableContent.tsx
+++ b/pkg/ui/workspaces/cluster-ui/src/statementsTable/statementsTableContent.tsx
@@ -46,7 +46,7 @@ export const StatementTableCell = {
     search?: string,
     selectedApp?: string,
     onStatementClick?: (statement: string) => void,
-  ) => (stmt: any) => (
+  ) => (stmt: AggregateStatistics): React.ReactElement => (
     <StatementLink
       statement={stmt.label}
       statementSummary={stmt.summary}
@@ -62,7 +62,7 @@ export const StatementTableCell = {
   diagnostics: (
     activateDiagnosticsRef: React.RefObject<ActivateDiagnosticsModalRef>,
     onDiagnosticsDownload: (report: IStatementDiagnosticsReport) => void = noop,
-  ) => (stmt: AggregateStatistics) => {
+  ) => (stmt: AggregateStatistics): React.ReactElement => {
     /*
      * Diagnostics cell might display different components depending
      * on following states:
@@ -127,7 +127,9 @@ export const StatementTableCell = {
       </div>
     );
   },
-  nodeLink: (nodeNames: NodeNames) => (stmt: any) => (
+  nodeLink: (nodeNames: NodeNames) => (
+    stmt: AggregateStatistics,
+  ): React.ReactElement => (
     <NodeLink nodeId={stmt.label} nodeNames={nodeNames} />
   ),
 };
@@ -229,7 +231,10 @@ export const StatementLink = ({
   );
 };
 
-export const NodeLink = (props: { nodeId: string; nodeNames?: NodeNames }) => (
+export const NodeLink = (props: {
+  nodeId: string;
+  nodeNames?: NodeNames;
+}): React.ReactElement => (
   <Link to={`/node/${props.nodeId}`}>
     <div className={cx("node-name-tooltip__info-icon")}>
       {props.nodeNames ? props.nodeNames[props.nodeId] : "N" + props.nodeId}
diff --git a/pkg/ui/workspaces/cluster-ui/src/transactionsPage/utils.spec.ts b/pkg/ui/workspaces/cluster-ui/src/transactionsPage/utils.spec.ts
index dbae89d874b5..3d04aa7491e5 100644
--- a/pkg/ui/workspaces/cluster-ui/src/transactionsPage/utils.spec.ts
+++ b/pkg/ui/workspaces/cluster-ui/src/transactionsPage/utils.spec.ts
@@ -14,7 +14,7 @@ import {
   getStatementsByFingerprintIdAndTime,
   statementFingerprintIdsToText,
 } from "./utils";
-import { Filters } from "../queryFilter/filter";
+import { Filters } from "../queryFilter";
 import { data, nodeRegions, timestamp } from "./transactions.fixture";
 import Long from "long";
 import * as protos from "@cockroachlabs/crdb-protobuf-client";
@@ -46,7 +46,7 @@ const txData = (data.transactions as any) as Transaction[];
 describe("Filter transactions", () => {
   it("show all if no filters applied", () => {
     const filter: Filters = {
-      app: "All",
+      app: "",
       timeNumber: "0",
       timeUnit: "seconds",
       nodes: "",
@@ -107,6 +107,27 @@ describe("Filter transactions", () => {
     );
   });
 
+  it("filters by 2 apps", () => {
+    const filter: Filters = {
+      app: "$ TEST EXACT,$ TEST",
+      timeNumber: "0",
+      timeUnit: "seconds",
+      nodes: "",
+      regions: "",
+    };
+    assert.equal(
+      filterTransactions(
+        txData,
+        filter,
+        "$ internal",
+        data.statements,
+        nodeRegions,
+        false,
+      ).transactions.length,
+      4,
+    );
+  });
+
   it("filters by internal prefix", () => {
     const filter: Filters = {
       app: data.internal_app_name_prefix,
@@ -130,7 +151,7 @@ describe("Filter transactions", () => {
 
   it("filters by time", () => {
     const filter: Filters = {
-      app: "All",
+      app: "",
       timeNumber: "40",
       timeUnit: "miliseconds",
       nodes: "",
@@ -151,7 +172,7 @@ describe("Filter transactions", () => {
 
   it("filters by one node", () => {
     const filter: Filters = {
-      app: "All",
+      app: "",
       timeNumber: "0",
       timeUnit: "seconds",
       nodes: "n1",
@@ -172,7 +193,7 @@ describe("Filter transactions", () => {
 
   it("filters by multiple nodes", () => {
     const filter: Filters = {
-      app: "All",
+      app: "",
       timeNumber: "0",
       timeUnit: "seconds",
       nodes: "n2,n4",
@@ -193,7 +214,7 @@ describe("Filter transactions", () => {
 
   it("filters by one region", () => {
     const filter: Filters = {
-      app: "All",
+      app: "",
       timeNumber: "0",
       timeUnit: "seconds",
       nodes: "",
@@ -214,7 +235,7 @@ describe("Filter transactions", () => {
 
   it("filters by multiple regions", () => {
     const filter: Filters = {
-      app: "All",
+      app: "",
       timeNumber: "0",
       timeUnit: "seconds",
       nodes: "",
diff --git a/pkg/ui/workspaces/cluster-ui/src/transactionsPage/utils.ts b/pkg/ui/workspaces/cluster-ui/src/transactionsPage/utils.ts
index a6dc063dfcc1..8bd0d19027f9 100644
--- a/pkg/ui/workspaces/cluster-ui/src/transactionsPage/utils.ts
+++ b/pkg/ui/workspaces/cluster-ui/src/transactionsPage/utils.ts
@@ -11,7 +11,6 @@
 import * as protos from "@cockroachlabs/crdb-protobuf-client";
 import {
   Filters,
-  SelectOptions,
   getTimeValueInSeconds,
   calculateActiveFilters,
 } from "../queryFilter";
@@ -38,20 +37,15 @@ type Timestamp = protos.google.protobuf.ITimestamp;
 export const getTrxAppFilterOptions = (
   transactions: Transaction[],
   prefix: string,
-): SelectOptions[] => {
-  const defaultAppFilters = ["All", prefix];
+): string[] => {
+  const defaultAppFilters = [prefix];
   const uniqueAppNames = new Set(
     transactions
       .filter(t => !t.stats_data.app.startsWith(prefix))
-      .map(t => t.stats_data.app),
+      .map(t => (t.stats_data.app ? t.stats_data.app : "(unset)")),
   );
 
-  return defaultAppFilters
-    .concat(Array.from(uniqueAppNames))
-    .map(filterValue => ({
-      label: filterValue,
-      value: filterValue,
-    }));
+  return defaultAppFilters.concat(Array.from(uniqueAppNames));
 };
 
 export const collectStatementsText = (statements: Statement[]): string =>
@@ -149,13 +143,25 @@ export const filterTransactions = (
   // transaction must match all selected filters.
   // Current filters: app, service latency, nodes and regions.
   const filteredTransactions = data
-    .filter(
-      (t: Transaction) =>
-        filters.app === "All" ||
+    .filter((t: Transaction) => {
+      const isInternal = (t: Transaction) =>
+        t.stats_data.app.startsWith(internalAppNamePrefix);
+      const apps = filters.app.split(",");
+      let showInternal = false;
+      if (apps.includes(internalAppNamePrefix)) {
+        showInternal = true;
+      }
+      if (apps.includes("(unset)")) {
+        apps.push("");
+      }
+
+      return (
+        filters.app === "" ||
+        (showInternal && isInternal(t)) ||
         t.stats_data.app === filters.app ||
-        (filters.app === internalAppNamePrefix &&
-          t.stats_data.app.includes(filters.app)),
-    )
+        apps.includes(t.stats_data.app)
+      );
+    })
     .filter(
       (t: Transaction) =>
         t.stats_data.stats.service_lat.mean >= timeValue ||
diff --git a/pkg/ui/workspaces/db-console/src/views/statements/statementDetails.tsx b/pkg/ui/workspaces/db-console/src/views/statements/statementDetails.tsx
index d07be26275d8..dd55477110aa 100644
--- a/pkg/ui/workspaces/db-console/src/views/statements/statementDetails.tsx
+++ b/pkg/ui/workspaces/db-console/src/views/statements/statementDetails.tsx
@@ -139,8 +139,13 @@ function filterByRouterParamsPredicate(
 ): (stat: ExecutionStatistics) => boolean {
   const statement = getMatchParamByName(match, statementAttr);
   const implicitTxn = getMatchParamByName(match, implicitTxnAttr) === "true";
-  const database = queryByName(location, databaseAttr);
-  let app = queryByName(location, appAttr);
+  const database =
+    queryByName(location, databaseAttr) === "(unset)"
+      ? ""
+      : queryByName(location, databaseAttr);
+  const apps = queryByName(location, appAttr)
+    ? queryByName(location, appAttr).split(",")
+    : null;
   // If the aggregatedTs is unset, we will aggregate across the current date range.
   const aggregatedTs = queryByName(location, aggregatedTsAttr);
   const aggInterval = queryByName(location, aggregationIntervalAttr);
@@ -153,20 +158,21 @@ function filterByRouterParamsPredicate(
     stmt.implicit_txn === implicitTxn &&
     (stmt.database === database || database === null);
 
-  if (!app) {
+  if (!apps) {
     return filterByKeys;
   }
-
-  if (app === "(unset)") {
-    app = "";
+  if (apps.includes("(unset)")) {
+    apps.push("");
   }
-
-  if (app === internalAppNamePrefix) {
-    return (stmt: ExecutionStatistics) =>
-      filterByKeys(stmt) && stmt.app.startsWith(internalAppNamePrefix);
+  let showInternal = false;
+  if (apps.includes(internalAppNamePrefix)) {
+    showInternal = true;
   }
 
-  return (stmt: ExecutionStatistics) => filterByKeys(stmt) && stmt.app === app;
+  return (stmt: ExecutionStatistics) =>
+    filterByKeys(stmt) &&
+    ((showInternal && stmt.app.startsWith(internalAppNamePrefix)) ||
+      apps.includes(stmt.app));
 }
 
 export const selectStatement = createSelector(
@@ -174,7 +180,6 @@ export const selectStatement = createSelector(
   (_state: AdminUIState, props: RouteComponentProps) => props,
   (statementsState, props) => {
     const statements = statementsState.data?.statements;
-
     if (!statements) {
       return null;
     }
diff --git a/pkg/ui/workspaces/db-console/src/views/statements/statementsPage.tsx b/pkg/ui/workspaces/db-console/src/views/statements/statementsPage.tsx
index 10914b1a7beb..9d05834fdc1e 100644
--- a/pkg/ui/workspaces/db-console/src/views/statements/statementsPage.tsx
+++ b/pkg/ui/workspaces/db-console/src/views/statements/statementsPage.tsx
@@ -86,17 +86,19 @@ export const selectStatements = createSelector(
       statement.app.startsWith(state.data.internal_app_name_prefix);
 
     if (app && app !== "All") {
-      let criteria = decodeURIComponent(app);
+      const criteria = decodeURIComponent(app).split(",");
       let showInternal = false;
-      if (criteria === "(unset)") {
-        criteria = "";
-      } else if (criteria === state.data.internal_app_name_prefix) {
+      if (criteria.includes(state.data.internal_app_name_prefix)) {
         showInternal = true;
       }
+      if (criteria.includes("(unset)")) {
+        criteria.push("");
+      }
 
       statements = statements.filter(
         (statement: ExecutionStatistics) =>
-          (showInternal && isInternal(statement)) || statement.app === criteria,
+          (showInternal && isInternal(statement)) ||
+          criteria.includes(statement.app),
       );
     }
 
@@ -181,7 +183,11 @@ export const selectDatabases = createSelector(
       return [];
     }
     return Array.from(
-      new Set(state.data.statements.map(s => s.key.key_data.database)),
+      new Set(
+        state.data.statements.map(s =>
+          s.key.key_data.database ? s.key.key_data.database : "(unset)",
+        ),
+      ),
     ).filter((dbName: string) => dbName !== null && dbName.length > 0);
   },
 );