diff --git a/package.json b/package.json
index e39f9f31..5aae70a7 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,7 @@
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
     "@tanstack/react-query": "^5.40.0",
-    "@vocdoni/chakra-components": "~0.9.2",
+    "@vocdoni/chakra-components": "~0.9.0",
     "@vocdoni/extended-sdk": "~0.2.0",
     "@vocdoni/sdk": "~0.9.0",
     "date-fns": "^2.29.3",
diff --git a/src/App.tsx b/src/App.tsx
index 776dc3b8..0e57c7bb 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,10 +1,10 @@
 import { ColorModeScript } from '@chakra-ui/react'
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { ClientProvider } from '@vocdoni/chakra-components'
-import { ExtendedSDKClient } from '@vocdoni/extended-sdk'
 import { EnvOptions } from '@vocdoni/sdk'
-import { VocdoniEnvironment } from '~constants'
 import { RoutesProvider } from './router'
+import { VocdoniEnvironment } from '~constants'
+import { ExtendedSDKClient } from '@vocdoni/extended-sdk'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 
 const queryClient = new QueryClient()
 
diff --git a/src/components/Accounts/Card.tsx b/src/components/Accounts/Card.tsx
index af0e4b61..7ee0c020 100644
--- a/src/components/Accounts/Card.tsx
+++ b/src/components/Accounts/Card.tsx
@@ -4,8 +4,8 @@ import { OrganizationProvider, useOrganization } from '@vocdoni/react-providers'
 import { Trans, useTranslation } from 'react-i18next'
 import { generatePath, Link as RouterLink } from 'react-router-dom'
 import { ReducedTextAndCopy } from '~components/Layout/CopyButton'
-import LinkCard from '~components/Layout/LinkCard'
 import { FallbackAccountImg, RoutePath } from '~constants'
