diff --git a/vue-app/src/api/round.ts b/vue-app/src/api/round.ts
index ac2aa5209..83a1b181a 100644
--- a/vue-app/src/api/round.ts
+++ b/vue-app/src/api/round.ts
@@ -12,6 +12,7 @@ import { isSameAddress } from '@/utils/accounts'
 export interface RoundInfo {
   fundingRoundAddress: string
   userRegistryAddress: string
+  recipientRegistryAddress: string
   maciAddress: string
   recipientTreeDepth: number
   maxContributors: number
@@ -54,10 +55,8 @@ export async function getCurrentRound(): Promise<string | null> {
     return null
   }
   const rounds = await getRounds()
-  // round.address is empty if the round is configured in VUE_APP_EXTRA_ROUNDS
-  const roundIndex = rounds.findIndex(
-    (round) =>
-      !!round.address && isSameAddress(round.address, fundingRoundAddress)
+  const roundIndex = rounds.findIndex((round) =>
+    isSameAddress(round.address, fundingRoundAddress)
   )
 
   if (roundIndex >= Number(process.env.VUE_APP_FIRST_ROUND || 0)) {
@@ -68,12 +67,22 @@ export async function getCurrentRound(): Promise<string | null> {
 
 //TODO: update to take factory address as a parameter, default to env. variable
 export async function getRoundInfo(
-  fundingRoundAddress: string
+  fundingRoundAddress: string,
+  cachedRound?: RoundInfo
 ): Promise<RoundInfo> {
+  if (
+    cachedRound &&
+    isSameAddress(fundingRoundAddress, cachedRound.fundingRoundAddress)
+  ) {
+    // the requested round matches the cached round, quick return
+    return cachedRound
+  }
+
   const fundingRound = new Contract(fundingRoundAddress, FundingRound, provider)
   const [
     maciAddress,
     nativeTokenAddress,
+    recipientRegistryAddress,
     userRegistryAddress,
     voiceCreditFactor,
     isFinalized,
@@ -81,6 +90,7 @@ export async function getRoundInfo(
   ] = await Promise.all([
     fundingRound.maci(),
     fundingRound.nativeToken(),
+    fundingRound.recipientRegistry(),
     fundingRound.userRegistry(),
     fundingRound.voiceCreditFactor(),
     fundingRound.isFinalized(),
@@ -159,6 +169,7 @@ export async function getRoundInfo(
 
   return {
     fundingRoundAddress,
+    recipientRegistryAddress,
     userRegistryAddress,
     maciAddress,
     recipientTreeDepth: maciTreeDepths.voteOptionTreeDepth,
diff --git a/vue-app/src/components/ProjectListItem.vue b/vue-app/src/components/ProjectListItem.vue
index a7325eff0..5d2d2cea7 100644
--- a/vue-app/src/components/ProjectListItem.vue
+++ b/vue-app/src/components/ProjectListItem.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="project-item">
     <div>
-      <links :to="{ name: 'project', params: { id: project.id } }">
+      <links :to="projectRoute">
         <div class="project-image">
           <img :src="projectImageUrl" :alt="project.name" />
           <div class="tag">{{ project.category }}</div>
@@ -9,18 +9,18 @@
       </links>
       <div class="project-info">
         <div class="project-name">
-          <links :to="{ name: 'project', params: { id: project.id } }">
+          <links :to="projectRoute">
             {{ project.name }}
           </links>
         </div>
-        <links :to="{ name: 'project', params: { id: project.id } }">
+        <links :to="projectRoute">
           <div class="project-description">{{ project.tagline }}</div>
         </links>
       </div>
     </div>
     <div class="buttons">
       <add-to-cart-button v-if="shouldShowCartInput" :project="project" />
-      <links :to="{ name: 'project', params: { id: project.id } }">
+      <links :to="projectRoute">
         <button class="more-btn">More</button>
       </links>
     </div>
@@ -36,6 +36,7 @@ import Links from '@/components/Links.vue'
 import { CartItem } from '@/api/contributions'
 import { Project } from '@/api/projects'
 import { markdown } from '@/utils/markdown'
+import { Route } from 'vue-router'
 
 @Component({
   components: {
@@ -46,6 +47,7 @@ import { markdown } from '@/utils/markdown'
 export default class ProjectListItem extends Vue {
   @Prop()
   project!: Project
+  @Prop({ default: '' }) roundAddress!: string
 
   get descriptionHtml(): string {
     return markdown.renderInline(this.project.description)
@@ -69,9 +71,26 @@ export default class ProjectListItem extends Vue {
     return index !== -1
   }
 
+  get isCurrentRound(): boolean {
+    const { currentRoundAddress } = this.$store.state
+    const roundAddress = this.roundAddress || currentRoundAddress
+    return this.$store.getters.isCurrentRound(roundAddress)
+  }
+
   get shouldShowCartInput(): boolean {
     const { isRoundContributionPhase, canUserReallocate } = this.$store.getters
-    return isRoundContributionPhase || canUserReallocate
+    return (
+      this.isCurrentRound && (isRoundContributionPhase || canUserReallocate)
+    )
+  }
+
+  get projectRoute(): Partial<Route> {
+    return this.$route.name === 'round'
+      ? {
+          name: 'round-project',
+          params: { address: this.roundAddress, id: this.project.id },
+        }
+      : { name: 'project', params: { id: this.project.id } }
   }
 }
 </script>
diff --git a/vue-app/src/components/ProjectProfile.vue b/vue-app/src/components/ProjectProfile.vue
index e88a9eb44..5a05a59be 100644
--- a/vue-app/src/components/ProjectProfile.vue
+++ b/vue-app/src/components/ProjectProfile.vue
@@ -159,6 +159,7 @@ export default class ProjectProfile extends Vue {
 
   hasContributeBtn(): boolean {
     return (
+      this.isCurrentRound &&
       this.$store.state.currentRound &&
       this.project !== null &&
       this.project.index !== 0
@@ -200,9 +201,17 @@ export default class ProjectProfile extends Vue {
     return this.ens || this.project.address
   }
 
+  get isCurrentRound(): boolean {
+    const roundAddress =
+      this.$route.params.address || this.$store.state.currentRoundAddress
+    return this.$store.getters.isCurrentRound(roundAddress)
+  }
+
   get shouldShowCartInput(): boolean {
     const { isRoundContributionPhase, canUserReallocate } = this.$store.getters
-    return isRoundContributionPhase || canUserReallocate
+    return (
+      this.isCurrentRound && (isRoundContributionPhase || canUserReallocate)
+    )
   }
 }
 </script>
diff --git a/vue-app/src/components/RoundInformation.vue b/vue-app/src/components/RoundInformation.vue
index 127e39b9b..dc10a64c6 100644
--- a/vue-app/src/components/RoundInformation.vue
+++ b/vue-app/src/components/RoundInformation.vue
@@ -4,7 +4,7 @@
       <div class="image-wrapper">
         <image-responsive title="docking" height="100%" />
       </div>
-      <template v-if="currentRound">
+      <template v-if="roundInfo">
         <div class="round">
           <div class="round-title-bar">
             <h2 class="round-title">{{ $store.getters.operator }}</h2>
@@ -15,7 +15,7 @@
               <template slot="popover">
                 <div class="contract-popover">
                   <div class="contract-address">
-                    {{ currentRound.fundingRoundAddress }}
+                    {{ roundInfo.fundingRoundAddress }}
                   </div>
                   <links :to="blockExplorer.url"
                     >View on {{ blockExplorer.label }}</links
@@ -24,9 +24,14 @@
               </template>
             </v-popover>
           </div>
+          <div class="status" v-if="isRoundCancelled">
+            <div class="circle closed" />
+            Cancelled
+          </div>
           <div
             class="status"
-            v-if="
+            v-else-if="
+              isCurrentRound &&
               !$store.getters.isRoundFinalized &&
               !$store.getters.isRoundTallying
             "
@@ -39,159 +44,163 @@
             Closed
           </div>
         </div>
-        <div v-if="isMaxMessagesReached" class="round-notice hidden">
-          <span class="bold-all-caps">
-            <p>The round is officially closed</p>
-          </span>
-          <p>
-            It's now too late to contribute or reallocate your donations! Due to
-            the community's generosity and some technical constraints we had to
-            close the round earlier than expected. You can still help by
-            donating to the matching pool.
-          </p>
-          <div class="dismiss-btn" @click="toggleNotice">Great!</div>
-        </div>
-        <div class="round-info-item" v-if="$store.getters.isRoundJoinOnlyPhase">
-          <div class="full-width">
-            <div class="round-info-item-top">
-              <div class="round-info-title">⏱️ Round opening</div>
-            </div>
+        <template v-if="isCurrentRound">
+          <div v-if="isMaxMessagesReached" class="round-notice hidden">
+            <span class="bold-all-caps">
+              <p>The round is officially closed</p>
+            </span>
+            <p>
+              It's now too late to contribute or reallocate your donations! Due
+              to the community's generosity and some technical constraints we
+              had to close the round earlier than expected. You can still help
+              by donating to the matching pool.
+            </p>
+            <div class="dismiss-btn" @click="toggleNotice">Great!</div>
           </div>
-          <div class="round-info-value">
-            <time-left :date="$store.getters.recipientJoinDeadline" />
-          </div>
-        </div>
-        <div
-          v-else-if="
-            $store.getters.isRoundContributionPhase &&
-            !$store.getters.hasUserContributed
-          "
-          class="round-info-item"
-        >
-          <div class="full-width">
-            <div class="round-info-item-top">
-              <div class="round-info-title">Time left to contribute</div>
-              <img
-                v-tooltip="{
-                  content:
-                    'During this phase, you can contribute to your favorite projects.',
-                  trigger: 'hover click',
-                }"
-                width="16px"
-                src="@/assets/info.svg"
-              />
+          <div class="round-info-item" v-if="isRoundJoinOnlyPhase">
+            <div class="full-width">
+              <div class="round-info-item-top">
+                <div class="round-info-title">⏱️ Round opening</div>
+              </div>
+            </div>
+            <div class="round-info-value">
+              <time-left :date="$store.getters.recipientJoinDeadline" />
             </div>
           </div>
           <div
-            class="round-info-value"
-            :title="
-              'Contribution Deadline: ' +
-              formatDate(currentRound.signUpDeadline)
+            v-else-if="
+              $store.getters.isRoundContributionPhase &&
+              !$store.getters.hasUserContributed
             "
+            class="round-info-item"
           >
-            <time-left :date="$store.state.currentRound.signUpDeadline" />
-          </div>
-        </div>
-        <div
-          v-else-if="
-            $store.getters.isRoundReallocationPhase ||
-            $store.getters.canUserReallocate
-          "
-          class="round-info-item"
-        >
-          <div class="full-width">
-            <div class="round-info-item-top">
-              <div class="round-info-title">
-                {{
-                  $store.getters.hasUserContributed
-                    ? 'Time left to reallocate'
-                    : 'Round status'
-                }}
+            <div class="full-width">
+              <div class="round-info-item-top">
+                <div class="round-info-title">Time left to contribute</div>
+                <img
+                  v-tooltip="{
+                    content:
+                      'During this phase, you can contribute to your favorite projects.',
+                    trigger: 'hover click',
+                  }"
+                  width="16px"
+                  src="@/assets/info.svg"
+                />
               </div>
-              <img
-                v-if="$store.getters.hasUserContributed"
-                v-tooltip="{
-                  content: `During this phase, you can add/remove projects and change your contribution amounts. You can't make a contribution or increase your overall total.`,
-                  trigger: 'hover click',
-                }"
-                width="16px"
-                src="@/assets/info.svg"
-              />
-              <img
-                v-else-if="!this.$store.state.currentUser"
-                v-tooltip="{
-                  content: `If you've contributed, you can add/remove projects and change your contribution amounts. Please connect your wallet.`,
-                  trigger: 'hover click',
-                }"
-                width="16px"
-                src="@/assets/info.svg"
-              />
-              <img
-                v-else
-                v-tooltip="{
-                  content: `This round has closed for new contributions.`,
-                  trigger: 'hover click',
-                }"
-                width="16px"
-                src="@/assets/info.svg"
-              />
-            </div>
-            <div class="message" v-if="!$store.getters.hasUserContributed">
-              Closed for contributions
             </div>
             <div
-              v-else
               class="round-info-value"
               :title="
-                'Reallocation Deadline: ' +
-                formatDate(currentRound.votingDeadline)
+                'Contribution Deadline: ' + formatDate(roundInfo.signUpDeadline)
               "
             >
-              <div class="round-info-value">
-                <time-left :date="$store.state.currentRound.votingDeadline" />
-              </div>
+              <time-left :date="roundInfo.signUpDeadline" />
             </div>
           </div>
-        </div>
-        <div v-else-if="$store.getters.isRoundTallying" class="round-info-item">
-          <div class="full-width">
-            <div class="round-info-item-top">
-              <div class="round-info-title">Round status</div>
-              <img
-                v-tooltip="{
-                  content: `Our smart contracts are busy figuring out final contribution amounts.`,
-                  trigger: 'hover click',
-                }"
-                width="16px"
-                src="@/assets/info.svg"
-              />
-            </div>
-            <div class="round-info-value">
-              <div class="message">Tallying all contributions</div>
+          <div
+            v-else-if="
+              $store.getters.isRoundReallocationPhase ||
+              $store.getters.canUserReallocate
+            "
+            class="round-info-item"
+          >
+            <div class="full-width">
+              <div class="round-info-item-top">
+                <div class="round-info-title">
+                  {{
+                    $store.getters.hasUserContributed
+                      ? 'Time left to reallocate'
+                      : 'Round status'
+                  }}
+                </div>
+                <img
+                  v-if="$store.getters.hasUserContributed"
+                  v-tooltip="{
+                    content: `During this phase, you can add/remove projects and change your contribution amounts. You can't make a contribution or increase your overall total.`,
+                    trigger: 'hover click',
+                  }"
+                  width="16px"
+                  src="@/assets/info.svg"
+                />
+                <img
+                  v-else-if="!$store.state.currentUser"
+                  v-tooltip="{
+                    content: `If you've contributed, you can add/remove projects and change your contribution amounts. Please connect your wallet.`,
+                    trigger: 'hover click',
+                  }"
+                  width="16px"
+                  src="@/assets/info.svg"
+                />
+                <img
+                  v-else
+                  v-tooltip="{
+                    content: `This round has closed for new contributions.`,
+                    trigger: 'hover click',
+                  }"
+                  width="16px"
+                  src="@/assets/info.svg"
+                />
+              </div>
+              <div class="message" v-if="!$store.getters.hasUserContributed">
+                Closed for contributions
+              </div>
+              <div
+                v-else
+                class="round-info-value"
+                :title="
+                  'Reallocation Deadline: ' +
+                  formatDate(roundInfo.votingDeadline)
+                "
+              >
+                <div class="round-info-value">
+                  <time-left :date="roundInfo.votingDeadline" />
+                </div>
+              </div>
             </div>
           </div>
-        </div>
-        <div
-          v-else-if="$store.getters.isRoundFinalized"
-          class="round-info-item"
-        >
-          <div class="full-width">
-            <div class="round-info-item-top">
-              <div class="round-info-title">Round status</div>
-              <img
-                v-tooltip="{
-                  content: `If you're a project owner you can now claim your funds!`,
-                  trigger: 'hover click',
-                }"
-                width="16px"
-                src="@/assets/info.svg"
-              />
+          <div
+            v-else-if="$store.getters.isRoundTallying"
+            class="round-info-item"
+          >
+            <div class="full-width">
+              <div class="round-info-item-top">
+                <div class="round-info-title">Round status</div>
+                <img
+                  v-tooltip="{
+                    content: `Our smart contracts are busy figuring out final contribution amounts.`,
+                    trigger: 'hover click',
+                  }"
+                  width="16px"
+                  src="@/assets/info.svg"
+                />
+              </div>
+              <div class="round-info-value">
+                <div class="message">Tallying all contributions</div>
+              </div>
             </div>
-            <div class="round-info-value">
-              <div class="message">Contributions are ready to claim 🎉</div>
+          </div>
+          <div
+            v-else-if="$store.getters.isRoundFinalized"
+            class="round-info-item"
+          >
+            <div class="full-width">
+              <div class="round-info-item-top">
+                <div class="round-info-title">Round status</div>
+                <img
+                  v-tooltip="{
+                    content: `If you're a project owner you can now claim your funds!`,
+                    trigger: 'hover click',
+                  }"
+                  width="16px"
+                  src="@/assets/info.svg"
+                />
+              </div>
+              <div class="round-info-value">
+                <div class="message">Contributions are ready to claim 🎉</div>
+              </div>
             </div>
           </div>
-        </div>
+        </template>
         <div class="round-value-info">
           <div class="round-value-info-item">
             <div class="full-width">
@@ -208,7 +217,7 @@
               </div>
               <div class="round-info-value">
                 <div class="value large">{{ formatTotalInRound }}</div>
-                <div class="unit">{{ currentRound.nativeTokenSymbol }}</div>
+                <div class="unit">{{ roundInfo.nativeTokenSymbol }}</div>
               </div>
             </div>
           </div>
@@ -226,8 +235,10 @@
               />
               <div
                 v-if="
+                  isCurrentRound &&
                   !$store.getters.isRoundFinalized &&
-                  !$store.getters.isRoundTallying
+                  !$store.getters.isRoundTallying &&
+                  !isRoundCancelled
                 "
                 v-tooltip="'Add matching funds'"
                 class="add-link"
@@ -240,9 +251,9 @@
 
             <div class="round-info-value">
               <div class="value">
-                {{ formatAmount(currentRound.matchingPool) }}
+                {{ formatAmount(roundInfo.matchingPool) }}
               </div>
-              <div class="unit">{{ currentRound.nativeTokenSymbol }}</div>
+              <div class="unit">{{ roundInfo.nativeTokenSymbol }}</div>
             </div>
           </div>
           <div class="round-info-sub-item">
@@ -250,9 +261,9 @@
               <div class="round-info-title">Contributions total</div>
               <div class="round-info-value">
                 <div class="value">
-                  {{ formatAmount(currentRound.contributions) }}
+                  {{ formatAmount(roundInfo.contributions) }}
                 </div>
-                <div class="unit">{{ currentRound.nativeTokenSymbol }}</div>
+                <div class="unit">{{ roundInfo.nativeTokenSymbol }}</div>
               </div>
             </div>
           </div>
@@ -260,16 +271,16 @@
             <div>
               <div class="round-info-title">Contributors</div>
               <div class="round-info-value">
-                <div class="value">{{ currentRound.contributors }}</div>
+                <div class="value">{{ roundInfo.contributors }}</div>
                 <div class="unit">
-                  legend{{ currentRound.contributors !== 1 ? 's' : '' }}
+                  legend{{ roundInfo.contributors !== 1 ? 's' : '' }}
                 </div>
               </div>
             </div>
           </div>
         </div>
       </template>
-      <template v-else-if="!currentRound && !isLoading">
+      <template v-else-if="!roundInfo && !isLoading">
         <div class="round-info-item">
           <div class="full-width">
             <div class="round-info-item-top">
@@ -288,12 +299,12 @@
 
 <script lang="ts">
 import Vue from 'vue'
+import { Watch } from 'vue-property-decorator'
 import Component from 'vue-class-component'
 import { BigNumber, FixedNumber } from 'ethers'
 import { DateTime } from 'luxon'
 
-import { RoundInfo, getCurrentRound } from '@/api/round'
-import { Project, getRecipientRegistryAddress } from '@/api/projects'
+import { RoundInfo, getRoundInfo } from '@/api/round'
 import { chain } from '@/api/core'
 
 import { lsGet, lsSet } from '@/utils/localStorage'
@@ -306,8 +317,6 @@ import TimeLeft from '@/components/TimeLeft.vue'
 import Links from '@/components/Links.vue'
 import ImageResponsive from '@/components/ImageResponsive.vue'
 import { LOAD_ROUND_INFO } from '@/store/action-types'
-import { SET_RECIPIENT_REGISTRY_ADDRESS } from '@/store/mutation-types'
-import { Watch } from 'vue-property-decorator'
 
 @Component({
   components: {
@@ -320,21 +329,11 @@ import { Watch } from 'vue-property-decorator'
   },
 })
 export default class RoundInformation extends Vue {
-  projects: Project[] = []
-  search = ''
   isLoading = true
+  roundInfo: RoundInfo | null = null
 
   async created() {
-    //TODO: update to take factory address as a parameter, default to env. variable
-    const roundAddress =
-      this.$route.params.address ||
-      this.$store.state.currentRoundAddress ||
-      (await getCurrentRound())
-
-    if (this.$store.state.recipientRegistryAddress === null) {
-      const registryAddress = await getRecipientRegistryAddress(roundAddress)
-      this.$store.commit(SET_RECIPIENT_REGISTRY_ADDRESS, registryAddress)
-    }
+    await this.loadRoundInfo()
 
     // Message cap notice defaults with `hidden` class
     // If it hasn't been dismissed yet, this class is toggled off until dismissed
@@ -344,23 +343,39 @@ export default class RoundInformation extends Vue {
     }
   }
 
-  @Watch('currentRound')
-  stopLoading() {
-    this.isLoading = false
-  }
-
-  get currentRound(): RoundInfo | null {
-    return this.$store.state.currentRound
+  get isRoundCancelled(): boolean {
+    return this.$store.getters.isRoundCancelled(this.roundInfo)
   }
 
   get isMaxMessagesReached(): boolean {
-    return this.$store.getters.isMessageLimitReached
+    if (!this.roundInfo) {
+      return true
+    }
+
+    return this.roundInfo.maxMessages <= this.roundInfo.messages
   }
 
   // Gets local storage key to look up if user has dismissed round notice (if message cap exceeded)
   // Key specific to each round via round address
   get lsIsNoticeHiddenKey(): string {
-    return `${this.currentRound?.fundingRoundAddress}.is-notice-hidden`
+    return `${this.roundInfo?.fundingRoundAddress}.is-notice-hidden`
+  }
+
+  get roundAddress(): string | null {
+    return this.$route.params?.address || this.$store.state.currentRoundAddress
+  }
+
+  @Watch('roundAddress')
+  async loadRoundInfo() {
+    this.roundInfo = null
+    this.isLoading = true
+    if (this.roundAddress) {
+      this.roundInfo = await getRoundInfo(
+        this.roundAddress,
+        this.$store.state.currentRound
+      )
+    }
+    this.isLoading = false
   }
 
   toggleNotice() {
@@ -372,14 +387,25 @@ export default class RoundInformation extends Vue {
   }
 
   get formatTotalInRound(): string {
-    const { currentRound } = this.$store.state
-    const totalInRound = currentRound.contributions.addUnsafe(
-      currentRound.matchingPool
-    )
+    if (!this.roundInfo) {
+      return ''
+    }
+
+    const { contributions, matchingPool } = this.roundInfo
+    const totalInRound = contributions.addUnsafe(matchingPool)
 
     return this.formatAmount(totalInRound)
   }
 
+  get isCurrentRound(): boolean {
+    const roundAddress = this.roundInfo?.fundingRoundAddress || ''
+    return this.$store.getters.isCurrentRound(roundAddress)
+  }
+
+  get isRoundJoinOnlyPhase(): boolean {
+    return this.isCurrentRound && this.$store.getters.isRoundJoinOnlyPhase
+  }
+
   formatIntegerPart(value: FixedNumber): string {
     if (value._value === '0.0') {
       return '0'
@@ -396,9 +422,8 @@ export default class RoundInformation extends Vue {
     return value.toLocaleString(DateTime.DATETIME_SHORT) || ''
   }
 
-  formatAmount(value: BigNumber): string {
-    const { nativeTokenDecimals } = this.$store.state.currentRound
-    return formatAmount(value, nativeTokenDecimals, 4)
+  formatAmount(value: BigNumber | FixedNumber | string): string {
+    return formatAmount(value, this.roundInfo?.nativeTokenDecimals, 4)
   }
 
   addMatchingFunds(): void {
@@ -436,7 +461,7 @@ export default class RoundInformation extends Vue {
   get blockExplorer(): { label: string; url: string } {
     return {
       label: chain.explorerLabel,
-      url: `${chain.explorer}/address/${this.currentRound?.fundingRoundAddress}`,
+      url: `${chain.explorer}/address/${this.roundInfo?.fundingRoundAddress}`,
     }
   }
 }
diff --git a/vue-app/src/router/index.ts b/vue-app/src/router/index.ts
index 996557c3d..0e2a13229 100644
--- a/vue-app/src/router/index.ts
+++ b/vue-app/src/router/index.ts
@@ -7,6 +7,7 @@ import ProjectList from '../views/ProjectList.vue'
 import ProjectView from '../views/Project.vue'
 import ProjectAdded from '../views/ProjectAdded.vue'
 import RoundInformation from '../views/RoundInformation.vue'
+import RoundList from '../views/RoundList.vue'
 import VerifyLanding from '../views/VerifyLanding.vue'
 import About from '../views/About.vue'
 import AboutSybilResistance from '../views/AboutSybilResistance.vue'
@@ -46,10 +47,15 @@ const routes = [
     },
   },
   {
-    path: '/project/:id',
+    path: '/projects/:id',
     name: 'project',
     component: ProjectView,
   },
+  {
+    path: '/rounds/:address/projects/:id?',
+    name: 'round-project',
+    component: ProjectView,
+  },
   {
     path: '/round-information',
     name: 'round-information',
@@ -59,13 +65,21 @@ const routes = [
     },
   },
   {
-    path: '/round/:address',
+    path: '/rounds/:address',
     name: 'round',
     component: ProjectList,
     meta: {
       title: 'Project List',
     },
   },
+  {
+    path: '/rounds',
+    name: 'rounds',
+    component: RoundList,
+    meta: {
+      title: 'Round List',
+    },
+  },
   {
     path: '/about',
     name: 'about',
diff --git a/vue-app/src/store/getters.ts b/vue-app/src/store/getters.ts
index 40159f718..6dda075fa 100644
--- a/vue-app/src/store/getters.ts
+++ b/vue-app/src/store/getters.ts
@@ -120,6 +120,12 @@ const getters = {
       state.currentRound.status === RoundStatus.Finalized
     )
   },
+  isRoundCancelled:
+    (state: RootState) =>
+    (roundInfo?: RoundInfo): boolean => {
+      const round = roundInfo || state.currentRound
+      return !!round && round.status === RoundStatus.Cancelled
+    },
   hasContributionPhaseEnded: (state: RootState, getters): boolean => {
     return (
       !!state.currentRound &&
@@ -239,6 +245,12 @@ const getters = {
       return factory.userRegistryAddress
     }
   },
+  isCurrentRound:
+    (state: RootState) =>
+    (roundAddress: string): boolean => {
+      const currentRoundAddress = state.currentRoundAddress || ''
+      return isSameAddress(roundAddress, currentRoundAddress)
+    },
   operator: (): string => {
     return operator
   },
diff --git a/vue-app/src/utils/accounts.ts b/vue-app/src/utils/accounts.ts
index d6db02829..fb21c5e70 100644
--- a/vue-app/src/utils/accounts.ts
+++ b/vue-app/src/utils/accounts.ts
@@ -3,7 +3,12 @@ import { mainnetProvider } from '@/api/core'
 import { isAddress } from '@ethersproject/address'
 
 export function isSameAddress(address1: string, address2: string): boolean {
-  return ethers.utils.getAddress(address1) === ethers.utils.getAddress(address2)
+  // check for empty address to avoid getAddress() from throwing
+  return (
+    !!address1 &&
+    !!address2 &&
+    ethers.utils.getAddress(address1) === ethers.utils.getAddress(address2)
+  )
 }
 
 // Looks up possible ENS for given 0x address
diff --git a/vue-app/src/views/Project.vue b/vue-app/src/views/Project.vue
index 2ab8651de..f476c11bd 100644
--- a/vue-app/src/views/Project.vue
+++ b/vue-app/src/views/Project.vue
@@ -46,7 +46,6 @@ import ProjectProfile from '@/components/ProjectProfile.vue'
 import AddToCartButton from '@/components/AddToCartButton.vue'
 import LinkBox from '@/components/LinkBox.vue'
 import ClaimButton from '@/components/ClaimButton.vue'
-import { SET_RECIPIENT_REGISTRY_ADDRESS } from '@/store/mutation-types'
 import { markdown } from '@/utils/markdown'
 
 @Component({
@@ -62,19 +61,20 @@ export default class ProjectView extends Vue {
   isLoading = true
 
   async created() {
+    if (!!this.$route.params.address && !this.$route.params.id) {
+      // missing project id, redirect back to rounds
+      this.$router.push({ name: 'rounds', params: this.$route.params })
+      return
+    }
+
     //TODO: update to take factory address as a parameter, default to env. variable
-    const roundAddress =
+    const currentRoundAddress =
       this.$store.state.currentRoundAddress || (await getCurrentRound())
 
-    if (this.$store.state.recipientRegistryAddress === null) {
-      const registryAddress = await getRecipientRegistryAddress(roundAddress)
-      this.$store.commit(SET_RECIPIENT_REGISTRY_ADDRESS, registryAddress)
-    }
+    const roundAddress = this.$route.params.address || currentRoundAddress
 
-    const project = await getProject(
-      this.$store.state.recipientRegistryAddress,
-      this.$route.params.id
-    )
+    const registryAddress = await getRecipientRegistryAddress(roundAddress)
+    const project = await getProject(registryAddress, this.$route.params.id)
     if (project === null || project.isHidden) {
       // Project not found
       this.$router.push({ name: 'projects' })
@@ -89,16 +89,22 @@ export default class ProjectView extends Vue {
     return this.$store.state.showCartPanel
   }
 
+  get isCurrentRound(): boolean {
+    const { currentRoundAddress } = this.$store.state
+    const roundAddress = this.$route.params.address || currentRoundAddress
+    return this.$store.getters.isCurrentRound(roundAddress)
+  }
+
   get shouldShowCartInput(): boolean {
     const { isRoundContributionPhase, canUserReallocate } = this.$store.getters
-    return isRoundContributionPhase || canUserReallocate
+    return (
+      (this.isCurrentRound && isRoundContributionPhase) || canUserReallocate
+    )
   }
 
   hasContributeBtn(): boolean {
     return (
-      this.$store.state.currentRound &&
-      this.project !== null &&
-      this.project.index !== 0
+      this.isCurrentRound && this.project !== null && this.project.index !== 0
     )
   }
 
diff --git a/vue-app/src/views/ProjectList.vue b/vue-app/src/views/ProjectList.vue
index 7aa7ce2f2..d29284ee2 100644
--- a/vue-app/src/views/ProjectList.vue
+++ b/vue-app/src/views/ProjectList.vue
@@ -52,6 +52,7 @@
           v-for="project in filteredProjects"
           :project="project"
           :key="project.id"
+          :roundAddress="roundAddress"
         >
         </project-list-item>
       </div>
@@ -71,21 +72,14 @@ import Component from 'vue-class-component'
 import { FixedNumber } from 'ethers'
 import { DateTime } from 'luxon'
 
-import { RoundInfo, getCurrentRound, TimeLeft } from '@/api/round'
-import {
-  Project,
-  getRecipientRegistryAddress,
-  getProjects,
-} from '@/api/projects'
-
-import { getTimeLeft } from '@/utils/dates'
+import { getCurrentRound, getRoundInfo } from '@/api/round'
+import { Project, getProjects } from '@/api/projects'
 
 import CallToActionCard from '@/components/CallToActionCard.vue'
 import CartWidget from '@/components/CartWidget.vue'
 import ProjectListItem from '@/components/ProjectListItem.vue'
 import FilterDropdown from '@/components/FilterDropdown.vue'
 import Links from '@/components/Links.vue'
-import { SET_RECIPIENT_REGISTRY_ADDRESS } from '@/store/mutation-types'
 
 const SHUFFLE_RANDOM_SEED = Math.random()
 
@@ -119,6 +113,7 @@ export default class ProjectList extends Vue {
   isLoading = true
   categories: string[] = ['content', 'research', 'tooling', 'data']
   selectedCategories: string[] = []
+  roundAddress = ''
 
   get projectsByCategoriesSelected(): Project[] {
     return this.selectedCategories.length === 0
@@ -132,24 +127,24 @@ export default class ProjectList extends Vue {
 
   async created() {
     //TODO: update to take factory address as a parameter, default to env. variable
-    const roundAddress =
+    this.roundAddress =
       this.$route.params.address ||
       this.$store.state.currentRoundAddress ||
       (await getCurrentRound())
 
-    if (this.$store.state.recipientRegistryAddress === null) {
-      const registryAddress = await getRecipientRegistryAddress(roundAddress)
-      this.$store.commit(SET_RECIPIENT_REGISTRY_ADDRESS, registryAddress)
-    }
-    await this.loadProjects()
+    await this.loadProjects(this.roundAddress)
     this.isLoading = false
   }
 
-  private async loadProjects() {
+  private async loadProjects(roundAddress: string) {
+    const round = await getRoundInfo(
+      roundAddress,
+      this.$store.state.currentRound
+    )
     const projects = await getProjects(
-      this.$store.state.recipientRegistryAddress,
-      this.currentRound?.startTime.toSeconds(),
-      this.currentRound?.votingDeadline.toSeconds()
+      round.recipientRegistryAddress,
+      round.startTime.toSeconds(),
+      round.votingDeadline.toSeconds()
     )
     const visibleProjects = projects.filter((project) => {
       return !project.isHidden && !project.isLocked
@@ -158,10 +153,6 @@ export default class ProjectList extends Vue {
     this.projects = visibleProjects
   }
 
-  get currentRound(): RoundInfo | null {
-    return this.$store.state.currentRound
-  }
-
   formatIntegerPart(value: FixedNumber): string {
     if (value._value === '0.0') {
       return '0'
@@ -178,14 +169,6 @@ export default class ProjectList extends Vue {
     return value.toLocaleString(DateTime.DATETIME_SHORT) || ''
   }
 
-  get contributionTimeLeft(): TimeLeft {
-    return getTimeLeft(this.$store.state.currentRound.signUpDeadline)
-  }
-
-  get reallocationTimeLeft(): TimeLeft {
-    return getTimeLeft(this.$store.state.currentRound.votingDeadline)
-  }
-
   get filteredProjects(): Project[] {
     return this.projectsByCategoriesSelected.filter((project: Project) => {
       if (!this.search) {