diff --git a/klicker/components/ui/b-card.vue b/klicker/components/ui/b-card.vue
index ef1945e7..a596d8d8 100644
--- a/klicker/components/ui/b-card.vue
+++ b/klicker/components/ui/b-card.vue
@@ -6,6 +6,7 @@
   >
     <div
       :class="{
+        'bg-background': elevation == -1,
         'bg-background/75': elevation == 0,
         'bg-contrast/[0.08]': elevation == 1,
         'bg-white/[.02]': elevation == 2,
diff --git a/klicker/components/ui/b-scroll-spy.vue b/klicker/components/ui/b-scroll-spy.vue
index f903c40b..5aec16cd 100644
--- a/klicker/components/ui/b-scroll-spy.vue
+++ b/klicker/components/ui/b-scroll-spy.vue
@@ -1,5 +1,8 @@
 <template>
-  <div ref="rootContainer">
+  <div
+    ref="rootContainer"
+    class="overflow-y-auto hide-scrollbar"
+  >
     <nav
       ref="toc"
       class="relative"
diff --git a/klicker/components/ui/b-split-dashboard.vue b/klicker/components/ui/b-split-dashboard.vue
index 835e286a..9d82f546 100644
--- a/klicker/components/ui/b-split-dashboard.vue
+++ b/klicker/components/ui/b-split-dashboard.vue
@@ -1,19 +1,27 @@
 <template>
   <div
-    class="grid grid-cols-1 gap-8"
+    class="grid grid-cols-1 gap-4"
     :class="{
-      'lg:grid-cols-[16rem,minmax(0,1fr)]': 'aside' in $slots,
+      'lg:grid-cols-[30rem,minmax(0,1fr),0]': ('aside-left' in $slots) && !('aside-right' in $slots),
+      'lg:grid-cols-[0,minmax(0,1fr),20rem]': !('aside-left' in $slots) && ('aside-right' in $slots),
+      'lg:grid-cols-[20rem,minmax(0,1fr)] 2xl:grid-cols-[30rem,minmax(0,1fr),20rem]': ('aside-left' in $slots) && ('aside-right' in $slots),
     }"
   >
-    <aside class="relative z-20">
-      <div class="lg:sticky lg:top-0 max-w-md">
-        <slot name="aside"></slot>
+    <aside class="order-1">
+      <div class="lg:sticky lg:top-4 lg:max-h-[calc(100vh-2rem)] lg:flex lg:flex-col lg:items-end">
+        <slot name="aside-left"></slot>
       </div>
     </aside>
 
-    <div class="relative z-10">
+    <div class="order-3 lg:my-0 2xl:order-2 relative z-10">
       <slot></slot>
     </div>
+
+    <aside class="order-2 md:hidden 2xl:block 2xl:order-3 relative z-20">
+      <div class="lg:sticky lg:top-4 lg:max-h-[calc(100vh-2rem)] lg:flex lg:flex-col lg:items-start">
+        <slot name="aside-right"></slot>
+      </div>
+    </aside>
   </div>
 </template>
 
@@ -21,7 +29,9 @@
 import { defineComponent } from 'vue'
 
 /**
- * Split design with a sticky aside on the left and the main content on the right
+ * Split design with a sticky aside left and right and the main content on the right
+ *
+ * The right aside should only contain supplementary information as it will not be visible on md/lg/xl
  */
 export default defineComponent({
 })
diff --git a/web/components.d.ts b/web/components.d.ts
index ea5b1676..ae4bf7c7 100644
--- a/web/components.d.ts
+++ b/web/components.d.ts
@@ -8,11 +8,10 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     AbsoluteTime: typeof import('./components/absolute-time.vue')['default']
-    AccessoryTierList: typeof import('./components/accessory-tier-list.vue')['default']
+    AccessoryTierListPage: typeof import('./components/accessory-tier-list-page.vue')['default']
     Ad: typeof import('./components/ad.vue')['default']
     AdblockBait: typeof import('./components/adblock-bait.vue')['default']
     AdCell: typeof import('./components/ad-cell.vue')['default']
-    Adsense: typeof import('./components/adsense.vue')['default']
     AiReport1: typeof import('./components/ai-report-1.vue')['default']
     AiReport2: typeof import('./components/ai-report-2.vue')['default']
     AppBottomNav: typeof import('./components/app-bottom-nav.vue')['default']
