diff --git a/.gitignore b/.gitignore
index a589be2f..f82eb5a3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -28,6 +28,7 @@ src/data/metaportConfig*.ts
 src/meta/
 src/assets/validators/index.ts
 src/metadata.json
+src/metrics.json
 
 src/metadata/chainsData.json
 src/metadata/faucet.json
diff --git a/bun.lockb b/bun.lockb
index 7ae63c3a..582bbccc 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/package.json b/package.json
index 6e89b1a6..14fac057 100644
--- a/package.json
+++ b/package.json
@@ -1,11 +1,12 @@
 {
   "name": "portal",
   "private": true,
-  "version": "3.0.1",
+  "version": "3.1.0",
   "type": "module",
   "scripts": {
     "build:testnet": "NETWORK_NAME=testnet bash build.sh",
     "build:mainnet": "NETWORK_NAME=mainnet bash build.sh",
+    "build:qa": "NETWORK_NAME=legacy bash build.sh",
     "build:portal": "tsc && vite build",
     "build:packages": "bun run build:core",
     "build:core": "cd packages/core && bun install && bun run build",
@@ -20,11 +21,12 @@
     "@mdx-js/rollup": "^2.3.0",
     "@mui/icons-material": "^5.15.14",
     "@mui/material": "^5.15.14",
-    "@skalenetwork/metaport": "3.0.0-develop.5",
+    "@skalenetwork/metaport": "3.1.0-develop.0",
     "@skalenetwork/skale-contracts-ethers-v6": "1.0.1",
     "@transak/transak-sdk": "^3.1.1",
     "@types/react-copy-to-clipboard": "^5.0.4",
     "@vercel/analytics": "^1.0.2",
+    "embla-carousel-react": "^8.3.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-config-standard-with-typescript": "^39.1.0",
     "prettier": "^3.0.3",
diff --git a/packages/core/src/types/ChainsMetadata.ts b/packages/core/src/types/ChainsMetadata.ts
index ffc11813..c25d3888 100644
--- a/packages/core/src/types/ChainsMetadata.ts
+++ b/packages/core/src/types/ChainsMetadata.ts
@@ -42,10 +42,16 @@ export interface AppMetadata {
   description?: string
   contracts?: string[]
   social?: AppSocials
-  tags?: string[]
   added?: number
   categories: CategoriesMap
+  pretge?: TimeRange
 }
+
+interface TimeRange {
+  from: number
+  to: number
+}
+
 export interface AppWithChainAndName extends AppMetadata {
   chain: string
   appName: string
diff --git a/packages/core/src/types/index.ts b/packages/core/src/types/index.ts
index 791bf404..805d2b81 100644
--- a/packages/core/src/types/index.ts
+++ b/packages/core/src/types/index.ts
@@ -135,6 +135,9 @@ export interface IAddressCounters {
     token_transfers_count: string
     transactions_count: string
     validations_count: string
+    transactions_today: number
+    transactions_last_7_days: number
+    transactions_last_30_days: number
 }
 
 export interface IStats {
diff --git a/sitemap_template.xml b/sitemap_template.xml
index f3da855a..d758e5eb 100644
--- a/sitemap_template.xml
+++ b/sitemap_template.xml
@@ -10,6 +10,11 @@
             {BASE_URL}/chains
         </loc>
     </url>
+    <url>
+        <loc>
+            {BASE_URL}/ecosystem
+        </loc>
+    </url>
     <url>
         <loc>
             {BASE_URL}/bridge/history
diff --git a/skale-network b/skale-network
index d41f6fb3..2e53298d 160000
--- a/skale-network
+++ b/skale-network
@@ -1 +1 @@
-Subproject commit d41f6fb3728adb318bdd869e3a2f87672cf10f2c
+Subproject commit 2e53298d4a4393c4b7a1a77a3b1cd7bae750e374
diff --git a/src/App.scss b/src/App.scss
index 0d5b8e41..cf132899 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -1,6 +1,7 @@
 @import './variables';
 @import './styles/components';
 @import './styles/chip';
+@import './styles/ProfileModal';
 
 :root {
   background: black;
@@ -24,6 +25,10 @@ body {
   width: 75pt;
 }
 
+.skMessage {
+  min-height: 58px;
+}
+
 .sk-header {
   background-color: rgba(0, 0, 0, 0) !important;
   -webkit-backdrop-filter: blur(80px) !important;
@@ -389,6 +394,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;
@@ -762,6 +799,15 @@ input[type=number] {
   }
 }
 
+.chipMostLiked {
+  background: linear-gradient(180deg, #e8a25b, #e58e36) !important;
+
+
+  p {
+    color: black !important
+  }
+}
+
 .chipNewApp {
   background: linear-gradient(180deg, #65a974, #508d5e) !important;
 
@@ -800,7 +846,7 @@ input[type=number] {
 
 .chipXs {
   border-radius: 15px;
-  padding: 4px 8px;
+  padding: 4px 6px;
 
   svg {
     width: 12px;
@@ -1138,6 +1184,11 @@ input[type=number] {
   padding-bottom: 5px;
 }
 
+.m-ri-min10 {
+  margin-right: -10px;
+}
+
+
 .validatorIcon {
   border-radius: 50%;
   width: 70px;
@@ -1183,7 +1234,7 @@ input[type=number] {
 
 .amountInput {
   input {
-    padding: 3px 10px 0 5px !important
+    padding: 0 !important
   }
 }
 
@@ -1373,4 +1424,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/AuthContext.tsx b/src/AuthContext.tsx
index d0822f17..1dfe775f 100644
--- a/src/AuthContext.tsx
+++ b/src/AuthContext.tsx
@@ -20,7 +20,7 @@
  * @copyright SKALE Labs 2024-Present
  */
 
-import React, { createContext, useState, useContext, useEffect } from 'react'
+import React, { createContext, useState, useContext, useEffect, useCallback, useMemo } from 'react'
 import { Logger, type ILogObj } from 'tslog'
 import { SiweMessage } from 'siwe'
 import { useWagmiAccount } from '@skalenetwork/metaport'
@@ -30,23 +30,38 @@ const log = new Logger<ILogObj>({ name: 'AuthContext' })
 
 interface AuthContextType {
   isSignedIn: boolean
+  email: string | null
+  isEmailLoading: boolean
+  isEmailUpdating: boolean
+  emailError: string | null
+  isProfileModalOpen: boolean
   handleSignIn: () => Promise<void>
   handleSignOut: () => Promise<void>
   handleAddressChange: () => Promise<void>
   getSignInStatus: () => Promise<boolean>
+  getEmail: () => Promise<void>
+  updateEmail: (newEmail: string) => Promise<void>
+  openProfileModal: () => void
+  closeProfileModal: () => void
 }
 
 const AuthContext = createContext<AuthContextType | undefined>(undefined)
 
 export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   const [isSignedIn, setIsSignedIn] = useState(false)
+  const [email, setEmail] = useState<string | null>(null)
+  const [isEmailLoading, setIsEmailLoading] = useState(false)
+  const [isEmailUpdating, setIsEmailUpdating] = useState(false)
+  const [emailError, setEmailError] = useState<string | null>(null)
+  const [isProfileModalOpen, setIsProfileModalOpen] = useState(false)
   const { address } = useWagmiAccount()
 
-  const handleAddressChange = async function () {
+  const handleAddressChange = useCallback(async () => {
     log.info(`Address changed: ${address}`)
     if (!address) {
       log.warn('No address found, signing out')
       setIsSignedIn(false)
+      setEmail(null)
       return
     }
     try {
@@ -54,6 +69,7 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
       if (status) {
         log.info('User is already signed in')
         setIsSignedIn(true)
+        await getEmail()
       } else {
         log.info('User not signed in, clearing session')
         await handleSignOut()
@@ -62,9 +78,9 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
       log.error('Error checking sign-in status:', error)
       setIsSignedIn(false)
     }
-  }
+  }, [address])
 
-  const getSignInStatus = async (): Promise<boolean> => {
+  const getSignInStatus = useCallback(async (): Promise<boolean> => {
     try {
       if (!address) return false
       log.info(`Checking sign-in status for address: ${address}`)
@@ -80,9 +96,9 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
       log.error('Error checking sign-in status:', error)
       return false
     }
-  }
+  }, [address])
 
-  const handleSignIn = async () => {
+  const handleSignIn = useCallback(async () => {
     if (!address) {
       log.warn('Cannot sign in: No address provided')
       return
@@ -116,15 +132,16 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
       if (response.ok) {
         log.info('Sign in successful')
         setIsSignedIn(true)
+        await getEmail()
       } else {
         log.error('Sign in failed', response.status, response.statusText)
       }
     } catch (error) {
       log.error('Error signing in:', error)
     }
-  }
+  }, [address])
 
-  const handleSignOut = async () => {
+  const handleSignOut = useCallback(async () => {
     log.info('Initiating sign out')
     try {
       const response = await fetch(`${API_URL}/auth/signout`, {
@@ -140,29 +157,116 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
       log.error('Error signing out:', error)
     } finally {
       setIsSignedIn(false)
+      setEmail(null)
     }
-  }
+  }, [])
 
-  const fetchNonce = async () => {
+  const fetchNonce = useCallback(async () => {
     log.debug('Fetching nonce')
     const response = await fetch(`${API_URL}/auth/nonce`)
     const data = await response.json()
     log.debug(`Nonce received: ${data.nonce}`)
     return data.nonce
-  }
+  }, [])
+
+  const getEmail = useCallback(async () => {
+    setIsEmailLoading(true)
+    setEmailError(null)
+    try {
+      const response = await fetch(`${API_URL}/auth/email`, {
+        credentials: 'include'
+      })
+      if (response.ok) {
+        if (response.status === 204) {
+          setEmail(null)
+        } else {
+          const data = await response.json()
+          setEmail(data.email)
+        }
+      } else {
+        throw new Error('Failed to fetch email')
+      }
+    } catch (error) {
+      console.error('Error fetching email:', error)
+      setEmailError('Failed to fetch email')
+    } finally {
+      setIsEmailLoading(false)
+    }
+  }, [])
+
+  const updateEmail = useCallback(async (newEmail: string) => {
+    setIsEmailUpdating(true)
+    setEmailError(null)
+    try {
+      const response = await fetch(`${API_URL}/auth/update_email`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ email: newEmail }),
+        credentials: 'include'
+      })
+      if (response.ok) {
+        setEmail(newEmail)
+      } else {
+        const errorData = await response.json()
+        throw new Error(errorData.error || 'Failed to update email')
+      }
+    } catch (error: any) {
+      log.error('Error updating email:', error)
+      setEmailError(error.message || 'Failed to update email')
+    } finally {
+      setIsEmailUpdating(false)
+    }
+  }, [])
+
+  const openProfileModal = useCallback(() => {
+    setIsProfileModalOpen(true)
+  }, [])
+
+  const closeProfileModal = useCallback(() => {
+    setIsProfileModalOpen(false)
+  }, [])
 
   useEffect(() => {
     log.info('Address changed, updating auth status')
     handleAddressChange()
-  }, [address])
+  }, [address, handleAddressChange])
 
-  return (
-    <AuthContext.Provider
-      value={{ isSignedIn, handleSignIn, handleSignOut, handleAddressChange, getSignInStatus }}
-    >
-      {children}
-    </AuthContext.Provider>
+  const contextValue = useMemo(
+    () => ({
+      isSignedIn,
+      email,
+      isEmailLoading,
+      isEmailUpdating,
+      emailError,
+      isProfileModalOpen,
+      handleSignIn,
+      handleSignOut,
+      handleAddressChange,
+      getSignInStatus,
+      getEmail,
+      updateEmail,
+      openProfileModal,
+      closeProfileModal
+    }),
+    [
+      isSignedIn,
+      email,
+      isEmailLoading,
+      isEmailUpdating,
+      emailError,
+      isProfileModalOpen,
+      handleSignIn,
+      handleSignOut,
+      handleAddressChange,
+      getSignInStatus,
+      getEmail,
+      updateEmail,
+      openProfileModal,
+      closeProfileModal
+    ]
   )
+
+  return <AuthContext.Provider value={contextValue}>{children}</AuthContext.Provider>
 }
 
 export const useAuth = () => {
@@ -172,4 +276,4 @@ export const useAuth = () => {
     throw new Error('useAuth must be used within an AuthProvider')
   }
   return context
-}
\ No newline at end of file
+}
diff --git a/src/Header.tsx b/src/Header.tsx
index 94e4654e..9aeb9e84 100644
--- a/src/Header.tsx
+++ b/src/Header.tsx
@@ -33,6 +33,7 @@ import HelpZen from './components/HelpZen'
 import MoreMenu from './components/MoreMenu'
 import AccountMenu from './components/AccountMenu'
 import NetworkSwitch from './components/NetworkSwitch'
+import GetSFuel from './components/GetSFuel'
 
 import { MAINNET_CHAIN_NAME } from './core/constants'
 import { Link } from 'react-router-dom'
@@ -62,6 +63,7 @@ export default function Header(props: { address: `0x${string}` | undefined; mpc:
           ) : null}
         </div>
         <AccountMenu address={props.address} />
+        <GetSFuel mpc={props.mpc} />
         <NetworkSwitch mpc={props.mpc} />
         <HelpZen />
         <MoreMenu />
diff --git a/src/LikedAppsContext.tsx b/src/LikedAppsContext.tsx
index 926f7192..fc8596fd 100644
--- a/src/LikedAppsContext.tsx
+++ b/src/LikedAppsContext.tsx
@@ -38,8 +38,8 @@ interface LikedAppsContextType {
   refreshLikedApps: () => Promise<void>
   getAppId: (chainName: string, appName: string) => string
   getAppInfoById: (appId: string) => types.IAppId
-  getTrendingApps: () => string[]
-  getTrendingRank: (trendingAppIds: string[], appId: string) => number | undefined
+  getMostLikedApps: () => string[]
+  getMostLikedRank: (mostLikedAppIds: string[], appId: string) => number | undefined
 }
 
 const LikedAppsContext = createContext<LikedAppsContextType | undefined>(undefined)
@@ -133,15 +133,15 @@ export const LikedAppsProvider: React.FC<{ children: React.ReactNode }> = ({ chi
     return { chain, app }
   }
 
-  const getTrendingApps = useCallback(() => {
+  const getMostLikedApps = useCallback(() => {
     return Object.entries(appLikes)
       .sort(([, likesA], [, likesB]) => likesB - likesA)
       .slice(0, MAX_APPS_DEFAULT)
       .map(([appId]) => appId)
   }, [appLikes])
 
-  const getTrendingRank = (trendingAppIds: string[], appId: string): number | undefined => {
-    const idx = trendingAppIds.indexOf(appId)
+  const getMostLikedRank = (mostLikedAppIds: string[], appId: string): number | undefined => {
+    const idx = mostLikedAppIds.indexOf(appId)
     return idx === -1 ? undefined : idx + 1
   }
 
@@ -156,8 +156,8 @@ export const LikedAppsProvider: React.FC<{ children: React.ReactNode }> = ({ chi
         refreshLikedApps: fetchLikedApps,
         getAppId,
         getAppInfoById,
-        getTrendingApps,
-        getTrendingRank
+        getMostLikedApps,
+        getMostLikedRank
       }}
     >
       {children}
diff --git a/src/Portal.tsx b/src/Portal.tsx
index e68362a4..9b109dd7 100644
--- a/src/Portal.tsx
+++ b/src/Portal.tsx
@@ -29,6 +29,7 @@ import Header from './Header'
 import SkDrawer from './SkDrawer'
 import Router from './Router'
 import SkBottomNavigation from './SkBottomNavigation'
+import ProfileModal from './components/profile/ProfileModal'
 
 export default function Portal() {
   const mpc = useMetaportStore((state) => state.mpc)
@@ -41,6 +42,7 @@ export default function Portal() {
       <SkDrawer />
       <div className={cls(cmn.fullWidth)} id="appContentScroll">
         <Router />
+        <ProfileModal />
         <div className={cls(cmn.mtop20, cmn.fullWidth)}>
           <Debug />
         </div>
diff --git a/src/Router.tsx b/src/Router.tsx
index 4719c804..61d0a8e8 100644
--- a/src/Router.tsx
+++ b/src/Router.tsx
@@ -257,7 +257,14 @@ export default function Router() {
           <Routes>
             <Route
               index
-              element={<Start skaleNetwork={mpc.config.skaleNetwork} chainsMeta={chainsMeta} />}
+              element={
+                <Start
+                  skaleNetwork={mpc.config.skaleNetwork}
+                  chainsMeta={chainsMeta}
+                  metrics={metrics}
+                  loadData={loadData}
+                />
+              }
             />
             <Route path="bridge" element={<Bridge isXs={isXs} chainsMeta={chainsMeta} />} />
             <Route path="bridge">
@@ -299,7 +306,15 @@ export default function Router() {
             />
             <Route
               path="ecosystem"
-              element={<Ecosystem isXs={isXs} mpc={mpc} chainsMeta={chainsMeta} />}
+              element={
+                <Ecosystem
+                  isXs={isXs}
+                  mpc={mpc}
+                  chainsMeta={chainsMeta}
+                  metrics={metrics}
+                  loadData={loadData}
+                />
+              }
             />
             <Route path="ecosystem">
               <Route
diff --git a/src/SkDrawer.tsx b/src/SkDrawer.tsx
index 0e4f3a5c..8303a38d 100644
--- a/src/SkDrawer.tsx
+++ b/src/SkDrawer.tsx
@@ -14,17 +14,15 @@ import ListItemText from '@mui/material/ListItemText'
 
 import SwapHorizontalCircleOutlinedIcon from '@mui/icons-material/SwapHorizontalCircleOutlined'
 import PublicOutlinedIcon from '@mui/icons-material/PublicOutlined'
-import HistoryIcon from '@mui/icons-material/History'
 import InsertChartOutlinedIcon from '@mui/icons-material/InsertChartOutlined'
 import PieChartOutlineOutlinedIcon from '@mui/icons-material/PieChartOutlineOutlined'
-import ArrowOutwardRoundedIcon from '@mui/icons-material/ArrowOutwardRounded'
-import DonutLargeRoundedIcon from '@mui/icons-material/DonutLargeRounded'
 import HomeOutlinedIcon from '@mui/icons-material/HomeOutlined'
 import GroupOutlinedIcon from '@mui/icons-material/GroupOutlined'
 import AddCardRoundedIcon from '@mui/icons-material/AddCardRounded'
 import LinkRoundedIcon from '@mui/icons-material/LinkRounded'
+import ExploreOutlinedIcon from '@mui/icons-material/ExploreOutlined'
 
-import { DUNE_SKALE_URL } from './core/constants'
+import { GET_STARTED_URL } from './core/constants'
 
 const drawerWidth = 220
 
@@ -56,21 +54,36 @@ export default function SkDrawer() {
                 </ListItemButton>
               </Link>
             </ListItem>
+            <ListItem>
+              <a
+                className="undec fullW"
+                target="_blank"
+                href={GET_STARTED_URL}
+                rel="noreferrer"
+              >
+                <ListItemButton className={cls(cmn.pPrim)}>
+                  <ListItemIcon>
+                    <ExploreOutlinedIcon />
+                  </ListItemIcon>
+                  <ListItemText primary="Get Started" />
+                </ListItemButton>
+              </a>
+            </ListItem>
           </List>
-          <h4 className={cls(cmn.pSec, cmn.p, cmn.p4, cmn.mtop10, cmn.mleft20)}>Bridge</h4>
+          <h4 className={cls(cmn.pSec, cmn.p, cmn.p4, cmn.mtop10, cmn.mleft20)}>Transfer</h4>
           <List>
             <ListItem>
               <Link to="/bridge" className="undec fullW">
                 <ListItemButton
                   className={cls(cmn.pPrim)}
                   selected={
-                    location.pathname === '/bridge' || location.pathname.includes('/transfer')
+                    location.pathname === '/bridge/history' || location.pathname === '/bridge'
                   }
                 >
                   <ListItemIcon>
                     <SwapHorizontalCircleOutlinedIcon />
                   </ListItemIcon>
-                  <ListItemText primary="Transfer" />
+                  <ListItemText primary="Bridge" />
                 </ListItemButton>
               </Link>
             </ListItem>
@@ -87,19 +100,6 @@ export default function SkDrawer() {
                 </ListItemButton>
               </Link>
             </ListItem>
-            <ListItem>
-              <Link to="/bridge/history" className="undec fullW">
-                <ListItemButton
-                  className={cls(cmn.pPrim)}
-                  selected={location.pathname === '/bridge/history'}
-                >
-                  <ListItemIcon>
-                    <HistoryIcon />
-                  </ListItemIcon>
-                  <ListItemText primary="History" />
-                </ListItemButton>
-              </Link>
-            </ListItem>
           </List>
           <h4 className={cls(cmn.pSec, cmn.p, cmn.p4, cmn.mtop10, cmn.mleft20)}>Network</h4>
           <List>
@@ -173,17 +173,6 @@ export default function SkDrawer() {
                 </ListItemButton>
               </Link>
             </ListItem>
-            <ListItem>
-              <a className="undec fullW" target="_blank" href={DUNE_SKALE_URL} rel="noreferrer">
-                <ListItemButton className={cls(cmn.pPrim)}>
-                  <ListItemIcon>
-                    <DonutLargeRoundedIcon />
-                  </ListItemIcon>
-                  <ListItemText primary="Dune" />
-                  <ArrowOutwardRoundedIcon className="drawerIconRi" />
-                </ListItemButton>
-              </a>
-            </ListItem>
           </List>
         </Box>
       </Drawer>
diff --git a/src/assets/discord-mark-white.svg b/src/assets/discord-mark-white.svg
deleted file mode 100644
index 7f9a31f0..00000000
--- a/src/assets/discord-mark-white.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127.14 96.36"><path fill="#fff" d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z"/></svg>
\ No newline at end of file
diff --git a/src/assets/validators/v4.png b/src/assets/validators/v4.png
new file mode 100644
index 00000000..871fb82e
Binary files /dev/null and b/src/assets/validators/v4.png differ
diff --git a/src/assets/validators/v4.webp b/src/assets/validators/v4.webp
deleted file mode 100644
index 672dcd76..00000000
Binary files a/src/assets/validators/v4.webp and /dev/null differ
diff --git a/src/components/AccountMenu.tsx b/src/components/AccountMenu.tsx
index 21bb3848..8353c1a6 100644
--- a/src/components/AccountMenu.tsx
+++ b/src/components/AccountMenu.tsx
@@ -21,21 +21,12 @@
  * @copyright SKALE Labs 2023-Present
  */
 
-import { useState, type MouseEvent } from 'react'
 import Jazzicon, { jsNumberForAddress } from 'react-jazzicon'
 
 import Box from '@mui/material/Box'
-import Menu from '@mui/material/Menu'
-import MenuItem from '@mui/material/MenuItem'
 import Tooltip from '@mui/material/Tooltip'
 import Button from '@mui/material/Button'
-
-import ArrowOutwardIcon from '@mui/icons-material/ArrowOutward'
-import SignalCellularAltOutlinedIcon from '@mui/icons-material/SignalCellularAltOutlined'
-import AccountCircleRoundedIcon from '@mui/icons-material/AccountCircleRounded'
 import LooksRoundedIcon from '@mui/icons-material/LooksRounded'
-import LoginOutlinedIcon from '@mui/icons-material/LoginOutlined'
-import LogoutOutlinedIcon from '@mui/icons-material/LogoutOutlined'
 import FiberManualRecordRoundedIcon from '@mui/icons-material/FiberManualRecordRounded'
 
 import { cls, styles, cmn, RainbowConnectButton } from '@skalenetwork/metaport'
@@ -43,163 +34,63 @@ import { cls, styles, cmn, RainbowConnectButton } from '@skalenetwork/metaport'
 import { useAuth } from '../AuthContext'
 
 export default function AccountMenu(props: any) {
-  const { isSignedIn, handleSignIn, handleSignOut } = useAuth()
-  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
-  const open = Boolean(anchorEl)
-  const handleClick = (event: MouseEvent<HTMLElement>) => {
-    setAnchorEl(event.currentTarget)
-  }
-  const handleClose = () => {
-    setAnchorEl(null)
-  }
-
+  const { isSignedIn, openProfileModal } = useAuth()
   return (
-    <div>
-      <Box sx={{ display: 'flex', alignItems: 'center', textAlign: 'center' }}>
-        {!props.address ? (
-          <Tooltip arrow title="Click to connect wallet">
-            <div>
-              <RainbowConnectButton.Custom>
-                {({ openConnectModal }) => {
-                  return (
-                    <Button
-                      onClick={() => {
-                        openConnectModal()
-                      }}
-                      className={cls(styles.paperGrey, cmn.pPrim, 'mp__btnConnect', cmn.flex)}
-                    >
-                      <LooksRoundedIcon
-                        className={cmn.mri5}
-                        style={{ height: '18px', width: '18px' }}
-                      />
-                      Connect wallet
-                    </Button>
-                  )
-                }}
-              </RainbowConnectButton.Custom>
-            </div>
-          </Tooltip>
-        ) : (
-          <Tooltip
-            arrow
-            title={isSignedIn ? 'Conneced and signed-in' : 'Wallet connect, signed-out'}
+    <Box sx={{ display: 'flex', alignItems: 'center', textAlign: 'center' }}>
+      {!props.address ? (
+        <Tooltip arrow title="Click to connect wallet">
+          <div>
+            <RainbowConnectButton.Custom>
+              {({ openConnectModal }) => {
+                return (
+                  <Button
+                    onClick={() => {
+                      openConnectModal()
+                    }}
+                    className={cls(styles.paperGrey, cmn.pPrim, 'mp__btnConnect', cmn.flex)}
+                  >
+                    <LooksRoundedIcon
+                      className={cmn.mri5}
+                      style={{ height: '18px', width: '18px' }}
+                    />
+                    Connect wallet
+                  </Button>
+                )
+              }}
+            </RainbowConnectButton.Custom>
+          </div>
+        </Tooltip>
+      ) : (
+        <Tooltip arrow title={isSignedIn ? 'Conneced and signed-in' : 'Wallet connect, signed-out'}>
+          <Button
+            onClick={openProfileModal}
+            className={cls('mp__btnConnect', styles.paperGrey, cmn.pPrim, cmn.flex)}
           >
-            <Button
-              onClick={handleClick}
-              className={cls('mp__btnConnect', styles.paperGrey, cmn.pPrim, cmn.flex)}
+            <div
+              className={cls(cmn.mri5, cmn.flexcv)}
+              style={{ height: '20px', position: 'relative' }}
             >
-              <div
-                className={cls(cmn.mri5, cmn.flexcv)}
-                style={{ height: '20px', position: 'relative' }}
-              >
-                <Jazzicon diameter={20} seed={jsNumberForAddress(props.address)} />
-                <div className={cls('icon-overlay', cmn.flex, cmn.flexcv)}>
-                  {isSignedIn ? (
-                    <FiberManualRecordRoundedIcon
-                      color="success"
-                      className={cls(styles.chainIconxs)}
-                    />
-                  ) : (
-                    <FiberManualRecordRoundedIcon
-                      color="warning"
-                      className={cls(styles.chainIconxs)}
-                    />
-                  )}
-                </div>
+              <Jazzicon diameter={20} seed={jsNumberForAddress(props.address)} />
+              <div className={cls('icon-overlay', cmn.flex, cmn.flexcv)}>
+                {isSignedIn ? (
+                  <FiberManualRecordRoundedIcon
+                    color="success"
+                    className={cls(styles.chainIconxs)}
+                  />
+                ) : (
+                  <FiberManualRecordRoundedIcon
+                    color="warning"
+                    className={cls(styles.chainIconxs)}
+                  />
+                )}
               </div>
-              {props.address.substring(0, 5) +
-                '...' +
-                props.address.substring(props.address.length - 3)}
-            </Button>
-          </Tooltip>
-        )}
-      </Box>
-      <Menu
-        className="mp__moreMenu"
-        anchorEl={anchorEl}
-        id="account-menu"
-        open={open}
-        onClose={handleClose}
-        onClick={handleClose}
-        PaperProps={{
-          elevation: 0,
-          sx: {
-            overflow: 'visible',
-            filter: 'drop-shadow(0px 2px 8px rgba(0,0,0,0.32))',
-            mt: 1.5,
-            '& .MuiAvatar-root': {
-              width: 32,
-              height: 32,
-              ml: -0.5,
-              mr: 1
-            },
-            '&:before': {
-              content: '""',
-              display: 'block',
-              position: 'absolute',
-              top: 0,
-              right: 14,
-              width: 10,
-              height: 10,
-              bgcolor: 'background.paper',
-              transform: 'translateY(-50%) rotate(45deg)',
-              zIndex: 0
-            }
-          }
-        }}
-        transformOrigin={{ horizontal: 'right', vertical: 'top' }}
-        anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
-      >
-        <RainbowConnectButton.Custom>
-          {({ openAccountModal }) => {
-            return (
-              <MenuItem
-                onClick={() => {
-                  openAccountModal()
-                  handleClose()
-                }}
-              >
-                <AccountCircleRoundedIcon className={cmn.mri10} /> Account info
-              </MenuItem>
-            )
-          }}
-        </RainbowConnectButton.Custom>
-        <a
-          className="undec fullW"
-          target="_blank"
-          href={'https://etherscan.io/address/' + props.address}
-          rel="noreferrer"
-        >
-          <MenuItem onClick={handleClose}>
-            <div className={cmn.flex}>
-              <SignalCellularAltOutlinedIcon className={cmn.mri10} />
             </div>
-            <div className={cls(cmn.flex, cmn.flexg)}>View on Etherscan</div>
-            <div className={cls(cmn.flex, cmn.mleft10)}>
-              <ArrowOutwardIcon className="menuIconRi" />
-            </div>
-          </MenuItem>
-        </a>
-        <MenuItem
-          onClick={() => {
-            if (isSignedIn) {
-              handleSignOut()
-            } else {
-              handleSignIn()
-            }
-            handleClose()
-          }}
-        >
-          <div className={cmn.flex}>
-            {isSignedIn ? (
-              <LogoutOutlinedIcon className={cmn.mri10} />
-            ) : (
-              <LoginOutlinedIcon className={cmn.mri10} />
-            )}
-          </div>
-          <div className={cls(cmn.flex, cmn.flexg)}>Sign {isSignedIn ? 'out' : 'in'}</div>
-        </MenuItem>
-      </Menu>
-    </div>
+            {props.address.substring(0, 5) +
+              '...' +
+              props.address.substring(props.address.length - 3)}
+          </Button>
+        </Tooltip>
+      )}
+    </Box>
   )
 }
diff --git a/src/components/Carousel.tsx b/src/components/Carousel.tsx
index eb01cd02..6232c41a 100644
--- a/src/components/Carousel.tsx
+++ b/src/components/Carousel.tsx
@@ -32,9 +32,10 @@ import { cmn, cls } from '@skalenetwork/metaport'
 interface CarouselProps {
   children: ReactNode[]
   showArrows?: boolean
+  className?: string
 }
 
-const Carousel: React.FC<CarouselProps> = ({ children, showArrows = true }) => {
+const Carousel: React.FC<CarouselProps> = ({ children, showArrows = true, className }) => {
   const [startIndex, setStartIndex] = useState(0)
   const theme = useTheme()
   const isXs = useMediaQuery(theme.breakpoints.only('xs'))
@@ -61,7 +62,7 @@ const Carousel: React.FC<CarouselProps> = ({ children, showArrows = true }) => {
   const visibleChildren = children.slice(startIndex, startIndex + itemsToShow)
 
   return (
-    <Box sx={{ position: 'relative' }}>
+    <Box sx={{ position: 'relative' }} className={className}>
       <Box
         sx={{
           display: 'flex',
@@ -92,7 +93,7 @@ const Carousel: React.FC<CarouselProps> = ({ children, showArrows = true }) => {
             onClick={handlePrev}
             disabled={startIndex === 0}
             size="small"
-            className={cls('outlined', cmn.mri5)}
+            className={cls('filled', cmn.mri5)}
           >
             <ArrowBackIosRoundedIcon />
           </IconButton>
@@ -100,7 +101,7 @@ const Carousel: React.FC<CarouselProps> = ({ children, showArrows = true }) => {
             onClick={handleNext}
             disabled={startIndex >= children.length - itemsToShow}
             size="small"
-            className={cls(cmn.pSec, 'outlined', cmn.mleft5)}
+            className={cls(cmn.pSec, 'filled', cmn.mleft5)}
           >
             <ArrowForwardIosRoundedIcon />
           </IconButton>
diff --git a/src/components/Chip.tsx b/src/components/Chip.tsx
index a613aad6..1c7fa3ce 100644
--- a/src/components/Chip.tsx
+++ b/src/components/Chip.tsx
@@ -53,6 +53,10 @@ export const ChipTrending: React.FC<{ trending?: number }> = ({ trending }) => {
   )
 }
 
+export const ChipMostLiked: React.FC<{}> = ({}) => {
+  return <Chip label="Most Liked" className={cls(cmn.mleft5, 'chipMostLiked', 'chipXs')} />
+}
+
 export const ChipNew: React.FC<{}> = ({}) => {
   return <Chip label="NEW" className={cls(cmn.mleft5, 'chipNewApp', 'chipXs')} />
 }
diff --git a/src/components/ConnectWallet.tsx b/src/components/ConnectWallet.tsx
index 15c177d5..72eccc19 100644
--- a/src/components/ConnectWallet.tsx
+++ b/src/components/ConnectWallet.tsx
@@ -49,7 +49,7 @@ export default function ConnectWallet(props: {
     <div className={cls(props.className)}>
       <SkPaper gray={!props.tile} className={cls(['titleSection', props.tile])}>
         <div className={cls(cmn.mtop20, cmn.mbott20)}>
-          <p className={cls(cmn.p, cmn.p3, cmn.pSec, cmn.pCent)}>
+          <p className={cls(cmn.p, cmn.p3, 'pSec', cmn.pCent)}>
             {props.customText ?? 'Connect your wallet to continue'}
           </p>
           <div className={cls(cmn.flex)}>
diff --git a/src/components/GetSFuel.tsx b/src/components/GetSFuel.tsx
new file mode 100644
index 00000000..5364d52b
--- /dev/null
+++ b/src/components/GetSFuel.tsx
@@ -0,0 +1,66 @@
+/**
+ * @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 GetSFuel.tsx
+ * @copyright SKALE Labs 2024-Present
+ */
+
+import { Box, Button, Tooltip } from '@mui/material'
+import BoltRoundedIcon from '@mui/icons-material/BoltRounded'
+import AutoModeRoundedIcon from '@mui/icons-material/AutoModeRounded'
+import { cls, styles, cmn, type MetaportCore, useWagmiAccount } from '@skalenetwork/metaport'
+import { usesFuel } from '../useSFuel'
+
+export default function GetSFuel({ mpc }: { mpc: MetaportCore }) {
+  const { sFuelOk, isMining, mineSFuel, sFuelCompletionPercentage, loading } = usesFuel(mpc)
+  const { address } = useWagmiAccount()
+  if (!address) return null
+
+  function btnText() {
+    if (isMining) return `Getting sFUEL - ${sFuelCompletionPercentage}%`
+    if (loading) return 'Checking sFUEL'
+    return sFuelOk ? 'sFUEL OK' : 'Get sFUEL'
+  }
+
+  return (
+    <Box
+      sx={{ alignItems: 'center', textAlign: 'center', display: { xs: 'none', sm: 'flex' } }}
+      className={cls(cmn.mleft5)}
+    >
+      <Tooltip arrow title={sFuelOk ? 'sFUEL balance is OK' : 'Click to get sFUEL for all chains'}>
+        <Button
+          onClick={sFuelOk ? undefined : mineSFuel}
+          disabled={isMining || loading || sFuelOk}
+          className={cls('mp__btnConnect', styles.paperGrey, [cmn.pPrim, !isMining], cmn.flex)}
+          color="success"
+        >
+          {loading ? (
+            <AutoModeRoundedIcon className={cls(cmn.mri5, styles.chainIconxs)} />
+          ) : (
+            <BoltRoundedIcon
+              className={cls(cmn.mri5, styles.chainIconxs)}
+              color={sFuelOk ? 'success' : 'primary'}
+            />
+          )}
+          {btnText()}
+        </Button>
+      </Tooltip>
+    </Box>
+  )
+}
diff --git a/src/components/HelpZen.tsx b/src/components/HelpZen.tsx
index a094ffc2..b34c708f 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/HomeComponents.tsx b/src/components/HomeComponents.tsx
index d27634ff..89b02eea 100644
--- a/src/components/HomeComponents.tsx
+++ b/src/components/HomeComponents.tsx
@@ -29,6 +29,7 @@ import TrendingUpRoundedIcon from '@mui/icons-material/TrendingUpRounded'
 import LinkRoundedIcon from '@mui/icons-material/LinkRounded'
 import PieChartOutlineRoundedIcon from '@mui/icons-material/PieChartOutlineRounded'
 import OutboundRoundedIcon from '@mui/icons-material/OutboundRounded'
+import PeopleRoundedIcon from '@mui/icons-material/PeopleRounded'
 
 interface SectionIcons {
   [key: string]: JSX.Element
@@ -39,6 +40,7 @@ export const SECTION_ICONS: SectionIcons = {
   favorites: <FavoriteRoundedIcon color="primary" />,
   new: <StarRoundedIcon color="primary" />,
   trending: <TrendingUpRoundedIcon color="primary" />,
+  mostLiked: <PeopleRoundedIcon color="primary" />,
   categories: <OutboundRoundedIcon color="primary" />
 }
 
diff --git a/src/components/Message.tsx b/src/components/Message.tsx
index 18209ac2..2054af8e 100644
--- a/src/components/Message.tsx
+++ b/src/components/Message.tsx
@@ -26,8 +26,12 @@ import IconButton from '@mui/material/IconButton'
 import CloseRoundedIcon from '@mui/icons-material/CloseRounded'
 import Collapse from '@mui/material/Collapse'
 import ArrowOutwardRoundedIcon from '@mui/icons-material/ArrowOutwardRounded'
-import { SkPaper, cls, cmn } from '@skalenetwork/metaport'
+import { SkPaper, cls, cmn, useWagmiAccount } from '@skalenetwork/metaport'
 import { Link } from 'react-router-dom'
+import { Button } from '@mui/material'
+
+import { useAuth } from '../AuthContext'
+import SwellIcon from './ecosystem/SwellIcon'
 
 export default function Message(props: {
   text: string | null
@@ -38,25 +42,38 @@ export default function Message(props: {
   showOnLoad?: boolean | undefined
   type?: 'warning' | 'info' | 'error'
   closable?: boolean
+  button?: ReactElement | null
+  gray?: boolean
 }) {
   const type = props.type ?? 'info'
   const [show, setShow] = useState<boolean>(true)
   const closable = props.closable ?? true
+  const gray = props.gray ?? true
   return (
     <Collapse in={show}>
       <SkPaper
-        gray
+        gray={gray}
         className={cls(
           props.className,
-          'border',
+          'skMessage',
+          cmn.flexcv,
+          cmn.flex,
           ['warningMsg', type === 'warning'],
           ['errorMsg', type === 'error']
         )}
       >
         <div
-          className={cls(cmn.flex, cmn.fullWidth, cmn.flexcv, cmn.mtopd5, cmn.mbotdt5, cmn.mleft10)}
+          className={cls(
+            cmn.flex,
+            cmn.fullWidth,
+            cmn.flexcv,
+            cmn.mtop5,
+            cmn.mbott5,
+            cmn.mleft10,
+            cmn.mri10
+          )}
         >
-          <div className={cls(cmn.flex, cmn.flexc, cmn.mri10)}>{props.icon}</div>
+          <div className={cls(cmn.flex, cmn.flexc, cmn.mri15)}>{props.icon}</div>
           {props.text ? (
             <p className={cls(cmn.p, cmn.p3, cmn.p600, [cmn.pPrim, type !== 'warning'], cmn.mri5)}>
               {props.text}
@@ -75,23 +92,42 @@ export default function Message(props: {
           ) : null}
 
           <div className={cmn.flexg}></div>
+          {props.button}
           {closable ? (
-            <div className={cls(cmn.mri20)}>
-              <IconButton
-                onClick={() => {
-                  setShow(false)
-                }}
-                className={cls(cmn.paperGrey, cmn.mleft10)}
-              >
-                <CloseRoundedIcon
-                  className={cls([cmn.pSec, type !== 'warning'])}
-                  style={{ height: '16px', width: '16px' }}
-                />
-              </IconButton>
-            </div>
+            <IconButton
+              onClick={() => {
+                setShow(false)
+              }}
+              className={cls(cmn.paperGrey, cmn.mleft10)}
+            >
+              <CloseRoundedIcon
+                className={cls([cmn.pSec, type !== 'warning'])}
+                style={{ height: '16px', width: '16px' }}
+              />
+            </IconButton>
           ) : null}
         </div>
       </SkPaper>
     </Collapse>
   )
 }
+
+export function SwellMessage(props: { className?: string }) {
+  const { openProfileModal, isEmailLoading, email } = useAuth()
+  const { address } = useWagmiAccount()
+
+  if ((!isEmailLoading && email) || !address) return
+  return (
+    <Message
+      className={props.className}
+      icon={<SwellIcon color="primary" />}
+      text="Complete your profile to receive quest rewards on SKALE Swell"
+      closable={false}
+      button={
+        <Button className={cls('btn btnSm')} variant="contained" onClick={openProfileModal}>
+          Go to profile
+        </Button>
+      }
+    />
+  )
+}
diff --git a/src/components/MetricsWarning.tsx b/src/components/MetricsWarning.tsx
index 06eb00c6..bf9c2b3a 100644
--- a/src/components/MetricsWarning.tsx
+++ b/src/components/MetricsWarning.tsx
@@ -30,11 +30,10 @@ import Message from './Message'
 
 import { timestampToDate } from '../core/helper'
 
-const FOUR_HOURS_IN_SECONDS = 4 * 60 * 60
+const MAX_DELAY_SECONDS = 48 * 60 * 60
 
 export default function MetricsWarning(props: { metrics: types.IMetrics | null }) {
-  if (!props.metrics || Date.now() / 1000 - props.metrics.last_updated < FOUR_HOURS_IN_SECONDS)
-    return
+  if (!props.metrics || Date.now() / 1000 - props.metrics.last_updated < MAX_DELAY_SECONDS) return
   return (
     <Container maxWidth="md">
       <Message
diff --git a/src/components/MoreMenu.tsx b/src/components/MoreMenu.tsx
index e6bcb51d..eda83624 100644
--- a/src/components/MoreMenu.tsx
+++ b/src/components/MoreMenu.tsx
@@ -30,17 +30,14 @@ import Tooltip from '@mui/material/Tooltip'
 import MoreVertIcon from '@mui/icons-material/MoreVert'
 import ArrowOutwardIcon from '@mui/icons-material/ArrowOutward'
 import FormatListBulletedRoundedIcon from '@mui/icons-material/FormatListBulletedRounded'
+import MenuBookRoundedIcon from '@mui/icons-material/MenuBookRounded'
 
 import { Link } from 'react-router-dom'
 
-import PublicOutlinedIcon from '@mui/icons-material/PublicOutlined'
-import ArticleOutlinedIcon from '@mui/icons-material/ArticleOutlined'
 import InventoryOutlinedIcon from '@mui/icons-material/InventoryOutlined'
 
 import { cls, styles, cmn } from '@skalenetwork/metaport'
-
-import { DISCORD_INVITE_URL } from '../core/constants'
-import discordLogo from '../assets/discord-mark-white.svg'
+import { DOCS_PORTAL_URL } from '../core/constants'
 
 export default function MoreMenu() {
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
@@ -114,44 +111,12 @@ export default function MoreMenu() {
             <FormatListBulletedRoundedIcon className={cmn.mri10} /> Changelog
           </MenuItem>
         </Link>
-        <a className="undec fullW" target="_blank" href="https://skale.space/" rel="noreferrer">
-          <MenuItem onClick={handleClose}>
-            <div className={cmn.flex}>
-              <PublicOutlinedIcon className={cmn.mri10} />
-            </div>
-            <div className={cls(cmn.flex, cmn.flexg)}>SKALE Website</div>
-            <div className={cls(cmn.flex, cmn.mleft10)}>
-              <ArrowOutwardIcon className="menuIconRi" />
-            </div>
-          </MenuItem>
-        </a>
-        <a
-          className="undec fullW"
-          target="_blank"
-          href="https://docs.skale.network/"
-          rel="noreferrer"
-        >
-          <MenuItem onClick={handleClose} className="undec">
-            <div className={cmn.flex}>
-              <ArticleOutlinedIcon className={cmn.mri10} />
-            </div>
-            <div className={cls(cmn.flex, cmn.flexg)}>Docs portal</div>
-            <div className={cls(cmn.flex, cmn.mleft10)}>
-              <ArrowOutwardIcon className="menuIconRi" />
-            </div>
-          </MenuItem>
-        </a>
-        <a className="undec fullW" target="_blank" href={DISCORD_INVITE_URL} rel="noreferrer">
+        <a className="undec fullW" target="_blank" href={DOCS_PORTAL_URL} rel="noreferrer">
           <MenuItem onClick={handleClose} className="undec">
             <div className={cmn.flex}>
-              <img
-                src={discordLogo}
-                className={cmn.mri10}
-                style={{ width: '22px', height: '22px' }}
-                alt="discord logo"
-              />
+              <MenuBookRoundedIcon className={cmn.mri10} />
             </div>
-            <div className={cls(cmn.flex, cmn.flexg)}>Discord</div>
+            <div className={cls(cmn.flex, cmn.flexg)}>SKALE Network Docs</div>
             <div className={cls(cmn.flex, cmn.mleft10)}>
               <ArrowOutwardIcon className="menuIconRi" />
             </div>
diff --git a/src/components/SkIconBth.tsx b/src/components/SkIconBth.tsx
new file mode 100644
index 00000000..8d6429b7
--- /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 00000000..e87c076f
--- /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/Tile.tsx b/src/components/Tile.tsx
index d0db7941..59ffad43 100644
--- a/src/components/Tile.tsx
+++ b/src/components/Tile.tsx
@@ -44,8 +44,8 @@ export default function Tile(props: {
   color?: DueDateStatus
   progressColor?: DueDateStatus
   progress?: number
-  children?: ReactElement | ReactElement[]
-  childrenRi?: ReactElement | ReactElement[]
+  children?: ReactElement | ReactElement[] | false
+  childrenRi?: ReactElement | ReactElement[] | null | ''
   size?: 'lg' | 'md'
   textColor?: string
   disabled?: boolean | null
@@ -161,6 +161,7 @@ export default function Tile(props: {
                 </Tooltip>
               ) : null}
               {props.value && !props.copy ? value : null}
+              {props.children && <div className={cls(cmn.flexg)}>{props.children}</div>}
               {!props.value && !props.children ? (
                 <Skeleton variant="rectangular" width={150} height={33} />
               ) : null}
@@ -177,7 +178,6 @@ export default function Tile(props: {
           </div>
           {props.childrenRi}
         </SkStack>
-        {props.children}
       </div>
     </Tooltip>
   )
diff --git a/src/components/chains/HubTile.tsx b/src/components/chains/HubTile.tsx
index 407c4517..95f9eda1 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/components/delegation/RetrieveRewardModal.tsx b/src/components/delegation/RetrieveRewardModal.tsx
index 41e1bc5f..e25e006a 100644
--- a/src/components/delegation/RetrieveRewardModal.tsx
+++ b/src/components/delegation/RetrieveRewardModal.tsx
@@ -103,7 +103,7 @@ export default function RetrieveRewardModal(props: {
           <Container maxWidth="md">
             <SkPaper className={cls(cmn.nop)}>
               <SkPaper gray>
-                <p className={cls(cmn.p, cmn.p1, cmn.p700, cmn.pCent, cmn.mtop10, cmn.mbott10)}>
+                <p className={cls(cmn.p, cmn.p2, cmn.p700, cmn.pCent, cmn.mtop10, cmn.mbott10)}>
                   Confirm reward retrieval
                 </p>
                 <Message
@@ -111,6 +111,7 @@ export default function RetrieveRewardModal(props: {
                   type="warning"
                   icon={<WarningRoundedIcon />}
                   className={cls(cmn.mbott10)}
+                  closable={false}
                 />
                 <Collapse in={!!errorMsg}>
                   <Message
@@ -159,15 +160,15 @@ export default function RetrieveRewardModal(props: {
                         {edit ? (
                           <div>
                             <Button
-                              variant="text"
-                              className={cls('btnSm', 'outlined')}
+                              variant="contained"
+                              className={cls('btnSm')}
                               onClick={saveAddress}
                             >
                               Save
                             </Button>
                             <Button
                               variant="text"
-                              className={cls('btnSm', 'outlined', cmn.mleft10)}
+                              className={cls('btnSm', 'filled', cmn.mleft10)}
                               onClick={() => {
                                 setInputAddress(props.address)
                                 props.setCustomRewardAddress(props.address)
@@ -181,7 +182,7 @@ export default function RetrieveRewardModal(props: {
                         ) : (
                           <Button
                             variant="text"
-                            className={cls('btnSm', 'outlined')}
+                            className={cls('btnSm', 'filled')}
                             onClick={() => setEdit(!edit)}
                             disabled={props.disabled}
                           >
diff --git a/src/components/ecosystem/AppCardV2.tsx b/src/components/ecosystem/AppCardV2.tsx
index d5dbd337..94ff3da0 100644
--- a/src/components/ecosystem/AppCardV2.tsx
+++ b/src/components/ecosystem/AppCardV2.tsx
@@ -28,12 +28,12 @@ import { type types } from '@/core'
 import ChainLogo from '../ChainLogo'
 import { MAINNET_CHAIN_LOGOS, OFFCHAIN_APP } from '../../core/constants'
 import { getChainShortAlias } from '../../core/chain'
-import { chainBg, getChainAlias } from '../../core/metadata'
+import { chainBg, getChainAlias, isPreTge } from '../../core/metadata'
 
 import CollapsibleDescription from '../CollapsibleDescription'
 import CategoriesChips from './CategoriesChips'
 import SocialButtons from './Socials'
-import { ChipTrending, ChipNew, ChipPreTge } from '../Chip'
+import { ChipNew, ChipPreTge, ChipTrending } from '../Chip'
 
 export default function AppCard(props: {
   skaleNetwork: types.SkaleNetwork
@@ -43,18 +43,22 @@ export default function AppCard(props: {
   transactions?: number
   newApps?: types.AppWithChainAndName[]
   isNew?: boolean
-  trending?: number
+  mostLiked?: number
+  trending?: boolean
+  gray?: boolean
 }) {
   const shortAlias = getChainShortAlias(props.chainsMeta, props.schainName)
   const url = `/ecosystem/${shortAlias}/${props.appName}`
   const appMeta = props.chainsMeta[props.schainName]?.apps?.[props.appName]
 
+  const gray = props.gray ?? true
+
   if (!appMeta) return
 
   const appDescription = appMeta.description ?? 'No description'
 
   return (
-    <SkPaper gray fullHeight className="sk-app-card">
+    <SkPaper gray={gray} fullHeight className="sk-app-card">
       <Link to={url}>
         <div className={cls(cmn.flex)}>
           <div className="sk-app-logo sk-logo-sm br__tile">
@@ -78,12 +82,12 @@ export default function AppCard(props: {
           )}
         </div>
         <div className={cls(cmn.flex, cmn.flexcv, cmn.mtop10)}>
-          <p className={cls(cmn.p, cmn.pPrim, cmn.p600, cmn.p1, 'shortP', cmn.flexg, cmn.mri5)}>
+          <p className={cls(cmn.p, cmn.pPrim, cmn.p600, cmn.p1, 'shortP', cmn.flexg)}>
             {getChainAlias(props.chainsMeta, props.schainName, props.appName)}
           </p>
-          {props.trending !== undefined && <ChipTrending />}
+          {props.trending && <ChipTrending />}
           {props.isNew && <ChipNew />}
-          {appMeta.tags?.includes('pretge') && <ChipPreTge />}
+          {isPreTge(appMeta) && <ChipPreTge />}
         </div>
         <CollapsibleDescription text={appDescription} />
         <CategoriesChips categories={appMeta.categories} className={cls(cmn.mtop20)} />
diff --git a/src/components/ecosystem/AppScreenshots.tsx b/src/components/ecosystem/AppScreenshots.tsx
new file mode 100644
index 00000000..4cf09d3d
--- /dev/null
+++ b/src/components/ecosystem/AppScreenshots.tsx
@@ -0,0 +1,100 @@
+/**
+ * @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 AppScreenshots.tsx
+ * @copyright SKALE Labs 2024-Present
+ */
+
+import React, { useState, useEffect } from 'react'
+import { cls, cmn, SkPaper } from '@skalenetwork/metaport'
+
+import { Collapse } from '@mui/material'
+import ExploreRoundedIcon from '@mui/icons-material/ExploreRounded'
+
+import ScreenshotCarousel from './ScreenshotCarousel'
+import AccordionSection from '../AccordionSection'
+import { BASE_METADATA_URL } from '../../core/constants'
+
+interface AppScreenshotsProps {
+  chainName: string
+  appName: string
+  skaleNetwork: string
+}
+
+const AppScreenshots: React.FC<AppScreenshotsProps> = ({ chainName, appName, skaleNetwork }) => {
+  const [screenshots, setScreenshots] = useState<string[]>([])
+  const [loading, setLoading] = useState<boolean>(true)
+  const [error, setError] = useState<string | null>(null)
+
+  const fetchScreenshots = async (): Promise<void> => {
+    setLoading(true)
+    setError(null)
+    const screenshotUrls: string[] = []
+    let index = 1
+
+    const baseUrl = `${BASE_METADATA_URL}/${skaleNetwork}/screenshots`
+
+    while (true) {
+      let found = false
+      for (const ext of ['png', 'jpg']) {
+        const url = `${baseUrl}/${chainName}-${appName}-${index}.${ext}`
+        try {
+          const response = await fetch(url, { method: 'HEAD' })
+          if (response.ok) {
+            screenshotUrls.push(url)
+            found = true
+            break
+          }
+        } catch (err) {
+          console.error(`Error checking screenshot: ${url}`, err)
+        }
+      }
+      if (!found) break
+      index++
+    }
+
+    if (screenshotUrls.length === 0) {
+      setError('No screenshots found for this app.')
+    } else {
+      setScreenshots(screenshotUrls)
+    }
+    setLoading(false)
+  }
+
+  useEffect(() => {
+    fetchScreenshots()
+  }, [chainName, appName, skaleNetwork])
+
+  return (
+    <Collapse in={!loading && !error}>
+      <SkPaper gray className={cls(cmn.mtop10, 'fwmobile')}>
+        <AccordionSection
+          expandedByDefault
+          title="Explore project"
+          icon={<ExploreRoundedIcon />}
+          marg={false}
+        >
+          <ScreenshotCarousel screenshots={screenshots} appName={appName} />
+        </AccordionSection>
+      </SkPaper>
+    </Collapse>
+  )
+}
+
+export default AppScreenshots
diff --git a/src/components/ecosystem/CategoryIcons.tsx b/src/components/ecosystem/CategoryIcons.tsx
index d65f563a..7aea6210 100644
--- a/src/components/ecosystem/CategoryIcons.tsx
+++ b/src/components/ecosystem/CategoryIcons.tsx
@@ -62,7 +62,11 @@ import {
   JoinRightRounded,
   PhoneIphoneOutlined,
   DiamondOutlined,
-  SailingOutlined
+  SailingOutlined,
+  SellOutlined,
+  HomeRepairServiceOutlined,
+  DonutLargeRounded,
+  PeopleAltRounded
 } from '@mui/icons-material'
 import { cls, styles } from '@skalenetwork/metaport'
 import EpicGamesStoreLogo from '../../assets/egs.svg'
@@ -105,6 +109,14 @@ export const CategoryIcons: React.FC<{ category: string }> = ({ category }) => {
       return <AccountBalanceWalletOutlined />
     case 'web3':
       return <JoinRightRounded />
+    case 'pretge':
+      return <SellOutlined />
+    case 'utility':
+      return <HomeRepairServiceOutlined />
+    case 'analytics':
+      return <DonutLargeRounded />
+    case 'validator':
+      return <PeopleAltRounded />
 
     // Gaming subcategories
     case 'action-adventure':
diff --git a/src/components/ecosystem/RecommendedApps.tsx b/src/components/ecosystem/RecommendedApps.tsx
new file mode 100644
index 00000000..3a6c515c
--- /dev/null
+++ b/src/components/ecosystem/RecommendedApps.tsx
@@ -0,0 +1,102 @@
+/**
+ * @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 RecommendedApps.tsx
+ * @copyright SKALE Labs 2024-Present
+ */
+
+import React, { useMemo } from 'react'
+import { Grid, Box } from '@mui/material'
+import { cls } from '@skalenetwork/metaport'
+
+import { type types } from '@/core'
+
+import { isNewApp, isTrending } from '../../core/ecosystem/utils'
+import { findSimilarApps, type SimilarApp } from '../../core/ecosystem/similarApps'
+
+import AppCardV2 from './AppCardV2'
+import Carousel from '../Carousel'
+import { useLikedApps } from '../../LikedAppsContext'
+
+interface RecommendedAppsProps {
+  skaleNetwork: types.SkaleNetwork
+  chainsMeta: types.ChainsMetadataMap
+  allApps: types.AppWithChainAndName[]
+  currentApp?: types.AppWithChainAndName
+  favoriteApps?: types.AppWithChainAndName[]
+  newApps: types.AppWithChainAndName[]
+  trendingApps: types.AppWithChainAndName[]
+  useCarousel?: boolean
+  className?: string
+  gray?: boolean
+}
+
+const RecommendedApps: React.FC<RecommendedAppsProps> = ({
+  skaleNetwork,
+  chainsMeta,
+  allApps,
+  currentApp,
+  favoriteApps,
+  newApps,
+  trendingApps,
+  useCarousel = false,
+  className,
+  gray = false
+}) => {
+  const { getMostLikedApps, getAppId, getMostLikedRank } = useLikedApps()
+  const mostLikedAppIds = useMemo(() => getMostLikedApps(), [getMostLikedApps])
+
+  const similarApps = useMemo(() => {
+    return findSimilarApps(currentApp, allApps, favoriteApps)
+  }, [currentApp, allApps, favoriteApps])
+
+  if (similarApps.length === 0) return null
+
+  const renderAppCard = (app: SimilarApp) => {
+    const appId = getAppId(app.chain, app.appName)
+    return (
+      <Box key={`${app.chain}-${app.appName}`} className={cls('fl-centered dappCard')}>
+        <AppCardV2
+          skaleNetwork={skaleNetwork}
+          schainName={app.chain}
+          appName={app.appName}
+          chainsMeta={chainsMeta}
+          isNew={isNewApp({ chain: app.chain, app: app.appName }, newApps)}
+          mostLiked={getMostLikedRank(mostLikedAppIds, appId)}
+          trending={isTrending(trendingApps, app.chain, app.appName)}
+          gray={gray}
+        />
+      </Box>
+    )
+  }
+  if (useCarousel) {
+    return <Carousel className={className}>{similarApps.map(renderAppCard)}</Carousel>
+  }
+  return (
+    <Grid container spacing={2} className={className}>
+      {similarApps.map((app) => (
+        <Grid key={`${app.chain}-${app.appName}`} item xs={12} sm={6} md={4} lg={4}>
+          {renderAppCard(app)}
+        </Grid>
+      ))}
+    </Grid>
+  )
+}
+
+export default React.memo(RecommendedApps)
diff --git a/src/components/ecosystem/ScreenshotCarousel.tsx b/src/components/ecosystem/ScreenshotCarousel.tsx
new file mode 100644
index 00000000..cf990494
--- /dev/null
+++ b/src/components/ecosystem/ScreenshotCarousel.tsx
@@ -0,0 +1,128 @@
+/**
+ * @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 ScreenshotCarousel.tsx
+ * @copyright SKALE Labs 2024-Present
+ */
+
+import React, { useState, useEffect, useCallback } from 'react'
+import useEmblaCarousel from 'embla-carousel-react'
+import { Box, IconButton } from '@mui/material'
+import ArrowBackIosNewRoundedIcon from '@mui/icons-material/ArrowBackIosNewRounded'
+import ArrowForwardIosRoundedIcon from '@mui/icons-material/ArrowForwardIosRounded'
+import { cls, cmn, styles } from '@skalenetwork/metaport'
+
+type PropType = {
+  screenshots: string[]
+  appName: string
+}
+
+const ScreenshotCarousel: React.FC<PropType> = ({ screenshots, appName }) => {
+  const [emblaRef, emblaApi] = useEmblaCarousel({
+    align: 'start',
+    loop: false,
+    dragFree: true
+  })
+
+  const [prevBtnEnabled, setPrevBtnEnabled] = useState(false)
+  const [nextBtnEnabled, setNextBtnEnabled] = useState(false)
+
+  const scrollPrev = useCallback(() => emblaApi && emblaApi.scrollPrev(), [emblaApi])
+  const scrollNext = useCallback(() => emblaApi && emblaApi.scrollNext(), [emblaApi])
+
+  const onSelect = useCallback(() => {
+    if (!emblaApi) return
+    setPrevBtnEnabled(emblaApi.canScrollPrev())
+    setNextBtnEnabled(emblaApi.canScrollNext())
+  }, [emblaApi])
+
+  useEffect(() => {
+    if (!emblaApi) return
+    onSelect()
+    emblaApi.on('select', onSelect)
+    emblaApi.on('reInit', onSelect)
+  }, [emblaApi, onSelect])
+
+  return (
+    <Box position="relative" className={cls(cmn.mtop10)}>
+      <Box className="embla" ref={emblaRef} sx={{ overflow: 'hidden' }}>
+        <Box className="embla__container" display="flex" height={400}>
+          {screenshots.map((screenshot, index) => (
+            <Box
+              key={index}
+              className="embla__slide"
+              flex="0 0 auto"
+              marginRight="10px"
+              height="100%"
+              sx={{
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center'
+              }}
+            >
+              <img
+                src={screenshot}
+                alt={`${appName} screenshot ${index + 1}`}
+                style={{
+                  height: '100%',
+                  width: 'auto',
+                  maxWidth: 'none',
+                  objectFit: 'cover',
+                  borderRadius: '25px'
+                }}
+              />
+            </Box>
+          ))}
+        </Box>
+      </Box>
+      <IconButton
+        onClick={scrollPrev}
+        disabled={!prevBtnEnabled}
+        className="filled"
+        size="small"
+        sx={{
+          position: 'absolute',
+          top: '50%',
+          left: '15px',
+          transform: 'translateY(-50%)',
+          zIndex: 1
+        }}
+      >
+        <ArrowBackIosNewRoundedIcon className={cls(cmn.pSec, styles.chainIconxs)} />
+      </IconButton>
+      <IconButton
+        onClick={scrollNext}
+        disabled={!nextBtnEnabled}
+        className="filled"
+        size="small"
+        sx={{
+          position: 'absolute',
+          top: '50%',
+          right: '15px',
+          transform: 'translateY(-50%)',
+          zIndex: 1
+        }}
+      >
+        <ArrowForwardIosRoundedIcon className={cls(cmn.pSec, styles.chainIconxs)} />
+      </IconButton>
+    </Box>
+  )
+}
+
+export default ScreenshotCarousel
diff --git a/src/components/ecosystem/Socials.tsx b/src/components/ecosystem/Socials.tsx
index c9fde52b..8454c58c 100644
--- a/src/components/ecosystem/Socials.tsx
+++ b/src/components/ecosystem/Socials.tsx
@@ -23,7 +23,7 @@
 
 import React from 'react'
 import { IconButton, Tooltip } from '@mui/material'
-import { LanguageRounded, TrackChangesRounded } from '@mui/icons-material'
+import { LanguageRounded, TrackChangesRounded, JoinLeftRounded } from '@mui/icons-material'
 import { SocialIcon } from 'react-social-icons/component'
 import 'react-social-icons/discord'
 import 'react-social-icons/github'
@@ -41,6 +41,7 @@ interface SocialButtonsProps {
   appName?: string
   className?: string
   size?: 'sm' | 'md'
+  all?: boolean
 }
 
 const MAX_SOCIALS_SM = 6
@@ -50,6 +51,7 @@ const SocialButtons: React.FC<SocialButtonsProps> = ({
   chainName,
   appName,
   className,
+  all = false,
   size = 'sm'
 }) => {
   const isMd = size === 'md'
@@ -100,10 +102,20 @@ const SocialButtons: React.FC<SocialButtonsProps> = ({
     { key: 'x', network: 'x', title: 'X (Twitter)' },
     { key: 'telegram', network: 'telegram', title: 'Telegram' },
     { key: 'discord', network: 'discord', title: 'Discord' },
-    { key: 'github', network: 'github', title: 'GitHub' }
+    { key: 'github', network: 'github', title: 'GitHub' },
+    {
+      key: 'dune',
+      icon: (
+        <JoinLeftRounded
+          className={cls([cmn.pPrim, isMd], [cmn.pSec, !isMd])}
+          fontSize={isMd ? 'medium' : 'small'}
+        />
+      ),
+      title: 'Dune Analytics'
+    }
   ]
 
-  const visibleLinks = isMd ? socialLinks : socialLinks.slice(0, MAX_SOCIALS_SM)
+  const visibleLinks = isMd || all ? socialLinks : socialLinks.slice(0, MAX_SOCIALS_SM)
 
   return (
     <div className={cls(cmn.flex, cmn.flexcv, className)}>
diff --git a/src/components/ecosystem/TrendingApps.tsx b/src/components/ecosystem/TrendingApps.tsx
deleted file mode 100644
index 0536076a..00000000
--- a/src/components/ecosystem/TrendingApps.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import React, { useMemo } from 'react'
-import { type types } from '@/core'
-import AppCard from './AppCardV2'
-import { Box, Grid } from '@mui/material'
-import { cls, cmn, SkPaper } from '@skalenetwork/metaport'
-import Carousel from '../Carousel'
-import { isNewApp } from '../../core/ecosystem/utils'
-import { getAppMeta } from '../../core/ecosystem/apps'
-
-interface TrendingAppsProps {
-  skaleNetwork: types.SkaleNetwork
-  chainsMeta: types.ChainsMetadataMap
-  useCarousel?: boolean
-  newApps: types.AppWithChainAndName[]
-  trendingApps: types.AppWithChainAndName[]
-}
-
-const TrendingApps: React.FC<TrendingAppsProps> = ({
-  skaleNetwork,
-  chainsMeta,
-  useCarousel,
-  newApps,
-  trendingApps
-}) => {
-  const filteredApps = useMemo(
-    () => trendingApps.filter((app) => getAppMeta(chainsMeta, app.chain, app.appName)),
-    [trendingApps, chainsMeta]
-  )
-
-  const renderAppCard = (app: types.AppWithChainAndName) => {
-    const isNew = isNewApp({ chain: app.chain, app: app.appName }, newApps)
-    return (
-      <Box key={`${app.chain}-${app.appName}`} className={cls('fl-centered dappCard')}>
-        <AppCard
-          skaleNetwork={skaleNetwork}
-          schainName={app.chain}
-          appName={app.appName}
-          chainsMeta={chainsMeta}
-          isNew={isNew}
-          trending={1}
-        />
-      </Box>
-    )
-  }
-
-  if (filteredApps.length === 0) {
-    return (
-      <SkPaper gray className="titleSection">
-        <div className={cls(cmn.mtop20, cmn.mbott20)}>
-          <p className={cls(cmn.p, cmn.p3, cmn.pSec, cmn.pCent)}>
-            No trending apps match your current filters
-          </p>
-        </div>
-      </SkPaper>
-    )
-  }
-
-  if (useCarousel) {
-    return <Carousel>{filteredApps.map(renderAppCard)}</Carousel>
-  }
-
-  return (
-    <Grid container spacing={2}>
-      {filteredApps.map((app) => (
-        <Grid key={`${app.chain}-${app.appName}`} item xs={12} sm={6} md={4} lg={4}>
-          {renderAppCard(app)}
-        </Grid>
-      ))}
-    </Grid>
-  )
-}
-
-export default React.memo(TrendingApps)
diff --git a/src/components/ecosystem/UserRecommendations.tsx b/src/components/ecosystem/UserRecommendations.tsx
new file mode 100644
index 00000000..234f092a
--- /dev/null
+++ b/src/components/ecosystem/UserRecommendations.tsx
@@ -0,0 +1,67 @@
+/**
+ * @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 UserRecommendations.tsx
+ * @copyright SKALE Labs 2024-Present
+ */
+
+import React from 'react'
+import { cmn, cls } from '@skalenetwork/metaport'
+import AutoAwesomeRoundedIcon from '@mui/icons-material/AutoAwesomeRounded'
+
+import { type types } from '@/core'
+
+import RecommendedApps from '../ecosystem/RecommendedApps'
+import { useAuth } from '../../AuthContext'
+import { useApps } from '../../useApps'
+import Headline from '../Headline'
+
+const UserRecommendations: React.FC<{
+  skaleNetwork: types.SkaleNetwork
+  chainsMeta: types.ChainsMetadataMap
+  metrics: types.IMetrics | null
+}> = ({ skaleNetwork, chainsMeta, metrics }) => {
+  const { isSignedIn } = useAuth()
+  const { allApps, favoriteApps, newApps, trendingApps } = useApps(chainsMeta, metrics)
+
+  const showRecommendations = isSignedIn && favoriteApps.length > 0
+  if (!showRecommendations) return null
+
+  return (
+    <div className={cls(cmn.mbott10, cmn.mtop20, cmn.ptop20)}>
+      <Headline
+        className={cls(cmn.mbott10)}
+        text="Recommended for you"
+        icon={<AutoAwesomeRoundedIcon color="primary" />}
+      />
+      <RecommendedApps
+        skaleNetwork={skaleNetwork}
+        chainsMeta={chainsMeta}
+        allApps={allApps}
+        favoriteApps={favoriteApps}
+        newApps={newApps}
+        trendingApps={trendingApps}
+        useCarousel={true}
+        gray
+      />
+    </div>
+  )
+}
+
+export default UserRecommendations
diff --git a/src/components/ecosystem/AllApps.tsx b/src/components/ecosystem/tabs/AllApps.tsx
similarity index 76%
rename from src/components/ecosystem/AllApps.tsx
rename to src/components/ecosystem/tabs/AllApps.tsx
index 68dcf11b..eb42cb1d 100644
--- a/src/components/ecosystem/AllApps.tsx
+++ b/src/components/ecosystem/tabs/AllApps.tsx
@@ -24,11 +24,11 @@ import React, { useMemo } from 'react'
 import { cls, cmn, SkPaper } from '@skalenetwork/metaport'
 import { type types } from '@/core'
 
-import { useLikedApps } from '../../LikedAppsContext'
-import AppCardV2 from './AppCardV2'
+import { useLikedApps } from '../../../LikedAppsContext'
+import AppCardV2 from '../AppCardV2'
 import { Grid } from '@mui/material'
-import { isNewApp } from '../../core/ecosystem/utils'
-import Loader from '../Loader'
+import { isNewApp, isTrending } from '../../../core/ecosystem/utils'
+import Loader from '../../Loader'
 
 interface AllAppsProps {
   skaleNetwork: types.SkaleNetwork
@@ -36,12 +36,20 @@ interface AllAppsProps {
   apps: types.AppWithChainAndName[]
   newApps: types.AppWithChainAndName[]
   loaded: boolean
+  trendingApps: types.AppWithChainAndName[]
 }
 
-const AllApps: React.FC<AllAppsProps> = ({ skaleNetwork, chainsMeta, apps, newApps, loaded }) => {
-  const { getTrendingApps, getAppId, getTrendingRank } = useLikedApps()
+const AllApps: React.FC<AllAppsProps> = ({
+  skaleNetwork,
+  chainsMeta,
+  apps,
+  newApps,
+  loaded,
+  trendingApps
+}) => {
+  const { getMostLikedApps, getAppId, getMostLikedRank } = useLikedApps()
 
-  const trendingAppIds = useMemo(() => getTrendingApps(), [getTrendingApps])
+  const mostLikedAppIds = useMemo(() => getMostLikedApps(), [getMostLikedApps])
 
   if (!loaded) return <Loader text="Loading apps" />
   if (apps.length === 0)
@@ -67,7 +75,8 @@ const AllApps: React.FC<AllAppsProps> = ({ skaleNetwork, chainsMeta, apps, newAp
               schainName={app.chain}
               appName={app.appName}
               chainsMeta={chainsMeta}
-              trending={getTrendingRank(trendingAppIds, appId)}
+              mostLiked={getMostLikedRank(mostLikedAppIds, appId)}
+              trending={isTrending(trendingApps, app.chain, app.appName)}
               isNew={isNew}
             />
           </Grid>
diff --git a/src/components/ecosystem/FavoriteApps.tsx b/src/components/ecosystem/tabs/FavoriteApps.tsx
similarity index 83%
rename from src/components/ecosystem/FavoriteApps.tsx
rename to src/components/ecosystem/tabs/FavoriteApps.tsx
index 54e9001d..165b9cec 100644
--- a/src/components/ecosystem/FavoriteApps.tsx
+++ b/src/components/ecosystem/tabs/FavoriteApps.tsx
@@ -20,17 +20,18 @@
  * @file FavoriteApps.tsx
  * @copyright SKALE Labs 2024-Present
  */
+
 import { useMemo } from 'react'
 import { types } from '@/core'
-import { useLikedApps } from '../../LikedAppsContext'
-import AppCard from './AppCardV2'
+import { useLikedApps } from '../../../LikedAppsContext'
+import AppCard from '../AppCardV2'
 import { Button, Grid } from '@mui/material'
 import GridViewRoundedIcon from '@mui/icons-material/GridViewRounded'
 import { cls, cmn, SkPaper } from '@skalenetwork/metaport'
-import Carousel from '../Carousel'
-import ConnectWallet from '../ConnectWallet'
+import Carousel from '../../Carousel'
+import ConnectWallet from '../../ConnectWallet'
 import { Link } from 'react-router-dom'
-import { isNewApp } from '../../core/ecosystem/utils'
+import { isNewApp, isTrending } from '../../../core/ecosystem/utils'
 
 export default function FavoriteApps(props: {
   skaleNetwork: types.SkaleNetwork
@@ -38,17 +39,18 @@ export default function FavoriteApps(props: {
   useCarousel?: boolean
   newApps: types.AppWithChainAndName[]
   filteredApps: types.AppWithChainAndName[]
+  trendingApps: types.AppWithChainAndName[]
   isSignedIn: boolean
   error: string | null
 }) {
-  const { getTrendingApps, getAppId, getTrendingRank } = useLikedApps()
-  const trendingAppIds = useMemo(() => getTrendingApps(), [getTrendingApps])
+  const { getMostLikedApps, getAppId, getMostLikedRank } = useLikedApps()
+  const mostLikedAppIds = useMemo(() => getMostLikedApps(), [getMostLikedApps])
 
   if (!props.isSignedIn) return <ConnectWallet customText="Sign in to see your favorite dApps" />
   if (props.error) return <div>Error: {props.error}</div>
 
   const appCards = props.filteredApps.map((app) => {
-    const trendingRank = getTrendingRank(trendingAppIds, getAppId(app.chain, app.appName))
+    const mostLikedRank = getMostLikedRank(mostLikedAppIds, getAppId(app.chain, app.appName))
     const isNew = isNewApp({ chain: app.chain, app: app.appName }, props.newApps)
     return (
       <Grid
@@ -67,7 +69,8 @@ export default function FavoriteApps(props: {
           skaleNetwork={props.skaleNetwork}
           chainsMeta={props.chainsMeta}
           isNew={isNew}
-          trending={trendingRank}
+          mostLiked={mostLikedRank}
+          trending={isTrending(props.trendingApps, app.chain, app.appName)}
         />
       </Grid>
     )
diff --git a/src/components/ecosystem/tabs/MostLiked.tsx b/src/components/ecosystem/tabs/MostLiked.tsx
new file mode 100644
index 00000000..07b8dc32
--- /dev/null
+++ b/src/components/ecosystem/tabs/MostLiked.tsx
@@ -0,0 +1,99 @@
+/**
+ * @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 MostLikedApps.tsx
+ * @copyright SKALE Labs 2024-Present
+ */
+
+import React, { useMemo } from 'react'
+import { type types } from '@/core'
+import AppCard from '../AppCardV2'
+import { Box, Grid } from '@mui/material'
+import { cls, cmn, SkPaper } from '@skalenetwork/metaport'
+import Carousel from '../../Carousel'
+import { isNewApp, isTrending } from '../../../core/ecosystem/utils'
+import { getAppMeta } from '../../../core/ecosystem/apps'
+
+interface MostLikedAppsProps {
+  skaleNetwork: types.SkaleNetwork
+  chainsMeta: types.ChainsMetadataMap
+  useCarousel?: boolean
+  newApps: types.AppWithChainAndName[]
+  filteredApps: types.AppWithChainAndName[]
+  trendingApps: types.AppWithChainAndName[]
+}
+
+const MostLikedApps: React.FC<MostLikedAppsProps> = ({
+  skaleNetwork,
+  chainsMeta,
+  useCarousel,
+  newApps,
+  filteredApps,
+  trendingApps
+}) => {
+  const apps = useMemo(
+    () => filteredApps.filter((app) => getAppMeta(chainsMeta, app.chain, app.appName)),
+    [filteredApps, chainsMeta]
+  )
+
+  const renderAppCard = (app: types.AppWithChainAndName) => {
+    const isNew = isNewApp({ chain: app.chain, app: app.appName }, newApps)
+    return (
+      <Box key={`${app.chain}-${app.appName}`} className={cls('fl-centered dappCard')}>
+        <AppCard
+          skaleNetwork={skaleNetwork}
+          schainName={app.chain}
+          appName={app.appName}
+          chainsMeta={chainsMeta}
+          isNew={isNew}
+          mostLiked={1}
+          trending={isTrending(trendingApps, app.chain, app.appName)}
+        />
+      </Box>
+    )
+  }
+
+  if (apps.length === 0) {
+    return (
+      <SkPaper gray className="titleSection">
+        <div className={cls(cmn.mtop20, cmn.mbott20)}>
+          <p className={cls(cmn.p, cmn.p3, cmn.pSec, cmn.pCent)}>
+            No trending apps match your current filters
+          </p>
+        </div>
+      </SkPaper>
+    )
+  }
+
+  if (useCarousel) {
+    return <Carousel>{apps.map(renderAppCard)}</Carousel>
+  }
+
+  return (
+    <Grid container spacing={2}>
+      {apps.map((app) => (
+        <Grid key={`${app.chain}-${app.appName}`} item xs={12} sm={6} md={4} lg={4}>
+          {renderAppCard(app)}
+        </Grid>
+      ))}
+    </Grid>
+  )
+}
+
+export default React.memo(MostLikedApps)
diff --git a/src/components/ecosystem/NewApps.tsx b/src/components/ecosystem/tabs/NewApps.tsx
similarity index 81%
rename from src/components/ecosystem/NewApps.tsx
rename to src/components/ecosystem/tabs/NewApps.tsx
index d04e14cc..b4a3d2a1 100644
--- a/src/components/ecosystem/NewApps.tsx
+++ b/src/components/ecosystem/tabs/NewApps.tsx
@@ -23,15 +23,17 @@
 import React, { useMemo } from 'react'
 import { Grid, Box } from '@mui/material'
 import { cls, cmn, SkPaper } from '@skalenetwork/metaport'
-import AppCard from './AppCardV2'
-import Carousel from '../Carousel'
+import AppCard from '../AppCardV2'
+import Carousel from '../../Carousel'
 import { type types } from '@/core'
-import { useLikedApps } from '../../LikedAppsContext'
+import { useLikedApps } from '../../../LikedAppsContext'
+import { isTrending } from '../../../core/ecosystem/utils'
 
 interface NewAppsProps {
   newApps: types.AppWithChainAndName[]
   skaleNetwork: types.SkaleNetwork
   chainsMeta: types.ChainsMetadataMap
+  trendingApps: types.AppWithChainAndName[]
   useCarousel?: boolean
 }
 
@@ -39,10 +41,11 @@ const NewApps: React.FC<NewAppsProps> = ({
   newApps,
   skaleNetwork,
   chainsMeta,
+  trendingApps,
   useCarousel = false
 }) => {
-  const { getTrendingApps, getAppId, getTrendingRank } = useLikedApps()
-  const trendingAppIds = useMemo(() => getTrendingApps(), [getTrendingApps])
+  const { getMostLikedApps, getAppId, getMostLikedRank } = useLikedApps()
+  const trendingAppIds = useMemo(() => getMostLikedApps(), [getMostLikedApps])
 
   const renderAppCard = (app: types.AppWithChainAndName) => {
     const appId = getAppId(app.chain, app.appName)
@@ -53,7 +56,8 @@ const NewApps: React.FC<NewAppsProps> = ({
         schainName={app.chain}
         appName={app.appName}
         chainsMeta={chainsMeta}
-        trending={getTrendingRank(trendingAppIds, appId)}
+        mostLiked={getMostLikedRank(trendingAppIds, appId)}
+        trending={isTrending(trendingApps, app.chain, app.appName)}
         isNew={true}
       />
     )
diff --git a/src/components/ecosystem/tabs/TrendingApps.tsx b/src/components/ecosystem/tabs/TrendingApps.tsx
new file mode 100644
index 00000000..9a70de1c
--- /dev/null
+++ b/src/components/ecosystem/tabs/TrendingApps.tsx
@@ -0,0 +1,102 @@
+/**
+ * @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 TrendingApps.tsx
+ * @copyright SKALE Labs 2024-Present
+ */
+
+import React, { useMemo } from 'react'
+import { type types } from '@/core'
+import AppCard from '../AppCardV2'
+import { Box, Grid } from '@mui/material'
+import { cls, cmn, SkPaper } from '@skalenetwork/metaport'
+import Carousel from '../../Carousel'
+import { isNewApp } from '../../../core/ecosystem/utils'
+import { getAppMeta } from '../../../core/ecosystem/apps'
+import { useLikedApps } from '../../../LikedAppsContext'
+
+interface TrendingAppsProps {
+  skaleNetwork: types.SkaleNetwork
+  chainsMeta: types.ChainsMetadataMap
+  useCarousel?: boolean
+  newApps: types.AppWithChainAndName[]
+  filteredApps: types.AppWithChainAndName[]
+}
+
+const TrendingApps: React.FC<TrendingAppsProps> = ({
+  skaleNetwork,
+  chainsMeta,
+  useCarousel,
+  newApps,
+  filteredApps
+}) => {
+  const apps = useMemo(
+    () => filteredApps.filter((app) => getAppMeta(chainsMeta, app.chain, app.appName)),
+    [filteredApps, chainsMeta]
+  )
+  const { getMostLikedApps, getMostLikedRank, getAppId } = useLikedApps()
+
+  const mostLikedAppIds = useMemo(() => getMostLikedApps(), [getMostLikedApps])
+
+  const renderAppCard = (app: types.AppWithChainAndName) => {
+    const isNew = isNewApp({ chain: app.chain, app: app.appName }, newApps)
+    const appId = getAppId(app.chain, app.appName)
+    return (
+      <Box key={`${app.chain}-${app.appName}`} className={cls('fl-centered dappCard')}>
+        <AppCard
+          skaleNetwork={skaleNetwork}
+          schainName={app.chain}
+          appName={app.appName}
+          chainsMeta={chainsMeta}
+          isNew={isNew}
+          trending={true}
+          mostLiked={getMostLikedRank(mostLikedAppIds, appId)}
+        />
+      </Box>
+    )
+  }
+
+  if (apps.length === 0) {
+    return (
+      <SkPaper gray className="titleSection">
+        <div className={cls(cmn.mtop20, cmn.mbott20)}>
+          <p className={cls(cmn.p, cmn.p3, cmn.pSec, cmn.pCent)}>
+            No trending apps match your current filters
+          </p>
+        </div>
+      </SkPaper>
+    )
+  }
+
+  if (useCarousel) {
+    return <Carousel>{apps.map(renderAppCard)}</Carousel>
+  }
+
+  return (
+    <Grid container spacing={2}>
+      {filteredApps.map((app) => (
+        <Grid key={`${app.chain}-${app.appName}`} item xs={12} sm={6} md={4} lg={4}>
+          {renderAppCard(app)}
+        </Grid>
+      ))}
+    </Grid>
+  )
+}
+
+export default React.memo(TrendingApps)
diff --git a/src/components/profile/EmailSection.tsx b/src/components/profile/EmailSection.tsx
new file mode 100644
index 00000000..2a931646
--- /dev/null
+++ b/src/components/profile/EmailSection.tsx
@@ -0,0 +1,118 @@
+/**
+ * @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 EmailSection.tsx
+ * @copyright SKALE Labs 2024-Present
+ */
+
+import React, { useRef, useEffect } from 'react'
+import { cls, cmn, styles } from '@skalenetwork/metaport'
+import { TextField, Button } from '@mui/material'
+import EmailRoundedIcon from '@mui/icons-material/EmailRounded'
+import Tile from '../Tile'
+
+interface EmailSectionProps {
+  email: string | null
+  isEditing: boolean
+  isEmailLoading: boolean
+  isEmailUpdating: boolean
+  newEmail: string
+  setNewEmail: (email: string) => void
+  handleStartEditing: () => void
+  handleUpdateEmail: () => void
+  handleCancelEditing: () => void
+  className?: string
+}
+
+const EmailSection: React.FC<EmailSectionProps> = ({
+  email,
+  isEditing,
+  isEmailLoading,
+  isEmailUpdating,
+  newEmail,
+  setNewEmail,
+  handleStartEditing,
+  handleUpdateEmail,
+  handleCancelEditing,
+  className
+}) => {
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  useEffect(() => {
+    if (isEditing && inputRef.current) {
+      inputRef.current.focus()
+    }
+  }, [isEditing])
+
+  return (
+    <Tile
+      text="Email Address"
+      className={cls(styles.inputAmount, className)}
+      icon={<EmailRoundedIcon />}
+      value={!isEditing ? email ?? 'Not set' : undefined}
+      children={
+        isEditing && (
+          <TextField
+            className="amountInput addressInput"
+            fullWidth
+            inputRef={inputRef}
+            variant="standard"
+            placeholder="example@test.com"
+            value={newEmail}
+            onChange={(e) => setNewEmail(e.target.value)}
+          />
+        )
+      }
+      childrenRi={
+        isEditing ? (
+          <div className={cls(cmn.flex, cmn.flexcv)}>
+            <Button
+              variant="contained"
+              className={cls('btnSm')}
+              onClick={handleUpdateEmail}
+              disabled={isEmailUpdating}
+            >
+              Save
+            </Button>
+            <Button
+              variant="text"
+              className={cls('btnSm', 'filled', cmn.mleft5)}
+              onClick={handleCancelEditing}
+            >
+              Cancel
+            </Button>
+          </div>
+        ) : (
+          email && (
+            <Button
+              variant="text"
+              className={cls('btnSm', 'filled')}
+              onClick={handleStartEditing}
+              disabled={isEmailLoading || isEmailUpdating}
+            >
+              Change
+            </Button>
+          )
+        )
+      }
+    />
+  )
+}
+
+export default EmailSection
diff --git a/src/components/profile/ProfileModal.tsx b/src/components/profile/ProfileModal.tsx
new file mode 100644
index 00000000..c8e0d273
--- /dev/null
+++ b/src/components/profile/ProfileModal.tsx
@@ -0,0 +1,88 @@
+/**
+ * @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 ProfileModal.tsx
+ * @copyright SKALE Labs 2024-Present
+ */
+
+import React from 'react'
+import { Modal, Box, useTheme, useMediaQuery } from '@mui/material'
+import { cls, cmn, SkPaper, useWagmiAccount } from '@skalenetwork/metaport'
+import { useAuth } from '../../AuthContext'
+import Tile from '../Tile'
+import ConnectWallet from '../ConnectWallet'
+import ProfileModalHeader from './ProfileModalHeader'
+import ProfileModalActions from './ProfileModalActions'
+import Jazzicon, { jsNumberForAddress } from 'react-jazzicon'
+
+const ProfileModal: React.FC = () => {
+  const { address } = useWagmiAccount()
+  const { isSignedIn, handleSignIn, handleSignOut, isProfileModalOpen, closeProfileModal } =
+    useAuth()
+
+  const theme = useTheme()
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'))
+
+  const modalContent = (
+    <Box className="profileModal">
+      <SkPaper gray>
+        <ProfileModalHeader address={address} isSignedIn={isSignedIn} />
+        {!address ? (
+          <ConnectWallet customText="Connect your wallet to use your profile" />
+        ) : (
+          <div></div>
+        )}
+        {address ? (
+          <div>
+            <Tile
+              text="Wallet Address"
+              value={address}
+              icon={<Jazzicon diameter={20} seed={jsNumberForAddress(address)} />}
+              copy={address}
+              className={cls(cmn.mbott10)}
+            />
+            <ProfileModalActions
+              className={cls(cmn.mtop20)}
+              address={address}
+              isSignedIn={isSignedIn}
+              isMobile={isMobile}
+              handleSignIn={handleSignIn}
+              handleSignOut={handleSignOut}
+            />
+          </div>
+        ) : (
+          <div></div>
+        )}
+      </SkPaper>
+    </Box>
+  )
+
+  return (
+    <Modal
+      open={isProfileModalOpen}
+      onClose={closeProfileModal}
+      aria-labelledby="profile-modal-title"
+      aria-describedby="profile-modal-description"
+    >
+      {modalContent}
+    </Modal>
+  )
+}
+
+export default ProfileModal
diff --git a/src/components/profile/ProfileModalActions.tsx b/src/components/profile/ProfileModalActions.tsx
new file mode 100644
index 00000000..2451ddf0
--- /dev/null
+++ b/src/components/profile/ProfileModalActions.tsx
@@ -0,0 +1,86 @@
+/**
+ * @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 ProfileModalActions.tsx
+ * @copyright SKALE Labs 2024-Present
+ */
+
+import React from 'react'
+import { Button } from '@mui/material'
+import { cls, RainbowConnectButton } from '@skalenetwork/metaport'
+import SkStack from '../SkStack'
+import LaunchIcon from '@mui/icons-material/Launch'
+import LooksRoundedIcon from '@mui/icons-material/LooksRounded'
+import LoginIcon from '@mui/icons-material/Login'
+import LogoutIcon from '@mui/icons-material/Logout'
+
+interface ProfileModalActionsProps {
+  address: string
+  isSignedIn: boolean
+  isMobile: boolean
+  handleSignIn: () => void
+  handleSignOut: () => void
+  className?: string
+}
+
+const ProfileModalActions: React.FC<ProfileModalActionsProps> = ({
+  address,
+  isSignedIn,
+  isMobile,
+  handleSignIn,
+  handleSignOut,
+  className
+}) => (
+  <SkStack className={cls(className, 'profileModalActions')}>
+    <Button
+      variant="text"
+      startIcon={<LaunchIcon />}
+      className={cls('btn', 'btnSm', 'filled')}
+      onClick={() => window.open(`https://etherscan.io/address/${address}`, '_blank')}
+      fullWidth={isMobile}
+    >
+      View on Etherscan
+    </Button>
+
+    <RainbowConnectButton.Custom>
+      {({ openAccountModal }) => (
+        <Button
+          variant="text"
+          startIcon={<LooksRoundedIcon />}
+          className={cls('btn', 'btnSm', 'filled')}
+          onClick={openAccountModal}
+          fullWidth={isMobile}
+        >
+          Manage Wallet
+        </Button>
+      )}
+    </RainbowConnectButton.Custom>
+    <Button
+      variant="text"
+      startIcon={isSignedIn ? <LogoutIcon /> : <LoginIcon />}
+      className={cls('btn', 'btnSm', 'filled')}
+      onClick={isSignedIn ? handleSignOut : handleSignIn}
+      fullWidth={isMobile}
+    >
+      {isSignedIn ? 'Sign out' : 'Sign in'}
+    </Button>
+  </SkStack>
+)
+
+export default ProfileModalActions
diff --git a/src/components/profile/ProfileModalHeader.tsx b/src/components/profile/ProfileModalHeader.tsx
new file mode 100644
index 00000000..7a67d80c
--- /dev/null
+++ b/src/components/profile/ProfileModalHeader.tsx
@@ -0,0 +1,53 @@
+/**
+ * @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 ProfileModalHeader.tsx
+ * @copyright SKALE Labs 2024-Present
+ */
+
+import React from 'react'
+import { FiberManualRecord } from '@mui/icons-material'
+import { cls, cmn } from '@skalenetwork/metaport'
+import Headline from '../Headline'
+import AccountCircleRoundedIcon from '@mui/icons-material/AccountCircleRounded'
+
+interface ProfileModalHeaderProps {
+  address: string | undefined
+  isSignedIn: boolean
+}
+
+const ProfileModalHeader: React.FC<ProfileModalHeaderProps> = ({ address, isSignedIn }) => (
+  <div className={cls('profileModalHeader', cmn.flexcv)}>
+    <div className={cls(cmn.flexg)}>
+      <Headline text="Profile" icon={<AccountCircleRoundedIcon />} size="small" />
+    </div>
+    <div className="profileModalStatus">
+      <FiberManualRecord
+        className={cls(cmn.mri5)}
+        fontSize="small"
+        color={address ? (isSignedIn ? 'success' : 'warning') : 'error'}
+      />
+      <p className={cls(cmn.p, cmn.p4, 'pSec', cmn.mri20)}>
+        {address ? (isSignedIn ? 'Signed in' : 'Connected but not signed in') : 'Not connected'}
+      </p>
+    </div>
+  </div>
+)
+
+export default ProfileModalHeader
diff --git a/src/components/profile/SwellMessage.tsx b/src/components/profile/SwellMessage.tsx
new file mode 100644
index 00000000..80fce921
--- /dev/null
+++ b/src/components/profile/SwellMessage.tsx
@@ -0,0 +1,68 @@
+/**
+ * @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 SwellMessage.tsx
+ * @copyright SKALE Labs 2024-Present
+ */
+
+import React from 'react'
+import { Button, Link } from '@mui/material'
+import { cls, cmn } from '@skalenetwork/metaport'
+import Message from '../Message'
+import SwellIcon from '../ecosystem/SwellIcon'
+import { SKALE_SOCIAL_LINKS } from '../../core/constants'
+
+interface SwellMessageProps {
+  email: string | null
+  isEditing: boolean
+  handleStartEditing: () => void
+}
+
+const SwellMessage: React.FC<SwellMessageProps> = ({ email, isEditing, handleStartEditing }) => (
+  <Message
+    gray={false}
+    icon={<SwellIcon color="primary" />}
+    text={
+      email
+        ? 'Claim your quest rewards on SKALE Swell'
+        : 'Add your email to complete profile and claim rewards'
+    }
+    closable={false}
+    button={
+      email ? (
+        <Link
+          target="_blank"
+          rel="noopener noreferrer"
+          href={SKALE_SOCIAL_LINKS.swell}
+          className={cls(cmn.mleft5)}
+        >
+          <Button className={cls('btn btnSm')} variant="contained">
+            Claim Rewards
+          </Button>
+        </Link>
+      ) : !isEditing ? (
+        <Button className={cls('btn btnSm')} variant="contained" onClick={handleStartEditing}>
+          Add Email
+        </Button>
+      ) : null
+    }
+  />
+)
+
+export default SwellMessage
diff --git a/src/core/constants.ts b/src/core/constants.ts
index c5ce2fe6..0bb79144 100644
--- a/src/core/constants.ts
+++ b/src/core/constants.ts
@@ -84,6 +84,7 @@ export const BASE_METADATA_URL =
   'https://raw.githubusercontent.com/skalenetwork/skale-network/master/metadata/'
 
 export const MAX_APPS_DEFAULT = 12
+export const APP_SUBCATEGORY_MATCH_WEIGHT = 2
 
 export const OFFCHAIN_APP = '__offchain'
 
@@ -99,7 +100,13 @@ export const SKALE_SOCIAL_LINKS = {
   discord: 'https://discord.com/invite/gM5XBy6',
   github: 'https://github.com/skalenetwork',
   swell: 'https://swell.skale.space/',
-  website: 'https://skale.space/'
+  website: 'https://skale.space/',
+  dune: DUNE_SKALE_URL
 }
 
 export const DEFAULT_SWELL_URL = 'https://swell.skale.space/'
+export const GET_STARTED_URL = 'https://skale.space/get-started-on-skale'
+
+export const DEFAULT_MIN_SFUEL_WEI = 100000000000000
+export const SFUEL_CHECK_INTERVAL = 10000
+export const DOCS_PORTAL_URL = 'https://docs.skale.space/'
diff --git a/src/core/ecosystem/apps.ts b/src/core/ecosystem/apps.ts
index 6be51a4a..7ac94ec8 100644
--- a/src/core/ecosystem/apps.ts
+++ b/src/core/ecosystem/apps.ts
@@ -23,6 +23,9 @@
 import { type types } from '@/core'
 import { getChainAlias } from '../metadata'
 
+const SWELL_CHAIN = '__offchain'
+const SWELL_APP = 'swell'
+
 export function getAllApps(chainsMetadata: types.ChainsMetadataMap): types.AppWithChainAndName[] {
   const allApps: types.AppWithChainAndName[] = []
 
@@ -45,17 +48,30 @@ export function sortAppsByAlias(apps: types.AppWithChainAndName[]): types.AppWit
   return apps.sort((a, b) => a.alias.localeCompare(b.alias))
 }
 
+export function sortAndFilterApps(apps: types.AppWithChainAndName[]): types.AppWithChainAndName[] {
+  const swellAppIndex = apps.findIndex(
+    (app) => app.chain === SWELL_CHAIN && app.appName === SWELL_APP
+  )
+  let swellApp: types.AppWithChainAndName | null = null
+  if (swellAppIndex !== -1) {
+    swellApp = apps.splice(swellAppIndex, 1)[0]
+  }
+  const sortedApps = apps.sort((a, b) => a.alias.localeCompare(b.alias))
+  if (swellApp) {
+    sortedApps.unshift(swellApp)
+  }
+  return sortedApps
+}
+
 export function filterAppsByCategory(
   apps: types.AppWithChainAndName[],
   checkedItems: string[]
 ): types.AppWithChainAndName[] {
-  if (checkedItems.length === 0) return apps
-  return apps.filter((app) => {
+  if (checkedItems.length === 0) return sortAndFilterApps(apps)
+  const filteredApps = apps.filter((app) => {
     if (!app.categories || Object.keys(app.categories).length === 0) return false
     return Object.entries(app.categories).some(([category, subcategories]) => {
-      // Check if the main category is in checkedItems
       if (checkedItems.includes(category)) return true
-      // If the main category isn't selected, check subcategories
       if (Array.isArray(subcategories)) {
         return subcategories.some((subcategory) => {
           const subcategoryKey = `${category}_${subcategory}`
@@ -65,6 +81,7 @@ export function filterAppsByCategory(
       return false
     })
   })
+  return sortAndFilterApps(filteredApps)
 }
 
 export function filterAppsBySearchTerm(
@@ -72,14 +89,15 @@ export function filterAppsBySearchTerm(
   searchTerm: string,
   chainsMeta: types.ChainsMetadataMap
 ): types.AppWithChainAndName[] {
-  if (!searchTerm || searchTerm === '') return apps
+  if (!searchTerm || searchTerm === '') return sortAndFilterApps(apps)
   const st = searchTerm.toLowerCase()
-  return apps.filter(
+  const filteredApps = apps.filter(
     (app) =>
       app.alias.toLowerCase().includes(st) ||
       app.chain.toLowerCase().includes(st) ||
       getChainAlias(chainsMeta, app.chain).toLowerCase().includes(st)
   )
+  return sortAndFilterApps(filteredApps)
 }
 
 export function getAppMeta(
@@ -89,3 +107,17 @@ export function getAppMeta(
 ): types.AppMetadata | undefined {
   return chainsMeta[chain]?.apps?.[app]
 }
+
+export function getAppMetaWithChainApp(
+  chainsMeta: types.ChainsMetadataMap,
+  chain: string,
+  app: string
+): types.AppWithChainAndName | undefined {
+  const meta = chainsMeta[chain]?.apps?.[app]
+  if (!meta) return undefined
+  return {
+    ...meta,
+    chain,
+    appName: app
+  }
+}
diff --git a/src/core/ecosystem/categories.ts b/src/core/ecosystem/categories.ts
index ee5940e4..6b5412ff 100644
--- a/src/core/ecosystem/categories.ts
+++ b/src/core/ecosystem/categories.ts
@@ -88,7 +88,10 @@ export const categories: Categories = {
   wallet: { name: 'Wallet', subcategories: {} },
   metaverse: { name: 'Metaverse', subcategories: {} },
   web3: { name: 'Web3', subcategories: {} },
-  pretge: { name: 'Pre-TGE', subcategories: {} }
+  pretge: { name: 'Pre-TGE', subcategories: {} },
+  utility: { name: 'Utility', subcategories: {} },
+  analytics: { name: 'Analytics', subcategories: {} },
+  validator: { name: 'Validator', subcategories: {} }
 }
 
 export const sortCategories = (categories: Categories): Categories => {
diff --git a/src/core/ecosystem/similarApps.ts b/src/core/ecosystem/similarApps.ts
new file mode 100644
index 00000000..3b83d4d6
--- /dev/null
+++ b/src/core/ecosystem/similarApps.ts
@@ -0,0 +1,94 @@
+/**
+ * @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 similarApps.tsx
+ * @copyright SKALE Labs 2024-Present
+ */
+
+import { type types } from '@/core'
+import { APP_SUBCATEGORY_MATCH_WEIGHT, MAX_APPS_DEFAULT } from '../constants'
+
+interface CategoryMatch {
+  categoryMatches: number
+  subcategoryMatches: number
+  totalScore: number
+}
+
+interface SimilarApp extends types.AppWithChainAndName {
+  score: number
+}
+
+function calculateCategoryMatches(
+  sourceApp: types.AppWithChainAndName,
+  targetApp: types.AppWithChainAndName
+): CategoryMatch {
+  let categoryMatches = 0
+  let subcategoryMatches = 0
+
+  Object.entries(sourceApp.categories).forEach(([category, sourceSubcategories]) => {
+    if (category in targetApp.categories) {
+      categoryMatches++
+      const targetSubcategories = targetApp.categories[category]
+      if (Array.isArray(sourceSubcategories) && Array.isArray(targetSubcategories)) {
+        const matches = sourceSubcategories.filter((sub) =>
+          targetSubcategories.includes(sub)
+        ).length
+        subcategoryMatches += matches
+      }
+    }
+  })
+
+  const totalScore = categoryMatches + subcategoryMatches * APP_SUBCATEGORY_MATCH_WEIGHT
+  return { categoryMatches, subcategoryMatches, totalScore }
+}
+
+function isAppInList(app: types.AppWithChainAndName, list: types.AppWithChainAndName[]): boolean {
+  return list.some((item) => item.chain === app.chain && item.appName === app.appName)
+}
+
+function findSimilarApps(
+  currentApp: types.AppWithChainAndName | undefined,
+  allApps: types.AppWithChainAndName[],
+  favoriteApps: types.AppWithChainAndName[] = [],
+  limit: number = MAX_APPS_DEFAULT
+): SimilarApp[] {
+  const apps = allApps.filter((app) => {
+    if (currentApp && app.chain === currentApp.chain && app.appName === currentApp.appName) {
+      return false
+    }
+    return !isAppInList(app, favoriteApps)
+  })
+
+  const targetApps = currentApp ? [currentApp] : favoriteApps
+  if (!targetApps.length) return []
+
+  const appScores: SimilarApp[] = apps.map((app) => {
+    const scores = targetApps.map((targetApp) => calculateCategoryMatches(targetApp, app))
+
+    const maxScore = Math.max(...scores.map((s) => s.totalScore))
+    return { ...app, score: maxScore }
+  })
+
+  return appScores
+    .filter((app) => app.score > 0)
+    .sort((a, b) => b.score - a.score)
+    .slice(0, limit)
+}
+
+export { findSimilarApps, type SimilarApp }
diff --git a/src/core/ecosystem/utils.ts b/src/core/ecosystem/utils.ts
index c63f232a..f8975b3f 100644
--- a/src/core/ecosystem/utils.ts
+++ b/src/core/ecosystem/utils.ts
@@ -88,3 +88,11 @@ export const isNewApp = (
 ): boolean => {
   return newApps.some((newApp) => newApp.chain === app.chain && newApp.appName === app.app)
 }
+
+export const isTrending = (
+  apps: types.AppWithChainAndName[],
+  chainName: string,
+  appName: string
+): boolean => {
+  return apps.some((a) => a.appName === appName && a.chain === chainName)
+}
diff --git a/src/core/explorer.ts b/src/core/explorer.ts
index 3acb773c..57f2489a 100644
--- a/src/core/explorer.ts
+++ b/src/core/explorer.ts
@@ -41,7 +41,10 @@ export function getTotalAppCounters(
     gas_usage_count: '0',
     token_transfers_count: '0',
     transactions_count: '0',
-    validations_count: '0'
+    validations_count: '0',
+    transactions_today: 0,
+    transactions_last_7_days: 0,
+    transactions_last_30_days: 0
   }
   for (const address in countersArray) {
     if (countersArray.hasOwnProperty(address)) {
@@ -60,6 +63,9 @@ export function getTotalAppCounters(
       totalCounters.validations_count = (
         parseInt(totalCounters.validations_count) + parseInt(addressCounters.validations_count)
       ).toString()
+      totalCounters.transactions_today += addressCounters.transactions_today
+      totalCounters.transactions_last_7_days += addressCounters.transactions_last_7_days
+      totalCounters.transactions_last_30_days += addressCounters.transactions_last_30_days
     }
   }
   return totalCounters
diff --git a/src/core/meta.ts b/src/core/meta.ts
index 41cd6d22..c89d8b25 100644
--- a/src/core/meta.ts
+++ b/src/core/meta.ts
@@ -29,11 +29,13 @@ export const META_TAGS = {
   },
   stats: {
     title: 'SKALE Portal - Network Stats',
-    description: 'SKALE Network statistics - Transactions, active users, gas fees saved.'
+    description: 'SKALE Network statistics - Transactions, active users, gas fees saved.',
+    help: 'Check live SKALE Network statistics like active wallets, transactions, and total gas fees saved by users.'
   },
   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: 'Transfer your assets to the SKALE Network and move easily across SKALE Chains to access a variety of dApps.'
   },
   history: {
     title: 'SKALE Portal - Bridge History',
@@ -47,11 +49,13 @@ export const META_TAGS = {
   chains: {
     title: 'SKALE Portal - Chains',
     description:
-      'Explore SKALE Hubs, AppChains, connect to SKALE Chains, get block explorer links, endpoints, linked tokens and verified contracts info.'
+      'Explore SKALE Hubs, AppChains, connect to SKALE Chains, get block explorer links, endpoints, linked tokens and verified contracts info.',
+    help: 'SKALE Chains are custom blockchains within the SKALE Network designed to power specific dAps and use cases.'
   },
-  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.',
+    help: 'Discover and explore all the dApps available across the SKALE Network in one place.'
   },
   faq: {
     title: 'SKALE Portal - Bridge FAQ',
@@ -59,10 +63,17 @@ export const META_TAGS = {
   },
   staking: {
     title: 'SKALE Portal - Staking',
-    description: 'Delegate, review delegations and withdraw staking rewards'
+    description: 'Delegate, review delegations and withdraw staking rewards',
+    help: 'Delegate your SKL tokens to help secure the SKALE Network and earn rewards.'
+  },
+  validators: {
+    title: 'SKALE Portal - Validators',
+    description: 'List of validators on SKALE Network',
+    help: 'Explore validators that secure the SKALE Network and choose your preferred ones to stake SKL tokens with to earn rewards.'
   },
   onramp: {
     title: 'SKALE Portal - Onramp',
-    description: 'Purchase crypto directly on SKALE Europa Hub using the Transak onramp.'
+    description: 'Purchase crypto directly on SKALE Europa Hub using the Transak onramp.',
+    help: 'Use your preferred fiat currency to get USDC directly on the SKALE Europa Hub.'
   }
 }
diff --git a/src/core/metadata.ts b/src/core/metadata.ts
index 65a5c237..3b6cb54c 100644
--- a/src/core/metadata.ts
+++ b/src/core/metadata.ts
@@ -22,6 +22,7 @@
 
 import { type types } from '@/core'
 import { BASE_METADATA_URL, MAINNET_CHAIN_NAME } from './constants'
+import { AppMetadata } from '@/core/dist/types'
 
 export function chainBg(
   chainsMeta: types.ChainsMetadataMap,
@@ -69,3 +70,12 @@ export async function loadMeta(skaleNetwork: types.SkaleNetwork): Promise<types.
 export function getMetaLogoUrl(skaleNetwork: types.SkaleNetwork, logoName: string): string {
   return `${BASE_METADATA_URL}${skaleNetwork}/logos/${logoName}`
 }
+
+export function isPreTge(appMeta: AppMetadata): boolean {
+  if (appMeta.pretge) {
+    const now = Math.floor(Date.now() / 1000)
+    return now >= appMeta.pretge.from && now <= appMeta.pretge.to
+  }
+  if ('pretge' in appMeta.categories) return true
+  return false
+}
diff --git a/src/pages/App.tsx b/src/pages/App.tsx
index 1921f2d2..1e5a1ad1 100644
--- a/src/pages/App.tsx
+++ b/src/pages/App.tsx
@@ -48,29 +48,36 @@ import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined'
 import HubRoundedIcon from '@mui/icons-material/HubRounded'
 import FavoriteRoundedIcon from '@mui/icons-material/FavoriteRounded'
 import FavoriteBorderOutlinedIcon from '@mui/icons-material/FavoriteBorderOutlined'
+import HourglassBottomRoundedIcon from '@mui/icons-material/HourglassBottomRounded'
+import HourglassTopRoundedIcon from '@mui/icons-material/HourglassTopRounded'
+import HourglassFullRoundedIcon from '@mui/icons-material/HourglassFullRounded'
+import AutoAwesomeRoundedIcon from '@mui/icons-material/AutoAwesomeRounded'
 
-import ChainLogo from '../components/ChainLogo'
-import SkStack from '../components/SkStack'
-import Tile from '../components/Tile'
-import LinkSurface from '../components/LinkSurface'
-import Breadcrumbs from '../components/Breadcrumbs'
-import CollapsibleDescription from '../components/CollapsibleDescription'
-import HubTile from '../components/chains/HubTile'
-import AccordionSection from '../components/AccordionSection'
+import { useApps } from '../useApps'
 
 import { findChainName } from '../core/chain'
-
+import { getAppMetaWithChainApp } from '../core/ecosystem/apps'
 import { formatNumber } from '../core/timeHelper'
-import { chainBg, getChainAlias } from '../core/metadata'
+import { chainBg, getChainAlias, isPreTge } from '../core/metadata'
 import { addressUrl, getExplorerUrl, getTotalAppCounters } from '../core/explorer'
 import { MAINNET_CHAIN_LOGOS, MAX_APPS_DEFAULT, OFFCHAIN_APP } from '../core/constants'
+import { getRecentApps, isNewApp, isTrending } from '../core/ecosystem/utils'
+
 import SocialButtons from '../components/ecosystem/Socials'
 import CategoriesChips from '../components/ecosystem/CategoriesChips'
 import { useLikedApps } from '../LikedAppsContext'
 import { useAuth } from '../AuthContext'
 import ErrorTile from '../components/ErrorTile'
 import { ChipNew, ChipPreTge, ChipTrending } from '../components/Chip'
-import { getRecentApps, isNewApp } from '../core/ecosystem/utils'
+import AppScreenshots from '../components/ecosystem/AppScreenshots'
+import RecommendedApps from '../components/ecosystem/RecommendedApps'
+import ChainLogo from '../components/ChainLogo'
+import Tile from '../components/Tile'
+import LinkSurface from '../components/LinkSurface'
+import Breadcrumbs from '../components/Breadcrumbs'
+import CollapsibleDescription from '../components/CollapsibleDescription'
+import HubTile from '../components/chains/HubTile'
+import AccordionSection from '../components/AccordionSection'
 
 export default function App(props: {
   mpc: MetaportCore
@@ -80,15 +87,7 @@ export default function App(props: {
   chainsMeta: types.ChainsMetadataMap
 }) {
   let { chain, app } = useParams()
-  const {
-    likedApps,
-    appLikes,
-    toggleLikedApp,
-    getAppId,
-    getTrendingApps,
-    refreshLikedApps,
-    getTrendingRank
-  } = useLikedApps()
+  const { likedApps, appLikes, toggleLikedApp, getAppId, refreshLikedApps } = useLikedApps()
   const { isSignedIn, handleSignIn } = useAuth()
 
   const { address } = useWagmiAccount()
@@ -126,13 +125,14 @@ export default function App(props: {
 
   const appDescription = appMeta.description ?? 'No description'
 
+  const { trendingApps, allApps } = useApps(props.chainsMeta, props.metrics)
+
   const appId = getAppId(chain, app)
   const isLiked = likedApps.includes(appId)
   const likesCount = appLikes[appId] || 0
 
-  const trendingAppIds = useMemo(() => getTrendingApps(), [getTrendingApps])
-  const trendingIndex = getTrendingRank(trendingAppIds, appId)
   const isNew = isNewApp({ chain, app }, newApps)
+  const trending = isTrending(trendingApps, chain, app)
 
   const handleToggleLike = async () => {
     if (!address) {
@@ -242,9 +242,9 @@ export default function App(props: {
                 <div className={cls(cmn.flex, cmn.flexcv)}>
                   <h2 className={cls(cmn.nom, cmn.p1)}>{appAlias}</h2>
                   <div className={cls(cmn.flex, cmn.mleft10)}>
-                    {trendingIndex !== undefined && <ChipTrending trending={trendingIndex} />}
+                    {trending && <ChipTrending />}
                     {isNew && <ChipNew />}
-                    {appMeta.tags?.includes('pretge') && <ChipPreTge />}
+                    {isPreTge(appMeta) && <ChipPreTge />}
                   </div>
                 </div>
 
@@ -255,41 +255,84 @@ export default function App(props: {
           </div>
         </SkPaper>
         <SkPaper gray className={cls(cmn.mtop10)}>
-          <SkStack>
-            {appMeta.contracts ? (
-              <Tile
-                grow
-                text="Total transactions"
-                value={counters ? formatNumber(Number(counters.transactions_count)) : undefined}
-                icon={<DataSaverOffRoundedIcon />}
-              />
-            ) : null}
-            {appMeta.contracts ? (
+          <Grid container spacing={1} className={cls(cmn.full)}>
+            {appMeta.contracts && (
+              <Grid item lg={4} md={6} xs={12}>
+                <Tile
+                  grow
+                  text="Total transactions"
+                  value={counters ? formatNumber(Number(counters.transactions_count)) : undefined}
+                  icon={<DataSaverOffRoundedIcon />}
+                />
+              </Grid>
+            )}
+            {appMeta.contracts && (
+              <Grid item lg={4} md={6} xs={12}>
+                <Tile
+                  grow
+                  text="Gas saved"
+                  childrenRi={
+                    !props.isXs ? (
+                      <InfoOutlinedIcon
+                        className={cls(cmn.pSec, styles.chainIconxs, cmn.mleft10)}
+                      />
+                    ) : undefined
+                  }
+                  tooltip={
+                    props.metrics && counters
+                      ? `Given gas price ${props.metrics.gas} Gwei. ${counters.gas_usage_count} of gas used.`
+                      : undefined
+                  }
+                  value={props.metrics && counters ? `${formatGas()} ETH` : undefined}
+                  icon={<SavingsRoundedIcon />}
+                />
+              </Grid>
+            )}
+            <Grid item lg={appMeta.contracts ? 4 : 12} md={appMeta.contracts ? 6 : 12} xs={12}>
               <Tile
                 grow
-                text="Gas saved"
-                childrenRi={
-                  !props.isXs ? (
-                    <InfoOutlinedIcon className={cls(cmn.pSec, styles.chainIconxs, cmn.mleft10)} />
-                  ) : undefined
-                }
-                tooltip={
-                  props.metrics && counters
-                    ? `Given gas price ${props.metrics.gas} Gwei. ${counters.gas_usage_count} of gas used.`
-                    : undefined
-                }
-                value={props.metrics && counters ? `${formatGas()} ETH` : undefined}
-                icon={<SavingsRoundedIcon />}
+                text="Favorites"
+                value={likesCount.toString()}
+                icon={<FavoriteRoundedIcon />}
               />
-            ) : null}
-            <Tile
-              grow
-              text="Favorites"
-              value={likesCount.toString()}
-              icon={<FavoriteRoundedIcon />}
-            />
-          </SkStack>
+            </Grid>
+            {appMeta.contracts && (
+              <Grid item lg={4} md={6} xs={12}>
+                <Tile
+                  grow
+                  text="30d transactions"
+                  value={
+                    counters ? formatNumber(Number(counters.transactions_last_30_days)) : undefined
+                  }
+                  icon={<HourglassFullRoundedIcon />}
+                />
+              </Grid>
+            )}
+            {appMeta.contracts && (
+              <Grid item lg={4} md={6} xs={12}>
+                <Tile
+                  grow
+                  text="7d transactions"
+                  value={
+                    counters ? formatNumber(Number(counters.transactions_last_7_days)) : undefined
+                  }
+                  icon={<HourglassBottomRoundedIcon />}
+                />
+              </Grid>
+            )}
+            {appMeta.contracts && (
+              <Grid item lg={4} md={6} xs={12}>
+                <Tile
+                  grow
+                  text="Daily transactions"
+                  value={counters ? formatNumber(Number(counters.transactions_today)) : undefined}
+                  icon={<HourglassTopRoundedIcon />}
+                />
+              </Grid>
+            )}
+          </Grid>
         </SkPaper>
+        <AppScreenshots chainName={chain} appName={app} skaleNetwork={network} />
         {chain !== OFFCHAIN_APP && (
           <SkPaper gray className={cls(cmn.mtop10, 'fwmobile')}>
             <AccordionSection
@@ -333,6 +376,26 @@ export default function App(props: {
             )}
           </SkPaper>
         )}
+
+        <SkPaper gray className={cls(cmn.mtop10, 'fwmobile')}>
+          <AccordionSection
+            expandedByDefault
+            title="Discover more"
+            icon={<AutoAwesomeRoundedIcon />}
+            marg={false}
+          >
+            <RecommendedApps
+              className={cls(cmn.mtop10)}
+              skaleNetwork={props.mpc.config.skaleNetwork}
+              chainsMeta={props.chainsMeta}
+              allApps={allApps}
+              currentApp={getAppMetaWithChainApp(props.chainsMeta, chain, app)}
+              newApps={newApps}
+              trendingApps={trendingApps}
+              useCarousel={true}
+            />
+          </AccordionSection>
+        </SkPaper>
       </div>
     </Container>
   )
diff --git a/src/pages/Bridge.tsx b/src/pages/Bridge.tsx
index 53c21625..53c90f26 100644
--- a/src/pages/Bridge.tsx
+++ b/src/pages/Bridge.tsx
@@ -24,7 +24,8 @@
 import { Helmet } from 'react-helmet'
 
 import { useEffect, useState } from 'react'
-import { useSearchParams } from 'react-router-dom'
+import { Link, useSearchParams } from 'react-router-dom'
+import HistoryIcon from '@mui/icons-material/History'
 
 import {
   CHAINS_META,
@@ -34,7 +35,8 @@ import {
   useMetaportStore,
   SkPaper,
   type interfaces,
-  TransactionData
+  TransactionData,
+  styles
 } from '@skalenetwork/metaport'
 import { type types } from '@/core'
 
@@ -45,6 +47,8 @@ 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
@@ -163,10 +167,27 @@ export default function Bridge(props: { isXs: boolean; chainsMeta: types.ChainsM
         <meta property="og:description" content={META_TAGS.bridge.description} />
       </Helmet>
       <Stack spacing={0}>
-        <div className={cls(cmn.flex)}>
-          <h2 className={cls(cmn.nom)}>Transfer</h2>
+        <div className={cls(cmn.flex, cmn.flexcv)}>
+          <div className={cls(cmn.flexg)}>
+            <h2 className={cls(cmn.nom)}>Bridge</h2>
+            <p className={cls(cmn.nom, cmn.p, cmn.p3, cmn.pSec)}>
+              Zero Gas Fees between SKALE Chains
+            </p>
+          </div>
+          <div>
+            <Link to="/bridge/history">
+              <Button
+                variant="contained"
+                className={cls('btnMd', styles.paperGrey, cmn.pPrim, cmn.mri10)}
+                startIcon={<HistoryIcon />}
+              >
+                History
+              </Button>
+            </Link>
+            <SkPageInfoIcon meta_tag={META_TAGS.bridge} />
+          </div>
         </div>
-        <p className={cls(cmn.nom, cmn.p, cmn.p3, cmn.pSec)}>Zero Gas Fees between SKALE Chains</p>
+
         <div className={cls(cmn.mtop20)}>
           <BridgeBody />
           {transactionsHistory.length !== 0 ? (
diff --git a/src/pages/Chain.tsx b/src/pages/Chain.tsx
index f0ed90ad..1a8bf6de 100644
--- a/src/pages/Chain.tsx
+++ b/src/pages/Chain.tsx
@@ -34,7 +34,7 @@ import { type types } from '@/core'
 import { findChainName } from '../core/chain'
 
 export default function Chain(props: {
-  loadData: any
+  loadData: () => Promise<void>
   schains: types.ISChain[]
   stats: types.IStats | null
   metrics: types.IMetrics | null
diff --git a/src/pages/Chains.tsx b/src/pages/Chains.tsx
index 5d2ef631..0a32382a 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 d58194ba..ea04a622 100644
--- a/src/pages/Ecosystem.tsx
+++ b/src/pages/Ecosystem.tsx
@@ -41,20 +41,26 @@ import CategoryDisplay from '../components/ecosystem/Categories'
 import SearchComponent from '../components/ecosystem/AppSearch'
 import SelectedCategories from '../components/ecosystem/SelectedCategories'
 import SkStack from '../components/SkStack'
-import AllApps from '../components/ecosystem/AllApps'
-import NewApps from '../components/ecosystem/NewApps'
-import FavoriteApps from '../components/ecosystem/FavoriteApps'
-import TrendingApps from '../components/ecosystem/TrendingApps'
+import AllApps from '../components/ecosystem/tabs/AllApps'
+import NewApps from '../components/ecosystem/tabs/NewApps'
+import FavoriteApps from '../components/ecosystem/tabs/FavoriteApps'
+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
   chainsMeta: types.ChainsMetadataMap
+  metrics: types.IMetrics | null
   isXs: boolean
+  loadData: () => Promise<void>
 }) {
   const { getCheckedItemsFromUrl, setCheckedItemsInUrl, getTabIndexFromUrl, setTabIndexInUrl } =
     useUrlParams()
-  const { allApps, newApps, trendingApps, favoriteApps, isSignedIn } = useApps(props.chainsMeta)
+  const { allApps, newApps, trendingApps, favoriteApps, isSignedIn } = useApps(
+    props.chainsMeta,
+    props.metrics
+  )
 
   const [checkedItems, setCheckedItems] = useState<string[]>([])
   const [filteredApps, setFilteredApps] = useState<types.AppWithChainAndName[]>([])
@@ -63,6 +69,7 @@ export default function Ecosystem(props: {
   const [loaded, setLoaded] = useState<boolean>(false)
 
   useEffect(() => {
+    props.loadData()
     const initialCheckedItems = getCheckedItemsFromUrl()
     setCheckedItems(initialCheckedItems)
     const initialTabIndex = getTabIndexFromUrl()
@@ -102,6 +109,14 @@ export default function Ecosystem(props: {
       ], // New Apps
       [
         2,
+        trendingApps.filter((app) =>
+          filteredApps.some(
+            (filteredApp) => filteredApp.chain === app.chain && filteredApp.appName === app.appName
+          )
+        )
+      ], // Trending Apps
+      [
+        3,
         isSignedIn
           ? favoriteApps.filter((app) =>
               filteredApps.some(
@@ -110,42 +125,39 @@ export default function Ecosystem(props: {
               )
             )
           : []
-      ], // Favorite Apps
-      [
-        3,
-        trendingApps.filter((app) =>
-          filteredApps.some(
-            (filteredApp) => filteredApp.chain === app.chain && filteredApp.appName === app.appName
-          )
-        )
-      ] // Trending Apps
+      ] // Favorite Apps
     ])
 
     return (tabIndex: number) => filterMap.get(tabIndex) || filteredApps
-  }, [filteredApps, newApps, favoriteApps, trendingApps, isSignedIn])
+  }, [filteredApps, newApps, trendingApps, favoriteApps, isSignedIn])
 
   const currentFilteredApps = getFilteredAppsByTab(activeTab)
 
+  const isFiltersApplied = Object.keys(checkedItems).length !== 0
+
   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>
-            <SocialButtons social={SKALE_SOCIAL_LINKS} />
+          <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
@@ -169,12 +181,7 @@ export default function Ecosystem(props: {
             value={activeTab}
             onChange={handleTabChange}
             scrollButtons="auto"
-            className={cls(
-              cmn.mbott20,
-              [cmn.mtop20, Object.keys(checkedItems).length !== 0],
-              'skTabs',
-              'fwmobile'
-            )}
+            className={cls(cmn.mbott20, [cmn.mtop20, isFiltersApplied], 'skTabs', 'fwmobile')}
           >
             <Tab
               label="All"
@@ -189,14 +196,14 @@ export default function Ecosystem(props: {
               className={cls('btn', 'btnSm', cmn.mri5, cmn.mleft5, 'tab', 'fwmobile')}
             />
             <Tab
-              label="Favorites"
-              icon={<FavoriteRoundedIcon />}
+              label="Trending"
+              icon={<TrendingUpRoundedIcon />}
               iconPosition="start"
               className={cls('btn', 'btnSm', cmn.mri5, cmn.mleft5, 'tab', 'fwmobile')}
             />
             <Tab
-              label="Trending"
-              icon={<TrendingUpRoundedIcon />}
+              label="Favorites"
+              icon={<FavoriteRoundedIcon />}
               iconPosition="start"
               className={cls('btn', 'btnSm', cmn.mri5, cmn.mleft5, 'tab', 'fwmobile')}
             />
@@ -209,6 +216,7 @@ export default function Ecosystem(props: {
               chainsMeta={props.chainsMeta}
               newApps={newApps}
               loaded={loaded}
+              trendingApps={trendingApps}
             />
           )}
           {activeTab === 1 && (
@@ -216,24 +224,26 @@ export default function Ecosystem(props: {
               newApps={currentFilteredApps}
               skaleNetwork={props.mpc.config.skaleNetwork}
               chainsMeta={props.chainsMeta}
+              trendingApps={trendingApps}
             />
           )}
           {activeTab === 2 && (
-            <FavoriteApps
+            <TrendingApps
               chainsMeta={props.chainsMeta}
               skaleNetwork={props.mpc.config.skaleNetwork}
               newApps={newApps}
               filteredApps={currentFilteredApps}
-              isSignedIn={isSignedIn}
-              error={null}
             />
           )}
           {activeTab === 3 && (
-            <TrendingApps
+            <FavoriteApps
               chainsMeta={props.chainsMeta}
               skaleNetwork={props.mpc.config.skaleNetwork}
               newApps={newApps}
-              trendingApps={currentFilteredApps}
+              filteredApps={currentFilteredApps}
+              trendingApps={trendingApps}
+              isSignedIn={isSignedIn}
+              error={null}
             />
           )}
         </Box>
diff --git a/src/pages/History.tsx b/src/pages/History.tsx
index c78162a0..b83e742c 100644
--- a/src/pages/History.tsx
+++ b/src/pages/History.tsx
@@ -35,8 +35,12 @@ import {
   useMetaportStore
 } from '@skalenetwork/metaport'
 
+import HistoryIcon from '@mui/icons-material/History'
+import ArrowBackIosNewRoundedIcon from '@mui/icons-material/ArrowBackIosNewRounded'
+
 import { setHistoryToStorage } from '../core/transferHistory'
 import { META_TAGS } from '../core/meta'
+import Breadcrumbs from '../components/Breadcrumbs'
 
 export default function History() {
   const mpc = useMetaportStore((state) => state.mpc)
@@ -58,16 +62,24 @@ export default function History() {
         <meta property="og:description" content={META_TAGS.history.description} />
       </Helmet>
       <Stack spacing={0}>
-        <div className={cls(cmn.flex, cmn.flexcv)}>
-          <div className={cls(cmn.flexg)}>
-            <h2 className={cls(cmn.nom)}>
-              History ({transfersHistory.length + (transactionsHistory.length !== 0 ? 1 : 0)})
-            </h2>
-            <p className={cls(cmn.nom, cmn.p, cmn.p3, cmn.pSec)}>SKALE Bridge transfers history</p>
-          </div>
-          <div className={cls(cmn.flex)}></div>
+        <div className={cls(cmn.flex)}>
+          <Breadcrumbs
+            className="bg"
+            sections={[
+              {
+                text: 'Bridge',
+                icon: <ArrowBackIosNewRoundedIcon />,
+                url: '/bridge'
+              },
+              {
+                text: 'History',
+                icon: <HistoryIcon />
+              }
+            ]}
+          />
+          <div className={cls(cmn.flexg)}></div>
         </div>
-        <div className={cls([cmn.mtop20, transactionsHistory.length !== 0])}>
+        <div className={cls([cmn.mtop10, transactionsHistory.length !== 0])}>
           <TransfersHistory size="md" />
         </div>
         <div>
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 6be86a87..da77a7fb 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -1,6 +1,30 @@
+/**
+ * @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 Home.tsx
+ * @copyright SKALE Labs 2024-Present
+ */
+
+import { useEffect } from 'react'
 import { Link } from 'react-router-dom'
 import { Container, Stack, Box, Grid, Button } from '@mui/material'
-import { cmn, cls } from '@skalenetwork/metaport'
+import { cmn, cls, SkPaper } from '@skalenetwork/metaport'
 import { type types } from '@/core'
 
 import { useApps } from '../useApps'
@@ -8,19 +32,33 @@ import { useApps } from '../useApps'
 import Headline from '../components/Headline'
 import PageCard from '../components/PageCard'
 import CategoryCardsGrid from '../components/ecosystem/CategoryCardsGrid'
-import NewApps from '../components/ecosystem/NewApps'
-import FavoriteApps from '../components/ecosystem/FavoriteApps'
-import TrendingApps from '../components/ecosystem/TrendingApps'
+import NewApps from '../components/ecosystem/tabs/NewApps'
+import FavoriteApps from '../components/ecosystem/tabs/FavoriteApps'
+import TrendingApps from '../components/ecosystem/tabs/TrendingApps'
 
+import { SKALE_SOCIAL_LINKS } from '../core/constants'
 import { SECTION_ICONS, EXPLORE_CARDS } from '../components/HomeComponents'
+import SocialButtons from '../components/ecosystem/Socials'
+import UserRecommendations from '../components/ecosystem/UserRecommendations'
 
 interface HomeProps {
   skaleNetwork: types.SkaleNetwork
   chainsMeta: types.ChainsMetadataMap
+  metrics: types.IMetrics | null
+  loadData: () => Promise<void>
 }
 
-export default function Home({ skaleNetwork, chainsMeta }: HomeProps): JSX.Element {
-  const { newApps, trendingApps, favoriteApps, isSignedIn } = useApps(chainsMeta)
+export default function Home({
+  skaleNetwork,
+  chainsMeta,
+  metrics,
+  loadData
+}: HomeProps): JSX.Element {
+  const { newApps, trendingApps, favoriteApps, isSignedIn } = useApps(chainsMeta, metrics)
+
+  useEffect(() => {
+    loadData()
+  }, [])
 
   return (
     <Container maxWidth="md" className="paddBott60">
@@ -35,7 +73,7 @@ export default function Home({ skaleNetwork, chainsMeta }: HomeProps): JSX.Eleme
         <AppSection
           title="Your Favorites"
           icon={SECTION_ICONS.favorites}
-          linkTo="/ecosystem?tab=2"
+          linkTo="/ecosystem?tab=3"
           component={
             <FavoriteApps
               skaleNetwork={skaleNetwork}
@@ -43,11 +81,17 @@ export default function Home({ skaleNetwork, chainsMeta }: HomeProps): JSX.Eleme
               useCarousel={true}
               newApps={newApps}
               filteredApps={favoriteApps}
+              trendingApps={trendingApps}
               isSignedIn={isSignedIn}
               error={null}
             />
           }
         />
+        <UserRecommendations
+          skaleNetwork={skaleNetwork}
+          chainsMeta={chainsMeta}
+          metrics={metrics}
+        />
         <AppSection
           title="New dApps on SKALE"
           icon={SECTION_ICONS.new}
@@ -58,19 +102,20 @@ export default function Home({ skaleNetwork, chainsMeta }: HomeProps): JSX.Eleme
               skaleNetwork={skaleNetwork}
               chainsMeta={chainsMeta}
               useCarousel={true}
+              trendingApps={trendingApps}
             />
           }
         />
         <AppSection
           title="Trending dApps on SKALE"
           icon={SECTION_ICONS.trending}
-          linkTo="/ecosystem?tab=3"
+          linkTo="/ecosystem?tab=2"
           component={
             <TrendingApps
               chainsMeta={chainsMeta}
               skaleNetwork={skaleNetwork}
               newApps={newApps}
-              trendingApps={trendingApps}
+              filteredApps={trendingApps}
               useCarousel
             />
           }
@@ -82,6 +127,13 @@ export default function Home({ skaleNetwork, chainsMeta }: HomeProps): JSX.Eleme
         className={cls(cmn.mbott10, cmn.mtop20, cmn.ptop20)}
       />
       <CategoryCardsGrid chainsMeta={chainsMeta} />
+      <div className={cls(cmn.flex, cmn.mtop20, cmn.ptop20)}>
+        <div className={cls(cmn.flexg)}></div>
+        <SkPaper gray className={cls(cmn.mtop20)}>
+          <SocialButtons social={SKALE_SOCIAL_LINKS} size="md" className="m-ri-min10" />
+        </SkPaper>
+        <div className={cls(cmn.flexg)}></div>
+      </div>
     </Container>
   )
 }
diff --git a/src/pages/Onramp.tsx b/src/pages/Onramp.tsx
index 3c2239e1..fef05652 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 670ccb92..04471343 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 021b98b1..73e85405 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 a6cb7e17..f3b71e0b 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}
diff --git a/src/styles/ProfileModal.scss b/src/styles/ProfileModal.scss
new file mode 100644
index 00000000..6727d039
--- /dev/null
+++ b/src/styles/ProfileModal.scss
@@ -0,0 +1,56 @@
+.profileModal {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 90%;
+    max-width: 900px;
+    background-color: black;
+    max-height: 90vh;
+    overflow-y: auto;
+    border-radius: 35px;
+}
+
+.profileModalHeader {
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+}
+
+.profileModalStatus {
+    display: flex;
+    align-items: center;
+}
+
+.profileModalActions {
+    margin-top: 10px;
+    margin-left: 10px;
+    margin-bottom: 10px;
+}
+
+.emailInput {
+    width: 100%;
+}
+
+.emailInput input {
+    font-size: 16px;
+    padding: 10px;
+    border-radius: 4px;
+    border: 1px solid #ccc;
+}
+
+.emailInput.error input {
+    border-color: #f44336;
+}
+
+.emailInput .errorText {
+    color: #f44336;
+    font-size: 12px;
+    margin-top: 4px;
+}
+
+@media (max-width: 600px) {
+    .profileModal {
+        width: 95%;
+    }
+}
\ No newline at end of file
diff --git a/src/styles/components.scss b/src/styles/components.scss
index 6ebc2573..c6b5d87c 100644
--- a/src/styles/components.scss
+++ b/src/styles/components.scss
@@ -1,5 +1,7 @@
 .skTabs {
-    .MuiTab-root, .MuiButton-root {
+
+    .MuiTab-root,
+    .MuiButton-root {
         background-color: $sk-bg !important;
     }
 }
@@ -53,6 +55,7 @@
 .sk-logo-md {
     width: 170px;
     height: 170px;
+
     .responsive-logo {
         padding: 20px !important;
     }
@@ -120,6 +123,10 @@
     border: 1px $border-color solid;
 }
 
+.filled {
+    background: $sk-bg;
+}
+
 .borderLeft {
     border-left: 1px $border-color solid;
 }
diff --git a/src/useApps.tsx b/src/useApps.tsx
index 96e4bb16..01eced80 100644
--- a/src/useApps.tsx
+++ b/src/useApps.tsx
@@ -23,12 +23,13 @@
 import { useMemo } from 'react'
 import { type types } from '@/core'
 import { getRecentApps } from './core/ecosystem/utils'
+import { getTotalAppCounters } from './core/explorer'
 import { MAX_APPS_DEFAULT } from './core/constants'
 import { useLikedApps } from './LikedAppsContext'
 import { useAuth } from './AuthContext'
 
-export function useApps(chainsMeta: types.ChainsMetadataMap) {
-  const { getTrendingApps, likedApps, getAppId } = useLikedApps()
+export function useApps(chainsMeta: types.ChainsMetadataMap, metrics: types.IMetrics | null) {
+  const { getMostLikedApps, likedApps, getAppId } = useLikedApps()
   const { isSignedIn } = useAuth()
 
   const allApps = useMemo<types.AppWithChainAndName[]>(() => {
@@ -47,14 +48,13 @@ export function useApps(chainsMeta: types.ChainsMetadataMap) {
     return apps.sort((a, b) => (b.added || 0) - (a.added || 0))
   }, [chainsMeta])
 
-  const trendingAppIds = getTrendingApps()
-
-  const trendingApps = useMemo<types.AppWithChainAndName[]>(() => {
+  const mostLikedAppIds = getMostLikedApps()
+  const mostLikedApps = useMemo<types.AppWithChainAndName[]>(() => {
     const appMap = new Map(allApps.map((app) => [getAppId(app.chain, app.appName), app]))
-    return trendingAppIds
+    return mostLikedAppIds
       .map((id) => appMap.get(id))
       .filter((app): app is types.AppWithChainAndName => app !== undefined)
-  }, [allApps, trendingAppIds, getAppId])
+  }, [allApps, mostLikedAppIds, getAppId])
 
   const favoriteApps = useMemo<types.AppWithChainAndName[]>(() => {
     if (!isSignedIn) return []
@@ -62,5 +62,25 @@ export function useApps(chainsMeta: types.ChainsMetadataMap) {
     return apps.sort((a, b) => a.alias.localeCompare(b.alias))
   }, [allApps, likedApps, isSignedIn, getAppId])
 
-  return { allApps, newApps, trendingApps, favoriteApps, isSignedIn }
+  const trendingApps = useMemo<types.AppWithChainAndName[]>(() => {
+    if (!metrics) return []
+
+    const appsWithTransactions = allApps.map((app) => {
+      const chainMetrics = metrics.metrics[app.chain]
+      if (!chainMetrics || !chainMetrics.apps_counters[app.appName]) {
+        return { ...app, transactions_last_7_days: 0 }
+      }
+      const totalCounters = getTotalAppCounters(chainMetrics.apps_counters[app.appName])
+      return {
+        ...app,
+        transactions_last_7_days: totalCounters ? totalCounters.transactions_last_7_days : 0
+      }
+    })
+
+    return appsWithTransactions
+      .sort((a, b) => b.transactions_last_7_days - a.transactions_last_7_days)
+      .slice(0, MAX_APPS_DEFAULT)
+  }, [allApps, metrics])
+
+  return { allApps, newApps, mostLikedApps, favoriteApps, trendingApps, isSignedIn }
 }
diff --git a/src/useSFuel.tsx b/src/useSFuel.tsx
new file mode 100644
index 00000000..e47b4815
--- /dev/null
+++ b/src/useSFuel.tsx
@@ -0,0 +1,191 @@
+/**
+ * @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 useSFuel.tsx
+ * @copyright SKALE Labs 2024-Present
+ */
+
+import { useState, useEffect, useCallback, useMemo } from 'react'
+import { Logger, type ILogObj } from 'tslog'
+import { useWagmiAccount, type MetaportCore, Station } from '@skalenetwork/metaport'
+import { DEFAULT_MIN_SFUEL_WEI, SFUEL_CHECK_INTERVAL } from './core/constants'
+import { types } from '@/core'
+
+const log = new Logger<ILogObj>({ name: 'useSFuel' })
+
+const CHAINS_TO_SKIP = ['turbulent-unique-scheat'] // todo: tmp fix, remove later
+
+interface SFuelState {
+  sFuelOk: boolean
+  isMining: boolean
+  chainsWithFaucet: string[]
+  totalChainsWithStation: number
+  chainsWithEnoughSFuel: number
+  currentAddress: types.AddressType | null
+  loading: boolean
+  intervalId: number | null
+}
+
+export function usesFuel(mpc: MetaportCore) {
+  const { address } = useWagmiAccount()
+  const [state, setState] = useState<SFuelState>({
+    sFuelOk: true,
+    isMining: false,
+    chainsWithFaucet: [] as string[],
+    totalChainsWithStation: 0,
+    chainsWithEnoughSFuel: 0,
+    currentAddress: null,
+    loading: true,
+    intervalId: null
+  })
+
+  const checkFaucetAvailability = useCallback(async () => {
+    const chainsWithFaucet = await Promise.all(
+      mpc.config.chains
+        .filter((chain) => !CHAINS_TO_SKIP.includes(chain))
+        .map(async (chain) => {
+          const station = new Station(chain, mpc)
+          return (await station.isFaucetAvailable()) ? chain : null
+        })
+    ).then((chains) => chains.filter((chain): chain is string => chain !== null))
+    setState((prev) => ({
+      ...prev,
+      chainsWithFaucet,
+      totalChainsWithStation: chainsWithFaucet.length
+    }))
+  }, [mpc.config.chains, mpc.config.skaleNetwork])
+
+  const checkSFuelBalance = useCallback(
+    async (currentAddress: types.AddressType): Promise<void> => {
+      if (!currentAddress || state.chainsWithFaucet.length === 0) return
+      if (state.currentAddress !== currentAddress) {
+        setState((prev) => ({ ...prev, currentAddress, loading: true }))
+      }
+      let chainsWithEnoughSFuel = 0
+      let sFuelOk = true
+      for (const chain of state.chainsWithFaucet) {
+        if (CHAINS_TO_SKIP.includes(chain)) continue
+        const { balance } = await new Station(chain, mpc).getData(currentAddress)
+        if (balance >= DEFAULT_MIN_SFUEL_WEI) {
+          chainsWithEnoughSFuel++
+        } else {
+          sFuelOk = false
+        }
+      }
+      setState((prev) => ({ ...prev, sFuelOk, chainsWithEnoughSFuel, loading: false }))
+    },
+    [state.chainsWithFaucet, mpc]
+  )
+
+  const mineSFuel = useCallback(async () => {
+    if (!address) return
+    setState((prev) => ({ ...prev, isMining: true }))
+    let errorOccurred = false
+    let chainsWithEnoughSFuel = 0
+
+    for (const chain of state.chainsWithFaucet) {
+      if (CHAINS_TO_SKIP.includes(chain)) continue
+      try {
+        const station = new Station(chain, mpc)
+        const { balance } = await station.getData(address)
+        if (balance < DEFAULT_MIN_SFUEL_WEI) {
+          log.info(`Mining sFuel on chain ${chain}`)
+          const powResult = await station.doPoW(address)
+          if (!powResult.ok) {
+            log.error(`Failed to mine sFuel on chain ${chain}: ${powResult.message}`)
+            errorOccurred = true
+          } else {
+            chainsWithEnoughSFuel++
+          }
+        } else {
+          chainsWithEnoughSFuel++
+        }
+      } catch (error) {
+        log.error(`Error processing chain ${chain}:`, error)
+        errorOccurred = true
+      }
+      setState((prev) => ({
+        ...prev,
+        chainsWithEnoughSFuel
+      }))
+    }
+
+    if (errorOccurred) {
+      log.error('sFuel mining encountered errors on one or more chains')
+    } else {
+      log.info('sFuel mining completed successfully on all required chains')
+    }
+
+    setState((prev) => ({
+      ...prev,
+      sFuelOk: !errorOccurred,
+      isMining: false,
+      chainsWithEnoughSFuel
+    }))
+  }, [address, state.chainsWithFaucet, mpc])
+
+  useEffect(() => {
+    checkFaucetAvailability()
+  }, [checkFaucetAvailability])
+
+  useEffect(() => {
+    const checkAndSetInterval = async () => {
+      if (address !== state.currentAddress && state.intervalId) {
+        clearInterval(state.intervalId)
+        setState((prev) => ({
+          ...prev,
+          intervalId: null
+        }))
+      }
+      if (address) {
+        await checkSFuelBalance(address)
+        setState((prev) => ({ ...prev, intervalId: newIntervalId }))
+        const newIntervalId = setInterval(checkSFuelBalance, SFUEL_CHECK_INTERVAL)
+      } else {
+        setState((prev) => ({
+          ...prev,
+          sFuelOk: true,
+          chainsWithEnoughSFuel: 0,
+          isChecking: false,
+          currentAddress: null,
+          intervalId: null
+        }))
+      }
+    }
+    checkAndSetInterval()
+    return () => {
+      if (state.intervalId) {
+        clearInterval(state.intervalId)
+      }
+    }
+  }, [address, checkSFuelBalance])
+
+  const sFuelCompletionPercentage = useMemo(() => {
+    if (state.totalChainsWithStation === 0) return 100
+    return Math.round((state.chainsWithEnoughSFuel / state.totalChainsWithStation) * 100)
+  }, [state.chainsWithEnoughSFuel, state.totalChainsWithStation])
+
+  return {
+    ...state,
+    mineSFuel,
+    totalChainsWithStation: state.chainsWithFaucet.length,
+    chainsWithEnoughSFuel: state.chainsWithEnoughSFuel,
+    sFuelCompletionPercentage
+  }
+}
diff --git a/vercel.json b/vercel.json
index 3f4e75aa..05a5fecc 100644
--- a/vercel.json
+++ b/vercel.json
@@ -19,5 +19,11 @@
       "source": "/(.*)",
       "destination": "/"
     }
+  ],
+  "redirects": [
+    {
+      "source": "/submit",
+      "destination": "https://github.com/skalenetwork/skale-network/issues/new?assignees=dmytrotkk&labels=metadata&projects=&template=app_submission.yml&title=App+Metadata+Submission"
+    }
   ]
 }
\ No newline at end of file