diff --git a/packages/backend/src/tracking/TrackingModule.ts b/packages/backend/src/tracking/TrackingModule.ts
index 690ae0f8..b7e6aa42 100644
--- a/packages/backend/src/tracking/TrackingModule.ts
+++ b/packages/backend/src/tracking/TrackingModule.ts
@@ -90,6 +90,7 @@ function createTrackingModule(dependencies: Dependencies): ApplicationModule {
     oAppRepo,
     oAppConfigurationRepo,
     oAppDefaultConfigurationRepo,
+    currDiscoveryRepo,
   )
 
   const router = createTrackingRouter(controller)
diff --git a/packages/backend/src/tracking/http/TrackingController.test.ts b/packages/backend/src/tracking/http/TrackingController.test.ts
index 7062df2f..06d2829c 100644
--- a/packages/backend/src/tracking/http/TrackingController.test.ts
+++ b/packages/backend/src/tracking/http/TrackingController.test.ts
@@ -1,7 +1,8 @@
 import { assert } from '@l2beat/backend-tools'
 import { ChainId, EthereumAddress } from '@lz/libs'
-import { expect, mockObject } from 'earl'
+import { expect, mockFn, mockObject } from 'earl'
 
+import { CurrentDiscoveryRepository } from '../../peripherals/database/CurrentDiscoveryRepository'
 import {
   OAppConfigurationRecord,
   OAppConfigurationRepository,
@@ -28,11 +29,15 @@ describe(TrackingController.name, () => {
         mockObject<OAppDefaultConfigurationRepository>({
           getBySourceChain: () => Promise.resolve([]),
         })
+      const currDiscoveryRepo = mockObject<CurrentDiscoveryRepository>({
+        find: mockFn().resolvesTo(null),
+      })
 
       const controller = new TrackingController(
         oAppRepo,
         oAppConfigRepo,
         oAppDefaultConfigRepo,
+        currDiscoveryRepo,
       )
       const result = await controller.getOApps(chainId)
 
@@ -127,6 +132,31 @@ describe(TrackingController.name, () => {
           },
         ]
 
+        const mockDiscoveryOutput = {
+          contracts: [
+            {
+              name: 'Oracle',
+              address: EthereumAddress.random(),
+              unverified: false,
+            },
+            {
+              name: 'Relayer',
+              address: EthereumAddress.random(),
+              unverified: true,
+            },
+            {
+              name: 'Endpoint',
+              address: EthereumAddress.random(),
+              unverified: false,
+            },
+          ],
+          eoas: [
+            EthereumAddress.random(),
+            EthereumAddress.random(),
+            EthereumAddress.random(),
+          ],
+        }
+
         const oAppRepo = mockObject<OAppRepository>({
           getBySourceChain: () => Promise.resolve([oAppA, oAppB]),
         })
@@ -138,11 +168,18 @@ describe(TrackingController.name, () => {
           mockObject<OAppDefaultConfigurationRepository>({
             getBySourceChain: () => Promise.resolve(mockDefaultConfigurations),
           })
+        const currDiscoveryRepo = mockObject<CurrentDiscoveryRepository>({
+          find: mockFn().resolvesTo({
+            chainId,
+            discoveryOutput: mockDiscoveryOutput,
+          }),
+        })
 
         const controller = new TrackingController(
           oAppRepo,
           oAppConfigRepo,
           oAppDefaultConfigRepo,
+          currDiscoveryRepo,
         )
 
         const result = await controller.getOApps(chainId)
@@ -199,6 +236,19 @@ describe(TrackingController.name, () => {
             configuration: c.configuration,
           })),
         )
+
+        expect(result.addressInfo).toEqual([
+          ...mockDiscoveryOutput.contracts.map((contract) => ({
+            name: contract.name,
+            address: contract.address,
+            verified: !contract.unverified,
+          })),
+          ...mockDiscoveryOutput.eoas.map((eoa) => ({
+            name: 'EOA',
+            address: eoa,
+            verified: true,
+          })),
+        ])
       })
     })
   })
diff --git a/packages/backend/src/tracking/http/TrackingController.ts b/packages/backend/src/tracking/http/TrackingController.ts
index e7cf63d8..ad388320 100644
--- a/packages/backend/src/tracking/http/TrackingController.ts
+++ b/packages/backend/src/tracking/http/TrackingController.ts
@@ -1,11 +1,14 @@
 import { assert } from '@l2beat/backend-tools'
