diff --git a/src/stores/schedules.mjs b/src/stores/schedules.mjs
index 80096b6..823b791 100644
--- a/src/stores/schedules.mjs
+++ b/src/stores/schedules.mjs
@@ -118,5 +118,4 @@ if (import.meta.hot) {
   import.meta.hot.accept(acceptHMRUpdate(useEventSchedulesStore, import.meta.hot));
   import.meta.hot.accept(acceptHMRUpdate(useSalmonRunSchedulesStore, import.meta.hot));
   import.meta.hot.accept(acceptHMRUpdate(useEggstraWorkSchedulesStore, import.meta.hot));
-  import.meta.hot.accept(acceptHMRUpdate(useChallengeSchedulesStore, import.meta.hot));
 }
diff --git a/src/views/ChallengesView.vue b/src/views/ChallengesView.vue
index 10876d0..f612bc2 100644
--- a/src/views/ChallengesView.vue
+++ b/src/views/ChallengesView.vue
@@ -1,15 +1,45 @@
 <template>
-    <MainLayout :title="$t('challenges.title')">
+    <MainLayout :title="$t('events.title')">
       <div class="grow flex items-center justify-center">
         <div class="mx-4 md:mx-12 w-full space-y-10 max-w-xl">
-            <ChallengeScheduleBox type="challenge" class="flex-1 md:-rotate-1" />
+          <template v-if="store.activeSchedule || store.upcomingSchedules && store.upcomingSchedules.length > 0">
+            <div v-for="schedule in store.activeSchedule">
+              <ChallengeScheduleBox :currentSchedule="schedule" type="challenge" class="flex-1 md:-rotate-1" />
+            </div>
+
+            <div v-for="schedule in store.upcomingSchedules">
+              <ChallengeScheduleBox :currentSchedule="schedule" type="challenge" class="flex-1 md:-rotate-1" />
+            </div>
+          </template>
+
+          <template v-else>
+            <ProductContainer :bg="type.bg" class="w-full pt-10 pb-4 -rotate-1">
+              <div class="flex justify-center">
+                <div class="inline-flex items-center font-splatoon2 text-xl text-shadow m-2">
+                  <img :src="type.img" />
+                  {{ $t('events.not_available') }}
+                </div>
+              </div>
+            </ProductContainer>
+          </template>
         </div>
       </div>
     </MainLayout>
   </template>
   
-  <script setup>
-  import MainLayout from '@/layouts/MainLayout.vue'
-  import ChallengeScheduleBox from '@/components/challenge/ChallengeScheduleBox.vue';
-  </script>
+<script setup>
+import { computed } from 'vue';
+
+import MainLayout from '@/layouts/MainLayout.vue'
+import ProductContainer from '../components/ProductContainer.vue';
+import ChallengeScheduleBox from '@/components/challenge/ChallengeScheduleBox.vue'
+
+import { useScheduleTypes } from '@/components/concerns/scheduleTypes.mjs';
+import { useEventSchedulesStore } from '@/stores/schedules.mjs'
+
+const store = useEventSchedulesStore();
+const { types } = useScheduleTypes();
+
+const type = computed(() => types['challenge']);
+</script>
   
\ No newline at end of file