diff --git a/components/dashboard/DashboardTimeSeriesChart.vue b/components/dashboard/DashboardTimeSeriesChart.vue
index c850749f..35dc4cf3 100644
--- a/components/dashboard/DashboardTimeSeriesChart.vue
+++ b/components/dashboard/DashboardTimeSeriesChart.vue
@@ -52,7 +52,7 @@ const crosshairTemplate = (d: GetFraKaareStatisticsChurchStatisticsSnapshot) =>
       :grid-line="false"
       :tick-line="false"
       :tick-format="
-        (v: number, i: number) => data[i]?.snapshotDate?.toLocaleDateString()
+        (timestamp: number) => new Date(timestamp).toLocaleDateString()
       "
     />
     <VisAxis
diff --git a/package.json b/package.json
index 223cd69b..33d844b5 100644
--- a/package.json
+++ b/package.json
@@ -21,10 +21,11 @@
   },
   "dependencies": {
     "@auth0/auth0-vue": "^2.3.3",
-    "@bcc-code/bmm-sdk-fetch": "^8.7.4",
+    "@bcc-code/bmm-sdk-fetch": "^8.7.10",
     "@floating-ui/vue": "^1.0.6",
     "@headlessui/vue": "^1.7.19",
     "@microsoft/applicationinsights-web": "^3.0.8",
+    "@neoconfetti/vue": "^2.2.1",
     "@pinia/nuxt": "^0.5.1",
     "@sentry/vue": "^8.27.0",
     "@tiptap/starter-kit": "^2.9.1",
diff --git a/pages/dashboards/fra-kaare.vue b/pages/dashboards/fra-kaare.vue
index 29da7782..1a7f6406 100644
--- a/pages/dashboards/fra-kaare.vue
+++ b/pages/dashboards/fra-kaare.vue
@@ -1,329 +1,28 @@
 <script setup lang="ts">
-import { StatisticsApi } from "@bcc-code/bmm-sdk-fetch";
-import type { GetFraKaareStatisticsResponse } from "@bcc-code/bmm-sdk-fetch";
-import { breakpointsTailwind } from "@vueuse/core";
-import DashboardDataTable from "~/components/dashboard/DashboardDataTable.vue";
-import type { SortDirection } from "~/components/dashboard/DashboardDataTable.vue";
-
-const { t } = useI18n();
-setTitle(() => t("dashboards.title"));
-
-definePageMeta({
-  middleware: ["frakaare-dashboard-viewer"],
-});
-
-const sortDirection = ref<SortDirection>("descending");
-const churchSize = ref<"small" | "large">("large");
-
-const statistics = ref<GetFraKaareStatisticsResponse>();
-onBeforeMount(async () => {
-  statistics.value = await new StatisticsApi().statisticsFraKaareGet();
-});
-
-watch(statistics, (stats) => {
-  if (!stats) return;
-  churchSize.value = (stats.largeChurches || []).some(
-    (item) => item.churchName === stats.highlightedChurchName,
-  )
-    ? "large"
-    : "small";
-});
-
-const rows = computed(
-  () =>
-    (churchSize.value === "large"
-      ? statistics.value?.largeChurches
-      : statistics.value?.smallChurches) ?? [],
-);
-
-function sortPercentageColumn(
-  a: number | null | undefined,
-  b: number | null | undefined,
-) {
-  if (typeof a !== "number" || typeof b !== "number") return 0;
-  if (a === b) return 0;
-  if (sortDirection.value === "descending") {
-    return b - a;
-  }
-  return a - b;
-}
-
-function sortStringColumn(
-  a: string | null | undefined,
-  b: string | null | undefined,
-) {
-  if (typeof a !== "string" || typeof b !== "string") return 0;
-  if (sortDirection.value === "ascending") {
-    return b.localeCompare(a);
-  }
-  return a.localeCompare(b);
-}
-
-const breakpoints = useBreakpoints(breakpointsTailwind);
-const isSmallScreeen = breakpoints.smaller("lg");
-
-const shouldHideColumns = computed(
-  () => churchSize.value === "small" || isSmallScreeen.value,
-);
-
-const columnGroupWidth = computed(() => {
-  if (churchSize.value === "small" && !isSmallScreeen.value) return 2;
-  if (shouldHideColumns.value) return 1;
-  return 5;
-});
+import { NuxtLink } from "#components";
 </script>
 
 <template>
-  <div class="space-y-12">
-    <PageHeading>Dashboard: Fra Kåre</PageHeading>
-
-    <section
-      id="chart"
-      class="flex min-h-[400px] flex-col rounded-2xl bg-background-2 p-8"
-    >
-      <h2 class="type-heading-3 mb-4">
-        {{ statistics?.highlightedChurchName }}
-      </h2>
-      <DashboardTimeSeriesChart
-        v-if="statistics?.timeSeries"
-        :data="statistics.timeSeries"
-      />
-    </section>
-
-    <section id="table">
-      <div class="mb-4">
-        <DropdownMenu placement="bottom-start">
-          <ButtonStyled size="small" intent="tertiary">
-            {{ churchSize === "large" ? "Store menigheter" : "Små menigheter" }}
-            <NuxtIcon name="icon.chevron.down" class="ml-1" />
-          </ButtonStyled>
-          <template #items>
-            <DropdownMenuGroup>
-              <DropdownMenuItem @click="churchSize = 'large'">
-                Store menigheter
-              </DropdownMenuItem>
-              <DropdownMenuItem @click="churchSize = 'small'">
-                Små menigheter
-              </DropdownMenuItem>
-            </DropdownMenuGroup>
-          </template>
-        </DropdownMenu>
+  <div>
+    <header class="mb-8">
+      <PageHeading>Dashboard: Fra Kåre</PageHeading>
+      <div class="flex border-b border-label-separator">
+        <NuxtLink
+          to="/dashboards/fra-kaare/overview"
+          class="px-4 py-2"
+          active-class="border-b-4 border-tint"
+        >
+          Statistikk
+        </NuxtLink>
+        <NuxtLink
+          to="/dashboards/fra-kaare/raffle"
+          class="px-4 py-2"
+          active-class="border-b-4 border-tint"
+        >
+          Trekk en vinner
+        </NuxtLink>
       </div>
-
-      <DashboardDataTable
-        v-if="statistics"
-        :key="`${churchSize}-${isSmallScreeen}`"
-        v-model:sort-direction="sortDirection"
-        :items="rows"
-        sort-by="oneEpisodePercentAverage"
-        :column-groups="[
-          {
-            key: 'oneEpisode',
-            text: 'Har hørt minst én episode i 2025',
-            start: 1,
-            span: columnGroupWidth,
-          },
-          {
-            key: 'allEpisodes',
-            text: 'Totale episoder hørt',
-            start: 5,
-            span: columnGroupWidth,
-          },
-        ]"
-        :columns="[
-          {
-            key: 'churchName',
-            text: 'Menighet',
-            sortMethod: (a, b) => sortStringColumn(a.churchName, b.churchName),
-          },
-          {
-            key: 'oneEpisodePercent13To17',
-            text: '13-17',
-            sortMethod: (a, b) =>
-              sortPercentageColumn(
-                a.oneEpisodePercent13To17,
-                b.oneEpisodePercent13To17,
-              ),
-            hide: shouldHideColumns,
-          },
-          {
-            key: 'oneEpisodePercent18To25',
-            text: '18-25',
-            sortMethod: (a, b) =>
-              sortPercentageColumn(
-                a.oneEpisodePercent18To25,
-                b.oneEpisodePercent18To25,
-              ),
-            hide: shouldHideColumns,
-          },
-          {
-            key: 'oneEpisodePercent26To35',
-            text: '26-35',
-            sortMethod: (a, b) =>
-              sortPercentageColumn(
-                a.oneEpisodePercent26To35,
-                b.oneEpisodePercent26To35,
-              ),
-            hide: shouldHideColumns,
-          },
-          {
-            key: 'oneEpisodePercentAverage',
-            text: 'Gjennomsnitt',
-            props: () =>
-              !shouldHideColumns ? { class: 'bg-background-2' } : {},
-            sortMethod: (a, b) =>
-              sortPercentageColumn(
-                a.oneEpisodePercentAverage,
-                b.oneEpisodePercentAverage,
-              ),
-          },
-          {
-            key: 'oneEpisodeChange',
-            text: 'Endring 7d',
-            props: (item) => ({
-              class: [
-                'bg-background-2',
-                {
-                  'text-[green]':
-                    item?.oneEpisodeChange && item.oneEpisodeChange > 0,
-                  'text-[red]':
-                    item?.oneEpisodeChange && item.oneEpisodeChange < 0,
-                },
-              ],
-            }),
-            sortMethod: (a, b) =>
-              sortPercentageColumn(a.oneEpisodeChange, b.oneEpisodeChange),
-            hide: isSmallScreeen,
-          },
-          {
-            key: 'allEpisodesPercent13To17',
-            text: '13-17',
-            sortMethod: (a, b) =>
-              sortPercentageColumn(
-                a.allEpisodesPercent13To17,
-                b.allEpisodesPercent13To17,
-              ),
-            hide: shouldHideColumns,
-          },
-          {
-            key: 'allEpisodesPercent18To25',
-            text: '18-25',
-            sortMethod: (a, b) =>
-              sortPercentageColumn(
-                a.allEpisodesPercent18To25,
-                b.allEpisodesPercent18To25,
-              ),
-            hide: shouldHideColumns,
-          },
-          {
-            key: 'allEpisodesPercent26To35',
-            text: '26-35',
-            sortMethod: (a, b) =>
-              sortPercentageColumn(
-                a.allEpisodesPercent26To35,
-                b.allEpisodesPercent26To35,
-              ),
-            hide: shouldHideColumns,
-          },
-          {
-            key: 'allEpisodesPercentAverage',
-            text: 'Gjennomsnitt',
-            props: () =>
-              !shouldHideColumns ? { class: 'bg-background-2' } : {},
-            sortMethod: (a, b) =>
-              sortPercentageColumn(
-                a.allEpisodesPercentAverage,
-                b.allEpisodesPercentAverage,
-              ),
-          },
-          {
-            key: 'allEpisodesChange',
-            text: 'Endring 7d',
-            props: (item) => ({
-              class: [
-                'bg-background-2',
-                {
-                  'text-[green]':
-                    item?.allEpisodesChange && item.allEpisodesChange > 0,
-                  'text-[red]':
-                    item?.allEpisodesChange && item.allEpisodesChange < 0,
-                },
-              ],
-            }),
-            sortMethod: (a, b) =>
-              sortPercentageColumn(a.allEpisodesChange, b.allEpisodesChange),
-            hide: isSmallScreeen,
-          },
-        ]"
-        :get-field="
-          (item, key) => {
-            const value = item[key];
-            if (value === null || value === undefined) return '';
-            if (typeof value === 'number') return Math.round(value * 100) + '%';
-            return value;
-          }
-        "
-        :highlight-row="
-          (item) => item.churchName === statistics!.highlightedChurchName
-        "
-      >
-        <template #oneEpisodeChange="{ item }">
-          <div
-            v-if="typeof item.oneEpisodeChange === 'number'"
-            class="flex grow items-center justify-end gap-1"
-          >
-            <NuxtIcon
-              v-if="item.oneEpisodeChange !== 0"
-              :name="
-                item.oneEpisodeChange > 0
-                  ? 'icon.chevron.up'
-                  : 'icon.chevron.down'
-              "
-            />
-            <span>{{ (item.oneEpisodeChange * 100).toFixed(1) }}%</span>
-          </div>
-        </template>
-        <template #allEpisodesChange="{ item }">
-          <div
-            v-if="typeof item.allEpisodesChange === 'number'"
-            class="flex grow items-center justify-end gap-1"
-          >
-            <NuxtIcon
-              v-if="item.allEpisodesChange !== 0"
-              :name="
-                item.allEpisodesChange > 0
-                  ? 'icon.chevron.up'
-                  : 'icon.chevron.down'
-              "
-            />
-            <span>{{ (item.allEpisodesChange * 100).toFixed(1) }}%</span>
-          </div>
-        </template>
-      </DashboardDataTable>
-    </section>
-
-    <section
-      id="info"
-      class="type-paragraph-2 max-w-6xl space-y-3 px-6 text-label-2"
-    >
-      <p>
-        Tilgangen til denne statistikken er kun ment for lokale ungdomsledere og
-        BUK-kontakter. Disse dataene inneholder informasjon om individuell
-        deltagelse i bibelstudieprosjektet, og det er derfor viktig at de ikke
-        deles fritt med andre. Bruk denne statistikken ansvarlig for å skape
-        positivt engasjement rundt prosjektet i din lokalforening. Dersom du har
-        spørsmål til hvordan tallene kan brukes, vennligst kontakt oss på
-        <a href="mailto:support@bcc.media" class="underline"
-          >support@bcc.media</a
-        >.
-      </p>
-      <p>
-        Alderskategoriene er basert på alderen i begynnelsen av året. Det betyr
-        at hvis du fyller 18 i år, regnes du med i kategorien 13-17.
-        Alderskategoriene er basert på personlige brukerkontoer, og brukere som
-        f.eks. låner foreldres innlogging vil ikke telle med i statistikken for
-        sin aldersgruppe.
-      </p>
-    </section>
+    </header>
+    <NuxtPage />
   </div>
 </template>
