diff --git a/__snapshots__/calendar.md b/__snapshots__/calendar.md
index c18dbf179..545f63aee 100644
--- a/__snapshots__/calendar.md
+++ b/__snapshots__/calendar.md
@@ -12,11 +12,11 @@
       role="columnheader"
       tabindex="-1"
     >
-      <time
-        aria-readonly="true"
-        datetime="2020-12-27"
-      >
-        <h2>
+      <h2>
+        <time
+          aria-readonly="true"
+          datetime="2020-12-27"
+        >
           <em
             aria-label="Sunday, December 27"
             role="button"
@@ -27,18 +27,18 @@
           <small aria-hidden="true">
             Sun
           </small>
-        </h2>
-      </time>
+        </time>
+      </h2>
     </div>
     <div
       role="columnheader"
       tabindex="-1"
     >
-      <time
-        aria-readonly="true"
-        datetime="2020-12-28"
-      >
-        <h2>
+      <h2>
+        <time
+          aria-readonly="true"
+          datetime="2020-12-28"
+        >
           <em
             aria-label="Monday, December 28"
             role="button"
@@ -49,18 +49,18 @@
           <small aria-hidden="true">
             Mon
           </small>
-        </h2>
-      </time>
+        </time>
+      </h2>
     </div>
     <div
       role="columnheader"
       tabindex="-1"
     >
-      <time
-        aria-readonly="true"
-        datetime="2020-12-29"
-      >
-        <h2>
+      <h2>
+        <time
+          aria-readonly="true"
+          datetime="2020-12-29"
+        >
           <em
             aria-label="Tuesday, December 29"
             role="button"
@@ -71,18 +71,18 @@
           <small aria-hidden="true">
             Tue
           </small>
-        </h2>
-      </time>
+        </time>
+      </h2>
     </div>
     <div
       role="columnheader"
       tabindex="-1"
     >
-      <time
-        aria-readonly="true"
-        datetime="2020-12-30"
-      >
-        <h2>
+      <h2>
+        <time
+          aria-readonly="true"
+          datetime="2020-12-30"
+        >
           <em
             aria-label="Wednesday, December 30"
             role="button"
@@ -93,18 +93,18 @@
           <small aria-hidden="true">
             Wed
           </small>
-        </h2>
-      </time>
+        </time>
+      </h2>
     </div>
     <div
       role="columnheader"
       tabindex="-1"
     >
-      <time
-        aria-readonly="true"
-        datetime="2020-12-31"
-      >
-        <h2>
+      <h2>
+        <time
+          aria-readonly="true"
+          datetime="2020-12-31"
+        >
           <em
             aria-label="Thursday, December 31"
             role="button"
@@ -115,18 +115,18 @@
           <small aria-hidden="true">
             Thu
           </small>
-        </h2>
-      </time>
+        </time>
+      </h2>
     </div>
     <div
       role="columnheader"
       tabindex="-1"
     >
-      <time
-        aria-readonly="true"
-        datetime="2021-01-01"
-      >
-        <h2>
+      <h2>
+        <time
+          aria-readonly="true"
+          datetime="2021-01-01"
+        >
           <em
             aria-label="Friday, January 1"
             role="button"
@@ -137,18 +137,18 @@
           <small aria-hidden="true">
             Fri
           </small>
-        </h2>
-      </time>
+        </time>
+      </h2>
     </div>
     <div
       role="columnheader"
       tabindex="-1"
     >
-      <time
-        aria-readonly="true"
-        datetime="2021-01-02"
-      >
-        <h2>
+      <h2>
+        <time
+          aria-readonly="true"
+          datetime="2021-01-02"
+        >
           <em
             aria-label="Saturday, January 2"
             role="button"
@@ -159,8 +159,8 @@
           <small aria-hidden="true">
             Sat
           </small>
-        </h2>
-      </time>
+        </time>
+      </h2>
     </div>
   </div>
   <div
@@ -420,11 +420,11 @@
       role="columnheader"
       tabindex="-1"
     >
