diff --git a/src/lib/components/atoms/HeaderImage.svelte b/src/lib/components/atoms/HeaderImage.svelte
new file mode 100644
index 0000000..d402cd2
--- /dev/null
+++ b/src/lib/components/atoms/HeaderImage.svelte
@@ -0,0 +1,31 @@
+<script>
+  export let alt = ''
+  export let src = ''
+  export let opacity = ''
+
+  // Define different image sources for different resolutions or viewport widths
+  export let Small = 'header-image-small.webp'
+  export let Medium = 'header-image-medium.webp'
+  export let Large = 'header-image-large.webp'
+</script>
+
+<picture>
+  <!-- Source for small screens -->
+  <source media="(max-width: 375px)" srcset={Small} />
+
+  <!-- Source for medium screens -->
+  <source media="(max-width: 768px)" srcset={Medium} />
+
+  <!-- Source for large screens -->
+  <source media="(max-width: 1024px)" srcset={Large} />
+
+  <img {src} {alt} style={`opacity: ${opacity}`} />
+</picture>
+
+<style>
+  img {
+    object-fit: cover;
+    width: 100%;
+    height: 100%;
+  }
+</style>
diff --git a/src/lib/components/atoms/IconLocation.svelte b/src/lib/components/atoms/IconLocation.svelte
new file mode 100644
index 0000000..597a856
--- /dev/null
+++ b/src/lib/components/atoms/IconLocation.svelte
@@ -0,0 +1,23 @@
+<script>
+  export let height = ''
+  export let width = ''
+  export let color = ''
+</script>
+
+<svg
+  class="svg-location"
+  {width}
+  {height}
+  fill={color}
+  aria-hidden="true"
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 24 24"
+>
+  <path
+    stroke="none"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="2"
+    d="M12 .042a9.992 9.992 0 0 0-9.981 9.98c0 2.57 1.99 6.592 5.915 11.954a5.034 5.034 0 0 0 8.132 0c3.925-5.362 5.915-9.384 5.915-11.954A9.992 9.992 0 0 0 12 .042ZM12 14a4 4 0 1 1 4-4 4 4 0 0 1-4 4Z"
+  />
+</svg>
diff --git a/src/lib/components/molecules/HeaderContent.svelte b/src/lib/components/molecules/HeaderContent.svelte
new file mode 100644
index 0000000..2445091
--- /dev/null
+++ b/src/lib/components/molecules/HeaderContent.svelte
@@ -0,0 +1,130 @@
+<script>
+  import IconLocation from '../atoms/IconLocation.svelte'
+
+  // Mockdata voor de header text
+  const mockData = [
+    {
+      title: 'Regular',
+      subtitle: 'cocktail walk',
+      label: 'route 1',
+      location: 'Center, West',
+      price: '€25,95',
+    },
+    {
+      title: 'Premium',
+      subtitle: 'cocktail walk',
+      label: 'route 2',
+      location: 'Center, West',
+      price: '€26,95',
+    },
+    {
+      title: 'Bols',
+      subtitle: 'cocktail walk',
+      label: 'route 3',
+      location: 'Center, West',
+      price: '€29,95',
+    },
+  ]
+</script>
+
+<section class="content-container">
+  <!-- First content row -->
+  <div class="title-label">
+    <h1>{mockData[0].title}</h1>
+    <span class="label" aria-hidden="true">{mockData[0].label}</span>
+  </div>
+
+  <!-- Second content row -->
+  <h1 class="subtitle">{mockData[0].subtitle}</h1>
+
+  <!-- Last content row -->
+  <div class="location-price">
+    <IconLocation width="15" height="15" color="hsl(21.23, 100%, 87.25%)" />
+    <p class="location">{mockData[0].location}</p>
+    <p class="price">{mockData[0].price}</p>
+  </div>
+</section>
+
+<style>
+  .content-container {
+    display: flex;
+    flex-direction: column;
+    gap: 0.6rem;
+    margin: 5rem 2rem;
+  }
+
+  /* First content row */
+  h1 {
+    display: flex;
+    align-items: center;
+    font-size: 2rem;
+    text-transform: uppercase;
+    color: white;
+  }
+
+  .title-label {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+  }
+
+  .label {
+    padding: 0.3rem 0.5rem;
+    border: 1px solid var(--accent2-tertiary);
+    border-radius: 3rem;
+    font-size: 1rem;
+    font-weight: 600;
+    text-align: center;
+    color: var(--accent2-tertiary);
+  }
+
+  /* Second content row */
+  .subtitle {
+    font-size: 2rem;
+    text-transform: uppercase;
+    color: white;
+  }
+
+  /* Last content row */
+  .location-price {
+    display: flex;
+    align-items: center;
+  }
+
+  .location {
+    margin: 0 1rem 0 0.5rem;
+    color: var(--accent2-tertiary);
+  }
+
+  .price {
+    font-weight: 600;
+    color: var(--accent2-primary);
+  }
+
+  /* Large screens */
+  @media screen and (min-width: 768px) {
+    .content-container {
+      margin: 8rem 8rem;
+    }
+
+    h1 {
+      font-size: 3rem;
+    }
+
+    .label {
+      padding: 0.5rem 0.8rem;
+      font-size: 1.3rem;
+    }
+    .subtitle {
+      font-size: 3rem;
+    }
+
+    .location {
+      font-size: 1.3rem;
+    }
+
+    .price {
+      font-size: 1.3rem;
+    }
+  }
+</style>
diff --git a/src/lib/components/organisms/HeaderDetailPage.svelte b/src/lib/components/organisms/HeaderDetailPage.svelte
new file mode 100644
index 0000000..0be4450
--- /dev/null
+++ b/src/lib/components/organisms/HeaderDetailPage.svelte
@@ -0,0 +1,32 @@
+<script>
+  import HeaderContent from '../molecules/HeaderContent.svelte'
+  import HeaderImage from '../atoms/HeaderImage.svelte'
+</script>
+
+<div class="header-container">
+  <HeaderImage src={'header-image-large.webp'} opacity="0.2" alt="cocktail" />
+  <div class="header-text">
+    <HeaderContent />
+  </div>
+</div>
+
+<style>
+  .header-container {
+    position: relative;
+    width: 100vw;
+    height: calc(100vh - 3rem);
+  }
+
+  .header-text {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+  }
+
+  /* Large screens */
+  @media screen and (min-width: 48em) {
+    .header-text {
+      top: 0;
+    }
+  }
+</style>
diff --git a/src/lib/components/pages/TicketInfoPage.svelte b/src/lib/components/pages/TicketInfoPage.svelte
new file mode 100644
index 0000000..7dd3c2c
--- /dev/null
+++ b/src/lib/components/pages/TicketInfoPage.svelte
@@ -0,0 +1,5 @@
+<script>
+  import HeaderDetailPage from '../organisms/HeaderDetailPage.svelte'
+</script>
+
+<HeaderDetailPage />
diff --git a/src/lib/index.js b/src/lib/index.js
index 67f68de..c389b3b 100644
--- a/src/lib/index.js
+++ b/src/lib/index.js
@@ -20,3 +20,6 @@ export { default as Footer } from '$lib/components/organisms/Footer.svelte'
 export { default as TabBar } from '$lib/components/organisms/TabBar.svelte'
 
 // Templates
