diff --git a/src/App.vue b/src/App.vue
index 8d1816ed..e02f4223 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,8 +1,8 @@
 <template>
   <v-app id="app">
       <Navbar></Navbar>
-
-      <v-container class="full-height-content">
+      <router-view v-if="customLayout"/>
+      <v-container v-else class="full-height-content">
         <v-row >
           <v-col cols="1"></v-col>
           <v-col cols="10">
@@ -11,9 +11,7 @@
           <v-col cols="1"></v-col>
         </v-row>
       </v-container>
-
-      <Foot></Foot>
-
+      <Foot :class="{'tall-footer': customLayout}"></Foot>
       <Interval
         v-if="this.$store.getters.isLoggedIn && !this.$store.getters.currentUser.verified"
         :callback="checkVerified"
@@ -34,6 +32,11 @@ export default {
     Foot,
     Interval
   },
+  computed: {
+    customLayout: function () {
+      return this.$route.meta.customLayout
+    }
+  },
   methods: {
     checkVerified () {
       this.$api
@@ -51,4 +54,8 @@ export default {
   .full-height-content {
     height: 100%
   }
+
+.tall-footer.footer {
+  height: 100%;
+}
 </style>
diff --git a/src/backend/api.js b/src/backend/api.js
index 3b49ade2..8efe1019 100644
--- a/src/backend/api.js
+++ b/src/backend/api.js
@@ -52,3 +52,14 @@ export const updateLogo = async ({ file, fileName, wikiId }) => {
 export const updateSetting = async (setting, payload) => axios.post(`/wiki/setting/${setting}/update`, { ...payload, setting })
 export const updateSkin = async payload => updateSetting('wgDefaultSkin', payload)
 export const wikiDetails = async payload => (await axios.post('/wiki/details', payload)).data.data
+export const wikiDiscovery = async ({ sort, direction, active, currentPage, resultsPerPage }) => {
+  return (await axios.get('/wiki', {
+    params: {
+      sort: sort,
+      direction: direction,
+      is_active: active,
+      page: currentPage,
+      per_page: resultsPerPage
+    }
+  })).data
+}
diff --git a/src/backend/mocks/default_handlers.js b/src/backend/mocks/default_handlers.js
index 1b94e12f..bd09c90a 100644
--- a/src/backend/mocks/default_handlers.js
+++ b/src/backend/mocks/default_handlers.js
@@ -50,6 +50,83 @@ const removeWiki = wikiIndex => {
   localStorage.setItem('msw-myWikis', JSON.stringify(myWikis))
 }
 
+const wikiDiscovery = (referrer, params) => {
+  const pseudorandom = {
+    seed: 1,
+    next: function () {
+      const x = Math.sin(this.seed++) * 10000
+      return x - Math.floor(x)
+    }
+  }
+
+  const names = [
+    'Wikibase Name',
+    'A Very Long Wikibase Name'
+  ]
+
+  let wikis = [...Array(75).keys()].map((id) => {
+    const wiki = {
+      id: id,
+      domain: id + '-wikibase.wbaas.localhost',
+      sitename: id + ' - ' + names[id % names.length],
+      wiki_site_stats: null,
+      logo_url: null
+    }
+
+    if (pseudorandom.next() >= 0.1) {
+      wiki.wiki_site_stats = {
+        pages: Math.ceil(pseudorandom.next() * 250)
+      }
+    }
+
+    if (pseudorandom.next() >= 0.5) {
+      wiki.logo_url = new URL(referrer).origin + '/favicon.ico'
+    }
+    return wiki
+  })
+
+  if (parseInt(params.get('is_active'))) {
+    wikis = wikis.filter((wiki) => {
+      const stats = wiki.wiki_site_stats
+      return stats && stats.pages > 1
+    })
+  }
+
+  if (params.get('sort') === 'sitename') {
+    wikis = wikis.sort((a, b) => {
+      let sort = a.sitename.localeCompare(b.sitename, 'en', { numeric: true })
+      if (params.get('direction') === 'desc') {
+        sort *= -1
+      }
+      return sort
+    })
+  }
+
+  if (params.get('sort') === 'pages') {
+    wikis = wikis.sort((a, b) => {
+      const aPages = a.wiki_site_stats ? a.wiki_site_stats.pages : 0
+      const bPages = b.wiki_site_stats ? b.wiki_site_stats.pages : 0
+      if (params.get('direction') === 'desc') {
+        return bPages - aPages
+      }
+      return aPages - bPages
+    })
+  }
+
+  const currentPage = parseInt(params.get('page'))
+  const resultsPerPage = parseInt(params.get('per_page'))
+  const start = (currentPage - 1) * resultsPerPage
+  const end = start + resultsPerPage
+
+  return {
+    data: wikis.slice(start, end),
+    meta: {
+      last_page: Math.ceil(wikis.length / resultsPerPage),
+      total: wikis.length
+    }
+  }
+}
+
 export const handlers = [
   /* User endpoints */
   rest.post(/\/auth\/login$/, (req, res, ctx) => {
@@ -108,5 +185,8 @@ export const handlers = [
       return res(ctx.status(404))
     }
     return res(ctx.json({ data: wikiDetails }), ctx.status(200))
+  }),
+  rest.get(/\/wiki$/, (req, res, ctx) => {
+    return res(ctx.json(wikiDiscovery(req.referrer, req.url.searchParams)))
   })
 ]
diff --git a/src/components/Layout/Foot.vue b/src/components/Layout/Foot.vue
index dd5ec791..a873fff0 100644
--- a/src/components/Layout/Foot.vue
+++ b/src/components/Layout/Foot.vue
@@ -1,5 +1,5 @@
 <template>
-  <footer>
+  <footer class="footer">
   <v-footer color="primary lighten-1">
     <v-container>
     <v-row dense>
@@ -7,6 +7,7 @@
     <v-col cols="10">
       <ul class="footer-list">
           <li><a target="_blank" rel="noopener noreferrer" href="https://wikiba.se/about-us/">About</a></li>
+          <li><router-link to="/discovery">Discovery</router-link></li>
           <li><a target="_blank" rel="noopener noreferrer" href="https://www.mediawiki.org/wiki/Wikibase/Wikibase.cloud">Documentation</a></li>
           <li><a target="_blank" rel="noopener noreferrer" href="https://github.com/wbstack">Github</a></li>
           <li><router-link to="/privacy-policy">Privacy Policy</router-link></li>
@@ -39,5 +40,10 @@ export default {
   .white-footer-links a{
     color: white !important;
   }
-
+  .footer {
+    height: auto;
+  }
+  .v-footer, .container {
+    height: 100%;
+  }
 </style>
diff --git a/src/components/Layout/Navbar.vue b/src/components/Layout/Navbar.vue
index da481f48..9f075e4e 100644
--- a/src/components/Layout/Navbar.vue
+++ b/src/components/Layout/Navbar.vue
@@ -66,6 +66,9 @@ export default {
 </script>
 
 <style scoped>
+.v-toolbar {
+  max-height: 64px;
+}
 .no-button-pointer-events{
   pointer-events: none
 }
diff --git a/src/components/Pages/Discovery/Components/DiscoveryCard.vue b/src/components/Pages/Discovery/Components/DiscoveryCard.vue
new file mode 100644
index 00000000..7b8c0aa4
--- /dev/null
+++ b/src/components/Pages/Discovery/Components/DiscoveryCard.vue
@@ -0,0 +1,74 @@
+<template>
+  <v-card @click="goToWiki" @keyup.enter="goToWiki">
+    <v-container class="content">
+      <v-row no-gutters>
+        <v-col class="flex-grow-0">
+          <v-avatar rounded :color="color">
+            <img v-if="logo" :src="logo.href">
+            <span v-else class="white--text">{{character}}</span>
+          </v-avatar>
+        </v-col>
+        <v-col class="details">
+          <div class="text-h5 font-weight-regular">{{name}}</div>
+          <div v-if="stats" class="text-body-2 pages">No. of pages: {{pages}}</div>
+          <div v-else class="text-body-2 pages">No. of pages: <i>currently unavailable</i></div>
+        </v-col>
+      </v-row>
+    </v-container>
+  </v-card>
+</template>
+
+<script>
+export default {
+  name: 'DiscoveryCard',
+  props: {
+    name: {
+      type: String,
+      required: true
+    },
+    url: {
+      type: URL,
+      required: true
+    },
+    logo: {
+      type: URL,
+      required: false
+    },
+    stats: {
+      type: Boolean,
+      required: true
+    },
+    pages: {
+      type: Number,
+      required: false
+    }
+  },
+  computed: {
+    character: function () {
+      return this.name.substring(0, 1).toUpperCase()
+    },
+    color: function () {
+      const colors = ['red', 'blue', 'green', 'purple']
+      return this.logo ? 'white' : colors[Math.floor(Math.random() * colors.length)]
+    }
+  },
+  methods: {
+    goToWiki () {
+      window.open(this.url.href, '_blank')
+    }
+  }
+}
+</script>
+
+<style scoped>
+.content {
+  padding: 16px 16px;
+}
+.details.col {
+  padding-left: 16px !important;
+  word-wrap: anywhere;
+}
+.pages {
+  padding-top: 4px;
+}
+</style>
diff --git a/src/components/Pages/Discovery/Components/MasonryGrid.vue b/src/components/Pages/Discovery/Components/MasonryGrid.vue
new file mode 100644
index 00000000..0cf5e6f8
--- /dev/null
+++ b/src/components/Pages/Discovery/Components/MasonryGrid.vue
@@ -0,0 +1,60 @@
+<template>
+  <div class="grid" ref="grid">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MasonryGrid',
+  data () {
+    return {
+      timer: null
+    }
+  },
+  methods: {
+    resizeCards () {
+      const cards = this.$refs.grid.children
+      const style = window.getComputedStyle(this.$refs.grid)
+      const rowGap = parseInt(style.getPropertyValue('row-gap'))
+      const gridAutoRows = parseInt(style.getPropertyValue('grid-auto-rows'))
+      const rowHeight = rowGap + gridAutoRows
+
+      Array.from(cards).forEach((card) => {
+        const cardHeight = card.firstChild.getBoundingClientRect().height + rowGap
+        const numRows = Math.round(cardHeight / rowHeight)
+        card.style['grid-row'] = 'span ' + numRows
+      })
+    },
+    debounceResize (time) {
+      clearTimeout(this.timer)
+      this.timer = setTimeout(() => {
+        this.resizeCards()
+      }, time)
+    },
+    windowResized () {
+      this.debounceResize(50)
+    }
+  },
+  created () {
+    window.addEventListener('resize', this.windowResized)
+  },
+  destroyed () {
+    window.removeEventListener('resize', this.windowResized)
+  },
+  updated () {
+    this.$nextTick(() => {
+      this.resizeCards()
+    })
+  }
+}
+</script>
+
+<style scoped>
+.grid {
+  display: grid;
+  row-gap: 16px;
+  grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
+  grid-auto-rows: 1px;
+}
+</style>
diff --git a/src/components/Pages/Discovery/Discovery.vue b/src/components/Pages/Discovery/Discovery.vue
new file mode 100644
index 00000000..ba44be1a
--- /dev/null
+++ b/src/components/Pages/Discovery/Discovery.vue
@@ -0,0 +1,257 @@
+<template>
+  <div class="content">
+    <div class="intro">
+      <div class="text-h4 title">
+        A tour of Wikibases in the cloud
+      </div>
+      <div class="text-subtitle-1">
+        Have you ever wanted to take a look at other Wikibases, so you can see how other folks have set them up? Here's a list of other instances on Wikibase Cloud for your information and inspiration.
+      </div>
+    </div>
+    <v-container class="options">
+      <v-select
+        :items="sortOptions"
+        v-model="sortValue"
+        :disabled="inputDisabled"
+        label="Sort"
+        hide-details="auto"
+        outlined
+        dense
+      />
+      <v-checkbox
+        v-model="excludeEmpty"
+        :disabled="inputDisabled"
+        label="exclude empty Wikibases"
+        hide-details="auto"
+      />
+    </v-container>
+    <span class="text-body-2">
+      {{results}} results
+    </span>
+    <MasonryGrid class="cards">
+      <DiscoveryCard v-for="(wiki, index) in wikis" :key="index"
+        class="card"
+        :name="wiki.name"
+        :url="wiki.url"
+        :logo="wiki.logo"
+        :stats="wiki.stats"
+        :pages="wiki.pages"
+      />
+    </MasonryGrid>
+    <div v-if="paginate" class="pagination">
+      <v-pagination
+        v-model="currentPage"
+        :length="totalPages"
+        :disabled="inputDisabled"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import DiscoveryCard from './Components/DiscoveryCard.vue'
+import MasonryGrid from './Components/MasonryGrid.vue'
+
+const SortOptions = {
+  alphaAsc: {
+    text: 'Alphabetically ↑',
+    value: {
+      direction: 'asc',
+      sort: 'sitename'
+    }
+  },
+  alphaDesc: {
+    text: 'Alphabetically ↓',
+    value: {
+      direction: 'desc',
+      sort: 'sitename'
+    }
+  },
+  pagesDesc: {
+    text: 'No. of pages ↓',
+    value: {
+      direction: 'desc',
+      sort: 'pages'
+    }
+  }
+}
+
+export default {
+  name: 'Discovery',
+  components: {
+    DiscoveryCard,
+    MasonryGrid
+  },
+  data () {
+    return {
+      results: 0,
+      resultsPerPage: 24,
+      currentPage: 1,
+      totalPages: 1,
+      excludeEmpty: true,
+      sortValue: SortOptions.pagesDesc.value,
+      sortOptions: Object.values(SortOptions),
+      inputDisabled: false,
+      wikis: []
+    }
+  },
+  methods: {
+    async update () {
+      this.inputDisabled = true
+
+      try {
+        const response = await this.$api.wikiDiscovery({
+          sort: this.sortValue.sort,
+          direction: this.sortValue.direction,
+          active: this.excludeEmpty ? 1 : 0,
+          currentPage: this.currentPage,
+          resultsPerPage: this.resultsPerPage
+        })
+
+        this.results = response.meta.total
+        this.totalPages = response.meta.last_page
+        this.wikis = await response.data.map((wiki) => {
+          const stats = wiki.wiki_site_stats
+          return {
+            name: wiki.sitename,
+            url: new URL('https://' + wiki.domain),
+            logo: wiki.logo_url ? new URL(wiki.logo_url) : undefined,
+            stats: !!stats,
+            ...(stats && { pages: stats.pages })
+          }
+        })
+      } catch (error) {
+        console.log(error)
+        alert('Failed to collect Wikibase stats')
+      } finally {
+        this.inputDisabled = false
+      }
+    },
+    filter () {
+      if (this.currentPage === 1) {
+        this.update()
+      } else {
+        this.currentPage = 1
+      }
+    }
+  },
+  computed: {
+    paginate: function () {
+      return this.results > this.resultsPerPage
+    }
+  },
+  watch: {
+    sortValue: function () {
+      this.filter()
+    },
+    excludeEmpty: function () {
+      this.filter()
+    },
+    currentPage: function () {
+      this.update()
+    },
+    wikis: function () {
+      this.$nextTick(() => {
+        this.$nextTick(() => {
+          document.documentElement.scrollIntoView({ behavior: 'smooth' })
+        })
+      })
+    }
+  },
+  mounted () {
+    this.update()
+  }
+}
+</script>
+
+<style scoped>
+.content {
+  margin: 16px 16px 0 16px;
+}
+.intro {
+  max-width: 601px;
+}
+.title {
+  margin-bottom: 4px;
+}
+.pagination {
+  margin: 32px auto 16px auto;
+  max-width: 85%;
+}
+.card {
+  min-width: 288px;
+  max-width: 400px;
+}
+.cards {
+  margin-top: 24px;
+}
+>>> .cards.grid {
+  column-gap: 24px;
+}
+.options {
+  padding: 0 !important;
+  margin: 56px 0 32px 0;
+}
+.options > .v-input {
+  display: inline-block;
+}
+.options > .v-text-field {
+  width: 185px;
+}
+.options > .v-input--checkbox {
+  margin-top: 0;
+  margin-left: 24px;
+  padding-top: 0;
+  padding-bottom: 4px;
+  vertical-align: middle;
+}
+@media screen and (max-width: 648px) {
+  /*
+    648px = 2 * 288px (.card min-width)
+      + 2 * 24px (.content left/right margin at >= 640px)
+      + 24px (.grid column-gap)
+  */
+  .cards {
+    width: fit-content;
+    margin-left: auto;
+    margin-right: auto;
+  }
+  .options > .v-input {
+    display: block;
+  }
+  .options > .v-input--checkbox {
+    margin-left: 0;
+    margin-top: 16px;
+    padding: 0;
+  }
+}
+@media screen and (min-width: 640px) {
+  .content {
+    margin: 24px 24px 0 24px;
+  }
+  .pagination {
+    max-width: 50%;
+  }
+}
+@media screen and (min-width: 1120px) {
+  .content {
+    margin: 40px 32px 0 32px;
+  }
+  .pagination {
+    max-width: 50%;
+  }
+}
+@media screen and (min-width: 1578px) {
+  /*
+    1578px = 1514px (.content max-width)
+      + 2 * 32px (.content left/right margin at >= 1120px)
+  */
+  .content {
+    margin: 40px auto 0 auto;
+    width: 1514px;
+  }
+  .pagination {
+    max-width: 50%;
+  }
+}
+</style>
diff --git a/src/router/index.js b/src/router/index.js
index bc5aec60..77ea9b48 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -17,6 +17,7 @@ import TabSettings from '@/components/Pages/ManageWiki/TabSettings'
 import TermsOfUse from '@/components/Pages/TermsOfUse'
 import Privacy from '@/components/Pages/Privacy/Privacy'
 import User from '@/components/Pages/User'
+import Discovery from '@/components/Pages/Discovery/Discovery'
 
 Vue.use(Router)
 
@@ -115,6 +116,14 @@ const router = new Router({
       meta: {
         requiresAuth: true
       }
+    },
+    {
+      path: '/discovery',
+      name: 'Discovery',
+      component: Discovery,
+      meta: {
+        customLayout: true
+      }
     }
   ]
 })