@@ -47,6 +46,7 @@ declare module 'vue' {
     BrawlerVoicelines: typeof import('./components/brawler/brawler-voicelines.vue')['default']
     BrawlerWeaknessesCard: typeof import('./components/brawler/brawler-weaknesses-card.vue')['default']
     Breadcrumbs: typeof import('./components/breadcrumbs.vue')['default']
+    BTitle: typeof import('./components/b-title.vue')['default']
     ClubActivityTable: typeof import('./components/club/club-activity-table.vue')['default']
     ClubAside: typeof import('./components/club/club-aside.vue')['default']
     ClubMemberTable: typeof import('./components/club/club-member-table.vue')['default']
@@ -110,7 +110,6 @@ declare module 'vue' {
     PlayerTimeStatistics: typeof import('./components/player/player-time-statistics.vue')['default']
     PlayerTrophyStatistics: typeof import('./components/player/player-trophy-statistics.vue')['default']
     PlaywirePrivacy: typeof import('./components/playwire-privacy.vue')['default']
-    PlaywireRamp: typeof import('./components/playwire-ramp.vue')['default']
     ProdigyAd: typeof import('./components/prodigy-ad.vue')['default']
     QuizCard: typeof import('./components/quiz/quiz-card.vue')['default']
     QuizCtaCard: typeof import('./components/quiz/quiz-cta-card.vue')['default']
@@ -131,6 +130,7 @@ declare module 'vue' {
     SModeMap: typeof import('./components/klicker/s-mode-map.vue')['default']
     SPlayerName: typeof import('./components/klicker/s-player-name.vue')['default']
     SPlayerTag: typeof import('./components/klicker/s-player-tag.vue')['default']
+    SplitPage: typeof import('./components/split-page.vue')['default']
     SPower: typeof import('./components/klicker/s-power.vue')['default']
     SPowerplay: typeof import('./components/klicker/s-powerplay.vue')['default']
     SSeason: typeof import('./components/klicker/s-season.vue')['default']
diff --git a/web/components/accessory-tier-list.vue b/web/components/accessory-tier-list-page.vue
similarity index 98%
rename from web/components/accessory-tier-list.vue
rename to web/components/accessory-tier-list-page.vue
index ce5da7d7..44c84cbd 100644
--- a/web/components/accessory-tier-list.vue
+++ b/web/components/accessory-tier-list-page.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <split-page :title="$t(`tier-list.${singular}.title`)">
     <breadcrumbs
       id="breadcrumbs"
       :links="[{
@@ -71,7 +71,7 @@
         </template>
       </c-dashboard>
     </b-page-section>
-  </div>
+  </split-page>
 </template>
 
 <script lang="ts">
diff --git a/web/components/ad.vue b/web/components/ad.vue
index b50ff74d..a9b75383 100644
--- a/web/components/ad.vue
+++ b/web/components/ad.vue
@@ -1,9 +1,38 @@
 <template>
   <template v-if="allowed">
     <div
-      v-if="banner"
+      v-if="takeover"
       v-bind="$attrs"
-      class="text-center -mx-4"
+      class="text-center"
+    >
+      <client-only>
+        <!-- hybrid-banner for takeover -->
+        <!-- Desktop - Multisize Leaderboard: 728x90, 970x90, 970x250 -->
+        <venatus-placement
+          v-if="desktop"
+          ad-id="65f94d46dd5aea6a13fd049b"
+          class="desktop-multileaderboard"
+          data-display-type="hybrid-banner"
+        ></venatus-placement>
+
+        <!-- Mobile - In-Content: 300x250, 336x280, 320x100, 300x100 -->
+        <venatus-placement
+          v-if="!desktop"
+          ad-id="65f94f9ddd5aea6a13fd04a1"
+          class="mobile-incontent"
+          data-display-type="hybrid-banner"
+        ></venatus-placement>
+
+        <template v-slot:placeholder>
+          <div class="placeholder-takeover"></div>
+        </template>
+      </client-only>
+    </div>
+
+    <div
+      v-else-if="banner"
+      v-bind="$attrs"
+      class="text-center"
     >
       <client-only>
         <!-- Desktop - Article: 728x90, 970x90 -->
@@ -21,22 +50,28 @@
         ></venatus-placement>
 
         <template v-slot:placeholder>
-          <div style="width: 100%; height: 100px;"></div>
+          <div class="placeholder-banner"></div>
         </template>
       </client-only>
     </div>
 
-    <!-- Desktop Side Rail: 300x250, 300x600, 160x600, 336x280 -->
-    <div
-      v-else-if="scraper"
-      v-bind="$attrs"
-    >
-      <venatus-placement
-        v-if="desktop && sideRailMaxWidth >= 160"
-        ad-id="65f94d27767223575b4de5af"
-        class="desktop-side-rail"
-      ></venatus-placement>
-    </div>
+    <template v-else-if="siderail">
+      <client-only>
+        <div
+          v-if="desktop"
+          v-bind="$attrs"
+          ref="ad"
+          class="text-center"
+        >
+          <!-- Desktop Side Rail: 300x250, 300x600, 160x600, 336x280 -->
+          <venatus-placement
+            v-if="visible"
+            ad-id="65f94d27767223575b4de5af"
+            class="desktop-side-rail"
+          ></venatus-placement>
+        </div>
+      </client-only>
+    </template>
 
     <template v-else-if="cell">
       <!-- placeholder and lazy-loading are handled by cell wrapper-->
@@ -48,14 +83,20 @@
       ></venatus-placement>
     </template>
 
-    <template v-else-if="instream">
+    <div
+      v-else-if="instream"
+      v-bind="$attrs"
+      ref="ad"
+      class="text-center -mx-4 w-[calc(100%+32px)] md:mx-0 md:w-full max-w-lg"
+    >
+      <!-- Instream - at least 410px wide, must be 16:9 -->
       <div
-        v-bind="$attrs"
+        v-if="visible"
         id="vm-av"
         data-format="isvideo"
         class="aspect-video vm-placement"
       ></div>
-    </template>
+    </div>
 
     <b-page-section
       v-else
@@ -79,7 +120,7 @@
         ></venatus-placement>
 
         <template v-slot:placeholder>
-          <div style="width: 100%; height: 280px;"></div>
+          <div class="placeholder-section"></div>
         </template>
       </client-only>
     </b-page-section>
@@ -87,8 +128,8 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed, ref, onMounted, watch, nextTick } from 'vue'
-import { useBreakpoints, useIntersectionObserver, useElementSize, useWindowSize } from '@vueuse/core'
+import { defineComponent, computed, ref, watch, nextTick } from 'vue'
+import { useBreakpoints, useIntersectionObserver } from '@vueuse/core'
 import { useIsApp } from '~/composables/app'
 import { useRoute } from 'vue-router'
 
@@ -103,11 +144,15 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
+    takeover: {
+      type: Boolean,
+      default: false
+    },
     banner: {
       type: Boolean,
       default: false
     },
-    scraper: {
+    siderail: {
       type: Boolean,
       default: false
     },
@@ -122,14 +167,17 @@ export default defineComponent({
   },
   setup(props) {
     const ad = ref<HTMLElement>()
-    const visible = ref(!props.lazy || props.first)
+    // always lazy-load siderail and instream, figure out whether they fit first
+    const visible = ref((!props.lazy || props.first) && !props.siderail && !props.instream)
     const { isApp } = useIsApp()
 
     const allowed = computed(() => props.first || isApp.value == undefined || isApp.value == false)
 
-    if (!import.meta.env.SSR) {
-      const { isSupported, stop } = useIntersectionObserver(ad, ([{ isIntersecting }]) => {
-        if (isIntersecting && allowed.value) {
+    if (!import.meta.env.SSR && !visible.value) {
+      const { isSupported, stop } = useIntersectionObserver(ad, ([{ isIntersecting, target }]) => {
+        const hidden = (target as HTMLElement)?.offsetParent === null
+
+        if (isIntersecting && allowed.value && !hidden) {
           visible.value = true
           stop()
         }
@@ -143,7 +191,7 @@ export default defineComponent({
     }
 
     const breakpoints = useBreakpoints({
-      desktop: 728,
+      desktop: 1028,
     })
     const desktop = breakpoints.greaterOrEqual('desktop')
 
@@ -176,6 +224,20 @@ export default defineComponent({
 </script>
 
 <style lang="postcss" scoped>
+.placeholder-takeover {
+  margin: 0 auto;
+  width: 100%;
+  max-width: 336px;
+  height: 280px;
+}
+
+@media (min-width: 1028px) {
+  .placeholder-takeover {
+    max-width: 970px;
+    height: 250px;
+  }
+}
+
 .desktop-article {
   margin: 0 auto;
   width: 100%;
@@ -190,10 +252,37 @@ export default defineComponent({
   height: 100px;
 }
 
+.placeholder-banner {
+  margin: 0 auto;
+  width: 100%;
+  max-width: 320px;
+  height: 100px;
+}
+
+@media (min-width: 1028px) {
+  .placeholder-banner {
+    max-width: 970px;
+    height: 90px;
+  }
+}
+
+.desktop-multileaderboard {
+  margin: 0 auto;
+  width: 100%;
+  max-width: 970px;
+  height: 250px;
+}
+
 .desktop-side-rail {
+  width: 336px;
+  height: 600px;
+}
+
+.mobile-incontent {
+  margin: 0 auto;
   width: 100%;
   max-width: 336px;
-  height: 600px;
+  height: 280px;
 }
 
 .desktop-incontent {
@@ -203,10 +292,17 @@ export default defineComponent({
   height: 280px;
 }
 
-.mobile-incontent {
+.placeholder-section {
   margin: 0 auto;
   width: 100%;
   max-width: 336px;
   height: 280px;
 }
+
+@media (min-width: 1028px) {
+  .placeholder-section {
+    max-width: 728px;
+    height: 280px;
+  }
+}
 </style>
diff --git a/web/components/adsense.vue b/web/components/adsense.vue
deleted file mode 100644
index 23a960ff..00000000
--- a/web/components/adsense.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<template>
-  <ins
-    :data-ad-client="dataAdClient"
-    :data-ad-slot="dataAdSlot"
-    :data-ad-format="dataAdFormat"
-    :data-full-width-responsive="dataFullWidthResponsive"
-    :data-adtest="dataAdtest"
-    class="adsbygoogle inline-block"
-  ></ins>
-</template>
-<script lang="ts">
-import { defineComponent, onMounted } from 'vue'
-
-export default defineComponent({
-  props: {
-    dataAdClient: {
-      type: String,
-      required: true
-    },
-    dataAdSlot: {
-      type: String,
-      required: true
-    },
-    dataAdFormat: {
-      type: String,
-      default: 'auto'
-    },
-    dataFullWidthResponsive: {
-      type: Boolean,
-      default: false
-    },
-    dataAdtest: {
-      type: Boolean,
-      default: import.meta.env.DEV
-    },
-  },
-  setup() {
-    onMounted(() => window.adsbygoogle.push({}))
-  },
-})
-</script>
diff --git a/web/components/ai-report-1.vue b/web/components/ai-report-1.vue
index 5d0738ca..41aafbf9 100644
--- a/web/components/ai-report-1.vue
+++ b/web/components/ai-report-1.vue
@@ -1,5 +1,5 @@
 <template>
-  <b-card :title="$t('tier-list.map.report.title', { title })"  class="max-w-2xl mx-auto">
+  <b-card :title="$t('tier-list.map.report.title', { title })"  class="max-w-2xl">
     <template v-if="timestamp" v-slot:preview>
       <absolute-time
         :timestamp="timestamp"
diff --git a/web/components/ai-report-2.vue b/web/components/ai-report-2.vue
index e0d6f668..b4902ca7 100644
--- a/web/components/ai-report-2.vue
+++ b/web/components/ai-report-2.vue
@@ -1,7 +1,7 @@
 <template>
   <b-card
     :title="$t('tier-list.map.report.title', { title })"
-    class="max-w-2xl mx-auto"
+    class="max-w-2xl"
   >
     <template v-if="timestamp" v-slot:preview>
       <absolute-time
diff --git a/web/components/b-title.vue b/web/components/b-title.vue
new file mode 100644
index 00000000..1542c5c5
--- /dev/null
+++ b/web/components/b-title.vue
@@ -0,0 +1,18 @@
+<template>
+  <h1
+    class="text-3xl"
+  >{{ title }}</h1>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  props: {
+    title: {
+      type: String,
+      required: true
+    }
+  },
+})
+</script>
diff --git a/web/components/map/map-views.vue b/web/components/map/map-views.vue
index 79ced579..f79ee7a5 100644
--- a/web/components/map/map-views.vue
+++ b/web/components/map/map-views.vue
@@ -74,8 +74,6 @@
             <ad-cell
               :columns="3"
               :rows="2"
-              instance="brawlers"
-              ad-slot="4623162753"
             ></ad-cell>
 
             <map-insights
@@ -139,8 +137,6 @@
             <ad-cell
               :columns="8"
               :rows="3"
-              instance="leaderboard"
-              ad-slot="4623162753"
             ></ad-cell>
           </b-dashboard>
         </template>
@@ -187,8 +183,6 @@
             <ad-cell
               :columns="5"
               :rows="3"
-              instance="starpowers"
-              ad-slot="4623162753"
             ></ad-cell>
           </b-dashboard>
         </template>
@@ -235,8 +229,6 @@
             <ad-cell
               :columns="5"
               :rows="3"
-              instance="gadgets"
-              ad-slot="4623162753"
             ></ad-cell>
           </b-dashboard>
         </template>
@@ -283,8 +275,6 @@
             <ad-cell
               :columns="5"
               :rows="3"
-              instance="gears"
-              ad-slot="4623162753"
             ></ad-cell>
           </b-dashboard>
         </template>
diff --git a/web/components/split-page.vue b/web/components/split-page.vue
new file mode 100644
index 00000000..a4e6a4f7
--- /dev/null
+++ b/web/components/split-page.vue
@@ -0,0 +1,53 @@
+<template>
+  <b-page no-container>
+    <b-split-dashboard>
+      <template v-slot:aside-left>
+        <slot name="aside-left"></slot>
+
+        <ad
+          instream
+          :class="{
+            'mt-8': 'aside-left' in $slots,
+            // do not show the ad as the only content, it is too close to the takeover
+            'hidden lg:block': !('aside-left' in $slots),
+          }"
+        ></ad>
+      </template>
+
+      <template v-slot:aside-right>
+        <slot name="aside-right"></slot>
+
+        <ad
+          siderail
+          :class="{
+            'mt-8': 'aside-right' in $slots,
+          }"
+        ></ad>
+      </template>
+
+      <b-title :title="title"></b-title>
+
+      <div>
+        <slot></slot>
+      </div>
+    </b-split-dashboard>
+  </b-page>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, ref } from 'vue'
+import { BPage, BSplitDashboard } from '@schneefux/klicker/components'
+
+export default defineComponent({
+  components: {
+    BSplitDashboard,
+    BPage,
+  },
+  props: {
+    title: {
+      type: String,
+      required: true
+    },
+  },
+})
+</script>
diff --git a/web/components/venatus-rich-media.vue b/web/components/venatus-rich-media.vue
index d3a9645f..bef8e39f 100644
--- a/web/components/venatus-rich-media.vue
+++ b/web/components/venatus-rich-media.vue
@@ -1,25 +1,49 @@
 <template>
   <!-- Stickies -->
   <venatus-placement
+    v-if="stickies"
+    :key="key"
     ad-id="65f9504e767223575b4de5b7"
     class="hidden"
   ></venatus-placement>
   <!-- Instream -->
   <venatus-placement
+    :key="key"
     ad-id="65f9505add5aea6a13fd04ab"
     class="hidden"
   ></venatus-placement>
 </template>
 
 <script lang="ts">
-import { defineComponent, onUnmounted } from 'vue'
+import { defineComponent, onUnmounted, watch, computed, ref } from 'vue'
 
 export default defineComponent({
-  setup() {
-    onUnmounted(() => {
+  props: {
+    stickies: {
+      type: Boolean,
+      default: false
+    },
+  },
+  setup(props) {
+    const removeAllRichmedia = () => {
       window.top!.__vm_remove_category = window.top!.__vm_remove_category || []
       window.top!.__vm_remove_category.push('richmedia_all')
+    }
+
+    onUnmounted(() => removeAllRichmedia())
+
+    const key = ref(0)
+    watch(computed(() => props.stickies), () => {
+      if (!props.stickies) {
+        // can only remove all rich media at once (TODO@Venatus)
+        removeAllRichmedia()
+        key.value++ // force recreation of other rich media
+      }
     })
+
+    return {
+      key,
+    }
   },
 })
 </script>
diff --git a/web/composables/adsense.ts b/web/composables/adsense.ts
deleted file mode 100644
index 572ad669..00000000
--- a/web/composables/adsense.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { useMeta } from "./compat";
-
-declare global {
-  interface Window {
-    adsbygoogle: {
-      push: (args: any) => void;
-      pauseAdRequests: number;
-    };
-  }
-}
-export function useAdsense(publisherId: string) {
-  useMeta(() => ({
-    script: [
-      {
-        key: 'adsense',
-        src: `https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=${publisherId}`,
-        async: true,
-        crossorigin: 'anonymous',
-      },
-    ],
-  }))
-}
diff --git a/web/config.ts b/web/config.ts
index c5541503..e3aed7b2 100644
--- a/web/config.ts
+++ b/web/config.ts
@@ -4,7 +4,6 @@ export interface Config {
   managerUrl: string
   renderUrl: string
   ga4Id: string
-  adsensePubid: string
   sentryDsn: string
   venatusSiteId: string
   quantcastChoiceId: string
@@ -21,7 +20,6 @@ export const config: Config = {
   managerUrl: process.env.MANAGER_URL ?? '',
   renderUrl: process.env.RENDER_URL ?? '',
   ga4Id: process.env.GA4_ID ?? '',
-  adsensePubid: process.env.ADSENSE_PUBID ?? '',
   venatusSiteId: process.env.VENATUS_SITE_ID ?? '',
   quantcastChoiceId: process.env.QUANTCAST_CHOICE_ID ?? '',
   sentryDsn: process.env.SENTRY_DSN ?? '',
diff --git a/web/layouts/default.vue b/web/layouts/default.vue
index 45ea79e1..0a31b966 100644
--- a/web/layouts/default.vue
+++ b/web/layouts/default.vue
@@ -8,18 +8,18 @@
 
     <loading-indicator></loading-indicator>
 
-    <ad
-      ad-slot="6848221017"
-      class="fixed left-4 top-1/2 -translate-y-1/2 text-left"
-      scraper
-    ></ad>
-    <ad
-      ad-slot="8127026559"
-      class="fixed right-4 top-1/2 -translate-y-1/2 text-right"
-      scraper
-    ></ad>
-
     <div id="main" class="fill-layout-height">
+      <ad
+        v-if="topBannerType == 'takeover'"
+        takeover
+        first
+      ></ad>
+      <ad
+        v-else-if="topBannerType == 'banner'"
+        banner
+        first
+      ></ad>
+
       <slot></slot>
     </div>
 
@@ -50,6 +50,7 @@ import { useI18n } from 'vue-i18n'
 import { useConfig, useLocaleCookieRedirect, useLocalePath } from '~/composables/compat'
 import { useQuantcast } from '~/composables/quantcast'
 import { useVenatus } from '~/composables/venatus'
+import { useRoute } from 'vue-router'
 
 export default defineComponent({
   components: {
@@ -86,9 +87,13 @@ export default defineComponent({
 
     useQuantcast(config.quantcastChoiceId)
 
+    const route = useRoute()
+    const topBannerType = computed(() => route.meta.topBannerType as string ?? 'takeover')
+
     return {
       links,
       container,
+      topBannerType,
     }
   },
 })
diff --git a/web/pages/about.vue b/web/pages/about.vue
index 1220cbf9..5e31de3c 100644
--- a/web/pages/about.vue
+++ b/web/pages/about.vue
@@ -86,3 +86,11 @@ export default defineComponent({
   },
 })
 </script>
+
+<route>
+{
+  meta: {
+    topBannerType: 'none',
+  },
+}
+</route>
diff --git a/web/pages/club/_tag.vue b/web/pages/club/_tag.vue
index 44ed1e10..fee146ae 100644
--- a/web/pages/club/_tag.vue
+++ b/web/pages/club/_tag.vue
@@ -1,114 +1,114 @@
 <template>
-  <b-page
+  <split-page
     v-if="club != undefined"
     :title="$t('club.meta.title', { club: club.name })"
   >
-    <b-split-dashboard class="mt-8 lg:mt-0">
-      <template v-slot:aside>
-        <div class="lg:h-screen lg:flex lg:flex-col lg:py-8 lg:mt-8">
-          <club-aside
-            id="aside"
-            :club="club"
-            v-observe-visibility="{
-              callback: makeVisibilityCallback('aside'),
-              once: true,
-            }"
-            class="!h-auto"
-          ></club-aside>
-        </div>
-      </template>
-
-      <b-page-section
-        id="description"
+    <template v-slot:aside-left>
+      <club-aside
+        id="aside"
+        :club="club"
         v-observe-visibility="{
-          callback: makeVisibilityCallback('description'),
+          callback: makeVisibilityCallback('aside'),
           once: true,
         }"
-        :title="$t('club.description')"
-      >
-        <b-card>
-          <template v-slot:content>
-            <blockquote class="prose dark:prose-invert italic">
-              {{ club.description }}
-            </blockquote>
-          </template>
-        </b-card>
-      </b-page-section>
-
-      <b-page-section :title="$t('club.members')">
-        <club-member-table
-          :club="club"
-          class="max-w-md"
-        ></club-member-table>
-      </b-page-section>
-
-      <b-page-section
-        id="battles"
-        v-observe-visibility="{
-          callback: makeVisibilityCallback('battles'),
-          once: true,
-        }"
-        :title="$t('club.common-battle-log')"
-        lazy
-      >
-        <battles-list
-          v-if="commonBattles.length > 0"
-          :battles="commonBattles"
-          :highlight-tags="memberTags"
-          class="mt-8"
-          @interact="trackInteraction('battles')"
-        ></battles-list>
-        <b-shimmer
-          v-else-if="loading"
-          height-px="318"
-          loading
-        ></b-shimmer>
-        <div v-else>
-          <p class="prose dark:prose-invert">
-            {{ $t('state.no-data') }}
-          </p>
-          <b-button
-            v-if="clubActivityStatistics == undefined"
-            v-observe-visibility="{
-              callback: loadClubActivityStatistics,
-              once: true,
-            }"
-            class="mt-3"
-            primary
-            md
-            @click="loadClubActivityStatistics()"
-          >{{ $t('club.load-activity') }}</b-button>
-        </div>
-      </b-page-section>
-
-      <b-page-section
-        id="retention"
-        v-observe-visibility="{
-          callback: makeVisibilityCallback('retention'),
-          once: true,
-        }"
-        :title="$t('club.retention.title')"
-        lazy
-      >
-        <club-retention-graph
-          :loading="loading"
-          :club-activity-statistics="clubActivityStatistics"
-          class="max-w-md"
-        ></club-retention-graph>
-      </b-page-section>
-
-      <b-page-section
-        :title="$t('club.member-activity')"
-      >
-        <club-activity-table
-          :loading="loading"
-          :club="club"
-          :club-activity-statistics="clubActivityStatistics"
-          class="max-w-md"
-        ></club-activity-table>
-      </b-page-section>
-    </b-split-dashboard>
-  </b-page>
+        class="!h-auto max-w-sm"
+      ></club-aside>
+    </template>
+
+    <b-page-section
+      id="description"
+      v-observe-visibility="{
+        callback: makeVisibilityCallback('description'),
+        once: true,
+      }"
+      :title="$t('club.description')"
+    >
+      <b-card>
+        <template v-slot:content>
+          <blockquote class="prose dark:prose-invert italic">
+            {{ club.description }}
+          </blockquote>
+        </template>
+      </b-card>
+    </b-page-section>
+
+    <b-page-section :title="$t('club.members')">
+      <club-member-table
+        :club="club"
+        class="max-w-md"
+      ></club-member-table>
+    </b-page-section>
+
+    <ad lazy></ad>
+
+    <b-page-section
+      id="battles"
+      v-observe-visibility="{
+        callback: makeVisibilityCallback('battles'),
+        once: true,
+      }"
+      :title="$t('club.common-battle-log')"
+      lazy
+    >
+      <battles-list
+        v-if="commonBattles.length > 0"
+        :battles="commonBattles"
+        :highlight-tags="memberTags"
+        class="mt-8"
+        @interact="trackInteraction('battles')"
+      ></battles-list>
+      <b-shimmer
+        v-else-if="loading"
+        height-px="318"
+        loading
+      ></b-shimmer>
+      <div v-else>
+        <p class="prose dark:prose-invert">
+          {{ $t('state.no-data') }}
+        </p>
+        <b-button
+          v-if="clubActivityStatistics == undefined"
+          v-observe-visibility="{
+            callback: loadClubActivityStatistics,
+            once: true,
+          }"
+          class="mt-3"
+          primary
+          md
+          @click="loadClubActivityStatistics()"
+        >{{ $t('club.load-activity') }}</b-button>
+      </div>
+    </b-page-section>
+
+    <b-page-section
+      id="retention"
+      v-observe-visibility="{
+        callback: makeVisibilityCallback('retention'),
+        once: true,
+      }"
+      :title="$t('club.retention.title')"
+      lazy
+    >
+      <club-retention-graph
+        :loading="loading"
+        :club-activity-statistics="clubActivityStatistics"
+        class="max-w-md"
+      ></club-retention-graph>
+    </b-page-section>
+
+    <ad lazy></ad>
+
+    <b-page-section
+      :title="$t('club.member-activity')"
+    >
+      <club-activity-table
+        :loading="loading"
+        :club="club"
+        :club-activity-statistics="clubActivityStatistics"
+        class="max-w-md"
+      ></club-activity-table>
+    </b-page-section>
+  </split-page>
 </template>
 
 <script lang="ts">
@@ -118,7 +118,7 @@ import { tagPattern } from '~/lib/util'
 import { defineComponent, ref, computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { TRPCClientError } from '@trpc/client'
-import { BPage, BPageSection, BSplitDashboard, BCard, BScrollingDashboard, BDashboardCell, BBigstat, BShimmer } from '@schneefux/klicker/components'
+import { BPageSection, BCard, BShimmer } from '@schneefux/klicker/components'
 import { useTrackScroll } from '~/composables/gtag'
 import { ClubActivityStatistics } from '~/model/Api'
 
@@ -127,13 +127,8 @@ export default defineComponent({
     ObserveVisibility,
   },
   components: {
-    BScrollingDashboard,
-    BSplitDashboard,
-    BDashboardCell,
     BPageSection,
     BShimmer,
-    BBigstat,
-    BPage,
     BCard,
   },
   async setup() {
diff --git a/web/pages/dashboard.vue b/web/pages/dashboard.vue
index a52f4df2..5c91f17e 100644
--- a/web/pages/dashboard.vue
+++ b/web/pages/dashboard.vue
@@ -1,5 +1,13 @@
 <template>
-  <b-page title="Brawl Stars Meta Dashboard" no-container>
+  <b-page
+    title="Brawl Stars Meta Dashboard"
+    no-container
+  >
+    <ad
+      instream
+      class="mt-8"
+    ></ad>
+
     <c-dashboard
       v-model="query"
       :configurator="{
@@ -9,7 +17,7 @@
         configureDimensions: true,
         configureCompareMode: true,
       }"
-      class="mt-2"
+      class="mt-8"
       slicer
     >
       <template v-slot:totals="data">
diff --git a/web/pages/index.vue b/web/pages/index.vue
index 0d00b4d3..3d2488eb 100644
--- a/web/pages/index.vue
+++ b/web/pages/index.vue
@@ -1,11 +1,5 @@
 <template>
   <b-page>
-    <ad
-      class="-mt-6 mb-6 mx-auto"
-      ad-slot="2812773083"
-      banner
-    ></ad>
-
     <div class="flex flex-col justify-center">
       <div id="logo" class="mx-auto relative">
         <img
@@ -132,10 +126,7 @@
       </div>
     </div>
 
-    <ad
-      ad-slot="6067985913"
-      first
-    ></ad>
+    <ad></ad>
 
     <b-page-section
       id="best"
@@ -165,10 +156,7 @@
       </div>
     </b-page-section>
 
-    <ad
-      ad-slot="6709232983"
-      lazy
-    ></ad>
+    <ad lazy></ad>
 
     <b-page-section
       id="events"
@@ -185,11 +173,6 @@
         with-data
       ></events-roll>
     </b-page-section>
-
-    <ad
-      ad-slot="6736366415"
-      lazy
-    ></ad>
   </b-page>
 </template>
 
@@ -358,3 +341,11 @@ export default defineComponent({
   @apply normal-case;
 }
 </style>
+
+<route>
+{
+  meta: {
+    topBannerType: 'banner',
+  },
+}
+</route>
diff --git a/web/pages/leaderboard.vue b/web/pages/leaderboard.vue
index 43208b17..e99e609e 100644
--- a/web/pages/leaderboard.vue
+++ b/web/pages/leaderboard.vue
@@ -1,13 +1,8 @@
 <template>
-  <b-page :title="$t('leaderboard.player.metric.title', { metric: $t('metric.' + metric) })">
+  <split-page :title="$t('leaderboard.player.metric.title', { metric: $t('metric.' + metric) })">
     <p id="description">{{ $t('leaderboard.player.metric.description', { metric: $t('metric.' + metric) }) }}</p>
 
-    <ad
-      ad-slot="4579727583"
-      first
-    ></ad>
-
-    <div class="mt-4 flex flex-wrap gap-x-2 gap-y-4 justify-center">
+    <div class="mt-4 flex flex-wrap gap-x-2 gap-y-4">
       <b-button
         v-for="metric in metrics"
         :key="metric"
@@ -19,15 +14,12 @@
       </b-button>
     </div>
 
-    <div id="leaderboard" class="flex justify-center mt-8">
-      <router-view></router-view>
-    </div>
-
-    <ad
-      ad-slot="5140154307"
-      lazy
-    ></ad>
-  </b-page>
+    <b-page-section id="leaderboard">
+      <div class="flex justify-center">
+        <router-view></router-view>
+      </div>
+    </b-page-section>
+  </split-page>
 </template>
 
 <script lang="ts">
@@ -36,8 +28,13 @@ import { defineComponent, computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRoute } from 'vue-router'
 import { useRouteParams } from '~/composables/route-params'
+import { BButton, BPageSection } from '@schneefux/klicker/components'
 
 export default defineComponent({
+  components: {
+    BPageSection,
+    BButton,
+  },
   setup() {
     const i18n = useI18n()
 
diff --git a/web/pages/profile/_tag.vue b/web/pages/profile/_tag.vue
index 1f066733..9239f1bf 100644
--- a/web/pages/profile/_tag.vue
+++ b/web/pages/profile/_tag.vue
@@ -1,41 +1,35 @@
 <template>
   <!-- FIXME on route transition, playerTag becomes undefined (Vue bug) -->
-  <b-page
+  <split-page
     v-if="playerTag != undefined"
     :title="$t('player.meta.title', { name: player?.name ?? '#' + playerTag })"
   >
-    <ad
-      ad-slot="9429125351"
-      first
-    ></ad>
-
-    <b-split-dashboard class="mt-8 lg:mt-0">
-      <template v-slot:aside>
-        <div class="lg:h-screen lg:flex lg:flex-col lg:py-8 lg:mt-8">
-          <b-shimmer
-            v-if="player == undefined"
-            height-px="512"
-            loading
-          ></b-shimmer>
-          <player-aside
-            v-else
-            id="aside"
-            :player="player"
-            v-observe-visibility="{
-              callback: makeVisibilityCallback('aside'),
-              once: true,
-            }"
-            class="!h-auto"
-          ></player-aside>
-
-          <b-scroll-spy
-            id="sidenav"
-            :sections="sections"
-            nav-class="top-14 lg:top-0"
-            toc-class="hidden lg:block"
-            class="lg:mt-8 lg:overflow-y-auto"
-          ></b-scroll-spy>
-        </div>
+    <b-split-dashboard>
+      <template v-slot:aside-left>
+        <b-shimmer
+          v-if="player == undefined"
+          height-px="512"
+          loading
+        ></b-shimmer>
+        <player-aside
+          v-else
+          id="aside"
+          :player="player"
+          v-observe-visibility="{
+            callback: makeVisibilityCallback('aside'),
+            once: true,
+          }"
+          class="!h-auto max-w-sm"
+        ></player-aside>
+      </template>
+
+      <template v-slot:aside-right>
+        <b-scroll-spy
+          id="sidenav"
+          :sections="sections"
+          toc-class="hidden lg:block"
+          nav-class="top-14"
+        ></b-scroll-spy>
       </template>
 
       <b-page-section
@@ -45,7 +39,6 @@
           callback: makeVisibilityCallback('hours'),
           once: true,
         }"
-        :title="$t('player.time-statistics')"
         lazy
       >
         <player-time-statistics
@@ -54,15 +47,6 @@
         ></player-time-statistics>
       </b-page-section>
 
-      <b-page-section
-        id="instream"
-      >
-        <ad
-          instream
-          style="width: 100%; max-width: 400px;"
-        ></ad>
-      </b-page-section>
-
       <b-page-section
         id="trophy"
         ref="trophySection"
@@ -102,10 +86,7 @@
         ></review-card>
       </b-page-section>
 
-      <ad
-        ad-slot="3933066188"
-        lazy
-      ></ad>
+      <ad lazy></ad>
 
       <b-page-section
         id="brawlers"
@@ -169,10 +150,7 @@
         </client-only>
       </b-page-section>
 
-      <ad
-        ad-slot="4129048243"
-        lazy
-      ></ad>
+      <ad lazy></ad>
 
       <b-page-section
         id="battles"
@@ -261,12 +239,7 @@
         ></player-percentiles>
       </b-page-section>
     </b-split-dashboard>
-
-    <ad
-      ad-slot="1752268168"
-      lazy
-    ></ad>
-  </b-page>
+  </split-page>
 </template>
 
 <script lang="ts">
diff --git a/web/pages/quiz.vue b/web/pages/quiz.vue
index 2049a7c4..7adb2563 100644
--- a/web/pages/quiz.vue
+++ b/web/pages/quiz.vue
@@ -1,22 +1,12 @@
 <template>
-  <b-page
-    :title="$t('oejts.title')"
-    class="max-w-lg"
-  >
+  <split-page :title="$t('oejts.title')">
     <p id="description" class="mt-4 mb-8">{{ $t('oejts.description') }}</p>
-    <ad
-      ad-slot="1985124187"
-      banner
-    ></ad>
+
     <quiz-card
       id="quiz"
       class="mt-8"
     ></quiz-card>
-    <ad
-      ad-slot="5374523095"
-      first
-    ></ad>
-  </b-page>
+  </split-page>
 </template>
 
 <script lang="ts">
diff --git a/web/pages/status.vue b/web/pages/status.vue
index de6b49f7..7346d2ea 100644
--- a/web/pages/status.vue
+++ b/web/pages/status.vue
@@ -1,6 +1,9 @@
 <template>
-  <b-page :title="$t('status.title')">
-    <div class="px-2 mt-8 mx-auto max-w-lg">
+  <b-page
+    :title="$t('status.title')"
+    class="max-w-screen-sm"
+  >
+    <div class="px-2 mt-8">
       <p v-show="status == undefined">{{ $t('state.checking') }}…</p>
       <div v-show="status == 'down'">
         <media-img path="/brawlers/spike_loss/model" clazz="mt-8 w-40 mx-auto" alt="Spike"></media-img>
diff --git a/web/pages/team-builder.vue b/web/pages/team-builder.vue
index eac59b10..1c16d4de 100644
--- a/web/pages/team-builder.vue
+++ b/web/pages/team-builder.vue
@@ -1,8 +1,13 @@
 <template>
-  <b-page
-    :title="$t('draft-tool.title')"
-    class="max-w-2xl mx-auto"
-  >
+  <split-page :title="$t('draft-tool.title')">
+    <template v-slot:aside-right>
+      <b-card :title="$t('about-metric', { metric: $t('metric.winRate') })">
+        <template v-slot:content>
+          <p>{{ $t('brawler.disclaimer') }}</p>
+        </template>
+      </b-card>
+    </template>
+
     <b-card
       :title="$t('draft-tool.subtitle')"
       class="mt-3"
@@ -31,16 +36,6 @@
     >
       <template v-slot="totals">
         <b-dashboard responsive>
-          <b-dashboard-cell
-            :rows="2"
-            :columns="3"
-          >
-            <b-card :title="$t('about-metric', { metric: $t('metric.winRate') })">
-              <template v-slot:content>
-                <p>{{ $t('brawler.disclaimer') }}</p>
-              </template>
-            </b-card>
-          </b-dashboard-cell>
           <b-dashboard-cell
             :rows="1"
             :columns="2"
@@ -57,7 +52,7 @@
     <prodigy-ad
       class="mt-8"
     ></prodigy-ad>
-  </b-page>
+  </split-page>
 </template>
 
 <script lang="ts">
diff --git a/web/pages/tier-list/brawler/_brawler.vue b/web/pages/tier-list/brawler/_brawler.vue
index dbc6fd20..d98d8571 100644
--- a/web/pages/tier-list/brawler/_brawler.vue
+++ b/web/pages/tier-list/brawler/_brawler.vue
@@ -1,5 +1,22 @@
 <template>
-  <b-page :title="brawlerMetadata?.name">
+  <split-page :title="brawlerMetadata?.name">
+    <template v-slot:aside-left>
+      <brawler-aside
+        id="aside"
+        :brawler-metadata="brawlerMetadata"
+        class="!h-auto max-w-sm"
+      ></brawler-aside>
+    </template>
+
+    <template v-slot:aside-right>
+      <b-scroll-spy
+        id="sidenav"
+        :sections="sections"
+        toc-class="hidden lg:block"
+        nav-class="top-14"
+      ></b-scroll-spy>
+    </template>
+
     <breadcrumbs
       id="breadcrumbs"
       :links="[{
@@ -12,219 +29,204 @@
       class="mt-4"
     ></breadcrumbs>
 
-    <ad
-      ad-slot="8533352178"
-      first
-    ></ad>
-
-    <b-split-dashboard>
-      <template v-slot:aside>
-        <div class="lg:h-screen lg:flex lg:flex-col lg:py-8 lg:mt-8">
-          <brawler-aside
-            id="aside"
-            :brawler-metadata="brawlerMetadata"
-            class="!h-auto"
-          ></brawler-aside>
-
-          <b-scroll-spy
-            id="sidenav"
-            :sections="sections"
-            nav-class="top-14 lg:top-0"
-            toc-class="hidden lg:block"
-            class="lg:mt-8 lg:overflow-y-auto hide-scrollbar"
-          ></b-scroll-spy>
-        </div>
-      </template>
+    <b-page-section
+      id="overview"
+      ref="overviewSection"
+      :title="$t('brawler.overview')"
+      v-observe-visibility="{
+        callback: makeVisibilityCallback('overview'),
+        once: true,
+      }"
+    >
+      <brawler-overview
+        :brawler-id="brawlerMetadata?.slug"
+        :scraped-data="scrapedData"
+      ></brawler-overview>
+    </b-page-section>
 
-      <b-page-section
-        id="overview"
-        ref="overviewSection"
-        :title="$t('brawler.overview')"
-        v-observe-visibility="{
-          callback: makeVisibilityCallback('overview'),
-          once: true,
-        }"
-      >
-        <brawler-overview
-          :brawler-id="brawlerMetadata?.slug"
-          :scraped-data="scrapedData"
-        ></brawler-overview>
-      </b-page-section>
-
-      <b-page-section
-        id="accessory"
-        ref="accessorySection"
-        :title="$t('brawler.accessories')"
-        v-observe-visibility="{
-          callback: makeVisibilityCallback('accessories'),
-          once: true,
-        }"
-        lazy
-      >
-        <brawler-accessories
-          :brawler-metadata="brawlerMetadata"
-          :scraped-data="scrapedData"
-        ></brawler-accessories>
-      </b-page-section>
-
-      <b-page-section
-        id="synergy"
-        ref="synergySection"
-        :title="$t('brawler.synergies-and-weaknesses-for', { brawler: brawlerMetadata?.name })"
-        v-observe-visibility="{
-          callback: makeVisibilityCallback('synergies'),
-          once: true,
-        }"
-        lazy
-      >
-        <brawler-synergies
-          :brawler-metadata="brawlerMetadata"
-        ></brawler-synergies>
-      </b-page-section>
-
-      <b-page-section
-        id="maps"
-        ref="mapsSection"
-        :title="$t('brawler.current-maps.title', { brawler: brawlerMetadata?.name })"
-        v-observe-visibility="{
-          callback: makeVisibilityCallback('current-maps'),
-          once: true,
-        }"
-        lazy
-      >
-        <brawler-active-events
-          :brawler-metadata="brawlerMetadata"
-        ></brawler-active-events>
-      </b-page-section>
-
-      <b-page-section
-        id="modes"
-        ref="modesSection"
-        :title="$t('brawler.modes.title', { brawler: brawlerMetadata?.name })"
-        v-observe-visibility="{
-          callback: makeVisibilityCallback('modes'),
-          once: true,
-        }"
-        lazy
-      >
-        <brawler-modes-stats
-          :brawler-metadata="brawlerMetadata"
-        ></brawler-modes-stats>
+    <ad lazy></ad>
 
-        <p class="mt-4 prose dark:prose-invert text-text/75">
-          {{ $t('brawler.viable-info') }}
-        </p>
-      </b-page-section>
-
-      <b-page-section
-        id="trends"
-        ref="trendsSection"
-        :title="$t('brawler.trends', { brawler: brawlerMetadata?.name })"
-        v-observe-visibility="{
-          callback: makeVisibilityCallback('trends'),
-          once: true,
-        }"
-        lazy
-      >
-        <template v-slot:description>
-          <p class="mt-4 prose dark:prose-invert text-text/75">
-            {{ $t('brawler.trend.description', { brawler: brawlerMetadata?.name }) }}
-          </p>
-        </template>
-
-        <brawler-trends-card
-          :brawler-brawlstars-id="brawlerMetadata?.brawlstarsId"
-          class="mt-4"
-        ></brawler-trends-card>
-      </b-page-section>
-
-      <b-page-section
-        id="trophies"
-        ref="trophiesSection"
-        :title="$t('brawler.by-trophies', { brawler: brawlerMetadata?.name })"
-        v-observe-visibility="{
-          callback: makeVisibilityCallback('trophy-graphs'),
-          once: true,
-        }"
-        lazy
-      >
-        <brawler-trophy-graphs
-          :brawler-brawlstars-id="brawlerMetadata?.brawlstarsId"
-        ></brawler-trophy-graphs>
+    <b-page-section
+      id="accessory"
+      ref="accessorySection"
+      :title="$t('brawler.accessories')"
+      v-observe-visibility="{
+        callback: makeVisibilityCallback('accessories'),
+        once: true,
+      }"
+      lazy
+    >
+      <brawler-accessories
+        :brawler-metadata="brawlerMetadata"
+        :scraped-data="scrapedData"
+      ></brawler-accessories>
+    </b-page-section>
 
+    <b-page-section
+      id="synergy"
+      ref="synergySection"
+      :title="$t('brawler.synergies-and-weaknesses-for', { brawler: brawlerMetadata?.name })"
+      v-observe-visibility="{
+        callback: makeVisibilityCallback('synergies'),
+        once: true,
+      }"
+      lazy
+    >
+      <brawler-synergies
+        :brawler-metadata="brawlerMetadata"
+      ></brawler-synergies>
+    </b-page-section>
+
+    <ad lazy></ad>
+
+    <b-page-section
+      id="maps"
+      ref="mapsSection"
+      :title="$t('brawler.current-maps.title', { brawler: brawlerMetadata?.name })"
+      v-observe-visibility="{
+        callback: makeVisibilityCallback('current-maps'),
+        once: true,
+      }"
+      lazy
+    >
+      <brawler-active-events
+        :brawler-metadata="brawlerMetadata"
+      ></brawler-active-events>
+    </b-page-section>
+
+    <b-page-section
+      id="modes"
+      ref="modesSection"
+      :title="$t('brawler.modes.title', { brawler: brawlerMetadata?.name })"
+      v-observe-visibility="{
+        callback: makeVisibilityCallback('modes'),
+        once: true,
+      }"
+      lazy
+    >
+      <brawler-modes-stats
+        :brawler-metadata="brawlerMetadata"
+      ></brawler-modes-stats>
+
+      <p class="mt-4 prose dark:prose-invert text-text/75">
+        {{ $t('brawler.viable-info') }}
+      </p>
+    </b-page-section>
+
+    <ad lazy></ad>
+
+    <b-page-section
+      id="trends"
+      ref="trendsSection"
+      :title="$t('brawler.trends', { brawler: brawlerMetadata?.name })"
+      v-observe-visibility="{
+        callback: makeVisibilityCallback('trends'),
+        once: true,
+      }"
+      lazy
+    >
+      <template v-slot:description>
         <p class="mt-4 prose dark:prose-invert text-text/75">
-          {{ $t('brawler.disclaimer') }}
+          {{ $t('brawler.trend.description', { brawler: brawlerMetadata?.name }) }}
         </p>
-      </b-page-section>
-
-      <!--
-        some Brawlers don't have skins, pins, voicelines etc.
-        but until scrapedData is fetched, render the placeholders
-      -->
-      <b-page-section
-        id="skins"
-        v-if="scrapedData == undefined || (scrapedData.skins != undefined && scrapedData.skins.length > 0)"
-        ref="skinsSection"
-        :title="$t('skin', 2)"
-        v-observe-visibility="{
-          callback: makeVisibilityCallback('skins'),
-          once: true,
-        }"
-        lazy
-      >
-        <brawler-skins
-          :scraped-data="scrapedData"
-        ></brawler-skins>
-      </b-page-section>
-
-      <b-page-section
-        id="pins"
-        v-if="scrapedData == undefined || (scrapedData.pins != undefined && scrapedData.pins.length > 0)"
-        ref="pinsSection"
-        :title="$t('pin', 2)"
-        v-observe-visibility="{
-          callback: makeVisibilityCallback('pins'),
-          once: true,
-        }"
-        lazy
-      >
-        <brawler-pins
-          :scraped-data="scrapedData"
-        ></brawler-pins>
-      </b-page-section>
-
-      <b-page-section
-        id="voicelines"
-        v-if="scrapedData == undefined || (scrapedData.voicelines != undefined && scrapedData.voicelines.length > 0)"
-        ref="voicelineSection"
-        :title="$t('voiceline', 2)"
-        v-observe-visibility="{
-          callback: makeVisibilityCallback('voicelines'),
-          once: true,
-        }"
-        lazy
-      >
-        <brawler-voicelines
-          :scraped-data="scrapedData"
-        ></brawler-voicelines>
-      </b-page-section>
-
-      <b-page-section
-        id="balance-changes"
-        v-if="scrapedData == undefined || (scrapedData.history != undefined && scrapedData.history.length > 0)"
-        :title="$t('balance-changes')"
-        ref="balanceChangesSection"
-        v-observe-visibility="{
-          callback: makeVisibilityCallback('balance-changes'),
-          once: true,
-        }"
-        lazy
-      >
-        <brawler-history
-          :scraped-data="scrapedData"
-        ></brawler-history>
-      </b-page-section>
-    </b-split-dashboard>
+      </template>
+
+      <brawler-trends-card
+        :brawler-brawlstars-id="brawlerMetadata?.brawlstarsId"
+        class="mt-4"
+      ></brawler-trends-card>
+    </b-page-section>
+
+    <b-page-section
+      id="trophies"
+      ref="trophiesSection"
+      :title="$t('brawler.by-trophies', { brawler: brawlerMetadata?.name })"
+      v-observe-visibility="{
+        callback: makeVisibilityCallback('trophy-graphs'),
+        once: true,
+      }"
+      lazy
+    >
+      <brawler-trophy-graphs
+        :brawler-brawlstars-id="brawlerMetadata?.brawlstarsId"
+      ></brawler-trophy-graphs>
+
+      <p class="mt-4 prose dark:prose-invert text-text/75">
+        {{ $t('brawler.disclaimer') }}
+      </p>
+    </b-page-section>
+
+    <ad lazy></ad>
+
+    <!--
+      some Brawlers don't have skins, pins, voicelines etc.
+      but until scrapedData is fetched, render the placeholders
+    -->
+    <b-page-section
+      id="skins"
+      v-if="scrapedData == undefined || (scrapedData.skins != undefined && scrapedData.skins.length > 0)"
+      ref="skinsSection"
+      :title="$t('skin', 2)"
+      v-observe-visibility="{
+        callback: makeVisibilityCallback('skins'),
+        once: true,
+      }"
+      lazy
+    >
+      <brawler-skins
+        :scraped-data="scrapedData"
+      ></brawler-skins>
+    </b-page-section>
+
+    <b-page-section
+      id="pins"
+      v-if="scrapedData == undefined || (scrapedData.pins != undefined && scrapedData.pins.length > 0)"
+      ref="pinsSection"
+      :title="$t('pin', 2)"
+      v-observe-visibility="{
+        callback: makeVisibilityCallback('pins'),
+        once: true,
+      }"
+      lazy
+    >
+      <brawler-pins
+        :scraped-data="scrapedData"
+      ></brawler-pins>
+    </b-page-section>
+
+    <b-page-section
+      id="voicelines"
+      v-if="scrapedData == undefined || (scrapedData.voicelines != undefined && scrapedData.voicelines.length > 0)"
+      ref="voicelineSection"
+      :title="$t('voiceline', 2)"
+      v-observe-visibility="{
+        callback: makeVisibilityCallback('voicelines'),
+        once: true,
+      }"
+      lazy
+    >
+      <brawler-voicelines
+        :scraped-data="scrapedData"
+      ></brawler-voicelines>
+    </b-page-section>
+
+    <ad lazy></ad>
+
+    <b-page-section
+      id="balance-changes"
+      v-if="scrapedData == undefined || (scrapedData.history != undefined && scrapedData.history.length > 0)"
+      :title="$t('balance-changes')"
+      ref="balanceChangesSection"
+      v-observe-visibility="{
+        callback: makeVisibilityCallback('balance-changes'),
+        once: true,
+      }"
+      lazy
+    >
+      <brawler-history
+        :scraped-data="scrapedData"
+      ></brawler-history>
+    </b-page-section>
 
     <b-page-section
       id="attribution"
