diff --git a/src/app/Rules/CreateRule.tsx b/src/app/Rules/CreateRule.tsx
index 8195f13e8..be8cbe3da 100644
--- a/src/app/Rules/CreateRule.tsx
+++ b/src/app/Rules/CreateRule.tsx
@@ -45,9 +45,9 @@ import { SelectTemplateSelectorForm } from '@app/Shared/SelectTemplateSelectorFo
 import { TemplateType } from '@app/Shared/Services/Api.service';
 import { ServiceContext } from '@app/Shared/Services/Services';
 import { Target } from '@app/Shared/Services/Target.service';
-import { SearchExprService, SearchExprServiceContext } from '@app/Topology/Shared/utils';
+import { SearchExprService, SearchExprServiceContext, useExprSvc } from '@app/Topology/Shared/utils';
 import { useSubscriptions } from '@app/utils/useSubscriptions';
-import { evaluateTargetWithExpr, portalRoot } from '@app/utils/utils';
+import { portalRoot } from '@app/utils/utils';
 import {
   ActionGroup,
   Button,
@@ -74,8 +74,8 @@ import { HelpIcon } from '@patternfly/react-icons';
 import _ from 'lodash';
 import * as React from 'react';
 import { useHistory, withRouter } from 'react-router-dom';
-import { forkJoin, iif, of, Subject } from 'rxjs';
-import { catchError, debounceTime, map, switchMap } from 'rxjs/operators';
+import { combineLatest, forkJoin, iif, of, Subject } from 'rxjs';
+import { catchError, debounceTime, map, switchMap, tap } from 'rxjs/operators';
 import { Rule } from './Rules';
 
 // FIXME check if this is correct/matches backend name validation
@@ -87,9 +87,11 @@ const CreateRuleForm: React.FC<CreateRuleFormProps> = ({ ...props }) => {
   const context = React.useContext(ServiceContext);
   const notifications = React.useContext(NotificationsContext);
   const history = useHistory();
-  // Note: Do not use useSearchExpression(). This causes the cursor to jump to the end due to async updates.
-  const matchExprService = React.useContext(SearchExprServiceContext);
-  const [matchExpression, setMatchExpression] = React.useState('');
+  // Do not use useSearchExpression hook for display.
+  // This causes the cursor to jump to the end due to async updates.
+  const matchExprService = useExprSvc();
+  // Use this for displaying match expression input
+  const [matchExpressionInput, setMatchExpressionInput] = React.useState('');
   const addSubscription = useSubscriptions();
 
   const [name, setName] = React.useState('');
@@ -109,10 +111,10 @@ const CreateRuleForm: React.FC<CreateRuleFormProps> = ({ ...props }) => {
   const [initialDelayUnits, setInitialDelayUnits] = React.useState(1);
   const [preservedArchives, setPreservedArchives] = React.useState(0);
   const [loading, setLoading] = React.useState(false);
-  const [targets, setTargets] = React.useState<Target[]>([]);
+  const [evaluating, setEvaluating] = React.useState(false);
+  const [sampleTarget, setSampleTarget] = React.useState<Target>();
 
   const matchedTargetsRef = React.useRef(new Subject<Target[]>());
-  const matchedTargets = matchedTargetsRef.current;
 
   const handleNameChange = React.useCallback(
     (name) => {
@@ -198,7 +200,7 @@ const CreateRuleForm: React.FC<CreateRuleFormProps> = ({ ...props }) => {
       name,
       description,
       enabled,
-      matchExpression,
+      matchExpression: matchExpressionInput,
       eventSpecifier: eventSpecifierString,
       archivalPeriodSeconds: archivalPeriod * archivalPeriodUnits,
       initialDelaySeconds: initialDelay * initialDelayUnits,
@@ -224,7 +226,7 @@ const CreateRuleForm: React.FC<CreateRuleFormProps> = ({ ...props }) => {
     nameValid,
     description,
     enabled,
-    matchExpression,
+    matchExpressionInput,
     eventSpecifierString,
     archivalPeriod,
     archivalPeriodUnits,
@@ -238,6 +240,7 @@ const CreateRuleForm: React.FC<CreateRuleFormProps> = ({ ...props }) => {
   ]);
 
   React.useEffect(() => {
+    const matchedTargets = matchedTargetsRef.current;
     addSubscription(
       matchedTargets
         .pipe(
@@ -274,38 +277,58 @@ const CreateRuleForm: React.FC<CreateRuleFormProps> = ({ ...props }) => {
         .subscribe((templates) => {
           setTemplates(templates);
           setTemplate((old) => {
-            const matched = templates.find((t) => t.name === old.name && t.type === t.type);
+            const matched = templates.find((t) => t.name === old.name && t.type === old.type);
             return matched ? { name: matched.name, type: matched.type } : {};
           });
         })
     );
-  }, [addSubscription, context.api, matchedTargets]);
+  }, [addSubscription, context.api]);
 
   React.useEffect(() => {
-    addSubscription(context.targets.targets().subscribe(setTargets));
-  }, [addSubscription, context.targets, setTargets]);
-
-  React.useEffect(() => {
-    // Set validations
-    let validation: ValidatedOptions = ValidatedOptions.default;
-    let matches: Target[] = [];
-    if (matchExpression !== '' && targets.length > 0) {
-      try {
-        matches = targets.filter((t) => {
-          const res = evaluateTargetWithExpr(t, matchExpression);
-          if (typeof res === 'boolean') {
-            return res;
-          }
-          throw new Error('The expression matching failed.');
-        });
-        validation = matches.length ? ValidatedOptions.success : ValidatedOptions.warning;
-      } catch (err) {
-        validation = ValidatedOptions.error;
-      }
-    }
-    setMatchExpressionValid(validation);
-    matchedTargets.next(matches);
-  }, [matchExpression, targets, matchedTargets, setMatchExpressionValid]);
+    const matchedTargets = matchedTargetsRef.current;
+    addSubscription(
+      combineLatest([
+        matchExprService.searchExpression({
+          immediateFn: () => {
+            setEvaluating(true);
+            setMatchExpressionValid(ValidatedOptions.default);
+          },
+        }),
+        context.targets.targets().pipe(tap((ts) => setSampleTarget(ts[0]))),
+      ])
+        .pipe(
+          switchMap(([input, targets]) =>
+            input
+              ? context.api.matchTargetsWithExpr(input, targets).pipe(
+                  map((ts) => [ts, undefined]),
+                  catchError((err) => of([[], err]))
+                )
+              : of([undefined, undefined])
+          )
+        )
+        .subscribe(([ts, err]) => {
+          setEvaluating(false);
+          setMatchExpressionValid(
+            err
+              ? ValidatedOptions.error
+              : !ts
+              ? ValidatedOptions.default
+              : ts.length
+              ? ValidatedOptions.success
+              : ValidatedOptions.warning
+          );
+          matchedTargets.next(ts || []);
+        })
+    );
+  }, [
+    matchExprService,
+    context.api,
+    context.targets,
+    setSampleTarget,
+    setMatchExpressionValid,
+    setEvaluating,
+    addSubscription,
+  ]);
 
   const createButtonLoadingProps = React.useMemo(
     () =>
@@ -379,7 +402,7 @@ const CreateRuleForm: React.FC<CreateRuleFormProps> = ({ ...props }) => {
             bodyContent={
               <>
                 Try an expression like:
-                <MatchExpressionHint target={targets[0]} />
+                <MatchExpressionHint target={sampleTarget} />
               </>
             }
             hasAutoWidth
@@ -398,7 +421,9 @@ const CreateRuleForm: React.FC<CreateRuleFormProps> = ({ ...props }) => {
         isRequired
         fieldId="rule-matchexpr"
         helperText={
-          matchExpressionValid === ValidatedOptions.warning
+          evaluating
+            ? 'Evaluating match expression...'
+            : matchExpressionValid === ValidatedOptions.warning
             ? `Warning: Match expression matches no targets.`
             : `
   Enter a match expression. This is a Java-like code snippet that is evaluated against each target
@@ -409,7 +434,7 @@ const CreateRuleForm: React.FC<CreateRuleFormProps> = ({ ...props }) => {
         data-quickstart-id="rule-matchexpr"
       >
         <TextArea
-          value={matchExpression}
+          value={matchExpressionInput}
           isDisabled={loading}
           isRequired
           type="text"
@@ -418,7 +443,7 @@ const CreateRuleForm: React.FC<CreateRuleFormProps> = ({ ...props }) => {
           resizeOrientation="vertical"
           autoResize
           onChange={(value) => {
-            setMatchExpression(value);
+            setMatchExpressionInput(value);
             matchExprService.setSearchExpression(value);
           }}
           validated={matchExpressionValid}
@@ -612,7 +637,11 @@ enabled in the future.`}
           variant="primary"
           onClick={handleSubmit}
           isDisabled={
-            loading || nameValid !== ValidatedOptions.success || !template.name || !template.type || !matchExpression
+            loading ||
+            nameValid !== ValidatedOptions.success ||
+            !template.name ||
+            !template.type ||
+            !matchExpressionInput
           }
           data-quickstart-id="rule-create-btn"
           {...createButtonLoadingProps}
diff --git a/src/app/SecurityPanel/Credentials/CreateCredentialModal.tsx b/src/app/SecurityPanel/Credentials/CreateCredentialModal.tsx
index 01f581df5..0fde2e814 100644
--- a/src/app/SecurityPanel/Credentials/CreateCredentialModal.tsx
+++ b/src/app/SecurityPanel/Credentials/CreateCredentialModal.tsx
@@ -40,9 +40,9 @@ import { MatchExpressionHint } from '@app/Shared/MatchExpression/MatchExpression
 import { MatchExpressionVisualizer } from '@app/Shared/MatchExpression/MatchExpressionVisualizer';
 import { ServiceContext } from '@app/Shared/Services/Services';
 import { Target } from '@app/Shared/Services/Target.service';
-import { SearchExprService, SearchExprServiceContext } from '@app/Topology/Shared/utils';
+import { SearchExprService, SearchExprServiceContext, useExprSvc } from '@app/Topology/Shared/utils';
 import { useSubscriptions } from '@app/utils/useSubscriptions';
-import { evaluateTargetWithExpr, portalRoot, StreamOf } from '@app/utils/utils';
+import { portalRoot, StreamOf } from '@app/utils/utils';
 import {
   Button,
   Card,
@@ -62,7 +62,7 @@ import {
 } from '@patternfly/react-core';
 import { FlaskIcon, HelpIcon, TopologyIcon } from '@patternfly/react-icons';
 import * as React from 'react';
-import { distinctUntilChanged, interval, map } from 'rxjs';
+import { catchError, combineLatest, distinctUntilChanged, interval, map, of, switchMap, tap } from 'rxjs';
 import { CredentialTestTable } from './CredentialTestTable';
 import { CredentialContext, TestPoolContext, TestRequest, useAuthCredential } from './utils';
 
@@ -140,21 +140,22 @@ interface AuthFormProps extends Omit<CreateCredentialModalProps, 'visible'> {
 export const AuthForm: React.FC<AuthFormProps> = ({ onDismiss, onPropsSave, progressChange, ...props }) => {
   const context = React.useContext(ServiceContext);
   const addSubscription = useSubscriptions();
-  const matchExprService = React.useContext(SearchExprServiceContext);
-  const [matchExpression, setMatchExpression] = React.useState('');
+  const matchExprService = useExprSvc();
+  const [matchExpressionInput, setMatchExpressionInput] = React.useState('');
   const [matchExpressionValid, setMatchExpressionValid] = React.useState(ValidatedOptions.default);
   const [_, setCredential] = useAuthCredential(true);
   const testPool = React.useContext(TestPoolContext);
   const [saving, setSaving] = React.useState(false);
   const [isDisabled, setIsDisabled] = React.useState(false);
+  const [evaluating, setEvaluating] = React.useState(false);
 
-  const [targets, setTargets] = React.useState<Target[]>([]);
+  const [sampleTarget, setSampleTarget] = React.useState<Target>();
 
   const onSave = React.useCallback(
     (username: string, password: string) => {
       setSaving(true);
       addSubscription(
-        context.api.postCredentials(matchExpression, username, password).subscribe((ok) => {
+        context.api.postCredentials(matchExpressionInput, username, password).subscribe((ok) => {
           setSaving(false);
           if (ok) {
             onPropsSave();
@@ -162,31 +163,52 @@ export const AuthForm: React.FC<AuthFormProps> = ({ onDismiss, onPropsSave, prog
         })
       );
     },
-    [addSubscription, onPropsSave, context.api, matchExpression, setSaving]
+    [addSubscription, onPropsSave, context.api, matchExpressionInput, setSaving]
   );
 
   React.useEffect(() => {
-    addSubscription(context.targets.targets().subscribe(setTargets));
-  }, [addSubscription, context.targets, setTargets]);
-
-  React.useEffect(() => {
-    let validation: ValidatedOptions = ValidatedOptions.default;
-    if (matchExpression !== '' && targets.length > 0) {
-      try {
-        const atLeastOne = targets.some((t) => {
-          const res = evaluateTargetWithExpr(t, matchExpression);
-          if (typeof res === 'boolean') {
-            return res;
-          }
-          throw new Error('The expression matching failed.');
-        });
-        validation = atLeastOne ? ValidatedOptions.success : ValidatedOptions.warning;
-      } catch (err) {
-        validation = ValidatedOptions.error;
-      }
-    }
-    setMatchExpressionValid(validation);
-  }, [matchExpression, targets, setMatchExpressionValid]);
+    addSubscription(
+      combineLatest([
+        matchExprService.searchExpression({
+          immediateFn: (_) => {
+            setEvaluating(true);
+            setMatchExpressionValid(ValidatedOptions.default);
+          },
+        }),
+        context.targets.targets().pipe(tap((ts) => setSampleTarget(ts[0]))),
+      ])
+        .pipe(
+          switchMap(([input, targets]) =>
+            input
+              ? context.api.matchTargetsWithExpr(input, targets).pipe(
+                  map((ts) => [ts, undefined]),
+                  catchError((err) => of([[], err]))
+                )
+              : of([undefined, undefined])
+          )
+        )
+        .subscribe(([ts, err]) => {
+          setEvaluating(false);
+          setMatchExpressionValid(
+            err
+              ? ValidatedOptions.error
+              : !ts
+              ? ValidatedOptions.default
+              : ts.length
+              ? ValidatedOptions.success
+              : ValidatedOptions.warning
+          );
+        })
+    );
+  }, [
+    matchExprService,
+    context.api,
+    context.targets,
+    setSampleTarget,
+    setMatchExpressionValid,
+    setEvaluating,
+    addSubscription,
+  ]);
 
   React.useEffect(() => {
     progressChange && progressChange(saving);
@@ -224,7 +246,7 @@ export const AuthForm: React.FC<AuthFormProps> = ({ onDismiss, onPropsSave, prog
             bodyContent={
               <>
                 Try an expression like:
-                <MatchExpressionHint target={targets[0]} />
+                <MatchExpressionHint target={sampleTarget} />
               </>
             }
             hasAutoWidth
@@ -242,24 +264,26 @@ export const AuthForm: React.FC<AuthFormProps> = ({ onDismiss, onPropsSave, prog
         isRequired
         fieldId="match-expression"
         helperText={
-          matchExpressionValid === ValidatedOptions.warning
+          evaluating
+            ? 'Evaluating match expression...'
+            : matchExpressionValid === ValidatedOptions.warning
             ? `Warning: Match expression matches no targets.`
             : `
         Enter a match expression. This is a Java-like code snippet that is evaluated against each target
         application to determine whether the rule should be applied.`
         }
-        helperTextInvalid="IThe expression matching failed."
+        helperTextInvalid="The expression matching failed."
         validated={matchExpressionValid}
       >
         <TextArea
-          value={matchExpression}
+          value={matchExpressionInput}
           isDisabled={isDisabled}
           isRequired
           type="text"
           id="rule-matchexpr"
           aria-describedby="rule-matchexpr-helper"
           onChange={(v) => {
-            setMatchExpression(v);
+            setMatchExpressionInput(v);
             matchExprService.setSearchExpression(v);
           }}
           validated={matchExpressionValid}
diff --git a/src/app/SecurityPanel/Credentials/CredentialTestTable.tsx b/src/app/SecurityPanel/Credentials/CredentialTestTable.tsx
index 1af8577df..a9705e3ef 100644
--- a/src/app/SecurityPanel/Credentials/CredentialTestTable.tsx
+++ b/src/app/SecurityPanel/Credentials/CredentialTestTable.tsx
@@ -35,13 +35,14 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+import { LoadingView } from '@app/LoadingView/LoadingView';
 import { LinearDotSpinner } from '@app/Shared/LinearDotSpinner';
 import { ServiceContext } from '@app/Shared/Services/Services';
 import { Target } from '@app/Shared/Services/Target.service';
-import { useSearchExpression } from '@app/Topology/Shared/utils';
+import { useExprSvc } from '@app/Topology/Shared/utils';
 import { useSort } from '@app/utils/useSort';
 import { useSubscriptions } from '@app/utils/useSubscriptions';
-import { TableColumn, evaluateTargetWithExpr, portalRoot, sortResources } from '@app/utils/utils';
+import { TableColumn, portalRoot, sortResources } from '@app/utils/utils';
 import {
   Bullseye,
   Button,
@@ -77,6 +78,7 @@ import {
   Tr,
 } from '@patternfly/react-table';
 import * as React from 'react';
+import { catchError, combineLatest, of, switchMap, tap } from 'rxjs';
 import { TestPoolContext, useAuthCredential } from './utils';
 
 const tableColumns: TableColumn[] = [
@@ -100,46 +102,47 @@ export interface CredentialTestTableProps {}
 export const CredentialTestTable: React.FC<CredentialTestTableProps> = ({ ...props }) => {
   const addSubscription = useSubscriptions();
   const context = React.useContext(ServiceContext);
-  const [matchExpression] = useSearchExpression();
+  const matchExprService = useExprSvc();
   const [sortBy, getSortParams] = useSort();
 
-  const [targets, setTargets] = React.useState<Target[]>([]);
+  const [matchedExpr, setMatchExpr] = React.useState('');
+  const [matchedTargets, setMatchedTargets] = React.useState<Target[]>([]);
   const [filters, setFilters] = React.useState<CredentialTestState[]>([]);
   const [searchText, setSearchText] = React.useState('');
+  const [loading, setLoading] = React.useState(false);
 
   React.useEffect(() => {
-    addSubscription(context.targets.targets().subscribe(setTargets));
-  }, [addSubscription, context.targets, setTargets]);
-
-  const matchedTargets = React.useMemo(() => {
-    try {
-      return targets.filter((t) => {
-        const res = evaluateTargetWithExpr(t, matchExpression);
-        if (typeof res === 'boolean') {
-          return res;
-        }
-        throw new Error('Invalid match expression');
-      });
-    } catch (err) {
-      return [];
-    }
-  }, [targets, matchExpression]);
+    addSubscription(
+      combineLatest([
+        matchExprService.searchExpression().pipe(tap((exp) => setMatchExpr(exp))),
+        context.targets.targets(),
+      ])
+        .pipe(
+          tap(() => setLoading(true)),
+          switchMap(([input, targets]) =>
+            input ? context.api.matchTargetsWithExpr(input, targets).pipe(catchError((_) => of([]))) : of([])
+          )
+        )
+        .subscribe((ts) => {
+          setLoading(false);
+          setMatchedTargets(ts);
+        })
+    );
+  }, [matchExprService, context.api, context.targets, setMatchedTargets, setLoading, addSubscription]);
 
-  const rows = React.useMemo(
-    () =>
-      sortResources(
-        {
-          index: sortBy.index ?? 0,
-          direction: sortBy.direction ?? SortByDirection.asc,
-        },
-        matchedTargets,
-        tableColumns
-      ).map((t) => <CredentialTestRow target={t} key={t.connectUrl} filters={filters} searchText={searchText} />),
-    [matchedTargets, filters, searchText, sortBy]
-  );
+  const rows = React.useMemo(() => {
+    return sortResources(
+      {
+        index: sortBy.index ?? 0,
+        direction: sortBy.direction ?? SortByDirection.asc,
+      },
+      matchedTargets,
+      tableColumns
+    ).map((t) => <CredentialTestRow target={t} key={t.connectUrl} filters={filters} searchText={searchText} />);
+  }, [matchedTargets, filters, searchText, sortBy]);
 
-  const toolbar = React.useMemo(
-    () => (
+  const toolbar = React.useMemo(() => {
+    return (
       <CredentialToolbar
         onFilter={setFilters}
         onSearch={setSearchText}
@@ -147,11 +150,12 @@ export const CredentialTestTable: React.FC<CredentialTestTableProps> = ({ ...pro
         searchText={searchText}
         matchedTargets={matchedTargets}
       />
-    ),
-    [setFilters, setSearchText, filters, searchText, matchedTargets]
-  );
+    );
+  }, [setFilters, setSearchText, filters, searchText, matchedTargets]);
 
-  return rows.length ? (
+  return loading ? (
+    <LoadingView />
+  ) : rows.length ? (
     <OuterScrollContainer>
       {toolbar}
       <InnerScrollContainer>
@@ -176,7 +180,7 @@ export const CredentialTestTable: React.FC<CredentialTestTableProps> = ({ ...pro
           No Targets Matched
         </Title>
         <EmptyStateBody>{`${
-          matchExpression === '' ? 'Enter another' : 'Clear'
+          matchedExpr === '' ? 'Enter another' : 'Clear'
         } Match Expression and try again.`}</EmptyStateBody>
       </EmptyState>
     </Bullseye>
diff --git a/src/app/SecurityPanel/Credentials/StoreCredentials.tsx b/src/app/SecurityPanel/Credentials/StoreCredentials.tsx
index 68714c49e..1bcb4a24d 100644
--- a/src/app/SecurityPanel/Credentials/StoreCredentials.tsx
+++ b/src/app/SecurityPanel/Credentials/StoreCredentials.tsx
@@ -41,10 +41,9 @@ import { DeleteOrDisableWarningType } from '@app/Modal/DeleteWarningUtils';
 import { StoredCredential } from '@app/Shared/Services/Api.service';
 import { NotificationCategory } from '@app/Shared/Services/NotificationChannel.service';
 import { ServiceContext } from '@app/Shared/Services/Services';
-import { TargetDiscoveryEvent } from '@app/Shared/Services/Targets.service';
 import { useSort } from '@app/utils/useSort';
 import { useSubscriptions } from '@app/utils/useSubscriptions';
-import { TableColumn, evaluateTargetWithExpr, sortResources } from '@app/utils/utils';
+import { TableColumn, sortResources } from '@app/utils/utils';
 import {
   Badge,
   Button,
@@ -63,17 +62,19 @@ import {
 } from '@patternfly/react-core';
 import { SearchIcon } from '@patternfly/react-icons';
 import { ExpandableRowContent, TableComposable, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
-import _ from 'lodash';
 import * as React from 'react';
 import { Link } from 'react-router-dom';
-import { concatMap, forkJoin, Observable, of } from 'rxjs';
+import { forkJoin } from 'rxjs';
 import { SecurityCard } from '../SecurityPanel';
 import { CreateCredentialModal } from './CreateCredentialModal';
 import { MatchedTargetsTable } from './MatchedTargetsTable';
 
+export const includesCredential = (credentials: StoredCredential[], credential: StoredCredential): boolean => {
+  return credentials.some((cred) => cred.id === credential.id);
+};
+
 const enum Actions {
   HANDLE_REFRESH,
-  HANDLE_TARGET_NOTIFICATION,
   HANDLE_CREDENTIALS_STORED_NOTIFICATION,
   HANDLE_CREDENTIALS_DELETED_NOTIFICATION,
   HANDLE_ROW_CHECK,
@@ -94,55 +95,39 @@ const reducer = (state: State, action) => {
   switch (action.type) {
     case Actions.HANDLE_REFRESH: {
       const credentials: StoredCredential[] = action.payload.credentials;
+      const updatedCheckedCredentials = state.checkedCredentials.filter((cred) =>
+        includesCredential(credentials, cred)
+      );
+      const updatedExpandedCredentials = state.expandedCredentials.filter((cred) =>
+        includesCredential(credentials, cred)
+      );
+
       return {
         ...state,
         credentials: credentials,
-      };
-    }
-    case Actions.HANDLE_TARGET_NOTIFICATION: {
-      return {
-        ...state,
-        credentials: state.credentials.map((credential) => {
-          let matched = false;
-          try {
-            const res = evaluateTargetWithExpr(action.payload.target, credential.matchExpression);
-            if (typeof res === 'boolean') {
-              matched = res;
-            }
-          } catch (_error) {
-            matched = false;
-          }
-          if (matched) {
-            const delta = action.payload.kind === 'FOUND' ? 1 : -1;
-            return {
-              ...credential,
-              numMatchingTargets: credential.numMatchingTargets + delta,
-            };
-          }
-          return credential;
-        }),
+        expandedCredentials: updatedExpandedCredentials,
+        checkedCredentials: updatedCheckedCredentials,
+        isHeaderChecked:
+          updatedCheckedCredentials.length > 0 && updatedCheckedCredentials.length === credentials.length,
       };
     }
     case Actions.HANDLE_CREDENTIALS_STORED_NOTIFICATION: {
       return {
         ...state,
         credentials: state.credentials.concat(action.payload.credential),
+        isHeaderChecked: false,
       };
     }
     case Actions.HANDLE_CREDENTIALS_DELETED_NOTIFICATION: {
       const deletedCredential: StoredCredential = action.payload.credential;
-      let deletedIdx;
-      for (deletedIdx = 0; deletedIdx < state.credentials.length; deletedIdx++) {
-        if (_.isEqual(deletedCredential, state.credentials[deletedIdx])) break;
-      }
-      const updatedCheckedCredentials = state.checkedCredentials.filter((o) => !_.isEqual(o, deletedCredential));
+      const updatedCheckedCredentials = state.checkedCredentials.filter((o) => o.id !== deletedCredential.id);
 
       return {
         ...state,
-        credentials: state.credentials.filter((o) => !_.isEqual(o, deletedCredential)),
-        expandedCredentials: state.expandedCredentials.filter((o) => !_.isEqual(o, deletedCredential)),
+        credentials: state.credentials.filter((o) => o.id !== deletedCredential.id),
+        expandedCredentials: state.expandedCredentials.filter((o) => o.id !== deletedCredential.id),
         checkedCredentials: updatedCheckedCredentials,
-        isHeaderChecked: updatedCheckedCredentials.length === 0 ? false : state.isHeaderChecked,
+        isHeaderChecked: updatedCheckedCredentials.length > 0 && state.isHeaderChecked,
       };
     }
     case Actions.HANDLE_ROW_CHECK: {
@@ -156,7 +141,7 @@ const reducer = (state: State, action) => {
       } else {
         return {
           ...state,
-          checkedCredentials: state.checkedCredentials.filter((o) => !_.isEqual(o, action.payload.credential)),
+          checkedCredentials: state.checkedCredentials.filter((o) => o.id !== action.payload.credential.id),
           isHeaderChecked: false,
         };
       }
@@ -182,15 +167,11 @@ const reducer = (state: State, action) => {
     }
     case Actions.HANDLE_TOGGLE_EXPANDED: {
       const credential: StoredCredential = action.payload.credential;
-      const idx = state.expandedCredentials.indexOf(credential);
-      const updated =
-        idx >= 0
-          ? [
-              ...state.expandedCredentials.slice(0, idx),
-              ...state.expandedCredentials.slice(idx + 1, state.expandedCredentials.length),
-            ]
-          : [...state.expandedCredentials, credential];
-
+      const matched = state.expandedCredentials.some((o) => o.id === credential.id);
+      const updated = state.expandedCredentials.filter((o) => o.id !== credential.id);
+      if (!matched) {
+        updated.push(credential);
+      }
       return {
         ...state,
         expandedCredentials: updated,
@@ -268,41 +249,32 @@ export const StoreCredentials = () => {
     addSubscription(
       context.notificationChannel
         .messages(NotificationCategory.CredentialsDeleted)
-        .pipe(
-          concatMap((v) =>
-            of(dispatch({ type: Actions.HANDLE_CREDENTIALS_DELETED_NOTIFICATION, payload: { credential: v.message } }))
-          )
+        .subscribe((v) =>
+          dispatch({ type: Actions.HANDLE_CREDENTIALS_DELETED_NOTIFICATION, payload: { credential: v.message } })
         )
-        .subscribe(() => undefined /* do nothing - dispatch will have already handled updating state */)
     );
   }, [addSubscription, context, context.notificationChannel]);
 
-  const handleTargetNotification = (evt: TargetDiscoveryEvent) => {
-    dispatch({ type: Actions.HANDLE_TARGET_NOTIFICATION, payload: { target: evt.serviceRef, kind: evt.kind } });
-  };
-
   React.useEffect(() => {
     addSubscription(
       context.notificationChannel
         .messages(NotificationCategory.TargetJvmDiscovery)
-        .pipe(concatMap((v) => of(handleTargetNotification(v.message.event))))
-        .subscribe(() => undefined /* do nothing - dispatch will have already handled updating state */)
+        .subscribe((_) => refreshStoredCredentialsAndCounts())
     );
-  }, [addSubscription, context, context.notificationChannel]);
+  }, [addSubscription, refreshStoredCredentialsAndCounts, context, context.notificationChannel, context.api]);
 
-  const handleHeaderCheck = React.useCallback((checked: boolean) => {
-    dispatch({ type: Actions.HANDLE_HEADER_CHECK, payload: { checked: checked } });
-  }, []);
+  const handleHeaderCheck = React.useCallback(
+    (checked: boolean) => {
+      dispatch({ type: Actions.HANDLE_HEADER_CHECK, payload: { checked: checked } });
+    },
+    [dispatch]
+  );
 
   const handleDeleteCredentials = React.useCallback(() => {
-    const tasks: Observable<boolean>[] = [];
-    state.credentials.forEach((credential) => {
-      if (state.checkedCredentials.includes(credential)) {
-        tasks.push(context.api.deleteCredentials(credential.id));
-      }
-    });
-    addSubscription(forkJoin(tasks).subscribe());
-  }, [state.credentials, state.checkedCredentials, context.api, addSubscription]);
+    addSubscription(
+      forkJoin(state.checkedCredentials.map((credential) => context.api.deleteCredentials(credential.id))).subscribe()
+    );
+  }, [state.checkedCredentials, context.api, addSubscription]);
 
   const handleAuthModalOpen = React.useCallback(() => {
     setShowAuthModal(true);
@@ -370,8 +342,8 @@ export const StoreCredentials = () => {
 
   const matchExpressionRows = React.useMemo(() => {
     return sortResources(sortBy, state.credentials, tableColumns).map((credential, idx) => {
-      const isExpanded: boolean = state.expandedCredentials.includes(credential);
-      const isChecked: boolean = state.checkedCredentials.includes(credential);
+      const isExpanded = includesCredential(state.expandedCredentials, credential);
+      const isChecked = includesCredential(state.checkedCredentials, credential);
 
       const handleToggleExpanded = () => {
         dispatch({ type: Actions.HANDLE_TOGGLE_EXPANDED, payload: { credential: credential } });
@@ -415,7 +387,7 @@ export const StoreCredentials = () => {
 
   const targetRows = React.useMemo(() => {
     return state.credentials.map((credential, idx) => {
-      const isExpanded: boolean = state.expandedCredentials.includes(credential);
+      const isExpanded: boolean = includesCredential(state.expandedCredentials, credential);
 
       return (
         <Tr key={`${idx}_child`} isExpanded={isExpanded}>
diff --git a/src/app/Shared/MatchExpression/MatchExpressionVisualizer.tsx b/src/app/Shared/MatchExpression/MatchExpressionVisualizer.tsx
index ed834f938..ef402af81 100644
--- a/src/app/Shared/MatchExpression/MatchExpressionVisualizer.tsx
+++ b/src/app/Shared/MatchExpression/MatchExpressionVisualizer.tsx
@@ -35,16 +35,17 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+import { LoadingView } from '@app/LoadingView/LoadingView';
 import { TopologyControlBar } from '@app/Topology/GraphView/TopologyControlBar';
 import { SavedGraphPosition, SavedNodePosition } from '@app/Topology/GraphView/TopologyGraphView';
 import { getNodeById } from '@app/Topology/GraphView/UtilsFactory';
 import EntityDetails, { AlertOptions } from '@app/Topology/Shared/Entity/EntityDetails';
-import { useSearchExpression } from '@app/Topology/Shared/utils';
+import { MatchedTargetsServiceContext, useExprSvc, useMatchedTargetsSvcSource } from '@app/Topology/Shared/utils';
 import { TopologySideBar } from '@app/Topology/SideBar/TopologySideBar';
 import { NodeType } from '@app/Topology/typings';
 import { getFromLocalStorage, saveToLocalStorage } from '@app/utils/LocalStorage';
 import { useSubscriptions } from '@app/utils/useSubscriptions';
-import { evaluateTargetWithExpr, hashCode } from '@app/utils/utils';
+import { hashCode } from '@app/utils/utils';
 import {
   Bullseye,
   DataList,
@@ -83,6 +84,7 @@ import {
 } from '@patternfly/react-topology';
 import _ from 'lodash';
 import * as React from 'react';
+import { catchError, combineLatest, of, switchMap, tap } from 'rxjs';
 import { ServiceContext } from '../Services/Services';
 import { Target } from '../Services/Target.service';
 import { componentFactory, createTargetNode, layoutFactory, transformData } from './utils';
@@ -152,6 +154,7 @@ export const MATCH_EXPRES_VIS_GRAPH_ID = 'cryostat-match-expression-visualizer';
 const GraphView: React.FC<{ alertOptions?: AlertOptions }> = ({ alertOptions, ...props }) => {
   const addSubscription = useSubscriptions();
   const context = React.useContext(ServiceContext);
+  const matchedTargetsSvcSource = useMatchedTargetsSvcSource();
 
   const [selectedIds, setSelectedIds] = React.useState<string[]>([]); // selectedIds is exactly matched by VisualizationSurface
   const [selectedEntity, setSelectedEntity] = React.useState<GraphElement>();
@@ -295,35 +298,35 @@ const GraphView: React.FC<{ alertOptions?: AlertOptions }> = ({ alertOptions, ..
   }, [handleDrawerClose, selectedEntity, alertOptions]);
 
   return (
-    <TopologyView
-      {...props}
-      id="match-expression__visualization-container"
-      className={css('topology__main-container')}
-      controlBar={<TopologyControlBar visualization={visualization} noCollapse />}
-      sideBar={sidebar}
-      sideBarOpen={selectedIds.length > 0}
-      sideBarResizable={true}
-      minSideBarSize={`200px`}
-      defaultSideBarSize={`425px`}
-    >
-      <VisualizationProvider controller={visualization}>
-        <VisualizationSurface state={{ selectedIds }} />
-      </VisualizationProvider>
-    </TopologyView>
+    <MatchedTargetsServiceContext.Provider value={matchedTargetsSvcSource}>
+      <TopologyView
+        {...props}
+        id="match-expression__visualization-container"
+        className={css('topology__main-container')}
+        controlBar={<TopologyControlBar visualization={visualization} noCollapse />}
+        sideBar={sidebar}
+        sideBarOpen={selectedIds.length > 0}
+        sideBarResizable={true}
+        minSideBarSize={`200px`}
+        defaultSideBarSize={`425px`}
+      >
+        <VisualizationProvider controller={visualization}>
+          <VisualizationSurface state={{ selectedIds }} />
+        </VisualizationProvider>
+      </TopologyView>
+    </MatchedTargetsServiceContext.Provider>
   );
 };
 
 const ListView: React.FC<{ alertOptions?: AlertOptions }> = ({ alertOptions, ...props }) => {
   const addSubscription = useSubscriptions();
   const context = React.useContext(ServiceContext);
-  const [matchExpression] = useSearchExpression();
-  const [targets, setTargets] = React.useState<Target[]>([]);
+  const matchExprService = useExprSvc();
 
+  const [matchedExpr, setMatchExpr] = React.useState('');
+  const [matchedTargets, setMatchedTargets] = React.useState<Target[]>([]);
   const [expanded, setExpanded] = React.useState<string[]>([]);
-
-  React.useEffect(() => {
-    addSubscription(context.targets.targets().subscribe(setTargets));
-  }, [addSubscription, context.targets, setTargets]);
+  const [loading, setLoading] = React.useState(false);
 
   const toggleExpand = React.useCallback(
     (id: string) => {
@@ -337,26 +340,30 @@ const ListView: React.FC<{ alertOptions?: AlertOptions }> = ({ alertOptions, ...
     [setExpanded]
   );
 
-  const targetNodes = React.useMemo(() => targets.map(createTargetNode), [targets]);
-
-  const filtered = React.useMemo(
-    () =>
-      targetNodes.filter(({ target }) => {
-        try {
-          const res = evaluateTargetWithExpr(target, matchExpression);
-          if (typeof res === 'boolean') {
-            return res;
-          }
-          return false;
-        } catch (err) {
-          return false;
-        }
-      }),
-    [targetNodes, matchExpression]
-  );
+  React.useEffect(() => {
+    addSubscription(
+      combineLatest([
+        matchExprService.searchExpression().pipe(tap((exp) => setMatchExpr(exp))),
+        context.targets.targets(),
+      ])
+        .pipe(
+          tap(() => setLoading(true)),
+          switchMap(([input, targets]) =>
+            input ? context.api.matchTargetsWithExpr(input, targets).pipe(catchError((_) => of([]))) : of([])
+          )
+        )
+        .subscribe((ts) => {
+          setLoading(false);
+          setMatchedTargets(ts);
+        })
+    );
+  }, [matchExprService, context.api, context.targets, setMatchedTargets, setLoading, addSubscription]);
 
   const content = React.useMemo(() => {
-    if (!filtered || !filtered.length) {
+    if (loading) {
+      return <LoadingView />;
+    }
+    if (!matchedTargets || !matchedTargets.length) {
       return (
         <Bullseye>
           <EmptyState variant={EmptyStateVariant.full}>
@@ -366,15 +373,15 @@ const ListView: React.FC<{ alertOptions?: AlertOptions }> = ({ alertOptions, ...
             </Title>
             <EmptyStateSecondaryActions>
               <EmptyStateBody>{`${
-                matchExpression === '' ? 'Enter another' : 'Clear'
+                matchedExpr === '' ? 'Enter another' : 'Clear'
               } Match Expression and try again.`}</EmptyStateBody>
             </EmptyStateSecondaryActions>
           </EmptyState>
         </Bullseye>
       );
     }
-    return filtered.map((tn) => {
-      const { connectUrl, alias } = tn.target;
+    return matchedTargets.map((target) => {
+      const { connectUrl, alias } = target;
       return (
         <DataListItem {...props} key={connectUrl} isExpanded={expanded.includes(connectUrl)}>
           <DataListItemRow>
@@ -402,7 +409,7 @@ const ListView: React.FC<{ alertOptions?: AlertOptions }> = ({ alertOptions, ...
               isHidden={!expanded.includes(connectUrl)}
             >
               <EntityDetails
-                entity={{ getData: () => tn }}
+                entity={{ getData: () => target }}
                 columnModifier={{ default: '3Col' }}
                 alertOptions={alertOptions}
                 className="topology__list-view__entity-details"
@@ -412,7 +419,7 @@ const ListView: React.FC<{ alertOptions?: AlertOptions }> = ({ alertOptions, ...
         </DataListItem>
       );
     });
-  }, [filtered, expanded, matchExpression, toggleExpand, props, alertOptions]);
+  }, [matchedTargets, loading, expanded, matchedExpr, toggleExpand, props, alertOptions]);
 
   return (
     <DataList aria-label={'Target List'} style={{ height: '100%' }}>
diff --git a/src/app/Shared/Services/Api.service.tsx b/src/app/Shared/Services/Api.service.tsx
index ad67eacdb..c384566b2 100644
--- a/src/app/Shared/Services/Api.service.tsx
+++ b/src/app/Shared/Services/Api.service.tsx
@@ -50,7 +50,7 @@ import { fromFetch } from 'rxjs/fetch';
 import { catchError, concatMap, filter, first, map, mergeMap, tap } from 'rxjs/operators';
 import { AuthMethod, LoginService, SessionState } from './Login.service';
 import { NotificationCategory } from './NotificationChannel.service';
-import { includesTarget, NO_TARGET, Target, TargetService } from './Target.service';
+import { NO_TARGET, Target, TargetService, includesTarget } from './Target.service';
 
 type ApiVersion = 'v1' | 'v2' | 'v2.1' | 'v2.2' | 'beta';
 
@@ -1094,28 +1094,38 @@ export class ApiService {
     );
   }
 
-  isTargetMatched(matchExpression: string, target: Target): Observable<boolean> {
-    const body = new window.FormData();
-    body.append('matchExpression', matchExpression);
-    body.append('targets', JSON.stringify([target]));
+  // Filter targets that the expression matches
+  matchTargetsWithExpr(matchExpression: string, targets: Target[]): Observable<Target[]> {
+    const body = JSON.stringify({
+      matchExpression,
+      targets,
+    });
+    const headers = new Headers();
+    headers.set('Content-Type', 'application/json');
 
     return this.sendRequest(
       'beta',
       'matchExpressions',
       {
         method: 'POST',
-        body: body,
+        body,
+        headers,
       },
       undefined,
       true,
       true
     ).pipe(
+      first(),
       concatMap((resp: Response) => resp.json()),
-      map((body) => {
-        const matchedTargets: Target[] = body.data.result.targets || [];
-        return includesTarget(matchedTargets, target);
-      }),
-      first()
+      map((body): Target[] => body.data.result.targets || [])
+    );
+  }
+
+  isTargetMatched(matchExpression: string, target: Target): Observable<boolean> {
+    return this.matchTargetsWithExpr(matchExpression, [target]).pipe(
+      first(),
+      map((ts) => includesTarget(ts, target)),
+      catchError((_) => of(false))
     );
   }
 
diff --git a/src/app/Topology/GraphView/CustomNode.tsx b/src/app/Topology/GraphView/CustomNode.tsx
index 2bedc99af..2fe024792 100644
--- a/src/app/Topology/GraphView/CustomNode.tsx
+++ b/src/app/Topology/GraphView/CustomNode.tsx
@@ -39,6 +39,8 @@
 import cryostatSvg from '@app/assets/cryostat_icon_rgb_default.svg';
 import openjdkSvg from '@app/assets/openjdk.svg';
 import { RootState } from '@app/Shared/Redux/ReduxStore';
+import { includesTarget } from '@app/Shared/Services/Target.service';
+import { useSubscriptions } from '@app/utils/useSubscriptions';
 import { ContainerNodeIcon } from '@patternfly/react-icons';
 import { css } from '@patternfly/react-styles';
 import {
@@ -58,7 +60,8 @@ import {
 } from '@patternfly/react-topology';
 import * as React from 'react';
 import { useSelector } from 'react-redux';
-import { getStatusTargetNode, isTargetMatched, nodeTypeToAbbr, useSearchExpression } from '../Shared/utils';
+import { map } from 'rxjs';
+import { getStatusTargetNode, nodeTypeToAbbr, useMatchedTargetsSvc } from '../Shared/utils';
 import { TargetNode } from '../typings';
 import { getNodeDecorators } from './NodeDecorator';
 import { TOPOLOGY_GRAPH_ID } from './TopologyGraphView';
@@ -105,7 +108,10 @@ const CustomNode: React.FC<CustomNodeProps> = ({
 }) => {
   useAnchor(EllipseAnchor); // For edges
   const [hover, hoverRef] = useHover(200, 200);
-  const [expression] = useSearchExpression();
+
+  const [matched, setMatched] = React.useState(true);
+  const addSubscription = useSubscriptions();
+  const matchedTargetSvc = useMatchedTargetsSvc();
 
   const displayOptions = useSelector((state: RootState) => state.topologyConfigs.displayOptions);
   const { badge: showBadge, connectionUrl: showConnectUrl, icon: showIcon, status: showStatus } = displayOptions.show;
@@ -114,18 +120,23 @@ const CustomNode: React.FC<CustomNodeProps> = ({
   const labelIcon = React.useMemo(() => <img src={cryostatSvg} />, []);
 
   const data: TargetNode = element.getData();
+
   const [nodeStatus] = getStatusTargetNode(data);
 
-  const classNames = React.useMemo(() => {
-    const graphId = element.getGraph().getId();
-    const matchExprForSearch = graphId === TOPOLOGY_GRAPH_ID;
-    const additional =
-      (matchExprForSearch && expression === '') || isTargetMatched(data, expression) ? '' : 'search-inactive';
-    return css('topology__target-node', additional);
-  }, [data, expression, element]);
+  const graphId = React.useMemo(() => element.getGraph().getId(), [element]);
+
+  const classNames = React.useMemo(() => css('topology__target-node', matched ? '' : 'search-inactive'), [matched]);
 
   const nodeDecorators = React.useMemo(() => (showStatus ? getNodeDecorators(element) : null), [element, showStatus]);
 
+  React.useEffect(() => {
+    addSubscription(
+      matchedTargetSvc
+        .pipe(map((ts) => (ts ? includesTarget(ts, data.target) : graphId === TOPOLOGY_GRAPH_ID)))
+        .subscribe(setMatched)
+    );
+  }, [graphId, addSubscription, setMatched, matchedTargetSvc, data.target]);
+
   return (
     <Layer id={contextMenuOpen ? TOP_LAYER : DEFAULT_LAYER}>
       <g className={classNames} id={'target-node-visual-group'} ref={hoverRef as React.LegacyRef<SVGGElement>}>
diff --git a/src/app/Topology/GraphView/TopologyGraphView.tsx b/src/app/Topology/GraphView/TopologyGraphView.tsx
index cdd8afb22..4efd8eb2a 100644
--- a/src/app/Topology/GraphView/TopologyGraphView.tsx
+++ b/src/app/Topology/GraphView/TopologyGraphView.tsx
@@ -63,7 +63,12 @@ import { QuickSearchContextMenu } from '../Actions/QuickSearchPanel';
 import EntityDetails from '../Shared/Entity/EntityDetails';
 import { TopologyEmptyState } from '../Shared/TopologyEmptyState';
 import { TopologyExceedLimitState } from '../Shared/TopologyExceedLimitState';
-import { DiscoveryTreeContext, TransformConfig } from '../Shared/utils';
+import {
+  DiscoveryTreeContext,
+  MatchedTargetsServiceContext,
+  TransformConfig,
+  useMatchedTargetsSvcSource,
+} from '../Shared/utils';
 import { TopologySideBar } from '../SideBar/TopologySideBar';
 import { TopologyToolbar, TopologyToolbarVariant } from '../Toolbar/TopologyToolbar';
 import { TopologyControlBar } from './TopologyControlBar';
@@ -100,6 +105,7 @@ export const TopologyGraphView: React.FC<TopologyGraphViewProps> = ({ transformC
   const [selectedIds, setSelectedIds] = React.useState<string[]>([]); // selectedIds is exactly matched by VisualizationSurface
   const [selectedEntity, setSelectedEntity] = React.useState<GraphElement>();
   const [showGraphAnyway, setShowGraphAnyway] = React.useState(false);
+  const matchedTargetsSvcSource = useMatchedTargetsSvcSource();
 
   const filters = useSelector((state: RootState) => state.topologyFilters);
 
@@ -278,21 +284,23 @@ export const TopologyGraphView: React.FC<TopologyGraphViewProps> = ({ transformC
           ) : exceedLimit && !showGraphAnyway ? (
             <TopologyExceedLimitState onShowTopologyAnyway={() => setShowGraphAnyway(true)} />
           ) : (
-            <TopologyView
-              {...props}
-              id="topology__visualization-container"
-              className={css('topology__main-container')}
-              controlBar={<TopologyControlBar visualization={visualization} />}
-              sideBar={sidebar}
-              sideBarOpen={selectedIds.length > 0}
-              sideBarResizable={true}
-              minSideBarSize={`${MIN_SIZEBAR_SIZE}px`}
-              defaultSideBarSize={`${DEFAULT_SIZEBAR_SIZE}px`}
-            >
-              <VisualizationProvider controller={visualization}>
-                <VisualizationSurface state={{ selectedIds }} />
-              </VisualizationProvider>
-            </TopologyView>
+            <MatchedTargetsServiceContext.Provider value={matchedTargetsSvcSource}>
+              <TopologyView
+                {...props}
+                id="topology__visualization-container"
+                className={css('topology__main-container')}
+                controlBar={<TopologyControlBar visualization={visualization} />}
+                sideBar={sidebar}
+                sideBarOpen={selectedIds.length > 0}
+                sideBarResizable={true}
+                minSideBarSize={`${MIN_SIZEBAR_SIZE}px`}
+                defaultSideBarSize={`${DEFAULT_SIZEBAR_SIZE}px`}
+              >
+                <VisualizationProvider controller={visualization}>
+                  <VisualizationSurface state={{ selectedIds }} />
+                </VisualizationProvider>
+              </TopologyView>
+            </MatchedTargetsServiceContext.Provider>
           )}
         </StackItem>
       </Stack>
diff --git a/src/app/Topology/ListView/TopologyListView.tsx b/src/app/Topology/ListView/TopologyListView.tsx
index 924f5655f..77e32e23a 100644
--- a/src/app/Topology/ListView/TopologyListView.tsx
+++ b/src/app/Topology/ListView/TopologyListView.tsx
@@ -36,11 +36,15 @@
  * SOFTWARE.
  */
 import { RootState } from '@app/Shared/Redux/ReduxStore';
+import { ServiceContext } from '@app/Shared/Services/Services';
+import { Target } from '@app/Shared/Services/Target.service';
+import { useSubscriptions } from '@app/utils/useSubscriptions';
 import { Divider, Stack, StackItem, TreeView, TreeViewDataItem } from '@patternfly/react-core';
 import * as React from 'react';
 import { useSelector } from 'react-redux';
+import { Subject, catchError, combineLatest, of, switchMap } from 'rxjs';
 import { TopologyEmptyState } from '../Shared/TopologyEmptyState';
-import { DiscoveryTreeContext, TransformConfig, useSearchExpression } from '../Shared/utils';
+import { DiscoveryTreeContext, TransformConfig, getAllLeaves, useExprSvc } from '../Shared/utils';
 import { TopologyToolbar, TopologyToolbarVariant } from '../Toolbar/TopologyToolbar';
 import { transformData } from './UtilsFactory';
 
@@ -50,18 +54,40 @@ export interface TopologyListViewProps {
 
 export const TopologyListView: React.FC<TopologyListViewProps> = ({ transformConfig, ...props }) => {
   const discoveryTree = React.useContext(DiscoveryTreeContext);
+  const svcContext = React.useContext(ServiceContext);
+  const addSubscription = useSubscriptions();
+  const matchExprService = useExprSvc();
+
+  const tSubjectRef = React.useRef(new Subject<Target[]>());
+  const tSubject = tSubjectRef.current;
 
   const filters = useSelector((state: RootState) => state.topologyFilters);
 
-  const [expression] = useSearchExpression(100);
+  const [matchedTargets, setMatchedTargets] = React.useState<Target[]>();
 
   const _treeViewData: TreeViewDataItem[] = React.useMemo(
-    () => transformData(discoveryTree, transformConfig, filters, expression),
-    [discoveryTree, transformConfig, filters, expression]
+    () => transformData(discoveryTree, transformConfig, filters, matchedTargets),
+    [discoveryTree, transformConfig, filters, matchedTargets]
   );
 
   const isEmptyList = React.useMemo(() => !_treeViewData.length, [_treeViewData]);
 
+  React.useEffect(() => {
+    addSubscription(
+      combineLatest([matchExprService.searchExpression(), tSubject.asObservable()])
+        .pipe(
+          switchMap(([input, ts]) =>
+            input ? svcContext.api.matchTargetsWithExpr(input, ts).pipe(catchError((_) => of([]))) : of(undefined)
+          )
+        )
+        .subscribe(setMatchedTargets)
+    );
+  }, [svcContext.api, matchExprService, tSubject, addSubscription, setMatchedTargets]);
+
+  React.useEffect(() => {
+    tSubject.next(getAllLeaves(discoveryTree).map((tn) => tn.target));
+  }, [discoveryTree, tSubject]);
+
   return (
     <Stack {...props}>
       <StackItem>
@@ -79,7 +105,7 @@ export const TopologyListView: React.FC<TopologyListViewProps> = ({ transformCon
             data={_treeViewData}
             variant="compact"
             hasGuides
-            allExpanded={expression !== ''}
+            allExpanded={matchedTargets !== undefined}
           />
         )}
       </StackItem>
diff --git a/src/app/Topology/ListView/UtilsFactory.tsx b/src/app/Topology/ListView/UtilsFactory.tsx
index 6cb7a1964..39d104c82 100644
--- a/src/app/Topology/ListView/UtilsFactory.tsx
+++ b/src/app/Topology/ListView/UtilsFactory.tsx
@@ -36,6 +36,7 @@
  * SOFTWARE.
  */
 import { TopologyFilters } from '@app/Shared/Redux/Filters/TopologyFilterSlice';
+import { Target, includesTarget } from '@app/Shared/Services/Target.service';
 import { Badge, Flex, FlexItem, Label, LabelGroup, TreeViewDataItem } from '@patternfly/react-core';
 import * as React from 'react';
 import { ActionDropdown } from '../Actions/NodeActions';
@@ -47,7 +48,6 @@ import {
   getUniqueGroupId,
   getUniqueTargetId,
   isGroupNodeFiltered,
-  isTargetMatched,
   isTargetNodeFiltered,
   TransformConfig,
 } from '../Shared/utils';
@@ -56,7 +56,7 @@ import { EnvironmentNode, isTargetNode, NodeType, TargetNode } from '../typings'
 const _transformDataGroupedByTopLevel = (
   universe: EnvironmentNode,
   filters?: TopologyFilters,
-  searchExpression = ''
+  includeOnlyTargets?: Target[]
 ): TreeViewDataItem[] => {
   return universe.children
     .filter((realm: EnvironmentNode) => isGroupNodeFiltered(realm, filters?.groupFilters.filters))
@@ -78,7 +78,7 @@ const _transformDataGroupedByTopLevel = (
           .filter(
             (child: TargetNode) =>
               isTargetNodeFiltered(child, filters?.targetFilters.filters) &&
-              (searchExpression === '' || isTargetMatched(child, searchExpression))
+              (!includeOnlyTargets || includesTarget(includeOnlyTargets, child.target))
           )
           .map((child: TargetNode) => ({
             id: `${child.name}-wrapper`,
@@ -131,12 +131,12 @@ const _buildFullData = (
   node: EnvironmentNode | TargetNode,
   expandMode = true,
   filters?: TopologyFilters,
-  searchExpression = ''
+  includeOnlyTargets?: Target[]
 ): TreeViewDataItem[] => {
   if (isTargetNode(node)) {
     if (
       !isTargetNodeFiltered(node, filters?.targetFilters.filters) ||
-      (searchExpression !== '' && !isTargetMatched(node, searchExpression))
+      (includeOnlyTargets && !includesTarget(includeOnlyTargets, node.target))
     ) {
       return [];
     }
@@ -170,7 +170,7 @@ const _buildFullData = (
 
   const INIT: TreeViewDataItem[] = [];
   const children = node.children.reduce(
-    (prev, curr) => prev.concat(_buildFullData(curr, expandMode, filters, searchExpression)),
+    (prev, curr) => prev.concat(_buildFullData(curr, expandMode, filters, includeOnlyTargets)),
     INIT
   );
 
@@ -226,9 +226,9 @@ const _transformDataFull = (
   root: EnvironmentNode,
   expandMode = true,
   filters?: TopologyFilters,
-  searchExpression = ''
+  includeOnlyTargets?: Target[]
 ): TreeViewDataItem[] => {
-  const _transformedRoot = _buildFullData(root, expandMode, filters, searchExpression)[0];
+  const _transformedRoot = _buildFullData(root, expandMode, filters, includeOnlyTargets)[0];
   return _transformedRoot && _transformedRoot.children ? _transformedRoot.children : [];
 };
 
@@ -236,9 +236,9 @@ export const transformData = (
   universe: EnvironmentNode,
   { showOnlyTopGroup = false, expandMode = true }: TransformConfig = {},
   filters?: TopologyFilters,
-  searchExpression = ''
+  includeOnlyTargets?: Target[]
 ): TreeViewDataItem[] => {
   return showOnlyTopGroup
-    ? _transformDataGroupedByTopLevel(universe, filters, searchExpression)
-    : _transformDataFull(universe, expandMode, filters, searchExpression);
+    ? _transformDataGroupedByTopLevel(universe, filters, includeOnlyTargets)
+    : _transformDataFull(universe, expandMode, filters, includeOnlyTargets);
 };
diff --git a/src/app/Topology/Shared/utils.tsx b/src/app/Topology/Shared/utils.tsx
index 6fd5246c2..fa535a47f 100644
--- a/src/app/Topology/Shared/utils.tsx
+++ b/src/app/Topology/Shared/utils.tsx
@@ -36,11 +36,13 @@
  * SOFTWARE.
  */
 import { TopologyFilters } from '@app/Shared/Redux/Filters/TopologyFilterSlice';
-import { evaluateTargetWithExpr } from '@app/utils/utils';
+import { ServiceContext } from '@app/Shared/Services/Services';
+import { Target } from '@app/Shared/Services/Target.service';
+import { useSubscriptions } from '@app/utils/useSubscriptions';
 import { Button, Text, TextVariants } from '@patternfly/react-core';
 import { ContextMenuSeparator, GraphElement, NodeStatus } from '@patternfly/react-topology';
 import * as React from 'react';
-import { BehaviorSubject, debounceTime, Observable, Subscription } from 'rxjs';
+import { BehaviorSubject, catchError, combineLatest, debounceTime, Observable, of, switchMap, tap } from 'rxjs';
 import { ContextMenuItem, MenuItemVariant, NodeAction, nodeActions } from '../Actions/NodeActions';
 import { WarningResolverAsCredModal, WarningResolverAsLink } from '../Actions/WarningResolver';
 import { EnvironmentNode, TargetNode, isTargetNode, NodeType, DEFAULT_EMPTY_UNIVERSE } from '../typings';
@@ -227,11 +229,16 @@ export const isTargetNodeFiltered = ({ target }: TargetNode, filters?: TopologyF
   return matched;
 };
 
+export const DEFAULT_MATCH_EXPR_DEBOUNCE_TIME = 300; // ms
+
 export class SearchExprService {
   private readonly _state$ = new BehaviorSubject<string>('');
 
-  searchExpression(): Observable<string> {
-    return this._state$.asObservable();
+  searchExpression({
+    debounceMs = DEFAULT_MATCH_EXPR_DEBOUNCE_TIME,
+    immediateFn = (_: string) => undefined,
+  } = {}): Observable<string> {
+    return this._state$.asObservable().pipe(tap(immediateFn), debounceTime(debounceMs));
   }
 
   setSearchExpression(expr: string): void {
@@ -241,33 +248,31 @@ export class SearchExprService {
 
 export const SearchExprServiceContext = React.createContext(new SearchExprService());
 
-export const useSearchExpression = (debounceMs = 0): [string, (expr: string) => void] => {
-  const [expr, setExpr] = React.useState('');
-  const exprSvc = React.useContext(SearchExprServiceContext);
-  const _subRef = React.useRef<Subscription>();
+export const useExprSvc = (): SearchExprService => React.useContext(SearchExprServiceContext);
+
+export const MatchedTargetsServiceContext = React.createContext(new BehaviorSubject<Target[] | undefined>(undefined));
+
+export const useMatchedTargetsSvcSource = (): BehaviorSubject<Target[] | undefined> => {
+  const matchedTargetsSvcRef = React.useRef(new BehaviorSubject<Target[] | undefined>(undefined));
+  const matchExprService = useExprSvc();
+  const svc = React.useContext(ServiceContext);
+  const addSubscription = useSubscriptions();
 
   React.useEffect(() => {
-    _subRef.current = exprSvc.searchExpression().pipe(debounceTime(debounceMs)).subscribe(setExpr);
-    return () => _subRef.current?.unsubscribe();
-  }, [_subRef, setExpr, exprSvc, debounceMs]);
-
-  const handleChange = React.useCallback(
-    (value: string) => {
-      exprSvc.setSearchExpression(value);
-    },
-    [exprSvc]
-  );
-  return [expr, handleChange];
-};
+    addSubscription(
+      combineLatest([matchExprService.searchExpression(), svc.targets.targets()])
+        .pipe(
+          switchMap(([input, targets]) =>
+            input ? svc.api.matchTargetsWithExpr(input, targets).pipe(catchError((_) => of([]))) : of(undefined)
+          )
+        )
+        .subscribe((ts) => {
+          matchedTargetsSvcRef.current.next(ts);
+        })
+    );
+  }, [svc.targets, svc.api, matchExprService, addSubscription]);
 
-export const isTargetMatched = ({ target }: TargetNode, matchExpression: string): boolean => {
-  try {
-    const res = evaluateTargetWithExpr(target, matchExpression);
-    if (typeof res === 'boolean') {
-      return res;
-    }
-    return false;
-  } catch (err) {
-    return false;
-  }
+  return matchedTargetsSvcRef.current;
 };
+
+export const useMatchedTargetsSvc = () => React.useContext(MatchedTargetsServiceContext);
diff --git a/src/app/Topology/Toolbar/FindByMatchExpression.tsx b/src/app/Topology/Toolbar/FindByMatchExpression.tsx
index d37908341..5c10b9f8d 100644
--- a/src/app/Topology/Toolbar/FindByMatchExpression.tsx
+++ b/src/app/Topology/Toolbar/FindByMatchExpression.tsx
@@ -37,21 +37,25 @@
  */
 import { SearchInput } from '@patternfly/react-core';
 import * as React from 'react';
-import { useSearchExpression as useSearchExpression } from '../Shared/utils';
+import { useExprSvc } from '../Shared/utils';
 
 export interface FindByMatchExpressionProps {
   isDisabled?: boolean;
 }
 
 export const FindByMatchExpression: React.FC<FindByMatchExpressionProps> = ({ isDisabled, ...props }) => {
-  const [expression, setExpression] = useSearchExpression();
+  const matchExprService = useExprSvc();
+  const [expression, setExpression] = React.useState('');
 
   return (
     <SearchInput
       {...props}
       placeholder={'Find by match expression...'}
       value={expression}
-      onChange={setExpression}
+      onChange={(input) => {
+        setExpression(input);
+        matchExprService.setSearchExpression(input);
+      }}
       isDisabled={isDisabled}
     />
   );
diff --git a/src/app/utils/utils.ts b/src/app/utils/utils.ts
index dc3c58085..040dc3a08 100644
--- a/src/app/utils/utils.ts
+++ b/src/app/utils/utils.ts
@@ -170,11 +170,6 @@ export const getDisplayFieldName = (fieldName: string) => {
     .join(' ');
 };
 
-export const evaluateTargetWithExpr = (target: unknown, matchExpression: string) => {
-  const f = new Function('target', `return ${matchExpression}`);
-  return f(_.cloneDeep(target));
-};
-
 export const portalRoot = document.getElementById('portal-root') || document.body;
 
 export const cleanDataId = (key: string): string => {
diff --git a/src/test/Rules/CreateRule.test.tsx b/src/test/Rules/CreateRule.test.tsx
index b8847096c..af2bf4173 100644
--- a/src/test/Rules/CreateRule.test.tsx
+++ b/src/test/Rules/CreateRule.test.tsx
@@ -44,7 +44,7 @@ import '@testing-library/jest-dom';
 import { cleanup, screen, waitFor } from '@testing-library/react';
 import { createMemoryHistory } from 'history';
 import * as React from 'react';
-import { of } from 'rxjs';
+import { of, throwError } from 'rxjs';
 import { renderWithServiceContextAndRouter } from '../Common';
 
 jest.mock('@app/Shared/MatchExpression/MatchExpressionVisualizer', () => ({
@@ -84,28 +84,80 @@ const mockRule: Rule = {
   maxSizeBytes: 0,
 };
 
-const history = createMemoryHistory({ initialEntries: ['/rules'] });
+const history = createMemoryHistory({ initialEntries: ['/rules/create'] });
 
 jest.mock('react-router-dom', () => ({
   ...jest.requireActual('react-router-dom'),
-  useRouteMatch: () => ({ url: history.location.pathname }),
-  useHistory: () => history,
+  useRouteMatch: jest.fn(() => ({ url: history.location.pathname })),
+  useHistory: jest.fn(() => history),
 }));
 
-const createSpy = jest.spyOn(defaultServices.api, 'createRule').mockReturnValue(of(true));
 jest.spyOn(defaultServices.api, 'doGet').mockReturnValue(of([mockEventTemplate]));
+
 jest.spyOn(defaultServices.targets, 'targets').mockReturnValue(of([mockTarget]));
+jest.spyOn(defaultServices.api, 'matchTargetsWithExpr').mockImplementation((matchExpression, targets) => {
+  switch (matchExpression) {
+    case mockRule.matchExpression:
+      return of([mockTarget]);
+    case 'false':
+      return of([]);
+    default: // Assume incomplete input or others are invalid
+      return throwError(() => new Error('400 Response'));
+  }
+});
+const createSpy = jest.spyOn(defaultServices.api, 'createRule').mockReturnValue(of(true));
 
 describe('<CreateRule />', () => {
   beforeEach(() => {
     history.go(-history.length);
-    jest.mocked(defaultServices.api.doGet).mockClear();
-    jest.mocked(defaultServices.targets.targets).mockClear();
+    jest.clearAllMocks();
   });
 
   afterEach(cleanup);
 
-  it('should update selection when template list updates ', async () => {
+  it('should show error helper text when name input is invalid', async () => {
+    const { user } = renderWithServiceContextAndRouter(<CreateRule />, { history });
+
+    const nameInput = screen.getByLabelText('Name *');
+    expect(nameInput).toBeInTheDocument();
+    expect(nameInput).toBeVisible();
+
+    await user.type(nameInput, 'some name with spaces');
+
+    const nameHelperText = screen.getByText('A rule name can contain only letters, numbers, and underscores.');
+    expect(nameHelperText).toBeInTheDocument();
+    expect(nameHelperText).toBeVisible();
+  });
+
+  it('should show error helper text when match expression input is invalid', async () => {
+    const { user } = renderWithServiceContextAndRouter(<CreateRule />, { history });
+
+    const matchExpressionInput = screen.getByLabelText('Match Expression *');
+    expect(matchExpressionInput).toBeInTheDocument();
+    expect(matchExpressionInput).toBeVisible();
+
+    await user.type(matchExpressionInput, 'somethingwrong');
+
+    const exphelperText = await screen.findByText('The expression matching failed.');
+    expect(exphelperText).toBeInTheDocument();
+    expect(exphelperText).toBeVisible();
+  });
+
+  it('should show warning text when match expression matches no target', async () => {
+    const { user } = renderWithServiceContextAndRouter(<CreateRule />, { history });
+
+    const matchExpressionInput = screen.getByLabelText('Match Expression *');
+    expect(matchExpressionInput).toBeInTheDocument();
+    expect(matchExpressionInput).toBeVisible();
+
+    await user.type(matchExpressionInput, 'false');
+
+    const exphelperText = await screen.findByText('Warning: Match expression matches no targets.');
+    expect(exphelperText).toBeInTheDocument();
+    expect(exphelperText).toBeVisible();
+  });
+
+  it('should update template selection when template list updates', async () => {
     const { user } = renderWithServiceContextAndRouter(<CreateRule />, { history });
 
     const matchExpressionInput = screen.getByLabelText('Match Expression *');
@@ -114,7 +166,16 @@ describe('<CreateRule />', () => {
 
     await user.type(matchExpressionInput, escapeKeyboardInput(mockRule.matchExpression));
 
-    const oldSelection = await screen.findByText(mockEventTemplate.name);
+    // Select a template
+    await user.click(screen.getByText('Select a Template'));
+
+    const option = await screen.findByText(mockEventTemplate.name);
+    expect(option).toBeInTheDocument();
+    expect(option).toBeVisible();
+
+    await user.click(option);
+
+    const oldSelection = screen.getByText(mockEventTemplate.name);
     expect(oldSelection).toBeInTheDocument();
     expect(oldSelection).toBeVisible();
 
@@ -127,7 +188,7 @@ describe('<CreateRule />', () => {
     expect(placeHolder).toBeVisible();
   });
 
-  it('should submit form if form input is valid', async () => {
+  it('should submit form when form input is valid and create button is clicked', async () => {
     const { user } = renderWithServiceContextAndRouter(<CreateRule />, { history });
 
     const nameInput = screen.getByLabelText('Name *');
@@ -188,28 +249,4 @@ describe('<CreateRule />', () => {
     expect(createSpy).toHaveBeenCalledTimes(1);
     expect(createSpy).toHaveBeenCalledWith(mockRule);
   });
-
-  it('should show error helper text if rule form inputs are invalid', async () => {
-    const { user } = renderWithServiceContextAndRouter(<CreateRule />, { history });
-
-    const nameInput = screen.getByLabelText('Name *');
-    expect(nameInput).toBeInTheDocument();
-    expect(nameInput).toBeVisible();
-
-    await user.type(nameInput, 'some name with spaces');
-
-    const nameHelperText = screen.getByText('A rule name can contain only letters, numbers, and underscores.');
-    expect(nameHelperText).toBeInTheDocument();
-    expect(nameHelperText).toBeVisible();
-
-    const matchExpressionInput = screen.getByLabelText('Match Expression *');
-    expect(matchExpressionInput).toBeInTheDocument();
-    expect(matchExpressionInput).toBeVisible();
-
-    await user.type(matchExpressionInput, 'somethingwrong');
-
-    const exphelperText = await screen.findByText('The expression matching failed.');
-    expect(exphelperText).toBeInTheDocument();
-    expect(exphelperText).toBeVisible();
-  });
 });
diff --git a/src/test/SecurityPanel/Credentials/StoreCredentials.test.tsx b/src/test/SecurityPanel/Credentials/StoreCredentials.test.tsx
index 2e59adbf1..99e58d4c0 100644
--- a/src/test/SecurityPanel/Credentials/StoreCredentials.test.tsx
+++ b/src/test/SecurityPanel/Credentials/StoreCredentials.test.tsx
@@ -111,81 +111,95 @@ jest.mock('@app/SecurityPanel/Credentials/CreateCredentialModal', () => {
 
 jest
   .spyOn(defaultServices.notificationChannel, 'messages')
-  .mockReturnValueOnce(of(mockCredentialNotification)) // 'adds the correct table entry when a stored notification is received'
+  .mockReturnValueOnce(of(mockCredentialNotification)) // adds the correct table entry when a stored notification is received
   .mockReturnValueOnce(of())
   .mockReturnValueOnce(of())
 
-  .mockReturnValueOnce(of()) // 'removes the correct table entry when a deletion notification is received'
+  .mockReturnValueOnce(of()) // removes the correct table entry when a deletion notification is received
   .mockReturnValueOnce(of(mockCredentialNotification))
   .mockReturnValueOnce(of())
 
-  .mockReturnValueOnce(of()) // 'renders an empty table after receiving deletion notifications for all credentials'
+  .mockReturnValueOnce(of()) // renders an empty table after receiving deletion notifications for all credentials'
   .mockReturnValueOnce(of(mockCredentialNotification))
   .mockReturnValueOnce(of())
 
-  .mockReturnValueOnce(of()) // 'expands to show the correct nested targets'
+  .mockReturnValueOnce(of()) // expands to show the correct nested targets
   .mockReturnValueOnce(of())
   .mockReturnValueOnce(of())
   .mockReturnValueOnce(of())
   .mockReturnValueOnce(of())
 
-  .mockReturnValueOnce(of()) // 'decrements the correct count and updates the correct nested table when a lost target notification is received'
+  .mockReturnValueOnce(of()) // decrements the correct count and updates the correct nested table when a lost target notification is received
   .mockReturnValueOnce(of())
   .mockReturnValueOnce(of(mockLostTargetNotification))
-  .mockReturnValueOnce(of(mockLostTargetNotification))
-  .mockReturnValueOnce(of(mockLostTargetNotification))
+  .mockReturnValueOnce(of())
+  .mockReturnValueOnce(of())
 
-  .mockReturnValueOnce(of()) // 'increments the correct count and updates the correct nested table when a found target notification is received'
+  .mockReturnValueOnce(of()) // increments the correct count and updates the correct nested table when a found target notification is received
   .mockReturnValueOnce(of())
   .mockReturnValueOnce(of(mockFoundTargetNotification))
-  .mockReturnValueOnce(of(mockFoundTargetNotification))
-  .mockReturnValueOnce(of(mockFoundTargetNotification))
+  .mockReturnValueOnce(of())
+  .mockReturnValueOnce(of())
 
-  .mockReturnValue(of()), // remaining tests
-  jest.spyOn(defaultServices.api, 'deleteCredentials').mockReturnValue(of(true));
-jest
-  .spyOn(defaultServices.api, 'getCredentials')
+  .mockReturnValue(of()); // remaining tests
 
-  .mockReturnValueOnce(of([])) // 'adds the correct table entry when a stored notification is received'
+jest.spyOn(defaultServices.api, 'deleteCredentials').mockReturnValue(of(true));
+const apiRequestSpy = jest
+  .spyOn(defaultServices.api, 'getCredentials')
+  .mockReturnValueOnce(of([])) // adds the correct table entry when a stored notification is received
 
-  .mockReturnValueOnce(of([mockCredential, mockAnotherCredential])) // 'removes the correct table entry when a deletion notification is received'
+  .mockReturnValueOnce(of([mockCredential, mockAnotherCredential])) // removes the correct table entry when a deletion notification is received
 
-  .mockReturnValueOnce(of([mockCredential])) // 'renders an empty table after receiving deletion notifications for all credentials'
+  .mockReturnValueOnce(of([mockCredential])) // renders an empty table after receiving deletion notifications for all credentials
 
-  .mockReturnValueOnce(of([mockCredential, mockAnotherCredential])) // 'expands to show the correct nested targets'
+  .mockReturnValueOnce(of([mockCredential, mockAnotherCredential])) // expands to show the correct nested targets
 
-  .mockReturnValueOnce(of([mockCredential, mockAnotherCredential])) // 'decrements the correct count and updates the correct nested table when a lost target notification is received'
+  .mockReturnValueOnce(of([mockCredential, mockAnotherCredential])) // decrements the correct count and updates the correct nested table when a lost target notification is received
+  .mockReturnValueOnce(
+    of([mockCredential, { ...mockAnotherCredential, numMatchingTargets: mockAnotherCredential.numMatchingTargets - 1 }])
+  )
 
-  .mockReturnValueOnce(of([mockCredential, mockAnotherCredential])) // 'increments the correct count and updates the correct nested table when a found target notification is received'
+  .mockReturnValueOnce(of([mockCredential, mockAnotherCredential])) // increments the correct count and updates the correct nested table when a found target notification is received
+  .mockReturnValueOnce(
+    of([mockCredential, { ...mockAnotherCredential, numMatchingTargets: mockAnotherCredential.numMatchingTargets + 1 }])
+  )
 
-  .mockReturnValueOnce(of([])) // 'opens the auth modal when Add is clicked'
+  .mockReturnValueOnce(of([])) // opens the auth modal when Add is clicked
 
-  .mockReturnValueOnce(of([mockCredential, mockAnotherCredential])) // 'shows a popup when Delete is clicked and makes a delete request when deleting one credential after confirming Delete'
+  .mockReturnValueOnce(of([mockCredential, mockAnotherCredential])) // shows a popup when Delete is clicked and makes a delete request when deleting one credential after confirming Delete
 
-  .mockReturnValueOnce(of([mockCredential, mockAnotherCredential])) // 'makes multiple delete requests when all credentials are deleted at once'
+  .mockReturnValueOnce(of([mockCredential, mockAnotherCredential])) // makes multiple delete requests when all credentials are deleted at once
 
   .mockReturnValue(throwError(() => new Error('Too many calls')));
 
 jest
   .spyOn(defaultServices.api, 'getCredential')
-  .mockReturnValueOnce(of(mockMatchedCredentialResponse)) // 'expands to show the correct nested targets'
+  .mockReturnValueOnce(of(mockMatchedCredentialResponse)) // expands to show the correct nested targets
   .mockReturnValueOnce(of(mockAnotherMatchedCredentialResponse))
 
-  .mockReturnValueOnce(of(mockMatchedCredentialResponse)) // 'decrements the correct count and updates the correct nested table when a lost target notification is received'
-  .mockReturnValueOnce(of(mockAnotherMatchedCredentialResponse))
+  .mockReturnValueOnce(of(mockMatchedCredentialResponse)) // decrements the correct count and updates the correct nested table when a lost target notification is received
+  .mockReturnValueOnce(of({ ...mockAnotherMatchedCredentialResponse, targets: [mockAnotherMatchingTarget] }))
 
-  .mockReturnValueOnce(of(mockMatchedCredentialResponse)) // 'increments the correct count and updates the correct nested table when a found target notification is received'
-  .mockReturnValueOnce(of(mockAnotherMatchedCredentialResponse))
+  .mockReturnValueOnce(of(mockMatchedCredentialResponse)) // increments the correct count and updates the correct nested table when a found target notification is received
+  .mockReturnValueOnce(
+    of({
+      ...mockAnotherMatchedCredentialResponse,
+      targets: mockAnotherMatchedCredentialResponse.targets.concat(mockYetAnotherMatchingTarget),
+    })
+  )
 
   .mockReturnValue(throwError(() => new Error('Too many calls')));
 
 jest.spyOn(defaultServices.settings, 'deletionDialogsEnabledFor').mockReturnValueOnce(true);
 
 describe('<StoreCredentials />', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
   afterEach(cleanup);
 
   it('adds the correct table entry when a stored notification is received', async () => {
-    const apiRequestSpy = jest.spyOn(defaultServices.api, 'getCredentials');
     renderWithServiceContext(<StoreCredentials />);
 
     expect(screen.getByText(mockCredential.matchExpression)).toBeInTheDocument();
@@ -194,7 +208,6 @@ describe('<StoreCredentials />', () => {
   });
 
   it('removes the correct table entry when a deletion notification is received', async () => {
-    const apiRequestSpy = jest.spyOn(defaultServices.api, 'getCredentials');
     renderWithServiceContext(<StoreCredentials />);
 
     expect(screen.queryByText(mockCredential.matchExpression)).not.toBeInTheDocument();
@@ -219,39 +232,40 @@ describe('<StoreCredentials />', () => {
   it('expands to show the correct nested targets', async () => {
     const { user } = renderWithServiceContext(<StoreCredentials />);
 
+    const targets = [mockTarget, mockAnotherTarget, mockAnotherMatchingTarget];
+    targets.forEach(({ alias, connectUrl }) => {
+      expect(screen.queryByText(`${alias} (${connectUrl})`)).not.toBeInTheDocument();
+    });
     expect(screen.queryByText('Target')).not.toBeInTheDocument();
-    expect(screen.queryByText(`${mockTarget.alias} (${mockTarget.connectUrl})`)).not.toBeInTheDocument();
-    expect(screen.queryByText(`${mockAnotherTarget.alias} (${mockAnotherTarget.connectUrl})`)).not.toBeInTheDocument();
-    expect(
-      screen.queryByText(`${mockAnotherMatchingTarget.alias} (${mockAnotherMatchingTarget.connectUrl})`)
-    ).not.toBeInTheDocument();
 
     const expandButtons = screen.getAllByLabelText('Details');
+    expect(expandButtons.length).toBe(2);
 
     await user.click(expandButtons[0]);
 
-    expect(screen.getByText('Target')).toBeInTheDocument();
     expect(screen.getByText(`${mockTarget.alias} (${mockTarget.connectUrl})`)).toBeInTheDocument();
-    expect(screen.queryByText(`${mockAnotherTarget.alias} (${mockAnotherTarget.connectUrl})`)).not.toBeInTheDocument();
-    expect(
-      screen.queryByText(`${mockAnotherMatchingTarget.alias} (${mockAnotherMatchingTarget.connectUrl})`)
-    ).not.toBeInTheDocument();
+    expect(screen.getByText(`${mockTarget.alias} (${mockTarget.connectUrl})`)).toBeVisible();
+
+    const otherTargets = targets.filter((t) => t.connectUrl !== mockTarget.connectUrl);
+    otherTargets.forEach(({ alias, connectUrl }) =>
+      expect(screen.queryByText(`${alias} (${connectUrl})`)).not.toBeInTheDocument()
+    );
 
     await user.click(expandButtons[1]);
 
-    expect(screen.getByText(`${mockAnotherTarget.alias} (${mockAnotherTarget.connectUrl})`)).toBeInTheDocument();
-    expect(
-      screen.getByText(`${mockAnotherMatchingTarget.alias} (${mockAnotherMatchingTarget.connectUrl})`)
-    ).toBeInTheDocument();
+    otherTargets.forEach(({ alias, connectUrl }) => {
+      const element = screen.getByText(`${alias} (${connectUrl})`);
+      expect(element).toBeInTheDocument();
+      expect(element).toBeVisible();
+    });
   });
 
   it('decrements the correct count and updates the correct nested table when a lost target notification is received', async () => {
     const { user } = renderWithServiceContext(<StoreCredentials />);
 
     // both counts should now be equal to 1
-    const counts = screen.getAllByText(mockAnotherCredential.numMatchingTargets - 1);
-    expect(within(counts[0]).getByText(mockCredential.numMatchingTargets)).toBeTruthy();
-    expect(within(counts[1]).getByText(mockAnotherCredential.numMatchingTargets - 1)).toBeTruthy();
+    const counts = screen.getAllByText('1');
+    expect(counts.length).toBe(2);
 
     const expandButtons = screen.getAllByLabelText('Details');
 
@@ -262,9 +276,10 @@ describe('<StoreCredentials />', () => {
     await user.click(expandButtons[1]);
 
     expect(screen.queryByText(`${mockAnotherTarget.alias} (${mockAnotherTarget.connectUrl})`)).not.toBeInTheDocument();
-    expect(
-      screen.getByText(`${mockAnotherMatchingTarget.alias} (${mockAnotherMatchingTarget.connectUrl})`)
-    ).toBeInTheDocument();
+
+    const element = screen.getByText(`${mockAnotherMatchingTarget.alias} (${mockAnotherMatchingTarget.connectUrl})`);
+    expect(element).toBeInTheDocument();
+    expect(element).toBeVisible();
   });
 
   it('increments the correct count and updates the correct nested table when a found target notification is received', async () => {
@@ -284,13 +299,11 @@ describe('<StoreCredentials />', () => {
 
     await user.click(expandButtons[1]);
 
-    expect(screen.getByText(`${mockAnotherTarget.alias} (${mockAnotherTarget.connectUrl})`)).toBeInTheDocument();
-    expect(
-      screen.getByText(`${mockAnotherMatchingTarget.alias} (${mockAnotherMatchingTarget.connectUrl})`)
-    ).toBeInTheDocument();
-    expect(
-      screen.getByText(`${mockYetAnotherMatchingTarget.alias} (${mockYetAnotherMatchingTarget.connectUrl})`)
-    ).toBeInTheDocument();
+    [mockAnotherTarget, mockAnotherMatchingTarget, mockYetAnotherMatchingTarget].forEach(({ alias, connectUrl }) => {
+      const element = screen.getByText(`${alias} (${connectUrl})`);
+      expect(element).toBeInTheDocument();
+      expect(element).toBeVisible();
+    });
   });
 
   it('opens the auth modal when Add is clicked', async () => {
@@ -304,7 +317,6 @@ describe('<StoreCredentials />', () => {
   });
 
   it('shows a popup when Delete is clicked and makes a delete request when deleting one credential after confirming Delete', async () => {
-    const queryRequestSpy = jest.spyOn(defaultServices.api, 'getCredentials');
     const deleteRequestSpy = jest.spyOn(defaultServices.api, 'deleteCredentials');
     const { user } = renderWithServiceContext(<StoreCredentials />);
 
@@ -322,12 +334,11 @@ describe('<StoreCredentials />', () => {
 
     expect(dialogWarningSpy).toBeCalledTimes(1);
     expect(dialogWarningSpy).toBeCalledWith(DeleteOrDisableWarningType.DeleteCredentials, false);
-    expect(queryRequestSpy).toHaveBeenCalledTimes(1);
+
     expect(deleteRequestSpy).toHaveBeenCalledTimes(1);
   });
 
   it('makes multiple delete requests when all credentials are deleted at once w/o popup warning', async () => {
-    const queryRequestSpy = jest.spyOn(defaultServices.api, 'getCredentials');
     const deleteRequestSpy = jest.spyOn(defaultServices.api, 'deleteCredentials');
     const { user } = renderWithServiceContext(<StoreCredentials />);
 
@@ -340,7 +351,7 @@ describe('<StoreCredentials />', () => {
     const selectAllCheck = checkboxes[0];
     await user.click(selectAllCheck);
     await user.click(screen.getByText('Delete'));
-    expect(queryRequestSpy).toHaveBeenCalledTimes(1);
+
     expect(deleteRequestSpy).toHaveBeenCalledTimes(2);
   });
 });