-      <time
-        aria-readonly="true"
-        datetime="2020-12-27"
-      >
-        <h2>
+      <h2>
+        <time
+          aria-readonly="true"
+          datetime="2020-12-27"
+        >
           <em
             aria-label="Sunday, December 27"
             role="button"
@@ -435,18 +435,18 @@
           <small aria-hidden="true">
             Sun
           </small>
-        </h2>
-      </time>
+        </time>
+      </h2>
     </div>
     <div
       role="columnheader"
       tabindex="-1"
     >
-      <time
-        aria-readonly="true"
-        datetime="2020-12-28"
-      >
-        <h2>
+      <h2>
+        <time
+          aria-readonly="true"
+          datetime="2020-12-28"
+        >
           <em
             aria-label="Monday, December 28"
             role="button"
@@ -457,18 +457,18 @@
           <small aria-hidden="true">
             Mon
           </small>
-        </h2>
-      </time>
+        </time>
+      </h2>
     </div>
     <div
       role="columnheader"
       tabindex="-1"
     >
-      <time
-        aria-readonly="true"
-        datetime="2020-12-29"
-      >
-        <h2>
+      <h2>
+        <time
+          aria-readonly="true"
+          datetime="2020-12-29"
+        >
           <em
             aria-label="Tuesday, December 29"
             role="button"
@@ -479,18 +479,18 @@
           <small aria-hidden="true">
             Tue
           </small>
-        </h2>
-      </time>
+        </time>
+      </h2>
     </div>
     <div
       role="columnheader"
       tabindex="-1"
     >
-      <time
-        aria-readonly="true"
-        datetime="2020-12-30"
-      >
-        <h2>
+      <h2>
+        <time
+          aria-readonly="true"
+          datetime="2020-12-30"
+        >
           <em
             aria-label="Wednesday, December 30"
             role="button"
@@ -501,18 +501,18 @@
           <small aria-hidden="true">
             Wed
           </small>
-        </h2>
-      </time>
+        </time>
+      </h2>
     </div>
     <div
       role="columnheader"
       tabindex="-1"
     >
-      <time
-        aria-readonly="true"
-        datetime="2020-12-31"
-      >
-        <h2>
+      <h2>
+        <time
+          aria-readonly="true"
+          datetime="2020-12-31"
+        >
           <em
             aria-label="Thursday, December 31"
             role="button"
@@ -523,18 +523,18 @@
           <small aria-hidden="true">
             Thu
           </small>
-        </h2>
-      </time>
+        </time>
+      </h2>
     </div>
     <div
       role="columnheader"
       tabindex="-1"
     >
-      <time
-        aria-readonly="true"
-        datetime="2021-01-01"
-      >
-        <h2>
+      <h2>
+        <time
+          aria-readonly="true"
+          datetime="2021-01-01"
+        >
           <em
             aria-label="Friday, January 1"
             role="button"
@@ -545,18 +545,18 @@
           <small aria-hidden="true">
             Fri
           </small>
-        </h2>
-      </time>
+        </time>
+      </h2>
     </div>
     <div
       role="columnheader"
       tabindex="-1"
     >
-      <time
-        aria-readonly="true"
-        datetime="2021-01-02"
-      >
-        <h2>
+      <h2>
+        <time
+          aria-readonly="true"
+          datetime="2021-01-02"
+        >
           <em
             aria-label="Saturday, January 2"
             role="button"
@@ -567,8 +567,8 @@
           <small aria-hidden="true">
             Sat
           </small>
-        </h2>
-      </time>
+        </time>
+      </h2>
     </div>
   </div>
   <div
@@ -826,11 +826,11 @@
       role="columnheader"
       tabindex="-1"
     >
-      <time
-        aria-readonly="true"
-        datetime="2020-12-27"
-      >
-        <h2>
+      <h2>
+        <time
+          aria-readonly="true"
+          datetime="2020-12-27"
+        >
           <em
             aria-label="Sunday, December 27"
             role="button"
@@ -841,18 +841,18 @@
           <small aria-hidden="true">
             Sun
           </small>
-        </h2>
-      </time>
+        </time>
+      </h2>
     </div>
     <div
       role="columnheader"
       tabindex="-1"
     >
