diff --git a/frontend/package.json b/frontend/package.json
index 537397c..c490d33 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -11,7 +11,8 @@
   },
   "dependencies": {
     "@azure/msal-browser": "^2.37.0",
-    "@giraugh/tools": "^1.5.0",
+    "@giraugh/tools": "^1.6.0",
+    "@js-temporal/polyfill": "^0.4.4",
     "@microsoft/microsoft-graph-client": "^3.0.5",
     "accept-language": "^3.0.18",
     "dayjs": "^1.11.7",
diff --git a/frontend/src/app/how-to/page.module.scss b/frontend/src/app/how-to/page.module.scss
new file mode 100644
index 0000000..ec33746
--- /dev/null
+++ b/frontend/src/app/how-to/page.module.scss
@@ -0,0 +1,50 @@
+.step {
+  text-decoration-color: var(--primary);
+  text-decoration-style: solid;
+  text-decoration-line: underline;
+  margin-top: 30px;
+}
+
+.fakeCalendar {
+  user-select: none;
+
+  & div {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    grid-gap: 2px;
+  }
+  & div:first-of-type span {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 3px 0;
+    font-weight: bold;
+    user-select: none;
+    opacity: .7;
+    @media (max-width: 350px) {
+      font-size: 12px;
+    }
+  }
+  & div:last-of-type span {
+    border: 1px solid var(--primary);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 10px 0;
+    color: #FFF;
+    background-color: var(--primary);
+
+    &:first-of-type {
+      border-start-start-radius: 3px;
+      border-end-start-radius: 3px;
+      color: inherit;
+      background-color: var(--surface);
+    }
+    &:last-of-type {
+      border-end-end-radius: 3px;
+      border-start-end-radius: 3px;
+      color: inherit;
+      background-color: var(--surface);
+    }
+  }
+}
diff --git a/frontend/src/app/how-to/page.tsx b/frontend/src/app/how-to/page.tsx
new file mode 100644
index 0000000..36c3774
--- /dev/null
+++ b/frontend/src/app/how-to/page.tsx
@@ -0,0 +1,74 @@
+import { Trans } from 'react-i18next/TransWithoutContext'
+import { Metadata } from 'next'
+import Link from 'next/link'
+import { range } from '@giraugh/tools'
+
+import AvailabilityViewer from '/src/components/AvailabilityViewer/AvailabilityViewer'
+import Button from '/src/components/Button/Button'
+import Content from '/src/components/Content/Content'
+import Header from '/src/components/Header/Header'
+import { P } from '/src/components/Paragraph/Text'
+import Section from '/src/components/Section/Section'
+import TimeRangeField from '/src/components/TimeRangeField/TimeRangeField'
+import Video from '/src/components/Video/Video'
+import { useTranslation } from '/src/i18n/server'
+
+import styles from './page.module.scss'
+
+export const generateMetadata = async (): Promise<Metadata> => {
+  const { t } = await useTranslation('help')
+
+  return {
+    title: t('name'),
+  }
+}
+
+const Page = async () => {
+  const { t, i18n } = await useTranslation(['common', 'help'])
+
+  return <>
+    <Content>
+      {/* @ts-expect-error Async Server Component */}
+      <Header />
+
+      <h1>{t('help:name')}</h1>
+
+      <Video />
+
+      <P>{t('help:p1')}</P>
+      <P>{t('help:p2')}</P>
+
+      <h2 className={styles.step}>{t('help:s1')}</h2>
+      <P><Trans i18nKey="help:p3" t={t} i18n={i18n}>_<Link href="/">_</Link>_</Trans></P>
+      <P>{t('help:p4')}</P>
+      <div className={styles.fakeCalendar}>
+        <div>{['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map(d => <span key={d}>{d}</span>)}</div>
+        <div>{range(11, 17).map(d => <span key={d}>{d}</span>)}</div>
+      </div>
+      <P>{t('help:p5')}</P>
+      <TimeRangeField name="time" staticValue={{ start: 11, end: 17 }} />
+
+      <h2 className={styles.step}>{t('help:s2')}</h2>
+      <P>{t('help:p6')}</P>
+      <P>{t('help:p7')}</P>
+      <AvailabilityViewer
+        times={['1100-12042021', '1115-12042021', '1130-12042021', '1145-12042021', '1200-12042021', '1215-12042021', '1230-12042021', '1245-12042021', '1300-12042021', '1315-12042021', '1330-12042021', '1345-12042021', '1400-12042021', '1415-12042021', '1430-12042021', '1445-12042021', '1500-12042021', '1515-12042021', '1530-12042021', '1545-12042021', '1600-12042021', '1615-12042021', '1630-12042021', '1645-12042021', '1100-13042021', '1115-13042021', '1130-13042021', '1145-13042021', '1200-13042021', '1215-13042021', '1230-13042021', '1245-13042021', '1300-13042021', '1315-13042021', '1330-13042021', '1345-13042021', '1400-13042021', '1415-13042021', '1430-13042021', '1445-13042021', '1500-13042021', '1515-13042021', '1530-13042021', '1545-13042021', '1600-13042021', '1615-13042021', '1630-13042021', '1645-13042021', '1100-14042021', '1115-14042021', '1130-14042021', '1145-14042021', '1200-14042021', '1215-14042021', '1230-14042021', '1245-14042021', '1300-14042021', '1315-14042021', '1330-14042021', '1345-14042021', '1400-14042021', '1415-14042021', '1430-14042021', '1445-14042021', '1500-14042021', '1515-14042021', '1530-14042021', '1545-14042021', '1600-14042021', '1615-14042021', '1630-14042021', '1645-14042021', '1100-15042021', '1115-15042021', '1130-15042021', '1145-15042021', '1200-15042021', '1215-15042021', '1230-15042021', '1245-15042021', '1300-15042021', '1315-15042021', '1330-15042021', '1345-15042021', '1400-15042021', '1415-15042021', '1430-15042021', '1445-15042021', '1500-15042021', '1515-15042021', '1530-15042021', '1545-15042021', '1600-15042021', '1615-15042021', '1630-15042021', '1645-15042021', '1100-16042021', '1115-16042021', '1130-16042021', '1145-16042021', '1200-16042021', '1215-16042021', '1230-16042021', '1245-16042021', '1300-16042021', '1315-16042021', '1330-16042021', '1345-16042021', '1400-16042021', '1415-16042021', '1430-16042021', '1445-16042021', '1500-16042021', '1515-16042021', '1530-16042021', '1545-16042021', '1600-16042021', '1615-16042021', '1630-16042021', '1645-16042021']}
+        people={[{ name: 'Jenny', created_at: 0, availability: ['1100-12042021', '1100-13042021', '1100-14042021', '1100-15042021', '1115-12042021', '1115-13042021', '1115-14042021', '1115-15042021', '1130-12042021', '1130-13042021', '1130-14042021', '1130-15042021', '1145-12042021', '1145-13042021', '1145-14042021', '1145-15042021', '1200-12042021', '1200-13042021', '1200-14042021', '1200-15042021', '1215-12042021', '1215-13042021', '1215-14042021', '1215-15042021', '1230-12042021', '1230-13042021', '1230-14042021', '1230-15042021', '1245-12042021', '1245-13042021', '1245-14042021', '1245-15042021', '1300-12042021', '1300-13042021', '1300-14042021', '1300-15042021', '1300-16042021', '1315-12042021', '1315-13042021', '1315-14042021', '1315-15042021', '1315-16042021', '1330-12042021', '1330-13042021', '1330-14042021', '1330-15042021', '1330-16042021', '1345-12042021', '1345-13042021', '1345-14042021', '1345-15042021', '1345-16042021', '1400-12042021', '1400-13042021', '1400-14042021', '1400-15042021', '1400-16042021', '1415-12042021', '1415-13042021', '1415-14042021', '1415-15042021', '1415-16042021', '1430-12042021', '1430-13042021', '1430-14042021', '1430-15042021', '1430-16042021', '1445-12042021', '1445-13042021', '1445-14042021', '1445-15042021', '1445-16042021', '1500-12042021', '1500-15042021', '1500-16042021', '1515-12042021', '1515-15042021', '1515-16042021', '1530-12042021', '1530-15042021', '1530-16042021', '1545-12042021', '1545-15042021', '1545-16042021', '1600-12042021', '1600-15042021', '1600-16042021', '1615-12042021', '1615-15042021', '1615-16042021', '1630-12042021', '1630-15042021', '1630-16042021', '1645-12042021', '1645-15042021', '1645-16042021'] }]}
+        timezone="UTC"
+      />
+
+      <h2 className={styles.step}>{t('help:s3')}</h2>
+      <P>{t('help:p8')}</P>
+      <P>{t('help:p9')}</P>
+      <P>{t('help:p10')}</P>
+    </Content>
+
+    <Section>
+      <Content isCentered>
+        <Button href="/">{t('common:cta')}</Button>
+      </Content>
+    </Section>
+  </>
+}
+
+export default Page
diff --git a/frontend/src/components/AvailabilityViewer/AvailabilityViewer.jsx b/frontend/src/components/AvailabilityViewer/AvailabilityViewer.jsx
deleted file mode 100644
index dd032eb..0000000
--- a/frontend/src/components/AvailabilityViewer/AvailabilityViewer.jsx
+++ /dev/null
@@ -1,235 +0,0 @@
-import { useState, useEffect, useRef, useMemo, Fragment } from 'react'
-import { useTranslation } from 'react-i18next'
-import dayjs from 'dayjs'
-import localeData from 'dayjs/plugin/localeData'
-import customParseFormat from 'dayjs/plugin/customParseFormat'
-import relativeTime from 'dayjs/plugin/relativeTime'
-import { createPalette } from 'hue-map'
-
-import { useSettingsStore, useLocaleUpdateStore } from '/src/stores'
-
-import { Legend } from '/src/components'
-import {
-  Wrapper,
-  ScrollWrapper,
-  Container,
-  Date,
-  Times,
-  DateLabel,
-  DayLabel,
-  Time,
-  Spacer,
-  Tooltip,
-  TooltipTitle,
-  TooltipDate,
-  TooltipContent,
-  TooltipPerson,
-  TimeLabels,
-  TimeLabel,
-  TimeSpace,
-  People,
-  Person,
-  StyledMain,
-  Info,
-} from './AvailabilityViewer.styles'
-
-import locales from '/src/i18n/locales'
-
-dayjs.extend(localeData)
-dayjs.extend(customParseFormat)
-dayjs.extend(relativeTime)
-
-const AvailabilityViewer = ({
-  times,
-  timeLabels,
-  dates,
-  isSpecificDates,
-  people = [],
-  min = 0,
-  max = 0,
-}) => {
-  const [tooltip, setTooltip] = useState(null)
-  const timeFormat = useSettingsStore(state => state.timeFormat)
-  const highlight = useSettingsStore(state => state.highlight)
-  const colormap = useSettingsStore(state => state.colormap)
-  const [filteredPeople, setFilteredPeople] = useState([])
-  const [touched, setTouched] = useState(false)
-  const [tempFocus, setTempFocus] = useState(null)
-  const [focusCount, setFocusCount] = useState(null)
-
-  const { t } = useTranslation('event')
-  const locale = useLocaleUpdateStore(state => state.locale)
-
-  const wrapper = useRef()
-
-  useEffect(() => {
-    setFilteredPeople(people.map(p => p.name))
-    setTouched(people.length <= 1)
-  }, [people])
-
-  const [palette, setPalette] = useState([])
-
-  useEffect(() => setPalette(createPalette({
-    map: colormap === 'crabfit' ? [[0, [247,158,0,0]], [1, [247,158,0,255]]] : colormap,
-    steps: tempFocus !== null ? 2 : Math.min(max, filteredPeople.length)+1,
-  }).format()), [tempFocus, filteredPeople, max, colormap])
-
-  const heatmap = useMemo(() => (
-    <Container>
-      <TimeLabels>
-        {!!timeLabels.length && timeLabels.map((label, i) =>
-          <TimeSpace key={i}>
-            {label.label?.length !== '' && <TimeLabel>{label.label}</TimeLabel>}
-          </TimeSpace>
-        )}
-      </TimeLabels>
-      {dates.map((date, i) => {
-        const parsedDate = isSpecificDates ? dayjs(date, 'DDMMYYYY') : dayjs().day(date)
-        const last = dates.length === i+1 || (isSpecificDates ? dayjs(dates[i+1], 'DDMMYYYY') : dayjs().day(dates[i+1])).diff(parsedDate, 'day') > 1
-        return (
-          <Fragment key={i}>
-            <Date>
-              {isSpecificDates && <DateLabel locale={locale}>{parsedDate.format('MMM D')}</DateLabel>}
-              <DayLabel>{parsedDate.format('ddd')}</DayLabel>
-
-              <Times
-                $borderRight={last}
-                $borderLeft={i === 0 || (parsedDate).diff(isSpecificDates ? dayjs(dates[i-1], 'DDMMYYYY') : dayjs().day(dates[i-1]), 'day') > 1}
-              >
-                {timeLabels.map((timeLabel, i) => {
-                  if (!timeLabel.time) return null
-                  if (!times.includes(`${timeLabel.time}-${date}`)) {
-                    return (
-                      <TimeSpace className="timespace" key={i} title={t('event:greyed_times')} />
-                    )
-                  }
-                  const time = `${timeLabel.time}-${date}`
-                  const peopleHere = tempFocus !== null
-                    ? people.filter(person => person.availability.includes(time) && tempFocus === person.name).map(person => person.name)
-                    : people.filter(person => person.availability.includes(time) && filteredPeople.includes(person.name)).map(person => person.name)
-
-                  return (
-                    <Time
-                      key={i}
-                      $time={time}
-                      className="time"
-                      $peopleCount={focusCount !== null && focusCount !== peopleHere.length ? null : peopleHere.length}
-                      $palette={palette}
-                      aria-label={peopleHere.join(', ')}
-                      $maxPeople={tempFocus !== null ? 1 : Math.min(max, filteredPeople.length)}
-                      $minPeople={tempFocus !== null ? 0 : Math.min(min, filteredPeople.length)}
-                      $highlight={highlight}
-                      onMouseEnter={e => {
-                        const cellBox = e.currentTarget.getBoundingClientRect()
-                        const wrapperBox = wrapper?.current?.getBoundingClientRect() ?? { x: 0, y: 0 }
-                        const timeText = timeFormat === '12h' ? `h${locales[locale]?.separator ?? ':'}mma` : `HH${locales[locale]?.separator ?? ':'}mm`
-                        setTooltip({
-                          x: Math.round(cellBox.x-wrapperBox.x + cellBox.width/2),
-                          y: Math.round(cellBox.y-wrapperBox.y + cellBox.height)+6,
-                          available: `${peopleHere.length} / ${filteredPeople.length} ${t('event:available')}`,
-                          date: parsedDate.hour(time.slice(0, 2)).minute(time.slice(2, 4)).format(isSpecificDates ? `${timeText} ddd, D MMM YYYY` : `${timeText} ddd`),
-                          people: peopleHere,
-                        })
-                      }}
-                      onMouseLeave={() => {
-                        setTooltip(null)
-                      }}
-                    />
-                  )
-                })}
-              </Times>
-            </Date>
-            {last && dates.length !== i+1 && <Spacer />}
-          </Fragment>
-        )
-      })}
-    </Container>
-  ), [
-    people,
-    filteredPeople,
-    tempFocus,
-    focusCount,
-    highlight,
-    locale,
-    dates,
-    isSpecificDates,
-    max,
-    min,
-    t,
-    timeFormat,
-    timeLabels,
-    times,
-    palette,
-  ])
-
-  return (
-    <>
-      <StyledMain>
-        <Legend
-          min={Math.min(min, filteredPeople.length)}
-          max={Math.min(max, filteredPeople.length)}
-          total={filteredPeople.length}
-          onSegmentFocus={count => setFocusCount(count)}
-        />
-        <Info>{t('event:group.info1')}</Info>
-        {people.length > 1 && (
-          <>
-            <Info>{t('event:group.info2')}</Info>
-            <People>
-              {people.map((person, i) =>
-                <Person
-                  key={i}
-                  $filtered={filteredPeople.includes(person.name)}
-                  onClick={() => {
-                    setTempFocus(null)
-                    if (filteredPeople.includes(person.name)) {
-                      if (!touched) {
-                        setTouched(true)
-                        setFilteredPeople([person.name])
-                      } else {
-                        setFilteredPeople(filteredPeople.filter(n => n !== person.name))
-                      }
-                    } else {
-                      setFilteredPeople([...filteredPeople, person.name])
-                    }
-                  }}
-                  onMouseOver={() => setTempFocus(person.name)}
-                  onMouseOut={() => setTempFocus(null)}
-                  title={person.created && dayjs.unix(person.created).fromNow()}
-                >{person.name}</Person>
-              )}
-            </People>
-          </>
-        )}
-      </StyledMain>
-
-      <Wrapper ref={wrapper}>
-        <ScrollWrapper>
-          {heatmap}
-
-          {tooltip && (
-            <Tooltip
-              $x={tooltip.x}
-              $y={tooltip.y}
-            >
-              <TooltipTitle>{tooltip.available}</TooltipTitle>
-              <TooltipDate>{tooltip.date}</TooltipDate>
-              {!!filteredPeople.length && (
-                <TooltipContent>
-                  {tooltip.people.map(person =>
-                    <TooltipPerson key={person}>{person}</TooltipPerson>
-                  )}
-                  {filteredPeople.filter(p => !tooltip.people.includes(p)).map(person =>
-                    <TooltipPerson key={person} disabled>{person}</TooltipPerson>
-                  )}
-                </TooltipContent>
-              )}
-            </Tooltip>
-          )}
-        </ScrollWrapper>
-      </Wrapper>
-    </>
-  )
-}
-
-export default AvailabilityViewer
diff --git a/frontend/src/components/AvailabilityViewer/AvailabilityViewer.module.scss b/frontend/src/components/AvailabilityViewer/AvailabilityViewer.module.scss
new file mode 100644
index 0000000..af16d5e
--- /dev/null
+++ b/frontend/src/components/AvailabilityViewer/AvailabilityViewer.module.scss
@@ -0,0 +1,169 @@
+.heatmap {
+  display: inline-flex;
+  box-sizing: border-box;
+  min-width: 100%;
+  align-items: flex-end;
+  justify-content: center;
+  padding: 0 calc(calc(100% - 600px) / 2);
+
+  @media (max-width: 660px) {
+    padding: 0 30px;
+  }
+}
+
+.timeLabels {
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  width: 40px;
+  padding-right: 6px;
+}
+
+.timeSpace {
+  height: 10px;
+  position: relative;
+  border-top: 2px solid transparent;
+
+  &.grey {
+    background-origin: border-box;
+    background-image: repeating-linear-gradient(
+      45deg,
+      transparent,
+      transparent 4.3px,
+      var(--loading) 4.3px,
+      var(--loading) 8.6px
+    );
+  }
+}
+
+.timeLabel {
+  display: block;
+  position: absolute;
+  top: -.7em;
+  font-size: 12px;
+  text-align: right;
+  user-select: none;
+  width: 100%;
+}
+
+.dateColumn {
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  width: 60px;
+  min-width: 60px;
+  margin-bottom: 10px;
+}
+
+.dateLabel {
+  display: block;
+  font-size: 12px;
+  text-align: center;
+  user-select: none;
+}
+
+.dayLabel {
+  display: block;
+  font-size: 15px;
+  text-align: center;
+  user-select: none;
+}
+
+.times {
+  display: flex;
+  flex-direction: column;
+
+  border-bottom: 2px solid var(--text);
+  border-left: 1px solid var(--text);
+  border-right: 1px solid var(--text);
+
+  &[data-border-left=true] {
+    border-left: 2px solid var(--text);
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  &[data-border-right=true] {
+    border-right: 2px solid var(--text);
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+
+  & .time + .timespace, & .timespace:first-of-type {
+    border-top: 2px solid var(--text);
+  }
+}
+
+.time {
+  height: 10px;
+  background-origin: border-box;
+  transition: background-color .1s;
+
+  border-top-width: 2px;
+  border-top-style: solid;
+  border-top-color: var(--text);
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+}
+
+.highlight {
+  background-image: repeating-linear-gradient(
+    45deg,
+    transparent,
+    transparent 4.3px,
+    rgba(0,0,0,.5) 4.3px,
+    rgba(0,0,0,.5) 8.6px
+  );
+}
+
+.info {
+  display: block;
+  text-align: center;
+
+  @media print {
+    display: none;
+  }
+}
+
+.people {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+  justify-content: center;
+  margin: 14px auto;
+}
+
+.person {
+  font: inherit;
+  font-size: 15px;
+  border-radius: 3px;
+  border: 1px solid var(--text);
+  color: var(--text);
+  font-weight: 500;
+  background: transparent;
+  cursor: pointer;
+  padding: 2px 8px;
+  user-select: none;
+}
+
+.personSelected {
+  background: var(--primary);
+  color: #FFFFFF;
+  border-color: var(--primary);
+}
+
+.wrapper {
+  overflow-y: visible;
+  margin: 20px 0;
+  position: relative;
+
+  & > div {
+    overflow-x: auto;
+  }
+}
+
+.columnSpacer {
+  width: 12px;
+  flex-shrink: 0;
+}
diff --git a/frontend/src/components/AvailabilityViewer/AvailabilityViewer.styles.js b/frontend/src/components/AvailabilityViewer/AvailabilityViewer.styles.js
index ec0c444..89801a2 100644
--- a/frontend/src/components/AvailabilityViewer/AvailabilityViewer.styles.js
+++ b/frontend/src/components/AvailabilityViewer/AvailabilityViewer.styles.js
@@ -1,112 +1,4 @@
 import { styled } from 'goober'
-import { forwardRef } from 'react'
-
-export const Wrapper = styled('div', forwardRef)`
-  overflow-y: visible;
-  margin: 20px 0;
-  position: relative;
-`
-
-export const ScrollWrapper = styled('div')`
-  overflow-x: auto;
-`
-
-export const Container = styled('div')`
-  display: inline-flex;
-  box-sizing: border-box;
-  min-width: 100%;
-  align-items: flex-end;
-  justify-content: center;
-  padding: 0 calc(calc(100% - 600px) / 2);
-
-  @media (max-width: 660px) {
-    padding: 0 30px;
-  }
-`
-
-export const Date = styled('div')`
-  flex-shrink: 0;
-  display: flex;
-  flex-direction: column;
-  width: 60px;
-  min-width: 60px;
-  margin-bottom: 10px;
-`
-
-export const Times = styled('div')`
-  display: flex;
-  flex-direction: column;
-
-  border-bottom: 2px solid var(--text);
-  border-left: 1px solid var(--text);
-  border-right: 1px solid var(--text);
-
-  ${props => props.$borderLeft && `
-    border-left: 2px solid var(--text);
-    border-top-left-radius: 3px;
-    border-bottom-left-radius: 3px;
-  `}
-  ${props => props.$borderRight && `
-    border-right: 2px solid var(--text);
-    border-top-right-radius: 3px;
-    border-bottom-right-radius: 3px;
-  `}
-
-  & .time + .timespace, & .timespace:first-of-type {
-    border-top: 2px solid var(--text);
-  }
-`
-
-export const DateLabel = styled('label')`
-  display: block;
-  font-size: 12px;
-  text-align: center;
-  user-select: none;
-`
-
-export const DayLabel = styled('label')`
-  display: block;
-  font-size: 15px;
-  text-align: center;
-  user-select: none;
-`
-
-export const Time = styled('div')`
-  height: 10px;
-  background-origin: border-box;
-  transition: background-color .1s;
-
-  ${props => props.$time.slice(2, 4) === '00' && `
-    border-top: 2px solid var(--text);
-  `}
-  ${props => props.$time.slice(2, 4) !== '00' && `
-    border-top: 2px solid transparent;
-  `}
-  ${props => props.$time.slice(2, 4) === '30' && `
-    border-top: 2px dotted var(--text);
-  `}
-
-  background-color: ${props => props.$palette[props.$peopleCount] ?? 'transparent'};
-
-  ${props => props.$highlight && props.$peopleCount === props.$maxPeople && props.$peopleCount > 0 && `
-    background-image: repeating-linear-gradient(
-      45deg,
-      transparent,
-      transparent 4.3px,
-      rgba(0,0,0,.5) 4.3px,
-      rgba(0,0,0,.5) 8.6px
-    );
-  `}
-
-  @media (prefers-reduced-motion: reduce) {
-    transition: none;
-  }
-`
-
-export const Spacer = styled('div')`
-  width: 12px;
-  flex-shrink: 0;
-`
 
 export const Tooltip = styled('div')`
   position: absolute;
@@ -153,80 +45,3 @@ export const TooltipPerson = styled('span')`
     border-color: var(--text);
   `}
 `
-
-export const TimeLabels = styled('div')`
-  flex-shrink: 0;
-  display: flex;
-  flex-direction: column;
-  width: 40px;
-  padding-right: 6px;
-`
-
-export const TimeSpace = styled('div')`
-  height: 10px;
-  position: relative;
-  border-top: 2px solid transparent;
-
-  &.timespace {
-    background-origin: border-box;
-    background-image: repeating-linear-gradient(
-      45deg,
-      transparent,
-      transparent 4.3px,
-      var(--loading) 4.3px,
-      var(--loading) 8.6px
-    );
-  }
-`
-
-export const TimeLabel = styled('label')`
-  display: block;
-  position: absolute;
-  top: -.7em;
-  font-size: 12px;
-  text-align: right;
-  user-select: none;
-  width: 100%;
-`
-
-export const StyledMain = styled('div')`
-  width: 600px;
-  margin: 20px auto;
-  max-width: calc(100% - 60px);
-`
-
-export const People = styled('div')`
-  display: flex;
-  flex-wrap: wrap;
-  gap: 5px;
-  justify-content: center;
-  margin: 14px auto;
-`
-
-export const Person = styled('button')`
-  font: inherit;
-  font-size: 15px;
-  border-radius: 3px;
-  border: 1px solid var(--text);
-  color: var(--text);
-  font-weight: 500;
-  background: transparent;
-  cursor: pointer;
-  padding: 2px 8px;
-  user-select: none;
-
-  ${props => props.$filtered && `
-    background: var(--primary);
-    color: #FFFFFF;
-    border-color: var(--primary);
-  `}
-`
-
-export const Info = styled('span')`
-  display: block;
-  text-align: center;
-
-  @media print {
-    display: none;
-  }
-`
diff --git a/frontend/src/components/AvailabilityViewer/AvailabilityViewer.tsx b/frontend/src/components/AvailabilityViewer/AvailabilityViewer.tsx
new file mode 100644
index 0000000..3b9e261
--- /dev/null
+++ b/frontend/src/components/AvailabilityViewer/AvailabilityViewer.tsx
@@ -0,0 +1,218 @@
+'use client'
+
+import { Fragment, useEffect, useMemo, useState } from 'react'
+import { Temporal } from '@js-temporal/polyfill'
+import { createPalette } from 'hue-map'
+
+import Content from '/src/components/Content/Content'
+import Legend from '/src/components/Legend/Legend'
+import { PersonResponse } from '/src/config/api'
+import { useTranslation } from '/src/i18n/client'
+import { useStore } from '/src/stores'
+import useSettingsStore from '/src/stores/settingsStore'
+import { calculateAvailability, calculateColumns, calculateRows, convertTimesToDates, makeClass } from '/src/utils'
+
+import styles from './AvailabilityViewer.module.scss'
+
+interface AvailabilityViewerProps {
+  times: string[]
+  timezone: string
+  people: PersonResponse[]
+}
+
+const AvailabilityViewer = ({ times, timezone, people }: AvailabilityViewerProps) => {
+  const { t, i18n } = useTranslation('event')
+
+  // const [tooltip, setTooltip] = useState(null)
+  const timeFormat = useStore(useSettingsStore, state => state.timeFormat)
+  const highlight = useStore(useSettingsStore, state => state.highlight)
+  const colormap = useStore(useSettingsStore, state => state.colormap)
+  const [filteredPeople, setFilteredPeople] = useState(people.map(p => p.name))
+  // const [tempFocus, setTempFocus] = useState(null)
+  // const [focusCount, setFocusCount] = useState(null)
+
+  // const wrapper = useRef()
+
+  // Calculate rows and columns
+  const [dates, rows, columns] = useMemo(() => {
+    const dates = convertTimesToDates(times, timezone)
+    return [dates, calculateRows(dates), calculateColumns(dates)]
+  }, [times, timezone])
+
+  // Calculate availabilities
+  const { availabilities, min, max } = useMemo(() => calculateAvailability(dates, people
+    .filter(p => filteredPeople.includes(p.name))
+    .map(p => ({
+      ...p,
+      availability: convertTimesToDates(p.availability, timezone),
+    }))
+  ), [dates, filteredPeople, people, timezone])
+
+  // Is specific dates or just days of the week
+  const isSpecificDates = useMemo(() => times[0].length === 13, [times])
+
+  // Create the colour palette
+  const [palette, setPalette] = useState<string[]>([])
+  useEffect(() => {
+    setPalette(createPalette({
+      map: colormap !== 'crabfit' ? colormap : [[0, [247, 158, 0, 0]], [1, [247, 158, 0, 255]]],
+      steps: (max - min) + 1,
+    }).format())
+  }, [min, max, colormap])
+
+  const heatmap = useMemo(() => (
+    <div className={styles.heatmap}>
+      <div className={styles.timeLabels}>
+        {rows.map((row, i) =>
+          <div className={styles.timeSpace} key={i}>
+            {row && row.minute === 0 && <label className={styles.timeLabel}>
+              {row.toLocaleString(i18n.language, { hour: 'numeric', hour12: timeFormat === '12h' })}
+            </label>}
+          </div>
+        )}
+      </div>
+
+      {columns.map((column, i) => <Fragment key={i}>
+        {column ? <div className={styles.dateColumn}>
+          {isSpecificDates && <label className={styles.dateLabel}>{column.toLocaleString(i18n.language, { month: 'short', day: 'numeric' })}</label>}
+          <label className={styles.dayLabel}>{column.toLocaleString(i18n.language, { weekday: 'short' })}</label>
+
+          <div
+            className={styles.times}
+            data-border-left={i === 0 || columns.at(i - 1) === null}
+            data-border-right={i === columns.length - 1 || columns.at(i + 1) === null}
+          >
+            {rows.map((row, i) => {
+              if (i === rows.length - 1) return null
+
+              if (!row || rows.at(i + 1) === null || dates.every(d => !d.equals(column.toZonedDateTime({ timeZone: timezone, plainTime: row })))) {
+                return <div
+                  className={makeClass(styles.timeSpace, styles.grey)}
+                  key={i}
+                  title={t<string>('greyed_times')}
+                />
+              }
+
+              const date = column.toZonedDateTime({ timeZone: timezone, plainTime: row })
+              const peopleHere = availabilities.find(a => a.date.equals(date))?.people ?? []
+
+              return <div
+                key={i}
+                className={makeClass(
+                  styles.time,
+                  highlight && peopleHere.length === max && peopleHere.length > 0 && styles.highlight,
+                )}
+                style={{
+                  backgroundColor: palette[peopleHere.length],
+                  ...date.minute !== 0 && date.minute !== 30 && { borderTopColor: 'transparent' },
+                  ...date.minute === 30 && { borderTopStyle: 'dotted' },
+                }}
+                aria-label={peopleHere.join(', ')}
+                // onMouseEnter={e => {
+                //   const cellBox = e.currentTarget.getBoundingClientRect()
+                //   const wrapperBox = wrapper?.current?.getBoundingClientRect() ?? { x: 0, y: 0 }
+                //   const timeText = timeFormat === '12h' ? `h${locales[locale]?.separator ?? ':'}mma` : `HH${locales[locale]?.separator ?? ':'}mm`
+                //   setTooltip({
+                //     x: Math.round(cellBox.x - wrapperBox.x + cellBox.width / 2),
+                //     y: Math.round(cellBox.y - wrapperBox.y + cellBox.height) + 6,
+                //     available: `${peopleHere.length} / ${filteredPeople.length} ${t('event:available')}`,
+                //     date: parsedDate.hour(time.slice(0, 2)).minute(time.slice(2, 4)).format(isSpecificDates ? `${timeText} ddd, D MMM YYYY` : `${timeText} ddd`),
+                //     people: peopleHere,
+                //   })
+                // }}
+                // onMouseLeave={() => {
+                //   setTooltip(null)
+                // }}
+              />
+            })}
+          </div>
+        </div> : <div className={styles.columnSpacer} />}
+      </Fragment>)}
+    </div>
+  ), [
+    availabilities,
+    dates,
+    isSpecificDates,
+    rows,
+    columns,
+    highlight,
+    max,
+    t,
+    timeFormat,
+    palette,
+  ])
+
+  return <>
+    <Content>
+      <Legend
+        min={min}
+        max={max}
+        total={filteredPeople.length}
+        palette={palette}
+        onSegmentFocus={console.log}
+      />
+
+      <span className={styles.info}>{t('group.info1')}</span>
+
+      {people.length > 1 && <>
+        <span className={styles.info}>{t('group.info2')}</span>
+        <div className={styles.people}>
+          {people.map(person =>
+            <button
+              type="button"
+              className={makeClass(
+                styles.person,
+                filteredPeople.includes(person.name) && styles.personSelected,
+              )}
+              key={person.name}
+              // onClick={() => {
+              //   setTempFocus(null)
+              //   if (filteredPeople.includes(person.name)) {
+              //     if (!touched) {
+              //       setTouched(true)
+              //       setFilteredPeople([person.name])
+              //     } else {
+              //       setFilteredPeople(filteredPeople.filter(n => n !== person.name))
+              //     }
+              //   } else {
+              //     setFilteredPeople([...filteredPeople, person.name])
+              //   }
+              // }}
+              // onMouseOver={() => setTempFocus(person.name)}
+              // onMouseOut={() => setTempFocus(null)}
+              title={Temporal.Instant.fromEpochSeconds(person.created_at).until(Temporal.Now.instant()).toLocaleString()}
+            >{person.name}</button>
+          )}
+        </div>
+      </>}
+    </Content>
+
+    <div className={styles.wrapper}>
+      <div>
+        {heatmap}
+
+        {/* {tooltip && (
+          <Tooltip
+            $x={tooltip.x}
+            $y={tooltip.y}
+          >
+            <TooltipTitle>{tooltip.available}</TooltipTitle>
+            <TooltipDate>{tooltip.date}</TooltipDate>
+            {!!filteredPeople.length && (
+              <TooltipContent>
+                {tooltip.people.map(person =>
+                  <TooltipPerson key={person}>{person}</TooltipPerson>
+                )}
+                {filteredPeople.filter(p => !tooltip.people.includes(p)).map(person =>
+                  <TooltipPerson key={person} disabled>{person}</TooltipPerson>
+                )}
+              </TooltipContent>
+            )}
+          </Tooltip>
+        )} */}
+      </div>
+    </div>
+  </>
+}
+
+export default AvailabilityViewer
diff --git a/frontend/src/components/Legend/Legend.jsx b/frontend/src/components/Legend/Legend.jsx
deleted file mode 100644
index 1178510..0000000
--- a/frontend/src/components/Legend/Legend.jsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { useState, useEffect } from 'react'
-import { useTranslation } from 'react-i18next'
-import { createPalette } from 'hue-map'
-
-import { useSettingsStore } from '/src/stores'
-
-import {
-  Wrapper,
-  Label,
-  Bar,
-  Grade,
-} from './Legend.styles'
-
-const Legend = ({
-  min,
-  max,
-  total,
-  onSegmentFocus,
-}) => {
-  const { t } = useTranslation('event')
-  const highlight = useSettingsStore(state => state.highlight)
-  const colormap = useSettingsStore(state => state.colormap)
-  const setHighlight = useSettingsStore(state => state.setHighlight)
-
-  const [palette, setPalette] = useState([])
-
-  useEffect(() => setPalette(createPalette({
-    map: colormap === 'crabfit' ? [[0, [247,158,0,0]], [1, [247,158,0,255]]] : colormap,
-    steps: max+1-min,
-  }).format()), [min, max, colormap])
-
-  return (
-    <Wrapper>
-      <Label>{min}/{total} {t('event:available')}</Label>
-
-      <Bar
-        onMouseOut={() => onSegmentFocus(null)}
-        onClick={() => setHighlight(!highlight)}
-        title={t('event:group.legend_tooltip')}
-      >
-        {[...Array(max+1-min).keys()].map(i => i+min).map(i =>
-          <Grade
-            key={i}
-            $color={palette[i]}
-            $highlight={highlight && i === max && max > 0}
-            onMouseOver={() => onSegmentFocus(i)}
-          />
-        )}
-      </Bar>
-
-      <Label>{max}/{total} {t('event:available')}</Label>
-    </Wrapper>
-  )
-}
-
-export default Legend
diff --git a/frontend/src/components/Legend/Legend.styles.js b/frontend/src/components/Legend/Legend.module.scss
similarity index 50%
rename from frontend/src/components/Legend/Legend.styles.js
rename to frontend/src/components/Legend/Legend.module.scss
index e739d92..2f7085c 100644
--- a/frontend/src/components/Legend/Legend.styles.js
+++ b/frontend/src/components/Legend/Legend.module.scss
@@ -1,6 +1,4 @@
-import { styled } from 'goober'
-
-export const Wrapper = styled('div')`
+.wrapper {
   margin: 10px 0;
   display: flex;
   align-items: center;
@@ -13,15 +11,15 @@ export const Wrapper = styled('div')`
   @media (max-width: 400px) {
     display: block;
   }
-`
+}
 
-export const Label = styled('label')`
+.label {
   display: block;
   font-size: 14px;
   text-align: left;
-`
+}
 
-export const Bar = styled('div')`
+.bar {
   display: flex;
   width: 40%;
   height: 20px;
@@ -34,19 +32,14 @@ export const Bar = styled('div')`
     width: 100%;
     margin: 8px 0;
   }
-`
+}
 
-export const Grade = styled('div')`
-  flex: 1;
-  background-color: ${props => props.$color};
-
-  ${props => props.$highlight && `
-    background-image: repeating-linear-gradient(
-      45deg,
-      transparent,
-      transparent 4.5px,
-      rgba(0,0,0,.5) 4.5px,
-      rgba(0,0,0,.5) 9px
-    );
-  `}
-`
+.highlight {
+  background-image: repeating-linear-gradient(
+    45deg,
+    transparent,
+    transparent 4.5px,
+    rgba(0,0,0,.5) 4.5px,
+    rgba(0,0,0,.5) 9px
+  );
+}
diff --git a/frontend/src/components/Legend/Legend.tsx b/frontend/src/components/Legend/Legend.tsx
new file mode 100644
index 0000000..2b4692e
--- /dev/null
+++ b/frontend/src/components/Legend/Legend.tsx
@@ -0,0 +1,43 @@
+import { useTranslation } from '/src/i18n/client'
+import { useStore } from '/src/stores'
+import useSettingsStore from '/src/stores/settingsStore'
+
+import styles from './Legend.module.scss'
+
+interface LegendProps {
+  min: number
+  max: number
+  total: number
+  palette: string[]
+  onSegmentFocus: (segment: number | undefined) => void
+}
+
+const Legend = ({ min, max, total, palette, onSegmentFocus }: LegendProps) => {
+  const { t } = useTranslation('event')
+  const highlight = useStore(useSettingsStore, state => state.highlight)
+  const setHighlight = useStore(useSettingsStore, state => state.setHighlight)
+
+  return <div className={styles.wrapper}>
+    <label className={styles.label}>{min}/{total} {t('available')}</label>
+
+    <div
+      className={styles.bar}
+      onMouseOut={() => onSegmentFocus(undefined)}
+      onClick={() => setHighlight?.(!highlight)}
+      title={t<string>('group.legend_tooltip')}
+    >
+      {[...Array(max + 1 - min).keys()].map(i => i + min).map(i =>
+        <div
+          key={i}
+          style={{ flex: 1, backgroundColor: palette[i] }}
+          className={highlight && i === max && max > 0 ? styles.highlight : undefined}
+          onMouseOver={() => onSegmentFocus(i)}
+        />
+      )}
+    </div>
+
+    <label className={styles.label}>{max}/{total} {t('available')}</label>
+  </div>
+}
+
+export default Legend
diff --git a/frontend/src/components/Loading/Loading.jsx b/frontend/src/components/Loading/Loading.jsx
deleted file mode 100644
index ccb2ece..0000000
--- a/frontend/src/components/Loading/Loading.jsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Wrapper, Loader } from './Loading.styles'
-
-const Loading = () => <Wrapper><Loader /></Wrapper>
-
-export default Loading
diff --git a/frontend/src/components/Loading/Loading.styles.js b/frontend/src/components/Loading/Loading.styles.js
deleted file mode 100644
index ff7d1fb..0000000
--- a/frontend/src/components/Loading/Loading.styles.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import { styled } from 'goober'
-
-export const Wrapper = styled('main')`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  min-height: 100vh;
-`
-
-export const Loader = styled('div')`
-  @keyframes load {
-    from {
-      transform: rotate(0deg);
-    }
-    to {
-      transform: rotate(360deg);
-    }
-  }
-
-  height: 24px;
-  width: 24px;
-  border: 3px solid var(--primary);
-  border-left-color: transparent;
-  border-radius: 100px;
-  animation: load .5s linear infinite;
-
-  @media (prefers-reduced-motion: reduce) {
-    animation: none;
-    border: 0;
-
-    &::before {
-      content: 'loading...';
-    }
-  }
-`
diff --git a/frontend/src/components/Stats/Stats.tsx b/frontend/src/components/Stats/Stats.tsx
index e15493a..df2addd 100644
--- a/frontend/src/components/Stats/Stats.tsx
+++ b/frontend/src/components/Stats/Stats.tsx
@@ -14,20 +14,20 @@ const Stats = async () => {
   const stats = await getStats()
   const { t } = await useTranslation('home')
 
-  return <div className={styles.wrapper}>
+  return stats ? <div className={styles.wrapper}>
     <div>
       <span className={styles.number}>
-        {new Intl.NumberFormat().format(stats?.event_count || 17000)}{!stats?.event_count && '+'}
+        {new Intl.NumberFormat().format(stats.event_count)}
       </span>
       <span className={styles.label}>{t('about.events')}</span>
     </div>
     <div>
       <span className={styles.number}>
-        {new Intl.NumberFormat().format(stats?.person_count || 65000)}{!stats?.person_count && '+'}
+        {new Intl.NumberFormat().format(stats.person_count)}
       </span>
       <span className={styles.label}>{t('about.availabilities')}</span>
     </div>
-  </div>
+  </div> : null
 }
 
 export default Stats
diff --git a/frontend/src/components/TimeRangeField/TimeRangeField.tsx b/frontend/src/components/TimeRangeField/TimeRangeField.tsx
index 0e1ab4d..4f05fcf 100644
--- a/frontend/src/components/TimeRangeField/TimeRangeField.tsx
+++ b/frontend/src/components/TimeRangeField/TimeRangeField.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import { useRef } from 'react'
 import { FieldValues, useController, UseControllerProps } from 'react-hook-form'
 import dayjs from 'dayjs'
@@ -13,14 +15,24 @@ const times = ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10',
 interface TimeRangeFieldProps<TValues extends FieldValues> extends UseControllerProps<TValues> {
   label?: React.ReactNode
   description?: React.ReactNode
+  staticValue?: {
+    start: number
+    end: number
+  }
 }
 
 const TimeRangeField = <TValues extends FieldValues>({
   label,
   description,
+  staticValue,
   ...props
 }: TimeRangeFieldProps<TValues>) => {
-  const { field: { value, onChange } } = useController(props)
+  const { field: { value, onChange } } = !staticValue
+    ? useController(props)
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    : { field: { value: staticValue, onChange: () => {} } }
+
+  if (!('start' in value) || !('end' in value)) return null
 
   return <Wrapper>
     {label && <Label>{label}</Label>}
diff --git a/frontend/src/i18n/options.ts b/frontend/src/i18n/options.ts
index a930ba2..0c34047 100644
--- a/frontend/src/i18n/options.ts
+++ b/frontend/src/i18n/options.ts
@@ -27,7 +27,7 @@ interface LanguageDetails {
   /** 0: Sunday, 1: Monday */
   weekStart: 0 | 1
   timeFormat: '12h' | '24h'
-  /** TODO: document */
+  /** The separator to show between hours and minutes (default `:`) */
   separator?: string
   /** Day.js locale import */
   import: () => Promise<unknown>
diff --git a/frontend/src/stores/settingsStore.ts b/frontend/src/stores/settingsStore.ts
index a6d89be..bc1ab61 100644
--- a/frontend/src/stores/settingsStore.ts
+++ b/frontend/src/stores/settingsStore.ts
@@ -1,3 +1,4 @@
+import { ColorMap } from 'hue-map/dist/maps'
 import { create } from 'zustand'
 import { persist } from 'zustand/middleware'
 
@@ -9,13 +10,13 @@ interface SettingsStore {
   timeFormat: TimeFormat
   theme: Theme
   highlight: boolean
-  colormap: string
+  colormap: 'crabfit' | ColorMap
 
   setWeekStart: (weekStart: 0 | 1) => void
   setTimeFormat: (timeFormat: TimeFormat) => void
   setTheme: (theme: Theme) => void
   setHighlight: (highlight: boolean) => void
-  setColormap: (colormap: string) => void
+  setColormap: (colormap: 'crabfit' | ColorMap) => void
 }
 
 const useSettingsStore = create<SettingsStore>()(persist(
diff --git a/frontend/src/utils/calculateAvailability.ts b/frontend/src/utils/calculateAvailability.ts
new file mode 100644
index 0000000..e2daef5
--- /dev/null
+++ b/frontend/src/utils/calculateAvailability.ts
@@ -0,0 +1,43 @@
+import { Temporal } from '@js-temporal/polyfill'
+
+interface Person {
+  name: string
+  availability: Temporal.ZonedDateTime[]
+}
+
+interface Availability {
+  date: Temporal.ZonedDateTime
+  /** Names of everyone who is available at this date */
+  people: string[]
+}
+
+interface AvailabilityInfo {
+  availabilities: Availability[]
+  /** The amount of people available in the date with lowest availability */
+  min: number
+  /** The amount of people available in the date with highest availability */
+  max: number
+}
+
+/**
+ * Takes an array of dates and an array of people,
+ * where each person has a name and availability array, and returns the
+ * group availability for each date passed in.
+ */
+export const calculateAvailability = (dates: Temporal.ZonedDateTime[], people: Person[]): AvailabilityInfo => {
+  let min = Infinity
+  let max = -Infinity
+
+  const availabilities: Availability[] = dates.map(date => {
+    const names = people.flatMap(p => p.availability.some(d => d.equals(date)) ? [p.name] : [])
+    if (names.length < min) {
+      min = names.length
+    }
+    if (names.length > max) {
+      max = names.length
+    }
+    return { date, people: names }
+  })
+
+  return { availabilities, min, max }
+}
diff --git a/frontend/src/utils/calculateColumns.ts b/frontend/src/utils/calculateColumns.ts
new file mode 100644
index 0000000..b15dce2
--- /dev/null
+++ b/frontend/src/utils/calculateColumns.ts
@@ -0,0 +1,25 @@
+import { splitArrayBy } from '@giraugh/tools'
+import { Temporal } from '@js-temporal/polyfill'
+
+/**
+ * Calculates the columns required for an availability grid
+ * @returns An array of PlainDate or null, where null indicates a spacer column between dates
+ */
+export const calculateColumns = (dates: Temporal.ZonedDateTime[]): (Temporal.PlainDate | null)[] => {
+  // Dedupe dates by date and sort
+  const sortedDates = [...new Map(dates.map(d => {
+    const plain = d.toPlainDate()
+    return [plain.toString(), plain]
+  })).values()]
+    .sort(Temporal.PlainDate.compare)
+
+  // Partition by distance
+  const partitionedDates = splitArrayBy(sortedDates, (a, b) => !a.add({ days: 1 }).equals(b))
+
+  // Join
+  return partitionedDates.reduce((columns, partition, i) => [
+    ...columns,
+    ...partition,
+    ...partitionedDates.length - 1 < i ? [null] : [], // Add spacer in between partitions
+  ], [] as (Temporal.PlainDate | null)[])
+}
diff --git a/frontend/src/utils/calculateRows.ts b/frontend/src/utils/calculateRows.ts
new file mode 100644
index 0000000..dde2e22
--- /dev/null
+++ b/frontend/src/utils/calculateRows.ts
@@ -0,0 +1,26 @@
+import { splitArrayBy } from '@giraugh/tools'
+import { Temporal } from '@js-temporal/polyfill'
+
+/**
+ * Calculates the rows required for an availability grid
+ * @returns An array of PlainTime or null, where null indicates a spacer row in gaps
+ */
+export const calculateRows = (dates: Temporal.ZonedDateTime[]): (Temporal.PlainTime | null)[] => {
+  // Dedupe dates by time and sort
+  const sortedDates = [...new Map(dates.map(d => {
+    const plain = d.toPlainTime()
+    return [plain.toString({ smallestUnit: 'minute' }), plain]
+  })).values()]
+    .sort(Temporal.PlainTime.compare)
+
+  // Partition by distance
+  const partitionedDates = splitArrayBy(sortedDates, (a, b) => !a.add({ minutes: 15 }).equals(b))
+
+  // Add end cap time and join
+  return partitionedDates.reduce((rows, partition, i) => [
+    ...rows,
+    ...partition,
+    partition[partition.length - 1].add({ minutes: 15 }),
+    ...partitionedDates.length - 1 < i ? [null, null] : [], // Add spacer in between partitions
+  ], [] as (Temporal.PlainTime | null)[])
+}
diff --git a/frontend/src/utils/convertTimesToDates.ts b/frontend/src/utils/convertTimesToDates.ts
new file mode 100644
index 0000000..ec48dfa
--- /dev/null
+++ b/frontend/src/utils/convertTimesToDates.ts
@@ -0,0 +1,54 @@
+import { Temporal } from '@js-temporal/polyfill'
+
+/**
+ * Take times as strings and convert to Dayjs objects
+ * @param times An array of strings in `HHmm-d` or `HHmm-DDMMYYYY` format
+ * @param timezone The target timezone
+ */
+export const convertTimesToDates = (times: string[], timezone: string): Temporal.ZonedDateTime[] => {
+  const isSpecificDates = times[0].length === 13
+
+  return times.map(time => isSpecificDates ?
+    parseSpecificDate(time).withTimeZone(timezone)
+    : parseWeekdayDate(time).withTimeZone(timezone)
+  )
+}
+
+// Parse from UTC `HHmm-DDMMYYYY` format into a ZonedDateTime in UTC
+const parseSpecificDate = (str: string): Temporal.ZonedDateTime => {
+  if (str.length !== 13) {
+    throw new Error('String must be in HHmm-DDMMYYYY format')
+  }
+
+  // Extract values
+  const [hour, minute] = [Number(str.substring(0, 2)), Number(str.substring(2, 4))]
+  const [day, month, year] = [Number(str.substring(5, 7)), Number(str.substring(7, 9)), Number(str.substring(9))]
+
+  // Construct PlainDateTime
+  return Temporal.ZonedDateTime.from({
+    hour, minute, day, month, year,
+    timeZone: 'UTC',
+  })
+}
+
+// Parse from UTC `HHmm-d` format into a ZonedDateTime in UTC based on the current date
+const parseWeekdayDate = (str: string): Temporal.ZonedDateTime => {
+  if (str.length !== 6) {
+    throw new Error('String must be in HHmm-d format')
+  }
+
+  // Extract values
+  const [hour, minute] = [Number(str.substring(0, 2)), Number(str.substring(2, 4))]
+  let dayOfWeek = Number(str.substring(5))
+  if (dayOfWeek === 0) {
+    dayOfWeek = 7 // Sunday is 7 in ISO8601
+  }
+
+  // Construct PlainDateTime from today
+  const today = Temporal.Now.zonedDateTimeISO('UTC').round('day')
+  const currentDayOfWeek = today.dayOfWeek
+  return today.with({
+    hour, minute,
+    day: today.day + (dayOfWeek - currentDayOfWeek), // Set day of week
+  })
+}
diff --git a/frontend/src/utils/detectBrowser.ts b/frontend/src/utils/detectBrowser.ts
index 0da41d2..0ca620c 100644
--- a/frontend/src/utils/detectBrowser.ts
+++ b/frontend/src/utils/detectBrowser.ts
@@ -1,3 +1,4 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-nocheck
 export const detectBrowser = () => {
   // Opera 8.0+
diff --git a/frontend/src/utils/index.ts b/frontend/src/utils/index.ts
index 9e57878..509774a 100644
--- a/frontend/src/utils/index.ts
+++ b/frontend/src/utils/index.ts
@@ -1,3 +1,7 @@
 export * from './detectBrowser'
 export * from './makeClass'
 export * from './unhyphenate'
+export * from './convertTimesToDates'
+export * from './calculateAvailability'
+export * from './calculateRows'
+export * from './calculateColumns'
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index fbf486f..21cfade 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -22,6 +22,7 @@
     "jsx": "preserve",
     "strict": true,
     "noImplicitAny": true,
+    "target": "ES2022",
     "plugins": [
       {
         "name": "next"
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 894719d..6cec2ec 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -65,10 +65,10 @@
   resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.40.0.tgz#3ba73359e11f5a7bd3e407f70b3528abfae69cec"
   integrity sha512-ElyB54bJIhXQYVKjDSvCkPO1iU1tSAeVQJbllWJq1XQSmmA4dgFk8CbiBGpiOPxleE48vDogxCtmMYku4HSVLA==
 
-"@giraugh/tools@^1.5.0":
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/@giraugh/tools/-/tools-1.5.0.tgz#5c5cc8b248d1e04aebc46dcbeb7620c99f47d2ec"
-  integrity sha512-DZTrxKU5Ul5+UnDUNja0Cp1HcMLPGF2fh7j4ICEzaNwvRMwcHRH241L/pfneuibZ22w1Ka4U7LVzOWL+SjLIjw==
+"@giraugh/tools@^1.6.0":
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/@giraugh/tools/-/tools-1.6.0.tgz#6bf501161a3a848c00d3f6f960d9cfe386860941"
+  integrity sha512-KaC5YrA2UIA6Ol4fQtGknQX+gkQOsRhEhK4h+2GrfOj4+jfO1lz8zf8wHrSk4sorOv+a47sFANJGnicSVXq7SQ==
 
 "@humanwhocodes/config-array@^0.11.8":
   version "0.11.8"
@@ -89,6 +89,14 @@
   resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45"
   integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==
 
+"@js-temporal/polyfill@^0.4.4":
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/@js-temporal/polyfill/-/polyfill-0.4.4.tgz#4c26b4a1a68c19155808363f520204712cfc2558"
+  integrity sha512-2X6bvghJ/JAoZO52lbgyAPFj8uCflhTo2g7nkFzEQdXd/D8rEeD4HtmTEpmtGCva260fcd66YNXBOYdnmHqSOg==
+  dependencies:
+    jsbi "^4.3.0"
+    tslib "^2.4.1"
+
 "@microsoft/microsoft-graph-client@^3.0.5":
   version "3.0.5"
   resolved "https://registry.yarnpkg.com/@microsoft/microsoft-graph-client/-/microsoft-graph-client-3.0.5.tgz#c661b5bb271fd59d34391b0657b8a78c02af9ab8"
@@ -1717,6 +1725,11 @@ js-yaml@^4.1.0:
   dependencies:
     argparse "^2.0.1"
 
+jsbi@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/jsbi/-/jsbi-4.3.0.tgz#b54ee074fb6fcbc00619559305c8f7e912b04741"
+  integrity sha512-SnZNcinB4RIcnEyZqFPdGPVgrg2AcnykiBy0sHVJQKHYeaLUvi3Exj+iaPpLnFVkDPZIV4U0yvgC9/R4uEAZ9g==
+
 json-schema-traverse@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz#69f6a87d9513ab8bb8fe63bdb0979c448e684660"
@@ -2637,6 +2650,11 @@ tslib@^2.3.0, tslib@^2.4.0, tslib@^2.5.0:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.5.0.tgz#42bfed86f5787aeb41d031866c8f402429e0fddf"
   integrity sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==
 
+tslib@^2.4.1:
+  version "2.5.2"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.5.2.tgz#1b6f07185c881557b0ffa84b111a0106989e8338"
+  integrity sha512-5svOrSA2w3iGFDs1HibEVBGbDrAY82bFQ3HZ3ixB+88nsbsWQoKqDRb5UBYAUPEzbBn6dAp5gRNXglySbx1MlA==
+
 tsutils@^3.21.0:
   version "3.21.0"
   resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.21.0.tgz#b48717d394cea6c1e096983eed58e9d61715b623"