@@ -238,19 +240,14 @@
         :scraped-data="scrapedData"
       ></brawler-attribution>
     </b-page-section>
-
-    <ad
-      ad-slot="6837127123"
-      lazy
-    ></ad>
-  </b-page>
+  </split-page>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent, ref } from 'vue'
 import { useAsync, useCacheHeaders, useConfig, useMeta } from '~/composables/compat'
 import { ObserveVisibility } from 'vue-observe-visibility'
-import { BSplitDashboard, BScrollSpy, BPageSection } from '@schneefux/klicker/components'
+import { BScrollSpy, BPageSection } from '@schneefux/klicker/components'
 import { useTrackScroll } from '~/composables/gtag'
 import { ScrapedBrawler } from '~/model/Web'
 import { useI18n } from 'vue-i18n'
@@ -263,7 +260,6 @@ export default defineComponent({
   },
   components: {
     BScrollSpy,
-    BSplitDashboard,
     BPageSection,
   },
   setup() {
diff --git a/web/pages/tier-list/brawler/index.vue b/web/pages/tier-list/brawler/index.vue
index c9fbc8a8..75bd53e3 100644
--- a/web/pages/tier-list/brawler/index.vue
+++ b/web/pages/tier-list/brawler/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <b-page :title="$t('brawlers.title')">
+  <split-page :title="$t('brawlers.title')">
     <p id="description" class="mt-4 prose dark:prose-invert">
       {{ $t('brawlers.description') }}
     </p>
@@ -9,11 +9,6 @@
       class="mt-8"
     ></brawlers-roll>
 
-    <ad
-      ad-slot="6446102315"
-      first
-    ></ad>
-
     <b-page-section
       id="tier-list"
       :title="$t('tier-list.all.title')"
@@ -34,12 +29,7 @@
         class="mt-8"
       ></map-views>
     </b-page-section>
-
-    <ad
-      ad-slot="7838173054"
-      lazy
-    ></ad>
-  </b-page>
+  </split-page>
 </template>
 
 <script lang="ts">
@@ -48,11 +38,15 @@ import { ObserveVisibility } from 'vue-observe-visibility'
 import { useTrackScroll } from '~/composables/gtag'
 import { useCacheHeaders, useMeta } from '~/composables/compat'
 import { useI18n } from 'vue-i18n'
+import { BPageSection } from '@schneefux/klicker/components'
 
 export default defineComponent({
   directives: {
     ObserveVisibility,
   },
+  components: {
+    BPageSection,
+  },
   setup() {
     const i18n = useI18n()
 
diff --git a/web/pages/tier-list/gadgets.vue b/web/pages/tier-list/gadgets.vue
index 6d4225d0..c76c3e72 100644
--- a/web/pages/tier-list/gadgets.vue
+++ b/web/pages/tier-list/gadgets.vue
@@ -1,7 +1,5 @@
 <template>
-  <b-page :title="$t('tier-list.gadget.title')">
-    <accessory-tier-list kind="gadgets"></accessory-tier-list>
-  </b-page>
+  <accessory-tier-list-page kind="gadgets"></accessory-tier-list-page>
 </template>
 
 <script lang="ts">
diff --git a/web/pages/tier-list/gears.vue b/web/pages/tier-list/gears.vue
index 9e5fcf99..96c77b55 100644
--- a/web/pages/tier-list/gears.vue
+++ b/web/pages/tier-list/gears.vue
@@ -1,7 +1,5 @@
 <template>
-  <b-page :title="$t('tier-list.gear.title')">
-    <accessory-tier-list kind="gears"></accessory-tier-list>
-  </b-page>
+  <accessory-tier-list-page kind="gears"></accessory-tier-list-page>
 </template>
 
 <script lang="ts">
diff --git a/web/pages/tier-list/map/index.vue b/web/pages/tier-list/map/index.vue
index 3d5813f9..e1e6b286 100644
--- a/web/pages/tier-list/map/index.vue
+++ b/web/pages/tier-list/map/index.vue
@@ -1,102 +1,86 @@
 <template>
-  <b-page :title="$t('tier-list.maps.title')">
+  <split-page :title="$t('tier-list.maps.title')">
+    <template v-slot:aside-right>
+      <b-scroll-spy
+        id="sidenav"
+        :sections="sections"
+        toc-class="hidden lg:block"
+        nav-class="top-14"
+      ></b-scroll-spy>
+    </template>
+
     <p id="description" class="mt-4 prose dark:prose-invert">
       {{ $t('tier-list.maps.description') }}
-     </p>
-
-    <ad
-      ad-slot="8877810024"
-      first
-    ></ad>
-
-    <b-split-dashboard>
-      <template v-slot:aside>
-        <b-scroll-spy
-          id="sidenav"
-          :sections="sections"
-          nav-class="top-14 lg:top-0"
-          toc-class="hidden lg:block"
-          class="lg:mt-8 lg:overflow-y-auto hide-scrollbar"
-        ></b-scroll-spy>
-      </template>
-
-      <b-page-section
-        id="active"
-        ref="activeSection"
-        :title="$t('events.active.title')"
-        v-observe-visibility="{
-          callback: makeVisibilityCallback('current_events'),
-          once: true,
-        }"
-      >
-        <events-roll
-          :events="current"
-          with-data
-        ></events-roll>
-      </b-page-section>
-
-      <b-page-section
-        id="ranked"
-        ref="rankedSection"
-        :title="$t('events.ranked.title')"
-        v-observe-visibility="{
-          callback: makeVisibilityCallback('ranked_events'),
-          once: true,
-        }"
-        lazy
-      >
-        <b-button
-          :to="localePath('/tier-list/ranked')"
-          class="mt-4"
-          primary
-          sm
-        >
-          {{ $t('action.open.tier-list.ranked') }}
-        </b-button>
-      </b-page-section>
-
-      <ad
-        ad-slot="4150756245"
-        lazy
-      ></ad>
-
-      <b-page-section
-        id="upcoming"
-        ref="upcomingSection"
-        :title="$t('events.upcoming.title')"
-        v-observe-visibility="{
-          callback: makeVisibilityCallback('upcoming_events'),
-          once: true,
-        }"
-        lazy
-      >
-        <events-roll
-          :events="upcoming"
-          with-data
-        ></events-roll>
-      </b-page-section>
-
-      <b-page-section
-        id="season"
-        :title="$t('events.season.title')"
-        ref="seasonSection"
-        v-observe-visibility="{
-          callback: makeVisibilityCallback('maps'),
-          once: true,
-        }"
-        lazy
+    </p>
+
+    <b-page-section
+      id="active"
+      ref="activeSection"
+      :title="$t('events.active.title')"
+      v-observe-visibility="{
+        callback: makeVisibilityCallback('current_events'),
+        once: true,
+      }"
+    >
+      <events-roll
+        :events="current"
+        with-data
+      ></events-roll>
+    </b-page-section>
+
+    <b-page-section
+      id="ranked"
+      ref="rankedSection"
+      :title="$t('events.ranked.title')"
+      v-observe-visibility="{
+        callback: makeVisibilityCallback('ranked_events'),
+        once: true,
+      }"
+      lazy
+    >
+      <b-button
+        :to="localePath('/tier-list/ranked')"
+        class="mt-4"
+        primary
+        sm
       >
