diff --git a/__snapshots__/calendar.md b/__snapshots__/calendar.md
index 545f63aee..426123a58 100644
--- a/__snapshots__/calendar.md
+++ b/__snapshots__/calendar.md
@@ -12,11 +12,11 @@
       role="columnheader"
       tabindex="-1"
     >
-      <h2>
-        <time
-          aria-readonly="true"
-          datetime="2020-12-27"
-        >
+      <time
+        aria-readonly="true"
+        datetime="2020-12-27"
+      >
+        <h2>
           <em
             aria-label="Sunday, December 27"
             role="button"
@@ -27,18 +27,18 @@
           <small aria-hidden="true">
             Sun
           </small>
-        </time>
-      </h2>
+        </h2>
+      </time>
     </div>
     <div
       role="columnheader"
       tabindex="-1"
     >
-      <h2>
-        <time
-          aria-readonly="true"
-          datetime="2020-12-28"
-        >
+      <time
+        aria-readonly="true"
+        datetime="2020-12-28"
+      >
+        <h2>
           <em
             aria-label="Monday, December 28"
             role="button"
@@ -49,18 +49,18 @@
           <small aria-hidden="true">
             Mon
           </small>
-        </time>
-      </h2>
+        </h2>
+      </time>
     </div>
     <div
       role="columnheader"
       tabindex="-1"
     >
-      <h2>
-        <time
-          aria-readonly="true"
-          datetime="2020-12-29"
-        >
+      <time
+        aria-readonly="true"
+        datetime="2020-12-29"
+      >
+        <h2>
           <em
             aria-label="Tuesday, December 29"
             role="button"
@@ -71,18 +71,18 @@
           <small aria-hidden="true">
             Tue
           </small>
-        </time>
-      </h2>
+        </h2>
+      </time>
     </div>
     <div
       role="columnheader"
       tabindex="-1"
     >
-      <h2>
-        <time
-          aria-readonly="true"
-          datetime="2020-12-30"
-        >
+      <time
+        aria-readonly="true"
+        datetime="2020-12-30"
+      >
+        <h2>
           <em
             aria-label="Wednesday, December 30"
             role="button"
@@ -93,18 +93,18 @@
           <small aria-hidden="true">
             Wed
           </small>
-        </time>
-      </h2>
+        </h2>
+      </time>
     </div>
     <div
       role="columnheader"
       tabindex="-1"
     >
-      <h2>
-        <time
-          aria-readonly="true"
-          datetime="2020-12-31"
-        >
+      <time
+        aria-readonly="true"
+        datetime="2020-12-31"
+      >
+        <h2>
           <em
             aria-label="Thursday, December 31"
             role="button"
@@ -115,18 +115,18 @@
           <small aria-hidden="true">
             Thu
           </small>
-        </time>
-      </h2>
+        </h2>
+      </time>
     </div>
     <div
       role="columnheader"
       tabindex="-1"
     >
-      <h2>
-        <time
-          aria-readonly="true"
-          datetime="2021-01-01"
-        >
+      <time
+        aria-readonly="true"
+        datetime="2021-01-01"
+      >
+        <h2>
           <em
             aria-label="Friday, January 1"
             role="button"
@@ -137,18 +137,18 @@
           <small aria-hidden="true">
             Fri
           </small>
-        </time>
-      </h2>
+        </h2>
+      </time>
     </div>
     <div
       role="columnheader"
       tabindex="-1"
     >
-      <h2>
-        <time
-          aria-readonly="true"
-          datetime="2021-01-02"
-        >
+      <time
+        aria-readonly="true"
+        datetime="2021-01-02"
+      >
+        <h2>
           <em
             aria-label="Saturday, January 2"
             role="button"
@@ -159,8 +159,8 @@
           <small aria-hidden="true">
             Sat
           </small>
-        </time>
-      </h2>
+        </h2>
+      </time>
     </div>
   </div>
   <div
@@ -420,11 +420,11 @@
       role="columnheader"
       tabindex="-1"
     >
-      <h2>
-        <time
-          aria-readonly="true"
-          datetime="2020-12-27"
-        >
+      <time
+        aria-readonly="true"
+        datetime="2020-12-27"
+      >
+        <h2>
           <em
             aria-label="Sunday, December 27"
             role="button"
@@ -435,18 +435,18 @@
           <small aria-hidden="true">
             Sun
           </small>