diff --git a/pages/dashboards/fra-kaare/index.vue b/pages/dashboards/fra-kaare/index.vue
new file mode 100644
index 00000000..2b860ca3
--- /dev/null
+++ b/pages/dashboards/fra-kaare/index.vue
@@ -0,0 +1,6 @@
+<script setup lang="ts">
+definePageMeta({
+  redirect: "/dashboards/fra-kaare/overview",
+  middleware: ["frakaare-dashboard-viewer"],
+});
+</script>
diff --git a/pages/dashboards/fra-kaare/overview.vue b/pages/dashboards/fra-kaare/overview.vue
new file mode 100644
index 00000000..79718746
--- /dev/null
+++ b/pages/dashboards/fra-kaare/overview.vue
@@ -0,0 +1,332 @@
+<script setup lang="ts">
+import { StatisticsApi } from "@bcc-code/bmm-sdk-fetch";
+import type {
+  FraKaareDrawCommandDrawOption,
+  GetFraKaareStatisticsResponse,
+} from "@bcc-code/bmm-sdk-fetch";
+import { breakpointsTailwind } from "@vueuse/core";
+import DashboardDataTable from "~/components/dashboard/DashboardDataTable.vue";
+import type { SortDirection } from "~/components/dashboard/DashboardDataTable.vue";
+
+const { t } = useI18n();
+setTitle(() => t("dashboards.title"));
+
+const sortDirection = ref<SortDirection>("descending");
+const churchSize = ref<"small" | "large">("large");
+
+const statistics = ref<GetFraKaareStatisticsResponse>();
+onBeforeMount(async () => {
+  statistics.value = await new StatisticsApi().statisticsFraKaareGet();
+});
+
+watch(statistics, (stats) => {
+  if (!stats) return;
+  churchSize.value = (stats.largeChurches || []).some(
+    (item) => item.churchName === stats.highlightedChurchName,
+  )
+    ? "large"
+    : "small";
+});
+
+const rows = computed(
+  () =>
+    (churchSize.value === "large"
+      ? statistics.value?.largeChurches
+      : statistics.value?.smallChurches) ?? [],
+);
+
+function sortPercentageColumn(
+  a: number | null | undefined,
+  b: number | null | undefined,
+) {
+  if (typeof a !== "number" || typeof b !== "number") return 0;
+  if (a === b) return 0;
+  if (sortDirection.value === "descending") {
+    return b - a;
+  }
+  return a - b;
+}
+
+function sortStringColumn(
+  a: string | null | undefined,
+  b: string | null | undefined,
+) {
+  if (typeof a !== "string" || typeof b !== "string") return 0;
+  if (sortDirection.value === "ascending") {
+    return b.localeCompare(a);
+  }
+  return a.localeCompare(b);
+}
+
+const breakpoints = useBreakpoints(breakpointsTailwind);
+const isSmallScreeen = breakpoints.smaller("lg");
+
+const shouldHideColumns = computed(
+  () => churchSize.value === "small" || isSmallScreeen.value,
+);
+
+const columnGroupWidth = computed(() => {
+  if (churchSize.value === "small" && !isSmallScreeen.value) return 2;
+  if (shouldHideColumns.value) return 1;
+  return 5;
+});
+
+const selectedDrawOption = ref<FraKaareDrawCommandDrawOption>();
+watch(statistics, (stats) => {
+  if (!stats) return;
+  selectedDrawOption.value = stats.drawOptions?.[0];
+});
+</script>
+
+<template>
+  <div class="space-y-12">
+    <section
+      id="chart"
+      class="flex min-h-[400px] flex-col rounded-2xl bg-background-2 p-8"
+    >
+      <h2 class="type-heading-3 mb-4">
+        {{ statistics?.highlightedChurchName }}
+      </h2>
+      <DashboardTimeSeriesChart
+        v-if="statistics?.timeSeries"
+        :data="statistics.timeSeries"
+      />
+    </section>
+
+    <section id="table">
+      <div class="mb-4">
+        <DropdownMenu placement="bottom-start">
+          <ButtonStyled size="small" intent="tertiary">
+            {{ churchSize === "large" ? "Store menigheter" : "Små menigheter" }}
+            <NuxtIcon name="icon.chevron.down" class="ml-1" />
+          </ButtonStyled>
+          <template #items>
+            <DropdownMenuGroup>
+              <DropdownMenuItem @click="churchSize = 'large'">
+                Store menigheter
+              </DropdownMenuItem>
+              <DropdownMenuItem @click="churchSize = 'small'">
+                Små menigheter
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+          </template>
+        </DropdownMenu>
+      </div>
+
+      <DashboardDataTable
+        v-if="statistics"
+        :key="`${churchSize}-${isSmallScreeen}`"
+        v-model:sort-direction="sortDirection"
+        :items="rows"
+        sort-by="oneEpisodePercentAverage"
+        :column-groups="[
+          {
+            key: 'oneEpisode',
+            text: 'Har hørt minst én episode i 2025',
+            start: 1,
+            span: columnGroupWidth,
+          },
+          {
+            key: 'allEpisodes',
+            text: 'Totale episoder hørt',
+            start: 5,
+            span: columnGroupWidth,
+          },
+        ]"
+        :columns="[
+          {
+            key: 'churchName',
+            text: 'Menighet',
+            sortMethod: (a, b) => sortStringColumn(a.churchName, b.churchName),
+          },
+          {
+            key: 'oneEpisodePercent13To17',
+            text: '13-17',
+            sortMethod: (a, b) =>
+              sortPercentageColumn(
+                a.oneEpisodePercent13To17,
+                b.oneEpisodePercent13To17,
+              ),
+            hide: shouldHideColumns,
+          },
+          {
+            key: 'oneEpisodePercent18To25',
+            text: '18-25',
+            sortMethod: (a, b) =>
+              sortPercentageColumn(
+                a.oneEpisodePercent18To25,
+                b.oneEpisodePercent18To25,
+              ),
+            hide: shouldHideColumns,
+          },
+          {
+            key: 'oneEpisodePercent26To35',
+            text: '26-35',
+            sortMethod: (a, b) =>
+              sortPercentageColumn(
+                a.oneEpisodePercent26To35,
+                b.oneEpisodePercent26To35,
+              ),
+            hide: shouldHideColumns,
+          },
+          {
+            key: 'oneEpisodePercentAverage',
+            text: 'Gjennomsnitt',
+            props: () =>
+              !shouldHideColumns ? { class: 'bg-background-2' } : {},
+            sortMethod: (a, b) =>
+              sortPercentageColumn(
+                a.oneEpisodePercentAverage,
+                b.oneEpisodePercentAverage,
+              ),
+          },
+          {
+            key: 'oneEpisodeChange',
+            text: 'Endring 7d',
+            props: (item) => ({
+              class: [
+                'bg-background-2',
+                {
+                  'text-[green]':
+                    item?.oneEpisodeChange && item.oneEpisodeChange > 0,
+                  'text-[red]':
+                    item?.oneEpisodeChange && item.oneEpisodeChange < 0,
+                },
+              ],
+            }),
+            sortMethod: (a, b) =>
+              sortPercentageColumn(a.oneEpisodeChange, b.oneEpisodeChange),
+            hide: isSmallScreeen,
+          },
+          {
+            key: 'allEpisodesPercent13To17',
+            text: '13-17',
+            sortMethod: (a, b) =>
+              sortPercentageColumn(
+                a.allEpisodesPercent13To17,
+                b.allEpisodesPercent13To17,
+              ),
+            hide: shouldHideColumns,
+          },
+          {
+            key: 'allEpisodesPercent18To25',
+            text: '18-25',
+            sortMethod: (a, b) =>
+              sortPercentageColumn(
+                a.allEpisodesPercent18To25,
+                b.allEpisodesPercent18To25,
+              ),
+            hide: shouldHideColumns,
+          },
+          {
+            key: 'allEpisodesPercent26To35',
+            text: '26-35',
+            sortMethod: (a, b) =>
+              sortPercentageColumn(
+                a.allEpisodesPercent26To35,
+                b.allEpisodesPercent26To35,
+              ),
+            hide: shouldHideColumns,
+          },
+          {
+            key: 'allEpisodesPercentAverage',
+            text: 'Gjennomsnitt',
+            props: () =>
+              !shouldHideColumns ? { class: 'bg-background-2' } : {},
+            sortMethod: (a, b) =>
+              sortPercentageColumn(
+                a.allEpisodesPercentAverage,
+                b.allEpisodesPercentAverage,
+              ),
+          },
+          {
+            key: 'allEpisodesChange',
+            text: 'Endring 7d',
+            props: (item) => ({
+              class: [
+                'bg-background-2',
+                {
+                  'text-[green]':
+                    item?.allEpisodesChange && item.allEpisodesChange > 0,
+                  'text-[red]':
+                    item?.allEpisodesChange && item.allEpisodesChange < 0,
+                },
+              ],
+            }),
+            sortMethod: (a, b) =>
+              sortPercentageColumn(a.allEpisodesChange, b.allEpisodesChange),
+            hide: isSmallScreeen,
+          },
+        ]"
+        :get-field="
+          (item, key) => {
+            const value = item[key];
+            if (value === null || value === undefined) return '';
+            if (typeof value === 'number') return Math.round(value * 100) + '%';
+            return value;
+          }
+        "
+        :highlight-row="
+          (item) => item.churchName === statistics!.highlightedChurchName
+        "
+      >
+        <template #oneEpisodeChange="{ item }">
+          <div
+            v-if="typeof item.oneEpisodeChange === 'number'"
+            class="flex grow items-center justify-end gap-1"
+          >
+            <NuxtIcon
+              v-if="item.oneEpisodeChange !== 0"
+              :name="
+                item.oneEpisodeChange > 0
+                  ? 'icon.chevron.up'
+                  : 'icon.chevron.down'
+              "
+            />
+            <span>{{ (item.oneEpisodeChange * 100).toFixed(1) }}%</span>
+          </div>
+        </template>
+        <template #allEpisodesChange="{ item }">
+          <div
+            v-if="typeof item.allEpisodesChange === 'number'"
+            class="flex grow items-center justify-end gap-1"
+          >
+            <NuxtIcon
+              v-if="item.allEpisodesChange !== 0"
+              :name="
+                item.allEpisodesChange > 0
+                  ? 'icon.chevron.up'
+                  : 'icon.chevron.down'
+              "
+            />
+            <span>{{ (item.allEpisodesChange * 100).toFixed(1) }}%</span>
+          </div>
+        </template>
+      </DashboardDataTable>
+    </section>
+
+    <section
+      id="info"
+      class="type-paragraph-2 max-w-6xl space-y-3 px-6 text-label-2"
+    >
+      <p>
+        Tilgangen til denne statistikken er kun ment for lokale ungdomsledere og
+        BUK-kontakter. Disse dataene inneholder informasjon om individuell
+        deltagelse i bibelstudieprosjektet, og det er derfor viktig at de ikke
+        deles fritt med andre. Bruk denne statistikken ansvarlig for å skape
+        positivt engasjement rundt prosjektet i din lokalforening. Dersom du har
+        spørsmål til hvordan tallene kan brukes, vennligst kontakt oss på
+        <a href="mailto:support@bcc.media" class="underline"
+          >support@bcc.media</a
+        >.
+      </p>
+      <p>
+        Alderskategoriene er basert på alderen i begynnelsen av året. Det betyr
+        at hvis du fyller 18 i år, regnes du med i kategorien 13-17.
+        Alderskategoriene er basert på personlige brukerkontoer, og brukere som
+        f.eks. låner foreldres innlogging vil ikke telle med i statistikken for
+        sin aldersgruppe.
+      </p>
+    </section>
+  </div>
+</template>
diff --git a/pages/dashboards/fra-kaare/raffle.vue b/pages/dashboards/fra-kaare/raffle.vue
new file mode 100644
index 00000000..619defbe
--- /dev/null
+++ b/pages/dashboards/fra-kaare/raffle.vue
@@ -0,0 +1,242 @@
+<script setup lang="ts">
+import { PersonGenderEnum, StatisticsApi } from "@bcc-code/bmm-sdk-fetch";
+import type {
+  FraKaareDrawCommandDrawOption,
+  FraKaareDrawCommandResponse,
+  GetFraKaareStatisticsResponse,
+} from "@bcc-code/bmm-sdk-fetch";
+import { vConfetti } from "@neoconfetti/vue";
+
+const statistics = ref<GetFraKaareStatisticsResponse>();
+onBeforeMount(async () => {
+  statistics.value = await new StatisticsApi().statisticsFraKaareGet();
+});
+
+const { t } = useI18n();
+setTitle(() => t("dashboards.title"));
+
+const now = new Date().getFullYear();
+const minAge = ref<number>(13);
+const maxAge = ref<number>(25);
+
+const genders = ["both", "boys", "girls"] as const;
+type Gender = (typeof genders)[number];
+const selectedGender = ref<Gender>("both");
+const genderTranslations: Record<Gender, string> = {
+  both: "Begge",
+  boys: "Gutter",
+  girls: "Jenter",
+};
+const selectedDrawOption = ref<FraKaareDrawCommandDrawOption>();
+watch(statistics, (stats) => {
+  if (!stats) return;
+  selectedDrawOption.value = stats.drawOptions?.[0];
+});
+const isLoading = ref(false);
+const drawResult = ref<FraKaareDrawCommandResponse | null>(null);
+async function onDrawWinner() {
+  isLoading.value = true;
+  let gender;
+
+  if (selectedGender.value === "both") {
+    gender = undefined;
+  } else if (selectedGender.value === "boys") {
+    gender = PersonGenderEnum.Male;
+  } else {
+    gender = PersonGenderEnum.Female;
+  }
+
+  try {
+    if (!selectedDrawOption.value) return;
+    drawResult.value = await new StatisticsApi().statisticsFraKaareDrawPost({
+      fraKaareDrawCommand: {
+        latestBirthYear: now - minAge.value - 1,
+        earliestBirthYear: now - maxAge.value - 1,
+        gender,
+        drawOptionId: selectedDrawOption.value.id,
+      },
+    });
+  } catch (e) {
+    showErrorToUser("DrawWinnerFailed", "Kunne ikke trekke vinner");
+  }
+  isLoading.value = false;
+}
+</script>
+
+<template>
+  <div class="space-y-12">
+    <section
+      id="raffle"
+      class="grid grid-rows-[2fr_1fr] overflow-hidden rounded-2xl border border-label-separator xl:grid-cols-2 xl:grid-rows-1"
+    >
+      <div class="flex flex-col gap-4 bg-background-2 p-6">
+        <div class="mb-2 flex flex-wrap items-center justify-between gap-4">
+          <h2 class="type-heading-3">Trekk en vinner</h2>
+          <TooltipBase :delay="500">
+            <div class="flex gap-2">
+              <div
+                v-for="i in statistics?.maxDraws"
+                :key="i"
+                :class="[
+                  'size-3 rounded-full border border-background-4',
+                  i <= (drawResult?.drawsLeft ?? statistics?.drawsLeft ?? 0)
+                    ? 'bg-background-4'
+                    : '',
+                ]"
+              />
+            </div>
+
+            <template #content>
+              <p
+                class="type-paragraph-3 mt-2 rounded-xl border border-label-separator bg-background-1 px-4 py-2 shadow-lg"
+              >
+                Du kan trekke {{ statistics?.maxDraws }} vinnere per uke.
+              </p>
+            </template>
+          </TooltipBase>
+        </div>
+
+        <fieldset
+          class="flex w-full items-start justify-between gap-4 rounded-2xl border border-label-separator bg-background-2 p-3"
+        >
+          <legend class="type-title-3 bg-background-2 px-1">
+            Aldersgruppe
+          </legend>
+          <div class="flex flex-wrap items-center gap-x-2 gap-y-1">
+            <input
+              v-model.number="minAge"
+              type="number"
+              class="type-title-2 w-20 rounded-lg bg-background-1 px-2 py-1.5 text-label-1"
+            />
+            -
+            <input
+              v-model.number="maxAge"
+              type="number"
+              class="type-title-2 w-20 rounded-lg bg-background-1 px-2 py-1.5 text-label-1"
+            />
+            <span class="type-paragraph-3 w-full px-2 text-label-3">
+              Født mellom {{ now - maxAge - 1 }} og {{ now - minAge - 1 }}
+            </span>
+          </div>
+          <button
+            class="type-paragraph-3 shrink-0 rounded-lg bg-background-3 px-3 py-0.5 text-label-3"
+            @click.stop="
+              {
+                minAge = 13;
+                maxAge = 25;
+              }
+            "
+          >
+            Sett til 13 - 25
+          </button>
+          <button
+            class="type-paragraph-3 shrink-0 rounded-lg bg-background-3 px-3 py-0.5 text-label-3"
+            @click.stop="
+              {
+                minAge = 12;
+                maxAge = 36;
+              }
+            "
+          >
+            Sett til 12 - 36
+          </button>
+        </fieldset>
+
+        <fieldset
+          class="flex w-full items-start justify-between gap-4 rounded-2xl border border-label-separator bg-background-2 p-3"
+        >
+          <legend class="type-title-3 bg-background-2 px-1">Kjønn</legend>
+          <div class="flex rounded-xl bg-background-1 p-1">
+            <button
+              v-for="gender in genders"
+              :key="gender"
+              :class="[
+                'type-title-3 rounded-lg border px-3 py-1',
+                selectedGender === gender
+                  ? 'border-label-separator bg-background-2 shadow-sm'
+                  : 'border-[transparent]',
+              ]"
+              @click.stop="selectedGender = gender"
+            >
+              <span>{{ genderTranslations[gender] }}</span>
+            </button>
+          </div>
+        </fieldset>
+
+        <fieldset
+          v-if="statistics?.drawOptions"
+          class="flex w-full items-start justify-between gap-4 rounded-2xl border border-label-separator bg-background-2 p-3"
+        >
+          <legend class="type-title-3 bg-background-2 px-1">
+            Har hørt på alle episoder i perioden
+          </legend>
+          <select
+            v-model="selectedDrawOption"
+            class="type-title-2 rounded-lg bg-background-1 px-2 py-1.5 text-label-1"
+          >
+            <option
+              v-for="(option, index) in statistics.drawOptions"
+              :key="option.id ?? index"
+              :value="option"
+            >
+              {{ option.description }}
+            </option>
+          </select>
+        </fieldset>
+
+        <ButtonStyled
+          intent="primary"
+          class="mt-2"
+          :loading="isLoading"
+          @click.stop="onDrawWinner"
+        >
+          Trekk vinner
+        </ButtonStyled>
+      </div>
+
+      <div
+        :key="JSON.stringify(drawResult)"
+        class="flex items-center justify-center p-6 text-center"
+      >
+        <Transition
+          enter-active-class="transition-all duration-500 ease-out"
+          enter-from-class="opacity-0 scale-90"
+          enter-to-class="opacity-100 scale-100"
+        >
+          <div v-if="drawResult?.isSuccess">
+            <p class="type-display-3">
+              {{ drawResult.winnerDisplayName }}
+            </p>
+            <div v-confetti="{ particleCount: 50, force: 0.5 }" />
+          </div>
+          <div v-else-if="drawResult?.errorMessage">
+            <p class="type-paragraph-1">
+              {{ drawResult.errorMessage }}
+            </p>
+          </div>
+        </Transition>
+      </div>
+    </section>
+
+    <section
+      id="info"
+      class="type-paragraph-2 max-w-4xl space-y-4 px-6 text-label-2"
+    >
+      <p>
+        Her kan du trekke en person som har hørt alle episoder i en gitt
+        periode. Dette er ikke basert på streak poeng, men om en har hørt på
+        alle episodene, uavhengig av om man gjorde det innnen tiden. Tanken med
+        dette verktøyet er å gjøre det enklere å motivere ungdomsflokken, men vi
+        ønsker ikke å erstatte eksisterende løsninger som allerede brukes i din
+        lokalmenighet.
+      </p>
+      <p>
+        Det kan gjøres 10 trekninger per uke og det tilbakestilles hver mandag.
+        Det må finnes minst 20 personer i den valgte målgruppen for at
+        trekningen blir gjennomført. For den valgte perioden og dets kriterier
+        må det finnes minst 3 personer som har hørt alle episoder, og som derfor
+        har muligheten til å vinne.
+      </p>
+    </section>
+  </div>
+</template>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 45fe285b..b59c7060 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -12,8 +12,8 @@ importers:
         specifier: ^2.3.3
         version: 2.3.3(typescript@5.3.3)(vue-router@4.3.2(vue@3.4.19(typescript@5.3.3)))
       '@bcc-code/bmm-sdk-fetch':