+import LinkCard from '~components/Layout/LinkCard'
 
 type IAccountCardProps = {
   id?: string
diff --git a/src/components/Accounts/Detail.tsx b/src/components/Accounts/Detail.tsx
index 2e649892..c963136e 100644
--- a/src/components/Accounts/Detail.tsx
+++ b/src/components/Accounts/Detail.tsx
@@ -2,16 +2,16 @@ import { Tab, TabList, TabPanel, TabPanels, VStack } from '@chakra-ui/react'
 import { OrganizationHeader, OrganizationName } from '@vocdoni/chakra-components'
 import { useOrganization } from '@vocdoni/react-providers'
 import { Trans, useTranslation } from 'react-i18next'
-import AccountFees from '~components/Accounts/Details/Fees'
-import AccountTransfers from '~components/Accounts/Details/Transfers'
 import { ReducedTextAndCopy } from '~components/Layout/CopyButton'
 import { HeroHeaderLayout } from '~components/Layout/HeroHeaderLayout'
 import { RouteParamsTabs } from '~components/Layout/RouteParamsTabs'
 import { RawContentBox } from '~components/Layout/ShowRawButton'
-import TextAndTag from '~components/Layout/TextAndTag'
 import { FallbackHeaderImg, RoutePath } from '~constants'
-import AccountDetails from './Details/AccountDetails'
+import AccountTransfers from '~components/Accounts/Details/Transfers'
 import AccountElections from './Details/Elections'
+import AccountDetails from './Details/AccountDetails'
+import AccountFees from '~components/Accounts/Details/Fees'
+import TextAndTag from '~components/Layout/TextAndTag'
 
 const AccountDetail = () => {
   const { organization } = useOrganization()
diff --git a/src/components/Accounts/Details/AccountDetails.tsx b/src/components/Accounts/Details/AccountDetails.tsx
index a993785a..2aa12006 100644
--- a/src/components/Accounts/Details/AccountDetails.tsx
+++ b/src/components/Accounts/Details/AccountDetails.tsx
@@ -1,11 +1,11 @@
 import { Flex, Icon, Link } from '@chakra-ui/react'
 import { OrganizationDescription } from '@vocdoni/chakra-components'
-import { useOrganization } from '@vocdoni/react-providers'
 import { ensure0x } from '@vocdoni/sdk'
 import { Trans, useTranslation } from 'react-i18next'
 import { FaUserAlt } from 'react-icons/fa'
 import { DetailsGrid, GridItemProps } from '~components/Layout/DetailsGrid'
 import { AppBaseURL } from '~constants'
+import { useOrganization } from '@vocdoni/react-providers'
 
 const AccountDetails = () => {
   const { t } = useTranslation()
diff --git a/src/components/Accounts/Details/Elections.tsx b/src/components/Accounts/Details/Elections.tsx
index eb165038..7f8850e4 100644
--- a/src/components/Accounts/Details/Elections.tsx
+++ b/src/components/Accounts/Details/Elections.tsx
@@ -1,11 +1,12 @@
 import { Flex } from '@chakra-ui/react'
-import { RoutedPaginationProvider, useOrganization, useRoutedPagination } from '@vocdoni/react-providers'
 import { useTranslation } from 'react-i18next'
-import { PaginatedAsyncList } from '~components/Layout/AsyncList'
-import { NoResultsError } from '~components/Layout/ContentError'
+import { RoutedPaginationProvider, useRoutedPagination } from '~components/Pagination/PaginationProvider'
 import { ElectionCard } from '~components/Process/Card'
 import { RoutePath } from '~constants'
 import { useOrganizationElections } from '~queries/accounts'
+import { NoResultsError } from '~components/Layout/ContentError'
+import { useOrganization } from '@vocdoni/react-providers'
+import { PaginatedAsyncList } from '~components/Layout/AsyncList'
 
 const AccountElections = () => {
   const { t } = useTranslation()
@@ -28,14 +29,15 @@ const AccountElectionsList = () => {
   const { page }: { page?: number } = useRoutedPagination()
   const { organization } = useOrganization()
 
+  if (!organization) return null
+
   const { data, isLoading, isError, error } = useOrganizationElections({
-    address: organization?.address as string,
+    address: organization.address,
     page: page,
     options: {
-      enabled: !!organization?.address,
+      enabled: !!organization.address,
     },
   })
-  if (!organization) return null
 
   return (
     <Flex direction={'column'} gap={4}>
diff --git a/src/components/Accounts/Details/Fees.tsx b/src/components/Accounts/Details/Fees.tsx
index ddbc2ee1..d9ebfb08 100644
--- a/src/components/Accounts/Details/Fees.tsx
+++ b/src/components/Accounts/Details/Fees.tsx
@@ -1,30 +1,35 @@
 import { Flex, Link, Skeleton, Td, Text, Th, Thead, Tr } from '@chakra-ui/react'
-import { PaginationProvider, useOrganization, usePagination } from '@vocdoni/react-providers'
+import { useOrganization } from '@vocdoni/react-providers'
 import { Fee, TransactionType } from '@vocdoni/sdk'
 import { Trans } from 'react-i18next'
 import { generatePath, Link as RouterLink } from 'react-router-dom'
 import { PaginatedAsyncTable } from '~components/Layout/AsyncList'
+import { PaginationProvider, usePagination } from '~components/Pagination/PaginationProvider'
 import { TransactionTypeBadge } from '~components/Transactions/TransactionCard'
 import { RoutePath } from '~constants'
 import { useDateFns } from '~i18n/use-date-fns'
 import { useAccountFees } from '~queries/accounts'
 import { generateListStub, PaginationStub } from '~utils/stubs'
 
-const AccountFees = () => (
-  <PaginationProvider>
-    <AccountFeesTable />
-  </PaginationProvider>
-)
+const AccountFees = () => {
+  return (
+    <PaginationProvider>
+      <AccountFeesTable />
+    </PaginationProvider>
+  )
+}
 
 const AccountFeesTable = () => {
   const { page } = usePagination()
   const { organization } = useOrganization()
 
-  const feesCount = organization?.feesCount ?? 0
+  if (!organization) return null
+
+  const feesCount = organization.feesCount ?? 0
 
   const { data, isError, error, isPlaceholderData } = useAccountFees({
     params: {
-      accountId: organization?.address as string,
+      accountId: organization.address,
       page,
     },
     options: {
@@ -43,8 +48,6 @@ const AccountFeesTable = () => {
     },
   })
 
-  if (!organization) return null
-
   return (
     <PaginatedAsyncTable
       isLoading={isPlaceholderData}
diff --git a/src/components/Accounts/Details/Transfers.tsx b/src/components/Accounts/Details/Transfers.tsx
index 4d42242b..bd1090e9 100644
--- a/src/components/Accounts/Details/Transfers.tsx
+++ b/src/components/Accounts/Details/Transfers.tsx
@@ -1,5 +1,5 @@
 import { Box, Flex, Icon, IconProps, Link, Skeleton, Td, Text, Th, Thead, Tooltip, Tr } from '@chakra-ui/react'
-import { PaginationProvider, useOrganization, usePagination } from '@vocdoni/react-providers'
+import { useOrganization } from '@vocdoni/react-providers'
 import { AccountData, ITransfer } from '@vocdoni/sdk'
 import { formatDistance } from 'date-fns'
 import { Trans, useTranslation } from 'react-i18next'
@@ -7,7 +7,9 @@ import { BiLogInCircle, BiLogOutCircle } from 'react-icons/bi'
 import { generatePath, Link as RouterLink } from 'react-router-dom'
 import { PaginatedAsyncTable } from '~components/Layout/AsyncList'
 import { ReducedTextAndCopy } from '~components/Layout/CopyButton'
+import { PaginationProvider, usePagination } from '~components/Pagination/PaginationProvider'
 import { RoutePath } from '~constants'
+import { useDateFns } from '~i18n/use-date-fns'
 import { useAccountTransfers } from '~queries/accounts'
 import { generateListStub, PaginationStub } from '~utils/stubs'
 
@@ -32,23 +34,29 @@ const FromToIcon = ({ isIncoming, ...rest }: { isIncoming: boolean } & IconProps
   )
 }
 
-const AccountTransfers = () => (
-  <PaginationProvider>
-    <AccountTransfersTable />
-  </PaginationProvider>
-)
+const AccountTransfers = () => {
+  return (
+    <PaginationProvider>
+      <AccountTransfersTable />
+    </PaginationProvider>
+  )
+}
 
 const AccountTransfersTable = () => {
   const { page } = usePagination()
+  const { formatDistance } = useDateFns()
+  const { t } = useTranslation()
   const { organization } = useOrganization()
 
-  const txCount = organization?.transfersCount ?? 0
+  if (!organization) return null
+
+  const txCount = organization.transfersCount ?? 0
 
   const { data, isError, error, isPlaceholderData } = useAccountTransfers({
-    address: organization?.address as string,
+    address: organization.address,
     page: page,
     options: {
-      enabled: !!organization && txCount > 0,
+      enabled: txCount > 0,
       placeholderData: {
         transfers: generateListStub<ITransfer>({
           amount: 12,
@@ -63,8 +71,6 @@ const AccountTransfersTable = () => {
     },
   })
 
-  if (!organization) return null
-
   return (
     <PaginatedAsyncTable
       isLoading={isPlaceholderData}
diff --git a/src/components/Accounts/List.tsx b/src/components/Accounts/List.tsx
index 38a19f5a..bf58ff1c 100644
--- a/src/components/Accounts/List.tsx
+++ b/src/components/Accounts/List.tsx
@@ -1,11 +1,11 @@
 import { keepPreviousData } from '@tanstack/react-query'
-import { useRoutedPagination } from '@vocdoni/react-providers'
 import { useTranslation } from 'react-i18next'
-import { AccountCard } from '~components/Accounts/Card'
-import { PaginatedAsyncList } from '~components/Layout/AsyncList'
 import { InputSearch } from '~components/Layout/Inputs'
+import { AccountCard } from '~components/Accounts/Card'
+import { useRoutedPagination } from '~components/Pagination/PaginationProvider'
 import { useOrganizationList } from '~queries/accounts'
 import { useRoutedPaginationQueryParams } from '~src/router/use-query-params'
+import { PaginatedAsyncList } from '~components/Layout/AsyncList'
 
 type FilterQueryParams = {
   accountId?: string
diff --git a/src/components/Blocks/BlocksList.tsx b/src/components/Blocks/BlocksList.tsx
index f2b0bff7..ea411c8d 100644
--- a/src/components/Blocks/BlocksList.tsx
+++ b/src/components/Blocks/BlocksList.tsx
@@ -1,11 +1,11 @@
 import { keepPreviousData } from '@tanstack/react-query'
-import { RoutedPaginationProvider, useRoutedPagination } from '@vocdoni/react-providers'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { generatePath, useNavigate } from 'react-router-dom'
 import { BlockCard } from '~components/Blocks/BlockCard'
 import { PaginatedAsyncList } from '~components/Layout/AsyncList'
 import { PopoverInputSearch } from '~components/Layout/Inputs'
+import { RoutedPaginationProvider, useRoutedPagination } from '~components/Pagination/PaginationProvider'
 import { PaginationItemsPerPage, RefreshIntervalBlocks, RoutePath } from '~constants'
 import { useBlockList } from '~queries/blocks'
 import { useChainInfo } from '~queries/stats'
@@ -14,7 +14,7 @@ export const BlocksFilter = () => {
   const { t } = useTranslation()
   const navigate = useNavigate()
   const [blockHeight, setBlockHeight] = useState('')
-  const { data: stats } = useChainInfo()
+  const { data: stats, isLoading: isLoadingStats } = useChainInfo()
 
   const blockCount = stats?.height || 0
 
@@ -27,7 +27,7 @@ export const BlocksFilter = () => {
       throw new Error(t('blocks.invalid_block_search', { defaultValue: 'Must to be a valid block height' }))
     }
     navigate(generatePath(RoutePath.Block, { height: num.toString(), tab: null, page: null }))
-  }, [blockHeight, blockCount, navigate, t])
+  }, [blockHeight, blockCount])
 
   return (
     <PopoverInputSearch
@@ -58,6 +58,8 @@ export const BlocksList = () => {
     refetchInterval: RefreshIntervalBlocks,
   })
 
+  const blockCount = stats?.height || 0
+
   const {
     data,
     isLoading: isLoadingBlocks,
diff --git a/src/components/Envelope/EnvelopeList.tsx b/src/components/Envelope/EnvelopeList.tsx
index b3d61fd4..3208ca69 100644
--- a/src/components/Envelope/EnvelopeList.tsx
+++ b/src/components/Envelope/EnvelopeList.tsx
@@ -1,13 +1,14 @@
 import { Flex, Grid } from '@chakra-ui/react'
-import { Pagination } from '@vocdoni/chakra-components'
-import { PaginationProvider, useElection, usePagination } from '@vocdoni/react-providers'
+import { useElection } from '@vocdoni/react-providers'
 import { PublishedElection, VoteSummary } from '@vocdoni/sdk'
 import { useTranslation } from 'react-i18next'
 import { ListDataDisplay } from '~components/Layout/AsyncList'
 import { NoResultsError } from '~components/Layout/ContentError'
+import { Pagination } from '~components/Pagination/Pagination'
+import { PaginationProvider, usePagination } from '~components/Pagination/PaginationProvider'
 import { useElectionVotesList } from '~queries/processes'
-import { generateListStub, PaginationStub } from '~utils/stubs'
 import { EnvelopeCard } from './EnvelopeCard'
+import { generateListStub, PaginationStub } from '~utils/stubs'
 
 export const PaginatedEnvelopeList = () => {
   const { election: e } = useElection()
diff --git a/src/components/Layout/AsyncList.tsx b/src/components/Layout/AsyncList.tsx
index 31b65391..5cbbd93e 100644
--- a/src/components/Layout/AsyncList.tsx
+++ b/src/components/Layout/AsyncList.tsx
@@ -1,8 +1,15 @@
 import { Box, Table, TableContainer, Tbody } from '@chakra-ui/react'
+import { PaginationResponse } from '@vocdoni/sdk'
 import { PropsWithChildren, ReactNode, useMemo } from 'react'
 import { ContentError, NoResultsError } from '~components/Layout/ContentError'
 import { LoadingCards, SkeletonCardsProps } from '~components/Layout/Loading'
-import { AsyncListPaginationProps, PaginatorSelector } from './RoutedPagination'
+import { Pagination } from '~components/Pagination/Pagination'
+import { RoutedPagination } from '~components/Pagination/RoutedPagination'
+
+type AsyncListPaginationProps = {
+  pagination?: Pick<PaginationResponse, 'pagination'>['pagination']
+  routedPagination?: boolean
+}
 
 type AsyncListLayoutProps<T> = {
   elements?: T[] | null | undefined
@@ -13,6 +20,12 @@ type AsyncListLayoutProps<T> = {
   isLoading?: boolean
 } & PropsWithChildren
 
+const PaginatorSelector = ({ routedPagination = true, pagination }: AsyncListPaginationProps) => {
+  if (!pagination) return null
+  if (routedPagination) return <RoutedPagination pagination={pagination} />
+  return <Pagination pagination={pagination} />
+}
+
 export const ListDataDisplay = <T,>({ elements, isError, error, noResultsMsg, children }: AsyncListLayoutProps<T>) => {
   if (isError) {
     return <ContentError error={error} />
@@ -37,15 +50,15 @@ export const PaginatedAsyncList = <T,>({
   component: React.ComponentType<{ element: T; index: number }>
 } & AsyncListLayoutProps<T> &
   AsyncListPaginationProps) => {
-  const memoizedComponents = useMemo(
-    () => elements?.map((element, index) => <Component key={index} element={element} index={index} />),
-    [Component, elements]
-  )
-
   if (isLoading) {
     return <LoadingCards spacing={4} {...skeletonProps} />
   }
 
+  const memoizedComponents = useMemo(
+    () => elements?.map((element, index) => <Component key={index} element={element} index={index} />),
+    [elements]
+  )
+
   return (
     <ListDataDisplay elements={elements} {...rest}>
       {memoizedComponents}
@@ -71,7 +84,7 @@ export const PaginatedAsyncTable = <T,>({
   AsyncListPaginationProps) => {
   const memoizedComponents = useMemo(
     () => elements?.map((element, index) => <Component key={index} element={element} index={index} />),
-    [Component, elements]
+    [elements]
   )
 
   return (
diff --git a/src/components/Layout/ContentError.tsx b/src/components/Layout/ContentError.tsx
index 64175c4f..be294fb6 100644
--- a/src/components/Layout/ContentError.tsx
+++ b/src/components/Layout/ContentError.tsx
@@ -1,4 +1,4 @@
-import { Alert, AlertIcon, Code, Stack } from '@chakra-ui/react'
+import { Alert, AlertIcon, Code, Stack, Text } from '@chakra-ui/react'
 import { Trans, useTranslation } from 'react-i18next'
 
 export const NoResultsError = ({ msg }: { msg?: string }) => {
diff --git a/src/components/Layout/CopyButton.tsx b/src/components/Layout/CopyButton.tsx
index 6cc67b87..f2470340 100644
--- a/src/components/Layout/CopyButton.tsx
+++ b/src/components/Layout/CopyButton.tsx
@@ -64,9 +64,8 @@ export const ReducedTextAndCopy = ({
   ...rest
 }: ReducedTextAndCopyProps) => {
   let text = children
-  const bpv = useBreakpointValue(breakPoint)
   // If breakpoint is true and the length of the string is more than 13 it shorts the string
-  if (breakPoint && bpv && children.length > 13) {
+  if (breakPoint && useBreakpointValue(breakPoint) && children.length > 13) {
     text = shortStr(children)
   }
 
diff --git a/src/components/Layout/IconLink.tsx b/src/components/Layout/IconLink.tsx
index 4be67a90..d7393901 100644
--- a/src/components/Layout/IconLink.tsx
+++ b/src/components/Layout/IconLink.tsx
@@ -1,8 +1,8 @@
-import { Box, Flex, Icon, IconProps, Link } from '@chakra-ui/react'
-import { PropsWithChildren } from 'react'
-import { IconType } from 'react-icons'
+import { Box, Flex, Icon, IconProps, Link, Text } from '@chakra-ui/react'
 import { generatePath, Link as RouterLink } from 'react-router-dom'
+import { PropsWithChildren } from 'react'
 import { RoutePath } from '~constants'
+import { IconType } from 'react-icons'
 import { Icons } from '~src/theme/components/Icons'
 
 export const TxIconLink = ({ block, index }: { block: number; index: number }) => (
diff --git a/src/components/Layout/RouteParamsTabs.tsx b/src/components/Layout/RouteParamsTabs.tsx
index e10bfcd0..bd995a59 100644
--- a/src/components/Layout/RouteParamsTabs.tsx
+++ b/src/components/Layout/RouteParamsTabs.tsx
@@ -1,9 +1,9 @@
-import { Tabs } from '@chakra-ui/react'
 import { TabsProps } from '@chakra-ui/tabs/dist/tabs'
 import { useEffect, useState } from 'react'
+import { Tabs } from '@chakra-ui/react'
+import useQueryParams from '~src/router/use-query-params'
 import { generatePath, useLocation, useNavigate, useParams } from 'react-router-dom'
 import { RoutePath } from '~constants'
-import useQueryParams from '~src/router/use-query-params'
 
 /**
  * Reimplementation ob Tabs component to store the selected tab in the query params
diff --git a/src/components/Layout/RoutedPagination.tsx b/src/components/Layout/RoutedPagination.tsx
deleted file mode 100644
index 528a89b9..00000000
--- a/src/components/Layout/RoutedPagination.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { useBreakpointValue } from '@chakra-ui/react'
-import { RoutedPagination as CRoutedPagination, Pagination, PaginationProps } from '@vocdoni/chakra-components'
-import { PaginationResponse } from '@vocdoni/sdk'
-
-export type AsyncListPaginationProps = {
-  pagination?: Pick<PaginationResponse, 'pagination'>['pagination']
-  routedPagination?: boolean
-}
-
-export const PaginatorSelector = ({ routedPagination = true, pagination }: AsyncListPaginationProps) => {
-  if (!pagination) return null
-  if (routedPagination) return <RoutedPagination pagination={pagination} />
-  return <Pagination pagination={pagination} />
-}
-
-export const RoutedPagination = (props: PaginationProps) => {
-  const maxButtons = useBreakpointValue({ base: 6, lg: 10 })
-
-  return <CRoutedPagination {...props} maxButtons={maxButtons} />
-}
diff --git a/src/components/Layout/ShowRawButton.tsx b/src/components/Layout/ShowRawButton.tsx
index 7fa8a564..db1f2fe6 100644
--- a/src/components/Layout/ShowRawButton.tsx
+++ b/src/components/Layout/ShowRawButton.tsx
@@ -13,10 +13,11 @@ import {
   ModalOverlay,
   useDisclosure,
 } from '@chakra-ui/react'
-import { Trans, useTranslation } from 'react-i18next'
-import { FaCode } from 'react-icons/fa'
+import { Trans } from 'react-i18next'
 import { CopyButtonIcon } from '~components/Layout/CopyButton'
 import { JsonViewer } from '~components/Layout/JsonViewer'
+import { useTranslation } from 'react-i18next'
+import { FaCode } from 'react-icons/fa'
 
 const ShowRawButton = ({ obj, ...props }: { obj: object } & Omit<ButtonProps, 'onClick'>) => {
   const { getDisclosureProps, getButtonProps } = useDisclosure()
diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx
new file mode 100644
index 00000000..e982fc0f
--- /dev/null
+++ b/src/components/Pagination/Pagination.tsx
@@ -0,0 +1,223 @@
+import { Button, ButtonGroup, ButtonGroupProps, ButtonProps, Input, InputProps, Text } from '@chakra-ui/react'
+import { ReactElement, useMemo, useState } from 'react'
+import { Link as RouterLink } from 'react-router-dom'
+import { usePagination, useRoutedPagination } from './PaginationProvider'
+import { PaginationResponse } from '@vocdoni/sdk'
+import { Trans } from 'react-i18next'
+
+export type PaginationProps = ButtonGroupProps & {
+  maxButtons?: number | false
+  buttonProps?: ButtonProps
+  inputProps?: InputProps
+} & PaginationResponse
+
+type PaginatorButtonProps = {
+  page: number
+  currentPage: number
+} & ButtonProps
+
+const PageButton = ({ page, currentPage, ...rest }: PaginatorButtonProps) => (
+  <Button isActive={currentPage === page} {...rest}>
+    {page + 1}
+  </Button>
+)
+
+const RoutedPageButton = ({ page, currentPage, to, ...rest }: PaginatorButtonProps & { to: string }) => (
+  <Button as={RouterLink} to={to} isActive={currentPage === page} {...rest}>
+    {page + 1}
+  </Button>
+)
+
+type EllipsisButtonProps = ButtonProps & {
+  gotoPage: (page: number) => void
+  inputProps?: InputProps
+}
+
+const EllipsisButton = ({ gotoPage, inputProps, ...rest }: EllipsisButtonProps) => {
+  const [ellipsisInput, setEllipsisInput] = useState(false)
+
+  if (ellipsisInput) {
+    return (
+      <Input
+        placeholder='Page #'
+        width='50px'
+        {...inputProps}
+        onKeyDown={(e) => {
+          if (e.target instanceof HTMLInputElement && e.key === 'Enter') {
+            const pageNumber = Number(e.target.value)
+            gotoPage(pageNumber)
+            setEllipsisInput(false)
+          }
+        }}
+        onBlur={() => setEllipsisInput(false)}
+        autoFocus
+      />
+    )
+  }
+
+  return (
+    <Button
+      as='a'
+      href='#goto-page'
+      {...rest}
+      onClick={(e) => {
+        e.preventDefault()
+        setEllipsisInput(true)
+      }}
+    >
+      ...
+    </Button>
+  )
+}
+
+type CreatePageButtonType = (i: number) => ReactElement
+type GotoPageType = (page: number) => void
+
+const usePaginationPages = (
+  currentPage: number,
+  totalPages: number | undefined,
+  maxButtons: number | undefined | false,
+  gotoPage: GotoPageType,
+  createPageButton: CreatePageButtonType,
+  inputProps?: InputProps,
+  buttonProps?: ButtonProps
+) => {
+  return useMemo(() => {
+    if (totalPages === undefined) return []
+
+    let pages: ReactElement[] = []
+
+    // Create an array of all page buttons
+    for (let i = 0; i < totalPages; i++) {
+      pages.push(createPageButton(i))
+    }
+
+    if (!maxButtons || totalPages <= maxButtons) {
+      return pages
+    }
+
+    const startEllipsis = (
+      <EllipsisButton key='start-ellipsis' gotoPage={gotoPage} inputProps={inputProps} {...buttonProps} />
+    )
+    const endEllipsis = (
+      <EllipsisButton key='end-ellipsis' gotoPage={gotoPage} inputProps={inputProps} {...buttonProps} />
+    )
+
+    // Add ellipsis and slice the array accordingly
+    const sideButtons = 2 // First and last page
+    const availableButtons = maxButtons - sideButtons // Buttons we can distribute around the current page
+
+    if (currentPage <= availableButtons / 2) {
+      // Near the start
+      return [...pages.slice(0, availableButtons), endEllipsis, pages[totalPages - 1]]
+    } else if (currentPage >= totalPages - 1 - availableButtons / 2) {
+      // Near the end
+      return [pages[0], startEllipsis, ...pages.slice(totalPages - availableButtons, totalPages)]
+    } else {
+      // In the middle
+      const startPage = currentPage - Math.floor((availableButtons - 1) / 2)
+      const endPage = currentPage + Math.floor(availableButtons / 2)
+      return [pages[0], startEllipsis, ...pages.slice(startPage, endPage - 1), endEllipsis, pages[totalPages - 1]]
+    }
+  }, [currentPage, totalPages, maxButtons, gotoPage])
+}
+
+const PaginationButtons = ({
+  totalPages,
+  totalItems,
+  currentPage,
+  goToPage,
+  createPageButton,
+  maxButtons = 10,
+  buttonProps,
+  ...rest
+}: {
+  totalPages: number | undefined
+  totalItems: number | undefined
+  currentPage: number
+  createPageButton: CreatePageButtonType
+  goToPage: GotoPageType
+} & ButtonGroupProps &
+  Pick<PaginationProps, 'maxButtons' | 'buttonProps'>) => {
+  const pages = usePaginationPages(
+    currentPage,
+    totalPages,
+    maxButtons ? Math.max(5, maxButtons) : false,
+    (page) => {
+      if (page >= 0 && totalPages && page < totalPages) {
+        goToPage(page)
+      }
+    },
+    createPageButton
+  )
+
+  return (
+    <>
+      <ButtonGroup {...rest}>
+        {totalPages === undefined ? (
+          <>
+            <Button
+              key='previous'
+              onClick={() => goToPage(currentPage - 1)}
+              isDisabled={currentPage === 0}
+              {...buttonProps}
+            >
+              Previous
+            </Button>
+            <Button key='next' onClick={() => goToPage(currentPage + 1)} {...buttonProps}>
+              Next
+            </Button>
+          </>
+        ) : (
+          pages
+        )}
+      </ButtonGroup>
+      {totalItems && (
+        <Text color={'lighterText'}>
+          <Trans i18nKey={'filters.total_results'} count={totalItems}>
+            Showing a total of {{ count: totalItems }} results
+          </Trans>
+        </Text>
+      )}
+    </>
+  )
+}
+
+export const Pagination = ({ maxButtons = 10, buttonProps, inputProps, pagination, ...rest }: PaginationProps) => {
+  const { setPage } = usePagination()
+  const totalPages = pagination.lastPage + 1
+  const page = pagination.currentPage
+
+  return (
+    <PaginationButtons
+      goToPage={(page) => setPage(page)}
+      createPageButton={(i) => (
+        <PageButton key={i} page={i} currentPage={page} onClick={() => setPage(i)} {...buttonProps} />
+      )}
+      currentPage={page}
+      totalPages={totalPages}
+      totalItems={pagination.totalItems}
+      {...rest}
+    />
+  )
+}
+
+export const RoutedPagination = ({ maxButtons = 10, buttonProps, pagination, ...rest }: PaginationProps) => {
+  const { getPathForPage, setPage } = useRoutedPagination()
+
+  const totalPages = pagination.lastPage + 1
+  const currentPage = pagination.currentPage
+
+  return (
+    <PaginationButtons
+      goToPage={(page) => setPage(page)}
+      createPageButton={(i) => (
+        <RoutedPageButton key={i} to={getPathForPage(i + 1)} page={i} currentPage={currentPage} {...buttonProps} />
+      )}
+      currentPage={currentPage}
+      totalPages={totalPages}
+      totalItems={pagination.totalItems}
+      {...rest}
+    />
+  )
+}
diff --git a/src/components/Pagination/PaginationProvider.tsx b/src/components/Pagination/PaginationProvider.tsx
new file mode 100644
index 00000000..02261f36
--- /dev/null
+++ b/src/components/Pagination/PaginationProvider.tsx
@@ -0,0 +1,65 @@
+import { createContext, PropsWithChildren, useCallback, useContext, useState } from 'react'
+import { generatePath, useLocation, useNavigate, useParams } from 'react-router-dom'
+
+export type PaginationContextProps = {
+  page: number
+  setPage: (page: number) => void
+}
+
+export type RoutedPaginationContextProps = Omit<PaginationContextProps, 'setPage'> & {
+  path: string
+  // Util function that generates the path for a given page
+  // (it return the actual path with queryParams and other route params but changing the page)
+  getPathForPage: (page: number, queryParams?: string) => string
+  setPage: (page: number, queryParams?: string) => void
+}
+
+const PaginationContext = createContext<PaginationContextProps | undefined>(undefined)
+const RoutedPaginationContext = createContext<RoutedPaginationContextProps | undefined>(undefined)
+
+export const usePagination = (): PaginationContextProps => {
+  const context = useContext(PaginationContext)
+  if (!context) {
+    throw new Error('usePagination must be used within a PaginationProvider')
+  }
+  return context
+}
+
+export const useRoutedPagination = (): RoutedPaginationContextProps => {
+  const context = useContext(RoutedPaginationContext)
+  if (!context) {
+    throw new Error('useRoutedPagination must be used within a RoutedPaginationProvider')
+  }
+  return context
+}
+
+export type PaginationProviderProps = {}
+
+export type RoutedPaginationProviderProps = PaginationProviderProps & {
+  path: string
+}
+
+export const RoutedPaginationProvider = ({ path, ...rest }: PropsWithChildren<RoutedPaginationProviderProps>) => {
+  const { search } = useLocation()
+  const { page, ...extraParams }: { page?: number } = useParams()
+  const p = page && page > 0 ? page - 1 : 0
+
+  const navigate = useNavigate()
+
+  const getPathForPage = (page: number, queryParams?: string) => {
+    const p = queryParams || search
+    return generatePath(path, { page, ...extraParams }) + p
+  }
+
+  const setPage = (page: number, queryParams?: string) => {
+    navigate(getPathForPage(page, queryParams))
+  }
+
+  return <RoutedPaginationContext.Provider value={{ page: p, path, getPathForPage, setPage }} {...rest} />
+}
+
+export const PaginationProvider = ({ ...rest }: PropsWithChildren<PaginationProviderProps>) => {
+  const [page, setPage] = useState<number>(0)
+
+  return <PaginationContext.Provider value={{ page, setPage }} {...rest} />
+}
diff --git a/src/components/Pagination/RoutedPagination.tsx b/src/components/Pagination/RoutedPagination.tsx
new file mode 100644
index 00000000..3015b790
--- /dev/null
+++ b/src/components/Pagination/RoutedPagination.tsx
@@ -0,0 +1,9 @@
+import { useBreakpointValue } from '@chakra-ui/react'
+import { RoutedPagination as Pagination, PaginationProps } from './Pagination'
+
+// Note this component is a custom definition of the pagination component that will end in chakra-components
+export const RoutedPagination = (props: PaginationProps) => {
+  const maxButtons = useBreakpointValue({ base: 6, lg: 10 })
+
+  return <Pagination {...props} maxButtons={maxButtons} />
+}
diff --git a/src/components/Process/ProcessList.tsx b/src/components/Process/ProcessList.tsx
index 431ab801..a43ea101 100644
--- a/src/components/Process/ProcessList.tsx
+++ b/src/components/Process/ProcessList.tsx
@@ -12,18 +12,18 @@ import {
   PopoverTrigger,
 } from '@chakra-ui/react'
 import { keepPreviousData } from '@tanstack/react-query'
-import { useRoutedPagination } from '@vocdoni/react-providers'
 import { FetchElectionsParameters } from '@vocdoni/sdk'
-import { useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
-import { LuListFilter } from 'react-icons/lu'
-import { PaginatedAsyncList } from '~components/Layout/AsyncList'
 import { InputSearch } from '~components/Layout/Inputs'
+import { useRoutedPagination } from '~components/Pagination/PaginationProvider'
 import { useProcessList } from '~queries/processes'
-import { useRoutedPaginationQueryParams } from '~src/router/use-query-params'
 import { isEmpty } from '~utils/objects'
-import { isValidPartialProcessId } from '~utils/strings'
 import { ElectionCard } from './Card'
+import { LuListFilter } from 'react-icons/lu'
+import { isValidPartialProcessId } from '~utils/strings'
+import { useState } from 'react'
+import { useRoutedPaginationQueryParams } from '~src/router/use-query-params'
+import { PaginatedAsyncList } from '~components/Layout/AsyncList'
 
 type FilterQueryParams = {
   [K in keyof Omit<FetchElectionsParameters, 'organizationId'>]: string
diff --git a/src/components/Stats/ChainDetails/ChainInfo.tsx b/src/components/Stats/ChainDetails/ChainInfo.tsx
index 960eb50b..9335d86e 100644
--- a/src/components/Stats/ChainDetails/ChainInfo.tsx
+++ b/src/components/Stats/ChainDetails/ChainInfo.tsx
@@ -1,12 +1,12 @@
 import { Badge, HStack, Text, VStack } from '@chakra-ui/react'
 import { Trans, useTranslation } from 'react-i18next'
+import { useChainInfo } from '~queries/stats'
+import { useDateFns } from '~i18n/use-date-fns'
 import { MdSpeed } from 'react-icons/md'
 import { DetailsGrid, GridItemProps } from '~components/Layout/DetailsGrid'
-import { PriceFactorsModal } from '~components/Stats/ChainDetails/PriceFactors'
-import { TxCostsModal } from '~components/Stats/ChainDetails/TxCosts'
 import { StatsCardWrapper } from '~components/Stats/StatsCardWrapper'
-import { useDateFns } from '~i18n/use-date-fns'
-import { useChainInfo } from '~queries/stats'
+import { TxCostsModal } from '~components/Stats/ChainDetails/TxCosts'
+import { PriceFactorsModal } from '~components/Stats/ChainDetails/PriceFactors'
 
 const SyncBadge = ({ syncing }: { syncing: boolean }) => {
   const { t } = useTranslation()
diff --git a/src/components/Stats/ChainDetails/PriceFactors.tsx b/src/components/Stats/ChainDetails/PriceFactors.tsx
index 35ad39bb..269b813d 100644
--- a/src/components/Stats/ChainDetails/PriceFactors.tsx
+++ b/src/components/Stats/ChainDetails/PriceFactors.tsx
@@ -1,10 +1,29 @@
-import { Text, VStack } from '@chakra-ui/react'
+import { useChainCosts } from '~queries/stats'
 import { useTranslation } from 'react-i18next'
 import { IoIosPricetag } from 'react-icons/io'
-import { ContentError } from '~components/Layout/ContentError'
+import {
+  Box,
+  Button,
+  HStack,
+  Icon,
+  IconButton,
+  Link,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Text,
+  useDisclosure,
+  VStack,
+} from '@chakra-ui/react'
 import { DetailsGrid } from '~components/Layout/DetailsGrid'
+import { Icons } from '~src/theme/components/Icons'
+import { ContentError } from '~components/Layout/ContentError'
+import { RawModal } from '~components/Layout/ShowRawButton'
 import { StatsModalWrapper } from '~components/Stats/StatsCardWrapper'
-import { useChainCosts } from '~queries/stats'
 
 export const PriceFactorsModal = () => {
   const { t } = useTranslation()
diff --git a/src/components/Stats/ChainDetails/StatsCards.tsx b/src/components/Stats/ChainDetails/StatsCards.tsx
index fa0c5544..aa068b6a 100644
--- a/src/components/Stats/ChainDetails/StatsCards.tsx
+++ b/src/components/Stats/ChainDetails/StatsCards.tsx
@@ -1,12 +1,12 @@
-import { Box, Card, CardBody, Flex, Grid, Heading, Icon, Link, Stack, Text } from '@chakra-ui/react'
-import { useEffect, useState } from 'react'
-import { useTranslation } from 'react-i18next'
 import { IconType } from 'react-icons'
+import { Box, Card, CardBody, Flex, Grid, Heading, Icon, Link, Stack, Text } from '@chakra-ui/react'
 import { generatePath, Link as RouterLink } from 'react-router-dom'
-import { ContentError } from '~components/Layout/ContentError'
-import { RefreshIntervalBlocks, RoutePath } from '~constants'
+import { useEffect, useState } from 'react'
 import { useChainInfo } from '~queries/stats'
+import { RefreshIntervalBlocks, RoutePath } from '~constants'
+import { useTranslation } from 'react-i18next'
 import { Icons } from '~src/theme/components/Icons'
+import { ContentError } from '~components/Layout/ContentError'
 
 interface IStatsCardProps {
   title: string
diff --git a/src/components/Stats/ChainDetails/TxCosts.tsx b/src/components/Stats/ChainDetails/TxCosts.tsx
index 4b96d636..35fb27f1 100644
--- a/src/components/Stats/ChainDetails/TxCosts.tsx
+++ b/src/components/Stats/ChainDetails/TxCosts.tsx
@@ -1,8 +1,8 @@
+import { useChainCosts, useTxsCosts } from '~queries/stats'
 import { useTranslation } from 'react-i18next'
+import { Icons } from '~src/theme/components/Icons'
 import { DetailsGrid, GridItemProps } from '~components/Layout/DetailsGrid'
 import { StatsModalWrapper } from '~components/Stats/StatsCardWrapper'
-import { useTxsCosts } from '~queries/stats'
-import { Icons } from '~src/theme/components/Icons'
 
 export const TxCostsModal = () => {
   const { t } = useTranslation()
diff --git a/src/components/Stats/StatsCardWrapper.tsx b/src/components/Stats/StatsCardWrapper.tsx
index dad07048..44b4e155 100644
--- a/src/components/Stats/StatsCardWrapper.tsx
+++ b/src/components/Stats/StatsCardWrapper.tsx
@@ -23,9 +23,12 @@ import {
 } from '@chakra-ui/react'
 import { PropsWithChildren } from 'react'
 import { IconType } from 'react-icons'
-import { ContentError, ContentErrorType } from '~components/Layout/ContentError'
 import { RawModal } from '~components/Layout/ShowRawButton'
+import { ContentError, ContentErrorType } from '~components/Layout/ContentError'
+import { useTranslation } from 'react-i18next/index'
+import { useChainCosts } from '~queries/stats'
 import { Icons } from '~src/theme/components/Icons'
+import { IoIosPricetag } from 'react-icons/io'
 
 interface StatisticsCardProps {
   title: string
diff --git a/src/components/Stats/index.tsx b/src/components/Stats/index.tsx
index 774d8ac4..df5d6cad 100644
--- a/src/components/Stats/index.tsx
+++ b/src/components/Stats/index.tsx
@@ -1,9 +1,9 @@
-import { Flex } from '@chakra-ui/react'
+import { Flex, VStack } from '@chakra-ui/react'
 import { useTranslation } from 'react-i18next'
 import { VscGraphLine } from 'react-icons/vsc'
+import { LatestBlocks } from '~components/Stats/LatestBlocks'
 import { ChainInfo } from '~components/Stats/ChainDetails/ChainInfo'
 import { StatsCards } from '~components/Stats/ChainDetails/StatsCards'
-import { LatestBlocks } from '~components/Stats/LatestBlocks'
 import { StatsCardWrapper } from '~components/Stats/StatsCardWrapper'
 
 const Stats = () => {
diff --git a/src/components/Transactions/TransactionList.tsx b/src/components/Transactions/TransactionList.tsx
index fdef979f..a86f2338 100644
--- a/src/components/Transactions/TransactionList.tsx
+++ b/src/components/Transactions/TransactionList.tsx
@@ -1,12 +1,12 @@
 import { Flex } from '@chakra-ui/react'
 import { keepPreviousData } from '@tanstack/react-query'
-import { RoutedPaginationProvider, useRoutedPagination } from '@vocdoni/react-providers'
 import { IChainTxListResponse } from '@vocdoni/sdk'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { generatePath, useNavigate } from 'react-router-dom'
 import { PaginatedAsyncList } from '~components/Layout/AsyncList'
 import { PopoverInputSearch } from '~components/Layout/Inputs'
+import { RoutedPaginationProvider, useRoutedPagination } from '~components/Pagination/PaginationProvider'
 import { TransactionCard } from '~components/Transactions/TransactionCard'
 import { RoutePath } from '~constants'
 import { useBlockTransactions } from '~queries/blocks'
@@ -28,7 +28,7 @@ export const TransactionFilter = () => {
       throw new Error(t('transactions.invalid_tx_search', { defaultValue: 'Must to be a valid tx hash' }))
     }
     navigate(generatePath(RoutePath.TransactionByHash, { hash: txHash, tab: null }))
-  }, [data, txHash, navigate, t])
+  }, [txHash, data])
 
   return (
     <PopoverInputSearch
diff --git a/src/components/Transactions/TxDetails/SpecificTxDetails.tsx b/src/components/Transactions/TxDetails/SpecificTxDetails.tsx
index dd18be41..7297c582 100644
--- a/src/components/Transactions/TxDetails/SpecificTxDetails.tsx
+++ b/src/components/Transactions/TxDetails/SpecificTxDetails.tsx
@@ -14,12 +14,13 @@ import { TFunction } from 'i18next/index'
 import { useTranslation } from 'react-i18next'
 import { BiTransferAlt } from 'react-icons/bi'
 import { generatePath } from 'react-router-dom'
-import { SmallAccountCard } from '~components/Accounts/Card'
-import { VotePackage } from '~components/Envelope/Detail'
 import { ReducedTextAndCopy } from '~components/Layout/CopyButton'
 import { DetailsGrid, GridItemProps } from '~components/Layout/DetailsGrid'
+import { SmallAccountCard } from '~components/Accounts/Card'
 import { RoutePath } from '~constants'
 import { b64ToHex } from '~utils/objects'
+import { VotePackage } from '~components/Envelope/Detail'
+import { VotePackageType } from '@vocdoni/chakra-components'
 
 export const processIdGridItem = (processId: string, t: TFunction): GridItemProps => {
   return {
diff --git a/src/components/Validators/Detail.tsx b/src/components/Validators/Detail.tsx
index 79c242ec..908d824d 100644
--- a/src/components/Validators/Detail.tsx
+++ b/src/components/Validators/Detail.tsx
@@ -1,13 +1,13 @@
 import { Flex, Heading, HStack, Tab, TabList, TabPanel, TabPanels, Text, VStack } from '@chakra-ui/react'
 import { ensure0x, IChainValidator } from '@vocdoni/sdk'
 import { Trans, useTranslation } from 'react-i18next'
-import { generatePath } from 'react-router-dom'
-import { ReducedTextAndCopy } from '~components/Layout/CopyButton'
 import { DetailsGrid, GridItemProps } from '~components/Layout/DetailsGrid'
-import { BlockIconLink } from '~components/Layout/IconLink'
 import { RouteParamsTabs } from '~components/Layout/RouteParamsTabs'
 import { RawContentBox } from '~components/Layout/ShowRawButton'
+import { ReducedTextAndCopy } from '~components/Layout/CopyButton'
+import { BlockIconLink } from '~components/Layout/IconLink'
 import { ValidatorName } from '~components/Validators/ValidatorCard'
+import { generatePath } from 'react-router-dom'
 import { RoutePath } from '~constants'
 
 const DetailsTab = ({ validator }: { validator: IChainValidator }) => {
diff --git a/src/components/Validators/ValidatorCard.tsx b/src/components/Validators/ValidatorCard.tsx
index f0eeb6dc..0c9bf51d 100644
--- a/src/components/Validators/ValidatorCard.tsx
+++ b/src/components/Validators/ValidatorCard.tsx
@@ -1,10 +1,10 @@
 import { CardBody, Flex, HStack, Text } from '@chakra-ui/react'
-import { IChainValidator } from '@vocdoni/sdk'
 import { Trans } from 'react-i18next'
-import { generatePath } from 'react-router-dom'
 import { ReducedTextAndCopy } from '~components/Layout/CopyButton'
-import LinkCard from '~components/Layout/LinkCard'
+import { generatePath } from 'react-router-dom'
 import { RoutePath } from '~constants'
+import LinkCard from '~components/Layout/LinkCard'
+import { IChainValidator } from '@vocdoni/sdk'
 
 export const ValidatorName = ({ name, useCopy, address }: { name?: string; useCopy?: boolean; address: string }) => {
   const showName = !!name
diff --git a/src/components/Verify/index.tsx b/src/components/Verify/index.tsx
index 2afc357d..3027091a 100644
--- a/src/components/Verify/index.tsx
+++ b/src/components/Verify/index.tsx
@@ -1,10 +1,10 @@
+import addVote from '/images/add-vote.svg'
 import { Box, Button, Flex, Image, Text } from '@chakra-ui/react'
 import { useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import { generatePath, useNavigate, useParams } from 'react-router-dom'
 import { InputSearch } from '~components/Layout/Inputs'
 import { RoutePath } from '~constants'
-import addVote from '/images/add-vote.svg'
 
 const SearchVote = ({ compact }: { compact?: boolean }) => {
   const { verifier: urlVerifier }: { verifier?: string } = useParams()
diff --git a/src/main.tsx b/src/main.tsx
index b5c0b6f3..388ebe3d 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -2,10 +2,10 @@ import { ChakraProvider } from '@chakra-ui/react'
 import { StrictMode } from 'react'
 import * as ReactDOM from 'react-dom/client'
 import { App } from './App'
-import './i18n'
 import reportWebVitals from './reportWebVitals'
 import * as serviceWorker from './serviceWorker'
 import theme from './theme'
+import './i18n'
 
 const container = document.getElementById('root')
 if (!container) throw new Error('Failed to find the root element')
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 22dbde50..97956c68 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -1,6 +1,6 @@
-import { IChainGetInfoResponse } from '@vocdoni/sdk'
-import { useLoaderData } from 'react-router-dom'
 import LandingPage from '~components/Home'
+import { useLoaderData } from 'react-router-dom'
+import { IChainGetInfoResponse } from '@vocdoni/sdk'
 import { useChainInfo } from '~queries/stats'
 
 const Home = () => {
diff --git a/src/pages/accounts.tsx b/src/pages/accounts.tsx
index 1268c7e2..5b30eb2d 100644
--- a/src/pages/accounts.tsx
+++ b/src/pages/accounts.tsx
@@ -1,9 +1,9 @@
-import { RoutedPaginationProvider } from '@vocdoni/react-providers'
-import { useTranslation } from 'react-i18next'
 import { AccountsFilter, AccountsList } from '~components/Accounts/List'
 import ListPageLayout from '~components/Layout/ListPageLayout'
-import { RefreshIntervalPagination, RoutePath } from '~constants'
 import { useOrganizationCount } from '~queries/accounts'
+import { useTranslation } from 'react-i18next'
+import { RefreshIntervalPagination, RoutePath } from '~constants'
+import { RoutedPaginationProvider } from '~components/Pagination/PaginationProvider'
 
 const OrganizationList = () => {
   const { t } = useTranslation()
diff --git a/src/pages/block.tsx b/src/pages/block.tsx
index 21a9bf6d..d404f54b 100644
--- a/src/pages/block.tsx
+++ b/src/pages/block.tsx
@@ -1,6 +1,6 @@
-import { IChainBlockInfoResponse } from '@vocdoni/sdk'
-import { useLoaderData } from 'react-router-dom'
 import { BlockDetail as BlockDetailView } from '~components/Blocks/Detail'
+import { useLoaderData } from 'react-router-dom'
+import { IChainBlockInfoResponse } from '@vocdoni/sdk'
 
 const BlockDetail = () => {
   const block = useLoaderData() as IChainBlockInfoResponse
diff --git a/src/pages/blocks.tsx b/src/pages/blocks.tsx
index faae80bf..dd81ea88 100644
--- a/src/pages/blocks.tsx
+++ b/src/pages/blocks.tsx
@@ -1,7 +1,7 @@
-import { useTranslation } from 'react-i18next'
-import { BlocksFilter, PaginatedBlocksList } from '~components/Blocks/BlocksList'
 import ListPageLayout from '~components/Layout/ListPageLayout'
+import { useTranslation } from 'react-i18next'
 import { useChainInfo } from '~queries/stats'
+import { BlocksFilter, PaginatedBlocksList } from '~components/Blocks/BlocksList'
 
 const BlocksList = () => {
   const { t } = useTranslation()
diff --git a/src/pages/processes.tsx b/src/pages/processes.tsx
index e8852aea..fc11a036 100644
--- a/src/pages/processes.tsx
+++ b/src/pages/processes.tsx
@@ -1,13 +1,13 @@
-import { RoutedPaginationProvider } from '@vocdoni/react-providers'
-import { useTranslation } from 'react-i18next'
 import ListPageLayout from '~components/Layout/ListPageLayout'
+import { useTranslation } from 'react-i18next'
+import { useProcessesCount } from '~queries/processes'
 import {
   ProcessList as PaginatedProcessList,
   ProcessByTypeFilter,
   ProcessSearchBox,
 } from '~components/Process/ProcessList'
 import { RefreshIntervalPagination, RoutePath } from '~constants'
-import { useProcessesCount } from '~queries/processes'
+import { RoutedPaginationProvider } from '~components/Pagination/PaginationProvider'
 
 const ProcessList = () => {
   const { t } = useTranslation()
diff --git a/src/pages/transaction.tsx b/src/pages/transaction.tsx
index bf7b2bde..883da2e1 100644
--- a/src/pages/transaction.tsx
+++ b/src/pages/transaction.tsx
@@ -1,6 +1,6 @@
-import { ErrTransactionNotFound, Tx } from '@vocdoni/sdk'
 import { useLoaderData } from 'react-router-dom'
 import { TransactionDetail as TransactionDetailView } from '~components/Transactions/Detail'
+import { ErrTransactionNotFound, Tx } from '@vocdoni/sdk'
 
 const TransactionDetail = () => {
   const tx = useLoaderData() as Tx
diff --git a/src/pages/transactions.tsx b/src/pages/transactions.tsx
index 9b673a0c..44c2622f 100644
--- a/src/pages/transactions.tsx
+++ b/src/pages/transactions.tsx
@@ -1,8 +1,8 @@
-import { useTranslation } from 'react-i18next'
 import ListPageLayout from '~components/Layout/ListPageLayout'
+import { useTranslation } from 'react-i18next'
 import { PaginatedTransactionList, TransactionFilter } from '~components/Transactions/TransactionList'
-import { RefreshIntervalPagination } from '~constants'
 import { useTransactionsCount } from '~queries/transactions'
+import { RefreshIntervalPagination } from '~constants'
 
 const TransactionsList = () => {
   const { t } = useTranslation()
diff --git a/src/pages/validator.tsx b/src/pages/validator.tsx
index 4a0211be..a98bc2fb 100644
--- a/src/pages/validator.tsx
+++ b/src/pages/validator.tsx
@@ -1,5 +1,5 @@
-import { ensure0x, IChainValidator, IChainValidatorsListResponse } from '@vocdoni/sdk'
 import { useLoaderData, useParams } from 'react-router-dom'
+import { ensure0x, IChainValidator, IChainValidatorsListResponse } from '@vocdoni/sdk'
 import { ValidatorDetail } from '~components/Validators/Detail'
 
 const Validator = () => {
diff --git a/src/pages/validators.tsx b/src/pages/validators.tsx
index 9ba2d0da..1f5f21cb 100644
--- a/src/pages/validators.tsx
+++ b/src/pages/validators.tsx
@@ -1,9 +1,9 @@
-import { IChainValidatorsListResponse } from '@vocdoni/sdk'
+import ListPageLayout from '~components/Layout/ListPageLayout'
 import { useTranslation } from 'react-i18next'
 import { useLoaderData } from 'react-router-dom'
-import { PaginatedAsyncList } from '~components/Layout/AsyncList'
-import ListPageLayout from '~components/Layout/ListPageLayout'
+import { IChainValidatorsListResponse } from '@vocdoni/sdk'
 import { ValidatorCard } from '~components/Validators/ValidatorCard'
+import { PaginatedAsyncList } from '~components/Layout/AsyncList'
 
 const Validators = () => {
   const validators = (useLoaderData() as IChainValidatorsListResponse).validators
diff --git a/src/pages/verify.tsx b/src/pages/verify.tsx
index 1218f33e..082290d4 100644
--- a/src/pages/verify.tsx
+++ b/src/pages/verify.tsx
@@ -1,11 +1,11 @@
+import { useParams } from 'react-router-dom'
+import { useVoteInfo } from '~queries/vote'
+import { VerifyForm, VerifyFormMinified } from '~components/Verify'
+import { Loading } from '~components/Layout/Loading'
 import { Flex, Heading } from '@chakra-ui/react'
 import { Trans } from 'react-i18next'
-import { useParams } from 'react-router-dom'
 import EnvelopeDetail from '~components/Envelope/Detail'
-import { Loading } from '~components/Layout/Loading'
-import { VerifyForm, VerifyFormMinified } from '~components/Verify'
 import { RoutePath } from '~constants'
-import { useVoteInfo } from '~queries/vote'
 
 const Verify = () => {
   const { verifier }: { verifier?: string } = useParams()
diff --git a/src/queries/processes.ts b/src/queries/processes.ts
index eaecc8a8..1407b065 100644
--- a/src/queries/processes.ts
+++ b/src/queries/processes.ts
@@ -8,9 +8,9 @@ import {
   IElectionKeysResponse,
   IVoteListResponse,
 } from '@vocdoni/sdk'
-import { PaginationItemsPerPage } from '~constants'
 import { useChainInfo, useChainInfoOptions } from '~queries/stats'
 import { isValidPartialProcessId } from '~utils/strings'
+import { PaginationItemsPerPage } from '~constants'
 
 export const useProcessList = ({
   filters,
diff --git a/src/queries/transactions.ts b/src/queries/transactions.ts
index d8f8b70f..cf788db5 100644
--- a/src/queries/transactions.ts
+++ b/src/queries/transactions.ts
@@ -1,8 +1,8 @@
+import { useChainInfo, useChainInfoOptions } from '~queries/stats'
 import { useQuery, UseQueryOptions } from '@tanstack/react-query'
-import { ExtendedSDKClient } from '@vocdoni/extended-sdk'
-import { useClient } from '@vocdoni/react-providers'
 import { FetchTransactionsParametersWithPagination, IChainTxListResponse } from '@vocdoni/sdk'
-import { useChainInfo, useChainInfoOptions } from '~queries/stats'
+import { useClient } from '@vocdoni/react-providers'
+import { ExtendedSDKClient } from '@vocdoni/extended-sdk'
 
 export const useTransactionList = ({
   params,
diff --git a/src/queries/vote.ts b/src/queries/vote.ts
index 48bb12a6..f0dbddd5 100644
--- a/src/queries/vote.ts
+++ b/src/queries/vote.ts
@@ -1,7 +1,7 @@
 import { useQuery, UseQueryOptions } from '@tanstack/react-query'
-import { ExtendedSDKClient } from '@vocdoni/extended-sdk'
-import { useClient } from '@vocdoni/react-providers'
 import { VoteInfoResponse } from '@vocdoni/sdk'
+import { useClient } from '@vocdoni/react-providers'
+import { ExtendedSDKClient } from '@vocdoni/extended-sdk'
 
 export const useVoteInfo = ({
   verifier,
diff --git a/src/router/errors/ElectionError.tsx b/src/router/errors/ElectionError.tsx
index 50863bc6..11a9f731 100644
--- a/src/router/errors/ElectionError.tsx
+++ b/src/router/errors/ElectionError.tsx
@@ -1,8 +1,9 @@
-import { Flex, Heading } from '@chakra-ui/react'
+import { Flex, Heading, Text } from '@chakra-ui/react'
 import { useParams, useRouteError } from 'react-router-dom'
-import { ReducedTextAndCopy } from '~components/Layout/CopyButton'
 import ShowRawButton from '~components/Layout/ShowRawButton'
 import RouteError from '~src/router/errors/RouteError'
+import { PublishedElection } from '@vocdoni/sdk'
+import { ReducedTextAndCopy } from '~components/Layout/CopyButton'
 
 export const ElectionError = () => {
   const error = useRouteError() as Error & { raw?: unknown; electionId: string }
diff --git a/src/router/use-query-params.ts b/src/router/use-query-params.ts
index 104dd471..fe6d7669 100644
--- a/src/router/use-query-params.ts
+++ b/src/router/use-query-params.ts
@@ -1,6 +1,6 @@
-import { useRoutedPagination } from '@vocdoni/react-providers'
 import { useMemo } from 'react'
 import { useLocation, useNavigate } from 'react-router-dom'
+import { useRoutedPagination } from '~components/Pagination/PaginationProvider'
 
 export type QueryParamsType = Record<string, string>
 
diff --git a/src/theme/components/Icons.ts b/src/theme/components/Icons.ts
index ee952465..0538d460 100644
--- a/src/theme/components/Icons.ts
+++ b/src/theme/components/Icons.ts
@@ -1,10 +1,10 @@
 import { IconType } from 'react-icons'
 import { BiTransferAlt } from 'react-icons/bi'
-import { FaExternalLinkAlt } from 'react-icons/fa'
-import { FiInfo } from 'react-icons/fi'
-import { GrValidate } from 'react-icons/gr'
 import { HiOutlineCube } from 'react-icons/hi2'
 import { IoTimeOutline } from 'react-icons/io5'
+import { GrValidate } from 'react-icons/gr'
+import { FaExternalLinkAlt } from 'react-icons/fa'
+import { FiInfo } from 'react-icons/fi'
 
 type IconName = 'BlockIcon' | 'TxIcon' | 'ClockIcon' | 'ValidatorIcon' | 'ExternalIcon' | 'InfoIcon'
 
diff --git a/src/theme/components/index.ts b/src/theme/components/index.ts
index cb6da072..1c96f1d8 100644
--- a/src/theme/components/index.ts
+++ b/src/theme/components/index.ts
@@ -1,5 +1,3 @@
-import Envelope from '~src/theme/components/Envelope'
-import { QuestionsTypeBadge } from '~src/theme/components/QuestionsTypeBadge'
 import Card from './Card'
 import { ElectionHeader, ElectionTitle } from './Election'
 import ElectionResults from './ElectionResults'
@@ -7,6 +5,8 @@ import Link from './Link'
 import Questions from './Questions'
 import Radio from './Radio'
 import Tag from './Tag'
+import Envelope from '~src/theme/components/Envelope'
+import { QuestionsTypeBadge } from '~src/theme/components/QuestionsTypeBadge'
 
 const components = {
   Card,
diff --git a/yarn.lock b/yarn.lock
index 7d6115e6..033be9c0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1974,12 +1974,12 @@
     magic-string "^0.27.0"
     react-refresh "^0.14.0"
 
-"@vocdoni/chakra-components@~0.9.2":
-  version "0.9.2"
-  resolved "https://registry.yarnpkg.com/@vocdoni/chakra-components/-/chakra-components-0.9.2.tgz#9c172b8e9abc06ed619bc73690399ac1f345b9fe"
-  integrity sha512-Rmj9bK4oTv/+cTwvXLoJHb1EegLk68Ga4p/VXx7iQLWkxYH+GeTKZ0C/lhh0qQ038olr2/wel1ZXIjz74d94lA==
+"@vocdoni/chakra-components@~0.9.0":
+  version "0.9.0"
+  resolved "https://registry.yarnpkg.com/@vocdoni/chakra-components/-/chakra-components-0.9.0.tgz#b604dd153d731a389060b9c4d2253aad656a6bc2"
+  integrity sha512-e3+TAYPVWtaY4T9BdK+pGUtsb+SRXriM1cZujdDSmDu7pR797g6EmisvoHc/nhTBeuE3JNOKBCem0oVmulHgLA==
   dependencies:
-    "@vocdoni/react-providers" "~0.5.1"
+    "@vocdoni/react-providers" "~0.5.0"
 
 "@vocdoni/extended-sdk@~0.2.0":
   version "0.2.0"
@@ -1994,10 +1994,10 @@
     long "^5.2.1"
     protobufjs "^7.1.2"
 
-"@vocdoni/react-providers@~0.5.1":
-  version "0.5.1"
-  resolved "https://registry.yarnpkg.com/@vocdoni/react-providers/-/react-providers-0.5.1.tgz#c7e05c6adc54e76e0aa6165d6c330f7836985705"
-  integrity sha512-YYH1kO/F/BcJQTpfCnt862TruYPoeEu/KlcnZ2WcRMKgotxFzMi8/Sr38TGnYM1bkN1s2PattX1nRn2DUTCtig==
+"@vocdoni/react-providers@~0.5.0":
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/@vocdoni/react-providers/-/react-providers-0.5.0.tgz#454cfc699f5397367ce2f7e53788f2cca11ae756"
+  integrity sha512-WFwHkMJEB4V9UvShIY9EzbbQTXPt8+CSqs994jvV/AL7fp9St/MWRBcSTzUVar/bBzewvTY/CVt1OMQ82bi3tQ==
 
 "@vocdoni/sdk@~0.9.0":
   version "0.9.0"
@@ -5206,16 +5206,7 @@ streamx@^2.12.0, streamx@^2.12.5, streamx@^2.13.2, streamx@^2.14.0:
   optionalDependencies:
     bare-events "^2.2.0"
 
-"string-width-cjs@npm:string-width@^4.2.0":
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
-string-width@^4.1.0:
+"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -5247,14 +5238,7 @@ string_decoder@~1.1.1:
   dependencies:
     safe-buffer "~5.1.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
-strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==