diff --git a/web/src/app/arrangementer/[slug]/page.tsx b/web/src/app/arrangementer/[slug]/page.tsx
index df53758..d30ddd5 100644
--- a/web/src/app/arrangementer/[slug]/page.tsx
+++ b/web/src/app/arrangementer/[slug]/page.tsx
@@ -4,6 +4,7 @@ import { getClient } from "@/app/client";
import { Blocks } from "@/components/blocks/Blocks";
import Image from "@/components/general/Image";
import { EventHeader } from "@/components/events/EventHeader";
+import { DateList } from "@/components/events/DateList";
export async function generateStaticParams() {
const allEventSlugsQuery = graphql(`
@@ -46,6 +47,7 @@ export default async function Page({ params }: { params: { slug: string } }) {
diff --git a/web/src/components/events/DateList.tsx b/web/src/components/events/DateList.tsx
new file mode 100644
index 0000000..fa881a3
--- /dev/null
+++ b/web/src/components/events/DateList.tsx
@@ -0,0 +1,38 @@
+import styles from "./dateList.module.scss";
+
+export const DateList = () => {
+ return (
+
+
Kommende datoer
+
+ -
+
+ 27. mai 2024
+ 18.00
+
+
+ Lokale
+
+
+ -
+
+ 27. mai 2024
+ 18.00
+
+
+ Lokale
+
+
+ -
+
+ 27. mai 2024
+ 18.00
+
+
+ Lokale
+
+
+
+
+ );
+};
diff --git a/web/src/components/events/dateList.module.scss b/web/src/components/events/dateList.module.scss
new file mode 100644
index 0000000..cfcba1b
--- /dev/null
+++ b/web/src/components/events/dateList.module.scss
@@ -0,0 +1,8 @@
+.dateList {
+ list-style: none;
+ margin-bottom: var(--spacing-sitepadding);
+}
+
+.date {
+ background: var(--color-goldenBeige);
+}
\ No newline at end of file