diff --git a/src/components/banner-order-chooser/BannerOrderChooser.tsx b/src/components/banner-order-chooser/BannerOrderChooser.tsx
index 990c0b6..d78bbfe 100644
--- a/src/components/banner-order-chooser/BannerOrderChooser.tsx
+++ b/src/components/banner-order-chooser/BannerOrderChooser.tsx
@@ -19,7 +19,6 @@ const BannerOrderChooser: FC<BannerOrderChooserProps> = ({
 }) => {
   const [open, setOpen] = useState<boolean>(false)
   const [loadingLocation, setLoadingLocation] = useState<boolean>(false)
-  const [currentFilter, setCurrentFilter] = useState<BannerFilter>(filter)
   const { t } = useTranslation()
   useEffect(() => {
     if (loadingLocation) {
@@ -27,7 +26,7 @@ const BannerOrderChooser: FC<BannerOrderChooserProps> = ({
         (pos) => {
           setLoadingLocation(false)
           updateFilter({
-            ...currentFilter,
+            ...filter,
             orderBy: 'proximityStartPoint',
             orderDirection: 'ASC',
             proximityLatitude: pos.coords.latitude,
@@ -40,7 +39,7 @@ const BannerOrderChooser: FC<BannerOrderChooserProps> = ({
         { maximumAge: 0, enableHighAccuracy: true }
       )
     }
-  })
+  }, [loadingLocation, setLoadingLocation, filter])
 
   const show = () => {
     setOpen(true)
@@ -52,7 +51,6 @@ const BannerOrderChooser: FC<BannerOrderChooserProps> = ({
   }
 
   const updateFilter = (newFilter: BannerFilter) => {
-    setCurrentFilter(newFilter)
     onFilterChanged(newFilter)
   }
 
@@ -68,51 +66,51 @@ const BannerOrderChooser: FC<BannerOrderChooserProps> = ({
   }
 
   const onOrderClicked = (type: BannerOrder) => {
-    if (type !== currentFilter.orderBy) {
+    if (type !== filter.orderBy) {
       if (type === 'proximityStartPoint') {
         setLoadingLocation(true)
       } else {
         updateFilter({
-          ...currentFilter,
+          ...filter,
           orderBy: type,
           orderDirection: getDefaultDirection(type),
           proximityLatitude: undefined,
           proximityLongitude: undefined,
         })
       }
-    } else if (hasBothDirections(currentFilter.orderBy)) {
+    } else if (hasBothDirections(filter.orderBy)) {
       updateFilter({
-        ...currentFilter,
-        orderDirection: currentFilter.orderDirection === 'ASC' ? 'DESC' : 'ASC',
+        ...filter,
+        orderDirection: filter.orderDirection === 'ASC' ? 'DESC' : 'ASC',
       })
     }
   }
 
   const onOfficialChanged = (includeUnofficial: boolean) => {
     updateFilter({
-      ...currentFilter,
+      ...filter,
       onlyOfficialMissions: includeUnofficial ? undefined : true,
     })
   }
 
   const onOnlineChanged = (showOffline: boolean) => {
     updateFilter({
-      ...currentFilter,
+      ...filter,
       online: showOffline ? undefined : true,
     })
   }
 
   const getButtonClass = (type: BannerOrder) => {
     let classNames = 'order-button'
-    if (type === currentFilter.orderBy) {
+    if (type === filter.orderBy) {
       classNames += ' selected'
     }
     return classNames
   }
 
   const getButtonDirection = (type: BannerOrder) => {
-    return type === currentFilter.orderBy
-      ? currentFilter.orderDirection
+    return type === filter.orderBy
+      ? filter.orderDirection
       : getDefaultDirection(type)
   }
 
@@ -147,16 +145,13 @@ const BannerOrderChooser: FC<BannerOrderChooserProps> = ({
           </h2>
           <div className="filter-and-sort-switch-row">
             <h3>{t('order.showOfflineBanners')}</h3>
-            <Switch
-              checked={!currentFilter.online}
-              onChange={onOnlineChanged}
-            />
+            <Switch checked={!filter.online} onChange={onOnlineChanged} />
           </div>
           {includeOfficial && (
             <div className="filter-and-sort-switch-row">
               <h3>{t('order.showUnofficialBanners')}</h3>
               <Switch
-                checked={!currentFilter.onlyOfficialMissions}
+                checked={!filter.onlyOfficialMissions}
                 onChange={onOfficialChanged}
               />
             </div>
@@ -190,8 +185,8 @@ const BannerOrderChooser: FC<BannerOrderChooserProps> = ({
               components={{
                 order: (
                   <Order
-                    orderBy={currentFilter.orderBy}
-                    orderDirection={currentFilter.orderDirection}
+                    orderBy={filter.orderBy}
+                    orderDirection={filter.orderDirection}
                   />
                 ),
               }}
@@ -199,10 +194,10 @@ const BannerOrderChooser: FC<BannerOrderChooserProps> = ({
             {' / '}
           </>
         )}
-        {currentFilter.online
+        {filter.online
           ? t('order.text.excludeOffline')
           : t('order.text.includeOffline')}
-        {currentFilter.onlyOfficialMissions && (
+        {filter.onlyOfficialMissions && (
           <>
             {' / '}
             {t('order.onlyOfficial')}
diff --git a/src/components/infinite-banner-list/InfiniteBannerList.tsx b/src/components/infinite-banner-list/InfiniteBannerList.tsx
index 8f800c6..47de871 100644
--- a/src/components/infinite-banner-list/InfiniteBannerList.tsx
+++ b/src/components/infinite-banner-list/InfiniteBannerList.tsx
@@ -1,6 +1,6 @@
-import { FC, useState } from 'react'
+import { FC, useEffect, useState } from 'react'
 import { BannerFilter } from '../../features/banner/filter'
-import { useBannerList } from '../../features/banner/hooks'
+import { useBannerList, usePrevious } from '../../features/banner/hooks'
 import BannerList from '../banner-list'
 import BannerOrderChooser from '../banner-order-chooser'
 
@@ -19,6 +19,10 @@ const InfiniteBannerList: FC<InfiniteBannerListProps> = ({
     setMaxPages(1)
   }
 
+  useEffect(() => {
+    onFilterChanged(initialFilter)
+  }, [initialFilter])
+
   return (
     <div>
       <BannerOrderChooser
diff --git a/src/features/banner/filter.ts b/src/features/banner/filter.ts
index 993aed6..5daabf7 100644
--- a/src/features/banner/filter.ts
+++ b/src/features/banner/filter.ts
@@ -1,3 +1,5 @@
+import { BannerListType } from './types'
+
 export type BannerOrder =
   | 'relevance'
   | 'listAdded'
@@ -18,4 +20,5 @@ export type BannerFilter = {
   maxEventTimestamp?: string
   proximityLatitude?: number
   proximityLongitude?: number
+  listTypes?: BannerListType
 }
diff --git a/src/pages/user-banner-list/UserBannerList.tsx b/src/pages/user-banner-list/UserBannerList.tsx
index e457e1e..9f33829 100644
--- a/src/pages/user-banner-list/UserBannerList.tsx
+++ b/src/pages/user-banner-list/UserBannerList.tsx
@@ -1,230 +1,56 @@
-import React, { Fragment } from 'react'
-import { connect } from 'react-redux'
-import { Row, Layout } from 'antd'
-import { withRouter, RouteComponentProps } from 'react-router-dom'
+import { FC, Fragment } from 'react'
+import { useParams } from 'react-router-dom'
 import { Helmet } from 'react-helmet'
-import { Trans, withTranslation, WithTranslationProps } from 'react-i18next'
+import { useTranslation } from 'react-i18next'
 
-import { RootState } from '../../storeTypes'
-import {
-  Banner,
-  BannerListType,
-  getUserBannerListBanners,
-  getHasMoreUserBannerListBanners,
-  loadUserBannerListBanners as loadUserBannerListBannersAction,
-  getBannerListTypeText,
-} from '../../features/banner'
-
-import { withAuthenticated } from '../../hocs/WithAuthenticated'
+import { BannerListType, getBannerListTypeText } from '../../features/banner'
+import { BannerFilter } from '../../features/banner/filter'
 
-import BannerOrderChooser from '../../components/banner-order-chooser'
 import BannerListTypeNavigation from '../../components/banner-list-type-navigation'
-import BannerList from '../../components/banner-list'
 import FooterMain from '../../components/footer-main'
 import LoginRequired from '../../components/login/login-required'
-import './user-banner-list.less'
-import { BannerFilter } from '../../features/banner/filter'
-
-class UserBannerList extends React.Component<
-  UserBannerListProps,
-  UserBannerListState
-> {
-  constructor(props: UserBannerListProps) {
-    super(props)
-    this.state = {
-      filter: {
-        orderBy: 'listAdded',
-        orderDirection: 'DESC',
-        online: undefined,
-      },
-      listType: 'none',
-      pageBanners: 0,
-      bannersStatus: 'initial',
-    }
-  }
-
-  static getDerivedStateFromProps(
-    props: Readonly<UserBannerListProps>,
-    state: UserBannerListState
-  ) {
-    const { match } = props
-    const { listType } = state
-    const newListType = decodeURIComponent(match.params.listType)
-
-    if (listType !== newListType) {
-      return {
-        listType: newListType,
-        pageBanners: 0,
-      }
-    }
-
-    return null
-  }
-
-  componentDidMount() {
-    const { filter, listType } = this.state
-
-    this.doFetchBanners(listType, filter, 0)
-  }
-
-  componentDidUpdate(
-    prevProps: UserBannerListProps,
-    prevState: UserBannerListState
-  ) {
-    const { authenticated: prevAuthenticated } = prevProps
-    const { authenticated } = this.props
-
-    const { listType: prevListType } = prevState
-    const { listType, filter } = this.state
-
-    if (prevListType !== listType || prevAuthenticated !== authenticated) {
-      this.doFetchBanners(listType, filter, 0)
-    }
-  }
-
-  onFilterChanged = (filter: BannerFilter) => {
-    const { listType } = this.state
-    this.setState({
-      filter,
-      pageBanners: 0,
-    })
-    this.doFetchBanners(listType, filter, 0)
-  }
+import InfiniteBannerList from '../../components/infinite-banner-list/InfiniteBannerList'
 
-  onLoadMoreBanners = () => {
-    const { fetchBanners } = this.props
-    const { filter, pageBanners, listType } = this.state
-    this.setState({ pageBanners: pageBanners + 1 })
-    return fetchBanners(listType, filter, pageBanners + 1)
-  }
-
-  getPageTitle() {
-    const { i18n } = this.props
-    const { listType } = this.state
-    return (
-      i18n?.t('banners.mine', { type: getBannerListTypeText(listType) }) ??
-      `My ${getBannerListTypeText(listType)} Banners`
-    )
-  }
-
-  async doFetchBanners(
-    listType: BannerListType,
-    filter: BannerFilter,
-    pageBanners: number
-  ) {
-    const { fetchBanners, authenticated } = this.props
-
-    if (authenticated) {
-      this.setState({ bannersStatus: 'loading' })
-      await fetchBanners(listType, filter, pageBanners)
-      this.setState({ bannersStatus: 'success' })
-    }
-  }
-
-  render() {
-    const title: string = this.getPageTitle()
-    const { bannersStatus, filter, listType } = this.state
-    const { banners, hasMoreBanners } = this.props
+import './user-banner-list.less'
 
-    return (
-      <Fragment>
-        <Helmet defer={false}>
-          <title>{title}</title>
-        </Helmet>
-        <div className="user-banner-list-page page-container">
-          <div className="user-banner-list-content">
-            <BannerListTypeNavigation
-              bannerListType={listType}
-              baseUrl="/user/banners/"
+const UserBannerList: FC = () => {
+  const { listType } = useParams<{ listType: BannerListType }>()
+  const { t } = useTranslation()
+  const title = t('banners.mine', { type: getBannerListTypeText(listType) })
+
+  const initialFilter: BannerFilter = {
+    listTypes: listType,
+    orderBy: 'listAdded',
+    orderDirection: 'DESC',
+    online: undefined,
+  }
+
+  return (
+    <Fragment>
+      <Helmet defer={false}>
+        <title>{title}</title>
+      </Helmet>
+      <div className="user-banner-list-page page-container">
+        <div className="user-banner-list-content">
+          <BannerListTypeNavigation
+            bannerListType={listType}
+            baseUrl="/user/banners/"
+          />
+
+          <LoginRequired>
+            <InfiniteBannerList
+              includeAddedList
+              initialFilter={initialFilter}
+              noResultsMessage={t('banners.markinfo', {
+                type: getBannerListTypeText(listType),
+              })}
             />
-
-            <LoginRequired>
-              <Layout>
-                <Row justify="start" className="order-chooser">
-                  <BannerOrderChooser
-                    filter={filter}
-                    onFilterChanged={this.onFilterChanged}
-                    includeAddedList
-                    includeOfficial
-                  />
-                </Row>
-                {bannersStatus === 'success' && (
-                  <>
-                    {banners.length > 0 && (
-                      <>
-                        <Row>
-                          <BannerList
-                            banners={banners}
-                            hasMoreBanners={hasMoreBanners}
-                            loadMoreBanners={this.onLoadMoreBanners}
-                            applyBannerListStyles
-                            hideBlacklisted={false}
-                            showDetailsButton={false}
-                          />
-                        </Row>
-                      </>
-                    )}
-
-                    {banners.length === 0 && (
-                      <>
-                        <Row>
-                          <Trans
-                            i18nKey="banners.markinfo"
-                            values={{ type: getBannerListTypeText(listType) }}
-                          >
-                            Mark banners as{' '}
-                            {{ type: getBannerListTypeText(listType) }} to see
-                            see them here.
-                          </Trans>
-                        </Row>
-                      </>
-                    )}
-                  </>
-                )}
-
-                {(bannersStatus === 'initial' ||
-                  bannersStatus === 'loading') && (
-                  <Trans i18nKey="loading">Loading...</Trans>
-                )}
-              </Layout>
-            </LoginRequired>
-          </div>
-          <FooterMain />
+          </LoginRequired>
         </div>
-      </Fragment>
-    )
-  }
-}
-
-export type UserBannerListProps = {
-  banners: Array<Banner>
-  hasMoreBanners: Boolean
-  fetchBanners: (
-    listType: BannerListType,
-    filter: BannerFilter,
-    pageBanners: number
-  ) => Promise<void>
-  authenticated: Boolean
-} & RouteComponentProps<{ listType: BannerListType }> &
-  WithTranslationProps
-
-interface UserBannerListState {
-  filter: BannerFilter
-  listType: BannerListType
-  pageBanners: number
-  bannersStatus: 'initial' | 'success' | 'loading' | 'error'
-}
-
-const mapStateToProps = (state: RootState) => ({
-  banners: getUserBannerListBanners(state),
-  hasMoreBanners: getHasMoreUserBannerListBanners(state),
-})
-
-const mapDispatchToProps = {
-  fetchBanners: loadUserBannerListBannersAction,
+        <FooterMain />
+      </div>
+    </Fragment>
+  )
 }
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(withAuthenticated(withRouter(withTranslation()(UserBannerList))))
+export default UserBannerList