diff --git a/web/src/components/layout/Breadcrumbs/BackButton.tsx b/web/src/components/layout/Breadcrumbs/BackButton.tsx
index 029ec104f..41bf29035 100644
--- a/web/src/components/layout/Breadcrumbs/BackButton.tsx
+++ b/web/src/components/layout/Breadcrumbs/BackButton.tsx
@@ -1,29 +1,32 @@
 import { usePrevSearch } from '@/common/prev-search-store';
 import type { FunctionComponent } from '@/common/types';
 import { Link, useRouter } from '@tanstack/react-router';
+import { FC } from 'react';
+
+export const BackButtonIcon: FC = () => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30' fill='none'>
+      <path
+        fillRule='evenodd'
+        clipRule='evenodd'
+        d='M19.0607 7.93934C19.6464 8.52513 19.6464 9.47487 19.0607 10.0607L14.1213 15L19.0607 19.9393C19.6464 20.5251 19.6464 21.4749 19.0607 22.0607C18.4749 22.6464 17.5251 22.6464 16.9393 22.0607L10.9393 16.0607C10.3536 15.4749 10.3536 14.5251 10.9393 13.9393L16.9393 7.93934C17.5251 7.35355 18.4749 7.35355 19.0607 7.93934Z'
+        fill='#7833B3'
+      />
+    </svg>
+  );
+};
 
 const BackButton = (): FunctionComponent => {
   const { latestLocation } = useRouter();
   const prevSearch = usePrevSearch();
   const links = latestLocation.pathname.split('/').filter((crumb: string) => crumb !== '');
 
+  if (links.length <= 1) return <></>;
+
   return (
-    <>
-      {links.length > 1 ? (
-        <Link search={prevSearch} to='../' preload='intent'>
-          <svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30' fill='none'>
-            <path
-              fillRule='evenodd'
-              clipRule='evenodd'
-              d='M19.0607 7.93934C19.6464 8.52513 19.6464 9.47487 19.0607 10.0607L14.1213 15L19.0607 19.9393C19.6464 20.5251 19.6464 21.4749 19.0607 22.0607C18.4749 22.6464 17.5251 22.6464 16.9393 22.0607L10.9393 16.0607C10.3536 15.4749 10.3536 14.5251 10.9393 13.9393L16.9393 7.93934C17.5251 7.35355 18.4749 7.35355 19.0607 7.93934Z'
-              fill='#7833B3'
-            />
-          </svg>
-        </Link>
-      ) : (
-        ''
-      )}
-    </>
+    <Link title='Go back' search={prevSearch} to='../' preload='intent'>
+      <BackButtonIcon />
+    </Link>
   );
 };
 
diff --git a/web/src/components/ui/badge.tsx b/web/src/components/ui/badge.tsx
index 8484f6dcf..eaab177ba 100644
--- a/web/src/components/ui/badge.tsx
+++ b/web/src/components/ui/badge.tsx
@@ -1,8 +1,8 @@
-import { cva, type VariantProps } from 'class-variance-authority';
-import type * as React from 'react';
 import type { FunctionComponent } from '@/common/types';
 import { cn } from '@/lib/utils';
 import { XMarkIcon } from '@heroicons/react/24/outline';