-        <events-roll
-          :events="allEvents"
-        ></events-roll>
-      </b-page-section>
-    </b-split-dashboard>
-
-    <ad
-      ad-slot="3577381889"
+        {{ $t('action.open.tier-list.ranked') }}
+      </b-button>
+    </b-page-section>
+
+    <ad lazy></ad>
+
+    <b-page-section
+      id="upcoming"
+      ref="upcomingSection"
+      :title="$t('events.upcoming.title')"
+      v-observe-visibility="{
+        callback: makeVisibilityCallback('upcoming_events'),
+        once: true,
+      }"
+      lazy
+    >
+      <events-roll
+        :events="upcoming"
+        with-data
+      ></events-roll>
+    </b-page-section>
+
+    <b-page-section
+      id="season"
+      :title="$t('events.season.title')"
+      ref="seasonSection"
+      v-observe-visibility="{
+        callback: makeVisibilityCallback('maps'),
+        once: true,
+      }"
       lazy
-    ></ad>
-  </b-page>
+    >
+      <events-roll
+        :events="allEvents"
+      ></events-roll>
+    </b-page-section>
+  </split-page>
 </template>
 
 <script lang="ts">
@@ -106,7 +90,7 @@ import { ObserveVisibility } from 'vue-observe-visibility'
 import { formatAsJsonLd, unformatMode } from '~/lib/util'
 import { ActiveEvent } from '~/model/Api'
 import { useTrackScroll } from '~/composables/gtag'
