diff --git a/components/ContactTimeline/package.json b/components/ContactTimeline/package.json
index 7567a20125..dc8c47e159 100644
--- a/components/ContactTimeline/package.json
+++ b/components/ContactTimeline/package.json
@@ -29,11 +29,11 @@
     "clean": "rimraf dist tsconfig.tsbuildinfo"
   },
   "dependencies": {
-    "@gemeente-denhaag/baseprops": "workspace:*",
     "@gemeente-denhaag/icons": "workspace:*",
     "@gemeente-denhaag/process-steps": "workspace:*",
     "@gemeente-denhaag/step-marker": "workspace:*",
-    "@gemeente-denhaag/typography": "workspace:*"
+    "@gemeente-denhaag/typography": "workspace:*",
+    "date-fns": "2.30.0"
   },
   "peerDependencies": {
     "react": "^17.0.0 || ^18.0.0"
diff --git a/components/ContactTimeline/src/index.scss b/components/ContactTimeline/src/index.scss
index 40dc11e491..9a60e35f41 100644
--- a/components/ContactTimeline/src/index.scss
+++ b/components/ContactTimeline/src/index.scss
@@ -1,13 +1,13 @@
 .denhaag-contact-timeline__step-header {
-  --denhaag-process-steps-step-header-align-items: flex-start;
-  --denhaag-step-marker-margin: 5px;
+  --denhaag-process-steps-step-header-align-items: var(--denhaag-contact-timeline-mobile-step-marker-align-items);
+  --denhaag-step-marker-margin: var(--denhaag-contact-timeline-mobile-step-marker-margin);
 }
 
 .denhaag-contact-timeline--mobile {
-  --denhaag-process-steps-step-distance: 0;
+  --denhaag-process-steps-step-distance: var(--denhaag-contact-timeline-mobile-step-marker-connector-bottom);
 
   .denhaag-process-steps__step {
-    padding-block-end: 32px;
+    padding-block-end: var(--denhaag-contact-timeline-mobile-step-padding-block-end);
   }
 
   .denhaag-process-steps__step-body {
@@ -16,19 +16,19 @@
 
   .denhaag-step-marker__connector--main-to-main {
     top: calc(var(--denhaag-step-marker-size) / 2);
-    bottom: 0;
+    bottom: var(--denhaag-contact-timeline-mobile-step-distance);
   }
 }
 
 .denhaag-contact-timeline__meta {
   display: flex;
-  gap: 6px;
+  gap: var(--denhaag-contact-timeline-mobile-meta-gap);
   align-items: center;
 }
 
 .denhaag-contact-timeline__meta-marker {
-  width: 4px;
-  height: 4px;
-  background-color: black;
+  width: var(--denhaag-contact-timeline-mobile-meta-marker-size);
+  height: var(--denhaag-contact-timeline-mobile-meta-marker-size);
+  background-color: var(--denhaag-contact-timeline-mobile-meta-marker-color);
   border-radius: 50%;
 }
diff --git a/components/ContactTimeline/src/index.tsx b/components/ContactTimeline/src/index.tsx
index 436c460b24..d766463ffe 100644
--- a/components/ContactTimeline/src/index.tsx
+++ b/components/ContactTimeline/src/index.tsx
@@ -1,6 +1,8 @@
 import React, { Key, OlHTMLAttributes, ReactNode } from 'react';
 import { StepMarker, StepMarkerConnector } from '@gemeente-denhaag/step-marker';
-import { Step, StepHeader, StepHeading, StepBody, StepMeta } from '@gemeente-denhaag/process-steps';
+import { Step, StepHeader, StepHeading, StepBody } from '@gemeente-denhaag/process-steps';
+import { format, differenceInDays } from 'date-fns';
+import { nl } from 'date-fns/locale';
 import clsx from 'clsx';
 import './index.scss';
 
@@ -9,20 +11,23 @@ export interface ContactTimelineItemProps {
   title: ReactNode;
   marker?: ReactNode;
   date: ReactNode;
+  isoDate: string;
+  todayLabel: string;
   channel: ReactNode;
   nextItem?: boolean;
 }
 
 export interface ContactTimelineProps {
   items: ContactTimelineItemProps[];
+  todayLabel: string;
 }
 
-export const ContactTimelineMobile: React.FC<ContactTimelineProps> = ({ items }: ContactTimelineProps) => {
+export const ContactTimelineMobile: React.FC<ContactTimelineProps> = ({ items, todayLabel }: ContactTimelineProps) => {
   return (
     <ContactTimelineList mobile className="denhaag-process-steps">
       {items.map((item, index) => {
         const nextItem = index < items.length - 1;
-        return <ContactTimelineListItem {...item} key={item.id} nextItem={nextItem} />;
+        return <ContactTimelineListItem {...item} key={item.id} nextItem={nextItem} todayLabel={todayLabel} />;
       })}
     </ContactTimelineList>
   );
@@ -43,7 +48,33 @@ export const ContactTimelineList: React.FC<ContactTimelineListProps> = ({
   </ol>
 );
 
-const ContactTimelineListItem: React.FC<ContactTimelineItemProps> = ({ title, date, channel, nextItem, ...props }) => {
+interface Props {
+  dateTime: string;
+  todayLabel: string;
+  now?: string;
+  locale?: Locale;
+}
+
+// Partially copied version of the Action date. We should make a generic component.
+export const ContactTimelineDate = ({ dateTime, now = new Date().toISOString(), locale = nl, todayLabel }: Props) => {
+  const date = new Date(dateTime);
+  const daysDifference = differenceInDays(date, new Date(now));
+
+  if (daysDifference === 0) {
+    return <>{todayLabel}</>;
+  }
+
+  return <>{format(date, 'd-M-yyyy', { locale: locale })}</>;
+};
+
+const ContactTimelineListItem: React.FC<ContactTimelineItemProps> = ({
+  title,
+  date,
+  isoDate,
+  todayLabel,
+  channel,
+  nextItem,
+}) => {
   return (
     <Step appearance="default">
       <StepHeader className="denhaag-contact-timeline__step-header">
@@ -51,7 +82,13 @@ const ContactTimelineListItem: React.FC<ContactTimelineItemProps> = ({ title, da
         <div>
           <StepHeading>{title}</StepHeading>
           <div className="denhaag-contact-timeline__meta">
-            <span className="denhaag-contact-timeline__meta-date">{date}</span>
+            {date ? (
+              date
+            ) : (
+              <time dateTime={isoDate} className="denhaag-contact-timeline__meta-date">
+                <ContactTimelineDate dateTime={isoDate} todayLabel={todayLabel} />
+              </time>
+            )}
             <span className="denhaag-contact-timeline__meta-marker" />
             <span className="denhaag-contact-timeline__meta-channel">{channel}</span>
           </div>
diff --git a/components/ContactTimeline/src/stories/bem.stories.mdx b/components/ContactTimeline/src/stories/bem.stories.mdx
index fabaee5037..12dda9f60e 100644
--- a/components/ContactTimeline/src/stories/bem.stories.mdx
+++ b/components/ContactTimeline/src/stories/bem.stories.mdx
@@ -2,41 +2,44 @@ import { Canvas, Meta, Story } from "@storybook/addon-docs";
 import prettierBabel from "prettier/parser-babel";
 import prettier from "prettier/standalone";
 import * as ReactDOMServer from "react-dom/server";
-import { Status } from "../index";
+import { ContactTimelineMobile } from "../index";
 import pkg from "../../package.json";
 
 export const exampleArgs = {
-  steps: [
+  todayLabel: "vandaag",
+  items: [
     {
-      id: "deelname",
-      marker: 1,
-      title: "Deelname aan geluidsonderzoek",
-      status: "checked",
-      steps: [{ title: "Aanmelding ontvangen", status: "checked" }],
+      id: "1",
+      title: "Herinnering: Geef informatie",
+      channel: "mail",
+      isoDate: new Date().toISOString(),
     },
     {
-      id: "onderzoek",
-      marker: 2,
-      title: "Onderzoek naar geluidsoverlast",
-      status: "current",
-      steps: [
-        { title: "Afspraak meten geluidsoverlast gemaakt", status: "checked" },
-        { title: "Geluidsoverlast gemeten" },
-        { title: "Onderzoek resultaten verwerkt" },
-      ],
+      id: "2",
+      title: "Geef informatie",
+      channel: "mail",
+      isoDate: "2023-01-23T09:17:03.137Z",
     },
-    { id: "uitvoeren", marker: 3, title: "Uitvoeren van maatregelen" },
-    { id: "klaar", marker: 4, title: "Maatregelen zijn uitgevoerd" },
+    {
+      id: "3",
+      title: "Tip: u heeft recht op extra subsidie, zie hier een extra lange regel",
+      channel: "mail",
+      isoDate: "2023-01-06T09:17:03.137Z",
+    },
+    { id: "4", title: "Status is veranderd", channel: "mail", isoDate: "2022-12-01T09:17:03.137Z" },
+    { id: "5", title: "Mijn vraag", channel: "vraag", isoDate: "2022-11-29T09:17:03.137Z" },
+    { id: "6", title: "Gesprek over afspraak met adviseur", channel: "telefoon", isoDate: "2022-11-12T09:17:03.137Z" },
+    { id: "7", title: "Kosten onderzoek en verbeteringen", channel: "brief", isoDate: "2022-11-10T09:17:03.137Z" },
   ],
 };
 
 export const Template = (args) => {
-  return <Status {...args}></Status>;
+  return <ContactTimelineMobile {...args}></ContactTimelineMobile>;
 };
 
 <Meta
-  title="CSS/Process Steps/Status"
-  component={Status}
+  title="CSS/Process Steps/Contact Timeline"
+  component={ContactTimelineMobile}
   parameters={{
     componentSubtitle: `${pkg.name} - ${pkg.version}`,
     docs: {
@@ -53,296 +56,17 @@ export const Template = (args) => {
       },
     },
     status: {
-      type: "ALPHA",
+      type: "EXPERIMENTAL",
     },
   }}
 />
 
-# Process Steps
+# Contact Timeline
 
-## Default
+## Mobile (Work in Progress)
 
 <Canvas>
   <Story name="Default" args={exampleArgs}>
     {Template.bind({})}
   </Story>
 </Canvas>
-
-## Collapsible
-
-<Canvas>
-  <Story name="Collapsible" args={{ ...exampleArgs, collapsible: true }}>
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-## Collapsible with expanded step
-
-<Canvas>
-  <Story
-    name="Collapsible with expanded step"
-    args={{
-      expandedSteps: ["deelname"],
-      steps: [
-        {
-          id: "deelname",
-          marker: 1,
-          title: "Deelname aan geluidsonderzoek",
-          status: "checked",
-          steps: [{ title: "Aanmelding ontvangen", status: "checked" }],
-        },
-        {
-          id: "onderzoek",
-          marker: 2,
-          title: "Onderzoek naar geluidsoverlast",
-          status: "current",
-          steps: [
-            { title: "Afspraak meten geluidsoverlast gemaakt", status: "checked" },
-            { title: "Geluidsoverlast gemeten" },
-            { title: "Onderzoek resultaten verwerkt" },
-          ],
-        },
-        { id: "uitvoeren", marker: 3, title: "Uitvoeren van maatregelen" },
-        { id: "klaar", marker: 4, title: "Maatregelen zijn uitgevoerd" },
-      ],
-      collapsible: true,
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-## Without Substeps
-
-Even when `collapsible=true` is used the ProcessSteps will not be collapsible without substeps
-
-<Canvas>
-  <Story
-    name="No Substeps"
-    args={{
-      steps: [
-        {
-          id: "getuigen-wijzigen",
-          marker: 1,
-          title: "Getuigen wijzigen of meer getuigen uitnodigen",
-          status: "checked",
-        },
-        {
-          id: "getuigen-definitief",
-          marker: 2,
-          title: "Getuigen zijn definitief en bevestigingen van getuigen ontvangen",
-          status: "current",
-        },
-        { id: "extras", marker: 3, title: "Eventuele extras bestellen" },
-        { id: "trouwen", marker: 4, title: "Trouwen" },
-      ],
-      collapsible: true,
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-## With metadata and dates
-
-<Canvas>
-  <Story
-    name="With metadata"
-    args={{
-      steps: [
-        {
-          id: "getuigen-wijzigen",
-          marker: 1,
-          title: "Getuigen wijzigen of meer getuigen uitnodigen",
-          status: "checked",
-          meta: (
-            <a className="utrecht-link" href="https://example.com">
-              Getuigen wijzigen of meer getuigen uitnodigen
-            </a>
-          ),
-          date: "Tussen vandaag en 24 februari 2023",
-        },
-        {
-          id: "getuigen-definitief",
-          marker: 2,
-          title: "Getuigen zijn definitief en bevestigingen van getuigen ontvangen",
-          status: "current",
-          steps: [{ title: "Getuigen aangemeld", status: "checked" }],
-          meta: "Getuigen zijn definitief en bevestigingen van getuigen ontvangen",
-          date: "Regel het vóór 24 februari 2023",
-        },
-        {
-          id: "trouwen",
-          marker: 4,
-          title: "Trouwen",
-          meta: (
-            <p className="utrecht-paragraph">
-              Jullie gaan trouwen in het{" "}
-              <a className="utrecht-link" href="https://example.com">
-                Stadhuis Spui
-              </a>
-            </p>
-          ),
-          date: "Op 1 april 2023",
-        },
-      ],
-      collapsible: true,
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-## With expanded metadata
-
-<Canvas>
-  <Story
-    name="With expanded metadata"
-    args={{
-      expandedSteps: ["ontwerpen"],
-      steps: [
-        {
-          id: "verkennen",
-          marker: 1,
-          title: "Verkennen",
-          status: "checked",
-          date: "juli 2023",
-        },
-        {
-          id: "ontwerpen",
-          marker: 2,
-          title: "Ontwerpen",
-          status: "current",
-          meta: "Eindelijk tijd om concreet te worden! we schetsen de plannen en leggen het voor om samen tot een beslissing te komen.",
-          date: "aug - sept 2023",
-          steps: [
-            { title: "Voorlopige schetsontwerp afgerond en gepresenteerd", status: "checked" },
-            { title: "Stemronde nummer 01", status: "checked" },
-            { title: "Verwerken feedback it stemronde", status: "current" },
-            { title: "We organiseren een informatieavond voor bewoners" },
-          ],
-        },
-        {
-          id: "uitvoeren",
-          marker: 4,
-          title: "Uitvoeren",
-          date: "okt - nov 2023",
-        },
-        {
-          id: "afronden",
-          marker: 4,
-          title: "Afronden",
-          date: "dec 2023",
-        },
-      ],
-      collapsible: true,
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-## With warning
-
-Collapsible ProcessSteps with warnings
-
-<Canvas>
-  <Story
-    name="With warning"
-    args={{
-      steps: [
-        {
-          id: "deelname",
-          marker: 1,
-          title: "Deelname aan geluidsonderzoek",
-          status: "checked",
-          steps: [{ title: "Aanmelding ontvangen", status: "checked" }],
-        },
-        {
-          id: "onderzoek",
-          marker: 2,
-          title: "Onderzoek naar geluidsoverlast",
-          status: "warning",
-          steps: [
-            { title: "Afspraak meten geluidsoverlast gemaakt", status: "warning" },
-            { title: "Geluidsoverlast gemeten", status: "warning" },
-            { title: "Onderzoek resultaten verwerkt" },
-          ],
-        },
-        { id: "uitvoeren", marker: 3, title: "Uitvoeren van maatregelen" },
-        { id: "klaar", marker: 4, title: "Maatregelen zijn uitgevoerd" },
-      ],
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-## With error
-
-Collapsible ProcessStep with errors
-
-<Canvas>
-  <Story
-    name="With error"
-    args={{
-      steps: [
-        {
-          id: "deelname",
-          marker: 1,
-          title: "Deelname aan geluidsonderzoek",
-          status: "checked",
-          steps: [{ title: "Aanmelding ontvangen", status: "checked" }],
-        },
-        {
-          id: "onderzoek",
-          marker: 2,
-          title: "Onderzoek naar geluidsoverlast",
-          status: "error",
-          meta: "Er is geen afspraak gemaakt. De aanvraag is stopgezet. Wilt u toch graag in aanmerking komen voor subsidie? Neem dan contact op met de gemeente via 14070.",
-          steps: [{ title: "Afspraak meten geluidsoverlast gemaakt", status: "error" }],
-        },
-        { id: "uitvoeren", marker: 3, title: "Uitvoeren van maatregelen" },
-        { id: "klaar", marker: 4, title: "Maatregelen zijn uitgevoerd" },
-      ],
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-## Non collapsible step
-
-Collapsible ProcessStep with errors might also be made more visible by using `collapsible: false` in the step.
-
-<Canvas>
-  <Story
-    name="Non collapsible step"
-    args={{
-      expandedSteps: ["onderzoek"],
-      steps: [
-        {
-          id: "deelname",
-          marker: 1,
-          title: "Deelname aan geluidsonderzoek",
-          status: "checked",
-          steps: [{ title: "Aanmelding ontvangen", status: "checked" }],
-        },
-        {
-          id: "onderzoek",
-          marker: 2,
-          title: "Onderzoek naar geluidsoverlast",
-          status: "error",
-          meta: "Er is geen afspraak gemaakt. De aanvraag is stopgezet. Wilt u toch graag in aanmerking komen voor subsidie? Neem dan contact op met de gemeente via 14070.",
-          steps: [{ title: "Afspraak meten geluidsoverlast gemaakt", status: "error" }],
-          collapsible: false,
-        },
-        { id: "uitvoeren", marker: 3, title: "Uitvoeren van maatregelen" },
-        { id: "klaar", marker: 4, title: "Maatregelen zijn uitgevoerd" },
-      ],
-      collapsible: true,
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
diff --git a/components/ContactTimeline/src/stories/react.stories.mdx b/components/ContactTimeline/src/stories/react.stories.mdx
index efb5eaf6bc..e2a5cf2ef7 100644
--- a/components/ContactTimeline/src/stories/react.stories.mdx
+++ b/components/ContactTimeline/src/stories/react.stories.mdx
@@ -3,29 +3,30 @@ import { ContactTimelineMobile } from "../index";
 import pkg from "../../package.json";
 
 export const exampleArgs = {
+  todayLabel: "vandaag",
   items: [
     {
       id: "1",
       title: "Herinnering: Geef informatie",
       channel: "mail",
-      date: "vandaag",
+      isoDate: new Date().toISOString(),
     },
     {
       id: "2",
       title: "Geef informatie",
       channel: "mail",
-      date: "23-1-2023",
+      isoDate: "2023-01-23T09:17:03.137Z",
     },
     {
       id: "3",
       title: "Tip: u heeft recht op extra subsidie, zie hier een extra lange regel",
       channel: "mail",
-      date: "6-1-2023",
+      isoDate: "2023-01-06T09:17:03.137Z",
     },
-    { id: "4", title: "Status is veranderd", channel: "mail", date: "1-12-2022" },
-    { id: "5", title: "Mijn vraag", channel: "vraag", date: "29-11-2022" },
-    { id: "6", title: "Gesprek over afspraak met adviseur", channel: "telefoon", date: "12-11-2022" },
-    { id: "7", title: "Kosten onderzoek en verbeteringen", channel: "brief", date: "10-11-2022" },
+    { id: "4", title: "Status is veranderd", channel: "mail", isoDate: "2022-12-01T09:17:03.137Z" },
+    { id: "5", title: "Mijn vraag", channel: "vraag", isoDate: "2022-11-29T09:17:03.137Z" },
+    { id: "6", title: "Gesprek over afspraak met adviseur", channel: "telefoon", isoDate: "2022-11-12T09:17:03.137Z" },
+    { id: "7", title: "Kosten onderzoek en verbeteringen", channel: "brief", isoDate: "2022-11-10T09:17:03.137Z" },
   ],
 };
 
@@ -40,14 +41,14 @@ export const Template = (args) => {
     componentSubtitle: `${pkg.name} - ${pkg.version}`,
     docs: { source: { type: "dynamic" } },
     status: {
-      type: "ALPHA",
+      type: "EXPERIMENTAL",
     },
   }}
 />
 
 # Contact Timeline
 
-## Default
+## Mobile (Work in Progress)
 
 <Canvas>
   <Story name="Default" args={exampleArgs}>
diff --git a/components/ContactTimeline/tsconfig.json b/components/ContactTimeline/tsconfig.json
index e3860ebf9c..d3f46d1869 100644
--- a/components/ContactTimeline/tsconfig.json
+++ b/components/ContactTimeline/tsconfig.json
@@ -12,10 +12,13 @@
       "path": "../Button"
     },
     {
-      "path": "../BaseProps"
+      "path": "../Icons"
     },
     {
-      "path": "../Icons"
+      "path": "../ProcessSteps"
+    },
+    {
+      "path": "../StepMarker"
     },
     {
       "path": "../Typography"
diff --git a/components/StepMarker/src/_StepMarker.scss b/components/StepMarker/src/_StepMarker.scss
index 3c4c1313a7..50437bab96 100644
--- a/components/StepMarker/src/_StepMarker.scss
+++ b/components/StepMarker/src/_StepMarker.scss
@@ -28,7 +28,6 @@
     inline-size: var(--denhaag-step-marker-icon-size);
   }
 }
-// TODO align stepmarker to the top, instead of center of the title
 
 .denhaag-step-marker--nested {
   block-size: var(--denhaag-step-marker-nested-size);
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0fb1003135..c17e3262da 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -534,9 +534,6 @@ importers:
 
   components/ContactTimeline:
     dependencies:
-      '@gemeente-denhaag/baseprops':
-        specifier: workspace:*
-        version: link:../BaseProps
       '@gemeente-denhaag/icons':
         specifier: workspace:*
         version: link:../Icons
@@ -549,6 +546,9 @@ importers:
       '@gemeente-denhaag/typography':
         specifier: workspace:*
         version: link:../Typography
+      date-fns:
+        specifier: 2.30.0
+        version: 2.30.0
       react:
         specifier: ^17.0.0 || ^18.0.0
         version: 17.0.2
diff --git a/proprietary/Components/src/denhaag/contact-timeline.tokens.json b/proprietary/Components/src/denhaag/contact-timeline.tokens.json
new file mode 100644
index 0000000000..e3a0f37d49
--- /dev/null
+++ b/proprietary/Components/src/denhaag/contact-timeline.tokens.json
@@ -0,0 +1,26 @@
+{
+  "denhaag": {
+    "contact-timeline": {
+      "mobile": {
+        "step": {
+          "marker": {
+            "align-items": { "value": "flex-start" },
+            "margin": { "value": "5px" },
+            "connector": {
+              "bottom": { "value": "0" }
+            }
+          },
+          "distance": { "value": "0" },
+          "padding-block-end": { "value": "32px" }
+        },
+        "meta": {
+          "gap": { "value": "6px" },
+          "marker": {
+            "size": { "value": "4px" },
+            "color": { "value": "{denhaag.color.black}" }
+          }
+        }
+      }
+    }
+  }
+}