+import { cva, type VariantProps } from 'class-variance-authority';
+import type * as React from 'react';
 
 const badgeVariants = cva(
   'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
@@ -10,10 +10,11 @@ const badgeVariants = cva(
     variants: {
       variant: {
         default: 'border-transparent bg-primary text-primary-foreground',
-        secondary: 'border border-input bg-background hover:bg-purple-50 text-purple-900 border-purple-900 hover:text-accent-foreground',
+        secondary:
+          'border border-input bg-background hover:bg-purple-50 text-purple-900 border-purple-900 hover:text-accent-foreground',
         destructive: 'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
         outline:
-        'border border-input bg-purple-100 hover:bg-purple-50 text-purple-900 border-purple-900 hover:text-accent-foreground',
+          'border border-input bg-purple-100 hover:bg-purple-50 text-purple-900 border-purple-900 hover:text-accent-foreground',
       },
     },
     defaultVariants: {
@@ -37,11 +38,11 @@ function FilterBadge({ label, onClear }: FilterBadgeProps): FunctionComponent {
   return (
     <Badge className='bg-purple-50 text-purple-600 font-medium hover:bg-purple-100 py-2 text-sm gap-2'>
       <span>{label}</span>
-      <button onClick={onClear} type='button'>
+      <button title='Remove filter' onClick={onClear}>
         <XMarkIcon className='w-4' />
       </button>
     </Badge>
   );
 }
 
-export { Badge, FilterBadge, badgeVariants };
+export { Badge, badgeVariants, FilterBadge };
diff --git a/web/src/features/filtering/components/ActiveFilters.tsx b/web/src/features/filtering/components/ActiveFilters.tsx
new file mode 100644
index 000000000..753772c1f
--- /dev/null
+++ b/web/src/features/filtering/components/ActiveFilters.tsx
@@ -0,0 +1,69 @@
+import { FilterBadge } from '@/components/ui/badge';
+import { useNavigate } from '@tanstack/react-router';
+import { FC, useCallback } from 'react';
+import { FILTER_KEY, FILTER_LABEL } from '../filtering-enums';
+
+interface ActiveFilterProps {
+  filterId: string;
+  value: string;
+  isArray?: boolean;
+}
+
+type SearchParams = {
+  [key: string]: any;
+};
+
+const HIDDEN_FILTERS = [FILTER_KEY.PageSize, FILTER_KEY.PageNumber];
+const FILTER_LABELS = new Map<string, string>([
+  [FILTER_KEY.MonitoringObserverStatus, FILTER_LABEL.MonitoringObserverStatus],
+  [FILTER_KEY.MonitoringObserverTags, FILTER_LABEL.MonitoringObserverTags],
+]);
+
+const ActiveFilter: FC<ActiveFilterProps> = ({ filterId, value, isArray }) => {
+  const label = FILTER_LABELS.get(filterId) ?? filterId;
+
+  const navigate = useNavigate();
+  const onClearFilter = useCallback(
+    (filter: string, value?: string) => () => {
+      if (!isArray) {
+        return navigate({ search: (prev) => ({ ...prev, [filter]: undefined }) });
+      }
+      return navigate({
+        search: (prev: SearchParams) => ({
+          ...prev,
+          [filter]: prev[filter]?.filter((item: string) => item !== value), // Remove the value from the array
+        }),
+      });
+    },
+    [navigate]
+  );
+  return <FilterBadge label={`${label}: ${value}`} onClear={onClearFilter(filterId, value)} />;
+};
+
+interface ActiveFiltersProps {
+  queryParams: any;
+}
+
+export const ActiveFilters: FC<ActiveFiltersProps> = ({ queryParams }) => {
+  return (
+    <div className='flex flex-wrap gap-2 col-span-full'>
+      {Object.keys(queryParams).map((filterId) => {
+        let key = '';
+        const value = queryParams[filterId];
+        const isArray = Array.isArray(value);
+
+        if (HIDDEN_FILTERS.includes(filterId)) return;
+
+        if (!isArray) {
+          key = `active-filter-${filterId}`;
+          return <ActiveFilter key={key} filterId={filterId} value={value} />;
+        }
+        return value.map((item) => {
+          key = `active-filter-${filterId}-${item}`;
+
+          return <ActiveFilter key={key} filterId={filterId} value={item as string} isArray />;
+        });
+      })}
+    </div>
+  );
+};
diff --git a/web/src/features/filtering/components/FilteringContainer.tsx b/web/src/features/filtering/components/FilteringContainer.tsx
new file mode 100644
index 000000000..d6487c581
--- /dev/null
+++ b/web/src/features/filtering/components/FilteringContainer.tsx
@@ -0,0 +1,21 @@
+import { Button } from '@/components/ui/button';
+import { FC, ReactNode } from 'react';
+import { useFilteringContainer } from '../hooks/useFilteringContainer';
+import { ActiveFilters } from './ActiveFilters';
+
+interface FilteringContainerProps {
+  children?: ReactNode;
+}
+
+export const FilteringContainer: FC<FilteringContainerProps> = ({ children }) => {
+  const { filteringIsActive, queryParams, resetFilters } = useFilteringContainer();
+  return (
+    <div className='grid items-center grid-cols-6 gap-4'>
+      {children}
+      <Button title='Reset filters' disabled={!filteringIsActive} onClick={resetFilters} variant='ghost-primary'>
+        Reset filters
+      </Button>
+      {filteringIsActive && <ActiveFilters queryParams={queryParams} />}
+    </div>
+  );
+};
diff --git a/web/src/features/filtering/components/SelectFilter.tsx b/web/src/features/filtering/components/SelectFilter.tsx
new file mode 100644
index 000000000..ad7d0119d
--- /dev/null
+++ b/web/src/features/filtering/components/SelectFilter.tsx
@@ -0,0 +1,39 @@
+import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { FC } from 'react';
+
+export type SelectFilterOption = {
+  value: string;
+  label: string;
+};
+
+interface SelectFilterProps {
+  placeholder: string;
+  value: string;
+  options: SelectFilterOption[];
+  onChange: (value: string) => void;
+}
+
+export const SelectFilter: FC<SelectFilterProps> = (props) => {
+  const { placeholder, value, options, onChange } = props;
+
+  const selectId = crypto.randomUUID();
+
+  return (
+    <Select value={value ?? ''} onValueChange={onChange}>
+      <SelectTrigger className='w-[180px]'>
+        <SelectValue placeholder={placeholder} />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectGroup>
+          {options.map((option) => {
+            return (
+              <SelectItem key={`select-${selectId}-${option.value}`} value={option.value}>
+                {option.label}
+              </SelectItem>
+            );
+          })}
+        </SelectGroup>
+      </SelectContent>
+    </Select>
+  );
+};
diff --git a/web/src/features/filtering/filtering-enums.ts b/web/src/features/filtering/filtering-enums.ts
new file mode 100644
index 000000000..ce834be93
--- /dev/null
+++ b/web/src/features/filtering/filtering-enums.ts
@@ -0,0 +1,11 @@
+export const enum FILTER_KEY {
+  PageSize = 'pageSize',
+  PageNumber = 'pageNumber',
+  MonitoringObserverStatus = 'monitoringObserverStatus',
+  MonitoringObserverTags = 'tags',
+}
+
+export const enum FILTER_LABEL {
+  MonitoringObserverStatus = 'Observer status',
+  MonitoringObserverTags = 'Tags',
+}
diff --git a/web/src/features/filtering/hooks/useFilteringContainer.ts b/web/src/features/filtering/hooks/useFilteringContainer.ts
new file mode 100644
index 000000000..bd7c5fbfa
--- /dev/null
+++ b/web/src/features/filtering/hooks/useFilteringContainer.ts
@@ -0,0 +1,34 @@
+import { useSetPrevSearch } from '@/common/prev-search-store';
+import { useNavigate, useSearch } from '@tanstack/react-router';
+import { useCallback } from 'react';
+
+export function useFilteringContainer() {
+  const navigate = useNavigate();
+  const queryParams = useSearch({ strict: false });
+  const setPrevSearch = useSetPrevSearch();
+  const filteringIsActive = Object.keys(queryParams).some((key) => key !== 'tab' && key !== 'viewBy');
+
+  const navigateHandler = useCallback(
+    (search: Record<string, any | undefined>) => {
+      void navigate({
+        // @ts-ignore
+        search: (prev) => {
+          const newSearch: Record<string, string | undefined | string[] | number> = {
+            ...prev,
+            ...search,
+          };
+          setPrevSearch(newSearch);
+          return newSearch;
+        },
+      });
+    },
+    [navigate, setPrevSearch]
+  );
+
+  const resetFilters = () => {
+    navigate({});
+    setPrevSearch({});
+  };
+
+  return { queryParams, filteringIsActive, navigate, navigateHandler, resetFilters };
+}
diff --git a/web/src/features/monitoring-observers/components/EditMonitoringObserver/EditMonitoringObserver.tsx b/web/src/features/monitoring-observers/components/EditMonitoringObserver/EditMonitoringObserver.tsx
index 47f99eca6..7e95eaf47 100644
--- a/web/src/features/monitoring-observers/components/EditMonitoringObserver/EditMonitoringObserver.tsx
+++ b/web/src/features/monitoring-observers/components/EditMonitoringObserver/EditMonitoringObserver.tsx
@@ -18,15 +18,18 @@ import { useNavigate, useRouter } from '@tanstack/react-router';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 import { UpdateMonitoringObserverRequest } from '../../models/monitoring-observer';
+import { MonitorObserverBackButton } from '../MonitoringObserverBackButton';
 
 export default function EditObserver() {
   const navigate = useNavigate();
   const router = useRouter();
   const queryClient = useQueryClient();
-    const currentElectionRoundId = useCurrentElectionRoundStore(s => s.currentElectionRoundId);
+  const currentElectionRoundId = useCurrentElectionRoundStore((s) => s.currentElectionRoundId);
 
   const { monitoringObserverId } = Route.useParams();
-  const monitoringObserverQuery = useSuspenseQuery(monitoringObserverDetailsQueryOptions(currentElectionRoundId, monitoringObserverId));
+  const monitoringObserverQuery = useSuspenseQuery(
+    monitoringObserverDetailsQueryOptions(currentElectionRoundId, monitoringObserverId)
+  );
   const monitoringObserver = monitoringObserverQuery.data;
 
   const { data: availableTags } = useMonitoringObserversTags(currentElectionRoundId);
@@ -61,11 +64,17 @@ export default function EditObserver() {
       phoneNumber: values.phoneNumber,
     };
 
-    editMutation.mutate({electionRoundId: currentElectionRoundId, request});
+    editMutation.mutate({ electionRoundId: currentElectionRoundId, request });
   }
 
   const editMutation = useMutation({
-    mutationFn: ({ electionRoundId, request }: { electionRoundId: string; request: UpdateMonitoringObserverRequest }) => {
+    mutationFn: ({
+      electionRoundId,
+      request,
+    }: {
+      electionRoundId: string;
+      request: UpdateMonitoringObserverRequest;
+    }) => {
       return authApi.post<void>(
         `/election-rounds/${electionRoundId}/monitoring-observers/${monitoringObserver.id}`,
         request
@@ -81,12 +90,17 @@ export default function EditObserver() {
       queryClient.invalidateQueries({ queryKey: ['monitoring-observers'] });
       queryClient.invalidateQueries({ queryKey: ['tags'] });
 
-      navigate({ to: '/monitoring-observers/view/$monitoringObserverId/$tab', params: { monitoringObserverId: monitoringObserver.id, tab: 'details' } })
+      navigate({
+        to: '/monitoring-observers/view/$monitoringObserverId/$tab',
+        params: { monitoringObserverId: monitoringObserver.id, tab: 'details' },
+      });
     },
   });
 
   return (
-    <Layout title={`Edit ${monitoringObserver.firstName} ${monitoringObserver.lastName}`}>
+    <Layout
+      title={`Edit ${monitoringObserver.firstName} ${monitoringObserver.lastName}`}
+      backButton={<MonitorObserverBackButton />}>
       <Card className='w-[800px] pt-0'>
         <CardHeader className='flex flex-column gap-2'>
           <div className='flex flex-row justify-between items-center'>
@@ -148,10 +162,10 @@ export default function EditObserver() {
                     <FormLabel className='text-left'>Tags</FormLabel>
                     <FormControl>
                       <TagsSelectFormField
-                        options={availableTags?.filter(tag => !field.value.includes(tag)) ?? []}
+                        options={availableTags?.filter((tag) => !field.value.includes(tag)) ?? []}
                         defaultValue={field.value}
                         onValueChange={field.onChange}
-                        placeholder="Observer tags"
+                        placeholder='Observer tags'
                       />
                     </FormControl>
                     <FormMessage />
@@ -190,7 +204,12 @@ export default function EditObserver() {
                   <Button
                     variant='outline'
                     type='button'
-                    onClick={() => { void navigate({ to: '/monitoring-observers/view/$monitoringObserverId/$tab', params: { monitoringObserverId: monitoringObserver.id, tab: 'details' } }) }}>
+                    onClick={() => {
+                      void navigate({
+                        to: '/monitoring-observers/view/$monitoringObserverId/$tab',
+                        params: { monitoringObserverId: monitoringObserver.id, tab: 'details' },
+                      });
+                    }}>
                     Cancel
                   </Button>
                   <Button type='submit' className='px-6'>
diff --git a/web/src/features/monitoring-observers/components/MonitoringObserverBackButton.tsx b/web/src/features/monitoring-observers/components/MonitoringObserverBackButton.tsx
new file mode 100644
index 000000000..a629beaf1
--- /dev/null
+++ b/web/src/features/monitoring-observers/components/MonitoringObserverBackButton.tsx
@@ -0,0 +1,18 @@
+import { usePrevSearch } from '@/common/prev-search-store';
+import { BackButtonIcon } from '@/components/layout/Breadcrumbs/BackButton';
+import { Link } from '@tanstack/react-router';
+import { FC } from 'react';
+
+export const MonitorObserverBackButton: FC = () => {
+  const prevSearch = usePrevSearch();
+  return (
+    <Link
+      title='Go back'
+      search={prevSearch}
+      to='/monitoring-observers/$tab/'
+      params={{ tab: 'list' }}
+      preload='intent'>
+      <BackButtonIcon />
+    </Link>
+  );
+};
diff --git a/web/src/features/monitoring-observers/components/MonitoringObserverDetails/MonitoringObserverDetails.tsx b/web/src/features/monitoring-observers/components/MonitoringObserverDetails/MonitoringObserverDetails.tsx
index 3ed8a0e31..ee8766622 100644
--- a/web/src/features/monitoring-observers/components/MonitoringObserverDetails/MonitoringObserverDetails.tsx
+++ b/web/src/features/monitoring-observers/components/MonitoringObserverDetails/MonitoringObserverDetails.tsx
@@ -9,15 +9,20 @@ import type { FunctionComponent } from '@/common/types';
 import { useCurrentElectionRoundStore } from '@/context/election-round.store';
 import { Route } from '@/routes/monitoring-observers/view/$monitoringObserverId.$tab';
 import { useSuspenseQuery } from '@tanstack/react-query';
+import { MonitorObserverBackButton } from '../MonitoringObserverBackButton';
 
 export default function MonitoringObserverDetails(): FunctionComponent {
   const { monitoringObserverId } = Route.useParams();
-    const currentElectionRoundId = useCurrentElectionRoundStore(s => s.currentElectionRoundId);
-  const monitoringObserverQuery = useSuspenseQuery(monitoringObserverDetailsQueryOptions(currentElectionRoundId, monitoringObserverId));
+  const currentElectionRoundId = useCurrentElectionRoundStore((s) => s.currentElectionRoundId);
+  const monitoringObserverQuery = useSuspenseQuery(
+    monitoringObserverDetailsQueryOptions(currentElectionRoundId, monitoringObserverId)
+  );
   const monitoringObserver = monitoringObserverQuery.data;
 
   return (
-    <Layout title={`${monitoringObserver.firstName} ${monitoringObserver.lastName}`}>
+    <Layout
+      backButton={<MonitorObserverBackButton />}
+      title={`${monitoringObserver.firstName} ${monitoringObserver.lastName}`}>
       <Tabs defaultValue='details'>
         <TabsList className='grid grid-cols-2 bg-gray-200 w-[400px] mb-4'>
           <TabsTrigger value='details'>Observer details</TabsTrigger>
@@ -32,4 +37,4 @@ export default function MonitoringObserverDetails(): FunctionComponent {
       </Tabs>
     </Layout>
   );
-}
\ No newline at end of file
+}
diff --git a/web/src/features/monitoring-observers/components/MonitoringObserversList/MonitoringObserversList.tsx b/web/src/features/monitoring-observers/components/MonitoringObserversList/MonitoringObserversList.tsx
index 52e9095be..614d3e695 100644
--- a/web/src/features/monitoring-observers/components/MonitoringObserversList/MonitoringObserversList.tsx
+++ b/web/src/features/monitoring-observers/components/MonitoringObserversList/MonitoringObserversList.tsx
@@ -8,34 +8,34 @@ import { DataTableColumnHeader } from '@/components/ui/DataTable/DataTableColumn
 import { QueryParamsDataTable } from '@/components/ui/DataTable/QueryParamsDataTable';
 import {
   DropdownMenu,
-  DropdownMenuCheckboxItem,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
 import { Input } from '@/components/ui/input';
-import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { Separator } from '@/components/ui/separator';
 import { useDialog } from '@/components/ui/use-dialog';
 import { Cog8ToothIcon, EllipsisVerticalIcon, FunnelIcon, PaperAirplaneIcon } from '@heroicons/react/24/outline';
 import { useMutation, useQuery, UseQueryResult } from '@tanstack/react-query';
-import { useNavigate, useRouter } from '@tanstack/react-router';
+import { useNavigate, useRouter, useSearch } from '@tanstack/react-router';
 import { CellContext, ColumnDef } from '@tanstack/react-table';
-import { X } from 'lucide-react';
-import { useCallback, useState } from 'react';
+import { useState } from 'react';
 
 import { DateTimeFormat } from '@/common/formats';
 import { TableCellProps } from '@/components/ui/DataTable/DataTable';
+import { toast } from '@/components/ui/use-toast';
+import { useCurrentElectionRoundStore } from '@/context/election-round.store';
+import { FILTER_KEY } from '@/features/filtering/filtering-enums';
+import { useFilteringContainer } from '@/features/filtering/hooks/useFilteringContainer';
 import { isQueryFiltered } from '@/lib/utils';
+import { queryClient } from '@/main';
 import { format } from 'date-fns';
 import { useMonitoringObserversTags } from '../../../../hooks/tags-queries';
+import { MonitoringObserversListFilters } from '../../filtering/MonitoringObserversListFilters';
 import { MonitoringObserver, MonitoringObserverStatus } from '../../models/monitoring-observer';
 import ImportMonitoringObserversDialog from '../MonitoringObserversList/ImportMonitoringObserversDialog';
 import ImportMonitoringObserversErrorsDialog from '../MonitoringObserversList/ImportMonitoringObserversErrorsDialog';
 import ConfirmResendInvitationDialog from './ConfirmResendInvitationDialog';
-import { queryClient } from '@/main';
-import { toast } from '@/components/ui/use-toast';
-import { useCurrentElectionRoundStore } from '@/context/election-round.store';
 
 type ListMonitoringObserverResponse = PageResponse<MonitoringObserver>;
 
@@ -44,6 +44,7 @@ type UseMonitoringObserversResult = UseQueryResult<ListMonitoringObserverRespons
 function MonitoringObserversList() {
   const navigate = useNavigate();
   const router = useRouter();
+  const queryParams = useSearch({ strict: false });
 
   const monitoringObserverColDefs: ColumnDef<MonitoringObserver>[] = [
     {
@@ -114,35 +115,39 @@ function MonitoringObserversList() {
             <DropdownMenuItem onClick={() => navigateToEdit(row.original.id)}>Edit</DropdownMenuItem>
             <DropdownMenuItem
               disabled={row.original.status !== MonitoringObserverStatus.Pending}
-              onClick={() => handleResendInviteToObserver(row.original.id)}>Resend invitation email</DropdownMenuItem>
+              onClick={() => handleResendInviteToObserver(row.original.id)}>
+              Resend invitation email
+            </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>
       ),
     },
   ];
 
-  const [tagsFilter, setTagsFilter] = useState<string[]>([]);
-  const [statusFilter, setStatusFilter] = useState('');
   const [searchText, setSearchText] = useState('');
-  const [isFiltering, setFiltering] = useState(false);
   const [importErrorsFileId, setImportErrorsFileId] = useState<string | undefined>();
   const [monitoringObserverId, setMonitoringObserverId] = useState<string | undefined>();
   const importMonitoringObserversDialog = useDialog();
   const importMonitoringObserverErrorsDialog = useDialog();
   const confirmResendInvitesDialog = useDialog();
+  const { filteringIsActive } = useFilteringContainer();
+  const [isFiltering, setIsFiltering] = useState(filteringIsActive);
 
   const handleSearchInput = (ev: React.FormEvent<HTMLInputElement>) => {
     setSearchText(ev.currentTarget.value);
   };
 
   const navigateToObserver = (monitoringObserverId: string) => {
-    navigate({ to: '/monitoring-observers/view/$monitoringObserverId/$tab', params: { monitoringObserverId, tab: 'details' } });
+    navigate({
+      to: '/monitoring-observers/view/$monitoringObserverId/$tab',
+      params: { monitoringObserverId, tab: 'details' },
+    });
   };
   const navigateToEdit = (monitoringObserverId: string) => {
     navigate({ to: '/monitoring-observers/edit/$monitoringObserverId', params: { monitoringObserverId } });
   };
 
-    const currentElectionRoundId = useCurrentElectionRoundStore(s => s.currentElectionRoundId);
+  const currentElectionRoundId = useCurrentElectionRoundStore((s) => s.currentElectionRoundId);
   const { data: tags } = useMonitoringObserversTags(currentElectionRoundId);
 
   const useMonitoringObservers = (params: DataTableParameters): UseMonitoringObserversResult => {
@@ -154,8 +159,8 @@ function MonitoringObserversList() {
         params.sortColumnName,
         params.sortOrder,
         searchText,
-        statusFilter,
-        tagsFilter,
+        (queryParams as any).status,
+        (queryParams as any).tags,
       ],
       queryFn: async () => {
         const paramsObject: any = {
@@ -164,14 +169,17 @@ function MonitoringObserversList() {
           SortColumnName: params.sortColumnName,
           SortOrder: params.sortOrder,
           searchText: searchText,
-          status: statusFilter,
+          status: (queryParams as any)[FILTER_KEY.MonitoringObserverStatus],
+          tags: (queryParams as any)[FILTER_KEY.MonitoringObserverTags],
         };
 
+        const tagString =
+          (queryParams as any).tags == undefined
+            ? ''
+            : (queryParams as any).tags?.map((n: string) => `tags=${n}`).join('&');
 
         const response = await authApi.get<PageResponse<MonitoringObserver>>(
-          `/election-rounds/${currentElectionRoundId}/monitoring-observers?${tagsFilter
-            .map((n) => `tags=${n}`)
-            .join('&')}`,
+          `/election-rounds/${currentElectionRoundId}/monitoring-observers?${tagString ?? ''}`,
           {
             params: Object.keys(paramsObject)
               .filter((k) => paramsObject[k] !== null && paramsObject[k] !== '')
@@ -185,14 +193,20 @@ function MonitoringObserversList() {
 
         return { ...response.data, isEmpty: !isQueryFiltered(paramsObject) && response.data.items.length === 0 };
       },
-      enabled: !!currentElectionRoundId
+      enabled: !!currentElectionRoundId,
     });
   };
 
   const resendInvitationsMutation = useMutation({
-    mutationFn: ({ electionRoundId, monitoringObserverId }: { electionRoundId: string; monitoringObserverId: string | undefined }) => {
+    mutationFn: ({
+      electionRoundId,
+      monitoringObserverId,
+    }: {
+      electionRoundId: string;
+      monitoringObserverId: string | undefined;
+    }) => {
       return authApi.put<void>(`/election-rounds/${electionRoundId}/monitoring-observers:resend-invites`, {
-        ids: [monitoringObserverId].filter(id => !!id)
+        ids: [monitoringObserverId].filter((id) => !!id),
       });
     },
 
@@ -212,50 +226,26 @@ function MonitoringObserversList() {
       toast({
         title: 'Error resending invitation',
         description: 'Please contact Platform admins',
-        variant: 'destructive'
+        variant: 'destructive',
       });
-    }
+    },
   });
 
   const changeIsFiltering = () => {
-    setFiltering((prev) => {
+    setIsFiltering((prev) => {
       return !prev;
     });
   };
 
-  const handleStatusFilter = (status: string) => {
-    setStatusFilter(status);
-  };
-
-  const resetFilters = () => {
-    setStatusFilter('');
-    setTagsFilter([]);
-  };
-
   function handleResendInviteToObserver(id?: string): void {
     setMonitoringObserverId(id);
     confirmResendInvitesDialog.trigger();
   }
 
-  const toggleTagsFilter = (tag: string) => {
-    setTagsFilter((prevTags: any) => {
-      if (!prevTags.includes(tag)) {
-        return [...prevTags, tag];
-      } else {
-        return prevTags.filter((tagText: string) => tagText !== tag);
-      }
-    });
-  };
-
-  const rowClickHandler = useCallback(
-    (monitoringObserverId: string) => {
-      navigateToObserver(monitoringObserverId);
-    },
-    [navigateToObserver]
-  );
-
   const exportMonitoringObservers = async () => {
-    const res = await authApi.get(`/election-rounds/${currentElectionRoundId}/monitoring-observers:export`, { responseType: "blob" });
+    const res = await authApi.get(`/election-rounds/${currentElectionRoundId}/monitoring-observers:export`, {
+      responseType: 'blob',
+    });
     const csvData = res.data;
 
     const blob = new Blob([csvData], { type: 'text/csv' });
@@ -275,12 +265,11 @@ function MonitoringObserversList() {
   // Func to provide props to table cell
   const getCellProps = (context: CellContext<MonitoringObserver, unknown>): TableCellProps | void => {
     if (context.column.id === 'tags') {
-
       return {
         className: 'flex-wrap',
-      }
+      };
     }
-  }
+  };
 
   return (
     <Card className='w-full pt-0'>
@@ -288,9 +277,22 @@ function MonitoringObserversList() {
         <div className='flex flex-row justify-between items-center px-6'>
           <CardTitle className='text-xl'>Monitoring observers list</CardTitle>
           <div className='table-actions flex flex-row-reverse flex-row- gap-4'>
-            {!!importErrorsFileId && <ImportMonitoringObserversErrorsDialog fileId={importErrorsFileId} {...importMonitoringObserverErrorsDialog.dialogProps} />}
-            <ImportMonitoringObserversDialog {...importMonitoringObserversDialog.dialogProps} onImportError={(fileId) => { setImportErrorsFileId(fileId); importMonitoringObserverErrorsDialog.trigger(); }} />
-            <Button className='bg-purple-900 hover:bg-purple-600' onClick={() => importMonitoringObserversDialog.trigger()}>
+            {!!importErrorsFileId && (
+              <ImportMonitoringObserversErrorsDialog
+                fileId={importErrorsFileId}
+                {...importMonitoringObserverErrorsDialog.dialogProps}
+              />
+            )}
+            <ImportMonitoringObserversDialog
+              {...importMonitoringObserversDialog.dialogProps}
+              onImportError={(fileId) => {
+                setImportErrorsFileId(fileId);
+                importMonitoringObserverErrorsDialog.trigger();
+              }}
+            />
+            <Button
+              className='bg-purple-900 hover:bg-purple-600'
+              onClick={() => importMonitoringObserversDialog.trigger()}>
               <svg
                 className='mr-1.5'
                 xmlns='http://www.w3.org/2000/svg'
@@ -327,20 +329,24 @@ function MonitoringObserversList() {
               </svg>
               Export monitoring observer list
             </Button>
-            <Button
-              className='bg-yellow-400 hover:bg-yellow-600'
-              onClick={() => handleResendInviteToObserver()}
-            >
+            <Button className='bg-yellow-400 hover:bg-yellow-600' onClick={() => handleResendInviteToObserver()}>
               <PaperAirplaneIcon className='h-6 w-6 text-white' />
               Resend invites
             </Button>
             <ConfirmResendInvitationDialog
               alertTitle={'Confirm resend invitation'}
-              alertDescription={monitoringObserverId ? 'Are you sure you want to resend the invite?' : 'Are you sure you want to resend invite to all pending observers?'}
+              alertDescription={
+                monitoringObserverId
+                  ? 'Are you sure you want to resend the invite?'
+                  : 'Are you sure you want to resend invite to all pending observers?'
+              }
               cancelActionButtonText='Cancel'
               confirmActionButtonText='Resend invitation'
-              onConfirm={() => resendInvitationsMutation.mutate({ electionRoundId: currentElectionRoundId, monitoringObserverId })}
-              {...confirmResendInvitesDialog.dialogProps} />
+              onConfirm={() =>
+                resendInvitationsMutation.mutate({ electionRoundId: currentElectionRoundId, monitoringObserverId })
+              }
+              {...confirmResendInvitesDialog.dialogProps}
+            />
           </div>
         </div>
         <Separator />
@@ -356,66 +362,7 @@ function MonitoringObserversList() {
           </>
         </div>
         <Separator />
-        {isFiltering ? (
-          <div className='table-filters flex flex-row gap-4 items-center'>
-            <Select value={statusFilter} onValueChange={handleStatusFilter}>
-              <SelectTrigger className='w-[180px]'>
-                <SelectValue placeholder='Observer status' />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectGroup>
-                  <SelectItem value='Active'>Active</SelectItem>
-                  <SelectItem value='Pending'>Pending</SelectItem>
-                  <SelectItem value='Suspended'>Suspended</SelectItem>
-                </SelectGroup>
-              </SelectContent>
-            </Select>
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <div className='flex h-10 w-48 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50'>
-                  Tags
-                </div>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent className='w-56'>
-                {tags?.map((tag) => (
-                  <DropdownMenuCheckboxItem
-                    checked={tagsFilter.includes(tag)}
-                    onCheckedChange={() => toggleTagsFilter(tag)}
-                    key={tag}>
-                    {tag}
-                  </DropdownMenuCheckboxItem>
-                ))}
-              </DropdownMenuContent>
-            </DropdownMenu>
-            <Button variant='ghost-primary'>
-              <span onClick={resetFilters} className='text-base text-purple-900'>
-                Reset filters
-              </span>
-            </Button>
-            <div className='flex flex-row gap-2 flex-wrap'>
-              {statusFilter && (
-                <span
-                  onClick={() => handleStatusFilter('')}
-                  className='rounded-full cursor-pointer py-1 px-4 bg-purple-100 text-sm text-purple-900 font-medium flex items-center gap-2'>
-                  Observer status: {statusFilter}
-                  <X size={14} />
-                </span>
-              )}
-
-              {tagsFilter.map((tag) => (
-                <span
-                  key={tag}
-                  onClick={() => toggleTagsFilter(tag)}
-                  className='rounded-full cursor-pointer py-1 px-4 bg-purple-100 text-sm text-purple-900 font-medium flex items-center gap-2'>
-                  Tags: {tag}
-                  <X size={14} />
-                </span>
-              ))}
-            </div>
-          </div>
-        ) : (
-          ''
-        )}
+        {isFiltering && <MonitoringObserversListFilters />}
       </CardHeader>
       <CardContent>
         <QueryParamsDataTable
diff --git a/web/src/features/monitoring-observers/filtering/MonitoringObserverStatusSelect.tsx b/web/src/features/monitoring-observers/filtering/MonitoringObserverStatusSelect.tsx
new file mode 100644
index 000000000..fe495092a
--- /dev/null
+++ b/web/src/features/monitoring-observers/filtering/MonitoringObserverStatusSelect.tsx
@@ -0,0 +1,39 @@
+import { FILTER_KEY } from '@/features/filtering/filtering-enums';
+import { MonitoringObserverStatus } from '@/features/monitoring-observers/models/monitoring-observer';
+import { FC } from 'react';
+import { SelectFilter, SelectFilterOption } from '../../filtering/components/SelectFilter';
+import { useFilteringContainer } from '../../filtering/hooks/useFilteringContainer';
+
+const monitoringObserverStausOptions: SelectFilterOption[] = [
+  {
+    value: MonitoringObserverStatus.Active,
+    label: MonitoringObserverStatus.Active,
+  },
+
+  {
+    value: MonitoringObserverStatus.Pending,
+    label: MonitoringObserverStatus.Pending,
+  },
+
+  {
+    value: MonitoringObserverStatus.Suspended,
+    label: MonitoringObserverStatus.Suspended,
+  },
+];
+
+export const MonitoringObserverStatusSelect: FC = () => {
+  const { queryParams, navigateHandler } = useFilteringContainer();
+
+  const onStatusChange = (value: string) => {
+    navigateHandler({ [FILTER_KEY.MonitoringObserverStatus]: value });
+  };
+
+  return (
+    <SelectFilter
+      value={(queryParams as any)[FILTER_KEY.MonitoringObserverStatus]}
+      onChange={onStatusChange}
+      placeholder='Observer status'
+      options={monitoringObserverStausOptions}
+    />
+  );
+};
diff --git a/web/src/features/monitoring-observers/filtering/MonitoringObserverTagsSelect.tsx b/web/src/features/monitoring-observers/filtering/MonitoringObserverTagsSelect.tsx
new file mode 100644
index 000000000..730de3494
--- /dev/null
+++ b/web/src/features/monitoring-observers/filtering/MonitoringObserverTagsSelect.tsx
@@ -0,0 +1,46 @@
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { useCurrentElectionRoundStore } from '@/context/election-round.store';
+import { FILTER_KEY } from '@/features/filtering/filtering-enums';
+import { useFilteringContainer } from '@/features/filtering/hooks/useFilteringContainer';
+import { useMonitoringObserversTags } from '@/hooks/tags-queries';
+import { FC } from 'react';
+
+export const MonitoringObserverTagsSelect: FC = () => {
+  const currentElectionRoundId = useCurrentElectionRoundStore((s) => s.currentElectionRoundId);
+  const { data: tags } = useMonitoringObserversTags(currentElectionRoundId);
+  const { queryParams, navigateHandler } = useFilteringContainer();
+  const currentTags = (queryParams as any)?.[FILTER_KEY.MonitoringObserverTags] ?? [];
+
+  const toggleTagsFilter = (tag: string) => {
+    if (!currentTags.includes(tag)) return navigateHandler({ tags: [...currentTags, tag] });
+
+    const filteredTags = currentTags.filter((tagText: string) => tagText !== tag);
+
+    return navigateHandler({ [FILTER_KEY.MonitoringObserverTags]: filteredTags });
+  };
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <div className='flex h-10 w-48 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50'>
+          Observer tags
+        </div>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className='w-56'>
+        {tags?.map((tag) => (
+          <DropdownMenuCheckboxItem
+            checked={currentTags.includes(tag)}
+            onCheckedChange={() => toggleTagsFilter(tag)}
+            key={tag}>
+            {tag}
+          </DropdownMenuCheckboxItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};
diff --git a/web/src/features/monitoring-observers/filtering/MonitoringObserversListFilters.tsx b/web/src/features/monitoring-observers/filtering/MonitoringObserversListFilters.tsx
new file mode 100644
index 000000000..463d4b46f
--- /dev/null
+++ b/web/src/features/monitoring-observers/filtering/MonitoringObserversListFilters.tsx
@@ -0,0 +1,13 @@
+import { FilteringContainer } from '@/features/filtering/components/FilteringContainer';
+import { MonitoringObserverStatusSelect } from '@/features/monitoring-observers/filtering/MonitoringObserverStatusSelect';
+import { MonitoringObserverTagsSelect } from '@/features/monitoring-observers/filtering/MonitoringObserverTagsSelect';
+import { FC } from 'react';
+
+export const MonitoringObserversListFilters: FC = () => {
+  return (
+    <FilteringContainer>
+      <MonitoringObserverStatusSelect />
+      <MonitoringObserverTagsSelect />
+    </FilteringContainer>
+  );
+};
diff --git a/web/src/features/responses/components/ResetFiltersButton/ResetFiltersButton.tsx b/web/src/features/responses/components/ResetFiltersButton/ResetFiltersButton.tsx
index 5c5ccf4f5..d886db5e7 100644
--- a/web/src/features/responses/components/ResetFiltersButton/ResetFiltersButton.tsx
+++ b/web/src/features/responses/components/ResetFiltersButton/ResetFiltersButton.tsx
@@ -1,7 +1,7 @@
-import { useNavigate } from '@tanstack/react-router';
+import { useSetPrevSearch } from '@/common/prev-search-store';
 import type { FunctionComponent } from '@/common/types';
 import { Button } from '@/components/ui/button';
-import { useSetPrevSearch } from '@/common/prev-search-store';
+import { useNavigate } from '@tanstack/react-router';
 
 type ResetFiltersButtonProps = {
   disabled: boolean;