diff --git a/package.json b/package.json
index 223cd69b..f965c5c7 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.9",
     "@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..eba5db28 100644
--- a/pages/dashboards/fra-kaare.vue
+++ b/pages/dashboards/fra-kaare.vue
@@ -1,9 +1,14 @@
 <script setup lang="ts">
-import { StatisticsApi } from "@bcc-code/bmm-sdk-fetch";
-import type { GetFraKaareStatisticsResponse } from "@bcc-code/bmm-sdk-fetch";
+import { PersonGenderEnum, StatisticsApi } from "@bcc-code/bmm-sdk-fetch";
+import type {
+  FraKaareDrawCommandDrawOption,
+  FraKaareDrawCommandResponse,
+  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";
+import { vConfetti } from "@neoconfetti/vue";
 
 const { t } = useI18n();
 setTitle(() => t("dashboards.title"));
@@ -71,12 +76,177 @@ const columnGroupWidth = computed(() => {
   if (shouldHideColumns.value) return 1;
   return 5;
 });
+const now = new Date().getFullYear();
+const minAge = ref<number>(13);
+const maxAge = ref<number>(25);
+function resetAge() {
+  minAge.value = 13;
+  maxAge.value = 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,
+        earliestBirthYear: now - maxAge.value,
+        gender,
+        drawOptionId: selectedDrawOption.value.id,
+      },
+    });
+  } catch (e) {
+    showErrorToUser("DrawWinnerFailed", "Kunne ikke trekke vinner");
+  }
+  isLoading.value = false;
+}
 </script>
 
 <template>
   <div class="space-y-12">
     <PageHeading>Dashboard: Fra Kåre</PageHeading>
 
+    <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>
+          <div class="flex gap-2">
+            <div
+              v-for="i in 10"
+              :key="i"
+              :class="[
+                'size-3 rounded-full border border-background-4',
+                i <= 6 ? 'bg-background-4' : '',
+              ]"
+            />
+          </div>
+        </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 }} og {{ now - minAge }}
+            </span>
+          </div>
+          <button
+            class="type-paragraph-3 shrink-0 rounded-lg bg-background-3 px-3 py-0.5 text-label-3"
+            @click.stop="resetAge()"
+          >
+            Sett til 13 - 25
+          </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">Fra Kåre</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 class="flex items-center justify-center p-6">
+        <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 != null">
+            <p class="type-display-3">
+              {{ drawResult.winnerDisplayName }}
+            </p>
+            <div v-confetti="{ particleCount: 50, force: 0.5 }" />
+          </div>
+        </Transition>
+      </div>
+    </section>
+
     <section
       id="chart"
       class="flex min-h-[400px] flex-col rounded-2xl bg-background-2 p-8"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 45fe285b..c4366af7 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.9
+        version: 8.7.9
       '@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.9':
+    resolution: {integrity: sha512-g0TgBDzG1RzQ4IAy2sSFjmP/cRDJKpwXT0MRCyfyl+nXZFFAOGpsVJF7AzklCVovJn/+GoiMAW6oWJMFM2Vjcw==}
 
   '@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.9': {}
 
   '@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