-      <time
-        aria-readonly="true"
-        datetime="2020-12-28"
-      >
-        <h2>
+      <h2>
+        <time
+          aria-readonly="true"
+          datetime="2020-12-28"
+        >
           <em
             aria-label="Monday, December 28"
             role="button"
@@ -863,18 +863,18 @@
           <small aria-hidden="true">
             Mon
           </small>
-        </h2>
-      </time>
+        </time>
+      </h2>
     </div>
     <div
       role="columnheader"
       tabindex="-1"
     >
-      <time
-        aria-readonly="true"
-        datetime="2020-12-29"
-      >
-        <h2>
+      <h2>
+        <time
+          aria-readonly="true"
+          datetime="2020-12-29"
+        >
           <em
             aria-label="Tuesday, December 29"
             role="button"
@@ -885,18 +885,18 @@
           <small aria-hidden="true">
             Tue
           </small>
-        </h2>
-      </time>
+        </time>
+      </h2>
     </div>
     <div
       role="columnheader"
       tabindex="-1"
     >
-      <time
-        aria-readonly="true"
-        datetime="2020-12-30"
-      >
-        <h2>
+      <h2>
+        <time
+          aria-readonly="true"
+          datetime="2020-12-30"
+        >
           <em
             aria-label="Wednesday, December 30"
             role="button"
@@ -907,18 +907,18 @@
           <small aria-hidden="true">
             Wed
           </small>
-        </h2>
-      </time>
+        </time>
+      </h2>
     </div>
     <div
       role="columnheader"
       tabindex="-1"
     >
-      <time
-        aria-readonly="true"
-        datetime="2020-12-31"
-      >
-        <h2>
+      <h2>
+        <time
+          aria-readonly="true"
+          datetime="2020-12-31"
+        >
           <em
             aria-label="Thursday, December 31"
             role="button"
@@ -929,18 +929,18 @@
           <small aria-hidden="true">
             Thu
           </small>
-        </h2>
-      </time>
+        </time>
+      </h2>
     </div>
     <div
       role="columnheader"
       tabindex="-1"
     >
-      <time
-        aria-readonly="true"
-        datetime="2021-01-01"
-      >
-        <h2>
+      <h2>
+        <time
+          aria-readonly="true"
+          datetime="2021-01-01"
+        >
           <em
             aria-label="Friday, January 1"
             role="button"
@@ -951,18 +951,18 @@
           <small aria-hidden="true">
             Fri
           </small>
-        </h2>
-      </time>
+        </time>
+      </h2>
     </div>
     <div
       role="columnheader"
       tabindex="-1"
     >
-      <time
-        aria-readonly="true"
-        datetime="2021-01-02"
-      >
-        <h2>
+      <h2>
+        <time
+          aria-readonly="true"
+          datetime="2021-01-02"
+        >
           <em
             aria-label="Saturday, January 2"
             role="button"
@@ -973,8 +973,8 @@
           <small aria-hidden="true">
             Sat
           </small>
-        </h2>
-      </time>
+        </time>
+      </h2>
     </div>
   </div>
   <div