+
+// Pages
+export { default as TicketInfoPage } from '$lib/components/pages/TicketInfoPage.svelte'
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 19c1af6..49cfa96 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { Navigation, Footer, TabBar } from '$lib/index'
+  import { Navigation, Footer, TabBar, TicketInfoPage } from '$lib/index'
   export let data
 </script>
 
@@ -7,10 +7,10 @@
   <Navigation navigationItems={data.navigation} />
 </header>
 
+<TicketInfoPage />
+
 <main id="main">
-  
   <slot />
-
 </main>
 
 <Footer footerItems={data.footer} />
diff --git a/src/routes/[slug]/+page.svelte b/src/routes/[slug]/+page.svelte
index 3b95890..7088a30 100644
--- a/src/routes/[slug]/+page.svelte
+++ b/src/routes/[slug]/+page.svelte
@@ -9,7 +9,7 @@
   <kruimelpad parentSlug />
 } -->
 
-<div>
+<!-- <div>
 Dit is een slug!!!!
 </div>
 
@@ -17,4 +17,4 @@ Dit is een slug!!!!
   div {
     color: red;
   }
-</style>
\ No newline at end of file
+</style> -->
diff --git a/static/Mock-image.jpg b/static/Mock-image.jpg
new file mode 100644
index 0000000..fee3a68
Binary files /dev/null and b/static/Mock-image.jpg differ
diff --git a/static/Mock-image2.png b/static/Mock-image2.png
new file mode 100644
index 0000000..5da33bd
Binary files /dev/null and b/static/Mock-image2.png differ
diff --git a/static/header-image-large.webp b/static/header-image-large.webp
new file mode 100644
index 0000000..30f8553
Binary files /dev/null and b/static/header-image-large.webp differ
diff --git a/static/header-image-medium.webp b/static/header-image-medium.webp
new file mode 100644
index 0000000..f7874c3
Binary files /dev/null and b/static/header-image-medium.webp differ
diff --git a/static/header-image-small.webp b/static/header-image-small.webp
new file mode 100644
index 0000000..e72ff58
Binary files /dev/null and b/static/header-image-small.webp differ
diff --git a/static/marker.svg b/static/marker.svg
new file mode 100644
index 0000000..ab0dbbc
--- /dev/null
+++ b/static/marker.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" id="Filled" viewBox="0 0 24 24" width="512" height="512"><path d="M12,.042a9.992,9.992,0,0,0-9.981,9.98c0,2.57,1.99,6.592,5.915,11.954a5.034,5.034,0,0,0,8.132,0c3.925-5.362,5.915-9.384,5.915-11.954A9.992,9.992,0,0,0,12,.042ZM12,14a4,4,0,1,1,4-4A4,4,0,0,1,12,14Z"/></svg>