+import { DiscoveryOutput } from '@l2beat/discovery-types'
 import {
+  AddressInfo,
   ChainId,
   OAppsResponse,
   OAppWithConfigs,
   ResolvedConfigurationWithAppId,
 } from '@lz/libs'
 
+import { CurrentDiscoveryRepository } from '../../peripherals/database/CurrentDiscoveryRepository'
 import {
   OAppConfigurationRecord,
   OAppConfigurationRepository,
@@ -27,9 +30,18 @@ class TrackingController {
     private readonly oAppRepo: OAppRepository,
     private readonly oAppConfigurationRepo: OAppConfigurationRepository,
     private readonly oAppDefaultConfigRepo: OAppDefaultConfigurationRepository,
+    private readonly currDiscoveryRepository: CurrentDiscoveryRepository,
   ) {}
 
   async getOApps(chainId: ChainId): Promise<OAppsResponse | null> {
+    const discovery = await this.currDiscoveryRepository.find(chainId)
+
+    if (!discovery) {
+      return null
+    }
+
+    const addressInfo = outputToAddressInfo(discovery.discoveryOutput)
+
     const defaultConfigurations =
       await this.oAppDefaultConfigRepo.getBySourceChain(chainId)
 
@@ -62,10 +74,23 @@ class TrackingController {
         targetChainId: record.targetChainId,
         configuration: record.configuration,
       })),
+
+      addressInfo,
     }
   }
 }
 