@@ -1220,412 +1220,6 @@
 
 ```
 
-####   `should match snapshot of locales`
-
-```html
-<div role="grid">
-  <div
-    class="column-headers"
-    role="row"
-  >
-    <div
-      role="columnheader"
-      tabindex="-1"
-    >
-      <time
-        aria-readonly="true"
-        datetime="2020-12-27"
-      >
-        <h2>
-          <em
-            aria-label="domingo, 27 de dezembro"
-            role="button"
-            tabindex="0"
-          >
-            27
-          </em>
-          <small aria-hidden="true">
-            dom.
-          </small>
-        </h2>
-      </time>
-    </div>
-    <div
-      role="columnheader"
-      tabindex="-1"
-    >
-      <time
-        aria-readonly="true"
-        datetime="2020-12-28"
-      >
-        <h2>
-          <em
-            aria-label="segunda-feira, 28 de dezembro"
-            role="button"
-            tabindex="0"
-          >
-            28
-          </em>
-          <small aria-hidden="true">
-            seg.
-          </small>
-        </h2>
-      </time>
-    </div>
-    <div
-      role="columnheader"
-      tabindex="-1"
-    >
-      <time
-        aria-readonly="true"
-        datetime="2020-12-29"
-      >
-        <h2>
-          <em
-            aria-label="terça-feira, 29 de dezembro"
-            role="button"
-            tabindex="0"
-          >
-            29
-          </em>
-          <small aria-hidden="true">
-            ter.
-          </small>
-        </h2>
-      </time>
-    </div>
-    <div
-      role="columnheader"
-      tabindex="-1"
-    >
-      <time
-        aria-readonly="true"
-        datetime="2020-12-30"
-      >
-        <h2>
-          <em
-            aria-label="quarta-feira, 30 de dezembro"
-            role="button"
-            tabindex="0"
-          >
-            30
-          </em>
-          <small aria-hidden="true">
-            qua.
-          </small>
-        </h2>
-      </time>
-    </div>
-    <div
-      role="columnheader"
-      tabindex="-1"
-    >
-      <time
-        aria-readonly="true"
-        datetime="2020-12-31"
-      >
-        <h2>
-          <em
-            aria-label="quinta-feira, 31 de dezembro"
-            role="button"
-            tabindex="0"
-          >
-            31
-          </em>
-          <small aria-hidden="true">
-            qui.
-          </small>
-        </h2>
-      </time>
-    </div>
-    <div
-      role="columnheader"
-      tabindex="-1"
-    >
-      <time
-        aria-readonly="true"
-        datetime="2021-01-01"
-      >
-        <h2>
-          <em
-            aria-label="sexta-feira, 1 de janeiro"
-            role="button"
-            tabindex="0"
-          >
-            01
-          </em>
-          <small aria-hidden="true">
-            sex.
-          </small>
-        </h2>
-      </time>
-    </div>
-    <div
-      role="columnheader"
-      tabindex="-1"
-    >
-      <time
-        aria-readonly="true"
-        datetime="2021-01-02"
-      >
-        <h2>
-          <em
-            aria-label="sábado, 2 de janeiro"
-            role="button"
-            tabindex="0"
-          >
-            02
-          </em>
-          <small aria-hidden="true">
-            sáb.
-          </small>
-        </h2>
-      </time>
-    </div>
-  </div>
-  <div
-    class="calendar-row"
-    role="row"
-  >
-    <div
-      class="row-headers"
-      role="presentation"
-    >
-      <span role="rowheader">
-        <time datetime="01:00">
-          01
-        </time>
-      </span>
-      <span role="rowheader">
-        <time datetime="02:00">
-          02
-        </time>
-      </span>
-      <span role="rowheader">
-        <time datetime="03:00">
-          03
-        </time>
-      </span>
-      <span role="rowheader">
-        <time datetime="04:00">
-          04
-        </time>
-      </span>
-      <span role="rowheader">
-        <time datetime="05:00">
-          05
-        </time>
-      </span>
-      <span role="rowheader">
-        <time datetime="06:00">
-          06
-        </time>
-      </span>
-      <span role="rowheader">
-        <time datetime="07:00">
-          07
-        </time>
-      </span>
-      <span role="rowheader">
-        <time datetime="08:00">
-          08
-        </time>
-      </span>
-      <span role="rowheader">
-        <time datetime="09:00">
-          09
-        </time>
-      </span>
-      <span role="rowheader">
-        <time datetime="10:00">
-          10
-        </time>
-      </span>
-      <span role="rowheader">
-        <time datetime="11:00">
-          11
-        </time>
-      </span>
-      <span role="rowheader">
-        <time datetime="12:00">
-          12
-        </time>
-      </span>
-      <span role="rowheader">
-        <time datetime="13:00">
-          13
-        </time>
-      </span>
-      <span role="rowheader">
-        <time datetime="14:00">
-          14
-        </time>
-      </span>
-      <span role="rowheader">
-        <time datetime="15:00">
-          15
-        </time>
-      </span>
-      <span role="rowheader">
-        <time datetime="16:00">
-          16
-        </time>
-      </span>
-      <span role="rowheader">
-        <time datetime="17:00">
-          17
-        </time>
-      </span>
-      <span role="rowheader">
-        <time datetime="18:00">
-          18
-        </time>
-      </span>
-      <span role="rowheader">
-        <time datetime="19:00">
-          19
-        </time>
-      </span>
-      <span role="rowheader">
-        <time datetime="20:00">
-          20
-        </time>
-      </span>
-      <span role="rowheader">
-        <time datetime="21:00">
-          21
-        </time>
-      </span>
-      <span role="rowheader">
-        <time datetime="22:00">
-          22
-        </time>
-      </span>
-      <span role="rowheader">
-        <time datetime="23:00">
-          23
-        </time>
-      </span>
-    </div>
-    <div
-      class="calendar-grid-presentation"
-      role="presentation"
-    >
-      <div
-        class="hours"
-        role="list"
-      >
-        <div role="listitem">
-        </div>
-        <div role="listitem">
-        </div>
-        <div role="listitem">
-        </div>
-        <div role="listitem">
-        </div>
-        <div role="listitem">
-        </div>
-        <div role="listitem">
-        </div>
-        <div role="listitem">
-        </div>
-        <div role="listitem">
-        </div>
-        <div role="listitem">
-        </div>
-        <div role="listitem">
-        </div>
-        <div role="listitem">
-        </div>
-        <div role="listitem">
-        </div>
-        <div role="listitem">
-        </div>
-        <div role="listitem">
-        </div>
-        <div role="listitem">
-        </div>
-        <div role="listitem">
-        </div>
-        <div role="listitem">
-        </div>
-        <div role="listitem">
-        </div>
-        <div role="listitem">
-        </div>
-        <div role="listitem">
-        </div>
-        <div role="listitem">
-        </div>
-        <div role="listitem">
-        </div>
-        <div role="listitem">
-        </div>
-        <div role="listitem">
-        </div>
-      </div>
-      <div
-        class="columns"
-        role="presentation"
-      >
-        <div
-          role="gridcell"
-          tabindex="-1"
-        >
-          <slot name="day-0">
-          </slot>
-        </div>
-        <div
-          role="gridcell"
-          tabindex="-1"
-        >
-          <slot name="day-1">
-          </slot>
-        </div>
-        <div
-          role="gridcell"
-          tabindex="-1"
-        >
-          <slot name="day-2">
-          </slot>
-        </div>
-        <div
-          role="gridcell"
-          tabindex="-1"
-        >
-          <slot name="day-3">
-          </slot>
-        </div>
-        <div
-          role="gridcell"
-          tabindex="-1"
-        >
-          <slot name="day-4">
-          </slot>
-        </div>
-        <div
-          role="gridcell"
-          tabindex="-1"
-        >
-          <slot name="day-5">
-          </slot>
-        </div>
-        <div
-          role="gridcell"
-          tabindex="-1"
-        >
-          <slot name="day-6">
-          </slot>
-        </div>
-      </div>
-      <slot>
-      </slot>
-    </div>
-  </div>
-</div>
-
-```
-
 ####   `should match snapshot of 24h timekeeping system`
 
 ```html
