diff --git a/frontend/src/components/Schemas/New/New.tsx b/frontend/src/components/Schemas/New/New.tsx
index 3e5d39c9d..81c987ccd 100644
--- a/frontend/src/components/Schemas/New/New.tsx
+++ b/frontend/src/components/Schemas/New/New.tsx
@@ -13,7 +13,7 @@ import { useNavigate } from 'react-router-dom';
 import { InputLabel } from 'components/common/Input/InputLabel.styled';
 import Input from 'components/common/Input/Input';
 import { FormError } from 'components/common/Input/Input.styled';
-import Select, { SelectOption } from 'components/common/Select/Select';
+import Select from 'components/common/Select/Select';
 import { Button } from 'components/common/Button/Button';
 import { Textarea } from 'components/common/Textbox/Textarea.styled';
 import PageHeading from 'components/common/PageHeading/PageHeading';
@@ -27,7 +27,7 @@ import { yupResolver } from '@hookform/resolvers/yup';
 
 import * as S from './New.styled';
 
-const SchemaTypeOptions: Array<SelectOption> = [
+const SchemaTypeOptions = [
   { value: SchemaType.AVRO, label: 'AVRO' },
   { value: SchemaType.JSON, label: 'JSON' },
   { value: SchemaType.PROTOBUF, label: 'PROTOBUF' },
@@ -131,7 +131,7 @@ const New: React.FC = () => {
           <Controller
             control={control}
             name="schemaType"
-            defaultValue={SchemaTypeOptions[0].value as SchemaType}
+            defaultValue={SchemaTypeOptions[0].value}
             render={({ field: { name, onChange, value } }) => (
               <Select
                 selectSize="M"
diff --git a/frontend/src/components/Topics/Topic/Messages/Filters/AddEditFilterContainer.tsx b/frontend/src/components/Topics/Topic/Messages/Filters/AddEditFilterContainer.tsx
index 557db159b..4054ca51c 100644
--- a/frontend/src/components/Topics/Topic/Messages/Filters/AddEditFilterContainer.tsx
+++ b/frontend/src/components/Topics/Topic/Messages/Filters/AddEditFilterContainer.tsx
@@ -6,15 +6,27 @@ import { FormProvider, Controller, useForm } from 'react-hook-form';
 import { ErrorMessage } from '@hookform/error-message';
 import { Button } from 'components/common/Button/Button';
 import { FormError } from 'components/common/Input/Input.styled';
-import { AddMessageFilters } from 'components/Topics/Topic/Messages/Filters/AddFilter';
 import Editor from 'components/common/Editor/Editor';
 import { yupResolver } from '@hookform/resolvers/yup';
 import yup from 'lib/yupExtended';
+import { useRegisterSmartFilter } from 'lib/hooks/api/topicMessages';
+import useAppParams from 'lib/hooks/useAppParams';
+import { RouteParamsClusterTopic } from 'lib/paths';
+import {
+  AdvancedFilter,
+  selectFilter,
+  useMessageFiltersStore,
+} from 'lib/hooks/useMessageFiltersStore';
+import { showAlert } from 'lib/errorHandling';
+import Flexbox from 'components/common/FlexBox/FlexBox';
+import { useIsMessagesSmartFilterPersisted } from 'lib/hooks/useMessagesFilters';
+
+import QuestionInfo from './QuestionInfo';
 
 const validationSchema = yup.object().shape({
   saveFilter: yup.boolean(),
-  code: yup.string().required(),
-  name: yup.string().when('saveFilter', {
+  value: yup.string().required(),
+  id: yup.string().when('saveFilter', {
     is: (value: boolean | undefined) => typeof value === 'undefined' || value,
     then: (schema) => schema.required(),
     otherwise: (schema) => schema.notRequired(),
@@ -22,25 +34,65 @@ const validationSchema = yup.object().shape({
 });
 
 export interface AddEditFilterContainerProps {
-  cancelBtnHandler: () => void;
-  submitBtnText: string;
-  inputDisplayNameDefaultValue?: string;
-  inputCodeDefaultValue?: string;
-  isAdd?: boolean;
-  submitCallback?: (values: AddMessageFilters) => void;
+  closeSideBar: () => void;
+  currentFilter?: AdvancedFilter;
+  smartFilter?: AdvancedFilter | undefined;
+  setSmartFilter: (filter: AdvancedFilter, persisted?: boolean) => void;
+}
+
+interface AddMessageFilters extends Omit<AdvancedFilter, 'filterCode'> {
+  saveFilter: boolean;
+}
+
+function submitValidation(id: string, currentFilterId: string): boolean {
+  const filter = selectFilter(id)(useMessageFiltersStore.getState());
+
+  if (filter && filter.id !== currentFilterId) {
+    showAlert('error', {
+      id: '',
+      title: 'Validation Error',
+      message: 'Filter with the same name already exists',
+    });
+    return true;
+  }
+
+  return false;
+}
+
+function getLabelName(values: AddMessageFilters) {
+  if (values.id) {
+    return values.id;
+  }
+
+  if (values.value.length > 24) {
+    return values.value.substring(0, 10);
+  }
+
+  return values.value;
 }
 
 const AddEditFilterContainer: React.FC<AddEditFilterContainerProps> = ({
-  cancelBtnHandler,
-  submitBtnText,
-  inputDisplayNameDefaultValue = '',
-  inputCodeDefaultValue = '',
-  submitCallback,
-  isAdd,
+  closeSideBar,
+  smartFilter,
+  currentFilter,
+  setSmartFilter,
 }) => {
+  const filterId = currentFilter?.id || '';
+  const isEdit = !!currentFilter;
+  const isPersisted = useIsMessagesSmartFilterPersisted();
+
+  const { clusterName, topicName } = useAppParams<RouteParamsClusterTopic>();
+  const save = useMessageFiltersStore((state) => state.save);
+  const replace = useMessageFiltersStore((state) => state.replace);
+  const commit = useMessageFiltersStore((state) => state.commit);
+
   const methods = useForm<AddMessageFilters>({
     mode: 'onChange',
     resolver: yupResolver(validationSchema),
+    defaultValues: {
+      id: currentFilter?.id,
+      value: currentFilter?.value,
+    },
   });
   const {
     handleSubmit,
@@ -49,17 +101,53 @@ const AddEditFilterContainer: React.FC<AddEditFilterContainerProps> = ({
     reset,
   } = methods;
 
-  const onSubmit = React.useCallback(
-    (values: AddMessageFilters) => {
-      try {
-        submitCallback?.(values);
-        reset({ name: '', code: '', saveFilter: false });
-      } catch (e) {
-        // do nothing
+  const { mutateAsync } = useRegisterSmartFilter({ clusterName, topicName });
+
+  const onSubmit = async (values: AddMessageFilters) => {
+    try {
+      if (submitValidation(values.id, filterId)) {
+        return;
       }
-    },
-    [isAdd, reset, submitCallback]
-  );
+
+      const messageFilter = await mutateAsync({ filterCode: values.value });
+      if (messageFilter.id) {
+        const filterValue = {
+          ...values,
+          id: getLabelName(values),
+          filterCode: messageFilter.id,
+        };
+
+        if (isEdit) {
+          if (isPersisted) {
+            replace(filterId, filterValue);
+          } else {
+            // update the non persisted storage to pick up names
+            commit(filterValue);
+          }
+
+          // when the active is the one that is getting edited
+          if (smartFilter?.id === filterId) {
+            setSmartFilter(filterValue, isPersisted);
+          }
+
+          closeSideBar();
+          return;
+        }
+
+        if (values.saveFilter) {
+          save(filterValue);
+          reset({ id: '', value: '', saveFilter: false });
+          return;
+        }
+
+        commit(filterValue);
+        setSmartFilter(filterValue, false);
+        closeSideBar();
+      }
+    } catch (e) {
+      // do nothing
+    }
+  };
 
   return (
     <FormProvider {...methods}>
@@ -68,8 +156,7 @@ const AddEditFilterContainer: React.FC<AddEditFilterContainerProps> = ({
           <InputLabel>Filter code</InputLabel>
           <Controller
             control={control}
-            name="code"
-            defaultValue={inputCodeDefaultValue}
+            name="value"
             render={({ field: { onChange, value } }) => (
               <Editor
                 value={value}
@@ -85,10 +172,10 @@ const AddEditFilterContainer: React.FC<AddEditFilterContainerProps> = ({
         </div>
         <div>
           <FormError>
-            <ErrorMessage errors={errors} name="code" />
+            <ErrorMessage errors={errors} name="value" />
           </FormError>
         </div>
-        {isAdd && (
+        {!isEdit && (
           <InputLabel>
             <input {...methods.register('saveFilter')} type="checkbox" />
             Save this filter
@@ -100,32 +187,34 @@ const AddEditFilterContainer: React.FC<AddEditFilterContainerProps> = ({
             inputSize="M"
             placeholder="Enter Name"
             autoComplete="off"
-            name="name"
-            defaultValue={inputDisplayNameDefaultValue}
+            name="id"
           />
         </div>
         <div>
           <FormError>
-            <ErrorMessage errors={errors} name="name" />
+            <ErrorMessage errors={errors} name="id" />
           </FormError>
         </div>
-        <S.FilterButtonWrapper>
-          <Button
-            buttonSize="M"
-            buttonType="secondary"
-            type="button"
-            onClick={cancelBtnHandler}
-          >
-            Cancel
-          </Button>
-          <Button
-            buttonSize="M"
-            buttonType="primary"
-            type="submit"
-            disabled={!isValid || isSubmitting || !isDirty}
-          >
-            {submitBtnText}
-          </Button>
+        <S.FilterButtonWrapper isEdit={isEdit}>
+          {!isEdit && <QuestionInfo />}
+          <Flexbox gap="10px">
+            <Button
+              buttonSize="M"
+              buttonType="secondary"
+              type="button"
+              onClick={closeSideBar}
+            >
+              Cancel
+            </Button>
+            <Button
+              buttonSize="M"
+              buttonType="primary"
+              type="submit"
+              disabled={!isValid || isSubmitting || !isDirty}
+            >
+              {isEdit ? 'Edit Filter' : 'Add Filter'}
+            </Button>
+          </Flexbox>
         </S.FilterButtonWrapper>
       </form>
     </FormProvider>
diff --git a/frontend/src/components/Topics/Topic/Messages/Filters/AddFilter.tsx b/frontend/src/components/Topics/Topic/Messages/Filters/AddFilter.tsx
deleted file mode 100644
index 035d98c3a..000000000
--- a/frontend/src/components/Topics/Topic/Messages/Filters/AddFilter.tsx
+++ /dev/null
@@ -1,122 +0,0 @@
-import React from 'react';
-import * as S from 'components/Topics/Topic/Messages/Filters/Filters.styled';
-import { MessageFilters } from 'components/Topics/Topic/Messages/Filters/Filters';
-import { FilterEdit } from 'components/Topics/Topic/Messages/Filters/FilterModal';
-import SavedFilters from 'components/Topics/Topic/Messages/Filters/SavedFilters';
-import SavedIcon from 'components/common/Icons/SavedIcon';
-import QuestionIcon from 'components/common/Icons/QuestionIcon';
-import useBoolean from 'lib/hooks/useBoolean';
-import { showAlert } from 'lib/errorHandling';
-
-import AddEditFilterContainer from './AddEditFilterContainer';
-import InfoModal from './InfoModal';
-
-export interface FilterModalProps {
-  toggleIsOpen(): void;
-  filters: MessageFilters[];
-  addFilter(values: MessageFilters): void;
-  deleteFilter(index: number): void;
-  activeFilterHandler(activeFilter: MessageFilters, index: number): void;
-  toggleEditModal(): void;
-  editFilter(value: FilterEdit): void;
-  isSavedFiltersOpen: boolean;
-  onClickSavedFilters(newValue: boolean): void;
-  activeFilter?: MessageFilters;
-}
-
-export interface AddMessageFilters extends MessageFilters {
-  saveFilter: boolean;
-}
-
-const AddFilter: React.FC<FilterModalProps> = ({
-  toggleIsOpen,
-  filters,
-  addFilter,
-  deleteFilter,
-  activeFilterHandler,
-  toggleEditModal,
-  editFilter,
-  isSavedFiltersOpen,
-  onClickSavedFilters,
-  activeFilter,
-}) => {
-  const { value: isOpen, toggle } = useBoolean();
-
-  const onSubmit = React.useCallback(
-    async (values: AddMessageFilters) => {
-      const isFilterExists = filters.some(
-        (filter) => filter.name === values.name
-      );
-
-      if (isFilterExists) {
-        showAlert('error', {
-          id: '',
-          title: 'Validation Error',
-          message: 'Filter with the same name already exists',
-        });
-        return;
-      }
-
-      const data = { ...values };
-      if (data.saveFilter) {
-        addFilter(data);
-      } else {
-        // other case is not applying the filter
-        const dataCodeLabel =
-          data.code.length > 16 ? `${data.code.slice(0, 16)}...` : data.code;
-        data.name = data.name || dataCodeLabel;
-
-        activeFilterHandler(data, -1);
-        toggleIsOpen();
-      }
-    },
-    [activeFilterHandler, addFilter, toggleIsOpen]
-  );
-  return (
-    <>
-      <S.FilterTitle>
-        Add filter
-        <div>
-          <S.QuestionIconContainer
-            type="button"
-            aria-label="info"
-            onClick={toggle}
-          >
-            <QuestionIcon />
-          </S.QuestionIconContainer>
-          {isOpen && <InfoModal toggleIsOpen={toggle} />}
-        </div>
-      </S.FilterTitle>
-      {isSavedFiltersOpen ? (
-        <SavedFilters
-          deleteFilter={deleteFilter}
-          activeFilterHandler={activeFilterHandler}
-          closeModal={toggleIsOpen}
-          onGoBack={() => onClickSavedFilters(!onClickSavedFilters)}
-          filters={filters}
-          onEdit={(index: number, filter: MessageFilters) => {
-            toggleEditModal();
-            editFilter({ index, filter });
-          }}
-          activeFilter={activeFilter}
-        />
-      ) : (
-        <>
-          <S.SavedFiltersTextContainer
-            onClick={() => onClickSavedFilters(!isSavedFiltersOpen)}
-          >
-            <SavedIcon /> <S.SavedFiltersText>Saved Filters</S.SavedFiltersText>
-          </S.SavedFiltersTextContainer>
-          <AddEditFilterContainer
-            cancelBtnHandler={toggleIsOpen}
-            submitBtnText="Add filter"
-            submitCallback={onSubmit}
-            isAdd
-          />
-        </>
-      )}
-    </>
-  );
-};
-
-export default AddFilter;
diff --git a/frontend/src/components/Topics/Topic/Messages/Filters/EditFilter.tsx b/frontend/src/components/Topics/Topic/Messages/Filters/EditFilter.tsx
deleted file mode 100644
index 04f9c47ee..000000000
--- a/frontend/src/components/Topics/Topic/Messages/Filters/EditFilter.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import React from 'react';
-import { MessageFilters } from 'components/Topics/Topic/Messages/Filters/Filters';
-import { FilterEdit } from 'components/Topics/Topic/Messages/Filters/FilterModal';
-
-import AddEditFilterContainer from './AddEditFilterContainer';
-import * as S from './Filters.styled';
-
-export interface EditFilterProps {
-  editFilter: FilterEdit;
-  toggleEditModal(): void;
-  editSavedFilter(filter: FilterEdit): void;
-}
-
-const EditFilter: React.FC<EditFilterProps> = ({
-  editFilter,
-  toggleEditModal,
-  editSavedFilter,
-}) => {
-  const onSubmit = (values: MessageFilters) => {
-    editSavedFilter({ index: editFilter.index, filter: values });
-    toggleEditModal();
-  };
-  return (
-    <>
-      <S.FilterTitle>Edit filter</S.FilterTitle>
-      <AddEditFilterContainer
-        cancelBtnHandler={() => toggleEditModal()}
-        submitBtnText="Save"
-        inputDisplayNameDefaultValue={editFilter.filter.name}
-        inputCodeDefaultValue={editFilter.filter.code}
-        submitCallback={onSubmit}
-      />
-    </>
-  );
-};
-
-export default EditFilter;
diff --git a/frontend/src/components/Topics/Topic/Messages/Filters/FilterModal.tsx b/frontend/src/components/Topics/Topic/Messages/Filters/FilterModal.tsx
deleted file mode 100644
index 0ada15878..000000000
--- a/frontend/src/components/Topics/Topic/Messages/Filters/FilterModal.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import React from 'react';
-import * as S from 'components/Topics/Topic/Messages/Filters/Filters.styled';
-import {
-  ActiveMessageFilter,
-  MessageFilters,
-} from 'components/Topics/Topic/Messages/Filters/Filters';
-import AddFilter from 'components/Topics/Topic/Messages/Filters/AddFilter';
-import EditFilter from 'components/Topics/Topic/Messages/Filters/EditFilter';
-
-export interface FilterModalProps {
-  toggleIsOpen(): void;
-  filters: MessageFilters[];
-  addFilter(values: MessageFilters): void;
-  deleteFilter(index: number): void;
-  activeFilterHandler(activeFilter: MessageFilters, index: number): void;
-  editSavedFilter(filter: FilterEdit): void;
-  activeFilter: ActiveMessageFilter;
-  quickEditMode?: boolean;
-}
-
-export interface FilterEdit {
-  index: number;
-  filter: MessageFilters;
-}
-
-const FilterModal: React.FC<FilterModalProps> = ({
-  toggleIsOpen,
-  filters,
-  addFilter,
-  deleteFilter,
-  activeFilterHandler,
-  editSavedFilter,
-  activeFilter,
-  quickEditMode = false,
-}) => {
-  const [isInEditMode, setIsInEditMode] =
-    React.useState<boolean>(quickEditMode);
-  const [isSavedFiltersOpen, setIsSavedFiltersOpen] =
-    React.useState<boolean>(false);
-
-  const toggleEditModal = () => {
-    setIsInEditMode(!isInEditMode);
-  };
-
-  const [editFilter, setEditFilter] = React.useState<FilterEdit>(() => {
-    const { index, name, code } = activeFilter;
-    return quickEditMode
-      ? { index, filter: { name, code } }
-      : { index: -1, filter: { name: '', code: '' } };
-  });
-  const editFilterHandler = (value: FilterEdit) => {
-    setEditFilter(value);
-    setIsInEditMode(!isInEditMode);
-  };
-
-  const toggleEditModalHandler = quickEditMode ? toggleIsOpen : toggleEditModal;
-
-  return (
-    <S.MessageFilterModal data-testid="messageFilterModal">
-      {isInEditMode ? (
-        <EditFilter
-          editFilter={editFilter}
-          toggleEditModal={toggleEditModalHandler}
-          editSavedFilter={editSavedFilter}
-        />
-      ) : (
-        <AddFilter
-          toggleIsOpen={toggleIsOpen}
-          filters={filters}
-          addFilter={addFilter}
-          deleteFilter={deleteFilter}
-          activeFilterHandler={activeFilterHandler}
-          toggleEditModal={toggleEditModal}
-          editFilter={editFilterHandler}
-          isSavedFiltersOpen={isSavedFiltersOpen}
-          onClickSavedFilters={() => setIsSavedFiltersOpen(!isSavedFiltersOpen)}
-          activeFilter={activeFilter}
-        />
-      )}
-    </S.MessageFilterModal>
-  );
-};
-
-export default FilterModal;
diff --git a/frontend/src/components/Topics/Topic/Messages/Filters/Filters.styled.ts b/frontend/src/components/Topics/Topic/Messages/Filters/Filters.styled.ts
index 7ec8fbde0..3e609fb03 100644
--- a/frontend/src/components/Topics/Topic/Messages/Filters/Filters.styled.ts
+++ b/frontend/src/components/Topics/Topic/Messages/Filters/Filters.styled.ts
@@ -4,6 +4,9 @@ import styled, { css } from 'styled-components';
 import DatePicker from 'react-datepicker';
 import EditIcon from 'components/common/Icons/EditIcon';
 import closeIcon from 'components/common/Icons/CloseIcon';
+import { PollingMode } from 'generated-sources';
+
+import { isModeOptionWithInput } from './utils';
 
 interface SavedFilterProps {
   selected: boolean;
@@ -16,32 +19,9 @@ interface MessageLoadingSpinnerProps {
   isFetching: boolean;
 }
 
-export const FiltersWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  padding-left: 16px;
-  padding-right: 16px;
-
-  & > div:first-child {
-    display: flex;
-    justify-content: space-between;
-    padding-top: 2px;
-    align-items: flex-end;
-  }
-`;
-
-export const FilterInputs = styled.div`
-  display: flex;
-  gap: 8px;
-  align-items: flex-end;
-  width: 90%;
-  flex-wrap: wrap;
-`;
-
-export const SeekTypeSelectorWrapper = styled.div`
+export const FilterModeTypeSelectorWrapper = styled.div`
   display: flex;
   & .select-wrapper {
-    width: 40% !important;
     & > select {
       border-radius: 4px 0 0 4px !important;
     }
@@ -83,14 +63,6 @@ export const DatePickerInput = styled(DatePicker)`
   }
 `;
 
-export const FiltersMetrics = styled.div`
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  gap: 22px;
-  padding-top: 16px;
-  padding-bottom: 16px;
-`;
 export const Message = styled.div`
   font-size: 14px;
   color: ${({ theme }) => theme.metrics.filters.color.normal};
@@ -106,22 +78,6 @@ export const MetricsIcon = styled.div`
   padding-right: 6px;
   height: 12px;
 `;
-
-export const ClearAll = styled.div`
-  color: ${({ theme }) => theme.metrics.filters.color.normal};
-  font-size: 12px;
-  cursor: pointer;
-  line-height: 32px;
-  margin-left: 8px;
-`;
-
-export const ButtonContainer = styled.div`
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  margin-top: 20px;
-`;
-
 export const ListItem = styled.li`
   font-size: 12px;
   font-weight: 400;
@@ -138,19 +94,6 @@ export const InfoParagraph = styled.div`
   color: ${({ theme }) => theme.table.td.color.normal};
 `;
 
-export const MessageFilterModal = styled.div`
-  height: auto;
-  width: 560px;
-  border-radius: 8px;
-  background: ${({ theme }) => theme.modal.backgroundColor};
-  position: absolute;
-  left: 25%;
-  border: 1px solid ${({ theme }) => theme.modal.border.contrast};
-  box-shadow: ${({ theme }) => theme.modal.shadow};
-  padding: 16px;
-  z-index: 1;
-`;
-
 export const InfoModal = styled.div`
   height: auto;
   width: 560px;
@@ -171,42 +114,16 @@ export const QuestionIconContainer = styled.button`
   border: none;
 `;
 
-export const FilterTitle = styled.h3`
-  line-height: 32px;
-  font-size: 20px;
-  margin-bottom: 40px;
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  color: ${({ theme }) => theme.modal.color};
-  &:after {
-    content: '';
-    width: calc(100% + 32px);
-    height: 1px;
-    position: absolute;
-    top: 40px;
-    left: -16px;
-    display: inline-block;
-    background-color: ${({ theme }) => theme.modal.border.top};
-  }
-`;
-
-export const CreatedFilter = styled.p`
-  margin: 25px 0 10px;
-  font-size: 14px;
-  line-height: 20px;
-  color: ${({ theme }) => theme.savedFilter.color};
-`;
-
 export const NoSavedFilter = styled.p`
-  color: ${({ theme }) => theme.savedFilter.color};
+  color: ${({ theme }) => theme.default.color.normal};
+  font-size: 16px;
+  margin-top: 10px;
 `;
 export const SavedFiltersContainer = styled.div`
   overflow-y: auto;
   height: 195px;
-  justify-content: space-around;
-  padding-left: 10px;
+  display: flex;
+  flex-direction: column;
 `;
 
 export const SavedFilterName = styled.div`
@@ -215,9 +132,9 @@ export const SavedFilterName = styled.div`
   color: ${({ theme }) => theme.savedFilter.filterName};
 `;
 
-export const FilterButtonWrapper = styled.div`
+export const FilterButtonWrapper = styled.div<{ isEdit: boolean }>`
   display: flex;
-  justify-content: flex-end;
+  justify-content: ${(props) => (props.isEdit ? 'flex-end' : 'space-between')};
   margin-top: 10px;
   gap: 10px;
   padding-top: 16px;
@@ -234,24 +151,20 @@ export const FilterButtonWrapper = styled.div`
   }
 `;
 
-export const ActiveSmartFilterWrapper = styled.div`
-  padding: 8px 0 5px;
-  display: flex;
-  gap: 10px;
-  align-items: center;
-  justify-content: flex-start;
-`;
-
-export const DeleteSavedFilter = styled.div.attrs({ role: 'deleteIcon' })`
-  margin-top: 2px;
+export const DeleteSavedFilter = styled.button`
   cursor: pointer;
   color: ${({ theme }) => theme.icons.deleteIcon};
+  background-color: transparent;
+  border: none;
 `;
 
-export const FilterEdit = styled.div`
+export const FilterEdit = styled.button`
   font-weight: 500;
   font-size: 14px;
   line-height: 20px;
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
 `;
 
 export const FilterOptions = styled.div`
@@ -266,19 +179,20 @@ export const SavedFilter = styled.div.attrs({
 })<SavedFilterProps>`
   display: flex;
   justify-content: space-between;
-  padding-right: 5px;
+  padding: 5px;
   height: 32px;
+  border-radius: 4px;
   align-items: center;
   cursor: pointer;
-  border-top: 1px solid ${({ theme }) => theme.panelColor.borderTop};
   &:hover ${FilterOptions} {
     display: flex;
   }
   &:hover {
-    background: ${({ theme }) => theme.layout.stuffColor};
+    background-color: ${({ theme }) => theme.layout.stuffColor};
   }
-  background: ${({ selected, theme }) =>
-    selected ? theme.layout.stuffColor : theme.modal.backgroundColor};
+
+  background-color: ${({ selected, theme }) =>
+    selected ? theme.layout.stuffColor : 'transparent'};
 `;
 
 export const ActiveSmartFilter = styled.div`
@@ -293,7 +207,7 @@ export const ActiveSmartFilter = styled.div`
   line-height: 20px;
 `;
 
-export const EditSmartFilterIcon = styled.div(
+export const EditSmartFilterIcon = styled.button(
   ({ theme: { icons } }) => css`
     color: ${icons.editIcon.normal};
     display: flex;
@@ -302,19 +216,26 @@ export const EditSmartFilterIcon = styled.div(
     height: 32px;
     width: 32px;
     cursor: pointer;
+    background-color: transparent;
+    border: none;
     border-left: 1px solid ${icons.editIcon.border};
 
-    &:hover {
+    &:hover:not(:disabled) {
       ${EditIcon} {
         fill: ${icons.editIcon.hover};
       }
     }
 
-    &:active {
+    &:active:not(:disabled) {
       ${EditIcon} {
         fill: ${icons.editIcon.active};
       }
     }
+
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
   `
 );
 
@@ -323,7 +244,7 @@ export const SmartFilterName = styled.div`
   min-width: 32px;
 `;
 
-export const DeleteSmartFilterIcon = styled.div(
+export const DeleteSmartFilterIcon = styled.button(
   ({ theme: { icons } }) => css`
     color: ${icons.closeIcon.normal};
     display: flex;
@@ -332,6 +253,8 @@ export const DeleteSmartFilterIcon = styled.div(
     height: 32px;
     width: 32px;
     cursor: pointer;
+    background-color: transparent;
+    border: none;
     border-left: 1px solid ${icons.closeIcon.border};
 
     svg {
@@ -339,17 +262,22 @@ export const DeleteSmartFilterIcon = styled.div(
       width: 14px;
     }
 
-    &:hover {
+    &:hover:not(:disabled) {
       ${closeIcon} {
         fill: ${icons.closeIcon.hover};
       }
     }
 
-    &:active {
+    &:active:not(:disabled) {
       ${closeIcon} {
         fill: ${icons.closeIcon.active};
       }
     }
+
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
   `
 );
 
@@ -360,13 +288,15 @@ export const MessageLoading = styled.div.attrs({
   font-size: ${({ theme }) => theme.heading.h3.fontSize};
   display: ${({ isLive }) => (isLive ? 'flex' : 'none')};
   justify-content: space-around;
-  width: 250px;
+  width: 260px;
 `;
 
-export const StopLoading = styled.div`
-  color: ${({ theme }) => theme.pageLoader.borderColor};
+export const StopLoading = styled.button`
+  color: ${({ theme }) => theme.heading.base.color};
   font-size: ${({ theme }) => theme.heading.h3.fontSize};
   cursor: pointer;
+  background-color: transparent;
+  border: none;
 `;
 
 export const MessageLoadingSpinner = styled.div<MessageLoadingSpinnerProps>`
@@ -388,39 +318,30 @@ export const MessageLoadingSpinner = styled.div<MessageLoadingSpinnerProps>`
   }
 `;
 
-export const SavedFiltersTextContainer = styled.div.attrs({
-  role: 'savedFilterText',
-})`
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-  margin-bottom: 15px;
-`;
-
-const textStyle = css`
-  font-size: 14px;
-  color: ${({ theme }) => theme.editFilter.textColor};
-  font-weight: 500;
+// styled component lib bug it does not pick up the generic
+export const FilterModeTypeSelect = styled(Select<PollingMode>)`
+  border-top-right-radius: ${(props) =>
+    !props.value || !isModeOptionWithInput(props.value) ? '4px' : '0'};
+  border-bottom-right-radius: ${(props) =>
+    !props.value || !isModeOptionWithInput(props.value) ? '4px' : '0'};
+  user-select: none;
 `;
 
-export const SavedFiltersText = styled.div`
-  ${textStyle};
-  margin-left: 7px;
+export const SavedFilterText = styled.div`
+  font-weight: 600;
+  color: ${({ theme }) => theme.default.color.normal};
 `;
 
-export const BackToCustomText = styled.div`
-  ${textStyle};
+export const SavedFilterClearAll = styled.button`
+  font-weight: 500;
+  color: ${({ theme }) => theme.link.color};
+  background-color: transparent;
+  border: none;
   cursor: pointer;
-`;
+  font-size: 16px;
 
-export const SeekTypeSelect = styled(Select)`
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-  user-select: none;
-`;
-
-export const Serdes = styled.div`
-  display: flex;
-  gap: 24px;
-  padding: 8px 0;
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
 `;
diff --git a/frontend/src/components/Topics/Topic/Messages/Filters/Filters.tsx b/frontend/src/components/Topics/Topic/Messages/Filters/Filters.tsx
index 99eb6bac4..b8fc307ed 100644
--- a/frontend/src/components/Topics/Topic/Messages/Filters/Filters.tsx
+++ b/frontend/src/components/Topics/Topic/Messages/Filters/Filters.tsx
@@ -1,645 +1,239 @@
 import 'react-datepicker/dist/react-datepicker.css';
 
-import {
-  MessageFilterType,
-  Partition,
-  SeekDirection,
-  SeekType,
-  SerdeUsage,
-  TopicMessage,
-  TopicMessageConsuming,
-  TopicMessageEvent,
-  TopicMessageEventTypeEnum,
-} from 'generated-sources';
-import React, { useContext } from 'react';
-import omitBy from 'lodash/omitBy';
-import { useLocation, useNavigate, useSearchParams } from 'react-router-dom';
+import { SerdeUsage, TopicMessageConsuming } from 'generated-sources';
+import React, { useMemo, useState } from 'react';
 import MultiSelect from 'components/common/MultiSelect/MultiSelect.styled';
-import { Option } from 'react-multi-select-component';
-import BytesFormatted from 'components/common/BytesFormatted/BytesFormatted';
-import { BASE_PARAMS } from 'lib/constants';
 import Select from 'components/common/Select/Select';
 import { Button } from 'components/common/Button/Button';
 import Search from 'components/common/Search/Search';
-import FilterModal, {
-  FilterEdit,
-} from 'components/Topics/Topic/Messages/Filters/FilterModal';
-import { SeekDirectionOptions } from 'components/Topics/Topic/Messages/Messages';
-import TopicMessagesContext from 'components/contexts/TopicMessagesContext';
-import useBoolean from 'lib/hooks/useBoolean';
-import { RouteParamsClusterTopic } from 'lib/paths';
-import useAppParams from 'lib/hooks/useAppParams';
 import PlusIcon from 'components/common/Icons/PlusIcon';
-import EditIcon from 'components/common/Icons/EditIcon';
-import CloseIcon from 'components/common/Icons/CloseIcon';
-import ClockIcon from 'components/common/Icons/ClockIcon';
-import ArrowDownIcon from 'components/common/Icons/ArrowDownIcon';
-import FileIcon from 'components/common/Icons/FileIcon';
-import { useTopicDetails } from 'lib/hooks/api/topics';
-import { InputLabel } from 'components/common/Input/InputLabel.styled';
 import { getSerdeOptions } from 'components/Topics/Topic/SendMessage/utils';
 import { useSerdes } from 'lib/hooks/api/topicMessages';
+import useAppParams from 'lib/hooks/useAppParams';
+import { RouteParamsClusterTopic } from 'lib/paths';
+import { useMessagesFilters } from 'lib/hooks/useMessagesFilters';
+import { ModeOptions } from 'lib/hooks/filterUtils';
+import { useTopicDetails } from 'lib/hooks/api/topics';
+import EditIcon from 'components/common/Icons/EditIcon';
+import CloseIcon from 'components/common/Icons/CloseIcon';
+import FlexBox from 'components/common/FlexBox/FlexBox';
 
 import * as S from './Filters.styled';
 import {
+  ADD_FILTER_ID,
   filterOptions,
-  getOffsetFromSeekToParam,
-  getSelectedPartitionsFromSeekToParam,
-  getTimestampFromSeekToParam,
+  isLiveMode,
+  isModeOffsetSelector,
+  isModeOptionWithInput,
 } from './utils';
-
-type Query = Record<string, string | string[] | number>;
+import FiltersSideBar from './FiltersSideBar';
+import FiltersMetrics from './FiltersMetrics';
 
 export interface FiltersProps {
   phaseMessage?: string;
-  meta: TopicMessageConsuming;
+  consumptionStats?: TopicMessageConsuming;
   isFetching: boolean;
-  messageEventType?: string;
-
-  addMessage(content: { message: TopicMessage; prepend: boolean }): void;
-
-  resetMessages(): void;
-
-  updatePhase(phase: string): void;
-
-  updateMeta(meta: TopicMessageConsuming): void;
-
-  setIsFetching(status: boolean): void;
-
-  setMessageType(messageType: string): void;
-}
-
-export interface MessageFilters {
-  name: string;
-  code: string;
-}
-
-export interface ActiveMessageFilter {
-  index: number;
-  name: string;
-  code: string;
+  abortFetchData: () => void;
 }
 
-const PER_PAGE = 100;
-
-export const SeekTypeOptions = [
-  { value: SeekType.OFFSET, label: 'Offset' },
-  { value: SeekType.TIMESTAMP, label: 'Timestamp' },
-];
-
 const Filters: React.FC<FiltersProps> = ({
-  phaseMessage,
-  meta: { elapsedMs, bytesConsumed, messagesConsumed, filterApplyErrors },
+  consumptionStats,
   isFetching,
-  addMessage,
-  resetMessages,
-  updatePhase,
-  updateMeta,
-  setIsFetching,
-  setMessageType,
-  messageEventType,
+  abortFetchData,
+  phaseMessage,
 }) => {
   const { clusterName, topicName } = useAppParams<RouteParamsClusterTopic>();
-  const location = useLocation();
-  const navigate = useNavigate();
-  const [searchParams] = useSearchParams();
 
-  const page = searchParams.get('page');
+  const {
+    mode,
+    setMode,
+    date,
+    setTimeStamp,
+    keySerde,
+    setKeySerde,
+    valueSerde,
+    setValueSerde,
+    offset,
+    setOffsetValue,
+    search,
+    setSearch,
+    partitions: p,
+    setPartition,
+    smartFilter,
+    setSmartFilter,
+    refreshData,
+  } = useMessagesFilters();
 
   const { data: topic } = useTopicDetails({ clusterName, topicName });
-
-  const partitions = topic?.partitions || [];
-
-  const { seekDirection, isLive, changeSeekDirection } =
-    useContext(TopicMessagesContext);
-
-  const { value: isOpen, toggle } = useBoolean();
-
-  const { value: isQuickEditOpen, toggle: toggleQuickEdit } = useBoolean();
-
-  const source = React.useRef<EventSource | null>(null);
-
-  const [selectedPartitions, setSelectedPartitions] = React.useState<Option[]>(
-    getSelectedPartitionsFromSeekToParam(searchParams, partitions)
-  );
-
-  const [currentSeekType, setCurrentSeekType] = React.useState<SeekType>(
-    SeekTypeOptions.find(
-      (ele) => ele.value === (searchParams.get('seekType') as SeekType)
-    ) !== undefined
-      ? (searchParams.get('seekType') as SeekType)
-      : SeekType.OFFSET
-  );
-  const [offset, setOffset] = React.useState<string>(
-    getOffsetFromSeekToParam(searchParams)
-  );
-
-  const [timestamp, setTimestamp] = React.useState<Date | null>(
-    getTimestampFromSeekToParam(searchParams)
-  );
-  const [keySerde, setKeySerde] = React.useState<string>(
-    searchParams.get('keySerde') || ''
-  );
-  const [valueSerde, setValueSerde] = React.useState<string>(
-    searchParams.get('valueSerde') || ''
-  );
-
-  const [savedFilters, setSavedFilters] = React.useState<MessageFilters[]>(
-    JSON.parse(localStorage.getItem('savedFilters') ?? '[]')
-  );
-
-  let storageActiveFilter = localStorage.getItem('activeFilter');
-  storageActiveFilter =
-    storageActiveFilter ?? JSON.stringify({ name: '', code: '', index: -1 });
-
-  const [activeFilter, setActiveFilter] = React.useState<ActiveMessageFilter>(
-    JSON.parse(storageActiveFilter)
-  );
-
-  const [queryType, setQueryType] = React.useState<MessageFilterType>(
-    activeFilter.name
-      ? MessageFilterType.CEL_SCRIPT
-      : MessageFilterType.STRING_CONTAINS
-  );
-  const [query, setQuery] = React.useState<string>(searchParams.get('q') || '');
-  const [isTailing, setIsTailing] = React.useState<boolean>(isLive);
-
-  const isSeekTypeControlVisible = React.useMemo(
-    () => selectedPartitions.length > 0,
-    [selectedPartitions]
-  );
-
-  const isSubmitDisabled = React.useMemo(() => {
-    if (isSeekTypeControlVisible) {
-      return (
-        (currentSeekType === SeekType.TIMESTAMP && !timestamp) || isTailing
-      );
-    }
-
-    return false;
-  }, [isSeekTypeControlVisible, currentSeekType, timestamp, isTailing]);
-
-  const partitionMap = React.useMemo(
-    () =>
-      partitions.reduce<Record<string, Partition>>(
-        (acc, partition) => ({
-          ...acc,
-          [partition.partition]: partition,
-        }),
-        {}
-      ),
-    [partitions]
-  );
-
-  const handleClearAllFilters = () => {
-    setCurrentSeekType(SeekType.OFFSET);
-    setOffset('');
-    setTimestamp(null);
-    setQuery('');
-    changeSeekDirection(SeekDirection.FORWARD);
-    getSelectedPartitionsFromSeekToParam(searchParams, partitions);
-    setSelectedPartitions(
-      partitions.map((partition: Partition) => {
-        return {
-          value: partition.partition,
-          label: `Partition #${partition.partition.toString()}`,
+  const [createdEditedSmartId, setCreatedEditedSmartId] = useState<string>();
+
+  const partitions = useMemo(() => {
+    return (topic?.partitions || []).reduce<{
+      dict: Record<string, { label: string; value: number }>;
+      list: { label: string; value: number }[];
+    }>(
+      (acc, currentValue) => {
+        const label = {
+          label: `Partition #${currentValue.partition.toString()}`,
+          value: currentValue.partition,
         };
-      })
-    );
-  };
-
-  const handleFiltersSubmit = (currentOffset: string) => {
-    const nextAttempt = Number(searchParams.get('attempt') || 0) + 1;
-    const props: Query = {
-      q: queryType === MessageFilterType.CEL_SCRIPT ? activeFilter.code : query,
-      filterQueryType: queryType,
-      attempt: nextAttempt,
-      limit: PER_PAGE,
-      page: page || 0,
-      seekDirection,
-      keySerde: keySerde || searchParams.get('keySerde') || '',
-      valueSerde: valueSerde || searchParams.get('valueSerde') || '',
-    };
-
-    if (isSeekTypeControlVisible) {
-      switch (seekDirection) {
-        case SeekDirection.FORWARD:
-          props.seekType = SeekType.BEGINNING;
-          break;
-        case SeekDirection.BACKWARD:
-        case SeekDirection.TAILING:
-          props.seekType = SeekType.LATEST;
-          break;
-        default:
-          props.seekType = currentSeekType;
-      }
-
-      if (offset && currentSeekType === SeekType.OFFSET) {
-        props.seekType = SeekType.OFFSET;
-      }
-
-      if (timestamp && currentSeekType === SeekType.TIMESTAMP) {
-        props.seekType = SeekType.TIMESTAMP;
-      }
-
-      const isSeekTypeWithSeekTo =
-        props.seekType === SeekType.TIMESTAMP ||
-        props.seekType === SeekType.OFFSET;
-
-      if (
-        selectedPartitions.length !== partitions.length ||
-        isSeekTypeWithSeekTo
-      ) {
-        // not everything in the partition is selected
-        props.seekTo = selectedPartitions.map(({ value }) => {
-          const offsetProperty =
-            seekDirection === SeekDirection.FORWARD ? 'offsetMin' : 'offsetMax';
-          const offsetBasedSeekTo =
-            currentOffset || partitionMap[value][offsetProperty];
-          const seekToOffset =
-            currentSeekType === SeekType.OFFSET
-              ? offsetBasedSeekTo
-              : timestamp?.getTime();
 
-          return `${value}::${seekToOffset || '0'}`;
-        });
-      }
-    }
-
-    const newProps = omitBy(props, (v) => v === undefined || v === '');
-    const qs = Object.keys(newProps)
-      .map((key) => `${key}=${encodeURIComponent(newProps[key] as string)}`)
-      .join('&');
-    navigate({
-      search: `?${qs}`,
-    });
-  };
-
-  const handleSSECancel = () => {
-    if (!source.current) return;
-    setIsFetching(false);
-    source.current.close();
-  };
-
-  const addFilter = (newFilter: MessageFilters) => {
-    const filters = [...savedFilters];
-    filters.push(newFilter);
-    setSavedFilters(filters);
-    localStorage.setItem('savedFilters', JSON.stringify(filters));
-  };
-  const deleteFilter = (index: number) => {
-    const filters = [...savedFilters];
-    if (activeFilter.name && activeFilter.index === index) {
-      localStorage.removeItem('activeFilter');
-      setActiveFilter({ name: '', code: '', index: -1 });
-      setQueryType(MessageFilterType.STRING_CONTAINS);
-    }
-    filters.splice(index, 1);
-    localStorage.setItem('savedFilters', JSON.stringify(filters));
-    setSavedFilters(filters);
-  };
-  const deleteActiveFilter = () => {
-    setActiveFilter({ name: '', code: '', index: -1 });
-    localStorage.removeItem('activeFilter');
-    setQueryType(MessageFilterType.STRING_CONTAINS);
-  };
-  const activeFilterHandler = (
-    newActiveFilter: MessageFilters,
-    index: number
-  ) => {
-    localStorage.setItem(
-      'activeFilter',
-      JSON.stringify({ index, ...newActiveFilter })
+        // eslint-disable-next-line no-param-reassign
+        acc.dict[label.value] = label;
+        acc.list.push(label);
+        return acc;
+      },
+      { dict: {}, list: [] }
     );
-    setActiveFilter({ index, ...newActiveFilter });
-    setQueryType(MessageFilterType.CEL_SCRIPT);
-  };
-
-  const composeMessageFilter = (filter: FilterEdit): ActiveMessageFilter => ({
-    index: filter.index,
-    name: filter.filter.name,
-    code: filter.filter.code,
-  });
-
-  const storeAsActiveFilter = (filter: FilterEdit) => {
-    const messageFilter = JSON.stringify(composeMessageFilter(filter));
-    localStorage.setItem('activeFilter', messageFilter);
-  };
-
-  const editSavedFilter = (filter: FilterEdit) => {
-    const filters = [...savedFilters];
-    filters[filter.index] = filter.filter;
-    if (activeFilter.name && activeFilter.index === filter.index) {
-      setActiveFilter(composeMessageFilter(filter));
-      storeAsActiveFilter(filter);
-    }
-    localStorage.setItem('savedFilters', JSON.stringify(filters));
-    setSavedFilters(filters);
-  };
-
-  const editCurrentFilter = (filter: FilterEdit) => {
-    if (filter.index < 0) {
-      setActiveFilter(composeMessageFilter(filter));
-      storeAsActiveFilter(filter);
-    } else {
-      editSavedFilter(filter);
-    }
-  };
-  // eslint-disable-next-line consistent-return
-  React.useEffect(() => {
-    if (location.search?.length !== 0) {
-      const url = `${BASE_PARAMS.basePath}/api/clusters/${encodeURIComponent(
-        clusterName
-      )}/topics/${topicName}/messages${location.search}`;
-      const sse = new EventSource(url);
+  }, [topic?.partitions]);
 
-      source.current = sse;
-      setIsFetching(true);
+  const partitionValue = useMemo(() => {
+    return p.map((value) => partitions.dict[value]);
+  }, [p, partitions]);
 
-      sse.onopen = () => {
-        resetMessages();
-        setIsFetching(true);
-      };
-      sse.onmessage = ({ data }) => {
-        const { type, message, phase, consuming }: TopicMessageEvent =
-          JSON.parse(data);
-        switch (type) {
-          case TopicMessageEventTypeEnum.MESSAGE:
-            if (message) {
-              addMessage({
-                message,
-                prepend: isLive,
-              });
-            }
-            break;
-          case TopicMessageEventTypeEnum.PHASE:
-            if (phase?.name) {
-              updatePhase(phase.name);
-            }
-            break;
-          case TopicMessageEventTypeEnum.CONSUMING:
-            if (consuming) updateMeta(consuming);
-            break;
-          case TopicMessageEventTypeEnum.DONE:
-            if (consuming && type) {
-              setMessageType(type);
-              updateMeta(consuming);
-            }
-            break;
-          default:
-        }
-      };
-
-      sse.onerror = () => {
-        setIsFetching(false);
-        sse.close();
-      };
-
-      return () => {
-        setIsFetching(false);
-        sse.close();
-      };
-    }
-  }, [
-    clusterName,
-    topicName,
-    seekDirection,
-    location,
-    addMessage,
-    resetMessages,
-    setIsFetching,
-    updateMeta,
-    updatePhase,
-  ]);
-  React.useEffect(() => {
-    if (location.search?.length === 0) {
-      handleFiltersSubmit(offset);
-    }
-  }, [
-    seekDirection,
-    queryType,
-    activeFilter,
-    currentSeekType,
-    timestamp,
-    query,
-    location,
-  ]);
-  React.useEffect(() => {
-    handleFiltersSubmit(offset);
-  }, [
-    seekDirection,
-    queryType,
-    activeFilter,
-    currentSeekType,
-    timestamp,
-    query,
-    seekDirection,
-    page,
-  ]);
-
-  React.useEffect(() => {
-    setIsTailing(isLive);
-  }, [isLive]);
-
-  const { data: serdes = {} } = useSerdes({
+  const { data: serdes = {}, isLoading } = useSerdes({
     clusterName,
     topicName,
     use: SerdeUsage.DESERIALIZE,
   });
 
+  const handleRefresh = () => {
+    if (isLiveMode(mode) && isFetching) {
+      abortFetchData();
+    }
+    refreshData();
+  };
+
   return (
-    <S.FiltersWrapper>
-      <div>
-        <S.FilterInputs>
-          <div>
-            <InputLabel>Seek Type</InputLabel>
-            <S.SeekTypeSelectorWrapper>
-              <S.SeekTypeSelect
-                id="selectSeekType"
-                onChange={(option) => setCurrentSeekType(option as SeekType)}
-                value={currentSeekType}
-                selectSize="M"
-                minWidth="100px"
-                options={SeekTypeOptions}
-                disabled={isTailing}
-              />
+    <FlexBox flexDirection="column" padding="0 16px">
+      <FlexBox width="100%" justifyContent="space-between" margin="10px 0 0 0">
+        <FlexBox gap="8px" alignItems="flex-end" flexWrap="wrap">
+          <S.FilterModeTypeSelectorWrapper>
+            <S.FilterModeTypeSelect
+              id="selectSeekType"
+              onChange={setMode}
+              value={mode}
+              selectSize="M"
+              minWidth="100px"
+              options={ModeOptions}
+            />
 
-              {currentSeekType === SeekType.OFFSET ? (
+            {isModeOptionWithInput(mode) &&
+              (isModeOffsetSelector(mode) ? (
                 <S.OffsetSelector
                   id="offset"
                   type="text"
                   inputSize="M"
                   value={offset}
                   placeholder="Offset"
-                  onChange={({ target: { value } }) => setOffset(value)}
-                  disabled={isTailing}
+                  onChange={({ target: { value } }) => {
+                    setOffsetValue(value);
+                  }}
                 />
               ) : (
                 <S.DatePickerInput
-                  selected={timestamp}
-                  onChange={(date: Date | null) => setTimestamp(date)}
+                  selected={date}
+                  onChange={setTimeStamp}
                   showTimeInput
                   timeInputLabel="Time:"
-                  dateFormat="MMM d, yyyy HH:mm"
+                  dateFormat="MMM d, yyyy"
                   placeholderText="Select timestamp"
-                  disabled={isTailing}
                 />
-              )}
-            </S.SeekTypeSelectorWrapper>
-          </div>
-          <div>
-            <InputLabel>Partitions</InputLabel>
-            <MultiSelect
-              options={partitions.map((p) => ({
-                label: `Partition #${p.partition.toString()}`,
-                value: p.partition,
-              }))}
-              filterOptions={filterOptions}
-              value={selectedPartitions}
-              onChange={setSelectedPartitions}
-              labelledBy="Select partitions"
-              disabled={isTailing}
-            />
-          </div>
-          <div>
-            <InputLabel>Key Serde</InputLabel>
-            <Select
-              id="selectKeySerdeOptions"
-              aria-labelledby="selectKeySerdeOptions"
-              onChange={(option) => setKeySerde(option as string)}
-              minWidth="170px"
-              options={getSerdeOptions(serdes.key || [])}
-              value={searchParams.get('keySerde') as string}
-              selectSize="M"
-              disabled={isTailing}
-            />
-          </div>
-          <div>
-            <InputLabel>Value Serde</InputLabel>
-            <Select
-              id="selectValueSerdeOptions"
-              aria-labelledby="selectValueSerdeOptions"
-              onChange={(option) => setValueSerde(option as string)}
-              options={getSerdeOptions(serdes.value || [])}
-              value={searchParams.get('valueSerde') as string}
-              minWidth="170px"
-              selectSize="M"
-              disabled={isTailing}
-            />
-          </div>
-          <S.ClearAll onClick={handleClearAllFilters}>Clear all</S.ClearAll>
+              ))}
+          </S.FilterModeTypeSelectorWrapper>
+          <MultiSelect
+            disabled={isLoading}
+            options={partitions.list}
+            filterOptions={filterOptions}
+            onChange={setPartition}
+            value={partitionValue}
+            labelledBy="partitionsOptions"
+            overrideStrings={{
+              selectSomeItems: 'Select partitions',
+            }}
+          />
+          <Select
+            id="selectKeySerdeOptions"
+            aria-labelledby="selectKeySerdeOptions"
+            onChange={setKeySerde}
+            minWidth="170px"
+            options={getSerdeOptions(serdes.key || [])}
+            value={keySerde}
+            selectSize="M"
+            placeholder="Key Serde"
+          />
+          <Select
+            id="selectValueSerdeOptions"
+            aria-labelledby="selectValueSerdeOptions"
+            onChange={setValueSerde}
+            options={getSerdeOptions(serdes.value || [])}
+            value={valueSerde}
+            minWidth="170px"
+            selectSize="M"
+            placeholder="Value Serde"
+          />
           <Button
             type="submit"
             buttonType="secondary"
             buttonSize="M"
-            disabled={isSubmitDisabled}
-            onClick={() =>
-              isFetching ? handleSSECancel() : handleFiltersSubmit(offset)
-            }
+            onClick={handleRefresh}
             style={{ fontWeight: 500 }}
           >
-            {isFetching ? 'Cancel' : 'Submit'}
+            Refresh
           </Button>
-        </S.FilterInputs>
-        <Select
-          selectSize="M"
-          onChange={(option) => changeSeekDirection(option as string)}
-          value={seekDirection}
-          minWidth="120px"
-          options={SeekDirectionOptions}
-          isLive={isLive}
-        />
-      </div>
-      <S.ActiveSmartFilterWrapper>
-        <Search placeholder="Search" disabled={isTailing} />
-
-        <Button buttonType="secondary" buttonSize="M" onClick={toggle}>
+        </FlexBox>
+
+        <Search placeholder="Search" value={search} onChange={setSearch} />
+      </FlexBox>
+      <FlexBox
+        gap="10px"
+        alignItems="center"
+        justifyContent="flex-start"
+        padding="8px 0 5px"
+      >
+        <Button
+          buttonType="secondary"
+          buttonSize="M"
+          onClick={() => setCreatedEditedSmartId(ADD_FILTER_ID)}
+        >
           <PlusIcon />
           Add Filters
         </Button>
-        {activeFilter.name && (
+        {smartFilter && (
           <S.ActiveSmartFilter data-testid="activeSmartFilter">
-            <S.SmartFilterName>{activeFilter.name}</S.SmartFilterName>
+            <S.SmartFilterName>{smartFilter.id}</S.SmartFilterName>
             <S.EditSmartFilterIcon
-              data-testid="editActiveSmartFilterBtn"
-              onClick={toggleQuickEdit}
+              onClick={() => setCreatedEditedSmartId(smartFilter.id)}
+              disabled={!!createdEditedSmartId}
             >
               <EditIcon />
             </S.EditSmartFilterIcon>
-            <S.DeleteSmartFilterIcon onClick={deleteActiveFilter}>
+            <S.DeleteSmartFilterIcon
+              onClick={() => setSmartFilter(null)}
+              disabled={!!createdEditedSmartId}
+            >
               <CloseIcon />
             </S.DeleteSmartFilterIcon>
           </S.ActiveSmartFilter>
         )}
-      </S.ActiveSmartFilterWrapper>
-      {isQuickEditOpen && (
-        <FilterModal
-          quickEditMode
-          activeFilter={activeFilter}
-          toggleIsOpen={toggleQuickEdit}
-          editSavedFilter={editCurrentFilter}
-          filters={[]}
-          addFilter={() => null}
-          deleteFilter={() => null}
-          activeFilterHandler={() => null}
-        />
-      )}
-
-      {isOpen && (
-        <FilterModal
-          toggleIsOpen={toggle}
-          filters={savedFilters}
-          addFilter={addFilter}
-          deleteFilter={deleteFilter}
-          activeFilterHandler={activeFilterHandler}
-          editSavedFilter={editSavedFilter}
-          activeFilter={activeFilter}
+      </FlexBox>
+      <FiltersSideBar
+        setClose={() => setCreatedEditedSmartId('')}
+        smartFilter={smartFilter}
+        setSmartFilter={setSmartFilter}
+        setFilterName={setCreatedEditedSmartId}
+        filterName={createdEditedSmartId}
+      />
+      {consumptionStats && (
+        <FiltersMetrics
+          mode={mode}
+          isFetching={isFetching}
+          phaseMessage={phaseMessage}
+          abortFetchData={abortFetchData}
+          consumptionStats={consumptionStats}
         />
       )}
-      <S.FiltersMetrics>
-        <S.Message>
-          {seekDirection !== SeekDirection.TAILING &&
-            isFetching &&
-            phaseMessage}
-          {!isFetching && messageEventType}
-        </S.Message>
-        <S.MessageLoading isLive={isTailing}>
-          <S.MessageLoadingSpinner isFetching={isFetching} />
-          Loading messages.
-          <S.StopLoading
-            onClick={() => {
-              handleSSECancel();
-              setIsTailing(false);
-            }}
-          >
-            Stop loading
-          </S.StopLoading>
-        </S.MessageLoading>
-        <S.Metric title="Elapsed Time">
-          <S.MetricsIcon>
-            <ClockIcon />
-          </S.MetricsIcon>
-          <span>{Math.max(elapsedMs || 0, 0)} ms</span>
-        </S.Metric>
-        <S.Metric title="Bytes Consumed">
-          <S.MetricsIcon>
-            <ArrowDownIcon />
-          </S.MetricsIcon>
-          <BytesFormatted value={bytesConsumed} />
-        </S.Metric>
-        <S.Metric title="Messages Consumed">
-          <S.MetricsIcon>
-            <FileIcon />
-          </S.MetricsIcon>
-          <span>{messagesConsumed} messages consumed</span>
-        </S.Metric>
-        {!!filterApplyErrors && (
-          <S.Metric title="Errors">
-            <span>{filterApplyErrors} errors</span>
-          </S.Metric>
-        )}
-      </S.FiltersMetrics>
-    </S.FiltersWrapper>
+    </FlexBox>
   );
 };
 
diff --git a/frontend/src/components/Topics/Topic/Messages/Filters/FiltersContainer.ts b/frontend/src/components/Topics/Topic/Messages/Filters/FiltersContainer.ts
deleted file mode 100644
index 19dca0184..000000000
--- a/frontend/src/components/Topics/Topic/Messages/Filters/FiltersContainer.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { connect } from 'react-redux';
-import { RootState } from 'redux/interfaces';
-import {
-  addTopicMessage,
-  resetTopicMessages,
-  updateTopicMessagesMeta,
-  updateTopicMessagesPhase,
-  setTopicMessagesFetchingStatus,
-  setMessageEventType,
-} from 'redux/reducers/topicMessages/topicMessagesSlice';
-import {
-  getTopicMessgesMeta,
-  getTopicMessgesPhase,
-  getIsTopicMessagesFetching,
-  getIsTopicMessagesType,
-} from 'redux/reducers/topicMessages/selectors';
-
-import Filters from './Filters';
-
-const mapStateToProps = (state: RootState) => ({
-  phaseMessage: getTopicMessgesPhase(state),
-  meta: getTopicMessgesMeta(state),
-  isFetching: getIsTopicMessagesFetching(state),
-  messageEventType: getIsTopicMessagesType(state),
-});
-
-const mapDispatchToProps = {
-  addMessage: addTopicMessage,
-  resetMessages: resetTopicMessages,
-  updatePhase: updateTopicMessagesPhase,
-  updateMeta: updateTopicMessagesMeta,
-  setIsFetching: setTopicMessagesFetchingStatus,
-  setMessageType: setMessageEventType,
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(Filters);
diff --git a/frontend/src/components/Topics/Topic/Messages/Filters/FiltersMetrics.tsx b/frontend/src/components/Topics/Topic/Messages/Filters/FiltersMetrics.tsx
new file mode 100644
index 000000000..0c95fd64b
--- /dev/null
+++ b/frontend/src/components/Topics/Topic/Messages/Filters/FiltersMetrics.tsx
@@ -0,0 +1,68 @@
+import React, { FC } from 'react';
+import { PollingMode, TopicMessageConsuming } from 'generated-sources';
+import FlexBox from 'components/common/FlexBox/FlexBox';
+import ClockIcon from 'components/common/Icons/ClockIcon';
+import ArrowDownIcon from 'components/common/Icons/ArrowDownIcon';
+import BytesFormatted from 'components/common/BytesFormatted/BytesFormatted';
+import FileIcon from 'components/common/Icons/FileIcon';
+
+import { isLiveMode } from './utils';
+import * as S from './Filters.styled';
+
+export interface FiltersMetricsProps {
+  mode: PollingMode;
+  isFetching: boolean;
+  phaseMessage?: string;
+  abortFetchData: () => void;
+  consumptionStats: TopicMessageConsuming;
+}
+
+const FiltersMetrics: FC<FiltersMetricsProps> = ({
+  mode,
+  isFetching,
+  phaseMessage,
+  abortFetchData,
+  consumptionStats,
+}) => {
+  return (
+    <FlexBox
+      justifyContent="flex-end"
+      alignItems="center"
+      gap="22px"
+      padding="16px 0"
+    >
+      <S.Message>{!isLiveMode(mode) && isFetching && phaseMessage}</S.Message>
+      <S.MessageLoading isLive={isLiveMode(mode) && isFetching}>
+        <S.MessageLoadingSpinner isFetching={isFetching} />
+        Loading messages...
+        <S.StopLoading onClick={abortFetchData}>Stop loading</S.StopLoading>
+      </S.MessageLoading>
+      <S.Message />
+      <S.Metric title="Elapsed Time">
+        <S.MetricsIcon>
+          <ClockIcon />
+        </S.MetricsIcon>
+        <span>{Math.max(consumptionStats.elapsedMs || 0, 0)} ms</span>
+      </S.Metric>
+      <S.Metric title="Bytes Consumed">
+        <S.MetricsIcon>
+          <ArrowDownIcon />
+        </S.MetricsIcon>
+        <BytesFormatted value={consumptionStats.bytesConsumed} />
+      </S.Metric>
+      <S.Metric title="Messages Consumed">
+        <S.MetricsIcon>
+          <FileIcon />
+        </S.MetricsIcon>
+        <span>{consumptionStats.messagesConsumed} messages consumed</span>
+      </S.Metric>
+      {!!consumptionStats.filterApplyErrors && (
+        <S.Metric title="Errors">
+          <span>{consumptionStats.filterApplyErrors} errors</span>
+        </S.Metric>
+      )}
+    </FlexBox>
+  );
+};
+
+export default FiltersMetrics;
diff --git a/frontend/src/components/Topics/Topic/Messages/Filters/FiltersSideBar.tsx b/frontend/src/components/Topics/Topic/Messages/Filters/FiltersSideBar.tsx
new file mode 100644
index 000000000..287c88bea
--- /dev/null
+++ b/frontend/src/components/Topics/Topic/Messages/Filters/FiltersSideBar.tsx
@@ -0,0 +1,64 @@
+import React, { Suspense } from 'react';
+import SlidingSidebar from 'components/common/SlidingSidebar';
+import PageLoader from 'components/common/PageLoader/PageLoader';
+import {
+  AdvancedFilter,
+  selectFilter,
+  useMessageFiltersStore,
+} from 'lib/hooks/useMessageFiltersStore';
+
+import AddEditFilterContainer from './AddEditFilterContainer';
+import SavedFilters from './SavedFilters';
+import { isEditingFilterMode } from './utils';
+
+export interface FilterModalProps {
+  setClose: () => void;
+  filterName?: string;
+  setFilterName: (filterId: string) => void;
+  smartFilter?: AdvancedFilter;
+  setSmartFilter: (filter: AdvancedFilter | null, persisted?: boolean) => void;
+}
+
+const FiltersSideBar: React.FC<FilterModalProps> = ({
+  setClose,
+  filterName,
+  setFilterName,
+  smartFilter,
+  setSmartFilter,
+}) => {
+  const filters = useMessageFiltersStore((state) => state.filters);
+  const filter = useMessageFiltersStore(selectFilter(filterName));
+  const isEditing = isEditingFilterMode(filterName);
+
+  return (
+    <SlidingSidebar
+      open={!!filterName}
+      onClose={setClose}
+      title={isEditing ? 'Edit Filter' : 'Add Filter'}
+    >
+      <Suspense fallback={<PageLoader />}>
+        <AddEditFilterContainer
+          setSmartFilter={setSmartFilter}
+          closeSideBar={setClose}
+          currentFilter={isEditing && filter ? filter : undefined}
+          smartFilter={smartFilter}
+          key={filterName}
+        />
+
+        {!isEditing && (
+          <SavedFilters
+            filters={filters}
+            onEdit={(name) => {
+              setFilterName(name);
+            }}
+            closeSideBar={setClose}
+            smartFilter={smartFilter}
+            setSmartFilter={setSmartFilter}
+          />
+        )}
+      </Suspense>
+    </SlidingSidebar>
+  );
+};
+
+export default FiltersSideBar;
diff --git a/frontend/src/components/Topics/Topic/Messages/Filters/InfoModal.tsx b/frontend/src/components/Topics/Topic/Messages/Filters/InfoModal.tsx
index 7bfcc129a..c97a960fc 100644
--- a/frontend/src/components/Topics/Topic/Messages/Filters/InfoModal.tsx
+++ b/frontend/src/components/Topics/Topic/Messages/Filters/InfoModal.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import * as S from 'components/Topics/Topic/Messages/Filters/Filters.styled';
 import { Button } from 'components/common/Button/Button';
+import Flexbox from 'components/common/FlexBox/FlexBox';
 
 interface InfoModalProps {
   toggleIsOpen(): void;
@@ -59,7 +60,7 @@ const InfoModal: React.FC<InfoModalProps> = ({ toggleIsOpen }) => {
           </S.InfoParagraph>
         </S.ListItem>
       </ol>
-      <S.ButtonContainer>
+      <Flexbox justifyContent="center" margin="20px 0 0 0">
         <Button
           buttonSize="M"
           buttonType="secondary"
@@ -68,7 +69,7 @@ const InfoModal: React.FC<InfoModalProps> = ({ toggleIsOpen }) => {
         >
           Ok
         </Button>
-      </S.ButtonContainer>
+      </Flexbox>
     </S.InfoModal>
   );
 };
diff --git a/frontend/src/components/Topics/Topic/Messages/Filters/QuestionInfo.tsx b/frontend/src/components/Topics/Topic/Messages/Filters/QuestionInfo.tsx
new file mode 100644
index 000000000..409657279
--- /dev/null
+++ b/frontend/src/components/Topics/Topic/Messages/Filters/QuestionInfo.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import QuestionIcon from 'components/common/Icons/QuestionIcon';
+import useBoolean from 'lib/hooks/useBoolean';
+import * as S from 'components/Topics/Topic/Messages/Filters/Filters.styled';
+
+import InfoModal from './InfoModal';
+
+const QuestionInfo: React.FC = () => {
+  const { toggle, value: isOpen } = useBoolean();
+  return (
+    <>
+      <S.QuestionIconContainer type="button" aria-label="info" onClick={toggle}>
+        <QuestionIcon />
+      </S.QuestionIconContainer>
+      {isOpen && <InfoModal toggleIsOpen={toggle} />}
+    </>
+  );
+};
+
+export default QuestionInfo;
diff --git a/frontend/src/components/Topics/Topic/Messages/Filters/SavedFilters.tsx b/frontend/src/components/Topics/Topic/Messages/Filters/SavedFilters.tsx
index ab26319ca..61e768b89 100644
--- a/frontend/src/components/Topics/Topic/Messages/Filters/SavedFilters.tsx
+++ b/frontend/src/components/Topics/Topic/Messages/Filters/SavedFilters.tsx
@@ -1,47 +1,46 @@
 import React, { FC } from 'react';
-import { Button } from 'components/common/Button/Button';
 import DeleteIcon from 'components/common/Icons/DeleteIcon';
 import { useConfirm } from 'lib/hooks/useConfirm';
+import {
+  AdvancedFilter,
+  useMessageFiltersStore,
+} from 'lib/hooks/useMessageFiltersStore';
+import EditIcon from 'components/common/Icons/EditIcon';
+import Flexbox from 'components/common/FlexBox/FlexBox';
 
 import * as S from './Filters.styled';
-import { MessageFilters } from './Filters';
 
 export interface Props {
-  filters: MessageFilters[];
-  onEdit(index: number, filter: MessageFilters): void;
-  deleteFilter(index: number): void;
-  activeFilterHandler(activeFilter: MessageFilters, index: number): void;
-  closeModal(): void;
-  onGoBack(): void;
-  activeFilter?: MessageFilters;
+  filters: Record<string, AdvancedFilter>;
+  smartFilter?: AdvancedFilter;
+  setSmartFilter: (filter: AdvancedFilter | null) => void;
+  onEdit: (id: string) => void;
+  closeSideBar: () => void;
 }
 
 const SavedFilters: FC<Props> = ({
   filters,
+  closeSideBar,
+  smartFilter,
+  setSmartFilter,
   onEdit,
-  deleteFilter,
-  activeFilterHandler,
-  closeModal,
-  onGoBack,
-  activeFilter,
 }) => {
-  const [selectedFilter, setSelectedFilter] = React.useState(-1);
+  const filtersList = React.useMemo(() => Object.values(filters), [filters]);
+  const clearAll = useMessageFiltersStore((state) => state.removeAll);
+  const remove = useMessageFiltersStore((state) => state.remove);
   const confirm = useConfirm();
 
-  const activateFilter = () => {
-    if (selectedFilter > -1) {
-      activeFilterHandler(filters[selectedFilter], selectedFilter);
-    }
-    closeModal();
+  const activateFilter = (filter: AdvancedFilter) => {
+    setSmartFilter(filter);
+    closeSideBar();
   };
 
-  const deleteFilterHandler = (index: number) => {
-    const filterName = filters[index]?.name;
-    const isFilterSelected = activeFilter && activeFilter.name === filterName;
+  const deleteFilterHandler = (id: string) => {
+    const isFilterSelected = smartFilter && smartFilter.id === id;
 
     confirm(
       <>
-        <p>Are you sure want to remove {filterName}?</p>
+        <p>Are you sure want to remove {id}?</p>
         {isFilterSelected && (
           <>
             <br />
@@ -50,59 +49,57 @@ const SavedFilters: FC<Props> = ({
         )}
       </>,
       () => {
-        deleteFilter(index);
-        setSelectedFilter(-1);
+        setSmartFilter(null);
+        remove(id);
       }
     );
   };
 
   return (
     <>
-      <S.BackToCustomText onClick={onGoBack}>
-        Back To create filters
-      </S.BackToCustomText>
+      <Flexbox margin="10px 0 0 0" justifyContent="space-between">
+        <S.SavedFilterText>Saved Filters</S.SavedFilterText>
+        <S.SavedFilterClearAll
+          onClick={clearAll}
+          disabled={filtersList.length === 0}
+        >
+          Clear all
+        </S.SavedFilterClearAll>
+      </Flexbox>
       <S.SavedFiltersContainer>
-        <S.CreatedFilter>Saved filters</S.CreatedFilter>
-        {filters.length === 0 && (
+        {filtersList.length === 0 && (
           <S.NoSavedFilter>No saved filter(s)</S.NoSavedFilter>
         )}
-        {filters.map((filter, index) => (
+        {filtersList.map((filter) => (
           <S.SavedFilter
-            key={Symbol(filter.name).toString()}
-            selected={selectedFilter === index}
-            onClick={() => setSelectedFilter(index)}
+            key={Symbol(filter.id).toString()}
+            selected={smartFilter?.id === filter.id}
+            onClick={() => activateFilter(filter)}
           >
-            <S.SavedFilterName>{filter.name}</S.SavedFilterName>
+            <S.SavedFilterName>{filter.id}</S.SavedFilterName>
             <S.FilterOptions>
-              <S.FilterEdit onClick={() => onEdit(index, filter)}>
-                Edit
+              <S.FilterEdit
+                aria-label="edit"
+                onClick={(event) => {
+                  event.stopPropagation();
+                  onEdit(filter.id);
+                }}
+              >
+                <EditIcon />
               </S.FilterEdit>
-              <S.DeleteSavedFilter onClick={() => deleteFilterHandler(index)}>
+              <S.DeleteSavedFilter
+                aria-label="delete"
+                onClick={(event) => {
+                  event.stopPropagation();
+                  deleteFilterHandler(filter.id);
+                }}
+              >
                 <DeleteIcon />
               </S.DeleteSavedFilter>
             </S.FilterOptions>
           </S.SavedFilter>
         ))}
       </S.SavedFiltersContainer>
-      <S.FilterButtonWrapper>
-        <Button
-          buttonSize="M"
-          buttonType="secondary"
-          type="button"
-          onClick={closeModal}
-        >
-          Cancel
-        </Button>
-        <Button
-          buttonSize="M"
-          buttonType="primary"
-          type="button"
-          onClick={activateFilter}
-          disabled={selectedFilter === -1}
-        >
-          Select filter
-        </Button>
-      </S.FilterButtonWrapper>
     </>
   );
 };
diff --git a/frontend/src/components/Topics/Topic/Messages/Filters/__tests__/AddEditFilterContainer.spec.tsx b/frontend/src/components/Topics/Topic/Messages/Filters/__tests__/AddEditFilterContainer.spec.tsx
index f3a649666..d1bd5071c 100644
--- a/frontend/src/components/Topics/Topic/Messages/Filters/__tests__/AddEditFilterContainer.spec.tsx
+++ b/frontend/src/components/Topics/Topic/Messages/Filters/__tests__/AddEditFilterContainer.spec.tsx
@@ -3,16 +3,20 @@ import AddEditFilterContainer, {
   AddEditFilterContainerProps,
 } from 'components/Topics/Topic/Messages/Filters/AddEditFilterContainer';
 import { render } from 'lib/testHelpers';
-import { act, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { MessageFilters } from 'components/Topics/Topic/Messages/Filters/Filters';
+import { AdvancedFilter } from 'lib/hooks/useMessageFiltersStore';
+import { useRegisterSmartFilter } from 'lib/hooks/api/topicMessages';
 
-describe('AddEditFilterContainer component', () => {
-  const defaultSubmitBtn = 'Submit Button';
+jest.mock('lib/hooks/api/topicMessages', () => ({
+  useRegisterSmartFilter: jest.fn(),
+}));
 
-  const mockData: MessageFilters = {
-    name: 'mockName',
-    code: 'mockCode',
+describe('AddEditFilterContainer component', () => {
+  const mockData: AdvancedFilter = {
+    id: 'id',
+    value: 'mockCode',
+    filterCode: 'record.partition == 1',
   };
 
   const renderComponent = (
@@ -20,24 +24,41 @@ describe('AddEditFilterContainer component', () => {
   ) => {
     return render(
       <AddEditFilterContainer
-        cancelBtnHandler={jest.fn()}
-        submitBtnText={props.submitBtnText || defaultSubmitBtn}
+        setSmartFilter={props.setSmartFilter || jest.fn()}
+        closeSideBar={props.closeSideBar || jest.fn()}
         {...props}
       />
     );
   };
 
-  describe('default Component Parameters', () => {
-    it('should check the default Button text', async () => {
-      await act(() => {
-        renderComponent();
-      });
-      expect(screen.getByText(defaultSubmitBtn)).toBeInTheDocument();
+  beforeEach(() => {
+    (useRegisterSmartFilter as jest.Mock).mockImplementation(() => ({
+      mutateAsync: () =>
+        new Promise((res) => {
+          res({ id: 'id1' });
+        }),
+    }));
+  });
+
+  describe('Add current Filter Configured', () => {
+    beforeEach(() => {
+      renderComponent();
+    });
+
+    it('should check the Button text during add', async () => {
+      expect(screen.getByText(/add filter/i)).toBeInTheDocument();
+    });
+
+    it('should display the checkbox is there and works', async () => {
+      const checkbox = screen.getByRole('checkbox');
+      expect(checkbox).toBeInTheDocument();
+      expect(checkbox).not.toBeChecked();
+      await userEvent.click(checkbox);
+      expect(checkbox).toBeChecked();
     });
 
     it('should check whether the submit Button is disabled when the form is pristine and disabled if dirty', async () => {
-      renderComponent();
-      const submitButtonElem = screen.getByText(defaultSubmitBtn);
+      const submitButtonElem = screen.getByText(/add filter/i);
       expect(submitButtonElem).toBeDisabled();
 
       const inputs = screen.getAllByRole('textbox');
@@ -46,55 +67,61 @@ describe('AddEditFilterContainer component', () => {
       textAreaElement.focus();
       await userEvent.paste('Hello World With TextArea');
 
-      const inputNameElement = inputs[1] as HTMLTextAreaElement;
+      const inputNameElement = inputs[1] as HTMLInputElement;
       await userEvent.type(inputNameElement, 'Hello World!');
 
       expect(submitButtonElem).toBeEnabled();
-
-      await userEvent.clear(inputNameElement);
-      await userEvent.tab();
-
-      expect(submitButtonElem).toBeDisabled();
     });
 
-    it('should view the error message after typing and clearing the input', async () => {
-      await act(() => {
-        renderComponent();
-      });
-      const inputs = screen.getAllByRole('textbox');
-      const user = userEvent.setup();
-      const textAreaElement = inputs[0] as HTMLTextAreaElement;
-      const inputNameElement = inputs[1];
-
-      await user.type(textAreaElement, 'Hello World With TextArea');
-      await user.type(inputNameElement, 'Hello World!');
+    // TODO needs a rethink
+    // it('should view the error message after typing and clearing the input', async () => {
+    //   const inputs = screen.getAllByRole('textbox');
+    //   const textAreaElement = inputs[0] as HTMLTextAreaElement;
+    //   const inputNameElement = inputs[1];
+    //
+    //   textAreaElement.focus();
+    //   await userEvent.paste('Hello World With TextArea');
+    //   await userEvent.type(inputNameElement, 'Hello World!');
+    //
+    //   await userEvent.tab();
+    //
+    //   act(() => {
+    //     fireEvent.change(textAreaElement, { target: { value: '' } });
+    //     textAreaElement.focus();
+    //   });
+    //
+    //   expect(screen.getByText(/required field/i)).toBeInTheDocument();
+    // });
+  });
 
-      await user.clear(inputNameElement);
-      await user.keyboard('{Control>}[KeyA]{/Control}{backspace}');
-      await user.tab();
+  describe('Edit current Filter Configured', () => {
+    beforeEach(() => {
+      renderComponent({ currentFilter: mockData });
+    });
 
-      expect(screen.getByText(/required field/i)).toBeInTheDocument();
+    it('should check the Button text during edit', async () => {
+      expect(screen.getByText(/edit filter/i)).toBeInTheDocument();
     });
-  });
 
-  describe('Custom setup for the component', () => {
     it('should render the input with default data if they are passed', () => {
-      renderComponent({
-        inputDisplayNameDefaultValue: mockData.name,
-        inputCodeDefaultValue: mockData.code,
-      });
       const inputs = screen.getAllByRole('textbox');
       const textAreaElement = inputs[0] as HTMLTextAreaElement;
       const inputNameElement = inputs[1];
-      expect(inputNameElement).toHaveValue(mockData.name);
+      expect(inputNameElement).toHaveValue(mockData.id);
       expect(textAreaElement.value).toEqual('');
     });
 
+    it('should display the checkbox is not shown during the edit mode', async () => {
+      const checkbox = screen.queryByRole('checkbox');
+      expect(checkbox).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Cancel and Submit button functionality', () => {
     it('should test whether the cancel callback is being called', async () => {
       const cancelCallback = jest.fn();
-      renderComponent({
-        cancelBtnHandler: cancelCallback,
-      });
+      renderComponent({ closeSideBar: cancelCallback });
+
       const cancelBtnElement = screen.getByText(/cancel/i);
 
       await userEvent.click(cancelBtnElement);
@@ -103,7 +130,7 @@ describe('AddEditFilterContainer component', () => {
 
     it('should test whether the submit Callback is being called', async () => {
       const submitCallback = jest.fn();
-      renderComponent({ submitCallback });
+      renderComponent({ setSmartFilter: submitCallback });
 
       const inputs = screen.getAllByRole('textbox');
 
@@ -114,30 +141,11 @@ describe('AddEditFilterContainer component', () => {
       const inputNameElement = inputs[1];
       await userEvent.type(inputNameElement, 'Hello World!');
 
-      const submitBtnElement = screen.getByText(defaultSubmitBtn);
-      expect(submitBtnElement).toBeEnabled();
+      const submitButtonElem = screen.getByText(/add filter/i);
+      expect(submitButtonElem).toBeEnabled();
 
-      await userEvent.click(submitBtnElement);
+      await userEvent.click(submitButtonElem);
       expect(submitCallback).toBeCalled();
     });
-
-    it('should display the checkbox if the props is passed and initially check state', async () => {
-      renderComponent({ isAdd: true });
-      const checkbox = screen.getByRole('checkbox');
-      expect(checkbox).toBeInTheDocument();
-      expect(checkbox).not.toBeChecked();
-      await userEvent.click(checkbox);
-      expect(checkbox).toBeChecked();
-    });
-
-    it('should pass and render the correct button text', async () => {
-      const submitBtnText = 'submitBtnTextTest';
-      await act(() => {
-        renderComponent({
-          submitBtnText,
-        });
-      });
-      expect(screen.getByText(submitBtnText)).toBeInTheDocument();
-    });
   });
 });
diff --git a/frontend/src/components/Topics/Topic/Messages/Filters/__tests__/AddFilter.spec.tsx b/frontend/src/components/Topics/Topic/Messages/Filters/__tests__/AddFilter.spec.tsx
deleted file mode 100644
index ef184c4bf..000000000
--- a/frontend/src/components/Topics/Topic/Messages/Filters/__tests__/AddFilter.spec.tsx
+++ /dev/null
@@ -1,221 +0,0 @@
-import React from 'react';
-import AddFilter, {
-  FilterModalProps,
-} from 'components/Topics/Topic/Messages/Filters/AddFilter';
-import { render } from 'lib/testHelpers';
-import { MessageFilters } from 'components/Topics/Topic/Messages/Filters/Filters';
-import { act, fireEvent, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-const filters: MessageFilters[] = [
-  { name: 'name', code: 'code' },
-  { name: 'name2', code: 'code2' },
-];
-
-const editFilterMock = jest.fn();
-
-const renderComponent = (props: Partial<FilterModalProps> = {}) =>
-  render(
-    <AddFilter
-      toggleIsOpen={jest.fn()}
-      addFilter={jest.fn()}
-      deleteFilter={jest.fn()}
-      activeFilterHandler={jest.fn()}
-      toggleEditModal={jest.fn()}
-      onClickSavedFilters={jest.fn()}
-      editFilter={editFilterMock}
-      filters={props.filters || filters}
-      isSavedFiltersOpen={false}
-      {...props}
-    />
-  );
-
-describe('AddFilter component', () => {
-  describe('', () => {
-    it('should test click on Saved Filters redirects to Saved components', async () => {
-      renderComponent();
-      await userEvent.click(screen.getByRole('savedFilterText'));
-      expect(screen.getByText('Saved Filters')).toBeInTheDocument();
-      expect(screen.getByRole('savedFilterText')).toBeInTheDocument();
-    });
-
-    it('info button to be in the document', async () => {
-      await act(() => {
-        renderComponent();
-      });
-      expect(screen.getByRole('button', { name: 'info' })).toBeInTheDocument();
-    });
-
-    it('renders InfoModal', async () => {
-      renderComponent();
-      await userEvent.click(screen.getByRole('button', { name: 'info' }));
-      expect(screen.getByRole('button', { name: 'Ok' })).toBeInTheDocument();
-      expect(
-        screen.getByRole('list', { name: 'info-list' })
-      ).toBeInTheDocument();
-    });
-
-    it('should test click on return to custom filter redirects to Saved Filters', async () => {
-      await act(() => {
-        renderComponent();
-      });
-      await userEvent.click(screen.getByRole('savedFilterText'));
-      expect(screen.queryByText('Saved filters')).not.toBeInTheDocument();
-      expect(screen.getByRole('savedFilterText')).toBeInTheDocument();
-    });
-  });
-
-  describe('Add new filter', () => {
-    it('adding new filter', async () => {
-      renderComponent();
-      const codeValue = 'filter code';
-      const nameValue = 'filter name';
-      const textBoxes = screen.getAllByRole('textbox');
-
-      const codeTextBox = textBoxes[0] as HTMLTextAreaElement;
-      const nameTextBox = textBoxes[1];
-
-      const addFilterBtn = screen.getByRole('button', { name: /Add filter/i });
-      expect(addFilterBtn).toBeDisabled();
-      expect(screen.getByPlaceholderText('Enter Name')).toBeInTheDocument();
-
-      codeTextBox.focus();
-      await userEvent.paste(codeValue);
-      await userEvent.type(nameTextBox, nameValue);
-
-      expect(addFilterBtn).toBeEnabled();
-      expect(codeTextBox.value).toEqual(`${codeValue}\n\n`);
-      expect(nameTextBox).toHaveValue(nameValue);
-    });
-
-    it('should check unSaved filter without name', async () => {
-      renderComponent();
-      const codeTextBox = screen.getAllByRole(
-        'textbox'
-      )[0] as HTMLTextAreaElement;
-      const code = 'filter code';
-      const addFilterBtn = screen.getByRole('button', { name: /Add filter/i });
-      expect(addFilterBtn).toBeDisabled();
-      expect(screen.getByPlaceholderText('Enter Name')).toBeInTheDocument();
-      codeTextBox.focus();
-      await userEvent.paste(code);
-      await userEvent.tab();
-      expect(addFilterBtn).toBeEnabled();
-      expect(codeTextBox).toHaveValue(`${code}\n\n`);
-    });
-
-    it('calls editFilter when edit button is clicked in saved filters', async () => {
-      await act(() => {
-        renderComponent();
-        renderComponent({ isSavedFiltersOpen: true });
-      });
-      await userEvent.click(screen.getByText('Saved Filters'));
-      const index = 0;
-      const editButton = screen.getAllByText('Edit')[index];
-      await userEvent.click(editButton);
-      const { code, name } = filters[index];
-      expect(editFilterMock).toHaveBeenCalledTimes(1);
-      expect(editFilterMock).toHaveBeenCalledWith({
-        index,
-        filter: { code, name },
-      });
-    });
-  });
-
-  describe('onSubmit with Filter being saved', () => {
-    const addFilterMock = jest.fn();
-    const activeFilterHandlerMock = jest.fn();
-    const toggleModelMock = jest.fn();
-
-    const codeValue = 'filter code';
-    const longCodeValue = 'a long filter code';
-    const nameValue = 'filter name';
-
-    afterEach(() => {
-      addFilterMock.mockClear();
-      activeFilterHandlerMock.mockClear();
-      toggleModelMock.mockClear();
-    });
-
-    describe('OnSubmit conditions with codeValue and nameValue in fields', () => {
-      beforeEach(async () => {
-        renderComponent({
-          addFilter: addFilterMock,
-          activeFilterHandler: activeFilterHandlerMock,
-          toggleIsOpen: toggleModelMock,
-        });
-        const textAreaElement = screen.getAllByRole(
-          'textbox'
-        )[0] as HTMLTextAreaElement;
-        const input = screen.getAllByRole('textbox')[1];
-        textAreaElement.focus();
-        await userEvent.paste(codeValue);
-        await userEvent.type(input, nameValue);
-      });
-
-      it('OnSubmit condition with checkbox off functionality', async () => {
-        // since both values are in it
-        const addFilterBtn = screen.getByRole('button', {
-          name: /Add filter/i,
-        });
-        expect(addFilterBtn).toBeEnabled();
-
-        await userEvent.click(addFilterBtn);
-
-        expect(activeFilterHandlerMock).toHaveBeenCalled();
-        expect(addFilterMock).not.toHaveBeenCalled();
-      });
-
-      it('OnSubmit condition with checkbox on functionality', async () => {
-        await userEvent.click(screen.getByRole('checkbox'));
-        await userEvent.click(screen.getAllByRole('button')[2]);
-
-        expect(activeFilterHandlerMock).not.toHaveBeenCalled();
-        expect(addFilterMock).toHaveBeenCalled();
-        expect(toggleModelMock).not.toHaveBeenCalled();
-      });
-    });
-
-    it('should use sliced code as the filter name if filter name is empty', async () => {
-      await act(() => {
-        renderComponent({
-          addFilter: addFilterMock,
-          activeFilterHandler: activeFilterHandlerMock,
-          toggleIsOpen: toggleModelMock,
-        });
-      });
-      const codeTextBox = screen.getAllByRole(
-        'textbox'
-      )[0] as HTMLTextAreaElement;
-      const nameTextBox = screen.getAllByRole('textbox')[1];
-      const addFilterBtn = screen.getByRole('button', { name: /Add filter/i });
-      act(() => {
-        fireEvent.input(nameTextBox, {
-          inputType: '',
-        });
-        fireEvent.input(codeTextBox, {
-          inputType: '',
-        });
-      });
-      codeTextBox.focus();
-      await userEvent.paste(longCodeValue);
-      expect(nameTextBox).toHaveValue('');
-      expect(codeTextBox).toHaveValue(`${longCodeValue}\n\n`);
-
-      await userEvent.click(addFilterBtn);
-
-      const filterName = `${longCodeValue.slice(0, 16)}...`;
-
-      expect(activeFilterHandlerMock).toHaveBeenCalledTimes(1);
-      expect(activeFilterHandlerMock).toHaveBeenCalledWith(
-        {
-          name: filterName,
-          code: longCodeValue,
-          saveFilter: false,
-        },
-        -1
-      );
-      expect(toggleModelMock).toHaveBeenCalled();
-    });
-  });
-});
diff --git a/frontend/src/components/Topics/Topic/Messages/Filters/__tests__/EditFilter.spec.tsx b/frontend/src/components/Topics/Topic/Messages/Filters/__tests__/EditFilter.spec.tsx
deleted file mode 100644
index b5187289a..000000000
--- a/frontend/src/components/Topics/Topic/Messages/Filters/__tests__/EditFilter.spec.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import React from 'react';
-import EditFilter, {
-  EditFilterProps,
-} from 'components/Topics/Topic/Messages/Filters/EditFilter';
-import { render } from 'lib/testHelpers';
-import { screen, within, act } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { FilterEdit } from 'components/Topics/Topic/Messages/Filters/FilterModal';
-
-const editFilter: FilterEdit = {
-  index: 0,
-  filter: { name: 'name', code: '' },
-};
-
-const renderComponent = (props?: Partial<EditFilterProps>) =>
-  render(
-    <EditFilter
-      toggleEditModal={jest.fn()}
-      editSavedFilter={jest.fn()}
-      editFilter={editFilter}
-      {...props}
-    />
-  );
-
-describe('EditFilter component', () => {
-  it('renders component', async () => {
-    await act(() => {
-      renderComponent();
-    });
-    expect(screen.getByText(/edit filter/i)).toBeInTheDocument();
-  });
-
-  it('closes editFilter modal', async () => {
-    const toggleEditModal = jest.fn();
-    renderComponent({ toggleEditModal });
-    await userEvent.click(screen.getByRole('button', { name: /Cancel/i }));
-    expect(toggleEditModal).toHaveBeenCalledTimes(1);
-  });
-
-  it('save edited fields and close modal', async () => {
-    const toggleEditModal = jest.fn();
-    const editSavedFilter = jest.fn();
-
-    renderComponent({ toggleEditModal, editSavedFilter });
-
-    const inputs = screen.getAllByRole('textbox');
-    const textAreaElement = inputs[0] as HTMLTextAreaElement;
-    const inputNameElement = inputs[1];
-    textAreaElement.focus();
-    await userEvent.paste('edited code');
-    await userEvent.type(inputNameElement, 'edited name');
-    await userEvent.click(screen.getByRole('button', { name: /Save/i }));
-    expect(toggleEditModal).toHaveBeenCalledTimes(1);
-    expect(editSavedFilter).toHaveBeenCalledTimes(1);
-  });
-
-  it('checks input values to match', async () => {
-    await act(() => {
-      renderComponent();
-    });
-    const inputs = screen.getAllByRole('textbox');
-    const textAreaElement = inputs[0] as HTMLTextAreaElement;
-    const inputNameElement = inputs[1];
-    const span = within(textAreaElement).getByText(editFilter.filter.code);
-    expect(span).toHaveValue(editFilter.filter.code);
-    expect(inputNameElement).toHaveValue(editFilter.filter.name);
-  });
-});
diff --git a/frontend/src/components/Topics/Topic/Messages/Filters/__tests__/FilterModal.spec.tsx b/frontend/src/components/Topics/Topic/Messages/Filters/__tests__/FilterModal.spec.tsx
deleted file mode 100644
index 7f21b11f1..000000000
--- a/frontend/src/components/Topics/Topic/Messages/Filters/__tests__/FilterModal.spec.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import React from 'react';
-import FilterModal, {
-  FilterModalProps,
-} from 'components/Topics/Topic/Messages/Filters/FilterModal';
-import { render } from 'lib/testHelpers';
-import {
-  ActiveMessageFilter,
-  MessageFilters,
-} from 'components/Topics/Topic/Messages/Filters/Filters';
-import { screen, act } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-const filter = { name: 'name', code: 'code' };
-const filters: MessageFilters[] = [filter];
-const activeFilter: ActiveMessageFilter = { index: -1, ...filter };
-
-const renderComponent = (props?: Partial<FilterModalProps>) =>
-  render(
-    <FilterModal
-      toggleIsOpen={jest.fn()}
-      filters={filters}
-      addFilter={jest.fn()}
-      deleteFilter={jest.fn()}
-      activeFilterHandler={jest.fn()}
-      editSavedFilter={jest.fn()}
-      activeFilter={activeFilter}
-      {...props}
-    />
-  );
-
-describe('FilterModal component', () => {
-  it('renders component with add filter modal', async () => {
-    await act(() => {
-      renderComponent();
-    });
-    expect(
-      screen.getByRole('heading', { name: /add filter/i, level: 3 })
-    ).toBeInTheDocument();
-  });
-  it('renders component with edit filter modal', async () => {
-    renderComponent();
-    await userEvent.click(screen.getByRole('savedFilterText'));
-    await userEvent.click(screen.getByText('Edit'));
-    expect(
-      screen.getByRole('heading', { name: /edit filter/i, level: 3 })
-    ).toBeInTheDocument();
-  });
-});
diff --git a/frontend/src/components/Topics/Topic/Messages/Filters/__tests__/FilterSideBar.spec.tsx b/frontend/src/components/Topics/Topic/Messages/Filters/__tests__/FilterSideBar.spec.tsx
new file mode 100644
index 000000000..aa083b799
--- /dev/null
+++ b/frontend/src/components/Topics/Topic/Messages/Filters/__tests__/FilterSideBar.spec.tsx
@@ -0,0 +1,62 @@
+import React from 'react';
+import FiltersSideBar, {
+  FilterModalProps,
+} from 'components/Topics/Topic/Messages/Filters/FiltersSideBar';
+import { render } from 'lib/testHelpers';
+import { screen } from '@testing-library/react';
+import { ADD_FILTER_ID } from 'components/Topics/Topic/Messages/Filters/utils';
+import userEvent from '@testing-library/user-event';
+
+const AddEditComponentMock = 'AddEditComponentMock';
+const SavedFilterComponentMock = 'SavedFilterComponentMock';
+
+jest.mock(
+  'components/Topics/Topic/Messages/Filters/AddEditFilterContainer',
+  () => () => <div>{AddEditComponentMock}</div>
+);
+
+jest.mock('components/Topics/Topic/Messages/Filters/SavedFilters', () => () => (
+  <div>{SavedFilterComponentMock}</div>
+));
+
+const renderComponent = (props?: Partial<FilterModalProps>) =>
+  render(
+    <FiltersSideBar
+      filterName={props?.filterName || ADD_FILTER_ID}
+      setClose={jest.fn()}
+      setFilterName={jest.fn()}
+      setSmartFilter={jest.fn()}
+      {...props}
+    />
+  );
+
+describe('FiltersSidebar component', () => {
+  it('renders component with add filter modal', () => {
+    renderComponent();
+    expect(screen.getByText(/add filter/i)).toBeInTheDocument();
+    expect(screen.getByText(AddEditComponentMock)).toBeInTheDocument();
+    expect(screen.getByText(SavedFilterComponentMock)).toBeInTheDocument();
+  });
+
+  it('renders component with edit filter modal', () => {
+    renderComponent({ filterName: 'filterName' });
+
+    expect(screen.getByText(/edit filter/i)).toBeInTheDocument();
+    expect(screen.getByText(AddEditComponentMock)).toBeInTheDocument();
+    expect(
+      screen.queryByText(SavedFilterComponentMock)
+    ).not.toBeInTheDocument();
+  });
+
+  it('renders component with edit filter modal', async () => {
+    const cancelMock = jest.fn();
+    renderComponent({ setClose: cancelMock });
+    await userEvent.click(
+      screen.getByRole('button', {
+        name: /edit/i,
+      })
+    );
+
+    expect(cancelMock).toHaveBeenCalled();
+  });
+});
diff --git a/frontend/src/components/Topics/Topic/Messages/Filters/__tests__/Filters.spec.tsx b/frontend/src/components/Topics/Topic/Messages/Filters/__tests__/Filters.spec.tsx
index 3e75f1178..f24ddd325 100644
--- a/frontend/src/components/Topics/Topic/Messages/Filters/__tests__/Filters.spec.tsx
+++ b/frontend/src/components/Topics/Topic/Messages/Filters/__tests__/Filters.spec.tsx
@@ -1,21 +1,25 @@
 import React from 'react';
-import { SeekDirectionOptions } from 'components/Topics/Topic/Messages/Messages';
 import Filters, {
   FiltersProps,
-  SeekTypeOptions,
 } from 'components/Topics/Topic/Messages/Filters/Filters';
-import { EventSourceMock, render, WithRoute } from 'lib/testHelpers';
-import { screen, within } from '@testing-library/react';
+import { render, WithRoute } from 'lib/testHelpers';
+import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import TopicMessagesContext, {
-  ContextProps,
-} from 'components/contexts/TopicMessagesContext';
-import { SeekDirection } from 'generated-sources';
 import { clusterTopicPath } from 'lib/paths';
 import { useTopicDetails } from 'lib/hooks/api/topics';
 import { externalTopicPayload } from 'lib/fixtures/topics';
 import { useSerdes } from 'lib/hooks/api/topicMessages';
 import { serdesPayload } from 'lib/fixtures/topicMessages';
+import {
+  MessagesFilterKeys,
+  MessagesFilterKeysTypes,
+} from 'lib/hooks/useMessagesFilters';
+import { PollingMode } from 'generated-sources';
+import { ModeOptions } from 'lib/hooks/filterUtils';
+
+const closeIconMock = 'closeIconMock';
+const filtersSideBarMock = 'filtersSideBarMock';
+const filterMetricsMock = 'filterMetricsMock';
 
 jest.mock('lib/hooks/api/topics', () => ({
   useTopicDetails: jest.fn(),
@@ -25,42 +29,40 @@ jest.mock('lib/hooks/api/topicMessages', () => ({
   useSerdes: jest.fn(),
 }));
 
-const defaultContextValue: ContextProps = {
-  isLive: false,
-  seekDirection: SeekDirection.FORWARD,
-  changeSeekDirection: jest.fn(),
-};
+jest.mock('components/common/Icons/CloseIcon', () => () => (
+  <div>{closeIconMock}</div>
+));
 
-jest.mock('components/common/Icons/CloseIcon', () => () => 'mock-CloseIcon');
+jest.mock(
+  'components/Topics/Topic/Messages/Filters/FiltersSideBar',
+  () => () => <div>{filtersSideBarMock}</div>
+);
+
+jest.mock(
+  'components/Topics/Topic/Messages/Filters/FiltersMetrics',
+  () => () => <div>{filterMetricsMock}</div>
+);
 
 const clusterName = 'cluster-name';
 const topicName = 'topic-name';
 
 const renderComponent = (
-  props: Partial<FiltersProps> = {},
-  ctx: ContextProps = defaultContextValue
-) =>
-  render(
+  props?: Partial<FiltersProps>,
+  queryParams?: Partial<Record<MessagesFilterKeysTypes, string>>
+) => {
+  const urlParams = new URLSearchParams({ ...queryParams });
+
+  return render(
     <WithRoute path={clusterTopicPath()}>
-      <TopicMessagesContext.Provider value={ctx}>
-        <Filters
-          meta={{
-            filterApplyErrors: 10,
-          }}
-          isFetching={false}
-          addMessage={jest.fn()}
-          resetMessages={jest.fn()}
-          updatePhase={jest.fn()}
-          updateMeta={jest.fn()}
-          setIsFetching={jest.fn()}
-          setMessageType={jest.fn}
-          messageEventType="Done"
-          {...props}
-        />
-      </TopicMessagesContext.Provider>
+      <Filters isFetching={false} abortFetchData={jest.fn()} {...props} />
     </WithRoute>,
-    { initialEntries: [clusterTopicPath(clusterName, topicName)] }
+    {
+      initialEntries: [
+        `${clusterTopicPath(clusterName, topicName)}?${urlParams.toString()}`,
+      ],
+    }
   );
+};
 
 beforeEach(async () => {
   (useTopicDetails as jest.Mock).mockImplementation(() => ({
@@ -72,177 +74,178 @@ beforeEach(async () => {
 });
 
 describe('Filters component', () => {
-  Object.defineProperty(window, 'EventSource', {
-    value: EventSourceMock,
-  });
+  const getSeekTypeSelect = () => screen.getAllByRole('listbox')[0];
+  const getKeySerdeDropdown = () => screen.getAllByRole('listbox')[1];
+  const getValueSerdeDropdown = () => screen.getAllByRole('listbox')[2];
 
-  it('shows cancel button while fetching', () => {
-    renderComponent({ isFetching: true });
-    expect(screen.getByText('Cancel')).toBeInTheDocument();
-  });
-
-  it('shows submit button while fetching is over', () => {
+  it('shows refresh button', () => {
     renderComponent();
-    expect(screen.getByText('Submit')).toBeInTheDocument();
+    expect(screen.getByText('Refresh')).toBeInTheDocument();
   });
 
-  describe('Input elements', () => {
+  describe('Filter Input default elements', () => {
     const inputValue = 'Hello World!';
 
-    beforeEach(() => {
-      renderComponent();
-    });
-
-    it('search input', async () => {
-      const searchInput = screen.getByPlaceholderText('Search');
-      expect(searchInput).toHaveValue('');
-      await userEvent.type(searchInput, inputValue);
-      expect(searchInput).toHaveValue(inputValue);
-    });
-
-    it('offset input', async () => {
-      const offsetInput = screen.getByPlaceholderText('Offset');
-      expect(offsetInput).toHaveValue('');
-      await userEvent.type(offsetInput, inputValue);
-      expect(offsetInput).toHaveValue(inputValue);
-    });
-
-    it('timestamp input', async () => {
-      const seekTypeSelect = screen.getAllByRole('listbox');
+    const selectDropdownAndCheckInput = async (
+      value: string,
+      placeholder: string
+    ) => {
+      const seekTypeSelect = getSeekTypeSelect();
       const option = screen.getAllByRole('option');
 
-      await userEvent.click(seekTypeSelect[0]);
+      await userEvent.click(seekTypeSelect);
 
-      await userEvent.selectOptions(seekTypeSelect[0], ['Timestamp']);
+      await userEvent.selectOptions(seekTypeSelect, [value]);
 
-      expect(option[0]).toHaveTextContent('Timestamp');
-      const timestampInput = screen.getByPlaceholderText('Select timestamp');
+      expect(option[0]).toHaveTextContent(value);
+      const timestampInput = screen.getByPlaceholderText(placeholder);
       expect(timestampInput).toHaveValue('');
 
       await userEvent.type(timestampInput, inputValue);
 
       expect(timestampInput).toHaveValue(inputValue);
-      expect(screen.getByText('Submit')).toBeInTheDocument();
-    });
-  });
-
-  describe('Select elements', () => {
-    let seekTypeSelects: HTMLElement[];
-    let options: HTMLElement[];
-
-    const selectedDirectionOptionValue = SeekDirectionOptions[0];
-    const mockDirectionOptionSelectLabel = selectedDirectionOptionValue.label;
-    const selectTypeOptionValue = SeekTypeOptions[0];
-    const mockTypeOptionSelectLabel = selectTypeOptionValue.label;
+    };
 
     beforeEach(() => {
       renderComponent();
-      seekTypeSelects = screen.getAllByRole('listbox');
-      options = screen.getAllByRole('option');
     });
 
-    it('seekType select', async () => {
-      expect(options[0]).toHaveTextContent('Offset');
-      await userEvent.click(seekTypeSelects[0]);
-      await userEvent.selectOptions(seekTypeSelects[0], [
-        mockTypeOptionSelectLabel,
-      ]);
-      expect(options[0]).toHaveTextContent(mockTypeOptionSelectLabel);
-      expect(screen.getByText('Submit')).toBeInTheDocument();
+    it('search input and selectable mode', async () => {
+      const searchInput = screen.getByPlaceholderText('Search');
+      expect(searchInput).toHaveValue('');
+      await userEvent.type(searchInput, inputValue);
+      expect(searchInput).toHaveValue(inputValue);
+    });
+
+    it('offset input from offset option', async () => {
+      await selectDropdownAndCheckInput('From offset', 'Offset');
     });
 
-    it('seekDirection select', async () => {
-      await userEvent.click(seekTypeSelects[3]);
-      await userEvent.selectOptions(seekTypeSelects[3], [
-        mockDirectionOptionSelectLabel,
-      ]);
-      expect(options[3]).toHaveTextContent(mockDirectionOptionSelectLabel);
+    it('offset input To offset option', async () => {
+      await selectDropdownAndCheckInput('To offset', 'Offset');
     });
-  });
 
-  it('stop loading when live mode is active', async () => {
-    renderComponent();
-    await userEvent.click(screen.getByText('Stop loading'));
-    const option = screen.getAllByRole('option');
-    expect(option[3]).toHaveTextContent('Oldest First');
-    expect(screen.getByText('Submit')).toBeInTheDocument();
-  });
+    it('timestamp input since time', async () => {
+      await selectDropdownAndCheckInput('Since time', 'Select timestamp');
+    });
 
-  it('renders addFilter modal', async () => {
-    renderComponent();
-    await userEvent.click(
-      screen.getByRole('button', {
-        name: /add filters/i,
-      })
-    );
-    expect(screen.getByTestId('messageFilterModal')).toBeInTheDocument();
+    it('timestamp input since time', async () => {
+      await selectDropdownAndCheckInput('To time', 'Select timestamp');
+    });
   });
 
-  describe('when there is active smart filter', () => {
-    beforeEach(async () => {
-      renderComponent();
-
-      await userEvent.click(
-        screen.getByRole('button', {
-          name: 'Add Filters',
-        })
-      );
-
-      const filterName = 'filter name';
-      const filterCode = 'filter code';
-
-      const messageFilterModal = screen.getByTestId('messageFilterModal');
-
-      const textBoxElements =
-        within(messageFilterModal).getAllByRole('textbox');
-
-      const textAreaElement = textBoxElements[0] as HTMLTextAreaElement;
-      const inputNameElement = textBoxElements[1];
-
-      textAreaElement.focus();
-      await userEvent.paste(filterCode);
-      await userEvent.type(inputNameElement, filterName);
-
-      expect(textAreaElement).toHaveValue(`${filterCode}\n\n`);
-      expect(inputNameElement).toHaveValue('filter name');
-      expect(
-        screen.getByRole('button', {
-          name: 'Add filter',
-        })
-      ).toBeEnabled();
-      await userEvent.click(
-        screen.getByRole('button', {
-          name: 'Add filter',
-        })
+  describe('checks the input values when data comes from the url', () => {
+    const renderAndCheckSelectType = (
+      mode: PollingMode,
+      { timestamp, offset }: { timestamp?: string; offset?: string }
+    ) => {
+      renderComponent(
+        {},
+        {
+          [MessagesFilterKeys.mode]: mode.toString(),
+          [MessagesFilterKeys.timestamp]: timestamp,
+          [MessagesFilterKeys.offset]: offset,
+        }
       );
-      await userEvent.tab();
+      const item = ModeOptions.find((i) => i.value === mode);
+      expect(getSeekTypeSelect()).toHaveTextContent(item?.label || '');
+    };
+
+    describe('modes and the related inputs', () => {
+      it('should check the mode input value latest', () => {
+        renderAndCheckSelectType(PollingMode.LATEST, {});
+      });
+
+      it('should check the mode input value earliest', () => {
+        renderAndCheckSelectType(PollingMode.EARLIEST, {});
+      });
+
+      it('should check the mode input value tailest', () => {
+        renderAndCheckSelectType(PollingMode.TAILING, {});
+      });
+
+      it('should check the mode input value from offset', () => {
+        const offset = '2';
+        renderAndCheckSelectType(PollingMode.FROM_OFFSET, { offset });
+        expect(screen.getAllByRole('textbox')[0]).toHaveValue(offset);
+      });
+
+      it('should check the mode input value to offset', () => {
+        const offset = '2';
+        renderAndCheckSelectType(PollingMode.TO_OFFSET, { offset });
+        expect(screen.getAllByRole('textbox')[0]).toHaveValue(offset);
+      });
+
+      it('should check the mode input value to timestamp', () => {
+        const currentDate = new Date(1707940800000);
+        renderAndCheckSelectType(PollingMode.TO_TIMESTAMP, {
+          timestamp: currentDate.getTime().toString(),
+        });
+        const formattedDate = currentDate.toLocaleString('en-US', {
+          year: 'numeric',
+          month: 'short',
+          day: 'numeric',
+        });
+
+        expect(screen.getByPlaceholderText('Select timestamp')).toHaveValue(
+          formattedDate
+        );
+      });
+
+      it('should check the mode input value from timestamp', () => {
+        const currentDate = new Date(1707940800000);
+        renderAndCheckSelectType(PollingMode.FROM_TIMESTAMP, {
+          timestamp: currentDate.getTime().toString(),
+        });
+        const formattedDate = currentDate.toLocaleString('en-US', {
+          year: 'numeric',
+          month: 'short',
+          day: 'numeric',
+        });
+
+        expect(screen.getByPlaceholderText('Select timestamp')).toHaveValue(
+          formattedDate
+        );
+      });
     });
 
-    it('shows saved smart filter', async () => {
-      expect(screen.getByTestId('activeSmartFilter')).toBeInTheDocument();
+    it('should check the search value', () => {
+      const searchFilter = 'searchFilter';
+      renderComponent({}, { [MessagesFilterKeys.stringFilter]: searchFilter });
+      expect(screen.getByPlaceholderText('Search')).toHaveValue(searchFilter);
     });
 
-    it('delete the active smart Filter', async () => {
-      const smartFilterElement = screen.getByTestId('activeSmartFilter');
-      const deleteIcon = within(smartFilterElement).getByText('mock-CloseIcon');
-      await userEvent.click(deleteIcon);
-
-      const anotherSmartFilterElement =
-        screen.queryByTestId('activeSmartFilter');
-      expect(anotherSmartFilterElement).not.toBeInTheDocument();
-    });
-  });
-
-  describe('show errors when get an filterApplyErrors and message event type', () => {
-    it('show errors', () => {
-      renderComponent();
-      const errors = screen.getByText('10 errors');
-      expect(errors).toBeInTheDocument();
-    });
-    it('message event type when fetching is false ', () => {
-      renderComponent();
-      const messageType = screen.getByText('Done');
-      expect(messageType).toBeInTheDocument();
+    describe('Serde dropdown', () => {
+      beforeEach(async () => {
+        (useSerdes as jest.Mock).mockImplementation(() => ({
+          data: serdesPayload,
+        }));
+      });
+
+      it('should check the keySerde', () => {
+        if (!serdesPayload.key || !serdesPayload.key[0]) return;
+
+        renderComponent(
+          {},
+          { [MessagesFilterKeys.keySerde]: serdesPayload.key[0].name }
+        );
+        expect(getKeySerdeDropdown()).toHaveTextContent(
+          serdesPayload.key[0].name || ''
+        );
+      });
+
+      it('should check the valueSerde', () => {
+        if (!serdesPayload.value || !serdesPayload.value[0]) return;
+
+        renderComponent(
+          {},
+          { [MessagesFilterKeys.valueSerde]: serdesPayload.value[0].name }
+        );
+
+        expect(getValueSerdeDropdown()).toHaveTextContent(
+          serdesPayload.value[0].name || ''
+        );
+      });
     });
   });
 });
diff --git a/frontend/src/components/Topics/Topic/Messages/Filters/__tests__/FiltersMetrics.spec.tsx b/frontend/src/components/Topics/Topic/Messages/Filters/__tests__/FiltersMetrics.spec.tsx
new file mode 100644
index 000000000..0b654c76b
--- /dev/null
+++ b/frontend/src/components/Topics/Topic/Messages/Filters/__tests__/FiltersMetrics.spec.tsx
@@ -0,0 +1,119 @@
+import React from 'react';
+import { render } from 'lib/testHelpers';
+import { PollingMode } from 'generated-sources';
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import FiltersMetrics, {
+  FiltersMetricsProps,
+} from 'components/Topics/Topic/Messages/Filters/FiltersMetrics';
+
+const renderComponent = (props: Partial<FiltersMetricsProps> = {}) =>
+  render(
+    <FiltersMetrics
+      mode={PollingMode.FROM_OFFSET}
+      isFetching={false}
+      abortFetchData={jest.fn()}
+      consumptionStats={{ bytesConsumed: 0 }}
+      {...props}
+    />
+  );
+
+describe('FiltersMetrics', () => {
+  describe('phase Message', () => {
+    it('should check if the phase message phase is visible during and isFetching not tailing mode', () => {
+      const phaseMessage = 'phaseMessage';
+      renderComponent({
+        mode: PollingMode.FROM_OFFSET,
+        isFetching: true,
+        phaseMessage,
+      });
+      expect(screen.getByText(phaseMessage)).toBeInTheDocument();
+    });
+
+    it('should check if the phase message phase is not visible during tailing modes and is fetching', () => {
+      const phaseMessage = 'phaseMessage';
+      renderComponent({
+        mode: PollingMode.TAILING,
+        phaseMessage,
+        isFetching: true,
+      });
+      expect(screen.queryByText(phaseMessage)).not.toBeInTheDocument();
+    });
+
+    it('should check if the phase message phase is not visible during Live other modes and not fetching', () => {
+      const phaseMessage = 'phaseMessage';
+      renderComponent({
+        mode: PollingMode.FROM_OFFSET,
+        phaseMessage,
+        isFetching: false,
+      });
+      expect(screen.queryByText(phaseMessage)).not.toBeInTheDocument();
+    });
+  });
+
+  describe('consumptionStats data', () => {
+    it('should check elapsed time is', () => {
+      const elapsedMs = 2;
+      renderComponent({ consumptionStats: { elapsedMs } });
+      expect(screen.getByText(`${elapsedMs} ms`)).toBeInTheDocument();
+    });
+
+    it('should check elapsed time is 0 is negative data', () => {
+      const elapsedMs = -2;
+      renderComponent({ consumptionStats: { elapsedMs } });
+      expect(screen.getByText(`0 ms`)).toBeInTheDocument();
+    });
+
+    it('should check messages consume text', () => {
+      const messagesConsumed = 2;
+      renderComponent({ consumptionStats: { messagesConsumed } });
+      expect(
+        screen.getByText(`${messagesConsumed} messages consumed`)
+      ).toBeInTheDocument();
+    });
+
+    it('should check messages consume empty state', () => {
+      renderComponent({ consumptionStats: {} });
+      expect(screen.getByText(`messages consumed`)).toBeInTheDocument();
+    });
+
+    it('should check Bytes consumed text', () => {
+      const bytesConsumed = 2;
+      renderComponent({ consumptionStats: { bytesConsumed } });
+      expect(screen.getByText(`${bytesConsumed} Bytes`)).toBeInTheDocument();
+    });
+
+    it('should check Bytes consumed text empty state', () => {
+      renderComponent({ consumptionStats: {} });
+      expect(screen.getByText('0 Bytes')).toBeInTheDocument();
+    });
+
+    it('should check filter error is visible', () => {
+      const filterApplyErrors = 2;
+      renderComponent({ consumptionStats: { filterApplyErrors } });
+      expect(
+        screen.getByText(`${filterApplyErrors} errors`)
+      ).toBeInTheDocument();
+    });
+
+    it('should check Bytes consumed text empty state', () => {
+      renderComponent({ consumptionStats: {} });
+      expect(screen.queryByTitle('Errors')).not.toBeInTheDocument();
+    });
+
+    it('should check if the abortFetch Data is being called when clicked', async () => {
+      const jestAbortMock = jest.fn();
+      renderComponent({
+        abortFetchData: jestAbortMock,
+        isFetching: true,
+        mode: PollingMode.TAILING,
+      });
+
+      const btn = screen.getByText(/stop loading/i);
+      expect(btn).toBeInTheDocument();
+
+      await userEvent.click(btn);
+      expect(jestAbortMock).toHaveBeenCalledTimes(1);
+    });
+  });
+});
diff --git a/frontend/src/components/Topics/Topic/Messages/Filters/__tests__/SavedFilters.spec.tsx b/frontend/src/components/Topics/Topic/Messages/Filters/__tests__/SavedFilters.spec.tsx
index c4d6a4202..58e3c05fe 100644
--- a/frontend/src/components/Topics/Topic/Messages/Filters/__tests__/SavedFilters.spec.tsx
+++ b/frontend/src/components/Topics/Topic/Messages/Filters/__tests__/SavedFilters.spec.tsx
@@ -2,143 +2,134 @@ import React from 'react';
 import SavedFilters, {
   Props,
 } from 'components/Topics/Topic/Messages/Filters/SavedFilters';
-import { MessageFilters } from 'components/Topics/Topic/Messages/Filters/Filters';
 import { screen, waitFor, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { render } from 'lib/testHelpers';
+import { AdvancedFiltersType } from 'lib/hooks/useMessageFiltersStore';
 
-jest.mock('components/common/Icons/DeleteIcon', () => () => 'mock-DeleteIcon');
+const mockDeleteIcon = 'mock-DeleteIcon';
+const mockEditIcon = 'mock-EditIcon';
+
+jest.mock('components/common/Icons/EditIcon', () => () => (
+  <div>{mockEditIcon}</div>
+));
+
+jest.mock('components/common/Icons/DeleteIcon', () => () => (
+  <div>{mockDeleteIcon}</div>
+));
 
 describe('SavedFilter Component', () => {
-  const mockFilters: MessageFilters[] = [
-    { name: 'My Filter', code: 'code' },
-    { name: 'One More Filter', code: 'code1' },
-  ];
+  const id1 = 'id1';
+  const id2 = 'id2';
+
+  const mockData: AdvancedFiltersType = {
+    [id1]: {
+      id: id1,
+      value: 'record.partition == 1',
+      filterCode: 'code',
+    },
+    [id2]: {
+      id: id2,
+      value: 'record.partition == 1',
+      filterCode: 'code1',
+    },
+  };
 
   const setUpComponent = (props: Partial<Props> = {}) =>
     render(
       <SavedFilters
-        filters={props.filters || mockFilters}
-        onEdit={props.onEdit || jest.fn()}
-        closeModal={props.closeModal || jest.fn()}
-        onGoBack={props.onGoBack || jest.fn()}
-        activeFilterHandler={props.activeFilterHandler || jest.fn()}
-        deleteFilter={props.deleteFilter || jest.fn()}
+        filters={mockData}
+        onEdit={jest.fn()}
+        closeSideBar={jest.fn()}
+        setSmartFilter={jest.fn()}
+        {...props}
       />
     );
 
   const getSavedFilters = () => screen.getAllByRole('savedFilter');
 
-  it('should check the Cancel button click', async () => {
-    const cancelMock = jest.fn();
-    setUpComponent({ closeModal: cancelMock });
-    await userEvent.click(screen.getByText(/cancel/i));
-    expect(cancelMock).toHaveBeenCalled();
-  });
-
-  it('should check on go back button click', async () => {
-    const onGoBackMock = jest.fn();
-    setUpComponent({ onGoBack: onGoBackMock });
-    await userEvent.click(screen.getByText(/back to create filters/i));
-    expect(onGoBackMock).toHaveBeenCalled();
-  });
-
   describe('Empty Filters Rendering', () => {
     beforeEach(() => {
-      setUpComponent({ filters: [] });
+      setUpComponent({ filters: {} });
     });
+
     it('should check the rendering of the empty filter', () => {
-      expect(screen.getByText(/no saved filter/i)).toBeInTheDocument();
-      expect(screen.queryByRole('savedFilter')).not.toBeInTheDocument();
+      expect(screen.getByText('No saved filter(s)')).toBeInTheDocument();
 
-      const selectFilterButton = screen.getByText(/Select filter/i);
-      expect(selectFilterButton).toBeDisabled();
+      expect(screen.getByText(/clear all/i)).toBeDisabled();
     });
   });
 
   describe('Saved Filters Deleting Editing', () => {
     const onEditMock = jest.fn();
-    const activeFilterMock = jest.fn();
     const cancelMock = jest.fn();
+    const setSmartFilterMock = jest.fn();
 
     beforeEach(() => {
       setUpComponent({
         onEdit: onEditMock,
-        activeFilterHandler: activeFilterMock,
-        closeModal: cancelMock,
+        closeSideBar: cancelMock,
+        setSmartFilter: setSmartFilterMock,
       });
     });
 
     afterEach(() => {
       onEditMock.mockClear();
-      activeFilterMock.mockClear();
       cancelMock.mockClear();
+      setSmartFilterMock.mockClear();
     });
 
     it('should check the normal data rendering', () => {
-      expect(getSavedFilters()).toHaveLength(mockFilters.length);
-      expect(screen.getByText(mockFilters[0].name)).toBeInTheDocument();
-      expect(screen.getByText(mockFilters[1].name)).toBeInTheDocument();
+      const mockFilters = Object.values(mockData);
+      mockFilters.forEach(({ id }) => {
+        expect(screen.getByText(id)).toBeInTheDocument();
+      });
     });
 
     it('should check the Filter edit Button works', async () => {
-      const savedFilters = getSavedFilters();
-      await userEvent.hover(savedFilters[0]);
-      await userEvent.click(within(savedFilters[0]).getByText(/edit/i));
-      expect(onEditMock).toHaveBeenCalled();
-
-      await userEvent.hover(savedFilters[1]);
-      await userEvent.click(within(savedFilters[1]).getByText(/edit/i));
-      expect(onEditMock).toHaveBeenCalledTimes(2);
-    });
+      const filters = getSavedFilters();
+      await userEvent.hover(filters[0]);
+      await userEvent.click(within(filters[0]).getByText(mockEditIcon));
 
-    it('should check the select filter', async () => {
-      const selectFilterButton = screen.getByText(/Select filter/i);
+      await userEvent.hover(filters[1]);
+      await userEvent.click(within(filters[1]).getByText(mockEditIcon));
 
-      await userEvent.click(selectFilterButton);
-      expect(activeFilterMock).not.toHaveBeenCalled();
+      expect(onEditMock).toBeCalledTimes(2);
+    });
 
+    it('should check the select filter', async () => {
       const savedFilterElement = getSavedFilters();
       await userEvent.click(savedFilterElement[0]);
-      await userEvent.click(selectFilterButton);
 
-      expect(activeFilterMock).toHaveBeenCalled();
+      expect(setSmartFilterMock).toHaveBeenCalled();
       expect(cancelMock).toHaveBeenCalled();
     });
   });
 
   describe('Saved Filters Deletion', () => {
-    const deleteMock = jest.fn();
+    const setSmartFilterMock = jest.fn();
 
-    beforeEach(() => {
-      setUpComponent({ deleteFilter: deleteMock });
+    beforeEach(async () => {
+      setUpComponent({ setSmartFilter: setSmartFilterMock });
+      const filters = getSavedFilters();
+      await userEvent.hover(filters[0]);
+      await userEvent.click(within(filters[0]).getByText(mockDeleteIcon));
     });
 
     afterEach(() => {
-      deleteMock.mockClear();
+      setSmartFilterMock.mockClear();
     });
 
     it('Open Confirmation for the deletion modal', async () => {
-      const savedFilters = getSavedFilters();
-      const deleteIcons = screen.getAllByText('mock-DeleteIcon');
-      await userEvent.hover(savedFilters[0]);
-      await userEvent.click(deleteIcons[0]);
       const modelDialog = screen.getByRole('dialog');
       expect(modelDialog).toBeInTheDocument();
       expect(
-        within(modelDialog).getByText('Are you sure want to remove My Filter?')
+        within(modelDialog).getByText(`Are you sure want to remove ${id1}?`)
       ).toBeInTheDocument();
     });
 
     it('Close Confirmations deletion modal with button', async () => {
-      const savedFilters = getSavedFilters();
-      const deleteIcons = screen.getAllByText('mock-DeleteIcon');
-
-      await userEvent.hover(savedFilters[0]);
-      await userEvent.click(deleteIcons[0]);
-
       const modelDialog = screen.getByRole('dialog');
-      expect(modelDialog).toBeInTheDocument();
       const cancelButton = within(modelDialog).getByRole('button', {
         name: /Cancel/i,
       });
@@ -147,19 +138,9 @@ describe('SavedFilter Component', () => {
     });
 
     it('Delete the saved filter', async () => {
-      const savedFilters = getSavedFilters();
-      const deleteIcons = screen.getAllByText('mock-DeleteIcon');
-
-      await userEvent.hover(savedFilters[0]);
-      await userEvent.click(deleteIcons[0]);
-
-      expect(screen.queryByRole('dialog')).toBeInTheDocument();
       await userEvent.click(screen.getByRole('button', { name: 'Confirm' }));
-      expect(deleteMock).toHaveBeenCalledTimes(1);
+      expect(setSmartFilterMock).toHaveBeenCalledTimes(1);
       expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
-
-      const selectFilterButton = screen.getByText(/Select filter/i);
-      expect(selectFilterButton).toBeDisabled();
     });
   });
 });
diff --git a/frontend/src/components/Topics/Topic/Messages/Filters/utils.ts b/frontend/src/components/Topics/Topic/Messages/Filters/utils.ts
index 7be8c8378..585541373 100644
--- a/frontend/src/components/Topics/Topic/Messages/Filters/utils.ts
+++ b/frontend/src/components/Topics/Topic/Messages/Filters/utils.ts
@@ -1,7 +1,23 @@
-import { Partition, SeekType } from 'generated-sources';
+import { Partition, PollingMode, SeekType } from 'generated-sources';
 import compact from 'lodash/compact';
 import { Option } from 'react-multi-select-component';
 
+export function isModeOptionWithInput(value: PollingMode) {
+  return (
+    value !== PollingMode.TAILING &&
+    value !== PollingMode.LATEST &&
+    value !== PollingMode.EARLIEST
+  );
+}
+
+export function isModeOffsetSelector(value: PollingMode) {
+  return value === PollingMode.TO_OFFSET || value === PollingMode.FROM_OFFSET;
+}
+
+export function isLiveMode(mode?: PollingMode) {
+  return mode === PollingMode.TAILING;
+}
+
 export const filterOptions = (options: Option[], filter: string) => {
   if (!filter) {
     return options;
@@ -48,6 +64,7 @@ export const getSelectedPartitionsFromSeekToParam = (
       .split(',')
       .map((item) => Number(item.split('::')[0]));
 
+    // TODO fix this for now
     return compact(
       partitions.map(({ partition }) => {
         if (selectedPartitionIds?.includes(partition)) {
@@ -67,3 +84,9 @@ export const getSelectedPartitionsFromSeekToParam = (
     label: `Partition #${partition.toString()}`,
   }));
 };
+
+export const ADD_FILTER_ID = 'ADD_FILTER';
+
+export function isEditingFilterMode(filterId?: string) {
+  return filterId !== ADD_FILTER_ID;
+}
diff --git a/frontend/src/components/Topics/Topic/Messages/Messages.tsx b/frontend/src/components/Topics/Topic/Messages/Messages.tsx
index 35490c627..cfa4b16bd 100644
--- a/frontend/src/components/Topics/Topic/Messages/Messages.tsx
+++ b/frontend/src/components/Topics/Topic/Messages/Messages.tsx
@@ -1,102 +1,29 @@
-import React, { useCallback, useMemo, useState } from 'react';
-import TopicMessagesContext from 'components/contexts/TopicMessagesContext';
-import { SeekDirection, SerdeUsage } from 'generated-sources';
-import { useSearchParams } from 'react-router-dom';
-import { useSerdes } from 'lib/hooks/api/topicMessages';
+import React from 'react';
+import { useTopicMessages } from 'lib/hooks/api/topicMessages';
 import useAppParams from 'lib/hooks/useAppParams';
 import { RouteParamsClusterTopic } from 'lib/paths';
-import { getDefaultSerdeName } from 'components/Topics/Topic/Messages/getDefaultSerdeName';
-import { MESSAGES_PER_PAGE } from 'lib/constants';
 
 import MessagesTable from './MessagesTable';
-import FiltersContainer from './Filters/FiltersContainer';
-
-export const SeekDirectionOptionsObj = {
-  [SeekDirection.FORWARD]: {
-    value: SeekDirection.FORWARD,
-    label: 'Oldest First',
-    isLive: false,
-  },
-  [SeekDirection.BACKWARD]: {
-    value: SeekDirection.BACKWARD,
-    label: 'Newest First',
-    isLive: false,
-  },
-  [SeekDirection.TAILING]: {
-    value: SeekDirection.TAILING,
-    label: 'Live Mode',
-    isLive: true,
-  },
-};
-
-export const SeekDirectionOptions = Object.values(SeekDirectionOptionsObj);
+import Filters from './Filters/Filters';
 
 const Messages: React.FC = () => {
-  const [searchParams, setSearchParams] = useSearchParams();
   const { clusterName, topicName } = useAppParams<RouteParamsClusterTopic>();
-
-  const { data: serdes = {} } = useSerdes({
-    clusterName,
-    topicName,
-    use: SerdeUsage.DESERIALIZE,
-  });
-
-  React.useEffect(() => {
-    if (!searchParams.get('keySerde')) {
-      searchParams.set('keySerde', getDefaultSerdeName(serdes.key || []));
-    }
-    if (!searchParams.get('valueSerde')) {
-      searchParams.set('valueSerde', getDefaultSerdeName(serdes.value || []));
-    }
-    if (!searchParams.get('limit')) {
-      searchParams.set('limit', MESSAGES_PER_PAGE);
-    }
-    setSearchParams(searchParams);
-  }, [serdes]);
-
-  const defaultSeekValue = SeekDirectionOptions[0];
-
-  const [seekDirection, setSeekDirection] = React.useState<SeekDirection>(
-    (searchParams.get('seekDirection') as SeekDirection) ||
-      defaultSeekValue.value
-  );
-
-  const [isLive, setIsLive] = useState<boolean>(
-    SeekDirectionOptionsObj[seekDirection].isLive
-  );
-
-  const changeSeekDirection = useCallback((val: string) => {
-    switch (val) {
-      case SeekDirection.FORWARD:
-        setSeekDirection(SeekDirection.FORWARD);
-        setIsLive(SeekDirectionOptionsObj[SeekDirection.FORWARD].isLive);
-        break;
-      case SeekDirection.BACKWARD:
-        setSeekDirection(SeekDirection.BACKWARD);
-        setIsLive(SeekDirectionOptionsObj[SeekDirection.BACKWARD].isLive);
-        break;
-      case SeekDirection.TAILING:
-        setSeekDirection(SeekDirection.TAILING);
-        setIsLive(SeekDirectionOptionsObj[SeekDirection.TAILING].isLive);
-        break;
-      default:
-    }
-  }, []);
-
-  const contextValue = useMemo(
-    () => ({
-      seekDirection,
-      changeSeekDirection,
-      isLive,
-    }),
-    [seekDirection, changeSeekDirection]
-  );
+  const { messages, isFetching, consumptionStats, phase, abortFetchData } =
+    useTopicMessages({
+      clusterName,
+      topicName,
+    });
 
   return (
-    <TopicMessagesContext.Provider value={contextValue}>
-      <FiltersContainer />
-      <MessagesTable />
-    </TopicMessagesContext.Provider>
+    <>
+      <Filters
+        consumptionStats={consumptionStats}
+        isFetching={isFetching}
+        phaseMessage={phase}
+        abortFetchData={abortFetchData}
+      />
+      <MessagesTable messages={messages} isFetching={isFetching} />
+    </>
   );
 };
 
diff --git a/frontend/src/components/Topics/Topic/Messages/MessagesTable.tsx b/frontend/src/components/Topics/Topic/Messages/MessagesTable.tsx
index 10e4f4dfa..4da134c85 100644
--- a/frontend/src/components/Topics/Topic/Messages/MessagesTable.tsx
+++ b/frontend/src/components/Topics/Topic/Messages/MessagesTable.tsx
@@ -2,54 +2,31 @@ import PageLoader from 'components/common/PageLoader/PageLoader';
 import { Table } from 'components/common/table/Table/Table.styled';
 import TableHeaderCell from 'components/common/table/TableHeaderCell/TableHeaderCell';
 import { TopicMessage } from 'generated-sources';
-import React, { useContext, useState } from 'react';
-import {
-  getTopicMessges,
-  getIsTopicMessagesFetching,
-} from 'redux/reducers/topicMessages/selectors';
-import TopicMessagesContext from 'components/contexts/TopicMessagesContext';
-import { useAppSelector } from 'lib/hooks/redux';
+import React, { useState } from 'react';
 import { Button } from 'components/common/Button/Button';
-import { useSearchParams } from 'react-router-dom';
-import { MESSAGES_PER_PAGE } from 'lib/constants';
 import * as S from 'components/common/NewTable/Table.styled';
+import { useIsLiveMode, useRefreshData } from 'lib/hooks/useMessagesFilters';
+import { useMessageFiltersStore } from 'lib/hooks/useMessageFiltersStore';
 
 import PreviewModal from './PreviewModal';
 import Message, { PreviewFilter } from './Message';
 
-const MessagesTable: React.FC = () => {
+export interface MessagesTableProps {
+  messages: TopicMessage[];
+  isFetching: boolean;
+}
+
+const MessagesTable: React.FC<MessagesTableProps> = ({
+  messages,
+  isFetching,
+}) => {
+  const refreshData = useRefreshData();
   const [previewFor, setPreviewFor] = useState<string | null>(null);
 
   const [keyFilters, setKeyFilters] = useState<PreviewFilter[]>([]);
   const [contentFilters, setContentFilters] = useState<PreviewFilter[]>([]);
-
-  const [searchParams, setSearchParams] = useSearchParams();
-  const page = searchParams.get('page');
-  const { isLive } = useContext(TopicMessagesContext);
-
-  const messages = useAppSelector(getTopicMessges);
-  const isFetching = useAppSelector(getIsTopicMessagesFetching);
-
-  const isTailing = isLive && isFetching;
-
-  // Pagination is disabled in live mode, also we don't want to show the button
-  // if we are fetching the messages or if we are at the end of the topic
-  const isPaginationDisabled = isTailing || isFetching;
-
-  const isNextPageButtonDisabled =
-    isPaginationDisabled || messages.length < Number(MESSAGES_PER_PAGE);
-  const isPrevPageButtonDisabled =
-    isPaginationDisabled || !Number(searchParams.get('page'));
-
-  const handleNextPage = () => {
-    searchParams.set('page', String(Number(page || 0) + 1));
-    setSearchParams(searchParams);
-  };
-
-  const handlePrevPage = () => {
-    searchParams.set('page', String(Number(page || 0) - 1));
-    setSearchParams(searchParams);
-  };
+  const nextCursor = useMessageFiltersStore((state) => state.nextCursor);
+  const isLive = useIsLiveMode();
 
   return (
     <div style={{ position: 'relative' }}>
@@ -104,7 +81,7 @@ const MessagesTable: React.FC = () => {
               contentFilters={contentFilters}
             />
           ))}
-          {isFetching && isLive && !messages.length && (
+          {isFetching && !messages.length && (
             <tr>
               <td colSpan={10}>
                 <PageLoader />
@@ -121,18 +98,10 @@ const MessagesTable: React.FC = () => {
       <S.Pagination>
         <S.Pages>
           <Button
+            disabled={isLive || isFetching || !nextCursor}
             buttonType="secondary"
             buttonSize="L"
-            disabled={isPrevPageButtonDisabled}
-            onClick={handlePrevPage}
-          >
-            ← Back
-          </Button>
-          <Button
-            buttonType="secondary"
-            buttonSize="L"
-            disabled={isNextPageButtonDisabled}
-            onClick={handleNextPage}
+            onClick={refreshData}
           >
             Next →
           </Button>
diff --git a/frontend/src/components/Topics/Topic/Messages/__test__/FiltersContainer.spec.tsx b/frontend/src/components/Topics/Topic/Messages/__test__/FiltersContainer.spec.tsx
deleted file mode 100644
index 127a602f8..000000000
--- a/frontend/src/components/Topics/Topic/Messages/__test__/FiltersContainer.spec.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react';
-import FiltersContainer from 'components/Topics/Topic/Messages/Filters/FiltersContainer';
-import { screen } from '@testing-library/react';
-import { render } from 'lib/testHelpers';
-
-jest.mock('components/Topics/Topic/Messages/Filters/Filters', () => () => (
-  <div>mock-Filters</div>
-));
-
-describe('FiltersContainer', () => {
-  it('renders Filters component', () => {
-    render(<FiltersContainer />);
-    expect(screen.getByText('mock-Filters')).toBeInTheDocument();
-  });
-});
diff --git a/frontend/src/components/Topics/Topic/Messages/__test__/Messages.spec.tsx b/frontend/src/components/Topics/Topic/Messages/__test__/Messages.spec.tsx
index 172dc8101..02c00f765 100644
--- a/frontend/src/components/Topics/Topic/Messages/__test__/Messages.spec.tsx
+++ b/frontend/src/components/Topics/Topic/Messages/__test__/Messages.spec.tsx
@@ -1,107 +1,46 @@
 import React from 'react';
-import { screen, waitFor } from '@testing-library/react';
-import { render, EventSourceMock, WithRoute } from 'lib/testHelpers';
-import Messages, {
-  SeekDirectionOptions,
-  SeekDirectionOptionsObj,
-} from 'components/Topics/Topic/Messages/Messages';
-import { SeekDirection, SeekType } from 'generated-sources';
-import userEvent from '@testing-library/user-event';
-import { clusterTopicMessagesPath } from 'lib/paths';
-import { useSerdes } from 'lib/hooks/api/topicMessages';
-import { serdesPayload } from 'lib/fixtures/topicMessages';
-import { useTopicDetails } from 'lib/hooks/api/topics';
-import { externalTopicPayload } from 'lib/fixtures/topics';
+import { render } from 'lib/testHelpers';
+import Messages from 'components/Topics/Topic/Messages/Messages';
+import { useTopicMessages } from 'lib/hooks/api/topicMessages';
+import { screen } from '@testing-library/react';
+
+const mockFilterComponents = 'mockFilterComponents';
+const mockMessagesTable = 'mockMessagesTable';
 
 jest.mock('lib/hooks/api/topicMessages', () => ({
-  useSerdes: jest.fn(),
+  useTopicMessages: jest.fn(),
 }));
 
-jest.mock('lib/hooks/api/topics', () => ({
-  useTopicDetails: jest.fn(),
-}));
+jest.mock('components/Topics/Topic/Messages/MessagesTable', () => () => (
+  <div>{mockMessagesTable}</div>
+));
+
+jest.mock('components/Topics/Topic/Messages/Filters/Filters', () => () => (
+  <div>{mockFilterComponents}</div>
+));
 
 describe('Messages', () => {
-  const searchParams = `?filterQueryType=STRING_CONTAINS&attempt=0&limit=100&seekDirection=${SeekDirection.FORWARD}&seekType=${SeekType.OFFSET}&seekTo=0::9`;
-  const renderComponent = (param: string = searchParams) => {
-    const query = new URLSearchParams(param).toString();
-    const path = `${clusterTopicMessagesPath()}?${query}`;
-    return render(
-      <WithRoute path={clusterTopicMessagesPath()}>
-        <Messages />
-      </WithRoute>,
-      {
-        initialEntries: [path],
-      }
-    );
+  const renderComponent = () => {
+    return render(<Messages />);
   };
 
   beforeEach(() => {
-    Object.defineProperty(window, 'EventSource', {
-      value: EventSourceMock,
-    });
-    (useSerdes as jest.Mock).mockImplementation(() => ({
-      data: serdesPayload,
-    }));
-    (useTopicDetails as jest.Mock).mockImplementation(() => ({
-      data: externalTopicPayload,
+    (useTopicMessages as jest.Mock).mockImplementation(() => ({
+      data: { messages: [], isFetching: false },
     }));
   });
+
   describe('component rendering default behavior with the search params', () => {
     beforeEach(() => {
       renderComponent();
     });
-    it('should check default seekDirection if it actually take the value from the url', () => {
-      expect(screen.getAllByRole('listbox')[3]).toHaveTextContent(
-        SeekDirectionOptionsObj[SeekDirection.FORWARD].label
-      );
-    });
 
-    it('should check the SeekDirection select changes with live option', async () => {
-      const seekDirectionSelect = screen.getAllByRole('listbox')[3];
-      const seekDirectionOption = screen.getAllByRole('option')[3];
-
-      expect(seekDirectionOption).toHaveTextContent(
-        SeekDirectionOptionsObj[SeekDirection.FORWARD].label
-      );
-
-      const labelValue1 = SeekDirectionOptions[1].label;
-      await userEvent.click(seekDirectionSelect);
-      await userEvent.selectOptions(seekDirectionSelect, [labelValue1]);
-      expect(seekDirectionOption).toHaveTextContent(labelValue1);
-
-      const labelValue0 = SeekDirectionOptions[0].label;
-      await userEvent.click(seekDirectionSelect);
-      await userEvent.selectOptions(seekDirectionSelect, [labelValue0]);
-      expect(seekDirectionOption).toHaveTextContent(labelValue0);
-
-      const liveOptionConf = SeekDirectionOptions[2];
-      const labelValue2 = liveOptionConf.label;
-      await userEvent.click(seekDirectionSelect);
-
-      const options = screen.getAllByRole('option');
-      const liveModeLi = options.find(
-        (option) => option.getAttribute('value') === liveOptionConf.value
-      );
-      expect(liveModeLi).toBeInTheDocument();
-      if (!liveModeLi) return; // to make TS happy
-      await userEvent.selectOptions(seekDirectionSelect, [liveModeLi]);
-      expect(seekDirectionOption).toHaveTextContent(labelValue2);
-
-      await waitFor(() => {
-        expect(screen.getByRole('contentLoader')).toBeInTheDocument();
-      });
+    it('should check if the filters are shown in the messages', () => {
+      expect(screen.getByText(mockFilterComponents)).toBeInTheDocument();
     });
-  });
 
-  describe('Component rendering with custom Url search params', () => {
-    it('reacts to a change of seekDirection in the url which make the select pick up different value', () => {
-      renderComponent(
-        searchParams.replace(SeekDirection.FORWARD, SeekDirection.BACKWARD)
-      );
-      expect(screen.getAllByRole('listbox')[3]).toHaveTextContent(
-        SeekDirectionOptionsObj[SeekDirection.BACKWARD].label
-      );
+    it('should check if the table of messages are shown in the messages', () => {
+      expect(screen.getByText(mockMessagesTable)).toBeInTheDocument();
     });
   });
 });
diff --git a/frontend/src/components/Topics/Topic/Messages/__test__/MessagesTable.spec.tsx b/frontend/src/components/Topics/Topic/Messages/__test__/MessagesTable.spec.tsx
index 7b1e80f8c..d179a2100 100644
--- a/frontend/src/components/Topics/Topic/Messages/__test__/MessagesTable.spec.tsx
+++ b/frontend/src/components/Topics/Topic/Messages/__test__/MessagesTable.spec.tsx
@@ -2,63 +2,41 @@ import React from 'react';
 import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { render } from 'lib/testHelpers';
-import MessagesTable from 'components/Topics/Topic/Messages/MessagesTable';
-import { SeekDirection, SeekType, TopicMessage } from 'generated-sources';
-import TopicMessagesContext, {
-  ContextProps,
-} from 'components/contexts/TopicMessagesContext';
-import {
-  topicMessagePayload,
-  topicMessagesMetaPayload,
-} from 'redux/reducers/topicMessages/__test__/fixtures';
-
-const mockTopicsMessages: TopicMessage[] = [{ ...topicMessagePayload }];
+import MessagesTable, {
+  MessagesTableProps,
+} from 'components/Topics/Topic/Messages/MessagesTable';
+import { TopicMessage, TopicMessageTimestampTypeEnum } from 'generated-sources';
+import { useIsLiveMode } from 'lib/hooks/useMessagesFilters';
+
+export const topicMessagePayload: TopicMessage = {
+  partition: 29,
+  offset: 14,
+  timestamp: new Date('2021-07-21T23:25:14.865Z'),
+  timestampType: TopicMessageTimestampTypeEnum.CREATE_TIME,
+  key: 'schema-registry',
+  headers: {},
+  content:
+    '{"host":"schemaregistry1","port":8085,"master_eligibility":true,"scheme":"http","version":1}',
+};
+
+const mockTopicsMessages = [{ ...topicMessagePayload }];
 
 const mockNavigate = jest.fn();
+
 jest.mock('react-router-dom', () => ({
   ...jest.requireActual('react-router-dom'),
   useNavigate: () => mockNavigate,
 }));
 
-describe('MessagesTable', () => {
-  const searchParams = new URLSearchParams({
-    filterQueryType: 'STRING_CONTAINS',
-    attempt: '0',
-    limit: '100',
-    seekDirection: SeekDirection.FORWARD,
-    seekType: SeekType.OFFSET,
-    seekTo: '0::9',
-  });
-  const contextValue: ContextProps = {
-    isLive: false,
-    seekDirection: SeekDirection.FORWARD,
-    changeSeekDirection: jest.fn(),
-  };
+jest.mock('lib/hooks/useMessagesFilters', () => ({
+  useIsLiveMode: jest.fn(),
+  useRefreshData: jest.fn(),
+}));
 
-  const renderComponent = (
-    params: URLSearchParams = searchParams,
-    ctx: ContextProps = contextValue,
-    messages: TopicMessage[] = [],
-    isFetching?: boolean,
-    path?: string
-  ) => {
-    const customPath = path || params.toString();
+describe('MessagesTable', () => {
+  const renderComponent = (props?: Partial<MessagesTableProps>) => {
     return render(
-      <TopicMessagesContext.Provider value={ctx}>
-        <MessagesTable />
-      </TopicMessagesContext.Provider>,
-      {
-        initialEntries: [`/messages?${customPath}`],
-        preloadedState: {
-          topicMessages: {
-            messages,
-            meta: {
-              ...topicMessagesMetaPayload,
-            },
-            isFetching: !!isFetching,
-          },
-        },
-      }
+      <MessagesTable messages={[]} isFetching={false} {...props} />
     );
   };
 
@@ -90,33 +68,35 @@ describe('MessagesTable', () => {
   });
 
   describe('Custom Setup with different props value', () => {
-    it('should check if next button and previous is disabled isLive Param', () => {
-      renderComponent(searchParams, { ...contextValue, isLive: true });
+    it('should check if next button is disabled isLive Param', () => {
+      renderComponent({ isFetching: true });
+      expect(screen.queryByText(/next/i)).toBeDisabled();
+    });
+
+    it('should check if next button is disabled if there is no nextCursor', () => {
+      (useIsLiveMode as jest.Mock).mockImplementation(() => false);
+      renderComponent({ isFetching: false });
       expect(screen.queryByText(/next/i)).toBeDisabled();
-      expect(screen.queryByText(/back/i)).toBeDisabled();
     });
 
-    it('should check the display of the loader element', () => {
-      renderComponent(
-        searchParams,
-        { ...contextValue, isLive: true },
-        [],
-        true
-      );
+    it('should check the display of the loader element during loader', () => {
+      renderComponent({ isFetching: true });
       expect(screen.getByRole('progressbar')).toBeInTheDocument();
     });
   });
 
   describe('should render Messages table with data', () => {
     beforeEach(() => {
-      renderComponent(searchParams, { ...contextValue }, mockTopicsMessages);
+      renderComponent({ messages: mockTopicsMessages, isFetching: false });
     });
 
     it('should check the rendering of the messages', () => {
       expect(screen.queryByText(/No messages found/i)).not.toBeInTheDocument();
-      expect(
-        screen.getByText(mockTopicsMessages[0].content as string)
-      ).toBeInTheDocument();
+      if (mockTopicsMessages[0].content) {
+        expect(
+          screen.getByText(mockTopicsMessages[0].content)
+        ).toBeInTheDocument();
+      }
     });
   });
 });
diff --git a/frontend/src/components/Topics/Topic/Messages/__test__/utils.spec.ts b/frontend/src/components/Topics/Topic/Messages/__test__/utils.spec.ts
index 97dd0ec7b..d0f00967d 100644
--- a/frontend/src/components/Topics/Topic/Messages/__test__/utils.spec.ts
+++ b/frontend/src/components/Topics/Topic/Messages/__test__/utils.spec.ts
@@ -1,11 +1,16 @@
 import { Option } from 'react-multi-select-component';
 import {
+  ADD_FILTER_ID,
   filterOptions,
   getOffsetFromSeekToParam,
-  getTimestampFromSeekToParam,
   getSelectedPartitionsFromSeekToParam,
+  getTimestampFromSeekToParam,
+  isEditingFilterMode,
+  isLiveMode,
+  isModeOffsetSelector,
+  isModeOptionWithInput,
 } from 'components/Topics/Topic/Messages/Filters/utils';
-import { SeekType, Partition } from 'generated-sources';
+import { Partition, PollingMode, SeekType } from 'generated-sources';
 
 const options: Option[] = [
   {
@@ -117,4 +122,47 @@ describe('utils', () => {
       ]);
     });
   });
+
+  describe('isModeOptionWithInput', () => {
+    describe('check the validity if Mode offset Selector only during', () => {
+      expect(isModeOptionWithInput(PollingMode.TAILING)).toBeFalsy();
+      expect(isModeOptionWithInput(PollingMode.LATEST)).toBeFalsy();
+      expect(isModeOptionWithInput(PollingMode.EARLIEST)).toBeFalsy();
+      expect(isModeOptionWithInput(PollingMode.FROM_TIMESTAMP)).toBeTruthy();
+      expect(isModeOptionWithInput(PollingMode.TO_TIMESTAMP)).toBeTruthy();
+      expect(isModeOptionWithInput(PollingMode.FROM_OFFSET)).toBeTruthy();
+      expect(isModeOptionWithInput(PollingMode.TO_OFFSET)).toBeTruthy();
+    });
+  });
+
+  describe('isModeOffsetSelector', () => {
+    it('check the validity if Mode offset Selector only during', () => {
+      expect(isModeOffsetSelector(PollingMode.TAILING)).toBeFalsy();
+      expect(isModeOffsetSelector(PollingMode.LATEST)).toBeFalsy();
+      expect(isModeOffsetSelector(PollingMode.EARLIEST)).toBeFalsy();
+      expect(isModeOffsetSelector(PollingMode.FROM_TIMESTAMP)).toBeFalsy();
+      expect(isModeOffsetSelector(PollingMode.TO_TIMESTAMP)).toBeFalsy();
+      expect(isModeOffsetSelector(PollingMode.FROM_OFFSET)).toBeTruthy();
+      expect(isModeOffsetSelector(PollingMode.TO_OFFSET)).toBeTruthy();
+    });
+  });
+
+  describe('isLiveMode', () => {
+    it('should check the validity of data on;y during tailing mode', () => {
+      expect(isLiveMode(PollingMode.TAILING)).toBeTruthy();
+      expect(isLiveMode(PollingMode.LATEST)).toBeFalsy();
+      expect(isLiveMode(PollingMode.EARLIEST)).toBeFalsy();
+      expect(isLiveMode(PollingMode.FROM_TIMESTAMP)).toBeFalsy();
+      expect(isLiveMode(PollingMode.TO_TIMESTAMP)).toBeFalsy();
+      expect(isLiveMode(PollingMode.FROM_OFFSET)).toBeFalsy();
+      expect(isLiveMode(PollingMode.TO_OFFSET)).toBeFalsy();
+    });
+  });
+
+  describe('isEditingFilterMode', () => {
+    it('should editing value', () => {
+      expect(isEditingFilterMode('testing')).toBeTruthy();
+      expect(isEditingFilterMode(ADD_FILTER_ID)).toBeFalsy();
+    });
+  });
 });
diff --git a/frontend/src/components/Topics/Topic/SendMessage/SendMessage.tsx b/frontend/src/components/Topics/Topic/SendMessage/SendMessage.tsx
index bef7a4ddd..4bdb981f8 100644
--- a/frontend/src/components/Topics/Topic/SendMessage/SendMessage.tsx
+++ b/frontend/src/components/Topics/Topic/SendMessage/SendMessage.tsx
@@ -3,7 +3,7 @@ import { useForm, Controller } from 'react-hook-form';
 import { RouteParamsClusterTopic } from 'lib/paths';
 import { Button } from 'components/common/Button/Button';
 import Editor from 'components/common/Editor/Editor';
-import Select, { SelectOption } from 'components/common/Select/Select';
+import Select from 'components/common/Select/Select';
 import Switch from 'components/common/Switch/Switch';
 import useAppParams from 'lib/hooks/useAppParams';
 import { showAlert } from 'lib/errorHandling';
@@ -43,7 +43,7 @@ const SendMessage: React.FC<{ closeSidebar: () => void }> = ({
   const sendMessage = useSendMessage({ clusterName, topicName });
 
   const defaultValues = React.useMemo(() => getDefaultValues(serdes), [serdes]);
-  const partitionOptions: SelectOption[] = React.useMemo(
+  const partitionOptions = React.useMemo(
     () => getPartitionOptions(topic?.partitions || []),
     [topic]
   );
diff --git a/frontend/src/components/Topics/Topic/SendMessage/utils.ts b/frontend/src/components/Topics/Topic/SendMessage/utils.ts
index c8161b0c8..46d9e1278 100644
--- a/frontend/src/components/Topics/Topic/SendMessage/utils.ts
+++ b/frontend/src/components/Topics/Topic/SendMessage/utils.ts
@@ -4,7 +4,6 @@ import {
   TopicSerdeSuggestion,
 } from 'generated-sources';
 import jsf from 'json-schema-faker';
-import { compact } from 'lodash';
 import Ajv, { DefinedError } from 'ajv/dist/2020';
 import addFormats from 'ajv-formats';
 import upperFirst from 'lodash/upperFirst';
@@ -46,12 +45,12 @@ export const getPartitionOptions = (partitions: Partition[]) =>
   }));
 
 export const getSerdeOptions = (items: SerdeDescription[]) => {
-  const options = items.map(({ name }) => {
-    if (!name) return undefined;
-    return { label: name, value: name };
-  });
-
-  return compact(options);
+  return items.reduce<{ label: string; value: string }[]>((acc, { name }) => {
+    if (name) {
+      acc.push({ value: name, label: name });
+    }
+    return acc;
+  }, []);
 };
 
 export const validateBySchema = (
diff --git a/frontend/src/components/Topics/Topic/Topic.tsx b/frontend/src/components/Topics/Topic/Topic.tsx
index 5a639f0c4..b5bcf8d52 100644
--- a/frontend/src/components/Topics/Topic/Topic.tsx
+++ b/frontend/src/components/Topics/Topic/Topic.tsx
@@ -17,7 +17,6 @@ import {
   ActionDropdownItem,
 } from 'components/common/ActionComponent';
 import Navbar from 'components/common/Navigation/Navbar.styled';
-import { useAppDispatch } from 'lib/hooks/redux';
 import useAppParams from 'lib/hooks/useAppParams';
 import { Dropdown, DropdownItemHint } from 'components/common/Dropdown';
 import {
@@ -26,7 +25,6 @@ import {
   useRecreateTopic,
   useTopicDetails,
 } from 'lib/hooks/api/topics';
-import { resetTopicMessages } from 'redux/reducers/topicMessages/topicMessagesSlice';
 import { Action, CleanUpPolicy, ResourceType } from 'generated-sources';
 import PageLoader from 'components/common/PageLoader/PageLoader';
 import SlidingSidebar from 'components/common/SlidingSidebar';
@@ -41,7 +39,6 @@ import Edit from './Edit/Edit';
 import SendMessage from './SendMessage/SendMessage';
 
 const Topic: React.FC = () => {
-  const dispatch = useAppDispatch();
   const {
     value: isSidebarOpen,
     setFalse: closeSidebar,
@@ -62,16 +59,12 @@ const Topic: React.FC = () => {
     navigate(clusterTopicsPath(clusterName));
   };
 
-  React.useEffect(() => {
-    return () => {
-      dispatch(resetTopicMessages());
-    };
-  }, []);
   const clearMessages = useClearTopicMessages(clusterName);
   const clearTopicMessagesHandler = async () => {
     await clearMessages.mutateAsync(topicName);
   };
   const canCleanup = data?.cleanUpPolicy === CleanUpPolicy.DELETE;
+
   return (
     <>
       <PageHeading
diff --git a/frontend/src/components/Topics/shared/Form/TopicForm.tsx b/frontend/src/components/Topics/shared/Form/TopicForm.tsx
index 677890cb7..14ca69ed2 100644
--- a/frontend/src/components/Topics/shared/Form/TopicForm.tsx
+++ b/frontend/src/components/Topics/shared/Form/TopicForm.tsx
@@ -3,7 +3,7 @@ import { useFormContext, Controller } from 'react-hook-form';
 import { NOT_SET, BYTES_IN_GB } from 'lib/constants';
 import { ClusterName, TopicConfigParams, TopicName } from 'redux/interfaces';
 import { ErrorMessage } from '@hookform/error-message';
-import Select, { SelectOption } from 'components/common/Select/Select';
+import Select from 'components/common/Select/Select';
 import Input from 'components/common/Input/Input';
 import { Button } from 'components/common/Button/Button';
 import { InputLabel } from 'components/common/Input/InputLabel.styled';
@@ -30,7 +30,7 @@ export interface Props {
   onSubmit: (e: React.BaseSyntheticEvent) => Promise<void>;
 }
 
-const CleanupPolicyOptions: Array<SelectOption> = [
+const CleanupPolicyOptions = [
   { value: 'delete', label: 'Delete' },
   { value: 'compact', label: 'Compact' },
   { value: 'compact,delete', label: 'Compact,Delete' },
@@ -39,7 +39,7 @@ const CleanupPolicyOptions: Array<SelectOption> = [
 export const getCleanUpPolicyValue = (cleanUpPolicy?: string) => {
   if (!cleanUpPolicy) return undefined;
 
-  return CleanupPolicyOptions.find((option: SelectOption) => {
+  return CleanupPolicyOptions.find((option) => {
     return (
       option.value.toString().replace(/,/g, '_') ===
       cleanUpPolicy?.toLowerCase()
@@ -47,7 +47,7 @@ export const getCleanUpPolicyValue = (cleanUpPolicy?: string) => {
   })?.value.toString();
 };
 
-const RetentionBytesOptions: Array<SelectOption> = [
+const RetentionBytesOptions = [
   { value: NOT_SET, label: 'Not Set' },
   { value: BYTES_IN_GB, label: '1 GB' },
   { value: BYTES_IN_GB * 10, label: '10 GB' },
@@ -75,7 +75,7 @@ const TopicForm: React.FC<Props> = ({
     getCleanUpPolicyValue(cleanUpPolicy) || CleanupPolicyOptions[0].value;
 
   const getRetentionBytes =
-    RetentionBytesOptions.find((option: SelectOption) => {
+    RetentionBytesOptions.find((option) => {
       return option.value === retentionBytes;
     })?.value || RetentionBytesOptions[0].value;
 
diff --git a/frontend/src/components/common/ActionComponent/ActionSelect/ActionSelect.tsx b/frontend/src/components/common/ActionComponent/ActionSelect/ActionSelect.tsx
index 31c73982a..030546187 100644
--- a/frontend/src/components/common/ActionComponent/ActionSelect/ActionSelect.tsx
+++ b/frontend/src/components/common/ActionComponent/ActionSelect/ActionSelect.tsx
@@ -8,15 +8,15 @@ import { useActionTooltip } from 'lib/hooks/useActionTooltip';
 import { usePermission } from 'lib/hooks/usePermission';
 import * as S from 'components/common/ActionComponent/ActionComponent.styled';
 
-interface Props extends SelectProps, ActionComponentProps {}
+interface Props<T> extends SelectProps<T>, ActionComponentProps {}
 
-const ActionSelect: React.FC<Props> = ({
+const ActionSelect = <T,>({
   message = getDefaultActionMessage(),
   permission,
   placement = 'bottom',
   disabled,
   ...props
-}) => {
+}: Props<T>) => {
   const canDoAction = usePermission(
     permission.resource,
     permission.action,
diff --git a/frontend/src/components/common/FlexBox/FlexBox.tsx b/frontend/src/components/common/FlexBox/FlexBox.tsx
new file mode 100644
index 000000000..2a767ad56
--- /dev/null
+++ b/frontend/src/components/common/FlexBox/FlexBox.tsx
@@ -0,0 +1,39 @@
+import React, { CSSProperties, ReactNode } from 'react';
+import styled from 'styled-components';
+
+interface FlexboxProps {
+  flexDirection?: CSSProperties['flexDirection'];
+  alignItems?: CSSProperties['alignItems'];
+  alignSelf?: CSSProperties['alignSelf'];
+  justifyContent?: CSSProperties['justifyContent'];
+  justifyItems?: CSSProperties['justifyItems'];
+  gap?: CSSProperties['gap'];
+  margin?: CSSProperties['margin'];
+  padding?: CSSProperties['padding'];
+  color?: CSSProperties['color'];
+  flexGrow?: CSSProperties['flexGrow'];
+  flexWrap?: CSSProperties['flexWrap'];
+  width?: CSSProperties['width'];
+  children: ReactNode;
+}
+
+const FlexboxContainer = styled.div<FlexboxProps>`
+  display: flex;
+  flex-direction: ${(props) => props.flexDirection || 'row'};
+  align-items: ${(props) => props.alignItems};
+  align-self: ${(props) => props.alignSelf};
+  justify-content: ${(props) => props.justifyContent};
+  justify-items: ${(props) => props.justifyItems};
+  gap: ${(props) => props.gap};
+  margin: ${(props) => props.margin};
+  padding: ${(props) => props.padding};
+  flex-grow: ${(props) => props.flexGrow};
+  width: ${(props) => props.width};
+  color ${(props) => props.color};
+`;
+
+const Flexbox: React.FC<FlexboxProps> = ({ children, ...rest }) => {
+  return <FlexboxContainer {...rest}>{children}</FlexboxContainer>;
+};
+
+export default Flexbox;
diff --git a/frontend/src/components/common/NewTable/__test__/Table.spec.tsx b/frontend/src/components/common/NewTable/__test__/Table.spec.tsx
index e31a88846..266276379 100644
--- a/frontend/src/components/common/NewTable/__test__/Table.spec.tsx
+++ b/frontend/src/components/common/NewTable/__test__/Table.spec.tsx
@@ -7,7 +7,7 @@ import Table, {
   LinkCell,
   TagCell,
 } from 'components/common/NewTable';
-import { screen, waitFor } from '@testing-library/dom';
+import { screen } from '@testing-library/dom';
 import { ColumnDef, Row } from '@tanstack/react-table';
 import userEvent from '@testing-library/user-event';
 import { formatTimestamp } from 'lib/dateTimeHelpers';
@@ -276,7 +276,7 @@ describe('Table', () => {
 
   describe('Sorting', () => {
     it('sort rows', async () => {
-      await renderComponent({
+      renderComponent({
         path: '/?sortBy=text&&sortDirection=desc',
         enableSorting: true,
       });
@@ -293,7 +293,7 @@ describe('Table', () => {
       expect(rows[1].textContent?.indexOf('sit')).toBeGreaterThan(-1);
 
       // Disable sorting by text column
-      await waitFor(() => userEvent.click(th));
+      await userEvent.click(th);
       rows = screen.getAllByRole('row');
       expect(rows[1].textContent?.indexOf('lorem')).toBeGreaterThan(-1);
       expect(rows[2].textContent?.indexOf('ipsum')).toBeGreaterThan(-1);
@@ -301,7 +301,7 @@ describe('Table', () => {
       expect(rows[4].textContent?.indexOf('sit')).toBeGreaterThan(-1);
 
       // Sort by text column ascending
-      await waitFor(() => userEvent.click(th));
+      await userEvent.click(th);
       rows = screen.getAllByRole('row');
       expect(rows[1].textContent?.indexOf('dolor')).toBeGreaterThan(-1);
       expect(rows[2].textContent?.indexOf('ipsum')).toBeGreaterThan(-1);
diff --git a/frontend/src/components/common/Search/Search.tsx b/frontend/src/components/common/Search/Search.tsx
index 72b5d1d54..3fa7d27ac 100644
--- a/frontend/src/components/common/Search/Search.tsx
+++ b/frontend/src/components/common/Search/Search.tsx
@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import React, { ComponentRef, useRef } from 'react';
 import { useDebouncedCallback } from 'use-debounce';
 import Input from 'components/common/Input/Input';
 import { useSearchParams } from 'react-router-dom';
@@ -29,7 +29,8 @@ const Search: React.FC<SearchProps> = ({
   onChange,
 }) => {
   const [searchParams, setSearchParams] = useSearchParams();
-  const ref = useRef<HTMLInputElement>(null);
+  const ref = useRef<ComponentRef<'input'>>(null);
+
   const handleChange = useDebouncedCallback((e) => {
     if (ref.current != null) {
       ref.current.value = e.target.value;
@@ -44,8 +45,11 @@ const Search: React.FC<SearchProps> = ({
       setSearchParams(searchParams);
     }
   }, 500);
+
   const clearSearchValue = () => {
-    if (searchParams.get('q')) {
+    if (onChange) {
+      onChange('');
+    } else if (searchParams.get('q')) {
       searchParams.set('q', '');
       setSearchParams(searchParams);
     }
diff --git a/frontend/src/components/common/Select/ControlledSelect.tsx b/frontend/src/components/common/Select/ControlledSelect.tsx
index 1ea90c356..54174fd4c 100644
--- a/frontend/src/components/common/Select/ControlledSelect.tsx
+++ b/frontend/src/components/common/Select/ControlledSelect.tsx
@@ -6,24 +6,24 @@ import { ErrorMessage } from '@hookform/error-message';
 
 import Select, { SelectOption } from './Select';
 
-interface ControlledSelectProps {
+interface ControlledSelectProps<T> {
   name: string;
   label: React.ReactNode;
   hint?: string;
-  options: SelectOption[];
-  onChange?: (val: string | number) => void;
+  options: SelectOption<T>[];
+  onChange?: (val: T) => void;
   disabled?: boolean;
   placeholder?: string;
 }
 
-const ControlledSelect: React.FC<ControlledSelectProps> = ({
+const ControlledSelect = <T,>({
   name,
   label,
   onChange,
   options,
   disabled = false,
   placeholder,
-}) => {
+}: ControlledSelectProps<T>) => {
   const id = React.useId();
 
   return (
diff --git a/frontend/src/components/common/Select/Select.tsx b/frontend/src/components/common/Select/Select.tsx
index a72660d2c..72bf358ba 100644
--- a/frontend/src/components/common/Select/Select.tsx
+++ b/frontend/src/components/common/Select/Select.tsx
@@ -3,123 +3,113 @@ import useClickOutside from 'lib/hooks/useClickOutside';
 import DropdownArrowIcon from 'components/common/Icons/DropdownArrowIcon';
 
 import * as S from './Select.styled';
-import LiveIcon from './LiveIcon.styled';
 
-export interface SelectProps {
-  options?: Array<SelectOption>;
+export interface SelectProps<T> {
+  options?: SelectOption<T>[];
   id?: string;
   name?: string;
   selectSize?: 'M' | 'L';
-  isLive?: boolean;
   minWidth?: string;
-  value?: string | number;
-  defaultValue?: string | number;
+  value?: T;
+  defaultValue?: T;
   placeholder?: string;
   disabled?: boolean;
-  onChange?: (option: string | number) => void;
+  onChange?: (option: T) => void;
   isThemeMode?: boolean;
 }
 
-export interface SelectOption {
+export interface SelectOption<T> {
   label: string | number | React.ReactElement;
-  value: string | number;
+  value: T;
   disabled?: boolean;
-  isLive?: boolean;
 }
 
-const Select = React.forwardRef<HTMLUListElement, SelectProps>(
-  (
-    {
-      options = [],
-      value,
-      defaultValue,
-      selectSize = 'L',
-      placeholder = '',
-      isLive,
-      disabled = false,
-      onChange,
-      isThemeMode,
-      ...props
-    },
-    ref
-  ) => {
-    const [selectedOption, setSelectedOption] = useState(value);
-    const [showOptions, setShowOptions] = useState(false);
+// Use the generic type T for forwardRef
+const Select = <T extends object>(
+  {
+    options = [],
+    value,
+    defaultValue,
+    selectSize = 'L',
+    placeholder = '',
+    disabled = false,
+    onChange,
+    isThemeMode,
+    ...props
+  }: SelectProps<T>,
+  ref?: React.Ref<HTMLUListElement>
+) => {
+  const [selectedOption, setSelectedOption] = useState(value);
+  const [showOptions, setShowOptions] = useState(false);
 
-    const showOptionsHandler = () => {
-      if (!disabled) setShowOptions(!showOptions);
-    };
+  const showOptionsHandler = () => {
+    if (!disabled) setShowOptions(!showOptions);
+  };
 
-    const selectContainerRef = useRef(null);
-    const clickOutsideHandler = () => setShowOptions(false);
-    useClickOutside(selectContainerRef, clickOutsideHandler);
+  const selectContainerRef = useRef(null);
+  const clickOutsideHandler = () => setShowOptions(false);
+  useClickOutside(selectContainerRef, clickOutsideHandler);
 
-    const updateSelectedOption = (option: SelectOption) => {
-      if (!option.disabled) {
-        setSelectedOption(option.value);
+  const updateSelectedOption = (option: SelectOption<T>) => {
+    if (!option.disabled) {
+      setSelectedOption(option.value);
 
-        if (onChange) {
-          onChange(option.value);
-        }
-
-        setShowOptions(false);
+      if (onChange) {
+        onChange(option.value);
       }
-    };
 
-    React.useEffect(() => {
-      setSelectedOption(value);
-    }, [isLive, value]);
+      setShowOptions(false);
+    }
+  };
 
-    return (
-      <div ref={selectContainerRef}>
-        <S.Select
-          role="listbox"
-          selectSize={selectSize}
-          isLive={isLive}
-          disabled={disabled}
-          onClick={showOptionsHandler}
-          onKeyDown={showOptionsHandler}
-          isThemeMode={isThemeMode}
-          ref={ref}
-          tabIndex={0}
-          {...props}
-        >
-          <S.SelectedOptionWrapper>
-            {isLive && <LiveIcon />}
-            <S.SelectedOption
-              role="option"
-              tabIndex={0}
-              isThemeMode={isThemeMode}
-            >
-              {options.find(
-                (option) => option.value === (defaultValue || selectedOption)
-              )?.label || placeholder}
-            </S.SelectedOption>
-          </S.SelectedOptionWrapper>
-          {showOptions && (
-            <S.OptionList>
-              {options?.map((option) => (
-                <S.Option
-                  value={option.value}
-                  key={option.value}
-                  disabled={option.disabled}
-                  onClick={() => updateSelectedOption(option)}
-                  tabIndex={0}
-                  role="option"
-                >
-                  {option.isLive && <LiveIcon />}
-                  {option.label}
-                </S.Option>
-              ))}
-            </S.OptionList>
-          )}
-          <DropdownArrowIcon isOpen={showOptions} />
-        </S.Select>
-      </div>
-    );
-  }
-);
+  return (
+    <div ref={selectContainerRef}>
+      <S.Select
+        role="listbox"
+        selectSize={selectSize}
+        disabled={disabled}
+        onClick={showOptionsHandler}
+        onKeyDown={showOptionsHandler}
+        isThemeMode={isThemeMode}
+        ref={ref}
+        tabIndex={0}
+        {...props}
+      >
+        <S.SelectedOptionWrapper>
+          <S.SelectedOption
+            role="option"
+            tabIndex={0}
+            isThemeMode={isThemeMode}
+          >
+            {options.find(
+              (option) => option.value === (defaultValue || selectedOption)
+            )?.label || placeholder}
+          </S.SelectedOption>
+        </S.SelectedOptionWrapper>
+        {showOptions && (
+          <S.OptionList>
+            {options?.map((option) => (
+              <S.Option
+                value={option.value.toString()}
+                key={option.value.toString()}
+                disabled={option.disabled}
+                onClick={() => updateSelectedOption(option)}
+                tabIndex={0}
+                role="option"
+              >
+                {option.label}
+              </S.Option>
+            ))}
+          </S.OptionList>
+        )}
+        <DropdownArrowIcon isOpen={showOptions} />
+      </S.Select>
+    </div>
+  );
+};
 
 Select.displayName = 'Select';
 
-export default Select;
+export default React.forwardRef(Select) as <T>(
+  props: SelectProps<T> & React.RefAttributes<HTMLUListElement>
+) => React.ReactElement;
diff --git a/frontend/src/components/common/Select/__tests__/Select.spec.tsx b/frontend/src/components/common/Select/__tests__/Select.spec.tsx
index f05d9e126..5d9a8a97f 100644
--- a/frontend/src/components/common/Select/__tests__/Select.spec.tsx
+++ b/frontend/src/components/common/Select/__tests__/Select.spec.tsx
@@ -1,7 +1,4 @@
-import Select, {
-  SelectOption,
-  SelectProps,
-} from 'components/common/Select/Select';
+import Select, { SelectProps } from 'components/common/Select/Select';
 import React from 'react';
 import { render } from 'lib/testHelpers';
 import { screen } from '@testing-library/react';
@@ -13,12 +10,12 @@ jest.mock('react-hook-form', () => ({
   }),
 }));
 
-const options: Array<SelectOption> = [
+const options = [
   { label: 'test-label1', value: 'test-value1', disabled: false },
   { label: 'test-label2', value: 'test-value2', disabled: true },
 ];
 
-const renderComponent = (props?: Partial<SelectProps>) =>
+const renderComponent = (props?: Partial<SelectProps<string>>) =>
   render(<Select name="test" {...props} />);
 
 describe('Custom Select', () => {
@@ -63,18 +60,4 @@ describe('Custom Select', () => {
       expect(getOption()).toHaveTextContent(normalOptionLabel);
     });
   });
-
-  describe('when non-live', () => {
-    it('there is not live icon', () => {
-      renderComponent({ isLive: false });
-      expect(screen.queryByTestId('liveIcon')).not.toBeInTheDocument();
-    });
-  });
-
-  describe('when live', () => {
-    it('there is live icon', () => {
-      render(<Select name="test" {...{ isLive: true }} />);
-      expect(screen.getByRole('listbox')).toBeInTheDocument();
-    });
-  });
 });
diff --git a/frontend/src/components/common/SlidingSidebar/SlidingSidebar.styled.ts b/frontend/src/components/common/SlidingSidebar/SlidingSidebar.styled.ts
index 4ccb4ae0b..ef33a386b 100644
--- a/frontend/src/components/common/SlidingSidebar/SlidingSidebar.styled.ts
+++ b/frontend/src/components/common/SlidingSidebar/SlidingSidebar.styled.ts
@@ -22,6 +22,26 @@ export const Wrapper = styled.div<{ $open?: boolean }>(
 `
 );
 
+export const HeaderText = styled.div`
+  ${({ theme }) => theme.heading?.base};
+  font-size: 24px;
+  line-height: 16px;
+`;
+
+export const Header = styled.div`
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  align-items: center;
+  padding: 20px;
+`;
+
+export const CloseIconButtonWrapper = styled.button`
+  background: transparent;
+  border: none;
+  cursor: pointer;
+`;
+
 export const Content = styled.div<{ $open?: boolean }>(
   ({ theme }) => `
   background-color: ${theme.default.backgroundColor};
diff --git a/frontend/src/components/common/SlidingSidebar/SlidingSidebar.tsx b/frontend/src/components/common/SlidingSidebar/SlidingSidebar.tsx
index 40ef062d5..7fab10845 100644
--- a/frontend/src/components/common/SlidingSidebar/SlidingSidebar.tsx
+++ b/frontend/src/components/common/SlidingSidebar/SlidingSidebar.tsx
@@ -1,6 +1,5 @@
 import React, { PropsWithChildren } from 'react';
-import Heading from 'components/common/heading/Heading.styled';
-import { Button } from 'components/common/Button/Button';
+import CloseCircleIcon from 'components/common/Icons/CloseCircleIcon';
 
 import * as S from './SlidingSidebar.styled';
 
@@ -18,12 +17,12 @@ const SlidingSidebar: React.FC<SlidingSidebarProps> = ({
 }) => {
   return (
     <S.Wrapper $open={open}>
-      <Heading level={3}>
-        <span>{title}</span>
-        <Button buttonSize="M" buttonType="primary" onClick={onClose}>
-          Close
-        </Button>
-      </Heading>
+      <S.Header>
+        <S.HeaderText>{title}</S.HeaderText>
+        <S.CloseIconButtonWrapper onClick={onClose} aria-label="edit">
+          <CloseCircleIcon />
+        </S.CloseIconButtonWrapper>
+      </S.Header>
       <S.Content>{children}</S.Content>
     </S.Wrapper>
   );
diff --git a/frontend/src/components/contexts/TopicMessagesContext.ts b/frontend/src/components/contexts/TopicMessagesContext.ts
deleted file mode 100644
index 3ca2ca655..000000000
--- a/frontend/src/components/contexts/TopicMessagesContext.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-import { SeekDirection } from 'generated-sources';
-
-export interface ContextProps {
-  seekDirection: SeekDirection;
-  changeSeekDirection(val: string): void;
-  isLive: boolean;
-}
-
-const TopicMessagesContext = React.createContext<ContextProps>(
-  {} as ContextProps
-);
-
-export default TopicMessagesContext;
diff --git a/frontend/src/lib/constants.ts b/frontend/src/lib/constants.ts
index 833ad2faf..102b79faa 100644
--- a/frontend/src/lib/constants.ts
+++ b/frontend/src/lib/constants.ts
@@ -1,4 +1,3 @@
-import { SelectOption } from 'components/common/Select/Select';
 import { ConfigurationParameters, ConsumerGroupState } from 'generated-sources';
 
 declare global {
@@ -75,7 +74,7 @@ export const QUERY_REFETCH_OFF_OPTIONS = {
 };
 
 // Cluster Form Constants
-export const AUTH_OPTIONS: SelectOption[] = [
+export const AUTH_OPTIONS = [
   { value: 'SASL/JAAS', label: 'SASL/JAAS' },
   { value: 'SASL/GSSAPI', label: 'SASL/GSSAPI' },
   { value: 'SASL/OAUTHBEARER', label: 'SASL/OAUTHBEARER' },
@@ -88,11 +87,11 @@ export const AUTH_OPTIONS: SelectOption[] = [
   { value: 'mTLS', label: 'mTLS' },
 ];
 
-export const SECURITY_PROTOCOL_OPTIONS: SelectOption[] = [
+export const SECURITY_PROTOCOL_OPTIONS = [
   { value: 'SASL_SSL', label: 'SASL_SSL' },
   { value: 'SASL_PLAINTEXT', label: 'SASL_PLAINTEXT' },
 ];
-export const METRICS_OPTIONS: SelectOption[] = [
+export const METRICS_OPTIONS = [
   { value: 'JMX', label: 'JMX' },
   { value: 'PROMETHEUS', label: 'PROMETHEUS' },
 ];
diff --git a/frontend/src/lib/hooks/api/topicMessages.tsx b/frontend/src/lib/hooks/api/topicMessages.tsx
index 886b2979c..cf22148ac 100644
--- a/frontend/src/lib/hooks/api/topicMessages.tsx
+++ b/frontend/src/lib/hooks/api/topicMessages.tsx
@@ -1,103 +1,118 @@
-import React from 'react';
+import React, { useCallback, useRef } from 'react';
 import { fetchEventSource } from '@microsoft/fetch-event-source';
 import { BASE_PARAMS, MESSAGES_PER_PAGE } from 'lib/constants';
-import { ClusterName } from 'redux/interfaces';
+import { ClusterName, TopicName } from 'redux/interfaces';
 import {
   GetSerdesRequest,
-  SeekDirection,
-  SeekType,
+  PollingMode,
   TopicMessage,
   TopicMessageConsuming,
   TopicMessageEvent,
   TopicMessageEventTypeEnum,
 } from 'generated-sources';
 import { showServerError } from 'lib/errorHandling';
-import toast from 'react-hot-toast';
-import { useQuery } from '@tanstack/react-query';
+import { useMutation, useQuery } from '@tanstack/react-query';
 import { messagesApiClient } from 'lib/api';
-import { StopLoading } from 'components/Topics/Topic/Messages/Messages.styled';
+import { useSearchParams } from 'react-router-dom';
+import { MessagesFilterKeys } from 'lib/hooks/useMessagesFilters';
+import { convertStrToPollingMode } from 'lib/hooks/filterUtils';
+import { useMessageFiltersStore } from 'lib/hooks/useMessageFiltersStore';
 
 interface UseTopicMessagesProps {
   clusterName: ClusterName;
-  topicName: string;
-  searchParams: URLSearchParams;
+  topicName: TopicName;
 }
 
-type ConsumingMode =
-  | 'live'
-  | 'oldest'
-  | 'newest'
-  | 'fromOffset' // from 900 -> 1000
-  | 'toOffset' // from 900 -> 800
-  | 'sinceTime' // from 10:15 -> 11:15
-  | 'untilTime'; // from 10:15 -> 9:15
-
 export const useTopicMessages = ({
   clusterName,
   topicName,
-  searchParams,
 }: UseTopicMessagesProps) => {
+  const [searchParams] = useSearchParams();
   const [messages, setMessages] = React.useState<TopicMessage[]>([]);
   const [phase, setPhase] = React.useState<string>();
-  const [meta, setMeta] = React.useState<TopicMessageConsuming>();
-  const [isFetching, setIsFetching] = React.useState<boolean>(false);
-  const abortController = new AbortController();
+  const [consumptionStats, setConsumptionStats] =
+    React.useState<TopicMessageConsuming>();
+  const [isFetching, setIsFetching] = React.useState(false);
+  const abortController = useRef(new AbortController());
+  const prevReqUrl = useRef<string>('');
 
   // get initial properties
-  const mode = searchParams.get('m') as ConsumingMode;
-  const limit = searchParams.get('perPage') || MESSAGES_PER_PAGE;
-  const seekTo = searchParams.get('seekTo') || '0-0';
+
+  const abortFetchData = useCallback(() => {
+    if (abortController.current.signal.aborted) return;
+
+    setIsFetching(false);
+    abortController.current.abort();
+    abortController.current = new AbortController();
+  }, []);
 
   React.useEffect(() => {
+    const mode = convertStrToPollingMode(
+      searchParams.get(MessagesFilterKeys.mode) || ''
+    );
+
     const fetchData = async () => {
       setIsFetching(true);
+
       const url = `${BASE_PARAMS.basePath}/api/clusters/${encodeURIComponent(
         clusterName
-      )}/topics/${topicName}/messages`;
+      )}/topics/${topicName}/messages/v2`;
+
       const requestParams = new URLSearchParams({
-        limit,
-        seekTo: seekTo.replaceAll('-', '::').replaceAll('.', ','),
-        q: searchParams.get('q') || '',
-        keySerde: searchParams.get('keySerde') || '',
-        valueSerde: searchParams.get('valueSerde') || '',
+        limit: searchParams.get(MessagesFilterKeys.limit) || MESSAGES_PER_PAGE,
+        mode: searchParams.get(MessagesFilterKeys.mode) || '',
+      });
+
+      [
+        MessagesFilterKeys.stringFilter,
+        MessagesFilterKeys.keySerde,
+        MessagesFilterKeys.smartFilterId,
+        MessagesFilterKeys.valueSerde,
+      ].forEach((item) => {
+        const value = searchParams.get(item);
+        if (value) {
+          requestParams.set(item, value);
+        }
       });
 
       switch (mode) {
-        case 'live':
-          requestParams.set('seekDirection', SeekDirection.TAILING);
-          requestParams.set('seekType', SeekType.LATEST);
+        case PollingMode.TO_TIMESTAMP:
+        case PollingMode.FROM_TIMESTAMP:
+          requestParams.set(
+            MessagesFilterKeys.timestamp,
+            searchParams.get(MessagesFilterKeys.timestamp) || '0'
+          );
           break;
-        case 'oldest':
-          requestParams.set('seekType', SeekType.BEGINNING);
-          requestParams.set('seekDirection', SeekDirection.FORWARD);
-          break;
-        case 'newest':
-          requestParams.set('seekType', SeekType.LATEST);
-          requestParams.set('seekDirection', SeekDirection.BACKWARD);
-          break;
-        case 'fromOffset':
-          requestParams.set('seekType', SeekType.OFFSET);
-          requestParams.set('seekDirection', SeekDirection.FORWARD);
-          break;
-        case 'toOffset':
-          requestParams.set('seekType', SeekType.OFFSET);
-          requestParams.set('seekDirection', SeekDirection.BACKWARD);
-          break;
-        case 'sinceTime':
-          requestParams.set('seekType', SeekType.TIMESTAMP);
-          requestParams.set('seekDirection', SeekDirection.FORWARD);
-          break;
-        case 'untilTime':
-          requestParams.set('seekType', SeekType.TIMESTAMP);
-          requestParams.set('seekDirection', SeekDirection.BACKWARD);
+        case PollingMode.TO_OFFSET:
+        case PollingMode.FROM_OFFSET:
+          requestParams.set(
+            MessagesFilterKeys.offset,
+            searchParams.get(MessagesFilterKeys.offset) || '0'
+          );
           break;
         default:
-          break;
       }
 
+      searchParams.getAll(MessagesFilterKeys.partitions).forEach((value) => {
+        requestParams.append(MessagesFilterKeys.partitions, value);
+      });
+
+      const { nextCursor, setNextCursor } = useMessageFiltersStore.getState();
+
+      const tempCompareUrl = new URLSearchParams(requestParams);
+      tempCompareUrl.delete(MessagesFilterKeys.cursor);
+
+      const tempToString = tempCompareUrl.toString();
+
+      // filters stay the say and we have cursor set cursor
+      if (nextCursor && tempToString === prevReqUrl.current) {
+        requestParams.set(MessagesFilterKeys.cursor, nextCursor);
+      }
+
+      prevReqUrl.current = tempToString;
       await fetchEventSource(`${url}?${requestParams.toString()}`, {
         method: 'GET',
-        signal: abortController.signal,
+        signal: abortController.current.signal,
         openWhenHidden: true,
         async onopen(response) {
           const { ok, status } = response;
@@ -110,13 +125,17 @@ export const useTopicMessages = ({
         },
         onmessage(event) {
           const parsedData: TopicMessageEvent = JSON.parse(event.data);
-          const { message, consuming } = parsedData;
+          const { message, consuming, cursor } = parsedData;
+
+          if (useMessageFiltersStore.getState().nextCursor !== cursor?.id) {
+            setNextCursor(cursor?.id || undefined);
+          }
 
           switch (parsedData.type) {
             case TopicMessageEventTypeEnum.MESSAGE:
               if (message) {
                 setMessages((prevMessages) => {
-                  if (mode === 'live') {
+                  if (mode === PollingMode.TAILING) {
                     return [message, ...prevMessages];
                   }
                   return [...prevMessages, message];
@@ -127,59 +146,36 @@ export const useTopicMessages = ({
               if (parsedData.phase?.name) setPhase(parsedData.phase.name);
               break;
             case TopicMessageEventTypeEnum.CONSUMING:
-              if (consuming) setMeta(consuming);
+              if (consuming) setConsumptionStats(consuming);
               break;
             default:
           }
         },
         onclose() {
           setIsFetching(false);
+          abortController.current = new AbortController();
         },
         onerror(err) {
+          setNextCursor(undefined);
           setIsFetching(false);
+          abortController.current = new AbortController();
           showServerError(err);
         },
       });
     };
-    const abortFetchData = () => {
-      setIsFetching(false);
-      abortController.abort();
-    };
 
-    if (mode === 'live') {
-      toast.promise(
-        fetchData(),
-        {
-          loading: (
-            <>
-              <div>Consuming messages...</div>
-              &nbsp;
-              <StopLoading onClick={abortFetchData}>Abort</StopLoading>
-            </>
-          ),
-          success: 'Cancelled',
-          error: 'Something went wrong. Please try again.',
-        },
-        {
-          id: 'messages',
-          position: 'top-center',
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          // @ts-ignore - missing type for icon
-          success: { duration: 10, icon: false },
-        }
-      );
-    } else {
-      fetchData();
-    }
+    abortFetchData();
+    fetchData();
 
     return abortFetchData;
-  }, [searchParams]);
+  }, [searchParams, abortFetchData]);
 
   return {
     phase,
     messages,
-    meta,
+    consumptionStats,
     isFetching,
+    abortFetchData,
   };
 };
 
@@ -196,3 +192,19 @@ export function useSerdes(props: GetSerdesRequest) {
     }
   );
 }
+
+export function useRegisterSmartFilter({
+  clusterName,
+  topicName,
+}: {
+  clusterName: ClusterName;
+  topicName: TopicName;
+}) {
+  return useMutation((payload: { filterCode: string }) => {
+    return messagesApiClient.registerFilter({
+      clusterName,
+      topicName,
+      messageFilterRegistration: { filterCode: payload.filterCode },
+    });
+  });
+}
diff --git a/frontend/src/lib/hooks/api/topics.ts b/frontend/src/lib/hooks/api/topics.ts
index 00d08bc66..3f68a1709 100644
--- a/frontend/src/lib/hooks/api/topics.ts
+++ b/frontend/src/lib/hooks/api/topics.ts
@@ -318,6 +318,7 @@ export function useAnalyzeTopic(props: GetTopicDetailsRequest) {
     },
   });
 }
+
 export function useCancelTopicAnalysis(props: GetTopicDetailsRequest) {
   const client = useQueryClient();
   return useMutation(() => api.cancelTopicAnalysis(props), {
diff --git a/frontend/src/lib/hooks/filterUtils.ts b/frontend/src/lib/hooks/filterUtils.ts
new file mode 100644
index 000000000..87482992e
--- /dev/null
+++ b/frontend/src/lib/hooks/filterUtils.ts
@@ -0,0 +1,17 @@
+import { PollingMode } from 'generated-sources';
+
+export const ModeOptions = [
+  { value: PollingMode.LATEST, label: 'Oldest' },
+  { value: PollingMode.EARLIEST, label: 'Newest' },
+  { value: PollingMode.TAILING, label: 'Live' },
+  { value: PollingMode.FROM_OFFSET, label: 'From offset' },
+  { value: PollingMode.TO_OFFSET, label: 'To offset' },
+  { value: PollingMode.FROM_TIMESTAMP, label: 'Since time' },
+  { value: PollingMode.TO_TIMESTAMP, label: 'To time' },
+];
+
+export function convertStrToPollingMode(
+  value: string | number
+): PollingMode | undefined {
+  return PollingMode[value.toString() as keyof typeof PollingMode];
+}
diff --git a/frontend/src/lib/hooks/useMessageFiltersStore.ts b/frontend/src/lib/hooks/useMessageFiltersStore.ts
index 8397d41d2..fae45589b 100644
--- a/frontend/src/lib/hooks/useMessageFiltersStore.ts
+++ b/frontend/src/lib/hooks/useMessageFiltersStore.ts
@@ -2,40 +2,81 @@ import { LOCAL_STORAGE_KEY_PREFIX } from 'lib/constants';
 import create from 'zustand';
 import { persist } from 'zustand/middleware';
 
-interface AdvancedFilter {
-  name: string;
+export type AdvancedFiltersType = Record<string, AdvancedFilter>;
+
+export interface AdvancedFilter {
+  id: string;
   value: string;
+  filterCode: string;
 }
 
 interface MessageFiltersState {
-  filters: AdvancedFilter[];
-  activeFilter?: AdvancedFilter;
+  filters: AdvancedFiltersType;
+  notPersistedFilter: AdvancedFilter | undefined;
   save: (filter: AdvancedFilter) => void;
-  apply: (filter: AdvancedFilter) => void;
-  remove: (name: string) => void;
-  update: (name: string, filter: AdvancedFilter) => void;
+  nextCursor: string | undefined;
+  setNextCursor: (str: string | undefined) => void;
+  replace: (filterId: string, filter: AdvancedFilter) => void;
+  commit: (filter: AdvancedFilter | undefined) => void;
+  remove: (id: string) => void;
+  removeAll: () => void;
 }
 
+export const selectFilter =
+  (id?: string) =>
+  ({ filters, notPersistedFilter }: MessageFiltersState) => {
+    if (!id) return undefined;
+
+    if (filters[id]) return filters[id];
+
+    if (notPersistedFilter?.id === id) return notPersistedFilter;
+
+    return undefined;
+  };
+
 export const useMessageFiltersStore = create<MessageFiltersState>()(
   persist(
     (set) => ({
-      filters: [],
+      filters: {},
+      nextCursor: undefined,
+      notPersistedFilter: undefined,
       save: (filter) =>
         set((state) => ({
-          filters: [...state.filters, filter],
-        })),
-      apply: (filter) => set(() => ({ activeFilter: filter })),
-      remove: (name) =>
-        set((state) => ({
-          filters: state.filters.filter((f) => f.name !== name),
+          filters: { ...state.filters, [filter.id]: filter },
         })),
-      update: (name, filter) =>
-        set((state) => ({
-          filters: state.filters.map((f) => (f.name === name ? filter : f)),
+      replace: (filterId, filter) =>
+        set((state) => {
+          const newFilters = { ...state.filters };
+
+          if (filterId !== filter.id) {
+            delete newFilters[filterId];
+          }
+
+          newFilters[filter.id] = filter;
+
+          return { filters: newFilters };
+        }),
+      commit: (filter) =>
+        set(() => ({
+          notPersistedFilter: filter,
         })),
+      remove: (id) =>
+        set((state) => {
+          const filters = { ...state.filters };
+          delete filters[id];
+
+          if (state.notPersistedFilter?.id === id) {
+            return { filters, notPersistedFilter: undefined };
+          }
+
+          return { filters };
+        }),
+      removeAll: () => set(() => ({ filters: {} })),
+      setNextCursor: (cursor) => set(() => ({ nextCursor: cursor })),
     }),
     {
       name: `${LOCAL_STORAGE_KEY_PREFIX}-message-filters`,
+      partialize: (state) => ({ filters: state.filters }),
     }
   )
 );
diff --git a/frontend/src/lib/hooks/useMessagesFilters.ts b/frontend/src/lib/hooks/useMessagesFilters.ts
new file mode 100644
index 000000000..fee0b4fdf
--- /dev/null
+++ b/frontend/src/lib/hooks/useMessagesFilters.ts
@@ -0,0 +1,249 @@
+import { useSearchParams } from 'react-router-dom';
+import { PollingMode } from 'generated-sources';
+import { useEffect } from 'react';
+import { Option } from 'react-multi-select-component';
+import { ObjectValues } from 'lib/types';
+
+import { convertStrToPollingMode, ModeOptions } from './filterUtils';
+import {
+  AdvancedFilter,
+  selectFilter,
+  useMessageFiltersStore,
+} from './useMessageFiltersStore';
+
+/**
+ * @description !! Note !!
+ * Key value should match
+ * */
+export const MessagesFilterKeys = {
+  mode: 'mode',
+  timestamp: 'timestamp',
+  keySerde: 'keySerde',
+  valueSerde: 'valueSerde',
+  limit: 'limit',
+  offset: 'offset',
+  stringFilter: 'stringFilter',
+  partitions: 'partitions',
+  smartFilterId: 'smartFilterId',
+  activeFilterId: 'activeFilterId',
+  activeFilterNPId: 'activeFilterNPId', // not persisted filter name to indicate the refresh
+  cursor: 'cursor',
+  r: 'r', // used tp force refresh of the data
+} as const;
+
+export type MessagesFilterKeysTypes = ObjectValues<typeof MessagesFilterKeys>;
+
+const PER_PAGE = 100;
+
+const defaultModeValue = ModeOptions[0].value;
+
+export function useRefreshData(initSearchParams?: URLSearchParams) {
+  const [, setSearchParams] = useSearchParams(initSearchParams);
+  return () => {
+    setSearchParams((params) => {
+      if (params.get(MessagesFilterKeys.r)) {
+        params.delete(MessagesFilterKeys.r);
+      } else {
+        params.set(MessagesFilterKeys.r, 'r');
+      }
+
+      return params;
+    });
+  };
+}
+
+export function useMessagesFilters() {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const refreshData = useRefreshData(searchParams);
+
+  useEffect(() => {
+    setSearchParams((params) => {
+      params.set(MessagesFilterKeys.limit, PER_PAGE.toString());
+
+      if (!params.get(MessagesFilterKeys.mode)) {
+        params.set(MessagesFilterKeys.mode, defaultModeValue);
+      }
+
+      if (params.get(MessagesFilterKeys.activeFilterNPId)) {
+        params.delete(MessagesFilterKeys.activeFilterNPId);
+        params.delete(MessagesFilterKeys.smartFilterId);
+      }
+      return params;
+    });
+  }, []);
+
+  /**
+   * @description
+   * Params getter
+   * */
+  const mode =
+    convertStrToPollingMode(searchParams.get(MessagesFilterKeys.mode) || '') ||
+    defaultModeValue;
+
+  const dateParams = searchParams.get(MessagesFilterKeys.timestamp);
+
+  const date = dateParams ? new Date(parseFloat(dateParams)) : null;
+
+  const keySerde = searchParams.get(MessagesFilterKeys.keySerde) || undefined;
+  const valueSerde =
+    searchParams.get(MessagesFilterKeys.valueSerde) || undefined;
+
+  const offset = searchParams.get(MessagesFilterKeys.offset) || undefined;
+
+  const search = searchParams.get(MessagesFilterKeys.stringFilter) || '';
+
+  const partitions = searchParams.getAll(MessagesFilterKeys.partitions);
+
+  const smartFilterId =
+    searchParams.get(MessagesFilterKeys.activeFilterId) ||
+    searchParams.get(MessagesFilterKeys.activeFilterNPId) ||
+    '';
+
+  const smartFilter = useMessageFiltersStore(selectFilter(smartFilterId));
+
+  /**
+   * @description
+   * Params setters
+   * */
+  const setMode = (newMode: PollingMode) => {
+    setSearchParams((params) => {
+      params.set(MessagesFilterKeys.mode, newMode);
+
+      params.delete(MessagesFilterKeys.offset);
+      params.delete(MessagesFilterKeys.timestamp);
+      return params;
+    });
+  };
+
+  const setTimeStamp = (newDate: Date | null) => {
+    if (newDate === null) {
+      setSearchParams((params) => {
+        params.delete(MessagesFilterKeys.timestamp);
+        return params;
+      });
+      return;
+    }
+
+    setSearchParams((params) => {
+      params.set(MessagesFilterKeys.timestamp, newDate.getTime().toString());
+      return params;
+    });
+  };
+
+  const setKeySerde = (newKeySerde: string) => {
+    setSearchParams((params) => {
+      params.set(MessagesFilterKeys.keySerde, newKeySerde);
+      return params;
+    });
+  };
+
+  const setValueSerde = (newValueSerde: string) => {
+    setSearchParams((params) => {
+      params.set(MessagesFilterKeys.valueSerde, newValueSerde);
+      return params;
+    });
+  };
+
+  const setOffsetValue = (newOffsetValue: string) => {
+    setSearchParams((params) => {
+      params.set(MessagesFilterKeys.offset, newOffsetValue);
+      return params;
+    });
+  };
+
+  const setSearch = (value: string) => {
+    setSearchParams((params) => {
+      if (value) {
+        params.set(MessagesFilterKeys.stringFilter, value);
+      } else {
+        params.delete(MessagesFilterKeys.stringFilter);
+      }
+      return params;
+    });
+  };
+
+  const setPartition = (values: Option[]) => {
+    setSearchParams((params) => {
+      params.delete(MessagesFilterKeys.partitions);
+
+      values.forEach((option) => {
+        params.append(MessagesFilterKeys.partitions, option.value);
+      });
+
+      return params;
+    });
+  };
+
+  const setSmartFilter = (
+    newFilter: AdvancedFilter | null,
+    persisted = true
+  ) => {
+    if (newFilter === null) {
+      setSearchParams((params) => {
+        params.delete(MessagesFilterKeys.smartFilterId);
+        params.delete(MessagesFilterKeys.activeFilterId);
+        params.delete(MessagesFilterKeys.activeFilterNPId);
+        return params;
+      });
+      return;
+    }
+
+    const { id } = newFilter;
+    // callback should always capture the latest states not rely on rendering
+
+    const filter = selectFilter(newFilter.id)(
+      useMessageFiltersStore.getState()
+    );
+
+    // setting something that is not in the state
+    if (!filter) return;
+
+    setSearchParams((params) => {
+      params.set(MessagesFilterKeys.smartFilterId, filter.filterCode);
+      params.set(
+        persisted
+          ? MessagesFilterKeys.activeFilterId
+          : MessagesFilterKeys.activeFilterNPId,
+        id
+      );
+      return params;
+    });
+  };
+
+  return {
+    mode,
+    setMode,
+    date,
+    setTimeStamp,
+    keySerde,
+    setKeySerde,
+    valueSerde,
+    setValueSerde,
+    offset,
+    setOffsetValue,
+    search,
+    setSearch,
+    partitions,
+    setPartition,
+    smartFilter,
+    setSmartFilter,
+    refreshData,
+  };
+}
+
+export function useIsMessagesSmartFilterPersisted(
+  initSearchParams?: URLSearchParams
+) {
+  const [searchParams] = useSearchParams(initSearchParams);
+
+  return !!searchParams.get(MessagesFilterKeys.activeFilterId);
+}
+
+export function useIsLiveMode(initSearchParams?: URLSearchParams) {
+  const [searchParams] = useSearchParams(initSearchParams);
+
+  return (
+    convertStrToPollingMode(searchParams.get(MessagesFilterKeys.mode) || '') ===
+    PollingMode.TAILING
+  );
+}
diff --git a/frontend/src/lib/types.ts b/frontend/src/lib/types.ts
new file mode 100644
index 000000000..7bc715840
--- /dev/null
+++ b/frontend/src/lib/types.ts
@@ -0,0 +1,4 @@
+export type ObjectValues<T extends Record<string, unknown>> = T[keyof T];
+
+export type WithPartialKey<T, K extends keyof T> = Omit<T, K> &
+  Partial<Record<K, Partial<T[K]>>>;
diff --git a/frontend/src/redux/reducers/index.ts b/frontend/src/redux/reducers/index.ts
index aa5cb69cf..6385e0710 100644
--- a/frontend/src/redux/reducers/index.ts
+++ b/frontend/src/redux/reducers/index.ts
@@ -1,10 +1,8 @@
 import { combineReducers } from '@reduxjs/toolkit';
 import loader from 'redux/reducers/loader/loaderSlice';
 import schemas from 'redux/reducers/schemas/schemasSlice';
-import topicMessages from 'redux/reducers/topicMessages/topicMessagesSlice';
 
 export default combineReducers({
   loader,
-  topicMessages,
   schemas,
 });
diff --git a/frontend/src/redux/reducers/topicMessages/__test__/fixtures.ts b/frontend/src/redux/reducers/topicMessages/__test__/fixtures.ts
deleted file mode 100644
index 8f8bce2c2..000000000
--- a/frontend/src/redux/reducers/topicMessages/__test__/fixtures.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import {
-  TopicMessage,
-  TopicMessageConsuming,
-  TopicMessageTimestampTypeEnum,
-} from 'generated-sources';
-
-export const topicMessagePayload: TopicMessage = {
-  partition: 29,
-  offset: 14,
-  timestamp: new Date('2021-07-21T23:25:14.865Z'),
-  timestampType: TopicMessageTimestampTypeEnum.CREATE_TIME,
-  key: 'schema-registry',
-  headers: {},
-  content:
-    '{"host":"schemaregistry1","port":8085,"master_eligibility":true,"scheme":"http","version":1}',
-};
-
-export const topicMessagePayloadV2: TopicMessage = {
-  ...topicMessagePayload,
-  partition: 28,
-  offset: 88,
-};
-
-export const topicMessagesMetaPayload: TopicMessageConsuming = {
-  bytesConsumed: 1830,
-  elapsedMs: 440,
-  messagesConsumed: 2301,
-  isCancelled: false,
-};
diff --git a/frontend/src/redux/reducers/topicMessages/__test__/reducer.spec.ts b/frontend/src/redux/reducers/topicMessages/__test__/reducer.spec.ts
deleted file mode 100644
index b9fa4cd4e..000000000
--- a/frontend/src/redux/reducers/topicMessages/__test__/reducer.spec.ts
+++ /dev/null
@@ -1,79 +0,0 @@
-import reducer, {
-  addTopicMessage,
-  resetTopicMessages,
-  updateTopicMessagesMeta,
-  updateTopicMessagesPhase,
-} from 'redux/reducers/topicMessages/topicMessagesSlice';
-
-import {
-  topicMessagePayload,
-  topicMessagePayloadV2,
-  topicMessagesMetaPayload,
-} from './fixtures';
-
-describe('TopicMessages reducer', () => {
-  it('Adds new message', () => {
-    const state = reducer(
-      undefined,
-      addTopicMessage({ message: topicMessagePayload })
-    );
-    expect(state.messages.length).toEqual(1);
-  });
-
-  it('Adds new message with live tailing one', () => {
-    const state = reducer(
-      undefined,
-      addTopicMessage({ message: topicMessagePayload })
-    );
-    const modifiedState = reducer(
-      state,
-      addTopicMessage({ message: topicMessagePayloadV2, prepend: true })
-    );
-    expect(modifiedState.messages.length).toEqual(2);
-    expect(modifiedState.messages).toEqual([
-      topicMessagePayloadV2,
-      topicMessagePayload,
-    ]);
-  });
-
-  it('Adds new message with live tailing off', () => {
-    const state = reducer(
-      undefined,
-      addTopicMessage({ message: topicMessagePayload })
-    );
-    const modifiedState = reducer(
-      state,
-      addTopicMessage({ message: topicMessagePayloadV2 })
-    );
-    expect(modifiedState.messages.length).toEqual(2);
-    expect(modifiedState.messages).toEqual([
-      topicMessagePayload,
-      topicMessagePayloadV2,
-    ]);
-  });
-
-  it('reset messages', () => {
-    const state = reducer(
-      undefined,
-      addTopicMessage({ message: topicMessagePayload })
-    );
-    expect(state.messages.length).toEqual(1);
-
-    const newState = reducer(state, resetTopicMessages());
-    expect(newState.messages.length).toEqual(0);
-  });
-
-  it('Updates Topic Messages Phase', () => {
-    const phase = 'Polling';
-
-    const state = reducer(undefined, updateTopicMessagesPhase(phase));
-    expect(state.phase).toEqual(phase);
-  });
-  it('Updates Topic Messages Meta', () => {
-    const state = reducer(
-      undefined,
-      updateTopicMessagesMeta(topicMessagesMetaPayload)
-    );
-    expect(state.meta).toEqual(topicMessagesMetaPayload);
-  });
-});
diff --git a/frontend/src/redux/reducers/topicMessages/__test__/selectors.spec.ts b/frontend/src/redux/reducers/topicMessages/__test__/selectors.spec.ts
deleted file mode 100644
index d324a2d5e..000000000
--- a/frontend/src/redux/reducers/topicMessages/__test__/selectors.spec.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-import { store } from 'redux/store';
-import * as selectors from 'redux/reducers/topicMessages/selectors';
-import {
-  initialState,
-  addTopicMessage,
-  updateTopicMessagesMeta,
-  updateTopicMessagesPhase,
-} from 'redux/reducers/topicMessages/topicMessagesSlice';
-
-import { topicMessagePayload, topicMessagesMetaPayload } from './fixtures';
-
-const newTopicMessagePayload = {
-  ...topicMessagePayload,
-  timestamp: topicMessagePayload.timestamp.toString(),
-};
-describe('TopicMessages selectors', () => {
-  describe('Initial state', () => {
-    it('returns empty message array', () => {
-      expect(selectors.getTopicMessges(store.getState())).toEqual([]);
-    });
-
-    it('returns undefined phase', () => {
-      expect(selectors.getTopicMessgesPhase(store.getState())).toBeUndefined();
-    });
-
-    it('returns initial vesrion of meta', () => {
-      expect(selectors.getTopicMessgesMeta(store.getState())).toEqual(
-        initialState.meta
-      );
-    });
-  });
-
-  describe('state', () => {
-    beforeAll(() => {
-      store.dispatch(
-        addTopicMessage({
-          message: newTopicMessagePayload,
-        })
-      );
-      store.dispatch(updateTopicMessagesPhase('consuming'));
-      store.dispatch(updateTopicMessagesMeta(topicMessagesMetaPayload));
-    });
-
-    it('returns messages', () => {
-      expect(selectors.getTopicMessges(store.getState())).toEqual([
-        newTopicMessagePayload,
-      ]);
-    });
-
-    it('returns phase', () => {
-      expect(selectors.getTopicMessgesPhase(store.getState())).toEqual(
-        'consuming'
-      );
-    });
-
-    it('returns ordered versions of schema', () => {
-      expect(selectors.getTopicMessgesMeta(store.getState())).toEqual(
-        topicMessagesMetaPayload
-      );
-    });
-  });
-});
diff --git a/frontend/src/redux/reducers/topicMessages/selectors.ts b/frontend/src/redux/reducers/topicMessages/selectors.ts
deleted file mode 100644
index b2636cdf2..000000000
--- a/frontend/src/redux/reducers/topicMessages/selectors.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { createSelector } from '@reduxjs/toolkit';
-import { RootState, TopicMessagesState } from 'redux/interfaces';
-
-const topicMessagesState = ({ topicMessages }: RootState): TopicMessagesState =>
-  topicMessages;
-
-export const getTopicMessges = createSelector(
-  topicMessagesState,
-  ({ messages }) => messages
-);
-
-export const getTopicMessgesPhase = createSelector(
-  topicMessagesState,
-  ({ phase }) => phase
-);
-
-export const getTopicMessgesMeta = createSelector(
-  topicMessagesState,
-  ({ meta }) => meta
-);
-
-export const getIsTopicMessagesFetching = createSelector(
-  topicMessagesState,
-  ({ isFetching }) => isFetching
-);
-
-export const getIsTopicMessagesType = createSelector(
-  topicMessagesState,
-  ({ messageEventType }) => messageEventType
-);
diff --git a/frontend/src/redux/reducers/topicMessages/topicMessagesSlice.ts b/frontend/src/redux/reducers/topicMessages/topicMessagesSlice.ts
deleted file mode 100644
index 530a37811..000000000
--- a/frontend/src/redux/reducers/topicMessages/topicMessagesSlice.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-import { createSlice } from '@reduxjs/toolkit';
-import { TopicMessagesState } from 'redux/interfaces';
-import { TopicMessage } from 'generated-sources';
-
-export const initialState: TopicMessagesState = {
-  messages: [],
-  meta: {
-    bytesConsumed: 0,
-    elapsedMs: 0,
-    messagesConsumed: 0,
-    isCancelled: false,
-  },
-  messageEventType: '',
-  isFetching: false,
-};
-
-const topicMessagesSlice = createSlice({
-  name: 'topicMessages',
-  initialState,
-  reducers: {
-    addTopicMessage: (state, action) => {
-      const messages: TopicMessage[] = action.payload.prepend
-        ? [action.payload.message, ...state.messages]
-        : [...state.messages, action.payload.message];
-
-      return {
-        ...state,
-        messages,
-      };
-    },
-    resetTopicMessages: () => initialState,
-    updateTopicMessagesPhase: (state, action) => {
-      state.phase = action.payload;
-    },
-    updateTopicMessagesMeta: (state, action) => {
-      state.meta = action.payload;
-    },
-    setTopicMessagesFetchingStatus: (state, action) => {
-      state.isFetching = action.payload;
-    },
-
-    setMessageEventType: (state, action) => {
-      state.messageEventType = action.payload;
-    },
-  },
-});
-
-export const {
-  addTopicMessage,
-  resetTopicMessages,
-  updateTopicMessagesPhase,
-  updateTopicMessagesMeta,
-  setTopicMessagesFetchingStatus,
-  setMessageEventType,
-} = topicMessagesSlice.actions;
-
-export default topicMessagesSlice.reducer;