diff --git a/library/src/components/form/DynamicForm.tsx b/library/src/components/form/DynamicForm.tsx
index 38752692..d2bfb1e1 100644
--- a/library/src/components/form/DynamicForm.tsx
+++ b/library/src/components/form/DynamicForm.tsx
@@ -9,7 +9,7 @@ import {
 	type UseFormWatch,
 } from "react-hook-form"
 import { twMerge } from "tailwind-merge"
-import { Button } from "../Button"
+import { Button, ButtonGroup } from "../Button"
 
 export interface FormProps<T extends FieldValues> {
 	control: Control<T>
@@ -44,6 +44,9 @@ export interface DynamicFormProps<T extends FieldValues>
 	horizontal?: boolean
 	hideReset?: boolean
 	hideSave?: boolean
+
+	customSubmitButton?: (props: { disabled: boolean }) => React.ReactNode
+	customResetButton?: (props: { disabled: boolean }) => React.ReactNode
 }
 
 export function DynamicForm<T extends FieldValues>({
@@ -55,6 +58,8 @@ export function DynamicForm<T extends FieldValues>({
 	className,
 	hideSave,
 	hideReset,
+	customResetButton,
+	customSubmitButton,
 	...props
 }: DynamicFormProps<T>) {
 	const {
@@ -95,26 +100,32 @@ export function DynamicForm<T extends FieldValues>({
 
 			<hr className="border border-border" />
 
-			<div className="flex flex-row items-end w-full justify-end mt-4">
-				{!hideReset && (
-					<Button
-						type="reset"
-						appearance="subtle"
-						disabled={!isDirty}
-					>
-						Reset
-					</Button>
-				)}
-				{!hideSave && (
-					<Button
-						appearance="primary"
-						type="submit"
-						disabled={!isValid}
-					>
-						Save
-					</Button>
-				)}
-			</div>
+			<ButtonGroup className="justify-end">
+				{!hideReset &&
+					(customResetButton ? (
+						customResetButton({ disabled: !isDirty })
+					) : (
+						<Button
+							type="reset"
+							appearance="subtle"
+							disabled={!isDirty}
+						>
+							Reset
+						</Button>
+					))}
+				{!hideSave &&
+					(customSubmitButton ? (
+						customSubmitButton({ disabled: !isValid })
+					) : (
+						<Button
+							appearance="primary"
+							type="submit"
+							disabled={!isValid}
+						>
+							Save
+						</Button>
+					))}
+			</ButtonGroup>
 		</form>
 	)
 }
diff --git a/library/src/components/timetable/TimeTable.tsx b/library/src/components/timetable/TimeTable.tsx
index a69142f9..4d57b986 100644
--- a/library/src/components/timetable/TimeTable.tsx
+++ b/library/src/components/timetable/TimeTable.tsx
@@ -37,8 +37,9 @@ import {
 	initAndUpdateTimeTableSelectionStore,
 	type onTimeRangeSelectedType,
 } from "./TimeTableSelectionStore"
-import { getStartAndEndSlot, useGroupRows } from "./useGoupRows"
+import { useGroupRows } from "./useGoupRows"
 import { twMerge } from "tailwind-merge"
+import { getStartAndEndSlot } from "./timeTableUtils"
 
 export interface TimeSlotBooking {
 	title: string
@@ -189,8 +190,8 @@ export interface LPTimeTableProps<
 
 	/** custom header row */
 	customHeaderRow?: {
-		timeSlot: (props: CustomHeaderRowTimeSlotProps) => JSX.Element
-		header: (props: CustomHeaderRowHeaderProps) => JSX.Element
+		timeSlot: (props: CustomHeaderRowTimeSlotProps<G, I>) => JSX.Element
+		header: (props: CustomHeaderRowHeaderProps<G, I>) => JSX.Element
 	}
 }
 
@@ -257,6 +258,7 @@ const LPTimeTableImpl = <G extends TimeTableGroup, I extends TimeSlotBooking>({
 	)
 
 	// change on viewType
+	// biome-ignore lint/correctness/useExhaustiveDependencies: just remove the message is props change
 	useEffect(() => {
 		setMessage?.(undefined) // clear the message on time frame change
 	}, [viewType, startDate, endDate, setMessage, timeStepsMinutes])
@@ -490,8 +492,9 @@ const LPTimeTableImpl = <G extends TimeTableGroup, I extends TimeSlotBooking>({
 						}
 						ref={tableRef}
 					>
-						<LPTimeTableHeader
+						<LPTimeTableHeader<G, I>
 							slotsArray={slotsArray}
+							timeSlotMinutes={timeSlotMinutes}
 							columnWidth={columnWidth}
 							groupHeaderColumnWidth={groupHeaderColumnWidth}
 							startDate={startDate}
@@ -508,7 +511,8 @@ const LPTimeTableImpl = <G extends TimeTableGroup, I extends TimeSlotBooking>({
 							weekStartsOnSunday={weekStartsOnSunday}
 							locale={locale}
 							customHeaderRow={customHeaderRow}
-							ref={tableHeaderRef}
+							entries={entries}
+							tableHeaderRef={tableHeaderRef}
 						/>
 						<tbody ref={tableBodyRef} className="table-fixed">
 							<TimeTableRows<G, I>
diff --git a/library/src/components/timetable/TimeTableHeader.tsx b/library/src/components/timetable/TimeTableHeader.tsx
index 4731e42b..1d92226f 100644
--- a/library/src/components/timetable/TimeTableHeader.tsx
+++ b/library/src/components/timetable/TimeTableHeader.tsx
@@ -6,7 +6,7 @@ dayjs.extend(weekOfYear)
 dayjs.extend(weekYear)
 dayjs.extend(localeData)
 import type React from "react"
-import { Fragment, forwardRef } from "react"
+import { Fragment, type RefObject, useRef } from "react"
 
 // if more locales then english and germans are needed, we need to enable them first here
 import "dayjs/locale/de"
@@ -15,7 +15,12 @@ import "dayjs/locale/de"
 //import "dayjs/locale/it"
 //import "dayjs/locale/nl"
 
-import type { TimeTableViewType } from "./TimeTable"
+import type {
+	TimeSlotBooking,
+	TimeTableEntry,
+	TimeTableGroup,
+	TimeTableViewType,
+} from "./TimeTable"
 import type { TimeFrameDay } from "./TimeTableConfigStore"
 
 const headerTimeSlotFormat: { [viewType in TimeTableViewType]: string } = {
@@ -52,22 +57,36 @@ export function headerText(
 	}
 }
 
-export type CustomHeaderRowTimeSlotProps = {
+export type CustomHeaderRowTimeSlotProps<
+	G extends TimeTableGroup,
+	I extends TimeSlotBooking,
+> = {
 	timeSlot: Dayjs
 	timeSlotMinutes: number
 	isLastOfDay: boolean
 	viewType: TimeTableViewType
 	timeFrameOfDay: TimeFrameDay
+	entries: TimeTableEntry<G, I>[]
+	slotsArray: readonly Dayjs[]
+	tableCellRef: RefObject<HTMLTableCellElement>
 }
 
-export type CustomHeaderRowHeaderProps = {
+export type CustomHeaderRowHeaderProps<
+	G extends TimeTableGroup,
+	I extends TimeSlotBooking,
+> = {
 	slotsArray: readonly Dayjs[]
 	viewType: TimeTableViewType
 	timeFrameOfDay: TimeFrameDay
+	entries: TimeTableEntry<G, I>[]
 }
 
-type TimeTableHeaderProps = {
+type TimeTableHeaderProps<
+	G extends TimeTableGroup,
+	I extends TimeSlotBooking,
+> = {
 	slotsArray: readonly Dayjs[]
+	timeSlotMinutes: number
 	groupHeaderColumnWidth: number | string
 	columnWidth: number | string
 	startDate: Dayjs
@@ -80,29 +99,38 @@ type TimeTableHeaderProps = {
 	weekStartsOnSunday: boolean
 	locale?: "en" | "de"
 
+	entries: TimeTableEntry<G, I>[]
 	customHeaderRow?: {
-		timeSlot: (props: CustomHeaderRowTimeSlotProps) => JSX.Element
-		header: (props: CustomHeaderRowHeaderProps) => JSX.Element
+		timeSlot: (props: CustomHeaderRowTimeSlotProps<G, I>) => JSX.Element
+		header: (props: CustomHeaderRowHeaderProps<G, I>) => JSX.Element
 	}
+
+	tableHeaderRef: React.Ref<HTMLTableSectionElement>
 }
 
-export const LPTimeTableHeader = forwardRef(function TimeTableHeader(
-	{
-		slotsArray,
-		groupHeaderColumnWidth,
-		columnWidth,
-		startDate,
-		endDate,
-		viewType,
-		showTimeSlotHeader,
-		timeFrameDay,
-		dateHeaderTextFormat,
-		weekStartsOnSunday,
-		locale,
-		customHeaderRow,
-	}: TimeTableHeaderProps,
-	tableHeaderRef: React.Ref<HTMLTableSectionElement>,
-) {
+const headerCellBaseClassname =
+	"bg-surface border-transparent border-b-border after:border-border relative select-none border-0 border-b-2 border-solid p-0 pl-1 font-bold after:absolute after:bottom-[1px] after:right-0 after:top-0 after:h-full after:border-solid"
+
+export const LPTimeTableHeader = function TimeTableHeader<
+	G extends TimeTableGroup,
+	I extends TimeSlotBooking,
+>({
+	slotsArray,
+	timeSlotMinutes,
+	groupHeaderColumnWidth,
+	columnWidth,
+	startDate,
+	endDate,
+	viewType,
+	showTimeSlotHeader,
+	timeFrameDay,
+	dateHeaderTextFormat,
+	weekStartsOnSunday,
+	locale,
+	customHeaderRow,
+	entries,
+	tableHeaderRef,
+}: TimeTableHeaderProps<G, I>) {
 	const currentLocale = dayjs.locale()
 	if (locale && locale !== currentLocale) {
 		dayjs.locale(locale)
@@ -254,7 +282,7 @@ export const LPTimeTableHeader = forwardRef(function TimeTableHeader(
 							<th
 								key={`timeheader${slot.unix()}`}
 								colSpan={2}
-								className={`bg-surface border-transparent border-b-border after:border-border relative select-none border-0 border-b-2 border-solid p-0 pl-1 font-bold after:absolute after:bottom-[1px] after:right-0 after:top-0 after:h-full after:border-solid ${
+								className={`${headerCellBaseClassname} ${
 									isLastOfDay ? "after:border-l-2" : ""
 								} ${showTimeSlotHeader ? "pt-1" : ""}`}
 							>
@@ -278,6 +306,7 @@ export const LPTimeTableHeader = forwardRef(function TimeTableHeader(
 								slotsArray,
 								timeFrameOfDay: timeFrameDay,
 								viewType,
+								entries,
 							})}
 						</th>
 						{slotsArray.map((slot, i) => {
@@ -285,21 +314,18 @@ export const LPTimeTableHeader = forwardRef(function TimeTableHeader(
 								i === slotsArray.length - 1 ||
 								!slotsArray[i + 1].isSame(slot, "day")
 							return (
-								<th
+								<CustomHeaderRowCell
+									customHeaderRow={customHeaderRow}
+									timeSlot={slot}
+									timeSlotMinutes={timeSlotMinutes}
+									timeFrameOfDay={timeFrameDay}
+									slotsArray={slotsArray}
+									entries={entries}
+									showTimeSlotHeader={showTimeSlotHeader}
+									viewType={viewType}
+									isLastOfDay={isLastOfDay}
 									key={`timeheader${slot.unix()}`}
-									colSpan={2}
-									className={`bg-surface border-transparent border-b-border after:border-border relative select-none border-0 border-b-2 border-solid p-0 pl-1 font-bold after:absolute after:bottom-[1px] after:right-0 after:top-0 after:h-full after:border-solid ${
-										isLastOfDay ? "after:border-l-2" : ""
-									} ${showTimeSlotHeader ? "pt-1" : ""}`}
-								>
-									{customHeaderRow.timeSlot({
-										timeSlot: slot,
-										timeSlotMinutes: 60,
-										isLastOfDay,
-										timeFrameOfDay: timeFrameDay,
-										viewType,
-									})}
-								</th>
+								/>
 							)
 						})}
 					</tr>
@@ -307,4 +333,56 @@ export const LPTimeTableHeader = forwardRef(function TimeTableHeader(
 			</thead>
 		</>
 	)
-})
+}
+
+function CustomHeaderRowCell<
+	G extends TimeTableGroup,
+	I extends TimeSlotBooking,
+>({
+	timeSlot,
+	timeSlotMinutes,
+	isLastOfDay,
+	viewType,
+	timeFrameOfDay,
+	entries,
+	slotsArray,
+	showTimeSlotHeader,
+	customHeaderRow,
+}: {
+	timeSlot: Dayjs
+	timeSlotMinutes: number
+	isLastOfDay: boolean
+	viewType: TimeTableViewType
+	timeFrameOfDay: TimeFrameDay
+	entries: TimeTableEntry<G, I>[]
+	slotsArray: readonly Dayjs[]
+	showTimeSlotHeader: boolean
+	customHeaderRow: {
+		timeSlot: (props: CustomHeaderRowTimeSlotProps<G, I>) => JSX.Element
+		header: (props: CustomHeaderRowHeaderProps<G, I>) => JSX.Element
+	}
+}) {
+	const ref = useRef<HTMLTableCellElement>(null)
+
+	return (
+		<th
+			key={`timeheader${timeSlot.unix()}`}
+			colSpan={2}
+			className={`${headerCellBaseClassname} ${
+				isLastOfDay ? "after:border-l-2" : ""
+			} ${showTimeSlotHeader ? "pt-1" : ""}`}
+			ref={ref}
+		>
+			{customHeaderRow.timeSlot({
+				timeSlot,
+				timeSlotMinutes,
+				isLastOfDay,
+				timeFrameOfDay,
+				viewType,
+				entries,
+				slotsArray,
+				tableCellRef: ref,
+			})}
+		</th>
+	)
+}
diff --git a/library/src/components/timetable/index.ts b/library/src/components/timetable/index.ts
index e953b658..098c8f71 100644
--- a/library/src/components/timetable/index.ts
+++ b/library/src/components/timetable/index.ts
@@ -18,6 +18,17 @@ export type { TimeTableItemProps } from "./ItemWrapper"
 export type { TimeTablePlaceholderItemProps } from "./PlaceholderItem"
 import type { TimeFrameDay as _TimeFrameDay } from "./TimeTableConfigStore"
 
+import {
+	getLeftAndWidth,
+	getStartAndEndSlot,
+	itemsOutsideOfDayRangeORSameStartAndEnd,
+} from "./timeTableUtils"
+export const timeTableUtils = {
+	getLeftAndWidth,
+	getStartAndEndSlot,
+	itemsOutsideOfDayRangeORSameStartAndEnd,
+}
+
 //const memoized = React.memo(TimeTable) as typeof TimeTable
 
 //export { memoized as TimeTable }
@@ -27,8 +38,14 @@ export namespace TimeTableTypes {
 	export type TimeSlotBooking = _TimeSlotBooking
 	export type TimeFrameDay = _TimeFrameDay
 	export type TimeTableGroup = _TimeTableGroup
-	export type CustomHeaderRowHeaderProps = _CustomHeaderRowHeaderProps
-	export type CustomHeadeRowTimeSlotProps = _CustomHeaderRowTimeSlotProps
+	export type CustomHeaderRowHeaderProps<
+		G extends TimeTableGroup,
+		I extends TimeSlotBooking,
+	> = _CustomHeaderRowHeaderProps<G, I>
+	export type CustomHeadeRowTimeSlotProps<
+		G extends TimeTableGroup,
+		I extends TimeSlotBooking,
+	> = _CustomHeaderRowTimeSlotProps<G, I>
 
 	export type TimeTableEntry<
 		G extends TimeTableGroup,
diff --git a/library/src/components/timetable/timeTableUtils.ts b/library/src/components/timetable/timeTableUtils.ts
index 14f0a55b..8a07d1ca 100644
--- a/library/src/components/timetable/timeTableUtils.ts
+++ b/library/src/components/timetable/timeTableUtils.ts
@@ -482,3 +482,147 @@ export function getLeftAndWidth(
 
 	return { left, width }
 }
+
+/**
+ * find the start and time slot of an item. If the item starts before the time slot of the day, the first time slot of the day is returned.
+ * respective if the item end after the last time slot of the day, the last time slot of the day is returned.
+ * @param item
+ * @param slotsArray
+ */
+export function getStartAndEndSlot(
+	item: TimeSlotBooking,
+	slotsArray: readonly Dayjs[],
+	timeFrameDay: TimeFrameDay,
+	timeSlotMinutes: number,
+	viewType: TimeTableViewType,
+): {
+	startSlot: number
+	endSlot: number
+	status: "before" | "after" | "in"
+} {
+	let timeFrameStart = slotsArray[0]
+	if (viewType !== "hours") {
+		timeFrameStart = timeFrameStart
+			.add(timeFrameDay.startHour, "hours")
+			.add(timeFrameDay.startMinute, "minutes")
+	}
+	let timeFrameEnd = slotsArray[slotsArray.length - 1]
+		.startOf("day")
+		.add(timeFrameDay.endHour, "hours")
+		.add(timeFrameDay.endMinute, "minutes")
+	if (viewType !== "hours") {
+		timeFrameEnd = timeFrameEnd.add(1, viewType).subtract(1, "day")
+	}
+	if (
+		item.endDate.isBefore(timeFrameStart) ||
+		item.endDate.isSame(timeFrameStart)
+	) {
+		return { startSlot: 0, endSlot: 0, status: "before" }
+	}
+	if (
+		item.startDate.isAfter(timeFrameEnd) ||
+		item.startDate.isSame(timeFrameEnd)
+	) {
+		return {
+			startSlot: slotsArray.length - 1,
+			endSlot: slotsArray.length - 1,
+			status: "after",
+		}
+	}
+
+	let startSlot = slotsArray.findIndex((slot) => slot.isAfter(item.startDate))
+	if (startSlot > 0) {
+		// if the item starts in the middle of a slot, we need to go back one slot to get the start slot
+		// but only if the time slot before is on the same day, else it means that the booking starts before the time frame range of the day
+		startSlot--
+		if (viewType === "hours") {
+			// if the previous timeslot is on a different day, we know item starts before the first time slot of a day
+			if (
+				slotsArray[startSlot].day() !== slotsArray[startSlot + 1].day()
+			) {
+				startSlot++
+			}
+		}
+	}
+	if (startSlot === -1) {
+		startSlot = 0
+	}
+
+	let endSlot = slotsArray.findIndex((slot) => slot.isAfter(item.endDate))
+	if (endSlot === -1) {
+		endSlot = slotsArray.length - 1
+	} else {
+		// if the item end after the last time slot of the day, we still set the end slot to the last time slot of the day
+		if (slotsArray[endSlot].date() !== slotsArray[endSlot - 1].date()) {
+			endSlot--
+		}
+	}
+
+	// if endSlot < startSlot its before the range of the day
+	if (endSlot < startSlot) {
+		return { startSlot: startSlot, endSlot: startSlot, status: "before" }
+	}
+
+	let startSlotStart = slotsArray[startSlot]
+	if (viewType !== "hours") {
+		startSlotStart = startSlotStart
+			.add(timeFrameDay.startHour, "hours")
+			.add(timeFrameDay.startMinute, "minutes")
+	}
+
+	if (item.endDate.isBefore(startSlotStart)) {
+		return { startSlot: startSlot, endSlot: startSlot, status: "before" }
+	}
+
+	let endSlotEnd = slotsArray[endSlot]
+	if (viewType === "hours") {
+		endSlotEnd = endSlotEnd.add(timeSlotMinutes, "minutes")
+	} else {
+		endSlotEnd = endSlotEnd
+			.add(timeFrameDay.endHour, "hours")
+			.add(timeFrameDay.endMinute, "minutes")
+			.add(1, viewType)
+			.subtract(1, "day")
+	}
+	if (item.startDate.isAfter(endSlotEnd)) {
+		return { startSlot: endSlot, endSlot: endSlot, status: "after" }
+	}
+
+	return { startSlot, endSlot, status: "in" }
+}
+
+export function itemsOutsideOfDayRangeORSameStartAndEnd<
+	I extends TimeSlotBooking,
+>(
+	items: I[],
+	slotsArray: readonly Dayjs[],
+	timeFrameDay: TimeFrameDay,
+	timeSlotMinutes: number,
+	viewType: TimeTableViewType,
+) {
+	const itemsWithSameStartAndEnd: I[] = []
+	const itemsOutsideRange = items.filter((it) => {
+		if (it.startDate.isSame(it.endDate)) {
+			itemsWithSameStartAndEnd.push(it)
+			return false
+		}
+		if (slotsArray.length === 0) {
+			console.info(
+				"timeTableUtils - itemsOutsideOfDayRange - no slotsArray",
+			)
+			return false
+		}
+		const startAndEndSlot = getStartAndEndSlot(
+			it,
+			slotsArray,
+			timeFrameDay,
+			timeSlotMinutes,
+			viewType,
+		)
+		return (
+			startAndEndSlot.status === "after" ||
+			startAndEndSlot.status === "before"
+		)
+	})
+	return { itemsOutsideRange, itemsWithSameStartAndEnd }
+}
diff --git a/library/src/components/timetable/useGoupRows.ts b/library/src/components/timetable/useGoupRows.ts
index b0709689..53df73f6 100644
--- a/library/src/components/timetable/useGoupRows.ts
+++ b/library/src/components/timetable/useGoupRows.ts
@@ -11,7 +11,11 @@ import {
 	useTTCViewType,
 } from "./TimeTableConfigStore"
 import { useTimeTableIdent } from "./TimeTableIdentContext"
-import { isOverlapping } from "./timeTableUtils"
+import {
+	getStartAndEndSlot,
+	isOverlapping,
+	itemsOutsideOfDayRangeORSameStartAndEnd,
+} from "./timeTableUtils"
 import { useRef } from "react"
 
 /**
@@ -233,147 +237,3 @@ function getGroupItemStack<I extends TimeSlotBooking>(
 
 	return itemRows
 }
-
-export function itemsOutsideOfDayRangeORSameStartAndEnd<
-	I extends TimeSlotBooking,
->(
-	items: I[],
-	slotsArray: readonly Dayjs[],
-	timeFrameDay: TimeFrameDay,
-	timeSlotMinutes: number,
-	viewType: TimeTableViewType,
-) {
-	const itemsWithSameStartAndEnd: I[] = []
-	const itemsOutsideRange = items.filter((it) => {
-		if (it.startDate.isSame(it.endDate)) {
-			itemsWithSameStartAndEnd.push(it)
-			return false
-		}
-		if (slotsArray.length === 0) {
-			console.info(
-				"timeTableUtils - itemsOutsideOfDayRange - no slotsArray",
-			)
-			return false
-		}
-		const startAndEndSlot = getStartAndEndSlot(
-			it,
-			slotsArray,
-			timeFrameDay,
-			timeSlotMinutes,
-			viewType,
-		)
-		return (
-			startAndEndSlot.status === "after" ||
-			startAndEndSlot.status === "before"
-		)
-	})
-	return { itemsOutsideRange, itemsWithSameStartAndEnd }
-}
-
-/**
- * find the start and time slot of an item. If the item starts before the time slot of the day, the first time slot of the day is returned.
- * respective if the item end after the last time slot of the day, the last time slot of the day is returned.
- * @param item
- * @param slotsArray
- */
-export function getStartAndEndSlot(
-	item: TimeSlotBooking,
-	slotsArray: readonly Dayjs[],
-	timeFrameDay: TimeFrameDay,
-	timeSlotMinutes: number,
-	viewType: TimeTableViewType,
-): {
-	startSlot: number
-	endSlot: number
-	status: "before" | "after" | "in"
-} {
-	let timeFrameStart = slotsArray[0]
-	if (viewType !== "hours") {
-		timeFrameStart = timeFrameStart
-			.add(timeFrameDay.startHour, "hours")
-			.add(timeFrameDay.startMinute, "minutes")
-	}
-	let timeFrameEnd = slotsArray[slotsArray.length - 1]
-		.startOf("day")
-		.add(timeFrameDay.endHour, "hours")
-		.add(timeFrameDay.endMinute, "minutes")
-	if (viewType !== "hours") {
-		timeFrameEnd = timeFrameEnd.add(1, viewType).subtract(1, "day")
-	}
-	if (
-		item.endDate.isBefore(timeFrameStart) ||
-		item.endDate.isSame(timeFrameStart)
-	) {
-		return { startSlot: 0, endSlot: 0, status: "before" }
-	}
-	if (
-		item.startDate.isAfter(timeFrameEnd) ||
-		item.startDate.isSame(timeFrameEnd)
-	) {
-		return {
-			startSlot: slotsArray.length - 1,
-			endSlot: slotsArray.length - 1,
-			status: "after",
-		}
-	}
-
-	let startSlot = slotsArray.findIndex((slot) => slot.isAfter(item.startDate))
-	if (startSlot > 0) {
-		// if the item starts in the middle of a slot, we need to go back one slot to get the start slot
-		// but only if the time slot before is on the same day, else it means that the booking starts before the time frame range of the day
-		startSlot--
-		if (viewType === "hours") {
-			// if the previous timeslot is on a different day, we know item starts before the first time slot of a day
-			if (
-				slotsArray[startSlot].day() !== slotsArray[startSlot + 1].day()
-			) {
-				startSlot++
-			}
-		}
-	}
-	if (startSlot === -1) {
-		startSlot = 0
-	}
-
-	let endSlot = slotsArray.findIndex((slot) => slot.isAfter(item.endDate))
-	if (endSlot === -1) {
-		endSlot = slotsArray.length - 1
-	} else {
-		// if the item end after the last time slot of the day, we still set the end slot to the last time slot of the day
-		if (slotsArray[endSlot].date() !== slotsArray[endSlot - 1].date()) {
-			endSlot--
-		}
-	}
-
-	// if endSlot < startSlot its before the range of the day
-	if (endSlot < startSlot) {
-		return { startSlot: startSlot, endSlot: startSlot, status: "before" }
-	}
-
-	let startSlotStart = slotsArray[startSlot]
-	if (viewType !== "hours") {
-		startSlotStart = startSlotStart
-			.add(timeFrameDay.startHour, "hours")
-			.add(timeFrameDay.startMinute, "minutes")
-	}
-
-	if (item.endDate.isBefore(startSlotStart)) {
-		return { startSlot: startSlot, endSlot: startSlot, status: "before" }
-	}
-
-	let endSlotEnd = slotsArray[endSlot]
-	if (viewType === "hours") {
-		endSlotEnd = endSlotEnd.add(timeSlotMinutes, "minutes")
-	} else {
-		endSlotEnd = endSlotEnd
-			.add(timeFrameDay.endHour, "hours")
-			.add(timeFrameDay.endMinute, "minutes")
-			.add(1, viewType)
-			.subtract(1, "day")
-	}
-	if (item.startDate.isAfter(endSlotEnd)) {
-		return { startSlot: endSlot, endSlot: endSlot, status: "after" }
-	}
-
-	return { startSlot, endSlot, status: "in" }
-}
diff --git a/package-lock.json b/package-lock.json
index 988b9503..2cf3443b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,7 @@
 			"license": "Apache-2.0",
 			"dependencies": {
 				"@atlaskit/empty-state": "^7.11.4",
-				"@atlaskit/icon": "^22.20.2",
+				"@atlaskit/icon": "^22.22.0",
 				"@emotion/css": "^11.13.4",
 				"@hello-pangea/dnd": "^17.0.0",
 				"@radix-ui/react-accordion": "^1.2.1",
@@ -35,7 +35,7 @@
 				"mime-types": "^2.1.35",
 				"react-awesome-slider": "^4.1.0",
 				"react-day-picker": "^8.10.1",
-				"react-intl": "^6.7.0",
+				"react-intl": "^6.7.2",
 				"react-joyride": "^2.9.2",
 				"react-router-dom": "^6.26.2",
 				"react-select": "^5.8.1",
@@ -51,25 +51,25 @@
 				"@atlaskit/lozenge": "^11.11.0",
 				"@atlaskit/pagination": "^14.9.3",
 				"@atlaskit/side-navigation": "^3.5.3",
-				"@atlaskit/table-tree": "^10.0.3",
+				"@atlaskit/table-tree": "^10.0.4",
 				"@atlaskit/tag": "^12.6.3",
 				"@atlaskit/tag-group": "^10.6.0",
 				"@atlaskit/textarea": "^5.6.2",
-				"@atlaskit/textfield": "^6.5.2",
+				"@atlaskit/textfield": "^6.5.3",
 				"@atlaskit/theme": "^13.0.2",
 				"@babel/generator": "^7.25.7",
 				"@babel/parser": "^7.25.7",
 				"@babel/traverse": "^7.25.7",
 				"@babel/types": "^7.25.7",
 				"@biomejs/biome": "^1.9.3",
-				"@formatjs/cli": "^6.2.12",
+				"@formatjs/cli": "^6.2.14",
 				"@monaco-editor/react": "^4.6.0",
 				"@total-typescript/ts-reset": "^0.6.1",
-				"@types/node": "^22.7.4",
+				"@types/node": "^22.7.5",
 				"@types/react": "^18.3.11",
 				"@types/react-dom": "^18.3.0",
-				"@typescript-eslint/eslint-plugin": "^8.8.0",
-				"@typescript-eslint/parser": "^8.8.0",
+				"@typescript-eslint/eslint-plugin": "^8.8.1",
+				"@typescript-eslint/parser": "^8.8.1",
 				"@vitejs/plugin-react-swc": "^3.7.1",
 				"autoprefixer": "^10.4.20",
 				"eslint-config-prettier": "^9.1.0",
@@ -90,7 +90,7 @@
 				"stylelint-order": "^6.0.4",
 				"tailwind-merge": "^2.5.3",
 				"tailwindcss": "^3.4.13",
-				"typescript": "^5.6.2",
+				"typescript": "^5.6.3",
 				"typescript-plugin-css-modules": "^5.1.0",
 				"vite": "^5.4.8",
 				"vite-plugin-dts": "^4.2.3",
@@ -211,15 +211,15 @@
 			}
 		},
 		"node_modules/@atlaskit/button": {
-			"version": "20.2.4",
-			"resolved": "https://registry.npmjs.org/@atlaskit/button/-/button-20.2.4.tgz",
-			"integrity": "sha512-thBORFxQqw7tXMb/Hnr6nT1ZXDR2q0rlZ3bo49N1ufp0GU5im4zwu+Xb1GKTtBpF2C7xxhjioL9Aye69uUlWng==",
+			"version": "20.2.5",
+			"resolved": "https://registry.npmjs.org/@atlaskit/button/-/button-20.2.5.tgz",
+			"integrity": "sha512-y6MOeAcxRI1VRzH0gV9+DX00XMHcHzjtX3fY/xSuPC+ISJN417R6woBUmRz4iqamBzfyl50x2dggEsh98NFztw==",
 			"license": "Apache-2.0",
 			"dependencies": {
 				"@atlaskit/analytics-next": "^10.1.0",
 				"@atlaskit/ds-lib": "^3.0.0",
 				"@atlaskit/focus-ring": "^1.6.0",
-				"@atlaskit/icon": "^22.20.0",
+				"@atlaskit/icon": "^22.21.0",
 				"@atlaskit/interaction-context": "^2.1.0",
 				"@atlaskit/platform-feature-flags": "^0.3.0",
 				"@atlaskit/primitives": "^12.2.0",
@@ -360,9 +360,9 @@
 			}
 		},
 		"node_modules/@atlaskit/icon": {
-			"version": "22.20.2",
-			"resolved": "https://registry.npmjs.org/@atlaskit/icon/-/icon-22.20.2.tgz",
-			"integrity": "sha512-GJyxBkEWF0hDUKvBpsLhkwL3MZ5jZa1A2taUTuIR9VGorWDuAkQdNCKx56CSD75PfxK/GapHVbADmAUMjfuOGA==",
+			"version": "22.22.0",
+			"resolved": "https://registry.npmjs.org/@atlaskit/icon/-/icon-22.22.0.tgz",
+			"integrity": "sha512-4uUxjT37zvxyqIF0VyDJiSfDMSXu0IIAW61Osob5/S3JGEZ2yRR5zXKXRgCFI7iNTwqilFswNw1L1V7t1qB2rQ==",
 			"license": "Apache-2.0",
 			"dependencies": {
 				"@atlaskit/platform-feature-flags": "^0.3.0",
@@ -627,16 +627,16 @@
 			}
 		},
 		"node_modules/@atlaskit/table-tree": {
-			"version": "10.0.3",
-			"resolved": "https://registry.npmjs.org/@atlaskit/table-tree/-/table-tree-10.0.3.tgz",
-			"integrity": "sha512-+JSt9hTZihmNRo9tJt5ZoLH4xJzR+Dy5okjzDeXmCGsCWElqJ021ymQa1YLqYGx3h8F9iemhPTqavqIj4xCamw==",
+			"version": "10.0.4",
+			"resolved": "https://registry.npmjs.org/@atlaskit/table-tree/-/table-tree-10.0.4.tgz",
+			"integrity": "sha512-y0uDFWCpf5dpzgzsvBjh2kHJvycrLWJ4QLMvoxtQELY68BrBtyz0lPb8Jp5ztUzrbNj4S/bxuN869IQFf+utPA==",
 			"dev": true,
 			"license": "Apache-2.0",
 			"dependencies": {
 				"@atlaskit/analytics-next": "^10.1.0",
 				"@atlaskit/button": "^20.2.0",
 				"@atlaskit/ds-lib": "^3.0.0",
-				"@atlaskit/icon": "^22.20.0",
+				"@atlaskit/icon": "^22.22.0",
 				"@atlaskit/spinner": "^16.3.0",
 				"@atlaskit/theme": "^13.0.0",
 				"@atlaskit/tokens": "^2.0.0",
@@ -702,9 +702,9 @@
 			}
 		},
 		"node_modules/@atlaskit/textfield": {
-			"version": "6.5.2",
-			"resolved": "https://registry.npmjs.org/@atlaskit/textfield/-/textfield-6.5.2.tgz",
-			"integrity": "sha512-02JuJuySR9iJCJbT3d+p9XIsJU+pgjCEVqZx2ORdLzs0p1yCWdJiW7mhjjT7m8nsWrvrtL85fT+5llEnBwiN/g==",
+			"version": "6.5.3",
+			"resolved": "https://registry.npmjs.org/@atlaskit/textfield/-/textfield-6.5.3.tgz",
+			"integrity": "sha512-Trd6YS8Y3UbvwEWOeUoAsWi3UuYbpKbdQty42jlVRXB3uLV8eZibFOvj1bgTQeYhg5Mb8Zvczx5/VeL3js9Q+Q==",
 			"dev": true,
 			"license": "Apache-2.0",
 			"dependencies": {
@@ -1900,9 +1900,9 @@
 			"license": "MIT"
 		},
 		"node_modules/@formatjs/cli": {
-			"version": "6.2.12",
-			"resolved": "https://registry.npmjs.org/@formatjs/cli/-/cli-6.2.12.tgz",
-			"integrity": "sha512-bt1NEgkeYN8N9zWcpsPu3fZ57vv+biA+NtIQBlyOZnCp1bcvh+vNTXvmwF4C5qxqDtCylpOIb3yi3Ktgp4v0JQ==",
+			"version": "6.2.14",
+			"resolved": "https://registry.npmjs.org/@formatjs/cli/-/cli-6.2.14.tgz",
+			"integrity": "sha512-1eSJAUQLgL9dgsrXJ1PzMAguXOPpJa1dJmMkF8GZo0jnKkavq2cdljJt2vXDeSvqWmKwqY9h4/bELr9dTOoHMw==",
 			"dev": true,
 			"license": "MIT",
 			"bin": {
@@ -1949,11 +1949,12 @@
 			}
 		},
 		"node_modules/@formatjs/ecma402-abstract": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-2.0.0.tgz",
-			"integrity": "sha512-rRqXOqdFmk7RYvj4khklyqzcfQl9vEL/usogncBHRZfZBDOwMGuSRNFl02fu5KGHXdbinju+YXyuR+Nk8xlr/g==",
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-2.1.0.tgz",
+			"integrity": "sha512-SE2V2PE03K9U/YQZ3nxEOysRkQ/CfSwLHR789Uk9N0PTiWT6I+17UTDI97zYEwC1mbnjefqmtjbL8nunjPwGjw==",
 			"license": "MIT",
 			"dependencies": {
+				"@formatjs/fast-memoize": "2.2.0",
 				"@formatjs/intl-localematcher": "0.5.4",
 				"tslib": "^2.4.0"
 			}
@@ -1968,38 +1969,38 @@
 			}
 		},
 		"node_modules/@formatjs/icu-messageformat-parser": {
-			"version": "2.7.8",
-			"resolved": "https://registry.npmjs.org/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.7.8.tgz",
-			"integrity": "sha512-nBZJYmhpcSX0WeJ5SDYUkZ42AgR3xiyhNCsQweFx3cz/ULJjym8bHAzWKvG5e2+1XO98dBYC0fWeeAECAVSwLA==",
+			"version": "2.7.9",
+			"resolved": "https://registry.npmjs.org/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.7.9.tgz",
+			"integrity": "sha512-9Z5buDRMsTbplXknvRlDmnpWhZrayNVcVvkH0+SSz8Ll4XD/7Tcn8m1IjxM3iBJSwQbxwxb7/g0Fkx3d4j2osw==",
 			"license": "MIT",
 			"dependencies": {
-				"@formatjs/ecma402-abstract": "2.0.0",
-				"@formatjs/icu-skeleton-parser": "1.8.2",
+				"@formatjs/ecma402-abstract": "2.1.0",
+				"@formatjs/icu-skeleton-parser": "1.8.3",
 				"tslib": "^2.4.0"
 			}
 		},
 		"node_modules/@formatjs/icu-skeleton-parser": {
-			"version": "1.8.2",
-			"resolved": "https://registry.npmjs.org/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.8.2.tgz",
-			"integrity": "sha512-k4ERKgw7aKGWJZgTarIcNEmvyTVD9FYh0mTrrBMHZ1b8hUu6iOJ4SzsZlo3UNAvHYa+PnvntIwRPt1/vy4nA9Q==",
+			"version": "1.8.3",
+			"resolved": "https://registry.npmjs.org/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.8.3.tgz",
+			"integrity": "sha512-TsKAP013ayZFbWWR2KWy+f9QVZh0yDFTPK3yE4OqU2gnzafvmKTodRtJLVpfZmpXWJ5y7BWD1AsyT14mcbLzig==",
 			"license": "MIT",
 			"dependencies": {
-				"@formatjs/ecma402-abstract": "2.0.0",
+				"@formatjs/ecma402-abstract": "2.1.0",
 				"tslib": "^2.4.0"
 			}
 		},
 		"node_modules/@formatjs/intl": {
-			"version": "2.10.5",
-			"resolved": "https://registry.npmjs.org/@formatjs/intl/-/intl-2.10.5.tgz",
-			"integrity": "sha512-f9qPNNgLrh2KvoFvHGIfcPTmNGbyy7lyyV4/P6JioDqtTE7Akdmgt+ZzVndr+yMLZnssUShyTMXxM/6aV9eVuQ==",
+			"version": "2.10.7",
+			"resolved": "https://registry.npmjs.org/@formatjs/intl/-/intl-2.10.7.tgz",
+			"integrity": "sha512-26rNxo2nwQbbsVkV54ngml9XIA7bBzfQmELG6FFFF8eKzqzFrLKZzF8JBoBpPHgML4HKEUbGCQaBaARpKCN/sw==",
 			"license": "MIT",
 			"dependencies": {
-				"@formatjs/ecma402-abstract": "2.0.0",
+				"@formatjs/ecma402-abstract": "2.1.0",
 				"@formatjs/fast-memoize": "2.2.0",
-				"@formatjs/icu-messageformat-parser": "2.7.8",
-				"@formatjs/intl-displaynames": "6.6.8",
-				"@formatjs/intl-listformat": "7.5.7",
-				"intl-messageformat": "10.5.14",
+				"@formatjs/icu-messageformat-parser": "2.7.9",
+				"@formatjs/intl-displaynames": "6.6.9",
+				"@formatjs/intl-listformat": "7.5.8",
+				"intl-messageformat": "10.6.0",
 				"tslib": "^2.4.0"
 			},
 			"peerDependencies": {
@@ -2012,23 +2013,23 @@
 			}
 		},
 		"node_modules/@formatjs/intl-displaynames": {
-			"version": "6.6.8",
-			"resolved": "https://registry.npmjs.org/@formatjs/intl-displaynames/-/intl-displaynames-6.6.8.tgz",
-			"integrity": "sha512-Lgx6n5KxN16B3Pb05z3NLEBQkGoXnGjkTBNCZI+Cn17YjHJ3fhCeEJJUqRlIZmJdmaXQhjcQVDp6WIiNeRYT5g==",
+			"version": "6.6.9",
+			"resolved": "https://registry.npmjs.org/@formatjs/intl-displaynames/-/intl-displaynames-6.6.9.tgz",
+			"integrity": "sha512-2hmS+YJwiXB1deNYXO2/pY7Zv4QUrZHghZxkcnWxBLEODk990h9cNbkjNg/u/RaDeCRkKVrZ3ERTdBcgkTvn2Q==",
 			"license": "MIT",
 			"dependencies": {
-				"@formatjs/ecma402-abstract": "2.0.0",
+				"@formatjs/ecma402-abstract": "2.1.0",
 				"@formatjs/intl-localematcher": "0.5.4",
 				"tslib": "^2.4.0"
 			}
 		},
 		"node_modules/@formatjs/intl-listformat": {
-			"version": "7.5.7",
-			"resolved": "https://registry.npmjs.org/@formatjs/intl-listformat/-/intl-listformat-7.5.7.tgz",
-			"integrity": "sha512-MG2TSChQJQT9f7Rlv+eXwUFiG24mKSzmF144PLb8m8OixyXqn4+YWU+5wZracZGCgVTVmx8viCf7IH3QXoiB2g==",
+			"version": "7.5.8",
+			"resolved": "https://registry.npmjs.org/@formatjs/intl-listformat/-/intl-listformat-7.5.8.tgz",
+			"integrity": "sha512-WzMiw6nA2uP0ZqbbuPs7tQ+gmYRTbE20lwur4QcKp5K5cgPhkCzRAhovkDFLhrc885c3p7Wjigx8kyg0hypmZw==",
 			"license": "MIT",
 			"dependencies": {
-				"@formatjs/ecma402-abstract": "2.0.0",
+				"@formatjs/ecma402-abstract": "2.1.0",
 				"@formatjs/intl-localematcher": "0.5.4",
 				"tslib": "^2.4.0"
 			}
@@ -4170,9 +4171,9 @@
 			"license": "MIT"
 		},
 		"node_modules/@types/node": {
-			"version": "22.7.4",
-			"resolved": "https://registry.npmjs.org/@types/node/-/node-22.7.4.tgz",
-			"integrity": "sha512-y+NPi1rFzDs1NdQHHToqeiX2TIS79SWEAw9GYhkkx8bD0ChpfqC+n2j5OXOCpzfojBEBt6DnEnnG9MY0zk1XLg==",
+			"version": "22.7.5",
+			"resolved": "https://registry.npmjs.org/@types/node/-/node-22.7.5.tgz",
+			"integrity": "sha512-jML7s2NAzMWc//QSJ1a3prpk78cOPchGvXJsC3C6R6PSMoooztvRVQEz89gmBTBY1SPMaqo5teB4uNHPdetShQ==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
@@ -4253,17 +4254,17 @@
 			"license": "MIT"
 		},
 		"node_modules/@typescript-eslint/eslint-plugin": {
-			"version": "8.8.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.8.0.tgz",
-			"integrity": "sha512-wORFWjU30B2WJ/aXBfOm1LX9v9nyt9D3jsSOxC3cCaTQGCW5k4jNpmjFv3U7p/7s4yvdjHzwtv2Sd2dOyhjS0A==",
+			"version": "8.8.1",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.8.1.tgz",
+			"integrity": "sha512-xfvdgA8AP/vxHgtgU310+WBnLB4uJQ9XdyP17RebG26rLtDrQJV3ZYrcopX91GrHmMoH8bdSwMRh2a//TiJ1jQ==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@eslint-community/regexpp": "^4.10.0",
-				"@typescript-eslint/scope-manager": "8.8.0",
-				"@typescript-eslint/type-utils": "8.8.0",
-				"@typescript-eslint/utils": "8.8.0",
-				"@typescript-eslint/visitor-keys": "8.8.0",
+				"@typescript-eslint/scope-manager": "8.8.1",
+				"@typescript-eslint/type-utils": "8.8.1",
+				"@typescript-eslint/utils": "8.8.1",
+				"@typescript-eslint/visitor-keys": "8.8.1",
 				"graphemer": "^1.4.0",
 				"ignore": "^5.3.1",
 				"natural-compare": "^1.4.0",
@@ -4287,16 +4288,16 @@
 			}
 		},
 		"node_modules/@typescript-eslint/parser": {
-			"version": "8.8.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.8.0.tgz",
-			"integrity": "sha512-uEFUsgR+tl8GmzmLjRqz+VrDv4eoaMqMXW7ruXfgThaAShO9JTciKpEsB+TvnfFfbg5IpujgMXVV36gOJRLtZg==",
+			"version": "8.8.1",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.8.1.tgz",
+			"integrity": "sha512-hQUVn2Lij2NAxVFEdvIGxT9gP1tq2yM83m+by3whWFsWC+1y8pxxxHUFE1UqDu2VsGi2i6RLcv4QvouM84U+ow==",
 			"dev": true,
 			"license": "BSD-2-Clause",
 			"dependencies": {
-				"@typescript-eslint/scope-manager": "8.8.0",
-				"@typescript-eslint/types": "8.8.0",
-				"@typescript-eslint/typescript-estree": "8.8.0",
-				"@typescript-eslint/visitor-keys": "8.8.0",
+				"@typescript-eslint/scope-manager": "8.8.1",
+				"@typescript-eslint/types": "8.8.1",
+				"@typescript-eslint/typescript-estree": "8.8.1",
+				"@typescript-eslint/visitor-keys": "8.8.1",
 				"debug": "^4.3.4"
 			},
 			"engines": {
@@ -4316,14 +4317,14 @@
 			}
 		},
 		"node_modules/@typescript-eslint/scope-manager": {
-			"version": "8.8.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.8.0.tgz",
-			"integrity": "sha512-EL8eaGC6gx3jDd8GwEFEV091210U97J0jeEHrAYvIYosmEGet4wJ+g0SYmLu+oRiAwbSA5AVrt6DxLHfdd+bUg==",
+			"version": "8.8.1",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.8.1.tgz",
+			"integrity": "sha512-X4JdU+66Mazev/J0gfXlcC/dV6JI37h+93W9BRYXrSn0hrE64IoWgVkO9MSJgEzoWkxONgaQpICWg8vAN74wlA==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
-				"@typescript-eslint/types": "8.8.0",
-				"@typescript-eslint/visitor-keys": "8.8.0"
+				"@typescript-eslint/types": "8.8.1",
+				"@typescript-eslint/visitor-keys": "8.8.1"
 			},
 			"engines": {
 				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -4334,14 +4335,14 @@
 			}
 		},
 		"node_modules/@typescript-eslint/type-utils": {
-			"version": "8.8.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.8.0.tgz",
-			"integrity": "sha512-IKwJSS7bCqyCeG4NVGxnOP6lLT9Okc3Zj8hLO96bpMkJab+10HIfJbMouLrlpyOr3yrQ1cA413YPFiGd1mW9/Q==",
+			"version": "8.8.1",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.8.1.tgz",
+			"integrity": "sha512-qSVnpcbLP8CALORf0za+vjLYj1Wp8HSoiI8zYU5tHxRVj30702Z1Yw4cLwfNKhTPWp5+P+k1pjmD5Zd1nhxiZA==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
-				"@typescript-eslint/typescript-estree": "8.8.0",
-				"@typescript-eslint/utils": "8.8.0",
+				"@typescript-eslint/typescript-estree": "8.8.1",
+				"@typescript-eslint/utils": "8.8.1",
 				"debug": "^4.3.4",
 				"ts-api-utils": "^1.3.0"
 			},
@@ -4359,9 +4360,9 @@
 			}
 		},
 		"node_modules/@typescript-eslint/types": {
-			"version": "8.8.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.8.0.tgz",
-			"integrity": "sha512-QJwc50hRCgBd/k12sTykOJbESe1RrzmX6COk8Y525C9l7oweZ+1lw9JiU56im7Amm8swlz00DRIlxMYLizr2Vw==",
+			"version": "8.8.1",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.8.1.tgz",
+			"integrity": "sha512-WCcTP4SDXzMd23N27u66zTKMuEevH4uzU8C9jf0RO4E04yVHgQgW+r+TeVTNnO1KIfrL8ebgVVYYMMO3+jC55Q==",
 			"dev": true,
 			"license": "MIT",
 			"engines": {
@@ -4373,14 +4374,14 @@
 			}
 		},
 		"node_modules/@typescript-eslint/typescript-estree": {
-			"version": "8.8.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.8.0.tgz",
-			"integrity": "sha512-ZaMJwc/0ckLz5DaAZ+pNLmHv8AMVGtfWxZe/x2JVEkD5LnmhWiQMMcYT7IY7gkdJuzJ9P14fRy28lUrlDSWYdw==",
+			"version": "8.8.1",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.8.1.tgz",
+			"integrity": "sha512-A5d1R9p+X+1js4JogdNilDuuq+EHZdsH9MjTVxXOdVFfTJXunKJR/v+fNNyO4TnoOn5HqobzfRlc70NC6HTcdg==",
 			"dev": true,
 			"license": "BSD-2-Clause",
 			"dependencies": {
-				"@typescript-eslint/types": "8.8.0",
-				"@typescript-eslint/visitor-keys": "8.8.0",
+				"@typescript-eslint/types": "8.8.1",
+				"@typescript-eslint/visitor-keys": "8.8.1",
 				"debug": "^4.3.4",
 				"fast-glob": "^3.3.2",
 				"is-glob": "^4.0.3",
@@ -4402,16 +4403,16 @@
 			}
 		},
 		"node_modules/@typescript-eslint/utils": {
-			"version": "8.8.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.8.0.tgz",
-			"integrity": "sha512-QE2MgfOTem00qrlPgyByaCHay9yb1+9BjnMFnSFkUKQfu7adBXDTnCAivURnuPPAG/qiB+kzKkZKmKfaMT0zVg==",
+			"version": "8.8.1",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.8.1.tgz",
+			"integrity": "sha512-/QkNJDbV0bdL7H7d0/y0qBbV2HTtf0TIyjSDTvvmQEzeVx8jEImEbLuOA4EsvE8gIgqMitns0ifb5uQhMj8d9w==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@eslint-community/eslint-utils": "^4.4.0",
-				"@typescript-eslint/scope-manager": "8.8.0",
-				"@typescript-eslint/types": "8.8.0",
-				"@typescript-eslint/typescript-estree": "8.8.0"
+				"@typescript-eslint/scope-manager": "8.8.1",
+				"@typescript-eslint/types": "8.8.1",
+				"@typescript-eslint/typescript-estree": "8.8.1"
 			},
 			"engines": {
 				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -4425,13 +4426,13 @@
 			}
 		},
 		"node_modules/@typescript-eslint/visitor-keys": {
-			"version": "8.8.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.8.0.tgz",
-			"integrity": "sha512-8mq51Lx6Hpmd7HnA2fcHQo3YgfX1qbccxQOgZcb4tvasu//zXRaA1j5ZRFeCw/VRAdFi4mRM9DnZw0Nu0Q2d1g==",
+			"version": "8.8.1",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.8.1.tgz",
+			"integrity": "sha512-0/TdC3aeRAsW7MDvYRwEc1Uwm0TIBfzjPFgg60UU2Haj5qsCs9cc3zNgY71edqE3LbWfF/WoZQd3lJoDXFQpag==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
-				"@typescript-eslint/types": "8.8.0",
+				"@typescript-eslint/types": "8.8.1",
 				"eslint-visitor-keys": "^3.4.3"
 			},
 			"engines": {
@@ -5368,9 +5369,9 @@
 			}
 		},
 		"node_modules/css-functions-list": {
-			"version": "3.2.2",
-			"resolved": "https://registry.npmjs.org/css-functions-list/-/css-functions-list-3.2.2.tgz",
-			"integrity": "sha512-c+N0v6wbKVxTu5gOBBFkr9BEdBWaqqjQeiJ8QvSRIJOf+UxlJh930m8e6/WNeODIK0mYLFkoONrnj16i2EcvfQ==",
+			"version": "3.2.3",
+			"resolved": "https://registry.npmjs.org/css-functions-list/-/css-functions-list-3.2.3.tgz",
+			"integrity": "sha512-IQOkD3hbR5KrN93MtcYuad6YPuTSUhntLHDuLEbFWE+ff2/XSZNdZG+LcbbIW5AXKg/WFIfYItIzVoHngHXZzA==",
 			"dev": true,
 			"license": "MIT",
 			"engines": {
@@ -5607,9 +5608,9 @@
 			"license": "MIT"
 		},
 		"node_modules/electron-to-chromium": {
-			"version": "1.5.32",
-			"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.32.tgz",
-			"integrity": "sha512-M+7ph0VGBQqqpTT2YrabjNKSQ2fEl9PVx6AK3N558gDH9NO8O6XN9SXXFWRo9u9PbEg/bWq+tjXQr+eXmxubCw==",
+			"version": "1.5.33",
+			"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.33.tgz",
+			"integrity": "sha512-+cYTcFB1QqD4j4LegwLfpCNxifb6dDFUAwk6RsLusCwIaZI6or2f+q8rs5tTB2YC53HhOlIbEaqHMAAC8IOIwA==",
 			"dev": true,
 			"license": "ISC"
 		},
@@ -6392,16 +6393,6 @@
 				"url": "https://github.com/sponsors/ljharb"
 			}
 		},
-		"node_modules/get-func-name": {
-			"version": "2.0.2",
-			"resolved": "https://registry.npmjs.org/get-func-name/-/get-func-name-2.0.2.tgz",
-			"integrity": "sha512-8vXOvuE167CtIc3OyItco7N/dpRtBbYOsPsXCz7X/PMnlGjYjSGuZJgM1Y7mmew7BKf9BqvLX2tnOVy1BBUsxQ==",
-			"dev": true,
-			"license": "MIT",
-			"engines": {
-				"node": "*"
-			}
-		},
 		"node_modules/get-nonce": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz",
@@ -6866,14 +6857,14 @@
 			"license": "MIT"
 		},
 		"node_modules/intl-messageformat": {
-			"version": "10.5.14",
-			"resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-10.5.14.tgz",
-			"integrity": "sha512-IjC6sI0X7YRjjyVH9aUgdftcmZK7WXdHeil4KwbjDnRWjnVitKpAx3rr6t6di1joFp5188VqKcobOPA6mCLG/w==",
+			"version": "10.6.0",
+			"resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-10.6.0.tgz",
+			"integrity": "sha512-AYKl/DY1nl75pJU8EK681JOVL40uQTNJe3yEMXKfydDFoz+5hNrM/PqjchueSMKGKCZKBVgeexqZwy3uC2B36Q==",
 			"license": "BSD-3-Clause",
 			"dependencies": {
-				"@formatjs/ecma402-abstract": "2.0.0",
+				"@formatjs/ecma402-abstract": "2.1.0",
 				"@formatjs/fast-memoize": "2.2.0",
-				"@formatjs/icu-messageformat-parser": "2.7.8",
+				"@formatjs/icu-messageformat-parser": "2.7.9",
 				"tslib": "^2.4.0"
 			}
 		},
@@ -7353,14 +7344,11 @@
 			}
 		},
 		"node_modules/loupe": {
-			"version": "3.1.1",
-			"resolved": "https://registry.npmjs.org/loupe/-/loupe-3.1.1.tgz",
-			"integrity": "sha512-edNu/8D5MKVfGVFRhFf8aAxiTM6Wumfz5XsaatSxlD3w4R1d/WEKUTydCdPGbl9K7QG/Ca3GnDV2sIKIpXRQcw==",
+			"version": "3.1.2",
+			"resolved": "https://registry.npmjs.org/loupe/-/loupe-3.1.2.tgz",
+			"integrity": "sha512-23I4pFZHmAemUnz8WZXbYRSKYj801VDaNv9ETuMh7IrMc7VuVVSo+Z9iLE3ni30+U48iDWfi30d3twAXBYmnCg==",
 			"dev": true,
-			"license": "MIT",
-			"dependencies": {
-				"get-func-name": "^2.0.1"
-			}
+			"license": "MIT"
 		},
 		"node_modules/lowlight": {
 			"version": "3.1.0",
@@ -8566,14 +8554,14 @@
 			}
 		},
 		"node_modules/pkg-types": {
-			"version": "1.2.0",
-			"resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-1.2.0.tgz",
-			"integrity": "sha512-+ifYuSSqOQ8CqP4MbZA5hDpb97n3E8SVWdJe+Wms9kj745lmd3b7EZJiqvmLwAlmRfjrI7Hi5z3kdBJ93lFNPA==",
+			"version": "1.2.1",
+			"resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-1.2.1.tgz",
+			"integrity": "sha512-sQoqa8alT3nHjGuTjuKgOnvjo4cljkufdtLMnO2LBP/wRwuDlo1tkaEdMxCRhyGRPacv/ztlZgDPm2b7FAmEvw==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
-				"confbox": "^0.1.7",
-				"mlly": "^1.7.1",
+				"confbox": "^0.1.8",
+				"mlly": "^1.7.2",
 				"pathe": "^1.1.2"
 			}
 		},
@@ -9181,20 +9169,20 @@
 			}
 		},
 		"node_modules/react-intl": {
-			"version": "6.7.0",
-			"resolved": "https://registry.npmjs.org/react-intl/-/react-intl-6.7.0.tgz",
-			"integrity": "sha512-f5QhjuKb+WEqiAbL5hDqUs2+sSRkF0vxkTbJ4A8ompt55XTyOHcrDlCXGq4o73ywFFrpgz+78C9IXegSLlya2A==",
+			"version": "6.7.2",
+			"resolved": "https://registry.npmjs.org/react-intl/-/react-intl-6.7.2.tgz",
+			"integrity": "sha512-v/lvAORTE70welhzqoIi1YI1yHvGE4/QX4W3JYNZoqRxH8ab8Q/Ed4Zem/ZVPZJN4byQ52U+2GESLy0zvY6IBw==",
 			"license": "BSD-3-Clause",
 			"dependencies": {
-				"@formatjs/ecma402-abstract": "2.0.0",
-				"@formatjs/icu-messageformat-parser": "2.7.8",
-				"@formatjs/intl": "2.10.5",
-				"@formatjs/intl-displaynames": "6.6.8",
-				"@formatjs/intl-listformat": "7.5.7",
+				"@formatjs/ecma402-abstract": "2.1.0",
+				"@formatjs/icu-messageformat-parser": "2.7.9",
+				"@formatjs/intl": "2.10.7",
+				"@formatjs/intl-displaynames": "6.6.9",
+				"@formatjs/intl-listformat": "7.5.8",
 				"@types/hoist-non-react-statics": "^3.3.1",
 				"@types/react": "16 || 17 || 18",
 				"hoist-non-react-statics": "^3.3.2",
-				"intl-messageformat": "10.5.14",
+				"intl-messageformat": "10.6.0",
 				"tslib": "^2.4.0"
 			},
 			"peerDependencies": {
@@ -10841,9 +10829,9 @@
 			}
 		},
 		"node_modules/typescript": {
-			"version": "5.6.2",
-			"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.2.tgz",
-			"integrity": "sha512-NW8ByodCSNCwZeghjN3o+JX5OFH0Ojg6sadjEKY4huZ52TqbJTJnDo5+Tw98lSy63NZvi4n+ez5m2u5d4PkZyw==",
+			"version": "5.6.3",
+			"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.3.tgz",
+			"integrity": "sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==",
 			"devOptional": true,
 			"license": "Apache-2.0",
 			"bin": {
diff --git a/package.json b/package.json
index ee7ebac6..1fe39516 100644
--- a/package.json
+++ b/package.json
@@ -77,7 +77,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/empty-state": "^7.11.4",
-		"@atlaskit/icon": "^22.20.2",
+		"@atlaskit/icon": "^22.22.0",
 		"@emotion/css": "^11.13.4",
 		"@hello-pangea/dnd": "^17.0.0",
 		"@radix-ui/react-accordion": "^1.2.1",
@@ -102,7 +102,7 @@
 		"mime-types": "^2.1.35",
 		"react-awesome-slider": "^4.1.0",
 		"react-day-picker": "^8.10.1",
-		"react-intl": "^6.7.0",
+		"react-intl": "^6.7.2",
 		"react-joyride": "^2.9.2",
 		"react-router-dom": "^6.26.2",
 		"react-select": "^5.8.1",
@@ -118,25 +118,25 @@
 		"@atlaskit/lozenge": "^11.11.0",
 		"@atlaskit/pagination": "^14.9.3",
 		"@atlaskit/side-navigation": "^3.5.3",
-		"@atlaskit/table-tree": "^10.0.3",
+		"@atlaskit/table-tree": "^10.0.4",
 		"@atlaskit/tag": "^12.6.3",
 		"@atlaskit/tag-group": "^10.6.0",
 		"@atlaskit/textarea": "^5.6.2",
-		"@atlaskit/textfield": "^6.5.2",
+		"@atlaskit/textfield": "^6.5.3",
 		"@atlaskit/theme": "^13.0.2",
 		"@babel/generator": "^7.25.7",
 		"@babel/parser": "^7.25.7",
 		"@babel/traverse": "^7.25.7",
 		"@babel/types": "^7.25.7",
 		"@biomejs/biome": "^1.9.3",
-		"@formatjs/cli": "^6.2.12",
+		"@formatjs/cli": "^6.2.14",
 		"@monaco-editor/react": "^4.6.0",
 		"@total-typescript/ts-reset": "^0.6.1",
-		"@types/node": "^22.7.4",
+		"@types/node": "^22.7.5",
 		"@types/react": "^18.3.11",
 		"@types/react-dom": "^18.3.0",
-		"@typescript-eslint/eslint-plugin": "^8.8.0",
-		"@typescript-eslint/parser": "^8.8.0",
+		"@typescript-eslint/eslint-plugin": "^8.8.1",
+		"@typescript-eslint/parser": "^8.8.1",
 		"@vitejs/plugin-react-swc": "^3.7.1",
 		"autoprefixer": "^10.4.20",
 		"eslint-config-prettier": "^9.1.0",
@@ -157,7 +157,7 @@
 		"stylelint-order": "^6.0.4",
 		"tailwind-merge": "^2.5.3",
 		"tailwindcss": "^3.4.13",
-		"typescript": "^5.6.2",
+		"typescript": "^5.6.3",
 		"typescript-plugin-css-modules": "^5.1.0",
 		"vite": "^5.4.8",
 		"vite-plugin-dts": "^4.2.3",
diff --git a/showcase/public/showcase-sources.txt b/showcase/public/showcase-sources.txt
index 524f06f1..1658838d 100644
--- a/showcase/public/showcase-sources.txt
+++ b/showcase/public/showcase-sources.txt
@@ -7508,7 +7508,7 @@ import ShowcaseWrapperItem, {
 	type ShowcaseProps,
 } from "../../ShowCaseWrapperItem/ShowcaseWrapperItem"
 
-import { Button, TimeTable } from "@linked-planet/ui-kit-ts"
+import { Button, TimeTable, timeTableUtils } from "@linked-planet/ui-kit-ts"
 
 import CreateNewTimeTableItemDialog from "@linked-planet/ui-kit-ts/components/timetable/CreateNewItem"
 import ChevronLeftIcon from "@atlaskit/icon/glyph/chevron-left"
@@ -7925,26 +7925,64 @@ function createMoreTestGroups(
 const startDateInitial = dayjs().startOf("day").add(-1, "day").add(8, "hours")
 const endDateInitial = dayjs().startOf("day").add(5, "days").add(20, "hours")
 
-function testCustomHeaderRowTimeSlot({
+function TestCustomHeaderRowTimeSlot<
+	G extends TimeTableTypes.TimeTableGroup,
+	I extends TimeTableTypes.TimeSlotBooking,
+>({
 	timeSlot,
 	timeSlotMinutes,
 	isLastOfDay,
 	timeFrameOfDay,
 	viewType,
-}: TimeTableTypes.CustomHeadeRowTimeSlotProps) {
-	return <div>{timeSlot.format()}</div>
+	slotsArray,
+	entries,
+}: TimeTableTypes.CustomHeadeRowTimeSlotProps<G, I>) {
+	const groupItems = entries[1].items
+
+	const startAndEndSlots = groupItems.map((it) =>
+		timeTableUtils.getStartAndEndSlot(
+			it,
+			slotsArray,
+			timeFrameOfDay,
+			timeSlotMinutes,
+			viewType,
+		),
+	)
+
+	const getLeftAndWidth = groupItems.map((it, i) => {
+		const startAndEnd = startAndEndSlots[i]
+		if (startAndEnd.status === "before" || startAndEnd.status === "after") {
+			return null
+		}
+		return timeTableUtils.getLeftAndWidth(
+			it,
+			startAndEnd.startSlot,
+			startAndEnd.endSlot,
+			slotsArray,
+			timeFrameOfDay,
+			viewType,
+			timeSlotMinutes,
+		)
+	})
+
+	console.log("GET LEFT AND WIDTH", getLeftAndWidth)
+	return <div>{startAndEndSlots.length}</div>
 }
 
-function customHeaderRowHeader({
+function CustomHeaderRowHeader<
+	G extends TimeTableTypes.TimeTableGroup,
+	I extends TimeTableTypes.TimeSlotBooking,
+>({
 	slotsArray,
 	timeFrameOfDay,
 	viewType,
-}: {
-	slotsArray: readonly Dayjs[]
-	timeFrameOfDay: TimeTableTypes.TimeFrameDay
-	viewType: TimeTableTypes.TimeTableViewType
-}) {
-	return <div>HEADER</div>
+	entries,
+}: TimeTableTypes.CustomHeaderRowHeaderProps<G, I>) {
+	return (
+		<div>
+			{entries[1].group.title} has {entries.length} entries
+		</div>
+	)
 }
 
 function Example() {
@@ -8343,8 +8381,8 @@ function Example() {
 					viewType={viewType}
 					locale={locale}
 					customHeaderRow={{
-						timeSlot: testCustomHeaderRowTimeSlot,
-						header: customHeaderRowHeader,
+						timeSlot: TestCustomHeaderRowTimeSlot,
+						header: CustomHeaderRowHeader,
 					}}
 				/>
 			</div>
diff --git a/showcase/src/components/showcase/wrapper/TimeTableShowcase.tsx b/showcase/src/components/showcase/wrapper/TimeTableShowcase.tsx
index ab010b79..cf78010c 100644
--- a/showcase/src/components/showcase/wrapper/TimeTableShowcase.tsx
+++ b/showcase/src/components/showcase/wrapper/TimeTableShowcase.tsx
@@ -5,7 +5,7 @@ import ShowcaseWrapperItem, {
 	type ShowcaseProps,
 } from "../../ShowCaseWrapperItem/ShowcaseWrapperItem"
 
-import { Button, TimeTable } from "@linked-planet/ui-kit-ts"
+import { Button, TimeTable, timeTableUtils } from "@linked-planet/ui-kit-ts"
 
 import CreateNewTimeTableItemDialog from "@linked-planet/ui-kit-ts/components/timetable/CreateNewItem"
 import ChevronLeftIcon from "@atlaskit/icon/glyph/chevron-left"
@@ -422,26 +422,96 @@ function createMoreTestGroups(
 const startDateInitial = dayjs().startOf("day").add(-1, "day").add(8, "hours")
 const endDateInitial = dayjs().startOf("day").add(5, "days").add(20, "hours")
 
-function testCustomHeaderRowTimeSlot({
+function TestCustomHeaderRowTimeSlot<
+	G extends TimeTableTypes.TimeTableGroup,
+	I extends TimeTableTypes.TimeSlotBooking,
+>({
 	timeSlot,
 	timeSlotMinutes,
 	isLastOfDay,
 	timeFrameOfDay,
 	viewType,
-}: TimeTableTypes.CustomHeadeRowTimeSlotProps) {
-	return <div>{timeSlot.format()}</div>
+	slotsArray,
+	entries,
+	tableCellRef,
+}: TimeTableTypes.CustomHeadeRowTimeSlotProps<G, I>) {
+	const groupItems = entries[1].items
+
+	const groupItemsOfCell: I[] = []
+	const startAndEndInSlow: {
+		status: "in" | "before" | "after"
+		startSlot: number
+		endSlot: number
+	}[] = []
+	for (let i = 0; i < groupItems.length; i++) {
+		const item = groupItems[i]
+		const startAndEnd = timeTableUtils.getStartAndEndSlot(
+			item,
+			slotsArray,
+			timeFrameOfDay,
+			timeSlotMinutes,
+			viewType,
+		)
+		if (slotsArray[startAndEnd.startSlot] === timeSlot) {
+			groupItemsOfCell.push(item)
+			startAndEndInSlow.push(startAndEnd)
+		}
+	}
+
+	console.log("GROUP ITEMS", groupItemsOfCell)
+
+	const leftAndWidths = groupItemsOfCell.map((it, i) => {
+		const startAndEnd = startAndEndInSlow[i]
+		if (startAndEnd.status === "before" || startAndEnd.status === "after") {
+			return null
+		}
+		return timeTableUtils.getLeftAndWidth(
+			it,
+			startAndEnd.startSlot,
+			startAndEnd.endSlot,
+			slotsArray,
+			timeFrameOfDay,
+			viewType,
+			timeSlotMinutes,
+		)
+	})
+
+	const cellWidth = tableCellRef.current?.offsetWidth ?? 70
+
+	const ret = leftAndWidths.map((it, i) =>
+		it ? (
+			<div
+				key={groupItemsOfCell[i].title}
+				className="absolute top-0 bottom-0 bg-warning-bold whitespace-nowrap overflow-visible truncate"
+				style={{
+					left: `${it.left * cellWidth}px`,
+					width: `${it.width * cellWidth}px`,
+				}}
+			>
+				{groupItemsOfCell[i].title}
+			</div>
+		) : null,
+	)
+
+	console.log("RET", ret, leftAndWidths)
+
+	return <>{ret}</>
 }
 
-function customHeaderRowHeader({
+function CustomHeaderRowHeader<
+	G extends TimeTableTypes.TimeTableGroup,
+	I extends TimeTableTypes.TimeSlotBooking,
+>({
 	slotsArray,
 	timeFrameOfDay,
 	viewType,
-}: {
-	slotsArray: readonly Dayjs[]
-	timeFrameOfDay: TimeTableTypes.TimeFrameDay
-	viewType: TimeTableTypes.TimeTableViewType
-}) {
-	return <div>HEADER</div>
+	entries,
+}: TimeTableTypes.CustomHeaderRowHeaderProps<G, I>) {
+	return (
+		<div>
+			{entries[1].group.title} has {entries.length} entries
+		</div>
+	)
 }
 
 function Example() {
@@ -840,8 +910,8 @@ function Example() {
 					viewType={viewType}
 					locale={locale}
 					customHeaderRow={{
-						timeSlot: testCustomHeaderRowTimeSlot,
-						header: customHeaderRowHeader,
+						timeSlot: TestCustomHeaderRowTimeSlot,
+						header: CustomHeaderRowHeader,
 					}}
 				/>
 			</div>