diff --git a/layouts/empty.vue b/layouts/empty.vue
new file mode 100644
index 0000000000..3945aaa7ff
--- /dev/null
+++ b/layouts/empty.vue
@@ -0,0 +1,76 @@
+<template>
+    <div class="default-layout">
+        <div class="default-layout__body">
+            <Nuxt />
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    head() {
+        return {
+            meta: [
+                { charset: 'utf-8' },
+                {
+                    name: 'viewport',
+                    content: 'width=device-width, initial-scale=1',
+                },
+                { hid: 'og:type', property: 'og:type', content: 'website' },
+            ],
+            link: [
+                {
+                    rel: 'icon',
+                    type: 'image/x-icon',
+                    href: '/2021/favicon.ico',
+                },
+                {
+                    rel: 'preconnect',
+                    href: 'https://fonts.googleapis.com',
+                },
+                {
+                    rel: 'preconnect',
+                    href: 'https://fonts.gstatic.com',
+                    crossorigin: 'anonymous',
+                },
+                {
+                    rel: 'stylesheet',
+                    href:
+                        'https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@400;500;600;700&family=Source+Sans+Pro:wght@400;600;700&display=swap',
+                },
+            ],
+        }
+    },
+}
+</script>
+
+<style>
+html {
+    @apply font-sans;
+    font-size: 20px;
+    color: #c7c7c7;
+    word-spacing: 1px;
+    -ms-text-size-adjust: 100%;
+    -webkit-text-size-adjust: 100%;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+    box-sizing: border-box;
+    background: #121023;
+}
+
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+    margin: 0;
+}
+
+.default-layout__body {
+    display: grid;
+    grid-template-columns: 100%;
+}
+
+body.modal-open {
+    overflow: hidden;
+}
+</style>
diff --git a/pages/about/staff.vue b/pages/about/staff.vue
index dc2b83c815..f9c28c3fee 100644
--- a/pages/about/staff.vue
+++ b/pages/about/staff.vue
@@ -33,6 +33,13 @@ export default {
         I18nPageWrapper,
         CoreH1,
     },
+    layout({ query }) {
+        if (query.mode === 'app') {
+            return 'empty'
+        } else {
+            return 'default'
+        }
+    },
     data() {
         return {
             member_list: {
diff --git a/pages/sponsor/list.vue b/pages/sponsor/list.vue
new file mode 100644
index 0000000000..44dbf8848f
--- /dev/null
+++ b/pages/sponsor/list.vue
@@ -0,0 +1,80 @@
+<template>
+    <div class="page-home">
+        <i18n-page-wrapper class="sponsor-section pt-12">
+            <h1 class="sponsor-title">{{ $t('sponsorList') }}</h1>
+            <sponsor-card-collection
+                v-for="(leveledSponsors, i) in sponsorsData"
+                :key="`sponsor_list_level_${i}`"
+                :level-name="leveledSponsors.level_name"
+            >
+                <sponsor-card
+                    v-for="(sponsor, j) in leveledSponsors.sponsors"
+                    :key="`sponsor_list_level_${i}_sponsor_${j}`"
+                    :logo-url="sponsor.logo_url"
+                    :tag="getAttributeByLocale(sponsor, 'subtitle')"
+                    @click.native="showModal(sponsor)"
+                >
+                </sponsor-card>
+            </sponsor-card-collection>
+        </i18n-page-wrapper>
+        <sponsor-modal v-model="isOpened" :context="selectedSponsor" />
+    </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import i18n from '@/i18n/index.i18n'
+import I18nPageWrapper from '@/components/core/i18n/PageWrapper'
+import {
+    SponsorCardCollection,
+    SponsorModal,
+    SponsorCard,
+} from '~/components/sponsors'
+
+export default {
+    i18n,
+    name: 'PageIndex',
+    layout: 'empty',
+    components: {
+        I18nPageWrapper,
+        SponsorCard,
+        SponsorCardCollection,
+        SponsorModal,
+    },
+    data() {
+        return {
+            isOpened: false,
+            selectedSponsor: {},
+        }
+    },
+    fetchOnServer: false,
+    computed: {
+        ...mapState(['sponsorsData']),
+    },
+    created() {
+        this.$store.dispatch('$getSponsorsData')
+    },
+    methods: {
+        showModal(sponsor) {
+            this.isOpened = true
+            this.selectedSponsor = sponsor
+            document.body.classList.add('modal-open')
+        },
+        getAttributeByLocale(data, attr) {
+            const localeMap = { 'en-us': 'en_us', 'zh-hant': 'zh_hant' }
+            const attributeName = `${attr}_${localeMap[this.$i18n.locale]}`
+            return data[attributeName]
+        },
+    },
+}
+</script>
+
+<style lang="postcss" scoped>
+.sponsor-title {
+    @apply font-serif;
+    color: #f3cc39;
+}
+.sponsor-section {
+    background-color: #121023;
+}
+</style>