diff --git a/site/src/lib/formatting.ts b/site/src/lib/formatting.ts
index a601aa0..a12e434 100644
--- a/site/src/lib/formatting.ts
+++ b/site/src/lib/formatting.ts
@@ -1,11 +1,11 @@
-export const leftPadTwoDigits = (n: number) => {
+export const leftPadTwoDigits = (n: number): string[] => {
   if (n < 10) {
-    return `00${n}`;
+    return `00${n}`.split("");
   }
 
   if (n < 100) {
-    return `0${n}`;
+    return `0${n}`.split("");
   }
 
-  return `${n}`;
+  return `${n}`.split("");
 };
diff --git a/site/src/lib/server/__snapshots__/timeline.test.ts.snap b/site/src/lib/server/__snapshots__/timeline.test.ts.snap
index f98f777..02ed8ff 100644
--- a/site/src/lib/server/__snapshots__/timeline.test.ts.snap
+++ b/site/src/lib/server/__snapshots__/timeline.test.ts.snap
@@ -7,28 +7,44 @@ exports[`timeline datamodel integration 1`] = `
   "dayTexts": [
     {
       "dayAnimId": "dayanim00",
-      "dayNumber": "001",
+      "dayNumber": [
+        "0",
+        "0",
+        "1",
+      ],
       "duration": 166.66666666666666,
       "freeze": false,
       "lastDayAnimId": "",
     },
     {
       "dayAnimId": "dayanim01",
-      "dayNumber": "002",
+      "dayNumber": [
+        "0",
+        "0",
+        "2",
+      ],
       "duration": 166.66666666666666,
       "freeze": false,
       "lastDayAnimId": "dayanim00",
     },
     {
       "dayAnimId": "dayanim02",
-      "dayNumber": "003",
+      "dayNumber": [
+        "0",
+        "0",
+        "3",
+      ],
       "duration": 166.66666666666666,
       "freeze": false,
       "lastDayAnimId": "dayanim01",
     },
     {
       "dayAnimId": "dayanim0hold",
-      "dayNumber": "003",
+      "dayNumber": [
+        "0",
+        "0",
+        "3",
+      ],
       "duration": 6600,
       "freeze": false,
       "lastDayAnimId": "dayanim02",
@@ -36,7 +52,11 @@ exports[`timeline datamodel integration 1`] = `
     },
     {
       "dayAnimId": "dayanim1hold",
-      "dayNumber": "003",
+      "dayNumber": [
+        "0",
+        "0",
+        "3",
+      ],
       "duration": 2900,
       "freeze": false,
       "lastDayAnimId": "dayanim0hold",
@@ -44,14 +64,22 @@ exports[`timeline datamodel integration 1`] = `
     },
     {
       "dayAnimId": "dayanim20",
-      "dayNumber": "004",
+      "dayNumber": [
+        "0",
+        "0",
+        "4",
+      ],
       "duration": 500,
       "freeze": false,
       "lastDayAnimId": "dayanim1hold",
     },
     {
       "dayAnimId": "dayanim2hold",
-      "dayNumber": "004",
+      "dayNumber": [
+        "0",
+        "0",
+        "4",
+      ],
       "duration": 2600,
       "freeze": false,
       "lastDayAnimId": "dayanim20",
@@ -59,21 +87,33 @@ exports[`timeline datamodel integration 1`] = `
     },
     {
       "dayAnimId": "dayanim30",
-      "dayNumber": "005",
+      "dayNumber": [
+        "0",
+        "0",
+        "5",
+      ],
       "duration": 250,
       "freeze": false,
       "lastDayAnimId": "dayanim2hold",
     },
     {
       "dayAnimId": "dayanim31",
-      "dayNumber": "006",
+      "dayNumber": [
+        "0",
+        "0",
+        "6",
+      ],
       "duration": 250,
       "freeze": false,
       "lastDayAnimId": "dayanim30",
     },
     {
       "dayAnimId": "dayanim3hold",
-      "dayNumber": "006",
+      "dayNumber": [
+        "0",
+        "0",
+        "6",
+      ],
       "duration": 3000,
       "freeze": false,
       "lastDayAnimId": "dayanim31",
@@ -81,14 +121,22 @@ exports[`timeline datamodel integration 1`] = `
     },
     {
       "dayAnimId": "dayanim40",
-      "dayNumber": "007",
+      "dayNumber": [
+        "0",
+        "0",
+        "7",
+      ],
       "duration": 500,
       "freeze": false,
       "lastDayAnimId": "dayanim3hold",
     },
     {
       "dayAnimId": "dayanim4hold",
-      "dayNumber": "007",
+      "dayNumber": [
+        "0",
+        "0",
+        "7",
+      ],
       "duration": 6200,
       "freeze": false,
       "lastDayAnimId": "dayanim40",
@@ -96,70 +144,110 @@ exports[`timeline datamodel integration 1`] = `
     },
     {
       "dayAnimId": "dayanim50",
-      "dayNumber": "008",
+      "dayNumber": [
+        "0",
+        "0",
+        "8",
+      ],
       "duration": 55.55555555555556,
       "freeze": false,
       "lastDayAnimId": "dayanim4hold",
     },
     {
       "dayAnimId": "dayanim51",
-      "dayNumber": "009",
+      "dayNumber": [
+        "0",
+        "0",
+        "9",
+      ],
       "duration": 55.55555555555556,
       "freeze": false,
       "lastDayAnimId": "dayanim50",
     },
     {
       "dayAnimId": "dayanim52",
-      "dayNumber": "010",
+      "dayNumber": [
+        "0",
+        "1",
+        "0",
+      ],
       "duration": 55.55555555555556,
       "freeze": false,
       "lastDayAnimId": "dayanim51",
     },
     {
       "dayAnimId": "dayanim53",
-      "dayNumber": "011",
+      "dayNumber": [
+        "0",
+        "1",
+        "1",
+      ],
       "duration": 55.55555555555556,
       "freeze": false,
       "lastDayAnimId": "dayanim52",
     },
     {
       "dayAnimId": "dayanim54",
-      "dayNumber": "012",
+      "dayNumber": [
+        "0",
+        "1",
+        "2",
+      ],
       "duration": 55.55555555555556,
       "freeze": false,
       "lastDayAnimId": "dayanim53",
     },
     {
       "dayAnimId": "dayanim55",
-      "dayNumber": "013",
+      "dayNumber": [
+        "0",
+        "1",
+        "3",
+      ],
       "duration": 55.55555555555556,
       "freeze": false,
       "lastDayAnimId": "dayanim54",
     },
     {
       "dayAnimId": "dayanim56",
-      "dayNumber": "014",
+      "dayNumber": [
+        "0",
+        "1",
+        "4",
+      ],
       "duration": 55.55555555555556,
       "freeze": false,
       "lastDayAnimId": "dayanim55",
     },
     {
       "dayAnimId": "dayanim57",
-      "dayNumber": "015",
+      "dayNumber": [
+        "0",
+        "1",
+        "5",
+      ],
       "duration": 55.55555555555556,
       "freeze": false,
       "lastDayAnimId": "dayanim56",
     },
     {
       "dayAnimId": "dayanim58",
-      "dayNumber": "016",
+      "dayNumber": [
+        "0",
+        "1",
+        "6",
+      ],
       "duration": 55.55555555555556,
       "freeze": false,
       "lastDayAnimId": "dayanim57",
     },
     {
       "dayAnimId": "dayanim5hold",
-      "dayNumber": "016",
+      "dayNumber": [
+        "0",
+        "1",
+        "6",
+      ],
       "duration": 1600,
       "freeze": false,
       "lastDayAnimId": "dayanim58",
@@ -167,77 +255,121 @@ exports[`timeline datamodel integration 1`] = `
     },
     {
       "dayAnimId": "dayanim60",
-      "dayNumber": "017",
+      "dayNumber": [
+        "0",
+        "1",
+        "7",
+      ],
       "duration": 50,
       "freeze": false,
       "lastDayAnimId": "dayanim5hold",
     },
     {
       "dayAnimId": "dayanim61",
-      "dayNumber": "018",
+      "dayNumber": [
+        "0",
+        "1",
+        "8",
+      ],
       "duration": 50,
       "freeze": false,
       "lastDayAnimId": "dayanim60",
     },
     {
       "dayAnimId": "dayanim62",
-      "dayNumber": "019",
+      "dayNumber": [
+        "0",
+        "1",
+        "9",
+      ],
       "duration": 50,
       "freeze": false,
       "lastDayAnimId": "dayanim61",
     },
     {
       "dayAnimId": "dayanim63",
-      "dayNumber": "020",
+      "dayNumber": [
+        "0",
+        "2",
+        "0",
+      ],
       "duration": 50,
       "freeze": false,
       "lastDayAnimId": "dayanim62",
     },
     {
       "dayAnimId": "dayanim64",
-      "dayNumber": "021",
+      "dayNumber": [
+        "0",
+        "2",
+        "1",
+      ],
       "duration": 50,
       "freeze": false,
       "lastDayAnimId": "dayanim63",
     },
     {
       "dayAnimId": "dayanim65",
-      "dayNumber": "022",
+      "dayNumber": [
+        "0",
+        "2",
+        "2",
+      ],
       "duration": 50,
       "freeze": false,
       "lastDayAnimId": "dayanim64",
     },
     {
       "dayAnimId": "dayanim66",
-      "dayNumber": "023",
+      "dayNumber": [
+        "0",
+        "2",
+        "3",
+      ],
       "duration": 50,
       "freeze": false,
       "lastDayAnimId": "dayanim65",
     },
     {
       "dayAnimId": "dayanim67",
-      "dayNumber": "024",
+      "dayNumber": [
+        "0",
+        "2",
+        "4",
+      ],
       "duration": 50,
       "freeze": false,
       "lastDayAnimId": "dayanim66",
     },
     {
       "dayAnimId": "dayanim68",
-      "dayNumber": "025",
+      "dayNumber": [
+        "0",
+        "2",
+        "5",
+      ],
       "duration": 50,
       "freeze": false,
       "lastDayAnimId": "dayanim67",
     },
     {
       "dayAnimId": "dayanim69",
-      "dayNumber": "026",
+      "dayNumber": [
+        "0",
+        "2",
+        "6",
+      ],
       "duration": 50,
       "freeze": false,
       "lastDayAnimId": "dayanim68",
     },
     {
       "dayAnimId": "dayanim6hold",
-      "dayNumber": "026",
+      "dayNumber": [
+        "0",
+        "2",
+        "6",
+      ],
       "duration": 3800,
       "freeze": false,
       "lastDayAnimId": "dayanim69",
@@ -245,28 +377,44 @@ exports[`timeline datamodel integration 1`] = `
     },
     {
       "dayAnimId": "dayanim70",
-      "dayNumber": "027",
+      "dayNumber": [
+        "0",
+        "2",
+        "7",
+      ],
       "duration": 166.66666666666666,
       "freeze": false,
       "lastDayAnimId": "dayanim6hold",
     },
     {
       "dayAnimId": "dayanim71",
-      "dayNumber": "028",
+      "dayNumber": [
+        "0",
+        "2",
+        "8",
+      ],
       "duration": 166.66666666666666,
       "freeze": false,
       "lastDayAnimId": "dayanim70",
     },
     {
       "dayAnimId": "dayanim72",
-      "dayNumber": "029",
+      "dayNumber": [
+        "0",
+        "2",
+        "9",
+      ],
       "duration": 166.66666666666666,
       "freeze": false,
       "lastDayAnimId": "dayanim71",
     },
     {
       "dayAnimId": "dayanim7hold",
-      "dayNumber": "029",
+      "dayNumber": [
+        "0",
+        "2",
+        "9",
+      ],
       "duration": 1400,
       "freeze": false,
       "lastDayAnimId": "dayanim72",
@@ -274,7 +422,11 @@ exports[`timeline datamodel integration 1`] = `
     },
     {
       "dayAnimId": "dayanim8hold",
-      "dayNumber": "029",
+      "dayNumber": [
+        "0",
+        "2",
+        "9",
+      ],
       "duration": 900,
       "freeze": false,
       "lastDayAnimId": "dayanim7hold",
@@ -282,35 +434,55 @@ exports[`timeline datamodel integration 1`] = `
     },
     {
       "dayAnimId": "dayanim90",
-      "dayNumber": "030",
+      "dayNumber": [
+        "0",
+        "3",
+        "0",
+      ],
       "duration": 125,
       "freeze": false,
       "lastDayAnimId": "dayanim8hold",
     },
     {
       "dayAnimId": "dayanim91",
-      "dayNumber": "031",
+      "dayNumber": [
+        "0",
+        "3",
+        "1",
+      ],
       "duration": 125,
       "freeze": false,
       "lastDayAnimId": "dayanim90",
     },
     {
       "dayAnimId": "dayanim92",
-      "dayNumber": "032",
+      "dayNumber": [
+        "0",
+        "3",
+        "2",
+      ],
       "duration": 125,
       "freeze": false,
       "lastDayAnimId": "dayanim91",
     },
     {
       "dayAnimId": "dayanim93",
-      "dayNumber": "033",
+      "dayNumber": [
+        "0",
+        "3",
+        "3",
+      ],
       "duration": 125,
       "freeze": false,
       "lastDayAnimId": "dayanim92",
     },
     {
       "dayAnimId": "dayanim9hold",
-      "dayNumber": "033",
+      "dayNumber": [
+        "0",
+        "3",
+        "3",
+      ],
       "duration": 2000,
       "freeze": false,
       "lastDayAnimId": "dayanim93",
@@ -318,280 +490,440 @@ exports[`timeline datamodel integration 1`] = `
     },
     {
       "dayAnimId": "dayanim100",
-      "dayNumber": "034",
+      "dayNumber": [
+        "0",
+        "3",
+        "4",
+      ],
       "duration": 12.820512820512821,
       "freeze": false,
       "lastDayAnimId": "dayanim9hold",
     },
     {
       "dayAnimId": "dayanim101",
-      "dayNumber": "035",
+      "dayNumber": [
+        "0",
+        "3",
+        "5",
+      ],
       "duration": 12.820512820512821,
       "freeze": false,
       "lastDayAnimId": "dayanim100",
     },
     {
       "dayAnimId": "dayanim102",
-      "dayNumber": "036",
+      "dayNumber": [
+        "0",
+        "3",
+        "6",
+      ],
       "duration": 12.820512820512821,
       "freeze": false,
       "lastDayAnimId": "dayanim101",
     },
     {
       "dayAnimId": "dayanim103",
-      "dayNumber": "037",
+      "dayNumber": [
+        "0",
+        "3",
+        "7",
+      ],
       "duration": 12.820512820512821,
       "freeze": false,
       "lastDayAnimId": "dayanim102",
     },
     {
       "dayAnimId": "dayanim104",
-      "dayNumber": "038",
+      "dayNumber": [
+        "0",
+        "3",
+        "8",
+      ],
       "duration": 12.820512820512821,
       "freeze": false,
       "lastDayAnimId": "dayanim103",
     },
     {
       "dayAnimId": "dayanim105",
-      "dayNumber": "039",
+      "dayNumber": [
+        "0",
+        "3",
+        "9",
+      ],
       "duration": 12.820512820512821,
       "freeze": false,
       "lastDayAnimId": "dayanim104",
     },
     {
       "dayAnimId": "dayanim106",
-      "dayNumber": "040",
+      "dayNumber": [
+        "0",
+        "4",
+        "0",
+      ],
       "duration": 12.820512820512821,
       "freeze": false,
       "lastDayAnimId": "dayanim105",
     },
     {
       "dayAnimId": "dayanim107",
-      "dayNumber": "041",
+      "dayNumber": [
+        "0",
+        "4",
+        "1",
+      ],
       "duration": 12.820512820512821,
       "freeze": false,
       "lastDayAnimId": "dayanim106",
     },
     {
       "dayAnimId": "dayanim108",
-      "dayNumber": "042",
+      "dayNumber": [
+        "0",
+        "4",
+        "2",
+      ],
       "duration": 12.820512820512821,
       "freeze": false,
       "lastDayAnimId": "dayanim107",
     },
     {
       "dayAnimId": "dayanim109",
-      "dayNumber": "043",
+      "dayNumber": [
+        "0",
+        "4",
+        "3",
+      ],
       "duration": 12.820512820512821,
       "freeze": false,
       "lastDayAnimId": "dayanim108",
     },
     {
       "dayAnimId": "dayanim1010",
-      "dayNumber": "044",
+      "dayNumber": [
+        "0",
+        "4",
+        "4",
+      ],
       "duration": 12.820512820512821,
       "freeze": false,
       "lastDayAnimId": "dayanim109",
     },
     {
       "dayAnimId": "dayanim1011",
-      "dayNumber": "045",
+      "dayNumber": [
+        "0",
+        "4",
+        "5",
+      ],
       "duration": 12.820512820512821,
       "freeze": false,
       "lastDayAnimId": "dayanim1010",
     },
     {
       "dayAnimId": "dayanim1012",
-      "dayNumber": "046",
+      "dayNumber": [
+        "0",
+        "4",
+        "6",
+      ],
       "duration": 12.820512820512821,
       "freeze": false,
       "lastDayAnimId": "dayanim1011",
     },
     {
       "dayAnimId": "dayanim1013",
-      "dayNumber": "047",
+      "dayNumber": [
+        "0",
+        "4",
+        "7",
+      ],
       "duration": 12.820512820512821,
       "freeze": false,
       "lastDayAnimId": "dayanim1012",
     },
     {
       "dayAnimId": "dayanim1014",
-      "dayNumber": "048",
+      "dayNumber": [
+        "0",
+        "4",
+        "8",
+      ],
       "duration": 12.820512820512821,
       "freeze": false,
       "lastDayAnimId": "dayanim1013",
     },
     {
       "dayAnimId": "dayanim1015",
-      "dayNumber": "049",
+      "dayNumber": [
+        "0",
+        "4",
+        "9",
+      ],
       "duration": 12.820512820512821,
       "freeze": false,
       "lastDayAnimId": "dayanim1014",
     },
     {
       "dayAnimId": "dayanim1016",
-      "dayNumber": "050",
+      "dayNumber": [
+        "0",
+        "5",
+        "0",
+      ],
       "duration": 12.820512820512821,
       "freeze": false,
       "lastDayAnimId": "dayanim1015",
     },
     {
       "dayAnimId": "dayanim1017",
-      "dayNumber": "051",
+      "dayNumber": [
+        "0",
+        "5",
+        "1",
+      ],
       "duration": 12.820512820512821,
       "freeze": false,
       "lastDayAnimId": "dayanim1016",
     },
     {
       "dayAnimId": "dayanim1018",
-      "dayNumber": "052",
+      "dayNumber": [
+        "0",
+        "5",
+        "2",
+      ],
       "duration": 12.820512820512821,
       "freeze": false,
       "lastDayAnimId": "dayanim1017",
     },
     {
       "dayAnimId": "dayanim1019",
-      "dayNumber": "053",
+      "dayNumber": [
+        "0",
+        "5",
+        "3",
+      ],
       "duration": 12.820512820512821,
       "freeze": false,
       "lastDayAnimId": "dayanim1018",
     },
     {
       "dayAnimId": "dayanim1020",
-      "dayNumber": "054",
+      "dayNumber": [
+        "0",
+        "5",
+        "4",
+      ],
       "duration": 12.820512820512821,
       "freeze": false,
       "lastDayAnimId": "dayanim1019",
     },
     {
       "dayAnimId": "dayanim1021",
-      "dayNumber": "055",
+      "dayNumber": [
+        "0",
+        "5",
+        "5",
+      ],
       "duration": 12.820512820512821,
       "freeze": false,
       "lastDayAnimId": "dayanim1020",
     },
     {
       "dayAnimId": "dayanim1022",
-      "dayNumber": "056",
+      "dayNumber": [
+        "0",
+        "5",
+        "6",
+      ],
       "duration": 12.820512820512821,
       "freeze": false,
       "lastDayAnimId": "dayanim1021",
     },
     {
       "dayAnimId": "dayanim1023",
-      "dayNumber": "057",
+      "dayNumber": [
+        "0",
+        "5",
+        "7",
+      ],
       "duration": 12.820512820512821,
       "freeze": false,
       "lastDayAnimId": "dayanim1022",
     },
     {
       "dayAnimId": "dayanim1024",
-      "dayNumber": "058",
+      "dayNumber": [
+        "0",
+        "5",
+        "8",
+      ],
       "duration": 12.820512820512821,
       "freeze": false,
       "lastDayAnimId": "dayanim1023",
     },
     {
       "dayAnimId": "dayanim1025",
-      "dayNumber": "059",
+      "dayNumber": [
+        "0",
+        "5",
+        "9",
+      ],
       "duration": 12.820512820512821,
       "freeze": false,
       "lastDayAnimId": "dayanim1024",
     },
     {
       "dayAnimId": "dayanim1026",
-      "dayNumber": "060",
+      "dayNumber": [
+        "0",
+        "6",
+        "0",
+      ],
       "duration": 12.820512820512821,
       "freeze": false,
       "lastDayAnimId": "dayanim1025",
     },
     {
       "dayAnimId": "dayanim1027",
-      "dayNumber": "061",
+      "dayNumber": [
+        "0",
+        "6",
+        "1",
+      ],
       "duration": 12.820512820512821,
       "freeze": false,
       "lastDayAnimId": "dayanim1026",
     },
     {
       "dayAnimId": "dayanim1028",
-      "dayNumber": "062",
+      "dayNumber": [
+        "0",
+        "6",
+        "2",
+      ],
       "duration": 12.820512820512821,
       "freeze": false,
       "lastDayAnimId": "dayanim1027",
     },
     {
       "dayAnimId": "dayanim1029",
-      "dayNumber": "063",
+      "dayNumber": [
+        "0",
+        "6",
+        "3",
+      ],
       "duration": 12.820512820512821,
       "freeze": false,
       "lastDayAnimId": "dayanim1028",
     },
     {
       "dayAnimId": "dayanim1030",
-      "dayNumber": "064",
+      "dayNumber": [
+        "0",
+        "6",
+        "4",
+      ],
       "duration": 12.820512820512821,
       "freeze": false,
       "lastDayAnimId": "dayanim1029",
     },
     {
       "dayAnimId": "dayanim1031",
-      "dayNumber": "065",
+      "dayNumber": [
+        "0",
+        "6",
+        "5",
+      ],
       "duration": 12.820512820512821,
       "freeze": false,
       "lastDayAnimId": "dayanim1030",
     },
     {
       "dayAnimId": "dayanim1032",
-      "dayNumber": "066",
+      "dayNumber": [
+        "0",
+        "6",
+        "6",
+      ],
       "duration": 12.820512820512821,
       "freeze": false,
       "lastDayAnimId": "dayanim1031",
     },
     {
       "dayAnimId": "dayanim1033",
-      "dayNumber": "067",
+      "dayNumber": [
+        "0",
+        "6",
+        "7",
+      ],
       "duration": 12.820512820512821,
       "freeze": false,
       "lastDayAnimId": "dayanim1032",
     },
     {
       "dayAnimId": "dayanim1034",
-      "dayNumber": "068",
+      "dayNumber": [
+        "0",
+        "6",
+        "8",
+      ],
       "duration": 12.820512820512821,
       "freeze": false,
       "lastDayAnimId": "dayanim1033",
     },
     {
       "dayAnimId": "dayanim1035",
-      "dayNumber": "069",
+      "dayNumber": [
+        "0",
+        "6",
+        "9",
+      ],
       "duration": 12.820512820512821,
       "freeze": false,
       "lastDayAnimId": "dayanim1034",
     },
     {
       "dayAnimId": "dayanim1036",
-      "dayNumber": "070",
+      "dayNumber": [
+        "0",
+        "7",
+        "0",
+      ],
       "duration": 12.820512820512821,
       "freeze": false,
       "lastDayAnimId": "dayanim1035",
     },
     {
       "dayAnimId": "dayanim1037",
-      "dayNumber": "071",
+      "dayNumber": [
+        "0",
+        "7",
+        "1",
+      ],
       "duration": 12.820512820512821,
       "freeze": false,
       "lastDayAnimId": "dayanim1036",
     },
     {
       "dayAnimId": "dayanim1038",
-      "dayNumber": "072",
+      "dayNumber": [
+        "0",
+        "7",
+        "2",
+      ],
       "duration": 12.820512820512821,
       "freeze": false,
       "lastDayAnimId": "dayanim1037",
     },
     {
       "dayAnimId": "dayanim10hold",
-      "dayNumber": "072",
+      "dayNumber": [
+        "0",
+        "7",
+        "2",
+      ],
       "duration": 4200,
       "freeze": false,
       "lastDayAnimId": "dayanim1038",
@@ -599,105 +931,165 @@ exports[`timeline datamodel integration 1`] = `
     },
     {
       "dayAnimId": "dayanim110",
-      "dayNumber": "073",
+      "dayNumber": [
+        "0",
+        "7",
+        "3",
+      ],
       "duration": 35.714285714285715,
       "freeze": false,
       "lastDayAnimId": "dayanim10hold",
     },
     {
       "dayAnimId": "dayanim111",
-      "dayNumber": "074",
+      "dayNumber": [
+        "0",
+        "7",
+        "4",
+      ],
       "duration": 35.714285714285715,
       "freeze": false,
       "lastDayAnimId": "dayanim110",
     },
     {
       "dayAnimId": "dayanim112",
-      "dayNumber": "075",
+      "dayNumber": [
+        "0",
+        "7",
+        "5",
+      ],
       "duration": 35.714285714285715,
       "freeze": false,
       "lastDayAnimId": "dayanim111",
     },
     {
       "dayAnimId": "dayanim113",
-      "dayNumber": "076",
+      "dayNumber": [
+        "0",
+        "7",
+        "6",
+      ],
       "duration": 35.714285714285715,
       "freeze": false,
       "lastDayAnimId": "dayanim112",
     },
     {
       "dayAnimId": "dayanim114",
-      "dayNumber": "077",
+      "dayNumber": [
+        "0",
+        "7",
+        "7",
+      ],
       "duration": 35.714285714285715,
       "freeze": false,
       "lastDayAnimId": "dayanim113",
     },
     {
       "dayAnimId": "dayanim115",
-      "dayNumber": "078",
+      "dayNumber": [
+        "0",
+        "7",
+        "8",
+      ],
       "duration": 35.714285714285715,
       "freeze": false,
       "lastDayAnimId": "dayanim114",
     },
     {
       "dayAnimId": "dayanim116",
-      "dayNumber": "079",
+      "dayNumber": [
+        "0",
+        "7",
+        "9",
+      ],
       "duration": 35.714285714285715,
       "freeze": false,
       "lastDayAnimId": "dayanim115",
     },
     {
       "dayAnimId": "dayanim117",
-      "dayNumber": "080",
+      "dayNumber": [
+        "0",
+        "8",
+        "0",
+      ],
       "duration": 35.714285714285715,
       "freeze": false,
       "lastDayAnimId": "dayanim116",
     },
     {
       "dayAnimId": "dayanim118",
-      "dayNumber": "081",
+      "dayNumber": [
+        "0",
+        "8",
+        "1",
+      ],
       "duration": 35.714285714285715,
       "freeze": false,
       "lastDayAnimId": "dayanim117",
     },
     {
       "dayAnimId": "dayanim119",
-      "dayNumber": "082",
+      "dayNumber": [
+        "0",
+        "8",
+        "2",
+      ],
       "duration": 35.714285714285715,
       "freeze": false,
       "lastDayAnimId": "dayanim118",
     },
     {
       "dayAnimId": "dayanim1110",
-      "dayNumber": "083",
+      "dayNumber": [
+        "0",
+        "8",
+        "3",
+      ],
       "duration": 35.714285714285715,
       "freeze": false,
       "lastDayAnimId": "dayanim119",
     },
     {
       "dayAnimId": "dayanim1111",
-      "dayNumber": "084",
+      "dayNumber": [
+        "0",
+        "8",
+        "4",
+      ],
       "duration": 35.714285714285715,
       "freeze": false,
       "lastDayAnimId": "dayanim1110",
     },
     {
       "dayAnimId": "dayanim1112",
-      "dayNumber": "085",
+      "dayNumber": [
+        "0",
+        "8",
+        "5",
+      ],
       "duration": 35.714285714285715,
       "freeze": false,
       "lastDayAnimId": "dayanim1111",
     },
     {
       "dayAnimId": "dayanim1113",
-      "dayNumber": "086",
+      "dayNumber": [
+        "0",
+        "8",
+        "6",
+      ],
       "duration": 35.714285714285715,
       "freeze": true,
       "lastDayAnimId": "dayanim1112",
     },
     {
       "dayAnimId": "dayanim11hold",
-      "dayNumber": "086",
+      "dayNumber": [
+        "0",
+        "8",
+        "6",
+      ],
       "duration": 0,
       "freeze": true,
       "lastDayAnimId": "dayanim1113",
diff --git a/site/src/lib/server/timeline.ts b/site/src/lib/server/timeline.ts
index f0f6be5..97c4ab5 100644
--- a/site/src/lib/server/timeline.ts
+++ b/site/src/lib/server/timeline.ts
@@ -212,7 +212,7 @@ export const getTimeline = ({
   const clipPathTimes = keyTimes.join(";");
 
   const dayTexts: Array<{
-    dayNumber: string;
+    dayNumber: string[];
     duration: number;
     dayAnimId: string;
     lastDayAnimId: string;
diff --git a/site/src/pages/[...enabler].astro b/site/src/pages/[...enabler].astro
index 6927646..1b32760 100644
--- a/site/src/pages/[...enabler].astro
+++ b/site/src/pages/[...enabler].astro
@@ -114,7 +114,7 @@ const {
               </rect>
             </clipPath>
           </defs>
-          <g style="transform: translate(95%,70%)">
+          <g class="svg-labels">
             <g class="svg-counts">
               {
                 svgTexts.map(
@@ -154,7 +154,11 @@ const {
                 {
                   dayTexts.map(
                     ({
-                      dayNumber,
+                      dayNumber: [
+                        firstDayNumber,
+                        secondDayNumber,
+                        thirdDayNumber,
+                      ],
                       duration,
                       dayAnimId,
                       lastDayAnimId,
@@ -162,7 +166,28 @@ const {
                       freeze,
                     }) => (
                       <text>
-                        <tspan>{dayNumber}</tspan>
+                        <tspan text-anchor="middle" textLength="2.2em">
+                          <tspan
+                            style={{
+                              opacity:
+                                firstDayNumber === "0" ? "0.4" : undefined,
+                            }}
+                          >
+                            {firstDayNumber}
+                          </tspan>
+                          <tspan
+                            style={{
+                              opacity:
+                                firstDayNumber === "0" &&
+                                secondDayNumber === "0"
+                                  ? "0.4"
+                                  : undefined,
+                            }}
+                          >
+                            {secondDayNumber}
+                          </tspan>
+                          <tspan>{thirdDayNumber}</tspan>
+                        </tspan>
                         <animate
                           id={dayAnimId}
                           attributeName="opacity"
@@ -333,6 +358,10 @@ const {
     left: 0;
   }
 
+  .svg-labels {
+    transform: translate(95%, 70%);
+  }
+
   .svg-counts text {
     font-family: "Martian Mono", monospace;
     font-weight: 600;
@@ -342,11 +371,11 @@ const {
   }
 
   .svg-days-container {
-    transform: translate(0, 1.6vw);
+    transform: translate(0, 1.7vw);
   }
 
   .svg-days {
-    transform: translate(-5.3vw, 0);
+    transform: translate(-4.3vw, 0);
   }
 
   .svg-days text {
@@ -358,7 +387,7 @@ const {
   }
 
   .svg-days-bookends:first-of-type {
-    transform: translate(-5.6vw, 0);
+    transform: translate(-5.8vw, 0);
   }
 
   .svg-days-bookends text {
@@ -502,7 +531,11 @@ const {
     }
 
     .svg-days {
-      transform: translate(-6.5vw, 0);
+      transform: translate(-5.1vw, 0);
+    }
+
+    .svg-days > text > tspan {
+      text-length: 2.8vw;
     }
 
     .svg-days text {
@@ -556,20 +589,24 @@ const {
       r: 8;
     }
 
+    .svg-labels {
+      transform: translate(95%, 60%);
+    }
+
     .svg-counts text {
       font-size: 4vh;
     }
 
     .svg-days-container {
-      transform: translate(0, 3vh);
+      transform: translate(0, 3.5vh);
     }
 
     .svg-days {
-      transform: translate(-10.5vh, 0);
+      transform: translate(-8.2vh, 0);
     }
 
     .svg-days text {
-      font-size: 2.2vh;
+      font-size: 2.1vh;
     }
 
     .svg-days-bookends:first-of-type {