-        specifier: ^8.7.4
-        version: 8.7.4
+        specifier: ^8.7.10
+        version: 8.7.10
       '@floating-ui/vue':
         specifier: ^1.0.6
         version: 1.0.6(vue@3.4.19(typescript@5.3.3))
@@ -23,6 +23,9 @@ importers:
       '@microsoft/applicationinsights-web':
         specifier: ^3.0.8
         version: 3.0.8(tslib@2.6.2)
+      '@neoconfetti/vue':
+        specifier: ^2.2.1
+        version: 2.2.1
       '@pinia/nuxt':
         specifier: ^0.5.1
         version: 0.5.1(rollup@4.14.3)(typescript@5.3.3)(vue@3.4.19(typescript@5.3.3))
@@ -503,8 +506,8 @@ packages:
     resolution: {integrity: sha512-+j7a5c253RfKh8iABBhywc8NSfP5LURe7Uh4qpsh6jc+aLJguvmIUBdjSdEMQv2bENrCR5MfRdjGo7vzS/ob7w==}
     engines: {node: '>=6.9.0'}
 
-  '@bcc-code/bmm-sdk-fetch@8.7.4':
-    resolution: {integrity: sha512-XDQ90lmwMQoMOtWD9HpiG8F6gu1hVMpadbyvumaLnqGws32PwvQT5dxov0yEmqLhwI9EpT5Shdw+FfpDZ8XuBQ==}
+  '@bcc-code/bmm-sdk-fetch@8.7.10':
+    resolution: {integrity: sha512-Xb4fhVSn7bwkSbM2dcq5TNGeeSt17qs3vwFmdKLcCqZGJRa9o8/6JcceueXu9mxckHC/26KglM3vF2tJ5NeIjg==}
 
   '@bcoe/v8-coverage@0.2.3':
     resolution: {integrity: sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==}
