diff --git a/frontend/src/components/ACLPage/List/List.tsx b/frontend/src/components/ACLPage/List/List.tsx
index 61a443932..8d04050ff 100644
--- a/frontend/src/components/ACLPage/List/List.tsx
+++ b/frontend/src/components/ACLPage/List/List.tsx
@@ -26,6 +26,8 @@ import ResourcePageHeading from 'components/common/ResourcePageHeading/ResourceP
 import BreakableTextCell from 'components/common/NewTable/BreakableTextCell';
 import { useQueryPersister } from 'components/common/NewTable/ColumnFilter';
 import { ActionPermissionWrapper } from 'components/common/ActionComponent';
+import useFts from 'components/common/Fts/useFts';
+import Fts from 'components/common/Fts/Fts';
 
 import * as S from './List.styled';
 
@@ -33,7 +35,8 @@ const ACList: React.FC = () => {
   const { clusterName } = useAppParams<{ clusterName: ClusterName }>();
   const [searchParams, setSearchParams] = useSearchParams();
   const [search, setSearch] = useState(searchParams.get('q') || '');
-  const { data: aclList } = useAcls({ clusterName, search });
+  const { isFtsEnabled } = useFts('acl');
+  const { data: aclList } = useAcls({ clusterName, search, fts: isFtsEnabled });
   const { deleteResource } = useDeleteAcl(clusterName);
   const modal = useConfirm(true);
   const theme = useTheme();
@@ -211,6 +214,7 @@ const ACList: React.FC = () => {
           placeholder="Search by Principal Name"
           value={search}
           onChange={setSearch}
+          extraActions={<Fts resourceName="acl" />}
         />
       </ControlPanelWrapper>
       <Table
diff --git a/frontend/src/components/ACLPage/lib/useConsumerGroupsOptions.ts b/frontend/src/components/ACLPage/lib/useConsumerGroupsOptions.ts
index 335dfc585..5b4990eef 100644
--- a/frontend/src/components/ACLPage/lib/useConsumerGroupsOptions.ts
+++ b/frontend/src/components/ACLPage/lib/useConsumerGroupsOptions.ts
@@ -1,8 +1,14 @@
+import useFts from 'components/common/Fts/useFts';
 import { useConsumerGroups } from 'lib/hooks/api/consumers';
 import { useMemo } from 'react';
 
 const useConsumerGroupsOptions = (clusterName: string) => {
-  const { data } = useConsumerGroups({ clusterName, search: '' });
+  const { isFtsEnabled } = useFts('consumer_groups');
+  const { data } = useConsumerGroups({
+    clusterName,
+    search: '',
+    fts: isFtsEnabled,
+  });
   const consumerGroups = useMemo(() => {
     return (
       data?.consumerGroups?.map((cg) => {
diff --git a/frontend/src/components/ClusterPage/ClusterPage.tsx b/frontend/src/components/ClusterPage/ClusterPage.tsx
index a0cc13e13..b48dba526 100644
--- a/frontend/src/components/ClusterPage/ClusterPage.tsx
+++ b/frontend/src/components/ClusterPage/ClusterPage.tsx
@@ -42,7 +42,7 @@ const ClusterPage: React.FC = () => {
   const { clusterName } = useAppParams<ClusterNameRoute>();
   const appInfo = React.useContext(GlobalSettingsContext);
 
-  const { data } = useClusters();
+  const { data, isFetched } = useClusters();
   const contextValue = React.useMemo(() => {
     const cluster = data?.find(({ name }) => name === clusterName);
     const features = cluster?.features || [];
@@ -61,9 +61,17 @@ const ClusterPage: React.FC = () => {
       hasAclViewConfigured:
         features.includes(ClusterFeaturesEnum.KAFKA_ACL_VIEW) ||
         features.includes(ClusterFeaturesEnum.KAFKA_ACL_EDIT),
+      ftsEnabled: features.includes(ClusterFeaturesEnum.FTS_ENABLED),
+      ftsDefaultEnabled: features.includes(
+        ClusterFeaturesEnum.FTS_DEFAULT_ENABLED
+      ),
     };
   }, [clusterName, data]);
 
+  if (!isFetched) {
+    return <PageLoader />;
+  }
+
   return (
     <Suspense fallback={<PageLoader />}>
       <ClusterContext.Provider value={contextValue}>
diff --git a/frontend/src/components/ClusterPage/__tests__/ClusterPage.spec.tsx b/frontend/src/components/ClusterPage/__tests__/ClusterPage.spec.tsx
index 238c13155..1b8b42710 100644
--- a/frontend/src/components/ClusterPage/__tests__/ClusterPage.spec.tsx
+++ b/frontend/src/components/ClusterPage/__tests__/ClusterPage.spec.tsx
@@ -52,6 +52,7 @@ describe('ClusterPage', () => {
   const renderComponent = async (pathname: string, payload: Cluster[] = []) => {
     (useClusters as jest.Mock).mockImplementation(() => ({
       data: payload,
+      isFetched: true,
     }));
     await render(
       <WithRoute path={`${clusterPath()}/*`}>
diff --git a/frontend/src/components/Connect/List/List.tsx b/frontend/src/components/Connect/List/List.tsx
index c3a595688..08f078ca5 100644
--- a/frontend/src/components/Connect/List/List.tsx
+++ b/frontend/src/components/Connect/List/List.tsx
@@ -1,11 +1,7 @@
 import React from 'react';
-import useAppParams from 'lib/hooks/useAppParams';
-import { ClusterNameRoute } from 'lib/paths';
 import Table, { TagCell } from 'components/common/NewTable';
 import { FullConnectorInfo } from 'generated-sources';
-import { useConnectors } from 'lib/hooks/api/kafkaConnect';
 import { ColumnDef } from '@tanstack/react-table';
-import { useSearchParams } from 'react-router-dom';
 import { useQueryPersister } from 'components/common/NewTable/ColumnFilter';
 import { useLocalStoragePersister } from 'components/common/NewTable/ColumnResizer/lib';
 import BreakableTextCell from 'components/common/NewTable/BreakableTextCell';
@@ -77,14 +73,9 @@ const kafkaConnectColumns: ColumnDef<FullConnectorInfo, string>[] = [
   },
 ];
 
-const List: React.FC = () => {
-  const { clusterName } = useAppParams<ClusterNameRoute>();
-  const [searchParams] = useSearchParams();
-  const { data: connectors } = useConnectors(
-    clusterName,
-    searchParams.get('q') || ''
-  );
+type ConnectorsListProps = { connectors: FullConnectorInfo[] | undefined };
 
+const List: React.FC<ConnectorsListProps> = ({ connectors }) => {
   const filterPersister = useQueryPersister(kafkaConnectColumns);
   const columnSizingPersister = useLocalStoragePersister('KafkaConnect');
 
diff --git a/frontend/src/components/Connect/List/ListPage.tsx b/frontend/src/components/Connect/List/ListPage.tsx
index 3b257dd6d..e68f79a19 100644
--- a/frontend/src/components/Connect/List/ListPage.tsx
+++ b/frontend/src/components/Connect/List/ListPage.tsx
@@ -4,6 +4,9 @@ import { ClusterNameRoute } from 'lib/paths';
 import Search from 'components/common/Search/Search';
 import PageLoader from 'components/common/PageLoader/PageLoader';
 import { useConnectors } from 'lib/hooks/api/kafkaConnect';
+import Fts from 'components/common/Fts/Fts';
+import useFts from 'components/common/Fts/useFts';
+import { useSearchParams } from 'react-router-dom';
 
 import * as S from './ListPage.styled';
 import List from './List';
@@ -11,16 +14,25 @@ import ConnectorsStatistics from './Statistics/Statistics';
 
 const ListPage: React.FC = () => {
   const { clusterName } = useAppParams<ClusterNameRoute>();
-  const { data, isLoading } = useConnectors(clusterName);
+  const { isFtsEnabled } = useFts('connects');
+  const [searchParams] = useSearchParams();
+  const { data, isLoading } = useConnectors(
+    clusterName,
+    searchParams.get('q') || '',
+    isFtsEnabled
+  );
 
   return (
     <>
       <ConnectorsStatistics connectors={data ?? []} isLoading={isLoading} />
       <S.Search hasInput>
-        <Search placeholder="Search by Connect Name, Status or Type" />
+        <Search
+          placeholder="Search by Connect Name, Status or Type"
+          extraActions={<Fts resourceName="connects" />}
+        />
       </S.Search>
       <Suspense fallback={<PageLoader />}>
-        <List />
+        <List connectors={data ?? []} />
       </Suspense>
     </>
   );
diff --git a/frontend/src/components/Connect/List/__tests__/List.spec.tsx b/frontend/src/components/Connect/List/__tests__/List.spec.tsx
index 9e09fc50c..679c4299e 100644
--- a/frontend/src/components/Connect/List/__tests__/List.spec.tsx
+++ b/frontend/src/components/Connect/List/__tests__/List.spec.tsx
@@ -15,6 +15,7 @@ import {
   useResetConnectorOffsets,
   useUpdateConnectorState,
 } from 'lib/hooks/api/kafkaConnect';
+import { FullConnectorInfo } from 'generated-sources';
 
 const mockedUsedNavigate = jest.fn();
 const mockDelete = jest.fn();
@@ -34,11 +35,14 @@ jest.mock('lib/hooks/api/kafkaConnect', () => ({
 
 const clusterName = 'local';
 
-const renderComponent = (contextValue: ContextProps = initialValue) =>
+const renderComponent = (
+  contextValue: ContextProps = initialValue,
+  data: FullConnectorInfo[] = connectors
+) =>
   render(
     <ClusterContext.Provider value={contextValue}>
       <WithRoute path={clusterConnectorsPath()}>
-        <List />
+        <List connectors={data} />
       </WithRoute>
     </ClusterContext.Provider>,
     { initialEntries: [clusterConnectorsPath(clusterName)] }
@@ -47,9 +51,6 @@ const renderComponent = (contextValue: ContextProps = initialValue) =>
 describe('Connectors List', () => {
   describe('when the connectors are loaded', () => {
     beforeEach(() => {
-      (useConnectors as jest.Mock).mockImplementation(() => ({
-        data: connectors,
-      }));
       const restartConnector = jest.fn();
       (useUpdateConnectorState as jest.Mock).mockImplementation(() => ({
         mutateAsync: restartConnector,
@@ -84,7 +85,7 @@ describe('Connectors List', () => {
     });
 
     it('renders empty table', async () => {
-      renderComponent();
+      renderComponent(undefined, []);
       expect(screen.getByRole('table')).toBeInTheDocument();
       expect(
         screen.getByRole('row', { name: 'No connectors found' })
diff --git a/frontend/src/components/ConsumerGroups/List.tsx b/frontend/src/components/ConsumerGroups/List.tsx
index 2a8fc619e..ad66e718c 100644
--- a/frontend/src/components/ConsumerGroups/List.tsx
+++ b/frontend/src/components/ConsumerGroups/List.tsx
@@ -17,11 +17,14 @@ import { useConsumerGroups } from 'lib/hooks/api/consumers';
 import Tooltip from 'components/common/Tooltip/Tooltip';
 import ResourcePageHeading from 'components/common/ResourcePageHeading/ResourcePageHeading';
 import { useLocalStoragePersister } from 'components/common/NewTable/ColumnResizer/lib';
+import useFts from 'components/common/Fts/useFts';
+import Fts from 'components/common/Fts/Fts';
 
 const List = () => {
   const { clusterName } = useAppParams<ClusterNameRoute>();
   const [searchParams] = useSearchParams();
   const navigate = useNavigate();
+  const { isFtsEnabled } = useFts('consumer_groups');
 
   const consumerGroups = useConsumerGroups({
     clusterName,
@@ -32,6 +35,7 @@ const List = () => {
     page: Number(searchParams.get('page') || 1),
     perPage: Number(searchParams.get('perPage') || PER_PAGE),
     search: searchParams.get('q') || '',
+    fts: isFtsEnabled,
   });
 
   const columns = React.useMemo<ColumnDef<ConsumerGroup>[]>(
@@ -104,7 +108,10 @@ const List = () => {
     <>
       <ResourcePageHeading text="Consumers" />
       <ControlPanelWrapper hasInput>
-        <Search placeholder="Search by Consumer Group ID" />
+        <Search
+          placeholder="Search by Consumer Group ID"
+          extraActions={<Fts resourceName="consumer_groups" />}
+        />
       </ControlPanelWrapper>
       <Table
         columns={columns}
diff --git a/frontend/src/components/PageContainer/PageContainer.styled.ts b/frontend/src/components/PageContainer/PageContainer.styled.ts
index c49946781..e67e34cec 100644
--- a/frontend/src/components/PageContainer/PageContainer.styled.ts
+++ b/frontend/src/components/PageContainer/PageContainer.styled.ts
@@ -35,6 +35,8 @@ export const Sidebar = styled.div<{ $visible: boolean }>(
     left: 0;
     bottom: 0;
     padding: 16px;
+    scrollbar-gutter: stable;
+    scrollbar-width: thin;
     overflow-y: auto;
     transition:
       width 0.25s,
diff --git a/frontend/src/components/Schemas/List/List.tsx b/frontend/src/components/Schemas/List/List.tsx
index 252d9b1b1..dcc34d6ab 100644
--- a/frontend/src/components/Schemas/List/List.tsx
+++ b/frontend/src/components/Schemas/List/List.tsx
@@ -24,6 +24,8 @@ import { useNavigate, useSearchParams } from 'react-router-dom';
 import { PER_PAGE } from 'lib/constants';
 import { useGetSchemas } from 'lib/hooks/api/schemas';
 import ResourcePageHeading from 'components/common/ResourcePageHeading/ResourcePageHeading';
+import useFts from 'components/common/Fts/useFts';
+import Fts from 'components/common/Fts/Fts';
 
 import GlobalSchemaSelector from './GlobalSchemaSelector/GlobalSchemaSelector';
 
@@ -32,6 +34,7 @@ const List: React.FC = () => {
   const { clusterName } = useAppParams<ClusterNameRoute>();
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
+  const { isFtsEnabled } = useFts('schemas');
   const {
     isInitialLoading,
     isError,
@@ -45,6 +48,7 @@ const List: React.FC = () => {
     sortOrder:
       (searchParams.get('sortDirection')?.toUpperCase() as SortOrder) ||
       undefined,
+    fts: isFtsEnabled,
   });
 
   const columns = React.useMemo<ColumnDef<SchemaSubject>[]>(
@@ -111,7 +115,10 @@ const List: React.FC = () => {
         )}
       </ResourcePageHeading>
       <ControlPanelWrapper hasInput>
-        <Search placeholder="Search by Schema Name" />
+        <Search
+          placeholder="Search by Schema Name"
+          extraActions={<Fts resourceName="schemas" />}
+        />
       </ControlPanelWrapper>
       {isInitialLoading || isError ? (
         <PageLoader />
diff --git a/frontend/src/components/Topics/List/ListPage.tsx b/frontend/src/components/Topics/List/ListPage.tsx
index d8508175c..811bde1a7 100644
--- a/frontend/src/components/Topics/List/ListPage.tsx
+++ b/frontend/src/components/Topics/List/ListPage.tsx
@@ -12,11 +12,15 @@ import PageLoader from 'components/common/PageLoader/PageLoader';
 import TopicTable from 'components/Topics/List/TopicTable';
 import { Action, ResourceType } from 'generated-sources';
 import ResourcePageHeading from 'components/common/ResourcePageHeading/ResourcePageHeading';
+import Fts from 'components/common/Fts/Fts';
+import useFts from 'components/common/Fts/useFts';
 
 const ListPage: React.FC = () => {
   const { isReadOnly } = React.useContext(ClusterContext);
   const [searchParams, setSearchParams] = useSearchParams();
 
+  useFts('topics');
+
   // Set the search params to the url based on the localStorage value
   React.useEffect(() => {
     if (!searchParams.has('perPage')) {
@@ -62,7 +66,10 @@ const ListPage: React.FC = () => {
         )}
       </ResourcePageHeading>
       <ControlPanelWrapper hasInput>
-        <Search placeholder="Search by Topic Name" />
+        <Search
+          placeholder="Search by Topic Name"
+          extraActions={<Fts resourceName="topics" />}
+        />
         <label>
           <Switch
             name="ShowInternalTopics"
diff --git a/frontend/src/components/Topics/List/TopicTable.tsx b/frontend/src/components/Topics/List/TopicTable.tsx
index 2922f13ec..fde49f618 100644
--- a/frontend/src/components/Topics/List/TopicTable.tsx
+++ b/frontend/src/components/Topics/List/TopicTable.tsx
@@ -9,6 +9,7 @@ import ClusterContext from 'components/contexts/ClusterContext';
 import { useTopics } from 'lib/hooks/api/topics';
 import { PER_PAGE } from 'lib/constants';
 import { useLocalStoragePersister } from 'components/common/NewTable/ColumnResizer/lib';
+import useFts from 'components/common/Fts/useFts';
 
 import { TopicTitleCell } from './TopicTitleCell';
 import ActionsCell from './ActionsCell';
@@ -18,8 +19,11 @@ const TopicTable: React.FC = () => {
   const { clusterName } = useAppParams<{ clusterName: ClusterName }>();
   const [searchParams] = useSearchParams();
   const { isReadOnly } = React.useContext(ClusterContext);
+  const { isFtsEnabled } = useFts('topics');
+
   const { data } = useTopics({
     clusterName,
+    fts: isFtsEnabled,
     page: Number(searchParams.get('page') || 1),
     perPage: Number(searchParams.get('perPage') || PER_PAGE),
     search: searchParams.get('q') || undefined,
diff --git a/frontend/src/components/Topics/List/__tests__/ListPage.spec.tsx b/frontend/src/components/Topics/List/__tests__/ListPage.spec.tsx
index c82932953..513910397 100644
--- a/frontend/src/components/Topics/List/__tests__/ListPage.spec.tsx
+++ b/frontend/src/components/Topics/List/__tests__/ListPage.spec.tsx
@@ -19,6 +19,8 @@ describe('ListPage Component', () => {
           hasKafkaConnectConfigured: true,
           hasSchemaRegistryConfigured: true,
           isTopicDeletionAllowed: true,
+          ftsEnabled: false,
+          ftsDefaultEnabled: false,
         }}
       >
         <WithRoute path={clusterTopicsPath()}>
diff --git a/frontend/src/components/Topics/List/__tests__/TopicTable.spec.tsx b/frontend/src/components/Topics/List/__tests__/TopicTable.spec.tsx
index cca768652..de4ad3ebd 100644
--- a/frontend/src/components/Topics/List/__tests__/TopicTable.spec.tsx
+++ b/frontend/src/components/Topics/List/__tests__/TopicTable.spec.tsx
@@ -59,6 +59,8 @@ describe('TopicTable Components', () => {
           hasKafkaConnectConfigured: true,
           hasSchemaRegistryConfigured: true,
           isTopicDeletionAllowed,
+          ftsEnabled: false,
+          ftsDefaultEnabled: false,
         }}
       >
         <WithRoute path={clusterTopicsPath()}>
diff --git a/frontend/src/components/Topics/Topic/Overview/__test__/Overview.spec.tsx b/frontend/src/components/Topics/Topic/Overview/__test__/Overview.spec.tsx
index bf762a002..c80c57fd3 100644
--- a/frontend/src/components/Topics/Topic/Overview/__test__/Overview.spec.tsx
+++ b/frontend/src/components/Topics/Topic/Overview/__test__/Overview.spec.tsx
@@ -21,6 +21,8 @@ const defaultContextValues = {
   hasKafkaConnectConfigured: true,
   hasSchemaRegistryConfigured: true,
   isTopicDeletionAllowed: true,
+  ftsEnabled: false,
+  ftsDefaultEnabled: false,
 };
 
 jest.mock('lib/hooks/api/topics', () => ({
diff --git a/frontend/src/components/Topics/Topic/__test__/Topic.spec.tsx b/frontend/src/components/Topics/Topic/__test__/Topic.spec.tsx
index 7b5731767..a8e960702 100644
--- a/frontend/src/components/Topics/Topic/__test__/Topic.spec.tsx
+++ b/frontend/src/components/Topics/Topic/__test__/Topic.spec.tsx
@@ -75,6 +75,8 @@ describe('Details', () => {
           hasKafkaConnectConfigured: true,
           hasSchemaRegistryConfigured: true,
           isTopicDeletionAllowed: true,
+          ftsEnabled: false,
+          ftsDefaultEnabled: false,
         }}
       >
         <WithRoute path={getNonExactPath(clusterTopicPath())}>
diff --git a/frontend/src/components/common/Fts/Fts.tsx b/frontend/src/components/common/Fts/Fts.tsx
new file mode 100644
index 000000000..6868ac165
--- /dev/null
+++ b/frontend/src/components/common/Fts/Fts.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import FtsIcon from 'components/common/Icons/FtsIcon';
+import styled from 'styled-components';
+import Tooltip from 'components/common/Tooltip/Tooltip';
+import ClusterContext from 'components/contexts/ClusterContext';
+
+import useFts, { FtsAvailableResource } from './useFts';
+
+export const IconWrapper = styled.span.attrs<{ active: boolean }>(() => ({
+  role: 'button',
+  tabIndex: 1,
+}))`
+  display: inline-block;
+  &:hover {
+    cursor: pointer;
+  }
+  color: ${(props) =>
+    props.active
+      ? props.theme.icons.ftsIcon.active
+      : props.theme.icons.ftsIcon.normal};
+`;
+
+const Fts = ({ resourceName }: { resourceName: FtsAvailableResource }) => {
+  const { ftsEnabled: isFtsFeatureEnabled } = React.useContext(ClusterContext);
+  const { handleSwitch, isFtsEnabled } = useFts(resourceName);
+
+  if (!isFtsFeatureEnabled) {
+    return null;
+  }
+
+  return (
+    <Tooltip
+      value={
+        <IconWrapper onClick={handleSwitch} active={isFtsEnabled}>
+          <FtsIcon />
+        </IconWrapper>
+      }
+      content="Apply full text search"
+      placement="bottom"
+      showTooltip
+      fullWidth
+    />
+  );
+};
+
+export default Fts;
diff --git a/frontend/src/components/common/Fts/useFts.ts b/frontend/src/components/common/Fts/useFts.ts
new file mode 100644
index 000000000..5772f19b2
--- /dev/null
+++ b/frontend/src/components/common/Fts/useFts.ts
@@ -0,0 +1,74 @@
+import ClusterContext from 'components/contexts/ClusterContext';
+import React from 'react';
+import { useSearchParams } from 'react-router-dom';
+
+export type FtsAvailableResource =
+  | 'topics'
+  | 'acl'
+  | 'consumer_groups'
+  | 'connects'
+  | 'schemas';
+
+const storageName = 'kafbat-ui_fts';
+
+const useFts = (resourceName: FtsAvailableResource) => {
+  const { ftsEnabled: isFtsFeatureEnabled, ftsDefaultEnabled } =
+    React.useContext(ClusterContext);
+  const [searchParams, setSearchParams] = useSearchParams();
+  const storageKey = `${storageName}:${resourceName}`;
+
+  React.useEffect(() => {
+    if (!isFtsFeatureEnabled) {
+      searchParams.delete('fts');
+      localStorage.removeItem(storageKey);
+      setSearchParams(searchParams);
+      return;
+    }
+
+    if (!searchParams.has('fts')) {
+      const value = localStorage.getItem(storageKey);
+      if (value === null) {
+        searchParams.set('fts', ftsDefaultEnabled ? 'true' : 'false');
+      } else {
+        searchParams.set('fts', value);
+      }
+      setSearchParams(searchParams);
+    }
+  }, [isFtsFeatureEnabled, ftsDefaultEnabled, searchParams, storageKey]);
+
+  const handleSwitch = () => {
+    if (!isFtsFeatureEnabled) {
+      return;
+    }
+    const currentValue = searchParams.get('fts') === 'true';
+    if (currentValue) {
+      localStorage.setItem(storageKey, 'false');
+      searchParams.set('fts', 'false');
+    } else {
+      localStorage.setItem(storageKey, 'true');
+      searchParams.set('fts', 'true');
+    }
+
+    searchParams.set('page', '1');
+    setSearchParams(searchParams);
+  };
+
+  let isFtsEnabled = isFtsFeatureEnabled;
+  if (isFtsEnabled) {
+    if (searchParams.has('fts')) {
+      isFtsEnabled = searchParams.get('fts') === 'true';
+    } else if (localStorage.getItem(storageKey)) {
+      isFtsEnabled = localStorage.getItem(storageKey) === 'true';
+    } else {
+      isFtsEnabled = ftsDefaultEnabled;
+    }
+  }
+
+  return {
+    handleSwitch,
+    isFtsFeatureEnabled,
+    isFtsEnabled,
+  };
+};
+
+export default useFts;
diff --git a/frontend/src/components/common/Icons/FtsIcon.tsx b/frontend/src/components/common/Icons/FtsIcon.tsx
new file mode 100644
index 000000000..4f649f72f
--- /dev/null
+++ b/frontend/src/components/common/Icons/FtsIcon.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+
+const FtsIcon: React.FC = () => {
+  return (
+    <svg
+      fill="currentColor"
+      width="800px"
+      height="800px"
+      viewBox="0 0 56 56"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fill="currentColor"
+        d="M 13.5039 50.9570 L 26.3476 50.9570 C 25.1055 49.9023 24.0508 48.6367 23.2773 47.1836 L 13.7148 47.1836 C 11.3008 47.1836 10.0117 45.9414 10.0117 43.5976 L 10.0117 8.1367 C 10.0117 5.8164 11.2773 4.4805 13.7148 4.4805 L 38.2070 4.4805 C 40.5508 4.4805 41.8867 5.7930 41.8867 8.1367 L 41.8867 28.5742 C 43.3398 29.3476 44.6055 30.3789 45.6602 31.6211 L 45.6602 8.0664 C 45.6602 3.1679 43.2461 .7070 38.3945 .7070 L 13.5039 .7070 C 8.6758 .7070 6.2383 3.1914 6.2383 8.0664 L 6.2383 43.6211 C 6.2383 48.5195 8.6758 50.9570 13.5039 50.9570 Z M 17.0898 14.0430 L 34.8555 14.0430 C 35.6758 14.0430 36.3086 13.3867 36.3086 12.5664 C 36.3086 11.7695 35.6758 11.1601 34.8555 11.1601 L 17.0898 11.1601 C 16.2227 11.1601 15.6133 11.7695 15.6133 12.5664 C 15.6133 13.3867 16.2227 14.0430 17.0898 14.0430 Z M 17.0898 22.2226 L 34.8555 22.2226 C 35.6758 22.2226 36.3086 21.5664 36.3086 20.7461 C 36.3086 19.9492 35.6758 19.3398 34.8555 19.3398 L 17.0898 19.3398 C 16.2227 19.3398 15.6133 19.9492 15.6133 20.7461 C 15.6133 21.5664 16.2227 22.2226 17.0898 22.2226 Z M 35.1367 50.9570 C 37.2461 50.9570 39.2383 50.3476 40.8789 49.2461 L 46.1524 54.5430 C 46.7148 55.0820 47.2305 55.2930 47.8633 55.2930 C 48.9414 55.2930 49.7617 54.4492 49.7617 53.2539 C 49.7617 52.7383 49.5040 52.2226 49.1056 51.8242 L 43.7617 46.4805 C 44.9570 44.7695 45.6602 42.6836 45.6602 40.4336 C 45.6602 34.5976 40.9492 29.8867 35.1367 29.8867 C 29.3242 29.8867 24.5664 34.6445 24.5664 40.4336 C 24.5664 46.2461 29.3242 50.9570 35.1367 50.9570 Z M 35.1367 47.6054 C 31.1524 47.6054 27.9180 44.3945 27.9180 40.4336 C 27.9180 36.5195 31.1524 33.2617 35.1367 33.2617 C 39.0508 33.2617 42.2851 36.5195 42.2851 40.4336 C 42.2851 44.3945 39.0742 47.6054 35.1367 47.6054 Z"
+      />
+    </svg>
+  );
+};
+
+export default FtsIcon;
diff --git a/frontend/src/components/common/Input/Input.tsx b/frontend/src/components/common/Input/Input.tsx
index 4d04b730e..9e5b0b0ab 100644
--- a/frontend/src/components/common/Input/Input.tsx
+++ b/frontend/src/components/common/Input/Input.tsx
@@ -17,7 +17,7 @@ export interface InputProps
   label?: React.ReactNode;
   hint?: React.ReactNode;
   clearIcon?: React.ReactNode;
-
+  actions?: React.ReactNode;
   // Some may only accept integer, like `Number of Partitions`
   // some may accept decimal
   integerOnly?: boolean;
@@ -113,6 +113,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>((props, ref) => {
     label,
     hint,
     clearIcon,
+    actions,
     ...rest
   } = props;
 
@@ -187,7 +188,8 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>((props, ref) => {
           ref={ref}
           {...inputOptions}
         />
-        {clearIcon}
+        {search && clearIcon}
+        {actions}
 
         {withError && isHookFormField && (
           <S.FormError>
diff --git a/frontend/src/components/common/Search/Search.styled.ts b/frontend/src/components/common/Search/Search.styled.ts
new file mode 100644
index 000000000..18cd3f979
--- /dev/null
+++ b/frontend/src/components/common/Search/Search.styled.ts
@@ -0,0 +1,32 @@
+import styled from 'styled-components';
+
+export const Actions = styled.div`
+  position: absolute;
+  display: flex;
+  align-items: center;
+  top: 8px;
+  right: 8px;
+  gap: 8px;
+
+  svg:first-child {
+    position: initial;
+    height: 16px;
+    width: 16px;
+    fill: ${({ theme }) => theme.input.icon.color};
+  }
+  svg:last-child {
+    position: initial;
+    height: 16px;
+    width: 16px;
+  }
+`;
+
+export const IconButtonWrapper = styled.span.attrs(() => ({
+  role: 'button',
+  tabIndex: 0,
+}))`
+  display: inline-block;
+  &:hover {
+    cursor: pointer;
+  }
+`;
diff --git a/frontend/src/components/common/Search/Search.tsx b/frontend/src/components/common/Search/Search.tsx
index 8139895bb..92c8bfc38 100644
--- a/frontend/src/components/common/Search/Search.tsx
+++ b/frontend/src/components/common/Search/Search.tsx
@@ -1,35 +1,35 @@
-import React, { ComponentRef, useEffect, useRef } from 'react';
+import React, {
+  ComponentRef,
+  ReactNode,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 import { useDebouncedCallback } from 'use-debounce';
 import Input from 'components/common/Input/Input';
 import { useSearchParams } from 'react-router-dom';
 import CloseCircleIcon from 'components/common/Icons/CloseCircleIcon';
-import styled from 'styled-components';
+
+import * as S from './Search.styled';
 
 interface SearchProps {
   placeholder?: string;
   disabled?: boolean;
   onChange?: (value: string) => void;
   value?: string;
+  extraActions?: ReactNode;
 }
 
-const IconButtonWrapper = styled.span.attrs(() => ({
-  role: 'button',
-  tabIndex: 0,
-}))`
-  height: 16px !important;
-  display: inline-block;
-  &:hover {
-    cursor: pointer;
-  }
-`;
 const Search: React.FC<SearchProps> = ({
   placeholder = 'Search',
   disabled = false,
   value,
   onChange,
+  extraActions,
 }) => {
   const [searchParams, setSearchParams] = useSearchParams();
   const ref = useRef<ComponentRef<'input'>>(null);
+  const [showIcon, setShowIcon] = useState(!!value || !!searchParams.get('q'));
 
   useEffect(() => {
     if (ref.current !== null && value) {
@@ -38,6 +38,7 @@ const Search: React.FC<SearchProps> = ({
   }, [value]);
 
   const handleChange = useDebouncedCallback((e) => {
+    setShowIcon(!!e.target.value);
     if (ref.current != null) {
       ref.current.value = e.target.value;
     }
@@ -59,12 +60,14 @@ const Search: React.FC<SearchProps> = ({
       searchParams.set('q', '');
       setSearchParams(searchParams);
     }
+
     if (ref.current != null) {
       ref.current.value = '';
     }
     if (onChange) {
       onChange('');
     }
+    setShowIcon(false);
   };
 
   return (
@@ -77,10 +80,19 @@ const Search: React.FC<SearchProps> = ({
       disabled={disabled}
       ref={ref}
       search
-      clearIcon={
-        <IconButtonWrapper onClick={clearSearchValue}>
-          <CloseCircleIcon />
-        </IconButtonWrapper>
+      actions={
+        <S.Actions>
+          {showIcon && (
+            <S.IconButtonWrapper
+              onClick={clearSearchValue}
+              data-testid="search-clear-button"
+            >
+              <CloseCircleIcon />
+            </S.IconButtonWrapper>
+          )}
+
+          {extraActions}
+        </S.Actions>
       }
     />
   );
diff --git a/frontend/src/components/common/Search/__tests__/Search.spec.tsx b/frontend/src/components/common/Search/__tests__/Search.spec.tsx
index 2103d2233..452babab9 100644
--- a/frontend/src/components/common/Search/__tests__/Search.spec.tsx
+++ b/frontend/src/components/common/Search/__tests__/Search.spec.tsx
@@ -2,7 +2,7 @@ import Search from 'components/common/Search/Search';
 import React from 'react';
 import { render } from 'lib/testHelpers';
 import userEvent from '@testing-library/user-event';
-import { screen } from '@testing-library/react';
+import { screen, fireEvent } from '@testing-library/react';
 import { useSearchParams } from 'react-router-dom';
 
 jest.mock('use-debounce', () => ({
@@ -42,10 +42,17 @@ describe('Search', () => {
     expect(screen.queryByPlaceholderText('Search')).toBeInTheDocument();
   });
 
-  it('Clear button is visible', () => {
+  it('Clear button is not visible by default', async () => {
     render(<Search placeholder={placeholder} />);
 
-    const clearButton = screen.getByRole('button');
+    const clearButton = screen.queryByTestId('search-clear-button');
+    expect(clearButton).not.toBeInTheDocument();
+  });
+
+  it('Clear button is visible if value passed', async () => {
+    render(<Search placeholder={placeholder} value="text" />);
+
+    const clearButton = screen.queryByTestId('search-clear-button');
     expect(clearButton).toBeInTheDocument();
   });
 
@@ -53,12 +60,16 @@ describe('Search', () => {
     render(<Search placeholder={placeholder} />);
 
     const searchField = screen.getAllByRole('textbox')[0];
-    await userEvent.type(searchField, 'some text');
-    expect(searchField).toHaveValue('some text');
+    fireEvent.change(searchField, { target: { value: 'hello' } });
+    expect(searchField).toHaveValue('hello');
 
-    const clearButton = screen.getByRole('button');
-    await userEvent.click(clearButton);
+    let clearButton = screen.queryByTestId('search-clear-button');
+    expect(clearButton).toBeInTheDocument();
+    await userEvent.click(clearButton!);
 
     expect(searchField).toHaveValue('');
+
+    clearButton = screen.queryByTestId('search-clear-button');
+    expect(clearButton).not.toBeInTheDocument();
   });
 });
diff --git a/frontend/src/components/common/Tooltip/Tooltip.tsx b/frontend/src/components/common/Tooltip/Tooltip.tsx
index 6b74391ca..c1e4d9b4c 100644
--- a/frontend/src/components/common/Tooltip/Tooltip.tsx
+++ b/frontend/src/components/common/Tooltip/Tooltip.tsx
@@ -13,6 +13,7 @@ interface TooltipProps {
   content: string;
   placement?: Placement;
   showTooltip?: boolean;
+  fullWidth?: boolean;
 }
 
 const Tooltip: React.FC<TooltipProps> = ({
@@ -20,6 +21,7 @@ const Tooltip: React.FC<TooltipProps> = ({
   content,
   placement,
   showTooltip = true,
+  fullWidth,
 }) => {
   const [open, setOpen] = useState(false);
   const { x, y, refs, strategy, context } = useFloating({
@@ -29,12 +31,13 @@ const Tooltip: React.FC<TooltipProps> = ({
   });
   const hover = useHover(context);
   const { getReferenceProps, getFloatingProps } = useInteractions([hover]);
+  const isOpened = showTooltip && open;
   return (
     <>
       <div ref={refs.setReference} {...getReferenceProps()}>
         <S.Wrapper>{value}</S.Wrapper>
       </div>
-      {showTooltip && open && (
+      {isOpened && (
         <S.MessageTooltip
           ref={refs.setFloating}
           style={{
@@ -42,6 +45,9 @@ const Tooltip: React.FC<TooltipProps> = ({
             top: y ?? 0,
             left: x ?? 0,
             width: 'max-content',
+            minWidth: fullWidth ? 'max-content' : 'initial',
+            display: 'flex',
+            alignItems: 'center',
           }}
           {...getFloatingProps()}
         >
diff --git a/frontend/src/components/contexts/ClusterContext.ts b/frontend/src/components/contexts/ClusterContext.ts
index 3c50fcf14..7a51a26e4 100644
--- a/frontend/src/components/contexts/ClusterContext.ts
+++ b/frontend/src/components/contexts/ClusterContext.ts
@@ -5,6 +5,8 @@ export interface ContextProps {
   hasKafkaConnectConfigured: boolean;
   hasSchemaRegistryConfigured: boolean;
   isTopicDeletionAllowed: boolean;
+  ftsEnabled: boolean;
+  ftsDefaultEnabled: boolean;
 }
 
 export const initialValue: ContextProps = {
@@ -12,6 +14,8 @@ export const initialValue: ContextProps = {
   hasKafkaConnectConfigured: false,
   hasSchemaRegistryConfigured: false,
   isTopicDeletionAllowed: true,
+  ftsEnabled: false,
+  ftsDefaultEnabled: false,
 };
 const ClusterContext = React.createContext(initialValue);
 
diff --git a/frontend/src/lib/hooks/api/acl.ts b/frontend/src/lib/hooks/api/acl.ts
index a1c1b1ad1..ae8c3150c 100644
--- a/frontend/src/lib/hooks/api/acl.ts
+++ b/frontend/src/lib/hooks/api/acl.ts
@@ -17,16 +17,19 @@ import {
 export function useAcls({
   clusterName,
   search,
+  fts,
 }: {
   clusterName: ClusterName;
   search?: string;
+  fts?: boolean;
 }) {
   return useQuery(
-    ['clusters', clusterName, 'acls', { search }],
+    ['clusters', clusterName, 'acls', { search, fts }],
     () =>
       api.listAcls({
         clusterName,
         search,
+        fts,
       }),
     {
       keepPreviousData: true,
diff --git a/frontend/src/lib/hooks/api/consumers.ts b/frontend/src/lib/hooks/api/consumers.ts
index f2373e989..5b766af59 100644
--- a/frontend/src/lib/hooks/api/consumers.ts
+++ b/frontend/src/lib/hooks/api/consumers.ts
@@ -18,6 +18,7 @@ type UseConsumerGroupsProps = {
   page?: number;
   perPage?: number;
   search: string;
+  fts?: boolean;
 };
 
 type UseConsumerGroupDetailsProps = {
diff --git a/frontend/src/lib/hooks/api/kafkaConnect.ts b/frontend/src/lib/hooks/api/kafkaConnect.ts
index 64ce2af41..dd9c7866a 100644
--- a/frontend/src/lib/hooks/api/kafkaConnect.ts
+++ b/frontend/src/lib/hooks/api/kafkaConnect.ts
@@ -25,11 +25,24 @@ const connectsKey = (clusterName: ClusterName, withStats?: boolean) => [
   'connects',
   withStats,
 ];
-const connectorsKey = (clusterName: ClusterName, search?: string) => {
-  const base = ['clusters', clusterName, 'connectors'];
+const connectorsKey = (
+  clusterName: ClusterName,
+  search?: string,
+  fts?: boolean
+) => {
+  let base: Array<string | { search: string } | { fts: boolean }> = [
+    'clusters',
+    clusterName,
+    'connectors',
+  ];
   if (search) {
-    return [...base, { search }];
+    base = [...base, { search }];
   }
+
+  if (fts) {
+    base = [...base, { fts }];
+  }
+
   return base;
 };
 const connectorKey = (props: UseConnectorProps) => [
@@ -50,11 +63,16 @@ export function useConnects(clusterName: ClusterName, withStats?: boolean) {
     api.getConnects({ clusterName, withStats })
   );
 }
-export function useConnectors(clusterName: ClusterName, search?: string) {
+export function useConnectors(
+  clusterName: ClusterName,
+  search?: string,
+  fts?: boolean
+) {
   return useQuery(
-    connectorsKey(clusterName, search),
-    () => api.getAllConnectors({ clusterName, search }),
+    connectorsKey(clusterName, search, fts),
+    () => api.getAllConnectors({ clusterName, search, fts }),
     {
+      keepPreviousData: true,
       select: (data) =>
         [...data].sort((a, b) => {
           if (a.name < b.name) {
diff --git a/frontend/src/lib/hooks/api/schemas.ts b/frontend/src/lib/hooks/api/schemas.ts
index f87bf074f..5acd309e2 100644
--- a/frontend/src/lib/hooks/api/schemas.ts
+++ b/frontend/src/lib/hooks/api/schemas.ts
@@ -47,6 +47,7 @@ export function useGetSchemas({
   search,
   orderBy,
   sortOrder,
+  fts,
 }: GetSchemasRequest) {
   return useQuery<SchemaSubjectsResponse>({
     queryKey: [
@@ -57,6 +58,7 @@ export function useGetSchemas({
       search,
       sortOrder,
       orderBy,
+      fts,
     ],
     keepPreviousData: true,
     queryFn: () =>
@@ -67,6 +69,7 @@ export function useGetSchemas({
         search: search || undefined,
         sortOrder,
         orderBy,
+        fts,
       }),
   });
 }
diff --git a/frontend/src/theme/theme.ts b/frontend/src/theme/theme.ts
index 48e39ecf5..143aa9562 100644
--- a/frontend/src/theme/theme.ts
+++ b/frontend/src/theme/theme.ts
@@ -307,6 +307,10 @@ const baseTheme = {
     filterIcon: {
       normal: Colors.brand[70],
     },
+    ftsIcon: {
+      normal: Colors.neutral[30],
+      active: Colors.brand[70],
+    },
   },
   textArea: {
     borderColor: {
@@ -1539,6 +1543,10 @@ export const darkTheme: ThemeType = {
       normal: Colors.neutral[5],
     },
     menuIcon: Colors.brand[0],
+    ftsIcon: {
+      normal: Colors.neutral[50],
+      active: Colors.brand[10],
+    },
   },
   textArea: {
     ...baseTheme.textArea,