diff --git a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetGraphExplorer.tsx b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetGraphExplorer.tsx
index eca01fb130fbd..50a7a4059d819 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetGraphExplorer.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetGraphExplorer.tsx
@@ -718,7 +718,6 @@ const AssetGraphExplorerWithData = ({
             <TopbarWrapper>
               <Box flex={{direction: 'column'}} style={{width: '100%'}}>
                 <Box
-                  border={filterBar ? 'bottom' : undefined}
                   flex={{gap: 12, alignItems: 'center'}}
                   padding={{left: showSidebar ? 12 : 24, vertical: 12, right: 12}}
                 >
diff --git a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetGraphFilterBar.oss.tsx b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetGraphFilterBar.oss.tsx
index f78adb34dfba5..076889f9be53f 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetGraphFilterBar.oss.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetGraphFilterBar.oss.tsx
@@ -24,6 +24,7 @@ export const AssetGraphFilterBar = ({
     <Box
       flex={{direction: 'row', justifyContent: 'space-between', gap: 12, alignItems: 'center'}}
       padding={{vertical: 8, horizontal: 12}}
+      border="top"
     >
       <Box flex={{gap: 12, alignItems: 'center', direction: 'row', grow: 1}}>
         {activeFiltersJsx}
diff --git a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/sidebar/Sidebar.tsx b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/sidebar/Sidebar.tsx
index bbf5976ee08cd..37ccf8c99185f 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/sidebar/Sidebar.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/sidebar/Sidebar.tsx
@@ -306,7 +306,6 @@ export const AssetGraphExplorerSidebar = React.memo(
             padding: '12px 24px',
             paddingRight: 12,
           }}
-          border="bottom"
         >
           <SearchFilter
             values={React.useMemo(() => {
@@ -321,7 +320,7 @@ export const AssetGraphExplorerSidebar = React.memo(
             <Button icon={<Icon name="panel_show_right" />} onClick={hideSidebar} />
           </Tooltip>
         </Box>
-        <div>
+        <Box border="top">
           {loading ? (
             <Box flex={{direction: 'column', gap: 9}} padding={12}>
               <Skeleton $height={21} $width="50%" />
@@ -407,7 +406,7 @@ export const AssetGraphExplorerSidebar = React.memo(
               </Inner>
             </Container>
           )}
-        </div>
+        </Box>
       </div>
     );
   },
diff --git a/js_modules/dagster-ui/packages/ui-core/src/asset-selection/useAssetSelectionFiltering.tsx b/js_modules/dagster-ui/packages/ui-core/src/asset-selection/useAssetSelectionFiltering.tsx
new file mode 100644
index 0000000000000..bcf797b8e5323
--- /dev/null
+++ b/js_modules/dagster-ui/packages/ui-core/src/asset-selection/useAssetSelectionFiltering.tsx
@@ -0,0 +1,55 @@
+import {useMemo} from 'react';
+import {FilterableAssetDefinition} from 'shared/assets/useAssetDefinitionFilterState.oss';
+
+import {COMMON_COLLATOR} from '../app/Util';
+import {tokenForAssetKey} from '../asset-graph/Utils';
+import {AssetNodeForGraphQueryFragment} from '../asset-graph/types/useAssetGraphData.types';
+import {useAssetGraphData} from '../asset-graph/useAssetGraphData';
+
+export const useAssetSelectionFiltering = <
+  T extends {
+    id: string;
+    key: {path: Array<string>};
+    definition?: FilterableAssetDefinition | null;
+  },
+>({
+  assetSelection,
+  assets,
+}: {
+  assetSelection: string;
+
+  assets: T[];
+}) => {
+  const assetsByKey = useMemo(
+    () => Object.fromEntries(assets.map((asset) => [tokenForAssetKey(asset.key), asset])),
+    [assets],
+  );
+
+  const {fetchResult, graphQueryItems, graphAssetKeys} = useAssetGraphData(
+    assetSelection,
+    useMemo(
+      () => ({
+        hideEdgesToNodesOutsideQuery: true,
+        hideNodesMatching: (node: AssetNodeForGraphQueryFragment) => {
+          return !assetsByKey[tokenForAssetKey(node.assetKey)];
+        },
+      }),
+      [assetsByKey],
+    ),
+  );
+
+  const filtered = useMemo(() => {
+    return (
+      graphAssetKeys
+        .map((key) => assetsByKey[tokenForAssetKey(key)]!)
+        .sort((a, b) => COMMON_COLLATOR.compare(a.key.path.join(''), b.key.path.join(''))) ?? []
+    );
+  }, [graphAssetKeys, assetsByKey]);
+
+  const filteredByKey = useMemo(
+    () => Object.fromEntries(filtered.map((asset) => [tokenForAssetKey(asset.key), asset])),
+    [filtered],
+  );
+
+  return {filtered, filteredByKey, fetchResult, graphAssetKeys, graphQueryItems};
+};
diff --git a/js_modules/dagster-ui/packages/ui-core/src/asset-selection/useAssetSelectionInput.tsx b/js_modules/dagster-ui/packages/ui-core/src/asset-selection/useAssetSelectionInput.tsx
new file mode 100644
index 0000000000000..db84679e254d3
--- /dev/null
+++ b/js_modules/dagster-ui/packages/ui-core/src/asset-selection/useAssetSelectionInput.tsx
@@ -0,0 +1,34 @@
+import {AssetGraphAssetSelectionInput} from 'shared/asset-graph/AssetGraphAssetSelectionInput.oss';
+import {useAssetSelectionState} from 'shared/asset-selection/useAssetSelectionState.oss';
+import {FilterableAssetDefinition} from 'shared/assets/useAssetDefinitionFilterState.oss';
+
+import {useAssetSelectionFiltering} from './useAssetSelectionFiltering';
+
+export const useAssetSelectionInput = <
+  T extends {
+    id: string;
+    key: {path: Array<string>};
+    definition?: FilterableAssetDefinition | null;
+  },
+>(
+  assets: T[],
+) => {
+  const [assetSelection, setAssetSelection] = useAssetSelectionState();
+
+  const {graphQueryItems, fetchResult, filtered} = useAssetSelectionFiltering({
+    assetSelection,
+    assets,
+  });
+
+  const filterInput = (
+    <AssetGraphAssetSelectionInput
+      items={graphQueryItems}
+      value={assetSelection}
+      placeholder="Type an asset subset…"
+      onChange={setAssetSelection}
+      popoverPosition="bottom-left"
+    />
+  );
+
+  return {filterInput, fetchResult, filtered, assetSelection, setAssetSelection};
+};
diff --git a/js_modules/dagster-ui/packages/ui-core/src/asset-selection/useAssetSelectionState.oss.tsx b/js_modules/dagster-ui/packages/ui-core/src/asset-selection/useAssetSelectionState.oss.tsx
new file mode 100644
index 0000000000000..080cc61ff0b20
--- /dev/null
+++ b/js_modules/dagster-ui/packages/ui-core/src/asset-selection/useAssetSelectionState.oss.tsx
@@ -0,0 +1,8 @@
+import {useQueryPersistedState} from '../hooks/useQueryPersistedState';
+
+export function useAssetSelectionState() {
+  return useQueryPersistedState<string>({
+    queryKey: 'asset-selection',
+    defaults: {['asset-selection']: ''},
+  });
+}
diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetTable.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetTable.tsx
index 4a5961dd8ce58..41ad060d14104 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetTable.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetTable.tsx
@@ -39,7 +39,7 @@ interface Props {
   belowActionBarComponents: React.ReactNode;
   prefixPath: string[];
   displayPathForAsset: (asset: Asset) => string[];
-  searchPath: string;
+  assetSelection: string;
   isFiltered: boolean;
   kindFilter?: StaticSetFilter<string>;
   isLoading: boolean;
@@ -52,7 +52,7 @@ export const AssetTable = ({
   refreshState,
   prefixPath,
   displayPathForAsset,
-  searchPath,
+  assetSelection,
   isFiltered,
   view,
   kindFilter,
@@ -81,7 +81,7 @@ export const AssetTable = ({
 
   const content = () => {
     if (!assets.length) {
-      if (searchPath) {
+      if (assetSelection) {
         return (
           <Box padding={{top: 64}}>
             <NonIdealState
@@ -90,12 +90,12 @@ export const AssetTable = ({
               description={
                 isFiltered ? (
                   <div>
-                    No assets matching <strong>{searchPath}</strong> were found in the selected
+                    No assets matching <strong>{assetSelection}</strong> were found in the selected
                     filters
                   </div>
                 ) : (
                   <div>
-                    No assets matching <strong>{searchPath}</strong> were found
+                    No assets matching <strong>{assetSelection}</strong> were found
                   </div>
                 )
               }
diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetsCatalogTable.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetsCatalogTable.tsx
index bfeebf6c4cf6c..7fa3a4aba435d 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetsCatalogTable.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetsCatalogTable.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import {useCallback, useContext, useEffect, useLayoutEffect, useMemo, useState} from 'react';
 import {useRouteMatch} from 'react-router-dom';
 import {useSetRecoilState} from 'recoil';
-import {AssetCatalogTableBottomActionBar} from 'shared/assets/AssetCatalogTableBottomActionBar.oss';
+import {AssetGraphFilterBar} from 'shared/asset-graph/AssetGraphFilterBar.oss';
 import {useAssetCatalogFiltering} from 'shared/assets/useAssetCatalogFiltering.oss';
 
 import {AssetTable} from './AssetTable';
@@ -19,7 +19,6 @@ import {
   AssetCatalogTableQueryVersion,
 } from './types/AssetsCatalogTable.types';
 import {AssetViewType, useAssetView} from './useAssetView';
-import {useBasicAssetSearchInput} from './useBasicAssetSearchInput';
 import {gql, useApolloClient} from '../apollo-client';
 import {AppContext} from '../app/AppContext';
 import {PYTHON_ERROR_FRAGMENT} from '../app/PythonErrorFragment';
@@ -27,6 +26,7 @@ import {PythonErrorInfo} from '../app/PythonErrorInfo';
 import {FIFTEEN_SECONDS, useRefreshAtInterval} from '../app/QueryRefresh';
 import {currentPageAtom} from '../app/analytics';
 import {PythonErrorFragment} from '../app/types/PythonErrorFragment.types';
+import {useAssetSelectionInput} from '../asset-selection/useAssetSelectionInput';
 import {AssetGroupSelector} from '../graphql/types';
 import {useUpdatingRef} from '../hooks/useUpdatingRef';
 import {useBlockTraceUntilTrue} from '../performance/TraceContext';
@@ -210,13 +210,10 @@ export const AssetsCatalogTable = ({
     activeFiltersJsx,
     kindFilter,
   } = useAssetCatalogFiltering({assets});
+  const {filterInput, filtered, fetchResult, assetSelection, setAssetSelection} =
+    useAssetSelectionInput(partiallyFiltered);
 
-  const {searchPath, filterInput, filtered} = useBasicAssetSearchInput(
-    partiallyFiltered,
-    prefixPath,
-  );
-
-  useBlockTraceUntilTrue('useAllAssets', !!assets?.length);
+  useBlockTraceUntilTrue('useAllAssets', !!assets?.length && !fetchResult.loading);
 
   const {displayPathForAsset, displayed} = useMemo(
     () =>
@@ -280,11 +277,15 @@ export const AssetsCatalogTable = ({
         </>
       }
       belowActionBarComponents={
-        <AssetCatalogTableBottomActionBar activeFiltersJsx={activeFiltersJsx} />
+        <AssetGraphFilterBar
+          activeFiltersJsx={activeFiltersJsx}
+          assetSelection={assetSelection}
+          setAssetSelection={setAssetSelection}
+        />
       }
       refreshState={refreshState}
       prefixPath={prefixPath || emptyArray}
-      searchPath={searchPath}
+      assetSelection={assetSelection}
       displayPathForAsset={displayPathForAsset}
       kindFilter={kindFilter}
     />
diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/__tests__/AssetTables.test.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/__tests__/AssetTables.test.tsx
index 5874eba0c2150..1c117cee6d3e8 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/assets/__tests__/AssetTables.test.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/assets/__tests__/AssetTables.test.tsx
@@ -32,6 +32,20 @@ const MOCKS = [
 // This file must be mocked because Jest can't handle `import.meta.url`.
 jest.mock('../../graph/asyncGraphLayout', () => ({}));
 
+jest.mock('shared/asset-selection/useAssetSelectionInput', () => {
+  return {
+    useAssetSelectionInput: (assets: any) => {
+      return {
+        filterInput: <div />,
+        fetchResult: {loading: false},
+        filtered: assets,
+        assetSelection: '',
+        setAssetSelection: () => {},
+      };
+    },
+  };
+});
+
 describe('AssetTable', () => {
   beforeAll(() => {
     mockViewportClientRect();
diff --git a/js_modules/dagster-ui/packages/ui-core/src/search/types.ts b/js_modules/dagster-ui/packages/ui-core/src/search/types.ts
index a9d346c9e0128..dc70442a2c0da 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/search/types.ts
+++ b/js_modules/dagster-ui/packages/ui-core/src/search/types.ts
@@ -9,7 +9,7 @@ import {
   SearchScheduleFragment,
   SearchSensorFragment,
 } from './types/useGlobalSearch.types';
-import {DefinitionTag} from '../graphql/types';
+import {AssetKey, DefinitionTag} from '../graphql/types';
 
 export enum SearchResultType {
   AssetGroup,
@@ -54,6 +54,7 @@ export function isAssetFilterSearchResultType(
 }
 
 export type SearchResult = {
+  key?: AssetKey;
   label: string;
   description: string;
   href: string;
diff --git a/js_modules/dagster-ui/packages/ui-core/src/search/useGlobalSearch.tsx b/js_modules/dagster-ui/packages/ui-core/src/search/useGlobalSearch.tsx
index 9c3b68ed9f170..c17bb0674470e 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/search/useGlobalSearch.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/search/useGlobalSearch.tsx
@@ -17,8 +17,13 @@ import {useIndexedDBCachedQuery} from './useIndexedDBCachedQuery';
 import {gql} from '../apollo-client';
 import {AppContext} from '../app/AppContext';
 import {PYTHON_ERROR_FRAGMENT} from '../app/PythonErrorFragment';
-import {displayNameForAssetKey, isHiddenAssetGroupJob} from '../asset-graph/Utils';
+import {
+  displayNameForAssetKey,
+  isHiddenAssetGroupJob,
+  tokenForAssetKey,
+} from '../asset-graph/Utils';
 import {assetDetailsPathForKey} from '../assets/assetDetailsPathForKey';
+import {AssetTableFragment} from '../assets/types/AssetTableFragment.types';
 import {AssetOwner, DefinitionTag} from '../graphql/types';
 import {buildTagString} from '../ui/tagAsString';
 import {assetOwnerAsString} from '../workspace/assetOwnerAsString';
@@ -195,30 +200,39 @@ const primaryDataToSearchResults = (input: {data?: SearchPrimaryQuery}) => {
 };
 
 const secondaryDataToSearchResults = (
-  input: {data?: SearchSecondaryQuery},
+  input: {data?: SearchSecondaryQuery; includedAssetsByKey?: {[key: string]: AssetTableFragment}},
   searchContext: 'global' | 'catalog',
 ) => {
-  const {data} = input;
+  const {data, includedAssetsByKey} = input;
   if (!data?.assetsOrError || data.assetsOrError.__typename === 'PythonError') {
     return [];
   }
 
-  const {nodes} = data.assetsOrError;
-
-  const assets: SearchResult[] = nodes
-    .filter(({definition}) => definition !== null)
-    .map((node) => ({
-      label: displayNameForAssetKey(node.key),
-      description: `Asset in ${buildRepoPathForHuman(
-        node.definition!.repository.name,
-        node.definition!.repository.location.name,
-      )}`,
-      node,
-      href: assetDetailsPathForKey(node.key),
-      type: SearchResultType.Asset,
-      tags: node.definition!.tags,
-      kinds: node.definition!.kinds,
-    }));
+  const {nodes: _nodes} = data.assetsOrError;
+
+  const nodes = _nodes.filter(({definition, key}) => {
+    if (definition === null) {
+      return false;
+    }
+    if (includedAssetsByKey && !includedAssetsByKey[tokenForAssetKey(key)]) {
+      return false;
+    }
+    return true;
+  });
+
+  const assets: SearchResult[] = nodes.map((node) => ({
+    key: node.key,
+    label: displayNameForAssetKey(node.key),
+    description: `Asset in ${buildRepoPathForHuman(
+      node.definition!.repository.name,
+      node.definition!.repository.location.name,
+    )}`,
+    node,
+    href: assetDetailsPathForKey(node.key),
+    type: SearchResultType.Asset,
+    tags: node.definition!.tags,
+    kinds: node.definition!.kinds,
+  }));
 
   if (searchContext === 'global') {
     return [...assets];
@@ -320,7 +334,17 @@ type IndexBuffer = {
  *
  * A `terminate` function is provided, but it's probably not necessary to use it.
  */
-export const useGlobalSearch = ({searchContext}: {searchContext: 'global' | 'catalog'}) => {
+export const useGlobalSearch = ({
+  searchContext,
+
+  // includedAssetsByKey - is a pre-filtered list of assets keys that search can show.
+  // This is to take into account any asset selection filtering on the page.
+  // This is only used in the dagster plus catalog.
+  includedAssetsByKey,
+}: {
+  searchContext: 'global' | 'catalog';
+  includedAssetsByKey?: {[key: string]: AssetTableFragment};
+}) => {
   const primarySearch = useRef<WorkerSearchResult | null>(null);
   const secondarySearch = useRef<WorkerSearchResult | null>(null);
 
@@ -383,14 +407,24 @@ export const useGlobalSearch = ({searchContext}: {searchContext: 'global' | 'cat
     if (!secondaryData) {
       return;
     }
-    const results = secondaryDataToSearchResults({data: secondaryData}, searchContext);
+
+    const results = secondaryDataToSearchResults(
+      {data: secondaryData, includedAssetsByKey},
+      searchContext,
+    );
     const augmentedResults = augmentSearchResults(results, searchContext);
     if (!secondarySearch.current) {
       secondarySearch.current = createSearchWorker('secondary', fuseOptions);
     }
     secondarySearch.current.update(augmentedResults);
     consumeBufferEffect(secondarySearchBuffer, secondarySearch.current);
-  }, [consumeBufferEffect, secondaryData, searchContext, augmentSearchResults]);
+  }, [
+    consumeBufferEffect,
+    secondaryData,
+    searchContext,
+    augmentSearchResults,
+    includedAssetsByKey,
+  ]);
 
   const primarySearchBuffer = useRef<IndexBuffer | null>(null);
   const secondarySearchBuffer = useRef<IndexBuffer | null>(null);