diff --git a/webapp/public/empty-states/Error.webp b/webapp/public/empty-states/Error.webp
index 1c08de7c..b15c83cb 100644
Binary files a/webapp/public/empty-states/Error.webp and b/webapp/public/empty-states/Error.webp differ
diff --git a/webapp/src/components/InformationCard/styles.js b/webapp/src/components/InformationCard/styles.js
index 45a3f95f..c289e6a3 100644
--- a/webapp/src/components/InformationCard/styles.js
+++ b/webapp/src/components/InformationCard/styles.js
@@ -7,19 +7,22 @@ export default (theme) => ({
     '& .MuiCardHeader-title': {
       textTransform: 'lowercase',
     },
+    '& .MuiCardHeader-root': {
+      padding: theme.spacing(2,4,0),
+    },
     [theme.breakpoints.up('sm')]: {
       width: 300,
     },
     [theme.breakpoints.up('lg')]: {
       width: '100%',
-      paddingBottom: theme.spacing(2),
+      paddingBottom: theme.spacing(4),
     },
   },
   wrapper: {
     display: 'flex',
     flexDirection: 'column',
     width: '100%',
-    padding: theme.spacing(0, 4, 4, 4),
+    padding: theme.spacing(0, 4, 0),
     '& .MuiTypography-overline': {
       marginLeft: 0,
       fontWeight: '700',
diff --git a/webapp/src/components/NodeCard/NodesCard.js b/webapp/src/components/NodeCard/NodesCard.js
index 0e536221..d637eb22 100644
--- a/webapp/src/components/NodeCard/NodesCard.js
+++ b/webapp/src/components/NodeCard/NodesCard.js
@@ -6,6 +6,7 @@ import { makeStyles } from '@mui/styles'
 import { useSubscription } from '@apollo/client'
 import CardHeader from '@mui/material/CardHeader'
 import CardContent from '@mui/material/CardContent'
+import Chip from '@mui/material/Chip'
 import 'flag-icon-css/css/flag-icons.css'
 
 import { BLOCK_TRANSACTIONS_HISTORY } from '../../gql'
@@ -75,13 +76,23 @@ const NodesCard = ({ nodes }) => {
     return (
       <>
         <ShowInfo value={node?.full} title={t('isFull')} />
-        <ShowInfo value={node?.node_info?.version} title={t('nodeVersion')} />
+        {node?.node_info[0]?.version && (
+          <div className={classes.version}>
+            <div className={classes.bold}>{t('nodeVersion')}</div>
+            <Chip
+              className={classes.chip}
+              size="small"
+              variant="outlined"
+              label={node?.node_info[0]?.version}
+            />
+          </div>
+        )}
         <EndpointsChips node={node} />
         <ChipList
           title={t('features')}
           list={node?.node_info[0]?.features?.list}
         />
-        {node.type.includes('query') && <SupportedAPIs node={node} />}
+        <SupportedAPIs list={node?.node_info[0]?.features?.supportedAPIs} />
         <Keys node={node} />
         <HealthStatus node={node} />
       </>
diff --git a/webapp/src/components/NodeCard/SupportedAPIs.js b/webapp/src/components/NodeCard/SupportedAPIs.js
index cc64dc28..817e0288 100644
--- a/webapp/src/components/NodeCard/SupportedAPIs.js
+++ b/webapp/src/components/NodeCard/SupportedAPIs.js
@@ -1,8 +1,7 @@
-import React, { useEffect, useState } from 'react'
+import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { makeStyles } from '@mui/styles'
 import Button from '@mui/material/Button'
-import axios from 'axios'
 
 import ChipList from '../ChipList'
 import Tooltip from '../Tooltip'
@@ -11,10 +10,9 @@ import styles from './styles'
 
 const useStyles = makeStyles(styles)
 
-const SupportedAPIs = ({ node }) => {
+const SupportedAPIs = ({ list }) => {
   const classes = useStyles()
   const { t } = useTranslation('nodeCardComponent')
-  const [APIs, setAPIs] = useState([])
   const [anchorEl, setAnchorEl] = useState(null)
 
   const handlePopoverOpen = (target) => {
@@ -25,42 +23,15 @@ const SupportedAPIs = ({ node }) => {
     setAnchorEl(null)
   }
 
-  useEffect(() => {
-    const getAPIs = async () => {
-      let api = ''
-
-      for (let i = 0; i < node.endpoints.length; i++) {
-        const endpoint = node.endpoints[i]
-
-        if (endpoint.type === 'ssl') {
-          api = endpoint.value
-          break
-        }
-      }
-
-      try {
-        const { data } = await axios.get(`${api}/v1/node/get_supported_apis`, {
-          mode: 'cors',
-        })
-
-        if (data.apis && Array.isArray(data.apis)) {
-          setAPIs(data.apis)
-        }
-      } catch (error) {}
-    }
-
-    getAPIs()
-  }, [node.endpoints])
-
   return (
-    !!APIs.length && (
+    !!list?.length && (
       <>
         <Tooltip
           anchorEl={anchorEl}
           open={anchorEl !== null}
           onClose={handlePopoverClose}
         >
-          <ChipList title={t('supportedApis')} list={APIs} />
+          <ChipList title={t('supportedApis')} list={list} />
         </Tooltip>
         <div className={classes.buttonApis}>
           <Button
diff --git a/webapp/src/components/NodeCard/styles.js b/webapp/src/components/NodeCard/styles.js
index a3242af2..df227dd6 100644
--- a/webapp/src/components/NodeCard/styles.js
+++ b/webapp/src/components/NodeCard/styles.js
@@ -31,17 +31,18 @@ export default (theme) => ({
   },
   nodes: {
     width: '280px',
-    padding: theme.spacing(3),
+    padding: theme.spacing(0, 3, 0),
     overflowX: 'auto',
-    marginLeft: '5px',
-    marginRight: '5px',
     borderLeft: '1px solid rgba(0, 0, 0, 0.2)',
+    '& .MuiCardContent-root:last-child': {
+      paddingBottom: theme.spacing(4),
+    },
   },
   nodesWrapper: {
     display: 'flex',
     width: 'max-content',
     flexFlow: 'row nowrap',
-    padding: theme.spacing(2),
+    padding: theme.spacing(0, 2, 0),
     [theme.breakpoints.up('lg')]: {
       paddingRight: '250px',
     },
@@ -69,5 +70,11 @@ export default (theme) => ({
   },
   buttonApis: {
     paddingTop: theme.spacing(2),
-  }
+  },
+  version: {
+    display: 'flex',
+  },
+  chip: {
+    marginLeft: theme.spacing(5),
+  },
 })
diff --git a/webapp/src/gql/producer.gql.js b/webapp/src/gql/producer.gql.js
index 7d1808b9..1134b63a 100644
--- a/webapp/src/gql/producer.gql.js
+++ b/webapp/src/gql/producer.gql.js
@@ -5,6 +5,7 @@ export const PRODUCERS_QUERY = gql`
     $offset: Int = 0
     $limit: Int = 21
     $where: producer_bool_exp
+    $endpointFilter: endpoints_by_producer_id_bool_exp
   ) {
     info: producer_aggregate(where: $where) {
       producers: aggregate {
@@ -25,37 +26,31 @@ export const PRODUCERS_QUERY = gql`
       total_votes_eos
       total_rewards
       health_status
-      endpoints
+      last_claim_time
       rank
       updated_at
+      endpoints_list (where: $endpointFilter){
+        type
+        value
+      }
     }
   }
 `
-
-export const NODES_QUERY = gql`
-  query (
+export const NODES_SUBSCRIPTION = gql`
+  subscription (
     $offset: Int = 0
     $limit: Int = 21
     $where: producer_bool_exp
-  ) {
-    info: producer_aggregate(where: $where) {
-      producers: aggregate {
-        count
-      }
-    }
+  ){
     producers: producer(
-      where: $where
-      order_by: { total_votes_percent: desc }
-      offset: $offset
+      where: $where 
       limit: $limit
+      offset:$offset
+      order_by: { total_votes_percent: desc }
     ) {
       id
       owner
-      bp_json
-      total_rewards
-      total_votes_percent
       rank
-      updated_at
       producer_key
       nodes {
         type
@@ -65,7 +60,7 @@ export const NODES_QUERY = gql`
           features
           version
         }
-        endpoints {
+        endpoints (order_by: {type: asc}){
           value
           type
           response
@@ -76,36 +71,28 @@ export const NODES_QUERY = gql`
   }
 `
 
-export const ENDPOINTS_QUERY = gql`
-  query producer(
+export const ENDPOINTS_SUBSCRIPTION = gql`
+  subscription (
     $offset: Int = 0
     $limit: Int = 21
     $where: producer_bool_exp
-    $endpointFilter: endpoint_bool_exp
-  ) {
-    info: producer_aggregate(where: $where) {
-      producers: aggregate {
-        count
-      }
-    }
+    $endpointFilter: endpoints_by_producer_id_bool_exp
+  ){
     producers: producer(
       where: $where
-      order_by: { total_votes_percent: desc }
-      offset: $offset
       limit: $limit
+      offset:$offset
+      order_by: { total_votes_percent: desc }
     ) {
       id
       owner
       updated_at
-      nodes {
-        endpoints(order_by: { head_block_time: desc }, where: $endpointFilter) {
-          id
-          type
-          value
-          head_block_time
-          response
-          updated_at
-        }
+      endpoints_list(where: $endpointFilter, order_by: {value: asc}){
+        type
+        value
+        head_block_time
+        response
+        updated_at
       }
     }
   }
diff --git a/webapp/src/hooks/customHooks/useEndpointsState.js b/webapp/src/hooks/customHooks/useEndpointsState.js
index 5a6ee5c5..e1cbe547 100644
--- a/webapp/src/hooks/customHooks/useEndpointsState.js
+++ b/webapp/src/hooks/customHooks/useEndpointsState.js
@@ -1,45 +1,35 @@
 import { useState, useEffect, useCallback } from 'react'
+import { useSubscription } from '@apollo/client'
 
-import { ENDPOINTS_QUERY } from '../../gql'
+import { PRODUCERS_QUERY, ENDPOINTS_SUBSCRIPTION } from '../../gql'
 
 import useSearchState from './useSearchState'
 
-const useEndpointsState = ({ useCache }) => {
+const useEndpointsState = () => {
   const [
-    { pagination, loading, producers, filters },
+    { filters, pagination, variables },
     { handleOnSearch, handleOnPageChange, setPagination },
   ] = useSearchState({
-    query: ENDPOINTS_QUERY,
-    pollInterval: useCache ? 0 : 120000,
-    fetchPolicy: useCache ? 'cache-first' : 'cache-and-network',
+    query: PRODUCERS_QUERY,
+    where: {nodes: { endpoints: { value: { _gt: '' } } }},
+    limit: 20
   })
+  const { data, loading } = useSubscription(ENDPOINTS_SUBSCRIPTION, { variables })
   const [updatedAt, setUpdatedAt] = useState()
   const [items, setItems] = useState()
 
   useEffect(() => {
-    setPagination(prev => ({
-      ...prev,
-      limit: 20,
-      where: { ...prev.where, nodes: { endpoints: { value: { _gt: '' } } } },
-    }))
-  }, [setPagination])
-
-  useEffect(() => {
-    if (!producers) return
+    if(!data) return
 
     setItems(
-      producers.map(producer => {
+      data.producers.map((producer) => {
         const endpoints = { api: [], ssl: [], p2p: [] }
         const inserted = []
 
-        producer.nodes.forEach(node => {
-          if (node.endpoints?.length) {
-            node.endpoints.forEach(({ type, ...endpoint }) => {
-              if (!inserted.includes(endpoint.value)) {
-                inserted.push(endpoint.value)
-                endpoints[type].push(endpoint)
-              }
-            })
+        producer.endpoints_list.forEach(({ type, ...endpoint }) => {
+          if (!inserted.includes(endpoint.value)) {
+            inserted.push(endpoint.value)
+            endpoints[type].push(endpoint)
           }
         })
 
@@ -53,10 +43,10 @@ const useEndpointsState = ({ useCache }) => {
       }),
     )
 
-    if (!producers?.[0]?.updated_at) return
+    if (!data.producers?.[0]?.updated_at) return
 
-    setUpdatedAt(producers[0].updated_at)
-  }, [producers])
+    setUpdatedAt(data.producers[0].updated_at)
+  },[data])
 
   const handleFilter = useCallback(value => {
     const filter = value
@@ -74,7 +64,7 @@ const useEndpointsState = ({ useCache }) => {
   }, [setPagination])
 
   return [
-    { loading, pagination, producers: items, updatedAt, filters },
+    { loading: loading, pagination, producers: items, updatedAt, filters },
     { handleFilter, handleOnPageChange, handleOnSearch, setPagination },
   ]
 }
diff --git a/webapp/src/hooks/customHooks/useNodeState.js b/webapp/src/hooks/customHooks/useNodeState.js
index 45b1efa7..3de8f163 100644
--- a/webapp/src/hooks/customHooks/useNodeState.js
+++ b/webapp/src/hooks/customHooks/useNodeState.js
@@ -1,19 +1,19 @@
 import { useState, useEffect } from 'react'
+import { useSubscription } from '@apollo/client'
 
-import { NODES_QUERY } from '../../gql'
+import { PRODUCERS_QUERY, NODES_SUBSCRIPTION } from '../../gql'
 import { eosConfig } from '../../config'
 
 import useSearchState from './useSearchState'
 
 const useNodeState = () => {
   const [
-    { filters, pagination, loading, producers },
+    { filters, pagination, variables },
     { handleOnSearch, handleOnPageChange, setPagination },
   ] = useSearchState({
-    query: NODES_QUERY,
-    pollInterval: 300000,
-    fetchPolicy: 'cache-and-network',
+    query: PRODUCERS_QUERY
   })
+  const { data, loading } = useSubscription(NODES_SUBSCRIPTION, { variables })
   const [items, setItems] = useState([])
 
   const chips = [{ name: 'all' }, ...eosConfig.nodeTypes]
@@ -22,6 +22,7 @@ const useNodeState = () => {
     return (
       (node.type?.includes('full') ? 0.5 : 0) +
       (node.endpoints?.length || 0) +
+      Boolean(node?.node_info[0]?.version?.length) +
       (node.node_info[0]?.features?.list?.length || 0)
     )
   }
@@ -45,7 +46,9 @@ const useNodeState = () => {
   }, [filters.name, setPagination])
 
   useEffect(() => {
-    if (!producers) return
+    if (!data) return
+
+    const { producers } = data
 
     const list = producers.flatMap((producer) => {
       if (!producer?.nodes?.length) return []
@@ -91,7 +94,7 @@ const useNodeState = () => {
     })
 
     setItems(list)
-  }, [filters.name, producers])
+  }, [filters.name, data])
 
   return [
     { filters, chips, loading, items, pagination },
diff --git a/webapp/src/hooks/customHooks/useSearchState.js b/webapp/src/hooks/customHooks/useSearchState.js
index 88955a7b..aedae3f8 100644
--- a/webapp/src/hooks/customHooks/useSearchState.js
+++ b/webapp/src/hooks/customHooks/useSearchState.js
@@ -3,16 +3,21 @@ import { useLazyQuery } from '@apollo/client'
 import { useLocation } from 'react-router-dom'
 import queryString from 'query-string'
 
-const useSearchState = ({ query, ...options }) => {
+const useSearchState = ({ query, where, limit }) => {
   const [loadProducers, { loading = true, data: { producers, info } = {} }] =
-    useLazyQuery(query, options)
+    useLazyQuery(query)
   const location = useLocation()
   const [pagination, setPagination] = useState({
     page: 1,
     pages: 1,
-    limit: 28,
-    where: null,
+    limit: limit ?? 28,
+    offset: 0,
+    where: {
+      owner: { _like: '%%' },
+      ...(where ?? { bp_json: { _is_null: false } }),
+    },
   })
+  const [variables, setVariables] = useState(pagination)
   const [filters, setFilters] = useState({ name: 'all', owner: '' })
 
   const handleOnSearch = useCallback(newFilters => {
@@ -37,21 +42,24 @@ const useSearchState = ({ query, ...options }) => {
   }
 
   useEffect(() => {
-    loadProducers({
-      variables: {
-        where: pagination.where,
-        offset: (pagination.page - 1) * pagination.limit,
-        limit: pagination.limit,
-        endpointFilter: pagination.endpointFilter,
-      },
-    })
+    const variables = {
+      where: pagination.where,
+      offset: (pagination.page - 1) * pagination.limit,
+      limit: pagination.limit,
+      endpointFilter: pagination.endpointFilter,
+    }
+
+    loadProducers({ variables })
+
+    setVariables(variables)
     // eslint-disable-next-line
   }, [
     pagination.where,
     pagination.page,
     pagination.limit,
     pagination.offset,
-    pagination.endpointFilter
+    pagination.endpointFilter,
+    setVariables,
   ])
 
   useEffect(() => {
@@ -78,7 +86,7 @@ const useSearchState = ({ query, ...options }) => {
   }, [info])
 
   return [
-    { filters, pagination, loading, producers, info },
+    { filters, pagination, loading, producers, info, variables },
     {
       handleOnSearch,
       handleOnPageChange,
diff --git a/webapp/src/routes/Home/BlockProducerInfo.js b/webapp/src/routes/Home/BlockProducerInfo.js
index 0ef00cf5..820ab712 100644
--- a/webapp/src/routes/Home/BlockProducerInfo.js
+++ b/webapp/src/routes/Home/BlockProducerInfo.js
@@ -4,7 +4,7 @@ import { useQuery } from '@apollo/client'
 import PropTypes from 'prop-types'
 
 import { formatWithThousandSeparator } from '../../utils'
-import { NODES_QUERY, PRODUCERS_SUMMARY_QUERY } from '../../gql'
+import { PRODUCERS_QUERY, PRODUCERS_SUMMARY_QUERY } from '../../gql'
 import { useSharedState } from '../../context/state.context'
 import { eosConfig } from '../../config'
 
@@ -21,7 +21,7 @@ const NodesSummary = lazy(() => import('../../components/NodesSummary'))
 const ProducersSummary = lazy(() => import('../../components/ProducersSummary'))
 
 const BlockProducerInfo = ({ t, classes }) => {
-  const { data: { loading, producers } = {} } = useQuery(NODES_QUERY)
+  const { data: { loading, producers } = {} } = useQuery(PRODUCERS_QUERY)
   const { data: producersSummary, loading: producersLoading } = useQuery(
     PRODUCERS_SUMMARY_QUERY,
   )