@@ -1638,11 +1232,11 @@
       role="columnheader"
       tabindex="-1"
     >
-      <time
-        aria-readonly="true"
-        datetime="2020-12-27"
-      >
-        <h2>
+      <h2>
+        <time
+          aria-readonly="true"
+          datetime="2020-12-27"
+        >
           <em
             aria-label="Sunday, December 27"
             role="button"
@@ -1653,18 +1247,18 @@
           <small aria-hidden="true">
             Sun
           </small>
-        </h2>
-      </time>
+        </time>
+      </h2>
     </div>
     <div
       role="columnheader"
       tabindex="-1"
     >
-      <time
-        aria-readonly="true"
-        datetime="2020-12-28"
-      >
-        <h2>
+      <h2>
+        <time
+          aria-readonly="true"
+          datetime="2020-12-28"
+        >
           <em
             aria-label="Monday, December 28"
             role="button"
@@ -1675,18 +1269,18 @@
           <small aria-hidden="true">
             Mon
           </small>
-        </h2>
-      </time>
+        </time>
+      </h2>
     </div>
     <div
       role="columnheader"
       tabindex="-1"
     >
-      <time
-        aria-readonly="true"
-        datetime="2020-12-29"
-      >
-        <h2>
+      <h2>
+        <time
+          aria-readonly="true"
+          datetime="2020-12-29"
+        >
           <em
             aria-label="Tuesday, December 29"
             role="button"