+function outputToAddressInfo(output: DiscoveryOutput): AddressInfo[] {
+  const { eoas, contracts } = output
+
+  return contracts
+    .map((contract) => ({
+      address: contract.address,
+      name: contract.name,
+      verified: !contract.unverified,
+    }))
+    .concat(eoas.map((eoa) => ({ address: eoa, name: 'EOA', verified: true })))
+}
 function attachConfigurations(
   oApps: OAppRecord[],
   configurations: ResolvedConfigurationWithAppId[],
diff --git a/packages/frontend/src/hooks/useTrackingApi.ts b/packages/frontend/src/hooks/useTrackingApi.ts
new file mode 100644
index 00000000..8ced87fc
--- /dev/null
+++ b/packages/frontend/src/hooks/useTrackingApi.ts
@@ -0,0 +1,62 @@
+import { ChainId, OAppsResponse } from '@lz/libs'
+import { useEffect, useState } from 'react'
+
+import { hasBeenAborted } from './utils'
+
+export interface UseTrackingApiHookOptions {
+  chainId: ChainId
+  apiUrl: string
+}
+
+export interface TrackingData {
+  data: OAppsResponse
+  chainId: ChainId
+}
+
+export function useTrackingApi({ chainId, apiUrl }: UseTrackingApiHookOptions) {
+  const [isLoading, setIsLoading] = useState(true)
+  const [isError, setIsError] = useState(false)
+  const [data, setData] = useState<TrackingData | null>(null)
+
+  useEffect(() => {
+    const abortController = new AbortController()
+
+    setIsLoading(true)
+    setIsError(false)
+    async function fetchData() {
+      try {
+        const result = await fetch(
+          apiUrl + 'tracking/' + ChainId.getName(chainId),
+          {
+            signal: abortController.signal,
+          },
+        )
+
+        if (!result.ok) {
+          setIsLoading(false)
+          setIsError(true)
+        }
+
+        const data = await result.text()
+        const parsed = OAppsResponse.parse(JSON.parse(data))
+        setData({ data: parsed, chainId })
+        setIsError(false)
+        setIsLoading(false)
+      } catch (e) {
+        console.error(e)
+        if (hasBeenAborted(e)) {
+          return
+        }
+        setIsError(true)
+      }
+    }
+
+    void fetchData()
+
+    return () => {
+      abortController.abort()
+    }
+  }, [chainId, apiUrl])
+
+  return [data, isLoading, isError] as const
+}
diff --git a/packages/frontend/src/main.tsx b/packages/frontend/src/main.tsx
index f4223791..7bd7fc59 100644
--- a/packages/frontend/src/main.tsx
+++ b/packages/frontend/src/main.tsx
@@ -5,6 +5,7 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 import { BrowserRouter, Route, Routes } from 'react-router-dom'
 
+import { Applications } from './pages/Applications'
 import { Main } from './pages/Main'
 import { Status } from './pages/Status'
 
@@ -15,6 +16,7 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
       <Routes>
         <Route path="/" element={<Main />} />
         <Route path="/status" element={<Status />} />
+        <Route path="/applications" element={<Applications />} />
       </Routes>
     </BrowserRouter>
   </React.StrictMode>,
diff --git a/packages/frontend/src/pages/Applications.tsx b/packages/frontend/src/pages/Applications.tsx
new file mode 100644
index 00000000..ba696457
--- /dev/null
+++ b/packages/frontend/src/pages/Applications.tsx
@@ -0,0 +1,57 @@
+import { ChainId } from '@lz/libs'
+import { SkeletonTheme } from 'react-loading-skeleton'
+
+import { config } from '../config'
+import { AddressInfoContext } from '../hooks/addressInfoContext'
+import { useTrackingApi } from '../hooks/useTrackingApi'
+import { Layout } from '../view/components/Layout'
+import { Navbar } from '../view/components/Navbar'
+import { OAppTable, OAppTableSkeleton } from '../view/components/oapp/OAppTable'
+import { Warning } from '../view/components/Warning'
+
+export function Applications() {
+  const chainsToDisplay = [ChainId.ETHEREUM] as [ChainId, ...ChainId[]]
+
+  const [oApps, isLoading, isError] = useTrackingApi({
+    chainId: chainsToDisplay[0],
+    apiUrl: config.apiUrl,
+  })
+
+  if (isLoading) {
+    return (
+      <Page>
+        <SkeletonTheme baseColor="#27272A" highlightColor="#525252">
+          <OAppTableSkeleton />
+        </SkeletonTheme>
+      </Page>
+    )
+  }
+
+  if (!oApps || isError) {
+    return (
+      <Page>
+        <Warning
+          title="Could not load applications"
+          subtitle="Applications API might be unreachable or no applications were discovered. Please try again later."
+        />
+      </Page>
+    )
+  }
+
+  return (
+    <Page>
+      <AddressInfoContext.Provider value={oApps.data.addressInfo}>
+        <OAppTable oAppsList={oApps.data} />
+      </AddressInfoContext.Provider>
+    </Page>
+  )
+}
+
+function Page({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <Navbar />
+      <Layout>{children}</Layout>
+    </>
+  )
+}
diff --git a/packages/frontend/src/view/components/Navbar.tsx b/packages/frontend/src/view/components/Navbar.tsx
index ea0d68ed..9927c090 100644
--- a/packages/frontend/src/view/components/Navbar.tsx
+++ b/packages/frontend/src/view/components/Navbar.tsx
@@ -1,17 +1,58 @@
+import cx from 'classnames'
+import { useNavigate } from 'react-router-dom'
+
 import { CollabLogo } from '../icons/CollabIcon'
 import { L2BeatLogo } from '../icons/L2BeatLogo'
 import { LayerZeroLogo } from '../icons/LayerZeroLogo'
 
 export function Navbar(): JSX.Element {
+  const navigate = useNavigate()
+  const path = location.pathname
+
   return (
-    <nav className="bg-black px-8 py-4">
-      <a href="/">
+    <nav className="flex items-center justify-between bg-black px-8 py-4">
+      <a onClick={() => navigate('/')} className="cursor-pointer">
         <h1 className="inline-flex items-center gap-5">
           <LayerZeroLogo className="h-7" />
           <CollabLogo className="h-2.5" />
           <L2BeatLogo className="h-7" />
         </h1>
       </a>
+      <div>
+        <NavItem
+          active={path === '/'}
+          onClick={() => navigate('/')}
+          label="Defaults"
+        />
+        <NavItem
+          active={path === '/applications'}
+          onClick={() => navigate('/applications')}
+          label="Applications"
+        />
+      </div>
     </nav>
   )
 }
+
+interface NavItemProps {
+  active: boolean
+  onClick: () => void
+  label: string
+}
+
+function NavItem(props: NavItemProps) {
+  const highlight = props.active
+    ? 'text-yellow-100'
+    : 'text-white hover:text-yellow-200'
+  return (
+    <button
+      onClick={props.onClick}
+      className={cx(
+        'bg-transparent px-2 py-1 text-xs uppercase duration-300',
+        highlight,
+      )}
+    >
+      {props.label}
+    </button>
+  )
+}
diff --git a/packages/frontend/src/view/components/oapp/OAppBadge.tsx b/packages/frontend/src/view/components/oapp/OAppBadge.tsx
new file mode 100644
index 00000000..b2ad50ff
--- /dev/null
+++ b/packages/frontend/src/view/components/oapp/OAppBadge.tsx
@@ -0,0 +1,54 @@
+import cx from 'classnames'
+
+import { Tooltip } from '../Tooltip'
+
+export function DefaultConfigBadge() {
+  return (
+    <Tooltip
+      text="This application is using default configuration provided by LayerZero"
+      variant="text"
+    >
+      <div
+        className={cx(
+          'flex h-[22px] max-w-fit items-center justify-center rounded bg-gray-100 px-2 text-2xs',
+        )}
+      >
+        DEFAULT
+      </div>
+    </Tooltip>
+  )
+}
+
+export function CustomConfigBadge() {
+  return (
+    <Tooltip
+      text="This application has changed its configuration."
+      variant="text"
+    >
+      <div
+        className={cx(
+          'flex h-[22px] max-w-fit items-center justify-center rounded bg-[#D88641] px-2 text-2xs',
+        )}
+      >
+        CUSTOM
+      </div>
+    </Tooltip>
+  )
+}
+
+export function UnknownConfigBadge() {
+  return (
+    <Tooltip
+      text="No remote chain configuration has been discovered. Site only supports 10 EVM chains at the moment."
+      variant="text"
+    >
+      <div
+        className={cx(
+          'flex h-[22px] max-w-fit items-center justify-center rounded bg-[#494844] px-2 text-2xs',
+        )}
+      >
+        UNKNOWN
+      </div>
+    </Tooltip>
+  )
+}
diff --git a/packages/frontend/src/view/components/oapp/OAppConfig.tsx b/packages/frontend/src/view/components/oapp/OAppConfig.tsx
new file mode 100644
index 00000000..d703e425
--- /dev/null
+++ b/packages/frontend/src/view/components/oapp/OAppConfig.tsx
@@ -0,0 +1,244 @@
+import {
+  ChainId,
+  getPrettyChainName,
+  OAppsResponse,
+  OAppWithConfigs,
+} from '@lz/libs'
+import cx from 'classnames'
+import { ReactNode, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+
+import { LinkIcon } from '../../icons/LinkIcon'
+import { SolidMinusIcon } from '../../icons/MinusIcon'
+import { SolidPlusIcon } from '../../icons/PlusIcon'
+import { SimpleArrowIcon } from '../../icons/SimpleArrowIcon'
+import { BlockchainAddress } from '../BlockchainAddress'
+import { BlockchainIcon } from '../BlockchainIcon'
+import { InfoTooltip } from '../InfoTooltip'
+import { Row } from '../Row'
+import { Tooltip } from '../Tooltip'
+import { CustomConfigBadge, DefaultConfigBadge } from './OAppBadge'
+
+type OAppConfig =
+  OAppsResponse['defaultConfigurations'][number]['configuration']
+
+export function OAppConfig(props: {
+  config: OAppWithConfigs['configurations'][number]
+  defaults: OAppsResponse['defaultConfigurations']
+}) {
+  const navigate = useNavigate()
+  const [isExpanded, setIsExpanded] = useState(!props.config.isDefault)
+
+  const defaultForChain = props.defaults.find(
+    (d) => d.targetChainId === props.config.targetChainId,
+  )
+
+  if (!defaultForChain) {
+    return null
+  }
+
+  function toggleExpand() {
+    setIsExpanded(!isExpanded)
+  }
+
+  function redirectToDefaults() {
+    navigate(
+      `/?chain=ethereum&remote-chain=${ChainId.getName(
+        props.config.targetChainId,
+      )}&version=V1`,
+    )
+  }
+
+  const { isDefault } = props.config
+
+  const remap = createRemapping(props.config, defaultForChain.configuration)
+
+  const relayer = remap('relayer')
+  const oracle = remap('oracle')
+  const iplv = remap('inboundProofLibraryVersion')
+  const ibc = remap('inboundBlockConfirmations')
+  const opt = remap('outboundProofType')
+  const obc = remap('outboundBlockConfirmations')
+
+  return (
+    <div className="flex flex-col rounded bg-gray-500">
+      <div className="flex items-center justify-between px-6 py-4">
+        <div className="flex items-center gap-2">
+          {getPrettyChainName(props.config.targetChainId)}
+          {<BlockchainIcon chainId={props.config.targetChainId} />}
+        </div>
+        <div className="flex items-center justify-center gap-5">
+          <div>
+            {props.config.isDefault ? (
+              <DefaultConfigBadge />
+            ) : (
+              <CustomConfigBadge />
+            )}
+          </div>
+          <div>
+            <button
+              className="brightness-100 filter transition-all duration-300 hover:brightness-[120%]"
+              onClick={isDefault ? redirectToDefaults : toggleExpand}
+            >
+              {isDefault ? (
+                <SolidLinkIcon />
+              ) : isExpanded ? (
+                <SolidMinusIcon />
+              ) : (
+                <SolidPlusIcon />
+              )}
+            </button>
+          </div>
+        </div>
+      </div>
+      {isExpanded && (
+        <div className="bg-gray-800">
+          <ConfigProperty
+            label={
+              <InfoTooltip text="Works in tandem with an Oracle to transmit messages between chains. Relayer proves the message inclusion in the source chain to the destination chain.">
+                Relayer
+              </InfoTooltip>
+            }
+            currentValue={
+              <BlockchainAddress alwaysShort address={relayer.currentValue} />
+            }
+            previousValue={
+              relayer.previousValue && (
+                <BlockchainAddress
+                  alwaysShort
+                  address={relayer.previousValue}
+                />
+              )
+            }
+          />
+          <ConfigProperty
+            label={
+              <InfoTooltip text="An address allowed to advance a block header. The oracle moves a requested block header from a source chain to a destination chain. It writes a commitment for the messages on the destination chain.">
+                Oracle
+              </InfoTooltip>
+            }
+            currentValue={
+              <BlockchainAddress alwaysShort address={oracle.currentValue} />
+            }
+            previousValue={
+              oracle.previousValue && (
+                <BlockchainAddress alwaysShort address={oracle.previousValue} />
+              )
+            }
+          />
+          <ConfigProperty
+            label={
+              <InfoTooltip text="The proof library used to decode and verify received proofs.">
+                Inbound proof library
+              </InfoTooltip>
+            }
+            currentValue={iplv.currentValue}
+            previousValue={iplv.previousValue}
+          />
+          <ConfigProperty
+            label={
+              <InfoTooltip text="The number of block confirmations on the source chain for inbound messages. Serves the purpose of a reorg protection.">
+                Inbound proof confirmations
+              </InfoTooltip>
+            }
+            currentValue={ibc.currentValue}
+            previousValue={ibc.previousValue}
+          />
+          <ConfigProperty
+            label={
+              <InfoTooltip text="The proof library used to encode outbound messages and create proofs.">
+                Outbound proof type
+              </InfoTooltip>
+            }
+            currentValue={opt.currentValue}
+            previousValue={opt.previousValue}
+          />
+          <ConfigProperty
+            label={
+              <InfoTooltip text="The number of block confirmations for outbound messages. Serves the purpose of a reorg protection.">
+                Outbound block confirmations
+              </InfoTooltip>
+            }
+            currentValue={obc.currentValue}
+            previousValue={obc.previousValue}
+          />
+        </div>
+      )}
+    </div>
+  )
+}
+
+function ConfigProperty(props: {
+  label: ReactNode
+  previousValue?: ReactNode
+  currentValue: ReactNode
+}) {
+  return (
+    <Row
+      dense
+      label={props.label}
+      hideBorder
+      className={cx('!py-1.5 !pl-5', props.previousValue && 'bg-[#3C3223]')}
+      value={
+        props.previousValue ? (
+          <div className="flex items-center gap-2">
+            <Tooltip
+              variant="text"
+              text="This is the default value that has been changed by the owner of the OApp to the custom one."
+            >
+              <span className="opacity-50 filter">{props.previousValue}</span>
+            </Tooltip>
+            <SolidArrowRight />
+            {props.currentValue}
+          </div>
+        ) : (
+          props.currentValue
+        )
+      }
+    />
+  )
+}
+
+function SolidArrowRight() {
+  return (
+    <div className="flex h-4 w-4 items-center justify-center rounded ">
+      <SimpleArrowIcon className="fill-white" width={10} height={10} />
+    </div>
+  )
+}
+
+function SolidLinkIcon() {
+  return (
+    <div className="flex h-5 w-5 items-center justify-center rounded bg-yellow-100">
+      <LinkIcon width={14} height={14} />
+    </div>
+  )
+}
+
+/**
+ * Squashes default configuration with the current configuration.
+ * `previousValue` is set to undefined if the configuration key is default.
+ */
+function createRemapping(
+  currentConfiguration: OAppWithConfigs['configurations'][number],
+  defaultConfiguration: OAppConfig,
+) {
+  return function <Key extends keyof OAppConfig>(key: Key) {
+    const defaultValue = defaultConfiguration[key]
+    const changedValue =
+      !currentConfiguration.isDefault &&
+      currentConfiguration.changedConfiguration[key]
+
+    if (currentConfiguration.isDefault || !changedValue) {
+      return {
+        currentValue: defaultValue,
+        previousValue: undefined,
+      }
+    }
+
+    return {
+      currentValue: changedValue,
+      previousValue: defaultValue,
+    }
+  }
+}
diff --git a/packages/frontend/src/view/components/oapp/OAppRow.tsx b/packages/frontend/src/view/components/oapp/OAppRow.tsx
new file mode 100644
index 00000000..26b78291
--- /dev/null
+++ b/packages/frontend/src/view/components/oapp/OAppRow.tsx
@@ -0,0 +1,110 @@
+import {
+  ChainId,
+  getPrettyChainName,
+  OAppsResponse,
+  OAppWithConfigs,
+} from '@lz/libs'
+import cx from 'classnames'
+import { useState } from 'react'
+
+import { SolidMinusIcon } from '../../icons/MinusIcon'
+import { SolidPlusIcon } from '../../icons/PlusIcon'
+import { BlockchainAddress } from '../BlockchainAddress'
+import { BlockchainIcon } from '../BlockchainIcon'
+import { InfoTooltip } from '../InfoTooltip'
+import {
+  CustomConfigBadge,
+  DefaultConfigBadge,
+  UnknownConfigBadge,
+} from './OAppBadge'
+import { OAppConfig } from './OAppConfig'
+
+export function OAppRow(props: {
+  oApp: OAppWithConfigs
+  sourceChain: ChainId
+  defaults: OAppsResponse['defaultConfigurations']
+}) {
+  const [isExpanded, setIsExpanded] = useState(false)
+
+  const hasAnyConfig = props.oApp.configurations.length > 0
+  const hasAnyCustomConfig = props.oApp.configurations.some(
+    (config) => !config.isDefault,
+  )
+  const hasDefaultConfig = !hasAnyCustomConfig
+
+  function toggleExpand() {
+    setIsExpanded(!isExpanded)
+  }
+
+  return (
+    <div
+      className={cx(
+        'col-span-full grid-cols-applications-small border-b border-gray-700 py-3.5 text-xs last:rounded-b last:border-none md:min-w-[800px] md:grid-cols-applications',
+        isExpanded ? 'rounded border-none bg-gray-750' : 'bg-gray-800',
+      )}
+    >
+      <div className="grid grid-cols-applications-small md:min-w-[800px] md:grid-cols-applications">
+        <span className="flex items-center gap-2 px-4 md:px-6">
+          {props.oApp.iconUrl && (
+            <img
+              src={props.oApp.iconUrl}
+              alt={props.oApp.name}
+              className="h-5 w-5 rounded-full"
+            />
+          )}
+          {props.oApp.name} ({props.oApp.symbol})
+        </span>
+        <span className="flex items-center gap-1">
+          {getPrettyChainName(props.sourceChain)}
+          {<BlockchainIcon chainId={props.sourceChain} />}
+        </span>
+        <span className="flex items-center">
+          <BlockchainAddress alwaysShort address={props.oApp.address} />
+        </span>
+        <span className="flex items-center gap-1.5">
+          {hasAnyConfig ? (
+            props.oApp.configurations
+              .map((config) => config.targetChainId)
+              .map((chainId) => <BlockchainIcon chainId={chainId} />)
+          ) : (
+            <InfoTooltip text="OApp can be used with other chains if they are any configured, however they are not supported by this site at the moment.">
+              <span className="font-mono tracking-tight text-gray-100">
+                No pathways discovered
+              </span>
+            </InfoTooltip>
+          )}
+        </span>
+        <span className="flex items-center">
+          {!hasAnyConfig ? (
+            <UnknownConfigBadge />
+          ) : hasDefaultConfig ? (
+            <DefaultConfigBadge />
+          ) : (
+            <CustomConfigBadge />
+          )}
+        </span>
+
+        {hasAnyConfig && (
+          <button
+            className="brightness-100 filter transition-all duration-300 hover:brightness-[120%]"
+            onClick={toggleExpand}
+          >
+            {isExpanded ? <SolidMinusIcon /> : <SolidPlusIcon />}
+          </button>
+        )}
+      </div>
+
+      {isExpanded && (
+        <div className="mt-3 flex flex-col gap-3 rounded bg-gray-750 md:mx-5 md:px-8 md:py-3">
+          {props.oApp.configurations.map((config) => (
+            <OAppConfig
+              key={config.targetChainId.toString()}
+              defaults={props.defaults}
+              config={config}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/packages/frontend/src/view/components/oapp/OAppTable.tsx b/packages/frontend/src/view/components/oapp/OAppTable.tsx
new file mode 100644
index 00000000..a83bfa8b
--- /dev/null
+++ b/packages/frontend/src/view/components/oapp/OAppTable.tsx
@@ -0,0 +1,47 @@
+import { ChainId, OAppsResponse } from '@lz/libs'
+import Skeleton from 'react-loading-skeleton'
+
+import { OAppRow } from './OAppRow'
+
+export function OAppTable({ oAppsList }: { oAppsList: OAppsResponse }) {
+  return (
+    <OAppTableWrapper>
+      {oAppsList.oApps.map((oApp) => (
+        <OAppRow
+          key={oApp.name}
+          oApp={oApp}
+          defaults={oAppsList.defaultConfigurations}
+          sourceChain={ChainId.ETHEREUM}
+        />
+      ))}
+    </OAppTableWrapper>
+  )
+}
+
+export function OAppTableSkeleton() {
+  return (
+    <OAppTableWrapper>
+      <Skeleton className="mt-3" />
+      <Skeleton />
+      <Skeleton />
+      <Skeleton />
+    </OAppTableWrapper>
+  )
+}
+
+function OAppTableWrapper({ children }: { children: React.ReactNode[] }) {
+  return (
+    <div className="mt-10 overflow-x-auto rounded bg-gray-900 px-7 py-5">
+      <div className="col-span-5 grid min-w-[800px] grid-cols-applications rounded bg-gray-600 py-3 text-left text-[13px] font-semibold text-gray-50">
+        <div className="px-6">TOKEN</div>
+        <div>SOURCE CHAIN</div>
+        <div>ADDRESS</div>
+        <div>PATHWAYS</div>
+        <div>CONFIG</div>
+        <div />
+      </div>
+
+      {children}
+    </div>
+  )
+}
diff --git a/packages/frontend/src/view/components/selectors/NetworkSelector.tsx b/packages/frontend/src/view/components/selectors/NetworkSelector.tsx
index b897357a..8b8de603 100644
--- a/packages/frontend/src/view/components/selectors/NetworkSelector.tsx
+++ b/packages/frontend/src/view/components/selectors/NetworkSelector.tsx
@@ -47,7 +47,7 @@ export function NetworkSelector(props: Props) {
       >
         Select network
       </span>
-      <div className="scrollbar-h-1.5 mt-0.5 flex items-stretch gap-3 overflow-x-auto py-1 scrollbar scrollbar-track-gray-400 scrollbar-thumb-yellow-100">
+      <div className="scrollbar-h-1.5 mt-0.5 flex items-stretch gap-3 overflow-x-auto py-1 scrollbar scrollbar-thumb-yellow-100">
         {sortedChains.map((chain) => (
           <PillSelector
             key={chain.key}
diff --git a/packages/frontend/src/view/icons/LinkIcon.tsx b/packages/frontend/src/view/icons/LinkIcon.tsx
new file mode 100644
index 00000000..6dd6c7fa
--- /dev/null
+++ b/packages/frontend/src/view/icons/LinkIcon.tsx
@@ -0,0 +1,21 @@
+import React from 'react'
+
+export function LinkIcon(props: React.SVGProps<SVGSVGElement>): JSX.Element {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="black"
+      stroke-width="2.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      {...props}
+    >
+      <path d="M15 3h6v6" />
+      <path d="M10 14 21 3" />
+      <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
+    </svg>
+  )
+}
diff --git a/packages/frontend/src/view/icons/SimpleArrowIcon.tsx b/packages/frontend/src/view/icons/SimpleArrowIcon.tsx
index 61cac707..8027224f 100644
--- a/packages/frontend/src/view/icons/SimpleArrowIcon.tsx
+++ b/packages/frontend/src/view/icons/SimpleArrowIcon.tsx
@@ -1,16 +1,14 @@
-export function SimpleArrowIcon() {
+export function SimpleArrowIcon(props: React.SVGProps<SVGSVGElement>) {
   return (
     <svg
       width="11"
       height="15"
       viewBox="0 0 10 11"
-      fill="none"
+      fill="black"
       xmlns="http://www.w3.org/2000/svg"
+      {...props}
     >
-      <path
-        d="M-0.000213785 5.66408L7.75365 5.66408L5.01929 8.51563L5.91772 9.375L10.0827 5.04885L5.91772 0.70317L5.01929 1.56254L7.74877 4.41409L-0.00021384 4.41409L-0.000213785 5.66408Z"
-        fill="black"
-      />
+      <path d="M-0.000213785 5.66408L7.75365 5.66408L5.01929 8.51563L5.91772 9.375L10.0827 5.04885L5.91772 0.70317L5.01929 1.56254L7.74877 4.41409L-0.00021384 4.41409L-0.000213785 5.66408Z" />
     </svg>
   )
 }
diff --git a/packages/frontend/tailwind.config.js b/packages/frontend/tailwind.config.js
index 23da92a9..9a51c863 100644
--- a/packages/frontend/tailwind.config.js
+++ b/packages/frontend/tailwind.config.js
@@ -7,6 +7,8 @@ module.exports = {
       gridTemplateColumns: {
         multisig: '3fr 7fr 4fr 3fr 1fr',
         'multisig-small': '3fr 1fr 3fr 1fr',
+        applications: '4fr 2fr 3fr 4fr 2fr 1fr',
+        'applications-small': '3fr 2fr 6fr 2fr 1fr',
         'adapter-params-small': '2fr 1fr 2fr',
         'adapter-params': '2fr 1fr 2fr 7fr',
         'default-uln-configs': '2fr 2fr 3fr 4fr 4fr',
diff --git a/packages/libs/src/apis/TrackingApi.ts b/packages/libs/src/apis/TrackingApi.ts
index f9a9529f..e1351f90 100644
--- a/packages/libs/src/apis/TrackingApi.ts
+++ b/packages/libs/src/apis/TrackingApi.ts
@@ -4,6 +4,7 @@ import { ChainId } from '../chainId'
 import { branded, EthereumAddress } from '../utils'
 
 export {
+  AddressInfo,
   OAppsResponse,
   OAppWithConfigs,
   ResolvedConfiguration,
@@ -65,6 +66,13 @@ const OAppWithConfigs = z.object({
 
 type OAppWithConfigs = z.infer<typeof OAppWithConfigs>
 
+const AddressInfo = z.object({
+  address: branded(z.string(), EthereumAddress),
+  name: z.string(),
+  verified: z.boolean(),
+})
+type AddressInfo = z.infer<typeof AddressInfo>
+
 const OAppsResponse = z.object({
   sourceChainId: branded(z.number(), ChainId),
   oApps: z.array(OAppWithConfigs),
@@ -74,6 +82,7 @@ const OAppsResponse = z.object({
       configuration: OAppConfiguration,
     }),
   ),
+  addressInfo: z.array(AddressInfo),
 })
 
 type OAppsResponse = z.infer<typeof OAppsResponse>