-        </time>
-      </h2>
+        </h2>
+      </time>
     </div>
     <div
       role="columnheader"
       tabindex="-1"
     >
-      <h2>
-        <time
-          aria-readonly="true"
-          datetime="2020-12-28"
-        >
+      <time
+        aria-readonly="true"
+        datetime="2020-12-28"
+      >
+        <h2>
           <em
             aria-label="Monday, December 28"
             role="button"
@@ -457,18 +457,18 @@
           <small aria-hidden="true">
             Mon
           </small>
-        </time>
-      </h2>
+        </h2>
+      </time>
     </div>
     <div
       role="columnheader"
       tabindex="-1"
     >
-      <h2>
-        <time
-          aria-readonly="true"
-          datetime="2020-12-29"
-        >
+      <time
+        aria-readonly="true"
+        datetime="2020-12-29"
+      >
+        <h2>
           <em
             aria-label="Tuesday, December 29"
             role="button"
@@ -479,18 +479,18 @@
           <small aria-hidden="true">
             Tue
           </small>
-        </time>
-      </h2>
+        </h2>
+      </time>
     </div>
     <div
       role="columnheader"
       tabindex="-1"
     >
-      <h2>
-        <time
-          aria-readonly="true"
-          datetime="2020-12-30"
-        >
+      <time
+        aria-readonly="true"
+        datetime="2020-12-30"
+      >
+        <h2>
           <em
             aria-label="Wednesday, December 30"
             role="button"
@@ -501,18 +501,18 @@
           <small aria-hidden="true">
             Wed
           </small>
-        </time>
-      </h2>
+        </h2>
+      </time>
     </div>
     <div
       role="columnheader"
       tabindex="-1"
     >
-      <h2>
-        <time
-          aria-readonly="true"
-          datetime="2020-12-31"
-        >
+      <time
+        aria-readonly="true"
+        datetime="2020-12-31"
+      >
+        <h2>
           <em
             aria-label="Thursday, December 31"
             role="button"
@@ -523,18 +523,18 @@
           <small aria-hidden="true">
             Thu
           </small>
-        </time>
-      </h2>
+        </h2>
+      </time>
     </div>
     <div
       role="columnheader"
       tabindex="-1"
     >
-      <h2>
-        <time
-          aria-readonly="true"
-          datetime="2021-01-01"
-        >
+      <time
+        aria-readonly="true"
+        datetime="2021-01-01"
+      >
+        <h2>
           <em
             aria-label="Friday, January 1"
             role="button"
@@ -545,18 +545,18 @@
           <small aria-hidden="true">
             Fri
           </small>
-        </time>
-      </h2>
+        </h2>
+      </time>
     </div>
     <div
       role="columnheader"
       tabindex="-1"
     >
-      <h2>
-        <time
-          aria-readonly="true"
-          datetime="2021-01-02"
-        >
+      <time
+        aria-readonly="true"
+        datetime="2021-01-02"
+      >
+        <h2>
           <em
             aria-label="Saturday, January 2"
             role="button"
@@ -567,8 +567,8 @@
           <small aria-hidden="true">
             Sat
           </small>
-        </time>
-      </h2>
+        </h2>
+      </time>
     </div>
   </div>
   <div
@@ -826,11 +826,11 @@
       role="columnheader"
       tabindex="-1"
     >
-      <h2>
-        <time
-          aria-readonly="true"
-          datetime="2020-12-27"
-        >
+      <time
+        aria-readonly="true"
+        datetime="2020-12-27"
+      >
+        <h2>
           <em
             aria-label="Sunday, December 27"
             role="button"
@@ -841,18 +841,18 @@
           <small aria-hidden="true">
             Sun
           </small>
-        </time>
-      </h2>
+        </h2>
+      </time>
     </div>
     <div
       role="columnheader"
       tabindex="-1"
     >
-      <h2>
-        <time
-          aria-readonly="true"
-          datetime="2020-12-28"
-        >
+      <time
+        aria-readonly="true"
+        datetime="2020-12-28"
+      >
+        <h2>
           <em
             aria-label="Monday, December 28"
             role="button"
@@ -863,18 +863,18 @@
           <small aria-hidden="true">
             Mon
           </small>
-        </time>
-      </h2>
+        </h2>
+      </time>
     </div>
     <div
       role="columnheader"
       tabindex="-1"
     >
