diff --git a/src/hooks/heat-info.ts b/src/hooks/heat-info.ts
index 2472f2f..17a2cdf 100644
--- a/src/hooks/heat-info.ts
+++ b/src/hooks/heat-info.ts
@@ -1,6 +1,10 @@
 import { type Ref, ref, watch } from 'vue'
 import { useFetch, useTimeoutPoll } from '@vueuse/core'
-import type { ServoCurrentHeatInfoConfig } from './stream-pools'
+export interface ServoCurrentHeatInfoConfig {
+  system: 'servo'
+  baseUrl: string
+  competitionId?: number
+}
 
 export interface ServoHeatInfo {
   PROGRAM: 'ON' | ''
diff --git a/src/router.ts b/src/router.ts
index 249e089..b13871b 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -8,19 +8,22 @@ const router = createRouter({
     { path: '/auth', component: async () => import('./views/Auth.vue') },
 
     { path: '/groups', component: async () => import('./views/Groups.vue'), meta: { authRequired: true, menu: 'Groups', menuOrder: 2 } },
-    { path: '/groups/:groupId/live', component: async () => import('./views/Live.vue'), meta: { fullscreen: true, authRequired: true } },
-    { path: '/groups/:groupId/on-floor', component: async () => import('./views/OnFloor.vue'), meta: { fullscreen: true, authRequired: true } },
-    { path: '/groups/:groupId/next-up', component: async () => import('./views/NextUp.vue'), meta: { fullscreen: true, authRequired: true } },
-    { path: '/groups/:groupId/leaderboard', component: async () => import('./views/Leaderboard.vue'), meta: { fullscreen: true, authRequired: true } },
+    { path: '/groups/:groupId/live', component: async () => import('./views/ropescore/Live.vue'), meta: { fullscreen: true, authRequired: true } },
+    { path: '/groups/:groupId/on-floor', component: async () => import('./views/ropescore/OnFloor.vue'), meta: { fullscreen: true, authRequired: true } },
+    { path: '/groups/:groupId/next-up', component: async () => import('./views/ropescore/NextUp.vue'), meta: { fullscreen: true, authRequired: true } },
+    { path: '/groups/:groupId/leaderboard', component: async () => import('./views/ropescore/Leaderboard.vue'), meta: { fullscreen: true, authRequired: true } },
 
-    { path: '/device-stream', component: async () => import('./views/DeviceStreamConfig.vue'), meta: { authRequired: true, menu: 'Device Stream', menuOrder: 3 } },
-    { path: '/device-stream/live', component: async () => import('./views/DeviceStreamLive.vue'), meta: { fullscreen: true, authRequired: true } },
+    { path: '/device-stream', component: async () => import('./views/device-stream/Config.vue'), meta: { authRequired: true, menu: 'Device Stream', menuOrder: 3 } },
+    { path: '/device-stream/display', component: async () => import('./views/device-stream/Display.vue'), meta: { fullscreen: true, authRequired: true } },
 
-    { path: '/podium', component: async () => import('./views/PodiumConfig.vue'), meta: { menu: 'Podium', menuOrder: 4 } },
-    { path: '/podium/live', component: async () => import('./views/PodiumLive.vue'), meta: { fullscreen: true } },
+    { path: '/podium', component: async () => import('./views/podium/Config.vue'), meta: { menu: 'Podium', menuOrder: 4 } },
+    { path: '/podium/display', component: async () => import('./views/podium/Display.vue'), meta: { fullscreen: true } },
 
-    { path: '/on-floor-wall/', component: async () => import('./views/OnFloorWallConfig.vue'), meta: { menu: 'On Floor Wall', menuOrder: 5 } },
-    { path: '/on-floor-wall/:vendor/:id', component: async () => import('./views/OnFloorWallLive.vue'), meta: { fullscreen: true } }
+    { path: '/on-floor-wall/', component: async () => import('./views/on-floor-wall/Config.vue'), meta: { menu: 'On Floor Wall', menuOrder: 5 } },
+    { path: '/on-floor-wall/display', component: async () => import('./views/on-floor-wall/Display.vue'), meta: { fullscreen: true } },
+
+    { path: '/qualifiers/', component: async () => import('./views/qualifiers/Config.vue'), meta: { menu: 'Qualifiers', menuOrder: 6 } },
+    { path: '/qualifiers/display', component: async () => import('./views/qualifiers/Display.vue'), meta: { fullscreen: true } }
   ]
 })
 export default router
diff --git a/src/views/Groups.vue b/src/views/Groups.vue
index 27070ee..3ad649d 100644
--- a/src/views/Groups.vue
+++ b/src/views/Groups.vue
@@ -16,7 +16,7 @@
           </div>
 
           <menu class="p-0 m-0 flex justify-end items-start flex-col">
