diff --git a/PlanTempus.Application/wwwroot/css/employees.css b/PlanTempus.Application/wwwroot/css/employees.css
index 1d79a2e..6bef67b 100644
--- a/PlanTempus.Application/wwwroot/css/employees.css
+++ b/PlanTempus.Application/wwwroot/css/employees.css
@@ -889,7 +889,7 @@ swp-schedule-scroll {
   overflow-x: auto;
 }
 
-/* Når drawer er åben: page-container skal fylde ud til drawer */
+/* Når drawer er åben: page-container styles (animation via JS) */
 body.schedule-drawer-open swp-tab-content[data-tab="schedule"] swp-page-container {
   max-width: none;
   margin: 0;
diff --git a/PlanTempus.Application/wwwroot/ts/modules/employees.ts b/PlanTempus.Application/wwwroot/ts/modules/employees.ts
index dbca62b..be31799 100644
--- a/PlanTempus.Application/wwwroot/ts/modules/employees.ts
+++ b/PlanTempus.Application/wwwroot/ts/modules/employees.ts
@@ -1035,6 +1035,24 @@ class ScheduleController {
       table.style.width = `${rect.width}px`;
     }
 
+    // Animate container med Web Animations API
+    const container = document.querySelector('swp-tab-content[data-tab="schedule"] swp-page-container') as HTMLElement;
+    if (container) {
+      const currentStyles = getComputedStyle(container);
+      const currentMaxWidth = currentStyles.maxWidth;
+      const currentMargin = currentStyles.margin;
+      const currentPaddingRight = currentStyles.paddingRight;
+
+      container.animate([
+        { maxWidth: currentMaxWidth, margin: currentMargin, paddingRight: currentPaddingRight },
+        { maxWidth: 'none', margin: '0px', paddingRight: '420px' }
+      ], {
+        duration: 300,
+        easing: 'ease',
+        fill: 'forwards'
+      });
+    }
+
     this.drawer?.classList.add('open');
     document.body.classList.add('schedule-drawer-open');
   }
@@ -1043,6 +1061,15 @@ class ScheduleController {
    * Close the schedule drawer
    */
   private closeDrawer(): void {
+    const container = document.querySelector('swp-tab-content[data-tab="schedule"] swp-page-container') as HTMLElement;
+    if (container) {
+      // Hent nuværende computed styles for animation
+      const animation = container.getAnimations()[0];
+      if (animation) {
+        animation.cancel();
+      }
+    }
+
     // Fjern låst bredde så tabellen kan tilpasse sig igen
     const table = document.getElementById('scheduleTable');
     if (table) {