-      <h2>
-        <time
-          aria-readonly="true"
-          datetime="2020-12-29"
-        >
+      <time
+        aria-readonly="true"
+        datetime="2020-12-29"
+      >
+        <h2>
           <em
             aria-label="Tuesday, December 29"
             role="button"
@@ -885,18 +885,18 @@
           <small aria-hidden="true">
             Tue
           </small>
-        </time>
-      </h2>
+        </h2>
+      </time>
     </div>
     <div
       role="columnheader"
       tabindex="-1"
     >
-      <h2>
-        <time
-          aria-readonly="true"
-          datetime="2020-12-30"
-        >
+      <time
+        aria-readonly="true"
+        datetime="2020-12-30"
+      >
+        <h2>
           <em
             aria-label="Wednesday, December 30"
             role="button"
@@ -907,18 +907,18 @@
           <small aria-hidden="true">
             Wed
           </small>
-        </time>
-      </h2>
+        </h2>
+      </time>
     </div>
     <div
       role="columnheader"
       tabindex="-1"
     >
-      <h2>
-        <time
-          aria-readonly="true"
-          datetime="2020-12-31"
-        >
+      <time
+        aria-readonly="true"
+        datetime="2020-12-31"
+      >
+        <h2>
           <em
             aria-label="Thursday, December 31"
             role="button"
@@ -929,18 +929,18 @@
           <small aria-hidden="true">
             Thu
           </small>
-        </time>
-      </h2>
+        </h2>
+      </time>
     </div>
     <div
       role="columnheader"
       tabindex="-1"
     >
-      <h2>
-        <time
-          aria-readonly="true"
-          datetime="2021-01-01"
-        >
+      <time
+        aria-readonly="true"
+        datetime="2021-01-01"
+      >
+        <h2>
           <em
             aria-label="Friday, January 1"
             role="button"
@@ -951,18 +951,18 @@
           <small aria-hidden="true">
             Fri
           </small>
-        </time>
-      </h2>
+        </h2>
+      </time>
     </div>
     <div
       role="columnheader"
       tabindex="-1"
     >
-      <h2>
-        <time
-          aria-readonly="true"
-          datetime="2021-01-02"
-        >
+      <time
+        aria-readonly="true"
+        datetime="2021-01-02"
+      >
+        <h2>
           <em
             aria-label="Saturday, January 2"
             role="button"
@@ -973,8 +973,8 @@
           <small aria-hidden="true">
             Sat
           </small>
-        </time>
-      </h2>
+        </h2>
+      </time>
     </div>
   </div>
   <div
@@ -1232,11 +1232,11 @@
       role="columnheader"
       tabindex="-1"
     >
-      <h2>
-        <time
-          aria-readonly="true"
-          datetime="2020-12-27"
-        >
+      <time
+        aria-readonly="true"
+        datetime="2020-12-27"
+      >
+        <h2>
           <em
             aria-label="Sunday, December 27"
             role="button"
@@ -1247,18 +1247,18 @@
           <small aria-hidden="true">
             Sun
           </small>
-        </time>
-      </h2>
+        </h2>
+      </time>
     </div>
     <div
       role="columnheader"
       tabindex="-1"
     >
-      <h2>
-        <time
-          aria-readonly="true"
-          datetime="2020-12-28"
-        >
+      <time
+        aria-readonly="true"
+        datetime="2020-12-28"
+      >
+        <h2>
           <em
             aria-label="Monday, December 28"
             role="button"
@@ -1269,18 +1269,18 @@
           <small aria-hidden="true">
             Mon
           </small>
-        </time>
-      </h2>
+        </h2>
+      </time>
     </div>
     <div
       role="columnheader"
       tabindex="-1"
     >
-      <h2>
-        <time
-          aria-readonly="true"
-          datetime="2020-12-29"
-        >
+      <time
+        aria-readonly="true"
+        datetime="2020-12-29"
+      >
+        <h2>
           <em
             aria-label="Tuesday, December 29"
             role="button"
@@ -1291,18 +1291,18 @@
           <small aria-hidden="true">
             Tue
           </small>
-        </time>
-      </h2>
+        </h2>
+      </time>
     </div>
     <div
       role="columnheader"
       tabindex="-1"
     >
-      <h2>
-        <time
-          aria-readonly="true"
-          datetime="2020-12-30"
-        >
+      <time
+        aria-readonly="true"
+        datetime="2020-12-30"
+      >
+        <h2>
           <em
             aria-label="Wednesday, December 30"
             role="button"