@@ -1156,6 +1159,9 @@ packages:
     peerDependencies:
       rollup: ^1.20.0 || ^2.0.0 || ^3.0.0 || ^4.0.0
 
+  '@neoconfetti/vue@2.2.1':
+    resolution: {integrity: sha512-GXe5XoHlMK8VIxmxKuAgF9QQwRoDLmtiwVhONA9rzF+zOLGfOVLxo4OEDZqU9F0gJkB7U23BLlGJ3ouOb+kguw==}
+
   '@netlify/functions@2.6.0':
     resolution: {integrity: sha512-vU20tij0fb4nRGACqb+5SQvKd50JYyTyEhQetCMHdakcJFzjLDivvRR16u1G2Oy4A7xNAtGJF1uz8reeOtTVcQ==}
     engines: {node: '>=14.0.0'}
@@ -8296,7 +8302,7 @@ snapshots:
       '@babel/helper-validator-identifier': 7.22.20
       to-fast-properties: 2.0.0
 
-  '@bcc-code/bmm-sdk-fetch@8.7.4': {}
+  '@bcc-code/bmm-sdk-fetch@8.7.10': {}
 
   '@bcoe/v8-coverage@0.2.3': {}
 
@@ -8987,6 +8993,8 @@ snapshots:
       json5: 2.2.3
       rollup: 4.14.3
 