-import { BPageSection, BSplitDashboard, BScrollSpy } from '@schneefux/klicker/components'
+import { BPageSection, BScrollSpy } from '@schneefux/klicker/components'
 import { useAllEvents } from '~/composables/dimension-values'
 import { useCurrentAndUpcomingEvents } from '~/composables/events'
 import { useI18n } from 'vue-i18n'
@@ -117,7 +101,6 @@ export default defineComponent({
   },
   components: {
     BPageSection,
-    BSplitDashboard,
     BScrollSpy,
   },
   setup() {
diff --git a/web/pages/tier-list/mode/_mode/index.vue b/web/pages/tier-list/mode/_mode/index.vue
index f37af267..423007e1 100644
--- a/web/pages/tier-list/mode/_mode/index.vue
+++ b/web/pages/tier-list/mode/_mode/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <b-page :title="$t('tier-list.mode.title', { mode: $t('mode.' + mode) })">
+  <split-page :title="$t('tier-list.mode.title', { mode: $t('mode.' + mode) })">
     <mode-map-jumper
       id="mode-map-jumper"
       :mode="mode"
@@ -9,11 +9,6 @@
       {{ $t('tier-list.mode.description', { mode: $t('mode.' + mode) }) }}
     </p>
 
-    <ad
-      ad-slot="2291234880"
-      first
-    ></ad>
-
     <b-page-section
       id="maps"
       v-if="events != undefined && events.length > 0"
@@ -32,10 +27,7 @@
       <events-roll :events="events"></events-roll>
     </b-page-section>
 
-    <ad
-      ad-slot="2263314723"
-      lazy
-    ></ad>
+    <ad lazy></ad>
 
     <b-page-section id="dashboard">
       <map-views
@@ -43,17 +35,12 @@
         ga-category="mode"
       ></map-views>
     </b-page-section>
-
-    <ad
-      ad-slot="8497550588"
-      lazy
-    ></ad>
-  </b-page>
+  </split-page>
 </template>
 
 <script lang="ts">
 import { camelToKebab, kebabToCamel } from '~/lib/util'
-import { BDashboardCell, BPage, BPageSection, } from '@schneefux/klicker/components'
+import { BDashboardCell, BPageSection } from '@schneefux/klicker/components'
 import { ObserveVisibility } from 'vue-observe-visibility'
 import { defineComponent, computed } from 'vue'
 import { useTrackScroll } from '~/composables/gtag'
@@ -67,7 +54,6 @@ export default defineComponent({
     ObserveVisibility,
   },
   components: {
-    BPage,
     BPageSection,
     BDashboardCell,
   },
diff --git a/web/pages/tier-list/mode/_mode/map/_map.vue b/web/pages/tier-list/mode/_mode/map/_map.vue
index 6213667a..d6bd6faf 100644
--- a/web/pages/tier-list/mode/_mode/map/_map.vue
+++ b/web/pages/tier-list/mode/_mode/map/_map.vue
@@ -1,17 +1,44 @@
 <template>
-  <b-page
+  <split-page
     v-if="event != undefined"
     :title="$t('tier-list.map.title', { map: mapName })"
   >
-    <mode-map-jumper
-      id="mode-map-jumper"
-      :mode="event.mode"
-      :map="event.map"
-      :event-id="event.id"
-    ></mode-map-jumper>
-
-    <template v-if="aiReport != undefined">
-      <client-only>
+    <template v-slot:aside-left>
+      <template v-if="showImage">
+        <mode-map-jumper
+          id="mode-map-jumper"
+          :mode="event.mode"
+          :map="event.map"
+          :event-id="event.id"
+        ></mode-map-jumper>
+
+        <b-lightbox id="lightbox" v-model="lightboxOpen">
+          <map-img
+            :event-id="event.id"
+            :map="event.map"
+            clazz="h-full object-contain"
+            size=""
+          ></map-img>
+        </b-lightbox>
+
+        <event-picture-card
+          id="aside"
+          :mode="event.mode"
+          :map="event.map"
+          :event-id="event.id"
+          class="relative max-w-sm"
+          @click.capture.prevent="lightboxOpen = true"
+        >
+          <fa
+            :icon="faExpand"
+            class="absolute bottom-4 right-6"
+          ></fa>
+        </event-picture-card>
+      </template>
+    </template>
+
+    <b-page-section>
+      <client-only v-if="aiReport != undefined">
         <template v-slot:placeholder>
           <ai-report-1
             :timestamp="aiReport.timestamp"
@@ -41,72 +68,31 @@
           </template>
         </experiment>
       </client-only>
-    </template>
-
-    <p
-      v-else
-      id="description"
-      class="prose dark:prose-invert"
-    >
-      {{ $t('tier-list.map.description', { map: mapName, mode: $t('mode.' + event.mode) }) }}
-    </p>
-
-    <ad
-      ad-slot="1665534416"
-      first
-    ></ad>
-
-    <b-lightbox id="lightbox" v-model="lightboxOpen">
-      <map-img
-        :event-id="event.id"
-        :map="event.map"
-        clazz="h-full object-contain"
-        size=""
-      ></map-img>
-    </b-lightbox>
+      <p
+        v-else
+        id="description"
+        class="prose dark:prose-invert"
+      >
+        {{ $t('tier-list.map.description', { map: mapName, mode: $t('mode.' + event.mode) }) }}
+      </p>
+    </b-page-section>
 
     <b-page-section>
-      <b-split-dashboard>
-        <template
-          v-if="showImage"
-          v-slot:aside
-        >
-          <event-picture-card
-            id="aside"
-            :mode="event.mode"
-            :map="event.map"
-            :event-id="event.id"
-            class="relative"
-            @click.capture.prevent="lightboxOpen = true"
-          >
-            <fa
-              :icon="faExpand"
-              class="absolute bottom-4 right-6"
-            ></fa>
-          </event-picture-card>
-        </template>
-
-        <map-views
-          id="dashboard"
-          :mode="event.mode"
-          :map="event.map"
-          :event-id="event.id"
-          ga-category="map"
-        ></map-views>
-      </b-split-dashboard>
+      <map-views
+        id="dashboard"
+        :mode="event.mode"
+        :map="event.map"
+        :event-id="event.id"
+        ga-category="map"
+      ></map-views>
     </b-page-section>
-
-    <ad
-      ad-slot="3536131238"
-      lazy
-    ></ad>
-  </b-page>
+  </split-page>
 </template>
 
 <script lang="ts">
 import { defineComponent, computed, ref } from 'vue'
 import { deslugify, kebabToCamel } from '~/lib/util'
-import { BSplitDashboard, BCard, BLightbox, BPage, BPageSection, Fa } from '@schneefux/klicker/components'
+import { BCard, BLightbox, BPageSection, Fa } from '@schneefux/klicker/components'
 import { useMapName } from '~/composables/map'
 import { faExpand } from '@fortawesome/free-solid-svg-icons'
 import { useApi, useAsync, useCacheHeaders, useConfig, useMeta, useValidate } from '~/composables/compat'
@@ -124,10 +110,8 @@ interface Map {
 export default defineComponent({
   components: {
     Fa,
-    BSplitDashboard,
     BLightbox,
     BCard,
-    BPage,
     BPageSection,
   },
   async setup() {
diff --git a/web/pages/tier-list/ranked.vue b/web/pages/tier-list/ranked.vue
index 72f4c385..0169cae8 100644
--- a/web/pages/tier-list/ranked.vue
+++ b/web/pages/tier-list/ranked.vue
@@ -1,73 +1,60 @@
 <template>
-  <b-page :title="$t('tier-list.ranked.title')">
+  <split-page :title="$t('tier-list.ranked.title')">
+    <template v-slot:aside-right>
+      <b-scroll-spy
+        id="sidenav"
+        :sections="sections"
+        toc-class="hidden lg:block"
+        nav-class="top-14"
+      ></b-scroll-spy>
+    </template>
+
     <p id="description" class="mt-4 prose dark:prose-invert">
       {{ $t('tier-list.ranked.description') }}
     </p>
 
-    <ad
-      ad-slot="2291234880"
-      first
-    ></ad>
-
-    <b-split-dashboard>
-      <template v-slot:aside>
-        <b-scroll-spy
-          id="sidenav"
-          :sections="sections"
-          nav-class="top-14 lg:top-0"
-          toc-class="hidden lg:block"
-          class="lg:mt-8 lg:overflow-y-auto hide-scrollbar"
-        ></b-scroll-spy>
-      </template>
-
-      <b-page-section
-        id="teambuilder"
-        :title="$t('draft-tool.title.short')"
-        ref="draftTool"
-        v-observe-visibility="{
-          callback: makeVisibilityCallback('team-builder'),
-          once: true,
-        }"
-      >
-        <p class="prose dark:prose-invert">
-          {{ $t('draft-tool.description.short') }}
-        </p>
-        <b-button
-          :to="localePath('/team-builder')"
-          class="mt-4"
-          primary
-          sm
-        >
-          {{ $t('action.open.draft-tool') }}
-        </b-button>
-      </b-page-section>
-
-      <b-page-section
-        v-for="(events, mode) in eventsByMode"
-        :id="`maps-${mode}`"
-        :title="$t(`mode.${mode}`)"
-        :ref="el => setModeSectionRef(mode, el as any)"
-        v-observe-visibility="{
-          callback: makeVisibilityCallback(`ranked-${mode}`),
-          once: true,
-        }"
+    <b-page-section
+      id="teambuilder"
+      :title="$t('draft-tool.title.short')"
+      ref="draftTool"
+      v-observe-visibility="{
+        callback: makeVisibilityCallback('team-builder'),
+        once: true,
+      }"
+    >
+      <p class="prose dark:prose-invert">
+        {{ $t('draft-tool.description.short') }}
+      </p>
+      <b-button
+        :to="localePath('/team-builder')"
+        class="mt-4"
+        primary
+        sm
       >
-        <events-roll
-          :events="events"
-          with-data
-        ></events-roll>
-      </b-page-section>
-    </b-split-dashboard>
+        {{ $t('action.open.draft-tool') }}
+      </b-button>
+    </b-page-section>
 
-    <ad
-      ad-slot="8497550588"
-      lazy
-    ></ad>
-  </b-page>
+    <b-page-section
+      v-for="(events, mode) in eventsByMode"
+      :id="`maps-${mode}`"
+      :title="$t(`mode.${mode}`)"
+      :ref="el => setModeSectionRef(mode, el as any)"
+      v-observe-visibility="{
+        callback: makeVisibilityCallback(`ranked-${mode}`),
+        once: true,
+      }"
+    >
+      <events-roll
+        :events="events"
+        with-data
+      ></events-roll>
+    </b-page-section>
+  </split-page>
 </template>
 
 <script lang="ts">
-import { BPage, BPageSection, BDashboardCell, BScrollSpy, BSplitDashboard } from '@schneefux/klicker/components'
+import { BPageSection, BDashboardCell, BScrollSpy } from '@schneefux/klicker/components'
 import { ObserveVisibility } from 'vue-observe-visibility'
 import { defineComponent, computed, ref } from 'vue'
 import { useTrackScroll } from '~/composables/gtag'
@@ -82,9 +69,7 @@ export default defineComponent({
     ObserveVisibility,
   },
   components: {
-    BPage,
     BPageSection,
-    BSplitDashboard,
     BDashboardCell,
     BScrollSpy,
   },
diff --git a/web/pages/tier-list/starpowers.vue b/web/pages/tier-list/starpowers.vue
index 203b55e7..84b293cc 100644
--- a/web/pages/tier-list/starpowers.vue
+++ b/web/pages/tier-list/starpowers.vue
@@ -1,7 +1,5 @@
 <template>
-  <b-page :title="$t('tier-list.starpower.title')">
-    <accessory-tier-list kind="starpowers"></accessory-tier-list>
-  </b-page>
+  <accessory-tier-list-page kind="starpowers"></accessory-tier-list-page>
 </template>
 
 <script lang="ts">
diff --git a/web/renderer/app.ts b/web/renderer/app.ts
index d3ea9d59..0cd69fc8 100644
--- a/web/renderer/app.ts
+++ b/web/renderer/app.ts
@@ -9,7 +9,6 @@ import { createPersistedState } from 'pinia-plugin-persistedstate'
 import VueGtagPlugin, { query } from 'vue-gtag'
 import { createI18n, I18n } from 'vue-i18n'
 import { ClientOnly } from '@schneefux/klicker/components'
-import Adsense from '~/components/adsense.vue'
 import { createHead } from '@unhead/vue'
 import { InferSeoMetaPlugin } from '@unhead/addons'
 import { defaultLocale, locales } from '~/locales'
@@ -146,7 +145,6 @@ function createApp(pageContext: PageContext) {
   app.use(pinia)
 
   app.component('ClientOnly', ClientOnly)
-  app.component('Adsense', Adsense)
 
   app.config.globalProperties.localePath = (path: string) => localePath(path, i18n.global)