-            <button-link :to="`/groups/${group.id}/live?theme=${theme}&key-color=${keyColor}`">
+            <button-link :to="`/groups/${group.id}/display?theme=${theme}&key-color=${keyColor}`">
               Live
             </button-link>
 
diff --git a/src/views/DeviceStreamConfig.vue b/src/views/device-stream/Config.vue
similarity index 97%
rename from src/views/DeviceStreamConfig.vue
rename to src/views/device-stream/Config.vue
index ef95d6d..96551db 100644
--- a/src/views/DeviceStreamConfig.vue
+++ b/src/views/device-stream/Config.vue
@@ -127,7 +127,7 @@
           Screen {{ screenId }}
         </h3>
         <div>
-          <button-link :to="`/device-stream/live?screen-id=${screenId}&theme=${theme}`" target="_blank">
+          <button-link :to="`/device-stream/display?screen-id=${screenId}&theme=${theme}`" target="_blank">
             Show Scores
           </button-link>
           <text-button color="red" @click="removeScreen(screenId)">
@@ -199,15 +199,15 @@
 
 <script lang="ts" setup>
 import { ref, computed } from 'vue'
-import { useDeviceStreamPools } from '../hooks/stream-pools'
-import { DeviceStreamShareStatus, useRequestStreamShareMutation, useUserStreamSharesQuery } from '../graphql/generated'
+import { useDeviceStreamPools } from './use-device-stream-pools'
+import { DeviceStreamShareStatus, useRequestStreamShareMutation, useUserStreamSharesQuery } from '../../graphql/generated'
 import { useHead } from '@vueuse/head'
 
 import { TextButton, TextField, SelectField, ButtonLink, NumberField } from '@ropescore/components'
 import IconLoading from 'virtual:icons/mdi/loading'
 import IconPlus from 'virtual:icons/mdi/plus'