+  '@neoconfetti/vue@2.2.1': {}
+
   '@netlify/functions@2.6.0':
     dependencies:
       '@netlify/serverless-functions-api': 1.14.0
@@ -9480,7 +9488,7 @@ snapshots:
 
   '@nuxtjs/eslint-config-typescript@12.1.0(eslint@8.56.0)(typescript@5.3.3)':
     dependencies:
-      '@nuxtjs/eslint-config': 12.0.0(@typescript-eslint/parser@6.21.0(eslint@8.56.0)(typescript@5.3.3))(eslint-import-resolver-typescript@3.6.1)(eslint@8.56.0)
+      '@nuxtjs/eslint-config': 12.0.0(@typescript-eslint/parser@6.21.0(eslint@8.56.0)(typescript@5.3.3))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.56.0)(typescript@5.3.3))(eslint-plugin-import@2.29.1)(eslint@8.56.0))(eslint@8.56.0)
       '@typescript-eslint/eslint-plugin': 6.21.0(@typescript-eslint/parser@6.21.0(eslint@8.56.0)(typescript@5.3.3))(eslint@8.56.0)(typescript@5.3.3)
       '@typescript-eslint/parser': 6.21.0(eslint@8.56.0)(typescript@5.3.3)
       eslint: 8.56.0