@@ -1697,18 +1291,18 @@
           <small aria-hidden="true">
             Tue
           </small>
-        </h2>
-      </time>
+        </time>
+      </h2>
     </div>
     <div
       role="columnheader"
       tabindex="-1"
     >
-      <time
-        aria-readonly="true"
-        datetime="2020-12-30"
-      >
-        <h2>
+      <h2>
+        <time
+          aria-readonly="true"
+          datetime="2020-12-30"
+        >
           <em
             aria-label="Wednesday, December 30"
             role="button"
@@ -1719,18 +1313,18 @@
           <small aria-hidden="true">
             Wed
           </small>
-        </h2>
-      </time>
+        </time>
+      </h2>
     </div>
     <div
       role="columnheader"
       tabindex="-1"
     >
-      <time
-        aria-readonly="true"
-        datetime="2020-12-31"
-      >
-        <h2>
+      <h2>
+        <time
+          aria-readonly="true"
+          datetime="2020-12-31"
+        >
           <em
             aria-label="Thursday, December 31"
             role="button"
@@ -1741,18 +1335,18 @@
           <small aria-hidden="true">
             Thu
           </small>
-        </h2>
-      </time>
+        </time>
+      </h2>
     </div>
     <div
       role="columnheader"
       tabindex="-1"
     >
-      <time
-        aria-readonly="true"
-        datetime="2021-01-01"
-      >
-        <h2>
+      <h2>
+        <time
+          aria-readonly="true"
+          datetime="2021-01-01"
+        >
           <em
             aria-label="Friday, January 1"
             role="button"
@@ -1763,18 +1357,18 @@
           <small aria-hidden="true">
             Fri
           </small>
-        </h2>
-      </time>
+        </time>
+      </h2>
     </div>
     <div
       role="columnheader"
       tabindex="-1"
     >
-      <time
-        aria-readonly="true"
-        datetime="2021-01-02"
-      >
-        <h2>
+      <h2>
+        <time
+          aria-readonly="true"
+          datetime="2021-01-02"
+        >
           <em
             aria-label="Saturday, January 2"
             role="button"
@@ -1785,8 +1379,8 @@
           <small aria-hidden="true">
             Sat
           </small>
-        </h2>
-      </time>
+        </time>
+      </h2>
     </div>
   </div>
   <div
diff --git a/components/calendar/src/vwc-calendar.scss b/components/calendar/src/vwc-calendar.scss
index e247f054b..6019dd030 100644
--- a/components/calendar/src/vwc-calendar.scss
+++ b/components/calendar/src/vwc-calendar.scss
@@ -1,9 +1,9 @@
 @use 'partials/vwc-calendar-variables' as calendar-variables;
 @use '@vonage/vvd-design-tokens/build/scss/semantic-variables/scheme-variables';
 @use '@vonage/vvd-typography/scss/typography';
