diff --git a/docs/deployment.md b/docs/deployment.md
index 284076f84..4d292238e 100644
--- a/docs/deployment.md
+++ b/docs/deployment.md
@@ -162,6 +162,8 @@ VITE_GOOGLE_SPREADSHEET_ID=
 
 ```
 
+Note: if VITE_SUBGRAPH_URL is not set, the app will try to get the round information from the vue-app/src/rounds.json file which can be generated using the `hardhat export-round` command.
+
 ##### Setup the netlify functions
 
 1. Set the `functions directory` to `vue-app/dist/lambda`.
diff --git a/vue-app/src/App.vue b/vue-app/src/App.vue
index 923ff52d0..3c7ad9b98 100644
--- a/vue-app/src/App.vue
+++ b/vue-app/src/App.vue
@@ -4,25 +4,12 @@
   </metainfo>
   <div id="app" class="wrapper">
     <nav-bar :in-app="isInApp" />
-    <loader v-if="!appReady"></loader>
-    <div v-else id="content-container">
+    <div id="content-container">
       <div v-if="isSidebarShown" id="sidebar" :class="`${showCartPanel ? 'desktop-l' : 'desktop'}`">
         <round-information />
       </div>
-      <div
-        id="content"
-        :class="{
-          padded: isVerifyStep || (isSidebarShown && !isCartPadding),
-          'mr-cart-open': showCartPanel && isSideCartShown,
-          'mr-cart-closed': !showCartPanel && isSideCartShown,
-        }"
-      >
-        <breadcrumbs v-if="showBreadCrumb" />
-        <router-view :key="route.path" />
-      </div>
-      <div v-if="isSideCartShown" id="cart" :class="`desktop ${showCartPanel ? 'open-cart' : 'closed-cart'}`">
-        <cart-widget />
-      </div>
+      <active-app v-if="isActiveApp" :is-sidebar-shown="isSidebarShown" :show-bread-crumb="showBreadCrumb" />
+      <static-app v-else :is-sidebar-shown="isSidebarShown" :show-bread-crumb="showBreadCrumb" />
     </div>
     <mobile-tabs v-if="isMobileTabsShown" />
   </div>
@@ -32,33 +19,23 @@
 
 <script setup lang="ts">
 import NavBar from '@/components/NavBar.vue'
-import CartWidget from '@/components/CartWidget.vue'
 import MobileTabs from '@/components/MobileTabs.vue'
-import Breadcrumbs from '@/components/Breadcrumbs.vue'
+import ActiveApp from './components/ActiveApp.vue'
+import StaticApp from './components/StaticApp.vue'
+
 // @ts-ignore
 import { ModalsContainer } from 'vue-final-modal'
 
 import { getDefaultColorScheme } from '@/utils/theme'
-import { getCurrentRound } from '@/api/round'
-import { operator } from '@/api/core'
-import { useAppStore, useUserStore, useRecipientStore, useWalletStore } from '@/stores'
+import { operator, isActiveApp } from '@/api/core'
+import { useAppStore } from '@/stores'
 import { storeToRefs } from 'pinia'
 import { useRoute } from 'vue-router'
 import { useMeta } from 'vue-meta'
-import type { WalletUser } from '@/stores'
-import type { BrowserProvider } from 'ethers'
 
 const route = useRoute()
 const appStore = useAppStore()
-const { theme, showCartPanel, currentRound } = storeToRefs(appStore)
-
-const userStore = useUserStore()
-const { currentUser } = storeToRefs(userStore)
-
-const wallet = useWalletStore()
-const { user: walletUser } = storeToRefs(wallet)
-
-const recipientStore = useRecipientStore()
+const { theme, showCartPanel } = storeToRefs(appStore)
 
 // https://stackoverflow.com/questions/71785473/how-to-use-vue-meta-with-vue3
 // https://www.npmjs.com/package/vue-meta/v/3.0.0-alpha.7
@@ -80,18 +57,9 @@ useMeta(
   }),
 )
 
-const intervals: { [key: string]: any } = {}
-
 // state
 const routeName = computed(() => route.name?.toString() || '')
-const isUserAndRoundLoaded = computed(() => !!currentUser.value && !!currentRound.value)
 const isInApp = computed(() => routeName.value !== 'landing')
-const isVerifyStep = computed(() => routeName.value === 'verify-step')
-const isSideCartShown = computed(() => isUserAndRoundLoaded.value && isSidebarShown.value && routeName.value !== 'cart')
-const isCartPadding = computed(() => {
-  const routes = ['cart']
-  return routes.includes(routeName.value)
-})
 const isSidebarShown = computed(() => {
   const excludedRoutes = [
     'landing',
@@ -107,6 +75,7 @@ const isSidebarShown = computed(() => {
   ]
   return !excludedRoutes.includes(routeName.value)
 })
+
 const isMobileTabsShown = computed(() => {
   const excludedRoutes = [
     'landing',
@@ -121,6 +90,7 @@ const isMobileTabsShown = computed(() => {
   ]
   return !excludedRoutes.includes(routeName.value)
 })
+
 const showBreadCrumb = computed(() => {
   const excludedRoutes = ['landing', 'join', 'join-step', 'transaction-success', 'verify', 'project-added', 'verified']
   return !excludedRoutes.includes(routeName.value)
@@ -130,93 +100,6 @@ watch(theme, () => {
   const savedTheme = theme.value
   document.documentElement.setAttribute('data-theme', savedTheme || getDefaultColorScheme())
 })
-
-const appReady = ref(false)
-
-function setupLoadIntervals() {
-  intervals.round = setInterval(() => {
-    appStore.loadRoundInfo()
-  }, 60 * 1000)
-  intervals.recipient = setInterval(async () => {
-    recipientStore.loadRecipientRegistryInfo()
-  }, 60 * 1000)
-  intervals.user = setInterval(() => {
-    userStore.loadUserInfo()
-  }, 60 * 1000)
-}
-
-onMounted(async () => {
-  try {
-    await wallet.reconnect()
-  } catch (err) {
-    /* eslint-disable-next-line no-console */
-    console.warn('Unable to reconnect wallet', err)
-  }
-
-  try {
-    const roundAddress = appStore.currentRoundAddress || (await getCurrentRound())
-
-    if (roundAddress) {
-      appStore.selectRound(roundAddress)
-      /* eslint-disable-next-line no-console */
-      console.log('roundAddress', roundAddress)
-    }
-  } catch (err) {
-    /* eslint-disable-next-line no-console */
-    console.warn('Failed to get current round:', err)
-  }
-
-  appReady.value = true
-  try {
-    await appStore.loadClrFundInfo()
-    await appStore.loadMACIFactoryInfo()
-    await appStore.loadRoundInfo()
-    await recipientStore.loadRecipientRegistryInfo()
-    appStore.isAppReady = true
-
-    setupLoadIntervals()
-  } catch (err) {
-    /* eslint-disable-next-line no-console */
-    console.warn('Failed to load application data:', err)
-  }
-})
-
-onBeforeUnmount(() => {
-  for (const interval of Object.keys(intervals)) {
-    clearInterval(intervals[interval])
-  }
-})
-
-watch(walletUser, async () => {
-  try {
-    if (walletUser.value) {
-      const user: WalletUser = {
-        chainId: walletUser.value.chainId,
-        walletAddress: walletUser.value.walletAddress,
-        web3Provider: walletUser.value.web3Provider as BrowserProvider,
-      }
-      // make sure factory is loaded
-      await appStore.loadClrFundInfo()
-      userStore.loginUser(user)
-      await userStore.loadUserInfo()
-      await userStore.loadBrightID()
-    } else {
-      await userStore.logoutUser()
-    }
-  } catch (err) {
-    /* eslint-disable-next-line no-console */
-    console.log('error', err)
-  }
-})
-
-watch(isUserAndRoundLoaded, async () => {
-  if (!isUserAndRoundLoaded.value) {
-    return
-  }
-
-  // load contribution when we get round information
-  await userStore.loadUserInfo()
-})
 </script>
 
 <style lang="scss">
diff --git a/vue-app/src/api/claims.ts b/vue-app/src/api/claims.ts
index bf76eff3a..6b3be260d 100644
--- a/vue-app/src/api/claims.ts
+++ b/vue-app/src/api/claims.ts
@@ -15,16 +15,16 @@ export async function getAllocatedAmount(
   return allocatedAmount
 }
 
-export async function isFundsClaimed(
-  fundingRoundAddress: string,
-  recipientAddress: string,
-  recipientIndex: number,
-): Promise<boolean> {
-  const data = await sdk.GetRecipientDonations({
-    fundingRoundAddress: fundingRoundAddress.toLowerCase(),
-    recipientAddress,
-    recipientIndex,
-  })
+export async function isFundsClaimed(fundingRoundAddress: string, recipientIndex: number): Promise<boolean> {
+  let claimed = false
 
-  return !!data.donations.length
+  try {
+    const fundingRound = new Contract(fundingRoundAddress, FundingRound, provider)
+    const recipients = await fundingRound.recipients(recipientIndex)
+    claimed = !!recipients.fundsClaimed
+  } catch {
+    // recipient status is not available in older contract interface
+    claimed = true
+  }
+  return claimed
 }
diff --git a/vue-app/src/api/clrFund.ts b/vue-app/src/api/clrFund.ts
index 80de3acdc..a3a1018f4 100644
--- a/vue-app/src/api/clrFund.ts
+++ b/vue-app/src/api/clrFund.ts
@@ -1,5 +1,7 @@
-import { clrfundContractAddress, clrFundContract } from './core'
+import { clrfundContractAddress, clrFundContract, isActiveApp, provider } from './core'
 import sdk from '@/graphql/sdk'
+import { ERC20 } from './abi'
+import { Contract } from 'ethers'
 
 export interface ClrFund {
   nativeTokenAddress: string
@@ -19,19 +21,27 @@ export async function getClrFundInfo() {
   let recipientRegistryAddress = ''
 
   try {
-    const data = await sdk.GetClrFundInfo({
-      clrFundAddress: clrfundContractAddress.toLowerCase(),
-    })
+    if (isActiveApp) {
+      const data = await sdk.GetClrFundInfo({
+        clrFundAddress: clrfundContractAddress.toLowerCase(),
+      })
+      const nativeTokenInfo = data.clrFund?.nativeTokenInfo
+      if (nativeTokenInfo) {
+        nativeTokenAddress = nativeTokenInfo.tokenAddress || ''
+        nativeTokenSymbol = nativeTokenInfo.symbol || ''
+        nativeTokenDecimals = Number(nativeTokenInfo.decimals) || 0
+      }
 
-    const nativeTokenInfo = data.clrFund?.nativeTokenInfo
-    if (nativeTokenInfo) {
-      nativeTokenAddress = nativeTokenInfo.tokenAddress || ''
-      nativeTokenSymbol = nativeTokenInfo.symbol || ''
-      nativeTokenDecimals = Number(nativeTokenInfo.decimals) || 0
+      userRegistryAddress = data.clrFund?.contributorRegistryAddress || ''
+      recipientRegistryAddress = data.clrFund?.recipientRegistryAddress || ''
+    } else {
+      nativeTokenAddress = await clrFundContract.nativeToken()
+      const nativeTokenContract = new Contract(nativeTokenAddress, ERC20, provider)
+      nativeTokenSymbol = await nativeTokenContract.symbol()
+      nativeTokenDecimals = await nativeTokenContract.decimals()
+      userRegistryAddress = await clrFundContract.userRegistry()
+      recipientRegistryAddress = await clrFundContract.recipientRegistry()
     }
-
-    userRegistryAddress = data.clrFund?.contributorRegistryAddress || ''
-    recipientRegistryAddress = data.clrFund?.recipientRegistryAddress || ''
   } catch (err) {
     /* eslint-disable-next-line no-console */
     console.error('Failed GetClrFundInfo', err)
diff --git a/vue-app/src/api/contributions.ts b/vue-app/src/api/contributions.ts
index 11d332544..5e0618447 100644
--- a/vue-app/src/api/contributions.ts
+++ b/vue-app/src/api/contributions.ts
@@ -1,4 +1,4 @@
-import { Contract, FixedNumber, parseUnits, id } from 'ethers'
+import { Contract, FixedNumber, parseUnits, id, AbiCoder } from 'ethers'
 import type { TransactionResponse, Signer } from 'ethers'
 import { Keypair, PubKey, PrivKey, Message, Command } from '@clrfund/common'
 
@@ -81,16 +81,17 @@ export async function getContributionAmount(fundingRoundAddress: string, contrib
   if (!fundingRoundAddress) {
     return 0n
   }
-  const data = await sdk.GetContributionsAmount({
-    fundingRoundAddress: fundingRoundAddress.toLowerCase(),
-    contributorAddress: contributorAddress.toLowerCase(),
-  })
-
-  if (!data.contributions.length) {
+  const fundingRound = new Contract(fundingRoundAddress, FundingRound, provider)
+  try {
+    const abiCoder = AbiCoder.defaultAbiCoder()
+    const userData = abiCoder.encode(['address'], [contributorAddress])
+    const voiceCredits = await fundingRound.getVoiceCredits(contributorAddress, userData)
+    const voiceCreditFactor = await fundingRound.voiceCreditFactor()
+    return BigInt(voiceCredits) * BigInt(voiceCreditFactor)
+  } catch {
+    // ignore error as older contract does not expose the contributors info
     return 0n
   }
-
-  return BigInt(data.contributions[0].amount)
 }
 
 export async function getTotalContributed(fundingRoundAddress: string): Promise<{ count: number; amount: bigint }> {
diff --git a/vue-app/src/api/core.ts b/vue-app/src/api/core.ts
index 4b5073c10..0de7568ae 100644
--- a/vue-app/src/api/core.ts
+++ b/vue-app/src/api/core.ts
@@ -61,6 +61,8 @@ export const operator: string = import.meta.env.VITE_OPERATOR || 'Clr.fund'
 export const SUBGRAPH_ENDPOINT =
   import.meta.env.VITE_SUBGRAPH_URL || 'https://api.thegraph.com/subgraphs/name/clrfund/clrfund'
 
+export const isActiveApp = Boolean(import.meta.env.VITE_SUBGRAPH_URL)
+
 // application theme
 export enum ThemeMode {
   LIGHT = 'light',
diff --git a/vue-app/src/api/leaderboard.ts b/vue-app/src/api/leaderboard.ts
index dff8ac18d..a09b0d0d6 100644
--- a/vue-app/src/api/leaderboard.ts
+++ b/vue-app/src/api/leaderboard.ts
@@ -8,7 +8,7 @@ type LeaderboardRecord = {
 export async function getLeaderboardData(roundAddress: string, network: string) {
   const rounds = leaderboardRounds as LeaderboardRecord[]
 
-  const lowercaseRoundAddress = (roundAddress || '').toLocaleLowerCase()
+  const lowercaseRoundAddress = (roundAddress || '').toLowerCase()
   const lowercaseNetwork = (network || '').toLowerCase()
   const found = rounds.find((r: LeaderboardRecord) => {
     return r.address.toLowerCase() === lowercaseRoundAddress && r.network.toLowerCase() === lowercaseNetwork
diff --git a/vue-app/src/api/maci-factory.ts b/vue-app/src/api/maci-factory.ts
index d8ecc9f96..7e8a9f84c 100644
--- a/vue-app/src/api/maci-factory.ts
+++ b/vue-app/src/api/maci-factory.ts
@@ -7,14 +7,17 @@ export interface MACIFactory {
   maxRecipients: number
 }
 
-export async function getMACIFactoryInfo(): Promise<MACIFactory> {
+export async function getMACIFactoryInfo(maxRecipients?: number): Promise<MACIFactory> {
   const maciFactoryAddress = await clrFundContract.maciFactory()
 
-  const maciFactory = new Contract(maciFactoryAddress, MACIFactoryABI, provider)
-  const treeDepths = await maciFactory.treeDepths()
+  if (maxRecipients === undefined) {
+    const maciFactory = new Contract(maciFactoryAddress, MACIFactoryABI, provider)
+    const treeDepths = await maciFactory.treeDepths()
+    maxRecipients = 5 ** getNumber(treeDepths.voteOptionTreeDepth) - 1
+  }
 
   return {
     maciFactoryAddress,
-    maxRecipients: 5 ** getNumber(treeDepths.voteOptionTreeDepth) - 1,
+    maxRecipients,
   }
 }
diff --git a/vue-app/src/api/projects.ts b/vue-app/src/api/projects.ts
index 22a2b1d46..2795ad82e 100644
--- a/vue-app/src/api/projects.ts
+++ b/vue-app/src/api/projects.ts
@@ -261,3 +261,49 @@ export function formToProjectInterface(data: RecipientApplicationData): Project
     isLocked: true,
   }
 }
+
+/**
+ * Format the project data from the static round data to project interface
+ * @param project project data from the static round file
+ * @returns formatted project data
+ */
+export function staticDataToProjectInterface(project: any): Project {
+  return {
+    id: project.id,
+    address: project.recipientAddress,
+    name: project.metadata.name,
+    tagline: project.metadata.tagline,
+    description: project.metadata.description,
+    category: project.metadata.category,
+    problemSpace: project.metadata.problemSpace,
+    plans: project.metadata.plans,
+    teamName: project.metadata.teamName,
+    teamDescription: project.metadata.teamDescription,
+    githubUrl: project.metadata.githubUrl,
+    radicleUrl: project.metadata.radicleUrl,
+    websiteUrl: project.metadata.websiteUrl,
+    twitterUrl: project.metadata.twitterUrl,
+    discordUrl: project.discordUrl,
+    bannerImageUrl: `${ipfsGatewayUrl}/ipfs/${project.metadata.bannerImageHash}`,
+    thumbnailImageUrl: `${ipfsGatewayUrl}/ipfs/${project.metadata.thumbnailImageHash}`,
+    index: project.recipientIndex,
+    isHidden: project.state !== 'Accepted',
+    isLocked: false,
+  }
+}
+
+/**
+ * Get the list of projects for a static round
+ * @param roundAddress The funding round contract address
+ * @param network The network
+ * @returns Array of projects
+ */
+export async function getProjectsForStaticRound(roundAddress: string, network: string): Promise<Project[]> {
+  const data = await getLeaderboardData(roundAddress, network)
+  if (!data) {
+    return []
+  }
+
+  const projects = data.projects.map(staticDataToProjectInterface)
+  return projects
+}
diff --git a/vue-app/src/api/round.ts b/vue-app/src/api/round.ts
index a9c99d750..bc724117c 100644
--- a/vue-app/src/api/round.ts
+++ b/vue-app/src/api/round.ts
@@ -1,9 +1,9 @@
 import { Contract, toNumber, getAddress, hexlify, randomBytes } from 'ethers'
 import { DateTime } from 'luxon'
-import { PubKey } from '@clrfund/common'
+import { PubKey, type Tally } from '@clrfund/common'
 
 import { FundingRound, Poll } from './abi'
-import { provider, clrFundContract } from './core'
+import { provider, clrFundContract, isActiveApp } from './core'
 import { getTotalContributed } from './contributions'
 import { isVoidedRound } from './rounds'
 import sdk from '@/graphql/sdk'
@@ -38,6 +38,7 @@ export interface RoundInfo {
   messages: number
   blogUrl?: string
   network?: string
+  tally?: Tally
 }
 
 export interface TimeLeft {
@@ -97,7 +98,7 @@ export function toRoundInfo(data: any, network: string): RoundInfo {
     nativeTokenDecimals,
     voiceCreditFactor,
     status,
-    startTime: DateTime.fromSeconds(data.startTime),
+    startTime: DateTime.fromSeconds(Number(data.startTime)),
     signUpDeadline: DateTime.fromSeconds(Number(data.startTime) + Number(data.signUpDuration)),
     votingDeadline: DateTime.fromSeconds(
       Number(data.startTime) + Number(data.signUpDuration) + Number(data.votingDuration),
@@ -121,6 +122,16 @@ export async function getLeaderboardRoundInfo(fundingRoundAddress: string, netwo
   let round: RoundInfo | null = null
   try {
     round = toRoundInfo(data.round, network)
+
+    round.tally = {
+      provider: data.tally.provider,
+      maci: data.tally.maci,
+      pollId: data.pollId,
+      newTallyCommitment: data.tally.newTallyCommitment,
+      results: data.tally.results,
+      totalSpentVoiceCredits: data.tally.totalSpentVoiceCredits ?? data.tally.totalVoiceCredits,
+      perVOSpentVoiceCredits: data.tally.perVOSpentVoiceCredits ?? data.tally.totalVoiceCreditsPerVoteOption,
+    }
   } catch (err) {
     /* eslint-disable-next-line no-console */
     console.warn(`Failed map leaderboard round info`, err)
@@ -140,6 +151,11 @@ export async function getRoundInfo(
     return cachedRound
   }
 
+  if (!isActiveApp) {
+    // static app should use the exported round information from rounds.json
+    return null
+  }
+
   const fundingRound = new Contract(fundingRoundAddress, FundingRound, provider)
   const data = await sdk.GetRoundInfo({
     fundingRoundAddress: roundAddress.toLowerCase(),
diff --git a/vue-app/src/api/rounds.ts b/vue-app/src/api/rounds.ts
index 302883e5e..a4e7d9ecd 100644
--- a/vue-app/src/api/rounds.ts
+++ b/vue-app/src/api/rounds.ts
@@ -1,6 +1,7 @@
 import sdk from '@/graphql/sdk'
 import extraRounds from '@/rounds/rounds.json'
-import { chain, voidedRounds } from './core'
+import { getNumber } from 'ethers'
+import { chain, voidedRounds, isActiveApp, clrfundContractAddress } from './core'
 
 export interface Round {
   index: number
@@ -21,19 +22,22 @@ function toRoundId({ network, address }: { network: string; address: string }):
 
 /**
  * Get a list of funding rounds created by the clrFund contract
- * @param clrFundAddress The ClrFund contract address
- * @returns A list of funding rounds
+ * @returns A list of funding rounds sorted by start time in descending order
  */
-export async function getRounds(clrFundAddress: string): Promise<Round[]> {
+export async function getRounds(): Promise<Round[]> {
   let data
-  try {
-    data = await sdk.GetRounds({ clrFundAddress: clrFundAddress.toLowerCase() })
-  } catch {
-    return []
+  if (isActiveApp) {
+    try {
+      data = await sdk.GetRounds({ clrFundAddress: clrfundContractAddress.toLowerCase() })
+    } catch {
+      data = { fundingRounds: [] }
+    }
+  } else {
+    data = { fundingRounds: [] }
   }
 
   const rounds: Round[] = extraRounds.map(({ address, network, startTime, votingDeadline }, index): Round => {
-    return { index, address, network, hasLeaderboard: true, startTime, votingDeadline }
+    return { index, address, network, hasLeaderboard: true, startTime: getNumber(startTime), votingDeadline }
   })
 
   const leaderboardRounds = new Set(rounds.map(r => toRoundId({ network: r.network || '', address: r.address })))
@@ -58,11 +62,12 @@ export async function getRounds(clrFundAddress: string): Promise<Round[]> {
     }
   }
 
+  const lastIndex = rounds.length - 1
   return rounds
-    .sort((a, b) => a.startTime - b.startTime)
+    .sort((a, b) => b.startTime - a.startTime)
     .map((r, index) => {
       return {
-        index,
+        index: lastIndex - index,
         address: r.address,
         hasLeaderboard: r.hasLeaderboard,
         startTime: r.startTime,
diff --git a/vue-app/src/api/user.ts b/vue-app/src/api/user.ts
index f65069a26..f2ed80189 100644
--- a/vue-app/src/api/user.ts
+++ b/vue-app/src/api/user.ts
@@ -54,8 +54,12 @@ export async function isVerifiedUser(userRegistryAddress: string, walletAddress:
 
 export async function isRegisteredUser(fundingRoundAddress: string, walletAddress: string): Promise<boolean> {
   const round = new Contract(fundingRoundAddress, FundingRound, provider)
-  const contributor = await round.contributors(walletAddress)
-  return contributor.isRegistered
+  try {
+    const contributor = await round.contributors(walletAddress)
+    return contributor.isRegistered
+  } catch {
+    return false
+  }
 }
 
 export async function getTokenBalance(tokenAddress: string, walletAddress: string): Promise<bigint> {
diff --git a/vue-app/src/components.d.ts b/vue-app/src/components.d.ts
index d4d8a573b..5f037b3de 100644
--- a/vue-app/src/components.d.ts
+++ b/vue-app/src/components.d.ts
@@ -8,6 +8,7 @@ export {}
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     Accordion: typeof import('./components/Accordion.vue')['default']
+    ActiveApp: typeof import('./components/ActiveApp.vue')['default']
     AddToCartButton: typeof import('./components/AddToCartButton.vue')['default']
     BackLink: typeof import('./components/BackLink.vue')['default']
     BalanceItem: typeof import('./components/BalanceItem.vue')['default']
@@ -56,6 +57,7 @@ declare module '@vue/runtime-core' {
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     SignatureModal: typeof import('./components/SignatureModal.vue')['default']
+    StaticApp: typeof import('./components/StaticApp.vue')['default']
     TimeLeft: typeof import('./components/TimeLeft.vue')['default']
     Transaction: typeof import('./components/Transaction.vue')['default']
     TransactionModal: typeof import('./components/TransactionModal.vue')['default']
diff --git a/vue-app/src/components/ActiveApp.vue b/vue-app/src/components/ActiveApp.vue
new file mode 100644
index 000000000..7bc404fb1
--- /dev/null
+++ b/vue-app/src/components/ActiveApp.vue
@@ -0,0 +1,139 @@
+<template>
+  <div
+    id="content"
+    :class="{
+      padded: isVerifyStep || (isSidebarShown && !isCartPadding),
+      'mr-cart-open': showCartPanel && isSideCartShown,
+      'mr-cart-closed': !showCartPanel && isSideCartShown,
+    }"
+  >
+    <breadcrumbs v-if="showBreadCrumb" />
+    <router-view :key="route.path" />
+  </div>
+  <div v-if="isSideCartShown" id="cart" :class="`desktop ${showCartPanel ? 'open-cart' : 'closed-cart'}`">
+    <cart-widget />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useRoute } from 'vue-router'
+import { getCurrentRound } from '@/api/round'
+import type { WalletUser } from '@/stores'
+import { useAppStore, useRecipientStore, useUserStore } from '@/stores'
+import type { BrowserProvider } from 'ethers'
+import { useWalletStore } from '@/stores'
+import CartWidget from '@/components/CartWidget.vue'
+import Breadcrumbs from '@/components/Breadcrumbs.vue'
+
+interface Props {
+  showBreadCrumb: boolean
+  isSidebarShown: boolean
+}
+const props = defineProps<Props>()
+
+const route = useRoute()
+const wallet = useWalletStore()
+const { user: walletUser } = storeToRefs(wallet)
+
+const appReady = ref(false)
+const appStore = useAppStore()
+const recipientStore = useRecipientStore()
+const userStore = useUserStore()
+const { currentUser } = storeToRefs(userStore)
+const { currentRound, showCartPanel } = storeToRefs(appStore)
+const routeName = computed(() => route.name?.toString() || '')
+
+const intervals: { [key: string]: any } = {}
+const isUserAndRoundLoaded = computed(() => !!currentUser.value && !!currentRound.value)
+const isSideCartShown = computed(() => isUserAndRoundLoaded.value && props.isSidebarShown && routeName.value !== 'cart')
+const isVerifyStep = computed(() => routeName.value === 'verify-step')
+const isCartPadding = computed(() => {
+  const routes = ['cart']
+  return routes.includes(routeName.value)
+})
+
+function setupLoadIntervals() {
+  intervals.round = setInterval(() => {
+    appStore.loadRoundInfo()
+  }, 60 * 1000)
+  intervals.recipient = setInterval(async () => {
+    recipientStore.loadRecipientRegistryInfo()
+  }, 60 * 1000)
+  intervals.user = setInterval(() => {
+    userStore.loadUserInfo()
+  }, 60 * 1000)
+}
+
+onMounted(async () => {
+  try {
+    await wallet.reconnect()
+  } catch (err) {
+    /* eslint-disable-next-line no-console */
+    console.warn('Unable to reconnect wallet', err)
+  }
+
+  try {
+    const roundAddress = appStore.currentRoundAddress || (await getCurrentRound())
+
+    if (roundAddress) {
+      appStore.selectRound(roundAddress)
+      /* eslint-disable-next-line no-console */
+      console.log('roundAddress', roundAddress)
+    }
+  } catch (err) {
+    /* eslint-disable-next-line no-console */
+    console.warn('Failed to get current round:', err)
+  }
+
+  appReady.value = true
+  try {
+    await appStore.loadClrFundInfo()
+    await appStore.loadMACIFactoryInfo()
+    await appStore.loadRoundInfo()
+    await recipientStore.loadRecipientRegistryInfo()
+    appStore.isAppReady = true
+
+    setupLoadIntervals()
+  } catch (err) {
+    /* eslint-disable-next-line no-console */
+    console.warn('Failed to load application data:', err)
+  }
+})
+
+onBeforeUnmount(() => {
+  for (const interval of Object.keys(intervals)) {
+    clearInterval(intervals[interval])
+  }
+})
+
+watch(walletUser, async () => {
+  try {
+    if (walletUser.value) {
+      const user: WalletUser = {
+        chainId: walletUser.value.chainId,
+        walletAddress: walletUser.value.walletAddress,
+        web3Provider: walletUser.value.web3Provider as BrowserProvider,
+      }
+      // make sure factory is loaded
+      await appStore.loadClrFundInfo()
+      userStore.loginUser(user)
+      await userStore.loadUserInfo()
+      await userStore.loadBrightID()
+    } else {
+      await userStore.logoutUser()
+    }
+  } catch (err) {
+    /* eslint-disable-next-line no-console */
+    console.log('error', err)
+  }
+})
+
+watch(isUserAndRoundLoaded, async () => {
+  if (!isUserAndRoundLoaded.value) {
+    return
+  }
+
+  // load contribution when we get round information
+  await userStore.loadUserInfo()
+})
+</script>
diff --git a/vue-app/src/components/Cart.vue b/vue-app/src/components/Cart.vue
index 1e0301d38..09d8bb3b4 100644
--- a/vue-app/src/components/Cart.vue
+++ b/vue-app/src/components/Cart.vue
@@ -130,16 +130,6 @@
           }}
         </div>
       </div>
-      <div class="submit-btn-wrapper" v-if="canWithdrawContribution && cart.length >= 1">
-        <button class="btn-action" @click="openWithdrawalModal()">
-          {{
-            $t('cart.button1', {
-              contribution: formatAmount(contribution),
-              tokenSymbol: tokenSymbol,
-            })
-          }}
-        </button>
-      </div>
       <div
         class="submit-btn-wrapper"
         v-if="
@@ -232,7 +222,6 @@ import WalletModal from '@/components/WalletModal.vue'
 import SignatureModal from '@/components/SignatureModal.vue'
 import ContributionModal from '@/components/ContributionModal.vue'
 import ReallocationModal from '@/components/ReallocationModal.vue'
-import WithdrawalModal from '@/components/WithdrawalModal.vue'
 import CartItems from '@/components/CartItems.vue'
 import Links from '@/components/Links.vue'
 import TimeLeft from '@/components/TimeLeft.vue'
@@ -560,15 +549,6 @@ const votes = computed(() => {
   return formattedVotes
 })
 
-const { open: openWithdrawalModal, close: closeWithdrawalModal } = useModal({
-  component: WithdrawalModal,
-  attrs: {
-    onClose() {
-      closeWithdrawalModal()
-    },
-  },
-})
-
 function submitCart(event: any) {
   event.preventDefault()
 
@@ -602,10 +582,6 @@ function submitCart(event: any) {
   appStore.toggleEditSelection(false)
 }
 
-const canWithdrawContribution = computed(
-  () => currentRound.value?.status === RoundStatus.Cancelled && contribution.value > 0n,
-)
-
 const showCollapseCart = computed(() => route.name !== 'cart')
 
 function openDropdown() {
diff --git a/vue-app/src/components/ClaimButton.vue b/vue-app/src/components/ClaimButton.vue
index 9aed85da9..5db5eba51 100644
--- a/vue-app/src/components/ClaimButton.vue
+++ b/vue-app/src/components/ClaimButton.vue
@@ -80,17 +80,16 @@ async function checkAllocation() {
     await loadTally()
   }
 
-  allocatedAmount.value = await getAllocatedAmount(
-    currentRound.value.fundingRoundAddress,
-    currentRound.value.nativeTokenDecimals,
-    tally.value!.results.tally[props.project.index],
-    tally.value!.perVOSpentVoiceCredits.tally[props.project.index],
-  )
-  claimed.value = await isFundsClaimed(
-    currentRound.value.fundingRoundAddress,
-    props.project.address,
-    props.project.index,
-  )
+  if (tally.value) {
+    allocatedAmount.value = await getAllocatedAmount(
+      currentRound.value.fundingRoundAddress,
+      currentRound.value.nativeTokenDecimals,
+      tally.value.results.tally[props.project.index],
+      tally.value.perVOSpentVoiceCredits.tally[props.project.index],
+    )
+  }
+
+  claimed.value = await isFundsClaimed(currentRound.value.fundingRoundAddress, props.project.index)
   isLoading.value = false
 }
 
@@ -116,7 +115,7 @@ function canClaim(): boolean {
   return hasClaimBtn() && !!currentUser.value && !claimed.value
 }
 
-function formatAmount(value: BigInt): string {
+function formatAmount(value: bigint): string {
   const maxDecimals = 6
   const { nativeTokenDecimals } = currentRound.value!
   return _formatAmount(value, nativeTokenDecimals, null, maxDecimals)
diff --git a/vue-app/src/components/NavBar.vue b/vue-app/src/components/NavBar.vue
index 82b50b3f6..c4cf5cdfc 100644
--- a/vue-app/src/components/NavBar.vue
+++ b/vue-app/src/components/NavBar.vue
@@ -53,7 +53,7 @@
               <p class="item-text">{{ $t('navBar.dropdown.rounds') }}</p>
             </links>
           </div>
-          <div v-if="isOptimisticRecipientRegistry" class="dropdown-item" @click="closeHelpDropdown">
+          <div v-if="isOptimisticRecipientRegistry && isActiveApp" class="dropdown-item" @click="closeHelpDropdown">
             <links to="/recipients">
               <div class="emoji-wrapper">💎</div>
               <p class="item-text">{{ $t('navBar.dropdown.recipients') }}</p>
@@ -87,7 +87,7 @@
 </template>
 
 <script setup lang="ts">
-import { chain, ThemeMode, isOptimisticRecipientRegistry } from '@/api/core'
+import { chain, ThemeMode, isOptimisticRecipientRegistry, isActiveApp } from '@/api/core'
 import { lsGet, lsSet } from '@/utils/localStorage'
 import { isValidTheme, getDefaultColorScheme } from '@/utils/theme'
 import { useAppStore } from '@/stores'
diff --git a/vue-app/src/components/ProjectListItem.vue b/vue-app/src/components/ProjectListItem.vue
index 6b7435811..009502493 100644
--- a/vue-app/src/components/ProjectListItem.vue
+++ b/vue-app/src/components/ProjectListItem.vue
@@ -36,10 +36,12 @@ import { markdown } from '@/utils/markdown'
 import { useRoute, type RouteLocationRaw } from 'vue-router'
 import { useAppStore } from '@/stores'
 import { storeToRefs } from 'pinia'
+import { isActiveApp } from '@/api/core'
 
 const route = useRoute()
 const appStore = useAppStore()
-const { isRoundContributionPhase, canUserReallocate, currentRoundAddress, categoryLocaleKey } = storeToRefs(appStore)
+const { isRoundContributionPhase, canUserReallocate, currentRoundAddress, categoryLocaleKey, currentRound } =
+  storeToRefs(appStore)
 interface Props {
   project: Project
   roundAddress: string
@@ -81,12 +83,20 @@ const shouldShowCartInput = computed<boolean>(() => {
 })
 
 const projectRoute = computed<RouteLocationRaw>(() => {
-  return route.name === 'round'
-    ? {
-        name: 'round-project',
-        params: { address: props.roundAddress, id: props.project.id },
-      }
-    : { name: 'project', params: { id: props.project.id } }
+  if (isActiveApp) {
+    return route.name === 'round'
+      ? {
+          name: 'round-project',
+          params: { address: props.roundAddress, id: props.project.id },
+        }
+      : { name: 'project', params: { id: props.project.id } }
+  } else {
+    const network = currentRound.value?.network || ''
+    return {
+      name: 'leaderboard-project',
+      params: { address: props.roundAddress, network, id: props.project.id },
+    }
+  }
 })
 </script>
 
diff --git a/vue-app/src/components/RoundInformation.vue b/vue-app/src/components/RoundInformation.vue
index 2c3c132bd..df625126f 100644
--- a/vue-app/src/components/RoundInformation.vue
+++ b/vue-app/src/components/RoundInformation.vue
@@ -254,7 +254,7 @@
             {{ $t('roundInfo.div21') }}
           </div>
         </div>
-        <div class="round-value-info">
+        <div class="round-value-info" v-if="matchingPool">
           <div class="round-info-sub-item">
             <div class="round-info-item-top">
               <div class="round-info-title">{{ $t('roundInfo.div16') }}</div>
@@ -265,7 +265,7 @@
               >
                 <img width="16" src="@/assets/info.svg" />
               </div>
-              <div v-tooltip="$t('roundInfo.tooltip9')" class="add-link" @click="addMatchingFunds">
+              <div v-if="isActiveApp" v-tooltip="$t('roundInfo.tooltip9')" class="add-link" @click="addMatchingFunds">
                 <img src="@/assets/add.svg" width="16px" />
                 <span class="add-funds-link">{{ $t('roundInfo.span1') }}</span>
               </div>
@@ -289,7 +289,7 @@ import { ref, onMounted, computed, watch } from 'vue'
 import { DateTime } from 'luxon'
 import { hasDateElapsed } from '@/utils/dates'
 import { type RoundInfo, getRoundInfo, getLeaderboardRoundInfo } from '@/api/round'
-import { chain } from '@/api/core'
+import { chain, isActiveApp } from '@/api/core'
 import { lsGet, lsSet } from '@/utils/localStorage'
 import { formatAmount as _formatAmount } from '@/utils/amounts'
 import MatchingFundsModal from '@/components/MatchingFundsModal.vue'
diff --git a/vue-app/src/components/StaticApp.vue b/vue-app/src/components/StaticApp.vue
new file mode 100644
index 000000000..68accedfb
--- /dev/null
+++ b/vue-app/src/components/StaticApp.vue
@@ -0,0 +1,66 @@
+<template>
+  <div id="content" class="app-margin">
+    <breadcrumbs v-if="showBreadCrumb" />
+    <router-view :key="route.path" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useRoute, useRouter } from 'vue-router'
+import { useAppStore, useWalletStore, useUserStore, type WalletUser } from '@/stores'
+import type { BrowserProvider } from 'ethers'
+
+interface Props {
+  showBreadCrumb: boolean
+  isSidebarShown: boolean
+}
+defineProps<Props>()
+
+const route = useRoute()
+const router = useRouter()
+const appStore = useAppStore()
+const { currentRound } = storeToRefs(appStore)
+
+const userStore = useUserStore()
+const wallet = useWalletStore()
+const { user: walletUser } = storeToRefs(wallet)
+
+onMounted(async () => {
+  await appStore.loadStaticClrFundInfo()
+  appStore.isAppReady = true
+})
+
+watch(walletUser, async () => {
+  try {
+    if (walletUser.value) {
+      const user: WalletUser = {
+        chainId: walletUser.value.chainId,
+        walletAddress: walletUser.value.walletAddress,
+        web3Provider: walletUser.value.web3Provider as BrowserProvider,
+      }
+      // make sure factory is loaded
+      await appStore.loadStaticClrFundInfo()
+      userStore.loginUser(user)
+      await userStore.loadUserInfo()
+    } else {
+      await userStore.logoutUser()
+    }
+  } catch (err) {
+    /* eslint-disable-next-line no-console */
+    console.log('error', err)
+  }
+})
+</script>
+
+<style lang="scss">
+@import '../styles/vars';
+@import '../styles/fonts';
+@import '../styles/theme';
+
+.app-margin {
+  margin-right: 1.5rem;
+  @media (max-width: $breakpoint-m) {
+    margin-right: 0;
+  }
+}
+</style>
diff --git a/vue-app/src/locales/cn.json b/vue-app/src/locales/cn.json
index 63d63539e..ecbc7e298 100644
--- a/vue-app/src/locales/cn.json
+++ b/vue-app/src/locales/cn.json
@@ -719,6 +719,7 @@
     "tooltip2": "{chain} 链上钱包余额",
     "h2_3": "项目",
     "div1": "正在审核",
+    "withdraw_button": "取回 {contribution} {tokenSymbol}",
     "btn2_1": "预览",
     "btn2_2": "查看",
     "div2": "您尚未提交任何项目"
@@ -886,7 +887,6 @@
     "div8": "匹配池",
     "div9": "剩余的将会加入匹配池",
     "div10": "平均分配 {contribution} {tokenSymbol}",
-    "button1": "取回 {contribution} {tokenSymbol}",
     "div11": "不可以",
     "div11_if2": "重新分配",
     "div11_if3": "捐赠",
diff --git a/vue-app/src/locales/en.json b/vue-app/src/locales/en.json
index 8462655d5..031def9e7 100644
--- a/vue-app/src/locales/en.json
+++ b/vue-app/src/locales/en.json
@@ -719,6 +719,7 @@
     "tooltip2": "Balance of wallet on {chain} chain",
     "h2_3": "Projects",
     "div1": "Under review",
+    "withdraw_button": "Withdraw {contribution} {tokenSymbol}",
     "btn2_1": "Preview",
     "btn2_2": "View",
     "div2": "You haven't submitted any projects"
@@ -886,7 +887,6 @@
     "div8": "Matching pool",
     "div9": "Remaining funds go to matching pool",
     "div10": "Split {contribution} {tokenSymbol} evenly",
-    "button1": "Withdraw {contribution} {tokenSymbol}",
     "div11": "Can't",
     "div11_if2": "reallocate",
     "div11_if3": "contribute",
diff --git a/vue-app/src/locales/es.json b/vue-app/src/locales/es.json
index d76cba03a..ec1371371 100644
--- a/vue-app/src/locales/es.json
+++ b/vue-app/src/locales/es.json
@@ -719,6 +719,7 @@
     "tooltip2": "Saldo de la billetera en la cadena {chain}",
     "h2_3": "Proyectos",
     "div1": "En revisión",
+    "withdraw_button": "Retirar {contribution} {tokenSymbol}",
     "btn2_1": "Vista previa",
     "btn2_2": "Ver",
     "div2": "No has enviado ningún proyecto"
@@ -886,7 +887,6 @@
     "div8": "Matching pool",
     "div9": "Los fondos restantes se destinarán al matching pool",
     "div10": "Distribuir {contribution} {tokenSymbol} de manera uniforme",
-    "button1": "Retirar {contribution} {tokenSymbol}",
     "div11": "No puedes",
     "div11_if2": "reasignar",
     "div11_if3": "contribuir",
diff --git a/vue-app/src/router/index.ts b/vue-app/src/router/index.ts
index e6e415a07..86a75d5b9 100644
--- a/vue-app/src/router/index.ts
+++ b/vue-app/src/router/index.ts
@@ -1,6 +1,6 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
 import type { RouteRecordRaw } from 'vue-router'
-import { isUserRegistrationRequired, isOptimisticRecipientRegistry } from '@/api/core'
+import { isUserRegistrationRequired, isOptimisticRecipientRegistry, isActiveApp } from '@/api/core'
 
 const Landing = () => import('@/views/Landing.vue')
 const JoinLanding = () => import('@/views/JoinLanding.vue')
@@ -262,7 +262,7 @@ if (isUserRegistrationRequired) {
   )
 }
 
-if (isOptimisticRecipientRegistry) {
+if (isOptimisticRecipientRegistry && isActiveApp) {
   routes.push({
     path: '/recipients',
     name: 'recipients',
diff --git a/vue-app/src/stores/app.ts b/vue-app/src/stores/app.ts
index 9b2009d76..d977e04b7 100644
--- a/vue-app/src/stores/app.ts
+++ b/vue-app/src/stores/app.ts
@@ -9,10 +9,10 @@ import {
   serializeCart,
 } from '@/api/contributions'
 import { getCommittedCart } from '@/api/cart'
-import { operator, chain, ThemeMode, recipientRegistryType, recipientJoinDeadlineConfig } from '@/api/core'
-import { type RoundInfo, RoundStatus, getRoundInfo } from '@/api/round'
+import { operator, chain, ThemeMode, recipientRegistryType, recipientJoinDeadlineConfig, isActiveApp } from '@/api/core'
+import { type RoundInfo, RoundStatus, getRoundInfo, getLeaderboardRoundInfo } from '@/api/round'
 import { getTally, type Tally } from '@/api/tally'
-import { type ClrFund, getClrFundInfo } from '@/api/clrFund'
+import { type ClrFund, getClrFundInfo, getMatchingFunds } from '@/api/clrFund'
 import { getMACIFactoryInfo, type MACIFactory } from '@/api/maci-factory'
 import { isSameAddress } from '@/utils/accounts'
 import { storage } from '@/api/storage'
@@ -23,6 +23,8 @@ import { getAssetsUrl } from '@/utils/url'
 import { getTokenLogo } from '@/utils/tokens'
 import { assert, ASSERT_MISSING_ROUND, ASSERT_MISSING_SIGNATURE, ASSERT_NOT_CONNECTED_WALLET } from '@/utils/assert'
 import { Keypair } from '@clrfund/common'
+import { getRounds } from '@/api/rounds'
+import { DateTime } from 'luxon'
 
 export type AppState = {
   isAppReady: boolean
@@ -68,6 +70,11 @@ export const useAppStore = defineStore('app', {
         return recipientJoinDeadlineConfig
       }
 
+      if (!isActiveApp) {
+        // when running in static mode, do not allow adding recipients
+        return DateTime.now()
+      }
+
       const recipientStore = useRecipientStore()
       if (!state.currentRound || !recipientStore.recipientRegistryInfo) {
         return null
@@ -113,6 +120,9 @@ export const useAppStore = defineStore('app', {
     isCurrentRound:
       state =>
       (roundAddress: string): boolean => {
+        if (state.currentRoundAddress === null) {
+          return false
+        }
         const currentRoundAddress = state.currentRoundAddress || ''
         return isSameAddress(roundAddress, currentRoundAddress)
       },
@@ -460,12 +470,44 @@ export const useAppStore = defineStore('app', {
         stateIndex,
       }
     },
+    async loadStaticClrFundInfo() {
+      const rounds = await getRounds()
+      // rounds are sorted in reverse order, first one is the newest round
+      const currentRound = rounds[0]
+
+      let maxRecipients = 0
+      if (currentRound) {
+        const network = currentRound.network || ''
+        const currentRoundInfo = await getLeaderboardRoundInfo(currentRound.address, network)
+        if (currentRoundInfo) {
+          const matchingPool = await getMatchingFunds(currentRoundInfo.nativeTokenAddress)
+          this.clrFund = {
+            nativeTokenAddress: currentRoundInfo.nativeTokenAddress,
+            nativeTokenSymbol: currentRoundInfo.nativeTokenSymbol,
+            nativeTokenDecimals: currentRoundInfo.nativeTokenDecimals,
+            userRegistryAddress: currentRoundInfo.userRegistryAddress,
+            recipientRegistryAddress: currentRoundInfo.recipientRegistryAddress,
+            matchingPool,
+          }
+          this.selectRound(currentRound.address)
+          this.currentRound = currentRoundInfo
+          if (currentRoundInfo.tally) {
+            this.tally = currentRoundInfo.tally
+          }
+          maxRecipients = currentRoundInfo.maxRecipients
+        }
+      }
+      if (!this.clrFund) {
+        this.clrFund = await getClrFundInfo()
+      }
+      await this.loadMACIFactoryInfo(maxRecipients)
+    },
     async loadClrFundInfo() {
       const clrFund = await getClrFundInfo()
       this.clrFund = clrFund
     },
-    async loadMACIFactoryInfo() {
-      const factory = await getMACIFactoryInfo()
+    async loadMACIFactoryInfo(maxRecipients?: number) {
+      const factory = await getMACIFactoryInfo(maxRecipients)
       this.maciFactory = factory
     },
     async loadTally() {
diff --git a/vue-app/src/views/Profile.vue b/vue-app/src/views/Profile.vue
index 768352a67..b4c6612e9 100644
--- a/vue-app/src/views/Profile.vue
+++ b/vue-app/src/views/Profile.vue
@@ -56,6 +56,16 @@
         </div>
         <funds-needed-warning :onNavigate="onNavigateToBridge" />
       </div>
+      <div class="flex-row" style="justify-content: center" v-if="canWithdrawContribution">
+        <button class="btn-action" @click="openWithdrawalModal()">
+          {{
+            $t('profile.withdraw_button', {
+              contribution: formatAmount(contribution || 0n, nativeTokenDecimals),
+              tokenSymbol: nativeTokenSymbol,
+            })
+          }}
+        </button>
+      </div>
       <div class="projects-section">
         <h2>{{ $t('profile.h2_3') }}</h2>
         <div v-if="projects.length > 0" class="project-list">
@@ -93,13 +103,19 @@ import CopyButton from '@/components/CopyButton.vue'
 import Loader from '@/components/Loader.vue'
 import FundsNeededWarning from '@/components/FundsNeededWarning.vue'
 
-import { userRegistryType, UserRegistryType, chain } from '@/api/core'
-import { type Project, getProjects } from '@/api/projects'
+import { userRegistryType, UserRegistryType, chain, isActiveApp } from '@/api/core'
+import { type Project, getProjects, getProjectsForStaticRound } from '@/api/projects'
 import { isSameAddress } from '@/utils/accounts'
 import { getTokenLogo } from '@/utils/tokens'
 import { useAppStore, useUserStore, useRecipientStore, useWalletStore } from '@/stores'
 import { storeToRefs } from 'pinia'
 import { useRouter } from 'vue-router'
+import { getLeaderboardData } from '@/api/leaderboard'
+import { formatAmount } from '@/utils/amounts'
+
+import WithdrawalModal from '@/components/WithdrawalModal.vue'
+import { useModal } from 'vue-final-modal'
+import { RoundStatus } from '@/api/round'
 
 interface Props {
   balance: string
@@ -111,7 +127,14 @@ const emit = defineEmits(['close'])
 
 const router = useRouter()
 const appStore = useAppStore()
-const { hasContributionPhaseEnded, nativeTokenSymbol, currentRound } = storeToRefs(appStore)
+const {
+  hasContributionPhaseEnded,
+  nativeTokenSymbol,
+  nativeTokenDecimals,
+  currentRound,
+  hasUserContributed,
+  contribution,
+} = storeToRefs(appStore)
 const userStore = useUserStore()
 const { currentUser } = storeToRefs(userStore)
 const recipientStore = useRecipientStore()
@@ -139,17 +162,38 @@ const displayAddress = computed(() => {
   return currentUser.value.ensName ?? currentUser.value.walletAddress
 })
 
+const canWithdrawContribution = computed(
+  () => currentRound.value?.status === RoundStatus.Cancelled && hasUserContributed,
+)
+
+const { open: openWithdrawalModal, close: closeWithdrawalModal } = useModal({
+  component: WithdrawalModal,
+  attrs: {
+    onClose() {
+      closeWithdrawalModal()
+    },
+  },
+})
+
 watch(recipientRegistryAddress, () => loadProjects())
 
 async function loadProjects(): Promise<void> {
-  if (!recipientRegistryAddress.value) return
-
   isLoading.value = true
-  const _projects: Project[] = await getProjects(
-    recipientRegistryAddress.value,
-    currentRound.value?.startTime.toSeconds(),
-    currentRound.value?.votingDeadline.toSeconds(),
-  )
+  let _projects: Project[] = []
+
+  if (isActiveApp) {
+    if (!recipientRegistryAddress.value) return
+    _projects = await getProjects(
+      recipientRegistryAddress.value,
+      currentRound.value?.startTime.toSeconds(),
+      currentRound.value?.votingDeadline.toSeconds(),
+    )
+  } else {
+    const currentRoundAddress = currentRound.value?.fundingRoundAddress || ''
+    const network = currentRound.value?.network || ''
+    _projects = await getProjectsForStaticRound(currentRoundAddress, network)
+  }
+
   const userProjects: Project[] = _projects.filter(
     ({ address, requester }) =>
       isSameAddress(address, currentUser.value?.walletAddress as string) ||
diff --git a/vue-app/src/views/ProjectList.vue b/vue-app/src/views/ProjectList.vue
index d6345fb3b..8bc21b7c5 100644
--- a/vue-app/src/views/ProjectList.vue
+++ b/vue-app/src/views/ProjectList.vue
@@ -60,7 +60,7 @@
 import { ref, computed, onMounted } from 'vue'
 
 import { getCurrentRound, getRoundInfo } from '@/api/round'
-import { type Project, getProjects, getRecipientRegistryAddress } from '@/api/projects'
+import { type Project, getProjects, getRecipientRegistryAddress, getProjectsForStaticRound } from '@/api/projects'
 
 import CallToActionCard from '@/components/CallToActionCard.vue'
 import ProjectListItem from '@/components/ProjectListItem.vue'
@@ -70,11 +70,15 @@ import { useRoute } from 'vue-router'
 import { useAppStore, useUserStore } from '@/stores'
 import { storeToRefs } from 'pinia'
 import { DateTime } from 'luxon'
+import { isActiveApp } from '@/api/core'
+import { getSecondsFromNow } from '@/utils/dates'
 
 type ProjectRoundInfo = {
+  fundingRoundAddress: string
   recipientRegistryAddress: string
   startTime: number
   votingDeadline: number
+  network: string
 }
 
 const SHUFFLE_RANDOM_SEED = Math.random()
@@ -119,7 +123,10 @@ onMounted(async () => {
   try {
     roundAddress.value =
       (route.params.address as string) || currentRoundAddress.value || (await getCurrentRound()) || ''
-    const round = await loadProjectRoundInfo(roundAddress.value)
+
+    const round = isActiveApp
+      ? await loadProjectRoundInfo(roundAddress.value)
+      : await loadStaticRoundInfo(roundAddress.value)
     await loadProjects(round)
   } catch (err) {
     /* eslint-disable-next-line no-console */
@@ -148,11 +155,27 @@ async function loadProjectRoundInfo(roundAddress: string): Promise<ProjectRoundI
     recipientRegistryAddress = await getRecipientRegistryAddress(null)
   }
 
-  return { recipientRegistryAddress, startTime, votingDeadline }
+  return { recipientRegistryAddress, startTime, votingDeadline, fundingRoundAddress: roundAddress, network: '' }
+}
+
+/**
+ * Get the round information from static file rounds.json
+ * @param roundAddress The funding round address
+ * @returns The project round information
+ */
+async function loadStaticRoundInfo(roundAddress: string): Promise<ProjectRoundInfo> {
+  await appStore.loadClrFundInfo()
+  const network = currentRound.value?.network || ''
+  const recipientRegistryAddress = currentRound.value?.recipientRegistryAddress || ''
+  const startTime = getSecondsFromNow(currentRound.value?.startTime || DateTime.now())
+  const votingDeadline = getSecondsFromNow(currentRound.value?.votingDeadline || DateTime.now())
+  return { recipientRegistryAddress, startTime, votingDeadline, fundingRoundAddress: roundAddress, network }
 }
 
 async function loadProjects(round: ProjectRoundInfo) {
-  const _projects = await getProjects(round.recipientRegistryAddress, round.startTime, round.votingDeadline)
+  const _projects = isActiveApp
+    ? await getProjects(round.recipientRegistryAddress, round.startTime, round.votingDeadline)
+    : await getProjectsForStaticRound(roundAddress.value, round.network)
   const visibleProjects = _projects.filter(project => {
     return !project.isHidden && !project.isLocked
   })
diff --git a/vue-app/src/views/RoundList.vue b/vue-app/src/views/RoundList.vue
index 501f65678..eb1ac6273 100644
--- a/vue-app/src/views/RoundList.vue
+++ b/vue-app/src/views/RoundList.vue
@@ -41,12 +41,11 @@ import { onMounted, ref } from 'vue'
 import { type Round, getRounds } from '@/api/rounds'
 import Links from '@/components/Links.vue'
 import { DateTime } from 'luxon'
-import { clrfundContractAddress } from '@/api/core'
 
 const rounds = ref<Round[]>([])
 
 onMounted(async () => {
-  rounds.value = (await getRounds(clrfundContractAddress)).reverse()
+  rounds.value = await getRounds()
 })
 </script>