my-app/src/components/layout/Navigation.jsx

@@ -19,18 +19,28 @@ const Navigation = () => {
 
 	// Prevent body scroll when mobile menu is open
 	useEffect(() => {
+		// Store original overflow value
+		const originalOverflow = document.body.style.overflow;
+		
 		if (menuOpen) {
 			document.body.style.overflow = 'hidden';
 		} else {
-			document.body.style.overflow = 'unset';
+			document.body.style.overflow = originalOverflow || '';
 		}
 
-		// Cleanup on unmount
+		// Cleanup on unmount - always restore scroll
 		return () => {
-			document.body.style.overflow = 'unset';
+			document.body.style.overflow = originalOverflow || '';
 		};
 	}, [menuOpen]);
 
+	// Additional cleanup on component unmount
+	useEffect(() => {
+		return () => {
+			document.body.style.overflow = '';
+		};
+	}, []);
+
 	const toggleCourses = () => {
 		setCoursesOpen(!coursesOpen);
 	};

my-app/src/index.css

@@ -30,6 +30,8 @@ body {
     display: flex;
     min-width: 320px;
     min-height: 100vh;
+    background-color: var(--bg-primary);
+    color: var(--text-primary);
 
     box-sizing: border-box;
     width: 100vw;

my-app/src/pages/BookingSettings.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { useSettingsContext } from '../context/SettingsContext';
 import styles from './BookingSettings.module.css';
 
@@ -31,6 +31,11 @@ export function BookingSettings() {
 		return `${hours}:${minutes === 0 ? '00' : '30'}`;
 	};
 
+	// Ensure body scroll is enabled when component mounts
+	useEffect(() => {
+		document.body.style.overflow = '';
+	}, []);
+
 	const effectiveToday = getEffectiveToday();
 	const isUsingMockDate = settings.mockToday !== null;
 

my-app/src/react-aria-starter/src/Calendar.css

@@ -4,7 +4,7 @@
 .react-aria-Calendar {
   width: fit-content;
   max-width: 100%;
-  color: var(--text-color);
+  color: var(--text-primary);
 
   header {
     display: flex;
@@ -44,46 +44,46 @@
     }
 
     &:hover:not([data-selected]):not([data-disabled]):not([data-unavailable]) {
-      background-color: var(--highlight-hover);
+      background-color: var(--bg-muted);
     }
 
     &[data-pressed] {
-      background: var(--gray-100);
+      background: var(--bg-tertiary);
     }
 
     &[data-focus-visible] {
-      outline: 2px solid var(--focus-ring-color);
+      outline: 2px solid var(--color-primary);
       outline-offset: 2px;
     }
 
     &[data-selected] {
-      background: var(--highlight-background);
-      color: var(--highlight-foreground);
+      background: var(--color-primary);
+      color: var(--color-white);
     }
   }
 
   .react-aria-CalendarCell {
     &[data-disabled] {
-      color: var(--text-color-disabled);
+      color: var(--text-disabled);
     }
   }
 
   .react-aria-CalendarCell {
     &[data-unavailable] {
       text-decoration: line-through;
-      color: var(--text-color-disabled);
+      color: var(--text-disabled);
     }
   }
 
   .react-aria-CalendarCell {
     &[data-invalid] {
-      background: var(--invalid-color);
-      color: var(--highlight-foreground);
+      background: var(--notification-error-bg);
+      color: var(--notification-error-title);
     }
   }
 
   [slot=errorMessage] {
     font-size: 12px;
-    color: var(--invalid-color);
+    color: var(--notification-error-title);
   }
 }