diff --git a/src/managers/GridManager.ts b/src/managers/GridManager.ts
index 0713d04..9bd0f2e 100644
--- a/src/managers/GridManager.ts
+++ b/src/managers/GridManager.ts
@@ -254,6 +254,15 @@ export class GridManager {
       
       weekHeader.appendChild(header);
     });
+
+    // Add orange header sections in row 2
+    const headerSectionLeft = document.createElement('swp-header-section-left');
+    headerSectionLeft.textContent = 'Left Section';
+    weekHeader.appendChild(headerSectionLeft);
+
+    const headerSectionRight = document.createElement('swp-header-section-right');
+    headerSectionRight.textContent = 'Right Section';
+    weekHeader.appendChild(headerSectionRight);
   }
 
   /**
diff --git a/wwwroot/css/calendar-layout-css.css b/wwwroot/css/calendar-layout-css.css
index ed974e3..c96c5da 100644
--- a/wwwroot/css/calendar-layout-css.css
+++ b/wwwroot/css/calendar-layout-css.css
@@ -39,7 +39,7 @@ swp-calendar-nav {
 swp-calendar-container {
   display: grid;
   grid-template-columns: 60px 1fr 20px;
-  grid-template-rows: 80px 1fr 20px;
+  grid-template-rows: 110px 1fr 20px;
   height: 100%;
   overflow: hidden;
   position: relative;
@@ -50,7 +50,7 @@ swp-calendar-container {
 swp-header-spacer {
   grid-column: 1;
   grid-row: 1;
-  height: 80px; /* Same as week header height */
+  height: 110px; /* Same as week header height */
   background: var(--color-surface);
   border-right: 1px solid var(--color-border);
   border-bottom: 1px solid var(--color-border);
@@ -63,7 +63,7 @@ swp-header-spacer {
 swp-right-header-spacer {
   grid-column: 3;
   grid-row: 1;
-  height: 80px; /* Same as week header height */
+  height: 110px; /* Same as week header height */
   background: var(--color-surface);
   border-left: 1px solid var(--color-border);
   border-bottom: 1px solid var(--color-border);
@@ -76,7 +76,7 @@ swp-week-container {
   grid-column: 2 / 3;
   grid-row: 1 / 3;
   display: grid;
-  grid-template-rows: 80px 1fr;
+  grid-template-rows: 110px 1fr;
   position: relative;
   width: 100%;
   transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -211,17 +211,18 @@ swp-hour-marker::after {
   pointer-events: none;
 }
 
-/* Week header */
+/* Week header with 2 rows */
 swp-week-header {
   display: grid;
   grid-template-columns: repeat(7, minmax(var(--day-column-min-width), 1fr));
+  grid-template-rows: 80px 30px; /* Row 1: day headers, Row 2: orange sections */
   min-width: calc(var(--week-days) * var(--day-column-min-width)); /* Dynamic width */
   background: var(--color-surface);
   border-bottom: 1px solid var(--color-border);
   position: sticky;
   top: 0;
   z-index: 3; /* Lower than header-spacer so it slides under during horizontal scroll */
-  height: 80px; /* Fixed height */
+  height: 110px; /* Updated height: 80px + 30px */
 }
 
 swp-day-header {
@@ -264,6 +265,26 @@ swp-day-header[data-today="true"] swp-day-date {
   margin: 4px auto 0;
 }
 
+/* Orange header sections in row 2 */
+swp-header-section-left {
+  grid-column: 1 / 3; /* Span columns 1-2 */
+  grid-row: 2; /* Row 2 only */
+  background: #ff9800; /* Orange background */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-right: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+swp-header-section-right {
+  grid-column: 3 / 8; /* Span columns 3-7 */
+  grid-row: 2; /* Row 2 only */
+  background: #ff9800; /* Orange background */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 /* Scrollable content */
 swp-scrollable-content {
   overflow-y: auto;
diff --git a/wwwroot/css/calendar.css b/wwwroot/css/calendar.css
index 7bcd48d..36cbdd4 100644
--- a/wwwroot/css/calendar.css
+++ b/wwwroot/css/calendar.css
@@ -226,7 +226,7 @@ swp-week-header {
     position: sticky;
     top: 0;
     z-index: 3;
-    height: 80px; /* Fixed height */
+    height: 110px; /* Fixed height */
 }
 
 swp-day-header {