diff --git a/static/app/views/replays/detail/playlist/index.tsx b/static/app/views/replays/detail/playlist/index.tsx
index e18fb134d4c1ca..61e5c380240459 100644
--- a/static/app/views/replays/detail/playlist/index.tsx
+++ b/static/app/views/replays/detail/playlist/index.tsx
@@ -1,3 +1,9 @@
+import {parseAsString, useQueryState} from 'nuqs';
+
+import {Flex, Grid} from '@sentry/scraps/layout';
+import {Text} from '@sentry/scraps/text';
+
+import {Alert} from 'sentry/components/core/alert';
import ReplayTable from 'sentry/components/replays/table/replayTable';
import {
ReplayBrowserColumn,
@@ -6,6 +12,8 @@ import {
ReplayOSColumn,
ReplaySessionColumn,
} from 'sentry/components/replays/table/replayTableColumns';
+import {ProvidedFormattedQuery} from 'sentry/components/searchQueryBuilder/formattedQuery';
+import {t} from 'sentry/locale';
import {useReplayPlaylist} from 'sentry/utils/replays/playback/providers/replayPlaylistProvider';
import {useLocation} from 'sentry/utils/useLocation';
import useAllMobileProj from 'sentry/views/replays/detail/useAllMobileProj';
@@ -28,20 +36,37 @@ const MOBILE_COLUMNS = [
export default function Playlist() {
const {replays, currentReplayIndex, isLoading} = useReplayPlaylist();
const location = useLocation();
+ const [query] = useQueryState('query', parseAsString.withDefault(''));
const {allMobileProj} = useAllMobileProj({});
const columns = allMobileProj ? MOBILE_COLUMNS : VISIBLE_COLUMNS;
+ const rows = query ? 'max-content auto' : 'auto';
+
return (
-
+
+
+ {query ? (
+ }
+ >
+ {t('This playlist is filtered by:')}
+
+ ) : null}
+
+
+
);
}