-import useFirebaseAuth from '../hooks/firebase-auth'
-import { useTheme } from '../hooks/theme'
+import useFirebaseAuth from '../../hooks/firebase-auth'
+import { useTheme } from '../../hooks/theme'
 
 useHead({
   title: 'Device Stream'
diff --git a/src/views/DeviceStreamLive.vue b/src/views/device-stream/Display.vue
similarity index 92%
rename from src/views/DeviceStreamLive.vue
rename to src/views/device-stream/Display.vue
index 6d09e03..d5cfae1 100644
--- a/src/views/DeviceStreamLive.vue
+++ b/src/views/device-stream/Display.vue
@@ -90,18 +90,18 @@
 
 <script lang="ts" setup>
 import { computed, reactive, ref, watch } from 'vue'
-import { type DeviceStreamJudgeInfo, type DeviceStreamMarkAddedSubscription, useDeviceStreamMarkAddedSubscription } from '../graphql/generated'
-import { type ScoreTally, type Mark, formatList } from '../helpers'
-import { useDeviceStreamPools } from '../hooks/stream-pools'
+import { type DeviceStreamJudgeInfo, type DeviceStreamMarkAddedSubscription, useDeviceStreamMarkAddedSubscription } from '../../graphql/generated'
+import { type ScoreTally, type Mark, formatList } from '../../helpers'
+import { useDeviceStreamPools } from './use-device-stream-pools'
 import { useHead } from '@vueuse/head'
 import { useRouteQuery } from '@vueuse/router'
-import { useTheme } from '../hooks/theme'
+import { useTheme } from '../../hooks/theme'
 
-import DeviceNotSet from '../components/DeviceNotSet.vue'
-import SpeedLiveScore from '../components/SpeedLiveScore.vue'
-import TimingLiveScore from '../components/TimingLiveScore.vue'
-import UnsupportedCompetitionEvent from '../components/UnsupportedCompetitionEvent.vue'
-import { getHeatNameList, useHeatInfo } from '../hooks/heat-info'
+import DeviceNotSet from '../../components/DeviceNotSet.vue'
+import SpeedLiveScore from '../../components/SpeedLiveScore.vue'
+import TimingLiveScore from '../../components/TimingLiveScore.vue'
+import UnsupportedCompetitionEvent from '../../components/UnsupportedCompetitionEvent.vue'
+import { getHeatNameList, useHeatInfo } from '../../hooks/heat-info'
 import { useDateFormat, useTimestamp } from '@vueuse/core'
 
 useHead({
diff --git a/src/hooks/stream-pools.ts b/src/views/device-stream/use-device-stream-pools.ts
similarity index 82%
rename from src/hooks/stream-pools.ts
rename to src/views/device-stream/use-device-stream-pools.ts
index b9283f5..1ef86ae 100644
--- a/src/hooks/stream-pools.ts
+++ b/src/views/device-stream/use-device-stream-pools.ts
@@ -1,16 +1,11 @@
 import { useLocalStorage } from '@vueuse/core'
+import type { ServoCurrentHeatInfoConfig } from '../../hooks/heat-info'
 
 export interface StreamPool {
   deviceId?: string
   label?: number
 }
 
-export interface ServoCurrentHeatInfoConfig {
-  system: 'servo'
-  baseUrl: string
-  competitionId?: number
-}
-
 export interface ScreenConfig {
   rows: number
   cols: number
diff --git a/src/views/OnFloorWallConfig.vue b/src/views/on-floor-wall/Config.vue
similarity index 85%
rename from src/views/OnFloorWallConfig.vue
rename to src/views/on-floor-wall/Config.vue
index a03890d..63eba14 100644
--- a/src/views/OnFloorWallConfig.vue
+++ b/src/views/on-floor-wall/Config.vue
@@ -2,7 +2,7 @@
   <div class="mb-4 mx-auto container flex justify-between">
     <div />
     <button-link
-      :to="`/on-floor-wall/${settings.heatInfo?.system}/${settings.heatInfo?.competitionId}?theme=${theme}`"
+      :to="`/on-floor-wall/display?theme=${theme}`"
       :disabled="settings.heatInfo?.system == null || settings.heatInfo?.competitionId == null"
     >
       Display
@@ -47,12 +47,12 @@
 </template>
 
 <script lang="ts" setup>
-import countries from '../assets/countries.json'
+import countries from '../../assets/countries.json'
 import { SelectField, NumberField, TextField, ButtonLink } from '@ropescore/components'
 import { useHead } from '@vueuse/head'
-import PhotoPicker from '../components/PhotoPicker.vue'
-import { useTheme } from '../hooks/theme'
-import { useOnFloorWallSettings } from '../hooks/on-floor-wall'
+import PhotoPicker from '../../components/PhotoPicker.vue'
+import { useTheme } from '../../hooks/theme'
+import { useOnFloorWallSettings } from './use-on-floor-wall'
 
 useHead({
   title: 'On Floor Wall'
diff --git a/src/views/OnFloorWallLive.vue b/src/views/on-floor-wall/Display.vue
similarity index 62%
rename from src/views/OnFloorWallLive.vue
rename to src/views/on-floor-wall/Display.vue
index 8eecd2f..964e543 100644
--- a/src/views/OnFloorWallLive.vue
+++ b/src/views/on-floor-wall/Display.vue
@@ -79,7 +79,6 @@
           class="flex h-full items-center justify-end col-start-[var(--station-col,1)] row-start-[calc(var(--station-row,1)+1)] bg-white p-2"
         >
           <img
-            :style="`--station :${heat.Station}`"
             class="border-2"
             :class="{
               'border-gray-800': theme !== 'dark',
@@ -116,10 +115,10 @@
 <script lang="ts" setup>
 import { computed, ref, watch } from 'vue'
 import { useHead } from '@vueuse/head'
-import { formatList, getOpfsImgUrl } from '../helpers'
-import { useTheme } from '../hooks/theme'
-import { useOnFloorWallSettings } from '../hooks/on-floor-wall'
-import { getHeatNameList, useHeatInfo, type ServoHeatInfo } from '../hooks/heat-info'
+import { formatList, getOpfsImgUrl } from '../../helpers'
+import { useTheme } from '../../hooks/theme'
+import { useOnFloorWallSettings } from './use-on-floor-wall'
+import { getHeatNameList, useHeatInfo, type ServoHeatInfo } from '../../hooks/heat-info'
 import { useDateFormat, useTimestamp } from '@vueuse/core'
 
 useHead({
@@ -143,15 +142,7 @@ function flagUrl (hi: ServoHeatInfo) {
   return hi.TeamCountryFlagUrl || (hi.TeamCountryCode ? `/flags/${hi.TeamCountryCode.toLocaleLowerCase()}.svg` : undefined)
 }
 
-// const heatInfos = heatInfo.data
-const heatInfos = ref<ServoHeatInfo[] | null>([
-  {"PROGRAM":"ON","Station":1,"HeatNumber":"10","Event":"Single Rope Double Unders Relay","Team":"Denmark","TeamCountryCode":"DK","TeamCountryName":"Denmark","TeamCountryFlagUrl":"https://scoring.ijru.sport/Content/flags/svg/dk.svg","Part1":"Liva Bondesen","Part2":"Mathilde Vig Jeppesen","Part3":"","Part4":"","Part5":"","Part1_Last":"Bondesen","Part2_Last":"Vig Jeppesen","Part3_Last":"","Part4_Last":"","Part5_Last":"","DivisionName":"EOT","AgeGroupName":"12-15","GenderName":"Female","EntryNumber":76,"CompEventEntryID":"a0652070-037d-4227-99bb-fab54772bc18"},
-  {"PROGRAM":"","Station":2,"HeatNumber":"10","Event":"Single Rope Double Unders Relay","Team":"Denmark","TeamCountryCode":"DK","TeamCountryName":"Denmark","TeamCountryFlagUrl":"https://scoring.ijru.sport/Content/flags/svg/dk.svg","Part1":"Ida Stampe Bornø","Part2":"Kassandra Lu-Nielsen","Part3":"","Part4":"","Part5":"","Part1_Last":"Stampe Bornø","Part2_Last":"Lu-Nielsen","Part3_Last":"","Part4_Last":"","Part5_Last":"","DivisionName":"EOT","AgeGroupName":"12-15","GenderName":"Female","EntryNumber":77,"CompEventEntryID":"c3cfc6ee-46ea-4e29-8dca-1f5da1fb5089"},
-  {"PROGRAM":"","Station":3,"HeatNumber":"10","Event":"Single Rope Double Unders Relay","Team":"Belgium","TeamCountryCode":"BE","TeamCountryName":"Belgium","TeamCountryFlagUrl":"https://scoring.ijru.sport/Content/flags/svg/be.svg","Part1":"Klara De Baets","Part2":"Emma Vander Gheynst","Part3":"","Part4":"","Part5":"","Part1_Last":"De Baets","Part2_Last":"Vander Gheynst","Part3_Last":"","Part4_Last":"","Part5_Last":"","DivisionName":"EOT","AgeGroupName":"12-15","GenderName":"Female","EntryNumber":73,"CompEventEntryID":"54624b11-195f-4340-a7a9-2bfd65fc377c"},
-  {"PROGRAM":"","Station":4,"HeatNumber":"10","Event":"Single Rope Double Unders Relay","Team":"Sweden","TeamCountryCode":"SE","TeamCountryName":"Sweden","TeamCountryFlagUrl":"https://scoring.ijru.sport/Content/flags/svg/se.svg","Part1":"Alva Karlsson","Part2":"Majken Olsson","Part3":"","Part4":"","Part5":"","Part1_Last":"Karlsson","Part2_Last":"Olsson","Part3_Last":"","Part4_Last":"","Part5_Last":"","DivisionName":"EOT","AgeGroupName":"12-15","GenderName":"Female","EntryNumber":81,"CompEventEntryID":"946ac1dc-5cdc-4283-a254-3fb460622a70"},
-  {"PROGRAM":"","Station":5,"HeatNumber":"10","Event":"Single Rope Double Unders Relay","Team":"Germany","TeamCountryCode":"DE","TeamCountryName":"Germany","TeamCountryFlagUrl":"https://scoring.ijru.sport/Content/flags/svg/de.svg","Part1":"Theresa Pätzmann","Part2":"Frieda Rauscher","Part3":"","Part4":"","Part5":"","Part1_Last":"Pätzmann","Part2_Last":"Rauscher","Part3_Last":"","Part4_Last":"","Part5_Last":"","DivisionName":"EOT","AgeGroupName":"12-15","GenderName":"Female","EntryNumber":79,"CompEventEntryID":"5d81c54f-9489-4fa6-a858-5da1e3667663"},
-  {"PROGRAM":"","Station":6,"HeatNumber":"10","Event":"Single Rope Double Unders Relay","Team":"Sweden","TeamCountryCode":"SE","TeamCountryName":"Sweden","TeamCountryFlagUrl":"https://scoring.ijru.sport/Content/flags/svg/se.svg","Part1":"Isabella Danfelter","Part2":"Molly Löfberg","Part3":"","Part4":"","Part5":"","Part1_Last":"Danfelter","Part2_Last":"Löfberg","Part3_Last":"","Part4_Last":"","Part5_Last":"","DivisionName":"EOT","AgeGroupName":"12-15","GenderName":"Female","EntryNumber":82,"CompEventEntryID":"03b3a376-90d8-41ab-8515-20366848d056"},
-])
+const heatInfos = heatInfo.data
 
 const grid = computed(() => {
   const maxStation = Math.max(...((heatInfos.value ?? [] as ServoHeatInfo[]).map(hi => hi.Station)))
@@ -206,8 +197,4 @@ main.dark {
   background-repeat: no-repeat;
   background-size: cover;
 }
-
-.overflow-ellipsis {
-  text-overflow: ellipsis;
-}
 </style>
diff --git a/src/hooks/on-floor-wall.ts b/src/views/on-floor-wall/use-on-floor-wall.ts
similarity index 80%
rename from src/hooks/on-floor-wall.ts
rename to src/views/on-floor-wall/use-on-floor-wall.ts
index aa1b35d..0938989 100644
--- a/src/hooks/on-floor-wall.ts
+++ b/src/views/on-floor-wall/use-on-floor-wall.ts
@@ -1,5 +1,5 @@
 import { useLocalStorage } from '@vueuse/core'
-import type { ServoCurrentHeatInfoConfig } from './stream-pools'
+import type { ServoCurrentHeatInfoConfig } from '../../hooks/heat-info'
 
 export interface OnFloorWallSettings {
   heatInfo?: ServoCurrentHeatInfoConfig
diff --git a/src/views/PodiumConfig.vue b/src/views/podium/Config.vue
similarity index 92%
rename from src/views/PodiumConfig.vue
rename to src/views/podium/Config.vue
index 28bb5e8..a1c05af 100644
--- a/src/views/PodiumConfig.vue
+++ b/src/views/podium/Config.vue
@@ -11,7 +11,7 @@
         Title
       </text-button>
     </div>
-    <button-link :to="`/podium/live?theme=${theme}`">
+    <button-link :to="`/podium/display?theme=${theme}`">
       Display
     </button-link>
   </div>
@@ -79,12 +79,12 @@
 
 <script lang="ts" setup>
 import { nextTick, ref } from 'vue'
-import countries from '../assets/countries.json'
+import countries from '../../assets/countries.json'
 import { TextButton, SelectField, ButtonLink, CheckboxField, TextField } from '@ropescore/components'
 import { useHead } from '@vueuse/head'
-import { usePodium } from '../hooks/podium'
-import PhotoPicker from '../components/PhotoPicker.vue'
-import { useTheme } from '../hooks/theme'
+import { usePodium } from './use-podium'
+import PhotoPicker from '../../components/PhotoPicker.vue'
+import { useTheme } from '../../hooks/theme'
 
 useHead({
   title: 'Podium'
diff --git a/src/views/PodiumLive.vue b/src/views/podium/Display.vue
similarity index 95%
rename from src/views/PodiumLive.vue
rename to src/views/podium/Display.vue
index 51e7052..5fea0d4 100644
--- a/src/views/PodiumLive.vue
+++ b/src/views/podium/Display.vue
@@ -49,9 +49,9 @@
 <script lang="ts" setup>
 import { ref, watch } from 'vue'
 import { useHead } from '@vueuse/head'
-import { usePodium, type PodiumSettings } from '../hooks/podium'
-import { getOpfsImgUrl } from '../helpers'
-import { useTheme } from '../hooks/theme'
+import { usePodium, type PodiumSettings } from './use-podium'
+import { getOpfsImgUrl } from '../../helpers'
+import { useTheme } from '../../hooks/theme'
 
 useHead({
   title: '📺 Podium (Live)'
diff --git a/src/hooks/podium.ts b/src/views/podium/use-podium.ts
similarity index 100%
rename from src/hooks/podium.ts
rename to src/views/podium/use-podium.ts
diff --git a/src/views/qualifiers/Config.vue b/src/views/qualifiers/Config.vue
new file mode 100644
index 0000000..397210b
--- /dev/null
+++ b/src/views/qualifiers/Config.vue
@@ -0,0 +1,135 @@
+<template>
+  <div class="mb-4 mx-auto container flex justify-between">
+    <div>
+      <text-button color="blue" @click="bc.postMessage('show')">
+        Show
+      </text-button>
+      <text-button color="orange" @click="bc.postMessage('hide')">
+        Hide
+      </text-button>
+    </div>
+    <button-link
+      :to="`/qualifiers/display?theme=${theme}`"
+    >
+      Display
+    </button-link>
+  </div>
+
+  <div class="mx-auto container grid grid-cols-[max-content] items-center justify-center mt-8">
+    <div>
+      <text-field
+        v-model="settings.title"
+        label="Title (Event name)"
+      />
+      <text-field
+        v-model="settings.subTitle"
+        label="Subtitle (Gender category)"
+      />
+    </div>
+
+    <div class="self-center">
+      <photo-picker
+        v-model="settings.background"
+        label="Background image"
+      />
+    </div>
+  </div>
+
+  <div class="mx-auto container flex flex-col gap-4 items-center justify-center mt-8">
+    <text-button
+      color="blue"
+      class="self-end"
+      @click="newQualifier()"
+    >
+      New Qualifier
+    </text-button>
+
+    <div v-for="qualifier of qualifiers" :key="qualifier.id" class="w-full border-b mb-4 pb-4">
+      <div class="flex justify-end">
+        <text-button
+          color="red"
+          @click="removeQualifier(qualifier.id)"
+        >
+          Remove Qualifier
+        </text-button>
+      </div>
+
+      <select-field
+        v-model="qualifier.countryCode"
+        label="Country"
+        :data-list="countriesList"
+      />
+
+      <div
+        v-for="name, idx of qualifier.names"
+        :id="`name-${qualifier.id}-${idx}`"
+        :key="idx"
+      >
+        <text-field
+          :model-value="name"
+          :label="`Name ${idx + 1}`"
+          @update:model-value="updateName(qualifier, idx, $event)"
+        />
+      </div>
+
+      <div
+        :id="`name-${qualifier.id}-new`"
+      >
+        <text-field
+          v-model="newName"
+          label="New Name"
+          @update:model-value="addName(qualifier, $event)"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useHead } from '@vueuse/head'
+import countries from '../../assets/countries.json'
+import { ButtonLink, TextField, TextButton, SelectField } from '@ropescore/components'
+import { useTheme } from '../../hooks/theme'
+import { useQualifiers, type Qualifier } from './use-qualifiers'
+import PhotoPicker from '../../components/PhotoPicker.vue'
+import { nextTick, ref } from 'vue'
+
+useHead({
+  title: 'Qualifiers'
+})
+
+const theme = useTheme()
+const { settings, qualifiers } = useQualifiers()
+const bc = new BroadcastChannel('rs-qualifiers')
+
+const countriesList = countries.map(c => ({ text: c.name, value: c.code }))
+
+function newQualifier () {
+  qualifiers.value.push({ id: crypto.randomUUID(), names: [] })
+}
+function removeQualifier (id: string) {
+  const idx = qualifiers.value.findIndex(q => q.id === id)
+  if (idx !== -1) qualifiers.value.splice(idx, 1)
+}
+
+function updateName (qualifier: Qualifier, nameIdx: number, name: string | number) {
+  if (typeof name !== 'string' || name == null || name.trim() === '')  {
+    qualifier.names.splice(nameIdx, 1)
+    const next = document.querySelector<HTMLInputElement>(`#name-${qualifier.id}-${nameIdx - 1} input`) ??
+      document.querySelector<HTMLInputElement>(`#name-${qualifier.id}-new input`)
+    next?.focus()
+  } else {
+    qualifier.names.splice(nameIdx, 1, name)
+  }
+}
+
+const newName = ref('')
+function addName (qualifier: Qualifier, name: string | number) {
+  if (typeof name !== 'string') return
+  qualifier.names.push(name)
+  nextTick(() => {
+    document.querySelector<HTMLInputElement>(`#name-${qualifier.id}-${qualifier.names.length - 1} input`)?.focus()
+    newName.value = ''
+  })
+}
+</script>
diff --git a/src/views/qualifiers/Display.vue b/src/views/qualifiers/Display.vue
new file mode 100644
index 0000000..d02ddc0
--- /dev/null
+++ b/src/views/qualifiers/Display.vue
@@ -0,0 +1,142 @@
+<template>
+  <main
+    class="flex items-center justify-center gap-6 px-8 py-6 max-w-[100vw]"
+    :class="{
+      'dark bg-black text-white': theme === 'dark',
+      'bg-white text-black': theme !== 'dark'
+    }"
+  >
+    <div
+      :style="`--cols: ${grid.cols}; --rows: ${grid.rows};`"
+      class="grid max-w-full overflow-hidden w-full grid-cols-[repeat(var(--cols),10rem_1fr)] grid-rows-[repeat(calc(var(--rows)+1),1fr)] items-center justify-around gap-y-4"
+    >
+      <div class="col-span-[calc(var(--cols)*2)] text-center font-bold text-6xl">
+        <h1 class="text-center font-bold text-6xl">
+          {{ titles.title }}
+        </h1>
+        <h2 class="text-center font-bold text-4xl">
+          {{ titles.subTitle }}
+        </h2>
+      </div>
+
+      <template v-for="qualifier, idx of qualifiers" :key="qualifier.id">
+        <div
+          :style="`--station-col: ${idxToPos(idx).col}; --station-row: ${idxToPos(idx).row}`"
+          class="flex h-full items-center justify-end col-start-[var(--station-col,1)] row-start-[calc(var(--station-row,1)+1)] bg-white p-2"
+        >
+          <img
+            v-if="qualifier.countryCode != null"
+            class="border-2"
+            :class="{
+              'border-gray-800': theme !== 'dark',
+              'border-gray-400': theme === 'dark'
+            }"
+            alt=""
+            :src="`/flags/${qualifier.countryCode}.svg`"
+          >
+        </div>
+        <div
+          :style="`--station-col: ${idxToPos(idx).col}; --station-row: ${idxToPos(idx).row}`"
+          class="col-start-[calc(var(--station-col,1)+1)] row-start-[calc(var(--station-row,1)+1)] text-4xl bg-white p-6"
+        >
+          <p class="font-bold">
+            {{ formatList(qualifier.names) }}
+          </p>
+          <p v-if="qualifier.countryCode != null">
+            {{ countryNames[qualifier.countryCode] }}
+          </p>
+        </div>
+      </template>
+    </div>
+  </main>
+</template>
+
+<script lang="ts" setup>
+import { useHead } from '@vueuse/head'
+import countries from '../../assets/countries.json'
+import { useTheme } from '../../hooks/theme'
+import { useQualifiers, type Qualifier, type QualifiersSettings } from './use-qualifiers'
+import { computed, ref, watch } from 'vue'
+import { formatList, getOpfsImgUrl } from '../../helpers'
+
+
+useHead({
+  title: '📺 Qualifiers (Live)'
+})
+
+const bc = new BroadcastChannel('rs-qualifiers')
+
+const theme = useTheme()
+const { settings } = useQualifiers()
+const qualifiers = ref<Qualifier[]>([])
+const titles = ref<Pick<QualifiersSettings, 'title' | 'subTitle'>>({})
+
+const countryNames = Object.fromEntries(countries.map(c => [c.code, c.name]))
+
+const bgUrlVar = ref('')
+watch(() => settings.value.background, async newBg => {
+  bgUrlVar.value = newBg ? `url(${await getOpfsImgUrl(newBg)})` : ''
+}, { immediate: true })
+
+bc.addEventListener('message', evt => {
+  if (evt.data === 'show') {
+    const qs = localStorage.getItem('rs-qualifiers')
+    const st = localStorage.getItem('rs-qualifiers-settings')
+    qualifiers.value = qs ? JSON.parse(qs) : null
+    titles.value = st ? JSON.parse(st) : null
+  } else if (evt.data === 'hide') {
+    qualifiers.value = []
+    titles.value = {}
+  }
+})
+
+const grid = computed(() => {
+  let cols = 1
+  let rows = 1
+
+  if (qualifiers.value.length === 2) {
+    cols = 2
+  } else if (qualifiers.value.length === 3) {
+    rows = 3
+  } else if (qualifiers.value.length === 4) {
+    cols = 2
+    rows = 2
+  } else if (qualifiers.value.length <= 8) {
+    cols = 2
+    rows = Math.ceil(qualifiers.value.length / 2)
+  } else {
+    cols = 3
+    rows = Math.ceil(qualifiers.value.length / 3)
+  }
+
+  return { cols, rows }
+})
+
+function idxToPos (idx: number) {
+  for (let col = 0; col < grid.value.cols; col++) {
+    for (let row = 0; row < grid.value.rows; row++) {
+      if ((col * grid.value.rows) + row === idx) {
+        return { col: (col * 2) + 1, row: row + 1 }
+      }
+    }
+  }
+  return { col: 1, row: 1 }
+}
+</script>
+
+<style scoped>
+main {
+  --bgUrl: v-bind(bgUrlVar);
+  background: var(--bgUrl, white);
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+main.dark {
+  background: var(--bgUrl, black);
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+</style>
diff --git a/src/views/qualifiers/use-qualifiers.ts b/src/views/qualifiers/use-qualifiers.ts
new file mode 100644
index 0000000..1c0b89c
--- /dev/null
+++ b/src/views/qualifiers/use-qualifiers.ts
@@ -0,0 +1,23 @@
+import { useLocalStorage } from '@vueuse/core'
+
+export interface QualifiersSettings {
+  background?: string
+  title?: string
+  subTitle?: string
+}
+
+export interface Qualifier {
+  id: string
+  countryCode?: string
+  names: string[]
+}
+
+const settings = useLocalStorage<QualifiersSettings>('rs-qualifiers-settings', {})
+const qualifiers = useLocalStorage<Qualifier[]>('rs-qualifiers', [])
+
+export function useQualifiers () {
+  return {
+    settings,
+    qualifiers
+  }
+}
diff --git a/src/views/Leaderboard.vue b/src/views/ropescore/Leaderboard.vue
similarity index 97%
rename from src/views/Leaderboard.vue
rename to src/views/ropescore/Leaderboard.vue
index bb10b29..050a6b7 100644
--- a/src/views/Leaderboard.vue
+++ b/src/views/ropescore/Leaderboard.vue
@@ -121,13 +121,13 @@
 <script setup lang="ts">
 import { useHead } from '@vueuse/head'
 import { useRouteParams, useRouteQuery } from '@vueuse/router'
-import { useLeaderboardQuery, useHeatChangedSubscription, CategoryType, type TeamFragment, type ResultVersionType } from '../graphql/generated'
+import { useLeaderboardQuery, useHeatChangedSubscription, CategoryType, type TeamFragment, type ResultVersionType } from '../../graphql/generated'
 import { computed, ref, watch } from 'vue'
 import { parseCompetitionEventDefinition, type EntryResult, type TableHeader, type OverallResult } from '@ropescore/rulesets'
 import { useIntervalFn } from '@vueuse/core'
-import { useCompetitionEvent } from '../hooks/ruleset'
-import { formatList } from '../helpers'
-import { useTheme } from '../hooks/theme'
+import { useCompetitionEvent } from '../../hooks/ruleset'
+import { formatList } from '../../helpers'
+import { useTheme } from '../../hooks/theme'
 
 import SvGFLogo from '../assets/svgf-icon-svenskgymnastik-white.svg'
 
diff --git a/src/views/Live.vue b/src/views/ropescore/Live.vue
similarity index 96%
rename from src/views/Live.vue
rename to src/views/ropescore/Live.vue
index 911620f..4e57028 100644
--- a/src/views/Live.vue
+++ b/src/views/ropescore/Live.vue
@@ -45,14 +45,14 @@
 
 <script lang="ts" setup>
 import { computed, reactive, watch, ref } from 'vue'
-import { useHeatEntriesScoresheetsQuery, useStreamMarkAddedSubscription, useGroupInfoQuery, useHeatChangedSubscription, useScoresheetChangedSubscription, type MarkScoresheetFragment, type ScoresheetBaseFragment, type StreamMarkAddedSubscription } from '../graphql/generated'
+import { useHeatEntriesScoresheetsQuery, useStreamMarkAddedSubscription, useGroupInfoQuery, useHeatChangedSubscription, useScoresheetChangedSubscription, type MarkScoresheetFragment, type ScoresheetBaseFragment, type StreamMarkAddedSubscription } from '../../graphql/generated'
 import { useRoute } from 'vue-router'
-import { CompetitionEventType, filterLatestScoresheets, getCompetitionEventType, type Mark, processMark, type ScoreTally } from '../helpers'
+import { CompetitionEventType, filterLatestScoresheets, getCompetitionEventType, type Mark, processMark, type ScoreTally } from '../../helpers'
 
-import SpeedLiveScore from '../components/SpeedLiveScore.vue'
-import UnsupportedCompetitionEvent from '../components/UnsupportedCompetitionEvent.vue'
+import SpeedLiveScore from '../../components/SpeedLiveScore.vue'
+import UnsupportedCompetitionEvent from '../../components/UnsupportedCompetitionEvent.vue'
 import { useHead } from '@vueuse/head'
-import { useTheme } from '../hooks/theme'
+import { useTheme } from '../../hooks/theme'
 
 useHead({
   title: '📺 Competition (Live)'
diff --git a/src/views/NextUp.vue b/src/views/ropescore/NextUp.vue
similarity index 96%
rename from src/views/NextUp.vue
rename to src/views/ropescore/NextUp.vue
index 1da6cb4..a7d6ff4 100644
--- a/src/views/NextUp.vue
+++ b/src/views/ropescore/NextUp.vue
@@ -57,11 +57,11 @@
 
 <script lang="ts" setup>
 import { computed, watch } from 'vue'
-import { useGroupEntriesQuery, useGroupInfoQuery, useHeatChangedSubscription } from '../graphql/generated'
+import { useGroupEntriesQuery, useGroupInfoQuery, useHeatChangedSubscription } from '../../graphql/generated'
 import { useRoute } from 'vue-router'
-import EntryInfoCard from '../components/EntryInfoCard.vue'
+import EntryInfoCard from '../../components/EntryInfoCard.vue'
 import { useHead } from '@vueuse/head'
-import { useTheme } from '../hooks/theme'
+import { useTheme } from '../../hooks/theme'
 
 useHead({
   title: '📺 Competition (Next Up)'
diff --git a/src/views/OnFloor.vue b/src/views/ropescore/OnFloor.vue
similarity index 96%
rename from src/views/OnFloor.vue
rename to src/views/ropescore/OnFloor.vue
index 1f5804c..65fc7d4 100644
--- a/src/views/OnFloor.vue
+++ b/src/views/ropescore/OnFloor.vue
@@ -75,11 +75,11 @@
 
 <script lang="ts" setup>
 import { computed, watch } from 'vue'
-import { useGroupInfoQuery, useHeatChangedSubscription, useHeatEntriesQuery } from '../graphql/generated'
+import { useGroupInfoQuery, useHeatChangedSubscription, useHeatEntriesQuery } from '../../graphql/generated'
 import { useRoute } from 'vue-router'
 import { useHead } from '@vueuse/head'
-import { formatList } from '../helpers'
-import { useKeyColor, useTheme } from '../hooks/theme'
+import { formatList } from '../../helpers'
+import { useKeyColor, useTheme } from '../../hooks/theme'
 
 import SvGFLogo from '../assets/svgf-icon-svenskgymnastik-white.svg'