diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
index 46cc61643a..284721db54 100644
--- a/public/locales/en/translation.json
+++ b/public/locales/en/translation.json
@@ -720,6 +720,7 @@
         "links": {
             "bridge": "Bridge",
             "buy": "Buy",
+            "marketplace": "Marketplace",
             "portfolio": "Portfolio",
             "sell": "Sell",
             "swap": "Swap"
diff --git a/src/frontend/OverlayManager/Overlay/NavBarOverlayWrapper/MarketplaceNavItem/MarketplaceSublinks/index.tsx b/src/frontend/OverlayManager/Overlay/NavBarOverlayWrapper/MarketplaceNavItem/MarketplaceSublinks/index.tsx
new file mode 100644
index 0000000000..22df5a02ce
--- /dev/null
+++ b/src/frontend/OverlayManager/Overlay/NavBarOverlayWrapper/MarketplaceNavItem/MarketplaceSublinks/index.tsx
@@ -0,0 +1,33 @@
+import React from 'react'
+import { ContractMetadata } from '@valist/sdk/dist/typesApi'
+import { SubLink } from '@hyperplay/ui'
+import { Link, useLocation } from 'react-router-dom'
+import styles from '../../index.module.scss'
+
+export function MarketplaceSublinks(contractMetadata?: ContractMetadata[]) {
+  const location = useLocation()
+  const { pathname, search } = location
+  const searchParams = new URLSearchParams(search)
+  const urlQueryParam = searchParams.get('url')
+
+  const marketplaceSublinks = contractMetadata
+    ?.filter((val) => !!val.marketplace_urls)
+    .flatMap((val) =>
+      (val.marketplace_urls ?? [])
+        .filter((val) => !!val)
+        .map((mktUrl) => {
+          return (
+            <SubLink
+              key={val.name}
+              component={Link}
+              to={`/marketplace?url=${encodeURIComponent(mktUrl)}`}
+              selected={pathname === '/marketplace' && urlQueryParam === mktUrl}
+              className={styles.sublink}
+            >
+              {val.name}
+            </SubLink>
+          )
+        })
+    )
+  return marketplaceSublinks
+}
diff --git a/src/frontend/OverlayManager/Overlay/NavBarOverlayWrapper/MarketplaceNavItem/index.tsx b/src/frontend/OverlayManager/Overlay/NavBarOverlayWrapper/MarketplaceNavItem/index.tsx
new file mode 100644
index 0000000000..32d21a7ee2
--- /dev/null
+++ b/src/frontend/OverlayManager/Overlay/NavBarOverlayWrapper/MarketplaceNavItem/index.tsx
@@ -0,0 +1,62 @@
+import React, { useState } from 'react'
+import { Images, NavItem } from '@hyperplay/ui'
+import { useLocation } from 'react-router-dom'
+import { useQuery } from '@tanstack/react-query'
+import { BrowserGameProps } from 'frontend/OverlayManager/types'
+import styles from '../index.module.scss'
+import classNames from 'classnames'
+import { useTranslation } from 'react-i18next'
+import { MarketplaceSublinks } from './MarketplaceSublinks'
+
+export interface MarketplaceNavItemProps extends BrowserGameProps {
+  collapsed: boolean
+}
+
+export function MarketplaceNavItem({
+  appName,
+  runner,
+  collapsed,
+  ...props
+}: MarketplaceNavItemProps) {
+  const location = useLocation()
+  const { pathname } = location
+  const [mktCollapsed, setMktCollapsed] = useState(false)
+  const { t } = useTranslation()
+
+  const { data: gameInfo } = useQuery({
+    queryKey: ['getGameInfo', appName],
+    queryFn: async () => {
+      return window.api.getGameInfo(appName, runner)
+    }
+  })
+
+  const gameInfoExists = !!gameInfo
+  const gameInfoHasSomeMarketplaceUrls = !!gameInfo?.networks?.some(
+    (val) => !!val.marketplace_urls?.length
+  )
+  const marketplaceEnabled = gameInfoExists && gameInfoHasSomeMarketplaceUrls
+  const marketplaceClass: Record<string, boolean> = {}
+  marketplaceClass[styles.disabled] = !marketplaceEnabled
+
+  if (!marketplaceEnabled) {
+    return null
+  }
+
+  return (
+    <NavItem
+      title={t('overlay.links.marketplace', 'Marketplace')}
+      icon={<Images.Home fill="white" />}
+      key={'/marketplace'}
+      collapsed={collapsed}
+      selected={pathname === '/marketplace'}
+      classNames={{ link: classNames(marketplaceClass) }}
+      subLinks={
+        marketplaceEnabled ? MarketplaceSublinks(gameInfo?.networks) : undefined
+      }
+      subLinksCollapsed={mktCollapsed}
+      setSubLinksCollapsed={() => setMktCollapsed(!mktCollapsed)}
+      onClick={() => setMktCollapsed(!mktCollapsed)}
+      {...props}
+    />
+  )
+}
diff --git a/src/frontend/OverlayManager/Overlay/NavBarOverlayWrapper/PortfolioNavItem/index.tsx b/src/frontend/OverlayManager/Overlay/NavBarOverlayWrapper/PortfolioNavItem/index.tsx
new file mode 100644
index 0000000000..f46adf1004
--- /dev/null
+++ b/src/frontend/OverlayManager/Overlay/NavBarOverlayWrapper/PortfolioNavItem/index.tsx
@@ -0,0 +1,76 @@
+import React, { useState } from 'react'
+import styles from '../index.module.scss'
+import { NavItem, Images, SubLink } from '@hyperplay/ui'
+import { Link, useLocation } from 'react-router-dom'
+import { useTranslation } from 'react-i18next'
+
+export interface PortfolioNavItemProps {
+  collapsed: boolean
+}
+
+export function PortfolioNavItem({ collapsed }: PortfolioNavItemProps) {
+  const location = useLocation()
+  const { pathname } = location
+  const [mmCollapsed, mmSetCollapsed] = useState(false)
+  const { t } = useTranslation()
+
+  return (
+    <NavItem
+      title={t('overlay.links.portfolio', 'Portfolio')}
+      icon={<Images.MetaMaskColored fill="none" width={22} height={36} />}
+      key={'/portfolio'}
+      collapsed={collapsed}
+      selected={pathname.startsWith('/portfolio')}
+      onClick={() => mmSetCollapsed(!mmCollapsed)}
+      subLinksCollapsed={mmCollapsed}
+      setSubLinksCollapsed={() => mmSetCollapsed(!mmCollapsed)}
+      subLinks={[
+        <SubLink
+          key={'Portfolio'}
+          component={Link}
+          to={'/portfolio'}
+          selected={pathname === '/portfolio'}
+          className={styles.sublink}
+        >
+          {t('overlay.links.portfolio', 'Portfolio')}
+        </SubLink>,
+        <SubLink
+          key={'Swap'}
+          component={Link}
+          to={'/portfolio/swap'}
+          selected={pathname === '/portfolio/swap'}
+          className={styles.sublink}
+        >
+          {t('overlay.links.swap', 'Swap')}
+        </SubLink>,
+        <SubLink
+          key={'Bridge'}
+          component={Link}
+          to={'/portfolio/bridge'}
+          selected={pathname === '/portfolio/bridge'}
+          className={styles.sublink}
+        >
+          {t('overlay.links.bridge', 'Bridge')}
+        </SubLink>,
+        <SubLink
+          key={'Buy'}
+          component={Link}
+          to={'/portfolio/buy'}
+          selected={pathname === '/portfolio/buy'}
+          className={styles.sublink}
+        >
+          {t('overlay.links.buy', 'Buy')}
+        </SubLink>,
+        <SubLink
+          key={'Sell'}
+          component={Link}
+          to={'/portfolio/sell'}
+          selected={pathname === '/portfolio/sell'}
+          className={styles.sublink}
+        >
+          {t('overlay.links.sell', 'Sell')}
+        </SubLink>
+      ]}
+    />
+  )
+}
diff --git a/src/frontend/OverlayManager/Overlay/NavBarOverlayWrapper/index.tsx b/src/frontend/OverlayManager/Overlay/NavBarOverlayWrapper/index.tsx
index 4cf9a3c663..0513f242bd 100644
--- a/src/frontend/OverlayManager/Overlay/NavBarOverlayWrapper/index.tsx
+++ b/src/frontend/OverlayManager/Overlay/NavBarOverlayWrapper/index.tsx
@@ -1,16 +1,18 @@
 import React, { useState } from 'react'
 import styles from './index.module.scss'
-import { NavBarOverlay, NavItem, Images, SubLink } from '@hyperplay/ui'
+import { NavBarOverlay, NavItem, Images } from '@hyperplay/ui'
 import { Link, useLocation } from 'react-router-dom'
+import { BrowserGameProps } from 'frontend/OverlayManager/types'
+import { MarketplaceNavItem } from './MarketplaceNavItem'
 import { useTranslation } from 'react-i18next'
+import { PortfolioNavItem } from './PortfolioNavItem'
 
-export function NavBarOverlayWrapper() {
+export function NavBarOverlayWrapper({ appName, runner }: BrowserGameProps) {
   const location = useLocation()
   const { pathname } = location
   const [collapsed, setCollapsed] = useState(false)
   const { t } = useTranslation()
   const comingSoonText = t('overlay.comingSoon', 'Coming Soon')
-  const [mmCollapsed, mmSetCollapsed] = useState(false)
 
   return (
     <NavBarOverlay
@@ -24,71 +26,12 @@ export function NavBarOverlayWrapper() {
           component={Link}
           to={'/quests'}
         />,
-        <NavItem
-          title={'Portfolio'}
-          icon={<Images.MetaMaskColored fill="none" width={22} height={36} />}
-          key={'/portfolio'}
-          collapsed={collapsed}
-          selected={pathname.startsWith('/portfolio')}
-          onClick={() => mmSetCollapsed(!mmCollapsed)}
-          subLinksCollapsed={mmCollapsed}
-          setSubLinksCollapsed={() => mmSetCollapsed(!mmCollapsed)}
-          subLinks={[
-            <SubLink
-              key={'Portfolio'}
-              component={Link}
-              to={'/portfolio'}
-              selected={pathname === '/portfolio'}
-              className={styles.sublink}
-            >
-              {t('overlay.links.portfolio', 'Portfolio')}
-            </SubLink>,
-            <SubLink
-              key={'Swap'}
-              component={Link}
-              to={'/portfolio/swap'}
-              selected={pathname === '/portfolio/swap'}
-              className={styles.sublink}
-            >
-              {t('overlay.links.swap', 'Swap')}
-            </SubLink>,
-            <SubLink
-              key={'Bridge'}
-              component={Link}
-              to={'/portfolio/bridge'}
-              selected={pathname === '/portfolio/bridge'}
-              className={styles.sublink}
-            >
-              {t('overlay.links.bridge', 'Bridge')}
-            </SubLink>,
-            <SubLink
-              key={'Buy'}
-              component={Link}
-              to={'/portfolio/buy'}
-              selected={pathname === '/portfolio/buy'}
-              className={styles.sublink}
-            >
-              {t('overlay.links.buy', 'Buy')}
-            </SubLink>,
-            <SubLink
-              key={'Sell'}
-              component={Link}
-              to={'/portfolio/sell'}
-              selected={pathname === '/portfolio/sell'}
-              className={styles.sublink}
-            >
-              {t('overlay.links.sell', 'Sell')}
-            </SubLink>
-          ]}
-        />,
-        <NavItem
-          title={'Marketplace'}
-          icon={<Images.Home fill="white" />}
-          key={'/marketplace'}
+        <PortfolioNavItem key={'/portfolioNavItem'} collapsed={collapsed} />,
+        <MarketplaceNavItem
+          key={'/marketplaceNavItem'}
+          appName={appName}
+          runner={runner}
           collapsed={collapsed}
-          selected={pathname === '/marketplace'}
-          classNames={{ link: styles.disabled }}
-          secondaryTag={comingSoonText}
         />,
         <NavItem
           title={'Achievements'}
diff --git a/src/frontend/OverlayManager/Overlay/index.tsx b/src/frontend/OverlayManager/Overlay/index.tsx
index 912dd720b9..07dd9eb537 100644
--- a/src/frontend/OverlayManager/Overlay/index.tsx
+++ b/src/frontend/OverlayManager/Overlay/index.tsx
@@ -17,6 +17,7 @@ import classNames from 'classnames'
 import { HashRouter, Route, Routes } from 'react-router-dom'
 import MetaMaskPortfolio from 'frontend/screens/MetaMaskPortfolio'
 import { NavBarOverlayWrapper } from './NavBarOverlayWrapper'
+import WebView from 'frontend/screens/WebView'
 
 export const Overlay = observer(function ({
   appName,
@@ -130,13 +131,17 @@ export const Overlay = observer(function ({
         <div className={BrowserGameStyles.bgFilter} />
         <div className={BrowserGameStyles.contentContainer}>
           <HashRouter>
-            <NavBarOverlayWrapper />
+            <NavBarOverlayWrapper appName={appName} runner={runner} />
             <Routes>
               <Route path="/" element={questsViewer} />
               <Route path="/quests" element={questsViewer} />
               <Route path="/portfolio" element={<MetaMaskPortfolio />}>
                 <Route path=":page" element={<MetaMaskPortfolio />} />
               </Route>
+              <Route
+                path="/marketplace"
+                element={<WebView key="marketplace" />}
+              />
             </Routes>
           </HashRouter>
           <div className={BrowserGameStyles.rightSideContainer}>
diff --git a/src/frontend/screens/WebView/index.css b/src/frontend/screens/WebView/index.scss
similarity index 63%
rename from src/frontend/screens/WebView/index.css
rename to src/frontend/screens/WebView/index.scss
index c9c3f2c0bd..65a268fcde 100644
--- a/src/frontend/screens/WebView/index.css
+++ b/src/frontend/screens/WebView/index.scss
@@ -1,7 +1,10 @@
+@import '@hyperplay/ui/utilities/_loading.scss';
+
 .WebView {
   grid-area: content;
   width: var(--content-width);
   position: relative;
+  width: 100%;
 }
 
 .WebView.collapsed {
@@ -9,8 +12,9 @@
 }
 
 .WebView__webview {
-  height: calc(100vh - 40px);
-  width: var(--content-width);
+  height: 100%;
+  width: 100%;
+  position: absolute;
 }
 
 .WebView__webview.collapsed {
@@ -35,3 +39,18 @@
   align-self: center;
   padding: var(--space-xl);
 }
+
+.webviewLoader {
+  @include shinyLoader;
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  z-index: 0;
+}
+
+.webviewContentContainer {
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  z-index: 1;
+}
diff --git a/src/frontend/screens/WebView/index.tsx b/src/frontend/screens/WebView/index.tsx
index 85e0ea1b6b..cf76dda24b 100644
--- a/src/frontend/screens/WebView/index.tsx
+++ b/src/frontend/screens/WebView/index.tsx
@@ -9,12 +9,11 @@ import { useTranslation } from 'react-i18next'
 import { useNavigate, useLocation, useParams } from 'react-router-dom'
 import { DidNavigateEvent, WebviewTag } from 'electron'
 
-import { UpdateComponent } from 'frontend/components/UI'
 import WebviewControls from 'frontend/components/UI/WebviewControls'
 import ContextProvider from 'frontend/state/ContextProvider'
 import webviewNavigationStore from 'frontend/store/WebviewNavigationStore'
 import { Runner } from 'common/types'
-import './index.css'
+import './index.scss'
 import LoginWarning from '../Login/components/LoginWarning'
 import authState from 'frontend/state/authState'
 import { observer } from 'mobx-react-lite'
@@ -100,6 +99,12 @@ function WebView({
 
       startUrl = queryParam + queryParamAppends
     }
+  } else if (pathname.match('/marketplace')) {
+    const searchParams = new URLSearchParams(search)
+    const queryParam = searchParams.get('url')
+    if (queryParam) {
+      startUrl = decodeURIComponent(queryParam)
+    }
   }
 
   const isEpicLogin = runner === 'legendary' && startUrl === EPIC_LOGIN_URL
@@ -270,35 +275,37 @@ function WebView({
 
   if (pathname === '/game7Portal') partitionForWebview = 'persist:g7portal'
   if (urlIsHpUrl(startUrl)) partitionForWebview = 'persist:hyperplaystore'
-  else if (shouldInjectProvider(startUrl))
+  else if (shouldInjectProvider(startUrl) || pathname.match('/marketplace'))
     partitionForWebview = 'persist:InPageWindowEthereumExternalWallet'
 
   return (
     <div className={cn('WebView', classNames?.root)}>
-      {webviewRef.current && (
-        <WebviewControls
-          webview={webviewRef.current}
-          initURL={startUrl}
-          openInBrowser={!startUrl.startsWith('login')}
-          classNames={{ root: classNames?.webviewControls }}
-        />
-      )}
-      {loading.refresh && <UpdateComponent message={loading.message} />}
-      <webview
-        ref={webviewRef}
-        className={cn('WebView__webview', classNames?.webview)}
-        partition={partitionForWebview}
-        src={startUrl}
-        allowpopups={trueAsStr}
-        useragent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) Chrome/200.0"
-        {...(preloadPath ? { preload: `file://${preloadPath}` } : {})}
-      />
-      {showLoginWarningFor && (
-        <LoginWarning
-          warnLoginForStore={showLoginWarningFor}
-          onClose={onLoginWarningClosed}
+      <div className={'webviewLoader'}></div>
+      <div className={'webviewContentContainer'}>
+        {webviewRef.current && (
+          <WebviewControls
+            webview={webviewRef.current}
+            initURL={startUrl}
+            openInBrowser={!startUrl.startsWith('login')}
+            classNames={{ root: classNames?.webviewControls }}
+          />
+        )}
+        <webview
+          ref={webviewRef}
+          className={cn('WebView__webview', classNames?.webview)}
+          partition={partitionForWebview}
+          src={startUrl}
+          allowpopups={trueAsStr}
+          useragent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) Chrome/200.0"
+          {...(preloadPath ? { preload: `file://${preloadPath}` } : {})}
         />
-      )}
+        {showLoginWarningFor && (
+          <LoginWarning
+            warnLoginForStore={showLoginWarningFor}
+            onClose={onLoginWarningClosed}
+          />
+        )}
+      </div>
     </div>
   )
 }