diff --git a/skale-network b/skale-network
index 9dc6add..d41f6fb 160000
--- a/skale-network
+++ b/skale-network
@@ -1 +1 @@
-Subproject commit 9dc6add3b8e7e21576a96956df011f413c3e3c59
+Subproject commit d41f6fb3728adb318bdd869e3a2f87672cf10f2c
diff --git a/src/App.scss b/src/App.scss
index a5e4088..0406c80 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -389,6 +389,38 @@ body::-webkit-scrollbar {
 
 }
 
+.sk-icon-btn-small {
+  width: 34px;
+  height: 34px;
+
+  svg {
+    width: 18px;
+    height: 18px;
+  }
+}
+
+.sk-icon-btn-medium {
+  width: 40px;
+  height: 40px;
+
+  svg {
+    width: 24px;
+    height: 24px;
+  }
+}
+
+
+.sk-icon-btn-large {
+  width: 46px;
+  height: 46px;
+
+  svg {
+    width: 32px;
+    height: 32px;
+  }
+}
+
+
 .btn {
   text-transform: none !important;
   font-size: 0.8025rem !important;
@@ -1387,4 +1419,9 @@ input[type=number] {
 
 .hidden {
   display: none;
+}
+
+.MuiTooltip-tooltip {
+  font-size: 0.8rem !important;
+  padding: 8px 12px !important;
 }
\ No newline at end of file
diff --git a/src/components/HelpZen.tsx b/src/components/HelpZen.tsx
index a094ffc..b34c708 100644
--- a/src/components/HelpZen.tsx
+++ b/src/components/HelpZen.tsx
@@ -2,14 +2,13 @@ import { Link } from 'react-router-dom'
 
 import { useEffect, useState, type MouseEvent } from 'react'
 import Box from '@mui/material/Box'
-import Tooltip from '@mui/material/Tooltip'
-import IconButton from '@mui/material/IconButton'
 import Menu from '@mui/material/Menu'
 import MenuItem from '@mui/material/MenuItem'
 import QuestionMarkRoundedIcon from '@mui/icons-material/QuestionMarkRounded'
 import HelpOutlineOutlinedIcon from '@mui/icons-material/HelpOutlineOutlined'
 import MarkUnreadChatAltRoundedIcon from '@mui/icons-material/MarkUnreadChatAltRounded'
-import { cls, styles, cmn } from '@skalenetwork/metaport'
+import { cmn } from '@skalenetwork/metaport'
+import SkIconBtn from './SkIconBth'
 
 export default function HelpZen() {
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
@@ -44,22 +43,12 @@ export default function HelpZen() {
         className={cmn.mleft5}
         sx={{ display: 'flex', alignItems: 'center', textAlign: 'center' }}
       >
-        <Tooltip arrow title="Get help">
-          <IconButton
-            id="basic-button"
-            aria-controls={open ? 'basic-menu' : undefined}
-            aria-haspopup="true"
-            aria-expanded={open ? 'true' : undefined}
-            onClick={handleClick}
-            className={cls(styles.paperGrey, cmn.pPrim)}
-            style={{ width: '34px', height: '34px' }}
-          >
-            <QuestionMarkRoundedIcon
-              className={cls(cmn.pPrim)}
-              style={{ height: '15px', width: '15px' }}
-            />
-          </IconButton>
-        </Tooltip>
+        <SkIconBtn
+          icon={QuestionMarkRoundedIcon}
+          onClick={handleClick}
+          size="small"
+          tooltipTitle="Get help"
+        />
       </Box>
       <Menu
         className="mp__moreMenu"
diff --git a/src/components/SkIconBth.tsx b/src/components/SkIconBth.tsx
new file mode 100644
index 0000000..8d6429b
--- /dev/null
+++ b/src/components/SkIconBth.tsx
@@ -0,0 +1,110 @@
+/**
+ * @license
+ * SKALE portal
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+/**
+ * @file SkIconBth.tsx
+ * @copyright SKALE Labs 2024-Present
+ */
+
+import React, { useState, useCallback } from 'react'
+import IconButton, { IconButtonProps } from '@mui/material/IconButton'
+import Tooltip, { TooltipProps } from '@mui/material/Tooltip'
+import { SvgIconProps } from '@mui/material/SvgIcon'
+import { useTheme } from '@mui/material/styles'
+import useMediaQuery from '@mui/material/useMediaQuery'
+import { cls, styles, cmn } from '@skalenetwork/metaport'
+
+type IconType = React.ComponentType<SvgIconProps>
+
+interface SkIconBtnProps extends Omit<IconButtonProps, 'children'> {
+  icon: IconType
+  iconClassName?: string
+  tooltipTitle?: React.ReactNode
+  tooltipProps?: Partial<TooltipProps>
+  primary?: boolean
+}
+
+const SkIconBtn: React.FC<SkIconBtnProps> = ({
+  icon: Icon,
+  onClick,
+  className,
+  iconClassName,
+  size = 'medium',
+  tooltipTitle,
+  tooltipProps,
+  primary = true,
+  ...props
+}) => {
+  const [tooltipOpen, setTooltipOpen] = useState(false)
+  const theme = useTheme()
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'))
+
+  const handleTooltipToggle = useCallback(() => {
+    if (isMobile) {
+      setTooltipOpen((prevOpen) => !prevOpen)
+    }
+  }, [isMobile])
+
+  const handleClick = useCallback(
+    (event: React.MouseEvent<HTMLButtonElement>) => {
+      if (isMobile) {
+        handleTooltipToggle()
+      }
+      if (onClick) {
+        onClick(event)
+      }
+    },
+    [isMobile, onClick, handleTooltipToggle]
+  )
+
+  const button = (
+    <IconButton
+      onClick={handleClick}
+      className={cls(styles.paperGrey, 'sk-icon-btn', `sk-icon-btn-${size}`, className)}
+      size={size}
+      {...props}
+    >
+      <Icon
+        className={cls(
+          iconClassName,
+          [cmn.pPrim, primary],
+          [cmn.pSec, !primary],
+          'sk-icon-btn-img'
+        )}
+      />
+    </IconButton>
+  )
+
+  if (tooltipTitle) {
+    return (
+      <Tooltip
+        title={tooltipTitle}
+        {...tooltipProps}
+        open={isMobile ? tooltipOpen : undefined}
+        onClose={handleTooltipToggle}
+        onOpen={handleTooltipToggle}
+      >
+        {button}
+      </Tooltip>
+    )
+  }
+
+  return button
+}
+
+export default SkIconBtn
diff --git a/src/components/SkPageInfoIcon.tsx b/src/components/SkPageInfoIcon.tsx
new file mode 100644
index 0000000..e87c076
--- /dev/null
+++ b/src/components/SkPageInfoIcon.tsx
@@ -0,0 +1,43 @@
+/**
+ * @license
+ * SKALE portal
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+/**
+ * @file SkPageInfoIcon.tsx
+ * @copyright SKALE Labs 2024-Present
+ */
+
+import React from 'react'
+import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined'
+import SkIconBtn from './SkIconBth'
+
+interface SkPageInfoIconProps {
+  meta_tag: any
+}
+
+const SkPageInfoIcon: React.FC<SkPageInfoIconProps> = ({ meta_tag }) => {
+  return (
+    <SkIconBtn
+      primary={false}
+      icon={InfoOutlinedIcon}
+      size="small"
+      tooltipTitle={meta_tag.help || meta_tag.description}
+    />
+  )
+}
+
+export default SkPageInfoIcon
diff --git a/src/components/chains/HubTile.tsx b/src/components/chains/HubTile.tsx
index 407c451..95f9eda 100644
--- a/src/components/chains/HubTile.tsx
+++ b/src/components/chains/HubTile.tsx
@@ -73,12 +73,14 @@ export default function HubTile(props: {
             <div
               className={cls(cmn.flex, cmn.flexcv, cmn.flexg, cmn.mtop20, cmn.mbott20, cmn.mleft20)}
             >
-              <ChainLogo
-                network={props.network}
-                chainName={props.schainName}
-                logos={MAINNET_CHAIN_LOGOS}
-                className={cls(styles.chainIconlg)}
-              />
+              <div className={cls(styles.chainIconlg, cmn.flex, cmn.flexcv)}>
+                <ChainLogo
+                  network={props.network}
+                  chainName={props.schainName}
+                  logos={MAINNET_CHAIN_LOGOS}
+                  className="responsive-logo"
+                />
+              </div>
               <div
                 className={cls([cmn.mleft20, !props.isXs], [cmn.mleft10, props.isXs], cmn.flexg)}
               >
diff --git a/src/core/meta.ts b/src/core/meta.ts
index 41cd6d2..bd0609c 100644
--- a/src/core/meta.ts
+++ b/src/core/meta.ts
@@ -33,7 +33,8 @@ export const META_TAGS = {
   },
   bridge: {
     title: 'SKALE Portal - Bridge Tokens',
-    description: 'Bridge tokens using SKALE Bridge - Zero Gas Fees between SKALE Chains.'
+    description: 'Bridge tokens using SKALE Bridge - Zero Gas Fees between SKALE Chains.',
+    help: 'Bridge tokens between Ethereum and SKALE chains with zero gas fees.'
   },
   history: {
     title: 'SKALE Portal - Bridge History',
@@ -49,9 +50,9 @@ export const META_TAGS = {
     description:
       'Explore SKALE Hubs, AppChains, connect to SKALE Chains, get block explorer links, endpoints, linked tokens and verified contracts info.'
   },
-  apps: {
-    title: 'SKALE Portal - Apps',
-    description: 'Apps on SKALE Network. Explore and interact with dApps on SKALE Network.'
+  ecosystem: {
+    title: 'SKALE Portal - Ecosystem',
+    description: 'Explore and interact with dApps on SKALE Network.'
   },
   faq: {
     title: 'SKALE Portal - Bridge FAQ',
@@ -61,6 +62,10 @@ export const META_TAGS = {
     title: 'SKALE Portal - Staking',
     description: 'Delegate, review delegations and withdraw staking rewards'
   },
+  validators: {
+    title: 'SKALE Portal - Validators',
+    description: 'List of validators on SKALE Network'
+  },
   onramp: {
     title: 'SKALE Portal - Onramp',
     description: 'Purchase crypto directly on SKALE Europa Hub using the Transak onramp.'
diff --git a/src/pages/Bridge.tsx b/src/pages/Bridge.tsx
index 60a7526..53c90f2 100644
--- a/src/pages/Bridge.tsx
+++ b/src/pages/Bridge.tsx
@@ -48,6 +48,7 @@ import BridgeBody from '../components/BridgeBody'
 import { META_TAGS } from '../core/meta'
 import Meson from '../components/Meson'
 import { Button } from '@mui/material'
+import SkPageInfoIcon from '../components/SkPageInfoIcon'
 
 interface TokenParams {
   keyname: string | null
@@ -177,12 +178,13 @@ export default function Bridge(props: { isXs: boolean; chainsMeta: types.ChainsM
             <Link to="/bridge/history">
               <Button
                 variant="contained"
-                className={cls('btnMd', styles.paperGrey, cmn.pPrim)}
+                className={cls('btnMd', styles.paperGrey, cmn.pPrim, cmn.mri10)}
                 startIcon={<HistoryIcon />}
               >
                 History
               </Button>
             </Link>
+            <SkPageInfoIcon meta_tag={META_TAGS.bridge} />
           </div>
         </div>
 
diff --git a/src/pages/Chains.tsx b/src/pages/Chains.tsx
index 5d2ef63..0a32382 100644
--- a/src/pages/Chains.tsx
+++ b/src/pages/Chains.tsx
@@ -39,6 +39,7 @@ import CategoryRoundedIcon from '@mui/icons-material/CategoryRounded'
 import ChainsSection from '../components/chains/ChainsSection'
 import { META_TAGS } from '../core/meta'
 import { MAINNET_CHAIN_NAME } from '../core/constants'
+import SkPageInfoIcon from '../components/SkPageInfoIcon'
 
 export default function Chains(props: {
   loadData: () => Promise<void>
@@ -92,13 +93,15 @@ export default function Chains(props: {
         <meta property="og:description" content={META_TAGS.chains.description} />
       </Helmet>
       <Stack spacing={0}>
-        <div className={cls(cmn.flex)}>
-          <h2 className={cls(cmn.nom)}>SKALE Chains</h2>
+        <div className={cls(cmn.flex, cmn.flexcv)}>
+          <div className={cmn.flexg}>
+            <h2 className={cls(cmn.nom)}>SKALE Chains</h2>
+            <p className={cls(cmn.nom, cmn.p, cmn.p3, cmn.pSec)}>
+              Connect, get block explorer links and endpoints
+            </p>
+          </div>
+          <SkPageInfoIcon meta_tag={META_TAGS.chains} />
         </div>
-        <p className={cls(cmn.nom, cmn.p, cmn.p3, cmn.pSec)}>
-          Connect, get block explorer links and endpoints
-        </p>
-
         <ChainsSection
           name="SKALE Hubs"
           schains={props.schains.filter(
diff --git a/src/pages/Ecosystem.tsx b/src/pages/Ecosystem.tsx
index 706de04..fccc1a9 100644
--- a/src/pages/Ecosystem.tsx
+++ b/src/pages/Ecosystem.tsx
@@ -48,6 +48,7 @@ import FavoriteApps from '../components/ecosystem/tabs/FavoriteApps'
 import MostLiked from '../components/ecosystem/tabs/MostLiked'
 import TrendingApps from '../components/ecosystem/tabs/TrendingApps'
 import SocialButtons from '../components/ecosystem/Socials'
+import SkPageInfoIcon from '../components/SkPageInfoIcon'
 
 export default function Ecosystem(props: {
   mpc: MetaportCore
@@ -128,11 +129,11 @@ export default function Ecosystem(props: {
         4,
         isSignedIn
           ? favoriteApps.filter((app) =>
-              filteredApps.some(
-                (filteredApp) =>
-                  filteredApp.chain === app.chain && filteredApp.appName === app.appName
-              )
+            filteredApps.some(
+              (filteredApp) =>
+                filteredApp.chain === app.chain && filteredApp.appName === app.appName
             )
+          )
           : []
       ] // Favorite Apps
     ])
@@ -145,23 +146,26 @@ export default function Ecosystem(props: {
   return (
     <Container maxWidth="md">
       <Helmet>
-        <title>{META_TAGS.apps.title}</title>
-        <meta name="description" content={META_TAGS.apps.description} />
-        <meta property="og:title" content={META_TAGS.apps.title} />
-        <meta property="og:description" content={META_TAGS.apps.description} />
+        <title>{META_TAGS.ecosystem.title}</title>
+        <meta name="description" content={META_TAGS.ecosystem.description} />
+        <meta property="og:title" content={META_TAGS.ecosystem.title} />
+        <meta property="og:description" content={META_TAGS.ecosystem.description} />
       </Helmet>
       <Stack spacing={0}>
-        <div className={cls(cmn.flex, cmn.flexcv)}>
+        <SkStack>
           <div className={cls(cmn.flexg)}>
             <h2 className={cls(cmn.nom)}>Ecosystem</h2>
             <p className={cls(cmn.nom, cmn.p, cmn.p3, cmn.pSec)}>
               Explore dApps across the SKALE ecosystem
             </p>
           </div>
-          <div>
+          <div className={cls(cmn.flex, cmn.flexcv)}>
             <SocialButtons social={SKALE_SOCIAL_LINKS} all />
+            <div className={cls(cmn.mleft10)}>
+              <SkPageInfoIcon meta_tag={META_TAGS.ecosystem} />
+            </div>
           </div>
-        </div>
+        </SkStack>
         <Box sx={{ flexGrow: 1 }} className={cls(cmn.mtop20, 'fwmobile')}>
           <SkStack className={cls(cmn.mbott20, cmn.flex, cmn.flexcv)}>
             <SearchComponent
diff --git a/src/pages/Onramp.tsx b/src/pages/Onramp.tsx
index 3c2239e..fef0565 100644
--- a/src/pages/Onramp.tsx
+++ b/src/pages/Onramp.tsx
@@ -38,6 +38,7 @@ import { META_TAGS } from '../core/meta'
 import TokenBalanceTile from '../components/TokenBalanceTile'
 import ConnectWallet from '../components/ConnectWallet'
 import Message from '../components/Message'
+import SkPageInfoIcon from '../components/SkPageInfoIcon'
 import { getPaymasterChain } from '../core/paymaster'
 import {
   MAINNET_CHAIN_NAME,
@@ -135,10 +136,15 @@ export default function Onramp(props: { mpc: MetaportCore }) {
         <meta property="og:description" content={META_TAGS.onramp.description} />
       </Helmet>
       <Stack spacing={0}>
-        <h2 className={cls(cmn.nom)}>On-ramp</h2>
-        <p className={cls(cmn.nom, cmn.p, cmn.p3, cmn.pSec)}>
-          Transfer your assets to SKALE Europa Hub
-        </p>
+        <div className={cls(cmn.flex, cmn.flexcv)}>
+          <div className={cmn.flexg}>
+            <h2 className={cls(cmn.nom)}>On-ramp</h2>
+            <p className={cls(cmn.nom, cmn.p, cmn.p3, cmn.pSec)}>
+              Transfer your assets to SKALE Europa Hub
+            </p>
+          </div>
+          <SkPageInfoIcon meta_tag={META_TAGS.onramp} />
+        </div>
         {!isProd ? (
           <Message
             className={cls(cmn.mtop20)}
diff --git a/src/pages/Staking.tsx b/src/pages/Staking.tsx
index 670ccb9..0447134 100644
--- a/src/pages/Staking.tsx
+++ b/src/pages/Staking.tsx
@@ -69,6 +69,7 @@ import ConnectWallet from '../components/ConnectWallet'
 import Headline from '../components/Headline'
 import Message from '../components/Message'
 import { META_TAGS } from '../core/meta'
+import SkPageInfoIcon from '../components/SkPageInfoIcon'
 
 debug.enable('*')
 const log = debug('portal:pages:Staking')
@@ -199,11 +200,11 @@ export default function Staking(props: {
                 : 'Delegate, review delegations and withdraw staking rewards'}
             </p>
           </div>
-          <div>
+          <div className={cls(cmn.mri10)}>
             {loading !== false || props.customAddress !== undefined ? (
               <Button
                 variant="contained"
-                className={cls('btnMd', cmn.mtop10)}
+                className="btnMd"
                 startIcon={<QueueRoundedIcon />}
                 disabled={loading !== false || props.customAddress !== undefined}
               >
@@ -213,7 +214,7 @@ export default function Staking(props: {
               <Link to="/staking/new">
                 <Button
                   variant="contained"
-                  className={cls('btnMd', cmn.mtop10)}
+                  className="btnMd"
                   startIcon={<QueueRoundedIcon />}
                   disabled={loading || props.customAddress !== undefined}
                 >
@@ -222,6 +223,7 @@ export default function Staking(props: {
               </Link>
             )}
           </div>
+          <SkPageInfoIcon meta_tag={META_TAGS.staking} />
         </div>
       </Stack>
 
diff --git a/src/pages/Stats.tsx b/src/pages/Stats.tsx
index 021b98b..73e8540 100644
--- a/src/pages/Stats.tsx
+++ b/src/pages/Stats.tsx
@@ -29,6 +29,7 @@ import { cmn, cls } from '@skalenetwork/metaport'
 
 import { DASHBOARD_URL } from '../core/constants'
 import { META_TAGS } from '../core/meta'
+import SkPageInfoIcon from '../components/SkPageInfoIcon'
 
 export default function Stats() {
   return (
@@ -40,12 +41,14 @@ export default function Stats() {
         <meta property="og:description" content={META_TAGS.stats.description} />
       </Helmet>
       <Stack spacing={0}>
-        <div className={cls(cmn.flex)}>
-          <h2 className={cls(cmn.nom)}>Stats</h2>
+        <div className={cls(cmn.flex, cmn.flexcv)}>
+          <div className={cmn.flexg} style={{ zIndex: '2' }}>
+            <h2 className={cls(cmn.nom)}>Stats</h2>
+            <p className={cls(cmn.nom, cmn.p, cmn.p3, cmn.pSec)}>SKALE Network statistics</p>
+          </div>
+          <SkPageInfoIcon meta_tag={META_TAGS.stats} />
         </div>
-        <p className={cls(cmn.nom, cmn.p, cmn.p3, cmn.pSec)} style={{ zIndex: '2' }}>
-          SKALE Network statistics
-        </p>
+
         <iframe
           style={{
             height: 'calc(100vh - 170px)',
diff --git a/src/pages/Validators.tsx b/src/pages/Validators.tsx
index a6cb7e1..f3b71e0 100644
--- a/src/pages/Validators.tsx
+++ b/src/pages/Validators.tsx
@@ -29,6 +29,8 @@ import { cmn, cls, type MetaportCore } from '@skalenetwork/metaport'
 import Validators from '../components/delegation/Validators'
 
 import { DelegationType, type ISkaleContractsMap, type IValidator } from '../core/interfaces'
+import SkPageInfoIcon from '../components/SkPageInfoIcon'
+import { META_TAGS } from '../core/meta'
 
 export default function ValidatorsPage(props: {
   mpc: MetaportCore
@@ -44,10 +46,15 @@ export default function ValidatorsPage(props: {
 
   return (
     <Container maxWidth="md">
-      <div className={cls(cmn.flex)}>
-        <h2 className={cls(cmn.nom)}>Validators</h2>
+      <div className={cls(cmn.flex, cmn.flexcv)}>
+        <div className={cmn.flexg}>
+          <h2 className={cls(cmn.nom)}>Validators</h2>
+          <p className={cls(cmn.nom, cmn.p, cmn.p3, cmn.pSec)}>
+            List of validators on SKALE Network
+          </p>
+        </div>
+        <SkPageInfoIcon meta_tag={META_TAGS.validators} />
       </div>
-      <p className={cls(cmn.nom, cmn.p, cmn.p3, cmn.pSec)}>List of validators on SKALE Network</p>
       <div className={cls(cmn.mtop20)}>
         <Validators
           mpc={props.mpc}