@@ -9493,10 +9501,10 @@ snapshots:
       - supports-color
       - typescript
 
-  '@nuxtjs/eslint-config@12.0.0(@typescript-eslint/parser@6.21.0(eslint@8.56.0)(typescript@5.3.3))(eslint-import-resolver-typescript@3.6.1)(eslint@8.56.0)':
+  '@nuxtjs/eslint-config@12.0.0(@typescript-eslint/parser@6.21.0(eslint@8.56.0)(typescript@5.3.3))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.56.0)(typescript@5.3.3))(eslint-plugin-import@2.29.1)(eslint@8.56.0))(eslint@8.56.0)':
     dependencies:
       eslint: 8.56.0
-      eslint-config-standard: 17.1.0(eslint-plugin-import@2.29.1)(eslint-plugin-n@15.7.0(eslint@8.56.0))(eslint-plugin-promise@6.1.1(eslint@8.56.0))(eslint@8.56.0)
+      eslint-config-standard: 17.1.0(eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.56.0)(typescript@5.3.3))(eslint-import-resolver-typescript@3.6.1)(eslint@8.56.0))(eslint-plugin-n@15.7.0(eslint@8.56.0))(eslint-plugin-promise@6.1.1(eslint@8.56.0))(eslint@8.56.0)
       eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.56.0)(typescript@5.3.3))(eslint-import-resolver-typescript@3.6.1)(eslint@8.56.0)
       eslint-plugin-n: 15.7.0(eslint@8.56.0)
       eslint-plugin-node: 11.1.0(eslint@8.56.0)