@@ -1313,18 +1313,18 @@
           <small aria-hidden="true">
             Wed
           </small>
-        </time>
-      </h2>
+        </h2>
+      </time>
     </div>
     <div
       role="columnheader"
       tabindex="-1"
     >
-      <h2>
-        <time
-          aria-readonly="true"
-          datetime="2020-12-31"
-        >
+      <time
+        aria-readonly="true"
+        datetime="2020-12-31"
+      >
+        <h2>
           <em
             aria-label="Thursday, December 31"
             role="button"
@@ -1335,18 +1335,18 @@
           <small aria-hidden="true">
             Thu
           </small>
-        </time>
-      </h2>
+        </h2>
+      </time>
     </div>
     <div
       role="columnheader"
       tabindex="-1"
     >
-      <h2>
-        <time
-          aria-readonly="true"
-          datetime="2021-01-01"
-        >
+      <time
+        aria-readonly="true"
+        datetime="2021-01-01"
+      >
+        <h2>
           <em
             aria-label="Friday, January 1"
             role="button"
@@ -1357,18 +1357,18 @@
           <small aria-hidden="true">
             Fri
           </small>
-        </time>
-      </h2>
+        </h2>
+      </time>
     </div>
     <div
       role="columnheader"
       tabindex="-1"
     >
-      <h2>
-        <time
-          aria-readonly="true"
-          datetime="2021-01-02"
-        >
+      <time
+        aria-readonly="true"
+        datetime="2021-01-02"
+      >
+        <h2>
           <em
             aria-label="Saturday, January 2"
             role="button"
@@ -1379,8 +1379,8 @@
           <small aria-hidden="true">
             Sat
           </small>
-        </time>
-      </h2>
+        </h2>
+      </time>
     </div>
   </div>
   <div
diff --git a/components/calendar/src/vwc-calendar.scss b/components/calendar/src/vwc-calendar.scss
index 6019dd030..e247f054b 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,18 +28,6 @@ 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 {
@@ -62,41 +50,33 @@ 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');
-			display: grid;
-			align-items: center;
-			grid-template-columns: 1fr auto 1fr;
-			justify-items: center;
-
+			position: relative;
+			margin: 0;
+			text-align: center;
 			> em {
+				position: absolute;
 				font: inherit;
-				justify-self: flex-start;
-
+				@supports (inset: 0) {
+					inset-inline-start: 0;
+				}
+				@supports not (inset: 0) {
+					left: 0;
+				}
 			}
-
 			> small {
 				@include typography.typography-cat-shorthand('caption');
 				text-transform: uppercase;
 			}
 		}
 	}
-
 }
+
 .calendar-row {
 	display: contents;
 }
@@ -148,7 +128,11 @@ 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%;
@@ -156,11 +140,6 @@ 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 1e9a1a736..b3f1766b5 100644
--- a/components/calendar/src/vwc-calendar.ts
+++ b/components/calendar/src/vwc-calendar.ts
@@ -205,8 +205,8 @@ export class VWCCalendar extends LitElement {
 				${this.getDaysArr([getFirstDateOfTheWeek(this.datetime)])
 		.map(date => html`
 						<div role="columnheader" tabindex="-1">
-							<h2>
-								<time datetime=${getValidDateString(date)} aria-readonly="true">
+							<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',
@@ -218,8 +218,8 @@ export class VWCCalendar extends LitElement {
 									<small aria-hidden="true">
 										${new Intl.DateTimeFormat(this.locales, { weekday: 'short' }).format(date)}
 									</small>
-								</time>
-							</h2>
+								</h2>
+							</time>
 						</div>`)}
 			</div>`;
 	}
diff --git a/components/calendar/test/calendar.test.js b/components/calendar/test/calendar.test.js
index c796bbc2b..5d6629342 100644
--- a/components/calendar/test/calendar.test.js
+++ b/components/calendar/test/calendar.test.js
@@ -229,7 +229,7 @@ describe('calendar', () => {
 				gridCell.dispatchEvent(new MouseEvent('click', { composed: true, clientX: 20, clientY: 54 }));
 
 				expect(context.day).to.equal(2);
-				expect(context.hour).to.equal(0.2);
+				expect(context.hour).to.equal(0.53);
 			});
 
 			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 3ae801306..cefa48aef 100644
Binary files a/ui-tests/snapshots/vwc-calendar.png and b/ui-tests/snapshots/vwc-calendar.png differ