-@use '@vonage/vvd-foundation/scss/mixins/shape-mixins' with(
-	$variable-name: #{calendar-variables.$calendar-shape}
-);
+@use '@vonage/vvd-foundation/scss/mixins/shape-mixins' with (
+	$variable-name: #{calendar-variables.$calendar-shape})
+;
 
 @include shape-mixins.shape(
 	$shapes: (
@@ -28,6 +28,18 @@ ol {
 	grid-template-columns: min-content auto;
 	inline-size: max(100%, 500px);
 	min-inline-size: 880px;
+
+	&::before {
+		position: sticky;
+		z-index: 1;
+		top: 0;
+		display: block;
+		margin-bottom: 0.5rem;
+		background-color: var(#{scheme-variables.$vvd-color-surface-2dp});
+		content: '';
+		grid-column: 1/2;
+		grid-row: 1/2;
+	}
 }
 
 .row-headers {
@@ -50,33 +62,41 @@ ol {
 }
 
 .column-headers {
+	position: sticky;
+	z-index: 1;
+	top: 0;
 	display: grid;
 	grid-area: column-headers;
 	grid-template-columns: repeat(calendar-variables.$total-columns, 1fr);
+
 	[role="columnheader"i] {
 		h2 {
+			padding: 0.25rem 0;
+			margin: 0 0 0.5rem;
+			background-color: var(#{scheme-variables.$vvd-color-surface-2dp});
+		}
+
+		time {
 			@include typography.typography-cat-shorthand('subtitle-2');
-			position: relative;
-			margin: 0;
-			text-align: center;
+			display: grid;
+			align-items: center;
+			grid-template-columns: 1fr auto 1fr;
+			justify-items: center;
+
 			> em {
-				position: absolute;
 				font: inherit;
-				@supports (inset: 0) {
-					inset-inline-start: 0;
-				}
-				@supports not (inset: 0) {
-					left: 0;
-				}
+				justify-self: flex-start;
+
 			}
+
 			> small {
 				@include typography.typography-cat-shorthand('caption');
 				text-transform: uppercase;
 			}
 		}
 	}
-}
 
+}
 .calendar-row {
 	display: contents;
 }
@@ -128,11 +148,7 @@ ol {
 		position: relative;
 		grid-column: var(--column);
 		grid-row: 1 / #{calendar-variables.$total-rows + 1};
-		@for $i from 1 through calendar-variables.$total-columns {
-			&:nth-child(#{$i}) {
-				--column: #{$i};
-			}
-		}
+
 		&:not(:first-child)::after {
 			position: absolute;
 			block-size: 100%;
@@ -140,6 +156,11 @@ ol {
 			content: '';
 			margin-inline-start: -1px;
 		}
+		@for $i from 1 through calendar-variables.$total-columns {
+			&:nth-child(#{$i}) {
+				--column: #{$i};
+			}
+		}
 	}
 }
 
diff --git a/components/calendar/src/vwc-calendar.ts b/components/calendar/src/vwc-calendar.ts
index d5b99ad80..1e9a1a736 100644
--- a/components/calendar/src/vwc-calendar.ts
+++ b/components/calendar/src/vwc-calendar.ts
@@ -112,8 +112,16 @@ export class VWCCalendar extends LitElement {
 	getEventContext = getEventContext.bind(this);
 
 
+	@property({
+		reflect: true,
+		type: Boolean
+	}) stickyHeader?: boolean;
+
+
 	private getDaysArr(dateArr: Date[]): Date[] {
-		if (dateArr.length == this.#daysLength) { return dateArr; }
+		if (dateArr.length == this.#daysLength) {
+			return dateArr;
+		}
 		const lastDate = new Date(dateArr[dateArr.length - 1]);
 		lastDate.setDate(lastDate.getDate() + 1);
 		const concatenatedDateArr = [...dateArr, lastDate];
@@ -158,6 +166,7 @@ export class VWCCalendar extends LitElement {
 		el?.focus();
 	}
 
+
 	private onKeydown(event: KeyboardEvent) {
 		const isArrow = [ARROW_UP, ARROW_RIGHT, ARROW_DOWN, ARROW_LEFT].includes(event.key);
 		isArrow && this.arrowKeysInteractions(event);
@@ -168,7 +177,8 @@ export class VWCCalendar extends LitElement {
 
 		return repeat(
 			Array.from({ length }),
-			() => html`<div role="listitem"></div>`
+			() => html`
+				<div role="listitem"></div>`
 		);
 	}
 
@@ -192,20 +202,25 @@ export class VWCCalendar extends LitElement {
 	protected renderDays(): TemplateResult {
 		return html`
 			<div class="column-headers" role="row">
-				${this.getDaysArr([getFirstDateOfTheWeek(this.datetime)]).map(date => html`
-				<div role="columnheader" tabindex="-1">
-					<time datetime=${getValidDateString(date)} aria-readonly="true">
-						<h2>
-							<!-- TODO add to column aria-labelledby or describedby to count events and related day e.g. "3 events, Sunday, March 8" -->
-							<em tabindex="0" role="button" aria-label=${new Intl.DateTimeFormat(this.locales, { weekday: 'long', month: 'long', day: 'numeric' }).format(date)}>
-								${new Intl.DateTimeFormat(this.locales, { day: '2-digit' }).format(date)}
-							</em>
-							<small aria-hidden="true">
-								${new Intl.DateTimeFormat(this.locales, { weekday: 'short' }).format(date)}
-							</small>
-						</h2>
-					</time>
-				</div>`)}
+				${this.getDaysArr([getFirstDateOfTheWeek(this.datetime)])
+		.map(date => html`
+						<div role="columnheader" tabindex="-1">
+							<h2>
+								<time datetime=${getValidDateString(date)} aria-readonly="true">
+									<!-- TODO add to column aria-labelledby or describedby to count events and related day e.g. "3 events, Sunday, March 8" -->
+									<em tabindex="0" role="button" aria-label=${new Intl.DateTimeFormat(this.locales, {
+		weekday: 'long',
+		month: 'long',
+		day: 'numeric'
+	}).format(date)}>
+										${new Intl.DateTimeFormat(this.locales, { day: '2-digit' }).format(date)}
+									</em>
+									<small aria-hidden="true">
+										${new Intl.DateTimeFormat(this.locales, { weekday: 'short' }).format(date)}
+									</small>
+								</time>
+							</h2>
+						</div>`)}
 			</div>`;
 	}
 
@@ -217,13 +232,21 @@ export class VWCCalendar extends LitElement {
 		return html`
 			<div class="row-headers" role="presentation">
 				${this.#hours.map(h => html`<span role="rowheader">
-					<time datetime="${new Intl.DateTimeFormat(this.locales, { hour: 'numeric', minute: 'numeric', hour12: false }).format(h)}">
-						${new Intl.DateTimeFormat(this.locales, { hour: 'numeric', hour12: this.hour12 }).format(h)}
+					<time datetime="${new Intl.DateTimeFormat(this.locales, {
+		hour: 'numeric',
+		minute: 'numeric',
+		hour12: false
+	}).format(h)}">
+						${new Intl.DateTimeFormat(this.locales, {
+		hour: 'numeric',
+		hour12: this.hour12
+	}).format(h)}
 					</time>
 				</span>`)}
 			</div>`;
 	}
 
+
 	/**
 	 * the html markup
 	 * @internal
@@ -232,7 +255,7 @@ export class VWCCalendar extends LitElement {
 		return html`
 			<div role="grid" @keydown=${this.onKeydown}>
 				${this.renderDays()}
-				<div class="calendar-row" role="row">
+				<div role="row" class="calendar-row">
 					${this.renderHours()}
 					<div class="calendar-grid-presentation" role="presentation">
 						<div class="hours" role="list">
diff --git a/components/calendar/test/calendar.test.js b/components/calendar/test/calendar.test.js
index aba06be85..c796bbc2b 100644
--- a/components/calendar/test/calendar.test.js
+++ b/components/calendar/test/calendar.test.js
@@ -226,11 +226,10 @@ describe('calendar', () => {
 				let context;
 
 				el.addEventListener('click', e => context = el.getEventContext(e));
-
 				gridCell.dispatchEvent(new MouseEvent('click', { composed: true, clientX: 20, clientY: 54 }));
 
 				expect(context.day).to.equal(2);
-				expect(context.hour).to.equal(0.53);
+				expect(context.hour).to.equal(0.2);
 			});
 
 			it('should return day and hour from keyboard \'space\'', async () => {
diff --git a/ui-tests/snapshots/vwc-calendar.png b/ui-tests/snapshots/vwc-calendar.png
index 644874b7d..3ae801306 100644
Binary files a/ui-tests/snapshots/vwc-calendar.png and b/ui-tests/snapshots/vwc-calendar.png differ