@@ -12756,7 +12764,7 @@ snapshots:
     dependencies:
       eslint: 8.56.0
 
-  eslint-config-standard@17.1.0(eslint-plugin-import@2.29.1)(eslint-plugin-n@15.7.0(eslint@8.56.0))(eslint-plugin-promise@6.1.1(eslint@8.56.0))(eslint@8.56.0):
+  eslint-config-standard@17.1.0(eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.56.0)(typescript@5.3.3))(eslint-import-resolver-typescript@3.6.1)(eslint@8.56.0))(eslint-plugin-n@15.7.0(eslint@8.56.0))(eslint-plugin-promise@6.1.1(eslint@8.56.0))(eslint@8.56.0):
     dependencies:
       eslint: 8.56.0
       eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.56.0)(typescript@5.3.3))(eslint-import-resolver-typescript@3.6.1)(eslint@8.56.0)
@@ -12776,7 +12784,7 @@ snapshots:
       debug: 4.3.4(supports-color@8.1.1)
       enhanced-resolve: 5.15.0
       eslint: 8.56.0
-      eslint-module-utils: 2.8.0(@typescript-eslint/parser@6.21.0(eslint@8.56.0)(typescript@5.3.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.56.0)
+      eslint-module-utils: 2.8.0(@typescript-eslint/parser@6.21.0(eslint@8.56.0)(typescript@5.3.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.56.0)(typescript@5.3.3))(eslint-plugin-import@2.29.1)(eslint@8.56.0))(eslint@8.56.0)
       eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.56.0)(typescript@5.3.3))(eslint-import-resolver-typescript@3.6.1)(eslint@8.56.0)
       fast-glob: 3.3.2
       get-tsconfig: 4.7.2
@@ -12788,7 +12796,7 @@ snapshots:
       - eslint-import-resolver-webpack
       - supports-color
 
-  eslint-module-utils@2.8.0(@typescript-eslint/parser@6.21.0(eslint@8.56.0)(typescript@5.3.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.56.0):
+  eslint-module-utils@2.8.0(@typescript-eslint/parser@6.21.0(eslint@8.56.0)(typescript@5.3.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.56.0)(typescript@5.3.3))(eslint-plugin-import@2.29.1)(eslint@8.56.0))(eslint@8.56.0):
     dependencies:
       debug: 3.2.7(supports-color@8.1.1)
     optionalDependencies:
@@ -12821,7 +12829,7 @@ snapshots:
       doctrine: 2.1.0
       eslint: 8.56.0
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.8.0(@typescript-eslint/parser@6.21.0(eslint@8.56.0)(typescript@5.3.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.56.0)
+      eslint-module-utils: 2.8.0(@typescript-eslint/parser@6.21.0(eslint@8.56.0)(typescript@5.3.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.56.0)(typescript@5.3.3))(eslint-plugin-import@2.29.1)(eslint@8.56.0))(eslint@8.56.0)
       hasown: 2.0.1
       is-core-module: 2.13.1
       is-glob: 4.0.3